mirror of
https://github.com/luxfi/brand.git
synced 2026-10-30 17:01:27 +00:00
zeekayandHanzo Dev
84365d8b4e
brand.json has carried a light and a dark theme for as long as this package has
existed, and nothing rendered from it: every surface fell back to Hanzo's
monochrome, so a brand could not look like itself while its own palette sat in
the file being read by nobody.
tokens.css is that theme projected onto @hanzo/design's semantic tokens. Import
it after the core and the cascade does the rest:
@import "@hanzo/design/styles.css";
@import "<this package>/tokens.css";
GENERATED, never authored, and regenerated on every build — a hand-written
stylesheet would be a second copy of the palette, and the lesson of the
placeholder mark is that a second copy is a thing that silently stops agreeing.
Only what a brand OWNS is emitted: ground, ink, accent, the edges drawn on them.
The radius scale, the type ramp, spacing, motion and z stay @hanzo/design's —
they are the system's grammar, not a brand's voice, and a brand that redefines
them is a fork wearing a stylesheet. A theme key the brand does not declare emits
nothing, so the core's own value stands rather than being overwritten with
undefined.
Verified in a browser, not by the file existing: all three theme states resolve —
system-light, forced dark, forced light — and the brand's accent holds across
them.
Co-authored-by: Hanzo Dev <[email protected]>
55 lines
1.5 KiB
CSS
55 lines
1.5 KiB
CSS
/* GENERATED from brand.json by scripts/tokens.mjs — do not edit.
|
|
Run `pnpm tokens`. The palette lives in brand.json; this is its projection
|
|
onto @hanzo/design's semantic tokens.
|
|
|
|
Import AFTER @hanzo/design/styles.css:
|
|
@import "@hanzo/design/styles.css";
|
|
@import "@luxfi/brand/tokens.css";
|
|
|
|
Only what a brand owns is here — ground, ink, accent, edges. The radius scale,
|
|
the type ramp, spacing, motion and z stay @hanzo/design's. */
|
|
|
|
:root{
|
|
--background:#000000;
|
|
--card:#1A1A1A;
|
|
--popover:#1A1A1A;
|
|
--muted:#1A1A1A;
|
|
--foreground:#FFFFFF;
|
|
--card-foreground:#FFFFFF;
|
|
--popover-foreground:#FFFFFF;
|
|
--accent-foreground:#FFFFFF;
|
|
--muted-foreground:rgba(255, 255, 255, 0.65);
|
|
--primary:#FFFFFF;
|
|
--primary-foreground:#000000;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light){
|
|
:root:not([data-theme="dark"]){
|
|
--background:#FFFFFF;
|
|
--card:#F9F9F9;
|
|
--popover:#F9F9F9;
|
|
--muted:#F9F9F9;
|
|
--foreground:#131313;
|
|
--card-foreground:#131313;
|
|
--popover-foreground:#131313;
|
|
--accent-foreground:#131313;
|
|
--muted-foreground:rgba(19, 19, 19, 0.63);
|
|
--primary:#000000;
|
|
--primary-foreground:#FFFFFF;
|
|
}
|
|
}
|
|
|
|
[data-theme="light"]{
|
|
--background:#FFFFFF;
|
|
--card:#F9F9F9;
|
|
--popover:#F9F9F9;
|
|
--muted:#F9F9F9;
|
|
--foreground:#131313;
|
|
--card-foreground:#131313;
|
|
--popover-foreground:#131313;
|
|
--accent-foreground:#131313;
|
|
--muted-foreground:rgba(19, 19, 19, 0.63);
|
|
--primary:#000000;
|
|
--primary-foreground:#FFFFFF;
|
|
}
|