ui-kit/tailwind-preset.cjs

/**
 * Shared Tailwind preset. Consuming apps do:
 *   // tailwind.config.js
 *   module.exports = {
 *     presets: [require("@jason/ui-kit/preset")],
 *     content: [
 *       "./src/**\/*.{ts,tsx}",
 *       "./node_modules/@jason/ui-kit/dist/**\/*.js"  // so component classes aren't purged
 *     ],
 *   };
 *
 * Colors are driven by CSS variables (see styles/globals.css) so light/dark and
 * per-app rebranding work without recompiling the preset.
 */
const tokens = require("./src/lib/tokens.json");
const v = (name) => `hsl(var(${name}) / <alpha-value>)`;
const family = (value) => value.split(",").map((part) => part.trim().replace(/^"|"$/g, ""));

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ["class"],
  theme: {
    extend: {
      colors: {
        bg: v("--bg"),
        surface: v("--surface"),
        "surface-2": v("--surface-2"),
        border: v("--border"),
        input: v("--border"),
        ring: v("--brand"),
        text: v("--text"),
        muted: v("--muted"),
        brand: {
          DEFAULT: v("--brand"),
          bright: v("--brand-bright"),
          dark: v("--brand-dark"),
          foreground: v("--brand-foreground"),
        },
        success: { DEFAULT: v("--success"), foreground: v("--success-foreground") },
        warning: { DEFAULT: v("--warning"), foreground: v("--warning-foreground") },
        danger: { DEFAULT: v("--danger"), foreground: v("--danger-foreground") },
        info: { DEFAULT: v("--info"), foreground: v("--info-foreground") },
      },
      fontFamily: {
        display: family(tokens.font.display),
        sans: family(tokens.font.sans),
        mono: family(tokens.font.mono),
      },
      borderRadius: {
        sm: tokens.radius.sm,
        DEFAULT: tokens.radius.md,
        md: tokens.radius.md,
        lg: tokens.radius.lg,
        xl: tokens.radius.xl,
      },
      boxShadow: {
        sm: tokens.shadow.sm,
        DEFAULT: tokens.shadow.md,
        md: tokens.shadow.md,
        lg: tokens.shadow.lg,
        glow: tokens.shadow.glow,
      },
      transitionTimingFunction: {
        out: tokens.ease.out,
        "in-out": tokens.ease.inOut,
      },
      transitionDuration: {
        fast: tokens.duration.fast,
        DEFAULT: tokens.duration.base,
        base: tokens.duration.base,
        slow: tokens.duration.slow,
      },
      keyframes: {
        "fade-in": { from: { opacity: "0" }, to: { opacity: "1" } },
        "fade-up": { from: { opacity: "0", transform: "translateY(8px)" }, to: { opacity: "1", transform: "translateY(0)" } },
        "scale-in": { from: { opacity: "0", transform: "scale(0.97)" }, to: { opacity: "1", transform: "scale(1)" } },
        shimmer: { from: { backgroundPosition: "200% 0" }, to: { backgroundPosition: "-200% 0" } },
      },
      animation: {
        "fade-in": "fade-in 180ms cubic-bezier(0.22,1,0.36,1)",
        "fade-up": "fade-up 320ms cubic-bezier(0.22,1,0.36,1)",
        "scale-in": "scale-in 180ms cubic-bezier(0.22,1,0.36,1)",
        shimmer: "shimmer 2.2s linear infinite",
      },
    },
  },
  plugins: [],
};