@eifi1/ui-kit 0.4.0

package/tokens.css

@@ -0,0 +1,254 @@
+/* @hb/ui design tokens + semantic utilities.
+ *
+ * The single source of truth for the shared appearance layer: brand + data
+ * colours (theme-aware via `.dark`), the semantic money utilities, the brand
+ * accent for checkboxes/radios, and the global keyframes/scrollbar chrome.
+ *
+ * Consumers import this ONCE (after their own `@import "tailwindcss"`):
+ *   @import "@hb/ui/tokens.css";
+ * and add the package to Tailwind's source scan so its class names are kept:
+ *   @source "../node_modules/@hb/ui/src";
+ *
+ * NOTE: these :root/.dark values MIRROR DEFAULT_PRESET in the palette theme module,
+ * which is what actually paints them — the palette layer writes the active preset
+ * tokens inline on <html> at runtime (Tailwind v4 strips a root block that holds only
+ * custom properties, so this block is a documentation mirror, not the live source).
+ *
+ * Because it is inert, it drifts silently, and it had: the surfaces and text colour
+ * below still held the pre-#328 palette while DEFAULT_PRESET had moved to Solar Dusk.
+ * They were resynced when --text-secondary/--text-muted were added (the new tones are
+ * derived from these surfaces, so a stale mirror would have documented a contrast ratio
+ * that was not the shipped one). The MONEY TRIO and the nine chart hues below are still
+ * the older values and have not been touched — nothing reads them, but do not cite them
+ * as the default without checking DEFAULT_PRESET first. */
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+:root {
+  --bg-page: #ede3cf;          /* warm dim sand — low-glare light page */
+  --bg-surface: #f6ecd9;       /* warm off-white card/panel (not pure white) */
+  --bg-surface-2: #f3ead6;     /* inset/well surface */
+  --border: #e2d6bd;           /* warm hairline border */
+  --text-primary: #463f33;     /* warm dark grey — not pure black */
+  /* The two quieter text roles. Contrast against the WORST of the three surfaces
+     above: 7.0:1 and 4.8:1, so both clear WCAG AA for normal text on all of them —
+     which is the reason they are tokens and not `text-slate-500`, a cool grey that
+     ignores the palette and sat at 4.4:1 on this ground. */
+  --text-secondary: #50493c;
+  --text-muted: #696153;
+  --brand: #4f46e5;            /* indigo-600 */
+  --brand-hover: #4338ca;      /* indigo-700 */
+  --brand-contrast: #ffffff;
+  --money-income: #0f766e;     /* teal-700 */
+  --money-expense: #b45309;    /* amber-700 */
+  --money-net: #6d28d9;        /* violet-700 */
+  --money-neutral: #6b6253;    /* warm slate */
+  --chart-1: #332288;
+  --chart-2: #88ccee;
+  --chart-3: #44aa99;
+  --chart-4: #117733;
+  --chart-5: #999933;
+  --chart-6: #ddcc77;
+  --chart-7: #cc6677;
+  --chart-8: #882255;
+  --chart-9: #aa4499;
+}
+
+.dark {
+  --bg-page: #0e0f1c;          /* indigo near-black */
+  --bg-surface: #181a2c;
+  --bg-surface-2: #21243a;     /* inset/well surface */
+  --border: #2e3252;
+  --text-primary: #e6e8f4;
+  /* As in `:root` — 7.0:1 and 4.8:1 against the worst of the three dark surfaces. */
+  --text-secondary: #adafbe;
+  --text-muted: #8d90a0;
+  --brand: #818cf8;            /* indigo-400 */
+  --brand-hover: #a5b4fc;      /* indigo-300 */
+  --brand-contrast: #1e1b4b;   /* indigo-950 */
+  --money-income: #2dd4bf;     /* teal-400 */
+  /* Deliberately NOT amber-400 (#fbbf24). Every other colour on a dark surface
+     sits around OKLab L 0.68–0.74 (brand 0.68, net 0.70, neutral 0.71, income
+     0.74); amber-400 lands at 0.84, so outflows — most rows in a register — shouted
+     a tenth of a lightness step louder than inflows carrying the same weight of
+     meaning. Same hue (84°) and chroma, pulled to L 0.785: still 8.9:1 on the card
+     surface, still far from income in CVD space (Keksdose dev#434). */
+  --money-expense: #e4b035;
+  --money-net: #a98fd6;
+  --money-neutral: #a1a1aa;    /* zinc-400 */
+  --chart-1: #7e72d6;
+  --chart-2: #9fd8f2;
+  --chart-3: #5fc4b0;
+  --chart-4: #3fa45f;
+  --chart-5: #bfbf5e;
+  --chart-6: #e8dda0;
+  --chart-7: #e08c9a;
+  --chart-8: #c25a78;
+  --chart-9: #cc78be;
+}
+
+/* Semantic colour utilities backed by the tokens above. Unlayered so they win
+   over Tailwind's layered colour utilities, and theme-aware for free (the var
+   flips under .dark) — no dark: variant needed at the call site. */
+.text-money-pos { color: var(--money-income); }
+.text-money-neg { color: var(--money-expense); }
+.text-money-net { color: var(--money-net); }
+.text-money-pos-muted { color: var(--money-income); opacity: 0.72; }
+.text-money-neg-muted { color: var(--money-expense); opacity: 0.72; }
+.text-brand { color: var(--brand); }
+.bg-brand { background-color: var(--brand); }
+.bg-money-pos { background-color: var(--money-income); }
+.bg-money-neg { background-color: var(--money-expense); }
+/* "No money has moved" — the fill for markers on rows that are not real yet
+   (scheduled / future-dated). Deliberately NOT brand and NOT money-pos: those
+   two mean settled, and a future row wearing one of them reads as done. */
+.bg-money-neutral { background-color: var(--money-neutral); }
+.border-brand { border-color: var(--brand); }
+
+html, body, #root {
+  height: 100%;
+}
+
+/* NOT a `scrollbar-gutter` on the DOCUMENT — measured, and it is the wrong instrument.
+ *
+ * Below `AppShell`'s md breakpoint the viewport is the scroll container (main is only
+ * `md:overflow-y-auto`), so nothing reserves a gutter down there and a classic
+ * scrollbar takes ~15px out of the content box the moment a page outgrows the window:
+ * Keksdose live #307's follow-up, reported as "resizes slightly horizontally".
+ *
+ * Reserving it on `html` fixes that and breaks something worse. `scrollbar-gutter` on
+ * the root shrinks the INITIAL CONTAINING BLOCK, which is what `position: fixed` is
+ * laid out against — so every full-bleed overlay in the app stops 15px short on each
+ * edge. Measured at a 406px viewport: the row editor's dialog went from x=0/w=406 to
+ * x=15/w=376, with live page showing through both strips and tappable. That is
+ * Keksdose feedback #32's failure, worse: #32's strip at least belonged to the
+ * backdrop, and a tap on this one reaches the register behind the form.
+ *
+ * The only fix without that side effect is to give the viewport's job to an ELEMENT —
+ * dropping the `md:` gate on main's own `overflow-y-auto` — which changes how a phone
+ * scrolls (the URL bar stops collapsing) for a bug phones do not have, since overlay
+ * scrollbars take no layout space. Left as a decision rather than a silent trade. */
+
+/* Checkboxes/radios default to a visible brand accent. The native dark fill
+   blended into the dark UI, so a checked box was almost indistinguishable from
+   an unchecked one (feedback #219). Must live in the base layer: unlayered
+   styles beat Tailwind's layered utilities regardless of specificity, which
+   silently overrode deliberate `accent-*` utilities like the destructive rose
+   fresh-start checkbox (feedback #264). */
+@layer base {
+  :where(input[type="checkbox"], input[type="radio"]) {
+    accent-color: var(--brand); /* unified indigo brand accent (theme-aware) */
+  }
+}
+
+body {
+  background-color: var(--bg-page);
+  color: var(--text-primary);
+}
+
+/* Indeterminate progress bar (e.g. long imports, feedback #270): a third-width
+   segment sweeping the track. */
+@keyframes indeterminate-sweep {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(300%); }
+}
+.animate-indeterminate {
+  animation: indeterminate-sweep 1.4s ease-in-out infinite;
+}
+
+/* Overlay motion (Keksdose live #320: *"Evaluate how much work it would be to have
+   nicer transitions for the mobile users when clicking on a row … for all hoc derived
+   tables"*).
+ *
+ * Two keyframes rather than a library. Every overlay in this package is bottom-anchored
+ * on a phone and centred from md up, so one pair covers the row sheet, the modal, the
+ * picker and the numpad — and every table in every consuming app gets it by getting
+ * them, which is what the row asked for.
+ *
+ * Enter AND exit since the #320 rework — *"Recognized the opening transition. Choose
+ * transition should be the same, only backwards"*. The first round shipped the enter
+ * alone on the argument that an exit needs the element to stay mounted past the state
+ * change; that is still true, and `useCloseTransition` is where that state machine now
+ * lives, once, for every overlay in this package.
+ *
+ * The exit is the same two moves read backwards, at the same durations, on the mirrored
+ * curve (`ease-in` against `ease-out`, and the sheet's cubic reversed): a close that
+ * eases OUT of the screen at the speed it eased in reads as the same object leaving.
+ *
+ * 180ms and an ease-out curve: long enough to read as movement, short enough that it
+ * never delays a screen whose data is already in memory — which most of these are. The
+ * exit is what that budget is really spent on: every millisecond here is a millisecond
+ * between a tap on "Close" and the list being usable again, which is why it does not
+ * get the slower, more cinematic curve a first attempt reaches for.
+ */
+@keyframes overlay-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes sheet-rise-in {
+  from { transform: translateY(100%); }
+  to { transform: none; }
+}
+@keyframes overlay-fade-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@keyframes sheet-lower-out {
+  from { transform: none; }
+  to { transform: translateY(100%); }
+}
+.animate-overlay { animation: overlay-fade-in 0.18s ease-out; }
+.animate-sheet { animation: sheet-rise-in 0.22s cubic-bezier(0.32, 0.72, 0, 1); }
+/* `forwards` on both: the element is unmounted by a timer, and without a retained end
+   state the last painted frame before that timer fires is the panel back at full
+   opacity in its opening position — a flash of the thing you just dismissed. */
+.animate-overlay-out { animation: overlay-fade-out 0.18s ease-in forwards; }
+.animate-sheet-out { animation: sheet-lower-out 0.22s cubic-bezier(1, 0, 0.68, 0.28) forwards; }
+
+/* Motion is the first thing to drop here, not the last. The overlay still fades — a
+   backdrop appearing instantly is a flash, not a transition — but nothing travels.
+   The EXIT pair is not listed: `useCloseTransition` reads the same media query and
+   closes immediately under it, so these classes are never applied at all. */
+@media (prefers-reduced-motion: reduce) {
+  .animate-sheet { animation: none; }
+  .animate-overlay { animation-duration: 0.01ms; }
+}
+
+/* Chart drilldown fan-out/-in (feedback #260 rework): the remounted chart eases
+   in instead of snapping. */
+@keyframes drill-in {
+  from { opacity: 0; transform: scale(0.96); }
+  to { opacity: 1; transform: none; }
+}
+.animate-drill {
+  animation: drill-in 0.25s ease-out;
+}
+
+/* Scrollbars: keep light defaults; theme to slate when dark mode is active. */
+.dark {
+  color-scheme: dark;
+  scrollbar-color: rgb(51 65 85) rgb(15 23 42); /* slate-700 thumb on slate-900 track */
+}
+
+.dark ::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+}
+
+.dark ::-webkit-scrollbar-track {
+  background-color: rgb(15 23 42); /* slate-900 */
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background-color: rgb(51 65 85); /* slate-700 */
+  border-radius: 6px;
+  border: 2px solid rgb(15 23 42); /* slate-900 — creates inset padding */
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(71 85 105); /* slate-600 */
+}
+
+.dark ::-webkit-scrollbar-corner {
+  background-color: rgb(15 23 42); /* slate-900 */
+}