@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.31

package/dist/theme.css

@@ -1,5 +1,9 @@
+/* NOTE: this file ships as dist/theme.css (copied verbatim by build:copy-css) and is
+   only ever consumed from there. Paths below are therefore resolved relative to dist/:
+   `../src/global.scss` = the shipped src/global.scss (package.json `files` ships src/global.scss
+   + src/styles), and `../dist` = the built components scanned for used classes. */
 @source "../dist";
-@import "./global.scss";
+@import "../src/global.scss";
 
 @theme {
   --font-weight-light: 300;

package/dist/themes/ember.css

@@ -0,0 +1,131 @@
+/* ============================================================
+   @flikk/ui — Ember theme
+   Coral/burnt-orange primary × Plus Jakarta Sans × pill geometry × zinc neutrals.
+
+   Usage (import AFTER styles.css):
+     import "@flikk/ui/styles.css";
+     import "@flikk/ui/themes/ember.css";
+
+   Theme-file authoring rules (applies to every preset theme):
+   - All rules live in `@layer theme` — an unlayered :root would beat the
+     layered `.dark` overrides in styles.css and break dark mode.
+   - Any token overridden here in :root that styles.css ALSO overrides in
+     `.dark` MUST get an explicit `.dark` value below (this file is later in
+     source order, so its :root wins over styles.css's `.dark` otherwise).
+   - Never redeclare `--color-*-contrast` — it auto-derives from the live
+     base var (see CLAUDE.md §3).
+   ============================================================ */
+@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap");
+
+@layer theme {
+  :root {
+    /* Primary — Tailwind v4 orange ramp (coral/terracotta accent) */
+    --color-primary-50: oklch(98% 0.016 73.684);
+    --color-primary-100: oklch(95.4% 0.038 75.164);
+    --color-primary-200: oklch(90.1% 0.076 70.697);
+    --color-primary-300: oklch(83.7% 0.128 66.29);
+    --color-primary-400: oklch(75% 0.183 55.934);
+    --color-primary-500: oklch(70.5% 0.213 47.604);
+    --color-primary-600: oklch(64.6% 0.222 41.116);
+    --color-primary-700: oklch(55.3% 0.195 38.402);
+    --color-primary-800: oklch(47% 0.157 37.304);
+    --color-primary-900: oklch(40.8% 0.123 38.172);
+    --color-primary-950: oklch(26.6% 0.079 36.259);
+    --color-primary: var(--color-primary-600);
+
+    /* Neutrals — Tailwind v4 zinc ramp (cool near-neutral cast; reads as the
+       dark navy-black used for filled badges/buttons/headings in the
+       reference dashboard). Dark text tokens reference these rungs by var(),
+       so dark picks the cast up too. */
+    --color-mono-50: oklch(98.5% 0 0);
+    --color-mono-100: oklch(96.7% 0.001 286.375);
+    --color-mono-200: oklch(92% 0.004 286.32);
+    --color-mono-300: oklch(87.1% 0.006 286.286);
+    --color-mono-400: oklch(70.5% 0.015 286.067);
+    --color-mono-500: oklch(55.2% 0.016 285.938);
+    --color-mono-600: oklch(44.2% 0.017 285.786);
+    --color-mono-700: oklch(37% 0.013 285.805);
+    --color-mono-800: oklch(27.4% 0.006 286.033);
+    --color-mono-900: oklch(21% 0.006 285.885);
+    --color-mono-950: oklch(14.1% 0.005 285.823);
+
+    /* Borders — zinc-tinted hairlines at the same lightness rungs as the
+       base theme's neutral borders (93% / 87% / 80%) */
+    --color-border: oklch(92% 0.004 286.32);
+    --color-border-secondary: oklch(87.1% 0.006 286.286);
+    --color-border-hover: oklch(80% 0.01 286);
+
+    /* Typography */
+    --font-family-base: "Plus Jakarta Sans", var(--font-sans);
+
+    /* Geometry — rounder, softer cards; every --*-radius derives from this */
+    --radius-base: 24px;
+
+    /* Taller, pill-leaning controls (base: 32/40/48). Buttons inherit via
+       --button-min-h-* = var(--form-min-h-*). */
+    --form-min-h-sm: 40px;
+    --form-min-h-md: 48px;
+    --form-min-h-lg: 56px;
+
+    /* Wider padding to suit the pill shape */
+    --form-px-sm: 16px;
+    --form-px-md: 20px;
+    --form-px-lg: 24px;
+    --button-px-sm: 18px;
+    --button-px-md: 22px;
+    --button-px-lg: 28px;
+    --button-icon-p-sm: 8px;
+    --button-icon-p-md: 10px;
+    --button-icon-p-lg: 12px;
+
+    /* Chip tier — grow badges/pills/tags/keycaps to match the spacious controls.
+       Radius rides --radius-base (24px → pill), so only padding is set here. */
+    --badge-px-sm: 8px;
+    --badge-px-md: 10px;
+    --badge-py-sm: 2px;
+    --badge-py-md: 4px;
+    --badge-pill-px-sm: 12px;
+    --badge-pill-px-md: 14px;
+    --pill-px-sm: 14px;
+    --pill-px-md: 14px;
+    --pill-px-lg: 18px;
+    --pill-py-sm: 4px;
+    --pill-py-md: 4px;
+    --pill-py-lg: 6px;
+    --tag-px-sm: 12px;
+    --tag-px-md: 12px;
+    --tag-pl-md: 14px;
+    --tag-py-sm: 4px;
+    --tag-py-md: 4px;
+    --kbd-px-sm: 8px;
+    --kbd-px-md: 10px;
+  }
+
+  .dark {
+    /* One step lighter on dark surfaces, matching Iris/Jade: orange-500 keeps
+       saturated white-on-coral legible without reading washy like -400 would
+       on a big filled button. */
+    --color-primary: var(--color-primary-500);
+
+    /* Zinc in light, NEUTRAL in dark. Mid/deep zinc rungs read violet-tinted
+       against the hueless dark surfaces (#171717…) — same judgment as
+       Iris's "slate reads navy" — so the whole dark ramp reverts to the base
+       hueless values; light keeps the cool zinc cast. */
+    --color-mono-50: oklch(98.5% 0 0);
+    --color-mono-100: oklch(97% 0 0);
+    --color-mono-200: oklch(92.2% 0 0);
+    --color-mono-300: oklch(87% 0 0);
+    --color-mono-400: oklch(70.8% 0 0);
+    --color-mono-500: oklch(55.6% 0 0);
+    --color-mono-600: oklch(43.9% 0 0);
+    --color-mono-700: oklch(37.1% 0 0);
+    --color-mono-800: oklch(26.9% 0 0);
+    --color-mono-900: oklch(20.5% 0 0);
+    --color-mono-950: oklch(14.5% 0 0);
+
+    /* Restated verbatim from styles.css .dark (see authoring rules above) */
+    --color-border: oklch(100% 0.01 255 / 0.05);
+    --color-border-secondary: oklch(100% 0.01 255 / 0.1);
+    --color-border-hover: oklch(100% 0.01 255 / 0.18);
+  }
+}

package/dist/themes/iris.css

@@ -0,0 +1,94 @@
+/* ============================================================
+   @flikk/ui — Iris theme
+   Indigo primary × Bricolage Grotesque × rounder geometry × slate neutrals.
+
+   Usage (import AFTER styles.css):
+     import "@flikk/ui/styles.css";
+     import "@flikk/ui/themes/iris.css";
+
+   Theme-file authoring rules (applies to every preset theme):
+   - All rules live in `@layer theme` — an unlayered :root would beat the
+     layered `.dark` overrides in styles.css and break dark mode.
+   - Any token overridden here in :root that styles.css ALSO overrides in
+     `.dark` MUST get an explicit `.dark` value below (this file is later in
+     source order, so its :root wins over styles.css's `.dark` otherwise).
+   - Never redeclare `--color-*-contrast` — it auto-derives from the live
+     base var (see CLAUDE.md §3).
+   ============================================================ */
+@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap");
+
+@layer theme {
+  :root {
+    /* Primary — Tailwind v4 indigo ramp */
+    --color-primary-50: oklch(96.2% 0.018 272.314);
+    --color-primary-100: oklch(93% 0.034 272.788);
+    --color-primary-200: oklch(87% 0.065 274.039);
+    --color-primary-300: oklch(78.5% 0.115 274.713);
+    --color-primary-400: oklch(67.3% 0.182 276.935);
+    --color-primary-500: oklch(58.5% 0.233 277.117);
+    --color-primary-600: oklch(51.1% 0.262 276.966);
+    --color-primary-700: oklch(45.7% 0.24 277.023);
+    --color-primary-800: oklch(39.8% 0.195 277.366);
+    --color-primary-900: oklch(35.9% 0.144 278.697);
+    --color-primary-950: oklch(25.7% 0.09 281.288);
+    --color-primary: var(--color-primary-600);
+
+    /* Neutrals — Tailwind v4 slate ramp (cool cast on text/fills; dark text
+       tokens reference these rungs by var(), so dark picks the cast up too) */
+    --color-mono-50: oklch(98.4% 0.003 247.858);
+    --color-mono-100: oklch(96.8% 0.007 247.896);
+    --color-mono-200: oklch(92.9% 0.013 255.508);
+    --color-mono-300: oklch(86.9% 0.022 252.894);
+    --color-mono-400: oklch(70.4% 0.04 256.788);
+    --color-mono-500: oklch(55.4% 0.046 257.417);
+    --color-mono-600: oklch(44.6% 0.043 257.281);
+    --color-mono-700: oklch(37.2% 0.044 257.287);
+    --color-mono-800: oklch(27.9% 0.041 260.031);
+    --color-mono-900: oklch(20.8% 0.042 265.755);
+    --color-mono-950: oklch(12.9% 0.042 264.695);
+
+    /* Borders — slate-tinted hairlines at the same lightness rungs as the
+       base theme's neutral borders (93% / 87% / 80%) */
+    --color-border: oklch(92.9% 0.013 255.508);
+    --color-border-secondary: oklch(86.9% 0.022 252.894);
+    --color-border-hover: oklch(80% 0.03 255);
+
+    /* Typography */
+    --font-family-base: "Bricolage Grotesque", var(--font-sans);
+
+    /* Geometry — rounder, friendlier; every --*-radius derives from this */
+    --radius-base: 16px;
+  }
+
+  .dark {
+    /* Hue ramps read one step lighter on dark surfaces: indigo-400 filled
+       controls keep white text via the auto -contrast formula */
+    --color-primary: var(--color-primary-400);
+
+    /* Slate in light, NEUTRAL in dark. Mid/deep slate rungs read navy against
+       the hueless dark surfaces (#171717…) — visible anywhere a component
+       legitimately paints from the ramp in dark (Button/Badge soft-neutral
+       fills, disabled text/fill tokens, …). The base theme itself makes this
+       call (dark text-secondary is hardcoded hueless: "slate was too blue").
+       So the whole dark ramp reverts to the base hueless values; light keeps
+       the slate cast. Text tokens need no pins — placeholder/muted alpha-derive
+       from text-primary, and the rest resolve through these rungs. */
+    --color-mono-50: oklch(98.5% 0 0);
+    --color-mono-100: oklch(97% 0 0);
+    --color-mono-200: oklch(92.2% 0 0);
+    --color-mono-300: oklch(87% 0 0);
+    --color-mono-400: oklch(70.8% 0 0);
+    --color-mono-500: oklch(55.6% 0 0);
+    --color-mono-600: oklch(43.9% 0 0);
+    --color-mono-700: oklch(37.1% 0 0);
+    --color-mono-800: oklch(26.9% 0 0);
+    --color-mono-900: oklch(20.5% 0 0);
+    --color-mono-950: oklch(14.5% 0 0);
+
+    /* Restated verbatim from styles.css .dark (see authoring rules above) —
+       the translucent light hairlines already carry a cool hue */
+    --color-border: oklch(100% 0.01 255 / 0.05);
+    --color-border-secondary: oklch(100% 0.01 255 / 0.1);
+    --color-border-hover: oklch(100% 0.01 255 / 0.18);
+  }
+}

package/dist/themes/jade.css

@@ -0,0 +1,139 @@
+/* ============================================================
+   @flikk/ui — Jade theme
+   Emerald primary × Poppins × pill geometry × warm stone neutrals.
+
+   Usage (import AFTER styles.css):
+     import "@flikk/ui/styles.css";
+     import "@flikk/ui/themes/jade.css";
+
+   Theme-file authoring rules (applies to every preset theme):
+   - All rules live in `@layer theme` — an unlayered :root would beat the
+     layered `.dark` overrides in styles.css and break dark mode.
+   - Any token overridden here in :root that styles.css ALSO overrides in
+     `.dark` MUST get an explicit `.dark` value below (this file is later in
+     source order, so its :root wins over styles.css's `.dark` otherwise).
+   - Never redeclare `--color-*-contrast` — it auto-derives from the live
+     base var (see CLAUDE.md §3).
+   ============================================================ */
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap");
+
+@layer theme {
+  :root {
+    /* Primary — Tailwind v4 emerald ramp */
+    --color-primary-50: oklch(97.9% 0.021 166.113);
+    --color-primary-100: oklch(95% 0.052 163.051);
+    --color-primary-200: oklch(90.5% 0.093 164.15);
+    --color-primary-300: oklch(84.5% 0.143 164.978);
+    --color-primary-400: oklch(76.5% 0.177 163.223);
+    --color-primary-500: oklch(69.6% 0.17 162.48);
+    --color-primary-600: oklch(59.6% 0.145 163.225);
+    --color-primary-700: oklch(50.8% 0.118 165.612);
+    --color-primary-800: oklch(43.2% 0.095 166.913);
+    --color-primary-900: oklch(37.8% 0.077 168.94);
+    --color-primary-950: oklch(26.2% 0.051 172.552);
+    --color-primary: var(--color-primary-600);
+
+    /* Neutrals — Tailwind v4 stone ramp (warm cast; jade-and-sandstone
+       pairing). Dark text tokens reference these rungs by var(), and
+       placeholder/muted alpha-derive from text-primary automatically. */
+    --color-mono-50: oklch(98.5% 0.001 106.423);
+    --color-mono-100: oklch(97% 0.001 106.424);
+    --color-mono-200: oklch(92.3% 0.003 48.717);
+    --color-mono-300: oklch(86.9% 0.005 56.366);
+    --color-mono-400: oklch(70.9% 0.01 56.259);
+    --color-mono-500: oklch(55.3% 0.013 58.071);
+    --color-mono-600: oklch(44.4% 0.011 73.639);
+    --color-mono-700: oklch(37.4% 0.01 67.558);
+    --color-mono-800: oklch(26.8% 0.007 34.298);
+    --color-mono-900: oklch(21.6% 0.006 56.043);
+    --color-mono-950: oklch(14.7% 0.004 49.25);
+
+    /* Borders — stone-tinted hairlines at the base lightness rungs
+       (93% / 87% / 80%) */
+    --color-border: oklch(92.3% 0.003 48.717);
+    --color-border-secondary: oklch(86.9% 0.005 56.366);
+    --color-border-hover: oklch(80% 0.008 56);
+
+    /* Typography — Poppins on a 14px-based text scale (--font-scale multiplies
+       the whole --text-* ramp, rounded to whole px; text-sm 12px, text-base
+       14px). Spacing and the px geometry tokens below are unaffected. */
+    --font-family-base: "Poppins", var(--font-sans);
+    --font-scale: 0.875;
+
+    /* Geometry — pill-leaning: at the taller control heights below, buttons
+       and inputs read as soft pills; cards round to 30px */
+    --radius-base: 20px;
+
+    /* Card padding — roomier to suit the taller, pill-leaning geometry */
+    --card-px: 32px;
+    --card-py: 32px;
+
+    /* Taller, comfier controls (base: 32/40/48). Buttons inherit via
+       --button-min-h-* = var(--form-min-h-*). */
+    --form-min-h-sm: 36px;
+    --form-min-h-md: 44px;
+    --form-min-h-lg: 52px;
+
+    /* Wider padding to suit the pill shape */
+    --form-px-sm: 14px;
+    --form-px-md: 18px;
+    --form-px-lg: 20px;
+    --button-px-sm: 16px;
+    --button-px-md: 20px;
+    --button-px-lg: 24px;
+    --button-icon-p-sm: 8px;
+    --button-icon-p-md: 10px;
+    --button-icon-p-lg: 12px;
+
+    /* Chip tier — grow badges/pills/tags/keycaps to match the taller controls.
+       Radius rides --radius-base (20px → pill), so only padding is set here. */
+    --badge-px-sm: 7px;
+    --badge-px-md: 9px;
+    --badge-py-sm: 1px;
+    --badge-py-md: 3px;
+    --badge-pill-px-sm: 11px;
+    --badge-pill-px-md: 13px;
+    --pill-px-sm: 13px;
+    --pill-px-md: 13px;
+    --pill-px-lg: 16px;
+    --pill-py-sm: 3px;
+    --pill-py-md: 3px;
+    --pill-py-lg: 5px;
+    --tag-px-sm: 11px;
+    --tag-px-md: 11px;
+    --tag-pl-md: 13px;
+    --tag-py-sm: 3px;
+    --tag-py-md: 3px;
+    --kbd-px-sm: 7px;
+    --kbd-px-md: 9px;
+  }
+
+  .dark {
+    /* One step lighter on dark surfaces. -500, not -400: the emerald ramp
+       runs light (400 = L 0.765) and the auto -contrast crossover would still
+       give it white text — washy on a big filled button. 500 keeps saturated
+       white-on-green legible. */
+    --color-primary: var(--color-primary-500);
+
+    /* Stone in light, NEUTRAL in dark. Warm stone rungs read muddy-brown
+       against the hueless dark surfaces (#171717…) — same judgment as Iris's
+       "slate reads navy" — so the whole dark ramp reverts to the base hueless
+       values; light keeps the warm cast. */
+    --color-mono-50: oklch(98.5% 0 0);
+    --color-mono-100: oklch(97% 0 0);
+    --color-mono-200: oklch(92.2% 0 0);
+    --color-mono-300: oklch(87% 0 0);
+    --color-mono-400: oklch(70.8% 0 0);
+    --color-mono-500: oklch(55.6% 0 0);
+    --color-mono-600: oklch(43.9% 0 0);
+    --color-mono-700: oklch(37.1% 0 0);
+    --color-mono-800: oklch(26.9% 0 0);
+    --color-mono-900: oklch(20.5% 0 0);
+    --color-mono-950: oklch(14.5% 0 0);
+
+    /* Restated verbatim from styles.css .dark (see authoring rules above) */
+    --color-border: oklch(100% 0.01 255 / 0.05);
+    --color-border-secondary: oklch(100% 0.01 255 / 0.1);
+    --color-border-hover: oklch(100% 0.01 255 / 0.18);
+  }
+}