@box/blueprint-web-assets 4.16.0 → 4.19.0

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,7 +38,7 @@ export const SurfaceInputSurfaceFocus = '#ffffff';
 export const SurfaceInputSurfaceError = '#ffffff';
 export const SurfaceInputSurfaceErrorHover = '#ffffff';
 export const SurfaceInputSurfaceErrorFocus = '#ffffff';
-export const SurfaceToggleSurfaceOffHover = '#fbfbfb';
+export const SurfaceToggleSurfaceOffHover = '#f4f4f4';
 export const SurfaceToggleSurfaceOn = '#0061d5';
 export const SurfaceToggleSurfaceOnHover = '#3381dd';
 export const SurfaceMessageSurfaceWarning = '#fdf0d1';
@@ -181,7 +182,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 +217,8 @@ export const SurfaceCtaSurfacePromoFocusPressed = '#3a1e9b';
 export const SurfaceContentbuttonSurfaceSurfaceSelected = '#ffffff';
 export const SurfaceContentswitcherSurface = '#e8e8e8';
 export const SurfaceToolbarSurface = '#222222';
+export const SurfaceToggleSurfaceOffPressed = '#e8e8e8';
+export const SurfaceToggleSurfaceOnPressed = '#004EAA';
 export const BorderCtaBorderSecondary = '#bcbcbc';
 export const BorderCtaBorderSecondaryPressed = '#bcbcbc';
 export const BorderCtaBorderSecondaryHover = '#bcbcbc';
@@ -288,6 +291,7 @@ 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 +356,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,7 +39,7 @@
     "SurfaceInputSurfaceError": "#ffffff",
     "SurfaceInputSurfaceErrorHover": "#ffffff",
     "SurfaceInputSurfaceErrorFocus": "#ffffff",
-    "SurfaceToggleSurfaceOffHover": "#fbfbfb",
+    "SurfaceToggleSurfaceOffHover": "#f4f4f4",
     "SurfaceToggleSurfaceOn": "#0061d5",
     "SurfaceToggleSurfaceOnHover": "#3381dd",
     "SurfaceMessageSurfaceWarning": "#fdf0d1",
@@ -182,7 +183,7 @@
     "SurfaceBadgeCollectionSurface": "#e8e8e8",
     "SurfaceBadgeOfflineSurface": "#26c281",
     "SurfaceBadgeProgressSurface": "#f5b31b",
-    "SurfaceBadgeNotificationSurface": "#ed3757",
+    "SurfaceBadgeNotificationSurface": "#D5324E",
     "SurfaceBadgePdfSurface": "#D0021B",
     "SurfaceBadgeDocsSurface": "#4083F7",
     "SurfaceBadgeSheetsSurface": "#21A464",
@@ -217,6 +218,8 @@
     "SurfaceContentbuttonSurfaceSurfaceSelected": "#ffffff",
     "SurfaceContentswitcherSurface": "#e8e8e8",
     "SurfaceToolbarSurface": "#222222",
+    "SurfaceToggleSurfaceOffPressed": "#e8e8e8",
+    "SurfaceToggleSurfaceOnPressed": "#004EAA",
     "BorderCtaBorderSecondary": "#bcbcbc",
     "BorderCtaBorderSecondaryPressed": "#bcbcbc",
     "BorderCtaBorderSecondaryHover": "#bcbcbc",
@@ -289,6 +292,7 @@
     "IconIconOnLightTertiary": "#909090",
     "IconIconOnDark": "#ffffff",
     "IconIconErrorOnLight": "#D5324E",
+    "IconIconRequiredOnLight": "#D5324E",
     "IconNavIconOnDark": "#ffffff",
     "IconNavIconOnDarkHover": "#ffffff",
     "IconNavIconOnDarkSelected": "#ffffff",
@@ -353,6 +357,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,7 +38,7 @@ $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-off-hover: #f4f4f4 !default;
 $surface-toggle-surface-on: #0061d5 !default;
 $surface-toggle-surface-on-hover: #3381dd !default;
 $surface-message-surface-warning: #fdf0d1 !default;
@@ -181,7 +182,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 +217,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: #004eaa !default;
 $border-cta-border-secondary: #bcbcbc !default;
 $border-cta-border-secondary-pressed: #bcbcbc !default;
 $border-cta-border-secondary-hover: #bcbcbc !default;
@@ -288,6 +291,7 @@ $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 +356,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 +717,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,
@@ -921,6 +932,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,
@@ -997,6 +1010,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 +1085,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,
     ),