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/visual-specimen.html
+36 -18
View File
@@ -1,5 +1,5 @@
<!doctype html>
<html lang="en" data-theme="light" data-accent="indigo">
<html lang="en" data-theme="light" data-accent="teal">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -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 @@
<div class="row" id="accent" style="gap: var(--space-3)">
<button
class="swatch-btn"
data-accent-val="indigo"
data-accent-val="teal"
aria-pressed="true"
style="background: #5b54e6"
title="Indigo"
style="background: #0e7490"
title="Teal"
></button>
<button
class="swatch-btn"
data-accent-val="teal"
data-accent-val="blue"
aria-pressed="false"
style="background: #0f766e"
title="Teal"
style="background: #0f62fe"
title="Blue"
></button>
<button
class="swatch-btn"
data-accent-val="indigo"
aria-pressed="false"
style="background: #5b54e6"
title="Indigo"
></button>
<button
class="swatch-btn"