@teseor/css 1.0.0

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

@@ -0,0 +1,86 @@
+{
+  "name": "tag",
+  "element": "span",
+  "modifiers": {
+    "size": {
+      "values": ["sm"]
+    },
+    "variant": {
+      "values": ["primary", "success", "warning", "danger"]
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-tag-height",
+      "default": "calc(#{t.$unit} * 3"
+    },
+    {
+      "name": "--ui-tag-padding-x",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-tag-gap",
+      "default": "calc(#{t.$unit} * 0.5"
+    },
+    {
+      "name": "--ui-tag-radius",
+      "default": "var(--ui-radius-full)"
+    },
+    {
+      "name": "--ui-tag-font-size",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-tag-bg",
+      "default": "var(--ui-color-bg-muted)"
+    },
+    {
+      "name": "--ui-tag-color",
+      "default": "var(--ui-color-text)"
+    },
+    {
+      "name": "--ui-tag-height-sm",
+      "default": "calc(#{t.$unit} * 2.5"
+    },
+    {
+      "name": "--ui-tag-padding-x-sm",
+      "default": "calc(#{t.$unit} * 1"
+    },
+    {
+      "name": "--ui-tag-font-size-sm",
+      "default": "var(--ui-font-size-xs)"
+    },
+    {
+      "name": "--ui-tag-primary-bg",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-tag-primary-color",
+      "default": "var(--ui-color-text-inverse)"
+    },
+    {
+      "name": "--ui-tag-success-bg",
+      "default": "var(--ui-color-success)"
+    },
+    {
+      "name": "--ui-tag-success-color",
+      "default": "var(--ui-color-text-inverse)"
+    },
+    {
+      "name": "--ui-tag-warning-bg",
+      "default": "var(--ui-color-warning)"
+    },
+    {
+      "name": "--ui-tag-warning-color",
+      "default": "var(--ui-color-text)"
+    },
+    {
+      "name": "--ui-tag-danger-bg",
+      "default": "var(--ui-color-danger)"
+    },
+    {
+      "name": "--ui-tag-danger-color",
+      "default": "var(--ui-color-text-inverse)"
+    }
+  ]
+}

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

@@ -0,0 +1,108 @@
+{
+  "id": "tag",
+  "type": "component",
+  "title": "Tag",
+  "description": "Keyword labels for categorization. Use for filtering, attributes, or status indicators.",
+  "api": "./tag.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            { "tag": "span", "class": "ui-tag", "text": "Tag" },
+            { "tag": "span", "class": "ui-tag", "text": "Category" },
+            { "tag": "span", "class": "ui-tag", "text": "Label" }
+          ],
+          "code": "<span class=\"ui-tag\">Tag</span>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            { "tag": "span", "class": "ui-tag ui-tag--sm", "text": "Small" },
+            { "tag": "span", "class": "ui-tag", "text": "Default" }
+          ],
+          "code": "<span class=\"ui-tag ui-tag--sm\">Small</span>\n<span class=\"ui-tag\">Default</span>"
+        }
+      ]
+    },
+    {
+      "title": "Variants",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            { "tag": "span", "class": "ui-tag", "text": "Default" },
+            { "tag": "span", "class": "ui-tag ui-tag--primary", "text": "Primary" },
+            { "tag": "span", "class": "ui-tag ui-tag--success", "text": "Success" },
+            { "tag": "span", "class": "ui-tag ui-tag--warning", "text": "Warning" },
+            { "tag": "span", "class": "ui-tag ui-tag--danger", "text": "Danger" }
+          ],
+          "code": "<span class=\"ui-tag\">Default</span>\n<span class=\"ui-tag ui-tag--primary\">Primary</span>\n<span class=\"ui-tag ui-tag--success\">Success</span>\n<span class=\"ui-tag ui-tag--warning\">Warning</span>\n<span class=\"ui-tag ui-tag--danger\">Danger</span>"
+        }
+      ]
+    },
+    {
+      "title": "With Remove Button",
+      "examples": [
+        {
+          "html": "<span class=\"ui-tag\">Removable<button class=\"ui-tag__remove\" aria-label=\"Remove\"><svg class=\"ui-icon ui-icon--xs\" viewBox=\"0 0 24 24\"><path d=\"M18 6 6 18M6 6l12 12\"></path></svg></button></span>",
+          "code": "<span class=\"ui-tag\">\n  Removable\n  <button class=\"ui-tag__remove\" aria-label=\"Remove\">\n    <svg class=\"ui-icon\">...</svg>\n  </button>\n</span>"
+        }
+      ]
+    },
+    {
+      "title": "Tag Group",
+      "examples": [
+        {
+          "html": "<div class=\"ui-tag-group\"><span class=\"ui-tag\">JavaScript</span><span class=\"ui-tag\">TypeScript</span><span class=\"ui-tag\">React</span><span class=\"ui-tag\">CSS</span></div>",
+          "code": "<div class=\"ui-tag-group\">\n  <span class=\"ui-tag\">JavaScript</span>\n  <span class=\"ui-tag\">TypeScript</span>\n  <span class=\"ui-tag\">React</span>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-tag-height",
+      "default": "calc(var(--unit) * 3)",
+      "description": "Default height"
+    },
+    {
+      "token": "--ui-tag-height-sm",
+      "default": "calc(var(--unit) * 2.5)",
+      "description": "Small height"
+    },
+    {
+      "token": "--ui-tag-padding-x",
+      "default": "var(--ui-space-1)",
+      "description": "Horizontal padding"
+    },
+    {
+      "token": "--ui-tag-gap",
+      "default": "calc(var(--unit) * 0.5)",
+      "description": "Gap between content and remove button"
+    },
+    {
+      "token": "--ui-tag-radius",
+      "default": "var(--ui-radius-full)",
+      "description": "Border radius"
+    },
+    {
+      "token": "--ui-tag-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
+    },
+    {
+      "token": "--ui-tag-bg",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Background color"
+    },
+    { "token": "--ui-tag-color", "default": "var(--ui-color-text)", "description": "Text color" }
+  ]
+}

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

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

@@ -0,0 +1,124 @@
+@use '../../00-config/tokens/variables' as t;
+
+// @component textarea
+// @element textarea
+
+@layer components.tokens {
+  .textarea {
+    --_min-height: var(--ui-textarea-min-height, calc(#{t.$row} * 4));
+    --_padding-x: var(--ui-textarea-padding-x, var(--ui-space-1, #{t.$space-1}));
+    --_padding-y: var(--ui-textarea-padding-y, var(--ui-space-1, #{t.$space-1}));
+    --_font-size: var(--ui-textarea-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_radius: var(--ui-textarea-radius, var(--ui-radius-md, #{t.$radius-md}));
+    --_bg: var(--ui-textarea-bg, var(--ui-color-bg, #{t.$color-bg}));
+    --_border-color: var(--ui-textarea-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    --_border-color-focus: var(--ui-textarea-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
+    --_text: var(--ui-textarea-text, var(--ui-color-text, #{t.$color-text}));
+    --_placeholder: var(--ui-textarea-placeholder, var(--ui-color-text-muted, #{t.$color-text-muted}));
+  }
+
+  // @modifier size
+  .textarea--sm {
+    --_min-height: var(--ui-textarea-min-height-sm, calc(#{t.$row} * 3));
+    --_font-size: var(--ui-textarea-font-size-sm, var(--ui-font-size-xs, #{t.$font-size-xs}));
+  }
+
+  .textarea--lg {
+    --_min-height: var(--ui-textarea-min-height-lg, calc(#{t.$row} * 6));
+    --_padding-x: var(--ui-textarea-padding-x-lg, var(--ui-space-2, #{t.$space-2}));
+    --_padding-y: var(--ui-textarea-padding-y-lg, var(--ui-space-2, #{t.$space-2}));
+    --_font-size: var(--ui-textarea-font-size-lg, var(--ui-font-size-md, #{t.$font-size-md}));
+  }
+
+  // @modifier variant
+  .textarea--filled {
+    --_bg: var(--ui-textarea-filled-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    --_border-color: transparent;
+  }
+
+  .textarea--ghost {
+    --_bg: transparent;
+    --_border-color: transparent;
+  }
+
+  // @modifier state
+  .textarea--error {
+    --_border-color: var(--ui-textarea-error-border, var(--ui-color-danger, #{t.$color-danger}));
+    --_border-color-focus: var(--ui-textarea-error-border, var(--ui-color-danger, #{t.$color-danger}));
+  }
+
+  .textarea--success {
+    --_border-color: var(--ui-textarea-success-border, var(--ui-color-success, #{t.$color-success}));
+    --_border-color-focus: var(--ui-textarea-success-border, var(--ui-color-success, #{t.$color-success}));
+  }
+}
+
+@layer components.styles {
+  .textarea {
+    display: block;
+
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-block-size: var(--_min-height);
+    padding-block: var(--_padding-y);
+    padding-inline: var(--_padding-x);
+
+    font-family: inherit;
+    font-size: var(--_font-size);
+    line-height: var(--ui-row-1, #{t.$row});
+    color: var(--_text);
+
+    background: var(--_bg);
+    border: none;
+    border-radius: var(--_radius);
+    outline: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+
+    transition:
+      border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
+      box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+    outline-offset: calc(var(--ui-border-width-sm, #{t.$border-width-sm}) * -1);
+
+    // Default resize behavior
+    resize: vertical;
+
+    &::placeholder {
+      color: var(--_placeholder);
+    }
+
+    &:hover:not(:disabled, :focus) {
+      outline-color: var(--ui-color-border-strong, #{t.$color-border-strong});
+    }
+
+    &:focus,
+    &--focus {
+      outline-color: var(--_border-color-focus);
+
+      box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--ui-color-focus, #{t.$color-focus});
+    }
+
+    &:disabled,
+    &--disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      resize: none;
+    }
+
+    &:read-only {
+      background: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+      resize: none;
+    }
+
+    // Resize variants
+    &--resize-none {
+      resize: none;
+    }
+
+    &--resize-horizontal {
+      resize: horizontal;
+    }
+
+    &--resize-both {
+      resize: both;
+    }
+  }
+}

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

@@ -0,0 +1,93 @@
+{
+  "name": "textarea",
+  "element": "textarea",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "variant": {
+      "values": ["filled", "ghost"]
+    },
+    "state": {
+      "values": ["error", "success"]
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-textarea-min-height",
+      "default": "calc(#{t.$row} * 4"
+    },
+    {
+      "name": "--ui-textarea-padding-x",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-textarea-padding-y",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-textarea-font-size",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-textarea-radius",
+      "default": "var(--ui-radius-md)"
+    },
+    {
+      "name": "--ui-textarea-bg",
+      "default": "var(--ui-color-bg)"
+    },
+    {
+      "name": "--ui-textarea-border-color",
+      "default": "var(--ui-color-border-strong)"
+    },
+    {
+      "name": "--ui-textarea-border-color-focus",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-textarea-text",
+      "default": "var(--ui-color-text)"
+    },
+    {
+      "name": "--ui-textarea-placeholder",
+      "default": "var(--ui-color-text-muted)"
+    },
+    {
+      "name": "--ui-textarea-min-height-sm",
+      "default": "calc(#{t.$row} * 3"
+    },
+    {
+      "name": "--ui-textarea-font-size-sm",
+      "default": "var(--ui-font-size-xs)"
+    },
+    {
+      "name": "--ui-textarea-min-height-lg",
+      "default": "calc(#{t.$row} * 6"
+    },
+    {
+      "name": "--ui-textarea-padding-x-lg",
+      "default": "var(--ui-space-2)"
+    },
+    {
+      "name": "--ui-textarea-padding-y-lg",
+      "default": "var(--ui-space-2)"
+    },
+    {
+      "name": "--ui-textarea-font-size-lg",
+      "default": "var(--ui-font-size-md)"
+    },
+    {
+      "name": "--ui-textarea-filled-bg",
+      "default": "var(--ui-color-bg-muted)"
+    },
+    {
+      "name": "--ui-textarea-error-border",
+      "default": "var(--ui-color-danger)"
+    },
+    {
+      "name": "--ui-textarea-success-border",
+      "default": "var(--ui-color-success)"
+    }
+  ]
+}

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

@@ -0,0 +1,191 @@
+{
+  "id": "textarea",
+  "type": "component",
+  "title": "Textarea",
+  "description": "Multi-line text input for longer content like comments or descriptions.",
+  "api": "./textarea.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<textarea class=\"ui-textarea\" placeholder=\"Enter your message...\"></textarea>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "textarea",
+              "class": "ui-textarea ui-textarea--sm",
+              "attrs": { "placeholder": "Small (3 rows)" }
+            },
+            {
+              "tag": "textarea",
+              "class": "ui-textarea",
+              "attrs": { "placeholder": "Default (4 rows)" }
+            },
+            {
+              "tag": "textarea",
+              "class": "ui-textarea ui-textarea--lg",
+              "attrs": { "placeholder": "Large (6 rows)" }
+            }
+          ],
+          "code": "<textarea class=\"ui-textarea ui-textarea--sm\"></textarea>\n<textarea class=\"ui-textarea\"></textarea>\n<textarea class=\"ui-textarea ui-textarea--lg\"></textarea>"
+        }
+      ]
+    },
+    {
+      "title": "Variants",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "textarea",
+              "class": "ui-textarea",
+              "attrs": { "placeholder": "Outline (default)" }
+            },
+            {
+              "tag": "textarea",
+              "class": "ui-textarea ui-textarea--filled",
+              "attrs": { "placeholder": "Filled" }
+            },
+            {
+              "tag": "textarea",
+              "class": "ui-textarea ui-textarea--ghost",
+              "attrs": { "placeholder": "Ghost" }
+            }
+          ],
+          "code": "<textarea class=\"ui-textarea\"></textarea>\n<textarea class=\"ui-textarea ui-textarea--filled\"></textarea>\n<textarea class=\"ui-textarea ui-textarea--ghost\"></textarea>"
+        }
+      ]
+    },
+    {
+      "title": "States",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "textarea",
+              "class": "ui-textarea ui-textarea--error",
+              "text": "Invalid content"
+            },
+            {
+              "tag": "textarea",
+              "class": "ui-textarea ui-textarea--success",
+              "text": "Valid content"
+            },
+            {
+              "tag": "textarea",
+              "class": "ui-textarea",
+              "attrs": { "disabled": "", "placeholder": "Disabled" }
+            },
+            {
+              "tag": "textarea",
+              "class": "ui-textarea",
+              "attrs": { "readonly": "" },
+              "text": "Read only content"
+            }
+          ],
+          "code": "<textarea class=\"ui-textarea ui-textarea--error\">Invalid</textarea>\n<textarea class=\"ui-textarea ui-textarea--success\">Valid</textarea>\n<textarea class=\"ui-textarea\" disabled></textarea>\n<textarea class=\"ui-textarea\" readonly>Read only</textarea>"
+        }
+      ]
+    },
+    {
+      "title": "Resize Options",
+      "description": "Control how users can resize the textarea.",
+      "api": "./textarea.api.json",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "textarea",
+              "class": "ui-textarea",
+              "attrs": { "placeholder": "Vertical resize (default)" }
+            },
+            {
+              "tag": "textarea",
+              "class": "ui-textarea ui-textarea--resize-none",
+              "attrs": { "placeholder": "No resize" }
+            },
+            {
+              "tag": "textarea",
+              "class": "ui-textarea ui-textarea--resize-both",
+              "attrs": { "placeholder": "Resize both directions" }
+            }
+          ],
+          "code": "<textarea class=\"ui-textarea\">Vertical (default)</textarea>\n<textarea class=\"ui-textarea ui-textarea--resize-none\">No resize</textarea>\n<textarea class=\"ui-textarea ui-textarea--resize-both\">Both directions</textarea>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-textarea-min-height",
+      "default": "calc(var(--row) * 4)",
+      "description": "Default minimum height"
+    },
+    {
+      "token": "--ui-textarea-min-height-sm",
+      "default": "calc(var(--row) * 3)",
+      "description": "Small minimum height"
+    },
+    {
+      "token": "--ui-textarea-min-height-lg",
+      "default": "calc(var(--row) * 6)",
+      "description": "Large minimum height"
+    },
+    {
+      "token": "--ui-textarea-padding-x",
+      "default": "var(--ui-space-1)",
+      "description": "Horizontal padding"
+    },
+    {
+      "token": "--ui-textarea-padding-y",
+      "default": "var(--ui-space-1)",
+      "description": "Vertical padding"
+    },
+    {
+      "token": "--ui-textarea-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
+    },
+    {
+      "token": "--ui-textarea-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius"
+    },
+    {
+      "token": "--ui-textarea-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "token": "--ui-textarea-border-color",
+      "default": "var(--ui-color-border-strong)",
+      "description": "Border color"
+    },
+    {
+      "token": "--ui-textarea-border-color-focus",
+      "default": "var(--ui-color-primary)",
+      "description": "Focus border color"
+    },
+    {
+      "token": "--ui-textarea-text",
+      "default": "var(--ui-color-text)",
+      "description": "Text color"
+    },
+    {
+      "token": "--ui-textarea-placeholder",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Placeholder color"
+    }
+  ]
+}

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