@carbon/themes 10.53.1 → 10.54.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 (6) hide show
  1. package/package.json +3 -3
  2. package/scss/modules/generated/_themes.scss +16 -16
  3. package/src/next/g10.js +4 -4
  4. package/src/next/g100.js +4 -5
  5. package/src/next/g90.js +4 -4
  6. 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.1",
4
+ "version": "10.54.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -31,7 +31,7 @@
31
31
  "dependencies": {
32
32
  "@carbon/colors": "^10.37.0",
33
33
  "@carbon/layout": "^10.37.0",
34
- "@carbon/type": "^10.43.1",
34
+ "@carbon/type": "^10.44.0",
35
35
  "color": "^3.1.2"
36
36
  },
37
37
  "devDependencies": {
@@ -49,5 +49,5 @@
49
49
  "rimraf": "^3.0.0"
50
50
  },
51
51
  "sideEffects": false,
52
- "gitHead": "e2c445f242cdd201c73e55dc10a998f3dec73ec4"
52
+ "gitHead": "9db9b14761bfaabde5cd54e1f47957d243d90321"
53
53
  }
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