@teseor/css 1.0.0

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

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

@@ -0,0 +1,145 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Menu - action menu
+// Dropdown list of actions or options
+
+@layer components.tokens {
+  .menu {
+    --_min-width: var(--ui-menu-min-width, calc(#{t.$unit} * 16));
+    --_max-height: var(--ui-menu-max-height, calc(#{t.$unit} * 40));
+    --_padding: var(--ui-menu-padding, calc(#{t.$unit} * 1));
+    --_radius: var(--ui-menu-radius, var(--ui-radius-md, #{t.$radius-md}));
+    --_bg: var(--ui-menu-bg, var(--ui-color-bg, #{t.$color-bg}));
+    --_border-color: var(--ui-menu-border-color, var(--ui-color-border, #{t.$color-border}));
+    --_shadow: var(--ui-menu-shadow, var(--shadow-lg));
+    --_item-padding: var(--ui-menu-item-padding, calc(#{t.$unit} * 1) calc(#{t.$unit} * 2));
+    --_item-radius: var(--ui-menu-item-radius, var(--ui-radius-sm, #{t.$radius-sm}));
+    --_item-bg-hover: var(--ui-menu-item-bg-hover, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+  }
+}
+
+@layer components.styles {
+  .menu {
+    min-inline-size: var(--_min-width);
+    max-block-size: var(--_max-height);
+    padding: var(--_padding);
+    overflow-y: auto;
+
+    background: var(--_bg);
+    border-radius: var(--_radius);
+    outline: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
+    box-shadow: var(--_shadow);
+    outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
+  }
+
+  .menu__group {
+    padding: 0;
+    margin: 0;
+
+    list-style: none;
+  }
+
+  .menu__label {
+    padding: var(--_item-padding);
+
+    font-size: var(--ui-font-size-xs, #{t.$font-size-xs});
+    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
+    line-height: var(--ui-row-1, #{t.$row});
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+  }
+
+  .menu__item {
+    display: flex;
+    align-items: center;
+    gap: calc(#{t.$unit} * 1);
+
+    padding: var(--_item-padding);
+
+    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    line-height: var(--ui-row-1, #{t.$row});
+    text-decoration: none;
+    color: var(--ui-color-text, #{t.$color-text});
+
+    background: transparent;
+    border: none;
+    border-radius: var(--_item-radius);
+    cursor: pointer;
+
+    transition: background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+
+    &:hover,
+    &:focus-visible {
+      background: var(--_item-bg-hover);
+      outline: none;
+    }
+  }
+
+  .menu__item--danger {
+    color: var(--ui-color-danger, #{t.$color-danger});
+
+    &:hover,
+    &:focus-visible {
+      color: var(--ui-color-danger, #{t.$color-danger});
+    }
+  }
+
+  .menu__item--disabled,
+  .menu__item[aria-disabled="true"] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .menu__item-icon {
+    flex-shrink: 0;
+
+    block-size: calc(#{t.$unit} * 2);
+    inline-size: calc(#{t.$unit} * 2);
+  }
+
+  .menu__item-shortcut {
+    margin-inline-start: auto;
+
+    font-size: var(--ui-font-size-xs, #{t.$font-size-xs});
+    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+  }
+
+  .menu__separator {
+    display: flex;
+    align-items: center;
+
+    block-size: calc(#{t.$unit} * 2);
+    margin: 0;
+
+    &::before {
+      content: '';
+      flex: 1;
+
+      block-size: var(--ui-border-width-sm, 1px);
+
+      background: var(--ui-color-border, #{t.$color-border});
+    }
+  }
+
+  // Checkbox/radio items
+  .menu__item--check,
+  .menu__item--radio {
+
+    position: relative;
+
+    padding-inline-start: calc(#{t.$unit} * 4);
+  }
+
+  .menu__item-indicator {
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    inset-inline-start: calc(#{t.$unit} * 1);
+
+    block-size: calc(#{t.$unit} * 2);
+    inline-size: calc(#{t.$unit} * 2);
+  }
+}

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

@@ -0,0 +1,47 @@
+{
+  "name": "menu",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-menu-min-width",
+      "default": "calc(#{t.$unit} * 16"
+    },
+    {
+      "name": "--ui-menu-max-height",
+      "default": "calc(#{t.$unit} * 40"
+    },
+    {
+      "name": "--ui-menu-padding",
+      "default": "calc(#{t.$unit} * 1"
+    },
+    {
+      "name": "--ui-menu-radius",
+      "default": "var(--ui-radius-md)"
+    },
+    {
+      "name": "--ui-menu-bg",
+      "default": "var(--ui-color-bg)"
+    },
+    {
+      "name": "--ui-menu-border-color",
+      "default": "var(--ui-color-border)"
+    },
+    {
+      "name": "--ui-menu-shadow",
+      "default": "var(--shadow-lg)"
+    },
+    {
+      "name": "--ui-menu-item-padding",
+      "default": "calc(#{t.$unit} * 1"
+    },
+    {
+      "name": "--ui-menu-item-radius",
+      "default": "var(--ui-radius-sm)"
+    },
+    {
+      "name": "--ui-menu-item-bg-hover",
+      "default": "var(--ui-color-bg-subtle)"
+    }
+  ]
+}

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

@@ -0,0 +1,81 @@
+{
+  "api": "./menu.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<div class=\"ui-menu\"><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item\">Edit</button></li><li><button class=\"ui-menu__item\">Duplicate</button></li><li><button class=\"ui-menu__item\">Archive</button></li></ul></div>"
+        }
+      ]
+    },
+    {
+      "title": "With Icons and Shortcuts",
+      "examples": [
+        {
+          "html": "<div class=\"ui-menu\"><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item\"><span class=\"ui-menu__item-icon\">+</span>New File<span class=\"ui-menu__item-shortcut\">Cmd+N</span></button></li><li><button class=\"ui-menu__item\"><span class=\"ui-menu__item-icon\">O</span>Open<span class=\"ui-menu__item-shortcut\">Cmd+O</span></button></li><li><button class=\"ui-menu__item\"><span class=\"ui-menu__item-icon\">S</span>Save<span class=\"ui-menu__item-shortcut\">Cmd+S</span></button></li></ul></div>"
+        }
+      ]
+    },
+    {
+      "title": "Groups with Labels",
+      "examples": [
+        {
+          "html": "<div class=\"ui-menu\"><div class=\"ui-menu__label\">Edit</div><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item\">Cut</button></li><li><button class=\"ui-menu__item\">Copy</button></li><li><button class=\"ui-menu__item\">Paste</button></li></ul><div class=\"ui-menu__separator\"></div><div class=\"ui-menu__label\">View</div><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item\">Zoom In</button></li><li><button class=\"ui-menu__item\">Zoom Out</button></li></ul></div>"
+        }
+      ]
+    },
+    {
+      "title": "States",
+      "examples": [
+        {
+          "html": "<div class=\"ui-menu\"><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item\">Normal Item</button></li><li><button class=\"ui-menu__item ui-menu__item--disabled\" aria-disabled=\"true\">Disabled Item</button></li><li><button class=\"ui-menu__item ui-menu__item--danger\">Delete</button></li></ul></div>"
+        }
+      ]
+    },
+    {
+      "title": "Checkable Items",
+      "examples": [
+        {
+          "html": "<div class=\"ui-menu\"><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item ui-menu__item--check\"><span class=\"ui-menu__item-indicator\">&#10003;</span>Show Toolbar</button></li><li><button class=\"ui-menu__item ui-menu__item--check\"><span class=\"ui-menu__item-indicator\"></span>Show Sidebar</button></li></ul><div class=\"ui-menu__separator\"></div><ul class=\"ui-menu__group\"><li><button class=\"ui-menu__item ui-menu__item--radio\"><span class=\"ui-menu__item-indicator\">&#8226;</span>List View</button></li><li><button class=\"ui-menu__item ui-menu__item--radio\"><span class=\"ui-menu__item-indicator\"></span>Grid View</button></li></ul></div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-menu-min-width",
+      "default": "calc(var(--unit) * 16)",
+      "description": "Minimum width"
+    },
+    {
+      "token": "--ui-menu-max-height",
+      "default": "calc(var(--unit) * 40)",
+      "description": "Maximum height"
+    },
+    { "token": "--ui-menu-padding", "default": "var(--unit)", "description": "Container padding" },
+    {
+      "token": "--ui-menu-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius"
+    },
+    { "token": "--ui-menu-bg", "default": "var(--ui-color-bg)", "description": "Background color" },
+    {
+      "token": "--ui-menu-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    { "token": "--ui-menu-shadow", "default": "var(--shadow-lg)", "description": "Box shadow" },
+    { "token": "--ui-menu-item-padding", "default": "8px 16px", "description": "Item padding" },
+    {
+      "token": "--ui-menu-item-radius",
+      "default": "var(--ui-radius-sm)",
+      "description": "Item border radius"
+    },
+    {
+      "token": "--ui-menu-item-bg-hover",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Item hover background"
+    }
+  ]
+}

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

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

@@ -0,0 +1,93 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Modal - container for modal dialogs
+// Centered container with backdrop that appears over page content
+
+@layer components.tokens {
+  .modal {
+    --_bg: var(--ui-modal-bg, var(--ui-color-bg, white));
+    --_radius: var(--ui-modal-radius, var(--ui-radius-lg, calc(#{t.$unit} * 1.5)));
+    --_shadow: var(--ui-modal-shadow, 0 calc(#{t.$unit} * 3) calc(#{t.$unit} * 6) rgb(0 0 0 / 0.25));
+    --_padding: var(--ui-modal-padding, calc(#{t.$unit} * 3));
+    --_max-width: var(--ui-modal-max-width, calc(#{t.$unit} * 60));
+    --_max-height: var(--ui-modal-max-height, calc(100vh - #{t.$unit} * 8));
+    --_z: var(--ui-modal-z, var(--ui-z-modal, 400));
+  }
+
+  .modal--sm {
+    --_max-width: var(--ui-modal-max-width-sm, calc(#{t.$unit} * 40));
+  }
+
+  .modal--lg {
+    --_max-width: var(--ui-modal-max-width-lg, calc(#{t.$unit} * 80));
+  }
+
+  .modal--full {
+    --_max-width: calc(100vw - #{t.$unit} * 4);
+    --_max-height: calc(100vh - #{t.$unit} * 4);
+    --_radius: 0;
+  }
+}
+
+@layer components.styles {
+  .modal {
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    inset: 0;
+    z-index: var(--_z);
+
+    padding: calc(#{t.$unit} * 2);
+  }
+
+  .modal__content {
+
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    inline-size: 100%;
+    max-block-size: var(--_max-height);
+    max-inline-size: var(--_max-width);
+    padding: var(--_padding);
+    overflow: hidden;
+
+    background: var(--_bg);
+    border-radius: var(--_radius);
+    box-shadow: var(--_shadow);
+  }
+
+  // Scrollable body
+  .modal__body {
+    flex: 1 1 auto;
+
+    overflow-y: auto;
+  }
+
+  // Animation states
+  .modal--entering .modal__content,
+  .modal--visible .modal__content {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .modal--exiting .modal__content,
+  .modal--hidden .modal__content {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  .modal--animate .modal__content {
+    transition:
+      opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease),
+      transform var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
+  }
+
+  // Hidden state hides entire modal
+  .modal--hidden {
+    visibility: hidden;
+    pointer-events: none;
+  }
+}

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

@@ -0,0 +1,43 @@
+{
+  "name": "modal",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-modal-bg",
+      "default": "var(--ui-color-bg)"
+    },
+    {
+      "name": "--ui-modal-radius",
+      "default": "var(--ui-radius-lg)"
+    },
+    {
+      "name": "--ui-modal-shadow",
+      "default": "0 calc(#{t.$unit} * 3"
+    },
+    {
+      "name": "--ui-modal-padding",
+      "default": "calc(#{t.$unit} * 3"
+    },
+    {
+      "name": "--ui-modal-max-width",
+      "default": "calc(#{t.$unit} * 60"
+    },
+    {
+      "name": "--ui-modal-max-height",
+      "default": "calc(100vh - #{t.$unit} * 8"
+    },
+    {
+      "name": "--ui-modal-z",
+      "default": "var(--ui-z-modal)"
+    },
+    {
+      "name": "--ui-modal-max-width-sm",
+      "default": "calc(#{t.$unit} * 40"
+    },
+    {
+      "name": "--ui-modal-max-width-lg",
+      "default": "calc(#{t.$unit} * 80"
+    }
+  ]
+}

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

@@ -0,0 +1,86 @@
+{
+  "id": "modal",
+  "type": "component",
+  "title": "Modal",
+  "description": "Container for modal dialogs. Use with overlay for backdrop effect.",
+  "api": "./modal.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<div style=\"position: relative; height: 200px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-modal ui-modal--visible\" style=\"position: absolute;\"><div class=\"ui-modal__content\"><p>Modal content goes here</p></div></div></div>",
+          "code": "<div class=\"ui-overlay\"></div>\n<div class=\"ui-modal\">\n  <div class=\"ui-modal__content\">\n    <p>Modal content goes here</p>\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "data": {
+        "sizes": [
+          { "mod": "sm", "label": "Small" },
+          { "mod": "", "label": "Default" },
+          { "mod": "lg", "label": "Large" }
+        ]
+      },
+      "examples": [
+        {
+          "html": "<div style=\"position: relative; height: 120px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-modal ui-modal--sm ui-modal--visible\" style=\"position: absolute;\"><div class=\"ui-modal__content\"><p>Small modal</p></div></div></div>",
+          "code": "<div class=\"ui-modal ui-modal--sm\">\n  <div class=\"ui-modal__content\">Small modal</div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "With Scrollable Content",
+      "examples": [
+        {
+          "html": "<div style=\"position: relative; height: 200px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-modal ui-modal--visible\" style=\"position: absolute;\"><div class=\"ui-modal__content\" style=\"max-height: 150px;\"><div class=\"ui-modal__body\"><p>Line 1</p><p>Line 2</p><p>Line 3</p><p>Line 4</p><p>Line 5</p><p>Line 6</p></div></div></div></div>",
+          "code": "<div class=\"ui-modal\">\n  <div class=\"ui-modal__content\">\n    <div class=\"ui-modal__body\">\n      <!-- Scrollable content -->\n    </div>\n  </div>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-modal-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "token": "--ui-modal-radius",
+      "default": "var(--ui-radius-lg)",
+      "description": "Border radius"
+    },
+    {
+      "token": "--ui-modal-shadow",
+      "default": "0 24px 48px rgb(0 0 0 / 0.25)",
+      "description": "Box shadow"
+    },
+    {
+      "token": "--ui-modal-padding",
+      "default": "calc(var(--unit) * 3)",
+      "description": "Content padding"
+    },
+    {
+      "token": "--ui-modal-max-width",
+      "default": "calc(var(--unit) * 60)",
+      "description": "Max width (default)"
+    },
+    {
+      "token": "--ui-modal-max-width-sm",
+      "default": "calc(var(--unit) * 40)",
+      "description": "Max width (small)"
+    },
+    {
+      "token": "--ui-modal-max-width-lg",
+      "default": "calc(var(--unit) * 80)",
+      "description": "Max width (large)"
+    },
+    {
+      "token": "--ui-modal-max-height",
+      "default": "calc(100vh - var(--unit) * 8)",
+      "description": "Max height"
+    },
+    { "token": "--ui-modal-z", "default": "var(--ui-z-modal)", "description": "Z-index" }
+  ]
+}

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

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

@@ -0,0 +1,49 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Overlay - backdrop for modals, dialogs, drawers
+// Full viewport coverage with semi-transparent background
+
+@layer components.tokens {
+  .overlay {
+    --_bg: var(--ui-overlay-bg, rgb(0 0 0 / 0.5));
+    --_z: var(--ui-overlay-z, var(--ui-z-overlay, 300));
+  }
+
+  .overlay--light {
+    --_bg: var(--ui-overlay-bg-light, rgb(255 255 255 / 0.7));
+  }
+
+  .overlay--blur {
+    --_bg: var(--ui-overlay-bg-blur, rgb(0 0 0 / 0.3));
+  }
+}
+
+@layer components.styles {
+  .overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--_z);
+
+    background: var(--_bg);
+  }
+
+  .overlay--blur {
+    backdrop-filter: blur(calc(#{t.$unit} * 0.5));
+  }
+
+  // Animation states (controlled via JS)
+  .overlay--entering,
+  .overlay--visible {
+    opacity: 1;
+  }
+
+  .overlay--exiting,
+  .overlay--hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .overlay--animate {
+    transition: opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
+  }
+}

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

@@ -0,0 +1,23 @@
+{
+  "name": "overlay",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-overlay-bg",
+      "default": "rgb(0 0 0 / 0.5"
+    },
+    {
+      "name": "--ui-overlay-z",
+      "default": "var(--ui-z-overlay)"
+    },
+    {
+      "name": "--ui-overlay-bg-light",
+      "default": "rgb(255 255 255 / 0.7"
+    },
+    {
+      "name": "--ui-overlay-bg-blur",
+      "default": "rgb(0 0 0 / 0.3"
+    }
+  ]
+}