@teseor/css 1.7.0 → 1.9.0

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

@@ -1,40 +1,58 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component avatar
 // @element div
+// @related avatar-group
 
 @layer components.tokens {
   .avatar {
+    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_color-bg: var(--ui-color-bg, #{t.$color-bg});
+    // @desc Overall size
     --_size: var(--ui-avatar-size, calc(#{t.$unit} * 5));
+    // @desc Background color
     --_bg: var(--ui-avatar-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    // @desc Text color
     --_color: var(--ui-avatar-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Font size
     --_font-size: var(--ui-avatar-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Corner radius
     --_radius: var(--ui-avatar-radius, 50%);
   }
 
   // @modifier size
   .avatar--xs {
+    // @desc Overall size at extra-small size
     --_size: var(--ui-avatar-size-xs, calc(#{t.$unit} * 3));
+    // @desc Font size at extra-small size
     --_font-size: var(--ui-avatar-font-size-xs, var(--ui-font-size-xs, #{t.$font-size-xs}));
   }
 
   .avatar--sm {
+    // @desc Overall size at small size
     --_size: var(--ui-avatar-size-sm, calc(#{t.$unit} * 4));
+    // @desc Font size at small size
     --_font-size: var(--ui-avatar-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
   }
 
   .avatar--lg {
+    // @desc Overall size at large size
     --_size: var(--ui-avatar-size-lg, calc(#{t.$unit} * 6));
+    // @desc Font size at large size
     --_font-size: var(--ui-avatar-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
   }
 
   .avatar--xl {
+    // @desc Overall size at extra-large size
     --_size: var(--ui-avatar-size-xl, calc(#{t.$unit} * 8));
+    // @desc Font size at extra-large size
     --_font-size: var(--ui-avatar-font-size-xl, var(--ui-font-size-lg, #{t.$font-size-lg}));
   }
 
   // @modifier boolean square
   .avatar--square {
+    // @desc Radius square
     --_radius: var(--ui-avatar-radius-square, var(--ui-radius-md, #{t.$radius-md}));
   }
 }
@@ -53,7 +71,7 @@
     overflow: hidden;
 
     font-size: var(--_font-size);
-    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
+    font-weight: var(--_weight-medium);
     line-height: 1;
     text-transform: uppercase;
     color: var(--_color);
@@ -94,7 +112,7 @@
     > .avatar {
       margin-inline-start: calc(var(--_size) * -0.25);
 
-      border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--ui-color-bg, #{t.$color-bg});
+      border: var(--_border-width-sm) solid var(--_color-bg);
 
       &:last-child {
         margin-inline-start: 0;

package/src/components/data-display/badge/badge.api.json

@@ -0,0 +1,80 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "badge",
+  "element": "span",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "variant": {
+      "values": ["primary", "success", "warning", "danger"]
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-badge-accent",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Accent color"
+    },
+    {
+      "name": "--ui-badge-height",
+      "default": "calc(var(--ui-row) * 1.25)",
+      "description": "Overall height"
+    },
+    {
+      "name": "--ui-badge-padding-x",
+      "default": "var(--ui-space-1)",
+      "description": "Horizontal padding"
+    },
+    {
+      "name": "--ui-badge-font-size",
+      "default": "var(--ui-font-size-xs)",
+      "description": "Font size"
+    },
+    {
+      "name": "--ui-badge-font-weight",
+      "default": "var(--ui-weight-medium)",
+      "description": "Font weight"
+    },
+    {
+      "name": "--ui-badge-radius",
+      "default": "var(--ui-radius-full)",
+      "description": "Corner radius"
+    },
+    {
+      "name": "--ui-badge-color",
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
+    },
+    {
+      "name": "--ui-badge-height-sm",
+      "default": "var(--ui-row)",
+      "description": "Overall height at small size"
+    },
+    {
+      "name": "--ui-badge-padding-x-sm",
+      "default": "var(--ui-space-0)",
+      "description": "Horizontal padding at small size"
+    },
+    {
+      "name": "--ui-badge-font-size-sm",
+      "default": "calc(var(--ui-font-size-xs) * 0.85)",
+      "description": "Font size at small size"
+    },
+    {
+      "name": "--ui-badge-height-lg",
+      "default": "calc(var(--ui-row) * 1.5)",
+      "description": "Overall height at large size"
+    },
+    {
+      "name": "--ui-badge-padding-x-lg",
+      "default": "var(--ui-space-2)",
+      "description": "Horizontal padding at large size"
+    },
+    {
+      "name": "--ui-badge-font-size-lg",
+      "default": "var(--ui-font-size-md)",
+      "description": "Font size at large size"
+    }
+  ]
+}

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

@@ -9,7 +9,7 @@
       "title": "Default",
       "examples": [
         {
-          "html": "<span class=\"ui-badge\">Default</span>"
+          "items": [{ "tag": "span", "class": "ui-badge", "text": "Default" }]
         }
       ]
     },
@@ -24,7 +24,7 @@
             { "tag": "span", "class": "ui-badge ui-badge--warning", "text": "Warning" },
             { "tag": "span", "class": "ui-badge ui-badge--danger", "text": "Danger" }
           ],
-          "layout": "cluster"
+          "layout": "row"
         }
       ]
     },
@@ -34,9 +34,10 @@
         {
           "items": [
             { "tag": "span", "class": "ui-badge ui-badge--sm", "text": "Small" },
-            { "tag": "span", "class": "ui-badge", "text": "Default" }
+            { "tag": "span", "class": "ui-badge", "text": "Default" },
+            { "tag": "span", "class": "ui-badge ui-badge--lg", "text": "Large" }
           ],
-          "layout": "cluster"
+          "layout": "row"
         }
       ]
     },
@@ -44,10 +45,29 @@
       "title": "Use Cases",
       "examples": [
         {
-          "html": "<div class=\"ui-cluster\"><span>Notifications</span><span class=\"ui-badge ui-badge--primary\">5</span></div>"
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row",
+              "children": [
+                { "tag": "span", "text": "Notifications" },
+                { "tag": "span", "class": "ui-badge ui-badge--primary", "text": "5" }
+              ]
+            }
+          ]
         },
         {
-          "html": "<div class=\"ui-cluster\"><span class=\"ui-badge ui-badge--success\">Published</span><span class=\"ui-badge ui-badge--warning\">Draft</span><span class=\"ui-badge ui-badge--danger\">Archived</span></div>"
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row",
+              "children": [
+                { "tag": "span", "class": "ui-badge ui-badge--success", "text": "Published" },
+                { "tag": "span", "class": "ui-badge ui-badge--warning", "text": "Draft" },
+                { "tag": "span", "class": "ui-badge ui-badge--danger", "text": "Archived" }
+              ]
+            }
+          ]
         }
       ]
     }
@@ -59,6 +79,11 @@
       "description": "Default height"
     },
     { "token": "--ui-badge-height-sm", "default": "var(--ui-row)", "description": "Small height" },
+    {
+      "token": "--ui-badge-height-lg",
+      "default": "calc(var(--ui-row) * 1.5)",
+      "description": "Large height"
+    },
     {
       "token": "--ui-badge-padding-x",
       "default": "var(--ui-space-1)",
@@ -84,6 +109,6 @@
       "default": "var(--ui-color-bg-muted)",
       "description": "Background color"
     },
-    { "token": "--ui-badge-text", "default": "var(--ui-color-text)", "description": "Text color" }
+    { "token": "--ui-badge-color", "default": "var(--ui-color-text)", "description": "Text color" }
   ]
 }

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

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component badge
 // @element span
@@ -6,43 +6,62 @@
 @layer components.tokens {
   .badge {
     // Single accent color - variants override this
+    // @desc Accent color
     --_accent: var(--ui-badge-accent, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
 
+    // @desc Overall height
     --_height: var(--ui-badge-height, calc(var(--ui-row, #{t.$row}) * 1.25));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-badge-padding-x, var(--ui-space-1, #{t.$space-1}));
+    // @desc Font size
     --_font-size: var(--ui-badge-font-size, var(--ui-font-size-xs, #{t.$font-size-xs}));
+    // @desc Font weight
     --_font-weight: var(--ui-badge-font-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    // @desc Corner radius
     --_radius: var(--ui-badge-radius, var(--ui-radius-full, #{t.$radius-full}));
     --_bg: var(--_accent);
-    --_text: var(--ui-badge-text, var(--ui-color-text, #{t.$color-text}));
+    // @desc Text color
+    --_color: var(--ui-badge-color, var(--ui-color-text, #{t.$color-text}));
   }
 
   // @modifier size
   .badge--sm {
+    // @desc Overall height at small size
     --_height: var(--ui-badge-height-sm, var(--ui-row, #{t.$row}));
+    // @desc Horizontal padding at small size
     --_padding-x: var(--ui-badge-padding-x-sm, var(--ui-space-0, #{t.$space-0}));
+    // @desc Font size at small size
     --_font-size: var(--ui-badge-font-size-sm, calc(var(--ui-font-size-xs, #{t.$font-size-xs}) * 0.85));
   }
 
+  .badge--lg {
+    // @desc Overall height at large size
+    --_height: var(--ui-badge-height-lg, calc(var(--ui-row, #{t.$row}) * 1.5));
+    // @desc Horizontal padding at large size
+    --_padding-x: var(--ui-badge-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    // @desc Font size at large size
+    --_font-size: var(--ui-badge-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
+  }
+
   // @modifier variant
   .badge--primary {
     --_accent: var(--ui-color-primary, #{t.$color-primary});
-    --_text: var(--ui-color-text-inverse, #{t.$color-text-inverse});
+    --_color: var(--ui-color-text-inverse, #{t.$color-text-inverse});
   }
 
   .badge--success {
     --_accent: var(--ui-color-success, #{t.$color-success});
-    --_text: var(--ui-color-text-inverse, #{t.$color-text-inverse});
+    --_color: var(--ui-color-text-inverse, #{t.$color-text-inverse});
   }
 
   .badge--warning {
     --_accent: var(--ui-color-warning, #{t.$color-warning});
-    --_text: var(--ui-color-text, #{t.$color-text});
+    --_color: var(--ui-color-text, #{t.$color-text});
   }
 
   .badge--danger {
     --_accent: var(--ui-color-danger, #{t.$color-danger});
-    --_text: var(--ui-color-text-inverse, #{t.$color-text-inverse});
+    --_color: var(--ui-color-text-inverse, #{t.$color-text-inverse});
   }
 }
 
@@ -59,7 +78,7 @@
     font-weight: var(--_font-weight);
     line-height: 1;
     white-space: nowrap;
-    color: var(--_text);
+    color: var(--_color);
 
     background: var(--_bg);
     border-radius: var(--_radius);

package/src/components/data-display/card/card.api.json

@@ -0,0 +1,66 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "card",
+  "element": "div",
+  "modifiers": {
+    "variant": {
+      "values": ["subtle", "muted"]
+    },
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "interactive": {
+      "type": "boolean"
+    },
+    "flush": {
+      "type": "boolean"
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-card-padding",
+      "default": "var(--ui-space-4)",
+      "description": "Padding on all sides"
+    },
+    {
+      "name": "--ui-card-border-width",
+      "default": "var(--ui-border-width-sm)",
+      "description": "Border thickness"
+    },
+    {
+      "name": "--ui-card-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "name": "--ui-card-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    {
+      "name": "--ui-card-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
+    },
+    {
+      "name": "--ui-card-bg-subtle",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Bg subtle"
+    },
+    {
+      "name": "--ui-card-bg-muted",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Bg muted"
+    },
+    {
+      "name": "--ui-card-padding-sm",
+      "default": "var(--ui-space-2)",
+      "description": "Padding on all sides at small size"
+    },
+    {
+      "name": "--ui-card-padding-lg",
+      "default": "var(--ui-space-6)",
+      "description": "Padding on all sides at large size"
+    }
+  ]
+}

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/components/data-display/card/index.scss

@@ -0,0 +1,76 @@
+// @component card
+// @element div
+
+@layer components.tokens {
+  .card {
+    --_row-1: var(--ui-row-1);
+    --_duration-fast: var(--ui-duration-fast);
+    --_ease-default: var(--ui-ease-default);
+    // @desc Padding on all sides
+    --_padding: var(--ui-card-padding, var(--ui-space-4));
+    // @desc Border thickness
+    --_border-width: var(--ui-card-border-width, var(--ui-border-width-sm));
+    // @desc Background color
+    --_bg: var(--ui-card-bg, var(--ui-color-bg));
+    // @desc Border color
+    --_border-color: var(--ui-card-border-color, var(--ui-color-border));
+    // @desc Corner radius
+    --_radius: var(--ui-card-radius, var(--ui-radius-md));
+  }
+
+  // @modifier variant
+  // @desc Bg subtle
+  .card--subtle { --_bg: var(--ui-card-bg-subtle, var(--ui-color-bg-subtle)); }
+  // @desc Bg muted
+  .card--muted { --_bg: var(--ui-card-bg-muted, var(--ui-color-bg-muted)); }
+
+  // @modifier size
+  // @desc Padding on all sides at small size
+  .card--sm { --_padding: var(--ui-card-padding-sm, var(--ui-space-2)); }
+  // @desc Padding on all sides at large size
+  .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;
+    --_border-width: 0;
+  }
+}
+
+@layer components.styles {
+  .card {
+    // 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(--_row-1);
+
+    background: var(--_bg);
+    border: var(--_border-width) solid var(--_border-color);
+    border-radius: var(--_radius);
+  }
+
+  .card--interactive {
+    transition:
+      background-color var(--_duration-fast) var(--_ease-default),
+      border-color var(--_duration-fast) var(--_ease-default),
+      box-shadow var(--_duration-fast) var(--_ease-default);
+
+    &:hover {
+      // @desc Bg hover
+      --_bg: var(--ui-card-bg-hover, var(--ui-color-bg-subtle));
+      // @desc Border color hover
+      --_border-color: var(--ui-card-border-color-hover, var(--ui-color-border-strong));
+    }
+
+    &:active {
+      // @desc Bg 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

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "data-list",
   "element": "div",
   "modifiers": {
@@ -20,19 +21,23 @@
   "cssVars": [
     {
       "name": "--ui-data-list-gap",
-      "default": "calc(#{t.$unit} * 2"
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Gap between children"
     },
     {
       "name": "--ui-data-list-item-gap",
-      "default": "calc(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Item gap between children"
     },
     {
       "name": "--ui-data-list-label-color",
-      "default": "var(--ui-color-text-muted)"
+      "default": "var(--ui-color-text-muted)",
+      "description": "Label text color"
     },
     {
       "name": "--ui-data-list-value-color",
-      "default": "var(--ui-color-text)"
+      "default": "var(--ui-color-text)",
+      "description": "Value display text color"
     }
   ]
 }