open/ktg-plugin-marketplace
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity Actions
ktg-plugin-marketplace/plugins/ms-ai-architect/playground/vendor/playground-design-system/base.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

265 lines
10 KiB
CSS
Raw Blame History

/* Code generated by sync-design-system.mjs; DO NOT EDIT. */
/* =============================================================================
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; }
.badge--scope-voyage { background: var(--color-scope-voyage); 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-surface); color: var(--color-text-primary); }
.inline-message--error strong, .inline-message--error b { color: var(--color-severity-critical); }
[data-theme="dark"] .inline-message--info { background: #0E2A3F; color: #9CC0EA; }
[data-theme="dark"] .inline-message--error { background: var(--color-surface); color: var(--color-text-primary); }
[data-theme="dark"] .inline-message--error strong, [data-theme="dark"] .inline-message--error b { color: #F09095; }
/* ---------- 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; }
}
Reference in a new issue View git blame Copy permalink