@handamade/psi-tokens 0.3.0

package/dist/guidance.json

@@ -0,0 +1,129 @@
+{
+  "variants": [
+    {
+      "variant": "accent",
+      "intent": "Primary action, draws attention",
+      "typicalUse": "Submit, CTA, main action in a group"
+    },
+    {
+      "variant": "accent-subtle",
+      "intent": "Accent tone, lower visual weight",
+      "typicalUse": "Selected state, active filter, soft CTA"
+    },
+    {
+      "variant": "neutral",
+      "intent": "Default, structurally present",
+      "typicalUse": "Secondary actions, toolbar buttons"
+    },
+    {
+      "variant": "neutral-subtle",
+      "intent": "Minimal chrome",
+      "typicalUse": "Inline actions, table row actions"
+    },
+    {
+      "variant": "ghost",
+      "intent": "No visible container until hover",
+      "typicalUse": "Icon-only triggers, compact toolbars"
+    },
+    {
+      "variant": "outline",
+      "intent": "Bordered ghost — visible structure, no fill until hover",
+      "typicalUse": "Marketing CTA, download button; hover fills accent"
+    },
+    {
+      "variant": "danger",
+      "intent": "Destructive action",
+      "typicalUse": "Delete, remove, disconnect"
+    },
+    {
+      "variant": "danger-subtle",
+      "intent": "Destructive context, low urgency",
+      "typicalUse": "Warning badges, soft destructive hints"
+    },
+    {
+      "variant": "success | warning",
+      "intent": "Status communication (Tag only)",
+      "typicalUse": "Status badges, labels"
+    }
+  ],
+  "rules": [
+    "One accent per visual group; everything else neutral or ghost.",
+    "danger only for actions with real consequences.",
+    "Sizes are px numbers (24|32|40|48), never S/M/L.",
+    "Typography tokens are --psi-text-{size}-{lineHeight}-{weight}.",
+    "Override component tokens (--psi-{component}-*), not semantic tokens, for one-off theming.",
+    "--psi-button-font overrides button typography across all sizes (documented D34 override; ember → mono)."
+  ],
+  "states": {
+    "hover": "L - 0.04",
+    "active": "L - 0.08",
+    "disabled": "element opacity 0.4 (keeps hue)",
+    "focus": "2px ring var(--psi-{component}-focus-ring)"
+  },
+  "typographyDefaults": {
+    "body": "16-24-regular",
+    "compactUI": "14-20-regular",
+    "heading": "24-32-medium",
+    "caption": "12-16-regular"
+  },
+  "fonts": {
+    "roles": [
+      "sans",
+      "serif",
+      "mono",
+      "display"
+    ],
+    "note": "Font roles are brand-level (D29). The DS ships no font files: consumers load each brand's webfonts themselves.",
+    "brands": {
+      "ember": {
+        "archivo": "800,900 (display/sans)",
+        "ibmPlexSerif": "400 (serif)",
+        "ibmPlexMono": "400,500 (mono)"
+      }
+    },
+    "scope": "Brand font stacks fully apply when data-psi-theme is on the root <html> element (the standard consumer setup). In nested subtree theming, --psi-text-*/--psi-display-* combos keep the default stacks: custom properties substitute at :root."
+  },
+  "motion": {
+    "durations": [
+      150,
+      200,
+      350,
+      450,
+      600
+    ],
+    "easings": {
+      "standard": "ease",
+      "in-out": "ease-in-out",
+      "soft": "cubic-bezier(0.2, 0.6, 0.2, 1)"
+    },
+    "reducedMotion": "All --psi-duration-* zero under prefers-reduced-motion (D30). Always drive transitions/animations with duration tokens; never hardcode times.",
+    "recipes": {
+      "pulseDown": "App-level keyframe (the DS ships none): @keyframes pulse-down { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(6px); opacity: 1; } } — drive with var(--psi-ease-in-out)."
+    }
+  },
+  "layout": {
+    "breakpoints": {
+      "sm": 560,
+      "md": 960
+    },
+    "note": "Breakpoints are build-time constants (D31): import { breakpoints } from '@handamade/psi-tokens/types'. CSS vars cannot drive @media.",
+    "container": "Use .psi-container — max-width 1312px, gutter 40px stepping to 24px under md.",
+    "zIndex": {
+      "nav": 100,
+      "overlay": 1000,
+      "tooltip": 1100
+    }
+  },
+  "recipes": {
+    "mediaTint": "Apply .psi-media-tint to media elements; the brand defines --psi-media-tint (D35). Hover/focus reveals true color over --psi-duration-450 --psi-ease-soft.",
+    "sectionHeader": "SectionHeader ships as a recipe, not a component (v1.2 non-goal): baseline-aligned flex row — mono annotation (--psi-text-mono-14-20-regular, --psi-fg-accent) + h2 (.psi-display-32-32-extrabold) + optional trailing meta, border-bottom 1px var(--psi-border-faint), padding-bottom var(--psi-space-20)."
+  },
+  "tags": {
+    "accentRule": "Tags are passive labels and do not count against 'one accent per visual group' — that rule governs interactive emphasis (buttons/CTAs). D40.",
+    "badges": {
+      "highlight": "accent-subtle",
+      "meta": "neutral-subtle",
+      "status": "success | warning | danger"
+    }
+  }
+}

package/dist/light.css

@@ -0,0 +1,47 @@
+@layer psi.theme {
+  :root, [data-psi-theme="light"] {
+    --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: var(--psi-palette-platinum);
+    --psi-bg-secondary: oklch(from var(--psi-palette-platinum) calc(l + 0.03) c h);
+    --psi-fg-primary: oklch(from var(--psi-palette-obsidian) 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-platinum);
+    --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.48 min(c, 0.23) h);
+    --psi-fg-success: oklch(from var(--psi-palette-emerald) 0.48 min(c, 0.1187) h);
+    --psi-fg-warning: oklch(from var(--psi-palette-amber) 0.48 min(c, 0.1013) h);
+    --psi-fg-danger: oklch(from var(--psi-palette-ruby) 0.48 min(c, 0.1946) h);
+    --psi-fill-neutral1: oklch(from var(--psi-palette-platinum) calc(l + 0.016) calc(c - 0.001) h);
+    --psi-fill-neutral2: var(--psi-palette-platinum);
+    --psi-fill-neutral3: oklch(from var(--psi-palette-platinum) calc(l - 0.017) calc(c + 0.001) h);
+    --psi-fill-neutral4: oklch(from var(--psi-palette-platinum) calc(l - 0.034) calc(c + 0.002) h);
+    --psi-fill-neutral5: oklch(from var(--psi-palette-platinum) calc(l - 0.032) calc(c + 0.003) h);
+    --psi-fill-neutral6: oklch(from var(--psi-palette-platinum) calc(l - 0.048) calc(c + 0.004) 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.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);
+  }
+}