Files
bewell-in-ua/tailwind.config.ts
2025-03-11 02:54:09 +02:00

175 lines
3.9 KiB
TypeScript

import type {Config} from 'tailwindcss'
import {BRAND_COLOR_VIOLET, BRAND_COLOR_YELLOW} from './lib/constants'
export default {
darkMode: ['class'],
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}'
],
mode: 'jit',
theme: {
screens: {
xs: '475px',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px'
},
extend: {
container: {
center: true,
screens: {
DEFAULT: '100%',
xl: '1200px'
},
padding: {
DEFAULT: '15px',
xl: 'unset'
}
},
fontFamily: {
heading: ['var(--font-myriad)']
},
colors: {
stone: {
'50': '#f6f6f6',
'100': '#e7e7e7',
'200': '#d1d1d1',
'300': '#b0b0b0',
'400': '#888888',
'500': '#666666',
'600': '#5d5d5d',
'700': '#4f4f4f',
'800': '#454545',
'900': '#3d3d3d',
'950': '#262626',
DEFAULT: '#666666'
},
brand: {
yellow: {
'50': '#fffbeb',
'100': '#fff4c6',
'200': '#ffe788',
'300': '#ffd139',
'400': '#ffc120',
'500': '#f99f07',
'600': '#dd7702',
'700': '#b75306',
'800': '#943f0c',
'900': '#7a350d',
'950': '#461a02',
DEFAULT: BRAND_COLOR_YELLOW
},
violet: {
'50': '#edeeff',
'100': '#dfdfff',
'200': '#c6c5ff',
'300': '#a6a2ff',
'400': '#8d7dfc',
'500': '#7c5ff5',
'600': '#7041ea',
'700': '#6034ce',
'800': '#4e2da6',
'900': '#442d88',
'950': '#281a4c',
DEFAULT: BRAND_COLOR_VIOLET
}
},
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
},
sidebar: {
DEFAULT: 'hsl(var(--sidebar-background))',
foreground: 'hsl(var(--sidebar-foreground))',
primary: 'hsl(var(--sidebar-primary))',
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
accent: 'hsl(var(--sidebar-accent))',
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
border: 'hsl(var(--sidebar-border))',
ring: 'hsl(var(--sidebar-ring))'
}
},
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
boxShadow: {
'dd-menu': '7px 7px 11px 0 rgba(213,212,212,.75)'
},
aspectRatio: {
univisium: '2 / 1',
card: '850 / 834',
yt: '1903 / 784'
},
keyframes: {
'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: {
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out'
}
}
},
plugins: [
require('tailwindcss-animate'),
require('tailwind-scrollbar'),
require('@tailwindcss/typography')
]
} satisfies Config