dennisthiessenandClaude Fable 5
20f6981712
Replaces the citron/green glass theme with the Horizon direction (mockup at /design-horizon): space-void background, starfield, dim Mars horizon, rim-cyan accent, rose for negative. Palette validated for CVD separation and contrast on the dark surface. - tailwind.config: gray -> cool space neutrals, blue/emerald -> cyan scale, red -> rose; display font Space Grotesk - globals.css: Horizon tokens, atmosphere, denser glass, cyan buttons/inputs, price-rail / R-bar / radar chart CSS - Dashboard rebuilt: verdict hero, top-pick card with spatial price rail, KPI tiles, open positions as diverging R-bars with expandable detail + trade chart (OHLCV since entry, entry/stop/target levels), radar list with per-setup disqualify reason, watchlist chips - OpenTradesPanel: table replaced by R-bar rows; all fields kept in the drill-down (shares, P&L, alpha, trailing stop, sell) - qualification: disqualifyReason() mirrors qualifiesSetup rule order - CandlestickChart: canvas colors moved to Horizon palette; S/R now cyan/neutral so rose stays reserved for the stop level - ScoreCard: radar score fingerprint with hover values - Design mockup pages included (routed in App.tsx) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
111 lines
3.2 KiB
TypeScript
111 lines
3.2 KiB
TypeScript
import type { Config } from 'tailwindcss';
|
|
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{ts,tsx}'],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['"Instrument Sans"', 'system-ui', 'sans-serif'],
|
|
display: ['"Space Grotesk"', 'system-ui', 'sans-serif'],
|
|
mono: ['"IBM Plex Mono"', 'ui-monospace', 'monospace'],
|
|
},
|
|
colors: {
|
|
// Horizon theme: cool space neutrals — replaces Tailwind's gray
|
|
// throughout the app, since components reference gray-* directly.
|
|
gray: {
|
|
50: '#f4f5f8',
|
|
100: '#edeef3',
|
|
200: '#dde0e8',
|
|
300: '#bcc1cd',
|
|
400: '#9aa0b0',
|
|
500: '#6e7484',
|
|
600: '#4d5363',
|
|
700: '#373c49',
|
|
800: '#232733',
|
|
900: '#14161f',
|
|
950: '#0a0b11',
|
|
},
|
|
// Atmosphere-rim cyan accent — every accent reference
|
|
// (text-blue-*, bg-blue-*, ring-blue-*) lights up in the brand color.
|
|
// Validated against the dark surface (dataviz six checks).
|
|
blue: {
|
|
50: '#ecfbfe',
|
|
100: '#d4f4fa',
|
|
200: '#ade8f2',
|
|
300: '#6ec9db',
|
|
400: '#4ab3c8',
|
|
500: '#2f9db2',
|
|
600: '#23808f',
|
|
700: '#1d6675',
|
|
800: '#1a525e',
|
|
900: '#17434e',
|
|
950: '#0a2b33',
|
|
},
|
|
// Positive/up shares the cyan family (mockup: one "up" color, no green).
|
|
emerald: {
|
|
50: '#ecfbfe',
|
|
100: '#d4f4fa',
|
|
200: '#ade8f2',
|
|
300: '#6ec9db',
|
|
400: '#4ab3c8',
|
|
500: '#2f9db2',
|
|
600: '#23808f',
|
|
700: '#1d6675',
|
|
800: '#1a525e',
|
|
900: '#17434e',
|
|
950: '#0a2b33',
|
|
},
|
|
// Negative/down: muted rose (Mars ember stays reserved for atmosphere).
|
|
red: {
|
|
50: '#fdf1ef',
|
|
100: '#fbe0dc',
|
|
200: '#f6c2ba',
|
|
300: '#f0a094',
|
|
400: '#ea8271',
|
|
500: '#e36a58',
|
|
600: '#c95441',
|
|
700: '#a84334',
|
|
800: '#86382c',
|
|
900: '#6e3128',
|
|
950: '#3b1712',
|
|
},
|
|
surface: {
|
|
DEFAULT: 'rgba(255, 255, 255, 0.04)',
|
|
hover: 'rgba(255, 255, 255, 0.07)',
|
|
active: 'rgba(255, 255, 255, 0.1)',
|
|
border: 'rgba(226, 231, 245, 0.09)',
|
|
},
|
|
},
|
|
backdropBlur: {
|
|
glass: '16px',
|
|
},
|
|
animation: {
|
|
'glow-pulse': 'glow-pulse 3s ease-in-out infinite',
|
|
'fade-in': 'fade-in 0.3s ease-out',
|
|
'slide-up': 'slide-up 0.4s ease-out',
|
|
'signal-pulse': 'signal-pulse 2.4s ease-in-out infinite',
|
|
},
|
|
keyframes: {
|
|
'glow-pulse': {
|
|
'0%, 100%': { opacity: '0.4' },
|
|
'50%': { opacity: '0.8' },
|
|
},
|
|
'fade-in': {
|
|
from: { opacity: '0' },
|
|
to: { opacity: '1' },
|
|
},
|
|
'slide-up': {
|
|
from: { opacity: '0', transform: 'translateY(12px)' },
|
|
to: { opacity: '1', transform: 'translateY(0)' },
|
|
},
|
|
'signal-pulse': {
|
|
'0%, 100%': { opacity: '1', transform: 'scale(1)' },
|
|
'50%': { opacity: '0.35', transform: 'scale(0.8)' },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
} satisfies Config;
|