| 1 | const { fontFamily } = require('tailwindcss/defaultTheme') |
| 2 | |
| 3 | const marp = { |
| 4 | // Brand colors |
| 5 | brand: '#0288d1', |
| 6 | light: '#67b8e3', |
| 7 | dark: '#02669d', |
| 8 | |
| 9 | // Color variations |
| 10 | darken: '#0277b7', |
| 11 | darkest: '#1b4d68', |
| 12 | } |
| 13 | |
| 14 | const gray = { |
| 15 | 100: '#f7fafc', |
| 16 | 200: '#edf2f7', |
| 17 | 300: '#e2e8f0', |
| 18 | 400: '#cbd5e0', |
| 19 | 500: '#a0aec0', |
| 20 | 600: '#718096', |
| 21 | 700: '#4a5568', |
| 22 | 800: '#2d3748', |
| 23 | 900: '#1a202c', |
| 24 | } |
| 25 | |
| 26 | module.exports = { |
| 27 | content: ['@(components|pages|utils)/**/*.[jt]s?(x)'], |
| 28 | theme: { |
| 29 | borderColor: (theme) => ({ ...theme('colors'), DEFAULT: gray[300] }), |
| 30 | colors: { |
| 31 | black: '#000', |
| 32 | current: 'currentColor', |
| 33 | gray, |
| 34 | transparent: 'transparent', |
| 35 | white: '#fff', |
| 36 | background: '#f8f8f8', |
| 37 | foreground: gray[800], |
| 38 | marp, |
| 39 | }, |
| 40 | ringColor: (theme) => ({ ...theme('colors'), DEFAULT: marp.light }), |
| 41 | ringOffsetColor: (theme) => ({ ...theme('colors'), DEFAULT: marp.light }), |
| 42 | fontFamily: { |
| 43 | ...fontFamily, |
| 44 | sans: ['Inter', ...fontFamily.sans], |
| 45 | rounded: ['Quicksand', 'Avenir', 'Century Gothic', ...fontFamily.sans], |
| 46 | }, |
| 47 | screens: { |
| 48 | sm: '640px', |
| 49 | md: '768px', |
| 50 | lg: '1024px', |
| 51 | xl: '1280px', |
| 52 | }, |
| 53 | extend: { transitionDuration: { 0: '0s' } }, |
| 54 | }, |
| 55 | } |
| 56 |