Header

1'use client'
2 
3import { cva, type VariantProps } from 'class-variance-authority'
4import React from 'react'
5 
6import { cn } from '@/lib/utils'
7 
8import { Badge, type BadgeProps } from '@/components/badge'
9import { Link } from '@/components/link'
10import { Logo } from '@/components/logo'
11 
12/**
13 * Surface colours the header can be themed with, sharing the Masthead's and
14 * SkipLink's four-name vocabulary (`dark`, `light`, `white`, `grey`) — the three
15 * components stack at the top of the page and a service picks one word for the
16 * whole chrome.
17 *
18 * Every pair is WCAG 2.2 AAA (1.4.6, 7:1), computed from the masterbrand oklch
19 * tokens. Light mode: grey-800 on white 15.1:1, grey-800 on grey-100 13.8:1,
20 * white on primary-800 14.4:1, white on grey-800 15.1:1. Dark mode deepens each
21 * surface onto the same family's dark step and clears AAA more comfortably
22 * still (17.2:1–20.2:1).
23 *
24 * Unlike the Masthead — a brand strip whose light/white/grey surfaces are frozen
25 * across themes — the header is the page's own surface, so all four follow the
26 * theme. Pair `Header color="dark"` with `Masthead color="dark"` when a service
27 * wants the two to match in both modes.
28 */
29const headerColors = {
30  // Ink values use the RAW masterbrand tokens (--grey-800) rather than
31  // Tailwind's --color-* bridge aliases: Tailwind v4 tree-shakes an
32  // unreferenced @theme key, and referencing one from inside an arbitrary
33  // property is not a usage signal. Same reasoning as footer.tsx.
34  // (--color-white is safe: `text-white` below is a real utility.)
35  dark: 'bg-primary-800 text-white [--header-ink:var(--color-white)] dark:bg-primary-950',
36  light:
37    'bg-grey-100 text-grey-800 [--header-ink:var(--grey-800)] dark:bg-grey-850 dark:text-white dark:[--header-ink:var(--color-white)]',
38  white:
39    'bg-white text-grey-800 [--header-ink:var(--grey-800)] dark:bg-grey-900 dark:text-white dark:[--header-ink:var(--color-white)]',
40  grey: 'bg-grey-800 text-white [--header-ink:var(--color-white)] dark:bg-grey-950',
41}
42 
43type HeaderColor = keyof typeof headerColors
44 
45// Shared by cva's defaultVariants, the data-color attribute and the logo
46// context, so the four can't drift apart.
47const DEFAULT_HEADER_COLOR: HeaderColor = 'white'
48 
49const headerVariants = cva(
50  [
51    'w-full',
52    // The hairline rule derives from the surface's own ink, so it follows every
53    // colour variant and both themes from one value. Mirrors the color-mix
54// … truncated