f1fecf39b8
Two changes in one commit because they were prepared together and the component demos depend on the new self-hosted fonts.css. Tier 3 wave 2 — 12 new components --------------------------------- Adds components-tier3-supplement.css (886 lines) and 12 isolated demo HTML pages under shared/playground-examples/components/: toxic-flow chain, fleet-overview, kanban Keep/Review/Remove, maturity-ladder, classify-and-transform, cycle-ribbon, persistent-antipattern, suppressed-signals, ExpansionCard, ReadMore, FormProgress, Aspirational-vs-Committed. Reuses existing tokens — no new CSS custom properties. Honors the Phase 1 feedback rules: no large pink areas for body text, severity-red distinct from failure-red, dark mode via existing [data-theme="dark"]. Provenance: components-tier3-supplement.css and the 12 demo bodies were authored by claude.ai/design (separate Anthropic instance) on 2026-05-03. This commit only integrates them — path rewrites, font swap, generic name substitution in fleet-overview demo data, README updates. base.css from the export was deliberately NOT taken in because it reverted the inline-message contrast fix from v0.1. Self-hosted fonts (Inter, JetBrains Mono, Source Serif 4) --------------------------------------------------------- Replaces all fonts.googleapis.com / fonts.gstatic.com requests with .woff2 files bundled at shared/playground-design-system/fonts/. Why: - No data leaked to Google about end-user IPs and User-Agents. - GDPR-safe for Norwegian public-sector deployments. - Works offline / behind air-gapped firewalls. - Forkers downloading the marketplace get a complete bundle. All three families are SIL Open Font License 1.1 — license texts included alongside the woff2 files. Source Serif 4 woff2 generated locally from the upstream OTF release using fonttools ttLib.woff2 compress; Inter and JetBrains Mono are unmodified upstream webfont releases. Total bundle: 9 woff2 files, ~940 KB. New fonts.css declares all @font-face rules with font-display: swap. All 6 example HTMLs and 12 new component demos load it via a single relative path. Verified -------- - Privacy grep returns empty across plugins/ and shared/ - Google Fonts grep returns empty across shared/*.html - Smoke test via python -m http.server: HTML + 7 stylesheets + Inter-Regular.woff2 all return 200 Doc updates ----------- - shared/playground-design-system/README.md: file tree updated, Quick start snippet shows fonts.css link, "Self-hosted fonts" section added - shared/playground-design-system/fonts/LICENSES.md: combined attribution - README.md (root): Tier 3 wave 1+2 component list, Privacy-first bullet - CLAUDE.md (root): tree entry expanded for new components + fonts Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
83 lines
2.2 KiB
CSS
83 lines
2.2 KiB
CSS
/*
|
|
* Self-hosted web fonts for Playground Design System.
|
|
*
|
|
* All three families are licensed under SIL Open Font License 1.1.
|
|
* Full license text and provenance: ./fonts/LICENSES.md
|
|
*
|
|
* Why self-hosted:
|
|
* - No external requests (no fonts.googleapis.com, no IP/UA leakage).
|
|
* - Works offline / behind air-gapped firewalls.
|
|
* - GDPR-compliant for Norwegian public-sector deployments.
|
|
*
|
|
* Bundle size: ~940 KB total across 9 woff2 files.
|
|
* Loaded via font-display: swap to avoid FOIT.
|
|
*/
|
|
|
|
/* ========== Inter (UI / body) ========== */
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("./fonts/Inter-Regular.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-display: swap;
|
|
src: url("./fonts/Inter-Medium.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-display: swap;
|
|
src: url("./fonts/Inter-SemiBold.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Inter";
|
|
font-style: normal;
|
|
font-weight: 700;
|
|
font-display: swap;
|
|
src: url("./fonts/Inter-Bold.woff2") format("woff2");
|
|
}
|
|
|
|
/* ========== JetBrains Mono (code) ========== */
|
|
@font-face {
|
|
font-family: "JetBrains Mono";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("./fonts/JetBrainsMono-Regular.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "JetBrains Mono";
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-display: swap;
|
|
src: url("./fonts/JetBrainsMono-Medium.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "JetBrains Mono";
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-display: swap;
|
|
src: url("./fonts/JetBrainsMono-SemiBold.woff2") format("woff2");
|
|
}
|
|
|
|
/* ========== Source Serif 4 (occasional editorial accents) ========== */
|
|
@font-face {
|
|
font-family: "Source Serif 4";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url("./fonts/SourceSerif4-Regular.woff2") format("woff2");
|
|
}
|
|
@font-face {
|
|
font-family: "Source Serif 4";
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
font-display: swap;
|
|
src: url("./fonts/SourceSerif4-Semibold.woff2") format("woff2");
|
|
}
|