@carbon/themes 10.21.0 → 10.23.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 (14) hide show
  1. package/docs/sass.md +217 -96
  2. package/es/index.js +61 -31
  3. package/lib/index.js +65 -32
  4. package/package.json +6 -6
  5. package/scss/generated/_mixins.scss +77 -39
  6. package/scss/generated/_themes.scss +47 -21
  7. package/scss/generated/_tokens.scss +54 -24
  8. package/src/g10.js +6 -4
  9. package/src/g100.js +6 -4
  10. package/src/g90.js +6 -4
  11. package/src/tokens.js +11 -7
  12. package/src/v9.js +5 -3
  13. package/src/white.js +6 -4
  14. package/umd/index.js +65 -32
package/scss/generated/_mixins.scss CHANGED
@@ -72,7 +72,8 @@
72
72
  $inverse-support-03: map-get($theme, 'inverse-support-03') !global;
73
73
  $inverse-support-04: map-get($theme, 'inverse-support-04') !global;
74
74
  $overlay-01: map-get($theme, 'overlay-01') !global;
75
- $danger: map-get($theme, 'danger') !global;
75
+ $danger-01: map-get($theme, 'danger-01') !global;
76
+ $danger-02: map-get($theme, 'danger-02') !global;
76
77
  $focus: map-get($theme, 'focus') !global;
77
78
  $inverse-focus-ui: map-get($theme, 'inverse-focus-ui') !global;
78
79
  $hover-primary: map-get($theme, 'hover-primary') !global;
@@ -83,10 +84,12 @@
83
84
  $hover-tertiary: map-get($theme, 'hover-tertiary') !global;
84
85
  $active-tertiary: map-get($theme, 'active-tertiary') !global;
85
86
  $hover-ui: map-get($theme, 'hover-ui') !global;
87
+ $hover-light-ui: map-get($theme, 'hover-light-ui') !global;
88
+ $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;
86
89
  $active-ui: map-get($theme, 'active-ui') !global;
90
+ $active-light-ui: map-get($theme, 'active-light-ui') !global;
87
91
  $selected-ui: map-get($theme, 'selected-ui') !global;
88
92
  $selected-light-ui: map-get($theme, 'selected-light-ui') !global;
89
- $hover-selected-ui: map-get($theme, 'hover-selected-ui') !global;
90
93
  $inverse-hover-ui: map-get($theme, 'inverse-hover-ui') !global;
91
94
  $hover-danger: map-get($theme, 'hover-danger') !global;
92
95
  $active-danger: map-get($theme, 'active-danger') !global;
@@ -97,7 +100,6 @@
97
100
  $disabled-03: map-get($theme, 'disabled-03') !global;
98
101
  $highlight: map-get($theme, 'highlight') !global;
99
102
  $decorative-01: map-get($theme, 'decorative-01') !global;
100
- $hover-light-ui: map-get($theme, 'hover-light-ui') !global;
101
103
  $button-separator: map-get($theme, 'button-separator') !global;
102
104
  $skeleton-01: map-get($theme, 'skeleton-01') !global;
103
105
  $skeleton-02: map-get($theme, 'skeleton-02') !global;
@@ -106,6 +108,7 @@
106
108
  $brand-03: map-get($theme, 'brand-03') !global;
107
109
  $active-01: map-get($theme, 'active-01') !global;
108
110
  $hover-field: map-get($theme, 'hover-field') !global;
111
+ $danger: map-get($theme, 'danger') !global;
109
112
  $caption-01: map-get($theme, 'caption-01') !global;
110
113
  $label-01: map-get($theme, 'label-01') !global;
111
114
  $helper-text-01: map-get($theme, 'helper-text-01') !global;
@@ -307,9 +310,13 @@
307
310
  --#{$custom-property-prefix}-overlay-01,
308
311
  map-get($theme, 'overlay-01')
309
312
  ) !global;
310
- $danger: var(
311
- --#{$custom-property-prefix}-danger,
312
- map-get($theme, 'danger')
313
+ $danger-01: var(
314
+ --#{$custom-property-prefix}-danger-01,
315
+ map-get($theme, 'danger-01')
316
+ ) !global;
317
+ $danger-02: var(
318
+ --#{$custom-property-prefix}-danger-02,
319
+ map-get($theme, 'danger-02')
313
320
  ) !global;
314
321
  $focus: var(
315
322
  --#{$custom-property-prefix}-focus,
@@ -351,10 +358,22 @@
351
358
  --#{$custom-property-prefix}-hover-ui,
352
359
  map-get($theme, 'hover-ui')
353
360
  ) !global;
361
+ $hover-light-ui: var(
362
+ --#{$custom-property-prefix}-hover-light-ui,
363
+ map-get($theme, 'hover-light-ui')
364
+ ) !global;
365
+ $hover-selected-ui: var(
366
+ --#{$custom-property-prefix}-hover-selected-ui,
367
+ map-get($theme, 'hover-selected-ui')
368
+ ) !global;
354
369
  $active-ui: var(
355
370
  --#{$custom-property-prefix}-active-ui,
356
371
  map-get($theme, 'active-ui')
357
372
  ) !global;
373
+ $active-light-ui: var(
374
+ --#{$custom-property-prefix}-active-light-ui,
375
+ map-get($theme, 'active-light-ui')
376
+ ) !global;
358
377
  $selected-ui: var(
359
378
  --#{$custom-property-prefix}-selected-ui,
360
379
  map-get($theme, 'selected-ui')
@@ -363,10 +382,6 @@
363
382
  --#{$custom-property-prefix}-selected-light-ui,
364
383
  map-get($theme, 'selected-light-ui')
365
384
  ) !global;
366
- $hover-selected-ui: var(
367
- --#{$custom-property-prefix}-hover-selected-ui,
368
- map-get($theme, 'hover-selected-ui')
369
- ) !global;
370
385
  $inverse-hover-ui: var(
371
386
  --#{$custom-property-prefix}-inverse-hover-ui,
372
387
  map-get($theme, 'inverse-hover-ui')
@@ -407,10 +422,6 @@
407
422
  --#{$custom-property-prefix}-decorative-01,
408
423
  map-get($theme, 'decorative-01')
409
424
  ) !global;
410
- $hover-light-ui: var(
411
- --#{$custom-property-prefix}-hover-light-ui,
412
- map-get($theme, 'hover-light-ui')
413
- ) !global;
414
425
  $button-separator: var(
415
426
  --#{$custom-property-prefix}-button-separator,
416
427
  map-get($theme, 'button-separator')
@@ -443,6 +454,10 @@
443
454
  --#{$custom-property-prefix}-hover-field,
444
455
  map-get($theme, 'hover-field')
445
456
  ) !global;
457
+ $danger: var(
458
+ --#{$custom-property-prefix}-danger,
459
+ map-get($theme, 'danger')
460
+ ) !global;
446
461
  $spacing-01: var(
447
462
  --#{$custom-property-prefix}-spacing-01,
448
463
  map-get($theme, 'spacing-01')
@@ -838,8 +853,14 @@
838
853
  @include custom-property('overlay-01', map-get($theme, 'overlay-01'));
839
854
  }
840
855
 
841
- @if should-emit($theme, $parent-carbon-theme, 'danger', $emit-difference) {
842
- @include custom-property('danger', map-get($theme, 'danger'));
856
+ @if should-emit($theme, $parent-carbon-theme, 'danger-01', $emit-difference)
857
+ {
858
+ @include custom-property('danger-01', map-get($theme, 'danger-01'));
859
+ }
860
+
861
+ @if should-emit($theme, $parent-carbon-theme, 'danger-02', $emit-difference)
862
+ {
863
+ @include custom-property('danger-02', map-get($theme, 'danger-02'));
843
864
  }
844
865
 
845
866
  @if should-emit($theme, $parent-carbon-theme, 'focus', $emit-difference) {
@@ -955,44 +976,70 @@
955
976
  @include custom-property('hover-ui', map-get($theme, 'hover-ui'));
956
977
  }
957
978
 
958
- @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)
979
+ @if should-emit(
980
+ $theme,
981
+ $parent-carbon-theme,
982
+ 'hover-light-ui',
983
+ $emit-difference
984
+ )
959
985
  {
960
- @include custom-property('active-ui', map-get($theme, 'active-ui'));
986
+ @include custom-property(
987
+ 'hover-light-ui',
988
+ map-get($theme, 'hover-light-ui')
989
+ );
961
990
  }
962
991
 
963
992
  @if should-emit(
964
993
  $theme,
965
994
  $parent-carbon-theme,
966
- 'selected-ui',
995
+ 'hover-selected-ui',
967
996
  $emit-difference
968
997
  )
969
998
  {
970
- @include custom-property('selected-ui', map-get($theme, 'selected-ui'));
999
+ @include custom-property(
1000
+ 'hover-selected-ui',
1001
+ map-get($theme, 'hover-selected-ui')
1002
+ );
1003
+ }
1004
+
1005
+ @if should-emit($theme, $parent-carbon-theme, 'active-ui', $emit-difference)
1006
+ {
1007
+ @include custom-property('active-ui', map-get($theme, 'active-ui'));
971
1008
  }
972
1009
 
973
1010
  @if should-emit(
974
1011
  $theme,
975
1012
  $parent-carbon-theme,
976
- 'selected-light-ui',
1013
+ 'active-light-ui',
977
1014
  $emit-difference
978
1015
  )
979
1016
  {
980
1017
  @include custom-property(
981
- 'selected-light-ui',
982
- map-get($theme, 'selected-light-ui')
1018
+ 'active-light-ui',
1019
+ map-get($theme, 'active-light-ui')
983
1020
  );
984
1021
  }
985
1022
 
986
1023
  @if should-emit(
987
1024
  $theme,
988
1025
  $parent-carbon-theme,
989
- 'hover-selected-ui',
1026
+ 'selected-ui',
1027
+ $emit-difference
1028
+ )
1029
+ {
1030
+ @include custom-property('selected-ui', map-get($theme, 'selected-ui'));
1031
+ }
1032
+
1033
+ @if should-emit(
1034
+ $theme,
1035
+ $parent-carbon-theme,
1036
+ 'selected-light-ui',
990
1037
  $emit-difference
991
1038
  )
992
1039
  {
993
1040
  @include custom-property(
994
- 'hover-selected-ui',
995
- map-get($theme, 'hover-selected-ui')
1041
+ 'selected-light-ui',
1042
+ map-get($theme, 'selected-light-ui')
996
1043
  );
997
1044
  }
998
1045
 
@@ -1095,19 +1142,6 @@
1095
1142
  );
1096
1143
  }
1097
1144
 
1098
- @if should-emit(
1099
- $theme,
1100
- $parent-carbon-theme,
1101
- 'hover-light-ui',
1102
- $emit-difference
1103
- )
1104
- {
1105
- @include custom-property(
1106
- 'hover-light-ui',
1107
- map-get($theme, 'hover-light-ui')
1108
- );
1109
- }
1110
-
1111
1145
  @if should-emit(
1112
1146
  $theme,
1113
1147
  $parent-carbon-theme,
@@ -1171,6 +1205,10 @@
1171
1205
  @include custom-property('hover-field', map-get($theme, 'hover-field'));
1172
1206
  }
1173
1207
 
1208
+ @if should-emit($theme, $parent-carbon-theme, 'danger', $emit-difference) {
1209
+ @include custom-property('danger', map-get($theme, 'danger'));
1210
+ }
1211
+
1174
1212
  @if should-emit(
1175
1213
  $theme,
1176
1214
  $parent-carbon-theme,
package/scss/generated/_themes.scss CHANGED
@@ -41,7 +41,8 @@ $carbon--theme--white: (
41
41
  inverse-support-03: #f1c21b,
42
42
  inverse-support-04: #4589ff,
43
43
  overlay-01: rgba(22, 22, 22, 0.5),
44
- danger: #da1e28,
44
+ danger-01: #da1e28,
45
+ danger-02: #da1e28,
45
46
  focus: #0f62fe,
46
47
  inverse-focus-ui: #ffffff,
47
48
  hover-primary: #0353e9,
@@ -52,7 +53,9 @@ $carbon--theme--white: (
52
53
  hover-tertiary: #0353e9,
53
54
  active-tertiary: #002d9c,
54
55
  hover-ui: #e5e5e5,
56
+ hover-light-ui: #e5e5e5,
55
57
  active-ui: #c6c6c6,
58
+ active-light-ui: #c6c6c6,
56
59
  selected-ui: #e0e0e0,
57
60
  selected-light-ui: #e0e0e0,
58
61
  inverse-hover-ui: #4c4c4c,
@@ -66,7 +69,6 @@ $carbon--theme--white: (
66
69
  disabled-03: #8d8d8d,
67
70
  highlight: #d0e2ff,
68
71
  decorative-01: #e0e0e0,
69
- hover-light-ui: #e5e5e5,
70
72
  button-separator: #e0e0e0,
71
73
  skeleton-01: #e5e5e5,
72
74
  skeleton-02: #c6c6c6,
@@ -75,6 +77,7 @@ $carbon--theme--white: (
75
77
  brand-03: #0f62fe,
76
78
  active-01: #c6c6c6,
77
79
  hover-field: #e5e5e5,
80
+ danger: #da1e28,
78
81
  caption-01: (
79
82
  font-size: 0.75rem,
80
83
  font-weight: 400,
@@ -544,6 +547,7 @@ $carbon--theme--g90: map-merge(
544
547
  inverse-support-02: #24a148,
545
548
  inverse-support-04: #0f62fe,
546
549
  overlay-01: rgba(22, 22, 22, 0.7),
550
+ danger-02: #ff8389,
547
551
  focus: #ffffff,
548
552
  inverse-focus-ui: #0f62fe,
549
553
  hover-primary-text: #a6c8ff,
@@ -552,7 +556,9 @@ $carbon--theme--g90: map-merge(
552
556
  hover-tertiary: #f4f4f4,
553
557
  active-tertiary: #c6c6c6,
554
558
  hover-ui: #4c4c4c,
559
+ hover-light-ui: #656565,
555
560
  active-ui: #6f6f6f,
561
+ active-light-ui: #8d8d8d,
556
562
  selected-ui: #525252,
557
563
  selected-light-ui: #6f6f6f,
558
564
  inverse-hover-ui: #e5e5e5,
@@ -564,7 +570,6 @@ $carbon--theme--g90: map-merge(
564
570
  disabled-03: #a8a8a8,
565
571
  highlight: #0043ce,
566
572
  decorative-01: #6f6f6f,
567
- hover-light-ui: #6f6f6f,
568
573
  button-separator: #161616,
569
574
  skeleton-01: #353535,
570
575
  skeleton-02: #525252,
@@ -611,6 +616,7 @@ $carbon--theme--g100: map-merge(
611
616
  inverse-support-02: #24a148,
612
617
  inverse-support-04: #0f62fe,
613
618
  overlay-01: rgba(22, 22, 22, 0.7),
619
+ danger-02: #fa4d56,
614
620
  focus: #ffffff,
615
621
  inverse-focus-ui: #0f62fe,
616
622
  hover-primary-text: #a6c8ff,
@@ -619,7 +625,9 @@ $carbon--theme--g100: map-merge(
619
625
  hover-tertiary: #f4f4f4,
620
626
  active-tertiary: #c6c6c6,
621
627
  hover-ui: #353535,
628
+ hover-light-ui: #4c4c4c,
622
629
  active-ui: #525252,
630
+ active-light-ui: #6f6f6f,
623
631
  selected-ui: #393939,
624
632
  selected-light-ui: #525252,
625
633
  inverse-hover-ui: #e5e5e5,
@@ -630,7 +638,6 @@ $carbon--theme--g100: map-merge(
630
638
  disabled-02: #525252,
631
639
  highlight: #002d9c,
632
640
  decorative-01: #525252,
633
- hover-light-ui: #525252,
634
641
  button-separator: #161616,
635
642
  skeleton-01: #353535,
636
643
  skeleton-02: #393939,
@@ -689,7 +696,9 @@ $carbon--theme--v9: map-merge(
689
696
  hover-tertiary: #5a6872,
690
697
  active-tertiary: #414f59,
691
698
  hover-ui: #eef4fc,
699
+ hover-light-ui: #eef4fc,
692
700
  active-ui: #dfeafa,
701
+ active-light-ui: #dfeafa,
693
702
  selected-ui: #eef4fc,
694
703
  selected-light-ui: #eef4fc,
695
704
  hover-selected-ui: #dfeafa,
@@ -702,7 +711,6 @@ $carbon--theme--v9: map-merge(
702
711
  disabled-03: #cdd1d4,
703
712
  highlight: #f4f7fb,
704
713
  decorative-01: #eef4fc,
705
- hover-light-ui: #eef4fc,
706
714
  skeleton-01: rgba(61, 112, 178, 0.1),
707
715
  skeleton-02: rgba(61, 112, 178, 0.1),
708
716
  brand-01: #3d70b2,
@@ -923,11 +931,17 @@ $carbon--theme: (
923
931
  $overlay-01,
924
932
  map-get($carbon--theme--white, 'overlay-01')
925
933
  ),
926
- danger:
934
+ danger-01:
927
935
  if(
928
- global-variable-exists('danger'),
929
- $danger,
930
- map-get($carbon--theme--white, 'danger')
936
+ global-variable-exists('danger-01'),
937
+ $danger-01,
938
+ map-get($carbon--theme--white, 'danger-01')
939
+ ),
940
+ danger-02:
941
+ if(
942
+ global-variable-exists('danger-02'),
943
+ $danger-02,
944
+ map-get($carbon--theme--white, 'danger-02')
931
945
  ),
932
946
  focus:
933
947
  if(
@@ -989,12 +1003,30 @@ $carbon--theme: (
989
1003
  $hover-ui,
990
1004
  map-get($carbon--theme--white, 'hover-ui')
991
1005
  ),
1006
+ hover-light-ui:
1007
+ if(
1008
+ global-variable-exists('hover-light-ui'),
1009
+ $hover-light-ui,
1010
+ map-get($carbon--theme--white, 'hover-light-ui')
1011
+ ),
1012
+ hover-selected-ui:
1013
+ if(
1014
+ global-variable-exists('hover-selected-ui'),
1015
+ $hover-selected-ui,
1016
+ map-get($carbon--theme--white, 'hover-selected-ui')
1017
+ ),
992
1018
  active-ui:
993
1019
  if(
994
1020
  global-variable-exists('active-ui'),
995
1021
  $active-ui,
996
1022
  map-get($carbon--theme--white, 'active-ui')
997
1023
  ),
1024
+ active-light-ui:
1025
+ if(
1026
+ global-variable-exists('active-light-ui'),
1027
+ $active-light-ui,
1028
+ map-get($carbon--theme--white, 'active-light-ui')
1029
+ ),
998
1030
  selected-ui:
999
1031
  if(
1000
1032
  global-variable-exists('selected-ui'),
@@ -1007,12 +1039,6 @@ $carbon--theme: (
1007
1039
  $selected-light-ui,
1008
1040
  map-get($carbon--theme--white, 'selected-light-ui')
1009
1041
  ),
1010
- hover-selected-ui:
1011
- if(
1012
- global-variable-exists('hover-selected-ui'),
1013
- $hover-selected-ui,
1014
- map-get($carbon--theme--white, 'hover-selected-ui')
1015
- ),
1016
1042
  inverse-hover-ui:
1017
1043
  if(
1018
1044
  global-variable-exists('inverse-hover-ui'),
@@ -1073,12 +1099,6 @@ $carbon--theme: (
1073
1099
  $decorative-01,
1074
1100
  map-get($carbon--theme--white, 'decorative-01')
1075
1101
  ),
1076
- hover-light-ui:
1077
- if(
1078
- global-variable-exists('hover-light-ui'),
1079
- $hover-light-ui,
1080
- map-get($carbon--theme--white, 'hover-light-ui')
1081
- ),
1082
1102
  button-separator:
1083
1103
  if(
1084
1104
  global-variable-exists('button-separator'),
@@ -1127,6 +1147,12 @@ $carbon--theme: (
1127
1147
  $hover-field,
1128
1148
  map-get($carbon--theme--white, 'hover-field')
1129
1149
  ),
1150
+ danger:
1151
+ if(
1152
+ global-variable-exists('danger'),
1153
+ $danger,
1154
+ map-get($carbon--theme--white, 'danger')
1155
+ ),
1130
1156
  caption-01:
1131
1157
  if(
1132
1158
  global-variable-exists('caption-01'),
package/scss/generated/_tokens.scss CHANGED
@@ -380,10 +380,20 @@ $overlay-01: if(
380
380
  /// @type {undefined}
381
381
  /// @access public
382
382
  /// @group @carbon/themes
383
- $danger: if(
383
+ $danger-01: if(
384
384
  global-variable-exists('carbon--theme') and
385
- map-has-key($carbon--theme, 'danger'),
386
- map-get($carbon--theme, 'danger'),
385
+ map-has-key($carbon--theme, 'danger-01'),
386
+ map-get($carbon--theme, 'danger-01'),
387
+ #da1e28
388
+ ) !default;
389
+
390
+ /// @type {undefined}
391
+ /// @access public
392
+ /// @group @carbon/themes
393
+ $danger-02: if(
394
+ global-variable-exists('carbon--theme') and
395
+ map-has-key($carbon--theme, 'danger-02'),
396
+ map-get($carbon--theme, 'danger-02'),
387
397
  #da1e28
388
398
  ) !default;
389
399
 
@@ -496,6 +506,27 @@ $hover-ui: if(
496
506
  #e5e5e5
497
507
  ) !default;
498
508
 
509
+ /// @type {undefined}
510
+ /// @access public
511
+ /// @group @carbon/themes
512
+ $hover-light-ui: if(
513
+ global-variable-exists('carbon--theme') and
514
+ map-has-key($carbon--theme, 'hover-light-ui'),
515
+ map-get($carbon--theme, 'hover-light-ui'),
516
+ #e5e5e5
517
+ ) !default;
518
+
519
+ /// Data table selected row hover
520
+ /// @type {undefined}
521
+ /// @access public
522
+ /// @group @carbon/themes
523
+ $hover-selected-ui: if(
524
+ global-variable-exists('carbon--theme') and
525
+ map-has-key($carbon--theme, 'hover-selected-ui'),
526
+ map-get($carbon--theme, 'hover-selected-ui'),
527
+ #cacaca
528
+ ) !default;
529
+
499
530
  /// `$ui-01` active; `$ui-02` active
500
531
  /// @type {undefined}
501
532
  /// @access public
@@ -507,6 +538,16 @@ $active-ui: if(
507
538
  #c6c6c6
508
539
  ) !default;
509
540
 
541
+ /// @type {undefined}
542
+ /// @access public
543
+ /// @group @carbon/themes
544
+ $active-light-ui: if(
545
+ global-variable-exists('carbon--theme') and
546
+ map-has-key($carbon--theme, 'active-light-ui'),
547
+ map-get($carbon--theme, 'active-light-ui'),
548
+ #c6c6c6
549
+ ) !default;
550
+
510
551
  /// Selected UI elements
511
552
  /// @type {undefined}
512
553
  /// @access public
@@ -528,17 +569,6 @@ $selected-light-ui: if(
528
569
  #e0e0e0
529
570
  ) !default;
530
571
 
531
- /// Data table selected row hover
532
- /// @type {undefined}
533
- /// @access public
534
- /// @group @carbon/themes
535
- $hover-selected-ui: if(
536
- global-variable-exists('carbon--theme') and
537
- map-has-key($carbon--theme, 'hover-selected-ui'),
538
- map-get($carbon--theme, 'hover-selected-ui'),
539
- #cacaca
540
- ) !default;
541
-
542
572
  /// @type {undefined}
543
573
  /// @access public
544
574
  /// @group @carbon/themes
@@ -647,16 +677,6 @@ $decorative-01: if(
647
677
  #e0e0e0
648
678
  ) !default;
649
679
 
650
- /// @type {undefined}
651
- /// @access public
652
- /// @group @carbon/themes
653
- $hover-light-ui: if(
654
- global-variable-exists('carbon--theme') and
655
- map-has-key($carbon--theme, 'hover-light-ui'),
656
- map-get($carbon--theme, 'hover-light-ui'),
657
- #e5e5e5
658
- ) !default;
659
-
660
680
  /// @type {undefined}
661
681
  /// @access public
662
682
  /// @group @carbon/themes
@@ -749,6 +769,16 @@ $hover-field: if(
749
769
  #e5e5e5
750
770
  ) !default;
751
771
 
772
+ /// @type {undefined}
773
+ /// @access public
774
+ /// @group @carbon/themes
775
+ $danger: if(
776
+ global-variable-exists('carbon--theme') and
777
+ map-has-key($carbon--theme, 'danger'),
778
+ map-get($carbon--theme, 'danger'),
779
+ #da1e28
780
+ ) !default;
781
+
752
782
  /// @type {Number}
753
783
  /// @access public
754
784
  /// @group @carbon/themes
package/src/g10.js CHANGED
@@ -88,7 +88,8 @@ export const inverseSupport04 = blue50;
88
88
 
89
89
  export const overlay01 = rgba(gray100, 0.5);
90
90
 
91
- export const danger = red60;
91
+ export const danger01 = red60;
92
+ export const danger02 = red60;
92
93
 
93
94
  // Interaction states
94
95
  export const focus = blue60;
@@ -106,14 +107,16 @@ export const hoverTertiary = '#0353e9';
106
107
  export const activeTertiary = blue80;
107
108
 
108
109
  export const hoverUI = '#e5e5e5';
110
+ export const hoverLightUI = '#e5e5e5';
109
111
  export const activeUI = gray30;
112
+ export const activeLightUI = gray30;
110
113
  export const selectedUI = gray20;
111
114
  export const selectedLightUI = gray20;
112
115
  export const inverseHoverUI = '#4c4c4c';
113
116
 
114
117
  export const hoverSelectedUI = '#cacaca';
115
118
 
116
- export const hoverDanger = adjustLightness(danger, -8);
119
+ export const hoverDanger = adjustLightness(danger01, -8);
117
120
  export const activeDanger = red80;
118
121
 
119
122
  export const hoverRow = '#e5e5e5';
@@ -128,8 +131,6 @@ export const highlight = blue10;
128
131
 
129
132
  export const decorative01 = gray20;
130
133
 
131
- export const hoverLightUI = '#e5e5e5';
132
-
133
134
  export const buttonSeparator = '#e0e0e0';
134
135
 
135
136
  export const skeleton01 = '#e5e5e5';
@@ -212,3 +213,4 @@ export const brand02 = interactive02;
212
213
  export const brand03 = interactive03;
213
214
  export const active01 = activeUI;
214
215
  export const hoverField = hoverUI;
216
+ export const danger = danger01;
package/src/g100.js CHANGED
@@ -87,7 +87,8 @@ export const inverseSupport04 = blue60;
87
87
 
88
88
  export const overlay01 = rgba(gray100, 0.7);
89
89
 
90
- export const danger = red60;
90
+ export const danger01 = red60;
91
+ export const danger02 = red50;
91
92
 
92
93
  // Interaction states
93
94
  export const focus = white;
@@ -105,14 +106,16 @@ export const hoverTertiary = gray10;
105
106
  export const activeTertiary = gray30;
106
107
 
107
108
  export const hoverUI = '#353535';
109
+ export const hoverLightUI = '#4c4c4c';
108
110
  export const activeUI = gray70;
111
+ export const activeLightUI = gray60;
109
112
  export const selectedUI = gray80;
110
113
  export const selectedLightUI = gray70;
111
114
  export const inverseHoverUI = '#e5e5e5';
112
115
 
113
116
  export const hoverSelectedUI = '#4c4c4c';
114
117
 
115
- export const hoverDanger = adjustLightness(danger, -8);
118
+ export const hoverDanger = adjustLightness(danger01, -8);
116
119
  export const activeDanger = red80;
117
120
 
118
121
  export const hoverRow = '#353535';
@@ -127,8 +130,6 @@ export const highlight = blue80;
127
130
 
128
131
  export const decorative01 = gray70;
129
132
 
130
- export const hoverLightUI = '#525252';
131
-
132
133
  export const buttonSeparator = '#161616';
133
134
 
134
135
  export const skeleton01 = '#353535';
@@ -211,3 +212,4 @@ export const brand02 = interactive02;
211
212
  export const brand03 = interactive03;
212
213
  export const active01 = activeUI;
213
214
  export const hoverField = hoverUI;
215
+ export const danger = danger01;
package/src/g90.js CHANGED
@@ -89,7 +89,8 @@ export const inverseSupport04 = blue60;
89
89
 
90
90
  export const overlay01 = rgba(gray100, 0.7);
91
91
 
92
- export const danger = red60;
92
+ export const danger01 = red60;
93
+ export const danger02 = red40;
93
94
 
94
95
  // Interaction states
95
96
  export const focus = white;
@@ -107,14 +108,16 @@ export const hoverTertiary = gray10;
107
108
  export const activeTertiary = gray30;
108
109
 
109
110
  export const hoverUI = '#4c4c4c';
111
+ export const hoverLightUI = '#656565';
110
112
  export const activeUI = gray60;
113
+ export const activeLightUI = gray50;
111
114
  export const selectedUI = gray70;
112
115
  export const selectedLightUI = gray60;
113
116
  export const inverseHoverUI = '#e5e5e5';
114
117
 
115
118
  export const hoverSelectedUI = '#656565';
116
119
 
117
- export const hoverDanger = adjustLightness(danger, -8);
120
+ export const hoverDanger = adjustLightness(danger01, -8);
118
121
  export const activeDanger = red80;
119
122
 
120
123
  export const hoverRow = '#4c4c4c';
@@ -129,8 +132,6 @@ export const highlight = blue70;
129
132
 
130
133
  export const decorative01 = gray60;
131
134
 
132
- export const hoverLightUI = '#6f6f6f';
133
-
134
135
  export const buttonSeparator = '#161616';
135
136
 
136
137
  export const skeleton01 = '#353535';
@@ -213,3 +214,4 @@ export const brand02 = interactive02;
213
214
  export const brand03 = interactive03;
214
215
  export const active01 = activeUI;
215
216
  export const hoverField = hoverUI;
217
+ export const danger = danger01;