Footer

1import { cva, type VariantProps } from 'class-variance-authority'
2import React from 'react'
3 
4import { cn } from '@/lib/utils'
5 
6import { ButtonLink, type IconSlot } from '@/components/button'
7import { Link } from '@/components/link'
8import { Separator } from '@/components/separator'
9 
10/**
11 * Surface colours the footer can be themed with. Each one names its LIGHT-mode
12 * surface; dark mode deepens it onto the same family's dark steps (see the
13 * `color` variants below), so `color` expresses tonal weight rather than a
14 * literal colour.
15 *
16 * Every light pair clears WCAG 2.2 AA (1.4.3, 4.5:1) for the footer's smallest
17 * text and 11 of the 13 also clear AAA (1.4.6, 7:1). The two AA-only pairs are
18 * `primary-600` (4.57:1) and `accent-600` (5.18:1), both with white ink; prefer
19 * the `-800` steps when a service is held to AAA. In dark mode all thirteen
20 * clear AAA (worst 13.6:1).
21 *
22 * Unlike `Masthead` — which is restricted to verified AAA pairs because it is
23 * legally-mandated identification — the footer carries supporting content, so
24 * the full tonal range is offered here.
25 */
26const footerColors = [
27  'primary-800',
28  'primary-600',
29  'primary-400',
30  'primary-200',
31  'grey-800',
32  'grey-600',
33  'grey-400',
34  'grey-200',
35  'accent-800',
36  'accent-600',
37  'accent-400',
38  'accent-200',
39  'white',
40] as const
41 
42type FooterColor = (typeof footerColors)[number]
43 
44// Shared by cva's defaultVariants and the data-color attribute, so the two
45// can't drift apart.
46const DEFAULT_FOOTER_COLOR: FooterColor = 'white'
47 
48const footerVariants = cva(
49  [
50    'w-full',
51    // Every derived colour in the footer resolves from a single --footer-ink
52    // token, so a colour variant only has to declare the surface utilities and
53    // that one value. The derivations are written literally here (once) rather
54    // than per-variant: Tailwind scans source text for class names, so a
55    // template-built arbitrary property would never be emitted.
56    //
57    // Mirrors the color-mix derivation in link.tsx (--link-halo).
58    '[--footer-border:color-mix(in_oklch,var(--footer-ink)_15%,transparent)]',
59    '[--footer-halo:color-mix(in_oklch,var(--footer-ink)_10%,transparent)]',
60    '[--footer-halo-active:color-mix(in_oklch,var(--footer-ink)_18%,transparent)]',
61  ],
62  {
63    variants: {
64      // Ink values use the RAW masterbrand tokens (--primary-800, --grey-800,
65      // --accent-800) rather than Tailwind's --color-* bridge aliases. Tailwind
66// … truncated