@esri/calcite-design-tokens 4.0.0-next.10 → 4.0.0-next.12

package/dist/css/breakpoints.css

@@ -4,9 +4,12 @@
  */
 
 :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-container-size-height-xxs-max: 154px; /** Small handheld devices and mini-windows */
+  --calcite-container-size-height-xxs-min: 0; /** Deprecated, use --calcite-container-size-height-2xs-min|max instead. Small handheld devices and mini-windows */
+  --calcite-container-size-height-2xs-min: 0; /** Small handheld devices and mini-windows */
+  --calcite-container-size-width-xxs-min: 0; /** Deprecated, use --calcite-container-size-width-2xs-min|max instead. Small handheld devices and mini-windows */
+  --calcite-container-size-width-2xs-min: 0; /** Small handheld devices and mini-windows */
+  --calcite-container-size-height-xxs-max: 154px; /** Deprecated, use --calcite-container-size-height-2xs-min|max instead. Small handheld devices and mini-windows */
+  --calcite-container-size-height-2xs-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 */
@@ -16,7 +19,8 @@
   --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-xxs-max: 320px; /** Deprecated, use --calcite-container-size-width-2xs-min|max instead. Small handheld devices and mini-windows */
+  --calcite-container-size-width-2xs-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 */

package/dist/css/global.css

@@ -34,7 +34,8 @@
   --calcite-font-size-md: 16px;
   --calcite-font-size-lg: 18px;
   --calcite-font-size-xl: 20px;
-  --calcite-font-size-xxl: 24px;
+  --calcite-font-size-xxl: 24px; /** Deprecated, use --calcite-font-size-2xl instead. */
+  --calcite-font-size-2xl: 24px;
   --calcite-font-size-relative-xs: 0.625rem;
   --calcite-font-size-relative-sm: 0.75rem;
   --calcite-font-size-relative-base: 0.875rem;
@@ -103,15 +104,19 @@
   --calcite-size-fixed-xxl: 24px; /** deprecated */
   --calcite-size-fixed-xxxl: 32px; /** deprecated */
   --calcite-size-px: 1px;
-  --calcite-size-xxxs: 0.75rem;
-  --calcite-size-xxs: 0.875rem;
+  --calcite-size-xxxs: 0.75rem; /** Deprecated, use --calcite-size-3xs instead. */
+  --calcite-size-3xs: 0.75rem;
+  --calcite-size-xxs: 0.875rem; /** Deprecated, use --calcite-size-2xs instead. */
+  --calcite-size-2xs: 0.875rem;
   --calcite-size-xs: 1rem;
   --calcite-size-sm: 1.5rem;
   --calcite-size-md: 2rem;
   --calcite-size-lg: 2.75rem;
   --calcite-size-xl: 3rem;
-  --calcite-size-xxl: 4rem;
-  --calcite-size-xxxl: 6rem;
+  --calcite-size-xxl: 4rem; /** Deprecated, use --calcite-size-2xl instead. */
+  --calcite-size-2xl: 4rem;
+  --calcite-size-xxxl: 6rem; /** Deprecated, use --calcite-size-3xl instead. */
+  --calcite-size-3xl: 6rem;
   --calcite-spacing-fixed-xxs: 4px; /** deprecated */
   --calcite-spacing-fixed-xs: 6px; /** deprecated */
   --calcite-spacing-fixed-sm: 8px; /** deprecated */

package/dist/css/index.css

@@ -51,6 +51,7 @@
   --calcite-color-foreground-1: #ffffff;
   --calcite-color-background-none: rgba(255, 255, 255, 0);
   --calcite-color-background: #f7f7f7;
+  --calcite-color-focus: var(--calcite-color-brand);
 }
 @media (prefers-color-scheme: light) {
   .calcite-mode-auto {
@@ -99,6 +100,7 @@
     --calcite-color-foreground-1: #ffffff;
     --calcite-color-background-none: rgba(255, 255, 255, 0);
     --calcite-color-background: #f7f7f7;
+    --calcite-color-focus: var(--calcite-color-brand);
   }
 }
 @media (prefers-color-scheme: dark) {
@@ -148,6 +150,7 @@
     --calcite-color-foreground-1: #2b2b2b;
     --calcite-color-background-none: rgba(255, 255, 255, 0);
     --calcite-color-background: #212121;
+    --calcite-color-focus: var(--calcite-color-brand);
   }
 }
 .calcite-mode-light {
@@ -196,6 +199,7 @@
   --calcite-color-foreground-1: #ffffff;
   --calcite-color-background-none: rgba(255, 255, 255, 0);
   --calcite-color-background: #f7f7f7;
+  --calcite-color-focus: var(--calcite-color-brand);
 }
 .calcite-mode-dark {
   --calcite-color-border-white: #f7f7f7;
@@ -243,4 +247,5 @@
   --calcite-color-foreground-1: #2b2b2b;
   --calcite-color-background-none: rgba(255, 255, 255, 0);
   --calcite-color-background: #212121;
+  --calcite-color-focus: var(--calcite-color-brand);
 }

package/dist/css/semantic.css

@@ -32,7 +32,8 @@
   --calcite-font-size-md: 16px;
   --calcite-font-size-lg: 18px;
   --calcite-font-size-xl: 20px;
-  --calcite-font-size-xxl: 24px;
+  --calcite-font-size-xxl: 24px; /** Deprecated, use --calcite-font-size-2xl instead. */
+  --calcite-font-size-2xl: 24px;
   --calcite-font-size-relative-xs: 0.625rem;
   --calcite-font-size-relative-sm: 0.75rem;
   --calcite-font-size-relative-base: 0.875rem;
@@ -101,15 +102,19 @@
   --calcite-size-fixed-xxl: 24px; /** deprecated */
   --calcite-size-fixed-xxxl: 32px; /** deprecated */
   --calcite-size-px: 1px;
-  --calcite-size-xxxs: 0.75rem;
-  --calcite-size-xxs: 0.875rem;
+  --calcite-size-xxxs: 0.75rem; /** Deprecated, use --calcite-size-3xs instead. */
+  --calcite-size-3xs: 0.75rem;
+  --calcite-size-xxs: 0.875rem; /** Deprecated, use --calcite-size-2xs instead. */
+  --calcite-size-2xs: 0.875rem;
   --calcite-size-xs: 1rem;
   --calcite-size-sm: 1.5rem;
   --calcite-size-md: 2rem;
   --calcite-size-lg: 2.75rem;
   --calcite-size-xl: 3rem;
-  --calcite-size-xxl: 4rem;
-  --calcite-size-xxxl: 6rem;
+  --calcite-size-xxl: 4rem; /** Deprecated, use --calcite-size-2xl instead. */
+  --calcite-size-2xl: 4rem;
+  --calcite-size-xxxl: 6rem; /** Deprecated, use --calcite-size-3xl instead. */
+  --calcite-size-3xl: 6rem;
   --calcite-spacing-fixed-xxs: 4px; /** deprecated */
   --calcite-spacing-fixed-xs: 6px; /** deprecated */
   --calcite-spacing-fixed-sm: 8px; /** deprecated */

package/dist/docs/core.json

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

package/dist/docs/dark.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": 1765237356042,
+  "timestamp": 1765409949474,
   "tokens": [
     {
       "key": "{semantic.color.background.default}",
@@ -1267,7 +1267,6 @@
       "attributes": {
         "category": "color",
         "group": "focus",
-        "scope": "component",
         "type": "color",
         "item": "focus",
         "subitem": "default",

package/dist/docs/global.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": 1765237357184,
+  "timestamp": 1765409950589,
   "tokens": [
     {
       "key": "{semantic.color.background.default}",
@@ -1267,7 +1267,6 @@
       "attributes": {
         "category": "color",
         "group": "focus",
-        "scope": "component",
         "type": "color",
         "item": "focus",
         "subitem": "default",
@@ -1400,7 +1399,7 @@
       "key": "{semantic.container-size.height.xxs}",
       "value": "{\"min\":\"0\",\"max\":\"154px\"}",
       "type": "dimension",
-      "description": "Small handheld devices and mini-windows",
+      "description": "Deprecated, use --calcite-container-size-height-2xs-min|max instead. Small handheld devices and mini-windows",
       "attributes": {
         "category": "breakpoint",
         "type": "dimension",
@@ -1410,13 +1409,13 @@
           "min": "0",
           "max": "154px"
         },
-        "description": "Small handheld devices and mini-windows",
+        "description": "Deprecated, use --calcite-container-size-height-2xs-min|max instead. 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",
+        "comment": "Deprecated, use --calcite-container-size-height-2xs-min|max instead. Small handheld devices and mini-windows",
         "names": {
           "scss": "$calcite-container-size-height-xxs",
           "css": "var(--calcite-container-size-height-xxs)",
@@ -1433,6 +1432,45 @@
       "isSource": true,
       "name": "Container Size Height Xxs",
       "path": ["semantic", "container-size", "height", "xxs"],
+      "comment": "Deprecated, use --calcite-container-size-height-2xs-min|max instead. Small handheld devices and mini-windows"
+    },
+    {
+      "key": "{semantic.container-size.height.2xs}",
+      "value": "{\"min\":\"0\",\"max\":\"154px\"}",
+      "type": "dimension",
+      "description": "Small handheld devices and mini-windows",
+      "attributes": {
+        "category": "breakpoint",
+        "type": "dimension",
+        "item": "height",
+        "subitem": "2xs",
+        "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.2xs}",
+        "name": "calcite-semantic-container-size-height-2xs",
+        "path": ["semantic", "container-size", "height", "2xs"],
+        "comment": "Small handheld devices and mini-windows",
+        "names": {
+          "scss": "$calcite-container-size-height-2xs",
+          "css": "var(--calcite-container-size-height-2xs)",
+          "docs": "semantic.container-size.height.2xs",
+          "es6": "calciteContainerSizeHeight2xs"
+        },
+        "calcite-schema": {
+          "system": "calcite",
+          "tier": "semantic",
+          "type": "dimension"
+        }
+      },
+      "filePath": "src/tokens/semantic/container-size.json",
+      "isSource": true,
+      "name": "Container Size Height 2xs",
+      "path": ["semantic", "container-size", "height", "2xs"],
       "comment": "Small handheld devices and mini-windows"
     },
     {
@@ -1633,7 +1671,7 @@
       "key": "{semantic.container-size.width.xxs}",
       "value": "{\"min\":\"0\",\"max\":\"320px\"}",
       "type": "dimension",
-      "description": "Small handheld devices and mini-windows",
+      "description": "Deprecated, use --calcite-container-size-width-2xs-min|max instead. Small handheld devices and mini-windows",
       "attributes": {
         "category": "breakpoint",
         "type": "dimension",
@@ -1643,13 +1681,13 @@
           "min": "0",
           "max": "320px"
         },
-        "description": "Small handheld devices and mini-windows",
+        "description": "Deprecated, use --calcite-container-size-width-2xs-min|max instead. 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",
+        "comment": "Deprecated, use --calcite-container-size-width-2xs-min|max instead. Small handheld devices and mini-windows",
         "names": {
           "scss": "$calcite-container-size-width-xxs",
           "css": "var(--calcite-container-size-width-xxs)",
@@ -1666,6 +1704,45 @@
       "isSource": true,
       "name": "Container Size Width Xxs",
       "path": ["semantic", "container-size", "width", "xxs"],
+      "comment": "Deprecated, use --calcite-container-size-width-2xs-min|max instead. Small handheld devices and mini-windows"
+    },
+    {
+      "key": "{semantic.container-size.width.2xs}",
+      "value": "{\"min\":\"0\",\"max\":\"320px\"}",
+      "type": "dimension",
+      "description": "Small handheld devices and mini-windows",
+      "attributes": {
+        "category": "breakpoint",
+        "type": "dimension",
+        "item": "width",
+        "subitem": "2xs",
+        "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.2xs}",
+        "name": "calcite-semantic-container-size-width-2xs",
+        "path": ["semantic", "container-size", "width", "2xs"],
+        "comment": "Small handheld devices and mini-windows",
+        "names": {
+          "scss": "$calcite-container-size-width-2xs",
+          "css": "var(--calcite-container-size-width-2xs)",
+          "docs": "semantic.container-size.width.2xs",
+          "es6": "calciteContainerSizeWidth2xs"
+        },
+        "calcite-schema": {
+          "system": "calcite",
+          "tier": "semantic",
+          "type": "dimension"
+        }
+      },
+      "filePath": "src/tokens/semantic/container-size.json",
+      "isSource": true,
+      "name": "Container Size Width 2xs",
+      "path": ["semantic", "container-size", "width", "2xs"],
       "comment": "Small handheld devices and mini-windows"
     },
     {
@@ -2610,9 +2687,17 @@
       "attributes": {
         "category": "font",
         "group": "size",
-        "type": "font",
+        "type": "fontSize",
         "item": "size",
         "subitem": "xxl",
+        "value": "24px",
+        "description": "Deprecated, use --calcite-font-size-2xl instead.",
+        "filePath": "src/tokens/semantic/font.json",
+        "isSource": true,
+        "key": "{semantic.font.size.xxl}",
+        "name": "calcite-semantic-font-size-xxl",
+        "path": ["semantic", "font", "size", "xxl"],
+        "comment": "Deprecated, use --calcite-font-size-2xl instead.",
         "names": {
           "scss": "$calcite-font-size-xxl",
           "css": "var(--calcite-font-size-xxl)",
@@ -2625,10 +2710,39 @@
           "type": "fontSize"
         }
       },
+      "description": "Deprecated, use --calcite-font-size-2xl instead.",
       "filePath": "src/tokens/semantic/font.json",
       "isSource": true,
       "name": "Font Size Xxl",
-      "path": ["semantic", "font", "size", "xxl"]
+      "path": ["semantic", "font", "size", "xxl"],
+      "comment": "Deprecated, use --calcite-font-size-2xl instead."
+    },
+    {
+      "key": "{semantic.font.size.2xl}",
+      "value": "24px",
+      "type": "fontSize",
+      "attributes": {
+        "category": "font",
+        "group": "size",
+        "type": "font",
+        "item": "size",
+        "subitem": "2xl",
+        "names": {
+          "scss": "$calcite-font-size-2xl",
+          "css": "var(--calcite-font-size-2xl)",
+          "docs": "semantic.font.size.2xl",
+          "es6": "calciteFontSize2xl"
+        },
+        "calcite-schema": {
+          "system": "calcite",
+          "tier": "semantic",
+          "type": "fontSize"
+        }
+      },
+      "filePath": "src/tokens/semantic/font.json",
+      "isSource": true,
+      "name": "Font Size 2xl",
+      "path": ["semantic", "font", "size", "2xl"]
     },
     {
       "key": "{semantic.font.size.relative.xs}",
@@ -4871,9 +4985,17 @@
       "type": "dimension",
       "attributes": {
         "category": "size",
-        "type": "size",
+        "type": "dimension",
         "item": "default",
         "subitem": "xxxs",
+        "value": "12px",
+        "description": "Deprecated, use --calcite-size-3xs instead.",
+        "filePath": "src/tokens/semantic/size.json",
+        "isSource": true,
+        "key": "{semantic.size.default.xxxs}",
+        "name": "calcite-semantic-size-default-xxxs",
+        "path": ["semantic", "size", "default", "xxxs"],
+        "comment": "Deprecated, use --calcite-size-3xs instead.",
         "names": {
           "scss": "$calcite-size-xxxs",
           "css": "var(--calcite-size-xxxs)",
@@ -4886,10 +5008,38 @@
           "type": "dimension"
         }
       },
+      "description": "Deprecated, use --calcite-size-3xs instead.",
       "filePath": "src/tokens/semantic/size.json",
       "isSource": true,
       "name": "Size Xxxs",
-      "path": ["semantic", "size", "default", "xxxs"]
+      "path": ["semantic", "size", "default", "xxxs"],
+      "comment": "Deprecated, use --calcite-size-3xs instead."
+    },
+    {
+      "key": "{semantic.size.default.3xs}",
+      "value": "0.75rem",
+      "type": "dimension",
+      "attributes": {
+        "category": "size",
+        "type": "size",
+        "item": "default",
+        "subitem": "3xs",
+        "names": {
+          "scss": "$calcite-size-3xs",
+          "css": "var(--calcite-size-3xs)",
+          "docs": "semantic.size.default.3xs",
+          "es6": "calciteSize3xs"
+        },
+        "calcite-schema": {
+          "system": "calcite",
+          "tier": "semantic",
+          "type": "dimension"
+        }
+      },
+      "filePath": "src/tokens/semantic/size.json",
+      "isSource": true,
+      "name": "Size 3xs",
+      "path": ["semantic", "size", "default", "3xs"]
     },
     {
       "key": "{semantic.size.default.xxs}",
@@ -4897,9 +5047,17 @@
       "type": "dimension",
       "attributes": {
         "category": "size",
-        "type": "size",
+        "type": "dimension",
         "item": "default",
         "subitem": "xxs",
+        "value": "14px",
+        "description": "Deprecated, use --calcite-size-2xs instead.",
+        "filePath": "src/tokens/semantic/size.json",
+        "isSource": true,
+        "key": "{semantic.size.default.xxs}",
+        "name": "calcite-semantic-size-default-xxs",
+        "path": ["semantic", "size", "default", "xxs"],
+        "comment": "Deprecated, use --calcite-size-2xs instead.",
         "names": {
           "scss": "$calcite-size-xxs",
           "css": "var(--calcite-size-xxs)",
@@ -4912,10 +5070,38 @@
           "type": "dimension"
         }
       },
+      "description": "Deprecated, use --calcite-size-2xs instead.",
       "filePath": "src/tokens/semantic/size.json",
       "isSource": true,
       "name": "Size Xxs",
-      "path": ["semantic", "size", "default", "xxs"]
+      "path": ["semantic", "size", "default", "xxs"],
+      "comment": "Deprecated, use --calcite-size-2xs instead."
+    },
+    {
+      "key": "{semantic.size.default.2xs}",
+      "value": "0.875rem",
+      "type": "dimension",
+      "attributes": {
+        "category": "size",
+        "type": "size",
+        "item": "default",
+        "subitem": "2xs",
+        "names": {
+          "scss": "$calcite-size-2xs",
+          "css": "var(--calcite-size-2xs)",
+          "docs": "semantic.size.default.2xs",
+          "es6": "calciteSize2xs"
+        },
+        "calcite-schema": {
+          "system": "calcite",
+          "tier": "semantic",
+          "type": "dimension"
+        }
+      },
+      "filePath": "src/tokens/semantic/size.json",
+      "isSource": true,
+      "name": "Size 2xs",
+      "path": ["semantic", "size", "default", "2xs"]
     },
     {
       "key": "{semantic.size.default.xs}",
@@ -5053,9 +5239,17 @@
       "type": "dimension",
       "attributes": {
         "category": "size",
-        "type": "size",
+        "type": "dimension",
         "item": "default",
         "subitem": "xxl",
+        "value": "64px",
+        "description": "Deprecated, use --calcite-size-2xl instead.",
+        "filePath": "src/tokens/semantic/size.json",
+        "isSource": true,
+        "key": "{semantic.size.default.xxl}",
+        "name": "calcite-semantic-size-default-xxl",
+        "path": ["semantic", "size", "default", "xxl"],
+        "comment": "Deprecated, use --calcite-size-2xl instead.",
         "names": {
           "scss": "$calcite-size-xxl",
           "css": "var(--calcite-size-xxl)",
@@ -5068,10 +5262,38 @@
           "type": "dimension"
         }
       },
+      "description": "Deprecated, use --calcite-size-2xl instead.",
       "filePath": "src/tokens/semantic/size.json",
       "isSource": true,
       "name": "Size Xxl",
-      "path": ["semantic", "size", "default", "xxl"]
+      "path": ["semantic", "size", "default", "xxl"],
+      "comment": "Deprecated, use --calcite-size-2xl instead."
+    },
+    {
+      "key": "{semantic.size.default.2xl}",
+      "value": "4rem",
+      "type": "dimension",
+      "attributes": {
+        "category": "size",
+        "type": "size",
+        "item": "default",
+        "subitem": "2xl",
+        "names": {
+          "scss": "$calcite-size-2xl",
+          "css": "var(--calcite-size-2xl)",
+          "docs": "semantic.size.default.2xl",
+          "es6": "calciteSize2xl"
+        },
+        "calcite-schema": {
+          "system": "calcite",
+          "tier": "semantic",
+          "type": "dimension"
+        }
+      },
+      "filePath": "src/tokens/semantic/size.json",
+      "isSource": true,
+      "name": "Size 2xl",
+      "path": ["semantic", "size", "default", "2xl"]
     },
     {
       "key": "{semantic.size.default.xxxl}",
@@ -5079,9 +5301,17 @@
       "type": "dimension",
       "attributes": {
         "category": "size",
-        "type": "size",
+        "type": "dimension",
         "item": "default",
         "subitem": "xxxl",
+        "value": "96px",
+        "description": "Deprecated, use --calcite-size-3xl instead.",
+        "filePath": "src/tokens/semantic/size.json",
+        "isSource": true,
+        "key": "{semantic.size.default.xxxl}",
+        "name": "calcite-semantic-size-default-xxxl",
+        "path": ["semantic", "size", "default", "xxxl"],
+        "comment": "Deprecated, use --calcite-size-3xl instead.",
         "names": {
           "scss": "$calcite-size-xxxl",
           "css": "var(--calcite-size-xxxl)",
@@ -5094,10 +5324,38 @@
           "type": "dimension"
         }
       },
+      "description": "Deprecated, use --calcite-size-3xl instead.",
       "filePath": "src/tokens/semantic/size.json",
       "isSource": true,
       "name": "Size Xxxl",
-      "path": ["semantic", "size", "default", "xxxl"]
+      "path": ["semantic", "size", "default", "xxxl"],
+      "comment": "Deprecated, use --calcite-size-3xl instead."
+    },
+    {
+      "key": "{semantic.size.default.3xl}",
+      "value": "6rem",
+      "type": "dimension",
+      "attributes": {
+        "category": "size",
+        "type": "size",
+        "item": "default",
+        "subitem": "3xl",
+        "names": {
+          "scss": "$calcite-size-3xl",
+          "css": "var(--calcite-size-3xl)",
+          "docs": "semantic.size.default.3xl",
+          "es6": "calciteSize3xl"
+        },
+        "calcite-schema": {
+          "system": "calcite",
+          "tier": "semantic",
+          "type": "dimension"
+        }
+      },
+      "filePath": "src/tokens/semantic/size.json",
+      "isSource": true,
+      "name": "Size 3xl",
+      "path": ["semantic", "size", "default", "3xl"]
     },
     {
       "key": "{semantic.spacing.fixed.xxs}",

package/dist/docs/light.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": 1765237356622,
+  "timestamp": 1765409950028,
   "tokens": [
     {
       "key": "{semantic.color.background.default}",
@@ -1267,7 +1267,6 @@
       "attributes": {
         "category": "color",
         "group": "focus",
-        "scope": "component",
         "type": "color",
         "item": "focus",
         "subitem": "default",

package/dist/docs/semantic.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": 1765237357414,
+  "timestamp": 1765409950789,
   "tokens": [
     {
       "key": "{semantic.border.width.none}",
@@ -857,9 +857,17 @@
       "attributes": {
         "category": "font",
         "group": "size",
-        "type": "font",
+        "type": "fontSize",
         "item": "size",
         "subitem": "xxl",
+        "value": "24px",
+        "description": "Deprecated, use --calcite-font-size-2xl instead.",
+        "filePath": "src/tokens/semantic/font.json",
+        "isSource": true,
+        "key": "{semantic.font.size.xxl}",
+        "name": "calcite-semantic-font-size-xxl",
+        "path": ["semantic", "font", "size", "xxl"],
+        "comment": "Deprecated, use --calcite-font-size-2xl instead.",
         "names": {
           "scss": "$calcite-font-size-xxl",
           "css": "var(--calcite-font-size-xxl)",
@@ -872,10 +880,39 @@
           "type": "fontSize"
         }
       },
+      "description": "Deprecated, use --calcite-font-size-2xl instead.",
       "filePath": "src/tokens/semantic/font.json",
       "isSource": true,
       "name": "Font Size Xxl",
-      "path": ["semantic", "font", "size", "xxl"]
+      "path": ["semantic", "font", "size", "xxl"],
+      "comment": "Deprecated, use --calcite-font-size-2xl instead."
+    },
+    {
+      "key": "{semantic.font.size.2xl}",
+      "value": "24px",
+      "type": "fontSize",
+      "attributes": {
+        "category": "font",
+        "group": "size",
+        "type": "font",
+        "item": "size",
+        "subitem": "2xl",
+        "names": {
+          "scss": "$calcite-font-size-2xl",
+          "css": "var(--calcite-font-size-2xl)",
+          "docs": "semantic.font.size.2xl",
+          "es6": "calciteFontSize2xl"
+        },
+        "calcite-schema": {
+          "system": "calcite",
+          "tier": "semantic",
+          "type": "fontSize"
+        }
+      },
+      "filePath": "src/tokens/semantic/font.json",
+      "isSource": true,
+      "name": "Font Size 2xl",
+      "path": ["semantic", "font", "size", "2xl"]
     },
     {
       "key": "{semantic.font.size.relative.xs}",
@@ -3118,9 +3155,17 @@
       "type": "dimension",
       "attributes": {
         "category": "size",
-        "type": "size",
+        "type": "dimension",
         "item": "default",
         "subitem": "xxxs",
+        "value": "12px",
+        "description": "Deprecated, use --calcite-size-3xs instead.",
+        "filePath": "src/tokens/semantic/size.json",
+        "isSource": true,
+        "key": "{semantic.size.default.xxxs}",
+        "name": "calcite-semantic-size-default-xxxs",
+        "path": ["semantic", "size", "default", "xxxs"],
+        "comment": "Deprecated, use --calcite-size-3xs instead.",
         "names": {
           "scss": "$calcite-size-xxxs",
           "css": "var(--calcite-size-xxxs)",
@@ -3133,10 +3178,38 @@
           "type": "dimension"
         }
       },
+      "description": "Deprecated, use --calcite-size-3xs instead.",
       "filePath": "src/tokens/semantic/size.json",
       "isSource": true,
       "name": "Size Xxxs",
-      "path": ["semantic", "size", "default", "xxxs"]
+      "path": ["semantic", "size", "default", "xxxs"],
+      "comment": "Deprecated, use --calcite-size-3xs instead."
+    },
+    {
+      "key": "{semantic.size.default.3xs}",
+      "value": "0.75rem",
+      "type": "dimension",
+      "attributes": {
+        "category": "size",
+        "type": "size",
+        "item": "default",
+        "subitem": "3xs",
+        "names": {
+          "scss": "$calcite-size-3xs",
+          "css": "var(--calcite-size-3xs)",
+          "docs": "semantic.size.default.3xs",
+          "es6": "calciteSize3xs"
+        },
+        "calcite-schema": {
+          "system": "calcite",
+          "tier": "semantic",
+          "type": "dimension"
+        }
+      },
+      "filePath": "src/tokens/semantic/size.json",
+      "isSource": true,
+      "name": "Size 3xs",
+      "path": ["semantic", "size", "default", "3xs"]
     },
     {
       "key": "{semantic.size.default.xxs}",
@@ -3144,9 +3217,17 @@
       "type": "dimension",
       "attributes": {
         "category": "size",
-        "type": "size",
+        "type": "dimension",
         "item": "default",
         "subitem": "xxs",
+        "value": "14px",
+        "description": "Deprecated, use --calcite-size-2xs instead.",
+        "filePath": "src/tokens/semantic/size.json",
+        "isSource": true,
+        "key": "{semantic.size.default.xxs}",
+        "name": "calcite-semantic-size-default-xxs",
+        "path": ["semantic", "size", "default", "xxs"],
+        "comment": "Deprecated, use --calcite-size-2xs instead.",
         "names": {
           "scss": "$calcite-size-xxs",
           "css": "var(--calcite-size-xxs)",
@@ -3159,10 +3240,38 @@
           "type": "dimension"
         }
       },
+      "description": "Deprecated, use --calcite-size-2xs instead.",
       "filePath": "src/tokens/semantic/size.json",
       "isSource": true,
       "name": "Size Xxs",
-      "path": ["semantic", "size", "default", "xxs"]
+      "path": ["semantic", "size", "default", "xxs"],
+      "comment": "Deprecated, use --calcite-size-2xs instead."
+    },
+    {
+      "key": "{semantic.size.default.2xs}",
+      "value": "0.875rem",
+      "type": "dimension",
+      "attributes": {
+        "category": "size",
+        "type": "size",
+        "item": "default",
+        "subitem": "2xs",
+        "names": {
+          "scss": "$calcite-size-2xs",
+          "css": "var(--calcite-size-2xs)",
+          "docs": "semantic.size.default.2xs",
+          "es6": "calciteSize2xs"
+        },
+        "calcite-schema": {
+          "system": "calcite",
+          "tier": "semantic",
+          "type": "dimension"
+        }
+      },
+      "filePath": "src/tokens/semantic/size.json",
+      "isSource": true,
+      "name": "Size 2xs",
+      "path": ["semantic", "size", "default", "2xs"]
     },
     {
       "key": "{semantic.size.default.xs}",
@@ -3300,9 +3409,17 @@
       "type": "dimension",
       "attributes": {
         "category": "size",
-        "type": "size",
+        "type": "dimension",
         "item": "default",
         "subitem": "xxl",
+        "value": "64px",
+        "description": "Deprecated, use --calcite-size-2xl instead.",
+        "filePath": "src/tokens/semantic/size.json",
+        "isSource": true,
+        "key": "{semantic.size.default.xxl}",
+        "name": "calcite-semantic-size-default-xxl",
+        "path": ["semantic", "size", "default", "xxl"],
+        "comment": "Deprecated, use --calcite-size-2xl instead.",
         "names": {
           "scss": "$calcite-size-xxl",
           "css": "var(--calcite-size-xxl)",
@@ -3315,10 +3432,38 @@
           "type": "dimension"
         }
       },
+      "description": "Deprecated, use --calcite-size-2xl instead.",
       "filePath": "src/tokens/semantic/size.json",
       "isSource": true,
       "name": "Size Xxl",
-      "path": ["semantic", "size", "default", "xxl"]
+      "path": ["semantic", "size", "default", "xxl"],
+      "comment": "Deprecated, use --calcite-size-2xl instead."
+    },
+    {
+      "key": "{semantic.size.default.2xl}",
+      "value": "4rem",
+      "type": "dimension",
+      "attributes": {
+        "category": "size",
+        "type": "size",
+        "item": "default",
+        "subitem": "2xl",
+        "names": {
+          "scss": "$calcite-size-2xl",
+          "css": "var(--calcite-size-2xl)",
+          "docs": "semantic.size.default.2xl",
+          "es6": "calciteSize2xl"
+        },
+        "calcite-schema": {
+          "system": "calcite",
+          "tier": "semantic",
+          "type": "dimension"
+        }
+      },
+      "filePath": "src/tokens/semantic/size.json",
+      "isSource": true,
+      "name": "Size 2xl",
+      "path": ["semantic", "size", "default", "2xl"]
     },
     {
       "key": "{semantic.size.default.xxxl}",
@@ -3326,9 +3471,17 @@
       "type": "dimension",
       "attributes": {
         "category": "size",
-        "type": "size",
+        "type": "dimension",
         "item": "default",
         "subitem": "xxxl",
+        "value": "96px",
+        "description": "Deprecated, use --calcite-size-3xl instead.",
+        "filePath": "src/tokens/semantic/size.json",
+        "isSource": true,
+        "key": "{semantic.size.default.xxxl}",
+        "name": "calcite-semantic-size-default-xxxl",
+        "path": ["semantic", "size", "default", "xxxl"],
+        "comment": "Deprecated, use --calcite-size-3xl instead.",
         "names": {
           "scss": "$calcite-size-xxxl",
           "css": "var(--calcite-size-xxxl)",
@@ -3341,10 +3494,38 @@
           "type": "dimension"
         }
       },
+      "description": "Deprecated, use --calcite-size-3xl instead.",
       "filePath": "src/tokens/semantic/size.json",
       "isSource": true,
       "name": "Size Xxxl",
-      "path": ["semantic", "size", "default", "xxxl"]
+      "path": ["semantic", "size", "default", "xxxl"],
+      "comment": "Deprecated, use --calcite-size-3xl instead."
+    },
+    {
+      "key": "{semantic.size.default.3xl}",
+      "value": "6rem",
+      "type": "dimension",
+      "attributes": {
+        "category": "size",
+        "type": "size",
+        "item": "default",
+        "subitem": "3xl",
+        "names": {
+          "scss": "$calcite-size-3xl",
+          "css": "var(--calcite-size-3xl)",
+          "docs": "semantic.size.default.3xl",
+          "es6": "calciteSize3xl"
+        },
+        "calcite-schema": {
+          "system": "calcite",
+          "tier": "semantic",
+          "type": "dimension"
+        }
+      },
+      "filePath": "src/tokens/semantic/size.json",
+      "isSource": true,
+      "name": "Size 3xl",
+      "path": ["semantic", "size", "default", "3xl"]
     },
     {
       "key": "{semantic.spacing.fixed.xxs}",

package/dist/es6/breakpoints.d.ts

@@ -3,8 +3,10 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-/** Small handheld devices and mini-windows */
+/** Deprecated, use --calcite-container-size-height-2xs-min|max instead. Small handheld devices and mini-windows */
 export const calciteContainerSizeHeightXxs: { min: string; max: string };
+/** Small handheld devices and mini-windows */
+export const calciteContainerSizeHeight2xs: { min: string; max: string };
 /** Handheld devices */
 export const calciteContainerSizeHeightXs: { min: string; max: string };
 /** Small tablets */
@@ -15,8 +17,10 @@ export const calciteContainerSizeHeightMd: { min: string; max: string };
 export const calciteContainerSizeHeightLg: { min: string; max: string };
 /** Projectors and televisions */
 export const calciteContainerSizeHeightXl: { min: string };
-/** Small handheld devices and mini-windows */
+/** Deprecated, use --calcite-container-size-width-2xs-min|max instead. Small handheld devices and mini-windows */
 export const calciteContainerSizeWidthXxs: { min: string; max: string };
+/** Small handheld devices and mini-windows */
+export const calciteContainerSizeWidth2xs: { min: string; max: string };
 /** Handheld devices */
 export const calciteContainerSizeWidthXs: { min: string; max: string };
 /** Small tablets */

package/dist/es6/breakpoints.js

@@ -3,13 +3,15 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-export const calciteContainerSizeHeightXxs = { min: "0", max: "154px" }; // Small handheld devices and mini-windows
+export const calciteContainerSizeHeightXxs = { min: "0", max: "154px" }; // Deprecated, use --calcite-container-size-height-2xs-min|max instead. Small handheld devices and mini-windows
+export const calciteContainerSizeHeight2xs = { 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 calciteContainerSizeWidthXxs = { min: "0", max: "320px" }; // Deprecated, use --calcite-container-size-width-2xs-min|max instead. Small handheld devices and mini-windows
+export const calciteContainerSizeWidth2xs = { 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

package/dist/es6/global.d.ts

@@ -61,8 +61,10 @@ export const calciteBorderWidthNone: string;
 export const calciteBorderWidthSm: string;
 export const calciteBorderWidthMd: string;
 export const calciteBorderWidthLg: string;
-/** Small handheld devices and mini-windows */
+/** Deprecated, use --calcite-container-size-height-2xs-min|max instead. Small handheld devices and mini-windows */
 export const calciteContainerSizeHeightXxs: { min: string; max: string };
+/** Small handheld devices and mini-windows */
+export const calciteContainerSizeHeight2xs: { min: string; max: string };
 /** Handheld devices */
 export const calciteContainerSizeHeightXs: { min: string; max: string };
 /** Small tablets */
@@ -73,8 +75,10 @@ export const calciteContainerSizeHeightMd: { min: string; max: string };
 export const calciteContainerSizeHeightLg: { min: string; max: string };
 /** Projectors and televisions */
 export const calciteContainerSizeHeightXl: { min: string };
-/** Small handheld devices and mini-windows */
+/** Deprecated, use --calcite-container-size-width-2xs-min|max instead. Small handheld devices and mini-windows */
 export const calciteContainerSizeWidthXxs: { min: string; max: string };
+/** Small handheld devices and mini-windows */
+export const calciteContainerSizeWidth2xs: { min: string; max: string };
 /** Handheld devices */
 export const calciteContainerSizeWidthXs: { min: string; max: string };
 /** Small tablets */
@@ -118,7 +122,9 @@ export const calciteFontSize: string;
 export const calciteFontSizeMd: string;
 export const calciteFontSizeLg: string;
 export const calciteFontSizeXl: string;
+/** Deprecated, use --calcite-font-size-2xl instead. */
 export const calciteFontSizeXxl: string;
+export const calciteFontSize2xl: string;
 export const calciteFontSizeRelativeXs: string;
 export const calciteFontSizeRelativeSm: string;
 export const calciteFontSizeRelativeBase: string;
@@ -237,15 +243,23 @@ export const calciteSizeFixedXxl: string;
 /** deprecated */
 export const calciteSizeFixedXxxl: string;
 export const calciteSizePx: string;
+/** Deprecated, use --calcite-size-3xs instead. */
 export const calciteSizeXxxs: string;
+export const calciteSize3xs: string;
+/** Deprecated, use --calcite-size-2xs instead. */
 export const calciteSizeXxs: string;
+export const calciteSize2xs: string;
 export const calciteSizeXs: string;
 export const calciteSizeSm: string;
 export const calciteSizeMd: string;
 export const calciteSizeLg: string;
 export const calciteSizeXl: string;
+/** Deprecated, use --calcite-size-2xl instead. */
 export const calciteSizeXxl: string;
+export const calciteSize2xl: string;
+/** Deprecated, use --calcite-size-3xl instead. */
 export const calciteSizeXxxl: string;
+export const calciteSize3xl: string;
 /** deprecated */
 export const calciteSpacingFixedXxs: string;
 /** deprecated */

package/dist/es6/global.js

@@ -111,13 +111,15 @@ 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 calciteContainerSizeHeightXxs = { min: "0", max: "154px" }; // Deprecated, use --calcite-container-size-height-2xs-min|max instead. Small handheld devices and mini-windows
+export const calciteContainerSizeHeight2xs = { 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 calciteContainerSizeWidthXxs = { min: "0", max: "320px" }; // Deprecated, use --calcite-container-size-width-2xs-min|max instead. Small handheld devices and mini-windows
+export const calciteContainerSizeWidth2xs = { 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
@@ -159,7 +161,8 @@ export const calciteFontSize = "14px";
 export const calciteFontSizeMd = "16px";
 export const calciteFontSizeLg = "18px";
 export const calciteFontSizeXl = "20px";
-export const calciteFontSizeXxl = "24px";
+export const calciteFontSizeXxl = "24px"; // Deprecated, use --calcite-font-size-2xl instead.
+export const calciteFontSize2xl = "24px";
 export const calciteFontSizeRelativeXs = "0.625rem";
 export const calciteFontSizeRelativeSm = "0.75rem";
 export const calciteFontSizeRelativeBase = "0.875rem";
@@ -249,15 +252,19 @@ export const calciteSizeFixedXl = "20px"; // deprecated
 export const calciteSizeFixedXxl = "24px"; // deprecated
 export const calciteSizeFixedXxxl = "32px"; // deprecated
 export const calciteSizePx = "1px";
-export const calciteSizeXxxs = "0.75rem";
-export const calciteSizeXxs = "0.875rem";
+export const calciteSizeXxxs = "0.75rem"; // Deprecated, use --calcite-size-3xs instead.
+export const calciteSize3xs = "0.75rem";
+export const calciteSizeXxs = "0.875rem"; // Deprecated, use --calcite-size-2xs instead.
+export const calciteSize2xs = "0.875rem";
 export const calciteSizeXs = "1rem";
 export const calciteSizeSm = "1.5rem";
 export const calciteSizeMd = "2rem";
 export const calciteSizeLg = "2.75rem";
 export const calciteSizeXl = "3rem";
-export const calciteSizeXxl = "4rem";
-export const calciteSizeXxxl = "6rem";
+export const calciteSizeXxl = "4rem"; // Deprecated, use --calcite-size-2xl instead.
+export const calciteSize2xl = "4rem";
+export const calciteSizeXxxl = "6rem"; // Deprecated, use --calcite-size-3xl instead.
+export const calciteSize3xl = "6rem";
 export const calciteSpacingFixedXxs = "4px"; // deprecated
 export const calciteSpacingFixedXs = "6px"; // deprecated
 export const calciteSpacingFixedSm = "8px"; // deprecated

package/dist/es6/semantic.d.ts

@@ -40,7 +40,9 @@ export const calciteFontSize: string;
 export const calciteFontSizeMd: string;
 export const calciteFontSizeLg: string;
 export const calciteFontSizeXl: string;
+/** Deprecated, use --calcite-font-size-2xl instead. */
 export const calciteFontSizeXxl: string;
+export const calciteFontSize2xl: string;
 export const calciteFontSizeRelativeXs: string;
 export const calciteFontSizeRelativeSm: string;
 export const calciteFontSizeRelativeBase: string;
@@ -159,15 +161,23 @@ export const calciteSizeFixedXxl: string;
 /** deprecated */
 export const calciteSizeFixedXxxl: string;
 export const calciteSizePx: string;
+/** Deprecated, use --calcite-size-3xs instead. */
 export const calciteSizeXxxs: string;
+export const calciteSize3xs: string;
+/** Deprecated, use --calcite-size-2xs instead. */
 export const calciteSizeXxs: string;
+export const calciteSize2xs: string;
 export const calciteSizeXs: string;
 export const calciteSizeSm: string;
 export const calciteSizeMd: string;
 export const calciteSizeLg: string;
 export const calciteSizeXl: string;
+/** Deprecated, use --calcite-size-2xl instead. */
 export const calciteSizeXxl: string;
+export const calciteSize2xl: string;
+/** Deprecated, use --calcite-size-3xl instead. */
 export const calciteSizeXxxl: string;
+export const calciteSize3xl: string;
 /** deprecated */
 export const calciteSpacingFixedXxs: string;
 /** deprecated */

package/dist/es6/semantic.js

@@ -43,7 +43,8 @@ export const calciteFontSize = "14px";
 export const calciteFontSizeMd = "16px";
 export const calciteFontSizeLg = "18px";
 export const calciteFontSizeXl = "20px";
-export const calciteFontSizeXxl = "24px";
+export const calciteFontSizeXxl = "24px"; // Deprecated, use --calcite-font-size-2xl instead.
+export const calciteFontSize2xl = "24px";
 export const calciteFontSizeRelativeXs = "0.625rem";
 export const calciteFontSizeRelativeSm = "0.75rem";
 export const calciteFontSizeRelativeBase = "0.875rem";
@@ -133,15 +134,19 @@ export const calciteSizeFixedXl = "20px"; // deprecated
 export const calciteSizeFixedXxl = "24px"; // deprecated
 export const calciteSizeFixedXxxl = "32px"; // deprecated
 export const calciteSizePx = "1px";
-export const calciteSizeXxxs = "0.75rem";
-export const calciteSizeXxs = "0.875rem";
+export const calciteSizeXxxs = "0.75rem"; // Deprecated, use --calcite-size-3xs instead.
+export const calciteSize3xs = "0.75rem";
+export const calciteSizeXxs = "0.875rem"; // Deprecated, use --calcite-size-2xs instead.
+export const calciteSize2xs = "0.875rem";
 export const calciteSizeXs = "1rem";
 export const calciteSizeSm = "1.5rem";
 export const calciteSizeMd = "2rem";
 export const calciteSizeLg = "2.75rem";
 export const calciteSizeXl = "3rem";
-export const calciteSizeXxl = "4rem";
-export const calciteSizeXxxl = "6rem";
+export const calciteSizeXxl = "4rem"; // Deprecated, use --calcite-size-2xl instead.
+export const calciteSize2xl = "4rem";
+export const calciteSizeXxxl = "6rem"; // Deprecated, use --calcite-size-3xl instead.
+export const calciteSize3xl = "6rem";
 export const calciteSpacingFixedXxs = "4px"; // deprecated
 export const calciteSpacingFixedXs = "6px"; // deprecated
 export const calciteSpacingFixedSm = "8px"; // deprecated

package/dist/scss/breakpoints.scss

@@ -2,9 +2,12 @@
 // Calcite Design System
 // Do not edit directly, this file was auto-generated.
 
-$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-container-size-height-xxs-max: 154px; // Small handheld devices and mini-windows
+$calcite-container-size-height-xxs-min: 0; // Deprecated, use --calcite-container-size-height-2xs-min|max instead. Small handheld devices and mini-windows
+$calcite-container-size-height-2xs-min: 0; // Small handheld devices and mini-windows
+$calcite-container-size-width-xxs-min: 0; // Deprecated, use --calcite-container-size-width-2xs-min|max instead. Small handheld devices and mini-windows
+$calcite-container-size-width-2xs-min: 0; // Small handheld devices and mini-windows
+$calcite-container-size-height-xxs-max: 154px; // Deprecated, use --calcite-container-size-height-2xs-min|max instead. Small handheld devices and mini-windows
+$calcite-container-size-height-2xs-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
@@ -14,7 +17,8 @@ $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-xxs-max: 320px; // Deprecated, use --calcite-container-size-width-2xs-min|max instead. Small handheld devices and mini-windows
+$calcite-container-size-width-2xs-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

package/dist/scss/global.scss

@@ -32,7 +32,8 @@ $calcite-font-size: 14px;
 $calcite-font-size-md: 16px;
 $calcite-font-size-lg: 18px;
 $calcite-font-size-xl: 20px;
-$calcite-font-size-xxl: 24px;
+$calcite-font-size-xxl: 24px; // Deprecated, use --calcite-font-size-2xl instead.
+$calcite-font-size-2xl: 24px;
 $calcite-font-size-relative-xs: 0.625rem;
 $calcite-font-size-relative-sm: 0.75rem;
 $calcite-font-size-relative-base: 0.875rem;
@@ -101,15 +102,19 @@ $calcite-size-fixed-xl: 20px; // deprecated
 $calcite-size-fixed-xxl: 24px; // deprecated
 $calcite-size-fixed-xxxl: 32px; // deprecated
 $calcite-size-px: 1px;
-$calcite-size-xxxs: 0.75rem;
-$calcite-size-xxs: 0.875rem;
+$calcite-size-xxxs: 0.75rem; // Deprecated, use --calcite-size-3xs instead.
+$calcite-size-3xs: 0.75rem;
+$calcite-size-xxs: 0.875rem; // Deprecated, use --calcite-size-2xs instead.
+$calcite-size-2xs: 0.875rem;
 $calcite-size-xs: 1rem;
 $calcite-size-sm: 1.5rem;
 $calcite-size-md: 2rem;
 $calcite-size-lg: 2.75rem;
 $calcite-size-xl: 3rem;
-$calcite-size-xxl: 4rem;
-$calcite-size-xxxl: 6rem;
+$calcite-size-xxl: 4rem; // Deprecated, use --calcite-size-2xl instead.
+$calcite-size-2xl: 4rem;
+$calcite-size-xxxl: 6rem; // Deprecated, use --calcite-size-3xl instead.
+$calcite-size-3xl: 6rem;
 $calcite-spacing-fixed-xxs: 4px; // deprecated
 $calcite-spacing-fixed-xs: 6px; // deprecated
 $calcite-spacing-fixed-sm: 8px; // deprecated

package/dist/scss/index.scss

@@ -52,6 +52,7 @@
   --calcite-color-foreground-1: #ffffff;
   --calcite-color-background-none: rgba(255, 255, 255, 0);
   --calcite-color-background: #f7f7f7;
+  --calcite-color-focus: var(--calcite-color-brand);
 }
 @mixin calcite-mode-dark {
   --calcite-color-border-white: #f7f7f7;
@@ -99,4 +100,5 @@
   --calcite-color-foreground-1: #2b2b2b;
   --calcite-color-background-none: rgba(255, 255, 255, 0);
   --calcite-color-background: #212121;
+  --calcite-color-focus: var(--calcite-color-brand);
 }

package/dist/scss/semantic.scss

@@ -30,7 +30,8 @@ $calcite-font-size: 14px;
 $calcite-font-size-md: 16px;
 $calcite-font-size-lg: 18px;
 $calcite-font-size-xl: 20px;
-$calcite-font-size-xxl: 24px;
+$calcite-font-size-xxl: 24px; // Deprecated, use --calcite-font-size-2xl instead.
+$calcite-font-size-2xl: 24px;
 $calcite-font-size-relative-xs: 0.625rem;
 $calcite-font-size-relative-sm: 0.75rem;
 $calcite-font-size-relative-base: 0.875rem;
@@ -99,15 +100,19 @@ $calcite-size-fixed-xl: 20px; // deprecated
 $calcite-size-fixed-xxl: 24px; // deprecated
 $calcite-size-fixed-xxxl: 32px; // deprecated
 $calcite-size-px: 1px;
-$calcite-size-xxxs: 0.75rem;
-$calcite-size-xxs: 0.875rem;
+$calcite-size-xxxs: 0.75rem; // Deprecated, use --calcite-size-3xs instead.
+$calcite-size-3xs: 0.75rem;
+$calcite-size-xxs: 0.875rem; // Deprecated, use --calcite-size-2xs instead.
+$calcite-size-2xs: 0.875rem;
 $calcite-size-xs: 1rem;
 $calcite-size-sm: 1.5rem;
 $calcite-size-md: 2rem;
 $calcite-size-lg: 2.75rem;
 $calcite-size-xl: 3rem;
-$calcite-size-xxl: 4rem;
-$calcite-size-xxxl: 6rem;
+$calcite-size-xxl: 4rem; // Deprecated, use --calcite-size-2xl instead.
+$calcite-size-2xl: 4rem;
+$calcite-size-xxxl: 6rem; // Deprecated, use --calcite-size-3xl instead.
+$calcite-size-3xl: 6rem;
 $calcite-spacing-fixed-xxs: 4px; // deprecated
 $calcite-spacing-fixed-xs: 6px; // deprecated
 $calcite-spacing-fixed-sm: 8px; // deprecated

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@esri/calcite-design-tokens",
-  "version": "4.0.0-next.10",
+  "version": "4.0.0-next.12",
   "description": "Esri's Calcite Design System Tokens",
   "keywords": [
     "Calcite",
@@ -46,5 +46,5 @@
   "devDependencies": {
     "vitest": "4.0.14"
   },
-  "gitHead": "e3a2cf16bbce4abe62d2160186e4db35d87f6d05"
+  "gitHead": "2814b77b84dec3c877256293b904e0420b2bd32e"
 }

package/dist/css/component.css

@@ -1,11 +0,0 @@
-/**
- * Calcite Design System
- * Do not edit directly, this file was auto-generated.
- */
-
-:host {
-  --calcite-internal-color-focus: var(
-    --calcite-color-focus,
-    var(--calcite-ui-focus-color, var(--calcite-color-brand))
-  );
-}