62 lines
2.6 KiB
JavaScript
62 lines
2.6 KiB
JavaScript
import typography from '@tailwindcss/typography';
|
|
|
|
/**
|
|
* UI redesign (Refero-inspired minimal+dense) + dark mode.
|
|
*
|
|
* The neutral `slate` scale and the semantic surface tokens are mapped to CSS
|
|
* variables (defined in src/index.css) so existing *-slate-* classes (1454
|
|
* uses) flip between light and dark with zero component edits. Dark inverts
|
|
* the slate ramp (50<->950) so fg/bg stay coherent. State colors
|
|
* (emerald/amber/red/blue/indigo) keep Tailwind's stock scales for now.
|
|
*/
|
|
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{ts,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
accent: 'var(--brand-primary, #18181b)',
|
|
'accent-deep': 'var(--brand-primary-deep, #09090b)',
|
|
'accent-soft': 'var(--brand-primary-soft, #f4f4f5)',
|
|
'accent-ring': 'var(--brand-primary-ring, rgba(24, 24, 27, 0.25))',
|
|
'accent-fg': 'var(--brand-primary-fg, #ffffff)',
|
|
ink: 'var(--ink, #0f172a)',
|
|
muted: 'var(--muted, #64748b)',
|
|
canvas: 'var(--canvas, #ffffff)',
|
|
surface: 'var(--surface, #fafafa)',
|
|
'surface-2': 'var(--surface-2, #f4f4f5)',
|
|
hairline: 'var(--hairline, #e4e4e7)',
|
|
'hairline-soft': 'var(--hairline-soft, #f4f4f5)',
|
|
// Neutral ramp via CSS vars so *-slate-* auto-themes (1454 uses, no
|
|
// component edits). Light = Tailwind defaults; dark = inverted ramp.
|
|
slate: {
|
|
50: 'var(--slate-50)', 100: 'var(--slate-100)', 200: 'var(--slate-200)',
|
|
300: 'var(--slate-300)', 400: 'var(--slate-400)', 500: 'var(--slate-500)',
|
|
600: 'var(--slate-600)', 700: 'var(--slate-700)', 800: 'var(--slate-800)',
|
|
900: 'var(--slate-900)', 950: 'var(--slate-950)',
|
|
},
|
|
gray: {
|
|
400: 'var(--gray-400)', 500: 'var(--gray-500)', 700: 'var(--gray-700)',
|
|
},
|
|
},
|
|
fontFamily: {
|
|
sans: ['"IBM Plex Sans JP"', '"Hiragino Sans"', 'system-ui', 'sans-serif'],
|
|
mono: ['"JetBrains Mono"', '"IBM Plex Mono"', 'ui-monospace', 'monospace'],
|
|
},
|
|
fontSize: {
|
|
'2xs': ['0.6875rem', { lineHeight: '1rem' }], // 11px
|
|
},
|
|
borderRadius: {
|
|
DEFAULT: '0.375rem', // 6px — matches the new design token.
|
|
},
|
|
boxShadow: {
|
|
// Refined ramp: rely on hairlines for elevation, not drop shadows.
|
|
sm: '0 1px 2px 0 rgba(15, 23, 42, 0.04)',
|
|
DEFAULT: '0 1px 2px 0 rgba(15, 23, 42, 0.05), 0 1px 3px 0 rgba(15, 23, 42, 0.04)',
|
|
md: '0 2px 4px -1px rgba(15, 23, 42, 0.06), 0 4px 6px -1px rgba(15, 23, 42, 0.04)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [typography],
|
|
};
|