chore: standardize ESM-first architecture and resolve all type/test/lint errors
Some checks failed
Some checks failed
This commit is contained in:
234
tailwind.config.cjs
Normal file
234
tailwind.config.cjs
Normal file
@@ -0,0 +1,234 @@
|
||||
/* eslint-disable no-undef */
|
||||
/* eslint-env node */
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
'./app/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
'./components/**/*.{js,ts,jsx,tsx,mdx}',
|
||||
],
|
||||
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: '#011dff',
|
||||
dark: '#000e7a',
|
||||
light: '#3344cc',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: '#82ed20',
|
||||
light: '#9bf14d',
|
||||
dark: '#6bc21a',
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: '#82ed20',
|
||||
light: '#9bf14d',
|
||||
},
|
||||
neutral: {
|
||||
DEFAULT: '#f8f9fa',
|
||||
light: '#ffffff',
|
||||
dark: '#263336',
|
||||
black: '#0a0a0a',
|
||||
},
|
||||
// Text Colors
|
||||
text: {
|
||||
primary: '#1a1a1a',
|
||||
secondary: '#6c757d',
|
||||
light: '#adb5bd',
|
||||
},
|
||||
// Semantic Colors
|
||||
success: '#28a745',
|
||||
warning: '#ffc107',
|
||||
danger: '#dc3545',
|
||||
info: '#17a2b8',
|
||||
},
|
||||
fontFamily: {
|
||||
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'],
|
||||
},
|
||||
// Enhanced Fluid Typography with CSS Clamp
|
||||
// Improved readability with better line heights and spacing
|
||||
fontSize: {
|
||||
'xs': ['clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem)', { lineHeight: '1.6' }],
|
||||
'sm': ['clamp(0.875rem, 0.8rem + 0.25vw, 1rem)', { lineHeight: '1.6' }],
|
||||
'base': ['clamp(1rem, 0.9rem + 0.35vw, 1.125rem)', { lineHeight: '1.7' }],
|
||||
'lg': ['clamp(1.125rem, 1rem + 0.4vw, 1.25rem)', { lineHeight: '1.7' }],
|
||||
'xl': ['clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem)', { lineHeight: '1.6' }],
|
||||
'2xl': ['clamp(1.5rem, 1.3rem + 0.75vw, 1.875rem)', { lineHeight: '1.5' }],
|
||||
'3xl': ['clamp(1.875rem, 1.6rem + 1vw, 2.25rem)', { lineHeight: '1.4' }],
|
||||
'4xl': ['clamp(2.25rem, 1.9rem + 1.25vw, 3rem)', { lineHeight: '1.3' }],
|
||||
'5xl': ['clamp(3rem, 2.5rem + 2vw, 3.75rem)', { lineHeight: '1.25' }],
|
||||
'6xl': ['clamp(3.75rem, 3rem + 2.5vw, 4.5rem)', { lineHeight: '1.2' }],
|
||||
'7xl': ['clamp(4.5rem, 3.5rem + 3vw, 5.5rem)', { lineHeight: '1.15' }],
|
||||
'8xl': ['clamp(5.5rem, 4rem + 4vw, 7rem)', { lineHeight: '1.1' }],
|
||||
},
|
||||
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: {
|
||||
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: [
|
||||
// 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