@teseor/css 1.0.0

package/src/04-components/avatar/avatar.api.json

@@ -0,0 +1,70 @@
+{
+  "name": "avatar",
+  "element": "div",
+  "modifiers": {
+    "size": {
+      "values": ["xs", "sm", "lg", "xl"]
+    },
+    "square": {
+      "type": "boolean"
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-avatar-size",
+      "default": "calc(#{t.$unit} * 5"
+    },
+    {
+      "name": "--ui-avatar-bg",
+      "default": "var(--ui-color-bg-subtle)"
+    },
+    {
+      "name": "--ui-avatar-color",
+      "default": "var(--ui-color-text-muted)"
+    },
+    {
+      "name": "--ui-avatar-font-size",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-avatar-radius",
+      "default": "50%"
+    },
+    {
+      "name": "--ui-avatar-size-xs",
+      "default": "calc(#{t.$unit} * 3"
+    },
+    {
+      "name": "--ui-avatar-font-size-xs",
+      "default": "var(--ui-font-size-xs)"
+    },
+    {
+      "name": "--ui-avatar-size-sm",
+      "default": "calc(#{t.$unit} * 4"
+    },
+    {
+      "name": "--ui-avatar-font-size-sm",
+      "default": "var(--ui-font-size-xs)"
+    },
+    {
+      "name": "--ui-avatar-size-lg",
+      "default": "calc(#{t.$unit} * 6"
+    },
+    {
+      "name": "--ui-avatar-font-size-lg",
+      "default": "var(--ui-font-size-md)"
+    },
+    {
+      "name": "--ui-avatar-size-xl",
+      "default": "calc(#{t.$unit} * 8"
+    },
+    {
+      "name": "--ui-avatar-font-size-xl",
+      "default": "var(--ui-font-size-lg)"
+    },
+    {
+      "name": "--ui-avatar-radius-square",
+      "default": "var(--ui-radius-md)"
+    }
+  ]
+}

package/src/04-components/avatar/avatar.docs.json

@@ -0,0 +1,200 @@
+{
+  "id": "avatar",
+  "type": "component",
+  "title": "Avatar",
+  "description": "User or entity thumbnail representation. Supports image with fallback to initials.",
+  "api": "./avatar.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-avatar",
+              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "JD" }]
+            },
+            {
+              "tag": "div",
+              "class": "ui-avatar",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-avatar__image",
+                  "attrs": { "src": "https://i.pravatar.cc/80?u=1", "alt": "User" }
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-avatar\">\n  <span class=\"ui-avatar__fallback\">JD</span>\n</div>\n\n<div class=\"ui-avatar\">\n  <img class=\"ui-avatar__image\" src=\"...\" alt=\"User\">\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-avatar ui-avatar--xs",
+              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "XS" }]
+            },
+            {
+              "tag": "div",
+              "class": "ui-avatar ui-avatar--sm",
+              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "SM" }]
+            },
+            {
+              "tag": "div",
+              "class": "ui-avatar",
+              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "MD" }]
+            },
+            {
+              "tag": "div",
+              "class": "ui-avatar ui-avatar--lg",
+              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "LG" }]
+            },
+            {
+              "tag": "div",
+              "class": "ui-avatar ui-avatar--xl",
+              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "XL" }]
+            }
+          ],
+          "code": "<div class=\"ui-avatar ui-avatar--xs\"><span class=\"ui-avatar__fallback\">XS</span></div>\n<div class=\"ui-avatar ui-avatar--sm\"><span class=\"ui-avatar__fallback\">SM</span></div>\n<div class=\"ui-avatar\"><span class=\"ui-avatar__fallback\">MD</span></div>\n<div class=\"ui-avatar ui-avatar--lg\"><span class=\"ui-avatar__fallback\">LG</span></div>\n<div class=\"ui-avatar ui-avatar--xl\"><span class=\"ui-avatar__fallback\">XL</span></div>"
+        }
+      ]
+    },
+    {
+      "title": "Square Shape",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-avatar ui-avatar--square",
+              "children": [{ "tag": "span", "class": "ui-avatar__fallback", "text": "ORG" }]
+            },
+            {
+              "tag": "div",
+              "class": "ui-avatar ui-avatar--square",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-avatar__image",
+                  "attrs": { "src": "https://i.pravatar.cc/80?u=org", "alt": "Org" }
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-avatar ui-avatar--square\">\n  <span class=\"ui-avatar__fallback\">ORG</span>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "With Images",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-avatar ui-avatar--sm",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-avatar__image",
+                  "attrs": { "src": "https://i.pravatar.cc/64?u=a", "alt": "User A" }
+                }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-avatar",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-avatar__image",
+                  "attrs": { "src": "https://i.pravatar.cc/80?u=b", "alt": "User B" }
+                }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-avatar ui-avatar--lg",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-avatar__image",
+                  "attrs": { "src": "https://i.pravatar.cc/96?u=c", "alt": "User C" }
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-avatar\">\n  <img class=\"ui-avatar__image\" src=\"...\" alt=\"User\">\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Avatar Group",
+      "examples": [
+        {
+          "html": "<div class=\"ui-avatar-group\"><div class=\"ui-avatar\"><img class=\"ui-avatar__image\" src=\"https://i.pravatar.cc/80?u=g1\" alt=\"\"></div><div class=\"ui-avatar\"><img class=\"ui-avatar__image\" src=\"https://i.pravatar.cc/80?u=g2\" alt=\"\"></div><div class=\"ui-avatar\"><img class=\"ui-avatar__image\" src=\"https://i.pravatar.cc/80?u=g3\" alt=\"\"></div><div class=\"ui-avatar\"><span class=\"ui-avatar__fallback\">+5</span></div></div>",
+          "code": "<div class=\"ui-avatar-group\">\n  <div class=\"ui-avatar\">\n    <img class=\"ui-avatar__image\" src=\"...\" alt=\"\">\n  </div>\n  <div class=\"ui-avatar\">\n    <img class=\"ui-avatar__image\" src=\"...\" alt=\"\">\n  </div>\n  <div class=\"ui-avatar\">\n    <span class=\"ui-avatar__fallback\">+5</span>\n  </div>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-avatar-size",
+      "default": "calc(var(--unit) * 5)",
+      "description": "Default size"
+    },
+    {
+      "token": "--ui-avatar-size-xs",
+      "default": "calc(var(--unit) * 3)",
+      "description": "Extra small size"
+    },
+    {
+      "token": "--ui-avatar-size-sm",
+      "default": "calc(var(--unit) * 4)",
+      "description": "Small size"
+    },
+    {
+      "token": "--ui-avatar-size-lg",
+      "default": "calc(var(--unit) * 6)",
+      "description": "Large size"
+    },
+    {
+      "token": "--ui-avatar-size-xl",
+      "default": "calc(var(--unit) * 8)",
+      "description": "Extra large size"
+    },
+    {
+      "token": "--ui-avatar-bg",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Background color"
+    },
+    {
+      "token": "--ui-avatar-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Text color"
+    },
+    {
+      "token": "--ui-avatar-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
+    },
+    { "token": "--ui-avatar-radius", "default": "50%", "description": "Border radius" },
+    {
+      "token": "--ui-avatar-radius-square",
+      "default": "var(--ui-radius-md)",
+      "description": "Square variant radius"
+    }
+  ]
+}

package/src/04-components/avatar/avatar.visual.spec.ts

@@ -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, 'avatar.docs.json');
+
+test.describe('avatar visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'avatar');
+    await saveForLostPixel(page, 'avatar');
+    await expect(page.locator('body')).toHaveScreenshot('avatar.visual.png');
+  });
+});

package/src/04-components/avatar/index.scss

@@ -0,0 +1,104 @@
+@use '../../00-config/tokens/variables' as t;
+
+// @component avatar
+// @element div
+
+@layer components.tokens {
+  .avatar {
+    --_size: var(--ui-avatar-size, calc(#{t.$unit} * 5));
+    --_bg: var(--ui-avatar-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    --_color: var(--ui-avatar-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_font-size: var(--ui-avatar-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_radius: var(--ui-avatar-radius, 50%);
+  }
+
+  // @modifier size
+  .avatar--xs {
+    --_size: var(--ui-avatar-size-xs, calc(#{t.$unit} * 3));
+    --_font-size: var(--ui-avatar-font-size-xs, var(--ui-font-size-xs, #{t.$font-size-xs}));
+  }
+
+  .avatar--sm {
+    --_size: var(--ui-avatar-size-sm, calc(#{t.$unit} * 4));
+    --_font-size: var(--ui-avatar-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
+  }
+
+  .avatar--lg {
+    --_size: var(--ui-avatar-size-lg, calc(#{t.$unit} * 6));
+    --_font-size: var(--ui-avatar-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
+  }
+
+  .avatar--xl {
+    --_size: var(--ui-avatar-size-xl, calc(#{t.$unit} * 8));
+    --_font-size: var(--ui-avatar-font-size-xl, var(--ui-font-size-lg, #{t.$font-size-lg}));
+  }
+
+  // @modifier boolean square
+  .avatar--square {
+    --_radius: var(--ui-avatar-radius-square, var(--ui-radius-md, #{t.$radius-md}));
+  }
+}
+
+@layer components.styles {
+  .avatar {
+
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    block-size: var(--_size);
+    inline-size: var(--_size);
+    overflow: hidden;
+
+    font-size: var(--_font-size);
+    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
+    line-height: 1;
+    text-transform: uppercase;
+    color: var(--_color);
+
+    background: var(--_bg);
+    border-radius: var(--_radius);
+  }
+
+  .avatar__image {
+    position: absolute;
+    inset: 0;
+
+    block-size: 100%;
+    inline-size: 100%;
+
+    object-fit: cover;
+
+    border-radius: inherit;
+  }
+
+  .avatar__fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    block-size: 100%;
+    inline-size: 100%;
+
+    user-select: none;
+  }
+
+  // Group avatars with overlap
+  .avatar-group {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+
+    > .avatar {
+      margin-inline-start: calc(var(--_size) * -0.25);
+
+      border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--ui-color-bg, #{t.$color-bg});
+
+      &:last-child {
+        margin-inline-start: 0;
+      }
+    }
+  }
+}

package/src/04-components/badge/badge.api.json

@@ -0,0 +1,86 @@
+{
+  "name": "badge",
+  "element": "span",
+  "modifiers": {
+    "size": {
+      "values": ["sm"]
+    },
+    "variant": {
+      "values": ["primary", "success", "warning", "danger"]
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-badge-height",
+      "default": "var(--ui-row)"
+    },
+    {
+      "name": "--ui-badge-padding-x",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-badge-font-size",
+      "default": "var(--ui-font-size-xs)"
+    },
+    {
+      "name": "--ui-badge-font-weight",
+      "default": "var(--ui-weight-medium)"
+    },
+    {
+      "name": "--ui-badge-radius",
+      "default": "var(--ui-radius-full)"
+    },
+    {
+      "name": "--ui-badge-bg",
+      "default": "var(--ui-color-bg-muted)"
+    },
+    {
+      "name": "--ui-badge-text",
+      "default": "var(--ui-color-text)"
+    },
+    {
+      "name": "--ui-badge-height-sm",
+      "default": "var(--ui-row)"
+    },
+    {
+      "name": "--ui-badge-padding-x-sm",
+      "default": "var(--ui-space-0)"
+    },
+    {
+      "name": "--ui-badge-font-size-sm",
+      "default": "var(--ui-font-size-xs)"
+    },
+    {
+      "name": "--ui-badge-primary-bg",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-badge-primary-text",
+      "default": "var(--ui-color-text-inverse)"
+    },
+    {
+      "name": "--ui-badge-success-bg",
+      "default": "var(--ui-color-success)"
+    },
+    {
+      "name": "--ui-badge-success-text",
+      "default": "var(--ui-color-text-inverse)"
+    },
+    {
+      "name": "--ui-badge-warning-bg",
+      "default": "var(--ui-color-warning)"
+    },
+    {
+      "name": "--ui-badge-warning-text",
+      "default": "var(--ui-color-text)"
+    },
+    {
+      "name": "--ui-badge-danger-bg",
+      "default": "var(--ui-color-danger)"
+    },
+    {
+      "name": "--ui-badge-danger-text",
+      "default": "var(--ui-color-text-inverse)"
+    }
+  ]
+}

package/src/04-components/badge/badge.docs.json

@@ -0,0 +1,89 @@
+{
+  "id": "badge",
+  "type": "component",
+  "title": "Badge",
+  "description": "Inline labels for status indicators, counts, and categories",
+  "api": "./badge.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<span class=\"ui-badge\">Default</span>"
+        }
+      ]
+    },
+    {
+      "title": "Variants",
+      "examples": [
+        {
+          "items": [
+            { "tag": "span", "class": "ui-badge", "text": "Default" },
+            { "tag": "span", "class": "ui-badge ui-badge--primary", "text": "Primary" },
+            { "tag": "span", "class": "ui-badge ui-badge--success", "text": "Success" },
+            { "tag": "span", "class": "ui-badge ui-badge--warning", "text": "Warning" },
+            { "tag": "span", "class": "ui-badge ui-badge--danger", "text": "Danger" }
+          ],
+          "layout": "cluster"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "items": [
+            { "tag": "span", "class": "ui-badge ui-badge--sm", "text": "Small" },
+            { "tag": "span", "class": "ui-badge", "text": "Default" }
+          ],
+          "layout": "cluster"
+        }
+      ]
+    },
+    {
+      "title": "Use Cases",
+      "examples": [
+        {
+          "html": "<div class=\"ui-cluster\"><span>Notifications</span><span class=\"ui-badge ui-badge--primary\">5</span></div>"
+        },
+        {
+          "html": "<div class=\"ui-cluster\"><span class=\"ui-badge ui-badge--success\">Published</span><span class=\"ui-badge ui-badge--warning\">Draft</span><span class=\"ui-badge ui-badge--danger\">Archived</span></div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-badge-height",
+      "default": "calc(var(--ui-row) * 1.25)",
+      "description": "Default height"
+    },
+    { "token": "--ui-badge-height-sm", "default": "var(--ui-row)", "description": "Small height" },
+    {
+      "token": "--ui-badge-padding-x",
+      "default": "var(--ui-space-1)",
+      "description": "Horizontal padding"
+    },
+    {
+      "token": "--ui-badge-font-size",
+      "default": "var(--ui-font-size-xs)",
+      "description": "Font size"
+    },
+    {
+      "token": "--ui-badge-font-weight",
+      "default": "var(--ui-weight-medium)",
+      "description": "Font weight"
+    },
+    {
+      "token": "--ui-badge-radius",
+      "default": "var(--ui-radius-full)",
+      "description": "Border radius"
+    },
+    {
+      "token": "--ui-badge-bg",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Background color"
+    },
+    { "token": "--ui-badge-text", "default": "var(--ui-color-text)", "description": "Text color" }
+  ]
+}

package/src/04-components/badge/badge.visual.spec.ts

@@ -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, 'badge.docs.json');
+
+test.describe('badge visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'badge');
+    await saveForLostPixel(page, 'badge');
+    await expect(page.locator('body')).toHaveScreenshot('badge.visual.png');
+  });
+});

package/src/04-components/badge/index.scss

@@ -0,0 +1,64 @@
+@use '../../00-config/tokens/variables' as t;
+
+// @component badge
+// @element span
+
+@layer components.tokens {
+  .badge {
+    --_height: var(--ui-badge-height, calc(var(--ui-row, #{t.$row}) * 1.25));
+    --_padding-x: var(--ui-badge-padding-x, var(--ui-space-1, #{t.$space-1}));
+    --_font-size: var(--ui-badge-font-size, var(--ui-font-size-xs, #{t.$font-size-xs}));
+    --_font-weight: var(--ui-badge-font-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    --_radius: var(--ui-badge-radius, var(--ui-radius-full, #{t.$radius-full}));
+    --_bg: var(--ui-badge-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    --_text: var(--ui-badge-text, var(--ui-color-text, #{t.$color-text}));
+  }
+
+  // @modifier size
+  .badge--sm {
+    --_height: var(--ui-badge-height-sm, var(--ui-row, #{t.$row}));
+    --_padding-x: var(--ui-badge-padding-x-sm, var(--ui-space-0, #{t.$space-0}));
+    --_font-size: var(--ui-badge-font-size-sm, calc(var(--ui-font-size-xs, #{t.$font-size-xs}) * 0.85));
+  }
+
+  // @modifier variant
+  .badge--primary {
+    --_bg: var(--ui-badge-primary-bg, var(--ui-color-primary, #{t.$color-primary}));
+    --_text: var(--ui-badge-primary-text, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
+  }
+
+  .badge--success {
+    --_bg: var(--ui-badge-success-bg, var(--ui-color-success, #{t.$color-success}));
+    --_text: var(--ui-badge-success-text, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
+  }
+
+  .badge--warning {
+    --_bg: var(--ui-badge-warning-bg, var(--ui-color-warning, #{t.$color-warning}));
+    --_text: var(--ui-badge-warning-text, var(--ui-color-text, #{t.$color-text}));
+  }
+
+  .badge--danger {
+    --_bg: var(--ui-badge-danger-bg, var(--ui-color-danger, #{t.$color-danger}));
+    --_text: var(--ui-badge-danger-text, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
+  }
+}
+
+@layer components.styles {
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    block-size: var(--_height);
+    padding-inline: var(--_padding-x);
+
+    font-size: var(--_font-size);
+    font-weight: var(--_font-weight);
+    line-height: 1;
+    white-space: nowrap;
+    color: var(--_text);
+
+    background: var(--_bg);
+    border-radius: var(--_radius);
+  }
+}

package/src/04-components/breadcrumb/breadcrumb.api.json

@@ -0,0 +1,31 @@
+{
+  "name": "breadcrumb",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-breadcrumb-height",
+      "default": "var(--ui-row-1)"
+    },
+    {
+      "name": "--ui-breadcrumb-gap",
+      "default": "calc(#{t.$unit} * 1"
+    },
+    {
+      "name": "--ui-breadcrumb-separator-color",
+      "default": "var(--ui-color-text-muted)"
+    },
+    {
+      "name": "--ui-breadcrumb-link-color",
+      "default": "var(--ui-color-text-muted)"
+    },
+    {
+      "name": "--ui-breadcrumb-current-color",
+      "default": "var(--ui-color-text)"
+    },
+    {
+      "name": "--ui-breadcrumb-separator",
+      "default": "\"/\""
+    }
+  ]
+}