@363045841yyt/klinechart-core 0.7.5 → 0.7.7

package/src/tokens/theme-china.ts

@@ -0,0 +1,132 @@
+/**
+ * Asia-market (Chinese) colour convention helper.
+ *
+ * Asian markets traditionally use **red for "up"** (bull) and **green
+ * for "down"** (bear) — the reverse of the Western convention.
+ *
+ * {@link withAsiaMarketColors} takes any {@link Theme} and returns a new
+ * Theme with all bull/bear colour pairs swapped, so the caller only needs
+ * a single boolean (`isAsiaMarket`) to switch conventions at runtime.
+ *
+ * {@link resolveThemeColors} is a convenience for renderers that currently
+ * hard-code `theme === 'dark' ? darkTheme.colors : lightTheme.colors`.
+ *
+ * Usage:
+ * ```ts
+ * import { resolveThemeColors } from '../../tokens'
+ *
+ * const colors = resolveThemeColors(context.theme, context.isAsiaMarket)
+ * ```
+ */
+
+import type { ColorTokens, Theme } from './types'
+import { lightTheme } from './theme-light'
+import { darkTheme } from './theme-dark'
+import { applyColorPresetOverrides, type ColorPresetSettings } from './colorPresetSettings'
+
+/**
+ * Swap all bull/bear colour pairs in a Theme so that "up" (bull) uses
+ * the formerly "down" (bear) colour and vice versa.
+ *
+ * @param theme — the base Theme (Western convention)
+ * @returns a **new** Theme object; the original is not mutated.
+ */
+export function withAsiaMarketColors(theme: Theme): Theme {
+    return {
+        ...theme,
+        colors: {
+            ...theme.colors,
+
+            // ── Candle / OHLC ──
+            candleUpBody: theme.colors.candleDownBody,
+            candleDownBody: theme.colors.candleUpBody,
+            candleUpBorder: theme.colors.candleDownBorder,
+            candleDownBorder: theme.colors.candleUpBorder,
+            candleUpWick: theme.colors.candleDownWick,
+            candleDownWick: theme.colors.candleUpWick,
+
+            // ── Volume bars ──
+            volumeUp: theme.colors.volumeDown,
+            volumeDown: theme.colors.volumeUp,
+
+            // ── Footprint (ask = buy = bull, bid = sell = bear) ──
+            footprintAsk: theme.colors.footprintBid,
+            footprintBid: theme.colors.footprintAsk,
+
+            // ── Nested: price accents ──
+            price: {
+                ...theme.colors.price,
+                upLight: theme.colors.price.downLight,
+                downLight: theme.colors.price.upLight,
+                upTick: theme.colors.price.downTick,
+                downTick: theme.colors.price.upTick,
+            },
+
+            // ── Nested: MACD histogram bars ──
+            macd: {
+                ...theme.colors.macd,
+                barUp: theme.colors.macd.barDown,
+                barDown: theme.colors.macd.barUp,
+                barUpLight: theme.colors.macd.barDownLight,
+                barDownLight: theme.colors.macd.barUpLight,
+            },
+
+            // ── Nested: SMC structure (HH/HL = bull, LH/LL = bear) ──
+            structure: {
+                ...theme.colors.structure,
+                hh: theme.colors.structure.ll,
+                ll: theme.colors.structure.hh,
+                hl: theme.colors.structure.lh,
+                lh: theme.colors.structure.hl,
+            },
+
+            // ── Nested: Zones / FVG / Order Block ──
+            zones: {
+                ...theme.colors.zones,
+                fvgBullFill: theme.colors.zones.fvgBearFill,
+                fvgBearFill: theme.colors.zones.fvgBullFill,
+                fvgBullBorder: theme.colors.zones.fvgBearBorder,
+                fvgBearBorder: theme.colors.zones.fvgBullBorder,
+                obBullFill: theme.colors.zones.obBearFill,
+                obBearFill: theme.colors.zones.obBullFill,
+            },
+
+            // ── Nested: CCI overbought (bull) / oversold (bear) ──
+            cci: {
+                ...theme.colors.cci,
+                overbought: theme.colors.cci.oversold,
+                oversold: theme.colors.cci.overbought,
+            },
+
+            // ── Nested: WMSR overbought / oversold ──
+            wmsr: {
+                ...theme.colors.wmsr,
+                overbought: theme.colors.wmsr.oversold,
+                oversold: theme.colors.wmsr.overbought,
+            },
+        },
+    }
+}
+
+/**
+ * Resolve a theme name + optional Asia-market flag into concrete
+ * {@link ColorTokens}.
+ *
+ * Renderers replace this pattern:
+ * ```ts
+ * const colors = theme === 'dark' ? darkTheme.colors : lightTheme.colors
+ * ```
+ * with:
+ * ```ts
+ * const colors = resolveThemeColors(theme, isAsiaMarket)
+ * ```
+ */
+export function resolveThemeColors(
+    themeName: 'light' | 'dark',
+    isAsiaMarket?: boolean,
+    colorPresetSettings?: ColorPresetSettings,
+): ColorTokens {
+    const base = themeName === 'dark' ? darkTheme : lightTheme
+    const active = isAsiaMarket ? withAsiaMarketColors(base) : base
+    return applyColorPresetOverrides(active.colors, themeName, colorPresetSettings)
+}

package/src/tokens/theme-dark.ts

@@ -0,0 +1,244 @@
+/**
+ * Dark theme — paired with {@link lightTheme}.
+ *
+ * Color choices:
+ *
+ *   - Background = #0E1116 (deep but not pure black — pure black creates
+ *     halation around bright lines on OLED).
+ *   - Bull = brighter green (#22D69B) — needed on dark background for
+ *     7.5:1 contrast (passes WCAG AAA for non-text).
+ *   - Bear = brighter red (#FF6464) — 6.2:1 contrast.
+ *   - Grid is barely visible (1.2:1 over background) so it never competes
+ *     with the data.
+ *   - Indicator palette is the same Okabe-Ito set but with the few hues
+ *     that need a brightness bump on dark background pre-tuned.
+ *
+ * Same shape as light — only values change. The parity test in
+ * `__tests__/themes.test.ts` enforces this.
+ */
+
+import type { Theme } from './types'
+
+export const darkTheme: Theme = {
+    name: 'dark',
+    colors: {
+        background: '#111827',
+        foreground: '#E8EAED',
+        chartBackground: '#111827',
+
+        candleUpBody: '#22D69B',
+        candleUpBorder: '#22D69B',
+        candleUpWick: '#22D69B',
+        candleDownBody: '#FF6464',
+        candleDownBorder: '#FF6464',
+        candleDownWick: '#FF6464',
+        candleDojiBorder: '#8A8F98',
+
+        volumeUp: '#22D69B66',
+        volumeDown: '#FF646466',
+
+        axisText: '#9AA0A6',
+        axisLine: '#2A2F36',
+        axisTick: '#2A2F36',
+
+        gridMajor: '#1B1F26',
+        gridMinor: '#161A20',
+
+        crosshairLine: '#5F6368',
+        crosshairLabelBg: '#E8EAED',
+        crosshairLabelText: '#0E1116',
+
+        selectionFill: '#4A9EFF33',
+        selectionStroke: '#4A9EFF',
+
+        tooltipBg: '#1B1F26EE',
+        tooltipText: '#E8EAED',
+        tooltipBorder: '#2A2F36',
+
+        heatmapColdest: '#0E1116',
+        heatmapHottest: '#80B7FF',
+        volumeProfileFill: '#6B727A66',
+        volumeProfilePoc: '#FFA94D',
+        volumeProfileValueArea: '#4A9EFF33',
+        footprintAsk: '#22D69B80',
+        footprintBid: '#FF646480',
+        footprintImbalance: '#FFA94D',
+
+        alertActive: '#4A9EFF',
+        alertTriggered: '#FFA94D',
+        alertMuted: '#6B727A',
+
+        avwapLine: '#A78BFA',
+        avwapBand: '#A78BFA33',
+        mtfOverlay: '#38BDF8',
+
+        palette: {
+            // Same hue ordering as light theme; values tuned for dark BG.
+            i1: '#4A9EFF', // blue (brightened)
+            i2: '#FFB95A', // amber
+            i3: '#22D69B', // teal-green
+            i4: '#E879BA', // pink
+            i5: '#FF8848', // burnt orange
+            i6: '#7DD3FC', // sky
+            i7: '#FCE96A', // yellow
+            i8: '#A78BFA', // purple
+            i9: '#60A5FA', // blue
+            i10: '#9AA0A6', // neutral gray
+            indicatorAtr: '#F59E0B',
+        },
+
+        // ── Legacy indicator colours (from engine/theme/colors) ──
+        text: {
+            primary: 'hsl(210, 10%, 85%)',
+            secondary: 'hsl(210, 8%, 75%)',
+            tertiary: 'hsl(210, 6%, 60%)',
+            weak: 'hsl(210, 5%, 45%)',
+            white: 'rgba(255, 255, 255, 0.95)',
+        },
+        price: {
+            upLight: 'rgba(255, 80, 100, 0.85)',
+            upTick: 'hsl(0, 70%, 60%)',
+            downLight: 'rgba(60, 200, 160, 0.85)',
+            downTick: 'hsl(150, 50%, 65%)',
+            lastPrice: 'rgba(230, 100, 115, 0.95)',
+        },
+        tagBg: {
+            white: 'rgb(40, 40, 55)',
+            lightGray: 'rgba(50, 50, 65, 0.92)',
+            pureWhite: '#282837',
+            transparent: 'transparent',
+            active: '#1890ff',
+            activeHover: '#40a9ff',
+            hover: '#3a3a4a',
+        },
+        border: {
+            dark: 'rgba(255, 255, 255, 0.15)',
+            medium: 'rgba(255, 255, 255, 0.12)',
+            light: 'rgba(255, 255, 255, 0.08)',
+            separator: 'rgba(255, 255, 255, 0.10)',
+            button: '#505060',
+            chart: '#3A4048',
+        },
+        ma: {
+            ma5: 'rgba(255, 200, 50, 1)',
+            ma10: 'rgba(200, 150, 30, 1)',
+            ma20: 'rgba(90, 140, 255, 1)',
+            ma30: 'rgba(90, 190, 95, 1)',
+            ma60: 'rgba(170, 60, 195, 1)',
+        },
+        boll: {
+            upper: 'rgba(200, 60, 60, 1)',
+            middle: 'rgba(90, 140, 255, 1)',
+            lower: 'rgba(50, 170, 60, 1)',
+            bandFill: 'rgba(120, 170, 255, 0.15)',
+        },
+        macd: {
+            dif: 'rgba(90, 140, 255, 1)',
+            dea: 'rgba(255, 170, 50, 1)',
+            barUp: '#ff6b6b',
+            barUpLight: '#ffb3b3',
+            barDown: '#4ecdc4',
+            barDownLight: '#a8e6e1',
+        },
+        rsi: {
+            rsi1: 'rgba(90, 140, 255, 1)',
+            rsi2: 'rgba(255, 170, 50, 1)',
+            rsi3: 'rgba(180, 70, 205, 1)',
+        },
+        cci: {
+            cci: 'rgba(90, 140, 255, 1)',
+            overbought: 'rgba(255, 80, 100, 0.6)',
+            oversold: 'rgba(60, 200, 160, 0.6)',
+        },
+        kdj: {
+            k: 'rgba(90, 140, 255, 1)',
+            d: 'rgba(255, 170, 50, 1)',
+            j: 'rgba(180, 70, 205, 1)',
+        },
+        mom: {
+            mom: 'rgba(90, 140, 255, 1)',
+            zero: 'rgba(255, 255, 255, 0.2)',
+        },
+        wmsr: {
+            wmsr: 'rgba(90, 140, 255, 1)',
+            overbought: 'rgba(255, 80, 100, 0.6)',
+            oversold: 'rgba(60, 200, 160, 0.6)',
+        },
+        kst: {
+            kst: 'rgba(90, 140, 255, 1)',
+            signal: 'rgba(255, 170, 50, 1)',
+        },
+        expma: {
+            fast: 'rgba(255, 170, 50, 1)',
+            slow: 'rgba(90, 140, 255, 1)',
+        },
+        ene: {
+            upper: 'rgba(255, 80, 100, 1)',
+            middle: 'rgba(90, 140, 255, 1)',
+            lower: 'rgba(60, 200, 160, 1)',
+            bandFill: 'rgba(90, 140, 255, 0.12)',
+        },
+        label: {
+            bg: 'rgba(30, 30, 40, 0.9)',
+            text: '#ffffff',
+        },
+        lastPriceLabel: {
+            bg: 'rgba(60, 50, 55, 0.98)',
+        },
+        volumePrice: {
+            riseWith: '#FF6666',
+            riseWithout: '#66FF99',
+            fallWith: '#FF6666',
+            fallWithout: '#66FF99',
+        },
+        structure: {
+            hh: '#4ade80',
+            hl: '#22c55e',
+            lh: '#f87171',
+            ll: '#ef4444',
+            choch: '#a78bfa',
+            bos: '#fbbf24',
+        },
+        zones: {
+            fvgBullFill: 'rgba(74, 222, 128, 0.20)',
+            fvgBearFill: 'rgba(248, 113, 113, 0.20)',
+            fvgBullBorder: 'rgba(74, 222, 128, 0.8)',
+            fvgBearBorder: 'rgba(248, 113, 113, 0.8)',
+            obBullFill: 'rgba(74, 222, 128, 0.35)',
+            obBearFill: 'rgba(248, 113, 113, 0.35)',
+        },
+        wmsrGrid: 'rgba(255, 255, 255, 0.1)',
+    },
+    spacing: {
+        none: '0',
+        xxs: '2px',
+        xs: '4px',
+        sm: '8px',
+        md: '12px',
+        lg: '16px',
+        xl: '24px',
+        xxl: '32px',
+        xxxl: '64px',
+    },
+    typography: {
+        fontFamily:
+            "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+        fontFamilyMono:
+            "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
+        fontSizeSm: '10px',
+        fontSizeMd: '12px',
+        fontSizeLg: '14px',
+        fontWeightRegular: 400,
+        fontWeightMedium: 500,
+        fontWeightBold: 700,
+        lineHeightTight: 1.2,
+        lineHeightStandard: 1.4,
+    },
+    motion: {
+        durationInstant: '0ms',
+        durationFast: '120ms',
+        durationModerate: '200ms',
+        easingStandard: 'cubic-bezier(0.4, 0, 0.2, 1)',
+        easingDecelerate: 'cubic-bezier(0, 0, 0.2, 1)',
+    },
+}

package/src/tokens/theme-light.ts

@@ -0,0 +1,250 @@
+/**
+ * Light theme — concrete token values.
+ *
+ * Color choices:
+ *
+ *   - Bull (up) = a dark saturated green (#0F8B5C). Picked to clear the
+ *     WCAG AA non-text threshold (≥ 3:1) against #FAFAFA. The lighter
+ *     industry-standard greens like #26A69A fail that bar by ~25 %.
+ *   - Bear (down) = a dark saturated red (#C2363B). Same rationale —
+ *     the common #EE4D4D fails AA at ~2.6:1.
+ *   - Background = #FAFAFA (slightly off-white, kinder to eyes than pure
+ *     #FFFFFF for long sessions).
+ *   - Grid major / minor split: major lines for round-number price tiers,
+ *     minor for between-tier rhythm. Both very low contrast (1.3:1, 1.1:1)
+ *     so they don't dominate.
+ *
+ * Indicator palette: ten qualitatively distinct hues using the Okabe-Ito
+ * colorblind-safe set (extended to ten by adding three desaturated mids).
+ * Each WCAG AA against the background (>= 3:1 for non-text).
+ */
+
+import type { Theme } from './types'
+
+export const lightTheme: Theme = {
+    name: 'light',
+    colors: {
+        background: '#FAFAFA',
+        foreground: '#1F1F1F',
+        chartBackground: '#FFFFFF',
+
+        candleUpBody: '#0F8B5C',
+        candleUpBorder: '#0F8B5C',
+        candleUpWick: '#0F8B5C',
+        candleDownBody: '#C2363B',
+        candleDownBorder: '#C2363B',
+        candleDownWick: '#C2363B',
+        candleDojiBorder: '#6E6E6E',
+
+        volumeUp: '#0F8B5C66', // 40% alpha — paired with candleUp
+        volumeDown: '#C2363B66',
+
+        axisText: '#5A5A5A',
+        axisLine: '#D0D0D0',
+        axisTick: '#D0D0D0',
+
+        gridMajor: '#E5E5E5',
+        gridMinor: '#F0F0F0',
+
+        crosshairLine: '#8C8C8C',
+        crosshairLabelBg: '#1F1F1F',
+        crosshairLabelText: '#FAFAFA',
+
+        selectionFill: '#2D7FF933',
+        selectionStroke: '#2D7FF9',
+
+        tooltipBg: '#FFFFFFEE',
+        tooltipText: '#1F1F1F',
+        tooltipBorder: '#D0D0D0',
+
+        heatmapColdest: '#F0F4F8',
+        heatmapHottest: '#1F3A5F',
+        volumeProfileFill: '#9CA3AF66',
+        volumeProfilePoc: '#F97316',
+        volumeProfileValueArea: '#2D7FF933',
+        footprintAsk: '#0F8B5C80',
+        footprintBid: '#C2363B80',
+        footprintImbalance: '#F97316',
+
+        alertActive: '#2D7FF9',
+        // alertTriggered: orange #F97316 was 2.69:1 on white (fails AA
+        // non-text). Darkened to #C2410C → 4.13:1.
+        alertTriggered: '#C2410C',
+        alertMuted: '#9CA3AF',
+
+        avwapLine: '#7C3AED',
+        avwapBand: '#7C3AED33',
+        // mtfOverlay: sky #0EA5E9 was 2.66:1 on white. Darkened to
+        // #0369A1 → 4.59:1.
+        mtfOverlay: '#0369A1',
+
+        palette: {
+            // Okabe-Ito-derived qualitative scale, AA on #FAFAFA
+            i1: '#0072B2', // strong blue
+            i2: '#E69F00', // amber
+            i3: '#009E73', // teal-green
+            i4: '#CC79A7', // pink
+            i5: '#D55E00', // burnt orange
+            i6: '#56B4E9', // sky
+            i7: '#F0E442', // yellow (use sparingly — low contrast)
+            i8: '#7C3AED', // purple
+            i9: '#2D7FF9', // blue
+            i10: '#6E6E6E', // neutral gray
+            indicatorAtr: '#d97706',
+        },
+
+        // ── Legacy indicator colours (from engine/theme/colors) ──
+        text: {
+            primary: 'hsl(210, 9%, 31%)',
+            secondary: 'hsl(210, 9%, 35%)',
+            tertiary: 'hsl(210, 8%, 50%)',
+            weak: 'hsl(210, 7%, 65%)',
+            white: 'rgba(255, 255, 255, 0.92)',
+        },
+        price: {
+            upLight: 'rgba(214, 10, 34, 0.92)',
+            upTick: 'hsl(0, 60%, 50%)',
+            downLight: 'rgba(3, 123, 102, 0.92)',
+            downTick: 'hsl(150, 30%, 60%)',
+            lastPrice: 'rgba(196, 74, 86, 0.95)',
+        },
+        tagBg: {
+            white: 'rgb(255, 255, 255)',
+            lightGray: 'rgba(255, 255, 255, 0.92)',
+            pureWhite: '#ffffff',
+            transparent: 'transparent',
+            active: '#1890ff',
+            activeHover: '#40a9ff',
+            hover: '#f0f0f0',
+        },
+        border: {
+            dark: 'rgba(0, 0, 0, 0.12)',
+            medium: 'rgba(0, 0, 0, 0.10)',
+            light: 'rgba(0, 0, 0, 0.08)',
+            separator: 'rgba(0, 0, 0, 0.10)',
+            button: '#d0d0d0',
+            chart: '#e5e5e5',
+        },
+        ma: {
+            ma5: 'rgba(255, 193, 37, 1)',
+            ma10: 'rgba(190, 131, 12, 1)',
+            ma20: 'rgba(69, 112, 249, 1)',
+            ma30: 'rgba(76, 175, 80, 1)',
+            ma60: 'rgba(156, 39, 176, 1)',
+        },
+        boll: {
+            upper: 'rgba(178, 34, 34, 1)',
+            middle: 'rgba(69, 112, 249, 1)',
+            lower: 'rgba(34, 139, 34, 1)',
+            bandFill: 'rgba(100, 149, 237, 0.1)',
+        },
+        macd: {
+            dif: 'rgba(69, 112, 249, 1)',
+            dea: 'rgba(255, 152, 0, 1)',
+            barUp: '#ff5252',
+            barUpLight: '#fccbcd',
+            barDown: '#22ab94',
+            barDownLight: '#ace5dc',
+        },
+        rsi: {
+            rsi1: 'rgba(69, 112, 249, 1)',
+            rsi2: 'rgba(255, 152, 0, 1)',
+            rsi3: 'rgba(156, 39, 176, 1)',
+        },
+        cci: {
+            cci: 'rgba(69, 112, 249, 1)',
+            overbought: 'rgba(214, 10, 34, 0.5)',
+            oversold: 'rgba(3, 123, 102, 0.5)',
+        },
+        kdj: {
+            k: 'rgba(69, 112, 249, 1)',
+            d: 'rgba(255, 152, 0, 1)',
+            j: 'rgba(156, 39, 176, 1)',
+        },
+        mom: {
+            mom: 'rgba(69, 112, 249, 1)',
+            zero: 'rgba(0, 0, 0, 0.2)',
+        },
+        wmsr: {
+            wmsr: 'rgba(69, 112, 249, 1)',
+            overbought: 'rgba(214, 10, 34, 0.5)',
+            oversold: 'rgba(3, 123, 102, 0.5)',
+        },
+        kst: {
+            kst: 'rgba(69, 112, 249, 1)',
+            signal: 'rgba(255, 152, 0, 1)',
+        },
+        expma: {
+            fast: 'rgba(255, 152, 0, 1)',
+            slow: 'rgba(69, 112, 249, 1)',
+        },
+        ene: {
+            upper: 'rgba(214, 10, 34, 1)',
+            middle: 'rgba(69, 112, 249, 1)',
+            lower: 'rgba(3, 123, 102, 1)',
+            bandFill: 'rgba(69, 112, 249, 0.08)',
+        },
+        label: {
+            bg: 'rgba(0, 0, 0, 0.8)',
+            text: '#ffffff',
+        },
+        lastPriceLabel: {
+            bg: 'rgba(255, 247, 248, 0.98)',
+        },
+        volumePrice: {
+            riseWith: '#FF4444',
+            riseWithout: '#00C853',
+            fallWith: '#FF4444',
+            fallWithout: '#00C853',
+        },
+        structure: {
+            hh: '#16a34a',
+            hl: '#22c55e',
+            lh: '#dc2626',
+            ll: '#ef4444',
+            choch: '#8b5cf6',
+            bos: '#f59e0b',
+        },
+        zones: {
+            fvgBullFill: 'rgba(34, 197, 94, 0.15)',
+            fvgBearFill: 'rgba(239, 68, 68, 0.15)',
+            fvgBullBorder: 'rgba(34, 197, 94, 0.6)',
+            fvgBearBorder: 'rgba(239, 68, 68, 0.6)',
+            obBullFill: 'rgba(34, 197, 94, 0.25)',
+            obBearFill: 'rgba(239, 68, 68, 0.25)',
+        },
+        wmsrGrid: 'rgba(0, 0, 0, 0.1)',
+    },
+    spacing: {
+        none: '0',
+        xxs: '2px',
+        xs: '4px',
+        sm: '8px',
+        md: '12px',
+        lg: '16px',
+        xl: '24px',
+        xxl: '32px',
+        xxxl: '64px',
+    },
+    typography: {
+        fontFamily:
+            "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+        fontFamilyMono:
+            "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
+        fontSizeSm: '10px',
+        fontSizeMd: '12px',
+        fontSizeLg: '14px',
+        fontWeightRegular: 400,
+        fontWeightMedium: 500,
+        fontWeightBold: 700,
+        lineHeightTight: 1.2,
+        lineHeightStandard: 1.4,
+    },
+    motion: {
+        durationInstant: '0ms',
+        durationFast: '120ms',
+        durationModerate: '200ms',
+        easingStandard: 'cubic-bezier(0.4, 0, 0.2, 1)',
+        easingDecelerate: 'cubic-bezier(0, 0, 0.2, 1)',
+    },
+}