@teseor/css 1.7.0 → 1.9.0

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

@@ -1,49 +0,0 @@
-@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/overlays/overlay/overlay.docs.json

@@ -1,63 +0,0 @@
-{
-  "id": "overlay",
-  "type": "component",
-  "title": "Overlay",
-  "description": "Full viewport backdrop for modals, dialogs, and drawers. Controls visibility via state modifiers.",
-  "api": "./overlay.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "html": "<div style=\"position: relative; height: 120px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-overlay\" style=\"position: absolute;\"></div><p style=\"position: relative; padding: var(--ui-space-2);\">Content behind overlay</p></div>",
-          "code": "<div class=\"ui-overlay\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "Light Variant",
-      "examples": [
-        {
-          "html": "<div style=\"position: relative; height: 120px; background: var(--ui-color-text);\"><div class=\"ui-overlay ui-overlay--light\" style=\"position: absolute;\"></div><p style=\"position: relative; padding: var(--ui-space-2); color: white;\">Dark content behind light overlay</p></div>",
-          "code": "<div class=\"ui-overlay ui-overlay--light\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "Blur Variant",
-      "examples": [
-        {
-          "html": "<div style=\"position: relative; height: 120px; background: linear-gradient(45deg, var(--ui-color-primary), var(--ui-color-success));\"><div class=\"ui-overlay ui-overlay--blur\" style=\"position: absolute;\"></div><p style=\"position: relative; padding: var(--ui-space-2); color: white;\">Blurred backdrop</p></div>",
-          "code": "<div class=\"ui-overlay ui-overlay--blur\"></div>"
-        }
-      ]
-    },
-    {
-      "title": "With Animation",
-      "examples": [
-        {
-          "html": "<div style=\"position: relative; height: 120px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-overlay ui-overlay--animate ui-overlay--visible\" style=\"position: absolute;\"></div></div>",
-          "code": "<div class=\"ui-overlay ui-overlay--animate ui-overlay--visible\"></div>\n<!-- JS toggles between --visible and --hidden -->"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-overlay-bg",
-      "default": "rgb(0 0 0 / 0.5)",
-      "description": "Default backdrop color"
-    },
-    {
-      "token": "--ui-overlay-bg-light",
-      "default": "rgb(255 255 255 / 0.7)",
-      "description": "Light variant backdrop color"
-    },
-    {
-      "token": "--ui-overlay-bg-blur",
-      "default": "rgb(0 0 0 / 0.3)",
-      "description": "Blur variant backdrop color"
-    },
-    { "token": "--ui-overlay-z", "default": "var(--ui-z-overlay)", "description": "Z-index layer" }
-  ]
-}

package/src/04-components/overlays/popover/popover.api.json

@@ -1,47 +0,0 @@
-{
-  "name": "popover",
-  "element": "div",
-  "modifiers": {
-    "position": {
-      "values": ["top"]
-    }
-  },
-  "elements": {
-    "header": {},
-    "title": {}
-  },
-  "cssVars": [
-    {
-      "name": "--ui-popover-bg",
-      "default": "var(--ui-color-bg)"
-    },
-    {
-      "name": "--ui-popover-border-color",
-      "default": "var(--ui-color-border)"
-    },
-    {
-      "name": "--ui-popover-radius",
-      "default": "var(--ui-radius-md)"
-    },
-    {
-      "name": "--ui-popover-shadow",
-      "default": "0 calc(#{t.$unit} / 2"
-    },
-    {
-      "name": "--ui-popover-padding",
-      "default": "calc(#{t.$unit} * 2"
-    },
-    {
-      "name": "--ui-popover-max-width",
-      "default": "calc(#{t.$unit} * 40"
-    },
-    {
-      "name": "--ui-popover-z",
-      "default": "var(--ui-z-popover)"
-    },
-    {
-      "name": "--ui-popover-arrow-size",
-      "default": "calc(#{t.$unit}"
-    }
-  ]
-}

package/src/04-components/overlays/tooltip/tooltip.api.json

@@ -1,49 +0,0 @@
-{
-  "name": "tooltip",
-  "element": "div",
-  "modifiers": {
-    "position": {
-      "values": ["top", "bottom", "start", "end"]
-    },
-    "animate": {
-      "type": "boolean"
-    },
-    "visible": {
-      "type": "boolean"
-    }
-  },
-  "cssVars": [
-    {
-      "name": "--ui-tooltip-bg",
-      "default": "var(--ui-color-text)"
-    },
-    {
-      "name": "--ui-tooltip-color",
-      "default": "var(--ui-color-bg)"
-    },
-    {
-      "name": "--ui-tooltip-radius",
-      "default": "var(--ui-radius-sm)"
-    },
-    {
-      "name": "--ui-tooltip-padding-x",
-      "default": "calc(#{t.$unit} * 1"
-    },
-    {
-      "name": "--ui-tooltip-padding-y",
-      "default": "calc(#{t.$unit} / 2"
-    },
-    {
-      "name": "--ui-tooltip-size",
-      "default": "var(--ui-font-size-sm)"
-    },
-    {
-      "name": "--ui-tooltip-z",
-      "default": "var(--ui-z-tooltip)"
-    },
-    {
-      "name": "--ui-tooltip-arrow-size",
-      "default": "calc(#{t.$unit} / 2"
-    }
-  ]
-}

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

@@ -1,18 +0,0 @@
-{
-  "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/code/code.api.json

@@ -1,52 +0,0 @@
-{
-  "name": "code",
-  "element": "div",
-  "modifiers": {
-    "size": {
-      "values": ["sm"]
-    }
-  },
-  "relatedComponents": ["code-block"],
-  "cssVars": [
-    {
-      "name": "--ui-code-font-size",
-      "default": "var(--ui-font-size-sm)"
-    },
-    {
-      "name": "--ui-code-bg",
-      "default": "var(--ui-color-bg-muted)"
-    },
-    {
-      "name": "--ui-code-padding-x",
-      "default": "var(--ui-space-1)"
-    },
-    {
-      "name": "--ui-code-padding-y",
-      "default": "var(--ui-space-0)"
-    },
-    {
-      "name": "--ui-code-radius",
-      "default": "var(--ui-radius-sm)"
-    },
-    {
-      "name": "--ui-code-font-size-block",
-      "default": "var(--ui-font-size-sm)"
-    },
-    {
-      "name": "--ui-code-bg-block",
-      "default": "var(--ui-color-bg-muted)"
-    },
-    {
-      "name": "--ui-code-padding-block",
-      "default": "var(--ui-space-3)"
-    },
-    {
-      "name": "--ui-code-radius-block",
-      "default": "var(--ui-radius-md)"
-    },
-    {
-      "name": "--ui-code-border-color-block",
-      "default": "var(--ui-color-border)"
-    }
-  ]
-}

package/src/04-components/typography/code-block/code-block.api.json

@@ -1,56 +0,0 @@
-{
-  "name": "code-block",
-  "element": "pre",
-  "modifiers": {
-    "compact": {
-      "type": "boolean"
-    },
-    "line-numbers": {
-      "type": "boolean"
-    }
-  },
-  "subElements": ["code", "line", "line-number"],
-  "relatedComponents": ["code"],
-  "cssVars": [
-    {
-      "name": "--ui-code-block-bg",
-      "default": "var(--ui-color-bg-muted)"
-    },
-    {
-      "name": "--ui-code-block-color",
-      "default": "var(--ui-color-text)"
-    },
-    {
-      "name": "--ui-code-block-border-color",
-      "default": "var(--ui-color-border)"
-    },
-    {
-      "name": "--ui-code-block-padding",
-      "default": "var(--ui-space-3)"
-    },
-    {
-      "name": "--ui-code-block-font-size",
-      "default": "var(--ui-font-size-sm)"
-    },
-    {
-      "name": "--ui-code-block-line-height",
-      "default": "var(--ui-leading-tight-sm)"
-    },
-    {
-      "name": "--ui-code-block-radius",
-      "default": "var(--ui-radius-md)"
-    },
-    {
-      "name": "--ui-code-block-padding-compact",
-      "default": "var(--ui-space-1)"
-    },
-    {
-      "name": "--ui-code-block-line-number-color",
-      "default": "var(--ui-color-text-muted)"
-    },
-    {
-      "name": "--ui-code-block-line-number-border-color",
-      "default": "var(--ui-color-border)"
-    }
-  ]
-}

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

@@ -1,83 +0,0 @@
-{
-  "name": "heading",
-  "element": "h2",
-  "modifiers": {
-    "size": {
-      "values": ["4xl", "3xl", "2xl", "xl", "lg", "md", "sm"]
-    }
-  },
-  "cssVars": [
-    {
-      "name": "--ui-heading-font-size",
-      "default": "var(--ui-font-size-xl)"
-    },
-    {
-      "name": "--ui-heading-line-height",
-      "default": "var(--ui-leading-xl)"
-    },
-    {
-      "name": "--ui-heading-weight",
-      "default": "var(--ui-weight-bold)"
-    },
-    {
-      "name": "--ui-heading-color",
-      "default": "var(--ui-color-text)"
-    },
-    {
-      "name": "--ui-heading-font-size-4xl",
-      "default": "var(--ui-font-size-4xl)"
-    },
-    {
-      "name": "--ui-heading-line-height-4xl",
-      "default": "var(--ui-leading-4xl)"
-    },
-    {
-      "name": "--ui-heading-font-size-3xl",
-      "default": "var(--ui-font-size-3xl)"
-    },
-    {
-      "name": "--ui-heading-line-height-3xl",
-      "default": "var(--ui-leading-3xl)"
-    },
-    {
-      "name": "--ui-heading-font-size-2xl",
-      "default": "var(--ui-font-size-2xl)"
-    },
-    {
-      "name": "--ui-heading-line-height-2xl",
-      "default": "var(--ui-leading-2xl)"
-    },
-    {
-      "name": "--ui-heading-font-size-xl",
-      "default": "var(--ui-font-size-xl)"
-    },
-    {
-      "name": "--ui-heading-line-height-xl",
-      "default": "var(--ui-leading-xl)"
-    },
-    {
-      "name": "--ui-heading-font-size-lg",
-      "default": "var(--ui-font-size-lg)"
-    },
-    {
-      "name": "--ui-heading-line-height-lg",
-      "default": "var(--ui-leading-lg)"
-    },
-    {
-      "name": "--ui-heading-font-size-md",
-      "default": "var(--ui-font-size-md)"
-    },
-    {
-      "name": "--ui-heading-line-height-md",
-      "default": "var(--ui-leading-tight-md)"
-    },
-    {
-      "name": "--ui-heading-font-size-sm",
-      "default": "var(--ui-font-size-sm)"
-    },
-    {
-      "name": "--ui-heading-line-height-sm",
-      "default": "var(--ui-leading-tight-sm)"
-    }
-  ]
-}

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

@@ -1,15 +0,0 @@
-{
-  "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/link/link.api.json

@@ -1,45 +0,0 @@
-{
-  "name": "link",
-  "element": "a",
-  "modifiers": {
-    "variant": {
-      "values": ["muted", "subtle"]
-    },
-    "external": {
-      "type": "boolean"
-    },
-    "disabled": {
-      "type": "boolean"
-    }
-  },
-  "cssVars": [
-    {
-      "name": "--ui-link-color",
-      "default": "var(--ui-color-primary)"
-    },
-    {
-      "name": "--ui-link-color-hover",
-      "default": "var(--ui-color-primary-hover)"
-    },
-    {
-      "name": "--ui-link-color-visited",
-      "default": "var(--_color)"
-    },
-    {
-      "name": "--ui-link-decoration",
-      "default": "underline"
-    },
-    {
-      "name": "--ui-link-decoration-hover",
-      "default": "underline"
-    },
-    {
-      "name": "--ui-link-color-muted",
-      "default": "var(--ui-color-text-muted)"
-    },
-    {
-      "name": "--ui-link-color-muted-hover",
-      "default": "var(--ui-color-text)"
-    }
-  ]
-}

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

@@ -1,12 +0,0 @@
-{
-  "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/05-utilities/border/index.scss

@@ -1,21 +0,0 @@
-@use '../../00-config/mixins/border' as *;
-
-// Border utilities - uses same mixins as components
-@layer utilities {
-  // Border
-  .border { @include border; }
-  .border-0 { border: none; }
-
-  // Radius
-  .rounded { @include rounded; }
-  .rounded-none { border-radius: 0; }
-  .rounded-sm { @include rounded(var(--ui-radius-sm)); }
-  .rounded-lg { @include rounded(var(--ui-radius-lg)); }
-  .rounded-full { @include rounded(var(--ui-radius-full)); }
-
-  // Background
-  .bg { @include surface; }
-  .bg-subtle { @include surface(var(--ui-color-bg-subtle)); }
-  .bg-muted { @include surface(var(--ui-color-bg-muted)); }
-  .bg-transparent { background: transparent; }
-}

package/src/testing/sidebar-toggles.spec.ts

@@ -1,103 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-// Needs docs server running at localhost:3000
-test.skip(!!process.env.CI, 'Sidebar toggle test requires docs server');
-
-test.describe('sidebar toggle buttons', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/');
-    // Clear sessionStorage/localStorage to start fresh
-    await page.evaluate(() => {
-      sessionStorage.clear();
-      localStorage.clear();
-    });
-    await page.reload();
-  });
-
-  test('all buttons start with aria-pressed=false', async ({ page }) => {
-    const buttons = page.locator('.ui-sidebar-nav__footer button[aria-pressed]');
-    const count = await buttons.count();
-    expect(count).toBe(5);
-    for (let i = 0; i < count; i++) {
-      await expect(buttons.nth(i)).toHaveAttribute('aria-pressed', 'false');
-    }
-  });
-
-  test('debug grid toggle adds class and sets aria-pressed', async ({ page }) => {
-    const btn = page.locator('button', { hasText: 'Toggle Grid' }).first();
-    await btn.click();
-    await expect(btn).toHaveAttribute('aria-pressed', 'true');
-    const hasClass = await page.evaluate(() => document.body.classList.contains('ui-debug-grid'));
-    expect(hasClass).toBe(true);
-
-    // Toggle off
-    await btn.click();
-    await expect(btn).toHaveAttribute('aria-pressed', 'false');
-    const removed = await page.evaluate(() => !document.body.classList.contains('ui-debug-grid'));
-    expect(removed).toBe(true);
-  });
-
-  test('debug grid overlay renders background-image', async ({ page }) => {
-    const btn = page.locator('button', { hasText: 'Toggle Grid' }).first();
-    await btn.click();
-
-    const bg = await page.evaluate(() => {
-      return window.getComputedStyle(document.body, '::after').backgroundImage;
-    });
-    expect(bg).not.toBe('none');
-  });
-
-  test('debug baseline toggle works', async ({ page }) => {
-    const btn = page.locator('button', { hasText: 'Toggle Baseline' });
-    await btn.click();
-    await expect(btn).toHaveAttribute('aria-pressed', 'true');
-    const hasClass = await page.evaluate(() =>
-      document.body.classList.contains('ui-debug-baseline'),
-    );
-    expect(hasClass).toBe(true);
-  });
-
-  test('debug outline toggle adds outlines to children', async ({ page }) => {
-    const btn = page.locator('button', { hasText: 'Toggle Outlines' });
-    await btn.click();
-    await expect(btn).toHaveAttribute('aria-pressed', 'true');
-    const outlineStyle = await page.evaluate(() => {
-      const el = document.querySelector('.ui-main');
-      return el ? window.getComputedStyle(el).outlineStyle : '';
-    });
-    expect(outlineStyle).toBe('solid');
-  });
-
-  test('dark mode toggle sets data-theme and aria-pressed', async ({ page }) => {
-    const btn = page.locator('#theme-toggle');
-    await expect(btn).toHaveAttribute('aria-pressed', 'false');
-
-    await btn.click();
-    await expect(btn).toHaveAttribute('aria-pressed', 'true');
-    await expect(btn).toHaveText('Light Mode');
-    const theme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
-    expect(theme).toBe('dark');
-
-    await btn.click();
-    await expect(btn).toHaveAttribute('aria-pressed', 'false');
-    await expect(btn).toHaveText('Dark Mode');
-  });
-
-  test('debug state persists across page loads', async ({ page }) => {
-    // Enable grid
-    const gridBtn = page.locator('button', { hasText: 'Toggle Grid' }).first();
-    await gridBtn.click();
-    await expect(gridBtn).toHaveAttribute('aria-pressed', 'true');
-
-    // Reload page
-    await page.reload();
-
-    // Body should still have the class
-    const hasClass = await page.evaluate(() => document.body.classList.contains('ui-debug-grid'));
-    expect(hasClass).toBe(true);
-
-    // Button should reflect the restored state
-    const restoredBtn = page.locator('button', { hasText: 'Toggle Grid' }).first();
-    await expect(restoredBtn).toHaveAttribute('aria-pressed', 'true');
-  });
-});