open/ktg-plugin-marketplace
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity Actions
ktg-plugin-marketplace/shared/playground-design-system/tokens.css
Kjell Tore Guttormsen d8882f5220 feat(ms-ai-architect): v1.15.0 — playground v3 project-view integration 
Erstatter v2 project-surface (screen-tabs + category-tabs + per-command paste-cards)
med v3 renderProjectView (sidebar med 17 artifacts + main-area + import-modal overlay).
renderActive() ruter project-surface til renderProjectSurfaceV3() som wrapper
renderProjectView + topbar + app-shell.

V2-surface helt fjernet:
- renderProjectSurface (152 linjer)
- renderCommandSubCard (87 linjer)
- rehydratePasteImports (15 linjer)
- ACTIONS['project-screen'], currentProjectScreen
- 5 v2-CSS-klasser: .project-tabs, .project-tab*, .sub-zone, .paste-import-row, .project-header__*, .command-cards

Zombie-handlers beholdt for test-back-compat:
currentProjectTab, ACTIONS['project-tab'], ACTIONS['parse'],
handlePasteImport, window.__handlePasteImport. Unreachable fra v3 DOM
men nødvendige for test-playground-v3.sh + test-playground-parsers.sh.

2 fingerprint-gap lukket:
- requirements.headers: utvidet med "EU AI Act — Krav" pattern
- license.headers: utvidet med "Lisens-kapabilitetsmatrise" pattern
- KNOWN_GAP_FIXTURES = {} i test-playground-fingerprints.sh

migrateDataVersion utvidet med parserFor (3. arg):
- Demo-state med kun raw_markdown auto-parses til project.artifacts[cid]
- defaultParserFor(cmdId) resolverer PARSERS[archetypeFor(cmdId)]
- 3 bootstrap-callsites oppdatert (cold-load, import, load-demo)

Ship-QA bugfixes funnet via browser-dogfood:
- components-tier4-project-view.css lagt til i <link>-kjeden (var ikke loaded
  -> modal-overlay og two-column layout virket ikke)
- renderImportModal setter data-open="true" (DS-kontrakt for display: flex)

Bundler også sesjon 2-4 deliverables som ikke ble committed tidligere:
- shared/playground-design-system v0.6.0 (Tier 4 project-view CSS + 6 tokens)
- ms-ai-architect/playground/vendor/ re-sync til DS v0.6.0
- tests/test-playground-fingerprints.sh (sesjon 4 NY - 32 PASS)
- tests/test-playground-projectview.sh (sesjon 4 NY - 30 PASS)
- tests/test-playground-actions.sh (sesjon 4 NY - 19 PASS)
- tests/test-playground-migrations.sh utvidet (7 -> 16 PASS)
- tests/run-e2e.sh wirer alle 6 playground-suiter

Stats:
- bash tests/run-e2e.sh --playground: 386 PASS, 0 FAIL, 2 WARN (pre-eks)
- bash tests/run-e2e.sh (full): All E2E suites passed
- bash tests/validate-plugin.sh: 219 PASS

Screenshots regenerert til playground/screenshots/v1.15.0/ (24 PNG-er, 12
surfaces x 2 tema). Nye v3-surfaces: project-overview, project-artifact-*,
project-import-modal (viewport-only), project-search.

Docs oppdatert (3 nivåer): README.md (badge + version history),
CHANGELOG.md, CLAUDE.md (playground-seksjon + valideringstabell),
rot-README.md + rot-CLAUDE.md (marketplace-landingen + plugin-index).

.gitignore: ny pattern *.local.html + *.local.json for sesjon-state-filer.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-16 20:58:51 +02:00

242 lines
8.8 KiB
CSS
Raw Blame History

/* =============================================================================
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 */
--color-scope-voyage: #1B5FB8; /* voyage — aqua-blue */
--color-scope-voyage-soft: #E5EFFA; /* voyage — light tint */
--color-scope-voyage-strong: #143E78; /* voyage — dark strong */
/* ---------- 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;
/* ---------- Project-view (Tier 4 — v0.6.0) --------------------------- */
--project-view-nav-width: 280px;
--project-view-collapse-bp: 960px; /* doc-only — referenced by media queries */
--artifact-list-item-pad-y: var(--space-2);
--artifact-list-item-pad-x: var(--space-3);
--artifact-marker-size: 14px;
--artifact-marker-border: 1.5px;
}
:root { color-scheme: light; }
[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);
color-scheme: dark;
}
/* Light theme overrides — Aksel-aligned, WCAG AA-validated.
Full mirror of the dark block (26 vars) so renderers reading any
theme-overridable token in dark mode also resolve in light mode.
See research/04-wcag-dual-theme-tokens.md for hex sources + AA validation. */
[data-theme="light"] {
--color-bg: #ffffff;
--color-bg-soft: #ecedef;
--color-surface: #ffffff;
--color-surface-raised: #f5f6f7;
--color-surface-sunken: #ecedef;
--color-border-subtle: #cfd3d8;
--color-border-moderate: #6f7785;
--color-border-strong: #5d6573;
--color-text-primary: #202733;
--color-text-secondary: #49515e;
--color-text-tertiary: #6f7785; /* borderline 4.5:1 — reserve for non-body (eyebrows, labels) */
--color-text-link: #1a5f99;
--color-text-link-hover: #002459;
/* Severity soft fills + on-colors tuned for light surfaces (Aksel). */
--color-severity-low-soft: #e2fde8;
--color-severity-medium-soft: #fff5e4;
--color-severity-high-soft: #fff2f0;
--color-severity-critical-soft: #fff2f7;
--color-severity-extreme-soft: #fff0f3;
--color-severity-low-on: #002e00;
--color-severity-medium-on: #481700;
--color-severity-high-on: #560000;
--color-severity-critical-on: #560000;
--color-severity-extreme-on: #ffffff;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
--shadow-md: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.06);
--shadow-focus: 0 0 0 3px rgba(26, 95, 153, 0.4);
color-scheme: light;
}
/* Auto dark when no override */
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) {
color-scheme: dark;
}
}
Reference in a new issue View git blame Copy permalink