@box/blueprint-web-assets 4.67.13 → 4.68.1

package/dist/tokens/px-tokens.js

@@ -843,6 +843,7 @@ export const NotificationDefaultParagraphIndent = '0px';
 
 // Auto-appended/updated from px-tokens.js by append-figma-vars-to-js.js
 export const bpBackgroundBackground = '#ffffff';
+export const bpBorderAccordionBorderHover = '#e8e8e8';
 export const bpBorderAvatarBorderHover = 'rgba(0, 0, 0, 0.04)';
 export const bpBorderAvatarBorderPressed = 'rgba(0, 0, 0, 0.08)';
 export const bpBorderBadgeBorder = '#ffffff';
@@ -856,8 +857,7 @@ export const bpBorderCheckboxBorderSelectedHover = '#2079e3';
 export const bpBorderCollapsibleSectionBorder = '#d3d3d3';
 export const bpBorderComboboxBorder = '#909090';
 export const bpBorderComboboxBorderHover = '#6f6f6f';
-export const bpBorderContentButtonBorderHoverActive = '#909090';
-export const bpBorderContentButtonBorderSelected = '#909090';
+export const bpBorderContentSwitcherBorder = '#909090';
 export const bpBorderCtaBorderHighContrast = 'rgba(0, 0, 0, 0.9)';
 export const bpBorderCtaBorderOutlineDisabled = '#646464';
 export const bpBorderCtaBorderSecondary = 'rgba(0, 0, 0, 0.08)';
@@ -870,15 +870,11 @@ export const bpBorderDatePickerBorderDisabled = '#909090';
 export const bpBorderDatePickerBorderError = '#ed3757';
 export const bpBorderDatePickerBorderFocus = '#2486fc';
 export const bpBorderDatePickerBorderHover = '#6f6f6f';
-export const bpBorderDividerBorder = 'rgba(0, 0, 0, 0.04)';
+export const bpBorderDividerBorder = 'rgba(0, 0, 0, 0.08)';
 export const bpBorderDividerBorderBrand = 'rgba(232, 232, 232, 0.1)';
-export const bpBorderDropdownSecondaryBorder = '#bcbcbc';
-export const bpBorderDropdownBorder = '#bcbcbc';
+export const bpBorderDropdownSecondaryBorder = 'rgba(0, 0, 0, 0.08)';
+export const bpBorderDropdownBorder = 'rgba(0, 0, 0, 0.08)';
 export const bpBorderDropdownBorderError = '#ed3757';
-export const bpBorderDropdownBorderErrorFocus = '#ed3757';
-export const bpBorderDropdownBorderErrorHover = '#ed3757';
-export const bpBorderDropdownBorderFocus = '#0061d5';
-export const bpBorderDropdownBorderHover = '#6f6f6f';
 export const bpBorderFilterChipBorderMultiOn = '#99c0ee';
 export const bpBorderFilterChipBorderMultiOnHover = '#99c0ee';
 export const bpBorderGridThumbnailBorder = '#e8e8e8';
@@ -890,6 +886,7 @@ export const bpBorderInputBorderErrorFocus = '#ed3757';
 export const bpBorderInputBorderErrorHover = '#ed3757';
 export const bpBorderInputBorderFocus = '#2486fc';
 export const bpBorderInputBorderHover = '#6f6f6f';
+export const bpBorderInputBorderReadOnly = '#d3d3d3';
 export const bpBorderInputChipBorderError = '#ed3757';
 export const bpBorderInputChipBorderShadow = 'rgba(0, 0, 0, 0.04)';
 export const bpBorderItemSmallBorderSelected = '#0061d5';
@@ -951,7 +948,6 @@ export const bpBorderToggleTextBorderOnPressed = '#99c0ee';
 export const bpBorderToolbarBorder = '#e8e8e8';
 export const bpBorderTooltipBorder = 'rgba(255, 255, 255, 0.16)';
 export const bpBorderTooltipBorderError = '#f69bab';
-export const bpBorderBorderAccordionHover = '#e8e8e8';
 export const bpBorder00 = '0px';
 export const bpBorder01 = '1px';
 export const bpBorder02 = '2px';
@@ -1064,12 +1060,9 @@ export const bpSurfaceChipButtonSurface = 'rgba(0, 0, 0, 0.04)';
 export const bpSurfaceChipButtonSurfaceHover = 'rgba(0, 0, 0, 0.08)';
 export const bpSurfaceCollapsibleSectionSurface = '#ffffff';
 export const bpSurfaceComboboxSurface = '#ffffff';
-export const bpSurfaceContentButtonSurfaceFocusDefault = '#ffffff';
-export const bpSurfaceContentButtonSurfaceFocusSelected = '#ffffff';
-export const bpSurfaceContentButtonSurfaceHoverDefault = '#f4f4f4';
-export const bpSurfaceContentButtonSurfaceHoverSelected = '#f4f4f4';
-export const bpSurfaceContentButtonSurfaceSelected = '#ffffff';
 export const bpSurfaceContentSwitcherSurface = '#e8e8e8';
+export const bpSurfaceContentSwitcherSurfaceHover = '#f4f4f4';
+export const bpSurfaceContentSwitcherSurfaceSelected = '#ffffff';
 export const bpSurfaceCtaDestructiveSurfaceTertiary = 'rgba(237, 55, 87, 0)';
 export const bpSurfaceCtaSurfaceIcon = 'rgba(0, 0, 0, 0)';
 export const bpSurfaceCtaSurfaceIconHover = 'rgba(0, 0, 0, 0.04)';
@@ -1085,7 +1078,7 @@ export const bpSurfaceCtaSurfacePromoFocus = '#4826c2';
 export const bpSurfaceCtaSurfacePromoFocusPressed = '#3a1e9b';
 export const bpSurfaceCtaSurfacePromoHover = '#4826c2';
 export const bpSurfaceCtaSurfacePromoPressed = '#3a1e9b';
-export const bpSurfaceCtaSurfaceSecondary = 'rgba(255, 255, 255, 0.7)';
+export const bpSurfaceCtaSurfaceSecondary = 'rgba(255, 255, 255, 0.9)';
 export const bpSurfaceCtaSurfaceSecondaryHover = 'rgba(0, 0, 0, 0.04)';
 export const bpSurfaceCtaSurfaceSecondaryPressed = 'rgba(0, 0, 0, 0.08)';
 export const bpSurfaceCtaSurfaceTertiary = 'rgba(0, 0, 0, 0)';
@@ -1111,19 +1104,13 @@ export const bpSurfaceDatePickerSurfaceDisabled = '#ffffff';
 export const bpSurfaceDatePickerSurfaceError = '#ffffff';
 export const bpSurfaceDatePickerSurfaceFocus = '#ffffff';
 export const bpSurfaceDatePickerSurfaceHover = '#ffffff';
-export const bpSurfaceDropdownPrimarySurfaceHover = '#f4f4f4';
-export const bpSurfaceDropdownPrimarySurfacePressed = '#e8e8e8';
-export const bpSurfaceDropdownSecondarySurface = '#ffffff';
-export const bpSurfaceDropdownSecondarySurfaceHover = '#f4f4f4';
-export const bpSurfaceDropdownSecondarySurfacePressed = '#e8e8e8';
-export const bpSurfaceDropdownTertiarySurfaceHover = '#f4f4f4';
-export const bpSurfaceDropdownTertiarySurfacePressed = '#e8e8e8';
-export const bpSurfaceDropdownSurface = '#ffffff';
-export const bpSurfaceDropdownSurfaceError = '#ffffff';
-export const bpSurfaceDropdownSurfaceErrorFocus = '#ffffff';
-export const bpSurfaceDropdownSurfaceErrorHover = '#ffffff';
-export const bpSurfaceDropdownSurfaceFocus = '#ffffff';
-export const bpSurfaceDropdownSurfaceHover = '#ffffff';
+export const bpSurfaceDropdownSecondarySurface = 'rgba(255, 255, 255, 0.7)';
+export const bpSurfaceDropdownSecondarySurfaceHover = 'rgba(0, 0, 0, 0.04)';
+export const bpSurfaceDropdownSecondarySurfacePressed = 'rgba(0, 0, 0, 0.08)';
+export const bpSurfaceDropdownTertiarySurfaceHover = 'rgba(0, 0, 0, 0.04)';
+export const bpSurfaceDropdownTertiarySurfacePressed = 'rgba(0, 0, 0, 0.08)';
+export const bpSurfaceDropdownSurface = 'rgba(255, 255, 255, 0.7)';
+export const bpSurfaceDropdownSurfaceHover = 'rgba(0, 0, 0, 0.04)';
 export const bpSurfaceFilterSurface = '#0061d5';
 export const bpSurfaceFilterSurfaceFocus = '#0061d5';
 export const bpSurfaceFilterSurfaceHover = '#0061d5';
@@ -1155,6 +1142,7 @@ export const bpSurfaceInputSurfaceErrorFocus = '#ffffff';
 export const bpSurfaceInputSurfaceErrorHover = '#ffffff';
 export const bpSurfaceInputSurfaceFocus = '#ffffff';
 export const bpSurfaceInputSurfaceHover = '#ffffff';
+export const bpSurfaceInputSurfaceReadOnly = '#fbfbfb';
 export const bpSurfaceInputChipSurface = '#e8e8e8';
 export const bpSurfaceInputChipSurfaceError = '#fdebee';
 export const bpSurfaceInputChipSurfaceHover = '#e8e8e8';
@@ -1163,6 +1151,9 @@ export const bpSurfaceItemSmallSurfaceHover = '#f4f4f4';
 export const bpSurfaceItemSmallSurfaceSelected = '#f2f7fd';
 export const bpSurfaceItemSurfaceHover = '#ffffff';
 export const bpSurfaceItemSurfaceSelected = '#f2f7fd';
+export const bpSurfaceListItemSmallSurface = 'rgba(255, 255, 255, 0)';
+export const bpSurfaceListItemSmallSurfaceHover = 'rgba(0, 0, 0, 0.04)';
+export const bpSurfaceListItemSmallSurfacePressed = 'rgba(0, 0, 0, 0.08)';
 export const bpSurfaceListItemSurface = '#ffffff';
 export const bpSurfaceListItemSurfaceHover = '#ffffff';
 export const bpSurfaceListItemSurfaceLoading = '#f4f4f4';
@@ -1174,10 +1165,10 @@ export const bpSurfaceLoadingIndicatorSurfaceOnLight = '#000000';
 export const bpSurfaceLoadingIndicatorSurfaceTertiary = 'rgba(0, 97, 213, 0.3)';
 export const bpSurfaceMenuSurfaceDropdown = 'rgba(255, 255, 255, 0.9)';
 export const bpSurfaceMenuSurfaceFullscreen = 'rgba(255, 255, 255, 0.9)';
-export const bpSurfaceMenuItemSurface = '#ffffff';
-export const bpSurfaceMenuItemSurfaceHover = '#f4f4f4';
-export const bpSurfaceMenuItemSurfaceLoading = '#ffffff';
-export const bpSurfaceMenuItemSurfacePressed = '#f4f4f4';
+export const bpSurfaceMenuItemSurface = 'rgba(255, 255, 255, 0)';
+export const bpSurfaceMenuItemSurfaceHover = 'rgba(0, 0, 0, 0.04)';
+export const bpSurfaceMenuItemSurfaceLoading = 'rgba(255, 255, 255, 0)';
+export const bpSurfaceMenuItemSurfacePressed = 'rgba(0, 0, 0, 0.08)';
 export const bpSurfaceModalSurface = '#ffffff';
 export const bpSurfaceModalSurfaceGray = '#f4f4f4';
 export const bpSurfaceNavSurfaceBrand = '#0061d5';

package/dist/tokens/tokens-css-vars.scss

@@ -1364,6 +1364,7 @@
     --bp-screen-height: 900;
     --bp-screen-width: 1440;
     --bp-background-background: var(--bp-gray-white);
+    --bp-border-accordion-border-hover: var(--bp-gray-10);
     --bp-border-avatar-border-hover: var(--bp-black-opacity-04);
     --bp-border-avatar-border-pressed: var(--bp-black-opacity-08);
     --bp-border-badge-border: var(--bp-gray-white);
@@ -1377,8 +1378,7 @@
     --bp-border-collapsible-section-border: var(--bp-gray-20);
     --bp-border-combobox-border: var(--bp-gray-50);
     --bp-border-combobox-border-hover: var(--bp-gray-65);
-    --bp-border-content-button-border-hover-active: var(--bp-gray-50);
-    --bp-border-content-button-border-selected: var(--bp-gray-50);
+    --bp-border-content-switcher-border: var(--bp-gray-50);
     --bp-border-cta-border-high-contrast: var(--bp-black-opacity-90);
     --bp-border-cta-border-secondary: var(--bp-black-opacity-08);
     --bp-border-date-picker-day-border-focus: var(--bp-light-blue-100);
@@ -1390,14 +1390,10 @@
     --bp-border-date-picker-border-error: var(--bp-watermelon-red-100);
     --bp-border-date-picker-border-focus: var(--bp-light-blue-100);
     --bp-border-date-picker-border-hover: var(--bp-gray-65);
-    --bp-border-divider-border: var(--bp-black-opacity-04);
-    --bp-border-dropdown-secondary-border: var(--bp-gray-30);
-    --bp-border-dropdown-border: var(--bp-gray-30);
+    --bp-border-divider-border: var(--bp-black-opacity-08);
+    --bp-border-dropdown-secondary-border: var(--bp-black-opacity-08);
+    --bp-border-dropdown-border: var(--bp-black-opacity-08);
     --bp-border-dropdown-border-error: var(--bp-watermelon-red-100);
-    --bp-border-dropdown-border-error-focus: var(--bp-watermelon-red-100);
-    --bp-border-dropdown-border-error-hover: var(--bp-watermelon-red-100);
-    --bp-border-dropdown-border-focus: var(--bp-box-blue-100);
-    --bp-border-dropdown-border-hover: var(--bp-gray-65);
     --bp-border-filter-chip-border-multi-on: var(--bp-box-blue-40);
     --bp-border-filter-chip-border-multi-on-hover: var(--bp-box-blue-40);
     --bp-border-grid-thumbnail-border: var(--bp-gray-10);
@@ -1409,6 +1405,7 @@
     --bp-border-input-border-error-hover: var(--bp-watermelon-red-100);
     --bp-border-input-border-focus: var(--bp-light-blue-100);
     --bp-border-input-border-hover: var(--bp-gray-65);
+    --bp-border-input-border-read-only: var(--bp-gray-20);
     --bp-border-input-chip-border-error: var(--bp-watermelon-red-100);
     --bp-border-input-chip-border-shadow: var(--bp-black-opacity-04);
     --bp-border-item-small-border-selected: var(--bp-box-blue-100);
@@ -1470,7 +1467,6 @@
     --bp-border-toolbar-border: var(--bp-gray-10);
     --bp-border-tooltip-border: var(--bp-white-opacity-16);
     --bp-border-tooltip-border-error: var(--bp-watermelon-red-50);
-    --bp-border-border-accordion-hover: var(--bp-gray-10);
     --bp-icon-cta-icon: var(--bp-black-opacity-60);
     --bp-icon-cta-icon-high-contrast: var(--bp-black-opacity-90);
     --bp-icon-cta-icon-high-contrast-hover: var(--bp-black-opacity-90);
@@ -1555,12 +1551,9 @@
     --bp-surface-chip-button-surface-hover: var(--bp-black-opacity-08);
     --bp-surface-collapsible-section-surface: var(--bp-gray-white);
     --bp-surface-combobox-surface: var(--bp-gray-white);
-    --bp-surface-content-button-surface-focus-default: var(--bp-gray-white);
-    --bp-surface-content-button-surface-focus-selected: var(--bp-gray-white);
-    --bp-surface-content-button-surface-hover-default: var(--bp-gray-05);
-    --bp-surface-content-button-surface-hover-selected: var(--bp-gray-05);
-    --bp-surface-content-button-surface-selected: var(--bp-gray-white);
     --bp-surface-content-switcher-surface: var(--bp-gray-10);
+    --bp-surface-content-switcher-surface-hover: var(--bp-gray-05);
+    --bp-surface-content-switcher-surface-selected: var(--bp-gray-white);
     --bp-surface-cta-destructive-surface-teratiary-hover: var(--bp-watermelon-red-opacity-04);
     --bp-surface-cta-destructive-surface-teratiary-pressed: var(--bp-watermelon-red-opacity-12);
     --bp-surface-cta-destructive-surface-tertiary: var(--bp-watermelon-red-opacity-00);
@@ -1578,7 +1571,7 @@
     --bp-surface-cta-surface-promo-focus-pressed: var(--bp-grimace-120);
     --bp-surface-cta-surface-promo-hover: var(--bp-grimace-100);
     --bp-surface-cta-surface-promo-pressed: var(--bp-grimace-120);
-    --bp-surface-cta-surface-secondary: var(--bp-white-opacity-70);
+    --bp-surface-cta-surface-secondary: var(--bp-white-opacity-90);
     --bp-surface-cta-surface-secondary-hover: var(--bp-black-opacity-04);
     --bp-surface-cta-surface-secondary-pressed: var(--bp-black-opacity-08);
     --bp-surface-cta-surface-tertiary: var(--bp-black-opacity-00);
@@ -1603,19 +1596,13 @@
     --bp-surface-date-picker-surface-error: var(--bp-gray-white);
     --bp-surface-date-picker-surface-focus: var(--bp-gray-white);
     --bp-surface-date-picker-surface-hover: var(--bp-gray-white);
-    --bp-surface-dropdown-primary-surface-hover: var(--bp-gray-05);
-    --bp-surface-dropdown-primary-surface-pressed: var(--bp-gray-10);
-    --bp-surface-dropdown-secondary-surface: var(--bp-gray-white);
-    --bp-surface-dropdown-secondary-surface-hover: var(--bp-gray-05);
-    --bp-surface-dropdown-secondary-surface-pressed: var(--bp-gray-10);
-    --bp-surface-dropdown-tertiary-surface-hover: var(--bp-gray-05);
-    --bp-surface-dropdown-tertiary-surface-pressed: var(--bp-gray-10);
-    --bp-surface-dropdown-surface: var(--bp-gray-white);
-    --bp-surface-dropdown-surface-error: var(--bp-gray-white);
-    --bp-surface-dropdown-surface-error-focus: var(--bp-gray-white);
-    --bp-surface-dropdown-surface-error-hover: var(--bp-gray-white);
-    --bp-surface-dropdown-surface-focus: var(--bp-gray-white);
-    --bp-surface-dropdown-surface-hover: var(--bp-gray-white);
+    --bp-surface-dropdown-secondary-surface: var(--bp-white-opacity-70);
+    --bp-surface-dropdown-secondary-surface-hover: var(--bp-black-opacity-04);
+    --bp-surface-dropdown-secondary-surface-pressed: var(--bp-black-opacity-08);
+    --bp-surface-dropdown-tertiary-surface-hover: var(--bp-black-opacity-04);
+    --bp-surface-dropdown-tertiary-surface-pressed: var(--bp-black-opacity-08);
+    --bp-surface-dropdown-surface: var(--bp-white-opacity-70);
+    --bp-surface-dropdown-surface-hover: var(--bp-black-opacity-04);
     --bp-surface-filter-surface: var(--bp-box-blue-100);
     --bp-surface-filter-surface-focus: var(--bp-box-blue-100);
     --bp-surface-filter-surface-hover: var(--bp-box-blue-100);
@@ -1647,6 +1634,7 @@
     --bp-surface-input-surface-error-hover: var(--bp-gray-white);
     --bp-surface-input-surface-focus: var(--bp-gray-white);
     --bp-surface-input-surface-hover: var(--bp-gray-white);
+    --bp-surface-input-surface-read-only: var(--bp-gray-02);
     --bp-surface-input-chip-surface: var(--bp-gray-10);
     --bp-surface-input-chip-surface-error: var(--bp-watermelon-red-10);
     --bp-surface-input-chip-surface-hover: var(--bp-gray-10);
@@ -1655,6 +1643,9 @@
     --bp-surface-item-small-surface-selected: var(--bp-box-blue-05);
     --bp-surface-item-surface-hover: var(--bp-gray-white);
     --bp-surface-item-surface-selected: var(--bp-box-blue-05);
+    --bp-surface-list-item-small-surface: var(--bp-white-opacity-00);
+    --bp-surface-list-item-small-surface-hover: var(--bp-black-opacity-04);
+    --bp-surface-list-item-small-surface-pressed: var(--bp-black-opacity-08);
     --bp-surface-list-item-surface: var(--bp-gray-white);
     --bp-surface-list-item-surface-hover: var(--bp-gray-white);
     --bp-surface-list-item-surface-loading: var(--bp-gray-05);
@@ -1671,10 +1662,10 @@
     --bp-surface-loading-indicator-surface-tertiary: var(--bp-box-blue-opacity-30);
     --bp-surface-menu-surface-dropdown: var(--bp-white-opacity-90);
     --bp-surface-menu-surface-fullscreen: var(--bp-white-opacity-90);
-    --bp-surface-menu-item-surface: var(--bp-gray-white);
-    --bp-surface-menu-item-surface-hover: var(--bp-gray-05);
-    --bp-surface-menu-item-surface-loading: var(--bp-gray-white);
-    --bp-surface-menu-item-surface-pressed: var(--bp-gray-05);
+    --bp-surface-menu-item-surface: var(--bp-white-opacity-00);
+    --bp-surface-menu-item-surface-hover: var(--bp-black-opacity-04);
+    --bp-surface-menu-item-surface-loading: var(--bp-white-opacity-00);
+    --bp-surface-menu-item-surface-pressed: var(--bp-black-opacity-08);
     --bp-surface-modal-surface: var(--bp-gray-white);
     --bp-surface-modal-surface-gray: var(--bp-gray-05);
     --bp-surface-nav-surface-brand: var(--bp-box-blue-100);

package/dist/tokens/tokens.d.ts

@@ -821,6 +821,7 @@ export const NotificationDefaultParagraphIndent: string;
 
 // Auto-appended from light_mode_value/tokens.d.ts by append-figma-vars-to-js.js
 export const bpBackgroundBackground: string;
+export const bpBorderAccordionBorderHover: string;
 export const bpBorderAvatarBorderHover: string;
 export const bpBorderAvatarBorderPressed: string;
 export const bpBorderBadgeBorder: string;
@@ -834,8 +835,7 @@ export const bpBorderCheckboxBorderSelectedHover: string;
 export const bpBorderCollapsibleSectionBorder: string;
 export const bpBorderComboboxBorder: string;
 export const bpBorderComboboxBorderHover: string;
-export const bpBorderContentButtonBorderHoverActive: string;
-export const bpBorderContentButtonBorderSelected: string;
+export const bpBorderContentSwitcherBorder: string;
 export const bpBorderCtaBorderHighContrast: string;
 export const bpBorderCtaBorderOutlineDisabled: string;
 export const bpBorderCtaBorderSecondary: string;
@@ -853,10 +853,6 @@ export const bpBorderDividerBorderBrand: string;
 export const bpBorderDropdownSecondaryBorder: string;
 export const bpBorderDropdownBorder: string;
 export const bpBorderDropdownBorderError: string;
-export const bpBorderDropdownBorderErrorFocus: string;
-export const bpBorderDropdownBorderErrorHover: string;
-export const bpBorderDropdownBorderFocus: string;
-export const bpBorderDropdownBorderHover: string;
 export const bpBorderFilterChipBorderMultiOn: string;
 export const bpBorderFilterChipBorderMultiOnHover: string;
 export const bpBorderGridThumbnailBorder: string;
@@ -868,6 +864,7 @@ export const bpBorderInputBorderErrorFocus: string;
 export const bpBorderInputBorderErrorHover: string;
 export const bpBorderInputBorderFocus: string;
 export const bpBorderInputBorderHover: string;
+export const bpBorderInputBorderReadOnly: string;
 export const bpBorderInputChipBorderError: string;
 export const bpBorderInputChipBorderShadow: string;
 export const bpBorderItemSmallBorderSelected: string;
@@ -929,7 +926,6 @@ export const bpBorderToggleTextBorderOnPressed: string;
 export const bpBorderToolbarBorder: string;
 export const bpBorderTooltipBorder: string;
 export const bpBorderTooltipBorderError: string;
-export const bpBorderBorderAccordionHover: string;
 export const bpBorder00: string;
 export const bpBorder01: string;
 export const bpBorder02: string;
@@ -1042,12 +1038,9 @@ export const bpSurfaceChipButtonSurface: string;
 export const bpSurfaceChipButtonSurfaceHover: string;
 export const bpSurfaceCollapsibleSectionSurface: string;
 export const bpSurfaceComboboxSurface: string;
-export const bpSurfaceContentButtonSurfaceFocusDefault: string;
-export const bpSurfaceContentButtonSurfaceFocusSelected: string;
-export const bpSurfaceContentButtonSurfaceHoverDefault: string;
-export const bpSurfaceContentButtonSurfaceHoverSelected: string;
-export const bpSurfaceContentButtonSurfaceSelected: string;
 export const bpSurfaceContentSwitcherSurface: string;
+export const bpSurfaceContentSwitcherSurfaceHover: string;
+export const bpSurfaceContentSwitcherSurfaceSelected: string;
 export const bpSurfaceCtaDestructiveSurfaceTeratiaryHover: string;
 export const bpSurfaceCtaDestructiveSurfaceTeratiaryPressed: string;
 export const bpSurfaceCtaDestructiveSurfaceTertiary: string;
@@ -1091,18 +1084,12 @@ export const bpSurfaceDatePickerSurfaceDisabled: string;
 export const bpSurfaceDatePickerSurfaceError: string;
 export const bpSurfaceDatePickerSurfaceFocus: string;
 export const bpSurfaceDatePickerSurfaceHover: string;
-export const bpSurfaceDropdownPrimarySurfaceHover: string;
-export const bpSurfaceDropdownPrimarySurfacePressed: string;
 export const bpSurfaceDropdownSecondarySurface: string;
 export const bpSurfaceDropdownSecondarySurfaceHover: string;
 export const bpSurfaceDropdownSecondarySurfacePressed: string;
 export const bpSurfaceDropdownTertiarySurfaceHover: string;
 export const bpSurfaceDropdownTertiarySurfacePressed: string;
 export const bpSurfaceDropdownSurface: string;
-export const bpSurfaceDropdownSurfaceError: string;
-export const bpSurfaceDropdownSurfaceErrorFocus: string;
-export const bpSurfaceDropdownSurfaceErrorHover: string;
-export const bpSurfaceDropdownSurfaceFocus: string;
 export const bpSurfaceDropdownSurfaceHover: string;
 export const bpSurfaceFilterSurface: string;
 export const bpSurfaceFilterSurfaceFocus: string;
@@ -1135,6 +1122,7 @@ export const bpSurfaceInputSurfaceErrorFocus: string;
 export const bpSurfaceInputSurfaceErrorHover: string;
 export const bpSurfaceInputSurfaceFocus: string;
 export const bpSurfaceInputSurfaceHover: string;
+export const bpSurfaceInputSurfaceReadOnly: string;
 export const bpSurfaceInputChipSurface: string;
 export const bpSurfaceInputChipSurfaceError: string;
 export const bpSurfaceInputChipSurfaceHover: string;
@@ -1143,6 +1131,9 @@ export const bpSurfaceItemSmallSurfaceHover: string;
 export const bpSurfaceItemSmallSurfaceSelected: string;
 export const bpSurfaceItemSurfaceHover: string;
 export const bpSurfaceItemSurfaceSelected: string;
+export const bpSurfaceListItemSmallSurface: string;
+export const bpSurfaceListItemSmallSurfaceHover: string;
+export const bpSurfaceListItemSmallSurfacePressed: string;
 export const bpSurfaceListItemSurface: string;
 export const bpSurfaceListItemSurfaceHover: string;
 export const bpSurfaceListItemSurfaceLoading: string;

package/dist/tokens/tokens.js

@@ -839,6 +839,7 @@ export const NotificationDefaultParagraphIndent = '0rem';
 
 // Auto-appended/updated from tokens.js by append-figma-vars-to-js.js
 export const bpBackgroundBackground = '#ffffff';
+export const bpBorderAccordionBorderHover = '#e8e8e8';
 export const bpBorderAvatarBorderHover = 'rgba(0, 0, 0, 0.04)';
 export const bpBorderAvatarBorderPressed = 'rgba(0, 0, 0, 0.08)';
 export const bpBorderBadgeBorder = '#ffffff';
@@ -852,8 +853,7 @@ export const bpBorderCheckboxBorderSelectedHover = '#2079e3';
 export const bpBorderCollapsibleSectionBorder = '#d3d3d3';
 export const bpBorderComboboxBorder = '#909090';
 export const bpBorderComboboxBorderHover = '#6f6f6f';
-export const bpBorderContentButtonBorderHoverActive = '#909090';
-export const bpBorderContentButtonBorderSelected = '#909090';
+export const bpBorderContentSwitcherBorder = '#909090';
 export const bpBorderCtaBorderHighContrast = 'rgba(0, 0, 0, 0.9)';
 export const bpBorderCtaBorderOutlineDisabled = '#646464';
 export const bpBorderCtaBorderSecondary = 'rgba(0, 0, 0, 0.08)';
@@ -866,15 +866,11 @@ export const bpBorderDatePickerBorderDisabled = '#909090';
 export const bpBorderDatePickerBorderError = '#ed3757';
 export const bpBorderDatePickerBorderFocus = '#2486fc';
 export const bpBorderDatePickerBorderHover = '#6f6f6f';
-export const bpBorderDividerBorder = 'rgba(0, 0, 0, 0.04)';
+export const bpBorderDividerBorder = 'rgba(0, 0, 0, 0.08)';
 export const bpBorderDividerBorderBrand = 'rgba(232, 232, 232, 0.1)';
-export const bpBorderDropdownSecondaryBorder = '#bcbcbc';
-export const bpBorderDropdownBorder = '#bcbcbc';
+export const bpBorderDropdownSecondaryBorder = 'rgba(0, 0, 0, 0.08)';
+export const bpBorderDropdownBorder = 'rgba(0, 0, 0, 0.08)';
 export const bpBorderDropdownBorderError = '#ed3757';
-export const bpBorderDropdownBorderErrorFocus = '#ed3757';
-export const bpBorderDropdownBorderErrorHover = '#ed3757';
-export const bpBorderDropdownBorderFocus = '#0061d5';
-export const bpBorderDropdownBorderHover = '#6f6f6f';
 export const bpBorderFilterChipBorderMultiOn = '#99c0ee';
 export const bpBorderFilterChipBorderMultiOnHover = '#99c0ee';
 export const bpBorderGridThumbnailBorder = '#e8e8e8';
@@ -886,6 +882,7 @@ export const bpBorderInputBorderErrorFocus = '#ed3757';
 export const bpBorderInputBorderErrorHover = '#ed3757';
 export const bpBorderInputBorderFocus = '#2486fc';
 export const bpBorderInputBorderHover = '#6f6f6f';
+export const bpBorderInputBorderReadOnly = '#d3d3d3';
 export const bpBorderInputChipBorderError = '#ed3757';
 export const bpBorderInputChipBorderShadow = 'rgba(0, 0, 0, 0.04)';
 export const bpBorderItemSmallBorderSelected = '#0061d5';
@@ -947,7 +944,6 @@ export const bpBorderToggleTextBorderOnPressed = '#99c0ee';
 export const bpBorderToolbarBorder = '#e8e8e8';
 export const bpBorderTooltipBorder = 'rgba(255, 255, 255, 0.16)';
 export const bpBorderTooltipBorderError = '#f69bab';
-export const bpBorderBorderAccordionHover = '#e8e8e8';
 export const bpBorder00 = '0';
 export const bpBorder01 = '0.0625rem';
 export const bpBorder02 = '0.125rem';
@@ -1060,12 +1056,9 @@ export const bpSurfaceChipButtonSurface = 'rgba(0, 0, 0, 0.04)';
 export const bpSurfaceChipButtonSurfaceHover = 'rgba(0, 0, 0, 0.08)';
 export const bpSurfaceCollapsibleSectionSurface = '#ffffff';
 export const bpSurfaceComboboxSurface = '#ffffff';
-export const bpSurfaceContentButtonSurfaceFocusDefault = '#ffffff';
-export const bpSurfaceContentButtonSurfaceFocusSelected = '#ffffff';
-export const bpSurfaceContentButtonSurfaceHoverDefault = '#f4f4f4';
-export const bpSurfaceContentButtonSurfaceHoverSelected = '#f4f4f4';
-export const bpSurfaceContentButtonSurfaceSelected = '#ffffff';
 export const bpSurfaceContentSwitcherSurface = '#e8e8e8';
+export const bpSurfaceContentSwitcherSurfaceHover = '#f4f4f4';
+export const bpSurfaceContentSwitcherSurfaceSelected = '#ffffff';
 export const bpSurfaceCtaDestructiveSurfaceTertiary = 'rgba(237, 55, 87, 0)';
 export const bpSurfaceCtaSurfaceIcon = 'rgba(0, 0, 0, 0)';
 export const bpSurfaceCtaSurfaceIconHover = 'rgba(0, 0, 0, 0.04)';
@@ -1081,7 +1074,7 @@ export const bpSurfaceCtaSurfacePromoFocus = '#4826c2';
 export const bpSurfaceCtaSurfacePromoFocusPressed = '#3a1e9b';
 export const bpSurfaceCtaSurfacePromoHover = '#4826c2';
 export const bpSurfaceCtaSurfacePromoPressed = '#3a1e9b';
-export const bpSurfaceCtaSurfaceSecondary = 'rgba(255, 255, 255, 0.7)';
+export const bpSurfaceCtaSurfaceSecondary = 'rgba(255, 255, 255, 0.9)';
 export const bpSurfaceCtaSurfaceSecondaryHover = 'rgba(0, 0, 0, 0.04)';
 export const bpSurfaceCtaSurfaceSecondaryPressed = 'rgba(0, 0, 0, 0.08)';
 export const bpSurfaceCtaSurfaceTertiary = 'rgba(0, 0, 0, 0)';
@@ -1107,19 +1100,13 @@ export const bpSurfaceDatePickerSurfaceDisabled = '#ffffff';
 export const bpSurfaceDatePickerSurfaceError = '#ffffff';
 export const bpSurfaceDatePickerSurfaceFocus = '#ffffff';
 export const bpSurfaceDatePickerSurfaceHover = '#ffffff';
-export const bpSurfaceDropdownPrimarySurfaceHover = '#f4f4f4';
-export const bpSurfaceDropdownPrimarySurfacePressed = '#e8e8e8';
-export const bpSurfaceDropdownSecondarySurface = '#ffffff';
-export const bpSurfaceDropdownSecondarySurfaceHover = '#f4f4f4';
-export const bpSurfaceDropdownSecondarySurfacePressed = '#e8e8e8';
-export const bpSurfaceDropdownTertiarySurfaceHover = '#f4f4f4';
-export const bpSurfaceDropdownTertiarySurfacePressed = '#e8e8e8';
-export const bpSurfaceDropdownSurface = '#ffffff';
-export const bpSurfaceDropdownSurfaceError = '#ffffff';
-export const bpSurfaceDropdownSurfaceErrorFocus = '#ffffff';
-export const bpSurfaceDropdownSurfaceErrorHover = '#ffffff';
-export const bpSurfaceDropdownSurfaceFocus = '#ffffff';
-export const bpSurfaceDropdownSurfaceHover = '#ffffff';
+export const bpSurfaceDropdownSecondarySurface = 'rgba(255, 255, 255, 0.7)';
+export const bpSurfaceDropdownSecondarySurfaceHover = 'rgba(0, 0, 0, 0.04)';
+export const bpSurfaceDropdownSecondarySurfacePressed = 'rgba(0, 0, 0, 0.08)';
+export const bpSurfaceDropdownTertiarySurfaceHover = 'rgba(0, 0, 0, 0.04)';
+export const bpSurfaceDropdownTertiarySurfacePressed = 'rgba(0, 0, 0, 0.08)';
+export const bpSurfaceDropdownSurface = 'rgba(255, 255, 255, 0.7)';
+export const bpSurfaceDropdownSurfaceHover = 'rgba(0, 0, 0, 0.04)';
 export const bpSurfaceFilterSurface = '#0061d5';
 export const bpSurfaceFilterSurfaceFocus = '#0061d5';
 export const bpSurfaceFilterSurfaceHover = '#0061d5';
@@ -1151,6 +1138,7 @@ export const bpSurfaceInputSurfaceErrorFocus = '#ffffff';
 export const bpSurfaceInputSurfaceErrorHover = '#ffffff';
 export const bpSurfaceInputSurfaceFocus = '#ffffff';
 export const bpSurfaceInputSurfaceHover = '#ffffff';
+export const bpSurfaceInputSurfaceReadOnly = '#fbfbfb';
 export const bpSurfaceInputChipSurface = '#e8e8e8';
 export const bpSurfaceInputChipSurfaceError = '#fdebee';
 export const bpSurfaceInputChipSurfaceHover = '#e8e8e8';
@@ -1159,6 +1147,9 @@ export const bpSurfaceItemSmallSurfaceHover = '#f4f4f4';
 export const bpSurfaceItemSmallSurfaceSelected = '#f2f7fd';
 export const bpSurfaceItemSurfaceHover = '#ffffff';
 export const bpSurfaceItemSurfaceSelected = '#f2f7fd';
+export const bpSurfaceListItemSmallSurface = 'rgba(255, 255, 255, 0)';
+export const bpSurfaceListItemSmallSurfaceHover = 'rgba(0, 0, 0, 0.04)';
+export const bpSurfaceListItemSmallSurfacePressed = 'rgba(0, 0, 0, 0.08)';
 export const bpSurfaceListItemSurface = '#ffffff';
 export const bpSurfaceListItemSurfaceHover = '#ffffff';
 export const bpSurfaceListItemSurfaceLoading = '#f4f4f4';
@@ -1170,10 +1161,10 @@ export const bpSurfaceLoadingIndicatorSurfaceOnLight = '#000000';
 export const bpSurfaceLoadingIndicatorSurfaceTertiary = 'rgba(0, 97, 213, 0.3)';
 export const bpSurfaceMenuSurfaceDropdown = 'rgba(255, 255, 255, 0.9)';
 export const bpSurfaceMenuSurfaceFullscreen = 'rgba(255, 255, 255, 0.9)';
-export const bpSurfaceMenuItemSurface = '#ffffff';
-export const bpSurfaceMenuItemSurfaceHover = '#f4f4f4';
-export const bpSurfaceMenuItemSurfaceLoading = '#ffffff';
-export const bpSurfaceMenuItemSurfacePressed = '#f4f4f4';
+export const bpSurfaceMenuItemSurface = 'rgba(255, 255, 255, 0)';
+export const bpSurfaceMenuItemSurfaceHover = 'rgba(0, 0, 0, 0.04)';
+export const bpSurfaceMenuItemSurfaceLoading = 'rgba(255, 255, 255, 0)';
+export const bpSurfaceMenuItemSurfacePressed = 'rgba(0, 0, 0, 0.08)';
 export const bpSurfaceModalSurface = '#ffffff';
 export const bpSurfaceModalSurfaceGray = '#f4f4f4';
 export const bpSurfaceNavSurfaceBrand = '#0061d5';

package/dist/tokens/tokens.json

@@ -820,6 +820,7 @@
     "NotificationDefaultParagraphSpacing": "0rem",
     "NotificationDefaultParagraphIndent": "0rem",
     "BpBackgroundBackground": "#ffffff",
+    "BpBorderAccordionBorderHover": "#e8e8e8",
     "BpBorderAvatarBorderHover": "rgba(0, 0, 0, 0.04)",
     "BpBorderAvatarBorderPressed": "rgba(0, 0, 0, 0.08)",
     "BpBorderBadgeBorder": "#ffffff",
@@ -833,8 +834,7 @@
     "BpBorderCollapsibleSectionBorder": "#d3d3d3",
     "BpBorderComboboxBorder": "#909090",
     "BpBorderComboboxBorderHover": "#6f6f6f",
-    "BpBorderContentButtonBorderHoverActive": "#909090",
-    "BpBorderContentButtonBorderSelected": "#909090",
+    "BpBorderContentSwitcherBorder": "#909090",
     "BpBorderCtaBorderHighContrast": "rgba(0, 0, 0, 0.9)",
     "BpBorderCtaBorderOutlineDisabled": "#646464",
     "BpBorderCtaBorderSecondary": "rgba(0, 0, 0, 0.08)",
@@ -847,15 +847,11 @@
     "BpBorderDatePickerBorderError": "#ed3757",
     "BpBorderDatePickerBorderFocus": "#2486fc",
     "BpBorderDatePickerBorderHover": "#6f6f6f",
-    "BpBorderDividerBorder": "rgba(0, 0, 0, 0.04)",
+    "BpBorderDividerBorder": "rgba(0, 0, 0, 0.08)",
     "BpBorderDividerBorderBrand": "rgba(232, 232, 232, 0.1)",
-    "BpBorderDropdownSecondaryBorder": "#bcbcbc",
-    "BpBorderDropdownBorder": "#bcbcbc",
+    "BpBorderDropdownSecondaryBorder": "rgba(0, 0, 0, 0.08)",
+    "BpBorderDropdownBorder": "rgba(0, 0, 0, 0.08)",
     "BpBorderDropdownBorderError": "#ed3757",
-    "BpBorderDropdownBorderErrorFocus": "#ed3757",
-    "BpBorderDropdownBorderErrorHover": "#ed3757",
-    "BpBorderDropdownBorderFocus": "#0061d5",
-    "BpBorderDropdownBorderHover": "#6f6f6f",
     "BpBorderFilterChipBorderMultiOn": "#99c0ee",
     "BpBorderFilterChipBorderMultiOnHover": "#99c0ee",
     "BpBorderGridThumbnailBorder": "#e8e8e8",
@@ -867,6 +863,7 @@
     "BpBorderInputBorderErrorHover": "#ed3757",
     "BpBorderInputBorderFocus": "#2486fc",
     "BpBorderInputBorderHover": "#6f6f6f",
+    "BpBorderInputBorderReadOnly": "#d3d3d3",
     "BpBorderInputChipBorderError": "#ed3757",
     "BpBorderInputChipBorderShadow": "rgba(0, 0, 0, 0.04)",
     "BpBorderItemSmallBorderSelected": "#0061d5",
@@ -928,7 +925,6 @@
     "BpBorderToolbarBorder": "#e8e8e8",
     "BpBorderTooltipBorder": "rgba(255, 255, 255, 0.16)",
     "BpBorderTooltipBorderError": "#f69bab",
-    "BpBorderBorderAccordionHover": "#e8e8e8",
     "BpBorder00": "0",
     "BpBorder01": "0.0625rem",
     "BpBorder02": "0.125rem",
@@ -1041,12 +1037,9 @@
     "BpSurfaceChipButtonSurfaceHover": "rgba(0, 0, 0, 0.08)",
     "BpSurfaceCollapsibleSectionSurface": "#ffffff",
     "BpSurfaceComboboxSurface": "#ffffff",
-    "BpSurfaceContentButtonSurfaceFocusDefault": "#ffffff",
-    "BpSurfaceContentButtonSurfaceFocusSelected": "#ffffff",
-    "BpSurfaceContentButtonSurfaceHoverDefault": "#f4f4f4",
-    "BpSurfaceContentButtonSurfaceHoverSelected": "#f4f4f4",
-    "BpSurfaceContentButtonSurfaceSelected": "#ffffff",
     "BpSurfaceContentSwitcherSurface": "#e8e8e8",
+    "BpSurfaceContentSwitcherSurfaceHover": "#f4f4f4",
+    "BpSurfaceContentSwitcherSurfaceSelected": "#ffffff",
     "BpSurfaceCtaDestructiveSurfaceTeratiaryHover": "rgba(237, 55, 87, 0.04)",
     "BpSurfaceCtaDestructiveSurfaceTeratiaryPressed": "rgba(237, 55, 87, 0.12)",
     "BpSurfaceCtaDestructiveSurfaceTertiary": "rgba(237, 55, 87, 0)",
@@ -1064,7 +1057,7 @@
     "BpSurfaceCtaSurfacePromoFocusPressed": "#3a1e9b",
     "BpSurfaceCtaSurfacePromoHover": "#4826c2",
     "BpSurfaceCtaSurfacePromoPressed": "#3a1e9b",
-    "BpSurfaceCtaSurfaceSecondary": "rgba(255, 255, 255, 0.7)",
+    "BpSurfaceCtaSurfaceSecondary": "rgba(255, 255, 255, 0.9)",
     "BpSurfaceCtaSurfaceSecondaryHover": "rgba(0, 0, 0, 0.04)",
     "BpSurfaceCtaSurfaceSecondaryPressed": "rgba(0, 0, 0, 0.08)",
     "BpSurfaceCtaSurfaceTertiary": "rgba(0, 0, 0, 0)",
@@ -1090,19 +1083,13 @@
     "BpSurfaceDatePickerSurfaceError": "#ffffff",
     "BpSurfaceDatePickerSurfaceFocus": "#ffffff",
     "BpSurfaceDatePickerSurfaceHover": "#ffffff",
-    "BpSurfaceDropdownPrimarySurfaceHover": "#f4f4f4",
-    "BpSurfaceDropdownPrimarySurfacePressed": "#e8e8e8",
-    "BpSurfaceDropdownSecondarySurface": "#ffffff",
-    "BpSurfaceDropdownSecondarySurfaceHover": "#f4f4f4",
-    "BpSurfaceDropdownSecondarySurfacePressed": "#e8e8e8",
-    "BpSurfaceDropdownTertiarySurfaceHover": "#f4f4f4",
-    "BpSurfaceDropdownTertiarySurfacePressed": "#e8e8e8",
-    "BpSurfaceDropdownSurface": "#ffffff",
-    "BpSurfaceDropdownSurfaceError": "#ffffff",
-    "BpSurfaceDropdownSurfaceErrorFocus": "#ffffff",
-    "BpSurfaceDropdownSurfaceErrorHover": "#ffffff",
-    "BpSurfaceDropdownSurfaceFocus": "#ffffff",
-    "BpSurfaceDropdownSurfaceHover": "#ffffff",
+    "BpSurfaceDropdownSecondarySurface": "rgba(255, 255, 255, 0.7)",
+    "BpSurfaceDropdownSecondarySurfaceHover": "rgba(0, 0, 0, 0.04)",
+    "BpSurfaceDropdownSecondarySurfacePressed": "rgba(0, 0, 0, 0.08)",
+    "BpSurfaceDropdownTertiarySurfaceHover": "rgba(0, 0, 0, 0.04)",
+    "BpSurfaceDropdownTertiarySurfacePressed": "rgba(0, 0, 0, 0.08)",
+    "BpSurfaceDropdownSurface": "rgba(255, 255, 255, 0.7)",
+    "BpSurfaceDropdownSurfaceHover": "rgba(0, 0, 0, 0.04)",
     "BpSurfaceFilterSurface": "#0061d5",
     "BpSurfaceFilterSurfaceFocus": "#0061d5",
     "BpSurfaceFilterSurfaceHover": "#0061d5",
@@ -1134,6 +1121,7 @@
     "BpSurfaceInputSurfaceErrorHover": "#ffffff",
     "BpSurfaceInputSurfaceFocus": "#ffffff",
     "BpSurfaceInputSurfaceHover": "#ffffff",
+    "BpSurfaceInputSurfaceReadOnly": "#fbfbfb",
     "BpSurfaceInputChipSurface": "#e8e8e8",
     "BpSurfaceInputChipSurfaceError": "#fdebee",
     "BpSurfaceInputChipSurfaceHover": "#e8e8e8",
@@ -1142,6 +1130,9 @@
     "BpSurfaceItemSmallSurfaceSelected": "#f2f7fd",
     "BpSurfaceItemSurfaceHover": "#ffffff",
     "BpSurfaceItemSurfaceSelected": "#f2f7fd",
+    "BpSurfaceListItemSmallSurface": "rgba(255, 255, 255, 0)",
+    "BpSurfaceListItemSmallSurfaceHover": "rgba(0, 0, 0, 0.04)",
+    "BpSurfaceListItemSmallSurfacePressed": "rgba(0, 0, 0, 0.08)",
     "BpSurfaceListItemSurface": "#ffffff",
     "BpSurfaceListItemSurfaceHover": "#ffffff",
     "BpSurfaceListItemSurfaceLoading": "#f4f4f4",
@@ -1158,10 +1149,10 @@
     "BpSurfaceLoadingIndicatorSurfaceTertiary": "rgba(0, 97, 213, 0.3)",
     "BpSurfaceMenuSurfaceDropdown": "rgba(255, 255, 255, 0.9)",
     "BpSurfaceMenuSurfaceFullscreen": "rgba(255, 255, 255, 0.9)",
-    "BpSurfaceMenuItemSurface": "#ffffff",
-    "BpSurfaceMenuItemSurfaceHover": "#f4f4f4",
-    "BpSurfaceMenuItemSurfaceLoading": "#ffffff",
-    "BpSurfaceMenuItemSurfacePressed": "#f4f4f4",
+    "BpSurfaceMenuItemSurface": "rgba(255, 255, 255, 0)",
+    "BpSurfaceMenuItemSurfaceHover": "rgba(0, 0, 0, 0.04)",
+    "BpSurfaceMenuItemSurfaceLoading": "rgba(255, 255, 255, 0)",
+    "BpSurfaceMenuItemSurfacePressed": "rgba(0, 0, 0, 0.08)",
     "BpSurfaceModalSurface": "#ffffff",
     "BpSurfaceModalSurfaceGray": "#f4f4f4",
     "BpSurfaceNavSurfaceBrand": "#0061d5",