npm - @sage/design-tokens - Versions diffs - 11.2.0 → 11.3.0 - Mend

@sage/design-tokens 11.2.0 → 11.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (369) hide show

package/css/frozenproduct/all.css CHANGED Viewed

@@ -233,7 +233,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 +260,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 +306,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 +404,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 +424,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 +465,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 +492,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 +504,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 +511,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 +523,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 +1077,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 +1461,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 +1479,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 +1508,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 +1531,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));

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

@@ -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 CHANGED Viewed

@@ -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/dark.css CHANGED Viewed

@@ -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/light.css CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/dark.css CHANGED Viewed

@@ -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/small/light.css CHANGED Viewed

@@ -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 */