kami
85 lines
2.4 KiB
JavaScript
85 lines
2.4 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Geist', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
|
|
mono: ['Geist Mono', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
|
|
},
|
|
fontSize: {
|
|
'2xs': ['11px', '14px'],
|
|
xs: ['12px', '16px'],
|
|
sm: ['14px', '20px'],
|
|
base: ['16px', '24px'],
|
|
lg: ['18px', '26px'],
|
|
xl: ['24px', '32px'],
|
|
'2xl': ['32px', '40px'],
|
|
},
|
|
colors: {
|
|
bg0: 'var(--ethos-bg0)',
|
|
bg1: 'var(--ethos-bg1)',
|
|
bg2: 'var(--ethos-bg2)',
|
|
surface0: 'var(--ethos-surface0)',
|
|
surface1: 'var(--ethos-surface1)',
|
|
surface2: 'var(--ethos-surface2)',
|
|
border: 'var(--ethos-border)',
|
|
text: 'var(--ethos-text)',
|
|
secondary: 'var(--ethos-secondary)',
|
|
muted: 'var(--ethos-muted)',
|
|
disabled: 'var(--ethos-disabled)',
|
|
accent: 'var(--ethos-accent)',
|
|
'accent-h': 'var(--ethos-accent-hover)',
|
|
green: 'var(--ethos-green)',
|
|
amber: 'var(--ethos-amber)',
|
|
red: 'var(--ethos-red)',
|
|
purple: 'var(--ethos-purple)',
|
|
cyan: 'var(--ethos-cyan)',
|
|
orange: 'var(--ethos-orange)',
|
|
'on-accent': 'var(--ethos-on-accent)',
|
|
},
|
|
borderRadius: {
|
|
DEFAULT: '8px',
|
|
sm: '4px',
|
|
md: '8px',
|
|
lg: '12px',
|
|
xl: '16px',
|
|
full: '9999px',
|
|
},
|
|
spacing: {
|
|
0.5: '4px',
|
|
1: '8px',
|
|
1.5: '12px',
|
|
2: '16px',
|
|
2.5: '20px',
|
|
3: '24px',
|
|
4: '32px',
|
|
5: '40px',
|
|
6: '48px',
|
|
7: '56px',
|
|
8: '64px',
|
|
},
|
|
animation: {
|
|
'fade-in': 'fadeIn 150ms ease both',
|
|
'rise': 'rise 150ms ease both',
|
|
'slide-in': 'slideIn 150ms ease both',
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
rise: {
|
|
'0%': { opacity: '0', transform: 'translateY(6px)' },
|
|
'100%': { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
slideIn: {
|
|
'0%': { opacity: '0', transform: 'translateX(8px)' },
|
|
'100%': { opacity: '1', transform: 'translateX(0)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|