@363045841yyt/klinechart-core 0.7.6 → 0.7.7

package/dist/tokens/theme-light.js

@@ -0,0 +1,234 @@
+/**
+ * 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).
+ */
+export const lightTheme = {
+    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)',
+    },
+};
+//# sourceMappingURL=theme-light.js.map

package/dist/tokens/theme-light.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-light.js","sourceRoot":"","sources":["../../src/tokens/theme-light.ts"],"names":[],"mappings":"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"}

package/dist/tokens/themeToCssVars.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Theme → CSS custom-property emitter.
+ *
+ * Bridges the typed tokens in `theme-light.ts` / `theme-dark.ts` to the
+ * actual stylesheet, so any framework can apply a theme by inserting a
+ * `:root { ... }` block or attaching a `style="..."` attribute.
+ *
+ * Naming convention (kebab-case, dot-paths flattened with `-`):
+ *
+ *   Theme key                                CSS variable
+ *   ───────────────────────────────────────  ────────────────────────────
+ *   colors.background                        `--klc-color-background`
+ *   colors.candleUpBody                      `--klc-color-candle-up-body`
+ *   colors.palette.i1                        `--klc-color-palette-i1`
+ *   spacing.md                               `--klc-spacing-md`
+ *   typography.fontFamily                    `--klc-typography-font-family`
+ *   typography.fontWeightRegular             `--klc-typography-font-weight-regular`
+ *   motion.durationFast                      `--klc-motion-duration-fast`
+ *
+ * Numeric tokens (font weights, line heights) emit as strings — CSS doesn't
+ * care, and consumers consume them through `var(...)` so the type tag is
+ * lost in the round-trip anyway.
+ *
+ * Prefix is configurable. Default `--klc-` (KLineChart Quant) is short
+ * enough to type and unique enough to coexist with other token systems
+ * (Tailwind, MUI, Radix) on the same page.
+ */
+import type { Theme } from './types';
+export interface ThemeToCssVarsOptions {
+    /**
+     * CSS custom-property prefix. Default `'--klc-'`. Must start with `--`.
+     * Including the trailing dash is recommended (kebab-case continues
+     * cleanly from there).
+     */
+    readonly prefix?: string;
+}
+/**
+ * camelCase → kebab-case.
+ *
+ *   'candleUpBody'        → 'candle-up-body'
+ *   'fontWeightRegular'   → 'font-weight-regular'
+ *   'i1'                  → 'i1'   (already kebab-safe)
+ */
+export declare function camelToKebab(s: string): string;
+/**
+ * Emit a `{ [cssVarName]: value }` map for the given theme.
+ *
+ * Hand the result to:
+ *
+ *   - React: `<div style={vars as React.CSSProperties}>...`
+ *   - Vue:   `:style="vars"`
+ *   - Angular: `[ngStyle]="vars"`
+ *   - Vanilla: `Object.assign(el.style, vars)` or emit
+ *              `':root { ... }'` directly via {@link toCssDeclarationBlock}.
+ *
+ * The shape is stable: the same theme produces the same map across calls,
+ * and `mergeTheme(base, override)` produces a superset emit (keys are the
+ * same; values may differ).
+ */
+export declare function themeToCssVars(theme: Theme, opts?: ThemeToCssVarsOptions): Record<string, string>;
+/**
+ * Render the emitted map as a `:root { ... }` CSS declaration block.
+ * Useful for SSR scenarios where you want to inject a `<style>` element
+ * server-side so the first paint already carries the theme.
+ *
+ *   const css = toCssDeclarationBlock(themeToCssVars(darkTheme))
+ *   // → ":root {\n  --klc-color-background: #0E1116;\n  ...\n}"
+ *
+ * The selector defaults to `:root` but can be overridden — common
+ * alternatives are `[data-theme="dark"]` for runtime theme switching
+ * or `.klc-theme-dark` for scoped overrides.
+ */
+export declare function toCssDeclarationBlock(vars: Record<string, string>, selector?: string): string;
+//# sourceMappingURL=themeToCssVars.d.ts.map

package/dist/tokens/themeToCssVars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeToCssVars.d.ts","sourceRoot":"","sources":["../../src/tokens/themeToCssVars.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,MAAM,WAAW,qBAAqB;IAClC;;;;OAIG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAC3B;AAID;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAE9C;AAgCD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAC1B,KAAK,EAAE,KAAK,EACZ,IAAI,CAAC,EAAE,qBAAqB,GAC7B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAexB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CACjC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAC5B,QAAQ,GAAE,MAAgB,GAC3B,MAAM,CAKR"}

package/dist/tokens/themeToCssVars.js

@@ -0,0 +1,108 @@
+/**
+ * Theme → CSS custom-property emitter.
+ *
+ * Bridges the typed tokens in `theme-light.ts` / `theme-dark.ts` to the
+ * actual stylesheet, so any framework can apply a theme by inserting a
+ * `:root { ... }` block or attaching a `style="..."` attribute.
+ *
+ * Naming convention (kebab-case, dot-paths flattened with `-`):
+ *
+ *   Theme key                                CSS variable
+ *   ───────────────────────────────────────  ────────────────────────────
+ *   colors.background                        `--klc-color-background`
+ *   colors.candleUpBody                      `--klc-color-candle-up-body`
+ *   colors.palette.i1                        `--klc-color-palette-i1`
+ *   spacing.md                               `--klc-spacing-md`
+ *   typography.fontFamily                    `--klc-typography-font-family`
+ *   typography.fontWeightRegular             `--klc-typography-font-weight-regular`
+ *   motion.durationFast                      `--klc-motion-duration-fast`
+ *
+ * Numeric tokens (font weights, line heights) emit as strings — CSS doesn't
+ * care, and consumers consume them through `var(...)` so the type tag is
+ * lost in the round-trip anyway.
+ *
+ * Prefix is configurable. Default `--klc-` (KLineChart Quant) is short
+ * enough to type and unique enough to coexist with other token systems
+ * (Tailwind, MUI, Radix) on the same page.
+ */
+const DEFAULT_PREFIX = '--klc-';
+/**
+ * camelCase → kebab-case.
+ *
+ *   'candleUpBody'        → 'candle-up-body'
+ *   'fontWeightRegular'   → 'font-weight-regular'
+ *   'i1'                  → 'i1'   (already kebab-safe)
+ */
+export function camelToKebab(s) {
+    return s.replace(/[A-Z]/g, (m, i) => (i === 0 ? m.toLowerCase() : '-' + m.toLowerCase()));
+}
+function flattenColors(colors, prefix) {
+    const out = {};
+    for (const [k, v] of Object.entries(colors)) {
+        if (typeof v === 'object' && v !== null) {
+            const ns = camelToKebab(k);
+            for (const [nk, nv] of Object.entries(v)) {
+                out[`${prefix}color-${ns}-${camelToKebab(nk)}`] = nv;
+            }
+        }
+        else {
+            out[`${prefix}color-${camelToKebab(k)}`] = v;
+        }
+    }
+    return out;
+}
+function flattenFamily(family, prefix, namespace) {
+    const out = {};
+    for (const [k, v] of Object.entries(family)) {
+        out[`${prefix}${namespace}-${camelToKebab(k)}`] = String(v);
+    }
+    return out;
+}
+/**
+ * Emit a `{ [cssVarName]: value }` map for the given theme.
+ *
+ * Hand the result to:
+ *
+ *   - React: `<div style={vars as React.CSSProperties}>...`
+ *   - Vue:   `:style="vars"`
+ *   - Angular: `[ngStyle]="vars"`
+ *   - Vanilla: `Object.assign(el.style, vars)` or emit
+ *              `':root { ... }'` directly via {@link toCssDeclarationBlock}.
+ *
+ * The shape is stable: the same theme produces the same map across calls,
+ * and `mergeTheme(base, override)` produces a superset emit (keys are the
+ * same; values may differ).
+ */
+export function themeToCssVars(theme, opts) {
+    const prefix = opts?.prefix ?? DEFAULT_PREFIX;
+    if (!prefix.startsWith('--')) {
+        // Misuse caught here is much friendlier than the silent no-op CSS
+        // would give downstream.
+        throw new Error(`themeToCssVars: prefix must start with '--', got ${JSON.stringify(prefix)}`);
+    }
+    return {
+        ...flattenColors(theme.colors, prefix),
+        ...flattenFamily(theme.spacing, prefix, 'spacing'),
+        ...flattenFamily(theme.typography, prefix, 'typography'),
+        ...flattenFamily(theme.motion, prefix, 'motion'),
+    };
+}
+/**
+ * Render the emitted map as a `:root { ... }` CSS declaration block.
+ * Useful for SSR scenarios where you want to inject a `<style>` element
+ * server-side so the first paint already carries the theme.
+ *
+ *   const css = toCssDeclarationBlock(themeToCssVars(darkTheme))
+ *   // → ":root {\n  --klc-color-background: #0E1116;\n  ...\n}"
+ *
+ * The selector defaults to `:root` but can be overridden — common
+ * alternatives are `[data-theme="dark"]` for runtime theme switching
+ * or `.klc-theme-dark` for scoped overrides.
+ */
+export function toCssDeclarationBlock(vars, selector = ':root') {
+    const decls = Object.entries(vars)
+        .map(([k, v]) => `  ${k}: ${v};`)
+        .join('\n');
+    return `${selector} {\n${decls}\n}`;
+}
+//# sourceMappingURL=themeToCssVars.js.map

package/dist/tokens/themeToCssVars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeToCssVars.js","sourceRoot":"","sources":["../../src/tokens/themeToCssVars.ts"],"names":[],"mappings":"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"}