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

@sage/design-tokens 14.6.0 → 14.8.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 (248) 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. */
@@ -2516,8 +2523,9 @@
   --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 */
+  --table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border. Optional choice of cell border width. */
+  --table-borderwidth-medium: var(--global-borderwidth-s); /* Header border for subtle. Optional choice of cell border width. */
+  --table-borderwidth-thick: var(--global-borderwidth-m); /* Optional choice of cell border width. */
   --table-space-none: var(--global-space-none);
   --table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
   --table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */

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/large/components/table.css CHANGED Viewed

@@ -54,8 +54,9 @@
   --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 */
+  --table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border. Optional choice of cell border width. */
+  --table-borderwidth-medium: var(--global-borderwidth-s); /* Header border for subtle. Optional choice of cell border width. */
+  --table-borderwidth-thick: var(--global-borderwidth-m); /* Optional choice of cell border width. */
   --table-space-none: var(--global-space-none);
   --table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
   --table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */

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/frozenproduct/small/components/table.css CHANGED Viewed

@@ -54,8 +54,9 @@
   --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 */
+  --table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border. Optional choice of cell border width. */
+  --table-borderwidth-medium: var(--global-borderwidth-s); /* Header border for subtle. Optional choice of cell border width. */
+  --table-borderwidth-thick: var(--global-borderwidth-m); /* Optional choice of cell border width. */
   --table-space-none: var(--global-space-none);
   --table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
   --table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */

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. */
@@ -2516,8 +2523,9 @@
   --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 */
+  --table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border. Optional choice of cell border width. */
+  --table-borderwidth-medium: var(--global-borderwidth-s); /* Header border for subtle. Optional choice of cell border width. */
+  --table-borderwidth-thick: var(--global-borderwidth-m); /* Optional choice of cell border width. */
   --table-space-none: var(--global-space-none);
   --table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
   --table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */

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/large/components/table.css CHANGED Viewed

@@ -54,8 +54,9 @@
   --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 */
+  --table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border. Optional choice of cell border width. */
+  --table-borderwidth-medium: var(--global-borderwidth-s); /* Header border for subtle. Optional choice of cell border width. */
+  --table-borderwidth-thick: var(--global-borderwidth-m); /* Optional choice of cell border width. */
   --table-space-none: var(--global-space-none);
   --table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
   --table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */

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/marketing/small/components/table.css CHANGED Viewed

@@ -54,8 +54,9 @@
   --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 */
+  --table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border. Optional choice of cell border width. */
+  --table-borderwidth-medium: var(--global-borderwidth-s); /* Header border for subtle. Optional choice of cell border width. */
+  --table-borderwidth-thick: var(--global-borderwidth-m); /* Optional choice of cell border width. */
   --table-space-none: var(--global-space-none);
   --table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
   --table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */

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. */
@@ -2516,8 +2523,9 @@
   --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 */
+  --table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border. Optional choice of cell border width. */
+  --table-borderwidth-medium: var(--global-borderwidth-s); /* Header border for subtle. Optional choice of cell border width. */
+  --table-borderwidth-thick: var(--global-borderwidth-m); /* Optional choice of cell border width. */
   --table-space-none: var(--global-space-none);
   --table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
   --table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */

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/large/components/table.css CHANGED Viewed

@@ -54,8 +54,9 @@
   --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 */
+  --table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border. Optional choice of cell border width. */
+  --table-borderwidth-medium: var(--global-borderwidth-s); /* Header border for subtle. Optional choice of cell border width. */
+  --table-borderwidth-thick: var(--global-borderwidth-m); /* Optional choice of cell border width. */
   --table-space-none: var(--global-space-none);
   --table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
   --table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */

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

@@ -54,8 +54,9 @@
   --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 */
+  --table-borderwidth-thin: var(--global-borderwidth-xs); /* Table border. Optional choice of cell border width. */
+  --table-borderwidth-medium: var(--global-borderwidth-s); /* Header border for subtle. Optional choice of cell border width. */
+  --table-borderwidth-thick: var(--global-borderwidth-m); /* Optional choice of cell border width. */
   --table-space-none: var(--global-space-none);
   --table-space-yg: var(--global-space-micro-s); /* space between table and pagination */
   --table-space-row-x-xs: var(--global-space-micro-l); /* Left and right padding inside XS row cells */

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/dark/components/table.h CHANGED Viewed

@@ -43,7 +43,8 @@
 #define tableBoxshadowColumnStickyRight [object Object],[object Object]
 #define tableBoxshadowRowDragging [object Object],[object Object]
 #define tableBorderwidthThin 1
-#define tableBorderwidthThick 2
+#define tableBorderwidthMedium 2
+#define tableBorderwidthThick 3
 #define tableSpaceNone 0
 #define tableSpaceYg 4
 #define tableSpaceRowXXs 8

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/large/light/components/table.h CHANGED Viewed

@@ -43,7 +43,8 @@
 #define tableBoxshadowColumnStickyRight [object Object],[object Object]
 #define tableBoxshadowRowDragging [object Object],[object Object]
 #define tableBorderwidthThin 1
-#define tableBorderwidthThick 2
+#define tableBorderwidthMedium 2
+#define tableBorderwidthThick 3
 #define tableSpaceNone 0
 #define tableSpaceYg 4
 #define tableSpaceRowXXs 8

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/dark/components/table.h CHANGED Viewed

@@ -43,7 +43,8 @@
 #define tableBoxshadowColumnStickyRight [object Object],[object Object]
 #define tableBoxshadowRowDragging [object Object],[object Object]
 #define tableBorderwidthThin 1
-#define tableBorderwidthThick 2
+#define tableBorderwidthMedium 2
+#define tableBorderwidthThick 3
 #define tableSpaceNone 0
 #define tableSpaceYg 4
 #define tableSpaceRowXXs 8

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/frozenproduct/small/light/components/table.h CHANGED Viewed

@@ -43,7 +43,8 @@
 #define tableBoxshadowColumnStickyRight [object Object],[object Object]
 #define tableBoxshadowRowDragging [object Object],[object Object]
 #define tableBorderwidthThin 1
-#define tableBorderwidthThick 2
+#define tableBorderwidthMedium 2
+#define tableBorderwidthThick 3
 #define tableSpaceNone 0
 #define tableSpaceYg 4
 #define tableSpaceRowXXs 8

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/dark/components/table.h CHANGED Viewed

@@ -43,7 +43,8 @@
 #define tableBoxshadowColumnStickyRight [object Object],[object Object]
 #define tableBoxshadowRowDragging [object Object],[object Object]
 #define tableBorderwidthThin 1
-#define tableBorderwidthThick 2
+#define tableBorderwidthMedium 2
+#define tableBorderwidthThick 3
 #define tableSpaceNone 0
 #define tableSpaceYg 4
 #define tableSpaceRowXXs 8