mirror of
https://github.com/zoo-apps/zoolabs.io.git
synced 2026-10-30 14:56:27 +00:00
zeekay
81dc6df0ac
The design system's base layer had never applied. `@import … layer(base)`
compiles to `@media layer(base){ @layer base{ … } }`, and `layer(base)` is not a
media query, so it matched nothing: body computed Times New Roman and the rule
that takes the underline off a link never ran — ninety-five of them on the
research index. It is imported bare now; the file opens its own layer.
Nothing was asking for Zen by name either. The tokens that declare --font-sans
were the one @hanzo/design file this stylesheet did not import, so the variable
was empty and text got the face only where gui's own fallback happened to carry
it. One :root block binds the family from @hanzo/font, and no component spells a
typeface.
Type is rungs rather than numbers, on the two knobs zoo.ngo already derives its
register from, so the pages share a scale without restating a ramp. Display type
is stated on the element, because gui injects its letter-spacing class at render
and a site class ties on specificity and loses on order.
Appearance can now reach the whole page: the palette moved out of a TypeScript
object a stylesheet cannot see and into tokens, so the accent axis lands on the
send key instead of on nothing. The boot script runs in the head, a rung earlier
than the body, so the choice is in effect before the first paint. The light class
goes on the document because the light half of every colour token is scoped to
it, and with the base layer alive every heading would otherwise paint near-white
on paper.
25 lines
915 B
TypeScript
25 lines
915 B
TypeScript
/**
|
|
* The five hues of the Zoo mark — the CMYK Venn in components/ZooLogo — plus the
|
|
* ink and paper they sit on, named for the gui props that need a value.
|
|
*
|
|
* The VALUES are in styles/globals.css. A hex here would be a second copy of a
|
|
* colour, and worse, a copy no stylesheet can see: @hanzo/appearance retunes the
|
|
* page by writing custom properties, so a colour that is not one is a colour the
|
|
* reader's setting can never reach. Everything about size and spacing comes from
|
|
* `@hanzo/ui/gui-config`; only the foundation's identity is local, and this is
|
|
* how a component asks for it.
|
|
*/
|
|
export const BRAND = {
|
|
ink: 'var(--ink)',
|
|
paper: 'var(--paper)',
|
|
magenta: 'var(--magenta)',
|
|
green: 'var(--green)',
|
|
blue: 'var(--blue)',
|
|
cyan: 'var(--cyan)',
|
|
yellow: 'var(--yellow)',
|
|
red: 'var(--red)',
|
|
} as const
|
|
|
|
export type Hue = keyof typeof BRAND
|
|
export type Colour = (typeof BRAND)[Hue]
|