feat(shared): add Tier 3 components (8 critical for ms-ai-architect Playground v3)
Authored in Claude Code following the design-DNA established by claude.ai/design in v0.1 (tokens + Tier 1 + Tier 2). Visual coherence verified against existing components via tier3-preview.html showcase. shared/playground-design-system/components-tier3.css (~480 lines): - pair-before-after: ROS/DPIA/AI Act inherent->residual primitive with delta pill (improved/worsened); responsive collapse to vertical on narrow viewports - aiact-timeline: 4 EU AI Act milestones (2025-02-02 .. 2027-08-02) with per-system countdown chips (urgent/soon/distant), today-marker, and per- milestone passed/active/upcoming states - tracks: Guide/Explore/Expert 3-track entry pattern carried from Playground v2, top-bar color coding per track - rights-matrix: FRIA 12 EU Charter rights x 5 impact levels (Art. 27 EU AI Act) - capability-matrix: license x kapabilitet with explicit icons per status (available/cost/conditional/missing) - never color-only - agent-grid + agent-card: parallel-worker status with state pills, progress bars, metric chips, pulsing dot for running, distinct failure-red token - error-summary: Aksel/GOV.UK pattern, white bg + red border + dark body text + red heading (NOT large pink fill — fixes contrast bug) - guide-panel: Aksel friendly inline guidance, info/success/warn variants Also fixes shared/playground-design-system/base.css inline-message--error which had the same contrast bug as ErrorSummary v1: white text on light-pink soft-fill was unreadable. Now uses surface bg + critical border + primary text + critical strong/heading color. Same dark-mode treatment. shared/playground-examples/tier3-preview.html (~470 lines): live demo for all 8 components with realistic Norwegian mock-data (Lier kommune ROS T-001 threat, AI Act timeline 2026-05-02 today-marker, FRIA EU Charter rights, M365 capability-matrix, 4-worker utredning grid). Used to validate visual coherence before committing. Updates shared/playground-design-system/README.md with Tier 3 component table and provenance note distinguishing v0.1 (claude.ai/design) from this addition (Claude Code). Remaining for v0.2: 12 plugin-specific Tier 3 components (sankey/toxic-flow, fleet-overview, kanban Keep/Review/Remove, maturity-ladder, classify-and- transform, cycle-ribbon, persistent-antipattern badge, suppressed-signals, ExpansionCard, ReadMore, FormProgress, Aspirational vs Committed visual). To be generated by claude.ai/design in a supplement session before plugin Playground work begins. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
a0b75bbd13
commit
992d6b3f76
4 changed files with 1237 additions and 2 deletions
|
|
@ -20,6 +20,7 @@ shared/
|
|||
│ ├── 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
|
||||
│ ├── components-tier3.css # Tier 3: pair-before-after, AI Act timeline, 3-track entry, FRIA rights-matrix, capability-matrix, parallel-agent-status, ErrorSummary, GuidePanel
|
||||
│ ├── 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
|
||||
|
|
@ -108,6 +109,21 @@ See `tokens.css` for full reference. Highlights:
|
|||
|
||||
Plus app-shell primitives: `.app-header`, `.sidepanel`, `.scrim`, `.theme-toggle`.
|
||||
|
||||
### Tier 3 (`components-tier3.css`)
|
||||
|
||||
Critical components for ms-ai-architect Playground v3 plus universal Aksel patterns. Authored 2026-05-02 in Claude Code (not via claude.ai/design — visual coherence verified against Tier 1+2 in `playground-examples/tier3-preview.html`).
|
||||
|
||||
| Component | Class prefix | Used by |
|
||||
|---|---|---|
|
||||
| Inherent + residual pair | `.pair-before-after` | ms-ai ROS before/after, DPIA, AI Act mitigations, OKR check-ins |
|
||||
| AI Act compliance-tidslinje | `.aiact-timeline`, `.aiact-countdown` | ms-ai-architect classify flow + dashboard |
|
||||
| 3-track entry | `.tracks` | All plugins — entry-level UX choice (Guide/Explore/Expert) |
|
||||
| FRIA rights-matrix | `.rights-matrix` | ms-ai-architect FRIA (Art. 27, 12 EU Charter rights × impact) |
|
||||
| Capability-matrix | `.capability-matrix` | ms-ai-architect license × kapabilitet mapping |
|
||||
| Parallel-agent-status | `.agent-grid`, `.agent-card` | ms-ai utredning multi-worker, ultraplan multi-wave execute |
|
||||
| ErrorSummary | `.error-summary` | All plugins — Aksel/GOV.UK form-validation pattern |
|
||||
| GuidePanel | `.guide-panel` | All plugins — Aksel friendly inline guidance with optional CTA |
|
||||
|
||||
### Tier 2 (`components-tier2.css`)
|
||||
|
||||
| Component | Class prefix | Used by |
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue