@teseor/css 1.0.0

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

@@ -0,0 +1,102 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Tooltip - small informational popup
+// Appears on hover/focus to provide additional context
+
+@layer components.tokens {
+  .tooltip {
+    --_bg: var(--ui-tooltip-bg, var(--ui-color-text, #1a1a1a));
+    --_color: var(--ui-tooltip-color, var(--ui-color-bg, white));
+    --_radius: var(--ui-tooltip-radius, var(--ui-radius-sm, calc(#{t.$unit} / 2)));
+    --_padding-x: var(--ui-tooltip-padding-x, calc(#{t.$unit} * 1));
+    --_padding-y: var(--ui-tooltip-padding-y, calc(#{t.$unit} / 2));
+    --_size: var(--ui-tooltip-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_z: var(--ui-tooltip-z, var(--ui-z-tooltip, 500));
+    --_arrow-size: var(--ui-tooltip-arrow-size, calc(#{t.$unit} / 2));
+  }
+}
+
+@layer components.styles {
+  .tooltip {
+    position: absolute;
+    z-index: var(--_z);
+
+    max-inline-size: calc(#{t.$unit} * 25);
+    padding: var(--_padding-y) var(--_padding-x);
+
+    font-size: var(--_size);
+    line-height: calc(#{t.$unit} * 2);
+    text-align: center;
+    white-space: nowrap;
+    color: var(--_color);
+
+    background: var(--_bg);
+    border-radius: var(--_radius);
+  }
+
+  // Arrow pointing down (tooltip above trigger)
+  .tooltip--top::after {
+
+    content: "";
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: 50%;
+
+    border: var(--_arrow-size) solid transparent;
+    border-block-start-color: var(--_bg);
+    transform: translateX(-50%);
+  }
+
+  // Arrow pointing up (tooltip below trigger)
+  .tooltip--bottom::after {
+
+    content: "";
+    position: absolute;
+    inset-block-end: 100%;
+    inset-inline-start: 50%;
+
+    border: var(--_arrow-size) solid transparent;
+    border-block-end-color: var(--_bg);
+    transform: translateX(-50%);
+  }
+
+  // Arrow pointing right (tooltip left of trigger)
+  .tooltip--start::after {
+
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 100%;
+
+    border: var(--_arrow-size) solid transparent;
+    border-inline-start-color: var(--_bg);
+    transform: translateY(-50%);
+  }
+
+  // Arrow pointing left (tooltip right of trigger)
+  .tooltip--end::after {
+
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: 100%;
+
+    border: var(--_arrow-size) solid transparent;
+    border-inline-end-color: var(--_bg);
+    transform: translateY(-50%);
+  }
+
+  // Animation states
+  .tooltip--visible {
+    opacity: 1;
+  }
+
+  .tooltip--hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .tooltip--animate {
+    transition: opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+  }
+}

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

@@ -0,0 +1,39 @@
+{
+  "name": "tooltip",
+  "element": "div",
+  "modifiers": {},
+  "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/tooltip/tooltip.docs.json

@@ -0,0 +1,63 @@
+{
+  "id": "tooltip",
+  "type": "component",
+  "title": "Tooltip",
+  "description": "Small informational popup for additional context. Position via JS.",
+  "api": "./tooltip.api.json",
+  "sections": [
+    {
+      "title": "Positions",
+      "description": "Arrow indicates where tooltip is relative to trigger",
+      "api": "./tooltip.api.json",
+      "examples": [
+        {
+          "html": "<div style=\"display: flex; gap: var(--ui-space-4); padding: var(--ui-space-4);\"><div style=\"position: relative;\"><span class=\"ui-tooltip ui-tooltip--top\" style=\"position: relative;\">Top tooltip</span></div><div style=\"position: relative;\"><span class=\"ui-tooltip ui-tooltip--bottom\" style=\"position: relative;\">Bottom tooltip</span></div></div>",
+          "code": "<span class=\"ui-tooltip ui-tooltip--top\">Top tooltip</span>\n<span class=\"ui-tooltip ui-tooltip--bottom\">Bottom tooltip</span>\n<span class=\"ui-tooltip ui-tooltip--start\">Start tooltip</span>\n<span class=\"ui-tooltip ui-tooltip--end\">End tooltip</span>"
+        }
+      ]
+    },
+    {
+      "title": "With Animation",
+      "examples": [
+        {
+          "html": "<span class=\"ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible\" style=\"position: relative;\">Animated tooltip</span>",
+          "code": "<span class=\"ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible\">\n  Animated tooltip\n</span>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-tooltip-bg",
+      "default": "var(--ui-color-text)",
+      "description": "Background color"
+    },
+    { "token": "--ui-tooltip-color", "default": "var(--ui-color-bg)", "description": "Text color" },
+    {
+      "token": "--ui-tooltip-radius",
+      "default": "var(--ui-radius-sm)",
+      "description": "Border radius"
+    },
+    {
+      "token": "--ui-tooltip-padding-x",
+      "default": "calc(var(--unit) * 1)",
+      "description": "Horizontal padding"
+    },
+    {
+      "token": "--ui-tooltip-padding-y",
+      "default": "calc(var(--unit) / 2)",
+      "description": "Vertical padding"
+    },
+    {
+      "token": "--ui-tooltip-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
+    },
+    {
+      "token": "--ui-tooltip-arrow-size",
+      "default": "calc(var(--unit) / 2)",
+      "description": "Arrow size"
+    },
+    { "token": "--ui-tooltip-z", "default": "var(--ui-z-tooltip)", "description": "Z-index" }
+  ]
+}

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

package/src/05-utilities/border/index.scss

@@ -0,0 +1,21 @@
+@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/05-utilities/display/display.api.json

@@ -0,0 +1,6 @@
+{
+  "name": "display",
+  "type": "utility",
+  "utilities": ["flex", "justify-between", "items-center", "gap-2", "p-2"],
+  "cssVars": []
+}

package/src/05-utilities/display/display.docs.json

@@ -0,0 +1,28 @@
+{
+  "id": "display-utils",
+  "type": "utility",
+  "title": "Display",
+  "description": "Flexbox and display utilities.",
+  "api": "display.api.json",
+  "sections": [
+    {
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-flex ui-justify-between ui-items-center ui-gap-2 ui-p-2",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "children": [
+                { "tag": "span", "text": "Start" },
+                { "tag": "span", "text": "Center (items-center)" },
+                { "tag": "span", "text": "End" }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-flex ui-justify-between ui-items-center ui-gap-2\">\n  <span>Start</span>\n  <span>Center</span>\n  <span>End</span>\n</div>"
+        }
+      ]
+    }
+  ]
+}

package/src/05-utilities/display/display.scss

@@ -0,0 +1,195 @@
+/* Display and visibility utilities */
+
+/* Uses logical properties for international/RTL support */
+@layer utilities {
+  /* Display */
+  .block {
+    display: block;
+  }
+
+  .inline-block {
+    display: inline-block;
+  }
+
+  .inline {
+    display: inline;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .inline-flex {
+    display: inline-flex;
+  }
+
+  .grid {
+    display: grid;
+  }
+
+  .inline-grid {
+    display: inline-grid;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  /* Flexbox direction */
+  .flex-row {
+    flex-direction: row;
+  }
+
+  .flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+
+  .flex-col {
+    flex-direction: column;
+  }
+
+  .flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+
+  /* Flexbox wrap */
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  .flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+
+  /* Flexbox grow/shrink */
+  .flex-1 {
+    flex: 1 1 0%;
+  }
+
+  .flex-auto {
+    flex: 1 1 auto;
+  }
+
+  .flex-initial {
+    flex: 0 1 auto;
+  }
+
+  .flex-none {
+    flex: none;
+  }
+
+  .grow {
+    flex-grow: 1;
+  }
+
+  .grow-0 {
+    flex-grow: 0;
+  }
+
+  .shrink {
+    flex-shrink: 1;
+  }
+
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+
+  /* Justify content */
+  .justify-start {
+    justify-content: flex-start;
+  }
+
+  .justify-end {
+    justify-content: flex-end;
+  }
+
+  .justify-center {
+    justify-content: center;
+  }
+
+  .justify-between {
+    justify-content: space-between;
+  }
+
+  .justify-around {
+    justify-content: space-around;
+  }
+
+  .justify-evenly {
+    justify-content: space-evenly;
+  }
+
+  /* Align items */
+  .items-start {
+    align-items: flex-start;
+  }
+
+  .items-end {
+    align-items: flex-end;
+  }
+
+  .items-center {
+    align-items: center;
+  }
+
+  .items-baseline {
+    align-items: baseline;
+  }
+
+  .items-stretch {
+    align-items: stretch;
+  }
+
+  /* Align self */
+  .self-auto {
+    align-self: auto;
+  }
+
+  .self-start {
+    align-self: flex-start;
+  }
+
+  .self-end {
+    align-self: flex-end;
+  }
+
+  .self-center {
+    align-self: center;
+  }
+
+  .self-stretch {
+    align-self: stretch;
+  }
+
+  /* Visibility */
+  .visible {
+    visibility: visible;
+  }
+
+  .invisible {
+    visibility: hidden;
+  }
+
+  /* Screen reader only - visually hidden but accessible */
+  .sr-only {
+    position: absolute;
+
+    /* stylelint-disable-next-line unit-disallowed-list -- intentional 1px for a11y */
+    block-size: 1px;
+    /* stylelint-disable-next-line unit-disallowed-list -- intentional 1px for a11y */
+    inline-size: 1px;
+    padding: 0;
+    /* stylelint-disable-next-line unit-disallowed-list -- intentional -1px for a11y */
+    margin: -1px;
+    overflow: hidden;
+
+    white-space: nowrap;
+
+    border-width: 0;
+    clip-path: inset(50%);
+  }
+}

package/src/05-utilities/index.scss

@@ -0,0 +1,6 @@
+@forward "./spacing/spacing";
+@forward "./display/display";
+@forward "./text/text";
+@forward "./border/index";
+@forward "./visually-hidden/index";
+@forward "./view-transition/index";

package/src/05-utilities/spacing/spacing.api.json

@@ -0,0 +1,6 @@
+{
+  "name": "spacing",
+  "type": "utility",
+  "utilities": ["p-1", "p-2", "p-4", "px-4", "py-2"],
+  "cssVars": []
+}

package/src/05-utilities/spacing/spacing.docs.json

@@ -0,0 +1,43 @@
+{
+  "id": "spacing-utils",
+  "type": "utility",
+  "title": "Spacing",
+  "description": "Margin and padding utilities aligned to 8px grid.",
+  "api": "spacing.api.json",
+  "sections": [
+    {
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-p-1",
+              "text": "p-1 (8px padding)",
+              "style": { "background": "var(--ui-color-bg-muted)" }
+            },
+            {
+              "tag": "div",
+              "class": "ui-p-2",
+              "text": "p-2 (16px padding)",
+              "style": { "background": "var(--ui-color-bg-muted)" }
+            },
+            {
+              "tag": "div",
+              "class": "ui-p-4",
+              "text": "p-4 (32px padding)",
+              "style": { "background": "var(--ui-color-bg-muted)" }
+            },
+            {
+              "tag": "div",
+              "class": "ui-px-4 ui-py-2",
+              "text": "px-4 py-2 (horizontal 32px, vertical 16px)",
+              "style": { "background": "var(--ui-color-bg-muted)" }
+            }
+          ],
+          "code": "<div class=\"ui-p-2\">...</div>\n<div class=\"ui-px-4 ui-py-2\">...</div>\n<div class=\"ui-mt-4 ui-mb-2\">...</div>"
+        }
+      ]
+    }
+  ]
+}