@teseor/css 1.6.0 → 1.8.0

package/src/{04-components → components}/data-display/card/card.docs.json

@@ -1,4 +1,7 @@
 {
+  "id": "card",
+  "type": "component",
+  "title": "Card",
   "api": "./card.api.json",
   "sections": [
     {
@@ -23,7 +26,7 @@
       },
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             { "tag": "div", "class": "ui-card", "text": "Default background" },
             { "tag": "div", "class": "ui-card ui-card--subtle", "text": "Subtle background" },
@@ -45,7 +48,7 @@
       },
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             { "tag": "div", "class": "ui-card ui-card--sm", "text": "Small padding" },
             { "tag": "div", "class": "ui-card", "text": "Default padding" },
@@ -55,6 +58,27 @@
           "code": "{% for s in sizes %}<div class=\"ui-card{% if s.mod %} ui-card--{{ s.mod }}{% endif %}\">{{ s.label }}</div>\n{% endfor %}"
         }
       ]
+    },
+    {
+      "title": "Interactive",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-card ui-card--interactive",
+              "text": "Hover and click this card"
+            },
+            {
+              "tag": "div",
+              "class": "ui-card ui-card--interactive ui-card--subtle",
+              "text": "Interactive subtle card"
+            }
+          ],
+          "code": "<div class=\"ui-card ui-card--interactive\">Clickable card</div>"
+        }
+      ]
     }
   ],
   "customization": [

package/src/{04-components → components}/data-display/card/index.scss

@@ -1,5 +1,3 @@
-@use '../../../00-config/mixins/border' as *;
-
 // @component card
 // @element div
 
@@ -20,6 +18,11 @@
   .card--sm { --_padding: var(--ui-card-padding-sm, var(--ui-space-2)); }
   .card--lg { --_padding: var(--ui-card-padding-lg, var(--ui-space-6)); }
 
+  // @modifier boolean interactive
+  .card--interactive {
+    cursor: pointer;
+  }
+
   // @modifier boolean flush
   .card--flush {
     --_padding: 0;
@@ -27,15 +30,32 @@
   }
 }
 
-// Implementation
 @layer components.styles {
   .card {
-    @include border(var(--_border-width), var(--_border-color));
-    @include rounded(var(--_radius));
-    @include surface(var(--_bg));
     // Subtract border from padding to keep total on grid
     padding: calc(var(--_padding) - var(--_border-width));
+
     // Grid-aligned line-height for text content
     line-height: var(--ui-row-1);
+
+    background: var(--_bg);
+    border: var(--_border-width) solid var(--_border-color);
+    border-radius: var(--_radius);
+  }
+
+  .card--interactive {
+    transition:
+      background-color var(--ui-duration-fast) var(--ui-ease-default),
+      border-color var(--ui-duration-fast) var(--ui-ease-default),
+      box-shadow var(--ui-duration-fast) var(--ui-ease-default);
+
+    &:hover {
+      --_bg: var(--ui-card-bg-hover, var(--ui-color-bg-subtle));
+      --_border-color: var(--ui-card-border-color-hover, var(--ui-color-border-strong));
+    }
+
+    &:active {
+      --_bg: var(--ui-card-bg-active, var(--ui-color-bg-muted));
+    }
   }
 }

package/src/{04-components → components}/data-display/data-list/data-list.api.json

@@ -20,11 +20,11 @@
   "cssVars": [
     {
       "name": "--ui-data-list-gap",
-      "default": "calc(#{t.$unit} * 2"
+      "default": "calc(var(--ui-unit) * 2"
     },
     {
       "name": "--ui-data-list-item-gap",
-      "default": "calc(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1"
     },
     {
       "name": "--ui-data-list-label-color",

package/src/components/data-display/data-list/data-list.docs.json

@@ -0,0 +1,259 @@
+{
+  "id": "data-list",
+  "type": "component",
+  "title": "Data List",
+  "api": "./data-list.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Name" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "John Doe" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Email" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "john@example.com" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Role" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Administrator" }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Horizontal Layout",
+      "description": "Side-by-side label and value",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list ui-data-list--horizontal",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Status" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Active" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Created" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Dec 8, 2025" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Updated" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Dec 8, 2025" }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Divided",
+      "description": "With separator lines between items",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list ui-data-list--divided",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Order ID" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "#12345" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Total" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "$99.00" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Payment" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Credit Card" }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Striped",
+      "description": "Alternating background for readability",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list ui-data-list--striped",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "CPU" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Intel i7" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Memory" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "16 GB" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Storage" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "512 GB SSD" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Display" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "14\" Retina" }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list ui-data-list--sm",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Small" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Compact display" }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Default" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Standard display" }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list ui-data-list--lg",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Large" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Spacious display" }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-data-list-gap",
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Gap between items"
+    },
+    {
+      "token": "--ui-data-list-item-gap",
+      "default": "var(--ui-unit)",
+      "description": "Gap between label and value"
+    },
+    {
+      "token": "--ui-data-list-label-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Label color"
+    },
+    {
+      "token": "--ui-data-list-value-color",
+      "default": "var(--ui-color-text)",
+      "description": "Value color"
+    }
+  ]
+}

package/src/{04-components → components}/data-display/data-list/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // Data-List - key-value pairs
 // Display structured data with labels and values

package/src/{04-components → components}/data-display/icon/icon.docs.json

@@ -11,7 +11,14 @@
       "api": "./icon.api.json",
       "examples": [
         {
-          "html": "<svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 5v14M5 12h14\"/></svg>"
+          "items": [
+            {
+              "tag": "svg",
+              "class": "ui-icon",
+              "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+              "innerHTML": "<path d=\"M12 5v14M5 12h14\"/>"
+            }
+          ]
         }
       ]
     },
@@ -21,7 +28,38 @@
       "api": "./icon.api.json",
       "examples": [
         {
-          "html": "<div class=\"ui-cluster ui-cluster--gap-2\"><svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/><polyline points=\"9 22 9 12 15 12 15 22\"/></svg><svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/></svg><svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"/><path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"/></svg><svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/></svg></div>"
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--gap-2",
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-icon",
+                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                  "innerHTML": "<path d=\"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/><polyline points=\"9 22 9 12 15 12 15 22\"/>"
+                },
+                {
+                  "tag": "svg",
+                  "class": "ui-icon",
+                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                  "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                },
+                {
+                  "tag": "svg",
+                  "class": "ui-icon",
+                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                  "innerHTML": "<path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"/><path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"/>"
+                },
+                {
+                  "tag": "svg",
+                  "class": "ui-icon",
+                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                  "innerHTML": "<path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>"
+                }
+              ]
+            }
+          ]
         }
       ]
     },
@@ -30,74 +68,74 @@
       "description": "Scale icons from extra small to extra large.",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "div",
-              "class": "ui-stack",
+              "class": "ui-column",
               "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
               "children": [
                 {
                   "tag": "svg",
                   "class": "ui-icon ui-icon--xs",
                   "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "html": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                  "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
                 },
                 { "tag": "small", "text": "xs" }
               ]
             },
             {
               "tag": "div",
-              "class": "ui-stack",
+              "class": "ui-column",
               "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
               "children": [
                 {
                   "tag": "svg",
                   "class": "ui-icon ui-icon--sm",
                   "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "html": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                  "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
                 },
                 { "tag": "small", "text": "sm" }
               ]
             },
             {
               "tag": "div",
-              "class": "ui-stack",
+              "class": "ui-column",
               "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
               "children": [
                 {
                   "tag": "svg",
                   "class": "ui-icon ui-icon--md",
                   "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "html": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                  "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
                 },
                 { "tag": "small", "text": "md" }
               ]
             },
             {
               "tag": "div",
-              "class": "ui-stack",
+              "class": "ui-column",
               "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
               "children": [
                 {
                   "tag": "svg",
                   "class": "ui-icon ui-icon--lg",
                   "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "html": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                  "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
                 },
                 { "tag": "small", "text": "lg" }
               ]
             },
             {
               "tag": "div",
-              "class": "ui-stack",
+              "class": "ui-column",
               "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
               "children": [
                 {
                   "tag": "svg",
                   "class": "ui-icon ui-icon--xl",
                   "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "html": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                  "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
                 },
                 { "tag": "small", "text": "xl" }
               ]
@@ -132,7 +170,7 @@
               "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
             }
           ],
-          "layout": "cluster"
+          "layout": "row"
         }
       ]
     },
@@ -156,7 +194,7 @@
               "innerHTML": "<path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\"/>"
             }
           ],
-          "layout": "cluster"
+          "layout": "row"
         }
       ]
     },
@@ -166,7 +204,14 @@
       "api": "./icon.api.json",
       "examples": [
         {
-          "html": "<svg class=\"ui-icon ui-icon--lg ui-icon--spin\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M21 12a9 9 0 1 1-6.219-8.56\"/></svg>"
+          "items": [
+            {
+              "tag": "svg",
+              "class": "ui-icon ui-icon--lg ui-icon--spin",
+              "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+              "innerHTML": "<path d=\"M21 12a9 9 0 1 1-6.219-8.56\"/>"
+            }
+          ]
         }
       ]
     },
@@ -176,7 +221,50 @@
       "api": "./icon.api.json",
       "examples": [
         {
-          "html": "<div class=\"ui-cluster ui-cluster--gap-2\"><span style=\"color: var(--ui-color-primary)\"><svg class=\"ui-icon ui-icon--lg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/></svg></span><span style=\"color: var(--ui-color-success)\"><svg class=\"ui-icon ui-icon--lg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/></svg></span><span style=\"color: var(--ui-color-danger)\"><svg class=\"ui-icon ui-icon--lg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/></svg></span></div>"
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--gap-2",
+              "children": [
+                {
+                  "tag": "span",
+                  "attrs": { "style": "color: var(--ui-color-primary)" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon ui-icon--lg",
+                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                      "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                    }
+                  ]
+                },
+                {
+                  "tag": "span",
+                  "attrs": { "style": "color: var(--ui-color-success)" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon ui-icon--lg",
+                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                      "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                    }
+                  ]
+                },
+                {
+                  "tag": "span",
+                  "attrs": { "style": "color: var(--ui-color-danger)" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon ui-icon--lg",
+                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                      "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
         }
       ]
     }

package/src/{04-components → components}/data-display/icon/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component icon
 // @element svg
@@ -63,4 +63,10 @@
       transform: rotate(360deg);
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .icon--spin {
+      animation: none;
+    }
+  }
 }

package/src/{04-components → components}/data-display/image/image.api.json

@@ -26,19 +26,19 @@
     },
     {
       "name": "--ui-image-size-sm",
-      "default": "calc(var(--unit) * 12)"
+      "default": "calc(var(--ui-unit) * 12)"
     },
     {
       "name": "--ui-image-size-md",
-      "default": "calc(var(--unit) * 24)"
+      "default": "calc(var(--ui-unit) * 24)"
     },
     {
       "name": "--ui-image-size-lg",
-      "default": "calc(var(--unit) * 40)"
+      "default": "calc(var(--ui-unit) * 40)"
     },
     {
       "name": "--ui-image-size-xl",
-      "default": "calc(var(--unit) * 60)"
+      "default": "calc(var(--ui-unit) * 60)"
     },
     {
       "name": "--ui-image-bg",