优化组件/更新
This commit is contained in:
48
uni_modules/lime-style/changelog.md
Normal file
48
uni_modules/lime-style/changelog.md
Normal file
@@ -0,0 +1,48 @@
|
||||
## 0.2.4（2025-11-14）
|
||||
- feat: 优化create-var
|
||||
## 0.2.3（2025-10-19）
|
||||
- fix: 修复非uts环境使用set的问题
|
||||
## 0.2.2（2025-10-15）
|
||||
- fix: 去掉版本判断
|
||||
## 0.2.1（2025-10-15）
|
||||
- fix: 修复条件判断问题
|
||||
## 0.2.0（2025-10-01）
|
||||
- fix: 修复uniapp主题变化报错问题
|
||||
## 0.1.9（2025-09-26）
|
||||
- feat: 更新宫格暗黑hover颜色
|
||||
## 0.1.8（2025-09-08）
|
||||
- feat: 去掉vue2的判断
|
||||
## 0.1.7（2025-08-15）
|
||||
更新变量
|
||||
## 0.1.6（2025-06-20）
|
||||
- feat: 放弃使用rpx
|
||||
## 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
|
||||
236
uni_modules/lime-style/color/colorPalette.scss
Normal file
236
uni_modules/lime-style/color/colorPalette.scss
Normal file
@@ -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($limeColor) {
|
||||
$r: red($limeColor);
|
||||
$g: green($limeColor);
|
||||
$b: blue($limeColor);
|
||||
$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: #242424) {
|
||||
$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;
|
||||
}
|
||||
18
uni_modules/lime-style/color/colors.scss
Normal file
18
uni_modules/lime-style/color/colors.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
// 品牌色-主色
|
||||
$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: #fcd53f!default;
|
||||
$green: #34c471 !default;
|
||||
$white: #fff;
|
||||
$black: #000;
|
||||
11
uni_modules/lime-style/functions.scss
Normal file
11
uni_modules/lime-style/functions.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
/* #ifdef VUE3 */
|
||||
@use "sass:math";
|
||||
// #endif
|
||||
@function divide($dividend, $divisor) {
|
||||
/* #ifdef VUE3 */
|
||||
@return math.div($dividend, $divisor);
|
||||
/* #endif
|
||||
/* #ifndef VUE3 */
|
||||
@return $dividend / $divisor;
|
||||
/* #endif
|
||||
}
|
||||
153
uni_modules/lime-style/hairline.uts
Normal file
153
uni_modules/lime-style/hairline.uts
Normal file
@@ -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
|
||||
|
||||
}
|
||||
7
uni_modules/lime-style/index.scss
Normal file
7
uni_modules/lime-style/index.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
@import './theme/default';
|
||||
@import './var';
|
||||
// @import './mixins/ellipsis';
|
||||
// @import './mixins/hairline';
|
||||
@import './mixins/create';
|
||||
@import './mixins/directionalProperty';
|
||||
// @import './mixins/useTheme';
|
||||
3
uni_modules/lime-style/index.uts
Normal file
3
uni_modules/lime-style/index.uts
Normal file
@@ -0,0 +1,3 @@
|
||||
export * from './token/useThemeMode'
|
||||
export * from './token/useThemeVars'
|
||||
export * from './token/interface'
|
||||
0
uni_modules/lime-style/mixins/bem.scss
Normal file
0
uni_modules/lime-style/mixins/bem.scss
Normal file
235
uni_modules/lime-style/mixins/create.scss
Normal file
235
uni_modules/lime-style/mixins/create.scss
Normal file
@@ -0,0 +1,235 @@
|
||||
/* #ifdef VUE3 */
|
||||
@use "sass:math";
|
||||
/* #endif */
|
||||
|
||||
/* #ifndef UNI-APP-X && APP || APP-NVUE */
|
||||
$use-css-var: true !default;
|
||||
/* #endif */
|
||||
/* #ifdef UNI-APP-X && APP || APP-NVUE */
|
||||
$use-css-var: false !default;
|
||||
/* #endif */
|
||||
|
||||
|
||||
@function div($dividend, $divisor) {
|
||||
/* #ifdef VUE3 */
|
||||
@return math.div($dividend, $divisor);
|
||||
/* #endif */
|
||||
/* #ifndef VUE3 */
|
||||
@return $dividend / $divisor;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
@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...) {
|
||||
// 将不定数量的参数转换为列表
|
||||
$value-list: $values;
|
||||
$css-value: null;
|
||||
|
||||
@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 */
|
||||
}
|
||||
}
|
||||
|
||||
// /* #ifndef UNI-APP-X */
|
||||
// @return var(--l-#{$name}, #{$css-value});
|
||||
// /* #endif */
|
||||
|
||||
// /* #ifdef UNI-APP-X && APP */
|
||||
// @if $use-css-var {
|
||||
// @return var(--l-#{$name}, #{$css-value});
|
||||
// } @else {
|
||||
// @return $css-value;
|
||||
// }
|
||||
// /* #endif */
|
||||
|
||||
|
||||
// /* #ifdef APP-NVUE */
|
||||
// @return $css-value;
|
||||
// /* #endif */
|
||||
|
||||
// @return var(--l-#{$name}, #{$css-value});
|
||||
|
||||
@if $use-css-var {
|
||||
@return var(--l-#{$name}, #{$css-value});
|
||||
} @else {
|
||||
@return $css-value;
|
||||
}
|
||||
}
|
||||
401
uni_modules/lime-style/mixins/directionalProperty.scss
Normal file
401
uni_modules/lime-style/mixins/directionalProperty.scss
Normal file
@@ -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));
|
||||
}
|
||||
22
uni_modules/lime-style/mixins/ellipsis.scss
Normal file
22
uni_modules/lime-style/mixins/ellipsis.scss
Normal file
@@ -0,0 +1,22 @@
|
||||
@mixin ellipsis {
|
||||
// overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
/* #ifndef UNI-APP-X && APP || APP-NVUE */
|
||||
word-wrap: normal;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
|
||||
@mixin ellipsisLn($line) {
|
||||
// overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
/* #ifdef UNI-APP-X && APP || APP-NVUE */
|
||||
lines: $line;
|
||||
/* #endif */
|
||||
/* #ifndef UNI-APP-X && APP || APP-NVUE */
|
||||
-webkit-line-clamp: $line;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
/* #endif */
|
||||
}
|
||||
20
uni_modules/lime-style/mixins/flex.scss
Normal file
20
uni_modules/lime-style/mixins/flex.scss
Normal file
@@ -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;
|
||||
}
|
||||
66
uni_modules/lime-style/mixins/hairline.scss
Normal file
66
uni_modules/lime-style/mixins/hairline.scss
Normal file
@@ -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 UNI-APP-X && APP */
|
||||
// &:after {
|
||||
// @content;
|
||||
// }
|
||||
// /* #endif */
|
||||
// /* #ifdef UNI-APP-X && APP */
|
||||
// @content;
|
||||
// /* #endif */
|
||||
// }
|
||||
17
uni_modules/lime-style/mixins/platform.scss
Normal file
17
uni_modules/lime-style/mixins/platform.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
/* #ifdef APP-NVUE || UNI-APP-X && APP */
|
||||
$is-app: true;
|
||||
/* #endif */
|
||||
/* #ifndef APP-NVUE || UNI-APP-X && APP */
|
||||
$is-app: false;
|
||||
/* #endif */
|
||||
|
||||
@mixin is-app {
|
||||
@if $is-app {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin not-app {
|
||||
@if not($is-app) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
60
uni_modules/lime-style/mixins/useTheme.scss
Normal file
60
uni_modules/lime-style/mixins/useTheme.scss
Normal file
@@ -0,0 +1,60 @@
|
||||
$limeThemes: light, dark;
|
||||
$theme: light;
|
||||
|
||||
@mixin use-theme($mode: null) {
|
||||
@if $mode != null {
|
||||
/* #ifndef UNI-APP-X && APP || APP-NVUE */
|
||||
@media (prefers-color-scheme: $mode) {
|
||||
@content;
|
||||
}
|
||||
/* #endif */
|
||||
/* #ifdef UNI-APP-X && APP || APP-NVUE */
|
||||
&.#{$mode} {
|
||||
@content;
|
||||
}
|
||||
/* #endif */
|
||||
} @else {
|
||||
@each $mode in $limeThemes {
|
||||
$theme: $mode !global;
|
||||
/* #ifndef UNI-APP-X && APP || APP-NVUE */
|
||||
@media (prefers-color-scheme: $mode) {
|
||||
@content;
|
||||
}
|
||||
/* #endif */
|
||||
|
||||
/* #ifdef UNI-APP-X && APP || APP-NVUE */
|
||||
&.#{$mode} {
|
||||
@content;
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin theme-dark {
|
||||
/* #ifndef UNI-APP-X && APP || APP-NVUE */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
page {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
/* #ifdef UNI-APP-X && APP || APP-NVUE */
|
||||
.dark {
|
||||
@content;
|
||||
}
|
||||
/* #endif */
|
||||
/* #ifdef WEB */
|
||||
:root[data-lime-theme='dark'] page {
|
||||
@content;
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
|
||||
@function get-var($themes, $key) {
|
||||
@return map-get($themes, $key)
|
||||
}
|
||||
|
||||
|
||||
7
uni_modules/lime-style/mixins/utilities.scss
Normal file
7
uni_modules/lime-style/mixins/utilities.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
@import './flex';
|
||||
|
||||
@mixin resize-none {
|
||||
/* #ifndef UNI-APP-X && APP */
|
||||
resize: none;
|
||||
/* #endif */
|
||||
}
|
||||
103
uni_modules/lime-style/package.json
Normal file
103
uni_modules/lime-style/package.json
Normal file
@@ -0,0 +1,103 @@
|
||||
{
|
||||
"id": "lime-style",
|
||||
"displayName": "lime-style",
|
||||
"version": "0.2.4",
|
||||
"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": "√"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
16
uni_modules/lime-style/readme.md
Normal file
16
uni_modules/lime-style/readme.md
Normal file
@@ -0,0 +1,16 @@
|
||||
# lime-style
|
||||
|
||||
## 更换色系
|
||||
在uni.scss中增加
|
||||
```css
|
||||
// 品牌色-主色
|
||||
$primary-color: #3283ff;
|
||||
// 错误色
|
||||
$error-color: #FF4D4F;
|
||||
// 警告色
|
||||
$warning-color: #ffb400;
|
||||
// 成功色
|
||||
$success-color: #34c471;
|
||||
|
||||
$blue: #3283ff;
|
||||
```
|
||||
635
uni_modules/lime-style/theme/dark.scss
Normal file
635
uni_modules/lime-style/theme/dark.scss
Normal file
@@ -0,0 +1,635 @@
|
||||
@import '../mixins/create.scss';
|
||||
@import '../color/colorPalette.scss';
|
||||
@import '../color/colors.scss';
|
||||
@import '../mixins/useTheme';
|
||||
|
||||
$blue-1: #{genColor($blue, 1, dark)};
|
||||
$blue-2: #{genColor($blue, 2, dark)};
|
||||
$blue-3: #{genColor($blue, 3, dark)};
|
||||
$blue-4: #{genColor($blue, 4, dark)};
|
||||
$blue-5: #{genColor($blue, 5, dark)};
|
||||
$blue-6: #{genColor($blue, 6, dark)};
|
||||
$blue-7: #{genColor($blue, 7, dark)};
|
||||
$blue-8: #{genColor($blue, 8, dark)};
|
||||
$blue-9: #{genColor($blue, 9, dark)};
|
||||
$blue-10: #{genColor($blue, 10, dark)};
|
||||
|
||||
$info-color-1: #{genColor($info-color, 1, dark)};
|
||||
$info-color-2: #{genColor($info-color, 2, dark)};
|
||||
$info-color-3: #{genColor($info-color, 3, dark)};
|
||||
$info-color-4: #{genColor($info-color, 4, dark)};
|
||||
$info-color-5: #{genColor($info-color, 5, dark)};
|
||||
$info-color-6: #{genColor($info-color, 6, dark)};
|
||||
$info-color-7: #{genColor($info-color, 7, dark)};
|
||||
$info-color-8: #{genColor($info-color, 8, dark)};
|
||||
$info-color-9: #{genColor($info-color, 9, dark)};
|
||||
$info-color-10: #{genColor($info-color, 10, dark)};
|
||||
|
||||
$primary-color-1: #{genColor($primary-color, 1, dark)}; // 浅色/白底悬浮
|
||||
$primary-color-2: #{genColor($primary-color, 2, dark)}; // 文字禁用
|
||||
$primary-color-3: #{genColor($primary-color, 3, dark)}; // 一般禁用
|
||||
$primary-color-4: #{genColor($primary-color, 4, dark)}; // 特殊场景 禁用
|
||||
$primary-color-5: #{genColor($primary-color, 5, dark)}; // 悬浮
|
||||
$primary-color-6: #{genColor($primary-color, 6, dark)}; // 常规
|
||||
$primary-color-7: #{genColor($primary-color, 7, dark)}; // 点击
|
||||
$primary-color-8: #{genColor($primary-color, 8, dark)}; //
|
||||
$primary-color-9: #{genColor($primary-color, 9, dark)};
|
||||
$primary-color-10: #{genColor($primary-color, 10, dark)};
|
||||
|
||||
$error-color-1: #{genColor($error-color, 1, dark)};
|
||||
$error-color-2: #{genColor($error-color, 2, dark)};
|
||||
$error-color-3: #{genColor($error-color, 3, dark)};
|
||||
$error-color-4: #{genColor($error-color, 4, dark)};
|
||||
$error-color-5: #{genColor($error-color, 5, dark)};
|
||||
$error-color-6: #{genColor($error-color, 6, dark)};
|
||||
$error-color-7: #{genColor($error-color, 7, dark)};
|
||||
$error-color-8: #{genColor($error-color, 8, dark)};
|
||||
$error-color-9: #{genColor($error-color, 9, dark)};
|
||||
$error-color-10: #{genColor($error-color, 10, dark)};
|
||||
|
||||
$warning-color-1: #{genColor($warning-color, 1, dark)};
|
||||
$warning-color-2: #{genColor($warning-color, 2, dark)};
|
||||
$warning-color-3: #{genColor($warning-color, 3, dark)};
|
||||
$warning-color-4: #{genColor($warning-color, 4, dark)};
|
||||
$warning-color-5: #{genColor($warning-color, 5, dark)};
|
||||
$warning-color-6: #{genColor($warning-color, 6, dark)};
|
||||
$warning-color-7: #{genColor($warning-color, 7, dark)};
|
||||
$warning-color-8: #{genColor($warning-color, 8, dark)};
|
||||
$warning-color-9: #{genColor($warning-color, 9, dark)};
|
||||
$warning-color-10: #{genColor($warning-color, 10, dark)};
|
||||
|
||||
$success-color-1: #{genColor($success-color, 1, dark)}; // 浅色/白底悬浮
|
||||
$success-color-2: #{genColor($success-color, 2, dark)}; // 文字禁用
|
||||
$success-color-3: #{genColor($success-color, 3, dark)}; // 一般禁用
|
||||
$success-color-4: #{genColor($success-color, 4, dark)}; // 特殊场景
|
||||
$success-color-5: #{genColor($success-color, 5, dark)}; // 悬浮
|
||||
$success-color-6: #{genColor($success-color, 6, dark)}; // 常规
|
||||
$success-color-7: #{genColor($success-color, 7, dark)}; // 点击
|
||||
$success-color-8: #{genColor($success-color, 8, dark)};
|
||||
$success-color-9: #{genColor($success-color, 9, dark)};
|
||||
$success-color-10: #{genColor($success-color, 10, dark)};
|
||||
|
||||
// $gray-1: #f3f3f3;
|
||||
// $gray-2: #eeeeee;
|
||||
// $gray-3: #e7e7e7;
|
||||
// $gray-4: #dcdcdc;
|
||||
// $gray-5: #c5c5c5;
|
||||
// $gray-6: #a6a6a6;
|
||||
// $gray-7: #8b8b8b;
|
||||
// $gray-8: #777777;
|
||||
// $gray-9: #5e5e5e;
|
||||
// $gray-10: #4b4b4b;
|
||||
// $gray-11: #383838;
|
||||
// $gray-12: #2c2c2c;
|
||||
// $gray-13: #242424;
|
||||
// $gray-14: #181818;
|
||||
|
||||
// 暗色模式的灰度
|
||||
$gray-1: #181818; // 最深
|
||||
$gray-2: #242424;
|
||||
$gray-3: #2c2c2c;
|
||||
$gray-4: #383838;
|
||||
$gray-5: #4b4b4b;
|
||||
$gray-6: #5e5e5e;
|
||||
$gray-7: #777777;
|
||||
$gray-8: #8b8b8b;
|
||||
$gray-9: #a6a6a6;
|
||||
$gray-10: #c5c5c5;
|
||||
$gray-11: #dcdcdc;
|
||||
$gray-12: #e7e7e7;
|
||||
$gray-13: #eeeeee;
|
||||
$gray-14: #f3f3f3; // 最浅
|
||||
|
||||
$text-color-1: rgba(255,255,255,0.85); //primary
|
||||
$text-color-2: rgba(255,255,255,0.65); //secondary
|
||||
$text-color-3: rgba(255,255,255,0.45); //placeholder
|
||||
$text-color-4: rgba(255,255,255,0.25); //disabled
|
||||
|
||||
// 容器
|
||||
$bg-color-page: $gray-1;//#000000; // 整体背景色 布局
|
||||
$bg-color-container: $gray-2;//#1d1d1d; // 一级容器背景 组件
|
||||
$bg-color-elevated: $gray-2;//#1f1f1f; // 二级容器背景 浮层
|
||||
$bg-color-spotlight: $gray-5; // 引起注意的如 Tooltip
|
||||
$bg-color-mask: rgba(0, 0, 0, 0.65); // 蒙层
|
||||
|
||||
// 填充
|
||||
$fill-1: rgba(255,255,255,0.18);
|
||||
$fill-2: rgba(255,255,255,0.12);
|
||||
$fill-3: rgba(255,255,255,0.08);
|
||||
$fill-4: rgba(255,255,255,0.04);
|
||||
|
||||
// 描边
|
||||
$border-color-1: $gray-3;//#{getSolidColor(#000, 26%)}; //#424242; // 浅色
|
||||
$border-color-2: $gray-4;//#{getSolidColor(#000, 19%)}; //#303030; // 一般
|
||||
$border-color-3: $gray-5;//#{getSolidColor(#000, 15%)}; //$gray-4; // 深/悬浮
|
||||
$border-color-4: $gray-6;//#{getSolidColor(#000, 12%)}; //$gray-6; // 重/按钮描边
|
||||
|
||||
|
||||
@mixin theme-dark {
|
||||
// 蓝色系
|
||||
--l-blue-1: #{$blue-1};
|
||||
--l-blue-2: #{$blue-2};
|
||||
--l-blue-3: #{$blue-3};
|
||||
--l-blue-4: #{$blue-4};
|
||||
--l-blue-5: #{$blue-5};
|
||||
--l-blue-6: #{$blue-6};
|
||||
--l-blue-7: #{$blue-7};
|
||||
--l-blue-8: #{$blue-8};
|
||||
--l-blue-9: #{$blue-9};
|
||||
--l-blue-10: #{$blue-10};
|
||||
|
||||
--l-info-color-1: #{$info-color-1};
|
||||
--l-info-color-2: #{$info-color-2};
|
||||
--l-info-color-3: #{$info-color-3};
|
||||
--l-info-color-4: #{$info-color-4};
|
||||
--l-info-color-5: #{$info-color-5};
|
||||
--l-info-color-6: #{$info-color-6};
|
||||
--l-info-color-7: #{$info-color-7};
|
||||
--l-info-color-8: #{$info-color-8};
|
||||
--l-info-color-9: #{$info-color-9};
|
||||
--l-info-color-10: #{$info-color-10};
|
||||
|
||||
// 主色系
|
||||
--l-primary-color-1: #{$primary-color-1};
|
||||
--l-primary-color-2: #{$primary-color-2};
|
||||
--l-primary-color-3: #{$primary-color-3};
|
||||
--l-primary-color-4: #{$primary-color-4};
|
||||
--l-primary-color-5: #{$primary-color-5};
|
||||
--l-primary-color-6: #{$primary-color-6};
|
||||
--l-primary-color-7: #{$primary-color-7};
|
||||
--l-primary-color-8: #{$primary-color-8};
|
||||
--l-primary-color-9: #{$primary-color-9};
|
||||
--l-primary-color-10: #{$primary-color-10};
|
||||
|
||||
// 错误色系
|
||||
--l-error-color-1: #{$error-color-1};
|
||||
--l-error-color-2: #{$error-color-2};
|
||||
--l-error-color-3: #{$error-color-3};
|
||||
--l-error-color-4: #{$error-color-4};
|
||||
--l-error-color-5: #{$error-color-5};
|
||||
--l-error-color-6: #{$error-color-6};
|
||||
--l-error-color-7: #{$error-color-7};
|
||||
--l-error-color-8: #{$error-color-8};
|
||||
--l-error-color-9: #{$error-color-9};
|
||||
--l-error-color-10: #{$error-color-10};
|
||||
|
||||
// 警告色系
|
||||
--l-warning-color-1: #{$warning-color-1};
|
||||
--l-warning-color-2: #{$warning-color-2};
|
||||
--l-warning-color-3: #{$warning-color-3};
|
||||
--l-warning-color-4: #{$warning-color-4};
|
||||
--l-warning-color-5: #{$warning-color-5};
|
||||
--l-warning-color-6: #{$warning-color-6};
|
||||
--l-warning-color-7: #{$warning-color-7};
|
||||
--l-warning-color-8: #{$warning-color-8};
|
||||
--l-warning-color-9: #{$warning-color-9};
|
||||
--l-warning-color-10: #{$warning-color-10};
|
||||
|
||||
// 成功色系
|
||||
--l-success-color-1: #{$success-color-1};
|
||||
--l-success-color-2: #{$success-color-2};
|
||||
--l-success-color-3: #{$success-color-3};
|
||||
--l-success-color-4: #{$success-color-4};
|
||||
--l-success-color-5: #{$success-color-5};
|
||||
--l-success-color-6: #{$success-color-6};
|
||||
--l-success-color-7: #{$success-color-7};
|
||||
--l-success-color-8: #{$success-color-8};
|
||||
--l-success-color-9: #{$success-color-9};
|
||||
--l-success-color-10: #{$success-color-10};
|
||||
|
||||
// 灰色系
|
||||
--l-gray-1: #{$gray-1};
|
||||
--l-gray-2: #{$gray-2};
|
||||
--l-gray-3: #{$gray-3};
|
||||
--l-gray-4: #{$gray-4};
|
||||
--l-gray-5: #{$gray-5};
|
||||
--l-gray-6: #{$gray-6};
|
||||
--l-gray-7: #{$gray-7};
|
||||
--l-gray-8: #{$gray-8};
|
||||
--l-gray-9: #{$gray-9};
|
||||
--l-gray-10: #{$gray-10};
|
||||
--l-gray-11: #{$gray-11};
|
||||
--l-gray-12: #{$gray-12};
|
||||
--l-gray-13: #{$gray-13};
|
||||
--l-gray-14: #{$gray-14};
|
||||
|
||||
// 文字颜色
|
||||
--l-text-color-1: #{$text-color-1};
|
||||
--l-text-color-2: #{$text-color-2};
|
||||
--l-text-color-3: #{$text-color-3};
|
||||
--l-text-color-4: #{$text-color-4};
|
||||
|
||||
// 容器背景色
|
||||
--l-bg-color-page: #{$bg-color-page};
|
||||
--l-bg-color-container: #{$bg-color-container};
|
||||
--l-bg-color-elevated: #{$bg-color-elevated};
|
||||
--l-bg-color-spotlight: #{$bg-color-spotlight};
|
||||
--l-bg-color-mask: #{$bg-color-mask};
|
||||
|
||||
// 填充色
|
||||
--l-fill-1: #{$fill-1};
|
||||
--l-fill-2: #{$fill-2};
|
||||
--l-fill-3: #{$fill-3};
|
||||
--l-fill-4: #{$fill-4};
|
||||
|
||||
// 描边色
|
||||
--l-border-color-1: #{$border-color-1};
|
||||
--l-border-color-2: #{$border-color-2};
|
||||
--l-border-color-3: #{$border-color-3};
|
||||
--l-border-color-4: #{$border-color-4};
|
||||
|
||||
// loading
|
||||
--l-loading-text-color: #{$text-color-3};
|
||||
|
||||
// load-more
|
||||
--l-load-more-text-color: #{$text-color-3};
|
||||
--l-load-more-color: #{$text-color-4};
|
||||
|
||||
// 按钮
|
||||
--l-button-default-solid-text-color: #000;
|
||||
--l-button-default-border-color: #{$gray-5};
|
||||
--l-button-default-color: #{$gray-14};
|
||||
--l-button-default-light-color: #{$gray-4};
|
||||
--l-button-default-light-hover-color: #{$gray-5};
|
||||
--l-button-primary-light-color: #{$primary-color-2};
|
||||
--l-button-primary-light-hover-color: #{$primary-color-3};
|
||||
--l-button-danger-light-color: #{$error-color-2};
|
||||
--l-button-danger-light-hover-color: #{$error-color-3};
|
||||
--l-button-warning-light-color: #{$warning-color-2};
|
||||
--l-button-warning-light-hover-color: #{$warning-color-3};
|
||||
--l-button-success-light-color: #{$success-color-2};
|
||||
--l-button-success-light-hover-color: #{$success-color-3};
|
||||
--l-button-info-light-color: #{$info-color-1};
|
||||
--l-button-info-light-hover-color: #{$info-color-2};
|
||||
--l-button-primary-color: #{$primary-color-6};
|
||||
--l-button-danger-color: #{$error-color-6};
|
||||
--l-button-warning-color: #{$warning-color-6};
|
||||
--l-button-info-color: #{$info-color-6};
|
||||
|
||||
// 遮罩
|
||||
// --l-overlay-bg-color: #{$bg-color-mask};
|
||||
// 弹窗
|
||||
--l-popup-bg-color: #{$bg-color-elevated};
|
||||
--l-popup-close-icon-color: #{$text-color-2};
|
||||
|
||||
// 单元格
|
||||
--l-cell-group-title-color: #{$text-color-3};
|
||||
--l-cell-group-border-color: #{$border-color-3};
|
||||
--l-cell-bg-color: #{$bg-color-container};
|
||||
--l-cell-hover-color: #{$gray-3};
|
||||
--l-cell-border-color: #{$border-color-2};
|
||||
--l-cell-note-color: #{$text-color-3};
|
||||
--l-cell-description-color: #{$text-color-2};
|
||||
--l-cell-title-color: #{$text-color-1};
|
||||
--l-cell-right-icon-color: #{$text-color-3};
|
||||
|
||||
// 步进器
|
||||
--l-stepper-button-bg-color: #{$gray-4};
|
||||
--l-stepper-input-disabled-bg: #{$gray-3};
|
||||
--l-stepper-input-color: #{$text-color-1};
|
||||
--l-stepper-input-disabled-color: #{$text-color-4};
|
||||
--l-stepper-border-color: #{$gray-4};
|
||||
|
||||
// tabbar
|
||||
--l-tabbar-bg-color: #{$bg-color-container};
|
||||
--l-tabbar-border-color: #{$border-color-1};
|
||||
--l-tabbar-color: #{$text-color-1};
|
||||
--l-tabbar-active-color: #{$primary-color-6};
|
||||
--l-tabbar-active-bg-color: #{$primary-color-1};
|
||||
|
||||
// link
|
||||
--l-link-default-color: #{$text-color-1};
|
||||
|
||||
// image
|
||||
--l-image-loading-bg-color: #{$fill-3};
|
||||
--l-image-color: #{$text-color-3};
|
||||
|
||||
// divider 分割线
|
||||
--l-divider-color: #{$border-color-2};
|
||||
--l-divider-text-color: #{$text-color-2};
|
||||
|
||||
// card 卡片
|
||||
--l-card-bg-color: #{$bg-color-container};
|
||||
--l-card-title-color: #{$text-color-1};
|
||||
--l-card-extra-color: #{$text-color-3};
|
||||
--l-card-note-color: #{$text-color-3};
|
||||
--l-card-border-color: #{$border-color-2};
|
||||
|
||||
// grid 宫格
|
||||
--l-grid-item-bg-color: #{$bg-color-container};
|
||||
--l-grid-item-image-bg-color: #{$fill-4};
|
||||
--l-grid-item-text-color: #{$text-color-1};
|
||||
--l-grid-item-hover-bg-color: #{$fill-3};
|
||||
--l-grid-item-description-color: #{$text-color-3};
|
||||
--l-grid-item-border-color: #{$border-color-2};
|
||||
--l-grid-item-icon-color: #{$text-color-1};
|
||||
|
||||
// cascader 级联
|
||||
--l-cascader-title-color: #{$text-color-1};
|
||||
--l-cascader-bg-color: #{$bg-color-container};
|
||||
--l-cascader-cell-title-color: #{$text-color-1};
|
||||
--l-cascader-disabled-color: #{$text-color-3};
|
||||
--l-cascader-options-title-color: #{$text-color-3};
|
||||
--l-cascader-close-icon-color: #{$text-color-2};
|
||||
|
||||
// tabs 标签页
|
||||
--l-tab-nav-bg-color: #{$bg-color-container};
|
||||
--l-tab-content-bg-color: #{$bg-color-container};
|
||||
--l-tab-split-color: #{$border-color-1};
|
||||
--l-tab-item-color: #{$text-color-2};
|
||||
--l-tab-item-disabled-color: #{$text-color-4};
|
||||
|
||||
// checkbox 复选框
|
||||
--l-checkbox-border-icon-color: #{$gray-8};
|
||||
--l-checkbox-icon-bg-color: #{$bg-color-container};
|
||||
--l-checkbox-text-color: #{$text-color-1};
|
||||
--l-checkbox-icon-disabled-bg-color: #{$gray-3};
|
||||
--l-checkbox-icon-disabled-color: #{$gray-6};
|
||||
|
||||
// radio 单选框
|
||||
--l-radio-border-icon-color: #{$gray-8};
|
||||
--l-radio-icon-bg-color: #{$bg-color-container};
|
||||
--l-radio-text-color: #{$text-color-1};
|
||||
--l-radio-icon-disabled-bg-color: #{$gray-3};
|
||||
--l-radio-icon-disabled-color: #{$gray-6};
|
||||
|
||||
// search 搜索
|
||||
--l-search-bg-color: #{$fill-3};
|
||||
--l-search-icon-color: #{$text-color-4};
|
||||
--l-search-clear-icon-color: #{$text-color-4};
|
||||
--l-search-text-color: #{$text-color-1};
|
||||
--l-search-label-color: #{$text-color-1};
|
||||
--l-search-placeholder-color: #{$text-color-3};
|
||||
|
||||
// switch
|
||||
--l-switch-checked-disabled-color: #{$primary-color-3};
|
||||
--l-switch-unchecked-color: #{$gray-5};
|
||||
--l-switch-unchecked-disabled-color: #{$gray-4};
|
||||
|
||||
// input 输入框
|
||||
--l-input-text-color: #{$text-color-1};
|
||||
--l-input-tips-color: #{$text-color-3};
|
||||
--l-input-bg-color: #{$bg-color-container};
|
||||
--l-input-border-color: #{$border-color-2};
|
||||
--l-input-placeholder-text-color: #{$text-color-3};
|
||||
--l-input-prefix-icon-color: #{$text-color-1};
|
||||
--l-input-suffix-icon-color: #{$text-color-3};
|
||||
--l-input-label-text-color: #{$text-color-1};
|
||||
--l-input-suffix-text-color: #{$text-color-1};
|
||||
--l-input-disabled-text-color: #{$text-color-4};
|
||||
--l-input-disabled-bg-color: #{$fill-3};
|
||||
--l-input-border-color: #{$border-color-2};
|
||||
|
||||
// textarea
|
||||
--l-textarea-bg-color: #{$bg-color-container};
|
||||
--l-textarea-placeholder-color: #{$text-color-3};
|
||||
--l-textarea-text-color: #{$text-color-1};
|
||||
--l-textarea-label-color: #{$text-color-1};
|
||||
--l-textarea-indicator-text-color: #{$text-color-3};
|
||||
--l-textarea-border-color: #{$border-color-2};
|
||||
--l-textarea-disabled-text-color: #{$text-color-4};
|
||||
|
||||
// upload
|
||||
--l-upload-bg-color: #{$gray-4};
|
||||
--l-upload-add-bg-color: #{$gray-4};
|
||||
--l-upload-add-color: #{$text-color-3};
|
||||
|
||||
// picker
|
||||
--l-picker-bg-color: #{$bg-color-container};
|
||||
--l-picker-cancel-color: #{$text-color-2};
|
||||
--l-picker-title-color: #{$text-color-1};
|
||||
--l-picker-item-active-color: #{$text-color-1};
|
||||
--l-picker-mask-top-color: #{$gray-2};
|
||||
--l-picker-loading-mask-color: rgba(0,0,0,.6);
|
||||
--l-picker-item-color: #{$text-color-1};
|
||||
--l-picker-indicator-bg-color: #{$fill-3};
|
||||
|
||||
// empty
|
||||
--l-empty-opacity: 0.6;
|
||||
|
||||
// segmented
|
||||
--l-segmented-bg-color: #{$gray-4};
|
||||
--l-segmented-text-color: #{$text-color-2};
|
||||
--l-segmented-active-bg-color: #{$gray-5};
|
||||
|
||||
// keyboard
|
||||
--l-keyboard-bg-color: #{$bg-color-elevated};
|
||||
--l-keyboard-color: #{$text-color-1};
|
||||
--l-keyboard-key-bg-color: #{$gray-5};
|
||||
--l-keyboard-key-hover-bg-color: #{$gray-4};
|
||||
--l-keyboard-icon-bg-color: #{$gray-5};
|
||||
--l-keyboard-icon-color: #{$text-color-3};
|
||||
|
||||
// code-input
|
||||
--l-code-input-bg-color: #{$gray-4};
|
||||
--l-code-input-active-bg-color: #{$gray-5};
|
||||
--l-code-input-info-color: #{$text-color-3};
|
||||
--l-code-input-dot-color: #{$text-color-1};
|
||||
--l-code-input-text-color: #{$text-color-1};
|
||||
--l-code-input-cursor-color: #{$text-color-1};
|
||||
--l-code-input-active-border-color: #{$gray-6};
|
||||
|
||||
// steps
|
||||
--l-step-description-color: #{$text-color-3};
|
||||
--l-step-wait-circle-bg-color: #{$gray-4};
|
||||
--l-step-wait-circle-color: #{$text-color-3};
|
||||
--l-step-wait-title-color: #{$text-color-3};
|
||||
--l-step-wait-icon-color: #{$text-color-3};
|
||||
--l-step-wait-dot-border-color: #{$gray-5};
|
||||
--l-step-line-color: #{$gray-5};
|
||||
--l-step-finish-title-color: #{$text-color-1};
|
||||
--l-step-finish-circle-bg-color: #{$primary-color-2};
|
||||
--l-step-error-circle-bg-color: #{$error-color-2};
|
||||
|
||||
// date-strip
|
||||
--l-date-strip-bg-color: #{$bg-color-container};
|
||||
--l-date-strip-color: #{$text-color-1};
|
||||
--l-date-strip-prefix-color: #{$text-color-3};
|
||||
--l-date-strip-color: #{$text-color-2};
|
||||
|
||||
// slider
|
||||
--l-slider-rail-color: #{$gray-5};
|
||||
--l-slider-thumb-border-color: #{$gray-11};
|
||||
|
||||
// form
|
||||
--l-form-item-border-color: #{$border-color-2};
|
||||
--l-form-bg-color: #{$bg-color-container};
|
||||
--l-form-item-label-color: #{$text-color-1};
|
||||
|
||||
// color-picker
|
||||
--l-color-picker-color: #{$text-color-1};
|
||||
--l-color-picker-label-color: #{$text-color-2};
|
||||
--l-color-picker-field-bg-color: #{$fill-2};
|
||||
--l-color-picker-divider-color: #{$border-color-2};
|
||||
|
||||
// calendar
|
||||
--l-calendar-bg-color: #{$bg-color-container};
|
||||
--l-calendar-title-color: #{$text-color-1};
|
||||
--l-calendar-days-color: #{$text-color-2};
|
||||
--l-calendar-item-color: #{$text-color-1};
|
||||
--l-calendar-item-disabled-color: #{$text-color-4};
|
||||
--l-calendar-item-centre-color: #{$primary-color-2};
|
||||
--l-calendar-month-mark-color: #{$fill-3};
|
||||
--l-calendar-switch-mode-icon-color: #{$text-color-2};
|
||||
--l-calendar-switch-mode-icon-disabled-color: #{$text-color-4};
|
||||
--l-calendar-header-border-color: #{$border-color-2};
|
||||
|
||||
// loading
|
||||
--l-loading-text-color: #{$text-color-3};
|
||||
|
||||
// dialog
|
||||
--l-dialog-title-color: #{$text-color-1};
|
||||
--l-dialog-content-color: #{$text-color-2};
|
||||
--l-dialog-close-color: #{$text-color-3};
|
||||
// --l-dialog-bg-color: #{$bg-color-container};
|
||||
--l-dialog-bg-color: #{$gray-3};
|
||||
--l-dialog-split-color: #{$border-color-2};
|
||||
|
||||
// action-sheet
|
||||
--l-action-sheet-item-disabled-color: #{$text-color-4};
|
||||
--l-action-sheet-hover-color: #{$gray-3};
|
||||
--l-action-sheet-border-color: #{$border-color-1};
|
||||
--l-action-sheet-gap-color: #{$bg-color-page};
|
||||
--l-action-sheet-color: #{$text-color-1};
|
||||
--l-action-sheet-description-color: #{$text-color-3};
|
||||
--l-action-sheet-cancel-color: #{$text-color-1};
|
||||
--l-action-sheet-cancel-bg-color: #{$bg-color-container};
|
||||
--l-action-sheet-image-bg-color: #{$fill-3};
|
||||
--l-action-sheet-title-color: #{$text-color-1};
|
||||
--l-action-sheet-close-btn-color: #{$text-color-1};
|
||||
|
||||
// sorter
|
||||
--l-sorter-color: #{$text-color-1};
|
||||
|
||||
// floating-panel
|
||||
--l-floating-panel-bg-color: #{$bg-color-elevated};
|
||||
--l-floating-panel-bar-color: #{$fill-1};
|
||||
|
||||
// dropdown-menu
|
||||
--l-dropdown-menu-color: #{$text-color-1};
|
||||
--l-dropdown-menu-bg-color: #{$bg-color-container};
|
||||
--l-dropdown-menu-border-color: #{$border-color-1};
|
||||
--l-dropdown-menu-disabled-color: #{$border-color-3};
|
||||
--l-dropdown-menu-arrow-color: #{$gray-6};
|
||||
--l-dropdown-menu-arrow-active-color: #{$gray-4};
|
||||
--l-dropdown-item-cell-title-color: #{$text-color-1};
|
||||
|
||||
// pull-refresh
|
||||
--l-pull-refresh-refresher-color: #{$text-color-2};
|
||||
|
||||
// circle
|
||||
--l-circle-trail-color: #{$gray-5};
|
||||
|
||||
// collapse
|
||||
--l-collapse-panel-bg-color: #{$bg-color-container};
|
||||
--l-collapse-content-text-color: #{$text-color-1};
|
||||
--l-collapse-right-icon-color: #{$text-color-4};
|
||||
--l-collapse-border-color: #{$border-color-2};
|
||||
|
||||
// count-down
|
||||
--l-count-down-text-color: #{$text-color-1};
|
||||
|
||||
// empty
|
||||
--l-empty-description-color: #{$text-color-3};
|
||||
// progress
|
||||
--l-progress-trail-color: #{$gray-5};
|
||||
--l-progress-text-color: #{$text-color-2};
|
||||
|
||||
// tag
|
||||
// --l-tag-default-solid-text-color: #000;
|
||||
--l-tag-text-color: #{$gray-14};
|
||||
--l-tag-default-color: #{$gray-6};
|
||||
--l-tag-default-light-color: #{$gray-4};
|
||||
--l-tag-default-border-color: #{$gray-5};
|
||||
--l-tag-primary-light-color: #{$primary-color-2};
|
||||
--l-tag-danger-light-color: #{$error-color-2};
|
||||
--l-tag-warning-light-color: #{$warning-color-2};
|
||||
--l-tag-success-light-color: #{$success-color-2};
|
||||
|
||||
// amount
|
||||
--l-amount-color: #{$text-color-1};
|
||||
|
||||
// avatar
|
||||
--l-avatar-bg-color: #{$primary-color-1};
|
||||
--l-avatar-border-color: #{$gray-2};
|
||||
|
||||
// highlight
|
||||
--l-highlight-normal-color: #{$text-color-1};
|
||||
|
||||
// text-ellipsis
|
||||
--l-text-ellipsis-color: #{$text-color-1};
|
||||
|
||||
// read-more
|
||||
--l-read-more-handle-color: #{$text-color-2};
|
||||
--l-read-more-read-start: rgba(36, 36, 36, 0.9);
|
||||
--l-read-more-read-end: rgba(36, 36, 36, 0.3);
|
||||
--l-read-more-mask-bg-color: linear-gradient(
|
||||
to top,
|
||||
rgba(0,0,0,0),
|
||||
rgba(0,0,0,1),
|
||||
);
|
||||
// notice-bar
|
||||
--l-notice-bar-info-bg-color: #{$info-color-1};
|
||||
--l-notice-bar-success-bg-color: #{$success-color-1};
|
||||
--l-notice-bar-warning-bg-color: #{$warning-color-1};
|
||||
--l-notice-bar-danger-bg-color: #{$error-color-1};
|
||||
|
||||
// scrollx
|
||||
--l-scrollx-track-color: #{$gray-4};
|
||||
|
||||
// dateformat
|
||||
--l-dateformat-color: #{$text-color-1};
|
||||
|
||||
// footer
|
||||
--l-footer-text-color: #{$text-color-3};
|
||||
--l-footer-link-dividing-line-color: #{$text-color-3};
|
||||
--l-footer-logo-title-color: #{$text-color-1};
|
||||
|
||||
// tree
|
||||
--l-tree-node-text-color: #{$text-color-1};
|
||||
--l-tree-arrow-color: #{$gray-6};
|
||||
|
||||
// table
|
||||
--l-table-bg-color: #{$bg-color-container};
|
||||
--l-table-border-color: #{$border-color-2};
|
||||
--l-table-td-fixed-bg-color: #{$bg-color-container};
|
||||
--l-table-tr-fixed-bg-color: #{$bg-color-container};
|
||||
|
||||
// sidebar
|
||||
--l-sidebar-bg-color: #{$gray-3};
|
||||
--l-sidebar-selected-bg-color: #{$bg-color-container};
|
||||
--l-sidebar-text-color: #{$text-color-2};
|
||||
--l-sidebar-disabled-text-color: #{$text-color-4};
|
||||
|
||||
// back-top
|
||||
--l-back-top-bg-color: #{$bg-color-elevated};
|
||||
--l-back-top-border-color: #{$border-color-2};
|
||||
--l-back-top-text-color: #{$text-color-2};
|
||||
|
||||
// navbar
|
||||
--l-navbar-bg-color: #{$bg-color-container};
|
||||
--l-navbar-color: #{$text-color-1};
|
||||
--l-navbar-capsule-border-color: #{$border-color-2};
|
||||
|
||||
// pagination
|
||||
--l-pagination-bg-color: #{$gray-4};
|
||||
--l-pagination-disabled-bg-color: #{$gray-3};
|
||||
--l-pagination-hover-bg-color: #{$gray-5};
|
||||
--l-pagination-text-color: #{$text-color-2};
|
||||
--l-pagination-disabled-color: #{$text-color-4};
|
||||
--l-pagination-simple-text-color: #{$text-color-1};
|
||||
|
||||
// indexes
|
||||
--l-indexes-sidebar-color: #{$text-color-1};
|
||||
--l-indexes-anchor-color: #{$text-color-1};
|
||||
--l-indexes-anchor-bg-color: #{$gray-4};
|
||||
--l-indexes-anchor-active-bg-color: #{$gray-4};
|
||||
--l-indexes-sidebar-tips-bg-color: #{$primary-color-1};
|
||||
|
||||
// typing
|
||||
--l-typing-bg-color: #{$bg-color-container};
|
||||
--l-typing-text-color: #{$text-color-1};
|
||||
|
||||
// fit-swiper
|
||||
--l-fit-swiper-indicator-color: #{$gray-5};
|
||||
}
|
||||
181
uni_modules/lime-style/theme/default.scss
Normal file
181
uni_modules/lime-style/theme/default.scss
Normal file
@@ -0,0 +1,181 @@
|
||||
@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);
|
||||
|
||||
$info-color-1: genColor($info-color, 1);
|
||||
$info-color-2: genColor($info-color, 2);
|
||||
$info-color-3: genColor($info-color, 3);
|
||||
$info-color-4: genColor($info-color, 4);
|
||||
$info-color-5: genColor($info-color, 5);
|
||||
$info-color-6: $info-color;
|
||||
$info-color-7: genColor($info-color, 7);
|
||||
$info-color-8: genColor($info-color, 8);
|
||||
$info-color-9: genColor($info-color, 9);
|
||||
$info-color-10: genColor($info-color, 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));
|
||||
|
||||
$white: create-var('white', #fff);
|
||||
$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);
|
||||
$black: create-var('black', #000);
|
||||
|
||||
// $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
|
||||
$text-color-1: create-var('text-color-1', #000000E0); // primary (rgba(0,0,0,0.88))
|
||||
$text-color-2: create-var('text-color-2', #000000A6); // secondary (rgba(0,0,0,0.65))
|
||||
$text-color-3: create-var('text-color-3', #00000073); // placeholder (rgba(0,0,0,0.45))
|
||||
$text-color-4: create-var('text-color-4', #00000040); // disabled (rgba(0,0,0,0.25))
|
||||
|
||||
// 容器
|
||||
$bg-color-page: create-var('bg-color-page', $gray-1); // 整体背景色 布局
|
||||
$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));
|
||||
$fill-1: create-var('fill-1', #00000026); // rgba(0,0,0,0.15)
|
||||
$fill-2: create-var('fill-2', #0000000F); // rgba(0,0,0,0.06)
|
||||
$fill-3: create-var('fill-3', #0000000A); // rgba(0,0,0,0.04)
|
||||
$fill-4: create-var('fill-4', #00000005); // 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 UNI-APP-X && APP */
|
||||
$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 UNI-APP-X && APP */
|
||||
$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); // 浅色的选中态
|
||||
|
||||
$primary-color: create-var(primary-color, $primary-color);
|
||||
$error-color: create-var(error-color, $error-color);
|
||||
$warning-color: create-var(warning-color, $warning-color);
|
||||
$success-color: create-var(success-color, $success-color);
|
||||
$info-color: create-var(info-color, $info-color);
|
||||
67
uni_modules/lime-style/token/dark.uts
Normal file
67
uni_modules/lime-style/token/dark.uts
Normal file
@@ -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)
|
||||
}
|
||||
49
uni_modules/lime-style/token/genFontMapToken.uts
Normal file
49
uni_modules/lime-style/token/genFontMapToken.uts
Normal file
@@ -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],
|
||||
};
|
||||
};
|
||||
30
uni_modules/lime-style/token/genFontSizes.uts
Normal file
30
uni_modules/lime-style/token/genFontSizes.uts
Normal file
@@ -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));
|
||||
}
|
||||
63
uni_modules/lime-style/token/genRadius.uts
Normal file
63
uni_modules/lime-style/token/genRadius.uts
Normal file
@@ -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],
|
||||
])
|
||||
}
|
||||
20
uni_modules/lime-style/token/genSizeMapToken.uts
Normal file
20
uni_modules/lime-style/token/genSizeMapToken.uts
Normal file
@@ -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
|
||||
};
|
||||
}
|
||||
184
uni_modules/lime-style/token/interface.uts
Normal file
184
uni_modules/lime-style/token/interface.uts
Normal file
@@ -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
|
||||
66
uni_modules/lime-style/token/light.uts
Normal file
66
uni_modules/lime-style/token/light.uts
Normal file
@@ -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)
|
||||
}
|
||||
24
uni_modules/lime-style/token/shared.uts
Normal file
24
uni_modules/lime-style/token/shared.uts
Normal file
@@ -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
|
||||
}
|
||||
|
||||
126
uni_modules/lime-style/token/useThemeMode.uts
Normal file
126
uni_modules/lime-style/token/useThemeMode.uts
Normal file
@@ -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
|
||||
123
uni_modules/lime-style/token/useThemeVars.uts
Normal file
123
uni_modules/lime-style/token/useThemeVars.uts
Normal file
@@ -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
|
||||
}
|
||||
}
|
||||
13
uni_modules/lime-style/token/vue.ts
Normal file
13
uni_modules/lime-style/token/vue.ts
Normal file
@@ -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
|
||||
64
uni_modules/lime-style/var.scss
Normal file
64
uni_modules/lime-style/var.scss
Normal file
@@ -0,0 +1,64 @@
|
||||
@import './mixins/create.scss';
|
||||
// 公共前缀
|
||||
$prefix: l !default;
|
||||
|
||||
// Spacer
|
||||
$spacer: create-var('spacer', 16px) !default; // base
|
||||
$spacer-tn: create-var('spacer-tn', 4px) !default; // Tiny
|
||||
$spacer-xs: create-var('spacer-xs', 8px) !default; // Extra Small
|
||||
$spacer-sm: create-var('spacer-sm', 12px) !default; // Small
|
||||
$spacer-md: create-var('spacer-md', 24px) !default; // Medium
|
||||
$spacer-lg: create-var('spacer-lg', 32px) !default; // Large
|
||||
$spacer-xl: create-var('spacer-xl', 48px) !default; // Extra Large
|
||||
$spacer-hg: create-var('spacer-hg', 80px) !default; // Huge //Ultra Big
|
||||
|
||||
// Font 官方建议字体不跟随页面变化
|
||||
$font-size: create-var('font-size', 14px) !default;
|
||||
$font-size-xs: create-var('font-size-xs', 10px) !default;
|
||||
$font-size-sm: create-var('font-size-sm', 12px) !default;
|
||||
$font-size-md: create-var('font-size-md', 16px) !default;
|
||||
$font-size-lg: create-var('font-size-lg',20px) !default;
|
||||
$font-size-xl: create-var('font-size-xl', 36px) !default;
|
||||
|
||||
$font-size-heading-1: create-var('font-size-heading-1', 38px) !default;
|
||||
$font-size-heading-2: create-var('font-size-heading-2', 30px) !default;
|
||||
$font-size-heading-3: create-var('font-size-heading-3', 24px) !default;
|
||||
$font-size-heading-4: create-var('font-size-heading-4', 20px) !default;
|
||||
$font-size-heading-5: create-var('font-size-heading-5', 16px) !default;
|
||||
|
||||
|
||||
$font-family: create-var('font-family', PingFang SC, Microsoft YaHei, Arial Regular) !default; // 字体-磅数-常规
|
||||
$font-family-md: create-var('font-family-md', PingFang SC, Microsoft YaHei, Arial Medium) !default; // 字体-磅数-粗体
|
||||
|
||||
|
||||
// 行高
|
||||
$line-height: create-var('line-height', 1.5714285714285714) !default;
|
||||
$line-height-sm: create-var('line-height-sm', 1.6666666666666667) !default;
|
||||
$line-height-md: create-var('line-height-lg', 1.5) !default;
|
||||
$line-height-lg: create-var('line-height-lg', 1.4) !default;
|
||||
|
||||
$line-height-heading-1: create-var('line-height-heading-1', 1.2105263157894737) !default;
|
||||
$line-height-heading-2: create-var('line-height-heading-2', 1.2666666666666666) !default;
|
||||
$line-height-heading-3: create-var('line-height-heading-3', 1.3333333333333333) !default;
|
||||
$line-height-heading-4: create-var('line-height-heading-4', 1.4) !default;
|
||||
$line-height-heading-5: create-var('line-height-heading-5', 1.5) !default;
|
||||
|
||||
|
||||
// 圆角
|
||||
$border-radius: create-var('border-radius', 6px) !default;
|
||||
$border-radius-xs: create-var('border-radius-xs', 2px) !default;
|
||||
$border-radius-sm: create-var('border-radius-sm', 3px) !default;
|
||||
$border-radius-md: create-var('border-radius-md', 6px) !default;
|
||||
$border-radius-lg: create-var('border-radius-lg', 9px) !default;
|
||||
$border-radius-xl: create-var('border-radius-xl', 12px) !default;
|
||||
$border-radius-hg: create-var('border-radius-hg', 999px) !default;
|
||||
// $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)) !default;
|
||||
$anim-time-fn-ease-out: create-var('anim-time-fn-ease-out', cubic-bezier(0, 0, 0.15, 1)) !default;
|
||||
$anim-time-fn-ease-in: create-var('anim-time-fn-ease-in', cubic-bezier(0.82, 0, 1, 0.9)) !default;
|
||||
$anim-duration-base: create-var('anim-duration-base', 0.2s) !default;
|
||||
$anim-duration-moderate: create-var('anim-duration-moderate', 0.24s) !default;
|
||||
$anim-duration-slow: create-var('anim-duration-slow', 0.28s) !default;
|
||||
Reference in New Issue
Block a user