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};