@carbon/themes 11.3.0 → 11.5.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/docs/sass.md +2 -2
- package/package.json +10 -10
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
|
}
|
package/docs/sass.md
CHANGED
|
@@ -56,7 +56,7 @@ You can also extend the theme with your own custom tokens:
|
|
|
56
56
|
$fallback: themes.$g100,
|
|
57
57
|
$theme: (
|
|
58
58
|
token-01: #000000,
|
|
59
|
-
)
|
|
59
|
+
)
|
|
60
60
|
);
|
|
61
61
|
```
|
|
62
62
|
|
|
@@ -181,7 +181,7 @@ Sass would not compile when doing the following:
|
|
|
181
181
|
```scss
|
|
182
182
|
@use '@carbon/themes/scss/modules/themes';
|
|
183
183
|
@use '@carbon/themes' with (
|
|
184
|
-
$theme: themes.$g100
|
|
184
|
+
$theme: themes.$g100
|
|
185
185
|
);
|
|
186
186
|
```
|
|
187
187
|
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@carbon/themes",
|
|
3
3
|
"description": "Themes for applying color in the Carbon Design System",
|
|
4
|
-
"version": "11.
|
|
4
|
+
"version": "11.5.0-rc.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -29,18 +29,18 @@
|
|
|
29
29
|
"build": "yarn clean && carbon-cli bundle src/index.js --name CarbonThemes && babel-node --presets '@babel/preset-env' tasks/build.js && carbon-cli check \"scss/*.scss\""
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@carbon/colors": "^11.
|
|
33
|
-
"@carbon/layout": "^11.
|
|
34
|
-
"@carbon/type": "^11.
|
|
32
|
+
"@carbon/colors": "^11.3.0",
|
|
33
|
+
"@carbon/layout": "^11.4.0-rc.0",
|
|
34
|
+
"@carbon/type": "^11.5.0-rc.0",
|
|
35
35
|
"color": "^3.1.2"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@babel/node": "^7.
|
|
39
|
-
"@babel/preset-env": "^7.
|
|
40
|
-
"@carbon/cli": "^11.
|
|
38
|
+
"@babel/node": "^7.17.10",
|
|
39
|
+
"@babel/preset-env": "^7.18.2",
|
|
40
|
+
"@carbon/cli": "^11.2.0",
|
|
41
41
|
"@carbon/cli-reporter": "^10.5.0",
|
|
42
|
-
"@carbon/scss-generator": "^10.
|
|
43
|
-
"@carbon/test-utils": "^10.
|
|
42
|
+
"@carbon/scss-generator": "^10.14.0",
|
|
43
|
+
"@carbon/test-utils": "^10.25.0",
|
|
44
44
|
"change-case": "^4.1.1",
|
|
45
45
|
"core-js": "^3.16.0",
|
|
46
46
|
"fs-extra": "^10.0.0",
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"rimraf": "^3.0.0"
|
|
49
49
|
},
|
|
50
50
|
"sideEffects": false,
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "24655f8eaf108c43ac036e71360d4d3dc09a3bf4"
|
|
52
52
|
}
|