### 开发规范

1. 主题(light, dark)
  > 主题功能, 暂时由根样式定义来实现, 所以, 组件内的样式, 尽可能避免过多的私有配色。

2. 组件几种配色样式, 暂时同大多数组件一致
  - `type=primary`  青色 (默认值)
  - `type=secondary`  暗色
  - `type=info`  蓝色
  - `type=success`  绿色
  - `type=warning`  橙色
  - `type=danger`  红色
  - `type=help`  灰色

3. 尺寸, 主要指 高度
  > 需要注意的是, 这里的高度, 仅为组件本身应该占的高度, 而非"可视内容"的真实高度, 比如 开关按钮, 实际上就可以不需要那么大。

  - `size=s`  小号, 20px
  - `size=m`  中号, 24px
  - `size=l`  大号,  32px (默认值)
  - `size=xl`  加大号, 36px
  - `size=xxl`  加加大号, 44px

4. 自带点击事件的组件, 统一增加"节流/防抖"逻辑
  > 统一为增加 `lazy="1000"` 属性实现


5. 暗色主题
各组件, 需要适配暗色主题。

```css
@media (prefers-color-scheme: dark) {
  // ...
}
```

6. 组件的额外自定义样式, 尽量使用css变量来做穿透
各组件的穿透样式变量名, 需要带命名空间

```css

// 外部定义
...
--wc-button-border-color: #f30;
...

// 内部实现

button {
  ...
  border: 1px solid var(--wc-button-border-color, var(--color-plain-1));
  // or
  border: 1px solid var(--wc-button-border-color, #f2f5fc);
  ...
}

```