@363045841yyt/klinechart-core 0.7.5 → 0.7.7

package/dist/tokens/theme-dark.js

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

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

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

package/dist/tokens/theme-light.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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 declare const lightTheme: Theme;
+//# sourceMappingURL=theme-light.d.ts.map

package/dist/tokens/theme-light.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-light.d.ts","sourceRoot":"","sources":["../../src/tokens/theme-light.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,eAAO,MAAM,UAAU,EAAE,KAkOxB,CAAA"}

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":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAIH,MAAM,CAAC,MAAM,UAAU,GAAU;IAC7B,IAAI,EAAE,OAAO;IACb,MAAM,EAAE;QACJ,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,SAAS;QACrB,eAAe,EAAE,SAAS;QAE1B,YAAY,EAAE,SAAS;QACvB,cAAc,EAAE,SAAS;QACzB,YAAY,EAAE,SAAS;QACvB,cAAc,EAAE,SAAS;QACzB,gBAAgB,EAAE,SAAS;QAC3B,cAAc,EAAE,SAAS;QACzB,gBAAgB,EAAE,SAAS;QAE3B,QAAQ,EAAE,WAAW,EAAE,mCAAmC;QAC1D,UAAU,EAAE,WAAW;QAEvB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,SAAS;QAEnB,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,SAAS;QAEpB,aAAa,EAAE,SAAS;QACxB,gBAAgB,EAAE,SAAS;QAC3B,kBAAkB,EAAE,SAAS;QAE7B,aAAa,EAAE,WAAW;QAC1B,eAAe,EAAE,SAAS;QAE1B,SAAS,EAAE,WAAW;QACtB,WAAW,EAAE,SAAS;QACtB,aAAa,EAAE,SAAS;QAExB,cAAc,EAAE,SAAS;QACzB,cAAc,EAAE,SAAS;QACzB,iBAAiB,EAAE,WAAW;QAC9B,gBAAgB,EAAE,SAAS;QAC3B,sBAAsB,EAAE,WAAW;QACnC,YAAY,EAAE,WAAW;QACzB,YAAY,EAAE,WAAW;QACzB,kBAAkB,EAAE,SAAS;QAE7B,WAAW,EAAE,SAAS;QACtB,+DAA+D;QAC/D,2CAA2C;QAC3C,cAAc,EAAE,SAAS;QACzB,UAAU,EAAE,SAAS;QAErB,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,WAAW;QACtB,2DAA2D;QAC3D,oBAAoB;QACpB,UAAU,EAAE,SAAS;QAErB,OAAO,EAAE;YACL,qDAAqD;YACrD,EAAE,EAAE,SAAS,EAAE,cAAc;YAC7B,EAAE,EAAE,SAAS,EAAE,QAAQ;YACvB,EAAE,EAAE,SAAS,EAAE,aAAa;YAC5B,EAAE,EAAE,SAAS,EAAE,OAAO;YACtB,EAAE,EAAE,SAAS,EAAE,eAAe;YAC9B,EAAE,EAAE,SAAS,EAAE,MAAM;YACrB,EAAE,EAAE,SAAS,EAAE,wCAAwC;YACvD,EAAE,EAAE,SAAS,EAAE,SAAS;YACxB,EAAE,EAAE,SAAS,EAAE,OAAO;YACtB,GAAG,EAAE,SAAS,EAAE,eAAe;YAC/B,YAAY,EAAE,SAAS;SAC1B;QAED,4DAA4D;QAC5D,IAAI,EAAE;YACF,OAAO,EAAE,mBAAmB;YAC5B,SAAS,EAAE,mBAAmB;YAC9B,QAAQ,EAAE,mBAAmB;YAC7B,IAAI,EAAE,mBAAmB;YACzB,KAAK,EAAE,2BAA2B;SACrC;QACD,KAAK,EAAE;YACH,OAAO,EAAE,yBAAyB;YAClC,MAAM,EAAE,kBAAkB;YAC1B,SAAS,EAAE,yBAAyB;YACpC,QAAQ,EAAE,oBAAoB;YAC9B,SAAS,EAAE,yBAAyB;SACvC;QACD,KAAK,EAAE;YACH,KAAK,EAAE,oBAAoB;YAC3B,SAAS,EAAE,2BAA2B;YACtC,SAAS,EAAE,SAAS;YACpB,WAAW,EAAE,aAAa;YAC1B,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,SAAS;YACtB,KAAK,EAAE,SAAS;SACnB;QACD,MAAM,EAAE;YACJ,IAAI,EAAE,qBAAqB;YAC3B,MAAM,EAAE,qBAAqB;YAC7B,KAAK,EAAE,qBAAqB;YAC5B,SAAS,EAAE,qBAAqB;YAChC,MAAM,EAAE,SAAS;YACjB,KAAK,EAAE,SAAS;SACnB;QACD,EAAE,EAAE;YACA,GAAG,EAAE,uBAAuB;YAC5B,IAAI,EAAE,uBAAuB;YAC7B,IAAI,EAAE,uBAAuB;YAC7B,IAAI,EAAE,sBAAsB;YAC5B,IAAI,EAAE,uBAAuB;SAChC;QACD,IAAI,EAAE;YACF,KAAK,EAAE,sBAAsB;YAC7B,MAAM,EAAE,uBAAuB;YAC/B,KAAK,EAAE,sBAAsB;YAC7B,QAAQ,EAAE,0BAA0B;SACvC;QACD,IAAI,EAAE;YACF,GAAG,EAAE,uBAAuB;YAC5B,GAAG,EAAE,sBAAsB;YAC3B,KAAK,EAAE,SAAS;YAChB,UAAU,EAAE,SAAS;YACrB,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,SAAS;SAC1B;QACD,GAAG,EAAE;YACD,IAAI,EAAE,uBAAuB;YAC7B,IAAI,EAAE,sBAAsB;YAC5B,IAAI,EAAE,uBAAuB;SAChC;QACD,GAAG,EAAE;YACD,GAAG,EAAE,uBAAuB;YAC5B,UAAU,EAAE,wBAAwB;YACpC,QAAQ,EAAE,wBAAwB;SACrC;QACD,GAAG,EAAE;YACD,CAAC,EAAE,uBAAuB;YAC1B,CAAC,EAAE,sBAAsB;YACzB,CAAC,EAAE,uBAAuB;SAC7B;QACD,GAAG,EAAE;YACD,GAAG,EAAE,uBAAuB;YAC5B,IAAI,EAAE,oBAAoB;SAC7B;QACD,IAAI,EAAE;YACF,IAAI,EAAE,uBAAuB;YAC7B,UAAU,EAAE,wBAAwB;YACpC,QAAQ,EAAE,wBAAwB;SACrC;QACD,GAAG,EAAE;YACD,GAAG,EAAE,uBAAuB;YAC5B,MAAM,EAAE,sBAAsB;SACjC;QACD,KAAK,EAAE;YACH,IAAI,EAAE,sBAAsB;YAC5B,IAAI,EAAE,uBAAuB;SAChC;QACD,GAAG,EAAE;YACD,KAAK,EAAE,sBAAsB;YAC7B,MAAM,EAAE,uBAAuB;YAC/B,KAAK,EAAE,sBAAsB;YAC7B,QAAQ,EAAE,0BAA0B;SACvC;QACD,KAAK,EAAE;YACH,EAAE,EAAE,oBAAoB;YACxB,IAAI,EAAE,SAAS;SAClB;QACD,cAAc,EAAE;YACZ,EAAE,EAAE,2BAA2B;SAClC;QACD,WAAW,EAAE;YACT,QAAQ,EAAE,SAAS;YACnB,WAAW,EAAE,SAAS;YACtB,QAAQ,EAAE,SAAS;YACnB,WAAW,EAAE,SAAS;SACzB;QACD,SAAS,EAAE;YACP,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,SAAS;YACb,KAAK,EAAE,SAAS;YAChB,GAAG,EAAE,SAAS;SACjB;QACD,KAAK,EAAE;YACH,WAAW,EAAE,yBAAyB;YACtC,WAAW,EAAE,yBAAyB;YACtC,aAAa,EAAE,wBAAwB;YACvC,aAAa,EAAE,wBAAwB;YACvC,UAAU,EAAE,yBAAyB;YACrC,UAAU,EAAE,yBAAyB;SACxC;QACD,QAAQ,EAAE,oBAAoB;KACjC;IACD,OAAO,EAAE;QACL,IAAI,EAAE,GAAG;QACT,GAAG,EAAE,KAAK;QACV,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,KAAK;QACT,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,EAAE,EAAE,MAAM;QACV,GAAG,EAAE,MAAM;QACX,IAAI,EAAE,MAAM;KACf;IACD,UAAU,EAAE;QACR,UAAU,EACN,4FAA4F;QAChG,cAAc,EACV,6EAA6E;QACjF,UAAU,EAAE,MAAM;QAClB,UAAU,EAAE,MAAM;QAClB,UAAU,EAAE,MAAM;QAClB,iBAAiB,EAAE,GAAG;QACtB,gBAAgB,EAAE,GAAG;QACrB,cAAc,EAAE,GAAG;QACnB,eAAe,EAAE,GAAG;QACpB,kBAAkB,EAAE,GAAG;KAC1B;IACD,MAAM,EAAE;QACJ,eAAe,EAAE,KAAK;QACtB,YAAY,EAAE,OAAO;QACrB,gBAAgB,EAAE,OAAO;QACzB,cAAc,EAAE,8BAA8B;QAC9C,gBAAgB,EAAE,4BAA4B;KACjD;CACJ,CAAA"}

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