@tristan2828/ui-foundation 3.0.0

package/styles/index.css

@@ -0,0 +1,88 @@
+/* The foundation's styles: design tokens (theme.css), the Tailwind theme
+   mapping them to utilities, and base styles. An app's own CSS entry imports
+   Tailwind first, then this:
+
+     @import "tailwindcss";
+     @import "@tristan2828/ui-foundation/styles.css";
+
+   @source points Tailwind at the package's compiled components, which it
+   would otherwise skip (it never scans node_modules on its own). */
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/geist";
+@import "./theme.css";
+
+@source "../dist";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --font-heading: var(--font-sans);
+    --font-sans: 'Geist Variable', sans-serif;
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-destructive-text: var(--destructive-text);
+    --color-success: var(--success);
+    --color-success-foreground: var(--success-foreground);
+    --color-success-text: var(--success-text);
+    --color-warning: var(--warning);
+    --color-warning-foreground: var(--warning-foreground);
+    --color-warning-text: var(--warning-text);
+    --color-category-1: var(--category-1);
+    --color-category-2: var(--category-2);
+    --color-category-3: var(--category-3);
+    --color-category-4: var(--category-4);
+    --color-category-5: var(--category-5);
+    --color-category-6: var(--category-6);
+    --color-category-7: var(--category-7);
+    --color-category-8: var(--category-8);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --color-foreground: var(--foreground);
+    --color-background: var(--background);
+    --radius-sm: calc(var(--radius) * 0.6);
+    --radius-md: calc(var(--radius) * 0.8);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) * 1.4);
+    --radius-2xl: calc(var(--radius) * 1.8);
+    --radius-3xl: calc(var(--radius) * 2.2);
+    --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    }
+  body {
+    @apply bg-background text-foreground;
+    }
+  html {
+    @apply font-sans;
+    }
+}

package/styles/theme.css

@@ -0,0 +1,209 @@
+/*
+ * Two-layer design tokens (conventions/docs/design-language.md).
+ *
+ * Layer 1 — primitives: raw palette values. Never referenced from
+ * components directly.
+ * Layer 2 — semantic: what components actually consume (bg-primary,
+ * text-muted-foreground, ...). Remapped per theme/mode; primitives are not.
+ *
+ * The values below are shadcn's generated defaults (Nova preset),
+ * reorganized into the two-layer shape. Phase 1 only needs the structure to
+ * exist; Phase 5 is where the primitive palette itself is deliberately
+ * chosen and this file's diff should be small.
+ */
+
+:root {
+  /* Layer 1 — primitives */
+  --white: oklch(1 0 0);
+  --white-a10: oklch(1 0 0 / 10%);
+  --white-a15: oklch(1 0 0 / 15%);
+  --black: oklch(0.145 0 0);
+
+  --gray-50: oklch(0.985 0 0);
+  --gray-100: oklch(0.97 0 0);
+  --gray-200: oklch(0.922 0 0);
+  --gray-300: oklch(0.87 0 0);
+  --gray-400: oklch(0.708 0 0);
+  --gray-500: oklch(0.556 0 0);
+  --gray-600: oklch(0.439 0 0);
+  --gray-700: oklch(0.371 0 0);
+  --gray-900: oklch(0.269 0 0);
+  --gray-950: oklch(0.205 0 0);
+
+  /*
+   * Tone primitives. Each tone carries more than one shade, because which
+   * one is correct depends on what sits on top of it — the distinction
+   * that makes a single "red" token wrong:
+   *
+   *   -500 / -700   a SOLID fill, always with white text on it
+   *   -700 / -800   the same tone as TEXT or a BORDER on the light page
+   *   -400          the same, on the dark page
+   *
+   * Reusing a fill shade as text is the classic failure: it was chosen to
+   * contrast with white, not with the page behind it. Every ratio below is
+   * measured (WCAG 2.x, sRGB), and axe re-checks them against the rendered
+   * DOM in both themes — see e2e/storybook-visual.spec.ts.
+   */
+  --red-500: oklch(0.577 0.245 27.325); /* white on it: 4.76 */
+  --red-700: oklch(0.5 0.21 27.325); /* on white: 6.57 */
+  --red-400: oklch(0.74 0.19 27.325); /* on near-black: 7.39 */
+  --green-700: oklch(0.527 0.154 150.069); /* white on it: 4.94 */
+  --green-800: oklch(0.43 0.13 150.069); /* on white: 7.55 */
+  --green-400: oklch(0.75 0.16 150.069); /* on near-black: 9.47 */
+  --amber-700: oklch(0.555 0.163 48.998); /* white on it: 5.05 */
+  --amber-800: oklch(0.47 0.14 48.998); /* on white: 7.20 */
+  --amber-400: oklch(0.828 0.189 84.429); /* on near-black: 11.53 */
+  /*
+   * Categorical slots. For values that differ from each other but are not
+   * better or worse than each other — a genre, a team, a category. Tones
+   * (success/warning/destructive) say good or bad; these say nothing but
+   * "not the same as its neighbour".
+   *
+   * Generic slots, deliberately not per-value tokens: an app maps its enum
+   * to a slot in its own columns file, so a new enum value costs a line
+   * there rather than three tokens here.
+   *
+   * Hues avoid the red and green bands that destructive/success already
+   * spend, and the amber that warning does — a category drawn in red reads
+   * as "bad". They are ordered by distinctness, not by hue angle, so an app
+   * using only the first three gets three obviously different colours.
+   * Past about five, hue alone stops separating them and the glyph has to
+   * carry the meaning; see docs/design-language.md.
+   *
+   * Ratios are against the page, measured (WCAG 2.x, sRGB), and all clear
+   * the 3:1 non-text minimum in both themes with room to spare. Note that
+   * axe does NOT check icon contrast, so unlike the tones nothing
+   * re-measures these automatically.
+   */
+  --category-1-700: oklch(0.5 0.15 240);
+  --category-1-400: oklch(0.78 0.12 240);
+  --category-2-700: oklch(0.5 0.15 300);
+  --category-2-400: oklch(0.78 0.12 300);
+  --category-3-700: oklch(0.5 0.15 95);
+  --category-3-400: oklch(0.78 0.12 95);
+  --category-4-700: oklch(0.5 0.15 190);
+  --category-4-400: oklch(0.78 0.12 190);
+  --category-5-700: oklch(0.5 0.15 330);
+  --category-5-400: oklch(0.78 0.12 330);
+  --category-6-700: oklch(0.5 0.15 265);
+  --category-6-400: oklch(0.78 0.12 265);
+  --category-7-700: oklch(0.5 0.15 120);
+  --category-7-400: oklch(0.78 0.12 120);
+  --category-8-700: oklch(0.5 0.15 215);
+  --category-8-400: oklch(0.78 0.12 215);
+  --blue-500: oklch(0.488 0.243 264.376);
+
+  --radius-base: 0.625rem;
+
+  /* Layer 2 — semantic (light) */
+  --background: var(--white);
+  --foreground: var(--black);
+  --card: var(--white);
+  --card-foreground: var(--black);
+  --popover: var(--white);
+  --popover-foreground: var(--black);
+  --primary: var(--gray-950);
+  --primary-foreground: var(--gray-50);
+  --secondary: var(--gray-100);
+  --secondary-foreground: var(--gray-950);
+  --muted: var(--gray-100);
+  --muted-foreground: var(--gray-500);
+  --accent: var(--gray-100);
+  --accent-foreground: var(--gray-950);
+  --destructive: var(--red-500);
+  --destructive-foreground: var(--white);
+  --success: var(--green-700);
+  --success-foreground: var(--white);
+  --warning: var(--amber-700);
+  --warning-foreground: var(--white);
+  /* The three pairs above are a SOLID fill plus its own text color, and
+     nothing else. Used as text or a border on the page's own background —
+     an outline badge, a tinted chip, an icon tint — a fill shade is the
+     wrong value: it was picked to carry white, not to read against the
+     page. The *-text tokens below are the per-theme shades for that job,
+     and they are the only ones that get remapped in .dark. */
+  --destructive-text: var(--red-700);
+  --success-text: var(--green-800);
+  --warning-text: var(--amber-800);
+  /* Categorical slots — a glyph tint, never a fill behind text. */
+  --category-1: var(--category-1-700);
+  --category-2: var(--category-2-700);
+  --category-3: var(--category-3-700);
+  --category-4: var(--category-4-700);
+  --category-5: var(--category-5-700);
+  --category-6: var(--category-6-700);
+  --category-7: var(--category-7-700);
+  --category-8: var(--category-8-700);
+  --border: var(--gray-200);
+  --input: var(--gray-200);
+  --ring: var(--gray-400);
+  --chart-1: var(--gray-300);
+  --chart-2: var(--gray-500);
+  --chart-3: var(--gray-600);
+  --chart-4: var(--gray-700);
+  --chart-5: var(--gray-900);
+  --radius: var(--radius-base);
+  --sidebar: var(--gray-50);
+  --sidebar-foreground: var(--black);
+  --sidebar-primary: var(--gray-950);
+  --sidebar-primary-foreground: var(--gray-50);
+  --sidebar-accent: var(--gray-100);
+  --sidebar-accent-foreground: var(--gray-950);
+  --sidebar-border: var(--gray-200);
+  --sidebar-ring: var(--gray-400);
+}
+
+.dark {
+  /* Layer 2 — semantic (dark). Only this block is remapped; Layer 1 is not. */
+  --background: var(--black);
+  --foreground: var(--gray-50);
+  --card: var(--gray-950);
+  --card-foreground: var(--gray-50);
+  --popover: var(--gray-950);
+  --popover-foreground: var(--gray-50);
+  --primary: var(--gray-200);
+  --primary-foreground: var(--gray-950);
+  --secondary: var(--gray-900);
+  --secondary-foreground: var(--gray-50);
+  --muted: var(--gray-900);
+  --muted-foreground: var(--gray-400);
+  --accent: var(--gray-900);
+  --accent-foreground: var(--gray-50);
+  --destructive: var(--red-500);
+  --destructive-foreground: var(--white);
+  --success: var(--green-700);
+  --success-foreground: var(--white);
+  --warning: var(--amber-700);
+  --warning-foreground: var(--white);
+  /* Solid fills keep one shade in both themes — they always carry white
+     text, so the page behind them never enters the calculation. Only the
+     *-text shades flip, because those read against the page. */
+  --destructive-text: var(--red-400);
+  --success-text: var(--green-400);
+  --warning-text: var(--amber-400);
+  /* Categorical slots — lighter shades to read against the dark page. */
+  --category-1: var(--category-1-400);
+  --category-2: var(--category-2-400);
+  --category-3: var(--category-3-400);
+  --category-4: var(--category-4-400);
+  --category-5: var(--category-5-400);
+  --category-6: var(--category-6-400);
+  --category-7: var(--category-7-400);
+  --category-8: var(--category-8-400);
+  --border: var(--white-a10);
+  --input: var(--white-a15);
+  --ring: var(--gray-500);
+  --chart-1: var(--gray-300);
+  --chart-2: var(--gray-500);
+  --chart-3: var(--gray-600);
+  --chart-4: var(--gray-700);
+  --chart-5: var(--gray-900);
+  --sidebar: var(--gray-950);
+  --sidebar-foreground: var(--gray-50);
+  --sidebar-primary: var(--blue-500);
+  --sidebar-primary-foreground: var(--gray-50);
+  --sidebar-accent: var(--gray-900);
+  --sidebar-accent-foreground: var(--gray-50);
+  --sidebar-border: var(--white-a10);
+  --sidebar-ring: var(--gray-500);
+}