From 69ea5ea541ed0365d222b5aca6554007d643d26a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Be=C3=B1at=20Espi=C3=B1a?= Date: Sat, 31 Oct 2026 09:45:03 +0100 Subject: [PATCH] docs: draw the focus ring as bounda.dev does, 2px of the accent Starlight sets no focus ring of its own, so the docs showed the browser's default. DESIGN.md now fixes the ring at 2px of `--accent`, 3px off the edge; this is that ring on Starlight, with the brand's fill colour in both modes (the darker ochre Starlight's accent carries in Bone is the one for text). Controls that sit in a box keep Starlight's inside offset. Co-Authored-By: Claude Fable 5.1 --- docs/src/styles/bounda.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/docs/src/styles/bounda.css b/docs/src/styles/bounda.css index c18bd804..463a917e 100644 --- a/docs/src/styles/bounda.css +++ b/docs/src/styles/bounda.css @@ -7,6 +7,9 @@ --sl-font-mono: var(--font-red-hat-mono), ui-monospace, monospace; --bounda-display: var(--font-science-gothic), "Eurostile", "Bahnschrift", "Arial Black", sans-serif; + /* The brand as a fill (DESIGN.md's --accent), for the focus ring. Starlight's accent is the one + for text, which in Bone is the darker ochre. */ + --bounda-accent: #d9a04a; --sl-text-body: 1.03125rem; --sl-line-height: 1.62; @@ -52,6 +55,7 @@ :root[data-theme="light"] { /* Bone */ + --bounda-accent: #b07114; --sl-color-white: #1a1916; --sl-color-gray-1: #23211d; --sl-color-gray-2: #2b2925; @@ -95,6 +99,13 @@ color: var(--sl-color-black); } +/* Focus as bounda.dev draws it: a 2px ring of the brand, 3px off the edge. Controls that sit in a + box keep Starlight's inside offset, so the ring stays within it. */ +:focus-visible { + outline: 2px solid var(--bounda-accent); + outline-offset: 3px; +} + /* Display: the page title and section titles in Science Gothic 600. */ h1#_top, .sl-markdown-content h2 {