Wojtek
131 lines
4.4 KiB
JavaScript
131 lines
4.4 KiB
JavaScript
const defaultTheme = require('tailwindcss/defaultTheme');
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
const config = {
|
|
content: ['./{app,stories}/**/*.{ts,tsx,jsx,js}'],
|
|
theme: {
|
|
colors: {
|
|
transparent: 'transparent',
|
|
current: 'currentColor',
|
|
white: '#ffffff',
|
|
black: '#000000',
|
|
grey: {
|
|
25: '#FCFCFC',
|
|
50: '#FAFAFA',
|
|
100: '#F4F4F5',
|
|
200: '#E4E4E7',
|
|
300: '#D1D1D6',
|
|
400: '#A0A0AB',
|
|
500: '#70707B',
|
|
600: '#51525C',
|
|
700: '#3F3F46',
|
|
800: '#26272B',
|
|
900: '#18181B',
|
|
},
|
|
error: {
|
|
25: '#FFFBFA',
|
|
50: '#FEF3F2',
|
|
100: '#FEE4E2',
|
|
200: '#FECDCA',
|
|
300: '#FDA29B',
|
|
400: '#F97066',
|
|
500: '#F04438',
|
|
600: '#D92D20',
|
|
700: '#B42318',
|
|
800: '#912018',
|
|
900: '#7A271A',
|
|
},
|
|
success: {
|
|
25: '#F6FEF9',
|
|
50: '#ECFDF3',
|
|
100: '#D1FADF',
|
|
200: '#A6F4C5',
|
|
300: '#6CE9A6',
|
|
400: '#32D583',
|
|
500: '#12B76A',
|
|
600: '#039855',
|
|
700: '#027A48',
|
|
800: '#05603A',
|
|
900: '#054F31',
|
|
},
|
|
warning: {
|
|
25: '#FFFCF5',
|
|
50: '#FFFAEB',
|
|
100: '#FEF0C7',
|
|
200: '#FEDF89',
|
|
300: '#FEC84B',
|
|
400: '#FDB022',
|
|
500: '#F79009',
|
|
600: '#DC6803',
|
|
700: '#B54708',
|
|
800: '#93370D',
|
|
900: '#7A2E0E',
|
|
},
|
|
blue: {
|
|
25: '#F5F8FF',
|
|
50: '#EFF4FF',
|
|
100: '#D1E0FF',
|
|
200: '#B2CCFF',
|
|
300: '#84ADFF',
|
|
400: '#528BFF',
|
|
500: '#2970FF',
|
|
600: '#155EEF',
|
|
700: '#004EEB',
|
|
800: '#0040C1',
|
|
900: '#00359E',
|
|
},
|
|
'blue-brand': '#3A65EB',
|
|
'blue-dark': '#0E106D',
|
|
'blue-light': '#C8D4FA',
|
|
green: '#01A74D',
|
|
'green-dark': '#102C22',
|
|
'green-light': '#A2FFC1',
|
|
brown: '#AA8544',
|
|
'brown-dark': '#421400',
|
|
'brown-light': '#FFE7BD',
|
|
purple: '#37276A',
|
|
'purple-dark': '#6B32E4',
|
|
'purple-light': '#F7ECFF',
|
|
red: '#CA2240',
|
|
'red-dark': '#4C0000',
|
|
'red-light': '#FFDFDB',
|
|
},
|
|
extend: {
|
|
fontSize: {
|
|
base: ['1rem', '1.375rem'], //line-height 22px instead of 24
|
|
lg: ['1.125rem', '1.625rem'],
|
|
'1.5lg': ['1.25rem', '1.625rem'],
|
|
xl: ['1.375rem', '1.75rem'],
|
|
'1.5xl': ['1.5rem', '1.75rem'],
|
|
'2.5xl': ['1.625rem', '2rem'],
|
|
},
|
|
fontFamily: {
|
|
sans: ['PolySans', ...defaultTheme.fontFamily.sans],
|
|
},
|
|
boxShadow: {
|
|
xs: '0px 1px 2px rgba(16, 24, 40, 0.05)',
|
|
sm: ['0px 2px 8px rgba(16, 24, 40, 0.1)', '0px 1px 2px rgba(16, 24, 40, 0.06)'],
|
|
md: ['0px 12px 32px -2px rgba(16, 24, 40, 0.1)', '0px 3px 9px -2px rgba(16, 24, 40, 0.06)'],
|
|
lg: ['0px 12px 32px -4px rgba(16, 24, 40, 0.08)', '0px 4px 22px -2px rgba(16, 24, 40, 0.03)'],
|
|
xl: ['0px 28px 32px -4px rgba(16, 24, 40, 0.08)', '0px 10px 16px -4px rgba(16, 24, 40, 0.03)'],
|
|
'2xl': '0px 24px 48px -12px rgba(16, 24, 40, 0.18)',
|
|
'3xl': '0px 32px 64px -12px rgba(16, 24, 40, 0.14)',
|
|
//border do not work well on tbody element, so we mimic that with box-shadow
|
|
tbody: ['0 0 0 1px #E4E4E7', '0px 2px 8px rgba(16, 24, 40, 0.1)', '0px 1px 2px rgba(16, 24, 40, 0.06)'],
|
|
},
|
|
gridTemplateColumns: {
|
|
24: 'repeat(24, minmax(0, 1fr))',
|
|
},
|
|
maxWidth: {
|
|
'page-size': '1520px',
|
|
},
|
|
borderRadius: {
|
|
'1.5xl': '1.5rem',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|
|
|
|
module.exports = config;
|