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.alpha,
 17          delta: colors.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        // Radius classes map to feel-computed vars (feel.css drives the values)
 80        borderRadius: {
 81          none: '0',
 82          xs:   'var(--radius-xs)',
 83          sm:   'var(--radius-sm)',
 84          md:   'var(--radius-md)',
 85          lg:   'var(--radius-lg)',
 86          xl:   'var(--radius-xl)',
 87          '2xl': 'var(--radius-2xl)',
 88          full: 'var(--radius-full)',
 89          badge:  'var(--radius-badge)',
 90          button: 'var(--radius-button)',
 91          card:   'var(--radius-card)',
 92          input:  'var(--radius-input)',
 93          modal:  'var(--radius-modal)',
 94        },
 95        keyframes: {
 96          'accordion-down': {
 97            from: { height: '0' },
 98            to: { height: 'var(--radix-accordion-content-height)' },
 99          },
100          'accordion-up': {
101            from: { height: 'var(--radix-accordion-content-height)' },
102            to: { height: '0' },
103          },
104        },
105        animation: {
106          'accordion-down': 'accordion-down 0.2s ease-out',
107          'accordion-up': 'accordion-up 0.2s ease-out',
108        },
109      },
110    },
111    plugins: [],
112  };
113  
114  export default config;