/** * Charts Design Tokens System * 基于v2图表系统沉淀的完整图表设计令牌 * 专门用于数据可视化和图表组件 */ export declare const chartColorTokens: { readonly primary: { readonly chart1: "#6BB5FF"; readonly chart2: "#67D75E"; readonly chart3: "#FFB800"; readonly chart4: "#FF4747"; readonly chart5: "#8B7EFF"; }; readonly extended: { readonly chart6: "#5FE4D0"; readonly chart7: "#FF8A65"; readonly chart8: "#A5D6A7"; readonly chart9: "#FFCDD2"; readonly chart10: "#D1C4E9"; }; readonly semantic: { readonly good: "#67D75E"; readonly warning: "#FECC36"; readonly bad: "#F24E1E"; readonly neutral: "#6B7280"; readonly highlight: "#9747FF"; }; readonly auxiliary: { readonly gridLine: "#E5E7EB"; readonly axisLine: "#D1D5DB"; readonly tickLabel: "#6B7280"; readonly background: "#FFFFFF"; readonly tooltip: "#1F2937"; readonly tooltipText: "#FFFFFF"; readonly selection: "#9747FF40"; readonly hover: "#F3F4F6"; }; readonly gradients: { readonly blueGradient: readonly ["#6BB5FF", "#4F46E5"]; readonly greenGradient: readonly ["#67D75E", "#059669"]; readonly yellowGradient: readonly ["#FFB800", "#D97706"]; readonly redGradient: readonly ["#FF4747", "#DC2626"]; readonly purpleGradient: readonly ["#8B7EFF", "#7C3AED"]; }; }; export declare const chartSizingTokens: { readonly container: { readonly xs: { readonly width: 195; readonly height: 97; }; readonly sm: { readonly width: 300; readonly height: 200; }; readonly md: { readonly width: 430; readonly height: 225; }; readonly lg: { readonly width: 600; readonly height: 400; }; readonly xl: { readonly width: 800; readonly height: 500; }; readonly full: { readonly width: "100%"; readonly height: 400; }; }; readonly elements: { readonly point: { readonly sm: 3; readonly md: 5; readonly lg: 8; }; readonly stroke: { readonly thin: 1; readonly normal: 2; readonly thick: 3; readonly bold: 4; }; readonly bar: { readonly minWidth: 8; readonly maxWidth: 40; readonly gap: 4; readonly groupGap: 12; }; readonly pie: { readonly innerRadius: 0; readonly outerRadius: 80; readonly labelRadius: 100; readonly hoverOffset: 8; }; }; readonly margins: { readonly xs: { readonly top: 10; readonly right: 10; readonly bottom: 10; readonly left: 10; }; readonly sm: { readonly top: 15; readonly right: 15; readonly bottom: 20; readonly left: 25; }; readonly md: { readonly top: 20; readonly right: 20; readonly bottom: 30; readonly left: 40; }; readonly lg: { readonly top: 25; readonly right: 25; readonly bottom: 40; readonly left: 50; }; readonly xl: { readonly top: 30; readonly right: 30; readonly bottom: 50; readonly left: 60; }; }; }; export declare const chartTypographyTokens: { readonly title: { readonly main: { readonly fontSize: 24; readonly fontWeight: 600; readonly lineHeight: 1.2; readonly color: "#1F2937"; readonly fontFamily: "\"Scto Grotesk A\", sans-serif"; }; readonly sub: { readonly fontSize: 16; readonly fontWeight: 400; readonly lineHeight: 1.3; readonly color: "#6B7280"; readonly fontFamily: "\"Scto Grotesk A\", sans-serif"; }; }; readonly axis: { readonly label: { readonly fontSize: 14; readonly fontWeight: 500; readonly color: "#374151"; readonly fontFamily: "\"Scto Grotesk A\", sans-serif"; }; readonly tick: { readonly fontSize: 12; readonly fontWeight: 400; readonly color: "#6B7280"; readonly fontFamily: "\"Scto Grotesk A\", sans-serif"; }; }; readonly dataLabel: { readonly fontSize: 11; readonly fontWeight: 500; readonly color: "#1F2937"; readonly fontFamily: "\"Scto Grotesk A\", sans-serif"; }; readonly legend: { readonly fontSize: 13; readonly fontWeight: 400; readonly color: "#374151"; readonly fontFamily: "\"Scto Grotesk A\", sans-serif"; }; readonly tooltip: { readonly fontSize: 12; readonly fontWeight: 400; readonly color: "#FFFFFF"; readonly fontFamily: "\"Scto Grotesk A\", sans-serif"; }; }; export declare const chartSpacingTokens: { readonly internal: { readonly titleToChart: 15; readonly chartToLegend: 20; readonly legendItemGap: 12; readonly axisLabelGap: 8; readonly tickLength: 5; }; readonly component: { readonly betweenCharts: 30; readonly sectionGap: 40; readonly gridGap: 20; }; readonly responsive: { readonly mobile: { readonly containerPadding: 10; readonly titleToChart: 10; readonly chartToLegend: 15; }; readonly tablet: { readonly containerPadding: 15; readonly titleToChart: 12; readonly chartToLegend: 18; }; readonly desktop: { readonly containerPadding: 20; readonly titleToChart: 15; readonly chartToLegend: 20; }; }; }; export declare const chartAnimationTokens: { readonly duration: { readonly instant: 0; readonly fast: 200; readonly normal: 400; readonly slow: 600; readonly enter: 800; readonly exit: 300; }; readonly easing: { readonly linear: "linear"; readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)"; readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)"; readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)"; readonly bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"; readonly elastic: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"; }; readonly presets: { readonly fadeIn: { readonly duration: 400; readonly easing: "cubic-bezier(0, 0, 0.2, 1)"; readonly from: { readonly opacity: 0; }; readonly to: { readonly opacity: 1; }; }; readonly slideUp: { readonly duration: 600; readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)"; readonly from: { readonly transform: "translateY(20px)"; readonly opacity: 0; }; readonly to: { readonly transform: "translateY(0)"; readonly opacity: 1; }; }; readonly scaleIn: { readonly duration: 400; readonly easing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"; readonly from: { readonly transform: "scale(0.8)"; readonly opacity: 0; }; readonly to: { readonly transform: "scale(1)"; readonly opacity: 1; }; }; readonly drawLine: { readonly duration: 800; readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)"; readonly from: { readonly strokeDasharray: "0 100%"; }; readonly to: { readonly strokeDasharray: "100% 0"; }; }; }; }; export declare const chartInteractionTokens: { readonly hover: { readonly opacity: 0.8; readonly scale: 1.1; readonly strokeWidth: 3; readonly transition: "all 0.2s ease"; }; readonly selected: { readonly opacity: 1; readonly scale: 1.2; readonly strokeWidth: 4; readonly glowColor: "#9747FF"; readonly glowRadius: 4; }; readonly disabled: { readonly opacity: 0.4; readonly cursor: "not-allowed"; }; readonly loading: { readonly opacity: 0.6; readonly animation: "pulse 2s infinite"; }; }; export declare const chartDesignTokens: { readonly colors: { readonly primary: { readonly chart1: "#6BB5FF"; readonly chart2: "#67D75E"; readonly chart3: "#FFB800"; readonly chart4: "#FF4747"; readonly chart5: "#8B7EFF"; }; readonly extended: { readonly chart6: "#5FE4D0"; readonly chart7: "#FF8A65"; readonly chart8: "#A5D6A7"; readonly chart9: "#FFCDD2"; readonly chart10: "#D1C4E9"; }; readonly semantic: { readonly good: "#67D75E"; readonly warning: "#FECC36"; readonly bad: "#F24E1E"; readonly neutral: "#6B7280"; readonly highlight: "#9747FF"; }; readonly auxiliary: { readonly gridLine: "#E5E7EB"; readonly axisLine: "#D1D5DB"; readonly tickLabel: "#6B7280"; readonly background: "#FFFFFF"; readonly tooltip: "#1F2937"; readonly tooltipText: "#FFFFFF"; readonly selection: "#9747FF40"; readonly hover: "#F3F4F6"; }; readonly gradients: { readonly blueGradient: readonly ["#6BB5FF", "#4F46E5"]; readonly greenGradient: readonly ["#67D75E", "#059669"]; readonly yellowGradient: readonly ["#FFB800", "#D97706"]; readonly redGradient: readonly ["#FF4747", "#DC2626"]; readonly purpleGradient: readonly ["#8B7EFF", "#7C3AED"]; }; }; readonly sizing: { readonly container: { readonly xs: { readonly width: 195; readonly height: 97; }; readonly sm: { readonly width: 300; readonly height: 200; }; readonly md: { readonly width: 430; readonly height: 225; }; readonly lg: { readonly width: 600; readonly height: 400; }; readonly xl: { readonly width: 800; readonly height: 500; }; readonly full: { readonly width: "100%"; readonly height: 400; }; }; readonly elements: { readonly point: { readonly sm: 3; readonly md: 5; readonly lg: 8; }; readonly stroke: { readonly thin: 1; readonly normal: 2; readonly thick: 3; readonly bold: 4; }; readonly bar: { readonly minWidth: 8; readonly maxWidth: 40; readonly gap: 4; readonly groupGap: 12; }; readonly pie: { readonly innerRadius: 0; readonly outerRadius: 80; readonly labelRadius: 100; readonly hoverOffset: 8; }; }; readonly margins: { readonly xs: { readonly top: 10; readonly right: 10; readonly bottom: 10; readonly left: 10; }; readonly sm: { readonly top: 15; readonly right: 15; readonly bottom: 20; readonly left: 25; }; readonly md: { readonly top: 20; readonly right: 20; readonly bottom: 30; readonly left: 40; }; readonly lg: { readonly top: 25; readonly right: 25; readonly bottom: 40; readonly left: 50; }; readonly xl: { readonly top: 30; readonly right: 30; readonly bottom: 50; readonly left: 60; }; }; }; readonly typography: { readonly title: { readonly main: { readonly fontSize: 24; readonly fontWeight: 600; readonly lineHeight: 1.2; readonly color: "#1F2937"; readonly fontFamily: "\"Scto Grotesk A\", sans-serif"; }; readonly sub: { readonly fontSize: 16; readonly fontWeight: 400; readonly lineHeight: 1.3; readonly color: "#6B7280"; readonly fontFamily: "\"Scto Grotesk A\", sans-serif"; }; }; readonly axis: { readonly label: { readonly fontSize: 14; readonly fontWeight: 500; readonly color: "#374151"; readonly fontFamily: "\"Scto Grotesk A\", sans-serif"; }; readonly tick: { readonly fontSize: 12; readonly fontWeight: 400; readonly color: "#6B7280"; readonly fontFamily: "\"Scto Grotesk A\", sans-serif"; }; }; readonly dataLabel: { readonly fontSize: 11; readonly fontWeight: 500; readonly color: "#1F2937"; readonly fontFamily: "\"Scto Grotesk A\", sans-serif"; }; readonly legend: { readonly fontSize: 13; readonly fontWeight: 400; readonly color: "#374151"; readonly fontFamily: "\"Scto Grotesk A\", sans-serif"; }; readonly tooltip: { readonly fontSize: 12; readonly fontWeight: 400; readonly color: "#FFFFFF"; readonly fontFamily: "\"Scto Grotesk A\", sans-serif"; }; }; readonly spacing: { readonly internal: { readonly titleToChart: 15; readonly chartToLegend: 20; readonly legendItemGap: 12; readonly axisLabelGap: 8; readonly tickLength: 5; }; readonly component: { readonly betweenCharts: 30; readonly sectionGap: 40; readonly gridGap: 20; }; readonly responsive: { readonly mobile: { readonly containerPadding: 10; readonly titleToChart: 10; readonly chartToLegend: 15; }; readonly tablet: { readonly containerPadding: 15; readonly titleToChart: 12; readonly chartToLegend: 18; }; readonly desktop: { readonly containerPadding: 20; readonly titleToChart: 15; readonly chartToLegend: 20; }; }; }; readonly animation: { readonly duration: { readonly instant: 0; readonly fast: 200; readonly normal: 400; readonly slow: 600; readonly enter: 800; readonly exit: 300; }; readonly easing: { readonly linear: "linear"; readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)"; readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)"; readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)"; readonly bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)"; readonly elastic: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"; }; readonly presets: { readonly fadeIn: { readonly duration: 400; readonly easing: "cubic-bezier(0, 0, 0.2, 1)"; readonly from: { readonly opacity: 0; }; readonly to: { readonly opacity: 1; }; }; readonly slideUp: { readonly duration: 600; readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)"; readonly from: { readonly transform: "translateY(20px)"; readonly opacity: 0; }; readonly to: { readonly transform: "translateY(0)"; readonly opacity: 1; }; }; readonly scaleIn: { readonly duration: 400; readonly easing: "cubic-bezier(0.175, 0.885, 0.32, 1.275)"; readonly from: { readonly transform: "scale(0.8)"; readonly opacity: 0; }; readonly to: { readonly transform: "scale(1)"; readonly opacity: 1; }; }; readonly drawLine: { readonly duration: 800; readonly easing: "cubic-bezier(0.4, 0, 0.2, 1)"; readonly from: { readonly strokeDasharray: "0 100%"; }; readonly to: { readonly strokeDasharray: "100% 0"; }; }; }; }; readonly interaction: { readonly hover: { readonly opacity: 0.8; readonly scale: 1.1; readonly strokeWidth: 3; readonly transition: "all 0.2s ease"; }; readonly selected: { readonly opacity: 1; readonly scale: 1.2; readonly strokeWidth: 4; readonly glowColor: "#9747FF"; readonly glowRadius: 4; }; readonly disabled: { readonly opacity: 0.4; readonly cursor: "not-allowed"; }; readonly loading: { readonly opacity: 0.6; readonly animation: "pulse 2s infinite"; }; }; }; export type ChartDesignTokens = typeof chartDesignTokens; export type ChartColorTokens = typeof chartColorTokens; export type ChartSizingTokens = typeof chartSizingTokens; export type ChartTypographyTokens = typeof chartTypographyTokens; export type ChartSpacingTokens = typeof chartSpacingTokens; export type ChartAnimationTokens = typeof chartAnimationTokens; export type ChartInteractionTokens = typeof chartInteractionTokens; /** * 获取图表颜色 */ export declare const getChartColor: (index: number) => string; /** * 获取图表渐变 */ export declare const getChartGradient: (type: keyof typeof chartColorTokens.gradients) => readonly string[]; /** * 生成图表CSS变量 */ export declare const generateChartCSSVariables: () => Record; /** * 响应式图表尺寸计算 */ export declare const getResponsiveChartSize: (containerWidth: number, aspectRatio?: number) => { width: number; height: number; }; export default chartDesignTokens;