@handamade/psi-tokens 0.3.0

package/README.md

@@ -0,0 +1,48 @@
+# @handamade/psi-tokens
+
+OKLCH formula-based design tokens. Code is the source of truth; all artifacts are generated.
+
+## Installation
+
+**In workspace:** use `pnpm install` at the root. **@handamade/psi-tokens** is a local workspace dependency.
+
+**External packages:** install from the private registry with your configured credentials.
+
+## Usage
+
+Import tokens in your app's stylesheet:
+
+```css
+@import "@handamade/psi-tokens/base.css";
+@import "@handamade/psi-tokens/light.css"; /* or dark.css, acme.css */
+@import "@handamade/psi-tokens/components.css";
+@import "@handamade/psi-tokens/utilities.css";
+```
+
+Then set the theme on your root element:
+
+```html
+<html data-psi-theme="light">
+  <!-- your app -->
+</html>
+```
+
+All tokens are CSS custom properties: `--psi-bg-primary`, `--psi-fg-secondary`, `--psi-space-12`, etc.
+
+**utilities.css is required**: it carries `.psi-container`, `.psi-text-*`, `.psi-display-*` utility classes and the `prefers-reduced-motion` zeroing for all duration tokens (D30) — required for NavBar rendering and accessibility compliance.
+
+## Creating a custom theme
+
+Run `pnpm new-theme` to scaffold a customer brand theme (palette + slot mapping).
+
+## Machine-readable artifacts
+
+For AI and tooling, see [llms.txt](./llms.txt):
+- `dist/resolved/{light,dark,acme}.json` — Every token with OKLCH, hex, and formula
+- `dist/guidance.json` — Variant intent, usage rules, state derivation
+- `dist/dtcg/{theme}.json` — W3C DTCG format export
+- `dist/components/{name}.vars.css` — Component-specific token declarations
+
+## Note
+
+All files in `dist/` are generated. Never hand-edit. Modify `src/` and rebuild.

package/dist/acme.css

@@ -0,0 +1,47 @@
+@layer psi.theme {
+  [data-psi-theme="acme"] {
+    --psi-palette-charcoal: oklch(0.22 0.015 30);
+    --psi-palette-cream: oklch(0.96 0.01 80);
+    --psi-palette-coral: oklch(0.55 0.2 30);
+    --psi-palette-mint: oklch(0.52 0.1176 160);
+    --psi-palette-gold: oklch(0.78 0.15 85);
+    --psi-palette-crimson: oklch(0.55 0.22 15);
+    --psi-palette-white: oklch(1 0 0);
+    --psi-palette-black: oklch(0 0 0);
+    --psi-bg-primary: var(--psi-palette-cream);
+    --psi-bg-secondary: oklch(from var(--psi-palette-cream) calc(l + 0.03) c h);
+    --psi-fg-primary: oklch(from var(--psi-palette-charcoal) 0.3 0.03 h);
+    --psi-fg-secondary: oklch(from var(--psi-fg-primary) l c h / 0.7);
+    --psi-fg-tertiary: oklch(from var(--psi-fg-primary) l c h / 0.5);
+    --psi-fg-quaternary: oklch(from var(--psi-fg-primary) l c h / 0.3);
+    --psi-fg-primary-inverted: var(--psi-palette-cream);
+    --psi-fg-static-white: oklch(from var(--psi-palette-cream) 1 0 h);
+    --psi-fg-static-black: oklch(from var(--psi-palette-charcoal) 0.25 min(c, 0.03) h);
+    --psi-fg-on-accent: var(--psi-fg-static-white);
+    --psi-fg-accent: oklch(from var(--psi-palette-coral) 0.48 min(c, 0.23) h);
+    --psi-fg-success: oklch(from var(--psi-palette-mint) 0.48 min(c, 0.1086) h);
+    --psi-fg-warning: oklch(from var(--psi-palette-gold) 0.48 min(c, 0.0984) h);
+    --psi-fg-danger: oklch(from var(--psi-palette-crimson) 0.48 min(c, 0.1919) h);
+    --psi-fill-neutral1: oklch(from var(--psi-palette-cream) calc(l + 0.016) calc(c - 0.001) h);
+    --psi-fill-neutral2: var(--psi-palette-cream);
+    --psi-fill-neutral3: oklch(from var(--psi-palette-cream) calc(l - 0.017) calc(c + 0.001) h);
+    --psi-fill-neutral4: oklch(from var(--psi-palette-cream) calc(l - 0.034) calc(c + 0.002) h);
+    --psi-fill-neutral5: oklch(from var(--psi-palette-cream) calc(l - 0.032) calc(c + 0.003) h);
+    --psi-fill-neutral6: oklch(from var(--psi-palette-cream) calc(l - 0.048) calc(c + 0.004) h);
+    --psi-fill-accent: var(--psi-palette-coral);
+    --psi-fill-success: oklch(from var(--psi-palette-mint) l min(c, 0.1285) h);
+    --psi-fill-warning: var(--psi-palette-gold);
+    --psi-fill-danger: var(--psi-palette-crimson);
+    --psi-fill-tint-accent: oklch(from var(--psi-fg-accent) l c h / 0.12);
+    --psi-fill-tint-success: oklch(from var(--psi-fg-success) l c h / 0.12);
+    --psi-fill-tint-warning: oklch(from var(--psi-fg-warning) l c h / 0.12);
+    --psi-fill-tint-danger: oklch(from var(--psi-fg-danger) l c h / 0.12);
+    --psi-border-faint: oklch(from var(--psi-fg-primary) l c h / 0.08);
+    --psi-border-neutral: oklch(from var(--psi-fg-primary) l c h / 0.15);
+    --psi-border-strong: oklch(from var(--psi-fg-primary) l c h / 0.3);
+    --psi-border-focus: var(--psi-fg-accent);
+    --psi-scrim-soft: oklch(from var(--psi-bg-primary) l c h / 0.25);
+    --psi-scrim-medium: oklch(from var(--psi-bg-primary) l c h / 0.35);
+    --psi-scrim-heavy: oklch(from var(--psi-bg-primary) l c h / 0.82);
+  }
+}

package/dist/base.css

@@ -0,0 +1,92 @@
+@layer psi.base, psi.theme, psi.components, psi.utilities;
+
+@layer psi.base {
+  :root {
+    --psi-palette-obsidian: oklch(0.25 0.02 250);
+    --psi-palette-platinum: oklch(0.95 0.005 250);
+    --psi-palette-sapphire: oklch(0.55 0.21 260);
+    --psi-palette-ruby: oklch(0.55 0.22 25);
+    --psi-palette-amber: oklch(0.75 0.1582 75);
+    --psi-palette-emerald: oklch(0.52 0.19 155);
+    --psi-palette-white: oklch(1 0 0);
+    --psi-palette-black: oklch(0 0 0);
+  }
+}
+
+@layer psi.base {
+  :root {
+    --psi-space-0: 0;
+    --psi-space-2: 0.125rem;
+    --psi-space-4: 0.25rem;
+    --psi-space-6: 0.375rem;
+    --psi-space-8: 0.5rem;
+    --psi-space-12: 0.75rem;
+    --psi-space-16: 1rem;
+    --psi-space-20: 1.25rem;
+    --psi-space-24: 1.5rem;
+    --psi-space-32: 2rem;
+    --psi-space-40: 2.5rem;
+    --psi-space-48: 3rem;
+    --psi-space-64: 4rem;
+    --psi-space-80: 5rem;
+    --psi-space-96: 6rem;
+    --psi-space-120: 7.5rem;
+    --psi-space-144: 9rem;
+
+    --psi-size-24: 1.5rem;
+    --psi-size-32: 2rem;
+    --psi-size-40: 2.5rem;
+    --psi-size-48: 3rem;
+
+    --psi-radius-4: 0.25rem;
+    --psi-radius-6: 0.375rem;
+    --psi-radius-8: 0.5rem;
+    --psi-radius-12: 0.75rem;
+    --psi-radius-full: 9999px;
+
+    --psi-text-12-16-regular: 400 0.75rem/1rem var(--psi-font-sans);
+    --psi-text-12-16-medium: 500 0.75rem/1rem var(--psi-font-sans);
+    --psi-text-14-20-regular: 400 0.875rem/1.25rem var(--psi-font-sans);
+    --psi-text-14-20-medium: 500 0.875rem/1.25rem var(--psi-font-sans);
+    --psi-text-16-20-regular: 400 1rem/1.25rem var(--psi-font-sans);
+    --psi-text-16-24-regular: 400 1rem/1.5rem var(--psi-font-sans);
+    --psi-text-16-24-medium: 500 1rem/1.5rem var(--psi-font-sans);
+    --psi-text-18-28-medium: 500 1.125rem/1.75rem var(--psi-font-sans);
+    --psi-text-20-28-semibold: 600 1.25rem/1.75rem var(--psi-font-sans);
+    --psi-text-24-32-medium: 500 1.5rem/2rem var(--psi-font-sans);
+    --psi-text-30-36-bold: 700 1.875rem/2.25rem var(--psi-font-sans);
+    --psi-text-serif-18-28-regular: 400 1.125rem/1.75rem var(--psi-font-serif);
+    --psi-text-serif-20-30-regular: 400 1.25rem/1.875rem var(--psi-font-serif);
+    --psi-text-serif-20-32-regular: 400 1.25rem/2rem var(--psi-font-serif);
+    --psi-text-serif-24-36-regular: 400 1.5rem/2.25rem var(--psi-font-serif);
+    --psi-text-serif-28-40-regular: 400 1.75rem/2.5rem var(--psi-font-serif);
+    --psi-text-mono-13-20-regular: 400 0.8125rem/1.25rem var(--psi-font-mono);
+    --psi-text-mono-14-20-regular: 400 0.875rem/1.25rem var(--psi-font-mono);
+    --psi-text-mono-15-24-regular: 400 0.9375rem/1.5rem var(--psi-font-mono);
+    --psi-text-mono-15-24-medium: 500 0.9375rem/1.5rem var(--psi-font-mono);
+
+    --psi-display-56-128-black: 900 clamp(3.5rem, 9vw, 8rem)/0.95 var(--psi-font-display);
+    --psi-display-36-64-black: 900 clamp(2.25rem, 5vw, 4rem)/1.05 var(--psi-font-display);
+    --psi-display-32-32-extrabold: 800 2rem/1.1 var(--psi-font-display);
+
+    --psi-duration-150: 150ms;
+    --psi-duration-200: 200ms;
+    --psi-duration-350: 350ms;
+    --psi-duration-450: 450ms;
+    --psi-duration-600: 600ms;
+    --psi-ease-standard: ease;
+    --psi-ease-in-out: ease-in-out;
+    --psi-ease-soft: cubic-bezier(0.2, 0.6, 0.2, 1);
+
+    --psi-container-max: 82rem;
+    --psi-gutter: 2.5rem;
+    --psi-z-nav: 100;
+    --psi-z-overlay: 1000;
+    --psi-z-tooltip: 1100;
+
+    --psi-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    --psi-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+    --psi-font-serif: Georgia, "Times New Roman", Times, serif;
+    --psi-font-display: var(--psi-font-sans);
+  }
+}

package/dist/components/button.vars.css

@@ -0,0 +1,39 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-button-accent-bg: var(--psi-fill-accent);
+    --psi-button-accent-bg-hover: oklch(from var(--psi-button-accent-bg) calc(l - 0.04) c h);
+    --psi-button-accent-bg-active: oklch(from var(--psi-button-accent-bg) calc(l - 0.08) c h);
+    --psi-button-accent-fg: var(--psi-fg-on-accent);
+    --psi-button-accent-subtle-bg: var(--psi-fill-tint-accent);
+    --psi-button-accent-subtle-bg-hover: oklch(from var(--psi-button-accent-subtle-bg) l c h / 0.18);
+    --psi-button-accent-subtle-bg-active: oklch(from var(--psi-button-accent-subtle-bg) l c h / 0.24);
+    --psi-button-accent-subtle-fg: var(--psi-fg-accent);
+    --psi-button-neutral-bg: var(--psi-fill-neutral3);
+    --psi-button-neutral-bg-hover: oklch(from var(--psi-button-neutral-bg) calc(l - 0.04) c h);
+    --psi-button-neutral-bg-active: oklch(from var(--psi-button-neutral-bg) calc(l - 0.08) c h);
+    --psi-button-neutral-fg: var(--psi-fg-primary);
+    --psi-button-neutral-subtle-bg: var(--psi-fill-neutral1);
+    --psi-button-neutral-subtle-bg-hover: oklch(from var(--psi-button-neutral-subtle-bg) calc(l - 0.04) c h);
+    --psi-button-neutral-subtle-bg-active: oklch(from var(--psi-button-neutral-subtle-bg) calc(l - 0.08) c h);
+    --psi-button-neutral-subtle-fg: var(--psi-fg-primary);
+    --psi-button-ghost-bg: transparent;
+    --psi-button-ghost-bg-hover: var(--psi-fill-neutral3);
+    --psi-button-ghost-bg-active: var(--psi-fill-neutral4);
+    --psi-button-ghost-fg: var(--psi-fg-primary);
+    --psi-button-danger-bg: var(--psi-fill-danger);
+    --psi-button-danger-bg-hover: oklch(from var(--psi-button-danger-bg) calc(l - 0.04) c h);
+    --psi-button-danger-bg-active: oklch(from var(--psi-button-danger-bg) calc(l - 0.08) c h);
+    --psi-button-danger-fg: var(--psi-fg-static-white);
+    --psi-button-danger-subtle-bg: var(--psi-fill-tint-danger);
+    --psi-button-danger-subtle-bg-hover: oklch(from var(--psi-button-danger-subtle-bg) l c h / 0.18);
+    --psi-button-danger-subtle-bg-active: oklch(from var(--psi-button-danger-subtle-bg) l c h / 0.24);
+    --psi-button-danger-subtle-fg: var(--psi-fg-danger);
+    --psi-button-outline-bg: transparent;
+    --psi-button-outline-bg-hover: var(--psi-fill-accent);
+    --psi-button-outline-bg-active: oklch(from var(--psi-fill-accent) calc(l - 0.04) c h);
+    --psi-button-outline-fg: var(--psi-fg-primary);
+    --psi-button-outline-fg-hover: var(--psi-button-accent-fg);
+    --psi-button-outline-border: var(--psi-border-strong);
+    --psi-button-focus-ring: var(--psi-border-focus);
+  }
+}

package/dist/components/card.vars.css

@@ -0,0 +1,8 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-card-border: var(--psi-border-faint);
+    --psi-card-bg: transparent;
+    --psi-card-gap: var(--psi-space-16);
+    --psi-card-radius: var(--psi-radius-8);
+  }
+}

package/dist/components/checkbox.vars.css

@@ -0,0 +1,11 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-checkbox-fg: var(--psi-fg-primary);
+    --psi-checkbox-box-bg: var(--psi-bg-primary);
+    --psi-checkbox-box-border: var(--psi-border-neutral);
+    --psi-checkbox-box-bg-checked: var(--psi-fill-accent);
+    --psi-checkbox-box-border-checked: var(--psi-fill-accent);
+    --psi-checkbox-check-fg: var(--psi-fg-on-accent);
+    --psi-checkbox-focus-ring: var(--psi-border-focus);
+  }
+}

package/dist/components/input.vars.css

@@ -0,0 +1,11 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-input-bg: var(--psi-bg-primary);
+    --psi-input-fg: var(--psi-fg-primary);
+    --psi-input-placeholder: var(--psi-fg-tertiary);
+    --psi-input-border: var(--psi-border-neutral);
+    --psi-input-border-hover: var(--psi-border-strong);
+    --psi-input-border-error: var(--psi-fg-danger);
+    --psi-input-focus-ring: var(--psi-border-focus);
+  }
+}

package/dist/components/media.vars.css

@@ -0,0 +1,5 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-media-tint: none;
+  }
+}

package/dist/components/navbar.vars.css

@@ -0,0 +1,8 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-navbar-height: 4rem;
+    --psi-navbar-bg: var(--psi-scrim-heavy);
+    --psi-navbar-blur: 12px;
+    --psi-navbar-border: var(--psi-border-faint);
+  }
+}

package/dist/components/select.vars.css

@@ -0,0 +1,12 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-select-bg: var(--psi-bg-primary);
+    --psi-select-fg: var(--psi-fg-primary);
+    --psi-select-placeholder: var(--psi-fg-tertiary);
+    --psi-select-border: var(--psi-border-neutral);
+    --psi-select-border-hover: var(--psi-border-strong);
+    --psi-select-border-error: var(--psi-fg-danger);
+    --psi-select-focus-ring: var(--psi-border-focus);
+    --psi-select-chevron-fg: var(--psi-fg-secondary);
+  }
+}

package/dist/components/switch.vars.css

@@ -0,0 +1,9 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-switch-fg: var(--psi-fg-primary);
+    --psi-switch-track-bg: var(--psi-fill-neutral4);
+    --psi-switch-track-bg-checked: var(--psi-fill-accent);
+    --psi-switch-thumb-bg: var(--psi-fg-static-white);
+    --psi-switch-focus-ring: var(--psi-border-focus);
+  }
+}

package/dist/components/tag.vars.css

@@ -0,0 +1,25 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-tag-neutral-bg: var(--psi-fill-neutral3);
+    --psi-tag-neutral-fg: var(--psi-fg-primary);
+    --psi-tag-accent-bg: var(--psi-fill-accent);
+    --psi-tag-accent-fg: var(--psi-fg-on-accent);
+    --psi-tag-success-bg: var(--psi-fill-success);
+    --psi-tag-success-fg: var(--psi-fg-static-white);
+    --psi-tag-warning-bg: var(--psi-fill-warning);
+    --psi-tag-warning-fg: var(--psi-fg-static-black);
+    --psi-tag-danger-bg: var(--psi-fill-danger);
+    --psi-tag-danger-fg: var(--psi-fg-static-white);
+    --psi-tag-neutral-subtle-bg: var(--psi-fill-neutral2);
+    --psi-tag-neutral-subtle-fg: var(--psi-fg-secondary);
+    --psi-tag-accent-subtle-bg: var(--psi-fill-tint-accent);
+    --psi-tag-accent-subtle-fg: var(--psi-fg-accent);
+    --psi-tag-success-subtle-bg: var(--psi-fill-tint-success);
+    --psi-tag-success-subtle-fg: var(--psi-fg-success);
+    --psi-tag-warning-subtle-bg: var(--psi-fill-tint-warning);
+    --psi-tag-warning-subtle-fg: var(--psi-fg-warning);
+    --psi-tag-danger-subtle-bg: var(--psi-fill-tint-danger);
+    --psi-tag-danger-subtle-fg: var(--psi-fg-danger);
+    --psi-tag-focus-ring: var(--psi-border-focus);
+  }
+}

package/dist/components/tooltip.vars.css

@@ -0,0 +1,6 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-tooltip-bg: var(--psi-fg-primary);
+    --psi-tooltip-fg: var(--psi-bg-primary);
+  }
+}

package/dist/components.css

@@ -0,0 +1,143 @@
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-button-accent-bg: var(--psi-fill-accent);
+    --psi-button-accent-bg-hover: oklch(from var(--psi-button-accent-bg) calc(l - 0.04) c h);
+    --psi-button-accent-bg-active: oklch(from var(--psi-button-accent-bg) calc(l - 0.08) c h);
+    --psi-button-accent-fg: var(--psi-fg-on-accent);
+    --psi-button-accent-subtle-bg: var(--psi-fill-tint-accent);
+    --psi-button-accent-subtle-bg-hover: oklch(from var(--psi-button-accent-subtle-bg) l c h / 0.18);
+    --psi-button-accent-subtle-bg-active: oklch(from var(--psi-button-accent-subtle-bg) l c h / 0.24);
+    --psi-button-accent-subtle-fg: var(--psi-fg-accent);
+    --psi-button-neutral-bg: var(--psi-fill-neutral3);
+    --psi-button-neutral-bg-hover: oklch(from var(--psi-button-neutral-bg) calc(l - 0.04) c h);
+    --psi-button-neutral-bg-active: oklch(from var(--psi-button-neutral-bg) calc(l - 0.08) c h);
+    --psi-button-neutral-fg: var(--psi-fg-primary);
+    --psi-button-neutral-subtle-bg: var(--psi-fill-neutral1);
+    --psi-button-neutral-subtle-bg-hover: oklch(from var(--psi-button-neutral-subtle-bg) calc(l - 0.04) c h);
+    --psi-button-neutral-subtle-bg-active: oklch(from var(--psi-button-neutral-subtle-bg) calc(l - 0.08) c h);
+    --psi-button-neutral-subtle-fg: var(--psi-fg-primary);
+    --psi-button-ghost-bg: transparent;
+    --psi-button-ghost-bg-hover: var(--psi-fill-neutral3);
+    --psi-button-ghost-bg-active: var(--psi-fill-neutral4);
+    --psi-button-ghost-fg: var(--psi-fg-primary);
+    --psi-button-danger-bg: var(--psi-fill-danger);
+    --psi-button-danger-bg-hover: oklch(from var(--psi-button-danger-bg) calc(l - 0.04) c h);
+    --psi-button-danger-bg-active: oklch(from var(--psi-button-danger-bg) calc(l - 0.08) c h);
+    --psi-button-danger-fg: var(--psi-fg-static-white);
+    --psi-button-danger-subtle-bg: var(--psi-fill-tint-danger);
+    --psi-button-danger-subtle-bg-hover: oklch(from var(--psi-button-danger-subtle-bg) l c h / 0.18);
+    --psi-button-danger-subtle-bg-active: oklch(from var(--psi-button-danger-subtle-bg) l c h / 0.24);
+    --psi-button-danger-subtle-fg: var(--psi-fg-danger);
+    --psi-button-outline-bg: transparent;
+    --psi-button-outline-bg-hover: var(--psi-fill-accent);
+    --psi-button-outline-bg-active: oklch(from var(--psi-fill-accent) calc(l - 0.04) c h);
+    --psi-button-outline-fg: var(--psi-fg-primary);
+    --psi-button-outline-fg-hover: var(--psi-button-accent-fg);
+    --psi-button-outline-border: var(--psi-border-strong);
+    --psi-button-focus-ring: var(--psi-border-focus);
+  }
+}
+
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-input-bg: var(--psi-bg-primary);
+    --psi-input-fg: var(--psi-fg-primary);
+    --psi-input-placeholder: var(--psi-fg-tertiary);
+    --psi-input-border: var(--psi-border-neutral);
+    --psi-input-border-hover: var(--psi-border-strong);
+    --psi-input-border-error: var(--psi-fg-danger);
+    --psi-input-focus-ring: var(--psi-border-focus);
+  }
+}
+
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-select-bg: var(--psi-bg-primary);
+    --psi-select-fg: var(--psi-fg-primary);
+    --psi-select-placeholder: var(--psi-fg-tertiary);
+    --psi-select-border: var(--psi-border-neutral);
+    --psi-select-border-hover: var(--psi-border-strong);
+    --psi-select-border-error: var(--psi-fg-danger);
+    --psi-select-focus-ring: var(--psi-border-focus);
+    --psi-select-chevron-fg: var(--psi-fg-secondary);
+  }
+}
+
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-checkbox-fg: var(--psi-fg-primary);
+    --psi-checkbox-box-bg: var(--psi-bg-primary);
+    --psi-checkbox-box-border: var(--psi-border-neutral);
+    --psi-checkbox-box-bg-checked: var(--psi-fill-accent);
+    --psi-checkbox-box-border-checked: var(--psi-fill-accent);
+    --psi-checkbox-check-fg: var(--psi-fg-on-accent);
+    --psi-checkbox-focus-ring: var(--psi-border-focus);
+  }
+}
+
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-switch-fg: var(--psi-fg-primary);
+    --psi-switch-track-bg: var(--psi-fill-neutral4);
+    --psi-switch-track-bg-checked: var(--psi-fill-accent);
+    --psi-switch-thumb-bg: var(--psi-fg-static-white);
+    --psi-switch-focus-ring: var(--psi-border-focus);
+  }
+}
+
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-tag-neutral-bg: var(--psi-fill-neutral3);
+    --psi-tag-neutral-fg: var(--psi-fg-primary);
+    --psi-tag-accent-bg: var(--psi-fill-accent);
+    --psi-tag-accent-fg: var(--psi-fg-on-accent);
+    --psi-tag-success-bg: var(--psi-fill-success);
+    --psi-tag-success-fg: var(--psi-fg-static-white);
+    --psi-tag-warning-bg: var(--psi-fill-warning);
+    --psi-tag-warning-fg: var(--psi-fg-static-black);
+    --psi-tag-danger-bg: var(--psi-fill-danger);
+    --psi-tag-danger-fg: var(--psi-fg-static-white);
+    --psi-tag-neutral-subtle-bg: var(--psi-fill-neutral2);
+    --psi-tag-neutral-subtle-fg: var(--psi-fg-secondary);
+    --psi-tag-accent-subtle-bg: var(--psi-fill-tint-accent);
+    --psi-tag-accent-subtle-fg: var(--psi-fg-accent);
+    --psi-tag-success-subtle-bg: var(--psi-fill-tint-success);
+    --psi-tag-success-subtle-fg: var(--psi-fg-success);
+    --psi-tag-warning-subtle-bg: var(--psi-fill-tint-warning);
+    --psi-tag-warning-subtle-fg: var(--psi-fg-warning);
+    --psi-tag-danger-subtle-bg: var(--psi-fill-tint-danger);
+    --psi-tag-danger-subtle-fg: var(--psi-fg-danger);
+    --psi-tag-focus-ring: var(--psi-border-focus);
+  }
+}
+
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-tooltip-bg: var(--psi-fg-primary);
+    --psi-tooltip-fg: var(--psi-bg-primary);
+  }
+}
+
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-card-border: var(--psi-border-faint);
+    --psi-card-bg: transparent;
+    --psi-card-gap: var(--psi-space-16);
+    --psi-card-radius: var(--psi-radius-8);
+  }
+}
+
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-navbar-height: 4rem;
+    --psi-navbar-bg: var(--psi-scrim-heavy);
+    --psi-navbar-blur: 12px;
+    --psi-navbar-border: var(--psi-border-faint);
+  }
+}
+
+@layer psi.components {
+  :where(:root, [data-psi-theme]) {
+    --psi-media-tint: none;
+  }
+}

package/dist/dark.css

@@ -0,0 +1,47 @@
+@layer psi.theme {
+  [data-psi-theme="dark"] {
+    --psi-palette-obsidian: oklch(0.25 0.02 250);
+    --psi-palette-platinum: oklch(0.95 0.005 250);
+    --psi-palette-sapphire: oklch(0.55 0.21 260);
+    --psi-palette-ruby: oklch(0.55 0.22 25);
+    --psi-palette-amber: oklch(0.75 0.1582 75);
+    --psi-palette-emerald: oklch(0.52 0.19 155);
+    --psi-palette-white: oklch(1 0 0);
+    --psi-palette-black: oklch(0 0 0);
+    --psi-bg-primary: oklch(from var(--psi-palette-obsidian) 0.15 0.01 h);
+    --psi-bg-secondary: oklch(from var(--psi-palette-obsidian) 0.2 0.015 h);
+    --psi-fg-primary: oklch(from var(--psi-palette-platinum) 0.93 0.01 h);
+    --psi-fg-secondary: oklch(from var(--psi-fg-primary) l c h / 0.7);
+    --psi-fg-tertiary: oklch(from var(--psi-fg-primary) l c h / 0.5);
+    --psi-fg-quaternary: oklch(from var(--psi-fg-primary) l c h / 0.3);
+    --psi-fg-primary-inverted: oklch(from var(--psi-palette-obsidian) 0.15 c h);
+    --psi-fg-static-white: oklch(from var(--psi-palette-platinum) 1 0 h);
+    --psi-fg-static-black: oklch(from var(--psi-palette-obsidian) 0.25 min(c, 0.03) h);
+    --psi-fg-on-accent: var(--psi-fg-static-white);
+    --psi-fg-accent: oklch(from var(--psi-palette-sapphire) 0.75 min(c, 0.1286) h);
+    --psi-fg-success: oklch(from var(--psi-palette-emerald) 0.75 min(c, 0.23) h);
+    --psi-fg-warning: oklch(from var(--psi-palette-amber) 0.75 min(c, 0.1582) h);
+    --psi-fg-danger: oklch(from var(--psi-palette-ruby) 0.75 min(c, 0.1505) h);
+    --psi-fill-neutral1: oklch(from var(--psi-palette-obsidian) 0.18 0.012 h);
+    --psi-fill-neutral2: oklch(from var(--psi-palette-obsidian) 0.2 0.015 h);
+    --psi-fill-neutral3: oklch(from var(--psi-palette-obsidian) 0.23 0.018 h);
+    --psi-fill-neutral4: oklch(from var(--psi-palette-obsidian) 0.26 0.02 h);
+    --psi-fill-neutral5: oklch(from var(--psi-palette-obsidian) 0.29 0.022 h);
+    --psi-fill-neutral6: oklch(from var(--psi-palette-obsidian) 0.32 0.025 h);
+    --psi-fill-accent: var(--psi-palette-sapphire);
+    --psi-fill-success: oklch(from var(--psi-palette-emerald) l min(c, 0.1285) h);
+    --psi-fill-warning: var(--psi-palette-amber);
+    --psi-fill-danger: var(--psi-palette-ruby);
+    --psi-fill-tint-accent: oklch(from var(--psi-fg-accent) l c h / 0.15);
+    --psi-fill-tint-success: oklch(from var(--psi-fg-success) l c h / 0.15);
+    --psi-fill-tint-warning: oklch(from var(--psi-fg-warning) l c h / 0.15);
+    --psi-fill-tint-danger: oklch(from var(--psi-fg-danger) l c h / 0.15);
+    --psi-border-faint: oklch(from var(--psi-fg-primary) l c h / 0.08);
+    --psi-border-neutral: oklch(from var(--psi-fg-primary) l c h / 0.15);
+    --psi-border-strong: oklch(from var(--psi-fg-primary) l c h / 0.3);
+    --psi-border-focus: var(--psi-fg-accent);
+    --psi-scrim-soft: oklch(from var(--psi-bg-primary) l c h / 0.25);
+    --psi-scrim-medium: oklch(from var(--psi-bg-primary) l c h / 0.35);
+    --psi-scrim-heavy: oklch(from var(--psi-bg-primary) l c h / 0.82);
+  }
+}