123 lines
3.1 KiB
Plaintext
123 lines
3.1 KiB
Plaintext
// @ts-nocheck
|
|
import { isDarkMode } from './useThemeMode'
|
|
import type { SeedToken } from './interface';
|
|
import { genFontMapToken } from './genFontMapToken';
|
|
import { genSizeMapToken } from './genSizeMapToken';
|
|
import { genColorMapToken as genLightColorMapToken } from './light';
|
|
import { genColorMapToken as genDarkColorMapToken } from './dark';
|
|
import { computed, reactive } from 'vue'; // 或相应的响应式系统
|
|
|
|
|
|
|
|
// #ifndef UNI-APP-X
|
|
export type VueApp = any
|
|
export type UTSJSONObject = Record<string, any>
|
|
const UTSJSONObject = Object
|
|
// #endif
|
|
|
|
|
|
// 内部存储的 tokens
|
|
type LimeTokens = {
|
|
light : UTSJSONObject
|
|
dark : UTSJSONObject
|
|
}
|
|
|
|
// 默认的基础 token
|
|
const DEFAULT_SEED_TOKEN : SeedToken = {
|
|
primaryColor: '#3283ff'
|
|
};
|
|
|
|
export const themeTokenMaps = reactive<LimeTokens>({
|
|
light: {},
|
|
dark: {},
|
|
})
|
|
|
|
|
|
// 初始化默认 tokens
|
|
function initDefaultTokens() {
|
|
// Light 主题颜色
|
|
const lightColors = {
|
|
white: '#fff',
|
|
gray1: '#f3f3f3',
|
|
gray2: '#eeeeee',
|
|
gray3: '#e7e7e7',
|
|
gray4: '#dcdcdc',
|
|
gray5: '#c5c5c5',
|
|
gray6: '#a6a6a6',
|
|
gray7: '#8b8b8b',
|
|
gray8: '#777777',
|
|
gray9: '#5e5e5e',
|
|
gray10: '#4b4b4b',
|
|
gray11: '#383838',
|
|
gray12: '#2c2c2c',
|
|
gray13: '#242424',
|
|
gray14: '#181818',
|
|
black: '#000',
|
|
...genLightColorMapToken(DEFAULT_SEED_TOKEN)
|
|
};
|
|
// Dark 主题颜色
|
|
const darkColors = {
|
|
white: '#000', // 在暗黑模式下反转
|
|
gray1: '#181818',
|
|
gray2: '#242424',
|
|
gray3: '#2c2c2c',
|
|
gray4: '#383838',
|
|
gray5: '#4b4b4b',
|
|
gray6: '#5e5e5e',
|
|
gray7: '#777777',
|
|
gray8: '#8b8b8b',
|
|
gray9: '#a6a6a6',
|
|
gray10: '#c5c5c5',
|
|
gray11: '#dcdcdc',
|
|
gray12: '#e7e7e7',
|
|
gray13: '#eeeeee',
|
|
gray14: '#f3f3f3',
|
|
black: '#fff', // 在暗黑模式下反转
|
|
...genDarkColorMapToken(DEFAULT_SEED_TOKEN)
|
|
};
|
|
|
|
themeTokenMaps.light = UTSJSONObject.assign({}, lightColors, lightColors)
|
|
themeTokenMaps.dark = UTSJSONObject.assign({}, darkColors, darkColors)
|
|
}
|
|
|
|
initDefaultTokens();
|
|
|
|
// 导出的 themeTokens 是计算属性，自动返回当前主题的 tokens
|
|
export const themeTokens = computed(():UTSJSONObject => {
|
|
return isDarkMode.value ? themeTokenMaps.dark : themeTokenMaps.light;
|
|
});
|
|
|
|
|
|
|
|
export function useThemeToken(token : SeedToken | null = null) {
|
|
if (token != null) {
|
|
const lightColors = genLightColorMapToken(token!);
|
|
const darkColors = genDarkColorMapToken(token!);
|
|
|
|
// 只有在提供了相关属性时才重新生成 fonts 和 sizes
|
|
const fonts = genFontMapToken(token!.fontSize)
|
|
const sizes = genSizeMapToken(token!.sizeUnit, token.sizeStep)
|
|
|
|
themeTokenMaps.light = UTSJSONObject.assign({}, themeTokenMaps.light, lightColors, fonts, sizes)
|
|
themeTokenMaps.dark = UTSJSONObject.assign({}, themeTokenMaps.dark, darkColors, fonts, sizes)
|
|
}
|
|
}
|
|
|
|
export function useThemeVars(options : UTSJSONObject | null = null) {
|
|
if (options != null) {
|
|
const currentTheme = isDarkMode.value ? themeTokenMaps.dark : themeTokenMaps.light;
|
|
|
|
// #ifdef UNI-APP-X && APP
|
|
options.toMap().forEach((value, key) => {
|
|
currentTheme.set(key, value);
|
|
});
|
|
// #endif
|
|
|
|
// #ifndef UNI-APP-X && APP
|
|
Object.entries(options).forEach(([key, value]) => {
|
|
// currentTheme.set(key, value);
|
|
currentTheme[key] = value
|
|
});
|
|
// #endif
|
|
}
|
|
} |