@rebasepro/ui 0.12.1-canary.gf5f1d39 → 0.13.0

package/src/index.css

@@ -1,57 +1,15 @@
-@theme {
-    /* Font Families */
-    --font-sans: 'Rubik', 'Roboto', 'Helvetica', 'Arial', sans-serif;
-    --font-headers: 'Rubik', 'Roboto', 'Helvetica', 'Arial', sans-serif;
-    --font-mono: 'JetBrains Mono', 'Space Mono', 'Lucida Console', monospace;
-
-    /* Colors */
-    --color-primary: #0070F4;
-    --color-primary-light: oklch(from var(--color-primary) calc(l + 0.15) c h);
-    --color-primary-dark: oklch(from var(--color-primary) calc(l - 0.15) c h);
-    --color-secondary: #FF5B79;
-    --color-secondary-light: oklch(from var(--color-secondary) calc(l + 0.15) c h);
-    --color-secondary-dark: oklch(from var(--color-secondary) calc(l - 0.15) c h);
-
-    --color-primary-bg: oklch(from var(--color-primary) l c h / 0.1);
-    --color-secondary-bg: oklch(from var(--color-secondary) l c h / 0.1);
-
-    /* Field Colors */
-    --color-field-disabled: rgb(224 224 226);
-    --color-field-disabled-dark: rgb(35 35 37);
-
-    /* Text Colors — using opaque values so icon strokes render solidly */
-    --color-text-primary: #212121;
-    --color-text-secondary: #757575;
-    --color-text-disabled: #9e9e9e;
-    --color-text-primary-dark: #ffffff;
-    --color-text-secondary-dark: #a0a0a9;
-    --color-text-disabled-dark: #757580;
-
-    /* Surface Colors */
-    --color-surface-50: #fafafa;
-    --color-surface-100: #f5f5f5;
-    --color-surface-200: #e5e5e5;
-    --color-surface-300: #d4d4d4;
-    --color-surface-400: #a3a3a3;
-    --color-surface-500: #737373;
-    --color-surface-600: #404040;
-    --color-surface-700: #262626;
-    --color-surface-800: #111111;
-    --color-surface-900: #0a0a0a;
-    --color-surface-950: #000000;
-
-    /* Surface Accent Colors */
-    --color-surface-accent-50: #f8fafc;
-    --color-surface-accent-100: #f1f5f9;
-    --color-surface-accent-200: #e2e8f0;
-    --color-surface-accent-300: #cbd5e1;
-    --color-surface-accent-400: #94a3b8;
-    --color-surface-accent-500: #64748b;
-    --color-surface-accent-600: #475569;
-    --color-surface-accent-700: #334155;
-    --color-surface-accent-800: #1e293b;
-    --color-surface-accent-900: #172033;
-    --color-surface-accent-950: #0f172a;
+@import "./theme.css";
+
+/* Grayscale antialiasing, not macOS's subpixel default.
+   This is the single largest reason the same typeface can look like a
+   different one between two pages: subpixel-antialiased text renders visibly
+   heavier and slightly fuzzier, and the effect is worst for light text on dark
+   backgrounds — which is most of this product and all of the marketing site.
+   Design comps that set this and shipped pages that do not will never match,
+   no matter how carefully the font, size, weight and tracking are aligned. */
+html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
 /* Native UI (scrollbars, form controls) must follow the active theme,
@@ -74,32 +32,42 @@ html.dark {
     scrollbar-width: none; /* Firefox */
 }
 
+/* Optical ladder: weight comes down as size comes down, tracking tightens as
+   size goes up. Seven consecutive levels of semibold was a Rubik-era setting,
+   and holding 600 all the way down to text-sm made every heading shout equally
+   — a heading stops being a headline somewhere, and the scale should say where.
+   600 is display-scale only; the small end carries 500.
+
+   With a single face carrying both headings and body, weight and tracking are
+   the only things separating a heading from the copy around it — so the tiers
+   have to actually differ, rather than all sitting at 600. */
+
 .typography-h1 {
-    @apply text-4xl font-headers font-semibold tracking-tight;
+    @apply text-4xl font-headers font-semibold tracking-display;
 }
 
 .typography-h2 {
-    @apply text-3xl font-headers font-semibold tracking-tight;
+    @apply text-3xl font-headers font-semibold tracking-display;
 }
 
 .typography-h3 {
-    @apply text-2xl font-headers font-semibold tracking-tight;
+    @apply text-2xl font-headers font-semibold tracking-title;
 }
 
 .typography-h4 {
-    @apply text-xl font-headers font-semibold tracking-[-0.01em];
+    @apply text-xl font-headers font-medium tracking-title;
 }
 
 .typography-h5 {
-    @apply text-lg font-headers font-semibold tracking-[-0.01em];
+    @apply text-lg font-headers font-medium tracking-heading;
 }
 
 .typography-h6 {
-    @apply text-base font-headers font-semibold tracking-[-0.01em];
+    @apply text-base font-headers font-medium tracking-heading;
 }
 
 .typography-subtitle1 {
-    @apply text-sm font-headers font-semibold tracking-[-0.01em];
+    @apply text-sm font-headers font-medium tracking-heading;
 }
 
 .typography-subtitle2 {

package/src/index.ts

@@ -18,7 +18,8 @@ export * from "./icons";
 // =============================================================================
 export * from "./styles";
 export { cls } from "./util/cls";
-export { CHIP_COLORS, getColorSchemeForKey, getColorSchemeForSeed } from "./util/chip_colors";
+export { CHIP_COLORS, CHIP_HUES, CHIP_SEED_KEYS, getColorSchemeForKey, getColorSchemeForSeed } from "./util/chip_colors";
+export type { ChipHue, ChipTone } from "./util/chip_colors";
 
 // =============================================================================
 // Public Hooks

package/src/styles.ts

@@ -1,3 +1,50 @@
+// ---------------------------------------------------------------------------
+// Control size scale — the single source of truth for how tall an inline
+// control is.
+//
+// Every control that sits on a line with another control (buttons, text
+// fields, selects, search bars, date fields, icon buttons, checkboxes) resolves
+// its height from this map, so a Button and a TextField at the same `size` are
+// pixel-identical and share a baseline. Before this existed each component
+// carried its own map and `size="large"` meant 42px on a Button and 64px on a
+// TextField.
+//
+// The scale is 28/32/40/48 — the rhythm IconButton and Checkbox already used.
+// `xl`/`2xl` continue above it and are button-only.
+// ---------------------------------------------------------------------------
+
+export type ControlSize = "smallest" | "small" | "medium" | "large";
+export type ButtonSize = ControlSize | "xl" | "2xl";
+
+export const CONTROL_HEIGHT = {
+    smallest: 28,
+    small: 32,
+    medium: 40,
+    large: 48,
+    xl: 56,
+    "2xl": 64
+} as const satisfies Record<ButtonSize, number>;
+
+/** Tailwind min-height class per control size. Keep in sync with CONTROL_HEIGHT. */
+export const controlHeightMixin = {
+    smallest: "min-h-[28px]",
+    small: "min-h-[32px]",
+    medium: "min-h-[40px]",
+    large: "min-h-[48px]",
+    xl: "min-h-[56px]",
+    "2xl": "min-h-[64px]"
+} as const satisfies Record<ButtonSize, string>;
+
+/** Horizontal padding paired with each size, so gutters scale with height. */
+export const controlPaddingMixin = {
+    smallest: "px-2",
+    small: "px-2",
+    medium: "px-3",
+    large: "px-4",
+    xl: "px-6",
+    "2xl": "px-10"
+} as const satisfies Record<ButtonSize, string>;
+
 export const focusedDisabled = "focus-visible:ring-0 focus-visible:ring-offset-0";
 export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-surface-accent-100 focus:dark:bg-white/[0.07] focus:bg-surface-accent-100/70";
 export const focusedClasses = "z-30 outline-hidden outline-none ring-2 ring-primary ring-opacity-50 ring-primary/50 ring-offset-0 ring-offset-transparent ";

package/src/theme.css

@@ -0,0 +1,109 @@
+/* ---------------------------------------------------------------------------
+ * Design tokens — the single source for fonts, type scale and colour.
+ *
+ * This lives in its own file for one reason: Tailwind only picks up `@theme`
+ * from an UNLAYERED import. Consumers that pull the component styles in with
+ * `@import "@rebasepro/ui/index.css" layer(base)` — which the marketing site
+ * and the docs both do, to keep component CSS below their own utilities — get
+ * the layer wrapped around everything transitively, and the theme silently
+ * does not register. That is why the font stacks used to be copy-pasted into
+ * every consumer's own `@theme`.
+ *
+ * Import this file unlayered, alongside the layered index.css:
+ *
+ *     @import "@rebasepro/ui/theme.css";
+ *     @import "@rebasepro/ui/index.css" layer(base);
+ * ------------------------------------------------------------------------- */
+
+@theme {
+    /* Font Families — Instrument Sans for headings, Inter for UI and body copy. */
+    --font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, 'Helvetica', 'Arial', sans-serif;
+    --font-headers: 'Instrument Sans Variable', 'Instrument Sans', 'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif;
+    --font-mono: 'JetBrains Mono', 'Space Mono', 'Lucida Console', monospace;
+
+    /* Type scale — three tiers keyed to RENDERED SIZE, not tag depth.
+       Tailwind turns each into a `tracking-*` utility, so the admin panel, the
+       console and the marketing site all spell the same intent the same way
+       instead of each hardcoding its own em value. Pair display/title with
+       font-semibold and heading with font-medium. */
+    --tracking-display: -0.025em; /* >= 30px — the headline tier */
+    --tracking-title: -0.018em;   /* 20-24px — section titles */
+    --tracking-heading: -0.01em;  /* <= 18px — labels; still a heading, not a headline */
+
+    /* Sub-`xs` type. MARKETING ONLY — product UI must not go below `text-xs`
+       (12px). These exist because the marketing site had ~450 hand-written
+       `text-[10px]` / `text-[11px]` classes: the tier was real, it just wasn't
+       in the system, so every page improvised it. Naming it stops the drift
+       without pretending 10px is acceptable for an admin panel. */
+    --text-2xs: 11px;
+    --text-2xs--line-height: 1.45;
+    --text-3xs: 10px;
+    --text-3xs--line-height: 1.4;
+
+    /* Control heights — the one scale every inline control resolves to, so a
+       Button, TextField and Select at the same size share a baseline. Mirrors
+       CONTROL_HEIGHT in styles.ts; that is the source for React components,
+       these are for everyone else.
+
+       Marketing pages and docs are plain markup and cannot import a JS mixin,
+       so without these they hand-roll their own paddings and drift: the site's
+       two hero CTAs sat at 52px and 54px, on no scale and not even matching
+       each other. Reach for `min-h-(--control-xl)` instead of a magic number. */
+    --control-smallest: 28px;
+    --control-small: 32px;
+    --control-medium: 40px;
+    --control-large: 48px;
+    --control-xl: 56px;   /* buttons only */
+    --control-2xl: 64px;  /* buttons only */
+
+    /* Colors */
+    --color-primary: #0070F4;
+    --color-primary-light: oklch(from var(--color-primary) calc(l + 0.15) c h);
+    --color-primary-dark: oklch(from var(--color-primary) calc(l - 0.15) c h);
+    /* rose-600. #FF5B79 was only 2.99:1 against white, so white text on it
+       and it as text both failed WCAG AA. Same hue family, 4.70:1. */
+    --color-secondary: #E11D48;
+    --color-secondary-light: oklch(from var(--color-secondary) calc(l + 0.15) c h);
+    --color-secondary-dark: oklch(from var(--color-secondary) calc(l - 0.15) c h);
+
+    --color-primary-bg: oklch(from var(--color-primary) l c h / 0.1);
+    --color-secondary-bg: oklch(from var(--color-secondary) l c h / 0.1);
+
+    /* Field Colors */
+    --color-field-disabled: rgb(224 224 226);
+    --color-field-disabled-dark: rgb(35 35 37);
+
+    /* Text Colors — using opaque values so icon strokes render solidly */
+    --color-text-primary: #212121;
+    --color-text-secondary: #757575;
+    --color-text-disabled: #9e9e9e;
+    --color-text-primary-dark: #ffffff;
+    --color-text-secondary-dark: #a0a0a9;
+    --color-text-disabled-dark: #757580;
+
+    /* Surface Colors */
+    --color-surface-50: #fafafa;
+    --color-surface-100: #f5f5f5;
+    --color-surface-200: #e5e5e5;
+    --color-surface-300: #d4d4d4;
+    --color-surface-400: #a3a3a3;
+    --color-surface-500: #737373;
+    --color-surface-600: #404040;
+    --color-surface-700: #262626;
+    --color-surface-800: #111111;
+    --color-surface-900: #0a0a0a;
+    --color-surface-950: #000000;
+
+    /* Surface Accent Colors */
+    --color-surface-accent-50: #f8fafc;
+    --color-surface-accent-100: #f1f5f9;
+    --color-surface-accent-200: #e2e8f0;
+    --color-surface-accent-300: #cbd5e1;
+    --color-surface-accent-400: #94a3b8;
+    --color-surface-accent-500: #64748b;
+    --color-surface-accent-600: #475569;
+    --color-surface-accent-700: #334155;
+    --color-surface-accent-800: #1e293b;
+    --color-surface-accent-900: #172033;
+    --color-surface-accent-950: #0f172a;
+}

package/src/util/chip_colors.ts

@@ -9,78 +9,120 @@ export type ChipColorScheme = {
     darkText?: string;
 }
 
-export const CHIP_COLORS: Record<string, ChipColorScheme> = {
-    blue: { color: "#cfdfff",
-text: "#102046",
-darkColor: "#2750ae",
-darkText: "#cfdfff" },
-    teal: { color: "#c2f5e9",
-text: "#012524",
-darkColor: "#06a09b",
-darkText: "#daf3e9" },
-    yellow: { color: "#ffeab6",
-text: "#3b2501",
-darkColor: "#b87503",
-darkText: "#ffeab6" },
-    pink: { color: "#ffdaf6",
-text: "#400832",
-darkColor: "#b2158b",
-darkText: "#ffdaf6" },
-    purple: { color: "#ede2fe",
-text: "#280b42",
-darkColor: "#6b1cb0",
-darkText: "#ede2fe" },
-    cyan: { color: "#d0f0fd",
-text: "#04283f",
-darkColor: "#0b76b7",
-darkText: "#d0f0fd" },
-    orange: { color: "#fee2d5",
-text: "#6b2613",
-darkColor: "#d74d26",
-darkText: "#fee2d5" },
-    green: { color: "#d1f7c4",
-text: "#0b1d05",
-darkColor: "#338a17",
-darkText: "#d1f7c4" },
-    red: { color: "#ffdce5",
-text: "#4c0c1c",
-darkColor: "#ba1e45",
-darkText: "#ffdce5" },
-    gray: { color: "#eee",
-text: "#040404",
-darkColor: "#444",
-darkText: "#eee" },
-    indigo: { color: "#e0e7ff",
-text: "#312e81",
-darkColor: "#4f46e5",
-darkText: "#e0e7ff" },
-    violet: { color: "#ede9fe",
-text: "#4c1d95",
-darkColor: "#7c3aed",
-darkText: "#ede9fe" },
-    fuchsia: { color: "#fae8ff",
-text: "#701a75",
-darkColor: "#c026d3",
-darkText: "#fae8ff" },
-    rose: { color: "#ffe4e6",
-text: "#881337",
-darkColor: "#e11d48",
-darkText: "#ffe4e6" },
-    emerald: { color: "#d1fae5",
-text: "#064e3b",
-darkColor: "#059669",
-darkText: "#d1fae5" }
+/**
+ * The hues a chip can take, and the four stops each one is built from.
+ *
+ * `pale` and `mid` are backgrounds for dark text; `solid` and `deep` are
+ * backgrounds for light text. `text` is the dark ink used on the two pale
+ * stops, and `onDeep` the light ink on `deep` — it defaults to `pale`, and is
+ * only set where a hue needs a tint of its own to stay legible.
+ */
+type HueStops = {
+    pale: string;
+    mid: string;
+    solid: string;
+    deep: string;
+    text: string;
+    onDeep?: string;
+}
+
+export const CHIP_HUES = [
+    "blue", "cyan", "teal", "green", "yellow", "orange", "red", "pink", "purple", "gray",
+    "indigo", "violet", "fuchsia", "rose", "emerald"
+] as const;
+
+export type ChipHue = typeof CHIP_HUES[number];
+
+/**
+ * How light or saturated a chip of a given hue is.
+ *
+ * A hue on its own (`"blue"`) means `Lighter` — the tone the picker offers and
+ * the one seeded chips used to be limited to.
+ */
+export type ChipTone = "Lighter" | "Light" | "Dark" | "Darker";
+
+export type ChipColorKey = ChipHue | `${ChipHue}${ChipTone}`;
+
+const HUE_STOPS: Record<ChipHue, HueStops> = {
+    blue: { pale: "#cfdfff", mid: "#9cc7ff", solid: "#2d7ff9", deep: "#2750ae", text: "#102046" },
+    cyan: { pale: "#d0f0fd", mid: "#77d1f3", solid: "#18bfff", deep: "#0b76b7", text: "#04283f" },
+    teal: { pale: "#c2f5e9", mid: "#72ddc3", solid: "#20d9d2", deep: "#06a09b", text: "#012524", onDeep: "#daf3e9" },
+    green: { pale: "#d1f7c4", mid: "#93e088", solid: "#20c933", deep: "#338a17", text: "#0b1d05" },
+    yellow: { pale: "#ffeab6", mid: "#ffd66e", solid: "#fcb400", deep: "#b87503", text: "#3b2501" },
+    orange: { pale: "#fee2d5", mid: "#ffa981", solid: "#ff6f2c", deep: "#d74d26", text: "#6b2613" },
+    red: { pale: "#ffdce5", mid: "#ff9eb7", solid: "#f82b60", deep: "#ba1e45", text: "#4c0c1c" },
+    pink: { pale: "#ffdaf6", mid: "#f99de2", solid: "#ff08c2", deep: "#b2158b", text: "#400832" },
+    purple: { pale: "#ede2fe", mid: "#cdb0ff", solid: "#8b46ff", deep: "#6b1cb0", text: "#280b42" },
+    gray: { pale: "#eeeeee", mid: "#cccccc", solid: "#666666", deep: "#444444", text: "#040404" },
+    indigo: { pale: "#e0e7ff", mid: "#a5b4fc", solid: "#6366f1", deep: "#4f46e5", text: "#312e81" },
+    violet: { pale: "#ede9fe", mid: "#c4b5fd", solid: "#8b5cf6", deep: "#7c3aed", text: "#4c1d95" },
+    fuchsia: { pale: "#fae8ff", mid: "#f0abfc", solid: "#d946ef", deep: "#c026d3", text: "#701a75" },
+    rose: { pale: "#ffe4e6", mid: "#fda4af", solid: "#f43f5e", deep: "#e11d48", text: "#881337" },
+    emerald: { pale: "#d1fae5", mid: "#6ee7b7", solid: "#10b981", deep: "#059669", text: "#064e3b" }
 };
 
-export type ChipColorKey = keyof typeof CHIP_COLORS;
+function tone(stops: HueStops, chipTone: ChipTone): ChipColorScheme {
+    const onDeep = stops.onDeep ?? stops.pale;
+    switch (chipTone) {
+        case "Light":
+            return { color: stops.mid, text: stops.text, darkColor: stops.solid, darkText: "#fff" };
+        case "Dark":
+            return { color: stops.solid, text: "#fff", darkColor: stops.solid, darkText: "#fff" };
+        case "Darker":
+            return { color: stops.deep, text: onDeep, darkColor: stops.deep, darkText: onDeep };
+        case "Lighter":
+        default:
+            return { color: stops.pale, text: stops.text, darkColor: stops.deep, darkText: onDeep };
+    }
+}
+
+const CHIP_TONES: ChipTone[] = ["Lighter", "Light", "Dark", "Darker"];
+
+function buildChipColors(): Record<ChipColorKey, ChipColorScheme> {
+    const colors = {} as Record<ChipColorKey, ChipColorScheme>;
+    for (const hue of CHIP_HUES) {
+        const stops = HUE_STOPS[hue];
+        for (const chipTone of CHIP_TONES) {
+            colors[`${hue}${chipTone}` as ChipColorKey] = tone(stops, chipTone);
+        }
+        // The bare hue is the lightest tone, which is what every existing
+        // `color: "blue"` in a collection config already means.
+        colors[hue] = tone(stops, "Lighter");
+    }
+    return colors;
+}
+
+/**
+ * Every chip scheme, keyed by hue and tone.
+ *
+ * This table used to hold four tones per hue and was flattened to one, which
+ * left `blueDark`, `redDarker` and friends resolving to `undefined` — a chip
+ * with a colour in its config rendering with no colour at all — and left seeded
+ * chips picking from ten schemes, so a five-value enum routinely drew the same
+ * background three times. The tones are generated from {@link HUE_STOPS} now,
+ * so a new hue brings its whole family with it.
+ */
+export const CHIP_COLORS: Record<ChipColorKey, ChipColorScheme> = buildChipColors();
+
+/**
+ * The keys a seeded chip may be assigned, in a stable order.
+ *
+ * The bare-hue aliases are excluded: they are the same scheme as `<hue>Lighter`
+ * and would make the palest tone twice as likely as any other.
+ */
+export const CHIP_SEED_KEYS: ChipColorKey[] = CHIP_HUES.flatMap(
+    hue => CHIP_TONES.map(chipTone => `${hue}${chipTone}` as ChipColorKey));
 
-export function getColorSchemeForKey(key: ChipColorKey): ChipColorScheme {
-    return CHIP_COLORS[key];
+// `string & {}` keeps the known keys in autocomplete while still accepting the
+// arbitrary column colours a board hands over.
+export function getColorSchemeForKey(key: ChipColorKey | (string & {})): ChipColorScheme {
+    // An unknown key is a config that names a colour this build does not have —
+    // a renamed hue, or a value typed by hand. Seeding from the key keeps it
+    // coloured and keeps it stable, rather than dropping it to no colour.
+    return CHIP_COLORS[key as ChipColorKey] ?? getColorSchemeForSeed(String(key));
 }
 
 export function getColorSchemeForSeed(seed: string): ChipColorScheme {
     const hash: number = hashString(seed);
-    const colorKeys = Object.keys(CHIP_COLORS);
-    const index = hash % colorKeys.length;
-    return CHIP_COLORS[colorKeys[index]];
+    return CHIP_COLORS[CHIP_SEED_KEYS[hash % CHIP_SEED_KEYS.length]];
 }

package/src/views/CollectionView/index.ts

@@ -23,22 +23,17 @@ export type {
 } from "./CollectionViewTypes";
 
 // Components
+//
+// `CollectionView` is the entry point. The per-mode views
+// (table/card/list/kanban), the toolbar and the default cell renderer are
+// internal: `CollectionView` selects and wires them from `mode`, and nothing
+// outside this package consumed them directly. Their prop types stay exported
+// so callers can still type overrides.
 export { CollectionView } from "./CollectionView";
 export type { CollectionViewProps } from "./CollectionView";
 
-export { CollectionViewToolbar } from "./CollectionViewToolbar";
 export type { CollectionViewToolbarProps } from "./CollectionViewToolbar";
-
-export { CollectionTableView } from "./CollectionTableView";
 export type { CollectionTableViewProps } from "./CollectionTableView";
-
-export { CollectionCardView } from "./CollectionCardView";
 export type { CollectionCardViewProps } from "./CollectionCardView";
-
-export { CollectionListView } from "./CollectionListView";
 export type { CollectionListViewProps } from "./CollectionListView";
-
-export { CollectionKanbanView } from "./CollectionKanbanView";
 export type { CollectionKanbanViewProps } from "./CollectionKanbanView";
-
-export { DefaultCellRenderer } from "./DefaultCellRenderer";