npm - @teseor/css - Versions diffs - 1.3.0 → 1.5.0 - Mend

@teseor/css 1.3.0 → 1.5.0

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 (74) hide show

package/src/03-layout/topbar/topbar.docs.json ADDED Viewed

@@ -0,0 +1,110 @@
+{
+  "id": "topbar",
+  "type": "primitive",
+  "title": "Topbar",
+  "description": "Fixed or sticky header bar for app layouts with start, center, and end sections.",
+  "api": "./topbar.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "description": "Basic topbar with three sections: start (brand), center (search/nav), and end (actions).",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "header",
+              "class": "ui-topbar ui-topbar--bordered",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-topbar__start",
+                  "children": [{ "tag": "strong", "text": "Brand" }]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-topbar__center",
+                  "children": [{ "tag": "span", "text": "Center content" }]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-topbar__end",
+                  "children": [{ "tag": "span", "text": "Actions" }]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Sticky",
+      "description": "Stays at the top of the viewport on scroll.",
+      "examples": [
+        {
+          "code": "<header class=\"ui-topbar ui-topbar--sticky ui-topbar--bordered\">\n  <div class=\"ui-topbar__start\"><strong>Brand</strong></div>\n  <div class=\"ui-topbar__center\">Nav</div>\n  <div class=\"ui-topbar__end\">Actions</div>\n</header>"
+        }
+      ]
+    },
+    {
+      "title": "Bordered",
+      "description": "Bottom border via inset box-shadow to preserve grid rhythm.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "header",
+              "class": "ui-topbar ui-topbar--bordered",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-topbar__start",
+                  "children": [{ "tag": "strong", "text": "Bordered" }]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-topbar__end",
+                  "children": [{ "tag": "span", "text": "Actions" }]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Raised",
+      "description": "Subtle drop shadow below the topbar.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "header",
+              "class": "ui-topbar ui-topbar--raised",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-topbar__start",
+                  "children": [{ "tag": "strong", "text": "Raised" }]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-topbar__end",
+                  "children": [{ "tag": "span", "text": "Actions" }]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Integration with Sidebar",
+      "description": "Set --topbar-height on .app-shell so sidebar and main offset correctly. The topbar itself uses --fixed, and sidebar/main read --topbar-height.",
+      "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>"
+        }
+      ]
+    }
+  ]
+}

package/src/03-layout/topbar/topbar.visual.spec.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+const DOCS_PATH = resolve(__dirname, 'topbar.docs.json');
+test.describe('topbar visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'topbar');
+    await saveForLostPixel(page, 'topbar');
+    await expect(page.locator('body')).toHaveScreenshot('topbar.visual.png');
+  });
+});

package/src/04-components/actions/close-button/close-button-visual.png ADDED Viewed

Binary file

package/src/04-components/actions/close-button/close-button.api.json ADDED Viewed

@@ -0,0 +1,71 @@
+{
+  "name": "close-button",
+  "element": "button",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "subtle": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "icon": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-close-button-size",
+      "description": "Overall button size (width and height)",
+      "default": "var(--ui-row-2)"
+    },
+    {
+      "name": "--ui-close-button-icon-size",
+      "description": "Size of the X icon",
+      "default": "var(--ui-size-md)"
+    },
+    {
+      "name": "--ui-close-button-color",
+      "description": "Icon color",
+      "default": "var(--ui-color-text-muted)"
+    },
+    {
+      "name": "--ui-close-button-bg",
+      "description": "Background color",
+      "default": "transparent"
+    },
+    {
+      "name": "--ui-close-button-hover-bg",
+      "description": "Background color on hover",
+      "default": "var(--ui-color-bg-muted)"
+    },
+    {
+      "name": "--ui-close-button-radius",
+      "description": "Border radius",
+      "default": "var(--ui-radius-md)"
+    },
+    {
+      "name": "--ui-close-button-size-sm",
+      "default": "calc(var(--ui-unit) * 3)"
+    },
+    {
+      "name": "--ui-close-button-icon-size-sm",
+      "default": "var(--ui-size-sm)"
+    },
+    {
+      "name": "--ui-close-button-size-lg",
+      "default": "var(--ui-row-3)"
+    },
+    {
+      "name": "--ui-close-button-icon-size-lg",
+      "default": "var(--ui-size-lg)"
+    },
+    {
+      "name": "--ui-close-button-subtle-color",
+      "default": "var(--ui-color-border-strong)"
+    },
+    {
+      "name": "--ui-close-button-subtle-hover-bg",
+      "default": "var(--ui-color-bg-subtle)"
+    }
+  ]
+}

package/src/04-components/actions/close-button/close-button.docs.json ADDED Viewed

@@ -0,0 +1,264 @@
+{
+  "id": "close-button",
+  "type": "component",
+  "title": "Close Button",
+  "description": "Dismiss button for closing modals, alerts, drawers, and other dismissible elements.",
+  "api": "./close-button.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "button",
+              "class": "ui-close-button",
+              "attrs": { "type": "button", "aria-label": "Close" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": {
+                    "viewBox": "0 0 24 24",
+                    "xmlns": "http://www.w3.org/2000/svg"
+                  },
+                  "children": [
+                    {
+                      "tag": "line",
+                      "attrs": {
+                        "x1": "18",
+                        "y1": "6",
+                        "x2": "6",
+                        "y2": "18"
+                      }
+                    },
+                    {
+                      "tag": "line",
+                      "attrs": {
+                        "x1": "6",
+                        "y1": "6",
+                        "x2": "18",
+                        "y2": "18"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<button class=\"ui-close-button\" type=\"button\" aria-label=\"Close\">\n  <svg class=\"ui-close-button__icon\" viewBox=\"0 0 24 24\">\n    <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n    <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n  </svg>\n</button>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "button",
+              "class": "ui-close-button ui-close-button--sm",
+              "attrs": { "type": "button", "aria-label": "Close" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" },
+                  "children": [
+                    { "tag": "line", "attrs": { "x1": "18", "y1": "6", "x2": "6", "y2": "18" } },
+                    { "tag": "line", "attrs": { "x1": "6", "y1": "6", "x2": "18", "y2": "18" } }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "button",
+              "class": "ui-close-button",
+              "attrs": { "type": "button", "aria-label": "Close" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" },
+                  "children": [
+                    { "tag": "line", "attrs": { "x1": "18", "y1": "6", "x2": "6", "y2": "18" } },
+                    { "tag": "line", "attrs": { "x1": "6", "y1": "6", "x2": "18", "y2": "18" } }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "button",
+              "class": "ui-close-button ui-close-button--lg",
+              "attrs": { "type": "button", "aria-label": "Close" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" },
+                  "children": [
+                    { "tag": "line", "attrs": { "x1": "18", "y1": "6", "x2": "6", "y2": "18" } },
+                    { "tag": "line", "attrs": { "x1": "6", "y1": "6", "x2": "18", "y2": "18" } }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<button class=\"ui-close-button ui-close-button--sm\" aria-label=\"Close\">...</button>\n<button class=\"ui-close-button\" aria-label=\"Close\">...</button>\n<button class=\"ui-close-button ui-close-button--lg\" aria-label=\"Close\">...</button>"
+        }
+      ]
+    },
+    {
+      "title": "Subtle",
+      "description": "Lower visual prominence for secondary dismiss actions.",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "button",
+              "class": "ui-close-button ui-close-button--subtle",
+              "attrs": { "type": "button", "aria-label": "Close" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" },
+                  "children": [
+                    { "tag": "line", "attrs": { "x1": "18", "y1": "6", "x2": "6", "y2": "18" } },
+                    { "tag": "line", "attrs": { "x1": "6", "y1": "6", "x2": "18", "y2": "18" } }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "button",
+              "class": "ui-close-button ui-close-button--subtle ui-close-button--sm",
+              "attrs": { "type": "button", "aria-label": "Close" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" },
+                  "children": [
+                    { "tag": "line", "attrs": { "x1": "18", "y1": "6", "x2": "6", "y2": "18" } },
+                    { "tag": "line", "attrs": { "x1": "6", "y1": "6", "x2": "18", "y2": "18" } }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<button class=\"ui-close-button ui-close-button--subtle\" aria-label=\"Close\">...</button>"
+        }
+      ]
+    },
+    {
+      "title": "States",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "button",
+              "class": "ui-close-button",
+              "attrs": { "type": "button", "aria-label": "Close" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" },
+                  "children": [
+                    { "tag": "line", "attrs": { "x1": "18", "y1": "6", "x2": "6", "y2": "18" } },
+                    { "tag": "line", "attrs": { "x1": "6", "y1": "6", "x2": "18", "y2": "18" } }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "button",
+              "class": "ui-close-button ui-close-button--hover",
+              "attrs": { "type": "button", "aria-label": "Close" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" },
+                  "children": [
+                    { "tag": "line", "attrs": { "x1": "18", "y1": "6", "x2": "6", "y2": "18" } },
+                    { "tag": "line", "attrs": { "x1": "6", "y1": "6", "x2": "18", "y2": "18" } }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "button",
+              "class": "ui-close-button ui-close-button--focus",
+              "attrs": { "type": "button", "aria-label": "Close" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" },
+                  "children": [
+                    { "tag": "line", "attrs": { "x1": "18", "y1": "6", "x2": "6", "y2": "18" } },
+                    { "tag": "line", "attrs": { "x1": "6", "y1": "6", "x2": "18", "y2": "18" } }
+                  ]
+                }
+              ]
+            },
+            {
+              "tag": "button",
+              "class": "ui-close-button",
+              "attrs": { "type": "button", "aria-label": "Close", "disabled": "" },
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-close-button__icon",
+                  "attrs": { "viewBox": "0 0 24 24", "xmlns": "http://www.w3.org/2000/svg" },
+                  "children": [
+                    { "tag": "line", "attrs": { "x1": "18", "y1": "6", "x2": "6", "y2": "18" } },
+                    { "tag": "line", "attrs": { "x1": "6", "y1": "6", "x2": "18", "y2": "18" } }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<button class=\"ui-close-button\" aria-label=\"Close\">...</button>\n<button class=\"ui-close-button ui-close-button--hover\">...</button>\n<button class=\"ui-close-button ui-close-button--focus\">...</button>\n<button class=\"ui-close-button\" disabled>...</button>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-close-button-size",
+      "default": "var(--ui-row-2)",
+      "description": "Overall button dimensions"
+    },
+    {
+      "token": "--ui-close-button-icon-size",
+      "default": "var(--ui-size-md)",
+      "description": "X icon dimensions"
+    },
+    {
+      "token": "--ui-close-button-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Icon color"
+    },
+    {
+      "token": "--ui-close-button-bg",
+      "default": "transparent",
+      "description": "Background color"
+    },
+    {
+      "token": "--ui-close-button-hover-bg",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Hover background"
+    },
+    {
+      "token": "--ui-close-button-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius"
+    }
+  ]
+}

package/src/04-components/actions/close-button/close-button.visual.spec.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
+const DOCS_PATH = resolve(__dirname, 'close-button.docs.json');
+test.describe('close-button visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'close-button');
+    await saveForLostPixel(page, 'close-button');
+    await expect(page.locator('body')).toHaveScreenshot('close-button.visual.png');
+  });
+});

package/src/04-components/actions/close-button/index.scss ADDED Viewed

@@ -0,0 +1,101 @@
+@use '../../../00-config/tokens/variables' as t;
+// @component close-button
+// @element button
+@layer components.tokens {
+  .close-button {
+    --_size: var(--ui-close-button-size, var(--ui-row-2, #{t.$row-2}));
+    --_icon-size: var(--ui-close-button-icon-size, var(--ui-size-md, #{t.size(md)}));
+    --_color: var(--ui-close-button-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_bg: var(--ui-close-button-bg, transparent);
+    --_hover-bg: var(--ui-close-button-hover-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    --_radius: var(--ui-close-button-radius, var(--ui-radius-md, #{t.$radius-md}));
+  }
+  // @modifier size
+  .close-button--sm {
+    --_size: var(--ui-close-button-size-sm, calc(#{t.$unit} * 3));
+    --_icon-size: var(--ui-close-button-icon-size-sm, var(--ui-size-sm, #{t.size(sm)}));
+  }
+  .close-button--lg {
+    --_size: var(--ui-close-button-size-lg, var(--ui-row-3, #{t.$row-3}));
+    --_icon-size: var(--ui-close-button-icon-size-lg, var(--ui-size-lg, #{t.size(lg)}));
+  }
+  // @modifier boolean subtle
+  .close-button--subtle {
+    --_color: var(--ui-close-button-subtle-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    --_hover-bg: var(--ui-close-button-subtle-hover-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+  }
+}
+@layer components.styles {
+  .close-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--_size);
+    inline-size: var(--_size);
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    color: var(--_color);
+    background: var(--_bg);
+    border: none;
+    border-radius: var(--_radius);
+    cursor: pointer;
+    appearance: none;
+    transition:
+      background-color var(--ui-duration-base, 150ms) var(--ui-ease-default, ease),
+      color var(--ui-duration-base, 150ms) var(--ui-ease-default, ease);
+    &:hover,
+    &--hover {
+      color: var(--ui-color-text, #{t.$color-text});
+      background: var(--_hover-bg);
+    }
+    &:focus-visible,
+    &--focus {
+      outline: var(--ui-border-width-md, #{t.$border-width-md}) solid var(--ui-color-focus, #{t.$color-focus});
+      outline-offset: var(--ui-border-width-md, #{t.$border-width-md});
+    }
+    &:active,
+    &--active {
+      transform: scale(0.92);
+    }
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      &:hover {
+        color: var(--_color);
+        background: var(--_bg);
+        transform: none;
+      }
+    }
+  }
+  .close-button__icon {
+    flex-shrink: 0;
+    block-size: var(--_icon-size);
+    inline-size: var(--_icon-size);
+    fill: none;
+    stroke: currentcolor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+}

package/src/04-components/data-display/avatar/avatar-visual.png CHANGED Viewed

Binary file

package/src/04-components/data-display/image/image-visual.png ADDED Viewed

Binary file

package/src/04-components/data-display/image/image.api.json ADDED Viewed

@@ -0,0 +1,76 @@
+{
+  "name": "image",
+  "element": "figure",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "md", "lg", "xl", "full"]
+    },
+    "rounded": {
+      "type": "boolean"
+    },
+    "circle": {
+      "type": "boolean"
+    },
+    "object-fit": {
+      "values": ["cover", "contain"]
+    }
+  },
+  "elements": {
+    "img": {},
+    "caption": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-image-size",
+      "default": "auto"
+    },
+    {
+      "name": "--ui-image-size-sm",
+      "default": "calc(var(--unit) * 12)"
+    },
+    {
+      "name": "--ui-image-size-md",
+      "default": "calc(var(--unit) * 24)"
+    },
+    {
+      "name": "--ui-image-size-lg",
+      "default": "calc(var(--unit) * 40)"
+    },
+    {
+      "name": "--ui-image-size-xl",
+      "default": "calc(var(--unit) * 60)"
+    },
+    {
+      "name": "--ui-image-bg",
+      "default": "var(--ui-color-bg-muted)"
+    },
+    {
+      "name": "--ui-image-radius",
+      "default": "0"
+    },
+    {
+      "name": "--ui-image-radius-rounded",
+      "default": "var(--ui-radius-lg)"
+    },
+    {
+      "name": "--ui-image-radius-circle",
+      "default": "50%"
+    },
+    {
+      "name": "--ui-image-object-fit",
+      "default": "cover"
+    },
+    {
+      "name": "--ui-image-caption-color",
+      "default": "var(--ui-color-text-muted)"
+    },
+    {
+      "name": "--ui-image-caption-font-size",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-image-caption-spacing",
+      "default": "var(--ui-space-1)"
+    }
+  ]
+}