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

package/src/styles/theme.test.ts

@@ -0,0 +1,119 @@
+import { readdirSync, readFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+
+import { describe, expect, it } from "vitest";
+
+const themeCss = readFileSync(
+  resolve(process.cwd(), "src/styles/theme.css"),
+  "utf8",
+);
+
+/**
+ * CSS comments do NOT nest and are terminated by the FIRST `*​/`. Writing a
+ * token glob like `--button-px-*` immediately before a `/` (e.g. the shorthand
+ * `--button-px-*​/--form-px-*`) therefore closes the comment early: the prose
+ * that follows is parsed as CSS, and it swallows the next declaration up to the
+ * first `;` — silently deleting a token that still *looks* defined in source.
+ *
+ * That is exactly how `--badge-radius` went missing (every non-pill Badge
+ * rendered with square corners, because `border-radius: var(--badge-radius)`
+ * had no definition to resolve). Stripping comments the way a real parser does
+ * — non-greedy, first-terminator-wins — leaves a stray `*​/` behind whenever it
+ * happens, which is what these tests assert on.
+ */
+const stripComments = (css: string) => css.replace(/\/\*[\s\S]*?\*\//g, "");
+
+describe("theme.css", () => {
+  it("has no comment that terminates early", () => {
+    const strays = stripComments(themeCss)
+      .split("\n")
+      .map((line, i) => ({ line: line.trim(), number: i + 1 }))
+      .filter(({ line }) => line.includes("*/"));
+
+    expect(strays).toEqual([]);
+  });
+
+  it("defines every custom property the chip tier consumes", () => {
+    // Split on declaration boundaries and keep only chunks that *start* with a
+    // custom property, the way a parser sees them. Matching `--x:` anywhere
+    // would also match the leaked prose of an early-terminated comment — i.e.
+    // it would report the very token that got swallowed as still defined.
+    const declared = new Set(
+      stripComments(themeCss)
+        .split(/[;{}]/)
+        .map((chunk) => /^\s*(--[a-z0-9-]+)\s*:/.exec(chunk)?.[1])
+        .filter((name): name is string => name !== undefined),
+    );
+
+    // --badge-radius is the token the early-terminated comment ate; the rest
+    // are its immediate neighbours, which pin the boundaries of the damage.
+    for (const token of [
+      "--badge-radius",
+      "--badge-radius-sm",
+      "--badge-radius-md",
+      "--badge-px-sm",
+      "--badge-py-sm",
+      "--badge-pill-px-sm",
+      "--pill-px-sm",
+      "--tag-px-sm",
+      "--kbd-px-sm",
+    ]) {
+      expect(declared).toContain(token);
+    }
+  });
+
+  /**
+   * A named utility like `text-sm` compiles to font-size AND Tailwind's paired
+   * `--text-sm--line-height`. An arbitrary `text-[length:var(--x)]` carries
+   * font-size ONLY — leading silently falls back to normal/1.5. So every
+   * per-role size token must be consumed with the `/[var(--…)]` modifier, or a
+   * theme can resize a title but never re-lead it.
+   *
+   * This scans real source rather than a hardcoded list, so a NEW size token
+   * that ships without its line-height partner fails here immediately.
+   */
+  it("pairs every per-role font-size token with a line-height token", () => {
+    const declared = new Set(
+      stripComments(themeCss)
+        .split(/[;{}]/)
+        .map((chunk) => /^\s*(--[a-z0-9-]+)\s*:/.exec(chunk)?.[1])
+        .filter((name): name is string => name !== undefined),
+    );
+
+    const collectThemeFiles = (dir: string): string[] =>
+      readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+        const path = join(dir, entry.name);
+        if (entry.isDirectory()) return collectThemeFiles(path);
+        return entry.name.endsWith(".theme.ts") ? [path] : [];
+      });
+
+    const themeFiles = collectThemeFiles(
+      resolve(process.cwd(), "src/components"),
+    );
+
+    const unpaired: string[] = [];
+    const undeclaredLineHeight: string[] = [];
+
+    for (const file of themeFiles) {
+      const source = readFileSync(file, "utf8");
+      // Each `text-[length:var(--x)]` occurrence, plus whatever directly follows,
+      // so we can tell a paired `/[var(--y)]` from a bare size.
+      for (const match of source.matchAll(
+        /text-\[length:var\((--[a-z0-9-]+)\)\](\/\[var\((--[a-z0-9-]+)\)\])?/g,
+      )) {
+        const [, sizeToken, pairing, lineHeightToken] = match;
+        if (!pairing) {
+          unpaired.push(`${file}: ${sizeToken}`);
+          continue;
+        }
+        if (!declared.has(lineHeightToken)) {
+          undeclaredLineHeight.push(`${file}: ${lineHeightToken}`);
+        }
+        expect(declared).toContain(sizeToken);
+      }
+    }
+
+    expect(unpaired).toEqual([]);
+    expect(undeclaredLineHeight).toEqual([]);
+  });
+});

package/tailwind.preset.cjs

@@ -3,6 +3,17 @@
  * Usage (Tailwind v3/v4 config file):
  *   module.exports = { presets: [require('flikkui/tailwind.preset.cjs')] }
  * This maps Flikkui CSS variables to Tailwind color tokens like bg-primary.
+ *
+ * DEFAULT of each semantic color points at the bare base var (var(--color-primary),
+ * not a fixed rung) so `bg-primary` resolves to exactly what the library's own
+ * components paint, and follows the active theme + dark mode automatically:
+ * the monochrome base theme aliases --color-primary -> -900, a colored theme
+ * (e.g. iris) sets it -> -600. Numbered utilities (bg-primary-600) are unchanged.
+ *
+ * `contrast` on each semantic color is the auto-derived foreground for a FILLED
+ * surface of that color (text-primary-contrast on bg-primary) — see CLAUDE.md §3.
+ * It is derived in pure CSS from the live base var, so it tracks any theme and
+ * both modes; never substitute a hardcoded text-white.
  */
 
 module.exports = {
@@ -21,7 +32,8 @@ module.exports = {
           800: 'var(--color-primary-800)',
           900: 'var(--color-primary-900)',
           950: 'var(--color-primary-950)',
-          DEFAULT: 'var(--color-primary-600)'
+          DEFAULT: 'var(--color-primary)',
+          contrast: 'var(--color-primary-contrast)'
         },
         danger: {
           50: 'var(--color-danger-50)',
@@ -35,7 +47,8 @@ module.exports = {
           800: 'var(--color-danger-800)',
           900: 'var(--color-danger-900)',
           950: 'var(--color-danger-950)',
-          DEFAULT: 'var(--color-danger-600)'
+          DEFAULT: 'var(--color-danger)',
+          contrast: 'var(--color-danger-contrast)'
         },
         success: {
           50: 'var(--color-success-50)',
@@ -49,7 +62,8 @@ module.exports = {
           800: 'var(--color-success-800)',
           900: 'var(--color-success-900)',
           950: 'var(--color-success-950)',
-          DEFAULT: 'var(--color-success-500)'
+          DEFAULT: 'var(--color-success)',
+          contrast: 'var(--color-success-contrast)'
         },
         warning: {
           50: 'var(--color-warning-50)',
@@ -63,7 +77,27 @@ module.exports = {
           800: 'var(--color-warning-800)',
           900: 'var(--color-warning-900)',
           950: 'var(--color-warning-950)',
-          DEFAULT: 'var(--color-warning-600)'
+          DEFAULT: 'var(--color-warning)',
+          contrast: 'var(--color-warning-contrast)'
+        },
+        // The gray/neutral role. Named `mono` (not `neutral`) on purpose:
+        // mapping `neutral` here would override Tailwind's own built-in neutral
+        // palette, so a consumer could no longer reach Tailwind's real neutral.
+        // `mono` leaves neutral/slate/zinc/gray/stone intact for the consumer.
+        mono: {
+          50: 'var(--color-mono-50)',
+          100: 'var(--color-mono-100)',
+          200: 'var(--color-mono-200)',
+          300: 'var(--color-mono-300)',
+          400: 'var(--color-mono-400)',
+          500: 'var(--color-mono-500)',
+          600: 'var(--color-mono-600)',
+          700: 'var(--color-mono-700)',
+          800: 'var(--color-mono-800)',
+          900: 'var(--color-mono-900)',
+          950: 'var(--color-mono-950)',
+          DEFAULT: 'var(--color-mono)',
+          contrast: 'var(--color-mono-contrast)'
         },
         text: {
           primary: 'var(--color-text-primary)',
@@ -73,43 +107,37 @@ module.exports = {
           disabled: 'var(--color-text-disabled)',
           inverse: 'var(--color-text-inverse)'
         },
-        background: {
-          DEFAULT: 'var(--color-background)',
-          secondary: 'var(--color-background-secondary)',
-          tertiary: 'var(--color-background-tertiary)',
-          quaternary: 'var(--color-background-quaternary)',
-          quinary: 'var(--color-background-quinary)'
+        // Page/app floor. (background-secondary..quinary were deprecated — use the surface ladder.)
+        background: 'var(--color-background)',
+        // Surface elevation ladder — see docs/SURFACE_ELEVATION.md.
+        surface: {
+          DEFAULT: 'var(--color-surface)',
+          raised: 'var(--color-surface-raised)',
+          overlay: 'var(--color-surface-overlay)',
+          sunken: 'var(--color-surface-sunken)',
+          hover: 'var(--color-surface-hover)'
         },
-        border: 'var(--color-border)',
-        secondary: {
-          50: 'var(--color-secondary-50)',
-          100: 'var(--color-secondary-100)',
-          200: 'var(--color-secondary-200)',
-          300: 'var(--color-secondary-300)',
-          400: 'var(--color-secondary-400)',
-          500: 'var(--color-secondary-500)',
-          600: 'var(--color-secondary-600)',
-          700: 'var(--color-secondary-700)',
-          800: 'var(--color-secondary-800)',
-          900: 'var(--color-secondary-900)',
-          950: 'var(--color-secondary-950)',
-          DEFAULT: 'var(--color-secondary-600)'
+        border: {
+          DEFAULT: 'var(--color-border)',
+          secondary: 'var(--color-border-secondary)',
+          hover: 'var(--color-border-hover)'
         },
-        neutral: {
-          50: 'var(--color-neutral-50)',
-          100: 'var(--color-neutral-100)',
-          200: 'var(--color-neutral-200)',
-          300: 'var(--color-neutral-300)',
-          400: 'var(--color-neutral-400)',
-          500: 'var(--color-neutral-500)',
-          600: 'var(--color-neutral-600)',
-          700: 'var(--color-neutral-700)',
-          800: 'var(--color-neutral-800)',
-          900: 'var(--color-neutral-900)',
-          950: 'var(--color-neutral-950)',
-          DEFAULT: 'var(--color-neutral-500)'
+        // Categorical chart series palette + the unfilled-track color, for consumers
+        // building their own visuals alongside @flikk/ui/charts (charts themselves are
+        // `config`-driven and never take a className — see CLAUDE.md §19).
+        // NOTE: the matching --color-chart-N-contrast tokens are deliberately NOT mapped
+        // here — they are declared in @theme and unreferenced by library source, so
+        // Tailwind prunes them from the light block of the shipped styles.css and they
+        // resolve only under .dark. Map them once they are defined outside @theme.
+        chart: {
+          1: 'var(--color-chart-1)',
+          2: 'var(--color-chart-2)',
+          3: 'var(--color-chart-3)',
+          4: 'var(--color-chart-4)',
+          5: 'var(--color-chart-5)',
+          track: 'var(--color-chart-track)'
         },
-        dark: 'var(--color-neutral-950)'
+        dark: 'var(--color-mono-950)'
       },
       fontFamily: {
         sans: ['var(--font-family-base)', 'sans-serif']

package/dist/components/charts/FunnelChart/FunnelChart.animations.d.ts

@@ -1,35 +0,0 @@
-import type { Variants, Transition } from 'motion/react';
-/**
- * Animation variants for FunnelChart segments
- */
-export declare const segmentVariants: Variants;
-/**
- * Animation variants for vertical orientation segments
- */
-export declare const verticalSegmentVariants: Variants;
-/**
- * Animation variants for labels
- */
-export declare const labelVariants: Variants;
-/**
- * Animation variants for conversion badges
- */
-export declare const badgeVariants: Variants;
-/**
- * Animation variants for summary box
- */
-export declare const summaryVariants: Variants;
-/**
- * Hover animation for segments
- */
-export declare const hoverTransition: Transition;
-/**
- * Default animation settings
- */
-export declare const funnelAnimationDefaults: {
-    staggerDelay: number;
-    segmentDuration: number;
-    labelDelay: number;
-    badgeDelay: number;
-    summaryDelay: number;
-};

package/dist/components/charts/FunnelChart/FunnelChart.animations.js

@@ -1,59 +0,0 @@
-/**
- * Animation variants for FunnelChart segments
- */
-/**
- * Animation variants for labels
- */
-const labelVariants = {
-    hidden: {
-        opacity: 0,
-        y: -10,
-    },
-    visible: (index) => ({
-        opacity: 1,
-        y: 0,
-        transition: {
-            delay: index * 0.08 + 0.2,
-            duration: 0.3,
-            ease: 'easeOut',
-        },
-    }),
-};
-/**
- * Animation variants for conversion badges
- */
-const badgeVariants = {
-    hidden: {
-        opacity: 0,
-        scale: 0.8,
-    },
-    visible: (index) => ({
-        opacity: 1,
-        scale: 1,
-        transition: {
-            delay: index * 0.08 + 0.3,
-            duration: 0.25,
-            ease: 'easeOut',
-        },
-    }),
-};
-/**
- * Animation variants for summary box
- */
-const summaryVariants = {
-    hidden: {
-        opacity: 0,
-        x: 20,
-    },
-    visible: {
-        opacity: 1,
-        x: 0,
-        transition: {
-            delay: 0.5,
-            duration: 0.3,
-            ease: 'easeOut',
-        },
-    },
-};
-
-export { badgeVariants, labelVariants, summaryVariants };

package/dist/components/charts/FunnelChart/FunnelChart.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import type { FunnelChartProps } from "./FunnelChart.types";
-/**
- * Displays conversion funnel data with trapezoid shapes showing progressive
- * dropoff. The render keeps the chart surface focused: stage-level detail lives
- * in labels/tooltips while conversion and dropoff badges appear on focus.
- */
-export declare const FunnelChart: React.FC<FunnelChartProps>;