@teseor/css 1.6.0 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teseor/css",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "description": "CSS library - reset, primitives, components, utilities",
   "license": "MIT",
   "author": "letanure",
@@ -29,7 +29,7 @@
     "src"
   ],
   "scripts": {
-    "build": "pnpm --filter @teseor/source sync:components && sass src/index.scss dist/index.css --style=compressed",
+    "build": "pnpm --filter @teseor/source sync:components && mkdir -p dist && sass src/index.scss dist/compiled.css --no-source-map --style=compressed && postcss dist/compiled.css -o dist/index.css",
     "test:grid": "playwright test --config=playwright.config.ts src/testing/grid-alignment.spec.ts",
     "test:visual": "playwright test --config=playwright.config.ts --grep visual"
   }

package/src/{02-base → base}/root/root.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../config/tokens/variables' as t;
 
 @layer base {
   .root {

package/src/base/typography/typography.docs.json

@@ -0,0 +1,328 @@
+{
+  "id": "typography",
+  "type": "token",
+  "title": "Typography",
+  "description": "Modular scale (1.2 ratio) with 8px grid-snapped line-heights. Responsive breakpoints at 730px and 1080px adjust heading sizes.",
+  "skipValidation": true,
+  "sections": [
+    {
+      "title": "Type Scale",
+      "description": "Font sizes follow a 1.2 (Minor Third) modular scale from 12px to 40px. All line-heights snap to 8px multiples.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "table",
+              "class": "ui-table",
+              "children": [
+                {
+                  "tag": "thead",
+                  "children": [
+                    {
+                      "tag": "tr",
+                      "children": [
+                        { "tag": "th", "text": "Token" },
+                        { "tag": "th", "text": "Size" },
+                        { "tag": "th", "text": "Line-height" }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "tbody",
+                  "children": [
+                    {
+                      "tag": "tr",
+                      "children": [
+                        {
+                          "tag": "td",
+                          "children": [{ "tag": "code", "text": "--ui-font-size-xs" }]
+                        },
+                        { "tag": "td", "text": "12px" },
+                        { "tag": "td", "text": "16px" }
+                      ]
+                    },
+                    {
+                      "tag": "tr",
+                      "children": [
+                        {
+                          "tag": "td",
+                          "children": [{ "tag": "code", "text": "--ui-font-size-sm" }]
+                        },
+                        { "tag": "td", "text": "14px" },
+                        { "tag": "td", "text": "24px" }
+                      ]
+                    },
+                    {
+                      "tag": "tr",
+                      "children": [
+                        {
+                          "tag": "td",
+                          "children": [{ "tag": "code", "text": "--ui-font-size-md" }]
+                        },
+                        { "tag": "td", "text": "16px" },
+                        { "tag": "td", "text": "24px" }
+                      ]
+                    },
+                    {
+                      "tag": "tr",
+                      "children": [
+                        {
+                          "tag": "td",
+                          "children": [{ "tag": "code", "text": "--ui-font-size-lg" }]
+                        },
+                        { "tag": "td", "text": "20px" },
+                        { "tag": "td", "text": "32px" }
+                      ]
+                    },
+                    {
+                      "tag": "tr",
+                      "children": [
+                        {
+                          "tag": "td",
+                          "children": [{ "tag": "code", "text": "--ui-font-size-xl" }]
+                        },
+                        { "tag": "td", "text": "24px" },
+                        { "tag": "td", "text": "32px" }
+                      ]
+                    },
+                    {
+                      "tag": "tr",
+                      "children": [
+                        {
+                          "tag": "td",
+                          "children": [{ "tag": "code", "text": "--ui-font-size-2xl" }]
+                        },
+                        { "tag": "td", "text": "28px" },
+                        { "tag": "td", "text": "32px" }
+                      ]
+                    },
+                    {
+                      "tag": "tr",
+                      "children": [
+                        {
+                          "tag": "td",
+                          "children": [{ "tag": "code", "text": "--ui-font-size-3xl" }]
+                        },
+                        { "tag": "td", "text": "32px" },
+                        { "tag": "td", "text": "40px" }
+                      ]
+                    },
+                    {
+                      "tag": "tr",
+                      "children": [
+                        {
+                          "tag": "td",
+                          "children": [{ "tag": "code", "text": "--ui-font-size-4xl" }]
+                        },
+                        { "tag": "td", "text": "40px" },
+                        { "tag": "td", "text": "48px" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Headings",
+      "description": "Headings use semantic tokens and adjust size at breakpoints.",
+      "examples": [
+        {
+          "items": [
+            { "tag": "h1", "text": "Heading 1 - 40px / 48px" },
+            { "tag": "h2", "text": "Heading 2 - 32px / 40px" },
+            { "tag": "h3", "text": "Heading 3 - 28px / 32px" },
+            { "tag": "h4", "text": "Heading 4 - 24px / 32px" },
+            { "tag": "h5", "text": "Heading 5 - 20px / 24px" }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Body Text",
+      "description": "Default body text at 16px with 24px line-height (1.5x ratio).",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "p",
+              "children": [
+                { "text": "Body text at 16px with 24px line-height. The " },
+                { "tag": "strong", "text": "bold text" },
+                { "text": " and " },
+                { "tag": "code", "text": "inline code" },
+                { "text": " maintain the same rhythm." }
+              ]
+            },
+            {
+              "tag": "p",
+              "class": "ui-text-body-sm",
+              "text": "Body small at 14px with 24px line-height for secondary text."
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Text Roles",
+      "description": "Semantic text styles for specific use cases.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "p",
+              "class": "ui-text-lead",
+              "text": "Lead paragraph - 20px / 32px. Use for opening paragraphs or article intros."
+            }
+          ]
+        },
+        {
+          "items": [
+            { "tag": "p", "class": "ui-text-eyebrow", "text": "Eyebrow text" },
+            { "tag": "h2", "text": "Related Heading" }
+          ],
+          "description": "Eyebrow - 12px uppercase with wide tracking. Use above headings for categorization."
+        },
+        {
+          "items": [
+            {
+              "tag": "p",
+              "class": "ui-text-caption",
+              "text": "Caption text - 12px / 16px. Use for labels, hints, and metadata."
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Font Weights",
+      "description": "Four weight levels for hierarchy.",
+      "examples": [
+        {
+          "items": [
+            { "tag": "p", "class": "ui-font-normal", "text": "Normal (400) - Body text" },
+            {
+              "tag": "p",
+              "class": "ui-font-medium",
+              "text": "Medium (500) - Labels, small headings"
+            },
+            { "tag": "p", "class": "ui-font-semibold", "text": "Semibold (600) - Subheadings" },
+            { "tag": "p", "class": "ui-font-bold", "text": "Bold (700) - Headlines, emphasis" }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Letter Spacing",
+      "description": "Three tracking options based on use case.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "p",
+              "class": "ui-text-3xl ui-tracking-display",
+              "text": "Display tracking (-0.02em)"
+            },
+            { "tag": "p", "text": "Body tracking (0) - default" },
+            { "tag": "p", "class": "ui-text-eyebrow", "text": "Caps tracking (+0.08em)" }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Line Length",
+      "description": "Constrain text width for optimal readability (45-75 characters).",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-prose",
+              "children": [
+                {
+                  "tag": "p",
+                  "text": "This paragraph is constrained to 65ch max-width for optimal reading comfort. Long lines of text are harder to read because the eye has difficulty tracking back to the start of the next line."
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Responsive Behavior",
+      "description": "Headings scale down on mobile (<730px) and up on desktop (>1080px).",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "table",
+              "class": "ui-table",
+              "children": [
+                {
+                  "tag": "thead",
+                  "children": [
+                    {
+                      "tag": "tr",
+                      "children": [
+                        { "tag": "th", "text": "Heading" },
+                        { "tag": "th", "text": "Mobile" },
+                        { "tag": "th", "text": "Default" },
+                        { "tag": "th", "text": "Desktop" }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  "tag": "tbody",
+                  "children": [
+                    {
+                      "tag": "tr",
+                      "children": [
+                        { "tag": "td", "text": "h1" },
+                        { "tag": "td", "text": "28px" },
+                        { "tag": "td", "text": "40px" },
+                        { "tag": "td", "text": "48px" }
+                      ]
+                    },
+                    {
+                      "tag": "tr",
+                      "children": [
+                        { "tag": "td", "text": "h2" },
+                        { "tag": "td", "text": "24px" },
+                        { "tag": "td", "text": "32px" },
+                        { "tag": "td", "text": "40px" }
+                      ]
+                    },
+                    {
+                      "tag": "tr",
+                      "children": [
+                        { "tag": "td", "text": "h3" },
+                        { "tag": "td", "text": "20px" },
+                        { "tag": "td", "text": "28px" },
+                        { "tag": "td", "text": "28px" }
+                      ]
+                    },
+                    {
+                      "tag": "tr",
+                      "children": [
+                        { "tag": "td", "text": "h4" },
+                        { "tag": "td", "text": "18px" },
+                        { "tag": "td", "text": "24px" },
+                        { "tag": "td", "text": "24px" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/src/{02-base → base}/typography/typography.scss

@@ -149,8 +149,8 @@
   // Desktop (>1080px) - larger headings
   @media (width > 67.5rem) {
     h1 {
-      font-size: calc(var(--unit) * 6); // 48px
-      line-height: calc(var(--unit) * 7); // 56px
+      font-size: calc(var(--ui-unit) * 6); // 48px
+      line-height: calc(var(--ui-unit) * 7); // 56px
     }
 
     h2 {

package/src/{04-components → components}/actions/button/button.api.json

@@ -60,12 +60,12 @@
       "default": "var(--ui-radius-md)"
     },
     {
-      "name": "--ui-button-text",
+      "name": "--ui-button-color",
       "default": "var(--ui-color-text-inverse)"
     },
     {
       "name": "--ui-button-height-sm",
-      "default": "calc(var(--row) * 1.5)"
+      "default": "calc(var(--ui-row) * 1.5)"
     },
     {
       "name": "--ui-button-font-size-sm",
@@ -81,7 +81,7 @@
     },
     {
       "name": "--ui-button-height-lg",
-      "default": "calc(var(--row) * 2.5)"
+      "default": "calc(var(--ui-row) * 2.5)"
     },
     {
       "name": "--ui-button-padding-x-lg",
@@ -100,7 +100,7 @@
       "default": "var(--ui-color-border-strong)"
     },
     {
-      "name": "--ui-button-secondary-text",
+      "name": "--ui-button-secondary-color",
       "default": "var(--ui-color-text)"
     },
     {

package/src/{04-components → components}/actions/button/button.docs.json

@@ -1,4 +1,7 @@
 {
+  "id": "button",
+  "type": "component",
+  "title": "Button",
   "api": "./button.api.json",
   "description": "Buttons trigger actions. Use primary for main CTA, secondary for less important actions.",
   "modifiers": {
@@ -27,7 +30,7 @@
       "description": "Button styles for different purposes and emphasis levels.",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             { "tag": "button", "class": "ui-button", "text": "Primary" },
             { "tag": "button", "class": "ui-button ui-button--secondary", "text": "Secondary" },
@@ -44,7 +47,7 @@
       "description": "Small for dense UIs, default for most cases, large for prominent CTAs.",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             { "tag": "button", "class": "ui-button ui-button--sm", "text": "Small" },
             { "tag": "button", "class": "ui-button ui-button--md", "text": "Medium" },
@@ -58,7 +61,7 @@
       "description": "Override border radius. Use radius-full for pill-shaped buttons.",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             { "tag": "button", "class": "ui-button ui-button--radius-none", "text": "None" },
             { "tag": "button", "class": "ui-button ui-button--radius-sm", "text": "Small" },
@@ -85,7 +88,7 @@
       "description": "Shows spinner animation. Button becomes non-interactive.",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             { "tag": "button", "class": "ui-button ui-button--loading", "text": "Loading" },
             {
@@ -102,22 +105,52 @@
       "description": "Square icon-only buttons. Use with SVG icons from Lucide or similar sets.",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "button",
               "class": "ui-button ui-button--icon ui-button--sm",
-              "html": "<svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg>"
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-icon",
+                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                  "children": [
+                    { "tag": "path", "attrs": { "d": "M18 6 6 18" } },
+                    { "tag": "path", "attrs": { "d": "m6 6 12 12" } }
+                  ]
+                }
+              ]
             },
             {
               "tag": "button",
               "class": "ui-button ui-button--icon",
-              "html": "<svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M5 12h14\"/><path d=\"M12 5v14\"/></svg>"
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-icon",
+                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                  "children": [
+                    { "tag": "path", "attrs": { "d": "M5 12h14" } },
+                    { "tag": "path", "attrs": { "d": "M12 5v14" } }
+                  ]
+                }
+              ]
             },
             {
               "tag": "button",
               "class": "ui-button ui-button--icon ui-button--lg",
-              "html": "<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>"
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-icon",
+                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                  "children": [
+                    { "tag": "circle", "attrs": { "cx": "11", "cy": "11", "r": "8" } },
+                    { "tag": "path", "attrs": { "d": "m21 21-4.3-4.3" } }
+                  ]
+                }
+              ]
             }
           ],
           "code": "<button class=\"ui-button ui-button--icon ui-button--sm\">\n  <svg class=\"ui-icon\"><!-- x icon --></svg>\n</button>\n<button class=\"ui-button ui-button--icon\">\n  <svg class=\"ui-icon\"><!-- plus icon --></svg>\n</button>\n<button class=\"ui-button ui-button--icon ui-button--lg\">\n  <svg class=\"ui-icon\"><!-- search icon --></svg>\n</button>"
@@ -129,17 +162,36 @@
       "description": "Buttons with icon and text. Use ui-button__icon element with --start or --end modifier.",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "button",
               "class": "ui-button",
-              "html": "<svg class=\"ui-icon ui-button__icon ui-button__icon--start\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M5 12h14\"/><path d=\"M12 5v14\"/></svg> Add Item"
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-icon ui-button__icon ui-button__icon--start",
+                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                  "children": [
+                    { "tag": "path", "attrs": { "d": "M5 12h14" } },
+                    { "tag": "path", "attrs": { "d": "M12 5v14" } }
+                  ]
+                },
+                { "text": "Add Item" }
+              ]
             },
             {
               "tag": "button",
               "class": "ui-button ui-button--secondary",
-              "html": "Next <svg class=\"ui-icon ui-button__icon ui-button__icon--end\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"m9 18 6-6-6-6\"/></svg>"
+              "children": [
+                { "text": "Next" },
+                {
+                  "tag": "svg",
+                  "class": "ui-icon ui-button__icon ui-button__icon--end",
+                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                  "children": [{ "tag": "path", "attrs": { "d": "m9 18 6-6-6-6" } }]
+                }
+              ]
             }
           ],
           "code": "<button class=\"ui-button\">\n  <svg class=\"ui-icon ui-button__icon ui-button__icon--start\"><!-- plus --></svg>\n  Add Item\n</button>\n<button class=\"ui-button ui-button--secondary\">\n  Next\n  <svg class=\"ui-icon ui-button__icon ui-button__icon--end\"><!-- chevron-right --></svg>\n</button>"

package/src/{04-components → components}/actions/button/index.scss

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 
 // @component button
 // @element button
@@ -16,13 +16,13 @@
     --_radius: var(--ui-button-radius, var(--ui-radius-md, #{t.$radius-md}));
     --_bg: var(--_accent);
     --_bg-hover: color-mix(in oklch, var(--_accent) 80%, black);
-    --_text: var(--ui-button-text, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
+    --_color: var(--ui-button-color, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
   }
 
   // @modifier size
   .button--sm {
     --ui-ctx-size: var(--ui-size-sm, #{t.size(sm)});
-    --_height: var(--ui-button-height-sm, calc(var(--row, #{t.$row}) * 1.5));
+    --_height: var(--ui-button-height-sm, calc(var(--ui-row, #{t.$row}) * 1.5));
     --_font-size: var(--ui-button-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
   }
 
@@ -34,7 +34,7 @@
 
   .button--lg {
     --ui-ctx-size: var(--ui-size-lg, #{t.size(lg)});
-    --_height: var(--ui-button-height-lg, calc(var(--row, #{t.$row}) * 2.5));
+    --_height: var(--ui-button-height-lg, calc(var(--ui-row, #{t.$row}) * 2.5));
     --_padding-x: var(--ui-button-padding-x-lg, var(--ui-space-3, #{t.$space-3}));
     --_font-size: var(--ui-button-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
   }
@@ -43,20 +43,20 @@
   .button--secondary {
     --_bg: var(--ui-color-bg-muted, #{t.$color-bg-muted});
     --_bg-hover: var(--ui-color-border-strong, #{t.$color-border-strong});
-    --_text: var(--ui-color-text, #{t.$color-text});
+    --_color: var(--ui-color-text, #{t.$color-text});
   }
 
   .button--ghost {
     --_bg: transparent;
     --_bg-hover: color-mix(in oklch, var(--_accent) 10%, transparent);
-    --_text: var(--_accent);
+    --_color: var(--_accent);
   }
 
   .button--outline {
     --_bg: transparent;
     --_bg-hover: var(--_accent);
-    --_text: var(--_accent);
-    --_text-hover: var(--ui-color-text-inverse, #{t.$color-text-inverse});
+    --_color: var(--_accent);
+    --_color-hover: var(--ui-color-text-inverse, #{t.$color-text-inverse});
     --_border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid currentColor;
   }
 
@@ -67,8 +67,8 @@
   .button--link {
     --_bg: transparent;
     --_bg-hover: transparent;
-    --_text: var(--_accent);
-    --_text-hover: color-mix(in oklch, var(--_accent) 70%, black);
+    --_color: var(--_accent);
+    --_color-hover: color-mix(in oklch, var(--_accent) 70%, black);
     --_height: auto;
     --_padding-x: 0;
     --_radius: 0;
@@ -123,7 +123,7 @@
     line-height: 1;
     text-decoration: none;
     white-space: nowrap;
-    color: var(--_text);
+    color: var(--_color);
 
     background: var(--_bg);
     border: var(--_border, none);
@@ -139,7 +139,7 @@
     // States - modifiers mirror pseudo-classes for testing/docs
     &:hover,
     &--hover {
-      color: var(--_text-hover, var(--_text));
+      color: var(--_color-hover, var(--_color));
 
       background: var(--_bg-hover);
     }
@@ -156,7 +156,7 @@
     }
 
     &:disabled {
-      opacity: 0.5;
+      opacity: var(--ui-opacity-disabled, 0.5);
       cursor: not-allowed;
 
       &:hover {
@@ -205,7 +205,7 @@
     &--loading {
       position: relative;
 
-      opacity: 0.7;
+      opacity: var(--ui-opacity-loading, 0.7);
       pointer-events: none;
 
       &::after {
@@ -229,4 +229,10 @@
       transform: rotate(360deg);
     }
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .button--loading::after {
+      animation: none;
+    }
+  }
 }