@carbon/themes 10.54.0 → 11.0.1

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.
Files changed (45) hide show
  1. package/es/index.js +1725 -1163
  2. package/index.scss +3 -3
  3. package/lib/index.js +1716 -1333
  4. package/package.json +8 -8
  5. package/scss/{modules/_config.scss → _config.scss} +0 -0
  6. package/scss/{modules/_theme.scss → _theme.scss} +0 -0
  7. package/scss/{modules/_themes.scss → _themes.scss} +0 -0
  8. package/scss/_tokens.scss +1 -1
  9. package/scss/{modules/_utilities.scss → _utilities.scss} +0 -0
  10. package/scss/compat/generated/_tokens.scss +2 -2
  11. package/scss/generated/_themes.scss +401 -2924
  12. package/scss/generated/_tokens.scss +300 -3171
  13. package/src/g10.js +144 -224
  14. package/src/g100.js +148 -220
  15. package/src/g90.js +147 -221
  16. package/src/index.js +7 -12
  17. package/src/{next/tokens → tokens}/Token.js +0 -0
  18. package/src/{next/tokens → tokens}/TokenFormat.js +0 -0
  19. package/src/{next/tokens → tokens}/TokenGroup.js +0 -0
  20. package/src/{next/tokens → tokens}/TokenSet.js +0 -0
  21. package/src/{next/tokens → tokens}/index.js +0 -0
  22. package/src/{next/tokens → tokens}/v11TokenGroup.js +0 -0
  23. package/src/{next/tokens → tokens}/v11TokenSet.js +0 -0
  24. package/src/{v9.js → v10/g10.js} +98 -70
  25. package/src/v10/g100.js +339 -0
  26. package/src/v10/g90.js +341 -0
  27. package/src/{next → v10}/index.js +4 -3
  28. package/{metadata.yml → src/v10/metadata.yml} +0 -0
  29. package/src/{tokens.js → v10/tokens.js} +0 -0
  30. package/src/v10/white.js +343 -0
  31. package/src/white.js +144 -224
  32. package/umd/index.js +1719 -1336
  33. package/scss/_mixins.scss +0 -39
  34. package/scss/_theme-maps.scss +0 -9
  35. package/scss/generated/_mixins.scss +0 -3622
  36. package/scss/index.scss +0 -8
  37. package/scss/modules/_tokens.scss +0 -8
  38. package/scss/modules/generated/_themes.scss +0 -432
  39. package/scss/modules/generated/_tokens.scss +0 -308
  40. package/scss/themes.scss +0 -10
  41. package/src/g80.js +0 -351
  42. package/src/next/g10.js +0 -268
  43. package/src/next/g100.js +0 -275
  44. package/src/next/g90.js +0 -275
  45. package/src/next/white.js +0 -271
package/scss/index.scss DELETED
@@ -1,8 +0,0 @@
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
-
8
- @import 'themes';
@@ -1,8 +0,0 @@
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
-
8
- @forward 'generated/tokens';
@@ -1,432 +0,0 @@
1
- // Code generated by @carbon/themes. DO NOT EDIT.
2
- //
3
- // Copyright IBM Corp. 2018, 2019
4
- //
5
- // This source code is licensed under the Apache-2.0 license found in the
6
- // LICENSE file in the root directory of this source tree.
7
- //
8
-
9
- @use 'sass:map';
10
- @use '@carbon/layout';
11
- @use '@carbon/type';
12
- @use '../utilities';
13
-
14
- $white: (
15
- background: #ffffff,
16
- background-active: rgba(141, 141, 141, 0.5),
17
- background-brand: #0f62fe,
18
- background-hover: rgba(141, 141, 141, 0.12),
19
- background-inverse: #393939,
20
- background-inverse-hover: #474747,
21
- background-selected: rgba(141, 141, 141, 0.2),
22
- background-selected-hover: rgba(141, 141, 141, 0.32),
23
- border-disabled: #c6c6c6,
24
- border-interactive: #0f62fe,
25
- border-inverse: #161616,
26
- border-strong-01: #8d8d8d,
27
- border-strong-02: #8d8d8d,
28
- border-strong-03: #8d8d8d,
29
- border-subtle-00: #e0e0e0,
30
- border-subtle-01: #e0e0e0,
31
- border-subtle-02: #e0e0e0,
32
- border-subtle-03: #e0e0e0,
33
- border-subtle-selected-01: #c6c6c6,
34
- border-subtle-selected-02: #c6c6c6,
35
- border-subtle-selected-03: #c6c6c6,
36
- field-01: #f4f4f4,
37
- field-02: #ffffff,
38
- field-03: #f4f4f4,
39
- field-hover-01: #e8e8e8,
40
- field-hover-02: #e8e8e8,
41
- field-hover-03: #e8e8e8,
42
- focus: #0f62fe,
43
- focus-inset: #ffffff,
44
- focus-inverse: #ffffff,
45
- highlight: #d0e2ff,
46
- icon-disabled: rgba(22, 22, 22, 0.25),
47
- icon-inverse: #ffffff,
48
- icon-on-color: #ffffff,
49
- icon-on-color-disabled: #8d8d8d,
50
- icon-primary: #161616,
51
- icon-secondary: #525252,
52
- interactive: #0f62fe,
53
- layer-01: #f4f4f4,
54
- layer-02: #ffffff,
55
- layer-03: #f4f4f4,
56
- layer-accent-01: #e0e0e0,
57
- layer-accent-02: #e0e0e0,
58
- layer-accent-03: #e0e0e0,
59
- layer-accent-active-01: #a8a8a8,
60
- layer-accent-active-02: #a8a8a8,
61
- layer-accent-active-03: #a8a8a8,
62
- layer-accent-hover-01: #d1d1d1,
63
- layer-accent-hover-02: #d1d1d1,
64
- layer-accent-hover-03: #d1d1d1,
65
- layer-active-01: #c6c6c6,
66
- layer-active-02: #c6c6c6,
67
- layer-active-03: #c6c6c6,
68
- layer-hover-01: #e8e8e8,
69
- layer-hover-02: #e8e8e8,
70
- layer-hover-03: #e8e8e8,
71
- layer-selected-01: #e0e0e0,
72
- layer-selected-02: #e0e0e0,
73
- layer-selected-03: #e0e0e0,
74
- layer-selected-disabled: #8d8d8d,
75
- layer-selected-hover-01: #d1d1d1,
76
- layer-selected-hover-02: #d1d1d1,
77
- layer-selected-hover-03: #d1d1d1,
78
- layer-selected-inverse: #161616,
79
- link-inverse: #78a9ff,
80
- link-inverse-active: #f4f4f4,
81
- link-inverse-hover: #a6c8ff,
82
- link-primary: #0f62fe,
83
- link-primary-hover: #0043ce,
84
- link-secondary: #0043ce,
85
- link-visited: #8a3ffc,
86
- overlay: rgba(22, 22, 22, 0.5),
87
- shadow: rgba(0, 0, 0, 0.3),
88
- skeleton-background: #e8e8e8,
89
- skeleton-element: #c6c6c6,
90
- support-caution-major: #ff832b,
91
- support-caution-minor: #f1c21b,
92
- support-caution-undefined: #8a3ffc,
93
- support-error: #da1e28,
94
- support-error-inverse: #fa4d56,
95
- support-info: #0043ce,
96
- support-info-inverse: #4589ff,
97
- support-success: #24a148,
98
- support-success-inverse: #42be65,
99
- support-warning: #f1c21b,
100
- support-warning-inverse: #f1c21b,
101
- text-disabled: rgba(22, 22, 22, 0.25),
102
- text-error: #da1e28,
103
- text-helper: #6f6f6f,
104
- text-inverse: #ffffff,
105
- text-on-color: #ffffff,
106
- text-on-color-disabled: #8d8d8d,
107
- text-placeholder: rgba(22, 22, 22, 0.4),
108
- text-primary: #161616,
109
- text-secondary: #525252,
110
- toggle-off: #8d8d8d,
111
- ) !default;
112
- $white: utilities.merge(
113
- $white,
114
- layout.$spacing,
115
- layout.$fluid-spacing,
116
- type.$tokens
117
- );
118
-
119
- $g10: (
120
- background: #f4f4f4,
121
- background-active: rgba(141, 141, 141, 0.5),
122
- background-brand: #0f62fe,
123
- background-hover: rgba(141, 141, 141, 0.12),
124
- background-inverse: #393939,
125
- background-inverse-hover: #474747,
126
- background-selected: rgba(141, 141, 141, 0.2),
127
- background-selected-hover: rgba(141, 141, 141, 0.32),
128
- border-disabled: #c6c6c6,
129
- border-interactive: #0f62fe,
130
- border-inverse: #161616,
131
- border-strong-01: #8d8d8d,
132
- border-strong-02: #8d8d8d,
133
- border-strong-03: #8d8d8d,
134
- border-subtle-00: #e0e0e0,
135
- border-subtle-01: #e0e0e0,
136
- border-subtle-02: #e0e0e0,
137
- border-subtle-03: #e0e0e0,
138
- border-subtle-selected-01: #c6c6c6,
139
- border-subtle-selected-02: #c6c6c6,
140
- border-subtle-selected-03: #c6c6c6,
141
- field-01: #ffffff,
142
- field-02: #f4f4f4,
143
- field-03: #ffffff,
144
- field-hover-01: #e8e8e8,
145
- field-hover-02: #e8e8e8,
146
- field-hover-03: #e8e8e8,
147
- focus: #0f62fe,
148
- focus-inset: #ffffff,
149
- focus-inverse: #ffffff,
150
- highlight: #d0e2ff,
151
- icon-disabled: rgba(22, 22, 22, 0.25),
152
- icon-inverse: #ffffff,
153
- icon-on-color: #ffffff,
154
- icon-on-color-disabled: #8d8d8d,
155
- icon-primary: #161616,
156
- icon-secondary: #525252,
157
- interactive: #0f62fe,
158
- layer-01: #ffffff,
159
- layer-02: #f4f4f4,
160
- layer-03: #ffffff,
161
- layer-accent-01: #e0e0e0,
162
- layer-accent-02: #e0e0e0,
163
- layer-accent-03: #e0e0e0,
164
- layer-accent-active-01: #a8a8a8,
165
- layer-accent-active-02: #a8a8a8,
166
- layer-accent-active-03: #a8a8a8,
167
- layer-accent-hover-01: #d1d1d1,
168
- layer-accent-hover-02: #d1d1d1,
169
- layer-accent-hover-03: #d1d1d1,
170
- layer-active-01: #c6c6c6,
171
- layer-active-02: #c6c6c6,
172
- layer-active-03: #c6c6c6,
173
- layer-hover-01: #e8e8e8,
174
- layer-hover-02: #e8e8e8,
175
- layer-hover-03: #e8e8e8,
176
- layer-selected-01: #e0e0e0,
177
- layer-selected-02: #e0e0e0,
178
- layer-selected-03: #e0e0e0,
179
- layer-selected-disabled: #8d8d8d,
180
- layer-selected-hover-01: #d1d1d1,
181
- layer-selected-hover-02: #d1d1d1,
182
- layer-selected-hover-03: #d1d1d1,
183
- layer-selected-inverse: #161616,
184
- link-inverse: #78a9ff,
185
- link-inverse-active: #f4f4f4,
186
- link-inverse-hover: #a6c8ff,
187
- link-primary: #0f62fe,
188
- link-primary-hover: #0043ce,
189
- link-secondary: #0043ce,
190
- link-visited: #8a3ffc,
191
- overlay: rgba(22, 22, 22, 0.5),
192
- shadow: rgba(0, 0, 0, 0.3),
193
- skeleton-background: #e8e8e8,
194
- skeleton-element: #c6c6c6,
195
- support-caution-major: #ff832b,
196
- support-caution-minor: #f1c21b,
197
- support-caution-undefined: #8a3ffc,
198
- support-error: #da1e28,
199
- support-error-inverse: #fa4d56,
200
- support-info: #0043ce,
201
- support-info-inverse: #4589ff,
202
- support-success: #24a148,
203
- support-success-inverse: #42be65,
204
- support-warning: #f1c21b,
205
- support-warning-inverse: #f1c21b,
206
- text-disabled: rgba(22, 22, 22, 0.25),
207
- text-error: #da1e28,
208
- text-helper: #6f6f6f,
209
- text-inverse: #ffffff,
210
- text-on-color: #ffffff,
211
- text-on-color-disabled: #8d8d8d,
212
- text-placeholder: rgba(22, 22, 22, 0.4),
213
- text-primary: #161616,
214
- text-secondary: #525252,
215
- toggle-off: #8d8d8d,
216
- ) !default;
217
- $g10: utilities.merge(
218
- $g10,
219
- layout.$spacing,
220
- layout.$fluid-spacing,
221
- type.$tokens
222
- );
223
-
224
- $g90: (
225
- background: #262626,
226
- background-active: rgba(141, 141, 141, 0.4),
227
- background-brand: #0f62fe,
228
- background-hover: rgba(141, 141, 141, 0.16),
229
- background-inverse: #f4f4f4,
230
- background-inverse-hover: #e8e8e8,
231
- background-selected: rgba(141, 141, 141, 0.24),
232
- background-selected-hover: rgba(141, 141, 141, 0.32),
233
- border-disabled: rgba(141, 141, 141, 0.5),
234
- border-interactive: #4589ff,
235
- border-inverse: #f4f4f4,
236
- border-strong-01: #8d8d8d,
237
- border-strong-02: #a8a8a8,
238
- border-strong-03: #c6c6c6,
239
- border-subtle-00: #525252,
240
- border-subtle-01: #525252,
241
- border-subtle-02: #6f6f6f,
242
- border-subtle-03: #8d8d8d,
243
- border-subtle-selected-01: #6f6f6f,
244
- border-subtle-selected-02: #8d8d8d,
245
- border-subtle-selected-03: #a8a8a8,
246
- field-01: #393939,
247
- field-02: #525252,
248
- field-03: #6f6f6f,
249
- field-hover-01: #474747,
250
- field-hover-02: #636363,
251
- field-hover-03: #5e5e5e,
252
- focus: #ffffff,
253
- focus-inset: #161616,
254
- focus-inverse: #0f62fe,
255
- highlight: #0043ce,
256
- icon-disabled: rgba(244, 244, 244, 0.25),
257
- icon-inverse: #161616,
258
- icon-on-color: #ffffff,
259
- icon-on-color-disabled: rgba(255, 255, 255, 0.25),
260
- icon-primary: #f4f4f4,
261
- icon-secondary: #c6c6c6,
262
- interactive: #4589ff,
263
- layer-01: #393939,
264
- layer-02: #525252,
265
- layer-03: #6f6f6f,
266
- layer-accent-01: #525252,
267
- layer-accent-02: #6f6f6f,
268
- layer-accent-03: #8d8d8d,
269
- layer-accent-active-01: #8d8d8d,
270
- layer-accent-active-02: #393939,
271
- layer-accent-active-03: #525252,
272
- layer-accent-hover-01: #636363,
273
- layer-accent-hover-02: #5e5e5e,
274
- layer-accent-hover-03: #7a7a7a,
275
- layer-active-01: #6f6f6f,
276
- layer-active-02: #8d8d8d,
277
- layer-active-03: #393939,
278
- layer-hover-01: #474747,
279
- layer-hover-02: #636363,
280
- layer-hover-03: #5e5e5e,
281
- layer-selected-01: #525252,
282
- layer-selected-02: #6f6f6f,
283
- layer-selected-03: #8d8d8d,
284
- layer-selected-disabled: #a8a8a8,
285
- layer-selected-hover-01: #636363,
286
- layer-selected-hover-02: #5e5e5e,
287
- layer-selected-hover-03: #7a7a7a,
288
- layer-selected-inverse: #f4f4f4,
289
- link-inverse: #0f62fe,
290
- link-inverse-active: #161616,
291
- link-inverse-hover: #0043ce,
292
- link-primary: #78a9ff,
293
- link-primary-hover: #a6c8ff,
294
- link-secondary: #a6c8ff,
295
- link-visited: #be95ff,
296
- overlay: rgba(0, 0, 0, 0.65),
297
- shadow: rgba(0, 0, 0, 0.8),
298
- skeleton-background: #333333,
299
- skeleton-element: #525252,
300
- support-caution-major: #ff832b,
301
- support-caution-minor: #f1c21b,
302
- support-caution-undefined: #a56eff,
303
- support-error: #ff8389,
304
- support-error-inverse: #da1e28,
305
- support-info: #4589ff,
306
- support-info-inverse: #0043ce,
307
- support-success: #42be65,
308
- support-success-inverse: #24a148,
309
- support-warning: #f1c21b,
310
- support-warning-inverse: #f1c21b,
311
- text-disabled: rgba(244, 244, 244, 0.25),
312
- text-error: #ffb3b8,
313
- text-helper: #c6c6c6,
314
- text-inverse: #161616,
315
- text-on-color: #ffffff,
316
- text-on-color-disabled: rgba(255, 255, 255, 0.25),
317
- text-placeholder: rgba(244, 244, 244, 0.4),
318
- text-primary: #f4f4f4,
319
- text-secondary: #c6c6c6,
320
- toggle-off: #8d8d8d,
321
- ) !default;
322
- $g90: utilities.merge(
323
- $g90,
324
- layout.$spacing,
325
- layout.$fluid-spacing,
326
- type.$tokens
327
- );
328
-
329
- $g100: (
330
- background: #161616,
331
- background-active: rgba(141, 141, 141, 0.4),
332
- background-brand: #0f62fe,
333
- background-hover: rgba(141, 141, 141, 0.16),
334
- background-inverse: #f4f4f4,
335
- background-inverse-hover: #e8e8e8,
336
- background-selected: rgba(141, 141, 141, 0.24),
337
- background-selected-hover: rgba(141, 141, 141, 0.32),
338
- border-disabled: rgba(141, 141, 141, 0.5),
339
- border-interactive: #4589ff,
340
- border-inverse: #f4f4f4,
341
- border-strong-01: #6f6f6f,
342
- border-strong-02: #8d8d8d,
343
- border-strong-03: #a8a8a8,
344
- border-subtle-00: #393939,
345
- border-subtle-01: #393939,
346
- border-subtle-02: #525252,
347
- border-subtle-03: #6f6f6f,
348
- border-subtle-selected-01: #525252,
349
- border-subtle-selected-02: #6f6f6f,
350
- border-subtle-selected-03: #8d8d8d,
351
- field-01: #262626,
352
- field-02: #393939,
353
- field-03: #525252,
354
- field-hover-01: #333333,
355
- field-hover-02: #474747,
356
- field-hover-03: #636363,
357
- focus: #ffffff,
358
- focus-inset: #161616,
359
- focus-inverse: #0f62fe,
360
- highlight: #002d9c,
361
- icon-disabled: rgba(244, 244, 244, 0.25),
362
- icon-inverse: #161616,
363
- icon-on-color: #ffffff,
364
- icon-on-color-disabled: rgba(255, 255, 255, 0.25),
365
- icon-primary: #f4f4f4,
366
- icon-secondary: #c6c6c6,
367
- interactive: #4589ff,
368
- layer-01: #262626,
369
- layer-02: #393939,
370
- layer-03: #525252,
371
- layer-accent-01: #393939,
372
- layer-accent-02: #525252,
373
- layer-accent-03: #6f6f6f,
374
- layer-accent-active-01: #6f6f6f,
375
- layer-accent-active-02: #8d8d8d,
376
- layer-accent-active-03: #393939,
377
- layer-accent-hover-01: #474747,
378
- layer-accent-hover-02: #636363,
379
- layer-accent-hover-03: #5e5e5e,
380
- layer-active-01: #525252,
381
- layer-active-02: #6f6f6f,
382
- layer-active-03: #8d8d8d,
383
- layer-hover-01: #333333,
384
- layer-hover-02: #474747,
385
- layer-hover-03: #636363,
386
- layer-selected-01: #393939,
387
- layer-selected-02: #525252,
388
- layer-selected-03: #6f6f6f,
389
- layer-selected-disabled: #a8a8a8,
390
- layer-selected-hover-01: #474747,
391
- layer-selected-hover-02: #636363,
392
- layer-selected-hover-03: #5e5e5e,
393
- layer-selected-inverse: #f4f4f4,
394
- link-inverse: #0f62fe,
395
- link-inverse-active: #161616,
396
- link-inverse-hover: #0043ce,
397
- link-primary: #78a9ff,
398
- link-primary-hover: #a6c8ff,
399
- link-secondary: #a6c8ff,
400
- link-visited: #be95ff,
401
- overlay: rgba(0, 0, 0, 0.65),
402
- shadow: rgba(0, 0, 0, 0.8),
403
- skeleton-background: #292929,
404
- skeleton-element: #393939,
405
- support-caution-major: #ff832b,
406
- support-caution-minor: #f1c21b,
407
- support-caution-undefined: #a56eff,
408
- support-error: #fa4d56,
409
- support-error-inverse: #da1e28,
410
- support-info: #4589ff,
411
- support-info-inverse: #0043ce,
412
- support-success: #42be65,
413
- support-success-inverse: #24a148,
414
- support-warning: #f1c21b,
415
- support-warning-inverse: #f1c21b,
416
- text-disabled: rgba(244, 244, 244, 0.25),
417
- text-error: #ff8389,
418
- text-helper: #a8a8a8,
419
- text-inverse: #161616,
420
- text-on-color: #ffffff,
421
- text-on-color-disabled: rgba(255, 255, 255, 0.25),
422
- text-placeholder: rgba(244, 244, 244, 0.4),
423
- text-primary: #f4f4f4,
424
- text-secondary: #c6c6c6,
425
- toggle-off: #6f6f6f,
426
- ) !default;
427
- $g100: utilities.merge(
428
- $g100,
429
- layout.$spacing,
430
- layout.$fluid-spacing,
431
- type.$tokens
432
- );