@ponchia/ui 0.4.0 → 0.5.0

package/css/state.css

@@ -0,0 +1,121 @@
+/* ==========================================================================
+   state — opt-in lifecycle / system-state vocabulary.
+
+   Serious apps spend a lot of time in states like saving, saved, queued,
+   offline, stale, conflicted, locked, and reviewed — usually improvised per
+   product, so even good apps feel inconsistent. This is the canonical set:
+   a labelled state object with a rationed tone, plus a page/document sync bar.
+
+   The state is carried by a tone dot AND an author-written label, never colour
+   alone (WCAG 1.4.1) — the label is the canonical wording (see docs/state.md).
+   Bronto ships the visual states; the host owns the state machine, retry
+   policy, persistence, and announcements. Persistent state gets persistent UI;
+   toasts are secondary. Not imported by core.css.
+   ========================================================================== */
+
+.ui-state {
+  --state-tone: var(--text-dim);
+
+  align-items: center;
+  display: inline-flex;
+  font-size: var(--text-sm);
+  gap: 0.4rem;
+}
+
+/* Leading state indicator — a tone dot. `--busy` makes it pulse. */
+.ui-state::before {
+  background: var(--state-tone);
+  border-radius: 50%;
+  block-size: 0.5rem;
+  content: '';
+  flex: none;
+  inline-size: 0.5rem;
+  print-color-adjust: exact;
+}
+
+.ui-state__label {
+  color: var(--text);
+}
+
+.ui-state__detail {
+  color: var(--text-dim);
+  font-size: var(--text-2xs);
+}
+
+/* In-progress states (saving / syncing / retrying): a pulsing indicator. */
+.ui-state--busy::before {
+  animation: uiStatePulse 1.1s ease-in-out infinite;
+}
+
+@keyframes uiStatePulse {
+  50% {
+    opacity: 0.3;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-state--busy::before {
+    animation: none;
+  }
+}
+
+/* Canonical states — each bakes in the right rationed tone. */
+.ui-state--saving {
+  --state-tone: var(--accent);
+}
+
+.ui-state--saved {
+  --state-tone: var(--success);
+}
+
+.ui-state--queued {
+  --state-tone: var(--text-dim);
+}
+
+.ui-state--offline {
+  --state-tone: var(--warning);
+}
+
+.ui-state--stale {
+  --state-tone: var(--warning);
+}
+
+.ui-state--conflict {
+  --state-tone: var(--danger);
+}
+
+.ui-state--error {
+  --state-tone: var(--danger);
+}
+
+.ui-state--locked {
+  --state-tone: var(--text-dim);
+}
+
+.ui-state--reviewed {
+  --state-tone: var(--success);
+}
+
+.ui-state--needs-review {
+  --state-tone: var(--warning);
+}
+
+/* Sync bar — a page/document-level save/sync status strip: a state on one side,
+   optional actions on the other. */
+.ui-syncbar {
+  align-items: center;
+  border-block-end: 1px solid var(--line);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm) var(--space-md);
+  justify-content: space-between;
+  padding-block: var(--space-xs);
+}
+
+/* Forced colours: the tone dot collapses to a system colour, so the
+   author-written label remains the state channel (it already must be). */
+@media (forced-colors: active) {
+  .ui-state::before {
+    background: CanvasText;
+  }
+}

package/css/tokens.css

@@ -1,11 +1,12 @@
 /* ==========================================================================
-   @ponchia/ui — design tokens
-   Nothing-inspired: monochrome surfaces, single red accent, dot-matrix type.
-   Dual light/dark. Variable names are stable so semantic classes inherit.
-   The Doto @font-face declarations live in fonts.css (bundled by
-   core.css/index.css) so font hosting is decoupled from these tokens —
-   a consumer can self-host Doto and still use the token layer by
-   overriding --display / --dot-font.
+   @ponchia/ui — design tokens   ⟨generated⟩
+   Single source of truth: tokens/index.js (`cssVars`). Edit token VALUES
+   there, then run `npm run tokens:css:build`. The four :root blocks below are
+   emitted from cssVars — the dark palette is authored ONCE (not the former two
+   CSS blocks + the JS mirror). check-tokens.mjs gates this file against cssVars.
+   The Doto @font-face lives in fonts.css; override --display / --dot-font to
+   self-host. CSS-only presets (density / contrast / OLED) are hand-authored
+   below the marker — they are intentionally not part of the JS token model.
    ========================================================================== */
 
 :root {
@@ -16,7 +17,7 @@
   --radius-sm: 1px;
   --radius-pill: 999px;
 
-  /* Spacing scale */
+  /* Spacing scale. */
   --space-2xs: 0.25rem;
   --space-xs: 0.5rem;
   --space-sm: 0.75rem;
@@ -27,8 +28,7 @@
 
   /* Type — Doto is the dot-matrix display face; body stays mono-grotesque. */
   --mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', ui-monospace, monospace;
-  --sans:
-    'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --sans: 'Inter', 'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
   --dot-font: 'Doto', var(--mono);
   --display: var(--dot-font);
   --text-2xs: 0.68rem;
@@ -48,14 +48,11 @@
   --duration-base: 200ms;
   --duration-slow: 360ms;
 
-  /* Dot-matrix motif sizing */
+  /* Dot-matrix motif sizing. */
   --dot-size: 2px;
   --dot-gap: 14px;
 
-  /* Stacking-context scale. Replaces scattered magic z-indexes so
-     consumers can reason about (and override) layering coherently.
-     Values match the prior literals — purely a refactor, no visual
-     change. */
+  /* Stacking-context scale (values match the prior literals — pure refactor). */
   --z-base: 0;
   --z-raised: 10;
   --z-sticky: 20;
@@ -63,14 +60,11 @@
   --z-popover: 50;
   --z-toast: 60;
 
-  /* 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 oklch, var(--accent) 8%, var(--bg));
-  --accent-2: color-mix(in oklch, var(--accent) 16%, var(--bg));
-  --accent-3: color-mix(in oklch, var(--accent) 32%, var(--bg));
-  --accent-4: color-mix(in oklch, var(--accent) 60%, var(--bg));
+  /* Accent ramp — a stepped family for charts / data-viz, derived from the single --accent knob via OKLCH color-mix against a per-theme white/black endpoint. */
+  --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);
 
@@ -82,10 +76,7 @@
   --surface-5: var(--line);
   --surface-6: var(--line-strong);
 
-  /* Semantic tier — stable, prefixed aliases over the (shorter,
-     legacy) primitive names. New consumer code should target these:
-     re-skinning one role no longer means chasing component internals.
-     The short names below stay as permanent back-compat aliases. */
+  /* Semantic --bronto-color-* tier — stable, prefixed aliases over the primitives. */
   --bronto-color-bg: var(--bg);
   --bronto-color-surface: var(--panel);
   --bronto-color-surface-raised: var(--panel-strong);
@@ -101,7 +92,7 @@
   --bronto-color-danger: var(--danger);
   --bronto-color-info: var(--info);
 
-  /* Aliases kept for back-compat with existing semantic classes */
+  /* Aliases kept for back-compat with existing semantic classes. */
   --surface: var(--panel);
   --surface-raised: var(--panel-strong);
   --surface-muted: var(--panel-soft);
@@ -128,6 +119,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);
@@ -144,41 +136,33 @@
   --field-dot: rgb(10, 10, 10, 0.16);
   --field-dot-hot: rgb(10, 10, 10, 0.4);
   --field-dot-accent: color-mix(in srgb, var(--accent) 78%, transparent);
-
-  /* Solid by default: this token drives every focus outline, so it must
-     clear the 3:1 non-text contrast minimum. Override per theme/subtree
-     to tune the ring without touching --accent. */
   --focus-ring: var(--accent);
   --shadow: none;
   --shadow-raised: 0 0 0 1px var(--line-strong);
 }
 
 /* --------------------------------------------------------------------------
-   Dark — true black. The Nothing default.
-
-   The palette below is intentionally written twice: once under
-   `prefers-color-scheme: dark` (system default, unless overridden to light)
-   and once under `[data-theme='dark']` (explicit opt-in). Vanilla CSS can't
-   share one declaration block between a media query and a top-level selector
-   without a build step or nesting, neither of which this zero-dep package
-   has. Keep the two blocks in sync when editing dark tokens.
+   Dark — emitted from cssVars.dark under BOTH the system preference and the
+   explicit [data-theme='dark'] opt-in. Authored once in tokens/index.js, so
+   the two blocks below can no longer drift from each other.
    -------------------------------------------------------------------------- */
 @media (prefers-color-scheme: dark) {
   :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);
@@ -204,18 +188,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);
@@ -237,6 +222,13 @@
   --shadow-raised: 0 0 0 1px var(--line-strong);
 }
 
+/* ==========================================================================
+   HAND-AUTHORED BELOW — CSS-only presets (density / contrast / OLED) and the
+   theming-contract notes. These are intentionally NOT in the JS token model
+   (tokens/index.js), so they are preserved verbatim when the palette above is
+   regenerated by scripts/gen-tokens-css.mjs.
+   ========================================================================== */
+
 /* --------------------------------------------------------------------------
    Theming contract — the public override surface.
 
@@ -293,3 +285,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;
+  }
+}

package/css/workbench.css

@@ -0,0 +1,83 @@
+/* ==========================================================================
+   workbench — opt-in inspector / property / selection-bar primitives.
+
+   Real tools need inspectors, property rows, and a bar of actions on the
+   current selection. Generic kits stop at cards/tables/forms, so every app
+   builds its own half-consistent workbench. This is the low-risk CSS core:
+   layout and affordances only. Resizable split panes (a focusable ARIA
+   window-splitter behavior) and drag handles are deliberately deferred until a
+   consumer needs them. Not imported by core.css.
+   ========================================================================== */
+
+/* --- Inspector — a panel of details for the selected object. --- */
+.ui-inspector {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  display: grid;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+}
+
+.ui-inspector__header {
+  align-items: baseline;
+  border-block-end: 1px solid var(--line);
+  display: flex;
+  gap: var(--space-sm);
+  justify-content: space-between;
+  padding-block-end: var(--space-xs);
+}
+
+.ui-inspector__body {
+  display: grid;
+  gap: var(--space-2xs);
+}
+
+/* --- Property row — a label/value pair, denser than ui-key-value and tuned
+   for an inspector (the value can hold an input or a static read-out). --- */
+.ui-property {
+  align-items: baseline;
+  display: grid;
+  gap: var(--space-sm);
+  grid-template-columns: minmax(6rem, 38%) 1fr;
+}
+
+.ui-property__label {
+  color: var(--text-dim);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.ui-property__value {
+  color: var(--text);
+  font-size: var(--text-sm);
+  min-inline-size: 0;
+}
+
+/* --- Selection bar — actions on the current selection ("3 selected"). --- */
+.ui-selectionbar {
+  align-items: center;
+  background: var(--panel-strong);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-raised);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm) var(--space-md);
+  justify-content: space-between;
+  padding: 0.5rem 0.85rem;
+}
+
+.ui-selectionbar__count {
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: var(--text-sm);
+}
+
+.ui-selectionbar__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+}