@antv/gpt-vis 1.0.0 → 1.0.1

package/dist/esm/util/interaction.d.ts

@@ -0,0 +1,14 @@
+import type { VisualizationTheme } from '../types';
+export type SharedTooltipInteractionOptions = {
+    crosshairs?: boolean;
+};
+export type PointHighlightStateOptions = {
+    activeLineWidth?: number;
+    inactiveOpacity?: number;
+};
+export declare const getSharedTooltipInteraction: ({ crosshairs, }?: SharedTooltipInteractionOptions) => Record<string, boolean>;
+export declare const getCategoryBackgroundHighlightState: (theme: VisualizationTheme) => Record<string, any>;
+export declare const getCategoryHighlightInteraction: () => Record<string, any>;
+export declare const getPointHighlightState: ({ activeLineWidth, inactiveOpacity, }?: PointHighlightStateOptions) => Record<string, any>;
+export declare const getSeriesHighlightByColorInteraction: () => Record<string, boolean>;
+export declare const getLineHighlightState: (lineWidth: number) => Record<string, any>;

package/dist/esm/util/interaction.js

@@ -0,0 +1,73 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { CHART_STYLE_DEFAULTS, getChartVisualTokens } from "./tokens";
+export var getSharedTooltipInteraction = function getSharedTooltipInteraction() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$crosshairs = _ref.crosshairs,
+    crosshairs = _ref$crosshairs === void 0 ? false : _ref$crosshairs;
+  return {
+    shared: true,
+    series: true,
+    crosshairs: crosshairs
+  };
+};
+export var getCategoryBackgroundHighlightState = function getCategoryBackgroundHighlightState(theme) {
+  var tokens = getChartVisualTokens(theme);
+  return {
+    active: {
+      backgroundFill: tokens.grid,
+      backgroundFillOpacity: theme === 'dark' ? 0.56 : 0.58,
+      backgroundLineWidth: 0,
+      backgroundPadding: 0.08,
+      backgroundRadius: 4
+    }
+  };
+};
+export var getCategoryHighlightInteraction = function getCategoryHighlightInteraction() {
+  return {
+    background: true,
+    region: true
+  };
+};
+export var getPointHighlightState = function getPointHighlightState() {
+  var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref2$activeLineWidth = _ref2.activeLineWidth,
+    activeLineWidth = _ref2$activeLineWidth === void 0 ? CHART_STYLE_DEFAULTS.pointActiveLineWidth : _ref2$activeLineWidth,
+    inactiveOpacity = _ref2.inactiveOpacity;
+  return _objectSpread({
+    active: {
+      lineWidth: activeLineWidth,
+      stroke: function stroke(_datum, _index, _data, element) {
+        var _element$style, _element$style2;
+        return (element === null || element === void 0 || (_element$style = element.style) === null || _element$style === void 0 ? void 0 : _element$style.fill) || (element === null || element === void 0 || (_element$style2 = element.style) === null || _element$style2 === void 0 ? void 0 : _element$style2.stroke);
+      },
+      fillOpacity: 1,
+      zIndex: 10
+    }
+  }, inactiveOpacity === undefined ? {} : {
+    inactive: {
+      fillOpacity: inactiveOpacity,
+      strokeOpacity: inactiveOpacity
+    }
+  });
+};
+export var getSeriesHighlightByColorInteraction = function getSeriesHighlightByColorInteraction() {
+  return {
+    elementHighlightByColor: true
+  };
+};
+export var getLineHighlightState = function getLineHighlightState(lineWidth) {
+  return {
+    active: {
+      lineWidth: lineWidth + 1,
+      strokeOpacity: 1
+    },
+    inactive: {
+      strokeOpacity: CHART_STYLE_DEFAULTS.inactiveOpacity
+    }
+  };
+};

package/dist/esm/util/theme.d.ts

@@ -1,26 +1,20 @@
+import type { Theme } from '@antv/g2';
+import type { VisualizationTheme } from '../types';
 export declare const DEFAULT_COLOR_PALETTE: string[];
 export declare const ACADEMY_COLOR_PALETTE: string[];
-export declare const THEME_MAP: Record<string, any>;
-/**
- * Get normalized theme name for G2.
- * Converts 'default' to 'light' for G2 compatibility.
- */
-export declare const getTheme: (theme: string) => string;
-/**
- * Get theme object from THEME_MAP.
- * This should be used for visualization components to properly support dark theme with multiple marks.
- */
-export declare const getThemeObject: (theme: string) => any;
-/**
- * Get theme color palette based on theme name.
- */
-export declare const getThemeColors: (theme: string) => string[];
-/**
- * Get background color based on theme.
- */
-export declare const getBackgroundColor: (theme: string) => string;
-/**
- * Normalize palette to always return an array.
- * Handles the case where a single color is parsed as a string instead of an array.
- */
-export declare const normalizePalette: (palette: string | string[] | undefined, theme: string) => string[];
+type G2ThemeType = 'light' | 'dark' | 'academy';
+type ChartTheme = Theme & {
+    enter?: {
+        duration?: number;
+        easing?: string;
+    };
+    elementHighlightByColor?: Record<string, unknown>;
+    elementHoverScale?: Record<string, unknown>;
+};
+export declare const THEME_MAP: Record<VisualizationTheme, ChartTheme>;
+export declare const getTheme: (theme: VisualizationTheme) => G2ThemeType;
+export declare const getThemeObject: (theme: VisualizationTheme) => ChartTheme;
+export declare const getThemeColors: (theme: VisualizationTheme) => string[];
+export declare const getBackgroundColor: (theme: VisualizationTheme) => string;
+export declare const normalizePalette: (palette: string | string[] | undefined, theme: VisualizationTheme) => string[];
+export {};

package/dist/esm/util/theme.js

@@ -1,150 +1,326 @@
-// Color palettes
-export var DEFAULT_COLOR_PALETTE = ['#1783FF', '#F08F56', '#D580FF', '#00C9C9', '#7863FF', '#DB9D0D', '#60C42D', '#FF80CA', '#2491B3', '#17C76F'];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { CHART_FONT_FAMILY, CHART_STYLE_DEFAULTS, getChartVisualTokens } from "./tokens";
+export var DEFAULT_COLOR_PALETTE = ['#5B6CFF', '#2DAF9E', '#F2B84B', '#EF6A6A', '#55A6D9', '#3AA76D', '#F58A57', '#8B6FD6', '#D96C9B'];
 export var ACADEMY_COLOR_PALETTE = ['#4e79a7', '#f28e2c', '#e15759', '#76b7b2', '#59a14f', '#edc949', '#af7aa1', '#ff9da7', '#9c755f', '#bab0ab'];
-
-// Theme definitions
-var DEFAULT_THEME = {
-  type: 'light',
-  view: {
-    viewFill: '#FFF',
-    plotFill: 'transparent',
-    mainFill: 'transparent',
-    contentFill: 'transparent'
-  },
-  interval: {
-    rect: {
-      fillOpacity: 0.8
-    }
-  },
-  line: {
-    line: {
-      lineWidth: 2
-    }
-  },
-  area: {
-    area: {
-      fillOpacity: 0.6
-    }
-  },
-  point: {
-    point: {
-      lineWidth: 1
-    }
-  }
-};
-var DARK_THEME = {
-  type: 'dark',
-  view: {
-    viewFill: '#000',
-    plotFill: 'transparent',
-    mainFill: 'transparent',
-    contentFill: 'transparent'
-  },
-  interval: {
-    rect: {
-      fillOpacity: 0.8
-    }
-  },
-  line: {
-    line: {
-      lineWidth: 2
-    }
-  },
-  area: {
-    area: {
-      fillOpacity: 0.6
-    }
-  },
-  point: {
-    point: {
-      lineWidth: 1
-    }
-  }
+var filterBaselineGrid = function filterBaselineGrid(_, index) {
+  return index !== 0;
 };
-var ACADEMY_THEME = {
-  type: 'academy',
-  view: {
-    viewFill: '#FFF',
-    plotFill: 'transparent',
-    mainFill: 'transparent',
-    contentFill: 'transparent'
-  },
-  interval: {
-    rect: {
-      fillOpacity: 0.8
-    }
-  },
-  line: {
+var createTheme = function createTheme(type) {
+  var tokens = getChartVisualTokens(type);
+  var isDark = type === 'dark';
+  var isAcademy = type === 'academy';
+  var colors = isAcademy ? ACADEMY_COLOR_PALETTE : DEFAULT_COLOR_PALETTE;
+  return {
+    type: type,
+    color: colors[0],
+    category10: colors,
+    category20: colors,
+    view: {
+      viewFill: tokens.background,
+      plotFill: 'transparent',
+      mainFill: 'transparent',
+      contentFill: 'transparent'
+    },
+    interval: {
+      rect: {
+        fillOpacity: 0.96
+      }
+    },
     line: {
-      lineWidth: 2
-    }
-  },
-  area: {
+      line: {
+        lineWidth: CHART_STYLE_DEFAULTS.lineWidth
+      }
+    },
     area: {
-      fillOpacity: 0.6
-    }
-  },
-  point: {
+      area: {
+        fillOpacity: CHART_STYLE_DEFAULTS.areaOpacity
+      }
+    },
     point: {
-      lineWidth: 1
+      point: {
+        lineWidth: CHART_STYLE_DEFAULTS.pointLineWidth,
+        fillOpacity: 0.82
+      },
+      hollow: {
+        lineWidth: 2,
+        strokeOpacity: 1
+      }
+    },
+    enter: {
+      duration: CHART_STYLE_DEFAULTS.animationDuration,
+      easing: 'ease-out'
+    },
+    axis: _objectSpread({
+      labelAutoHide: {
+        keepHeader: true,
+        keepTail: true
+      },
+      titleOpacity: 1,
+      titleFillOpacity: 1,
+      labelOpacity: 1,
+      labelFillOpacity: 1,
+      line: true,
+      lineLineWidth: 1,
+      lineStroke: tokens.axisLine,
+      lineStrokeOpacity: 1,
+      tick: true,
+      tickLineWidth: 1,
+      tickStroke: tokens.axisTick,
+      tickStrokeOpacity: 1
+    }, isAcademy ? {
+      titleFill: '#000000',
+      titleStrokeOpacity: 1,
+      titleFontSize: 11,
+      titleFontWeight: 'bold',
+      titleSpacing: 12,
+      labelFill: '#000000',
+      labelStrokeOpacity: 1,
+      labelFontSize: 10,
+      labelFontWeight: 'normal',
+      labelSpacing: 4,
+      tickLength: 5
+    } : {
+      titleFill: tokens.textSecondary,
+      titleFontFamily: CHART_FONT_FAMILY,
+      titleFontSize: 12,
+      titleFontWeight: 500,
+      titleLineWidth: 0,
+      titleSpacing: 16,
+      labelFill: tokens.textSecondary,
+      labelFontFamily: CHART_FONT_FAMILY,
+      labelFontSize: 12,
+      labelFontWeight: 400,
+      labelLineWidth: 0,
+      labelSpacing: 6,
+      tickLength: 3,
+      tickOpacity: 1
+    }),
+    axisX: _objectSpread({
+      grid: isAcademy,
+      labelAutoRotate: {
+        optionalAngles: [0, 45, 90],
+        recoverWhenFailed: true
+      }
+    }, isAcademy ? {
+      gridStroke: tokens.axisGrid,
+      gridStrokeOpacity: 1,
+      gridLineWidth: 1,
+      gridLineDash: [0, 0]
+    } : {}),
+    axisY: {
+      lineLineWidth: isAcademy ? 1 : 0.75,
+      grid: true,
+      gridStroke: tokens.axisGrid,
+      gridStrokeOpacity: 1,
+      gridLineWidth: isAcademy ? 1 : 0.5,
+      gridLineDash: isAcademy ? [0, 0] : [2, 4],
+      gridFilter: filterBaselineGrid
+    },
+    axisRadar: {
+      zIndex: 1,
+      titleFill: isAcademy ? tokens.textPrimary : tokens.textSecondary,
+      titleFontFamily: CHART_FONT_FAMILY,
+      titleFontSize: isAcademy ? 10 : 12,
+      titleFontWeight: isAcademy ? 600 : 500,
+      titleSpacing: 10,
+      labelFill: tokens.textSecondary,
+      labelOpacity: 1,
+      labelFontFamily: CHART_FONT_FAMILY,
+      labelFontSize: isAcademy ? 10 : 11,
+      line: true,
+      lineStroke: tokens.axisLine,
+      lineStrokeOpacity: isAcademy ? 1 : 0.64,
+      lineLineWidth: isAcademy ? 1 : 0.75,
+      tick: true,
+      tickLength: isAcademy ? 4 : 2,
+      tickStroke: tokens.axisTick,
+      tickStrokeOpacity: isAcademy ? 1 : 0.68,
+      tickCount: 4,
+      gridStroke: tokens.axisGrid,
+      gridStrokeOpacity: isAcademy ? 1 : 0.9,
+      gridLineWidth: isAcademy ? 1 : 0.75,
+      gridLineDash: [0, 0]
+    },
+    title: {
+      spacing: 6,
+      titleFill: tokens.textPrimary,
+      titleFontSize: 16,
+      titleFontWeight: 600,
+      subtitleFill: tokens.textSecondary,
+      subtitleFontSize: 12,
+      subtitleFontWeight: 400
+    },
+    legendCategory: {
+      backgroundFill: 'transparent',
+      padding: [5, 0, 10, 0],
+      itemMarkerSize: 10,
+      itemMarkerFillOpacity: 0.92,
+      itemMarkerStrokeOpacity: 0.92,
+      itemLabelFill: tokens.textPrimary,
+      itemLabelFillOpacity: 0.78,
+      itemLabelFontFamily: CHART_FONT_FAMILY,
+      itemLabelFontSize: 12,
+      itemLabelFontWeight: 400,
+      itemLabelLineHeight: 16,
+      itemLabelLetterSpacing: 0.1,
+      itemLabelTextBaseline: 'middle',
+      itemSpacing: [8, 0, 0],
+      itemCursor: 'pointer',
+      rowPadding: 8,
+      colPadding: 22,
+      navButtonFill: tokens.textSecondary,
+      navButtonFillOpacity: 0.72,
+      navButtonSize: 9,
+      navPageNumFill: tokens.textSecondary,
+      navPageNumFillOpacity: 0.72,
+      navPageNumFontFamily: CHART_FONT_FAMILY,
+      navPageNumFontSize: 11,
+      navPageNumFontWeight: 400,
+      navControllerPadding: 4,
+      navControllerSpacing: 14
+    },
+    tooltip: {
+      shared: false,
+      series: false,
+      crosshairs: false,
+      marker: true,
+      markerR: 4,
+      markerLineWidth: 2,
+      markerStroke: tokens.background,
+      crosshairsStroke: tokens.textSecondary,
+      crosshairsStrokeOpacity: 0.18,
+      crosshairsLineWidth: 1,
+      crosshairsLineDash: [0, 0],
+      css: {
+        '.g2-tooltip': {
+          'background-color': tokens.tooltipBackground,
+          border: "1px solid ".concat(tokens.tooltipBorder),
+          'border-radius': '10px',
+          'box-shadow': tokens.tooltipShadow,
+          color: tokens.textSecondary,
+          padding: '10px 12px',
+          'min-width': '164px',
+          'max-width': '300px',
+          overflow: 'hidden',
+          'box-sizing': 'border-box',
+          'backdrop-filter': 'blur(10px) saturate(1.08)',
+          '-webkit-backdrop-filter': 'blur(10px) saturate(1.08)',
+          'font-family': CHART_FONT_FAMILY,
+          'font-size': '12px',
+          'line-height': '18px',
+          'font-variant-numeric': 'tabular-nums',
+          'font-feature-settings': '"tnum" 1, "zero" 1',
+          '-webkit-font-smoothing': 'antialiased',
+          contain: 'layout paint style'
+        },
+        '.g2-tooltip-title': {
+          color: tokens.textSecondary,
+          'font-size': '11px',
+          'font-weight': '500',
+          'line-height': '16px',
+          'letter-spacing': '0.01em',
+          'margin-bottom': '6px',
+          'padding-bottom': '7px',
+          'border-bottom': "1px solid ".concat(tokens.tooltipDivider),
+          'max-width': '276px'
+        },
+        '.g2-tooltip-list': {
+          display: 'grid',
+          gap: '4px'
+        },
+        '.g2-tooltip-list-item': {
+          display: 'grid',
+          'grid-template-columns': 'minmax(0, 1fr) auto',
+          'align-items': 'center',
+          'column-gap': '18px',
+          'min-height': '22px',
+          'line-height': '22px'
+        },
+        '.g2-tooltip-list-item-name': {
+          gap: '8px',
+          'min-width': '0',
+          'max-width': '208px',
+          overflow: 'hidden',
+          color: tokens.textSecondary
+        },
+        '.g2-tooltip-list-item-name-label': {
+          color: tokens.textSecondary,
+          'font-weight': '400'
+        },
+        '.g2-tooltip-list-item-value': {
+          color: tokens.textPrimary,
+          'font-weight': '600',
+          flex: '0 0 auto',
+          'min-width': '40px',
+          'margin-left': '0',
+          'text-align': 'right',
+          'letter-spacing': '-0.01em',
+          'font-variant-numeric': 'tabular-nums',
+          'font-feature-settings': '"tnum" 1, "zero" 1'
+        },
+        '.g2-tooltip-list-item-marker': {
+          width: '7px',
+          height: '7px',
+          flex: '0 0 auto',
+          'margin-right': '0',
+          'border-radius': '999px',
+          'box-shadow': tokens.tooltipMarkerShadow
+        },
+        '.g2-tooltip-crosshair-x': {
+          'background-color': isDark ? 'rgba(255, 255, 255, 0.16)' : 'rgba(71, 84, 103, 0.16)'
+        },
+        '.g2-tooltip-crosshair-y': {
+          'background-color': isDark ? 'rgba(255, 255, 255, 0.16)' : 'rgba(71, 84, 103, 0.16)'
+        }
+      }
+    },
+    elementHighlight: {
+      delay: CHART_STYLE_DEFAULTS.interactionDelay
+    },
+    elementHighlightByColor: {
+      delay: CHART_STYLE_DEFAULTS.interactionDelay
+    },
+    elementHoverScale: {
+      delay: CHART_STYLE_DEFAULTS.interactionDelay,
+      scale: 1.04,
+      shadow: true,
+      shadowBlur: isDark ? 7 : isAcademy ? 5 : 6,
+      shadowColor: isDark ? 'rgba(226, 232, 240, 0.38)' : isAcademy ? 'rgba(63, 49, 38, 0.44)' : 'rgba(15, 23, 42, 0.46)',
+      shadowOffsetX: 0,
+      shadowOffsetY: isDark ? 0 : 3,
+      zIndex: 10
     }
-  }
+  };
 };
+var LIGHT_THEME = createTheme('light');
+var ACADEMY_THEME = createTheme('academy');
+var DARK_THEME = createTheme('dark');
 export var THEME_MAP = {
-  default: DEFAULT_THEME,
+  default: LIGHT_THEME,
+  light: LIGHT_THEME,
   academy: ACADEMY_THEME,
   dark: DARK_THEME
 };
-
-/**
- * Get normalized theme name for G2.
- * Converts 'default' to 'light' for G2 compatibility.
- */
 export var getTheme = function getTheme(theme) {
   return theme === 'default' ? 'light' : theme;
 };
-
-/**
- * Get theme object from THEME_MAP.
- * This should be used for visualization components to properly support dark theme with multiple marks.
- */
 export var getThemeObject = function getThemeObject(theme) {
   return THEME_MAP[theme] || THEME_MAP.default;
 };
-
-/**
- * Get theme color palette based on theme name.
- */
 export var getThemeColors = function getThemeColors(theme) {
-  switch (theme) {
-    case 'academy':
-      return ACADEMY_COLOR_PALETTE;
-    case 'dark':
-    case 'default':
-    default:
-      return DEFAULT_COLOR_PALETTE;
-  }
+  return theme === 'academy' ? ACADEMY_COLOR_PALETTE : DEFAULT_COLOR_PALETTE;
 };
-
-/**
- * Get background color based on theme.
- */
 export var getBackgroundColor = function getBackgroundColor(theme) {
-  switch (theme) {
-    case 'dark':
-      return '#000';
-    case 'academy':
-    case 'default':
-    default:
-      return '#FFF';
-  }
+  return getChartVisualTokens(theme).background;
 };
-
-/**
- * Normalize palette to always return an array.
- * Handles the case where a single color is parsed as a string instead of an array.
- */
 export var normalizePalette = function normalizePalette(palette, theme) {
-  if (!palette || Array.isArray(palette) && palette.length === 0) return getThemeColors(theme);
+  if (!palette || Array.isArray(palette) && palette.length === 0) {
+    return getThemeColors(theme);
+  }
   return Array.isArray(palette) ? palette : [palette];
 };

package/dist/esm/util/tokens.d.ts

@@ -0,0 +1,31 @@
+import type { VisualizationTheme } from '../types';
+export declare const CHART_FONT_FAMILY = "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
+export declare const CHART_STYLE_DEFAULTS: {
+    readonly animationDuration: 260;
+    readonly interactionDelay: 40;
+    readonly lineWidth: 2.5;
+    readonly areaOpacity: 0.24;
+    readonly lineOpacity: 0.92;
+    readonly inactiveOpacity: 0.24;
+    readonly pointSize: 3.5;
+    readonly scatterPointSize: 5;
+    readonly pointLineWidth: 1.5;
+    readonly pointActiveLineWidth: 5;
+    readonly intervalWidthRatio: 0.64;
+};
+export type ChartVisualTokens = {
+    background: string;
+    textPrimary: string;
+    textSecondary: string;
+    grid: string;
+    axisGrid: string;
+    axisLine: string;
+    axisTick: string;
+    separator: string;
+    tooltipBackground: string;
+    tooltipBorder: string;
+    tooltipDivider: string;
+    tooltipMarkerShadow: string;
+    tooltipShadow: string;
+};
+export declare const getChartVisualTokens: (theme: VisualizationTheme) => ChartVisualTokens;

package/dist/esm/util/tokens.js

@@ -0,0 +1,64 @@
+export var CHART_FONT_FAMILY = 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+export var CHART_STYLE_DEFAULTS = {
+  animationDuration: 260,
+  interactionDelay: 40,
+  lineWidth: 2.5,
+  areaOpacity: 0.24,
+  lineOpacity: 0.92,
+  inactiveOpacity: 0.24,
+  pointSize: 3.5,
+  scatterPointSize: 5,
+  pointLineWidth: 1.5,
+  pointActiveLineWidth: 5,
+  intervalWidthRatio: 0.64
+};
+var LIGHT_TOKENS = {
+  background: '#FFFFFF',
+  textPrimary: '#1F2937',
+  textSecondary: '#667085',
+  grid: '#E7EAF0',
+  axisGrid: '#EAECF0',
+  axisLine: '#D0D5DD',
+  axisTick: '#98A2B3',
+  separator: '#FFFFFF',
+  tooltipBackground: 'rgba(255, 255, 255, 0.96)',
+  tooltipBorder: 'rgba(15, 23, 42, 0.09)',
+  tooltipDivider: 'rgba(15, 23, 42, 0.08)',
+  tooltipMarkerShadow: '0 0 0 2px #FFFFFF, 0 1px 3px rgba(15, 23, 42, 0.20)',
+  tooltipShadow: '0 12px 32px rgba(15, 23, 42, 0.12), 0 3px 8px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.82)'
+};
+var DARK_TOKENS = {
+  background: '#141414',
+  textPrimary: '#F3F4F6',
+  textSecondary: '#A7AFBE',
+  grid: '#343841',
+  axisGrid: '#2B2F36',
+  axisLine: '#454B56',
+  axisTick: '#596170',
+  separator: '#141414',
+  tooltipBackground: 'rgba(26, 27, 31, 0.96)',
+  tooltipBorder: 'rgba(255, 255, 255, 0.12)',
+  tooltipDivider: 'rgba(255, 255, 255, 0.10)',
+  tooltipMarkerShadow: '0 0 0 2px #1A1B1F, 0 1px 3px rgba(0, 0, 0, 0.42)',
+  tooltipShadow: '0 14px 36px rgba(0, 0, 0, 0.34), 0 3px 10px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08)'
+};
+var ACADEMY_TOKENS = {
+  background: '#FFFFFF',
+  textPrimary: '#23262D',
+  textSecondary: '#626975',
+  grid: '#DDDDDD',
+  axisGrid: '#DDDDDD',
+  axisLine: '#888888',
+  axisTick: '#000000',
+  separator: '#FFFFFF',
+  tooltipBackground: 'rgba(255, 253, 249, 0.98)',
+  tooltipBorder: 'rgba(83, 72, 60, 0.14)',
+  tooltipDivider: 'rgba(83, 72, 60, 0.12)',
+  tooltipMarkerShadow: '0 0 0 2px #FFFDF9, 0 1px 3px rgba(63, 49, 38, 0.20)',
+  tooltipShadow: '0 12px 30px rgba(63, 49, 38, 0.11), 0 3px 8px rgba(63, 49, 38, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.88)'
+};
+export var getChartVisualTokens = function getChartVisualTokens(theme) {
+  if (theme === 'dark') return DARK_TOKENS;
+  if (theme === 'academy') return ACADEMY_TOKENS;
+  return LIGHT_TOKENS;
+};