Initial commit of akmon project

2026-01-20 08:04:15 +08:00
commit 77a2bab985
1309 changed files with 343305 additions and 0 deletions
--- a/uni_modules/lime-style/changelog.md
+++ b/uni_modules/lime-style/changelog.md
@@ -0,0 +1,30 @@
+## 0.1.5（2025-06-20）
+- fix: 修复 vue2 rpx转成px的问题
+## 0.1.4（2025-06-12）
+- feat: 增加一些函数
+## 0.1.3（2025-05-07）
+- feat: 增加`hairline`函数
+## 0.1.2（2025-04-24）
+- feat: 根据官方建议，字体使用px
+## 0.1.1（2025-03-25）
+- feat: 更换rbgToHsv算法
+## 0.1.0（2025-03-13）
+- feat: hbx4.56 Vue2 scss 预编译器默认已由 node-sass 更换为 dart-sass
+## 0.0.9（2025-01-16）
+- feat: 更新
+## 0.0.8（2024-12-15）
+- fix: 修复vue2 不支持rgba(0,0,0,1%)
+## 0.0.7（2024-12-11）
+- feat: 增加除法
+## 0.0.6（2024-12-04）
+- fix: 除法问题
+## 0.0.5（2024-11-20）
+- feat: 增加flex
+## 0.0.4（2024-11-20）
+- feat: 增加flex
+## 0.0.3（2024-09-30）
+- fix: 由于 vue2 h5 css变量不支持rpx，故转成px
+## 0.0.2（2024-09-23）
+- fix: 修复 vue2 math.div 问题
+## 0.0.1（2024-09-02）
+- init
--- a/uni_modules/lime-style/color/colorPalette.scss
+++ b/uni_modules/lime-style/color/colorPalette.scss
@@ -0,0 +1,236 @@
+// #ifdef VUE3
+@use "sass:math";
+// #endif
+
+
+
+$hueStep: 2;
+$saturationStep1: 0.16;
+$saturationStep2: 0.05;
+$brightnessStep1: 0.05;
+$brightnessStep2: 0.15;
+$lightColorCount: 5;
+$darkColorCount: 4;
+
+$darkColorMap: (
+    (index: 7, opacity: 0.15),
+    (index: 6, opacity: 0.25),
+    (index: 5, opacity: 0.3),
+    (index: 5, opacity: 0.45),
+    (index: 5, opacity: 0.65),
+    (index: 5, opacity: 0.85),
+    (index: 4, opacity: 0.9),
+    (index: 3, opacity: 0.95),
+    (index: 2, opacity: 0.97),
+    (index: 1, opacity: 0.98)
+);
+
+@function div($dividend, $divisor) {
+	// #ifdef VUE3
+	@return math.div($dividend, $divisor);
+	// #endif
+	// #ifndef VUE3
+	@return $dividend / $divisor;
+	// #endif
+}
+
+// 求一个数的n次幂
+@function pow($number, $n) {
+	$ret: 1;
+	@if $n >= 0 {
+		@for $i from 1 through $n {
+			$ret: $ret * $number;
+		}
+		} @else {
+			@for $i from $n to 0 {
+				$ret: $ret / $number;
+			}
+	}
+	@return $ret;
+}
+
+// 浮点数保留小数位
+@function toFixed($float, $digits: 2) {
+	$pow: pow(10, $digits);
+	@return div(round($float * $pow) , $pow);
+}
+
+
+// 根据颜色获取对应的hsv，在tinycolor中首先进行了归一化处理，这里没有
+// 返回的结果h是0~360，代表的是色相的角度， sv的范围0-1
+@function rbgToHsv($color) {
+	$r: red($color);
+	$g: green($color);
+	$b: blue($color);
+	$max: max($r, $g, $b);
+	$min: min($r, $g, $b);
+	$diff: $max - $min;
+	$h: 0;
+	
+	@if $max == $min {
+		$h: 0
+	} @else if $max == $r {
+		$h: div(60 * ($g - $b) , $diff) + if($g >= $b, 0, 360);
+	} @else if $max == $g {
+		$h: 60 *  div($b - $r , $diff) + 120 //($b - $r) / $diff + 120;
+	} @else if $max == $b{
+		$h: div(60 * ($r - $g) , $diff)  + 240;
+	}
+	
+	$s: if($max == 0, 0, div($diff , $max));
+	$v: div($max , 255);
+	
+	@return $h, $s, $v;
+}
+// hsv转化成rgb，借鉴了tinycolor的做法，避免通过$th的值判断来获取对应的rgb的取值
+// $t1~4的计算目前不清楚为什么这样做
+@function hsvTorgb($h, $s, $v) {
+	// $th: floor(div($h , 60));
+	// $t1: div($h , 60) - $th;
+	// $t2: $v * (1 - $s);
+	// $t3: $v * (1 - $t1 * $s);
+	// $t4: $v * (1 - (1 - $t1) * $s);
+	// $i: $th + 1;
+	// $r: nth(($v, $t3, $t2, $t2, $t4, $v), $i);
+	// $g: nth(($t4, $v, $v, $t3, $t2, $t2), $i);
+	// $b: nth(($t2, $t2, $t4, $v, $v, $t3), $i);
+	
+	// @return rgb($r * 255, $g * 255, $b * 255);
+	$h: $h % 360;
+	
+	// 2. 计算色相区域 (0~5)，对应6个60度区间
+	$th: floor(div($h, 60)) % 6; // 强制th在0~5之间
+	
+	// 3. 计算中间变量
+	$t1: div($h, 60) - $th;
+	$t2: $v * (1 - $s);
+	$t3: $v * (1 - $t1 * $s);
+	$t4: $v * (1 - (1 - $t1) * $s);
+	
+	// 4. 根据色相区域选择RGB分量
+	$i: $th + 1; // 索引范围锁定为1~6
+	
+	// 定义各区域对应的RGB系数
+	$r-values: ($v, $t3, $t2, $t2, $t4, $v);
+	$g-values: ($t4, $v, $v, $t3, $t2, $t2);
+	$b-values: ($t2, $t2, $t4, $v, $v, $t3);
+	
+	// 5. 获取RGB分量并转换为0~255整数
+	$r: nth($r-values, $i) * 255;
+	$g: nth($g-values, $i) * 255;
+	$b: nth($b-values, $i) * 255;
+	
+	// 6. 返回RGB颜色值
+	@return rgb(round($r), round($g), round($b));
+}
+
+//转换色相
+@function getHue($h, $i, $isLight) {
+	$hue: null;
+	@if $h >= 60 and $h <= 240 {
+		$hue: if($isLight, $h - $hueStep * $i, $h + $hueStep * $i);
+	} @else {
+		$hue: if($isLight, $h + $hueStep * $i, $h - $hueStep * $i);
+	}
+	
+	$hue: ($hue + 360) % 360;
+	
+	@return round($hue);
+}
+
+// 转换饱和度
+@function getSaturation($s, $i, $isLight) {
+	$saturation: null;
+	@if $isLight {
+		$saturation: $s - $saturationStep1 * $i;
+	} @else if $i == $darkColorCount {
+		$saturation: $s + $saturationStep1;
+	} @else {
+		$saturation: $s + $saturationStep2 * $i;
+	}
+		$saturation: min($saturation, 1);
+
+	@if $isLight and $i == $lightColorCount and $saturation > 0.1 {
+		$saturation: 0.1;
+	}
+	
+	$saturation: max($saturation, 0.06);
+	
+	@return toFixed($saturation, 2);
+}
+
+// 转换明度
+@function getValue($v, $i, $isLight) {
+	$value: min(
+		if(
+			$isLight, 
+			$v + $brightnessStep1 * $i, 
+			$v - $brightnessStep2 * $i
+		), 
+	1);
+	
+	@return toFixed($value, 2);
+}
+
+
+@function mix($rgb1, $rgb2, $amount){
+	$p: $amount;
+	$r: (red($rgb2) - red($rgb1)) * $p + red($rgb1);
+	$g: (green($rgb2) - green($rgb1)) * $p + green($rgb1);
+	$b: (blue($rgb2) - blue($rgb1)) * $p + blue($rgb1);
+	
+	@return rgb($r, $g, $b)
+}
+
+// 根据颜色和对应的色板位置，计算出对应的色板颜色
+@function genColor($color, $index, $theme: 'default' , $bgColor: #141414) {
+	$isLight: if($index <= 6, true, false);
+	$hsv: rbgToHsv($color);
+	//这里将i转换成以主色为中心，两侧的i值逐渐增大
+	$i: if($isLight, $lightColorCount + 1 - $index, $index - $lightColorCount - 1);
+
+	@if $theme == 'dark' {
+		$item: nth($darkColorMap, $index);
+		$index2: map-get($item, index);
+		$opacity: map-get($item, opacity);
+
+		$rgb: genColor($color, $index2 + 1);
+
+		// @return $rgb;
+		@return mix(
+				$bgColor,
+				$rgb,
+				$opacity
+			)
+	}
+
+	@return hsvTorgb(
+		getHue(nth($hsv, 1), $i, $isLight),
+		getSaturation(nth($hsv, 2), $i, $isLight),
+		getValue(nth($hsv, 3), $i, $isLight)
+	);
+}
+
+@function getSolidColor($base-color, $brightness) {
+  // 验证输入参数
+  @if type-of($base-color) != 'color' {
+    @error "Expected color for $base-color, but got #{type-of($base-color)}: #{$base-color}";
+  }
+  
+  @if type-of($brightness) != 'number' {
+    @error "Expected number for $brightness, but got #{type-of($brightness)}: #{$brightness}";
+  }
+  
+  // 获取基础颜色的HSL值
+  $hue: hue($base-color);
+  $saturation: saturation($base-color);
+  $lightness: lightness($base-color);
+  
+  // 计算新的亮度值 (限制在0-100%范围内)
+  $new-lightness: clamp(0%, $lightness + $brightness, 100%);
+  
+  // 使用HSL函数创建新颜色
+  $new-color: hsl($hue, $saturation, $new-lightness);
+  
+  @return $new-color;
+}
--- a/uni_modules/lime-style/color/colors.scss
+++ b/uni_modules/lime-style/color/colors.scss
@@ -0,0 +1,19 @@
+// 品牌色-主色
+$primary-color: 	#3283ff!default;
+// 错误色
+$error-color: 		#FF4D4F!default;
+// 警告色
+$warning-color: 	#ffb400!default;// #FF7D00!default;
+// 信息色
+$info-color: 		$primary-color!default;
+// 成功色
+$success-color: 	#34c471!default;
+
+$blue: 				#3283ff!default;
+$red: 				#FF4D4F!default;
+$orange: 			#ffb400!default;
+// $yellow: #FADC19!default;
+$yellow: 			#fcd53f!default;
+$green: 			#34c471 !default;
+$white: 			#fff;
+$black: 			#000;
--- a/uni_modules/lime-style/functions.scss
+++ b/uni_modules/lime-style/functions.scss
@@ -0,0 +1,11 @@
+// #ifdef VUE3 || VUE2 && uniVersion >= 4.56
+@use "sass:math";
+// #endif
+@function divide($dividend, $divisor) {
+	// #ifdef VUE3 || VUE2 && uniVersion >= 4.56
+	@return math.div($dividend, $divisor);
+	// #endif
+	// #ifndef VUE3 || VUE2 && uniVersion >= 4.56
+	@return $dividend / $divisor;
+	// #endif
+}
--- a/uni_modules/lime-style/hairline.uts
+++ b/uni_modules/lime-style/hairline.uts
@@ -0,0 +1,153 @@
+import { unitConvert } from '@/uni_modules/lime-shared/unitConvert';
+
+export type DrawBorderOptions = {
+	direction : 'top' | 'bottom' | 'left' | 'right';
+	color ?: string;
+	colorKey ?: string; // 在dom中获取颜色
+	startOffsetKey?: string; // 在dom哪个属性获取
+	startOffset ?: number | string; // 支持数字或 CSS 字符串（如 '10px'）
+	endOffset ?: number | string;
+	lineWidth ?: number;
+	watchSize ?: boolean; // 是否监听尺寸变化自动重绘
+	immediate ?: boolean; // 是否立即绘制
+	bordered?: boolean;
+	
+}
+
+export type UseDrawBorderReturn = {
+	color: Ref<string>,
+	renderBorder: () => void,
+	clearBorder: () => void;
+	dispose: () => void,
+}
+/**
+ * 在元素上绘制边框，并支持动态监听尺寸变化
+ * @param elementRef 目标元素的 Ref
+ * @param options 边框配置
+ * @returns 清理函数（用于卸载时取消监听）
+ */
+export function useDrawBorder(
+	elementRef : Ref<UniElement | null>,
+	options : DrawBorderOptions
+):UseDrawBorderReturn {
+	let resizeObserver : UniResizeObserver | null = null;
+	const { watchSize = true, immediate = true } = options;
+	const defalutColor = '#e7e7e7'
+	const color = ref(options.color ?? defalutColor)
+	const bordered = ref(options.bordered ?? true)
+	let computedStartOffset = 0
+	let computedEndOffset = 0
+	
+	// 绘制边框
+	const renderBorder = () => {
+		if (elementRef.value == null) return;
+		const ctx = elementRef.value!.getDrawableContext();
+		if (ctx == null) return;
+
+		const rect = elementRef.value!.getBoundingClientRect();
+		ctx.reset();
+
+		const {
+			direction,
+			startOffset = 0,
+			endOffset = 0,
+			lineWidth = 0.5,
+			colorKey,
+			startOffsetKey,
+		} = options;
+		 
+		
+		// 转换单位（如果是字符串，如 '10px'）
+		if(computedStartOffset == 0) {
+			computedStartOffset = unitConvert((startOffsetKey != null ? elementRef.value?.style.getPropertyValue(startOffsetKey!) ?? startOffset : startOffset))
+		}
+		if(computedEndOffset == 0) {
+			computedEndOffset = unitConvert(endOffset)
+		}
+		
+		if(color.value == defalutColor && colorKey != null) {
+			color.value = elementRef.value?.style.getPropertyValue(colorKey!) ?? defalutColor
+			// if(color.value.length == 0) {
+			// 	color.value = defalutColor
+			// }
+		}
+		ctx.strokeStyle = color.value;
+		ctx.lineWidth = lineWidth;
+
+		// 根据方向计算坐标
+		switch (direction) {
+			case 'top':
+				ctx.moveTo(computedStartOffset, 0);
+				ctx.lineTo(rect.width - computedEndOffset, 0);
+				break;
+			case 'bottom':
+				ctx.moveTo(computedStartOffset, rect.height - 0.25);
+				ctx.lineTo(rect.width - computedEndOffset, rect.height - 0.25);
+				break;
+			case 'left':
+				ctx.moveTo(0, computedStartOffset);
+				ctx.lineTo(0, rect.height - computedEndOffset);
+				break;
+			case 'right':
+				ctx.moveTo(rect.width, computedStartOffset);
+				ctx.lineTo(rect.width, rect.height - computedEndOffset);
+				break;
+		}
+
+		ctx.stroke();
+		ctx.update();
+	};
+	
+	const setupResizeObserver = () => {
+		// 监听尺寸变化（如果启用）
+		if (watchSize) {
+			if (resizeObserver == null) {
+				resizeObserver = new UniResizeObserver((entries : Array<UniResizeObserverEntry>) => {
+					if(!bordered.value) return
+					renderBorder();
+				})
+			}
+			watchEffect(()=>{
+				if (elementRef.value != null) {
+					resizeObserver!.observe(elementRef.value!);
+				}
+			})
+		}
+	}
+	
+
+	// 清理函数（卸载时取消监听）
+	const dispose = () => {
+		if (resizeObserver != null && elementRef.value != null) {
+			// resizeObserver.unobserve(elementRef.value!);
+			resizeObserver!.disconnect();
+			resizeObserver = null;
+		}
+	};
+	
+	const clearBorder = ()=> {
+		if (elementRef.value == null) return;
+		const ctx = elementRef.value!.getDrawableContext();
+		if (ctx == null) return;
+		bordered.value = false
+		ctx.reset()
+		ctx.update()
+	}
+	
+	setupResizeObserver()
+	// 初始绘制
+	if(immediate) {
+		renderBorder();
+	}
+	
+	
+	
+	
+	return {
+		renderBorder, // 手动触发绘制
+		dispose,    // 清理监听
+		clearBorder,
+		color
+	} as UseDrawBorderReturn
+	
+}
--- a/uni_modules/lime-style/index.scss
+++ b/uni_modules/lime-style/index.scss
@@ -0,0 +1,7 @@
+@import './theme/default';
+@import './var';
+// @import './mixins/ellipsis';
+// @import './mixins/hairline';
+@import './mixins/create';
+@import './mixins/directionalProperty';
+// @import './mixins/useTheme';
--- a/uni_modules/lime-style/mixins/bem.scss
+++ b/uni_modules/lime-style/mixins/bem.scss
--- a/uni_modules/lime-style/mixins/create.scss
+++ b/uni_modules/lime-style/mixins/create.scss
@@ -0,0 +1,336 @@
+// #ifdef VUE3 || VUE2 && uniVersion >= 4.56
+@use "sass:math";
+// #endif
+
+$use-css-var: false !default; 
+
+@function div($dividend, $divisor) {
+	// #ifdef VUE3 || VUE2 && uniVersion >= 4.56
+	@return math.div($dividend, $divisor);
+	// #endif
+	// #ifndef VUE3 || VUE2 && uniVersion >= 4.56
+	@return $dividend / $divisor;
+	// #endif
+}
+
+// @function to-number($string) {
+//    $result: 0;
+//    $is-negative: str-slice($string, 1, 1) == '-';
+//    $length: str-length($string);
+   
+//    @if $is-negative {
+//        $string: str-slice($string, 2);
+//        $length: $length - 1;
+//     }
+	
+// 	$decimal-index: str-index($string, '.');
+	
+// 	@if $decimal-index {
+// 		$decimal-str: str-slice($string, $decimal-index + 1);
+// 		$decimal-length: str-length($decimal-str);
+// 		$length: $length - $decimal-length - 1;
+// 		$string: str-slice($string, 1, $decimal-index - 1);
+		
+// 		$result: to-number($decimal-str) * pow(10, $decimal-length * -1);
+// 	}
+//    $numbers:(
+// 	'0': 0,
+// 	'1': 1,
+// 	'2': 2,
+// 	'3': 3,
+// 	'4': 4,
+// 	'5': 5,
+// 	'6': 6,
+// 	'7': 7,
+// 	'8': 8,
+// 	'9': 9,
+//    );
+	
+// 	@for $i from 1 through $length {
+// 		$key: str-slice($string, $i, $i);
+// 		$number: map-get($numbers, $key);
+// 		$digit: if($number == 0, 0, if($length - $i > 0, pow(10, $length - $i), 0));
+// 		$result: $result + $digit * $number + if($length - $i == 0, $number, 0);
+// 	}
+// 	@return if($is-negative, $result * -1, $result) ;
+// }
+
+// // 由于vue2 h5和app不支持动态rpx 故转成px
+// @function rpx-to-px($rpx-string) {
+// 	@if type-of($rpx-string) == list {
+// 		$new-list: ();
+// 		@each $value in $rpx-string {
+// 			$v: $value + '';
+// 			$start: str-index($v, 'rpx');
+// 			@if $start {
+// 				 $new-list: append($new-list, rpx-to-px($v));
+// 			} @else {
+// 				$new-list: append($new-list, $value);
+// 			}
+// 		}
+// 		@return $new-list;
+// 	}
+	
+// 	@if type-of($rpx-string) == number and comparable($rpx-string, 1rpx) {
+// 		@return rpx-to-px($rpx-string + '');
+// 	}
+	
+// 	@if type-of($rpx-string) != string {
+// 	   @return $rpx-string;
+// 	}
+// 	$start: str-index($rpx-string, 'rpx');
+// 	$number-map: (
+// 		'-': 1,
+// 		'0': 1,
+// 		'1': 1,
+// 		'2': 1,
+// 		'3': 1,
+// 		'4': 1,
+// 		'5': 1,
+// 		'6': 1,
+// 		'7': 1,
+// 		'8': 1,
+// 		'9': 1,
+// 	   );
+// 	@if not $start {
+// 	  @return $rpx-string;
+// 	}
+// 	$result: '';
+// 	@while $start {
+// 		// 获取 'rpx' 前的数字
+// 		$number-end: $start - 1;
+// 		$number-start: $number-end;
+// 		@while $number-start > 0 and map-get($number-map, str-slice($rpx-string, $number-start, $number-start)) ==1 {
+// 			$number-start: $number-start - 1;
+// 		}
+// 		// 提取数字部分
+// 		$number: to-number(str-slice($rpx-string, $number-start + 1, $number-end));
+		
+// 		// 转换 'rpx' 到 'px'
+// 		// $px-value: ($number / 2) + 'px';
+// 		$px-value: div($number, 2) + 'px';
+// 		$result: $result + str-slice($rpx-string, 0, $number-start) + $px-value;
+		
+// 		// 更新字符串和起始位置
+// 		$rpx-string: str-slice($rpx-string, $start + 3);
+// 		$start: str-index($rpx-string, 'rpx');
+// 	}
+	
+// 	@return $result + $rpx-string;
+// }
+
+@function rpx-to-px($value) {
+  // 递归处理列表
+  @if type-of($value) == list {
+    $new-list: ();
+    @each $item in $value {
+      $new-list: append($new-list, rpx-to-px($item));
+    }
+    @return $new-list;
+  }
+  
+  // 处理数字类型 - 带 rpx 单位
+  @if type-of($value) == number and unit($value) == 'rpx' {
+    // 安全处理单位转换
+    @return calc-strip-unit($value) * 0.5 * 1px;
+  }
+  
+  // 处理字符串类型
+  @if type-of($value) == string {
+    $string: $value;
+    $rpx-index: str-index($string, 'rpx');
+    
+    // 如果字符串以数字开头并以 rpx 结尾，转换为数值
+    @if $rpx-index == (str-length($string) - 2) {
+      $num-str: str-slice($string, 1, $rpx-index - 1);
+      $number: to-number($num-str);
+      @if type-of($number) == number {
+        @return $number * 0.5 * 1px;
+      }
+    }
+    
+    // 字符串中可能包含多个 rpx 值
+    @if $rpx-index {
+      $result: '';
+      @while $rpx-index {
+        // 找到数字部分起点
+        $num-end: $rpx-index - 1;
+        $num-start: $num-end;
+        @while $num-start > 0 and is-numeric-char(str-slice($string, $num-start, $num-start)) {
+          $num-start: $num-start - 1;
+        }
+        
+        // 提取数字部分
+        $num-str: str-slice($string, $num-start + 1, $num-end);
+        $number: to-number($num-str);
+        
+        // 转换为 px 数值
+        $px-value: $number * 0.5 * 1px;
+        
+        // 构建结果字符串
+        $result: $result + str-slice($string, 1, $num_start) + '#{$px_value}';
+        
+        // 更新剩余字符串
+        $string: str-slice($string, $rpx-index + 3);
+        $rpx-index: str-index($string, 'rpx');
+      }
+      @return #{$result + $string};
+    }
+  }
+  
+  // 其他类型直接返回
+  @return $value;
+}
+
+// 辅助函数：安全去除单位并返回数值
+@function calc-strip-unit($number) {
+  @if type-of($number) == number {
+    $unit: unit($number);
+    $units: ("px": 1px, "rpx": 1rpx, "em": 1em, "rem": 1rem, "%": 1%);
+    
+    @if map-has-key($units, $unit) {
+      @return div($number , map-get($units, $unit));
+    }
+    
+    @if unitless($number) {
+      @return $number;
+    }
+  }
+  
+  @return $number;
+}
+
+// 辅助函数：检查字符是否为数字
+@function is-numeric-char($char) {
+  $chars: "-.0123456789";
+  @return str-index($chars, $char) != null;
+}
+
+// 辅助函数：将字符串安全转换为数字
+@function to-number($string) {
+  // 如果输入已经是数字，直接返回
+  @if type-of($string) == number {
+    @return $string;
+  }
+  
+  // 处理带符号的数字
+  $is-negative: false;
+  $numeric: "";
+  $found-number: false;
+  
+  // 提取所有数字字符
+  @for $i from 1 through str-length($string) {
+    $char: str-slice($string, $i, $i);
+    
+    @if $char == "-" and $numeric == "" {
+      $is-negative: true;
+    }
+    @else if $char == "." and str-index($numeric, ".") == null {
+      $numeric: $numeric + $char;
+    }
+    @else if $char >= "0" and $char <= "9" {
+      $numeric: $numeric + $char;
+      $found-number: true;
+    }
+  }
+  
+  // 如果有实际数字内容，转换为数值
+  @if $found-number {
+    $result: 0;
+    $decimal-index: str-index($numeric, ".");
+    
+    @if $decimal-index {
+      // 处理带小数的数字
+      $integer-part: str-slice($numeric, 1, $decimal-index - 1);
+      $decimal-part: str-slice($numeric, $decimal-index + 1);
+      
+      @if $integer-part == "" { $integer-part: "0"; }
+      
+      $result: to-integer($integer-part);
+      
+      $divisor: 1;
+      @for $i from 1 through str-length($decimal-part) {
+        $divisor: $divisor * 10;
+        $digit: to-integer(str-slice($decimal-part, $i, $i));
+        $result: $result + ($digit / $divisor);
+      }
+    } @else {
+      // 处理整数
+      $result: to-integer($numeric);
+    }
+    
+    @return if($is-negative, -$result, $result);
+  }
+  
+  // 无法转换则返回原字符串
+  @return $string;
+}
+
+// 辅助函数：将整数字符串转换为数字
+@function to-integer($string) {
+  $result: 0;
+  
+  @for $i from 1 through str-length($string) {
+    $char: str-slice($string, $i, $i);
+    $result: $result * 10 + (str-index("0123456789", $char) - 1);
+  }
+  
+  @return $result;
+}
+
+@function create-var($name, $values...) {
+	// 将不定数量的参数转换为列表
+	// $use-css-var: false; 
+	// $use-css-var: nth($values, -1) == false;
+	$value-list: $values;
+	$css-value: null;
+	
+	// @if type-of(nth($values, -1)) == bool {
+	// 	$use-css-var: nth($values, -1); // 获取布尔值
+	// 	// 移除最后一个元素（布尔值）
+	// 	$value-list: ();
+	// 	@for $i from 1 through (length($values) - 1) {
+	// 	    $value-list: append($value-list, nth($values, $i));
+	// 	}
+	// }
+	
+	@if length($value-list) == 0 {
+		// @warn "The list must have at least 1 values.";
+		@return '';
+	} @else {
+		// 初始化CSS变量的值为列表中的第一个值
+		/* #ifndef VUE2 */
+		$css-value: nth($value-list, 1);
+		/* #endif */
+		/* #ifdef VUE2 */
+		$css-value: rpx-to-px(nth($value-list, 1));
+		/* #endif */
+	}
+	// 检查列表长度是否大于等于2
+	@if length($value-list) >= 2 {
+	    // 使用@for循环遍历剩余的值，并构建CSS变量的完整值
+	    @for $i from 2 through length($value-list) {
+			/* #ifndef VUE2 */
+			$css-value: $css-value + ", " + nth($value-list, $i);
+			/* #endif */
+			/* #ifdef VUE2 */
+			$css-value: $css-value + ", " + rpx-to-px(nth($value-list, $i));
+			/* #endif */
+	    }
+	}
+	
+	/* #ifdef UNI-APP-X && APP && uniVersion >= 4.71*/
+	@if $use-css-var {
+		@return var(--l-#{$name}, #{$css-value});
+	} @else {
+		@return $css-value;
+	}
+	/* #endif */
+	
+	/* #ifndef APP-NVUE || APP-ANDROID || APP-IOS || APP-HARMONY */
+	@return var(--l-#{$name}, #{$css-value});
+	/* #endif */
+	/* #ifdef APP-NVUE || APP-ANDROID || APP-IOS || APP-HARMONY  */
+	@return $css-value;
+	/* #endif */
+}
--- a/uni_modules/lime-style/mixins/directionalProperty.scss
+++ b/uni_modules/lime-style/mixins/directionalProperty.scss
@@ -0,0 +1,401 @@
+// =======================================================================
+// 方向属性核心生成器 (支持所有方向相关属性)
+// =======================================================================
+@mixin directional-property(
+  $property, 
+  $values, 
+  $exclude: ()
+) {
+  // 属性类型分组
+  $group-standard: padding, margin;                                 // 标准方向属性
+  $group-radius: border-radius;                                      // 圆角属性
+  $group-border: border, border-top, border-right, border-bottom, border-left; // 边框属性
+  $group-outline: outline, outline-top, outline-right, outline-bottom, outline-left; // 轮廓属性
+  $group-position: inset, inset-block, inset-inline, top, right, bottom, left; // 定位属性
+  $group-size: block-size, inline-size;                             // 块/行尺寸属性
+  
+  // 定义每个方向的值
+  $top: null;
+  $right: null;
+  $bottom: null;
+  $left: null;
+  
+  // 确定处理模式
+  $is-standard: index($group-standard, $property);
+  $is-radius: index($group-radius, $property);
+  $is-border: index($group-border, $property);
+  $is-outline: index($group-outline, $property);
+  $is-position: index($group-position, $property);
+  $is-size: index($group-size, $property);
+  
+  // =====================================================================
+  // 解析输入值 - 根据属性类型处理
+  // =====================================================================
+  @if type-of($values) == 'list' {
+    $length: length($values);
+    
+    // 单个值 - 所有方向相同值
+    @if $length == 1 {
+      $top: nth($values, 1);
+      $right: nth($values, 1);
+      $bottom: nth($values, 1);
+      $left: nth($values, 1);
+    }
+    
+    // 两个值
+    @else if $length == 2 {
+      // 特殊处理：border-radius
+      @if $is-radius {
+        $top: nth($values, 1);
+        $right: nth($values, 2);
+        $bottom: nth($values, 1);
+        $left: nth($values, 2);
+      }
+      // 标准处理：上下 | 左右
+      @else if $is-standard or $is-border or $is-outline or $is-position {
+        $top: nth($values, 1);
+        $bottom: nth($values, 1);
+        $right: nth($values, 2);
+        $left: nth($values, 2);
+      }
+      // 块/行尺寸处理
+      @else if $is-size {
+        $top: nth($values, 1);
+        $right: nth($values, 2);
+      }
+    }
+    
+    // 三个值
+    @else if $length == 3 {
+      // border-radius特殊处理
+      @if $is-radius {
+        $top: nth($values, 1);
+        $right: nth($values, 2);
+        $bottom: nth($values, 3);
+        $left: nth($values, 2);
+      }
+      // 标准处理
+      @else if $is-standard or $is-border or $is-outline or $is-position {
+        $top: nth($values, 1);
+        $right: nth($values, 2);
+        $left: nth($values, 2);
+        $bottom: nth($values, 3);
+      }
+    }
+    
+    // 四个值
+    @else if $length == 4 {
+      $top: nth($values, 1);
+      $right: nth($values, 2);
+      $bottom: nth($values, 3);
+      $left: nth($values, 4);
+    }
+  }
+  @else {
+    // 单个值传递
+    $top: $values;
+    $right: $values;
+    $bottom: $values;
+    $left: $values;
+  }
+
+  // =====================================================================
+  // 生成CSS属性（排除指定方向）
+  // =====================================================================
+  
+  // 1. 圆角处理
+  @if $is-radius {
+    @if not index($exclude, top-left) and $top != null {
+      border-top-left-radius: $top;
+    }
+    @if not index($exclude, top-right) and $right != null {
+      border-top-right-radius: $right;
+    }
+    @if not index($exclude, bottom-right) and $bottom != null {
+      border-bottom-right-radius: $bottom;
+    }
+    @if not index($exclude, bottom-left) and $left != null {
+      border-bottom-left-radius: $left;
+    }
+  }
+  
+  // 2. 标准方向处理 (padding, margin)
+  @else if $is-standard {
+    @if not index($exclude, top) and $top != null {
+      #{$property}-top: $top;
+    }
+    @if not index($exclude, right) and $right != null {
+      #{$property}-right: $right;
+    }
+    @if not index($exclude, bottom) and $bottom != null {
+      #{$property}-bottom: $bottom;
+    }
+    @if not index($exclude, left) and $left != null {
+      #{$property}-left: $left;
+    }
+  }
+  
+  // 3. 边框处理
+  @else if $is-border {
+    // 完整边框设置
+    @if $property == 'border' {
+      @if not index($exclude, top) and $top != null {
+        border-top-width: nth($values, 1);
+        border-top-style: nth($values, 2);
+        border-top-color: nth($values, 3);
+      }
+      @if not index($exclude, right) and $right != null {
+       border-right-width: nth($values, 1);
+       border-right-style: nth($values, 2);
+       border-right-color: nth($values, 3);
+      }
+      @if not index($exclude, bottom) and $bottom != null {
+        // border-bottom: $bottom;
+		border-bottom-width: nth($values, 1);
+		border-bottom-style: nth($values, 2);
+		border-bottom-color: nth($values, 3);
+      }
+      @if not index($exclude, left) and $left != null {
+        // border-left: $left;
+		border-left-width: nth($values, 1);
+		border-left-style: nth($values, 2);
+		border-left-color: nth($values, 3);
+      }
+    }
+    // 单边边框
+    @else {
+      $direction: str-slice($property, 8); // 提取方向
+      @if not index($exclude, $direction) {
+        // #{$property}: $top;
+		#{$property}-width: nth($values, 1);
+		#{$property}-style: nth($values, 2);
+		#{$property}-color: nth($values, 3);
+      }
+    }
+  }
+  
+  // 4. 轮廓处理
+  @else if $is-outline {
+    // 完整轮廓设置
+    @if $property == 'outline' {
+      @if not index($exclude, top) and $top != null {
+        outline-top: $top;
+      }
+      @if not index($exclude, right) and $right != null {
+        outline-right: $right;
+      }
+      @if not index($exclude, bottom) and $bottom != null {
+        outline-bottom: $bottom;
+      }
+      @if not index($exclude, left) and $left != null {
+        outline-left: $left;
+      }
+    }
+    // 单边轮廓
+    @else {
+      $direction: str-slice($property, 8); // 提取方向
+      @if not index($exclude, $direction) {
+        #{$property}: $top;
+      }
+    }
+  }
+  
+  // 5. 定位处理
+  @else if $is-position {
+    // inset简写处理
+    @if $property == 'inset' {
+      @if not index($exclude, top) and $top != null {
+        top: $top;
+      }
+      @if not index($exclude, right) and $right != null {
+        right: $right;
+      }
+      @if not index($exclude, bottom) and $bottom != null {
+        bottom: $bottom;
+      }
+      @if not index($exclude, left) and $left != null {
+        left: $left;
+      }
+    }
+    // inset-block 和 inset-inline
+    @else if $property == 'inset-block' {
+      @if not index($exclude, top) and $top != null {
+        top: $top;
+      }
+      @if not index($exclude, bottom) and $bottom != null {
+        bottom: $bottom;
+      }
+    }
+    @else if $property == 'inset-inline' {
+      @if not index($exclude, left) and $left != null {
+        left: $left;
+      }
+      @if not index($exclude, right) and $right != null {
+        right: $right;
+      }
+    }
+    // 单一定位
+    @else {
+      @if not index($exclude, $property) {
+        #{$property}: $top;
+      }
+    }
+  }
+  
+  // 6. 尺寸处理
+  @else if $is-size {
+    @if $property == 'block-size' {
+      @if not index($exclude, top) and $top != null {
+        height: $top;
+      }
+    }
+    @else if $property == 'inline-size' {
+      @if not index($exclude, left) and $left != null {
+        width: $left;
+      }
+    }
+  }
+}
+
+// =======================================================================
+// 快捷混合宏：标准属性
+// =======================================================================
+@mixin padding($values, $exclude: ()) {
+  @include directional-property(padding, $values, $exclude);
+}
+
+@mixin margin($values, $exclude: ()) {
+  @include directional-property(margin, $values, $exclude);
+}
+
+@mixin border-radius($values, $exclude: ()) {
+  @include directional-property(border-radius, $values, $exclude);
+}
+
+// =======================================================================
+// 快捷混合宏：边框属性
+// =======================================================================
+@mixin border($value, $exclude: ()) {
+  @include directional-property(border, $value, $exclude);
+}
+
+@mixin border-top($value, $exclude: ()) {
+  @include directional-property(border-top, $value, $exclude);
+}
+
+@mixin border-right($value, $exclude: ()) {
+  @include directional-property(border-right, $value, $exclude);
+}
+
+@mixin border-bottom($value, $exclude: ()) {
+  @include directional-property(border-bottom, $value, $exclude);
+}
+
+@mixin border-left($value, $exclude: ()) {
+  @include directional-property(border-left, $value, $exclude);
+}
+
+// =======================================================================
+// 快捷混合宏：轮廓属性
+// =======================================================================
+@mixin outline($value, $exclude: ()) {
+  @include directional-property(outline, $value, $exclude);
+}
+
+@mixin outline-top($value, $exclude: ()) {
+  @include directional-property(outline-top, $value, $exclude);
+}
+
+@mixin outline-right($value, $exclude: ()) {
+  @include directional-property(outline-right, $value, $exclude);
+}
+
+@mixin outline-bottom($value, $exclude: ()) {
+  @include directional-property(outline-bottom, $value, $exclude);
+}
+
+@mixin outline-left($value, $exclude: ()) {
+  @include directional-property(outline-left, $value, $exclude);
+}
+
+// =======================================================================
+// 快捷混合宏：定位属性
+// =======================================================================
+@mixin inset($values, $exclude: ()) {
+  @include directional-property(inset, $values, $exclude);
+}
+
+@mixin inset-block($values, $exclude: ()) {
+  @include directional-property(inset-block, $values, $exclude);
+}
+
+@mixin inset-inline($values, $exclude: ()) {
+  @include directional-property(inset-inline, $values, $exclude);
+}
+
+@mixin top($value, $exclude: ()) {
+  @include directional-property(top, $value, $exclude);
+}
+
+@mixin right($value, $exclude: ()) {
+  @include directional-property(right, $value, $exclude);
+}
+
+@mixin bottom($value, $exclude: ()) {
+  @include directional-property(bottom, $value, $exclude);
+}
+
+@mixin left($value, $exclude: ()) {
+  @include directional-property(left, $value, $exclude);
+}
+
+// =======================================================================
+// 快捷混合宏：尺寸属性
+// =======================================================================
+@mixin block-size($value, $exclude: ()) {
+  @include directional-property(block-size, $value, $exclude);
+}
+
+@mixin inline-size($value, $exclude: ()) {
+  @include directional-property(inline-size, $value, $exclude);
+}
+
+// =======================================================================
+// 组合混合宏
+// =======================================================================
+// 带圆角的边框
+@mixin bordered($border-value, $radius-value) {
+  @include border($border-value);
+  @include border-radius($radius-value);
+}
+
+// 绝对定位容器
+@mixin absolute-container($inset: 0) {
+  position: absolute;
+  @include inset($inset);
+}
+
+// 固定定位容器
+@mixin fixed-container($inset: 0) {
+  position: fixed;
+  @include inset($inset);
+}
+
+// =======================================================================
+// 圆角辅助混合宏
+// =======================================================================
+@mixin border-top-radius($value) {
+  @include border-radius($value 0 0, (bottom-right, bottom-left));
+}
+
+@mixin border-right-radius($value) {
+  @include border-radius(0 $value 0 0, (top-left, bottom-left));
+}
+
+@mixin border-bottom-radius($value) {
+  @include border-radius(0 0 $value, (top-right, top-left));
+}
+
+@mixin border-left-radius($value) {
+  @include border-radius(0 0 0 $value, (top-right, bottom-right));
+}
--- a/uni_modules/lime-style/mixins/ellipsis.scss
+++ b/uni_modules/lime-style/mixins/ellipsis.scss
@@ -0,0 +1,22 @@
+@mixin ellipsis {
+	// overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	/* #ifndef APP-ANDROID || APP-IOS || APP-NVUE || APP-HARMONY */ 
+	word-wrap: normal;
+	/* #endif */
+}
+
+
+@mixin ellipsisLn($line) {
+  // overflow: hidden;
+  text-overflow: ellipsis;
+  /* #ifdef APP-ANDROID || APP-IOS || APP-NVUE || APP-HARMONY */
+  lines: $line;
+  /* #endif */
+  /* #ifndef APP-ANDROID || APP-IOS || APP-NVUE || APP-HARMONY */ 
+  -webkit-line-clamp: $line;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  /* #endif */
+}
--- a/uni_modules/lime-style/mixins/flex.scss
+++ b/uni_modules/lime-style/mixins/flex.scss
@@ -0,0 +1,20 @@
+@mixin flex {
+	/* #ifndef UNI-APP-X */
+	display: flex;
+	/* #endif */
+}
+@mixin flex-column {
+	/* #ifndef UNI-APP-X */
+	flex-direction: column;
+	/* #endif */
+}
+@mixin flex-row {
+	flex-direction: row;
+}
+
+@mixin universal {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
--- a/uni_modules/lime-style/mixins/hairline.scss
+++ b/uni_modules/lime-style/mixins/hairline.scss
@@ -0,0 +1,66 @@
+// @import '../theme/default.scss';
+
+@mixin hairline-base {
+	position: absolute;
+	box-sizing: border-box;
+	content: ' ';
+	pointer-events: none;
+	transform-origin: center; /* cover wechat button:after default transforn-origin */
+}
+
+@mixin hairline($color: $border-color-2) {
+	@include hairline-base;
+	top: -50%;
+	right: -50%;
+	bottom: -50%;
+	left: -50%;
+	border: 1px solid $color;
+	transform: scale(.5);
+}
+
+@mixin hairline-top($color: $border-color-1, $left: 0, $right: 0) {
+	@include hairline-base;
+	top: 0;
+	right: $right;
+	left: $left;
+	border-top: 1px solid $color;
+	transform: scaleY(0.5);
+}
+
+@mixin hairline-bottom($color: $border-color-1, $left: 0, $right: 0) {
+	@include hairline-base;
+	right: $right;
+	bottom: 0;
+	left: $left;
+	border-bottom: 1px solid $color;
+	transform: scaleY(0.5);
+}
+
+@mixin hairline-left($color: $border-bolor-1) {
+	@include hairline-base;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	border-left: 1px solid $color;
+	transform: scaleX(.5);
+}
+
+@mixin hairline-right($color: $border-bolor-1) {
+	@include hairline-base;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	border-right: 1px solid $color;
+	transform: scaleX(.5);
+}
+
+// @mixin border {
+// 	/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
+// 	&:after {
+// 		@content;
+// 	}
+// 	/* #endif */
+// 	/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
+// 	@content;
+// 	/* #endif */
+// }
--- a/uni_modules/lime-style/mixins/platform.scss
+++ b/uni_modules/lime-style/mixins/platform.scss
@@ -0,0 +1,17 @@
+/* #ifdef APP-NVUE || APP-ANDROID || APP-IOS || APP-HARMONY */
+$is-app: true;
+/* #endif */
+/* #ifndef APP-NVUE || APP-ANDROID || APP-IOS || APP-HARMONY */
+$is-app: false;
+/* #endif */
+
+@mixin is-app {
+	@if $is-app {
+		@content;
+	} 
+}
+@mixin not-app {
+	@if not($is-app) {
+		@content;
+	} 
+}
--- a/uni_modules/lime-style/mixins/useTheme.scss
+++ b/uni_modules/lime-style/mixins/useTheme.scss
@@ -0,0 +1,60 @@
+$limeThemes: light, dark;
+$theme: light;
+
+@mixin use-theme($mode: null) {
+	@if $mode != null {
+		/* #ifndef APP-ANDROID || APP-IOS || APP-NVUE || APP-HARMONY */
+		@media (prefers-color-scheme: $mode) {
+			@content;
+		}
+		/* #endif */
+		/* #ifdef APP-ANDROID || APP-IOS || APP-NVUE || APP-HARMONY */
+		&.#{$mode} {
+			@content;
+		}
+		/* #endif */
+	} @else {
+		@each $mode in $limeThemes {
+			$theme: $mode !global;
+			/* #ifndef APP-ANDROID || APP-IOS || APP-NVUE || APP-HARMONY */
+			@media (prefers-color-scheme: $mode) {
+				@content;
+			}
+			/* #endif */
+			
+			/* #ifdef APP-ANDROID || APP-IOS || APP-NVUE || APP-HARMONY */
+			&.#{$mode} {
+				@content;
+			}
+			/* #endif */
+		}
+	}
+	
+}
+
+@mixin theme-dark {
+	/* #ifndef APP-ANDROID || APP-IOS || APP-NVUE || APP-HARMONY */
+	@media (prefers-color-scheme: dark) {
+		page {
+			@content;
+		}
+	}
+	/* #endif */
+	/* #ifdef APP-ANDROID || APP-IOS || APP-NVUE || APP-HARMONY */
+	.dark {
+		@content;
+	}
+	/* #endif */
+	/* #ifdef WEB */
+	:root[data-lime-theme='dark'] page {
+		@content;
+	}
+	/* #endif */
+}
+
+
+@function get-var($themes, $key) {
+	@return map-get($themes, $key)
+}
+
+
--- a/uni_modules/lime-style/mixins/utilities.scss
+++ b/uni_modules/lime-style/mixins/utilities.scss
@@ -0,0 +1,7 @@
+@import './flex';
+
+@mixin resize-none {
+	/* #ifndef APP-IOS || APP-ANDROID || APP-HARMONY */
+	resize: none;
+	/* #endif */
+}
--- a/uni_modules/lime-style/package.json
+++ b/uni_modules/lime-style/package.json
@@ -0,0 +1,103 @@
+{
+  "id": "lime-style",
+  "displayName": "lime-style",
+  "version": "0.1.5",
+  "description": "lime-style",
+  "keywords": [
+    "lime-style"
+],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0",
+    "uni-app": "^4.44",
+    "uni-app-x": "^4.61"
+  },
+  "dcloudext": {
+    "type": "sdk-js",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "",
+    "darkmode": "x",
+    "i18n": "x",
+    "widescreen": "x"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "√",
+        "aliyun": "√",
+        "alipay": "√"
+      },
+      "client": {
+        "uni-app": {
+          "vue": {
+            "vue2": "√",
+            "vue3": "√"
+          },
+          "web": {
+            "safari": "√",
+            "chrome": "√"
+          },
+          "app": {
+            "vue": "√",
+            "nvue": "√",
+            "android": {
+                "extVersion": "",
+                "minVersion": "22"
+            },
+            "ios": "√",
+            "harmony": "√"
+          },
+          "mp": {
+            "weixin": "√",
+            "alipay": "√",
+            "toutiao": "√",
+            "baidu": "√",
+            "kuaishou": "√",
+            "jd": "√",
+            "harmony": "-",
+            "qq": "-",
+            "lark": "-"
+          },
+          "quickapp": {
+            "huawei": "-",
+            "union": "-"
+          }
+        },
+        "uni-app-x": {
+          "web": {
+            "safari": "√",
+            "chrome": "√"
+          },
+          "app": {
+            "android": {
+                "extVersion": "",
+                "minVersion": "22"
+            },
+            "ios": "√",
+            "harmony": "√"
+          },
+          "mp": {
+            "weixin": "√"
+          }
+        }
+      }
+    }
+  }
+}
--- a/uni_modules/lime-style/readme.md
+++ b/uni_modules/lime-style/readme.md
@@ -0,0 +1,16 @@
+# lime-style
+
+## 更换色系
+在uni.scss中增加
+```css
+// 品牌色-主色
+$primary-color: 	#3283ff;
+// 错误色
+$error-color: 		#FF4D4F;
+// 警告色
+$warning-color: 	#ffb400;
+// 成功色
+$success-color: 	#34c471;
+
+$blue: 				#3283ff;
+```
--- a/uni_modules/lime-style/theme/dark.scss
+++ b/uni_modules/lime-style/theme/dark.scss
@@ -0,0 +1,101 @@
+@import '../mixins/create.scss';
+@import '../color/colorPalette.scss';
+@import '../color/colors.scss';
+@import '../mixins/useTheme';
+
+@include theme-dark {
+	--l-blue-1:  #{genColor($blue, 1, dark)};
+	--l-blue-2:  #{genColor($blue, 2, dark)};
+	--l-blue-3:  #{genColor($blue, 3, dark)};
+	--l-blue-4:  #{genColor($blue, 4, dark)};
+	--l-blue-5:  #{genColor($blue, 5, dark)};
+	--l-blue-6:  #{genColor($blue, 6, dark)};
+	--l-blue-7:  #{genColor($blue, 7, dark)};
+	--l-blue-8:  #{genColor($blue, 8, dark)};
+	--l-blue-9:  #{genColor($blue, 9, dark)};
+	--l-blue-10: #{genColor($blue, 10, dark)};
+	
+	--l-primary-color-1: #{genColor($primary-color, 1, dark)}; // 浅色/白底悬浮
+	--l-primary-color-2: #{genColor($primary-color, 2, dark)}; // 文字禁用
+	--l-primary-color-3: #{genColor($primary-color, 3, dark)}; // 一般禁用
+	--l-primary-color-4: #{genColor($primary-color, 4, dark)}; // 特殊场景 禁用
+	--l-primary-color-5: #{genColor($primary-color, 5, dark)}; // 悬浮
+	--l-primary-color-6: #{genColor($primary-color, 6, dark)}; // 常规
+	--l-primary-color-7: #{genColor($primary-color, 7, dark)}; // 点击
+	--l-primary-color-8: #{genColor($primary-color, 8, dark)}; // 
+	--l-primary-color-9: #{genColor($primary-color, 9, dark)};
+	--l-primary-color-10: #{genColor($primary-color, 10, dark)};
+	
+	--l-error-color-1: #{genColor($error-color, 1, dark)};
+	--l-error-color-2: #{genColor($error-color, 2, dark)};
+	--l-error-color-3: #{genColor($error-color, 3, dark)};
+	--l-error-color-4: #{genColor($error-color, 4, dark)};
+	--l-error-color-5: #{genColor($error-color, 5, dark)};
+	--l-error-color-6: #{genColor($error-color, 6, dark)};
+	--l-error-color-7: #{genColor($error-color, 7, dark)};
+	--l-error-color-8: #{genColor($error-color, 8, dark)};
+	--l-error-color-9: #{genColor($error-color, 9, dark)};
+	--l-error-color-10: #{genColor($error-color, 10, dark)};
+	
+	--l-warning-color-1: #{genColor($warning-color, 1, dark)};
+	--l-warning-color-2: #{genColor($warning-color, 2, dark)};
+	--l-warning-color-3: #{genColor($warning-color, 3, dark)};
+	--l-warning-color-4: #{genColor($warning-color, 4, dark)};
+	--l-warning-color-5: #{genColor($warning-color, 5, dark)};
+	--l-warning-color-6: #{genColor($warning-color, 6, dark)};
+	--l-warning-color-7: #{genColor($warning-color, 7, dark)};
+	--l-warning-color-8: #{genColor($warning-color, 8, dark)};
+	--l-warning-color-9: #{genColor($warning-color, 9, dark)};
+	--l-warning-color-10: #{genColor($warning-color, 10, dark)};
+	
+	--l-success-color-1: #{genColor($success-color, 1, dark)}; // 浅色/白底悬浮
+	--l-success-color-2: #{genColor($success-color, 2, dark)}; // 文字禁用
+	--l-success-color-3: #{genColor($success-color, 3, dark)}; // 一般禁用
+	--l-success-color-4: #{genColor($success-color, 4, dark)}; // 特殊场景
+	--l-success-color-5: #{genColor($success-color, 5, dark)}; // 悬浮
+	--l-success-color-6: #{genColor($success-color, 6, dark)}; // 常规
+	--l-success-color-7: #{genColor($success-color, 7, dark)}; // 点击
+	--l-success-color-8: #{genColor($success-color, 8, dark)};
+	--l-success-color-9: #{genColor($success-color, 9, dark)};
+	--l-success-color-10: #{genColor($success-color, 10, dark)};
+	
+	--l-gray-1: #f3f3f3;
+	--l-gray-2: #eeeeee;
+	--l-gray-3: #e7e7e7;
+	--l-gray-4: #dcdcdc;
+	--l-gray-5: #c5c5c5;
+	--l-gray-6: #a6a6a6;
+	--l-gray-7: #8b8b8b;
+	--l-gray-8: #777777;
+	--l-gray-9: #5e5e5e;
+	--l-gray-10: #4b4b4b;
+	--l-gray-11: #383838;
+	--l-gray-12: #2c2c2c;
+	--l-gray-13: #242424;
+	--l-gray-14: #181818;
+	
+	--l-text-color-1: rgba(255,255,255,0.88); //primary
+	--l-text-color-2: rgba(255,255,255,0.65); //secondary
+	--l-text-color-3: rgba(255,255,255,0.45); //placeholder
+	--l-text-color-4: rgba(255,255,255,0.25); //disabled
+	
+	// 容器
+	--l-bg-color-page: #000000; // 整体背景色 布局
+	--l-bg-color-container: #141414;//#1d1d1d; // 一级容器背景 组件
+	--l-bg-color-elevated: #1f1f1f; // 二级容器背景 浮层
+	--l-bg-color-spotlight: #424242;  // 引起注意的如 Tooltip
+	--l-bg-color-mask: rgba(0, 0, 0, 0.45);  // 蒙层
+	
+	// 填充
+	--l-fill-1: rgba(0, 0, 0, 0.18);
+	--l-fill-2: rgba(0, 0, 0, 0.12);
+	--l-fill-3: rgba(0, 0, 0, 0.08);
+	--l-fill-4: rgba(0, 0, 0, 0.04);
+	
+	// 描边
+	--l-border-color-1: #{getSolidColor(#000, 26%)}; //#424242; // 浅色
+	--l-border-color-2: #{getSolidColor(#000, 19%)}; //#303030; // 一般
+	--l-border-color-3: #{getSolidColor(#000, 15%)}; //$gray-4; // 深/悬浮
+	--l-border-color-4: #{getSolidColor(#000, 12%)}; //$gray-6; // 重/按钮描边
+	
+}
--- a/uni_modules/lime-style/theme/default.scss
+++ b/uni_modules/lime-style/theme/default.scss
@@ -0,0 +1,153 @@
+@import '../mixins/create.scss';
+@import '../color/colorPalette.scss';
+@import '../color/colors.scss';
+
+$blue-1:  genColor($blue, 1);
+$blue-2:  genColor($blue, 2);
+$blue-3:  genColor($blue, 3);
+$blue-4:  genColor($blue, 4);
+$blue-5:  genColor($blue, 5);
+$blue-6:  $blue;
+$blue-7:  genColor($blue, 7);
+$blue-8:  genColor($blue, 8);
+$blue-9:  genColor($blue, 9);
+$blue-10: genColor($blue, 10);
+
+$primary-color-1:  create-var('primary-color-1', genColor($primary-color, 1)); // 浅色/白底悬浮
+$primary-color-2:  create-var('primary-color-2', genColor($primary-color, 2)); // 文字禁用
+$primary-color-3:  create-var('primary-color-3', genColor($primary-color, 3)); // 一般禁用
+$primary-color-4:  create-var('primary-color-4', genColor($primary-color, 4)); // 特殊场景 禁用
+$primary-color-5:  create-var('primary-color-5', genColor($primary-color, 5)); // 悬浮
+$primary-color-6:  create-var('primary-color-6', $primary-color); // 常规
+$primary-color-7:  create-var('primary-color-7', genColor($primary-color, 7)); // 点击
+$primary-color-8:  create-var('primary-color-8', genColor($primary-color, 8)); // 
+$primary-color-9:  create-var('primary-color-9', genColor($primary-color, 9));
+$primary-color-10: create-var('primary-color-10', genColor($primary-color, 10));
+
+$error-color-1:  create-var('error-color-1', genColor($error-color, 1));
+$error-color-2:  create-var('error-color-2', genColor($error-color, 2));
+$error-color-3:  create-var('error-color-3', genColor($error-color, 3));
+$error-color-4:  create-var('error-color-4', genColor($error-color, 4));
+$error-color-5:  create-var('error-color-5', genColor($error-color, 5));
+$error-color-6:  create-var('error-color-6', $error-color);
+$error-color-7:  create-var('error-color-7', genColor($error-color, 7));
+$error-color-8:  create-var('error-color-8', genColor($error-color, 8));
+$error-color-9:  create-var('error-color-9', genColor($error-color, 9));
+$error-color-10: create-var('error-color-10', genColor($error-color, 10));
+
+$warning-color-1:  create-var('warning-color-1', genColor($warning-color, 1));
+$warning-color-2:  create-var('warning-color-2', genColor($warning-color, 2));
+$warning-color-3:  create-var('warning-color-3', genColor($warning-color, 3));
+$warning-color-4:  create-var('warning-color-4', genColor($warning-color, 4));
+$warning-color-5:  create-var('warning-color-5', genColor($warning-color, 5));
+$warning-color-6:  create-var('warning-color-6', $warning-color);
+$warning-color-7:  create-var('warning-color-7', genColor($warning-color, 7));
+$warning-color-8:  create-var('warning-color-8', genColor($warning-color, 8));
+$warning-color-9:  create-var('warning-color-9', genColor($warning-color, 9));
+$warning-color-10: create-var('warning-color-10', genColor($warning-color, 10));
+
+$success-color-1:  create-var('success-color-1', genColor($success-color, 1)); // 浅色/白底悬浮
+$success-color-2:  create-var('success-color-2', genColor($success-color, 2)); // 文字禁用
+$success-color-3:  create-var('success-color-3', genColor($success-color, 3)); // 一般禁用
+$success-color-4:  create-var('success-color-4', genColor($success-color, 4)); // 特殊场景
+$success-color-5:  create-var('success-color-5', genColor($success-color, 5)); // 悬浮
+$success-color-6:  create-var('success-color-6', $success-color); // 常规
+$success-color-7:  create-var('success-color-7', genColor($success-color, 7)); // 点击
+$success-color-8:  create-var('success-color-8', genColor($success-color, 8));
+$success-color-9:  create-var('success-color-9', genColor($success-color, 9));
+$success-color-10: create-var('success-color-10', genColor($success-color, 10));
+
+$gray-1:  create-var('gray-1', #f3f3f3);
+$gray-2:  create-var('gray-2', #eeeeee);
+$gray-3:  create-var('gray-3', #e7e7e7);
+$gray-4:  create-var('gray-4', #dcdcdc);
+$gray-5:  create-var('gray-5', #c5c5c5);
+$gray-6:  create-var('gray-6', #a6a6a6);
+$gray-7:  create-var('gray-7', #8b8b8b);
+$gray-8:  create-var('gray-8', #777777);
+$gray-9:  create-var('gray-9', #5e5e5e);
+$gray-10: create-var('gray-10', #4b4b4b);
+$gray-11: create-var('gray-11', #383838);
+$gray-12: create-var('gray-12', #2c2c2c);
+$gray-13: create-var('gray-13', #242424);
+$gray-14: create-var('gray-14', #181818);
+
+$text-color-1: create-var('text-color-1', rgba(0,0,0,0.88)); //primary
+$text-color-2: create-var('text-color-2', rgba(0,0,0,0.65)); //secondary
+$text-color-3: create-var('text-color-3', rgba(0,0,0,0.45)); //placeholder
+$text-color-4: create-var('text-color-4', rgba(0,0,0,0.25)); //disabled
+
+// 容器
+$bg-color-page:  	  create-var('bg-color-page', #f5f5f5); // 整体背景色 布局
+$bg-color-container:  create-var('bg-color-container', #fff); // 一级容器背景 组件
+$bg-color-elevated:   create-var('bg-color-elevated', #fff); // 二级容器背景 浮层
+$bg-color-spotlight:  create-var('bg-color-spotlight', rgba(0, 0, 0, 0.85));  // 引起注意的如 Tooltip
+$bg-color-mask: 	  create-var('bg-color-mask', rgba(0, 0, 0, 0.45));  // 蒙层
+
+// 填充
+$fill-1: create-var('fill-1', rgba(0, 0, 0, 0.15));
+$fill-2: create-var('fill-2', rgba(0, 0, 0, 0.06));
+$fill-3: create-var('fill-3', rgba(0, 0, 0, 0.04));
+$fill-4: create-var('fill-4', rgba(0, 0, 0, 0.02));
+
+// 描边
+$border-color-1: create-var('border-color-1', $gray-2); // 浅色
+$border-color-2: create-var('border-color-2', $gray-3); // 一般
+$border-color-3: create-var('border-color-3', $gray-4); // 深/悬浮
+$border-color-4: create-var('border-color-4', $gray-6); // 重/按钮描边
+
+
+$alpha-disabled: create-var('alpha-disabled', 0.5);
+$alpha-pressed:  create-var('alpha-pressed', 0.07);
+
+// 投影
+/* #ifndef APP-ANDROID || APP-IOS || APP-HARMONY */
+$shadow-1: create-var(
+  shadow-1,
+  0 1px 10px rgba(0, 0, 0, 0.05),
+  0 4px 5px rgba(0, 0, 0, 0.08),
+  0 2px 4px -1px rgba(0, 0, 0, 0.12)
+);
+
+$shadow-2: create-var(
+	'shadow-2',
+	0 1px 10px rgba(0, 0, 0, 0.05),
+	0 4px 5px rgba(0, 0, 0, 0.08),
+	0 2px 4px -1px rgba(0, 0, 0, 0.12)
+);
+$shadow-3: create-var(
+  shadow-3,
+  0 6px 30px 5px rgba(0, 0, 0, 0.05),
+  0 16px 24px 2px rgba(0, 0, 0, 0.04),
+  0 8px 10px -5px rgba(0, 0, 0, 0.08)
+);
+
+/* #endif */
+/* #ifdef APP-ANDROID || APP-IOS || APP-HARMONY */
+$shadow-1: create-var(
+  shadow-1,
+  0 1px 10px rgba(0, 0, 0, 0.05)
+);
+$shadow-2: create-var(
+	'shadow-2',
+	0 1px 10px rgba(0, 0, 0, 0.05)
+);
+$shadow-3: create-var(
+  shadow-3,
+  /* #ifdef APP-HARMONY
+  0 6px 30px 5px $gray-3
+  /* #endif */
+  /* #ifndef APP-HARMONY
+  0 6px 30px 5px rgba(0, 0, 0, 0.05)
+  /* #endif */
+  
+);
+/* #endif */
+$shadow-4: create-var(shadow-4, 0 2px 8px 0 rgba(0, 0, 0, .06));
+
+// 基础颜色的扩展 用于 聚焦 / 禁用 / 点击 等状态  
+$primary-color-focus: create-var('primary-color-focus', $primary-color-1);// focus态，包括鼠标和键盘
+$primary-color-active: create-var('primary-color-active', $primary-color-8);// 点击态
+$primary-color-disabled: create-var('primary-color-disabled', $primary-color-3);
+$primary-color-light: create-var('primary-color-light', $primary-color-1);	// 浅色的选中态
+$primary-color-light-active: create-var('primary-color-light-active', $primary-color-2); // 浅色的选中态
--- a/uni_modules/lime-style/var.scss
+++ b/uni_modules/lime-style/var.scss
@@ -0,0 +1,72 @@
+@import './mixins/create.scss';
+// 公共前缀
+$prefix: l;
+
+// Spacer
+$spacer: 	 create-var('spacer', 32rpx); // base
+$spacer-tn:  create-var('spacer-tn', 8rpx); // Tiny
+$spacer-xs:  create-var('spacer-xs', 16rpx); // Extra Small
+$spacer-sm:  create-var('spacer-sm', 24rpx); // Small
+$spacer-md:  create-var('spacer-md', 48rpx); // Medium
+$spacer-lg:  create-var('spacer-lg', 64rpx); // Large
+$spacer-xl:  create-var('spacer-xl', 96rpx); // Extra Large
+$spacer-hg:  create-var('spacer-hg', 160rpx); // Huge //Ultra Big
+
+// Font 官方建议字体不跟随页面变化
+// $font-size:    create-var('font-size', 28rpx);
+// $font-size-xs: create-var('font-size-xs', 20rpx);
+// $font-size-sm: create-var('font-size-sm', 24rpx);
+// $font-size-md: create-var('font-size-md', 32rpx);
+// $font-size-lg: create-var('font-size-lg', 40rpx);
+// $font-size-xl: create-var('font-size-xl', 72rpx);
+$font-size:    create-var('font-size', 14px);
+$font-size-xs: create-var('font-size-xs', 10px);
+$font-size-sm: create-var('font-size-sm', 12px);
+$font-size-md: create-var('font-size-md', 16px);
+$font-size-lg: create-var('font-size-lg',20px);
+$font-size-xl: create-var('font-size-xl', 36px);
+
+$font-size-heading-1: create-var('font-size-heading-1', 76rpx);
+$font-size-heading-2: create-var('font-size-heading-2', 60rpx);
+$font-size-heading-3: create-var('font-size-heading-3', 48rpx);
+$font-size-heading-4: create-var('font-size-heading-4', 40rpx);
+$font-size-heading-5: create-var('font-size-heading-5', 32rpx);
+
+
+$font-family:    create-var('font-family', PingFang SC, Microsoft YaHei, Arial Regular); // 字体-磅数-常规
+$font-family-md: create-var('font-family-md', PingFang SC, Microsoft YaHei, Arial Medium); // 字体-磅数-粗体
+
+
+// 行高
+$line-height:    create-var('line-height', 1.5714285714285714);
+$line-height-sm: create-var('line-height-sm', 1.6666666666666667);
+$line-height-md: create-var('line-height-lg', 1.5);
+$line-height-lg: create-var('line-height-lg', 1.4);
+
+$line-height-heading-1: create-var('line-height-heading-1', 1.2105263157894737);
+$line-height-heading-2: create-var('line-height-heading-2', 1.2666666666666666);
+$line-height-heading-3: create-var('line-height-heading-3', 1.3333333333333333);
+$line-height-heading-4: create-var('line-height-heading-4', 1.4);
+$line-height-heading-5: create-var('line-height-heading-5', 1.5);
+
+
+// 圆角
+$border-radius: 	create-var('border-radius', 12rpx);
+$border-radius-xs: 	create-var('border-radius-xs', 4rpx);
+$border-radius-sm: 	create-var('border-radius-sm', 6rpx);
+$border-radius-md: 	create-var('border-radius-md', 12rpx);
+$border-radius-lg: 	create-var('border-radius-lg', 18rpx);
+$border-radius-xl: 	create-var('border-radius-xl', 24rpx);
+$border-radius-hg:  create-var('border-radius-hg', 999px);
+// $border-radius-circle: var(--l-border-radius-circle, 50%);
+
+
+// 动画
+$anim-time-fn-easing: 		create-var('anim-time-fn-easing', cubic-bezier(0.38, 0, 0.24, 1));
+$anim-time-fn-ease-out: 	create-var('anim-time-fn-ease-out', cubic-bezier(0, 0, 0.15, 1));
+$anim-time-fn-ease-in: 		create-var('anim-time-fn-ease-in', cubic-bezier(0.82, 0, 1, 0.9));
+$anim-duration-base: 		create-var('anim-duration-base', 0.2s);
+$anim-duration-moderate: 	create-var('anim-duration-moderate', 0.24s);
+$anim-duration-slow: 		create-var('anim-duration-slow', 0.28s);
+
+