cia-compliance-manager/tailwind.config.ts at main · Hack23/cia-compliance-manager · 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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
import type { Config } from 'tailwindcss';
import {
  SPACING,
  TYPOGRAPHY,
  FONT_WEIGHTS,
  SEMANTIC_COLORS,
  BORDER_RADIUS,
  SHADOWS,
  TRANSITIONS,
  EASING,
} from './src/constants/designTokens';

/**
 * Tailwind CSS Configuration
 *
 * This configuration imports design tokens from src/constants/designTokens.ts
 * to establish a single source of truth for the design system.
 *
 * All spacing, typography, colors, border radius, and shadows are defined
 * in designTokens.ts and imported here to ensure consistency across the application.
 */
const config: Config = {
  content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: 'class',
  theme: {
    extend: {
      // Spacing scale imported from designTokens.ts
      // Primarily aligned to an 8px grid, with optimized values to reduce widget empty space
      spacing: {
        xs: SPACING.xs,
        sm: SPACING.sm,
        md: SPACING.md,
        lg: SPACING.lg,
        xl: SPACING.xl,
        xxl: SPACING.xxl,
      },
      // Typography scale
      // Imported from designTokens.ts
      fontSize: {
        caption: [TYPOGRAPHY.caption, { lineHeight: '1.25' }],
        body: [TYPOGRAPHY.body, { lineHeight: '1.5' }],
        'body-lg': [TYPOGRAPHY.bodyLarge, { lineHeight: '1.5' }],
        subheading: [TYPOGRAPHY.subheading, { lineHeight: '1.5' }],
        heading: [TYPOGRAPHY.heading, { lineHeight: '1.25' }],
        title: [TYPOGRAPHY.title, { lineHeight: '1.25' }],
        display: [TYPOGRAPHY.display, { lineHeight: '1.25' }],
      },
      // Font weights
      // Imported from designTokens.ts
      fontWeight: {
        normal: FONT_WEIGHTS.normal,
        medium: FONT_WEIGHTS.medium,
        semibold: FONT_WEIGHTS.semibold,
        bold: FONT_WEIGHTS.bold,
      },
      // Semantic colors
      // Imported from designTokens.ts - uses purple for primary to restore v1.0.6 appearance
      colors: {
        primary: {
          light: SEMANTIC_COLORS.primary.light,
          DEFAULT: SEMANTIC_COLORS.primary.main,
          dark: SEMANTIC_COLORS.primary.dark,
        },
        success: {
          light: SEMANTIC_COLORS.success.light,
          DEFAULT: SEMANTIC_COLORS.success.main,
          dark: SEMANTIC_COLORS.success.dark,
        },
        warning: {
          light: SEMANTIC_COLORS.warning.light,
          DEFAULT: SEMANTIC_COLORS.warning.main,
          dark: SEMANTIC_COLORS.warning.dark,
        },
        error: {
          light: SEMANTIC_COLORS.error.light,
          DEFAULT: SEMANTIC_COLORS.error.main,
          dark: SEMANTIC_COLORS.error.dark,
        },
        info: {
          light: SEMANTIC_COLORS.info.light,
          DEFAULT: SEMANTIC_COLORS.info.main,
          dark: SEMANTIC_COLORS.info.dark,
        },
        neutral: {
          light: SEMANTIC_COLORS.neutral.light,
          DEFAULT: SEMANTIC_COLORS.neutral.main,
          dark: SEMANTIC_COLORS.neutral.dark,
        },
      },
      // Border radius
      // Imported from designTokens.ts - optimized to restore rounded appearance from v1.0.6
      borderRadius: {
        none: BORDER_RADIUS.none,
        sm: BORDER_RADIUS.sm,
        md: BORDER_RADIUS.md,
        lg: BORDER_RADIUS.lg,
        xl: BORDER_RADIUS.xl,
        full: BORDER_RADIUS.full,
      },
      // Shadows
      // Imported from designTokens.ts
      boxShadow: {
        none: SHADOWS.none,
        sm: SHADOWS.sm,
        md: SHADOWS.md,
        lg: SHADOWS.lg,
        xl: SHADOWS.xl,
        xxl: SHADOWS.xxl,
      },
      // Transitions
      // Imported from designTokens.ts
      transitionDuration: {
        fast: TRANSITIONS.fast,
        normal: TRANSITIONS.normal,
        slow: TRANSITIONS.slow,
      },
      // Easing functions
      // Imported from designTokens.ts
      transitionTimingFunction: {
        default: EASING.default,
        in: EASING.in,
        out: EASING.out,
        sharp: EASING.sharp,
      },
    },
  },
  // Enable v3 compatibility mode
  future: {
    respectDefaultRingColorOpacity: false,
    disableColorOpacityUtilitiesByDefault: false,
  },
  plugins: [],
};

export default config;