mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
zeekayandHanzo Dev
0864e287e4
In a light scheme /benchmarks drew dark headings on black. The page forced a black ground while its type, including the product pages' type roles it now uses, followed the visitor's theme. The design system decides the scheme at the root only: gui's palette chains to @hanzo/design's root variables, which are dark on :root and flipped by .light. So a dark island under a light root is not something a page can declare without redeclaring the design's tokens. So the board follows the visitor's theme like every other page: - Ground on --background. - Ink from --text-primary and --text-secondary; tertiary text on --muted-foreground, which holds 4.5:1 in both schemes where --text-tertiary's light rung measures 4.3:1. - Lines from --border and --edge, panels from --card, tracks and Jev's bars from --edge and --text-disabled. - Coral (--bench-ours) is the design's coral on dark and deepened by light-dark() on light (5:1 on the card); the loss ink (--bench-behind) is likewise per scheme. Both are declared once on the Ground, the way the site header declares its inks. e2e/gates/ground.spec.ts measures WCAG contrast of the hero, the eyebrow badge, the coral figures, every chapter heading and the chapter nav, plus a detail page, in light and dark at 375 and 1440px. It failed on the black ground (1.03 to 1.09:1 in light) and passes on this one. Co-authored-by: Hanzo Dev <[email protected]>
8 lines
330 B
TypeScript
8 lines
330 B
TypeScript
import type { ReactNode } from 'react'
|
|
import { Ground } from '@/components/benchmarks/kit'
|
|
|
|
/** The board reads in the dark theme whatever the site's: ground, type and controls alike (Ground, in the kit). */
|
|
export default function BenchmarksLayout({ children }: { children: ReactNode }) {
|
|
return <Ground>{children}</Ground>
|
|
}
|