@teseor/css 1.7.0 → 1.9.0

package/src/{04-components → components}/overlays/tooltip/index.scss

@@ -1,17 +1,29 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component tooltip
+// @element div
 
 // Tooltip - small informational popup
 // Appears on hover/focus to provide additional context
 
 @layer components.tokens {
   .tooltip {
-    --_bg: var(--ui-tooltip-bg, var(--ui-color-text, #1a1a1a));
-    --_color: var(--ui-tooltip-color, var(--ui-color-bg, white));
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    // @desc Background color
+    --_bg: var(--ui-tooltip-bg, var(--ui-color-text, #{t.$color-text}));
+    // @desc Text color
+    --_color: var(--ui-tooltip-color, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Corner radius
     --_radius: var(--ui-tooltip-radius, var(--ui-radius-sm, calc(#{t.$unit} / 2)));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-tooltip-padding-x, calc(#{t.$unit} * 1));
+    // @desc Vertical padding
     --_padding-y: var(--ui-tooltip-padding-y, calc(#{t.$unit} / 2));
-    --_size: var(--ui-tooltip-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
-    --_z: var(--ui-tooltip-z, var(--ui-z-tooltip, 500));
+    // @desc Font size
+    --_font-size: var(--ui-tooltip-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    // @desc Z-index stacking order
+    --_z: var(--ui-tooltip-z, var(--ui-z-tooltip, #{t.$z-tooltip}));
+    // @desc Arrow size
     --_arrow-size: var(--ui-tooltip-arrow-size, calc(#{t.$unit} / 2));
   }
 }
@@ -24,7 +36,7 @@
     max-inline-size: calc(#{t.$unit} * 25);
     padding: var(--_padding-y) var(--_padding-x);
 
-    font-size: var(--_size);
+    font-size: var(--_font-size);
     line-height: calc(#{t.$unit} * 2);
     text-align: center;
     white-space: nowrap;
@@ -35,6 +47,7 @@
   }
 
   // Arrow pointing down (tooltip above trigger)
+  // @modifier position
   .tooltip--top::after {
 
     content: "";
@@ -87,6 +100,7 @@
   }
 
   // Animation states
+  // @modifier boolean visible
   .tooltip--visible {
     opacity: 1;
   }
@@ -96,7 +110,8 @@
     pointer-events: none;
   }
 
+  // @modifier boolean animate
   .tooltip--animate {
-    transition: opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    transition: opacity var(--_duration-fast) var(--_ease-default);
   }
 }

package/src/components/overlays/tooltip/tooltip.api.json

@@ -0,0 +1,58 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "tooltip",
+  "element": "div",
+  "modifiers": {
+    "position": {
+      "values": ["top", "bottom", "start", "end"]
+    },
+    "visible": {
+      "type": "boolean"
+    },
+    "animate": {
+      "type": "boolean"
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-tooltip-bg",
+      "default": "var(--ui-color-text)",
+      "description": "Background color"
+    },
+    {
+      "name": "--ui-tooltip-color",
+      "default": "var(--ui-color-bg)",
+      "description": "Text color"
+    },
+    {
+      "name": "--ui-tooltip-radius",
+      "default": "var(--ui-radius-sm)",
+      "description": "Corner radius"
+    },
+    {
+      "name": "--ui-tooltip-padding-x",
+      "default": "calc(var(--ui-unit) * 1)",
+      "description": "Horizontal padding"
+    },
+    {
+      "name": "--ui-tooltip-padding-y",
+      "default": "calc(var(--ui-unit) / 2)",
+      "description": "Vertical padding"
+    },
+    {
+      "name": "--ui-tooltip-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
+    },
+    {
+      "name": "--ui-tooltip-z",
+      "default": "var(--ui-z-tooltip)",
+      "description": "Z-index stacking order"
+    },
+    {
+      "name": "--ui-tooltip-arrow-size",
+      "default": "calc(var(--ui-unit) / 2)",
+      "description": "Arrow size"
+    }
+  ]
+}

package/src/{04-components → components}/overlays/tooltip/tooltip.docs.json

@@ -11,7 +11,40 @@
       "api": "./tooltip.api.json",
       "examples": [
         {
-          "html": "<div style=\"display: flex; gap: var(--ui-space-4); padding: var(--ui-space-4);\"><div style=\"position: relative;\"><span class=\"ui-tooltip ui-tooltip--top\" style=\"position: relative;\">Top tooltip</span></div><div style=\"position: relative;\"><span class=\"ui-tooltip ui-tooltip--bottom\" style=\"position: relative;\">Bottom tooltip</span></div></div>",
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "display: flex; gap: var(--ui-space-4); padding: var(--ui-space-4);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "attrs": { "style": "position: relative;" },
+                  "children": [
+                    {
+                      "tag": "span",
+                      "class": "ui-tooltip ui-tooltip--top",
+                      "attrs": { "style": "position: relative;" },
+                      "text": "Top tooltip"
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "attrs": { "style": "position: relative;" },
+                  "children": [
+                    {
+                      "tag": "span",
+                      "class": "ui-tooltip ui-tooltip--bottom",
+                      "attrs": { "style": "position: relative;" },
+                      "text": "Bottom tooltip"
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
           "code": "<span class=\"ui-tooltip ui-tooltip--top\">Top tooltip</span>\n<span class=\"ui-tooltip ui-tooltip--bottom\">Bottom tooltip</span>\n<span class=\"ui-tooltip ui-tooltip--start\">Start tooltip</span>\n<span class=\"ui-tooltip ui-tooltip--end\">End tooltip</span>"
         }
       ]
@@ -20,7 +53,14 @@
       "title": "With Animation",
       "examples": [
         {
-          "html": "<span class=\"ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible\" style=\"position: relative;\">Animated tooltip</span>",
+          "items": [
+            {
+              "tag": "span",
+              "class": "ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible",
+              "attrs": { "style": "position: relative;" },
+              "text": "Animated tooltip"
+            }
+          ],
           "code": "<span class=\"ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible\">\n  Animated tooltip\n</span>"
         }
       ]
@@ -40,22 +80,22 @@
     },
     {
       "token": "--ui-tooltip-padding-x",
-      "default": "calc(var(--unit) * 1)",
+      "default": "calc(var(--ui-unit) * 1)",
       "description": "Horizontal padding"
     },
     {
       "token": "--ui-tooltip-padding-y",
-      "default": "calc(var(--unit) / 2)",
+      "default": "calc(var(--ui-unit) / 2)",
       "description": "Vertical padding"
     },
     {
-      "token": "--ui-tooltip-size",
+      "token": "--ui-tooltip-font-size",
       "default": "var(--ui-font-size-sm)",
       "description": "Font size"
     },
     {
       "token": "--ui-tooltip-arrow-size",
-      "default": "calc(var(--unit) / 2)",
+      "default": "calc(var(--ui-unit) / 2)",
       "description": "Arrow size"
     },
     { "token": "--ui-tooltip-z", "default": "var(--ui-z-tooltip)", "description": "Z-index" }

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

@@ -0,0 +1,45 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "blockquote",
+  "element": "blockquote",
+  "modifiers": {
+    "variant": {
+      "values": ["accent"]
+    }
+  },
+  "elements": {
+    "cite": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-blockquote-border-color",
+      "default": "var(--ui-color-border-strong)",
+      "description": "Border color"
+    },
+    {
+      "name": "--ui-blockquote-border-width",
+      "default": "var(--ui-border-width-lg)",
+      "description": "Border thickness"
+    },
+    {
+      "name": "--ui-blockquote-padding-inline",
+      "default": "var(--ui-space-3)",
+      "description": "Horizontal padding"
+    },
+    {
+      "name": "--ui-blockquote-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Text color"
+    },
+    {
+      "name": "--ui-blockquote-font-size",
+      "default": "var(--ui-font-size-lg)",
+      "description": "Font size"
+    },
+    {
+      "name": "--ui-blockquote-line-height",
+      "default": "var(--ui-leading-lg)",
+      "description": "Line height"
+    }
+  ]
+}

package/src/{04-components → components}/typography/blockquote/index.scss

@@ -1,15 +1,28 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component blockquote
+// @element blockquote
 
 @layer components.tokens {
   .blockquote {
+    --_space-1: var(--ui-space-1, #{t.$space-1});
+    --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
+    --_leading-sm: var(--ui-leading-sm, #{t.$leading-sm});
+    --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
+    // @desc Border color
     --_border-color: var(--ui-blockquote-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    // @desc Border thickness
     --_border-width: var(--ui-blockquote-border-width, var(--ui-border-width-lg, #{t.$border-width-lg}));
+    // @desc Horizontal padding
     --_padding-inline: var(--ui-blockquote-padding-inline, var(--ui-space-3, #{t.$space-3}));
+    // @desc Text color
     --_color: var(--ui-blockquote-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Font size
     --_font-size: var(--ui-blockquote-font-size, var(--ui-font-size-lg, #{t.$font-size-lg}));
+    // @desc Line height
     --_line-height: var(--ui-blockquote-line-height, var(--ui-leading-lg, #{t.$leading-lg}));
   }
 
+  // @modifier variant
   .blockquote--accent {
     --_border-color: var(--ui-color-primary, #{t.$color-primary});
   }
@@ -31,11 +44,11 @@
   .blockquote__cite {
     display: block;
 
-    margin-block-start: var(--ui-space-1, #{t.$space-1});
+    margin-block-start: var(--_space-1);
 
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    font-size: var(--_font-size-sm);
     font-style: normal;
-    line-height: var(--ui-leading-sm, #{t.$leading-sm});
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    line-height: var(--_leading-sm);
+    color: var(--_color-text-muted);
   }
 }

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

@@ -0,0 +1,67 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "code",
+  "element": "div",
+  "modifiers": {
+    "size": {
+      "values": ["sm"]
+    }
+  },
+  "relatedComponents": [
+    {
+      "name": "code-block"
+    }
+  ],
+  "cssVars": [
+    {
+      "name": "--ui-code-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
+    },
+    {
+      "name": "--ui-code-bg",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Background color"
+    },
+    {
+      "name": "--ui-code-padding-x",
+      "default": "var(--ui-space-1)",
+      "description": "Horizontal padding"
+    },
+    {
+      "name": "--ui-code-padding-y",
+      "default": "var(--ui-space-0)",
+      "description": "Vertical padding"
+    },
+    {
+      "name": "--ui-code-radius",
+      "default": "var(--ui-radius-sm)",
+      "description": "Corner radius"
+    },
+    {
+      "name": "--ui-code-font-size-block",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size block"
+    },
+    {
+      "name": "--ui-code-bg-block",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Bg block"
+    },
+    {
+      "name": "--ui-code-padding-block",
+      "default": "var(--ui-space-3)",
+      "description": "Vertical padding"
+    },
+    {
+      "name": "--ui-code-radius-block",
+      "default": "var(--ui-radius-md)",
+      "description": "Radius block"
+    },
+    {
+      "name": "--ui-code-border-color-block",
+      "default": "var(--ui-color-border)",
+      "description": "Border color block"
+    }
+  ]
+}

package/src/{04-components → components}/typography/code/code.docs.json

@@ -11,11 +11,20 @@
       "examples": [
         {
           "title": "Default",
-          "html": "<p>Use the <code class=\"ui-code\">--space-2</code> token for padding.</p>"
+          "items": [
+            {
+              "tag": "p",
+              "children": [
+                { "text": "Use the " },
+                { "tag": "code", "class": "ui-code", "text": "--space-2" },
+                { "text": " token for padding." }
+              ]
+            }
+          ]
         },
         {
           "title": "Small (for tables)",
-          "html": "<code class=\"ui-code ui-code--sm\">--button-height</code>"
+          "items": [{ "tag": "code", "class": "ui-code ui-code--sm", "text": "--button-height" }]
         }
       ]
     },
@@ -24,7 +33,18 @@
       "examples": [
         {
           "title": "Default",
-          "html": "<pre class=\"ui-code-block\"><code>.button {\n  display: inline-flex;\n  align-items: center;\n}</code></pre>"
+          "items": [
+            {
+              "tag": "pre",
+              "class": "ui-code-block",
+              "children": [
+                {
+                  "tag": "code",
+                  "text": ".button {\n  display: inline-flex;\n  align-items: center;\n}"
+                }
+              ]
+            }
+          ]
         }
       ]
     }

package/src/{04-components → components}/typography/code/index.scss

@@ -1,26 +1,43 @@
-@use '../../../00-config/tokens/variables' as t;
+@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

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

package/src/{04-components → components}/typography/code-block/code-block.docs.json

@@ -1,6 +1,7 @@
 {
   "id": "code-block",
   "type": "component",
+  "mergeInto": "code",
   "title": "Code Block",
   "description": "Multi-line code display with monospace font, horizontal scroll, and optional line numbers.",
   "api": "./code-block.api.json",
@@ -184,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": [