mirror of
https://github.com/hanzoai/brand.git
synced 2026-10-23 03:05:28 +00:00
zeekayandHanzo Dev
04c919c4d9
variables.css was a hand-authored palette that had drifted from the system — a purple accent, a Zen type stack, blue/amber status hues, its own surface blacks. It is now @hanzo/tokens' generated bundle, re-emitted by scripts/gen-variables.mjs, so the Go dashboards that vendor this sheet (ci/cd/git) share the one monochrome palette. A short compatibility block aliases the legacy names those consumers still reference (--hanzo-accent -> the ink, --error/--success -> the state hues, --border-hairline -> --border, ...) onto the generated tokens, so nothing that links this sheet stops resolving. Edit @hanzo/tokens src/theme.ts and run `pnpm gen`. Co-authored-by: Hanzo Dev <[email protected]>
243 lines
8.7 KiB
CSS
243 lines
8.7 KiB
CSS
/**
|
|
* @hanzo/brand — CSS custom properties.
|
|
*
|
|
* AUTO-GENERATED by scripts/gen-variables.mjs from @hanzo/tokens — DO NOT EDIT.
|
|
* Edit the token in @hanzo/tokens src/theme.ts and re-run `pnpm gen` here (which
|
|
* regenerates from the freshly built @hanzo/tokens bundle).
|
|
*
|
|
* Hanzo is monochrome — one hue through an opacity ladder, dark by default.
|
|
* Usage: @import '@hanzo/brand/styles/variables.css';
|
|
* or: <link rel="stylesheet" href="https://unpkg.com/@hanzo/brand/styles/variables.css">
|
|
*/
|
|
|
|
/* Hanzo design tokens — colour + radius + type + spacing. The full bundle. */
|
|
|
|
:root{
|
|
color-scheme:dark;
|
|
|
|
/* ——— base neutral ladder ——— */
|
|
--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;
|
|
|
|
/* ——— the opacity ladder: the real palette ——— */
|
|
--white-03:rgb(255 255 255 / .03); /* the raised fill */
|
|
--white-05:rgb(255 255 255 / .05);
|
|
--white-06:rgb(255 255 255 / .06);
|
|
--white-08:rgb(255 255 255 / .08);
|
|
--white-10:rgb(255 255 255 / .10);
|
|
--white-14:rgb(255 255 255 / .14); /* selection wash */
|
|
--white-15:rgb(255 255 255 / .15);
|
|
--white-16:rgb(255 255 255 / .16);
|
|
--white-18:rgb(255 255 255 / .18); /* selection tint */
|
|
--white-20:rgb(255 255 255 / .20);
|
|
--white-22:rgb(255 255 255 / .22);
|
|
--white-30:rgb(255 255 255 / .30);
|
|
--white-40:rgb(255 255 255 / .40);
|
|
--white-45:rgb(255 255 255 / .45); /* the dimmest ink */
|
|
--white-55:rgb(255 255 255 / .55);
|
|
--white-60:rgb(255 255 255 / .60);
|
|
--white-78:rgb(255 255 255 / .78);
|
|
--white-80:rgb(255 255 255 / .80);
|
|
--white-92:rgb(255 255 255 / .92); /* body ink */
|
|
|
|
/* ——— semantic aliases (dark, the default) ——— */
|
|
--background:#0a0a0a;
|
|
--foreground:#fafafa;
|
|
--card:#0f0f0f;
|
|
--card-foreground:#fafafa;
|
|
--popover:#0f0f0f;
|
|
--popover-foreground:#fafafa;
|
|
--primary:#fafafa;
|
|
--primary-hover:#e5e5e5;
|
|
--primary-foreground:#0a0a0a;
|
|
--secondary:#262626;
|
|
--secondary-hover:#333333;
|
|
--secondary-foreground:#fafafa;
|
|
--muted:#171717;
|
|
--muted-foreground:#a3a3a3;
|
|
--accent:#262626;
|
|
--accent-foreground:#fafafa;
|
|
--destructive:var(--state-error);
|
|
--destructive-hover:#dc2626; /* red-600 — deepens under the cursor */
|
|
--destructive-foreground:#fafafa;
|
|
|
|
/* ——— boundaries — ONE ladder, cut from alpha, graded by duty ——— */
|
|
--border:var(--white-10); /* the hairline */
|
|
--border-strong:var(--white-16); /* hover, emphasis */
|
|
--border-control:var(--white-15); /* a control's resting edge */
|
|
--border-focus:var(--white-22); /* that control, focused */
|
|
--border-selected:var(--white-30); /* the thing currently CHOSEN */
|
|
--input:var(--border-control); /* shadcn `border-input` — a control */
|
|
--ring:var(--white-40); /* the focus indicator — 3:1 non-text contrast */
|
|
--ring-halo:var(--white-10); /* the soft halo outside the ring */
|
|
--brand:#e4e4e7;
|
|
--brand-foreground:#09090b;
|
|
--brand-muted:#a3a3a3;
|
|
--black:#000000;
|
|
--white:#fafafa;
|
|
--selection:var(--white-20);
|
|
|
|
/* ——— glass: the lift ——— */
|
|
--glass:var(--white-05);
|
|
--glass-strong:var(--white-08);
|
|
|
|
/* ——— surface recipes ——— */
|
|
--surface-page:var(--background);
|
|
--surface-card:rgb(38 38 38 / .5); /* -> #181818 on the page */
|
|
--surface-card-emphasis:rgb(38 38 38 / .75); /* -> #1f1f1f — featured */
|
|
--surface-card-quiet:rgb(38 38 38 / .35); /* -> #141414 — story cards */
|
|
--surface-overlay:rgb(23 23 23 / .92); /* dropdown / popover panels */
|
|
--surface-header:rgb(0 0 0 / .7); /* fixed nav, with backdrop blur */
|
|
--surface-scrim:rgb(0 0 0 / .8); /* the dialog / sheet backdrop */
|
|
|
|
/* ——— the numeric surface ladder ——— */
|
|
--surface-0:var(--background);
|
|
--surface-1:var(--card);
|
|
--surface-2:var(--muted);
|
|
--surface-3:var(--secondary);
|
|
|
|
/* ——— text ranks — a graded ramp, not one flat white ——— */
|
|
--text-primary:#fafafa;
|
|
--text-secondary:var(--white-78);
|
|
--text-tertiary:var(--white-55);
|
|
--text-helper:var(--muted-foreground);
|
|
--text-disabled:var(--white-30);
|
|
|
|
/* ——— the ONLY permitted hues (DESIGN.md §2.4) ——— */
|
|
--state-error:#ef4444; /* red-500 — destructive / blocking error */
|
|
--state-error-text:#fca5a5; /* red-300 */
|
|
--state-error-bg:rgb(239 68 68 / .1);
|
|
--state-online:#4ade80; /* green-400 — live status dot */
|
|
--state-success:#22c55e; /* green-500 — "Free" / "Save N%" callouts */
|
|
--chrome-dot-red:rgb(239 68 68 / .6);
|
|
--chrome-dot-yellow:rgb(234 179 8 / .6);
|
|
--chrome-dot-green:rgb(34 197 94 / .6);
|
|
|
|
/* ——— radius ——— */
|
|
--radius:0.5rem;
|
|
--radius-sm:0.375rem; /* rounded-md — buttons, inputs */
|
|
--radius-md:0.5rem;
|
|
--radius-lg:0.75rem; /* rounded-xl — cards */
|
|
--radius-xl:1rem; /* rounded-2xl — dropdown panels */
|
|
--radius-2xl:1.5rem; /* rounded-3xl — story / hero cards */
|
|
--radius-composer:28px; /* the chat composer, exactly 28px */
|
|
--radius-full:9999px; /* pills, CTAs, avatars, badges */
|
|
|
|
/* ——— type — Geist + Geist Mono, self-hosted ——— */
|
|
--font-sans:'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
--font-mono:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
|
|
--font-size-xs:0.6875rem; /* 11px — eyebrows / section labels */
|
|
--font-size-sm:0.8125rem; /* 13px — nav labels, dense body */
|
|
--font-size-base:0.875rem; /* 14px — base app text */
|
|
--font-size-lg:0.9375rem; /* 15px */
|
|
--font-size-xl:1.0625rem; /* 17px */
|
|
--font-size-2xl:1.3125rem; /* 21px */
|
|
--font-size-3xl:1.625rem; /* 26px */
|
|
--font-size-4xl:2rem; /* 32px */
|
|
--font-size-5xl:2.5rem; /* 40px */
|
|
--font-size-6xl:3.25rem; /* 52px */
|
|
--font-size-7xl:4rem; /* 64px */
|
|
--font-size-8xl:5.25rem; /* 84px */
|
|
--font-size-9xl:7rem; /* 112px */
|
|
|
|
/* ——— spacing — the 4px ramp ——— */
|
|
--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-16:4rem;
|
|
--space-20:5rem;
|
|
--space-24:6rem;
|
|
}
|
|
|
|
.light{
|
|
color-scheme:light;
|
|
|
|
/* ——— semantic aliases (light) ——— */
|
|
--background:#f7f7f7;
|
|
--foreground:#0a0a0a;
|
|
--card:#f2f2f2;
|
|
--card-foreground:#0a0a0a;
|
|
--popover:#fbfbfb;
|
|
--popover-foreground:#0a0a0a;
|
|
--primary:#0a0a0a;
|
|
--primary-hover:#262626;
|
|
--primary-foreground:#fafafa;
|
|
--secondary:#e4e4e4;
|
|
--secondary-hover:#e0e0e0;
|
|
--secondary-foreground:#0a0a0a;
|
|
--muted:#ededed;
|
|
--muted-foreground:#525252;
|
|
--accent:#e4e4e4;
|
|
--accent-foreground:#0a0a0a;
|
|
--destructive:var(--state-error);
|
|
--destructive-hover:#dc2626;
|
|
--destructive-foreground:#ffffff;
|
|
|
|
/* ——— boundaries — restated as black-alpha ——— */
|
|
--border:rgb(0 0 0 / .10);
|
|
--border-strong:rgb(0 0 0 / .16);
|
|
--border-control:rgb(0 0 0 / .15);
|
|
--border-focus:rgb(0 0 0 / .32); /* pushed past .22: black-on-white reads fainter */
|
|
--border-selected:rgb(0 0 0 / .42);
|
|
--input:var(--border-control);
|
|
--ring:rgb(0 0 0 / .5); /* 3.98:1 on #ffffff, 3.67:1 on #f5f5f5 */
|
|
--ring-halo:rgb(0 0 0 / .07);
|
|
--black:#0a0a0a;
|
|
--white:#ffffff;
|
|
--selection:rgb(0 0 0 / .16);
|
|
|
|
/* ——— glass + surfaces (light) ——— */
|
|
--glass:rgb(0 0 0 / .04);
|
|
--glass-strong:rgb(0 0 0 / .07);
|
|
--surface-card:#f2f2f2;
|
|
--surface-card-emphasis:#fdfdfd;
|
|
--surface-card-quiet:#f5f5f5;
|
|
--surface-overlay:rgb(255 255 255 / .95);
|
|
--surface-header:rgb(255 255 255 / .8);
|
|
--surface-scrim:rgb(0 0 0 / .5);
|
|
|
|
/* ——— text ranks (light) ——— */
|
|
--text-primary:var(--neutral-950);
|
|
--text-secondary:rgb(10 10 10 / .78);
|
|
--text-tertiary:rgb(10 10 10 / .55);
|
|
--text-disabled:rgb(10 10 10 / .3);
|
|
}
|
|
|
|
/* ——— compatibility aliases ———
|
|
Legacy @hanzo/brand names, each aliased onto a generated token so existing
|
|
consumers keep resolving while the value converges on the one system. Prefer
|
|
the token names above in new code. */
|
|
:root{
|
|
--border-hairline:var(--border);
|
|
--border-hairline-strong:var(--border-strong);
|
|
--radius-card:var(--radius);
|
|
--error:var(--state-error);
|
|
--success:var(--state-success);
|
|
--warning:#f59e0b; /* build-status amber, sibling of --chrome-dot-yellow */
|
|
--warning-light:#fcd34d;
|
|
--text-muted:var(--text-tertiary);
|
|
/* The one accent is the ink itself — monochrome, no purple. */
|
|
--hanzo-accent:var(--foreground);
|
|
--hanzo-accent-muted:var(--muted-foreground);
|
|
--hanzo-accent-soft:var(--white-10);
|
|
}
|