@teseor/css 1.0.0

package/fonts/.gitkeep

@@ -0,0 +1,9 @@
+# Place WOFF2 font files here for self-hosted option
+# Download from: https://fonts.google.com/noto/specimen/Noto+Sans
+#
+# Required files:
+# - NotoSans-Regular.woff2
+# - NotoSans-Medium.woff2
+# - NotoSans-Bold.woff2
+# - NotoSansMono-Regular.woff2
+# - NotoSansMono-Medium.woff2

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@teseor/css",
+  "version": "1.0.0",
+  "description": "CSS library - reset, primitives, components, utilities",
+  "license": "MIT",
+  "author": "letanure",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/teseor/teseor.git",
+    "directory": "packages/css"
+  },
+  "homepage": "https://teseor.com",
+  "bugs": "https://github.com/teseor/teseor/issues",
+  "keywords": [
+    "css",
+    "components",
+    "design-system",
+    "ui",
+    "tokens",
+    "utilities"
+  ],
+  "main": "dist/index.css",
+  "exports": {
+    ".": "./dist/index.css",
+    "./fonts/*": "./src/fonts/*",
+    "./dist/*": "./dist/*"
+  },
+  "files": [
+    "dist",
+    "src",
+    "fonts"
+  ],
+  "scripts": {
+    "build": "pnpm --filter @teseor/source sync:components && sass src/index.scss dist/index.css --style=compressed",
+    "test:grid": "playwright test --config=playwright.config.ts src/testing/grid-alignment.spec.ts",
+    "test:visual": "playwright test --config=playwright.config.ts --grep visual"
+  }
+}

package/src/00-config/layers/layers.scss

@@ -0,0 +1 @@
+@layer reset, tokens, base, primitives, components.styles, components.tokens, utilities, themes;

package/src/00-config/mixins/_border.scss

@@ -0,0 +1,13 @@
+// Border and surface mixins - shared by components and utilities
+
+@mixin border($width: var(--ui-border-width-sm), $color: var(--ui-color-border)) {
+  border: $width solid $color;
+}
+
+@mixin rounded($size: var(--ui-radius-md)) {
+  border-radius: $size;
+}
+
+@mixin surface($bg: var(--ui-color-bg)) {
+  background: $bg;
+}

package/src/00-config/mixins/index.scss

@@ -0,0 +1 @@
+@forward './border';

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

@@ -0,0 +1,120 @@
+// SCSS Variables - Source of truth for fallback values
+// These are the computed values that CSS custom properties resolve to.
+// Import this file in components that need standalone fallbacks.
+
+// Grid - all derived from $unit
+$unit: 0.5rem; // 8px
+$row: $unit * 2; // 16px
+$row-1: $row;
+$row-2: $row * 2; // 32px
+$row-3: $row * 3; // 48px
+$row-4: $row * 4;
+$row-5: $row * 5;
+$row-6: $row * 6;
+
+// Spacing - derived from $unit
+$space-px: $unit * 0.125; // 1px - hairline
+$space-quarter: $unit * 0.25; // 2px - micro spacing
+$space-0: $unit * 0.5; // 4px
+$space-1: $unit; // 8px
+$space-2: $unit * 2; // 16px
+$space-3: $unit * 3; // 24px
+$space-4: $unit * 4;
+$space-6: $unit * 6;
+$space-8: $unit * 8;
+
+// 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 sizes (1.2 modular scale)
+$font-size-xs: 0.75rem; // 12px
+$font-size-sm: 0.875rem; // 14px
+$font-size-md: 1rem; // 16px (base)
+$font-size-lg: 1.25rem; // 20px
+$font-size-xl: 1.5rem; // 24px
+$font-size-2xl: 1.75rem; // 28px
+$font-size-3xl: 2rem; // 32px
+$font-size-4xl: 2.5rem; // 40px
+
+// Typography - Tight line heights (for compact UI elements)
+$leading-tight-xs: $row;
+$leading-tight-sm: $row;
+$leading-tight-md: $unit * 3;
+$leading-tight-lg: $unit * 3;
+
+// Typography - Line heights (for body text)
+$leading-xs: $row;
+$leading-sm: $unit * 3;
+$leading-md: $unit * 3;
+$leading-lg: $row-2;
+$leading-xl: $row-2;
+$leading-2xl: $row-2;
+$leading-3xl: $unit * 5;
+$leading-4xl: $unit * 6;
+
+// Typography - Font weights
+$weight-normal: 400;
+$weight-medium: 500;
+$weight-semibold: 600;
+$weight-bold: 700;
+
+// Typography - Letter spacing
+$tracking-display: -0.02em;
+$tracking-body: 0;
+$tracking-caps: 0.08em;
+
+
+// Radius - derived from $unit (0.5rem = 8px)
+$radius-sm: $unit * 0.5; // 4px
+$radius-md: $unit; // 8px
+$radius-lg: $unit * 2; // 16px
+$radius-full: 9999px;
+
+// Borders - derived from $unit (0.5rem = 8px)
+$border-width-sm: $unit * 0.125; // 1px
+$border-width-md: $unit * 0.25; // 2px
+$border-width-lg: $unit * 0.5; // 4px
+
+// Color primitives
+$hue-primary: 220;
+$hue-success: 142;
+$hue-warning: 38;
+$hue-danger: 0;
+
+$color-neutral-50: hsl($hue-primary 10% 98%);
+$color-neutral-100: hsl($hue-primary 10% 96%);
+$color-neutral-200: hsl($hue-primary 10% 90%);
+$color-neutral-300: hsl($hue-primary 10% 80%);
+$color-neutral-400: hsl($hue-primary 10% 60%);
+$color-neutral-500: hsl($hue-primary 10% 45%);
+$color-neutral-600: hsl($hue-primary 10% 35%);
+$color-neutral-700: hsl($hue-primary 10% 25%);
+$color-neutral-800: hsl($hue-primary 10% 15%);
+$color-neutral-900: hsl($hue-primary 10% 10%);
+
+$color-primary-light: hsl($hue-primary 85% 65%);
+$color-primary: hsl($hue-primary 85% 50%);
+$color-primary-dark: hsl($hue-primary 85% 40%);
+
+$color-success: hsl($hue-success 70% 45%);
+$color-warning: hsl($hue-warning 90% 50%);
+$color-danger: hsl($hue-danger 70% 50%);
+$color-danger-dark: hsl($hue-danger 70% 40%);
+
+// Semantic colors (light theme defaults)
+$color-text: $color-neutral-900;
+$color-text-muted: $color-neutral-500;
+$color-text-inverse: $color-neutral-50;
+
+$color-bg: $color-neutral-50;
+$color-bg-subtle: $color-neutral-100;
+$color-bg-muted: $color-neutral-200;
+
+$color-border: $color-neutral-200;
+$color-border-strong: $color-neutral-300;
+
+$color-interactive: $color-primary;
+$color-interactive-hover: $color-primary-dark;
+
+$color-focus: $color-primary-light;

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

@@ -0,0 +1,6 @@
+:root {
+  // Border widths - derived from unit (8px)
+  --ui-border-width-sm: calc(var(--unit) * 0.125); // 1px
+  --ui-border-width-md: calc(var(--unit) * 0.25); // 2px
+  --ui-border-width-lg: calc(var(--unit) * 0.5); // 4px
+}

package/src/00-config/tokens/colors/colors.docs.json

@@ -0,0 +1,168 @@
+{
+  "id": "colors",
+  "type": "token",
+  "title": "Colors",
+  "description": "HSL-based color system with primitive and semantic tokens. Semantic tokens adapt to light/dark themes.",
+  "skipValidation": true,
+  "sections": [
+    {
+      "title": "Text Colors",
+      "description": "Use for typography and icons.",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "p",
+              "style": { "color": "var(--ui-color-text)" },
+              "text": "--ui-color-text: Default text"
+            },
+            {
+              "tag": "p",
+              "style": { "color": "var(--ui-color-text-muted)" },
+              "text": "--ui-color-text-muted: Secondary text, captions"
+            },
+            {
+              "tag": "p",
+              "class": "ui-p-1",
+              "style": {
+                "color": "var(--ui-color-text-inverse)",
+                "background": "var(--ui-color-neutral-900)",
+                "border-radius": "var(--ui-radius-sm)"
+              },
+              "text": "--ui-color-text-inverse: Text on dark backgrounds"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Background Colors",
+      "description": "Use for surfaces, cards, and containers.",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-p-2",
+              "style": {
+                "background": "var(--ui-color-bg)",
+                "border": "1px solid var(--ui-color-border)",
+                "border-radius": "var(--ui-radius-md)"
+              },
+              "text": "--ui-color-bg: Base background"
+            },
+            {
+              "tag": "div",
+              "class": "ui-p-2",
+              "style": {
+                "background": "var(--ui-color-bg-subtle)",
+                "border-radius": "var(--ui-radius-md)"
+              },
+              "text": "--ui-color-bg-subtle: Subtle emphasis"
+            },
+            {
+              "tag": "div",
+              "class": "ui-p-2",
+              "style": {
+                "background": "var(--ui-color-bg-muted)",
+                "border-radius": "var(--ui-radius-md)"
+              },
+              "text": "--ui-color-bg-muted: Stronger emphasis, code blocks"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Border Colors",
+      "description": "Use for dividers, inputs, and card borders.",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-p-2",
+              "style": {
+                "border": "2px solid var(--ui-color-border)",
+                "border-radius": "var(--ui-radius-md)"
+              },
+              "text": "--ui-color-border: Default borders"
+            },
+            {
+              "tag": "div",
+              "class": "ui-p-2",
+              "style": {
+                "border": "2px solid var(--ui-color-border-strong)",
+                "border-radius": "var(--ui-radius-md)"
+              },
+              "text": "--ui-color-border-strong: Emphasized borders"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Interactive Colors",
+      "description": "Use for links, buttons, and interactive elements.",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "p",
+              "style": { "color": "var(--ui-color-interactive)" },
+              "text": "--ui-color-interactive: Links, primary actions"
+            },
+            {
+              "tag": "p",
+              "style": { "color": "var(--ui-color-interactive-hover)" },
+              "text": "--ui-color-interactive-hover: Hover state"
+            },
+            {
+              "tag": "div",
+              "class": "ui-p-1",
+              "style": {
+                "display": "inline-block",
+                "outline": "3px solid var(--ui-color-focus)",
+                "outline-offset": "2px",
+                "border-radius": "var(--ui-radius-sm)"
+              },
+              "text": "--ui-color-focus: Focus rings"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Status Colors",
+      "description": "Use for feedback, alerts, and validation.",
+      "examples": [
+        {
+          "html": "<div class=\"ui-cluster ui-cluster--sm\"><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-success); border-radius: var(--ui-radius-sm)\"></div><span>--ui-color-success</span></div><div class=\"ui-cluster ui-cluster--sm\"><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-warning); border-radius: var(--ui-radius-sm)\"></div><span>--ui-color-warning</span></div><div class=\"ui-cluster ui-cluster--sm\"><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-danger); border-radius: var(--ui-radius-sm)\"></div><span>--ui-color-danger</span></div>"
+        }
+      ]
+    },
+    {
+      "title": "Primary Scale",
+      "description": "Brand color with light and dark variants.",
+      "examples": [
+        {
+          "html": "<div class=\"ui-cluster ui-cluster--sm\"><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-primary-light); border-radius: var(--ui-radius-sm)\"></div><span>--ui-color-primary-light</span></div><div class=\"ui-cluster ui-cluster--sm\"><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-primary); border-radius: var(--ui-radius-sm)\"></div><span>--ui-color-primary</span></div><div class=\"ui-cluster ui-cluster--sm\"><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-primary-dark); border-radius: var(--ui-radius-sm)\"></div><span>--ui-color-primary-dark</span></div>"
+        }
+      ]
+    },
+    {
+      "title": "Neutral Scale",
+      "description": "Gray scale for text, backgrounds, and borders. Derived from primary hue for subtle warmth.",
+      "examples": [
+        {
+          "html": "<div class=\"ui-cluster ui-cluster--sm\" style=\"flex-wrap: wrap\"><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-50); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-sm)\"></div><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-100); border-radius: var(--ui-radius-sm)\"></div><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-200); border-radius: var(--ui-radius-sm)\"></div><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-300); border-radius: var(--ui-radius-sm)\"></div><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-400); border-radius: var(--ui-radius-sm)\"></div><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-500); border-radius: var(--ui-radius-sm)\"></div><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-600); border-radius: var(--ui-radius-sm)\"></div><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-700); border-radius: var(--ui-radius-sm)\"></div><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-800); border-radius: var(--ui-radius-sm)\"></div><div style=\"width: var(--ui-space-4); height: var(--ui-row-2); background: var(--ui-color-neutral-900); border-radius: var(--ui-radius-sm)\"></div></div>",
+          "code": "50 → 100 → 200 → 300 → 400 → 500 → 600 → 700 → 800 → 900"
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,25 @@
+:root {
+  --ui-hue-primary: 220;
+  --ui-hue-success: 142;
+  --ui-hue-warning: 38;
+  --ui-hue-danger: 0;
+
+  --ui-color-neutral-50: hsl(var(--ui-hue-primary) 10% 98%);
+  --ui-color-neutral-100: hsl(var(--ui-hue-primary) 10% 96%);
+  --ui-color-neutral-200: hsl(var(--ui-hue-primary) 10% 90%);
+  --ui-color-neutral-300: hsl(var(--ui-hue-primary) 10% 80%);
+  --ui-color-neutral-400: hsl(var(--ui-hue-primary) 10% 60%);
+  --ui-color-neutral-500: hsl(var(--ui-hue-primary) 10% 45%);
+  --ui-color-neutral-600: hsl(var(--ui-hue-primary) 10% 35%);
+  --ui-color-neutral-700: hsl(var(--ui-hue-primary) 10% 25%);
+  --ui-color-neutral-800: hsl(var(--ui-hue-primary) 10% 15%);
+  --ui-color-neutral-900: hsl(var(--ui-hue-primary) 10% 10%);
+
+  --ui-color-primary-light: hsl(var(--ui-hue-primary) 85% 65%);
+  --ui-color-primary: hsl(var(--ui-hue-primary) 85% 50%);
+  --ui-color-primary-dark: hsl(var(--ui-hue-primary) 85% 40%);
+
+  --ui-color-success: hsl(var(--ui-hue-success) 70% 45%);
+  --ui-color-warning: hsl(var(--ui-hue-warning) 90% 50%);
+  --ui-color-danger: hsl(var(--ui-hue-danger) 70% 50%);
+}

package/src/00-config/tokens/grid/grid.docs.json

@@ -0,0 +1,54 @@
+{
+  "id": "grid",
+  "type": "token",
+  "title": "Grid System",
+  "description": "All spacing and heights align to the 8px grid.",
+  "skipValidation": true,
+  "sections": [
+    {
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "div",
+              "text": "row-1 (16px)",
+              "style": {
+                "background": "var(--ui-color-primary)",
+                "color": "var(--ui-color-text-inverse)",
+                "height": "var(--ui-row-1)",
+                "display": "flex",
+                "align-items": "center",
+                "padding": "0 var(--ui-space-2)"
+              }
+            },
+            {
+              "tag": "div",
+              "text": "row-2 (32px)",
+              "style": {
+                "background": "var(--ui-color-primary)",
+                "color": "var(--ui-color-text-inverse)",
+                "height": "var(--ui-row-2)",
+                "display": "flex",
+                "align-items": "center",
+                "padding": "0 var(--ui-space-2)"
+              }
+            },
+            {
+              "tag": "div",
+              "text": "row-3 (48px)",
+              "style": {
+                "background": "var(--ui-color-primary)",
+                "color": "var(--ui-color-text-inverse)",
+                "height": "var(--ui-row-3)",
+                "display": "flex",
+                "align-items": "center",
+                "padding": "0 var(--ui-space-2)"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

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

@@ -0,0 +1,11 @@
+:root {
+  --unit: 8px; /* 8px */
+  --ui-row: calc(var(--unit) * 2);
+
+  --ui-row-1: var(--ui-row);
+  --ui-row-2: calc(var(--ui-row) * 2);
+  --ui-row-3: calc(var(--ui-row) * 3);
+  --ui-row-4: calc(var(--ui-row) * 4);
+  --ui-row-5: calc(var(--ui-row) * 5);
+  --ui-row-6: calc(var(--ui-row) * 6);
+}

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

@@ -0,0 +1,15 @@
+// Design tokens - colors, spacing, typography, grid, etc.
+@use './colors/index' as *;
+@use './spacing/index' as *;
+@use './typography/index' as *;
+@use './grid/index' as *;
+@use './radius/index' as *;
+@use './borders/index' as *;
+@use './shadows/index' as *;
+@use './zindex/index' as *;
+@use './motion/index' as *;
+@use './semantic/colors/index' as *;
+@use './semantic/spacing/index' as *;
+
+// Component tokens
+@use './input' as *;

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

@@ -0,0 +1,14 @@
+:root {
+  --ui-input-height: var(--ui-row-2);
+  --ui-input-padding-x: var(--ui-space-2);
+  --ui-input-padding-y: var(--ui-space-1);
+
+  --ui-input-radius: var(--ui-radius-md);
+  --ui-input-border-width: var(--ui-border-width-sm);
+
+  --ui-input-bg: var(--ui-color-bg);
+  --ui-input-border: var(--ui-color-border);
+  --ui-input-border-focus: var(--ui-color-interactive);
+  --ui-input-text: var(--ui-color-text);
+  --ui-input-placeholder: var(--ui-color-text-muted);
+}

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

@@ -0,0 +1,25 @@
+@layer tokens {
+  :root {
+    // Duration scale
+    --ui-duration-instant: 50ms;
+    --ui-duration-fast: 100ms;
+    --ui-duration-base: 150ms;
+    --ui-duration-slow: 250ms;
+    --ui-duration-slower: 400ms;
+
+    // Easing functions
+    --ui-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+    --ui-ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --ui-ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+    // Prefers reduced motion
+    @media (prefers-reduced-motion: reduce) {
+      --ui-duration-instant: 0ms;
+      --ui-duration-fast: 0ms;
+      --ui-duration-base: 0ms;
+      --ui-duration-slow: 0ms;
+      --ui-duration-slower: 0ms;
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+:root {
+  // Radius - derived from --unit (8px)
+  --ui-radius-sm: calc(var(--unit) * 0.5); // 4px
+  --ui-radius-md: var(--unit); // 8px
+  --ui-radius-lg: calc(var(--unit) * 2); // 16px
+  --ui-radius-full: 9999px;
+}

package/src/00-config/tokens/semantic/colors/index.scss

@@ -0,0 +1,30 @@
+:root {
+  --ui-color-text: var(--ui-color-neutral-900);
+  --ui-color-text-muted: var(--ui-color-neutral-500);
+  --ui-color-text-inverse: var(--ui-color-neutral-50);
+
+  --ui-color-bg: var(--ui-color-neutral-50);
+  --ui-color-bg-subtle: var(--ui-color-neutral-100);
+  --ui-color-bg-muted: var(--ui-color-neutral-200);
+
+  --ui-color-border: var(--ui-color-neutral-200);
+  --ui-color-border-strong: var(--ui-color-neutral-300);
+
+  --ui-color-interactive: var(--ui-color-primary);
+  --ui-color-interactive-hover: var(--ui-color-primary-dark);
+
+  --ui-color-focus: var(--ui-color-primary-light);
+}
+
+[data-theme="dark"] {
+  --ui-color-text: var(--ui-color-neutral-100);
+  --ui-color-text-muted: var(--ui-color-neutral-400);
+  --ui-color-text-inverse: var(--ui-color-neutral-900);
+
+  --ui-color-bg: var(--ui-color-neutral-900);
+  --ui-color-bg-subtle: var(--ui-color-neutral-800);
+  --ui-color-bg-muted: var(--ui-color-neutral-700);
+
+  --ui-color-border: var(--ui-color-neutral-700);
+  --ui-color-border-strong: var(--ui-color-neutral-600);
+}

package/src/00-config/tokens/semantic/spacing/index.scss

@@ -0,0 +1,10 @@
+:root {
+  --spacing-xs: var(--ui-space-1);
+  --spacing-sm: var(--ui-space-2);
+  --spacing-md: var(--ui-space-4);
+  --spacing-lg: var(--ui-space-6);
+  --spacing-xl: var(--ui-space-8);
+
+  --spacing-gutter: var(--ui-space-4);
+  --spacing-section: var(--ui-space-8);
+}

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

@@ -0,0 +1,5 @@
+:root {
+  --shadow-sm: 0 1px 2px hsl(var(--ui-hue-primary) 10% 20% / 0.05);
+  --shadow-md: 0 4px 6px hsl(var(--ui-hue-primary) 10% 20% / 0.1);
+  --shadow-lg: 0 10px 15px hsl(var(--ui-hue-primary) 10% 20% / 0.15);
+}

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

@@ -0,0 +1,15 @@
+:root {
+  // Micro spacing
+  --ui-space-px: calc(var(--unit) * 0.125); // 1px
+  --ui-space-quarter: calc(var(--unit) * 0.25); // 2px
+  --ui-space-half: calc(var(--unit) * 0.5); // 4px
+  --ui-space-0: calc(var(--unit) * 0.5); // 4px (alias)
+
+  // Standard spacing
+  --ui-space-1: var(--unit); // 8px
+  --ui-space-2: calc(var(--unit) * 2); // 16px
+  --ui-space-3: calc(var(--unit) * 3); // 24px
+  --ui-space-4: calc(var(--unit) * 4); // 32px
+  --ui-space-6: calc(var(--unit) * 6); // 48px
+  --ui-space-8: calc(var(--unit) * 8); // 64px
+}