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

feat(shared): add Playground design system v0.1 with Tier 1+2 components

Browse source 
Aksel/Digdir-aligned design system for plugin Playgrounds — visual self-service
UIs that complement terminal slash-commands. Targets ms-ai-architect, okr,
llm-security, ultraplan-local, config-audit. Built for Norwegian public sector
decision-makers plus developer power-users — one visual family, two info
densities.

Generated by claude.ai/design (Anthropic) in a dialog-based design session
driven by a comprehensive brief covering all five target plugins, Aksel/Digdir
conventions, and domain-specific visual standards (NS 5814 ROS matrices, EU AI
Act 4-tier pyramide, Doerr OKR scoring, NIST CSF, OWASP threat modeling).
Per Anthropic Consumer Terms §4, ownership of outputs is assigned to the user;
licensed MIT.

shared/playground-design-system/ (5874 lines CSS + JSON):
- tokens.css: Inter font, Digdir blue #0062BA, deuteranopia-safe severity ramp,
  distinct severity-red (#A40E26) vs failure-red (#7D1A1A), plugin scope colors,
  light + dark themes
- base.css: reset, typography (17px body, 65ch measure), focus rings, buttons,
  badges, forms, Aksel 3-tier inline messages, prefers-reduced-motion support
- components.css: Tier 1 — radar/spider, 5x5 matrix-heatmap (bottom-left
  origin, ROS/DPIA), findings-browser, critique-card, wizard/stepper,
  live-meter with antipattern lints
- components-tier2.css: Tier 2 — decision-tree, traffic-lights with rationale,
  diff-review, treemap, distribution P10/P50/P90, command-pipeline output, AI
  Act 4-color pyramide, pipeline-cockpit, verdict-pill + 5-band risk-meter,
  codepoint-reveal (Unicode steg), small-multiples grid (16-cat posture),
  OWASP badges (LLM/ASI/AST/MCP)
- print.css: A4 stylesheet with BW severity hatching, kommune-logo slot,
  signature lines for offentlige dokumenter
- schemas/: finding.schema.json, okr-set.schema.json, ros-threat.schema.json
- README.md: usage guide, design principles, component reference, provenance

shared/playground-examples/:
- index.html: system showcase with all components live
- ros-lier-kommune.html: Lier kommune Copilot ROS-rapport (Scenario A)
- okr-baerum.html: Baerum kommune T2-2026 OKR live writer (Scenario B)
- security-vegvesen.html: SVV ToxicSkills findings review, 85 funn BLOCK
  (Scenario C)
- templates.html: A4 print template demos
- ros-app.js + ros-data.js: Scenario A interactivity

WCAG 2.1 AA throughout (UU-loven krav for offentlig sektor): focus rings, ARIA
attributes, keyboard navigation, severity numerical redundancy for deuteranopia
and BW print, semantic HTML.

Known limitation: Inter loaded via Google Fonts CDN violates self-contained
no-CDN constraint. System-stack fallback works offline. Self-host woff2 files
in Phase 2.
This commit is contained in:
Kjell Tore Guttormsen 2026-05-02 06:59:19 +02:00
commit 4a2bf3567a
16 changed files with 6065 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

191
shared/playground-design-system/README.md Normal file
View file

@ -0,0 +1,191 @@
# Playground Design System
A shared design system for plugin Playgrounds — visual self-service UIs that complement terminal slash-commands. Built for Norwegian public sector with WCAG 2.1 AA compliance, Aksel/Digdir-aligned aesthetics, and self-contained HTML deployment.
**Version:** 0.1 (Phase 1 — 2026-05-02)
## Provenance
This design system was generated by **[claude.ai/design](https://claude.ai/design)** (Anthropic) in a dialog-based design session driven by a comprehensive brief covering five plugins (`ms-ai-architect`, `okr`, `llm-security`, `ultraplan-local`, `config-audit`), Norwegian public-sector design conventions (Aksel/Digdir), and domain-specific visual standards (NS 5814 risk matrices, EU AI Act 4-tier pyramide, Doerr OKR scoring, NIST CSF, OWASP threat modeling).
Integration into the marketplace (file organization, path normalization, README authoring, root-doc cross-references) was performed in a separate Claude Code session. Per Anthropic Consumer Terms §4, ownership of outputs is assigned to the user; this design system is licensed MIT alongside the rest of the marketplace.
## Directory layout
```
shared/
├── playground-design-system/ # The design system (this directory)
│ ├── README.md # This file
│ ├── tokens.css # CSS custom properties (Aksel/Digdir-aligned)
│ ├── base.css # Reset, typography, primitives, focus, print
│ ├── components.css # Tier 1: radar, matrix, findings-browser, critique-card, wizard, live-meter
│ ├── components-tier2.css # Tier 2: decision-tree, traffic-lights, diff-review, treemap, distribution, command-pipeline, pyramide, pipeline-cockpit, verdict-pill+risk-meter, codepoint-reveal, small-multiples, OWASP badges
│ ├── print.css # A4 print stylesheet with B/W severity patterns
│ └── schemas/ # Cross-plugin JSON schemas
│ ├── finding.schema.json # Used by llm-security, config-audit, ultraplan-review, ms-ai-review
│ ├── okr-set.schema.json # Used by OKR plugin
│ └── ros-threat.schema.json # Used by ms-ai-architect ROS workflow
│
└── playground-examples/ # Showcase + reference scenarios
├── index.html # System showcase (browse all components)
├── ros-lier-kommune.html # Scenario A — ms-ai-architect ROS report
├── okr-baerum.html # Scenario B — OKR live writer
├── security-vegvesen.html # Scenario C — llm-security findings review
├── templates.html # Skeleton + print-template demos
├── ros-app.js # Scenario A interactivity
└── ros-data.js # Scenario A mock data
```
## Quick start
To use the design system from a plugin's Playground:
```html
<!doctype html>
<html lang="nb" data-theme="light">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../../shared/playground-design-system/tokens.css">
<link rel="stylesheet" href="../../shared/playground-design-system/base.css">
<link rel="stylesheet" href="../../shared/playground-design-system/components.css">
<link rel="stylesheet" href="../../shared/playground-design-system/components-tier2.css">
<!-- Optional: only include print.css if scenario produces a printable A4 report -->
<link rel="stylesheet" href="../../shared/playground-design-system/print.css">
</head>
<body>
<header class="app-header">
<a class="app-header__brand" href="...">
<span class="app-header__brand-mark">MS</span>
ms-ai-architect
</a>
<span class="app-header__breadcrumb">/ Playground</span>
<div class="app-header__spacer"></div>
<button class="theme-toggle" data-theme-toggle>Mørk modus</button>
</header>
<!-- Your Playground content using design-system classes -->
</body>
</html>
```
The relative path `../../shared/playground-design-system/` assumes the plugin's Playground lives at `plugins/{plugin-name}/playground/index.html`. Adjust the prefix to match your plugin's structure.
## Design principles
1. **Aksel/Digdir-aligned.** Inter font, body 17px, Digdir blue `#0062BA`, semantic CSS tokens. Norwegian public sector users recognize this DNA.
2. **WCAG 2.1 AA non-negotiable.** Required by `Forskrift om universell utforming av IKT` for Norwegian public sector. Every component ships with proper focus rings, ARIA attributes, keyboard navigation, and contrast that passes deuteranopia simulators.
3. **Vanilla HTML/CSS/JS.** No React, no Tailwind, no build step. A plugin can copy a Playground HTML file to disk and it will render correctly.
4. **Self-contained per Playground.** Each plugin's `playground/*.html` should be openable offline with only the design-system CSS files alongside.
5. **Print-aware.** The `print.css` stylesheet ensures matrix cells use B/W-safe hatching patterns when printed, severity badges become outlined boxes with patterns, and interactive chrome disappears. Designed for A4 reports going to Datatilsynet, kommunestyre, statsråd.
6. **Severity is universal.** All severity-coded UI uses the same five-level ramp (low/medium/high/critical/extreme) with deuteranopia-safe hex values defined in `tokens.css`. Distinct from "state" tokens (failed/blocked/queued/running) used in pipeline contexts — never mix severity-red with failure-red.
7. **Two-spor strategy.** The system supports both non-technical decision makers (Spor 1: ms-ai-architect, OKR, llm-security) and developer power-users (Spor 2: ultraplan-local, config-audit) — same component library, different information densities.
## Token system
See `tokens.css` for full reference. Highlights:
- **Typography:** `--font-family-sans` (Inter), `--font-size-md` (17px body), `--measure` (65ch line length)
- **Primary:** `--color-primary-500` = `#0062BA` (Digdir blue), with 50/100/300/500/700/900 ramp
- **Severity:** `--color-severity-{low,medium,high,critical,extreme}` + `-soft` (background) + `-on` (foreground) variants. Deuteranopia-safe.
- **State:** `--color-state-{success,warning,failed,blocked,info,running,queued,pending,done}` — distinct from severity
- **Surface:** Warm off-white `#FBFAF7` (light), graphite `#0F1419` (dark). Theme via `[data-theme="dark"]` on `<html>` or `<body>`
- **Plugin scope:** `--color-scope-{architect,okr,security,ultraplan,config}` for visual differentiation between plugins
- **Spacing:** 4px grid, scale 1-20 (4px to 80px)
- **Radius:** `--radius-sm` (3px) / `-md` (5px) / `-lg` (8px) / `-pill` (999px) — max 8px (no consumer-app rounded corners)
- **Motion:** Respects `prefers-reduced-motion`
## Component reference
### Tier 1 (`components.css`)
| Component | Class prefix | Used by |
|---|---|---|
| Radar / Spider chart | `.radar` | OKR maturity (7-axis), ms-ai security (6), ms-ai ROS dimensions (7), ultraplan plan-critic (7) |
| Matrix / 5×5 heatmap | `.matrix` | ms-ai ROS, DPIA, OKR coverage, security scanner, license map |
| Findings-browser | `.findings` | llm-security, ultraplan-review, config-audit, ms-ai-review |
| Critique-card | `.critique-card` | llm-security findings, ultraplan, config-audit feature-gap, OKR antipatterns |
| Wizard / Stepper | `.stepper`, `.wizard__panel` | ms-ai 5-step intake, security clean, config-audit audit, ultraplan, OKR onboarding |
| Live-meter | `.live-meter`, `.lint-annotation` | OKR writer, ultraplan brief-reviewer, cost, config-audit |
Plus app-shell primitives: `.app-header`, `.sidepanel`, `.scrim`, `.theme-toggle`.
### Tier 2 (`components-tier2.css`)
| Component | Class prefix | Used by |
|---|---|---|
| Decision-tree | `.decision-tree`, `.dt-node`, `.dt-edge` | ms-ai AI Act 4-step classifier, security MAESTRO drill |
| Traffic-lights | `.traffic-light` | ms-ai compliance, OKR KR-status, security pre-deploy, config-audit risk |
| Diff-review | `.diff` | security diff, config-audit drift, ultraplan triage |
| Treemap | `.treemap` | config-audit token-hotspots |
| Distribution / range-viz | `.distribution` | ms-ai cost P10/P50/P90, security risk-score, OKR progress |
| Command-pipeline | `.cmd-pipeline`, `.cmd-step` | All plugins — final export of slash-command sequence |
| Pyramide (4-tier) | `.pyramide` | ms-ai AI Act risk classification |
| Pipeline-cockpit | `.pipeline-cockpit`, `.pc-stage` | ultraplan 6-stage flow, ms-ai utredning, config-audit audit |
| Verdict-pill + risk-meter | `.verdict-pill-lg`, `.risk-meter` | llm-security BLOCK/WARNING/ALLOW + 0-100 risk-score |
| Codepoint-reveal | `.codepoint-reveal` | llm-security Unicode steganography demo |
| Small-multiples grid | `.small-multiples`, `.sm-card` | llm-security 16-category posture (alternative to overcrowded radar) |
| OWASP badges | `.badge--owasp-{llm,asi,ast,mcp}` | llm-security finding cross-mapping (4 frameworks) |
## Schemas
`schemas/` contains JSON schemas for cross-plugin data interchange:
- **`finding.schema.json`** — universal "finding" shape (id, title, severity, source, evidence, rationale, recommendation, status). Consumed by llm-security, config-audit, ultraplan-review, ms-ai-review. Maps directly to the `.critique-card` component.
- **`okr-set.schema.json`** — OKR shape (objectives + key results, scoring, antipattern annotations). Consumed by OKR plugin.
- **`ros-threat.schema.json`** — ROS threat shape (likelihood × consequence, mitigation references, residual risk). Consumed by ms-ai-architect.
A plugin command can output JSON conforming to these schemas, and a Playground can render the result without further translation.
## Theming
Default is light. Toggle dark via `data-theme="dark"` attribute on `<html>` or `<body>`. The system also respects `prefers-color-scheme: dark` when no explicit theme is set:
```js
// Toggle dark/light
document.documentElement.dataset.theme =
document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
localStorage.setItem('theme', document.documentElement.dataset.theme);
```
## Print mode
Include `print.css` if your scenario produces an A4 report. Then add `class="no-print"` to interactive chrome (header, buttons, theme toggle), and use `class="page-break"` to force page breaks. Severity-coded matrix cells will automatically render as B/W-safe hatching patterns when printed. The `.print-header` and `.print-footer` blocks support kommune-logo slots and signature lines for offentlige dokumenter.
## Known limitations (Phase 1)
1. **Google Fonts CDN dependency.** All example HTML files load Inter from `fonts.googleapis.com`. This violates the "self-contained, no CDN" constraint. The system-font-stack fallback in `base.css` works, so files render acceptably offline — but for production deployment, Inter should be self-hosted as woff2 files in `playground-design-system/fonts/`. Tracked for Phase 2.
2. **Tier 3 components missing.** Several components from the design brief are not yet implemented: rights-matrix (FRIA 12 EU Charter), capability-matrix (license × kapabilitet), fleet-overview (cross-project security dashboard), kanban (Keep/Review/Remove), sankey/toxic-flow chain (security TFA), classify-and-transform (OKR 5-bucket sorter), maturity-ladder (OKR/posture progression), parallel-agent-status panel (utredning, ultraexecute waves), suppressed-signals panel.
3. **No JavaScript framework.** Components are CSS-first. Interactivity (e.g. `aria-selected` toggling, sidepanel open/close, live-meter updates) must be wired by each Playground using vanilla JS. See `playground-examples/ros-app.js` for a reference implementation pattern.
4. **No icon set bundled.** The system assumes Lucide or Phosphor SVG sprites are inlined per Playground. Iconography is intentionally out-of-system to keep the shared system small.
5. **Mobile responsiveness is partial.** The 5×5 matrix, findings-browser, codepoint-reveal split-pane, and small-multiples grid have explicit `@media (max-width: ...)` rules. Other components may need polish for narrow viewports.
## Versioning
This system follows semver:
- **Major:** Breaking token rename, component class rename, schema field removal/rename
- **Minor:** New tokens, new components, new schema fields, new variants
- **Patch:** Bugfixes, accessibility improvements, visual polish without contract changes
Every plugin Playground that consumes the design system should declare the version in a comment at the top of its HTML:
```html
<!-- playground-design-system v0.1 -->
```
## License
MIT, same as the parent ktg-plugin-marketplace. Reuse freely; attribution appreciated.
## Contributing
This is a solo project. PRs are not accepted, but issues and suggestions are welcome at the marketplace repo (Forgejo: `git.fromaitochitta.com/open/ktg-plugin-marketplace`).
When adding a new component:
1. Add CSS to `components.css` (Tier 1) or `components-tier2.css` (Tier 2)
2. Use BEM naming convention: `.component-name__element--modifier`
3. Reference only `tokens.css` custom properties — never hard-code colors, spacing, or fonts
4. Test in light + dark themes, with deuteranopia simulator (Stark, Sim Daltonism)
5. Test keyboard navigation and screen reader (NVDA on Windows, VoiceOver on Mac)
6. Add a print rule if the component appears in printable reports
7. Document in this README under the appropriate Tier table

260
shared/playground-design-system/base.css Normal file
View file

@ -0,0 +1,260 @@
/* =============================================================================
base.css — reset, typography, layout primitives, focus, print
============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
margin: 0;
font-family: var(--font-family-sans);
font-size: var(--font-size-md);
line-height: var(--line-height-normal);
color: var(--color-text-primary);
background: var(--color-bg);
font-feature-settings: "ss01", "cv11";
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
letter-spacing: -0.01em;
color: var(--color-text-primary);
text-wrap: balance;
}
h1 { font-size: var(--font-size-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--font-size-2xl); letter-spacing: -0.015em; }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-md); }
p {
margin: 0;
text-wrap: pretty;
max-width: var(--measure);
}
small { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
code, kbd, samp { font-family: var(--font-family-mono); font-size: 0.92em; }
kbd {
display: inline-block;
padding: 1px 6px;
font-size: 0.85em;
border: 1px solid var(--color-border-moderate);
border-bottom-width: 2px;
border-radius: var(--radius-sm);
background: var(--color-surface);
color: var(--color-text-secondary);
line-height: 1;
}
a {
color: var(--color-text-link);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
a:hover { color: var(--color-text-link-hover); text-decoration-thickness: 2px; }
button { font-family: inherit; }
/* Focus rings — WCAG */
:focus-visible {
outline: 2px solid var(--color-border-focus);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 9px 16px;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
line-height: 1.3;
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-default),
border-color var(--duration-fast) var(--ease-default),
color var(--duration-fast) var(--ease-default);
white-space: nowrap;
text-decoration: none;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn--primary { background: var(--color-primary-500); color: var(--color-text-on-primary); }
.btn--primary:hover { background: var(--color-primary-700); }
.btn--secondary {
background: var(--color-surface);
color: var(--color-text-primary);
border-color: var(--color-border-moderate);
}
.btn--secondary:hover { background: var(--color-bg-soft); border-color: var(--color-border-strong); }
.btn--ghost {
background: transparent;
color: var(--color-text-primary);
border-color: transparent;
}
.btn--ghost:hover { background: var(--color-bg-soft); }
.btn--destructive { background: var(--color-severity-critical); color: #fff; }
.btn--destructive:hover { background: var(--color-severity-extreme); }
.btn--sm { padding: 5px 10px; font-size: var(--font-size-xs); }
.btn--lg { padding: 12px 20px; font-size: var(--font-size-md); }
/* ---------- Badges / pills ---------- */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
line-height: 1.4;
border-radius: var(--radius-pill);
border: 1px solid var(--color-border-subtle);
background: var(--color-bg-soft);
color: var(--color-text-secondary);
white-space: nowrap;
}
.badge--severity-low { background: var(--color-severity-low-soft); color: var(--color-severity-low-on); border-color: transparent; }
.badge--severity-medium { background: var(--color-severity-medium-soft); color: var(--color-severity-medium-on); border-color: transparent; }
.badge--severity-high { background: var(--color-severity-high-soft); color: var(--color-severity-high-on); border-color: transparent; }
.badge--severity-critical { background: var(--color-severity-critical); color: var(--color-severity-critical-on); border-color: transparent; }
.badge--severity-extreme { background: var(--color-severity-extreme); color: var(--color-severity-extreme-on); border-color: transparent; }
.badge--owasp { font-family: var(--font-family-mono); font-size: 11px; padding: 1px 6px; }
.badge--scope-architect { background: var(--color-scope-architect); color: #fff; border-color: transparent; }
.badge--scope-okr { background: var(--color-scope-okr); color: #fff; border-color: transparent; }
.badge--scope-security { background: var(--color-scope-security); color: #fff; border-color: transparent; }
.badge--scope-ultraplan { background: var(--color-scope-ultraplan); color: #fff; border-color: transparent; }
.badge--scope-config { background: var(--color-scope-config); color: #fff; border-color: transparent; }
/* ---------- Cards / surfaces ---------- */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.card--sunken { background: var(--color-surface-sunken); }
.card--raised { box-shadow: var(--shadow-sm); }
/* ---------- Inline messages (Aksel 3-tier) ---------- */
.inline-message {
display: flex;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
border-left: 4px solid;
background: var(--color-bg-soft);
font-size: var(--font-size-sm);
line-height: var(--line-height-snug);
}
.inline-message--info { border-color: var(--color-state-info); background: #EAF3FB; color: #08416B; }
.inline-message--success { border-color: var(--color-state-success); background: var(--color-severity-low-soft); color: var(--color-severity-low-on); }
.inline-message--warning { border-color: var(--color-state-warning); background: var(--color-severity-medium-soft); color: var(--color-severity-medium-on); }
.inline-message--error { border-color: var(--color-severity-critical); background: var(--color-severity-critical-soft); color: var(--color-severity-critical-on); }
[data-theme="dark"] .inline-message--info { background: #0E2A3F; color: #9CC0EA; }
/* ---------- Form controls ---------- */
.input, .select, .textarea {
width: 100%;
padding: 9px 12px;
font-family: inherit;
font-size: var(--font-size-sm);
line-height: 1.4;
color: var(--color-text-primary);
background: var(--color-surface);
border: 1px solid var(--color-border-moderate);
border-radius: var(--radius-md);
transition: border-color var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-border-strong); }
.input:focus, .select:focus, .textarea:focus {
outline: none;
border-color: var(--color-primary-500);
box-shadow: var(--shadow-focus);
}
.textarea { min-height: 96px; resize: vertical; line-height: var(--line-height-normal); }
.label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
margin-bottom: 6px;
}
.label__hint { display: block; font-size: var(--font-size-xs); color: var(--color-text-tertiary); font-weight: 400; margin-top: 2px; }
/* ---------- Layout primitives ---------- */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--lg { gap: var(--space-8); }
.stack--sm { gap: var(--space-2); }
.row { display: flex; gap: var(--space-4); align-items: center; }
.row--wrap { flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.container { max-width: var(--container-default); margin: 0 auto; padding: 0 var(--space-6); }
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }
.divider {
height: 1px;
background: var(--color-border-subtle);
border: none;
margin: 0;
}
/* ---------- Utilities ---------- */
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-mono { font-family: var(--font-family-mono); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.text-lg { font-size: var(--font-size-lg); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.tabular { font-variant-numeric: tabular-nums; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ---------- Print ---------- */
@media print {
body { background: #fff; color: #000; font-size: 11pt; }
.no-print, button.btn, nav, .nav, .toolbar, .tweaks-panel { display: none !important; }
.card { border: 1px solid #000; box-shadow: none; break-inside: avoid; }
a { color: #000; text-decoration: underline; }
h1, h2, h3 { break-after: avoid; }
.matrix-cell { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
@page { margin: 18mm; }
}

351
shared/playground-design-system/components-tier2.css Normal file
View file

@ -0,0 +1,351 @@
/* =============================================================================
components-tier2.css — Tier 2 components (Phase 2)
7. Decision-tree (AI Act 4-step)
8. Traffic-lights
9. Diff-review
10. Treemap (config-audit token hotspots)
11. Distribution / range-viz (P10/P50/P90)
12. Command-pipeline output
13. Pyramide (AI Act 4-tier)
14. Pipeline-cockpit
15. Verdict-pill with risk-meter
16. Codepoint-reveal (security Unicode steg)
17. Inherent + residual pair (already partially in Tier 1, formalize)
18. Small-multiples grid
============================================================================= */
/* DECISION-TREE — vertical flowchart with 4 colored terminals */
.decision-tree { display: flex; flex-direction: column; align-items: center; gap: 0; }
.dt-node {
padding: 12px 18px;
background: var(--color-surface);
border: 1px solid var(--color-border-moderate);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-align: center;
min-width: 240px;
max-width: 340px;
}
.dt-edge {
width: 1px; height: 28px; background: var(--color-border-moderate);
position: relative;
}
.dt-edge__label {
position: absolute;
left: 8px; top: 50%; transform: translateY(-50%);
font-size: 11px; color: var(--color-text-tertiary);
white-space: nowrap;
font-family: var(--font-family-mono);
}
.dt-node--terminal { color: #fff; border: none; padding: 14px 20px; font-weight: var(--font-weight-semibold); }
.dt-node--forbidden { background: var(--color-severity-extreme); }
.dt-node--high { background: var(--color-severity-critical); }
.dt-node--limited { background: var(--color-severity-medium); color: var(--color-severity-medium-on); }
.dt-node--minimal { background: var(--color-severity-low); }
.dt-row { display: flex; gap: var(--space-3); }
/* TRAFFIC-LIGHTS */
.traffic-light {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
border-radius: var(--radius-md);
background: var(--color-bg-soft);
border: 1px solid var(--color-border-subtle);
font-size: var(--font-size-sm);
}
.traffic-light__dot {
width: 10px; height: 10px; border-radius: 50%;
flex-shrink: 0;
}
.traffic-light[data-status="green"] .traffic-light__dot { background: var(--color-state-success); }
.traffic-light[data-status="yellow"] .traffic-light__dot { background: var(--color-severity-medium); }
.traffic-light[data-status="red"] .traffic-light__dot { background: var(--color-severity-critical); }
.traffic-light[data-status="gray"] .traffic-light__dot { background: var(--color-text-tertiary); }
.traffic-light__label { font-weight: var(--font-weight-medium); }
.traffic-light__why { color: var(--color-text-tertiary); font-size: var(--font-size-xs); }
/* DIFF-REVIEW */
.diff { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.diff__row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--color-border-subtle); }
.diff__row:first-child { border-top: none; }
.diff__cell { padding: 10px 14px; font-size: var(--font-size-sm); font-family: var(--font-family-mono); }
.diff__cell--removed { background: var(--color-severity-critical-soft); color: var(--color-severity-critical-on); border-right: 1px solid var(--color-border-subtle); }
.diff__cell--added { background: var(--color-severity-low-soft); color: var(--color-severity-low-on); }
.diff__cell--unchanged { color: var(--color-text-secondary); border-right: 1px solid var(--color-border-subtle); }
.diff__summary { display: flex; gap: var(--space-4); padding: 12px 16px; background: var(--color-bg-soft); border-bottom: 1px solid var(--color-border-subtle); font-size: var(--font-size-sm); }
.diff__summary-item { display: flex; gap: 6px; align-items: baseline; }
.diff__summary-count { font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
/* TREEMAP — pure CSS treemap with grid */
.treemap {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 36px;
gap: 2px;
background: var(--color-border-subtle);
border-radius: var(--radius-md);
overflow: hidden;
padding: 2px;
}
.treemap__tile {
padding: 8px 10px;
font-size: var(--font-size-xs);
display: flex;
flex-direction: column;
justify-content: space-between;
color: #fff;
overflow: hidden;
cursor: pointer;
position: relative;
}
.treemap__tile-label { font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.treemap__tile-tokens { font-family: var(--font-family-mono); font-size: 11px; opacity: 0.85; }
.treemap__tile[data-kind="claudemd"] { background: #4338CA; }
.treemap__tile[data-kind="plugin"] { background: #0F6E76; }
.treemap__tile[data-kind="skill"] { background: #9A6700; }
.treemap__tile[data-kind="mcp"] { background: #3F5963; }
.treemap__tile[data-kind="hook"] { background: #A40E26; }
/* DISTRIBUTION / range-viz */
.distribution { display: flex; flex-direction: column; gap: var(--space-3); }
.distribution__row { display: grid; grid-template-columns: 140px 1fr; gap: var(--space-3); align-items: center; font-size: var(--font-size-sm); }
.distribution__label { color: var(--color-text-secondary); }
.distribution__track {
position: relative; height: 28px;
background: var(--color-surface-sunken);
border-radius: var(--radius-sm);
overflow: visible;
}
.distribution__band {
position: absolute; top: 6px; bottom: 6px;
background: var(--color-primary-300);
border-radius: var(--radius-pill);
opacity: 0.4;
}
.distribution__median {
position: absolute; top: 0; bottom: 0; width: 2px;
background: var(--color-primary-700);
}
.distribution__median-label {
position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
font-size: 11px; font-family: var(--font-family-mono); white-space: nowrap;
color: var(--color-text-primary); font-weight: var(--font-weight-semibold);
}
.distribution__axis {
display: grid; grid-template-columns: 140px 1fr; gap: var(--space-3);
font-size: 11px; color: var(--color-text-tertiary); font-family: var(--font-family-mono);
margin-top: 4px;
}
.distribution__axis-ticks { display: flex; justify-content: space-between; }
/* COMMAND-PIPELINE OUTPUT */
.cmd-pipeline { display: flex; flex-direction: column; gap: var(--space-2); }
.cmd-step {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: var(--space-3);
padding: 12px 14px;
background: var(--color-surface-sunken);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
align-items: center;
}
.cmd-step__num {
width: 24px; height: 24px;
border-radius: 50%;
background: var(--color-text-primary);
color: var(--color-bg);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-family-mono);
font-size: 11px; font-weight: var(--font-weight-bold);
}
.cmd-step__cmd {
font-family: var(--font-family-mono);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
word-break: break-all;
}
.cmd-step__cmd .cmd-flag { color: var(--color-state-info); }
.cmd-step__cmd .cmd-arg { color: var(--color-severity-medium-on); }
/* PYRAMIDE — AI Act 4-tier */
.pyramide { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pyramide__tier {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 18px;
color: #fff;
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
border-radius: var(--radius-sm);
width: 100%;
}
.pyramide__tier--forbidden { background: var(--color-severity-extreme); max-width: 30%; }
.pyramide__tier--high { background: var(--color-severity-critical); max-width: 50%; }
.pyramide__tier--limited { background: var(--color-severity-medium); color: var(--color-severity-medium-on); max-width: 75%; }
.pyramide__tier--minimal { background: var(--color-severity-low); max-width: 100%; }
.pyramide__tier-label { display: flex; gap: var(--space-2); align-items: center; }
.pyramide__tier-share { font-family: var(--font-family-mono); font-size: 11px; opacity: 0.85; }
/* PIPELINE-COCKPIT */
.pipeline-cockpit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 0;
align-items: stretch;
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-surface);
}
.pc-stage {
padding: var(--space-3) var(--space-4);
border-right: 1px solid var(--color-border-subtle);
display: flex; flex-direction: column; gap: 4px;
position: relative;
}
.pc-stage:last-child { border-right: none; }
.pc-stage__num { font-family: var(--font-family-mono); font-size: 11px; color: var(--color-text-tertiary); }
.pc-stage__name { font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); }
.pc-stage__state {
font-size: 11px; padding: 2px 8px; border-radius: var(--radius-pill);
align-self: flex-start; margin-top: 4px;
font-weight: var(--font-weight-medium);
}
.pc-stage__state[data-state="done"] { background: var(--color-severity-low-soft); color: var(--color-severity-low-on); }
.pc-stage__state[data-state="running"] { background: var(--color-severity-medium-soft); color: var(--color-severity-medium-on); }
.pc-stage__state[data-state="empty"] { background: var(--color-bg-soft); color: var(--color-text-tertiary); }
.pc-stage__state[data-state="failed"] { background: var(--color-severity-critical); color: #fff; }
.pc-stage[data-current="true"] { background: var(--color-primary-50); }
[data-theme="dark"] .pc-stage[data-current="true"] { background: var(--color-primary-900); }
/* VERDICT-PILL with risk-meter */
.verdict-block {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-6);
align-items: center;
padding: var(--space-5) var(--space-6);
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
}
.verdict-pill-lg {
display: flex; flex-direction: column; align-items: center; gap: 2px;
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
font-weight: var(--font-weight-bold);
letter-spacing: 0.04em;
}
.verdict-pill-lg__verdict { font-size: var(--font-size-xl); }
.verdict-pill-lg__sub { font-size: 11px; font-weight: var(--font-weight-medium); opacity: 0.8; text-transform: uppercase; letter-spacing: 0.1em; }
.verdict-pill-lg[data-verdict="block"] { background: var(--color-severity-critical); color: #fff; }
.verdict-pill-lg[data-verdict="warning"] { background: var(--color-severity-medium); color: var(--color-severity-medium-on); }
.verdict-pill-lg[data-verdict="allow"] { background: var(--color-severity-low); color: #fff; }
.risk-meter { display: flex; flex-direction: column; gap: 6px; }
.risk-meter__track {
position: relative;
height: 12px;
background: linear-gradient(to right,
var(--color-severity-low) 0%, var(--color-severity-low) 14%,
var(--color-severity-medium) 14%, var(--color-severity-medium) 39%,
var(--color-severity-high) 39%, var(--color-severity-high) 64%,
var(--color-severity-critical) 64%, var(--color-severity-critical) 84%,
var(--color-severity-extreme) 84%, var(--color-severity-extreme) 100%);
border-radius: var(--radius-pill);
}
.risk-meter__pointer {
position: absolute; top: -4px; bottom: -4px;
width: 4px;
background: var(--color-text-primary);
border-radius: 2px;
box-shadow: 0 0 0 2px var(--color-bg);
}
.risk-meter__scale {
display: flex; justify-content: space-between;
font-size: 11px; color: var(--color-text-tertiary);
font-family: var(--font-family-mono);
}
.risk-meter__bands {
display: flex; justify-content: space-between;
font-size: 11px; color: var(--color-text-secondary);
}
.risk-meter__readout {
display: flex; align-items: baseline; gap: 8px;
}
.risk-meter__score {
font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.risk-meter__band-label { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
/* CODEPOINT-REVEAL */
.codepoint-reveal { background: var(--color-surface-sunken); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); overflow: hidden; }
.codepoint-reveal__head { padding: 10px 14px; background: var(--color-bg-soft); border-bottom: 1px solid var(--color-border-subtle); display: flex; justify-content: space-between; align-items: center; }
.codepoint-reveal__body { padding: var(--space-4); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.codepoint-reveal__col { display: flex; flex-direction: column; gap: 8px; }
.codepoint-reveal__col-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-tertiary); font-weight: var(--font-weight-semibold); }
.codepoint-reveal__source {
font-family: var(--font-family-mono);
font-size: var(--font-size-sm);
padding: 12px;
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-sm);
min-height: 64px;
word-break: break-all;
white-space: pre-wrap;
}
.cp-tag { background: var(--color-severity-critical); color: #fff; padding: 1px 4px; border-radius: 2px; font-size: 11px; }
.cp-zw { background: var(--color-severity-medium); color: var(--color-severity-medium-on); padding: 1px 4px; border-radius: 2px; font-size: 11px; }
.cp-bidi { background: var(--color-severity-high); color: #fff; padding: 1px 4px; border-radius: 2px; font-size: 11px; }
.codepoint-reveal__decoded {
font-family: var(--font-family-mono);
font-size: var(--font-size-sm);
padding: 12px;
background: var(--color-text-primary);
color: var(--color-bg);
border-radius: var(--radius-sm);
word-break: break-all;
}
/* SMALL-MULTIPLES GRID (16-category posture) */
.small-multiples {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-3);
}
.sm-card {
padding: var(--space-3);
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-md);
display: flex; flex-direction: column; gap: 6px;
}
.sm-card__header { display: flex; justify-content: space-between; align-items: baseline; }
.sm-card__name { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.sm-card__grade {
font-family: var(--font-family-mono);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
border-radius: var(--radius-sm);
}
.sm-card__grade[data-grade="A"] { background: var(--color-severity-low); color: #fff; }
.sm-card__grade[data-grade="B"] { background: var(--color-severity-low-soft); color: var(--color-severity-low-on); }
.sm-card__grade[data-grade="C"] { background: var(--color-severity-medium-soft); color: var(--color-severity-medium-on); }
.sm-card__grade[data-grade="D"] { background: var(--color-severity-high-soft); color: var(--color-severity-high-on); }
.sm-card__grade[data-grade="F"] { background: var(--color-severity-critical); color: #fff; }
.sm-card__bar { height: 4px; background: var(--color-surface-sunken); border-radius: var(--radius-pill); overflow: hidden; }
.sm-card__bar-fill { height: 100%; background: var(--color-primary-500); }
.sm-card__status { font-size: 11px; color: var(--color-text-tertiary); }
@media (max-width: 880px) { .small-multiples { grid-template-columns: repeat(2, 1fr); } }
/* OWASP badges (specific colors) */
.badge--owasp-llm { background: #1F2328; color: #fff; }
.badge--owasp-asi { background: #4338CA; color: #fff; }
.badge--owasp-ast { background: #9A6700; color: #fff; }
.badge--owasp-mcp { background: #0F6E76; color: #fff; }

649
shared/playground-design-system/components.css Normal file
View file

@ -0,0 +1,649 @@
/* =============================================================================
components.css — Tier 1 components (Phase 1)
1. Radar / Spider
2. Matrix / Heatmap (5x5 ROS)
3. Findings-browser
4. Critique-card
5. Wizard / Stepper
6. Live-meter / Quality-validator
============================================================================= */
/* =============================================================================
1. RADAR
============================================================================= */
.radar {
display: grid;
grid-template-columns: 1fr 240px;
gap: var(--space-6);
align-items: start;
}
.radar__chart {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
max-width: 460px;
}
.radar__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.radar__grid-line { fill: none; stroke: var(--color-border-subtle); stroke-width: 1; }
.radar__axis { stroke: var(--color-border-moderate); stroke-width: 1; }
.radar__label {
font-family: var(--font-family-sans);
font-size: 12px;
font-weight: var(--font-weight-medium);
fill: var(--color-text-secondary);
text-anchor: middle;
}
.radar__tick { font-size: 10px; fill: var(--color-text-tertiary); }
.radar__series {
fill: var(--color-primary-500);
fill-opacity: 0.18;
stroke: var(--color-primary-500);
stroke-width: 2;
stroke-linejoin: round;
}
.radar__series--target {
fill: none;
stroke: var(--color-text-tertiary);
stroke-width: 1.5;
stroke-dasharray: 4 4;
}
.radar__point { fill: var(--color-primary-500); r: 4; }
.radar__point--target { fill: var(--color-bg); stroke: var(--color-text-tertiary); stroke-width: 1.5; r: 3; }
.radar__legend { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--font-size-sm); }
.radar__legend-item { display: flex; align-items: baseline; gap: var(--space-2); }
.radar__legend-swatch { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; transform: translateY(1px); }
.radar__legend-swatch--current { background: var(--color-primary-500); }
.radar__legend-swatch--target {
background: transparent;
border: 1.5px dashed var(--color-text-tertiary);
}
.radar__scores {
margin-top: var(--space-4);
border-top: 1px solid var(--color-border-subtle);
padding-top: var(--space-3);
display: grid;
gap: 4px;
}
.radar__score-row { display: flex; justify-content: space-between; font-size: var(--font-size-xs); }
.radar__score-row dt { color: var(--color-text-secondary); }
.radar__score-row dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: var(--font-weight-medium); }
@media (max-width: 720px) {
.radar { grid-template-columns: 1fr; }
}
/* =============================================================================
2. MATRIX / HEATMAP (5x5 ROS)
============================================================================= */
.matrix {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-3);
}
.matrix__y-label {
writing-mode: vertical-rl;
transform: rotate(180deg);
text-align: center;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
letter-spacing: 0.06em;
text-transform: uppercase;
align-self: stretch;
display: flex;
align-items: center;
justify-content: center;
}
.matrix__main { display: flex; flex-direction: column; gap: var(--space-2); }
.matrix__grid {
display: grid;
grid-template-columns: 32px repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr) 32px;
gap: 4px;
aspect-ratio: 5 / 5;
width: 100%;
}
.matrix__y-tick {
display: flex; align-items: center; justify-content: center;
font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
}
.matrix__x-tick {
display: flex; align-items: center; justify-content: center;
font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
}
.matrix__corner { /* empty bottom-left */ }
.matrix__cell {
position: relative;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
cursor: pointer;
border: 1px solid transparent;
transition: transform var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default);
min-height: 64px;
background: var(--color-severity-low-soft);
}
.matrix__cell:hover { transform: scale(1.02); box-shadow: var(--shadow-md); z-index: 2; }
.matrix__cell[aria-selected="true"] {
outline: 3px solid var(--color-primary-500);
outline-offset: 2px;
z-index: 3;
}
/* Severity zones based on score (sannsynlighet × konsekvens, 1-25) */
.matrix__cell[data-score="1"],
.matrix__cell[data-score="2"],
.matrix__cell[data-score="3"],
.matrix__cell[data-score="4"] { background: var(--color-severity-low-soft); }
.matrix__cell[data-score="5"],
.matrix__cell[data-score="6"],
.matrix__cell[data-score="8"] { background: var(--color-severity-low-soft); }
.matrix__cell[data-score="9"],
.matrix__cell[data-score="10"],
.matrix__cell[data-score="12"] { background: var(--color-severity-medium-soft); }
.matrix__cell[data-score="15"],
.matrix__cell[data-score="16"] { background: var(--color-severity-high-soft); }
.matrix__cell[data-score="20"],
.matrix__cell[data-score="25"] { background: var(--color-severity-critical-soft); }
.matrix__cell-score {
position: absolute;
top: 4px;
left: 6px;
font-size: 11px;
font-weight: var(--font-weight-semibold);
color: var(--color-text-tertiary);
font-variant-numeric: tabular-nums;
}
.matrix__cell-bubbles {
display: flex;
flex-wrap: wrap;
gap: 3px;
align-items: center;
justify-content: center;
padding: 12px 6px 6px;
}
.matrix__bubble {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
font-size: 10px;
font-weight: var(--font-weight-semibold);
font-family: var(--font-family-mono);
color: var(--color-text-primary);
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(15, 18, 22, 0.18);
border-radius: var(--radius-pill);
}
.matrix__bubble--count {
background: var(--color-text-primary);
color: var(--color-bg);
border: none;
}
[data-theme="dark"] .matrix__bubble { background: rgba(0,0,0,0.45); color: var(--color-text-primary); border-color: rgba(255,255,255,0.15); }
.matrix__x-label {
text-align: center;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
letter-spacing: 0.06em;
text-transform: uppercase;
margin-top: var(--space-1);
}
.matrix__legend {
display: flex; gap: var(--space-4); flex-wrap: wrap;
font-size: var(--font-size-xs);
margin-top: var(--space-3);
color: var(--color-text-secondary);
}
.matrix__legend-swatch {
display: inline-block; width: 14px; height: 14px;
border-radius: 3px; margin-right: 6px; vertical-align: -3px;
}
/* =============================================================================
3. FINDINGS-BROWSER
============================================================================= */
.findings {
display: grid;
grid-template-columns: 360px 1fr;
gap: var(--space-6);
align-items: start;
}
.findings__list {
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
max-height: 640px;
display: flex;
flex-direction: column;
}
.findings__toolbar {
display: flex;
gap: var(--space-2);
padding: var(--space-3);
border-bottom: 1px solid var(--color-border-subtle);
background: var(--color-bg-soft);
align-items: center;
}
.findings__search {
flex: 1;
padding: 6px 10px;
font-size: var(--font-size-xs);
border: 1px solid var(--color-border-moderate);
border-radius: var(--radius-md);
background: var(--color-surface);
color: inherit;
font-family: inherit;
}
.findings__group {
border-bottom: 1px solid var(--color-border-subtle);
}
.findings__group-header {
padding: 8px 12px;
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
background: var(--color-bg-soft);
display: flex;
justify-content: space-between;
align-items: center;
}
.findings__items {
list-style: none;
margin: 0;
padding: 0;
overflow-y: auto;
}
.findings__item {
padding: 10px 12px;
border-top: 1px solid var(--color-border-subtle);
cursor: pointer;
display: grid;
grid-template-columns: auto 1fr;
gap: 8px 10px;
align-items: start;
transition: background var(--duration-fast) var(--ease-default);
}
.findings__item:first-child { border-top: none; }
.findings__item:hover { background: var(--color-bg-soft); }
.findings__item[aria-selected="true"] {
background: var(--color-primary-50);
box-shadow: inset 3px 0 0 var(--color-primary-500);
}
[data-theme="dark"] .findings__item[aria-selected="true"] { background: var(--color-primary-900); }
.findings__item-id {
font-family: var(--font-family-mono);
font-size: 11px;
color: var(--color-text-tertiary);
grid-column: 2;
}
.findings__item-title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
line-height: 1.4;
color: var(--color-text-primary);
grid-column: 2;
}
.findings__item-meta {
display: flex;
gap: 6px;
flex-wrap: wrap;
grid-column: 2;
}
.findings__item-severity-dot {
width: 8px; height: 8px; border-radius: 50%;
margin-top: 7px;
grid-row: 1 / span 3;
}
.findings__item-severity-dot[data-severity="critical"] { background: var(--color-severity-critical); }
.findings__item-severity-dot[data-severity="high"] { background: var(--color-severity-high); }
.findings__item-severity-dot[data-severity="medium"] { background: var(--color-severity-medium); }
.findings__item-severity-dot[data-severity="low"] { background: var(--color-severity-low); }
.findings__item-severity-dot[data-severity="info"] { background: var(--color-text-tertiary); }
.findings__detail {
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
@media (max-width: 880px) { .findings { grid-template-columns: 1fr; } }
/* =============================================================================
4. CRITIQUE-CARD
============================================================================= */
.critique-card {
background: var(--color-surface);
border: 1px solid var(--color-border-subtle);
border-left: 4px solid var(--color-border-moderate);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.critique-card[data-severity="critical"] { border-left-color: var(--color-severity-critical); }
.critique-card[data-severity="high"] { border-left-color: var(--color-severity-high); }
.critique-card[data-severity="medium"] { border-left-color: var(--color-severity-medium); }
.critique-card[data-severity="low"] { border-left-color: var(--color-severity-low); }
.critique-card[data-severity="info"] { border-left-color: var(--color-state-info); }
.critique-card__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-3);
}
.critique-card__title {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
margin: 0;
}
.critique-card__meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.critique-card__id {
font-family: var(--font-family-mono);
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
}
.critique-card__evidence {
font-family: var(--font-family-mono);
font-size: var(--font-size-xs);
background: var(--color-surface-sunken);
border: 1px solid var(--color-border-subtle);
border-radius: var(--radius-sm);
padding: 8px 10px;
white-space: pre-wrap;
word-break: break-word;
color: var(--color-text-secondary);
}
.critique-card__recommendation {
font-size: var(--font-size-sm);
color: var(--color-text-primary);
line-height: var(--line-height-snug);
}
.critique-card__actions {
display: flex;
gap: var(--space-2);
margin-top: 4px;
flex-wrap: wrap;
}
.critique-card[data-status="approved"] { opacity: 0.65; background: var(--color-bg-soft); }
.critique-card[data-status="rejected"] { opacity: 0.5; }
/* =============================================================================
5. WIZARD / STEPPER
============================================================================= */
.stepper {
display: flex;
gap: 0;
margin-bottom: var(--space-8);
border-bottom: 1px solid var(--color-border-subtle);
padding-bottom: var(--space-4);
overflow-x: auto;
}
.stepper__step {
flex: 1;
min-width: 140px;
display: flex;
align-items: center;
gap: var(--space-3);
padding: 0 var(--space-4) 0 0;
text-align: left;
background: none;
border: none;
cursor: pointer;
position: relative;
font-family: inherit;
color: var(--color-text-tertiary);
}
.stepper__step:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 1px;
background: var(--color-border-moderate);
}
.stepper__step-number {
display: flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border-radius: 50%;
border: 1.5px solid var(--color-border-moderate);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-tertiary);
background: var(--color-surface);
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.stepper__step-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.stepper__step-label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: inherit;
line-height: 1.3;
}
.stepper__step-hint {
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);
line-height: 1.3;
}
.stepper__step[data-state="active"] { color: var(--color-text-primary); }
.stepper__step[data-state="active"] .stepper__step-number { border-color: var(--color-primary-500); background: var(--color-primary-500); color: #fff; }
.stepper__step[data-state="complete"] { color: var(--color-text-secondary); }
.stepper__step[data-state="complete"] .stepper__step-number { border-color: var(--color-state-success); background: var(--color-state-success); color: #fff; }
.stepper__step[data-state="complete"] .stepper__step-number::before { content: '✓'; font-size: 14px; }
.stepper__step[data-state="complete"] .stepper__step-number-text { display: none; }
.wizard__panel { display: none; }
.wizard__panel[data-active="true"] { display: block; }
.wizard__nav {
display: flex;
justify-content: space-between;
margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border-subtle);
}
/* =============================================================================
6. LIVE-METER
============================================================================= */
.live-meter {
display: grid;
gap: var(--space-3);
}
.live-meter__row {
display: grid;
grid-template-columns: 180px 1fr 56px;
gap: var(--space-3);
align-items: center;
font-size: var(--font-size-sm);
}
.live-meter__label { color: var(--color-text-secondary); }
.live-meter__bar {
height: 8px;
background: var(--color-surface-sunken);
border-radius: var(--radius-pill);
overflow: hidden;
position: relative;
}
.live-meter__bar-fill {
height: 100%;
background: var(--color-primary-500);
border-radius: var(--radius-pill);
transition: width var(--duration-normal) var(--ease-default);
}
.live-meter__bar-fill[data-state="pass"] { background: var(--color-state-success); }
.live-meter__bar-fill[data-state="weak"] { background: var(--color-severity-medium); }
.live-meter__bar-fill[data-state="fail"] { background: var(--color-severity-critical); }
.live-meter__value {
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
}
.live-meter__overall {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: var(--space-3) var(--space-4);
background: var(--color-bg-soft);
border-radius: var(--radius-md);
margin-top: var(--space-2);
}
.live-meter__overall-value {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
/* Antipattern annotations (inline, subtle) */
.lint-annotation {
display: inline-flex;
gap: 6px;
padding: 6px 10px;
margin-top: 6px;
background: var(--color-severity-medium-soft);
border-left: 3px solid var(--color-severity-medium);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
font-size: var(--font-size-xs);
color: var(--color-severity-medium-on);
line-height: var(--line-height-snug);
}
.lint-annotation--error {
background: var(--color-severity-critical-soft);
color: var(--color-severity-critical);
border-left-color: var(--color-severity-critical);
}
.lint-annotation__code {
font-family: var(--font-family-mono);
font-weight: var(--font-weight-semibold);
}
/* =============================================================================
App shell — header / nav (used by Scenario A and showcase)
============================================================================= */
.app-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border-subtle);
padding: var(--space-3) var(--space-6);
display: flex;
align-items: center;
gap: var(--space-4);
}
.app-header__brand {
display: flex;
align-items: center;
gap: var(--space-3);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-md);
text-decoration: none;
color: var(--color-text-primary);
}
.app-header__brand-mark {
width: 28px; height: 28px;
background: var(--color-primary-500);
border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
color: #fff;
font-family: var(--font-family-mono);
font-size: 13px;
font-weight: 700;
}
.app-header__breadcrumb {
color: var(--color-text-tertiary);
font-size: var(--font-size-sm);
display: flex; gap: var(--space-2); align-items: center;
}
.app-header__spacer { flex: 1; }
.app-header__actions { display: flex; gap: var(--space-2); align-items: center; }
.theme-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border: 1px solid var(--color-border-moderate);
border-radius: var(--radius-md);
background: var(--color-surface);
color: var(--color-text-secondary);
font-size: var(--font-size-xs);
font-family: inherit;
cursor: pointer;
}
.theme-toggle:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }
/* Detail sidepanel (slides from right) */
.sidepanel {
position: fixed;
inset: 0 0 0 auto;
width: min(560px, 92vw);
background: var(--color-surface);
border-left: 1px solid var(--color-border-subtle);
box-shadow: var(--shadow-lg);
transform: translateX(100%);
transition: transform var(--duration-normal) var(--ease-default);
z-index: 100;
display: flex;
flex-direction: column;
overflow: hidden;
}
.sidepanel[data-open="true"] { transform: translateX(0); }
.sidepanel__header {
padding: var(--space-4) var(--space-6);
border-bottom: 1px solid var(--color-border-subtle);
display: flex; justify-content: space-between; align-items: flex-start;
gap: var(--space-3);
}
.sidepanel__body {
flex: 1;
overflow-y: auto;
padding: var(--space-6);
}
.sidepanel__close {
background: none; border: none; cursor: pointer;
width: 32px; height: 32px;
border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
color: var(--color-text-secondary);
}
.sidepanel__close:hover { background: var(--color-bg-soft); color: var(--color-text-primary); }
.scrim {
position: fixed; inset: 0;
background: var(--color-overlay);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration-normal) var(--ease-default);
z-index: 99;
}
.scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

175
shared/playground-design-system/print.css Normal file
View file

@ -0,0 +1,175 @@
/* =============================================================================
print.css — A4 print stylesheet for offentlige dokumenter
- Severity-mønstre (skravur) som fungerer i B/W
- Header/footer med kommune-logo-slot, signaturfelt, paginering
- 12pt minimum kropp, 11pt for metadata
- Skjuler interaktiv chrome (header, knapper, toggles)
============================================================================= */
@page {
size: A4 portrait;
margin: 22mm 18mm 24mm 18mm;
@bottom-right { content: counter(page) " / " counter(pages); font-family: "Inter", sans-serif; font-size: 9pt; color: #555; }
}
@page :first { @top-left { content: none; } }
@page landscape { size: A4 landscape; }
/* SVG severity-mønstre (skravur) — definert i print-only inline-svg.
For å bruke: legg til class .pattern-low/.pattern-medium/etc. på elementet
som ellers fyller med severity-fargen. */
@media print {
:root {
--color-bg: #FFFFFF;
--color-surface: #FFFFFF;
--color-surface-sunken: #F5F5F5;
--color-bg-soft: #F7F7F7;
--color-border-subtle: #C7C7C7;
--color-border-moderate: #888888;
--color-text-primary: #000000;
--color-text-secondary: #2A2A2A;
--color-text-tertiary: #555555;
}
html, body { background: #FFFFFF !important; color: #000 !important; font-size: 11pt !important; }
body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* Hide interactive chrome */
.app-header, header.app-header,
.theme-toggle, #theme-toggle, #themeToggle,
.filter-bar, .view-toggle, .screen-tabs,
.btn--primary, .btn--secondary, .btn--ghost,
.live-dot, .pane__head .badge,
.accept-banner button,
.scenario-card .btn,
.footer { display: none !important; }
/* Container = full width on print */
.container, .container--wide { max-width: none !important; padding: 0 !important; }
/* Body type */
body, p, li, dd, dt, td, th, .field__value {
font-family: "Inter", sans-serif;
font-size: 11pt; line-height: 1.45; color: #000;
}
h1 { font-size: 22pt; line-height: 1.2; margin: 0 0 6pt; }
h2 { font-size: 16pt; line-height: 1.25; margin: 18pt 0 6pt; page-break-after: avoid; }
h3 { font-size: 13pt; margin: 12pt 0 4pt; page-break-after: avoid; }
h4 { font-size: 11pt; margin: 10pt 0 3pt; }
/* Page breaks */
.page-break { page-break-before: always; }
.avoid-break, .finding, .critique, .scenario-card, table, figure {
page-break-inside: avoid;
}
/* Severity patterns (B/W-safe). Stack pattern-bg + dotted/diag border indicators. */
.matrix__cell[data-score],
.badge--severity-low, .badge--severity-medium, .badge--severity-high,
.badge--severity-critical, .badge--severity-extreme {
background-color: #FFF !important;
color: #000 !important;
border: 1px solid #000 !important;
}
.badge--severity-low::before, .badge--severity-medium::before,
.badge--severity-high::before, .badge--severity-critical::before,
.badge--severity-extreme::before {
content: ""; display: inline-block;
width: 7pt; height: 7pt; margin-right: 4pt;
border: 1px solid #000;
vertical-align: middle;
}
.badge--severity-low::before { background: #FFF; }
.badge--severity-medium::before { background: repeating-linear-gradient(45deg, #000 0 0.6pt, transparent 0.6pt 3pt); }
.badge--severity-high::before { background: repeating-linear-gradient(45deg, #000 0 1pt, transparent 1pt 2.5pt); }
.badge--severity-critical::before { background: repeating-linear-gradient(0deg, #000 0 0.5pt, transparent 0.5pt 2pt),
repeating-linear-gradient(90deg, #000 0 0.5pt, transparent 0.5pt 2pt); }
.badge--severity-extreme::before { background: #000; }
/* Matrix cells in print: skravur i stedet for farge */
.matrix__cell { color: #000 !important; border: 0.5pt solid #888 !important; }
.matrix__cell[data-score]:not([data-score="0"]) { background: #FFF !important; }
.matrix__cell[data-score="1"], .matrix__cell[data-score="2"],
.matrix__cell[data-score="3"], .matrix__cell[data-score="4"] {
background: #FFF !important;
}
.matrix__cell[data-score="5"], .matrix__cell[data-score="6"], .matrix__cell[data-score="8"] {
background: repeating-linear-gradient(45deg, rgba(0,0,0,0.18) 0 0.5pt, transparent 0.5pt 4pt) !important;
}
.matrix__cell[data-score="9"], .matrix__cell[data-score="10"], .matrix__cell[data-score="12"] {
background: repeating-linear-gradient(45deg, rgba(0,0,0,0.32) 0 0.7pt, transparent 0.7pt 3pt) !important;
}
.matrix__cell[data-score="15"], .matrix__cell[data-score="16"], .matrix__cell[data-score="20"] {
background: repeating-linear-gradient(45deg, rgba(0,0,0,0.48) 0 1pt, transparent 1pt 2pt) !important;
}
.matrix__cell[data-score="25"] { background: #000 !important; color: #FFF !important; }
.matrix__cell[data-score="25"] .matrix__cell-score { color: #FFF !important; }
/* Surfaces flat */
.card, .pane, .finding, .critique, .scenario-card, .posture-summary, .verdict-block {
background: #FFF !important;
border: 0.5pt solid #888 !important;
box-shadow: none !important;
border-radius: 0 !important;
}
/* Links visible but not underlined-everything */
a { color: #000; text-decoration: none; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
a[href^="#"]::after, a[href^="/"]::after, a:not([href*="://"])::after { content: ""; }
/* Standard footer block: signaturfelt for offentlige dokumenter */
.print-footer {
margin-top: 24pt;
padding-top: 10pt;
border-top: 0.5pt solid #888;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18pt;
font-size: 10pt;
}
.print-signature { display: flex; flex-direction: column; gap: 28pt; }
.print-signature__line {
border-bottom: 0.5pt solid #000;
height: 28pt;
}
.print-signature__caption {
font-size: 9pt;
color: #555;
}
/* Header for offisielle rapporter — kommune-logo-slot */
.print-header {
display: grid;
grid-template-columns: auto 1fr;
gap: 14pt;
align-items: center;
padding-bottom: 10pt;
margin-bottom: 16pt;
border-bottom: 0.5pt solid #888;
}
.print-header__logo {
width: 40pt; height: 40pt;
border: 0.5pt solid #888;
display: flex; align-items: center; justify-content: center;
font-family: "Inter", sans-serif; font-size: 9pt; color: #888;
}
.print-header__meta { font-size: 9pt; color: #555; }
.print-header__meta strong { color: #000; }
/* Avoid orphan headings */
h2, h3, h4 { orphans: 3; widows: 3; }
p, li { orphans: 2; widows: 2; }
}
/* Screen-mode preview class — see print preview without actually printing */
.preview-print { background: #ddd; padding: var(--space-8); }
.preview-print .a4 {
width: 210mm; min-height: 297mm;
margin: 0 auto;
background: #fff;
padding: 22mm 18mm;
box-shadow: 0 6px 24px rgba(0,0,0,0.18);
font-size: 11pt; line-height: 1.45; color: #000;
}
.preview-print .a4 + .a4 { margin-top: 12mm; }

88
shared/playground-design-system/schemas/finding.schema.json Normal file
View file

@ -0,0 +1,88 @@
{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"$id": "https://playground-ds.no/schemas/finding.json",
"title": "Finding",
"description": "Et enkelt funn fra en plugin-skanning. Brukes av llm-security, config-audit, ultraplan-review og ms-ai-review.",
"type": "object",
"required": ["id", "title", "severity", "source"],
"properties": {
"id": {
"type": "string",
"description": "Stabil ID, f.eks. SVV-2026-118-F-001",
"pattern": "^[A-Z0-9-]{4,}$"
},
"title": { "type": "string", "minLength": 4, "maxLength": 140 },
"severity": {
"enum": ["info", "low", "medium", "high", "critical"],
"description": "Standard 5-trinns skala. Maps til CSS-tokens --color-severity-*."
},
"score": {
"type": "number", "minimum": 0, "maximum": 10,
"description": "CVSS-lignende numerisk score. Valgfri — severity er primær."
},
"rules": {
"type": "array",
"items": { "type": "string", "pattern": "^[A-Z]{2,4}[0-9]{2}(\\.[0-9]+)?$" },
"description": "Regler/categories truffet, f.eks. LLM01, ASI02, SVV01"
},
"source": {
"type": "object",
"required": ["kind", "ref"],
"properties": {
"kind": { "enum": ["document", "prompt-response", "code-file", "config-file", "okr-set"] },
"ref": { "type": "string", "description": "Filnavn / URL / sak-ID" },
"line": { "type": "integer", "minimum": 1 },
"col": { "type": "integer", "minimum": 0 },
"snippet": { "type": "string", "maxLength": 800 }
}
},
"evidence": {
"type": "array",
"items": {
"type": "object",
"required": ["kind", "value"],
"properties": {
"kind": { "enum": ["text", "codepoint", "metric", "url", "image"] },
"value": { "type": "string" },
"label": { "type": "string" }
}
}
},
"rationale": { "type": "string", "description": "Norsk forklaring av hvorfor dette er et problem i denne konteksten" },
"recommendation": {
"type": "object",
"properties": {
"summary": { "type": "string" },
"steps": { "type": "array", "items": { "type": "string" } },
"ttf": { "type": "string", "description": "Tid til løsning, f.eks. '2 t', '1 d', '5 d'" },
"owner": { "type": "string", "description": "Foreslått eier (rolle eller person)" }
}
},
"references": {
"type": "array",
"items": {
"type": "object",
"properties": {
"label": { "type": "string" },
"url": { "type": "string", "format": "uri" }
}
}
},
"status": {
"enum": ["new", "acknowledged", "in-progress", "fixed", "accepted-risk", "false-positive"],
"default": "new"
},
"acceptance": {
"type": "object",
"description": "Påkrevd hvis status = accepted-risk og severity ≥ high",
"properties": {
"approver": { "type": "string" },
"date": { "type": "string", "format": "date" },
"rationale": { "type": "string" },
"review_by": { "type": "string", "format": "date" }
}
},
"created": { "type": "string", "format": "date-time" },
"updated": { "type": "string", "format": "date-time" }
}
}

78
shared/playground-design-system/schemas/okr-set.schema.json Normal file
View file

@ -0,0 +1,78 @@
{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"$id": "https://playground-ds.no/schemas/okr-set.json",
"title": "OKR-sett",
"description": "Et OKR-sett: ett mål (Objective) med 1–6 nøkkelresultater (KR). Brukes av OKR live-writer.",
"type": "object",
"required": ["id", "objective", "key_results", "owner", "period"],
"properties": {
"id": { "type": "string" },
"owner": {
"type": "object",
"required": ["name", "unit"],
"properties": {
"name": { "type": "string" },
"unit": { "type": "string", "description": "Avdeling/seksjon" },
"org": { "type": "string", "description": "Kommune/etat" }
}
},
"period": {
"type": "object",
"required": ["kind", "label", "start", "end"],
"properties": {
"kind": { "enum": ["tertial", "kvartal", "halvår", "år"] },
"label": { "type": "string", "description": "f.eks. 'T2 2026'" },
"start": { "type": "string", "format": "date" },
"end": { "type": "string", "format": "date" }
}
},
"objective": {
"type": "object",
"required": ["text"],
"properties": {
"text": { "type": "string", "minLength": 10, "maxLength": 240 },
"rationale": { "type": "string" }
}
},
"key_results": {
"type": "array", "minItems": 1, "maxItems": 6,
"items": {
"type": "object",
"required": ["id", "text"],
"properties": {
"id": { "type": "string", "pattern": "^KR[0-9]+$" },
"text": { "type": "string" },
"metric": {
"type": "object",
"properties": {
"name": { "type": "string" },
"unit": { "type": "string", "description": "%, dager, kr, antall, …" },
"baseline": { "type": "number" },
"target": { "type": "number" },
"stretch": { "type": "number" },
"source": { "type": "string", "description": "KPI-katalog ref / Tableau-sett / etc." }
}
},
"deadline": { "type": "string", "format": "date" }
}
}
},
"score": {
"type": "object",
"description": "Generert av OKR-writer ved kvalitetsanalyse",
"properties": {
"overall": { "type": "number", "minimum": 0, "maximum": 100 },
"measurability": { "type": "number" },
"specificity": { "type": "number" },
"ambition": { "type": "number" },
"actionability": { "type": "number" }
}
},
"critiques": {
"type": "array",
"items": { "$ref": "https://playground-ds.no/schemas/finding.json" }
},
"version": { "type": "string", "description": "Semver eller utkast 0.4-stil" },
"status": { "enum": ["draft", "in-review", "approved", "active", "closed"], "default": "draft" }
}
}

59
shared/playground-design-system/schemas/ros-threat.schema.json Normal file
View file

@ -0,0 +1,59 @@
{
"$schema": "https://json-schema.org/draft/2020-12/schema",
"$id": "https://playground-ds.no/schemas/ros-threat.json",
"title": "ROS-trussel",
"description": "Én identifisert trussel i en risiko- og sårbarhetsanalyse. NS 5814-justert.",
"type": "object",
"required": ["id", "title", "category", "inherent"],
"properties": {
"id": { "type": "string", "pattern": "^T-[0-9]{3,}$" },
"title": { "type": "string" },
"description": { "type": "string" },
"category": {
"enum": ["personvern", "informasjonssikkerhet", "datakvalitet",
"compliance", "dataintegritet", "leverandørrisiko",
"tilgjengelighet", "omdømme", "økonomi", "andre"]
},
"actors": {
"type": "array",
"items": { "enum": ["intern-bruker", "saksbehandler", "innbygger", "ekstern-aktør", "leverandør", "system", "ai-modell"] }
},
"inherent": {
"type": "object",
"required": ["likelihood", "consequence"],
"properties": {
"likelihood": { "type": "integer", "minimum": 1, "maximum": 5 },
"consequence": { "type": "integer", "minimum": 1, "maximum": 5 },
"rationale": { "type": "string" }
}
},
"controls": {
"type": "array",
"items": {
"type": "object",
"required": ["id", "title"],
"properties": {
"id": { "type": "string", "pattern": "^M-[0-9]{3,}$" },
"title": { "type": "string" },
"kind": { "enum": ["preventiv", "deteksjon", "korreksjon", "policy", "opplæring", "teknisk"] },
"status": { "enum": ["planlagt", "implementert", "validert", "ute-av-drift"] },
"owner": { "type": "string" },
"due": { "type": "string", "format": "date" }
}
}
},
"residual": {
"type": "object",
"properties": {
"likelihood": { "type": "integer", "minimum": 1, "maximum": 5 },
"consequence": { "type": "integer", "minimum": 1, "maximum": 5 },
"rationale": { "type": "string" }
}
},
"regulatory_refs": {
"type": "array",
"items": { "type": "string", "description": "GDPR Art. 35, AI Act Art. 6, NS 5814, …" }
},
"status": { "enum": ["open", "mitigating", "monitored", "closed", "transferred"], "default": "open" }
}
}

185
shared/playground-design-system/tokens.css Normal file
View file

@ -0,0 +1,185 @@
/* =============================================================================
Playground Design System — tokens.css
v0.1 — Phase 1
Aksel/Digdir-aligned. Norwegian public sector. WCAG 2.1 AA.
============================================================================= */
:root {
/* ---------- Typography -------------------------------------------------- */
--font-family-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-family-mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, monospace;
--font-family-serif: "Source Serif 4", Georgia, serif;
--font-size-xs: 13px;
--font-size-sm: 15px;
--font-size-md: 17px; /* body default */
--font-size-lg: 19px;
--font-size-xl: 23px;
--font-size-2xl: 28px;
--font-size-3xl: 34px;
--font-size-4xl: 44px;
--line-height-tight: 1.2;
--line-height-snug: 1.4;
--line-height-normal: 1.55;
--measure: 65ch;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
/* ---------- Primary (Digdir) ------------------------------------------- */
--color-primary-50: #E8F1FB;
--color-primary-100: #C6DCF4;
--color-primary-200: #9CC0EA;
--color-primary-300: #6FA5DD;
--color-primary-400: #3B83CB;
--color-primary-500: #0062BA; /* Digdir blue */
--color-primary-600: #00569F;
--color-primary-700: #004A8F;
--color-primary-800: #003A70;
--color-primary-900: #002F5C;
/* ---------- Severity ramp (deuteranopia-safe) ------------------------- */
--color-severity-low: #1A7F37;
--color-severity-medium: #BF8700;
--color-severity-high: #CC5A00;
--color-severity-critical: #A40E26;
--color-severity-extreme: #66050F;
/* Soft fills (matrix cells, badges) */
--color-severity-low-soft: #DDF4E4;
--color-severity-medium-soft: #FBF0CC;
--color-severity-high-soft: #FCE0CC;
--color-severity-critical-soft: #F8D7DC;
--color-severity-extreme-soft: #E8C7CC;
/* Foreground on severity bg */
--color-severity-low-on: #0E4A20;
--color-severity-medium-on: #5C3F00;
--color-severity-high-on: #5C2900;
--color-severity-critical-on: #FFFFFF;
--color-severity-extreme-on: #FFFFFF;
/* ---------- State (distinct from severity) --------------------------- */
--color-state-success: #1A7F37;
--color-state-warning: #BF8700;
--color-state-failed: #7D1A1A; /* dark desaturated red — "broke" */
--color-state-blocked: #5C2D91; /* purple — distinct */
--color-state-info: #0969DA;
--color-state-running: #BF8700;
--color-state-queued: #6E7781;
--color-state-pending: #4D7DAD;
--color-state-done: #1A7F37;
/* ---------- Surface / background ------------------------------------- */
--color-bg: #FBFAF7; /* warm off-white page */
--color-bg-soft: #F4F2EC; /* subtle section */
--color-surface: #FFFFFF;
--color-surface-raised: #FFFFFF;
--color-surface-sunken: #F1EEE7;
--color-overlay: rgba(15, 18, 22, 0.45);
/* ---------- Border --------------------------------------------------- */
--color-border-subtle: #E4E0D6;
--color-border-moderate: #C8C2B3;
--color-border-strong: #6E7781;
--color-border-focus: #0062BA;
/* ---------- Text ----------------------------------------------------- */
--color-text-primary: #1F2328;
--color-text-secondary: #4D5663;
--color-text-tertiary: #6E7781;
--color-text-on-primary: #FFFFFF;
--color-text-link: #00569F;
--color-text-link-hover: #002F5C;
/* ---------- Plugin scope colors -------------------------------------- */
--color-scope-architect: #0F6E76; /* ms-ai-architect — petrol */
--color-scope-okr: #9A6700; /* OKR — amber */
--color-scope-security: #A40E26; /* llm-security — crimson */
--color-scope-ultraplan: #4338CA; /* ultraplan-local — indigo */
--color-scope-config: #3F5963; /* config-audit — slate */
/* ---------- Spacing -------------------------------------------------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
/* ---------- Radius --------------------------------------------------- */
--radius-sm: 3px;
--radius-md: 5px;
--radius-lg: 8px;
--radius-pill: 999px;
/* ---------- Shadow --------------------------------------------------- */
--shadow-sm: 0 1px 2px rgba(15, 18, 22, 0.04), 0 0 0 1px rgba(15, 18, 22, 0.04);
--shadow-md: 0 2px 4px rgba(15, 18, 22, 0.06), 0 4px 12px rgba(15, 18, 22, 0.04);
--shadow-lg: 0 4px 8px rgba(15, 18, 22, 0.06), 0 12px 32px rgba(15, 18, 22, 0.06);
--shadow-focus: 0 0 0 3px rgba(0, 98, 186, 0.35);
/* ---------- Motion --------------------------------------------------- */
--duration-instant: 100ms;
--duration-fast: 150ms;
--duration-normal: 250ms;
--duration-slow: 400ms;
--ease-default: cubic-bezier(0.2, 0, 0, 1);
/* ---------- Layout --------------------------------------------------- */
--container-narrow: 720px;
--container-default: 1080px;
--container-wide: 1280px;
--sidebar-width: 280px;
}
[data-theme="dark"] {
--color-bg: #0F1419;
--color-bg-soft: #161B22;
--color-surface: #1A2027;
--color-surface-raised: #232A33;
--color-surface-sunken: #0B1015;
--color-border-subtle: #2A323C;
--color-border-moderate: #3B4452;
--color-border-strong: #6E7781;
--color-text-primary: #E6EDF3;
--color-text-secondary: #B0BAC4;
--color-text-tertiary: #8B96A2;
--color-text-link: #6FA5DD;
--color-text-link-hover: #9CC0EA;
/* Severity soft fills tuned for dark surfaces */
--color-severity-low-soft: #163322;
--color-severity-medium-soft: #3A2C0A;
--color-severity-high-soft: #3D260F;
--color-severity-critical-soft: #3B0F18;
--color-severity-extreme-soft: #2A0408;
--color-severity-low-on: #7FE0A0;
--color-severity-medium-on: #F2C66B;
--color-severity-high-on: #F09060;
--color-severity-critical-on: #FFFFFF;
--color-severity-extreme-on: #FFFFFF;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
--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);
}
/* Auto dark when no override */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
color-scheme: dark;
}
}