@signalflare-ai/ui 0.5.0

package/scripts/generate-primitives.ts

@@ -0,0 +1,178 @@
+/**
+ * Generates src/primitives/index.ts and individual primitive files
+ * by reading @base-ui-components/react exports.
+ *
+ * Also updates package.json with granular primitive exports.
+ *
+ * Run: bun run build:primitives
+ */
+
+import { readFileSync, writeFileSync, mkdirSync, existsSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const PRIMITIVES_DIR = join(__dirname, "../src/primitives");
+const PRIMITIVES_FILE = join(PRIMITIVES_DIR, "index.ts");
+const PACKAGE_JSON = join(__dirname, "../package.json");
+const BASE_UI_PACKAGE = join(
+  __dirname,
+  "../node_modules/@base-ui/react/package.json"
+);
+
+// Subpaths to exclude from re-export (internal/utility exports)
+const EXCLUDED_EXPORTS = new Set([
+  "./package.json",
+  "./types",
+  "./esm", // Internal ESM build directory
+  "./unstable-no-ssr",
+  "./unstable-use-media-query", // Unstable API
+  "./merge-props", // Utility, not a component
+  "./use-render", // Internal hook
+]);
+
+function main() {
+  // Read base-ui package.json
+  if (!existsSync(BASE_UI_PACKAGE)) {
+    console.error("❌ @base-ui/react not found. Run bun install first.");
+    process.exit(1);
+  }
+
+  const packageJson = JSON.parse(readFileSync(BASE_UI_PACKAGE, "utf-8"));
+  const exports = packageJson.exports || {};
+
+  // Extract and sort component subpaths alphabetically
+  const subpaths = Object.keys(exports)
+    .filter((key) => key.startsWith("./") && !EXCLUDED_EXPORTS.has(key))
+    .sort();
+
+  // Ensure directory exists
+  if (!existsSync(PRIMITIVES_DIR)) {
+    mkdirSync(PRIMITIVES_DIR, { recursive: true });
+  }
+
+  // Generate barrel export (index.ts)
+  generateBarrelExport(subpaths);
+
+  // Generate individual primitive files
+  generateIndividualPrimitives(subpaths);
+
+  // Update package.json with granular exports
+  updatePackageJsonExports(subpaths);
+
+  console.log(`✓ Generated primitives`);
+  console.log(`  → ${subpaths.length} base-ui exports`);
+  console.log(`  → Barrel export: src/primitives/index.ts`);
+  console.log(`  → Individual files: src/primitives/*.ts`);
+  console.log(`  → Updated package.json exports`);
+}
+
+function generateBarrelExport(subpaths: string[]) {
+  const lines: string[] = [
+    "/**",
+    " * Base UI Primitives - Barrel Export",
+    " *",
+    " * Auto-generated from @base-ui/react exports.",
+    " * Run `bun run build:primitives` to regenerate.",
+    " *",
+    " * Re-exports all primitives for convenience.",
+    " *",
+    " * @example",
+    " * ```tsx",
+    " * // Import multiple primitives",
+    " * import { Popover, Slider, Tooltip } from '@signalflare-ai/ui/primitives';",
+    " * ```",
+    " */",
+    "",
+  ];
+
+  // Add exports alphabetically
+  for (const subpath of subpaths) {
+    const modulePath = `@base-ui/react/${subpath.replace("./", "")}`;
+    lines.push(`export * from "${modulePath}";`);
+  }
+  lines.push("");
+
+  writeFileSync(PRIMITIVES_FILE, lines.join("\n"));
+}
+
+function generateIndividualPrimitives(subpaths: string[]) {
+  for (const subpath of subpaths) {
+    const primitiveName = subpath.replace("./", "");
+    const primitiveFile = join(PRIMITIVES_DIR, `${primitiveName}.ts`);
+    const modulePath = `@base-ui/react/${primitiveName}`;
+
+    const content = [
+      "/**",
+      ` * ${primitiveName} primitive`,
+      " *",
+      " * Auto-generated from @base-ui/react.",
+      " * Run `bun run build:primitives` to regenerate.",
+      " *",
+      " * @example",
+      " * ```tsx",
+      ` * import { ${toPascalCase(primitiveName)} } from '@signalflare-ai/ui/primitives/${primitiveName}';`,
+      " * ```",
+      " */",
+      "",
+      `export * from "${modulePath}";`,
+      "",
+    ].join("\n");
+
+    writeFileSync(primitiveFile, content);
+  }
+}
+
+function updatePackageJsonExports(subpaths: string[]) {
+  const pkg = JSON.parse(readFileSync(PACKAGE_JSON, "utf-8"));
+
+  // Find the "./primitives" export and add granular exports after it
+  const primitiveExports: Record<string, any> = {
+    "./primitives": {
+      types: "./dist/src/primitives/index.d.ts",
+      import: "./dist/primitives.js",
+    },
+  };
+
+  // Add granular exports for each primitive
+  for (const subpath of subpaths) {
+    const primitiveName = subpath.replace("./", "");
+    primitiveExports[`./primitives/${primitiveName}`] = {
+      types: `./dist/src/primitives/${primitiveName}.d.ts`,
+      import: `./dist/primitives/${primitiveName}.js`,
+    };
+  }
+
+  // Rebuild exports object with primitives section
+  const newExports: Record<string, any> = {};
+  let addedPrimitives = false;
+
+  for (const [key, value] of Object.entries(pkg.exports)) {
+    newExports[key] = value;
+
+    // Add primitive exports after the main "./primitives" export
+    if (key === "./primitives" && !addedPrimitives) {
+      // Add all granular primitive exports
+      for (const [primKey, primValue] of Object.entries(primitiveExports)) {
+        if (primKey !== "./primitives") {
+          newExports[primKey] = primValue;
+        }
+      }
+      addedPrimitives = true;
+    }
+  }
+
+  pkg.exports = newExports;
+  writeFileSync(PACKAGE_JSON, JSON.stringify(pkg, null, 2) + "\n");
+}
+
+function toPascalCase(str: string): string {
+  return str
+    .split("-")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join("");
+}
+
+main();

package/scripts/theme-generator/config.ts

@@ -0,0 +1,538 @@
+/**
+ * SF Theme Configuration
+ *
+ * Single source of truth for all semantic color tokens and typography.
+ * This config is used to generate:
+ * - theme-sf.css (base theme)
+ * - theme-fedramp.css (fedramp overrides)
+ * - theme-minimal.css (minimal/borderless overrides)
+ * - Any future theme files
+ *
+ * Token naming:
+ * - Key = current token name used in codebase
+ * - newName = future name (empty string = no migration planned)
+ */
+
+import type { ThemeConfig } from "./types.js";
+
+export const THEME_CONFIG: ThemeConfig = {
+  /**
+   * Text color tokens
+   * Used with: text-{token}
+   * CSS variable: --text-color-{token}
+   *
+   * Core text colors (default, inverse, strong) reference navigator vars.
+   * Everything else uses original sf defaults.
+   */
+  text: {
+    "sf-default": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--foreground, oklch(0.145 0 0))",
+          dark: "var(--foreground, oklch(0.985 0 0))",
+        },
+      },
+    },
+    "sf-inverse": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--primary-foreground, oklch(0.985 0 0))",
+          dark: "var(--primary-foreground, oklch(0.145 0 0))",
+        },
+      },
+    },
+    "sf-strong": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--muted-foreground, oklch(0.556 0 0))",
+          dark: "var(--muted-foreground, oklch(0.65 0 0))",
+        },
+        minimal: {
+          light: "oklch(0.50 0 0)",
+          dark: "oklch(0.55 0 0)",
+        },
+      },
+    },
+    "sf-subtle": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-neutral-500, oklch(55.6% 0 0))",
+          dark: "var(--color-neutral-50, oklch(98.5% 0 0))",
+        },
+        minimal: {
+          light: "oklch(0.55 0 0)",
+          dark: "oklch(0.45 0 0)",
+        },
+      },
+    },
+    "sf-inactive": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-neutral-400, oklch(70.8% 0 0))",
+          dark: "var(--color-neutral-600, oklch(70.8% 0 0))",
+        },
+        minimal: {
+          light: "oklch(0.65 0 0)",
+          dark: "oklch(0.35 0 0)",
+        },
+      },
+    },
+    "sf-brand": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "#f6821f",
+          dark: "#f6821f",
+        },
+      },
+    },
+    "sf-link": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-blue-800, oklch(42.4% 0.199 265.638))",
+          dark: "var(--color-blue-400, oklch(70.7% 0.165 254.624))",
+        },
+      },
+    },
+    "sf-success": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-green-500, oklch(72.3% 0.219 149.579))",
+          dark: "var(--color-green-500, oklch(72.3% 0.219 149.579))",
+        },
+      },
+    },
+    "sf-danger": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--destructive, oklch(0.577 0.245 27.325))",
+          dark: "var(--destructive, oklch(0.55 0.18 25))",
+        },
+        minimal: {
+          light: "oklch(0.55 0.12 25)",
+          dark: "oklch(0.55 0.10 25)",
+        },
+      },
+    },
+    "sf-warning": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-yellow-800, oklch(47.6% 0.114 61.907))",
+          dark: "var(--color-yellow-400, oklch(85.2% 0.199 91.936))",
+        },
+        minimal: {
+          light: "oklch(0.55 0.08 66)",
+          dark: "oklch(0.65 0.08 66)",
+        },
+      },
+    },
+  },
+
+  /**
+   * Color tokens
+   * Used with: bg-{token}, border-{token}, ring-{token}, etc.
+   * CSS variable: --color-{token}
+   *
+   * Surface colors (base, contrast), borders (line, interact, ring),
+   * and brand reference navigator vars.
+   * Everything else uses original sf defaults.
+   */
+  color: {
+    "sf-canvas": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-neutral-50, oklch(0.985 0 0))",
+          dark: "var(--color-neutral-950, oklch(0.14 0 0))",
+        },
+        fedramp: {
+          light: "#5b697c",
+          dark: "#5b697c",
+        },
+        minimal: {
+          light: "oklch(0.95 0 0)",
+          dark: "oklch(0.10 0 0)",
+        },
+      },
+    },
+    "sf-base": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--background, oklch(1 0 0))",
+          dark: "var(--background, oklch(0.21 0.005 252))",
+        },
+        fedramp: {
+          light: "#5b697c",
+          dark: "#5b697c",
+        },
+        minimal: {
+          light: "oklch(0.97 0 0)",
+          dark: "oklch(0.14 0 0)",
+        },
+      },
+    },
+    "sf-elevated": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-neutral-25, oklch(0.99 0 0))",
+          dark: "var(--background, oklch(0.21 0.005 252))",
+        },
+        minimal: {
+          light: "oklch(1 0 0)",
+          dark: "oklch(0.22 0 0)",
+        },
+      },
+    },
+    "sf-recessed": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-neutral-250, oklch(0.9 0 0))",
+          dark: "var(--color-neutral-750, oklch(0.31 0 0))",
+        },
+        minimal: {
+          light: "oklch(0.92 0 0)",
+          dark: "oklch(0.10 0 0)",
+        },
+      },
+    },
+    "sf-overlay": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-neutral-50, oklch(98.5% 0 0))",
+          dark: "var(--color-neutral-950, oklch(0.10 0 0))",
+        },
+        minimal: {
+          light: "oklch(0.93 0 0)",
+          dark: "oklch(0.10 0 0)",
+        },
+      },
+    },
+    "sf-contrast": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--primary, oklch(0.205 0 0))",
+          dark: "var(--primary, oklch(0.55 0.01 40))",
+        },
+        minimal: {
+          light: "oklch(0.35 0 0)",
+          dark: "oklch(0.75 0 0)",
+        },
+      },
+    },
+    "sf-control": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-white, #fff)",
+          dark: "var(--color-neutral-900, oklch(21% 0.006 285.885))",
+        },
+        minimal: {
+          light: "oklch(0.95 0 0)",
+          dark: "oklch(0.17 0 0)",
+        },
+      },
+    },
+    "sf-tint": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-neutral-150, oklch(0.96 0 0))",
+          dark: "var(--color-neutral-850, oklch(0.23 0 0))",
+        },
+        minimal: {
+          light: "oklch(0.94 0 0)",
+          dark: "oklch(0.19 0 0)",
+        },
+      },
+    },
+    "sf-interact": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--border, oklch(0.922 0 0))",
+          dark: "var(--border, oklch(0.3 0.015 250))",
+        },
+      },
+    },
+    "sf-fill": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-neutral-200, oklch(92.2% 0 0))",
+          dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
+        },
+        minimal: {
+          light: "oklch(0.91 0 0)",
+          dark: "oklch(0.27 0 0)",
+        },
+      },
+    },
+    "sf-fill-hover": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-neutral-200, oklch(92.2% 0 0))",
+          dark: "var(--color-neutral-700, oklch(37.1% 0 0))",
+        },
+        minimal: {
+          light: "oklch(0.88 0 0)",
+          dark: "oklch(0.31 0 0)",
+        },
+      },
+    },
+    "sf-brand": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "oklch(0.5772 0.2324 260)",
+          dark: "oklch(0.5772 0.2324 260)",
+        },
+        minimal: {
+          light: "oklch(0.55 0.06 260)",
+          dark: "oklch(0.55 0.06 260)",
+        },
+      },
+    },
+    "sf-brand-hover": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-blue-700, oklch(48.8% 0.243 264.376))",
+          dark: "var(--color-blue-700, oklch(48.8% 0.243 264.376))",
+        },
+        minimal: {
+          light: "oklch(0.48 0.05 264)",
+          dark: "oklch(0.48 0.05 264)",
+        },
+      },
+    },
+    "sf-line": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--border, oklch(0.922 0 0))",
+          dark: "var(--border, oklch(0.3 0.015 250))",
+        },
+        minimal: {
+          light: "oklch(0.85 0 0 / 0.5)",
+          dark: "oklch(0.25 0 0 / 0.5)",
+        },
+      },
+    },
+    "sf-ring": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--ring, oklch(0.708 0 0))",
+          dark: "var(--ring, oklch(0.465 0.015 250))",
+        },
+        fedramp: {
+          light: "#c8d4e5",
+          dark: "#c8d4e5",
+        },
+        minimal: {
+          light: "oklch(0.65 0 0)",
+          dark: "oklch(0.45 0 0)",
+        },
+      },
+    },
+    "sf-tip-shadow": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-gray-200, oklch(92.8% 0.006 264.531))",
+          dark: "transparent",
+        },
+        minimal: {
+          light: "transparent",
+          dark: "transparent",
+        },
+      },
+    },
+    "sf-tip-stroke": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "transparent",
+          dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
+        },
+        minimal: {
+          light: "transparent",
+          dark: "transparent",
+        },
+      },
+    },
+    "sf-info": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-blue-500, oklch(62.3% 0.214 259.815))",
+          dark: "var(--color-blue-700, oklch(48.8% 0.243 264.376))",
+        },
+        minimal: {
+          light: "oklch(0.55 0.06 260)",
+          dark: "oklch(0.55 0.06 260)",
+        },
+      },
+    },
+    "sf-info-tint": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-blue-300, oklch(80.9% 0.105 251.813))",
+          dark: "var(--color-blue-900, oklch(37.9% 0.146 265.522))",
+        },
+        minimal: {
+          light: "oklch(0.94 0.01 260)",
+          dark: "oklch(0.20 0.02 260)",
+        },
+      },
+    },
+    "sf-warning": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-yellow-500, oklch(79.5% 0.184 86.047))",
+          dark: "var(--color-yellow-700, oklch(55.4% 0.135 66.442))",
+        },
+        minimal: {
+          light: "oklch(0.55 0.08 66)",
+          dark: "oklch(0.65 0.08 66)",
+        },
+      },
+    },
+    "sf-warning-tint": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-yellow-300, oklch(90.5% 0.182 98.111))",
+          dark: "var(--color-yellow-900, oklch(42.1% 0.095 57.708))",
+        },
+        minimal: {
+          light: "oklch(0.94 0.02 60)",
+          dark: "oklch(0.22 0.03 60)",
+        },
+      },
+    },
+    "sf-danger": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--destructive, oklch(0.577 0.245 27.325))",
+          dark: "var(--destructive, oklch(0.55 0.18 25))",
+        },
+        minimal: {
+          light: "oklch(0.55 0.12 25)",
+          dark: "oklch(0.55 0.10 25)",
+        },
+      },
+    },
+    "sf-danger-tint": {
+      newName: "",
+      theme: {
+        sf: {
+          light: "var(--color-red-300, oklch(80.8% 0.114 19.571))",
+          dark: "var(--color-red-900, oklch(39.6% 0.141 25.723))",
+        },
+        minimal: {
+          light: "oklch(0.94 0.02 25)",
+          dark: "oklch(0.20 0.04 25)",
+        },
+      },
+    },
+  },
+
+  /**
+   * Typography tokens
+   * Used with: text-{size} utilities
+   * CSS variables: --text-{size}, --text-{size}--line-height
+   *
+   * Note: Typography is NOT theme-dependent (no light/dark mode).
+   * Values are the same across color modes but may differ per theme.
+   */
+  typography: {
+    xs: {
+      newName: "",
+      theme: {
+        sf: "12px",
+      },
+    },
+    "xs--line-height": {
+      newName: "",
+      theme: {
+        sf: "calc(1 / 0.75)",
+      },
+    },
+    sm: {
+      newName: "",
+      theme: {
+        sf: "13px",
+      },
+    },
+    "sm--line-height": {
+      newName: "",
+      theme: {
+        sf: "calc(1 / 0.85)",
+      },
+    },
+    base: {
+      newName: "",
+      theme: {
+        sf: "14px",
+      },
+    },
+    "base--line-height": {
+      newName: "",
+      theme: {
+        sf: "calc(1.25 / 0.875)",
+      },
+    },
+    lg: {
+      newName: "",
+      theme: {
+        sf: "16px",
+      },
+    },
+    "lg--line-height": {
+      newName: "",
+      theme: {
+        sf: "calc(1.25 / 1)",
+      },
+    },
+  },
+};
+
+/** List of all available themes */
+export const AVAILABLE_THEMES = ["sf", "fedramp", "minimal"] as const;
+export type AvailableTheme = (typeof AVAILABLE_THEMES)[number];
+
+/**
+ * Extra raw CSS lines appended inside [data-theme="..."] for each theme.
+ * Used for overrides that don't fit the token system (e.g. Tailwind shadow vars).
+ */
+export const THEME_EXTRAS: Record<string, string[]> = {
+  minimal: [
+    "/* Shadow overrides — flatten all elevation */",
+    "--shadow-2xs: 0 0 0 0 transparent;",
+    "--shadow-xs: 0 0 0 0 transparent;",
+    "--shadow-sm: 0 0 0 0 transparent;",
+    "--shadow-md: 0 0 0 0 transparent;",
+    "--shadow-lg: 0 0 0 0 transparent;",
+    "--shadow-xl: 0 0 0 0 transparent;",
+    "--shadow-2xl: 0 0 0 0 transparent;",
+  ],
+};