@box/blueprint-web-assets 4.22.0 → 4.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web-assets",
-    "version": "4.22.0",
+    "version": "4.23.0",
     "license": "SEE LICENSE IN LICENSE",
     "scripts": {
         "build-local-all": "yarn nx clone-repo && yarn build-local && yarn lint-local && yarn lint-local-css",
@@ -105,5 +105,5 @@
         "react": "^18.3.0",
         "react-dom": "^18.3.0"
     },
-    "gitHead": "d11ef94c0b6fdc3b2cd69ce5ba09cbf931799c74"
+    "gitHead": "859c17647948f935ca4b9fd66f4d1ad4aec6a495"
 }

package/tokens/px-tokens.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Sep 2024 11:26:56 GMT
+ * Generated on Thu, 19 Sep 2024 08:08:06 GMT
  */
 
 export const BackgroundBackground: string;
@@ -8,6 +8,7 @@ export const SurfaceSurface: string;
 export const SurfaceSurfaceHover: string;
 export const SurfaceSurfaceSecondary: string;
 export const SurfaceSurfaceTertiary: string;
+export const SurfaceSurfaceQuaternary: string;
 export const SurfaceSurfaceSecondaryHover: string;
 export const SurfaceSurfaceSecondaryFocus: string;
 export const SurfaceCardSurface: string;
@@ -226,6 +227,9 @@ export const SurfaceToolbarSurface: string;
 export const SurfaceToggleSurfaceOffPressed: string;
 export const SurfaceToggleSurfaceOnPressed: string;
 export const SurfaceCtaSurfaceDisabled: string;
+export const SurfaceRadiotileSurface: string;
+export const SurfaceRadiotileSurfaceHover: string;
+export const SurfaceRadiotileSurfaceSelected: string;
 export const BorderCtaBorderSecondary: string;
 export const BorderCtaBorderSecondaryPressed: string;
 export const BorderCtaBorderSecondaryHover: string;
@@ -297,6 +301,9 @@ export const BorderContentbuttonBorderSelected: string;
 export const BorderToggleBorderOn: string;
 export const BorderCtaBorderSecondaryDisabled: string;
 export const BorderCtaBorderOutlineDisabled: string;
+export const BorderRadiotileBorder: string;
+export const BorderRadiotileBorderHover: string;
+export const BorderRadiotileBorderSelected: string;
 export const IconIconOnLight: string;
 export const IconIconOnLightSecondary: string;
 export const IconIconOnLightTertiary: string;
@@ -349,6 +356,18 @@ export const TextCtaLinkDisabled: string;
 export const TextTextOnLightDisabled: string;
 export const OverlaySidepanelOverlay: string;
 export const OverlayModalOverlay: string;
+export const BrandBoxPrimary: string;
+export const BrandBoxSecondary: string;
+export const BrandBoxTertiary: string;
+export const BrandFormsPrimary: string;
+export const BrandFormsSecondary: string;
+export const BrandFormsTertiary: string;
+export const BrandDocgenPrimary: string;
+export const BrandDocgenSecondary: string;
+export const BrandDocgenTertiary: string;
+export const BrandSignPrimary: string;
+export const BrandSignSecondary: string;
+export const BrandSignTertiary: string;
 export const Gray10: string;
 export const Gray20: string;
 export const Gray30: string;

package/tokens/px-tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Sep 2024 11:26:56 GMT
+ * Generated on Thu, 19 Sep 2024 08:08:06 GMT
  */
 
 export const BackgroundBackground = '#ffffff';
@@ -8,6 +8,7 @@ export const SurfaceSurface = '#ffffff';
 export const SurfaceSurfaceHover = '#f4f4f4';
 export const SurfaceSurfaceSecondary = '#fbfbfb';
 export const SurfaceSurfaceTertiary = '#e8e8e8';
+export const SurfaceSurfaceQuaternary = '#d3d3d3';
 export const SurfaceSurfaceSecondaryHover = '#f4f4f4';
 export const SurfaceSurfaceSecondaryFocus = '#fbfbfb';
 export const SurfaceCardSurface = '#ffffff';
@@ -226,6 +227,9 @@ export const SurfaceToolbarSurface = '#222222';
 export const SurfaceToggleSurfaceOffPressed = '#e8e8e8';
 export const SurfaceToggleSurfaceOnPressed = '#b2cff2';
 export const SurfaceCtaSurfaceDisabled = '#b2cff2';
+export const SurfaceRadiotileSurface = '#ffffff';
+export const SurfaceRadiotileSurfaceHover = '#f4f4f4';
+export const SurfaceRadiotileSurfaceSelected = '#f2f7fd';
 export const BorderCtaBorderSecondary = '#bcbcbc';
 export const BorderCtaBorderSecondaryPressed = '#bcbcbc';
 export const BorderCtaBorderSecondaryHover = '#bcbcbc';
@@ -297,6 +301,9 @@ export const BorderContentbuttonBorderSelected = '#909090';
 export const BorderToggleBorderOn = '#99c0ee';
 export const BorderCtaBorderSecondaryDisabled = '#e8e8e8';
 export const BorderCtaBorderOutlineDisabled = '#646464';
+export const BorderRadiotileBorder = '#bcbcbc';
+export const BorderRadiotileBorderHover = '#bcbcbc';
+export const BorderRadiotileBorderSelected = '#0061d5';
 export const IconIconOnLight = '#222222';
 export const IconIconOnLightSecondary = '#6F6F6F';
 export const IconIconOnLightTertiary = '#909090';
@@ -349,6 +356,18 @@ export const TextCtaLinkDisabled = '#b2cff2';
 export const TextTextOnLightDisabled = '#bcbcbc';
 export const OverlaySidepanelOverlay = 'rgba(0,0,0,0.5)';
 export const OverlayModalOverlay = 'rgba(0,0,0,0.8)';
+export const BrandBoxPrimary = '#0061d5';
+export const BrandBoxSecondary = '#ccdff7';
+export const BrandBoxTertiary = '#e5effa';
+export const BrandFormsPrimary = '#1e9b67';
+export const BrandFormsSecondary = '#d4f3e6';
+export const BrandFormsTertiary = '#e9f8f2';
+export const BrandDocgenPrimary = '#3a1e9b';
+export const BrandDocgenSecondary = '#dad4f3';
+export const BrandDocgenTertiary = '#ece9f8';
+export const BrandSignPrimary = '#003c84';
+export const BrandSignSecondary = '#ccd8e6';
+export const BrandSignTertiary = '#e5ebf2';
 export const Gray10 = '#e8e8e8';
 export const Gray20 = '#d3d3d3';
 export const Gray30 = '#bcbcbc';

package/tokens/tokens-css-vars.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Sep 2024 11:26:56 GMT
+ * Generated on Thu, 19 Sep 2024 08:08:06 GMT
  */
 
 :root {
@@ -373,6 +373,18 @@
     --title-small-font-family: var(--font-families-sans);
     --title-subtitle-font-weight: 700;
     --title-subtitle-font-family: var(--font-families-sans);
+    --brand-sign-tertiary: var(--dark-blue-10);
+    --brand-sign-secondary: var(--dark-blue-20);
+    --brand-sign-primary: var(--dark-blue-100);
+    --brand-docgen-tertiary: var(--grimace-10);
+    --brand-docgen-secondary: var(--grimace-20);
+    --brand-docgen-primary: var(--grimace-120);
+    --brand-forms-tertiary: var(--green-light-10);
+    --brand-forms-secondary: var(--green-light-20);
+    --brand-forms-primary: var(--green-light-120);
+    --brand-box-tertiary: var(--box-blue-10);
+    --brand-box-secondary: var(--box-blue-20);
+    --brand-box-primary: var(--box-blue-100);
     --overlay-modal-overlay: var(--black-opacity-80);
     --overlay-sidepanel-overlay: var(--black-opacity-50);
     --text-text-on-light-disabled: var(--gray-30);
@@ -425,6 +437,9 @@
     --icon-icon-on-light-tertiary: var(--gray-50);
     --icon-icon-on-light-secondary: var(--gray-65);
     --icon-icon-on-light: var(--gray-100);
+    --border-radiotile-border-selected: var(--box-blue-100);
+    --border-radiotile-border-hover: var(--gray-30);
+    --border-radiotile-border: var(--gray-30);
     --border-cta-border-secondary-disabled: var(--gray-10);
     --border-toggle-border-on: var(--box-blue-40);
     --border-contentbutton-border-selected: var(--gray-50);
@@ -493,6 +508,9 @@
     --border-cta-border-secondary-hover: var(--gray-30);
     --border-cta-border-secondary-pressed: var(--gray-30);
     --border-cta-border-secondary: var(--gray-30);
+    --surface-radiotile-surface-selected: var(--box-blue-05);
+    --surface-radiotile-surface-hover: var(--gray-05);
+    --surface-radiotile-surface: var(--gray-white);
     --surface-cta-surface-disabled: var(--box-blue-30);
     --surface-toggle-surface-on-pressed: var(--box-blue-30);
     --surface-toggle-surface-off-pressed: var(--gray-10);
@@ -700,6 +718,7 @@
     --surface-card-surface: var(--gray-white);
     --surface-surface-secondary-focus: var(--gray-02);
     --surface-surface-secondary-hover: var(--gray-05);
+    --surface-surface-quaternary: var(--gray-20);
     --surface-surface-tertiary: var(--gray-10);
     --surface-surface-secondary: var(--gray-02);
     --surface-surface-hover: var(--gray-05);

package/tokens/tokens.d.ts

@@ -3,6 +3,7 @@ export const SurfaceSurface: string;
 export const SurfaceSurfaceHover: string;
 export const SurfaceSurfaceSecondary: string;
 export const SurfaceSurfaceTertiary: string;
+export const SurfaceSurfaceQuaternary: string;
 export const SurfaceSurfaceSecondaryHover: string;
 export const SurfaceSurfaceSecondaryFocus: string;
 export const SurfaceCardSurface: string;
@@ -221,6 +222,9 @@ export const SurfaceToolbarSurface: string;
 export const SurfaceToggleSurfaceOffPressed: string;
 export const SurfaceToggleSurfaceOnPressed: string;
 export const SurfaceCtaSurfaceDisabled: string;
+export const SurfaceRadiotileSurface: string;
+export const SurfaceRadiotileSurfaceHover: string;
+export const SurfaceRadiotileSurfaceSelected: string;
 export const BorderCtaBorderSecondary: string;
 export const BorderCtaBorderSecondaryPressed: string;
 export const BorderCtaBorderSecondaryHover: string;
@@ -292,6 +296,9 @@ export const BorderContentbuttonBorderSelected: string;
 export const BorderToggleBorderOn: string;
 export const BorderCtaBorderSecondaryDisabled: string;
 export const BorderCtaBorderOutlineDisabled: string;
+export const BorderRadiotileBorder: string;
+export const BorderRadiotileBorderHover: string;
+export const BorderRadiotileBorderSelected: string;
 export const IconIconOnLight: string;
 export const IconIconOnLightSecondary: string;
 export const IconIconOnLightTertiary: string;
@@ -344,6 +351,18 @@ export const TextCtaLinkDisabled: string;
 export const TextTextOnLightDisabled: string;
 export const OverlaySidepanelOverlay: string;
 export const OverlayModalOverlay: string;
+export const BrandBoxPrimary: string;
+export const BrandBoxSecondary: string;
+export const BrandBoxTertiary: string;
+export const BrandFormsPrimary: string;
+export const BrandFormsSecondary: string;
+export const BrandFormsTertiary: string;
+export const BrandDocgenPrimary: string;
+export const BrandDocgenSecondary: string;
+export const BrandDocgenTertiary: string;
+export const BrandSignPrimary: string;
+export const BrandSignSecondary: string;
+export const BrandSignTertiary: string;
 export const Gray10: string;
 export const Gray20: string;
 export const Gray30: string;

package/tokens/tokens.js

@@ -3,6 +3,7 @@ export const SurfaceSurface = '#ffffff';
 export const SurfaceSurfaceHover = '#f4f4f4';
 export const SurfaceSurfaceSecondary = '#fbfbfb';
 export const SurfaceSurfaceTertiary = '#e8e8e8';
+export const SurfaceSurfaceQuaternary = '#d3d3d3';
 export const SurfaceSurfaceSecondaryHover = '#f4f4f4';
 export const SurfaceSurfaceSecondaryFocus = '#fbfbfb';
 export const SurfaceCardSurface = '#ffffff';
@@ -221,6 +222,9 @@ export const SurfaceToolbarSurface = '#222222';
 export const SurfaceToggleSurfaceOffPressed = '#e8e8e8';
 export const SurfaceToggleSurfaceOnPressed = '#b2cff2';
 export const SurfaceCtaSurfaceDisabled = '#b2cff2';
+export const SurfaceRadiotileSurface = '#ffffff';
+export const SurfaceRadiotileSurfaceHover = '#f4f4f4';
+export const SurfaceRadiotileSurfaceSelected = '#f2f7fd';
 export const BorderCtaBorderSecondary = '#bcbcbc';
 export const BorderCtaBorderSecondaryPressed = '#bcbcbc';
 export const BorderCtaBorderSecondaryHover = '#bcbcbc';
@@ -292,6 +296,9 @@ export const BorderContentbuttonBorderSelected = '#909090';
 export const BorderToggleBorderOn = '#99c0ee';
 export const BorderCtaBorderSecondaryDisabled = '#e8e8e8';
 export const BorderCtaBorderOutlineDisabled = '#646464';
+export const BorderRadiotileBorder = '#bcbcbc';
+export const BorderRadiotileBorderHover = '#bcbcbc';
+export const BorderRadiotileBorderSelected = '#0061d5';
 export const IconIconOnLight = '#222222';
 export const IconIconOnLightSecondary = '#6F6F6F';
 export const IconIconOnLightTertiary = '#909090';
@@ -344,6 +351,18 @@ export const TextCtaLinkDisabled = '#b2cff2';
 export const TextTextOnLightDisabled = '#bcbcbc';
 export const OverlaySidepanelOverlay = 'rgba(0,0,0,0.5)';
 export const OverlayModalOverlay = 'rgba(0,0,0,0.8)';
+export const BrandBoxPrimary = '#0061d5';
+export const BrandBoxSecondary = '#ccdff7';
+export const BrandBoxTertiary = '#e5effa';
+export const BrandFormsPrimary = '#1e9b67';
+export const BrandFormsSecondary = '#d4f3e6';
+export const BrandFormsTertiary = '#e9f8f2';
+export const BrandDocgenPrimary = '#3a1e9b';
+export const BrandDocgenSecondary = '#dad4f3';
+export const BrandDocgenTertiary = '#ece9f8';
+export const BrandSignPrimary = '#003c84';
+export const BrandSignSecondary = '#ccd8e6';
+export const BrandSignTertiary = '#e5ebf2';
 export const Gray10 = '#e8e8e8';
 export const Gray20 = '#d3d3d3';
 export const Gray30 = '#bcbcbc';

package/tokens/tokens.json

@@ -4,6 +4,7 @@
     "SurfaceSurfaceHover": "#f4f4f4",
     "SurfaceSurfaceSecondary": "#fbfbfb",
     "SurfaceSurfaceTertiary": "#e8e8e8",
+    "SurfaceSurfaceQuaternary": "#d3d3d3",
     "SurfaceSurfaceSecondaryHover": "#f4f4f4",
     "SurfaceSurfaceSecondaryFocus": "#fbfbfb",
     "SurfaceCardSurface": "#ffffff",
@@ -222,6 +223,9 @@
     "SurfaceToggleSurfaceOffPressed": "#e8e8e8",
     "SurfaceToggleSurfaceOnPressed": "#b2cff2",
     "SurfaceCtaSurfaceDisabled": "#b2cff2",
+    "SurfaceRadiotileSurface": "#ffffff",
+    "SurfaceRadiotileSurfaceHover": "#f4f4f4",
+    "SurfaceRadiotileSurfaceSelected": "#f2f7fd",
     "BorderCtaBorderSecondary": "#bcbcbc",
     "BorderCtaBorderSecondaryPressed": "#bcbcbc",
     "BorderCtaBorderSecondaryHover": "#bcbcbc",
@@ -293,6 +297,9 @@
     "BorderToggleBorderOn": "#99c0ee",
     "BorderCtaBorderSecondaryDisabled": "#e8e8e8",
     "BorderCtaBorderOutlineDisabled": "#646464",
+    "BorderRadiotileBorder": "#bcbcbc",
+    "BorderRadiotileBorderHover": "#bcbcbc",
+    "BorderRadiotileBorderSelected": "#0061d5",
     "IconIconOnLight": "#222222",
     "IconIconOnLightSecondary": "#6F6F6F",
     "IconIconOnLightTertiary": "#909090",
@@ -345,6 +352,18 @@
     "TextTextOnLightDisabled": "#bcbcbc",
     "OverlaySidepanelOverlay": "rgba(0,0,0,0.5)",
     "OverlayModalOverlay": "rgba(0,0,0,0.8)",
+    "BrandBoxPrimary": "#0061d5",
+    "BrandBoxSecondary": "#ccdff7",
+    "BrandBoxTertiary": "#e5effa",
+    "BrandFormsPrimary": "#1e9b67",
+    "BrandFormsSecondary": "#d4f3e6",
+    "BrandFormsTertiary": "#e9f8f2",
+    "BrandDocgenPrimary": "#3a1e9b",
+    "BrandDocgenSecondary": "#dad4f3",
+    "BrandDocgenTertiary": "#ece9f8",
+    "BrandSignPrimary": "#003c84",
+    "BrandSignSecondary": "#ccd8e6",
+    "BrandSignTertiary": "#e5ebf2",
     "Gray10": "#e8e8e8",
     "Gray20": "#d3d3d3",
     "Gray30": "#bcbcbc",

package/tokens/tokens.scss

@@ -3,6 +3,7 @@ $surface-surface: #ffffff !default;
 $surface-surface-hover: #f4f4f4 !default;
 $surface-surface-secondary: #fbfbfb !default;
 $surface-surface-tertiary: #e8e8e8 !default;
+$surface-surface-quaternary: #d3d3d3 !default;
 $surface-surface-secondary-hover: #f4f4f4 !default;
 $surface-surface-secondary-focus: #fbfbfb !default;
 $surface-card-surface: #ffffff !default;
@@ -221,6 +222,9 @@ $surface-toolbar-surface: #222222 !default;
 $surface-toggle-surface-off-pressed: #e8e8e8 !default;
 $surface-toggle-surface-on-pressed: #b2cff2 !default;
 $surface-cta-surface-disabled: #b2cff2 !default;
+$surface-radiotile-surface: #ffffff !default;
+$surface-radiotile-surface-hover: #f4f4f4 !default;
+$surface-radiotile-surface-selected: #f2f7fd !default;
 $border-cta-border-secondary: #bcbcbc !default;
 $border-cta-border-secondary-pressed: #bcbcbc !default;
 $border-cta-border-secondary-hover: #bcbcbc !default;
@@ -292,6 +296,9 @@ $border-contentbutton-border-selected: #909090 !default;
 $border-toggle-border-on: #99c0ee !default;
 $border-cta-border-secondary-disabled: #e8e8e8 !default;
 $border-cta-border-outline-disabled: #646464 !default;
+$border-radiotile-border: #bcbcbc !default;
+$border-radiotile-border-hover: #bcbcbc !default;
+$border-radiotile-border-selected: #0061d5 !default;
 $icon-icon-on-light: #222222 !default;
 $icon-icon-on-light-secondary: #6f6f6f !default;
 $icon-icon-on-light-tertiary: #909090 !default;
@@ -344,6 +351,18 @@ $text-cta-link-disabled: #b2cff2 !default;
 $text-text-on-light-disabled: #bcbcbc !default;
 $overlay-sidepanel-overlay: rgba(0, 0, 0, 0.5) !default;
 $overlay-modal-overlay: rgba(0, 0, 0, 0.8) !default;
+$brand-box-primary: #0061d5 !default;
+$brand-box-secondary: #ccdff7 !default;
+$brand-box-tertiary: #e5effa !default;
+$brand-forms-primary: #1e9b67 !default;
+$brand-forms-secondary: #d4f3e6 !default;
+$brand-forms-tertiary: #e9f8f2 !default;
+$brand-docgen-primary: #3a1e9b !default;
+$brand-docgen-secondary: #dad4f3 !default;
+$brand-docgen-tertiary: #ece9f8 !default;
+$brand-sign-primary: #003c84 !default;
+$brand-sign-secondary: #ccd8e6 !default;
+$brand-sign-tertiary: #e5ebf2 !default;
 $gray-10: #e8e8e8 !default;
 $gray-20: #d3d3d3 !default;
 $gray-30: #bcbcbc !default;
@@ -726,6 +745,7 @@ $tokens: (
         'surface-hover': $surface-surface-hover,
         'surface-secondary': $surface-surface-secondary,
         'surface-tertiary': $surface-surface-tertiary,
+        'surface-quaternary': $surface-surface-quaternary,
         'surface-secondary-hover': $surface-surface-secondary-hover,
         'surface-secondary-focus': $surface-surface-secondary-focus,
         'card-surface': $surface-card-surface,
@@ -944,6 +964,9 @@ $tokens: (
         'toggle-surface-off-pressed': $surface-toggle-surface-off-pressed,
         'toggle-surface-on-pressed': $surface-toggle-surface-on-pressed,
         'cta-surface-disabled': $surface-cta-surface-disabled,
+        'radiotile-surface': $surface-radiotile-surface,
+        'radiotile-surface-hover': $surface-radiotile-surface-hover,
+        'radiotile-surface-selected': $surface-radiotile-surface-selected,
     ),
     'Border': (
         'cta-border-secondary': $border-cta-border-secondary,
@@ -1017,6 +1040,9 @@ $tokens: (
         'toggle-border-on': $border-toggle-border-on,
         'cta-border-secondary-disabled': $border-cta-border-secondary-disabled,
         'cta-border-outline-disabled:': $border-cta-border-outline-disabled,
+        'radiotile-border': $border-radiotile-border,
+        'radiotile-border-hover': $border-radiotile-border-hover,
+        'radiotile-border-selected': $border-radiotile-border-selected,
     ),
     'Icon': (
         'icon-on-light': $icon-icon-on-light,
@@ -1078,6 +1104,20 @@ $tokens: (
         'sidepanel-overlay': $overlay-sidepanel-overlay,
         'modal-overlay': $overlay-modal-overlay,
     ),
+    'Brand': (
+        'box-primary': $brand-box-primary,
+        'box-secondary': $brand-box-secondary,
+        'box-tertiary': $brand-box-tertiary,
+        'forms-primary': $brand-forms-primary,
+        'forms-secondary': $brand-forms-secondary,
+        'forms-tertiary': $brand-forms-tertiary,
+        'docgen-primary': $brand-docgen-primary,
+        'docgen-secondary': $brand-docgen-secondary,
+        'docgen-tertiary': $brand-docgen-tertiary,
+        'sign-primary': $brand-sign-primary,
+        'sign-secondary': $brand-sign-secondary,
+        'sign-tertiary': $brand-sign-tertiary,
+    ),
     'Gray': (
         '10': $gray-10,
         '20': $gray-20,