@wtfalch/design 0.1.0 → 0.3.0

package/dist/products/tf.js

@@ -0,0 +1,104 @@
+/**
+ * tf's themes: the three the package shipped with, and the ones the gallery
+ * was photographed in first.
+ *
+ * `system` is a theme, not a mode. A `prefers-color-scheme` block that
+ * overrides `:root` unconditionally means choosing a dark theme on a
+ * light-mode laptop gets silently repainted; that media query is scoped to
+ * this theme in `base.css`, so following the OS is a choice among the others
+ * rather than a rule above them.
+ */
+export const system = {
+    name: 'System',
+    note: 'Follows your OS between light and dark',
+    scheme: 'dark',
+    // Empty on purpose: this is the one theme that must *not* state a palette,
+    // because the `prefers-color-scheme` block is scoped to it and needs the
+    // base values to fall through. Its swatch is a special case.
+    tokens: {},
+};
+/**
+ * The dark palette, written out rather than inherited.
+ *
+ * `night` was `tokens: {}` once, "whatever the base is", and that was wrong
+ * twice over. It made the theme depend on a file it does not own, and it made
+ * its swatch in the picker preview *the theme currently applied*, because an
+ * empty map falls back to the live values.
+ */
+const NIGHT = {
+    '--bg': '#0f1115',
+    '--panel': '#161a21',
+    '--panel-2': '#1c222b',
+    '--border': '#262d38',
+    '--text': '#e6e9ef',
+    '--muted': '#8b94a4',
+    '--accent': '#5b9dff',
+    '--accent-dim': '#2a4877',
+    /* No `--on-accent` here on purpose, so it inherits the base near-black.
+       Night used to set `#ffffff`, which is 2.72:1 on this accent -- the exact
+       pair `tokens.css` records as the reason the token exists at all. The base
+       was fixed and the theme carrying the old palette was never revisited, so
+       the primary button in the app's fixed dark theme failed the body-text
+       minimum by a wide margin for as long as the token had been "fixed".
+       `#06181a` on `#5b9dff` is 6.69:1. Found by the contrast scan, which is the
+       argument for shipping the measurement rather than the rule. */
+    '--app-bg': '#0f1115',
+};
+export const night = {
+    name: 'Night',
+    note: 'The dark palette, fixed — ignores the OS',
+    scheme: 'dark',
+    tokens: NIGHT,
+};
+export const paper = {
+    name: 'Paper',
+    note: 'Light, with shadows that suit it',
+    scheme: 'light',
+    tokens: {
+        '--bg': '#f6f7f9',
+        '--panel': '#ffffff',
+        '--panel-2': '#f0f2f5',
+        '--border': '#e4e8ec',
+        '--border-strong': '#8792a1',
+        '--text': '#191d23',
+        '--muted': '#5d6773',
+        '--accent': '#0e7872',
+        '--accent-dim': '#7fbdb8',
+        '--on-accent': '#ffffff',
+        // The base set is tuned for a dark panel. Unoverridden, `--good` was
+        // 1.74:1 on white -- a `running` pill nobody could read.
+        '--good': '#1c7a4a',
+        '--warn': '#8a6216',
+        '--bad': '#b3312c',
+        // `#2f7fe6` was 3.96:1 on this theme's white panel -- the "information is
+        // blue" colour was measured on the dark base when it was added and never
+        // on a light one. Found by contrast.test.ts on its first run. This is the
+        // lightest step on the same hue that clears 4.5:1 on the panel *and* the
+        // page, with room: 5.24 on white, 4.88 on the page.
+        '--info': '#216bc9',
+        // Black shadows are right on a dark UI and muddy on a light one. This is
+        // the whole reason elevation had to become a token.
+        '--shadow-1': '0 4px 14px rgba(16, 24, 40, 0.08)',
+        '--shadow-2': '0 8px 24px rgba(16, 24, 40, 0.10)',
+        '--shadow-3': '0 12px 32px rgba(16, 24, 40, 0.12)',
+        '--scrim': 'rgba(16, 24, 40, 0.32)',
+    },
+};
+/** Keyed by the name `applyTheme` takes, which is `name` lowercased. */
+export const TF_THEMES = { system, night, paper };
+/**
+ * tf, the product.
+ *
+ * Its identity is empty on purpose: `tokens.css` carries tf's font, shape and
+ * density as the base values, so there is nothing to lay over them. `system`
+ * is the default because following the OS is the choice a tool open all day
+ * should make for you -- and because it is a `prefers-color-scheme` rule
+ * rather than a palette, tf's stylesheet writes no default on `:root`; tf sets
+ * `data-theme` before the bundle loads, as it always has.
+ */
+export const tf = {
+    name: 'tf',
+    identity: {},
+    themes: TF_THEMES,
+    defaultTheme: 'system',
+};

package/dist/products/valet.d.ts

@@ -0,0 +1,23 @@
+import type { Theme, ThemeTokens } from '../themes';
+import type { Product } from './index';
+/**
+ * valet's identity: what it is under every theme.
+ *
+ * The fonts are named, not shipped. `--font` reads a `--font-sans` variable
+ * the app defines with whatever loads its fonts, and falls back to the family
+ * by name; the gallery loads both families from `gallery/public/fonts` so the
+ * specimens are photographed in them. Sharper corners than the package
+ * default, because a console is read in rows and columns and a large radius
+ * rounds the grid away.
+ */
+export declare const VALET_IDENTITY: Partial<ThemeTokens>;
+export declare const light: Theme;
+export declare const night: Theme;
+/** Keyed by the name `applyTheme` takes: `name` lowercased, spaces to hyphens. */
+export declare const VALET_THEMES: {
+    readonly valet: Theme;
+    readonly 'valet-night': Theme;
+};
+/** valet, the product: its badge in `brandMarks.ts`, the identity above, the
+ *  two palettes, and light until somebody picks. */
+export declare const valet: Product;

package/dist/products/valet.js

@@ -0,0 +1,103 @@
+/**
+ * valet's two palettes.
+ *
+ * One hue that belongs to nothing else. The accent is an indigo, chosen so it
+ * sits apart from all four status tones: good is green, warn is amber, bad is
+ * red, and info is a cyan rather than a blue so a link and an information pill
+ * cannot be confused at a glance. The accent is what a person acts on; the
+ * tones are what the system says. They never share a colour.
+ *
+ * Every colour is measured, not judged: `contrast.test.ts` holds both palettes
+ * to the same pairs as tf's.
+ *
+ * The palettes name colours and nothing else. What makes valet valet under
+ * either of them -- the type and the corners -- is the identity below, on
+ * `:root` in valet's stylesheet and under every palette `applyTheme` lays on.
+ * Both palettes used to restate it, which is the shape that breaks the moment
+ * a theme is shared between products: silent on the font, it would have fallen
+ * back to tf's.
+ */
+const FONT = 'var(--font-sans, "IBM Plex Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+const FONT_MONO = 'var(--font-mono, "JetBrains Mono"), ui-monospace, SFMono-Regular, Menlo, monospace';
+/**
+ * valet's identity: what it is under every theme.
+ *
+ * The fonts are named, not shipped. `--font` reads a `--font-sans` variable
+ * the app defines with whatever loads its fonts, and falls back to the family
+ * by name; the gallery loads both families from `gallery/public/fonts` so the
+ * specimens are photographed in them. Sharper corners than the package
+ * default, because a console is read in rows and columns and a large radius
+ * rounds the grid away.
+ */
+export const VALET_IDENTITY = {
+    '--font': FONT,
+    '--font-mono': FONT_MONO,
+    '--radius-sm': '2px',
+    '--radius': '4px',
+    '--radius-md': '6px',
+    '--radius-lg': '10px',
+};
+export const light = {
+    name: 'valet',
+    note: 'Light. Ink on paper, indigo where you act.',
+    scheme: 'light',
+    tokens: {
+        '--bg': '#f4f5f8',
+        '--panel': '#ffffff',
+        '--panel-2': '#eceef3',
+        '--border': '#dcdfe7',
+        '--border-strong': '#7b8597',
+        '--text': '#171a21',
+        '--muted': '#5b6474',
+        '--accent': '#4f46e5',
+        '--accent-dim': '#a9a4f0',
+        '--on-accent': '#ffffff',
+        '--good': '#1b7f4b',
+        '--warn': '#8a5f0a',
+        '--bad': '#bf3a31',
+        '--info': '#0e6f8e',
+        '--app-bg': '#f4f5f8',
+        // Black shadows muddy a light surface; these carry the page's own ink.
+        '--shadow-1': '0 4px 14px rgba(23, 26, 33, 0.08)',
+        '--shadow-2': '0 8px 24px rgba(23, 26, 33, 0.10)',
+        '--shadow-3': '0 12px 32px rgba(23, 26, 33, 0.12)',
+        '--scrim': 'rgba(23, 26, 33, 0.32)',
+    },
+};
+export const night = {
+    name: 'valet night',
+    note: 'Dark. The same ink, lit from behind.',
+    scheme: 'dark',
+    tokens: {
+        '--bg': '#0c0f14',
+        '--panel': '#141820',
+        '--panel-2': '#1b2029',
+        '--border': '#262c37',
+        '--border-strong': '#616b7d',
+        '--text': '#e8eaf0',
+        '--muted': '#9ba4b5',
+        '--accent': '#8f88ff',
+        '--accent-dim': '#3f3a8f',
+        // Near-black on the pale indigo, 6.46:1. White would be 2.6:1.
+        '--on-accent': '#0d0b2e',
+        '--good': '#5fcb8f',
+        '--warn': '#e2ae58',
+        '--bad': '#f28b84',
+        '--info': '#57c4e8',
+        '--app-bg': '#0c0f14',
+        '--shadow-1': '0 6px 20px rgba(0, 0, 0, 0.28)',
+        '--shadow-2': '0 8px 28px rgba(0, 0, 0, 0.34)',
+        '--shadow-3': '0 10px 34px rgba(0, 0, 0, 0.38)',
+        '--scrim': 'rgba(0, 0, 0, 0.5)',
+    },
+};
+/** Keyed by the name `applyTheme` takes: `name` lowercased, spaces to hyphens. */
+export const VALET_THEMES = { valet: light, 'valet-night': night };
+/** valet, the product: its badge in `brandMarks.ts`, the identity above, the
+ *  two palettes, and light until somebody picks. */
+export const valet = {
+    name: 'valet',
+    identity: VALET_IDENTITY,
+    themes: VALET_THEMES,
+    defaultTheme: 'valet',
+};

package/dist/styles/index.css

@@ -329,10 +329,10 @@ button[aria-busy='true']::after {
   width: 40%;
   background: currentColor;
   opacity: 0.55;
-  animation: tf-busy 1.1s var(--ease) infinite;
+  animation: ds-busy 1.1s var(--ease) infinite;
 }
 
-@keyframes tf-busy {
+@keyframes ds-busy {
   0% { transform: translateX(-100%); }
   100% { transform: translateX(350%); }
 }
@@ -423,13 +423,12 @@ button.ghost:hover:not(:disabled) {
   height: calc(var(--text-md) * 1.5);
   width: auto;
   color: var(--good);
-  /* The cog turns about its own centre, which is the ink box's. */
+  /* A product that animates its mark turns it about its own centre, which is
+     the ink box's; tf's cog does. */
   transform-origin: center;
 }
 
-@keyframes brand-turn { to { transform: rotate(360deg); } }
-
-@keyframes tf-callout-clock {
+@keyframes ds-callout-clock {
   from { transform: scaleX(1); }
   to { transform: scaleX(0); }
 }
@@ -515,16 +514,16 @@ button.ghost:hover:not(:disabled) {
 
 .icon-btn:hover { opacity: 1; color: var(--text); }
 
-@keyframes tf-bar {
+@keyframes ds-bar {
   0% { transform: translateX(-110%); }
   100% { transform: translateX(320%); }
 }
 
-@keyframes tf-toast-in {
+@keyframes ds-toast-in {
   from { opacity: 0; transform: translateY(8px); }
 }
 
-@keyframes tf-toast-out {
+@keyframes ds-toast-out {
   to { opacity: 0; transform: translateY(4px); }
 }
 
@@ -545,7 +544,7 @@ button.ghost:hover:not(:disabled) {
 .icon-btn:hover:not(:disabled) { color: var(--text); }
 
 /* skeleton pulse ------------------------------------------------------ */
-@keyframes tf-pulse {
+@keyframes ds-pulse {
   0%, 100% { opacity: 0.25; }
   50% { opacity: 0.65; }
 }
@@ -684,7 +683,7 @@ input:active, textarea:active, select:active { transform: none; }
   line-height: 1.5;
 }
 
-@keyframes tf-throb {
+@keyframes ds-throb {
   0%, 100% { opacity: 0.55; }
   50% { opacity: 1; }
 }
@@ -720,7 +719,7 @@ input:active, textarea:active, select:active { transform: none; }
 /* A round is in flight. On the button that asks for one, because that is where
    you are looking when you have just pressed it -- and not in the foot, which
    would flicker every thirty seconds on a tile that is working perfectly. */
-@keyframes tf-spin { to { transform: rotate(360deg); } }
+@keyframes ds-spin { to { transform: rotate(360deg); } }
 
 @keyframes dock-working {
   0%, 100% { opacity: .15; transform: scale(1); }
@@ -737,10 +736,10 @@ input:active, textarea:active, select:active { transform: none; }
    The animation is not made more robust; the shape is made indifferent to it. */
 .spin {
   display: inline-block;
-  animation: tf-spin 900ms linear infinite;
+  animation: ds-spin 900ms linear infinite;
 }
 
-@keyframes tf-spin { to { transform: rotate(360deg); } }
+@keyframes ds-spin { to { transform: rotate(360deg); } }
 
 @media (prefers-reduced-motion: reduce) {
   /* Still says "working" -- it just says it without moving. */
@@ -781,7 +780,7 @@ input:active, textarea:active, select:active { transform: none; }
   border: 0;
 }
 
-@keyframes tf-skel {
+@keyframes ds-skel {
   from { opacity: 0.55; }
   to { opacity: 1; }
 }
@@ -1139,7 +1138,7 @@ button.danger:active:not(:disabled) {
   transform-origin: left;
   background: currentColor;
   opacity: 0.5;
-  animation: tf-callout-clock linear forwards;
+  animation: ds-callout-clock linear forwards;
 }
 
 /* Held while the pointer is on it. A message that expires while you are reading
@@ -1561,10 +1560,10 @@ input[type='radio']:active:not(:disabled) {
   width: 220%; height: 220%;
   translate: -50% -50%;
   background: conic-gradient(from 0deg, transparent 0deg, transparent 60deg, color-mix(in oklab, var(--accent) 70%, transparent) 180deg, transparent 300deg, transparent 360deg);
-  animation: tf-spin 1s linear infinite;
+  animation: ds-spin 1s linear infinite;
 }
 
-@keyframes tf-spin { to { rotate: 1turn; } }
+@keyframes ds-spin { to { rotate: 1turn; } }
 
 @media (prefers-reduced-motion: reduce) {
   .toggle-sweep::before { animation: none; background: color-mix(in oklab, var(--accent) 45%, transparent); }
@@ -1578,7 +1577,7 @@ input[type='radio']:active:not(:disabled) {
   height: 8px;
   border-radius: var(--radius-sm);
   background: var(--muted);
-  animation: tf-pulse 1.4s ease-in-out infinite;
+  animation: ds-pulse 1.4s ease-in-out infinite;
   vertical-align: middle;
 }
 
@@ -1619,7 +1618,7 @@ input[type='radio']:active:not(:disabled) {
 
 /* Breathing rather than sliding. A sweep travelling across a skeleton implies
    progress from left to right, and nothing here knows how far along it is. */
-.skel-pulse { animation: tf-skel calc(var(--dur-slow) * 3) var(--ease) infinite alternate; }
+.skel-pulse { animation: ds-skel calc(var(--dur-slow) * 3) var(--ease) infinite alternate; }
 
 @media (prefers-reduced-motion: reduce) {
   /* Still distinguishable from a real block of colour, and still still. */
@@ -1761,7 +1760,7 @@ input[type='radio']:active:not(:disabled) {
    something happening now. */
 .rows-pick > .rows-row.is-loading {
   border-color: var(--accent);
-  animation: tf-pulse 1.4s ease-in-out infinite;
+  animation: ds-pulse 1.4s ease-in-out infinite;
 }
 
 /* And nothing else can be chosen while it happens: picking a second model
@@ -1973,7 +1972,7 @@ input[type='radio']:active:not(:disabled) {
    happening" without claiming to know how much of it is left. */
 .bar-indeterminate > i {
   width: 35%;
-  animation: tf-bar 1.2s var(--ease) infinite;
+  animation: ds-bar 1.2s var(--ease) infinite;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -2103,7 +2102,7 @@ input[type='radio']:active:not(:disabled) {
   background: var(--panel);
   box-shadow: var(--shadow-2);
   font-size: var(--text-sm);
-  animation: tf-toast-in var(--dur-md) var(--ease);
+  animation: ds-toast-in var(--dur-md) var(--ease);
 }
 
 /* The tone is the edge and the mark, in the tone's own colour. It used to be the
@@ -2133,7 +2132,7 @@ input[type='radio']:active:not(:disabled) {
 /* `data-exiting` is React Aria's: it keeps a toast in the DOM for the length
    of this animation after it is closed, then removes it, which is what the
    `.leaving` class and a second timer used to do by hand. */
-.toast[data-exiting] { animation: tf-toast-out var(--dur-fast) var(--ease) forwards; }
+.toast[data-exiting] { animation: ds-toast-out var(--dur-fast) var(--ease) forwards; }
 
 @media (prefers-reduced-motion: reduce) {
   .toast, /* `data-exiting` is React Aria's: it keeps a toast in the DOM for the length
@@ -2779,39 +2778,6 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 
 .table thead th[style*='right'] { text-align: right; }
 
-/* ---- ./brand.css ---- */
-/* Once the morph has finished (`Brand.tsx` adds the class at t = 1), the cog
-   turns -- a revolution in 5 s, a tooth every 0.8 s: the pace of a
-   mechanism, not a spinner. It was 2.4 s, which was too quick to William's
-   eye once the teeth were six and fat. Off under reduced motion, where the
-   mark never becomes a cog in the first place.
-
-   Not applied since 2026-09-03 -- William asked to try it without, and
-   `Brand.tsx` says so where the class would go. The rule stays so that putting
-   the class back is the whole change; it stays HERE, rather than in the app
-   that first held it, because the component that would add the class is this
-   package's. The keyframes are in `base.css` beside `.brand`. */
-.brand-turning { animation: brand-turn 5s linear infinite; }
-
-@media (prefers-reduced-motion: reduce) {
-  .brand-turning { animation: none; }
-}
-
-.tf-dots { display: inline-flex; gap: var(--space-1); }
-
-.tf-dots i {
-  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
-  animation: tf-bounce 1.1s ease-in-out infinite;
-}
-
-.tf-dots i:nth-child(2) { animation-delay: 0.15s; }
-
-.tf-dots i:nth-child(3) { animation-delay: 0.3s; }
-
-@media (prefers-reduced-motion: reduce) {
-  .tf-dots i { animation: none; opacity: 0.6; }
-}
-
 /* ---- ./sizegrid.css ---- */
 /* Tile size, picked as a rectangle rather than read as a notation. */
 .size-grid-wrap { display: flex; align-items: center; gap: var(--space-2); }