@box/blueprint-web-assets 4.23.0 → 4.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web-assets",
-    "version": "4.23.0",
+    "version": "4.24.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": "859c17647948f935ca4b9fd66f4d1ad4aec6a495"
+    "gitHead": "aa5870125c7788a07adcc307775630d30dcaee13"
 }

package/tokens/px-tokens.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 19 Sep 2024 08:08:06 GMT
+ * Generated on Fri, 20 Sep 2024 16:32:53 GMT
  */
 
 export const BackgroundBackground: string;
@@ -230,6 +230,9 @@ export const SurfaceCtaSurfaceDisabled: string;
 export const SurfaceRadiotileSurface: string;
 export const SurfaceRadiotileSurfaceHover: string;
 export const SurfaceRadiotileSurfaceSelected: string;
+export const SurfaceToggletextSurfaceOn: string;
+export const SurfaceToggletextSurfaceOnHover: string;
+export const SurfaceToggletextSurfaceOnPressed: string;
 export const BorderCtaBorderSecondary: string;
 export const BorderCtaBorderSecondaryPressed: string;
 export const BorderCtaBorderSecondaryHover: string;
@@ -304,6 +307,12 @@ export const BorderCtaBorderOutlineDisabled: string;
 export const BorderRadiotileBorder: string;
 export const BorderRadiotileBorderHover: string;
 export const BorderRadiotileBorderSelected: string;
+export const BorderToggletextBorderOff: string;
+export const BorderToggletextBorderOffHover: string;
+export const BorderToggletextBorderOffPressed: string;
+export const BorderToggletextBorderOn: string;
+export const BorderToggletextBorderOnHover: string;
+export const BorderToggletextBorderOnPressed: string;
 export const IconIconOnLight: string;
 export const IconIconOnLightSecondary: string;
 export const IconIconOnLightTertiary: string;
@@ -354,6 +363,7 @@ export const TextCtaLinkSecondaryHover: string;
 export const TextCtaPromo: string;
 export const TextCtaLinkDisabled: string;
 export const TextTextOnLightDisabled: string;
+export const TextToggletextText: string;
 export const OverlaySidepanelOverlay: string;
 export const OverlayModalOverlay: string;
 export const BrandBoxPrimary: string;

package/tokens/px-tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 19 Sep 2024 08:08:06 GMT
+ * Generated on Fri, 20 Sep 2024 16:32:53 GMT
  */
 
 export const BackgroundBackground = '#ffffff';
@@ -230,6 +230,9 @@ export const SurfaceCtaSurfaceDisabled = '#b2cff2';
 export const SurfaceRadiotileSurface = '#ffffff';
 export const SurfaceRadiotileSurfaceHover = '#f4f4f4';
 export const SurfaceRadiotileSurfaceSelected = '#f2f7fd';
+export const SurfaceToggletextSurfaceOn = '#f2f7fd';
+export const SurfaceToggletextSurfaceOnHover = '#ccdff7';
+export const SurfaceToggletextSurfaceOnPressed = '#b2cff2';
 export const BorderCtaBorderSecondary = '#bcbcbc';
 export const BorderCtaBorderSecondaryPressed = '#bcbcbc';
 export const BorderCtaBorderSecondaryHover = '#bcbcbc';
@@ -304,6 +307,12 @@ export const BorderCtaBorderOutlineDisabled = '#646464';
 export const BorderRadiotileBorder = '#bcbcbc';
 export const BorderRadiotileBorderHover = '#bcbcbc';
 export const BorderRadiotileBorderSelected = '#0061d5';
+export const BorderToggletextBorderOff = '#6F6F6F';
+export const BorderToggletextBorderOffHover = '#6F6F6F';
+export const BorderToggletextBorderOffPressed = '#6F6F6F';
+export const BorderToggletextBorderOn = '#f2f7fd';
+export const BorderToggletextBorderOnHover = '#ccdff7';
+export const BorderToggletextBorderOnPressed = '#b2cff2';
 export const IconIconOnLight = '#222222';
 export const IconIconOnLightSecondary = '#6F6F6F';
 export const IconIconOnLightTertiary = '#909090';
@@ -354,6 +363,7 @@ export const TextCtaLinkSecondaryHover = '#6F6F6F';
 export const TextCtaPromo = '#4826c2';
 export const TextCtaLinkDisabled = '#b2cff2';
 export const TextTextOnLightDisabled = '#bcbcbc';
+export const TextToggletextText = '#001D40';
 export const OverlaySidepanelOverlay = 'rgba(0,0,0,0.5)';
 export const OverlayModalOverlay = 'rgba(0,0,0,0.8)';
 export const BrandBoxPrimary = '#0061d5';

package/tokens/tokens-css-vars.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 19 Sep 2024 08:08:06 GMT
+ * Generated on Fri, 20 Sep 2024 16:32:53 GMT
  */
 
 :root {
@@ -387,6 +387,7 @@
     --brand-box-primary: var(--box-blue-100);
     --overlay-modal-overlay: var(--black-opacity-80);
     --overlay-sidepanel-overlay: var(--black-opacity-50);
+    --text-toggletext-text: var(--box-blue-170);
     --text-text-on-light-disabled: var(--gray-30);
     --text-cta-link-disabled: var(--box-blue-30);
     --text-cta-promo: var(--grimace-100);
@@ -437,6 +438,12 @@
     --icon-icon-on-light-tertiary: var(--gray-50);
     --icon-icon-on-light-secondary: var(--gray-65);
     --icon-icon-on-light: var(--gray-100);
+    --border-toggletext-border-on-pressed: var(--box-blue-30);
+    --border-toggletext-border-on-hover: var(--box-blue-20);
+    --border-toggletext-border-on: var(--box-blue-05);
+    --border-toggletext-border-off-pressed: var(--gray-65);
+    --border-toggletext-border-off-hover: var(--gray-65);
+    --border-toggletext-border-off: var(--gray-65);
     --border-radiotile-border-selected: var(--box-blue-100);
     --border-radiotile-border-hover: var(--gray-30);
     --border-radiotile-border: var(--gray-30);
@@ -508,6 +515,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-toggletext-surface-on-pressed: var(--box-blue-30);
+    --surface-toggletext-surface-on-hover: var(--box-blue-20);
+    --surface-toggletext-surface-on: var(--box-blue-05);
     --surface-radiotile-surface-selected: var(--box-blue-05);
     --surface-radiotile-surface-hover: var(--gray-05);
     --surface-radiotile-surface: var(--gray-white);

package/tokens/tokens.d.ts

@@ -225,6 +225,9 @@ export const SurfaceCtaSurfaceDisabled: string;
 export const SurfaceRadiotileSurface: string;
 export const SurfaceRadiotileSurfaceHover: string;
 export const SurfaceRadiotileSurfaceSelected: string;
+export const SurfaceToggletextSurfaceOn: string;
+export const SurfaceToggletextSurfaceOnHover: string;
+export const SurfaceToggletextSurfaceOnPressed: string;
 export const BorderCtaBorderSecondary: string;
 export const BorderCtaBorderSecondaryPressed: string;
 export const BorderCtaBorderSecondaryHover: string;
@@ -299,6 +302,12 @@ export const BorderCtaBorderOutlineDisabled: string;
 export const BorderRadiotileBorder: string;
 export const BorderRadiotileBorderHover: string;
 export const BorderRadiotileBorderSelected: string;
+export const BorderToggletextBorderOff: string;
+export const BorderToggletextBorderOffHover: string;
+export const BorderToggletextBorderOffPressed: string;
+export const BorderToggletextBorderOn: string;
+export const BorderToggletextBorderOnHover: string;
+export const BorderToggletextBorderOnPressed: string;
 export const IconIconOnLight: string;
 export const IconIconOnLightSecondary: string;
 export const IconIconOnLightTertiary: string;
@@ -349,6 +358,7 @@ export const TextCtaLinkSecondaryHover: string;
 export const TextCtaPromo: string;
 export const TextCtaLinkDisabled: string;
 export const TextTextOnLightDisabled: string;
+export const TextToggletextText: string;
 export const OverlaySidepanelOverlay: string;
 export const OverlayModalOverlay: string;
 export const BrandBoxPrimary: string;

package/tokens/tokens.js

@@ -225,6 +225,9 @@ export const SurfaceCtaSurfaceDisabled = '#b2cff2';
 export const SurfaceRadiotileSurface = '#ffffff';
 export const SurfaceRadiotileSurfaceHover = '#f4f4f4';
 export const SurfaceRadiotileSurfaceSelected = '#f2f7fd';
+export const SurfaceToggletextSurfaceOn = '#f2f7fd';
+export const SurfaceToggletextSurfaceOnHover = '#ccdff7';
+export const SurfaceToggletextSurfaceOnPressed = '#b2cff2';
 export const BorderCtaBorderSecondary = '#bcbcbc';
 export const BorderCtaBorderSecondaryPressed = '#bcbcbc';
 export const BorderCtaBorderSecondaryHover = '#bcbcbc';
@@ -299,6 +302,12 @@ export const BorderCtaBorderOutlineDisabled = '#646464';
 export const BorderRadiotileBorder = '#bcbcbc';
 export const BorderRadiotileBorderHover = '#bcbcbc';
 export const BorderRadiotileBorderSelected = '#0061d5';
+export const BorderToggletextBorderOff = '#6F6F6F';
+export const BorderToggletextBorderOffHover = '#6F6F6F';
+export const BorderToggletextBorderOffPressed = '#6F6F6F';
+export const BorderToggletextBorderOn = '#f2f7fd';
+export const BorderToggletextBorderOnHover = '#ccdff7';
+export const BorderToggletextBorderOnPressed = '#b2cff2';
 export const IconIconOnLight = '#222222';
 export const IconIconOnLightSecondary = '#6F6F6F';
 export const IconIconOnLightTertiary = '#909090';
@@ -349,6 +358,7 @@ export const TextCtaLinkSecondaryHover = '#6F6F6F';
 export const TextCtaPromo = '#4826c2';
 export const TextCtaLinkDisabled = '#b2cff2';
 export const TextTextOnLightDisabled = '#bcbcbc';
+export const TextToggletextText = '#001D40';
 export const OverlaySidepanelOverlay = 'rgba(0,0,0,0.5)';
 export const OverlayModalOverlay = 'rgba(0,0,0,0.8)';
 export const BrandBoxPrimary = '#0061d5';

package/tokens/tokens.json

@@ -226,6 +226,9 @@
     "SurfaceRadiotileSurface": "#ffffff",
     "SurfaceRadiotileSurfaceHover": "#f4f4f4",
     "SurfaceRadiotileSurfaceSelected": "#f2f7fd",
+    "SurfaceToggletextSurfaceOn": "#f2f7fd",
+    "SurfaceToggletextSurfaceOnHover": "#ccdff7",
+    "SurfaceToggletextSurfaceOnPressed": "#b2cff2",
     "BorderCtaBorderSecondary": "#bcbcbc",
     "BorderCtaBorderSecondaryPressed": "#bcbcbc",
     "BorderCtaBorderSecondaryHover": "#bcbcbc",
@@ -300,6 +303,12 @@
     "BorderRadiotileBorder": "#bcbcbc",
     "BorderRadiotileBorderHover": "#bcbcbc",
     "BorderRadiotileBorderSelected": "#0061d5",
+    "BorderToggletextBorderOff": "#6F6F6F",
+    "BorderToggletextBorderOffHover": "#6F6F6F",
+    "BorderToggletextBorderOffPressed": "#6F6F6F",
+    "BorderToggletextBorderOn": "#f2f7fd",
+    "BorderToggletextBorderOnHover": "#ccdff7",
+    "BorderToggletextBorderOnPressed": "#b2cff2",
     "IconIconOnLight": "#222222",
     "IconIconOnLightSecondary": "#6F6F6F",
     "IconIconOnLightTertiary": "#909090",
@@ -350,6 +359,7 @@
     "TextCtaPromo": "#4826c2",
     "TextCtaLinkDisabled": "#b2cff2",
     "TextTextOnLightDisabled": "#bcbcbc",
+    "TextToggletextText": "#001D40",
     "OverlaySidepanelOverlay": "rgba(0,0,0,0.5)",
     "OverlayModalOverlay": "rgba(0,0,0,0.8)",
     "BrandBoxPrimary": "#0061d5",

package/tokens/tokens.scss

@@ -225,6 +225,9 @@ $surface-cta-surface-disabled: #b2cff2 !default;
 $surface-radiotile-surface: #ffffff !default;
 $surface-radiotile-surface-hover: #f4f4f4 !default;
 $surface-radiotile-surface-selected: #f2f7fd !default;
+$surface-toggletext-surface-on: #f2f7fd !default;
+$surface-toggletext-surface-on-hover: #ccdff7 !default;
+$surface-toggletext-surface-on-pressed: #b2cff2 !default;
 $border-cta-border-secondary: #bcbcbc !default;
 $border-cta-border-secondary-pressed: #bcbcbc !default;
 $border-cta-border-secondary-hover: #bcbcbc !default;
@@ -299,6 +302,12 @@ $border-cta-border-outline-disabled: #646464 !default;
 $border-radiotile-border: #bcbcbc !default;
 $border-radiotile-border-hover: #bcbcbc !default;
 $border-radiotile-border-selected: #0061d5 !default;
+$border-toggletext-border-off: #6f6f6f !default;
+$border-toggletext-border-off-hover: #6f6f6f !default;
+$border-toggletext-border-off-pressed: #6f6f6f !default;
+$border-toggletext-border-on: #f2f7fd !default;
+$border-toggletext-border-on-hover: #ccdff7 !default;
+$border-toggletext-border-on-pressed: #b2cff2 !default;
 $icon-icon-on-light: #222222 !default;
 $icon-icon-on-light-secondary: #6f6f6f !default;
 $icon-icon-on-light-tertiary: #909090 !default;
@@ -349,6 +358,7 @@ $text-cta-link-secondary-hover: #6f6f6f !default;
 $text-cta-promo: #4826c2 !default;
 $text-cta-link-disabled: #b2cff2 !default;
 $text-text-on-light-disabled: #bcbcbc !default;
+$text-toggletext-text: #001d40 !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;
@@ -967,6 +977,9 @@ $tokens: (
         'radiotile-surface': $surface-radiotile-surface,
         'radiotile-surface-hover': $surface-radiotile-surface-hover,
         'radiotile-surface-selected': $surface-radiotile-surface-selected,
+        'toggletext-surface-on': $surface-toggletext-surface-on,
+        'toggletext-surface-on-hover': $surface-toggletext-surface-on-hover,
+        'toggletext-surface-on-pressed': $surface-toggletext-surface-on-pressed,
     ),
     'Border': (
         'cta-border-secondary': $border-cta-border-secondary,
@@ -1043,6 +1056,12 @@ $tokens: (
         'radiotile-border': $border-radiotile-border,
         'radiotile-border-hover': $border-radiotile-border-hover,
         'radiotile-border-selected': $border-radiotile-border-selected,
+        'toggletext-border-off': $border-toggletext-border-off,
+        'toggletext-border-off-hover': $border-toggletext-border-off-hover,
+        'toggletext-border-off-pressed': $border-toggletext-border-off-pressed,
+        'toggletext-border-on': $border-toggletext-border-on,
+        'toggletext-border-on-hover': $border-toggletext-border-on-hover,
+        'toggletext-border-on-pressed': $border-toggletext-border-on-pressed,
     ),
     'Icon': (
         'icon-on-light': $icon-icon-on-light,
@@ -1099,6 +1118,7 @@ $tokens: (
         'cta-promo': $text-cta-promo,
         'cta-link-disabled': $text-cta-link-disabled,
         'text-on-light-disabled': $text-text-on-light-disabled,
+        'toggletext-text': $text-toggletext-text,
     ),
     'Overlay': (
         'sidepanel-overlay': $overlay-sidepanel-overlay,