@sage/design-tokens 14.6.0 → 14.8.0

package/json/nested/frozenproduct/small/light/components/container.json

@@ -100,9 +100,31 @@
           "maxheight": 960
         }
       },
+      "dialog": {
+        "maxWidth": {
+          "XXS": "300",
+          "XS": "380",
+          "S": "540",
+          "M": "750",
+          "L": "850",
+          "XL": "960",
+          "XXL": "1080"
+        }
+      },
       "drag": {
         "droptarget": 2
       },
+      "drawer": {
+        "minwidth": 288,
+        "maxwidth": 760,
+        "closed": {
+          "M": 40
+        }
+      },
+      "footer": {
+        "M": 56,
+        "L": 72
+      },
       "generic": {
         "emptystate": {
           "illustration": {
@@ -115,17 +137,6 @@
           }
         }
       },
-      "drawer": {
-        "minwidth": 288,
-        "maxwidth": 760,
-        "closed": {
-          "M": 40
-        }
-      },
-      "footer": {
-        "M": 56,
-        "L": 72
-      },
       "icon": {
         "S": 20,
         "M": 20,

package/json/nested/frozenproduct/small/light/components/table.json

@@ -132,7 +132,8 @@
     },
     "borderwidth": {
       "thin": 1,
-      "thick": 2
+      "medium": 2,
+      "thick": 3
     },
     "space": {
       "none": 0,

package/json/nested/marketing/large/dark/components/container.json

@@ -100,9 +100,31 @@
           "maxheight": 960
         }
       },
+      "dialog": {
+        "maxWidth": {
+          "XXS": "300",
+          "XS": "380",
+          "S": "540",
+          "M": "750",
+          "L": "850",
+          "XL": "960",
+          "XXL": "1080"
+        }
+      },
       "drag": {
         "droptarget": 2
       },
+      "drawer": {
+        "minwidth": 288,
+        "maxwidth": 760,
+        "closed": {
+          "M": 40
+        }
+      },
+      "footer": {
+        "M": 56,
+        "L": 72
+      },
       "generic": {
         "emptystate": {
           "illustration": {
@@ -115,17 +137,6 @@
           }
         }
       },
-      "drawer": {
-        "minwidth": 288,
-        "maxwidth": 760,
-        "closed": {
-          "M": 40
-        }
-      },
-      "footer": {
-        "M": 56,
-        "L": 72
-      },
       "icon": {
         "S": 20,
         "M": 20,

package/json/nested/marketing/large/dark/components/table.json

@@ -132,7 +132,8 @@
     },
     "borderwidth": {
       "thin": 1,
-      "thick": 2
+      "medium": 2,
+      "thick": 3
     },
     "space": {
       "none": 0,

package/json/nested/marketing/large/light/components/container.json

@@ -100,9 +100,31 @@
           "maxheight": 960
         }
       },
+      "dialog": {
+        "maxWidth": {
+          "XXS": "300",
+          "XS": "380",
+          "S": "540",
+          "M": "750",
+          "L": "850",
+          "XL": "960",
+          "XXL": "1080"
+        }
+      },
       "drag": {
         "droptarget": 2
       },
+      "drawer": {
+        "minwidth": 288,
+        "maxwidth": 760,
+        "closed": {
+          "M": 40
+        }
+      },
+      "footer": {
+        "M": 56,
+        "L": 72
+      },
       "generic": {
         "emptystate": {
           "illustration": {
@@ -115,17 +137,6 @@
           }
         }
       },
-      "drawer": {
-        "minwidth": 288,
-        "maxwidth": 760,
-        "closed": {
-          "M": 40
-        }
-      },
-      "footer": {
-        "M": 56,
-        "L": 72
-      },
       "icon": {
         "S": 20,
         "M": 20,

package/json/nested/marketing/large/light/components/table.json

@@ -132,7 +132,8 @@
     },
     "borderwidth": {
       "thin": 1,
-      "thick": 2
+      "medium": 2,
+      "thick": 3
     },
     "space": {
       "none": 0,

package/json/nested/marketing/small/dark/components/container.json

@@ -100,9 +100,31 @@
           "maxheight": 960
         }
       },
+      "dialog": {
+        "maxWidth": {
+          "XXS": "300",
+          "XS": "380",
+          "S": "540",
+          "M": "750",
+          "L": "850",
+          "XL": "960",
+          "XXL": "1080"
+        }
+      },
       "drag": {
         "droptarget": 2
       },
+      "drawer": {
+        "minwidth": 288,
+        "maxwidth": 760,
+        "closed": {
+          "M": 40
+        }
+      },
+      "footer": {
+        "M": 56,
+        "L": 72
+      },
       "generic": {
         "emptystate": {
           "illustration": {
@@ -115,17 +137,6 @@
           }
         }
       },
-      "drawer": {
-        "minwidth": 288,
-        "maxwidth": 760,
-        "closed": {
-          "M": 40
-        }
-      },
-      "footer": {
-        "M": 56,
-        "L": 72
-      },
       "icon": {
         "S": 20,
         "M": 20,

package/json/nested/marketing/small/dark/components/table.json

@@ -132,7 +132,8 @@
     },
     "borderwidth": {
       "thin": 1,
-      "thick": 2
+      "medium": 2,
+      "thick": 3
     },
     "space": {
       "none": 0,

package/json/nested/marketing/small/light/components/container.json

@@ -100,9 +100,31 @@
           "maxheight": 960
         }
       },
+      "dialog": {
+        "maxWidth": {
+          "XXS": "300",
+          "XS": "380",
+          "S": "540",
+          "M": "750",
+          "L": "850",
+          "XL": "960",
+          "XXL": "1080"
+        }
+      },
       "drag": {
         "droptarget": 2
       },
+      "drawer": {
+        "minwidth": 288,
+        "maxwidth": 760,
+        "closed": {
+          "M": 40
+        }
+      },
+      "footer": {
+        "M": 56,
+        "L": 72
+      },
       "generic": {
         "emptystate": {
           "illustration": {
@@ -115,17 +137,6 @@
           }
         }
       },
-      "drawer": {
-        "minwidth": 288,
-        "maxwidth": 760,
-        "closed": {
-          "M": 40
-        }
-      },
-      "footer": {
-        "M": 56,
-        "L": 72
-      },
       "icon": {
         "S": 20,
         "M": 20,

package/json/nested/marketing/small/light/components/table.json

@@ -132,7 +132,8 @@
     },
     "borderwidth": {
       "thin": 1,
-      "thick": 2
+      "medium": 2,
+      "thick": 3
     },
     "space": {
       "none": 0,

package/json/nested/product/large/dark/components/container.json

@@ -100,9 +100,31 @@
           "maxheight": 960
         }
       },
+      "dialog": {
+        "maxWidth": {
+          "XXS": "300",
+          "XS": "380",
+          "S": "540",
+          "M": "750",
+          "L": "850",
+          "XL": "960",
+          "XXL": "1080"
+        }
+      },
       "drag": {
         "droptarget": 2
       },
+      "drawer": {
+        "minwidth": 288,
+        "maxwidth": 760,
+        "closed": {
+          "M": 40
+        }
+      },
+      "footer": {
+        "M": 56,
+        "L": 72
+      },
       "generic": {
         "emptystate": {
           "illustration": {
@@ -115,17 +137,6 @@
           }
         }
       },
-      "drawer": {
-        "minwidth": 288,
-        "maxwidth": 760,
-        "closed": {
-          "M": 40
-        }
-      },
-      "footer": {
-        "M": 56,
-        "L": 72
-      },
       "icon": {
         "S": 20,
         "M": 20,

package/json/nested/product/large/dark/components/table.json

@@ -132,7 +132,8 @@
     },
     "borderwidth": {
       "thin": 1,
-      "thick": 2
+      "medium": 2,
+      "thick": 3
     },
     "space": {
       "none": 0,

package/json/nested/product/large/light/components/container.json

@@ -100,9 +100,31 @@
           "maxheight": 960
         }
       },
+      "dialog": {
+        "maxWidth": {
+          "XXS": "300",
+          "XS": "380",
+          "S": "540",
+          "M": "750",
+          "L": "850",
+          "XL": "960",
+          "XXL": "1080"
+        }
+      },
       "drag": {
         "droptarget": 2
       },
+      "drawer": {
+        "minwidth": 288,
+        "maxwidth": 760,
+        "closed": {
+          "M": 40
+        }
+      },
+      "footer": {
+        "M": 56,
+        "L": 72
+      },
       "generic": {
         "emptystate": {
           "illustration": {
@@ -115,17 +137,6 @@
           }
         }
       },
-      "drawer": {
-        "minwidth": 288,
-        "maxwidth": 760,
-        "closed": {
-          "M": 40
-        }
-      },
-      "footer": {
-        "M": 56,
-        "L": 72
-      },
       "icon": {
         "S": 20,
         "M": 20,

package/json/nested/product/large/light/components/table.json

@@ -132,7 +132,8 @@
     },
     "borderwidth": {
       "thin": 1,
-      "thick": 2
+      "medium": 2,
+      "thick": 3
     },
     "space": {
       "none": 0,

package/json/nested/product/small/dark/components/container.json

@@ -100,9 +100,31 @@
           "maxheight": 960
         }
       },
+      "dialog": {
+        "maxWidth": {
+          "XXS": "300",
+          "XS": "380",
+          "S": "540",
+          "M": "750",
+          "L": "850",
+          "XL": "960",
+          "XXL": "1080"
+        }
+      },
       "drag": {
         "droptarget": 2
       },
+      "drawer": {
+        "minwidth": 288,
+        "maxwidth": 760,
+        "closed": {
+          "M": 40
+        }
+      },
+      "footer": {
+        "M": 56,
+        "L": 72
+      },
       "generic": {
         "emptystate": {
           "illustration": {
@@ -115,17 +137,6 @@
           }
         }
       },
-      "drawer": {
-        "minwidth": 288,
-        "maxwidth": 760,
-        "closed": {
-          "M": 40
-        }
-      },
-      "footer": {
-        "M": 56,
-        "L": 72
-      },
       "icon": {
         "S": 20,
         "M": 20,

package/json/nested/product/small/dark/components/table.json

@@ -132,7 +132,8 @@
     },
     "borderwidth": {
       "thin": 1,
-      "thick": 2
+      "medium": 2,
+      "thick": 3
     },
     "space": {
       "none": 0,

package/json/nested/product/small/light/components/container.json

@@ -100,9 +100,31 @@
           "maxheight": 960
         }
       },
+      "dialog": {
+        "maxWidth": {
+          "XXS": "300",
+          "XS": "380",
+          "S": "540",
+          "M": "750",
+          "L": "850",
+          "XL": "960",
+          "XXL": "1080"
+        }
+      },
       "drag": {
         "droptarget": 2
       },
+      "drawer": {
+        "minwidth": 288,
+        "maxwidth": 760,
+        "closed": {
+          "M": 40
+        }
+      },
+      "footer": {
+        "M": 56,
+        "L": 72
+      },
       "generic": {
         "emptystate": {
           "illustration": {
@@ -115,17 +137,6 @@
           }
         }
       },
-      "drawer": {
-        "minwidth": 288,
-        "maxwidth": 760,
-        "closed": {
-          "M": 40
-        }
-      },
-      "footer": {
-        "M": 56,
-        "L": 72
-      },
       "icon": {
         "S": 20,
         "M": 20,

package/json/nested/product/small/light/components/table.json

@@ -132,7 +132,8 @@
     },
     "borderwidth": {
       "thin": 1,
-      "thick": 2
+      "medium": 2,
+      "thick": 3
     },
     "space": {
       "none": 0,

package/package.json

@@ -6,7 +6,7 @@
   },
   "description": "Design tokens for the Sage Design System.",
   "author": "The Sage Group plc",
-  "version": "14.6.0",
+  "version": "14.8.0",
   "license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
   "tags": [
     "design tokens",

package/scss/frozenproduct/large/components/container.scss

@@ -6,6 +6,13 @@
 // Do not edit directly, this file was auto-generated.
 
 $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
@@ -98,13 +105,13 @@ $container-size-copilot-emptystate-illustration: $global-size-macro-m * 5; // Il
 $container-size-copilot-emptystate-content-maxwidth: $global-size-macro-xxxxl * 5; // max-width of the insight empty state content area
 $container-size-copilot-overlay-maxheight: $global-size-macro-xxxxl * 8; // max-height of the copilot container overlay 
 $container-size-drag-droptarget: $global-size-micro-xxs; // drop target width or height
+$container-size-drawer-closed-m: $global-size-macro-m; // width for the closed drawer state
+$container-size-footer-m: $global-size-macro-xl; // card and tile footers
+$container-size-footer-l: $global-size-macro-xs * 3; // Dialog, sidebar and drawer footer max-height
 $container-size-generic-emptystate-illustration-primary-s: $global-size-macro-m * 5; // Illustration size for small error and empty states
 $container-size-generic-emptystate-illustration-primary-m: $global-size-macro-m * 6; // Illustration size for medium error and empty states
 $container-size-generic-emptystate-illustration-primary-l: $global-size-macro-m * 8; // Illustration size for large error and empty states
 $container-size-generic-emptystate-illustration-secondary: $global-size-macro-m + $button-size-icon-m; // Illustration size for secondary empty states
-$container-size-drawer-closed-m: $global-size-macro-m; // width for the closed drawer state
-$container-size-footer-m: $global-size-macro-xl; // card and tile footers
-$container-size-footer-l: $global-size-macro-xs * 3; // Dialog, sidebar and drawer footer max-height
 $container-size-icon-s: $global-size-icon-m;
 $container-size-icon-m: $global-size-icon-m;
 $container-size-icon-l: $global-size-icon-m; // Deliberately referencing global M (20px). Accordion chevron.

package/scss/frozenproduct/large/components/table.scss

@@ -56,8 +56,9 @@ $table-color-row-label-active: $modes-color-interactive-monochrome-with-active;
 $table-color-footer-border-default: $modes-color-generic-fg-delicate; // Header borders
 $table-color-footer-label-default: $modes-color-interactive-monochrome-default;
 $table-radius-container: $global-radius-container-m; // Table (parent container)
-$table-borderwidth-thin: $global-borderwidth-xs; // Table border
-$table-borderwidth-thick: $global-borderwidth-s; // header border for subtle
+$table-borderwidth-thin: $global-borderwidth-xs; // Table border. Optional choice of cell border width.
+$table-borderwidth-medium: $global-borderwidth-s; // Header border for subtle. Optional choice of cell border width.
+$table-borderwidth-thick: $global-borderwidth-m; // Optional choice of cell border width.
 $table-space-none: $global-space-none;
 $table-space-yg: $global-space-micro-s; // space between table and pagination
 $table-space-row-x-xs: $global-space-micro-l; // Left and right padding inside XS row cells