tailwind.config.js RawHistoryFolder

1/** @type {import('tailwindcss').Config} */
2export default {
3  content: ["./src/**/*.{html,js,ts,svelte}"],
4  theme: {
5    extend: {
6      // Font families for Industrial Terminal aesthetic
7      fontFamily: {
8        mono: ['"JetBrains Mono NF"', "ui-monospace", "SFMono-Regular", "monospace"],
9        sans: ["Inter", "system-ui", "-apple-system", "sans-serif"],
10      },
11      // Custom design system colors
12      colors: {
13        border: "var(--border)",
14        input: "var(--input)",
15        ring: "var(--ring)",
16        background: "var(--background)",
17        foreground: "var(--foreground)",
18        primary: "var(--primary)",
19        "primary-foreground": "var(--primary-foreground)",
20        secondary: "var(--secondary)",
21        "secondary-foreground": "var(--secondary-foreground)",
22        destructive: "var(--destructive)",
23        "destructive-foreground": "var(--destructive-foreground)",
24        muted: "var(--muted)",
25        "muted-foreground": "var(--muted-foreground)",
26        accent: "var(--accent)",
27        "accent-foreground": "var(--accent-foreground)",
28        popover: "var(--popover)",
29        "popover-foreground": "var(--popover-foreground)",
30        card: "var(--card)",
31        "card-foreground": "var(--card-foreground)",
32        // Browser-specific colors that work well in both themes
33        browser: {
34          bg: "rgb(var(--browser-bg) / <alpha-value>)",
35          surface: "rgb(var(--browser-surface) / <alpha-value>)",
36          text: "rgb(var(--browser-text) / <alpha-value>)",
37          muted: "rgb(var(--browser-muted) / <alpha-value>)",
38          accent: "rgb(var(--browser-accent) / <alpha-value>)",
39          border: "rgb(var(--browser-border) / <alpha-value>)",
40        },
41      },
42      // Animation speeds optimized for browser UI
43      transitionDuration: {
44        150: "150ms", // Fast interactions
45        250: "250ms", // UI feedback
46        400: "400ms", // Smooth transitions
47      },
48      // Typography scale for browser UI
49      fontSize: {
50        xs: ["0.75rem", "1rem"],
51        sm: ["0.875rem", "1.25rem"],
52        base: ["1rem", "1.5rem"],
53        lg: ["1.125rem", "1.75rem"],
54      },
55      // Spacing for compact UI elements
56      spacing: {
57        18: "4.5rem",
58        22: "5.5rem",
59      },
60    },
61  },
62  plugins: [],
63  // Manual dark mode control (not system preference)
64  // This allows GTK to control theme via CSS class
65  darkMode: "class",
66};