feat: initial @jason/ui-kit — tokens, preset, components, motion, blocks, Impeccable

2026-07-16 00:36:53 -05:00
commit b75012525d
36 changed files with 1324 additions and 0 deletions
@@ -0,0 +1,70 @@
+/**
+ * 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 v = (name) => `hsl(var(${name}) / <alpha-value>)`;
+
+/** @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") },
+        success: v("--success"),
+        warning: v("--warning"),
+        danger: v("--danger"),
+        info: v("--info"),
+      },
+      fontFamily: {
+        display: ['"Montserrat"', "system-ui", "sans-serif"],
+        sans: ['"Open Sans"', "system-ui", "sans-serif"],
+        mono: ['"JetBrains Mono"', "ui-monospace", "monospace"],
+      },
+      borderRadius: { sm: "6px", DEFAULT: "10px", md: "10px", lg: "14px", xl: "20px" },
+      boxShadow: {
+        sm: "0 1px 2px 0 rgb(20 16 18 / 0.20)",
+        DEFAULT: "0 4px 12px -2px rgb(20 16 18 / 0.28), 0 2px 4px -2px rgb(20 16 18 / 0.20)",
+        md: "0 4px 12px -2px rgb(20 16 18 / 0.28), 0 2px 4px -2px rgb(20 16 18 / 0.20)",
+        lg: "0 12px 32px -8px rgb(20 16 18 / 0.40), 0 4px 8px -4px rgb(20 16 18 / 0.24)",
+        glow: "0 0 0 1px rgb(220 187 79 / 0.20), 0 8px 28px -6px rgb(220 187 79 / 0.28)",
+      },
+      transitionTimingFunction: {
+        out: "cubic-bezier(0.22, 1, 0.36, 1)",
+        "in-out": "cubic-bezier(0.65, 0, 0.35, 1)",
+      },
+      transitionDuration: { fast: "120ms", DEFAULT: "180ms", base: "180ms", slow: "320ms" },
+      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: [],
+};