{{ description }}
-``` - ## 样式实现优先级 - 业务组件的布局、间距、尺寸、排版、颜色和常见交互状态优先使用 Tailwind 工具类。 @@ -154,14 +129,6 @@ CSS、SCSS 先按照 `/* button */`、`/* dropdown */` 等业务注释划分样 同一业务分组内部的选择器按名称字母顺序排列;同一声明块内的属性按属性名字母顺序排列, CSS 自定义属性同样按变量名排序。嵌套选择器、伪类和媒体查询放在普通属性声明之后。 -示例: - -```vue -默认正文
-提示或描述信息
-``` - 这里描述的是一般使用原则;如果 Figma 对具体组件给出了明确颜色标注,应以对应原型为准。 ### 主题色 @@ -397,16 +271,7 @@ Tailwind 类。 颜色配置使用 RGB 通道字符串,模板通过 `rgb()` 设置原色、`rgba()` 设置浅色背景。 卡片背景由上层半透明渐变和下层白色渐变组成,CSS 背景列表中前面的图层位于上方。 -当前主题色为: - -```scss -:root { - --mk-primary: #3370ff; - --mk-primary-gradient-end: #7f3bf5; - --mk-primary-gradient: linear-gradient(180deg, var(--mk-primary) 0%, var(--mk-primary-gradient-end) 100%); - --mk-primary-rgb: 51 112 255; -} -``` +默认主题色为 `#3370ff`,渐变终点为 `#7f3bf5`。 修改主题色时,修改 `--mk-primary`。如果代码使用了 RGB 通道变量,也要同步修改 `--mk-primary-rgb`: `--mk-primary-gradient` 是 CSS 渐变背景入口,`--mk-primary-gradient-end` 是 SVG 渐变终点。 @@ -417,62 +282,27 @@ Tailwind 类。 不要直接写这些变量,也不要绕过项目变量写入 Element Plus 的 `--el-*` 主题变量。Element Plus 色阶继续由 `element-plus.scss` 基于 `--mk-primary` 映射生成。 -普通 CSS 中直接使用: - -```scss -.link { - color: var(--mk-primary); -} -``` +普通 CSS 使用 `color: var(--mk-primary)`。 ### Tailwind -`tailwind.css` 通过 Tailwind v4 的 `@theme` 将项目颜色变量注册为 Tailwind 颜色: - -```css -@theme { - --color-primary: var(--mk-primary); -} -``` +`tailwind.css` 通过 Tailwind v4 的 `@theme` 将项目颜色变量注册为 Tailwind 颜色。 变量名称与工具类名称的对应关系如下: -| Tailwind Token | 来源变量 | 工具类后缀 | -| -------------------- | -------------- | ------------ | -| `--color-mk-primary` | `--mk-primary` | `mk-primary` | - -`--color-*` 注册后可以组合生成文字、背景、边框、轮廓等颜色工具类: +| Tailwind Token | 来源变量 | 工具类后缀 | +| ----------------- | -------------- | ---------- | +| `--color-primary` | `--mk-primary` | `primary` | -```html -