@carbon/styles 1.5.0-rc.0 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/styles.css +90 -100
- package/css/styles.min.css +1 -1
- package/package.json +11 -10
- package/scss/__tests__/zone-test.js +76 -0
- package/scss/_zone.scss +2 -2
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/styles",
|
|
3
3
|
"description": "Styles for the Carbon Design System",
|
|
4
|
-
"version": "1.5.0
|
|
4
|
+
"version": "1.5.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -32,21 +32,22 @@
|
|
|
32
32
|
"sass": "^1.33.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@carbon/colors": "^11.3.0
|
|
36
|
-
"@carbon/feature-flags": "^0.8.0
|
|
37
|
-
"@carbon/grid": "^11.3.0
|
|
38
|
-
"@carbon/layout": "^11.3.0
|
|
39
|
-
"@carbon/motion": "^11.2.0
|
|
40
|
-
"@carbon/themes": "^11.4.0
|
|
41
|
-
"@carbon/type": "^11.4.0
|
|
35
|
+
"@carbon/colors": "^11.3.0",
|
|
36
|
+
"@carbon/feature-flags": "^0.8.0",
|
|
37
|
+
"@carbon/grid": "^11.3.0",
|
|
38
|
+
"@carbon/layout": "^11.3.0",
|
|
39
|
+
"@carbon/motion": "^11.2.0",
|
|
40
|
+
"@carbon/themes": "^11.4.0",
|
|
41
|
+
"@carbon/type": "^11.4.0",
|
|
42
42
|
"@ibm/plex": "6.0.0-next.6"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@carbon/test-utils": "^10.25.0
|
|
45
|
+
"@carbon/test-utils": "^10.25.0",
|
|
46
46
|
"autoprefixer": "^10.4.7",
|
|
47
47
|
"browserslist-config-carbon": "^11.0.0",
|
|
48
48
|
"css": "^3.0.0",
|
|
49
49
|
"cssnano": "^5.1.9",
|
|
50
|
+
"lodash.isequal": "^4.5.0",
|
|
50
51
|
"postcss": "^8.4.14",
|
|
51
52
|
"postcss-flexbugs-fixes": "^5.0.2",
|
|
52
53
|
"rimraf": "^3.0.2",
|
|
@@ -57,5 +58,5 @@
|
|
|
57
58
|
"scss/**/*.scss",
|
|
58
59
|
"scss/**/*.css"
|
|
59
60
|
],
|
|
60
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "b9bfd3eceeda13379b974831fb860ff6bd8064c5"
|
|
61
62
|
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2018, 2018
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
* @jest-environment node
|
|
8
|
+
*/
|
|
9
|
+
|
|
10
|
+
'use strict';
|
|
11
|
+
|
|
12
|
+
const { SassRenderer } = require('@carbon/test-utils/scss');
|
|
13
|
+
const css = require('css');
|
|
14
|
+
const isEqual = require('lodash.isequal');
|
|
15
|
+
|
|
16
|
+
const { render } = SassRenderer.create(__dirname);
|
|
17
|
+
|
|
18
|
+
describe('zone', () => {
|
|
19
|
+
it('should set a component token value to the theme of a zone', async () => {
|
|
20
|
+
const { get, result } = await render(`
|
|
21
|
+
@use '../themes';
|
|
22
|
+
@use '../components/button/tokens';
|
|
23
|
+
@use '../zone';
|
|
24
|
+
|
|
25
|
+
$_: get('themes', (
|
|
26
|
+
white: themes.$white,
|
|
27
|
+
g10: themes.$g10,
|
|
28
|
+
g90: themes.$g90,
|
|
29
|
+
g100: themes.$g100,
|
|
30
|
+
));
|
|
31
|
+
$_: get('tokens', tokens.$button-tokens);
|
|
32
|
+
`);
|
|
33
|
+
|
|
34
|
+
const themes = Array.from(Object.entries(get('themes').value));
|
|
35
|
+
const tokensByTheme = new Map(
|
|
36
|
+
themes.map(([theme]) => {
|
|
37
|
+
return [theme, new Map()];
|
|
38
|
+
})
|
|
39
|
+
);
|
|
40
|
+
|
|
41
|
+
// Group each of the button tokens into their values by theme
|
|
42
|
+
const buttonTokens = get('tokens');
|
|
43
|
+
for (const [token, { values }] of Object.entries(buttonTokens.value)) {
|
|
44
|
+
for (const { theme, value } of values) {
|
|
45
|
+
const match = themes.find(([_id, themeMap]) => {
|
|
46
|
+
return isEqual(themeMap, theme);
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
tokensByTheme.get(match[0]).set(token, value);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
// When including the `_zone.scss` file, we generate a stylesheet with four
|
|
54
|
+
// classes, one per theme.
|
|
55
|
+
const { stylesheet } = css.parse(result.css.toString());
|
|
56
|
+
|
|
57
|
+
for (const rule of stylesheet.rules) {
|
|
58
|
+
// For each selector, we check that every button token that we have
|
|
59
|
+
// defined for this theme is emitted in CSS with the expected value
|
|
60
|
+
const [_prefix, theme] = rule.selectors[0].split('--');
|
|
61
|
+
const tokens = tokensByTheme.get(theme);
|
|
62
|
+
const includesComponentTokens = Array.from(tokens.entries()).every(
|
|
63
|
+
([token, value]) => {
|
|
64
|
+
return rule.declarations.find((declaration) => {
|
|
65
|
+
return (
|
|
66
|
+
declaration.property.includes(token) &&
|
|
67
|
+
declaration.value === value
|
|
68
|
+
);
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
);
|
|
72
|
+
|
|
73
|
+
expect(includesComponentTokens).toBe(true);
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
});
|
package/scss/_zone.scss
CHANGED
|
@@ -78,9 +78,9 @@ $-components: (
|
|
|
78
78
|
$theme-values: map.get($value, values);
|
|
79
79
|
|
|
80
80
|
@each $theme-value in $theme-values {
|
|
81
|
-
$theme: map.get($theme-value, theme);
|
|
82
81
|
$value: map.get($theme-value, value);
|
|
83
|
-
|
|
82
|
+
|
|
83
|
+
@if theme.matches(map.get($theme-value, theme), $theme) and
|
|
84
84
|
meta.type-of($value) ==
|
|
85
85
|
color
|
|
86
86
|
{
|