/* src/kliper/adapters/web/static/css/components.css * * The 30 highest-use gh-* component families measured across the wiremocks * (docs/wiremock/*.html), ported onto the token vocabulary tokens.css * declares. Everything from gh-select down to gh-plan in the measured family * map — the tail below it (gh-mobile, gh-more, gh-avatar, gh-footer, ...) is * one-off page usage and stays in the page, per the plan's own commit * message. * * Wrapped in @layer components per the cascade order tokens.css declares * (`@layer tokens, base, components, tenant;`): an unlayered rule here would * outrank @layer tenant no matter what a tenant stylesheet says. * * Three corrections made while porting, all measured, none of them optional: * * 1. `.gh-btn-primary` hardcoded GitHub's green (hex 1f883d) and forced white * text with a priority flag no later rule could beat. It now reads * `var(--brand-primary)` / `var(--brand-on-primary)`, with that forced * priority removed — with it in place no brand token could ever win the * cascade, which is the token doing nothing. Round 1 of review found the * same defect in a different palette: sixteen sites elsewhere in this * file referenced `--kliper-navy-700`/`-100`/`-050` directly — the * *default value* of `--brand-primary`/`--brand-primary-subtle`, not a * neutral, so a tenant's brand override would land everywhere except * those sixteen "active/selected/ours" affordances. All sixteen are * remapped onto the brand scale (see each family's own FIX comment * below), and this file may no longer reference `--kliper-*` at all — * `test_components_css_nao_referencia_kliper_diretamente` is the gate. * * 2. The outline was nulled to hide the default focus ring in 13 places * across the wiremocks (8 in kliper-github-ui-wiremock.html, 3 in the * backoffice wiremock, 2 in the login wiremock). None of them is * transcribed here. Every family that carried one (gh-select-account, * gh-select-filter, gh-select-btn, gh-btn) has that declaration deleted * outright; the global `:focus-visible` in base.css supplies the ring * instead. `.gh-checkbox` also had its own focus-visible rule redrawing * the same ring in hex 0969da — not a ring-killer, but a hardcoded * duplicate of the same global rule with the wrong (untokenised) colour, * so it is deleted rather than tokenised. The More button (the worst * offender named in the brief) is in the tail and is not ported at all, * so its nulled outline cannot be transcribed by omission. * * 3. The active-tab underline used hex fd8c73, which measures 2.29:1 against * white — under the 3:1 SC 1.4.11 requires of a non-text indicator, with * font-weight 500->600 as its only other signal. `--color-indicator-active` * (tokens.css) darkens it at constant hue/saturation to hex fc4922, * measured at ~3.23:1 against `--color-canvas-subtle` (hex f6f8fa), the * actual `.gh-tabs-bar` background this underline sits on. It is 2px, * GitHub's measured thickness (it was widened to 3px, then brought back * with the rest of GitHub's UnderlineNav on 2026-09-24), * and the selector adds `[aria-current="page"]` alongside the existing * `.active` class — legal_base.html's `.nav-link[aria-current="page"]` is * the reference for that pattern. The same failing coral drove the * active-dropdown-item bar (`.gh-dropdown-item.active::before`); it gets * the same corrected token since it is the same non-text "current" * signal, though only the tab was asked to widen or gain aria-current. * * Two wiremock-local variables are renamed to the names tokens.css actually * declares, because leaving them as-is would resolve to nothing once this * file is the one loaded instead of the wiremock's own