@youwen/ai-design-system
Version:
Enterprise AI-driven design system with comprehensive design tokens
621 lines (620 loc) • 19.8 kB
TypeScript
/**
* 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<string, string>;
/**
* 响应式图表尺寸计算
*/
export declare const getResponsiveChartSize: (containerWidth: number, aspectRatio?: number) => {
width: number;
height: number;
};
export default chartDesignTokens;