tailwind.config.js RawHistoryFolder

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