@box/blueprint-web-assets 4.53.5 → 4.54.2

package/dist/icons/Medium/Section.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;

package/dist/icons/Medium/Section.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+const SvgSection = (props, ref) => (_jsx("svg", { width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", role: "img", ref: ref, ...props, children: _jsx("path", { fill: props.color || '#909090', d: "M19 19a1 1 0 1 1 0 2H5a1 1 0 1 1 0-2h14ZM18 7a4 4 0 0 1 4 4v2a4 4 0 0 1-4 4H6l-.206-.005A4 4 0 0 1 2 13v-2a4 4 0 0 1 4-4h12ZM6 9a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2a2 2 0 0 0-2-2H6Zm13-6a1 1 0 1 1 0 2H5a1 1 0 0 1 0-2h14Z" }) }));
+const ForwardRef = forwardRef(SvgSection);
+export default ForwardRef;

package/dist/icons/Medium/index.d.ts

@@ -72,6 +72,7 @@ export { default as Question } from './Question';
 export { default as Relay } from './Relay';
 export { default as Retention } from './Retention';
 export { default as Search } from './Search';
+export { default as Section } from './Section';
 export { default as Sign } from './Sign';
 export { default as Strikethrough } from './Strikethrough';
 export { default as Table } from './Table';

package/dist/icons/Medium/index.js

@@ -72,6 +72,7 @@ export { default as Question } from './Question';
 export { default as Relay } from './Relay';
 export { default as Retention } from './Retention';
 export { default as Search } from './Search';
+export { default as Section } from './Section';
 export { default as Sign } from './Sign';
 export { default as Strikethrough } from './Strikethrough';
 export { default as Table } from './Table';

package/dist/icons/MediumFilled/Section.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default ForwardRef;

package/dist/icons/MediumFilled/Section.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+const SvgSection = (props, ref) => (_jsx("svg", { width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", role: "img", ref: ref, ...props, children: _jsx("path", { fill: props.color || '#909090', d: "M19 19a1 1 0 1 1 0 2H5a1 1 0 1 1 0-2h14ZM18 7a4 4 0 0 1 4 4v2a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4v-2a4 4 0 0 1 4-4h12Zm1-4a1 1 0 1 1 0 2H5a1 1 0 0 1 0-2h14Z" }) }));
+const ForwardRef = forwardRef(SvgSection);
+export default ForwardRef;

package/dist/icons/MediumFilled/index.d.ts

@@ -18,6 +18,7 @@ export { default as Notes } from './Notes';
 export { default as Question } from './Question';
 export { default as Relay } from './Relay';
 export { default as Search } from './Search';
+export { default as Section } from './Section';
 export { default as Tasks } from './Tasks';
 export { default as ThumbsDown } from './ThumbsDown';
 export { default as ThumbsUp } from './ThumbsUp';

package/dist/icons/MediumFilled/index.js

@@ -18,6 +18,7 @@ export { default as Notes } from './Notes';
 export { default as Question } from './Question';
 export { default as Relay } from './Relay';
 export { default as Search } from './Search';
+export { default as Section } from './Section';
 export { default as Tasks } from './Tasks';
 export { default as ThumbsDown } from './ThumbsDown';
 export { default as ThumbsUp } from './ThumbsUp';

package/dist/tokens/px-tokens.d.ts

@@ -27,6 +27,9 @@ export const SurfaceSurfaceBrandDisabled: string;
 export const SurfaceCtaSurfaceSecondary: string;
 export const SurfaceCtaSurfaceSecondaryBusy: string;
 export const SurfaceCtaSurfaceSecondaryDisabled: string;
+export const SurfaceCtaDestructiveSurfaceTertiary: string;
+export const SurfaceCtaDestructiveSurfaceTertiaryHover: string;
+export const SurfaceCtaDestructiveSurfaceTertiaryPressed: string;
 export const SurfaceCtaSurfaceSecondaryHover: string;
 export const SurfaceCtaSurfaceSecondaryFocus: string;
 export const SurfaceCtaSurfaceSecondaryPressed: string;
@@ -195,6 +198,27 @@ export const SurfaceBadgeSheetsSurface: string;
 export const SurfaceBadgePagesSurface: string;
 export const SurfaceBadgeKeynoteSurface: string;
 export const SurfaceBadgeVideoSurface: string;
+export const SurfaceBadgeBookmarkSurface: string;
+export const SurfaceBadgeHubsSurface: string;
+export const SurfaceBadgeBoxappsSurface: string;
+export const SurfaceBadgeAudioSurface: string;
+export const SurfaceBadgeCodeSurface: string;
+export const SurfaceBadgeDefaultSurface: string;
+export const SurfaceBadgeDrawingSurface: string;
+export const SurfaceBadgeExcelSurface: string;
+export const SurfaceBadgeSlidesSurface: string;
+export const SurfaceBadgeIllustratorSurface: string;
+export const SurfaceBadgeIndesignSurface: string;
+export const SurfaceBadgeNumbersSurface: string;
+export const SurfaceBadgePhotoshopSurface: string;
+export const SurfaceBadgePowerpointSurface: string;
+export const SurfaceBadgePresentationSurface: string;
+export const SurfaceBadgeSpreadsheetSurface: string;
+export const SurfaceBadgeTextSurface: string;
+export const SurfaceBadgeThreeDSurface: string;
+export const SurfaceBadgeVectorSurface: string;
+export const SurfaceBadgeWordSurface: string;
+export const SurfaceBadgeZipSurface: string;
 export const SurfaceChipButtonSurface: string;
 export const SurfaceChipButtonSurfaceHover: string;
 export const SurfacePageSurface: string;
@@ -350,6 +374,9 @@ export const IconCtaIconOnColorHover: string;
 export const IconCtaIconOnColorPressed: string;
 export const IconIconBlue: string;
 export const IconIconDestructiveOnLight: string;
+export const IconIconIllustrator: string;
+export const IconIconIndesign: string;
+export const IconIconPhotoshop: string;
 export const OutlineFocusOnLight: string;
 export const OutlineFocusOnDark: string;
 export const TextTextOnLight: string;
@@ -395,6 +422,14 @@ export const BrandSignTertiary: string;
 export const BrandBoxAi100: string;
 export const BrandBoxAi120: string;
 export const BrandBoxAi140: string;
+export const FullscreenPageHeaderHeight: string;
+export const FullscreenPageHeaderLeftPadding: string;
+export const FullscreenPageHeaderRightPadding: string;
+export const FullscreenPageHeaderLeftElementsGap: string;
+export const FullscreenPageHeaderRightElementsGap: string;
+export const FullscreenPageHeaderTitleGap: string;
+export const FullscreenPageHeaderSubtitleGap: string;
+export const BackButtonWidth: string;
 export const Gray10: string;
 export const Gray20: string;
 export const Gray30: string;

package/dist/tokens/px-tokens.js

@@ -27,6 +27,9 @@ export const SurfaceSurfaceBrandDisabled = '#0061d5';
 export const SurfaceCtaSurfaceSecondary = '#ffffff';
 export const SurfaceCtaSurfaceSecondaryBusy = '#ffffff';
 export const SurfaceCtaSurfaceSecondaryDisabled = '#ffffff';
+export const SurfaceCtaDestructiveSurfaceTertiary = 'rgba(0, 0, 0, 0)';
+export const SurfaceCtaDestructiveSurfaceTertiaryHover = '#fef5f6';
+export const SurfaceCtaDestructiveSurfaceTertiaryPressed = '#fdebee';
 export const SurfaceCtaSurfaceSecondaryHover = '#f4f4f4';
 export const SurfaceCtaSurfaceSecondaryFocus = '#f4f4f4';
 export const SurfaceCtaSurfaceSecondaryPressed = '#e8e8e8';
@@ -167,8 +170,8 @@ export const SurfaceTabSurfaceHover = '#f4f4f4';
 export const SurfaceTabSurfacePressed = '#e8e8e8';
 export const SurfaceAccordionSurface = '#ffffff';
 export const SurfaceAccordionSurfaceHover = '#f4f4f4';
-export const SurfaceBadgeImageSurface = '#26c281';
-export const SurfaceBadgeCanvasSurface = '#f1811a';
+export const SurfaceBadgeImageSurface = '#1e9b67';
+export const SurfaceBadgeCanvasSurface = '#d97417';
 export const SurfaceBadgeBoxnoteSurface = '#e8e8e8';
 export const SurfaceBadgeFolderexternalSurface = '#6f6f6f';
 export const SurfaceBadgeFoldersharedSurface = '#2486fc';
@@ -177,7 +180,7 @@ export const SurfaceBadgeMentionSurface = '#1d6bca';
 export const SurfaceBadgeTaskSurface = '#2486fc';
 export const SurfaceBadgeTaskapprovalSurface = '#1d6bca';
 export const SurfaceBadgeAnnotationSurface = '#f5b31b';
-export const SurfaceBadgeCompletedSurface = '#26c281';
+export const SurfaceBadgeCompletedSurface = '#1e9b67';
 export const SurfaceBadgeRejectedSurface = '#d5324e';
 export const SurfaceBadgeErrorSurface = '#d5324e';
 export const SurfaceBadgeExternalSurface = '#909090';
@@ -195,6 +198,27 @@ export const SurfaceBadgeSheetsSurface = '#21a464';
 export const SurfaceBadgePagesSurface = '#ff9500';
 export const SurfaceBadgeKeynoteSurface = '#0a84ff';
 export const SurfaceBadgeVideoSurface = '#009aed';
+export const SurfaceBadgeBookmarkSurface = '#0061d5';
+export const SurfaceBadgeHubsSurface = '#0061d5';
+export const SurfaceBadgeBoxappsSurface = '#0061d5';
+export const SurfaceBadgeAudioSurface = '#9f3fed';
+export const SurfaceBadgeCodeSurface = '#ed3757';
+export const SurfaceBadgeDefaultSurface = '#6f6f6f';
+export const SurfaceBadgeDrawingSurface = '#009aed';
+export const SurfaceBadgeExcelSurface = '#107c41';
+export const SurfaceBadgeSlidesSurface = '#f7ba00';
+export const SurfaceBadgeIllustratorSurface = '#051e25';
+export const SurfaceBadgeIndesignSurface = '#131415';
+export const SurfaceBadgeNumbersSurface = '#00a650';
+export const SurfaceBadgePhotoshopSurface = '#131415';
+export const SurfaceBadgePowerpointSurface = '#c43e1c';
+export const SurfaceBadgePresentationSurface = '#d97417';
+export const SurfaceBadgeSpreadsheetSurface = '#3fb87f';
+export const SurfaceBadgeTextSurface = '#0061d5';
+export const SurfaceBadgeThreeDSurface = '#d97417';
+export const SurfaceBadgeVectorSurface = '#d97417';
+export const SurfaceBadgeWordSurface = '#185abd';
+export const SurfaceBadgeZipSurface = '#6f6f6f';
 export const SurfaceChipButtonSurface = 'rgba(0, 0, 0, 0.04)';
 export const SurfaceChipButtonSurfaceHover = 'rgba(0, 0, 0, 0.08)';
 export const SurfacePageSurface = '#ffffff';
@@ -324,7 +348,7 @@ export const BorderToggletextBorderOnAiPressed = 'linear-gradient(135deg, #FE03D
 export const BorderToggletextBorderOffAi = '#bcbcbc';
 export const BorderToggletextBorderOffAiHover = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
 export const BorderToggletextBorderOffAiPressed = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
-export const BorderDividerBorderBrand = '#e8e8e8';
+export const BorderDividerBorderBrand = 'rgba(232, 232, 232, 0.1)';
 export const IconIconOnLight = '#222222';
 export const IconIconOnLightSecondary = '#6f6f6f';
 export const IconIconOnLightTertiary = '#909090';
@@ -350,6 +374,9 @@ export const IconCtaIconOnColorHover = '#000000';
 export const IconCtaIconOnColorPressed = '#000000';
 export const IconIconBlue = '#0061d5';
 export const IconIconDestructiveOnLight = '#d5324e';
+export const IconIconIllustrator = '#ff9400';
+export const IconIconIndesign = '#ff57a1';
+export const IconIconPhotoshop = '#26c9ff';
 export const OutlineFocusOnLight = '#2486fc';
 export const OutlineFocusOnDark = '#ffffff';
 export const TextTextOnLight = '#222222';
@@ -395,6 +422,14 @@ export const BrandSignTertiary = '#e5ebf2';
 export const BrandBoxAi100 = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
 export const BrandBoxAi120 = 'linear-gradient(135deg, #CB02B0 0%, #1F6AC8 100%)';
 export const BrandBoxAi140 = 'linear-gradient(135deg, #980284 0%, #174F96 100%)';
+export const FullscreenPageHeaderHeight = '64px';
+export const FullscreenPageHeaderLeftPadding = '8px';
+export const FullscreenPageHeaderRightPadding = '16px';
+export const FullscreenPageHeaderLeftElementsGap = '4px';
+export const FullscreenPageHeaderRightElementsGap = '8px';
+export const FullscreenPageHeaderTitleGap = '8px';
+export const FullscreenPageHeaderSubtitleGap = '4px';
+export const BackButtonWidth = '24px';
 export const Gray10 = '#e8e8e8';
 export const Gray20 = '#d3d3d3';
 export const Gray30 = '#bcbcbc';

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

@@ -8,13 +8,34 @@
     --surface-surface-brand-pressed: #004eac;
     --surface-surface-brand-busy: #0061d5;
     --surface-surface-brand-disabled: #0061d5;
+    --surface-cta-destructive-surface-tertiary: rgba(0, 0, 0, 0);
+    --surface-badge-image-surface: #1e9b67;
+    --surface-badge-canvas-surface: #d97417;
+    --surface-badge-completed-surface: #1e9b67;
     --surface-badge-pdf-surface: #d0021b;
     --surface-badge-docs-surface: #4083f7;
     --surface-badge-sheets-surface: #21a464;
     --surface-badge-pages-surface: #ff9500;
     --surface-badge-keynote-surface: #0a84ff;
     --surface-badge-video-surface: #009aed;
+    --surface-badge-drawing-surface: #009aed;
+    --surface-badge-excel-surface: #107c41;
+    --surface-badge-slides-surface: #f7ba00;
+    --surface-badge-illustrator-surface: #051e25;
+    --surface-badge-indesign-surface: #131415;
+    --surface-badge-numbers-surface: #00a650;
+    --surface-badge-photoshop-surface: #131415;
+    --surface-badge-powerpoint-surface: #c43e1c;
+    --surface-badge-presentation-surface: #d97417;
+    --surface-badge-spreadsheet-surface: #3fb87f;
+    --surface-badge-three-d-surface: #d97417;
+    --surface-badge-vector-surface: #d97417;
+    --surface-badge-word-surface: #185abd;
     --border-cta-border-outline-disabled: #646464;
+    --border-divider-border-brand: rgba(232, 232, 232, 0.1);
+    --icon-icon-illustrator: #ff9400;
+    --icon-icon-indesign: #ff57a1;
+    --icon-icon-photoshop: #26c9ff;
     --brand-box-ai-100: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%);
     --brand-box-ai-120: linear-gradient(135deg, #cb02b0 0%, #1f6ac8 100%);
     --brand-box-ai-140: linear-gradient(135deg, #980284 0%, #174f96 100%);
@@ -357,6 +378,8 @@
     --surface-cta-surface-secondary: var(--gray-white);
     --surface-cta-surface-secondary-busy: var(--gray-white);
     --surface-cta-surface-secondary-disabled: var(--gray-white);
+    --surface-cta-destructive-surface-tertiary-hover: var(--watermelon-red-05);
+    --surface-cta-destructive-surface-tertiary-pressed: var(--watermelon-red-10);
     --surface-cta-surface-secondary-hover: var(--gray-05);
     --surface-cta-surface-secondary-focus: var(--gray-05);
     --surface-cta-surface-secondary-pressed: var(--gray-10);
@@ -497,8 +520,6 @@
     --surface-tab-surface-pressed: var(--gray-10);
     --surface-accordion-surface: var(--gray-white);
     --surface-accordion-surface-hover: var(--gray-05);
-    --surface-badge-image-surface: var(--green-light-100);
-    --surface-badge-canvas-surface: var(--orange-100);
     --surface-badge-boxnote-surface: var(--gray-10);
     --surface-badge-folderexternal-surface: var(--gray-65);
     --surface-badge-foldershared-surface: var(--light-blue-100);
@@ -507,7 +528,6 @@
     --surface-badge-task-surface: var(--light-blue-100);
     --surface-badge-taskapproval-surface: var(--light-blue-120);
     --surface-badge-annotation-surface: var(--yellorange-100);
-    --surface-badge-completed-surface: var(--green-light-100);
     --surface-badge-rejected-surface: var(--watermelon-red-110);
     --surface-badge-error-surface: var(--watermelon-red-110);
     --surface-badge-external-surface: var(--gray-50);
@@ -519,6 +539,14 @@
     --surface-badge-offline-surface: var(--green-light-100);
     --surface-badge-progress-surface: var(--yellorange-100);
     --surface-badge-notification-surface: var(--watermelon-red-110);
+    --surface-badge-bookmark-surface: var(--box-blue-100);
+    --surface-badge-hubs-surface: var(--box-blue-100);
+    --surface-badge-boxapps-surface: var(--box-blue-100);
+    --surface-badge-audio-surface: var(--purple-rain-100);
+    --surface-badge-code-surface: var(--watermelon-red-100);
+    --surface-badge-default-surface: var(--gray-65);
+    --surface-badge-text-surface: var(--box-blue-100);
+    --surface-badge-zip-surface: var(--gray-65);
     --surface-chip-button-surface: var(--black-opacity-04);
     --surface-chip-button-surface-hover: var(--black-opacity-08);
     --surface-page-surface: var(--gray-white);
@@ -714,6 +742,14 @@
     --brand-sign-primary: var(--dark-blue-100);
     --brand-sign-secondary: var(--dark-blue-20);
     --brand-sign-tertiary: var(--dark-blue-10);
+    --fullscreen-page-header-height: var(--size-16);
+    --fullscreen-page-header-left-padding: var(--space-2);
+    --fullscreen-page-header-right-padding: var(--space-4);
+    --fullscreen-page-header-left-elements-gap: var(--space-1);
+    --fullscreen-page-header-right-elements-gap: var(--space-2);
+    --fullscreen-page-header-title-gap: var(--space-2);
+    --fullscreen-page-header-subtitle-gap: var(--space-1);
+    --back-button-width: var(--size-6);
     --title-subtitle-font-family: var(--font-families-sans);
     --title-subtitle-font-weight: var(--font-weights-bold);
     --title-small-font-family: var(--font-families-sans);
@@ -750,7 +786,6 @@
     --motion-transition-slide-in: var(--animation-duration-4) var(--animation-easing-ease-base);
     --notification-default-font-family: var(--font-families-sans);
     --notification-default-font-weight: var(--font-weights-bold);
-    --border-divider-border-brand: var(--border-divider-border);
     /*Auto-updated from tokens/light_mode_value/tokens.css by append-figma-vars-to-css.js
  */
     --bp-border-cta-border-outline-disabled: #646464;

package/dist/tokens/tokens.d.ts

@@ -23,6 +23,9 @@ export const SurfaceSurfaceBrandDisabled: string;
 export const SurfaceCtaSurfaceSecondary: string;
 export const SurfaceCtaSurfaceSecondaryBusy: string;
 export const SurfaceCtaSurfaceSecondaryDisabled: string;
+export const SurfaceCtaDestructiveSurfaceTertiary: string;
+export const SurfaceCtaDestructiveSurfaceTertiaryHover: string;
+export const SurfaceCtaDestructiveSurfaceTertiaryPressed: string;
 export const SurfaceCtaSurfaceSecondaryHover: string;
 export const SurfaceCtaSurfaceSecondaryFocus: string;
 export const SurfaceCtaSurfaceSecondaryPressed: string;
@@ -191,6 +194,27 @@ export const SurfaceBadgeSheetsSurface: string;
 export const SurfaceBadgePagesSurface: string;
 export const SurfaceBadgeKeynoteSurface: string;
 export const SurfaceBadgeVideoSurface: string;
+export const SurfaceBadgeBookmarkSurface: string;
+export const SurfaceBadgeHubsSurface: string;
+export const SurfaceBadgeBoxappsSurface: string;
+export const SurfaceBadgeAudioSurface: string;
+export const SurfaceBadgeCodeSurface: string;
+export const SurfaceBadgeDefaultSurface: string;
+export const SurfaceBadgeDrawingSurface: string;
+export const SurfaceBadgeExcelSurface: string;
+export const SurfaceBadgeSlidesSurface: string;
+export const SurfaceBadgeIllustratorSurface: string;
+export const SurfaceBadgeIndesignSurface: string;
+export const SurfaceBadgeNumbersSurface: string;
+export const SurfaceBadgePhotoshopSurface: string;
+export const SurfaceBadgePowerpointSurface: string;
+export const SurfaceBadgePresentationSurface: string;
+export const SurfaceBadgeSpreadsheetSurface: string;
+export const SurfaceBadgeTextSurface: string;
+export const SurfaceBadgeThreeDSurface: string;
+export const SurfaceBadgeVectorSurface: string;
+export const SurfaceBadgeWordSurface: string;
+export const SurfaceBadgeZipSurface: string;
 export const SurfaceChipButtonSurface: string;
 export const SurfaceChipButtonSurfaceHover: string;
 export const SurfacePageSurface: string;
@@ -346,6 +370,9 @@ export const IconCtaIconOnColorHover: string;
 export const IconCtaIconOnColorPressed: string;
 export const IconIconBlue: string;
 export const IconIconDestructiveOnLight: string;
+export const IconIconIllustrator: string;
+export const IconIconIndesign: string;
+export const IconIconPhotoshop: string;
 export const OutlineFocusOnLight: string;
 export const OutlineFocusOnDark: string;
 export const TextTextOnLight: string;
@@ -391,6 +418,14 @@ export const BrandSignTertiary: string;
 export const BrandBoxAi100: string;
 export const BrandBoxAi120: string;
 export const BrandBoxAi140: string;
+export const FullscreenPageHeaderHeight: string;
+export const FullscreenPageHeaderLeftPadding: string;
+export const FullscreenPageHeaderRightPadding: string;
+export const FullscreenPageHeaderLeftElementsGap: string;
+export const FullscreenPageHeaderRightElementsGap: string;
+export const FullscreenPageHeaderTitleGap: string;
+export const FullscreenPageHeaderSubtitleGap: string;
+export const BackButtonWidth: string;
 export const Gray10: string;
 export const Gray20: string;
 export const Gray30: string;

package/dist/tokens/tokens.js

@@ -23,6 +23,9 @@ export const SurfaceSurfaceBrandDisabled = '#0061d5';
 export const SurfaceCtaSurfaceSecondary = '#ffffff';
 export const SurfaceCtaSurfaceSecondaryBusy = '#ffffff';
 export const SurfaceCtaSurfaceSecondaryDisabled = '#ffffff';
+export const SurfaceCtaDestructiveSurfaceTertiary = 'rgba(0, 0, 0, 0)';
+export const SurfaceCtaDestructiveSurfaceTertiaryHover = '#fef5f6';
+export const SurfaceCtaDestructiveSurfaceTertiaryPressed = '#fdebee';
 export const SurfaceCtaSurfaceSecondaryHover = '#f4f4f4';
 export const SurfaceCtaSurfaceSecondaryFocus = '#f4f4f4';
 export const SurfaceCtaSurfaceSecondaryPressed = '#e8e8e8';
@@ -163,8 +166,8 @@ export const SurfaceTabSurfaceHover = '#f4f4f4';
 export const SurfaceTabSurfacePressed = '#e8e8e8';
 export const SurfaceAccordionSurface = '#ffffff';
 export const SurfaceAccordionSurfaceHover = '#f4f4f4';
-export const SurfaceBadgeImageSurface = '#26c281';
-export const SurfaceBadgeCanvasSurface = '#f1811a';
+export const SurfaceBadgeImageSurface = '#1e9b67';
+export const SurfaceBadgeCanvasSurface = '#d97417';
 export const SurfaceBadgeBoxnoteSurface = '#e8e8e8';
 export const SurfaceBadgeFolderexternalSurface = '#6f6f6f';
 export const SurfaceBadgeFoldersharedSurface = '#2486fc';
@@ -173,7 +176,7 @@ export const SurfaceBadgeMentionSurface = '#1d6bca';
 export const SurfaceBadgeTaskSurface = '#2486fc';
 export const SurfaceBadgeTaskapprovalSurface = '#1d6bca';
 export const SurfaceBadgeAnnotationSurface = '#f5b31b';
-export const SurfaceBadgeCompletedSurface = '#26c281';
+export const SurfaceBadgeCompletedSurface = '#1e9b67';
 export const SurfaceBadgeRejectedSurface = '#d5324e';
 export const SurfaceBadgeErrorSurface = '#d5324e';
 export const SurfaceBadgeExternalSurface = '#909090';
@@ -191,6 +194,27 @@ export const SurfaceBadgeSheetsSurface = '#21a464';
 export const SurfaceBadgePagesSurface = '#ff9500';
 export const SurfaceBadgeKeynoteSurface = '#0a84ff';
 export const SurfaceBadgeVideoSurface = '#009aed';
+export const SurfaceBadgeBookmarkSurface = '#0061d5';
+export const SurfaceBadgeHubsSurface = '#0061d5';
+export const SurfaceBadgeBoxappsSurface = '#0061d5';
+export const SurfaceBadgeAudioSurface = '#9f3fed';
+export const SurfaceBadgeCodeSurface = '#ed3757';
+export const SurfaceBadgeDefaultSurface = '#6f6f6f';
+export const SurfaceBadgeDrawingSurface = '#009aed';
+export const SurfaceBadgeExcelSurface = '#107c41';
+export const SurfaceBadgeSlidesSurface = '#f7ba00';
+export const SurfaceBadgeIllustratorSurface = '#051e25';
+export const SurfaceBadgeIndesignSurface = '#131415';
+export const SurfaceBadgeNumbersSurface = '#00a650';
+export const SurfaceBadgePhotoshopSurface = '#131415';
+export const SurfaceBadgePowerpointSurface = '#c43e1c';
+export const SurfaceBadgePresentationSurface = '#d97417';
+export const SurfaceBadgeSpreadsheetSurface = '#3fb87f';
+export const SurfaceBadgeTextSurface = '#0061d5';
+export const SurfaceBadgeThreeDSurface = '#d97417';
+export const SurfaceBadgeVectorSurface = '#d97417';
+export const SurfaceBadgeWordSurface = '#185abd';
+export const SurfaceBadgeZipSurface = '#6f6f6f';
 export const SurfaceChipButtonSurface = 'rgba(0, 0, 0, 0.04)';
 export const SurfaceChipButtonSurfaceHover = 'rgba(0, 0, 0, 0.08)';
 export const SurfacePageSurface = '#ffffff';
@@ -320,7 +344,7 @@ export const BorderToggletextBorderOnAiPressed = 'linear-gradient(135deg, #FE03D
 export const BorderToggletextBorderOffAi = '#bcbcbc';
 export const BorderToggletextBorderOffAiHover = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
 export const BorderToggletextBorderOffAiPressed = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
-export const BorderDividerBorderBrand = '#e8e8e8';
+export const BorderDividerBorderBrand = 'rgba(232, 232, 232, 0.1)';
 export const IconIconOnLight = '#222222';
 export const IconIconOnLightSecondary = '#6f6f6f';
 export const IconIconOnLightTertiary = '#909090';
@@ -346,6 +370,9 @@ export const IconCtaIconOnColorHover = '#000000';
 export const IconCtaIconOnColorPressed = '#000000';
 export const IconIconBlue = '#0061d5';
 export const IconIconDestructiveOnLight = '#d5324e';
+export const IconIconIllustrator = '#ff9400';
+export const IconIconIndesign = '#ff57a1';
+export const IconIconPhotoshop = '#26c9ff';
 export const OutlineFocusOnLight = '#2486fc';
 export const OutlineFocusOnDark = '#ffffff';
 export const TextTextOnLight = '#222222';
@@ -391,6 +418,14 @@ export const BrandSignTertiary = '#e5ebf2';
 export const BrandBoxAi100 = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
 export const BrandBoxAi120 = 'linear-gradient(135deg, #CB02B0 0%, #1F6AC8 100%)';
 export const BrandBoxAi140 = 'linear-gradient(135deg, #980284 0%, #174F96 100%)';
+export const FullscreenPageHeaderHeight = '4rem';
+export const FullscreenPageHeaderLeftPadding = '0.5rem';
+export const FullscreenPageHeaderRightPadding = '1rem';
+export const FullscreenPageHeaderLeftElementsGap = '0.25rem';
+export const FullscreenPageHeaderRightElementsGap = '0.5rem';
+export const FullscreenPageHeaderTitleGap = '0.5rem';
+export const FullscreenPageHeaderSubtitleGap = '0.25rem';
+export const BackButtonWidth = '1.5rem';
 export const Gray10 = '#e8e8e8';
 export const Gray20 = '#d3d3d3';
 export const Gray30 = '#bcbcbc';

package/dist/tokens/tokens.json

@@ -24,6 +24,9 @@
     "SurfaceCtaSurfaceSecondary": "#ffffff",
     "SurfaceCtaSurfaceSecondaryBusy": "#ffffff",
     "SurfaceCtaSurfaceSecondaryDisabled": "#ffffff",
+    "SurfaceCtaDestructiveSurfaceTertiary": "rgba(0, 0, 0, 0)",
+    "SurfaceCtaDestructiveSurfaceTertiaryHover": "#fef5f6",
+    "SurfaceCtaDestructiveSurfaceTertiaryPressed": "#fdebee",
     "SurfaceCtaSurfaceSecondaryHover": "#f4f4f4",
     "SurfaceCtaSurfaceSecondaryFocus": "#f4f4f4",
     "SurfaceCtaSurfaceSecondaryPressed": "#e8e8e8",
@@ -164,8 +167,8 @@
     "SurfaceTabSurfacePressed": "#e8e8e8",
     "SurfaceAccordionSurface": "#ffffff",
     "SurfaceAccordionSurfaceHover": "#f4f4f4",
-    "SurfaceBadgeImageSurface": "#26c281",
-    "SurfaceBadgeCanvasSurface": "#f1811a",
+    "SurfaceBadgeImageSurface": "#1e9b67",
+    "SurfaceBadgeCanvasSurface": "#d97417",
     "SurfaceBadgeBoxnoteSurface": "#e8e8e8",
     "SurfaceBadgeFolderexternalSurface": "#6f6f6f",
     "SurfaceBadgeFoldersharedSurface": "#2486fc",
@@ -174,7 +177,7 @@
     "SurfaceBadgeTaskSurface": "#2486fc",
     "SurfaceBadgeTaskapprovalSurface": "#1d6bca",
     "SurfaceBadgeAnnotationSurface": "#f5b31b",
-    "SurfaceBadgeCompletedSurface": "#26c281",
+    "SurfaceBadgeCompletedSurface": "#1e9b67",
     "SurfaceBadgeRejectedSurface": "#d5324e",
     "SurfaceBadgeErrorSurface": "#d5324e",
     "SurfaceBadgeExternalSurface": "#909090",
@@ -192,6 +195,27 @@
     "SurfaceBadgePagesSurface": "#ff9500",
     "SurfaceBadgeKeynoteSurface": "#0a84ff",
     "SurfaceBadgeVideoSurface": "#009aed",
+    "SurfaceBadgeBookmarkSurface": "#0061d5",
+    "SurfaceBadgeHubsSurface": "#0061d5",
+    "SurfaceBadgeBoxappsSurface": "#0061d5",
+    "SurfaceBadgeAudioSurface": "#9f3fed",
+    "SurfaceBadgeCodeSurface": "#ed3757",
+    "SurfaceBadgeDefaultSurface": "#6f6f6f",
+    "SurfaceBadgeDrawingSurface": "#009aed",
+    "SurfaceBadgeExcelSurface": "#107c41",
+    "SurfaceBadgeSlidesSurface": "#f7ba00",
+    "SurfaceBadgeIllustratorSurface": "#051e25",
+    "SurfaceBadgeIndesignSurface": "#131415",
+    "SurfaceBadgeNumbersSurface": "#00a650",
+    "SurfaceBadgePhotoshopSurface": "#131415",
+    "SurfaceBadgePowerpointSurface": "#c43e1c",
+    "SurfaceBadgePresentationSurface": "#d97417",
+    "SurfaceBadgeSpreadsheetSurface": "#3fb87f",
+    "SurfaceBadgeTextSurface": "#0061d5",
+    "SurfaceBadgeThreeDSurface": "#d97417",
+    "SurfaceBadgeVectorSurface": "#d97417",
+    "SurfaceBadgeWordSurface": "#185abd",
+    "SurfaceBadgeZipSurface": "#6f6f6f",
     "SurfaceChipButtonSurface": "rgba(0, 0, 0, 0.04)",
     "SurfaceChipButtonSurfaceHover": "rgba(0, 0, 0, 0.08)",
     "SurfacePageSurface": "#ffffff",
@@ -321,7 +345,7 @@
     "BorderToggletextBorderOffAi": "#bcbcbc",
     "BorderToggletextBorderOffAiHover": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
     "BorderToggletextBorderOffAiPressed": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
-    "BorderDividerBorderBrand": "#e8e8e8",
+    "BorderDividerBorderBrand": "rgba(232, 232, 232, 0.1)",
     "IconIconOnLight": "#222222",
     "IconIconOnLightSecondary": "#6f6f6f",
     "IconIconOnLightTertiary": "#909090",
@@ -347,6 +371,9 @@
     "IconCtaIconOnColorPressed": "#000000",
     "IconIconBlue": "#0061d5",
     "IconIconDestructiveOnLight": "#d5324e",
+    "IconIconIllustrator": "#ff9400",
+    "IconIconIndesign": "#ff57a1",
+    "IconIconPhotoshop": "#26c9ff",
     "OutlineFocusOnLight": "#2486fc",
     "OutlineFocusOnDark": "#ffffff",
     "TextTextOnLight": "#222222",
@@ -392,6 +419,14 @@
     "BrandBoxAi100": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
     "BrandBoxAi120": "linear-gradient(135deg, #CB02B0 0%, #1F6AC8 100%)",
     "BrandBoxAi140": "linear-gradient(135deg, #980284 0%, #174F96 100%)",
+    "FullscreenPageHeaderHeight": "4rem",
+    "FullscreenPageHeaderLeftPadding": "0.5rem",
+    "FullscreenPageHeaderRightPadding": "1rem",
+    "FullscreenPageHeaderLeftElementsGap": "0.25rem",
+    "FullscreenPageHeaderRightElementsGap": "0.5rem",
+    "FullscreenPageHeaderTitleGap": "0.5rem",
+    "FullscreenPageHeaderSubtitleGap": "0.25rem",
+    "BackButtonWidth": "1.5rem",
     "Gray10": "#e8e8e8",
     "Gray20": "#d3d3d3",
     "Gray30": "#bcbcbc",

package/dist/tokens/tokens.scss

@@ -23,6 +23,9 @@ $surface-surface-brand-disabled: #0061d5 !default;
 $surface-cta-surface-secondary: #ffffff !default;
 $surface-cta-surface-secondary-busy: #ffffff !default;
 $surface-cta-surface-secondary-disabled: #ffffff !default;
+$surface-cta-destructive-surface-tertiary: rgba(0, 0, 0, 0) !default;
+$surface-cta-destructive-surface-tertiary-hover: #fef5f6 !default;
+$surface-cta-destructive-surface-tertiary-pressed: #fdebee !default;
 $surface-cta-surface-secondary-hover: #f4f4f4 !default;
 $surface-cta-surface-secondary-focus: #f4f4f4 !default;
 $surface-cta-surface-secondary-pressed: #e8e8e8 !default;
@@ -163,8 +166,8 @@ $surface-tab-surface-hover: #f4f4f4 !default;
 $surface-tab-surface-pressed: #e8e8e8 !default;
 $surface-accordion-surface: #ffffff !default;
 $surface-accordion-surface-hover: #f4f4f4 !default;
-$surface-badge-image-surface: #26c281 !default;
-$surface-badge-canvas-surface: #f1811a !default;
+$surface-badge-image-surface: #1e9b67 !default;
+$surface-badge-canvas-surface: #d97417 !default;
 $surface-badge-boxnote-surface: #e8e8e8 !default;
 $surface-badge-folderexternal-surface: #6f6f6f !default;
 $surface-badge-foldershared-surface: #2486fc !default;
@@ -173,7 +176,7 @@ $surface-badge-mention-surface: #1d6bca !default;
 $surface-badge-task-surface: #2486fc !default;
 $surface-badge-taskapproval-surface: #1d6bca !default;
 $surface-badge-annotation-surface: #f5b31b !default;
-$surface-badge-completed-surface: #26c281 !default;
+$surface-badge-completed-surface: #1e9b67 !default;
 $surface-badge-rejected-surface: #d5324e !default;
 $surface-badge-error-surface: #d5324e !default;
 $surface-badge-external-surface: #909090 !default;
@@ -191,6 +194,27 @@ $surface-badge-sheets-surface: #21a464 !default;
 $surface-badge-pages-surface: #ff9500 !default;
 $surface-badge-keynote-surface: #0a84ff !default;
 $surface-badge-video-surface: #009aed !default;
+$surface-badge-bookmark-surface: #0061d5 !default;
+$surface-badge-hubs-surface: #0061d5 !default;
+$surface-badge-boxapps-surface: #0061d5 !default;
+$surface-badge-audio-surface: #9f3fed !default;
+$surface-badge-code-surface: #ed3757 !default;
+$surface-badge-default-surface: #6f6f6f !default;
+$surface-badge-drawing-surface: #009aed !default;
+$surface-badge-excel-surface: #107c41 !default;
+$surface-badge-slides-surface: #f7ba00 !default;
+$surface-badge-illustrator-surface: #051e25 !default;
+$surface-badge-indesign-surface: #131415 !default;
+$surface-badge-numbers-surface: #00a650 !default;
+$surface-badge-photoshop-surface: #131415 !default;
+$surface-badge-powerpoint-surface: #c43e1c !default;
+$surface-badge-presentation-surface: #d97417 !default;
+$surface-badge-spreadsheet-surface: #3fb87f !default;
+$surface-badge-text-surface: #0061d5 !default;
+$surface-badge-three-d-surface: #d97417 !default;
+$surface-badge-vector-surface: #d97417 !default;
+$surface-badge-word-surface: #185abd !default;
+$surface-badge-zip-surface: #6f6f6f !default;
 $surface-chip-button-surface: rgba(0, 0, 0, 0.04) !default;
 $surface-chip-button-surface-hover: rgba(0, 0, 0, 0.08) !default;
 $surface-page-surface: #ffffff !default;
@@ -320,7 +344,7 @@ $border-toggletext-border-on-ai-pressed: linear-gradient(135deg, #fe03dc 0%, #27
 $border-toggletext-border-off-ai: #bcbcbc !default;
 $border-toggletext-border-off-ai-hover: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
 $border-toggletext-border-off-ai-pressed: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
-$border-divider-border-brand: #e8e8e8 !default;
+$border-divider-border-brand: rgba(232, 232, 232, 0.1) !default;
 $icon-icon-on-light: #222222 !default;
 $icon-icon-on-light-secondary: #6f6f6f !default;
 $icon-icon-on-light-tertiary: #909090 !default;
@@ -346,6 +370,9 @@ $icon-cta-icon-on-color-hover: #000000 !default;
 $icon-cta-icon-on-color-pressed: #000000 !default;
 $icon-icon-blue: #0061d5 !default;
 $icon-icon-destructive-on-light: #d5324e !default;
+$icon-icon-illustrator: #ff9400 !default;
+$icon-icon-indesign: #ff57a1 !default;
+$icon-icon-photoshop: #26c9ff !default;
 $outline-focus-on-light: #2486fc !default;
 $outline-focus-on-dark: #ffffff !default;
 $text-text-on-light: #222222 !default;
@@ -391,6 +418,14 @@ $brand-sign-tertiary: #e5ebf2 !default;
 $brand-box-ai-100: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
 $brand-box-ai-120: linear-gradient(135deg, #cb02b0 0%, #1f6ac8 100%) !default;
 $brand-box-ai-140: linear-gradient(135deg, #980284 0%, #174f96 100%) !default;
+$fullscreen-page-header-height: 4rem !default;
+$fullscreen-page-header-left-padding: 0.5rem !default;
+$fullscreen-page-header-right-padding: 1rem !default;
+$fullscreen-page-header-left-elements-gap: 0.25rem !default;
+$fullscreen-page-header-right-elements-gap: 0.5rem !default;
+$fullscreen-page-header-title-gap: 0.5rem !default;
+$fullscreen-page-header-subtitle-gap: 0.25rem !default;
+$back-button-width: 1.5rem !default;
 $gray-10: #e8e8e8 !default;
 $gray-20: #d3d3d3 !default;
 $gray-30: #bcbcbc !default;
@@ -793,6 +828,9 @@ $tokens: (
         'cta-surface-secondary': $surface-cta-surface-secondary,
         'cta-surface-secondary-busy': $surface-cta-surface-secondary-busy,
         'cta-surface-secondary-disabled': $surface-cta-surface-secondary-disabled,
+        'ctaDestructive-surface-tertiary': $surface-cta-destructive-surface-tertiary,
+        'ctaDestructive-surface-tertiary-hover': $surface-cta-destructive-surface-tertiary-hover,
+        'ctaDestructive-surface-tertiary-pressed': $surface-cta-destructive-surface-tertiary-pressed,
         'cta-surface-secondary-hover': $surface-cta-surface-secondary-hover,
         'cta-surface-secondary-focus': $surface-cta-surface-secondary-focus,
         'cta-surface-secondary-pressed': $surface-cta-surface-secondary-pressed,
@@ -961,6 +999,27 @@ $tokens: (
         'badge-pages-surface': $surface-badge-pages-surface,
         'badge-keynote-surface': $surface-badge-keynote-surface,
         'badge-video-surface': $surface-badge-video-surface,
+        'badge-bookmark-surface': $surface-badge-bookmark-surface,
+        'badge-hubs-surface': $surface-badge-hubs-surface,
+        'badge-boxapps-surface': $surface-badge-boxapps-surface,
+        'badge-audio-surface': $surface-badge-audio-surface,
+        'badge-code-surface': $surface-badge-code-surface,
+        'badge-default-surface': $surface-badge-default-surface,
+        'badge-drawing-surface': $surface-badge-drawing-surface,
+        'badge-excel-surface': $surface-badge-excel-surface,
+        'badge-slides-surface': $surface-badge-slides-surface,
+        'badge-illustrator-surface': $surface-badge-illustrator-surface,
+        'badge-indesign-surface': $surface-badge-indesign-surface,
+        'badge-numbers-surface': $surface-badge-numbers-surface,
+        'badge-photoshop-surface': $surface-badge-photoshop-surface,
+        'badge-powerpoint-surface': $surface-badge-powerpoint-surface,
+        'badge-presentation-surface': $surface-badge-presentation-surface,
+        'badge-spreadsheet-surface': $surface-badge-spreadsheet-surface,
+        'badge-text-surface': $surface-badge-text-surface,
+        'badge-threeD-surface': $surface-badge-three-d-surface,
+        'badge-vector-surface': $surface-badge-vector-surface,
+        'badge-word-surface': $surface-badge-word-surface,
+        'badge-zip-surface': $surface-badge-zip-surface,
         'chip-button-surface': $surface-chip-button-surface,
         'chip-button-surface-hover': $surface-chip-button-surface-hover,
         'page-surface': $surface-page-surface,
@@ -1120,6 +1179,9 @@ $tokens: (
         'cta-icon-on-color-pressed': $icon-cta-icon-on-color-pressed,
         'icon-blue': $icon-icon-blue,
         'icon-destructive-on-light': $icon-icon-destructive-on-light,
+        'icon-illustrator': $icon-icon-illustrator,
+        'icon-indesign': $icon-icon-indesign,
+        'icon-photoshop': $icon-icon-photoshop,
     ),
     'Outline': (
         'focus-on-light': $outline-focus-on-light,
@@ -1176,6 +1238,18 @@ $tokens: (
             '140': $brand-box-ai-140,
         ),
     ),
+    'FullscreenPageHeader': (
+        'height': $fullscreen-page-header-height,
+        'left-padding': $fullscreen-page-header-left-padding,
+        'right-padding': $fullscreen-page-header-right-padding,
+        'leftElements-gap': $fullscreen-page-header-left-elements-gap,
+        'rightElements-gap': $fullscreen-page-header-right-elements-gap,
+        'title-gap': $fullscreen-page-header-title-gap,
+        'subtitle-gap': $fullscreen-page-header-subtitle-gap,
+    ),
+    'BackButton': (
+        'width': $back-button-width,
+    ),
     'Gray': (
         '10': $gray-10,
         '20': $gray-20,

package/package.json

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