@carbon/themes 11.83.0-rc.0 → 11.83.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 +40 -2
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -82,11 +82,49 @@ import {
|
|
|
82
82
|
g100,
|
|
83
83
|
|
|
84
84
|
// Specific token values
|
|
85
|
-
|
|
86
|
-
|
|
85
|
+
background,
|
|
86
|
+
interactive,
|
|
87
|
+
textPrimary,
|
|
87
88
|
} from '@carbon/themes';
|
|
88
89
|
```
|
|
89
90
|
|
|
91
|
+
### Component tokens
|
|
92
|
+
|
|
93
|
+
The DTCG migration introduced per-component token sets. They are exported as
|
|
94
|
+
named objects:
|
|
95
|
+
|
|
96
|
+
> **Breaking change (11.78.0):** Prior to 11.78.0 these objects were
|
|
97
|
+
> double-nested (e.g. `buttonTokens.buttonTokens`). The repeated property is now
|
|
98
|
+
> `undefined` — drop it to get the flat object directly.
|
|
99
|
+
|
|
100
|
+
```js
|
|
101
|
+
import {
|
|
102
|
+
buttonTokens,
|
|
103
|
+
tagTokens,
|
|
104
|
+
notificationTokens,
|
|
105
|
+
statusTokens,
|
|
106
|
+
contentSwitcherTokens,
|
|
107
|
+
} from '@carbon/themes';
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
Each object contains the token values for all four themes. The corresponding
|
|
111
|
+
Sass output is available via `@use '@carbon/themes/scss/component-tokens'`.
|
|
112
|
+
|
|
113
|
+
### Modifying token values
|
|
114
|
+
|
|
115
|
+
Token values are defined in [`src/dtcg/themes.json`](./src/dtcg/themes.json)
|
|
116
|
+
(theme tokens) and [`src/dtcg/components/`](./src/dtcg/components/) (component
|
|
117
|
+
tokens) using the [DTCG token format](https://tr.designtokens.org/format/).
|
|
118
|
+
These are the single source of truth — **do not edit generated files directly**.
|
|
119
|
+
|
|
120
|
+
To add or update a token:
|
|
121
|
+
|
|
122
|
+
1. Edit `src/dtcg/themes.json` (or the relevant `src/dtcg/components/*.json`
|
|
123
|
+
file for component tokens)
|
|
124
|
+
2. Run `yarn build` in this package to regenerate all outputs
|
|
125
|
+
3. Run `yarn test --testPathPatterns=packages/themes` from the repo root to
|
|
126
|
+
confirm nothing regressed
|
|
127
|
+
|
|
90
128
|
## 📖 API Documentation
|
|
91
129
|
|
|
92
130
|
If you're looking for `@carbon/themes` API documentation, check out:
|
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.83.0
|
|
4
|
+
"version": "11.83.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"types": "lib/index.d.ts",
|
|
@@ -36,19 +36,19 @@
|
|
|
36
36
|
"postinstall": "ibmtelemetry --config=telemetry.yml"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@carbon/colors": "^11.60.0
|
|
40
|
-
"@carbon/layout": "^11.61.0
|
|
41
|
-
"@carbon/type": "^11.69.0
|
|
39
|
+
"@carbon/colors": "^11.60.0",
|
|
40
|
+
"@carbon/layout": "^11.61.0",
|
|
41
|
+
"@carbon/type": "^11.69.0",
|
|
42
42
|
"@ibm/telemetry-js": "^1.5.0",
|
|
43
43
|
"color": "^4.0.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@babel/node": "^8.0.0",
|
|
47
47
|
"@babel/preset-env": "^8.0.0",
|
|
48
|
-
"@carbon/cli": "^11.52.0
|
|
48
|
+
"@carbon/cli": "^11.52.0",
|
|
49
49
|
"@carbon/cli-reporter": "^10.9.0",
|
|
50
50
|
"@carbon/scss-generator": "^10.20.0",
|
|
51
|
-
"@carbon/test-utils": "^10.42.0
|
|
51
|
+
"@carbon/test-utils": "^10.42.0",
|
|
52
52
|
"@types/color": "^4.2.1",
|
|
53
53
|
"change-case-all": "^2.1.0",
|
|
54
54
|
"core-js": "^3.16.0",
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"engines": {
|
|
64
64
|
"node": ">=22"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "44f90d8d6b24889af06cee1422ceb37f58e40bed"
|
|
67
67
|
}
|