tailwind.config.js RawHistoryFolder

1/** @type {import('tailwindcss').Config} */
2export default {
3  content: [
4    './src/**/*.{html,js,ts,svelte}',
5  ],
6  theme: {
7    extend: {
8      // Custom design system colors
9      colors: {
10        // Browser-specific colors that work well in both themes
11        browser: {
12          bg: 'rgb(var(--browser-bg) / <alpha-value>)',
13          surface: 'rgb(var(--browser-surface) / <alpha-value>)',
14          text: 'rgb(var(--browser-text) / <alpha-value>)',
15          muted: 'rgb(var(--browser-muted) / <alpha-value>)',
16          accent: 'rgb(var(--browser-accent) / <alpha-value>)',
17          border: 'rgb(var(--browser-border) / <alpha-value>)',
18        }
19      },
20      // Animation speeds optimized for browser UI
21      transitionDuration: {
22        '150': '150ms', // Fast interactions
23        '250': '250ms', // UI feedback
24        '400': '400ms', // Smooth transitions
25      },
26      // Typography scale for browser UI
27      fontSize: {
28        'xs': ['0.75rem', '1rem'],
29        'sm': ['0.875rem', '1.25rem'],
30        'base': ['1rem', '1.5rem'],
31        'lg': ['1.125rem', '1.75rem'],
32      },
33      // Spacing for compact UI elements
34      spacing: {
35        '18': '4.5rem',
36        '22': '5.5rem',
37      }
38    },
39  },
40  plugins: [],
41  // Manual dark mode control (not system preference)
42  // This allows GTK to control theme via CSS class
43  darkMode: 'class',
44};