@box/blueprint-web-assets 4.87.0 → 4.88.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 (19) hide show
  1. package/dist/tokens/BP2/dark_mode_value/px-tokens.d.ts +16 -0
  2. package/dist/tokens/BP2/dark_mode_value/px-tokens.js +19 -3
  3. package/dist/tokens/BP2/dark_mode_value/tokens.css +19 -3
  4. package/dist/tokens/BP2/dark_mode_value/tokens.d.ts +16 -0
  5. package/dist/tokens/BP2/dark_mode_value/tokens.js +19 -3
  6. package/dist/tokens/BP2/dark_mode_value/tokens.json +19 -3
  7. package/dist/tokens/BP2/light_mode_value/px-tokens.d.ts +16 -0
  8. package/dist/tokens/BP2/light_mode_value/px-tokens.js +23 -7
  9. package/dist/tokens/BP2/light_mode_value/tokens.css +23 -7
  10. package/dist/tokens/BP2/light_mode_value/tokens.d.ts +16 -0
  11. package/dist/tokens/BP2/light_mode_value/tokens.js +23 -7
  12. package/dist/tokens/BP2/light_mode_value/tokens.json +23 -7
  13. package/dist/tokens/px-tokens.d.ts +16 -0
  14. package/dist/tokens/px-tokens.js +23 -7
  15. package/dist/tokens/tokens-css-vars.scss +23 -7
  16. package/dist/tokens/tokens.d.ts +16 -0
  17. package/dist/tokens/tokens.js +23 -7
  18. package/dist/tokens/tokens.json +23 -7
  19. package/package.json +2 -2
package/dist/tokens/BP2/dark_mode_value/px-tokens.d.ts CHANGED
@@ -38,6 +38,7 @@ export const bpBorderFilterChipBorderMultiOn: string;
38
38
  export const bpBorderFilterChipBorderMultiOnHover: string;
39
39
  export const bpBorderGridThumbnailBorder: string;
40
40
  export const bpBorderHeaderBorder: string;
41
+ export const bpBorderInlineNoticeBorder: string;
41
42
  export const bpBorderInlineTableBorder: string;
42
43
  export const bpBorderInputBorder: string;
43
44
  export const bpBorderInputBorderError: string;
@@ -222,6 +223,9 @@ export const bpSurfaceComboboxSurface: string;
222
223
  export const bpSurfaceContentSwitcherSurface: string;
223
224
  export const bpSurfaceContentSwitcherSurfaceHover: string;
224
225
  export const bpSurfaceContentSwitcherSurfaceSelected: string;
226
+ export const bpSurfaceCtaDestructiveSurfacePrimary: string;
227
+ export const bpSurfaceCtaDestructiveSurfacePrimaryHover: string;
228
+ export const bpSurfaceCtaDestructiveSurfacePrimaryPressed: string;
225
229
  export const bpSurfaceCtaDestructiveSurfaceTertiary: string;
226
230
  export const bpSurfaceCtaDestructiveSurfaceTertiaryHover: string;
227
231
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed: string;
@@ -290,10 +294,22 @@ export const bpSurfaceGhostSurfaceSecondary: string;
290
294
  export const bpSurfaceIconButtonSurface: string;
291
295
  export const bpSurfaceIconButtonSurfaceHover: string;
292
296
  export const bpSurfaceIconButtonSurfacePressed: string;
297
+ export const bpSurfaceIconTileSurfaceBoxblue: string;
298
+ export const bpSurfaceIconTileSurfaceDarkblue: string;
299
+ export const bpSurfaceIconTileSurfaceGray: string;
300
+ export const bpSurfaceIconTileSurfaceGreenlight: string;
301
+ export const bpSurfaceIconTileSurfaceGrimace: string;
302
+ export const bpSurfaceIconTileSurfaceLightblue: string;
303
+ export const bpSurfaceIconTileSurfaceOrange: string;
304
+ export const bpSurfaceIconTileSurfacePurplerain: string;
305
+ export const bpSurfaceIconTileSurfaceWatermelonred: string;
306
+ export const bpSurfaceIconTileSurfaceWhite: string;
307
+ export const bpSurfaceIconTileSurfaceYellorange: string;
293
308
  export const bpSurfaceIllustrationSurfaceBox: string;
294
309
  export const bpSurfaceIllustrationSurfaceBoxNeutral: string;
295
310
  export const bpSurfaceInlineNoticeSurfaceError: string;
296
311
  export const bpSurfaceInlineNoticeSurfaceInfo: string;
312
+ export const bpSurfaceInlineNoticeSurfaceNote: string;
297
313
  export const bpSurfaceInlineNoticeSurfaceSuccess: string;
298
314
  export const bpSurfaceInlineNoticeSurfaceWarning: string;
299
315
  export const bpSurfaceInlineTableSurface: string;
package/dist/tokens/BP2/dark_mode_value/px-tokens.js CHANGED
@@ -38,6 +38,7 @@ export const bpBorderFilterChipBorderMultiOn = '#99c0ee';
38
38
  export const bpBorderFilterChipBorderMultiOnHover = '#99c0ee';
39
39
  export const bpBorderGridThumbnailBorder = '#e8e8e8';
40
40
  export const bpBorderHeaderBorder = '#e8e8e8';
41
+ export const bpBorderInlineNoticeBorder = 'rgba(0, 0, 0, 0.08)';
41
42
  export const bpBorderInlineTableBorder = '#e8e8e8';
42
43
  export const bpBorderInputBorder = '#909090';
43
44
  export const bpBorderInputBorderError = '#ed3757';
@@ -222,6 +223,9 @@ export const bpSurfaceComboboxSurface = '#ffffff';
222
223
  export const bpSurfaceContentSwitcherSurface = '#e8e8e8';
223
224
  export const bpSurfaceContentSwitcherSurfaceHover = '#f4f4f4';
224
225
  export const bpSurfaceContentSwitcherSurfaceSelected = '#ffffff';
226
+ export const bpSurfaceCtaDestructiveSurfacePrimary = '#d5324e';
227
+ export const bpSurfaceCtaDestructiveSurfacePrimaryHover = '#ed3757';
228
+ export const bpSurfaceCtaDestructiveSurfacePrimaryPressed = '#be2c46';
225
229
  export const bpSurfaceCtaDestructiveSurfaceTertiary = 'rgba(237, 55, 87, 0)';
226
230
  export const bpSurfaceCtaDestructiveSurfaceTertiaryHover = 'rgba(237, 55, 87, 0.04)';
227
231
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed = 'rgba(237, 55, 87, 0.12)';
@@ -239,9 +243,9 @@ export const bpSurfaceCtaSurfacePromoFocus = '#4826c2';
239
243
  export const bpSurfaceCtaSurfacePromoFocusPressed = '#3a1e9b';
240
244
  export const bpSurfaceCtaSurfacePromoHover = '#4826c2';
241
245
  export const bpSurfaceCtaSurfacePromoPressed = '#3a1e9b';
242
- export const bpSurfaceCtaSurfaceSecondary = 'rgba(255, 255, 255, 0.9)';
243
- export const bpSurfaceCtaSurfaceSecondaryHover = 'rgba(255, 255, 255, 0.6)';
244
- export const bpSurfaceCtaSurfaceSecondaryPressed = 'rgba(255, 255, 255, 0.3)';
246
+ export const bpSurfaceCtaSurfaceSecondary = '#ffffff';
247
+ export const bpSurfaceCtaSurfaceSecondaryHover = '#f4f4f4';
248
+ export const bpSurfaceCtaSurfaceSecondaryPressed = '#e8e8e8';
245
249
  export const bpSurfaceCtaSurfaceTertiary = 'rgba(0, 0, 0, 0)';
246
250
  export const bpSurfaceCtaSurfaceTertiaryHover = 'rgba(0, 0, 0, 0.04)';
247
251
  export const bpSurfaceCtaSurfaceTertiaryPressed = 'rgba(0, 0, 0, 0.08)';
@@ -290,10 +294,22 @@ export const bpSurfaceGhostSurfaceSecondary = 'rgba(0, 0, 0, 0.04)';
290
294
  export const bpSurfaceIconButtonSurface = 'rgba(0, 0, 0, 0)';
291
295
  export const bpSurfaceIconButtonSurfaceHover = 'rgba(0, 0, 0, 0.04)';
292
296
  export const bpSurfaceIconButtonSurfacePressed = 'rgba(0, 0, 0, 0.08)';
297
+ export const bpSurfaceIconTileSurfaceBoxblue = '#0061d5';
298
+ export const bpSurfaceIconTileSurfaceDarkblue = '#003c84';
299
+ export const bpSurfaceIconTileSurfaceGray = '#222222';
300
+ export const bpSurfaceIconTileSurfaceGreenlight = '#22af74';
301
+ export const bpSurfaceIconTileSurfaceGrimace = '#4826c2';
302
+ export const bpSurfaceIconTileSurfaceLightblue = '#2486fc';
303
+ export const bpSurfaceIconTileSurfaceOrange = '#d97417';
304
+ export const bpSurfaceIconTileSurfacePurplerain = '#8f39d5';
305
+ export const bpSurfaceIconTileSurfaceWatermelonred = '#d5324e';
306
+ export const bpSurfaceIconTileSurfaceWhite = '#ffffff';
307
+ export const bpSurfaceIconTileSurfaceYellorange = '#dca118';
293
308
  export const bpSurfaceIllustrationSurfaceBox = '#0061d5';
294
309
  export const bpSurfaceIllustrationSurfaceBoxNeutral = '#0061d5';
295
310
  export const bpSurfaceInlineNoticeSurfaceError = '#fdebee';
296
311
  export const bpSurfaceInlineNoticeSurfaceInfo = '#e9f2fe';
312
+ export const bpSurfaceInlineNoticeSurfaceNote = '#ffffff';
297
313
  export const bpSurfaceInlineNoticeSurfaceSuccess = '#e9f8f2';
298
314
  export const bpSurfaceInlineNoticeSurfaceWarning = '#fffbe5';
299
315
  export const bpSurfaceInlineTableSurface = '#ffffff';
package/dist/tokens/BP2/dark_mode_value/tokens.css CHANGED
@@ -610,6 +610,7 @@
610
610
  --bp-border-filter-chip-border-multi-on-hover: var(--bp-box-blue-40);
611
611
  --bp-border-grid-thumbnail-border: var(--bp-gray-10);
612
612
  --bp-border-header-border: var(--bp-gray-10);
613
+ --bp-border-inline-notice-border: var(--bp-black-opacity-08);
613
614
  --bp-border-inline-table-border: var(--bp-gray-10);
614
615
  --bp-border-input-border: var(--bp-gray-50);
615
616
  --bp-border-input-border-error: var(--bp-watermelon-red-100);
@@ -765,6 +766,9 @@
765
766
  --bp-surface-content-switcher-surface: var(--bp-gray-10);
766
767
  --bp-surface-content-switcher-surface-hover: var(--bp-gray-05);
767
768
  --bp-surface-content-switcher-surface-selected: var(--bp-gray-white);
769
+ --bp-surface-cta-destructive-surface-primary: var(--bp-watermelon-red-110);
770
+ --bp-surface-cta-destructive-surface-primary-hover: var(--bp-watermelon-red-100);
771
+ --bp-surface-cta-destructive-surface-primary-pressed: var(--bp-watermelon-red-120);
768
772
  --bp-surface-cta-destructive-surface-tertiary: var(--bp-watermelon-red-opacity-00);
769
773
  --bp-surface-cta-destructive-surface-tertiary-hover: var(--bp-watermelon-red-opacity-04);
770
774
  --bp-surface-cta-destructive-surface-tertiary-pressed: var(--bp-watermelon-red-opacity-12);
@@ -782,9 +786,9 @@
782
786
  --bp-surface-cta-surface-promo-focus-pressed: var(--bp-grimace-120);
783
787
  --bp-surface-cta-surface-promo-hover: var(--bp-grimace-100);
784
788
  --bp-surface-cta-surface-promo-pressed: var(--bp-grimace-120);
785
- --bp-surface-cta-surface-secondary: var(--bp-white-opacity-90);
786
- --bp-surface-cta-surface-secondary-hover: var(--bp-white-opacity-60);
787
- --bp-surface-cta-surface-secondary-pressed: var(--bp-white-opacity-30);
789
+ --bp-surface-cta-surface-secondary: var(--bp-gray-white);
790
+ --bp-surface-cta-surface-secondary-hover: var(--bp-gray-05);
791
+ --bp-surface-cta-surface-secondary-pressed: var(--bp-gray-10);
788
792
  --bp-surface-cta-surface-tertiary: var(--bp-black-opacity-00);
789
793
  --bp-surface-cta-surface-tertiary-hover: var(--bp-black-opacity-04);
790
794
  --bp-surface-cta-surface-tertiary-pressed: var(--bp-black-opacity-08);
@@ -832,10 +836,22 @@
832
836
  --bp-surface-icon-button-surface: var(--bp-black-opacity-00);
833
837
  --bp-surface-icon-button-surface-hover: var(--bp-black-opacity-04);
834
838
  --bp-surface-icon-button-surface-pressed: var(--bp-black-opacity-08);
839
+ --bp-surface-icon-tile-surface-boxblue: var(--bp-box-blue-100);
840
+ --bp-surface-icon-tile-surface-darkblue: var(--bp-dark-blue-100);
841
+ --bp-surface-icon-tile-surface-gray: var(--bp-gray-100);
842
+ --bp-surface-icon-tile-surface-greenlight: var(--bp-green-light-110);
843
+ --bp-surface-icon-tile-surface-grimace: var(--bp-grimace-100);
844
+ --bp-surface-icon-tile-surface-lightblue: var(--bp-light-blue-100);
845
+ --bp-surface-icon-tile-surface-orange: var(--bp-orange-110);
846
+ --bp-surface-icon-tile-surface-purplerain: var(--bp-purple-rain-110);
847
+ --bp-surface-icon-tile-surface-watermelonred: var(--bp-watermelon-red-110);
848
+ --bp-surface-icon-tile-surface-white: var(--bp-gray-white);
849
+ --bp-surface-icon-tile-surface-yellorange: var(--bp-yellorange-110);
835
850
  --bp-surface-illustration-surface-box: var(--bp-box-blue-100);
836
851
  --bp-surface-illustration-surface-box-neutral: var(--bp-box-blue-100);
837
852
  --bp-surface-inline-notice-surface-error: var(--bp-watermelon-red-10);
838
853
  --bp-surface-inline-notice-surface-info: var(--bp-light-blue-10);
854
+ --bp-surface-inline-notice-surface-note: var(--bp-gray-white);
839
855
  --bp-surface-inline-notice-surface-success: var(--bp-green-light-10);
840
856
  --bp-surface-inline-notice-surface-warning: var(--bp-yellow-10);
841
857
  --bp-surface-inline-table-surface: var(--bp-gray-white);
package/dist/tokens/BP2/dark_mode_value/tokens.d.ts CHANGED
@@ -34,6 +34,7 @@ export const bpBorderFilterChipBorderMultiOn: string;
34
34
  export const bpBorderFilterChipBorderMultiOnHover: string;
35
35
  export const bpBorderGridThumbnailBorder: string;
36
36
  export const bpBorderHeaderBorder: string;
37
+ export const bpBorderInlineNoticeBorder: string;
37
38
  export const bpBorderInlineTableBorder: string;
38
39
  export const bpBorderInputBorder: string;
39
40
  export const bpBorderInputBorderError: string;
@@ -218,6 +219,9 @@ export const bpSurfaceComboboxSurface: string;
218
219
  export const bpSurfaceContentSwitcherSurface: string;
219
220
  export const bpSurfaceContentSwitcherSurfaceHover: string;
220
221
  export const bpSurfaceContentSwitcherSurfaceSelected: string;
222
+ export const bpSurfaceCtaDestructiveSurfacePrimary: string;
223
+ export const bpSurfaceCtaDestructiveSurfacePrimaryHover: string;
224
+ export const bpSurfaceCtaDestructiveSurfacePrimaryPressed: string;
221
225
  export const bpSurfaceCtaDestructiveSurfaceTertiary: string;
222
226
  export const bpSurfaceCtaDestructiveSurfaceTertiaryHover: string;
223
227
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed: string;
@@ -286,10 +290,22 @@ export const bpSurfaceGhostSurfaceSecondary: string;
286
290
  export const bpSurfaceIconButtonSurface: string;
287
291
  export const bpSurfaceIconButtonSurfaceHover: string;
288
292
  export const bpSurfaceIconButtonSurfacePressed: string;
293
+ export const bpSurfaceIconTileSurfaceBoxblue: string;
294
+ export const bpSurfaceIconTileSurfaceDarkblue: string;
295
+ export const bpSurfaceIconTileSurfaceGray: string;
296
+ export const bpSurfaceIconTileSurfaceGreenlight: string;
297
+ export const bpSurfaceIconTileSurfaceGrimace: string;
298
+ export const bpSurfaceIconTileSurfaceLightblue: string;
299
+ export const bpSurfaceIconTileSurfaceOrange: string;
300
+ export const bpSurfaceIconTileSurfacePurplerain: string;
301
+ export const bpSurfaceIconTileSurfaceWatermelonred: string;
302
+ export const bpSurfaceIconTileSurfaceWhite: string;
303
+ export const bpSurfaceIconTileSurfaceYellorange: string;
289
304
  export const bpSurfaceIllustrationSurfaceBox: string;
290
305
  export const bpSurfaceIllustrationSurfaceBoxNeutral: string;
291
306
  export const bpSurfaceInlineNoticeSurfaceError: string;
292
307
  export const bpSurfaceInlineNoticeSurfaceInfo: string;
308
+ export const bpSurfaceInlineNoticeSurfaceNote: string;
293
309
  export const bpSurfaceInlineNoticeSurfaceSuccess: string;
294
310
  export const bpSurfaceInlineNoticeSurfaceWarning: string;
295
311
  export const bpSurfaceInlineTableSurface: string;
package/dist/tokens/BP2/dark_mode_value/tokens.js CHANGED
@@ -34,6 +34,7 @@ export const bpBorderFilterChipBorderMultiOn = '#99c0ee';
34
34
  export const bpBorderFilterChipBorderMultiOnHover = '#99c0ee';
35
35
  export const bpBorderGridThumbnailBorder = '#e8e8e8';
36
36
  export const bpBorderHeaderBorder = '#e8e8e8';
37
+ export const bpBorderInlineNoticeBorder = 'rgba(0, 0, 0, 0.08)';
37
38
  export const bpBorderInlineTableBorder = '#e8e8e8';
38
39
  export const bpBorderInputBorder = '#909090';
39
40
  export const bpBorderInputBorderError = '#ed3757';
@@ -218,6 +219,9 @@ export const bpSurfaceComboboxSurface = '#ffffff';
218
219
  export const bpSurfaceContentSwitcherSurface = '#e8e8e8';
219
220
  export const bpSurfaceContentSwitcherSurfaceHover = '#f4f4f4';
220
221
  export const bpSurfaceContentSwitcherSurfaceSelected = '#ffffff';
222
+ export const bpSurfaceCtaDestructiveSurfacePrimary = '#d5324e';
223
+ export const bpSurfaceCtaDestructiveSurfacePrimaryHover = '#ed3757';
224
+ export const bpSurfaceCtaDestructiveSurfacePrimaryPressed = '#be2c46';
221
225
  export const bpSurfaceCtaDestructiveSurfaceTertiary = 'rgba(237, 55, 87, 0)';
222
226
  export const bpSurfaceCtaDestructiveSurfaceTertiaryHover = 'rgba(237, 55, 87, 0.04)';
223
227
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed = 'rgba(237, 55, 87, 0.12)';
@@ -235,9 +239,9 @@ export const bpSurfaceCtaSurfacePromoFocus = '#4826c2';
235
239
  export const bpSurfaceCtaSurfacePromoFocusPressed = '#3a1e9b';
236
240
  export const bpSurfaceCtaSurfacePromoHover = '#4826c2';
237
241
  export const bpSurfaceCtaSurfacePromoPressed = '#3a1e9b';
238
- export const bpSurfaceCtaSurfaceSecondary = 'rgba(255, 255, 255, 0.9)';
239
- export const bpSurfaceCtaSurfaceSecondaryHover = 'rgba(255, 255, 255, 0.6)';
240
- export const bpSurfaceCtaSurfaceSecondaryPressed = 'rgba(255, 255, 255, 0.3)';
242
+ export const bpSurfaceCtaSurfaceSecondary = '#ffffff';
243
+ export const bpSurfaceCtaSurfaceSecondaryHover = '#f4f4f4';
244
+ export const bpSurfaceCtaSurfaceSecondaryPressed = '#e8e8e8';
241
245
  export const bpSurfaceCtaSurfaceTertiary = 'rgba(0, 0, 0, 0)';
242
246
  export const bpSurfaceCtaSurfaceTertiaryHover = 'rgba(0, 0, 0, 0.04)';
243
247
  export const bpSurfaceCtaSurfaceTertiaryPressed = 'rgba(0, 0, 0, 0.08)';
@@ -286,10 +290,22 @@ export const bpSurfaceGhostSurfaceSecondary = 'rgba(0, 0, 0, 0.04)';
286
290
  export const bpSurfaceIconButtonSurface = 'rgba(0, 0, 0, 0)';
287
291
  export const bpSurfaceIconButtonSurfaceHover = 'rgba(0, 0, 0, 0.04)';
288
292
  export const bpSurfaceIconButtonSurfacePressed = 'rgba(0, 0, 0, 0.08)';
293
+ export const bpSurfaceIconTileSurfaceBoxblue = '#0061d5';
294
+ export const bpSurfaceIconTileSurfaceDarkblue = '#003c84';
295
+ export const bpSurfaceIconTileSurfaceGray = '#222222';
296
+ export const bpSurfaceIconTileSurfaceGreenlight = '#22af74';
297
+ export const bpSurfaceIconTileSurfaceGrimace = '#4826c2';
298
+ export const bpSurfaceIconTileSurfaceLightblue = '#2486fc';
299
+ export const bpSurfaceIconTileSurfaceOrange = '#d97417';
300
+ export const bpSurfaceIconTileSurfacePurplerain = '#8f39d5';
301
+ export const bpSurfaceIconTileSurfaceWatermelonred = '#d5324e';
302
+ export const bpSurfaceIconTileSurfaceWhite = '#ffffff';
303
+ export const bpSurfaceIconTileSurfaceYellorange = '#dca118';
289
304
  export const bpSurfaceIllustrationSurfaceBox = '#0061d5';
290
305
  export const bpSurfaceIllustrationSurfaceBoxNeutral = '#0061d5';
291
306
  export const bpSurfaceInlineNoticeSurfaceError = '#fdebee';
292
307
  export const bpSurfaceInlineNoticeSurfaceInfo = '#e9f2fe';
308
+ export const bpSurfaceInlineNoticeSurfaceNote = '#ffffff';
293
309
  export const bpSurfaceInlineNoticeSurfaceSuccess = '#e9f8f2';
294
310
  export const bpSurfaceInlineNoticeSurfaceWarning = '#fffbe5';
295
311
  export const bpSurfaceInlineTableSurface = '#ffffff';
package/dist/tokens/BP2/dark_mode_value/tokens.json CHANGED
@@ -35,6 +35,7 @@
35
35
  "BpBorderFilterChipBorderMultiOnHover": "#99c0ee",
36
36
  "BpBorderGridThumbnailBorder": "#e8e8e8",
37
37
  "BpBorderHeaderBorder": "#e8e8e8",
38
+ "BpBorderInlineNoticeBorder": "rgba(0, 0, 0, 0.08)",
38
39
  "BpBorderInlineTableBorder": "#e8e8e8",
39
40
  "BpBorderInputBorder": "#909090",
40
41
  "BpBorderInputBorderError": "#ed3757",
@@ -219,6 +220,9 @@
219
220
  "BpSurfaceContentSwitcherSurface": "#e8e8e8",
220
221
  "BpSurfaceContentSwitcherSurfaceHover": "#f4f4f4",
221
222
  "BpSurfaceContentSwitcherSurfaceSelected": "#ffffff",
223
+ "BpSurfaceCtaDestructiveSurfacePrimary": "#d5324e",
224
+ "BpSurfaceCtaDestructiveSurfacePrimaryHover": "#ed3757",
225
+ "BpSurfaceCtaDestructiveSurfacePrimaryPressed": "#be2c46",
222
226
  "BpSurfaceCtaDestructiveSurfaceTertiary": "rgba(237, 55, 87, 0)",
223
227
  "BpSurfaceCtaDestructiveSurfaceTertiaryHover": "rgba(237, 55, 87, 0.04)",
224
228
  "BpSurfaceCtaDestructiveSurfaceTertiaryPressed": "rgba(237, 55, 87, 0.12)",
@@ -236,9 +240,9 @@
236
240
  "BpSurfaceCtaSurfacePromoFocusPressed": "#3a1e9b",
237
241
  "BpSurfaceCtaSurfacePromoHover": "#4826c2",
238
242
  "BpSurfaceCtaSurfacePromoPressed": "#3a1e9b",
239
- "BpSurfaceCtaSurfaceSecondary": "rgba(255, 255, 255, 0.9)",
240
- "BpSurfaceCtaSurfaceSecondaryHover": "rgba(255, 255, 255, 0.6)",
241
- "BpSurfaceCtaSurfaceSecondaryPressed": "rgba(255, 255, 255, 0.3)",
243
+ "BpSurfaceCtaSurfaceSecondary": "#ffffff",
244
+ "BpSurfaceCtaSurfaceSecondaryHover": "#f4f4f4",
245
+ "BpSurfaceCtaSurfaceSecondaryPressed": "#e8e8e8",
242
246
  "BpSurfaceCtaSurfaceTertiary": "rgba(0, 0, 0, 0)",
243
247
  "BpSurfaceCtaSurfaceTertiaryHover": "rgba(0, 0, 0, 0.04)",
244
248
  "BpSurfaceCtaSurfaceTertiaryPressed": "rgba(0, 0, 0, 0.08)",
@@ -287,10 +291,22 @@
287
291
  "BpSurfaceIconButtonSurface": "rgba(0, 0, 0, 0)",
288
292
  "BpSurfaceIconButtonSurfaceHover": "rgba(0, 0, 0, 0.04)",
289
293
  "BpSurfaceIconButtonSurfacePressed": "rgba(0, 0, 0, 0.08)",
294
+ "BpSurfaceIconTileSurfaceBoxblue": "#0061d5",
295
+ "BpSurfaceIconTileSurfaceDarkblue": "#003c84",
296
+ "BpSurfaceIconTileSurfaceGray": "#222222",
297
+ "BpSurfaceIconTileSurfaceGreenlight": "#22af74",
298
+ "BpSurfaceIconTileSurfaceGrimace": "#4826c2",
299
+ "BpSurfaceIconTileSurfaceLightblue": "#2486fc",
300
+ "BpSurfaceIconTileSurfaceOrange": "#d97417",
301
+ "BpSurfaceIconTileSurfacePurplerain": "#8f39d5",
302
+ "BpSurfaceIconTileSurfaceWatermelonred": "#d5324e",
303
+ "BpSurfaceIconTileSurfaceWhite": "#ffffff",
304
+ "BpSurfaceIconTileSurfaceYellorange": "#dca118",
290
305
  "BpSurfaceIllustrationSurfaceBox": "#0061d5",
291
306
  "BpSurfaceIllustrationSurfaceBoxNeutral": "#0061d5",
292
307
  "BpSurfaceInlineNoticeSurfaceError": "#fdebee",
293
308
  "BpSurfaceInlineNoticeSurfaceInfo": "#e9f2fe",
309
+ "BpSurfaceInlineNoticeSurfaceNote": "#ffffff",
294
310
  "BpSurfaceInlineNoticeSurfaceSuccess": "#e9f8f2",
295
311
  "BpSurfaceInlineNoticeSurfaceWarning": "#fffbe5",
296
312
  "BpSurfaceInlineTableSurface": "#ffffff",
package/dist/tokens/BP2/light_mode_value/px-tokens.d.ts CHANGED
@@ -39,6 +39,7 @@ export const bpBorderFilterChipBorderMultiOn: string;
39
39
  export const bpBorderFilterChipBorderMultiOnHover: string;
40
40
  export const bpBorderGridThumbnailBorder: string;
41
41
  export const bpBorderHeaderBorder: string;
42
+ export const bpBorderInlineNoticeBorder: string;
42
43
  export const bpBorderInlineTableBorder: string;
43
44
  export const bpBorderInputBorder: string;
44
45
  export const bpBorderInputBorderError: string;
@@ -223,6 +224,9 @@ export const bpSurfaceComboboxSurface: string;
223
224
  export const bpSurfaceContentSwitcherSurface: string;
224
225
  export const bpSurfaceContentSwitcherSurfaceHover: string;
225
226
  export const bpSurfaceContentSwitcherSurfaceSelected: string;
227
+ export const bpSurfaceCtaDestructiveSurfacePrimary: string;
228
+ export const bpSurfaceCtaDestructiveSurfacePrimaryHover: string;
229
+ export const bpSurfaceCtaDestructiveSurfacePrimaryPressed: string;
226
230
  export const bpSurfaceCtaDestructiveSurfaceTertiary: string;
227
231
  export const bpSurfaceCtaDestructiveSurfaceTertiaryHover: string;
228
232
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed: string;
@@ -291,10 +295,22 @@ export const bpSurfaceGhostSurfaceSecondary: string;
291
295
  export const bpSurfaceIconButtonSurface: string;
292
296
  export const bpSurfaceIconButtonSurfaceHover: string;
293
297
  export const bpSurfaceIconButtonSurfacePressed: string;
298
+ export const bpSurfaceIconTileSurfaceBoxblue: string;
299
+ export const bpSurfaceIconTileSurfaceDarkblue: string;
300
+ export const bpSurfaceIconTileSurfaceGray: string;
301
+ export const bpSurfaceIconTileSurfaceGreenlight: string;
302
+ export const bpSurfaceIconTileSurfaceGrimace: string;
303
+ export const bpSurfaceIconTileSurfaceLightblue: string;
304
+ export const bpSurfaceIconTileSurfaceOrange: string;
305
+ export const bpSurfaceIconTileSurfacePurplerain: string;
306
+ export const bpSurfaceIconTileSurfaceWatermelonred: string;
307
+ export const bpSurfaceIconTileSurfaceWhite: string;
308
+ export const bpSurfaceIconTileSurfaceYellorange: string;
294
309
  export const bpSurfaceIllustrationSurfaceBox: string;
295
310
  export const bpSurfaceIllustrationSurfaceBoxNeutral: string;
296
311
  export const bpSurfaceInlineNoticeSurfaceError: string;
297
312
  export const bpSurfaceInlineNoticeSurfaceInfo: string;
313
+ export const bpSurfaceInlineNoticeSurfaceNote: string;
298
314
  export const bpSurfaceInlineNoticeSurfaceSuccess: string;
299
315
  export const bpSurfaceInlineNoticeSurfaceWarning: string;
300
316
  export const bpSurfaceInlineTableSurface: string;
package/dist/tokens/BP2/light_mode_value/px-tokens.js CHANGED
@@ -39,6 +39,7 @@ export const bpBorderFilterChipBorderMultiOn = '#99c0ee';
39
39
  export const bpBorderFilterChipBorderMultiOnHover = '#99c0ee';
40
40
  export const bpBorderGridThumbnailBorder = '#e8e8e8';
41
41
  export const bpBorderHeaderBorder = '#e8e8e8';
42
+ export const bpBorderInlineNoticeBorder = 'rgba(0, 0, 0, 0.08)';
42
43
  export const bpBorderInlineTableBorder = '#e8e8e8';
43
44
  export const bpBorderInputBorder = '#909090';
44
45
  export const bpBorderInputBorderError = '#ed3757';
@@ -78,8 +79,8 @@ export const bpBorderResizeBorderHover = '#bcbcbc';
78
79
  export const bpBorderSearchGlobalBorderHover = '#e8e8e8';
79
80
  export const bpBorderSearchInputBorderFocus = '#2486fc';
80
81
  export const bpBorderSearchInputBorderHover = '#6f6f6f';
81
- export const bpBorderSearchBorder = '#f4f4f4';
82
- export const bpBorderSearchBorderHover = '#6f6f6f';
82
+ export const bpBorderSearchBorder = 'rgba(0, 0, 0, 0.08)';
83
+ export const bpBorderSearchBorderHover = 'rgba(0, 0, 0, 0.12)';
83
84
  export const bpBorderSelectBorder = '#bcbcbc';
84
85
  export const bpBorderSelectBorderActive = '#2486fc';
85
86
  export const bpBorderSelectBorderError = '#d5324e';
@@ -223,6 +224,9 @@ export const bpSurfaceComboboxSurface = '#ffffff';
223
224
  export const bpSurfaceContentSwitcherSurface = '#e8e8e8';
224
225
  export const bpSurfaceContentSwitcherSurfaceHover = '#f4f4f4';
225
226
  export const bpSurfaceContentSwitcherSurfaceSelected = '#ffffff';
227
+ export const bpSurfaceCtaDestructiveSurfacePrimary = '#d5324e';
228
+ export const bpSurfaceCtaDestructiveSurfacePrimaryHover = '#ed3757';
229
+ export const bpSurfaceCtaDestructiveSurfacePrimaryPressed = '#be2c46';
226
230
  export const bpSurfaceCtaDestructiveSurfaceTertiary = 'rgba(237, 55, 87, 0)';
227
231
  export const bpSurfaceCtaDestructiveSurfaceTertiaryHover = 'rgba(237, 55, 87, 0.04)';
228
232
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed = 'rgba(237, 55, 87, 0.12)';
@@ -240,9 +244,9 @@ export const bpSurfaceCtaSurfacePromoFocus = '#4826c2';
240
244
  export const bpSurfaceCtaSurfacePromoFocusPressed = '#3a1e9b';
241
245
  export const bpSurfaceCtaSurfacePromoHover = '#4826c2';
242
246
  export const bpSurfaceCtaSurfacePromoPressed = '#3a1e9b';
243
- export const bpSurfaceCtaSurfaceSecondary = 'rgba(255, 255, 255, 0.9)';
244
- export const bpSurfaceCtaSurfaceSecondaryHover = 'rgba(255, 255, 255, 0.6)';
245
- export const bpSurfaceCtaSurfaceSecondaryPressed = 'rgba(255, 255, 255, 0.3)';
247
+ export const bpSurfaceCtaSurfaceSecondary = '#ffffff';
248
+ export const bpSurfaceCtaSurfaceSecondaryHover = '#f4f4f4';
249
+ export const bpSurfaceCtaSurfaceSecondaryPressed = '#e8e8e8';
246
250
  export const bpSurfaceCtaSurfaceTertiary = 'rgba(0, 0, 0, 0)';
247
251
  export const bpSurfaceCtaSurfaceTertiaryHover = 'rgba(0, 0, 0, 0.04)';
248
252
  export const bpSurfaceCtaSurfaceTertiaryPressed = 'rgba(0, 0, 0, 0.08)';
@@ -291,10 +295,22 @@ export const bpSurfaceGhostSurfaceSecondary = 'rgba(0, 0, 0, 0.04)';
291
295
  export const bpSurfaceIconButtonSurface = 'rgba(0, 0, 0, 0)';
292
296
  export const bpSurfaceIconButtonSurfaceHover = 'rgba(0, 0, 0, 0.04)';
293
297
  export const bpSurfaceIconButtonSurfacePressed = 'rgba(0, 0, 0, 0.08)';
298
+ export const bpSurfaceIconTileSurfaceBoxblue = '#0061d5';
299
+ export const bpSurfaceIconTileSurfaceDarkblue = '#003c84';
300
+ export const bpSurfaceIconTileSurfaceGray = '#222222';
301
+ export const bpSurfaceIconTileSurfaceGreenlight = '#22af74';
302
+ export const bpSurfaceIconTileSurfaceGrimace = '#4826c2';
303
+ export const bpSurfaceIconTileSurfaceLightblue = '#2486fc';
304
+ export const bpSurfaceIconTileSurfaceOrange = '#d97417';
305
+ export const bpSurfaceIconTileSurfacePurplerain = '#8f39d5';
306
+ export const bpSurfaceIconTileSurfaceWatermelonred = '#d5324e';
307
+ export const bpSurfaceIconTileSurfaceWhite = '#ffffff';
308
+ export const bpSurfaceIconTileSurfaceYellorange = '#dca118';
294
309
  export const bpSurfaceIllustrationSurfaceBox = '#0061d5';
295
310
  export const bpSurfaceIllustrationSurfaceBoxNeutral = '#0061d5';
296
311
  export const bpSurfaceInlineNoticeSurfaceError = '#fdebee';
297
312
  export const bpSurfaceInlineNoticeSurfaceInfo = '#e9f2fe';
313
+ export const bpSurfaceInlineNoticeSurfaceNote = '#ffffff';
298
314
  export const bpSurfaceInlineNoticeSurfaceSuccess = '#e9f8f2';
299
315
  export const bpSurfaceInlineNoticeSurfaceWarning = '#fffbe5';
300
316
  export const bpSurfaceInlineTableSurface = '#ffffff';
@@ -353,10 +369,10 @@ export const bpSurfaceRadioTileSurface = '#ffffff';
353
369
  export const bpSurfaceRadioTileSurfaceHover = '#f4f4f4';
354
370
  export const bpSurfaceRadioTileSurfaceSelected = '#f2f7fd';
355
371
  export const bpSurfaceScrollbarSurface = 'rgba(0, 0, 0, 0.5)';
356
- export const bpSurfaceSearchSurface = '#f4f4f4';
372
+ export const bpSurfaceSearchSurface = '#ffffff';
357
373
  export const bpSurfaceSearchSurfaceActive = '#ffffff';
358
374
  export const bpSurfaceSearchSurfaceComplete = '#f4f4f4';
359
- export const bpSurfaceSearchSurfaceHover = '#fbfbfb';
375
+ export const bpSurfaceSearchSurfaceHover = '#f4f4f4';
360
376
  export const bpSurfaceSelectSurface = '#ffffff';
361
377
  export const bpSurfaceSelectSurfaceReadOnly = '#fbfbfb';
362
378
  export const bpSurfaceSidePanelSurface = '#fbfbfb';
package/dist/tokens/BP2/light_mode_value/tokens.css CHANGED
@@ -610,6 +610,7 @@
610
610
  --bp-border-filter-chip-border-multi-on-hover: var(--bp-box-blue-40);
611
611
  --bp-border-grid-thumbnail-border: var(--bp-gray-10);
612
612
  --bp-border-header-border: var(--bp-gray-10);
613
+ --bp-border-inline-notice-border: var(--bp-black-opacity-08);
613
614
  --bp-border-inline-table-border: var(--bp-gray-10);
614
615
  --bp-border-input-border: var(--bp-gray-50);
615
616
  --bp-border-input-border-error: var(--bp-watermelon-red-100);
@@ -649,8 +650,8 @@
649
650
  --bp-border-search-global-border-hover: var(--bp-gray-10);
650
651
  --bp-border-search-input-border-focus: var(--bp-light-blue-100);
651
652
  --bp-border-search-input-border-hover: var(--bp-gray-65);
652
- --bp-border-search-border: var(--bp-gray-05);
653
- --bp-border-search-border-hover: var(--bp-gray-65);
653
+ --bp-border-search-border: var(--bp-black-opacity-08);
654
+ --bp-border-search-border-hover: var(--bp-black-opacity-12);
654
655
  --bp-border-select-border: var(--bp-gray-30);
655
656
  --bp-border-select-border-active: var(--bp-light-blue-100);
656
657
  --bp-border-select-border-error: var(--bp-watermelon-red-110);
@@ -766,6 +767,9 @@
766
767
  --bp-surface-content-switcher-surface: var(--bp-gray-10);
767
768
  --bp-surface-content-switcher-surface-hover: var(--bp-gray-05);
768
769
  --bp-surface-content-switcher-surface-selected: var(--bp-gray-white);
770
+ --bp-surface-cta-destructive-surface-primary: var(--bp-watermelon-red-110);
771
+ --bp-surface-cta-destructive-surface-primary-hover: var(--bp-watermelon-red-100);
772
+ --bp-surface-cta-destructive-surface-primary-pressed: var(--bp-watermelon-red-120);
769
773
  --bp-surface-cta-destructive-surface-tertiary: var(--bp-watermelon-red-opacity-00);
770
774
  --bp-surface-cta-destructive-surface-tertiary-hover: var(--bp-watermelon-red-opacity-04);
771
775
  --bp-surface-cta-destructive-surface-tertiary-pressed: var(--bp-watermelon-red-opacity-12);
@@ -783,9 +787,9 @@
783
787
  --bp-surface-cta-surface-promo-focus-pressed: var(--bp-grimace-120);
784
788
  --bp-surface-cta-surface-promo-hover: var(--bp-grimace-100);
785
789
  --bp-surface-cta-surface-promo-pressed: var(--bp-grimace-120);
786
- --bp-surface-cta-surface-secondary: var(--bp-white-opacity-90);
787
- --bp-surface-cta-surface-secondary-hover: var(--bp-white-opacity-60);
788
- --bp-surface-cta-surface-secondary-pressed: var(--bp-white-opacity-30);
790
+ --bp-surface-cta-surface-secondary: var(--bp-gray-white);
791
+ --bp-surface-cta-surface-secondary-hover: var(--bp-gray-05);
792
+ --bp-surface-cta-surface-secondary-pressed: var(--bp-gray-10);
789
793
  --bp-surface-cta-surface-tertiary: var(--bp-black-opacity-00);
790
794
  --bp-surface-cta-surface-tertiary-hover: var(--bp-black-opacity-04);
791
795
  --bp-surface-cta-surface-tertiary-pressed: var(--bp-black-opacity-08);
@@ -833,10 +837,22 @@
833
837
  --bp-surface-icon-button-surface: var(--bp-black-opacity-00);
834
838
  --bp-surface-icon-button-surface-hover: var(--bp-black-opacity-04);
835
839
  --bp-surface-icon-button-surface-pressed: var(--bp-black-opacity-08);
840
+ --bp-surface-icon-tile-surface-boxblue: var(--bp-box-blue-100);
841
+ --bp-surface-icon-tile-surface-darkblue: var(--bp-dark-blue-100);
842
+ --bp-surface-icon-tile-surface-gray: var(--bp-gray-100);
843
+ --bp-surface-icon-tile-surface-greenlight: var(--bp-green-light-110);
844
+ --bp-surface-icon-tile-surface-grimace: var(--bp-grimace-100);
845
+ --bp-surface-icon-tile-surface-lightblue: var(--bp-light-blue-100);
846
+ --bp-surface-icon-tile-surface-orange: var(--bp-orange-110);
847
+ --bp-surface-icon-tile-surface-purplerain: var(--bp-purple-rain-110);
848
+ --bp-surface-icon-tile-surface-watermelonred: var(--bp-watermelon-red-110);
849
+ --bp-surface-icon-tile-surface-white: var(--bp-gray-white);
850
+ --bp-surface-icon-tile-surface-yellorange: var(--bp-yellorange-110);
836
851
  --bp-surface-illustration-surface-box: var(--bp-box-blue-100);
837
852
  --bp-surface-illustration-surface-box-neutral: var(--bp-box-blue-100);
838
853
  --bp-surface-inline-notice-surface-error: var(--bp-watermelon-red-10);
839
854
  --bp-surface-inline-notice-surface-info: var(--bp-light-blue-10);
855
+ --bp-surface-inline-notice-surface-note: var(--bp-gray-white);
840
856
  --bp-surface-inline-notice-surface-success: var(--bp-green-light-10);
841
857
  --bp-surface-inline-notice-surface-warning: var(--bp-yellow-10);
842
858
  --bp-surface-inline-table-surface: var(--bp-gray-white);
@@ -895,10 +911,10 @@
895
911
  --bp-surface-radio-tile-surface-hover: var(--bp-gray-05);
896
912
  --bp-surface-radio-tile-surface-selected: var(--bp-box-blue-05);
897
913
  --bp-surface-scrollbar-surface: var(--bp-black-opacity-50);
898
- --bp-surface-search-surface: var(--bp-gray-05);
914
+ --bp-surface-search-surface: var(--bp-gray-white);
899
915
  --bp-surface-search-surface-active: var(--bp-gray-white);
900
916
  --bp-surface-search-surface-complete: var(--bp-gray-05);
901
- --bp-surface-search-surface-hover: var(--bp-gray-02);
917
+ --bp-surface-search-surface-hover: var(--bp-gray-05);
902
918
  --bp-surface-select-surface: var(--bp-gray-white);
903
919
  --bp-surface-select-surface-read-only: var(--bp-gray-02);
904
920
  --bp-surface-side-panel-surface: var(--bp-gray-02);
package/dist/tokens/BP2/light_mode_value/tokens.d.ts CHANGED
@@ -35,6 +35,7 @@ export const bpBorderFilterChipBorderMultiOn: string;
35
35
  export const bpBorderFilterChipBorderMultiOnHover: string;
36
36
  export const bpBorderGridThumbnailBorder: string;
37
37
  export const bpBorderHeaderBorder: string;
38
+ export const bpBorderInlineNoticeBorder: string;
38
39
  export const bpBorderInlineTableBorder: string;
39
40
  export const bpBorderInputBorder: string;
40
41
  export const bpBorderInputBorderError: string;
@@ -219,6 +220,9 @@ export const bpSurfaceComboboxSurface: string;
219
220
  export const bpSurfaceContentSwitcherSurface: string;
220
221
  export const bpSurfaceContentSwitcherSurfaceHover: string;
221
222
  export const bpSurfaceContentSwitcherSurfaceSelected: string;
223
+ export const bpSurfaceCtaDestructiveSurfacePrimary: string;
224
+ export const bpSurfaceCtaDestructiveSurfacePrimaryHover: string;
225
+ export const bpSurfaceCtaDestructiveSurfacePrimaryPressed: string;
222
226
  export const bpSurfaceCtaDestructiveSurfaceTertiary: string;
223
227
  export const bpSurfaceCtaDestructiveSurfaceTertiaryHover: string;
224
228
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed: string;
@@ -287,10 +291,22 @@ export const bpSurfaceGhostSurfaceSecondary: string;
287
291
  export const bpSurfaceIconButtonSurface: string;
288
292
  export const bpSurfaceIconButtonSurfaceHover: string;
289
293
  export const bpSurfaceIconButtonSurfacePressed: string;
294
+ export const bpSurfaceIconTileSurfaceBoxblue: string;
295
+ export const bpSurfaceIconTileSurfaceDarkblue: string;
296
+ export const bpSurfaceIconTileSurfaceGray: string;
297
+ export const bpSurfaceIconTileSurfaceGreenlight: string;
298
+ export const bpSurfaceIconTileSurfaceGrimace: string;
299
+ export const bpSurfaceIconTileSurfaceLightblue: string;
300
+ export const bpSurfaceIconTileSurfaceOrange: string;
301
+ export const bpSurfaceIconTileSurfacePurplerain: string;
302
+ export const bpSurfaceIconTileSurfaceWatermelonred: string;
303
+ export const bpSurfaceIconTileSurfaceWhite: string;
304
+ export const bpSurfaceIconTileSurfaceYellorange: string;
290
305
  export const bpSurfaceIllustrationSurfaceBox: string;
291
306
  export const bpSurfaceIllustrationSurfaceBoxNeutral: string;
292
307
  export const bpSurfaceInlineNoticeSurfaceError: string;
293
308
  export const bpSurfaceInlineNoticeSurfaceInfo: string;
309
+ export const bpSurfaceInlineNoticeSurfaceNote: string;
294
310
  export const bpSurfaceInlineNoticeSurfaceSuccess: string;
295
311
  export const bpSurfaceInlineNoticeSurfaceWarning: string;
296
312
  export const bpSurfaceInlineTableSurface: string;
package/dist/tokens/BP2/light_mode_value/tokens.js CHANGED
@@ -35,6 +35,7 @@ export const bpBorderFilterChipBorderMultiOn = '#99c0ee';
35
35
  export const bpBorderFilterChipBorderMultiOnHover = '#99c0ee';
36
36
  export const bpBorderGridThumbnailBorder = '#e8e8e8';
37
37
  export const bpBorderHeaderBorder = '#e8e8e8';
38
+ export const bpBorderInlineNoticeBorder = 'rgba(0, 0, 0, 0.08)';
38
39
  export const bpBorderInlineTableBorder = '#e8e8e8';
39
40
  export const bpBorderInputBorder = '#909090';
40
41
  export const bpBorderInputBorderError = '#ed3757';
@@ -74,8 +75,8 @@ export const bpBorderResizeBorderHover = '#bcbcbc';
74
75
  export const bpBorderSearchGlobalBorderHover = '#e8e8e8';
75
76
  export const bpBorderSearchInputBorderFocus = '#2486fc';
76
77
  export const bpBorderSearchInputBorderHover = '#6f6f6f';
77
- export const bpBorderSearchBorder = '#f4f4f4';
78
- export const bpBorderSearchBorderHover = '#6f6f6f';
78
+ export const bpBorderSearchBorder = 'rgba(0, 0, 0, 0.08)';
79
+ export const bpBorderSearchBorderHover = 'rgba(0, 0, 0, 0.12)';
79
80
  export const bpBorderSelectBorder = '#bcbcbc';
80
81
  export const bpBorderSelectBorderActive = '#2486fc';
81
82
  export const bpBorderSelectBorderError = '#d5324e';
@@ -219,6 +220,9 @@ export const bpSurfaceComboboxSurface = '#ffffff';
219
220
  export const bpSurfaceContentSwitcherSurface = '#e8e8e8';
220
221
  export const bpSurfaceContentSwitcherSurfaceHover = '#f4f4f4';
221
222
  export const bpSurfaceContentSwitcherSurfaceSelected = '#ffffff';
223
+ export const bpSurfaceCtaDestructiveSurfacePrimary = '#d5324e';
224
+ export const bpSurfaceCtaDestructiveSurfacePrimaryHover = '#ed3757';
225
+ export const bpSurfaceCtaDestructiveSurfacePrimaryPressed = '#be2c46';
222
226
  export const bpSurfaceCtaDestructiveSurfaceTertiary = 'rgba(237, 55, 87, 0)';
223
227
  export const bpSurfaceCtaDestructiveSurfaceTertiaryHover = 'rgba(237, 55, 87, 0.04)';
224
228
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed = 'rgba(237, 55, 87, 0.12)';
@@ -236,9 +240,9 @@ export const bpSurfaceCtaSurfacePromoFocus = '#4826c2';
236
240
  export const bpSurfaceCtaSurfacePromoFocusPressed = '#3a1e9b';
237
241
  export const bpSurfaceCtaSurfacePromoHover = '#4826c2';
238
242
  export const bpSurfaceCtaSurfacePromoPressed = '#3a1e9b';
239
- export const bpSurfaceCtaSurfaceSecondary = 'rgba(255, 255, 255, 0.9)';
240
- export const bpSurfaceCtaSurfaceSecondaryHover = 'rgba(255, 255, 255, 0.6)';
241
- export const bpSurfaceCtaSurfaceSecondaryPressed = 'rgba(255, 255, 255, 0.3)';
243
+ export const bpSurfaceCtaSurfaceSecondary = '#ffffff';
244
+ export const bpSurfaceCtaSurfaceSecondaryHover = '#f4f4f4';
245
+ export const bpSurfaceCtaSurfaceSecondaryPressed = '#e8e8e8';
242
246
  export const bpSurfaceCtaSurfaceTertiary = 'rgba(0, 0, 0, 0)';
243
247
  export const bpSurfaceCtaSurfaceTertiaryHover = 'rgba(0, 0, 0, 0.04)';
244
248
  export const bpSurfaceCtaSurfaceTertiaryPressed = 'rgba(0, 0, 0, 0.08)';
@@ -287,10 +291,22 @@ export const bpSurfaceGhostSurfaceSecondary = 'rgba(0, 0, 0, 0.04)';
287
291
  export const bpSurfaceIconButtonSurface = 'rgba(0, 0, 0, 0)';
288
292
  export const bpSurfaceIconButtonSurfaceHover = 'rgba(0, 0, 0, 0.04)';
289
293
  export const bpSurfaceIconButtonSurfacePressed = 'rgba(0, 0, 0, 0.08)';
294
+ export const bpSurfaceIconTileSurfaceBoxblue = '#0061d5';
295
+ export const bpSurfaceIconTileSurfaceDarkblue = '#003c84';
296
+ export const bpSurfaceIconTileSurfaceGray = '#222222';
297
+ export const bpSurfaceIconTileSurfaceGreenlight = '#22af74';
298
+ export const bpSurfaceIconTileSurfaceGrimace = '#4826c2';
299
+ export const bpSurfaceIconTileSurfaceLightblue = '#2486fc';
300
+ export const bpSurfaceIconTileSurfaceOrange = '#d97417';
301
+ export const bpSurfaceIconTileSurfacePurplerain = '#8f39d5';
302
+ export const bpSurfaceIconTileSurfaceWatermelonred = '#d5324e';
303
+ export const bpSurfaceIconTileSurfaceWhite = '#ffffff';
304
+ export const bpSurfaceIconTileSurfaceYellorange = '#dca118';
290
305
  export const bpSurfaceIllustrationSurfaceBox = '#0061d5';
291
306
  export const bpSurfaceIllustrationSurfaceBoxNeutral = '#0061d5';
292
307
  export const bpSurfaceInlineNoticeSurfaceError = '#fdebee';
293
308
  export const bpSurfaceInlineNoticeSurfaceInfo = '#e9f2fe';
309
+ export const bpSurfaceInlineNoticeSurfaceNote = '#ffffff';
294
310
  export const bpSurfaceInlineNoticeSurfaceSuccess = '#e9f8f2';
295
311
  export const bpSurfaceInlineNoticeSurfaceWarning = '#fffbe5';
296
312
  export const bpSurfaceInlineTableSurface = '#ffffff';
@@ -349,10 +365,10 @@ export const bpSurfaceRadioTileSurface = '#ffffff';
349
365
  export const bpSurfaceRadioTileSurfaceHover = '#f4f4f4';
350
366
  export const bpSurfaceRadioTileSurfaceSelected = '#f2f7fd';
351
367
  export const bpSurfaceScrollbarSurface = 'rgba(0, 0, 0, 0.5)';
352
- export const bpSurfaceSearchSurface = '#f4f4f4';
368
+ export const bpSurfaceSearchSurface = '#ffffff';
353
369
  export const bpSurfaceSearchSurfaceActive = '#ffffff';
354
370
  export const bpSurfaceSearchSurfaceComplete = '#f4f4f4';
355
- export const bpSurfaceSearchSurfaceHover = '#fbfbfb';
371
+ export const bpSurfaceSearchSurfaceHover = '#f4f4f4';
356
372
  export const bpSurfaceSelectSurface = '#ffffff';
357
373
  export const bpSurfaceSelectSurfaceReadOnly = '#fbfbfb';
358
374
  export const bpSurfaceSidePanelSurface = '#fbfbfb';
package/dist/tokens/BP2/light_mode_value/tokens.json CHANGED
@@ -36,6 +36,7 @@
36
36
  "BpBorderFilterChipBorderMultiOnHover": "#99c0ee",
37
37
  "BpBorderGridThumbnailBorder": "#e8e8e8",
38
38
  "BpBorderHeaderBorder": "#e8e8e8",
39
+ "BpBorderInlineNoticeBorder": "rgba(0, 0, 0, 0.08)",
39
40
  "BpBorderInlineTableBorder": "#e8e8e8",
40
41
  "BpBorderInputBorder": "#909090",
41
42
  "BpBorderInputBorderError": "#ed3757",
@@ -75,8 +76,8 @@
75
76
  "BpBorderSearchGlobalBorderHover": "#e8e8e8",
76
77
  "BpBorderSearchInputBorderFocus": "#2486fc",
77
78
  "BpBorderSearchInputBorderHover": "#6f6f6f",
78
- "BpBorderSearchBorder": "#f4f4f4",
79
- "BpBorderSearchBorderHover": "#6f6f6f",
79
+ "BpBorderSearchBorder": "rgba(0, 0, 0, 0.08)",
80
+ "BpBorderSearchBorderHover": "rgba(0, 0, 0, 0.12)",
80
81
  "BpBorderSelectBorder": "#bcbcbc",
81
82
  "BpBorderSelectBorderActive": "#2486fc",
82
83
  "BpBorderSelectBorderError": "#d5324e",
@@ -220,6 +221,9 @@
220
221
  "BpSurfaceContentSwitcherSurface": "#e8e8e8",
221
222
  "BpSurfaceContentSwitcherSurfaceHover": "#f4f4f4",
222
223
  "BpSurfaceContentSwitcherSurfaceSelected": "#ffffff",
224
+ "BpSurfaceCtaDestructiveSurfacePrimary": "#d5324e",
225
+ "BpSurfaceCtaDestructiveSurfacePrimaryHover": "#ed3757",
226
+ "BpSurfaceCtaDestructiveSurfacePrimaryPressed": "#be2c46",
223
227
  "BpSurfaceCtaDestructiveSurfaceTertiary": "rgba(237, 55, 87, 0)",
224
228
  "BpSurfaceCtaDestructiveSurfaceTertiaryHover": "rgba(237, 55, 87, 0.04)",
225
229
  "BpSurfaceCtaDestructiveSurfaceTertiaryPressed": "rgba(237, 55, 87, 0.12)",
@@ -237,9 +241,9 @@
237
241
  "BpSurfaceCtaSurfacePromoFocusPressed": "#3a1e9b",
238
242
  "BpSurfaceCtaSurfacePromoHover": "#4826c2",
239
243
  "BpSurfaceCtaSurfacePromoPressed": "#3a1e9b",
240
- "BpSurfaceCtaSurfaceSecondary": "rgba(255, 255, 255, 0.9)",
241
- "BpSurfaceCtaSurfaceSecondaryHover": "rgba(255, 255, 255, 0.6)",
242
- "BpSurfaceCtaSurfaceSecondaryPressed": "rgba(255, 255, 255, 0.3)",
244
+ "BpSurfaceCtaSurfaceSecondary": "#ffffff",
245
+ "BpSurfaceCtaSurfaceSecondaryHover": "#f4f4f4",
246
+ "BpSurfaceCtaSurfaceSecondaryPressed": "#e8e8e8",
243
247
  "BpSurfaceCtaSurfaceTertiary": "rgba(0, 0, 0, 0)",
244
248
  "BpSurfaceCtaSurfaceTertiaryHover": "rgba(0, 0, 0, 0.04)",
245
249
  "BpSurfaceCtaSurfaceTertiaryPressed": "rgba(0, 0, 0, 0.08)",
@@ -288,10 +292,22 @@
288
292
  "BpSurfaceIconButtonSurface": "rgba(0, 0, 0, 0)",
289
293
  "BpSurfaceIconButtonSurfaceHover": "rgba(0, 0, 0, 0.04)",
290
294
  "BpSurfaceIconButtonSurfacePressed": "rgba(0, 0, 0, 0.08)",
295
+ "BpSurfaceIconTileSurfaceBoxblue": "#0061d5",
296
+ "BpSurfaceIconTileSurfaceDarkblue": "#003c84",
297
+ "BpSurfaceIconTileSurfaceGray": "#222222",
298
+ "BpSurfaceIconTileSurfaceGreenlight": "#22af74",
299
+ "BpSurfaceIconTileSurfaceGrimace": "#4826c2",
300
+ "BpSurfaceIconTileSurfaceLightblue": "#2486fc",
301
+ "BpSurfaceIconTileSurfaceOrange": "#d97417",
302
+ "BpSurfaceIconTileSurfacePurplerain": "#8f39d5",
303
+ "BpSurfaceIconTileSurfaceWatermelonred": "#d5324e",
304
+ "BpSurfaceIconTileSurfaceWhite": "#ffffff",
305
+ "BpSurfaceIconTileSurfaceYellorange": "#dca118",
291
306
  "BpSurfaceIllustrationSurfaceBox": "#0061d5",
292
307
  "BpSurfaceIllustrationSurfaceBoxNeutral": "#0061d5",
293
308
  "BpSurfaceInlineNoticeSurfaceError": "#fdebee",
294
309
  "BpSurfaceInlineNoticeSurfaceInfo": "#e9f2fe",
310
+ "BpSurfaceInlineNoticeSurfaceNote": "#ffffff",
295
311
  "BpSurfaceInlineNoticeSurfaceSuccess": "#e9f8f2",
296
312
  "BpSurfaceInlineNoticeSurfaceWarning": "#fffbe5",
297
313
  "BpSurfaceInlineTableSurface": "#ffffff",
@@ -350,10 +366,10 @@
350
366
  "BpSurfaceRadioTileSurfaceHover": "#f4f4f4",
351
367
  "BpSurfaceRadioTileSurfaceSelected": "#f2f7fd",
352
368
  "BpSurfaceScrollbarSurface": "rgba(0, 0, 0, 0.5)",
353
- "BpSurfaceSearchSurface": "#f4f4f4",
369
+ "BpSurfaceSearchSurface": "#ffffff",
354
370
  "BpSurfaceSearchSurfaceActive": "#ffffff",
355
371
  "BpSurfaceSearchSurfaceComplete": "#f4f4f4",
356
- "BpSurfaceSearchSurfaceHover": "#fbfbfb",
372
+ "BpSurfaceSearchSurfaceHover": "#f4f4f4",
357
373
  "BpSurfaceSelectSurface": "#ffffff",
358
374
  "BpSurfaceSelectSurfaceReadOnly": "#fbfbfb",
359
375
  "BpSurfaceSidePanelSurface": "#fbfbfb",
package/dist/tokens/px-tokens.d.ts CHANGED
@@ -861,6 +861,7 @@ export const bpBorderFilterChipBorderMultiOn: string;
861
861
  export const bpBorderFilterChipBorderMultiOnHover: string;
862
862
  export const bpBorderGridThumbnailBorder: string;
863
863
  export const bpBorderHeaderBorder: string;
864
+ export const bpBorderInlineNoticeBorder: string;
864
865
  export const bpBorderInlineTableBorder: string;
865
866
  export const bpBorderInputBorder: string;
866
867
  export const bpBorderInputBorderError: string;
@@ -1045,6 +1046,9 @@ export const bpSurfaceComboboxSurface: string;
1045
1046
  export const bpSurfaceContentSwitcherSurface: string;
1046
1047
  export const bpSurfaceContentSwitcherSurfaceHover: string;
1047
1048
  export const bpSurfaceContentSwitcherSurfaceSelected: string;
1049
+ export const bpSurfaceCtaDestructiveSurfacePrimary: string;
1050
+ export const bpSurfaceCtaDestructiveSurfacePrimaryHover: string;
1051
+ export const bpSurfaceCtaDestructiveSurfacePrimaryPressed: string;
1048
1052
  export const bpSurfaceCtaDestructiveSurfaceTertiary: string;
1049
1053
  export const bpSurfaceCtaDestructiveSurfaceTertiaryHover: string;
1050
1054
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed: string;
@@ -1113,10 +1117,22 @@ export const bpSurfaceGhostSurfaceSecondary: string;
1113
1117
  export const bpSurfaceIconButtonSurface: string;
1114
1118
  export const bpSurfaceIconButtonSurfaceHover: string;
1115
1119
  export const bpSurfaceIconButtonSurfacePressed: string;
1120
+ export const bpSurfaceIconTileSurfaceBoxblue: string;
1121
+ export const bpSurfaceIconTileSurfaceDarkblue: string;
1122
+ export const bpSurfaceIconTileSurfaceGray: string;
1123
+ export const bpSurfaceIconTileSurfaceGreenlight: string;
1124
+ export const bpSurfaceIconTileSurfaceGrimace: string;
1125
+ export const bpSurfaceIconTileSurfaceLightblue: string;
1126
+ export const bpSurfaceIconTileSurfaceOrange: string;
1127
+ export const bpSurfaceIconTileSurfacePurplerain: string;
1128
+ export const bpSurfaceIconTileSurfaceWatermelonred: string;
1129
+ export const bpSurfaceIconTileSurfaceWhite: string;
1130
+ export const bpSurfaceIconTileSurfaceYellorange: string;
1116
1131
  export const bpSurfaceIllustrationSurfaceBox: string;
1117
1132
  export const bpSurfaceIllustrationSurfaceBoxNeutral: string;
1118
1133
  export const bpSurfaceInlineNoticeSurfaceError: string;
1119
1134
  export const bpSurfaceInlineNoticeSurfaceInfo: string;
1135
+ export const bpSurfaceInlineNoticeSurfaceNote: string;
1120
1136
  export const bpSurfaceInlineNoticeSurfaceSuccess: string;
1121
1137
  export const bpSurfaceInlineNoticeSurfaceWarning: string;
1122
1138
  export const bpSurfaceInlineTableSurface: string;
package/dist/tokens/px-tokens.js CHANGED
@@ -879,6 +879,7 @@ export const bpBorderFilterChipBorderMultiOn = '#99c0ee';
879
879
  export const bpBorderFilterChipBorderMultiOnHover = '#99c0ee';
880
880
  export const bpBorderGridThumbnailBorder = '#e8e8e8';
881
881
  export const bpBorderHeaderBorder = '#e8e8e8';
882
+ export const bpBorderInlineNoticeBorder = 'rgba(0, 0, 0, 0.08)';
882
883
  export const bpBorderInlineTableBorder = '#e8e8e8';
883
884
  export const bpBorderInputBorder = '#909090';
884
885
  export const bpBorderInputBorderError = '#ed3757';
@@ -918,8 +919,8 @@ export const bpBorderResizeBorderHover = '#bcbcbc';
918
919
  export const bpBorderSearchGlobalBorderHover = '#e8e8e8';
919
920
  export const bpBorderSearchInputBorderFocus = '#2486fc';
920
921
  export const bpBorderSearchInputBorderHover = '#6f6f6f';
921
- export const bpBorderSearchBorder = '#f4f4f4';
922
- export const bpBorderSearchBorderHover = '#6f6f6f';
922
+ export const bpBorderSearchBorder = 'rgba(0, 0, 0, 0.08)';
923
+ export const bpBorderSearchBorderHover = 'rgba(0, 0, 0, 0.12)';
923
924
  export const bpBorderSelectBorder = '#bcbcbc';
924
925
  export const bpBorderSelectBorderActive = '#2486fc';
925
926
  export const bpBorderSelectBorderError = '#d5324e';
@@ -1063,6 +1064,9 @@ export const bpSurfaceComboboxSurface = '#ffffff';
1063
1064
  export const bpSurfaceContentSwitcherSurface = '#e8e8e8';
1064
1065
  export const bpSurfaceContentSwitcherSurfaceHover = '#f4f4f4';
1065
1066
  export const bpSurfaceContentSwitcherSurfaceSelected = '#ffffff';
1067
+ export const bpSurfaceCtaDestructiveSurfacePrimary = '#d5324e';
1068
+ export const bpSurfaceCtaDestructiveSurfacePrimaryHover = '#ed3757';
1069
+ export const bpSurfaceCtaDestructiveSurfacePrimaryPressed = '#be2c46';
1066
1070
  export const bpSurfaceCtaDestructiveSurfaceTertiary = 'rgba(237, 55, 87, 0)';
1067
1071
  export const bpSurfaceCtaSurfaceIcon = 'rgba(0, 0, 0, 0)';
1068
1072
  export const bpSurfaceCtaSurfaceIconHover = 'rgba(0, 0, 0, 0.04)';
@@ -1078,9 +1082,9 @@ export const bpSurfaceCtaSurfacePromoFocus = '#4826c2';
1078
1082
  export const bpSurfaceCtaSurfacePromoFocusPressed = '#3a1e9b';
1079
1083
  export const bpSurfaceCtaSurfacePromoHover = '#4826c2';
1080
1084
  export const bpSurfaceCtaSurfacePromoPressed = '#3a1e9b';
1081
- export const bpSurfaceCtaSurfaceSecondary = 'rgba(255, 255, 255, 0.9)';
1082
- export const bpSurfaceCtaSurfaceSecondaryHover = 'rgba(255, 255, 255, 0.6)';
1083
- export const bpSurfaceCtaSurfaceSecondaryPressed = 'rgba(255, 255, 255, 0.3)';
1085
+ export const bpSurfaceCtaSurfaceSecondary = '#ffffff';
1086
+ export const bpSurfaceCtaSurfaceSecondaryHover = '#f4f4f4';
1087
+ export const bpSurfaceCtaSurfaceSecondaryPressed = '#e8e8e8';
1084
1088
  export const bpSurfaceCtaSurfaceTertiary = 'rgba(0, 0, 0, 0)';
1085
1089
  export const bpSurfaceCtaSurfaceTertiaryHover = 'rgba(0, 0, 0, 0.04)';
1086
1090
  export const bpSurfaceCtaSurfaceTertiaryPressed = 'rgba(0, 0, 0, 0.08)';
@@ -1129,10 +1133,22 @@ export const bpSurfaceGhostSurfaceSecondary = 'rgba(0, 0, 0, 0.04)';
1129
1133
  export const bpSurfaceIconButtonSurface = 'rgba(0, 0, 0, 0)';
1130
1134
  export const bpSurfaceIconButtonSurfaceHover = 'rgba(0, 0, 0, 0.04)';
1131
1135
  export const bpSurfaceIconButtonSurfacePressed = 'rgba(0, 0, 0, 0.08)';
1136
+ export const bpSurfaceIconTileSurfaceBoxblue = '#0061d5';
1137
+ export const bpSurfaceIconTileSurfaceDarkblue = '#003c84';
1138
+ export const bpSurfaceIconTileSurfaceGray = '#222222';
1139
+ export const bpSurfaceIconTileSurfaceGreenlight = '#22af74';
1140
+ export const bpSurfaceIconTileSurfaceGrimace = '#4826c2';
1141
+ export const bpSurfaceIconTileSurfaceLightblue = '#2486fc';
1142
+ export const bpSurfaceIconTileSurfaceOrange = '#d97417';
1143
+ export const bpSurfaceIconTileSurfacePurplerain = '#8f39d5';
1144
+ export const bpSurfaceIconTileSurfaceWatermelonred = '#d5324e';
1145
+ export const bpSurfaceIconTileSurfaceWhite = '#ffffff';
1146
+ export const bpSurfaceIconTileSurfaceYellorange = '#dca118';
1132
1147
  export const bpSurfaceIllustrationSurfaceBox = '#0061d5';
1133
1148
  export const bpSurfaceIllustrationSurfaceBoxNeutral = '#0061d5';
1134
1149
  export const bpSurfaceInlineNoticeSurfaceError = '#fdebee';
1135
1150
  export const bpSurfaceInlineNoticeSurfaceInfo = '#e9f2fe';
1151
+ export const bpSurfaceInlineNoticeSurfaceNote = '#ffffff';
1136
1152
  export const bpSurfaceInlineNoticeSurfaceSuccess = '#e9f8f2';
1137
1153
  export const bpSurfaceInlineNoticeSurfaceWarning = '#fffbe5';
1138
1154
  export const bpSurfaceInlineTableSurface = '#ffffff';
@@ -1186,10 +1202,10 @@ export const bpSurfaceRadioTileSurface = '#ffffff';
1186
1202
  export const bpSurfaceRadioTileSurfaceHover = '#f4f4f4';
1187
1203
  export const bpSurfaceRadioTileSurfaceSelected = '#f2f7fd';
1188
1204
  export const bpSurfaceScrollbarSurface = 'rgba(0, 0, 0, 0.5)';
1189
- export const bpSurfaceSearchSurface = '#f4f4f4';
1205
+ export const bpSurfaceSearchSurface = '#ffffff';
1190
1206
  export const bpSurfaceSearchSurfaceActive = '#ffffff';
1191
1207
  export const bpSurfaceSearchSurfaceComplete = '#f4f4f4';
1192
- export const bpSurfaceSearchSurfaceHover = '#fbfbfb';
1208
+ export const bpSurfaceSearchSurfaceHover = '#f4f4f4';
1193
1209
  export const bpSurfaceSelectSurface = '#ffffff';
1194
1210
  export const bpSurfaceSelectSurfaceReadOnly = '#fbfbfb';
1195
1211
  export const bpSurfaceSidePanelSurface = '#fbfbfb';
package/dist/tokens/tokens-css-vars.scss CHANGED
@@ -1398,6 +1398,7 @@
1398
1398
  --bp-border-filter-chip-border-multi-on-hover: var(--bp-box-blue-40);
1399
1399
  --bp-border-grid-thumbnail-border: var(--bp-gray-10);
1400
1400
  --bp-border-header-border: var(--bp-gray-10);
1401
+ --bp-border-inline-notice-border: var(--bp-black-opacity-08);
1401
1402
  --bp-border-inline-table-border: var(--bp-gray-10);
1402
1403
  --bp-border-input-border: var(--bp-gray-50);
1403
1404
  --bp-border-input-border-error: var(--bp-watermelon-red-100);
@@ -1437,8 +1438,8 @@
1437
1438
  --bp-border-search-global-border-hover: var(--bp-gray-10);
1438
1439
  --bp-border-search-input-border-focus: var(--bp-light-blue-100);
1439
1440
  --bp-border-search-input-border-hover: var(--bp-gray-65);
1440
- --bp-border-search-border: var(--bp-gray-05);
1441
- --bp-border-search-border-hover: var(--bp-gray-65);
1441
+ --bp-border-search-border: var(--bp-black-opacity-08);
1442
+ --bp-border-search-border-hover: var(--bp-black-opacity-12);
1442
1443
  --bp-border-select-border: var(--bp-gray-30);
1443
1444
  --bp-border-select-border-active: var(--bp-light-blue-100);
1444
1445
  --bp-border-select-border-error: var(--bp-watermelon-red-110);
@@ -1554,6 +1555,9 @@
1554
1555
  --bp-surface-content-switcher-surface: var(--bp-gray-10);
1555
1556
  --bp-surface-content-switcher-surface-hover: var(--bp-gray-05);
1556
1557
  --bp-surface-content-switcher-surface-selected: var(--bp-gray-white);
1558
+ --bp-surface-cta-destructive-surface-primary: var(--bp-watermelon-red-110);
1559
+ --bp-surface-cta-destructive-surface-primary-hover: var(--bp-watermelon-red-100);
1560
+ --bp-surface-cta-destructive-surface-primary-pressed: var(--bp-watermelon-red-120);
1557
1561
  --bp-surface-cta-destructive-surface-tertiary: var(--bp-watermelon-red-opacity-00);
1558
1562
  --bp-surface-cta-destructive-surface-tertiary-hover: var(--bp-watermelon-red-opacity-04);
1559
1563
  --bp-surface-cta-destructive-surface-tertiary-pressed: var(--bp-watermelon-red-opacity-12);
@@ -1571,9 +1575,9 @@
1571
1575
  --bp-surface-cta-surface-promo-focus-pressed: var(--bp-grimace-120);
1572
1576
  --bp-surface-cta-surface-promo-hover: var(--bp-grimace-100);
1573
1577
  --bp-surface-cta-surface-promo-pressed: var(--bp-grimace-120);
1574
- --bp-surface-cta-surface-secondary: var(--bp-white-opacity-90);
1575
- --bp-surface-cta-surface-secondary-hover: var(--bp-white-opacity-60);
1576
- --bp-surface-cta-surface-secondary-pressed: var(--bp-white-opacity-30);
1578
+ --bp-surface-cta-surface-secondary: var(--bp-gray-white);
1579
+ --bp-surface-cta-surface-secondary-hover: var(--bp-gray-05);
1580
+ --bp-surface-cta-surface-secondary-pressed: var(--bp-gray-10);
1577
1581
  --bp-surface-cta-surface-tertiary: var(--bp-black-opacity-00);
1578
1582
  --bp-surface-cta-surface-tertiary-hover: var(--bp-black-opacity-04);
1579
1583
  --bp-surface-cta-surface-tertiary-pressed: var(--bp-black-opacity-08);
@@ -1621,10 +1625,22 @@
1621
1625
  --bp-surface-icon-button-surface: var(--bp-black-opacity-00);
1622
1626
  --bp-surface-icon-button-surface-hover: var(--bp-black-opacity-04);
1623
1627
  --bp-surface-icon-button-surface-pressed: var(--bp-black-opacity-08);
1628
+ --bp-surface-icon-tile-surface-boxblue: var(--bp-box-blue-100);
1629
+ --bp-surface-icon-tile-surface-darkblue: var(--bp-dark-blue-100);
1630
+ --bp-surface-icon-tile-surface-gray: var(--bp-gray-100);
1631
+ --bp-surface-icon-tile-surface-greenlight: var(--bp-green-light-110);
1632
+ --bp-surface-icon-tile-surface-grimace: var(--bp-grimace-100);
1633
+ --bp-surface-icon-tile-surface-lightblue: var(--bp-light-blue-100);
1634
+ --bp-surface-icon-tile-surface-orange: var(--bp-orange-110);
1635
+ --bp-surface-icon-tile-surface-purplerain: var(--bp-purple-rain-110);
1636
+ --bp-surface-icon-tile-surface-watermelonred: var(--bp-watermelon-red-110);
1637
+ --bp-surface-icon-tile-surface-white: var(--bp-gray-white);
1638
+ --bp-surface-icon-tile-surface-yellorange: var(--bp-yellorange-110);
1624
1639
  --bp-surface-illustration-surface-box: var(--bp-box-blue-100);
1625
1640
  --bp-surface-illustration-surface-box-neutral: var(--bp-box-blue-100);
1626
1641
  --bp-surface-inline-notice-surface-error: var(--bp-watermelon-red-10);
1627
1642
  --bp-surface-inline-notice-surface-info: var(--bp-light-blue-10);
1643
+ --bp-surface-inline-notice-surface-note: var(--bp-gray-white);
1628
1644
  --bp-surface-inline-notice-surface-success: var(--bp-green-light-10);
1629
1645
  --bp-surface-inline-notice-surface-warning: var(--bp-yellow-10);
1630
1646
  --bp-surface-inline-table-surface: var(--bp-gray-white);
@@ -1683,10 +1699,10 @@
1683
1699
  --bp-surface-radio-tile-surface-hover: var(--bp-gray-05);
1684
1700
  --bp-surface-radio-tile-surface-selected: var(--bp-box-blue-05);
1685
1701
  --bp-surface-scrollbar-surface: var(--bp-black-opacity-50);
1686
- --bp-surface-search-surface: var(--bp-gray-05);
1702
+ --bp-surface-search-surface: var(--bp-gray-white);
1687
1703
  --bp-surface-search-surface-active: var(--bp-gray-white);
1688
1704
  --bp-surface-search-surface-complete: var(--bp-gray-05);
1689
- --bp-surface-search-surface-hover: var(--bp-gray-02);
1705
+ --bp-surface-search-surface-hover: var(--bp-gray-05);
1690
1706
  --bp-surface-select-surface: var(--bp-gray-white);
1691
1707
  --bp-surface-select-surface-read-only: var(--bp-gray-02);
1692
1708
  --bp-surface-side-panel-surface: var(--bp-gray-02);
package/dist/tokens/tokens.d.ts CHANGED
@@ -857,6 +857,7 @@ export const bpBorderFilterChipBorderMultiOn: string;
857
857
  export const bpBorderFilterChipBorderMultiOnHover: string;
858
858
  export const bpBorderGridThumbnailBorder: string;
859
859
  export const bpBorderHeaderBorder: string;
860
+ export const bpBorderInlineNoticeBorder: string;
860
861
  export const bpBorderInlineTableBorder: string;
861
862
  export const bpBorderInputBorder: string;
862
863
  export const bpBorderInputBorderError: string;
@@ -1041,6 +1042,9 @@ export const bpSurfaceComboboxSurface: string;
1041
1042
  export const bpSurfaceContentSwitcherSurface: string;
1042
1043
  export const bpSurfaceContentSwitcherSurfaceHover: string;
1043
1044
  export const bpSurfaceContentSwitcherSurfaceSelected: string;
1045
+ export const bpSurfaceCtaDestructiveSurfacePrimary: string;
1046
+ export const bpSurfaceCtaDestructiveSurfacePrimaryHover: string;
1047
+ export const bpSurfaceCtaDestructiveSurfacePrimaryPressed: string;
1044
1048
  export const bpSurfaceCtaDestructiveSurfaceTertiary: string;
1045
1049
  export const bpSurfaceCtaDestructiveSurfaceTertiaryHover: string;
1046
1050
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed: string;
@@ -1109,10 +1113,22 @@ export const bpSurfaceGhostSurfaceSecondary: string;
1109
1113
  export const bpSurfaceIconButtonSurface: string;
1110
1114
  export const bpSurfaceIconButtonSurfaceHover: string;
1111
1115
  export const bpSurfaceIconButtonSurfacePressed: string;
1116
+ export const bpSurfaceIconTileSurfaceBoxblue: string;
1117
+ export const bpSurfaceIconTileSurfaceDarkblue: string;
1118
+ export const bpSurfaceIconTileSurfaceGray: string;
1119
+ export const bpSurfaceIconTileSurfaceGreenlight: string;
1120
+ export const bpSurfaceIconTileSurfaceGrimace: string;
1121
+ export const bpSurfaceIconTileSurfaceLightblue: string;
1122
+ export const bpSurfaceIconTileSurfaceOrange: string;
1123
+ export const bpSurfaceIconTileSurfacePurplerain: string;
1124
+ export const bpSurfaceIconTileSurfaceWatermelonred: string;
1125
+ export const bpSurfaceIconTileSurfaceWhite: string;
1126
+ export const bpSurfaceIconTileSurfaceYellorange: string;
1112
1127
  export const bpSurfaceIllustrationSurfaceBox: string;
1113
1128
  export const bpSurfaceIllustrationSurfaceBoxNeutral: string;
1114
1129
  export const bpSurfaceInlineNoticeSurfaceError: string;
1115
1130
  export const bpSurfaceInlineNoticeSurfaceInfo: string;
1131
+ export const bpSurfaceInlineNoticeSurfaceNote: string;
1116
1132
  export const bpSurfaceInlineNoticeSurfaceSuccess: string;
1117
1133
  export const bpSurfaceInlineNoticeSurfaceWarning: string;
1118
1134
  export const bpSurfaceInlineTableSurface: string;
package/dist/tokens/tokens.js CHANGED
@@ -875,6 +875,7 @@ export const bpBorderFilterChipBorderMultiOn = '#99c0ee';
875
875
  export const bpBorderFilterChipBorderMultiOnHover = '#99c0ee';
876
876
  export const bpBorderGridThumbnailBorder = '#e8e8e8';
877
877
  export const bpBorderHeaderBorder = '#e8e8e8';
878
+ export const bpBorderInlineNoticeBorder = 'rgba(0, 0, 0, 0.08)';
878
879
  export const bpBorderInlineTableBorder = '#e8e8e8';
879
880
  export const bpBorderInputBorder = '#909090';
880
881
  export const bpBorderInputBorderError = '#ed3757';
@@ -914,8 +915,8 @@ export const bpBorderResizeBorderHover = '#bcbcbc';
914
915
  export const bpBorderSearchGlobalBorderHover = '#e8e8e8';
915
916
  export const bpBorderSearchInputBorderFocus = '#2486fc';
916
917
  export const bpBorderSearchInputBorderHover = '#6f6f6f';
917
- export const bpBorderSearchBorder = '#f4f4f4';
918
- export const bpBorderSearchBorderHover = '#6f6f6f';
918
+ export const bpBorderSearchBorder = 'rgba(0, 0, 0, 0.08)';
919
+ export const bpBorderSearchBorderHover = 'rgba(0, 0, 0, 0.12)';
919
920
  export const bpBorderSelectBorder = '#bcbcbc';
920
921
  export const bpBorderSelectBorderActive = '#2486fc';
921
922
  export const bpBorderSelectBorderError = '#d5324e';
@@ -1059,6 +1060,9 @@ export const bpSurfaceComboboxSurface = '#ffffff';
1059
1060
  export const bpSurfaceContentSwitcherSurface = '#e8e8e8';
1060
1061
  export const bpSurfaceContentSwitcherSurfaceHover = '#f4f4f4';
1061
1062
  export const bpSurfaceContentSwitcherSurfaceSelected = '#ffffff';
1063
+ export const bpSurfaceCtaDestructiveSurfacePrimary = '#d5324e';
1064
+ export const bpSurfaceCtaDestructiveSurfacePrimaryHover = '#ed3757';
1065
+ export const bpSurfaceCtaDestructiveSurfacePrimaryPressed = '#be2c46';
1062
1066
  export const bpSurfaceCtaDestructiveSurfaceTertiary = 'rgba(237, 55, 87, 0)';
1063
1067
  export const bpSurfaceCtaSurfaceIcon = 'rgba(0, 0, 0, 0)';
1064
1068
  export const bpSurfaceCtaSurfaceIconHover = 'rgba(0, 0, 0, 0.04)';
@@ -1074,9 +1078,9 @@ export const bpSurfaceCtaSurfacePromoFocus = '#4826c2';
1074
1078
  export const bpSurfaceCtaSurfacePromoFocusPressed = '#3a1e9b';
1075
1079
  export const bpSurfaceCtaSurfacePromoHover = '#4826c2';
1076
1080
  export const bpSurfaceCtaSurfacePromoPressed = '#3a1e9b';
1077
- export const bpSurfaceCtaSurfaceSecondary = 'rgba(255, 255, 255, 0.9)';
1078
- export const bpSurfaceCtaSurfaceSecondaryHover = 'rgba(255, 255, 255, 0.6)';
1079
- export const bpSurfaceCtaSurfaceSecondaryPressed = 'rgba(255, 255, 255, 0.3)';
1081
+ export const bpSurfaceCtaSurfaceSecondary = '#ffffff';
1082
+ export const bpSurfaceCtaSurfaceSecondaryHover = '#f4f4f4';
1083
+ export const bpSurfaceCtaSurfaceSecondaryPressed = '#e8e8e8';
1080
1084
  export const bpSurfaceCtaSurfaceTertiary = 'rgba(0, 0, 0, 0)';
1081
1085
  export const bpSurfaceCtaSurfaceTertiaryHover = 'rgba(0, 0, 0, 0.04)';
1082
1086
  export const bpSurfaceCtaSurfaceTertiaryPressed = 'rgba(0, 0, 0, 0.08)';
@@ -1125,10 +1129,22 @@ export const bpSurfaceGhostSurfaceSecondary = 'rgba(0, 0, 0, 0.04)';
1125
1129
  export const bpSurfaceIconButtonSurface = 'rgba(0, 0, 0, 0)';
1126
1130
  export const bpSurfaceIconButtonSurfaceHover = 'rgba(0, 0, 0, 0.04)';
1127
1131
  export const bpSurfaceIconButtonSurfacePressed = 'rgba(0, 0, 0, 0.08)';
1132
+ export const bpSurfaceIconTileSurfaceBoxblue = '#0061d5';
1133
+ export const bpSurfaceIconTileSurfaceDarkblue = '#003c84';
1134
+ export const bpSurfaceIconTileSurfaceGray = '#222222';
1135
+ export const bpSurfaceIconTileSurfaceGreenlight = '#22af74';
1136
+ export const bpSurfaceIconTileSurfaceGrimace = '#4826c2';
1137
+ export const bpSurfaceIconTileSurfaceLightblue = '#2486fc';
1138
+ export const bpSurfaceIconTileSurfaceOrange = '#d97417';
1139
+ export const bpSurfaceIconTileSurfacePurplerain = '#8f39d5';
1140
+ export const bpSurfaceIconTileSurfaceWatermelonred = '#d5324e';
1141
+ export const bpSurfaceIconTileSurfaceWhite = '#ffffff';
1142
+ export const bpSurfaceIconTileSurfaceYellorange = '#dca118';
1128
1143
  export const bpSurfaceIllustrationSurfaceBox = '#0061d5';
1129
1144
  export const bpSurfaceIllustrationSurfaceBoxNeutral = '#0061d5';
1130
1145
  export const bpSurfaceInlineNoticeSurfaceError = '#fdebee';
1131
1146
  export const bpSurfaceInlineNoticeSurfaceInfo = '#e9f2fe';
1147
+ export const bpSurfaceInlineNoticeSurfaceNote = '#ffffff';
1132
1148
  export const bpSurfaceInlineNoticeSurfaceSuccess = '#e9f8f2';
1133
1149
  export const bpSurfaceInlineNoticeSurfaceWarning = '#fffbe5';
1134
1150
  export const bpSurfaceInlineTableSurface = '#ffffff';
@@ -1182,10 +1198,10 @@ export const bpSurfaceRadioTileSurface = '#ffffff';
1182
1198
  export const bpSurfaceRadioTileSurfaceHover = '#f4f4f4';
1183
1199
  export const bpSurfaceRadioTileSurfaceSelected = '#f2f7fd';
1184
1200
  export const bpSurfaceScrollbarSurface = 'rgba(0, 0, 0, 0.5)';
1185
- export const bpSurfaceSearchSurface = '#f4f4f4';
1201
+ export const bpSurfaceSearchSurface = '#ffffff';
1186
1202
  export const bpSurfaceSearchSurfaceActive = '#ffffff';
1187
1203
  export const bpSurfaceSearchSurfaceComplete = '#f4f4f4';
1188
- export const bpSurfaceSearchSurfaceHover = '#fbfbfb';
1204
+ export const bpSurfaceSearchSurfaceHover = '#f4f4f4';
1189
1205
  export const bpSurfaceSelectSurface = '#ffffff';
1190
1206
  export const bpSurfaceSelectSurfaceReadOnly = '#fbfbfb';
1191
1207
  export const bpSurfaceSidePanelSurface = '#fbfbfb';
package/dist/tokens/tokens.json CHANGED
@@ -856,6 +856,7 @@
856
856
  "BpBorderFilterChipBorderMultiOnHover": "#99c0ee",
857
857
  "BpBorderGridThumbnailBorder": "#e8e8e8",
858
858
  "BpBorderHeaderBorder": "#e8e8e8",
859
+ "BpBorderInlineNoticeBorder": "rgba(0, 0, 0, 0.08)",
859
860
  "BpBorderInlineTableBorder": "#e8e8e8",
860
861
  "BpBorderInputBorder": "#909090",
861
862
  "BpBorderInputBorderError": "#ed3757",
@@ -895,8 +896,8 @@
895
896
  "BpBorderSearchGlobalBorderHover": "#e8e8e8",
896
897
  "BpBorderSearchInputBorderFocus": "#2486fc",
897
898
  "BpBorderSearchInputBorderHover": "#6f6f6f",
898
- "BpBorderSearchBorder": "#f4f4f4",
899
- "BpBorderSearchBorderHover": "#6f6f6f",
899
+ "BpBorderSearchBorder": "rgba(0, 0, 0, 0.08)",
900
+ "BpBorderSearchBorderHover": "rgba(0, 0, 0, 0.12)",
900
901
  "BpBorderSelectBorder": "#bcbcbc",
901
902
  "BpBorderSelectBorderActive": "#2486fc",
902
903
  "BpBorderSelectBorderError": "#d5324e",
@@ -1040,6 +1041,9 @@
1040
1041
  "BpSurfaceContentSwitcherSurface": "#e8e8e8",
1041
1042
  "BpSurfaceContentSwitcherSurfaceHover": "#f4f4f4",
1042
1043
  "BpSurfaceContentSwitcherSurfaceSelected": "#ffffff",
1044
+ "BpSurfaceCtaDestructiveSurfacePrimary": "#d5324e",
1045
+ "BpSurfaceCtaDestructiveSurfacePrimaryHover": "#ed3757",
1046
+ "BpSurfaceCtaDestructiveSurfacePrimaryPressed": "#be2c46",
1043
1047
  "BpSurfaceCtaDestructiveSurfaceTertiary": "rgba(237, 55, 87, 0)",
1044
1048
  "BpSurfaceCtaDestructiveSurfaceTertiaryHover": "rgba(237, 55, 87, 0.04)",
1045
1049
  "BpSurfaceCtaDestructiveSurfaceTertiaryPressed": "rgba(237, 55, 87, 0.12)",
@@ -1057,9 +1061,9 @@
1057
1061
  "BpSurfaceCtaSurfacePromoFocusPressed": "#3a1e9b",
1058
1062
  "BpSurfaceCtaSurfacePromoHover": "#4826c2",
1059
1063
  "BpSurfaceCtaSurfacePromoPressed": "#3a1e9b",
1060
- "BpSurfaceCtaSurfaceSecondary": "rgba(255, 255, 255, 0.9)",
1061
- "BpSurfaceCtaSurfaceSecondaryHover": "rgba(255, 255, 255, 0.6)",
1062
- "BpSurfaceCtaSurfaceSecondaryPressed": "rgba(255, 255, 255, 0.3)",
1064
+ "BpSurfaceCtaSurfaceSecondary": "#ffffff",
1065
+ "BpSurfaceCtaSurfaceSecondaryHover": "#f4f4f4",
1066
+ "BpSurfaceCtaSurfaceSecondaryPressed": "#e8e8e8",
1063
1067
  "BpSurfaceCtaSurfaceTertiary": "rgba(0, 0, 0, 0)",
1064
1068
  "BpSurfaceCtaSurfaceTertiaryHover": "rgba(0, 0, 0, 0.04)",
1065
1069
  "BpSurfaceCtaSurfaceTertiaryPressed": "rgba(0, 0, 0, 0.08)",
@@ -1108,10 +1112,22 @@
1108
1112
  "BpSurfaceIconButtonSurface": "rgba(0, 0, 0, 0)",
1109
1113
  "BpSurfaceIconButtonSurfaceHover": "rgba(0, 0, 0, 0.04)",
1110
1114
  "BpSurfaceIconButtonSurfacePressed": "rgba(0, 0, 0, 0.08)",
1115
+ "BpSurfaceIconTileSurfaceBoxblue": "#0061d5",
1116
+ "BpSurfaceIconTileSurfaceDarkblue": "#003c84",
1117
+ "BpSurfaceIconTileSurfaceGray": "#222222",
1118
+ "BpSurfaceIconTileSurfaceGreenlight": "#22af74",
1119
+ "BpSurfaceIconTileSurfaceGrimace": "#4826c2",
1120
+ "BpSurfaceIconTileSurfaceLightblue": "#2486fc",
1121
+ "BpSurfaceIconTileSurfaceOrange": "#d97417",
1122
+ "BpSurfaceIconTileSurfacePurplerain": "#8f39d5",
1123
+ "BpSurfaceIconTileSurfaceWatermelonred": "#d5324e",
1124
+ "BpSurfaceIconTileSurfaceWhite": "#ffffff",
1125
+ "BpSurfaceIconTileSurfaceYellorange": "#dca118",
1111
1126
  "BpSurfaceIllustrationSurfaceBox": "#0061d5",
1112
1127
  "BpSurfaceIllustrationSurfaceBoxNeutral": "#0061d5",
1113
1128
  "BpSurfaceInlineNoticeSurfaceError": "#fdebee",
1114
1129
  "BpSurfaceInlineNoticeSurfaceInfo": "#e9f2fe",
1130
+ "BpSurfaceInlineNoticeSurfaceNote": "#ffffff",
1115
1131
  "BpSurfaceInlineNoticeSurfaceSuccess": "#e9f8f2",
1116
1132
  "BpSurfaceInlineNoticeSurfaceWarning": "#fffbe5",
1117
1133
  "BpSurfaceInlineTableSurface": "#ffffff",
@@ -1170,10 +1186,10 @@
1170
1186
  "BpSurfaceRadioTileSurfaceHover": "#f4f4f4",
1171
1187
  "BpSurfaceRadioTileSurfaceSelected": "#f2f7fd",
1172
1188
  "BpSurfaceScrollbarSurface": "rgba(0, 0, 0, 0.5)",
1173
- "BpSurfaceSearchSurface": "#f4f4f4",
1189
+ "BpSurfaceSearchSurface": "#ffffff",
1174
1190
  "BpSurfaceSearchSurfaceActive": "#ffffff",
1175
1191
  "BpSurfaceSearchSurfaceComplete": "#f4f4f4",
1176
- "BpSurfaceSearchSurfaceHover": "#fbfbfb",
1192
+ "BpSurfaceSearchSurfaceHover": "#f4f4f4",
1177
1193
  "BpSurfaceSelectSurface": "#ffffff",
1178
1194
  "BpSurfaceSelectSurfaceReadOnly": "#fbfbfb",
1179
1195
  "BpSurfaceSidePanelSurface": "#fbfbfb",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web-assets",
3
- "version": "4.87.0",
3
+ "version": "4.88.0",
4
4
  "license": "SEE LICENSE IN LICENSE",
5
5
  "scripts": {
6
6
  "build-local-all": "yarn nx clone-repo && yarn build-local && nx run blueprint-web-assets:format-lint",
@@ -139,7 +139,7 @@
139
139
  }
140
140
  },
141
141
  "devDependencies": {
142
- "@box/storybook-utils": "^0.14.27",
142
+ "@box/storybook-utils": "^0.14.28",
143
143
  "@types/react": "^18.0.0",
144
144
  "@types/react-dom": "^18.0.0",
145
145
  "chalk": "4.1.2",