1  import type { Config } from 'tailwindcss';
  2  import colors from './tokens/colors.json';
  3  import typography from './tokens/typography.json';
  4  import spacing from './tokens/spacing.json';
  5  
  6  const config: Config = {
  7    darkMode: ['class'],
  8    content: [
  9      './src/**/*.{ts,tsx}',
 10      './.storybook/**/*.{ts,tsx}',
 11    ],
 12    theme: {
 13      extend: {
 14        colors: {
 15          // Brand colors
 16          alpha: colors.brand.alpha,
 17          delta: colors.brand.delta,
 18  
 19          // Semantic colors
 20          success: colors.semantic.success,
 21          warning: colors.semantic.warning,
 22          error: colors.semantic.error,
 23          info: colors.semantic.info,
 24  
 25          // Trading colors
 26          long: colors.trading.long,
 27          short: colors.trading.short,
 28  
 29          // Privacy indicators
 30          private: colors.privacy.private,
 31          public: colors.privacy.public,
 32  
 33          // Testnet
 34          testnet: colors.testnet,
 35  
 36          // Neutral scale
 37          neutral: colors.neutral,
 38  
 39          // Semantic theme colors (CSS variables)
 40          background: 'hsl(var(--background))',
 41          foreground: 'hsl(var(--foreground))',
 42          card: {
 43            DEFAULT: 'hsl(var(--card))',
 44            foreground: 'hsl(var(--card-foreground))',
 45          },
 46          popover: {
 47            DEFAULT: 'hsl(var(--popover))',
 48            foreground: 'hsl(var(--popover-foreground))',
 49          },
 50          primary: {
 51            DEFAULT: 'hsl(var(--primary))',
 52            foreground: 'hsl(var(--primary-foreground))',
 53          },
 54          secondary: {
 55            DEFAULT: 'hsl(var(--secondary))',
 56            foreground: 'hsl(var(--secondary-foreground))',
 57          },
 58          muted: {
 59            DEFAULT: 'hsl(var(--muted))',
 60            foreground: 'hsl(var(--muted-foreground))',
 61          },
 62          accent: {
 63            DEFAULT: 'hsl(var(--accent))',
 64            foreground: 'hsl(var(--accent-foreground))',
 65          },
 66          destructive: {
 67            DEFAULT: 'hsl(var(--destructive))',
 68            foreground: 'hsl(var(--destructive-foreground))',
 69          },
 70          border: 'hsl(var(--border))',
 71          input: 'hsl(var(--input))',
 72          ring: 'hsl(var(--ring))',
 73        },
 74        fontFamily: {
 75          sans: [typography.families.sans],
 76          mono: [typography.families.mono],
 77          display: [typography.families.display],
 78        },
 79        borderRadius: {
 80          lg: 'var(--radius)',
 81          md: 'calc(var(--radius) - 2px)',
 82          sm: 'calc(var(--radius) - 4px)',
 83        },
 84        keyframes: {
 85          'accordion-down': {
 86            from: { height: '0' },
 87            to: { height: 'var(--radix-accordion-content-height)' },
 88          },
 89          'accordion-up': {
 90            from: { height: 'var(--radix-accordion-content-height)' },
 91            to: { height: '0' },
 92          },
 93        },
 94        animation: {
 95          'accordion-down': 'accordion-down 0.2s ease-out',
 96          'accordion-up': 'accordion-up 0.2s ease-out',
 97        },
 98      },
 99    },
100    plugins: [],
101  };
102  
103  export default config;