设计变量

B+ Design 提供了一套完整的 CSS 设计变量（Design Token），覆盖颜色、圆角、字体等基础样式，便于在业务中统一使用和主题定制。

使用方式

CSS 变量

引入组件库样式后，所有 --fs-* 变量自动挂载在 :root，CSS/Less/SCSS 均可直接使用：

.my-element {
  color: var(--fs-blue-base);
  border-radius: var(--fs-radius-base);
  font-size: var(--fs-font-base);
}

Less 变量

组件库构建产物中包含完整的 Less 变量文件，路径为 @fs/smart-design/dist/styles/settings/。

方式一：按需引入

在需要使用的 .less 文件顶部手动引入：

// 只引入颜色变量
@import '@fs/smart-design/dist/styles/settings/color.less';

// 或引入全部变量（颜色、圆角、间距等）
@import '@fs/smart-design/dist/styles/settings/var.less';

.my-button {
  background: @blue-base;
  border-radius: @border-radius-base;
  color: @grey-1;
}

方式二：Vite 全局注入（推荐）

在项目 vite.config.ts 中配置一次，所有 .less 文件无需单独引入即可使用变量：

// vite.config.ts
import path from 'path'

export default defineConfig({
  css: {
    preprocessorOptions: {
      less: {
        // 使用 (reference) 只导入变量定义，不输出多余 CSS
        modifyVars: {
          hack: `true; @import (reference) "${path.resolve('node_modules/@fs/smart-design/dist/styles/settings/var.less')}";`,
        },
        javascriptEnabled: true,
      },
    },
  },
})

配置后直接使用，无需任何 import：

.my-element {
  color: @blue-base;
  background: @buleGrey-base-2;
}

变量类型

变量类型	说明
颜色	主题色、功能色、中性色
圆角	基础圆角、按钮圆角、卡片圆角
间距	内边距、外边距尺度
阴影	层级阴影
字体	字号、字重、行高

颜色变量

主题色（Blue）

错误色（Red）

警告色（Orange）

成功色（Green）

扩展色（Cyan）

扩展色（Lime）

扩展色（Pink）

扩展色（Purple）

品牌中性灰（BlueGrey）

中性灰（Grey）

圆角变量

变量名	默认值	说明
--fs-radius-sm	2px	小圆角
--fs-radius-base	3px	中圆角（基础圆角）
--fs-radius-lg	4px	大圆角
--fs-radius-round	50%	全圆角
@border-radius-base	3px	组件浮层圆角（按钮、输入框等）

间距变量

变量名	默认值	说明
--fs-spacing-mini	2px 4px	迷你间距
--fs-spacing-sm	8px 12px	小间距
--fs-spacing-md	16px 20px 24px	中间距
--fs-spacing-lg	32px	大间距
--fs-spacing-xl	40px	超大间距

阴影变量

变量名	默认值	说明
@box-shadow-base	0px 4px 12px 1px rgba(88, 98, 110, 0.14)	基础阴影（默认浮层）
@shadow-2	0px 4px 12px 1px rgba(88, 98, 110, 0.14)	二级阴影
@shadow-3 / --fs-shadow-3	0px 2px 8px 0px rgba(88, 98, 110, 0.08)	三级阴影
@shadow-1-up	0 -6px 14px 2px rgba(88, 98, 110, 0.18)	向上阴影
@shadow-1-down	0 6px 14px 2px rgba(88, 98, 110, 0.18)	向下阴影
@shadow-1-left	-6px 0 14px 2px rgba(88, 98, 110, 0.18)	向左阴影
@shadow-1-right	6px 0 14px 2px rgba(88, 98, 110, 0.18)	向右阴影

字体变量

变量名	默认值	说明
--fs-font-base	14px	基础字号（CSS 变量）
@font-size-base	12px	全局主字号
@line-height-base	1.5	基础行高（字号14时单独设置行高22px）
@heading-color	#333	标题文字颜色
@text-color	#333	主文本颜色
@text-color-secondary	#666	次文本颜色
@disabled-color	#bbbbbb	失效状态文字颜色
@drawer-title-font-size	16px	抽屉标题字号
@drawer-title-line-height	24px	抽屉标题行高
@steps-title-line-height	24px	步骤条标题行高
@steps-icon-font-size	16px	步骤条图标字号
@avatar-font-size-base	16px	头像文字字号（默认）
@avatar-font-size-lg	32px	头像文字字号（大）
@avatar-font-size-sm	14px	头像文字字号（小）
@avatar-font-size-mini	12px	头像文字字号（迷你）