wave/tailwind.config.js at main · siddug/wave · 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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
const theme = require('./src/react/theme.js').default || require('./src/react/theme.js');

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/react/**/*.{js,jsx,ts,tsx}",
  ],
  darkMode: 'class', // Use class-based dark mode for manual control
  theme: {
    extend: {
      // Locus Color Palette
      colors: {
        // Primary colors
        primary: theme.colors.primary,
        accent: theme.colors.accent,

        // Backgrounds
        'bg-primary': theme.colors.background.primary,
        'bg-surface': theme.colors.background.surface,
        'bg-secondary': theme.colors.background.secondary,

        // Text colors
        'text-primary': theme.colors.text.primary,
        'text-body': theme.colors.text.body,
        'text-secondary': theme.colors.text.secondary,
        'text-tertiary': theme.colors.text.tertiary,

        // Button colors
        'btn-bg': theme.colors.button.bg,
        'btn-text': theme.colors.button.text,
        'btn-hover': theme.colors.button.hover,

        // Borders
        'border-light': theme.colors.border.light,
        'border-medium': theme.colors.border.medium,
        'border-dark': theme.colors.border.dark,

        // Highlights
        'code': theme.colors.code,
        'mark': theme.colors.mark,
        'grid': theme.colors.grid,

        // Semantic colors
        success: theme.colors.success,
        warning: theme.colors.warning,
        error: theme.colors.error,
        info: theme.colors.info,
      },

      // Locus Typography
      fontSize: theme.fontSize,
      fontWeight: theme.fontWeight,

      // Locus Spacing (4pt/8pt grid)
      spacing: theme.spacing,

      // Locus Corner Radius
      borderRadius: theme.borderRadius,

      // Locus Shadows
      boxShadow: theme.boxShadow,

      // Locus Animations
      transitionDuration: theme.transitionDuration,
      transitionTimingFunction: theme.transitionTimingFunction,

      // Responsive Breakpoints
      screens: theme.screens,

      // Component dimensions
      width: {
        'sidebar-expanded': theme.components.sidebar.expanded,
        'sidebar-collapsed': theme.components.sidebar.collapsed,
        'form-max': theme.components.form.maxWidth,
        'input-max': theme.components.input.maxWidth,
      },
      height: {
        'touch-min': theme.components.touch.minTarget,
        'otp': theme.components.otp.size,
      },
      minWidth: {
        'touch': theme.components.touch.minTarget,
      },
      minHeight: {
        'touch': theme.components.touch.minTarget,
      },
    },
  },
  plugins: [],
}