### 引用方式
```scss
@use "@befe/brick/src/style/theme";
```


### 标准色板
可移步 [色彩](/main/color) 了解更多
```scss

// === 基础色号 ===
$color-base-gray: #cccccc !default;
$color-base-brand: #4c84ff !default;       // 品牌色
$color-base-info: $color-base-brand !default;       // 功能色 - info
$color-base-success: #39bf45 !default;    // 功能色 - success
$color-base-warning: #f27c49 !default;   // 功能色 - warning
$color-base-danger: #e64552 !default;       // 功能色 - danger

// === 主题色色阶 ===
@function color-brand($nth: 6) {/*...*/}
@function color-brand-nature($nth: 6) {/*...*/}     // 主题中性色
@function color-gray($nth: 6) {/*...*/}             // 固定中性色
@function color-info($nth: 6) {/*...*/}
@function color-success($nth: 6) {/*...*/}
@function color-warning($nth: 6) {/*...*/}
@function color-danger($nth: 6) {/*...*/}

// === 基础彩色色阶 ===
@function color-red($nth: 6) {/*...*/}
@function color-orange($nth: 6) {/*...*/}
@function color-yellow($nth: 6) {/*...*/}
@function color-green($nth: 6) {/*...*/}
@function color-cyan($nth: 6) {/*...*/}
@function color-blue($nth: 6) {/*...*/}
@function color-purple($nth: 6) {/*...*/}
@function color-pink($nth: 6) {/*...*/}
```

### 标准用色
```scss
@use "./palette";

// === 分割线 ===
$color-border-normal: palette.color-gray(4) !default;     // 普通分割线
$color-border-intensive: palette.color-gray(5) !default;  // 加强分割线

$color-border-control: $color-border-intensive !default;
$color-border-control-hover: palette.color-gray(7) !default;

// === 文字 ===
$color-text-normal: palette.color-gray(9) !default;
$color-text-normal-active: palette.color-gray(10) !default;
$color-text-normal-hover: palette.color-gray(8) !default;
$color-text-normal-focus: $color-text-normal-hover !default;
$color-text-normal-disabled: palette.color-gray(6) !default;
$color-text-reverse: palette.color-gray(1) !default;

$color-text-primary: $color-text-normal !default;
$color-text-primary-active: $color-text-normal-active !default;
$color-text-primary-hover: $color-text-normal-hover !default;
$color-text-primary-focus: $color-text-primary-hover !default;
$color-text-primary-disabled: $color-text-normal-disabled !default;

$color-text-heading: $color-text-heading !default;
$color-text-secondary: palette.color-gray(8) !default; // 辅助文字
$color-text-hint: palette.color-gray(7) !default; // 引导，提示

// === 链接 ===
$color-link: $color-text-normal !default;
$color-link-hover: palette.color-brand(5) !default;
$color-link-active: palette.color-brand(7) !default;
$color-link-focus: palette.color-brand(5) !default;
$color-link-disabled: $color-text-disabled !default;

$color-link-intensive: palette.color-brand(6) !default;
$color-link-intensive-hover: $color-link-hover !default;
$color-link-intensive-active: $color-link-active !default;
$color-link-intensive-focus: $color-link-focus !default;
$color-link-intensive-disabled: palette.color-brand(2) !default;

// === icon ===
$color-icon-normal: palette.color-gray(7) !default;
$color-icon-normal-hover: palette.color-gray(9) !default;
$color-icon-normal-active: $color-icon-normal-hover !default;
$color-icon-disabled: palette.color-gray(6) !default;

//  === 背景 ===
$color-bg-normal: palette.color-gray(1) !default;
$color-bg-normal-hover: palette.color-gray(3) !default;
$color-bg-normal-active: palette.color-gray(4) !default;

$color-bg-intensive: palette.color-gray(2) !default;
$color-bg-intensive-hover: palette.color-gray(3) !default;
$color-bg-intensive-active: palette.color-gray(4) !default;

$color-bg-body: palette.color-gray(3) !default;

$color-bg-selection: palette.color-brand() !default;
```

### 基准规格
```scss
$base-size-list: (sm, md) !default;
$base-size: md !default;
```

### 文字
```scss
@use "sass:map";

$font-family: PingFang SC, Helvetica Neue, Hiragino Sans GB, Microsoft YaHei, Arial, SimSun, sans-serif !default;

// === 基础字号 ===
// 固定尺寸， 不提供配置
$font-size-12: 12px;
$font-size-14: 14px;
$font-size-16: 16px;
$font-size-18: 18px;
$font-size-20: 20px;
$font-size-24: 24px;
$font-size-32: 32px;

// === 标准尺寸字号 ===
$font-size-sm: $font-size-12 !default;
$font-size-md: $font-size-14 !default;
$font-size-lg: $font-size-16 !default;

// 根据尺寸取字号 (xs, sm, md, lg, xl)
@function font-size($size: $base-size) {/*...*/}

// 根据标题号取字号 (h1 ~ h6)
@function font-size-headline($h-size) {/*...*/}

// === 字重 ===
$font-weight-regular: 400 !default;
$font-weight-semibold: 600 !default;

// === 行高 ===
// 行高规格（紧凑，常规，宽松）
$line-spacing: ('compact', 'regular', 'loose') !default;
$line-spacing-base: 'regular' !default;

// 根据字号获得行高
@function line-height-compact($font-size) {/*...*/} // 紧凑
@function line-height-regular($font-size) {/*...*/} // 常规
@function line-height-loose($font-size) {/*...*/}   // 宽松
@function line-height-headline($font-size) {/*...*/}   // 标题

// 按行高规格同时修饰字号与行高
@mixin font-size-with-line-height($font-size: $font-size-base, $line-height-size: $line-spacing-base) {
    & {
        font-size: $font-size;
        line-height: line-height($font-size, $line-height-size);
    }
}
```

### 间距
```scss
// 单位间距
$padding-base: 4px !default;
// n * 间距基底
@function padding($times) {/*...*/}
```

### 高度
```scss
// 单位高度
$height-base: 4px !default;
// n * 单位高度
@function height($times) {/*...*/}
```

### 圆角
```scss
$border-radius-small: 2px !default; // R1
$border-radius-medium: 4px !default; // R2

```

### 阴影
```scss
@use "./palette";
// === 基础阴影 ===
// s1 常用用于组件内部或组件本身
$box-shadow-up-s1: 0 2px 8px 0 rgba(0, 0, 0, 0.15) !default;
$box-shadow-down-s1: 0 -4px 8px 0 rgba(0, 0, 0, 0.15) !default;
$box-shadow-left-s1: 4px 0 8px 0 rgba(0, 0, 0, 0.15) !default;
$box-shadow-right-s1: -4px 0 8px 0 rgba(0, 0, 0, 0.15) !default;

// s2 常用于板块或卡片强调
$box-shadow-up-s2: 0 4px 20px 0 rgba(0, 0, 0, 0.15) !default;

// === 通用阴影 ===
$box-shadow-base: $box-shadow-up-s1 !default;
$box-shadow-base-center: 0 0 8px 0 rgba(0, 0, 0, 0.15) !default;
$box-shadow-intensive: $box-shadow-up-s2 !default;

// === 特定阴影 ===
$box-shadow-popper: $box-shadow-base !default;
$box-shadow-popper-arrow: $box-shadow-base-center !default;
$box-shadow-dialog: $box-shadow-intensive !default;
$box-shadow-drawer: (
    left: $box-shadow-left-s1,
    right: $box-shadow-right-s1,
    top: $box-shadow-up-s1,
    bottom: $box-shadow-down-s1,
) !default;

// === focus 阴影 ===
// 功能色 -> 阴影色映射
$box-shadow-color: (
    #{palette.color-brand()}: palette.color-brand(2),
    #{palette.color-success()}: palette.color-success(2),
    #{palette.color-warning()}: palette.color-warning(2),
    #{palette.color-danger()}: palette.color-danger(2),
);
// 根据颜色获得 focus 阴影
@function box-shadow-focus($color: palette.color-brand()) {/*...*/}
```

### 边框
```scss
$border-width-base: 1px !default;
@function border($color: $color-border-normal, $style: solid, $width: $border-width-base) {/*...*/}
```

### z-index
```scss
$zindex-drawer: 960 !default;
$zindex-modal: 1000 !default;
$zindex-popper: 1030 !default;
$zindex-toast: 1080 !default; // make it biggest
```