FocusHub/tailwind.config.js at main · hawkaii/FocusHub · 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
const animations = require("./src/theme/animations.js");

module.exports = {
  darkMode: "class",
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {
      ...animations,
      fontFamily: {
        "radio-canada": ['"Radio Canada"', "sans-serif"],
      },
      colors: {
        // Primary Colors
        'primary-dark': '#2D3142',
        'secondary-light': '#BFC0C0',
        'white': '#FFFFFF',
        'accent-orange': '#EF8354',
        'supporting-blue': '#4F5D75',

        // Semantic Colors using CSS variables
        'text': {
          'primary': 'var(--color-text-primary)',
          'secondary': 'var(--color-text-secondary)',
          'muted': 'var(--color-text-muted)',
        },
        'background': {
          'primary': 'var(--color-background-primary)',
          'secondary': 'var(--color-background-secondary)',
          'tertiary': 'var(--color-background-tertiary)',
        },
        'border': {
          'light': 'var(--color-border-light)',
          'medium': 'var(--color-border-medium)',
          'dark': 'var(--color-border-dark)',
        },

        // Interactive States
        'hover': {
          'primary': 'var(--color-hover-primary)',
          'accent': 'var(--color-hover-accent)',
        },
        'focus': 'var(--color-focus-ring)',
        'active': 'var(--color-active)',

        // Status Colors
        'success': 'var(--color-success)',
        'warning': 'var(--color-warning)',
        'error': 'var(--color-error)',
        'info': 'var(--color-info)',
      },
      boxShadow: {
        'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1)',
        'card-hover': '0 10px 15px -3px rgba(0, 0, 0, 0.15)',
        'focus': '0 0 0 3px rgba(239, 131, 84, 0.1)',
      },
    },
  },
  plugins: [],
};