@carbon/styles 1.15.0 → 1.16.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 (21) hide show
  1. package/css/styles.css +2623 -2434
  2. package/css/styles.min.css +1 -1
  3. package/package.json +5 -5
  4. package/scss/__tests__/__snapshots__/type-test.js.snap +1097 -1065
  5. package/scss/components/_index.scss +3 -0
  6. package/scss/components/button/_tokens.scss +76 -75
  7. package/scss/components/data-table/sort/_data-table-sort.scss +1 -1
  8. package/scss/components/fluid-combo-box/_fluid-combo-box.scss +71 -0
  9. package/scss/components/fluid-combo-box/_index.scss +11 -0
  10. package/scss/components/fluid-list-box/_fluid-list-box.scss +42 -4
  11. package/scss/components/fluid-multiselect/_fluid-multiselect.scss +41 -0
  12. package/scss/components/fluid-multiselect/_index.scss +11 -0
  13. package/scss/components/fluid-select/_fluid-select.scss +158 -0
  14. package/scss/components/fluid-select/_index.scss +11 -0
  15. package/scss/components/notification/_tokens.scss +150 -42
  16. package/scss/components/number-input/_number-input.scss +1 -1
  17. package/scss/components/overflow-menu/_overflow-menu.scss +1 -1
  18. package/scss/components/progress-indicator/_progress-indicator.scss +5 -0
  19. package/scss/components/tag/_tokens.scss +152 -150
  20. package/scss/components/text-input/_text-input.scss +14 -8
  21. package/scss/components/ui-shell/header/_header.scss +16 -19
package/scss/components/tag/_tokens.scss CHANGED
@@ -6,678 +6,680 @@
6
6
  //
7
7
 
8
8
  @use 'sass:color';
9
+ @use 'sass:map';
9
10
  @use '../../config';
10
11
  @use '../../colors';
11
12
  @use '../../themes';
12
13
  @use '../../theme' as *;
13
14
  @use '../../utilities/component-tokens';
15
+ @use '@carbon/themes/scss/component-tokens' as tag;
14
16
 
15
17
  // red
16
18
  $tag-background-red: (
17
- fallback: colors.$red-20,
19
+ fallback: map.get(tag.$tag-background-red, white-theme),
18
20
  values: (
19
21
  (
20
22
  theme: themes.$white,
21
- value: colors.$red-20,
23
+ value: map.get(tag.$tag-background-red, white-theme),
22
24
  ),
23
25
  (
24
26
  theme: themes.$g10,
25
- value: colors.$red-20,
27
+ value: map.get(tag.$tag-background-red, g-10),
26
28
  ),
27
29
  (
28
30
  theme: themes.$g90,
29
- value: colors.$red-70,
31
+ value: map.get(tag.$tag-background-red, g-90),
30
32
  ),
31
33
  (
32
34
  theme: themes.$g100,
33
- value: colors.$red-70,
35
+ value: map.get(tag.$tag-background-red, g-100),
34
36
  ),
35
37
  ),
36
38
  ) !default;
37
39
 
38
40
  $tag-color-red: (
39
- fallback: colors.$red-80,
41
+ fallback: map.get(tag.$tag-color-red, white-theme),
40
42
  values: (
41
43
  (
42
44
  theme: themes.$white,
43
- value: colors.$red-80,
45
+ value: map.get(tag.$tag-color-red, white-theme),
44
46
  ),
45
47
  (
46
48
  theme: themes.$g10,
47
- value: colors.$red-80,
49
+ value: map.get(tag.$tag-color-red, g-10),
48
50
  ),
49
51
  (
50
52
  theme: themes.$g90,
51
- value: colors.$red-20,
53
+ value: map.get(tag.$tag-color-red, g-90),
52
54
  ),
53
55
  (
54
56
  theme: themes.$g100,
55
- value: colors.$red-20,
57
+ value: map.get(tag.$tag-color-red, g-100),
56
58
  ),
57
59
  ),
58
60
  ) !default;
59
61
 
60
62
  $tag-hover-red: (
61
- fallback: colors.$red-30,
63
+ fallback: map.get(tag.$tag-hover-red, white-theme),
62
64
  values: (
63
65
  (
64
66
  theme: themes.$white,
65
- value: colors.$red-30,
67
+ value: map.get(tag.$tag-hover-red, white-theme),
66
68
  ),
67
69
  (
68
70
  theme: themes.$g10,
69
- value: colors.$red-30,
71
+ value: map.get(tag.$tag-hover-red, g-10),
70
72
  ),
71
73
  (
72
74
  theme: themes.$g90,
73
- value: colors.$red-70-hover,
75
+ value: map.get(tag.$tag-hover-red, g-90),
74
76
  ),
75
77
  (
76
78
  theme: themes.$g100,
77
- value: colors.$red-70-hover,
79
+ value: map.get(tag.$tag-hover-red, g-100),
78
80
  ),
79
81
  ),
80
82
  ) !default;
81
83
 
82
84
  // magenta
83
85
  $tag-background-magenta: (
84
- fallback: colors.$magenta-20,
86
+ fallback: map.get(tag.$tag-background-magenta, white-theme),
85
87
  values: (
86
88
  (
87
89
  theme: themes.$white,
88
- value: colors.$magenta-20,
90
+ value: map.get(tag.$tag-background-magenta, white-theme),
89
91
  ),
90
92
  (
91
93
  theme: themes.$g10,
92
- value: colors.$magenta-20,
94
+ value: map.get(tag.$tag-background-magenta, g-10),
93
95
  ),
94
96
  (
95
97
  theme: themes.$g90,
96
- value: colors.$magenta-70,
98
+ value: map.get(tag.$tag-background-magenta, g-90),
97
99
  ),
98
100
  (
99
101
  theme: themes.$g100,
100
- value: colors.$magenta-70,
102
+ value: map.get(tag.$tag-background-magenta, g-100),
101
103
  ),
102
104
  ),
103
105
  ) !default;
104
106
 
105
107
  $tag-color-magenta: (
106
- fallback: colors.$magenta-80,
108
+ fallback: map.get(tag.$tag-color-magenta, white-theme),
107
109
  values: (
108
110
  (
109
111
  theme: themes.$white,
110
- value: colors.$magenta-80,
112
+ value: map.get(tag.$tag-color-magenta, white-theme),
111
113
  ),
112
114
  (
113
115
  theme: themes.$g10,
114
- value: colors.$magenta-80,
116
+ value: map.get(tag.$tag-color-magenta, g-10),
115
117
  ),
116
118
  (
117
119
  theme: themes.$g90,
118
- value: colors.$magenta-20,
120
+ value: map.get(tag.$tag-color-magenta, g-90),
119
121
  ),
120
122
  (
121
123
  theme: themes.$g100,
122
- value: colors.$magenta-20,
124
+ value: map.get(tag.$tag-color-magenta, g-100),
123
125
  ),
124
126
  ),
125
127
  ) !default;
126
128
 
127
129
  $tag-hover-magenta: (
128
- fallback: colors.$magenta-30,
130
+ fallback: map.get(tag.$tag-hover-magenta, white-theme),
129
131
  values: (
130
132
  (
131
133
  theme: themes.$white,
132
- value: colors.$magenta-30,
134
+ value: map.get(tag.$tag-hover-magenta, white-theme),
133
135
  ),
134
136
  (
135
137
  theme: themes.$g10,
136
- value: colors.$magenta-30,
138
+ value: map.get(tag.$tag-hover-magenta, g-10),
137
139
  ),
138
140
  (
139
141
  theme: themes.$g90,
140
- value: colors.$magenta-70-hover,
142
+ value: map.get(tag.$tag-hover-magenta, g-90),
141
143
  ),
142
144
  (
143
145
  theme: themes.$g100,
144
- value: colors.$magenta-70-hover,
146
+ value: map.get(tag.$tag-hover-magenta, g-100),
145
147
  ),
146
148
  ),
147
149
  ) !default;
148
150
 
149
151
  // purple
150
152
  $tag-background-purple: (
151
- fallback: colors.$purple-20,
153
+ fallback: map.get(tag.$tag-background-purple, white-theme),
152
154
  values: (
153
155
  (
154
156
  theme: themes.$white,
155
- value: colors.$purple-20,
157
+ value: map.get(tag.$tag-background-purple, white-theme),
156
158
  ),
157
159
  (
158
160
  theme: themes.$g10,
159
- value: colors.$purple-20,
161
+ value: map.get(tag.$tag-background-purple, g-10),
160
162
  ),
161
163
  (
162
164
  theme: themes.$g90,
163
- value: colors.$purple-70,
165
+ value: map.get(tag.$tag-background-purple, g-90),
164
166
  ),
165
167
  (
166
168
  theme: themes.$g100,
167
- value: colors.$purple-70,
169
+ value: map.get(tag.$tag-background-purple, g-100),
168
170
  ),
169
171
  ),
170
172
  ) !default;
171
173
 
172
174
  $tag-color-purple: (
173
- fallback: colors.$purple-80,
175
+ fallback: map.get(tag.$tag-color-purple, white-theme),
174
176
  values: (
175
177
  (
176
178
  theme: themes.$white,
177
- value: colors.$purple-80,
179
+ value: map.get(tag.$tag-color-purple, white-theme),
178
180
  ),
179
181
  (
180
182
  theme: themes.$g10,
181
- value: colors.$purple-80,
183
+ value: map.get(tag.$tag-color-purple, g-10),
182
184
  ),
183
185
  (
184
186
  theme: themes.$g90,
185
- value: colors.$purple-20,
187
+ value: map.get(tag.$tag-color-purple, g-90),
186
188
  ),
187
189
  (
188
190
  theme: themes.$g100,
189
- value: colors.$purple-20,
191
+ value: map.get(tag.$tag-color-purple, g-100),
190
192
  ),
191
193
  ),
192
194
  ) !default;
193
195
 
194
196
  $tag-hover-purple: (
195
- fallback: colors.$purple-30,
197
+ fallback: map.get(tag.$tag-hover-purple, white-theme),
196
198
  values: (
197
199
  (
198
200
  theme: themes.$white,
199
- value: colors.$purple-30,
201
+ value: map.get(tag.$tag-hover-purple, white-theme),
200
202
  ),
201
203
  (
202
204
  theme: themes.$g10,
203
- value: colors.$purple-30,
205
+ value: map.get(tag.$tag-hover-purple, g-10),
204
206
  ),
205
207
  (
206
208
  theme: themes.$g90,
207
- value: colors.$purple-70-hover,
209
+ value: map.get(tag.$tag-hover-purple, g-90),
208
210
  ),
209
211
  (
210
212
  theme: themes.$g100,
211
- value: colors.$purple-70-hover,
213
+ value: map.get(tag.$tag-hover-purple, g-100),
212
214
  ),
213
215
  ),
214
216
  ) !default;
215
217
 
216
218
  // blue
217
219
  $tag-background-blue: (
218
- fallback: colors.$blue-20,
220
+ fallback: map.get(tag.$tag-background-blue, white-theme),
219
221
  values: (
220
222
  (
221
223
  theme: themes.$white,
222
- value: colors.$blue-20,
224
+ value: map.get(tag.$tag-background-blue, white-theme),
223
225
  ),
224
226
  (
225
227
  theme: themes.$g10,
226
- value: colors.$blue-20,
228
+ value: map.get(tag.$tag-background-blue, g-10),
227
229
  ),
228
230
  (
229
231
  theme: themes.$g90,
230
- value: colors.$blue-70,
232
+ value: map.get(tag.$tag-background-blue, g-90),
231
233
  ),
232
234
  (
233
235
  theme: themes.$g100,
234
- value: colors.$blue-70,
236
+ value: map.get(tag.$tag-background-blue, g-100),
235
237
  ),
236
238
  ),
237
239
  ) !default;
238
240
 
239
241
  $tag-color-blue: (
240
- fallback: colors.$blue-80,
242
+ fallback: map.get(tag.$tag-color-blue, white-theme),
241
243
  values: (
242
244
  (
243
245
  theme: themes.$white,
244
- value: colors.$blue-80,
246
+ value: map.get(tag.$tag-color-blue, white-theme),
245
247
  ),
246
248
  (
247
249
  theme: themes.$g10,
248
- value: colors.$blue-80,
250
+ value: map.get(tag.$tag-color-blue, g-10),
249
251
  ),
250
252
  (
251
253
  theme: themes.$g90,
252
- value: colors.$blue-20,
254
+ value: map.get(tag.$tag-color-blue, g-90),
253
255
  ),
254
256
  (
255
257
  theme: themes.$g100,
256
- value: colors.$blue-20,
258
+ value: map.get(tag.$tag-color-blue, g-100),
257
259
  ),
258
260
  ),
259
261
  ) !default;
260
262
 
261
263
  $tag-hover-blue: (
262
- fallback: colors.$blue-30,
264
+ fallback: map.get(tag.$tag-hover-blue, white-theme),
263
265
  values: (
264
266
  (
265
267
  theme: themes.$white,
266
- value: colors.$blue-30,
268
+ value: map.get(tag.$tag-hover-blue, white-theme),
267
269
  ),
268
270
  (
269
271
  theme: themes.$g10,
270
- value: colors.$blue-30,
272
+ value: map.get(tag.$tag-hover-blue, g-10),
271
273
  ),
272
274
  (
273
275
  theme: themes.$g90,
274
- value: colors.$blue-70-hover,
276
+ value: map.get(tag.$tag-hover-blue, g-90),
275
277
  ),
276
278
  (
277
279
  theme: themes.$g100,
278
- value: colors.$blue-70-hover,
280
+ value: map.get(tag.$tag-hover-blue, g-100),
279
281
  ),
280
282
  ),
281
283
  ) !default;
282
284
 
283
285
  // cyan
284
286
  $tag-background-cyan: (
285
- fallback: colors.$cyan-20,
287
+ fallback: map.get(tag.$tag-background-cyan, white-theme),
286
288
  values: (
287
289
  (
288
290
  theme: themes.$white,
289
- value: colors.$cyan-20,
291
+ value: map.get(tag.$tag-background-cyan, white-theme),
290
292
  ),
291
293
  (
292
294
  theme: themes.$g10,
293
- value: colors.$cyan-20,
295
+ value: map.get(tag.$tag-background-cyan, g-10),
294
296
  ),
295
297
  (
296
298
  theme: themes.$g90,
297
- value: colors.$cyan-70,
299
+ value: map.get(tag.$tag-background-cyan, g-90),
298
300
  ),
299
301
  (
300
302
  theme: themes.$g100,
301
- value: colors.$cyan-70,
303
+ value: map.get(tag.$tag-background-cyan, g-100),
302
304
  ),
303
305
  ),
304
306
  ) !default;
305
307
 
306
308
  $tag-color-cyan: (
307
- fallback: colors.$cyan-80,
309
+ fallback: map.get(tag.$tag-color-cyan, white-theme),
308
310
  values: (
309
311
  (
310
312
  theme: themes.$white,
311
- value: colors.$cyan-80,
313
+ value: map.get(tag.$tag-color-cyan, white-theme),
312
314
  ),
313
315
  (
314
316
  theme: themes.$g10,
315
- value: colors.$cyan-80,
317
+ value: map.get(tag.$tag-color-cyan, g-10),
316
318
  ),
317
319
  (
318
320
  theme: themes.$g90,
319
- value: colors.$cyan-20,
321
+ value: map.get(tag.$tag-color-cyan, g-90),
320
322
  ),
321
323
  (
322
324
  theme: themes.$g100,
323
- value: colors.$cyan-20,
325
+ value: map.get(tag.$tag-color-cyan, g-100),
324
326
  ),
325
327
  ),
326
328
  ) !default;
327
329
 
328
330
  $tag-hover-cyan: (
329
- fallback: colors.$cyan-30,
331
+ fallback: map.get(tag.$tag-hover-cyan, white-theme),
330
332
  values: (
331
333
  (
332
334
  theme: themes.$white,
333
- value: colors.$cyan-30,
335
+ value: map.get(tag.$tag-hover-cyan, white-theme),
334
336
  ),
335
337
  (
336
338
  theme: themes.$g10,
337
- value: colors.$cyan-30,
339
+ value: map.get(tag.$tag-hover-cyan, g-10),
338
340
  ),
339
341
  (
340
342
  theme: themes.$g90,
341
- value: colors.$cyan-70-hover,
343
+ value: map.get(tag.$tag-hover-cyan, g-90),
342
344
  ),
343
345
  (
344
346
  theme: themes.$g100,
345
- value: colors.$cyan-70-hover,
347
+ value: map.get(tag.$tag-hover-cyan, g-100),
346
348
  ),
347
349
  ),
348
350
  ) !default;
349
351
 
350
352
  // teal
351
353
  $tag-background-teal: (
352
- fallback: colors.$teal-20,
354
+ fallback: map.get(tag.$tag-background-teal, white-theme),
353
355
  values: (
354
356
  (
355
357
  theme: themes.$white,
356
- value: colors.$teal-20,
358
+ value: map.get(tag.$tag-background-teal, white-theme),
357
359
  ),
358
360
  (
359
361
  theme: themes.$g10,
360
- value: colors.$teal-20,
362
+ value: map.get(tag.$tag-background-teal, g-10),
361
363
  ),
362
364
  (
363
365
  theme: themes.$g90,
364
- value: colors.$teal-70,
366
+ value: map.get(tag.$tag-background-teal, g-90),
365
367
  ),
366
368
  (
367
369
  theme: themes.$g100,
368
- value: colors.$teal-70,
370
+ value: map.get(tag.$tag-background-teal, g-100),
369
371
  ),
370
372
  ),
371
373
  ) !default;
372
374
 
373
375
  $tag-color-teal: (
374
- fallback: colors.$teal-80,
376
+ fallback: map.get(tag.$tag-color-teal, white-theme),
375
377
  values: (
376
378
  (
377
379
  theme: themes.$white,
378
- value: colors.$teal-80,
380
+ value: map.get(tag.$tag-color-teal, white-theme),
379
381
  ),
380
382
  (
381
383
  theme: themes.$g10,
382
- value: colors.$teal-80,
384
+ value: map.get(tag.$tag-color-teal, g-10),
383
385
  ),
384
386
  (
385
387
  theme: themes.$g90,
386
- value: colors.$teal-20,
388
+ value: map.get(tag.$tag-color-teal, g-90),
387
389
  ),
388
390
  (
389
391
  theme: themes.$g100,
390
- value: colors.$teal-20,
392
+ value: map.get(tag.$tag-color-teal, g-100),
391
393
  ),
392
394
  ),
393
395
  ) !default;
394
396
 
395
397
  $tag-hover-teal: (
396
- fallback: colors.$teal-30,
398
+ fallback: map.get(tag.$tag-hover-teal, white-theme),
397
399
  values: (
398
400
  (
399
401
  theme: themes.$white,
400
- value: colors.$teal-30,
402
+ value: map.get(tag.$tag-hover-teal, white-theme),
401
403
  ),
402
404
  (
403
405
  theme: themes.$g10,
404
- value: colors.$teal-30,
406
+ value: map.get(tag.$tag-hover-teal, g-10),
405
407
  ),
406
408
  (
407
409
  theme: themes.$g90,
408
- value: colors.$teal-70-hover,
410
+ value: map.get(tag.$tag-hover-teal, g-90),
409
411
  ),
410
412
  (
411
413
  theme: themes.$g100,
412
- value: colors.$teal-70-hover,
414
+ value: map.get(tag.$tag-hover-teal, g-100),
413
415
  ),
414
416
  ),
415
417
  ) !default;
416
418
 
417
419
  // green
418
420
  $tag-background-green: (
419
- fallback: colors.$green-20,
421
+ fallback: map.get(tag.$tag-background-green, white-theme),
420
422
  values: (
421
423
  (
422
424
  theme: themes.$white,
423
- value: colors.$green-20,
425
+ value: map.get(tag.$tag-background-green, white-theme),
424
426
  ),
425
427
  (
426
428
  theme: themes.$g10,
427
- value: colors.$green-20,
429
+ value: map.get(tag.$tag-background-green, g-10),
428
430
  ),
429
431
  (
430
432
  theme: themes.$g90,
431
- value: colors.$green-70,
433
+ value: map.get(tag.$tag-background-green, g-90),
432
434
  ),
433
435
  (
434
436
  theme: themes.$g100,
435
- value: colors.$green-70,
437
+ value: map.get(tag.$tag-background-green, g-100),
436
438
  ),
437
439
  ),
438
440
  ) !default;
439
441
 
440
442
  $tag-color-green: (
441
- fallback: colors.$green-80,
443
+ fallback: map.get(tag.$tag-color-green, white-theme),
442
444
  values: (
443
445
  (
444
446
  theme: themes.$white,
445
- value: colors.$green-80,
447
+ value: map.get(tag.$tag-color-green, white-theme),
446
448
  ),
447
449
  (
448
450
  theme: themes.$g10,
449
- value: colors.$green-80,
451
+ value: map.get(tag.$tag-color-green, g-10),
450
452
  ),
451
453
  (
452
454
  theme: themes.$g90,
453
- value: colors.$green-20,
455
+ value: map.get(tag.$tag-color-green, g-90),
454
456
  ),
455
457
  (
456
458
  theme: themes.$g100,
457
- value: colors.$green-20,
459
+ value: map.get(tag.$tag-color-green, g-100),
458
460
  ),
459
461
  ),
460
462
  ) !default;
461
463
 
462
464
  $tag-hover-green: (
463
- fallback: colors.$green-30,
465
+ fallback: map.get(tag.$tag-hover-green, white-theme),
464
466
  values: (
465
467
  (
466
468
  theme: themes.$white,
467
- value: colors.$green-30,
469
+ value: map.get(tag.$tag-hover-green, white-theme),
468
470
  ),
469
471
  (
470
472
  theme: themes.$g10,
471
- value: colors.$green-30,
473
+ value: map.get(tag.$tag-hover-green, g-10),
472
474
  ),
473
475
  (
474
476
  theme: themes.$g90,
475
- value: colors.$green-70-hover,
477
+ value: map.get(tag.$tag-hover-green, g-90),
476
478
  ),
477
479
  (
478
480
  theme: themes.$g100,
479
- value: colors.$green-70-hover,
481
+ value: map.get(tag.$tag-hover-green, g-100),
480
482
  ),
481
483
  ),
482
484
  ) !default;
483
485
 
484
486
  // gray
485
487
  $tag-background-gray: (
486
- fallback: colors.$gray-20,
488
+ fallback: map.get(tag.$tag-background-gray, white-theme),
487
489
  values: (
488
490
  (
489
491
  theme: themes.$white,
490
- value: colors.$gray-20,
492
+ value: map.get(tag.$tag-background-gray, white-theme),
491
493
  ),
492
494
  (
493
495
  theme: themes.$g10,
494
- value: colors.$gray-20,
496
+ value: map.get(tag.$tag-background-gray, g-10),
495
497
  ),
496
498
  (
497
499
  theme: themes.$g90,
498
- value: colors.$gray-70,
500
+ value: map.get(tag.$tag-background-gray, g-90),
499
501
  ),
500
502
  (
501
503
  theme: themes.$g100,
502
- value: colors.$gray-70,
504
+ value: map.get(tag.$tag-background-gray, g-100),
503
505
  ),
504
506
  ),
505
507
  ) !default;
506
508
 
507
509
  $tag-color-gray: (
508
- fallback: colors.$gray-80,
510
+ fallback: map.get(tag.$tag-color-gray, white-theme),
509
511
  values: (
510
512
  (
511
513
  theme: themes.$white,
512
- value: colors.$gray-80,
514
+ value: map.get(tag.$tag-color-gray, white-theme),
513
515
  ),
514
516
  (
515
517
  theme: themes.$g10,
516
- value: colors.$gray-80,
518
+ value: map.get(tag.$tag-color-gray, g-10),
517
519
  ),
518
520
  (
519
521
  theme: themes.$g90,
520
- value: colors.$gray-20,
522
+ value: map.get(tag.$tag-color-gray, g-90),
521
523
  ),
522
524
  (
523
525
  theme: themes.$g100,
524
- value: colors.$gray-20,
526
+ value: map.get(tag.$tag-color-gray, g-100),
525
527
  ),
526
528
  ),
527
529
  ) !default;
528
530
 
529
531
  $tag-hover-gray: (
530
- fallback: colors.$gray-30,
532
+ fallback: map.get(tag.$tag-hover-gray, white-theme),
531
533
  values: (
532
534
  (
533
535
  theme: themes.$white,
534
- value: colors.$gray-30,
536
+ value: map.get(tag.$tag-hover-gray, white-theme),
535
537
  ),
536
538
  (
537
539
  theme: themes.$g10,
538
- value: colors.$gray-30,
540
+ value: map.get(tag.$tag-hover-gray, g-10),
539
541
  ),
540
542
  (
541
543
  theme: themes.$g90,
542
- value: colors.$gray-70-hover,
544
+ value: map.get(tag.$tag-hover-gray, g-90),
543
545
  ),
544
546
  (
545
547
  theme: themes.$g100,
546
- value: colors.$gray-70-hover,
548
+ value: map.get(tag.$tag-hover-gray, g-100),
547
549
  ),
548
550
  ),
549
551
  ) !default;
550
552
 
551
553
  // cool-gray
552
554
  $tag-background-cool-gray: (
553
- fallback: colors.$cool-gray-20,
555
+ fallback: map.get(tag.$tag-background-cool-gray, white-theme),
554
556
  values: (
555
557
  (
556
558
  theme: themes.$white,
557
- value: colors.$cool-gray-20,
559
+ value: map.get(tag.$tag-background-cool-gray, white-theme),
558
560
  ),
559
561
  (
560
562
  theme: themes.$g10,
561
- value: colors.$cool-gray-20,
563
+ value: map.get(tag.$tag-background-cool-gray, g-10),
562
564
  ),
563
565
  (
564
566
  theme: themes.$g90,
565
- value: colors.$cool-gray-70,
567
+ value: map.get(tag.$tag-background-cool-gray, g-90),
566
568
  ),
567
569
  (
568
570
  theme: themes.$g100,
569
- value: colors.$cool-gray-70,
571
+ value: map.get(tag.$tag-background-cool-gray, g-100),
570
572
  ),
571
573
  ),
572
574
  ) !default;
573
575
 
574
576
  $tag-color-cool-gray: (
575
- fallback: colors.$cool-gray-80,
577
+ fallback: map.get(tag.$tag-color-cool-gray, white-theme),
576
578
  values: (
577
579
  (
578
580
  theme: themes.$white,
579
- value: colors.$cool-gray-80,
581
+ value: map.get(tag.$tag-color-cool-gray, white-theme),
580
582
  ),
581
583
  (
582
584
  theme: themes.$g10,
583
- value: colors.$cool-gray-80,
585
+ value: map.get(tag.$tag-color-cool-gray, g-10),
584
586
  ),
585
587
  (
586
588
  theme: themes.$g90,
587
- value: colors.$cool-gray-20,
589
+ value: map.get(tag.$tag-color-cool-gray, g-90),
588
590
  ),
589
591
  (
590
592
  theme: themes.$g100,
591
- value: colors.$cool-gray-20,
593
+ value: map.get(tag.$tag-color-cool-gray, g-100),
592
594
  ),
593
595
  ),
594
596
  ) !default;
595
597
 
596
598
  $tag-hover-cool-gray: (
597
- fallback: colors.$cool-gray-30,
599
+ fallback: map.get(tag.$tag-hover-cool-gray, white-theme),
598
600
  values: (
599
601
  (
600
602
  theme: themes.$white,
601
- value: colors.$cool-gray-30,
603
+ value: map.get(tag.$tag-hover-cool-gray, white-theme),
602
604
  ),
603
605
  (
604
606
  theme: themes.$g10,
605
- value: colors.$cool-gray-30,
607
+ value: map.get(tag.$tag-hover-cool-gray, g-10),
606
608
  ),
607
609
  (
608
610
  theme: themes.$g90,
609
- value: colors.$cool-gray-70-hover,
611
+ value: map.get(tag.$tag-hover-cool-gray, g-90),
610
612
  ),
611
613
  (
612
614
  theme: themes.$g100,
613
- value: colors.$cool-gray-70-hover,
615
+ value: map.get(tag.$tag-hover-cool-gray, g-100),
614
616
  ),
615
617
  ),
616
618
  ) !default;
617
619
 
618
620
  // warm-gray
619
621
  $tag-background-warm-gray: (
620
- fallback: colors.$warm-gray-20,
622
+ fallback: map.get(tag.$tag-background-warm-gray, white-theme),
621
623
  values: (
622
624
  (
623
625
  theme: themes.$white,
624
- value: colors.$warm-gray-20,
626
+ value: map.get(tag.$tag-background-warm-gray, white-theme),
625
627
  ),
626
628
  (
627
629
  theme: themes.$g10,
628
- value: colors.$warm-gray-20,
630
+ value: map.get(tag.$tag-background-warm-gray, g-10),
629
631
  ),
630
632
  (
631
633
  theme: themes.$g90,
632
- value: colors.$warm-gray-70,
634
+ value: map.get(tag.$tag-background-warm-gray, g-90),
633
635
  ),
634
636
  (
635
637
  theme: themes.$g100,
636
- value: colors.$warm-gray-70,
638
+ value: map.get(tag.$tag-background-warm-gray, g-100),
637
639
  ),
638
640
  ),
639
641
  ) !default;
640
642
 
641
643
  $tag-color-warm-gray: (
642
- fallback: colors.$warm-gray-80,
644
+ fallback: map.get(tag.$tag-color-warm-gray, white-theme),
643
645
  values: (
644
646
  (
645
647
  theme: themes.$white,
646
- value: colors.$warm-gray-80,
648
+ value: map.get(tag.$tag-color-warm-gray, white-theme),
647
649
  ),
648
650
  (
649
651
  theme: themes.$g10,
650
- value: colors.$warm-gray-80,
652
+ value: map.get(tag.$tag-color-warm-gray, g-10),
651
653
  ),
652
654
  (
653
655
  theme: themes.$g90,
654
- value: colors.$warm-gray-20,
656
+ value: map.get(tag.$tag-color-warm-gray, g-90),
655
657
  ),
656
658
  (
657
659
  theme: themes.$g100,
658
- value: colors.$warm-gray-20,
660
+ value: map.get(tag.$tag-color-warm-gray, g-100),
659
661
  ),
660
662
  ),
661
663
  ) !default;
662
664
 
663
665
  $tag-hover-warm-gray: (
664
- fallback: colors.$warm-gray-30,
666
+ fallback: map.get(tag.$tag-hover-warm-gray, white-theme),
665
667
  values: (
666
668
  (
667
669
  theme: themes.$white,
668
- value: colors.$warm-gray-30,
670
+ value: map.get(tag.$tag-hover-warm-gray, white-theme),
669
671
  ),
670
672
  (
671
673
  theme: themes.$g10,
672
- value: colors.$warm-gray-30,
674
+ value: map.get(tag.$tag-hover-warm-gray, g-10),
673
675
  ),
674
676
  (
675
677
  theme: themes.$g90,
676
- value: colors.$warm-gray-70-hover,
678
+ value: map.get(tag.$tag-hover-warm-gray, g-90),
677
679
  ),
678
680
  (
679
681
  theme: themes.$g100,
680
- value: colors.$warm-gray-70-hover,
682
+ value: map.get(tag.$tag-hover-warm-gray, g-100),
681
683
  ),
682
684
  ),
683
685
  ) !default;