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 ## Directory layout
``` ```
shared/ playground-design-system/ # This repo
├── playground-design-system/ # The design system (this directory) ├── README.md # This file
│ ├── README.md # This file ├── tokens.css # CSS custom properties (Aksel/Digdir-aligned)
│ ├── tokens.css # CSS custom properties (Aksel/Digdir-aligned) ├── base.css # Reset, typography, primitives, focus, print
│ ├── base.css # Reset, typography, primitives, focus, print ├── components.css # Tier 1: radar, matrix, findings-browser, critique-card, wizard, live-meter
│ ├── 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-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.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-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.css # @font-face declarations for self-hosted fonts
│ ├── fonts/ # Self-hosted woff2 + license attribution ├── fonts/ # Self-hosted woff2 + license attribution
│ │ ├── Inter-{Regular,Medium,SemiBold,Bold}.woff2 │ ├── Inter-{Regular,Medium,SemiBold,Bold}.woff2
│ │ ├── JetBrainsMono-{Regular,Medium,SemiBold}.woff2 │ ├── JetBrainsMono-{Regular,Medium,SemiBold}.woff2
│ │ ├── SourceSerif4-{Regular,Semibold}.woff2 │ ├── SourceSerif4-{Regular,Semibold}.woff2
│ │ └── LICENSES.md # All three are SIL OFL 1.1 │ └── LICENSES.md # All three are SIL OFL 1.1
│ ├── print.css # A4 print stylesheet with B/W severity patterns ├── print.css # A4 print stylesheet with B/W severity patterns
│ └── schemas/ # Cross-plugin JSON schemas ├── schemas/ # Cross-plugin JSON schemas
│ ├── finding.schema.json # Used by llm-security, config-audit, ultraplan-review, ms-ai-review │ ├── finding.schema.json # Used by llm-security, config-audit, ultraplan-review, ms-ai-review
│ ├── okr-set.schema.json # Used by OKR plugin │ ├── okr-set.schema.json # Used by OKR plugin
│ └── ros-threat.schema.json # Used by ms-ai-architect ROS workflow │ └── ros-threat.schema.json # Used by ms-ai-architect ROS workflow
│ └── playground-examples/ # Showcase + reference scenarios (this repo's own demos)
└── playground-examples/ # Showcase + reference scenarios ├── index.html # System showcase (browse all components)
├── index.html # System showcase (browse all components) ├── ros-lier-kommune.html # Scenario A — ms-ai-architect ROS report
├── ros-lier-kommune.html # Scenario A — ms-ai-architect ROS report ├── okr-baerum.html # Scenario B — OKR live writer
├── okr-baerum.html # Scenario B — OKR live writer ├── security-direktorat.html # Scenario C — llm-security findings review
├── security-direktorat.html # Scenario C — llm-security findings review ├── templates.html # Skeleton + print-template demos
├── templates.html # Skeleton + print-template demos ├── tier3-preview.html # Tier 3 wave 1 visual preview
├── tier3-preview.html # Tier 3 wave 1 visual preview ├── components/ # Tier 3 wave 2 — 12 isolated demo pages
├── components/ # Tier 3 wave 2 — 12 isolated demo pages
│ ├── sankey-toxic-flow.html │ ├── sankey-toxic-flow.html
│ ├── fleet-overview.html │ ├── fleet-overview.html
│ ├── kanban.html │ ├── kanban.html
@ -82,10 +81,14 @@ shared/
│ ├── read-more.html │ ├── read-more.html
│ ├── form-progress.html │ ├── form-progress.html
│ └── aspirational-committed.html │ └── aspirational-committed.html
├── ros-app.js # Scenario A interactivity ├── ros-app.js # Scenario A interactivity
└── ros-data.js # Scenario A mock data └── 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 ## Quick start
To use the design system from a plugin's Playground: 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"> <html lang="nb" data-theme="light">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="../../shared/playground-design-system/tokens.css"> <link rel="stylesheet" href="vendor/playground-design-system/tokens.css">
<link rel="stylesheet" href="../../shared/playground-design-system/base.css"> <link rel="stylesheet" href="vendor/playground-design-system/base.css">
<link rel="stylesheet" href="../../shared/playground-design-system/components.css"> <link rel="stylesheet" href="vendor/playground-design-system/components.css">
<link rel="stylesheet" href="../../shared/playground-design-system/components-tier2.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.css for Tier 3 wave 1 components -->
<!-- Optional: include components-tier3-supplement.css for Tier 3 wave 2 (12 additional 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 --> <!-- 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) --> <!-- 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> </head>
<body> <body>
<header class="app-header"> <header class="app-header">
@ -121,7 +125,10 @@ To use the design system from a plugin's Playground:
</html> </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 ## Design principles