129 lines
3.6 KiB
JavaScript
129 lines
3.6 KiB
JavaScript
/**
|
|
* Reformix — Tailwind config extensions
|
|
* Stack: Next.js 14 + Tailwind + shadcn/ui
|
|
*
|
|
* Cómo usar:
|
|
* En tu tailwind.config.{js,ts} del proyecto, mergea esta config:
|
|
*
|
|
* import reformixTheme from './design/tailwind.config.ext.js'
|
|
* export default {
|
|
* content: [...],
|
|
* theme: {
|
|
* extend: {
|
|
* ...reformixTheme.theme.extend,
|
|
* },
|
|
* },
|
|
* }
|
|
*
|
|
* Si usas shadcn/ui, mantén su tema base y extiende encima con esto.
|
|
*/
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
const reformixTheme = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: {
|
|
50: '#F4F8F5',
|
|
100: '#E8F0EB',
|
|
300: '#A8C8B5',
|
|
500: '#4D8A6D',
|
|
700: '#2F5C46',
|
|
900: '#1F3A2E',
|
|
DEFAULT: '#2F5C46', // primary-700
|
|
},
|
|
accent: {
|
|
100: '#FAEAE0',
|
|
400: '#E08A5F',
|
|
600: '#C25E33',
|
|
900: '#7A3517',
|
|
DEFAULT: '#C25E33', // accent-600
|
|
},
|
|
neutral: {
|
|
50: '#F7F8F7',
|
|
100: '#EDEFED',
|
|
200: '#DDE0DD',
|
|
300: '#C4C9C4',
|
|
400: '#9DA29D',
|
|
500: '#7A807A',
|
|
700: '#4A4E4A',
|
|
900: '#262826',
|
|
950: '#161816',
|
|
},
|
|
success: {
|
|
100: '#E0F0E6',
|
|
500: '#4DAA73',
|
|
700: '#2D7A4F',
|
|
},
|
|
warning: {
|
|
100: '#FAEFD3',
|
|
500: '#DA9A2C',
|
|
700: '#9A6B0E',
|
|
},
|
|
danger: {
|
|
100: '#FAE0DA',
|
|
500: '#D85940',
|
|
700: '#A8331F',
|
|
},
|
|
info: {
|
|
100: '#DDEDF5',
|
|
500: '#3D8AAA',
|
|
700: '#1F5C7A',
|
|
},
|
|
},
|
|
fontFamily: {
|
|
display: ['Instrument Serif', 'Georgia', 'serif'],
|
|
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
|
mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
|
|
},
|
|
fontSize: {
|
|
xs: ['0.75rem', { lineHeight: '1.5' }],
|
|
sm: ['0.875rem', { lineHeight: '1.5' }],
|
|
base: ['1rem', { lineHeight: '1.6' }],
|
|
lg: ['1.125rem', { lineHeight: '1.5' }],
|
|
xl: ['1.25rem', { lineHeight: '1.4' }],
|
|
'2xl': ['1.5rem', { lineHeight: '1.3' }],
|
|
'3xl': ['1.875rem', { lineHeight: '1.3' }],
|
|
'4xl': ['2.25rem', { lineHeight: '1.2' }],
|
|
'5xl': ['3rem', { lineHeight: '1.1' }],
|
|
'6xl': ['3.75rem', { lineHeight: '1.05' }],
|
|
'7xl': ['4.5rem', { lineHeight: '1.0' }],
|
|
},
|
|
borderRadius: {
|
|
sm: '4px',
|
|
md: '6px',
|
|
lg: '10px',
|
|
xl: '14px',
|
|
'2xl': '20px',
|
|
full: '9999px',
|
|
},
|
|
boxShadow: {
|
|
xs: '0 1px 2px rgba(22, 24, 22, 0.05)',
|
|
sm: '0 1px 3px rgba(22, 24, 22, 0.08), 0 1px 2px rgba(22, 24, 22, 0.04)',
|
|
DEFAULT: '0 1px 3px rgba(22, 24, 22, 0.08), 0 1px 2px rgba(22, 24, 22, 0.04)',
|
|
md: '0 4px 6px rgba(22, 24, 22, 0.07), 0 2px 4px rgba(22, 24, 22, 0.04)',
|
|
lg: '0 10px 15px rgba(22, 24, 22, 0.08), 0 4px 6px rgba(22, 24, 22, 0.05)',
|
|
xl: '0 20px 25px rgba(22, 24, 22, 0.1), 0 10px 10px rgba(22, 24, 22, 0.04)',
|
|
glow: '0 0 0 4px rgba(47, 92, 70, 0.15)',
|
|
},
|
|
maxWidth: {
|
|
narrow: '720px',
|
|
default: '1200px',
|
|
wide: '1440px',
|
|
},
|
|
transitionDuration: {
|
|
fast: '150ms',
|
|
base: '250ms',
|
|
slow: '400ms',
|
|
},
|
|
transitionTimingFunction: {
|
|
out: 'cubic-bezier(0.16, 1, 0.3, 1)',
|
|
in: 'cubic-bezier(0.7, 0, 0.84, 0)',
|
|
'in-out': 'cubic-bezier(0.65, 0, 0.35, 1)',
|
|
},
|
|
},
|
|
},
|
|
}
|
|
|
|
module.exports = reformixTheme
|