@box/blueprint-web-assets 4.21.4 → 4.22.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 +3 -3
  2. package/tokens/px-tokens.d.ts +7 -1
  3. package/tokens/px-tokens.js +16 -10
  4. package/tokens/tokens-css-vars.scss +16 -10
  5. package/tokens/tokens.d.ts +6 -0
  6. package/tokens/tokens.js +15 -9
  7. package/tokens/tokens.json +15 -9
  8. package/tokens/tokens.scss +21 -9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web-assets",
3
- "version": "4.21.4",
3
+ "version": "4.22.0",
4
4
  "license": "SEE LICENSE IN LICENSE",
5
5
  "scripts": {
6
6
  "build-local-all": "yarn nx clone-repo && yarn build-local && yarn lint-local && yarn lint-local-css",
@@ -98,12 +98,12 @@
98
98
  }
99
99
  },
100
100
  "devDependencies": {
101
- "@box/storybook-utils": "^0.6.0",
101
+ "@box/storybook-utils": "^0.6.1",
102
102
  "@types/react": "^18.0.0",
103
103
  "@types/react-dom": "^18.0.0",
104
104
  "chalk": "4.1.2",
105
105
  "react": "^18.3.0",
106
106
  "react-dom": "^18.3.0"
107
107
  },
108
- "gitHead": "c45d13964d3b60b860c3606a0eb55fb86bc2e057"
108
+ "gitHead": "d11ef94c0b6fdc3b2cd69ce5ba09cbf931799c74"
109
109
  }
package/tokens/px-tokens.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 30 Aug 2024 09:56:24 GMT
3
+ * Generated on Mon, 16 Sep 2024 11:26:56 GMT
4
4
  */
5
5
 
6
6
  export const BackgroundBackground: string;
@@ -225,6 +225,7 @@ export const SurfaceContentswitcherSurface: string;
225
225
  export const SurfaceToolbarSurface: string;
226
226
  export const SurfaceToggleSurfaceOffPressed: string;
227
227
  export const SurfaceToggleSurfaceOnPressed: string;
228
+ export const SurfaceCtaSurfaceDisabled: string;
228
229
  export const BorderCtaBorderSecondary: string;
229
230
  export const BorderCtaBorderSecondaryPressed: string;
230
231
  export const BorderCtaBorderSecondaryHover: string;
@@ -286,6 +287,7 @@ export const BorderSearchBorderHover: string;
286
287
  export const BorderSearchGlobalBorderHover: string;
287
288
  export const BorderGridthumbnailBorder: string;
288
289
  export const BorderFilterchipBorderMultiOn: string;
290
+ export const BorderFilterchipBorderMultiOnHover: string;
289
291
  export const BorderCollapsibleBorder: string;
290
292
  export const BorderBadgeBorder: string;
291
293
  export const BorderToggleBorder: string;
@@ -293,6 +295,8 @@ export const BorderCardBorderAi: string;
293
295
  export const BorderCtaBorderAi: string;
294
296
  export const BorderContentbuttonBorderSelected: string;
295
297
  export const BorderToggleBorderOn: string;
298
+ export const BorderCtaBorderSecondaryDisabled: string;
299
+ export const BorderCtaBorderOutlineDisabled: string;
296
300
  export const IconIconOnLight: string;
297
301
  export const IconIconOnLightSecondary: string;
298
302
  export const IconIconOnLightTertiary: string;
@@ -341,6 +345,8 @@ export const TextCtaLinkSecondary: string;
341
345
  export const TextCtaLinkSecondaryPressed: string;
342
346
  export const TextCtaLinkSecondaryHover: string;
343
347
  export const TextCtaPromo: string;
348
+ export const TextCtaLinkDisabled: string;
349
+ export const TextTextOnLightDisabled: string;
344
350
  export const OverlaySidepanelOverlay: string;
345
351
  export const OverlayModalOverlay: string;
346
352
  export const Gray10: string;
package/tokens/px-tokens.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 30 Aug 2024 09:56:24 GMT
3
+ * Generated on Mon, 16 Sep 2024 11:26:56 GMT
4
4
  */
5
5
 
6
6
  export const BackgroundBackground = '#ffffff';
@@ -132,12 +132,12 @@ export const SurfaceSwitchSurfaceOn = '#0061d5';
132
132
  export const SurfaceSwitchSurfaceOnHover = '#0061d5';
133
133
  export const SurfaceRadioSurface = '#ffffff';
134
134
  export const SurfaceRadioSurfaceHover = '#ffffff';
135
- export const SurfaceRadioSurfaceSelected = '#ffffff';
136
- export const SurfaceRadioSurfaceSelectedHover = '#ffffff';
135
+ export const SurfaceRadioSurfaceSelected = '#0061d5';
136
+ export const SurfaceRadioSurfaceSelectedHover = '#2079E3';
137
137
  export const SurfaceCheckboxSurface = '#ffffff';
138
138
  export const SurfaceCheckboxSurfaceHover = '#ffffff';
139
139
  export const SurfaceCheckboxSurfaceSelected = '#0061d5';
140
- export const SurfaceCheckboxSurfaceSelectedHover = '#0061d5';
140
+ export const SurfaceCheckboxSurfaceSelectedHover = '#2079E3';
141
141
  export const SurfaceGhostSurface = '#fbfbfb';
142
142
  export const SurfaceGhostSurfaceSecondary = '#f4f4f4';
143
143
  export const SurfaceInputchipSurface = '#e8e8e8';
@@ -146,7 +146,7 @@ export const SurfaceInputchipSurfaceError = '#fdebee';
146
146
  export const SurfaceFilterchipSurfaceMulti = 'rgba(0,0,0,0.04)';
147
147
  export const SurfaceFilterchipSurfaceMultiHover = 'rgba(0,0,0,0.08)';
148
148
  export const SurfaceFilterchipSurfaceMultiOn = '#e5effa';
149
- export const SurfaceFilterchipSurfaceMultiOnHover = '#e5effa';
149
+ export const SurfaceFilterchipSurfaceMultiOnHover = '#ccdff7';
150
150
  export const SurfaceFilterchipSurfaceSingle = 'rgba(0,0,0,0.04)';
151
151
  export const SurfaceFilterchipSurfaceSingleHover = 'rgba(0,0,0,0.08)';
152
152
  export const SurfaceFilterchipSurfaceSingleOn = '#0061d5';
@@ -225,6 +225,7 @@ export const SurfaceContentswitcherSurface = '#e8e8e8';
225
225
  export const SurfaceToolbarSurface = '#222222';
226
226
  export const SurfaceToggleSurfaceOffPressed = '#e8e8e8';
227
227
  export const SurfaceToggleSurfaceOnPressed = '#b2cff2';
228
+ export const SurfaceCtaSurfaceDisabled = '#b2cff2';
228
229
  export const BorderCtaBorderSecondary = '#bcbcbc';
229
230
  export const BorderCtaBorderSecondaryPressed = '#bcbcbc';
230
231
  export const BorderCtaBorderSecondaryHover = '#bcbcbc';
@@ -269,12 +270,12 @@ export const BorderSwitchBorder = '#bcbcbc';
269
270
  export const BorderSwitchBorderHover = '#bcbcbc';
270
271
  export const BorderRadioBorder = '#6F6F6F';
271
272
  export const BorderRadioBorderSelected = '#0061d5';
272
- export const BorderRadioBorderSelectedHover = '#0061d5';
273
- export const BorderRadioBorderHover = '#6F6F6F';
273
+ export const BorderRadioBorderSelectedHover = '#2079E3';
274
+ export const BorderRadioBorderHover = '#4e4e4e';
274
275
  export const BorderCheckboxBorder = '#6F6F6F';
275
- export const BorderCheckboxBorderHover = '#6F6F6F';
276
+ export const BorderCheckboxBorderHover = '#4e4e4e';
276
277
  export const BorderCheckboxBorderSelected = '#0061d5';
277
- export const BorderCheckboxBorderSelectedHover = '#0061d5';
278
+ export const BorderCheckboxBorderSelectedHover = '#2079E3';
278
279
  export const BorderDividerBorder = '#e8e8e8';
279
280
  export const BorderCardBorderPressed = '#e8e8e8';
280
281
  export const BorderInputchipBorderError = '#ed3757';
@@ -285,7 +286,8 @@ export const BorderSearchBorder = '#f4f4f4';
285
286
  export const BorderSearchBorderHover = '#6F6F6F';
286
287
  export const BorderSearchGlobalBorderHover = '#e8e8e8';
287
288
  export const BorderGridthumbnailBorder = '#e8e8e8';
288
- export const BorderFilterchipBorderMultiOn = '#91c2fd';
289
+ export const BorderFilterchipBorderMultiOn = '#99c0ee';
290
+ export const BorderFilterchipBorderMultiOnHover = '#99c0ee';
289
291
  export const BorderCollapsibleBorder = '#d3d3d3';
290
292
  export const BorderBadgeBorder = '#ffffff';
291
293
  export const BorderToggleBorder = '#bcbcbc';
@@ -293,6 +295,8 @@ export const BorderCardBorderAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 1
293
295
  export const BorderCtaBorderAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
294
296
  export const BorderContentbuttonBorderSelected = '#909090';
295
297
  export const BorderToggleBorderOn = '#99c0ee';
298
+ export const BorderCtaBorderSecondaryDisabled = '#e8e8e8';
299
+ export const BorderCtaBorderOutlineDisabled = '#646464';
296
300
  export const IconIconOnLight = '#222222';
297
301
  export const IconIconOnLightSecondary = '#6F6F6F';
298
302
  export const IconIconOnLightTertiary = '#909090';
@@ -341,6 +345,8 @@ export const TextCtaLinkSecondary = '#6F6F6F';
341
345
  export const TextCtaLinkSecondaryPressed = '#6F6F6F';
342
346
  export const TextCtaLinkSecondaryHover = '#6F6F6F';
343
347
  export const TextCtaPromo = '#4826c2';
348
+ export const TextCtaLinkDisabled = '#b2cff2';
349
+ export const TextTextOnLightDisabled = '#bcbcbc';
344
350
  export const OverlaySidepanelOverlay = 'rgba(0,0,0,0.5)';
345
351
  export const OverlayModalOverlay = 'rgba(0,0,0,0.8)';
346
352
  export const Gray10 = '#e8e8e8';
package/tokens/tokens-css-vars.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Fri, 30 Aug 2024 09:56:24 GMT
3
+ * Generated on Mon, 16 Sep 2024 11:26:56 GMT
4
4
  */
5
5
 
6
6
  :root {
@@ -323,6 +323,7 @@
323
323
  --gray-30: #bcbcbc;
324
324
  --gray-20: #d3d3d3;
325
325
  --gray-10: #e8e8e8;
326
+ --border-cta-border-outline-disabled: #646464;
326
327
  --border-cta-border-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%);
327
328
  --border-card-border-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%);
328
329
  --surface-badge-video-surface: #009aed;
@@ -374,6 +375,8 @@
374
375
  --title-subtitle-font-family: var(--font-families-sans);
375
376
  --overlay-modal-overlay: var(--black-opacity-80);
376
377
  --overlay-sidepanel-overlay: var(--black-opacity-50);
378
+ --text-text-on-light-disabled: var(--gray-30);
379
+ --text-cta-link-disabled: var(--box-blue-30);
377
380
  --text-cta-promo: var(--grimace-100);
378
381
  --text-cta-link-secondary-hover: var(--gray-65);
379
382
  --text-cta-link-secondary-pressed: var(--gray-65);
@@ -422,12 +425,14 @@
422
425
  --icon-icon-on-light-tertiary: var(--gray-50);
423
426
  --icon-icon-on-light-secondary: var(--gray-65);
424
427
  --icon-icon-on-light: var(--gray-100);
428
+ --border-cta-border-secondary-disabled: var(--gray-10);
425
429
  --border-toggle-border-on: var(--box-blue-40);
426
430
  --border-contentbutton-border-selected: var(--gray-50);
427
431
  --border-toggle-border: var(--gray-30);
428
432
  --border-badge-border: var(--gray-white);
429
433
  --border-collapsible-border: var(--gray-20);
430
- --border-filterchip-border-multi-on: var(--light-blue-50);
434
+ --border-filterchip-border-multi-on-hover: var(--box-blue-40);
435
+ --border-filterchip-border-multi-on: var(--box-blue-40);
431
436
  --border-gridthumbnail-border: var(--gray-10);
432
437
  --border-search-global-border-hover: var(--gray-10);
433
438
  --border-search-border-hover: var(--gray-65);
@@ -438,12 +443,12 @@
438
443
  --border-inputchip-border-error: var(--watermelon-red-100);
439
444
  --border-card-border-pressed: var(--gray-10);
440
445
  --border-divider-border: var(--gray-10);
441
- --border-checkbox-border-selected-hover: var(--box-blue-100);
446
+ --border-checkbox-border-selected-hover: var(--light-blue-110);
442
447
  --border-checkbox-border-selected: var(--box-blue-100);
443
- --border-checkbox-border-hover: var(--gray-65);
448
+ --border-checkbox-border-hover: var(--gray-80);
444
449
  --border-checkbox-border: var(--gray-65);
445
- --border-radio-border-hover: var(--gray-65);
446
- --border-radio-border-selected-hover: var(--box-blue-100);
450
+ --border-radio-border-hover: var(--gray-80);
451
+ --border-radio-border-selected-hover: var(--light-blue-110);
447
452
  --border-radio-border-selected: var(--box-blue-100);
448
453
  --border-radio-border: var(--gray-65);
449
454
  --border-switch-border-hover: var(--gray-30);
@@ -488,6 +493,7 @@
488
493
  --border-cta-border-secondary-hover: var(--gray-30);
489
494
  --border-cta-border-secondary-pressed: var(--gray-30);
490
495
  --border-cta-border-secondary: var(--gray-30);
496
+ --surface-cta-surface-disabled: var(--box-blue-30);
491
497
  --surface-toggle-surface-on-pressed: var(--box-blue-30);
492
498
  --surface-toggle-surface-off-pressed: var(--gray-10);
493
499
  --surface-toolbar-surface: var(--gray-100);
@@ -560,7 +566,7 @@
560
566
  --surface-filterchip-surface-single-on: var(--box-blue-100);
561
567
  --surface-filterchip-surface-single-hover: var(--black-opacity-08);
562
568
  --surface-filterchip-surface-single: var(--black-opacity-04);
563
- --surface-filterchip-surface-multi-on-hover: var(--box-blue-10);
569
+ --surface-filterchip-surface-multi-on-hover: var(--box-blue-20);
564
570
  --surface-filterchip-surface-multi-on: var(--box-blue-10);
565
571
  --surface-filterchip-surface-multi-hover: var(--black-opacity-08);
566
572
  --surface-filterchip-surface-multi: var(--black-opacity-04);
@@ -569,12 +575,12 @@
569
575
  --surface-inputchip-surface: var(--gray-10);
570
576
  --surface-ghost-surface-secondary: var(--gray-05);
571
577
  --surface-ghost-surface: var(--gray-02);
572
- --surface-checkbox-surface-selected-hover: var(--box-blue-100);
578
+ --surface-checkbox-surface-selected-hover: var(--light-blue-110);
573
579
  --surface-checkbox-surface-selected: var(--box-blue-100);
574
580
  --surface-checkbox-surface-hover: var(--gray-white);
575
581
  --surface-checkbox-surface: var(--gray-white);
576
- --surface-radio-surface-selected-hover: var(--gray-white);
577
- --surface-radio-surface-selected: var(--gray-white);
582
+ --surface-radio-surface-selected-hover: var(--light-blue-110);
583
+ --surface-radio-surface-selected: var(--box-blue-100);
578
584
  --surface-radio-surface-hover: var(--gray-white);
579
585
  --surface-radio-surface: var(--gray-white);
580
586
  --surface-switch-surface-on-hover: var(--box-blue-100);
package/tokens/tokens.d.ts CHANGED
@@ -220,6 +220,7 @@ export const SurfaceContentswitcherSurface: string;
220
220
  export const SurfaceToolbarSurface: string;
221
221
  export const SurfaceToggleSurfaceOffPressed: string;
222
222
  export const SurfaceToggleSurfaceOnPressed: string;
223
+ export const SurfaceCtaSurfaceDisabled: string;
223
224
  export const BorderCtaBorderSecondary: string;
224
225
  export const BorderCtaBorderSecondaryPressed: string;
225
226
  export const BorderCtaBorderSecondaryHover: string;
@@ -281,6 +282,7 @@ export const BorderSearchBorderHover: string;
281
282
  export const BorderSearchGlobalBorderHover: string;
282
283
  export const BorderGridthumbnailBorder: string;
283
284
  export const BorderFilterchipBorderMultiOn: string;
285
+ export const BorderFilterchipBorderMultiOnHover: string;
284
286
  export const BorderCollapsibleBorder: string;
285
287
  export const BorderBadgeBorder: string;
286
288
  export const BorderToggleBorder: string;
@@ -288,6 +290,8 @@ export const BorderCardBorderAi: string;
288
290
  export const BorderCtaBorderAi: string;
289
291
  export const BorderContentbuttonBorderSelected: string;
290
292
  export const BorderToggleBorderOn: string;
293
+ export const BorderCtaBorderSecondaryDisabled: string;
294
+ export const BorderCtaBorderOutlineDisabled: string;
291
295
  export const IconIconOnLight: string;
292
296
  export const IconIconOnLightSecondary: string;
293
297
  export const IconIconOnLightTertiary: string;
@@ -336,6 +340,8 @@ export const TextCtaLinkSecondary: string;
336
340
  export const TextCtaLinkSecondaryPressed: string;
337
341
  export const TextCtaLinkSecondaryHover: string;
338
342
  export const TextCtaPromo: string;
343
+ export const TextCtaLinkDisabled: string;
344
+ export const TextTextOnLightDisabled: string;
339
345
  export const OverlaySidepanelOverlay: string;
340
346
  export const OverlayModalOverlay: string;
341
347
  export const Gray10: string;
package/tokens/tokens.js CHANGED
@@ -127,12 +127,12 @@ export const SurfaceSwitchSurfaceOn = '#0061d5';
127
127
  export const SurfaceSwitchSurfaceOnHover = '#0061d5';
128
128
  export const SurfaceRadioSurface = '#ffffff';
129
129
  export const SurfaceRadioSurfaceHover = '#ffffff';
130
- export const SurfaceRadioSurfaceSelected = '#ffffff';
131
- export const SurfaceRadioSurfaceSelectedHover = '#ffffff';
130
+ export const SurfaceRadioSurfaceSelected = '#0061d5';
131
+ export const SurfaceRadioSurfaceSelectedHover = '#2079E3';
132
132
  export const SurfaceCheckboxSurface = '#ffffff';
133
133
  export const SurfaceCheckboxSurfaceHover = '#ffffff';
134
134
  export const SurfaceCheckboxSurfaceSelected = '#0061d5';
135
- export const SurfaceCheckboxSurfaceSelectedHover = '#0061d5';
135
+ export const SurfaceCheckboxSurfaceSelectedHover = '#2079E3';
136
136
  export const SurfaceGhostSurface = '#fbfbfb';
137
137
  export const SurfaceGhostSurfaceSecondary = '#f4f4f4';
138
138
  export const SurfaceInputchipSurface = '#e8e8e8';
@@ -141,7 +141,7 @@ export const SurfaceInputchipSurfaceError = '#fdebee';
141
141
  export const SurfaceFilterchipSurfaceMulti = 'rgba(0,0,0,0.04)';
142
142
  export const SurfaceFilterchipSurfaceMultiHover = 'rgba(0,0,0,0.08)';
143
143
  export const SurfaceFilterchipSurfaceMultiOn = '#e5effa';
144
- export const SurfaceFilterchipSurfaceMultiOnHover = '#e5effa';
144
+ export const SurfaceFilterchipSurfaceMultiOnHover = '#ccdff7';
145
145
  export const SurfaceFilterchipSurfaceSingle = 'rgba(0,0,0,0.04)';
146
146
  export const SurfaceFilterchipSurfaceSingleHover = 'rgba(0,0,0,0.08)';
147
147
  export const SurfaceFilterchipSurfaceSingleOn = '#0061d5';
@@ -220,6 +220,7 @@ export const SurfaceContentswitcherSurface = '#e8e8e8';
220
220
  export const SurfaceToolbarSurface = '#222222';
221
221
  export const SurfaceToggleSurfaceOffPressed = '#e8e8e8';
222
222
  export const SurfaceToggleSurfaceOnPressed = '#b2cff2';
223
+ export const SurfaceCtaSurfaceDisabled = '#b2cff2';
223
224
  export const BorderCtaBorderSecondary = '#bcbcbc';
224
225
  export const BorderCtaBorderSecondaryPressed = '#bcbcbc';
225
226
  export const BorderCtaBorderSecondaryHover = '#bcbcbc';
@@ -264,12 +265,12 @@ export const BorderSwitchBorder = '#bcbcbc';
264
265
  export const BorderSwitchBorderHover = '#bcbcbc';
265
266
  export const BorderRadioBorder = '#6F6F6F';
266
267
  export const BorderRadioBorderSelected = '#0061d5';
267
- export const BorderRadioBorderSelectedHover = '#0061d5';
268
- export const BorderRadioBorderHover = '#6F6F6F';
268
+ export const BorderRadioBorderSelectedHover = '#2079E3';
269
+ export const BorderRadioBorderHover = '#4e4e4e';
269
270
  export const BorderCheckboxBorder = '#6F6F6F';
270
- export const BorderCheckboxBorderHover = '#6F6F6F';
271
+ export const BorderCheckboxBorderHover = '#4e4e4e';
271
272
  export const BorderCheckboxBorderSelected = '#0061d5';
272
- export const BorderCheckboxBorderSelectedHover = '#0061d5';
273
+ export const BorderCheckboxBorderSelectedHover = '#2079E3';
273
274
  export const BorderDividerBorder = '#e8e8e8';
274
275
  export const BorderCardBorderPressed = '#e8e8e8';
275
276
  export const BorderInputchipBorderError = '#ed3757';
@@ -280,7 +281,8 @@ export const BorderSearchBorder = '#f4f4f4';
280
281
  export const BorderSearchBorderHover = '#6F6F6F';
281
282
  export const BorderSearchGlobalBorderHover = '#e8e8e8';
282
283
  export const BorderGridthumbnailBorder = '#e8e8e8';
283
- export const BorderFilterchipBorderMultiOn = '#91c2fd';
284
+ export const BorderFilterchipBorderMultiOn = '#99c0ee';
285
+ export const BorderFilterchipBorderMultiOnHover = '#99c0ee';
284
286
  export const BorderCollapsibleBorder = '#d3d3d3';
285
287
  export const BorderBadgeBorder = '#ffffff';
286
288
  export const BorderToggleBorder = '#bcbcbc';
@@ -288,6 +290,8 @@ export const BorderCardBorderAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 1
288
290
  export const BorderCtaBorderAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
289
291
  export const BorderContentbuttonBorderSelected = '#909090';
290
292
  export const BorderToggleBorderOn = '#99c0ee';
293
+ export const BorderCtaBorderSecondaryDisabled = '#e8e8e8';
294
+ export const BorderCtaBorderOutlineDisabled = '#646464';
291
295
  export const IconIconOnLight = '#222222';
292
296
  export const IconIconOnLightSecondary = '#6F6F6F';
293
297
  export const IconIconOnLightTertiary = '#909090';
@@ -336,6 +340,8 @@ export const TextCtaLinkSecondary = '#6F6F6F';
336
340
  export const TextCtaLinkSecondaryPressed = '#6F6F6F';
337
341
  export const TextCtaLinkSecondaryHover = '#6F6F6F';
338
342
  export const TextCtaPromo = '#4826c2';
343
+ export const TextCtaLinkDisabled = '#b2cff2';
344
+ export const TextTextOnLightDisabled = '#bcbcbc';
339
345
  export const OverlaySidepanelOverlay = 'rgba(0,0,0,0.5)';
340
346
  export const OverlayModalOverlay = 'rgba(0,0,0,0.8)';
341
347
  export const Gray10 = '#e8e8e8';
package/tokens/tokens.json CHANGED
@@ -128,12 +128,12 @@
128
128
  "SurfaceSwitchSurfaceOnHover": "#0061d5",
129
129
  "SurfaceRadioSurface": "#ffffff",
130
130
  "SurfaceRadioSurfaceHover": "#ffffff",
131
- "SurfaceRadioSurfaceSelected": "#ffffff",
132
- "SurfaceRadioSurfaceSelectedHover": "#ffffff",
131
+ "SurfaceRadioSurfaceSelected": "#0061d5",
132
+ "SurfaceRadioSurfaceSelectedHover": "#2079E3",
133
133
  "SurfaceCheckboxSurface": "#ffffff",
134
134
  "SurfaceCheckboxSurfaceHover": "#ffffff",
135
135
  "SurfaceCheckboxSurfaceSelected": "#0061d5",
136
- "SurfaceCheckboxSurfaceSelectedHover": "#0061d5",
136
+ "SurfaceCheckboxSurfaceSelectedHover": "#2079E3",
137
137
  "SurfaceGhostSurface": "#fbfbfb",
138
138
  "SurfaceGhostSurfaceSecondary": "#f4f4f4",
139
139
  "SurfaceInputchipSurface": "#e8e8e8",
@@ -142,7 +142,7 @@
142
142
  "SurfaceFilterchipSurfaceMulti": "rgba(0,0,0,0.04)",
143
143
  "SurfaceFilterchipSurfaceMultiHover": "rgba(0,0,0,0.08)",
144
144
  "SurfaceFilterchipSurfaceMultiOn": "#e5effa",
145
- "SurfaceFilterchipSurfaceMultiOnHover": "#e5effa",
145
+ "SurfaceFilterchipSurfaceMultiOnHover": "#ccdff7",
146
146
  "SurfaceFilterchipSurfaceSingle": "rgba(0,0,0,0.04)",
147
147
  "SurfaceFilterchipSurfaceSingleHover": "rgba(0,0,0,0.08)",
148
148
  "SurfaceFilterchipSurfaceSingleOn": "#0061d5",
@@ -221,6 +221,7 @@
221
221
  "SurfaceToolbarSurface": "#222222",
222
222
  "SurfaceToggleSurfaceOffPressed": "#e8e8e8",
223
223
  "SurfaceToggleSurfaceOnPressed": "#b2cff2",
224
+ "SurfaceCtaSurfaceDisabled": "#b2cff2",
224
225
  "BorderCtaBorderSecondary": "#bcbcbc",
225
226
  "BorderCtaBorderSecondaryPressed": "#bcbcbc",
226
227
  "BorderCtaBorderSecondaryHover": "#bcbcbc",
@@ -265,12 +266,12 @@
265
266
  "BorderSwitchBorderHover": "#bcbcbc",
266
267
  "BorderRadioBorder": "#6F6F6F",
267
268
  "BorderRadioBorderSelected": "#0061d5",
268
- "BorderRadioBorderSelectedHover": "#0061d5",
269
- "BorderRadioBorderHover": "#6F6F6F",
269
+ "BorderRadioBorderSelectedHover": "#2079E3",
270
+ "BorderRadioBorderHover": "#4e4e4e",
270
271
  "BorderCheckboxBorder": "#6F6F6F",
271
- "BorderCheckboxBorderHover": "#6F6F6F",
272
+ "BorderCheckboxBorderHover": "#4e4e4e",
272
273
  "BorderCheckboxBorderSelected": "#0061d5",
273
- "BorderCheckboxBorderSelectedHover": "#0061d5",
274
+ "BorderCheckboxBorderSelectedHover": "#2079E3",
274
275
  "BorderDividerBorder": "#e8e8e8",
275
276
  "BorderCardBorderPressed": "#e8e8e8",
276
277
  "BorderInputchipBorderError": "#ed3757",
@@ -281,7 +282,8 @@
281
282
  "BorderSearchBorderHover": "#6F6F6F",
282
283
  "BorderSearchGlobalBorderHover": "#e8e8e8",
283
284
  "BorderGridthumbnailBorder": "#e8e8e8",
284
- "BorderFilterchipBorderMultiOn": "#91c2fd",
285
+ "BorderFilterchipBorderMultiOn": "#99c0ee",
286
+ "BorderFilterchipBorderMultiOnHover": "#99c0ee",
285
287
  "BorderCollapsibleBorder": "#d3d3d3",
286
288
  "BorderBadgeBorder": "#ffffff",
287
289
  "BorderToggleBorder": "#bcbcbc",
@@ -289,6 +291,8 @@
289
291
  "BorderCtaBorderAi": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
290
292
  "BorderContentbuttonBorderSelected": "#909090",
291
293
  "BorderToggleBorderOn": "#99c0ee",
294
+ "BorderCtaBorderSecondaryDisabled": "#e8e8e8",
295
+ "BorderCtaBorderOutlineDisabled": "#646464",
292
296
  "IconIconOnLight": "#222222",
293
297
  "IconIconOnLightSecondary": "#6F6F6F",
294
298
  "IconIconOnLightTertiary": "#909090",
@@ -337,6 +341,8 @@
337
341
  "TextCtaLinkSecondaryPressed": "#6F6F6F",
338
342
  "TextCtaLinkSecondaryHover": "#6F6F6F",
339
343
  "TextCtaPromo": "#4826c2",
344
+ "TextCtaLinkDisabled": "#b2cff2",
345
+ "TextTextOnLightDisabled": "#bcbcbc",
340
346
  "OverlaySidepanelOverlay": "rgba(0,0,0,0.5)",
341
347
  "OverlayModalOverlay": "rgba(0,0,0,0.8)",
342
348
  "Gray10": "#e8e8e8",
package/tokens/tokens.scss CHANGED
@@ -127,12 +127,12 @@ $surface-switch-surface-on: #0061d5 !default;
127
127
  $surface-switch-surface-on-hover: #0061d5 !default;
128
128
  $surface-radio-surface: #ffffff !default;
129
129
  $surface-radio-surface-hover: #ffffff !default;
130
- $surface-radio-surface-selected: #ffffff !default;
131
- $surface-radio-surface-selected-hover: #ffffff !default;
130
+ $surface-radio-surface-selected: #0061d5 !default;
131
+ $surface-radio-surface-selected-hover: #2079e3 !default;
132
132
  $surface-checkbox-surface: #ffffff !default;
133
133
  $surface-checkbox-surface-hover: #ffffff !default;
134
134
  $surface-checkbox-surface-selected: #0061d5 !default;
135
- $surface-checkbox-surface-selected-hover: #0061d5 !default;
135
+ $surface-checkbox-surface-selected-hover: #2079e3 !default;
136
136
  $surface-ghost-surface: #fbfbfb !default;
137
137
  $surface-ghost-surface-secondary: #f4f4f4 !default;
138
138
  $surface-inputchip-surface: #e8e8e8 !default;
@@ -141,7 +141,7 @@ $surface-inputchip-surface-error: #fdebee !default;
141
141
  $surface-filterchip-surface-multi: rgba(0, 0, 0, 0.04) !default;
142
142
  $surface-filterchip-surface-multi-hover: rgba(0, 0, 0, 0.08) !default;
143
143
  $surface-filterchip-surface-multi-on: #e5effa !default;
144
- $surface-filterchip-surface-multi-on-hover: #e5effa !default;
144
+ $surface-filterchip-surface-multi-on-hover: #ccdff7 !default;
145
145
  $surface-filterchip-surface-single: rgba(0, 0, 0, 0.04) !default;
146
146
  $surface-filterchip-surface-single-hover: rgba(0, 0, 0, 0.08) !default;
147
147
  $surface-filterchip-surface-single-on: #0061d5 !default;
@@ -220,6 +220,7 @@ $surface-contentswitcher-surface: #e8e8e8 !default;
220
220
  $surface-toolbar-surface: #222222 !default;
221
221
  $surface-toggle-surface-off-pressed: #e8e8e8 !default;
222
222
  $surface-toggle-surface-on-pressed: #b2cff2 !default;
223
+ $surface-cta-surface-disabled: #b2cff2 !default;
223
224
  $border-cta-border-secondary: #bcbcbc !default;
224
225
  $border-cta-border-secondary-pressed: #bcbcbc !default;
225
226
  $border-cta-border-secondary-hover: #bcbcbc !default;
@@ -264,12 +265,12 @@ $border-switch-border: #bcbcbc !default;
264
265
  $border-switch-border-hover: #bcbcbc !default;
265
266
  $border-radio-border: #6f6f6f !default;
266
267
  $border-radio-border-selected: #0061d5 !default;
267
- $border-radio-border-selected-hover: #0061d5 !default;
268
- $border-radio-border-hover: #6f6f6f !default;
268
+ $border-radio-border-selected-hover: #2079e3 !default;
269
+ $border-radio-border-hover: #4e4e4e !default;
269
270
  $border-checkbox-border: #6f6f6f !default;
270
- $border-checkbox-border-hover: #6f6f6f !default;
271
+ $border-checkbox-border-hover: #4e4e4e !default;
271
272
  $border-checkbox-border-selected: #0061d5 !default;
272
- $border-checkbox-border-selected-hover: #0061d5 !default;
273
+ $border-checkbox-border-selected-hover: #2079e3 !default;
273
274
  $border-divider-border: #e8e8e8 !default;
274
275
  $border-card-border-pressed: #e8e8e8 !default;
275
276
  $border-inputchip-border-error: #ed3757 !default;
@@ -280,7 +281,8 @@ $border-search-border: #f4f4f4 !default;
280
281
  $border-search-border-hover: #6f6f6f !default;
281
282
  $border-search-global-border-hover: #e8e8e8 !default;
282
283
  $border-gridthumbnail-border: #e8e8e8 !default;
283
- $border-filterchip-border-multi-on: #91c2fd !default;
284
+ $border-filterchip-border-multi-on: #99c0ee !default;
285
+ $border-filterchip-border-multi-on-hover: #99c0ee !default;
284
286
  $border-collapsible-border: #d3d3d3 !default;
285
287
  $border-badge-border: #ffffff !default;
286
288
  $border-toggle-border: #bcbcbc !default;
@@ -288,6 +290,8 @@ $border-card-border-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !defau
288
290
  $border-cta-border-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
289
291
  $border-contentbutton-border-selected: #909090 !default;
290
292
  $border-toggle-border-on: #99c0ee !default;
293
+ $border-cta-border-secondary-disabled: #e8e8e8 !default;
294
+ $border-cta-border-outline-disabled: #646464 !default;
291
295
  $icon-icon-on-light: #222222 !default;
292
296
  $icon-icon-on-light-secondary: #6f6f6f !default;
293
297
  $icon-icon-on-light-tertiary: #909090 !default;
@@ -336,6 +340,8 @@ $text-cta-link-secondary: #6f6f6f !default;
336
340
  $text-cta-link-secondary-pressed: #6f6f6f !default;
337
341
  $text-cta-link-secondary-hover: #6f6f6f !default;
338
342
  $text-cta-promo: #4826c2 !default;
343
+ $text-cta-link-disabled: #b2cff2 !default;
344
+ $text-text-on-light-disabled: #bcbcbc !default;
339
345
  $overlay-sidepanel-overlay: rgba(0, 0, 0, 0.5) !default;
340
346
  $overlay-modal-overlay: rgba(0, 0, 0, 0.8) !default;
341
347
  $gray-10: #e8e8e8 !default;
@@ -937,6 +943,7 @@ $tokens: (
937
943
  'toolbar-surface': $surface-toolbar-surface,
938
944
  'toggle-surface-off-pressed': $surface-toggle-surface-off-pressed,
939
945
  'toggle-surface-on-pressed': $surface-toggle-surface-on-pressed,
946
+ 'cta-surface-disabled': $surface-cta-surface-disabled,
940
947
  ),
941
948
  'Border': (
942
949
  'cta-border-secondary': $border-cta-border-secondary,
@@ -1000,6 +1007,7 @@ $tokens: (
1000
1007
  'search-global-border-hover': $border-search-global-border-hover,
1001
1008
  'gridthumbnail-border': $border-gridthumbnail-border,
1002
1009
  'filterchip-border-multi-on': $border-filterchip-border-multi-on,
1010
+ 'filterchip-border-multi-on-hover': $border-filterchip-border-multi-on-hover,
1003
1011
  'collapsible-border': $border-collapsible-border,
1004
1012
  'badge-border': $border-badge-border,
1005
1013
  'toggle-border': $border-toggle-border,
@@ -1007,6 +1015,8 @@ $tokens: (
1007
1015
  'cta-border-ai': $border-cta-border-ai,
1008
1016
  'contentbutton-border-selected': $border-contentbutton-border-selected,
1009
1017
  'toggle-border-on': $border-toggle-border-on,
1018
+ 'cta-border-secondary-disabled': $border-cta-border-secondary-disabled,
1019
+ 'cta-border-outline-disabled:': $border-cta-border-outline-disabled,
1010
1020
  ),
1011
1021
  'Icon': (
1012
1022
  'icon-on-light': $icon-icon-on-light,
@@ -1061,6 +1071,8 @@ $tokens: (
1061
1071
  'cta-link-secondary-pressed': $text-cta-link-secondary-pressed,
1062
1072
  'cta-link-secondary-hover': $text-cta-link-secondary-hover,
1063
1073
  'cta-promo': $text-cta-promo,
1074
+ 'cta-link-disabled': $text-cta-link-disabled,
1075
+ 'text-on-light-disabled': $text-text-on-light-disabled,
1064
1076
  ),
1065
1077
  'Overlay': (
1066
1078
  'sidepanel-overlay': $overlay-sidepanel-overlay,