npm - @teseor/css - Versions diffs - 1.14.3 → 1.15.1 - Mend

@teseor/css 1.14.3 → 1.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (464) hide show

package/src/utilities/visually-hidden/docs.html ADDED Viewed

@@ -0,0 +1,16 @@
+---
+title: Visually Hidden
+id: visually-hidden
+description: Hides content visually while keeping it accessible to screen readers. Use for skip links and accessible labels.
+---
+<!-- @default -->
+<!-- Content is hidden visually but announced by screen readers -->
+<button>
+Submit
+  <span class="ui-visually-hidden"> form to contact support</span>
+</button>
+<!-- @focusable_skip_link -->
+<!-- Becomes visible when focused - useful for skip links -->
+<a class="ui-visually-hidden ui-visually-hidden--focusable" href="#main" style="position: relative;">Skip to main content</a>

package/src/base/root.docs.json DELETED Viewed

@@ -1,35 +0,0 @@
-{
-  "id": "root",
-  "type": "token",
-  "title": "Root",
-  "description": "Base styles applied to the .root class: font family, size, line-height, color, and background",
-  "skipValidation": true,
-  "sections": [
-    {
-      "title": "Usage",
-      "description": "Add the .ui-root class to the html or body element to establish baseline typography and color.",
-      "examples": [
-        {
-          "title": "Basic setup",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-root",
-              "children": [
-                {
-                  "tag": "p",
-                  "text": "Text inherits font-family, size, line-height, and color from .ui-root"
-                }
-              ]
-            }
-          ],
-          "code": "<html class=\"ui-root\">\n  <body>\n    <!-- All children inherit base styles -->\n  </body>\n</html>"
-        },
-        {
-          "title": "Tokens applied",
-          "code": ".ui-root {\n  font-family: var(--ui-font-sans);\n  font-size: var(--ui-font-size-md);\n  line-height: var(--ui-leading-md);\n  color: var(--ui-color-text);\n  background: var(--ui-color-bg);\n}"
-        }
-      ]
-    }
-  ]
-}

package/src/base/typography/typography.docs.json DELETED Viewed

@@ -1,328 +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": [
-        {
-          "items": [
-            {
-              "tag": "table",
-              "class": "ui-table",
-              "children": [
-                {
-                  "tag": "thead",
-                  "children": [
-                    {
-                      "tag": "tr",
-                      "children": [
-                        { "tag": "th", "text": "Token" },
-                        { "tag": "th", "text": "Size" },
-                        { "tag": "th", "text": "Line-height" }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "tbody",
-                  "children": [
-                    {
-                      "tag": "tr",
-                      "children": [
-                        {
-                          "tag": "td",
-                          "children": [{ "tag": "code", "text": "--ui-font-size-xs" }]
-                        },
-                        { "tag": "td", "text": "12px" },
-                        { "tag": "td", "text": "16px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        {
-                          "tag": "td",
-                          "children": [{ "tag": "code", "text": "--ui-font-size-sm" }]
-                        },
-                        { "tag": "td", "text": "14px" },
-                        { "tag": "td", "text": "24px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        {
-                          "tag": "td",
-                          "children": [{ "tag": "code", "text": "--ui-font-size-md" }]
-                        },
-                        { "tag": "td", "text": "16px" },
-                        { "tag": "td", "text": "24px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        {
-                          "tag": "td",
-                          "children": [{ "tag": "code", "text": "--ui-font-size-lg" }]
-                        },
-                        { "tag": "td", "text": "20px" },
-                        { "tag": "td", "text": "32px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        {
-                          "tag": "td",
-                          "children": [{ "tag": "code", "text": "--ui-font-size-xl" }]
-                        },
-                        { "tag": "td", "text": "24px" },
-                        { "tag": "td", "text": "32px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        {
-                          "tag": "td",
-                          "children": [{ "tag": "code", "text": "--ui-font-size-2xl" }]
-                        },
-                        { "tag": "td", "text": "28px" },
-                        { "tag": "td", "text": "32px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        {
-                          "tag": "td",
-                          "children": [{ "tag": "code", "text": "--ui-font-size-3xl" }]
-                        },
-                        { "tag": "td", "text": "32px" },
-                        { "tag": "td", "text": "40px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        {
-                          "tag": "td",
-                          "children": [{ "tag": "code", "text": "--ui-font-size-4xl" }]
-                        },
-                        { "tag": "td", "text": "40px" },
-                        { "tag": "td", "text": "48px" }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "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": [
-        {
-          "items": [
-            {
-              "tag": "p",
-              "children": [
-                { "text": "Body text at 16px with 24px line-height. The " },
-                { "tag": "strong", "text": "bold text" },
-                { "text": " and " },
-                { "tag": "code", "text": "inline code" },
-                { "text": " maintain the same rhythm." }
-              ]
-            },
-            {
-              "tag": "p",
-              "class": "ui-text-body-sm",
-              "text": "Body small at 14px with 24px line-height for secondary text."
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Text Roles",
-      "description": "Semantic text styles for specific use cases.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "p",
-              "class": "ui-text-lead",
-              "text": "Lead paragraph - 20px / 32px. Use for opening paragraphs or article intros."
-            }
-          ]
-        },
-        {
-          "items": [
-            { "tag": "p", "class": "ui-text-eyebrow", "text": "Eyebrow text" },
-            { "tag": "h2", "text": "Related Heading" }
-          ],
-          "description": "Eyebrow - 12px uppercase with wide tracking. Use above headings for categorization."
-        },
-        {
-          "items": [
-            {
-              "tag": "p",
-              "class": "ui-text-caption",
-              "text": "Caption text - 12px / 16px. Use for labels, hints, and metadata."
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Font Weights",
-      "description": "Four weight levels for hierarchy.",
-      "examples": [
-        {
-          "items": [
-            { "tag": "p", "class": "ui-font-normal", "text": "Normal (400) - Body text" },
-            {
-              "tag": "p",
-              "class": "ui-font-medium",
-              "text": "Medium (500) - Labels, small headings"
-            },
-            { "tag": "p", "class": "ui-font-semibold", "text": "Semibold (600) - Subheadings" },
-            { "tag": "p", "class": "ui-font-bold", "text": "Bold (700) - Headlines, emphasis" }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Letter Spacing",
-      "description": "Three tracking options based on use case.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "p",
-              "class": "ui-text-3xl ui-tracking-display",
-              "text": "Display tracking (-0.02em)"
-            },
-            { "tag": "p", "text": "Body tracking (0) - default" },
-            { "tag": "p", "class": "ui-text-eyebrow", "text": "Caps tracking (+0.08em)" }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Line Length",
-      "description": "Constrain text width for optimal readability (45-75 characters).",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-prose",
-              "children": [
-                {
-                  "tag": "p",
-                  "text": "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."
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Responsive Behavior",
-      "description": "Headings scale down on mobile (<730px) and up on desktop (>1080px).",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "table",
-              "class": "ui-table",
-              "children": [
-                {
-                  "tag": "thead",
-                  "children": [
-                    {
-                      "tag": "tr",
-                      "children": [
-                        { "tag": "th", "text": "Heading" },
-                        { "tag": "th", "text": "Mobile" },
-                        { "tag": "th", "text": "Default" },
-                        { "tag": "th", "text": "Desktop" }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "tbody",
-                  "children": [
-                    {
-                      "tag": "tr",
-                      "children": [
-                        { "tag": "td", "text": "h1" },
-                        { "tag": "td", "text": "28px" },
-                        { "tag": "td", "text": "40px" },
-                        { "tag": "td", "text": "48px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        { "tag": "td", "text": "h2" },
-                        { "tag": "td", "text": "24px" },
-                        { "tag": "td", "text": "32px" },
-                        { "tag": "td", "text": "40px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        { "tag": "td", "text": "h3" },
-                        { "tag": "td", "text": "20px" },
-                        { "tag": "td", "text": "28px" },
-                        { "tag": "td", "text": "28px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        { "tag": "td", "text": "h4" },
-                        { "tag": "td", "text": "18px" },
-                        { "tag": "td", "text": "24px" },
-                        { "tag": "td", "text": "24px" }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}

package/src/components/actions/button/button.docs.json DELETED Viewed

@@ -1,264 +0,0 @@
-{
-  "id": "button",
-  "type": "component",
-  "title": "Button",
-  "api": "./button.api.json",
-  "description": "Buttons trigger actions. Use primary for main CTA, secondary for less important actions.",
-  "modifiers": {
-    "size": {
-      "usage": "Default is 32px (2 rows). Use small for dense UIs, large for prominent CTAs."
-    },
-    "variant": {
-      "usage": "Primary for main actions. Secondary for less important. Outline for subtle. Ghost for toolbar. Danger for destructive. Link for inline."
-    },
-    "icon": {
-      "usage": "Square icon-only buttons. Always add aria-label for accessibility."
-    },
-    "radius": {
-      "usage": "Override border radius. Use radius-full for pill-shaped buttons."
-    },
-    "block": {
-      "usage": "Full width button. Use for mobile or form submit."
-    },
-    "loading": {
-      "usage": "Shows spinner animation. Button becomes non-interactive."
-    }
-  },
-  "sections": [
-    {
-      "title": "Variants",
-      "description": "Button styles for different purposes and emphasis levels.",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            { "tag": "button", "class": "ui-button", "text": "Primary" },
-            { "tag": "button", "class": "ui-button ui-button--secondary", "text": "Secondary" },
-            { "tag": "button", "class": "ui-button ui-button--outline", "text": "Outline" },
-            { "tag": "button", "class": "ui-button ui-button--ghost", "text": "Ghost" },
-            { "tag": "button", "class": "ui-button ui-button--danger", "text": "Danger" },
-            { "tag": "button", "class": "ui-button ui-button--link", "text": "Link" }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "description": "Small for dense UIs, default for most cases, large for prominent CTAs.",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            { "tag": "button", "class": "ui-button ui-button--sm", "text": "Small" },
-            { "tag": "button", "class": "ui-button ui-button--md", "text": "Medium" },
-            { "tag": "button", "class": "ui-button ui-button--lg", "text": "Large" }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Radius",
-      "description": "Override border radius. Use radius-full for pill-shaped buttons.",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            { "tag": "button", "class": "ui-button ui-button--radius-none", "text": "None" },
-            { "tag": "button", "class": "ui-button ui-button--radius-sm", "text": "Small" },
-            { "tag": "button", "class": "ui-button", "text": "Default" },
-            { "tag": "button", "class": "ui-button ui-button--radius-lg", "text": "Large" },
-            { "tag": "button", "class": "ui-button ui-button--radius-full", "text": "Full" }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Block",
-      "description": "Full width button for mobile or form submit.",
-      "examples": [
-        {
-          "items": [
-            { "tag": "button", "class": "ui-button ui-button--block", "text": "Block Button" }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Loading",
-      "description": "Shows spinner animation. Button becomes non-interactive.",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            { "tag": "button", "class": "ui-button ui-button--loading", "text": "Loading" },
-            {
-              "tag": "button",
-              "class": "ui-button ui-button--secondary ui-button--loading",
-              "text": "Loading"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Icon Button",
-      "description": "Square icon-only buttons. Use with SVG icons from Lucide or similar sets.",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "button",
-              "class": "ui-button ui-button--icon ui-button--sm",
-              "children": [
-                {
-                  "tag": "svg",
-                  "class": "ui-icon",
-                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "children": [
-                    { "tag": "path", "attrs": { "d": "M18 6 6 18" } },
-                    { "tag": "path", "attrs": { "d": "m6 6 12 12" } }
-                  ]
-                }
-              ]
-            },
-            {
-              "tag": "button",
-              "class": "ui-button ui-button--icon",
-              "children": [
-                {
-                  "tag": "svg",
-                  "class": "ui-icon",
-                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "children": [
-                    { "tag": "path", "attrs": { "d": "M5 12h14" } },
-                    { "tag": "path", "attrs": { "d": "M12 5v14" } }
-                  ]
-                }
-              ]
-            },
-            {
-              "tag": "button",
-              "class": "ui-button ui-button--icon ui-button--lg",
-              "children": [
-                {
-                  "tag": "svg",
-                  "class": "ui-icon",
-                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "children": [
-                    { "tag": "circle", "attrs": { "cx": "11", "cy": "11", "r": "8" } },
-                    { "tag": "path", "attrs": { "d": "m21 21-4.3-4.3" } }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<button class=\"ui-button ui-button--icon ui-button--sm\">\n  <svg class=\"ui-icon\"><!-- x icon --></svg>\n</button>\n<button class=\"ui-button ui-button--icon\">\n  <svg class=\"ui-icon\"><!-- plus icon --></svg>\n</button>\n<button class=\"ui-button ui-button--icon ui-button--lg\">\n  <svg class=\"ui-icon\"><!-- search icon --></svg>\n</button>"
-        }
-      ]
-    },
-    {
-      "title": "With Icon",
-      "description": "Buttons with icon and text. Use ui-button__icon element with --start or --end modifier.",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "button",
-              "class": "ui-button",
-              "children": [
-                {
-                  "tag": "svg",
-                  "class": "ui-icon ui-button__icon ui-button__icon--start",
-                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "children": [
-                    { "tag": "path", "attrs": { "d": "M5 12h14" } },
-                    { "tag": "path", "attrs": { "d": "M12 5v14" } }
-                  ]
-                },
-                { "text": "Add Item" }
-              ]
-            },
-            {
-              "tag": "button",
-              "class": "ui-button ui-button--secondary",
-              "children": [
-                { "text": "Next" },
-                {
-                  "tag": "svg",
-                  "class": "ui-icon ui-button__icon ui-button__icon--end",
-                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "children": [{ "tag": "path", "attrs": { "d": "m9 18 6-6-6-6" } }]
-                }
-              ]
-            }
-          ],
-          "code": "<button class=\"ui-button\">\n  <svg class=\"ui-icon ui-button__icon ui-button__icon--start\"><!-- plus --></svg>\n  Add Item\n</button>\n<button class=\"ui-button ui-button--secondary\">\n  Next\n  <svg class=\"ui-icon ui-button__icon ui-button__icon--end\"><!-- chevron-right --></svg>\n</button>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-button-accent",
-      "default": "var(--ui-color-primary)",
-      "description": "Primary accent color. All shades auto-generated via color-mix."
-    },
-    {
-      "token": "--ui-button-height",
-      "default": "var(--ui-row-2)",
-      "description": "Overall height"
-    },
-    {
-      "token": "--ui-button-padding-x",
-      "default": "var(--ui-space-2)",
-      "description": "Horizontal padding"
-    },
-    {
-      "token": "--ui-button-font-size",
-      "default": "var(--ui-font-size-sm)",
-      "description": "Font size"
-    },
-    {
-      "token": "--ui-button-font-weight",
-      "default": "var(--ui-weight-medium)",
-      "description": "Font weight"
-    },
-    {
-      "token": "--ui-button-radius",
-      "default": "var(--ui-radius-md)",
-      "description": "Corner radius"
-    },
-    {
-      "token": "--ui-button-color",
-      "default": "var(--ui-color-text-inverse)",
-      "description": "Text color"
-    },
-    {
-      "token": "--ui-button-height-sm",
-      "default": "calc(var(--ui-row) * 1.5)",
-      "description": "Overall height at small size"
-    },
-    {
-      "token": "--ui-button-font-size-sm",
-      "default": "var(--ui-font-size-xs)",
-      "description": "Font size at small size"
-    },
-    {
-      "token": "--ui-button-height-lg",
-      "default": "calc(var(--ui-row) * 2.5)",
-      "description": "Overall height at large size"
-    },
-    {
-      "token": "--ui-button-padding-x-lg",
-      "default": "var(--ui-space-3)",
-      "description": "Horizontal padding at large size"
-    },
-    {
-      "token": "--ui-button-font-size-lg",
-      "default": "var(--ui-font-size-md)",
-      "description": "Font size at large size"
-    }
-  ]
-}