mediaFlow/tailwind.config.js at main · minipuft/mediaFlow · 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
module.exports = {
  // Specify the files Tailwind should scan for classes
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // Custom color palette
      colors: {
        primary: '#7aa2f7', // Tokyo Night blue
        secondary: '#bb9af7', // Tokyo Night purple
        background: {
          light: '#1a1b26', // Tokyo Night background
          dark: '#16161e', // Tokyo Night darker background
        },
        gray: {
          100: '#a9b1d6',
          200: '#9aa5ce',
          300: '#787c99',
          400: '#565f89',
          500: '#414868',
          600: '#363b54',
          700: '#24283b',
        },
        accent: {
          peach: '#ff9e64',
          green: '#9ece6a',
          cyan: '#7dcfff',
          red: '#f7768e',
        },
        transparent: 'transparent',
      },
      // Custom font stack for consistent typography across platforms
      fontFamily: {
        sans: [
          '-apple-system',
          'BlinkMacSystemFont',
          'Segoe UI',
          'Roboto',
          'Oxygen-Sans',
          'Ubuntu',
          'Cantarell',
          'Helvetica Neue',
          'sans-serif',
        ],
      },
      // Conceptual Spacing Units for Future Consistency
      spacing: {
        'app-gutter': '1rem', // General layout gutter (16px)
        'content-padding': '1.5rem', // Padding for main content areas (24px)
        'control-padding-y': '0.5rem', // Vertical padding for controls (8px)
        'control-padding-x': '0.75rem', // Horizontal padding for controls (12px)
        'sidebar-width': '240px', // Anticipated sidebar width
        'sidebar-padding-x': '1rem', // Sidebar horizontal padding (16px)
        'sidebar-padding-y': '1.5rem', // Sidebar vertical padding (24px)
        'menu-item-visual-gap': '0.25rem', // Desired visual gap between menu items (4px)
        'orb-radius-current': '95px', // Current NexusOrb menu item radius
      },
    },
  },
  variants: {
    extend: {
      // Enable additional variant combinations for enhanced interactivity
      opacity: ['group-hover'], // Apply opacity changes on group hover
      transform: ['group-hover'], // Apply transformations on group hover
    },
  },
  plugins: [
    // Add aspect-ratio plugin for responsive image and video containers
    require('@tailwindcss/aspect-ratio'),
    // Space for additional Tailwind plugins as needed
  ],
};