@box/blueprint-web-assets 4.62.4 → 4.63.1

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

@@ -805,23 +805,24 @@
     --bp-icon-icon-illustrator: #ff9400;
     --bp-icon-icon-indesign: #ff57a1;
     --bp-icon-icon-photoshop: #26c9ff;
-    --bp-surface-badge-illustrator-surface: #051e25;
-    --bp-surface-badge-indesign-surface: #131415;
-    --bp-surface-badge-numbers-surface: #00a650;
-    --bp-surface-badge-photoshop-surface: #131415;
-    --bp-surface-badge-powerpoint-surface: #c43e1c;
-    --bp-surface-badge-spreadsheet-surface: #3fb87f;
     --bp-surface-badge-surface-docs: #4083f7;
     --bp-surface-badge-surface-drawing: #009aed;
     --bp-surface-badge-surface-excel: #107c41;
+    --bp-surface-badge-surface-illustrator: #051e25;
+    --bp-surface-badge-surface-indesign: #131415;
     --bp-surface-badge-surface-keynote: #0a84ff;
+    --bp-surface-badge-surface-numbers: #00a650;
     --bp-surface-badge-surface-pages: #ff9500;
     --bp-surface-badge-surface-pdf: #d0021b;
+    --bp-surface-badge-surface-photoshop: #131415;
+    --bp-surface-badge-surface-powerpoint: #c43e1c;
     --bp-surface-badge-surface-sheets: #21a464;
     --bp-surface-badge-surface-slides: #f7ba00;
+    --bp-surface-badge-surface-spreadsheet: #3fb87f;
     --bp-surface-badge-surface-video: #009aed;
-    --bp-surface-badge-word-surface: #185abd;
+    --bp-surface-badge-surface-word: #185abd;
     --bp-surface-cursor-cursor-on-light: #000000;
+    --bp-surface-toolbar-surface: #ffffff;
     --bp-surface-surface-brand: #0061d5;
     --bp-surface-surface-brand-busy: #0061d5;
     --bp-surface-surface-brand-disabled: #0061d5;
@@ -1406,6 +1407,7 @@
     --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);
+    --bp-border-inline-table-border: var(--bp-gray-10);
     --bp-border-input-border: var(--bp-gray-50);
     --bp-border-input-border-error: var(--bp-watermelon-red-100);
     --bp-border-input-border-error-focus: var(--bp-watermelon-red-100);
@@ -1452,6 +1454,7 @@
     --bp-border-switch-border: var(--bp-gray-30);
     --bp-border-switch-border-hover: var(--bp-gray-30);
     --bp-border-tab-border: var(--bp-gray-10);
+    --bp-border-tab-border-focus: var(--bp-gray-30);
     --bp-border-tab-border-hover: var(--bp-gray-30);
     --bp-border-tab-border-selected: var(--bp-box-blue-100);
     --bp-border-tab-border-selected-focus: var(--bp-box-blue-100);
@@ -1466,6 +1469,7 @@
     --bp-border-toggle-text-border-on: var(--bp-box-blue-40);
     --bp-border-toggle-text-border-on-hover: var(--bp-box-blue-40);
     --bp-border-toggle-text-border-on-pressed: var(--bp-box-blue-40);
+    --bp-border-toolbar-border: var(--bp-gray-10);
     --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-gray-65);
@@ -1501,8 +1505,8 @@
     --bp-surface-accordion-surface-collapsed-hover: var(--bp-black-opacity-08);
     --bp-surface-accordion-surface-expanded: var(--bp-gray-white);
     --bp-surface-accordion-surface-expanded-hover: var(--bp-gray-white);
-    --bp-surface-badge-presentation-surface: var(--bp-orange-110);
     --bp-surface-badge-surface-admin: var(--bp-dark-blue-100);
+    --bp-surface-badge-surface-alert: var(--bp-orange-110);
     --bp-surface-badge-surface-annotation: var(--bp-yellorange-100);
     --bp-surface-badge-surface-audio: var(--bp-purple-rain-100);
     --bp-surface-badge-surface-bookmark: var(--bp-box-blue-100);
@@ -1518,22 +1522,25 @@
     --bp-surface-badge-surface-external: var(--bp-gray-50);
     --bp-surface-badge-surface-folderexternal: var(--bp-gray-65);
     --bp-surface-badge-surface-foldershared: var(--bp-light-blue-100);
+    --bp-surface-badge-surface-forward: var(--bp-orange-110);
     --bp-surface-badge-surface-hubs: var(--bp-box-blue-100);
     --bp-surface-badge-surface-image: var(--bp-green-light-120);
+    --bp-surface-badge-surface-in-progress: var(--bp-light-blue-100);
     --bp-surface-badge-surface-mention: var(--bp-light-blue-120);
     --bp-surface-badge-surface-notification: var(--bp-watermelon-red-110);
     --bp-surface-badge-surface-offline: var(--bp-green-light-100);
     --bp-surface-badge-surface-online: var(--bp-green-light-120);
     --bp-surface-badge-surface-pin: var(--bp-gray-10);
+    --bp-surface-badge-surface-presentation: var(--bp-orange-110);
     --bp-surface-badge-surface-progress: var(--bp-yellorange-100);
     --bp-surface-badge-surface-rejected: var(--bp-watermelon-red-110);
     --bp-surface-badge-surface-relay: var(--bp-light-blue-120);
     --bp-surface-badge-surface-task: var(--bp-light-blue-100);
     --bp-surface-badge-surface-taskapproval: var(--bp-light-blue-120);
-    --bp-surface-badge-text-surface: var(--bp-box-blue-100);
-    --bp-surface-badge-three-d-surface: var(--bp-orange-110);
-    --bp-surface-badge-vector-surface: var(--bp-orange-110);
-    --bp-surface-badge-zip-surface: var(--bp-gray-65);
+    --bp-surface-badge-surface-text: var(--bp-box-blue-100);
+    --bp-surface-badge-surface-three-d: var(--bp-orange-110);
+    --bp-surface-badge-surface-vector: var(--bp-orange-110);
+    --bp-surface-badge-surface-zip: var(--bp-gray-65);
     --bp-surface-calendar-surface: var(--bp-gray-white);
     --bp-surface-card-surface: var(--bp-white-opacity-70);
     --bp-surface-card-surface-focus: var(--bp-box-blue-05);
@@ -1629,12 +1636,16 @@
     --bp-surface-filter-chip-surface-single-on-hover: var(--bp-box-blue-100);
     --bp-surface-ghost-surface: var(--bp-gray-02);
     --bp-surface-ghost-surface-secondary: var(--bp-gray-05);
+    --bp-surface-icon-button-surface: var(--bp-black-opacity-00);
+    --bp-surface-icon-button-surface-hover: var(--bp-black-opacity-04);
+    --bp-surface-icon-button-surface-pressed: var(--bp-black-opacity-08);
     --bp-surface-illustration-surface-box: var(--bp-box-blue-100);
     --bp-surface-illustration-surface-box-neutral: var(--bp-box-blue-100);
     --bp-surface-inline-notice-surface-error: var(--bp-watermelon-red-10);
     --bp-surface-inline-notice-surface-info: var(--bp-light-blue-10);
     --bp-surface-inline-notice-surface-success: var(--bp-green-light-10);
     --bp-surface-inline-notice-surface-warning: var(--bp-yellow-10);
+    --bp-surface-inline-table-surface: var(--bp-gray-white);
     --bp-surface-input-surface: var(--bp-gray-white);
     --bp-surface-input-surface-error: var(--bp-gray-white);
     --bp-surface-input-surface-error-focus: var(--bp-gray-white);
@@ -1689,6 +1700,7 @@
     --bp-surface-search-surface-complete: var(--bp-gray-05);
     --bp-surface-search-surface-hover: var(--bp-gray-02);
     --bp-surface-select-surface: var(--bp-gray-white);
+    --bp-surface-side-panel-surface: var(--bp-gray-02);
     --bp-surface-slider-thumb-surface: var(--bp-box-blue-100);
     --bp-surface-slider-thumb-surface-hover: var(--bp-light-blue-100);
     --bp-surface-slider-track-surface: var(--bp-gray-65);
@@ -1732,8 +1744,8 @@
     --bp-surface-switch-surface-off-hover: var(--bp-gray-30);
     --bp-surface-switch-surface-on: var(--bp-box-blue-100);
     --bp-surface-switch-surface-on-hover: var(--bp-light-blue-110);
-    --bp-surface-tab-surface-hover: var(--bp-gray-05);
-    --bp-surface-tab-surface-pressed: var(--bp-gray-10);
+    --bp-surface-tab-surface-hover: var(--bp-black-opacity-00);
+    --bp-surface-tab-surface-pressed: var(--bp-black-opacity-00);
     --bp-surface-text-highlight-surface: var(--bp-yellow-20);
     --bp-surface-toggle-surface: var(--bp-gray-white);
     --bp-surface-toggle-surface-hover: var(--bp-gray-05);
@@ -1750,11 +1762,11 @@
     --bp-surface-toggle-text-surface-on: var(--bp-box-blue-10);
     --bp-surface-toggle-text-surface-on-hover: var(--bp-box-blue-20);
     --bp-surface-toggle-text-surface-on-pressed: var(--bp-box-blue-30);
-    --bp-surface-toolbar-surface: var(--bp-gray-100);
-    --bp-surface-tooltip-surface: var(--bp-black-opacity-90);
-    --bp-surface-tooltip-surface-error: var(--bp-watermelon-red-opacity-20);
+    --bp-surface-tooltip-surface: var(--bp-gray-100);
+    --bp-surface-tooltip-surface-error: var(--bp-watermelon-red-30);
     --bp-surface-upload-surface-brand-neutral: var(--bp-box-blue-100);
     --bp-surface-surface: var(--bp-gray-white);
+    --bp-surface-surface-avatar: var(--bp-black-opacity-04);
     --bp-surface-surface-brand-secondary: var(--bp-box-blue-10);
     --bp-surface-surface-hover: var(--bp-gray-05);
     --bp-surface-surface-quaternary: var(--bp-gray-20);

package/dist/tokens/tokens.d.ts

@@ -866,6 +866,7 @@ export const bpBorderDropdownBorderHover: string;
 export const bpBorderFilterChipBorderMultiOn: string;
 export const bpBorderFilterChipBorderMultiOnHover: string;
 export const bpBorderGridThumbnailBorder: string;
+export const bpBorderInlineTableBorder: string;
 export const bpBorderInputBorder: string;
 export const bpBorderInputBorderError: string;
 export const bpBorderInputBorderErrorFocus: string;
@@ -912,6 +913,7 @@ export const bpBorderStatusBorderHover: string;
 export const bpBorderSwitchBorder: string;
 export const bpBorderSwitchBorderHover: string;
 export const bpBorderTabBorder: string;
+export const bpBorderTabBorderFocus: string;
 export const bpBorderTabBorderHover: string;
 export const bpBorderTabBorderSelected: string;
 export const bpBorderTabBorderSelectedFocus: string;
@@ -926,6 +928,7 @@ export const bpBorderToggleTextBorderOffPressed: string;
 export const bpBorderToggleTextBorderOn: string;
 export const bpBorderToggleTextBorderOnHover: string;
 export const bpBorderToggleTextBorderOnPressed: string;
+export const bpBorderToolbarBorder: string;
 export const bpBorderTooltipBorderError: string;
 export const bpBorderBorderAccordionHover: string;
 export const bpBorder00: string;
@@ -973,14 +976,8 @@ export const bpSurfaceAccordionSurfaceCollapsed: string;
 export const bpSurfaceAccordionSurfaceCollapsedHover: string;
 export const bpSurfaceAccordionSurfaceExpanded: string;
 export const bpSurfaceAccordionSurfaceExpandedHover: string;
-export const bpSurfaceBadgeIllustratorSurface: string;
-export const bpSurfaceBadgeIndesignSurface: string;
-export const bpSurfaceBadgeNumbersSurface: string;
-export const bpSurfaceBadgePhotoshopSurface: string;
-export const bpSurfaceBadgePowerpointSurface: string;
-export const bpSurfaceBadgePresentationSurface: string;
-export const bpSurfaceBadgeSpreadsheetSurface: string;
 export const bpSurfaceBadgeSurfaceAdmin: string;
+export const bpSurfaceBadgeSurfaceAlert: string;
 export const bpSurfaceBadgeSurfaceAnnotation: string;
 export const bpSurfaceBadgeSurfaceAudio: string;
 export const bpSurfaceBadgeSurfaceBookmark: string;
@@ -999,29 +996,38 @@ export const bpSurfaceBadgeSurfaceExcel: string;
 export const bpSurfaceBadgeSurfaceExternal: string;
 export const bpSurfaceBadgeSurfaceFolderexternal: string;
 export const bpSurfaceBadgeSurfaceFoldershared: string;
+export const bpSurfaceBadgeSurfaceForward: string;
 export const bpSurfaceBadgeSurfaceHubs: string;
+export const bpSurfaceBadgeSurfaceIllustrator: string;
 export const bpSurfaceBadgeSurfaceImage: string;
+export const bpSurfaceBadgeSurfaceInProgress: string;
+export const bpSurfaceBadgeSurfaceIndesign: string;
 export const bpSurfaceBadgeSurfaceKeynote: string;
 export const bpSurfaceBadgeSurfaceMention: string;
 export const bpSurfaceBadgeSurfaceNotification: string;
+export const bpSurfaceBadgeSurfaceNumbers: string;
 export const bpSurfaceBadgeSurfaceOffline: string;
 export const bpSurfaceBadgeSurfaceOnline: string;
 export const bpSurfaceBadgeSurfacePages: string;
 export const bpSurfaceBadgeSurfacePdf: string;
+export const bpSurfaceBadgeSurfacePhotoshop: string;
 export const bpSurfaceBadgeSurfacePin: string;
+export const bpSurfaceBadgeSurfacePowerpoint: string;
+export const bpSurfaceBadgeSurfacePresentation: string;
 export const bpSurfaceBadgeSurfaceProgress: string;
 export const bpSurfaceBadgeSurfaceRejected: string;
 export const bpSurfaceBadgeSurfaceRelay: string;
 export const bpSurfaceBadgeSurfaceSheets: string;
 export const bpSurfaceBadgeSurfaceSlides: string;
+export const bpSurfaceBadgeSurfaceSpreadsheet: string;
 export const bpSurfaceBadgeSurfaceTask: string;
 export const bpSurfaceBadgeSurfaceTaskapproval: string;
+export const bpSurfaceBadgeSurfaceText: string;
+export const bpSurfaceBadgeSurfaceThreeD: string;
+export const bpSurfaceBadgeSurfaceVector: string;
 export const bpSurfaceBadgeSurfaceVideo: string;
-export const bpSurfaceBadgeTextSurface: string;
-export const bpSurfaceBadgeThreeDSurface: string;
-export const bpSurfaceBadgeVectorSurface: string;
-export const bpSurfaceBadgeWordSurface: string;
-export const bpSurfaceBadgeZipSurface: string;
+export const bpSurfaceBadgeSurfaceWord: string;
+export const bpSurfaceBadgeSurfaceZip: string;
 export const bpSurfaceCalendarSurface: string;
 export const bpSurfaceCardSurface: string;
 export const bpSurfaceCardSurfaceFocus: string;
@@ -1118,12 +1124,16 @@ export const bpSurfaceFilterChipSurfaceSingleOn: string;
 export const bpSurfaceFilterChipSurfaceSingleOnHover: string;
 export const bpSurfaceGhostSurface: string;
 export const bpSurfaceGhostSurfaceSecondary: string;
+export const bpSurfaceIconButtonSurface: string;
+export const bpSurfaceIconButtonSurfaceHover: string;
+export const bpSurfaceIconButtonSurfacePressed: string;
 export const bpSurfaceIllustrationSurfaceBox: string;
 export const bpSurfaceIllustrationSurfaceBoxNeutral: string;
 export const bpSurfaceInlineNoticeSurfaceError: string;
 export const bpSurfaceInlineNoticeSurfaceInfo: string;
 export const bpSurfaceInlineNoticeSurfaceSuccess: string;
 export const bpSurfaceInlineNoticeSurfaceWarning: string;
+export const bpSurfaceInlineTableSurface: string;
 export const bpSurfaceInputSurface: string;
 export const bpSurfaceInputSurfaceError: string;
 export const bpSurfaceInputSurfaceErrorFocus: string;
@@ -1178,6 +1188,7 @@ export const bpSurfaceSearchSurfaceActive: string;
 export const bpSurfaceSearchSurfaceComplete: string;
 export const bpSurfaceSearchSurfaceHover: string;
 export const bpSurfaceSelectSurface: string;
+export const bpSurfaceSidePanelSurface: string;
 export const bpSurfaceSliderThumbSurface: string;
 export const bpSurfaceSliderThumbSurfaceHover: string;
 export const bpSurfaceSliderTrackSurface: string;
@@ -1244,6 +1255,7 @@ export const bpSurfaceTooltipSurface: string;
 export const bpSurfaceTooltipSurfaceError: string;
 export const bpSurfaceUploadSurfaceBrandNeutral: string;
 export const bpSurfaceSurface: string;
+export const bpSurfaceSurfaceAvatar: string;
 export const bpSurfaceSurfaceBrand: string;
 export const bpSurfaceSurfaceBrandBusy: string;
 export const bpSurfaceSurfaceBrandDisabled: string;

package/dist/tokens/tokens.js

@@ -884,6 +884,7 @@ export const bpBorderDropdownBorderHover = '#6f6f6f';
 export const bpBorderFilterChipBorderMultiOn = '#99c0ee';
 export const bpBorderFilterChipBorderMultiOnHover = '#99c0ee';
 export const bpBorderGridThumbnailBorder = '#e8e8e8';
+export const bpBorderInlineTableBorder = '#e8e8e8';
 export const bpBorderInputBorder = '#909090';
 export const bpBorderInputBorderError = '#ed3757';
 export const bpBorderInputBorderErrorFocus = '#ed3757';
@@ -930,6 +931,7 @@ export const bpBorderStatusBorderHover = 'rgba(0, 0, 0, 0.04)';
 export const bpBorderSwitchBorder = '#bcbcbc';
 export const bpBorderSwitchBorderHover = '#bcbcbc';
 export const bpBorderTabBorder = '#e8e8e8';
+export const bpBorderTabBorderFocus = '#bcbcbc';
 export const bpBorderTabBorderHover = '#bcbcbc';
 export const bpBorderTabBorderSelected = '#0061d5';
 export const bpBorderTabBorderSelectedFocus = '#0061d5';
@@ -944,6 +946,7 @@ export const bpBorderToggleTextBorderOffPressed = '#e8e8e8';
 export const bpBorderToggleTextBorderOn = '#99c0ee';
 export const bpBorderToggleTextBorderOnHover = '#99c0ee';
 export const bpBorderToggleTextBorderOnPressed = '#99c0ee';
+export const bpBorderToolbarBorder = '#e8e8e8';
 export const bpBorderTooltipBorderError = '#f69bab';
 export const bpBorderBorderAccordionHover = '#e8e8e8';
 export const bpBorder00 = '0';
@@ -991,14 +994,8 @@ export const bpSurfaceAccordionSurfaceCollapsed = 'rgba(0, 0, 0, 0.04)';
 export const bpSurfaceAccordionSurfaceCollapsedHover = 'rgba(0, 0, 0, 0.08)';
 export const bpSurfaceAccordionSurfaceExpanded = '#ffffff';
 export const bpSurfaceAccordionSurfaceExpandedHover = '#ffffff';
-export const bpSurfaceBadgeIllustratorSurface = '#051e25';
-export const bpSurfaceBadgeIndesignSurface = '#131415';
-export const bpSurfaceBadgeNumbersSurface = '#00a650';
-export const bpSurfaceBadgePhotoshopSurface = '#131415';
-export const bpSurfaceBadgePowerpointSurface = '#c43e1c';
-export const bpSurfaceBadgePresentationSurface = '#d97417';
-export const bpSurfaceBadgeSpreadsheetSurface = '#3fb87f';
 export const bpSurfaceBadgeSurfaceAdmin = '#003c84';
+export const bpSurfaceBadgeSurfaceAlert = '#d97417';
 export const bpSurfaceBadgeSurfaceAnnotation = '#f5b31b';
 export const bpSurfaceBadgeSurfaceAudio = '#9f3fed';
 export const bpSurfaceBadgeSurfaceBookmark = '#0061d5';
@@ -1017,29 +1014,38 @@ export const bpSurfaceBadgeSurfaceExcel = '#107c41';
 export const bpSurfaceBadgeSurfaceExternal = '#909090';
 export const bpSurfaceBadgeSurfaceFolderexternal = '#6f6f6f';
 export const bpSurfaceBadgeSurfaceFoldershared = '#2486fc';
+export const bpSurfaceBadgeSurfaceForward = '#d97417';
 export const bpSurfaceBadgeSurfaceHubs = '#0061d5';
+export const bpSurfaceBadgeSurfaceIllustrator = '#051e25';
 export const bpSurfaceBadgeSurfaceImage = '#1e9b67';
+export const bpSurfaceBadgeSurfaceInProgress = '#2486fc';
+export const bpSurfaceBadgeSurfaceIndesign = '#131415';
 export const bpSurfaceBadgeSurfaceKeynote = '#0a84ff';
 export const bpSurfaceBadgeSurfaceMention = '#1d6bca';
 export const bpSurfaceBadgeSurfaceNotification = '#d5324e';
+export const bpSurfaceBadgeSurfaceNumbers = '#00a650';
 export const bpSurfaceBadgeSurfaceOffline = '#26c281';
 export const bpSurfaceBadgeSurfaceOnline = '#1e9b67';
 export const bpSurfaceBadgeSurfacePages = '#ff9500';
 export const bpSurfaceBadgeSurfacePdf = '#d0021b';
+export const bpSurfaceBadgeSurfacePhotoshop = '#131415';
 export const bpSurfaceBadgeSurfacePin = '#e8e8e8';
+export const bpSurfaceBadgeSurfacePowerpoint = '#c43e1c';
+export const bpSurfaceBadgeSurfacePresentation = '#d97417';
 export const bpSurfaceBadgeSurfaceProgress = '#f5b31b';
 export const bpSurfaceBadgeSurfaceRejected = '#d5324e';
 export const bpSurfaceBadgeSurfaceRelay = '#1d6bca';
 export const bpSurfaceBadgeSurfaceSheets = '#21a464';
 export const bpSurfaceBadgeSurfaceSlides = '#f7ba00';
+export const bpSurfaceBadgeSurfaceSpreadsheet = '#3fb87f';
 export const bpSurfaceBadgeSurfaceTask = '#2486fc';
 export const bpSurfaceBadgeSurfaceTaskapproval = '#1d6bca';
+export const bpSurfaceBadgeSurfaceText = '#0061d5';
+export const bpSurfaceBadgeSurfaceThreeD = '#d97417';
+export const bpSurfaceBadgeSurfaceVector = '#d97417';
 export const bpSurfaceBadgeSurfaceVideo = '#009aed';
-export const bpSurfaceBadgeTextSurface = '#0061d5';
-export const bpSurfaceBadgeThreeDSurface = '#d97417';
-export const bpSurfaceBadgeVectorSurface = '#d97417';
-export const bpSurfaceBadgeWordSurface = '#185abd';
-export const bpSurfaceBadgeZipSurface = '#6f6f6f';
+export const bpSurfaceBadgeSurfaceWord = '#185abd';
+export const bpSurfaceBadgeSurfaceZip = '#6f6f6f';
 export const bpSurfaceCalendarSurface = '#ffffff';
 export const bpSurfaceCardSurface = 'rgba(255, 255, 255, 0.7)';
 export const bpSurfaceCardSurfaceFocus = '#f2f7fd';
@@ -1136,12 +1142,16 @@ export const bpSurfaceFilterChipSurfaceSingleOn = '#0061d5';
 export const bpSurfaceFilterChipSurfaceSingleOnHover = '#0061d5';
 export const bpSurfaceGhostSurface = '#fbfbfb';
 export const bpSurfaceGhostSurfaceSecondary = '#f4f4f4';
+export const bpSurfaceIconButtonSurface = 'rgba(0, 0, 0, 0)';
+export const bpSurfaceIconButtonSurfaceHover = 'rgba(0, 0, 0, 0.04)';
+export const bpSurfaceIconButtonSurfacePressed = 'rgba(0, 0, 0, 0.08)';
 export const bpSurfaceIllustrationSurfaceBox = '#0061d5';
 export const bpSurfaceIllustrationSurfaceBoxNeutral = '#0061d5';
 export const bpSurfaceInlineNoticeSurfaceError = '#fdebee';
 export const bpSurfaceInlineNoticeSurfaceInfo = '#e9f2fe';
 export const bpSurfaceInlineNoticeSurfaceSuccess = '#e9f8f2';
 export const bpSurfaceInlineNoticeSurfaceWarning = '#fffbe5';
+export const bpSurfaceInlineTableSurface = '#ffffff';
 export const bpSurfaceInputSurface = '#ffffff';
 export const bpSurfaceInputSurfaceError = '#ffffff';
 export const bpSurfaceInputSurfaceErrorFocus = '#ffffff';
@@ -1191,6 +1201,7 @@ export const bpSurfaceSearchSurfaceActive = '#ffffff';
 export const bpSurfaceSearchSurfaceComplete = '#f4f4f4';
 export const bpSurfaceSearchSurfaceHover = '#fbfbfb';
 export const bpSurfaceSelectSurface = '#ffffff';
+export const bpSurfaceSidePanelSurface = '#fbfbfb';
 export const bpSurfaceSliderThumbSurface = '#0061d5';
 export const bpSurfaceSliderThumbSurfaceHover = '#2486fc';
 export const bpSurfaceSliderTrackSurface = '#6f6f6f';
@@ -1234,8 +1245,8 @@ export const bpSurfaceSwitchSurfaceOff = '#d3d3d3';
 export const bpSurfaceSwitchSurfaceOffHover = '#bcbcbc';
 export const bpSurfaceSwitchSurfaceOn = '#0061d5';
 export const bpSurfaceSwitchSurfaceOnHover = '#2079e3';
-export const bpSurfaceTabSurfaceHover = '#f4f4f4';
-export const bpSurfaceTabSurfacePressed = '#e8e8e8';
+export const bpSurfaceTabSurfaceHover = 'rgba(0, 0, 0, 0)';
+export const bpSurfaceTabSurfacePressed = 'rgba(0, 0, 0, 0)';
 export const bpSurfaceTextHighlightSurface = '#fff7cc';
 export const bpSurfaceToggleSurface = '#ffffff';
 export const bpSurfaceToggleSurfaceHover = '#f4f4f4';
@@ -1252,11 +1263,12 @@ export const bpSurfaceToggleTextSurfaceOffPressed = '#e8e8e8';
 export const bpSurfaceToggleTextSurfaceOn = '#e5effa';
 export const bpSurfaceToggleTextSurfaceOnHover = '#ccdff7';
 export const bpSurfaceToggleTextSurfaceOnPressed = '#b2cff2';
-export const bpSurfaceToolbarSurface = '#222222';
-export const bpSurfaceTooltipSurface = 'rgba(0, 0, 0, 0.9)';
-export const bpSurfaceTooltipSurfaceError = 'rgba(237, 55, 87, 0.2)';
+export const bpSurfaceToolbarSurface = '#ffffff';
+export const bpSurfaceTooltipSurface = '#222222';
+export const bpSurfaceTooltipSurfaceError = '#fac3cd';
 export const bpSurfaceUploadSurfaceBrandNeutral = '#0061d5';
 export const bpSurfaceSurface = '#ffffff';
+export const bpSurfaceSurfaceAvatar = 'rgba(0, 0, 0, 0.04)';
 export const bpSurfaceSurfaceBrand = '#0061d5';
 export const bpSurfaceSurfaceBrandBusy = '#0061d5';
 export const bpSurfaceSurfaceBrandDisabled = '#0061d5';

package/dist/tokens/tokens.json

@@ -865,6 +865,7 @@
     "BpBorderFilterChipBorderMultiOn": "#99c0ee",
     "BpBorderFilterChipBorderMultiOnHover": "#99c0ee",
     "BpBorderGridThumbnailBorder": "#e8e8e8",
+    "BpBorderInlineTableBorder": "#e8e8e8",
     "BpBorderInputBorder": "#909090",
     "BpBorderInputBorderError": "#ed3757",
     "BpBorderInputBorderErrorFocus": "#ed3757",
@@ -911,6 +912,7 @@
     "BpBorderSwitchBorder": "#bcbcbc",
     "BpBorderSwitchBorderHover": "#bcbcbc",
     "BpBorderTabBorder": "#e8e8e8",
+    "BpBorderTabBorderFocus": "#bcbcbc",
     "BpBorderTabBorderHover": "#bcbcbc",
     "BpBorderTabBorderSelected": "#0061d5",
     "BpBorderTabBorderSelectedFocus": "#0061d5",
@@ -925,6 +927,7 @@
     "BpBorderToggleTextBorderOn": "#99c0ee",
     "BpBorderToggleTextBorderOnHover": "#99c0ee",
     "BpBorderToggleTextBorderOnPressed": "#99c0ee",
+    "BpBorderToolbarBorder": "#e8e8e8",
     "BpBorderTooltipBorderError": "#f69bab",
     "BpBorderBorderAccordionHover": "#e8e8e8",
     "BpBorder00": "0",
@@ -972,14 +975,8 @@
     "BpSurfaceAccordionSurfaceCollapsedHover": "rgba(0, 0, 0, 0.08)",
     "BpSurfaceAccordionSurfaceExpanded": "#ffffff",
     "BpSurfaceAccordionSurfaceExpandedHover": "#ffffff",
-    "BpSurfaceBadgeIllustratorSurface": "#051e25",
-    "BpSurfaceBadgeIndesignSurface": "#131415",
-    "BpSurfaceBadgeNumbersSurface": "#00a650",
-    "BpSurfaceBadgePhotoshopSurface": "#131415",
-    "BpSurfaceBadgePowerpointSurface": "#c43e1c",
-    "BpSurfaceBadgePresentationSurface": "#d97417",
-    "BpSurfaceBadgeSpreadsheetSurface": "#3fb87f",
     "BpSurfaceBadgeSurfaceAdmin": "#003c84",
+    "BpSurfaceBadgeSurfaceAlert": "#d97417",
     "BpSurfaceBadgeSurfaceAnnotation": "#f5b31b",
     "BpSurfaceBadgeSurfaceAudio": "#9f3fed",
     "BpSurfaceBadgeSurfaceBookmark": "#0061d5",
@@ -998,29 +995,38 @@
     "BpSurfaceBadgeSurfaceExternal": "#909090",
     "BpSurfaceBadgeSurfaceFolderexternal": "#6f6f6f",
     "BpSurfaceBadgeSurfaceFoldershared": "#2486fc",
+    "BpSurfaceBadgeSurfaceForward": "#d97417",
     "BpSurfaceBadgeSurfaceHubs": "#0061d5",
+    "BpSurfaceBadgeSurfaceIllustrator": "#051e25",
     "BpSurfaceBadgeSurfaceImage": "#1e9b67",
+    "BpSurfaceBadgeSurfaceInProgress": "#2486fc",
+    "BpSurfaceBadgeSurfaceIndesign": "#131415",
     "BpSurfaceBadgeSurfaceKeynote": "#0a84ff",
     "BpSurfaceBadgeSurfaceMention": "#1d6bca",
     "BpSurfaceBadgeSurfaceNotification": "#d5324e",
+    "BpSurfaceBadgeSurfaceNumbers": "#00a650",
     "BpSurfaceBadgeSurfaceOffline": "#26c281",
     "BpSurfaceBadgeSurfaceOnline": "#1e9b67",
     "BpSurfaceBadgeSurfacePages": "#ff9500",
     "BpSurfaceBadgeSurfacePdf": "#d0021b",
+    "BpSurfaceBadgeSurfacePhotoshop": "#131415",
     "BpSurfaceBadgeSurfacePin": "#e8e8e8",
+    "BpSurfaceBadgeSurfacePowerpoint": "#c43e1c",
+    "BpSurfaceBadgeSurfacePresentation": "#d97417",
     "BpSurfaceBadgeSurfaceProgress": "#f5b31b",
     "BpSurfaceBadgeSurfaceRejected": "#d5324e",
     "BpSurfaceBadgeSurfaceRelay": "#1d6bca",
     "BpSurfaceBadgeSurfaceSheets": "#21a464",
     "BpSurfaceBadgeSurfaceSlides": "#f7ba00",
+    "BpSurfaceBadgeSurfaceSpreadsheet": "#3fb87f",
     "BpSurfaceBadgeSurfaceTask": "#2486fc",
     "BpSurfaceBadgeSurfaceTaskapproval": "#1d6bca",
+    "BpSurfaceBadgeSurfaceText": "#0061d5",
+    "BpSurfaceBadgeSurfaceThreeD": "#d97417",
+    "BpSurfaceBadgeSurfaceVector": "#d97417",
     "BpSurfaceBadgeSurfaceVideo": "#009aed",
-    "BpSurfaceBadgeTextSurface": "#0061d5",
-    "BpSurfaceBadgeThreeDSurface": "#d97417",
-    "BpSurfaceBadgeVectorSurface": "#d97417",
-    "BpSurfaceBadgeWordSurface": "#185abd",
-    "BpSurfaceBadgeZipSurface": "#6f6f6f",
+    "BpSurfaceBadgeSurfaceWord": "#185abd",
+    "BpSurfaceBadgeSurfaceZip": "#6f6f6f",
     "BpSurfaceCalendarSurface": "#ffffff",
     "BpSurfaceCardSurface": "rgba(255, 255, 255, 0.7)",
     "BpSurfaceCardSurfaceFocus": "#f2f7fd",
@@ -1117,12 +1123,16 @@
     "BpSurfaceFilterChipSurfaceSingleOnHover": "#0061d5",
     "BpSurfaceGhostSurface": "#fbfbfb",
     "BpSurfaceGhostSurfaceSecondary": "#f4f4f4",
+    "BpSurfaceIconButtonSurface": "rgba(0, 0, 0, 0)",
+    "BpSurfaceIconButtonSurfaceHover": "rgba(0, 0, 0, 0.04)",
+    "BpSurfaceIconButtonSurfacePressed": "rgba(0, 0, 0, 0.08)",
     "BpSurfaceIllustrationSurfaceBox": "#0061d5",
     "BpSurfaceIllustrationSurfaceBoxNeutral": "#0061d5",
     "BpSurfaceInlineNoticeSurfaceError": "#fdebee",
     "BpSurfaceInlineNoticeSurfaceInfo": "#e9f2fe",
     "BpSurfaceInlineNoticeSurfaceSuccess": "#e9f8f2",
     "BpSurfaceInlineNoticeSurfaceWarning": "#fffbe5",
+    "BpSurfaceInlineTableSurface": "#ffffff",
     "BpSurfaceInputSurface": "#ffffff",
     "BpSurfaceInputSurfaceError": "#ffffff",
     "BpSurfaceInputSurfaceErrorFocus": "#ffffff",
@@ -1177,6 +1187,7 @@
     "BpSurfaceSearchSurfaceComplete": "#f4f4f4",
     "BpSurfaceSearchSurfaceHover": "#fbfbfb",
     "BpSurfaceSelectSurface": "#ffffff",
+    "BpSurfaceSidePanelSurface": "#fbfbfb",
     "BpSurfaceSliderThumbSurface": "#0061d5",
     "BpSurfaceSliderThumbSurfaceHover": "#2486fc",
     "BpSurfaceSliderTrackSurface": "#6f6f6f",
@@ -1220,8 +1231,8 @@
     "BpSurfaceSwitchSurfaceOffHover": "#bcbcbc",
     "BpSurfaceSwitchSurfaceOn": "#0061d5",
     "BpSurfaceSwitchSurfaceOnHover": "#2079e3",
-    "BpSurfaceTabSurfaceHover": "#f4f4f4",
-    "BpSurfaceTabSurfacePressed": "#e8e8e8",
+    "BpSurfaceTabSurfaceHover": "rgba(0, 0, 0, 0)",
+    "BpSurfaceTabSurfacePressed": "rgba(0, 0, 0, 0)",
     "BpSurfaceTextHighlightSurface": "#fff7cc",
     "BpSurfaceToggleSurface": "#ffffff",
     "BpSurfaceToggleSurfaceHover": "#f4f4f4",
@@ -1238,11 +1249,12 @@
     "BpSurfaceToggleTextSurfaceOn": "#e5effa",
     "BpSurfaceToggleTextSurfaceOnHover": "#ccdff7",
     "BpSurfaceToggleTextSurfaceOnPressed": "#b2cff2",
-    "BpSurfaceToolbarSurface": "#222222",
-    "BpSurfaceTooltipSurface": "rgba(0, 0, 0, 0.9)",
-    "BpSurfaceTooltipSurfaceError": "rgba(237, 55, 87, 0.2)",
+    "BpSurfaceToolbarSurface": "#ffffff",
+    "BpSurfaceTooltipSurface": "#222222",
+    "BpSurfaceTooltipSurfaceError": "#fac3cd",
     "BpSurfaceUploadSurfaceBrandNeutral": "#0061d5",
     "BpSurfaceSurface": "#ffffff",
+    "BpSurfaceSurfaceAvatar": "rgba(0, 0, 0, 0.04)",
     "BpSurfaceSurfaceBrand": "#0061d5",
     "BpSurfaceSurfaceBrandBusy": "#0061d5",
     "BpSurfaceSurfaceBrandDisabled": "#0061d5",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web-assets",
-    "version": "4.62.4",
+    "version": "4.63.1",
     "license": "SEE LICENSE IN LICENSE",
     "scripts": {
         "build-local-all": "yarn nx clone-repo && yarn build-local && nx run blueprint-web-assets:format-lint",
@@ -131,7 +131,7 @@
         }
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.13.17",
+        "@box/storybook-utils": "^0.13.18",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "chalk": "4.1.2",