优化组件/更新

uni_modules/lime-style/token/dark.uts

@@ -0,0 +1,67 @@
+import { TinyColor, generate, LGenerateOptions } from '@/uni_modules/lime-color';
+import { getAlphaColor, getSolidColor, generateColorPalettes } from './shared'
+import { SeedToken } from './interface'
+// #ifndef UNI-APP-X
+export type UTSJSONObject = Record<string, any>
+const UTSJSONObject = Object
+// #endif
+
+export function generateNeutralColorPalettes(
+	bgBaseColor : string | null,
+	textBaseColor : string | null) : UTSJSONObject {
+	const colorBgBase = bgBaseColor ?? '#000';
+	const colorTextBase = textBaseColor ?? '#fff';
+
+	return {
+		'bgColorBase': colorBgBase,
+		'textColorBase': colorTextBase,
+
+		'textColor1': getAlphaColor(colorTextBase, 0.85),
+		'textColor2': getAlphaColor(colorTextBase, 0.65),
+		'textColor3': getAlphaColor(colorTextBase, 0.45),
+		'textColor4': getAlphaColor(colorTextBase, 0.25),
+
+		'fill1': getAlphaColor(colorTextBase, 0.18),
+		'fill2': getAlphaColor(colorTextBase, 0.12),
+		'fill3': getAlphaColor(colorTextBase, 0.08),
+		'fill4': getAlphaColor(colorTextBase, 0.04),
+
+		'bgColorElevated': getSolidColor(colorBgBase, 12),
+		'bgColorContainer': getSolidColor(colorBgBase, 8),
+		'bgColorPage': getSolidColor(colorBgBase, 0),
+		'bgColorSpotlight': getSolidColor(colorBgBase, 26),
+		// 'bgColor5': getAlphaColor(colorTextBase, 0.04),
+		'bgColorMask': getAlphaColor(colorBgBase, 0.45),
+		'bgColorBlur': getAlphaColor(colorTextBase, 0.04),
+
+		'borderColor1': getSolidColor(colorBgBase, 26),
+		'borderColor2': getSolidColor(colorBgBase, 19)
+	}
+}
+
+
+export function genColorMapToken(token : SeedToken) : UTSJSONObject {
+	const colorPrimaryBase = token.primaryColor
+	const colorSuccessBase = token.successColor
+	const colorWarningBase = token.warningColor
+	const colorErrorBase = token.errorColor
+	const colorInfoBase = token.infoColor
+	const colorBgBase = token.bgColorBase
+	const colorTextBase = token.textColorBase
+
+	const primaryColors = generateColorPalettes(colorPrimaryBase, 'primaryColor', 'dark');
+	const successColors = generateColorPalettes(colorSuccessBase, 'successColor', 'dark');
+	const warningColors = generateColorPalettes(colorWarningBase, 'warningColor', 'dark');
+	const errorColors = generateColorPalettes(colorErrorBase, 'errorColor', 'dark');
+	const infoColors = generateColorPalettes(colorInfoBase, 'infoColor', 'dark');
+	const neutralColors = generateNeutralColorPalettes(colorBgBase, colorTextBase);
+
+	return UTSJSONObject.assign(
+		{},
+		primaryColors,
+		successColors,
+		warningColors,
+		errorColors,
+		infoColors,
+		neutralColors)
+}

uni_modules/lime-style/token/genFontMapToken.uts

@@ -0,0 +1,49 @@
+// import type { FontMapToken } from '../../interface';
+import { getFontSizes } from './genFontSizes';
+
+export const genFontMapToken = (fontSize : number | null) : UTSJSONObject => {
+	if (fontSize == null) return {}
+	const fontSizePairs = getFontSizes(fontSize);
+	const fontSizes = fontSizePairs.map((pair) : number => pair.size);
+	const lineHeights = fontSizePairs.map((pair) : number => pair.lineHeight);
+
+	const fontSizeXS = fontSizes[0];
+	const fontSizeSM = fontSizes[1];
+	const fontSizeMD = fontSizes[3];
+	const fontSizeLG = fontSizes[4];
+
+	const lineHeight = lineHeights[2];
+	const lineHeightSM = lineHeights[1];
+	const lineHeightMD = lineHeights[3];
+	const lineHeightLG = lineHeights[4];
+
+	return {
+		fontSize,
+		fontSizeXS,
+		fontSizeSM,
+		fontSizeMD,
+		fontSizeLG,
+		fontSizeXL: fontSizes[5],
+
+		fontSizeHeading1: fontSizes[7],
+		fontSizeHeading2: fontSizes[6],
+		fontSizeHeading3: fontSizes[5],
+		fontSizeHeading4: fontSizes[4],
+		fontSizeHeading5: fontSizes[3],
+
+		lineHeight,
+		lineHeightLG,
+		lineHeightMD,
+		lineHeightSM,
+
+		fontHeight: Math.round(lineHeight * fontSizeMD),
+		fontHeightLG: Math.round(lineHeightLG * fontSizeLG),
+		fontHeightSM: Math.round(lineHeightSM * fontSizeSM),
+
+		lineHeightHeading1: lineHeights[7],
+		lineHeightHeading2: lineHeights[6],
+		lineHeightHeading3: lineHeights[5],
+		lineHeightHeading4: lineHeights[4],
+		lineHeightHeading5: lineHeights[3],
+	};
+};

uni_modules/lime-style/token/genFontSizes.uts

@@ -0,0 +1,30 @@
+import { FontSize } from './interface';
+
+export function getLineHeight(fontSize : number) : number {
+	return (fontSize + 8) / fontSize;
+}
+
+// https://zhuanlan.zhihu.com/p/32746810
+export function getFontSizes(base : number) : FontSize[] {
+	const length = 11 // 10
+	const offset = 2 // 1
+	// #ifdef APP-ANDROID
+	const arr = Array.fromNative(new IntArray(length.toInt()));
+	// #endif
+	// #ifndef APP-ANDROID
+	 const arr = Array.from({ length });
+	// #endif
+	const fontSizes = arr.map((_, index) : number => {
+		const i = index - offset;
+		const baseSize = base * Math.pow(Math.E, i / 5);
+		const intSize = index > 1 ? Math.floor(baseSize) : Math.ceil(baseSize);
+
+		// Convert to even
+		return Math.floor(intSize / 2) * 2;
+	});
+	fontSizes[offset] = base;
+	return fontSizes.map((size) : FontSize => ({
+		size,
+		lineHeight: getLineHeight(size),
+	} as FontSize));
+}

uni_modules/lime-style/token/genRadius.uts

@@ -0,0 +1,63 @@
+export function genRadius(radiusBase : number):Map<string, number> {
+	let radiusXL = radiusBase;
+	let radiusLG = radiusBase;
+	let radiusMD = radiusBase;
+	let radiusSM = radiusBase;
+	let radiusXS = radiusBase;
+	let radiusOuter = radiusBase;
+	
+	
+	// radiusSM = radiusBase - 3
+	// radiusXS = radiusSM - 1
+	// radiusLG = radiusBase + 3
+	// radiusXL = radiusLG + 3
+
+	
+	// radiusXL
+	if (radiusBase < 6 && radiusBase >= 5) {
+		radiusXL = radiusBase + 3;
+	} else if (radiusBase < 16 && radiusBase >= 6) {
+		radiusXL = radiusBase + 6;
+	} else if (radiusBase >= 16) {
+		radiusXL = 16;
+	}
+	
+	// radiusLG
+	if (radiusBase < 6 && radiusBase >= 5) {
+		radiusLG = radiusBase + 1;
+	} else if (radiusBase < 16 && radiusBase >= 6) {
+		radiusLG = radiusBase + 3;
+	} else if (radiusBase >= 16) {
+		radiusLG = 16;
+	}
+
+	// radiusSM
+	if (radiusBase < 7 && radiusBase >= 5) {
+		radiusSM = 3;
+	} else if (radiusBase < 8 && radiusBase >= 7) {
+		radiusSM = 4;
+	} else if (radiusBase < 14 && radiusBase >= 8) {
+		radiusSM = 5;
+	} else if (radiusBase < 16 && radiusBase >= 14) {
+		radiusSM = 6;
+	} else if (radiusBase >= 16) {
+		radiusSM = 8;
+	}
+
+	// radiusXS
+	if (radiusBase < 6 && radiusBase >= 2) {
+		radiusXS = 1;
+	} else if (radiusBase >= 6) {
+		radiusXS = 2;
+	}
+
+	
+	return new Map<string, number>([
+		['borderRadius', radiusBase],
+		['borderRadiusXS', radiusXS],
+		['borderRadiusSM', radiusSM],
+		['borderRadiusMD', radiusMD],
+		['borderRadiusLG', radiusLG],
+		['borderRadiusXL', radiusXL],
+	])
+}

uni_modules/lime-style/token/genSizeMapToken.uts

@@ -0,0 +1,20 @@
+// import {SizeMapToken} from './interface'
+
+/**
+ * sizeUnit 尺寸变化单位
+ * sizeStep 尺寸步长
+ */
+export function genSizeMapToken(sizeUnit : number | null = 4, sizeStep : number | null = 4) : UTSJSONObject {
+	if (sizeUnit == null || sizeStep == null) return {}
+	return {
+		spacerHG: sizeUnit * (sizeStep + 16), // 80   
+		spacerXL: sizeUnit * (sizeStep + 8), // 48
+		spacerLG: sizeUnit * (sizeStep + 4), // 32
+		spacerMD: sizeUnit * (sizeStep + 2), // 24
+		spacerMS: sizeUnit * sizeStep, // 16
+		spacer:   sizeUnit * sizeStep, // 16
+		spacerSM: sizeUnit * (sizeStep - 1), // 12
+		spacerXS: sizeUnit * (sizeStep - 2), // 8
+		spacerTN: sizeUnit * (sizeStep - 3), // 4
+	};
+}

uni_modules/lime-style/token/interface.uts

@@ -0,0 +1,184 @@
+
+export type SeedToken = {
+	//  ----------   Color   ---------- //
+	/**
+	 * @nameZH 是否生成深色色板
+	 * @nameEN GenerateDarkPalette
+	 * @desc 是否生成一套完整的深色阶梯色板，以支持深色模式的应用
+	 * @descEN Whether to generate a complete set of dark color palettes to support dark mode applications
+	 */
+	useDark ?: boolean;
+	
+	/**
+	 * @nameZH 品牌主色
+	 * @nameEN Brand Color
+	 * @desc 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义
+	 * @descEN Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.
+	 */
+	primaryColor ?: string;
+	/**
+	 * @nameZH 成功色
+	 * @nameEN Success Color
+	 * @desc 用于表示操作成功的 Token 序列，如 Result、Progress 等组件会使用该组梯度变量。
+	 * @descEN Used to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens.
+	 */
+	successColor ?: string;
+
+	/**
+	 * @nameZH 警戒色
+	 * @nameEN Warning Color
+	 * @desc 用于表示操作警告的 Token 序列，如 Notification、 Alert等警告类组件或 Input 输入类等组件会使用该组梯度变量。
+	 * @descEN Used to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens.
+	 */
+	warningColor ?: string;
+	/**
+	 * @nameZH 错误色
+	 * @nameEN Error Color
+	 * @desc 用于表示操作失败的 Token 序列，如失败按钮、错误状态提示（Result）组件等。
+	 * @descEN Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.
+	 */
+	errorColor ?: string;
+	/**
+	  * @nameZH 信息色
+	  * @nameEN Info Color
+	  * @desc 用于表示操作信息的 Token 序列，如 Alert 、Tag、 Progress 等组件都有用到该组梯度变量。
+	  * @descEN Used to represent the operation information of the Token sequence, such as Alert, Tag, Progress, and other components use these map tokens.
+	  */
+	infoColor ?: string;
+	/**
+	 * @nameZH 基础文本色
+	 * @nameEN Seed Text Color
+	 * @desc 用于派生文本色梯度的基础变量，v5 中我们添加了一层文本色的派生算法可以产出梯度明确的文本色的梯度变量。但请不要在代码中直接使用该 Seed Token ！
+	 * @descEN Used to derive the base variable of the text color gradient. In v5, we added a layer of text color derivation algorithm to produce gradient variables of text color gradient. But please do not use this Seed Token directly in the code!
+	 */
+	textColorBase ?: string;
+
+	/**
+	   * @nameZH 基础背景色
+	   * @nameEN Seed Background Color
+	   * @desc 用于派生背景色梯度的基础变量，v5 中我们添加了一层背景色的派生算法可以产出梯度明确的背景色的梯度变量。但请不要在代码中直接使用该 Seed Token ！
+	   * @descEN Used to derive the base variable of the background color gradient. In v5, we added a layer of background color derivation algorithm to produce map token of background color. But PLEASE DO NOT USE this Seed Token directly in the code!
+	   */
+	bgColorBase ?: string;
+
+	/**
+	 * @nameZH 超链接颜色
+	 * @nameEN Hyperlink color
+	 * @desc 控制超链接的颜色。
+	 * @descEN Control the color of hyperlink.
+	 */
+	linkColor ?: string;
+
+	//  ----------   Font   ---------- //
+
+	/**
+	 * @nameZH 字体
+	 * @nameEN Font family for default text
+	 * @desc Lime Ui 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。
+	 * @descEN The font family of Lime Ui prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.
+	 */
+	fontFamily ?: string;
+
+	/**
+	 * @nameZH 代码字体
+	 * @nameEN Font family for code text
+	 * @desc 代码字体，用于 Typography 内的 code、pre 和 kbd 类型的元素
+	 * @descEN Code font, used for code, pre and kbd elements in Typography
+	 */
+	fontFamilyCode ?: string;
+
+	/**
+	 * @nameZH 默认字号
+	 * @nameEN Default Font Size
+	 * @desc 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。
+	 * @descEN The most widely used font size in the design system, from which the text gradient will be derived.
+	 * @default 14
+	 */
+	fontSize ?: number;
+
+
+	//  ----------   BorderRadius   ---------- //
+
+	/**
+	 * @nameZH 基础圆角
+	 * @nameEN Base Border Radius
+	 * @descEN Border radius of base components
+	 * @desc 基础组件的圆角大小，例如按钮、输入框、卡片等
+	 */
+	borderRadius ?: number;
+
+	//  ----------   Size   ---------- //
+
+	/**
+	 * @nameZH 尺寸变化单位
+	 * @nameEN Size Change Unit
+	 * @desc 用于控制组件尺寸的变化单位，在 Lime Ui 中我们的基础单位为 4 ，便于更加细致地控制尺寸梯度
+	 * @descEN The unit of size change, in Lime Ui, our base unit is 4, which is more fine-grained control of the size step
+	 * @default 4
+	 */
+	sizeUnit ?: number;
+
+	/**
+	 * @nameZH 尺寸步长
+	 * @nameEN Size Base Step
+	 * @desc 用于控制组件尺寸的基础步长，尺寸步长结合尺寸变化单位，就可以派生各种尺寸梯度。通过调整步长即可得到不同的布局模式，例如 V5 紧凑模式下的尺寸步长为 2
+	 * @descEN The base step of size change, the size step combined with the size change unit, can derive various size steps. By adjusting the step, you can get different layout modes, such as the size step of the compact mode of V5 is 2
+	 * @default 4
+	 */
+	sizeStep ?: number;
+}
+export type FontSize = {
+	size : number
+	lineHeight : number
+}
+export type SizeMapToken = {
+	/**
+	 * @nameZH Huge
+	 * @default 80
+	 */
+	sizeHG : number;
+	/**
+	 * @nameZH XL
+	 * @default 48
+	 */
+	sizeXL : number;
+	/**
+	 * @nameZH LG
+	 * @default 32
+	 */
+	sizeLG : number;
+	/**
+	 * @nameZH MD
+	 * @default 24
+	 */
+	sizeMD : number;
+	/** Same as size by default, but could be larger in compact mode */
+	sizeMS : number;
+	/**
+	 * @nameZH 默认
+	 * @desc 默认尺寸
+	 * @default 16
+	 */
+	size : number;
+	/**
+	 * @nameZH SM
+	 * @default 12
+	 */
+	sizeSM : number;
+	/**
+	 * @nameZH XS
+	 * @default 8
+	 */
+	sizeXS : number;
+	/**
+	 * @nameZH Tiny
+	 * @default 4
+	 */
+	sizeTN : number;
+}
+
+
+// #ifndef UNI-APP-X
+export type VueApp = any
+export type UTSJSONObject = Record<string, any>
+// #endif

uni_modules/lime-style/token/light.uts

@@ -0,0 +1,66 @@
+import { TinyColor, generate } from '@/uni_modules/lime-color';
+import { getAlphaColor, getSolidColor, generateColorPalettes } from './shared'
+import { SeedToken } from './interface'
+// #ifndef UNI-APP-X
+export type UTSJSONObject = Record<string, any>
+const UTSJSONObject = Object
+// #endif
+
+export function generateNeutralColorPalettes(
+	bgBaseColor : string | null,
+	textBaseColor : string | null
+) : UTSJSONObject {
+	const colorBgBase = bgBaseColor ?? '#fff';
+	const colorTextBase = textBaseColor ?? '#000';
+
+	return {
+		'bgColorBase': bgBaseColor,
+		'textColorBase': textBaseColor,
+
+		'textColor1': getAlphaColor(colorTextBase, 0.88),
+		'textColor2': getAlphaColor(colorTextBase, 0.65),
+		'textColor3': getAlphaColor(colorTextBase, 0.45),
+		'textColor4': getAlphaColor(colorTextBase, 0.25),
+
+		'fill1': getAlphaColor(colorTextBase, 0.15),
+		'fill2': getAlphaColor(colorTextBase, 0.06),
+		'fill3': getAlphaColor(colorTextBase, 0.04),
+		'fill4': getAlphaColor(colorTextBase, 0.02),
+
+		'bgColorPage': getSolidColor(colorBgBase, 4),
+		'bgColorContainer': getSolidColor(colorBgBase, 0),
+		'bgColorElevated': getSolidColor(colorBgBase, 0),
+		'bgColorMask': getAlphaColor(colorTextBase, 0.45),
+		'bgColorSpotlight': getAlphaColor(colorTextBase, 0.85),
+		'bgColorBlur': 'transparent',
+		
+		'borderColor1': getSolidColor(colorBgBase, 15),
+		'borderColor2': getSolidColor(colorBgBase, 6)
+	}
+};
+
+export function genColorMapToken(token : SeedToken) : UTSJSONObject {
+	const colorPrimaryBase = token.primaryColor
+	const colorSuccessBase = token.successColor
+	const colorWarningBase = token.warningColor
+	const colorErrorBase = token.errorColor
+	const colorInfoBase = token.infoColor
+	const colorBgBase = token.bgColorBase
+	const colorTextBase = token.textColorBase
+
+	const primaryColors = generateColorPalettes(colorPrimaryBase, 'primaryColor');
+	const successColors = generateColorPalettes(colorSuccessBase, 'successColor');
+	const warningColors = generateColorPalettes(colorWarningBase, 'warningColor');
+	const errorColors = generateColorPalettes(colorErrorBase, 'errorColor');
+	const infoColors = generateColorPalettes(colorInfoBase, 'infoColor');
+	const neutralColors = generateNeutralColorPalettes(colorBgBase, colorTextBase);
+
+	return UTSJSONObject.assign(
+		{},
+		primaryColors,
+		successColors,
+		warningColors,
+		errorColors,
+		infoColors,
+		neutralColors)
+}

uni_modules/lime-style/token/shared.uts

@@ -0,0 +1,24 @@
+import { TinyColor, generate } from '@/uni_modules/lime-color';
+import { LGenerateOptions } from '@/uni_modules/lime-color/utssdk/interface';
+
+export const getAlphaColor = (baseColor : string, alpha : number) : string =>
+	new TinyColor(baseColor).setAlpha(alpha).toRgbString();
+
+export const getSolidColor = (baseColor : string, brightness : number) : string => {
+	const instance = new TinyColor(baseColor);
+	return instance.lighten(brightness).toHexString();
+};
+
+export function generateColorPalettes(baseColor : string | null, name : string, theme: string = 'default') : UTSJSONObject {
+	if (baseColor == null) return {}
+	const colors = generate(baseColor, { theme } as LGenerateOptions);
+	const colorPalettes = colors.reduce((prev:UTSJSONObject, color:string, index:number) : UTSJSONObject => {
+		prev[`${name}${index + 1}`] = color;
+		return prev
+	}, {})
+	
+	// 默认为中间色
+	colorPalettes[name] = colorPalettes[`${name}${6}`]
+	return colorPalettes
+}
+

uni_modules/lime-style/token/useThemeMode.uts

@@ -0,0 +1,126 @@
+// @ts-nocheck
+// #ifndef UNI-APP-X
+import { type ComputedRef, ref, watch,  getCurrentScope, onScopeDispose, computed, reactive  } from './vue';
+// #endif
+
+type ThemeMode = 'light' | 'dark' | 'auto'
+const THEME_LOCAL_STORAGE_KEY = 'app-theme-preference'
+
+let limeThemeId = -1
+const limeThemeMode = ref<ThemeMode>('auto')
+const limeTheme = ref(getTheme())
+
+
+function setWeb (theme: ThemeMode) {
+	// #ifdef WEB
+	const pageHead = document.querySelector(".uni-page-head");
+	if(!pageHead) return
+	if (theme == 'dark') {
+		pageHead.style.backgroundColor = '#181818'
+		pageHead.style.color = ''
+	} else {
+		pageHead.style.backgroundColor = 'rgb(245, 245, 245)'
+		pageHead.style.color = 'rgb(0, 0, 0)'
+	}
+	// #endif
+}
+
+
+export function getTheme(): 'dark' | 'light' {
+	// #ifndef UNI-APP-X && APP
+	let mode = uni.getStorageSync(THEME_LOCAL_STORAGE_KEY)
+	limeThemeMode.value = (mode || 'auto')
+	const hostTheme = uni.getAppBaseInfo().hostTheme;
+	return limeThemeMode.value === 'auto' ? (hostTheme || 'light') : limeThemeMode.value
+	// #endif
+	
+	// #ifdef UNI-APP-X && APP
+	let { osTheme, appTheme } = uni.getSystemInfoSync();
+	return appTheme == "auto" ? osTheme! : appTheme!
+	// #endif
+	
+	
+}
+
+// #ifndef UNI-APP-X
+let limeThemeCallBack = (result) => {
+	limeTheme.value = result.theme
+};
+// #endif
+
+export function stop() {
+	// #ifndef UNI-APP-X
+	uni.offThemeChange(limeThemeCallBack)
+	// #endif
+	// #ifdef UNI-APP-X
+	// #ifndef UNI-APP-X && APP
+	uni.offHostThemeChange(limeThemeId)
+	
+	// #endif
+	// #ifdef UNI-APP-X && APP
+	uni.offAppThemeChange(limeThemeId)
+	// #endif
+	// #endif
+}
+
+
+// 检查系统主题
+export const checkSystemTheme = () => {
+	stop()
+	limeTheme.value = getTheme()
+	// #ifndef UNI-APP-X
+	uni.onThemeChange(limeThemeCallBack); 
+	// #endif
+	// #ifdef UNI-APP-X
+	// #ifndef UNI-APP-X && APP
+	limeThemeId = uni.onHostThemeChange((result) => {
+		limeTheme.value = result.hostTheme
+	});
+	// #endif
+	// #ifdef UNI-APP-X && APP
+	limeThemeId = uni.onAppThemeChange((res : AppThemeChangeResult) => {
+		limeTheme.value = res.appTheme.trim()
+	})
+	// #endif
+	// #endif
+}
+
+
+export const isDarkMode = computed(() => {
+	return limeTheme.value == "dark";
+});
+
+export function setThemeMode(theme: 'dark' | 'light' | 'auto') {
+	// #ifdef UNI-APP-X && APP
+	if (limeTheme.value == theme) return;
+	uni.setAppTheme({
+		theme,
+		success: function (result: SetAppThemeSuccessResult) {
+			console.log("设置appTheme为"+ result.theme +"成功")
+			limeTheme.value = result.theme
+		},
+		fail: function (e : IAppThemeFail) {
+			console.log("设置appTheme为 auto 失败,原因:", e.errMsg)
+		}
+	})
+	// #endif
+	// #ifndef UNI-APP-X && APP
+	limeThemeMode.value = theme
+	uni.setStorageSync(THEME_LOCAL_STORAGE_KEY, theme)
+	limeTheme.value = getTheme()
+	// #endif
+	// #ifdef WEB
+	setWeb(limeTheme.value )
+	// #endif
+}
+
+
+export function toggleTheme() {
+	setThemeMode(isDarkMode.value ? 'light' : 'dark')
+}
+
+// #ifdef WEB
+watch(isDarkMode, ()=>{
+	setWeb(limeTheme.value)
+})
+// #endif

uni_modules/lime-style/token/useThemeVars.uts

@@ -0,0 +1,123 @@
+// @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
+	}
+}

uni_modules/lime-style/token/vue.ts

@@ -0,0 +1,13 @@
+// @ts-nocheck
+// #ifndef VUE3
+import Vue from 'vue'
+import VueCompositionAPI from '@vue/composition-api'
+Vue.use(VueCompositionAPI)
+export * from '@vue/composition-api'
+// #endif
+// #ifdef VUE3
+export * from 'vue';
+// #endif
+// #ifdef APP-IOS || APP-ANDROID
+export type ComputedRef<T> = ComputedRefImpl<T>
+// #endif