npm - @sage/design-tokens - Versions diffs - 14.6.0 → 14.7.0 - Mend

@sage/design-tokens 14.6.0 → 14.7.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 (144) hide show

package/css/frozenproduct/all.css CHANGED Viewed

@@ -1113,6 +1113,13 @@
   /* container component tokens */
   --container-size-carousel-mediaslide-minheight: 300; /* max height for media visual */
+  --container-size-dialog-max-width-xxs: 300;
+  --container-size-dialog-max-width-xs: 380;
+  --container-size-dialog-max-width-s: 540;
+  --container-size-dialog-max-width-m: 750;
+  --container-size-dialog-max-width-l: 850;
+  --container-size-dialog-max-width-xl: 960;
+  --container-size-dialog-max-width-xxl: 1080;
   --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
   --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
   --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
@@ -1196,13 +1203,13 @@
   --container-size-copilot-emptystate-content-maxwidth: calc(var(--global-size-macro-xxxxl) * 5); /* max-width of the insight empty state content area */
   --container-size-copilot-overlay-maxheight: calc(var(--global-size-macro-xxxxl) * 8); /* max-height of the copilot container overlay  */
   --container-size-drag-droptarget: var(--global-size-micro-xxs); /* drop target width or height */
+  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
+  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
+  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-generic-emptystate-illustration-primary-s: calc(var(--global-size-macro-m) * 5); /* Illustration size for small error and empty states */
   --container-size-generic-emptystate-illustration-primary-m: calc(var(--global-size-macro-m) * 6); /* Illustration size for medium error and empty states */
   --container-size-generic-emptystate-illustration-primary-l: calc(var(--global-size-macro-m) * 8); /* Illustration size for large error and empty states */
   --container-size-generic-emptystate-illustration-secondary: calc(var(--global-size-macro-m) + var(--button-size-icon-m)); /* Illustration size for secondary empty states */
-  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
-  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
-  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-icon-s: var(--global-size-icon-m);
   --container-size-icon-m: var(--global-size-icon-m);
   --container-size-icon-l: var(--global-size-icon-m); /* Deliberately referencing global M (20px). Accordion chevron. */

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

@@ -4,6 +4,13 @@
 :root {
   --container-size-carousel-mediaslide-minheight: 300; /* max height for media visual */
+  --container-size-dialog-max-width-xxs: 300;
+  --container-size-dialog-max-width-xs: 380;
+  --container-size-dialog-max-width-s: 540;
+  --container-size-dialog-max-width-m: 750;
+  --container-size-dialog-max-width-l: 850;
+  --container-size-dialog-max-width-xl: 960;
+  --container-size-dialog-max-width-xxl: 1080;
   --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
   --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
   --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
@@ -96,13 +103,13 @@
   --container-size-copilot-emptystate-content-maxwidth: calc(var(--global-size-macro-xxxxl) * 5); /* max-width of the insight empty state content area */
   --container-size-copilot-overlay-maxheight: calc(var(--global-size-macro-xxxxl) * 8); /* max-height of the copilot container overlay  */
   --container-size-drag-droptarget: var(--global-size-micro-xxs); /* drop target width or height */
+  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
+  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
+  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-generic-emptystate-illustration-primary-s: calc(var(--global-size-macro-m) * 5); /* Illustration size for small error and empty states */
   --container-size-generic-emptystate-illustration-primary-m: calc(var(--global-size-macro-m) * 6); /* Illustration size for medium error and empty states */
   --container-size-generic-emptystate-illustration-primary-l: calc(var(--global-size-macro-m) * 8); /* Illustration size for large error and empty states */
   --container-size-generic-emptystate-illustration-secondary: calc(var(--global-size-macro-m) + var(--button-size-icon-m)); /* Illustration size for secondary empty states */
-  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
-  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
-  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-icon-s: var(--global-size-icon-m);
   --container-size-icon-m: var(--global-size-icon-m);
   --container-size-icon-l: var(--global-size-icon-m); /* Deliberately referencing global M (20px). Accordion chevron. */

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

@@ -4,6 +4,13 @@
 :root {
   --container-size-carousel-mediaslide-minheight: 300; /* max height for media visual */
+  --container-size-dialog-max-width-xxs: 300;
+  --container-size-dialog-max-width-xs: 380;
+  --container-size-dialog-max-width-s: 540;
+  --container-size-dialog-max-width-m: 750;
+  --container-size-dialog-max-width-l: 850;
+  --container-size-dialog-max-width-xl: 960;
+  --container-size-dialog-max-width-xxl: 1080;
   --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
   --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
   --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
@@ -96,13 +103,13 @@
   --container-size-copilot-emptystate-content-maxwidth: calc(var(--global-size-macro-xxxxl) * 5); /* max-width of the insight empty state content area */
   --container-size-copilot-overlay-maxheight: calc(var(--global-size-macro-xxxxl) * 8); /* max-height of the copilot container overlay  */
   --container-size-drag-droptarget: var(--global-size-micro-xxs); /* drop target width or height */
+  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
+  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
+  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-generic-emptystate-illustration-primary-s: calc(var(--global-size-macro-m) * 5); /* Illustration size for small error and empty states */
   --container-size-generic-emptystate-illustration-primary-m: calc(var(--global-size-macro-m) * 6); /* Illustration size for medium error and empty states */
   --container-size-generic-emptystate-illustration-primary-l: calc(var(--global-size-macro-m) * 8); /* Illustration size for large error and empty states */
   --container-size-generic-emptystate-illustration-secondary: calc(var(--global-size-macro-m) + var(--button-size-icon-m)); /* Illustration size for secondary empty states */
-  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
-  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
-  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-icon-s: var(--global-size-icon-m);
   --container-size-icon-m: var(--global-size-icon-m);
   --container-size-icon-l: var(--global-size-icon-m); /* Deliberately referencing global M (20px). Accordion chevron. */

package/css/marketing/all.css CHANGED Viewed

@@ -1113,6 +1113,13 @@
   /* container component tokens */
   --container-size-carousel-mediaslide-minheight: 300; /* max height for media visual */
+  --container-size-dialog-max-width-xxs: 300;
+  --container-size-dialog-max-width-xs: 380;
+  --container-size-dialog-max-width-s: 540;
+  --container-size-dialog-max-width-m: 750;
+  --container-size-dialog-max-width-l: 850;
+  --container-size-dialog-max-width-xl: 960;
+  --container-size-dialog-max-width-xxl: 1080;
   --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
   --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
   --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
@@ -1196,13 +1203,13 @@
   --container-size-copilot-emptystate-content-maxwidth: calc(var(--global-size-macro-xxxxl) * 5); /* max-width of the insight empty state content area */
   --container-size-copilot-overlay-maxheight: calc(var(--global-size-macro-xxxxl) * 8); /* max-height of the copilot container overlay  */
   --container-size-drag-droptarget: var(--global-size-micro-xxs); /* drop target width or height */
+  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
+  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
+  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-generic-emptystate-illustration-primary-s: calc(var(--global-size-macro-m) * 5); /* Illustration size for small error and empty states */
   --container-size-generic-emptystate-illustration-primary-m: calc(var(--global-size-macro-m) * 6); /* Illustration size for medium error and empty states */
   --container-size-generic-emptystate-illustration-primary-l: calc(var(--global-size-macro-m) * 8); /* Illustration size for large error and empty states */
   --container-size-generic-emptystate-illustration-secondary: calc(var(--global-size-macro-m) + var(--button-size-icon-m)); /* Illustration size for secondary empty states */
-  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
-  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
-  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-icon-s: var(--global-size-icon-m);
   --container-size-icon-m: var(--global-size-icon-m);
   --container-size-icon-l: var(--global-size-icon-m); /* Deliberately referencing global M (20px). Accordion chevron. */

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

@@ -4,6 +4,13 @@
 :root {
   --container-size-carousel-mediaslide-minheight: 300; /* max height for media visual */
+  --container-size-dialog-max-width-xxs: 300;
+  --container-size-dialog-max-width-xs: 380;
+  --container-size-dialog-max-width-s: 540;
+  --container-size-dialog-max-width-m: 750;
+  --container-size-dialog-max-width-l: 850;
+  --container-size-dialog-max-width-xl: 960;
+  --container-size-dialog-max-width-xxl: 1080;
   --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
   --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
   --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
@@ -96,13 +103,13 @@
   --container-size-copilot-emptystate-content-maxwidth: calc(var(--global-size-macro-xxxxl) * 5); /* max-width of the insight empty state content area */
   --container-size-copilot-overlay-maxheight: calc(var(--global-size-macro-xxxxl) * 8); /* max-height of the copilot container overlay  */
   --container-size-drag-droptarget: var(--global-size-micro-xxs); /* drop target width or height */
+  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
+  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
+  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-generic-emptystate-illustration-primary-s: calc(var(--global-size-macro-m) * 5); /* Illustration size for small error and empty states */
   --container-size-generic-emptystate-illustration-primary-m: calc(var(--global-size-macro-m) * 6); /* Illustration size for medium error and empty states */
   --container-size-generic-emptystate-illustration-primary-l: calc(var(--global-size-macro-m) * 8); /* Illustration size for large error and empty states */
   --container-size-generic-emptystate-illustration-secondary: calc(var(--global-size-macro-m) + var(--button-size-icon-m)); /* Illustration size for secondary empty states */
-  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
-  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
-  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-icon-s: var(--global-size-icon-m);
   --container-size-icon-m: var(--global-size-icon-m);
   --container-size-icon-l: var(--global-size-icon-m); /* Deliberately referencing global M (20px). Accordion chevron. */

package/css/marketing/small/components/container.css CHANGED Viewed

@@ -4,6 +4,13 @@
 :root {
   --container-size-carousel-mediaslide-minheight: 300; /* max height for media visual */
+  --container-size-dialog-max-width-xxs: 300;
+  --container-size-dialog-max-width-xs: 380;
+  --container-size-dialog-max-width-s: 540;
+  --container-size-dialog-max-width-m: 750;
+  --container-size-dialog-max-width-l: 850;
+  --container-size-dialog-max-width-xl: 960;
+  --container-size-dialog-max-width-xxl: 1080;
   --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
   --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
   --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
@@ -96,13 +103,13 @@
   --container-size-copilot-emptystate-content-maxwidth: calc(var(--global-size-macro-xxxxl) * 5); /* max-width of the insight empty state content area */
   --container-size-copilot-overlay-maxheight: calc(var(--global-size-macro-xxxxl) * 8); /* max-height of the copilot container overlay  */
   --container-size-drag-droptarget: var(--global-size-micro-xxs); /* drop target width or height */
+  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
+  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
+  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-generic-emptystate-illustration-primary-s: calc(var(--global-size-macro-m) * 5); /* Illustration size for small error and empty states */
   --container-size-generic-emptystate-illustration-primary-m: calc(var(--global-size-macro-m) * 6); /* Illustration size for medium error and empty states */
   --container-size-generic-emptystate-illustration-primary-l: calc(var(--global-size-macro-m) * 8); /* Illustration size for large error and empty states */
   --container-size-generic-emptystate-illustration-secondary: calc(var(--global-size-macro-m) + var(--button-size-icon-m)); /* Illustration size for secondary empty states */
-  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
-  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
-  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-icon-s: var(--global-size-icon-m);
   --container-size-icon-m: var(--global-size-icon-m);
   --container-size-icon-l: var(--global-size-icon-m); /* Deliberately referencing global M (20px). Accordion chevron. */

package/css/product/all.css CHANGED Viewed

@@ -1113,6 +1113,13 @@
   /* container component tokens */
   --container-size-carousel-mediaslide-minheight: 300; /* max height for media visual */
+  --container-size-dialog-max-width-xxs: 300;
+  --container-size-dialog-max-width-xs: 380;
+  --container-size-dialog-max-width-s: 540;
+  --container-size-dialog-max-width-m: 750;
+  --container-size-dialog-max-width-l: 850;
+  --container-size-dialog-max-width-xl: 960;
+  --container-size-dialog-max-width-xxl: 1080;
   --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
   --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
   --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
@@ -1196,13 +1203,13 @@
   --container-size-copilot-emptystate-content-maxwidth: calc(var(--global-size-macro-xxxxl) * 5); /* max-width of the insight empty state content area */
   --container-size-copilot-overlay-maxheight: calc(var(--global-size-macro-xxxxl) * 8); /* max-height of the copilot container overlay  */
   --container-size-drag-droptarget: var(--global-size-micro-xxs); /* drop target width or height */
+  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
+  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
+  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-generic-emptystate-illustration-primary-s: calc(var(--global-size-macro-m) * 5); /* Illustration size for small error and empty states */
   --container-size-generic-emptystate-illustration-primary-m: calc(var(--global-size-macro-m) * 6); /* Illustration size for medium error and empty states */
   --container-size-generic-emptystate-illustration-primary-l: calc(var(--global-size-macro-m) * 8); /* Illustration size for large error and empty states */
   --container-size-generic-emptystate-illustration-secondary: calc(var(--global-size-macro-m) + var(--button-size-icon-m)); /* Illustration size for secondary empty states */
-  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
-  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
-  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-icon-s: var(--global-size-icon-m);
   --container-size-icon-m: var(--global-size-icon-m);
   --container-size-icon-l: var(--global-size-icon-m); /* Deliberately referencing global M (20px). Accordion chevron. */
@@ -2475,6 +2482,7 @@
   /* table component tokens */
   --table-color-header-subtle-bg-default: light-dark(var(--modes-color-none-light), var(--modes-color-none-dark));
+  --table-color-row-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
   --table-color-row-bg-default: light-dark(var(--modes-color-generic-bg-nought-light), var(--modes-color-generic-bg-nought-dark));
   --table-color-row-label-hover: light-dark(var(--modes-color-generic-content-extreme-light), var(--modes-color-generic-content-extreme-dark));
   --table-typography-heading-s: var(--global-typography-component-firm-s);
@@ -2486,35 +2494,34 @@
   --table-typography-label-s: var(--global-typography-component-firm-s);
   --table-typography-label-m: var(--global-typography-component-firm-m);
   --table-typography-label-l: var(--global-typography-component-firm-l);
+  --table-color-header-subtle-bg-alt: light-dark(var(--modes-color-interactive-monochrome-subtle-default-light), var(--modes-color-interactive-monochrome-subtle-default-dark)); /* header alt */
+  --table-color-header-subtle-bg-hover: light-dark(var(--modes-color-interactive-monochrome-hover-light), var(--modes-color-interactive-monochrome-hover-dark));
+  --table-color-header-subtle-label-default: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
+  --table-color-header-subtle-label-hover: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
+  --table-color-header-harsh-bg-alt: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark)); /* header alt */
+  --table-color-header-harsh-bg-default: light-dark(var(--modes-color-interactive-monochrome-default-alt-light), var(--modes-color-interactive-monochrome-default-alt-dark));
+  --table-color-header-harsh-bg-hover: light-dark(var(--modes-color-interactive-monochrome-hover-light), var(--modes-color-interactive-monochrome-hover-dark));
+  --table-color-header-harsh-label-hover: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
   --table-color-row-bg-activated: light-dark(var(--modes-color-interactive-primary-default-light), var(--modes-color-interactive-primary-default-dark));
-  --table-color-row-bg-active: light-dark(var(--modes-color-interactive-monochrome-active-light), var(--modes-color-interactive-monochrome-active-dark));
   --table-color-row-bg-alt: light-dark(var(--modes-color-generic-bg-delicate-light), var(--modes-color-generic-bg-delicate-dark)); /* Zebra stripes */
   --table-color-row-bg-alt2: light-dark(var(--modes-color-generic-bg-soft-light), var(--modes-color-generic-bg-soft-dark)); /* Zebra stripes combined with child rows. */
   --table-color-row-bg-alt3: light-dark(var(--modes-color-generic-bg-faint-light), var(--modes-color-generic-bg-faint-dark)); /* Child rows. */
   --table-color-row-bg-hover: light-dark(var(--modes-color-generic-bg-soft-light), var(--modes-color-generic-bg-soft-dark));
   --table-color-row-label-default: light-dark(var(--modes-color-generic-content-harsh-light), var(--modes-color-generic-content-harsh-dark));
   --table-color-footer-bg-default: light-dark(var(--modes-color-generic-bg-soft-light), var(--modes-color-generic-bg-soft-dark));
+  --table-color-footer-label-default: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
   --table-boxshadow-parentrow: var(--global-boxshadow-container-far);
   --table-boxshadow-firstchild: var(--global-boxshadow-inner-near);
   --table-boxshadow-column-sticky-left: var(--global-boxshadow-cleanedge-near-right); /* Right shadow on left hand sticky column. */
   --table-boxshadow-column-sticky-right: var(--global-boxshadow-cleanedge-near-left); /* Left shadow on right hand sticky column. */
   --table-boxshadow-row-dragging: var(--global-boxshadow-interactive-drag); /* dragging state for a table row */
-  --table-color-header-subtle-bg-alt: light-dark(var(--modes-color-interactive-monochrome-subtle-default-light), var(--modes-color-interactive-monochrome-subtle-default-dark)); /* header alt */
-  --table-color-header-subtle-bg-hover: light-dark(var(--modes-color-interactive-monochrome-hover-light), var(--modes-color-interactive-monochrome-hover-dark));
   --table-color-header-subtle-border-default: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark)); /* Header borders */
-  --table-color-header-subtle-label-default: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
-  --table-color-header-subtle-label-hover: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
-  --table-color-header-harsh-bg-alt: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark)); /* header alt */
-  --table-color-header-harsh-bg-default: light-dark(var(--modes-color-interactive-monochrome-default-alt-light), var(--modes-color-interactive-monochrome-default-alt-dark));
-  --table-color-header-harsh-bg-hover: light-dark(var(--modes-color-interactive-monochrome-hover-light), var(--modes-color-interactive-monochrome-hover-dark));
   --table-color-header-harsh-border-default: light-dark(var(--modes-color-generic-fg-soft-light), var(--modes-color-generic-fg-soft-dark));
   --table-color-header-harsh-label-default: light-dark(var(--modes-color-interactive-monochrome-with-default-light), var(--modes-color-interactive-monochrome-with-default-dark));
-  --table-color-header-harsh-label-hover: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
   --table-color-row-border-default: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark));
   --table-color-row-label-activated: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
   --table-color-row-label-active: light-dark(var(--modes-color-interactive-monochrome-with-active-light), var(--modes-color-interactive-monochrome-with-active-dark));
   --table-color-footer-border-default: light-dark(var(--modes-color-generic-fg-delicate-light), var(--modes-color-generic-fg-delicate-dark)); /* Header borders */
-  --table-color-footer-label-default: light-dark(var(--modes-color-interactive-monochrome-default-light), var(--modes-color-interactive-monochrome-default-dark));
   --table-radius-container: var(--global-radius-container-m); /* Table (parent container) */
   --table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border */
   --table-borderwidth-thick: var(--global-borderwidth-s); /* header border for subtle */

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

@@ -4,6 +4,13 @@
 :root {
   --container-size-carousel-mediaslide-minheight: 300; /* max height for media visual */
+  --container-size-dialog-max-width-xxs: 300;
+  --container-size-dialog-max-width-xs: 380;
+  --container-size-dialog-max-width-s: 540;
+  --container-size-dialog-max-width-m: 750;
+  --container-size-dialog-max-width-l: 850;
+  --container-size-dialog-max-width-xl: 960;
+  --container-size-dialog-max-width-xxl: 1080;
   --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
   --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
   --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
@@ -96,13 +103,13 @@
   --container-size-copilot-emptystate-content-maxwidth: calc(var(--global-size-macro-xxxxl) * 5); /* max-width of the insight empty state content area */
   --container-size-copilot-overlay-maxheight: calc(var(--global-size-macro-xxxxl) * 8); /* max-height of the copilot container overlay  */
   --container-size-drag-droptarget: var(--global-size-micro-xxs); /* drop target width or height */
+  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
+  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
+  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-generic-emptystate-illustration-primary-s: calc(var(--global-size-macro-m) * 5); /* Illustration size for small error and empty states */
   --container-size-generic-emptystate-illustration-primary-m: calc(var(--global-size-macro-m) * 6); /* Illustration size for medium error and empty states */
   --container-size-generic-emptystate-illustration-primary-l: calc(var(--global-size-macro-m) * 8); /* Illustration size for large error and empty states */
   --container-size-generic-emptystate-illustration-secondary: calc(var(--global-size-macro-m) + var(--button-size-icon-m)); /* Illustration size for secondary empty states */
-  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
-  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
-  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-icon-s: var(--global-size-icon-m);
   --container-size-icon-m: var(--global-size-icon-m);
   --container-size-icon-l: var(--global-size-icon-m); /* Deliberately referencing global M (20px). Accordion chevron. */

package/css/product/small/components/container.css CHANGED Viewed

@@ -4,6 +4,13 @@
 :root {
   --container-size-carousel-mediaslide-minheight: 300; /* max height for media visual */
+  --container-size-dialog-max-width-xxs: 300;
+  --container-size-dialog-max-width-xs: 380;
+  --container-size-dialog-max-width-s: 540;
+  --container-size-dialog-max-width-m: 750;
+  --container-size-dialog-max-width-l: 850;
+  --container-size-dialog-max-width-xl: 960;
+  --container-size-dialog-max-width-xxl: 1080;
   --container-opacity-carousel-hidden: 0.3; /* opacity applied to next and previous carousel slides */
   --container-opacity-dialog-dimmer: 0.4; /* dimmer opacity value */
   --container-opacity-drag-ghost: 0.5; /* drag ghost state opacity value */
@@ -96,13 +103,13 @@
   --container-size-copilot-emptystate-content-maxwidth: calc(var(--global-size-macro-xxxxl) * 5); /* max-width of the insight empty state content area */
   --container-size-copilot-overlay-maxheight: calc(var(--global-size-macro-xxxxl) * 8); /* max-height of the copilot container overlay  */
   --container-size-drag-droptarget: var(--global-size-micro-xxs); /* drop target width or height */
+  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
+  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
+  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-generic-emptystate-illustration-primary-s: calc(var(--global-size-macro-m) * 5); /* Illustration size for small error and empty states */
   --container-size-generic-emptystate-illustration-primary-m: calc(var(--global-size-macro-m) * 6); /* Illustration size for medium error and empty states */
   --container-size-generic-emptystate-illustration-primary-l: calc(var(--global-size-macro-m) * 8); /* Illustration size for large error and empty states */
   --container-size-generic-emptystate-illustration-secondary: calc(var(--global-size-macro-m) + var(--button-size-icon-m)); /* Illustration size for secondary empty states */
-  --container-size-drawer-closed-m: var(--global-size-macro-m); /* width for the closed drawer state */
-  --container-size-footer-m: var(--global-size-macro-xl); /* card and tile footers */
-  --container-size-footer-l: calc(var(--global-size-macro-xs) * 3); /* Dialog, sidebar and drawer footer max-height */
   --container-size-icon-s: var(--global-size-icon-m);
   --container-size-icon-m: var(--global-size-icon-m);
   --container-size-icon-l: var(--global-size-icon-m); /* Deliberately referencing global M (20px). Accordion chevron. */

package/css/product/small/components/table.css CHANGED Viewed

@@ -4,6 +4,7 @@
 :root {
   --table-color-header-subtle-bg-default: var(--modes-color-none);
+  --table-color-row-bg-active: var(--modes-color-interactive-monochrome-active);
   --table-color-row-bg-default: var(--modes-color-generic-bg-nought);
   --table-color-row-label-hover: var(--modes-color-generic-content-extreme);
   --table-typography-adaptive-heading-s: var(--global-typography-adaptive-component-firm-s);
@@ -24,35 +25,34 @@
   --table-typography-responsive-label-s: var(--global-typography-responsive-component-firm-s);
   --table-typography-responsive-label-m: var(--global-typography-responsive-component-firm-m);
   --table-typography-responsive-label-l: var(--global-typography-responsive-component-firm-l);
+  --table-color-header-subtle-bg-alt: var(--modes-color-interactive-monochrome-subtle-default); /* header alt */
+  --table-color-header-subtle-bg-hover: var(--modes-color-interactive-monochrome-hover);
+  --table-color-header-subtle-label-default: var(--modes-color-interactive-monochrome-default);
+  --table-color-header-subtle-label-hover: var(--modes-color-interactive-monochrome-default);
+  --table-color-header-harsh-bg-alt: var(--modes-color-interactive-monochrome-default); /* header alt */
+  --table-color-header-harsh-bg-default: var(--modes-color-interactive-monochrome-default-alt);
+  --table-color-header-harsh-bg-hover: var(--modes-color-interactive-monochrome-hover);
+  --table-color-header-harsh-label-hover: var(--modes-color-interactive-monochrome-default);
   --table-color-row-bg-activated: var(--modes-color-interactive-primary-default);
-  --table-color-row-bg-active: var(--modes-color-interactive-monochrome-active);
   --table-color-row-bg-alt: var(--modes-color-generic-bg-delicate); /* Zebra stripes */
   --table-color-row-bg-alt2: var(--modes-color-generic-bg-soft); /* Zebra stripes combined with child rows. */
   --table-color-row-bg-alt3: var(--modes-color-generic-bg-faint); /* Child rows. */
   --table-color-row-bg-hover: var(--modes-color-generic-bg-soft);
   --table-color-row-label-default: var(--modes-color-generic-content-harsh);
   --table-color-footer-bg-default: var(--modes-color-generic-bg-soft);
+  --table-color-footer-label-default: var(--modes-color-interactive-monochrome-default);
   --table-boxshadow-parentrow: var(--global-boxshadow-container-far);
   --table-boxshadow-firstchild: var(--global-boxshadow-inner-near);
   --table-boxshadow-column-sticky-left: var(--global-boxshadow-cleanedge-near-right); /* Right shadow on left hand sticky column. */
   --table-boxshadow-column-sticky-right: var(--global-boxshadow-cleanedge-near-left); /* Left shadow on right hand sticky column. */
   --table-boxshadow-row-dragging: var(--global-boxshadow-interactive-drag); /* dragging state for a table row */
-  --table-color-header-subtle-bg-alt: var(--modes-color-interactive-monochrome-subtle-default); /* header alt */
-  --table-color-header-subtle-bg-hover: var(--modes-color-interactive-monochrome-hover);
   --table-color-header-subtle-border-default: var(--modes-color-generic-fg-delicate); /* Header borders */
-  --table-color-header-subtle-label-default: var(--modes-color-interactive-monochrome-default);
-  --table-color-header-subtle-label-hover: var(--modes-color-interactive-monochrome-default);
-  --table-color-header-harsh-bg-alt: var(--modes-color-interactive-monochrome-default); /* header alt */
-  --table-color-header-harsh-bg-default: var(--modes-color-interactive-monochrome-default-alt);
-  --table-color-header-harsh-bg-hover: var(--modes-color-interactive-monochrome-hover);
   --table-color-header-harsh-border-default: var(--modes-color-generic-fg-soft);
   --table-color-header-harsh-label-default: var(--modes-color-interactive-monochrome-with-default);
-  --table-color-header-harsh-label-hover: var(--modes-color-interactive-monochrome-default);
   --table-color-row-border-default: var(--modes-color-generic-fg-delicate);
   --table-color-row-label-activated: var(--modes-color-interactive-monochrome-with-active);
   --table-color-row-label-active: var(--modes-color-interactive-monochrome-with-active);
   --table-color-footer-border-default: var(--modes-color-generic-fg-delicate); /* Header borders */
-  --table-color-footer-label-default: var(--modes-color-interactive-monochrome-default);
   --table-radius-container: var(--global-radius-container-m); /* Table (parent container) */
   --table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border */
   --table-borderwidth-thick: var(--global-borderwidth-s); /* header border for subtle */

package/ios/frozenproduct/large/dark/components/container.h CHANGED Viewed

@@ -66,16 +66,23 @@
 #define containerSizeCopilotEmptystateIllustration 200
 #define containerSizeCopilotEmptystateContentMaxwidth 600
 #define containerSizeCopilotOverlayMaxheight 960
+#define containerSizeDialogMaxWidthXxs 300
+#define containerSizeDialogMaxWidthXs 380
+#define containerSizeDialogMaxWidthS 540
+#define containerSizeDialogMaxWidthM 750
+#define containerSizeDialogMaxWidthL 850
+#define containerSizeDialogMaxWidthXl 960
+#define containerSizeDialogMaxWidthXxl 1080
 #define containerSizeDragDroptarget 2
-#define containerSizeGenericEmptystateIllustrationPrimaryS 200
-#define containerSizeGenericEmptystateIllustrationPrimaryM 240
-#define containerSizeGenericEmptystateIllustrationPrimaryL 320
-#define containerSizeGenericEmptystateIllustrationSecondary 60
 #define containerSizeDrawerMinwidth 288
 #define containerSizeDrawerMaxwidth 760
 #define containerSizeDrawerClosedM 40
 #define containerSizeFooterM 56
 #define containerSizeFooterL 72
+#define containerSizeGenericEmptystateIllustrationPrimaryS 200
+#define containerSizeGenericEmptystateIllustrationPrimaryM 240
+#define containerSizeGenericEmptystateIllustrationPrimaryL 320
+#define containerSizeGenericEmptystateIllustrationSecondary 60
 #define containerSizeIconS 20
 #define containerSizeIconM 20
 #define containerSizeIconL 20

package/ios/frozenproduct/large/light/components/container.h CHANGED Viewed

@@ -66,16 +66,23 @@
 #define containerSizeCopilotEmptystateIllustration 200
 #define containerSizeCopilotEmptystateContentMaxwidth 600
 #define containerSizeCopilotOverlayMaxheight 960
+#define containerSizeDialogMaxWidthXxs 300
+#define containerSizeDialogMaxWidthXs 380
+#define containerSizeDialogMaxWidthS 540
+#define containerSizeDialogMaxWidthM 750
+#define containerSizeDialogMaxWidthL 850
+#define containerSizeDialogMaxWidthXl 960
+#define containerSizeDialogMaxWidthXxl 1080
 #define containerSizeDragDroptarget 2
-#define containerSizeGenericEmptystateIllustrationPrimaryS 200
-#define containerSizeGenericEmptystateIllustrationPrimaryM 240
-#define containerSizeGenericEmptystateIllustrationPrimaryL 320
-#define containerSizeGenericEmptystateIllustrationSecondary 60
 #define containerSizeDrawerMinwidth 288
 #define containerSizeDrawerMaxwidth 760
 #define containerSizeDrawerClosedM 40
 #define containerSizeFooterM 56
 #define containerSizeFooterL 72
+#define containerSizeGenericEmptystateIllustrationPrimaryS 200
+#define containerSizeGenericEmptystateIllustrationPrimaryM 240
+#define containerSizeGenericEmptystateIllustrationPrimaryL 320
+#define containerSizeGenericEmptystateIllustrationSecondary 60
 #define containerSizeIconS 20
 #define containerSizeIconM 20
 #define containerSizeIconL 20

package/ios/frozenproduct/small/dark/components/container.h CHANGED Viewed

@@ -66,16 +66,23 @@
 #define containerSizeCopilotEmptystateIllustration 200
 #define containerSizeCopilotEmptystateContentMaxwidth 600
 #define containerSizeCopilotOverlayMaxheight 960
+#define containerSizeDialogMaxWidthXxs 300
+#define containerSizeDialogMaxWidthXs 380
+#define containerSizeDialogMaxWidthS 540
+#define containerSizeDialogMaxWidthM 750
+#define containerSizeDialogMaxWidthL 850
+#define containerSizeDialogMaxWidthXl 960
+#define containerSizeDialogMaxWidthXxl 1080
 #define containerSizeDragDroptarget 2
-#define containerSizeGenericEmptystateIllustrationPrimaryS 200
-#define containerSizeGenericEmptystateIllustrationPrimaryM 240
-#define containerSizeGenericEmptystateIllustrationPrimaryL 320
-#define containerSizeGenericEmptystateIllustrationSecondary 60
 #define containerSizeDrawerMinwidth 288
 #define containerSizeDrawerMaxwidth 760
 #define containerSizeDrawerClosedM 40
 #define containerSizeFooterM 56
 #define containerSizeFooterL 72
+#define containerSizeGenericEmptystateIllustrationPrimaryS 200
+#define containerSizeGenericEmptystateIllustrationPrimaryM 240
+#define containerSizeGenericEmptystateIllustrationPrimaryL 320
+#define containerSizeGenericEmptystateIllustrationSecondary 60
 #define containerSizeIconS 20
 #define containerSizeIconM 20
 #define containerSizeIconL 20

package/ios/frozenproduct/small/light/components/container.h CHANGED Viewed

@@ -66,16 +66,23 @@
 #define containerSizeCopilotEmptystateIllustration 200
 #define containerSizeCopilotEmptystateContentMaxwidth 600
 #define containerSizeCopilotOverlayMaxheight 960
+#define containerSizeDialogMaxWidthXxs 300
+#define containerSizeDialogMaxWidthXs 380
+#define containerSizeDialogMaxWidthS 540
+#define containerSizeDialogMaxWidthM 750
+#define containerSizeDialogMaxWidthL 850
+#define containerSizeDialogMaxWidthXl 960
+#define containerSizeDialogMaxWidthXxl 1080
 #define containerSizeDragDroptarget 2
-#define containerSizeGenericEmptystateIllustrationPrimaryS 200
-#define containerSizeGenericEmptystateIllustrationPrimaryM 240
-#define containerSizeGenericEmptystateIllustrationPrimaryL 320
-#define containerSizeGenericEmptystateIllustrationSecondary 60
 #define containerSizeDrawerMinwidth 288
 #define containerSizeDrawerMaxwidth 760
 #define containerSizeDrawerClosedM 40
 #define containerSizeFooterM 56
 #define containerSizeFooterL 72
+#define containerSizeGenericEmptystateIllustrationPrimaryS 200
+#define containerSizeGenericEmptystateIllustrationPrimaryM 240
+#define containerSizeGenericEmptystateIllustrationPrimaryL 320
+#define containerSizeGenericEmptystateIllustrationSecondary 60
 #define containerSizeIconS 20
 #define containerSizeIconM 20
 #define containerSizeIconL 20

package/ios/marketing/large/dark/components/container.h CHANGED Viewed

@@ -66,16 +66,23 @@
 #define containerSizeCopilotEmptystateIllustration 200
 #define containerSizeCopilotEmptystateContentMaxwidth 600
 #define containerSizeCopilotOverlayMaxheight 960
+#define containerSizeDialogMaxWidthXxs 300
+#define containerSizeDialogMaxWidthXs 380
+#define containerSizeDialogMaxWidthS 540
+#define containerSizeDialogMaxWidthM 750
+#define containerSizeDialogMaxWidthL 850
+#define containerSizeDialogMaxWidthXl 960
+#define containerSizeDialogMaxWidthXxl 1080
 #define containerSizeDragDroptarget 2
-#define containerSizeGenericEmptystateIllustrationPrimaryS 200
-#define containerSizeGenericEmptystateIllustrationPrimaryM 240
-#define containerSizeGenericEmptystateIllustrationPrimaryL 320
-#define containerSizeGenericEmptystateIllustrationSecondary 60
 #define containerSizeDrawerMinwidth 288
 #define containerSizeDrawerMaxwidth 760
 #define containerSizeDrawerClosedM 40
 #define containerSizeFooterM 56
 #define containerSizeFooterL 72
+#define containerSizeGenericEmptystateIllustrationPrimaryS 200
+#define containerSizeGenericEmptystateIllustrationPrimaryM 240
+#define containerSizeGenericEmptystateIllustrationPrimaryL 320
+#define containerSizeGenericEmptystateIllustrationSecondary 60
 #define containerSizeIconS 20
 #define containerSizeIconM 20
 #define containerSizeIconL 20

package/ios/marketing/large/light/components/container.h CHANGED Viewed

@@ -66,16 +66,23 @@
 #define containerSizeCopilotEmptystateIllustration 200
 #define containerSizeCopilotEmptystateContentMaxwidth 600
 #define containerSizeCopilotOverlayMaxheight 960
+#define containerSizeDialogMaxWidthXxs 300
+#define containerSizeDialogMaxWidthXs 380
+#define containerSizeDialogMaxWidthS 540
+#define containerSizeDialogMaxWidthM 750
+#define containerSizeDialogMaxWidthL 850
+#define containerSizeDialogMaxWidthXl 960
+#define containerSizeDialogMaxWidthXxl 1080
 #define containerSizeDragDroptarget 2
-#define containerSizeGenericEmptystateIllustrationPrimaryS 200
-#define containerSizeGenericEmptystateIllustrationPrimaryM 240
-#define containerSizeGenericEmptystateIllustrationPrimaryL 320
-#define containerSizeGenericEmptystateIllustrationSecondary 60
 #define containerSizeDrawerMinwidth 288
 #define containerSizeDrawerMaxwidth 760
 #define containerSizeDrawerClosedM 40
 #define containerSizeFooterM 56
 #define containerSizeFooterL 72
+#define containerSizeGenericEmptystateIllustrationPrimaryS 200
+#define containerSizeGenericEmptystateIllustrationPrimaryM 240
+#define containerSizeGenericEmptystateIllustrationPrimaryL 320
+#define containerSizeGenericEmptystateIllustrationSecondary 60
 #define containerSizeIconS 20
 #define containerSizeIconM 20
 #define containerSizeIconL 20

package/ios/marketing/small/dark/components/container.h CHANGED Viewed

@@ -66,16 +66,23 @@
 #define containerSizeCopilotEmptystateIllustration 200
 #define containerSizeCopilotEmptystateContentMaxwidth 600
 #define containerSizeCopilotOverlayMaxheight 960
+#define containerSizeDialogMaxWidthXxs 300
+#define containerSizeDialogMaxWidthXs 380
+#define containerSizeDialogMaxWidthS 540
+#define containerSizeDialogMaxWidthM 750
+#define containerSizeDialogMaxWidthL 850
+#define containerSizeDialogMaxWidthXl 960
+#define containerSizeDialogMaxWidthXxl 1080
 #define containerSizeDragDroptarget 2
-#define containerSizeGenericEmptystateIllustrationPrimaryS 200
-#define containerSizeGenericEmptystateIllustrationPrimaryM 240
-#define containerSizeGenericEmptystateIllustrationPrimaryL 320
-#define containerSizeGenericEmptystateIllustrationSecondary 60
 #define containerSizeDrawerMinwidth 288
 #define containerSizeDrawerMaxwidth 760
 #define containerSizeDrawerClosedM 40
 #define containerSizeFooterM 56
 #define containerSizeFooterL 72
+#define containerSizeGenericEmptystateIllustrationPrimaryS 200
+#define containerSizeGenericEmptystateIllustrationPrimaryM 240
+#define containerSizeGenericEmptystateIllustrationPrimaryL 320
+#define containerSizeGenericEmptystateIllustrationSecondary 60
 #define containerSizeIconS 20
 #define containerSizeIconM 20
 #define containerSizeIconL 20

package/ios/marketing/small/light/components/container.h CHANGED Viewed

@@ -66,16 +66,23 @@
 #define containerSizeCopilotEmptystateIllustration 200
 #define containerSizeCopilotEmptystateContentMaxwidth 600
 #define containerSizeCopilotOverlayMaxheight 960
+#define containerSizeDialogMaxWidthXxs 300
+#define containerSizeDialogMaxWidthXs 380
+#define containerSizeDialogMaxWidthS 540
+#define containerSizeDialogMaxWidthM 750
+#define containerSizeDialogMaxWidthL 850
+#define containerSizeDialogMaxWidthXl 960
+#define containerSizeDialogMaxWidthXxl 1080
 #define containerSizeDragDroptarget 2
-#define containerSizeGenericEmptystateIllustrationPrimaryS 200
-#define containerSizeGenericEmptystateIllustrationPrimaryM 240
-#define containerSizeGenericEmptystateIllustrationPrimaryL 320
-#define containerSizeGenericEmptystateIllustrationSecondary 60
 #define containerSizeDrawerMinwidth 288
 #define containerSizeDrawerMaxwidth 760
 #define containerSizeDrawerClosedM 40
 #define containerSizeFooterM 56
 #define containerSizeFooterL 72
+#define containerSizeGenericEmptystateIllustrationPrimaryS 200
+#define containerSizeGenericEmptystateIllustrationPrimaryM 240
+#define containerSizeGenericEmptystateIllustrationPrimaryL 320
+#define containerSizeGenericEmptystateIllustrationSecondary 60
 #define containerSizeIconS 20
 #define containerSizeIconM 20
 #define containerSizeIconL 20