Kjell Tore Guttormsen
40631c0eee
Hoists 13 generic CSS components (sections 13-25 in tier3-supplement) from
ms-ai-architect inline CSS to shared/ so all 5 plugin consumers get the same
vocabulary and visual signature.
Shared additions:
- .eyebrow utility, .page__* page-shell (header/title/eyebrow/lede/meta)
- .key-stats grid + .key-stat + severity modifiers (large tabular-nums values)
- .verdict-pill-lg 5-band extension (critical/high/medium/low/positive/n-a)
- .tab-list / .tab / .tab-panel generic tab-component
- .top-risks / .top-risk[data-severity] severity-ordered risk list
- .recommendation-card[data-severity] emphasized advisory callout
- .card__head/title/desc/id/meta/hint/actions/pill subcomponents
- .card--severity-{level} 4px left-border modifier
- Form patterns (.field-row, .field-label, .field-help, .multi-select,
.checkbox-row, .required-mark)
- .stack-lg/.stack-md/.stack-sm vertical rhythm utilities
- .pyramide-tier-detail expandable details below pyramide
- .scenario-card-grid + .scenario-card[data-status="winner"] grid pattern
- .app-shell / .app-shell--wide / .app-shell--narrow page wrappers
Total: 567 new lines in tier3-supplement.css, 107 new selectors. Purely
additive — no existing selector changed or removed. v0.2 -> v0.3.
DS CHANGELOG.md updated with full v0.3 entry.
ms-ai-architect playground:
- Re-synced vendored DS to v0.3 (force flag — overwrites stale v0.2 vendor)
- Deleted 8 inline DUPLICATE definitions (.app-shell* + form patterns) now
served by shared DS
- Inline <style> block: 210 -> 202 lines (start of multi-session refactor;
remaining PARALLEL classes migrate in Session 2)
Tests: 215 + 201 + 70 + 7 = 493 PASS. No regressions.
Plugin user-facing docs (README, CLAUDE.md, marketplace landing) update in
Session 3 (Phase 9) when full v1.11.0 ships. This commit is internal
foundation work — DS CHANGELOG already documents the shared changes.
Session 1 of 3 in v1.11.0 design-system 100%-adoption refactor.
Plan: /Users/ktg/.claude/plans/jeg-skal-pr-ve-effervescent-token.md
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
63 lines
5.1 KiB
Markdown
63 lines
5.1 KiB
Markdown
# playground-design-system — CHANGELOG
|
|
|
|
## 0.3.0 — 2026-05-04
|
|
|
|
### Added — Playground/report-page foundation primitives (sections 13-25 in tier3-supplement)
|
|
|
|
Generiske mønstre som tidligere ble definert inline i plugin-playgrounds (først i ms-ai-architect v1.10) er hoisted hit slik at alle 5 plugin-konsumenter (`ms-ai-architect`, `okr`, `llm-security`, `ultraplan-local`, `config-audit`) kan dele samme vokabular og visuelle profil.
|
|
|
|
- **`.eyebrow` utility** — uppercase 11px monospace label med 0.08em letter-spacing. Bruk over seksjons-titler.
|
|
- **`.page__*` page-shell** (`.page__header`, `.page__header-main`, `.page__header-aside`, `.page__eyebrow`, `.page__title`, `.page__lede`, `.page__meta`) — standard rapport-side-header med eyebrow → h1 → lede → meta + verdict-slot side-by-side. Responsiv: kollapser til én kolonne under 720px.
|
|
- **`.key-stats` / `.key-stat`** — 2-5-kolonne responsivt grid av store tall-metrikker. `font-variant-numeric: tabular-nums`, `font-size-2xl` bold. Severity-modifiers (`.key-stat--critical/high/medium/low/positive/info`) tinter value-fargen.
|
|
- **`.verdict-pill-lg` 5-band utvidelse** — eksisterende `.verdict-pill-lg` aksepterer nå alle 5 severity-bånd: `critical/extreme/high/medium/low/positive` + neutral `n-a/info/neutral`. Bakoverkompatibel med eksisterende `block/warning/allow`.
|
|
- **`.tab-list` / `.tab` / `.tab-panel`** — generisk faneflate-komponent. ARIA-paritet: `role="tablist"`, `role="tab"`, `aria-current="true"`. `.tab__count` for badge-tall, `.tab-panel[hidden]` for skjuling.
|
|
- **`.top-risks` / `.top-risk[data-severity]`** — severity-ordnet liste over topp-risikoer med rank/desc/score-kolonner. Severity-attribut driver venstre-border + score-pill-bakgrunn.
|
|
- **`.recommendation-card[data-severity]`** — emphasized advisory-callout med label + body. 6 severity-modifiers.
|
|
- **`.card__*` subkomponenter** — komponerbare tillegg til eksisterende `.card` (base.css): `.card__head`, `.card__title`, `.card__desc`, `.card__id`, `.card__meta`, `.card__hint`, `.card__actions`, `.card__pill`. Pluss `.card--severity-{level}` for 4px venstre-border-modifier.
|
|
- **Form patterns** — `.field-row` (vertikal flex), `.field-label` (medium weight), `.field-help` (xs tertiary), `.required-mark` (severity-critical asterisk), `.multi-select` (fieldset reset), `.checkbox-row` (inline-flex med hover). Mirrors Aksel/Digdir form-konvensjoner.
|
|
- **Section-spacing utilities** — `.stack-lg` (margin-block: var(--space-8)), `.stack-md` (var(--space-5)), `.stack-sm` (var(--space-3)). Anvendes på parent for å gi konsistent vertikal rytme mellom barn-elementer.
|
|
- **`.pyramide-tier-detail`** — utvidbar `<details>`-blokk under `.pyramide`-visualisering. Custom chevron, ingen native marker. Brukes av AI Act-klassifiserings-renderer.
|
|
- **`.scenario-card-grid` / `.scenario-card[data-status="winner"]`** — auto-fit grid (minmax 240px) av scenario/alternativ-cards. Vinnerstatus får success-tinted bakgrunn + grønn count-pill.
|
|
- **`.app-shell` / `.app-shell--wide` / `.app-shell--narrow`** — sentralisert max-width page-wrapper. 1200/1400/880px varianter.
|
|
|
|
### Notes for vendor consumers
|
|
|
|
Versjon 0.3.0 er **rent additiv** — ingen eksisterende selector er endret eller fjernet. Alle eksisterende klasser (`.btn`, `.card`, `.expansion`, `.kanban-*`, `.mat-ladder`, `.read-more`, `.suppressed`, `.pair-before-after`, `.verdict-pill-lg` osv.) fungerer uendret.
|
|
|
|
For å adoptere v0.3:
|
|
1. Re-sync via `node scripts/sync-design-system.mjs <plugin-name>` (kreves `--force` hvis eksisterende drift)
|
|
2. Oppdater plugin HTML til å bruke nye klasser i stedet for inline CSS
|
|
3. Andre plugins kan vente med adopsjon — eksisterende DS-bruk fortsetter å fungere
|
|
|
|
Førsteadopter: `ms-ai-architect` v1.11.0 (planlagt 2026-05-04).
|
|
|
|
## 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 <plugin-name>`
|
|
2. Legg til en synkron `<script>`-IIFE i `<head>` før CSS-load som leser
|
|
`localStorage` og setter `data-theme` + `colorScheme` på `documentElement`.
|
|
3. Eksponere theme-toggle i UI som setter `documentElement.dataset.theme` +
|
|
persisterer i `localStorage`.
|
|
|
|
## 0.1.0 — 2026-04 (initial)
|
|
|
|
- Tier 1+2+3 design-system med Aksel/Digdir-aligned tokens, base, components.
|
|
- Dark mode default + `[data-theme="dark"]`-overrides.
|
|
- Self-hosted Inter, JetBrains Mono, Source Serif 4 fonts.
|
|
- Schemas for renderers + commands.
|