b4e714e580
In this commit, we have made several updates to tailwind configuration files to ensure better scalability and include exceptions for node modules. Moreover, the account selector component now uses a personalized avatar for each account. This was achieved by accessing personal account data through a hook and introducing a new UserAvatar function to display the avatar. Check component was also migrated to CheckCircle and minor layout and styling adjustments were done for better UI experience.
113 lines
3.3 KiB
TypeScript
113 lines
3.3 KiB
TypeScript
import type { Config } from 'tailwindcss';
|
|
import { fontFamily } from 'tailwindcss/defaultTheme';
|
|
|
|
export default {
|
|
darkMode: ['class'],
|
|
content: [
|
|
'../../packages/**/*.tsx',
|
|
'../../apps/**/*.tsx',
|
|
'!./**/node_modules/**',
|
|
],
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: '2rem',
|
|
screens: {
|
|
'2xl': '1400px',
|
|
},
|
|
},
|
|
extend: {
|
|
borderColor: {
|
|
DEFAULT: 'hsl(var(--border) / <alpha-value>)',
|
|
},
|
|
colors: {
|
|
border: 'hsl(var(--border) / <alpha-value>)',
|
|
input: 'hsl(var(--input) / <alpha-value>)',
|
|
ring: 'hsl(var(--ring) / <alpha-value>)',
|
|
background: 'hsl(var(--background) / <alpha-value>)',
|
|
foreground: 'hsl(var(--foreground) / <alpha-value>)',
|
|
primary: {
|
|
DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
|
|
foreground: 'hsl(var(--primary-foreground) / <alpha-value>)',
|
|
},
|
|
secondary: {
|
|
DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
|
|
foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)',
|
|
},
|
|
destructive: {
|
|
DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
|
|
foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)',
|
|
},
|
|
muted: {
|
|
DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
|
|
foreground: 'hsl(var(--muted-foreground) / <alpha-value>)',
|
|
},
|
|
accent: {
|
|
DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
|
|
foreground: 'hsl(var(--accent-foreground) / <alpha-value>)',
|
|
},
|
|
popover: {
|
|
DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
|
|
foreground: 'hsl(var(--popover-foreground) / <alpha-value>)',
|
|
},
|
|
card: {
|
|
DEFAULT: 'hsl(var(--card) / <alpha-value>)',
|
|
foreground: 'hsl(var(--card-foreground) / <alpha-value>)',
|
|
},
|
|
},
|
|
borderRadius: {
|
|
lg: `var(--radius)`,
|
|
md: `calc(var(--radius) - 2px)`,
|
|
sm: 'calc(var(--radius) - 4px)',
|
|
},
|
|
fontFamily: {
|
|
cal: ['var(--font-cal)', ...fontFamily.sans],
|
|
sans: ['system-ui', 'var(--font-sans)', ...fontFamily.sans],
|
|
},
|
|
keyframes: {
|
|
'fade-up': {
|
|
'0%': {
|
|
opacity: '0',
|
|
transform: 'translateY(10px)',
|
|
},
|
|
'80%': {
|
|
opacity: '0.6',
|
|
},
|
|
'100%': {
|
|
opacity: '1',
|
|
transform: 'translateY(0px)',
|
|
},
|
|
},
|
|
'fade-down': {
|
|
'0%': {
|
|
opacity: '0',
|
|
transform: 'translateY(-10px)',
|
|
},
|
|
'80%': {
|
|
opacity: '0.6',
|
|
},
|
|
'100%': {
|
|
opacity: '1',
|
|
transform: 'translateY(0px)',
|
|
},
|
|
},
|
|
'accordion-down': {
|
|
from: { height: '0' },
|
|
to: { height: 'var(--radix-accordion-content-height)' },
|
|
},
|
|
'accordion-up': {
|
|
from: { height: 'var(--radix-accordion-content-height)' },
|
|
to: { height: '0' },
|
|
},
|
|
},
|
|
animation: {
|
|
'fade-up': 'fade-up 0.5s',
|
|
'fade-down': 'fade-down 0.5s',
|
|
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
},
|
|
},
|
|
},
|
|
plugins: [require('tailwindcss-animate')],
|
|
} satisfies Config;
|