migration wip
This commit is contained in:
@@ -6,29 +6,222 @@ module.exports = {
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
// Custom Breakpoints for KLZ Cables
|
||||
screens: {
|
||||
'xs': '475px',
|
||||
'sm': '640px',
|
||||
'md': '768px',
|
||||
'lg': '1024px',
|
||||
'xl': '1280px',
|
||||
'2xl': '1400px',
|
||||
'3xl': '1600px',
|
||||
},
|
||||
colors: {
|
||||
// Brand Colors
|
||||
primary: {
|
||||
DEFAULT: '#0117bf',
|
||||
light: '#3d8c01',
|
||||
dark: '#000a8a',
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: '#82ed20',
|
||||
dark: '#6bc01a',
|
||||
DEFAULT: '#0056b3',
|
||||
dark: '#003d82',
|
||||
light: '#e6f0ff',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: '#263336',
|
||||
light: '#3d4f53',
|
||||
DEFAULT: '#003d82',
|
||||
light: '#0056b3',
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: '#e6f0ff',
|
||||
light: '#f0f7ff',
|
||||
},
|
||||
neutral: {
|
||||
DEFAULT: '#f8f9fa',
|
||||
light: '#ffffff',
|
||||
dark: '#e9ecef',
|
||||
},
|
||||
// Text Colors
|
||||
text: {
|
||||
primary: '#1a1a1a',
|
||||
secondary: '#6c757d',
|
||||
light: '#adb5bd',
|
||||
},
|
||||
// Semantic Colors
|
||||
success: '#28a745',
|
||||
warning: '#ffc107',
|
||||
danger: '#dc3545',
|
||||
info: '#17a2b8',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', 'sans-serif'],
|
||||
sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],
|
||||
heading: ['Inter', 'system-ui', 'sans-serif'],
|
||||
body: ['Inter', 'system-ui', 'sans-serif'],
|
||||
},
|
||||
// Fluid Typography with CSS Clamp
|
||||
fontSize: {
|
||||
'xs': ['clamp(0.7rem, 0.65rem + 0.2vw, 0.75rem)', { lineHeight: '1.5' }],
|
||||
'sm': ['clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem)', { lineHeight: '1.5' }],
|
||||
'base': ['clamp(0.9rem, 0.85rem + 0.3vw, 1rem)', { lineHeight: '1.6' }],
|
||||
'lg': ['clamp(1rem, 0.95rem + 0.35vw, 1.125rem)', { lineHeight: '1.6' }],
|
||||
'xl': ['clamp(1.1rem, 1rem + 0.5vw, 1.25rem)', { lineHeight: '1.5' }],
|
||||
'2xl': ['clamp(1.3rem, 1.15rem + 0.75vw, 1.5rem)', { lineHeight: '1.4' }],
|
||||
'3xl': ['clamp(1.6rem, 1.4rem + 1vw, 1.875rem)', { lineHeight: '1.3' }],
|
||||
'4xl': ['clamp(1.9rem, 1.65rem + 1.25vw, 2.25rem)', { lineHeight: '1.3' }],
|
||||
'5xl': ['clamp(2.4rem, 2rem + 2vw, 3rem)', { lineHeight: '1.2' }],
|
||||
'6xl': ['clamp(3rem, 2.5rem + 2.5vw, 3.75rem)', { lineHeight: '1.2' }],
|
||||
},
|
||||
fontWeight: {
|
||||
regular: '400',
|
||||
medium: '500',
|
||||
semibold: '600',
|
||||
bold: '700',
|
||||
extrabold: '800',
|
||||
},
|
||||
spacing: {
|
||||
'xs': '0.25rem',
|
||||
'sm': '0.5rem',
|
||||
'md': '1rem',
|
||||
'lg': '1.5rem',
|
||||
'xl': '2rem',
|
||||
'2xl': '3rem',
|
||||
'3xl': '4rem',
|
||||
'4xl': '6rem',
|
||||
},
|
||||
borderRadius: {
|
||||
'sm': '0.25rem',
|
||||
'DEFAULT': '0.5rem',
|
||||
'lg': '0.75rem',
|
||||
'xl': '1rem',
|
||||
'2xl': '1.5rem',
|
||||
},
|
||||
boxShadow: {
|
||||
'sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
|
||||
'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
|
||||
'md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
||||
'lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
||||
'xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
|
||||
},
|
||||
container: {
|
||||
center: true,
|
||||
padding: '1rem',
|
||||
padding: {
|
||||
DEFAULT: '1rem',
|
||||
sm: '1.5rem',
|
||||
md: '2rem',
|
||||
lg: '2.5rem',
|
||||
xl: '3rem',
|
||||
'2xl': '4rem',
|
||||
},
|
||||
screens: {
|
||||
xs: '475px',
|
||||
sm: '640px',
|
||||
md: '768px',
|
||||
lg: '1024px',
|
||||
xl: '1280px',
|
||||
'2xl': '1400px',
|
||||
'3xl': '1600px',
|
||||
},
|
||||
},
|
||||
maxWidth: {
|
||||
'xs': '20rem',
|
||||
'sm': '24rem',
|
||||
'md': '28rem',
|
||||
'lg': '32rem',
|
||||
'xl': '36rem',
|
||||
'2xl': '42rem',
|
||||
'3xl': '48rem',
|
||||
'4xl': '56rem',
|
||||
'5xl': '64rem',
|
||||
'6xl': '72rem',
|
||||
},
|
||||
zIndex: {
|
||||
'0': '0',
|
||||
'10': '10',
|
||||
'20': '20',
|
||||
'30': '30',
|
||||
'40': '40',
|
||||
'50': '50',
|
||||
'auto': 'auto',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [
|
||||
// Custom plugin for responsive utilities
|
||||
function({ addUtilities }) {
|
||||
const newUtilities = {
|
||||
// Touch target utilities
|
||||
'.touch-target': {
|
||||
minHeight: '44px',
|
||||
minWidth: '44px',
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
// Mobile-first responsive utilities
|
||||
'.mobile-hidden': {
|
||||
'@media (max-width: 767px)': {
|
||||
display: 'none !important',
|
||||
},
|
||||
},
|
||||
'.tablet-hidden': {
|
||||
'@media (min-width: 768px) and (max-width: 1023px)': {
|
||||
display: 'none !important',
|
||||
},
|
||||
},
|
||||
'.desktop-hidden': {
|
||||
'@media (min-width: 1024px)': {
|
||||
display: 'none !important',
|
||||
},
|
||||
},
|
||||
'.mobile-only': {
|
||||
'@media (min-width: 768px)': {
|
||||
display: 'none !important',
|
||||
},
|
||||
},
|
||||
'.tablet-only': {
|
||||
'@media (max-width: 767px), (min-width: 1024px)': {
|
||||
display: 'none !important',
|
||||
},
|
||||
},
|
||||
'.desktop-only': {
|
||||
'@media (max-width: 1023px)': {
|
||||
display: 'none !important',
|
||||
},
|
||||
},
|
||||
// Fluid spacing utilities
|
||||
'.fluid-spacing': {
|
||||
padding: 'clamp(1rem, 3vw, 3rem)',
|
||||
margin: 'clamp(0.5rem, 2vw, 2rem)',
|
||||
},
|
||||
// Responsive text alignment
|
||||
'.text-start-mobile': {
|
||||
'@media (max-width: 767px)': {
|
||||
textAlign: 'left',
|
||||
},
|
||||
},
|
||||
'.text-center-mobile': {
|
||||
'@media (max-width: 767px)': {
|
||||
textAlign: 'center',
|
||||
},
|
||||
},
|
||||
'.text-end-mobile': {
|
||||
'@media (max-width: 767px)': {
|
||||
textAlign: 'right',
|
||||
},
|
||||
},
|
||||
// Mobile-optimized grid
|
||||
'.grid-mobile-stacked': {
|
||||
'@media (max-width: 767px)': {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '1rem',
|
||||
},
|
||||
},
|
||||
// Safe area padding for mobile notch
|
||||
'.safe-area-p': {
|
||||
paddingTop: 'env(safe-area-inset-top)',
|
||||
paddingBottom: 'env(safe-area-inset-bottom)',
|
||||
paddingLeft: 'env(safe-area-inset-left)',
|
||||
paddingRight: 'env(safe-area-inset-right)',
|
||||
},
|
||||
};
|
||||
|
||||
addUtilities(newUtilities, ['responsive', 'hover', 'focus']);
|
||||
},
|
||||
],
|
||||
}
|
||||
Reference in New Issue
Block a user