@teseor/css 1.2.4 → 1.3.0

package/src/04-components/index.scss

@@ -7,6 +7,7 @@
 @forward './data-display/icon/index';
 @forward './data-display/status/index';
 @forward './data-display/table/index';
+@forward './data-display/stat/index';
 @forward './data-display/tag/index';
 @forward './disclosure/accordion/index';
 @forward './disclosure/disclosure/index';
@@ -26,6 +27,7 @@
 @forward './forms/textarea/index';
 @forward './forms/toggle/index';
 @forward './layout/divider/index';
+@forward './layout/spacer/index';
 @forward './navigation/breadcrumb/index';
 @forward './navigation/menu/index';
 @forward './navigation/nav/index';
@@ -37,6 +39,9 @@
 @forward './overlays/overlay/index';
 @forward './overlays/popover/index';
 @forward './overlays/tooltip/index';
+@forward './typography/blockquote/index';
 @forward './typography/code/index';
 @forward './typography/heading/index';
+@forward './typography/kbd/index';
 @forward './typography/link/index';
+@forward './typography/mark/index';

package/src/04-components/layout/spacer/index.scss

@@ -0,0 +1,11 @@
+@layer components.tokens {
+  .spacer {
+    --_size: var(--ui-spacer-size, 1);
+  }
+}
+
+@layer components.styles {
+  .spacer {
+    flex: var(--_size);
+  }
+}

package/src/04-components/layout/spacer/spacer.api.json

@@ -0,0 +1,6 @@
+{
+  "name": "spacer",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [{ "name": "--ui-spacer-size", "default": "1" }]
+}

package/src/04-components/layout/spacer/spacer.docs.json

@@ -0,0 +1,102 @@
+{
+  "id": "spacer",
+  "type": "component",
+  "title": "Spacer",
+  "description": "Flexible space filler that grows to fill available space in flex containers.",
+  "api": "./spacer.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-cluster",
+              "style": {
+                "inline-size": "100%",
+                "background": "var(--ui-color-bg-subtle)",
+                "padding": "var(--ui-space-2)"
+              },
+              "children": [
+                {
+                  "tag": "span",
+                  "text": "Start",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-1)"
+                  }
+                },
+                { "tag": "div", "class": "ui-spacer" },
+                {
+                  "tag": "span",
+                  "text": "End",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-1)"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Between items",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-cluster",
+              "style": {
+                "inline-size": "100%",
+                "background": "var(--ui-color-bg-subtle)",
+                "padding": "var(--ui-space-2)"
+              },
+              "children": [
+                {
+                  "tag": "span",
+                  "text": "Logo",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-1)"
+                  }
+                },
+                { "tag": "div", "class": "ui-spacer" },
+                {
+                  "tag": "span",
+                  "text": "Nav 1",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-1)"
+                  }
+                },
+                {
+                  "tag": "span",
+                  "text": "Nav 2",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-1)"
+                  }
+                },
+                {
+                  "tag": "span",
+                  "text": "Nav 3",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-1)"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "customization": [
+    { "token": "--ui-spacer-size", "default": "1", "description": "Flex grow factor" }
+  ]
+}

package/src/04-components/layout/spacer/spacer.visual.spec.ts

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

package/src/04-components/typography/blockquote/blockquote.api.json

@@ -0,0 +1,18 @@
+{
+  "name": "blockquote",
+  "element": "blockquote",
+  "modifiers": {
+    "variant": {
+      "values": ["accent"]
+    }
+  },
+  "subElements": ["cite"],
+  "cssVars": [
+    { "name": "--ui-blockquote-border-color", "default": "var(--ui-color-border-strong)" },
+    { "name": "--ui-blockquote-border-width", "default": "var(--ui-border-width-lg)" },
+    { "name": "--ui-blockquote-padding-inline", "default": "var(--ui-space-3)" },
+    { "name": "--ui-blockquote-color", "default": "var(--ui-color-text-muted)" },
+    { "name": "--ui-blockquote-font-size", "default": "var(--ui-font-size-lg)" },
+    { "name": "--ui-blockquote-line-height", "default": "var(--ui-leading-lg)" }
+  ]
+}

package/src/04-components/typography/blockquote/blockquote.docs.json

@@ -0,0 +1,89 @@
+{
+  "id": "blockquote",
+  "type": "component",
+  "title": "Blockquote",
+  "description": "Quote block with left border and optional citation.",
+  "api": "./blockquote.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "blockquote",
+              "class": "ui-blockquote",
+              "children": [
+                {
+                  "tag": "p",
+                  "text": "Design is not just what it looks like and feels like. Design is how it works."
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "With citation",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "blockquote",
+              "class": "ui-blockquote",
+              "children": [
+                { "tag": "p", "text": "The best way to predict the future is to invent it." },
+                { "tag": "cite", "class": "ui-blockquote__cite", "text": "Alan Kay" }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Accent variant",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "blockquote",
+              "class": "ui-blockquote ui-blockquote--accent",
+              "children": [
+                { "tag": "p", "text": "Simplicity is the ultimate sophistication." },
+                { "tag": "cite", "class": "ui-blockquote__cite", "text": "Leonardo da Vinci" }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-blockquote-border-color",
+      "default": "var(--ui-color-border-strong)",
+      "description": "Left border color"
+    },
+    {
+      "token": "--ui-blockquote-border-width",
+      "default": "var(--ui-border-width-lg)",
+      "description": "Left border width"
+    },
+    {
+      "token": "--ui-blockquote-padding-inline",
+      "default": "var(--ui-space-3)",
+      "description": "Inline padding"
+    },
+    {
+      "token": "--ui-blockquote-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Text color"
+    },
+    {
+      "token": "--ui-blockquote-font-size",
+      "default": "var(--ui-font-size-lg)",
+      "description": "Font size"
+    }
+  ]
+}

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

package/src/04-components/typography/blockquote/index.scss

@@ -0,0 +1,41 @@
+@use '../../../00-config/tokens/variables' as t;
+
+@layer components.tokens {
+  .blockquote {
+    --_border-color: var(--ui-blockquote-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    --_border-width: var(--ui-blockquote-border-width, var(--ui-border-width-lg, #{t.$border-width-lg}));
+    --_padding-inline: var(--ui-blockquote-padding-inline, var(--ui-space-3, #{t.$space-3}));
+    --_color: var(--ui-blockquote-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_font-size: var(--ui-blockquote-font-size, var(--ui-font-size-lg, #{t.$font-size-lg}));
+    --_line-height: var(--ui-blockquote-line-height, var(--ui-leading-lg, #{t.$leading-lg}));
+  }
+
+  .blockquote--accent {
+    --_border-color: var(--ui-color-primary, #{t.$color-primary});
+  }
+}
+
+@layer components.styles {
+  .blockquote {
+    padding-inline-start: var(--_padding-inline);
+    margin: 0;
+
+    font-size: var(--_font-size);
+    font-style: italic;
+    line-height: var(--_line-height);
+    color: var(--_color);
+
+    border-inline-start: var(--_border-width) solid var(--_border-color);
+  }
+
+  .blockquote__cite {
+    display: block;
+
+    margin-block-start: var(--ui-space-1, #{t.$space-1});
+
+    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    font-style: normal;
+    line-height: var(--ui-leading-sm, #{t.$leading-sm});
+    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+  }
+}

package/src/04-components/typography/kbd/index.scss

@@ -0,0 +1,33 @@
+@use '../../../00-config/tokens/variables' as t;
+
+@layer components.tokens {
+  .kbd {
+    --_font-size: var(--ui-kbd-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_font-family: var(--ui-kbd-font-family, var(--ui-font-mono, #{t.$font-mono}));
+    --_padding-x: var(--ui-kbd-padding-x, var(--ui-space-0, #{t.$space-0}));
+    --_padding-y: var(--ui-kbd-padding-y, var(--ui-space-0, #{t.$space-0}));
+    --_bg: var(--ui-kbd-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    --_border-color: var(--ui-kbd-border-color, var(--ui-color-border, #{t.$color-border}));
+    --_radius: var(--ui-kbd-radius, var(--ui-radius-sm, #{t.$radius-sm}));
+    --_color: var(--ui-kbd-color, var(--ui-color-text, #{t.$color-text}));
+  }
+}
+
+@layer components.styles {
+  .kbd {
+    display: inline-flex;
+    align-items: center;
+
+    padding: var(--_padding-y) var(--_padding-x);
+
+    font-family: var(--_font-family);
+    font-size: var(--_font-size);
+    line-height: 1;
+    color: var(--_color);
+
+    background: var(--_bg);
+    border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    border-radius: var(--_radius);
+    box-shadow: 0 var(--ui-space-quarter, #{t.$space-quarter}) 0 var(--_border-color);
+  }
+}

package/src/04-components/typography/kbd/kbd.api.json

@@ -0,0 +1,15 @@
+{
+  "name": "kbd",
+  "element": "kbd",
+  "modifiers": {},
+  "cssVars": [
+    { "name": "--ui-kbd-font-size", "default": "var(--ui-font-size-sm)" },
+    { "name": "--ui-kbd-font-family", "default": "var(--ui-font-mono)" },
+    { "name": "--ui-kbd-padding-x", "default": "var(--ui-space-0)" },
+    { "name": "--ui-kbd-padding-y", "default": "var(--ui-space-0)" },
+    { "name": "--ui-kbd-bg", "default": "var(--ui-color-bg-subtle)" },
+    { "name": "--ui-kbd-border-color", "default": "var(--ui-color-border)" },
+    { "name": "--ui-kbd-radius", "default": "var(--ui-radius-sm)" },
+    { "name": "--ui-kbd-color", "default": "var(--ui-color-text)" }
+  ]
+}

package/src/04-components/typography/kbd/kbd.docs.json

@@ -0,0 +1,61 @@
+{
+  "id": "kbd",
+  "type": "component",
+  "title": "Kbd",
+  "description": "Keyboard shortcut display with monospace font and key-cap styling.",
+  "api": "./kbd.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "p",
+              "children": [
+                { "tag": "span", "text": "Press " },
+                { "tag": "kbd", "class": "ui-kbd", "text": "Ctrl" },
+                { "tag": "span", "text": " + " },
+                { "tag": "kbd", "class": "ui-kbd", "text": "S" },
+                { "tag": "span", "text": " to save" }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Variations",
+      "examples": [
+        {
+          "items": [
+            { "tag": "kbd", "class": "ui-kbd", "text": "Esc" },
+            { "tag": "kbd", "class": "ui-kbd", "text": "Enter" },
+            { "tag": "kbd", "class": "ui-kbd", "text": "Tab" },
+            { "tag": "kbd", "class": "ui-kbd", "text": "Shift" },
+            { "tag": "kbd", "class": "ui-kbd", "text": "Space" }
+          ],
+          "layout": "cluster"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-kbd-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
+    },
+    {
+      "token": "--ui-kbd-bg",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Background color"
+    },
+    {
+      "token": "--ui-kbd-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    { "token": "--ui-kbd-radius", "default": "var(--ui-radius-sm)", "description": "Border radius" }
+  ]
+}

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

package/src/04-components/typography/mark/index.scss

@@ -0,0 +1,22 @@
+@use '../../../00-config/tokens/variables' as t;
+
+@layer components.tokens {
+  .mark {
+    --_bg: var(--ui-mark-bg, var(--ui-color-warning, #{t.$color-warning}));
+    --_color: var(--ui-mark-color, var(--ui-color-text, #{t.$color-text}));
+    --_padding-x: var(--ui-mark-padding-x, var(--ui-space-quarter, #{t.$space-quarter}));
+    --_padding-y: var(--ui-mark-padding-y, 0);
+    --_radius: var(--ui-mark-radius, var(--ui-radius-sm, #{t.$radius-sm}));
+  }
+}
+
+@layer components.styles {
+  .mark {
+    padding: var(--_padding-y) var(--_padding-x);
+
+    color: var(--_color);
+
+    background: var(--_bg);
+    border-radius: var(--_radius);
+  }
+}

package/src/04-components/typography/mark/mark.api.json

@@ -0,0 +1,12 @@
+{
+  "name": "mark",
+  "element": "mark",
+  "modifiers": {},
+  "cssVars": [
+    { "name": "--ui-mark-bg", "default": "var(--ui-color-warning)" },
+    { "name": "--ui-mark-color", "default": "var(--ui-color-text)" },
+    { "name": "--ui-mark-padding-x", "default": "var(--ui-space-quarter)" },
+    { "name": "--ui-mark-padding-y", "default": "0" },
+    { "name": "--ui-mark-radius", "default": "var(--ui-radius-sm)" }
+  ]
+}

package/src/04-components/typography/mark/mark.docs.json

@@ -0,0 +1,60 @@
+{
+  "id": "mark",
+  "type": "component",
+  "title": "Mark",
+  "description": "Highlighted text for search results, emphasis, or annotations.",
+  "api": "./mark.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "p",
+              "children": [
+                { "tag": "span", "text": "The " },
+                { "tag": "mark", "class": "ui-mark", "text": "highlighted" },
+                { "tag": "span", "text": " text stands out from surrounding content." }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Search results",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "p",
+              "children": [
+                { "tag": "span", "text": "Results for " },
+                { "tag": "mark", "class": "ui-mark", "text": "design tokens" },
+                { "tag": "span", "text": ": CSS custom properties that store " },
+                { "tag": "mark", "class": "ui-mark", "text": "design" },
+                { "tag": "span", "text": " decisions as reusable " },
+                { "tag": "mark", "class": "ui-mark", "text": "tokens" },
+                { "tag": "span", "text": "." }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-mark-bg",
+      "default": "var(--ui-color-warning)",
+      "description": "Highlight color"
+    },
+    { "token": "--ui-mark-color", "default": "var(--ui-color-text)", "description": "Text color" },
+    {
+      "token": "--ui-mark-radius",
+      "default": "var(--ui-radius-sm)",
+      "description": "Border radius"
+    }
+  ]
+}

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