Jason
71 lines
2.8 KiB
JavaScript
Executable File
71 lines
2.8 KiB
JavaScript
Executable File
/**
|
|
* 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: [],
|
|
};
|