设计变量

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-base	3px	基础圆角
@border-radius-base	3px	组件浮层圆角（按钮、输入框等）

间距变量

变量名	默认值	说明
--fs-len-base	8px	基础间距单位
@input-padding-vertical-base	6px	输入框垂直内边距（中）
@input-padding-horizontal-base	8px	输入框水平内边距（中）
@input-padding-vertical-lg	10px	输入框垂直内边距（大）
@input-padding-horizontal-lg	8px	输入框水平内边距（大）
@input-padding-vertical-sm	2px	输入框垂直内边距（小）
@input-padding-horizontal-sm	8px	输入框水平内边距（小）
@table-padding-vertical	24px	表格垂直内边距（默认）
@table-padding-horizontal	16px	表格水平内边距（默认）
@table-padding-vertical-md	16px	表格垂直内边距（中）
@table-padding-horizontal-md	16px	表格水平内边距（中）
@table-padding-vertical-sm	8px	表格垂直内边距（小）
@table-padding-horizontal-sm	16px	表格水平内边距（小）
@list-item-padding	16px 0	列表项内边距（默认）
@list-item-padding-sm	8px 0	列表项内边距（小）
@list-item-padding-lg	24px 0	列表项内边距（大）
@list-item-meta-avatar-margin-right	12px	列表项头像右外边距
@divider-text-padding	8px	分割线文字内边距
@divider-vertical-gutter	16px	垂直分割线间距
@breadcrumb-separator-margin	0 8px	面包屑分隔符外边距
@message-notice-content-padding	12px 16px	全局提示内边距
@notification-padding-vertical	24px	通知框垂直内边距
@notification-padding-horizontal	24px	通知框水平内边距
@alert-with-description-padding-vertical	8px	带描述警告框垂直内边距

阴影变量

变量名	默认值	说明
@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-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	基础行高
@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	头像文字字号（迷你）