@cloudraker/reki 2.6.1

package/scripts/theme-generator/config.ts

@@ -0,0 +1,653 @@
+/**
+ * Reki Theme Configuration
+ *
+ * Single source of truth for all semantic color tokens and typography.
+ * This config is used to generate:
+ * - theme-reki.css (base theme)
+ * - theme-fedramp.css (fedramp 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}
+   */
+  text: {
+    "reki-default": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-neutral-900, oklch(21% 0.006 285.885))",
+          dark: "var(--color-neutral-100, oklch(97% 0 0))",
+        },
+      },
+    },
+    "reki-inverse": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-neutral-100, oklch(97% 0 0))",
+          dark: "var(--color-neutral-900, oklch(20.5% 0 0))",
+        },
+      },
+    },
+    "reki-strong": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-neutral-950, oklch(14.5% 0 0))", // darker than default
+          dark: "var(--color-neutral-50, oklch(98.5% 0 0))", // lighter than default
+        },
+      },
+    },
+    "reki-subtle": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-neutral-500, oklch(55.6% 0 0))", // lighter than default
+          dark: "var(--color-neutral-400, oklch(70.8% 0 0))", // darker than default
+        },
+      },
+    },
+    "reki-inactive": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-neutral-300, oklch(87% 0 0))", // lighter than subtle
+          dark: "var(--color-neutral-600, oklch(43.9% 0 0))", // darker than subtle
+        },
+      },
+    },
+    "reki-placeholder": { // in between subtle and inactive
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-neutral-400, oklch(70.8% 0 0))",
+          dark: "var(--color-neutral-500, oklch(55.6% 0 0))", 
+        },
+      },
+    },
+    "reki-brand": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "oklch(0.53 0.15 274)",
+          dark: "oklch(0.63 0.15 274)",
+        },
+      },
+    },
+    "reki-link": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-blue-800, oklch(42.4% 0.199 265.638))",
+          dark: "var(--color-blue-400, oklch(70.7% 0.165 254.624))",
+        },
+      },
+    },
+    "reki-info": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-blue-800, oklch(42.4% 0.199 265.638))",
+          dark: "var(--color-blue-400, oklch(70.7% 0.165 254.624))",
+        },
+      },
+    },
+    "reki-success": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-emerald-800, oklch(43.2% 0.095 166.913))",
+          dark: "var(--color-emerald-200, oklch(90.5% 0.093 164.15))",
+        },
+      },
+    },
+    "reki-danger": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-red-700, oklch(50.5% 0.213 27.518))",
+          dark: "var(--color-red-400, oklch(70.4% 0.191 22.216))",
+        },
+      },
+    },
+    "reki-warning": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-yellow-800, oklch(47.6% 0.114 61.907))",
+          dark: "var(--color-yellow-400, oklch(85.2% 0.199 91.936))",
+        },
+      },
+    },
+
+    /*
+     * Badge text color tokens
+     * Subtle variants need colored text; inverted needs flipping text
+     */
+    "reki-badge-orange-subtle": {
+      newName: "",
+      description: "Text color for subtle orange badge",
+      theme: {
+        reki: {
+          light: "var(--color-orange-800, oklch(47% 0.157 37.304))",
+          dark: "var(--color-orange-200, oklch(90.1% 0.076 70.697))",
+        },
+      },
+    },
+    "reki-badge-teal-subtle": {
+      newName: "",
+      description: "Text color for subtle teal badge",
+      theme: {
+        reki: {
+          light: "var(--color-teal-800, oklch(43.7% 0.078 188.216))",
+          dark: "var(--color-teal-200, oklch(91% 0.096 180.426))",
+        },
+      },
+    },
+    "reki-badge-neutral-subtle": {
+      newName: "",
+      description: "Text color for subtle neutral badge",
+      theme: {
+        reki: {
+          light: "var(--color-neutral-800, oklch(26.9% 0 0))",
+          dark: "var(--color-neutral-200, oklch(92.2% 0 0))",
+        },
+      },
+    },
+    "reki-badge-inverted": {
+      newName: "",
+      description:
+        "Text color for inverted badge (white in light, black in dark)",
+      theme: {
+        reki: {
+          light: "var(--color-white, #fff)",
+          dark: "var(--color-black, #000)",
+        },
+      },
+    },
+  },
+
+  /**
+   * Color tokens
+   * Used with: bg-{token}, border-{token}, ring-{token}, etc.
+   * CSS variable: --color-{token}
+   */
+  color: {
+    "reki-canvas": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-reki-neutral-25, oklch(98.75% 0 0))",
+          dark: "var(--color-reki-neutral-1000, oklch(10% 0 0))",
+        },
+        fedramp: {
+          light: "#5b697c",
+          dark: "#5b697c",
+        },
+      },
+    },
+    "reki-elevated": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-reki-neutral-75, oklch(98% 0 0))",
+          dark: "var(--color-reki-neutral-975, oklch(12% 0 0))",
+        },
+      },
+    },
+    "reki-recessed": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-reki-neutral-125, oklch(96% 0 0))",
+          dark: "var(--color-reki-neutral-950, oklch(15% 0 0))",
+        },
+      },
+    },
+    "reki-base": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-white, #fff)",
+          dark: "var(--color-reki-neutral-925, oklch(17% 0 0))",
+        },
+        fedramp: {
+          light: "#5b697c",
+          dark: "#5b697c",
+        },
+      },
+    },
+    "reki-tint": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-neutral-100, oklch(97% 0 0))",
+          dark: "var(--color-reki-neutral-800, oklch(26.9% 0 0))",
+        },
+      },
+    },
+    "reki-contrast": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-reki-neutral-975, oklch(8.5% 0 0))",
+          dark: "var(--color-reki-neutral-25, oklch(98.5% 0 0))",
+        },
+      },
+    },
+    "reki-overlay": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-reki-neutral-50, oklch(97.5% 0 0))",
+          dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
+        },
+      },
+    },
+    "reki-control": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-white, #fff)",
+          dark: "var(--color-neutral-900, oklch(21% 0.006 285.885))",
+        },
+      },
+    },
+    "reki-interact": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-neutral-300, oklch(87% 0 0))",
+          dark: "var(--color-neutral-700, oklch(37.1% 0 0))",
+        },
+      },
+    },
+    "reki-fill": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-neutral-200, oklch(92.2% 0 0))",
+          dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
+        },
+      },
+    },
+    "reki-fill-hover": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-reki-neutral-125, oklch(96.5% 0 0))",
+          dark: "var(--color-neutral-800, oklch(37.1% 0 0))",
+        },
+      },
+    },
+    "reki-brand": {
+      newName: "",
+      theme: {
+        reki: {
+
+          light: "oklch(0.53 0.15 274)",
+          
+          dark: "color-mix(in oklch, oklch(0.53 0.15 274), black 10%)",
+        },
+      },
+    },
+    "reki-brand-hover": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "color-mix(in oklch, oklch(0.53 0.15 274), black 10%)",
+          dark: "color-mix(in oklch, oklch(0.53 0.15 274), white 10%)",
+        },
+      },
+    },
+    "reki-line": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "oklch(14.5% 0 0 / 0.1)",
+          dark: "var(--color-reki-neutral-750, oklch(32% 0 0))",
+        },
+      },
+    },
+    "reki-hairline": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-reki-neutral-150, oklch(93.5% 0 0))",
+          dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
+      },
+        fedramp: {
+          light: "#c8d4e5",
+          dark: "#c8d4e5",
+        },
+      },
+    },
+    "reki-focus": {
+      newName: "",
+      description: "Primary focus ring/border color",
+      theme: {
+        reki: {
+          light: "var(--color-reki-neutral-950, oklch(15% 0 0))",
+          dark: "var(--color-reki-neutral-150, oklch(93.5% 0 0))",
+        },
+      },
+    },
+    "reki-shadow-edge": {
+      newName: "",
+      description: "Tight spread shadow color for control thumbs/knobs",
+      theme: {
+        reki: {
+          light: "oklch(0% 0 0 / 0.12)",
+          dark: "oklch(100% 0 0 / 0.1)",
+        },
+      },
+    },
+    "reki-shadow-drop": {
+      newName: "",
+      description: "Drop shadow color for control thumbs/knobs",
+      theme: {
+        reki: {
+          light: "oklch(0% 0 0 / 0.08)",
+          dark: "oklch(0% 0 0 / 0.3)",
+        },
+      },
+    },
+    "reki-tip-shadow": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-gray-200, oklch(92.8% 0.006 264.531))",
+          dark: "transparent",
+        },
+      },
+    },
+    "reki-tip-stroke": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "transparent",
+          dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
+        },
+      },
+    },
+    "reki-info-tint": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-blue-100, oklch(93.2% 0.032 255.585))",
+          dark: "var(--color-blue-900, oklch(37.9% 0.146 265.522))",
+        },
+      },
+    },
+    "reki-info": {
+      newName: "",
+      // Aligned with fill.reki-info so `bg-reki-info` matches `fill-reki-info`.
+      theme: {
+        reki: {
+          light: "var(--color-blue-500, oklch(68.5% 0.169 237.323))",
+          dark: "var(--color-blue-400, oklch(70.7% 0.165 254.624))",
+        },
+      },
+    },
+    "reki-warning-tint": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-yellow-100, oklch(97.3% 0.071 103.193))",
+          dark: "var(--color-yellow-700, oklch(55.4% 0.135 66.442))",
+        },
+      },
+    },
+    "reki-warning": {
+      newName: "",
+      // Aligned with fill.reki-warning so `bg-reki-warning` matches `fill-reki-warning`.
+      theme: {
+        reki: {
+          light: "var(--color-yellow-500, oklch(79.5% 0.184 86.047))",
+          dark: "var(--color-yellow-400, oklch(85.2% 0.199 91.936))",
+        },
+      },
+    },
+    "reki-danger-tint": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-red-100, oklch(93.6% 0.032 17.717))",
+          dark: "var(--color-red-900, oklch(39.6% 0.141 25.723))",
+        },
+      },
+    },
+    "reki-danger": {
+      newName: "",
+      // Aligned with fill.reki-danger so `bg-reki-danger` matches `fill-reki-danger`.
+      theme: {
+        reki: {
+          light: "var(--color-red-500, oklch(63.7% 0.237 25.331))",
+          dark: "var(--color-red-600, oklch(57.7% 0.245 27.325))",
+        },
+      },
+    },
+    "reki-success-tint": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-emerald-100, oklch(95% 0.052 163.051))",
+          dark: "var(--color-emerald-900, oklch(37.8% 0.077 168.94))",
+        },
+      },
+    },
+    "reki-success": {
+      newName: "",
+      theme: {
+        reki: {
+          light: "var(--color-emerald-600, oklch(59.6% 0.145 163.225))",
+          dark: "var(--color-emerald-400, oklch(76.5% 0.177 163.223))",
+        },
+      },
+    },
+
+    /*
+     * Banner background tokens
+     * Pre-baked opacity per mode so banners don't need dark: overrides.
+     * Mirrors the *-tint hues but tuned for the Banner component's surface contrast.
+     */
+    "reki-banner-info": {
+      newName: "",
+      description: "Info banner background (informational/default variant)",
+      theme: {
+        reki: {
+          light: "oklch(93.2% 0.032 255.585 / 0.7)",
+          dark: "oklch(37.9% 0.146 265.522 / 0.5)",
+        },
+      },
+    },
+    "reki-banner-warning": {
+      newName: "",
+      description: "Warning banner background (alert variant)",
+      theme: {
+        reki: {
+          light: "var(--color-yellow-100, oklch(97.3% 0.071 103.193))",
+          dark: "oklch(55.4% 0.135 66.442 / 0.5)",
+        },
+      },
+    },
+
+    /*
+     * Badge color tokens
+     * Solid variants: vivid background, white text
+     * Subtle variants: tinted background, darker text (flips in dark mode)
+     */
+
+    // Red
+    "reki-badge-red": {
+      newName: "",
+      description: "Red badge background",
+      theme: {
+        reki: {
+          light: "var(--color-red-600, oklch(57.7% 0.245 27.325))",
+          dark: "var(--color-red-700, oklch(50.5% 0.213 27.518))",
+        },
+      },
+    },
+
+    // Green
+    "reki-badge-green": {
+      newName: "",
+      description: "Green badge background",
+      theme: {
+        reki: {
+          light: "var(--color-emerald-600, oklch(59.6% 0.145 163.225))",
+          dark: "var(--color-emerald-700, oklch(50.8% 0.118 165.612))",
+        },
+      },
+    },
+
+    // Orange
+    "reki-badge-orange": {
+      newName: "",
+      description: "Orange badge background",
+      theme: {
+        reki: {
+          light: "var(--color-orange-650, oklch(81.5% 0.197 76))",
+          dark: "var(--color-orange-650, oklch(81.5% 0.197 76))",
+        },
+      },
+    },
+
+    // Purple
+    "reki-badge-purple": {
+      newName: "",
+      description: "Purple badge background",
+      theme: {
+        reki: {
+          light: "var(--color-purple-600, oklch(60% 0.118 184.704))",
+          dark: "var(--color-purple-700, oklch(50.8% 0.118 165.612))",
+        },
+      },
+    },
+
+    // Teal
+    "reki-badge-teal": {
+      newName: "",
+      description: "Teal badge background",
+      theme: {
+        reki: {
+          light: "var(--color-teal-650, oklch(54.9% 0.096 184.565))",
+          dark: "var(--color-teal-700, oklch(51.1% 0.096 186.391))",
+        },
+      },
+    },
+
+    // Blue
+    "reki-badge-blue": {
+      newName: "",
+      description: "Blue badge background",
+      theme: {
+        reki: {
+          light: "var(--color-blue-600, oklch(54.6% 0.245 262.881))",
+          dark: "var(--color-blue-700, oklch(48.8% 0.243 264.376))",
+        },
+      },
+    },
+
+    // Neutral
+    "reki-badge-neutral": {
+      newName: "",
+      description: "Neutral badge background",
+      theme: {
+        reki: {
+          light: "var(--color-neutral-500, oklch(55.6% 0 0))",
+          dark: "var(--color-neutral-600, oklch(43.9% 0 0))",
+        },
+      },
+    },
+    // NOTE: reki-badge-neutral-subtle omitted — same pair as reki-fill.
+    // Badge uses bg-reki-fill instead.
+
+    // Inverted
+    "reki-badge-inverted": {
+      newName: "",
+      description:
+        "Inverted badge background (near-black in light, white in dark)",
+      theme: {
+        reki: {
+          light: "var(--color-neutral-950, oklch(14.5% 0 0))",
+          dark: "var(--color-white, #fff)",
+        },
+      },
+    },
+  },
+
+  /**
+   * 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: {
+        reki: "12px",
+      },
+    },
+    "xs--line-height": {
+      newName: "",
+      theme: {
+        reki: "calc(1 / 0.75)",
+      },
+    },
+    sm: {
+      newName: "",
+      theme: {
+        reki: "13px",
+      },
+    },
+    "sm--line-height": {
+      newName: "",
+      theme: {
+        reki: "calc(1 / 0.85)",
+      },
+    },
+    base: {
+      newName: "",
+      theme: {
+        reki: "14px",
+      },
+    },
+    "base--line-height": {
+      newName: "",
+      theme: {
+        reki: "calc(1.25 / 0.875)",
+      },
+    },
+    lg: {
+      newName: "",
+      theme: {
+        reki: "16px",
+      },
+    },
+    "lg--line-height": {
+      newName: "",
+      theme: {
+        reki: "calc(1.25 / 1)",
+      },
+    },
+  },
+};
+
+/** List of all available themes */
+export const AVAILABLE_THEMES = ["reki", "fedramp"] as const;
+export type AvailableTheme = (typeof AVAILABLE_THEMES)[number];

package/scripts/theme-generator/generate-css.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+import { THEME_CONFIG } from "./config";
+import { generateRekiThemeCSS, generateThemeOverrideCSS } from "./generate-css";
+
+function countOccurrences(source: string, needle: string): number {
+  return source.split(needle).length - 1;
+}
+
+describe("theme css generator", () => {
+  it("emits reki runtime fallback selectors inside base layer", () => {
+    const css = generateRekiThemeCSS(THEME_CONFIG);
+
+    expect(css).toContain("@layer base {");
+    expect(css).toContain(':root, [data-theme="reki"] {');
+    expect(css).toContain(
+      ':root[data-mode="dark"], [data-mode="dark"]:not([data-theme]), [data-mode="dark"] [data-theme="reki"], [data-theme="reki"][data-mode="dark"], [data-theme="reki"] [data-mode="dark"] {',
+    );
+  });
+
+  it("emits override theme runtime fallbacks in base layers only", () => {
+    const css = generateThemeOverrideCSS(THEME_CONFIG, "fedramp");
+
+    expect(countOccurrences(css, "@layer base {")).toBe(2);
+    expect(css).toContain('  [data-theme="fedramp"] {');
+    expect(css).toContain(
+      '  [data-mode="dark"] [data-theme="fedramp"], [data-theme="fedramp"][data-mode="dark"], [data-theme="fedramp"] [data-mode="dark"] {',
+    );
+    expect(css).not.toMatch(/\n\[data-theme="fedramp"\] \{/);
+  });
+});