spirit-guides/tailwind.config.js at main · john-paul-ruf/spirit-guides · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: [
    './src/renderer/**/*.{ts,tsx,html}',
  ],
  theme: {
    extend: {
      // ── Color Palette ──────────────────────────────────
      // From design spec — warm, muted, introspective.
      colors: {
        primary: {
          DEFAULT: 'rgb(var(--color-primary) / <alpha-value>)',
          light: 'rgb(var(--color-primary-light) / <alpha-value>)',
          dark: 'rgb(var(--color-primary-dark) / <alpha-value>)',
        },
        accent: 'rgb(var(--color-accent) / <alpha-value>)',
        secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
        warmbg: 'rgb(var(--color-bg) / <alpha-value>)',
        surface: 'rgb(var(--color-surface) / <alpha-value>)',
        warmborder: 'rgb(var(--color-border) / <alpha-value>)',
        txt: {
          DEFAULT: 'rgb(var(--color-text-primary) / <alpha-value>)',
          secondary: 'rgb(var(--color-text-secondary) / <alpha-value>)',
          tertiary: 'rgb(var(--color-text-tertiary) / <alpha-value>)',
        },
        danger: {
          DEFAULT: 'rgb(var(--color-danger) / <alpha-value>)',
          bg: 'rgb(var(--color-danger-bg) / <alpha-value>)',
        },
        success: 'rgb(var(--color-success) / <alpha-value>)',
      },
      // ── Typography ─────────────────────────────────────
      fontFamily: {
        serif: ['Georgia', 'Times New Roman', 'serif'],
        sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
      },
      fontSize: {
        display: ['2rem', { lineHeight: '1.3' }],
        h1: ['1.5rem', { lineHeight: '1.3' }],
        h2: ['1.25rem', { lineHeight: '1.3' }],
        h3: ['1.125rem', { lineHeight: '1.3' }],
        body: ['1rem', { lineHeight: '1.6' }],
        small: ['0.875rem', { lineHeight: '1.6' }],
        caption: ['0.75rem', { lineHeight: '1.6' }],
      },
      // ── Corner Radius ──────────────────────────────────
      // Overrides Tailwind defaults to match design spec.
      borderRadius: {
        sm: '8px',    // buttons, inputs
        md: '12px',   // cards
        lg: '16px',   // panels, modals
        pill: '999px', // tags, badges
      },
      // ── Shadow System ──────────────────────────────────
      boxShadow: {
        'level-0': 'none',
        'level-1': '0 1px 2px rgb(var(--shadow-color) / 0.05)',
        'level-2': '0 2px 8px rgb(var(--shadow-color) / 0.08)',
        'level-3': '0 4px 16px rgb(var(--shadow-color) / 0.12)',
        'level-4': '0 8px 32px rgb(var(--shadow-color) / 0.16)',
      },
      // ── Layout Dimensions ──────────────────────────────
      width: {
        sidebar: '220px',
        'sidebar-collapsed': '64px',
        'content-max': '960px',
      },
      height: {
        topbar: '56px',
      },
    },
  },
  plugins: [],
};