@sage/design-tokens 11.2.0 → 12.0.0

package/css/frozenproduct/all.css

@@ -98,9 +98,12 @@
   --global-typography-heading-l: 700 24px/1.25 Sage Text;
   --global-typography-subheading-m: 500 17px/1.5 Sage Text;
   --global-typography-subheading-l: 500 19px/1.5 Sage Text; /* Small Viewports: 18.66, Large Viewports: 21.53 */
-  --global-typography-body-s: 400 16px/1.5 Sage Text; /* Small Viewports: 16, Large Viewports: 16 */
-  --global-typography-body-m: 400 17px/1.5 Sage Text; /* Small Viewports: 17.28, Large Viewports: 18.56 */
-  --global-typography-body-l: 400 19px/1.5 Sage Text; /* Small Viewports: 18.66, Large Viewports: 21.53 */
+  --global-typography-body-regular-s: 400 16px/1.5 Sage Text; /* Small Viewports: 16, Large Viewports: 16 */
+  --global-typography-body-regular-m: 400 17px/1.5 Sage Text; /* Small Viewports: 17.28, Large Viewports: 18.56 */
+  --global-typography-body-regular-l: 400 19px/1.5 Sage Text; /* Small Viewports: 18.66, Large Viewports: 21.53 */
+  --global-typography-body-medium-s: 500 16px/1.5 Sage Text; /* Small Viewports: 16, Large Viewports: 16 */
+  --global-typography-body-medium-m: 500 17px/1.5 Sage Text; /* Small Viewports: 17.28, Large Viewports: 18.56 */
+  --global-typography-body-medium-l: 500 19px/1.5 Sage Text; /* Small Viewports: 18.66, Large Viewports: 21.53 */
   --global-typography-component-firm-xs: 500 14px/1.5 Sage UI; /* Small Viewports: 13.72, Large Viewports: 11.89. Match token size to component size. */
   --global-typography-component-firm-s: 500 15px/1.5 Sage UI; /* Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size. */
   --global-typography-component-firm-m: 500 16px/1.5 Sage UI; /* Small Viewports: 16, Large Viewports: 16. Match token size to component size. */
@@ -233,7 +236,7 @@
   --modes-color-interactive-inactive-content-light: #0000006b; /* Disabled text inside buttons and form inputs. */
   --modes-color-interactive-inactive-content-alt-light: #FFFFFF; /*  Disabled labels inside buttons and Switch. */
   --modes-color-interactive-inactive-icon-light: #00000052; /* Disabled icon inside buttons and form inputs. */
-  --modes-color-interactive-inactive-icon-alt-light: #0000008c; /* Readonly icon inside form inputs.  */
+  --modes-color-interactive-inactive-icon-alt-light: #0000008c; /* Readonly icon inside form inputs. */
   --modes-color-interactive-inactive-frozen-default-alt-light: #e5eaed; /* Disabled input and button backgrounds, button borders and input backgrounds. */
   --modes-color-interactive-monochrome-frozen-active-light: #223743;
   --modes-color-interactive-monochrome-frozen-active-alt-light: #22374329;
@@ -260,6 +263,13 @@
   --modes-color-interactive-monochrome-marketing-with-active-light: #00D639; /* needed for specific marketing usecase on light bg */
   --modes-color-interactive-monochrome-subtle-default-alt-light: #00000080; /* border color for off switches */
   --modes-color-interactive-monochrome-subtle-default-light: #0000000a; /* bg color for tertiary buttons and table headers */
+  --modes-color-interactive-nav-active-light: #00000073; /* active bg for nav items */
+  --modes-color-interactive-nav-default-light: #FFFFFF; /* default bg for global nav */
+  --modes-color-interactive-nav-default-alt-light: #f3f3f3; /* default bg for left nav container */
+  --modes-color-interactive-nav-hover-light: #00000014; /* hover bg for nav items */
+  --modes-color-interactive-nav-with-active-light: #000000; /* text and icons on top of active bgs in nav contexts */
+  --modes-color-interactive-nav-with-default-light: #000000f2; /* hover bg for nav items */
+  --modes-color-interactive-nav-with-hover-light: #000000; /* hover bg for nav items */
   --modes-color-interactive-primary-active-light: #14571a;
   --modes-color-interactive-primary-default-light: #00811F;
   --modes-color-interactive-primary-default-alt-light: #0c711d; /* for links */
@@ -299,13 +309,13 @@
   --modes-color-status-content-loading-light: linear-gradient(135deg, #6F6F6F5c 0%, #6F6F6F0A 100%); /* used on skeleton text */
   --modes-color-status-inactive-default-light: #a6a6a6; /* For readonly pill bg and border */
   --modes-color-status-inactive-with-default-light: #000000ab; /* For readonly filled pill text */
+  --modes-color-status-important-default-light: #8F4CD7; /* For tile status keylines to show if something is of high importance. */
   --modes-color-status-info-default-light: #0060A7; /* For pills and messages. Not accessible with white TEXT. */
   --modes-color-status-info-default-alt-light: #eaeef6; /* Subtle message bg */
   --modes-color-status-info-hover-light: #10508a; /* used on pill hover states */
   --modes-color-status-info-hover-alt-light: #cbd6e9; /* used on pill hover states and message bg */
   --modes-color-status-info-frozenglobal-default-light: #65a9ff; /* used on global message bg */
   --modes-color-status-info-frozenglobal-hover-light: #84b6ff; /* used on global message bg */
-  --modes-color-status-important-default-light: #8F4CD7; /* For tile status keylines to show if something is of high importance. */
   --modes-color-status-negative-default-light: #CD384B; /* For pills and messages. Not accessible with white TEXT. */
   --modes-color-status-negative-default-alt-light: #fdeceb; /* Subtle message bg */
   --modes-color-status-negative-hover-light: #aa323f; /* used on pill hover states */
@@ -397,7 +407,7 @@
   --modes-color-generic-fg-soft-dark: #4b4b4b;
   --modes-color-generic-fg-moderate-dark: #777;
   --modes-color-generic-fg-frozen-soft-dark: #4b4b4b;
-  --modes-color-generic-fg-ai-default-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment. */
+  --modes-color-generic-fg-ai-default-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment */
   --modes-color-generic-backdrop-nought-dark: #000000; /* used on full page backgrounds */
   --modes-color-generic-backdrop-faint-dark: #181818; /* used on full page backgrounds as an alternative option */
   --modes-color-interactive-ai-active-dark: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
@@ -417,7 +427,7 @@
   --modes-color-interactive-data-entry-with-hover-dark: #FFFFFF; /* text for draggable area on file input */
   --modes-color-interactive-data-entry-hover-alt-dark: #181818; /* bg hover for draggable area on file input */
   --modes-color-interactive-data-entry-with-default-dark: #777; /* Input borders. */
-  --modes-color-interactive-data-entry-default-alt-dark: #0e0e0e; /* Input footer bgs (e.g text editor). */
+  --modes-color-interactive-data-entry-default-alt-dark: #0e0e0e; /* Input footer bgs (e.g text editor) */
   --modes-color-interactive-data-entry-content-dark: #fffffff2; /* Input Text */
   --modes-color-interactive-data-entry-content-alt-dark: #ffffff8c; /* Hint text, placeholder text, character count etc */
   --modes-color-interactive-data-entry-frozen-with-default-dark: #777; /* Input borders. */
@@ -458,6 +468,13 @@
   --modes-color-interactive-monochrome-marketing-active-dark: #00D639; /* needed for specific marketing usecase on light bg */
   --modes-color-interactive-monochrome-subtle-default-alt-dark: #ffffff80; /* border color for off switches */
   --modes-color-interactive-monochrome-subtle-default-dark: #ffffff14; /* subtle table header hover */
+  --modes-color-interactive-nav-active-dark: #ffffff73; /* active bg for nav items */
+  --modes-color-interactive-nav-default-dark: #000000; /* default bg for global nav */
+  --modes-color-interactive-nav-default-alt-dark: #282828; /* default bg for left nav container */
+  --modes-color-interactive-nav-hover-dark: #ffffff29; /* hover bg for nav items */
+  --modes-color-interactive-nav-with-active-dark: #FFFFFF; /* text and icons on top of active bgs in nav contexts */
+  --modes-color-interactive-nav-with-default-dark: #fffffff2; /* hover bg for nav items */
+  --modes-color-interactive-nav-with-hover-dark: #FFFFFF; /* hover bg for nav items */
   --modes-color-interactive-primary-active-dark: #81e57d;
   --modes-color-interactive-primary-default-dark: #00D639;
   --modes-color-interactive-primary-default-alt-dark: #4cdc55; /* for links */
@@ -478,6 +495,11 @@
   --modes-color-interactive-progress-bg-alt-dark: #00000014;
   --modes-color-interactive-progress-frozen-bg-dark: #ffffff14;
   --modes-color-interactive-progress-frozen-bg-alt-dark: #ffffff14;
+  --modes-color-status-ai-default-dark: #000000;
+  --modes-color-status-ai-default-alt-dark: #FFFFFF; /* bg for contextual message comp */
+  --modes-color-status-ai-default-horizontal-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
+  --modes-color-status-ai-default-vertical-dark: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
+  --modes-color-status-generic-default-dark: #008a89;
   --modes-color-status-caution-default-dark: #E04500;
   --modes-color-status-caution-default-alt-dark: #251206; /* Subtle message bg */
   --modes-color-status-caution-hover-dark: #eb6732; /* used on pill hover states */
@@ -485,11 +507,6 @@
   --modes-color-status-caution-text-dark: #e75b23;
   --modes-color-status-caution-frozenglobal-default-dark: #E04500; /* Global message bg */
   --modes-color-status-caution-frozenglobal-hover-dark: #eb6732; /* used on global message bg */
-  --modes-color-status-ai-default-dark: #000000;
-  --modes-color-status-ai-default-alt-dark: #FFFFFF; /* bg for contextual message comp */
-  --modes-color-status-ai-default-horizontal-dark: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
-  --modes-color-status-ai-default-vertical-dark: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
-  --modes-color-status-generic-default-dark: #008a89;
   --modes-color-status-content-with-default-dark: #000000;
   --modes-color-status-content-with-default-alt-dark: #fffffff2;
   --modes-color-status-content-with-hover-dark: #000000;
@@ -497,6 +514,7 @@
   --modes-color-status-content-loading-dark: linear-gradient(135deg, #FFFFFF5C 0%, #FFFFFF0A 100%); /* used on skeleton text */
   --modes-color-status-inactive-default-dark: #4b4b4b; /* For readonly pill bg and border */
   --modes-color-status-inactive-with-default-dark: #ffffffab; /* For readonly filled pill text */
+  --modes-color-status-important-default-dark: #985FDC; /* For tile status keylines to show if something is of high importance. */
   --modes-color-status-info-default-dark: #007ED9;
   --modes-color-status-info-default-alt-dark: #111722; /* Subtle message bg */
   --modes-color-status-info-hover-dark: #5291e0; /* used on pill hover states */
@@ -508,7 +526,6 @@
   --modes-color-status-negative-hover-dark: #eb646c; /* used on pill hover states */
   --modes-color-status-negative-hover-alt-dark: #3f1a1c; /* used on pill hover states and message bg */
   --modes-color-status-negative-text-dark: #E13E53;
-  --modes-color-status-important-default-dark: #985FDC; /* For tile status keylines to show if something is of high importance. */
   --modes-color-status-neutral-default-dark: #7C7C7C;
   --modes-color-status-neutral-default-alt-dark: #171717; /* Subtle message bg */
   --modes-color-status-neutral-hover-dark: #909090; /* used on pill hover states */
@@ -1063,6 +1080,8 @@
   --container-borderwidth-tileselect-enabled: var(--global-borderwidth-xs); /* Tile select (enabled tile) */
   --container-borderwidth-nudge: var(--global-borderwidth-xl); /* nudge AI message borders  */
   --container-color-interactive-borderalt-hover: var(--container-color-interactive-border-alt); /* For hover border on Link preview. */
+  --container-size-drawer-minwidth: var(--container-size-responsive-xl); /* min-width for drawer component */
+  --container-size-drawer-maxwidth: var(--container-size-responsive-xxxxl); /* max-width for drawer component */
 
   /* dataviz component tokens */
   --dataviz-color-generic-label-default: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark)); /* Accessible on colorpicker bg-default colors. */
@@ -1445,6 +1464,10 @@
   /* nav component tokens */
   --nav-color-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark)); /* nav bar bg */
   --nav-color-item-bg-enabled: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
+  --nav-color-leftnav-container-bg-default: light-dark(var(--modes-color-generic-bg-extreme-light), var(--modes-color-generic-bg-extreme-dark)); /* bg of of horizontal nav variant that launches the left nav */
+  --nav-color-leftnav-item-bg-active: light-dark(var(--modes-color-interactive-nav-active-light), var(--modes-color-interactive-nav-active-dark));
+  --nav-color-leftnav-item-bg-enabled: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
+  --nav-color-leftnav-item-bg-hover: light-dark(var(--modes-color-interactive-nav-hover-light), var(--modes-color-interactive-nav-hover-dark));
   --nav-typography-label-s: var(--global-typography-component-firm-s);
   --nav-typography-label-m: var(--global-typography-component-firm-m);
   --nav-typography-label-l: var(--global-typography-component-firm-l);
@@ -1459,17 +1482,25 @@
   --nav-color-menu-bg-default: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark)); /* menu (level 1) nav bg */
   --nav-color-menu-bg-alt: light-dark(var(--modes-color-generic-bg-delicate-light), var(--modes-color-generic-bg-delicate-dark)); /* level 2 nav bg */
   --nav-color-menu-bg-alt2: light-dark(var(--modes-color-generic-bg-soft-light), var(--modes-color-generic-bg-soft-dark)); /* level 3 nav bg */
+  --nav-color-leftnav-container-bg-default-alt: light-dark(var(--modes-color-generic-bg-moderate-light), var(--modes-color-generic-bg-moderate-dark)); /* bg of the parent container */
+  --nav-color-leftnav-item-label-active: light-dark(var(--modes-color-interactive-nav-with-active-light), var(--modes-color-interactive-nav-with-active-dark));
+  --nav-color-leftnav-item-label-hover: light-dark(var(--modes-color-interactive-nav-with-hover-light), var(--modes-color-interactive-nav-with-hover-dark));
   --nav-boxshadow-menu: var(--global-boxshadow-cleanedge-near); /* Menu */
+  --nav-boxshadow-leftnav-childcontainer: var(--global-boxshadow-container-near); /* box shadow on progressively shown child container */
   --nav-color-item-label-active: light-dark(var(--modes-color-interactive-monochrome-generic-with-active-light), var(--modes-color-interactive-monochrome-generic-with-active-dark));
   --nav-color-item-label-enabled: light-dark(var(--modes-color-interactive-monochrome-generic-default-light), var(--modes-color-interactive-monochrome-generic-default-dark));
   --nav-color-item-label-alt: light-dark(var(--modes-color-interactive-monochrome-generic-default-alt-light), var(--modes-color-interactive-monochrome-generic-default-alt-dark));
   --nav-color-menu-border-default: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark)); /* level 1 border */
+  --nav-color-leftnav-container-border-default: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark)); /* dividing lines within parent container */
+  --nav-color-leftnav-item-label-enabled: light-dark(var(--modes-color-interactive-nav-with-default-light), var(--modes-color-interactive-nav-with-default-dark));
   --nav-radius-menu: var(--global-radius-interactive-m); /* Drop list bottom corners, product popout list all corners */
   --nav-radius-menuitem: var(--global-radius-interactive-s); /* Menu (menu item state bg shape),  */
   --nav-radius-menumodal: var(--global-radius-interactive-l); /* Menu on mobile */
+  --nav-radius-leftnav-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
   --nav-borderwidth-divider-item: var(--global-borderwidth-xs); /* Menu (option divider) */
   --nav-borderwidth-divider-menu: var(--global-borderwidth-xs); /* level 1 border */
   --nav-borderwidth-divider-segment: var(--global-borderwidth-l); /* Menu (segment divider) */
+  --nav-borderwidth-leftnav-divider: var(--global-borderwidth-xs); /* Dividers between sticky header and between parent menu and child menu. */
   --nav-size-menu-content-y-m: var(--global-size-macro-s); /* Min height of menu content */
   --nav-size-menu-content-icon-m: var(--global-size-icon-m); /* Icon size */
   --nav-size-menu-content-icon-l: var(--global-size-icon-l); /* Icon size */
@@ -1480,6 +1511,9 @@
   --nav-size-navbar-content-icon-l: var(--global-size-icon-l); /* Icon size */
   --nav-size-navbar-item-x-m: var(--global-size-flex-m); /* Max width of nav item */
   --nav-size-navbar-item-y-m: var(--global-size-macro-m); /* Min height of nav item */
+  --nav-size-leftnav-parent-minheight: var(--global-size-macro-l); /* Min height of parent items */
+  --nav-size-leftnav-child-minheight: var(--global-size-macro-m); /* Min height of children items */
+  --nav-size-leftnav-grandchild-minheight: var(--global-size-macro-s); /* Min height of grandchildren */
   --nav-space-menu-container-x-m: var(--global-space-micro-s); /* Horizontal space on menu complex and menu items wrapper in sidebar menu */
   --nav-space-menu-container-y-m: var(--global-space-micro-l); /* Vertical space on mobile menu items */
   --nav-space-menu-content-x-m: var(--global-space-micro-l); /* Horizontal space on content within menu item */
@@ -1500,6 +1534,24 @@
   --nav-space-navbar-logo-x-m: var(--global-space-macro-xs); /* Horizontal space around logo */
   --nav-space-navbar-logo-xg-m: var(--global-space-macro-xs); /* Gap between logo and divider */
   --nav-space-navbar-logo-y-m: var(--global-space-micro-s); /* Top padding on logo */
+  --nav-space-leftnav-container-x-m: var(--global-space-macro-xxxs); /* horizontal padding on sticky quick actions header */
+  --nav-space-leftnav-container-y-s: var(--global-space-macro-xxs); /* top and bottom padding on sticky header for small screens */
+  --nav-space-leftnav-container-y-m: var(--global-space-macro-xs); /* vertical padding on sticky quick actions header at larger screen sizes */
+  --nav-space-leftnav-container-yg-s: var(--global-space-macro-xxxs); /* vertical gap betweenparent items */
+  --nav-space-leftnav-container-yg-m: var(--global-space-macro-xs); /* vertical gap between child and grandchild items */
+  --nav-space-leftnav-parentitem-vertical-x-m: var(--global-space-micro-s); /* horizontal padding on stacked parent items */
+  --nav-space-leftnav-parentitem-vertical-y-m: var(--global-space-micro-s); /* vertical padding on stacked parent items */
+  --nav-space-leftnav-parentitem-vertical-yg-m: var(--global-space-micro-s); /* vertical gap on stacked parent items */
+  --nav-space-leftnav-parentitem-horizontal-x-m: var(--global-space-macro-xxxs); /* horizontal padding on stacked parent items */
+  --nav-space-leftnav-parentitem-horizontal-xg-m: var(--global-space-micro-s); /* vertical gap on stacked parent items */
+  --nav-space-leftnav-parentitem-horizontal-y-m: var(--global-space-macro-xxxs); /* vertical padding on stacked parent items */
+  --nav-space-leftnav-parentitem-horizontal-yg-m: var(--global-space-micro-s); /* vertical gap on stacked parent items */
+  --nav-space-leftnav-childitem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on child items */
+  --nav-space-leftnav-childitem-xg-m: var(--global-space-macro-xxxs); /* gap spacing on child items between pills and accordion chevrons */
+  --nav-space-leftnav-childitem-y-m: var(--global-space-macro-xxxs); /* vertical padding on child items */
+  --nav-space-leftnav-grandchilditem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on child items */
+  --nav-space-leftnav-grandchilditem-xg-m: var(--global-space-macro-xxxs); /* gap spacing on child items between pills and accordion chevrons */
+  --nav-space-leftnav-grandchilditem-y-m: var(--global-space-macro-xxxs); /* vertical padding on child items */
 
   /* page component tokens */
   --page-color-bg-default: light-dark(var(--modes-color-generic-backdrop-nought-light), var(--modes-color-generic-backdrop-nought-dark));
@@ -1508,8 +1560,10 @@
   --page-typography-h3: var(--global-typography-heading-s);
   --page-typography-h4: var(--global-typography-subheading-l);
   --page-typography-h5: var(--global-typography-subheading-m);
-  --page-typography-p-typical: var(--global-typography-body-s);
-  --page-typography-p-large: var(--global-typography-body-s);
+  --page-typography-p-regular-typical: var(--global-typography-body-regular-s);
+  --page-typography-p-regular-large: var(--global-typography-body-regular-m);
+  --page-typography-p-medium-typical: var(--global-typography-body-medium-s);
+  --page-typography-p-medium-large: var(--global-typography-body-medium-m);
   --page-color-bg-alt: light-dark(var(--modes-color-generic-backdrop-faint-light), var(--modes-color-generic-backdrop-faint-dark));
   --page-color-text-alt: light-dark(var(--modes-color-generic-content-moderate-light), var(--modes-color-generic-content-moderate-dark)); /* for subheadings etc */
   --page-color-text-default: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark)); /* for headings, paragraph text etc  */
@@ -2030,8 +2084,10 @@
     --global-typography-heading-l: 700 34px/1.25 Sage Text;
     --global-typography-subheading-m: 500 19px/1.5 Sage Text;
     --global-typography-subheading-l: 500 22px/1.5 Sage Text; /* Small Viewports: 18.66, Large Viewports: 21.53 */
-    --global-typography-body-m: 400 19px/1.5 Sage Text; /* Small Viewports: 17.28, Large Viewports: 18.56 */
-    --global-typography-body-l: 400 22px/1.5 Sage Text; /* Small Viewports: 18.66, Large Viewports: 21.53 */
+    --global-typography-body-regular-m: 400 19px/1.5 Sage Text; /* Small Viewports: 17.28, Large Viewports: 18.56 */
+    --global-typography-body-regular-l: 400 22px/1.5 Sage Text; /* Small Viewports: 18.66, Large Viewports: 21.53 */
+    --global-typography-body-medium-m: 500 19px/1.5 Sage Text; /* Small Viewports: 17.28, Large Viewports: 18.56 */
+    --global-typography-body-medium-l: 500 22px/1.5 Sage Text; /* Small Viewports: 18.66, Large Viewports: 21.53 */
     --global-typography-component-firm-xs: 500 12px/1.5 Sage UI; /* Small Viewports: 13.72, Large Viewports: 11.89. Match token size to component size. */
     --global-typography-component-firm-s: 500 14px/1.5 Sage UI; /* Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size. */
     --global-typography-component-firm-l: 500 19px/1.5 Sage UI; /* Small Viewports: 17.28, Large Viewports: 18.56. Match token size to component size. */

package/css/frozenproduct/large/components/container.css

@@ -280,4 +280,6 @@
   --container-borderwidth-tileselect-enabled: var(--global-borderwidth-xs); /* Tile select (enabled tile) */
   --container-borderwidth-nudge: var(--global-borderwidth-xl); /* nudge AI message borders  */
   --container-color-interactive-borderalt-hover: var(--container-color-interactive-border-alt); /* For hover border on Link preview. */
+  --container-size-drawer-minwidth: var(--container-size-responsive-xl); /* min-width for drawer component */
+  --container-size-drawer-maxwidth: var(--container-size-responsive-xxxxl); /* max-width for drawer component */
 }

package/css/frozenproduct/large/components/nav.css

@@ -5,6 +5,10 @@
 :root {
   --nav-color-bg-default: var(--modes-color-generic-bg-nought); /* nav bar bg */
   --nav-color-item-bg-enabled: var(--modes-color-none);
+  --nav-color-leftnav-container-bg-default: var(--modes-color-generic-bg-extreme); /* bg of of horizontal nav variant that launches the left nav */
+  --nav-color-leftnav-item-bg-active: var(--modes-color-interactive-nav-active);
+  --nav-color-leftnav-item-bg-enabled: var(--modes-color-none);
+  --nav-color-leftnav-item-bg-hover: var(--modes-color-interactive-nav-hover);
   --nav-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
   --nav-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
   --nav-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
@@ -25,17 +29,25 @@
   --nav-color-menu-bg-default: var(--modes-color-generic-bg-faint); /* menu (level 1) nav bg */
   --nav-color-menu-bg-alt: var(--modes-color-generic-bg-delicate); /* level 2 nav bg */
   --nav-color-menu-bg-alt2: var(--modes-color-generic-bg-soft); /* level 3 nav bg */
+  --nav-color-leftnav-container-bg-default-alt: var(--modes-color-generic-bg-moderate); /* bg of the parent container */
+  --nav-color-leftnav-item-label-active: var(--modes-color-interactive-nav-with-active);
+  --nav-color-leftnav-item-label-hover: var(--modes-color-interactive-nav-with-hover);
   --nav-boxshadow-menu: var(--global-boxshadow-cleanedge-near); /* Menu */
+  --nav-boxshadow-leftnav-childcontainer: var(--global-boxshadow-container-near); /* box shadow on progressively shown child container */
   --nav-color-item-label-active: var(--modes-color-interactive-monochrome-generic-with-active);
   --nav-color-item-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
   --nav-color-item-label-alt: var(--modes-color-interactive-monochrome-generic-default-alt);
   --nav-color-menu-border-default: var(--modes-color-generic-fg-delicate); /* level 1 border */
+  --nav-color-leftnav-container-border-default: var(--modes-color-generic-fg-soft); /* dividing lines within parent container */
+  --nav-color-leftnav-item-label-enabled: var(--modes-color-interactive-nav-with-default);
   --nav-radius-menu: var(--global-radius-interactive-m); /* Drop list bottom corners, product popout list all corners */
   --nav-radius-menuitem: var(--global-radius-interactive-s); /* Menu (menu item state bg shape),  */
   --nav-radius-menumodal: var(--global-radius-interactive-l); /* Menu on mobile */
+  --nav-radius-leftnav-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
   --nav-borderwidth-divider-item: var(--global-borderwidth-xs); /* Menu (option divider) */
   --nav-borderwidth-divider-menu: var(--global-borderwidth-xs); /* level 1 border */
   --nav-borderwidth-divider-segment: var(--global-borderwidth-l); /* Menu (segment divider) */
+  --nav-borderwidth-leftnav-divider: var(--global-borderwidth-xs); /* Dividers between sticky header and between parent menu and child menu. */
   --nav-size-menu-content-y-m: var(--global-size-macro-s); /* Min height of menu content */
   --nav-size-menu-content-icon-m: var(--global-size-icon-m); /* Icon size */
   --nav-size-menu-content-icon-l: var(--global-size-icon-l); /* Icon size */
@@ -46,6 +58,9 @@
   --nav-size-navbar-content-icon-l: var(--global-size-icon-l); /* Icon size */
   --nav-size-navbar-item-x-m: var(--global-size-flex-m); /* Max width of nav item */
   --nav-size-navbar-item-y-m: var(--global-size-macro-m); /* Min height of nav item */
+  --nav-size-leftnav-parent-minheight: var(--global-size-macro-l); /* Min height of parent items */
+  --nav-size-leftnav-child-minheight: var(--global-size-macro-m); /* Min height of children items */
+  --nav-size-leftnav-grandchild-minheight: var(--global-size-macro-s); /* Min height of grandchildren */
   --nav-space-menu-container-x-m: var(--global-space-micro-s); /* Horizontal space on menu complex and menu items wrapper in sidebar menu */
   --nav-space-menu-container-y-m: var(--global-space-micro-l); /* Vertical space on mobile menu items */
   --nav-space-menu-content-x-m: var(--global-space-micro-l); /* Horizontal space on content within menu item */
@@ -66,4 +81,22 @@
   --nav-space-navbar-logo-x-m: var(--global-space-macro-xs); /* Horizontal space around logo */
   --nav-space-navbar-logo-xg-m: var(--global-space-macro-xs); /* Gap between logo and divider */
   --nav-space-navbar-logo-y-m: var(--global-space-micro-s); /* Top padding on logo */
+  --nav-space-leftnav-container-x-m: var(--global-space-macro-xxxs); /* horizontal padding on sticky quick actions header */
+  --nav-space-leftnav-container-y-s: var(--global-space-macro-xxs); /* top and bottom padding on sticky header for small screens */
+  --nav-space-leftnav-container-y-m: var(--global-space-macro-xs); /* vertical padding on sticky quick actions header at larger screen sizes */
+  --nav-space-leftnav-container-yg-s: var(--global-space-macro-xxxs); /* vertical gap betweenparent items */
+  --nav-space-leftnav-container-yg-m: var(--global-space-macro-xs); /* vertical gap between child and grandchild items */
+  --nav-space-leftnav-parentitem-vertical-x-m: var(--global-space-micro-s); /* horizontal padding on stacked parent items */
+  --nav-space-leftnav-parentitem-vertical-y-m: var(--global-space-micro-s); /* vertical padding on stacked parent items */
+  --nav-space-leftnav-parentitem-vertical-yg-m: var(--global-space-micro-s); /* vertical gap on stacked parent items */
+  --nav-space-leftnav-parentitem-horizontal-x-m: var(--global-space-macro-xxxs); /* horizontal padding on stacked parent items */
+  --nav-space-leftnav-parentitem-horizontal-xg-m: var(--global-space-micro-s); /* vertical gap on stacked parent items */
+  --nav-space-leftnav-parentitem-horizontal-y-m: var(--global-space-macro-xxxs); /* vertical padding on stacked parent items */
+  --nav-space-leftnav-parentitem-horizontal-yg-m: var(--global-space-micro-s); /* vertical gap on stacked parent items */
+  --nav-space-leftnav-childitem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on child items */
+  --nav-space-leftnav-childitem-xg-m: var(--global-space-macro-xxxs); /* gap spacing on child items between pills and accordion chevrons */
+  --nav-space-leftnav-childitem-y-m: var(--global-space-macro-xxxs); /* vertical padding on child items */
+  --nav-space-leftnav-grandchilditem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on child items */
+  --nav-space-leftnav-grandchilditem-xg-m: var(--global-space-macro-xxxs); /* gap spacing on child items between pills and accordion chevrons */
+  --nav-space-leftnav-grandchilditem-y-m: var(--global-space-macro-xxxs); /* vertical padding on child items */
 }

package/css/frozenproduct/large/components/page.css

@@ -9,15 +9,19 @@
   --page-typography-responsive-h3: var(--global-typography-responsive-heading-s);
   --page-typography-responsive-h4: var(--global-typography-responsive-subheading-l);
   --page-typography-responsive-h5: var(--global-typography-responsive-subheading-m);
-  --page-typography-responsive-p-typical: var(--global-typography-responsive-body-s);
-  --page-typography-responsive-p-large: var(--global-typography-responsive-body-s);
+  --page-typography-responsive-p-regular-typical: var(--global-typography-responsive-body-regular-s);
+  --page-typography-responsive-p-regular-large: var(--global-typography-responsive-body-regular-m);
+  --page-typography-responsive-p-medium-typical: var(--global-typography-responsive-body-medium-s);
+  --page-typography-responsive-p-medium-large: var(--global-typography-responsive-body-medium-m);
   --page-typography-adaptive-h1: var(--global-typography-adaptive-heading-l);
   --page-typography-adaptive-h2: var(--global-typography-adaptive-heading-m);
   --page-typography-adaptive-h3: var(--global-typography-adaptive-heading-s);
   --page-typography-adaptive-h4: var(--global-typography-adaptive-subheading-l);
   --page-typography-adaptive-h5: var(--global-typography-adaptive-subheading-m);
-  --page-typography-adaptive-p-typical: var(--global-typography-adaptive-body-s);
-  --page-typography-adaptive-p-large: var(--global-typography-adaptive-body-s);
+  --page-typography-adaptive-p-regular-typical: var(--global-typography-adaptive-body-regular-s);
+  --page-typography-adaptive-p-regular-large: var(--global-typography-adaptive-body-regular-m);
+  --page-typography-adaptive-p-medium-typical: var(--global-typography-adaptive-body-medium-s);
+  --page-typography-adaptive-p-medium-large: var(--global-typography-adaptive-body-medium-m);
   --page-color-bg-alt: var(--modes-color-generic-backdrop-faint);
   --page-color-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
   --page-color-text-default: var(--modes-color-generic-content-harsh); /* for headings, paragraph text etc  */

package/css/frozenproduct/large/dark.css

@@ -56,7 +56,7 @@
   --modes-color-generic-fg-soft: #4b4b4b;
   --modes-color-generic-fg-moderate: #777;
   --modes-color-generic-fg-frozen-soft: #4b4b4b;
-  --modes-color-generic-fg-ai-default: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment. */
+  --modes-color-generic-fg-ai-default: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%); /* Dialog top border treatment */
   --modes-color-generic-backdrop-nought: #000000; /* used on full page backgrounds */
   --modes-color-generic-backdrop-faint: #181818; /* used on full page backgrounds as an alternative option */
   --modes-color-interactive-ai-active: linear-gradient(90deg, #00D63926 0%, #00d6de26 40%, #9d60ff26 90%);
@@ -76,7 +76,7 @@
   --modes-color-interactive-data-entry-with-hover: #FFFFFF; /* text for draggable area on file input */
   --modes-color-interactive-data-entry-hover-alt: #181818; /* bg hover for draggable area on file input */
   --modes-color-interactive-data-entry-with-default: #777; /* Input borders. */
-  --modes-color-interactive-data-entry-default-alt: #0e0e0e; /* Input footer bgs (e.g text editor). */
+  --modes-color-interactive-data-entry-default-alt: #0e0e0e; /* Input footer bgs (e.g text editor) */
   --modes-color-interactive-data-entry-content: #fffffff2; /* Input Text */
   --modes-color-interactive-data-entry-content-alt: #ffffff8c; /* Hint text, placeholder text, character count etc */
   --modes-color-interactive-data-entry-frozen-with-default: #777; /* Input borders. */
@@ -117,6 +117,13 @@
   --modes-color-interactive-monochrome-marketing-active: #00D639; /* needed for specific marketing usecase on light bg */
   --modes-color-interactive-monochrome-subtle-default-alt: #ffffff80; /* border color for off switches */
   --modes-color-interactive-monochrome-subtle-default: #ffffff14; /* subtle table header hover */
+  --modes-color-interactive-nav-active: #ffffff73; /* active bg for nav items */
+  --modes-color-interactive-nav-default: #000000; /* default bg for global nav */
+  --modes-color-interactive-nav-default-alt: #282828; /* default bg for left nav container */
+  --modes-color-interactive-nav-hover: #ffffff29; /* hover bg for nav items */
+  --modes-color-interactive-nav-with-active: #FFFFFF; /* text and icons on top of active bgs in nav contexts */
+  --modes-color-interactive-nav-with-default: #fffffff2; /* hover bg for nav items */
+  --modes-color-interactive-nav-with-hover: #FFFFFF; /* hover bg for nav items */
   --modes-color-interactive-primary-active: #81e57d;
   --modes-color-interactive-primary-default: #00D639;
   --modes-color-interactive-primary-default-alt: #4cdc55; /* for links */
@@ -137,6 +144,11 @@
   --modes-color-interactive-progress-bg-alt: #00000014;
   --modes-color-interactive-progress-frozen-bg: #ffffff14;
   --modes-color-interactive-progress-frozen-bg-alt: #ffffff14;
+  --modes-color-status-ai-default: #000000;
+  --modes-color-status-ai-default-alt: #FFFFFF; /* bg for contextual message comp */
+  --modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
+  --modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
+  --modes-color-status-generic-default: #008a89;
   --modes-color-status-caution-default: #E04500;
   --modes-color-status-caution-default-alt: #251206; /* Subtle message bg */
   --modes-color-status-caution-hover: #eb6732; /* used on pill hover states */
@@ -144,11 +156,6 @@
   --modes-color-status-caution-text: #e75b23;
   --modes-color-status-caution-frozenglobal-default: #E04500; /* Global message bg */
   --modes-color-status-caution-frozenglobal-hover: #eb6732; /* used on global message bg */
-  --modes-color-status-ai-default: #000000;
-  --modes-color-status-ai-default-alt: #FFFFFF; /* bg for contextual message comp */
-  --modes-color-status-ai-default-horizontal: linear-gradient(90deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
-  --modes-color-status-ai-default-vertical: linear-gradient(180deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%);
-  --modes-color-status-generic-default: #008a89;
   --modes-color-status-content-with-default: #000000;
   --modes-color-status-content-with-default-alt: #fffffff2;
   --modes-color-status-content-with-hover: #000000;
@@ -156,6 +163,7 @@
   --modes-color-status-content-loading: linear-gradient(135deg, #FFFFFF5C 0%, #FFFFFF0A 100%); /* used on skeleton text */
   --modes-color-status-inactive-default: #4b4b4b; /* For readonly pill bg and border */
   --modes-color-status-inactive-with-default: #ffffffab; /* For readonly filled pill text */
+  --modes-color-status-important-default: #985FDC; /* For tile status keylines to show if something is of high importance. */
   --modes-color-status-info-default: #007ED9;
   --modes-color-status-info-default-alt: #111722; /* Subtle message bg */
   --modes-color-status-info-hover: #5291e0; /* used on pill hover states */
@@ -167,7 +175,6 @@
   --modes-color-status-negative-hover: #eb646c; /* used on pill hover states */
   --modes-color-status-negative-hover-alt: #3f1a1c; /* used on pill hover states and message bg */
   --modes-color-status-negative-text: #E13E53;
-  --modes-color-status-important-default: #985FDC; /* For tile status keylines to show if something is of high importance. */
   --modes-color-status-neutral-default: #7C7C7C;
   --modes-color-status-neutral-default-alt: #171717; /* Subtle message bg */
   --modes-color-status-neutral-hover: #909090; /* used on pill hover states */

package/css/frozenproduct/large/global.css

@@ -98,9 +98,12 @@
   --global-typography-responsive-heading-l: 700 clamp(1.4694rem, 1.3431rem + 0.6313vw, 2.1006rem)/1.25 Sage Text; /* Small Viewports: 23.51, Large Viewports: 33.61 */
   --global-typography-responsive-subheading-m: 500 clamp(1.08rem, 1.064rem + 0.08vw, 1.16rem)/1.5 Sage Text; /* Small Viewports: 17.28, Large Viewports: 18.56 */
   --global-typography-responsive-subheading-l: 500 clamp(1.1663rem, 1.1304rem + 0.1794vw, 1.3456rem)/1.5 Sage Text; /* Small Viewports: 18.66, Large Viewports: 21.53 */
-  --global-typography-responsive-body-s: 400 clamp(1rem, 1rem + 0vw, 1rem)/1.5 Sage Text; /* Small Viewports: 16, Large Viewports: 16 */
-  --global-typography-responsive-body-m: 400 clamp(1.08rem, 1.064rem + 0.08vw, 1.16rem)/1.5 Sage Text; /* Small Viewports: 17.28, Large Viewports: 18.56 */
-  --global-typography-responsive-body-l: 400 clamp(1.1663rem, 1.1304rem + 0.1794vw, 1.3456rem)/1.5 Sage Text; /* Small Viewports: 18.66, Large Viewports: 21.53 */
+  --global-typography-responsive-body-regular-s: 400 clamp(1rem, 1rem + 0vw, 1rem)/1.5 Sage Text; /* Small Viewports: 16, Large Viewports: 16 */
+  --global-typography-responsive-body-regular-m: 400 clamp(1.08rem, 1.064rem + 0.08vw, 1.16rem)/1.5 Sage Text; /* Small Viewports: 17.28, Large Viewports: 18.56 */
+  --global-typography-responsive-body-regular-l: 400 clamp(1.1663rem, 1.1304rem + 0.1794vw, 1.3456rem)/1.5 Sage Text; /* Small Viewports: 18.66, Large Viewports: 21.53 */
+  --global-typography-responsive-body-medium-s: 500 clamp(1rem, 1rem + 0vw, 1rem)/1.5 Sage Text; /* Small Viewports: 16, Large Viewports: 16 */
+  --global-typography-responsive-body-medium-m: 500 clamp(1.08rem, 1.064rem + 0.08vw, 1.16rem)/1.5 Sage Text; /* Small Viewports: 17.28, Large Viewports: 18.56 */
+  --global-typography-responsive-body-medium-l: 500 clamp(1.1663rem, 1.1304rem + 0.1794vw, 1.3456rem)/1.5 Sage Text; /* Small Viewports: 18.66, Large Viewports: 21.53 */
   --global-typography-responsive-component-firm-xs: 500 clamp(0.7431rem, 0.8804rem + -0.1144vw, 0.8575rem)/1.5 Sage UI; /* Small Viewports: 13.72, Large Viewports: 11.89 */
   --global-typography-responsive-component-firm-s: 500 clamp(0.8619rem, 0.9384rem + -0.0637vw, 0.9256rem)/1.5 Sage UI; /* Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size. */
   --global-typography-responsive-component-firm-m: 500 clamp(1rem, 1rem + 0vw, 1rem)/1.5 Sage UI; /* Small Viewports: 16, Large Viewports: 16. Match token size to component size. */
@@ -131,9 +134,12 @@
   --global-typography-adaptive-heading-l: 700 34px/1.25 Sage Text;
   --global-typography-adaptive-subheading-m: 500 19px/1.5 Sage Text;
   --global-typography-adaptive-subheading-l: 500 22px/1.5 Sage Text; /* Small Viewports: 18.66, Large Viewports: 21.53 */
-  --global-typography-adaptive-body-s: 400 16px/1.5 Sage Text; /* Small Viewports: 16, Large Viewports: 16 */
-  --global-typography-adaptive-body-m: 400 19px/1.5 Sage Text; /* Small Viewports: 17.28, Large Viewports: 18.56 */
-  --global-typography-adaptive-body-l: 400 22px/1.5 Sage Text; /* Small Viewports: 18.66, Large Viewports: 21.53 */
+  --global-typography-adaptive-body-regular-s: 400 16px/1.5 Sage Text; /* Small Viewports: 16, Large Viewports: 16 */
+  --global-typography-adaptive-body-regular-m: 400 19px/1.5 Sage Text; /* Small Viewports: 17.28, Large Viewports: 18.56 */
+  --global-typography-adaptive-body-regular-l: 400 22px/1.5 Sage Text; /* Small Viewports: 18.66, Large Viewports: 21.53 */
+  --global-typography-adaptive-body-medium-s: 500 16px/1.5 Sage Text; /* Small Viewports: 16, Large Viewports: 16 */
+  --global-typography-adaptive-body-medium-m: 500 19px/1.5 Sage Text; /* Small Viewports: 17.28, Large Viewports: 18.56 */
+  --global-typography-adaptive-body-medium-l: 500 22px/1.5 Sage Text; /* Small Viewports: 18.66, Large Viewports: 21.53 */
   --global-typography-adaptive-component-firm-xs: 500 12px/1.5 Sage UI; /* Small Viewports: 13.72, Large Viewports: 11.89. Match token size to component size. */
   --global-typography-adaptive-component-firm-s: 500 14px/1.5 Sage UI; /* Small Viewports: 14.81, Large Viewports: 13.79. Match token size to component size. */
   --global-typography-adaptive-component-firm-m: 500 16px/1.5 Sage UI; /* Small Viewports: 16, Large Viewports: 16. Match token size to component size. */

package/css/frozenproduct/large/light.css

@@ -90,7 +90,7 @@
   --modes-color-interactive-inactive-content: #0000006b; /* Disabled text inside buttons and form inputs. */
   --modes-color-interactive-inactive-content-alt: #FFFFFF; /*  Disabled labels inside buttons and Switch. */
   --modes-color-interactive-inactive-icon: #00000052; /* Disabled icon inside buttons and form inputs. */
-  --modes-color-interactive-inactive-icon-alt: #0000008c; /* Readonly icon inside form inputs.  */
+  --modes-color-interactive-inactive-icon-alt: #0000008c; /* Readonly icon inside form inputs. */
   --modes-color-interactive-inactive-frozen-default-alt: #e5eaed; /* Disabled input and button backgrounds, button borders and input backgrounds. */
   --modes-color-interactive-monochrome-frozen-active: #223743;
   --modes-color-interactive-monochrome-frozen-active-alt: #22374329;
@@ -117,6 +117,13 @@
   --modes-color-interactive-monochrome-marketing-with-active: #00D639; /* needed for specific marketing usecase on light bg */
   --modes-color-interactive-monochrome-subtle-default-alt: #00000080; /* border color for off switches */
   --modes-color-interactive-monochrome-subtle-default: #0000000a; /* bg color for tertiary buttons and table headers */
+  --modes-color-interactive-nav-active: #00000073; /* active bg for nav items */
+  --modes-color-interactive-nav-default: #FFFFFF; /* default bg for global nav */
+  --modes-color-interactive-nav-default-alt: #f3f3f3; /* default bg for left nav container */
+  --modes-color-interactive-nav-hover: #00000014; /* hover bg for nav items */
+  --modes-color-interactive-nav-with-active: #000000; /* text and icons on top of active bgs in nav contexts */
+  --modes-color-interactive-nav-with-default: #000000f2; /* hover bg for nav items */
+  --modes-color-interactive-nav-with-hover: #000000; /* hover bg for nav items */
   --modes-color-interactive-primary-active: #14571a;
   --modes-color-interactive-primary-default: #00811F;
   --modes-color-interactive-primary-default-alt: #0c711d; /* for links */
@@ -156,13 +163,13 @@
   --modes-color-status-content-loading: linear-gradient(135deg, #6F6F6F5c 0%, #6F6F6F0A 100%); /* used on skeleton text */
   --modes-color-status-inactive-default: #a6a6a6; /* For readonly pill bg and border */
   --modes-color-status-inactive-with-default: #000000ab; /* For readonly filled pill text */
+  --modes-color-status-important-default: #8F4CD7; /* For tile status keylines to show if something is of high importance. */
   --modes-color-status-info-default: #0060A7; /* For pills and messages. Not accessible with white TEXT. */
   --modes-color-status-info-default-alt: #eaeef6; /* Subtle message bg */
   --modes-color-status-info-hover: #10508a; /* used on pill hover states */
   --modes-color-status-info-hover-alt: #cbd6e9; /* used on pill hover states and message bg */
   --modes-color-status-info-frozenglobal-default: #65a9ff; /* used on global message bg */
   --modes-color-status-info-frozenglobal-hover: #84b6ff; /* used on global message bg */
-  --modes-color-status-important-default: #8F4CD7; /* For tile status keylines to show if something is of high importance. */
   --modes-color-status-negative-default: #CD384B; /* For pills and messages. Not accessible with white TEXT. */
   --modes-color-status-negative-default-alt: #fdeceb; /* Subtle message bg */
   --modes-color-status-negative-hover: #aa323f; /* used on pill hover states */

package/css/frozenproduct/small/components/container.css

@@ -280,4 +280,6 @@
   --container-borderwidth-tileselect-enabled: var(--global-borderwidth-xs); /* Tile select (enabled tile) */
   --container-borderwidth-nudge: var(--global-borderwidth-xl); /* nudge AI message borders  */
   --container-color-interactive-borderalt-hover: var(--container-color-interactive-border-alt); /* For hover border on Link preview. */
+  --container-size-drawer-minwidth: var(--container-size-responsive-xl); /* min-width for drawer component */
+  --container-size-drawer-maxwidth: var(--container-size-responsive-xxxxl); /* max-width for drawer component */
 }

package/css/frozenproduct/small/components/nav.css

@@ -5,6 +5,10 @@
 :root {
   --nav-color-bg-default: var(--modes-color-generic-bg-nought); /* nav bar bg */
   --nav-color-item-bg-enabled: var(--modes-color-none);
+  --nav-color-leftnav-container-bg-default: var(--modes-color-generic-bg-extreme); /* bg of of horizontal nav variant that launches the left nav */
+  --nav-color-leftnav-item-bg-active: var(--modes-color-interactive-nav-active);
+  --nav-color-leftnav-item-bg-enabled: var(--modes-color-none);
+  --nav-color-leftnav-item-bg-hover: var(--modes-color-interactive-nav-hover);
   --nav-typography-adaptive-label-s: var(--global-typography-adaptive-component-firm-s);
   --nav-typography-adaptive-label-m: var(--global-typography-adaptive-component-firm-m);
   --nav-typography-adaptive-label-l: var(--global-typography-adaptive-component-firm-l);
@@ -25,17 +29,25 @@
   --nav-color-menu-bg-default: var(--modes-color-generic-bg-faint); /* menu (level 1) nav bg */
   --nav-color-menu-bg-alt: var(--modes-color-generic-bg-delicate); /* level 2 nav bg */
   --nav-color-menu-bg-alt2: var(--modes-color-generic-bg-soft); /* level 3 nav bg */
+  --nav-color-leftnav-container-bg-default-alt: var(--modes-color-generic-bg-moderate); /* bg of the parent container */
+  --nav-color-leftnav-item-label-active: var(--modes-color-interactive-nav-with-active);
+  --nav-color-leftnav-item-label-hover: var(--modes-color-interactive-nav-with-hover);
   --nav-boxshadow-menu: var(--global-boxshadow-cleanedge-near); /* Menu */
+  --nav-boxshadow-leftnav-childcontainer: var(--global-boxshadow-container-near); /* box shadow on progressively shown child container */
   --nav-color-item-label-active: var(--modes-color-interactive-monochrome-generic-with-active);
   --nav-color-item-label-enabled: var(--modes-color-interactive-monochrome-generic-default);
   --nav-color-item-label-alt: var(--modes-color-interactive-monochrome-generic-default-alt);
   --nav-color-menu-border-default: var(--modes-color-generic-fg-delicate); /* level 1 border */
+  --nav-color-leftnav-container-border-default: var(--modes-color-generic-fg-soft); /* dividing lines within parent container */
+  --nav-color-leftnav-item-label-enabled: var(--modes-color-interactive-nav-with-default);
   --nav-radius-menu: var(--global-radius-interactive-m); /* Drop list bottom corners, product popout list all corners */
   --nav-radius-menuitem: var(--global-radius-interactive-s); /* Menu (menu item state bg shape),  */
   --nav-radius-menumodal: var(--global-radius-interactive-l); /* Menu on mobile */
+  --nav-radius-leftnav-menuitem: var(--global-radius-interactive-m); /* Radius on parent, child and grandchild items in left nav */
   --nav-borderwidth-divider-item: var(--global-borderwidth-xs); /* Menu (option divider) */
   --nav-borderwidth-divider-menu: var(--global-borderwidth-xs); /* level 1 border */
   --nav-borderwidth-divider-segment: var(--global-borderwidth-l); /* Menu (segment divider) */
+  --nav-borderwidth-leftnav-divider: var(--global-borderwidth-xs); /* Dividers between sticky header and between parent menu and child menu. */
   --nav-size-menu-content-y-m: var(--global-size-macro-s); /* Min height of menu content */
   --nav-size-menu-content-icon-m: var(--global-size-icon-m); /* Icon size */
   --nav-size-menu-content-icon-l: var(--global-size-icon-l); /* Icon size */
@@ -46,6 +58,9 @@
   --nav-size-navbar-content-icon-l: var(--global-size-icon-l); /* Icon size */
   --nav-size-navbar-item-x-m: var(--global-size-flex-m); /* Max width of nav item */
   --nav-size-navbar-item-y-m: var(--global-size-macro-m); /* Min height of nav item */
+  --nav-size-leftnav-parent-minheight: var(--global-size-macro-l); /* Min height of parent items */
+  --nav-size-leftnav-child-minheight: var(--global-size-macro-m); /* Min height of children items */
+  --nav-size-leftnav-grandchild-minheight: var(--global-size-macro-s); /* Min height of grandchildren */
   --nav-space-menu-container-x-m: var(--global-space-micro-s); /* Horizontal space on menu complex and menu items wrapper in sidebar menu */
   --nav-space-menu-container-y-m: var(--global-space-micro-l); /* Vertical space on mobile menu items */
   --nav-space-menu-content-x-m: var(--global-space-micro-l); /* Horizontal space on content within menu item */
@@ -66,4 +81,22 @@
   --nav-space-navbar-logo-x-m: var(--global-space-macro-xs); /* Horizontal space around logo */
   --nav-space-navbar-logo-xg-m: var(--global-space-macro-xs); /* Gap between logo and divider */
   --nav-space-navbar-logo-y-m: var(--global-space-micro-s); /* Top padding on logo */
+  --nav-space-leftnav-container-x-m: var(--global-space-macro-xxxs); /* horizontal padding on sticky quick actions header */
+  --nav-space-leftnav-container-y-s: var(--global-space-macro-xxs); /* top and bottom padding on sticky header for small screens */
+  --nav-space-leftnav-container-y-m: var(--global-space-macro-xs); /* vertical padding on sticky quick actions header at larger screen sizes */
+  --nav-space-leftnav-container-yg-s: var(--global-space-macro-xxxs); /* vertical gap betweenparent items */
+  --nav-space-leftnav-container-yg-m: var(--global-space-macro-xs); /* vertical gap between child and grandchild items */
+  --nav-space-leftnav-parentitem-vertical-x-m: var(--global-space-micro-s); /* horizontal padding on stacked parent items */
+  --nav-space-leftnav-parentitem-vertical-y-m: var(--global-space-micro-s); /* vertical padding on stacked parent items */
+  --nav-space-leftnav-parentitem-vertical-yg-m: var(--global-space-micro-s); /* vertical gap on stacked parent items */
+  --nav-space-leftnav-parentitem-horizontal-x-m: var(--global-space-macro-xxxs); /* horizontal padding on stacked parent items */
+  --nav-space-leftnav-parentitem-horizontal-xg-m: var(--global-space-micro-s); /* vertical gap on stacked parent items */
+  --nav-space-leftnav-parentitem-horizontal-y-m: var(--global-space-macro-xxxs); /* vertical padding on stacked parent items */
+  --nav-space-leftnav-parentitem-horizontal-yg-m: var(--global-space-micro-s); /* vertical gap on stacked parent items */
+  --nav-space-leftnav-childitem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on child items */
+  --nav-space-leftnav-childitem-xg-m: var(--global-space-macro-xxxs); /* gap spacing on child items between pills and accordion chevrons */
+  --nav-space-leftnav-childitem-y-m: var(--global-space-macro-xxxs); /* vertical padding on child items */
+  --nav-space-leftnav-grandchilditem-x-m: var(--global-space-macro-xxxs); /* horizontal padding on child items */
+  --nav-space-leftnav-grandchilditem-xg-m: var(--global-space-macro-xxxs); /* gap spacing on child items between pills and accordion chevrons */
+  --nav-space-leftnav-grandchilditem-y-m: var(--global-space-macro-xxxs); /* vertical padding on child items */
 }

package/css/frozenproduct/small/components/page.css

@@ -9,15 +9,19 @@
   --page-typography-responsive-h3: var(--global-typography-responsive-heading-s);
   --page-typography-responsive-h4: var(--global-typography-responsive-subheading-l);
   --page-typography-responsive-h5: var(--global-typography-responsive-subheading-m);
-  --page-typography-responsive-p-typical: var(--global-typography-responsive-body-s);
-  --page-typography-responsive-p-large: var(--global-typography-responsive-body-s);
+  --page-typography-responsive-p-regular-typical: var(--global-typography-responsive-body-regular-s);
+  --page-typography-responsive-p-regular-large: var(--global-typography-responsive-body-regular-m);
+  --page-typography-responsive-p-medium-typical: var(--global-typography-responsive-body-medium-s);
+  --page-typography-responsive-p-medium-large: var(--global-typography-responsive-body-medium-m);
   --page-typography-adaptive-h1: var(--global-typography-adaptive-heading-l);
   --page-typography-adaptive-h2: var(--global-typography-adaptive-heading-m);
   --page-typography-adaptive-h3: var(--global-typography-adaptive-heading-s);
   --page-typography-adaptive-h4: var(--global-typography-adaptive-subheading-l);
   --page-typography-adaptive-h5: var(--global-typography-adaptive-subheading-m);
-  --page-typography-adaptive-p-typical: var(--global-typography-adaptive-body-s);
-  --page-typography-adaptive-p-large: var(--global-typography-adaptive-body-s);
+  --page-typography-adaptive-p-regular-typical: var(--global-typography-adaptive-body-regular-s);
+  --page-typography-adaptive-p-regular-large: var(--global-typography-adaptive-body-regular-m);
+  --page-typography-adaptive-p-medium-typical: var(--global-typography-adaptive-body-medium-s);
+  --page-typography-adaptive-p-medium-large: var(--global-typography-adaptive-body-medium-m);
   --page-color-bg-alt: var(--modes-color-generic-backdrop-faint);
   --page-color-text-alt: var(--modes-color-generic-content-moderate); /* for subheadings etc */
   --page-color-text-default: var(--modes-color-generic-content-harsh); /* for headings, paragraph text etc  */