@ponchia/ui 0.3.6 → 0.4.1

package/css/report.css

@@ -0,0 +1,382 @@
+/* ==========================================================================
+   report — opt-in static/PDF-first report layer.
+
+   This leaf is deliberately not imported by core.css. It gives LLM-authored
+   and hand-authored reports a small document grammar without turning the
+   framework into a report renderer or chart engine.
+   ========================================================================== */
+
+.ui-report {
+  --report-gap: var(--space-lg);
+  --report-measure: 74ch;
+  --report-page-margin: 18mm;
+
+  color: var(--text-soft);
+  display: grid;
+  gap: var(--report-gap);
+  inline-size: min(100%, var(--report-width, 72rem));
+  margin-inline: auto;
+  padding: var(--report-padding-block, var(--space-2xl)) var(--space-md);
+}
+
+.ui-report--compact {
+  --report-gap: var(--space-md);
+  --report-padding-block: var(--space-xl);
+}
+
+.ui-report--numbered {
+  counter-reset: report-section;
+}
+
+.ui-report__cover {
+  align-content: end;
+  border-block-end: 1px solid var(--line);
+  display: grid;
+  gap: var(--space-md);
+  min-block-size: min(62vh, 34rem);
+  padding-block-end: var(--space-xl);
+}
+
+.ui-report__cover--compact {
+  min-block-size: auto;
+  padding-block: var(--space-xl) var(--space-lg);
+}
+
+.ui-report__header {
+  align-items: end;
+  border-block-end: 1px solid var(--line);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-md);
+  justify-content: space-between;
+  padding-block-end: var(--space-md);
+}
+
+.ui-report__title {
+  color: var(--text);
+  font-family: var(--display);
+  font-size: calc(var(--text-xl) * 1.35);
+  letter-spacing: 0;
+  line-height: 1.05;
+  margin: 0;
+  max-inline-size: var(--report-measure);
+  text-transform: uppercase;
+  text-wrap: balance;
+}
+
+.ui-report__subtitle {
+  color: var(--text-dim);
+  font-size: var(--text-lg);
+  line-height: 1.5;
+  margin: 0;
+  max-inline-size: var(--report-measure);
+}
+
+.ui-report__meta {
+  align-items: center;
+  color: var(--text-dim);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  gap: 0.55rem;
+  letter-spacing: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+}
+
+.ui-report__meta > * {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.55rem;
+}
+
+.ui-report__meta > :not(:last-child)::after {
+  background: var(--line-strong);
+  border-radius: 50%;
+  block-size: 0.22rem;
+  content: '';
+  inline-size: 0.22rem;
+}
+
+.ui-report__toc {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-xs);
+  padding: var(--space-md);
+}
+
+.ui-report__toc ol,
+.ui-report__toc ul {
+  display: grid;
+  gap: 0.35rem;
+  margin: 0;
+  padding-inline-start: var(--space-md);
+}
+
+.ui-report__toc a {
+  color: var(--text);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
+  text-underline-offset: 0.2rem;
+}
+
+.ui-report__summary,
+.ui-report__finding,
+.ui-report__evidence {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+}
+
+.ui-report__summary {
+  border-inline-start: 2px solid var(--accent);
+}
+
+.ui-report__finding {
+  border-inline-start: 2px solid var(--line-strong);
+}
+
+.ui-report__evidence {
+  background: var(--panel-soft);
+}
+
+.ui-report__evidence:has(> .ui-table-wrap:only-child) {
+  padding: 0;
+}
+
+.ui-report__evidence:has(> .ui-table-wrap:only-child) > .ui-table-wrap {
+  border: 0;
+  border-radius: var(--radius-md);
+}
+
+.ui-report__section {
+  display: grid;
+  gap: var(--space-md);
+  scroll-margin-block-start: 6rem;
+}
+
+.ui-report__section + .ui-report__section {
+  border-block-start: 1px solid var(--line);
+  padding-block-start: var(--space-xl);
+}
+
+.ui-report__section-head {
+  color: var(--text);
+  font-family: var(--display);
+  font-size: var(--text-xl);
+  letter-spacing: 0;
+  line-height: 1.1;
+  margin: 0;
+  text-transform: uppercase;
+  text-wrap: balance;
+}
+
+.ui-report--numbered .ui-report__section-head::before {
+  color: var(--accent-text);
+  content: counter(report-section, decimal-leading-zero) ' / ';
+  counter-increment: report-section;
+}
+
+.ui-report--numbered .ui-report__section--unnumbered > .ui-report__section-head::before {
+  content: none;
+  counter-increment: none;
+}
+
+.ui-report__figure {
+  display: grid;
+  gap: var(--space-sm);
+  margin: 0;
+}
+
+.ui-report__caption,
+.ui-chart__caption {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: 0;
+  line-height: 1.5;
+  text-transform: uppercase;
+}
+
+.ui-report__sources,
+.ui-report__appendix,
+.ui-report__footnotes {
+  border-block-start: 1px solid var(--line);
+  color: var(--text-dim);
+  display: grid;
+  font-size: var(--text-sm);
+  gap: var(--space-sm);
+  padding-block-start: var(--space-md);
+}
+
+.ui-chart {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+}
+
+.ui-chart__legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ui-chart__legend > * {
+  align-items: center;
+  color: var(--text-soft);
+  display: inline-flex;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  gap: 0.45rem;
+}
+
+.ui-chart__swatch {
+  background: var(--chart-color, var(--chart-1, var(--accent)));
+  background-image: var(--chart-pattern, var(--chart-pattern-1, none));
+  background-size: var(--chart-pattern-size, 8px);
+  border: 1px solid var(--line-strong);
+  block-size: 0.8rem;
+  flex: 0 0 auto;
+  inline-size: 0.8rem;
+}
+
+.ui-chart__plot {
+  display: grid;
+  gap: var(--space-xs);
+}
+
+.ui-chart__bar {
+  --chart-value: 0%;
+
+  display: grid;
+  gap: 0.35rem;
+}
+
+.ui-chart__label {
+  align-items: center;
+  color: var(--text-soft);
+  display: flex;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  gap: var(--space-sm);
+  justify-content: space-between;
+}
+
+.ui-chart__track {
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  block-size: 0.8rem;
+  min-inline-size: 0;
+}
+
+.ui-chart__fill {
+  background: var(--chart-color, var(--chart-1, var(--accent)));
+  background-image: var(--chart-pattern, var(--chart-pattern-1, none));
+  background-size: var(--chart-pattern-size, 8px);
+  block-size: 100%;
+  inline-size: clamp(0%, var(--chart-value), 100%);
+}
+
+.ui-chart__fallback {
+  margin-block-start: var(--space-sm);
+}
+
+.ui-print-only {
+  display: none !important;
+}
+
+.ui-print-exact {
+  -webkit-print-color-adjust: exact;
+  print-color-adjust: exact;
+}
+
+@media print {
+  /* Re-tokenises the base 18mm default (base.css) so report margins stay
+     themeable via --report-page-margin. */
+  @page {
+    margin: var(--report-page-margin);
+  }
+
+  .ui-report {
+    --report-padding-block: 0;
+
+    /* Force an ink-on-white document regardless of the on-screen theme: the
+       palette tokens are [data-theme]-scoped raw values, so `color-scheme`
+       alone can't flip them. Re-point the handful the report renders with to
+       neutral (achromatic) ink/paper values so a dark-theme report doesn't
+       print light-grey text on white. */
+    color-scheme: light;
+
+    --text: #111;
+    --text-soft: #2a2a2a;
+    --text-dim: #555;
+    --panel: #fff;
+    --panel-soft: #f7f7f7;
+    --line: #d9d9d9;
+    --line-strong: #b3b3b3;
+
+    inline-size: auto;
+    padding: 0;
+  }
+
+  /* Meaning-carrying chart fills must survive the print "economy" default
+     (which drops backgrounds) without relying on a `.ui-print-exact`
+     ancestor. The accent on `.ui-report__summary` is a border, so it already
+     prints. */
+  .ui-chart__fill,
+  .ui-chart__swatch {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  .ui-report__cover {
+    min-block-size: auto;
+  }
+
+  .ui-report__cover,
+  .ui-report__header,
+  .ui-report__section,
+  .ui-report__summary,
+  .ui-report__finding,
+  .ui-report__evidence,
+  .ui-report__figure,
+  .ui-chart {
+    break-inside: avoid;
+  }
+
+  .ui-report__section-head {
+    break-after: avoid;
+  }
+
+  .ui-print-only {
+    display: var(--print-display, block) !important;
+  }
+
+  .ui-screen-only {
+    display: none !important;
+  }
+
+  .ui-break-before {
+    break-before: page;
+  }
+
+  .ui-break-after {
+    break-after: page;
+  }
+
+  .ui-keep {
+    break-inside: avoid;
+  }
+}

package/css/skins.css

@@ -0,0 +1,54 @@
+/* @ponchia/ui — GENERATED from tokens/skins.js by scripts/gen-skins.mjs.
+ *  Do not edit by hand; run `npm run skins:build`. Drift-checked in CI.
+ *
+ *  Optional display colorways (ADR-0001). OPT-IN: imported on demand via
+ *  `@ponchia/ui/css/skins.css`, never part of the default bundle. Apply with
+ *  `data-bronto-skin="amber-crt | e-ink | phosphor-green"` on :root / <html> (a
+ *  root-level choice like data-theme), re-pointing the one accent. The accent's
+ *  derived family recomputes from the live var(--accent); status colours + the
+ *  neutral canvas are untouched. Every accent below is gated by check-contrast.mjs. */
+
+/* Amber CRT */
+:root[data-bronto-skin='amber-crt'] {
+  --accent: oklch(52% 0.11 67deg);
+}
+
+:root[data-theme='dark'][data-bronto-skin='amber-crt'] {
+  --accent: oklch(82% 0.15 82deg);
+  --dotmatrix-glow: 0.4em;
+}
+
+/* E-ink */
+:root[data-bronto-skin='e-ink'] {
+  --accent: oklch(34% 0.012 250deg);
+}
+
+:root[data-theme='dark'][data-bronto-skin='e-ink'] {
+  --accent: oklch(84% 0.008 250deg);
+}
+
+/* Phosphor Green */
+:root[data-bronto-skin='phosphor-green'] {
+  --accent: oklch(52% 0.13 150deg);
+}
+
+:root[data-theme='dark'][data-bronto-skin='phosphor-green'] {
+  --accent: oklch(84% 0.19 150deg);
+  --dotmatrix-glow: 0.4em;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light'])[data-bronto-skin='amber-crt'] {
+    --accent: oklch(82% 0.15 82deg);
+    --dotmatrix-glow: 0.4em;
+  }
+
+  :root:not([data-theme='light'])[data-bronto-skin='e-ink'] {
+    --accent: oklch(84% 0.008 250deg);
+  }
+
+  :root:not([data-theme='light'])[data-bronto-skin='phosphor-green'] {
+    --accent: oklch(84% 0.19 150deg);
+    --dotmatrix-glow: 0.4em;
+  }
+}

package/css/tokens.css

@@ -65,12 +65,13 @@
 
   /* Accent ramp — a stepped family for charts / data-viz / multi-state
      surfaces (the use case tokens/index.js advertises). Derived from the
-     single --accent knob via color-mix against the theme bg, so it
-     re-brands and theme-adapts automatically; no per-theme duplication. */
-  --accent-1: color-mix(in srgb, var(--accent) 8%, var(--bg));
-  --accent-2: color-mix(in srgb, var(--accent) 16%, var(--bg));
-  --accent-3: color-mix(in srgb, var(--accent) 32%, var(--bg));
-  --accent-4: color-mix(in srgb, var(--accent) 60%, var(--bg));
+     single --accent knob via OKLCH color-mix against a per-theme white/black
+     endpoint. Using an explicit neutral endpoint avoids low-chroma background
+     hue differences between browser engines. */
+  --accent-1: color-mix(in oklch, var(--accent) 8%, var(--accent-ramp-end));
+  --accent-2: color-mix(in oklch, var(--accent) 16%, var(--accent-ramp-end));
+  --accent-3: color-mix(in oklch, var(--accent) 32%, var(--accent-ramp-end));
+  --accent-4: color-mix(in oklch, var(--accent) 60%, var(--accent-ramp-end));
   --accent-5: var(--accent);
   --accent-6: var(--accent-strong);
 
@@ -128,6 +129,7 @@
   --text-soft: #353533;
   --text-dim: #686863;
   --accent: #d71921;
+  --accent-ramp-end: #ffffff;
   --accent-strong: color-mix(in srgb, var(--accent) 83%, #000);
   --accent-text: var(--accent-strong);
   --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
@@ -135,8 +137,6 @@
   --success-soft: rgb(47, 125, 79, 0.12);
   --warning: #806414;
   --warning-soft: rgb(128, 100, 20, 0.13);
-  --orange: #a85f32;
-  --orange-soft: rgb(168, 95, 50, 0.13);
   --danger: #c01622;
   --danger-soft: rgb(192, 22, 34, 0.1);
   --info: #1f63c4;
@@ -169,18 +169,19 @@
   :root:not([data-theme='light']) {
     color-scheme: dark;
 
-    --bg: #000000;
-    --bg-elevated: #0a0a0a;
+    --bg: #121212;
+    --bg-elevated: #181818;
     --bg-accent: color-mix(in srgb, var(--accent) 8%, transparent);
-    --panel: #0c0c0c;
-    --panel-strong: #141414;
-    --panel-soft: #1a1a1a;
-    --line: #2a2a2a;
-    --line-strong: #444444;
-    --text: #f2f2f2;
-    --text-soft: #c4c4c4;
-    --text-dim: #858585;
+    --panel: #1c1c1c;
+    --panel-strong: #222222;
+    --panel-soft: #242424;
+    --line: #383838;
+    --line-strong: #555555;
+    --text: #e6e6e6;
+    --text-soft: #c8c8c8;
+    --text-dim: #a0a0a0;
     --accent: #ff3b41;
+    --accent-ramp-end: #000000;
     --accent-strong: color-mix(in srgb, var(--accent) 84%, #fff);
     --accent-text: var(--accent-strong);
     --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
@@ -188,8 +189,6 @@
     --success-soft: rgb(78, 194, 126, 0.14);
     --warning: #d8bd72;
     --warning-soft: rgb(216, 189, 114, 0.14);
-    --orange: #d08c5b;
-    --orange-soft: rgb(208, 140, 91, 0.15);
     --danger: #ff4d54;
     --danger-soft: rgb(255, 77, 84, 0.15);
     --info: #6fb0e6;
@@ -208,18 +207,19 @@
 :root[data-theme='dark'] {
   color-scheme: dark;
 
-  --bg: #000000;
-  --bg-elevated: #0a0a0a;
+  --bg: #121212;
+  --bg-elevated: #181818;
   --bg-accent: color-mix(in srgb, var(--accent) 8%, transparent);
-  --panel: #0c0c0c;
-  --panel-strong: #141414;
-  --panel-soft: #1a1a1a;
-  --line: #2a2a2a;
-  --line-strong: #444444;
-  --text: #f2f2f2;
-  --text-soft: #c4c4c4;
-  --text-dim: #858585;
+  --panel: #1c1c1c;
+  --panel-strong: #222222;
+  --panel-soft: #242424;
+  --line: #383838;
+  --line-strong: #555555;
+  --text: #e6e6e6;
+  --text-soft: #c8c8c8;
+  --text-dim: #a0a0a0;
   --accent: #ff3b41;
+  --accent-ramp-end: #000000;
   --accent-strong: color-mix(in srgb, var(--accent) 84%, #fff);
   --accent-text: var(--accent-strong);
   --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
@@ -227,8 +227,6 @@
   --success-soft: rgb(78, 194, 126, 0.14);
   --warning: #d8bd72;
   --warning-soft: rgb(216, 189, 114, 0.14);
-  --orange: #d08c5b;
-  --orange-soft: rgb(208, 140, 91, 0.15);
   --danger: #ff4d54;
   --danger-soft: rgb(255, 77, 84, 0.15);
   --info: #6fb0e6;
@@ -299,3 +297,29 @@
     --shadow-raised: 0 0 0 1px var(--text);
   }
 }
+
+/* OLED / true-black surface — opt-in brand variant for the dark theme.
+   The default dark base is a deliberately elevated near-black (#121212) for
+   readability: pure black + bright text causes halation, and #000→#0c0c0c
+   surface steps are imperceptible (so cards melt into the page). This preset
+   restores pure black for OLED power-saving and the original "Nothing" look.
+   CSS-only (not in the JS token model, like [data-density] / [data-contrast]),
+   and scoped to the dark theme so it never blacks out the light theme. Text
+   stays the re-tuned --text, which clears WCAG AA on #000 too. */
+:root[data-theme='dark'][data-surface='oled'] {
+  --bg: #000000;
+  --bg-elevated: #0a0a0a;
+  --panel: #101010;
+  --panel-strong: #161616;
+  --panel-soft: #1a1a1a;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light'])[data-surface='oled'] {
+    --bg: #000000;
+    --bg-elevated: #0a0a0a;
+    --panel: #101010;
+    --panel-strong: #161616;
+    --panel-soft: #1a1a1a;
+  }
+}