99 lines
2.5 KiB
JavaScript
99 lines
2.5 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./src/**/*.{js,ts,jsx,tsx}'],
|
|
theme: {
|
|
fontFamily: {
|
|
sans: 'Poppins',
|
|
},
|
|
|
|
fontSize: {
|
|
// Based off 16px
|
|
sm: '0.688rem',
|
|
md: '0.875rem',
|
|
lg: '1rem',
|
|
xl: '1.25rem',
|
|
xxl: '1.5rem',
|
|
'2xl': '2rem',
|
|
},
|
|
|
|
colors: {
|
|
white: '#ffffff',
|
|
black: '#000000',
|
|
|
|
gray: {
|
|
'.5': '#FFFFFF0D',
|
|
'.10': '#FFFFFF1A',
|
|
},
|
|
|
|
fg: {
|
|
primary: {
|
|
DEFAULT: '#D5DBFF',
|
|
hover: '#D5DBFFD9',
|
|
pressed: '#E1E5FF',
|
|
disabled: '#E1E5FF80',
|
|
},
|
|
secondary: {
|
|
DEFAULT: '#78818D',
|
|
hover: '#5F6874',
|
|
pressed: '#828D9B',
|
|
disabled: '#78818D80',
|
|
},
|
|
},
|
|
|
|
brand: {
|
|
DEFAULT: '#2B4BFF',
|
|
hover: '#2843DD',
|
|
pressed: '#3957FF',
|
|
disabled: '#3957FF80',
|
|
},
|
|
|
|
onbrand: {
|
|
DEFAULT: '#D5DBFF',
|
|
hover: '#D5DBFFD9',
|
|
pressed: '#E1E5FF',
|
|
disabled: '#E1E5FF80',
|
|
},
|
|
|
|
danger: {
|
|
DEFAULT: '#FF4444',
|
|
hover: '#D63434',
|
|
pressed: '#FF5656',
|
|
disabled: '#FF444480',
|
|
},
|
|
|
|
component: {
|
|
bg: {
|
|
DEFAULT: '#1A2229',
|
|
hover: '#171F25',
|
|
pressed: '#222C35',
|
|
disabled: '#1A222980',
|
|
},
|
|
},
|
|
|
|
primary: '#11171C',
|
|
secondary: '#192026',
|
|
},
|
|
extend: {
|
|
height: {
|
|
15: '60px',
|
|
},
|
|
|
|
animation: {
|
|
'fade-in': 'fadeIn 150ms easeOutExpo forwards',
|
|
'fade-out': 'fadeOut 150ms easeOutExpo forwards',
|
|
},
|
|
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
fadeOut: {
|
|
'0%': { opacity: '1' },
|
|
'100%': { opacity: '0' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|