@carbon/themes 10.53.2 → 10.55.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 (8) hide show
  1. package/package.json +6 -6
  2. package/scss/generated/_themes.scss +32 -38
  3. package/scss/generated/_tokens.scss +32 -38
  4. package/scss/modules/generated/_themes.scss +16 -16
  5. package/src/next/g10.js +4 -4
  6. package/src/next/g100.js +4 -5
  7. package/src/next/g90.js +4 -4
  8. package/src/next/white.js +4 -4
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/themes",
3
3
  "description": "Themes for applying color in the Carbon Design System",
4
- "version": "10.53.2",
4
+ "version": "10.55.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -29,9 +29,9 @@
29
29
  "build": "yarn clean && carbon-cli bundle src/index.js --name CarbonThemes && babel-node --presets '@babel/preset-env' tasks/build.js && carbon-cli check \"scss/*.scss\""
30
30
  },
31
31
  "dependencies": {
32
- "@carbon/colors": "^10.37.1",
33
- "@carbon/layout": "^10.37.1",
34
- "@carbon/type": "^10.43.2",
32
+ "@carbon/colors": "^10.37.0",
33
+ "@carbon/layout": "^10.37.0",
34
+ "@carbon/type": "^10.45.0",
35
35
  "color": "^3.1.2"
36
36
  },
37
37
  "devDependencies": {
@@ -40,7 +40,7 @@
40
40
  "@carbon/cli": "^10.34.0",
41
41
  "@carbon/cli-reporter": "^10.5.0",
42
42
  "@carbon/scss-generator": "^10.13.0",
43
- "@carbon/test-utils": "^10.21.1",
43
+ "@carbon/test-utils": "^10.21.0",
44
44
  "change-case": "^4.1.1",
45
45
  "core-js": "^3.16.0",
46
46
  "fs-extra": "^10.0.0",
@@ -49,5 +49,5 @@
49
49
  "rimraf": "^3.0.0"
50
50
  },
51
51
  "sideEffects": false,
52
- "gitHead": "9b11eecab91c41ae4ffda711c5e1f631f2fb33db"
52
+ "gitHead": "85936cc8eff48a8eeec70b00966339f3b325eb7f"
53
53
  }
package/scss/generated/_themes.scss CHANGED
@@ -270,7 +270,7 @@ $carbon--theme--white: (
270
270
  ),
271
271
  productive-heading-05: (
272
272
  font-size: 2rem,
273
- font-weight: 400,
273
+ font-weight: 300,
274
274
  line-height: 1.25,
275
275
  letter-spacing: 0,
276
276
  ),
@@ -323,39 +323,37 @@ $carbon--theme--white: (
323
323
  xlg: (
324
324
  font-size: 1.75rem,
325
325
  line-height: 1.25,
326
+ font-weight: 300,
326
327
  ),
327
328
  max: (
328
329
  font-size: 2rem,
330
+ font-weight: 300,
329
331
  ),
330
332
  ),
331
333
  ),
332
334
  expressive-heading-05: (
333
335
  font-size: 2rem,
334
- font-weight: 400,
336
+ font-weight: 300,
335
337
  line-height: 1.25,
336
338
  letter-spacing: 0,
337
339
  breakpoints: (
338
340
  md: (
339
341
  font-size: 2.25rem,
340
- font-weight: 300,
341
342
  line-height: 1.22,
342
343
  letter-spacing: 0,
343
344
  ),
344
345
  lg: (
345
346
  font-size: 2.625rem,
346
- font-weight: 300,
347
347
  line-height: 1.19,
348
348
  letter-spacing: 0,
349
349
  ),
350
350
  xlg: (
351
351
  font-size: 3rem,
352
- font-weight: 300,
353
352
  line-height: 1.17,
354
353
  letter-spacing: 0,
355
354
  ),
356
355
  max: (
357
356
  font-size: 3.75rem,
358
- font-weight: 300,
359
357
  letter-spacing: 0,
360
358
  ),
361
359
  ),
@@ -514,44 +512,43 @@ $carbon--theme--white: (
514
512
  letter-spacing: 0,
515
513
  breakpoints: (
516
514
  md: (
517
- font-size: 4.25rem,
518
- line-height: 1.15,
515
+ font-size: 3.375rem,
516
+ line-height: 1.18,
519
517
  ),
520
518
  lg: (
521
- font-size: 5.75rem,
522
- line-height: 1.11,
519
+ font-size: 3.75rem,
520
+ line-height: 1.16,
523
521
  letter-spacing: -0.64px,
524
522
  ),
525
523
  xlg: (
526
- font-size: 7.625rem,
527
- line-height: 1.07,
524
+ font-size: 4.75rem,
525
+ line-height: 1.13,
528
526
  ),
529
527
  max: (
530
- font-size: 9.75rem,
531
- line-height: 1.05,
528
+ font-size: 5.25rem,
529
+ line-height: 1.11,
532
530
  letter-spacing: -0.96px,
533
531
  ),
534
532
  ),
535
533
  ),
536
534
  display-04: (
537
535
  font-size: 2.625rem,
538
- font-weight: 600,
536
+ font-weight: 300,
539
537
  line-height: 1.19,
540
538
  letter-spacing: 0,
541
539
  breakpoints: (
542
540
  md: (
543
541
  font-size: 4.25rem,
544
- line-height: 1.15,
542
+ line-height: 1.14,
545
543
  ),
546
544
  lg: (
547
545
  font-size: 5.75rem,
548
- line-height: 1.11,
546
+ line-height: 1.1,
549
547
  letter-spacing: -0.64px,
550
548
  ),
551
549
  xlg: (
552
550
  font-size: 7.625rem,
553
- line-height: 1.07,
554
- letter-spacing: -0.64px,
551
+ line-height: 1.06,
555
552
  ),
556
553
  max: (
557
554
  font-size: 9.75rem,
@@ -622,7 +619,7 @@ $carbon--theme--white: (
622
619
  ),
623
620
  heading-05: (
624
621
  font-size: 2rem,
625
- font-weight: 400,
622
+ font-weight: 300,
626
623
  line-height: 1.25,
627
624
  letter-spacing: 0,
628
625
  ),
@@ -663,39 +660,37 @@ $carbon--theme--white: (
663
660
  xlg: (
664
661
  font-size: 1.75rem,
665
662
  line-height: 1.25,
663
+ font-weight: 300,
666
664
  ),
667
665
  max: (
668
666
  font-size: 2rem,
667
+ font-weight: 300,
669
668
  ),
670
669
  ),
671
670
  ),
672
671
  fluid-heading-05: (
673
672
  font-size: 2rem,
674
- font-weight: 400,
673
+ font-weight: 300,
675
674
  line-height: 1.25,
676
675
  letter-spacing: 0,
677
676
  breakpoints: (
678
677
  md: (
679
678
  font-size: 2.25rem,
680
- font-weight: 300,
681
679
  line-height: 1.22,
682
680
  letter-spacing: 0,
683
681
  ),
684
682
  lg: (
685
683
  font-size: 2.625rem,
686
- font-weight: 300,
687
684
  line-height: 1.19,
688
685
  letter-spacing: 0,
689
686
  ),
690
687
  xlg: (
691
688
  font-size: 3rem,
692
- font-weight: 300,
693
689
  line-height: 1.17,
694
690
  letter-spacing: 0,
695
691
  ),
696
692
  max: (
697
693
  font-size: 3.75rem,
698
- font-weight: 300,
699
694
  letter-spacing: 0,
700
695
  ),
701
696
  ),
@@ -854,44 +849,43 @@ $carbon--theme--white: (
854
849
  letter-spacing: 0,
855
850
  breakpoints: (
856
851
  md: (
857
- font-size: 4.25rem,
858
- line-height: 1.15,
852
+ font-size: 3.375rem,
853
+ line-height: 1.18,
859
854
  ),
860
855
  lg: (
861
- font-size: 5.75rem,
862
- line-height: 1.11,
856
+ font-size: 3.75rem,
857
+ line-height: 1.16,
863
858
  letter-spacing: -0.64px,
864
859
  ),
865
860
  xlg: (
866
- font-size: 7.625rem,
867
- line-height: 1.07,
861
+ font-size: 4.75rem,
862
+ line-height: 1.13,
868
863
  ),
869
864
  max: (
870
- font-size: 9.75rem,
871
- line-height: 1.05,
865
+ font-size: 5.25rem,
866
+ line-height: 1.11,
872
867
  letter-spacing: -0.96px,
873
868
  ),
874
869
  ),
875
870
  ),
876
871
  fluid-display-04: (
877
872
  font-size: 2.625rem,
878
- font-weight: 600,
873
+ font-weight: 300,
879
874
  line-height: 1.19,
880
875
  letter-spacing: 0,
881
876
  breakpoints: (
882
877
  md: (
883
878
  font-size: 4.25rem,
884
- line-height: 1.15,
879
+ line-height: 1.14,
885
880
  ),
886
881
  lg: (
887
882
  font-size: 5.75rem,
888
- line-height: 1.11,
883
+ line-height: 1.1,
889
884
  letter-spacing: -0.64px,
890
885
  ),
891
886
  xlg: (
892
887
  font-size: 7.625rem,
893
- line-height: 1.07,
894
- letter-spacing: -0.64px,
888
+ line-height: 1.06,
895
889
  ),
896
890
  max: (
897
891
  font-size: 9.75rem,
package/scss/generated/_tokens.scss CHANGED
@@ -1825,7 +1825,7 @@ $productive-heading-05: if(
1825
1825
  map-get($carbon--theme, 'productive-heading-05'),
1826
1826
  (
1827
1827
  font-size: 2rem,
1828
- font-weight: 400,
1828
+ font-weight: 300,
1829
1829
  line-height: 1.25,
1830
1830
  letter-spacing: 0,
1831
1831
  )
@@ -1932,9 +1932,11 @@ $expressive-heading-04: if(
1932
1932
  xlg: (
1933
1933
  font-size: 1.75rem,
1934
1934
  line-height: 1.25,
1935
+ font-weight: 300,
1935
1936
  ),
1936
1937
  max: (
1937
1938
  font-size: 2rem,
1939
+ font-weight: 300,
1938
1940
  ),
1939
1941
  ),
1940
1942
  )
@@ -1949,31 +1951,27 @@ $expressive-heading-05: if(
1949
1951
  map-get($carbon--theme, 'expressive-heading-05'),
1950
1952
  (
1951
1953
  font-size: 2rem,
1952
- font-weight: 400,
1954
+ font-weight: 300,
1953
1955
  line-height: 1.25,
1954
1956
  letter-spacing: 0,
1955
1957
  breakpoints: (
1956
1958
  md: (
1957
1959
  font-size: 2.25rem,
1958
- font-weight: 300,
1959
1960
  line-height: 1.22,
1960
1961
  letter-spacing: 0,
1961
1962
  ),
1962
1963
  lg: (
1963
1964
  font-size: 2.625rem,
1964
- font-weight: 300,
1965
1965
  line-height: 1.19,
1966
1966
  letter-spacing: 0,
1967
1967
  ),
1968
1968
  xlg: (
1969
1969
  font-size: 3rem,
1970
- font-weight: 300,
1971
1970
  line-height: 1.17,
1972
1971
  letter-spacing: 0,
1973
1972
  ),
1974
1973
  max: (
1975
1974
  font-size: 3.75rem,
1976
- font-weight: 300,
1977
1975
  letter-spacing: 0,
1978
1976
  ),
1979
1977
  ),
@@ -2195,21 +2193,21 @@ $display-03: if(
2195
2193
  letter-spacing: 0,
2196
2194
  breakpoints: (
2197
2195
  md: (
2198
- font-size: 4.25rem,
2199
- line-height: 1.15,
2196
+ font-size: 3.375rem,
2197
+ line-height: 1.18,
2200
2198
  ),
2201
2199
  lg: (
2202
- font-size: 5.75rem,
2203
- line-height: 1.11,
2200
+ font-size: 3.75rem,
2201
+ line-height: 1.16,
2204
2202
  letter-spacing: -0.64px,
2205
2203
  ),
2206
2204
  xlg: (
2207
- font-size: 7.625rem,
2208
- line-height: 1.07,
2205
+ font-size: 4.75rem,
2206
+ line-height: 1.13,
2209
2207
  ),
2210
2208
  max: (
2211
- font-size: 9.75rem,
2212
- line-height: 1.05,
2209
+ font-size: 5.25rem,
2210
+ line-height: 1.11,
2213
2211
  letter-spacing: -0.96px,
2214
2212
  ),
2215
2213
  ),
@@ -2225,23 +2223,22 @@ $display-04: if(
2225
2223
  map-get($carbon--theme, 'display-04'),
2226
2224
  (
2227
2225
  font-size: 2.625rem,
2228
- font-weight: 600,
2226
+ font-weight: 300,
2229
2227
  line-height: 1.19,
2230
2228
  letter-spacing: 0,
2231
2229
  breakpoints: (
2232
2230
  md: (
2233
2231
  font-size: 4.25rem,
2234
- line-height: 1.15,
2232
+ line-height: 1.14,
2235
2233
  ),
2236
2234
  lg: (
2237
2235
  font-size: 5.75rem,
2238
- line-height: 1.11,
2236
+ line-height: 1.1,
2239
2237
  letter-spacing: -0.64px,
2240
2238
  ),
2241
2239
  xlg: (
2242
2240
  font-size: 7.625rem,
2243
- line-height: 1.07,
2244
- letter-spacing: -0.64px,
2241
+ line-height: 1.06,
2245
2242
  ),
2246
2243
  max: (
2247
2244
  font-size: 9.75rem,
@@ -2411,7 +2408,7 @@ $heading-05: if(
2411
2408
  map-get($carbon--theme, 'heading-05'),
2412
2409
  (
2413
2410
  font-size: 2rem,
2414
- font-weight: 400,
2411
+ font-weight: 300,
2415
2412
  line-height: 1.25,
2416
2413
  letter-spacing: 0,
2417
2414
  )
@@ -2488,9 +2485,11 @@ $fluid-heading-04: if(
2488
2485
  xlg: (
2489
2486
  font-size: 1.75rem,
2490
2487
  line-height: 1.25,
2488
+ font-weight: 300,
2491
2489
  ),
2492
2490
  max: (
2493
2491
  font-size: 2rem,
2492
+ font-weight: 300,
2494
2493
  ),
2495
2494
  ),
2496
2495
  )
@@ -2505,31 +2504,27 @@ $fluid-heading-05: if(
2505
2504
  map-get($carbon--theme, 'fluid-heading-05'),
2506
2505
  (
2507
2506
  font-size: 2rem,
2508
- font-weight: 400,
2507
+ font-weight: 300,
2509
2508
  line-height: 1.25,
2510
2509
  letter-spacing: 0,
2511
2510
  breakpoints: (
2512
2511
  md: (
2513
2512
  font-size: 2.25rem,
2514
- font-weight: 300,
2515
2513
  line-height: 1.22,
2516
2514
  letter-spacing: 0,
2517
2515
  ),
2518
2516
  lg: (
2519
2517
  font-size: 2.625rem,
2520
- font-weight: 300,
2521
2518
  line-height: 1.19,
2522
2519
  letter-spacing: 0,
2523
2520
  ),
2524
2521
  xlg: (
2525
2522
  font-size: 3rem,
2526
- font-weight: 300,
2527
2523
  line-height: 1.17,
2528
2524
  letter-spacing: 0,
2529
2525
  ),
2530
2526
  max: (
2531
2527
  font-size: 3.75rem,
2532
- font-weight: 300,
2533
2528
  letter-spacing: 0,
2534
2529
  ),
2535
2530
  ),
@@ -2751,21 +2746,21 @@ $fluid-display-03: if(
2751
2746
  letter-spacing: 0,
2752
2747
  breakpoints: (
2753
2748
  md: (
2754
- font-size: 4.25rem,
2755
- line-height: 1.15,
2749
+ font-size: 3.375rem,
2750
+ line-height: 1.18,
2756
2751
  ),
2757
2752
  lg: (
2758
- font-size: 5.75rem,
2759
- line-height: 1.11,
2753
+ font-size: 3.75rem,
2754
+ line-height: 1.16,
2760
2755
  letter-spacing: -0.64px,
2761
2756
  ),
2762
2757
  xlg: (
2763
- font-size: 7.625rem,
2764
- line-height: 1.07,
2758
+ font-size: 4.75rem,
2759
+ line-height: 1.13,
2765
2760
  ),
2766
2761
  max: (
2767
- font-size: 9.75rem,
2768
- line-height: 1.05,
2762
+ font-size: 5.25rem,
2763
+ line-height: 1.11,
2769
2764
  letter-spacing: -0.96px,
2770
2765
  ),
2771
2766
  ),
@@ -2781,23 +2776,22 @@ $fluid-display-04: if(
2781
2776
  map-get($carbon--theme, 'fluid-display-04'),
2782
2777
  (
2783
2778
  font-size: 2.625rem,
2784
- font-weight: 600,
2779
+ font-weight: 300,
2785
2780
  line-height: 1.19,
2786
2781
  letter-spacing: 0,
2787
2782
  breakpoints: (
2788
2783
  md: (
2789
2784
  font-size: 4.25rem,
2790
- line-height: 1.15,
2785
+ line-height: 1.14,
2791
2786
  ),
2792
2787
  lg: (
2793
2788
  font-size: 5.75rem,
2794
- line-height: 1.11,
2789
+ line-height: 1.1,
2795
2790
  letter-spacing: -0.64px,
2796
2791
  ),
2797
2792
  xlg: (
2798
2793
  font-size: 7.625rem,
2799
- line-height: 1.07,
2800
- letter-spacing: -0.64px,
2794
+ line-height: 1.06,
2801
2795
  ),
2802
2796
  max: (
2803
2797
  font-size: 9.75rem,
package/scss/modules/generated/_themes.scss CHANGED
@@ -13,13 +13,13 @@
13
13
 
14
14
  $white: (
15
15
  background: #ffffff,
16
- background-active: #c6c6c6,
16
+ background-active: rgba(141, 141, 141, 0.5),
17
17
  background-brand: #0f62fe,
18
- background-hover: #e8e8e8,
18
+ background-hover: rgba(141, 141, 141, 0.12),
19
19
  background-inverse: #393939,
20
20
  background-inverse-hover: #474747,
21
- background-selected: #e0e0e0,
22
- background-selected-hover: #d1d1d1,
21
+ background-selected: rgba(141, 141, 141, 0.2),
22
+ background-selected-hover: rgba(141, 141, 141, 0.32),
23
23
  border-disabled: #c6c6c6,
24
24
  border-interactive: #0f62fe,
25
25
  border-inverse: #161616,
@@ -118,13 +118,13 @@ $white: utilities.merge(
118
118
 
119
119
  $g10: (
120
120
  background: #f4f4f4,
121
- background-active: #c6c6c6,
121
+ background-active: rgba(141, 141, 141, 0.5),
122
122
  background-brand: #0f62fe,
123
- background-hover: #e8e8e8,
123
+ background-hover: rgba(141, 141, 141, 0.12),
124
124
  background-inverse: #393939,
125
125
  background-inverse-hover: #474747,
126
- background-selected: #e0e0e0,
127
- background-selected-hover: #d1d1d1,
126
+ background-selected: rgba(141, 141, 141, 0.2),
127
+ background-selected-hover: rgba(141, 141, 141, 0.32),
128
128
  border-disabled: #c6c6c6,
129
129
  border-interactive: #0f62fe,
130
130
  border-inverse: #161616,
@@ -223,13 +223,13 @@ $g10: utilities.merge(
223
223
 
224
224
  $g90: (
225
225
  background: #262626,
226
- background-active: #393939,
226
+ background-active: rgba(141, 141, 141, 0.4),
227
227
  background-brand: #0f62fe,
228
- background-hover: #333333,
228
+ background-hover: rgba(141, 141, 141, 0.16),
229
229
  background-inverse: #f4f4f4,
230
230
  background-inverse-hover: #e8e8e8,
231
- background-selected: #393939,
232
- background-selected-hover: #474747,
231
+ background-selected: rgba(141, 141, 141, 0.24),
232
+ background-selected-hover: rgba(141, 141, 141, 0.32),
233
233
  border-disabled: rgba(141, 141, 141, 0.5),
234
234
  border-interactive: #4589ff,
235
235
  border-inverse: #f4f4f4,
@@ -328,13 +328,13 @@ $g90: utilities.merge(
328
328
 
329
329
  $g100: (
330
330
  background: #161616,
331
- background-active: #393939,
331
+ background-active: rgba(141, 141, 141, 0.4),
332
332
  background-brand: #0f62fe,
333
- background-hover: #292929,
333
+ background-hover: rgba(141, 141, 141, 0.16),
334
334
  background-inverse: #f4f4f4,
335
335
  background-inverse-hover: #e8e8e8,
336
- background-selected: #262626,
337
- background-selected-hover: #333333,
336
+ background-selected: rgba(141, 141, 141, 0.24),
337
+ background-selected-hover: rgba(141, 141, 141, 0.32),
338
338
  border-disabled: rgba(141, 141, 141, 0.5),
339
339
  border-interactive: #4589ff,
340
340
  border-inverse: #f4f4f4,
package/src/next/g10.js CHANGED
@@ -47,11 +47,11 @@ import { adjustAlpha } from '../tools';
47
47
  export const background = gray10;
48
48
  export const backgroundInverse = gray80;
49
49
  export const backgroundBrand = blue60;
50
- export const backgroundActive = gray30;
51
- export const backgroundHover = gray10Hover;
50
+ export const backgroundActive = adjustAlpha(gray50, 0.5);
51
+ export const backgroundHover = adjustAlpha(gray50, 0.12);
52
52
  export const backgroundInverseHover = gray80Hover;
53
- export const backgroundSelected = gray20;
54
- export const backgroundSelectedHover = gray20Hover;
53
+ export const backgroundSelected = adjustAlpha(gray50, 0.2);
54
+ export const backgroundSelectedHover = adjustAlpha(gray50, 0.32);
55
55
 
56
56
  // Layer
57
57
  // layer-01
package/src/next/g100.js CHANGED
@@ -46,7 +46,6 @@ import {
46
46
 
47
47
  // Tools
48
48
  rgba,
49
- gray100Hover,
50
49
  gray10Hover,
51
50
  } from '@carbon/colors';
52
51
  import { adjustLightness, adjustAlpha } from '../tools';
@@ -55,11 +54,11 @@ import { adjustLightness, adjustAlpha } from '../tools';
55
54
  export const background = gray100;
56
55
  export const backgroundInverse = gray10;
57
56
  export const backgroundBrand = blue60;
58
- export const backgroundActive = gray80;
59
- export const backgroundHover = gray100Hover;
57
+ export const backgroundActive = adjustAlpha(gray50, 0.4);
58
+ export const backgroundHover = adjustAlpha(gray50, 0.16);
60
59
  export const backgroundInverseHover = gray10Hover;
61
- export const backgroundSelected = gray90;
62
- export const backgroundSelectedHover = gray90Hover;
60
+ export const backgroundSelected = adjustAlpha(gray50, 0.24);
61
+ export const backgroundSelectedHover = adjustAlpha(gray50, 0.32);
63
62
 
64
63
  // Layer
65
64
  // layer-01
package/src/next/g90.js CHANGED
@@ -54,11 +54,11 @@ import { adjustAlpha } from '../tools';
54
54
  export const background = gray90;
55
55
  export const backgroundInverse = gray10;
56
56
  export const backgroundBrand = blue60;
57
- export const backgroundActive = gray80;
58
- export const backgroundHover = gray90Hover;
57
+ export const backgroundActive = adjustAlpha(gray50, 0.4);
58
+ export const backgroundHover = adjustAlpha(gray50, 0.16);
59
59
  export const backgroundInverseHover = gray10Hover;
60
- export const backgroundSelected = gray80;
61
- export const backgroundSelectedHover = gray80Hover;
60
+ export const backgroundSelected = adjustAlpha(gray50, 0.24);
61
+ export const backgroundSelectedHover = adjustAlpha(gray50, 0.32);
62
62
 
63
63
  // Layer
64
64
  // layer-01
package/src/next/white.js CHANGED
@@ -47,11 +47,11 @@ import { adjustAlpha } from '../tools';
47
47
  export const background = white;
48
48
  export const backgroundInverse = gray80;
49
49
  export const backgroundBrand = blue60;
50
- export const backgroundActive = gray30;
51
- export const backgroundHover = whiteHover;
50
+ export const backgroundActive = adjustAlpha(gray50, 0.5);
51
+ export const backgroundHover = adjustAlpha(gray50, 0.12);
52
52
  export const backgroundInverseHover = gray80Hover;
53
- export const backgroundSelected = gray20;
54
- export const backgroundSelectedHover = gray20Hover;
53
+ export const backgroundSelected = adjustAlpha(gray50, 0.2);
54
+ export const backgroundSelectedHover = adjustAlpha(gray50, 0.32);
55
55
 
56
56
  // Layer
57
57
  // layer-01