@youwen/ai-design-system
Version:
Enterprise AI-driven design system with comprehensive design tokens
130 lines (129 loc) • 4.15 kB
TypeScript
/**
* HVAC Layout Design Tokens
* 基于Figma精确提取的布局和间距规范
*/
export declare const layoutSystem: {
readonly dimensions: {
readonly widgetSmall: {
readonly width: 195;
readonly height: 97;
};
readonly container: {
readonly width: 430;
readonly height: 225;
};
readonly button: {
readonly width: 195;
readonly height: 47;
};
readonly card: {
readonly width: 440;
readonly height: 1081;
};
};
readonly spacing: {
readonly unit: 15;
readonly none: 0;
readonly xs: 5;
readonly sm: 10;
readonly md: 15;
readonly lg: 20;
readonly xl: 30;
readonly component: {
readonly containerPadding: 15;
readonly itemGap: 10;
readonly textVerticalGap: 10;
readonly moduleMargin: 15;
};
};
readonly grid: {
readonly columns: {
readonly single: "1fr";
readonly double: "repeat(2, 195px)";
readonly triple: "repeat(3, 195px)";
readonly auto: "repeat(auto-fit, minmax(195px, 1fr))";
};
readonly gaps: {
readonly sm: 10;
readonly md: 15;
readonly lg: 20;
};
};
readonly flex: {
readonly widgetInternal: {
readonly direction: "column";
readonly justify: "flex-start";
readonly align: "flex-start";
readonly gap: 10;
};
readonly containerLayout: {
readonly direction: "row";
readonly justify: "space-between";
readonly align: "flex-start";
readonly gap: 15;
};
readonly layouts: {
readonly verticalStack: {
readonly display: "flex";
readonly flexDirection: "column";
readonly gap: "10px";
readonly alignItems: "flex-start";
};
readonly horizontalLayout: {
readonly display: "flex";
readonly flexDirection: "row";
readonly gap: "15px";
readonly alignItems: "flex-start";
};
readonly gridLayout: {
readonly display: "grid";
readonly gridTemplateColumns: "repeat(auto-fit, minmax(195px, 1fr))";
readonly gap: "15px";
readonly padding: "15px";
};
};
};
readonly positioning: {
readonly offsets: {
readonly containerMargin: 15;
readonly componentSpacing: 15;
readonly textBaseline: 0;
};
readonly alignment: {
readonly left: "flex-start";
readonly center: "center";
readonly right: "flex-end";
readonly justify: "space-between";
};
};
readonly breakpoints: {
readonly mobile: 390;
readonly tablet: 615;
readonly desktop: 840;
readonly wide: 1065;
};
};
export declare const getLayoutDimension: (component: keyof typeof layoutSystem.dimensions) => {
readonly width: 195;
readonly height: 97;
} | {
readonly width: 430;
readonly height: 225;
} | {
readonly width: 195;
readonly height: 47;
} | {
readonly width: 440;
readonly height: 1081;
};
export declare const getLayoutSpacing: (key: keyof typeof layoutSystem.spacing) => string | {
readonly containerPadding: 15;
readonly itemGap: 10;
readonly textVerticalGap: 10;
readonly moduleMargin: 15;
};
export declare const getLayoutGridColumns: (count: keyof typeof layoutSystem.grid.columns) => "1fr" | "repeat(2, 195px)" | "repeat(3, 195px)" | "repeat(auto-fit, minmax(195px, 1fr))";
export type LayoutDimension = keyof typeof layoutSystem.dimensions;
export type LayoutSpacing = keyof typeof layoutSystem.spacing;
export type LayoutGridColumns = keyof typeof layoutSystem.grid.columns;
export type LayoutFlexLayout = keyof typeof layoutSystem.flex.layouts;