From a5c12b68d9f1eba093c876f5bd33394f99d422ef Mon Sep 17 00:00:00 2001 From: Kjell Tore Guttormsen Date: Mon, 4 May 2026 03:03:24 +0200 Subject: [PATCH] chore(ms-ai-architect): re-sync vendored design system with light tokens --- .../playground-design-system/MANIFEST.json | 6 +-- .../playground-design-system/tokens.css | 46 +++++++++++++++++++ shared/playground-design-system/CHANGELOG.md | 32 +++++++++++++ 3 files changed, 81 insertions(+), 3 deletions(-) create mode 100644 shared/playground-design-system/CHANGELOG.md diff --git a/plugins/ms-ai-architect/playground/vendor/playground-design-system/MANIFEST.json b/plugins/ms-ai-architect/playground/vendor/playground-design-system/MANIFEST.json index a2fb5b8..d84c3e7 100644 --- a/plugins/ms-ai-architect/playground/vendor/playground-design-system/MANIFEST.json +++ b/plugins/ms-ai-architect/playground/vendor/playground-design-system/MANIFEST.json @@ -2,8 +2,8 @@ "generated_by": "scripts/sync-design-system.mjs", "do_not_edit": true, "source": "shared/playground-design-system/", - "source_commit": "f1fecf39b8fc20e86f6ec3c737f0dfda8403712e", - "sync_date": "2026-05-03T10:24:01.408Z", + "source_commit": "46bce51f443a6cdabdb34314e4ae98e633f752d7", + "sync_date": "2026-05-04T01:02:40.211Z", "file_count": 25, "files": { "README.md": "83de0e29b207c979b7b2a3327b7a4ec0c2e1b4d3705ee2677f26c28c3a3ee643", @@ -30,6 +30,6 @@ "schemas/finding.schema.json": "0b24797373650582bac232d31a4dd9260593375a0d17259e18f1141a20de8d0c", "schemas/okr-set.schema.json": "aa27347fb232a956ec9dcee1775115710e2715a665c8d729ac50b90c6884de26", "schemas/ros-threat.schema.json": "e16497c1a6b79d6e78149d6cf1c28ac9df1e93234627a0c546814fb24d6c96d9", - "tokens.css": "7598d5eda83e189418125cd73b8646e1b0d15a1c195b6f180fafa7944b5ba328" + "tokens.css": "1499bc2eea0178e35935413c79a10bbee7d49fdfa91bd33eeba3bb9e9acab809" } } diff --git a/plugins/ms-ai-architect/playground/vendor/playground-design-system/tokens.css b/plugins/ms-ai-architect/playground/vendor/playground-design-system/tokens.css index a398cdc..6712666 100644 --- a/plugins/ms-ai-architect/playground/vendor/playground-design-system/tokens.css +++ b/plugins/ms-ai-architect/playground/vendor/playground-design-system/tokens.css @@ -142,6 +142,8 @@ --sidebar-width: 280px; } +:root { color-scheme: light; } + [data-theme="dark"] { --color-bg: #0F1419; --color-bg-soft: #161B22; @@ -176,6 +178,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 */ diff --git a/shared/playground-design-system/CHANGELOG.md b/shared/playground-design-system/CHANGELOG.md new file mode 100644 index 0000000..4b0c89f --- /dev/null +++ b/shared/playground-design-system/CHANGELOG.md @@ -0,0 +1,32 @@ +# playground-design-system — CHANGELOG + +## 0.2.0 — 2026-05-04 + +### Added +- `[data-theme="light"]`-blokk i `tokens.css` (Aksel-aligned, WCAG AA-validert). + Full mirror av dark-blokken (26 vars) — alle theme-overridable tokens som + finnes i dark-blokken finnes nå også i light-blokken, slik at renderers ikke + faller gjennom til udefinerte verdier ved theme-switch. +- `color-scheme` CSS-property satt eksplisitt på `:root`, `[data-theme="light"]` + og `[data-theme="dark"]` for korrekt native form-controls/scrollbar-styling. + +### Notes for vendor consumers + +Andre plugins som vendrer design-systemet +(`okr`, `llm-security`, `ultraplan-local`, `config-audit`) får tilgang til +light-tokens etter neste re-sync. Adopsjon er valgfri — eksisterende dark-only +oppførsel er bakoverkompatibel siden ingen eksisterende verdi er endret. + +For å adoptere light-mode i en konsument: +1. Re-sync via `node scripts/sync-design-system.mjs ` +2. Legg til en synkron `