4a2bf3567a
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.
260 lines
9.6 KiB
CSS
260 lines
9.6 KiB
CSS
/* =============================================================================
|
|
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; }
|
|
}
|