@teseor/css 1.14.2 → 1.15.0

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

@@ -1,288 +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)",
-          "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": "Dark mode uses the CSS light-dark() function. Tokens resolve automatically based on color-scheme. Override with data-theme attribute.",
-      "examples": [
-        {
-          "title": "Automatic (system preference)",
-          "items": [
-            {
-              "tag": "div",
-              "class": "theme-demo",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-card",
-                  "children": [
-                    {
-                      "tag": "p",
-                      "text": "Follows OS color scheme"
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": ":root {\n  color-scheme: light dark;\n  --ui-color-bg: light-dark(\n    var(--ui-color-neutral-50),\n    var(--ui-color-neutral-900)\n  );\n}"
-        },
-        {
-          "title": "Force Light Mode",
-          "items": [
-            {
-              "tag": "div",
-              "class": "theme-demo",
-              "attrs": {
-                "data-theme": "light"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-card",
-                  "children": [
-                    {
-                      "tag": "p",
-                      "text": "Always light"
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<html data-theme=\"light\">\n  <!-- Forces light mode regardless of OS setting -->\n</html>"
-        },
-        {
-          "title": "Force Dark Mode",
-          "items": [
-            {
-              "tag": "div",
-              "class": "theme-demo",
-              "attrs": {
-                "data-theme": "dark"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-card",
-                  "children": [
-                    {
-                      "tag": "p",
-                      "text": "Always dark"
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<html data-theme=\"dark\">\n  <!-- Forces dark mode regardless of OS setting -->\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/debug/grid-overlay.scss

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

package/src/layout/app-shell/app-shell.docs.json

@@ -1,155 +0,0 @@
-{
-  "id": "layout",
-  "type": "primitive",
-  "title": "Layout",
-  "description": "Layout primitives for app shells with sidebars and content containers.",
-  "api": "app-shell.api.json",
-  "sections": [
-    {
-      "title": "App Shell + Sidebar + Main",
-      "description": "This page uses the layout primitives:",
-      "examples": [
-        {
-          "code": "<body class=\"ui-app-shell\">\n  <aside class=\"ui-sidebar\">\n    <!-- sidebar content -->\n  </aside>\n  <main class=\"ui-main\">\n    <div class=\"ui-container\">\n      <!-- page content -->\n    </div>\n  </main>\n</body>"
-        }
-      ]
-    },
-    {
-      "title": "With Topbar",
-      "description": "Add a fixed topbar by setting --topbar-height on app-shell. Sidebar and main offset automatically.",
-      "examples": [
-        {
-          "code": "<body class=\"ui-app-shell\" style=\"--topbar-height: var(--ui-row-3)\">\n  <header class=\"ui-topbar ui-topbar--fixed ui-topbar--bordered\">\n    <div class=\"ui-topbar__start\"><strong>App</strong></div>\n    <div class=\"ui-topbar__end\">User</div>\n  </header>\n  <aside class=\"ui-sidebar\">Sidebar</aside>\n  <main class=\"ui-main\">\n    <div class=\"ui-container\">Content</div>\n  </main>\n</body>"
-        }
-      ]
-    },
-    {
-      "title": "Sidebar Widths",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--sm",
-              "children": [
-                { "tag": "code", "text": ".ui-sidebar--sm" },
-                { "tag": "span", "text": "192px (24 units)" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--sm",
-              "children": [
-                { "tag": "code", "text": ".ui-sidebar--md" },
-                { "tag": "span", "text": "240px (30 units) - default" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--sm",
-              "children": [
-                { "tag": "code", "text": ".ui-sidebar--lg" },
-                { "tag": "span", "text": "320px (40 units)" }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Sidebar Position",
-      "description": "By default, sidebar is on the start (left in LTR). Use .ui-sidebar--end for right-side:",
-      "examples": [
-        {
-          "code": "<aside class=\"ui-sidebar ui-sidebar--end\">...</aside>\n<main class=\"ui-main ui-main--sidebar-end\">...</main>"
-        }
-      ]
-    },
-    {
-      "title": "Container Widths",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--sm",
-              "children": [
-                { "tag": "code", "text": ".ui-container--sm" },
-                { "tag": "span", "text": "640px (80 units)" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--sm",
-              "children": [
-                { "tag": "code", "text": ".ui-container--md" },
-                { "tag": "span", "text": "800px (100 units)" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--sm",
-              "children": [
-                { "tag": "code", "text": ".ui-container--lg" },
-                { "tag": "span", "text": "960px (120 units) - default" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--sm",
-              "children": [
-                { "tag": "code", "text": ".ui-container--xl" },
-                { "tag": "span", "text": "1280px (160 units)" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--sm",
-              "children": [
-                { "tag": "code", "text": ".ui-container--full" },
-                { "tag": "span", "text": "No max width" }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "With Footer",
-      "description": "Place footer inside the content area, after the container.",
-      "examples": [
-        {
-          "code": "<body class=\"ui-app-shell\">\n  <main class=\"ui-main ui-main--full\">\n    <div class=\"ui-container\">Content</div>\n    <footer class=\"ui-footer ui-footer--bordered\">\n      <div class=\"ui-footer__start\"><small>Brand</small></div>\n      <div class=\"ui-footer__end\"><small>v1.0.0</small></div>\n    </footer>\n  </main>\n</body>"
-        }
-      ]
-    },
-    {
-      "title": "Topbar Variants",
-      "description": "Sticky stays in flow, raised adds shadow.",
-      "examples": [
-        {
-          "code": "<header class=\"ui-topbar ui-topbar--sticky ui-topbar--bordered\">...</header>\n<header class=\"ui-topbar ui-topbar--raised\">...</header>"
-        }
-      ]
-    },
-    {
-      "title": "Footer Variants",
-      "description": "Sticky, fixed, and raised options.",
-      "examples": [
-        {
-          "code": "<footer class=\"ui-footer ui-footer--sticky ui-footer--bordered\">...</footer>\n<footer class=\"ui-footer ui-footer--fixed\">...</footer>\n<footer class=\"ui-footer ui-footer--raised\">...</footer>"
-        }
-      ]
-    },
-    {
-      "title": "Centered Container",
-      "examples": [
-        {
-          "code": "<div class=\"ui-container ui-container--center\">\n  <!-- centered content with max-width -->\n</div>"
-        }
-      ]
-    }
-  ]
-}