@box/blueprint-web-assets 4.88.4 → 4.89.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 +6 -0
  2. package/dist/tokens/BP2/dark_mode_value/px-tokens.js +6 -0
  3. package/dist/tokens/BP2/dark_mode_value/tokens.css +6 -0
  4. package/dist/tokens/BP2/dark_mode_value/tokens.d.ts +6 -0
  5. package/dist/tokens/BP2/dark_mode_value/tokens.js +6 -0
  6. package/dist/tokens/BP2/dark_mode_value/tokens.json +6 -0
  7. package/dist/tokens/BP2/light_mode_value/px-tokens.d.ts +6 -0
  8. package/dist/tokens/BP2/light_mode_value/px-tokens.js +10 -4
  9. package/dist/tokens/BP2/light_mode_value/tokens.css +10 -4
  10. package/dist/tokens/BP2/light_mode_value/tokens.d.ts +6 -0
  11. package/dist/tokens/BP2/light_mode_value/tokens.js +10 -4
  12. package/dist/tokens/BP2/light_mode_value/tokens.json +10 -4
  13. package/dist/tokens/px-tokens.d.ts +6 -0
  14. package/dist/tokens/px-tokens.js +10 -4
  15. package/dist/tokens/tokens-css-vars.scss +10 -4
  16. package/dist/tokens/tokens.d.ts +6 -0
  17. package/dist/tokens/tokens.js +10 -4
  18. package/dist/tokens/tokens.json +10 -4
  19. package/package.json +2 -2
package/dist/tokens/BP2/dark_mode_value/px-tokens.d.ts CHANGED
@@ -122,6 +122,9 @@ export const bpIconCtaIconHighContrast: string;
122
122
  export const bpIconCtaIconHighContrastHover: string;
123
123
  export const bpIconCtaIconHighContrastPressed: string;
124
124
  export const bpIconCtaIconHover: string;
125
+ export const bpIconCtaIconOnDark: string;
126
+ export const bpIconCtaIconOnDarkHover: string;
127
+ export const bpIconCtaIconOnDarkPressed: string;
125
128
  export const bpIconCtaIconPressed: string;
126
129
  export const bpIconCtaIconUtility: string;
127
130
  export const bpIconCtaIconUtilityHover: string;
@@ -231,6 +234,9 @@ export const bpSurfaceCtaDestructiveSurfaceTertiaryHover: string;
231
234
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed: string;
232
235
  export const bpSurfaceCtaSurfaceIcon: string;
233
236
  export const bpSurfaceCtaSurfaceIconHover: string;
237
+ export const bpSurfaceCtaSurfaceIconOnDark: string;
238
+ export const bpSurfaceCtaSurfaceIconOnDarkHover: string;
239
+ export const bpSurfaceCtaSurfaceIconOnDarkPressed: string;
234
240
  export const bpSurfaceCtaSurfaceIconPressed: string;
235
241
  export const bpSurfaceCtaSurfaceIconUtility: string;
236
242
  export const bpSurfaceCtaSurfaceIconUtilityHover: string;
package/dist/tokens/BP2/dark_mode_value/px-tokens.js CHANGED
@@ -122,6 +122,9 @@ export const bpIconCtaIconHighContrast = 'rgba(0, 0, 0, 0.9)';
122
122
  export const bpIconCtaIconHighContrastHover = 'rgba(0, 0, 0, 0.9)';
123
123
  export const bpIconCtaIconHighContrastPressed = 'rgba(0, 0, 0, 0.9)';
124
124
  export const bpIconCtaIconHover = 'rgba(0, 0, 0, 0.9)';
125
+ export const bpIconCtaIconOnDark = 'rgba(255, 255, 255, 0.8)';
126
+ export const bpIconCtaIconOnDarkHover = '#ffffff';
127
+ export const bpIconCtaIconOnDarkPressed = '#ffffff';
125
128
  export const bpIconCtaIconPressed = '#222222';
126
129
  export const bpIconCtaIconUtility = '#4e4e4e';
127
130
  export const bpIconCtaIconUtilityHover = '#000000';
@@ -231,6 +234,9 @@ export const bpSurfaceCtaDestructiveSurfaceTertiaryHover = 'rgba(237, 55, 87, 0.
231
234
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed = 'rgba(237, 55, 87, 0.12)';
232
235
  export const bpSurfaceCtaSurfaceIcon = 'rgba(0, 0, 0, 0)';
233
236
  export const bpSurfaceCtaSurfaceIconHover = 'rgba(0, 0, 0, 0.04)';
237
+ export const bpSurfaceCtaSurfaceIconOnDark = 'rgba(255, 255, 255, 0)';
238
+ export const bpSurfaceCtaSurfaceIconOnDarkHover = 'rgba(255, 255, 255, 0.08)';
239
+ export const bpSurfaceCtaSurfaceIconOnDarkPressed = 'rgba(255, 255, 255, 0.12)';
234
240
  export const bpSurfaceCtaSurfaceIconPressed = 'rgba(0, 0, 0, 0.08)';
235
241
  export const bpSurfaceCtaSurfaceIconUtility = '#e8e8e8';
236
242
  export const bpSurfaceCtaSurfaceIconUtilityHover = '#d3d3d3';
package/dist/tokens/BP2/dark_mode_value/tokens.css CHANGED
@@ -685,6 +685,9 @@
685
685
  --bp-icon-cta-icon-high-contrast-hover: var(--bp-black-opacity-90);
686
686
  --bp-icon-cta-icon-high-contrast-pressed: var(--bp-black-opacity-90);
687
687
  --bp-icon-cta-icon-hover: var(--bp-black-opacity-90);
688
+ --bp-icon-cta-icon-on-dark: var(--bp-white-opacity-80);
689
+ --bp-icon-cta-icon-on-dark-hover: var(--bp-gray-white);
690
+ --bp-icon-cta-icon-on-dark-pressed: var(--bp-gray-white);
688
691
  --bp-icon-cta-icon-utility: var(--bp-gray-80);
689
692
  --bp-icon-cta-icon-utility-hover: var(--bp-gray-black);
690
693
  --bp-icon-cta-icon-utility-pressed: var(--bp-gray-black);
@@ -774,6 +777,9 @@
774
777
  --bp-surface-cta-destructive-surface-tertiary-pressed: var(--bp-watermelon-red-opacity-12);
775
778
  --bp-surface-cta-surface-icon: var(--bp-black-opacity-00);
776
779
  --bp-surface-cta-surface-icon-hover: var(--bp-black-opacity-04);
780
+ --bp-surface-cta-surface-icon-on-dark: var(--bp-white-opacity-00);
781
+ --bp-surface-cta-surface-icon-on-dark-hover: var(--bp-white-opacity-08);
782
+ --bp-surface-cta-surface-icon-on-dark-pressed: var(--bp-white-opacity-12);
777
783
  --bp-surface-cta-surface-icon-pressed: var(--bp-black-opacity-08);
778
784
  --bp-surface-cta-surface-icon-utility: var(--bp-gray-10);
779
785
  --bp-surface-cta-surface-icon-utility-hover: var(--bp-gray-20);
package/dist/tokens/BP2/dark_mode_value/tokens.d.ts CHANGED
@@ -118,6 +118,9 @@ export const bpIconCtaIconHighContrast: string;
118
118
  export const bpIconCtaIconHighContrastHover: string;
119
119
  export const bpIconCtaIconHighContrastPressed: string;
120
120
  export const bpIconCtaIconHover: string;
121
+ export const bpIconCtaIconOnDark: string;
122
+ export const bpIconCtaIconOnDarkHover: string;
123
+ export const bpIconCtaIconOnDarkPressed: string;
121
124
  export const bpIconCtaIconPressed: string;
122
125
  export const bpIconCtaIconUtility: string;
123
126
  export const bpIconCtaIconUtilityHover: string;
@@ -227,6 +230,9 @@ export const bpSurfaceCtaDestructiveSurfaceTertiaryHover: string;
227
230
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed: string;
228
231
  export const bpSurfaceCtaSurfaceIcon: string;
229
232
  export const bpSurfaceCtaSurfaceIconHover: string;
233
+ export const bpSurfaceCtaSurfaceIconOnDark: string;
234
+ export const bpSurfaceCtaSurfaceIconOnDarkHover: string;
235
+ export const bpSurfaceCtaSurfaceIconOnDarkPressed: string;
230
236
  export const bpSurfaceCtaSurfaceIconPressed: string;
231
237
  export const bpSurfaceCtaSurfaceIconUtility: string;
232
238
  export const bpSurfaceCtaSurfaceIconUtilityHover: string;
package/dist/tokens/BP2/dark_mode_value/tokens.js CHANGED
@@ -118,6 +118,9 @@ export const bpIconCtaIconHighContrast = 'rgba(0, 0, 0, 0.9)';
118
118
  export const bpIconCtaIconHighContrastHover = 'rgba(0, 0, 0, 0.9)';
119
119
  export const bpIconCtaIconHighContrastPressed = 'rgba(0, 0, 0, 0.9)';
120
120
  export const bpIconCtaIconHover = 'rgba(0, 0, 0, 0.9)';
121
+ export const bpIconCtaIconOnDark = 'rgba(255, 255, 255, 0.8)';
122
+ export const bpIconCtaIconOnDarkHover = '#ffffff';
123
+ export const bpIconCtaIconOnDarkPressed = '#ffffff';
121
124
  export const bpIconCtaIconPressed = '#222222';
122
125
  export const bpIconCtaIconUtility = '#4e4e4e';
123
126
  export const bpIconCtaIconUtilityHover = '#000000';
@@ -227,6 +230,9 @@ export const bpSurfaceCtaDestructiveSurfaceTertiaryHover = 'rgba(237, 55, 87, 0.
227
230
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed = 'rgba(237, 55, 87, 0.12)';
228
231
  export const bpSurfaceCtaSurfaceIcon = 'rgba(0, 0, 0, 0)';
229
232
  export const bpSurfaceCtaSurfaceIconHover = 'rgba(0, 0, 0, 0.04)';
233
+ export const bpSurfaceCtaSurfaceIconOnDark = 'rgba(255, 255, 255, 0)';
234
+ export const bpSurfaceCtaSurfaceIconOnDarkHover = 'rgba(255, 255, 255, 0.08)';
235
+ export const bpSurfaceCtaSurfaceIconOnDarkPressed = 'rgba(255, 255, 255, 0.12)';
230
236
  export const bpSurfaceCtaSurfaceIconPressed = 'rgba(0, 0, 0, 0.08)';
231
237
  export const bpSurfaceCtaSurfaceIconUtility = '#e8e8e8';
232
238
  export const bpSurfaceCtaSurfaceIconUtilityHover = '#d3d3d3';
package/dist/tokens/BP2/dark_mode_value/tokens.json CHANGED
@@ -119,6 +119,9 @@
119
119
  "BpIconCtaIconHighContrastHover": "rgba(0, 0, 0, 0.9)",
120
120
  "BpIconCtaIconHighContrastPressed": "rgba(0, 0, 0, 0.9)",
121
121
  "BpIconCtaIconHover": "rgba(0, 0, 0, 0.9)",
122
+ "BpIconCtaIconOnDark": "rgba(255, 255, 255, 0.8)",
123
+ "BpIconCtaIconOnDarkHover": "#ffffff",
124
+ "BpIconCtaIconOnDarkPressed": "#ffffff",
122
125
  "BpIconCtaIconPressed": "#222222",
123
126
  "BpIconCtaIconUtility": "#4e4e4e",
124
127
  "BpIconCtaIconUtilityHover": "#000000",
@@ -228,6 +231,9 @@
228
231
  "BpSurfaceCtaDestructiveSurfaceTertiaryPressed": "rgba(237, 55, 87, 0.12)",
229
232
  "BpSurfaceCtaSurfaceIcon": "rgba(0, 0, 0, 0)",
230
233
  "BpSurfaceCtaSurfaceIconHover": "rgba(0, 0, 0, 0.04)",
234
+ "BpSurfaceCtaSurfaceIconOnDark": "rgba(255, 255, 255, 0)",
235
+ "BpSurfaceCtaSurfaceIconOnDarkHover": "rgba(255, 255, 255, 0.08)",
236
+ "BpSurfaceCtaSurfaceIconOnDarkPressed": "rgba(255, 255, 255, 0.12)",
231
237
  "BpSurfaceCtaSurfaceIconPressed": "rgba(0, 0, 0, 0.08)",
232
238
  "BpSurfaceCtaSurfaceIconUtility": "#e8e8e8",
233
239
  "BpSurfaceCtaSurfaceIconUtilityHover": "#d3d3d3",
package/dist/tokens/BP2/light_mode_value/px-tokens.d.ts CHANGED
@@ -123,6 +123,9 @@ export const bpIconCtaIconHighContrast: string;
123
123
  export const bpIconCtaIconHighContrastHover: string;
124
124
  export const bpIconCtaIconHighContrastPressed: string;
125
125
  export const bpIconCtaIconHover: string;
126
+ export const bpIconCtaIconOnDark: string;
127
+ export const bpIconCtaIconOnDarkHover: string;
128
+ export const bpIconCtaIconOnDarkPressed: string;
126
129
  export const bpIconCtaIconPressed: string;
127
130
  export const bpIconCtaIconUtility: string;
128
131
  export const bpIconCtaIconUtilityHover: string;
@@ -232,6 +235,9 @@ export const bpSurfaceCtaDestructiveSurfaceTertiaryHover: string;
232
235
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed: string;
233
236
  export const bpSurfaceCtaSurfaceIcon: string;
234
237
  export const bpSurfaceCtaSurfaceIconHover: string;
238
+ export const bpSurfaceCtaSurfaceIconOnDark: string;
239
+ export const bpSurfaceCtaSurfaceIconOnDarkHover: string;
240
+ export const bpSurfaceCtaSurfaceIconOnDarkPressed: string;
235
241
  export const bpSurfaceCtaSurfaceIconPressed: string;
236
242
  export const bpSurfaceCtaSurfaceIconUtility: string;
237
243
  export const bpSurfaceCtaSurfaceIconUtilityHover: string;
package/dist/tokens/BP2/light_mode_value/px-tokens.js CHANGED
@@ -20,7 +20,7 @@ export const bpBorderComboboxBorderHover = '#6f6f6f';
20
20
  export const bpBorderContentSwitcherBorder = '#909090';
21
21
  export const bpBorderCtaBorderHighContrast = 'rgba(0, 0, 0, 0.9)';
22
22
  export const bpBorderCtaBorderOutlineDisabled = '#646464';
23
- export const bpBorderCtaBorderSecondary = 'rgba(0, 0, 0, 0.08)';
23
+ export const bpBorderCtaBorderSecondary = 'rgba(0, 0, 0, 0.12)';
24
24
  export const bpBorderDatePickerDayBorderFocus = '#2486fc';
25
25
  export const bpBorderDatePickerDayBorderSelectedFocus = '#2486fc';
26
26
  export const bpBorderDatePickerBorderActive = '#2486fc';
@@ -123,6 +123,9 @@ export const bpIconCtaIconHighContrast = 'rgba(0, 0, 0, 0.9)';
123
123
  export const bpIconCtaIconHighContrastHover = 'rgba(0, 0, 0, 0.9)';
124
124
  export const bpIconCtaIconHighContrastPressed = 'rgba(0, 0, 0, 0.9)';
125
125
  export const bpIconCtaIconHover = 'rgba(0, 0, 0, 0.9)';
126
+ export const bpIconCtaIconOnDark = 'rgba(255, 255, 255, 0.8)';
127
+ export const bpIconCtaIconOnDarkHover = '#ffffff';
128
+ export const bpIconCtaIconOnDarkPressed = '#ffffff';
126
129
  export const bpIconCtaIconPressed = 'rgba(0, 0, 0, 0.9)';
127
130
  export const bpIconCtaIconUtility = '#4e4e4e';
128
131
  export const bpIconCtaIconUtilityHover = '#000000';
@@ -208,7 +211,7 @@ export const bpSurfaceBadgeSurfaceVideo = '#009aed';
208
211
  export const bpSurfaceBadgeSurfaceWord = '#185abd';
209
212
  export const bpSurfaceBadgeSurfaceZip = '#6f6f6f';
210
213
  export const bpSurfaceCalendarSurface = '#ffffff';
211
- export const bpSurfaceCardSurface = 'rgba(255, 255, 255, 0.9)';
214
+ export const bpSurfaceCardSurface = '#ffffff';
212
215
  export const bpSurfaceCardSurfaceFocus = '#f2f7fd';
213
216
  export const bpSurfaceCardSurfaceHover = '#ffffff';
214
217
  export const bpSurfaceCardSurfacePressed = '#fbfbfb';
@@ -232,6 +235,9 @@ export const bpSurfaceCtaDestructiveSurfaceTertiaryHover = 'rgba(237, 55, 87, 0.
232
235
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed = 'rgba(237, 55, 87, 0.12)';
233
236
  export const bpSurfaceCtaSurfaceIcon = 'rgba(0, 0, 0, 0)';
234
237
  export const bpSurfaceCtaSurfaceIconHover = 'rgba(0, 0, 0, 0.04)';
238
+ export const bpSurfaceCtaSurfaceIconOnDark = 'rgba(255, 255, 255, 0)';
239
+ export const bpSurfaceCtaSurfaceIconOnDarkHover = 'rgba(255, 255, 255, 0.08)';
240
+ export const bpSurfaceCtaSurfaceIconOnDarkPressed = 'rgba(255, 255, 255, 0.12)';
235
241
  export const bpSurfaceCtaSurfaceIconPressed = 'rgba(0, 0, 0, 0.08)';
236
242
  export const bpSurfaceCtaSurfaceIconUtility = '#e8e8e8';
237
243
  export const bpSurfaceCtaSurfaceIconUtilityHover = '#d3d3d3';
@@ -345,8 +351,8 @@ export const bpSurfaceLoadingIndicatorSurfaceOnLightSecondary = 'rgba(0, 0, 0, 0
345
351
  export const bpSurfaceLoadingIndicatorSurfaceOnLightTertiary = 'rgba(0, 0, 0, 0.3)';
346
352
  export const bpSurfaceLoadingIndicatorSurfaceSecondary = 'rgba(0, 97, 213, 0.7)';
347
353
  export const bpSurfaceLoadingIndicatorSurfaceTertiary = 'rgba(0, 97, 213, 0.3)';
348
- export const bpSurfaceMenuSurfaceDropdown = 'rgba(255, 255, 255, 0.9)';
349
- export const bpSurfaceMenuSurfaceFullscreen = 'rgba(255, 255, 255, 0.9)';
354
+ export const bpSurfaceMenuSurfaceDropdown = '#ffffff';
355
+ export const bpSurfaceMenuSurfaceFullscreen = '#ffffff';
350
356
  export const bpSurfaceMenuItemSurface = 'rgba(255, 255, 255, 0)';
351
357
  export const bpSurfaceMenuItemSurfaceHover = 'rgba(0, 0, 0, 0.04)';
352
358
  export const bpSurfaceMenuItemSurfaceLoading = 'rgba(255, 255, 255, 0)';
package/dist/tokens/BP2/light_mode_value/tokens.css CHANGED
@@ -592,7 +592,7 @@
592
592
  --bp-border-combobox-border-hover: var(--bp-gray-65);
593
593
  --bp-border-content-switcher-border: var(--bp-gray-50);
594
594
  --bp-border-cta-border-high-contrast: var(--bp-black-opacity-90);
595
- --bp-border-cta-border-secondary: var(--bp-black-opacity-08);
595
+ --bp-border-cta-border-secondary: var(--bp-black-opacity-12);
596
596
  --bp-border-date-picker-day-border-focus: var(--bp-light-blue-100);
597
597
  --bp-border-date-picker-day-border-selected-focus: var(--bp-light-blue-100);
598
598
  --bp-border-date-picker-border-active: var(--bp-light-blue-100);
@@ -685,6 +685,9 @@
685
685
  --bp-icon-cta-icon-high-contrast-hover: var(--bp-black-opacity-90);
686
686
  --bp-icon-cta-icon-high-contrast-pressed: var(--bp-black-opacity-90);
687
687
  --bp-icon-cta-icon-hover: var(--bp-black-opacity-90);
688
+ --bp-icon-cta-icon-on-dark: var(--bp-white-opacity-80);
689
+ --bp-icon-cta-icon-on-dark-hover: var(--bp-gray-white);
690
+ --bp-icon-cta-icon-on-dark-pressed: var(--bp-gray-white);
688
691
  --bp-icon-cta-icon-pressed: var(--bp-black-opacity-90);
689
692
  --bp-icon-cta-icon-utility: var(--bp-gray-80);
690
693
  --bp-icon-cta-icon-utility-hover: var(--bp-gray-black);
@@ -751,7 +754,7 @@
751
754
  --bp-surface-badge-surface-vector: var(--bp-orange-110);
752
755
  --bp-surface-badge-surface-zip: var(--bp-gray-65);
753
756
  --bp-surface-calendar-surface: var(--bp-gray-white);
754
- --bp-surface-card-surface: var(--bp-white-opacity-90);
757
+ --bp-surface-card-surface: var(--bp-gray-white);
755
758
  --bp-surface-card-surface-focus: var(--bp-box-blue-05);
756
759
  --bp-surface-card-surface-hover: var(--bp-gray-white);
757
760
  --bp-surface-card-surface-pressed: var(--bp-gray-02);
@@ -775,6 +778,9 @@
775
778
  --bp-surface-cta-destructive-surface-tertiary-pressed: var(--bp-watermelon-red-opacity-12);
776
779
  --bp-surface-cta-surface-icon: var(--bp-black-opacity-00);
777
780
  --bp-surface-cta-surface-icon-hover: var(--bp-black-opacity-04);
781
+ --bp-surface-cta-surface-icon-on-dark: var(--bp-white-opacity-00);
782
+ --bp-surface-cta-surface-icon-on-dark-hover: var(--bp-white-opacity-08);
783
+ --bp-surface-cta-surface-icon-on-dark-pressed: var(--bp-white-opacity-12);
778
784
  --bp-surface-cta-surface-icon-pressed: var(--bp-black-opacity-08);
779
785
  --bp-surface-cta-surface-icon-utility: var(--bp-gray-10);
780
786
  --bp-surface-cta-surface-icon-utility-hover: var(--bp-gray-20);
@@ -887,8 +893,8 @@
887
893
  --bp-surface-loading-indicator-surface-on-light-tertiary: var(--bp-black-opacity-30);
888
894
  --bp-surface-loading-indicator-surface-secondary: var(--bp-box-blue-opacity-70);
889
895
  --bp-surface-loading-indicator-surface-tertiary: var(--bp-box-blue-opacity-30);
890
- --bp-surface-menu-surface-dropdown: var(--bp-white-opacity-90);
891
- --bp-surface-menu-surface-fullscreen: var(--bp-white-opacity-90);
896
+ --bp-surface-menu-surface-dropdown: var(--bp-gray-white);
897
+ --bp-surface-menu-surface-fullscreen: var(--bp-gray-white);
892
898
  --bp-surface-menu-item-surface: var(--bp-white-opacity-00);
893
899
  --bp-surface-menu-item-surface-hover: var(--bp-black-opacity-04);
894
900
  --bp-surface-menu-item-surface-loading: var(--bp-white-opacity-00);
package/dist/tokens/BP2/light_mode_value/tokens.d.ts CHANGED
@@ -119,6 +119,9 @@ export const bpIconCtaIconHighContrast: string;
119
119
  export const bpIconCtaIconHighContrastHover: string;
120
120
  export const bpIconCtaIconHighContrastPressed: string;
121
121
  export const bpIconCtaIconHover: string;
122
+ export const bpIconCtaIconOnDark: string;
123
+ export const bpIconCtaIconOnDarkHover: string;
124
+ export const bpIconCtaIconOnDarkPressed: string;
122
125
  export const bpIconCtaIconPressed: string;
123
126
  export const bpIconCtaIconUtility: string;
124
127
  export const bpIconCtaIconUtilityHover: string;
@@ -228,6 +231,9 @@ export const bpSurfaceCtaDestructiveSurfaceTertiaryHover: string;
228
231
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed: string;
229
232
  export const bpSurfaceCtaSurfaceIcon: string;
230
233
  export const bpSurfaceCtaSurfaceIconHover: string;
234
+ export const bpSurfaceCtaSurfaceIconOnDark: string;
235
+ export const bpSurfaceCtaSurfaceIconOnDarkHover: string;
236
+ export const bpSurfaceCtaSurfaceIconOnDarkPressed: string;
231
237
  export const bpSurfaceCtaSurfaceIconPressed: string;
232
238
  export const bpSurfaceCtaSurfaceIconUtility: string;
233
239
  export const bpSurfaceCtaSurfaceIconUtilityHover: string;
package/dist/tokens/BP2/light_mode_value/tokens.js CHANGED
@@ -16,7 +16,7 @@ export const bpBorderComboboxBorderHover = '#6f6f6f';
16
16
  export const bpBorderContentSwitcherBorder = '#909090';
17
17
  export const bpBorderCtaBorderHighContrast = 'rgba(0, 0, 0, 0.9)';
18
18
  export const bpBorderCtaBorderOutlineDisabled = '#646464';
19
- export const bpBorderCtaBorderSecondary = 'rgba(0, 0, 0, 0.08)';
19
+ export const bpBorderCtaBorderSecondary = 'rgba(0, 0, 0, 0.12)';
20
20
  export const bpBorderDatePickerDayBorderFocus = '#2486fc';
21
21
  export const bpBorderDatePickerDayBorderSelectedFocus = '#2486fc';
22
22
  export const bpBorderDatePickerBorderActive = '#2486fc';
@@ -119,6 +119,9 @@ export const bpIconCtaIconHighContrast = 'rgba(0, 0, 0, 0.9)';
119
119
  export const bpIconCtaIconHighContrastHover = 'rgba(0, 0, 0, 0.9)';
120
120
  export const bpIconCtaIconHighContrastPressed = 'rgba(0, 0, 0, 0.9)';
121
121
  export const bpIconCtaIconHover = 'rgba(0, 0, 0, 0.9)';
122
+ export const bpIconCtaIconOnDark = 'rgba(255, 255, 255, 0.8)';
123
+ export const bpIconCtaIconOnDarkHover = '#ffffff';
124
+ export const bpIconCtaIconOnDarkPressed = '#ffffff';
122
125
  export const bpIconCtaIconPressed = 'rgba(0, 0, 0, 0.9)';
123
126
  export const bpIconCtaIconUtility = '#4e4e4e';
124
127
  export const bpIconCtaIconUtilityHover = '#000000';
@@ -204,7 +207,7 @@ export const bpSurfaceBadgeSurfaceVideo = '#009aed';
204
207
  export const bpSurfaceBadgeSurfaceWord = '#185abd';
205
208
  export const bpSurfaceBadgeSurfaceZip = '#6f6f6f';
206
209
  export const bpSurfaceCalendarSurface = '#ffffff';
207
- export const bpSurfaceCardSurface = 'rgba(255, 255, 255, 0.9)';
210
+ export const bpSurfaceCardSurface = '#ffffff';
208
211
  export const bpSurfaceCardSurfaceFocus = '#f2f7fd';
209
212
  export const bpSurfaceCardSurfaceHover = '#ffffff';
210
213
  export const bpSurfaceCardSurfacePressed = '#fbfbfb';
@@ -228,6 +231,9 @@ export const bpSurfaceCtaDestructiveSurfaceTertiaryHover = 'rgba(237, 55, 87, 0.
228
231
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed = 'rgba(237, 55, 87, 0.12)';
229
232
  export const bpSurfaceCtaSurfaceIcon = 'rgba(0, 0, 0, 0)';
230
233
  export const bpSurfaceCtaSurfaceIconHover = 'rgba(0, 0, 0, 0.04)';
234
+ export const bpSurfaceCtaSurfaceIconOnDark = 'rgba(255, 255, 255, 0)';
235
+ export const bpSurfaceCtaSurfaceIconOnDarkHover = 'rgba(255, 255, 255, 0.08)';
236
+ export const bpSurfaceCtaSurfaceIconOnDarkPressed = 'rgba(255, 255, 255, 0.12)';
231
237
  export const bpSurfaceCtaSurfaceIconPressed = 'rgba(0, 0, 0, 0.08)';
232
238
  export const bpSurfaceCtaSurfaceIconUtility = '#e8e8e8';
233
239
  export const bpSurfaceCtaSurfaceIconUtilityHover = '#d3d3d3';
@@ -341,8 +347,8 @@ export const bpSurfaceLoadingIndicatorSurfaceOnLightSecondary = 'rgba(0, 0, 0, 0
341
347
  export const bpSurfaceLoadingIndicatorSurfaceOnLightTertiary = 'rgba(0, 0, 0, 0.3)';
342
348
  export const bpSurfaceLoadingIndicatorSurfaceSecondary = 'rgba(0, 97, 213, 0.7)';
343
349
  export const bpSurfaceLoadingIndicatorSurfaceTertiary = 'rgba(0, 97, 213, 0.3)';
344
- export const bpSurfaceMenuSurfaceDropdown = 'rgba(255, 255, 255, 0.9)';
345
- export const bpSurfaceMenuSurfaceFullscreen = 'rgba(255, 255, 255, 0.9)';
350
+ export const bpSurfaceMenuSurfaceDropdown = '#ffffff';
351
+ export const bpSurfaceMenuSurfaceFullscreen = '#ffffff';
346
352
  export const bpSurfaceMenuItemSurface = 'rgba(255, 255, 255, 0)';
347
353
  export const bpSurfaceMenuItemSurfaceHover = 'rgba(0, 0, 0, 0.04)';
348
354
  export const bpSurfaceMenuItemSurfaceLoading = 'rgba(255, 255, 255, 0)';
package/dist/tokens/BP2/light_mode_value/tokens.json CHANGED
@@ -17,7 +17,7 @@
17
17
  "BpBorderContentSwitcherBorder": "#909090",
18
18
  "BpBorderCtaBorderHighContrast": "rgba(0, 0, 0, 0.9)",
19
19
  "BpBorderCtaBorderOutlineDisabled": "#646464",
20
- "BpBorderCtaBorderSecondary": "rgba(0, 0, 0, 0.08)",
20
+ "BpBorderCtaBorderSecondary": "rgba(0, 0, 0, 0.12)",
21
21
  "BpBorderDatePickerDayBorderFocus": "#2486fc",
22
22
  "BpBorderDatePickerDayBorderSelectedFocus": "#2486fc",
23
23
  "BpBorderDatePickerBorderActive": "#2486fc",
@@ -120,6 +120,9 @@
120
120
  "BpIconCtaIconHighContrastHover": "rgba(0, 0, 0, 0.9)",
121
121
  "BpIconCtaIconHighContrastPressed": "rgba(0, 0, 0, 0.9)",
122
122
  "BpIconCtaIconHover": "rgba(0, 0, 0, 0.9)",
123
+ "BpIconCtaIconOnDark": "rgba(255, 255, 255, 0.8)",
124
+ "BpIconCtaIconOnDarkHover": "#ffffff",
125
+ "BpIconCtaIconOnDarkPressed": "#ffffff",
123
126
  "BpIconCtaIconPressed": "rgba(0, 0, 0, 0.9)",
124
127
  "BpIconCtaIconUtility": "#4e4e4e",
125
128
  "BpIconCtaIconUtilityHover": "#000000",
@@ -205,7 +208,7 @@
205
208
  "BpSurfaceBadgeSurfaceWord": "#185abd",
206
209
  "BpSurfaceBadgeSurfaceZip": "#6f6f6f",
207
210
  "BpSurfaceCalendarSurface": "#ffffff",
208
- "BpSurfaceCardSurface": "rgba(255, 255, 255, 0.9)",
211
+ "BpSurfaceCardSurface": "#ffffff",
209
212
  "BpSurfaceCardSurfaceFocus": "#f2f7fd",
210
213
  "BpSurfaceCardSurfaceHover": "#ffffff",
211
214
  "BpSurfaceCardSurfacePressed": "#fbfbfb",
@@ -229,6 +232,9 @@
229
232
  "BpSurfaceCtaDestructiveSurfaceTertiaryPressed": "rgba(237, 55, 87, 0.12)",
230
233
  "BpSurfaceCtaSurfaceIcon": "rgba(0, 0, 0, 0)",
231
234
  "BpSurfaceCtaSurfaceIconHover": "rgba(0, 0, 0, 0.04)",
235
+ "BpSurfaceCtaSurfaceIconOnDark": "rgba(255, 255, 255, 0)",
236
+ "BpSurfaceCtaSurfaceIconOnDarkHover": "rgba(255, 255, 255, 0.08)",
237
+ "BpSurfaceCtaSurfaceIconOnDarkPressed": "rgba(255, 255, 255, 0.12)",
232
238
  "BpSurfaceCtaSurfaceIconPressed": "rgba(0, 0, 0, 0.08)",
233
239
  "BpSurfaceCtaSurfaceIconUtility": "#e8e8e8",
234
240
  "BpSurfaceCtaSurfaceIconUtilityHover": "#d3d3d3",
@@ -342,8 +348,8 @@
342
348
  "BpSurfaceLoadingIndicatorSurfaceOnLightTertiary": "rgba(0, 0, 0, 0.3)",
343
349
  "BpSurfaceLoadingIndicatorSurfaceSecondary": "rgba(0, 97, 213, 0.7)",
344
350
  "BpSurfaceLoadingIndicatorSurfaceTertiary": "rgba(0, 97, 213, 0.3)",
345
- "BpSurfaceMenuSurfaceDropdown": "rgba(255, 255, 255, 0.9)",
346
- "BpSurfaceMenuSurfaceFullscreen": "rgba(255, 255, 255, 0.9)",
351
+ "BpSurfaceMenuSurfaceDropdown": "#ffffff",
352
+ "BpSurfaceMenuSurfaceFullscreen": "#ffffff",
347
353
  "BpSurfaceMenuItemSurface": "rgba(255, 255, 255, 0)",
348
354
  "BpSurfaceMenuItemSurfaceHover": "rgba(0, 0, 0, 0.04)",
349
355
  "BpSurfaceMenuItemSurfaceLoading": "rgba(255, 255, 255, 0)",
package/dist/tokens/px-tokens.d.ts CHANGED
@@ -945,6 +945,9 @@ export const bpIconCtaIconHighContrast: string;
945
945
  export const bpIconCtaIconHighContrastHover: string;
946
946
  export const bpIconCtaIconHighContrastPressed: string;
947
947
  export const bpIconCtaIconHover: string;
948
+ export const bpIconCtaIconOnDark: string;
949
+ export const bpIconCtaIconOnDarkHover: string;
950
+ export const bpIconCtaIconOnDarkPressed: string;
948
951
  export const bpIconCtaIconPressed: string;
949
952
  export const bpIconCtaIconUtility: string;
950
953
  export const bpIconCtaIconUtilityHover: string;
@@ -1054,6 +1057,9 @@ export const bpSurfaceCtaDestructiveSurfaceTertiaryHover: string;
1054
1057
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed: string;
1055
1058
  export const bpSurfaceCtaSurfaceIcon: string;
1056
1059
  export const bpSurfaceCtaSurfaceIconHover: string;
1060
+ export const bpSurfaceCtaSurfaceIconOnDark: string;
1061
+ export const bpSurfaceCtaSurfaceIconOnDarkHover: string;
1062
+ export const bpSurfaceCtaSurfaceIconOnDarkPressed: string;
1057
1063
  export const bpSurfaceCtaSurfaceIconPressed: string;
1058
1064
  export const bpSurfaceCtaSurfaceIconUtility: string;
1059
1065
  export const bpSurfaceCtaSurfaceIconUtilityHover: string;
package/dist/tokens/px-tokens.js CHANGED
@@ -860,7 +860,7 @@ export const bpBorderComboboxBorderHover = '#6f6f6f';
860
860
  export const bpBorderContentSwitcherBorder = '#909090';
861
861
  export const bpBorderCtaBorderHighContrast = 'rgba(0, 0, 0, 0.9)';
862
862
  export const bpBorderCtaBorderOutlineDisabled = '#646464';
863
- export const bpBorderCtaBorderSecondary = 'rgba(0, 0, 0, 0.08)';
863
+ export const bpBorderCtaBorderSecondary = 'rgba(0, 0, 0, 0.12)';
864
864
  export const bpBorderDatePickerDayBorderFocus = '#2486fc';
865
865
  export const bpBorderDatePickerDayBorderSelectedFocus = '#2486fc';
866
866
  export const bpBorderDatePickerBorderActive = '#2486fc';
@@ -963,6 +963,9 @@ export const bpIconCtaIconHighContrast = 'rgba(0, 0, 0, 0.9)';
963
963
  export const bpIconCtaIconHighContrastHover = 'rgba(0, 0, 0, 0.9)';
964
964
  export const bpIconCtaIconHighContrastPressed = 'rgba(0, 0, 0, 0.9)';
965
965
  export const bpIconCtaIconHover = 'rgba(0, 0, 0, 0.9)';
966
+ export const bpIconCtaIconOnDark = 'rgba(255, 255, 255, 0.8)';
967
+ export const bpIconCtaIconOnDarkHover = '#ffffff';
968
+ export const bpIconCtaIconOnDarkPressed = '#ffffff';
966
969
  export const bpIconCtaIconPressed = 'rgba(0, 0, 0, 0.9)';
967
970
  export const bpIconCtaIconUtility = '#4e4e4e';
968
971
  export const bpIconCtaIconUtilityHover = '#000000';
@@ -1048,7 +1051,7 @@ export const bpSurfaceBadgeSurfaceVideo = '#009aed';
1048
1051
  export const bpSurfaceBadgeSurfaceWord = '#185abd';
1049
1052
  export const bpSurfaceBadgeSurfaceZip = '#6f6f6f';
1050
1053
  export const bpSurfaceCalendarSurface = '#ffffff';
1051
- export const bpSurfaceCardSurface = 'rgba(255, 255, 255, 0.9)';
1054
+ export const bpSurfaceCardSurface = '#ffffff';
1052
1055
  export const bpSurfaceCardSurfaceFocus = '#f2f7fd';
1053
1056
  export const bpSurfaceCardSurfaceHover = '#ffffff';
1054
1057
  export const bpSurfaceCardSurfacePressed = '#fbfbfb';
@@ -1070,6 +1073,9 @@ export const bpSurfaceCtaDestructiveSurfacePrimaryPressed = '#be2c46';
1070
1073
  export const bpSurfaceCtaDestructiveSurfaceTertiary = 'rgba(237, 55, 87, 0)';
1071
1074
  export const bpSurfaceCtaSurfaceIcon = 'rgba(0, 0, 0, 0)';
1072
1075
  export const bpSurfaceCtaSurfaceIconHover = 'rgba(0, 0, 0, 0.04)';
1076
+ export const bpSurfaceCtaSurfaceIconOnDark = 'rgba(255, 255, 255, 0)';
1077
+ export const bpSurfaceCtaSurfaceIconOnDarkHover = 'rgba(255, 255, 255, 0.08)';
1078
+ export const bpSurfaceCtaSurfaceIconOnDarkPressed = 'rgba(255, 255, 255, 0.12)';
1073
1079
  export const bpSurfaceCtaSurfaceIconPressed = 'rgba(0, 0, 0, 0.08)';
1074
1080
  export const bpSurfaceCtaSurfaceIconUtility = '#e8e8e8';
1075
1081
  export const bpSurfaceCtaSurfaceIconUtilityHover = '#d3d3d3';
@@ -1178,8 +1184,8 @@ export const bpSurfaceLoadingIndicatorSurface = '#0061d5';
1178
1184
  export const bpSurfaceLoadingIndicatorSurfaceOnDark = '#ffffff';
1179
1185
  export const bpSurfaceLoadingIndicatorSurfaceOnLight = '#000000';
1180
1186
  export const bpSurfaceLoadingIndicatorSurfaceTertiary = 'rgba(0, 97, 213, 0.3)';
1181
- export const bpSurfaceMenuSurfaceDropdown = 'rgba(255, 255, 255, 0.9)';
1182
- export const bpSurfaceMenuSurfaceFullscreen = 'rgba(255, 255, 255, 0.9)';
1187
+ export const bpSurfaceMenuSurfaceDropdown = '#ffffff';
1188
+ export const bpSurfaceMenuSurfaceFullscreen = '#ffffff';
1183
1189
  export const bpSurfaceMenuItemSurface = 'rgba(255, 255, 255, 0)';
1184
1190
  export const bpSurfaceMenuItemSurfaceHover = 'rgba(0, 0, 0, 0.04)';
1185
1191
  export const bpSurfaceMenuItemSurfaceLoading = 'rgba(255, 255, 255, 0)';
package/dist/tokens/tokens-css-vars.scss CHANGED
@@ -1380,7 +1380,7 @@
1380
1380
  --bp-border-combobox-border-hover: var(--bp-gray-65);
1381
1381
  --bp-border-content-switcher-border: var(--bp-gray-50);
1382
1382
  --bp-border-cta-border-high-contrast: var(--bp-black-opacity-90);
1383
- --bp-border-cta-border-secondary: var(--bp-black-opacity-08);
1383
+ --bp-border-cta-border-secondary: var(--bp-black-opacity-12);
1384
1384
  --bp-border-date-picker-day-border-focus: var(--bp-light-blue-100);
1385
1385
  --bp-border-date-picker-day-border-selected-focus: var(--bp-light-blue-100);
1386
1386
  --bp-border-date-picker-border-active: var(--bp-light-blue-100);
@@ -1473,6 +1473,9 @@
1473
1473
  --bp-icon-cta-icon-high-contrast-hover: var(--bp-black-opacity-90);
1474
1474
  --bp-icon-cta-icon-high-contrast-pressed: var(--bp-black-opacity-90);
1475
1475
  --bp-icon-cta-icon-hover: var(--bp-black-opacity-90);
1476
+ --bp-icon-cta-icon-on-dark: var(--bp-white-opacity-80);
1477
+ --bp-icon-cta-icon-on-dark-hover: var(--bp-gray-white);
1478
+ --bp-icon-cta-icon-on-dark-pressed: var(--bp-gray-white);
1476
1479
  --bp-icon-cta-icon-pressed: var(--bp-black-opacity-90);
1477
1480
  --bp-icon-cta-icon-utility: var(--bp-gray-80);
1478
1481
  --bp-icon-cta-icon-utility-hover: var(--bp-gray-black);
@@ -1539,7 +1542,7 @@
1539
1542
  --bp-surface-badge-surface-vector: var(--bp-orange-110);
1540
1543
  --bp-surface-badge-surface-zip: var(--bp-gray-65);
1541
1544
  --bp-surface-calendar-surface: var(--bp-gray-white);
1542
- --bp-surface-card-surface: var(--bp-white-opacity-90);
1545
+ --bp-surface-card-surface: var(--bp-gray-white);
1543
1546
  --bp-surface-card-surface-focus: var(--bp-box-blue-05);
1544
1547
  --bp-surface-card-surface-hover: var(--bp-gray-white);
1545
1548
  --bp-surface-card-surface-pressed: var(--bp-gray-02);
@@ -1563,6 +1566,9 @@
1563
1566
  --bp-surface-cta-destructive-surface-tertiary-pressed: var(--bp-watermelon-red-opacity-12);
1564
1567
  --bp-surface-cta-surface-icon: var(--bp-black-opacity-00);
1565
1568
  --bp-surface-cta-surface-icon-hover: var(--bp-black-opacity-04);
1569
+ --bp-surface-cta-surface-icon-on-dark: var(--bp-white-opacity-00);
1570
+ --bp-surface-cta-surface-icon-on-dark-hover: var(--bp-white-opacity-08);
1571
+ --bp-surface-cta-surface-icon-on-dark-pressed: var(--bp-white-opacity-12);
1566
1572
  --bp-surface-cta-surface-icon-pressed: var(--bp-black-opacity-08);
1567
1573
  --bp-surface-cta-surface-icon-utility: var(--bp-gray-10);
1568
1574
  --bp-surface-cta-surface-icon-utility-hover: var(--bp-gray-20);
@@ -1675,8 +1681,8 @@
1675
1681
  --bp-surface-loading-indicator-surface-on-light-tertiary: var(--bp-black-opacity-30);
1676
1682
  --bp-surface-loading-indicator-surface-secondary: var(--bp-box-blue-opacity-70);
1677
1683
  --bp-surface-loading-indicator-surface-tertiary: var(--bp-box-blue-opacity-30);
1678
- --bp-surface-menu-surface-dropdown: var(--bp-white-opacity-90);
1679
- --bp-surface-menu-surface-fullscreen: var(--bp-white-opacity-90);
1684
+ --bp-surface-menu-surface-dropdown: var(--bp-gray-white);
1685
+ --bp-surface-menu-surface-fullscreen: var(--bp-gray-white);
1680
1686
  --bp-surface-menu-item-surface: var(--bp-white-opacity-00);
1681
1687
  --bp-surface-menu-item-surface-hover: var(--bp-black-opacity-04);
1682
1688
  --bp-surface-menu-item-surface-loading: var(--bp-white-opacity-00);
package/dist/tokens/tokens.d.ts CHANGED
@@ -941,6 +941,9 @@ export const bpIconCtaIconHighContrast: string;
941
941
  export const bpIconCtaIconHighContrastHover: string;
942
942
  export const bpIconCtaIconHighContrastPressed: string;
943
943
  export const bpIconCtaIconHover: string;
944
+ export const bpIconCtaIconOnDark: string;
945
+ export const bpIconCtaIconOnDarkHover: string;
946
+ export const bpIconCtaIconOnDarkPressed: string;
944
947
  export const bpIconCtaIconPressed: string;
945
948
  export const bpIconCtaIconUtility: string;
946
949
  export const bpIconCtaIconUtilityHover: string;
@@ -1050,6 +1053,9 @@ export const bpSurfaceCtaDestructiveSurfaceTertiaryHover: string;
1050
1053
  export const bpSurfaceCtaDestructiveSurfaceTertiaryPressed: string;
1051
1054
  export const bpSurfaceCtaSurfaceIcon: string;
1052
1055
  export const bpSurfaceCtaSurfaceIconHover: string;
1056
+ export const bpSurfaceCtaSurfaceIconOnDark: string;
1057
+ export const bpSurfaceCtaSurfaceIconOnDarkHover: string;
1058
+ export const bpSurfaceCtaSurfaceIconOnDarkPressed: string;
1053
1059
  export const bpSurfaceCtaSurfaceIconPressed: string;
1054
1060
  export const bpSurfaceCtaSurfaceIconUtility: string;
1055
1061
  export const bpSurfaceCtaSurfaceIconUtilityHover: string;
package/dist/tokens/tokens.js CHANGED
@@ -856,7 +856,7 @@ export const bpBorderComboboxBorderHover = '#6f6f6f';
856
856
  export const bpBorderContentSwitcherBorder = '#909090';
857
857
  export const bpBorderCtaBorderHighContrast = 'rgba(0, 0, 0, 0.9)';
858
858
  export const bpBorderCtaBorderOutlineDisabled = '#646464';
859
- export const bpBorderCtaBorderSecondary = 'rgba(0, 0, 0, 0.08)';
859
+ export const bpBorderCtaBorderSecondary = 'rgba(0, 0, 0, 0.12)';
860
860
  export const bpBorderDatePickerDayBorderFocus = '#2486fc';
861
861
  export const bpBorderDatePickerDayBorderSelectedFocus = '#2486fc';
862
862
  export const bpBorderDatePickerBorderActive = '#2486fc';
@@ -959,6 +959,9 @@ export const bpIconCtaIconHighContrast = 'rgba(0, 0, 0, 0.9)';
959
959
  export const bpIconCtaIconHighContrastHover = 'rgba(0, 0, 0, 0.9)';
960
960
  export const bpIconCtaIconHighContrastPressed = 'rgba(0, 0, 0, 0.9)';
961
961
  export const bpIconCtaIconHover = 'rgba(0, 0, 0, 0.9)';
962
+ export const bpIconCtaIconOnDark = 'rgba(255, 255, 255, 0.8)';
963
+ export const bpIconCtaIconOnDarkHover = '#ffffff';
964
+ export const bpIconCtaIconOnDarkPressed = '#ffffff';
962
965
  export const bpIconCtaIconPressed = 'rgba(0, 0, 0, 0.9)';
963
966
  export const bpIconCtaIconUtility = '#4e4e4e';
964
967
  export const bpIconCtaIconUtilityHover = '#000000';
@@ -1044,7 +1047,7 @@ export const bpSurfaceBadgeSurfaceVideo = '#009aed';
1044
1047
  export const bpSurfaceBadgeSurfaceWord = '#185abd';
1045
1048
  export const bpSurfaceBadgeSurfaceZip = '#6f6f6f';
1046
1049
  export const bpSurfaceCalendarSurface = '#ffffff';
1047
- export const bpSurfaceCardSurface = 'rgba(255, 255, 255, 0.9)';
1050
+ export const bpSurfaceCardSurface = '#ffffff';
1048
1051
  export const bpSurfaceCardSurfaceFocus = '#f2f7fd';
1049
1052
  export const bpSurfaceCardSurfaceHover = '#ffffff';
1050
1053
  export const bpSurfaceCardSurfacePressed = '#fbfbfb';
@@ -1066,6 +1069,9 @@ export const bpSurfaceCtaDestructiveSurfacePrimaryPressed = '#be2c46';
1066
1069
  export const bpSurfaceCtaDestructiveSurfaceTertiary = 'rgba(237, 55, 87, 0)';
1067
1070
  export const bpSurfaceCtaSurfaceIcon = 'rgba(0, 0, 0, 0)';
1068
1071
  export const bpSurfaceCtaSurfaceIconHover = 'rgba(0, 0, 0, 0.04)';
1072
+ export const bpSurfaceCtaSurfaceIconOnDark = 'rgba(255, 255, 255, 0)';
1073
+ export const bpSurfaceCtaSurfaceIconOnDarkHover = 'rgba(255, 255, 255, 0.08)';
1074
+ export const bpSurfaceCtaSurfaceIconOnDarkPressed = 'rgba(255, 255, 255, 0.12)';
1069
1075
  export const bpSurfaceCtaSurfaceIconPressed = 'rgba(0, 0, 0, 0.08)';
1070
1076
  export const bpSurfaceCtaSurfaceIconUtility = '#e8e8e8';
1071
1077
  export const bpSurfaceCtaSurfaceIconUtilityHover = '#d3d3d3';
@@ -1174,8 +1180,8 @@ export const bpSurfaceLoadingIndicatorSurface = '#0061d5';
1174
1180
  export const bpSurfaceLoadingIndicatorSurfaceOnDark = '#ffffff';
1175
1181
  export const bpSurfaceLoadingIndicatorSurfaceOnLight = '#000000';
1176
1182
  export const bpSurfaceLoadingIndicatorSurfaceTertiary = 'rgba(0, 97, 213, 0.3)';
1177
- export const bpSurfaceMenuSurfaceDropdown = 'rgba(255, 255, 255, 0.9)';
1178
- export const bpSurfaceMenuSurfaceFullscreen = 'rgba(255, 255, 255, 0.9)';
1183
+ export const bpSurfaceMenuSurfaceDropdown = '#ffffff';
1184
+ export const bpSurfaceMenuSurfaceFullscreen = '#ffffff';
1179
1185
  export const bpSurfaceMenuItemSurface = 'rgba(255, 255, 255, 0)';
1180
1186
  export const bpSurfaceMenuItemSurfaceHover = 'rgba(0, 0, 0, 0.04)';
1181
1187
  export const bpSurfaceMenuItemSurfaceLoading = 'rgba(255, 255, 255, 0)';
package/dist/tokens/tokens.json CHANGED
@@ -837,7 +837,7 @@
837
837
  "BpBorderContentSwitcherBorder": "#909090",
838
838
  "BpBorderCtaBorderHighContrast": "rgba(0, 0, 0, 0.9)",
839
839
  "BpBorderCtaBorderOutlineDisabled": "#646464",
840
- "BpBorderCtaBorderSecondary": "rgba(0, 0, 0, 0.08)",
840
+ "BpBorderCtaBorderSecondary": "rgba(0, 0, 0, 0.12)",
841
841
  "BpBorderDatePickerDayBorderFocus": "#2486fc",
842
842
  "BpBorderDatePickerDayBorderSelectedFocus": "#2486fc",
843
843
  "BpBorderDatePickerBorderActive": "#2486fc",
@@ -940,6 +940,9 @@
940
940
  "BpIconCtaIconHighContrastHover": "rgba(0, 0, 0, 0.9)",
941
941
  "BpIconCtaIconHighContrastPressed": "rgba(0, 0, 0, 0.9)",
942
942
  "BpIconCtaIconHover": "rgba(0, 0, 0, 0.9)",
943
+ "BpIconCtaIconOnDark": "rgba(255, 255, 255, 0.8)",
944
+ "BpIconCtaIconOnDarkHover": "#ffffff",
945
+ "BpIconCtaIconOnDarkPressed": "#ffffff",
943
946
  "BpIconCtaIconPressed": "rgba(0, 0, 0, 0.9)",
944
947
  "BpIconCtaIconUtility": "#4e4e4e",
945
948
  "BpIconCtaIconUtilityHover": "#000000",
@@ -1025,7 +1028,7 @@
1025
1028
  "BpSurfaceBadgeSurfaceWord": "#185abd",
1026
1029
  "BpSurfaceBadgeSurfaceZip": "#6f6f6f",
1027
1030
  "BpSurfaceCalendarSurface": "#ffffff",
1028
- "BpSurfaceCardSurface": "rgba(255, 255, 255, 0.9)",
1031
+ "BpSurfaceCardSurface": "#ffffff",
1029
1032
  "BpSurfaceCardSurfaceFocus": "#f2f7fd",
1030
1033
  "BpSurfaceCardSurfaceHover": "#ffffff",
1031
1034
  "BpSurfaceCardSurfacePressed": "#fbfbfb",
@@ -1049,6 +1052,9 @@
1049
1052
  "BpSurfaceCtaDestructiveSurfaceTertiaryPressed": "rgba(237, 55, 87, 0.12)",
1050
1053
  "BpSurfaceCtaSurfaceIcon": "rgba(0, 0, 0, 0)",
1051
1054
  "BpSurfaceCtaSurfaceIconHover": "rgba(0, 0, 0, 0.04)",
1055
+ "BpSurfaceCtaSurfaceIconOnDark": "rgba(255, 255, 255, 0)",
1056
+ "BpSurfaceCtaSurfaceIconOnDarkHover": "rgba(255, 255, 255, 0.08)",
1057
+ "BpSurfaceCtaSurfaceIconOnDarkPressed": "rgba(255, 255, 255, 0.12)",
1052
1058
  "BpSurfaceCtaSurfaceIconPressed": "rgba(0, 0, 0, 0.08)",
1053
1059
  "BpSurfaceCtaSurfaceIconUtility": "#e8e8e8",
1054
1060
  "BpSurfaceCtaSurfaceIconUtilityHover": "#d3d3d3",
@@ -1162,8 +1168,8 @@
1162
1168
  "BpSurfaceLoadingIndicatorSurfaceOnLightTertiary": "rgba(0, 0, 0, 0.3)",
1163
1169
  "BpSurfaceLoadingIndicatorSurfaceSecondary": "rgba(0, 97, 213, 0.7)",
1164
1170
  "BpSurfaceLoadingIndicatorSurfaceTertiary": "rgba(0, 97, 213, 0.3)",
1165
- "BpSurfaceMenuSurfaceDropdown": "rgba(255, 255, 255, 0.9)",
1166
- "BpSurfaceMenuSurfaceFullscreen": "rgba(255, 255, 255, 0.9)",
1171
+ "BpSurfaceMenuSurfaceDropdown": "#ffffff",
1172
+ "BpSurfaceMenuSurfaceFullscreen": "#ffffff",
1167
1173
  "BpSurfaceMenuItemSurface": "rgba(255, 255, 255, 0)",
1168
1174
  "BpSurfaceMenuItemSurfaceHover": "rgba(0, 0, 0, 0.04)",
1169
1175
  "BpSurfaceMenuItemSurfaceLoading": "rgba(255, 255, 255, 0)",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web-assets",
3
- "version": "4.88.4",
3
+ "version": "4.89.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.32",
142
+ "@box/storybook-utils": "^0.14.34",
143
143
  "@types/react": "^18.0.0",
144
144
  "@types/react-dom": "^18.0.0",
145
145
  "chalk": "4.1.2",