@box/blueprint-web-assets 4.29.0 → 4.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web-assets",
-    "version": "4.29.0",
+    "version": "4.30.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": "49a00d2aae3ace4f44354245f55976050b714d76"
+    "gitHead": "84b0da3b7df701ce396ed038ab4297e2da27d64f"
 }

package/tokens/px-tokens.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 16:30:00 GMT
+ * Generated on Thu, 21 Nov 2024 09:37:36 GMT
  */
 
 export const BackgroundBackground: string;

package/tokens/px-tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 08 Nov 2024 16:30:00 GMT
+ * Generated on Thu, 21 Nov 2024 09:37:36 GMT
  */
 
 export const BackgroundBackground = '#ffffff';
@@ -230,7 +230,7 @@ export const SurfaceCtaSurfaceDisabled = '#b2cff2';
 export const SurfaceRadiotileSurface = '#ffffff';
 export const SurfaceRadiotileSurfaceHover = '#f4f4f4';
 export const SurfaceRadiotileSurfaceSelected = '#f2f7fd';
-export const SurfaceToggletextSurfaceOn = '#f2f7fd';
+export const SurfaceToggletextSurfaceOn = '#e5effa';
 export const SurfaceToggletextSurfaceOnHover = '#ccdff7';
 export const SurfaceToggletextSurfaceOnPressed = '#b2cff2';
 export const SurfaceToggletextSurfaceOnAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
@@ -313,12 +313,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 BorderToggletextBorderOff = '#ffffff';
+export const BorderToggletextBorderOffHover = '#f4f4f4';
+export const BorderToggletextBorderOffPressed = '#e8e8e8';
+export const BorderToggletextBorderOn = '#99c0ee';
+export const BorderToggletextBorderOnHover = '#99c0ee';
+export const BorderToggletextBorderOnPressed = '#99c0ee';
 export const BorderToggletextBorderOnAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
 export const BorderToggletextBorderOnAiHover = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
 export const BorderToggletextBorderOnAiPressed = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
@@ -375,7 +375,7 @@ export const TextCtaLinkSecondaryHover = '#6F6F6F';
 export const TextCtaPromo = '#4826c2';
 export const TextCtaLinkDisabled = '#b2cff2';
 export const TextTextOnLightDisabled = '#bcbcbc';
-export const TextToggletextText = '#001D40';
+export const TextToggletextText = '#004EAA';
 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 Fri, 08 Nov 2024 16:30:00 GMT
+ * Generated on Thu, 21 Nov 2024 09:37:37 GMT
  */
 
 :root {
@@ -388,7 +388,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-toggletext-text: var(--box-blue-120);
     --text-text-on-light-disabled: var(--gray-30);
     --text-cta-link-disabled: var(--box-blue-30);
     --text-cta-promo: var(--grimace-100);
@@ -445,12 +445,12 @@
     --border-toggletext-border-on-ai-pressed: var(--brand-box-ai-100);
     --border-toggletext-border-on-ai-hover: var(--brand-box-ai-100);
     --border-toggletext-border-on-ai: var(--brand-box-ai-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-toggletext-border-on-pressed: var(--box-blue-40);
+    --border-toggletext-border-on-hover: var(--box-blue-40);
+    --border-toggletext-border-on: var(--box-blue-40);
+    --border-toggletext-border-off-pressed: var(--gray-10);
+    --border-toggletext-border-off-hover: var(--gray-05);
+    --border-toggletext-border-off: var(--gray-white);
     --border-radiotile-border-selected: var(--box-blue-100);
     --border-radiotile-border-hover: var(--gray-30);
     --border-radiotile-border: var(--gray-30);
@@ -532,7 +532,7 @@
     --surface-toggletext-surface-on-ai: var(--brand-box-ai-100);
     --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-toggletext-surface-on: var(--box-blue-10);
     --surface-radiotile-surface-selected: var(--box-blue-05);
     --surface-radiotile-surface-hover: var(--gray-05);
     --surface-radiotile-surface: var(--gray-white);

package/tokens/tokens.js

@@ -225,7 +225,7 @@ export const SurfaceCtaSurfaceDisabled = '#b2cff2';
 export const SurfaceRadiotileSurface = '#ffffff';
 export const SurfaceRadiotileSurfaceHover = '#f4f4f4';
 export const SurfaceRadiotileSurfaceSelected = '#f2f7fd';
-export const SurfaceToggletextSurfaceOn = '#f2f7fd';
+export const SurfaceToggletextSurfaceOn = '#e5effa';
 export const SurfaceToggletextSurfaceOnHover = '#ccdff7';
 export const SurfaceToggletextSurfaceOnPressed = '#b2cff2';
 export const SurfaceToggletextSurfaceOnAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
@@ -308,12 +308,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 BorderToggletextBorderOff = '#ffffff';
+export const BorderToggletextBorderOffHover = '#f4f4f4';
+export const BorderToggletextBorderOffPressed = '#e8e8e8';
+export const BorderToggletextBorderOn = '#99c0ee';
+export const BorderToggletextBorderOnHover = '#99c0ee';
+export const BorderToggletextBorderOnPressed = '#99c0ee';
 export const BorderToggletextBorderOnAi = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
 export const BorderToggletextBorderOnAiHover = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
 export const BorderToggletextBorderOnAiPressed = 'linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)';
@@ -370,7 +370,7 @@ export const TextCtaLinkSecondaryHover = '#6F6F6F';
 export const TextCtaPromo = '#4826c2';
 export const TextCtaLinkDisabled = '#b2cff2';
 export const TextTextOnLightDisabled = '#bcbcbc';
-export const TextToggletextText = '#001D40';
+export const TextToggletextText = '#004EAA';
 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,7 +226,7 @@
     "SurfaceRadiotileSurface": "#ffffff",
     "SurfaceRadiotileSurfaceHover": "#f4f4f4",
     "SurfaceRadiotileSurfaceSelected": "#f2f7fd",
-    "SurfaceToggletextSurfaceOn": "#f2f7fd",
+    "SurfaceToggletextSurfaceOn": "#e5effa",
     "SurfaceToggletextSurfaceOnHover": "#ccdff7",
     "SurfaceToggletextSurfaceOnPressed": "#b2cff2",
     "SurfaceToggletextSurfaceOnAi": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
@@ -309,12 +309,12 @@
     "BorderRadiotileBorder": "#bcbcbc",
     "BorderRadiotileBorderHover": "#bcbcbc",
     "BorderRadiotileBorderSelected": "#0061d5",
-    "BorderToggletextBorderOff": "#6F6F6F",
-    "BorderToggletextBorderOffHover": "#6F6F6F",
-    "BorderToggletextBorderOffPressed": "#6F6F6F",
-    "BorderToggletextBorderOn": "#f2f7fd",
-    "BorderToggletextBorderOnHover": "#ccdff7",
-    "BorderToggletextBorderOnPressed": "#b2cff2",
+    "BorderToggletextBorderOff": "#ffffff",
+    "BorderToggletextBorderOffHover": "#f4f4f4",
+    "BorderToggletextBorderOffPressed": "#e8e8e8",
+    "BorderToggletextBorderOn": "#99c0ee",
+    "BorderToggletextBorderOnHover": "#99c0ee",
+    "BorderToggletextBorderOnPressed": "#99c0ee",
     "BorderToggletextBorderOnAi": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
     "BorderToggletextBorderOnAiHover": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
     "BorderToggletextBorderOnAiPressed": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
@@ -371,7 +371,7 @@
     "TextCtaPromo": "#4826c2",
     "TextCtaLinkDisabled": "#b2cff2",
     "TextTextOnLightDisabled": "#bcbcbc",
-    "TextToggletextText": "#001D40",
+    "TextToggletextText": "#004EAA",
     "OverlaySidepanelOverlay": "rgba(0,0,0,0.5)",
     "OverlayModalOverlay": "rgba(0,0,0,0.8)",
     "BrandBoxPrimary": "#0061d5",

package/tokens/tokens.scss

@@ -225,7 +225,7 @@ $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: #e5effa !default;
 $surface-toggletext-surface-on-hover: #ccdff7 !default;
 $surface-toggletext-surface-on-pressed: #b2cff2 !default;
 $surface-toggletext-surface-on-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
@@ -308,12 +308,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;
+$border-toggletext-border-off: #ffffff !default;
+$border-toggletext-border-off-hover: #f4f4f4 !default;
+$border-toggletext-border-off-pressed: #e8e8e8 !default;
+$border-toggletext-border-on: #99c0ee !default;
+$border-toggletext-border-on-hover: #99c0ee !default;
+$border-toggletext-border-on-pressed: #99c0ee !default;
 $border-toggletext-border-on-ai: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
 $border-toggletext-border-on-ai-hover: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
 $border-toggletext-border-on-ai-pressed: linear-gradient(135deg, #fe03dc 0%, #2784fa 100%) !default;
@@ -370,7 +370,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;
+$text-toggletext-text: #004eaa !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;