62 lines
2.2 KiB
JavaScript
62 lines
2.2 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
|
|
// The six party hues each come as a strong fill, a soft tint and an ink
|
|
// readable on that tint (see the token notes in src/index.css).
|
|
const hues = Object.fromEntries(
|
|
[1, 2, 3, 4, 5, 6].flatMap((n) => [
|
|
[`c${n}`, `var(--c${n})`],
|
|
[`c${n}-soft`, `var(--c${n}-soft)`],
|
|
[`c${n}-ink`, `var(--c${n}-ink)`],
|
|
])
|
|
)
|
|
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
// Color tokens are CSS variables (defined per-theme in src/index.css)
|
|
// rather than literal hex values, so switching the document's
|
|
// `data-theme` re-themes every existing utility class with no markup
|
|
// changes. See src/lib/theme.js for the theme registry.
|
|
colors: {
|
|
surface: 'var(--color-surface)',
|
|
'surface-raised': 'var(--color-surface-raised)',
|
|
'surface-sunken': 'var(--color-surface-sunken)',
|
|
border: 'var(--color-border)',
|
|
'border-strong': 'var(--color-border-strong)',
|
|
'text-primary': 'var(--color-text-primary)',
|
|
'text-secondary': 'var(--color-text-secondary)',
|
|
'text-faint': 'var(--color-text-faint)',
|
|
accent: 'var(--color-accent)',
|
|
'accent-hover': 'var(--color-accent-hover)',
|
|
'on-accent': 'var(--color-on-accent)',
|
|
'accent-warm': 'var(--color-accent-warm)',
|
|
'on-accent-warm': 'var(--color-on-accent-warm)',
|
|
danger: 'var(--color-danger)',
|
|
...hues,
|
|
},
|
|
fontFamily: {
|
|
display: ['"Bricolage Grotesque"', 'system-ui', 'sans-serif'],
|
|
body: ['Figtree', 'system-ui', 'sans-serif'],
|
|
mono: ['"JetBrains Mono"', 'ui-monospace', 'monospace'],
|
|
},
|
|
// Rounder than Tailwind's defaults across the board — the Confetti look
|
|
// is soft and friendly, and bumping the scale here restyles every
|
|
// existing `rounded-*` without touching markup.
|
|
borderRadius: {
|
|
DEFAULT: '0.375rem',
|
|
md: '0.75rem',
|
|
lg: '1rem',
|
|
xl: '1.25rem',
|
|
'2xl': '1.5rem',
|
|
'3xl': '1.75rem',
|
|
},
|
|
boxShadow: {
|
|
card: 'var(--shadow-card)',
|
|
pop: 'var(--shadow-pop)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|