@carbon/themes 11.77.0 → 11.78.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/es/index.js +1360 -1722
- package/js/generated/component-tokens/button.d.ts +98 -0
- package/{src/component-tokens/button/tokens.ts → js/generated/component-tokens/button.js} +65 -97
- package/js/generated/component-tokens/content-switcher.d.ts +25 -0
- package/js/generated/component-tokens/content-switcher.js +25 -0
- package/js/generated/component-tokens/notification.d.ts +65 -0
- package/js/generated/component-tokens/notification.js +65 -0
- package/js/generated/component-tokens/status.d.ts +63 -0
- package/js/generated/component-tokens/status.js +63 -0
- package/js/generated/component-tokens/tag.d.ts +247 -0
- package/js/generated/component-tokens/tag.js +247 -0
- package/js/generated/themes/g10.d.ts +242 -0
- package/js/generated/themes/g10.js +242 -0
- package/js/generated/themes/g100.d.ts +242 -0
- package/js/generated/themes/g100.js +242 -0
- package/js/generated/themes/g90.d.ts +242 -0
- package/js/generated/themes/g90.js +242 -0
- package/js/generated/themes/white.d.ts +242 -0
- package/js/generated/themes/white.js +242 -0
- package/lib/index.d.ts +12 -10
- package/lib/index.js +1360 -1722
- package/package.json +12 -9
- package/scss/generated/_button-tokens.scss +2 -2
- package/src/dtcg/README.md +210 -0
- package/src/dtcg/color-palette.json +3204 -0
- package/src/dtcg/components/button.json +193 -0
- package/src/dtcg/components/content-switcher.json +60 -0
- package/src/dtcg/components/notification.json +130 -0
- package/src/dtcg/components/status.json +122 -0
- package/src/dtcg/components/tag.json +486 -0
- package/src/dtcg/g10.json +1453 -0
- package/src/dtcg/g100.json +1478 -0
- package/src/dtcg/g90.json +1478 -0
- package/src/dtcg/white.json +1345 -0
- package/src/index.ts +96 -10
- package/test-dtcg.scss +28 -0
- package/umd/index.js +1363 -1725
- package/lib/component-tokens/button/index.d.ts +0 -7
- package/lib/component-tokens/button/tokens.d.ts +0 -98
- package/lib/component-tokens/content-switcher/index.d.ts +0 -7
- package/lib/component-tokens/content-switcher/tokens.d.ts +0 -24
- package/lib/component-tokens/notification/index.d.ts +0 -7
- package/lib/component-tokens/notification/tokens.d.ts +0 -64
- package/lib/component-tokens/status/index.d.ts +0 -7
- package/lib/component-tokens/status/tokens.d.ts +0 -62
- package/lib/component-tokens/tag/index.d.ts +0 -7
- package/lib/component-tokens/tag/tokens.d.ts +0 -246
- package/lib/g10.d.ts +0 -242
- package/lib/g100.d.ts +0 -242
- package/lib/g90.d.ts +0 -242
- package/lib/white.d.ts +0 -243
- package/src/component-tokens/button/index.ts +0 -8
- package/src/component-tokens/content-switcher/index.ts +0 -7
- package/src/component-tokens/content-switcher/tokens.ts +0 -29
- package/src/component-tokens/notification/index.ts +0 -8
- package/src/component-tokens/notification/tokens.ts +0 -105
- package/src/component-tokens/status/index.ts +0 -8
- package/src/component-tokens/status/tokens.ts +0 -90
- package/src/component-tokens/tag/index.ts +0 -8
- package/src/component-tokens/tag/tokens.ts +0 -353
- package/src/g10.ts +0 -452
- package/src/g100.ts +0 -453
- package/src/g90.ts +0 -455
- package/src/white.ts +0 -455
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright IBM Corp. 2025, 2026
|
|
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
|
-
|
|
8
|
-
import {
|
|
9
|
-
red50,
|
|
10
|
-
red60,
|
|
11
|
-
orange40,
|
|
12
|
-
orange60,
|
|
13
|
-
yellow30,
|
|
14
|
-
yellow60,
|
|
15
|
-
purple50,
|
|
16
|
-
purple60,
|
|
17
|
-
green40,
|
|
18
|
-
green50,
|
|
19
|
-
blue50,
|
|
20
|
-
blue70,
|
|
21
|
-
gray50,
|
|
22
|
-
gray60,
|
|
23
|
-
white,
|
|
24
|
-
gray100,
|
|
25
|
-
} from '@carbon/colors';
|
|
26
|
-
|
|
27
|
-
export const statusRed = {
|
|
28
|
-
whiteTheme: red60,
|
|
29
|
-
g10: red60,
|
|
30
|
-
g90: red50,
|
|
31
|
-
g100: red50,
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
export const statusOrange = {
|
|
35
|
-
whiteTheme: orange40,
|
|
36
|
-
g10: orange40,
|
|
37
|
-
g90: orange40,
|
|
38
|
-
g100: orange40,
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
export const statusOrangeOutline = {
|
|
42
|
-
whiteTheme: orange60,
|
|
43
|
-
g10: orange60,
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
export const statusYellow = {
|
|
47
|
-
whiteTheme: yellow30,
|
|
48
|
-
g10: yellow30,
|
|
49
|
-
g90: yellow30,
|
|
50
|
-
g100: yellow30,
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
export const statusYellowOutline = {
|
|
54
|
-
whiteTheme: yellow60,
|
|
55
|
-
g10: yellow60,
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
export const statusPurple = {
|
|
59
|
-
whiteTheme: purple60,
|
|
60
|
-
g10: purple60,
|
|
61
|
-
g90: purple50,
|
|
62
|
-
g100: purple50,
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
export const statusGreen = {
|
|
66
|
-
whiteTheme: green50,
|
|
67
|
-
g10: green50,
|
|
68
|
-
g90: green40,
|
|
69
|
-
g100: green40,
|
|
70
|
-
};
|
|
71
|
-
|
|
72
|
-
export const statusBlue = {
|
|
73
|
-
whiteTheme: blue70,
|
|
74
|
-
g10: blue70,
|
|
75
|
-
g90: blue50,
|
|
76
|
-
g100: blue50,
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
export const statusGray = {
|
|
80
|
-
whiteTheme: gray60,
|
|
81
|
-
g10: gray60,
|
|
82
|
-
g90: gray50,
|
|
83
|
-
g100: gray50,
|
|
84
|
-
};
|
|
85
|
-
export const statusAccessibilityBackground = {
|
|
86
|
-
whiteTheme: white,
|
|
87
|
-
g10: white,
|
|
88
|
-
g90: gray100,
|
|
89
|
-
g100: gray100,
|
|
90
|
-
};
|
|
@@ -1,353 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright IBM Corp. 2022, 2026
|
|
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
|
-
|
|
8
|
-
import {
|
|
9
|
-
red20,
|
|
10
|
-
red40,
|
|
11
|
-
red50,
|
|
12
|
-
red70,
|
|
13
|
-
red20Hover,
|
|
14
|
-
red70Hover,
|
|
15
|
-
magenta20,
|
|
16
|
-
magenta40,
|
|
17
|
-
magenta50,
|
|
18
|
-
magenta70,
|
|
19
|
-
magenta20Hover,
|
|
20
|
-
magenta70Hover,
|
|
21
|
-
purple20,
|
|
22
|
-
purple40,
|
|
23
|
-
purple50,
|
|
24
|
-
purple70,
|
|
25
|
-
purple20Hover,
|
|
26
|
-
purple70Hover,
|
|
27
|
-
blue20,
|
|
28
|
-
blue40,
|
|
29
|
-
blue50,
|
|
30
|
-
blue70,
|
|
31
|
-
blue20Hover,
|
|
32
|
-
blue70Hover,
|
|
33
|
-
cyan20,
|
|
34
|
-
cyan40,
|
|
35
|
-
cyan50,
|
|
36
|
-
cyan70,
|
|
37
|
-
cyan20Hover,
|
|
38
|
-
cyan70Hover,
|
|
39
|
-
teal20,
|
|
40
|
-
teal40,
|
|
41
|
-
teal50,
|
|
42
|
-
teal70,
|
|
43
|
-
teal20Hover,
|
|
44
|
-
teal70Hover,
|
|
45
|
-
green20,
|
|
46
|
-
green40,
|
|
47
|
-
green50,
|
|
48
|
-
green70,
|
|
49
|
-
green20Hover,
|
|
50
|
-
green70Hover,
|
|
51
|
-
gray10,
|
|
52
|
-
gray20,
|
|
53
|
-
gray40,
|
|
54
|
-
gray50,
|
|
55
|
-
gray70,
|
|
56
|
-
gray100,
|
|
57
|
-
gray20Hover,
|
|
58
|
-
gray70Hover,
|
|
59
|
-
warmGray10,
|
|
60
|
-
warmGray20,
|
|
61
|
-
warmGray40,
|
|
62
|
-
warmGray50,
|
|
63
|
-
warmGray70,
|
|
64
|
-
warmGray100,
|
|
65
|
-
warmGray20Hover,
|
|
66
|
-
warmGray70Hover,
|
|
67
|
-
coolGray10,
|
|
68
|
-
coolGray20,
|
|
69
|
-
coolGray40,
|
|
70
|
-
coolGray50,
|
|
71
|
-
coolGray70,
|
|
72
|
-
coolGray100,
|
|
73
|
-
coolGray20Hover,
|
|
74
|
-
coolGray70Hover,
|
|
75
|
-
} from '@carbon/colors';
|
|
76
|
-
|
|
77
|
-
export const tagBackgroundRed = {
|
|
78
|
-
whiteTheme: red20,
|
|
79
|
-
g10: red20,
|
|
80
|
-
g90: red70,
|
|
81
|
-
g100: red70,
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
export const tagColorRed = {
|
|
85
|
-
whiteTheme: red70,
|
|
86
|
-
g10: red70,
|
|
87
|
-
g90: red20,
|
|
88
|
-
g100: red20,
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
export const tagHoverRed = {
|
|
92
|
-
whiteTheme: red20Hover,
|
|
93
|
-
g10: red20Hover,
|
|
94
|
-
g90: red70Hover,
|
|
95
|
-
g100: red70Hover,
|
|
96
|
-
};
|
|
97
|
-
|
|
98
|
-
export const tagBackgroundMagenta = {
|
|
99
|
-
whiteTheme: magenta20,
|
|
100
|
-
g10: magenta20,
|
|
101
|
-
g90: magenta70,
|
|
102
|
-
g100: magenta70,
|
|
103
|
-
};
|
|
104
|
-
|
|
105
|
-
export const tagColorMagenta = {
|
|
106
|
-
whiteTheme: magenta70,
|
|
107
|
-
g10: magenta70,
|
|
108
|
-
g90: magenta20,
|
|
109
|
-
g100: magenta20,
|
|
110
|
-
};
|
|
111
|
-
|
|
112
|
-
export const tagHoverMagenta = {
|
|
113
|
-
whiteTheme: magenta20Hover,
|
|
114
|
-
g10: magenta20Hover,
|
|
115
|
-
g90: magenta70Hover,
|
|
116
|
-
g100: magenta70Hover,
|
|
117
|
-
};
|
|
118
|
-
|
|
119
|
-
export const tagBackgroundPurple = {
|
|
120
|
-
whiteTheme: purple20,
|
|
121
|
-
g10: purple20,
|
|
122
|
-
g90: purple70,
|
|
123
|
-
g100: purple70,
|
|
124
|
-
};
|
|
125
|
-
|
|
126
|
-
export const tagColorPurple = {
|
|
127
|
-
whiteTheme: purple70,
|
|
128
|
-
g10: purple70,
|
|
129
|
-
g90: purple20,
|
|
130
|
-
g100: purple20,
|
|
131
|
-
};
|
|
132
|
-
|
|
133
|
-
export const tagHoverPurple = {
|
|
134
|
-
whiteTheme: purple20Hover,
|
|
135
|
-
g10: purple20Hover,
|
|
136
|
-
g90: purple70Hover,
|
|
137
|
-
g100: purple70Hover,
|
|
138
|
-
};
|
|
139
|
-
|
|
140
|
-
export const tagBackgroundBlue = {
|
|
141
|
-
whiteTheme: blue20,
|
|
142
|
-
g10: blue20,
|
|
143
|
-
g90: blue70,
|
|
144
|
-
g100: blue70,
|
|
145
|
-
};
|
|
146
|
-
|
|
147
|
-
export const tagColorBlue = {
|
|
148
|
-
whiteTheme: blue70,
|
|
149
|
-
g10: blue70,
|
|
150
|
-
g90: blue20,
|
|
151
|
-
g100: blue20,
|
|
152
|
-
};
|
|
153
|
-
|
|
154
|
-
export const tagHoverBlue = {
|
|
155
|
-
whiteTheme: blue20Hover,
|
|
156
|
-
g10: blue20Hover,
|
|
157
|
-
g90: blue70Hover,
|
|
158
|
-
g100: blue70Hover,
|
|
159
|
-
};
|
|
160
|
-
|
|
161
|
-
export const tagBackgroundCyan = {
|
|
162
|
-
whiteTheme: cyan20,
|
|
163
|
-
g10: cyan20,
|
|
164
|
-
g90: cyan70,
|
|
165
|
-
g100: cyan70,
|
|
166
|
-
};
|
|
167
|
-
|
|
168
|
-
export const tagColorCyan = {
|
|
169
|
-
whiteTheme: cyan70,
|
|
170
|
-
g10: cyan70,
|
|
171
|
-
g90: cyan20,
|
|
172
|
-
g100: cyan20,
|
|
173
|
-
};
|
|
174
|
-
|
|
175
|
-
export const tagHoverCyan = {
|
|
176
|
-
whiteTheme: cyan20Hover,
|
|
177
|
-
g10: cyan20Hover,
|
|
178
|
-
g90: cyan70Hover,
|
|
179
|
-
g100: cyan70Hover,
|
|
180
|
-
};
|
|
181
|
-
export const tagBackgroundTeal = {
|
|
182
|
-
whiteTheme: teal20,
|
|
183
|
-
g10: teal20,
|
|
184
|
-
g90: teal70,
|
|
185
|
-
g100: teal70,
|
|
186
|
-
};
|
|
187
|
-
export const tagColorTeal = {
|
|
188
|
-
whiteTheme: teal70,
|
|
189
|
-
g10: teal70,
|
|
190
|
-
g90: teal20,
|
|
191
|
-
g100: teal20,
|
|
192
|
-
};
|
|
193
|
-
|
|
194
|
-
export const tagHoverTeal = {
|
|
195
|
-
whiteTheme: teal20Hover,
|
|
196
|
-
g10: teal20Hover,
|
|
197
|
-
g90: teal70Hover,
|
|
198
|
-
g100: teal70Hover,
|
|
199
|
-
};
|
|
200
|
-
|
|
201
|
-
export const tagBackgroundGreen = {
|
|
202
|
-
whiteTheme: green20,
|
|
203
|
-
g10: green20,
|
|
204
|
-
g90: green70,
|
|
205
|
-
g100: green70,
|
|
206
|
-
};
|
|
207
|
-
|
|
208
|
-
export const tagColorGreen = {
|
|
209
|
-
whiteTheme: green70,
|
|
210
|
-
g10: green70,
|
|
211
|
-
g90: green20,
|
|
212
|
-
g100: green20,
|
|
213
|
-
};
|
|
214
|
-
|
|
215
|
-
export const tagHoverGreen = {
|
|
216
|
-
whiteTheme: green20Hover,
|
|
217
|
-
g10: green20Hover,
|
|
218
|
-
g90: green70Hover,
|
|
219
|
-
g100: green70Hover,
|
|
220
|
-
};
|
|
221
|
-
|
|
222
|
-
export const tagBackgroundGray = {
|
|
223
|
-
whiteTheme: gray20,
|
|
224
|
-
g10: gray20,
|
|
225
|
-
g90: gray70,
|
|
226
|
-
g100: gray70,
|
|
227
|
-
};
|
|
228
|
-
|
|
229
|
-
export const tagColorGray = {
|
|
230
|
-
whiteTheme: gray100,
|
|
231
|
-
g10: gray100,
|
|
232
|
-
g90: gray10,
|
|
233
|
-
g100: gray10,
|
|
234
|
-
};
|
|
235
|
-
|
|
236
|
-
export const tagHoverGray = {
|
|
237
|
-
whiteTheme: gray20Hover,
|
|
238
|
-
g10: gray20Hover,
|
|
239
|
-
g90: gray70Hover,
|
|
240
|
-
g100: gray70Hover,
|
|
241
|
-
};
|
|
242
|
-
|
|
243
|
-
export const tagBackgroundCoolGray = {
|
|
244
|
-
whiteTheme: coolGray20,
|
|
245
|
-
g10: coolGray20,
|
|
246
|
-
g90: coolGray70,
|
|
247
|
-
g100: coolGray70,
|
|
248
|
-
};
|
|
249
|
-
|
|
250
|
-
export const tagColorCoolGray = {
|
|
251
|
-
whiteTheme: coolGray100,
|
|
252
|
-
g10: coolGray100,
|
|
253
|
-
g90: coolGray10,
|
|
254
|
-
g100: coolGray10,
|
|
255
|
-
};
|
|
256
|
-
|
|
257
|
-
export const tagHoverCoolGray = {
|
|
258
|
-
whiteTheme: coolGray20Hover,
|
|
259
|
-
g10: coolGray20Hover,
|
|
260
|
-
g90: coolGray70Hover,
|
|
261
|
-
g100: coolGray70Hover,
|
|
262
|
-
};
|
|
263
|
-
|
|
264
|
-
export const tagBackgroundWarmGray = {
|
|
265
|
-
whiteTheme: warmGray20,
|
|
266
|
-
g10: warmGray20,
|
|
267
|
-
g90: warmGray70,
|
|
268
|
-
g100: warmGray70,
|
|
269
|
-
};
|
|
270
|
-
|
|
271
|
-
export const tagColorWarmGray = {
|
|
272
|
-
whiteTheme: warmGray100,
|
|
273
|
-
g10: warmGray100,
|
|
274
|
-
g90: warmGray10,
|
|
275
|
-
g100: warmGray10,
|
|
276
|
-
};
|
|
277
|
-
|
|
278
|
-
export const tagHoverWarmGray = {
|
|
279
|
-
whiteTheme: warmGray20Hover,
|
|
280
|
-
g10: warmGray20Hover,
|
|
281
|
-
g90: warmGray70Hover,
|
|
282
|
-
g100: warmGray70Hover,
|
|
283
|
-
};
|
|
284
|
-
|
|
285
|
-
export const tagBorderRed = {
|
|
286
|
-
whiteTheme: red40,
|
|
287
|
-
g10: red40,
|
|
288
|
-
g90: red50,
|
|
289
|
-
g100: red50,
|
|
290
|
-
};
|
|
291
|
-
|
|
292
|
-
export const tagBorderBlue = {
|
|
293
|
-
whiteTheme: blue40,
|
|
294
|
-
g10: blue40,
|
|
295
|
-
g90: blue50,
|
|
296
|
-
g100: blue50,
|
|
297
|
-
};
|
|
298
|
-
|
|
299
|
-
export const tagBorderCyan = {
|
|
300
|
-
whiteTheme: cyan40,
|
|
301
|
-
g10: cyan40,
|
|
302
|
-
g90: cyan50,
|
|
303
|
-
g100: cyan50,
|
|
304
|
-
};
|
|
305
|
-
|
|
306
|
-
export const tagBorderTeal = {
|
|
307
|
-
whiteTheme: teal40,
|
|
308
|
-
g10: teal40,
|
|
309
|
-
g90: teal50,
|
|
310
|
-
g100: teal50,
|
|
311
|
-
};
|
|
312
|
-
|
|
313
|
-
export const tagBorderGreen = {
|
|
314
|
-
whiteTheme: green40,
|
|
315
|
-
g10: green40,
|
|
316
|
-
g90: green50,
|
|
317
|
-
g100: green50,
|
|
318
|
-
};
|
|
319
|
-
|
|
320
|
-
export const tagBorderMagenta = {
|
|
321
|
-
whiteTheme: magenta40,
|
|
322
|
-
g10: magenta40,
|
|
323
|
-
g90: magenta50,
|
|
324
|
-
g100: magenta50,
|
|
325
|
-
};
|
|
326
|
-
|
|
327
|
-
export const tagBorderPurple = {
|
|
328
|
-
whiteTheme: purple40,
|
|
329
|
-
g10: purple40,
|
|
330
|
-
g90: purple50,
|
|
331
|
-
g100: purple50,
|
|
332
|
-
};
|
|
333
|
-
|
|
334
|
-
export const tagBorderGray = {
|
|
335
|
-
whiteTheme: gray40,
|
|
336
|
-
g10: gray40,
|
|
337
|
-
g90: gray50,
|
|
338
|
-
g100: gray50,
|
|
339
|
-
};
|
|
340
|
-
|
|
341
|
-
export const tagBorderCoolGray = {
|
|
342
|
-
whiteTheme: coolGray40,
|
|
343
|
-
g10: coolGray40,
|
|
344
|
-
g90: coolGray50,
|
|
345
|
-
g100: coolGray50,
|
|
346
|
-
};
|
|
347
|
-
|
|
348
|
-
export const tagBorderWarmGray = {
|
|
349
|
-
whiteTheme: warmGray40,
|
|
350
|
-
g10: warmGray40,
|
|
351
|
-
g90: warmGray50,
|
|
352
|
-
g100: warmGray50,
|
|
353
|
-
};
|