@hanzo/design 0.1.0 → 0.2.0

package/dist/tokens.gen.js

@@ -0,0 +1,414 @@
+// AUTO-GENERATED by scripts/gen-tokens.mjs from tokens/*.css — DO NOT EDIT.
+// Edit the token in tokens/<group>.css and re-run `npm run gen`.
+/* eslint-disable */
+/** colors tokens (from tokens/colors.css). Values are raw CSS. */
+export const colors = {
+    'neutral-50': '#FAFAFA',
+    'neutral-100': '#F5F5F5',
+    'neutral-200': '#E5E5E5',
+    'neutral-300': '#D4D4D4',
+    'neutral-400': '#A3A3A3',
+    'neutral-500': '#737373',
+    'neutral-600': '#525252',
+    'neutral-700': '#404040',
+    'neutral-800': '#262626',
+    'neutral-900': '#171717',
+    'neutral-950': '#0A0A0A',
+    'pure-black': '#000000',
+    'pure-white': '#FFFFFF',
+    'hanzo-black': '#0A0A0B',
+    'hanzo-white': '#FFFFFF',
+    'white-05': 'rgb(255 255 255 / .05)',
+    'white-10': 'rgb(255 255 255 / .10)',
+    'white-15': 'rgb(255 255 255 / .15)',
+    'white-20': 'rgb(255 255 255 / .20)',
+    'white-30': 'rgb(255 255 255 / .30)',
+    'white-40': 'rgb(255 255 255 / .40)',
+    'white-60': 'rgb(255 255 255 / .60)',
+    'white-80': 'rgb(255 255 255 / .80)',
+    'background': '#000000',
+    'foreground': '#ededed',
+    'card': '#0a0a0a',
+    'card-foreground': '#f5f5f5',
+    'popover': '#0a0a0a',
+    'popover-foreground': '#f5f5f5',
+    'primary': '#ffffff',
+    'primary-foreground': '#000000',
+    'secondary': '#1a1a1a',
+    'secondary-foreground': '#f5f5f5',
+    'muted': '#101010',
+    'muted-foreground': '#888888',
+    'accent': '#1a1a1a',
+    'accent-foreground': '#f5f5f5',
+    'destructive': '#666666',
+    'destructive-foreground': '#f5f5f5',
+    'border': '#1f1f1f',
+    'input': '#1f1f1f',
+    'ring': '#333333',
+    'brand': '#e4e4e7',
+    'brand-foreground': '#09090b',
+    'brand-muted': '#a3a3a3',
+    'black': '#000000',
+    'white': '#f5f5f5',
+    'surface-page': 'var(--background)',
+    'surface-card': 'rgb(23 23 23 / .5)',
+    'surface-card-emphasis': 'rgb(23 23 23 / .8)',
+    'surface-card-quiet': 'rgb(23 23 23 / .4)',
+    'surface-overlay': 'rgb(10 10 10 / .95)',
+    'surface-header': 'rgb(0 0 0 / .7)',
+    'border-hairline': 'var(--neutral-800)',
+    'border-card': 'var(--white-10)',
+    'border-strong': 'var(--neutral-700)',
+    'text-primary': 'var(--pure-white)',
+    'text-secondary': 'var(--white-80)',
+    'text-tertiary': 'var(--white-60)',
+    'text-helper': 'var(--muted-foreground)',
+    'text-disabled': 'var(--white-30)',
+    'state-error': '#ef4444',
+    'state-error-text': '#fca5a5',
+    'state-error-bg': 'rgb(239 68 68 / .1)',
+    'state-online': '#4ade80',
+    'state-success': '#22c55e',
+    'chrome-dot-red': 'rgb(239 68 68 / .6)',
+    'chrome-dot-yellow': 'rgb(234 179 8 / .6)',
+    'chrome-dot-green': 'rgb(34 197 94 / .6)',
+};
+/** typography tokens (from tokens/typography.css). Values are raw CSS. */
+export const typography = {
+    'text-xs': '0.6875rem',
+    'leading-xs': '1rem',
+    'text-sm': '0.8125rem',
+    'leading-sm': '1.15rem',
+    'text-base': '0.875rem',
+    'leading-base': '1.35rem',
+    'text-lg': '0.9375rem',
+    'leading-lg': '1.4rem',
+    'text-xl': '1.0625rem',
+    'leading-xl': '1.55rem',
+    'text-2xl': '1.3125rem',
+    'leading-2xl': '1.7rem',
+    'text-3xl': '1.625rem',
+    'leading-3xl': '1.95rem',
+    'text-4xl': '2rem',
+    'leading-4xl': '2.25rem',
+    'text-5xl': '2.5rem',
+    'leading-5xl': '1.05',
+    'text-6xl': '3.25rem',
+    'leading-6xl': '1',
+    'text-7xl': '4rem',
+    'leading-7xl': '1',
+    'weight-normal': '400',
+    'weight-medium': '500',
+    'weight-semibold': '600',
+    'weight-bold': '700',
+    'tracking-tight': '-0.025em',
+    'tracking-normal': '0em',
+    'tracking-wide': '0.025em',
+    'tracking-widest': '0.1em',
+    'leading-none': '1',
+    'leading-tight': '1.25',
+    'leading-snug': '1.375',
+    'leading-normal': '1.5',
+    'leading-relaxed': '1.625',
+    'leading-golden': '1.618',
+    'type-hero': '600 var(--text-5xl)/1.05 var(--font-display)',
+    'type-h2': '700 var(--text-4xl)/var(--leading-4xl) var(--font-display)',
+    'type-h3': '600 var(--text-xl)/var(--leading-xl) var(--font-display)',
+    'type-lead': '400 var(--text-lg)/var(--leading-relaxed) var(--font-sans)',
+    'type-body': '400 var(--text-sm)/var(--leading-sm) var(--font-sans)',
+    'type-caption': '400 var(--text-xs)/var(--leading-xs) var(--font-sans)',
+    'type-code': '400 var(--text-sm)/var(--leading-relaxed) var(--font-mono)',
+    'type-eyebrow': '600 0.625rem/1 var(--font-sans)',
+};
+/** spacing tokens (from tokens/spacing.css). Values are raw CSS. */
+export const spacing = {
+    'space-0': '0',
+    'space-1': '0.25rem',
+    'space-2': '0.5rem',
+    'space-3': '0.75rem',
+    'space-4': '1rem',
+    'space-5': '1.25rem',
+    'space-6': '1.5rem',
+    'space-8': '2rem',
+    'space-10': '2.5rem',
+    'space-12': '3rem',
+    'space-14': '3.5rem',
+    'space-16': '4rem',
+    'space-20': '5rem',
+    'space-24': '6rem',
+    'space-32': '8rem',
+    'golden-1': '0.25rem',
+    'golden-2': '0.405rem',
+    'golden-3': '0.654rem',
+    'golden-4': '1.059rem',
+    'golden-5': '1.713rem',
+    'golden-6': '2.772rem',
+    'golden-7': '4.487rem',
+    'golden-8': '7.26rem',
+    'golden-9': '11.749rem',
+    'golden-split': '38.2% 61.8%',
+    'container-max': '80rem',
+    'container-prose': '48rem',
+    'container-wide': '72rem',
+    'gutter': '1rem',
+    'gutter-sm': '1.5rem',
+    'gutter-lg': '2rem',
+    'section-y': '4rem',
+    'section-y-lg': '6rem',
+    'hero-y': '5rem',
+    'hero-y-lg': '8rem',
+    'header-height': '4rem',
+};
+/** radius tokens (from tokens/radius.css). Values are raw CSS. */
+export const radius = {
+    'radius': '0.5rem',
+    'radius-sm': '0.375rem',
+    'radius-md': '0.5rem',
+    'radius-lg': '0.75rem',
+    'radius-xl': '1rem',
+    'radius-2xl': '1.5rem',
+    'radius-composer': '28px',
+    'radius-full': '9999px',
+};
+/** elevation tokens (from tokens/elevation.css). Values are raw CSS. */
+export const elevation = {
+    'shadow-none': 'none',
+    'shadow-floating': '0 25px 50px -12px rgb(0 0 0 / .25)',
+    'shadow-inset-hairline': 'inset 0 0 0 1px var(--white-10)',
+    'ring-focus': '0 0 0 2px var(--ring)',
+    'glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
+    'glow-hero-blur': '120px',
+    'sheen-card': 'radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%)',
+    'gradient-chrome': 'linear-gradient(to right,#ffffff,var(--white-80),var(--white-60))',
+    'gradient-chrome-2': 'linear-gradient(to right,#ffffff,var(--neutral-500))',
+    'gradient-protect': 'linear-gradient(to bottom,var(--white-10),transparent)',
+};
+/** motion tokens (from tokens/motion.css). Values are raw CSS. */
+export const motion = {
+    'duration-fast': '150ms',
+    'duration-base': '300ms',
+    'duration-slow': '400ms',
+    'duration-slower': '500ms',
+    'duration-glow': '9s',
+    'ease-out': 'cubic-bezier(0,0,0.2,1)',
+    'ease-in-out': 'cubic-bezier(0.4,0,0.2,1)',
+    'stagger': '60ms',
+    'entry-rise': '16px',
+    'entry-rise-lg': '24px',
+};
+/** zIndex tokens (from tokens/z.css). Values are raw CSS. */
+export const zIndex = {
+    'z-base': '0',
+    'z-raised': '10',
+    'z-sticky': '200',
+    'z-header': '300',
+    'z-dropdown': '400',
+    'z-overlay': '500',
+    'z-modal': '600',
+    'z-popover': '700',
+    'z-toast': '800',
+};
+/** fonts tokens (from tokens/fonts.css). Values are raw CSS. */
+export const fonts = {
+    'font-sans': '"Geist","Geist Sans",ui-sans-serif,system-ui,sans-serif',
+    'font-display': 'var(--font-sans)',
+    'font-mono': '"Geist Mono",ui-monospace,SFMono-Regular,monospace',
+    'font-serif': 'Georgia,serif',
+    'font-feature-settings': '"ss01","ss02","cv01","cv02","cv03"',
+};
+/** base tokens (from tokens/base.css). Values are raw CSS. */
+export const base = {};
+/** Every token, keyed by its literal CSS custom-property name ('--background', …). */
+export const cssVars = {
+    '--neutral-50': '#FAFAFA',
+    '--neutral-100': '#F5F5F5',
+    '--neutral-200': '#E5E5E5',
+    '--neutral-300': '#D4D4D4',
+    '--neutral-400': '#A3A3A3',
+    '--neutral-500': '#737373',
+    '--neutral-600': '#525252',
+    '--neutral-700': '#404040',
+    '--neutral-800': '#262626',
+    '--neutral-900': '#171717',
+    '--neutral-950': '#0A0A0A',
+    '--pure-black': '#000000',
+    '--pure-white': '#FFFFFF',
+    '--hanzo-black': '#0A0A0B',
+    '--hanzo-white': '#FFFFFF',
+    '--white-05': 'rgb(255 255 255 / .05)',
+    '--white-10': 'rgb(255 255 255 / .10)',
+    '--white-15': 'rgb(255 255 255 / .15)',
+    '--white-20': 'rgb(255 255 255 / .20)',
+    '--white-30': 'rgb(255 255 255 / .30)',
+    '--white-40': 'rgb(255 255 255 / .40)',
+    '--white-60': 'rgb(255 255 255 / .60)',
+    '--white-80': 'rgb(255 255 255 / .80)',
+    '--background': '#000000',
+    '--foreground': '#ededed',
+    '--card': '#0a0a0a',
+    '--card-foreground': '#f5f5f5',
+    '--popover': '#0a0a0a',
+    '--popover-foreground': '#f5f5f5',
+    '--primary': '#ffffff',
+    '--primary-foreground': '#000000',
+    '--secondary': '#1a1a1a',
+    '--secondary-foreground': '#f5f5f5',
+    '--muted': '#101010',
+    '--muted-foreground': '#888888',
+    '--accent': '#1a1a1a',
+    '--accent-foreground': '#f5f5f5',
+    '--destructive': '#666666',
+    '--destructive-foreground': '#f5f5f5',
+    '--border': '#1f1f1f',
+    '--input': '#1f1f1f',
+    '--ring': '#333333',
+    '--brand': '#e4e4e7',
+    '--brand-foreground': '#09090b',
+    '--brand-muted': '#a3a3a3',
+    '--black': '#000000',
+    '--white': '#f5f5f5',
+    '--surface-page': 'var(--background)',
+    '--surface-card': 'rgb(23 23 23 / .5)',
+    '--surface-card-emphasis': 'rgb(23 23 23 / .8)',
+    '--surface-card-quiet': 'rgb(23 23 23 / .4)',
+    '--surface-overlay': 'rgb(10 10 10 / .95)',
+    '--surface-header': 'rgb(0 0 0 / .7)',
+    '--border-hairline': 'var(--neutral-800)',
+    '--border-card': 'var(--white-10)',
+    '--border-strong': 'var(--neutral-700)',
+    '--text-primary': 'var(--pure-white)',
+    '--text-secondary': 'var(--white-80)',
+    '--text-tertiary': 'var(--white-60)',
+    '--text-helper': 'var(--muted-foreground)',
+    '--text-disabled': 'var(--white-30)',
+    '--state-error': '#ef4444',
+    '--state-error-text': '#fca5a5',
+    '--state-error-bg': 'rgb(239 68 68 / .1)',
+    '--state-online': '#4ade80',
+    '--state-success': '#22c55e',
+    '--chrome-dot-red': 'rgb(239 68 68 / .6)',
+    '--chrome-dot-yellow': 'rgb(234 179 8 / .6)',
+    '--chrome-dot-green': 'rgb(34 197 94 / .6)',
+    '--text-xs': '0.6875rem',
+    '--leading-xs': '1rem',
+    '--text-sm': '0.8125rem',
+    '--leading-sm': '1.15rem',
+    '--text-base': '0.875rem',
+    '--leading-base': '1.35rem',
+    '--text-lg': '0.9375rem',
+    '--leading-lg': '1.4rem',
+    '--text-xl': '1.0625rem',
+    '--leading-xl': '1.55rem',
+    '--text-2xl': '1.3125rem',
+    '--leading-2xl': '1.7rem',
+    '--text-3xl': '1.625rem',
+    '--leading-3xl': '1.95rem',
+    '--text-4xl': '2rem',
+    '--leading-4xl': '2.25rem',
+    '--text-5xl': '2.5rem',
+    '--leading-5xl': '1.05',
+    '--text-6xl': '3.25rem',
+    '--leading-6xl': '1',
+    '--text-7xl': '4rem',
+    '--leading-7xl': '1',
+    '--weight-normal': '400',
+    '--weight-medium': '500',
+    '--weight-semibold': '600',
+    '--weight-bold': '700',
+    '--tracking-tight': '-0.025em',
+    '--tracking-normal': '0em',
+    '--tracking-wide': '0.025em',
+    '--tracking-widest': '0.1em',
+    '--leading-none': '1',
+    '--leading-tight': '1.25',
+    '--leading-snug': '1.375',
+    '--leading-normal': '1.5',
+    '--leading-relaxed': '1.625',
+    '--leading-golden': '1.618',
+    '--type-hero': '600 var(--text-5xl)/1.05 var(--font-display)',
+    '--type-h2': '700 var(--text-4xl)/var(--leading-4xl) var(--font-display)',
+    '--type-h3': '600 var(--text-xl)/var(--leading-xl) var(--font-display)',
+    '--type-lead': '400 var(--text-lg)/var(--leading-relaxed) var(--font-sans)',
+    '--type-body': '400 var(--text-sm)/var(--leading-sm) var(--font-sans)',
+    '--type-caption': '400 var(--text-xs)/var(--leading-xs) var(--font-sans)',
+    '--type-code': '400 var(--text-sm)/var(--leading-relaxed) var(--font-mono)',
+    '--type-eyebrow': '600 0.625rem/1 var(--font-sans)',
+    '--space-0': '0',
+    '--space-1': '0.25rem',
+    '--space-2': '0.5rem',
+    '--space-3': '0.75rem',
+    '--space-4': '1rem',
+    '--space-5': '1.25rem',
+    '--space-6': '1.5rem',
+    '--space-8': '2rem',
+    '--space-10': '2.5rem',
+    '--space-12': '3rem',
+    '--space-14': '3.5rem',
+    '--space-16': '4rem',
+    '--space-20': '5rem',
+    '--space-24': '6rem',
+    '--space-32': '8rem',
+    '--golden-1': '0.25rem',
+    '--golden-2': '0.405rem',
+    '--golden-3': '0.654rem',
+    '--golden-4': '1.059rem',
+    '--golden-5': '1.713rem',
+    '--golden-6': '2.772rem',
+    '--golden-7': '4.487rem',
+    '--golden-8': '7.26rem',
+    '--golden-9': '11.749rem',
+    '--golden-split': '38.2% 61.8%',
+    '--container-max': '80rem',
+    '--container-prose': '48rem',
+    '--container-wide': '72rem',
+    '--gutter': '1rem',
+    '--gutter-sm': '1.5rem',
+    '--gutter-lg': '2rem',
+    '--section-y': '4rem',
+    '--section-y-lg': '6rem',
+    '--hero-y': '5rem',
+    '--hero-y-lg': '8rem',
+    '--header-height': '4rem',
+    '--radius': '0.5rem',
+    '--radius-sm': '0.375rem',
+    '--radius-md': '0.5rem',
+    '--radius-lg': '0.75rem',
+    '--radius-xl': '1rem',
+    '--radius-2xl': '1.5rem',
+    '--radius-composer': '28px',
+    '--radius-full': '9999px',
+    '--shadow-none': 'none',
+    '--shadow-floating': '0 25px 50px -12px rgb(0 0 0 / .25)',
+    '--shadow-inset-hairline': 'inset 0 0 0 1px var(--white-10)',
+    '--ring-focus': '0 0 0 2px var(--ring)',
+    '--glow-hero': 'radial-gradient(circle,rgb(255 255 255 / .12) 0%,transparent 68%)',
+    '--glow-hero-blur': '120px',
+    '--sheen-card': 'radial-gradient(120% 120% at 80% 0%,rgb(255 255 255 / .08) 0%,transparent 55%)',
+    '--gradient-chrome': 'linear-gradient(to right,#ffffff,var(--white-80),var(--white-60))',
+    '--gradient-chrome-2': 'linear-gradient(to right,#ffffff,var(--neutral-500))',
+    '--gradient-protect': 'linear-gradient(to bottom,var(--white-10),transparent)',
+    '--duration-fast': '150ms',
+    '--duration-base': '300ms',
+    '--duration-slow': '400ms',
+    '--duration-slower': '500ms',
+    '--duration-glow': '9s',
+    '--ease-out': 'cubic-bezier(0,0,0.2,1)',
+    '--ease-in-out': 'cubic-bezier(0.4,0,0.2,1)',
+    '--stagger': '60ms',
+    '--entry-rise': '16px',
+    '--entry-rise-lg': '24px',
+    '--z-base': '0',
+    '--z-raised': '10',
+    '--z-sticky': '200',
+    '--z-header': '300',
+    '--z-dropdown': '400',
+    '--z-overlay': '500',
+    '--z-modal': '600',
+    '--z-popover': '700',
+    '--z-toast': '800',
+    '--font-sans': '"Geist","Geist Sans",ui-sans-serif,system-ui,sans-serif',
+    '--font-display': 'var(--font-sans)',
+    '--font-mono': '"Geist Mono",ui-monospace,SFMono-Regular,monospace',
+    '--font-serif': 'Georgia,serif',
+    '--font-feature-settings': '"ss01","ss02","cv01","cv02","cv03"',
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hanzo/design",
-  "version": "0.1.0",
-  "description": "Hanzo Design System \u2014 monochrome, dark-default tokens + components + brand assets, the single source of truth for every Hanzo surface.",
+  "version": "0.2.0",
+  "description": "Hanzo Design System \u2014 monochrome, dark-default tokens + components + brand assets, the single source of truth for every Hanzo surface. CSS + typed programmatic tokens.",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -12,7 +12,14 @@
   "sideEffects": [
     "*.css"
   ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
     "./styles.css": "./styles.css",
     "./tokens/*": "./tokens/*",
     "./components/*": "./components/*",
@@ -20,7 +27,17 @@
     "./content/*": "./content/*",
     "./assets/*": "./assets/*"
   },
+  "scripts": {
+    "gen": "node scripts/gen-tokens.mjs",
+    "build": "npm run gen && tsc -p tsconfig.json",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  },
   "files": [
+    "dist",
+    "src",
     "styles.css",
     "tokens",
     "components",

package/src/index.ts

@@ -0,0 +1,47 @@
+// @hanzo/design — the ONE programmatic control plane for Hanzo's look & feel.
+//
+// The look/feel is authored ONCE as CSS custom properties in tokens/*.css
+// (monochrome, dark-default — "one hue through an opacity ladder"). This module
+// exposes those exact tokens to code, generated from the CSS so the two can
+// never drift. Change a token in the CSS → the stylesheet AND every code
+// consumer (the @hanzogui/shell theme, Tamagui, any TS surface) update together.
+//
+//   import '@hanzo/design/styles.css'                 // the CSS layer (unchanged)
+//   import { colors, spacing, radius, cssVar } from '@hanzo/design'  // the code layer
+//
+export * from './tokens.gen.js'
+import { cssVars, type CssVarName } from './tokens.gen.js'
+
+/**
+ * A `var(--name[, fallback])` reference to a token — the ONE way code should
+ * reach a token so it resolves through the live CSS cascade (honoring the
+ * viewer's light/dark theme) rather than baking a fixed value.
+ *
+ *   background: cssVar('--background')      // → "var(--background)"
+ *   color:      cssVar('--foreground', '#fff')
+ */
+export function cssVar(name: CssVarName | (string & {}), fallback?: string): string {
+  const n = name.startsWith('--') ? name : `--${name}`
+  return fallback ? `var(${n}, ${fallback})` : `var(${n})`
+}
+
+/** The raw authored value of a token (the literal from the CSS), or `undefined`. */
+export function tokenValue(name: CssVarName): string | undefined {
+  return (cssVars as Record<string, string>)[name]
+}
+
+/**
+ * Inject the design-system stylesheet from code (idempotent) for surfaces that
+ * cannot use a bundler CSS import (e.g. a runtime-mounted island). Prefer the
+ * static `import '@hanzo/design/styles.css'` where a bundler is available.
+ * No-op outside the browser.
+ */
+export function injectDesignCss(href = 'https://esm.sh/@hanzo/design/styles.css'): void {
+  if (typeof document === 'undefined') return
+  if (document.querySelector('link[data-hanzo-design]')) return
+  const l = document.createElement('link')
+  l.rel = 'stylesheet'
+  l.href = href
+  l.setAttribute('data-hanzo-design', '')
+  document.head.appendChild(l)
+}