@box/blueprint-web-assets 4.121.8 → 4.123.0

package/dist/tokens/tokens.js

@@ -839,7 +839,13 @@ export const NotificationDefaultParagraphIndent = '0rem';
 
 // Auto-appended/updated from tokens.js by append-figma-vars-to-js.js
 export const bpBackgroundBackground = '#ffffff';
+export const bpBackgroundBackgroundLightBlue = '#e5effa';
+export const bpBackgroundBackgroundLightDarkBlue = '#e5ebf2';
+export const bpBackgroundBackgroundLightGreen = '#e9f8f2';
+export const bpBackgroundBackgroundLightGrimace = '#ece9f8';
+export const bpBorderAccordionBorder = '#e8e8e8';
 export const bpBorderAccordionBorderHover = '#e8e8e8';
+export const bpBorderAccordionBorderOutlined = '#0061d5';
 export const bpBorderAvatarBorderHover = 'rgba(0, 0, 0, 0.04)';
 export const bpBorderAvatarBorderPressed = 'rgba(0, 0, 0, 0.08)';
 export const bpBorderBadgeBorder = '#ffffff';
@@ -977,10 +983,14 @@ export const bpIconNavIconOnLight = '#222222';
 export const bpIconNavIconOnLightFocus = '#222222';
 export const bpIconNavIconOnLightHover = '#222222';
 export const bpIconNavIconOnLightSelected = '#222222';
+export const bpIconIconAnnotation = '#0057c0';
 export const bpIconIconBlue = '#0061d5';
+export const bpIconIconDarkBlue = '#003677';
 export const bpIconIconDestructiveOnLight = '#d5324e';
 export const bpIconIconErrorOnColor = '#821e30';
 export const bpIconIconErrorOnLight = '#d5324e';
+export const bpIconIconGreen = '#1e9b67';
+export const bpIconIconGrimace = '#4122af';
 export const bpIconIconIllustrator = '#ff9400';
 export const bpIconIconIndesign = '#ff57a1';
 export const bpIconIconInfoOnColor = '#00316b';
@@ -991,15 +1001,17 @@ export const bpIconIconOnLightTertiary = 'rgba(0, 0, 0, 0.5)';
 export const bpIconIconPhotoshop = '#26c9ff';
 export const bpIconIconRequiredOnLight = '#d5324e';
 export const bpIconIconSuccessOnColor = '#0f4e34';
+export const bpIconIconVariable = '#8f39d5';
 export const bpIconIconWarningOnColor = '#62480b';
 export const bpOutlineFocusOnDark = '#ffffff';
 export const bpOutlineFocusOnLight = '#2486fc';
 export const bpOverlayModalOverlay = 'rgba(0, 0, 0, 0.5)';
 export const bpOverlaySidePanelOverlay = 'rgba(0, 0, 0, 0.5)';
-export const bpSurfaceAccordionSurfaceCollapsed = 'rgba(0, 0, 0, 0.04)';
+export const bpSurfaceAccordionSurfaceCollapsed = '#ffffff';
 export const bpSurfaceAccordionSurfaceCollapsedHover = 'rgba(0, 0, 0, 0.08)';
 export const bpSurfaceAccordionSurfaceExpanded = '#ffffff';
 export const bpSurfaceAccordionSurfaceExpandedHover = '#ffffff';
+export const bpSurfaceAccordionSurfaceExpandedOutlined = '#fafcfe';
 export const bpSurfaceBadgeSurfaceAdmin = '#003c84';
 export const bpSurfaceBadgeSurfaceAlert = '#d97417';
 export const bpSurfaceBadgeSurfaceAnnotation = '#f5b31b';
@@ -1012,6 +1024,7 @@ export const bpSurfaceBadgeSurfaceCoadmin = '#9f3fed';
 export const bpSurfaceBadgeSurfaceCode = '#ed3757';
 export const bpSurfaceBadgeSurfaceCollection = '#e8e8e8';
 export const bpSurfaceBadgeSurfaceCompleted = '#1e9b67';
+export const bpSurfaceBadgeSurfaceContentOffline = '#20a56e';
 export const bpSurfaceBadgeSurfaceDefault = '#6f6f6f';
 export const bpSurfaceBadgeSurfaceDocs = '#4083f7';
 export const bpSurfaceBadgeSurfaceDrawing = '#009aed';
@@ -1035,6 +1048,7 @@ export const bpSurfaceBadgeSurfaceOffline = '#26c281';
 export const bpSurfaceBadgeSurfaceOnline = '#1e9b67';
 export const bpSurfaceBadgeSurfacePages = '#ff9500';
 export const bpSurfaceBadgeSurfacePdf = '#d0021b';
+export const bpSurfaceBadgeSurfacePending = '#d97417';
 export const bpSurfaceBadgeSurfacePhotoshop = '#131415';
 export const bpSurfaceBadgeSurfacePin = '#e8e8e8';
 export const bpSurfaceBadgeSurfacePowerpoint = '#c43e1c';
@@ -1179,8 +1193,11 @@ export const bpSurfaceInputSurfaceFocus = '#ffffff';
 export const bpSurfaceInputSurfaceHover = '#ffffff';
 export const bpSurfaceInputSurfaceReadOnly = '#fbfbfb';
 export const bpSurfaceInputChipSurface = '#e8e8e8';
+export const bpSurfaceInputChipSurfaceAnnotation = 'rgba(0, 97, 213, 0.08)';
+export const bpSurfaceInputChipSurfaceDisabled = 'rgba(0, 0, 0, 0.04)';
 export const bpSurfaceInputChipSurfaceError = '#fdebee';
 export const bpSurfaceInputChipSurfaceHover = '#e8e8e8';
+export const bpSurfaceInputChipSurfaceVariable = 'rgba(159, 63, 237, 0.08)';
 export const bpSurfaceItemSmallSurface = '#ffffff';
 export const bpSurfaceItemSmallSurfaceHover = '#f4f4f4';
 export const bpSurfaceItemSmallSurfaceSelected = '#f2f7fd';
@@ -1320,9 +1337,12 @@ export const bpTextCtaLinkDisabled = '#b2cff2';
 export const bpTextCtaLinkHover = '#1d6bca';
 export const bpTextCtaLinkPressed = '#2486fc';
 export const bpTextCtaLinkSecondary = '#6f6f6f';
-export const bpTextCtaLinkSecondaryHover = '#6f6f6f';
-export const bpTextCtaLinkSecondaryPressed = '#6f6f6f';
+export const bpTextCtaLinkSecondaryHover = '#4e4e4e';
+export const bpTextCtaLinkSecondaryPressed = '#222222';
 export const bpTextCtaPromo = '#4826c2';
+export const bpTextCtaSecondary = '#6f6f6f';
+export const bpTextCtaSecondaryHover = '#4e4e4e';
+export const bpTextCtaSecondaryPressed = '#4e4e4e';
 export const bpTextNavTextOnDark = '#ffffff';
 export const bpTextNavTextOnDarkFocus = '#ffffff';
 export const bpTextNavTextOnDarkHover = '#ffffff';
@@ -1332,6 +1352,7 @@ export const bpTextNavTextOnLightFocus = '#ffffff';
 export const bpTextNavTextOnLightHover = '#ffffff';
 export const bpTextNavTextOnLightSelected = '#ffffff';
 export const bpTextToggleTextText = '#004eaa';
+export const bpTextTextAnnotationOnColor = '#0057c0';
 export const bpTextTextBrandOnColor = '#ffffff';
 export const bpTextTextDestructiveOnLight = '#d5324e';
 export const bpTextTextErrorOnColor = '#821e30';
@@ -1344,6 +1365,7 @@ export const bpTextTextOnLightSecondary = '#6f6f6f';
 export const bpTextTextOnLightSecondaryHover = '#4e4e4e';
 export const bpTextTextOnLightTertiary = '#909090';
 export const bpTextTextSuccessOnColor = '#0f4e34';
+export const bpTextTextVariableOnColor = '#8f39d5';
 export const bpTextTextWarningOnColor = '#62480b';
 export const bpBoxBlue10 = '#e5effa';
 export const bpBoxBlue20 = '#ccdff7';
@@ -1830,6 +1852,19 @@ export const bpOrangeOpacity90 = 'rgba(245, 179, 27, 0.9)';
 export const bpOrangeOpacity00 = 'rgba(245, 179, 27, 0)';
 export const bpOrangeOpacity04 = 'rgba(245, 179, 27, 0.04)';
 export const bpOrangeOpacity08 = 'rgba(245, 179, 27, 0.08)';
+export const bpPurpleRainOpacity12 = 'rgba(159, 63, 237, 0.12)';
+export const bpPurpleRainOpacity16 = 'rgba(159, 63, 237, 0.16)';
+export const bpPurpleRainOpacity20 = 'rgba(159, 63, 237, 0.2)';
+export const bpPurpleRainOpacity24 = 'rgba(159, 63, 237, 0.24)';
+export const bpPurpleRainOpacity30 = 'rgba(159, 63, 237, 0.3)';
+export const bpPurpleRainOpacity50 = 'rgba(159, 63, 237, 0.5)';
+export const bpPurpleRainOpacity60 = 'rgba(159, 63, 237, 0.6)';
+export const bpPurpleRainOpacity70 = 'rgba(159, 63, 237, 0.7)';
+export const bpPurpleRainOpacity80 = 'rgba(159, 63, 237, 0.8)';
+export const bpPurpleRainOpacity90 = 'rgba(159, 63, 237, 0.9)';
+export const bpPurpleRainOpacity00 = 'rgba(159, 63, 237, 0)';
+export const bpPurpleRainOpacity04 = 'rgba(159, 63, 237, 0.04)';
+export const bpPurpleRainOpacity08 = 'rgba(159, 63, 237, 0.08)';
 export const bpWatermelonRedOpacity12 = 'rgba(237, 55, 87, 0.12)';
 export const bpWatermelonRedOpacity16 = 'rgba(237, 55, 87, 0.16)';
 export const bpWatermelonRedOpacity20 = 'rgba(237, 55, 87, 0.2)';
@@ -1897,6 +1932,6 @@ export const bpDurationMedium = '150ms';
 export const bpDurationShort = '100ms';
 export const bpOpacityHidden = '0';
 export const bpOpacityVisible = '1';
-export const bpScaleDefault = 'scale(1.00)';
-export const bpScaleLarge = 'scale(1.12)';
-export const bpScaleSmall = 'scale(0.98)';
+export const bpScaleDefault = '1.00';
+export const bpScaleLarge = '1.12';
+export const bpScaleSmall = '0.98';

package/dist/tokens/tokens.json

@@ -820,7 +820,13 @@
     "NotificationDefaultParagraphSpacing": "0rem",
     "NotificationDefaultParagraphIndent": "0rem",
     "BpBackgroundBackground": "#ffffff",
+    "BpBackgroundBackgroundLightBlue": "#e5effa",
+    "BpBackgroundBackgroundLightDarkBlue": "#e5ebf2",
+    "BpBackgroundBackgroundLightGreen": "#e9f8f2",
+    "BpBackgroundBackgroundLightGrimace": "#ece9f8",
+    "BpBorderAccordionBorder": "#e8e8e8",
     "BpBorderAccordionBorderHover": "#e8e8e8",
+    "BpBorderAccordionBorderOutlined": "#0061d5",
     "BpBorderAvatarBorderHover": "rgba(0, 0, 0, 0.04)",
     "BpBorderAvatarBorderPressed": "rgba(0, 0, 0, 0.08)",
     "BpBorderBadgeBorder": "#ffffff",
@@ -958,10 +964,14 @@
     "BpIconNavIconOnLightFocus": "#222222",
     "BpIconNavIconOnLightHover": "#222222",
     "BpIconNavIconOnLightSelected": "#222222",
+    "BpIconIconAnnotation": "#0057c0",
     "BpIconIconBlue": "#0061d5",
+    "BpIconIconDarkBlue": "#003677",
     "BpIconIconDestructiveOnLight": "#d5324e",
     "BpIconIconErrorOnColor": "#821e30",
     "BpIconIconErrorOnLight": "#d5324e",
+    "BpIconIconGreen": "#1e9b67",
+    "BpIconIconGrimace": "#4122af",
     "BpIconIconIllustrator": "#ff9400",
     "BpIconIconIndesign": "#ff57a1",
     "BpIconIconInfoOnColor": "#00316b",
@@ -972,15 +982,17 @@
     "BpIconIconPhotoshop": "#26c9ff",
     "BpIconIconRequiredOnLight": "#d5324e",
     "BpIconIconSuccessOnColor": "#0f4e34",
+    "BpIconIconVariable": "#8f39d5",
     "BpIconIconWarningOnColor": "#62480b",
     "BpOutlineFocusOnDark": "#ffffff",
     "BpOutlineFocusOnLight": "#2486fc",
     "BpOverlayModalOverlay": "rgba(0, 0, 0, 0.5)",
     "BpOverlaySidePanelOverlay": "rgba(0, 0, 0, 0.5)",
-    "BpSurfaceAccordionSurfaceCollapsed": "rgba(0, 0, 0, 0.04)",
+    "BpSurfaceAccordionSurfaceCollapsed": "#ffffff",
     "BpSurfaceAccordionSurfaceCollapsedHover": "rgba(0, 0, 0, 0.08)",
     "BpSurfaceAccordionSurfaceExpanded": "#ffffff",
     "BpSurfaceAccordionSurfaceExpandedHover": "#ffffff",
+    "BpSurfaceAccordionSurfaceExpandedOutlined": "#fafcfe",
     "BpSurfaceBadgeSurfaceAdmin": "#003c84",
     "BpSurfaceBadgeSurfaceAlert": "#d97417",
     "BpSurfaceBadgeSurfaceAnnotation": "#f5b31b",
@@ -993,6 +1005,7 @@
     "BpSurfaceBadgeSurfaceCode": "#ed3757",
     "BpSurfaceBadgeSurfaceCollection": "#e8e8e8",
     "BpSurfaceBadgeSurfaceCompleted": "#1e9b67",
+    "BpSurfaceBadgeSurfaceContentOffline": "#20a56e",
     "BpSurfaceBadgeSurfaceDefault": "#6f6f6f",
     "BpSurfaceBadgeSurfaceDocs": "#4083f7",
     "BpSurfaceBadgeSurfaceDrawing": "#009aed",
@@ -1016,6 +1029,7 @@
     "BpSurfaceBadgeSurfaceOnline": "#1e9b67",
     "BpSurfaceBadgeSurfacePages": "#ff9500",
     "BpSurfaceBadgeSurfacePdf": "#d0021b",
+    "BpSurfaceBadgeSurfacePending": "#d97417",
     "BpSurfaceBadgeSurfacePhotoshop": "#131415",
     "BpSurfaceBadgeSurfacePin": "#e8e8e8",
     "BpSurfaceBadgeSurfacePowerpoint": "#c43e1c",
@@ -1103,6 +1117,8 @@
     "BpSurfaceDatePickerSurfaceError": "#ffffff",
     "BpSurfaceDatePickerSurfaceFocus": "#ffffff",
     "BpSurfaceDatePickerSurfaceHover": "#ffffff",
+    "BpSurfaceDropdownQuaternarySurfaceHover": "rgba(255, 255, 255, 0.04)",
+    "BpSurfaceDropdownQuaternarySurfacePressed": "rgba(255, 255, 255, 0.08)",
     "BpSurfaceDropdownSecondarySurface": "rgba(255, 255, 255, 0.7)",
     "BpSurfaceDropdownSecondarySurfaceHover": "rgba(0, 0, 0, 0.04)",
     "BpSurfaceDropdownSecondarySurfacePressed": "rgba(0, 0, 0, 0.08)",
@@ -1162,8 +1178,15 @@
     "BpSurfaceInputSurfaceHover": "#ffffff",
     "BpSurfaceInputSurfaceReadOnly": "#fbfbfb",
     "BpSurfaceInputChipSurface": "#e8e8e8",
+    "BpSurfaceInputChipSurfaceAnnotation": "rgba(0, 97, 213, 0.08)",
+    "BpSurfaceInputChipSurfaceAnnotationHover": "rgba(0, 97, 213, 0.12)",
+    "BpSurfaceInputChipSurfaceAnnotationPressed": "rgba(0, 97, 213, 0.16)",
+    "BpSurfaceInputChipSurfaceDisabled": "rgba(0, 0, 0, 0.04)",
     "BpSurfaceInputChipSurfaceError": "#fdebee",
     "BpSurfaceInputChipSurfaceHover": "#e8e8e8",
+    "BpSurfaceInputChipSurfaceVariable": "rgba(159, 63, 237, 0.08)",
+    "BpSurfaceInputChipSurfaceVariableHover": "rgba(159, 63, 237, 0.12)",
+    "BpSurfaceInputChipSurfaceVariablePressed": "rgba(159, 63, 237, 0.16)",
     "BpSurfaceItemSmallSurface": "#ffffff",
     "BpSurfaceItemSmallSurfaceHover": "#f4f4f4",
     "BpSurfaceItemSmallSurfaceSelected": "#f2f7fd",
@@ -1308,9 +1331,12 @@
     "BpTextCtaLinkHover": "#1d6bca",
     "BpTextCtaLinkPressed": "#2486fc",
     "BpTextCtaLinkSecondary": "#6f6f6f",
-    "BpTextCtaLinkSecondaryHover": "#6f6f6f",
-    "BpTextCtaLinkSecondaryPressed": "#6f6f6f",
+    "BpTextCtaLinkSecondaryHover": "#4e4e4e",
+    "BpTextCtaLinkSecondaryPressed": "#222222",
     "BpTextCtaPromo": "#4826c2",
+    "BpTextCtaSecondary": "#6f6f6f",
+    "BpTextCtaSecondaryHover": "#4e4e4e",
+    "BpTextCtaSecondaryPressed": "#4e4e4e",
     "BpTextNavTextOnDark": "#ffffff",
     "BpTextNavTextOnDarkFocus": "#ffffff",
     "BpTextNavTextOnDarkHover": "#ffffff",
@@ -1320,6 +1346,7 @@
     "BpTextNavTextOnLightHover": "#ffffff",
     "BpTextNavTextOnLightSelected": "#ffffff",
     "BpTextToggleTextText": "#004eaa",
+    "BpTextTextAnnotationOnColor": "#0057c0",
     "BpTextTextBrandOnColor": "#ffffff",
     "BpTextTextDestructiveOnLight": "#d5324e",
     "BpTextTextErrorOnColor": "#821e30",
@@ -1332,6 +1359,7 @@
     "BpTextTextOnLightSecondaryHover": "#4e4e4e",
     "BpTextTextOnLightTertiary": "#909090",
     "BpTextTextSuccessOnColor": "#0f4e34",
+    "BpTextTextVariableOnColor": "#8f39d5",
     "BpTextTextWarningOnColor": "#62480b",
     "BpBoxBlue10": "#e5effa",
     "BpBoxBlue20": "#ccdff7",
@@ -1818,6 +1846,19 @@
     "BpOrangeOpacity00": "rgba(245, 179, 27, 0)",
     "BpOrangeOpacity04": "rgba(245, 179, 27, 0.04)",
     "BpOrangeOpacity08": "rgba(245, 179, 27, 0.08)",
+    "BpPurpleRainOpacity12": "rgba(159, 63, 237, 0.12)",
+    "BpPurpleRainOpacity16": "rgba(159, 63, 237, 0.16)",
+    "BpPurpleRainOpacity20": "rgba(159, 63, 237, 0.2)",
+    "BpPurpleRainOpacity24": "rgba(159, 63, 237, 0.24)",
+    "BpPurpleRainOpacity30": "rgba(159, 63, 237, 0.3)",
+    "BpPurpleRainOpacity50": "rgba(159, 63, 237, 0.5)",
+    "BpPurpleRainOpacity60": "rgba(159, 63, 237, 0.6)",
+    "BpPurpleRainOpacity70": "rgba(159, 63, 237, 0.7)",
+    "BpPurpleRainOpacity80": "rgba(159, 63, 237, 0.8)",
+    "BpPurpleRainOpacity90": "rgba(159, 63, 237, 0.9)",
+    "BpPurpleRainOpacity00": "rgba(159, 63, 237, 0)",
+    "BpPurpleRainOpacity04": "rgba(159, 63, 237, 0.04)",
+    "BpPurpleRainOpacity08": "rgba(159, 63, 237, 0.08)",
     "BpWatermelonRedOpacity12": "rgba(237, 55, 87, 0.12)",
     "BpWatermelonRedOpacity16": "rgba(237, 55, 87, 0.16)",
     "BpWatermelonRedOpacity20": "rgba(237, 55, 87, 0.2)",
@@ -1885,7 +1926,7 @@
     "BpDurationShort": "100ms",
     "BpOpacityHidden": "0",
     "BpOpacityVisible": "1",
-    "BpScaleDefault": "scale(1.00)",
-    "BpScaleLarge": "scale(1.12)",
-    "BpScaleSmall": "scale(0.98)"
+    "BpScaleDefault": "1.00",
+    "BpScaleLarge": "1.12",
+    "BpScaleSmall": "0.98"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web-assets",
-    "version": "4.121.8",
+    "version": "4.123.0",
     "license": "SEE LICENSE IN LICENSE",
     "scripts": {
         "build-storybook": "nx run blueprint-web-assets:build-storybook",
@@ -150,7 +150,7 @@
         }
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.20.8",
+        "@box/storybook-utils": "^0.20.10",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",