@teseor/css 1.7.0 → 1.9.0

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

@@ -1,168 +0,0 @@
-{
-  "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": "stack",
-          "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": "stack",
-          "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": "stack",
-          "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": "stack",
-          "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": [
-        {
-          "html": "<div class=\"ui-cluster ui-cluster--sm\"><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-success); border-radius: var(--ui-radius-sm)\"></div><span>--ui-color-success</span></div><div class=\"ui-cluster ui-cluster--sm\"><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-warning); border-radius: var(--ui-radius-sm)\"></div><span>--ui-color-warning</span></div><div class=\"ui-cluster ui-cluster--sm\"><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-danger); border-radius: var(--ui-radius-sm)\"></div><span>--ui-color-danger</span></div>"
-        }
-      ]
-    },
-    {
-      "title": "Primary Scale",
-      "description": "Brand color with light and dark variants.",
-      "examples": [
-        {
-          "html": "<div class=\"ui-cluster ui-cluster--sm\"><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-primary-light); border-radius: var(--ui-radius-sm)\"></div><span>--ui-color-primary-light</span></div><div class=\"ui-cluster ui-cluster--sm\"><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-primary); border-radius: var(--ui-radius-sm)\"></div><span>--ui-color-primary</span></div><div class=\"ui-cluster ui-cluster--sm\"><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-primary-dark); border-radius: var(--ui-radius-sm)\"></div><span>--ui-color-primary-dark</span></div>"
-        }
-      ]
-    },
-    {
-      "title": "Neutral Scale",
-      "description": "Gray scale for text, backgrounds, and borders. Derived from primary hue for subtle warmth.",
-      "examples": [
-        {
-          "html": "<div class=\"ui-cluster ui-cluster--sm\" style=\"flex-wrap: wrap\"><div 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)\"></div><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-100); border-radius: var(--ui-radius-sm)\"></div><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-200); border-radius: var(--ui-radius-sm)\"></div><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-300); border-radius: var(--ui-radius-sm)\"></div><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-400); border-radius: var(--ui-radius-sm)\"></div><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-500); border-radius: var(--ui-radius-sm)\"></div><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-600); border-radius: var(--ui-radius-sm)\"></div><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-700); border-radius: var(--ui-radius-sm)\"></div><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-800); border-radius: var(--ui-radius-sm)\"></div><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-900); border-radius: var(--ui-radius-sm)\"></div></div>",
-          "code": "50 → 100 → 200 → 300 → 400 → 500 → 600 → 700 → 800 → 900"
-        }
-      ]
-    }
-  ]
-}

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

@@ -1,26 +0,0 @@
-: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/tokens/grid/index.scss

@@ -1,11 +0,0 @@
-:root {
-  --unit: 8px; /* 8px */
-  --ui-row: calc(var(--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);
-}

package/src/00-config/tokens/radius/index.scss

@@ -1,7 +0,0 @@
-:root {
-  // Radius - derived from --unit (8px)
-  --ui-radius-sm: calc(var(--unit) * 0.5); // 4px
-  --ui-radius-md: var(--unit); // 8px
-  --ui-radius-lg: calc(var(--unit) * 2); // 16px
-  --ui-radius-full: 9999px;
-}

package/src/00-config/tokens/semantic/colors/index.scss

@@ -1,30 +0,0 @@
-:root {
-  --ui-color-text: var(--ui-color-neutral-900);
-  --ui-color-text-muted: var(--ui-color-neutral-500);
-  --ui-color-text-inverse: var(--ui-color-neutral-50);
-
-  --ui-color-bg: var(--ui-color-neutral-50);
-  --ui-color-bg-subtle: var(--ui-color-neutral-100);
-  --ui-color-bg-muted: var(--ui-color-neutral-200);
-
-  --ui-color-border: var(--ui-color-neutral-200);
-  --ui-color-border-strong: var(--ui-color-neutral-300);
-
-  --ui-color-interactive: var(--ui-color-primary);
-  --ui-color-interactive-hover: var(--ui-color-primary-dark);
-
-  --ui-color-focus: var(--ui-color-primary-light);
-}
-
-[data-theme="dark"] {
-  --ui-color-text: var(--ui-color-neutral-100);
-  --ui-color-text-muted: var(--ui-color-neutral-400);
-  --ui-color-text-inverse: var(--ui-color-neutral-900);
-
-  --ui-color-bg: var(--ui-color-neutral-900);
-  --ui-color-bg-subtle: var(--ui-color-neutral-800);
-  --ui-color-bg-muted: var(--ui-color-neutral-700);
-
-  --ui-color-border: var(--ui-color-neutral-700);
-  --ui-color-border-strong: var(--ui-color-neutral-600);
-}

package/src/00-config/tokens/semantic/spacing/index.scss

@@ -1,10 +0,0 @@
-:root {
-  --spacing-xs: var(--ui-space-1);
-  --spacing-sm: var(--ui-space-2);
-  --spacing-md: var(--ui-space-4);
-  --spacing-lg: var(--ui-space-6);
-  --spacing-xl: var(--ui-space-8);
-
-  --spacing-gutter: var(--ui-space-4);
-  --spacing-section: var(--ui-space-8);
-}

package/src/00-config/tokens/shadows/index.scss

@@ -1,5 +0,0 @@
-:root {
-  --shadow-sm: 0 1px 2px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.05);
-  --shadow-md: 0 4px 6px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.1);
-  --shadow-lg: 0 10px 15px hsl(var(--ui-hue-primary, 220) 10% 20% / 0.15);
-}

package/src/00-config/tokens/spacing/index.scss

@@ -1,15 +0,0 @@
-:root {
-  // Micro spacing
-  --ui-space-px: calc(var(--unit) * 0.125); // 1px
-  --ui-space-quarter: calc(var(--unit) * 0.25); // 2px
-  --ui-space-half: calc(var(--unit) * 0.5); // 4px
-  --ui-space-0: calc(var(--unit) * 0.5); // 4px (alias)
-
-  // Standard spacing
-  --ui-space-1: var(--unit); // 8px
-  --ui-space-2: calc(var(--unit) * 2); // 16px
-  --ui-space-3: calc(var(--unit) * 3); // 24px
-  --ui-space-4: calc(var(--unit) * 4); // 32px
-  --ui-space-6: calc(var(--unit) * 6); // 48px
-  --ui-space-8: calc(var(--unit) * 8); // 64px
-}

package/src/00-config/tokens/theming.docs.json

@@ -1,77 +0,0 @@
-{
-  "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)",
-          "html": "<div class=\"theme-demo\"><button class=\"ui-button\">Primary</button><button class=\"ui-button ui-button--secondary\">Secondary</button><button class=\"ui-button ui-button--danger\">Danger</button></div>",
-          "code": ":root {\n  --ui-hue-primary: 220; /* Blue */\n}"
-        },
-        {
-          "title": "Purple Theme",
-          "html": "<div class=\"theme-demo theme-purple\"><button class=\"ui-button\">Primary</button><button class=\"ui-button ui-button--secondary\">Secondary</button><button class=\"ui-button ui-button--danger\">Danger</button></div>",
-          "code": ".theme-purple {\n  --ui-hue-primary: 270; /* Purple */\n}"
-        },
-        {
-          "title": "Teal Theme",
-          "html": "<div class=\"theme-demo theme-teal\"><button class=\"ui-button\">Primary</button><button class=\"ui-button ui-button--secondary\">Secondary</button><button class=\"ui-button ui-button--danger\">Danger</button></div>",
-          "code": ".theme-teal {\n  --ui-hue-primary: 180; /* Teal */\n}"
-        },
-        {
-          "title": "Orange Theme",
-          "html": "<div class=\"theme-demo theme-orange\"><button class=\"ui-button\">Primary</button><button class=\"ui-button ui-button--secondary\">Secondary</button><button class=\"ui-button ui-button--danger\">Danger</button></div>",
-          "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",
-          "html": "<div class=\"theme-demo\"><div class=\"ui-card\"><p>Light mode card</p></div></div>",
-          "code": "<html>\n  <!-- Light mode (default) -->\n</html>"
-        },
-        {
-          "title": "Dark Mode",
-          "html": "<div class=\"theme-demo\" data-theme=\"dark\"><div class=\"ui-card\"><p>Dark mode card</p></div></div>",
-          "code": "<html data-theme=\"dark\">\n  <!-- Dark mode enabled -->\n</html>"
-        }
-      ]
-    },
-    {
-      "title": "Component Overrides",
-      "description": "Override specific component tokens",
-      "examples": [
-        {
-          "title": "Custom Button Height",
-          "html": "<div class=\"theme-demo custom-buttons\"><button class=\"ui-button ui-button--sm\">Small</button><button class=\"ui-button\">Default</button><button class=\"ui-button ui-button--lg\">Large</button></div>",
-          "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",
-          "html": "<div class=\"theme-demo custom-cards\"><div class=\"ui-card\"><p>Card with custom padding</p></div></div>",
-          "code": ".custom-cards {\n  --ui-card-padding: var(--ui-space-4);\n}"
-        }
-      ]
-    },
-    {
-      "title": "Full Theme Example",
-      "description": "Complete theme customization",
-      "examples": [
-        {
-          "html": "<div class=\"theme-demo theme-corporate\"><button class=\"ui-button\">Action</button><div class=\"ui-card\"><p>Corporate theme with teal accent and sharp corners</p></div></div>",
-          "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/00-config/tokens/typography/index.scss

@@ -1,119 +0,0 @@
-: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(--unit) * 3);
-  --ui-leading-tight-lg: calc(var(--unit) * 3);
-
-  // Normal line-heights for readable body text
-  --ui-leading-xs: var(--ui-row-1);
-  --ui-leading-sm: calc(var(--unit) * 3);
-  --ui-leading-md: calc(var(--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(--unit) * 5);
-  --ui-leading-4xl: calc(var(--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/02-base/typography/typography.docs.json

@@ -1,94 +0,0 @@
-{
-  "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": [
-        {
-          "html": "<table class=\"ui-table\"><thead><tr><th>Token</th><th>Size</th><th>Line-height</th></tr></thead><tbody><tr><td><code>--ui-font-size-xs</code></td><td>12px</td><td>16px</td></tr><tr><td><code>--ui-font-size-sm</code></td><td>14px</td><td>24px</td></tr><tr><td><code>--ui-font-size-md</code></td><td>16px</td><td>24px</td></tr><tr><td><code>--ui-font-size-lg</code></td><td>20px</td><td>32px</td></tr><tr><td><code>--ui-font-size-xl</code></td><td>24px</td><td>32px</td></tr><tr><td><code>--ui-font-size-2xl</code></td><td>28px</td><td>32px</td></tr><tr><td><code>--ui-font-size-3xl</code></td><td>32px</td><td>40px</td></tr><tr><td><code>--ui-font-size-4xl</code></td><td>40px</td><td>48px</td></tr></tbody></table>"
-        }
-      ]
-    },
-    {
-      "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": [
-        {
-          "html": "<p>Body text at 16px with 24px line-height. The <strong>bold text</strong> and <code>inline code</code> maintain the same rhythm.</p>\n<p class=\"ui-text-body-sm\">Body small at 14px with 24px line-height for secondary text.</p>"
-        }
-      ]
-    },
-    {
-      "title": "Text Roles",
-      "description": "Semantic text styles for specific use cases.",
-      "examples": [
-        {
-          "html": "<p class=\"ui-text-lead\">Lead paragraph - 20px / 32px. Use for opening paragraphs or article intros.</p>"
-        },
-        {
-          "html": "<p class=\"ui-text-eyebrow\">Eyebrow text</p>\n<h2>Related Heading</h2>",
-          "description": "Eyebrow - 12px uppercase with wide tracking. Use above headings for categorization."
-        },
-        {
-          "html": "<p class=\"ui-text-caption\">Caption text - 12px / 16px. Use for labels, hints, and metadata.</p>"
-        }
-      ]
-    },
-    {
-      "title": "Font Weights",
-      "description": "Four weight levels for hierarchy.",
-      "examples": [
-        {
-          "html": "<p class=\"ui-font-normal\">Normal (400) - Body text</p>\n<p class=\"ui-font-medium\">Medium (500) - Labels, small headings</p>\n<p class=\"ui-font-semibold\">Semibold (600) - Subheadings</p>\n<p class=\"ui-font-bold\">Bold (700) - Headlines, emphasis</p>"
-        }
-      ]
-    },
-    {
-      "title": "Letter Spacing",
-      "description": "Three tracking options based on use case.",
-      "examples": [
-        {
-          "html": "<p class=\"ui-text-3xl ui-tracking-display\">Display tracking (-0.02em)</p>\n<p>Body tracking (0) - default</p>\n<p class=\"ui-text-eyebrow\">Caps tracking (+0.08em)</p>"
-        }
-      ]
-    },
-    {
-      "title": "Line Length",
-      "description": "Constrain text width for optimal readability (45-75 characters).",
-      "examples": [
-        {
-          "html": "<div class=\"ui-prose\"><p>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.</p></div>"
-        }
-      ]
-    },
-    {
-      "title": "Responsive Behavior",
-      "description": "Headings scale down on mobile (<730px) and up on desktop (>1080px).",
-      "examples": [
-        {
-          "html": "<table class=\"ui-table\"><thead><tr><th>Heading</th><th>Mobile</th><th>Default</th><th>Desktop</th></tr></thead><tbody><tr><td>h1</td><td>28px</td><td>40px</td><td>48px</td></tr><tr><td>h2</td><td>24px</td><td>32px</td><td>40px</td></tr><tr><td>h3</td><td>20px</td><td>28px</td><td>28px</td></tr><tr><td>h4</td><td>18px</td><td>24px</td><td>24px</td></tr></tbody></table>"
-        }
-      ]
-    }
-  ]
-}

package/src/03-layout/app-shell/app-shell.api.json

@@ -1,44 +0,0 @@
-{
-  "name": "app-shell",
-  "element": "body",
-  "modifiers": {},
-  "relatedComponents": [
-    {
-      "name": "topbar",
-      "modifiers": {
-        "sticky": { "type": "boolean" },
-        "fixed": { "type": "boolean" },
-        "bordered": { "type": "boolean" },
-        "raised": { "type": "boolean" }
-      }
-    },
-    {
-      "name": "sidebar",
-      "modifiers": {
-        "end": { "type": "boolean" }
-      }
-    },
-    {
-      "name": "main",
-      "modifiers": {
-        "sidebar-end": { "type": "boolean" }
-      }
-    },
-    {
-      "name": "container",
-      "modifiers": {
-        "center": { "type": "boolean" }
-      }
-    },
-    {
-      "name": "footer",
-      "modifiers": {
-        "sticky": { "type": "boolean" },
-        "fixed": { "type": "boolean" },
-        "bordered": { "type": "boolean" },
-        "raised": { "type": "boolean" }
-      }
-    }
-  ],
-  "cssVars": []
-}

package/src/03-layout/app-shell/index.scss

@@ -1,5 +0,0 @@
-@layer primitives {
-  .app-shell {
-    min-block-size: 100vh;
-  }
-}

package/src/03-layout/box/box.api.json

@@ -1,15 +0,0 @@
-{
-  "name": "box",
-  "element": "div",
-  "modifiers": {
-    "p-1": { "type": "boolean" },
-    "p-2": { "type": "boolean" },
-    "p-3": { "type": "boolean" },
-    "p-4": { "type": "boolean" },
-    "bg-subtle": { "type": "boolean" },
-    "bg-muted": { "type": "boolean" },
-    "rounded": { "type": "boolean" },
-    "rounded-lg": { "type": "boolean" }
-  },
-  "cssVars": []
-}