@carbon/themes 10.37.0 → 10.39.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.
Files changed (17) hide show
  1. package/README.md +7 -0
  2. package/docs/sass.md +96 -0
  3. package/index.scss +1 -1
  4. package/package.json +10 -7
  5. package/scss/modules/_config.scss +8 -0
  6. package/scss/modules/_theme.scss +22 -18
  7. package/scss/modules/_themes.scss +1 -0
  8. package/scss/modules/generated/_themes.scss +406 -567
  9. package/scss/modules/generated/_tokens.scss +300 -219
  10. package/src/next/g10.js +267 -0
  11. package/src/next/g100.js +270 -0
  12. package/src/next/g90.js +269 -0
  13. package/src/next/index.js +21 -0
  14. package/src/next/tokens/TokenFormat.js +51 -0
  15. package/src/next/tokens/index.js +3 -1
  16. package/src/next/tokens/v11TokenGroup.js +4 -4
  17. package/src/next/white.js +269 -0
package/scss/modules/generated/_themes.scss CHANGED
@@ -11,579 +11,418 @@
11
11
  @use '@carbon/type';
12
12
  @use '../utilities';
13
13
 
14
+ $white: (
15
+ background: #ffffff,
16
+ background-inverse: #393939,
17
+ background-brand: #0f62fe,
18
+ background-active: #c6c6c6,
19
+ background-hover: #e8e8e8,
20
+ background-inverse-hover: #474747,
21
+ background-selected: #e0e0e0,
22
+ background-selected-hover: #d1d1d1,
23
+ layer-01: #f4f4f4,
24
+ layer-active-01: #c6c6c6,
25
+ layer-hover-01: #e8e8e8,
26
+ layer-selected-01: #e0e0e0,
27
+ layer-selected-hover-01: #d1d1d1,
28
+ layer-02: #ffffff,
29
+ layer-active-02: #c6c6c6,
30
+ layer-hover-02: #e8e8e8,
31
+ layer-selected-02: #e0e0e0,
32
+ layer-selected-hover-02: #d1d1d1,
33
+ layer-03: #f4f4f4,
34
+ layer-active-03: #c6c6c6,
35
+ layer-hover-03: #e8e8e8,
36
+ layer-selected-03: #e0e0e0,
37
+ layer-selected-hover-03: #d1d1d1,
38
+ layer-disabled: #f4f4f4,
39
+ layer-selected-inverse: #161616,
40
+ layer-selected-disabled: #8d8d8d,
41
+ layer-accent-01: #e0e0e0,
42
+ layer-accent-active-01: #a8a8a8,
43
+ layer-accent-hover-01: #d1d1d1,
44
+ layer-accent-02: #e0e0e0,
45
+ layer-accent-active-02: #a8a8a8,
46
+ layer-accent-hover-02: #d1d1d1,
47
+ layer-accent-03: #e0e0e0,
48
+ layer-accent-active-03: #a8a8a8,
49
+ layer-accent-hover-03: #d1d1d1,
50
+ field-01: #f4f4f4,
51
+ field-hover-01: #e8e8e8,
52
+ field-02: #ffffff,
53
+ field-hover-02: #e8e8e8,
54
+ field-03: #f4f4f4,
55
+ field-hover-03: #e8e8e8,
56
+ field-disabled: #f4f4f4,
57
+ border-subtle-00: #e0e0e0,
58
+ border-subtle-01: #e0e0e0,
59
+ border-subtle-selected-01: #c6c6c6,
60
+ border-subtle-02: #e0e0e0,
61
+ border-subtle-selected-02: #c6c6c6,
62
+ border-subtle-03: #e0e0e0,
63
+ border-subtle-selected-03: #c6c6c6,
64
+ border-strong-01: #8d8d8d,
65
+ border-strong-02: #8d8d8d,
66
+ border-strong-03: #8d8d8d,
67
+ border-inverse: #161616,
68
+ border-interactive: #0f62fe,
69
+ border-disabled: #f4f4f4,
70
+ text-primary: #161616,
71
+ text-secondary: #525252,
72
+ text-placeholder: #a8a8a8,
73
+ text-helper: #6f6f6f,
74
+ text-error: #da1e28,
75
+ text-inverse: #ffffff,
76
+ text-on-color: #ffffff,
77
+ text-on-color-disabled: #8d8d8d,
78
+ text-disabled: #c6c6c6,
79
+ link-primary: #0f62fe,
80
+ link-primary-hover: #0043ce,
81
+ link-secondary: #0043ce,
82
+ link-inverse: #78a9ff,
83
+ link-visited: #8a3ffc,
84
+ icon-primary: #161616,
85
+ icon-secondary: #525252,
86
+ icon-inverse: #ffffff,
87
+ icon-on-color: #ffffff,
88
+ icon-on-color-disabled: #8d8d8d,
89
+ icon-disabled: #c6c6c6,
90
+ support-error: #da1e28,
91
+ support-success: #24a148,
92
+ support-warning: #f1c21b,
93
+ support-info: #0043ce,
94
+ support-error-inverse: #fa4d56,
95
+ support-success-inverse: #42be65,
96
+ support-warning-inverse: #f1c21b,
97
+ support-info-inverse: #4589ff,
98
+ support-caution-minor: #f1c21b,
99
+ support-caution-major: #ff832b,
100
+ support-caution-undefined: #8a3ffc,
101
+ focus: #0f62fe,
102
+ focus-inset: #ffffff,
103
+ focus-inverse: #ffffff,
104
+ skeleton-background: #e8e8e8,
105
+ skeleton-element: #c6c6c6,
106
+ interactive: #0f62fe,
107
+ highlight: #d0e2ff,
108
+ overlay: rgba(22, 22, 22, 0.5),
109
+ toggle-off: #8d8d8d,
110
+ ) !default;
14
111
  $white: utilities.merge(
112
+ $white,
15
113
  layout.$spacing,
16
114
  layout.$fluid-spacing,
17
- type.$tokens,
18
- (
19
- interactive-01: #0f62fe,
20
- interactive-02: #393939,
21
- interactive-03: #0f62fe,
22
- interactive-04: #0f62fe,
23
- ui-background: #ffffff,
24
- ui-01: #f4f4f4,
25
- ui-02: #ffffff,
26
- ui-03: #e0e0e0,
27
- ui-04: #8d8d8d,
28
- ui-05: #161616,
29
- text-01: #161616,
30
- text-02: #525252,
31
- text-03: #a8a8a8,
32
- text-04: #ffffff,
33
- text-05: #6f6f6f,
34
- text-error: #da1e28,
35
- icon-01: #161616,
36
- icon-02: #525252,
37
- icon-03: #ffffff,
38
- link-01: #0f62fe,
39
- link-02: #0043ce,
40
- inverse-link: #78a9ff,
41
- field-01: #f4f4f4,
42
- field-02: #ffffff,
43
- inverse-01: #ffffff,
44
- inverse-02: #393939,
45
- support-01: #da1e28,
46
- support-02: #198038,
47
- support-03: #f1c21b,
48
- support-04: #0043ce,
49
- inverse-support-01: #fa4d56,
50
- inverse-support-02: #42be65,
51
- inverse-support-03: #f1c21b,
52
- inverse-support-04: #4589ff,
53
- overlay-01: rgba(22, 22, 22, 0.5),
54
- danger-01: #da1e28,
55
- danger-02: #da1e28,
56
- focus: #0f62fe,
57
- inverse-focus-ui: #ffffff,
58
- hover-primary: #0353e9,
59
- active-primary: #002d9c,
60
- hover-primary-text: #0043ce,
61
- hover-secondary: #4c4c4c,
62
- active-secondary: #6f6f6f,
63
- hover-tertiary: #0353e9,
64
- active-tertiary: #002d9c,
65
- hover-ui: #e5e5e5,
66
- hover-light-ui: #e5e5e5,
67
- active-ui: #c6c6c6,
68
- active-light-ui: #c6c6c6,
69
- selected-ui: #e0e0e0,
70
- selected-light-ui: #e0e0e0,
71
- inverse-hover-ui: #4c4c4c,
72
- hover-selected-ui: #cacaca,
73
- hover-danger: #b81921,
74
- active-danger: #750e13,
75
- hover-row: #e5e5e5,
76
- visited-link: #8a3ffc,
77
- disabled-01: #f4f4f4,
78
- disabled-02: #c6c6c6,
79
- disabled-03: #8d8d8d,
80
- highlight: #d0e2ff,
81
- decorative-01: #e0e0e0,
82
- button-separator: #e0e0e0,
83
- skeleton-01: #e5e5e5,
84
- skeleton-02: #c6c6c6,
85
- background: #ffffff,
86
- layer: #f4f4f4,
87
- layer-accent: #e0e0e0,
88
- layer-accent-active: #a8a8a8,
89
- layer-accent-hover: #d1d1d1,
90
- field: #f4f4f4,
91
- background-inverse: #393939,
92
- background-brand: #0f62fe,
93
- interactive: #0f62fe,
94
- border-subtle: #e0e0e0,
95
- border-strong: #8d8d8d,
96
- border-inverse: #161616,
97
- border-interactive: #0f62fe,
98
- text-primary: #161616,
99
- text-secondary: #525252,
100
- text-placeholder: #a8a8a8,
101
- text-helper: #6f6f6f,
102
- text-on-color: #ffffff,
103
- text-inverse: #ffffff,
104
- link-primary: #0f62fe,
105
- link-secondary: #0043ce,
106
- link-visited: #8a3ffc,
107
- link-inverse: #78a9ff,
108
- icon-primary: #161616,
109
- icon-secondary: #525252,
110
- icon-on-color: #ffffff,
111
- icon-inverse: #ffffff,
112
- support-error: #da1e28,
113
- support-success: #198038,
114
- support-warning: #f1c21b,
115
- support-info: #0043ce,
116
- support-error-inverse: #fa4d56,
117
- support-success-inverse: #42be65,
118
- support-warning-inverse: #f1c21b,
119
- support-info-inverse: #4589ff,
120
- overlay: rgba(22, 22, 22, 0.5),
121
- toggle-off: #8d8d8d,
122
- button-primary: #0f62fe,
123
- button-secondary: #393939,
124
- button-tertiary: #0f62fe,
125
- button-danger-primary: #da1e28,
126
- button-danger-secondary: #da1e28,
127
- background-active: #c6c6c6,
128
- layer-active: #c6c6c6,
129
- button-danger-active: #750e13,
130
- button-primary-active: #002d9c,
131
- button-secondary-active: #6f6f6f,
132
- button-tertiary-active: #002d9c,
133
- focus-inset: #ffffff,
134
- focus-inverse: #ffffff,
135
- background-hover: #e5e5e5,
136
- layer-hover: #e5e5e5,
137
- field-hover: #e5e5e5,
138
- background-inverse-hover: #4c4c4c,
139
- link-primary-hover: #0043ce,
140
- button-danger-hover: #b81921,
141
- button-primary-hover: #0353e9,
142
- button-secondary-hover: #4c4c4c,
143
- button-tertiary-hover: #0353e9,
144
- background-selected: #e0e0e0,
145
- background-selected-hover: #cacaca,
146
- layer-selected: #e0e0e0,
147
- layer-selected-hover: #cacaca,
148
- layer-selected-inverse: #161616,
149
- border-subtle-selected: #c6c6c6,
150
- layer-disabled: #f4f4f4,
151
- field-disabled: #f4f4f4,
152
- border-disabled: #f4f4f4,
153
- text-disabled: #c6c6c6,
154
- button-disabled: #c6c6c6,
155
- icon-disabled: #c6c6c6,
156
- text-on-color-disabled: #8d8d8d,
157
- icon-on-color-disabled: #8d8d8d,
158
- layer-selected-disabled: #8d8d8d,
159
- skeleton-background: #e5e5e5,
160
- skeleton-element: #c6c6c6,
161
- brand-01: #0f62fe,
162
- brand-02: #393939,
163
- brand-03: #0f62fe,
164
- active-01: #c6c6c6,
165
- hover-field: #e5e5e5,
166
- danger: #da1e28,
167
- )
168
- ) !default;
169
-
170
- /// Carbon's g10 color theme
171
- /// @type Map
172
- /// @access public
173
- /// @group @carbon/themes
174
- $g10: map.merge(
175
- $white,
176
- (
177
- ui-background: #f4f4f4,
178
- ui-01: #ffffff,
179
- ui-02: #f4f4f4,
180
- field-01: #ffffff,
181
- field-02: #f4f4f4,
182
- disabled-01: #ffffff,
183
- background: #f4f4f4,
184
- layer: #ffffff,
185
- field: #ffffff,
186
- layer-disabled: #ffffff,
187
- field-disabled: #ffffff,
188
- border-disabled: #ffffff,
189
- )
190
- ) !default;
115
+ type.$tokens
116
+ );
191
117
 
192
- /// Carbon's g80 color theme
193
- /// @type Map
194
- /// @access public
195
- /// @group @carbon/themes
196
- $g80: map.merge(
197
- $white,
198
- (
199
- background: #393939,
200
- layer: #525252,
201
- layer-accent: #6f6f6f,
202
- layer-accent-active: #525252,
203
- layer-accent-hover: #5e5e5e,
204
- field: #525252,
205
- background-inverse: #f4f4f4,
206
- interactive: #78a9ff,
207
- border-subtle: #6f6f6f,
208
- border-strong: #a8a8a8,
209
- border-inverse: #f4f4f4,
210
- border-interactive: #4589ff,
211
- text-primary: #f4f4f4,
212
- text-secondary: #c6c6c6,
213
- text-placeholder: #6f6f6f,
214
- text-helper: #a8a8a8,
215
- text-error: #ffb3b8,
216
- text-inverse: #161616,
217
- link-primary: #78a9ff,
218
- link-secondary: #a6c8ff,
219
- link-visited: #be95ff,
220
- link-inverse: #0f62fe,
221
- icon-primary: #f4f4f4,
222
- icon-secondary: #c6c6c6,
223
- icon-inverse: #161616,
224
- support-error: #ff8389,
225
- support-success: #42be65,
226
- support-info: #4589ff,
227
- support-error-inverse: #da1e28,
228
- support-success-inverse: #24a148,
229
- support-info-inverse: #0f62fe,
230
- overlay: rgba(22, 22, 22, 0.7),
231
- button-secondary: #6f6f6f,
232
- button-tertiary: #ffffff,
233
- button-danger-secondary: #ff8389,
234
- button-separator: #161616,
235
- background-active: #525252,
236
- layer-active: #6f6f6f,
237
- button-secondary-active: #525252,
238
- button-tertiary-active: #c6c6c6,
239
- focus: #ffffff,
240
- focus-inset: #161616,
241
- focus-inverse: #0f62fe,
242
- highlight: #0043ce,
243
- background-hover: #474747,
244
- layer-hover: #636363,
245
- field-hover: #636363,
246
- background-inverse-hover: #e8e8e8,
247
- link-primary-hover: #a6c8ff,
248
- button-primary-hover: #0151e4,
249
- button-secondary-hover: #5e5e5e,
250
- button-tertiary-hover: #ffffff,
251
- background-selected: #525252,
252
- background-selected-hover: #636363,
253
- layer-selected: #6f6f6f,
254
- layer-selected-hover: #616161,
255
- layer-selected-inverse: #f4f4f4,
256
- border-subtle-selected: #8d8d8d,
257
- layer-disabled: #525252,
258
- field-disabled: #525252,
259
- border-disabled: #525252,
260
- text-disabled: #8d8d8d,
261
- button-disabled: #8d8d8d,
262
- icon-disabled: #8d8d8d,
263
- text-on-color-disabled: #c6c6c6,
264
- icon-on-color-disabled: #c6c6c6,
265
- layer-selected-disabled: #c6c6c6,
266
- skeleton-background: #474747,
267
- skeleton-element: #6f6f6f,
268
- interactive-02: #6f6f6f,
269
- interactive-03: #ffffff,
270
- interactive-04: #78a9ff,
271
- ui-background: #393939,
272
- ui-01: #525252,
273
- ui-02: #525252,
274
- ui-03: #6f6f6f,
275
- ui-04: #a8a8a8,
276
- ui-05: #f4f4f4,
277
- text-01: #f4f4f4,
278
- text-02: #c6c6c6,
279
- text-03: #6f6f6f,
280
- text-05: #a8a8a8,
281
- icon-01: #f4f4f4,
282
- icon-02: #c6c6c6,
283
- link-01: #78a9ff,
284
- link-02: #a6c8ff,
285
- inverse-link: #0f62fe,
286
- field-01: #525252,
287
- field-02: #6f6f6f,
288
- inverse-01: #161616,
289
- inverse-02: #f4f4f4,
290
- support-01: #ff8389,
291
- support-02: #42be65,
292
- support-04: #4589ff,
293
- inverse-support-01: #da1e28,
294
- inverse-support-02: #24a148,
295
- inverse-support-04: #0f62fe,
296
- overlay-01: rgba(22, 22, 22, 0.7),
297
- danger-02: #ff8389,
298
- inverse-focus-ui: #0f62fe,
299
- hover-primary: #0151e4,
300
- hover-primary-text: #a6c8ff,
301
- hover-secondary: #5e5e5e,
302
- active-secondary: #525252,
303
- hover-tertiary: #ffffff,
304
- active-tertiary: #c6c6c6,
305
- hover-ui: #474747,
306
- hover-light-ui: #5e5e5e,
307
- active-ui: #525252,
308
- active-light-ui: #8d8d8d,
309
- selected-ui: #525252,
310
- selected-light-ui: #8d8d8d,
311
- inverse-hover-ui: #e8e8e8,
312
- hover-selected-ui: #616161,
313
- hover-row: #636363,
314
- visited-link: #be95ff,
315
- disabled-01: #525252,
316
- disabled-02: #8d8d8d,
317
- disabled-03: #c6c6c6,
318
- decorative-01: #6f6f6f,
319
- skeleton-01: #474747,
320
- skeleton-02: #6f6f6f,
321
- brand-02: #6f6f6f,
322
- brand-03: #ffffff,
323
- active-01: #525252,
324
- hover-field: #474747,
325
- )
118
+ $g10: (
119
+ background: #f4f4f4,
120
+ background-inverse: #393939,
121
+ background-brand: #0f62fe,
122
+ background-active: #c6c6c6,
123
+ background-hover: #e8e8e8,
124
+ background-inverse-hover: #474747,
125
+ background-selected: #e0e0e0,
126
+ background-selected-hover: #d1d1d1,
127
+ layer-01: #ffffff,
128
+ layer-active-01: #c6c6c6,
129
+ layer-hover-01: #e8e8e8,
130
+ layer-selected-01: #e0e0e0,
131
+ layer-selected-hover-01: #d1d1d1,
132
+ layer-02: #f4f4f4,
133
+ layer-active-02: #c6c6c6,
134
+ layer-hover-02: #e8e8e8,
135
+ layer-selected-02: #e0e0e0,
136
+ layer-selected-hover-02: #d1d1d1,
137
+ layer-03: #ffffff,
138
+ layer-active-03: #c6c6c6,
139
+ layer-hover-03: #e8e8e8,
140
+ layer-selected-03: #e0e0e0,
141
+ layer-selected-hover-03: #d1d1d1,
142
+ layer-disabled: #ffffff,
143
+ layer-selected-inverse: #161616,
144
+ layer-selected-disabled: #8d8d8d,
145
+ layer-accent-01: #e0e0e0,
146
+ layer-accent-active-01: #a8a8a8,
147
+ layer-accent-hover-01: #d1d1d1,
148
+ layer-accent-02: #e0e0e0,
149
+ layer-accent-active-02: #a8a8a8,
150
+ layer-accent-hover-02: #d1d1d1,
151
+ layer-accent-03: #e0e0e0,
152
+ layer-accent-active-03: #a8a8a8,
153
+ layer-accent-hover-03: #d1d1d1,
154
+ field-01: #ffffff,
155
+ field-hover-01: #e8e8e8,
156
+ field-02: #f4f4f4,
157
+ field-hover-02: #e8e8e8,
158
+ field-03: #ffffff,
159
+ field-hover-03: #e8e8e8,
160
+ field-disabled: #ffffff,
161
+ border-subtle-00: #e0e0e0,
162
+ border-subtle-01: #e0e0e0,
163
+ border-subtle-selected-01: #c6c6c6,
164
+ border-subtle-02: #e0e0e0,
165
+ border-subtle-selected-02: #c6c6c6,
166
+ border-subtle-03: #e0e0e0,
167
+ border-subtle-selected-03: #c6c6c6,
168
+ border-strong-01: #8d8d8d,
169
+ border-strong-02: #8d8d8d,
170
+ border-strong-03: #8d8d8d,
171
+ border-inverse: #161616,
172
+ border-interactive: #0f62fe,
173
+ border-disabled: #ffffff,
174
+ text-primary: #161616,
175
+ text-secondary: #525252,
176
+ text-placeholder: #a8a8a8,
177
+ text-helper: #6f6f6f,
178
+ text-error: #da1e28,
179
+ text-inverse: #ffffff,
180
+ text-on-color: #ffffff,
181
+ text-on-color-disabled: #8d8d8d,
182
+ text-disabled: #c6c6c6,
183
+ link-primary: #0f62fe,
184
+ link-primary-hover: #0043ce,
185
+ link-secondary: #0043ce,
186
+ link-inverse: #78a9ff,
187
+ link-visited: #8a3ffc,
188
+ icon-primary: #161616,
189
+ icon-secondary: #525252,
190
+ icon-inverse: #ffffff,
191
+ icon-on-color: #ffffff,
192
+ icon-on-color-disabled: #8d8d8d,
193
+ icon-disabled: #c6c6c6,
194
+ support-error: #da1e28,
195
+ support-success: #24a148,
196
+ support-warning: #f1c21b,
197
+ support-info: #0043ce,
198
+ support-error-inverse: #fa4d56,
199
+ support-success-inverse: #42be65,
200
+ support-warning-inverse: #f1c21b,
201
+ support-info-inverse: #4589ff,
202
+ support-caution-minor: #f1c21b,
203
+ support-caution-major: #ff832b,
204
+ support-caution-undefined: #8a3ffc,
205
+ focus: #0f62fe,
206
+ focus-inset: #ffffff,
207
+ focus-inverse: #ffffff,
208
+ skeleton-background: #e8e8e8,
209
+ skeleton-element: #c6c6c6,
210
+ interactive: #0f62fe,
211
+ highlight: #d0e2ff,
212
+ overlay: rgba(22, 22, 22, 0.5),
213
+ toggle-off: #8d8d8d,
326
214
  ) !default;
215
+ $g10: utilities.merge(
216
+ $g10,
217
+ layout.$spacing,
218
+ layout.$fluid-spacing,
219
+ type.$tokens
220
+ );
327
221
 
328
- /// Carbon's g90 color theme
329
- /// @type Map
330
- /// @access public
331
- /// @group @carbon/themes
332
- $g90: map.merge(
333
- $white,
334
- (
335
- interactive-02: #6f6f6f,
336
- interactive-03: #ffffff,
337
- interactive-04: #4589ff,
338
- ui-background: #262626,
339
- ui-01: #393939,
340
- ui-02: #525252,
341
- ui-03: #525252,
342
- ui-05: #f4f4f4,
343
- text-01: #f4f4f4,
344
- text-02: #c6c6c6,
345
- text-03: #6f6f6f,
346
- text-05: #8d8d8d,
347
- text-error: #ffb3b8,
348
- icon-01: #f4f4f4,
349
- icon-02: #c6c6c6,
350
- link-01: #78a9ff,
351
- link-02: #a6c8ff,
352
- inverse-link: #0f62fe,
353
- field-01: #393939,
354
- field-02: #525252,
355
- inverse-01: #161616,
356
- inverse-02: #f4f4f4,
357
- support-01: #ff8389,
358
- support-02: #42be65,
359
- support-04: #4589ff,
360
- inverse-support-01: #da1e28,
361
- inverse-support-02: #24a148,
362
- inverse-support-04: #0f62fe,
363
- overlay-01: rgba(22, 22, 22, 0.7),
364
- danger-02: #ff8389,
365
- focus: #ffffff,
366
- inverse-focus-ui: #0f62fe,
367
- hover-primary-text: #a6c8ff,
368
- hover-secondary: #606060,
369
- active-secondary: #393939,
370
- hover-tertiary: #f4f4f4,
371
- active-tertiary: #c6c6c6,
372
- hover-ui: #4c4c4c,
373
- hover-light-ui: #656565,
374
- active-ui: #6f6f6f,
375
- active-light-ui: #8d8d8d,
376
- selected-ui: #525252,
377
- selected-light-ui: #6f6f6f,
378
- inverse-hover-ui: #e5e5e5,
379
- hover-selected-ui: #656565,
380
- hover-row: #4c4c4c,
381
- visited-link: #be95ff,
382
- disabled-01: #393939,
383
- disabled-02: #6f6f6f,
384
- disabled-03: #a8a8a8,
385
- highlight: #0043ce,
386
- decorative-01: #6f6f6f,
387
- button-separator: #161616,
388
- skeleton-01: #353535,
389
- skeleton-02: #525252,
390
- background: #262626,
391
- layer: #393939,
392
- layer-accent: #525252,
393
- layer-accent-active: #8d8d8d,
394
- layer-accent-hover: #636363,
395
- field: #393939,
396
- background-inverse: #f4f4f4,
397
- interactive: #4589ff,
398
- border-subtle: #525252,
399
- border-inverse: #f4f4f4,
400
- border-interactive: #4589ff,
401
- text-primary: #f4f4f4,
402
- text-secondary: #c6c6c6,
403
- text-placeholder: #6f6f6f,
404
- text-helper: #8d8d8d,
405
- text-inverse: #161616,
406
- link-primary: #78a9ff,
407
- link-secondary: #a6c8ff,
408
- link-visited: #be95ff,
409
- link-inverse: #0f62fe,
410
- icon-primary: #f4f4f4,
411
- icon-secondary: #c6c6c6,
412
- icon-inverse: #161616,
413
- support-error: #ff8389,
414
- support-success: #42be65,
415
- support-info: #4589ff,
416
- support-error-inverse: #da1e28,
417
- support-success-inverse: #24a148,
418
- support-info-inverse: #0f62fe,
419
- overlay: rgba(22, 22, 22, 0.7),
420
- button-secondary: #6f6f6f,
421
- button-tertiary: #ffffff,
422
- button-danger-secondary: #ff8389,
423
- background-active: #6f6f6f,
424
- layer-active: #6f6f6f,
425
- button-secondary-active: #393939,
426
- button-tertiary-active: #c6c6c6,
427
- focus-inset: #161616,
428
- focus-inverse: #0f62fe,
429
- background-hover: #4c4c4c,
430
- layer-hover: #4c4c4c,
431
- field-hover: #4c4c4c,
432
- background-inverse-hover: #e5e5e5,
433
- link-primary-hover: #a6c8ff,
434
- button-secondary-hover: #606060,
435
- button-tertiary-hover: #f4f4f4,
436
- background-selected: #525252,
437
- background-selected-hover: #656565,
438
- layer-selected: #525252,
439
- layer-selected-hover: #656565,
440
- layer-selected-inverse: #f4f4f4,
441
- border-subtle-selected: #6f6f6f,
442
- layer-disabled: #393939,
443
- field-disabled: #393939,
444
- border-disabled: #393939,
445
- text-disabled: #6f6f6f,
446
- button-disabled: #6f6f6f,
447
- icon-disabled: #6f6f6f,
448
- text-on-color-disabled: #a8a8a8,
449
- icon-on-color-disabled: #a8a8a8,
450
- layer-selected-disabled: #a8a8a8,
451
- skeleton-background: #353535,
452
- skeleton-element: #525252,
453
- brand-02: #6f6f6f,
454
- brand-03: #ffffff,
455
- active-01: #6f6f6f,
456
- hover-field: #4c4c4c,
457
- )
222
+ $g90: (
223
+ background: #262626,
224
+ background-inverse: #f4f4f4,
225
+ background-brand: #0f62fe,
226
+ background-active: #393939,
227
+ background-hover: #333333,
228
+ background-inverse-hover: #e8e8e8,
229
+ background-selected: #393939,
230
+ background-selected-hover: #474747,
231
+ layer-01: #393939,
232
+ layer-active-01: #6f6f6f,
233
+ layer-hover-01: #474747,
234
+ layer-selected-01: #525252,
235
+ layer-selected-hover-01: #636363,
236
+ layer-02: #525252,
237
+ layer-active-02: #8d8d8d,
238
+ layer-hover-02: #636363,
239
+ layer-selected-02: #6f6f6f,
240
+ layer-selected-hover-02: #5e5e5e,
241
+ layer-03: #6f6f6f,
242
+ layer-active-03: #393939,
243
+ layer-hover-03: #5e5e5e,
244
+ layer-selected-03: #8d8d8d,
245
+ layer-selected-hover-03: #7a7a7a,
246
+ layer-disabled: #393939,
247
+ layer-selected-inverse: #f4f4f4,
248
+ layer-selected-disabled: #a8a8a8,
249
+ layer-accent-01: #525252,
250
+ layer-accent-active-01: #8d8d8d,
251
+ layer-accent-hover-01: #636363,
252
+ layer-accent-02: #6f6f6f,
253
+ layer-accent-active-02: #393939,
254
+ layer-accent-hover-02: #404040,
255
+ layer-accent-03: #8d8d8d,
256
+ layer-accent-active-03: #525252,
257
+ layer-accent-hover-03: #7a7a7a,
258
+ field-01: #393939,
259
+ field-hover-01: #474747,
260
+ field-02: #525252,
261
+ field-hover-02: #636363,
262
+ field-03: #6f6f6f,
263
+ field-hover-03: #5e5e5e,
264
+ field-disabled: #393939,
265
+ border-subtle-00: #525252,
266
+ border-subtle-01: #525252,
267
+ border-subtle-selected-01: #6f6f6f,
268
+ border-subtle-02: #6f6f6f,
269
+ border-subtle-selected-02: #8d8d8d,
270
+ border-subtle-03: #8d8d8d,
271
+ border-subtle-selected-03: #a8a8a8,
272
+ border-strong-01: #8d8d8d,
273
+ border-strong-02: #a8a8a8,
274
+ border-strong-03: #c6c6c6,
275
+ border-inverse: #f4f4f4,
276
+ border-interactive: #4589ff,
277
+ border-disabled: #393939,
278
+ text-primary: #f4f4f4,
279
+ text-secondary: #c6c6c6,
280
+ text-placeholder: #6f6f6f,
281
+ text-helper: #8d8d8d,
282
+ text-error: #ffb3b8,
283
+ text-inverse: #161616,
284
+ text-on-color: #ffffff,
285
+ text-on-color-disabled: #a8a8a8,
286
+ text-disabled: #6f6f6f,
287
+ link-primary: #78a9ff,
288
+ link-primary-hover: #a6c8ff,
289
+ link-secondary: #a6c8ff,
290
+ link-inverse: #0f62fe,
291
+ link-visited: #be95ff,
292
+ icon-primary: #f4f4f4,
293
+ icon-secondary: #c6c6c6,
294
+ icon-inverse: #161616,
295
+ icon-on-color: #ffffff,
296
+ icon-on-color-disabled: #a8a8a8,
297
+ icon-disabled: #6f6f6f,
298
+ support-error: #ff8389,
299
+ support-success: #42be65,
300
+ support-warning: #f1c21b,
301
+ support-info: #4589ff,
302
+ support-error-inverse: #da1e28,
303
+ support-success-inverse: #24a148,
304
+ support-warning-inverse: #f1c21b,
305
+ support-info-inverse: #0f62fe,
306
+ support-caution-minor: #f1c21b,
307
+ support-caution-major: #ff832b,
308
+ support-caution-undefined: #a56eff,
309
+ focus: #ffffff,
310
+ focus-inset: #161616,
311
+ focus-inverse: #0f62fe,
312
+ skeleton-background: #333333,
313
+ skeleton-element: #525252,
314
+ interactive: #4589ff,
315
+ highlight: #0043ce,
316
+ overlay: rgba(22, 22, 22, 0.7),
317
+ toggle-off: #8d8d8d,
458
318
  ) !default;
319
+ $g90: utilities.merge(
320
+ $g90,
321
+ layout.$spacing,
322
+ layout.$fluid-spacing,
323
+ type.$tokens
324
+ );
459
325
 
460
- /// Carbon's g100 color theme
461
- /// @type Map
462
- /// @access public
463
- /// @group @carbon/themes
464
- $g100: map.merge(
465
- $white,
466
- (
467
- interactive-02: #6f6f6f,
468
- interactive-03: #ffffff,
469
- interactive-04: #4589ff,
470
- ui-background: #161616,
471
- ui-01: #262626,
472
- ui-02: #393939,
473
- ui-03: #393939,
474
- ui-04: #6f6f6f,
475
- ui-05: #f4f4f4,
476
- text-01: #f4f4f4,
477
- text-02: #c6c6c6,
478
- text-03: #6f6f6f,
479
- text-05: #8d8d8d,
480
- text-error: #ff8389,
481
- icon-01: #f4f4f4,
482
- icon-02: #c6c6c6,
483
- link-01: #78a9ff,
484
- link-02: #a6c8ff,
485
- inverse-link: #0f62fe,
486
- field-01: #262626,
487
- field-02: #393939,
488
- inverse-01: #161616,
489
- inverse-02: #f4f4f4,
490
- support-01: #fa4d56,
491
- support-02: #42be65,
492
- support-04: #4589ff,
493
- inverse-support-01: #da1e28,
494
- inverse-support-02: #24a148,
495
- inverse-support-04: #0f62fe,
496
- overlay-01: rgba(22, 22, 22, 0.7),
497
- danger-02: #fa4d56,
498
- focus: #ffffff,
499
- inverse-focus-ui: #0f62fe,
500
- hover-primary-text: #a6c8ff,
501
- hover-secondary: #606060,
502
- active-secondary: #393939,
503
- hover-tertiary: #f4f4f4,
504
- active-tertiary: #c6c6c6,
505
- hover-ui: #353535,
506
- hover-light-ui: #4c4c4c,
507
- active-ui: #525252,
508
- active-light-ui: #6f6f6f,
509
- selected-ui: #393939,
510
- selected-light-ui: #525252,
511
- inverse-hover-ui: #e5e5e5,
512
- hover-selected-ui: #4c4c4c,
513
- hover-row: #353535,
514
- visited-link: #be95ff,
515
- disabled-01: #262626,
516
- disabled-02: #525252,
517
- highlight: #002d9c,
518
- decorative-01: #525252,
519
- button-separator: #161616,
520
- skeleton-01: #353535,
521
- skeleton-02: #525252,
522
- background: #161616,
523
- layer: #262626,
524
- layer-accent: #393939,
525
- layer-accent-active: #6f6f6f,
526
- layer-accent-hover: #474747,
527
- field: #262626,
528
- background-inverse: #f4f4f4,
529
- interactive: #4589ff,
530
- border-subtle: #393939,
531
- border-strong: #6f6f6f,
532
- border-inverse: #f4f4f4,
533
- border-interactive: #4589ff,
534
- text-primary: #f4f4f4,
535
- text-secondary: #c6c6c6,
536
- text-placeholder: #6f6f6f,
537
- text-helper: #8d8d8d,
538
- text-inverse: #161616,
539
- link-primary: #78a9ff,
540
- link-secondary: #a6c8ff,
541
- link-visited: #be95ff,
542
- link-inverse: #0f62fe,
543
- icon-primary: #f4f4f4,
544
- icon-secondary: #c6c6c6,
545
- icon-inverse: #161616,
546
- support-error: #fa4d56,
547
- support-success: #42be65,
548
- support-info: #4589ff,
549
- support-error-inverse: #da1e28,
550
- support-success-inverse: #24a148,
551
- support-info-inverse: #0f62fe,
552
- overlay: rgba(22, 22, 22, 0.7),
553
- toggle-off: #6f6f6f,
554
- button-secondary: #6f6f6f,
555
- button-tertiary: #ffffff,
556
- button-danger-secondary: #fa4d56,
557
- background-active: #525252,
558
- layer-active: #525252,
559
- button-secondary-active: #393939,
560
- button-tertiary-active: #c6c6c6,
561
- focus-inset: #161616,
562
- focus-inverse: #0f62fe,
563
- background-hover: #353535,
564
- layer-hover: #353535,
565
- field-hover: #353535,
566
- background-inverse-hover: #e5e5e5,
567
- link-primary-hover: #a6c8ff,
568
- button-secondary-hover: #606060,
569
- button-tertiary-hover: #f4f4f4,
570
- background-selected: #393939,
571
- background-selected-hover: #4c4c4c,
572
- layer-selected: #393939,
573
- layer-selected-hover: #4c4c4c,
574
- layer-selected-inverse: #f4f4f4,
575
- border-subtle-selected: #525252,
576
- layer-disabled: #262626,
577
- field-disabled: #262626,
578
- border-disabled: #262626,
579
- text-disabled: #525252,
580
- button-disabled: #525252,
581
- icon-disabled: #525252,
582
- skeleton-background: #353535,
583
- skeleton-element: #525252,
584
- brand-02: #6f6f6f,
585
- brand-03: #ffffff,
586
- active-01: #525252,
587
- hover-field: #353535,
588
- )
326
+ $g100: (
327
+ background: #161616,
328
+ background-inverse: #f4f4f4,
329
+ background-brand: #0f62fe,
330
+ background-active: #393939,
331
+ background-hover: #292929,
332
+ background-inverse-hover: #e8e8e8,
333
+ background-selected: #262626,
334
+ background-selected-hover: #333333,
335
+ layer-01: #262626,
336
+ layer-active-01: #525252,
337
+ layer-hover-01: #333333,
338
+ layer-selected-01: #393939,
339
+ layer-selected-hover-01: #474747,
340
+ layer-02: #393939,
341
+ layer-active-02: #6f6f6f,
342
+ layer-hover-02: #474747,
343
+ layer-selected-02: #525252,
344
+ layer-selected-hover-02: #636363,
345
+ layer-03: #525252,
346
+ layer-active-03: #8d8d8d,
347
+ layer-hover-03: #636363,
348
+ layer-selected-03: #6f6f6f,
349
+ layer-selected-hover-03: #5e5e5e,
350
+ layer-disabled: #262626,
351
+ layer-selected-inverse: #f4f4f4,
352
+ layer-selected-disabled: #a8a8a8,
353
+ layer-accent-01: #393939,
354
+ layer-accent-active-01: #6f6f6f,
355
+ layer-accent-hover-01: #474747,
356
+ layer-accent-02: #525252,
357
+ layer-accent-active-02: #8d8d8d,
358
+ layer-accent-hover-02: #636363,
359
+ layer-accent-03: #6f6f6f,
360
+ layer-accent-active-03: #393939,
361
+ layer-accent-hover-03: #5e5e5e,
362
+ field-01: #262626,
363
+ field-hover-01: #333333,
364
+ field-02: #393939,
365
+ field-hover-02: #474747,
366
+ field-03: #525252,
367
+ field-hover-03: #636363,
368
+ field-disabled: #393939,
369
+ border-subtle-00: #393939,
370
+ border-subtle-01: #393939,
371
+ border-subtle-selected-01: #525252,
372
+ border-subtle-02: #525252,
373
+ border-subtle-selected-02: #6f6f6f,
374
+ border-subtle-03: #6f6f6f,
375
+ border-subtle-selected-03: #8d8d8d,
376
+ border-strong-01: #6f6f6f,
377
+ border-strong-02: #8d8d8d,
378
+ border-strong-03: #a8a8a8,
379
+ border-inverse: #f4f4f4,
380
+ border-interactive: #4589ff,
381
+ border-disabled: #262626,
382
+ text-primary: #f4f4f4,
383
+ text-secondary: #c6c6c6,
384
+ text-placeholder: #6f6f6f,
385
+ text-helper: #8d8d8d,
386
+ text-error: #ffb3b8,
387
+ text-inverse: #161616,
388
+ text-on-color: #ffffff,
389
+ text-on-color-disabled: #a8a8a8,
390
+ text-disabled: #525252,
391
+ link-primary: #78a9ff,
392
+ link-primary-hover: #a6c8ff,
393
+ link-secondary: #a6c8ff,
394
+ link-inverse: #0f62fe,
395
+ link-visited: #be95ff,
396
+ icon-primary: #f4f4f4,
397
+ icon-secondary: #c6c6c6,
398
+ icon-inverse: #161616,
399
+ icon-on-color: #ffffff,
400
+ icon-on-color-disabled: #a8a8a8,
401
+ icon-disabled: #525252,
402
+ support-error: #fa4d56,
403
+ support-success: #42be65,
404
+ support-warning: #f1c21b,
405
+ support-info: #4589ff,
406
+ support-error-inverse: #da1e28,
407
+ support-success-inverse: #24a148,
408
+ support-warning-inverse: #f1c21b,
409
+ support-info-inverse: #0f62fe,
410
+ support-caution-minor: #f1c21b,
411
+ support-caution-major: #ff832b,
412
+ support-caution-undefined: #a56eff,
413
+ focus: #ffffff,
414
+ focus-inset: #161616,
415
+ focus-inverse: #0f62fe,
416
+ skeleton-background: #292929,
417
+ skeleton-element: #393939,
418
+ interactive: #4589ff,
419
+ highlight: #d0e2ff,
420
+ overlay: rgba(22, 22, 22, 0.5),
421
+ toggle-off: #8d8d8d,
589
422
  ) !default;
423
+ $g100: utilities.merge(
424
+ $g100,
425
+ layout.$spacing,
426
+ layout.$fluid-spacing,
427
+ type.$tokens
428
+ );