@teseor/css 1.0.0

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

package/src/04-components/button-group/index.scss

@@ -0,0 +1,78 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Button Group - container for grouped buttons
+// Joins buttons together with shared borders
+
+@layer components.tokens {
+  .button-group {
+    --_radius: var(--ui-button-group-radius, var(--ui-radius-md, calc(#{t.$unit} / 2)));
+  }
+}
+
+@layer components.styles {
+  .button-group {
+    display: inline-flex;
+  }
+
+  // Remove intermediate borders and radii
+  .button-group > .button:not(:first-child, :last-child) {
+    border-radius: 0;
+  }
+
+  .button-group > .button:first-child:not(:last-child) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .button-group > .button:last-child:not(:first-child) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  // Prevent double borders
+  .button-group > .button + .button {
+    margin-inline-start: calc(#{t.$unit} / -8);
+  }
+
+  // Ensure focused button is on top
+  .button-group > .button:focus-visible {
+    z-index: 1;
+  }
+
+  // Vertical orientation
+  .button-group--vertical {
+    flex-direction: column;
+  }
+
+  .button-group--vertical > .button:not(:first-child, :last-child) {
+    border-radius: 0;
+  }
+
+  .button-group--vertical > .button:first-child:not(:last-child) {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .button-group--vertical > .button:last-child:not(:first-child) {
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+
+  .button-group--vertical > .button + .button {
+    margin-block-start: calc(#{t.$unit} / -8);
+    margin-inline-start: 0;
+  }
+
+  // Attached variant (no gap)
+  .button-group--attached > .button {
+    border-inline-end-width: 0;
+  }
+
+  .button-group--attached > .button:last-child {
+    border-inline-end-width: 1px;
+  }
+
+  .button-group--attached > .button + .button {
+    margin-inline-start: 0;
+  }
+}

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

@@ -0,0 +1,53 @@
+{
+  "name": "card",
+  "element": "div",
+  "modifiers": {
+    "variant": {
+      "values": ["subtle", "muted"]
+    },
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "flush": {
+      "type": "boolean"
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-card-padding",
+      "default": "var(--ui-space-4)"
+    },
+    {
+      "name": "--ui-card-border-width",
+      "default": "var(--ui-border-width-sm)"
+    },
+    {
+      "name": "--ui-card-bg",
+      "default": "var(--ui-color-bg)"
+    },
+    {
+      "name": "--ui-card-border-color",
+      "default": "var(--ui-color-border)"
+    },
+    {
+      "name": "--ui-card-radius",
+      "default": "var(--ui-radius-md)"
+    },
+    {
+      "name": "--ui-card-bg-subtle",
+      "default": "var(--ui-color-bg-subtle)"
+    },
+    {
+      "name": "--ui-card-bg-muted",
+      "default": "var(--ui-color-bg-muted)"
+    },
+    {
+      "name": "--ui-card-padding-sm",
+      "default": "var(--ui-space-2)"
+    },
+    {
+      "name": "--ui-card-padding-lg",
+      "default": "var(--ui-space-6)"
+    }
+  ]
+}

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

@@ -0,0 +1,103 @@
+{
+  "api": "./card.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            { "tag": "div", "class": "ui-card", "text": "Default card with padding and border" }
+          ],
+          "code": "<div class=\"ui-card\">Content</div>"
+        }
+      ]
+    },
+    {
+      "title": "Background Variants",
+      "data": {
+        "variants": [
+          { "mod": "", "label": "Default background" },
+          { "mod": "subtle", "label": "Subtle background" },
+          { "mod": "muted", "label": "Muted background" }
+        ]
+      },
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            { "tag": "div", "class": "ui-card", "text": "Default background" },
+            { "tag": "div", "class": "ui-card ui-card--subtle", "text": "Subtle background" },
+            { "tag": "div", "class": "ui-card ui-card--muted", "text": "Muted background" }
+          ],
+          "code": "{% for v in variants %}<div class=\"ui-card{% if v.mod %} ui-card--{{ v.mod }}{% endif %}\">{{ v.label }}</div>\n{% endfor %}"
+        }
+      ]
+    },
+    {
+      "title": "Padding Variants",
+      "data": {
+        "sizes": [
+          { "mod": "sm", "label": "Small padding" },
+          { "mod": "", "label": "Default padding" },
+          { "mod": "lg", "label": "Large padding" },
+          { "mod": "flush", "label": "No padding (flush)" }
+        ]
+      },
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            { "tag": "div", "class": "ui-card ui-card--sm", "text": "Small padding" },
+            { "tag": "div", "class": "ui-card", "text": "Default padding" },
+            { "tag": "div", "class": "ui-card ui-card--lg", "text": "Large padding" },
+            { "tag": "div", "class": "ui-card ui-card--flush", "text": "No padding (flush)" }
+          ],
+          "code": "{% for s in sizes %}<div class=\"ui-card{% if s.mod %} ui-card--{{ s.mod }}{% endif %}\">{{ s.label }}</div>\n{% endfor %}"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-card-padding",
+      "default": "var(--ui-space-4)",
+      "description": "Default padding"
+    },
+    {
+      "token": "--ui-card-padding-sm",
+      "default": "var(--ui-space-2)",
+      "description": "Small padding"
+    },
+    {
+      "token": "--ui-card-padding-lg",
+      "default": "var(--ui-space-6)",
+      "description": "Large padding"
+    },
+    {
+      "token": "--ui-card-border-width",
+      "default": "var(--ui-border-width-sm)",
+      "description": "Border width"
+    },
+    {
+      "token": "--ui-card-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    { "token": "--ui-card-bg", "default": "var(--ui-color-bg)", "description": "Background color" },
+    {
+      "token": "--ui-card-bg-subtle",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Subtle background"
+    },
+    {
+      "token": "--ui-card-bg-muted",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Muted background"
+    },
+    {
+      "token": "--ui-card-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius"
+    }
+  ]
+}

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

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

@@ -0,0 +1,41 @@
+@use '../../00-config/mixins/border' as *;
+
+// @component card
+// @element div
+
+@layer components.tokens {
+  .card {
+    --_padding: var(--ui-card-padding, var(--ui-space-4));
+    --_border-width: var(--ui-card-border-width, var(--ui-border-width-sm));
+    --_bg: var(--ui-card-bg, var(--ui-color-bg));
+    --_border-color: var(--ui-card-border-color, var(--ui-color-border));
+    --_radius: var(--ui-card-radius, var(--ui-radius-md));
+  }
+
+  // @modifier variant
+  .card--subtle { --_bg: var(--ui-card-bg-subtle, var(--ui-color-bg-subtle)); }
+  .card--muted { --_bg: var(--ui-card-bg-muted, var(--ui-color-bg-muted)); }
+
+  // @modifier size
+  .card--sm { --_padding: var(--ui-card-padding-sm, var(--ui-space-2)); }
+  .card--lg { --_padding: var(--ui-card-padding-lg, var(--ui-space-6)); }
+
+  // @modifier boolean flush
+  .card--flush {
+    --_padding: 0;
+    --_border-width: 0;
+  }
+}
+
+// Implementation
+@layer components.styles {
+  .card {
+    @include border(var(--_border-width), var(--_border-color));
+    @include rounded(var(--_radius));
+    @include surface(var(--_bg));
+    // Subtract border from padding to keep total on grid
+    padding: calc(var(--_padding) - var(--_border-width));
+    // Grid-aligned line-height for text content
+    line-height: var(--ui-row-1);
+  }
+}

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

@@ -0,0 +1,50 @@
+{
+  "name": "checkbox",
+  "element": "input",
+  "modifiers": {
+    "size": {
+      "values": ["lg"]
+    },
+    "error": {
+      "type": "boolean"
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-checkbox-size",
+      "default": "calc(#{t.$unit} * 2"
+    },
+    {
+      "name": "--ui-checkbox-radius",
+      "default": "var(--ui-radius-sm)"
+    },
+    {
+      "name": "--ui-checkbox-bg",
+      "default": "var(--ui-color-bg)"
+    },
+    {
+      "name": "--ui-checkbox-bg-checked",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-checkbox-border-color",
+      "default": "var(--ui-color-border-strong)"
+    },
+    {
+      "name": "--ui-checkbox-border-color-focus",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-checkbox-check-color",
+      "default": "var(--ui-color-text-inverse)"
+    },
+    {
+      "name": "--ui-checkbox-size-lg",
+      "default": "calc(#{t.$unit} * 3"
+    },
+    {
+      "name": "--ui-checkbox-error-border",
+      "default": "var(--ui-color-danger)"
+    }
+  ]
+}

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

@@ -0,0 +1,151 @@
+{
+  "id": "checkbox",
+  "type": "component",
+  "title": "Checkbox",
+  "description": "Native checkbox input with custom styling. Supports checked, indeterminate, and disabled states.",
+  "api": "./checkbox.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
+            {
+              "tag": "input",
+              "class": "ui-checkbox",
+              "attrs": { "type": "checkbox", "checked": "" }
+            }
+          ],
+          "code": "<input type=\"checkbox\" class=\"ui-checkbox\">\n<input type=\"checkbox\" class=\"ui-checkbox\" checked>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "input",
+              "class": "ui-checkbox ui-checkbox--sm",
+              "attrs": { "type": "checkbox", "checked": "" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-checkbox",
+              "attrs": { "type": "checkbox", "checked": "" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-checkbox ui-checkbox--lg",
+              "attrs": { "type": "checkbox", "checked": "" }
+            }
+          ],
+          "code": "<input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--sm\" checked>\n<input type=\"checkbox\" class=\"ui-checkbox\" checked>\n<input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--lg\" checked>"
+        }
+      ]
+    },
+    {
+      "title": "States",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            { "tag": "input", "class": "ui-checkbox", "attrs": { "type": "checkbox" } },
+            {
+              "tag": "input",
+              "class": "ui-checkbox",
+              "attrs": { "type": "checkbox", "checked": "" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-checkbox",
+              "attrs": { "type": "checkbox", "disabled": "" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-checkbox",
+              "attrs": { "type": "checkbox", "checked": "", "disabled": "" }
+            }
+          ],
+          "code": "<input type=\"checkbox\" class=\"ui-checkbox\">\n<input type=\"checkbox\" class=\"ui-checkbox\" checked>\n<input type=\"checkbox\" class=\"ui-checkbox\" disabled>\n<input type=\"checkbox\" class=\"ui-checkbox\" checked disabled>"
+        }
+      ]
+    },
+    {
+      "title": "Error State",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "input",
+              "class": "ui-checkbox ui-checkbox--error",
+              "attrs": { "type": "checkbox" }
+            },
+            {
+              "tag": "input",
+              "class": "ui-checkbox ui-checkbox--error",
+              "attrs": { "type": "checkbox", "checked": "" }
+            }
+          ],
+          "code": "<input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--error\">\n<input type=\"checkbox\" class=\"ui-checkbox ui-checkbox--error\" checked>"
+        }
+      ]
+    },
+    {
+      "title": "With Label",
+      "examples": [
+        {
+          "html": "<label class=\"ui-cluster\" style=\"gap: var(--ui-space-1); cursor: pointer;\"><input type=\"checkbox\" class=\"ui-checkbox\"><span>Accept terms and conditions</span></label>",
+          "code": "<label class=\"ui-cluster\">\n  <input type=\"checkbox\" class=\"ui-checkbox\">\n  <span>Accept terms</span>\n</label>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-checkbox-size",
+      "default": "calc(var(--unit) * 2)",
+      "description": "Default size"
+    },
+    {
+      "token": "--ui-checkbox-size-lg",
+      "default": "calc(var(--unit) * 3)",
+      "description": "Large size"
+    },
+    {
+      "token": "--ui-checkbox-radius",
+      "default": "var(--ui-radius-sm)",
+      "description": "Border radius"
+    },
+    {
+      "token": "--ui-checkbox-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background (unchecked)"
+    },
+    {
+      "token": "--ui-checkbox-bg-checked",
+      "default": "var(--ui-color-primary)",
+      "description": "Background (checked)"
+    },
+    {
+      "token": "--ui-checkbox-border-color",
+      "default": "var(--ui-color-border-strong)",
+      "description": "Border color"
+    },
+    {
+      "token": "--ui-checkbox-border-color-focus",
+      "default": "var(--ui-color-primary)",
+      "description": "Focus border color"
+    },
+    {
+      "token": "--ui-checkbox-check-color",
+      "default": "var(--ui-color-text-inverse)",
+      "description": "Checkmark color"
+    }
+  ]
+}

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

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

@@ -0,0 +1,104 @@
+@use '../../00-config/tokens/variables' as t;
+
+// @component checkbox
+// @element input
+
+@layer components.tokens {
+  .checkbox {
+    --_size: var(--ui-checkbox-size, calc(#{t.$unit} * 2));
+    --_radius: var(--ui-checkbox-radius, var(--ui-radius-sm, #{t.$radius-sm}));
+    --_bg: var(--ui-checkbox-bg, var(--ui-color-bg, #{t.$color-bg}));
+    --_bg-checked: var(--ui-checkbox-bg-checked, var(--ui-color-primary, #{t.$color-primary}));
+    --_border-color: var(--ui-checkbox-border-color, var(--ui-color-border-strong, #{t.$color-border-strong}));
+    --_border-color-focus: var(--ui-checkbox-border-color-focus, var(--ui-color-primary, #{t.$color-primary}));
+    --_check-color: var(--ui-checkbox-check-color, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
+  }
+
+  // @modifier size
+  .checkbox--lg {
+    --_size: var(--ui-checkbox-size-lg, calc(#{t.$unit} * 3));
+  }
+
+  // @modifier boolean error
+  .checkbox--error {
+    --_border-color: var(--ui-checkbox-error-border, var(--ui-color-danger, #{t.$color-danger}));
+    --_border-color-focus: var(--ui-checkbox-error-border, var(--ui-color-danger, #{t.$color-danger}));
+  }
+}
+
+@layer components.styles {
+  .checkbox {
+
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+
+    block-size: var(--_size);
+    inline-size: var(--_size);
+    margin: 0;
+
+    vertical-align: middle;
+
+    background: var(--_bg);
+    border: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);
+    border-radius: var(--_radius);
+    cursor: pointer;
+    // Reset native checkbox
+    appearance: none;
+
+    transition:
+      background-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
+      border-color var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease),
+      box-shadow var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+
+    &::before {
+      content: '';
+
+      block-size: 65%;
+      inline-size: 65%;
+
+      background-color: var(--_check-color);
+      opacity: 0;
+      // Checkmark via clip-path
+      clip-path: polygon(20% 55%, 40% 75%, 80% 25%, 85% 30%, 40% 85%, 15% 60%);
+
+      transition: opacity var(--ui-duration-fast, 150ms) var(--ui-ease-default, ease);
+    }
+
+    &:hover:not(:disabled) {
+      border-color: var(--_border-color-focus);
+    }
+
+    &:focus-visible {
+      border-color: var(--_border-color-focus);
+      outline: none;
+      box-shadow: 0 0 0 var(--ui-border-width-md, #{t.$border-width-md}) var(--ui-color-focus, #{t.$color-focus});
+    }
+
+    &:checked {
+      background: var(--_bg-checked);
+      border-color: var(--_bg-checked);
+
+      &::before {
+        opacity: 1;
+      }
+    }
+
+    &:indeterminate {
+      background: var(--_bg-checked);
+      border-color: var(--_bg-checked);
+
+      &::before {
+        opacity: 1;
+        // Horizontal line for indeterminate
+        clip-path: polygon(15% 45%, 85% 45%, 85% 55%, 15% 55%);
+      }
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+{
+  "name": "code",
+  "element": "div",
+  "modifiers": {},
+  "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)"
+    }
+  ]
+}