open/ktg-plugin-marketplace
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity Actions

feat(shared): add [data-theme=light] tokens (Aksel-aligned, WCAG AA)

Browse source
This commit is contained in:
Kjell Tore Guttormsen 2026-05-04 03:02:23 +02:00
commit 46bce51f44
1 changed files with 46 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

46
shared/playground-design-system/tokens.css
View file

@ -141,6 +141,8 @@
--sidebar-width: 280px;
}
:root { color-scheme: light; }
[data-theme="dark"] {
--color-bg: #0F1419;
--color-bg-soft: #161B22;
@ -175,6 +177,50 @@
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.4);
--shadow-focus: 0 0 0 3px rgba(111, 165, 221, 0.45);
color-scheme: dark;
}
/* Light theme overrides — Aksel-aligned, WCAG AA-validated.
Full mirror of the dark block (26 vars) so renderers reading any
theme-overridable token in dark mode also resolve in light mode.
See research/04-wcag-dual-theme-tokens.md for hex sources + AA validation. */
[data-theme="light"] {
--color-bg: #ffffff;
--color-bg-soft: #ecedef;
--color-surface: #ffffff;
--color-surface-raised: #f5f6f7;
--color-surface-sunken: #ecedef;
--color-border-subtle: #cfd3d8;
--color-border-moderate: #6f7785;
--color-border-strong: #5d6573;
--color-text-primary: #202733;
--color-text-secondary: #49515e;
--color-text-tertiary: #6f7785; /* borderline 4.5:1 — reserve for non-body (eyebrows, labels) */
--color-text-link: #1a5f99;
--color-text-link-hover: #002459;
/* Severity soft fills + on-colors tuned for light surfaces (Aksel). */
--color-severity-low-soft: #e2fde8;
--color-severity-medium-soft: #fff5e4;
--color-severity-high-soft: #fff2f0;
--color-severity-critical-soft: #fff2f7;
--color-severity-extreme-soft: #fff0f3;
--color-severity-low-on: #002e00;
--color-severity-medium-on: #481700;
--color-severity-high-on: #560000;
--color-severity-critical-on: #560000;
--color-severity-extreme-on: #ffffff;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.06);
--shadow-focus: 0 0 0 3px rgba(26, 95, 153, 0.4);
color-scheme: light;
}
/* Auto dark when no override */