/ 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 }