@teseor/css 1.14.2 → 1.15.0

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"
-        }
-      ]
-    }
-  ]
-}

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

@@ -1,54 +0,0 @@
-{
-  "id": "grid",
-  "type": "token",
-  "title": "Grid System",
-  "description": "All spacing and heights align to the 8px grid.",
-  "skipValidation": true,
-  "sections": [
-    {
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "text": "row-1 (16px)",
-              "style": {
-                "background": "var(--ui-color-primary)",
-                "color": "var(--ui-color-text-inverse)",
-                "height": "var(--ui-row-1)",
-                "display": "flex",
-                "align-items": "center",
-                "padding": "0 var(--ui-space-2)"
-              }
-            },
-            {
-              "tag": "div",
-              "text": "row-2 (32px)",
-              "style": {
-                "background": "var(--ui-color-primary)",
-                "color": "var(--ui-color-text-inverse)",
-                "height": "var(--ui-row-2)",
-                "display": "flex",
-                "align-items": "center",
-                "padding": "0 var(--ui-space-2)"
-              }
-            },
-            {
-              "tag": "div",
-              "text": "row-3 (48px)",
-              "style": {
-                "background": "var(--ui-color-primary)",
-                "color": "var(--ui-color-text-inverse)",
-                "height": "var(--ui-row-3)",
-                "display": "flex",
-                "align-items": "center",
-                "padding": "0 var(--ui-space-2)"
-              }
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}

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

@@ -1,114 +0,0 @@
-{
-  "id": "spacing",
-  "type": "token",
-  "title": "Spacing",
-  "description": "Spacing tokens based on the 8px unit.",
-  "skipValidation": true,
-  "sections": [
-    {
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-column ui-column--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-column ui-column--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-column ui-column--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-column ui-column--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-column ui-column--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-column ui-column--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" }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}