更新记录

2.1.1（2026-11-09） 下载此版本

• feat: v2 暗黑主题新增 l-indexes-bar、l-scroll-spy-anchor 组件变量
• refactor: v2 暗黑主题移除已失效的 indexes-nav、indexes-sticky-header、indexes-anchor-active 变量

0.2.5（2025-12-15） 下载此版本

• chore: 更新函数

0.2.4（2025-11-14） 下载此版本

• feat: 优化create-var

平台兼容性

uni-app(4.44)

uni-app x(4.61)

name: lime-style 设计系统 description: lime-ui 组件库的设计系统，提供统一的颜色 Token、间距、圆角、字体、阴影等设计变量，以及 BEM 命名系统和布局 Mixins。 tags:

• style
• 设计
• 主题

• SASS plugin: lime-style category: SDK 工具库 dependencies: []

lime-style

lime-style 是 lime-ui 组件库的设计系统，提供统一的颜色 Token、间距、圆角、字体、阴影等设计变量，以及 BEM 命名系统和布局 Mixins，支持 uni-app / uni-app x 蒸汽模式跨平台兼容。

插件依赖：无

安装方法

1. 在 uni-app 插件市场中搜索并导入 lime-style
2. 导入后即可在组件样式中使用

v2 样式系统

v2 是当前推荐的样式系统，使用 Tailwind 风格色阶和语义化 Token，兼容 uni-app x 蒸汽模式。

引入方式

// 组件样式
@use '~@/uni_modules/lime-style/v2/index.scss' as *;

// 暗黑模式（按需引入）
@use '@/uni_modules/lime-style/v2/dark' as *;

不需要手动设置 $use-css-var: true，由系统自动根据平台处理。

颜色系统

功能色（Tailwind 风格色阶）

// 主色
$primary-50, $primary-100, $primary-200, $primary-300, $primary-400
$primary-500  // 主色/品牌色
$primary-600, $primary-700, $primary-800, $primary-900, $primary-950

// 成功色
$success-50 ~ $success-950

// 警告色
$warning-50 ~ $warning-950

// 错误色
$error-50 ~ $error-950

// 信息色
$info-50 ~ $info-950

色阶使用指南

中性色

$gray-50, $gray-100, $gray-200, $gray-300, $gray-400
$gray-500
$gray-600, $gray-700, $gray-800, $gray-900, $gray-950

交互状态色

$primary-hover    // 悬浮状态（引用 700 色阶）
$primary-select   // 选中状态（引用 100 色阶）
$primary-active   // 激活状态（引用 500 色阶）
// success / warning / error / info 同理

柔和色（用于 Soft/Filled 按钮等）

$primary-soft        // 柔和背景（引用 50 色阶）
$primary-soft-hover  // 柔和背景 hover（引用 100 色阶）
// success / warning / error / info 同理

语义化颜色

背景色

$bg-page       // 页面背景（最深）
$bg-surface    // 卡片、面板容器
$bg-secondary  // 列表项、Tab 轨道
$bg-tertiary   // 搜索框、输入框背景
$bg-raised     // 凸起背景：Segmented/Tab 选中项
$bg-elevated   // 浮层背景：弹窗、下拉框
$bg-spotlight  // 信息提示：Toast、Tooltip

文字色

$text-primary     // 主要文字
$text-secondary   // 次要文字
$text-tertiary    // 占位符文字
$text-quaternary  // 禁用文字

边框色

$border-primary     // 主要边框
$border-secondary   // 次要边框
$border-tertiary    // 深色边框
$border-quaternary  // 最深边框

填充色

$fill-primary     // 主要填充
$fill-secondary   // 次要填充
$fill-tertiary    // 三级填充
$fill-quaternary  // 四级填充

其他

$overlay      // 遮罩层
$white        // 白色
$black        // 黑色

间距

$space-xs    // 4px
$space-sm    // 8px
$space-base  // 12px
$space-md    // 16px
$space-lg    // 24px
$space-xl    // 32px
$space-2xl   // 48px
$space-3xl   // 64px

圆角

$radius-xs   // 2px
$radius-sm   // 4px
$radius-base // 6px
$radius-md   // 8px
$radius-lg   // 12px
$radius-xl   // 16px
$radius-full // 9999px（全圆角）

字体

// 字号
$font-size-xs    // 10px
$font-size-sm    // 12px
$font-size-base  // 14px
$font-size-md    // 16px
$font-size-lg    // 20px
$font-size-xl    // 24px
$font-size-2xl   // 28px
$font-size-3xl   // 36px

// 行高
$line-height     // 1.5714（默认）
$line-height-sm  // 1.6667
$line-height-md  // 1.5
$line-height-lg  // 1.4

阴影

$shadow-sm    // 0 1px 4px 0 rgba(0,0,0,0.04)
$shadow-base  // 0 2px 6px 0 rgba(0,0,0,0.08)
$shadow-md    // 0 4px 12px 0 rgba(0,0,0,0.10)
$shadow-lg    // 0 8px 24px 0 rgba(0,0,0,0.08)
$shadow-xl    // 0 12px 36px 0 rgba(0,0,0,0.10)

Z-Index 层级

$z-dropdown    // 950  下拉菜单
$z-sticky      // 960  吸顶元素
$z-fixed       // 970  固定定位（FAB等）
$z-tooltip     // 980  工具提示
$z-popover     // 990  气泡提示
$z-modal-back  // 997  模态框背景（遮罩层）
$z-modal       // 998  模态框

透明度

$opacity-0   // 0
$opacity-50  // 0.05
$opacity-100 // 0.1
$opacity-150 // 0.15
$opacity-200 // 0.2
$opacity-250 // 0.25
$opacity-300 // 0.3
$opacity-400 // 0.4
$opacity-500 // 0.5
$opacity-600 // 0.6
$opacity-700 // 0.7
$opacity-800 // 0.8
$opacity-900 // 0.9

动效

// 时长
$motion-duration-fast  // 0.1s
$motion-duration-mid   // 0.2s
$motion-duration-slow  // 0.3s

// 缓动曲线
$ease-out              // 减速停止，最常用
$ease-in-out           // 匀加速减速
$ease-out-circ         // 圆形减速
$ease-out-back         // 回弹效果

// 常用动效组合
$motion-fade           // opacity 0.2s ease-out
$motion-slide-up       // transform 0.2s ease-out
$motion-slide-down     // transform 0.2s ease-in-out
$motion-scale          // all 0.2s ease-out-back

CSS 变量（create-var）

create-var 函数用于创建跨平台兼容的 CSS 变量：

// 自动根据平台决定是否使用 CSS 变量
// Web/小程序：var(--l-my-color, #ff0000)
// App 原生：#ff0000
$my-color: create-var('my-color', #ff0000);

// 第三个参数 false 强制不使用 CSS 变量（Token 定义时常用）
$my-color: create-var('my-color', #ff0000, false);

组件中使用 CSS 变量

@use '~@/uni_modules/lime-style/v2/index.scss' as *;

// 定义组件级 CSS 变量
$overlay-bg-color: create-var(overlay-bg-color, $overlay);

@include bem('overlay') {
    background-color: $overlay-bg-color;

    @include m('transparent') {
        --l-overlay-bg-color: rgba(0,0,0,0);
    }
}

BEM 命名系统

引入

@use '~@/uni_modules/lime-style/v2/index.scss' as *;

核心 Mixins

示例

@include bem('card') {
    padding: $space-md;
    background: $bg-surface;
    border-radius: $radius-lg;

    @include e('header', 'body') {
        padding: $space-sm;
    }

    @include m('primary') {
        border: 1px solid $primary-500;
    }

    @include e('header') {
        @include m('compact') {
            padding: $space-xs;
        }
    }
}

布局 Mixins

基础布局

Flex 快捷方式

交互

文本

定位

安全区域

伪元素

动画

变换

更换色系

在 uni.scss 中覆盖种子变量：

// 品牌色-主色
$lime-primary-color: #3283ff;
// 错误色
$lime-error-color: #FF4D4F;
// 警告色
$lime-warning-color: #ffb400;
// 成功色
$lime-success-color: #34c471;
// 信息色
$lime-info-color: #3283ff;

暗黑模式

引入暗黑模式

@use '@/uni_modules/lime-style/v2/dark' as *;

暗黑模式原理

暗黑模式通过 CSS 变量覆盖实现。v2 系统在 dark.scss 中定义了暗黑主题的变量值，通过 theme-dark-selector mixin 处理不同平台的选择器：

• H5/小程序：@media (prefers-color-scheme: dark) 或 [data-lime-theme='dark']
• App 原生：.dark 类名

组件暗黑模式

组件暗黑主题配置位于 v2/components/ 目录，按组件拆分：

// v2/components/_common.scss - 通用暗黑主题
@mixin bg-colors-dark { ... }
@mixin text-colors-dark { ... }
@mixin border-colors-dark { ... }
@mixin fill-colors-dark { ... }

工具函数

最佳实践

使用语义化 Token（推荐）

// ✅ 推荐
background: $primary-hover;
color: $text-primary;
border: 1px solid $border-primary;

// ❌ 不推荐
background: $primary-700;

组件样式模板

@use '~@/uni_modules/lime-style/v2/index.scss' as *;

$my-component-bg: create-var(my-component-bg, $bg-surface);
$my-component-color: create-var(my-component-color, $text-primary);

@include bem('my-component') {
    background-color: $my-component-bg;
    color: $my-component-color;
    padding: $space-md;
    border-radius: $radius-md;

    @include e('title') {
        font-size: $font-size-lg;
        font-weight: bold;
    }

    @include m('disabled') {
        opacity: $opacity-300;
    }
}

文件结构

lime-style/
├── index.scss           # SCSS 主入口
├── index.ts             # TS 主入口（指向 v2/runtime）
├── v2/
│   ├── index.scss       # SCSS 主入口
│   ├── config.scss      # 配置（前缀等）
│   ├── dark.scss        # 暗黑模式入口
│   ├── skill.md         # AI Skill 文档
│   ├── tokens/          # 编译时：SCSS 静态设计变量
│   │   ├── index.scss
│   │   ├── colors.scss
│   │   ├── _colorGen.scss
│   │   ├── _spacing.scss
│   │   ├── _font.scss
│   │   ├── _radius.scss
│   │   ├── _z.scss
│   │   └── _motion.scss
│   ├── runtime/         # 运行时：TS 主题管理 + 动态 Token（canvas 等场景）
│   │   ├── interface.ts
│   │   ├── light.ts
│   │   ├── dark.ts
│   │   ├── shared.ts
│   │   ├── useThemeMode.ts
│   │   ├── useThemeVars.ts
│   │   ├── genFontMapToken.ts
│   │   ├── genFontSizes.ts
│   │   ├── genSizeMapToken.ts
│   │   └── vue.ts
│   ├── mixins/          # 编译时：SCSS Mixins
│   │   ├── index.scss
│   │   ├── _create.scss
│   │   ├── _bem.scss
│   │   ├── _functions.scss
│   │   ├── _theme.scss
│   │   └── layout.scss
│   ├── theme/           # 编译时：SCSS 暗黑主题变量
│   │   ├── index.scss
│   │   └── dark.scss
│   └── components/      # 编译时：SCSS 组件暗黑主题
│       ├── index.scss
│       ├── _common.scss
│       └── _divider.scss
└── components/
    └── lime-style/      # 演示组件

三层目录对照