@teseor/css 1.14.3 → 1.15.0

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

@@ -1,289 +0,0 @@
-{
-  "id": "theming",
-  "type": "guide",
-  "title": "Theming",
-  "description": "Customize the design system with CSS custom properties",
-  "weight": 2,
-  "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/config/tokens/colors/colors.docs.json

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