@signal9/era-ui 4.14.0 → 4.15.0

package/dist/generated-docs/llms-full.txt

@@ -1028,6 +1028,7 @@ after the pane's own. Pass Compartments for reactive plugin sets. |
 | `onDragEnd?` | `(data: DragEventData) => void` | — | — |
 | `onClose?` | `() => void` | — | When set, a close button renders at the right of the handle bar. |
 | `header?` | `Snippet` | — | Extra handle-bar content, rendered after the title. |
+| `center?` | `Snippet` | — | Content centred on the bar itself — Pane.Handle's three-track grid. |
 | `children?` | `Snippet` | — | — |
 
 <!-- end: pane -->

package/dist/generated-docs/manifest.json

@@ -194,7 +194,7 @@
       "slug": "pane",
       "title": "Pane",
       "summary": "A draggable floating window with a handle bar.",
-      "tokenEstimate": 416,
+      "tokenEstimate": 441,
       "sections": [
         "Import",
         "Props"

package/dist/generated-docs/pane.md

@@ -29,4 +29,5 @@ after the pane's own. Pass Compartments for reactive plugin sets. |
 | `onDragEnd?` | `(data: DragEventData) => void` | — | — |
 | `onClose?` | `() => void` | — | When set, a close button renders at the right of the handle bar. |
 | `header?` | `Snippet` | — | Extra handle-bar content, rendered after the title. |
+| `center?` | `Snippet` | — | Content centred on the bar itself — Pane.Handle's three-track grid. |
 | `children?` | `Snippet` | — | — |

package/dist/os/pane-manager.svelte.d.ts

@@ -150,6 +150,14 @@ export interface AppDefinition {
      *  live AppPane too, so a host can swap it as the pane's content
      *  changes. */
     actions?: Snippet;
+    /** Replaces the default icon+title cluster on the LEFT of the title bar.
+     *  Assignable live, like `actions`. */
+    lead?: Snippet;
+    /** Content centred on the title bar itself (a document title, a breadcrumb) —
+     *  rendered in Pane.Handle's three-track grid, so it stays pinned to the true
+     *  centre of the bar however the sides grow. Assignable live. Interactive
+     *  content in it must carry data-pane-control (the bar is the drag zone). */
+    center?: Snippet;
 }
 /** A live pane instance in the registry. */
 export interface AppPane {
@@ -173,6 +181,10 @@ export interface AppPane {
     minimizable: boolean;
     bodyClass?: string;
     actions?: Snippet;
+    /** See AppDefinition — both assignable on the live pane, which is how an
+     *  app claims its own chrome: `pane.center = mySnippet` from the body. */
+    lead?: Snippet;
+    center?: Snippet;
     /** App-specific state, carried verbatim through a snapshot. */
     props?: JsonValue;
 }

package/dist/os/pane-manager.svelte.js

@@ -183,6 +183,8 @@ export class PaneManager {
             minimizable: app.minimizable ?? true,
             bodyClass: app.bodyClass,
             actions: app.actions,
+            lead: app.lead,
+            center: app.center,
             props: app.props
         };
         this.panes.push(win);
@@ -364,6 +366,8 @@ export class PaneManager {
                 minimizable: app.minimizable ?? true,
                 bodyClass: app.bodyClass,
                 actions: app.actions,
+                lead: app.lead,
+                center: app.center,
                 props: s.props ?? app.props
             });
         }

package/dist/os/pane.svelte

@@ -92,14 +92,21 @@
 	     from the edge against 5px above and below it — read as crowded because it
 	     was. --era-inset-md is (h-md − text)/2, so the label now starts the same
 	     distance in from the edge as it sits from the top. -->
-	<Pane.Handle class="gap-(--era-gap) pl-(--era-inset-md)">
-		{#if pane.icon}
-			{@const Icon = pane.icon}
-			<Icon class="size-(--era-h-xs) shrink-0 text-muted" />
+	<Pane.Handle class="gap-(--era-gap) pl-(--era-inset-md)" center={pane.center}>
+		{#if pane.lead}
+			<!-- The app replaced the whole icon+title cluster. Its content lives in
+			     the drag zone like the default one; anything interactive in it
+			     carries data-pane-control itself. -->
+			{@render pane.lead()}
+		{:else}
+			{#if pane.icon}
+				{@const Icon = pane.icon}
+				<Icon class="size-(--era-h-xs) shrink-0 text-muted" />
+			{/if}
+			<span class={cn('truncate text-body', focused ? 'text-bright' : 'text-muted')}
+				>{pane.title}</span
+			>
 		{/if}
-		<span class={cn('truncate text-body', focused ? 'text-bright' : 'text-muted')}
-			>{pane.title}</span
-		>
 		<!-- Close / minimize / maximize. Deliberately NOT data-pane-control (same as
 		     the raw Pane.Close): a left press-and-HOLD drags the pane — neodrag only
 		     drags the primary button and suppresses the trailing click after a real
@@ -109,7 +116,7 @@
 		     rhythm as the rest of the handle. Like the close button they carry no
 		     data-pane-control, so a press-and-hold anywhere on the bar still drags
 		     the pane and only a clean click activates them. -->
-		<div class="ml-auto flex shrink-0 items-center gap-(--era-gap)">
+		{#snippet trail()}
 			{@render pane.actions?.()}
 			<!-- The macOS traffic lights, one button: red = close at rest, and the
 			     held preview recolours to the action it will commit — yellow for
@@ -158,7 +165,7 @@
 					<X />
 				{/if}
 			</Button>
-		</div>
+		{/snippet}
 	</Pane.Handle>
 
 	<Pane.Content class={pane.bodyClass}>

package/dist/styles/themes.css

@@ -31,38 +31,72 @@
 .dark {
 	color-scheme: dark;
 
-	--color-1: oklch(0.162 0 0);
-	--color-2: oklch(0.195 0 0);
-	--color-3: oklch(0.254 0 0);
-	--color-4: oklch(0.302 0 0);
-	--color-5: oklch(0.348 0 0);
-	--color-6: oklch(0.396 0 0);
-	--color-7: oklch(0.459 0 0);
-	--color-8: oklch(0.549 0 0);
-	--color-9: oklch(0.649 0 0);
-	--color-10: oklch(0.72 0 0);
-	--color-11: oklch(0.863 0 0);
-	--color-12: oklch(0.933 0 0);
+	--color-1: oklch(0.162 0 none);
+	--color-2: oklch(0.195 0 none);
+	--color-3: oklch(0.254 0 none);
+	--color-4: oklch(0.302 0 none);
+	--color-5: oklch(0.348 0 none);
+	--color-6: oklch(0.396 0 none);
+	--color-7: oklch(0.459 0 none);
+	--color-8: oklch(0.549 0 none);
+	--color-9: oklch(0.649 0 none);
+	--color-10: oklch(0.72 0 none);
+	--color-11: oklch(0.863 0 none);
+	--color-12: oklch(0.933 0 none); /* hue `none`, not 0 — see below */
 
 	/* Semantic tokens */
 	--color-border: var(--color-5);
 	--color-surface: var(--color-2);
-	--color-hover: oklch(0.25 0 0);
+	--color-hover: oklch(0.25 0 none);
 	--color-fg: var(--color-11);
-	--color-bright: var(--color-12);
+	/* EMPHASIS INK IS TINTED BY THE THEME, not pinned to the top of the ramp.
+	 *
+	 * Step 12 is the ramp's extreme, and at the extreme a neutral ramp has run out
+	 * of colour — so `bright` came out pure white on the dark themes and pure
+	 * black on signalnine light. That is the one place a themed UI should NOT go
+	 * achromatic: bright is the emphasis ink (headings, titles, the sentence you
+	 * are meant to read first), so it is the text carrying the most identity and
+	 * it was carrying none.
+	 *
+	 * It now takes 12% of --color-primary — the theme's own accent, which is also
+	 * what the accent picker writes, so choosing an accent tints the emphasis text
+	 * with it live. 12% is a cast, not a colour: it moves lightness by ~0.02 (the
+	 * default dark page keeps 11.6:1) and lands chroma near 0.013, which reads as
+	 * "warm white" or "blue-black" rather than as a coloured heading.
+	 *
+	 * A theme whose accent IS neutral (the default) is unchanged by construction —
+	 * there is no hue to lend — which is the correct behaviour rather than an
+	 * exception.
+	 *
+	 * The achromatic step 12s are written with hue `none` rather than hue 0, and
+	 * that is load-bearing: hue 0 is a REAL hue (red), so oklch interpolation
+	 * walks it round to the accent's the short way and a black-plus-blue mix came
+	 * out magenta (signalnine light's #000 landed on hue 349). `none` marks the
+	 * hue as powerless — which it is at chroma 0 — so the mix adopts the accent's
+	 * hue instead of travelling to it. The colours themselves are unchanged
+	 * everywhere else: at chroma 0 the hue paints nothing. */
+	--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
 	/* Muted is body copy, not a de-emphasis wash — the /text page sets whole
-	 * paragraphs in it — so it does NOT sit flat on step 10: it leans 30% of the
-	 * way to --color-fg. Step 10 alone read as "greyed out" at paragraph length
-	 * (7.80:1 on the default dark page); the lean lands it at 9.11:1, still a
-	 * clear step below fg for the mixed-tone case (muted prose beside a bright
-	 * literal) but no longer receding. The lean is toward fg rather than a fixed
-	 * lightness so it mirrors correctly in light mode (muted DARKENS toward fg)
-	 * and keeps each theme's own hue family — the tinted scales (adobe, sand)
-	 * interpolate between two steps of their own ramp, never toward neutral.
+	 * paragraphs in it — so it does NOT sit flat on step 10: it leans 40% of the
+	 * way to --color-bright. Step 10 alone read as "greyed out" at paragraph
+	 * length (7.80:1 on the default dark page); the lean lands it at 10.43:1, and
+	 * the ordering muted < fg < bright still holds by a clear margin (0.80 / 0.86
+	 * / 0.93 in dark), so the mixed-tone case — muted prose beside a bright
+	 * literal — keeps all three of its levels.
+	 *
+	 * It aims at BRIGHT rather than fg on purpose: fg is the ink of controls and
+	 * labels, bright is the ink of the sentence you are meant to read, and body
+	 * copy belongs with the second one. It also means muted inherits the theme's
+	 * tint through bright, so prose is never a neutral grey on a themed page.
+	 *
+	 * The lean is toward a TOKEN rather than a fixed lightness so it mirrors
+	 * correctly in light mode (muted DARKENS toward bright) and keeps each theme's
+	 * own hue family — the tinted scales interpolate between two steps of their
+	 * own ramp, never toward neutral.
 	 *
 	 * signalnine sets its muted by hand from measured source colours and is
 	 * deliberately exempt. */
-	--color-muted: color-mix(in oklch, var(--color-10) 70%, var(--color-fg));
+	--color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
 	/* Inline link ink. Declared once here and inherited by every theme —
 	 * var(--color-bright) resolves in the element's own context, so a theme only
 	 * names this if it wants links to differ from emphasis text (signalnine
@@ -72,7 +106,7 @@
 	/* Accent tokens — override these to theme the library */
 	--color-primary: var(--color-fg);
 	--color-primary-fg: var(--color-1);
-	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
+	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
 	/* Destructive carries LIGHT text — a white glyph on the red fill.
 	 *
 	 * The reference terminal app's danger red, matched exactly: era had landed on
@@ -89,7 +123,7 @@
 	 * needs but not the 4.5:1 body copy would. Pushing the red LIGHTER widens
 	 * that gap; pushing it darker closes it. */
 	--color-destructive: oklch(0.65 0.2 25); /* #f14d4c */
-	--color-destructive-fg: oklch(0.96 0 0);
+	--color-destructive-fg: oklch(0.96 0 none);
 	/* The semantic trio is one family: same lightness and chroma as destructive,
 	 * varying only in hue, so a success fill and a destructive fill carry the same
 	 * weight — which is what makes the pane's traffic lights read as three lights
@@ -103,9 +137,9 @@
 	 * the gap: measured against the page, the three now sit at 5.9 / 7.0 / 9.3
 	 * where they sat at 5.9 / 7.0 / 11.1. */
 	--color-success: oklch(0.65 0.2 145);
-	--color-success-fg: oklch(0.96 0 0);
+	--color-success-fg: oklch(0.96 0 none);
 	--color-warning: oklch(0.75 0.15 85);
-	--color-warning-fg: oklch(0.162 0 0);
+	--color-warning-fg: oklch(0.162 0 none);
 }
 
 /* -------------------------------------------------- */
@@ -115,75 +149,75 @@
 	:root:not(.dark) {
 		color-scheme: light;
 
-		--color-1: oklch(0.933 0 0);
-		--color-2: oklch(0.863 0 0);
-		--color-3: oklch(0.72 0 0);
-		--color-4: oklch(0.649 0 0);
-		--color-5: oklch(0.549 0 0);
-		--color-6: oklch(0.459 0 0);
-		--color-7: oklch(0.396 0 0);
-		--color-8: oklch(0.348 0 0);
-		--color-9: oklch(0.302 0 0);
-		--color-10: oklch(0.254 0 0);
-		--color-11: oklch(0.195 0 0);
-		--color-12: oklch(0.162 0 0);
+		--color-1: oklch(0.933 0 none);
+		--color-2: oklch(0.863 0 none);
+		--color-3: oklch(0.72 0 none);
+		--color-4: oklch(0.649 0 none);
+		--color-5: oklch(0.549 0 none);
+		--color-6: oklch(0.459 0 none);
+		--color-7: oklch(0.396 0 none);
+		--color-8: oklch(0.348 0 none);
+		--color-9: oklch(0.302 0 none);
+		--color-10: oklch(0.254 0 none);
+		--color-11: oklch(0.195 0 none);
+		--color-12: oklch(0.162 0 none); /* hue `none`, not 0 — see below */
 
 		--color-border: var(--color-5);
 		--color-surface: var(--color-2);
-		--color-hover: oklch(0.8 0 0);
+		--color-hover: oklch(0.8 0 none);
 		--color-fg: var(--color-11);
-		--color-bright: var(--color-12);
-		--color-muted: color-mix(in oklch, var(--color-10) 70%, var(--color-fg));
+		--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
+		--color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
 
 		/* Accent tokens */
 		--color-primary: var(--color-fg);
 		--color-primary-fg: var(--color-1);
-		--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
+		--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
 		--color-destructive: oklch(0.65 0.2 25); /* #f14d4c */
-		--color-destructive-fg: oklch(0.98 0 0);
+		--color-destructive-fg: oklch(0.98 0 none);
 		/* Chroma matched to destructive like the dark theme; the LIGHTNESSES stay
 		 * where they are, because here they carry white text — green at the red's
 		 * 0.65 drops to 2.99:1 against white, under the 3:1 a filled glyph needs. */
 		--color-success: oklch(0.5 0.2 145);
-		--color-success-fg: oklch(0.98 0 0);
+		--color-success-fg: oklch(0.98 0 none);
 		--color-warning: oklch(0.72 0.15 85);
-		--color-warning-fg: oklch(0.162 0 0);
+		--color-warning-fg: oklch(0.162 0 none);
 	}
 }
 
 .light {
 	color-scheme: light;
 
-	--color-1: oklch(0.933 0 0);
-	--color-2: oklch(0.863 0 0);
-	--color-3: oklch(0.72 0 0);
-	--color-4: oklch(0.649 0 0);
-	--color-5: oklch(0.549 0 0);
-	--color-6: oklch(0.459 0 0);
-	--color-7: oklch(0.396 0 0);
-	--color-8: oklch(0.348 0 0);
-	--color-9: oklch(0.302 0 0);
-	--color-10: oklch(0.254 0 0);
-	--color-11: oklch(0.195 0 0);
-	--color-12: oklch(0.162 0 0);
+	--color-1: oklch(0.933 0 none);
+	--color-2: oklch(0.863 0 none);
+	--color-3: oklch(0.72 0 none);
+	--color-4: oklch(0.649 0 none);
+	--color-5: oklch(0.549 0 none);
+	--color-6: oklch(0.459 0 none);
+	--color-7: oklch(0.396 0 none);
+	--color-8: oklch(0.348 0 none);
+	--color-9: oklch(0.302 0 none);
+	--color-10: oklch(0.254 0 none);
+	--color-11: oklch(0.195 0 none);
+	--color-12: oklch(0.162 0 none); /* hue `none`, not 0 — see below */
 
 	--color-border: var(--color-5);
 	--color-surface: var(--color-2);
-	--color-hover: oklch(0.8 0 0);
+	--color-hover: oklch(0.8 0 none);
 	--color-fg: var(--color-11);
-	--color-bright: var(--color-12);
-	--color-muted: color-mix(in oklch, var(--color-10) 70%, var(--color-fg));
+	--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
+	--color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
 
 	/* Accent tokens */
 	--color-primary: var(--color-fg);
 	--color-primary-fg: var(--color-1);
-	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
+	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
 	--color-destructive: oklch(0.65 0.2 25); /* #f14d4c */
-	--color-destructive-fg: oklch(0.98 0 0);
+	--color-destructive-fg: oklch(0.98 0 none);
 	--color-success: oklch(0.5 0.17 145);
-	--color-success-fg: oklch(0.98 0 0);
+	--color-success-fg: oklch(0.98 0 none);
 	--color-warning: oklch(0.72 0.15 85);
-	--color-warning-fg: oklch(0.162 0 0);
+	--color-warning-fg: oklch(0.162 0 none);
 }
 
 /* -------------------------------------------------- */
@@ -215,8 +249,8 @@
 	--color-surface: var(--color-2);
 	--color-hover: oklch(0.252 0.024 56);
 	--color-fg: var(--color-11);
-	--color-bright: var(--color-12);
-	--color-muted: color-mix(in oklch, var(--color-10) 70%, var(--color-fg));
+	--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
+	--color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
 
 	/* Warm sandstone primary + unexpected turquoise support. */
 	--color-primary: oklch(0.74 0.108 68);
@@ -259,12 +293,12 @@
 		--color-surface: var(--color-2);
 		--color-hover: oklch(0.81 0.022 73);
 		--color-fg: var(--color-11);
-		--color-bright: var(--color-12);
-		--color-muted: color-mix(in oklch, var(--color-10) 70%, var(--color-fg));
+		--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
+		--color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
 
 		--color-primary: oklch(0.515 0.16 38);
 		--color-primary-fg: oklch(0.96 0.014 78);
-		--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
+		--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
 		--color-destructive: oklch(0.575 0.22 28);
 		--color-destructive-fg: oklch(0.98 0.012 78);
 		--color-success: oklch(0.5 0.13 158);
@@ -294,12 +328,12 @@
 	--color-surface: var(--color-2);
 	--color-hover: oklch(0.81 0.022 73);
 	--color-fg: var(--color-11);
-	--color-bright: var(--color-12);
-	--color-muted: color-mix(in oklch, var(--color-10) 70%, var(--color-fg));
+	--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
+	--color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
 
 	--color-primary: oklch(0.515 0.16 38);
 	--color-primary-fg: oklch(0.96 0.014 78);
-	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
+	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
 	--color-destructive: oklch(0.575 0.22 28);
 	--color-destructive-fg: oklch(0.98 0.012 78);
 	--color-success: oklch(0.5 0.13 158);
@@ -332,8 +366,8 @@
 	--color-surface: var(--color-2);
 	--color-hover: color-mix(in oklch, var(--color-3) 80%, var(--color-2));
 	--color-fg: var(--color-11);
-	--color-bright: var(--color-12);
-	--color-muted: color-mix(in oklch, var(--color-10) 70%, var(--color-fg));
+	--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
+	--color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
 
 	--color-primary: oklch(0.8 0.034 54);
 	--color-primary-fg: var(--color-1);
@@ -370,12 +404,12 @@
 		--color-surface: var(--color-2);
 		--color-hover: oklch(0.88 0.016 72);
 		--color-fg: var(--color-11);
-		--color-bright: var(--color-12);
-		--color-muted: color-mix(in oklch, var(--color-10) 70%, var(--color-fg));
+		--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
+		--color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
 
 		--color-primary: oklch(0.55 0.12 58);
 		--color-primary-fg: oklch(0.97 0.008 80);
-		--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
+		--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
 		--color-destructive: oklch(0.59 0.18 32);
 		--color-destructive-fg: oklch(0.98 0.008 80);
 		--color-success: oklch(0.54 0.11 164);
@@ -405,12 +439,12 @@
 	--color-surface: var(--color-2);
 	--color-hover: oklch(0.88 0.016 72);
 	--color-fg: var(--color-11);
-	--color-bright: var(--color-12);
-	--color-muted: color-mix(in oklch, var(--color-10) 70%, var(--color-fg));
+	--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
+	--color-muted: color-mix(in oklch, var(--color-10) 60%, var(--color-bright));
 
 	--color-primary: oklch(0.55 0.12 58);
 	--color-primary-fg: oklch(0.97 0.008 80);
-	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
+	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
 	--color-destructive: oklch(0.59 0.18 32);
 	--color-destructive-fg: oklch(0.98 0.008 80);
 	--color-success: oklch(0.54 0.11 164);
@@ -420,12 +454,16 @@
 }
 
 /* -------------------------------------------------- */
-/* Signalnine — dark (Tomorrow, measured)             */
+/* Signalnine — dark (Tomorrow bones, amber ink)      */
 /*                                                    */
-/* The classic imageboard dark theme. The accents and   */
-/* the upper scale are Tomorrow Night's own values,     */
-/* converted to OKLCH — comment and foreground land     */
-/* exactly at steps 8 and 11.                           */
+/* The classic imageboard dark theme. The scale keeps   */
+/* Tomorrow Night's lightnesses — comment and           */
+/* foreground still land at steps 8 and 11 — but the    */
+/* BLUE IS GONE: the ramp's cast and the accent are     */
+/* both a cool amber (hue 84, the yellow side of        */
+/* amber), so chrome, links and emphasis share one      */
+/* temperature instead of a blue ramp under yellow      */
+/* accents.                                             */
 /*                                                      */
 /* The DARK END is deliberately deeper than Tomorrow's. */
 /* Its #1d1f21 page read light next to era's other dark */
@@ -440,11 +478,11 @@
 /* the link blue had been placed IN the ramp, which     */
 /* forced the steps under it to swerve to reach it.     */
 /* Tomorrow does not work that way and neither does     */
-/* this now — the ramp is one cool gray from end to     */
-/* end, and the blue, red, green and yellow are ACCENT  */
-/* tokens sitting on top of it. That is what an         */
-/* imageboard actually looks like: gray chrome, colour  */
-/* carried by the text.                                 */
+/* this now — the ramp is one gray from end to end      */
+/* (cast faintly amber, never placed IN the ramp), and  */
+/* the amber, red and green are ACCENT tokens sitting   */
+/* on top of it. That is what an imageboard actually    */
+/* looks like: gray chrome, colour carried by the text. */
 /* -------------------------------------------------- */
 :root[data-theme='signalnine'],
 [data-theme='signalnine'].dark {
@@ -454,18 +492,18 @@
 	 * own #1d1f21 — that read too light beside the other dark themes. Everything
 	 * from step 2 up re-spaces evenly from the new floor to the comment anchor,
 	 * so lowering the page did not leave a cliff between it and the panels. */
-	--color-1: oklch(0.168 0.005 248); /* #0d0f11 */
-	--color-2: oklch(0.225 0.007 258); /* #1a1c1f */
-	--color-3: oklch(0.29 0.01 258); /* #282c30 */
-	--color-4: oklch(0.355 0.011 258); /* #383c42 */
-	--color-5: oklch(0.435 0.011 257);
-	--color-6: oklch(0.515 0.01 256);
-	--color-7: oklch(0.596 0.009 255);
-	--color-8: oklch(0.677 0.006 200); /* #939899  Tomorrow comment */
-	--color-9: oklch(0.73 0.005 190);
-	--color-10: oklch(0.78 0.005 180);
-	--color-11: oklch(0.83 0.004 157); /* #c5c8c6  Tomorrow foreground */
-	--color-12: oklch(0.9 0.004 157);
+	--color-1: oklch(0.168 0.004 84); /* graphite floor, amber-cast */
+	--color-2: oklch(0.225 0.005 84);
+	--color-3: oklch(0.29 0.007 84);
+	--color-4: oklch(0.355 0.008 84);
+	--color-5: oklch(0.435 0.008 84);
+	--color-6: oklch(0.515 0.008 84);
+	--color-7: oklch(0.596 0.007 84);
+	--color-8: oklch(0.677 0.006 84); /* comment grey, warmed */
+	--color-9: oklch(0.73 0.005 84);
+	--color-10: oklch(0.78 0.005 84);
+	--color-11: oklch(0.83 0.005 84); /* foreground, warmed */
+	--color-12: oklch(0.9 0.005 84);
 
 	/* Border sits a step LOWER than the usual 5. Tomorrow's own rules are
 	 * quiet — its border colour is the current-line grey — and at step 5 the
@@ -473,25 +511,26 @@
 	 * page, inside the 1.7–3.2 the other dark themes hold. */
 	--color-border: var(--color-4);
 	--color-surface: var(--color-2);
-	--color-hover: oklch(0.255 0.009 258);
+	--color-hover: oklch(0.255 0.006 84);
 	--color-fg: var(--color-11);
-	--color-bright: var(--color-12);
+	--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
 	/* Tomorrow's comment grey, which is what it uses for de-emphasised text. */
 	--color-muted: var(--color-8);
-	/* The link blue every imageboard reader knows. */
-	--color-link: oklch(0.6975 0.0551 244.3); /* #81a2be */
-
-	/* Tomorrow's accents, unmodified. They are pastels, so each takes DARK text
-	 * — the page colour — rather than white. */
-	--color-primary: oklch(0.6975 0.0551 244.3); /* #81a2be  blue */
-	--color-primary-fg: oklch(0.168 0.005 248);
-	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
+	/* The link follows the accent — one ink for "this is interactive". */
+	--color-link: var(--color-primary);
+
+	/* A COOL amber: hue 84 — the yellow side of amber, not orange — with the
+	 * pastel restraint of the Tomorrow accents it replaces, so it still takes
+	 * DARK text (the page colour) rather than white. */
+	--color-primary: oklch(0.76 0.115 84); /* cool amber */
+	--color-primary-fg: oklch(0.168 0.004 84);
+	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
 	--color-destructive: oklch(0.6308 0.1298 21.4); /* #cc6666  red */
-	--color-destructive-fg: oklch(0.168 0.005 248);
+	--color-destructive-fg: oklch(0.168 0.004 84);
 	--color-success: oklch(0.7733 0.1095 113.4); /* #b5bd68  green */
-	--color-success-fg: oklch(0.168 0.005 248);
+	--color-success-fg: oklch(0.168 0.004 84);
 	--color-warning: oklch(0.8462 0.1115 82.9); /* #f0c674  yellow */
-	--color-warning-fg: oklch(0.168 0.005 248);
+	--color-warning-fg: oklch(0.168 0.004 84);
 }
 
 /* Signalnine — light (yahoo.co.jp, measured)         */
@@ -547,7 +586,7 @@
 	:root[data-theme='signalnine']:not(.dark) {
 		color-scheme: light;
 
-		--color-1: oklch(1 0 0); /* #ffffff  page */
+		--color-1: oklch(1 0 none); /* #ffffff  page */
 		--color-2: oklch(0.9439 0.0251 271.14); /* #e6ecfe  card fill */
 		--color-3: oklch(0.887 0.0368 265.13); /* #cedaf3  border */
 		--color-4: oklch(0.844 0.0447 265.6); /* #bcccea */
@@ -555,10 +594,10 @@
 		--color-6: oklch(0.676 0.078 263);
 		--color-7: oklch(0.593 0.0975 260.33); /* #5c7eb8  muted text, darkened */
 		--color-8: oklch(0.545 0.126 262);
-		--color-9: oklch(0.51 0 0); /* #666666 */
+		--color-9: oklch(0.51 0 none); /* #666666 */
 		--color-10: oklch(0.358 0.1534 266.07); /* #17318b  link text, darkened */
 		--color-11: oklch(0.16 0.008 266);
-		--color-12: oklch(0 0 0); /* #000000  body text */
+		--color-12: oklch(0 0 none); /* #000000  body text (hue `none` — see --color-bright) */
 
 		/* Repointed off the conventional steps on purpose — these name the roles
 		 * yahoo.co.jp actually paints, so each points at the step holding its
@@ -569,19 +608,19 @@
 		--color-surface: var(--color-2);
 		--color-hover: oklch(0.97 0.014 268.5); /* #f1f5ff */
 		--color-fg: var(--color-11);
-		--color-bright: var(--color-12);
+		--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
 		--color-muted: var(--color-7);
 		--color-link: var(--color-10);
 		/* Cards read --era-surface-bg, which the surface contract defines as
 		 * --color-2 — so the card fill follows from the scale, no override. */
 
 		--color-primary: oklch(0.566 0.222 265.8); /* #3766f6  the CTA blue, darkened */
-		--color-primary-fg: oklch(1 0 0);
-		--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
+		--color-primary-fg: oklch(1 0 none);
+		--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
 		--color-destructive: oklch(0.59 0.242 27.7); /* #eb0013 */
-		--color-destructive-fg: oklch(1 0 0);
+		--color-destructive-fg: oklch(1 0 none);
 		--color-success: oklch(0.58 0.15 152);
-		--color-success-fg: oklch(1 0 0);
+		--color-success-fg: oklch(1 0 none);
 		--color-warning: oklch(0.76 0.145 80);
 		--color-warning-fg: oklch(0.16 0.008 266);
 	}
@@ -590,7 +629,7 @@
 [data-theme='signalnine'].light {
 	color-scheme: light;
 
-	--color-1: oklch(1 0 0); /* #ffffff  page */
+	--color-1: oklch(1 0 none); /* #ffffff  page */
 	--color-2: oklch(0.9439 0.0251 271.14); /* #e6ecfe  card fill */
 	--color-3: oklch(0.887 0.0368 265.13); /* #cedaf3  border */
 	--color-4: oklch(0.844 0.0447 265.6); /* #bcccea */
@@ -598,10 +637,10 @@
 	--color-6: oklch(0.676 0.078 263);
 	--color-7: oklch(0.593 0.0975 260.33); /* #5c7eb8  muted text, darkened */
 	--color-8: oklch(0.545 0.126 262);
-	--color-9: oklch(0.51 0 0); /* #666666 */
+	--color-9: oklch(0.51 0 none); /* #666666 */
 	--color-10: oklch(0.358 0.1534 266.07); /* #17318b  link text, darkened */
 	--color-11: oklch(0.16 0.008 266);
-	--color-12: oklch(0 0 0); /* #000000  body text */
+	--color-12: oklch(0 0 none); /* #000000  body text (hue `none` — see --color-bright) */
 
 	/* Repointed off the conventional steps on purpose — these name the roles
 	 * yahoo.co.jp actually paints, so each points at the step holding its
@@ -612,19 +651,19 @@
 	--color-surface: var(--color-2);
 	--color-hover: oklch(0.97 0.014 268.5); /* #f1f5ff */
 	--color-fg: var(--color-11);
-	--color-bright: var(--color-12);
+	--color-bright: color-mix(in oklch, var(--color-12) 88%, var(--color-primary));
 	--color-muted: var(--color-7);
 	--color-link: var(--color-10);
 	/* Cards read --era-surface-bg, which the surface contract defines as
 	 * --color-2 — so the card fill follows from the scale, no override. */
 
 	--color-primary: oklch(0.566 0.222 265.8); /* #3766f6  the CTA blue, darkened */
-	--color-primary-fg: oklch(1 0 0);
-	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);
+	--color-primary-fg: oklch(1 0 none);
+	--color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, oklch(0 0 none));
 	--color-destructive: oklch(0.59 0.242 27.7); /* #eb0013 */
-	--color-destructive-fg: oklch(1 0 0);
+	--color-destructive-fg: oklch(1 0 none);
 	--color-success: oklch(0.58 0.15 152);
-	--color-success-fg: oklch(1 0 0);
+	--color-success-fg: oklch(1 0 none);
 	--color-warning: oklch(0.76 0.145 80);
 	--color-warning-fg: oklch(0.16 0.008 266);
 }