@box/blueprint-web-assets 4.12.0 → 4.13.0

package/icons/Content/Archive.d.ts

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

package/icons/Content/Archive.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgArchive = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 32 32", role: "img", ...props, children: [_jsx("path", { fill: "#6B4FCC", d: "M3 7.5A1.5 1.5 0 0 1 4.5 6h23A1.5 1.5 0 0 1 29 7.5v2a1.5 1.5 0 0 1-1.5 1.5h-23A1.5 1.5 0 0 1 3 9.5v-2Z" }), _jsx("path", { fill: "#A392E0", d: "M4.5 11h23v13a3 3 0 0 1-3 3h-17a3 3 0 0 1-3-3V11Z" }), _jsx("path", { fill: "white", d: "M12 15a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-1Z" })] }));
+export default SvgArchive;

package/icons/Content/FolderArchive.d.ts

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

package/icons/Content/FolderArchive.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SvgFolderArchive = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 32 32", role: "img", ...props, children: [_jsx("path", { fill: "#6B4FCC", fillRule: "evenodd", d: "M6 6h6c2 0 1.5 2 4 2h10a3 3 0 0 1 3 3v13a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3Z", clipRule: "evenodd" }), _jsx("path", { fill: "white", fillOpacity: 0.6, d: "M14.5 19a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3Z" }), _jsx("path", { fill: "white", fillOpacity: 0.6, fillRule: "evenodd", d: "M26 11H6a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h20a3 3 0 0 0 3-3V14a3 3 0 0 0-3-3Zm-15.5 4.8a.8.8 0 0 1 .8-.8h9.4a.8.8 0 0 1 .8.8v.4a.8.8 0 0 1-.8.8h-9.4a.8.8 0 0 1-.8-.8v-.4ZM21 18H11v5a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-5Z", clipRule: "evenodd" })] }));
+export default SvgFolderArchive;

package/icons/Content/index.d.ts

@@ -1,3 +1,4 @@
+export { default as Archive } from './Archive';
 export { default as FileAudio } from './FileAudio';
 export { default as FileBookmark } from './FileBookmark';
 export { default as FileBoxNote } from './FileBoxNote';
@@ -31,6 +32,7 @@ export { default as FileWord } from './FileWord';
 export { default as FileXbd } from './FileXbd';
 export { default as FileXdw } from './FileXdw';
 export { default as FileZip } from './FileZip';
+export { default as FolderArchive } from './FolderArchive';
 export { default as FolderExternal } from './FolderExternal';
 export { default as FolderPersonal } from './FolderPersonal';
 export { default as FolderShared } from './FolderShared';

package/icons/Content/index.js

@@ -1,3 +1,4 @@
+export { default as Archive } from './Archive';
 export { default as FileAudio } from './FileAudio';
 export { default as FileBookmark } from './FileBookmark';
 export { default as FileBoxNote } from './FileBoxNote';
@@ -31,6 +32,7 @@ export { default as FileWord } from './FileWord';
 export { default as FileXbd } from './FileXbd';
 export { default as FileXdw } from './FileXdw';
 export { default as FileZip } from './FileZip';
+export { default as FolderArchive } from './FolderArchive';
 export { default as FolderExternal } from './FolderExternal';
 export { default as FolderPersonal } from './FolderPersonal';
 export { default as FolderShared } from './FolderShared';

package/icons/Logo/Microsoft365.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SvgMicrosoft365 = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 32 32", role: "img", ...props, children: [_jsx("path", { fill: "url(#Microsoft365_svg__a)", d: "m14.042 5.512-.112.068a4.005 4.005 0 0 0-.504.361l.324-.228h2.75l.5 3.786-2.5 2.5-2.5 1.738v2.004a4 4 0 0 0 1.929 3.422l2.632 1.593L11.001 24H9.927l-2-1.21A4 4 0 0 1 6 19.368V12.63a4 4 0 0 1 1.93-3.423l6-3.63.112-.065Z" }), _jsx("path", { fill: "url(#Microsoft365_svg__b)", d: "m14.042 5.512-.112.068a4.005 4.005 0 0 0-.504.361l.324-.228h2.75l.5 3.786-2.5 2.5-2.5 1.738v2.004a4 4 0 0 0 1.929 3.422l2.632 1.593L11.001 24H9.927l-2-1.21A4 4 0 0 1 6 19.368V12.63a4 4 0 0 1 1.93-3.423l6-3.63.112-.065Z" }), _jsx("path", { fill: "url(#Microsoft365_svg__c)", d: "M20 13.5v2.24a4 4 0 0 1-1.928 3.422l-6 3.632a4 4 0 0 1-4.004.08l5.861 3.548a4 4 0 0 0 4.143 0l6-3.632a4 4 0 0 0 1.929-3.422V17.75l-.5-.75-5.5-3.5Z" }), _jsx("path", { fill: "url(#Microsoft365_svg__d)", d: "M20 13.5v2.24a4 4 0 0 1-1.928 3.422l-6 3.632a4 4 0 0 1-4.004.08l5.861 3.548a4 4 0 0 0 4.143 0l6-3.632a4 4 0 0 0 1.929-3.422V17.75l-.5-.75-5.5-3.5Z" }), _jsx("path", { fill: "url(#Microsoft365_svg__e)", d: "m24.071 9.207-6-3.63a4 4 0 0 0-4.022-.069l-.119.072A4 4 0 0 0 12 9.003v4.742l1.93-1.167a4 4 0 0 1 4.14 0l6.001 3.63a4 4 0 0 1 1.928 3.29l.002-.13V12.63a4 4 0 0 0-1.93-3.423Z" }), _jsx("path", { fill: "url(#Microsoft365_svg__f)", d: "m24.071 9.207-6-3.63a4 4 0 0 0-4.022-.069l-.119.072A4 4 0 0 0 12 9.003v4.742l1.93-1.167a4 4 0 0 1 4.14 0l6.001 3.63a4 4 0 0 1 1.928 3.29l.002-.13V12.63a4 4 0 0 0-1.93-3.423Z" }), _jsxs("defs", { children: [_jsxs("radialGradient", { id: "Microsoft365_svg__a", cx: 0, cy: 0, r: 1, gradientTransform: "rotate(119.775 6.336 10.042) scale(21.42 49.0373)", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: 0.064, stopColor: "#AE7FE2" }), _jsx("stop", { offset: 1, stopColor: "#0078D4" })] }), _jsxs("radialGradient", { id: "Microsoft365_svg__c", cx: 0, cy: 0, r: 1, gradientTransform: "matrix(17.13178 -3.68159 3.46987 16.14657 7.28 19.138)", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: 0.134, stopColor: "#D59DFF" }), _jsx("stop", { offset: 1, stopColor: "#5E438F" })] }), _jsxs("radialGradient", { id: "Microsoft365_svg__e", cx: 0, cy: 0, r: 1, gradientTransform: "matrix(-17.25664 -4.64747 8.24601 -30.61845 23.897 23.59)", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: 0.058, stopColor: "#50E6FF" }), _jsx("stop", { offset: 1, stopColor: "#436DCD" })] }), _jsxs("linearGradient", { id: "Microsoft365_svg__b", x1: 18.284, x2: 16.12, y1: 25.732, y2: 20.014, gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#114A8B" }), _jsx("stop", { offset: 1, stopColor: "#0078D4", stopOpacity: 0 })] }), _jsxs("linearGradient", { id: "Microsoft365_svg__d", x1: 23.969, x2: 19.54, y1: 10.196, y2: 14.542, gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#493474" }), _jsx("stop", { offset: 1, stopColor: "#8C66BA", stopOpacity: 0 })] }), _jsxs("linearGradient", { id: "Microsoft365_svg__f", x1: 12.488, x2: 16.244, y1: 5.527, y2: 5.527, gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#2D3F80" }), _jsx("stop", { offset: 1, stopColor: "#436DCD", stopOpacity: 0 })] })] })] }));
+const SvgMicrosoft365 = (props) => (_jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 32 32", role: "img", ...props, children: [_jsxs("radialGradient", { id: "Microsoft365_svg__a", cx: 0, cy: 0, r: 1, gradientTransform: "matrix(-10.63707 18.59218 -42.5635 -24.3517 18.2 9.53)", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: 0.064, stopColor: "#ae7fe2" }), _jsx("stop", { offset: 1, stopColor: "#0078d4" })] }), _jsxs("radialGradient", { id: "Microsoft365_svg__c", cx: 0, cy: 0, r: 1, gradientTransform: "matrix(17.13178 -3.68159 3.46987 16.14657 7.28 19.138)", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: 0.134, stopColor: "#d59dff" }), _jsx("stop", { offset: 1, stopColor: "#5e438f" })] }), _jsxs("radialGradient", { id: "Microsoft365_svg__e", cx: 0, cy: 0, r: 1, gradientTransform: "matrix(-17.25664 -4.64747 8.24601 -30.61845 23.897 23.59)", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: 0.058, stopColor: "#50e6ff" }), _jsx("stop", { offset: 1, stopColor: "#436dcd" })] }), _jsxs("linearGradient", { id: "Microsoft365_svg__b", x1: 18.284, x2: 16.12, y1: 25.732, y2: 20.014, gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: 0, stopColor: "#114a8b" }), _jsx("stop", { offset: 1, stopColor: "#0078d4", stopOpacity: 0 })] }), _jsxs("linearGradient", { id: "Microsoft365_svg__d", x1: 23.969, x2: 19.54, y1: 10.196, y2: 14.542, gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: 0, stopColor: "#493474" }), _jsx("stop", { offset: 1, stopColor: "#8c66ba", stopOpacity: 0 })] }), _jsxs("linearGradient", { id: "Microsoft365_svg__f", x1: 12.488, x2: 16.244, y1: 5.527, y2: 5.527, gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: 0, stopColor: "#2d3f80" }), _jsx("stop", { offset: 1, stopColor: "#436dcd", stopOpacity: 0 })] }), _jsx("path", { fill: "url(#Microsoft365_svg__a)", d: "m14.042 5.512-.112.068a4.005 4.005 0 0 0-.504.361l.324-.228h2.75l.5 3.786-2.5 2.5-2.5 1.738v2.004a4 4 0 0 0 1.929 3.422l2.632 1.593L11.001 24H9.927l-2-1.21A4 4 0 0 1 6 19.368V12.63a4 4 0 0 1 1.93-3.423l6-3.63.112-.065z" }), _jsx("path", { fill: "url(#Microsoft365_svg__b)", d: "m14.042 5.512-.112.068a4.005 4.005 0 0 0-.504.361l.324-.228h2.75l.5 3.786-2.5 2.5-2.5 1.738v2.004a4 4 0 0 0 1.929 3.422l2.632 1.593L11.001 24H9.927l-2-1.21A4 4 0 0 1 6 19.368V12.63a4 4 0 0 1 1.93-3.423l6-3.63.112-.065z" }), _jsx("path", { fill: "url(#Microsoft365_svg__c)", d: "M20 13.5v2.24a4 4 0 0 1-1.928 3.422l-6 3.632a4 4 0 0 1-4.004.08l5.861 3.548a4 4 0 0 0 4.143 0l6-3.632a4 4 0 0 0 1.929-3.422V17.75l-.5-.75z" }), _jsx("path", { fill: "url(#Microsoft365_svg__d)", d: "M20 13.5v2.24a4 4 0 0 1-1.928 3.422l-6 3.632a4 4 0 0 1-4.004.08l5.861 3.548a4 4 0 0 0 4.143 0l6-3.632a4 4 0 0 0 1.929-3.422V17.75l-.5-.75z" }), _jsx("path", { fill: "url(#Microsoft365_svg__e)", d: "m24.071 9.207-6-3.63a4 4 0 0 0-4.022-.069l-.119.072A4 4 0 0 0 12 9.003v4.742l1.93-1.167a4 4 0 0 1 4.14 0l6.001 3.63a4 4 0 0 1 1.928 3.29l.002-.13V12.63a4 4 0 0 0-1.93-3.423z" }), _jsx("path", { fill: "url(#Microsoft365_svg__f)", d: "m24.071 9.207-6-3.63a4 4 0 0 0-4.022-.069l-.119.072A4 4 0 0 0 12 9.003v4.742l1.93-1.167a4 4 0 0 1 4.14 0l6.001 3.63a4 4 0 0 1 1.928 3.29l.002-.13V12.63a4 4 0 0 0-1.93-3.423z" })] }));
 export default SvgMicrosoft365;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web-assets",
-    "version": "4.12.0",
+    "version": "4.13.0",
     "license": "SEE LICENSE IN LICENSE",
     "scripts": {
         "build-local-all": "yarn nx clone-repo && yarn build-local && yarn lint-local && yarn lint-local-css",
@@ -100,5 +100,5 @@
     "devDependencies": {
         "chalk": "4.1.2"
     },
-    "gitHead": "d49b33cb093048a4b79735034f8e18aa4f6ee49f"
+    "gitHead": "c6d3c5d48fc230d53b1a2a4c260b528580c2ccd8"
 }

package/tokens/px-tokens.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 May 2024 12:42:47 GMT
+ * Generated on Tue, 04 Jun 2024 16:04:44 GMT
  */
 
 export const BackgroundBackground: string;
@@ -15,6 +15,7 @@ export const SurfaceCardSurfaceFocus: string;
 export const SurfaceCardSurfacePressed: string;
 export const SurfaceMenuSurface: string;
 export const SurfaceMenuSurfaceHover: string;
+export const SurfaceMenuSurfacePressed: string;
 export const SurfaceMenuSurfaceFocus: string;
 export const SurfaceSurfaceBrand: string;
 export const SurfaceSurfaceBrandHover: string;
@@ -219,6 +220,7 @@ export const SurfaceCtaSurfacePromoFocus: string;
 export const SurfaceCtaSurfacePromoFocusPressed: string;
 export const SurfaceContentbuttonSurfaceSurfaceSelected: string;
 export const SurfaceContentswitcherSurface: string;
+export const SurfaceToolbarSurface: string;
 export const BorderCtaBorderSecondary: string;
 export const BorderCtaBorderSecondaryPressed: string;
 export const BorderCtaBorderSecondaryHover: string;

package/tokens/px-tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 May 2024 12:42:47 GMT
+ * Generated on Tue, 04 Jun 2024 16:04:44 GMT
  */
 
 export const BackgroundBackground = '#ffffff';
@@ -15,6 +15,7 @@ export const SurfaceCardSurfaceFocus = '#f2f7fd';
 export const SurfaceCardSurfacePressed = '#fbfbfb';
 export const SurfaceMenuSurface = '#ffffff';
 export const SurfaceMenuSurfaceHover = '#f4f4f4';
+export const SurfaceMenuSurfacePressed = '#f4f4f4';
 export const SurfaceMenuSurfaceFocus = '#f4f4f4';
 export const SurfaceSurfaceBrand = '#0061D5';
 export const SurfaceSurfaceBrandHover = '#006AE9';
@@ -219,6 +220,7 @@ export const SurfaceCtaSurfacePromoFocus = '#4826c2';
 export const SurfaceCtaSurfacePromoFocusPressed = '#3a1e9b';
 export const SurfaceContentbuttonSurfaceSurfaceSelected = '#ffffff';
 export const SurfaceContentswitcherSurface = '#e8e8e8';
+export const SurfaceToolbarSurface = '#222222';
 export const BorderCtaBorderSecondary = '#bcbcbc';
 export const BorderCtaBorderSecondaryPressed = '#bcbcbc';
 export const BorderCtaBorderSecondaryHover = '#bcbcbc';
@@ -725,7 +727,7 @@ export const MotionTransitionSlideIn = '400ms cubic-bezier(0.16, 1, 0.3, 1)';
 export const BreakpointSmall = '374px';
 export const BreakpointMedium = '767px';
 export const BreakpointLarge = '1023px';
-export const BreakpointXlarge = '1024px';
+export const BreakpointXlarge = '1219px';
 export const NotificationDefaultFontFamily =
     "Lato, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif";
 export const NotificationDefaultFontWeight = 700;

package/tokens/tokens-css-vars.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 24 May 2024 12:42:47 GMT
+ * Generated on Tue, 04 Jun 2024 16:04:44 GMT
  */
 
 :root {
@@ -11,7 +11,7 @@
     --notification-default-letter-spacing: 0.01875rem;
     --notification-default-font-size: 0.5625rem;
     --notification-default-line-height: 0.75rem;
-    --breakpoint-xlarge: 1024px;
+    --breakpoint-xlarge: 1219px;
     --breakpoint-large: 1023px;
     --breakpoint-medium: 767px;
     --breakpoint-small: 374px;
@@ -480,6 +480,7 @@
     --border-cta-border-secondary-hover: var(--gray-30);
     --border-cta-border-secondary-pressed: var(--gray-30);
     --border-cta-border-secondary: var(--gray-30);
+    --surface-toolbar-surface: var(--gray-100);
     --surface-contentswitcher-surface: var(--gray-10);
     --surface-contentbutton-surface-surface-selected: var(--gray-white);
     --surface-cta-surface-promo-focus-pressed: var(--grimace-120);
@@ -673,6 +674,7 @@
     --surface-cta-surface-secondary: var(--gray-white);
     --surface-surface-brand-secondary: var(--box-blue-10);
     --surface-menu-surface-focus: var(--gray-05);
+    --surface-menu-surface-pressed: var(--gray-05);
     --surface-menu-surface-hover: var(--gray-05);
     --surface-menu-surface: var(--gray-white);
     --surface-card-surface-pressed: var(--gray-02);

package/tokens/tokens.d.ts

@@ -10,6 +10,7 @@ export const SurfaceCardSurfaceFocus: string;
 export const SurfaceCardSurfacePressed: string;
 export const SurfaceMenuSurface: string;
 export const SurfaceMenuSurfaceHover: string;
+export const SurfaceMenuSurfacePressed: string;
 export const SurfaceMenuSurfaceFocus: string;
 export const SurfaceSurfaceBrand: string;
 export const SurfaceSurfaceBrandHover: string;
@@ -214,6 +215,7 @@ export const SurfaceCtaSurfacePromoFocus: string;
 export const SurfaceCtaSurfacePromoFocusPressed: string;
 export const SurfaceContentbuttonSurfaceSurfaceSelected: string;
 export const SurfaceContentswitcherSurface: string;
+export const SurfaceToolbarSurface: string;
 export const BorderCtaBorderSecondary: string;
 export const BorderCtaBorderSecondaryPressed: string;
 export const BorderCtaBorderSecondaryHover: string;

package/tokens/tokens.js

@@ -10,6 +10,7 @@ export const SurfaceCardSurfaceFocus = '#f2f7fd';
 export const SurfaceCardSurfacePressed = '#fbfbfb';
 export const SurfaceMenuSurface = '#ffffff';
 export const SurfaceMenuSurfaceHover = '#f4f4f4';
+export const SurfaceMenuSurfacePressed = '#f4f4f4';
 export const SurfaceMenuSurfaceFocus = '#f4f4f4';
 export const SurfaceSurfaceBrand = '#0061D5';
 export const SurfaceSurfaceBrandHover = '#006AE9';
@@ -214,6 +215,7 @@ export const SurfaceCtaSurfacePromoFocus = '#4826c2';
 export const SurfaceCtaSurfacePromoFocusPressed = '#3a1e9b';
 export const SurfaceContentbuttonSurfaceSurfaceSelected = '#ffffff';
 export const SurfaceContentswitcherSurface = '#e8e8e8';
+export const SurfaceToolbarSurface = '#222222';
 export const BorderCtaBorderSecondary = '#bcbcbc';
 export const BorderCtaBorderSecondaryPressed = '#bcbcbc';
 export const BorderCtaBorderSecondaryHover = '#bcbcbc';
@@ -720,7 +722,7 @@ export const MotionTransitionSlideIn = '400ms cubic-bezier(0.16, 1, 0.3, 1)';
 export const BreakpointSmall = '374px';
 export const BreakpointMedium = '767px';
 export const BreakpointLarge = '1023px';
-export const BreakpointXlarge = '1024px';
+export const BreakpointXlarge = '1219px';
 export const NotificationDefaultFontFamily =
     "Lato, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif";
 export const NotificationDefaultFontWeight = 700;

package/tokens/tokens.json

@@ -11,6 +11,7 @@
     "SurfaceCardSurfacePressed": "#fbfbfb",
     "SurfaceMenuSurface": "#ffffff",
     "SurfaceMenuSurfaceHover": "#f4f4f4",
+    "SurfaceMenuSurfacePressed": "#f4f4f4",
     "SurfaceMenuSurfaceFocus": "#f4f4f4",
     "SurfaceSurfaceBrand": "#0061D5",
     "SurfaceSurfaceBrandHover": "#006AE9",
@@ -215,6 +216,7 @@
     "SurfaceCtaSurfacePromoFocusPressed": "#3a1e9b",
     "SurfaceContentbuttonSurfaceSurfaceSelected": "#ffffff",
     "SurfaceContentswitcherSurface": "#e8e8e8",
+    "SurfaceToolbarSurface": "#222222",
     "BorderCtaBorderSecondary": "#bcbcbc",
     "BorderCtaBorderSecondaryPressed": "#bcbcbc",
     "BorderCtaBorderSecondaryHover": "#bcbcbc",
@@ -704,7 +706,7 @@
     "BreakpointSmall": "374px",
     "BreakpointMedium": "767px",
     "BreakpointLarge": "1023px",
-    "BreakpointXlarge": "1024px",
+    "BreakpointXlarge": "1219px",
     "NotificationDefaultFontFamily": "Lato, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif",
     "NotificationDefaultFontWeight": 700,
     "NotificationDefaultLineHeight": "0.75rem",

package/tokens/tokens.scss

@@ -10,6 +10,7 @@ $surface-card-surface-focus: #f2f7fd !default;
 $surface-card-surface-pressed: #fbfbfb !default;
 $surface-menu-surface: #ffffff !default;
 $surface-menu-surface-hover: #f4f4f4 !default;
+$surface-menu-surface-pressed: #f4f4f4 !default;
 $surface-menu-surface-focus: #f4f4f4 !default;
 $surface-surface-brand: #0061d5 !default;
 $surface-surface-brand-hover: #006ae9 !default;
@@ -214,6 +215,7 @@ $surface-cta-surface-promo-focus: #4826c2 !default;
 $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;
 $border-cta-border-secondary: #bcbcbc !default;
 $border-cta-border-secondary-pressed: #bcbcbc !default;
 $border-cta-border-secondary-hover: #bcbcbc !default;
@@ -685,7 +687,7 @@ $motion-transition-slide-in: 400ms cubic-bezier(0.16, 1, 0.3, 1) !default;
 $breakpoint-small: 374px !default;
 $breakpoint-medium: 767px !default;
 $breakpoint-large: 1023px !default;
-$breakpoint-xlarge: 1024px !default;
+$breakpoint-xlarge: 1219px !default;
 $notification-default-font-family: Lato, -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto,
     'Helvetica Neue', sans-serif !default;
 $notification-default-font-weight: 700 !default;
@@ -713,6 +715,7 @@ $tokens: (
         'card-surface-pressed': $surface-card-surface-pressed,
         'menu-surface': $surface-menu-surface,
         'menu-surface-hover': $surface-menu-surface-hover,
+        'menu-surface-pressed': $surface-menu-surface-pressed,
         'menu-surface-focus': $surface-menu-surface-focus,
         'surface-brand': $surface-surface-brand,
         'surface-brand-hover': $surface-surface-brand-hover,
@@ -917,6 +920,7 @@ $tokens: (
         'cta-surface-promo-focus-pressed': $surface-cta-surface-promo-focus-pressed,
         'contentbutton-surface-surface-selected': $surface-contentbutton-surface-surface-selected,
         'contentswitcher-surface': $surface-contentswitcher-surface,
+        'toolbar-surface': $surface-toolbar-surface,
     ),
     'Border': (
         'cta-border-secondary': $border-cta-border-secondary,