open/playground-design-system
1
0
Fork 0
Code Issues Releases 1 Activity

docs: fix stale vendor paths in README (Directory layout + Quick start)

Browse source 
The shared/ root and index.html-based Quick start example never matched
how ms-ai-architect and llm-security actually vendor this repo
(<plugin>/playground/vendor/playground-design-system/), and the
components-tier4-project-view.css stylesheet (added in v0.6.0) was
missing from both the directory tree and the Quick start includes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RwqsYBS9ZuEEAMSURJURiR
This commit is contained in:
Kjell Tore Guttormsen 2026-08-18 17:07:11 +02:00
commit 2b67a93ce3
1 changed files with 45 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

83
README.md
View file

@ -41,35 +41,34 @@ Integration into the marketplace (file organization, path normalization, README
## 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
│ ├── components-tier3.css # Tier 3 wave 1: pair-before-after, AI Act timeline, 3-track entry, FRIA rights-matrix, capability-matrix, parallel-agent-status, ErrorSummary, GuidePanel
│ ├── components-tier3-supplement.css # Tier 3 wave 2 (12): toxic-flow, fleet-overview, kanban Keep/Review/Remove, maturity-ladder, classify-and-transform, cycle-ribbon, persistent-antipattern, suppressed-signals, ExpansionCard, ReadMore, FormProgress, Aspirational-vs-Committed
│ ├── fonts.css # @font-face declarations for self-hosted fonts
│ ├── fonts/ # Self-hosted woff2 + license attribution
│ │ ├── Inter-{Regular,Medium,SemiBold,Bold}.woff2
│ │ ├── JetBrainsMono-{Regular,Medium,SemiBold}.woff2
│ │ ├── SourceSerif4-{Regular,Semibold}.woff2
│ │ └── LICENSES.md # All three are SIL OFL 1.1
│ ├── 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-direktorat.html # Scenario C — llm-security findings review
├── templates.html # Skeleton + print-template demos
├── tier3-preview.html # Tier 3 wave 1 visual preview
├── components/ # Tier 3 wave 2 — 12 isolated demo pages
playground-design-system/ # This repo
├── 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
├── components-tier3.css # Tier 3 wave 1: pair-before-after, AI Act timeline, 3-track entry, FRIA rights-matrix, capability-matrix, parallel-agent-status, ErrorSummary, GuidePanel
├── components-tier3-supplement.css # Tier 3 wave 2 (12): toxic-flow, fleet-overview, kanban Keep/Review/Remove, maturity-ladder, classify-and-transform, cycle-ribbon, persistent-antipattern, suppressed-signals, ExpansionCard, ReadMore, FormProgress, Aspirational-vs-Committed
├── components-tier4-project-view.css # Tier 4: project-view arketype
├── fonts.css # @font-face declarations for self-hosted fonts
├── fonts/ # Self-hosted woff2 + license attribution
│ ├── Inter-{Regular,Medium,SemiBold,Bold}.woff2
│ ├── JetBrainsMono-{Regular,Medium,SemiBold}.woff2
│ ├── SourceSerif4-{Regular,Semibold}.woff2
│ └── LICENSES.md # All three are SIL OFL 1.1
├── 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 (this repo's own demos)
├── 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-direktorat.html # Scenario C — llm-security findings review
├── templates.html # Skeleton + print-template demos
├── tier3-preview.html # Tier 3 wave 1 visual preview
├── components/ # Tier 3 wave 2 — 12 isolated demo pages
│ ├── sankey-toxic-flow.html
│ ├── fleet-overview.html
│ ├── kanban.html
@ -82,10 +81,14 @@ shared/
│ ├── read-more.html
│ ├── form-progress.html
│ └── aspirational-committed.html
├── ros-app.js # Scenario A interactivity
└── ros-data.js # Scenario A mock data
├── ros-app.js # Scenario A interactivity
└── ros-data.js # Scenario A mock data
```
Consumers vendor this repo (its CSS/fonts/schemas, not `playground-examples/`) into their own
Playground at `<plugin>/playground/vendor/playground-design-system/` — copied in, not a git
submodule or shared symlink. See [Quick start](#quick-start).
## Quick start
To use the design system from a plugin's Playground:
@ -95,16 +98,17 @@ To use the design system from a plugin's Playground:
<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">
<link rel="stylesheet" href="vendor/playground-design-system/tokens.css">
<link rel="stylesheet" href="vendor/playground-design-system/base.css">
<link rel="stylesheet" href="vendor/playground-design-system/components.css">
<link rel="stylesheet" href="vendor/playground-design-system/components-tier2.css">
<!-- Optional: include components-tier3.css for Tier 3 wave 1 components -->
<!-- Optional: include components-tier3-supplement.css for Tier 3 wave 2 (12 additional components) -->
<!-- Optional: include components-tier4-project-view.css for the Tier 4 project-view arketype -->
<!-- Optional: only include print.css if scenario produces a printable A4 report -->
<link rel="stylesheet" href="../../shared/playground-design-system/print.css">
<link rel="stylesheet" href="vendor/playground-design-system/print.css">
<!-- Self-hosted fonts (no external requests) -->
<link rel="stylesheet" href="../../shared/playground-design-system/fonts.css">
<link rel="stylesheet" href="vendor/playground-design-system/fonts.css">
</head>
<body>
<header class="app-header">
@ -121,7 +125,10 @@ To use the design system from a plugin's Playground:
</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.
The relative path `vendor/playground-design-system/` assumes the plugin's Playground HTML lives at
`<plugin-name>/playground/<plugin-name>-playground.html`, with the design system vendored (copied
in) at `<plugin-name>/playground/vendor/playground-design-system/`. Adjust the prefix to match your
plugin's structure.
## Design principles