From 29217aefcfd1f747b09787bb3b46b631bb154702 Mon Sep 17 00:00:00 2001 From: Oleh Omelchenko Date: Fri, 5 Jun 2026 13:41:34 +0300 Subject: [PATCH] Switch default accent to deep teal --- docs/architecture/09-visual-design.md | 7 ++-- docs/architecture/visual-specimen.html | 54 +++++++++++++++++--------- styles/tokens.css | 35 +++++++++++------ 3 files changed, 63 insertions(+), 33 deletions(-) diff --git a/docs/architecture/09-visual-design.md b/docs/architecture/09-visual-design.md index a6ff97a..f25fe42 100644 --- a/docs/architecture/09-visual-design.md +++ b/docs/architecture/09-visual-design.md @@ -105,9 +105,10 @@ UI by swapping one set of values. Borrowed from Carbon's layering model: | `--support-error / -success / -warning / -info` | Status only — color = meaning | - **Neutrals** use the Carbon gray ramp (`#f4f4f4 … #161616`) — accessible and - legible. **Accent and theming are open**: the specimen ships several accents - (indigo, teal, amber, rose) and light/dark themes to prove the system is free, - not blue-bound. Pick, add, or invent themes freely. + legible. **Accent and theming are open**: the default accent is **deep teal** + (`#0e7490` / dark `#2dd4bf`), with opt-in alternates (blue, indigo, amber, rose) + and light/dark themes to prove the system is free, not blue-bound. Pick, add, or + invent themes freely. - **Status palette** (borrowed, stable): error `#da1e28`, success `#198038`, warning `#f1c21b`, info `#0043ce` — tuned per theme for contrast. - **Contrast:** target WCAG AA (4.5:1 text, 3:1 large/UI). Accent-on-`--bg` and diff --git a/docs/architecture/visual-specimen.html b/docs/architecture/visual-specimen.html index 7f75917..7975a03 100644 --- a/docs/architecture/visual-specimen.html +++ b/docs/architecture/visual-specimen.html @@ -1,5 +1,5 @@ - + @@ -87,17 +87,23 @@ --on-status: #161616; } - /* --- Accent: the FREE, swappable layer (theme-aware) --- */ + /* --- Accent: the FREE, swappable layer (theme-aware). Deep teal is the + default; see styles/tokens.css for the shipped source of truth. --- */ + [data-accent='teal'] { + --accent: #0e7490; + --accent-hover: #0c5f77; + --accent-contrast: #fff; + } + [data-accent='blue'] { + --accent: #0f62fe; + --accent-hover: #0353e9; + --accent-contrast: #fff; + } [data-accent='indigo'] { --accent: #5b54e6; --accent-hover: #4a43d6; --accent-contrast: #fff; } - [data-accent='teal'] { - --accent: #0f766e; - --accent-hover: #0c5f59; - --accent-contrast: #fff; - } [data-accent='amber'] { --accent: #b45309; --accent-hover: #92400e; @@ -109,16 +115,21 @@ --accent-contrast: #fff; } /* Brighter accents on the dark canvas (compound selector wins on specificity) */ - [data-theme='dark'][data-accent='indigo'] { - --accent: #8b85f0; - --accent-hover: #a29bf5; - --accent-contrast: #161616; - } [data-theme='dark'][data-accent='teal'] { --accent: #2dd4bf; --accent-hover: #5eead4; --accent-contrast: #161616; } + [data-theme='dark'][data-accent='blue'] { + --accent: #78a9ff; + --accent-hover: #a6c8ff; + --accent-contrast: #161616; + } + [data-theme='dark'][data-accent='indigo'] { + --accent: #8b85f0; + --accent-hover: #a29bf5; + --accent-contrast: #161616; + } [data-theme='dark'][data-accent='amber'] { --accent: #fbbf24; --accent-hover: #fcd34d; @@ -785,17 +796,24 @@
+