@box/blueprint-web-assets 4.16.0 → 4.20.0

package/illustrations/Small/NoActiveSignRequests.d.ts

@@ -1,3 +1,3 @@
 import { SVGProps } from 'react';
-declare const SvgNoActiveSignRequests: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const SvgNoActiveSignRequests: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgNoActiveSignRequests;

package/illustrations/Small/NoSignRequests.d.ts

@@ -1,3 +1,3 @@
 import { SVGProps } from 'react';
-declare const SvgNoSignRequests: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const SvgNoSignRequests: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgNoSignRequests;

package/illustrations/Small/NoSignTemplates.d.ts

@@ -1,3 +1,3 @@
 import { SVGProps } from 'react';
-declare const SvgNoSignTemplates: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const SvgNoSignTemplates: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgNoSignTemplates;

package/illustrations/Small/Playbook.d.ts

@@ -1,3 +1,3 @@
 import { SVGProps } from 'react';
-declare const SvgPlaybook: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const SvgPlaybook: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgPlaybook;

package/illustrations/Small/ProjectFolder.d.ts

@@ -1,3 +1,3 @@
 import { SVGProps } from 'react';
-declare const SvgProjectFolder: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const SvgProjectFolder: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgProjectFolder;

package/illustrations/Small/SalesContract.d.ts

@@ -1,3 +1,3 @@
 import { SVGProps } from 'react';
-declare const SvgSalesContract: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const SvgSalesContract: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgSalesContract;

package/illustrations/Small/SecurityShield.d.ts

@@ -1,3 +1,3 @@
 import { SVGProps } from 'react';
-declare const SvgSecurityShield: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const SvgSecurityShield: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgSecurityShield;

package/illustrations/Small/TaskList.d.ts

@@ -1,3 +1,3 @@
 import { SVGProps } from 'react';
-declare const SvgTaskList: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const SvgTaskList: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgTaskList;

package/illustrations/Small/UserOrbit.d.ts

@@ -1,3 +1,3 @@
 import { SVGProps } from 'react';
-declare const SvgUserOrbit: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const SvgUserOrbit: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgUserOrbit;

package/illustrations/Small/VerticalBarChart.d.ts

@@ -1,3 +1,3 @@
 import { SVGProps } from 'react';
-declare const SvgVerticalBarChart: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const SvgVerticalBarChart: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default SvgVerticalBarChart;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web-assets",
-    "version": "4.16.0",
+    "version": "4.20.0",
     "license": "SEE LICENSE IN LICENSE",
     "scripts": {
         "build-local-all": "yarn nx clone-repo && yarn build-local && yarn lint-local && yarn lint-local-css",
@@ -34,8 +34,8 @@
         "registry": "https://registry.npmjs.org"
     },
     "peerDependencies": {
-        "react": "^17.0.0",
-        "react-dom": "^17.0.0"
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
     },
     "exports": {
         "./tokens/tokens.scss": {
@@ -98,7 +98,12 @@
         }
     },
     "devDependencies": {
-        "chalk": "4.1.2"
+        "@box/storybook-utils": "^0.5.0",
+        "@types/react": "^18.0.0",
+        "@types/react-dom": "^18.0.0",
+        "chalk": "4.1.2",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
     },
-    "gitHead": "271a24e2d467992f797b10ed6699116197b765de"
+    "gitHead": "4f81a71cfb50fff054646dfa12c6a4dd9739cb24"
 }

package/tokens/px-tokens.d.ts

@@ -1,12 +1,13 @@
 /**
  * Do not edit directly
- * Generated on Mon, 01 Jul 2024 14:41:57 GMT
+ * Generated on Wed, 28 Aug 2024 22:46:04 GMT
  */
 
 export const BackgroundBackground: string;
 export const SurfaceSurface: string;
 export const SurfaceSurfaceHover: string;
 export const SurfaceSurfaceSecondary: string;
+export const SurfaceSurfaceTertiary: string;
 export const SurfaceSurfaceSecondaryHover: string;
 export const SurfaceSurfaceSecondaryFocus: string;
 export const SurfaceCardSurface: string;
@@ -178,6 +179,7 @@ export const SurfaceBadgeTaskapprovalSurface: string;
 export const SurfaceBadgeAnnotationSurface: string;
 export const SurfaceBadgeCompletedSurface: string;
 export const SurfaceBadgeRejectedSurface: string;
+export const SurfaceBadgeErrorSurface: string;
 export const SurfaceBadgeExternalSurface: string;
 export const SurfaceBadgeAdminSurface: string;
 export const SurfaceBadgeCoadminSurface: string;
@@ -221,6 +223,8 @@ export const SurfaceCtaSurfacePromoFocusPressed: string;
 export const SurfaceContentbuttonSurfaceSurfaceSelected: string;
 export const SurfaceContentswitcherSurface: string;
 export const SurfaceToolbarSurface: string;
+export const SurfaceToggleSurfaceOffPressed: string;
+export const SurfaceToggleSurfaceOnPressed: string;
 export const BorderCtaBorderSecondary: string;
 export const BorderCtaBorderSecondaryPressed: string;
 export const BorderCtaBorderSecondaryHover: string;
@@ -288,11 +292,13 @@ export const BorderToggleBorder: string;
 export const BorderCardBorderAi: string;
 export const BorderCtaBorderAi: string;
 export const BorderContentbuttonBorderSelected: string;
+export const BorderToggleBorderOn: string;
 export const IconIconOnLight: string;
 export const IconIconOnLightSecondary: string;
 export const IconIconOnLightTertiary: string;
 export const IconIconOnDark: string;
 export const IconIconErrorOnLight: string;
+export const IconIconRequiredOnLight: string;
 export const IconNavIconOnDark: string;
 export const IconNavIconOnDarkHover: string;
 export const IconNavIconOnDarkSelected: string;
@@ -357,6 +363,12 @@ export const BoxBlue40: string;
 export const BoxBlue50: string;
 export const BoxBlue80: string;
 export const BoxBlue100: string;
+export const BoxBlue110: string;
+export const BoxBlue120: string;
+export const BoxBlue150: string;
+export const BoxBlue160: string;
+export const BoxBlue170: string;
+export const BoxBlue180: string;
 export const BoxBlue05: string;
 export const BoxBlue02: string;
 export const DarkBlue10: string;

package/tokens/px-tokens.js

@@ -1,12 +1,13 @@
 /**
  * Do not edit directly
- * Generated on Mon, 01 Jul 2024 14:41:57 GMT
+ * Generated on Wed, 28 Aug 2024 22:46:04 GMT
  */
 
 export const BackgroundBackground = '#ffffff';
 export const SurfaceSurface = '#ffffff';
 export const SurfaceSurfaceHover = '#f4f4f4';
 export const SurfaceSurfaceSecondary = '#fbfbfb';
+export const SurfaceSurfaceTertiary = '#e8e8e8';
 export const SurfaceSurfaceSecondaryHover = '#f4f4f4';
 export const SurfaceSurfaceSecondaryFocus = '#fbfbfb';
 export const SurfaceCardSurface = '#ffffff';
@@ -42,9 +43,9 @@ export const SurfaceInputSurfaceFocus = '#ffffff';
 export const SurfaceInputSurfaceError = '#ffffff';
 export const SurfaceInputSurfaceErrorHover = '#ffffff';
 export const SurfaceInputSurfaceErrorFocus = '#ffffff';
-export const SurfaceToggleSurfaceOffHover = '#fbfbfb';
-export const SurfaceToggleSurfaceOn = '#0061d5';
-export const SurfaceToggleSurfaceOnHover = '#3381dd';
+export const SurfaceToggleSurfaceOffHover = '#f4f4f4';
+export const SurfaceToggleSurfaceOn = '#e5effa';
+export const SurfaceToggleSurfaceOnHover = '#ccdff7';
 export const SurfaceMessageSurfaceWarning = '#fdf0d1';
 export const SurfaceMessageSurfaceWarningSecondary = '#fef7e8';
 export const SurfaceMessageSurfaceError = '#fbd7dd';
@@ -178,6 +179,7 @@ export const SurfaceBadgeTaskapprovalSurface = '#1d6bca';
 export const SurfaceBadgeAnnotationSurface = '#f5b31b';
 export const SurfaceBadgeCompletedSurface = '#26c281';
 export const SurfaceBadgeRejectedSurface = '#D5324E';
+export const SurfaceBadgeErrorSurface = '#D5324E';
 export const SurfaceBadgeExternalSurface = '#909090';
 export const SurfaceBadgeAdminSurface = '#003c84';
 export const SurfaceBadgeCoadminSurface = '#9f3fed';
@@ -186,7 +188,7 @@ export const SurfaceBadgePinSurface = '#e8e8e8';
 export const SurfaceBadgeCollectionSurface = '#e8e8e8';
 export const SurfaceBadgeOfflineSurface = '#26c281';
 export const SurfaceBadgeProgressSurface = '#f5b31b';
-export const SurfaceBadgeNotificationSurface = '#ed3757';
+export const SurfaceBadgeNotificationSurface = '#D5324E';
 export const SurfaceBadgePdfSurface = '#D0021B';
 export const SurfaceBadgeDocsSurface = '#4083F7';
 export const SurfaceBadgeSheetsSurface = '#21A464';
@@ -221,6 +223,8 @@ export const SurfaceCtaSurfacePromoFocusPressed = '#3a1e9b';
 export const SurfaceContentbuttonSurfaceSurfaceSelected = '#ffffff';
 export const SurfaceContentswitcherSurface = '#e8e8e8';
 export const SurfaceToolbarSurface = '#222222';
+export const SurfaceToggleSurfaceOffPressed = '#e8e8e8';
+export const SurfaceToggleSurfaceOnPressed = '#b2cff2';
 export const BorderCtaBorderSecondary = '#bcbcbc';
 export const BorderCtaBorderSecondaryPressed = '#bcbcbc';
 export const BorderCtaBorderSecondaryHover = '#bcbcbc';
@@ -288,11 +292,13 @@ 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 BorderToggleBorderOn = '#99c0ee';
 export const IconIconOnLight = '#222222';
 export const IconIconOnLightSecondary = '#6F6F6F';
 export const IconIconOnLightTertiary = '#909090';
 export const IconIconOnDark = '#ffffff';
 export const IconIconErrorOnLight = '#D5324E';
+export const IconIconRequiredOnLight = '#D5324E';
 export const IconNavIconOnDark = '#ffffff';
 export const IconNavIconOnDarkHover = '#ffffff';
 export const IconNavIconOnDarkSelected = '#ffffff';
@@ -357,6 +363,12 @@ export const BoxBlue40 = '#99c0ee';
 export const BoxBlue50 = '#7fb0ea';
 export const BoxBlue80 = '#3381dd';
 export const BoxBlue100 = '#0061d5';
+export const BoxBlue110 = '#0057C0';
+export const BoxBlue120 = '#004EAA';
+export const BoxBlue150 = '#00316B';
+export const BoxBlue160 = '#002755';
+export const BoxBlue170 = '#001D40';
+export const BoxBlue180 = '#00132B';
 export const BoxBlue05 = '#f2f7fd';
 export const BoxBlue02 = '#fafcfe';
 export const DarkBlue10 = '#e5ebf2';

package/tokens/tokens-css-vars.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 01 Jul 2024 14:41:57 GMT
+ * Generated on Wed, 28 Aug 2024 22:46:04 GMT
  */
 
 :root {
@@ -297,6 +297,12 @@
     --dark-blue-10: #e5ebf2;
     --box-blue-02: #fafcfe;
     --box-blue-05: #f2f7fd;
+    --box-blue-180: #00132b;
+    --box-blue-170: #001d40;
+    --box-blue-160: #002755;
+    --box-blue-150: #00316b;
+    --box-blue-120: #004eaa;
+    --box-blue-110: #0057c0;
     --box-blue-100: #0061d5;
     --box-blue-80: #3381dd;
     --box-blue-50: #7fb0ea;
@@ -410,11 +416,13 @@
     --icon-nav-icon-on-dark-selected: var(--gray-white);
     --icon-nav-icon-on-dark-hover: var(--gray-white);
     --icon-nav-icon-on-dark: var(--gray-white);
+    --icon-icon-required-on-light: var(--watermelon-red-110);
     --icon-icon-error-on-light: var(--watermelon-red-110);
     --icon-icon-on-dark: var(--gray-white);
     --icon-icon-on-light-tertiary: var(--gray-50);
     --icon-icon-on-light-secondary: var(--gray-65);
     --icon-icon-on-light: var(--gray-100);
+    --border-toggle-border-on: var(--box-blue-40);
     --border-contentbutton-border-selected: var(--gray-50);
     --border-toggle-border: var(--gray-30);
     --border-badge-border: var(--gray-white);
@@ -480,6 +488,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-toggle-surface-on-pressed: var(--box-blue-30);
+    --surface-toggle-surface-off-pressed: var(--gray-10);
     --surface-toolbar-surface: var(--gray-100);
     --surface-contentswitcher-surface: var(--gray-10);
     --surface-contentbutton-surface-surface-selected: var(--gray-white);
@@ -508,7 +518,7 @@
     --surface-page-surface: var(--gray-white);
     --surface-chip-button-surface-hover: var(--black-opacity-08);
     --surface-chip-button-surface: var(--black-opacity-04);
-    --surface-badge-notification-surface: var(--watermelon-red-100);
+    --surface-badge-notification-surface: var(--watermelon-red-110);
     --surface-badge-progress-surface: var(--yellorange-100);
     --surface-badge-offline-surface: var(--green-light-100);
     --surface-badge-collection-surface: var(--gray-10);
@@ -517,6 +527,7 @@
     --surface-badge-coadmin-surface: var(--purple-rain-100);
     --surface-badge-admin-surface: var(--dark-blue-100);
     --surface-badge-external-surface: var(--gray-50);
+    --surface-badge-error-surface: var(--watermelon-red-110);
     --surface-badge-rejected-surface: var(--watermelon-red-110);
     --surface-badge-completed-surface: var(--green-light-100);
     --surface-badge-annotation-surface: var(--yellorange-100);
@@ -650,9 +661,9 @@
     --surface-message-surface-error: var(--watermelon-red-20);
     --surface-message-surface-warning-secondary: var(--yellorange-10);
     --surface-message-surface-warning: var(--yellorange-20);
-    --surface-toggle-surface-on-hover: var(--box-blue-80);
-    --surface-toggle-surface-on: var(--box-blue-100);
-    --surface-toggle-surface-off-hover: var(--gray-02);
+    --surface-toggle-surface-on-hover: var(--box-blue-20);
+    --surface-toggle-surface-on: var(--box-blue-10);
+    --surface-toggle-surface-off-hover: var(--gray-05);
     --surface-input-surface-error-focus: var(--gray-white);
     --surface-input-surface-error-hover: var(--gray-white);
     --surface-input-surface-error: var(--gray-white);
@@ -683,6 +694,7 @@
     --surface-card-surface: var(--gray-white);
     --surface-surface-secondary-focus: var(--gray-02);
     --surface-surface-secondary-hover: var(--gray-05);
+    --surface-surface-tertiary: var(--gray-10);
     --surface-surface-secondary: var(--gray-02);
     --surface-surface-hover: var(--gray-05);
     --surface-surface: var(--gray-white);

package/tokens/tokens.d.ts

@@ -2,6 +2,7 @@ export const BackgroundBackground: string;
 export const SurfaceSurface: string;
 export const SurfaceSurfaceHover: string;
 export const SurfaceSurfaceSecondary: string;
+export const SurfaceSurfaceTertiary: string;
 export const SurfaceSurfaceSecondaryHover: string;
 export const SurfaceSurfaceSecondaryFocus: string;
 export const SurfaceCardSurface: string;
@@ -173,6 +174,7 @@ export const SurfaceBadgeTaskapprovalSurface: string;
 export const SurfaceBadgeAnnotationSurface: string;
 export const SurfaceBadgeCompletedSurface: string;
 export const SurfaceBadgeRejectedSurface: string;
+export const SurfaceBadgeErrorSurface: string;
 export const SurfaceBadgeExternalSurface: string;
 export const SurfaceBadgeAdminSurface: string;
 export const SurfaceBadgeCoadminSurface: string;
@@ -216,6 +218,8 @@ export const SurfaceCtaSurfacePromoFocusPressed: string;
 export const SurfaceContentbuttonSurfaceSurfaceSelected: string;
 export const SurfaceContentswitcherSurface: string;
 export const SurfaceToolbarSurface: string;
+export const SurfaceToggleSurfaceOffPressed: string;
+export const SurfaceToggleSurfaceOnPressed: string;
 export const BorderCtaBorderSecondary: string;
 export const BorderCtaBorderSecondaryPressed: string;
 export const BorderCtaBorderSecondaryHover: string;
@@ -283,11 +287,13 @@ export const BorderToggleBorder: string;
 export const BorderCardBorderAi: string;
 export const BorderCtaBorderAi: string;
 export const BorderContentbuttonBorderSelected: string;
+export const BorderToggleBorderOn: string;
 export const IconIconOnLight: string;
 export const IconIconOnLightSecondary: string;
 export const IconIconOnLightTertiary: string;
 export const IconIconOnDark: string;
 export const IconIconErrorOnLight: string;
+export const IconIconRequiredOnLight: string;
 export const IconNavIconOnDark: string;
 export const IconNavIconOnDarkHover: string;
 export const IconNavIconOnDarkSelected: string;
@@ -352,6 +358,12 @@ export const BoxBlue40: string;
 export const BoxBlue50: string;
 export const BoxBlue80: string;
 export const BoxBlue100: string;
+export const BoxBlue110: string;
+export const BoxBlue120: string;
+export const BoxBlue150: string;
+export const BoxBlue160: string;
+export const BoxBlue170: string;
+export const BoxBlue180: string;
 export const BoxBlue05: string;
 export const BoxBlue02: string;
 export const DarkBlue10: string;

package/tokens/tokens.js

@@ -2,6 +2,7 @@ export const BackgroundBackground = '#ffffff';
 export const SurfaceSurface = '#ffffff';
 export const SurfaceSurfaceHover = '#f4f4f4';
 export const SurfaceSurfaceSecondary = '#fbfbfb';
+export const SurfaceSurfaceTertiary = '#e8e8e8';
 export const SurfaceSurfaceSecondaryHover = '#f4f4f4';
 export const SurfaceSurfaceSecondaryFocus = '#fbfbfb';
 export const SurfaceCardSurface = '#ffffff';
@@ -37,9 +38,9 @@ export const SurfaceInputSurfaceFocus = '#ffffff';
 export const SurfaceInputSurfaceError = '#ffffff';
 export const SurfaceInputSurfaceErrorHover = '#ffffff';
 export const SurfaceInputSurfaceErrorFocus = '#ffffff';
-export const SurfaceToggleSurfaceOffHover = '#fbfbfb';
-export const SurfaceToggleSurfaceOn = '#0061d5';
-export const SurfaceToggleSurfaceOnHover = '#3381dd';
+export const SurfaceToggleSurfaceOffHover = '#f4f4f4';
+export const SurfaceToggleSurfaceOn = '#e5effa';
+export const SurfaceToggleSurfaceOnHover = '#ccdff7';
 export const SurfaceMessageSurfaceWarning = '#fdf0d1';
 export const SurfaceMessageSurfaceWarningSecondary = '#fef7e8';
 export const SurfaceMessageSurfaceError = '#fbd7dd';
@@ -173,6 +174,7 @@ export const SurfaceBadgeTaskapprovalSurface = '#1d6bca';
 export const SurfaceBadgeAnnotationSurface = '#f5b31b';
 export const SurfaceBadgeCompletedSurface = '#26c281';
 export const SurfaceBadgeRejectedSurface = '#D5324E';
+export const SurfaceBadgeErrorSurface = '#D5324E';
 export const SurfaceBadgeExternalSurface = '#909090';
 export const SurfaceBadgeAdminSurface = '#003c84';
 export const SurfaceBadgeCoadminSurface = '#9f3fed';
@@ -181,7 +183,7 @@ export const SurfaceBadgePinSurface = '#e8e8e8';
 export const SurfaceBadgeCollectionSurface = '#e8e8e8';
 export const SurfaceBadgeOfflineSurface = '#26c281';
 export const SurfaceBadgeProgressSurface = '#f5b31b';
-export const SurfaceBadgeNotificationSurface = '#ed3757';
+export const SurfaceBadgeNotificationSurface = '#D5324E';
 export const SurfaceBadgePdfSurface = '#D0021B';
 export const SurfaceBadgeDocsSurface = '#4083F7';
 export const SurfaceBadgeSheetsSurface = '#21A464';
@@ -216,6 +218,8 @@ export const SurfaceCtaSurfacePromoFocusPressed = '#3a1e9b';
 export const SurfaceContentbuttonSurfaceSurfaceSelected = '#ffffff';
 export const SurfaceContentswitcherSurface = '#e8e8e8';
 export const SurfaceToolbarSurface = '#222222';
+export const SurfaceToggleSurfaceOffPressed = '#e8e8e8';
+export const SurfaceToggleSurfaceOnPressed = '#b2cff2';
 export const BorderCtaBorderSecondary = '#bcbcbc';
 export const BorderCtaBorderSecondaryPressed = '#bcbcbc';
 export const BorderCtaBorderSecondaryHover = '#bcbcbc';
@@ -283,11 +287,13 @@ 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 BorderToggleBorderOn = '#99c0ee';
 export const IconIconOnLight = '#222222';
 export const IconIconOnLightSecondary = '#6F6F6F';
 export const IconIconOnLightTertiary = '#909090';
 export const IconIconOnDark = '#ffffff';
 export const IconIconErrorOnLight = '#D5324E';
+export const IconIconRequiredOnLight = '#D5324E';
 export const IconNavIconOnDark = '#ffffff';
 export const IconNavIconOnDarkHover = '#ffffff';
 export const IconNavIconOnDarkSelected = '#ffffff';
@@ -352,6 +358,12 @@ export const BoxBlue40 = '#99c0ee';
 export const BoxBlue50 = '#7fb0ea';
 export const BoxBlue80 = '#3381dd';
 export const BoxBlue100 = '#0061d5';
+export const BoxBlue110 = '#0057C0';
+export const BoxBlue120 = '#004EAA';
+export const BoxBlue150 = '#00316B';
+export const BoxBlue160 = '#002755';
+export const BoxBlue170 = '#001D40';
+export const BoxBlue180 = '#00132B';
 export const BoxBlue05 = '#f2f7fd';
 export const BoxBlue02 = '#fafcfe';
 export const DarkBlue10 = '#e5ebf2';

package/tokens/tokens.json

@@ -3,6 +3,7 @@
     "SurfaceSurface": "#ffffff",
     "SurfaceSurfaceHover": "#f4f4f4",
     "SurfaceSurfaceSecondary": "#fbfbfb",
+    "SurfaceSurfaceTertiary": "#e8e8e8",
     "SurfaceSurfaceSecondaryHover": "#f4f4f4",
     "SurfaceSurfaceSecondaryFocus": "#fbfbfb",
     "SurfaceCardSurface": "#ffffff",
@@ -38,9 +39,9 @@
     "SurfaceInputSurfaceError": "#ffffff",
     "SurfaceInputSurfaceErrorHover": "#ffffff",
     "SurfaceInputSurfaceErrorFocus": "#ffffff",
-    "SurfaceToggleSurfaceOffHover": "#fbfbfb",
-    "SurfaceToggleSurfaceOn": "#0061d5",
-    "SurfaceToggleSurfaceOnHover": "#3381dd",
+    "SurfaceToggleSurfaceOffHover": "#f4f4f4",
+    "SurfaceToggleSurfaceOn": "#e5effa",
+    "SurfaceToggleSurfaceOnHover": "#ccdff7",
     "SurfaceMessageSurfaceWarning": "#fdf0d1",
     "SurfaceMessageSurfaceWarningSecondary": "#fef7e8",
     "SurfaceMessageSurfaceError": "#fbd7dd",
@@ -174,6 +175,7 @@
     "SurfaceBadgeAnnotationSurface": "#f5b31b",
     "SurfaceBadgeCompletedSurface": "#26c281",
     "SurfaceBadgeRejectedSurface": "#D5324E",
+    "SurfaceBadgeErrorSurface": "#D5324E",
     "SurfaceBadgeExternalSurface": "#909090",
     "SurfaceBadgeAdminSurface": "#003c84",
     "SurfaceBadgeCoadminSurface": "#9f3fed",
@@ -182,7 +184,7 @@
     "SurfaceBadgeCollectionSurface": "#e8e8e8",
     "SurfaceBadgeOfflineSurface": "#26c281",
     "SurfaceBadgeProgressSurface": "#f5b31b",
-    "SurfaceBadgeNotificationSurface": "#ed3757",
+    "SurfaceBadgeNotificationSurface": "#D5324E",
     "SurfaceBadgePdfSurface": "#D0021B",
     "SurfaceBadgeDocsSurface": "#4083F7",
     "SurfaceBadgeSheetsSurface": "#21A464",
@@ -217,6 +219,8 @@
     "SurfaceContentbuttonSurfaceSurfaceSelected": "#ffffff",
     "SurfaceContentswitcherSurface": "#e8e8e8",
     "SurfaceToolbarSurface": "#222222",
+    "SurfaceToggleSurfaceOffPressed": "#e8e8e8",
+    "SurfaceToggleSurfaceOnPressed": "#b2cff2",
     "BorderCtaBorderSecondary": "#bcbcbc",
     "BorderCtaBorderSecondaryPressed": "#bcbcbc",
     "BorderCtaBorderSecondaryHover": "#bcbcbc",
@@ -284,11 +288,13 @@
     "BorderCardBorderAi": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
     "BorderCtaBorderAi": "linear-gradient(135deg, #FE03DC 0%, #2784FA 100%)",
     "BorderContentbuttonBorderSelected": "#909090",
+    "BorderToggleBorderOn": "#99c0ee",
     "IconIconOnLight": "#222222",
     "IconIconOnLightSecondary": "#6F6F6F",
     "IconIconOnLightTertiary": "#909090",
     "IconIconOnDark": "#ffffff",
     "IconIconErrorOnLight": "#D5324E",
+    "IconIconRequiredOnLight": "#D5324E",
     "IconNavIconOnDark": "#ffffff",
     "IconNavIconOnDarkHover": "#ffffff",
     "IconNavIconOnDarkSelected": "#ffffff",
@@ -353,6 +359,12 @@
     "BoxBlue50": "#7fb0ea",
     "BoxBlue80": "#3381dd",
     "BoxBlue100": "#0061d5",
+    "BoxBlue110": "#0057C0",
+    "BoxBlue120": "#004EAA",
+    "BoxBlue150": "#00316B",
+    "BoxBlue160": "#002755",
+    "BoxBlue170": "#001D40",
+    "BoxBlue180": "#00132B",
     "BoxBlue05": "#f2f7fd",
     "BoxBlue02": "#fafcfe",
     "DarkBlue10": "#e5ebf2",

package/tokens/tokens.scss

@@ -2,6 +2,7 @@ $background-background: #ffffff !default;
 $surface-surface: #ffffff !default;
 $surface-surface-hover: #f4f4f4 !default;
 $surface-surface-secondary: #fbfbfb !default;
+$surface-surface-tertiary: #e8e8e8 !default;
 $surface-surface-secondary-hover: #f4f4f4 !default;
 $surface-surface-secondary-focus: #fbfbfb !default;
 $surface-card-surface: #ffffff !default;
@@ -37,9 +38,9 @@ $surface-input-surface-focus: #ffffff !default;
 $surface-input-surface-error: #ffffff !default;
 $surface-input-surface-error-hover: #ffffff !default;
 $surface-input-surface-error-focus: #ffffff !default;
-$surface-toggle-surface-off-hover: #fbfbfb !default;
-$surface-toggle-surface-on: #0061d5 !default;
-$surface-toggle-surface-on-hover: #3381dd !default;
+$surface-toggle-surface-off-hover: #f4f4f4 !default;
+$surface-toggle-surface-on: #e5effa !default;
+$surface-toggle-surface-on-hover: #ccdff7 !default;
 $surface-message-surface-warning: #fdf0d1 !default;
 $surface-message-surface-warning-secondary: #fef7e8 !default;
 $surface-message-surface-error: #fbd7dd !default;
@@ -173,6 +174,7 @@ $surface-badge-taskapproval-surface: #1d6bca !default;
 $surface-badge-annotation-surface: #f5b31b !default;
 $surface-badge-completed-surface: #26c281 !default;
 $surface-badge-rejected-surface: #d5324e !default;
+$surface-badge-error-surface: #d5324e !default;
 $surface-badge-external-surface: #909090 !default;
 $surface-badge-admin-surface: #003c84 !default;
 $surface-badge-coadmin-surface: #9f3fed !default;
@@ -181,7 +183,7 @@ $surface-badge-pin-surface: #e8e8e8 !default;
 $surface-badge-collection-surface: #e8e8e8 !default;
 $surface-badge-offline-surface: #26c281 !default;
 $surface-badge-progress-surface: #f5b31b !default;
-$surface-badge-notification-surface: #ed3757 !default;
+$surface-badge-notification-surface: #d5324e !default;
 $surface-badge-pdf-surface: #d0021b !default;
 $surface-badge-docs-surface: #4083f7 !default;
 $surface-badge-sheets-surface: #21a464 !default;
@@ -216,6 +218,8 @@ $surface-cta-surface-promo-focus-pressed: #3a1e9b !default;
 $surface-contentbutton-surface-surface-selected: #ffffff !default;
 $surface-contentswitcher-surface: #e8e8e8 !default;
 $surface-toolbar-surface: #222222 !default;
+$surface-toggle-surface-off-pressed: #e8e8e8 !default;
+$surface-toggle-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;
@@ -283,11 +287,13 @@ $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;
+$border-toggle-border-on: #99c0ee !default;
 $icon-icon-on-light: #222222 !default;
 $icon-icon-on-light-secondary: #6f6f6f !default;
 $icon-icon-on-light-tertiary: #909090 !default;
 $icon-icon-on-dark: #ffffff !default;
 $icon-icon-error-on-light: #d5324e !default;
+$icon-icon-required-on-light: #d5324e !default;
 $icon-nav-icon-on-dark: #ffffff !default;
 $icon-nav-icon-on-dark-hover: #ffffff !default;
 $icon-nav-icon-on-dark-selected: #ffffff !default;
@@ -352,6 +358,12 @@ $box-blue-40: #99c0ee !default;
 $box-blue-50: #7fb0ea !default;
 $box-blue-80: #3381dd !default;
 $box-blue-100: #0061d5 !default;
+$box-blue-110: #0057c0 !default;
+$box-blue-120: #004eaa !default;
+$box-blue-150: #00316b !default;
+$box-blue-160: #002755 !default;
+$box-blue-170: #001d40 !default;
+$box-blue-180: #00132b !default;
 $box-blue-05: #f2f7fd !default;
 $box-blue-02: #fafcfe !default;
 $dark-blue-10: #e5ebf2 !default;
@@ -707,6 +719,7 @@ $tokens: (
         'surface': $surface-surface,
         'surface-hover': $surface-surface-hover,
         'surface-secondary': $surface-surface-secondary,
+        'surface-tertiary': $surface-surface-tertiary,
         'surface-secondary-hover': $surface-surface-secondary-hover,
         'surface-secondary-focus': $surface-surface-secondary-focus,
         'card-surface': $surface-card-surface,
@@ -878,6 +891,7 @@ $tokens: (
         'badge-annotation-surface': $surface-badge-annotation-surface,
         'badge-completed-surface': $surface-badge-completed-surface,
         'badge-rejected-surface': $surface-badge-rejected-surface,
+        'badge-error-surface': $surface-badge-error-surface,
         'badge-external-surface': $surface-badge-external-surface,
         'badge-admin-surface': $surface-badge-admin-surface,
         'badge-coadmin-surface': $surface-badge-coadmin-surface,
@@ -921,6 +935,8 @@ $tokens: (
         'contentbutton-surface-surface-selected': $surface-contentbutton-surface-surface-selected,
         'contentswitcher-surface': $surface-contentswitcher-surface,
         'toolbar-surface': $surface-toolbar-surface,
+        'toggle-surface-off-pressed': $surface-toggle-surface-off-pressed,
+        'toggle-surface-on-pressed': $surface-toggle-surface-on-pressed,
     ),
     'Border': (
         'cta-border-secondary': $border-cta-border-secondary,
@@ -990,6 +1006,7 @@ $tokens: (
         'card-border-ai': $border-card-border-ai,
         'cta-border-ai': $border-cta-border-ai,
         'contentbutton-border-selected': $border-contentbutton-border-selected,
+        'toggle-border-on': $border-toggle-border-on,
     ),
     'Icon': (
         'icon-on-light': $icon-icon-on-light,
@@ -997,6 +1014,7 @@ $tokens: (
         'icon-on-light-tertiary': $icon-icon-on-light-tertiary,
         'icon-on-dark': $icon-icon-on-dark,
         'icon-error-on-light': $icon-icon-error-on-light,
+        'icon-required-on-light': $icon-icon-required-on-light,
         'nav-icon-on-dark': $icon-nav-icon-on-dark,
         'nav-icon-on-dark-hover': $icon-nav-icon-on-dark-hover,
         'nav-icon-on-dark-selected': $icon-nav-icon-on-dark-selected,
@@ -1071,6 +1089,12 @@ $tokens: (
         '50': $box-blue-50,
         '80': $box-blue-80,
         '100': $box-blue-100,
+        '110': $box-blue-110,
+        '120': $box-blue-120,
+        '150': $box-blue-150,
+        '160': $box-blue-160,
+        '170': $box-blue-170,
+        '180': $box-blue-180,
         '05': $box-blue-05,
         '02': $box-blue-02,
     ),