205 lines
6.0 KiB
JavaScript
205 lines
6.0 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
'./src/**/*.{html,js,svelte,ts}',
|
|
'./src/**/*.{jsx,tsx}',
|
|
// Include component libraries and packages
|
|
'../../packages/**/*.{html,js,svelte,ts,jsx,tsx}',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
// Extend with CSS custom properties from our theme system
|
|
colors: {
|
|
// Primary color scale using CSS variables
|
|
primary: {
|
|
50: 'var(--color-primary-50)',
|
|
100: 'var(--color-primary-100)',
|
|
200: 'var(--color-primary-200)',
|
|
300: 'var(--color-primary-300)',
|
|
400: 'var(--color-primary-400)',
|
|
500: 'var(--color-primary-500)',
|
|
600: 'var(--color-primary-600)',
|
|
700: 'var(--color-primary-700)',
|
|
800: 'var(--color-primary-800)',
|
|
900: 'var(--color-primary-900)',
|
|
},
|
|
|
|
// Surface colors
|
|
surface: {
|
|
background: 'var(--surface-background)',
|
|
foreground: 'var(--surface-foreground)',
|
|
muted: 'var(--surface-muted)',
|
|
border: 'var(--surface-border)',
|
|
},
|
|
|
|
// Text colors
|
|
text: {
|
|
primary: 'var(--text-primary)',
|
|
secondary: 'var(--text-secondary)',
|
|
muted: 'var(--text-muted)',
|
|
inverse: 'var(--text-inverse)',
|
|
},
|
|
|
|
// State colors
|
|
state: {
|
|
hover: 'var(--state-hover)',
|
|
active: 'var(--state-active)',
|
|
focus: 'var(--state-focus)',
|
|
disabled: 'var(--state-disabled)',
|
|
},
|
|
|
|
// Mood colors
|
|
mood: {
|
|
'very-low': 'var(--mood-very-low)',
|
|
'low': 'var(--mood-low)',
|
|
'neutral': 'var(--mood-neutral)',
|
|
'high': 'var(--mood-high)',
|
|
'very-high': 'var(--mood-very-high)',
|
|
},
|
|
|
|
// Habit colors
|
|
habit: {
|
|
positive: 'var(--habit-positive)',
|
|
negative: 'var(--habit-negative)',
|
|
neutral: 'var(--habit-neutral)',
|
|
},
|
|
},
|
|
|
|
// Spacing scale using CSS variables
|
|
spacing: {
|
|
'1': 'var(--space-1)',
|
|
'2': 'var(--space-2)',
|
|
'3': 'var(--space-3)',
|
|
'4': 'var(--space-4)',
|
|
'6': 'var(--space-6)',
|
|
'8': 'var(--space-8)',
|
|
'12': 'var(--space-12)',
|
|
'16': 'var(--space-16)',
|
|
},
|
|
|
|
// Border radius using CSS variables
|
|
borderRadius: {
|
|
'sm': 'var(--radius-sm)',
|
|
'md': 'var(--radius-md)',
|
|
'lg': 'var(--radius-lg)',
|
|
'xl': 'var(--radius-xl)',
|
|
'full': 'var(--radius-full)',
|
|
},
|
|
|
|
// Box shadows using CSS variables
|
|
boxShadow: {
|
|
'sm': 'var(--shadow-sm)',
|
|
'md': 'var(--shadow-md)',
|
|
'lg': 'var(--shadow-lg)',
|
|
'glow': 'var(--shadow-glow)',
|
|
},
|
|
|
|
// Animation durations
|
|
transitionDuration: {
|
|
'fast': 'var(--duration-fast)',
|
|
'normal': 'var(--duration-normal)',
|
|
'slow': 'var(--duration-slow)',
|
|
},
|
|
|
|
// Animation timing functions
|
|
transitionTimingFunction: {
|
|
'ease-in-out': 'var(--ease-in-out)',
|
|
},
|
|
|
|
// Grid-specific values
|
|
gridTemplateColumns: {
|
|
'grid': 'repeat(auto-fit, minmax(var(--grid-tile-size), 1fr))',
|
|
},
|
|
|
|
// Typography
|
|
fontFamily: {
|
|
'sans': ['system-ui', '-apple-system', 'Segoe UI', 'Roboto', 'Ubuntu', 'Cantarell', 'Noto Sans', 'sans-serif'],
|
|
'mono': ['ui-monospace', 'SFMono-Regular', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', 'Courier New', 'monospace'],
|
|
},
|
|
|
|
// Custom animations
|
|
keyframes: {
|
|
'fade-in': {
|
|
'from': { opacity: '0' },
|
|
'to': { opacity: '1' },
|
|
},
|
|
'slide-up': {
|
|
'from': { opacity: '0', transform: 'translateY(1rem)' },
|
|
'to': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
'glow-pulse': {
|
|
'0%, 100%': { boxShadow: 'var(--shadow-glow)' },
|
|
'50%': { boxShadow: '0 0 30px rgba(59, 130, 246, 0.5)' },
|
|
},
|
|
},
|
|
|
|
animation: {
|
|
'fade-in': 'fade-in var(--duration-normal) var(--ease-in-out)',
|
|
'slide-up': 'slide-up var(--duration-normal) var(--ease-in-out)',
|
|
'glow-pulse': 'glow-pulse 2s ease-in-out infinite',
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/forms'),
|
|
|
|
// Custom plugin for theme utilities
|
|
function({ addUtilities, addComponents }) {
|
|
// Add theme-aware utilities
|
|
addUtilities({
|
|
'.theme-surface': {
|
|
backgroundColor: 'var(--surface-background)',
|
|
color: 'var(--surface-foreground)',
|
|
},
|
|
'.theme-muted': {
|
|
backgroundColor: 'var(--surface-muted)',
|
|
color: 'var(--text-secondary)',
|
|
},
|
|
'.theme-glow': {
|
|
boxShadow: 'var(--shadow-glow)',
|
|
},
|
|
'.theme-focus': {
|
|
outline: 'var(--grid-focus-ring)',
|
|
outlineOffset: 'var(--grid-focus-offset)',
|
|
},
|
|
'.theme-transition': {
|
|
transition: 'all var(--duration-normal) var(--ease-in-out)',
|
|
},
|
|
'.theme-transition-fast': {
|
|
transition: 'all var(--duration-fast) var(--ease-in-out)',
|
|
},
|
|
});
|
|
|
|
// Add component classes
|
|
addComponents({
|
|
'.grid-tile': {
|
|
width: 'var(--grid-tile-size)',
|
|
height: 'var(--grid-tile-size)',
|
|
borderRadius: 'var(--grid-tile-radius)',
|
|
border: 'var(--grid-tile-border)',
|
|
},
|
|
'.grid-container': {
|
|
display: 'grid',
|
|
gap: 'var(--grid-tile-gap)',
|
|
gridTemplateColumns: 'repeat(auto-fit, minmax(var(--grid-tile-size), 1fr))',
|
|
},
|
|
});
|
|
},
|
|
],
|
|
|
|
// Safelist important classes that might be dynamically generated
|
|
safelist: [
|
|
'theme-surface',
|
|
'theme-muted',
|
|
'theme-glow',
|
|
'theme-focus',
|
|
'theme-transition',
|
|
'theme-transition-fast',
|
|
'grid-tile',
|
|
'grid-container',
|
|
'animate-fade-in',
|
|
'animate-slide-up',
|
|
'animate-glow-pulse',
|
|
],
|
|
};
|