@teseor/css 1.7.0 → 1.8.0

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/box/box.docs.json

@@ -1,57 +0,0 @@
-{
-  "id": "box",
-  "type": "primitive",
-  "title": "Box",
-  "description": "Base container with style props. Foundation for layout primitives.",
-  "api": "box.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div class=\"ui-box\">Content</div>",
-          "code": "<div class=\"ui-box\">Content</div>"
-        }
-      ]
-    },
-    {
-      "title": "Padding",
-      "examples": [
-        {
-          "layout": "stack",
-          "html": "<div class=\"ui-box ui-box--p-1 ui-box--bg-subtle\">Padding 1</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Padding 2</div><div class=\"ui-box ui-box--p-3 ui-box--bg-subtle\">Padding 3</div><div class=\"ui-box ui-box--p-4 ui-box--bg-subtle\">Padding 4</div>",
-          "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": "stack",
-          "html": "<div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Subtle background</div><div class=\"ui-box ui-box--p-2 ui-box--bg-muted\">Muted background</div>",
-          "code": "<div class=\"ui-box ui-box--bg-subtle\">...</div>\n<div class=\"ui-box ui-box--bg-muted\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Rounded",
-      "examples": [
-        {
-          "layout": "cluster",
-          "html": "<div class=\"ui-box ui-box--p-3 ui-box--bg-subtle ui-box--rounded\">Rounded</div><div class=\"ui-box ui-box--p-3 ui-box--bg-subtle ui-box--rounded-lg\">Rounded lg</div>",
-          "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": [
-        {
-          "html": "<div class=\"ui-box\" style=\"--box-padding: var(--ui-space-3); --box-bg: var(--ui-color-primary); --box-color: white; --box-radius: var(--ui-radius-lg);\">Custom box</div>",
-          "code": "<div class=\"ui-box\" style=\"--box-padding: ...; --box-bg: ...;\">...</div>"
-        }
-      ]
-    }
-  ]
-}

package/src/03-layout/cluster/index.scss

@@ -1,18 +0,0 @@
-@layer primitives {
-  .cluster {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--cluster-gap, var(--ui-space-2));
-  }
-
-  .cluster--xs { --cluster-gap: var(--ui-space-1); }
-  .cluster--sm { --cluster-gap: var(--ui-space-2); }
-  .cluster--md { --cluster-gap: var(--ui-space-4); }
-  .cluster--lg { --cluster-gap: var(--ui-space-6); }
-
-  .cluster--start { justify-content: flex-start; }
-  .cluster--center { justify-content: center; }
-  .cluster--end { justify-content: flex-end; }
-  .cluster--between { justify-content: space-between; }
-}

package/src/03-layout/container/index.scss

@@ -1,17 +0,0 @@
-@layer primitives {
-  .container {
-    max-inline-size: var(--container-width, calc(var(--unit) * 120));
-    padding-inline: var(--ui-space-4);
-  }
-
-  .container--center {
-    margin-inline: auto;
-  }
-
-  /* Size modifiers */
-  .container--sm { --container-width: calc(var(--unit) * 80); }
-  .container--md { --container-width: calc(var(--unit) * 100); }
-  .container--lg { --container-width: calc(var(--unit) * 120); }
-  .container--xl { --container-width: calc(var(--unit) * 160); }
-  .container--full { max-inline-size: none; }
-}

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

@@ -1,15 +0,0 @@
-{
-  "name": "flex",
-  "element": "div",
-  "modifiers": {
-    "row": { "type": "boolean" },
-    "col": { "type": "boolean" },
-    "wrap": { "type": "boolean" },
-    "items-center": { "type": "boolean" },
-    "justify-between": { "type": "boolean" },
-    "gap-1": { "type": "boolean" },
-    "gap-2": { "type": "boolean" },
-    "gap-4": { "type": "boolean" }
-  },
-  "cssVars": []
-}

package/src/03-layout/flex/flex.docs.json

@@ -1,56 +0,0 @@
-{
-  "id": "flex",
-  "type": "primitive",
-  "title": "Flex",
-  "description": "Flexbox layout container with direction, wrap, gap, and alignment controls.",
-  "api": "flex.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div class=\"ui-flex\"><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">A</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">B</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">C</div></div>",
-          "code": "<div class=\"ui-flex\">\n  <div>A</div>\n  <div>B</div>\n  <div>C</div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Direction",
-      "examples": [
-        {
-          "layout": "stack",
-          "html": "<div class=\"ui-flex ui-flex--row\"><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Row</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Row</div></div><div class=\"ui-flex ui-flex--col\"><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Column</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Column</div></div>",
-          "code": "<div class=\"ui-flex ui-flex--row\">...</div>\n<div class=\"ui-flex ui-flex--col\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Alignment",
-      "examples": [
-        {
-          "html": "<div class=\"ui-flex ui-flex--items-center ui-flex--justify-between\" style=\"min-height: 80px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-box ui-box--p-2 ui-box--bg-muted\">Start</div><div class=\"ui-box ui-box--p-2 ui-box--bg-muted\">Center</div><div class=\"ui-box ui-box--p-2 ui-box--bg-muted\">End</div></div>",
-          "code": "<div class=\"ui-flex ui-flex--items-center ui-flex--justify-between\">\n  ...\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Gap",
-      "examples": [
-        {
-          "layout": "stack",
-          "html": "<div class=\"ui-flex ui-flex--gap-1\"><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Gap 1</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Gap 1</div></div><div class=\"ui-flex ui-flex--gap-4\"><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Gap 4</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Gap 4</div></div>",
-          "code": "<div class=\"ui-flex ui-flex--gap-1\">...</div>\n<div class=\"ui-flex ui-flex--gap-4\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Wrap",
-      "examples": [
-        {
-          "html": "<div class=\"ui-flex ui-flex--wrap ui-flex--gap-2\" style=\"max-width: 200px;\"><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Wrap</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Wrap</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Wrap</div><div class=\"ui-box ui-box--p-2 ui-box--bg-subtle\">Wrap</div></div>",
-          "code": "<div class=\"ui-flex ui-flex--wrap\">...</div>"
-        }
-      ]
-    }
-  ]
-}

package/src/03-layout/flex/index.scss

@@ -1,51 +0,0 @@
-@use '../../00-config/tokens/variables' as t;
-
-// Flex - flexbox layout container
-// Generic flexbox with direction, wrap, gap, alignment
-
-@layer primitives {
-  .flex {
-    --_gap: var(--flex-gap, var(--ui-space-2, #{t.$space-2}));
-    --_direction: var(--flex-direction, row);
-    --_wrap: var(--flex-wrap, nowrap);
-    --_align: var(--flex-align, stretch);
-    --_justify: var(--flex-justify, flex-start);
-
-    display: flex;
-    flex-direction: var(--_direction);
-    flex-wrap: var(--_wrap);
-    align-items: var(--_align);
-    justify-content: var(--_justify);
-    gap: var(--_gap);
-  }
-
-  // Direction modifiers
-  .flex--row { --_direction: row; }
-  .flex--col { --_direction: column; }
-  .flex--row-reverse { --_direction: row-reverse; }
-  .flex--col-reverse { --_direction: column-reverse; }
-
-  // Wrap modifiers
-  .flex--wrap { --_wrap: wrap; }
-  .flex--nowrap { --_wrap: nowrap; }
-
-  // Alignment modifiers
-  .flex--items-start { --_align: flex-start; }
-  .flex--items-center { --_align: center; }
-  .flex--items-end { --_align: flex-end; }
-  .flex--items-baseline { --_align: baseline; }
-
-  // Justify modifiers
-  .flex--justify-start { --_justify: flex-start; }
-  .flex--justify-center { --_justify: center; }
-  .flex--justify-end { --_justify: flex-end; }
-  .flex--justify-between { --_justify: space-between; }
-  .flex--justify-around { --_justify: space-around; }
-
-  // Gap modifiers
-  .flex--gap-0 { --_gap: 0; }
-  .flex--gap-1 { --_gap: var(--ui-space-1, #{t.$space-1}); }
-  .flex--gap-2 { --_gap: var(--ui-space-2, #{t.$space-2}); }
-  .flex--gap-3 { --_gap: var(--ui-space-3, #{t.$space-3}); }
-  .flex--gap-4 { --_gap: var(--ui-space-4, #{t.$space-4}); }
-}