@glimstone/core 4.1.2 → 4.2.2

package/README.md

@@ -15,9 +15,11 @@ npm install @glimstone/core
   onto Tailwind v4 utilities for an app that uses Tailwind.
 - `glyphs.json` and `glyphs.md` are the glyph assortment: which mark means
   what, where each comes from, and the sizing rules that make them one set.
-- The engines: `appearance` (shape, accent, rainbow, motion), `controls` (the
-  label engine and its width stages) and `setStoragePrefix`, which keeps an
-  app's own names for what it stores.
+- The engines: `appearance` (shape, accent, rainbow, motion), `theme` (OLED
+  and whether dark is showing), `contrast` (the inks that hold 4.5:1),
+  `browserAccent` (the browser as a source for the system accent), `controls`
+  (the label engine and its width stages) and `setStoragePrefix`, which keeps
+  an app's own names for what it stores.
 - What a component shows, as functions: `buttonView`, `badgeClassName`, the
   select's list model, the Info tile's version links and update check, the
   README button's classes, where a bubble goes, a dialog's keys and the toast
@@ -26,6 +28,10 @@ npm install @glimstone/core
   say how a field looks and how wide it is, `pressRowControl` does what a click
   on a row's label does, `treeRows` and `treeStep` hold a tree's rows and keys, and
   `tableCellClass` says what a table's cell wears.
+- The sign-in card's flow: `createSignInFlow` keeps what was typed and which
+  form shows while the app answers each step, `signInTextEn` holds the English
+  words, and `showRefusal` shakes the button of a refused try and selects the
+  refused field.
 - What windows and menus share: `windowFoot` adds the way out, `stackWindow`
   gives Escape and Tab to the window in front, and `menu.ts` holds the menu
   model with `tidyMenu`, `menuRowView`, `placeMenu`, `menuMove`,

package/dist/appearance.d.ts

@@ -1,3 +1,5 @@
+import { contrastOn } from './contrast.ts';
+export { contrastOn };
 /**
  * The corner shapes. Like the motion levels these strings are a wire format:
  * they go into `data-shape`, the stylesheet and storage, and what the user
@@ -108,15 +110,42 @@ export declare function stormTap(state: {
     taps: number;
 }, tapped: string, current: string): Motion | undefined;
 /**
- * Overrides the accent tokens, or clears the override so the theme's gold comes
- * back. The contrast colour is computed, so a light accent never gets white
- * text.
+ * The accent mode that takes its colour from the device: Material You on
+ * Android, the desktop's accent colour, or the browser's `AccentColor`. It is
+ * stored as this word, never as the colour, so a synced setting does not carry
+ * one device's wallpaper to the next.
+ */
+export declare const SYSTEM_ACCENT = "system";
+/**
+ * The colour an accent setting stands for: a hex as it is, the system mode as
+ * the colour the source reported, and undefined for the default, which is also
+ * what the system mode gives on a device without a source.
+ */
+export declare function resolveAccent(accent: string | undefined, system: string | undefined): string | undefined;
+/**
+ * Overrides the accent tokens with a hex or SYSTEM_ACCENT, or clears the
+ * override so the theme's gold comes back. The ink on the fill is computed, so
+ * a light accent never gets white text.
+ *
+ * `--accent-ink`, `--accent-glyph` and `--accent-hover` are derived in
+ * tokens.css with color-mix, so they also follow a later light or dark switch.
+ * Where that mix would fall short of 4.5:1 on a ramp, the ramp's ink is set
+ * here instead, as `--accent-ink-light` or `--accent-ink-dark`.
+ */
+export declare function applyAccent(accent: string | undefined): void;
+/**
+ * Feeds the colour the device reports, or undefined where it has none, and
+ * repaints when the accent is in the system mode. Call it again whenever the
+ * source changes; `watchBrowserAccent(setSystemAccent)` does that for the
+ * browser.
  *
- * `--accent-ink`, `--accent-glyph` and `--accent-hover` are not set here:
- * tokens.css derives them from --accent with color-mix, so they also follow a
- * later light or dark switch.
+ * The colour is remembered on this device alone, so the first frame after a
+ * reload is already in it.
  */
-export declare function applyAccent(hex: string | undefined): void;
+export declare function setSystemAccent(hex: string | undefined): void;
+/** The device's colour, or undefined where there is none, so the wand swatch stays hidden. */
+export declare function systemAccent(): string | undefined;
+export declare function subscribeSystemAccent(fn: () => void): () => void;
 /** The current snapshot, with a stable identity between changes. */
 export declare function rainbowState(): RainbowState;
 export declare function subscribeRainbow(fn: () => void): () => void;
@@ -169,8 +198,7 @@ export declare function rainbowFromSettings(s: {
     rainbowSeed?: number;
     rainbowPalette?: string[] | null;
 }): RainbowState;
-/** Black or white, whichever is readable on the given colour. */
-export declare function contrastOn(hex: string): string;
+/** `accent` is the setting, so the system mode is cached as SYSTEM_ACCENT. */
 export declare function cacheAppearance(shape: string, accent: string, rainbow?: RainbowState): void;
 /** Applied at boot, before the app renders anything. */
 export declare function applyCachedAppearance(): void;

package/dist/appearance.js

@@ -4,7 +4,11 @@
 // so every component picks it up through the tokens it already reads.
 //
 // It has no framework dependency; the React and Vue packages wrap it.
+import { accentInks, contrastOn, validHex as valid } from './contrast.js';
 import { storageKey } from './storage.js';
+import { applyOled, storedOled } from './theme.js';
+// Also reachable through the @glimstone/core/appearance subpath.
+export { contrastOn };
 /** The shapes a picker shows. */
 export const SHAPES = ['round', 'soft', 'square'];
 /**
@@ -140,26 +144,94 @@ export function stormTap(state, tapped, current) {
  * animations: `.glim-live`'s pulse keeps its stop at every level.
  */
 /**
- * Overrides the accent tokens, or clears the override so the theme's gold comes
- * back. The contrast colour is computed, so a light accent never gets white
- * text.
+ * The accent mode that takes its colour from the device: Material You on
+ * Android, the desktop's accent colour, or the browser's `AccentColor`. It is
+ * stored as this word, never as the colour, so a synced setting does not carry
+ * one device's wallpaper to the next.
+ */
+export const SYSTEM_ACCENT = 'system';
+/**
+ * The colour an accent setting stands for: a hex as it is, the system mode as
+ * the colour the source reported, and undefined for the default, which is also
+ * what the system mode gives on a device without a source.
+ */
+export function resolveAccent(accent, system) {
+    if (accent === SYSTEM_ACCENT)
+        return valid(system) ? system : undefined;
+    return valid(accent) ? accent : undefined;
+}
+let accentSetting;
+let systemColour;
+const systemListeners = new Set();
+/**
+ * Overrides the accent tokens with a hex or SYSTEM_ACCENT, or clears the
+ * override so the theme's gold comes back. The ink on the fill is computed, so
+ * a light accent never gets white text.
  *
- * `--accent-ink`, `--accent-glyph` and `--accent-hover` are not set here:
- * tokens.css derives them from --accent with color-mix, so they also follow a
- * later light or dark switch.
+ * `--accent-ink`, `--accent-glyph` and `--accent-hover` are derived in
+ * tokens.css with color-mix, so they also follow a later light or dark switch.
+ * Where that mix would fall short of 4.5:1 on a ramp, the ramp's ink is set
+ * here instead, as `--accent-ink-light` or `--accent-ink-dark`.
  */
-export function applyAccent(hex) {
+export function applyAccent(accent) {
+    accentSetting = accent;
+    paintAccent(resolveAccent(accent, systemColour));
+}
+function paintAccent(hex) {
     const root = document.documentElement.style;
+    const inks = valid(hex) ? accentInks(hex) : { light: undefined, dark: undefined };
+    for (const [ramp, ink] of Object.entries(inks)) {
+        if (ink)
+            root.setProperty(`--accent-ink-${ramp}`, ink);
+        else
+            root.removeProperty(`--accent-ink-${ramp}`);
+    }
     if (!valid(hex)) {
         root.removeProperty('--accent');
         root.removeProperty('--accent-contrast');
         root.removeProperty('--accent-soft');
         return;
     }
-    const { r, g, b } = parse(hex);
+    const n = parseInt(hex.slice(1), 16);
     root.setProperty('--accent', hex);
     root.setProperty('--accent-contrast', contrastOn(hex));
-    root.setProperty('--accent-soft', `rgba(${r}, ${g}, ${b}, 0.14)`);
+    root.setProperty('--accent-soft', `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, 0.14)`);
+}
+/**
+ * Feeds the colour the device reports, or undefined where it has none, and
+ * repaints when the accent is in the system mode. Call it again whenever the
+ * source changes; `watchBrowserAccent(setSystemAccent)` does that for the
+ * browser.
+ *
+ * The colour is remembered on this device alone, so the first frame after a
+ * reload is already in it.
+ */
+export function setSystemAccent(hex) {
+    const next = valid(hex) ? hex : undefined;
+    if (next === systemColour)
+        return;
+    systemColour = next;
+    try {
+        if (next)
+            localStorage.setItem(storageKey('system-accent'), next);
+        else
+            localStorage.removeItem(storageKey('system-accent'));
+    }
+    catch {
+        // Without storage the default shows until the source answers.
+    }
+    if (accentSetting === SYSTEM_ACCENT)
+        paintAccent(next);
+    for (const fn of systemListeners)
+        fn();
+}
+/** The device's colour, or undefined where there is none, so the wand swatch stays hidden. */
+export function systemAccent() {
+    return systemColour;
+}
+export function subscribeSystemAccent(fn) {
+    systemListeners.add(fn);
+    return () => systemListeners.delete(fn);
 }
 // The rainbow state belongs to the document, not a component: the sidebar and a
 // list far away in the tree must agree on which colour position three is, so
@@ -285,32 +357,7 @@ function usablePalette(p) {
         return RAINBOW;
     return p;
 }
-/** Black or white, whichever is readable on the given colour. */
-export function contrastOn(hex) {
-    if (!valid(hex))
-        return '#FFFFFF';
-    const { r, g, b } = parse(hex);
-    // Carbon's own ink: on a yellow accent a brown-tinted black reads as a smudge.
-    return luminance(r, g, b) > 0.55 ? '#161616' : '#FFFFFF';
-}
-function valid(hex) {
-    return !!hex && /^#[0-9a-fA-F]{6}$/.test(hex);
-}
-function parse(hex) {
-    const n = parseInt(hex.slice(1), 16);
-    return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
-}
-/**
- * Relative luminance, used to pick black or white on top. The channels are
- * linearised first because raw sRGB overstates blue and understates green.
- */
-function luminance(r, g, b) {
-    const lin = (c) => {
-        const v = c / 255;
-        return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
-    };
-    return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
-}
+/** `accent` is the setting, so the system mode is cached as SYSTEM_ACCENT. */
 export function cacheAppearance(shape, accent, rainbow) {
     try {
         // The conditional spread omits the key under exactOptionalPropertyTypes
@@ -324,7 +371,11 @@ export function cacheAppearance(shape, accent, rainbow) {
 }
 /** Applied at boot, before the app renders anything. */
 export function applyCachedAppearance() {
+    applyOled(storedOled());
     try {
+        const system = localStorage.getItem(storageKey('system-accent')) ?? undefined;
+        if (valid(system))
+            systemColour = system;
         const raw = localStorage.getItem(storageKey('appearance'));
         if (!raw) {
             applyShape(DEFAULT_SHAPE);

package/dist/browserAccent.d.ts

@@ -0,0 +1,12 @@
+/** Whether `AccentColor` carries the system's colour in this browser. */
+export declare function browserAccentWorks(): boolean;
+/** The system's accent as the browser reports it, or undefined where it is no source. */
+export declare function browserAccent(): string | undefined;
+/** A computed `rgb()` or `rgba()` colour as `#RRGGBB`, or undefined for anything else. */
+export declare function cssColourToHex(colour: string): string | undefined;
+/**
+ * Calls `onChange` with the browser's accent now and whenever it has changed
+ * on the window's return, so `watchBrowserAccent(setSystemAccent)` keeps the
+ * system mode current. Returns the function that stops watching.
+ */
+export declare function watchBrowserAccent(onChange: (hex: string | undefined) => void): () => void;

package/dist/browserAccent.js

@@ -0,0 +1,66 @@
+// The browser as a source for the system accent: the CSS system colour
+// `AccentColor`, read off a probe element. An app inside a native shell feeds
+// setSystemAccent from the shell instead (Material You on Android, the desktop
+// accent in a desktop shell); this is for the plain web.
+//
+// Limits, all of them the browser's:
+//   · Firefox and Safari resolve AccentColor to the system's colour. Chromium
+//     resolves it to a fixed colour of its own, whatever the system uses, so
+//     Chrome, Edge, Opera and every other Chromium browser count as no source.
+//   · Where the system has no accent of its own, as on Linux without a theme
+//     that names one or on iOS, the browser answers with its default.
+//   · Firefox with resistFingerprinting answers with a fixed colour too, and
+//     nothing on the page can tell.
+//   · No event fires when the system's accent changes, so the colour is read
+//     again when the window comes back to the front, which is when somebody
+//     returns from the system's settings.
+/** Whether `AccentColor` carries the system's colour in this browser. */
+export function browserAccentWorks() {
+    if (typeof CSS === 'undefined' || !CSS.supports('color', 'AccentColor'))
+        return false;
+    // No word boundary, so a headless Chrome's `HeadlessChrome/` counts as well.
+    return !/Chrom(e|ium)\//.test(navigator.userAgent);
+}
+/** The system's accent as the browser reports it, or undefined where it is no source. */
+export function browserAccent() {
+    if (!browserAccentWorks())
+        return undefined;
+    const probe = document.createElement('span');
+    probe.style.color = 'AccentColor';
+    probe.style.display = 'none';
+    document.documentElement.append(probe);
+    const colour = getComputedStyle(probe).color;
+    probe.remove();
+    return cssColourToHex(colour);
+}
+/** A computed `rgb()` or `rgba()` colour as `#RRGGBB`, or undefined for anything else. */
+export function cssColourToHex(colour) {
+    const m = colour.match(/^rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/);
+    if (!m)
+        return undefined;
+    return '#' + m.slice(1, 4).map((v) => Number(v).toString(16).padStart(2, '0')).join('').toUpperCase();
+}
+/**
+ * Calls `onChange` with the browser's accent now and whenever it has changed
+ * on the window's return, so `watchBrowserAccent(setSystemAccent)` keeps the
+ * system mode current. Returns the function that stops watching.
+ */
+export function watchBrowserAccent(onChange) {
+    let last = browserAccent();
+    onChange(last);
+    const check = () => {
+        if (document.visibilityState === 'hidden')
+            return;
+        const next = browserAccent();
+        if (next === last)
+            return;
+        last = next;
+        onChange(next);
+    };
+    addEventListener('focus', check);
+    document.addEventListener('visibilitychange', check);
+    return () => {
+        removeEventListener('focus', check);
+        document.removeEventListener('visibilitychange', check);
+    };
+}

package/dist/contrast.d.ts

@@ -0,0 +1,26 @@
+/** The ratio body text needs, and the floor of every ink computed here. */
+export declare const MIN_TEXT_CONTRAST = 4.5;
+export declare function validHex(hex: string | undefined): hex is string;
+/** The WCAG contrast ratio of two `#rrggbb` colours, from 1 to 21. */
+export declare function contrastRatio(a: string, b: string): number;
+/**
+ * The ink for text or a glyph on a fill of the given colour: white or Carbon's
+ * near-black, whichever reads better. On the mid-tones where neither reaches
+ * 4.5:1, the near-black goes on toward black until it does, which it always
+ * can.
+ */
+export declare function contrastOn(hex: string): string;
+/**
+ * The accent used as ink on each ramp, where the theme's own derivation in
+ * tokens.css falls short of 4.5:1 on its card. Undefined for a ramp means the
+ * stylesheet's mix holds and nothing needs setting, which is the case for
+ * every preset.
+ *
+ * The light ink starts from the stylesheet's mix toward black and goes on
+ * toward black; the dark ink starts from the accent itself and goes toward
+ * white.
+ */
+export declare function accentInks(hex: string): {
+    light: string | undefined;
+    dark: string | undefined;
+};

package/dist/contrast.js

@@ -0,0 +1,107 @@
+// The contrast arithmetic of WCAG 2, and the inks the colour engine computes
+// with it. Every ink it hands out reaches 4.5:1, the minimum for body text,
+// whatever colour somebody picked or the system supplied.
+/** The ratio body text needs, and the floor of every ink computed here. */
+export const MIN_TEXT_CONTRAST = 4.5;
+// Carbon's own ink: on a yellow accent a brown-tinted black reads as a smudge.
+const DARK_INK = '#161616';
+const WHITE = '#FFFFFF';
+const BLACK = '#000000';
+// The card surface of each ramp in tokens.css, where accent text mostly sits.
+// The presets were measured against these, and OLED's darker card only adds
+// to the dark figure, so the dark ink holds there as well.
+const LIGHT_CARD = '#FFFFFF';
+const DARK_CARD = '#262626';
+// --ink-mix of the light ramp in tokens.css.
+const LIGHT_INK_MIX = 0.55;
+export function validHex(hex) {
+    return !!hex && /^#[0-9a-fA-F]{6}$/.test(hex);
+}
+function rgb(hex) {
+    const n = parseInt(hex.slice(1), 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+function hexOf(c) {
+    return '#' + c.map((v) => Math.round(v).toString(16).padStart(2, '0')).join('').toUpperCase();
+}
+/** `amount` of `to` in `from`, the way color-mix() in srgb mixes. */
+function mix(from, to, amount) {
+    return [0, 1, 2].map((i) => from[i] + (to[i] - from[i]) * amount);
+}
+/**
+ * Relative luminance. The channels are linearised first because raw sRGB
+ * overstates blue and understates green.
+ */
+function luminance(c) {
+    const lin = (v) => {
+        const s = v / 255;
+        return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * lin(c[0]) + 0.7152 * lin(c[1]) + 0.0722 * lin(c[2]);
+}
+function ratio(a, b) {
+    const x = luminance(a);
+    const y = luminance(b);
+    return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
+}
+/** The WCAG contrast ratio of two `#rrggbb` colours, from 1 to 21. */
+export function contrastRatio(a, b) {
+    return ratio(rgb(a), rgb(b));
+}
+/**
+ * `from` moved toward `to` just far enough to reach the minimum against
+ * `ground`, as a hex colour. The ratio only grows on the way, as long as `to`
+ * lies on the far side of `from` from the ground, so halving finds the least
+ * amount that does it.
+ */
+function pushed(from, to, ground) {
+    const reaches = (t) => ratio(mix(from, to, t).map(Math.round), ground) >= MIN_TEXT_CONTRAST;
+    let lo = 0;
+    let hi = 1;
+    for (let i = 0; i < 16; i++) {
+        const mid = (lo + hi) / 2;
+        if (reaches(mid))
+            hi = mid;
+        else
+            lo = mid;
+    }
+    return hexOf(mix(from, to, hi));
+}
+/**
+ * The ink for text or a glyph on a fill of the given colour: white or Carbon's
+ * near-black, whichever reads better. On the mid-tones where neither reaches
+ * 4.5:1, the near-black goes on toward black until it does, which it always
+ * can.
+ */
+export function contrastOn(hex) {
+    if (!validHex(hex))
+        return WHITE;
+    const fill = rgb(hex);
+    const onWhite = ratio(fill, rgb(WHITE));
+    const onDark = ratio(fill, rgb(DARK_INK));
+    if (onWhite > onDark && onWhite >= MIN_TEXT_CONTRAST)
+        return WHITE;
+    if (onDark >= MIN_TEXT_CONTRAST)
+        return DARK_INK;
+    return pushed(rgb(DARK_INK), rgb(BLACK), fill);
+}
+/**
+ * The accent used as ink on each ramp, where the theme's own derivation in
+ * tokens.css falls short of 4.5:1 on its card. Undefined for a ramp means the
+ * stylesheet's mix holds and nothing needs setting, which is the case for
+ * every preset.
+ *
+ * The light ink starts from the stylesheet's mix toward black and goes on
+ * toward black; the dark ink starts from the accent itself and goes toward
+ * white.
+ */
+export function accentInks(hex) {
+    if (!validHex(hex))
+        return { light: undefined, dark: undefined };
+    const accent = rgb(hex);
+    const light = mix(accent, rgb(BLACK), 1 - LIGHT_INK_MIX);
+    return {
+        light: ratio(light, rgb(LIGHT_CARD)) >= MIN_TEXT_CONTRAST ? undefined : pushed(light, rgb(BLACK), rgb(LIGHT_CARD)),
+        dark: ratio(accent, rgb(DARK_CARD)) >= MIN_TEXT_CONTRAST ? undefined : pushed(accent, rgb(WHITE), rgb(DARK_CARD)),
+    };
+}

package/dist/disco.js

@@ -10,7 +10,8 @@
 // hidden mode somebody found on purpose is not a default anybody inherited.
 // The glide itself follows the motion engine: with reduced motion, or at the
 // "off" level, disco steps one colour at a time instead.
-import { applyRainbow, contrastOn, rainbowState, RAINBOW } from './appearance.js';
+import { applyRainbow, rainbowState, RAINBOW } from './appearance.js';
+import { contrastOn } from './contrast.js';
 import { buildLoop, colourAt } from './discoLoop.js';
 /** The walk covers one palette colour's worth of loop every 2.4 seconds, so a
  *  full turn of eight colours takes 19.2 seconds. Stepping, it moves one

package/dist/index.d.ts

@@ -1,11 +1,13 @@
 export * from "./appearance.ts";
 export * from "./appMarks.ts";
 export * from "./badge.ts";
+export * from "./browserAccent.ts";
 export * from "./bubblePosition.ts";
 export * from "./button.ts";
 export * from "./clipboard.ts";
 export * from "./colorNames.ts";
 export * from "./colorPicker.ts";
+export * from "./contrast.ts";
 export * from "./controls.ts";
 export * from "./dialog.ts";
 export * from "./disco.ts";
@@ -30,9 +32,11 @@ export * from "./selector.ts";
 export * from "./selectModel.ts";
 export * from "./selectScroll.ts";
 export * from "./sidebarRow.ts";
+export * from "./signIn.ts";
 export * from "./storage.ts";
 export * from "./tipBubble.ts";
 export * from "./table.ts";
+export * from "./theme.ts";
 export * from "./toastEngine.ts";
 export * from "./tooltip.ts";
 export * from "./tree.ts";

package/dist/index.js

@@ -1,11 +1,13 @@
 export * from "./appearance.js";
 export * from "./appMarks.js";
 export * from "./badge.js";
+export * from "./browserAccent.js";
 export * from "./bubblePosition.js";
 export * from "./button.js";
 export * from "./clipboard.js";
 export * from "./colorNames.js";
 export * from "./colorPicker.js";
+export * from "./contrast.js";
 export * from "./controls.js";
 export * from "./dialog.js";
 export * from "./disco.js";
@@ -30,9 +32,11 @@ export * from "./selector.js";
 export * from "./selectModel.js";
 export * from "./selectScroll.js";
 export * from "./sidebarRow.js";
+export * from "./signIn.js";
 export * from "./storage.js";
 export * from "./tipBubble.js";
 export * from "./table.js";
+export * from "./theme.js";
 export * from "./toastEngine.js";
 export * from "./tooltip.js";
 export * from "./tree.js";

package/dist/signIn.d.ts

@@ -0,0 +1,136 @@
+/** The card's words, translated by the app. */
+export interface SignInText {
+    password: string;
+    signIn: string;
+    /** The bubble on Sign in while it works. */
+    signingIn: string;
+    passkey: string;
+    /** "Forgot password?", with the question mark. */
+    forgot: string;
+    /** The label of the second step's code field. */
+    code: string;
+    /** The line under the code field, such as where the code comes from. */
+    codeHint: string;
+    /** Said when the app refuses a code without a reason of its own. */
+    codeInvalid: string;
+    back: string;
+    /** The label of the reset form's code field. */
+    resetCode: string;
+    /** The (i) beside it: where the log is, how long the code lasts, what a reset removes. */
+    resetCodeTip: string;
+    newPassword: string;
+    confirmPassword: string;
+    setPassword: string;
+    /** The bubble on Set password while it works. */
+    saving: string;
+    mismatch: string;
+    /** Says how many characters a new password needs, with the number filled in. */
+    tooShort: string;
+    /** Said when the app refuses the code from the log. */
+    resetRejected: string;
+    /** Said when a callback throws or answers without a reason. */
+    failed: string;
+    /** The reveal eye's name while the secret is hidden, and once it shows. */
+    show: string;
+    hide: string;
+}
+/** English words, for an app in English and for the demos. */
+export declare const signInTextEn: SignInText;
+/**
+ * What the app answers to a sign-in or a passkey. `ok` means the card's part is
+ * done: the app signs in or shows a step of its own. `needCode` asks for the
+ * second step, and `error` is said above Sign in.
+ */
+export interface SignInAnswer {
+    ok?: boolean;
+    needCode?: boolean;
+    error?: string;
+}
+/** What the app answers to asking for a reset code or to setting the password. `rejected` means the code from the log was refused. */
+export interface ResetAnswer {
+    ok?: boolean;
+    rejected?: boolean;
+    error?: string;
+}
+export interface SignInHandlers {
+    /** `code` is set once the app asked for one, and `passkey` when a passkey started the sign-in. */
+    onSignIn: (input: {
+        password: string;
+        code?: string;
+        passkey: boolean;
+    }) => Promise<SignInAnswer>;
+    /** An empty answer leaves the card as it was, for a prompt the person closed. */
+    onPasskey?: () => Promise<SignInAnswer>;
+    /** Writes a code to the log. The reset form shows only once this answers ok. */
+    onAskCode?: () => Promise<ResetAnswer>;
+    onSetPassword?: (input: {
+        code: string;
+        password: string;
+    }) => Promise<ResetAnswer>;
+}
+export type SignInField = "password" | "code" | "resetCode" | "newPassword" | "confirm";
+/** The card's buttons, by their `data-signin` hook. */
+export type SignInButton = "submit" | "set-password" | "passkey" | "forgot";
+/**
+ * The last refused step: the button that shakes and the field that takes the
+ * focus with its content selected. `count` grows with every refusal, so the
+ * same refusal twice still shakes twice.
+ */
+export interface SignInRefusal {
+    button: SignInButton;
+    field: SignInField | null;
+    count: number;
+}
+export interface SignInState {
+    view: "signIn" | "reset";
+    password: string;
+    code: string;
+    needCode: boolean;
+    /** A passkey started this sign-in, so the code goes without the password. */
+    viaPasskey: boolean;
+    resetCode: string;
+    newPassword: string;
+    confirm: string;
+    error: string | null;
+    refusal: SignInRefusal | null;
+    busy: "signIn" | "passkey" | "askCode" | "setPassword" | null;
+}
+export interface SignInOptions extends SignInHandlers {
+    text: SignInText;
+    /** The shortest new password the reset form takes. */
+    minPassword: number;
+}
+export interface SignInFlow {
+    state(): SignInState;
+    subscribe(listener: () => void): () => void;
+    set(field: SignInField, value: string): void;
+    submit(): Promise<void>;
+    passkey(): Promise<void>;
+    forgot(): Promise<void>;
+    back(): void;
+}
+/**
+ * The flow behind one card. `options` is read at every step, so a framework
+ * hands in its current props rather than the ones the card was made with.
+ */
+export declare function createSignInFlow(options: () => SignInOptions): SignInFlow;
+/** Sign in waits for the password, and in the second step for the code. */
+export declare function signInBlocked(s: SignInState): boolean;
+/** Set password waits for the code from the log and a new password. */
+export declare function resetBlocked(s: SignInState): boolean;
+/**
+ * Which form shows, as a key that changes whenever the focus should move to
+ * the first empty field of the new form.
+ */
+export declare function signInStage(s: SignInState): string;
+/**
+ * Puts the focus in the first empty field inside `root`, or in its first field
+ * when all hold something, such as a name the app filled in.
+ */
+export declare function focusFirstField(root: HTMLElement | null): void;
+/**
+ * Answers a refusal on screen: the button shakes once (`glim-shake`, which the
+ * motion engine stills) and the field takes the focus with its content
+ * selected, so the next try starts by typing. Returns the shake's cleanup.
+ */
+export declare function showRefusal(root: HTMLElement | null, refusal: SignInRefusal): () => void;

package/dist/signIn.js

@@ -0,0 +1,225 @@
+// The sign-in card's flow without a framework (docs/design-language.md, "The
+// sign-in card"). The app answers each step through a callback, the flow keeps
+// what was typed and which form shows, and the React and Vue cards draw it.
+import { shake } from "./selectModel.js";
+/** English words, for an app in English and for the demos. */
+export const signInTextEn = {
+    password: "Password",
+    signIn: "Sign in",
+    signingIn: "Signing in…",
+    passkey: "Sign in with a passkey",
+    forgot: "Forgot password?",
+    code: "Code",
+    codeHint: "Six digits from your authenticator app, or one of your recovery codes.",
+    codeInvalid: "That code is not valid.",
+    back: "Back",
+    resetCode: "Code from the container log",
+    resetCodeTip: "The app has written a code to its container log. On Unraid: Docker tab, the app's icon, Logs. A code is valid for 10 minutes.",
+    newPassword: "New password",
+    confirmPassword: "Confirm password",
+    setPassword: "Set password",
+    saving: "Saving…",
+    mismatch: "The two passwords are not the same.",
+    tooShort: "The new password needs at least 12 characters.",
+    resetRejected: "That code is wrong or has expired. If it expired, the log now shows a new one.",
+    failed: "That did not work. Please try again.",
+    show: "Show",
+    hide: "Hide",
+};
+const START = {
+    view: "signIn",
+    password: "",
+    code: "",
+    needCode: false,
+    viaPasskey: false,
+    resetCode: "",
+    newPassword: "",
+    confirm: "",
+    error: null,
+    refusal: null,
+    busy: null,
+};
+const BUTTON_OF = {
+    signIn: "submit",
+    setPassword: "set-password",
+    passkey: "passkey",
+    askCode: "forgot",
+};
+/**
+ * The flow behind one card. `options` is read at every step, so a framework
+ * hands in its current props rather than the ones the card was made with.
+ */
+export function createSignInFlow(options) {
+    let state = START;
+    const listeners = new Set();
+    const update = (change) => {
+        state = { ...state, ...change };
+        listeners.forEach((fn) => fn());
+    };
+    // A refusal during a step waits for the step to end: the busy button wears a
+    // bubble that wraps it, and the shake has to land on the button that stays.
+    let pending = {};
+    const refuse = (error, button, field = null) => {
+        const change = { error, refusal: { button, field, count: (state.refusal?.count ?? 0) + 1 } };
+        if (state.busy)
+            pending = change;
+        else
+            update(change);
+    };
+    async function run(busy, work) {
+        if (state.busy)
+            return;
+        update({ busy, error: null });
+        pending = {};
+        try {
+            await work();
+        }
+        catch {
+            refuse(options().text.failed, BUTTON_OF[busy]);
+        }
+        finally {
+            update({ busy: null, ...pending });
+        }
+    }
+    async function signIn() {
+        if (signInBlocked(state))
+            return;
+        const { text, onSignIn } = options();
+        return run("signIn", async () => {
+            const tried = state.needCode;
+            const res = await onSignIn({
+                password: state.viaPasskey ? "" : state.password,
+                code: tried ? state.code.trim() : undefined,
+                passkey: state.viaPasskey,
+            });
+            if (res.ok)
+                return;
+            if (res.needCode) {
+                // The first request for a code only opens the field.
+                update({ needCode: true, code: "" });
+                if (tried)
+                    refuse(res.error ?? text.codeInvalid, "submit", "code");
+                return;
+            }
+            // A passkey's sign-in that ended starts over with the password.
+            if (state.viaPasskey)
+                update({ viaPasskey: false, needCode: false, code: "" });
+            refuse(res.error ?? text.failed, "submit", state.needCode ? "code" : "password");
+        });
+    }
+    async function setPassword() {
+        const { text, minPassword, onSetPassword, onAskCode } = options();
+        if (resetBlocked(state) || !onSetPassword)
+            return;
+        if (state.newPassword !== state.confirm)
+            return refuse(text.mismatch, "set-password", "confirm");
+        if ([...state.newPassword].length < minPassword)
+            return refuse(text.tooShort, "set-password", "newPassword");
+        return run("setPassword", async () => {
+            const res = await onSetPassword({ code: state.resetCode.trim(), password: state.newPassword });
+            if (res.ok)
+                return;
+            if (res.rejected) {
+                // The answer does not say whether the code expired, and the sentence
+                // promises a new one in that case. Asking writes one only when none is live.
+                await onAskCode?.().catch(() => undefined);
+                refuse(text.resetRejected, "set-password", "resetCode");
+                return;
+            }
+            refuse(res.error ?? text.failed, "set-password", "resetCode");
+        });
+    }
+    return {
+        state: () => state,
+        subscribe(listener) {
+            listeners.add(listener);
+            return () => listeners.delete(listener);
+        },
+        set(field, value) {
+            update({ [field]: value });
+        },
+        submit: () => (state.view === "reset" ? setPassword() : signIn()),
+        async passkey() {
+            const { onPasskey } = options();
+            if (!onPasskey)
+                return;
+            return run("passkey", async () => {
+                const res = await onPasskey();
+                if (res.ok)
+                    return;
+                if (res.needCode)
+                    update({ viaPasskey: true, needCode: true, code: "" });
+                else if (res.error !== undefined)
+                    refuse(res.error, "passkey");
+            });
+        },
+        async forgot() {
+            const { text, onAskCode } = options();
+            if (!onAskCode)
+                return;
+            return run("askCode", async () => {
+                const res = await onAskCode();
+                if (res.ok)
+                    update({ view: "reset", resetCode: "", newPassword: "", confirm: "" });
+                else
+                    refuse(res.error ?? text.failed, "forgot");
+            });
+        },
+        back() {
+            if (state.busy)
+                return;
+            update({ view: "signIn", needCode: false, viaPasskey: false, code: "", error: null });
+        },
+    };
+}
+/** Sign in waits for the password, and in the second step for the code. */
+export function signInBlocked(s) {
+    if (s.busy)
+        return true;
+    if (s.needCode)
+        return s.code.trim() === "";
+    return s.password === "";
+}
+/** Set password waits for the code from the log and a new password. */
+export function resetBlocked(s) {
+    return !!s.busy || s.resetCode.trim() === "" || s.newPassword === "";
+}
+/**
+ * Which form shows, as a key that changes whenever the focus should move to
+ * the first empty field of the new form.
+ */
+export function signInStage(s) {
+    return `${s.view}:${s.needCode}:${s.viaPasskey}`;
+}
+// Walks up rather than reading the layout, which a page without one, such as a test's, does not have.
+function shown(el) {
+    for (let e = el; e; e = e.parentElement)
+        if (getComputedStyle(e).display === "none")
+            return false;
+    return true;
+}
+const FIELDS = 'input:not([type="hidden"], [type="checkbox"], [type="radio"], :disabled), textarea:not(:disabled)';
+/**
+ * Puts the focus in the first empty field inside `root`, or in its first field
+ * when all hold something, such as a name the app filled in.
+ */
+export function focusFirstField(root) {
+    if (!root)
+        return;
+    const fields = [...root.querySelectorAll(FIELDS)].filter(shown);
+    (fields.find((f) => f.value === "") ?? fields[0])?.focus({ preventScroll: true });
+}
+/**
+ * Answers a refusal on screen: the button shakes once (`glim-shake`, which the
+ * motion engine stills) and the field takes the focus with its content
+ * selected, so the next try starts by typing. Returns the shake's cleanup.
+ */
+export function showRefusal(root, refusal) {
+    const field = refusal.field && root?.querySelector(`[data-signin-field="${refusal.field}"]`);
+    if (field) {
+        field.focus({ preventScroll: true });
+        field.select();
+    }
+    const button = root?.querySelector(`[data-signin="${refusal.button}"]`);
+    return button ? shake(button) : () => { };
+}

package/dist/theme.d.ts

@@ -0,0 +1,14 @@
+/** Whether the dark ramp shows for a `data-theme` value and the system's preference. */
+export declare function resolvesDark(theme: string | null | undefined, systemDark: boolean): boolean;
+/** Whether the dark ramp is showing now, by choice or because the system is dark. */
+export declare function darkShowing(): boolean;
+/**
+ * Calls `fn` whenever the dark ramp starts or stops showing, through a theme
+ * choice or the system, so a settings page can say whether OLED is in effect.
+ * Returns the function that stops watching.
+ */
+export declare function watchDarkShowing(fn: (dark: boolean) => void): () => void;
+/** Turns OLED on or off and remembers it on this device. */
+export declare function applyOled(on: boolean): void;
+/** Whether OLED is on for this device. */
+export declare function storedOled(): boolean;

package/dist/theme.js

@@ -0,0 +1,71 @@
+// Which ramp is showing, and the OLED variant of the dark one. The theme
+// itself is `data-theme` on <html>, `light`, `dark` or unset for the system.
+// OLED is `data-oled` on <html>, present or absent; tokens.css applies it only
+// while the dark ramp shows, so it can stay on through a switch to light.
+//
+// OLED belongs to the screen, not the person, so it is kept on the device and
+// never with settings a server syncs: the same account may sign in on an LCD
+// laptop.
+import { storageKey } from './storage.js';
+const SYSTEM_DARK = '(prefers-color-scheme: dark)';
+/** Whether the dark ramp shows for a `data-theme` value and the system's preference. */
+export function resolvesDark(theme, systemDark) {
+    if (theme === 'dark')
+        return true;
+    if (theme === 'light')
+        return false;
+    return systemDark;
+}
+/** Whether the dark ramp is showing now, by choice or because the system is dark. */
+export function darkShowing() {
+    return resolvesDark(document.documentElement.getAttribute('data-theme'), matchMedia(SYSTEM_DARK).matches);
+}
+/**
+ * Calls `fn` whenever the dark ramp starts or stops showing, through a theme
+ * choice or the system, so a settings page can say whether OLED is in effect.
+ * Returns the function that stops watching.
+ */
+export function watchDarkShowing(fn) {
+    let last = darkShowing();
+    const check = () => {
+        const next = darkShowing();
+        if (next === last)
+            return;
+        last = next;
+        fn(next);
+    };
+    const media = matchMedia(SYSTEM_DARK);
+    media.addEventListener('change', check);
+    const observer = new MutationObserver(check);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+    return () => {
+        media.removeEventListener('change', check);
+        observer.disconnect();
+    };
+}
+/** Turns OLED on or off and remembers it on this device. */
+export function applyOled(on) {
+    const root = document.documentElement;
+    if (on)
+        root.setAttribute('data-oled', '');
+    else
+        root.removeAttribute('data-oled');
+    try {
+        if (on)
+            localStorage.setItem(storageKey('oled'), '1');
+        else
+            localStorage.removeItem(storageKey('oled'));
+    }
+    catch {
+        // The switch still holds until the page closes.
+    }
+}
+/** Whether OLED is on for this device. */
+export function storedOled() {
+    try {
+        return localStorage.getItem(storageKey('oled')) === '1';
+    }
+    catch {
+        return false;
+    }
+}

package/dist/version.d.ts

@@ -2,4 +2,4 @@
  * The version every GlimStone package carries, so an app's Version card names
  * the one it runs. All packages share it and move together.
  */
-export declare const GLIMSTONE_VERSION = "4.1.2";
+export declare const GLIMSTONE_VERSION = "4.2.2";

package/dist/version.js

@@ -2,4 +2,4 @@
  * The version every GlimStone package carries, so an app's Version card names
  * the one it runs. All packages share it and move together.
  */
-export const GLIMSTONE_VERSION = "4.1.2";
+export const GLIMSTONE_VERSION = "4.2.2";

package/glyph-map.md

@@ -228,6 +228,7 @@ ArrowLoop drew the glyphs for the segments of its Design, Corners and Motion sel
 | Row height selector, Compact | `IconRowCompact` | none | none | `IconRowCompact`, standard |
 | Row height selector, Medium | `IconRowMedium` | none | none | `IconRowMedium`, standard |
 | Row height selector, Comfortable | `IconRowComfortable` | none | none | `IconRowComfortable`, standard |
+| Accent row, the swatch that takes the system's colour | `IconAccentSystem` | none | none | none |
 
 <br>
 

package/glyphs.json

@@ -1234,6 +1234,19 @@
   ],
   "svg": "<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M0 3A1.2 1.2 0 0 1 1.2 1.8H12.8A1.2 1.2 0 0 1 12.8 4.2H1.2A1.2 1.2 0 0 1 0 3ZM0 11A1.2 1.2 0 0 1 1.2 9.8H12.8A1.2 1.2 0 0 1 12.8 12.2H1.2A1.2 1.2 0 0 1 0 11Z\" />"
  },
+ {
+  "name": "IconAccentSystem",
+  "means": "The accent takes the system's colour",
+  "source": "Drawn for GlimStone",
+  "viewBox": "0.5 0.5 13 13",
+  "ink": [
+   0.5,
+   0.5,
+   13,
+   13
+  ],
+  "svg": "<path fill=\"currentColor\" d=\"M0.793 11.793L6.893 5.693A1 1 0 0 1 8.307 7.107L2.207 13.207A1 1 0 0 1 0.793 11.793ZM10.5 0.5Q11 3 13.5 3.5Q11 4 10.5 6.5Q10 4 7.5 3.5Q10 3 10.5 0.5ZM3.75 2.25Q4.1 3.65 5.5 4Q4.1 4.35 3.75 5.75Q3.4 4.35 2 4Q3.4 3.65 3.75 2.25ZM11 9Q11.35 10.4 12.75 10.75Q11.35 11.1 11 12.5Q10.65 11.1 9.25 10.75Q10.65 10.4 11 9Z\"></path>"
+ },
  {
   "name": "IconGear",
   "means": "Settings, open a setting",

package/glyphs.md

@@ -259,7 +259,7 @@ A file manager tells a file's kind by its glyph before its name is read, so thes
 | `IconDiagnostics` | Diagnostics | Streamline `programming/bug.svg` |
 | `IconKeyboard` | Keyboard shortcuts | Streamline `computer-devices/keyboard.svg` |
 
-### Look settings, the segments of the Design, Corners, Motion, Labels and Row height selectors
+### Look settings, the segments of the Design, Corners, Motion, Labels and Row height selectors, and the system accent swatch
 
 | Name | Means | Source |
 | --- | --- | --- |
@@ -279,8 +279,9 @@ A file manager tells a file's kind by its glyph before its name is read, so thes
 | `IconRowCompact` | Compact rows | Drawn for GlimStone |
 | `IconRowMedium` | Medium rows | Drawn for GlimStone |
 | `IconRowComfortable` | Comfortable rows | Drawn for GlimStone |
+| `IconAccentSystem` | The accent takes the system's colour | Drawn for GlimStone |
 
-The Design selector's Dark and Light segments wear `IconMoon` and `IconSun` from the actions above, and System wears `IconThemeSystem`, a ring with one half filled. Each corner glyph is a frame drawn with the corners it names, so the four read as one family whatever corners the selector around them has. The motion glyphs are one line that swings further at each level, just as a level is the same animation with bigger numbers. `IconCornerLeaf` and `IconMotionStorm` belong to the hidden shape and the hidden level and stand only where the selector offers those. The four label glyphs draw a choice with a disc for the glyph and bars for the words: three bars for Text, a small disc before two bars for Text and glyph, a large disc alone for Glyph, and for Reactive a disc with a pointer arrow at its corner, since that mode opens the words under the pointer. The row glyphs are bars across the full width at three spacings, four close ones for Compact, three for Medium and two far apart for Comfortable. Only the gap between the bars sets the three apart.
+The Design selector's Dark and Light segments wear `IconMoon` and `IconSun` from the actions above, and System wears `IconThemeSystem`, a ring with one half filled. Each corner glyph is a frame drawn with the corners it names, so the four read as one family whatever corners the selector around them has. The motion glyphs are one line that swings further at each level, just as a level is the same animation with bigger numbers. `IconCornerLeaf` and `IconMotionStorm` belong to the hidden shape and the hidden level and stand only where the selector offers those. The four label glyphs draw a choice with a disc for the glyph and bars for the words: three bars for Text, a small disc before two bars for Text and glyph, a large disc alone for Glyph, and for Reactive a disc with a pointer arrow at its corner, since that mode opens the words under the pointer. The row glyphs are bars across the full width at three spacings, four close ones for Compact, three for Medium and two far apart for Comfortable. Only the gap between the bars sets the three apart. `IconAccentSystem` stands on the swatch before the accent presets that takes the colour from the device: a wand with a large spark at its tip and two small ones beside it.
 
 **`IconGrip` is two columns of three dots**, the handle TowerTorch and KnightLoader each drew for a row that drags.
 
@@ -288,7 +289,7 @@ The Design selector's Dark and Light segments wear `IconMoon` and `IconSun` from
 
 **Taking something away draws a slash through it.** `IconEyeOff`, `IconKeyRevoke`, `IconShieldOff` and `IconUnlink` are an eye, a key, a shield and a chain link with one bar from the top left to the bottom right, so the undoing reads the same on every one of them.
 
-**Close meanings wear different drawings.** `IconRetry` tries again, reloads or refreshes, and `IconRefresh` goes back to the default whatever its name says. `IconResetArrow` does the same for one row inside a colour card, where a full-size reset beside the swatches would read as resetting the card. `IconQueued` waits its turn, and `IconHourglass` marks a file that is a backup copy or not finished yet. `IconUpload` and `IconDownload` move a file to or from somewhere else, while `IconImport` and `IconExport` read a list or settings in and write them out. `IconCheck` marks a test and the success it reports, and `IconConfirm` is a person agreeing: Done, Confirm, Got it. `IconApply` takes something over in place of what was there, which is not saving. `IconCompressAuto` marks anything the app chooses by itself, the compression as well as the order of the providers, and keeps its name for the apps that generate from this list. `IconSync` checks for an update and fetches it, and `IconUpdate` marks an updates tab or section, where its cloud has room to read. The check answers with `IconUpToDate` when there was none to fetch, the cloud with a tick, and with `IconUpdateAvailable` when there is. `IconMoon` is the dark look and nothing else; a disk spinning down, a machine going to rest and a VM put into hibernation wear `IconSleep`.
+**Close meanings wear different drawings.** `IconRetry` tries again, reloads or refreshes, and `IconRefresh` goes back to the default whatever its name says. `IconResetArrow` does the same for one row inside a colour card, where a full-size reset beside the swatches would read as resetting the card. `IconQueued` waits its turn, and `IconHourglass` marks a file that is a backup copy or not finished yet. `IconUpload` and `IconDownload` move a file to or from somewhere else, while `IconImport` and `IconExport` read a list or settings in and write them out. `IconCheck` marks a test and the success it reports, and `IconConfirm` is a person agreeing: Done, Confirm, Got it. `IconApply` takes something over in place of what was there, which is not saving. `IconCompressAuto` marks anything the app chooses by itself, the compression as well as the order of the providers, and keeps its name for the apps that generate from this list. Its wand and spark are Streamline's, and `IconAccentSystem` draws its own with three sparks, since taking the device's colour is a different meaning. `IconSync` checks for an update and fetches it, and `IconUpdate` marks an updates tab or section, where its cloud has room to read. The check answers with `IconUpToDate` when there was none to fetch, the cloud with a tick, and with `IconUpdateAvailable` when there is. `IconMoon` is the dark look and nothing else; a disk spinning down, a machine going to rest and a VM put into hibernation wear `IconSleep`.
 
 **A brand mark is the brand's own and goes only where it is meant.** `IconCoffee` is Buy Me a Coffee's mark and stands only on the button that leads there, and `IconCaptcha` is reCAPTCHA's mark and stands only where a captcha is the subject. `IconPayPal` and `IconBitcoin` stand only on the buttons that open the PayPal and the crypto window. `IconContainers` and `IconGithub` follow the same rule (section 1).
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glimstone/core",
-  "version": "4.1.2",
+  "version": "4.2.2",
   "description": "GlimStone's tokens, glyphs and engines, without a framework",
   "license": "AGPL-3.0-only",
   "repository": { "type": "git", "url": "git+https://github.com/junkerderprovinz/glimstone.git", "directory": "packages/core" },

package/tokens.css

@@ -154,11 +154,13 @@
      the same colour and the light theme is where they part, so use this rather
      than --accent whenever the colour is read.
 
-     The theme sets only --ink-mix, which <html> passes down, so the one-line
-     mix is right in both themes and the rainbow blocks need no light twin.
-     100% of a colour mixed with black is that colour. */
+     The theme sets --ink-mix, which <html> passes down, so the one-line mix
+     is right in both themes and the rainbow blocks need no light twin. 100% of
+     a colour mixed with black is that colour. An accent the mix leaves under
+     4.5:1 on a ramp's card gets that ramp's ink from applyAccent instead, as
+     --accent-ink-dark or --accent-ink-light; no preset needs one. */
   --ink-mix:           100%;
-  --accent-ink:        color-mix(in srgb, var(--accent) var(--ink-mix), black);
+  --accent-ink:        var(--accent-ink-dark, color-mix(in srgb, var(--accent) var(--ink-mix), black));
   /* The same ink for a line-drawn glyph. Rainbow never colours text, so a hued
      subtree redefines this one and leaves --accent-ink on the single accent. */
   --accent-glyph:      var(--accent-ink);
@@ -240,6 +242,7 @@
     --accent-contrast:   #161616;
     --accent-soft:       rgba(252, 196, 25, 0.14);
     --ink-mix:           55%;
+    --accent-ink:        var(--accent-ink-light, color-mix(in srgb, var(--accent) var(--ink-mix), black));
 
     --status-info-text:    #8E6A00;
     --status-info-bg:      rgba(142, 106, 0, 0.12);
@@ -313,6 +316,7 @@
   --accent-contrast:   #161616;
   --accent-soft:       rgba(252, 196, 25, 0.14);
   --ink-mix:           55%;
+  --accent-ink:        var(--accent-ink-light, color-mix(in srgb, var(--accent) var(--ink-mix), black));
 
   --status-info-text:    #8E6A00;
   --status-info-bg:      rgba(142, 106, 0, 0.12);
@@ -342,6 +346,51 @@
   --focus-ring: rgba(142, 106, 0, .5);
 }
 
+/* OLED, the dark ramp on true black for OLED and AMOLED screens (rule 43).
+   `data-oled` on <html> asks for it and counts only while the dark ramp shows,
+   chosen or from the system, so the two selectors below follow the two ways a
+   page goes dark. The surfaces move one Carbon step down and keep their order,
+   so every rule that names a step still lands on the step it meant. The hover
+   keeps its place between the card and surface2, and hover-raised is the step
+   above surface3, as on the dark ramp. The text ramp, the accent and the state
+   hues stay: they were measured on darker grounds than they get here.
+
+   A shadow on black is invisible, so the elevation becomes a ring in the
+   border colour. The switch track stays at #525252 rather than following
+   surface3 down, where it would fall to 1.6:1 on the card. The opaque warning
+   chip stands further from a #161616 card than from a #262626 one, and the
+   hairline and the scrim lose nothing on black, so they stay as well. A lit
+   brand tile in a near-black colour, such as GitHub's, would vanish into the
+   card, so --tile-edge rings every lit tile. */
+[data-theme="dark"][data-oled] {
+  --carbon-bg:         #000000;
+  --carbon-sidebar:    #161616;
+  --carbon-surface:    #161616;
+  --carbon-surface2:   #262626;
+  --carbon-surface3:   #393939;
+  --carbon-hover:      #232323;
+  --carbon-hover-raised: #525252;
+  --carbon-border:     #262626;
+  --elevation: 0 0 0 1px #262626;
+  --tile-edge: rgba(255, 255, 255, .2);
+}
+
+/* The same values for the system's dark, with no light theme chosen. */
+@media (prefers-color-scheme: dark) {
+  :root[data-oled]:not([data-theme="light"]) {
+    --carbon-bg:         #000000;
+    --carbon-sidebar:    #161616;
+    --carbon-surface:    #161616;
+    --carbon-surface2:   #262626;
+    --carbon-surface3:   #393939;
+    --carbon-hover:      #232323;
+    --carbon-hover-raised: #525252;
+    --carbon-border:     #262626;
+    --elevation: 0 0 0 1px #262626;
+    --tile-edge: rgba(255, 255, 255, .2);
+  }
+}
+
 /* The hover step of a filled tone that has no surface ramp of its own (rule
    21): the fill mixed toward the theme's text colour, which is lighter on dark
    and darker on light, the direction the ramp moves. 15% is about one step of
@@ -913,10 +962,13 @@ body {
       glim-page-in var(--motion-page-dur) var(--motion-page-ease) both,
       glim-fade-in var(--motion-page-dur) ease-out both;
   }
+  /* Backwards, not both: a held end is an identity matrix rather than none,
+     and any transform makes the card the containing block of a fixed element
+     inside it. */
   .glim-toast {
     animation:
-      glim-toast-in var(--motion-toast-dur) var(--motion-toast-ease, var(--motion-page-ease)) both,
-      glim-fade-in var(--motion-toast-dur) ease-out both;
+      glim-toast-in var(--motion-toast-dur) var(--motion-toast-ease, var(--motion-page-ease)) backwards,
+      glim-fade-in var(--motion-toast-dur) ease-out backwards;
   }
   .glim-live { animation: glim-pulse var(--motion-pulse-dur) ease-in-out infinite; }
   /* Short, because the pointer is already waiting for the bubble. */
@@ -1188,7 +1240,7 @@ body {
    state is hidden. */
 @media (prefers-reduced-motion: reduce) {
   :root:not([data-motion='storm']) .glim-page-enter { animation: glim-fade-in 180ms ease both; }
-  :root:not([data-motion='storm']) .glim-toast { animation: glim-fade-in 160ms ease both; }
+  :root:not([data-motion='storm']) .glim-toast { animation: glim-fade-in 160ms ease backwards; }
   /* An infinite animation stops outright, fully opaque, so "this is live"
      reads from colour and position. Storm is not exempt here: wanting more
      movement is not wanting something that never stops. */
@@ -1203,8 +1255,8 @@ body {
   }
   :root[data-motion='storm'] .glim-toast {
     animation:
-      glim-toast-in var(--motion-toast-dur) var(--motion-toast-ease, var(--motion-page-ease)) both,
-      glim-fade-in var(--motion-toast-dur) ease-out both;
+      glim-toast-in var(--motion-toast-dur) var(--motion-toast-ease, var(--motion-page-ease)) backwards,
+      glim-fade-in var(--motion-toast-dur) ease-out backwards;
   }
   :root[data-motion='storm'] .glim-shake { animation: glim-shake var(--motion-shake-dur) ease-in-out; }
 }
@@ -2016,6 +2068,7 @@ body {
   .group:hover > .glim-brand-tile {
     background-color: var(--tile);
     color: var(--tile-ink);
+    box-shadow: inset 0 0 0 1px var(--tile-edge, transparent);
     --mark-ink: var(--tile-ink);
     --mark-cut: var(--tile);
     --brand-android: var(--tile-ink);
@@ -3180,6 +3233,96 @@ body {
     font-weight: inherit;
   }
 
+  /* The sign-in page (SignInCard): one card in the middle of the screen, the
+     same width in every app, and the full width less the gutter on a phone. */
+  .glim-signin {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100dvh;
+    padding: 1rem;
+    background-color: var(--carbon-bg);
+    color: var(--carbon-text);
+  }
+  .glim-signin-card {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    width: min(24rem, 100%);
+    padding: 2rem;
+  }
+  .glim-signin-head {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+  }
+  .glim-signin-logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 4rem;
+    height: 4rem;
+  }
+  .glim-signin-logo > :is(img, svg) {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+  .glim-signin-name {
+    margin: 0;
+    font-size: var(--text-status);
+    font-weight: 600;
+    line-height: 1.2;
+    text-align: center;
+    overflow-wrap: anywhere;
+  }
+  .glim-signin-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin: 0;
+  }
+  /* Every button as wide as the fields, also one a bubble wraps while disabled. */
+  .glim-signin-form > :is(.glim-btn, .glim-tip-wrap),
+  .glim-signin-form > .glim-tip-wrap > .glim-btn { width: 100%; }
+  .glim-signin-form p { margin: 0; }
+  .glim-signin-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+  .glim-signin-field[hidden] { display: none; }
+  .glim-signin-label {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    color: var(--carbon-text-sub);
+    font-size: var(--text-meta);
+    font-weight: 500;
+  }
+  .glim-signin-hint {
+    color: var(--carbon-text-sub);
+    font-size: var(--text-meta);
+  }
+  .glim-signin-error {
+    color: var(--status-fail-text);
+    font-size: var(--text-meta);
+  }
+  .glim-signin-note {
+    padding: 0.6rem 0.8rem;
+    border-radius: var(--radius-control);
+    background-color: var(--carbon-surface2);
+    font-size: var(--text-subline);
+  }
+  .glim-signin-code { letter-spacing: 0.35em; }
+  .glim-signin-log-code,
+  .glim-signin-log-code::placeholder {
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+  }
+
   /* What stands in place of a control the environment forbids
      (UnavailableNotice). A paragraph, because there is no control to hang an
      info bubble off. */
@@ -3436,7 +3579,9 @@ body {
     margin: 0;
     text-wrap: pretty;
     font-size: 0.875rem;
-    line-height: 1.375;
+    /* Whole pixels per line, or every toast stacked beside this one lands on a
+       fraction and Chromium rounds its edges differently from paint to paint. */
+    line-height: 1.25rem;
     overflow-wrap: break-word;
   }
   /* A phone keeps the window in view: the newest two across its width. */