Vasek Mlejnsky
153 lines
4.3 KiB
TypeScript
153 lines
4.3 KiB
TypeScript
import { type Config } from 'tailwindcss'
|
|
import typographyStyles from './typography'
|
|
import typographyPlugin from '@tailwindcss/typography'
|
|
import headlessuiPlugin from '@headlessui/tailwindcss'
|
|
import animatePlugin from 'tailwindcss-animate'
|
|
import tailwidScrollbar from 'tailwind-scrollbar'
|
|
|
|
export default {
|
|
content: ['./src/**/*.{js,mjs,jsx,ts,tsx,mdx}'],
|
|
darkMode: 'class',
|
|
theme: {
|
|
container: {
|
|
center: true,
|
|
padding: '2rem',
|
|
screens: {
|
|
'2xl': '1400px',
|
|
},
|
|
},
|
|
fontSize: {
|
|
'2xs': ['0.75rem', { lineHeight: '1.25rem' }],
|
|
xs: ['0.8125rem', { lineHeight: '1.5rem' }],
|
|
sm: ['0.875rem', { lineHeight: '1.5rem' }],
|
|
base: ['1rem', { lineHeight: '1.75rem' }],
|
|
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' }],
|
|
'7xl': ['4.5rem', { lineHeight: '1' }],
|
|
'8xl': ['6rem', { lineHeight: '1' }],
|
|
'9xl': ['8rem', { lineHeight: '1' }],
|
|
},
|
|
typography: typographyStyles,
|
|
extend: {
|
|
colors: {
|
|
scrollbar: '#5A5A5A',
|
|
gray: {
|
|
25: '#FCFCFC',
|
|
50: '#FAFAFA',
|
|
100: '#F5F5F5',
|
|
200: '#EBEBEB',
|
|
300: '#E0E0E0',
|
|
400: '#CCCCCC',
|
|
500: '#999999',
|
|
600: '#666666',
|
|
700: '#525252',
|
|
800: '#333333',
|
|
900: '#1E1E1E',
|
|
1000: '#0A0A0A',
|
|
},
|
|
brand: {
|
|
1000: '#1A0E00',
|
|
900: '#331B00',
|
|
800: '#663600',
|
|
700: '#995100',
|
|
600: '#CC6D00',
|
|
500: '#E57B00',
|
|
400: '#FF8800',
|
|
300: '#FF9F33',
|
|
200: '#FFB766',
|
|
100: '#FFCF99',
|
|
50: '#FFE7CC',
|
|
25: '#FFF3E5',
|
|
},
|
|
border: 'hsl(var(--border))',
|
|
input: 'hsl(var(--input))',
|
|
ring: 'hsl(var(--ring))',
|
|
background: 'hsl(var(--background))',
|
|
foreground: 'hsl(var(--foreground))',
|
|
primary: {
|
|
DEFAULT: 'hsl(var(--primary))',
|
|
foreground: 'hsl(var(--primary-foreground))',
|
|
},
|
|
secondary: {
|
|
DEFAULT: 'hsl(var(--secondary))',
|
|
foreground: 'hsl(var(--secondary-foreground))',
|
|
},
|
|
destructive: {
|
|
DEFAULT: 'hsl(var(--destructive))',
|
|
foreground: 'hsl(var(--destructive-foreground))',
|
|
},
|
|
muted: {
|
|
DEFAULT: 'hsl(var(--muted))',
|
|
foreground: 'hsl(var(--muted-foreground))',
|
|
},
|
|
accent: {
|
|
DEFAULT: 'hsl(var(--accent))',
|
|
foreground: 'hsl(var(--accent-foreground))',
|
|
},
|
|
popover: {
|
|
DEFAULT: 'hsl(var(--popover))',
|
|
foreground: 'hsl(var(--popover-foreground))',
|
|
},
|
|
card: {
|
|
DEFAULT: 'hsl(var(--card))',
|
|
foreground: 'hsl(var(--card-foreground))',
|
|
},
|
|
},
|
|
borderRadius: {
|
|
lg: 'var(--radius)',
|
|
md: 'calc(var(--radius) - 2px)',
|
|
sm: 'calc(var(--radius) - 4px)',
|
|
},
|
|
boxShadow: {
|
|
glow: '0 0 4px rgb(0 0 0 / 0.1)',
|
|
},
|
|
maxWidth: {
|
|
lg: '33rem',
|
|
'2xl': '40rem',
|
|
'3xl': '50rem',
|
|
'5xl': '66rem',
|
|
},
|
|
opacity: {
|
|
1: '0.01',
|
|
2.5: '0.025',
|
|
7.5: '0.075',
|
|
15: '0.15',
|
|
},
|
|
animation: {
|
|
loaderDots: 'loaderDots 0.5s infinite alternate',
|
|
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
},
|
|
keyframes: {
|
|
loaderDots: {
|
|
to: {
|
|
opacity: '0.1',
|
|
transform: 'translate3d(0, -0.3rem, 0)', // TODO: More parametric
|
|
},
|
|
},
|
|
'accordion-down': {
|
|
// @ts-ignore
|
|
from: { height: 0 },
|
|
to: { height: 'var(--radix-accordion-content-height)' },
|
|
},
|
|
'accordion-up': {
|
|
from: { height: 'var(--radix-accordion-content-height)' },
|
|
// @ts-ignore
|
|
to: { height: 0 },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
typographyPlugin,
|
|
headlessuiPlugin,
|
|
animatePlugin,
|
|
tailwidScrollbar,
|
|
],
|
|
} satisfies Config
|