npm - @teseor/css - Versions diffs - 1.6.0 → 1.8.0 - Mend

@teseor/css 1.6.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (498) hide show

package/src/config/tokens/theming.docs.json ADDED Viewed

@@ -0,0 +1,179 @@
+{
+  "id": "theming",
+  "type": "guide",
+  "title": "Theming",
+  "description": "Customize the design system with CSS custom properties",
+  "skipValidation": true,
+  "sections": [
+    {
+      "title": "Brand Colors",
+      "description": "Change the entire color palette by adjusting hue values",
+      "examples": [
+        {
+          "title": "Default (Blue)",
+          "items": [
+            {
+              "tag": "div",
+              "class": "theme-demo",
+              "children": [
+                { "tag": "button", "class": "ui-button", "text": "Primary" },
+                { "tag": "button", "class": "ui-button ui-button--secondary", "text": "Secondary" },
+                { "tag": "button", "class": "ui-button ui-button--danger", "text": "Danger" }
+              ]
+            }
+          ],
+          "code": ":root {\n  --ui-hue-primary: 220; /* Blue */\n}"
+        },
+        {
+          "title": "Purple Theme",
+          "items": [
+            {
+              "tag": "div",
+              "class": "theme-demo theme-purple",
+              "children": [
+                { "tag": "button", "class": "ui-button", "text": "Primary" },
+                { "tag": "button", "class": "ui-button ui-button--secondary", "text": "Secondary" },
+                { "tag": "button", "class": "ui-button ui-button--danger", "text": "Danger" }
+              ]
+            }
+          ],
+          "code": ".theme-purple {\n  --ui-hue-primary: 270; /* Purple */\n}"
+        },
+        {
+          "title": "Teal Theme",
+          "items": [
+            {
+              "tag": "div",
+              "class": "theme-demo theme-teal",
+              "children": [
+                { "tag": "button", "class": "ui-button", "text": "Primary" },
+                { "tag": "button", "class": "ui-button ui-button--secondary", "text": "Secondary" },
+                { "tag": "button", "class": "ui-button ui-button--danger", "text": "Danger" }
+              ]
+            }
+          ],
+          "code": ".theme-teal {\n  --ui-hue-primary: 180; /* Teal */\n}"
+        },
+        {
+          "title": "Orange Theme",
+          "items": [
+            {
+              "tag": "div",
+              "class": "theme-demo theme-orange",
+              "children": [
+                { "tag": "button", "class": "ui-button", "text": "Primary" },
+                { "tag": "button", "class": "ui-button ui-button--secondary", "text": "Secondary" },
+                { "tag": "button", "class": "ui-button ui-button--danger", "text": "Danger" }
+              ]
+            }
+          ],
+          "code": ".theme-orange {\n  --ui-hue-primary: 25; /* Orange */\n}"
+        }
+      ]
+    },
+    {
+      "title": "Dark Mode",
+      "description": "Toggle dark mode with data-theme attribute",
+      "examples": [
+        {
+          "title": "Light Mode",
+          "items": [
+            {
+              "tag": "div",
+              "class": "theme-demo",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-card",
+                  "children": [{ "tag": "p", "text": "Light mode card" }]
+                }
+              ]
+            }
+          ],
+          "code": "<html>\n  <!-- Light mode (default) -->\n</html>"
+        },
+        {
+          "title": "Dark Mode",
+          "items": [
+            {
+              "tag": "div",
+              "class": "theme-demo",
+              "attrs": { "data-theme": "dark" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-card",
+                  "children": [{ "tag": "p", "text": "Dark mode card" }]
+                }
+              ]
+            }
+          ],
+          "code": "<html data-theme=\"dark\">\n  <!-- Dark mode enabled -->\n</html>"
+        }
+      ]
+    },
+    {
+      "title": "Component Overrides",
+      "description": "Override specific component tokens",
+      "examples": [
+        {
+          "title": "Custom Button Height",
+          "items": [
+            {
+              "tag": "div",
+              "class": "theme-demo custom-buttons",
+              "children": [
+                { "tag": "button", "class": "ui-button ui-button--sm", "text": "Small" },
+                { "tag": "button", "class": "ui-button", "text": "Default" },
+                { "tag": "button", "class": "ui-button ui-button--lg", "text": "Large" }
+              ]
+            }
+          ],
+          "code": ".custom-buttons {\n  --ui-button-height-sm: 24px;\n  --ui-button-height: 40px;\n  --ui-button-height-lg: 56px;\n}"
+        },
+        {
+          "title": "Custom Card Padding",
+          "items": [
+            {
+              "tag": "div",
+              "class": "theme-demo custom-cards",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-card",
+                  "children": [{ "tag": "p", "text": "Card with custom padding" }]
+                }
+              ]
+            }
+          ],
+          "code": ".custom-cards {\n  --ui-card-padding: var(--ui-space-4);\n}"
+        }
+      ]
+    },
+    {
+      "title": "Full Theme Example",
+      "description": "Complete theme customization",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "theme-demo theme-corporate",
+              "children": [
+                { "tag": "button", "class": "ui-button", "text": "Action" },
+                {
+                  "tag": "div",
+                  "class": "ui-card",
+                  "children": [
+                    { "tag": "p", "text": "Corporate theme with teal accent and sharp corners" }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": ".theme-corporate {\n  /* Brand hue */\n  --ui-hue-primary: 180;\n\n  /* Sharper corners */\n  --ui-radius-sm: 2px;\n  --ui-radius-md: 4px;\n  --ui-radius-lg: 6px;\n\n  /* Tighter spacing */\n  --ui-space-1: 12px;\n  --ui-space-2: 24px;\n}"
+        }
+      ]
+    }
+  ]
+}

package/src/config/tokens/typography/index.scss ADDED Viewed

@@ -0,0 +1,120 @@
+@layer tokens {
+  :root {
+    // Font families — system font stack, override with custom fonts via these tokens
+    --ui-font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
+    --ui-font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;
+    // ==========================================================================
+    // PRIMITIVE TOKENS - Font Size Scale
+    // Modular scale: 1.2 ratio (Minor Third), base 16px
+    // ==========================================================================
+    --ui-font-size-xs: 0.75rem;
+    --ui-font-size-sm: 0.875rem;
+    --ui-font-size-md: 1rem;
+    --ui-font-size-lg: 1.25rem;
+    --ui-font-size-xl: 1.5rem;
+    --ui-font-size-2xl: 1.75rem;
+    --ui-font-size-3xl: 2rem;
+    --ui-font-size-4xl: 2.5rem;
+    // ==========================================================================
+    // PRIMITIVE TOKENS - Line Heights (8px grid-snap)
+    // Two modes: normal (for body text) and tight (for UI/forms)
+    // ==========================================================================
+    // Tight line-heights for compact UI elements
+    --ui-leading-tight-xs: var(--ui-row-1);
+    --ui-leading-tight-sm: var(--ui-row-1);
+    --ui-leading-tight-md: calc(var(--ui-unit) * 3);
+    --ui-leading-tight-lg: calc(var(--ui-unit) * 3);
+    // Normal line-heights for readable body text
+    --ui-leading-xs: var(--ui-row-1);
+    --ui-leading-sm: calc(var(--ui-unit) * 3);
+    --ui-leading-md: calc(var(--ui-unit) * 3);
+    --ui-leading-lg: var(--ui-row-2);
+    --ui-leading-xl: var(--ui-row-2);
+    --ui-leading-2xl: var(--ui-row-2);
+    --ui-leading-3xl: calc(var(--ui-unit) * 5);
+    --ui-leading-4xl: calc(var(--ui-unit) * 6);
+    // ==========================================================================
+    // PRIMITIVE TOKENS - Font Weights
+    // ==========================================================================
+    --ui-weight-normal: 400;
+    --ui-weight-medium: 500;
+    --ui-weight-semibold: 600;
+    --ui-weight-bold: 700;
+    // ==========================================================================
+    // PRIMITIVE TOKENS - Letter Spacing
+    // ==========================================================================
+    --ui-tracking-display: -0.02em;
+    --ui-tracking-body: 0;
+    --ui-tracking-caps: 0.08em;
+    // ==========================================================================
+    // SEMANTIC TOKENS - Text Roles
+    // ==========================================================================
+    // Heading 1
+    --ui-heading-1-size: var(--ui-font-size-4xl);
+    --ui-heading-1-line-height: var(--ui-leading-4xl);
+    --ui-heading-1-weight: var(--ui-weight-bold);
+    --ui-heading-1-tracking: var(--ui-tracking-display);
+    // Heading 2
+    --ui-heading-2-size: var(--ui-font-size-3xl);
+    --ui-heading-2-line-height: var(--ui-leading-3xl);
+    --ui-heading-2-weight: var(--ui-weight-bold);
+    --ui-heading-2-tracking: -0.01em;
+    // Heading 3
+    --ui-heading-3-size: var(--ui-font-size-2xl);
+    --ui-heading-3-line-height: var(--ui-leading-2xl);
+    --ui-heading-3-weight: var(--ui-weight-semibold);
+    --ui-heading-3-tracking: var(--ui-tracking-body);
+    // Heading 4
+    --ui-heading-4-size: var(--ui-font-size-xl);
+    --ui-heading-4-line-height: var(--ui-leading-xl);
+    --ui-heading-4-weight: var(--ui-weight-semibold);
+    --ui-heading-4-tracking: var(--ui-tracking-body);
+    // Heading 5
+    --ui-heading-5-size: var(--ui-font-size-lg);
+    --ui-heading-5-line-height: var(--ui-leading-sm);
+    --ui-heading-5-weight: var(--ui-weight-medium);
+    --ui-heading-5-tracking: var(--ui-tracking-body);
+    // Body
+    --ui-body-size: var(--ui-font-size-md);
+    --ui-body-line-height: var(--ui-leading-md);
+    --ui-body-weight: var(--ui-weight-normal);
+    --ui-body-tracking: var(--ui-tracking-body);
+    // Body Small
+    --ui-body-sm-size: var(--ui-font-size-sm);
+    --ui-body-sm-line-height: var(--ui-leading-sm);
+    --ui-body-sm-weight: var(--ui-weight-normal);
+    --ui-body-sm-tracking: var(--ui-tracking-body);
+    // Caption
+    --ui-caption-size: var(--ui-font-size-xs);
+    --ui-caption-line-height: var(--ui-leading-xs);
+    --ui-caption-weight: var(--ui-weight-normal);
+    --ui-caption-tracking: 0.01em;
+    // Lead
+    --ui-lead-size: var(--ui-font-size-lg);
+    --ui-lead-line-height: var(--ui-leading-lg);
+    --ui-lead-weight: var(--ui-weight-normal);
+    --ui-lead-tracking: var(--ui-tracking-body);
+    // Eyebrow
+    --ui-eyebrow-size: var(--ui-font-size-xs);
+    --ui-eyebrow-line-height: var(--ui-leading-xs);
+    --ui-eyebrow-weight: var(--ui-weight-semibold);
+    --ui-eyebrow-tracking: var(--ui-tracking-caps);
+  }
+}

package/src/{99-debug → debug}/grid-overlay.scss RENAMED Viewed

@@ -24,7 +24,7 @@
   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(--unit) var(--unit);
+  background-size: var(--ui-unit) var(--ui-unit);
   background-position: 0 0;
 }
@@ -49,7 +49,7 @@
     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(--unit) var(--unit), var(--unit) var(--unit), var(--unit) var(--ui-row);
+  background-size: var(--ui-unit) var(--ui-unit), var(--ui-unit) var(--ui-unit), var(--ui-unit) var(--ui-row);
   background-position: 0 0;
 }
@@ -71,7 +71,7 @@
   background-image: linear-gradient(to bottom, var(--debug-color) 1px, transparent 1px);
   pointer-events: none;
-  background-size: 100% var(--unit);
+  background-size: 100% var(--ui-unit);
 }
 // Element boundaries outline

package/src/index.scss CHANGED Viewed

@@ -1,27 +1,24 @@
-/**
- * CSS Library - Main Entry Point
- *
- * Import order follows numbered folder structure for cascade control.
- */
+// CSS Library - Main Entry Point
+// Import order controls cascade.
-/* 00. Config: Layer definitions + Design tokens */
-@use './00-config/layers/layers' as *;
-@use './00-config/tokens/index' as *;
+// Config: Layer definitions + Design tokens
+@use './config/layers/layers' as *;
+@use './config/tokens/index' as *;
-/* 01. Reset styles */
-@use './01-reset/index' as *;
+// Reset styles
+@use './reset/index' as *;
-/* 02. Base styles (typography, etc.) */
-@use './02-base/index' as *;
+// Base styles (typography, etc.)
+@use './base/index' as *;
-/* 03. Layout primitives */
-@use './03-layout/index' as *;
+// Layout primitives
+@use './layout/index' as *;
-/* 04. Components */
-@use './04-components/index' as *;
+// Components
+@use './components/index' as *;
-/* 05. Utilities (high specificity, load last) */
-@use './05-utilities/index' as *;
+// Utilities (high specificity, load last)
+@use './utilities/index' as *;
-/* 99. Debug tools (dev only) */
-@use './99-debug/index' as *;
+// Debug tools (dev only)
+@use './debug/index' as *;

package/src/layout/app-shell/app-shell-visual.png ADDED Viewed

Binary file

package/src/{03-layout → layout}/app-shell/app-shell.docs.json RENAMED Viewed

@@ -27,11 +27,11 @@
       "title": "Sidebar Widths",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--sm",
+              "class": "ui-row ui-row--sm",
               "children": [
                 { "tag": "code", "text": ".ui-sidebar--sm" },
                 { "tag": "span", "text": "192px (24 units)" }
@@ -39,7 +39,7 @@
             },
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--sm",
+              "class": "ui-row ui-row--sm",
               "children": [
                 { "tag": "code", "text": ".ui-sidebar--md" },
                 { "tag": "span", "text": "240px (30 units) - default" }
@@ -47,7 +47,7 @@
             },
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--sm",
+              "class": "ui-row ui-row--sm",
               "children": [
                 { "tag": "code", "text": ".ui-sidebar--lg" },
                 { "tag": "span", "text": "320px (40 units)" }
@@ -70,11 +70,11 @@
       "title": "Container Widths",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--sm",
+              "class": "ui-row ui-row--sm",
               "children": [
                 { "tag": "code", "text": ".ui-container--sm" },
                 { "tag": "span", "text": "640px (80 units)" }
@@ -82,7 +82,7 @@
             },
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--sm",
+              "class": "ui-row ui-row--sm",
               "children": [
                 { "tag": "code", "text": ".ui-container--md" },
                 { "tag": "span", "text": "800px (100 units)" }
@@ -90,7 +90,7 @@
             },
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--sm",
+              "class": "ui-row ui-row--sm",
               "children": [
                 { "tag": "code", "text": ".ui-container--lg" },
                 { "tag": "span", "text": "960px (120 units) - default" }
@@ -98,7 +98,7 @@
             },
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--sm",
+              "class": "ui-row ui-row--sm",
               "children": [
                 { "tag": "code", "text": ".ui-container--xl" },
                 { "tag": "span", "text": "1280px (160 units)" }
@@ -106,7 +106,7 @@
             },
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--sm",
+              "class": "ui-row ui-row--sm",
               "children": [
                 { "tag": "code", "text": ".ui-container--full" },
                 { "tag": "span", "text": "No max width" }

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

@@ -0,0 +1,13 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+const DOCS_PATH = resolve(__dirname, 'app-shell.docs.json');
+test.describe('app-shell visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await saveForLostPixel(page, 'app-shell');
+    await expect(page.locator('body')).toHaveScreenshot('app-shell.visual.png');
+  });
+});

package/src/{03-layout → layout}/aspect-ratio/aspect-ratio.docs.json RENAMED Viewed

@@ -12,7 +12,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--md",
+              "class": "ui-row ui-row--md",
               "children": [
                 {
                   "tag": "div",
@@ -112,7 +112,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--md",
+              "class": "ui-row ui-row--md",
               "children": [
                 {
                   "tag": "div",

package/src/layout/box/box-visual.png ADDED Viewed

Binary file

package/src/layout/box/box.docs.json ADDED Viewed

@@ -0,0 +1,93 @@
+{
+  "id": "box",
+  "type": "primitive",
+  "title": "Box",
+  "description": "Base container with style props. Foundation for layout primitives.",
+  "api": "box.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [{ "tag": "div", "class": "ui-box", "text": "Content" }],
+          "code": "<div class=\"ui-box\">Content</div>"
+        }
+      ]
+    },
+    {
+      "title": "Padding",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            { "tag": "div", "class": "ui-box ui-box--p-1 ui-box--bg-subtle", "text": "Padding 1" },
+            { "tag": "div", "class": "ui-box ui-box--p-2 ui-box--bg-subtle", "text": "Padding 2" },
+            { "tag": "div", "class": "ui-box ui-box--p-3 ui-box--bg-subtle", "text": "Padding 3" },
+            { "tag": "div", "class": "ui-box ui-box--p-4 ui-box--bg-subtle", "text": "Padding 4" }
+          ],
+          "code": "<div class=\"ui-box ui-box--p-1\">...</div>\n<div class=\"ui-box ui-box--p-2\">...</div>\n<div class=\"ui-box ui-box--p-3\">...</div>\n<div class=\"ui-box ui-box--p-4\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Background",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-box ui-box--p-2 ui-box--bg-subtle",
+              "text": "Subtle background"
+            },
+            {
+              "tag": "div",
+              "class": "ui-box ui-box--p-2 ui-box--bg-muted",
+              "text": "Muted background"
+            }
+          ],
+          "code": "<div class=\"ui-box ui-box--bg-subtle\">...</div>\n<div class=\"ui-box ui-box--bg-muted\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Rounded",
+      "examples": [
+        {
+          "layout": "row",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-box ui-box--p-3 ui-box--bg-subtle ui-box--rounded",
+              "text": "Rounded"
+            },
+            {
+              "tag": "div",
+              "class": "ui-box ui-box--p-3 ui-box--bg-subtle ui-box--rounded-lg",
+              "text": "Rounded lg"
+            }
+          ],
+          "code": "<div class=\"ui-box ui-box--rounded\">...</div>\n<div class=\"ui-box ui-box--rounded-lg\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Custom via CSS Variables",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-box",
+              "attrs": {
+                "style": "--box-padding: var(--ui-space-3); --box-bg: var(--ui-color-primary); --box-color: white; --box-radius: var(--ui-radius-lg);"
+              },
+              "text": "Custom box"
+            }
+          ],
+          "code": "<div class=\"ui-box\" style=\"--box-padding: ...; --box-bg: ...;\">...</div>"
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,13 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+const DOCS_PATH = resolve(__dirname, 'box.docs.json');
+test.describe('box visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await saveForLostPixel(page, 'box');
+    await expect(page.locator('body')).toHaveScreenshot('box.visual.png');
+  });
+});

package/src/{03-layout → layout}/box/index.scss RENAMED Viewed

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../config/tokens/variables' as t;
 // Box - base container with style props
 // Foundation for other layout primitives

package/src/layout/center/center-visual.png ADDED Viewed

Binary file

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

@@ -0,0 +1,13 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+const DOCS_PATH = resolve(__dirname, 'center.docs.json');
+test.describe('center visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await saveForLostPixel(page, 'center');
+    await expect(page.locator('body')).toHaveScreenshot('center.visual.png');
+  });
+});

package/src/layout/column/column-visual.png ADDED Viewed

Binary file

package/src/{03-layout/stack/stack.api.json → layout/column/column.api.json} RENAMED Viewed

@@ -1,5 +1,5 @@
 {
-  "name": "stack",
+  "name": "column",
   "element": "div",
   "modifiers": {
     "size": {