style(ui): unify sky-atlas visual system
Centralize interactive component styles, adopt the fresh eucalyptus palette, and keep map controls square with hard shadows. Update project guidance and the OpenCloud style skill to match the implementation.
This commit is contained in:
+16
-1
@@ -15,6 +15,21 @@
|
||||
|
||||
`src/style.css` 只负责按以上顺序装配全局样式,不再直接堆放组件规则。
|
||||
|
||||
## 清新绿色策略
|
||||
|
||||
OpenCloud 的绿色应接近清晨的桉叶与嫩叶,而不是灰暗的苔藓色或高饱和的荧光青绿。
|
||||
|
||||
- 品牌、导航与账户交互使用清透但稳重的桉叶绿。
|
||||
- 成功、通过和公开状态使用更偏嫩叶的成功绿色,与品牌色保持区分。
|
||||
- `teal-*` 和 `emerald-*` 是现有模板的兼容类名,实际色值由 `tokens.css` 重映射;不要假定它们仍是 Tailwind 默认色。
|
||||
- 不直接使用 Tailwind 默认 `green-*`、`lime-*`,也不要在组件里写亮绿色十六进制值或 RGB。
|
||||
- 新增绿色前先判断它属于品牌交互还是成功状态,并优先使用已有语义类或设计令牌。
|
||||
|
||||
| 语义 | 主色 | 深色 | 浅色表面 |
|
||||
| --- | --- | --- | --- |
|
||||
| 品牌/交互 | `#34745d` | `#274c40` | `#f2faf6` |
|
||||
| 成功/通过 | `#4d7f3b` | `#35522c` | `#f4faef` |
|
||||
|
||||
## 命名规则
|
||||
|
||||
- 所有共享类使用 `oc-` 前缀,避免与 Naive UI、AMap 和 Tailwind 冲突。
|
||||
@@ -78,7 +93,7 @@ Naive UI 按钮继续使用 `type="default"`,视觉语义由共享类控制:
|
||||
</NButton>
|
||||
```
|
||||
|
||||
页面级主操作使用 `oc-primary-button`;面板内操作使用 `oc-panel-button`。可用变体为 `neutral`、`sky`、`teal`、`amber`、`danger`,不要临时创建新的强调色。
|
||||
页面级主操作使用 `oc-primary-button`;面板内操作使用 `oc-panel-button`。可用变体为 `neutral`、`sky`、`teal`、`amber`、`danger`,不要临时创建新的强调色。其中 `teal` 是兼容命名,视觉上使用的是清新桉叶绿。
|
||||
|
||||
## 新增或修改样式的决策顺序
|
||||
|
||||
|
||||
Reference in New Issue
Block a user