66daa19cd5
Some checks failed
Deploy to Production, build images and push to Gitea Registry / build_and_push (pull_request) Failing after 1m17s
This commit includes several key updates and new features: - Enhanced WebSocket functionality across various components, improving real-time communication and user experience. - Introduced new components for managing settlements, including `SettlementCard.vue`, `SettlementForm.vue`, and `SuggestedSettlementsCard.vue`, to streamline financial interactions. - Updated existing components and services to support the new settlement features, ensuring consistency and improved performance. - Added advanced performance optimizations to enhance loading times and responsiveness throughout the application. These changes aim to provide a more robust and user-friendly experience in managing financial settlements and real-time interactions.
246 lines
9.4 KiB
TypeScript
246 lines
9.4 KiB
TypeScript
// @ts-nocheck
|
|
import type { Config } from 'tailwindcss'
|
|
import forms from '@tailwindcss/forms'
|
|
import typography from '@tailwindcss/typography'
|
|
import headlessui from '@headlessui/tailwindcss'
|
|
|
|
const config: Config = {
|
|
darkMode: 'class',
|
|
content: [
|
|
'./index.html',
|
|
'./src/**/*.{vue,js,ts,jsx,tsx}',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Design System Colors from refactor plan
|
|
primary: {
|
|
DEFAULT: '#3b82f6',
|
|
50: '#eff6ff',
|
|
100: '#dbeafe',
|
|
200: '#bfdbfe',
|
|
300: '#93c5fd',
|
|
400: '#60a5fa',
|
|
500: '#3b82f6', // Main primary color
|
|
600: '#2563eb',
|
|
700: '#1d4ed8',
|
|
800: '#1e40af',
|
|
900: '#1e3a8a',
|
|
950: '#172554',
|
|
},
|
|
success: {
|
|
50: '#ecfdf5',
|
|
100: '#d1fae5',
|
|
200: '#a7f3d0',
|
|
300: '#6ee7b7',
|
|
400: '#34d399',
|
|
500: '#10b981', // Main success color
|
|
600: '#059669',
|
|
700: '#047857',
|
|
800: '#065f46',
|
|
900: '#064e3b',
|
|
950: '#022c22',
|
|
},
|
|
warning: {
|
|
50: '#fffbeb',
|
|
100: '#fef3c7',
|
|
200: '#fde68a',
|
|
300: '#fcd34d',
|
|
400: '#fbbf24',
|
|
500: '#f59e0b', // Main warning color
|
|
600: '#d97706',
|
|
700: '#b45309',
|
|
800: '#92400e',
|
|
900: '#78350f',
|
|
950: '#4c2209',
|
|
},
|
|
error: {
|
|
50: '#fef2f2',
|
|
100: '#fee2e2',
|
|
200: '#fecaca',
|
|
300: '#fca5a5',
|
|
400: '#f87171',
|
|
500: '#ef4444', // Main error color
|
|
600: '#dc2626',
|
|
700: '#b91c1c',
|
|
800: '#991b1b',
|
|
900: '#7f1d1d',
|
|
950: '#661010',
|
|
},
|
|
neutral: {
|
|
50: '#f8fafc',
|
|
100: '#f1f5f9',
|
|
200: '#e2e8f0',
|
|
300: '#cbd5e1',
|
|
400: '#94a3b8',
|
|
500: '#64748b', // Main neutral color
|
|
600: '#475569',
|
|
700: '#334155',
|
|
800: '#1e293b',
|
|
900: '#0f172a',
|
|
},
|
|
// Legacy colors for backward compatibility
|
|
secondary: '#FFB26B',
|
|
accent: '#FFD56B',
|
|
info: '#54C7FF',
|
|
danger: '#FF4D4D',
|
|
dark: '#393E46',
|
|
light: '#FFF8F0',
|
|
black: '#000000',
|
|
// Additional color aliases for design tokens
|
|
'surface-primary': '#ffffff', // Light surface
|
|
'surface-secondary': '#f8fafc',
|
|
'surface-elevated': '#ffffff', // elevated surface same as primary for now
|
|
'surface-hover': '#f1f5f9', // neutral-100, subtle hover for surfaces
|
|
'surface-soft': '#f8fafc', // neutral-50, extra soft surface
|
|
// Border colors
|
|
'border-secondary': '#e2e8f0', // neutral-200
|
|
'border-subtle': '#cbd5e1', // neutral-300
|
|
// Text colors
|
|
'text-primary': '#0f172a', // neutral-900
|
|
'text-secondary': '#475569', // neutral-600
|
|
'text-tertiary': '#94a3b8', // neutral-400
|
|
// Border primary alias (light)
|
|
'border-primary': '#bfdbfe', // primary-200
|
|
'border-primary-hover': '#93c5fd', // primary-300
|
|
},
|
|
spacing: {
|
|
// Design system spacing (base unit: 4px)
|
|
'1': '4px',
|
|
'2': '8px',
|
|
'3': '12px',
|
|
'4': '16px', // Component spacing
|
|
'5': '20px',
|
|
'6': '24px', // Component spacing
|
|
'7': '28px',
|
|
'8': '32px', // Component spacing
|
|
'9': '36px',
|
|
'10': '40px',
|
|
'11': '44px',
|
|
'12': '48px', // Section spacing
|
|
'14': '56px',
|
|
'16': '64px', // Section spacing
|
|
'20': '80px',
|
|
'24': '96px',
|
|
'28': '112px',
|
|
'32': '128px',
|
|
// Alias tokens for design system (used as spacing-[size])
|
|
'spacing-xs': '4px', // 1
|
|
'spacing-sm': '8px', // 2
|
|
'spacing-md': '16px', // 4
|
|
'spacing-lg': '24px', // 6
|
|
'spacing-xl': '32px', // 8
|
|
},
|
|
fontFamily: {
|
|
// Typography system
|
|
sans: [
|
|
'Inter',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'San Francisco',
|
|
'Segoe UI',
|
|
'Roboto',
|
|
'Helvetica Neue',
|
|
'Arial',
|
|
'sans-serif'
|
|
],
|
|
mono: [
|
|
'JetBrains Mono',
|
|
'SFMono-Regular',
|
|
'Monaco',
|
|
'Consolas',
|
|
'Liberation Mono',
|
|
'Courier New',
|
|
'monospace'
|
|
],
|
|
// Legacy
|
|
hand: ['"Patrick Hand"', 'cursive'],
|
|
},
|
|
fontSize: {
|
|
'xs': ['0.75rem', { lineHeight: '1rem' }],
|
|
'sm': ['0.875rem', { lineHeight: '1.25rem' }],
|
|
'base': ['1rem', { lineHeight: '1.5rem' }],
|
|
'lg': ['1.125rem', { lineHeight: '1.75rem' }],
|
|
'xl': ['1.25rem', { lineHeight: '1.75rem' }],
|
|
'2xl': ['1.5rem', { lineHeight: '2rem' }],
|
|
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
|
|
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
|
|
'5xl': ['3rem', { lineHeight: '1' }],
|
|
'6xl': ['3.75rem', { lineHeight: '1' }],
|
|
// Alias font-size tokens for design system
|
|
'label-xs': ['0.75rem', { lineHeight: '1rem' }],
|
|
'label-sm': ['0.875rem', { lineHeight: '1.25rem' }],
|
|
'body-sm': ['0.875rem', { lineHeight: '1.25rem' }],
|
|
'heading-lg': ['1.5rem', { lineHeight: '2rem' }],
|
|
},
|
|
transitionDuration: {
|
|
// Motion system
|
|
'micro': '150ms', // Micro-interactions
|
|
'page': '300ms', // Page transitions
|
|
'slow': '500ms', // Loading states
|
|
// Medium alias (used in components)
|
|
'medium': '300ms',
|
|
},
|
|
transitionTimingFunction: {
|
|
// Custom timing functions for design system
|
|
'micro': 'cubic-bezier(0.4, 0, 0.2, 1)', // alias for ease-out micro interactions
|
|
'medium': 'cubic-bezier(0.4, 0, 0.2, 1)', // same curve, longer duration
|
|
'page': 'cubic-bezier(0.4, 0, 0.6, 1)', // ease-in-out for page transitions
|
|
},
|
|
keyframes: {
|
|
// Skeleton loading animation
|
|
skeleton: {
|
|
'0%': { opacity: '1' },
|
|
'50%': { opacity: '0.4' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
// Fade in animation
|
|
fadeIn: {
|
|
'0%': { opacity: '0', transform: 'translateY(10px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
// Scale in animation
|
|
scaleIn: {
|
|
'0%': { opacity: '0', transform: 'scale(0.95)' },
|
|
'100%': { opacity: '1', transform: 'scale(1)' },
|
|
},
|
|
},
|
|
animation: {
|
|
'skeleton': 'skeleton 1.5s ease-in-out infinite',
|
|
'fade-in': 'fadeIn 300ms ease-out',
|
|
'scale-in': 'scaleIn 150ms ease-out',
|
|
},
|
|
backdropBlur: {
|
|
xs: '2px',
|
|
},
|
|
boxShadow: {
|
|
'soft': '0 2px 8px rgba(0, 0, 0, 0.04)',
|
|
'medium': '0 4px 12px rgba(0, 0, 0, 0.08)',
|
|
'strong': '0 8px 24px rgba(0, 0, 0, 0.12)',
|
|
'floating': '0 12px 32px rgba(0, 0, 0, 0.16)',
|
|
// Alias box-shadow tokens matching naming convention in components
|
|
'elevation-soft': '0 2px 8px rgba(0, 0, 0, 0.04)',
|
|
'elevation-medium': '0 4px 12px rgba(0, 0, 0, 0.08)',
|
|
'elevation-strong': '0 8px 24px rgba(0, 0, 0, 0.12)',
|
|
'elevation-high': '0 16px 48px rgba(0,0,0,0.18)',
|
|
},
|
|
borderRadius: {
|
|
// Radius alias tokens
|
|
'radius-sm': '4px',
|
|
'radius-md': '8px',
|
|
'radius-lg': '12px',
|
|
'radius-full': '9999px',
|
|
},
|
|
zIndex: {
|
|
60: '60',
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
forms,
|
|
typography,
|
|
headlessui({ prefix: 'ui' }),
|
|
],
|
|
}
|
|
|
|
export default config
|