@teseor/css 1.7.0 → 1.9.0

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

@@ -1,12 +1,13 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "list",
   "element": "ul",
   "modifiers": {
-    "style": {
-      "values": ["unstyled", "inline"]
-    },
     "spacing": {
       "values": ["compact", "loose"]
+    },
+    "style": {
+      "values": ["unstyled", "inline"]
     }
   },
   "elements": {
@@ -15,19 +16,23 @@
   "cssVars": [
     {
       "name": "--ui-list-spacing",
-      "default": "var(--unit)"
+      "default": "var(--ui-unit)",
+      "description": "Spacing"
     },
     {
       "name": "--ui-list-marker-color",
-      "default": "var(--ui-color-text-muted)"
+      "default": "var(--ui-color-text-muted)",
+      "description": "Marker color"
     },
     {
       "name": "--ui-list-indent",
-      "default": "var(--ui-space-3)"
+      "default": "var(--ui-space-3)",
+      "description": "Indent"
     },
     {
       "name": "--ui-list-line-height",
-      "default": "var(--ui-leading-md)"
+      "default": "var(--ui-leading-md)",
+      "description": "Line height"
     }
   ]
 }

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

@@ -17,14 +17,17 @@
               "children": [
                 {
                   "tag": "li",
+                  "class": "ui-list__item",
                   "text": "First item in the list"
                 },
                 {
                   "tag": "li",
+                  "class": "ui-list__item",
                   "text": "Second item in the list"
                 },
                 {
                   "tag": "li",
+                  "class": "ui-list__item",
                   "text": "Third item in the list"
                 }
               ]
@@ -141,7 +144,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-stack",
+              "class": "ui-column",
               "style": {
                 "gap": "var(--ui-space-2)"
               },
@@ -271,7 +274,7 @@
   "customization": [
     {
       "token": "--ui-list-spacing",
-      "default": "var(--unit)",
+      "default": "var(--ui-unit)",
       "description": "Gap between items"
     },
     {

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

@@ -1,11 +1,18 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component mark
+// @element mark
 
 @layer components.tokens {
   .mark {
+    // @desc Background color
     --_bg: var(--ui-mark-bg, var(--ui-color-warning, #{t.$color-warning}));
+    // @desc Text color
     --_color: var(--ui-mark-color, var(--ui-color-text, #{t.$color-text}));
+    // @desc Horizontal padding
     --_padding-x: var(--ui-mark-padding-x, var(--ui-space-quarter, #{t.$space-quarter}));
+    // @desc Vertical padding
     --_padding-y: var(--ui-mark-padding-y, 0);
+    // @desc Corner radius
     --_radius: var(--ui-mark-radius, var(--ui-radius-sm, #{t.$radius-sm}));
   }
 }

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

@@ -0,0 +1,33 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "mark",
+  "element": "mark",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-mark-bg",
+      "default": "var(--ui-color-warning)",
+      "description": "Background color"
+    },
+    {
+      "name": "--ui-mark-color",
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
+    },
+    {
+      "name": "--ui-mark-padding-x",
+      "default": "var(--ui-space-quarter)",
+      "description": "Horizontal padding"
+    },
+    {
+      "name": "--ui-mark-padding-y",
+      "default": "0",
+      "description": "Vertical padding"
+    },
+    {
+      "name": "--ui-mark-radius",
+      "default": "var(--ui-radius-sm)",
+      "description": "Corner radius"
+    }
+  ]
+}

package/src/{00-config → config}/tokens/_variables.scss

@@ -132,3 +132,51 @@ $color-interactive: $color-primary;
 $color-interactive-hover: $color-primary-dark;
 
 $color-focus: $color-primary-light;
+
+// Motion - duration scale (matches config/tokens/motion)
+$duration-instant: 50ms;
+$duration-fast: 100ms;
+$duration-base: 150ms;
+$duration-normal: 200ms;
+$duration-slow: 250ms;
+$duration-slower: 400ms;
+
+// Z-index scale (matches config/tokens/zindex)
+$z-base: 0;
+$z-sticky: 100;
+$z-dropdown: 200;
+$z-overlay: 300;
+$z-modal: 400;
+$z-popover: 500;
+$z-tooltip: 600;
+$z-toast: 700;
+$z-drawer: 800;
+$z-debug: 9999;
+
+// Theming
+$hue-primary: 220;
+
+// State opacity
+$opacity-disabled: 0.5;
+$opacity-loading: 0.7;
+
+// Overlay backgrounds
+$overlay-bg: rgb(0 0 0 / 0.5);
+$overlay-bg-light: rgb(255 255 255 / 0.7);
+$overlay-bg-blur: rgb(0 0 0 / 0.3);
+$overlay-bg-subtle: rgb(0 0 0 / 0.1);
+
+// Component defaults - icons
+$icon-stroke: 2;
+$icon-stroke-thin: 1;
+$icon-stroke-thick: 2.5;
+
+// Component defaults - feedback
+$spinner-duration: 750ms;
+$progress-circle-stroke-width: 8;
+$skeleton-shimmer: rgb(255 255 255 / 0.5);
+
+// Component defaults - misc
+$slider-thumb-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
+$toast-viewport-max-width: 420px;
+$spacer-size: 1;

package/src/config/tokens/accessibility.docs.json

@@ -0,0 +1,104 @@
+{
+  "id": "accessibility",
+  "type": "guide",
+  "title": "Accessibility",
+  "description": "Built-in accessibility features: reduced motion, system theme detection, high contrast, and keyboard focus indicators",
+  "skipValidation": true,
+  "sections": [
+    {
+      "title": "Reduced Motion",
+      "description": "All animations and transitions respect prefers-reduced-motion. Duration tokens are set to 0ms, and component animations are disabled with animation: none.",
+      "examples": [
+        {
+          "title": "Duration tokens",
+          "code": "// Motion tokens (config/tokens/motion)\n:root {\n  --ui-duration-fast: 100ms;\n  --ui-duration-base: 150ms;\n  --ui-duration-slow: 250ms;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --ui-duration-fast: 0ms;\n    --ui-duration-base: 0ms;\n    --ui-duration-slow: 0ms;\n  }\n}"
+        },
+        {
+          "title": "Component animations",
+          "description": "Components with keyframe animations add explicit animation: none. Affected: spinner, skeleton, progress, progress-circle, toast, drawer, disclosure, button (loading), icon (spin), status (pulse).",
+          "code": "// Example: spinner\n@media (prefers-reduced-motion: reduce) {\n  .spinner {\n    animation: none;\n  }\n}"
+        }
+      ]
+    },
+    {
+      "title": "System Theme Detection",
+      "description": "Dark mode activates automatically when the OS is set to dark and no explicit data-theme attribute is present. Set data-theme to override.",
+      "examples": [
+        {
+          "title": "Automatic (default)",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-card",
+              "children": [
+                { "tag": "p", "text": "Follows system preference when no data-theme is set" }
+              ]
+            }
+          ],
+          "code": "<!-- Auto-detects system preference -->\n<html>\n  ...\n</html>"
+        },
+        {
+          "title": "Explicit override",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-card",
+              "attrs": { "data-theme": "dark" },
+              "children": [{ "tag": "p", "text": "Forced dark regardless of system preference" }]
+            }
+          ],
+          "code": "<!-- Always dark, ignores system preference -->\n<html data-theme=\"dark\">\n  ...\n</html>"
+        },
+        {
+          "title": "How it works",
+          "code": "// Explicit toggle (highest priority)\n[data-theme=\"dark\"] {\n  --ui-color-bg: var(--ui-color-neutral-900);\n  ...\n}\n\n// Auto-detect (only when no data-theme is set)\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --ui-color-bg: var(--ui-color-neutral-900);\n    ...\n  }\n}"
+        }
+      ]
+    },
+    {
+      "title": "Focus Indicators",
+      "description": "All interactive elements use :focus-visible for keyboard-only focus rings. Mouse clicks do not show focus outlines.",
+      "examples": [
+        {
+          "title": "Keyboard focus",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--sm",
+              "children": [
+                { "tag": "button", "class": "ui-button ui-button--focus", "text": "Button" },
+                {
+                  "tag": "input",
+                  "class": "ui-input ui-input--focus",
+                  "attrs": { "placeholder": "Input" }
+                },
+                {
+                  "tag": "select",
+                  "class": "ui-select ui-select--focus",
+                  "children": [{ "tag": "option", "text": "Select" }]
+                }
+              ]
+            }
+          ],
+          "code": "// :focus-visible only triggers on keyboard navigation\n.input:focus-visible {\n  border-color: var(--_border-color-focus);\n  box-shadow: 0 0 0 var(--ui-border-width-md)\n    var(--ui-color-focus);\n}"
+        }
+      ]
+    },
+    {
+      "title": "Forced Colors (High Contrast)",
+      "description": "Windows High Contrast Mode support. Focus rings use transparent outlines that become visible in forced-colors mode, and the focus color maps to the system Highlight color.",
+      "examples": [
+        {
+          "title": "Focus ring technique",
+          "description": "Components use box-shadow for focus rings in normal mode. A transparent outline provides the visible focus indicator in forced-colors mode (where box-shadow is removed by the browser).",
+          "code": "// Normal mode: box-shadow visible, outline transparent\n.input:focus-visible {\n  outline: var(--ui-border-width-md) solid transparent;\n  outline-offset: var(--ui-border-width-sm);\n  box-shadow: 0 0 0 var(--ui-border-width-md)\n    var(--ui-color-focus);\n}\n\n// Forced colors: browser removes box-shadow,\n// transparent outline becomes system-colored\n@media (forced-colors: active) {\n  :root {\n    --ui-color-focus: Highlight;\n  }\n}"
+        },
+        {
+          "title": "Affected components",
+          "description": "All form controls (input, select, checkbox, radio, slider) and interactive components (button, link, tabs) use this pattern.",
+          "code": "// Components with forced-colors support:\n// Forms: input, select, checkbox, radio, slider\n// Actions: button, close-button\n// Navigation: tabs, breadcrumb, pagination\n// Overlays: modal, drawer, dialog"
+        }
+      ]
+    }
+  ]
+}

package/src/config/tokens/borders/index.scss

@@ -0,0 +1,8 @@
+@layer tokens {
+  :root {
+    // Border widths - derived from unit (8px)
+    --ui-border-width-sm: calc(var(--ui-unit) * 0.125); // 1px
+    --ui-border-width-md: calc(var(--ui-unit) * 0.25); // 2px
+    --ui-border-width-lg: calc(var(--ui-unit) * 0.5); // 4px
+  }
+}

package/src/config/tokens/colors/colors.docs.json

@@ -0,0 +1,316 @@
+{
+  "id": "colors",
+  "type": "token",
+  "title": "Colors",
+  "description": "HSL-based color system with primitive and semantic tokens. Semantic tokens adapt to light/dark themes.",
+  "skipValidation": true,
+  "sections": [
+    {
+      "title": "Text Colors",
+      "description": "Use for typography and icons.",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "p",
+              "style": { "color": "var(--ui-color-text)" },
+              "text": "--ui-color-text: Default text"
+            },
+            {
+              "tag": "p",
+              "style": { "color": "var(--ui-color-text-muted)" },
+              "text": "--ui-color-text-muted: Secondary text, captions"
+            },
+            {
+              "tag": "p",
+              "class": "ui-p-1",
+              "style": {
+                "color": "var(--ui-color-text-inverse)",
+                "background": "var(--ui-color-neutral-900)",
+                "border-radius": "var(--ui-radius-sm)"
+              },
+              "text": "--ui-color-text-inverse: Text on dark backgrounds"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Background Colors",
+      "description": "Use for surfaces, cards, and containers.",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-p-2",
+              "style": {
+                "background": "var(--ui-color-bg)",
+                "border": "1px solid var(--ui-color-border)",
+                "border-radius": "var(--ui-radius-md)"
+              },
+              "text": "--ui-color-bg: Base background"
+            },
+            {
+              "tag": "div",
+              "class": "ui-p-2",
+              "style": {
+                "background": "var(--ui-color-bg-subtle)",
+                "border-radius": "var(--ui-radius-md)"
+              },
+              "text": "--ui-color-bg-subtle: Subtle emphasis"
+            },
+            {
+              "tag": "div",
+              "class": "ui-p-2",
+              "style": {
+                "background": "var(--ui-color-bg-muted)",
+                "border-radius": "var(--ui-radius-md)"
+              },
+              "text": "--ui-color-bg-muted: Stronger emphasis, code blocks"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Border Colors",
+      "description": "Use for dividers, inputs, and card borders.",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-p-2",
+              "style": {
+                "border": "2px solid var(--ui-color-border)",
+                "border-radius": "var(--ui-radius-md)"
+              },
+              "text": "--ui-color-border: Default borders"
+            },
+            {
+              "tag": "div",
+              "class": "ui-p-2",
+              "style": {
+                "border": "2px solid var(--ui-color-border-strong)",
+                "border-radius": "var(--ui-radius-md)"
+              },
+              "text": "--ui-color-border-strong: Emphasized borders"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Interactive Colors",
+      "description": "Use for links, buttons, and interactive elements.",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "p",
+              "style": { "color": "var(--ui-color-interactive)" },
+              "text": "--ui-color-interactive: Links, primary actions"
+            },
+            {
+              "tag": "p",
+              "style": { "color": "var(--ui-color-interactive-hover)" },
+              "text": "--ui-color-interactive-hover: Hover state"
+            },
+            {
+              "tag": "div",
+              "class": "ui-p-1",
+              "style": {
+                "display": "inline-block",
+                "outline": "3px solid var(--ui-color-focus)",
+                "outline-offset": "2px",
+                "border-radius": "var(--ui-radius-sm)"
+              },
+              "text": "--ui-color-focus: Focus rings"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Status Colors",
+      "description": "Use for feedback, alerts, and validation.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--sm",
+              "children": [
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-success); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                { "tag": "span", "text": "--ui-color-success" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--sm",
+              "children": [
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-warning); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                { "tag": "span", "text": "--ui-color-warning" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--sm",
+              "children": [
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-danger); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                { "tag": "span", "text": "--ui-color-danger" }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Primary Scale",
+      "description": "Brand color with light and dark variants.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--sm",
+              "children": [
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-primary-light); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                { "tag": "span", "text": "--ui-color-primary-light" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--sm",
+              "children": [
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-primary); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                { "tag": "span", "text": "--ui-color-primary" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--sm",
+              "children": [
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-primary-dark); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                { "tag": "span", "text": "--ui-color-primary-dark" }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Neutral Scale",
+      "description": "Gray scale for text, backgrounds, and borders. Derived from primary hue for subtle warmth.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--sm",
+              "attrs": { "style": "flex-wrap: wrap" },
+              "children": [
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-50); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-100); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-200); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-300); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-400); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-500); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-600); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-700); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-800); border-radius: var(--ui-radius-sm)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "attrs": {
+                    "style": "width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-900); border-radius: var(--ui-radius-sm)"
+                  }
+                }
+              ]
+            }
+          ],
+          "code": "50 → 100 → 200 → 300 → 400 → 500 → 600 → 700 → 800 → 900"
+        }
+      ]
+    }
+  ]
+}

package/src/config/tokens/colors/index.scss

@@ -0,0 +1,28 @@
+@layer tokens {
+  :root {
+    // Base colors - override these to customize the design system
+    --ui-color-primary: oklch(55% 0.22 250);
+    --ui-color-success: oklch(60% 0.18 145);
+    --ui-color-warning: oklch(75% 0.18 70);
+    --ui-color-danger: oklch(60% 0.22 25);
+    --ui-color-neutral: oklch(50% 0.02 250);
+
+    // Primary shades - auto-generated via color-mix
+    --ui-color-primary-light: color-mix(in oklch, var(--ui-color-primary) 50%, white);
+    --ui-color-primary-dark: color-mix(in oklch, var(--ui-color-primary) 75%, black);
+    --ui-color-primary-subtle: color-mix(in oklch, var(--ui-color-primary) 12%, white);
+    --ui-color-primary-hover: color-mix(in oklch, var(--ui-color-primary) 85%, black);
+
+    // Neutral scale - auto-generated via color-mix
+    --ui-color-neutral-50: color-mix(in oklch, var(--ui-color-neutral) 3%, white);
+    --ui-color-neutral-100: color-mix(in oklch, var(--ui-color-neutral) 6%, white);
+    --ui-color-neutral-200: color-mix(in oklch, var(--ui-color-neutral) 12%, white);
+    --ui-color-neutral-300: color-mix(in oklch, var(--ui-color-neutral) 25%, white);
+    --ui-color-neutral-400: color-mix(in oklch, var(--ui-color-neutral) 50%, white);
+    --ui-color-neutral-500: var(--ui-color-neutral);
+    --ui-color-neutral-600: color-mix(in oklch, var(--ui-color-neutral) 85%, black);
+    --ui-color-neutral-700: color-mix(in oklch, var(--ui-color-neutral) 70%, black);
+    --ui-color-neutral-800: color-mix(in oklch, var(--ui-color-neutral) 50%, black);
+    --ui-color-neutral-900: color-mix(in oklch, var(--ui-color-neutral) 35%, black);
+  }
+}

package/src/{00-config → config}/tokens/grid/grid.docs.json

@@ -8,7 +8,7 @@
     {
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "div",

package/src/config/tokens/grid/index.scss

@@ -0,0 +1,13 @@
+@layer tokens {
+  :root {
+    --ui-unit: 8px; // 8px
+    --ui-row: calc(var(--ui-unit) * 2);
+
+    --ui-row-1: var(--ui-row);
+    --ui-row-2: calc(var(--ui-row) * 2);
+    --ui-row-3: calc(var(--ui-row) * 3);
+    --ui-row-4: calc(var(--ui-row) * 4);
+    --ui-row-5: calc(var(--ui-row) * 5);
+    --ui-row-6: calc(var(--ui-row) * 6);
+  }
+}