@carbon/themes 11.4.0 → 11.6.0-rc.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/README.md +11 -12
- package/es/index.js +1187 -54
- package/lib/index.js +1953 -819
- package/package.json +6 -6
- package/src/index.js +2 -1
- package/src/tokens/components.js +84 -0
- package/src/tokens/index.js +54 -1
- package/src/tokens/layout.js +39 -0
- package/src/tokens/type.js +49 -0
- package/src/tokens/v10.js +188 -0
- package/src/tokens/v11TokenGroup.js +20 -0
- package/umd/index.js +1952 -818
package/README.md
CHANGED
|
@@ -35,37 +35,36 @@ If your project is using Sass, you can include this package and the
|
|
|
35
35
|
corresponding default theme by writing the following in your Sass file:
|
|
36
36
|
|
|
37
37
|
```scss
|
|
38
|
-
@
|
|
38
|
+
@use '@carbon/themes/scss/themes';
|
|
39
39
|
```
|
|
40
40
|
|
|
41
41
|
By default, the white theme will be initialized. If you would like to include
|
|
42
|
-
another theme, you can do so by setting the global theme variable
|
|
43
|
-
|
|
42
|
+
another theme, you can do so by setting the global theme variable in the import.
|
|
43
|
+
For example:
|
|
44
44
|
|
|
45
45
|
```scss
|
|
46
|
-
@
|
|
47
|
-
|
|
48
|
-
$
|
|
49
|
-
|
|
50
|
-
// Use the gray 10 theme
|
|
51
|
-
@include carbon--theme();
|
|
46
|
+
@use '@carbon/themes/scss/themes' as *;
|
|
47
|
+
@use '@carbon/themes' with (
|
|
48
|
+
$theme: $g100
|
|
49
|
+
);
|
|
52
50
|
```
|
|
53
51
|
|
|
54
52
|
Inline theming can be done by using the mixin. For example:
|
|
55
53
|
|
|
56
54
|
```scss
|
|
57
|
-
@
|
|
55
|
+
@use '@carbon/themes/scss/themes';
|
|
56
|
+
@use '@carbon/themes/scss/theme';
|
|
58
57
|
|
|
59
58
|
// Use the default white theme here
|
|
60
59
|
|
|
61
60
|
.my-dark-theme {
|
|
62
|
-
@include
|
|
61
|
+
@include theme.theme(themes.$g90) {
|
|
63
62
|
// Use the dark theme here
|
|
64
63
|
}
|
|
65
64
|
}
|
|
66
65
|
|
|
67
66
|
.my-darker-theme {
|
|
68
|
-
@include
|
|
67
|
+
@include theme.theme(themes.$g100) {
|
|
69
68
|
// Use the darker theme here
|
|
70
69
|
}
|
|
71
70
|
}
|