oleh/astrolabe
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe.git synced 2026-08-08 02:02:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Switch default accent to deep teal

Browse Source
This commit is contained in:
Oleh Omelchenko
2026-06-05 13:41:34 +03:00
parent cc0814a596
commit 29217aefcf
3 changed files with 63 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/architecture/09-visual-design.md
+4 -3
View File
@@ -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 | | `--support-error / -success / -warning / -info` | Status only — color = meaning |
- **Neutrals** use the Carbon gray ramp (`#f4f4f4 … #161616`) — accessible and - **Neutrals** use the Carbon gray ramp (`#f4f4f4 … #161616`) — accessible and
legible. **Accent and theming are open**: the specimen ships several accents legible. **Accent and theming are open**: the default accent is **deep teal**
(indigo, teal, amber, rose) and light/dark themes to prove the system is free, (`#0e7490` / dark `#2dd4bf`), with opt-in alternates (blue, indigo, amber, rose)
not blue-bound. Pick, add, or invent themes freely. 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`, - **Status palette** (borrowed, stable): error `#da1e28`, success `#198038`,
warning `#f1c21b`, info `#0043ce` — tuned per theme for contrast. 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 - **Contrast:** target WCAG AA (4.5:1 text, 3:1 large/UI). Accent-on-`--bg` and
docs/architecture/visual-specimen.html
+36 -18
View File
@@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en" data-theme="light" data-accent="indigo"> <html lang="en" data-theme="light" data-accent="teal">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -87,17 +87,23 @@
--on-status: #161616; --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'] { [data-accent='indigo'] {
--accent: #5b54e6; --accent: #5b54e6;
--accent-hover: #4a43d6; --accent-hover: #4a43d6;
--accent-contrast: #fff; --accent-contrast: #fff;
} }
[data-accent='teal'] {
--accent: #0f766e;
--accent-hover: #0c5f59;
--accent-contrast: #fff;
}
[data-accent='amber'] { [data-accent='amber'] {
--accent: #b45309; --accent: #b45309;
--accent-hover: #92400e; --accent-hover: #92400e;
@@ -109,16 +115,21 @@
--accent-contrast: #fff; --accent-contrast: #fff;
} }
/* Brighter accents on the dark canvas (compound selector wins on specificity) */ /* 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'] { [data-theme='dark'][data-accent='teal'] {
--accent: #2dd4bf; --accent: #2dd4bf;
--accent-hover: #5eead4; --accent-hover: #5eead4;
--accent-contrast: #161616; --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'] { [data-theme='dark'][data-accent='amber'] {
--accent: #fbbf24; --accent: #fbbf24;
--accent-hover: #fcd34d; --accent-hover: #fcd34d;
@@ -785,17 +796,24 @@
<div class="row" id="accent" style="gap: var(--space-3)"> <div class="row" id="accent" style="gap: var(--space-3)">
<button <button
class="swatch-btn" class="swatch-btn"
data-accent-val="indigo" data-accent-val="teal"
aria-pressed="true" aria-pressed="true"
style="background: #5b54e6" style="background: #0e7490"
title="Indigo" title="Teal"
></button> ></button>
<button <button
class="swatch-btn" class="swatch-btn"
data-accent-val="teal" data-accent-val="blue"
aria-pressed="false" aria-pressed="false"
style="background: #0f766e" style="background: #0f62fe"
title="Teal" title="Blue"
></button>
<button
class="swatch-btn"
data-accent-val="indigo"
aria-pressed="false"
style="background: #5b54e6"
title="Indigo"
></button> ></button>
<button <button
class="swatch-btn" class="swatch-btn"
styles/tokens.css
+23 -12
View File
@@ -79,26 +79,32 @@
} }
/* /*
* Accent — the FREE, swappable layer (doc §3.3). Indigo is the default and is * Accent — the FREE, swappable layer (doc §3.3). Deep teal is the default and is
* defined on :root / [data-theme='dark'] so `--accent` always resolves even with * defined on :root / [data-theme='dark'] so `--accent` always resolves even with
* no `[data-accent]` attribute. The alternates below are opt-in; an accent * no `[data-accent]` attribute. The alternates below are opt-in; an accent
* switcher arrives with Settings in M5. Brighter values on the dark canvas keep * switcher arrives with Settings in M5. Brighter values on the dark canvas keep
* accent-on-bg and text-on-accent contrast within AA. * accent-on-bg and text-on-accent contrast within AA (all values verified AA in
* both themes — see the candidate showcase that picked teal).
*/ */
:root { :root {
--accent: #5b54e6; --accent: #0e7490;
--accent-hover: #4a43d6; --accent-hover: #0c5f77;
--accent-contrast: #ffffff; --accent-contrast: #ffffff;
} }
[data-theme='dark'] { [data-theme='dark'] {
--accent: #8b85f0; --accent: #2dd4bf;
--accent-hover: #a29bf5; --accent-hover: #5eead4;
--accent-contrast: #161616; --accent-contrast: #161616;
} }
[data-accent='teal'] { [data-accent='blue'] {
--accent: #0f766e; --accent: #0f62fe;
--accent-hover: #0c5f59; --accent-hover: #0353e9;
--accent-contrast: #ffffff;
}
[data-accent='indigo'] {
--accent: #5b54e6;
--accent-hover: #4a43d6;
--accent-contrast: #ffffff; --accent-contrast: #ffffff;
} }
[data-accent='amber'] { [data-accent='amber'] {
@@ -111,9 +117,14 @@
--accent-hover: #9f1239; --accent-hover: #9f1239;
--accent-contrast: #ffffff; --accent-contrast: #ffffff;
} }
[data-theme='dark'][data-accent='teal'] { [data-theme='dark'][data-accent='blue'] {
--accent: #2dd4bf; --accent: #78a9ff;
--accent-hover: #5eead4; --accent-hover: #a6c8ff;
--accent-contrast: #161616;
}
[data-theme='dark'][data-accent='indigo'] {
--accent: #8b85f0;
--accent-hover: #a29bf5;
--accent-contrast: #161616; --accent-contrast: #161616;
} }
[data-theme='dark'][data-accent='amber'] { [data-theme='dark'][data-accent='amber'] {