@teseor/css 1.8.0 → 1.9.0

package/src/components/typography/code/index.scss

@@ -1,26 +1,43 @@
 @use '../../../config/tokens/variables' as t;
+// @component code
+// @element div
+// @related code-block
 
 // Token definitions
 @layer components.tokens {
   // Inline code
   .code {
+    --_font-mono: var(--ui-font-mono, #{t.$font-mono});
+    --_leading-tight-sm: var(--ui-leading-tight-sm, #{t.$leading-tight-sm});
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    // @desc Font size
     --_font-size: var(--ui-code-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Background color
     --_bg: var(--ui-code-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-code-padding-x, var(--ui-space-1, #{t.$space-1}));
+    // @desc Vertical padding
     --_padding-y: var(--ui-code-padding-y, var(--ui-space-0, #{t.$space-0}));
+    // @desc Corner radius
     --_radius: var(--ui-code-radius, var(--ui-radius-sm, #{t.$radius-sm}));
   }
 
+  // @modifier size
   .code--sm {
     --_font-size: var(--ui-font-size-xs, #{t.$font-size-xs});
   }
 
   // Code block
   .code-block {
+    // @desc Font size block
     --_font-size: var(--ui-code-font-size-block, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Bg block
     --_bg: var(--ui-code-bg-block, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    // @desc Vertical padding
     --_padding: var(--ui-code-padding-block, var(--ui-space-3, #{t.$space-3}));
+    // @desc Radius block
     --_radius: var(--ui-code-radius-block, var(--ui-radius-md, #{t.$radius-md}));
+    // @desc Border color block
     --_border-color: var(--ui-code-border-color-block, var(--ui-color-border, #{t.$color-border}));
   }
 }
@@ -30,9 +47,9 @@
   .code {
     padding: var(--_padding-y) var(--_padding-x);
 
-    font-family: var(--ui-font-mono, #{t.$font-mono});
+    font-family: var(--_font-mono);
     font-size: var(--_font-size);
-    line-height: var(--ui-leading-tight-sm, #{t.$leading-tight-sm});
+    line-height: var(--_leading-tight-sm);
 
     background: var(--_bg);
     border-radius: var(--_radius);
@@ -41,16 +58,16 @@
   .code-block {
     display: block;
     // Subtract border from padding to keep total on grid
-    padding: calc(var(--_padding) - var(--ui-border-width-sm, #{t.$border-width-sm}));
+    padding: calc(var(--_padding) - var(--_border-width-sm));
     overflow-x: auto;
 
-    font-family: var(--ui-font-mono, #{t.$font-mono});
+    font-family: var(--_font-mono);
     font-size: var(--_font-size);
-    line-height: var(--ui-leading-tight-sm, #{t.$leading-tight-sm});
+    line-height: var(--_leading-tight-sm);
     white-space: pre;
 
     background: var(--_bg);
-    border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    border: var(--_border-width-sm) solid var(--_border-color);
     border-radius: var(--_radius);
 
     code {

package/src/components/typography/code-block/code-block.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "code-block",
   "element": "pre",
   "modifiers": {
@@ -9,48 +10,66 @@
       "type": "boolean"
     }
   },
-  "subElements": ["code", "line", "line-number"],
-  "relatedComponents": ["code"],
+  "elements": {
+    "code": {},
+    "line": {},
+    "line-number": {}
+  },
+  "relatedComponents": [
+    {
+      "name": "code"
+    }
+  ],
   "cssVars": [
     {
       "name": "--ui-code-block-bg",
-      "default": "var(--ui-color-bg-muted)"
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Background color"
     },
     {
       "name": "--ui-code-block-color",
-      "default": "var(--ui-color-text)"
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
     },
     {
       "name": "--ui-code-block-border-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
     },
     {
       "name": "--ui-code-block-padding",
-      "default": "var(--ui-space-3)"
+      "default": "var(--ui-space-3)",
+      "description": "Padding on all sides"
     },
     {
       "name": "--ui-code-block-font-size",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
     },
     {
       "name": "--ui-code-block-line-height",
-      "default": "var(--ui-leading-tight-sm)"
+      "default": "var(--ui-leading-tight-sm)",
+      "description": "Line height"
     },
     {
       "name": "--ui-code-block-radius",
-      "default": "var(--ui-radius-md)"
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
     },
     {
       "name": "--ui-code-block-padding-compact",
-      "default": "var(--ui-space-1)"
+      "default": "var(--ui-space-1)",
+      "description": "Padding compact"
     },
     {
       "name": "--ui-code-block-line-number-color",
-      "default": "var(--ui-color-text-muted)"
+      "default": "var(--ui-color-text-muted)",
+      "description": "Line number color"
     },
     {
       "name": "--ui-code-block-line-number-border-color",
-      "default": "var(--ui-color-border)"
+      "default": "var(--ui-color-border)",
+      "description": "Line number border color"
     }
   ]
 }

package/src/components/typography/code-block/code-block.docs.json

@@ -185,6 +185,24 @@
         }
       ]
     },
+    {
+      "title": "Inline code",
+      "description": "Use the related ui-code class for inline snippets.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "p",
+              "children": [
+                { "tag": "span", "text": "Use " },
+                { "tag": "code", "class": "ui-code", "text": "var(--ui-space-2)" },
+                { "tag": "span", "text": " for consistent spacing." }
+              ]
+            }
+          ]
+        }
+      ]
+    },
     {
       "title": "Compact with line numbers",
       "examples": [

package/src/components/typography/code-block/index.scss

@@ -1,23 +1,42 @@
 @use '../../../config/tokens/variables' as t;
+// @component code-block
+// @element pre
+// @related code
 
 // Token definitions
 @layer components.tokens {
   .code-block {
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_font-mono: var(--ui-font-mono, #{t.$font-mono});
+    --_space-4: var(--ui-space-4, #{t.$space-4});
+    --_space-2: var(--ui-space-2, #{t.$space-2});
+    // @desc Background color
     --_bg: var(--ui-code-block-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    // @desc Text color
     --_color: var(--ui-code-block-color, var(--ui-color-text, #{t.$color-text}));
+    // @desc Border color
     --_border-color: var(--ui-code-block-border-color, var(--ui-color-border, #{t.$color-border}));
+    // @desc Padding on all sides
     --_padding: var(--ui-code-block-padding, var(--ui-space-3, #{t.$space-3}));
+    // @desc Font size
     --_font-size: var(--ui-code-block-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Line height
     --_line-height: var(--ui-code-block-line-height, var(--ui-leading-tight-sm, #{t.$leading-tight-sm}));
+    // @desc Corner radius
     --_radius: var(--ui-code-block-radius, var(--ui-radius-md, #{t.$radius-md}));
   }
 
+  // @modifier boolean compact
   .code-block--compact {
+    // @desc Padding compact
     --_padding: var(--ui-code-block-padding-compact, var(--ui-space-1, #{t.$space-1}));
   }
 
+  // @modifier boolean line-numbers
   .code-block--line-numbers {
+    // @desc Line number color
     --_line-number-color: var(--ui-code-block-line-number-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Line number border color
     --_line-number-border-color: var(--ui-code-block-line-number-border-color, var(--ui-color-border, #{t.$color-border}));
   }
 }
@@ -27,17 +46,17 @@
   .code-block {
     display: block;
     // Subtract border from padding to keep total on grid
-    padding: calc(var(--_padding) - var(--ui-border-width-sm, #{t.$border-width-sm}));
+    padding: calc(var(--_padding) - var(--_border-width-sm));
     overflow-x: auto;
 
-    font-family: var(--ui-font-mono, #{t.$font-mono});
+    font-family: var(--_font-mono);
     font-size: var(--_font-size);
     line-height: var(--_line-height);
     white-space: pre;
     color: var(--_color);
 
     background: var(--_bg);
-    border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    border: var(--_border-width-sm) solid var(--_border-color);
     border-radius: var(--_radius);
   }
 
@@ -67,16 +86,16 @@
       counter-increment: line-number;
 
       box-sizing: border-box;
-      min-inline-size: var(--ui-space-4, #{t.$space-4});
-      padding-inline-end: var(--ui-space-2, #{t.$space-2});
-      margin-inline-end: var(--ui-space-2, #{t.$space-2});
+      min-inline-size: var(--_space-4);
+      padding-inline-end: var(--_space-2);
+      margin-inline-end: var(--_space-2);
 
       font-variant-numeric: tabular-nums;
 
       text-align: end;
       color: var(--_line-number-color);
 
-      border-inline-end: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_line-number-border-color);
+      border-inline-end: var(--_border-width-sm) solid var(--_line-number-border-color);
       user-select: none;
 
       &::before {

package/src/components/typography/heading/heading.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "heading",
   "element": "h2",
   "modifiers": {
@@ -9,75 +10,93 @@
   "cssVars": [
     {
       "name": "--ui-heading-font-size",
-      "default": "var(--ui-font-size-xl)"
+      "default": "var(--ui-font-size-xl)",
+      "description": "Font size"
     },
     {
       "name": "--ui-heading-line-height",
-      "default": "var(--ui-leading-xl)"
+      "default": "var(--ui-leading-xl)",
+      "description": "Line height"
     },
     {
       "name": "--ui-heading-weight",
-      "default": "var(--ui-weight-bold)"
+      "default": "var(--ui-weight-bold)",
+      "description": "Weight"
     },
     {
       "name": "--ui-heading-color",
-      "default": "var(--ui-color-text)"
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
     },
     {
       "name": "--ui-heading-font-size-4xl",
-      "default": "var(--ui-font-size-4xl)"
+      "default": "var(--ui-font-size-4xl)",
+      "description": "Font size 4xl"
     },
     {
       "name": "--ui-heading-line-height-4xl",
-      "default": "var(--ui-leading-4xl)"
+      "default": "var(--ui-leading-4xl)",
+      "description": "Line height 4xl"
     },
     {
       "name": "--ui-heading-font-size-3xl",
-      "default": "var(--ui-font-size-3xl)"
+      "default": "var(--ui-font-size-3xl)",
+      "description": "Font size 3xl"
     },
     {
       "name": "--ui-heading-line-height-3xl",
-      "default": "var(--ui-leading-3xl)"
+      "default": "var(--ui-leading-3xl)",
+      "description": "Line height 3xl"
     },
     {
       "name": "--ui-heading-font-size-2xl",
-      "default": "var(--ui-font-size-2xl)"
+      "default": "var(--ui-font-size-2xl)",
+      "description": "Font size 2xl"
     },
     {
       "name": "--ui-heading-line-height-2xl",
-      "default": "var(--ui-leading-2xl)"
+      "default": "var(--ui-leading-2xl)",
+      "description": "Line height 2xl"
     },
     {
       "name": "--ui-heading-font-size-xl",
-      "default": "var(--ui-font-size-xl)"
+      "default": "var(--ui-font-size-xl)",
+      "description": "Font size at extra-large size"
     },
     {
       "name": "--ui-heading-line-height-xl",
-      "default": "var(--ui-leading-xl)"
+      "default": "var(--ui-leading-xl)",
+      "description": "Line height at extra-large size"
     },
     {
       "name": "--ui-heading-font-size-lg",
-      "default": "var(--ui-font-size-lg)"
+      "default": "var(--ui-font-size-lg)",
+      "description": "Font size at large size"
     },
     {
       "name": "--ui-heading-line-height-lg",
-      "default": "var(--ui-leading-lg)"
+      "default": "var(--ui-leading-lg)",
+      "description": "Line height at large size"
     },
     {
       "name": "--ui-heading-font-size-md",
-      "default": "var(--ui-font-size-md)"
+      "default": "var(--ui-font-size-md)",
+      "description": "Font size at medium size"
     },
     {
       "name": "--ui-heading-line-height-md",
-      "default": "var(--ui-leading-tight-md)"
+      "default": "var(--ui-leading-tight-md)",
+      "description": "Line height at medium size"
     },
     {
       "name": "--ui-heading-font-size-sm",
-      "default": "var(--ui-font-size-sm)"
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size at small size"
     },
     {
       "name": "--ui-heading-line-height-sm",
-      "default": "var(--ui-leading-tight-sm)"
+      "default": "var(--ui-leading-tight-sm)",
+      "description": "Line height at small size"
     }
   ]
 }

package/src/components/typography/heading/index.scss

@@ -5,45 +5,63 @@
 
 @layer components.tokens {
   .heading {
+    // @desc Font size
     --_font-size: var(--ui-heading-font-size, var(--ui-font-size-xl, #{t.$font-size-xl}));
+    // @desc Line height
     --_line-height: var(--ui-heading-line-height, var(--ui-leading-xl, #{t.$leading-xl}));
+    // @desc Weight
     --_weight: var(--ui-heading-weight, var(--ui-weight-bold, #{t.$weight-bold}));
+    // @desc Text color
     --_color: var(--ui-heading-color, var(--ui-color-text, #{t.$color-text}));
   }
 
   // @modifier size
   .heading--4xl {
+    // @desc Font size 4xl
     --_font-size: var(--ui-heading-font-size-4xl, var(--ui-font-size-4xl, #{t.$font-size-4xl}));
+    // @desc Line height 4xl
     --_line-height: var(--ui-heading-line-height-4xl, var(--ui-leading-4xl, #{t.$leading-4xl}));
   }
 
   .heading--3xl {
+    // @desc Font size 3xl
     --_font-size: var(--ui-heading-font-size-3xl, var(--ui-font-size-3xl, #{t.$font-size-3xl}));
+    // @desc Line height 3xl
     --_line-height: var(--ui-heading-line-height-3xl, var(--ui-leading-3xl, #{t.$leading-3xl}));
   }
 
   .heading--2xl {
+    // @desc Font size 2xl
     --_font-size: var(--ui-heading-font-size-2xl, var(--ui-font-size-2xl, #{t.$font-size-2xl}));
+    // @desc Line height 2xl
     --_line-height: var(--ui-heading-line-height-2xl, var(--ui-leading-2xl, #{t.$leading-2xl}));
   }
 
   .heading--xl {
+    // @desc Font size at extra-large size
     --_font-size: var(--ui-heading-font-size-xl, var(--ui-font-size-xl, #{t.$font-size-xl}));
+    // @desc Line height at extra-large size
     --_line-height: var(--ui-heading-line-height-xl, var(--ui-leading-xl, #{t.$leading-xl}));
   }
 
   .heading--lg {
+    // @desc Font size at large size
     --_font-size: var(--ui-heading-font-size-lg, var(--ui-font-size-lg, #{t.$font-size-lg}));
+    // @desc Line height at large size
     --_line-height: var(--ui-heading-line-height-lg, var(--ui-leading-lg, #{t.$leading-lg}));
   }
 
   .heading--md {
+    // @desc Font size at medium size
     --_font-size: var(--ui-heading-font-size-md, var(--ui-font-size-md, #{t.$font-size-md}));
+    // @desc Line height at medium size
     --_line-height: var(--ui-heading-line-height-md, var(--ui-leading-tight-md, #{t.$leading-tight-md}));
   }
 
   .heading--sm {
+    // @desc Font size at small size
     --_font-size: var(--ui-heading-font-size-sm, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Line height at small size
     --_line-height: var(--ui-heading-line-height-sm, var(--ui-leading-tight-sm, #{t.$leading-tight-sm}));
   }
 

package/src/components/typography/kbd/index.scss

@@ -1,14 +1,26 @@
 @use '../../../config/tokens/variables' as t;
+// @component kbd
+// @element kbd
 
 @layer components.tokens {
   .kbd {
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_space-quarter: var(--ui-space-quarter, #{t.$space-quarter});
+    // @desc Font size
     --_font-size: var(--ui-kbd-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Font family
     --_font-family: var(--ui-kbd-font-family, var(--ui-font-mono, #{t.$font-mono}));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-kbd-padding-x, var(--ui-space-0, #{t.$space-0}));
+    // @desc Vertical padding
     --_padding-y: var(--ui-kbd-padding-y, var(--ui-space-0, #{t.$space-0}));
+    // @desc Background color
     --_bg: var(--ui-kbd-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    // @desc Border color
     --_border-color: var(--ui-kbd-border-color, var(--ui-color-border, #{t.$color-border}));
+    // @desc Corner radius
     --_radius: var(--ui-kbd-radius, var(--ui-radius-sm, #{t.$radius-sm}));
+    // @desc Text color
     --_color: var(--ui-kbd-color, var(--ui-color-text, #{t.$color-text}));
   }
 }
@@ -26,8 +38,8 @@
     color: var(--_color);
 
     background: var(--_bg);
-    border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    border: var(--_border-width-sm) solid var(--_border-color);
     border-radius: var(--_radius);
-    box-shadow: 0 var(--ui-space-quarter, #{t.$space-quarter}) 0 var(--_border-color);
+    box-shadow: 0 var(--_space-quarter) 0 var(--_border-color);
   }
 }

package/src/components/typography/kbd/kbd.api.json

@@ -1,15 +1,48 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "kbd",
   "element": "kbd",
   "modifiers": {},
   "cssVars": [
-    { "name": "--ui-kbd-font-size", "default": "var(--ui-font-size-sm)" },
-    { "name": "--ui-kbd-font-family", "default": "var(--ui-font-mono)" },
-    { "name": "--ui-kbd-padding-x", "default": "var(--ui-space-0)" },
-    { "name": "--ui-kbd-padding-y", "default": "var(--ui-space-0)" },
-    { "name": "--ui-kbd-bg", "default": "var(--ui-color-bg-subtle)" },
-    { "name": "--ui-kbd-border-color", "default": "var(--ui-color-border)" },
-    { "name": "--ui-kbd-radius", "default": "var(--ui-radius-sm)" },
-    { "name": "--ui-kbd-color", "default": "var(--ui-color-text)" }
+    {
+      "name": "--ui-kbd-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
+    },
+    {
+      "name": "--ui-kbd-font-family",
+      "default": "var(--ui-font-mono)",
+      "description": "Font family"
+    },
+    {
+      "name": "--ui-kbd-padding-x",
+      "default": "var(--ui-space-0)",
+      "description": "Horizontal padding"
+    },
+    {
+      "name": "--ui-kbd-padding-y",
+      "default": "var(--ui-space-0)",
+      "description": "Vertical padding"
+    },
+    {
+      "name": "--ui-kbd-bg",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Background color"
+    },
+    {
+      "name": "--ui-kbd-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    {
+      "name": "--ui-kbd-radius",
+      "default": "var(--ui-radius-sm)",
+      "description": "Corner radius"
+    },
+    {
+      "name": "--ui-kbd-color",
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
+    }
   ]
 }

package/src/components/typography/link/index.scss

@@ -5,16 +5,27 @@
 
 @layer components.tokens {
   .link {
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    --_color-focus: var(--ui-color-focus, var(--ui-color-primary));
+    --_color-text-muted: var(--ui-color-text-muted);
+    // @desc Text color
     --_color: var(--ui-link-color, var(--ui-color-primary));
+    // @desc Color hover
     --_color-hover: var(--ui-link-color-hover, var(--ui-color-primary-hover, color-mix(in srgb, var(--_color) 85%, black)));
+    // @desc Color visited
     --_color-visited: var(--ui-link-color-visited, var(--_color));
+    // @desc Decoration
     --_decoration: var(--ui-link-decoration, underline);
+    // @desc Decoration hover
     --_decoration-hover: var(--ui-link-decoration-hover, underline);
   }
 
   // @modifier variant
   .link--muted {
+    // @desc Color muted
     --_color: var(--ui-link-color-muted, var(--ui-color-text-muted));
+    // @desc Color muted hover
     --_color-hover: var(--ui-link-color-muted-hover, var(--ui-color-text));
   }
 
@@ -31,7 +42,7 @@
 
     cursor: pointer;
 
-    transition: color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    transition: color var(--_duration-fast) var(--_ease-default);
     text-underline-offset: calc(#{t.$unit} / 4);
 
     &:hover {
@@ -41,7 +52,7 @@
 
     &:focus-visible {
       border-radius: calc(#{t.$unit} / 4);
-      outline: 2px solid var(--ui-color-focus, var(--ui-color-primary));
+      outline: 2px solid var(--_color-focus);
       outline-offset: calc(#{t.$unit} / 4);
     }
 
@@ -51,9 +62,10 @@
   }
 
   // Disabled link
+  // @modifier boolean disabled
   .link--disabled,
   .link[aria-disabled="true"] {
-    color: var(--ui-color-text-muted);
+    color: var(--_color-text-muted);
 
     opacity: 0.6;
     cursor: not-allowed;
@@ -61,6 +73,7 @@
   }
 
   // External link indicator
+  // @modifier boolean external
   .link--external::after {
 
     content: "\2197"; // ↗