75 lines
3.3 KiB
JavaScript
75 lines
3.3 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
// Tailwind v3. Design tokens live as CSS custom properties in
|
|
// resources/css/portal-tokens.css (framework-neutral); this config only maps
|
|
// them onto utility names so a token change restyles every utility.
|
|
export default {
|
|
content: [
|
|
'./resources/**/*.blade.php',
|
|
'./resources/**/*.js',
|
|
'./app/Livewire/**/*.php',
|
|
'./app/View/**/*.php',
|
|
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
|
|
'./vendor/wire-elements/modal/resources/views/**/*.blade.php',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
bg: 'var(--bg)',
|
|
surface: 'var(--surface)',
|
|
'surface-2': 'var(--surface-2)',
|
|
'surface-hover': 'var(--surface-hover)',
|
|
line: 'var(--border)',
|
|
'line-strong': 'var(--border-strong)',
|
|
ink: 'var(--text-strong)',
|
|
body: 'var(--text)',
|
|
muted: 'var(--text-muted)',
|
|
faint: 'var(--text-faint)',
|
|
accent: {
|
|
DEFAULT: 'var(--accent)',
|
|
hover: 'var(--accent-hover)',
|
|
active: 'var(--accent-active)',
|
|
press: 'var(--accent-press)',
|
|
subtle: 'var(--accent-subtle)',
|
|
border: 'var(--accent-border)',
|
|
text: 'var(--accent-text)',
|
|
},
|
|
'on-accent': 'var(--on-accent)',
|
|
success: { DEFAULT: 'var(--success)', bg: 'var(--success-bg)', border: 'var(--success-border)', bright: 'var(--success-bright)' },
|
|
warning: { DEFAULT: 'var(--warning)', bg: 'var(--warning-bg)', border: 'var(--warning-border)' },
|
|
danger: { DEFAULT: 'var(--danger)', bg: 'var(--danger-bg)', border: 'var(--danger-border)' },
|
|
info: { DEFAULT: 'var(--info)', bg: 'var(--info-bg)', border: 'var(--info-border)' },
|
|
},
|
|
fontFamily: {
|
|
sans: 'var(--font-sans)',
|
|
mono: 'var(--font-mono)',
|
|
},
|
|
fontSize: {
|
|
xs: 'var(--text-xs)', sm: 'var(--text-sm)', base: 'var(--text-base)', md: 'var(--text-md)',
|
|
lg: 'var(--text-lg)', xl: 'var(--text-xl)', '2xl': 'var(--text-2xl)', '3xl': 'var(--text-3xl)',
|
|
},
|
|
borderRadius: {
|
|
sm: 'var(--radius-sm)', DEFAULT: 'var(--radius)', lg: 'var(--radius-lg)', xl: 'var(--radius-xl)', pill: 'var(--radius-pill)',
|
|
},
|
|
boxShadow: {
|
|
xs: 'var(--shadow-xs)', sm: 'var(--shadow-sm)', md: 'var(--shadow-md)',
|
|
},
|
|
ringColor: { accent: 'var(--accent-ring)' },
|
|
keyframes: {
|
|
rise: {
|
|
'0%': { opacity: '0', transform: 'translateY(16px)' },
|
|
'100%': { opacity: '1', transform: 'none' },
|
|
},
|
|
shimmer: {
|
|
'0%': { transform: 'translateX(-160%) skewX(-12deg)' },
|
|
'100%': { transform: 'translateX(320%) skewX(-12deg)' },
|
|
},
|
|
},
|
|
animation: {
|
|
rise: 'rise 0.6s cubic-bezier(.2,.7,.2,1) both',
|
|
shimmer: 'shimmer 3s ease-in-out infinite',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|