open/ktg-plugin-marketplace
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity Actions
ktg-plugin-marketplace/shared/playground-design-system/CHANGELOG.md
Kjell Tore Guttormsen 40631c0eee feat(playground-design-system): v0.3.0 — playground/report-page foundation primitives [skip-docs] 
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>
2026-05-04 10:00:44 +02:00

5.1 KiB
Raw Blame History

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.