Init
This commit is contained in:
Bastian Masanek
202
tailwind.config.ts
Normal file
202
tailwind.config.ts
Normal file
@@ -0,0 +1,202 @@
|
||||
import type { Config } from 'tailwindcss'
|
||||
|
||||
export default {
|
||||
content: [
|
||||
'./components/**/*.{js,vue,ts}',
|
||||
'./layouts/**/*.vue',
|
||||
'./pages/**/*.vue',
|
||||
'./plugins/**/*.{js,ts}',
|
||||
'./app.vue',
|
||||
'./error.vue',
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
// experimenta Color Palette
|
||||
colors: {
|
||||
// shadcn-ui color variables
|
||||
border: 'hsl(var(--border))',
|
||||
input: 'hsl(var(--input))',
|
||||
ring: 'hsl(var(--ring))',
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))',
|
||||
},
|
||||
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: 'hsl(var(--accent))',
|
||||
foreground: 'hsl(var(--accent-foreground))',
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: 'hsl(var(--popover))',
|
||||
foreground: 'hsl(var(--popover-foreground))',
|
||||
},
|
||||
card: {
|
||||
DEFAULT: 'hsl(var(--card))',
|
||||
foreground: 'hsl(var(--card-foreground))',
|
||||
},
|
||||
|
||||
// experimenta Brand Colors (kept separate for custom use)
|
||||
'experimenta-primary': {
|
||||
DEFAULT: '#e6007e',
|
||||
hover: '#c2006a',
|
||||
light: '#ff4081',
|
||||
},
|
||||
'experimenta-secondary': {
|
||||
DEFAULT: '#e91e63',
|
||||
dark: '#c2185b',
|
||||
},
|
||||
'experimenta-accent': {
|
||||
DEFAULT: '#f59d24',
|
||||
hover: '#ffb347',
|
||||
},
|
||||
red: '#E40521',
|
||||
|
||||
// Purple Variants (Background)
|
||||
purple: {
|
||||
dark: '#2e1065',
|
||||
deeper: '#1a0a3a',
|
||||
darkest: '#0f051d',
|
||||
},
|
||||
|
||||
// Semantic Colors
|
||||
success: {
|
||||
DEFAULT: '#46c74a',
|
||||
dark: '#3ba83e',
|
||||
},
|
||||
error: {
|
||||
DEFAULT: '#e53e3e',
|
||||
dark: '#c53030',
|
||||
},
|
||||
warning: {
|
||||
DEFAULT: '#f59d24',
|
||||
dark: '#dd8a1e',
|
||||
},
|
||||
info: {
|
||||
DEFAULT: '#4299e1',
|
||||
dark: '#3182ce',
|
||||
},
|
||||
},
|
||||
|
||||
// Font Sizes (Mobile-First with responsive variants)
|
||||
fontSize: {
|
||||
// H1
|
||||
'4xl': ['36px', { lineHeight: '1.2', letterSpacing: '-1px' }],
|
||||
// H2
|
||||
'3xl': ['30px', { lineHeight: '1.3', letterSpacing: '-0.5px' }],
|
||||
// H3
|
||||
'2xl': ['24px', { lineHeight: '1.4' }],
|
||||
// H4
|
||||
xl: ['20px', { lineHeight: '1.4' }],
|
||||
// H5
|
||||
lg: ['18px', { lineHeight: '1.5', letterSpacing: '0.5px' }],
|
||||
// Body
|
||||
base: ['16px', { lineHeight: '1.6' }],
|
||||
// Small
|
||||
sm: ['14px', { lineHeight: '1.6' }],
|
||||
// Tiny
|
||||
xs: ['12px', { lineHeight: '1.5' }],
|
||||
},
|
||||
|
||||
// Spacing System (8px Grid)
|
||||
spacing: {
|
||||
'1': '4px',
|
||||
'2': '8px',
|
||||
'3': '12px',
|
||||
'4': '16px',
|
||||
'5': '20px',
|
||||
'6': '24px',
|
||||
'8': '30px',
|
||||
'10': '40px',
|
||||
'15': '60px',
|
||||
'20': '80px',
|
||||
'25': '100px', // For status icons
|
||||
},
|
||||
|
||||
// Border Radius
|
||||
borderRadius: {
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)',
|
||||
xl: '20px',
|
||||
'2xl': '25px',
|
||||
full: '100%',
|
||||
},
|
||||
|
||||
// Max Widths (Containers)
|
||||
maxWidth: {
|
||||
'container-main': '800px',
|
||||
'container-wide': '1200px',
|
||||
'container-full': '1760px',
|
||||
},
|
||||
|
||||
// Background Gradients
|
||||
backgroundImage: {
|
||||
'gradient-primary': 'linear-gradient(135deg, #2e1065 0%, #1a0a3a 50%, #0f051d 100%)',
|
||||
'gradient-footer': 'linear-gradient(135deg, #1a0a3a 0%, #0f051d 100%)',
|
||||
'gradient-glass':
|
||||
'linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))',
|
||||
'gradient-button': 'linear-gradient(to left, #e6007e, #e6007e, #E40521, #e6007e)',
|
||||
'gradient-success': 'linear-gradient(90deg, #46c74a 0%, #66d96a 50%, #46c74a 100%)',
|
||||
},
|
||||
|
||||
// Background Sizes
|
||||
backgroundSize: {
|
||||
'size-300': '300%',
|
||||
'size-200': '200%',
|
||||
},
|
||||
|
||||
// Background Positions
|
||||
backgroundPosition: {
|
||||
left: 'left',
|
||||
right: 'right',
|
||||
},
|
||||
|
||||
// Box Shadows
|
||||
boxShadow: {
|
||||
glass: '0 20px 40px rgba(0, 0, 0, 0.3)',
|
||||
'inner-light': 'inset 0 2px 4px rgba(0, 0, 0, 0.2)',
|
||||
},
|
||||
|
||||
// Backdrop Blur
|
||||
backdropBlur: {
|
||||
xl: '15px',
|
||||
},
|
||||
|
||||
// Animations
|
||||
keyframes: {
|
||||
pulse: {
|
||||
'0%, 100%': { transform: 'scale(1)' },
|
||||
'50%': { transform: 'scale(1.1)' },
|
||||
},
|
||||
shimmer: {
|
||||
'0%': { backgroundPosition: '-200% 0' },
|
||||
'100%': { backgroundPosition: '200% 0' },
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
pulse: 'pulse 2s ease-in-out infinite',
|
||||
shimmer: 'shimmer 3s ease-in-out infinite',
|
||||
},
|
||||
|
||||
// Transitions
|
||||
transitionDuration: {
|
||||
'300': '300ms',
|
||||
'1000': '1000ms',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
} satisfies Config
|
||||
Reference in New Issue
Block a user