T021-T026
This commit is contained in:
@@ -2,9 +2,203 @@
|
||||
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: {
|
||||
// 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')],
|
||||
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',
|
||||
],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user