@teseor/css 1.4.0 → 1.6.0

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

@@ -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/image/image.api.json

@@ -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)"
+    }
+  ]
+}

package/src/04-components/data-display/image/image.docs.json

@@ -0,0 +1,337 @@
+{
+  "id": "image",
+  "type": "component",
+  "title": "Image",
+  "description": "Responsive image with fallback placeholder, optional caption, and shape modifiers.",
+  "api": "./image.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "figure",
+              "class": "ui-image",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='160'%3E%3Crect fill='%23b0bec5' width='192' height='160'/%3E%3C/svg%3E",
+                    "alt": "Placeholder"
+                  }
+                }
+              ]
+            }
+          ],
+          "code": "<figure class=\"ui-image\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Description\">\n</figure>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--sm",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Crect fill='%2390a4ae' width='96' height='96'/%3E%3C/svg%3E",
+                    "alt": "Small"
+                  }
+                }
+              ]
+            },
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--md",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Crect fill='%2378909c' width='192' height='192'/%3E%3C/svg%3E",
+                    "alt": "Medium"
+                  }
+                }
+              ]
+            },
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--lg",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Crect fill='%23607d8b' width='320' height='320'/%3E%3C/svg%3E",
+                    "alt": "Large"
+                  }
+                }
+              ]
+            }
+          ],
+          "code": "<figure class=\"ui-image ui-image--sm\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Small\">\n</figure>\n<figure class=\"ui-image ui-image--md\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Medium\">\n</figure>\n<figure class=\"ui-image ui-image--lg\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Large\">\n</figure>"
+        }
+      ]
+    },
+    {
+      "title": "Rounded",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--md ui-image--rounded",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='140'%3E%3Crect fill='%234db6ac' width='192' height='140'/%3E%3C/svg%3E",
+                    "alt": "Rounded"
+                  }
+                }
+              ]
+            }
+          ],
+          "code": "<figure class=\"ui-image ui-image--rounded\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Rounded\">\n</figure>"
+        }
+      ]
+    },
+    {
+      "title": "Circle",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--sm ui-image--circle",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Crect fill='%23ce93d8' width='96' height='96'/%3E%3C/svg%3E",
+                    "alt": "Circle small"
+                  }
+                }
+              ]
+            },
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--md ui-image--circle",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Crect fill='%23ba68c8' width='192' height='192'/%3E%3C/svg%3E",
+                    "alt": "Circle medium"
+                  }
+                }
+              ]
+            }
+          ],
+          "code": "<figure class=\"ui-image ui-image--circle\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Circle\">\n</figure>"
+        }
+      ]
+    },
+    {
+      "title": "Object Fit",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--md ui-image--cover",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect fill='%2364b5f6' width='300' height='150'/%3E%3Ctext x='150' y='80' text-anchor='middle' fill='%23fff' font-size='16'%3Ecover%3C/text%3E%3C/svg%3E",
+                    "alt": "Cover fit"
+                  }
+                }
+              ]
+            },
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--md ui-image--contain",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect fill='%2381c784' width='300' height='150'/%3E%3Ctext x='150' y='80' text-anchor='middle' fill='%23fff' font-size='16'%3Econtain%3C/text%3E%3C/svg%3E",
+                    "alt": "Contain fit"
+                  }
+                }
+              ]
+            }
+          ],
+          "code": "<figure class=\"ui-image ui-image--cover\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Cover\">\n</figure>\n<figure class=\"ui-image ui-image--contain\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Contain\">\n</figure>"
+        }
+      ]
+    },
+    {
+      "title": "Caption",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--md ui-image--rounded",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='140'%3E%3Crect fill='%23ffb74d' width='192' height='140'/%3E%3C/svg%3E",
+                    "alt": "With caption"
+                  }
+                },
+                {
+                  "tag": "figcaption",
+                  "class": "ui-image__caption",
+                  "text": "An optional image caption"
+                }
+              ]
+            }
+          ],
+          "code": "<figure class=\"ui-image\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Description\">\n  <figcaption class=\"ui-image__caption\">Caption text</figcaption>\n</figure>"
+        }
+      ]
+    },
+    {
+      "title": "Fallback",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--sm",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "",
+                    "alt": "Broken image"
+                  }
+                }
+              ]
+            },
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--sm ui-image--rounded",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "",
+                    "alt": "Broken rounded"
+                  }
+                }
+              ]
+            },
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--sm ui-image--circle",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "",
+                    "alt": "Broken circle"
+                  }
+                }
+              ]
+            }
+          ],
+          "code": "<figure class=\"ui-image\">\n  <img class=\"ui-image__img\" src=\"\" alt=\"Fallback shown\">\n</figure>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-image-size",
+      "default": "auto",
+      "description": "Default image dimensions"
+    },
+    {
+      "token": "--ui-image-size-sm",
+      "default": "calc(var(--unit) * 12)",
+      "description": "Small size"
+    },
+    {
+      "token": "--ui-image-size-md",
+      "default": "calc(var(--unit) * 24)",
+      "description": "Medium size"
+    },
+    {
+      "token": "--ui-image-size-lg",
+      "default": "calc(var(--unit) * 40)",
+      "description": "Large size"
+    },
+    {
+      "token": "--ui-image-size-xl",
+      "default": "calc(var(--unit) * 60)",
+      "description": "Extra large size"
+    },
+    {
+      "token": "--ui-image-bg",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Fallback background"
+    },
+    {
+      "token": "--ui-image-radius",
+      "default": "0",
+      "description": "Border radius"
+    },
+    {
+      "token": "--ui-image-radius-rounded",
+      "default": "var(--ui-radius-lg)",
+      "description": "Rounded variant radius"
+    },
+    {
+      "token": "--ui-image-radius-circle",
+      "default": "50%",
+      "description": "Circle variant radius"
+    },
+    {
+      "token": "--ui-image-object-fit",
+      "default": "cover",
+      "description": "Object-fit strategy"
+    },
+    {
+      "token": "--ui-image-caption-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Caption text color"
+    },
+    {
+      "token": "--ui-image-caption-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Caption font size"
+    },
+    {
+      "token": "--ui-image-caption-spacing",
+      "default": "var(--ui-space-1)",
+      "description": "Space between image and caption"
+    }
+  ]
+}

package/src/04-components/data-display/image/image.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, 'image.docs.json');
+
+test.describe('image visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'image');
+    await saveForLostPixel(page, 'image');
+    await expect(page.locator('body')).toHaveScreenshot('image.visual.png');
+  });
+});

package/src/04-components/data-display/image/index.scss

@@ -0,0 +1,103 @@
+@use '../../../00-config/tokens/variables' as t;
+
+// @component image
+// @element figure
+
+@layer components.tokens {
+  .image {
+    --_size: var(--ui-image-size, auto);
+    --_radius: var(--ui-image-radius, 0);
+    --_object-fit: var(--ui-image-object-fit, cover);
+    --_bg: var(--ui-image-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    --_caption-color: var(--ui-image-caption-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_caption-font-size: var(--ui-image-caption-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_caption-spacing: var(--ui-image-caption-spacing, var(--ui-space-1));
+  }
+
+  // @modifier size
+  .image--sm {
+    --_size: var(--ui-image-size-sm, calc(#{t.$unit} * 12));
+  }
+
+  .image--md {
+    --_size: var(--ui-image-size-md, calc(#{t.$unit} * 24));
+  }
+
+  .image--lg {
+    --_size: var(--ui-image-size-lg, calc(#{t.$unit} * 40));
+  }
+
+  .image--xl {
+    --_size: var(--ui-image-size-xl, calc(#{t.$unit} * 60));
+  }
+
+  .image--full {
+    --_size: 100%;
+  }
+
+  // @modifier boolean rounded
+  .image--rounded {
+    --_radius: var(--ui-image-radius-rounded, var(--ui-radius-lg, #{t.$radius-lg}));
+  }
+
+  // @modifier boolean circle
+  .image--circle {
+    --_radius: var(--ui-image-radius-circle, 50%);
+  }
+
+  // @modifier object-fit
+  .image--cover {
+    --_object-fit: cover;
+  }
+
+  .image--contain {
+    --_object-fit: contain;
+  }
+}
+
+@layer components.styles {
+  .image {
+    display: inline-block;
+
+    max-inline-size: 100%;
+    padding: 0;
+    margin: 0;
+  }
+
+  .image__img {
+    display: block;
+
+    block-size: var(--_size);
+    inline-size: var(--_size);
+    max-inline-size: 100%;
+
+    object-fit: var(--_object-fit);
+
+    background: var(--_bg);
+    border-radius: var(--_radius);
+  }
+
+  // Fallback when image fails to load — :not([src]) or broken src
+  // The background from --_bg shows through as placeholder
+  .image__img:not([src]),
+  .image__img[src=''] {
+    aspect-ratio: 1 / 1;
+
+    // Ensure minimum dimensions for empty state
+    min-block-size: calc(#{t.$unit} * 8);
+    min-inline-size: calc(#{t.$unit} * 8);
+  }
+
+  .image__caption {
+    margin-block-start: var(--_caption-spacing);
+
+    font-size: var(--_caption-font-size);
+    line-height: var(--ui-row-1, #{t.$row-1});
+    color: var(--_caption-color);
+  }
+
+  // Circle needs equal aspect ratio to stay round
+  .image--circle .image__img {
+    aspect-ratio: 1 / 1;
+  }
+}