@teseor/css 1.14.1 → 1.14.3

package/src/config/tokens/design-tokens.docs.json

@@ -0,0 +1,239 @@
+{
+  "id": "design-tokens",
+  "type": "token",
+  "title": "Design Tokens",
+  "description": "Borders, radius, shadows, motion, z-index, and semantic tokens that form the visual foundation",
+  "skipValidation": true,
+  "sections": [
+    {
+      "title": "Borders",
+      "description": "Border width tokens derived from the 8px unit.",
+      "examples": [
+        {
+          "layout": "row",
+          "items": [
+            {
+              "tag": "div",
+              "style": {
+                "width": "var(--ui-space-8)",
+                "height": "var(--ui-row-2)",
+                "border": "var(--ui-border-width-sm) solid var(--ui-color-border-strong)"
+              }
+            },
+            {
+              "tag": "div",
+              "style": {
+                "width": "var(--ui-space-8)",
+                "height": "var(--ui-row-2)",
+                "border": "var(--ui-border-width-md) solid var(--ui-color-border-strong)"
+              }
+            },
+            {
+              "tag": "div",
+              "style": {
+                "width": "var(--ui-space-8)",
+                "height": "var(--ui-row-2)",
+                "border": "var(--ui-border-width-lg) solid var(--ui-color-border-strong)"
+              }
+            }
+          ],
+          "code": ":root {\n  --ui-border-width-sm: calc(var(--ui-unit) * 0.125); /* 1px */\n  --ui-border-width-md: calc(var(--ui-unit) * 0.25);  /* 2px */\n  --ui-border-width-lg: calc(var(--ui-unit) * 0.5);   /* 4px */\n}"
+        }
+      ]
+    },
+    {
+      "title": "Radius",
+      "description": "Border radius tokens derived from the 8px unit.",
+      "examples": [
+        {
+          "layout": "row",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-column ui-column--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-row-3)",
+                    "height": "var(--ui-row-3)",
+                    "background": "var(--ui-color-primary)",
+                    "border-radius": "var(--ui-radius-sm)"
+                  }
+                },
+                { "tag": "small", "text": "sm (4px)" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-column ui-column--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-row-3)",
+                    "height": "var(--ui-row-3)",
+                    "background": "var(--ui-color-primary)",
+                    "border-radius": "var(--ui-radius-md)"
+                  }
+                },
+                { "tag": "small", "text": "md (8px)" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-column ui-column--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-row-3)",
+                    "height": "var(--ui-row-3)",
+                    "background": "var(--ui-color-primary)",
+                    "border-radius": "var(--ui-radius-lg)"
+                  }
+                },
+                { "tag": "small", "text": "lg (16px)" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-column ui-column--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-row-3)",
+                    "height": "var(--ui-row-3)",
+                    "background": "var(--ui-color-primary)",
+                    "border-radius": "var(--ui-radius-full)"
+                  }
+                },
+                { "tag": "small", "text": "full" }
+              ]
+            }
+          ],
+          "code": ":root {\n  --ui-radius-sm: calc(var(--ui-unit) * 0.5); /* 4px */\n  --ui-radius-md: var(--ui-unit);              /* 8px */\n  --ui-radius-lg: calc(var(--ui-unit) * 2);    /* 16px */\n  --ui-radius-full: 9999px;\n}"
+        }
+      ]
+    },
+    {
+      "title": "Shadows",
+      "description": "Elevation shadows using the primary hue for tinted depth.",
+      "examples": [
+        {
+          "layout": "row",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-column ui-column--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-space-8)",
+                    "height": "var(--ui-row-3)",
+                    "background": "var(--ui-color-bg)",
+                    "border-radius": "var(--ui-radius-md)",
+                    "box-shadow": "var(--ui-shadow-sm)"
+                  }
+                },
+                { "tag": "small", "text": "sm" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-column ui-column--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-space-8)",
+                    "height": "var(--ui-row-3)",
+                    "background": "var(--ui-color-bg)",
+                    "border-radius": "var(--ui-radius-md)",
+                    "box-shadow": "var(--ui-shadow-md)"
+                  }
+                },
+                { "tag": "small", "text": "md" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-column ui-column--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-space-8)",
+                    "height": "var(--ui-row-3)",
+                    "background": "var(--ui-color-bg)",
+                    "border-radius": "var(--ui-radius-md)",
+                    "box-shadow": "var(--ui-shadow-lg)"
+                  }
+                },
+                { "tag": "small", "text": "lg" }
+              ]
+            }
+          ],
+          "code": ":root {\n  --ui-shadow-sm: 0 1px 2px hsl(var(--ui-hue-primary) 10% 20% / 0.05);\n  --ui-shadow-md: 0 4px 6px hsl(var(--ui-hue-primary) 10% 20% / 0.1);\n  --ui-shadow-lg: 0 10px 15px hsl(var(--ui-hue-primary) 10% 20% / 0.15);\n}"
+        }
+      ]
+    },
+    {
+      "title": "Motion",
+      "description": "Duration and easing tokens. All durations drop to 0ms when prefers-reduced-motion is active.",
+      "examples": [
+        {
+          "title": "Duration scale",
+          "code": ":root {\n  --ui-duration-instant: 50ms;\n  --ui-duration-fast: 100ms;\n  --ui-duration-base: 150ms;\n  --ui-duration-normal: 200ms;\n  --ui-duration-slow: 250ms;\n  --ui-duration-slower: 400ms;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --ui-duration-instant: 0ms;\n    --ui-duration-fast: 0ms;\n    /* ...all set to 0ms */\n  }\n}"
+        },
+        {
+          "title": "Easing functions",
+          "code": ":root {\n  --ui-ease-default: cubic-bezier(0.4, 0, 0.2, 1);\n  --ui-ease-in:      cubic-bezier(0.4, 0, 1, 1);\n  --ui-ease-out:     cubic-bezier(0, 0, 0.2, 1);\n  --ui-ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);\n}"
+        }
+      ]
+    },
+    {
+      "title": "Z-index",
+      "description": "Layering scale with gaps to allow insertion without renumbering.",
+      "examples": [
+        {
+          "title": "Z-index tokens",
+          "code": ":root {\n  --ui-z-base: 0;\n  --ui-z-sticky: 100;\n  --ui-z-dropdown: 200;\n  --ui-z-overlay: 300;\n  --ui-z-modal: 400;\n  --ui-z-popover: 500;\n  --ui-z-tooltip: 600;\n  --ui-z-toast: 700;\n  --ui-z-drawer: 800;\n  --ui-z-debug: 9999;\n}"
+        }
+      ]
+    },
+    {
+      "title": "Semantic Colors",
+      "description": "Context-aware color tokens that resolve automatically in light and dark mode via light-dark().",
+      "examples": [
+        {
+          "title": "Text and background",
+          "code": ":root {\n  color-scheme: light dark;\n  --ui-color-text: light-dark(var(--ui-color-neutral-900), var(--ui-color-neutral-100));\n  --ui-color-text-muted: light-dark(var(--ui-color-neutral-500), var(--ui-color-neutral-400));\n  --ui-color-bg: light-dark(var(--ui-color-neutral-50), var(--ui-color-neutral-900));\n  --ui-color-bg-subtle: light-dark(var(--ui-color-neutral-100), var(--ui-color-neutral-800));\n}"
+        },
+        {
+          "title": "Borders and interactive",
+          "code": ":root {\n  --ui-color-border: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));\n  --ui-color-border-strong: light-dark(var(--ui-color-neutral-300), var(--ui-color-neutral-600));\n  --ui-color-interactive: var(--ui-color-primary);\n  --ui-color-interactive-hover: var(--ui-color-primary-dark);\n  --ui-color-focus: var(--ui-color-primary-light);\n}"
+        }
+      ]
+    },
+    {
+      "title": "Semantic Spacing",
+      "description": "Named spacing aliases that map to the numeric spacing scale for consistent layout patterns.",
+      "examples": [
+        {
+          "title": "Semantic spacing tokens",
+          "code": ":root {\n  --ui-spacing-xs: var(--ui-space-1);     /* 8px */\n  --ui-spacing-sm: var(--ui-space-2);     /* 16px */\n  --ui-spacing-md: var(--ui-space-4);     /* 32px */\n  --ui-spacing-lg: var(--ui-space-6);     /* 48px */\n  --ui-spacing-xl: var(--ui-space-8);     /* 64px */\n  --ui-spacing-gutter: var(--ui-space-4); /* 32px */\n  --ui-spacing-section: var(--ui-space-8);/* 64px */\n}"
+        }
+      ]
+    }
+  ]
+}

package/src/config/tokens/index.scss

@@ -1,15 +1,15 @@
 // Design tokens - colors, spacing, typography, grid, etc.
 @use './colors/index' as *;
 @use './spacing/index' as *;
-@use './typography/index' as *;
+@use './typography' as *;
 @use './grid/index' as *;
-@use './radius/index' as *;
-@use './borders/index' as *;
-@use './shadows/index' as *;
-@use './zindex/index' as *;
-@use './motion/index' as *;
-@use './semantic/colors/index' as *;
-@use './semantic/spacing/index' as *;
+@use './radius' as *;
+@use './borders' as *;
+@use './shadows' as *;
+@use './zindex' as *;
+@use './motion' as *;
+@use './semantic-colors' as *;
+@use './semantic-spacing' as *;
 
 // Component tokens
 @use './input' as *;

package/src/config/tokens/input.scss

@@ -1,14 +1,16 @@
-:root {
-  --ui-input-height: var(--ui-row-2);
-  --ui-input-padding-x: var(--ui-space-2);
-  --ui-input-padding-y: var(--ui-space-1);
+@layer tokens {
+  :root {
+    --ui-input-height: var(--ui-row-2);
+    --ui-input-padding-x: var(--ui-space-2);
+    --ui-input-padding-y: var(--ui-space-1);
 
-  --ui-input-radius: var(--ui-radius-md);
-  --ui-input-border-width: var(--ui-border-width-sm);
+    --ui-input-radius: var(--ui-radius-md);
+    --ui-input-border-width: var(--ui-border-width-sm);
 
-  --ui-input-bg: var(--ui-color-bg);
-  --ui-input-border: var(--ui-color-border);
-  --ui-input-border-focus: var(--ui-color-interactive);
-  --ui-input-text: var(--ui-color-text);
-  --ui-input-placeholder: var(--ui-color-text-muted);
+    --ui-input-bg: var(--ui-color-bg);
+    --ui-input-border: var(--ui-color-border);
+    --ui-input-border-focus: var(--ui-color-interactive);
+    --ui-input-text: var(--ui-color-text);
+    --ui-input-placeholder: var(--ui-color-text-muted);
+  }
 }

package/src/debug/debug.docs.json

@@ -0,0 +1,96 @@
+{
+  "id": "debug",
+  "type": "utility",
+  "title": "Debug",
+  "description": "Visual debugging overlays for grid alignment, baseline rhythm, and element boundaries",
+  "skipValidation": true,
+  "sections": [
+    {
+      "title": "Grid Overlay",
+      "description": "Shows the 8px unit grid. Add the class to any container.",
+      "examples": [
+        {
+          "title": "Unit grid",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-debug-grid",
+              "style": {
+                "height": "var(--ui-row-6)",
+                "position": "relative"
+              }
+            }
+          ],
+          "code": "<div class=\"ui-debug-grid\">\n  <!-- 8px grid lines appear -->\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Row Grid",
+      "description": "Shows both 8px unit lines and stronger row (16px) lines.",
+      "examples": [
+        {
+          "title": "Unit + row grid",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-debug-grid-rows",
+              "style": {
+                "height": "var(--ui-row-6)",
+                "position": "relative"
+              }
+            }
+          ],
+          "code": "<div class=\"ui-debug-grid-rows\">\n  <!-- 8px + 16px grid lines -->\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Baseline",
+      "description": "Horizontal baseline grid for verifying text alignment.",
+      "examples": [
+        {
+          "title": "Baseline grid",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-debug-baseline",
+              "style": {
+                "height": "var(--ui-row-6)",
+                "position": "relative"
+              }
+            }
+          ],
+          "code": "<div class=\"ui-debug-baseline\">\n  <!-- Horizontal 8px baseline lines -->\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Outline",
+      "description": "Outlines all child elements to reveal layout boundaries.",
+      "examples": [
+        {
+          "title": "Element outlines",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-debug-outline",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-row ui-row--sm",
+                  "children": [
+                    { "tag": "div", "text": "A", "style": { "padding": "var(--ui-space-1)" } },
+                    { "tag": "div", "text": "B", "style": { "padding": "var(--ui-space-1)" } },
+                    { "tag": "div", "text": "C", "style": { "padding": "var(--ui-space-1)" } }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-debug-outline\">\n  <!-- All children get red outlines -->\n</div>"
+        }
+      ]
+    }
+  ]
+}

package/src/debug/index.scss

@@ -1 +1,81 @@
-@forward "./grid-overlay";
+@use '../config/tokens/variables' as t;
+// Debug grid overlay - add class="debug-grid" to body or any container
+.debug-grid,
+.debug-grid-rows,
+.debug-baseline {
+  position: relative;
+}
+
+.debug-grid {
+  // Fallback hue 220 (blue) when --ui-hue-primary not set
+  --debug-color: hsl(var(--ui-hue-primary, #{t.$hue-primary}) 80% 50% / 0.15);
+}
+
+.debug-grid::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--ui-z-debug);
+
+  block-size: 100%;
+  inline-size: 100%;
+  min-block-size: 100vh;
+
+  background-image: linear-gradient(to right, var(--debug-color) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px);
+  pointer-events: none;
+  background-size: var(--ui-unit) var(--ui-unit);
+  background-position: 0 0;
+}
+
+// Stronger grid at row intervals
+.debug-grid-rows {
+  --debug-color: hsl(var(--ui-hue-primary, #{t.$hue-primary}) 80% 50% / 0.1);
+  --debug-color-strong: hsl(var(--ui-hue-primary, #{t.$hue-primary}) 80% 50% / 0.25);
+}
+
+.debug-grid-rows::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--ui-z-debug);
+
+  block-size: 100%;
+  inline-size: 100%;
+  min-block-size: 100vh;
+
+  background-image: linear-gradient(to right, var(--debug-color) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--debug-color-strong) 1px, transparent 1px);
+  pointer-events: none;
+  background-size: var(--ui-unit) var(--ui-unit), var(--ui-unit) var(--ui-unit), var(--ui-unit) var(--ui-row);
+  background-position: 0 0;
+}
+
+// Baseline grid only (horizontal lines)
+.debug-baseline {
+  --debug-color: hsl(var(--ui-hue-danger, 0) 80% 50% / 0.2);
+}
+
+.debug-baseline::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--ui-z-debug);
+
+  block-size: 100%;
+  inline-size: 100%;
+  min-block-size: 100vh;
+
+  background-image: linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px);
+  pointer-events: none;
+  background-size: 100% var(--ui-unit);
+}
+
+// Element boundaries outline
+.debug-outline * {
+  outline: 1px solid hsl(0 100% 50% / 0.5);
+}

package/src/index.scss

@@ -2,7 +2,7 @@
 // Import order controls cascade.
 
 // Config: Layer definitions + Design tokens
-@use './config/layers/layers' as *;
+@use './config/layers' as *;
 @use './config/tokens/index' as *;
 
 // Reset styles

package/src/layout/app-shell/app-shell.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'app-shell.docs.json');
 

package/src/layout/aspect-ratio/aspect-ratio.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'aspect-ratio.docs.json');
 

package/src/layout/box/box.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'box.docs.json');
 

package/src/layout/center/center.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'center.docs.json');
 

package/src/layout/column/column.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'column.docs.json');
 

package/src/layout/content/content.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'content.docs.json');
 

package/src/layout/footer/footer.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'footer.docs.json');
 

package/src/layout/grid/grid.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'grid.docs.json');
 

package/src/layout/nav-rail/nav-rail.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'nav-rail.docs.json');
 

package/src/layout/page-header/page-header.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'page-header.docs.json');
 

package/src/layout/row/row.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'row.docs.json');
 

package/src/layout/sidebar/sidebar.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'sidebar.docs.json');
 

package/src/layout/sidebar-nav/sidebar-nav.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'sidebar-nav.docs.json');
 

package/src/layout/topbar/topbar.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../test-utils';
 
 const DOCS_PATH = resolve(__dirname, 'topbar.docs.json');