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.
49 lines
2.2 KiB
TypeScript
49 lines
2.2 KiB
TypeScript
import { Head, Html, Main, NextScript } from 'next/document'
|
|
import { bootScript } from '@hanzo/appearance/state'
|
|
|
|
const DESCRIPTION =
|
|
'Ask Blue, a beluga whale and marine scientist at Zoo Labs Foundation, and search every paper and proposal the foundation has published.'
|
|
|
|
/**
|
|
* `light` is the design system's own theme class, and this site is a light one:
|
|
* paper ground, black ink, the deep painting its own dark room over the top. It
|
|
* has to be said HERE because @hanzo/design scopes the light half of every
|
|
* colour token to `.light` — without it `--text-primary` stays the dark theme's
|
|
* near-white and base.css paints every heading white on paper. `defaultTheme` on
|
|
* GuiProvider only ever answered for gui's own tokens.
|
|
*
|
|
* The script is the appearance preference, back on the document before the first
|
|
* paint. hanzo.ai carries it in an app-router `layout.tsx`; the same string goes
|
|
* in `<Head>` here, which is a rung better — parsed in the head there is no frame
|
|
* to flash, where the body runs after the browser already has something to paint.
|
|
* The panel writes the preference to storage; this is the half that reads it, so
|
|
* a choice survives a reload instead of lasting until the tab moves. Everything
|
|
* else about it — validating a colour, reacting to a change — is `useAppearance`
|
|
* in components/Look.
|
|
*/
|
|
export default function Document() {
|
|
return (
|
|
<Html lang="en" className="light">
|
|
<Head>
|
|
<script dangerouslySetInnerHTML={{ __html: bootScript() }} />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<meta name="theme-color" content="#f5e8c8" />
|
|
<meta name="description" content={DESCRIPTION} />
|
|
|
|
<meta property="og:title" content="Zoo Labs — Ask Blue" />
|
|
<meta property="og:description" content={DESCRIPTION} />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:url" content="https://zoolabs.io" />
|
|
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Zoo Labs — Ask Blue" />
|
|
<meta name="twitter:description" content={DESCRIPTION} />
|
|
</Head>
|
|
<body>
|
|
<Main />
|
|
<NextScript />
|
|
</body>
|
|
</Html>
|
|
)
|
|
}
|