Closed web3nomad closed 1 month ago
颜色分成 3 个区域 app: 中间的主界面 sidebar: 左右两侧的边栏 toolbar: 顶部和底部的工具栏
每个区域定义几种颜色语义 背景色：直接用区域名字，比如 --color-app ink: 文字颜色 line: 边框和线条 box: 对话框/菜单等 hover: hover和选中等
全局的语义颜色 accent: 高亮色，我们是蓝色 danger: 删除等危险操作，错误提醒 warn, success, etc. 这一类的颜色其实也可以直接用 tailwind 的颜色，比如 -blue-500, -red-500 这样，然后在组件里用 dark: selector 做好黑白适配
少定义 button, border 等等专门的变量 但是要有一些语义化的变量，比如定义 primary, danger, neutral 之类的变量
少基础 UI 组件样式，用 headless 的，比如不实现通用的 button 或者 dialog 的 theme 但是要有业务组件，多维护业务组件，组件内维护 theme（包括颜色），比如一个文件夹选择器。
这样比较好，这样不大 DRY，但是在样式的编码上，我感觉还是 over specification 带来的问题更多。
颜色分成 3 个区域 app: 中间的主界面 sidebar: 左右两侧的边栏 toolbar: 顶部和底部的工具栏
每个区域定义几种颜色语义 背景色：直接用区域名字，比如 --color-app ink: 文字颜色 line: 边框和线条 box: 对话框/菜单等 hover: hover和选中等
全局的语义颜色 accent: 高亮色，我们是蓝色 danger: 删除等危险操作，错误提醒 warn, success, etc. 这一类的颜色其实也可以直接用 tailwind 的颜色，比如 -blue-500, -red-500 这样，然后在组件里用 dark: selector 做好黑白适配
少定义 button, border 等等专门的变量 但是要有一些语义化的变量，比如定义 primary, danger, neutral 之类的变量
少基础 UI 组件样式，用 headless 的，比如不实现通用的 button 或者 dialog 的 theme 但是要有业务组件，多维护业务组件，组件内维护 theme（包括颜色），比如一个文件夹选择器。
这样比较好，这样不大 DRY，但是在样式的编码上，我感觉还是 over specification 带来的问题更多。