npm - @esri/calcite-design-tokens - Versions diffs - 3.2.0-next.2 → 3.2.0-next.4 - Mend

@esri/calcite-design-tokens 3.2.0-next.2 → 3.2.0-next.4

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 (12) hide show

package/dist/css/semantic.css CHANGED Viewed

@@ -4,8 +4,6 @@
  */
 :root {
-  --calcite-container-size-height-xxs-min: 0; /** Small handheld devices and mini-windows */
-  --calcite-container-size-width-xxs-min: 0; /** Small handheld devices and mini-windows */
   --calcite-border-width-none: 0;
   --calcite-border-width-sm: 1px;
   --calcite-border-width-md: 2px;
@@ -113,26 +111,6 @@
   --calcite-z-index-modal: 800;
   --calcite-z-index-popup: 900;
   --calcite-z-index-tooltip: 901;
-  --calcite-container-size-height-xxs-max: 154px; /** Small handheld devices and mini-windows */
-  --calcite-container-size-height-xs-min: 155px; /** Handheld devices */
-  --calcite-container-size-height-xs-max: 328px; /** Handheld devices */
-  --calcite-container-size-height-sm-min: 329px; /** Small tablets */
-  --calcite-container-size-height-sm-max: 504px; /** Small tablets */
-  --calcite-container-size-height-md-min: 505px; /** Small laptops */
-  --calcite-container-size-height-md-max: 678px; /** Small laptops */
-  --calcite-container-size-height-lg-min: 679px; /** Large laptops and desktop computers */
-  --calcite-container-size-height-lg-max: 854px; /** Large laptops and desktop computers */
-  --calcite-container-size-height-xl-min: 855px; /** Projectors and televisions */
-  --calcite-container-size-width-xxs-max: 320px; /** Small handheld devices and mini-windows */
-  --calcite-container-size-width-xs-min: 321px; /** Handheld devices */
-  --calcite-container-size-width-xs-max: 476px; /** Handheld devices */
-  --calcite-container-size-width-sm-min: 477px; /** Small tablets */
-  --calcite-container-size-width-sm-max: 768px; /** Small tablets */
-  --calcite-container-size-width-md-min: 769px; /** Small laptops */
-  --calcite-container-size-width-md-max: 1152px; /** Small laptops */
-  --calcite-container-size-width-lg-min: 1153px; /** Large laptops and desktop computers */
-  --calcite-container-size-width-lg-max: 1440px; /** Large laptops and desktop computers */
-  --calcite-container-size-width-xl-min: 1441px; /** Projectors and televisions */
   --calcite-corner-radius: var(--calcite-corner-radius-none);
   --calcite-shadow-none: 0 0 0 0 rgba(0, 0, 0, 0);
   --calcite-shadow-sm: 0 2px 8px 0 rgba(0, 0, 0, 0.04), 0 4px 16px 0 rgba(0, 0, 0, 0.08);

package/dist/docs/core.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": 1750434753698,
+  "timestamp": 1750922436658,
   "tokens": [
     {
       "key": "{core.color.neutral.blk-000}",

package/dist/docs/dark.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": 1750434751799,
+  "timestamp": 1750922434845,
   "tokens": [
     {
       "key": "{semantic.color.background.default}",

package/dist/docs/global.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": 1750434753475,
+  "timestamp": 1750922436442,
   "tokens": [
     {
       "key": "{semantic.color.background.default}",

package/dist/docs/light.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": 1750434752650,
+  "timestamp": 1750922435635,
   "tokens": [
     {
       "key": "{semantic.color.background.default}",

package/dist/docs/semantic.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": 1750434753618,
+  "timestamp": 1750922436584,
   "tokens": [
     {
       "key": "{semantic.border.width.none}",
@@ -109,484 +109,6 @@
       "name": "Border Width Lg",
       "path": ["semantic", "border", "width", "lg"]
     },
-    {
-      "key": "{semantic.container-size.height.xxs}",
-      "value": "{\"min\":\"0\",\"max\":\"154px\"}",
-      "type": "dimension",
-      "description": "Small handheld devices and mini-windows",
-      "attributes": {
-        "category": "breakpoint",
-        "type": "dimension",
-        "item": "height",
-        "subitem": "xxs",
-        "value": {
-          "min": "0",
-          "max": "154px"
-        },
-        "description": "Small handheld devices and mini-windows",
-        "filePath": "src/tokens/semantic/container-size.json",
-        "isSource": true,
-        "key": "{semantic.container-size.height.xxs}",
-        "name": "calcite-semantic-container-size-height-xxs",
-        "path": ["semantic", "container-size", "height", "xxs"],
-        "comment": "Small handheld devices and mini-windows",
-        "names": {
-          "scss": "$calcite-container-size-height-xxs",
-          "css": "var(--calcite-container-size-height-xxs)",
-          "js": "semantic.container-size.height.xxs",
-          "docs": "semantic.container-size.height.xxs",
-          "es6": "calciteContainerSizeHeightXxs"
-        },
-        "calcite-schema": {
-          "system": "calcite",
-          "tier": "semantic",
-          "type": "dimension"
-        }
-      },
-      "filePath": "src/tokens/semantic/container-size.json",
-      "isSource": true,
-      "name": "Container Size Height Xxs",
-      "path": ["semantic", "container-size", "height", "xxs"],
-      "comment": "Small handheld devices and mini-windows"
-    },
-    {
-      "key": "{semantic.container-size.height.xs}",
-      "value": "{\"min\":\"155px\",\"max\":\"328px\"}",
-      "type": "dimension",
-      "description": "Handheld devices",
-      "attributes": {
-        "category": "breakpoint",
-        "type": "dimension",
-        "item": "height",
-        "subitem": "xs",
-        "value": {
-          "min": "154px + 1",
-          "max": "328px"
-        },
-        "description": "Handheld devices",
-        "filePath": "src/tokens/semantic/container-size.json",
-        "isSource": true,
-        "key": "{semantic.container-size.height.xs}",
-        "name": "calcite-semantic-container-size-height-xs",
-        "path": ["semantic", "container-size", "height", "xs"],
-        "comment": "Handheld devices",
-        "names": {
-          "scss": "$calcite-container-size-height-xs",
-          "css": "var(--calcite-container-size-height-xs)",
-          "js": "semantic.container-size.height.xs",
-          "docs": "semantic.container-size.height.xs",
-          "es6": "calciteContainerSizeHeightXs"
-        },
-        "calcite-schema": {
-          "system": "calcite",
-          "tier": "semantic",
-          "type": "dimension"
-        }
-      },
-      "filePath": "src/tokens/semantic/container-size.json",
-      "isSource": true,
-      "name": "Container Size Height Xs",
-      "path": ["semantic", "container-size", "height", "xs"],
-      "comment": "Handheld devices"
-    },
-    {
-      "key": "{semantic.container-size.height.sm}",
-      "value": "{\"min\":\"329px\",\"max\":\"504px\"}",
-      "type": "dimension",
-      "description": "Small tablets",
-      "attributes": {
-        "category": "breakpoint",
-        "type": "dimension",
-        "item": "height",
-        "subitem": "sm",
-        "value": {
-          "min": "328px + 1",
-          "max": "504px"
-        },
-        "description": "Small tablets",
-        "filePath": "src/tokens/semantic/container-size.json",
-        "isSource": true,
-        "key": "{semantic.container-size.height.sm}",
-        "name": "calcite-semantic-container-size-height-sm",
-        "path": ["semantic", "container-size", "height", "sm"],
-        "comment": "Small tablets",
-        "names": {
-          "scss": "$calcite-container-size-height-sm",
-          "css": "var(--calcite-container-size-height-sm)",
-          "js": "semantic.container-size.height.sm",
-          "docs": "semantic.container-size.height.sm",
-          "es6": "calciteContainerSizeHeightSm"
-        },
-        "calcite-schema": {
-          "system": "calcite",
-          "tier": "semantic",
-          "type": "dimension"
-        }
-      },
-      "filePath": "src/tokens/semantic/container-size.json",
-      "isSource": true,
-      "name": "Container Size Height Sm",
-      "path": ["semantic", "container-size", "height", "sm"],
-      "comment": "Small tablets"
-    },
-    {
-      "key": "{semantic.container-size.height.md}",
-      "value": "{\"min\":\"505px\",\"max\":\"678px\"}",
-      "type": "dimension",
-      "description": "Small laptops",
-      "attributes": {
-        "category": "breakpoint",
-        "type": "dimension",
-        "item": "height",
-        "subitem": "md",
-        "value": {
-          "min": "504px + 1",
-          "max": "678px"
-        },
-        "description": "Small laptops",
-        "filePath": "src/tokens/semantic/container-size.json",
-        "isSource": true,
-        "key": "{semantic.container-size.height.md}",
-        "name": "calcite-semantic-container-size-height-md",
-        "path": ["semantic", "container-size", "height", "md"],
-        "comment": "Small laptops",
-        "names": {
-          "scss": "$calcite-container-size-height-md",
-          "css": "var(--calcite-container-size-height-md)",
-          "js": "semantic.container-size.height.md",
-          "docs": "semantic.container-size.height.md",
-          "es6": "calciteContainerSizeHeightMd"
-        },
-        "calcite-schema": {
-          "system": "calcite",
-          "tier": "semantic",
-          "type": "dimension"
-        }
-      },
-      "filePath": "src/tokens/semantic/container-size.json",
-      "isSource": true,
-      "name": "Container Size Height Md",
-      "path": ["semantic", "container-size", "height", "md"],
-      "comment": "Small laptops"
-    },
-    {
-      "key": "{semantic.container-size.height.lg}",
-      "value": "{\"min\":\"679px\",\"max\":\"854px\"}",
-      "type": "dimension",
-      "description": "Large laptops and desktop computers",
-      "attributes": {
-        "category": "breakpoint",
-        "type": "dimension",
-        "item": "height",
-        "subitem": "lg",
-        "value": {
-          "min": "678px + 1",
-          "max": "854px"
-        },
-        "description": "Large laptops and desktop computers",
-        "filePath": "src/tokens/semantic/container-size.json",
-        "isSource": true,
-        "key": "{semantic.container-size.height.lg}",
-        "name": "calcite-semantic-container-size-height-lg",
-        "path": ["semantic", "container-size", "height", "lg"],
-        "comment": "Large laptops and desktop computers",
-        "names": {
-          "scss": "$calcite-container-size-height-lg",
-          "css": "var(--calcite-container-size-height-lg)",
-          "js": "semantic.container-size.height.lg",
-          "docs": "semantic.container-size.height.lg",
-          "es6": "calciteContainerSizeHeightLg"
-        },
-        "calcite-schema": {
-          "system": "calcite",
-          "tier": "semantic",
-          "type": "dimension"
-        }
-      },
-      "filePath": "src/tokens/semantic/container-size.json",
-      "isSource": true,
-      "name": "Container Size Height Lg",
-      "path": ["semantic", "container-size", "height", "lg"],
-      "comment": "Large laptops and desktop computers"
-    },
-    {
-      "key": "{semantic.container-size.height.xl}",
-      "value": "{\"min\":\"855px\"}",
-      "type": "dimension",
-      "description": "Projectors and televisions",
-      "attributes": {
-        "category": "breakpoint",
-        "type": "dimension",
-        "item": "height",
-        "subitem": "xl",
-        "value": {
-          "min": "854px + 1"
-        },
-        "description": "Projectors and televisions",
-        "filePath": "src/tokens/semantic/container-size.json",
-        "isSource": true,
-        "key": "{semantic.container-size.height.xl}",
-        "name": "calcite-semantic-container-size-height-xl",
-        "path": ["semantic", "container-size", "height", "xl"],
-        "comment": "Projectors and televisions",
-        "names": {
-          "scss": "$calcite-container-size-height-xl",
-          "css": "var(--calcite-container-size-height-xl)",
-          "js": "semantic.container-size.height.xl",
-          "docs": "semantic.container-size.height.xl",
-          "es6": "calciteContainerSizeHeightXl"
-        },
-        "calcite-schema": {
-          "system": "calcite",
-          "tier": "semantic",
-          "type": "dimension"
-        }
-      },
-      "filePath": "src/tokens/semantic/container-size.json",
-      "isSource": true,
-      "name": "Container Size Height Xl",
-      "path": ["semantic", "container-size", "height", "xl"],
-      "comment": "Projectors and televisions"
-    },
-    {
-      "key": "{semantic.container-size.width.xxs}",
-      "value": "{\"min\":\"0\",\"max\":\"320px\"}",
-      "type": "dimension",
-      "description": "Small handheld devices and mini-windows",
-      "attributes": {
-        "category": "breakpoint",
-        "type": "dimension",
-        "item": "width",
-        "subitem": "xxs",
-        "value": {
-          "min": "0",
-          "max": "320px"
-        },
-        "description": "Small handheld devices and mini-windows",
-        "filePath": "src/tokens/semantic/container-size.json",
-        "isSource": true,
-        "key": "{semantic.container-size.width.xxs}",
-        "name": "calcite-semantic-container-size-width-xxs",
-        "path": ["semantic", "container-size", "width", "xxs"],
-        "comment": "Small handheld devices and mini-windows",
-        "names": {
-          "scss": "$calcite-container-size-width-xxs",
-          "css": "var(--calcite-container-size-width-xxs)",
-          "js": "semantic.container-size.width.xxs",
-          "docs": "semantic.container-size.width.xxs",
-          "es6": "calciteContainerSizeWidthXxs"
-        },
-        "calcite-schema": {
-          "system": "calcite",
-          "tier": "semantic",
-          "type": "dimension"
-        }
-      },
-      "filePath": "src/tokens/semantic/container-size.json",
-      "isSource": true,
-      "name": "Container Size Width Xxs",
-      "path": ["semantic", "container-size", "width", "xxs"],
-      "comment": "Small handheld devices and mini-windows"
-    },
-    {
-      "key": "{semantic.container-size.width.xs}",
-      "value": "{\"min\":\"321px\",\"max\":\"476px\"}",
-      "type": "dimension",
-      "description": "Handheld devices",
-      "attributes": {
-        "category": "breakpoint",
-        "type": "dimension",
-        "item": "width",
-        "subitem": "xs",
-        "value": {
-          "min": "320px + 1",
-          "max": "476px"
-        },
-        "description": "Handheld devices",
-        "filePath": "src/tokens/semantic/container-size.json",
-        "isSource": true,
-        "key": "{semantic.container-size.width.xs}",
-        "name": "calcite-semantic-container-size-width-xs",
-        "path": ["semantic", "container-size", "width", "xs"],
-        "comment": "Handheld devices",
-        "names": {
-          "scss": "$calcite-container-size-width-xs",
-          "css": "var(--calcite-container-size-width-xs)",
-          "js": "semantic.container-size.width.xs",
-          "docs": "semantic.container-size.width.xs",
-          "es6": "calciteContainerSizeWidthXs"
-        },
-        "calcite-schema": {
-          "system": "calcite",
-          "tier": "semantic",
-          "type": "dimension"
-        }
-      },
-      "filePath": "src/tokens/semantic/container-size.json",
-      "isSource": true,
-      "name": "Container Size Width Xs",
-      "path": ["semantic", "container-size", "width", "xs"],
-      "comment": "Handheld devices"
-    },
-    {
-      "key": "{semantic.container-size.width.sm}",
-      "value": "{\"min\":\"477px\",\"max\":\"768px\"}",
-      "type": "dimension",
-      "description": "Small tablets",
-      "attributes": {
-        "category": "breakpoint",
-        "type": "dimension",
-        "item": "width",
-        "subitem": "sm",
-        "value": {
-          "min": "476px + 1",
-          "max": "768px"
-        },
-        "description": "Small tablets",
-        "filePath": "src/tokens/semantic/container-size.json",
-        "isSource": true,
-        "key": "{semantic.container-size.width.sm}",
-        "name": "calcite-semantic-container-size-width-sm",
-        "path": ["semantic", "container-size", "width", "sm"],
-        "comment": "Small tablets",
-        "names": {
-          "scss": "$calcite-container-size-width-sm",
-          "css": "var(--calcite-container-size-width-sm)",
-          "js": "semantic.container-size.width.sm",
-          "docs": "semantic.container-size.width.sm",
-          "es6": "calciteContainerSizeWidthSm"
-        },
-        "calcite-schema": {
-          "system": "calcite",
-          "tier": "semantic",
-          "type": "dimension"
-        }
-      },
-      "filePath": "src/tokens/semantic/container-size.json",
-      "isSource": true,
-      "name": "Container Size Width Sm",
-      "path": ["semantic", "container-size", "width", "sm"],
-      "comment": "Small tablets"
-    },
-    {
-      "key": "{semantic.container-size.width.md}",
-      "value": "{\"min\":\"769px\",\"max\":\"1152px\"}",
-      "type": "dimension",
-      "description": "Small laptops",
-      "attributes": {
-        "category": "breakpoint",
-        "type": "dimension",
-        "item": "width",
-        "subitem": "md",
-        "value": {
-          "min": "768px + 1",
-          "max": "1152px"
-        },
-        "description": "Small laptops",
-        "filePath": "src/tokens/semantic/container-size.json",
-        "isSource": true,
-        "key": "{semantic.container-size.width.md}",
-        "name": "calcite-semantic-container-size-width-md",
-        "path": ["semantic", "container-size", "width", "md"],
-        "comment": "Small laptops",
-        "names": {
-          "scss": "$calcite-container-size-width-md",
-          "css": "var(--calcite-container-size-width-md)",
-          "js": "semantic.container-size.width.md",
-          "docs": "semantic.container-size.width.md",
-          "es6": "calciteContainerSizeWidthMd"
-        },
-        "calcite-schema": {
-          "system": "calcite",
-          "tier": "semantic",
-          "type": "dimension"
-        }
-      },
-      "filePath": "src/tokens/semantic/container-size.json",
-      "isSource": true,
-      "name": "Container Size Width Md",
-      "path": ["semantic", "container-size", "width", "md"],
-      "comment": "Small laptops"
-    },
-    {
-      "key": "{semantic.container-size.width.lg}",
-      "value": "{\"min\":\"1153px\",\"max\":\"1440px\"}",
-      "type": "dimension",
-      "description": "Large laptops and desktop computers",
-      "attributes": {
-        "category": "breakpoint",
-        "type": "dimension",
-        "item": "width",
-        "subitem": "lg",
-        "value": {
-          "min": "1152px + 1",
-          "max": "1440px"
-        },
-        "description": "Large laptops and desktop computers",
-        "filePath": "src/tokens/semantic/container-size.json",
-        "isSource": true,
-        "key": "{semantic.container-size.width.lg}",
-        "name": "calcite-semantic-container-size-width-lg",
-        "path": ["semantic", "container-size", "width", "lg"],
-        "comment": "Large laptops and desktop computers",
-        "names": {
-          "scss": "$calcite-container-size-width-lg",
-          "css": "var(--calcite-container-size-width-lg)",
-          "js": "semantic.container-size.width.lg",
-          "docs": "semantic.container-size.width.lg",
-          "es6": "calciteContainerSizeWidthLg"
-        },
-        "calcite-schema": {
-          "system": "calcite",
-          "tier": "semantic",
-          "type": "dimension"
-        }
-      },
-      "filePath": "src/tokens/semantic/container-size.json",
-      "isSource": true,
-      "name": "Container Size Width Lg",
-      "path": ["semantic", "container-size", "width", "lg"],
-      "comment": "Large laptops and desktop computers"
-    },
-    {
-      "key": "{semantic.container-size.width.xl}",
-      "value": "{\"min\":\"1441px\"}",
-      "type": "dimension",
-      "description": "Projectors and televisions",
-      "attributes": {
-        "category": "breakpoint",
-        "type": "dimension",
-        "item": "width",
-        "subitem": "xl",
-        "value": {
-          "min": "1440px + 1"
-        },
-        "description": "Projectors and televisions",
-        "filePath": "src/tokens/semantic/container-size.json",
-        "isSource": true,
-        "key": "{semantic.container-size.width.xl}",
-        "name": "calcite-semantic-container-size-width-xl",
-        "path": ["semantic", "container-size", "width", "xl"],
-        "comment": "Projectors and televisions",
-        "names": {
-          "scss": "$calcite-container-size-width-xl",
-          "css": "var(--calcite-container-size-width-xl)",
-          "js": "semantic.container-size.width.xl",
-          "docs": "semantic.container-size.width.xl",
-          "es6": "calciteContainerSizeWidthXl"
-        },
-        "calcite-schema": {
-          "system": "calcite",
-          "tier": "semantic",
-          "type": "dimension"
-        }
-      },
-      "filePath": "src/tokens/semantic/container-size.json",
-      "isSource": true,
-      "name": "Container Size Width Xl",
-      "path": ["semantic", "container-size", "width", "xl"],
-      "comment": "Projectors and televisions"
-    },
     {
       "key": "{semantic.container-size.margin}",
       "value": "24px",

package/dist/es6/semantic.d.ts CHANGED Viewed

@@ -7,30 +7,6 @@ export const calciteBorderWidthNone: string;
 export const calciteBorderWidthSm: string;
 export const calciteBorderWidthMd: string;
 export const calciteBorderWidthLg: string;
-/** Small handheld devices and mini-windows */
-export const calciteContainerSizeHeightXxs: { min: string; max: string };
-/** Handheld devices */
-export const calciteContainerSizeHeightXs: { min: string; max: string };
-/** Small tablets */
-export const calciteContainerSizeHeightSm: { min: string; max: string };
-/** Small laptops */
-export const calciteContainerSizeHeightMd: { min: string; max: string };
-/** Large laptops and desktop computers */
-export const calciteContainerSizeHeightLg: { min: string; max: string };
-/** Projectors and televisions */
-export const calciteContainerSizeHeightXl: { min: string };
-/** Small handheld devices and mini-windows */
-export const calciteContainerSizeWidthXxs: { min: string; max: string };
-/** Handheld devices */
-export const calciteContainerSizeWidthXs: { min: string; max: string };
-/** Small tablets */
-export const calciteContainerSizeWidthSm: { min: string; max: string };
-/** Small laptops */
-export const calciteContainerSizeWidthMd: { min: string; max: string };
-/** Large laptops and desktop computers */
-export const calciteContainerSizeWidthLg: { min: string; max: string };
-/** Projectors and televisions */
-export const calciteContainerSizeWidthXl: { min: string };
 export const calciteContainerSizeMargin: string;
 export const calciteContainerSizeGutter: string;
 /** for fluid grid widths */

package/dist/es6/semantic.js CHANGED Viewed

@@ -7,18 +7,6 @@ export const calciteBorderWidthNone = "0";
 export const calciteBorderWidthSm = "1px";
 export const calciteBorderWidthMd = "2px";
 export const calciteBorderWidthLg = "4px";
-export const calciteContainerSizeHeightXxs = { min: "0", max: "154px" }; // Small handheld devices and mini-windows
-export const calciteContainerSizeHeightXs = { min: "155px", max: "328px" }; // Handheld devices
-export const calciteContainerSizeHeightSm = { min: "329px", max: "504px" }; // Small tablets
-export const calciteContainerSizeHeightMd = { min: "505px", max: "678px" }; // Small laptops
-export const calciteContainerSizeHeightLg = { min: "679px", max: "854px" }; // Large laptops and desktop computers
-export const calciteContainerSizeHeightXl = { min: "855px" }; // Projectors and televisions
-export const calciteContainerSizeWidthXxs = { min: "0", max: "320px" }; // Small handheld devices and mini-windows
-export const calciteContainerSizeWidthXs = { min: "321px", max: "476px" }; // Handheld devices
-export const calciteContainerSizeWidthSm = { min: "477px", max: "768px" }; // Small tablets
-export const calciteContainerSizeWidthMd = { min: "769px", max: "1152px" }; // Small laptops
-export const calciteContainerSizeWidthLg = { min: "1153px", max: "1440px" }; // Large laptops and desktop computers
-export const calciteContainerSizeWidthXl = { min: "1441px" }; // Projectors and televisions
 export const calciteContainerSizeMargin = "24px";
 export const calciteContainerSizeGutter = "16px";
 export const calciteContainerSizeContentFluid = "100%"; // for fluid grid widths

package/dist/js/semantic.d.ts CHANGED Viewed

@@ -26,22 +26,6 @@ declare const tokens: {
       };
     };
     "container-size": {
-      height: {
-        xxs: DesignToken;
-        xs: DesignToken;
-        sm: DesignToken;
-        md: DesignToken;
-        lg: DesignToken;
-        xl: DesignToken;
-      };
-      width: {
-        xxs: DesignToken;
-        xs: DesignToken;
-        sm: DesignToken;
-        md: DesignToken;
-        lg: DesignToken;
-        xl: DesignToken;
-      };
       margin: DesignToken;
       gutter: DesignToken;
       content: {