@box/blueprint-web-assets 4.121.8 → 4.122.0

package/dist/tokens/BP2/light_mode_value/tokens.css

@@ -525,6 +525,19 @@
     --bp-orange-opacity-00: rgba(245, 179, 27, 0);
     --bp-orange-opacity-04: rgba(245, 179, 27, 0.04);
     --bp-orange-opacity-08: rgba(245, 179, 27, 0.08);
+    --bp-purple-rain-opacity-12: rgba(159, 63, 237, 0.12);
+    --bp-purple-rain-opacity-16: rgba(159, 63, 237, 0.16);
+    --bp-purple-rain-opacity-20: rgba(159, 63, 237, 0.2);
+    --bp-purple-rain-opacity-24: rgba(159, 63, 237, 0.24);
+    --bp-purple-rain-opacity-30: rgba(159, 63, 237, 0.3);
+    --bp-purple-rain-opacity-50: rgba(159, 63, 237, 0.5);
+    --bp-purple-rain-opacity-60: rgba(159, 63, 237, 0.6);
+    --bp-purple-rain-opacity-70: rgba(159, 63, 237, 0.7);
+    --bp-purple-rain-opacity-80: rgba(159, 63, 237, 0.8);
+    --bp-purple-rain-opacity-90: rgba(159, 63, 237, 0.9);
+    --bp-purple-rain-opacity-00: rgba(159, 63, 237, 0);
+    --bp-purple-rain-opacity-04: rgba(159, 63, 237, 0.04);
+    --bp-purple-rain-opacity-08: rgba(159, 63, 237, 0.08);
     --bp-watermelon-red-opacity-12: rgba(237, 55, 87, 0.12);
     --bp-watermelon-red-opacity-16: rgba(237, 55, 87, 0.16);
     --bp-watermelon-red-opacity-20: rgba(237, 55, 87, 0.2);
@@ -592,11 +605,17 @@
     --bp-duration-short: 100ms;
     --bp-opacity-hidden: 0;
     --bp-opacity-visible: 1;
-    --bp-scale-default: scale(1);
-    --bp-scale-large: scale(1.12);
-    --bp-scale-small: scale(0.98);
+    --bp-scale-default: 1;
+    --bp-scale-large: 1.12;
+    --bp-scale-small: 0.98;
     --bp-background-background: var(--bp-gray-white);
+    --bp-background-background-light-blue: var(--bp-box-blue-10);
+    --bp-background-background-light-dark-blue: var(--bp-dark-blue-10);
+    --bp-background-background-light-green: var(--bp-green-light-10);
+    --bp-background-background-light-grimace: var(--bp-grimace-10);
+    --bp-border-accordion-border: var(--bp-gray-10);
     --bp-border-accordion-border-hover: var(--bp-gray-10);
+    --bp-border-accordion-border-outlined: var(--bp-box-blue-100);
     --bp-border-avatar-border-hover: var(--bp-black-opacity-04);
     --bp-border-avatar-border-pressed: var(--bp-black-opacity-08);
     --bp-border-badge-border: var(--bp-gray-white);
@@ -723,10 +742,14 @@
     --bp-icon-nav-icon-on-light-focus: var(--bp-gray-100);
     --bp-icon-nav-icon-on-light-hover: var(--bp-gray-100);
     --bp-icon-nav-icon-on-light-selected: var(--bp-gray-100);
+    --bp-icon-icon-annotation: var(--bp-box-blue-110);
     --bp-icon-icon-blue: var(--bp-box-blue-100);
+    --bp-icon-icon-dark-blue: var(--bp-dark-blue-110);
     --bp-icon-icon-destructive-on-light: var(--bp-watermelon-red-110);
     --bp-icon-icon-error-on-color: var(--bp-watermelon-red-145);
     --bp-icon-icon-error-on-light: var(--bp-watermelon-red-110);
+    --bp-icon-icon-green: var(--bp-green-light-120);
+    --bp-icon-icon-grimace: var(--bp-grimace-110);
     --bp-icon-icon-info-on-color: var(--bp-box-blue-150);
     --bp-icon-icon-on-dark: var(--bp-gray-white);
     --bp-icon-icon-on-light: var(--bp-black-opacity-90);
@@ -734,15 +757,17 @@
     --bp-icon-icon-on-light-tertiary: var(--bp-black-opacity-50);
     --bp-icon-icon-required-on-light: var(--bp-watermelon-red-110);
     --bp-icon-icon-success-on-color: var(--bp-green-light-160);
+    --bp-icon-icon-variable: var(--bp-purple-rain-110);
     --bp-icon-icon-warning-on-color: var(--bp-yellorange-160);
     --bp-outline-focus-on-dark: var(--bp-gray-white);
     --bp-outline-focus-on-light: var(--bp-light-blue-100);
     --bp-overlay-modal-overlay: var(--bp-black-opacity-50);
     --bp-overlay-side-panel-overlay: var(--bp-black-opacity-50);
-    --bp-surface-accordion-surface-collapsed: var(--bp-black-opacity-04);
+    --bp-surface-accordion-surface-collapsed: var(--bp-gray-white);
     --bp-surface-accordion-surface-collapsed-hover: var(--bp-black-opacity-08);
     --bp-surface-accordion-surface-expanded: var(--bp-gray-white);
     --bp-surface-accordion-surface-expanded-hover: var(--bp-gray-white);
+    --bp-surface-accordion-surface-expanded-outlined: var(--bp-box-blue-02);
     --bp-surface-badge-surface-admin: var(--bp-dark-blue-100);
     --bp-surface-badge-surface-alert: var(--bp-orange-110);
     --bp-surface-badge-surface-annotation: var(--bp-yellorange-100);
@@ -755,6 +780,7 @@
     --bp-surface-badge-surface-code: var(--bp-watermelon-red-100);
     --bp-surface-badge-surface-collection: var(--bp-gray-10);
     --bp-surface-badge-surface-completed: var(--bp-green-light-120);
+    --bp-surface-badge-surface-content-offline: var(--bp-green-light-115);
     --bp-surface-badge-surface-default: var(--bp-gray-65);
     --bp-surface-badge-surface-error: var(--bp-watermelon-red-110);
     --bp-surface-badge-surface-external: var(--bp-gray-50);
@@ -769,6 +795,7 @@
     --bp-surface-badge-surface-notification: var(--bp-watermelon-red-110);
     --bp-surface-badge-surface-offline: var(--bp-green-light-100);
     --bp-surface-badge-surface-online: var(--bp-green-light-120);
+    --bp-surface-badge-surface-pending: var(--bp-orange-110);
     --bp-surface-badge-surface-pin: var(--bp-gray-10);
     --bp-surface-badge-surface-presentation: var(--bp-orange-110);
     --bp-surface-badge-surface-progress: var(--bp-yellorange-100);
@@ -848,6 +875,8 @@
     --bp-surface-date-picker-surface-error: var(--bp-gray-white);
     --bp-surface-date-picker-surface-focus: var(--bp-gray-white);
     --bp-surface-date-picker-surface-hover: var(--bp-gray-white);
+    --bp-surface-dropdown-quaternary-surface-hover: var(--bp-white-opacity-04);
+    --bp-surface-dropdown-quaternary-surface-pressed: var(--bp-white-opacity-08);
     --bp-surface-dropdown-secondary-surface: var(--bp-white-opacity-70);
     --bp-surface-dropdown-secondary-surface-hover: var(--bp-black-opacity-04);
     --bp-surface-dropdown-secondary-surface-pressed: var(--bp-black-opacity-08);
@@ -907,8 +936,15 @@
     --bp-surface-input-surface-hover: var(--bp-gray-white);
     --bp-surface-input-surface-read-only: var(--bp-gray-02);
     --bp-surface-input-chip-surface: var(--bp-gray-10);
+    --bp-surface-input-chip-surface-annotation: var(--bp-box-blue-opacity-08);
+    --bp-surface-input-chip-surface-annotation-hover: var(--bp-box-blue-opacity-12);
+    --bp-surface-input-chip-surface-annotation-pressed: var(--bp-box-blue-opacity-16);
+    --bp-surface-input-chip-surface-disabled: var(--bp-black-opacity-04);
     --bp-surface-input-chip-surface-error: var(--bp-watermelon-red-10);
     --bp-surface-input-chip-surface-hover: var(--bp-gray-10);
+    --bp-surface-input-chip-surface-variable: var(--bp-purple-rain-opacity-08);
+    --bp-surface-input-chip-surface-variable-hover: var(--bp-purple-rain-opacity-12);
+    --bp-surface-input-chip-surface-variable-pressed: var(--bp-purple-rain-opacity-16);
     --bp-surface-item-small-surface: var(--bp-gray-white);
     --bp-surface-item-small-surface-hover: var(--bp-gray-05);
     --bp-surface-item-small-surface-selected: var(--bp-box-blue-05);
@@ -1047,9 +1083,12 @@
     --bp-text-cta-link-hover: var(--bp-light-blue-120);
     --bp-text-cta-link-pressed: var(--bp-light-blue-100);
     --bp-text-cta-link-secondary: var(--bp-gray-65);
-    --bp-text-cta-link-secondary-hover: var(--bp-gray-65);
-    --bp-text-cta-link-secondary-pressed: var(--bp-gray-65);
+    --bp-text-cta-link-secondary-hover: var(--bp-gray-80);
+    --bp-text-cta-link-secondary-pressed: var(--bp-gray-100);
     --bp-text-cta-promo: var(--bp-grimace-100);
+    --bp-text-cta-secondary: var(--bp-gray-65);
+    --bp-text-cta-secondary-hover: var(--bp-gray-80);
+    --bp-text-cta-secondary-pressed: var(--bp-gray-80);
     --bp-text-nav-text-on-dark: var(--bp-gray-white);
     --bp-text-nav-text-on-dark-focus: var(--bp-gray-white);
     --bp-text-nav-text-on-dark-hover: var(--bp-gray-white);
@@ -1059,6 +1098,7 @@
     --bp-text-nav-text-on-light-hover: var(--bp-gray-white);
     --bp-text-nav-text-on-light-selected: var(--bp-gray-white);
     --bp-text-toggle-text-text: var(--bp-box-blue-120);
+    --bp-text-text-annotation-on-color: var(--bp-box-blue-110);
     --bp-text-text-brand-on-color: var(--bp-gray-white);
     --bp-text-text-destructive-on-light: var(--bp-watermelon-red-110);
     --bp-text-text-error-on-color: var(--bp-watermelon-red-145);
@@ -1071,5 +1111,6 @@
     --bp-text-text-on-light-secondary-hover: var(--bp-gray-80);
     --bp-text-text-on-light-tertiary: var(--bp-gray-50);
     --bp-text-text-success-on-color: var(--bp-green-light-160);
+    --bp-text-text-variable-on-color: var(--bp-purple-rain-110);
     --bp-text-text-warning-on-color: var(--bp-yellorange-160);
 }

package/dist/tokens/BP2/light_mode_value/tokens.d.ts

@@ -1,5 +1,11 @@
 export const bpBackgroundBackground: string;
+export const bpBackgroundBackgroundLightBlue: string;
+export const bpBackgroundBackgroundLightDarkBlue: string;
+export const bpBackgroundBackgroundLightGreen: string;
+export const bpBackgroundBackgroundLightGrimace: string;
+export const bpBorderAccordionBorder: string;
 export const bpBorderAccordionBorderHover: string;
+export const bpBorderAccordionBorderOutlined: string;
 export const bpBorderAvatarBorderHover: string;
 export const bpBorderAvatarBorderPressed: string;
 export const bpBorderBadgeBorder: string;
@@ -137,10 +143,14 @@ export const bpIconNavIconOnLight: string;
 export const bpIconNavIconOnLightFocus: string;
 export const bpIconNavIconOnLightHover: string;
 export const bpIconNavIconOnLightSelected: string;
+export const bpIconIconAnnotation: string;
 export const bpIconIconBlue: string;
+export const bpIconIconDarkBlue: string;
 export const bpIconIconDestructiveOnLight: string;
 export const bpIconIconErrorOnColor: string;
 export const bpIconIconErrorOnLight: string;
+export const bpIconIconGreen: string;
+export const bpIconIconGrimace: string;
 export const bpIconIconIllustrator: string;
 export const bpIconIconIndesign: string;
 export const bpIconIconInfoOnColor: string;
@@ -151,6 +161,7 @@ export const bpIconIconOnLightTertiary: string;
 export const bpIconIconPhotoshop: string;
 export const bpIconIconRequiredOnLight: string;
 export const bpIconIconSuccessOnColor: string;
+export const bpIconIconVariable: string;
 export const bpIconIconWarningOnColor: string;
 export const bpOutlineFocusOnDark: string;
 export const bpOutlineFocusOnLight: string;
@@ -160,6 +171,7 @@ export const bpSurfaceAccordionSurfaceCollapsed: string;
 export const bpSurfaceAccordionSurfaceCollapsedHover: string;
 export const bpSurfaceAccordionSurfaceExpanded: string;
 export const bpSurfaceAccordionSurfaceExpandedHover: string;
+export const bpSurfaceAccordionSurfaceExpandedOutlined: string;
 export const bpSurfaceBadgeSurfaceAdmin: string;
 export const bpSurfaceBadgeSurfaceAlert: string;
 export const bpSurfaceBadgeSurfaceAnnotation: string;
@@ -172,6 +184,7 @@ export const bpSurfaceBadgeSurfaceCoadmin: string;
 export const bpSurfaceBadgeSurfaceCode: string;
 export const bpSurfaceBadgeSurfaceCollection: string;
 export const bpSurfaceBadgeSurfaceCompleted: string;
+export const bpSurfaceBadgeSurfaceContentOffline: string;
 export const bpSurfaceBadgeSurfaceDefault: string;
 export const bpSurfaceBadgeSurfaceDocs: string;
 export const bpSurfaceBadgeSurfaceDrawing: string;
@@ -195,6 +208,7 @@ export const bpSurfaceBadgeSurfaceOffline: string;
 export const bpSurfaceBadgeSurfaceOnline: string;
 export const bpSurfaceBadgeSurfacePages: string;
 export const bpSurfaceBadgeSurfacePdf: string;
+export const bpSurfaceBadgeSurfacePending: string;
 export const bpSurfaceBadgeSurfacePhotoshop: string;
 export const bpSurfaceBadgeSurfacePin: string;
 export const bpSurfaceBadgeSurfacePowerpoint: string;
@@ -282,6 +296,8 @@ export const bpSurfaceDatePickerSurfaceDisabled: string;
 export const bpSurfaceDatePickerSurfaceError: string;
 export const bpSurfaceDatePickerSurfaceFocus: string;
 export const bpSurfaceDatePickerSurfaceHover: string;
+export const bpSurfaceDropdownQuaternarySurfaceHover: string;
+export const bpSurfaceDropdownQuaternarySurfacePressed: string;
 export const bpSurfaceDropdownSecondarySurface: string;
 export const bpSurfaceDropdownSecondarySurfaceHover: string;
 export const bpSurfaceDropdownSecondarySurfacePressed: string;
@@ -341,8 +357,15 @@ export const bpSurfaceInputSurfaceFocus: string;
 export const bpSurfaceInputSurfaceHover: string;
 export const bpSurfaceInputSurfaceReadOnly: string;
 export const bpSurfaceInputChipSurface: string;
+export const bpSurfaceInputChipSurfaceAnnotation: string;
+export const bpSurfaceInputChipSurfaceAnnotationHover: string;
+export const bpSurfaceInputChipSurfaceAnnotationPressed: string;
+export const bpSurfaceInputChipSurfaceDisabled: string;
 export const bpSurfaceInputChipSurfaceError: string;
 export const bpSurfaceInputChipSurfaceHover: string;
+export const bpSurfaceInputChipSurfaceVariable: string;
+export const bpSurfaceInputChipSurfaceVariableHover: string;
+export const bpSurfaceInputChipSurfaceVariablePressed: string;
 export const bpSurfaceItemSmallSurface: string;
 export const bpSurfaceItemSmallSurfaceHover: string;
 export const bpSurfaceItemSmallSurfaceSelected: string;
@@ -490,6 +513,9 @@ export const bpTextCtaLinkSecondary: string;
 export const bpTextCtaLinkSecondaryHover: string;
 export const bpTextCtaLinkSecondaryPressed: string;
 export const bpTextCtaPromo: string;
+export const bpTextCtaSecondary: string;
+export const bpTextCtaSecondaryHover: string;
+export const bpTextCtaSecondaryPressed: string;
 export const bpTextNavTextOnDark: string;
 export const bpTextNavTextOnDarkFocus: string;
 export const bpTextNavTextOnDarkHover: string;
@@ -499,6 +525,7 @@ export const bpTextNavTextOnLightFocus: string;
 export const bpTextNavTextOnLightHover: string;
 export const bpTextNavTextOnLightSelected: string;
 export const bpTextToggleTextText: string;
+export const bpTextTextAnnotationOnColor: string;
 export const bpTextTextBrandOnColor: string;
 export const bpTextTextDestructiveOnLight: string;
 export const bpTextTextErrorOnColor: string;
@@ -511,6 +538,7 @@ export const bpTextTextOnLightSecondary: string;
 export const bpTextTextOnLightSecondaryHover: string;
 export const bpTextTextOnLightTertiary: string;
 export const bpTextTextSuccessOnColor: string;
+export const bpTextTextVariableOnColor: string;
 export const bpTextTextWarningOnColor: string;
 export const bpBoxBlue10: string;
 export const bpBoxBlue20: string;
@@ -997,6 +1025,19 @@ export const bpOrangeOpacity90: string;
 export const bpOrangeOpacity00: string;
 export const bpOrangeOpacity04: string;
 export const bpOrangeOpacity08: string;
+export const bpPurpleRainOpacity12: string;
+export const bpPurpleRainOpacity16: string;
+export const bpPurpleRainOpacity20: string;
+export const bpPurpleRainOpacity24: string;
+export const bpPurpleRainOpacity30: string;
+export const bpPurpleRainOpacity50: string;
+export const bpPurpleRainOpacity60: string;
+export const bpPurpleRainOpacity70: string;
+export const bpPurpleRainOpacity80: string;
+export const bpPurpleRainOpacity90: string;
+export const bpPurpleRainOpacity00: string;
+export const bpPurpleRainOpacity04: string;
+export const bpPurpleRainOpacity08: string;
 export const bpWatermelonRedOpacity12: string;
 export const bpWatermelonRedOpacity16: string;
 export const bpWatermelonRedOpacity20: string;

package/dist/tokens/BP2/light_mode_value/tokens.js

@@ -1,5 +1,11 @@
 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';
@@ -137,10 +143,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';
@@ -151,15 +161,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';
@@ -172,6 +184,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';
@@ -195,6 +208,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';
@@ -282,6 +296,8 @@ export const bpSurfaceDatePickerSurfaceDisabled = '#ffffff';
 export const bpSurfaceDatePickerSurfaceError = '#ffffff';
 export const bpSurfaceDatePickerSurfaceFocus = '#ffffff';
 export const bpSurfaceDatePickerSurfaceHover = '#ffffff';
+export const bpSurfaceDropdownQuaternarySurfaceHover = 'rgba(255, 255, 255, 0.04)';
+export const bpSurfaceDropdownQuaternarySurfacePressed = 'rgba(255, 255, 255, 0.08)';
 export const bpSurfaceDropdownSecondarySurface = 'rgba(255, 255, 255, 0.7)';
 export const bpSurfaceDropdownSecondarySurfaceHover = 'rgba(0, 0, 0, 0.04)';
 export const bpSurfaceDropdownSecondarySurfacePressed = 'rgba(0, 0, 0, 0.08)';
@@ -341,8 +357,15 @@ 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 bpSurfaceInputChipSurfaceAnnotationHover = 'rgba(0, 97, 213, 0.12)';
+export const bpSurfaceInputChipSurfaceAnnotationPressed = 'rgba(0, 97, 213, 0.16)';
+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 bpSurfaceInputChipSurfaceVariableHover = 'rgba(159, 63, 237, 0.12)';
+export const bpSurfaceInputChipSurfaceVariablePressed = 'rgba(159, 63, 237, 0.16)';
 export const bpSurfaceItemSmallSurface = '#ffffff';
 export const bpSurfaceItemSmallSurfaceHover = '#f4f4f4';
 export const bpSurfaceItemSmallSurfaceSelected = '#f2f7fd';
@@ -487,9 +510,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';
@@ -499,6 +525,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';
@@ -511,6 +538,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';
@@ -997,6 +1025,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)';
@@ -1064,6 +1105,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/BP2/light_mode_value/tokens.json

@@ -1,6 +1,12 @@
 {
     "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",
@@ -138,10 +144,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",
@@ -152,15 +162,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",
@@ -173,6 +185,7 @@
     "BpSurfaceBadgeSurfaceCode": "#ed3757",
     "BpSurfaceBadgeSurfaceCollection": "#e8e8e8",
     "BpSurfaceBadgeSurfaceCompleted": "#1e9b67",
+    "BpSurfaceBadgeSurfaceContentOffline": "#20a56e",
     "BpSurfaceBadgeSurfaceDefault": "#6f6f6f",
     "BpSurfaceBadgeSurfaceDocs": "#4083f7",
     "BpSurfaceBadgeSurfaceDrawing": "#009aed",
@@ -196,6 +209,7 @@
     "BpSurfaceBadgeSurfaceOnline": "#1e9b67",
     "BpSurfaceBadgeSurfacePages": "#ff9500",
     "BpSurfaceBadgeSurfacePdf": "#d0021b",
+    "BpSurfaceBadgeSurfacePending": "#d97417",
     "BpSurfaceBadgeSurfacePhotoshop": "#131415",
     "BpSurfaceBadgeSurfacePin": "#e8e8e8",
     "BpSurfaceBadgeSurfacePowerpoint": "#c43e1c",
@@ -283,6 +297,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)",
@@ -342,8 +358,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",
@@ -488,9 +511,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",
@@ -500,6 +526,7 @@
     "BpTextNavTextOnLightHover": "#ffffff",
     "BpTextNavTextOnLightSelected": "#ffffff",
     "BpTextToggleTextText": "#004eaa",
+    "BpTextTextAnnotationOnColor": "#0057c0",
     "BpTextTextBrandOnColor": "#ffffff",
     "BpTextTextDestructiveOnLight": "#d5324e",
     "BpTextTextErrorOnColor": "#821e30",
@@ -512,6 +539,7 @@
     "BpTextTextOnLightSecondaryHover": "#4e4e4e",
     "BpTextTextOnLightTertiary": "#909090",
     "BpTextTextSuccessOnColor": "#0f4e34",
+    "BpTextTextVariableOnColor": "#8f39d5",
     "BpTextTextWarningOnColor": "#62480b",
     "BpBoxBlue10": "#e5effa",
     "BpBoxBlue20": "#ccdff7",
@@ -998,6 +1026,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)",
@@ -1065,7 +1106,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"
 }