@teseor/css 1.0.0

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

@@ -0,0 +1,114 @@
+{
+  "id": "spacing",
+  "type": "token",
+  "title": "Spacing",
+  "description": "Spacing tokens based on the 8px unit.",
+  "skipValidation": true,
+  "sections": [
+    {
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-stack ui-stack--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-space-1)",
+                    "height": "var(--ui-space-4)",
+                    "background": "var(--ui-color-primary)"
+                  }
+                },
+                { "tag": "small", "text": "space-1" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-stack ui-stack--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-space-2)",
+                    "height": "var(--ui-space-4)",
+                    "background": "var(--ui-color-primary)"
+                  }
+                },
+                { "tag": "small", "text": "space-2" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-stack ui-stack--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-space-3)",
+                    "height": "var(--ui-space-4)",
+                    "background": "var(--ui-color-primary)"
+                  }
+                },
+                { "tag": "small", "text": "space-3" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-stack ui-stack--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-space-4)",
+                    "height": "var(--ui-space-4)",
+                    "background": "var(--ui-color-primary)"
+                  }
+                },
+                { "tag": "small", "text": "space-4" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-stack ui-stack--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-space-6)",
+                    "height": "var(--ui-space-4)",
+                    "background": "var(--ui-color-primary)"
+                  }
+                },
+                { "tag": "small", "text": "space-6" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-stack ui-stack--xs",
+              "style": { "align-items": "center" },
+              "children": [
+                {
+                  "tag": "div",
+                  "style": {
+                    "width": "var(--ui-space-8)",
+                    "height": "var(--ui-space-4)",
+                    "background": "var(--ui-color-primary)"
+                  }
+                },
+                { "tag": "small", "text": "space-8" }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,77 @@
+{
+  "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

@@ -0,0 +1,119 @@
+:root {
+  // Font families
+  --ui-font-sans: "Noto Sans", system-ui, -apple-system, sans-serif;
+  --ui-font-mono: "Noto Sans Mono", ui-monospace, "Cascadia Code", 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/00-config/tokens/zindex/index.scss

@@ -0,0 +1,14 @@
+@layer tokens {
+  :root {
+    // Z-index scale (gaps allow insertion)
+    --ui-z-base: 0;
+    --ui-z-sticky: 100;
+    --ui-z-dropdown: 200;
+    --ui-z-overlay: 300;
+    --ui-z-modal: 400;
+    --ui-z-popover: 500;
+    --ui-z-tooltip: 600;
+    --ui-z-toast: 700;
+    --ui-z-debug: 9999;
+  }
+}

package/src/01-reset/index.scss

@@ -0,0 +1 @@
+@forward './reset';

package/src/01-reset/reset.scss

@@ -0,0 +1,8 @@
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+  }
+}

package/src/02-base/index.scss

@@ -0,0 +1,2 @@
+@forward "./root/root";
+@forward "./typography/typography";

package/src/02-base/root/root.scss

@@ -0,0 +1,12 @@
+@use '../../00-config/tokens/variables' as t;
+
+@layer base {
+  .root {
+    font-family: var(--ui-font-sans, #{t.$font-sans});
+    font-size: var(--ui-font-size-md, #{t.$font-size-md});
+    line-height: var(--ui-leading-md, calc(#{t.$unit} * 3));
+    color: var(--ui-color-text, #{t.$color-text});
+
+    background: var(--ui-color-bg, #{t.$color-bg});
+  }
+}

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

@@ -0,0 +1,94 @@
+{
+  "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/02-base/typography/typography.scss

@@ -0,0 +1,145 @@
+@layer base {
+  // Headings use semantic tokens
+  h1 {
+    margin-block-end: var(--ui-space-4);
+
+    font-size: var(--ui-heading-1-size);
+    font-weight: var(--ui-heading-1-weight);
+    line-height: var(--ui-heading-1-line-height);
+    letter-spacing: var(--ui-heading-1-tracking);
+  }
+
+  h2 {
+    margin-block-end: var(--ui-space-3);
+
+    font-size: var(--ui-heading-2-size);
+    font-weight: var(--ui-heading-2-weight);
+    line-height: var(--ui-heading-2-line-height);
+    letter-spacing: var(--ui-heading-2-tracking);
+  }
+
+  h3 {
+    margin-block-end: var(--ui-space-2);
+
+    font-size: var(--ui-heading-3-size);
+    font-weight: var(--ui-heading-3-weight);
+    line-height: var(--ui-heading-3-line-height);
+    letter-spacing: var(--ui-heading-3-tracking);
+  }
+
+  h4 {
+    margin-block-end: var(--ui-space-2);
+
+    font-size: var(--ui-heading-4-size);
+    font-weight: var(--ui-heading-4-weight);
+    line-height: var(--ui-heading-4-line-height);
+    letter-spacing: var(--ui-heading-4-tracking);
+  }
+
+  h5,
+  h6 {
+    margin-block-end: var(--ui-space-1);
+
+    font-size: var(--ui-heading-5-size);
+    font-weight: var(--ui-heading-5-weight);
+    line-height: var(--ui-heading-5-line-height);
+    letter-spacing: var(--ui-heading-5-tracking);
+  }
+
+  // Body text
+  p {
+    margin-block-end: var(--ui-space-2);
+
+    font-size: var(--ui-body-size);
+    line-height: var(--ui-body-line-height);
+    letter-spacing: var(--ui-body-tracking);
+  }
+
+  p:last-child {
+    margin-block-end: 0;
+  }
+
+  // Inline elements - line-height: 0 prevents affecting parent rhythm
+  strong,
+  b {
+    font-weight: var(--ui-weight-bold);
+    line-height: 0;
+  }
+
+  small {
+    font-size: var(--ui-caption-size);
+    line-height: 0;
+  }
+
+  // Code
+  code {
+    padding: 0 var(--ui-space-1);
+
+    font-family: var(--ui-font-mono);
+    font-size: var(--ui-body-sm-size);
+    line-height: 0;
+    vertical-align: baseline;
+
+    background: var(--ui-color-bg-muted);
+    border-radius: var(--ui-radius-sm);
+  }
+
+  pre {
+    padding: var(--ui-space-2);
+    margin-block-end: var(--ui-space-2);
+    overflow-x: auto;
+
+    font-family: var(--ui-font-mono);
+    font-size: var(--ui-body-sm-size);
+    line-height: var(--ui-body-sm-line-height);
+
+    background: var(--ui-color-bg-muted);
+    border-radius: var(--ui-radius-md);
+  }
+
+  pre code {
+    padding: 0;
+
+    background: none;
+  }
+
+  // ==========================================================================
+  // RESPONSIVE BREAKPOINTS
+  // ==========================================================================
+
+  // Mobile (<730px) - smaller headings
+  @media (width < 45.625rem) {
+    h1 {
+      font-size: var(--ui-font-size-2xl); // 28px
+      line-height: var(--ui-leading-2xl); // 32px
+    }
+
+    h2 {
+      font-size: var(--ui-font-size-xl); // 24px
+      line-height: var(--ui-leading-xl); // 32px
+    }
+
+    h3 {
+      font-size: var(--ui-font-size-lg); // 20px
+      line-height: var(--ui-leading-sm); // 24px
+    }
+
+    h4 {
+      font-size: 1.125rem; // 18px
+      line-height: var(--ui-leading-sm); // 24px
+    }
+  }
+
+  // Desktop (>1080px) - larger headings
+  @media (width > 67.5rem) {
+    h1 {
+      font-size: calc(var(--unit) * 6); // 48px
+      line-height: calc(var(--unit) * 7); // 56px
+    }
+
+    h2 {
+      font-size: var(--ui-font-size-4xl); // 40px
+      line-height: var(--ui-leading-4xl); // 48px
+    }
+  }
+}

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

@@ -0,0 +1,26 @@
+{
+  "name": "app-shell",
+  "element": "body",
+  "modifiers": {},
+  "relatedComponents": [
+    {
+      "name": "sidebar",
+      "modifiers": {
+        "end": { "type": "boolean" }
+      }
+    },
+    {
+      "name": "main",
+      "modifiers": {
+        "sidebar-end": { "type": "boolean" }
+      }
+    },
+    {
+      "name": "container",
+      "modifiers": {
+        "center": { "type": "boolean" }
+      }
+    }
+  ],
+  "cssVars": []
+}