Files
pos-system/apps/client-example/tailwind.config.js

122 lines
3.4 KiB
JavaScript

/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: 'class',
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
// Geist Font System - X.ai Style
fontFamily: {
sans: ['var(--font-geist-sans)', 'ui-sans-serif', 'system-ui', 'sans-serif'],
mono: ['var(--font-geist-mono)', 'ui-monospace', 'monospace'],
},
// Minimal Color Palette - X.ai Style
colors: {
// Background colors
background: {
DEFAULT: '#000000',
secondary: '#0a0a0a',
tertiary: '#111111',
},
// Surface (for inputs, cards)
surface: '#111111',
// Border colors
border: {
DEFAULT: '#1a1a1a',
secondary: '#2a2a2a',
},
// Text colors
foreground: {
DEFAULT: '#ffffff',
secondary: '#a1a1a1',
tertiary: '#737373',
},
// Accent colors
accent: {
DEFAULT: '#ffffff',
hover: '#e5e5e5',
},
// Status colors (minimal)
success: '#22c55e',
warning: '#f59e0b',
error: '#ef4444',
info: '#3b82f6',
},
// Minimal Spacing
spacing: {
'18': '4.5rem',
'22': '5.5rem',
},
// Minimal Border Radius
borderRadius: {
'sm': '0.25rem', // 4px
'DEFAULT': '0.5rem', // 8px
'md': '0.75rem', // 12px
'lg': '1rem', // 16px
'xl': '1.5rem', // 24px
},
// Subtle Shadows - X.ai Style
boxShadow: {
'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
'DEFAULT': '0 1px 3px 0 rgb(0 0 0 / 0.1)',
'md': '0 4px 6px -1px rgb(0 0 0 / 0.1)',
'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1)',
'xl': '0 20px 25px -5px rgb(0 0 0 / 0.1)',
'inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
'glow': '0 0 20px rgb(255 255 255 / 0.1)',
},
// Smooth Animations
animation: {
'fade-in': 'fadeIn 0.4s ease-out',
'slide-up': 'slideUp 0.4s ease-out',
'slide-down': 'slideDown 0.4s ease-out',
'scale-in': 'scaleIn 0.2s ease-out',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
slideUp: {
'0%': { transform: 'translateY(10px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
slideDown: {
'0%': { transform: 'translateY(-10px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
scaleIn: {
'0%': { transform: 'scale(0.95)', opacity: '0' },
'100%': { transform: 'scale(1)', opacity: '1' },
},
},
// Typography
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' }],
},
},
},
plugins: [
require('@tailwindcss/typography'),
],
}