@itshixun/qst-ui-system
Version:
67 lines (66 loc) • 2.89 kB
TypeScript
export declare enum ThemeCategory {
Color = "color",
TextColor = "text-color",
BgColor = "bg-color",
BorderColor = "border-color",
FillColor = "fill-color",
ExtraColor = "extra-color",
BorderRadius = "border-radius",
Spacing = "spacing",
FontSize = "font-size",
ComponentSize = "component-size"
}
export declare enum DayNightModeEnum {
light = "light",
dark = "dark"
}
export declare enum MixModeEnum {
light = "light",
dark = "dark"
}
export declare const cssVarCodex: {
color: readonly ["primary", "secondary", "success", "warning", "danger", "info"];
"text-color": readonly ["primary", "regular", "secondary", "placeholder", "disabled"];
"bg-color": readonly ["DEFAULT", "page", "secondary"];
"border-color": readonly ["exlighter", "lighter", "light", "DEFAULT", "dark", "darker", "exdarker"];
"fill-color": readonly ["blank", "reverse", "exlighter", "lighter", "light", "DEFAULT", "dark", "darker", "exdarker"];
"extra-color": string[];
"border-radius": readonly ["small", "base", "large", "huge", "round", "circle"];
spacing: readonly ["xxxs", "xxs", "xs", "sm", "md", "DEFAULT", "lg", "xl", "xxl", "xxxl"];
"font-size": readonly ["extra-small", "small", "base", "medium", "large", "extra-large", "xxl", "xxxl"];
"component-size": readonly ["mini", "small", "DEFAULT", "large"];
};
export type ThemeConfig = {
[K in ThemeCategory]: Partial<Record<(typeof cssVarCodex)[K][number], string>>;
};
export interface UITheme {
name: string;
config: {
[T in DayNightModeEnum]: ThemeConfig;
};
}
/** 组件库计划支持'element-ui', 'element-plus', 'ant-design-vue', 'ant-design', 'vant' */
export type UILib = 'element-ui' | 'element-plus' | 'ant-design-vue' | 'ant-design' | 'vant';
/** 主题选项 */
export interface ThemeOption {
/** 主题css变量命名空间 默认--el */
namespace?: string;
/** 主题列表 */
themeList?: UITheme[];
/** 主题样式设置完成后的回调函数 */
onStylesSet?: () => void;
/** 是否包含css重置样式(reset/normalize) 默认是 */
cssReset?: boolean;
/** 需要适配的组件库(进行样式覆盖/主题定制) */
uiLibs?: UILib | UILib[];
/** 初始主题序号, 默认为主题列表中第一个主题 */
initialThemeIndex?: number;
/** 当前主题序号 */
currentThemeIndex?: number;
/** 注入<head>内的样式id，默认qst_theme */
styleTagId?: string;
/** 开启自动重置样式注入功能：监控<head>中的样式顺序，如果新增样式标签，自动将主题样式重置到最底部，保证主题样式的覆盖作用，默认true */
autoResetStyleInjection?: boolean;
/** 添加主题样式class的目标元素，不传则默认添加主题类名到html标签上 */
targetEl?: HTMLElement | HTMLElement[] | null;
}