@teseor/css 1.2.3 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teseor/css",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "CSS library - reset, primitives, components, utilities",
   "license": "MIT",
   "author": "letanure",
@@ -22,13 +22,11 @@
   "main": "dist/index.css",
   "exports": {
     ".": "./dist/index.css",
-    "./fonts/*": "./src/fonts/*",
     "./dist/*": "./dist/*"
   },
   "files": [
     "dist",
-    "src",
-    "fonts"
+    "src"
   ],
   "scripts": {
     "build": "pnpm --filter @teseor/source sync:components && sass src/index.scss dist/index.css --style=compressed",

package/src/00-config/tokens/_variables.scss

@@ -39,9 +39,9 @@ $sizes: (
   @return map.get($sizes, $name);
 }
 
-// Typography - Font families
-$font-sans: "Noto Sans", system-ui, -apple-system, sans-serif;
-$font-mono: "Noto Sans Mono", ui-monospace, "Cascadia Code", monospace;
+// Typography - Font families (system stack, consumers override via CSS tokens)
+$font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
+$font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;
 
 // Typography - Font sizes (1.2 modular scale)
 $font-size-xs: 0.75rem; // 12px

package/src/00-config/tokens/typography/index.scss

@@ -1,7 +1,7 @@
 :root {
-  // Font families
-  --ui-font-sans: "Noto Sans", system-ui, -apple-system, sans-serif;
-  --ui-font-mono: "Noto Sans Mono", ui-monospace, "Cascadia Code", monospace;
+  // Font families — system font stack, override with custom fonts via these tokens
+  --ui-font-sans: system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
+  --ui-font-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;
 
   // ==========================================================================
   // PRIMITIVE TOKENS - Font Size Scale

package/src/03-layout/aspect-ratio/aspect-ratio.api.json

@@ -0,0 +1,16 @@
+{
+  "name": "aspect-ratio",
+  "element": "div",
+  "modifiers": {
+    "ratio": {
+      "values": ["square", "video", "photo", "wide", "portrait"]
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-aspect-ratio",
+      "description": "Custom aspect ratio",
+      "default": "1 / 1"
+    }
+  ]
+}

package/src/03-layout/aspect-ratio/aspect-ratio.docs.json

@@ -0,0 +1,193 @@
+{
+  "id": "aspect-ratio",
+  "type": "primitive",
+  "title": "Aspect Ratio",
+  "description": "Constrains a container to a specific aspect ratio. Media children fill the container automatically.",
+  "api": "aspect-ratio.api.json",
+  "sections": [
+    {
+      "title": "Presets",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-cluster ui-cluster--md",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-aspect-ratio ui-aspect-ratio--square",
+                  "style": {
+                    "inline-size": "160px",
+                    "background": "var(--ui-color-bg-muted)"
+                  },
+                  "children": [
+                    {
+                      "tag": "span",
+                      "text": "square",
+                      "style": {
+                        "padding": "var(--ui-space-2)"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-aspect-ratio ui-aspect-ratio--video",
+                  "style": {
+                    "inline-size": "160px",
+                    "background": "var(--ui-color-bg-muted)"
+                  },
+                  "children": [
+                    {
+                      "tag": "span",
+                      "text": "video",
+                      "style": {
+                        "padding": "var(--ui-space-2)"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-aspect-ratio ui-aspect-ratio--photo",
+                  "style": {
+                    "inline-size": "160px",
+                    "background": "var(--ui-color-bg-muted)"
+                  },
+                  "children": [
+                    {
+                      "tag": "span",
+                      "text": "photo",
+                      "style": {
+                        "padding": "var(--ui-space-2)"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-aspect-ratio ui-aspect-ratio--wide",
+                  "style": {
+                    "inline-size": "160px",
+                    "background": "var(--ui-color-bg-muted)"
+                  },
+                  "children": [
+                    {
+                      "tag": "span",
+                      "text": "wide",
+                      "style": {
+                        "padding": "var(--ui-space-2)"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-aspect-ratio ui-aspect-ratio--portrait",
+                  "style": {
+                    "inline-size": "160px",
+                    "background": "var(--ui-color-bg-muted)"
+                  },
+                  "children": [
+                    {
+                      "tag": "span",
+                      "text": "portrait",
+                      "style": {
+                        "padding": "var(--ui-space-2)"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "With Media",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-cluster ui-cluster--md",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-aspect-ratio ui-aspect-ratio--video",
+                  "style": {
+                    "inline-size": "240px"
+                  },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "text": "img (video)",
+                      "style": {
+                        "inline-size": "100%",
+                        "block-size": "100%",
+                        "background": "var(--ui-color-primary)",
+                        "color": "var(--ui-color-on-primary)",
+                        "display": "grid",
+                        "place-items": "center"
+                      }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-aspect-ratio ui-aspect-ratio--square",
+                  "style": {
+                    "inline-size": "240px"
+                  },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "text": "img (square)",
+                      "style": {
+                        "inline-size": "100%",
+                        "block-size": "100%",
+                        "background": "var(--ui-color-primary)",
+                        "color": "var(--ui-color-on-primary)",
+                        "display": "grid",
+                        "place-items": "center"
+                      }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Custom Ratio",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-aspect-ratio",
+              "style": {
+                "--ui-aspect-ratio": "2.35 / 1",
+                "inline-size": "320px",
+                "background": "var(--ui-color-bg-muted)"
+              },
+              "children": [
+                {
+                  "tag": "span",
+                  "text": "2.35:1 (cinemascope)",
+                  "style": {
+                    "padding": "var(--ui-space-2)"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/src/03-layout/aspect-ratio/aspect-ratio.visual.spec.ts

@@ -0,0 +1,14 @@
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
+
+const DOCS_PATH = resolve(__dirname, 'aspect-ratio.docs.json');
+
+test.describe('aspect-ratio visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    // skip validateGridRhythm: aspect-ratio controls proportions, not fixed heights
+    await saveForLostPixel(page, 'aspect-ratio');
+    await expect(page.locator('body')).toHaveScreenshot('aspect-ratio.visual.png');
+  });
+});

package/src/03-layout/aspect-ratio/index.scss

@@ -0,0 +1,23 @@
+@layer primitives {
+  .aspect-ratio {
+    aspect-ratio: var(--aspect-ratio, 1 / 1);
+
+    overflow: hidden;
+  }
+
+  // Media children fill the container
+  .aspect-ratio > img,
+  .aspect-ratio > video,
+  .aspect-ratio > iframe {
+    block-size: 100%;
+    inline-size: 100%;
+    object-fit: cover;
+  }
+
+  // Preset ratios — functional names, not math
+  .aspect-ratio--square { --aspect-ratio: 1 / 1; }
+  .aspect-ratio--video { --aspect-ratio: 16 / 9; }
+  .aspect-ratio--photo { --aspect-ratio: 4 / 3; }
+  .aspect-ratio--wide { --aspect-ratio: 21 / 9; }
+  .aspect-ratio--portrait { --aspect-ratio: 3 / 4; }
+}

package/src/03-layout/index.scss

@@ -9,3 +9,4 @@
 @forward './sidebar-nav';
 @forward './main';
 @forward './container';
+@forward './aspect-ratio';

package/src/04-components/actions/button-group/button-group.visual.spec.ts

@@ -7,8 +7,7 @@ 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);
-    // TODO: fix grid rhythm - negative margins cause off-grid heights (#178)
-    // await validateGridRhythm(page, 'button-group');
+    await validateGridRhythm(page, 'button-group');
     await saveForLostPixel(page, 'button-group');
     await expect(page.locator('body')).toHaveScreenshot('button-group.visual.png');
   });

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

@@ -59,7 +59,9 @@
   }
 
   .button-group--vertical > .button + .button {
-    margin-block-start: calc(#{t.$unit} / -8);
+    // Remove top border instead of negative margin to stay on 8px grid
+    border-block-start-width: 0;
+
     margin-inline-start: 0;
   }
 

package/src/04-components/data-display/stat/index.scss

@@ -0,0 +1,47 @@
+@use '../../../00-config/tokens/variables' as t;
+
+@layer components.tokens {
+  .stat {
+    --_gap: var(--ui-stat-gap, var(--ui-space-1, #{t.$space-1}));
+  }
+
+  .stat__value {
+    --_font-size: var(--ui-stat-value-font-size, var(--ui-font-size-3xl, #{t.$font-size-3xl}));
+    --_font-weight: var(--ui-stat-value-font-weight, var(--ui-weight-bold, #{t.$weight-bold}));
+    --_line-height: var(--ui-stat-value-line-height, var(--ui-leading-3xl, #{t.$leading-3xl}));
+    --_color: var(--ui-stat-value-color, var(--ui-color-text, #{t.$color-text}));
+  }
+
+  .stat__label {
+    --_font-size: var(--ui-stat-label-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_color: var(--ui-stat-label-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_line-height: var(--ui-stat-label-line-height, var(--ui-leading-sm, #{t.$leading-sm}));
+  }
+
+  .stat--sm .stat__value {
+    --_font-size: var(--ui-font-size-xl, #{t.$font-size-xl});
+    --_line-height: var(--ui-leading-xl, #{t.$leading-xl});
+  }
+}
+
+@layer components.styles {
+  .stat {
+    display: flex;
+    flex-direction: column;
+    gap: var(--_gap);
+  }
+
+  .stat__value {
+    font-size: var(--_font-size);
+    font-weight: var(--_font-weight);
+    line-height: var(--_line-height);
+    letter-spacing: var(--ui-tracking-display, #{t.$tracking-display});
+    color: var(--_color);
+  }
+
+  .stat__label {
+    font-size: var(--_font-size);
+    line-height: var(--_line-height);
+    color: var(--_color);
+  }
+}

package/src/04-components/data-display/stat/stat.api.json

@@ -0,0 +1,18 @@
+{
+  "name": "stat",
+  "element": "div",
+  "modifiers": {
+    "size": {
+      "values": ["sm"]
+    }
+  },
+  "subElements": ["value", "label"],
+  "cssVars": [
+    { "name": "--ui-stat-gap", "default": "var(--ui-space-1)" },
+    { "name": "--ui-stat-value-font-size", "default": "var(--ui-font-size-3xl)" },
+    { "name": "--ui-stat-value-font-weight", "default": "var(--ui-weight-bold)" },
+    { "name": "--ui-stat-value-color", "default": "var(--ui-color-text)" },
+    { "name": "--ui-stat-label-font-size", "default": "var(--ui-font-size-sm)" },
+    { "name": "--ui-stat-label-color", "default": "var(--ui-color-text-muted)" }
+  ]
+}

package/src/04-components/data-display/stat/stat.docs.json

@@ -0,0 +1,114 @@
+{
+  "id": "stat",
+  "type": "component",
+  "title": "Stat",
+  "description": "Statistic display with prominent value and descriptive label.",
+  "api": "./stat.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-stat",
+              "children": [
+                { "tag": "span", "class": "ui-stat__value", "text": "2,847" },
+                { "tag": "span", "class": "ui-stat__label", "text": "Total users" }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Multiple stats",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-cluster ui-cluster--lg",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-stat",
+                  "children": [
+                    { "tag": "span", "class": "ui-stat__value", "text": "12.5k" },
+                    { "tag": "span", "class": "ui-stat__label", "text": "Revenue" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-stat",
+                  "children": [
+                    { "tag": "span", "class": "ui-stat__value", "text": "573" },
+                    { "tag": "span", "class": "ui-stat__label", "text": "Orders" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-stat",
+                  "children": [
+                    { "tag": "span", "class": "ui-stat__value", "text": "98%" },
+                    { "tag": "span", "class": "ui-stat__label", "text": "Satisfaction" }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Small",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-stat ui-stat--sm",
+              "children": [
+                { "tag": "span", "class": "ui-stat__value", "text": "42" },
+                { "tag": "span", "class": "ui-stat__label", "text": "Active now" }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-stat-gap",
+      "default": "var(--ui-space-1)",
+      "description": "Gap between value and label"
+    },
+    {
+      "token": "--ui-stat-value-font-size",
+      "default": "var(--ui-font-size-3xl)",
+      "description": "Value font size"
+    },
+    {
+      "token": "--ui-stat-value-font-weight",
+      "default": "var(--ui-weight-bold)",
+      "description": "Value font weight"
+    },
+    {
+      "token": "--ui-stat-value-color",
+      "default": "var(--ui-color-text)",
+      "description": "Value text color"
+    },
+    {
+      "token": "--ui-stat-label-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Label font size"
+    },
+    {
+      "token": "--ui-stat-label-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Label text color"
+    }
+  ]
+}

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

package/src/04-components/index.scss

@@ -7,6 +7,7 @@
 @forward './data-display/icon/index';
 @forward './data-display/status/index';
 @forward './data-display/table/index';
+@forward './data-display/stat/index';
 @forward './data-display/tag/index';
 @forward './disclosure/accordion/index';
 @forward './disclosure/disclosure/index';
@@ -26,6 +27,7 @@
 @forward './forms/textarea/index';
 @forward './forms/toggle/index';
 @forward './layout/divider/index';
+@forward './layout/spacer/index';
 @forward './navigation/breadcrumb/index';
 @forward './navigation/menu/index';
 @forward './navigation/nav/index';
@@ -37,6 +39,9 @@
 @forward './overlays/overlay/index';
 @forward './overlays/popover/index';
 @forward './overlays/tooltip/index';
+@forward './typography/blockquote/index';
 @forward './typography/code/index';
 @forward './typography/heading/index';
+@forward './typography/kbd/index';
 @forward './typography/link/index';
+@forward './typography/mark/index';

package/src/04-components/layout/spacer/index.scss

@@ -0,0 +1,11 @@
+@layer components.tokens {
+  .spacer {
+    --_size: var(--ui-spacer-size, 1);
+  }
+}
+
+@layer components.styles {
+  .spacer {
+    flex: var(--_size);
+  }
+}

package/src/04-components/layout/spacer/spacer.api.json

@@ -0,0 +1,6 @@
+{
+  "name": "spacer",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [{ "name": "--ui-spacer-size", "default": "1" }]
+}