138 lines
4.6 KiB
TypeScript
138 lines
4.6 KiB
TypeScript
import type { Config } from 'tailwindcss';
|
|
|
|
const config: Config = {
|
|
darkMode: ['class'],
|
|
content: [
|
|
'./pages/**/*.{ts,tsx}',
|
|
'./components/**/*.{ts,tsx}',
|
|
'./app/**/*.{ts,tsx}',
|
|
'./src/**/*.{ts,tsx}',
|
|
],
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: '2rem',
|
|
screens: {
|
|
'2xl': '1400px',
|
|
},
|
|
},
|
|
extend: {
|
|
colors: {
|
|
// Xpeditis Brand Colors
|
|
'brand-navy': '#10183A',
|
|
'brand-turquoise': '#34CCCD',
|
|
'brand-green': '#067224',
|
|
'brand-gray': '#F2F2F2',
|
|
|
|
// Shadcn UI colors (keep for components compatibility)
|
|
border: 'hsl(var(--border))',
|
|
input: 'hsl(var(--input))',
|
|
ring: 'hsl(var(--ring))',
|
|
background: 'hsl(var(--background))',
|
|
foreground: 'hsl(var(--foreground))',
|
|
primary: {
|
|
DEFAULT: '#10183A', // Override with brand navy
|
|
foreground: '#FFFFFF',
|
|
navy: '#10183A',
|
|
},
|
|
secondary: {
|
|
DEFAULT: 'hsl(var(--secondary))',
|
|
foreground: 'hsl(var(--secondary-foreground))',
|
|
},
|
|
destructive: {
|
|
DEFAULT: 'hsl(var(--destructive))',
|
|
foreground: 'hsl(var(--destructive-foreground))',
|
|
},
|
|
muted: {
|
|
DEFAULT: 'hsl(var(--muted))',
|
|
foreground: 'hsl(var(--muted-foreground))',
|
|
},
|
|
accent: {
|
|
DEFAULT: '#34CCCD', // Override with brand turquoise
|
|
foreground: '#FFFFFF',
|
|
turquoise: '#34CCCD',
|
|
},
|
|
popover: {
|
|
DEFAULT: 'hsl(var(--popover))',
|
|
foreground: 'hsl(var(--popover-foreground))',
|
|
},
|
|
card: {
|
|
DEFAULT: 'hsl(var(--card))',
|
|
foreground: 'hsl(var(--card-foreground))',
|
|
},
|
|
// Success color
|
|
success: {
|
|
DEFAULT: '#067224',
|
|
light: '#08a131',
|
|
dark: '#044f19',
|
|
},
|
|
// Neutral scale (Navy-based)
|
|
neutral: {
|
|
50: '#f8f9fc',
|
|
100: '#edeef5',
|
|
200: '#dadbeb',
|
|
300: '#b0b6da',
|
|
400: '#8590c9',
|
|
500: '#5a6bb8',
|
|
600: '#3a4a97',
|
|
700: '#2c3978',
|
|
800: '#1e2859',
|
|
900: '#10183A',
|
|
},
|
|
},
|
|
fontFamily: {
|
|
manrope: ['var(--font-manrope)', 'sans-serif'],
|
|
montserrat: ['var(--font-montserrat)', 'sans-serif'],
|
|
// Semantic aliases
|
|
heading: ['var(--font-manrope)', 'sans-serif'],
|
|
body: ['var(--font-montserrat)', 'sans-serif'],
|
|
sans: ['var(--font-montserrat)', 'sans-serif'],
|
|
},
|
|
fontSize: {
|
|
// Display sizes
|
|
'display-lg': ['4.5rem', { lineHeight: '1.1', letterSpacing: '-0.02em', fontWeight: '800' }],
|
|
'display-md': ['3.75rem', { lineHeight: '1.15', letterSpacing: '-0.02em', fontWeight: '700' }],
|
|
'display-sm': ['3rem', { lineHeight: '1.2', letterSpacing: '-0.01em', fontWeight: '700' }],
|
|
// Heading sizes
|
|
'h1': ['2.5rem', { lineHeight: '1.25', fontWeight: '700' }],
|
|
'h2': ['2rem', { lineHeight: '1.3', fontWeight: '600' }],
|
|
'h3': ['1.5rem', { lineHeight: '1.35', fontWeight: '600' }],
|
|
'h4': ['1.25rem', { lineHeight: '1.4', fontWeight: '600' }],
|
|
'h5': ['1.125rem', { lineHeight: '1.45', fontWeight: '500' }],
|
|
'h6': ['1rem', { lineHeight: '1.5', fontWeight: '500' }],
|
|
// Body sizes
|
|
'body-lg': ['1.125rem', { lineHeight: '1.6', fontWeight: '400' }],
|
|
'body': ['1rem', { lineHeight: '1.6', fontWeight: '400' }],
|
|
'body-sm': ['0.875rem', { lineHeight: '1.55', fontWeight: '400' }],
|
|
'body-xs': ['0.75rem', { lineHeight: '1.5', fontWeight: '400' }],
|
|
// Label sizes
|
|
'label-lg': ['0.875rem', { lineHeight: '1.4', fontWeight: '600', letterSpacing: '0.05em' }],
|
|
'label': ['0.75rem', { lineHeight: '1.4', fontWeight: '600', letterSpacing: '0.05em' }],
|
|
'label-sm': ['0.6875rem', { lineHeight: '1.4', fontWeight: '600', letterSpacing: '0.05em' }],
|
|
},
|
|
borderRadius: {
|
|
lg: 'var(--radius)',
|
|
md: 'calc(var(--radius) - 2px)',
|
|
sm: 'calc(var(--radius) - 4px)',
|
|
},
|
|
keyframes: {
|
|
'accordion-down': {
|
|
from: { height: '0' },
|
|
to: { height: 'var(--radix-accordion-content-height)' },
|
|
},
|
|
'accordion-up': {
|
|
from: { height: 'var(--radix-accordion-content-height)' },
|
|
to: { height: '0' },
|
|
},
|
|
},
|
|
animation: {
|
|
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
},
|
|
},
|
|
},
|
|
plugins: [require('tailwindcss-animate')],
|
|
};
|
|
|
|
export default config;
|