/ tailwind-v3-preset.cjs
tailwind-v3-preset.cjs
 1  /**
 2   * @acdc/design — Tailwind v3 Preset (mobile / NativeWind)
 3   *
 4   * Use this in acdc-wallet (React Native + NativeWind v3):
 5   *   // tailwind.config.js
 6   *   const acdcPreset = require('@acdc/design/tailwind-v3')
 7   *   module.exports = { presets: [acdcPreset], ... }
 8   *
 9   * Note: Values are hardcoded (no CSS vars) — NativeWind v2 + TW v3 has
10   * limited CSS custom property support in React Native.
11   * Web apps use Tailwind v4 + CSS vars instead.
12   *
13   * Feel profile baked in: wallet (roundness=0.7, density=0.4)
14   * To override for a different app feel, fork this file.
15   */
16  
17  /** @type {import('tailwindcss').Config} */
18  module.exports = {
19    theme: {
20      extend: {
21        colors: {
22          // Alpha chain (indigo/violet, hue 264)
23          alpha: {
24            50:  'oklch(97% 0.02 264)',
25            100: 'oklch(92% 0.05 264)',
26            200: 'oklch(85% 0.10 264)',
27            300: 'oklch(75% 0.15 264)',
28            400: 'oklch(65% 0.18 264)',
29            500: 'oklch(52.4% 0.22 264)',  // brand
30            600: 'oklch(45% 0.22 264)',
31            700: 'oklch(37% 0.20 264)',
32            800: 'oklch(28% 0.16 264)',
33            900: 'oklch(18% 0.10 264)',
34          },
35          // Delta chain (emerald/green, hue 162)
36          delta: {
37            50:  'oklch(97% 0.02 162)',
38            100: 'oklch(92% 0.05 162)',
39            200: 'oklch(85% 0.09 162)',
40            300: 'oklch(75% 0.13 162)',
41            400: 'oklch(68% 0.15 162)',
42            500: 'oklch(65.4% 0.17 162)',  // brand
43            600: 'oklch(55% 0.16 162)',
44            700: 'oklch(44% 0.14 162)',
45            800: 'oklch(32% 0.10 162)',
46            900: 'oklch(20% 0.06 162)',
47          },
48          testnet: {
49            500: 'oklch(72% 0.20 50)',
50          },
51          // Semantic surfaces (dark theme — wallet is dark-first)
52          surface: {
53            primary:   'oklch(6% 0 0)',
54            secondary: 'oklch(10% 0 0)',
55            tertiary:  'oklch(14% 0 0)',
56            elevated:  'oklch(10% 0 0)',
57          },
58          // Status
59          success: 'oklch(65.4% 0.17 162)',
60          warning: 'oklch(72% 0.20 50)',
61          error:   'oklch(62% 0.22 25)',
62          info:    'oklch(52.4% 0.22 264)',
63        },
64  
65        // Border radius — wallet feel profile (roundness=0.7)
66        // Formula: max(floor, roundness × multiplier)
67        borderRadius: {
68          none: '0',
69          xs:   '3px',    // max(1px, 0.7 * 0.25rem)
70          sm:   '6px',    // max(1px, 0.7 * 0.5rem)
71          md:   '8px',    // max(2px, 0.7 * 0.75rem)
72          lg:   '14px',   // max(3px, 0.7 * 1.25rem)
73          xl:   '22px',   // max(4px, 0.7 * 2rem)
74          '2xl': '34px',  // max(6px, 0.7 * 3rem)
75          full: '9999px',
76        },
77  
78        // Typography — Inter + JetBrains Mono
79        fontFamily: {
80          sans: ['Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
81          mono: ['JetBrains Mono', 'ui-monospace', 'monospace'],
82        },
83  
84        // Animation — wallet feel profile (energy=0.5)
85        transitionDuration: {
86          micro:  '40ms',   // max(10ms, 0.5 * 80ms)
87          fast:   '75ms',   // max(30ms, 0.5 * 150ms)
88          normal: '150ms',  // max(80ms, 0.5 * 300ms)
89          slow:   '250ms',  // max(150ms, 0.5 * 500ms)
90        },
91      },
92    },
93  }