diff --git a/.ls-lint.yml b/.ls-lint.yml index c18d47b4..f934afc6 100644 --- a/.ls-lint.yml +++ b/.ls-lint.yml @@ -14,6 +14,8 @@ ls: .d.ts: kebab-case ignore: + # 内部维护笔记，命名不受 kebab-case 约束（如 README.md） + - docs-notes # ccui - packages/ccui/node_modules - packages/docs diff --git a/packages/ccui/ui/auto-complete/src/auto-complete.scss b/packages/ccui/ui/auto-complete/src/auto-complete.scss index e338e582..21d45d59 100644 --- a/packages/ccui/ui/auto-complete/src/auto-complete.scss +++ b/packages/ccui/ui/auto-complete/src/auto-complete.scss @@ -15,9 +15,9 @@ width: 100%; height: 32px; padding: 0 11px; - border: 1px solid #d9d9d9; + border: 1px solid $ccui-form-control-line; border-radius: 6px; - background: #fff; + background: $ccui-color-bg-container; box-sizing: border-box; cursor: text; transition: @@ -34,7 +34,7 @@ } &.is-disabled { - background: #f5f5f5; + background: $ccui-list-item-hover-bg; cursor: not-allowed; input { @@ -50,10 +50,10 @@ } &--status-error { - border-color: #ff4d4f; + border-color: $ccui-color-error; } &--status-warning { - border-color: #faad14; + border-color: $ccui-color-warning; } } @@ -93,8 +93,8 @@ } &__panel { - background: #fff; - border: 1px solid #f0f0f0; + background: $ccui-base-bg; + border: 1px solid $ccui-dividing-line; border-radius: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), diff --git a/packages/ccui/ui/button-3d/src/button-3d.scss b/packages/ccui/ui/button-3d/src/button-3d.scss index b50e62f4..a9152b83 100644 --- a/packages/ccui/ui/button-3d/src/button-3d.scss +++ b/packages/ccui/ui/button-3d/src/button-3d.scss @@ -1,7 +1,7 @@ @use '../../style-var/index.scss' as *; -$button-3d-info-color: #909399; -$button-3d-info-active-color: #73767a; +$button-3d-info-color: $ccui-button-info; +$button-3d-info-active-color: $ccui-button-info-active; .#{$cls-prefix}-button-3d { position: relative; diff --git a/packages/ccui/ui/button/src/button.scss b/packages/ccui/ui/button/src/button.scss index 5ccc5238..56926c1b 100644 --- a/packages/ccui/ui/button/src/button.scss +++ b/packages/ccui/ui/button/src/button.scss @@ -1,10 +1,10 @@ @use '../../style-var/index.scss' as *; -$button-info-color: #909399; -$button-info-hover-color: #a6a9ad; -$button-info-active-color: #73767a; -$button-info-plain-bg: #f4f4f5; -$button-info-plain-border: #dcdfe6; +$button-info-color: $ccui-button-info; +$button-info-hover-color: $ccui-button-info-hover; +$button-info-active-color: $ccui-button-info-active; +$button-info-plain-bg: $ccui-button-info-plain-bg; +$button-info-plain-border: $ccui-button-info-plain-border; .#{$cls-prefix}-button { box-sizing: border-box; diff --git a/packages/ccui/ui/color-picker/src/color-picker.scss b/packages/ccui/ui/color-picker/src/color-picker.scss index 071ecd6d..9ddc31aa 100644 --- a/packages/ccui/ui/color-picker/src/color-picker.scss +++ b/packages/ccui/ui/color-picker/src/color-picker.scss @@ -17,9 +17,9 @@ align-items: center; gap: 6px; padding: 4px 6px; - border: 1px solid #d9d9d9; + border: 1px solid $ccui-form-control-line; border-radius: 6px; - background: #fff; + background: $ccui-color-bg-container; cursor: pointer; line-height: 1; transition: @@ -36,8 +36,8 @@ } &.is-disabled { - border-color: #d9d9d9; - background: #f5f5f5; + border-color: $ccui-form-control-line; + background: $ccui-list-item-hover-bg; cursor: not-allowed; pointer-events: none; } @@ -65,8 +65,10 @@ border-radius: 4px; overflow: hidden; background-image: - linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), - linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%); + linear-gradient(45deg, $ccui-color-picker-alpha-checker 25%, transparent 25%), + linear-gradient(-45deg, $ccui-color-picker-alpha-checker 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, $ccui-color-picker-alpha-checker 75%), + linear-gradient(-45deg, transparent 75%, $ccui-color-picker-alpha-checker 75%); background-size: 8px 8px; background-position: 0 0, @@ -98,8 +100,8 @@ &__panel { width: 240px; padding: 12px; - background: #fff; - border: 1px solid #f0f0f0; + background: $ccui-color-bg-elevated; + border: 1px solid $ccui-dividing-line; border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), @@ -169,8 +171,10 @@ &__alpha { background-image: - linear-gradient(45deg, #ddd 25%, transparent 25%), linear-gradient(-45deg, #ddd 25%, transparent 25%), - linear-gradient(45deg, transparent 75%, #ddd 75%), linear-gradient(-45deg, transparent 75%, #ddd 75%); + linear-gradient(45deg, $ccui-color-picker-alpha-checker 25%, transparent 25%), + linear-gradient(-45deg, $ccui-color-picker-alpha-checker 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, $ccui-color-picker-alpha-checker 75%), + linear-gradient(-45deg, transparent 75%, $ccui-color-picker-alpha-checker 75%); background-size: 8px 8px; background-position: 0 0, @@ -211,9 +215,9 @@ align-items: center; padding: 0 8px; height: 28px; - border: 1px solid #d9d9d9; + border: 1px solid $ccui-form-control-line; border-radius: 4px; - background: #fff; + background: $ccui-color-bg-container; transition: border-color 0.2s; &:focus-within { @@ -245,9 +249,9 @@ width: 64px; height: 28px; padding: 0 8px; - border: 1px solid #d9d9d9; + border: 1px solid $ccui-form-control-line; border-radius: 4px; - background: #fff; + background: $ccui-color-bg-container; &:focus-within { border-color: $ccui-color-primary; @@ -324,7 +328,7 @@ &__footer { margin-top: 12px; padding-top: 12px; - border-top: 1px solid #f0f0f0; + border-top: 1px solid $ccui-dividing-line; } } diff --git a/packages/ccui/ui/config-provider/src/config-provider-types.ts b/packages/ccui/ui/config-provider/src/config-provider-types.ts index aef14fd8..a23018d0 100644 --- a/packages/ccui/ui/config-provider/src/config-provider-types.ts +++ b/packages/ccui/ui/config-provider/src/config-provider-types.ts @@ -5,7 +5,6 @@ export type ComponentSize = 'small' | 'middle' | 'large' export interface ThemeConfig { token?: Record algorithm?: 'default' | 'dark' | 'compact' - cssVar?: boolean } export interface ModalLocale { diff --git a/packages/ccui/ui/mentions/src/mentions.scss b/packages/ccui/ui/mentions/src/mentions.scss index 534d611e..05ba50b4 100644 --- a/packages/ccui/ui/mentions/src/mentions.scss +++ b/packages/ccui/ui/mentions/src/mentions.scss @@ -46,9 +46,9 @@ &__textarea { width: 100%; padding: 6px 12px; - border: 1px solid #d9d9d9; + border: 1px solid $ccui-form-control-line; border-radius: 6px; - background: #fff; + background: $ccui-color-bg-container; color: rgba(0, 0, 0, 0.88); font-size: 14px; line-height: 1.5; @@ -74,7 +74,7 @@ } &:disabled { - background: #f5f5f5; + background: $ccui-list-item-hover-bg; color: rgba(0, 0, 0, 0.4); cursor: not-allowed; } @@ -86,8 +86,8 @@ z-index: 1050; min-width: 160px; max-width: 320px; - background: #fff; - border: 1px solid #f0f0f0; + background: $ccui-base-bg; + border: 1px solid $ccui-dividing-line; border-radius: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), diff --git a/packages/ccui/ui/popover/src/popover.scss b/packages/ccui/ui/popover/src/popover.scss index 95acbf9e..f1839be9 100644 --- a/packages/ccui/ui/popover/src/popover.scss +++ b/packages/ccui/ui/popover/src/popover.scss @@ -1,3 +1,5 @@ +@use '../../style-var/index.scss' as *; + .ccui-popover { position: relative; display: inline-block; @@ -19,16 +21,16 @@ box-sizing: border-box; &--dark { - background: #303133; - color: #fff; - border: 1px solid #303133; + background: $ccui-feedback-overlay-bg; + color: $ccui-light-text; + border: 1px solid $ccui-feedback-overlay-bg; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } &--light { - background: #fff; - color: #606266; - border: 1px solid #e4e7ed; + background: $ccui-base-bg; + color: $ccui-aide-text-stress; + border: 1px solid $ccui-color-border; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } } @@ -37,11 +39,11 @@ padding: 0 0 8px 0; font-weight: 500; font-size: 16px; - color: #303133; + color: $ccui-text; border-radius: inherit; .ccui-popover__popper--dark & { - color: #fff; + color: $ccui-light-text; } } diff --git a/packages/ccui/ui/tooltip/src/tooltip.scss b/packages/ccui/ui/tooltip/src/tooltip.scss index 3c1f2bc7..231d2e51 100644 --- a/packages/ccui/ui/tooltip/src/tooltip.scss +++ b/packages/ccui/ui/tooltip/src/tooltip.scss @@ -1,3 +1,5 @@ +@use '../../style-var/index.scss' as *; + .ccui-tooltip { position: relative; display: inline-block; @@ -15,16 +17,16 @@ word-wrap: break-word; &--dark { - background: #303133; - color: #fff; - border: 1px solid #303133; + background: $ccui-feedback-overlay-bg; + color: $ccui-light-text; + border: 1px solid $ccui-feedback-overlay-bg; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } &--light { - background: #fff; - color: #606266; - border: 1px solid #e4e7ed; + background: $ccui-base-bg; + color: $ccui-aide-text-stress; + border: 1px solid $ccui-color-border; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); } } diff --git a/packages/ccui/ui/transfer/src/transfer.scss b/packages/ccui/ui/transfer/src/transfer.scss index 29d00db0..a7d13272 100644 --- a/packages/ccui/ui/transfer/src/transfer.scss +++ b/packages/ccui/ui/transfer/src/transfer.scss @@ -15,9 +15,9 @@ flex-direction: column; width: 200px; max-height: 320px; - border: 1px solid #e8e8e8; + border: 1px solid $ccui-color-border; border-radius: 6px; - background: #fff; + background: $ccui-color-bg-container; overflow: hidden; } @@ -26,10 +26,10 @@ align-items: center; gap: 8px; padding: 8px 12px; - border-bottom: 1px solid #f0f0f0; + border-bottom: 1px solid $ccui-dividing-line; color: rgba(0, 0, 0, 0.85); font-size: 13px; - background: #fafafa; + background: $ccui-area; } &__header-checkbox { @@ -58,16 +58,16 @@ &__search { padding: 8px 12px; - border-bottom: 1px solid #f0f0f0; + border-bottom: 1px solid $ccui-dividing-line; } &__search-input { width: 100%; height: 28px; padding: 0 8px; - border: 1px solid #d9d9d9; + border: 1px solid $ccui-form-control-line; border-radius: 4px; - background: #fff; + background: $ccui-color-bg-container; color: rgba(0, 0, 0, 0.88); font-size: 13px; outline: 0; @@ -153,9 +153,9 @@ min-width: 32px; height: 28px; padding: 0 8px; - border: 1px solid #d9d9d9; + border: 1px solid $ccui-color-border; border-radius: 4px; - background: #fff; + background: $ccui-color-bg-container; color: rgba(0, 0, 0, 0.88); font-size: 14px; line-height: 1; @@ -172,7 +172,7 @@ &:disabled { color: rgba(0, 0, 0, 0.25); - background: #f5f5f5; + background: $ccui-list-item-hover-bg; cursor: not-allowed; } } diff --git a/packages/ccui/ui/upload/src/upload.scss b/packages/ccui/ui/upload/src/upload.scss index d10b3164..7d31edb0 100644 --- a/packages/ccui/ui/upload/src/upload.scss +++ b/packages/ccui/ui/upload/src/upload.scss @@ -19,9 +19,9 @@ display: inline-block; padding: 4px 16px; height: 32px; - border: 1px solid #d9d9d9; + border: 1px solid $ccui-form-control-line; border-radius: 6px; - background: #fff; + background: $ccui-color-bg-container; color: rgba(0, 0, 0, 0.88); font-size: 14px; line-height: 24px; @@ -34,7 +34,7 @@ } &.is-disabled { - background: #f5f5f5; + background: $ccui-list-item-hover-bg; color: rgba(0, 0, 0, 0.25); cursor: not-allowed; } @@ -47,9 +47,9 @@ justify-content: center; gap: 8px; padding: 32px 16px; - border: 1px dashed #d9d9d9; + border: 1px dashed $ccui-color-border; border-radius: 8px; - background: #fafafa; + background: $ccui-area; color: rgba(0, 0, 0, 0.65); text-align: center; cursor: pointer; @@ -67,12 +67,12 @@ &.is-disabled { cursor: not-allowed; - background: #f5f5f5; + background: $ccui-list-item-hover-bg; color: rgba(0, 0, 0, 0.25); &:hover { - border-color: #d9d9d9; - background: #f5f5f5; + border-color: $ccui-color-border; + background: $ccui-list-item-hover-bg; } } } @@ -107,7 +107,7 @@ } &--status-error { - color: #ff4d4f; + color: $ccui-color-error; } &--status-uploading { diff --git a/packages/cli/templates/vitepress-sidebar.js b/packages/cli/templates/vitepress-sidebar.js index 8fb80b83..dc2e6f77 100644 --- a/packages/cli/templates/vitepress-sidebar.js +++ b/packages/cli/templates/vitepress-sidebar.js @@ -12,6 +12,13 @@ function buildCategoryOptions(text, items = []) { return { text, items } } +// 非组件的纯文档指南页（在 docs/components/ 下手写、没有对应 ui/ 组件， +// 因而不会被 discoverComponents 扫到）。这里按分类显式登记，保证 sidebar 重新生成时 +// 这些页面入口不会丢失。key 用中文分类名，与 VITEPRESS_SIDEBAR_CATEGORY 对齐。 +const EXTRA_GUIDE_PAGES = { + 其他: [{ slug: 'theme', zh: '主题定制 / 深色模式', en: 'Theming / Dark Mode' }], +} + function generateZhMenus(componentsInfo) { const categoryMap = VITEPRESS_SIDEBAR_CATEGORY.reduce((map, cate) => map.set(cate, []), new Map()) @@ -28,6 +35,14 @@ function generateZhMenus(componentsInfo) { logger.warning(`组件 ${info.name} 的分类 ${info.category} 不存在！`) } }) + + for (const [cate, pages] of Object.entries(EXTRA_GUIDE_PAGES)) { + if (!categoryMap.has(cate)) continue + pages.forEach((p) => { + categoryMap.get(cate).push({ text: p.zh, link: `/${SITES_COMPONENTS_DIR_NAME}/${p.slug}/` }) + }) + } + return Array.from(categoryMap).map(([k, v]) => buildCategoryOptions(k, v)) } @@ -42,6 +57,15 @@ function generateEnMenus(componentsInfo) { }) } }) + + for (const [cate, pages] of Object.entries(EXTRA_GUIDE_PAGES)) { + const enCate = VITEPRESS_SIDEBAR_CATEGORY_ZH_TO_EN[cate] + if (!categoryMapEn.has(enCate)) continue + pages.forEach((p) => { + categoryMapEn.get(enCate).push({ text: p.en, link: `/${SITES_COMPONENTS_DIR_NAME_EN}/${p.slug}/` }) + }) + } + return Array.from(categoryMapEn).map(([k, v]) => buildCategoryOptions(k, v)) } diff --git a/packages/docs/components/config-provider/index.md b/packages/docs/components/config-provider/index.md index 6466d42a..5b0d65de 100644 --- a/packages/docs/components/config-provider/index.md +++ b/packages/docs/components/config-provider/index.md @@ -185,7 +185,7 @@ const cfg = useConfig() | componentSize | `'small' \| 'middle' \| 'large'` | `'middle'` | 默认组件尺寸 | | direction | `'ltr' \| 'rtl'` | `'ltr'` | 文字方向 | | locale | `Locale` | — | 语言包 | -| theme | `{ token, algorithm, cssVar }` | — | 主题配置：`token` 用 camelCase（colorPrimary / borderRadius 等），自动映射为 CSS 变量并下传 | +| theme | `{ token, algorithm }` | — | 主题配置：`token` 用 camelCase（colorPrimary / borderRadius 等），自动映射为 CSS 变量并下传 | | iconPrefixCls | string | `'ccui-icon'` | 图标类名前缀 | ### useConfig diff --git a/packages/docs/components/divider/index.md b/packages/docs/components/divider/index.md index 28842425..4e0d2199 100644 --- a/packages/docs/components/divider/index.md +++ b/packages/docs/components/divider/index.md @@ -77,14 +77,14 @@ ## 自定义文案样式 -`content-color` 改文字颜色，`content-background-color` 改文字底色（在彩色背景上常用）。 +`content-color` 改文字颜色，`content-background-color` 改文字底色（在彩色背景上常用）。钉死一个固定浅色底时，记得同时钉死文字色，否则深色模式下文字会变白、落在浅底上不可读。 :::demo ```vue ``` diff --git a/packages/docs/components/theme/index.md b/packages/docs/components/theme/index.md new file mode 100644 index 00000000..ad551c26 --- /dev/null +++ b/packages/docs/components/theme/index.md @@ -0,0 +1,136 @@ +# 主题定制 / 深色模式 + +ccui 的所有组件样式都建立在一套 `--ccui-*` CSS 变量之上。深色模式、品牌色定制、圆角调整都归结为一件事：**覆盖这些 CSS 变量**。本页梳理三种由浅入深的用法。 + +## 深色模式怎么生效 + +深色样式集中在 `darkTheme.css`，所有规则都 scope 在 `.dark` 选择器下，形如： + +```css +.dark { + --ccui-color-bg-container: #141414; + --ccui-color-text: rgba(255, 255, 255, 0.85); + /* …整套 token 的深色取值 */ +} +``` + +只要某个祖先元素带上 `.dark` 类，其子树内的 ccui 组件就会就地切换到深色取值。因此「切换深色」=「在合适的元素上挂 `.dark` 类」。`darkTheme.css` 已在文档站全局引入；接入你自己的应用时，从 `@vaebe/ccui-theme/darkTheme.css` 引入一次即可。 + +## 应用级深色切换（主推） + +整站统一切换深色，推荐把 `.dark` 类挂在根元素（`` 或 ``）上。这样所有组件、布局、自定义样式同时切换，无需逐处包裹。 + +下面是一个「跟随系统 + 手动切换」的最小实现：首屏跟随系统偏好，用户手动点击后记住选择并落到 `localStorage`。 + +```ts +const STORAGE_KEY = 'ccui-theme' + +function applyDark(isDark: boolean) { + document.documentElement.classList.toggle('dark', isDark) +} + +// 1. 初始化：优先读取用户已保存的选择，否则跟随系统 +const media = window.matchMedia('(prefers-color-scheme: dark)') +const saved = localStorage.getItem(STORAGE_KEY) // 'dark' | 'light' | null +applyDark(saved ? saved === 'dark' : media.matches) + +// 2. 手动切换：写入存储并即时应用 +function setTheme(isDark: boolean) { + localStorage.setItem(STORAGE_KEY, isDark ? 'dark' : 'light') + applyDark(isDark) +} + +// 3. 未手动指定时，继续跟随系统变化 +media.addEventListener('change', (e) => { + if (!localStorage.getItem(STORAGE_KEY)) applyDark(e.matches) +}) +``` + +把 `setTheme(true / false)` 接到你的开关按钮即可。Vue 项目里也可以直接用 `useDark` / `useToggle`（来自 VueUse）托管同样的逻辑，行为一致。 + +## 局部 / 子树方案 + +只想让页面的某一块走深色（例如预览面板、对比区域），无需触碰根元素，用 `c-config-provider` 的 `theme.algorithm` 即可。设为 `'dark'` 时，ConfigProvider 会在其包裹层挂上 `.dark` 类，从而只让这棵子树切换深色。 + +:::demo + +```vue + +``` + +::: + +`algorithm` 与 `token` 可以同时使用：先由 `algorithm: 'dark'` 给出整套深色基线，再用 `token` 覆盖个别值。 + +## token 体系简介 + +ccui 的设计变量统一以 `--ccui-` 开头，覆盖颜色、圆角、字号、间距、动效、层级等。组件样式只读这些变量，所以你既可以直接在 CSS 里覆盖变量，也可以通过 `c-config-provider` 的 `theme.token` 用 camelCase 形式传入（如 `colorPrimary`、`borderRadius`），ConfigProvider 会自动映射成对应的 `--ccui-*` 变量并下传给子组件。 + +### 关键色 light / dark 对照 + +下表节选几个最常用的 token，列出浅色与深色两套取值，方便对照理解变量在两种模式下的差异： + +| token（camelCase） | CSS 变量 | Light | Dark | +| ------------------ | --------------------------- | ----------------- | ----------------------- | +| colorPrimary | `--ccui-color-primary` | `#1677ff` | `#1668dc` | +| colorSuccess | `--ccui-color-success` | `#52c41a` | `#49aa19` | +| colorWarning | `--ccui-color-warning` | `#faad14` | `#d89614` | +| colorError | `--ccui-color-error` | `#ff4d4f` | `#dc4446` | +| colorText | `--ccui-color-text` | `rgba(0,0,0,.88)` | `rgba(255,255,255,.85)` | +| colorBgContainer | `--ccui-color-bg-container` | `#ffffff` | `#141414` | +| colorBgBase | `--ccui-color-bg-base` | `#ffffff` | `#000000` | +| colorBorder | `--ccui-color-border` | `#d9d9d9` | `#424242` | +| borderRadius | `--ccui-border-radius` | `6px` | `6px` | + +### 自定义 token 覆盖品牌色 + +最常见的需求是换一套品牌主色。把 camelCase 的 token 传给 `theme.token`，作用域内组件就会跟着走新主色。下面的示例可以在几个预设主色之间实时切换： + +:::demo + +```vue + + + +``` + +::: + +`theme.token` 接收的字段与上表的 camelCase 名一一对应，`colorPrimary` / `borderRadius` / `colorError` 等都可以一起传。需要更细的派生色（hover / active / 边框 / 浅底）时，直接覆盖对应的 `--ccui-color-primary-hover` 等 CSS 变量即可。 + +## 三种方案怎么选 + +- 整站统一深色：在根元素切 `.dark` 类（**主推**），配合全局引入的 `darkTheme.css`。 +- 仅局部子树深色：用 `c-config-provider` 的 `theme.algorithm: 'dark'` 包裹。 +- 定制品牌色 / 圆角：用 `c-config-provider` 的 `theme.token`，或直接覆盖 `--ccui-*` 变量。 diff --git a/packages/theme/themes/dark.ts b/packages/theme/themes/dark.ts index 28a522ca..ee10d665 100644 --- a/packages/theme/themes/dark.ts +++ b/packages/theme/themes/dark.ts @@ -72,6 +72,7 @@ export default { 'float-block-shadow': 'rgba(22, 104, 220, 0.32)', 'highlight-overlay': 'rgba(0, 0, 0, 0.45)', 'range-item-hover-bg': '#111a2c', + 'color-picker-alpha-checker': '#424242', // 按钮 primary: '#1668dc', 'primary-hover': '#3c89e8', @@ -79,6 +80,11 @@ export default { 'contrast-hover': '#e86e6b', 'contrast-active': '#ad2d2c', secondary: 'rgba(255, 255, 255, 0.65)', + 'button-info': '#a6a9ad', + 'button-info-hover': '#b8bbbf', + 'button-info-active': '#85888c', + 'button-info-plain-bg': '#2a2a2a', + 'button-info-plain-border': '#3a3a3a', // 状态 'danger-line': '#58181c', 'danger-bg': '#2a1215', diff --git a/packages/theme/themes/light.ts b/packages/theme/themes/light.ts index 3f51f38a..73ab576f 100644 --- a/packages/theme/themes/light.ts +++ b/packages/theme/themes/light.ts @@ -73,6 +73,7 @@ export default { 'float-block-shadow': 'rgba(22, 119, 255, 0.16)', 'highlight-overlay': 'rgba(255, 255, 255, 0.8)', 'range-item-hover-bg': '#e6f4ff', + 'color-picker-alpha-checker': '#dddddd', // 按钮 primary: '#1677ff', 'primary-hover': '#4096ff', @@ -80,6 +81,11 @@ export default { 'contrast-hover': '#ff7875', 'contrast-active': '#d9363e', secondary: 'rgba(0, 0, 0, 0.65)', + 'button-info': '#909399', + 'button-info-hover': '#a6a9ad', + 'button-info-active': '#73767a', + 'button-info-plain-bg': '#f4f4f5', + 'button-info-plain-border': '#dcdfe6', // 状态 'danger-line': '#ffccc7', 'danger-bg': '#fff2f0',