@box/blueprint-web-assets 4.5.0 → 4.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web-assets",
-    "version": "4.5.0",
+    "version": "4.6.0",
     "license": "SEE LICENSE IN LICENSE",
     "scripts": {
         "build-local-all": "yarn nx clone-repo && yarn build-local && yarn lint-local && yarn lint-local-css",
@@ -100,5 +100,5 @@
     "devDependencies": {
         "chalk": "4.1.2"
     },
-    "gitHead": "7b6c05f2ce15d1f742a4c4fa2749d1fa61a5ca3b"
+    "gitHead": "1adafa29c6413d2968bee66ba80f70ce366b6064"
 }

package/tokens/px-tokens.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 06 Mar 2024 12:52:31 GMT
+ * Generated on Fri, 08 Mar 2024 12:51:35 GMT
  */
 
 export const BackgroundBackground: string;
@@ -217,6 +217,8 @@ export const SurfaceCtaSurfacePromoHover: string;
 export const SurfaceCtaSurfacePromoPressed: string;
 export const SurfaceCtaSurfacePromoFocus: string;
 export const SurfaceCtaSurfacePromoFocusPressed: string;
+export const SurfaceContentbuttonSurfaceSurfaceSelected: string;
+export const SurfaceContentswitcherSurface: string;
 export const BorderCtaBorderSecondary: string;
 export const BorderCtaBorderSecondaryPressed: string;
 export const BorderCtaBorderSecondaryHover: string;
@@ -281,6 +283,9 @@ export const BorderFilterchipBorderMultiOn: string;
 export const BorderCollapsibleBorder: string;
 export const BorderBadgeBorder: string;
 export const BorderToggleBorder: string;
+export const BorderCardBorderAi: string;
+export const BorderCtaBorderAi: string;
+export const BorderContentbuttonBorderSelected: string;
 export const IconIconOnLight: string;
 export const IconIconOnLightSecondary: string;
 export const IconIconOnLightTertiary: string;

package/tokens/px-tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 06 Mar 2024 12:52:31 GMT
+ * Generated on Fri, 08 Mar 2024 12:51:35 GMT
  */
 
 export const BackgroundBackground = '#ffffff';
@@ -142,11 +142,11 @@ export const SurfaceInputchipSurface = '#e8e8e8';
 export const SurfaceInputchipSurfaceHover = '#e8e8e8';
 export const SurfaceInputchipSurfaceError = '#fdebee';
 export const SurfaceFilterchipSurfaceMulti = 'rgba(0,0,0,0.04)';
-export const SurfaceFilterchipSurfaceMultiHover = 'rgba(0,0,0,0.04)';
+export const SurfaceFilterchipSurfaceMultiHover = 'rgba(0,0,0,0.08)';
 export const SurfaceFilterchipSurfaceMultiOn = '#e5effa';
 export const SurfaceFilterchipSurfaceMultiOnHover = '#e5effa';
 export const SurfaceFilterchipSurfaceSingle = 'rgba(0,0,0,0.04)';
-export const SurfaceFilterchipSurfaceSingleHover = 'rgba(0,0,0,0.04)';
+export const SurfaceFilterchipSurfaceSingleHover = 'rgba(0,0,0,0.08)';
 export const SurfaceFilterchipSurfaceSingleOn = '#0061d5';
 export const SurfaceFilterchipSurfaceSingleOnHover = '#0061d5';
 export const SurfaceSlidertrackSurface = '#6F6F6F';
@@ -217,6 +217,8 @@ export const SurfaceCtaSurfacePromoHover = '#4826c2';
 export const SurfaceCtaSurfacePromoPressed = '#3a1e9b';
 export const SurfaceCtaSurfacePromoFocus = '#4826c2';
 export const SurfaceCtaSurfacePromoFocusPressed = '#3a1e9b';
+export const SurfaceContentbuttonSurfaceSurfaceSelected = '#ffffff';
+export const SurfaceContentswitcherSurface = '#e8e8e8';
 export const BorderCtaBorderSecondary = '#bcbcbc';
 export const BorderCtaBorderSecondaryPressed = '#bcbcbc';
 export const BorderCtaBorderSecondaryHover = '#bcbcbc';
@@ -281,6 +283,9 @@ export const BorderFilterchipBorderMultiOn = '#91c2fd';
 export const BorderCollapsibleBorder = '#d3d3d3';
 export const BorderBadgeBorder = '#ffffff';
 export const BorderToggleBorder = '#bcbcbc';
+export const BorderCardBorderAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const BorderCtaBorderAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const BorderContentbuttonBorderSelected = '#909090';
 export const IconIconOnLight = '#222222';
 export const IconIconOnLightSecondary = '#6F6F6F';
 export const IconIconOnLightTertiary = '#909090';

package/tokens/tokens-css-vars.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 06 Mar 2024 12:52:31 GMT
+ * Generated on Fri, 08 Mar 2024 12:51:35 GMT
  */
 
 :root {
@@ -317,6 +317,8 @@
     --gray-30: #bcbcbc;
     --gray-20: #d3d3d3;
     --gray-10: #e8e8e8;
+    --border-cta-border-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%);
+    --border-card-border-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%);
     --surface-badge-video-surface: #009aed;
     --surface-badge-keynote-surface: #0a84ff;
     --surface-badge-pages-surface: #ff9500;
@@ -413,6 +415,7 @@
     --icon-icon-on-light-tertiary: var(--gray-50);
     --icon-icon-on-light-secondary: var(--gray-65);
     --icon-icon-on-light: var(--gray-100);
+    --border-contentbutton-border-selected: var(--gray-50);
     --border-toggle-border: var(--gray-30);
     --border-badge-border: var(--gray-white);
     --border-collapsible-border: var(--gray-20);
@@ -477,6 +480,8 @@
     --border-cta-border-secondary-hover: var(--gray-30);
     --border-cta-border-secondary-pressed: var(--gray-30);
     --border-cta-border-secondary: var(--gray-30);
+    --surface-contentswitcher-surface: var(--gray-10);
+    --surface-contentbutton-surface-surface-selected: var(--gray-white);
     --surface-cta-surface-promo-focus-pressed: var(--grimace-120);
     --surface-cta-surface-promo-focus: var(--grimace-100);
     --surface-cta-surface-promo-pressed: var(--grimace-120);
@@ -541,11 +546,11 @@
     --surface-slidertrack-surface: var(--gray-65);
     --surface-filterchip-surface-single-on-hover: var(--box-blue-100);
     --surface-filterchip-surface-single-on: var(--box-blue-100);
-    --surface-filterchip-surface-single-hover: var(--black-opacity-04);
+    --surface-filterchip-surface-single-hover: var(--black-opacity-08);
     --surface-filterchip-surface-single: var(--black-opacity-04);
     --surface-filterchip-surface-multi-on-hover: var(--box-blue-10);
     --surface-filterchip-surface-multi-on: var(--box-blue-10);
-    --surface-filterchip-surface-multi-hover: var(--black-opacity-04);
+    --surface-filterchip-surface-multi-hover: var(--black-opacity-08);
     --surface-filterchip-surface-multi: var(--black-opacity-04);
     --surface-inputchip-surface-error: var(--watermelon-red-10);
     --surface-inputchip-surface-hover: var(--gray-10);

package/tokens/tokens.d.ts

@@ -212,6 +212,8 @@ export const SurfaceCtaSurfacePromoHover: string;
 export const SurfaceCtaSurfacePromoPressed: string;
 export const SurfaceCtaSurfacePromoFocus: string;
 export const SurfaceCtaSurfacePromoFocusPressed: string;
+export const SurfaceContentbuttonSurfaceSurfaceSelected: string;
+export const SurfaceContentswitcherSurface: string;
 export const BorderCtaBorderSecondary: string;
 export const BorderCtaBorderSecondaryPressed: string;
 export const BorderCtaBorderSecondaryHover: string;
@@ -276,6 +278,9 @@ export const BorderFilterchipBorderMultiOn: string;
 export const BorderCollapsibleBorder: string;
 export const BorderBadgeBorder: string;
 export const BorderToggleBorder: string;
+export const BorderCardBorderAi: string;
+export const BorderCtaBorderAi: string;
+export const BorderContentbuttonBorderSelected: string;
 export const IconIconOnLight: string;
 export const IconIconOnLightSecondary: string;
 export const IconIconOnLightTertiary: string;

package/tokens/tokens.js

@@ -137,11 +137,11 @@ export const SurfaceInputchipSurface = '#e8e8e8';
 export const SurfaceInputchipSurfaceHover = '#e8e8e8';
 export const SurfaceInputchipSurfaceError = '#fdebee';
 export const SurfaceFilterchipSurfaceMulti = 'rgba(0,0,0,0.04)';
-export const SurfaceFilterchipSurfaceMultiHover = 'rgba(0,0,0,0.04)';
+export const SurfaceFilterchipSurfaceMultiHover = 'rgba(0,0,0,0.08)';
 export const SurfaceFilterchipSurfaceMultiOn = '#e5effa';
 export const SurfaceFilterchipSurfaceMultiOnHover = '#e5effa';
 export const SurfaceFilterchipSurfaceSingle = 'rgba(0,0,0,0.04)';
-export const SurfaceFilterchipSurfaceSingleHover = 'rgba(0,0,0,0.04)';
+export const SurfaceFilterchipSurfaceSingleHover = 'rgba(0,0,0,0.08)';
 export const SurfaceFilterchipSurfaceSingleOn = '#0061d5';
 export const SurfaceFilterchipSurfaceSingleOnHover = '#0061d5';
 export const SurfaceSlidertrackSurface = '#6F6F6F';
@@ -212,6 +212,8 @@ export const SurfaceCtaSurfacePromoHover = '#4826c2';
 export const SurfaceCtaSurfacePromoPressed = '#3a1e9b';
 export const SurfaceCtaSurfacePromoFocus = '#4826c2';
 export const SurfaceCtaSurfacePromoFocusPressed = '#3a1e9b';
+export const SurfaceContentbuttonSurfaceSurfaceSelected = '#ffffff';
+export const SurfaceContentswitcherSurface = '#e8e8e8';
 export const BorderCtaBorderSecondary = '#bcbcbc';
 export const BorderCtaBorderSecondaryPressed = '#bcbcbc';
 export const BorderCtaBorderSecondaryHover = '#bcbcbc';
@@ -276,6 +278,9 @@ export const BorderFilterchipBorderMultiOn = '#91c2fd';
 export const BorderCollapsibleBorder = '#d3d3d3';
 export const BorderBadgeBorder = '#ffffff';
 export const BorderToggleBorder = '#bcbcbc';
+export const BorderCardBorderAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const BorderCtaBorderAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
+export const BorderContentbuttonBorderSelected = '#909090';
 export const IconIconOnLight = '#222222';
 export const IconIconOnLightSecondary = '#6F6F6F';
 export const IconIconOnLightTertiary = '#909090';

package/tokens/tokens.json

@@ -138,11 +138,11 @@
     "SurfaceInputchipSurfaceHover": "#e8e8e8",
     "SurfaceInputchipSurfaceError": "#fdebee",
     "SurfaceFilterchipSurfaceMulti": "rgba(0,0,0,0.04)",
-    "SurfaceFilterchipSurfaceMultiHover": "rgba(0,0,0,0.04)",
+    "SurfaceFilterchipSurfaceMultiHover": "rgba(0,0,0,0.08)",
     "SurfaceFilterchipSurfaceMultiOn": "#e5effa",
     "SurfaceFilterchipSurfaceMultiOnHover": "#e5effa",
     "SurfaceFilterchipSurfaceSingle": "rgba(0,0,0,0.04)",
-    "SurfaceFilterchipSurfaceSingleHover": "rgba(0,0,0,0.04)",
+    "SurfaceFilterchipSurfaceSingleHover": "rgba(0,0,0,0.08)",
     "SurfaceFilterchipSurfaceSingleOn": "#0061d5",
     "SurfaceFilterchipSurfaceSingleOnHover": "#0061d5",
     "SurfaceSlidertrackSurface": "#6F6F6F",
@@ -213,6 +213,8 @@
     "SurfaceCtaSurfacePromoPressed": "#3a1e9b",
     "SurfaceCtaSurfacePromoFocus": "#4826c2",
     "SurfaceCtaSurfacePromoFocusPressed": "#3a1e9b",
+    "SurfaceContentbuttonSurfaceSurfaceSelected": "#ffffff",
+    "SurfaceContentswitcherSurface": "#e8e8e8",
     "BorderCtaBorderSecondary": "#bcbcbc",
     "BorderCtaBorderSecondaryPressed": "#bcbcbc",
     "BorderCtaBorderSecondaryHover": "#bcbcbc",
@@ -277,6 +279,9 @@
     "BorderCollapsibleBorder": "#d3d3d3",
     "BorderBadgeBorder": "#ffffff",
     "BorderToggleBorder": "#bcbcbc",
+    "BorderCardBorderAi": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
+    "BorderCtaBorderAi": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
+    "BorderContentbuttonBorderSelected": "#909090",
     "IconIconOnLight": "#222222",
     "IconIconOnLightSecondary": "#6F6F6F",
     "IconIconOnLightTertiary": "#909090",

package/tokens/tokens.scss

@@ -137,11 +137,11 @@ $surface-inputchip-surface: #e8e8e8 !default;
 $surface-inputchip-surface-hover: #e8e8e8 !default;
 $surface-inputchip-surface-error: #fdebee !default;
 $surface-filterchip-surface-multi: rgba(0, 0, 0, 0.04) !default;
-$surface-filterchip-surface-multi-hover: rgba(0, 0, 0, 0.04) !default;
+$surface-filterchip-surface-multi-hover: rgba(0, 0, 0, 0.08) !default;
 $surface-filterchip-surface-multi-on: #e5effa !default;
 $surface-filterchip-surface-multi-on-hover: #e5effa !default;
 $surface-filterchip-surface-single: rgba(0, 0, 0, 0.04) !default;
-$surface-filterchip-surface-single-hover: rgba(0, 0, 0, 0.04) !default;
+$surface-filterchip-surface-single-hover: rgba(0, 0, 0, 0.08) !default;
 $surface-filterchip-surface-single-on: #0061d5 !default;
 $surface-filterchip-surface-single-on-hover: #0061d5 !default;
 $surface-slidertrack-surface: #6f6f6f !default;
@@ -212,6 +212,8 @@ $surface-cta-surface-promo-hover: #4826c2 !default;
 $surface-cta-surface-promo-pressed: #3a1e9b !default;
 $surface-cta-surface-promo-focus: #4826c2 !default;
 $surface-cta-surface-promo-focus-pressed: #3a1e9b !default;
+$surface-contentbutton-surface-surface-selected: #ffffff !default;
+$surface-contentswitcher-surface: #e8e8e8 !default;
 $border-cta-border-secondary: #bcbcbc !default;
 $border-cta-border-secondary-pressed: #bcbcbc !default;
 $border-cta-border-secondary-hover: #bcbcbc !default;
@@ -276,6 +278,9 @@ $border-filterchip-border-multi-on: #91c2fd !default;
 $border-collapsible-border: #d3d3d3 !default;
 $border-badge-border: #ffffff !default;
 $border-toggle-border: #bcbcbc !default;
+$border-card-border-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
+$border-cta-border-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
+$border-contentbutton-border-selected: #909090 !default;
 $icon-icon-on-light: #222222 !default;
 $icon-icon-on-light-secondary: #6f6f6f !default;
 $icon-icon-on-light-tertiary: #909090 !default;
@@ -910,6 +915,8 @@ $tokens: (
         'cta-surface-promo-pressed': $surface-cta-surface-promo-pressed,
         'cta-surface-promo-focus': $surface-cta-surface-promo-focus,
         'cta-surface-promo-focus-pressed': $surface-cta-surface-promo-focus-pressed,
+        'contentbutton-surface-surface-selected': $surface-contentbutton-surface-surface-selected,
+        'contentswitcher-surface': $surface-contentswitcher-surface,
     ),
     'Border': (
         'cta-border-secondary': $border-cta-border-secondary,
@@ -976,6 +983,9 @@ $tokens: (
         'collapsible-border': $border-collapsible-border,
         'badge-border': $border-badge-border,
         'toggle-border': $border-toggle-border,
+        'card-border-ai': $border-card-border-ai,
+        'cta-border-ai': $border-cta-border-ai,
+        'contentbutton-border-selected': $border-contentbutton-border-selected,
     ),
     'Icon': (
         'icon-on-light': $icon-icon-on-light,