open/ktg-plugin-marketplace
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity Actions
ktg-plugin-marketplace/shared/playground-examples/components/aspirational-committed.html
Kjell Tore Guttormsen f1fecf39b8 feat(shared): Tier 3 wave 2 (12 components) + self-hosted fonts 
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>
2026-05-03 05:08:07 +02:00

100 lines
4.7 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="nb">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Aspirational vs Committed · Tier 3 supp</title>
<link rel="stylesheet" href="../../playground-design-system/tokens.css" />
<link rel="stylesheet" href="../../playground-design-system/base.css" />
<link rel="stylesheet" href="../../playground-design-system/components.css" />
<link rel="stylesheet" href="../../playground-design-system/components-tier2.css" />
<link rel="stylesheet" href="../../playground-design-system/components-tier3-supplement.css" />
<link rel="stylesheet" href="../../playground-design-system/fonts.css" />
</head>
<body>
<header class="app-header">
<a href="../index.html" class="app-header__brand"><span class="app-header__brand-mark">P</span><span>Playground</span></a>
<span class="app-header__breadcrumb">/ Komponenter / Aspirational vs Committed</span>
</header>
<main class="container container--default" style="padding: var(--space-8) 0;">
<div style="margin-bottom: var(--space-6);">
<span style="font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-scope-okr); font-weight: var(--font-weight-semibold);">OKR · visuell modus-skille</span>
<h1 style="margin: 4px 0 6px;">Aspirational vs Committed</h1>
<p class="text-secondary" style="max-width: 65ch;">Modifier på Objective-card. Aspirational (0,7 = success) har stiplet ring + ASP-badge. Committed (1,0 = expected) har solid ring + COM-badge.</p>
</div>
<div style="display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);">
<article class="okr-mode" data-mode="aspirational" title="Aspirasjon — 0,7 regnes som vellykket">
<span class="okr-mode__badge">ASP</span>
<div class="okr-mode__row">
<div class="okr-mode__gauge">
<svg viewBox="0 0 100 100" aria-hidden="true">
<circle class="gauge-bg" cx="50" cy="50" r="42"></circle>
<circle class="gauge-fill" cx="50" cy="50" r="42" stroke-dasharray="263.9" stroke-dashoffset="105.6"></circle>
</svg>
<span class="gauge-value">0,60</span>
</div>
<div>
<div class="okr-mode__objective">Bli landets ledende kommune på AI-assistert saksbehandling innen 2027</div>
<div class="okr-mode__hint">Aspirasjon — 0,7 regnes som vellykket</div>
</div>
</div>
</article>
<article class="okr-mode" data-mode="committed" title="Committed — 1,0 forventes oppnådd">
<span class="okr-mode__badge">COM</span>
<div class="okr-mode__row">
<div class="okr-mode__gauge">
<svg viewBox="0 0 100 100" aria-hidden="true">
<circle class="gauge-bg" cx="50" cy="50" r="42"></circle>
<circle class="gauge-fill" cx="50" cy="50" r="42" stroke-dasharray="263.9" stroke-dashoffset="26.4"></circle>
</svg>
<span class="gauge-value">0,90</span>
</div>
<div>
<div class="okr-mode__objective">Innfør sentralisert sensitivity-label-policy for alle 1 850 ansatte før 30. juni</div>
<div class="okr-mode__hint">Committed — 1,0 forventes oppnådd</div>
</div>
</div>
</article>
<article class="okr-mode" data-mode="aspirational">
<span class="okr-mode__badge">ASP</span>
<div class="okr-mode__row">
<div class="okr-mode__gauge">
<svg viewBox="0 0 100 100" aria-hidden="true">
<circle class="gauge-bg" cx="50" cy="50" r="42"></circle>
<circle class="gauge-fill" cx="50" cy="50" r="42" stroke-dasharray="263.9" stroke-dashoffset="184.7"></circle>
</svg>
<span class="gauge-value">0,30</span>
</div>
<div>
<div class="okr-mode__objective">Halver gjennomsnittlig saksbehandlings­tid på byggesøknader</div>
<div class="okr-mode__hint">Aspirasjon — 0,3 så langt, fortsatt rom for å akselerere</div>
</div>
</div>
</article>
<article class="okr-mode" data-mode="committed">
<span class="okr-mode__badge">COM</span>
<div class="okr-mode__row">
<div class="okr-mode__gauge">
<svg viewBox="0 0 100 100" aria-hidden="true">
<circle class="gauge-bg" cx="50" cy="50" r="42"></circle>
<circle class="gauge-fill" cx="50" cy="50" r="42" stroke-dasharray="263.9" stroke-dashoffset="0"></circle>
</svg>
<span class="gauge-value">1,00</span>
</div>
<div>
<div class="okr-mode__objective">Levér T2-rapport til kommunestyret senest 5. september</div>
<div class="okr-mode__hint">Committed — oppnådd</div>
</div>
</div>
</article>
</div>
</main>
</body>
</html>
Reference in a new issue View git blame Copy permalink