From 4551330756fb1742fa5d6ca1412f90a109a20d0b Mon Sep 17 00:00:00 2001 From: Seeridia Date: Sun, 5 Apr 2026 11:46:35 +0800 Subject: [PATCH 1/4] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E5=92=8C?= =?UTF-8?q?=E7=AE=80=E5=8C=96=20design=20token?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../build/rollup.styles.config.js | 50 +++++- .../src/sass/bubble_formula.scss | 14 +- packages/cherry-markdown/src/sass/cherry.scss | 103 ++++++------ .../src/sass/codemirror-v6-fixes.scss | 4 +- .../sass/components/shortcut_key_config.scss | 20 +-- packages/cherry-markdown/src/sass/index.scss | 2 +- .../cherry-markdown/src/sass/markdown.scss | 128 +++++++------- .../src/sass/markdown_pure.scss | 14 +- .../cherry-markdown/src/sass/previewer.scss | 37 +++-- .../src/sass/themes/abyss.scss | 104 ++++++------ .../cherry-markdown/src/sass/themes/blue.scss | 130 ++++++++------- .../cherry-markdown/src/sass/themes/dark.scss | 111 +++++++------ .../src/sass/themes/default.scss | 156 +++--------------- .../cherry-markdown/src/sass/themes/gray.scss | 34 +++- .../src/sass/themes/green.scss | 115 +++++++------ .../src/sass/themes/index.scss | 8 + .../cherry-markdown/src/sass/themes/red.scss | 115 +++++++------ .../src/sass/themes/violet.scss | 118 ++++++------- .../src/sass/variables/base.scss | 1 + .../sass/variables/components/accordion.scss | 14 ++ .../src/sass/variables/components/index.scss | 4 + .../src/sass/variables/components/panel.scss | 59 +++++++ .../variables/components/shortcut-panel.scss | 10 ++ .../src/sass/variables/components/table.scss | 6 + .../src/sass/variables/index.scss | 9 +- .../src/sass/variables/semantic.scss | 101 ++++++------ 26 files changed, 762 insertions(+), 705 deletions(-) create mode 100644 packages/cherry-markdown/src/sass/themes/index.scss create mode 100644 packages/cherry-markdown/src/sass/variables/components/accordion.scss create mode 100644 packages/cherry-markdown/src/sass/variables/components/index.scss create mode 100644 packages/cherry-markdown/src/sass/variables/components/panel.scss create mode 100644 packages/cherry-markdown/src/sass/variables/components/shortcut-panel.scss create mode 100644 packages/cherry-markdown/src/sass/variables/components/table.scss diff --git a/packages/cherry-markdown/build/rollup.styles.config.js b/packages/cherry-markdown/build/rollup.styles.config.js index 81b25b262..b4c927cb3 100644 --- a/packages/cherry-markdown/build/rollup.styles.config.js +++ b/packages/cherry-markdown/build/rollup.styles.config.js @@ -13,8 +13,8 @@ * See the License for the specific language governing permissions and * limitations under the License. */ -import scss from 'rollup-plugin-scss'; import * as dartSass from 'sass'; +import path from 'node:path'; // baseConfig not used in styles config const IS_PRODUCTION = process.env.NODE_ENV === 'production'; @@ -33,6 +33,40 @@ const createCleanupPlugin = () => ({ }, }); +const createSassAssetPlugin = ({ input, fileName, style = 'expanded', watch }) => ({ + name: `sass-asset:${fileName}`, + transform(code, id) { + if (path.resolve(id) !== path.resolve(input)) { + return null; + } + + return { + code: 'export default undefined;', + map: { mappings: '' }, + }; + }, + buildStart() { + if (watch) { + const files = Array.isArray(watch) ? watch : [watch]; + files.forEach((file) => this.addWatchFile(file)); + } + }, + async generateBundle() { + const entryFile = path.resolve(input); + const result = await dartSass.compileAsync(entryFile, { + loadPaths: ['node_modules', process.cwd()], + style, + charset: false, + }); + + this.emitFile({ + type: 'asset', + fileName, + source: result.css, + }); + }, +}); + const createStyleConfigs = ({ input, cssBaseName, outputBaseName, watch }) => { const configs = [ { @@ -41,11 +75,10 @@ const createStyleConfigs = ({ input, cssBaseName, outputBaseName, watch }) => { file: `dist/${outputBaseName}.styles.js`, }, plugins: [ - scss({ + createSassAssetPlugin({ + input, fileName: `${cssBaseName}.css`, - failOnError: true, - sass: dartSass, - ...(watch ? { watch } : {}), + watch, }), createCleanupPlugin(), ], @@ -59,11 +92,10 @@ const createStyleConfigs = ({ input, cssBaseName, outputBaseName, watch }) => { file: `dist/${outputBaseName}.styles.min.js`, }, plugins: [ - scss({ + createSassAssetPlugin({ + input, fileName: `${cssBaseName}.min.css`, - failOnError: true, - sass: dartSass, - outputStyle: 'compressed', + style: 'compressed', }), createCleanupPlugin(), ], diff --git a/packages/cherry-markdown/src/sass/bubble_formula.scss b/packages/cherry-markdown/src/sass/bubble_formula.scss index 2f242f99b..158912c98 100644 --- a/packages/cherry-markdown/src/sass/bubble_formula.scss +++ b/packages/cherry-markdown/src/sass/bubble_formula.scss @@ -18,7 +18,7 @@ width: 120px; flex-shrink: 0; padding: 8px; - border-right: 1px solid var(--base-border-color); + border-right: 1px solid var(--color-border-default); position: relative; .cherry-formula-main-tabs { @@ -28,7 +28,7 @@ cursor: pointer; font-size: 14px; font-weight: 500; - color: var(--base-font-color); + color: var(--color-text-primary); user-select: none; transition: background-color 0.2s ease, color 0.2s ease; @@ -58,7 +58,7 @@ white-space: nowrap; a { - color: var(--primary-color); + color: var(--color-brand-primary); text-decoration: none; &:hover { @@ -99,7 +99,7 @@ border-radius: 16px; cursor: pointer; font-size: 13px; - color: var(--base-font-color); + color: var(--color-text-primary); user-select: none; transition: background-color 0.2s ease, color 0.2s ease; @@ -139,10 +139,10 @@ .cherry-formula-grid-group-title { font-size: 14px; font-weight: 600; - color: var(--base-font-color); + color: var(--color-text-primary); margin-bottom: 12px; padding-bottom: 8px; - border-bottom: 1px solid var(--base-border-color); + border-bottom: 1px solid var(--color-border-default); } .cherry-formula-grid-items { @@ -159,7 +159,7 @@ border-radius: 8px; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; - background-color: var(--base-editor-bg); + background-color: var(--color-bg-canvas); &:hover { background-color: var(--dropdown-item-hover-bg); diff --git a/packages/cherry-markdown/src/sass/cherry.scss b/packages/cherry-markdown/src/sass/cherry.scss index 94a83c413..6933d57c9 100644 --- a/packages/cherry-markdown/src/sass/cherry.scss +++ b/packages/cherry-markdown/src/sass/cherry.scss @@ -1,13 +1,15 @@ -@import './variables/index.scss'; -@import './base.scss'; -@import './ch-icon.scss'; -@import './markdown.scss'; -@import './previewer.scss'; -@import './print.scss'; -@import './bubble_formula.scss'; -@import './formula_utils_bubble.scss'; -@import './components/shortcut_key_config.scss'; -@import './codemirror-v6-fixes'; +@use 'sass:meta'; + +@include meta.load-css('./variables/index'); +@include meta.load-css('./base'); +@include meta.load-css('./ch-icon'); +@include meta.load-css('./markdown'); +@include meta.load-css('./previewer'); +@include meta.load-css('./print'); +@include meta.load-css('./bubble_formula'); +@include meta.load-css('./formula_utils_bubble'); +@include meta.load-css('./components/shortcut_key_config'); +@include meta.load-css('./codemirror-v6-fixes'); @mixin cherryFont { font-family: var(--font-family-sans); @@ -97,8 +99,8 @@ .cherry { @include cherryFont; line-height: var(--md-paragraph-line-height); - color: var(--base-font-color); - background: var(--base-editor-bg); + color: var(--color-text-primary); + background: var(--color-bg-canvas); box-shadow: var(--shadow-md); .ch-icon { @@ -152,7 +154,7 @@ &-item { padding: 7px; - border: 1px solid var(--base-border-color); + border: 1px solid var(--color-border-default); &.active { background-color: var(--toolbar-btn-hover-bg); @@ -264,7 +266,7 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; - color: var(--primary-color); + color: var(--color-brand-primary); margin-left: 2px; margin-top: -2px; } @@ -376,7 +378,7 @@ // 默认主题采用亮色搜索框 &.theme__default { --ace-search-bg: var(--oc-white); - --ace-search-text-color: var(--base-font-color); + --ace-search-text-color: var(--color-text-primary); } // 其它主题从toolbar和dropdown中取色 @@ -421,8 +423,8 @@ align-items: center; &:focus-within { - border-color: var(--primary-color); - box-shadow: 0 0 0 3px var(--secondary-color); + border-color: var(--color-brand-primary); + box-shadow: 0 0 0 3px var(--color-bg-active); } &.ace_nomatch { @@ -524,8 +526,8 @@ } &.checked { - border-color: var(--primary-color); - background-color: var(--secondary-color); + border-color: var(--color-brand-primary); + background-color: var(--color-bg-active); color: var(--ace-search-text-color); opacity: var(--opacity-100); } @@ -632,7 +634,7 @@ } } -@import './components/bubble'; +@include meta.load-css('./components/bubble'); .cherry-floatmenu { z-index: 4; @@ -704,7 +706,7 @@ width: 50%; box-sizing: border-box; overflow: hidden; - background-color: var(--base-editor-bg); + background-color: var(--color-bg-canvas); z-index: 1; &.cherry-editor--full { @@ -756,8 +758,8 @@ .cm-editor { font-family: var(--font-family-sans); - background-color: var(--base-editor-bg); - color: var(--base-font-color); + background-color: var(--color-bg-canvas); + color: var(--color-text-primary); // codemirror 依赖隐藏的 textarea 计算行高，这里将字体大小设置为行高，避免输入法遮挡内容 // Fixed https://github.com/Tencent/cherry-markdown/issues/82 @@ -772,7 +774,7 @@ .cm-strong, .cm-em, .cm-meta { - color: var(--base-font-color); + color: var(--color-text-primary); } .cm-image-marker, @@ -931,8 +933,8 @@ z-index: 1; .cm-editor { font-family: var(--font-family-sans); - background-color: var(--base-editor-bg); - color: var(--base-font-color); + background-color: var(--color-bg-canvas); + color: var(--color-text-primary); } } @@ -1014,9 +1016,9 @@ box-shadow: 5px 0 5px rgba(0, 0, 0, 0.05); transition: all 0.3s; z-index: 2; - color: var(--base-font-color); + color: var(--color-text-primary); background-color: var(--toolbar-bg); - border: 1px solid var(--base-border-color); + border: 1px solid var(--color-border-default); } .cherry-code-block-custom-btn { width: auto; @@ -1035,8 +1037,8 @@ transition: all 0.3s; z-index: 2; color: var(--toolbar-btn-color); - background-color: var(--primary-color); - border: 1px solid var(--base-border-color); + background-color: var(--color-brand-primary); + border: 1px solid var(--color-border-default); } .cherry-expand-code-block { top: 45px; @@ -1093,8 +1095,8 @@ .cherry-unExpand-code-block:focus-visible, .cherry-edit-code-block:focus-visible { box-shadow: - 0 0 0 2px var(--base-previewer-bg), - 0 0 0 4px var(--primary-color); + 0 0 0 2px var(--color-bg-surface), + 0 0 0 4px var(--color-brand-primary); } .cherry-code-preview-lang-select { @@ -1102,9 +1104,9 @@ -webkit-appearance: none; font-size: 14px; - color: var(--base-font-color); + color: var(--color-text-primary); background-color: var(--toolbar-bg); - border: 1px solid var(--base-border-color); + border: 1px solid var(--color-border-default); border-radius: 6px; padding: 5px 36px 5px 12px; cursor: pointer; @@ -1118,16 +1120,16 @@ } .cherry-code-preview-lang-select:focus { - border-color: var(--primary-color); + border-color: var(--color-brand-primary); outline: 0; box-shadow: - 0 0 0 2px var(--base-previewer-bg), - 0 0 0 4px var(--primary-color); + 0 0 0 2px var(--color-bg-surface), + 0 0 0 4px var(--color-brand-primary); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 11 6-6 6 6'/%3e%3c/svg%3e"); } .cherry-code-preview-lang-select option { - color: var(--base-font-color); + color: var(--color-text-primary); font-size: 14px; background-color: var(--toolbar-bg); cursor: cursor; @@ -1138,8 +1140,8 @@ color: var(--toolbar-btn-hover-color); } .cherry-code-preview-lang-select:disabled { - background-color: var(--base-border-color); - color: var(--base-font-color); + background-color: var(--color-border-default); + color: var(--color-text-primary); cursor: not-allowed; } } @@ -1152,7 +1154,7 @@ width: 0.7em; height: 0.7em; border-radius: 100%; - border: var(--primary-color) solid 1px; + border: var(--color-brand-primary) solid 1px; margin-left: 0.2em; box-sizing: border-box; } @@ -1205,7 +1207,7 @@ border-left: 2px solid var(--drag-border-color); width: 50%; box-sizing: border-box; - background-color: var(--base-previewer-bg); + background-color: var(--color-bg-surface); min-height: auto; overflow-y: auto; -webkit-print-color-adjust: exact; @@ -1265,7 +1267,7 @@ .cherry-expand-code-block, .cherry-unExpand-code-block, .cherry-edit-code-block { - background-color: var(--primary-color); + background-color: var(--color-brand-primary); } } @@ -1589,7 +1591,7 @@ .cherry-toc-title { font-size: var(--font-size-md); font-weight: bold; - color: var(--primary-color); + color: var(--color-brand-primary); padding-left: 5px; } .ch-icon-chevronsLeft { @@ -1631,8 +1633,8 @@ cursor: pointer; &:hover, &.current { - border-left-color: var(--primary-color); - color: var(--primary-color); + border-left-color: var(--color-brand-primary); + color: var(--color-brand-primary); } .cherry-toc-in-blockquote { font-size: 0.6em; @@ -1746,11 +1748,4 @@ } /** 引入自带的主题 */ -@import './themes/default.scss'; -@import './themes/dark.scss'; -@import './themes/abyss.scss'; -@import './themes/green.scss'; -@import './themes/red.scss'; -@import './themes/gray.scss'; -@import './themes/violet.scss'; -@import './themes/blue.scss'; +@include meta.load-css('./themes/index'); diff --git a/packages/cherry-markdown/src/sass/codemirror-v6-fixes.scss b/packages/cherry-markdown/src/sass/codemirror-v6-fixes.scss index 0e652c716..6e4e76b04 100644 --- a/packages/cherry-markdown/src/sass/codemirror-v6-fixes.scss +++ b/packages/cherry-markdown/src/sass/codemirror-v6-fixes.scss @@ -9,8 +9,8 @@ } .cm-editor .cm-gutter { - border-right: 1px solid var(--base-border-color); - background-color: var(--base-editor-bg); + border-right: 1px solid var(--color-border-default); + background-color: var(--color-bg-canvas); } .cm-editor .cm-lineNumbers { diff --git a/packages/cherry-markdown/src/sass/components/shortcut_key_config.scss b/packages/cherry-markdown/src/sass/components/shortcut_key_config.scss index 48c18c91f..6bdb0323c 100644 --- a/packages/cherry-markdown/src/sass/components/shortcut_key_config.scss +++ b/packages/cherry-markdown/src/sass/components/shortcut_key_config.scss @@ -1,14 +1,4 @@ .cherry { - --shortcut-key-config-panel-bg: var(--dropdown-bg); - --shortcut-key-config-panel-text-color: var(--dropdown-item-color); - - // 快捷键面板通用样式变量 - --shortcut-panel-padding-x: 15px; - --shortcut-panel-padding-y: 10px; - --shortcut-panel-font-size-xs: var(--font-size-xs); - --shortcut-panel-border-radius: 4px; - --shortcut-panel-transition: all 0.2s; - .cherry-shortcut-key-config-panel-wrapper { background-color: var(--shortcut-key-config-panel-bg); color: var(--shortcut-key-config-panel-text-color); @@ -22,7 +12,7 @@ @mixin hover-color { &:hover { - color: var(--primary-color); + color: var(--color-brand-primary); } } @@ -62,8 +52,8 @@ } &.active { - color: var(--primary-color); - background-color: var(--secondary-color); + color: var(--color-brand-primary); + background-color: var(--color-bg-active); } } } @@ -104,10 +94,10 @@ background-color: var(--dropdown-item-hover-bg); .shortcut-key-config-panel-kbd { - border: 1px dashed var(--primary-color); + border: 1px dashed var(--color-brand-primary); border-radius: var(--shortcut-panel-border-radius); padding: 2px 4px; - background: var(--secondary-color); + background: var(--color-bg-active); transform: translateX(0) !important; } diff --git a/packages/cherry-markdown/src/sass/index.scss b/packages/cherry-markdown/src/sass/index.scss index 57708018c..536ebc36b 100644 --- a/packages/cherry-markdown/src/sass/index.scss +++ b/packages/cherry-markdown/src/sass/index.scss @@ -2,4 +2,4 @@ // CodeMirror 6 不需要单独引入样式文件,样式已集成在 @codemirror/view 中 -@import './cherry.scss'; +@include meta.load-css('./cherry'); diff --git a/packages/cherry-markdown/src/sass/markdown.scss b/packages/cherry-markdown/src/sass/markdown.scss index 9e435551d..dabdd0538 100644 --- a/packages/cherry-markdown/src/sass/markdown.scss +++ b/packages/cherry-markdown/src/sass/markdown.scss @@ -1,7 +1,9 @@ +@use 'sass:meta'; + .cherry-markdown { word-break: break-all; color: var(--md-paragraph-color); - background-color: var(--base-previewer-bg); + background-color: var(--color-bg-surface); h1, h2, h3, @@ -151,11 +153,11 @@ } kbd { - border: 1px solid var(--base-border-color); + border: 1px solid var(--color-border-default); border-radius: 4px; padding: 1px 2px; box-sizing: border-box; - box-shadow: inset 0px -1px var(--base-border-color); + box-shadow: inset 0px -1px var(--color-border-default); font-size: 0.85rem; } @@ -420,7 +422,7 @@ border: 1px solid var(--md-hr-border); [data-inline-code-theme='black'] & { - color: var(--base-font-color); + color: var(--color-text-primary); background-color: var(--md-inline-code-bg); } } @@ -683,15 +685,15 @@ .cherry[class*="theme__"] .cherry-previewer-table-content-handler { .cherry-previewer-table-content-handler__input { textarea { - background-color: var(--base-editor-bg); - color: var(--base-font-color); + background-color: var(--color-bg-canvas); + color: var(--color-text-primary); outline-color: var(--editor-header-color); } } } div[data-type='codeBlock'] { - @import 'prism/tomorrow-night'; + @include meta.load-css('prism/tomorrow-night'); div[data-code-wrap='wrap'] & code[class*=language-]{ white-space: pre-wrap; @@ -699,43 +701,43 @@ div[data-type='codeBlock'] { } [data-code-block-theme='default'] & { - @import 'prism/default'; + @include meta.load-css('prism/default'); } [data-code-block-theme='dark'] & { - @import 'prism/dark'; + @include meta.load-css('prism/dark'); } [data-code-block-theme='one-dark'] & { - @import 'prism/one-dark'; + @include meta.load-css('prism/one-dark'); } [data-code-block-theme='one-light'] & { - @import 'prism/one-light'; + @include meta.load-css('prism/one-light'); } [data-code-block-theme='vs-dark'] & { - @import 'prism/vs-dark'; + @include meta.load-css('prism/vs-dark'); } [data-code-block-theme='vs-light'] & { - @import 'prism/vs-light'; + @include meta.load-css('prism/vs-light'); } [data-code-block-theme='okaidia'] & { - @import 'prism/okaidia'; + @include meta.load-css('prism/okaidia'); } [data-code-block-theme='twilight'] & { - @import 'prism/twilight'; + @include meta.load-css('prism/twilight'); } [data-code-block-theme='coy'] & { - @import 'prism/coy'; + @include meta.load-css('prism/coy'); } [data-code-block-theme='solarized-light'] & { - @import 'prism/solarized-light'; + @include meta.load-css('prism/solarized-light'); } } @@ -908,7 +910,7 @@ div[data-type='codeBlock'] { overflow: hidden; border-radius: var(--panel-border-radius, var(--radius-xl)); box-sizing: border-box; - border: var(--panel-border, 0.5px solid var(--panel-border-color, transparent)); + border: var(--panel-border, 1px solid var(--color-border-default)); background: var(--panel-bg, transparent); box-shadow: var(--panel-box-shadow, none); backdrop-filter: var(--panel-backdrop-filter, none); @@ -937,71 +939,61 @@ div[data-type='codeBlock'] { } .cherry-panel__primary { - --panel-bg: var(--panel-primary-bg, #cfe2ff); - --panel-border-color: var(--panel-primary-border-color, transparent); - --panel-box-shadow: var(--panel-primary-box-shadow, none); - --panel-title-bg: var(--panel-primary-title-bg, #0d6dfe); - --panel-title-color: var(--panel-primary-title-color, #fff); - --panel-title-border-radius: var(--panel-primary-title-border-radius, 0); - --panel-title-border-bottom: var(--panel-primary-title-border-bottom, none); - --panel-body-bg: var(--panel-primary-body-bg, transparent); - --panel-body-color: var(--panel-primary-body-color, #0a58ca); - --panel-body-border-radius: var(--panel-primary-body-border-radius, 0); + --panel-border: 1px solid var(--panel-primary-accent, var(--color-brand-primary)); + --panel-bg: var(--panel-primary-surface, var(--color-bg-active)); + --panel-box-shadow: var(--panel-primary-box-shadow, var(--panel-box-shadow)); + --panel-title-bg: var(--panel-primary-emphasis, var(--panel-primary-accent, var(--color-brand-primary))); + --panel-title-color: var(--panel-primary-title-fg, #fff); + --panel-title-border-bottom: 1px solid var(--panel-primary-accent, var(--color-brand-primary)); + --panel-body-bg: var(--panel-primary-surface, var(--color-bg-active)); + --panel-body-color: var(--panel-primary-body-fg, var(--panel-primary-accent, var(--color-brand-primary))); --panel-icon: var(--panel-primary-icon, '\EA6A'); } .cherry-panel__info { - --panel-bg: var(--panel-info-bg, #cff4fc); - --panel-border-color: var(--panel-info-border-color, transparent); - --panel-box-shadow: var(--panel-info-box-shadow, none); - --panel-title-bg: var(--panel-info-title-bg, #099cba); - --panel-title-color: var(--panel-info-title-color, #fff); - --panel-title-border-radius: var(--panel-info-title-border-radius, 0); - --panel-title-border-bottom: var(--panel-info-title-border-bottom, none); - --panel-body-bg: var(--panel-info-body-bg, transparent); - --panel-body-color: var(--panel-info-body-color, #087990); - --panel-body-border-radius: var(--panel-info-body-border-radius, 0); + --panel-border: 1px solid var(--panel-info-accent, var(--oc-cyan-5)); + --panel-bg: var(--panel-info-surface, var(--oc-cyan-0)); + --panel-box-shadow: var(--panel-info-box-shadow, var(--panel-box-shadow)); + --panel-title-bg: var(--panel-info-emphasis, var(--oc-cyan-6)); + --panel-title-color: var(--panel-info-title-fg, #fff); + --panel-title-border-bottom: 1px solid var(--panel-info-accent, var(--oc-cyan-5)); + --panel-body-bg: var(--panel-info-surface, var(--oc-cyan-0)); + --panel-body-color: var(--panel-info-body-fg, var(--oc-cyan-8)); --panel-icon: var(--panel-info-icon, '\EA69'); } .cherry-panel__warning { - --panel-bg: var(--panel-warning-bg, #fff3cd); - --panel-border-color: var(--panel-warning-border-color, transparent); - --panel-box-shadow: var(--panel-warning-box-shadow, none); - --panel-title-bg: var(--panel-warning-title-bg, #b38806); - --panel-title-color: var(--panel-warning-title-color, #fff); - --panel-title-border-radius: var(--panel-warning-title-border-radius, 0); - --panel-title-border-bottom: var(--panel-warning-title-border-bottom, none); - --panel-body-bg: var(--panel-warning-body-bg, transparent); - --panel-body-color: var(--panel-warning-body-color, #997404); - --panel-body-border-radius: var(--panel-warning-body-border-radius, 0); + --panel-border: 1px solid var(--panel-warning-accent, var(--oc-yellow-5)); + --panel-bg: var(--panel-warning-surface, var(--oc-yellow-0)); + --panel-box-shadow: var(--panel-warning-box-shadow, var(--panel-box-shadow)); + --panel-title-bg: var(--panel-warning-emphasis, var(--oc-yellow-6)); + --panel-title-color: var(--panel-warning-title-fg, #fff); + --panel-title-border-bottom: 1px solid var(--panel-warning-accent, var(--oc-yellow-5)); + --panel-body-bg: var(--panel-warning-surface, var(--oc-yellow-0)); + --panel-body-color: var(--panel-warning-body-fg, var(--oc-yellow-8)); --panel-icon: var(--panel-warning-icon, '\EA6B'); } .cherry-panel__danger { - --panel-bg: var(--panel-danger-bg, #f8d7da); - --panel-border-color: var(--panel-danger-border-color, transparent); - --panel-box-shadow: var(--panel-danger-box-shadow, none); - --panel-title-bg: var(--panel-danger-title-bg, #dc3545); - --panel-title-color: var(--panel-danger-title-color, #fff); - --panel-title-border-radius: var(--panel-danger-title-border-radius, 0); - --panel-title-border-bottom: var(--panel-danger-title-border-bottom, none); - --panel-body-bg: var(--panel-danger-body-bg, transparent); - --panel-body-color: var(--panel-danger-body-color, #b02a37); - --panel-body-border-radius: var(--panel-danger-body-border-radius, 0); + --panel-border: 1px solid var(--panel-danger-accent, var(--oc-red-5)); + --panel-bg: var(--panel-danger-surface, var(--oc-red-0)); + --panel-box-shadow: var(--panel-danger-box-shadow, var(--panel-box-shadow)); + --panel-title-bg: var(--panel-danger-emphasis, var(--oc-red-6)); + --panel-title-color: var(--panel-danger-title-fg, #fff); + --panel-title-border-bottom: 1px solid var(--panel-danger-accent, var(--oc-red-5)); + --panel-body-bg: var(--panel-danger-surface, var(--oc-red-0)); + --panel-body-color: var(--panel-danger-body-fg, var(--oc-red-8)); --panel-icon: var(--panel-danger-icon, '\EA68'); } .cherry-panel__success { - --panel-bg: var(--panel-success-bg, #d1e7dd); - --panel-border-color: var(--panel-success-border-color, transparent); - --panel-box-shadow: var(--panel-success-box-shadow, none); - --panel-title-bg: var(--panel-success-title-bg, #198754); - --panel-title-color: var(--panel-success-title-color, #fff); - --panel-title-border-radius: var(--panel-success-title-border-radius, 0); - --panel-title-border-bottom: var(--panel-success-title-border-bottom, none); - --panel-body-bg: var(--panel-success-body-bg, transparent); - --panel-body-color: var(--panel-success-body-color, #146c43); - --panel-body-border-radius: var(--panel-success-body-border-radius, 0); + --panel-border: 1px solid var(--panel-success-accent, var(--oc-green-5)); + --panel-bg: var(--panel-success-surface, var(--oc-green-0)); + --panel-box-shadow: var(--panel-success-box-shadow, var(--panel-box-shadow)); + --panel-title-bg: var(--panel-success-emphasis, var(--oc-green-6)); + --panel-title-color: var(--panel-success-title-fg, #fff); + --panel-title-border-bottom: 1px solid var(--panel-success-accent, var(--oc-green-5)); + --panel-body-bg: var(--panel-success-surface, var(--oc-green-0)); + --panel-body-color: var(--panel-success-body-fg, var(--oc-green-8)); --panel-icon: var(--panel-success-icon, '\EA67'); } diff --git a/packages/cherry-markdown/src/sass/markdown_pure.scss b/packages/cherry-markdown/src/sass/markdown_pure.scss index 95629dde8..802d0da59 100644 --- a/packages/cherry-markdown/src/sass/markdown_pure.scss +++ b/packages/cherry-markdown/src/sass/markdown_pure.scss @@ -1,10 +1,6 @@ -@import './markdown.scss'; +@use 'sass:meta'; + +@include meta.load-css('./variables/index'); +@include meta.load-css('./markdown'); /** 引入自带的主题 */ -@import './themes/default.scss'; -@import './themes/dark.scss'; -@import './themes/abyss.scss'; -@import './themes/green.scss'; -@import './themes/red.scss'; -@import './themes/gray.scss'; -@import './themes/violet.scss'; -@import './themes/blue.scss'; +@include meta.load-css('./themes/index'); diff --git a/packages/cherry-markdown/src/sass/previewer.scss b/packages/cherry-markdown/src/sass/previewer.scss index 77a3ab04f..6717ac597 100644 --- a/packages/cherry-markdown/src/sass/previewer.scss +++ b/packages/cherry-markdown/src/sass/previewer.scss @@ -17,8 +17,8 @@ border-radius: 5px; z-index: 11; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); - background: var(--base-editor-bg); - border: 1px solid var(--base-border-color); + background: var(--color-bg-canvas); + border: 1px solid var(--color-border-default); } .footnote.hidden { display: none; @@ -26,7 +26,7 @@ .cherry-previewer-img-size-handler { position:absolute; box-shadow: 0 1px 4px 0 rgba(20,81,154, 0.5); - border:1px solid var(--primary-color); + border:1px solid var(--color-brand-primary); box-sizing: content-box; pointer-events:none; .cherry-previewer-img-size-handler__points { @@ -36,7 +36,7 @@ margin-top: -7px; margin-left: -7px; border-radius: 9px; - background: var(--primary-color); + background: var(--color-brand-primary); border: 2px solid var(--oc-white); box-sizing: content-box; box-shadow: 0px 2px 2px 0px rgba(20,81,154,0.5); @@ -83,9 +83,20 @@ } } .cherry-previewer-img-tool-handler { - @extend .cherry-bubble; - padding: var(--bubble-padding); + position: absolute; display: flex; + align-items: center; + justify-content: flex-start; + flex-wrap: wrap; + font-size: var(--font-size-sm); + min-height: var(--bubble-btn-height); + min-width: 50px; + border: var(--border-width-1) solid var(--bubble-border); + background-color: var(--bubble-bg); + box-shadow: var(--bubble-shadow); + border-radius: var(--bubble-radius); + z-index: var(--bubble-z-index); + padding: var(--bubble-padding); flex-direction: column; .img-tool-group { @@ -121,7 +132,7 @@ width: 100%; margin: var(--border-width-4) 0; height: var(--border-width-1); - border-bottom: var(--border-width-1) var(--base-border-color) dashed; + border-bottom: var(--border-width-1) var(--color-border-default) dashed; } .img-tool-icon { @@ -140,7 +151,7 @@ border: 0; box-sizing: border-box; resize: none; - outline: 1px solid var(--primary-color); + outline: 1px solid var(--color-brand-primary); word-break: break-all; } } @@ -179,7 +190,7 @@ cursor: pointer; transition: all 0.3s; &:hover { - background-color: var(--secondary-color); + background-color: var(--color-bg-active); } } @@ -196,7 +207,7 @@ font-size: var(--font-size-xs); border: 1px solid var(--md-table-operator-color); border-radius: 999px; - background-color: var(--base-previewer-bg); + background-color: var(--color-bg-surface); cursor: pointer; transition: all 0.3s; z-index: 1001; @@ -290,7 +301,7 @@ width: var(--bubble-btn-height); height: var(--bubble-btn-height); cursor: pointer; - color: var(--base-font-color); + color: var(--color-text-primary); font-size: var(--font-size-sm); transition: background-color 0.2s ease, color 0.2s ease; border-radius: calc(var(--bubble-radius) - 2px); @@ -337,12 +348,10 @@ background-color: var(--md-paragraph-highlight-line-bg); } 100% { - background-color: var(--base-previewer-bg); + background-color: var(--color-bg-surface); } } .cherry-highlight-line { animation: changeHighlightLineBg 1s; } } - - diff --git a/packages/cherry-markdown/src/sass/themes/abyss.scss b/packages/cherry-markdown/src/sass/themes/abyss.scss index 9be00347b..4a85ea5a7 100644 --- a/packages/cherry-markdown/src/sass/themes/abyss.scss +++ b/packages/cherry-markdown/src/sass/themes/abyss.scss @@ -3,21 +3,31 @@ */ .cherry.theme__abyss { - /* ========== 基础色彩变量覆盖 ========== */ - --primary-color: #8394AD; - --secondary-color: #2C2E37; - - --base-font-color: #CECFCF; - --base-editor-bg: #1E222A; - --base-previewer-bg: #1E222A; - --base-border-color: var(--primary-color); + /* ========== 新语义变量覆盖 ========== */ + --color-brand-primary: #8394AD; + --color-brand-primary-hover: #97a7be; + --color-text-primary: #CECFCF; + --color-text-secondary: #A8A8A9; + --color-bg-canvas: #1E222A; + --color-bg-surface: #1E222A; + --color-bg-hover: #2C2E37; + --color-bg-active: #2C2E37; + --color-border-default: var(--color-brand-primary); + + /* ========== 兼容旧语义别名 ========== */ + --primary-color: var(--color-brand-primary); + --secondary-color: var(--color-bg-active); + --base-font-color: var(--color-text-primary); + --base-editor-bg: var(--color-bg-canvas); + --base-previewer-bg: var(--color-bg-surface); + --base-border-color: var(--color-border-default); /* ========== 工具栏相关变量 ========== */ --toolbar-bg: #181C24; - --toolbar-btn-color: #CECFCF; - --toolbar-btn-hover-bg: var(--secondary-color); - --toolbar-btn-hover-color: var(--primary-color); - --toolbar-btn-active-bg: var(--secondary-color); + --toolbar-btn-color: var(--color-text-primary); + --toolbar-btn-hover-bg: var(--color-bg-active); + --toolbar-btn-hover-color: var(--color-brand-primary); + --toolbar-btn-active-bg: var(--color-bg-active); --toolbar-split-color: var(--oc-blue-5); --toolbar-shadow: none; @@ -27,7 +37,7 @@ --dropdown-radius: var(--radius-xl); --dropdown-padding: var(--spacing-xs) 0; - // 下拉菜单项 + /* 下拉菜单项 */ --dropdown-item-hover-bg: var(--toolbar-btn-hover-bg); --dropdown-item-color: var(--toolbar-btn-color); @@ -52,11 +62,12 @@ --md-inline-code-bg: #00203d; --md-blockquote-bg: #2A2F3B; --md-hr-border: var(--primary-color); - /* ========== table 相关变量 ========== */ + /* ========== Table 相关变量 ========== */ --md-table-border: #47556D; --md-table-drag-border-bg: var(--oc-blue-3); --md-table-sort-active-bg: rgba(100, 203, 255, 0.4); + /* ========== TOC 相关变量 ========== */ --md-toc-bg: #2A2F3B; --md-toc-title-color: var(--primary-color); --md-toc-link-color: var(--primary-color); @@ -65,7 +76,7 @@ --md-toc-link-hover-bg: var(--primary-color); --md-toc-indicator-hover-color: var(--primary-color); - /* ========== 手风琴组件变量覆盖 ========== */ + /* ========== Accordion 相关变量 ========== */ --accordion-bg: #2A2F3B; --accordion-border: var(--oc-blue-5); --accordion-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); @@ -75,11 +86,11 @@ --accordion-body-border: var(--oc-blue-5); --accordion-body-color: var(--base-font-color); - /* ========== Mermaid 工具栏变量覆盖 ========== */ + /* ========== Mermaid 相关变量 ========== */ --mermaid-toolbar-slider-bg: rgba(255, 255, 255, 0.15); --mermaid-toolbar-tab-active-color: #fff; - /* ========== 其余单个组件 ========== */ + /* ========== 其它组件变量 ========== */ --drag-border-color: #3a4453; /* ========== Panel 相关变量 ========== */ @@ -90,63 +101,54 @@ --panel-backdrop-filter: blur(10px); --panel-title-bg: linear-gradient(145deg, #333333 0%, #2a2a2a 100%); --panel-title-color: var(--oc-gray-1); - --panel-title-border-radius: 16px 16px 0 0; --panel-title-border-bottom: 1px solid rgba(109, 40, 217, 0.15); --panel-body-bg: linear-gradient(145deg, #242424 0%, #1e1e1e 100%); --panel-body-color: var(--oc-gray-2); - --panel-body-border-radius: 0 0 16px 16px; /* Primary Panel */ - --panel-primary-bg: linear-gradient(145deg, rgba(109, 40, 217, 0.08) 0%, rgba(67, 56, 202, 0.08) 100%); - --panel-primary-border-color: rgba(109, 40, 217, 0.3); + --panel-primary-accent: rgba(109, 40, 217, 0.3); + --panel-primary-surface: linear-gradient(145deg, rgba(109, 40, 217, 0.08) 0%, rgba(67, 56, 202, 0.08) 100%); + --panel-primary-emphasis: linear-gradient(145deg, rgba(109, 40, 217, 0.3) 0%, rgba(67, 56, 202, 0.3) 100%); + --panel-primary-title-fg: var(--oc-violet-2); + --panel-primary-body-fg: var(--oc-violet-3); --panel-primary-box-shadow: none; - --panel-primary-title-bg: linear-gradient(145deg, rgba(109, 40, 217, 0.3) 0%, rgba(67, 56, 202, 0.3) 100%); - --panel-primary-title-color: var(--oc-violet-2); - --panel-primary-body-bg: linear-gradient(145deg, rgba(109, 40, 217, 0.05) 0%, rgba(67, 56, 202, 0.05) 100%); - --panel-primary-body-color: var(--oc-violet-3); /* Info Panel */ - --panel-info-bg: linear-gradient(145deg, rgba(34, 184, 207, 0.08) 0%, rgba(59, 130, 246, 0.08) 100%); - --panel-info-border-color: rgba(34, 184, 207, 0.3); + --panel-info-accent: rgba(34, 184, 207, 0.3); + --panel-info-surface: linear-gradient(145deg, rgba(34, 184, 207, 0.08) 0%, rgba(59, 130, 246, 0.08) 100%); + --panel-info-emphasis: linear-gradient(145deg, rgba(34, 184, 207, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%); + --panel-info-title-fg: var(--oc-cyan-2); + --panel-info-body-fg: var(--oc-cyan-3); --panel-info-box-shadow: none; - --panel-info-title-bg: linear-gradient(145deg, rgba(34, 184, 207, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%); - --panel-info-title-color: var(--oc-cyan-2); - --panel-info-body-bg: linear-gradient(145deg, rgba(34, 184, 207, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%); - --panel-info-body-color: var(--oc-cyan-3); /* Warning Panel */ - --panel-warning-bg: linear-gradient(145deg, rgba(255, 193, 7, 0.08) 0%, rgba(251, 191, 36, 0.08) 100%); - --panel-warning-border-color: rgba(255, 193, 7, 0.3); + --panel-warning-accent: rgba(255, 193, 7, 0.3); + --panel-warning-surface: linear-gradient(145deg, rgba(255, 193, 7, 0.08) 0%, rgba(251, 191, 36, 0.08) 100%); + --panel-warning-emphasis: linear-gradient(145deg, rgba(255, 193, 7, 0.3) 0%, rgba(251, 191, 36, 0.3) 100%); + --panel-warning-title-fg: var(--oc-yellow-2); + --panel-warning-body-fg: var(--oc-yellow-3); --panel-warning-box-shadow: none; - --panel-warning-title-bg: linear-gradient(145deg, rgba(255, 193, 7, 0.3) 0%, rgba(251, 191, 36, 0.3) 100%); - --panel-warning-title-color: var(--oc-yellow-2); - --panel-warning-body-bg: linear-gradient(145deg, rgba(255, 193, 7, 0.05) 0%, rgba(251, 191, 36, 0.05) 100%); - --panel-warning-body-color: var(--oc-yellow-3); /* Danger Panel */ - --panel-danger-bg: linear-gradient(145deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 127, 0.08) 100%); - --panel-danger-border-color: rgba(239, 68, 68, 0.3); + --panel-danger-accent: rgba(239, 68, 68, 0.3); + --panel-danger-surface: linear-gradient(145deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 127, 0.08) 100%); + --panel-danger-emphasis: linear-gradient(145deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 127, 0.3) 100%); + --panel-danger-title-fg: var(--oc-red-2); + --panel-danger-body-fg: var(--oc-red-3); --panel-danger-box-shadow: none; - --panel-danger-title-bg: linear-gradient(145deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 127, 0.3) 100%); - --panel-danger-title-color: var(--oc-red-2); - --panel-danger-body-bg: linear-gradient(145deg, rgba(239, 68, 68, 0.05) 0%, rgba(220, 38, 127, 0.05) 100%); - --panel-danger-body-color: var(--oc-red-3); /* Success Panel */ - --panel-success-bg: linear-gradient(145deg, rgba(34, 197, 94, 0.08) 0%, rgba(16, 185, 129, 0.08) 100%); - --panel-success-border-color: rgba(34, 197, 94, 0.3); + --panel-success-accent: rgba(34, 197, 94, 0.3); + --panel-success-surface: linear-gradient(145deg, rgba(34, 197, 94, 0.08) 0%, rgba(16, 185, 129, 0.08) 100%); + --panel-success-emphasis: linear-gradient(145deg, rgba(34, 197, 94, 0.3) 0%, rgba(16, 185, 129, 0.3) 100%); + --panel-success-title-fg: var(--oc-green-2); + --panel-success-body-fg: var(--oc-green-3); --panel-success-box-shadow: none; - --panel-success-title-bg: linear-gradient(145deg, rgba(34, 197, 94, 0.3) 0%, rgba(16, 185, 129, 0.3) 100%); - --panel-success-title-color: var(--oc-green-2); - --panel-success-body-bg: linear-gradient(145deg, rgba(34, 197, 94, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%); - --panel-success-body-color: var(--oc-green-3); } .cherry-markdown.theme__abyss { - figure { svg:not(.echarts-svg) { - path, rect, line { diff --git a/packages/cherry-markdown/src/sass/themes/blue.scss b/packages/cherry-markdown/src/sass/themes/blue.scss index f70c8cfd4..ba47056a1 100644 --- a/packages/cherry-markdown/src/sass/themes/blue.scss +++ b/packages/cherry-markdown/src/sass/themes/blue.scss @@ -3,23 +3,34 @@ */ .cherry.theme__blue { - /* ========== 基础色彩变量覆盖 ========== */ - --primary-color: var(--oc-indigo-6); - --secondary-color: var(--oc-violet-0); - - --base-font-color: var(--oc-indigo-8); - --base-editor-bg: var(--oc-violet-0); - --base-previewer-bg: var(--oc-violet-0); - --base-border-color: var(--oc-indigo-4); + /* ========== 新语义变量覆盖 ========== */ + --color-brand-primary: var(--oc-indigo-6); + --color-brand-primary-hover: var(--oc-indigo-5); + --color-text-primary: var(--oc-indigo-8); + --color-text-secondary: var(--oc-indigo-6); + --color-bg-canvas: var(--oc-violet-0); + --color-bg-surface: var(--oc-violet-0); + --color-bg-hover: var(--oc-violet-3); + --color-bg-active: var(--oc-violet-0); + --color-border-default: var(--oc-indigo-4); + + /* ========== 兼容旧语义别名 ========== */ + --primary-color: var(--color-brand-primary); + --secondary-color: var(--color-bg-active); + --base-font-color: var(--color-text-primary); + --base-editor-bg: var(--color-bg-canvas); + --base-previewer-bg: var(--color-bg-surface); + --base-border-color: var(--color-border-default); /* ========== 工具栏相关变量 ========== */ --toolbar-bg: var(--oc-violet-1); --toolbar-btn-color: var(--oc-indigo-7); - --toolbar-btn-hover-bg: var(--oc-violet-3); + --toolbar-btn-hover-bg: var(--color-bg-hover); --toolbar-btn-hover-color: var(--oc-white); - --toolbar-btn-active-bg:var(--oc-blue-5); - --toolbar-split-color: var(--oc-indigo-4); + --toolbar-btn-active-bg: var(--oc-blue-5); + --toolbar-split-color: var(--color-border-default); + /* ========== 工具栏的下拉菜单 ========== */ --dropdown-bg: var(--oc-white); /* ========== 编辑器相关变量 ========== */ @@ -43,18 +54,28 @@ --md-inline-code-bg: var(--oc-violet-1); --md-blockquote-bg: var(--oc-violet-1); --md-hr-border: var(--oc-indigo-4); - /* ========== table 相关变量 ========== */ - --md-table-border: var(--oc-blue-5); - --md-table-add-border: var(--oc-blue-9); - --md-table-delete-bg: var(--oc-violet-1); - --md-table-sort-active-bg: var(--oc-blue-5); - --md-table-sort-border: var(--oc-indigo-4); - /* ========== table 相关变量 ========== */ + + /* ========== Table 相关变量 ========== */ --md-table-border: var(--oc-blue-5); --md-table-drag-border-bg: var(--primary-color); --md-table-sort-active-bg: rgba(184, 134, 253, 0.4); + /* ========== TOC 相关变量 ========== */ --md-paragraph-highlight-line-bg: var(--oc-violet-1); + --md-toc-bg: var(--oc-white); + --md-toc-border-color: var(--base-border-color); + --md-toc-indicator-color: var(--oc-indigo-1); + --md-toc-link-hover-bg: var(--oc-violet-0); + --md-toc-link-active-bg: var(--oc-violet-1); + + /* ========== Accordion 相关变量 ========== */ + --accordion-bg: var(--oc-violet-0); + --accordion-border: var(--oc-indigo-2); + --accordion-summary-bg: var(--oc-indigo-6); + --accordion-summary-hover-bg: var(--oc-indigo-5); + --accordion-body-bg: var(--oc-violet-0); + --accordion-body-border: var(--oc-indigo-1); + --accordion-body-color: var(--oc-indigo-8); /* ========== Panel 相关变量 ========== */ --panel-border-radius: 0; @@ -63,64 +84,45 @@ --panel-box-shadow: none; --panel-title-bg: transparent; --panel-title-color: inherit; + --panel-title-border-bottom: none; --panel-body-bg: transparent; --panel-body-color: inherit; + --panel-body-border-radius: 0; /* Primary Panel */ - --panel-primary-border: none; - --panel-primary-border-color: transparent; - --panel-primary-title-bg: transparent; - --panel-primary-bg: transparent; - --panel-primary-title-color: var(--oc-blue-7); - --panel-primary-body-color: inherit; + --panel-primary-accent: transparent; + --panel-primary-surface: transparent; + --panel-primary-emphasis: transparent; + --panel-primary-title-fg: var(--oc-blue-7); + --panel-primary-body-fg: inherit; /* Info Panel */ - --panel-info-border: none; - --panel-info-border-color: transparent; - --panel-info-title-bg: transparent; - --panel-info-bg: transparent; - --panel-info-title-color: var(--oc-cyan-7); - --panel-info-body-color: inherit; + --panel-info-accent: transparent; + --panel-info-surface: transparent; + --panel-info-emphasis: transparent; + --panel-info-title-fg: var(--oc-cyan-7); + --panel-info-body-fg: inherit; /* Warning Panel */ - --panel-warning-border: none; - --panel-warning-border-color: transparent; - --panel-warning-title-bg: transparent; - --panel-warning-bg: transparent; - --panel-warning-title-color: var(--oc-yellow-7); - --panel-warning-body-color: inherit; + --panel-warning-accent: transparent; + --panel-warning-surface: transparent; + --panel-warning-emphasis: transparent; + --panel-warning-title-fg: var(--oc-yellow-7); + --panel-warning-body-fg: inherit; /* Danger Panel */ - --panel-danger-border: none; - --panel-danger-border-color: transparent; - --panel-danger-title-bg: transparent; - --panel-danger-bg: transparent; - --panel-danger-title-color: var(--oc-pink-7); - --panel-danger-body-color: inherit; + --panel-danger-accent: transparent; + --panel-danger-surface: transparent; + --panel-danger-emphasis: transparent; + --panel-danger-title-fg: var(--oc-pink-7); + --panel-danger-body-fg: inherit; /* Success Panel */ - --panel-success-border: none; - --panel-success-border-color: transparent; - --panel-success-title-bg: transparent; - --panel-success-bg: transparent; - --panel-success-title-color: var(--oc-teal-7); - --panel-success-body-color: inherit; - --md-toc-bg: var(--oc-white); - --md-toc-border-color: var(--base-border-color); - --md-toc-indicator-color: var(--oc-indigo-1); - --md-toc-link-hover-bg: var(--oc-violet-0); - --md-toc-link-active-bg: var(--oc-violet-1); - - /* ========== 手风琴组件变量覆盖 ========== */ - --accordion-bg: var(--oc-violet-0); - --accordion-border: var(--oc-indigo-2); - - --accordion-summary-bg: var(--oc-indigo-6); - --accordion-summary-hover-bg: var(--oc-indigo-5); - - --accordion-body-bg: var(--oc-violet-0); - --accordion-body-border: var(--oc-indigo-1); - --accordion-body-color: var(--oc-indigo-8); + --panel-success-accent: transparent; + --panel-success-surface: transparent; + --panel-success-emphasis: transparent; + --panel-success-title-fg: var(--oc-teal-7); + --panel-success-body-fg: inherit; } /** 预览区域样式 */ diff --git a/packages/cherry-markdown/src/sass/themes/dark.scss b/packages/cherry-markdown/src/sass/themes/dark.scss index 7ef55ada9..75f09a53f 100644 --- a/packages/cherry-markdown/src/sass/themes/dark.scss +++ b/packages/cherry-markdown/src/sass/themes/dark.scss @@ -3,23 +3,35 @@ */ .cherry.theme__dark { - /* ========== 基础色彩变量覆盖 ========== */ - --primary-color: var(--oc-orange-5); - --secondary-color: #513838; - - --base-font-color: var(--oc-gray-4); - --base-editor-bg: var(--oc-gray-9); - --base-previewer-bg: var(--oc-gray-8); - --base-border-color: var(--oc-gray-5); + /* ========== 新语义变量覆盖 ========== */ + --color-brand-primary: var(--oc-orange-5); + --color-brand-primary-hover: var(--oc-orange-6); + --color-text-primary: var(--oc-gray-4); + --color-text-secondary: var(--oc-gray-5); + --color-bg-canvas: var(--oc-gray-9); + --color-bg-surface: var(--oc-gray-8); + --color-bg-hover: var(--oc-gray-8); + --color-bg-active: #513838; + --color-border-default: var(--oc-gray-5); + + /* ========== 兼容旧语义别名 ========== */ + --primary-color: var(--color-brand-primary); + --secondary-color: var(--color-bg-active); + --base-font-color: var(--color-text-primary); + --base-editor-bg: var(--color-bg-canvas); + --base-previewer-bg: var(--color-bg-surface); + --base-border-color: var(--color-border-default); /* ========== 工具栏相关变量 ========== */ --toolbar-bg: var(--oc-gray-7); --toolbar-btn-color: var(--oc-gray-4); --toolbar-btn-hover-bg: var(--oc-gray-6); --toolbar-btn-hover-color: var(--oc-white); - --toolbar-btn-active-bg:var(--oc-gray-8); - --toolbar-split-color: var(--oc-gray-5); + --toolbar-btn-active-bg: var(--color-bg-active); + --toolbar-split-color: var(--color-border-default); + /* ========== 工具栏的下拉菜单 ========== */ + --dropdown-bg: var(--toolbar-bg); /* ========== 编辑器相关变量 ========== */ --editor-header-color: var(--primary-color); --editor-string-color: var(--oc-yellow-3); @@ -34,8 +46,8 @@ --dropdown-item-hover-bg: var(--oc-gray-9); --dropdown-item-hover-color: var(--oc-orange-5); - --dropdown-item-active-bg: var(--secondary-color); - --dropdown-item-active-color: var(--primary-color); + --dropdown-item-active-bg: var(--color-bg-active); + --dropdown-item-active-color: var(--color-brand-primary); /* ========== Markdown 相关变量 ========== */ --md-heading-color: var(--oc-orange-5); @@ -46,12 +58,12 @@ --md-inline-code-bg: rgb(81, 56, 56); --md-blockquote-bg: rgba(102, 128, 153, 0.05); --md-hr-border: var(--oc-gray-5); - --md-table-border: var(--oc-gray-5); - /* ========== table 相关变量 ========== */ + /* ========== Table 相关变量 ========== */ --md-table-border: var(--oc-gray-5); --md-table-drag-border-bg: var(--primary-color); --md-table-sort-active-bg: rgba(141, 104, 51, 0.493); + /* ========== TOC 相关变量 ========== */ --md-toc-bg: var(--oc-gray-9); --md-toc-border-color: var(--oc-gray-7); --md-toc-indicator-color: var(--oc-gray-7); @@ -59,24 +71,21 @@ --md-toc-link-active-bg: var(--oc-gray-7); --md-paragraph-highlight-line-bg: var(--oc-gray-7); - /* ========== 手风琴组件变量覆盖 ========== */ + /* ========== Accordion 相关变量 ========== */ --accordion-bg: var(--oc-gray-8); --accordion-border: var(--oc-gray-6); - --accordion-summary-bg: var(--oc-orange-6); --accordion-summary-hover-bg: var(--oc-orange-5); - --accordion-body-bg: var(--oc-gray-7); --accordion-body-border: var(--oc-gray-6); --accordion-body-color: var(--oc-gray-4); - /* ========== Mermaid 工具栏变量覆盖 ========== */ + /* ========== Mermaid 相关变量 ========== */ --mermaid-toolbar-slider-bg: rgba(255, 255, 255, 0.15); --mermaid-toolbar-tab-active-color: #fff; - /* 目录区域样式 */ + /* ========== TOC 区域样式 ========== */ .cherry-flex-toc { - .cherry-toc-head { i { &:hover { @@ -114,17 +123,16 @@ /** 快捷键配置面板样式 */ .cherry-shortcut-key-config-panel-wrapper { - .shortcut-panel-title, .shortcut-panel-settings { + .shortcut-panel-title, + .shortcut-panel-settings { color: var(--oc-gray-9); } } /** 预览区域样式 */ .cherry-markdown.theme__dark { - figure { svg:not(.echarts-svg) { - path, rect, line { @@ -158,54 +166,47 @@ --panel-backdrop-filter: blur(10px); --panel-title-bg: linear-gradient(145deg, #333333 0%, #2a2a2a 100%); --panel-title-color: var(--oc-gray-1); - --panel-title-border-radius: 16px 16px 0 0; --panel-title-border-bottom: 1px solid rgba(109, 40, 217, 0.15); --panel-body-bg: linear-gradient(145deg, #242424 0%, #1e1e1e 100%); --panel-body-color: var(--oc-gray-2); - --panel-body-border-radius: 0 0 16px 16px; /* Primary Panel */ - --panel-primary-bg: linear-gradient(145deg, rgba(109, 40, 217, 0.08) 0%, rgba(67, 56, 202, 0.08) 100%); - --panel-primary-border-color: rgba(109, 40, 217, 0.3); + --panel-primary-accent: rgba(109, 40, 217, 0.3); + --panel-primary-surface: linear-gradient(145deg, rgba(109, 40, 217, 0.08) 0%, rgba(67, 56, 202, 0.08) 100%); + --panel-primary-emphasis: linear-gradient(145deg, rgba(109, 40, 217, 0.3) 0%, rgba(67, 56, 202, 0.3) 100%); + --panel-primary-title-fg: var(--oc-violet-2); + --panel-primary-body-fg: var(--oc-violet-3); --panel-primary-box-shadow: none; - --panel-primary-title-bg: linear-gradient(145deg, rgba(109, 40, 217, 0.3) 0%, rgba(67, 56, 202, 0.3) 100%); - --panel-primary-title-color: var(--oc-violet-2); - --panel-primary-body-bg: linear-gradient(145deg, rgba(109, 40, 217, 0.05) 0%, rgba(67, 56, 202, 0.05) 100%); - --panel-primary-body-color: var(--oc-violet-3); /* Info Panel */ - --panel-info-bg: linear-gradient(145deg, rgba(34, 184, 207, 0.08) 0%, rgba(59, 130, 246, 0.08) 100%); - --panel-info-border-color: rgba(34, 184, 207, 0.3); + --panel-info-accent: rgba(34, 184, 207, 0.3); + --panel-info-surface: linear-gradient(145deg, rgba(34, 184, 207, 0.08) 0%, rgba(59, 130, 246, 0.08) 100%); + --panel-info-emphasis: linear-gradient(145deg, rgba(34, 184, 207, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%); + --panel-info-title-fg: var(--oc-cyan-2); + --panel-info-body-fg: var(--oc-cyan-3); --panel-info-box-shadow: none; - --panel-info-title-bg: linear-gradient(145deg, rgba(34, 184, 207, 0.3) 0%, rgba(59, 130, 246, 0.3) 100%); - --panel-info-title-color: var(--oc-cyan-2); - --panel-info-body-bg: linear-gradient(145deg, rgba(34, 184, 207, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%); - --panel-info-body-color: var(--oc-cyan-3); /* Warning Panel */ - --panel-warning-bg: linear-gradient(145deg, rgba(255, 193, 7, 0.08) 0%, rgba(251, 191, 36, 0.08) 100%); - --panel-warning-border-color: rgba(255, 193, 7, 0.3); + --panel-warning-accent: rgba(255, 193, 7, 0.3); + --panel-warning-surface: linear-gradient(145deg, rgba(255, 193, 7, 0.08) 0%, rgba(251, 191, 36, 0.08) 100%); + --panel-warning-emphasis: linear-gradient(145deg, rgba(255, 193, 7, 0.3) 0%, rgba(251, 191, 36, 0.3) 100%); + --panel-warning-title-fg: var(--oc-yellow-2); + --panel-warning-body-fg: var(--oc-yellow-3); --panel-warning-box-shadow: none; - --panel-warning-title-bg: linear-gradient(145deg, rgba(255, 193, 7, 0.3) 0%, rgba(251, 191, 36, 0.3) 100%); - --panel-warning-title-color: var(--oc-yellow-2); - --panel-warning-body-bg: linear-gradient(145deg, rgba(255, 193, 7, 0.05) 0%, rgba(251, 191, 36, 0.05) 100%); - --panel-warning-body-color: var(--oc-yellow-3); /* Danger Panel */ - --panel-danger-bg: linear-gradient(145deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 127, 0.08) 100%); - --panel-danger-border-color: rgba(239, 68, 68, 0.3); + --panel-danger-accent: rgba(239, 68, 68, 0.3); + --panel-danger-surface: linear-gradient(145deg, rgba(239, 68, 68, 0.08) 0%, rgba(220, 38, 127, 0.08) 100%); + --panel-danger-emphasis: linear-gradient(145deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 127, 0.3) 100%); + --panel-danger-title-fg: var(--oc-red-2); + --panel-danger-body-fg: var(--oc-red-3); --panel-danger-box-shadow: none; - --panel-danger-title-bg: linear-gradient(145deg, rgba(239, 68, 68, 0.3) 0%, rgba(220, 38, 127, 0.3) 100%); - --panel-danger-title-color: var(--oc-red-2); - --panel-danger-body-bg: linear-gradient(145deg, rgba(239, 68, 68, 0.05) 0%, rgba(220, 38, 127, 0.05) 100%); - --panel-danger-body-color: var(--oc-red-3); /* Success Panel */ - --panel-success-bg: linear-gradient(145deg, rgba(34, 197, 94, 0.08) 0%, rgba(16, 185, 129, 0.08) 100%); - --panel-success-border-color: rgba(34, 197, 94, 0.3); + --panel-success-accent: rgba(34, 197, 94, 0.3); + --panel-success-surface: linear-gradient(145deg, rgba(34, 197, 94, 0.08) 0%, rgba(16, 185, 129, 0.08) 100%); + --panel-success-emphasis: linear-gradient(145deg, rgba(34, 197, 94, 0.3) 0%, rgba(16, 185, 129, 0.3) 100%); + --panel-success-title-fg: var(--oc-green-2); + --panel-success-body-fg: var(--oc-green-3); --panel-success-box-shadow: none; - --panel-success-title-bg: linear-gradient(145deg, rgba(34, 197, 94, 0.3) 0%, rgba(16, 185, 129, 0.3) 100%); - --panel-success-title-color: var(--oc-green-2); - --panel-success-body-bg: linear-gradient(145deg, rgba(34, 197, 94, 0.05) 0%, rgba(16, 185, 129, 0.05) 100%); - --panel-success-body-color: var(--oc-green-3); } diff --git a/packages/cherry-markdown/src/sass/themes/default.scss b/packages/cherry-markdown/src/sass/themes/default.scss index 62fc5cd76..bc9d5f9af 100644 --- a/packages/cherry-markdown/src/sass/themes/default.scss +++ b/packages/cherry-markdown/src/sass/themes/default.scss @@ -3,21 +3,31 @@ */ .cherry.theme__default { - /* ========== 基础色彩变量覆盖 ========== */ - --primary-color: var(--oc-blue-6); - --secondary-color: var(--oc-blue-0); - - --base-font-color: var(--oc-gray-8); - --base-editor-bg: var(--oc-white); - --base-previewer-bg: var(--oc-white); - --base-border-color: var(--oc-blue-5); + /* ========== 新语义变量覆盖 ========== */ + --color-brand-primary: var(--oc-blue-6); + --color-brand-primary-hover: var(--oc-blue-7); + --color-text-primary: var(--oc-gray-8); + --color-text-secondary: var(--oc-gray-6); + --color-bg-canvas: var(--oc-white); + --color-bg-surface: var(--oc-white); + --color-bg-hover: var(--oc-gray-2); + --color-bg-active: var(--oc-blue-0); + --color-border-default: var(--oc-blue-5); + + /* ========== 兼容旧语义别名 ========== */ + --primary-color: var(--color-brand-primary); + --secondary-color: var(--color-bg-active); + --base-font-color: var(--color-text-primary); + --base-editor-bg: var(--color-bg-canvas); + --base-previewer-bg: var(--color-bg-surface); + --base-border-color: var(--color-border-default); /* ========== 工具栏相关变量 ========== */ --toolbar-bg: var(--oc-white); --toolbar-btn-color: var(--oc-gray-8); - --toolbar-btn-hover-bg: var(--oc-gray-2); - --toolbar-btn-hover-color: var(--primary-color); - --toolbar-btn-active-bg: var(--secondary-color); + --toolbar-btn-hover-bg: var(--color-bg-hover); + --toolbar-btn-hover-color: var(--color-brand-primary); + --toolbar-btn-active-bg: var(--color-bg-active); --toolbar-split-color: var(--oc-blue-5); /* ========== 编辑器相关变量 ========== */ @@ -41,135 +51,21 @@ --md-inline-code-bg: var(--oc-blue-0); --md-blockquote-bg: var(--oc-blue-0); --md-hr-border: var(--oc-blue-5); - /* ========== table 相关变量 ========== */ + + /* ========== Table 相关变量 ========== */ --md-table-border: #D9DFE3; - --md-table-drag-border-bg: var(--oc-cyan-5); + --md-table-drag-border-bg: var(--oc-cyan-5); --md-table-sort-active-bg: rgb(208, 226, 247); - /* ========== 手风琴组件变量覆盖 ========== */ + /* ========== Accordion 相关变量 ========== */ --accordion-bg: var(--oc-blue-0); --accordion-border: var(--oc-blue-2); - --accordion-summary-bg: var(--oc-blue-5); --accordion-summary-hover-bg: var(--oc-blue-4); - --accordion-body-bg: var(--oc-blue-0); --accordion-body-border: var(--oc-blue-1); --accordion-body-color: var(--oc-gray-8); } /** 预览区域样式 */ -.cherry-markdown.theme__default { - - p, - div {} - - h1 {} - - h2 {} - - h3 {} - - h4 {} - - h5 {} - - h1, - h2, - h3, - h4, - h5, - h6 { - /** 标题前面的锚点或序号 */ - .anchor {} - } - - /** checklist 模式，未勾选时 */ - .ch-icon-square {} - - /** checklist 模式，勾选时 */ - .ch-icon-check {} - - blockquote {} - - a { - &:hover {} - } - - strong {} - - em {} - - del {} - - sup {} - - sub {} - - hr {} - - img {} - - video {} - - audio {} - - /** 行内代码 */ - code:not([class]) {} - - /** - * 代码块 - */ - pre code {} - - /** - * 表格 - */ - table, - .cherry-table { - tr {} - - th {} - - td {} - } - - /** 可以理解为上下结构的音标，下部是文字，上部是对应的拼音 */ - ruby { - /** 上部的拼音 */ - rt {} - } - - /** 脚注 */ - .footnote { - .footnote-title {} - - .one-footnote { - a.footnote-ref {} - } - } - - /** 行间公式 */ - .Cherry-InlineMath {} - - /** 段落公式 */ - .Cherry-Math {} - - /** 目录 */ - .toc { - .toc-title {} - - .toc-li { - .level-1 {} - - .level-2 {} - - .level-3 {} - } - } - -} - -ol { - li {} -} +.cherry-markdown.theme__default {} diff --git a/packages/cherry-markdown/src/sass/themes/gray.scss b/packages/cherry-markdown/src/sass/themes/gray.scss index 5a09aefc8..e1e99627c 100644 --- a/packages/cherry-markdown/src/sass/themes/gray.scss +++ b/packages/cherry-markdown/src/sass/themes/gray.scss @@ -3,12 +3,29 @@ */ .cherry.theme__gray { - --primary-color: var(--oc-gray-8); - --secondary-color: var(--oc-gray-3); - --base-font-color: var(--oc-gray-7); - --base-editor-bg: var(--oc-white); - --base-previewer-bg: var(--oc-white); - --base-border-color: var(--oc-gray-4); + /* ========== 新语义变量覆盖 ========== */ + --color-brand-primary: var(--oc-gray-8); + --color-brand-primary-hover: var(--oc-gray-7); + --color-text-primary: var(--oc-gray-7); + --color-text-secondary: var(--oc-gray-6); + --color-bg-canvas: var(--oc-white); + --color-bg-surface: var(--oc-white); + --color-bg-hover: var(--oc-gray-3); + --color-bg-active: var(--oc-gray-3); + --color-border-default: var(--oc-gray-4); + + /* ========== 兼容旧语义别名 ========== */ + --primary-color: var(--color-brand-primary); + --secondary-color: var(--color-bg-active); + --base-font-color: var(--color-text-primary); + --base-editor-bg: var(--color-bg-canvas); + --base-previewer-bg: var(--color-bg-surface); + --base-border-color: var(--color-border-default); + + /* ========== 编辑器相关变量 ========== */ + --editor-url-bg-color: var(--oc-gray-2); + + /* ========== Markdown 相关变量 ========== */ --md-heading-color: var(--oc-gray-7); --md-paragraph-color: var(--oc-gray-7); --md-link-color: var(--oc-blue-4); @@ -17,13 +34,16 @@ --md-inline-code-bg: var(--oc-gray-2); --md-blockquote-bg: rgba(134, 142, 150, 0.05); --md-hr-border: var(--oc-gray-3); + + /* ========== Table 相关变量 ========== */ --md-table-border: var(--oc-gray-3); --md-table-sort-active-bg: var(--oc-gray-2); --md-table-drag-border-bg: var(--oc-blue-3); --md-table-operator-color: var(--oc-gray-6); + + /* ========== Accordion 相关变量 ========== */ --accordion-summary-hover-bg: var(--oc-gray-3); --accordion-summary-bg: var(--oc-gray-2); --accordion-summary-color: var(--oc-gray-7); - --editor-url-bg-color: var(--oc-gray-2); --accordion-shadow: none; } diff --git a/packages/cherry-markdown/src/sass/themes/green.scss b/packages/cherry-markdown/src/sass/themes/green.scss index 9140defa3..dd2b75554 100644 --- a/packages/cherry-markdown/src/sass/themes/green.scss +++ b/packages/cherry-markdown/src/sass/themes/green.scss @@ -3,22 +3,32 @@ */ .cherry.theme__green { - /* ========== 基础色彩变量覆盖 ========== */ - --primary-color: var(--oc-green-9); - --secondary-color: var(--oc-green-0); + /* ========== 新语义变量覆盖 ========== */ + --color-brand-primary: var(--oc-green-9); + --color-brand-primary-hover: var(--oc-green-7); + --color-text-primary: var(--oc-green-9); + --color-text-secondary: var(--oc-green-7); + --color-bg-canvas: var(--oc-white); + --color-bg-surface: var(--oc-green-0); + --color-bg-hover: var(--oc-green-9); + --color-bg-active: var(--oc-green-0); + --color-border-default: var(--oc-green-8); - --base-font-color: var(--primary-color); - --base-editor-bg: var(--oc-white); - --base-previewer-bg: var(--secondary-color); - --base-border-color: var(--oc-green-8); + /* ========== 兼容旧语义别名 ========== */ + --primary-color: var(--color-brand-primary); + --secondary-color: var(--color-bg-active); + --base-font-color: var(--color-text-primary); + --base-editor-bg: var(--color-bg-canvas); + --base-previewer-bg: var(--color-bg-surface); + --base-border-color: var(--color-border-default); /* ========== 工具栏相关变量 ========== */ --toolbar-bg: var(--oc-white); - --toolbar-btn-color: var(--primary-color); - --toolbar-btn-hover-bg: var(--primary-color); - --toolbar-btn-hover-color: var(--secondary-color); - --toolbar-btn-active-bg:var(--oc-green-7); - --toolbar-split-color: var(--oc-green-8); + --toolbar-btn-color: var(--color-brand-primary); + --toolbar-btn-hover-bg: var(--color-brand-primary); + --toolbar-btn-hover-color: var(--color-bg-active); + --toolbar-btn-active-bg: var(--oc-green-7); + --toolbar-split-color: var(--color-border-default); /* ========== 编辑器相关变量 ========== */ --editor-header-color: var(--oc-green-7); @@ -44,12 +54,26 @@ --md-inline-code-bg: var(--oc-green-1); --md-blockquote-bg: var(--oc-green-1); --md-hr-border: var(--oc-green-8); - /* ========== table 相关变量 ========== */ + + /* ========== Table 相关变量 ========== */ --md-table-border: var(--oc-green-8); --md-table-drag-border-bg: var(--primary-color); --md-table-sort-active-bg: rgba(137, 245, 171, 0.493); - + + /* ========== TOC 相关变量 ========== */ --md-paragraph-highlight-line-bg: var(--oc-green-1); + --md-toc-bg: var(--oc-white); + --md-toc-indicator-color: var(--oc-green-1); + --md-toc-link-hover-bg: var(--oc-green-0); + --md-toc-link-active-bg: var(--oc-green-1); + + /* ========== Accordion 相关变量 ========== */ + --accordion-bg: var(--oc-green-0); + --accordion-border: var(--oc-green-2); + --accordion-summary-hover-bg: var(--oc-green-5); + --accordion-body-bg: var(--oc-green-0); + --accordion-body-border: var(--oc-green-1); + --accordion-body-color: var(--primary-color); /* ========== Panel 相关变量 ========== */ --panel-border-radius: 12px; @@ -58,63 +82,48 @@ --panel-box-shadow: 0 3px 12px rgba(64, 192, 87, 0.15); --panel-title-bg: var(--oc-green-1); --panel-title-color: var(--oc-green-9); - --panel-title-border-radius: 10px 10px 0 0; --panel-title-border-bottom: 1px solid var(--oc-green-3); --panel-body-bg: var(--oc-white); --panel-body-color: var(--oc-green-9); - --panel-body-border-radius: 0 0 10px 10px; /* Primary Panel */ - --panel-primary-border-color: var(--oc-green-4); + --panel-primary-accent: var(--oc-green-4); + --panel-primary-surface: var(--oc-green-0); + --panel-primary-emphasis: var(--oc-green-3); + --panel-primary-title-fg: var(--oc-green-9); + --panel-primary-body-fg: var(--oc-green-8); --panel-primary-box-shadow: 0 3px 12px rgba(64, 192, 87, 0.25); - --panel-primary-title-bg: var(--oc-green-3); - --panel-primary-title-color: var(--oc-green-9); - --panel-primary-body-bg: var(--oc-green-0); - --panel-primary-body-color: var(--oc-green-8); /* Info Panel */ - --panel-info-border-color: var(--oc-cyan-4); + --panel-info-accent: var(--oc-cyan-4); + --panel-info-surface: var(--oc-cyan-0); + --panel-info-emphasis: var(--oc-cyan-2); + --panel-info-title-fg: var(--oc-cyan-9); + --panel-info-body-fg: var(--oc-cyan-8); --panel-info-box-shadow: 0 3px 12px rgba(9, 196, 244, 0.15); - --panel-info-title-bg: var(--oc-cyan-2); - --panel-info-title-color: var(--oc-cyan-9); - --panel-info-body-bg: var(--oc-cyan-0); - --panel-info-body-color: var(--oc-cyan-8); /* Warning Panel */ - --panel-warning-border-color: var(--oc-lime-4); + --panel-warning-accent: var(--oc-lime-4); + --panel-warning-surface: var(--oc-lime-0); + --panel-warning-emphasis: var(--oc-lime-2); + --panel-warning-title-fg: var(--oc-lime-9); + --panel-warning-body-fg: var(--oc-lime-8); --panel-warning-box-shadow: 0 3px 12px rgba(130, 201, 30, 0.15); - --panel-warning-title-bg: var(--oc-lime-2); - --panel-warning-title-color: var(--oc-lime-9); - --panel-warning-body-bg: var(--oc-lime-0); - --panel-warning-body-color: var(--oc-lime-8); /* Danger Panel */ - --panel-danger-border-color: var(--oc-red-4); + --panel-danger-accent: var(--oc-red-4); + --panel-danger-surface: var(--oc-red-0); + --panel-danger-emphasis: var(--oc-red-2); + --panel-danger-title-fg: var(--oc-red-9); + --panel-danger-body-fg: var(--oc-red-8); --panel-danger-box-shadow: 0 3px 12px rgba(250, 82, 82, 0.15); - --panel-danger-title-bg: var(--oc-red-2); - --panel-danger-title-color: var(--oc-red-9); - --panel-danger-body-bg: var(--oc-red-0); - --panel-danger-body-color: var(--oc-red-8); /* Success Panel */ - --panel-success-border-color: var(--oc-green-5); + --panel-success-accent: var(--oc-green-5); + --panel-success-surface: var(--oc-green-0); + --panel-success-emphasis: var(--oc-green-4); + --panel-success-body-fg: var(--oc-green-8); --panel-success-box-shadow: 0 3px 12px rgba(64, 192, 87, 0.3); - --panel-success-title-bg: var(--oc-green-4); - --panel-success-title-color: var(--oc-white); - --panel-success-body-bg: var(--oc-green-0); - --panel-success-body-color: var(--oc-green-8); - --md-toc-bg: var(--oc-white); - --md-toc-indicator-color: var(--oc-green-1); - --md-toc-link-hover-bg: var(--oc-green-0); - --md-toc-link-active-bg: var(--oc-green-1); - - /* ========== 手风琴组件变量覆盖 ========== */ - --accordion-bg: var(--oc-green-0); - --accordion-border: var(--oc-green-2); - --accordion-summary-hover-bg: var(--oc-green-5); - --accordion-body-bg: var(--oc-green-0); - --accordion-body-border: var(--oc-green-1); - --accordion-body-color: var(--primary-color); } /** 预览区域样式 */ diff --git a/packages/cherry-markdown/src/sass/themes/index.scss b/packages/cherry-markdown/src/sass/themes/index.scss new file mode 100644 index 000000000..bd6cb605f --- /dev/null +++ b/packages/cherry-markdown/src/sass/themes/index.scss @@ -0,0 +1,8 @@ +@forward './default'; +@forward './dark'; +@forward './abyss'; +@forward './green'; +@forward './red'; +@forward './gray'; +@forward './violet'; +@forward './blue'; diff --git a/packages/cherry-markdown/src/sass/themes/red.scss b/packages/cherry-markdown/src/sass/themes/red.scss index 234527b0a..a0fae37cf 100644 --- a/packages/cherry-markdown/src/sass/themes/red.scss +++ b/packages/cherry-markdown/src/sass/themes/red.scss @@ -3,21 +3,32 @@ */ .cherry.theme__red { - --primary-color: var(--oc-pink-7); - --secondary-color: var(--oc-pink-0); + /* ========== 新语义变量覆盖 ========== */ + --color-brand-primary: var(--oc-pink-7); + --color-brand-primary-hover: var(--oc-pink-6); + --color-text-primary: var(--oc-pink-9); + --color-text-secondary: var(--oc-pink-7); + --color-bg-canvas: var(--oc-pink-0); + --color-bg-surface: var(--oc-pink-0); + --color-bg-hover: var(--oc-pink-5); + --color-bg-active: var(--oc-pink-0); + --color-border-default: var(--oc-pink-8); - --base-font-color: var(--oc-pink-9); - --base-editor-bg: var(--oc-pink-0); - --base-previewer-bg: var(--oc-pink-0); - --base-border-color: var(--oc-pink-8); + /* ========== 兼容旧语义别名 ========== */ + --primary-color: var(--color-brand-primary); + --secondary-color: var(--color-bg-active); + --base-font-color: var(--color-text-primary); + --base-editor-bg: var(--color-bg-canvas); + --base-previewer-bg: var(--color-bg-surface); + --base-border-color: var(--color-border-default); /* ========== 工具栏相关变量 ========== */ --toolbar-bg: var(--oc-pink-1); --toolbar-btn-color: var(--oc-pink-8); - --toolbar-btn-hover-bg: var(--oc-pink-5); + --toolbar-btn-hover-bg: var(--color-bg-hover); --toolbar-btn-hover-color: var(--oc-pink-0); --toolbar-btn-active-bg: var(--oc-pink-7); - --toolbar-split-color: var(--oc-pink-8); + --toolbar-split-color: var(--color-border-default); --dropdown-bg: var(--oc-white); @@ -42,13 +53,28 @@ --md-inline-code-bg: var(--oc-pink-1); --md-blockquote-bg: var(--oc-pink-1); --md-hr-border: var(--oc-pink-8); - --md-table-border: var(--oc-pink-8); - /* ========== table 相关变量 ========== */ + + /* ========== Table 相关变量 ========== */ --md-table-border: var(--oc-pink-8); --md-table-drag-border-bg: var(--primary-color); --md-table-sort-active-bg: var(--oc-pink-2); + /* ========== TOC 相关变量 ========== */ --md-paragraph-highlight-line-bg: var(--oc-red-1); + --md-toc-bg: var(--oc-white); + --md-toc-border-color: var(--base-border-color); + --md-toc-indicator-color: var(--oc-pink-1); + --md-toc-link-hover-bg: var(--oc-pink-0); + --md-toc-link-active-bg: var(--oc-pink-1); + + /* ========== Accordion 相关变量 ========== */ + --accordion-bg: var(--oc-pink-0); + --accordion-border: var(--oc-pink-2); + --accordion-summary-bg: linear-gradient(135deg, var(--oc-pink-6), var(--oc-pink-7)); + --accordion-summary-hover-bg: linear-gradient(135deg, var(--oc-pink-5), var(--oc-pink-6)); + --accordion-body-bg: var(--oc-pink-0); + --accordion-body-border: var(--oc-pink-1); + --accordion-body-color: var(--oc-pink-9); /* ========== Panel 相关变量 ========== */ --panel-border-radius: 6px; @@ -57,69 +83,40 @@ --panel-box-shadow: 0 2px 8px rgba(230, 28, 132, 0.15); --panel-title-bg: linear-gradient(135deg, var(--oc-pink-2), var(--oc-pink-1)); --panel-title-color: var(--oc-pink-9); - --panel-title-border-radius: 6px 6px 0 0; --panel-title-border-bottom: 1px solid var(--oc-pink-3); --panel-body-bg: var(--oc-pink-0); --panel-body-color: var(--oc-pink-9); - --panel-body-border-radius: 0 0 6px 6px; /* Primary Panel */ - --panel-primary-bg: linear-gradient(135deg, var(--oc-pink-0), var(--oc-pink-2)); - --panel-primary-border-color: var(--oc-pink-5); - --panel-primary-title-bg: linear-gradient(135deg, var(--oc-pink-5), var(--oc-pink-4)); - --panel-primary-title-color: var(--oc-white); - --panel-primary-body-bg: var(--oc-pink-0); - --panel-primary-body-color: var(--oc-pink-8); + --panel-primary-accent: var(--oc-pink-5); + --panel-primary-surface: linear-gradient(135deg, var(--oc-pink-0), var(--oc-pink-2)); + --panel-primary-emphasis: linear-gradient(135deg, var(--oc-pink-5), var(--oc-pink-4)); + --panel-primary-body-fg: var(--oc-pink-8); /* Info Panel */ - --panel-info-bg: linear-gradient(135deg, var(--oc-grape-0), var(--oc-grape-1)); - --panel-info-border-color: var(--oc-grape-4); - --panel-info-title-bg: linear-gradient(135deg, var(--oc-grape-4), var(--oc-grape-3)); - --panel-info-title-color: var(--oc-white); - --panel-info-body-bg: var(--oc-grape-0); - --panel-info-body-color: var(--oc-grape-8); + --panel-info-accent: var(--oc-grape-4); + --panel-info-surface: linear-gradient(135deg, var(--oc-grape-0), var(--oc-grape-1)); + --panel-info-emphasis: linear-gradient(135deg, var(--oc-grape-4), var(--oc-grape-3)); + --panel-info-body-fg: var(--oc-grape-8); /* Warning Panel */ - --panel-warning-bg: linear-gradient(135deg, var(--oc-orange-0), var(--oc-orange-1)); - --panel-warning-border-color: var(--oc-orange-4); - --panel-warning-title-bg: linear-gradient(135deg, var(--oc-orange-5), var(--oc-orange-4)); - --panel-warning-title-color: var(--oc-white); - --panel-warning-body-bg: var(--oc-orange-0); - --panel-warning-body-color: var(--oc-orange-8); + --panel-warning-accent: var(--oc-orange-4); + --panel-warning-surface: linear-gradient(135deg, var(--oc-orange-0), var(--oc-orange-1)); + --panel-warning-emphasis: linear-gradient(135deg, var(--oc-orange-5), var(--oc-orange-4)); + --panel-warning-body-fg: var(--oc-orange-8); /* Danger Panel */ - --panel-danger-bg: linear-gradient(135deg, var(--oc-red-0), var(--oc-red-2)); - --panel-danger-border-color: var(--oc-red-5); + --panel-danger-accent: var(--oc-red-5); + --panel-danger-surface: linear-gradient(135deg, var(--oc-red-0), var(--oc-red-2)); + --panel-danger-emphasis: linear-gradient(135deg, var(--oc-red-6), var(--oc-red-5)); --panel-danger-box-shadow: 0 2px 8px rgba(245, 101, 101, 0.2); - --panel-danger-title-bg: linear-gradient(135deg, var(--oc-red-6), var(--oc-red-5)); - --panel-danger-title-color: var(--oc-white); - --panel-danger-body-bg: var(--oc-red-0); - --panel-danger-body-color: var(--oc-red-8); + --panel-danger-body-fg: var(--oc-red-8); /* Success Panel */ - --panel-success-bg: linear-gradient(135deg, var(--oc-teal-0), var(--oc-teal-1)); - --panel-success-border-color: var(--oc-teal-4); - --panel-success-title-bg: linear-gradient(135deg, var(--oc-teal-5), var(--oc-teal-4)); - --panel-success-title-color: var(--oc-white); - --panel-success-body-bg: var(--oc-teal-0); - --panel-success-body-color: var(--oc-teal-8); - --md-toc-bg: var(--oc-white); - --md-toc-border-color: var(--base-border-color); - --md-toc-indicator-color: var(--oc-pink-1); - --md-toc-link-hover-bg: var(--oc-pink-0); - --md-toc-link-active-bg: var(--oc-pink-1); - - /* ========== 手风琴组件变量覆盖 ========== */ - --accordion-bg: var(--oc-pink-0); - --accordion-border: var(--oc-pink-2); - --accordion-summary-bg: linear-gradient(135deg, var(--oc-pink-6), var(--oc-pink-7)); - --accordion-summary-hover-bg: linear-gradient(135deg, var(--oc-pink-5), var(--oc-pink-6)); - --accordion-accent-color: linear-gradient(to bottom, var(--oc-pink-4), var(--oc-pink-6)); - --accordion-body-bg: var(--oc-pink-0); - --accordion-body-border: var(--oc-pink-1); - --accordion-body-color: var(--oc-pink-9); - --accordion-multiple-border: var(--oc-pink-2); - --accordion-multiple-item-border: var(--oc-pink-1); + --panel-success-accent: var(--oc-teal-4); + --panel-success-surface: linear-gradient(135deg, var(--oc-teal-0), var(--oc-teal-1)); + --panel-success-emphasis: linear-gradient(135deg, var(--oc-teal-5), var(--oc-teal-4)); + --panel-success-body-fg: var(--oc-teal-8); } /** 预览区域样式 */ diff --git a/packages/cherry-markdown/src/sass/themes/violet.scss b/packages/cherry-markdown/src/sass/themes/violet.scss index 4a5f64c6a..0f3853683 100644 --- a/packages/cherry-markdown/src/sass/themes/violet.scss +++ b/packages/cherry-markdown/src/sass/themes/violet.scss @@ -3,22 +3,32 @@ */ .cherry.theme__violet { - /* ========== 基础色彩变量覆盖 ========== */ - --primary-color: var(--oc-violet-9); - --secondary-color: var(--oc-violet-0); + /* ========== 新语义变量覆盖 ========== */ + --color-brand-primary: var(--oc-violet-9); + --color-brand-primary-hover: var(--oc-violet-7); + --color-text-primary: var(--oc-violet-9); + --color-text-secondary: var(--oc-violet-7); + --color-bg-canvas: var(--oc-white); + --color-bg-surface: var(--oc-white); + --color-bg-hover: var(--oc-violet-5); + --color-bg-active: var(--oc-violet-0); + --color-border-default: var(--oc-violet-8); - --base-font-color: var(--primary-color); - --base-editor-bg: var(--oc-white); - --base-previewer-bg: var(--oc-white); - --base-border-color: var(--oc-violet-8); + /* ========== 兼容旧语义别名 ========== */ + --primary-color: var(--color-brand-primary); + --secondary-color: var(--color-bg-active); + --base-font-color: var(--color-text-primary); + --base-editor-bg: var(--color-bg-canvas); + --base-previewer-bg: var(--color-bg-surface); + --base-border-color: var(--color-border-default); /* ========== 工具栏相关变量 ========== */ --toolbar-bg: var(--oc-white); - --toolbar-btn-color: var(--primary-color); - --toolbar-btn-hover-bg: var(--oc-violet-5); + --toolbar-btn-color: var(--color-brand-primary); + --toolbar-btn-hover-bg: var(--color-bg-hover); --toolbar-btn-hover-color: var(--oc-violet-0); --toolbar-btn-active-bg: var(--oc-violet-7); - --toolbar-split-color: var(--oc-violet-8); + --toolbar-split-color: var(--color-border-default); /* ========== 编辑器相关变量 ========== */ --editor-header-color: var(--oc-violet-7); @@ -41,11 +51,27 @@ --md-inline-code-bg: var(--oc-violet-1); --md-blockquote-bg: var(--oc-violet-1); --md-hr-border: var(--oc-violet-8); - /* ========== table 相关变量 ========== */ + + /* ========== Table 相关变量 ========== */ --md-table-border: var(--oc-violet-8); --md-table-drag-border-bg: var(--primary-color); --md-table-sort-active-bg: var(--oc-violet-2); + /* ========== TOC 相关变量 ========== */ + --md-toc-bg: var(--oc-violet-0); + --md-toc-indicator-color: var(--oc-violet-1); + --md-toc-link-hover-bg: var(--oc-violet-1); + --md-toc-link-active-bg: var(--oc-violet-2); + + /* ========== Accordion 相关变量 ========== */ + --accordion-bg: var(--oc-violet-0); + --accordion-border: var(--oc-violet-2); + --accordion-summary-bg: var(--oc-violet-6); + --accordion-summary-hover-bg: var(--oc-violet-5); + --accordion-body-bg: var(--oc-violet-0); + --accordion-body-border: var(--oc-violet-1); + --accordion-body-color: var(--primary-color); + /* ========== Panel 相关变量 ========== */ --panel-border-radius: 4px; --panel-bg: var(--oc-white); @@ -53,64 +79,44 @@ --panel-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); --panel-title-bg: var(--oc-gray-1); --panel-title-color: var(--oc-gray-8); - --panel-title-border-radius: 2px 2px 0 0; --panel-title-border-bottom: 1px solid var(--oc-gray-3); --panel-body-bg: var(--oc-white); --panel-body-color: var(--oc-gray-8); - --panel-body-border-radius: 0 0 2px 2px; /* Primary Panel */ - --panel-primary-border-color: var(--oc-blue-5); - --panel-primary-title-bg: var(--oc-blue-1); - --panel-primary-title-color: var(--oc-blue-8); - --panel-primary-title-border-bottom: 1px solid var(--oc-blue-3); - --panel-primary-body-bg: var(--oc-blue-0); - --panel-primary-body-color: var(--oc-blue-9); + --panel-primary-accent: var(--oc-blue-5); + --panel-primary-surface: var(--oc-blue-0); + --panel-primary-emphasis: var(--oc-blue-1); + --panel-primary-title-fg: var(--oc-blue-8); + --panel-primary-body-fg: var(--oc-blue-9); /* Info Panel */ - --panel-info-border-color: var(--oc-cyan-5); - --panel-info-title-bg: var(--oc-cyan-1); - --panel-info-title-color: var(--oc-cyan-8); - --panel-info-title-border-bottom: 1px solid var(--oc-cyan-3); - --panel-info-body-bg: var(--oc-cyan-0); - --panel-info-body-color: var(--oc-cyan-9); + --panel-info-accent: var(--oc-cyan-5); + --panel-info-surface: var(--oc-cyan-0); + --panel-info-emphasis: var(--oc-cyan-1); + --panel-info-title-fg: var(--oc-cyan-8); + --panel-info-body-fg: var(--oc-cyan-9); /* Warning Panel */ - --panel-warning-border-color: var(--oc-yellow-5); - --panel-warning-title-bg: var(--oc-yellow-1); - --panel-warning-title-color: var(--oc-yellow-8); - --panel-warning-title-border-bottom: 1px solid var(--oc-yellow-3); - --panel-warning-body-bg: var(--oc-yellow-0); - --panel-warning-body-color: var(--oc-yellow-9); + --panel-warning-accent: var(--oc-yellow-5); + --panel-warning-surface: var(--oc-yellow-0); + --panel-warning-emphasis: var(--oc-yellow-1); + --panel-warning-title-fg: var(--oc-yellow-8); + --panel-warning-body-fg: var(--oc-yellow-9); /* Danger Panel */ - --panel-danger-border-color: var(--oc-red-5); - --panel-danger-title-bg: var(--oc-red-1); - --panel-danger-title-color: var(--oc-red-8); - --panel-danger-title-border-bottom: 1px solid var(--oc-red-3); - --panel-danger-body-bg: var(--oc-red-0); - --panel-danger-body-color: var(--oc-red-9); + --panel-danger-accent: var(--oc-red-5); + --panel-danger-surface: var(--oc-red-0); + --panel-danger-emphasis: var(--oc-red-1); + --panel-danger-title-fg: var(--oc-red-8); + --panel-danger-body-fg: var(--oc-red-9); /* Success Panel */ - --panel-success-border-color: var(--oc-green-5); - --panel-success-title-bg: var(--oc-green-1); - --panel-success-title-color: var(--oc-green-8); - --panel-success-title-border-bottom: 1px solid var(--oc-green-3); - --panel-success-body-bg: var(--oc-green-0); - --panel-success-body-color: var(--oc-green-9); - --md-toc-bg: var(--oc-violet-0); - --md-toc-indicator-color: var(--oc-violet-1); - --md-toc-link-hover-bg: var(--oc-violet-1); - --md-toc-link-active-bg: var(--oc-violet-2); - - /* ========== 手风琴组件变量覆盖 ========== */ - --accordion-bg: var(--oc-violet-0); - --accordion-border: var(--oc-violet-2); - --accordion-summary-bg: var(--oc-violet-6); - --accordion-summary-hover-bg: var(--oc-violet-5); - --accordion-body-bg: var(--oc-violet-0); - --accordion-body-border: var(--oc-violet-1); - --accordion-body-color: var(--primary-color); + --panel-success-accent: var(--oc-green-5); + --panel-success-surface: var(--oc-green-0); + --panel-success-emphasis: var(--oc-green-1); + --panel-success-title-fg: var(--oc-green-8); + --panel-success-body-fg: var(--oc-green-9); } /** 预览区域样式 */ diff --git a/packages/cherry-markdown/src/sass/variables/base.scss b/packages/cherry-markdown/src/sass/variables/base.scss index 85761ef17..d3dc76694 100644 --- a/packages/cherry-markdown/src/sass/variables/base.scss +++ b/packages/cherry-markdown/src/sass/variables/base.scss @@ -13,6 +13,7 @@ --spacing-3xl: 48px; // 圆角 + --radius-xs: 1px; --radius-none: 0; --radius-sm: 2px; --radius-md: 3px; diff --git a/packages/cherry-markdown/src/sass/variables/components/accordion.scss b/packages/cherry-markdown/src/sass/variables/components/accordion.scss new file mode 100644 index 000000000..7720ab7a7 --- /dev/null +++ b/packages/cherry-markdown/src/sass/variables/components/accordion.scss @@ -0,0 +1,14 @@ +.cherry { + --accordion-bg: var(--base-previewer-bg); + --accordion-border: var(--base-border-color); + --accordion-radius: var(--radius-lg); + --accordion-shadow: var(--shadow-md); + + --accordion-summary-bg: var(--primary-color); + --accordion-summary-color: var(--oc-white); + --accordion-summary-hover-bg: var(--color-primary-hover); + + --accordion-body-bg: var(--base-previewer-bg); + --accordion-body-color: var(--base-font-color); + --accordion-body-border: var(--base-border-color); +} diff --git a/packages/cherry-markdown/src/sass/variables/components/index.scss b/packages/cherry-markdown/src/sass/variables/components/index.scss new file mode 100644 index 000000000..408627389 --- /dev/null +++ b/packages/cherry-markdown/src/sass/variables/components/index.scss @@ -0,0 +1,4 @@ +@forward './table'; +@forward './accordion'; +@forward './panel'; +@forward './shortcut-panel'; diff --git a/packages/cherry-markdown/src/sass/variables/components/panel.scss b/packages/cherry-markdown/src/sass/variables/components/panel.scss new file mode 100644 index 000000000..2f239bb84 --- /dev/null +++ b/packages/cherry-markdown/src/sass/variables/components/panel.scss @@ -0,0 +1,59 @@ +.cherry { + --panel-margin: 10px 0; + --panel-border-radius: var(--radius-xl); + --panel-border: 1px solid var(--color-border-default); + --panel-bg: var(--color-bg-surface); + --panel-box-shadow: none; + --panel-backdrop-filter: none; + + --panel-title-padding: 5px 20px; + --panel-title-bg: var(--color-bg-hover); + --panel-title-color: var(--color-text-primary); + --panel-title-border-radius: var(--panel-border-radius) var(--panel-border-radius) 0 0; + --panel-title-border-bottom: 1px solid var(--color-border-default); + + --panel-body-padding: 5px 20px; + --panel-body-bg: var(--color-bg-surface); + --panel-body-color: var(--color-text-primary); + --panel-body-border-radius: 0 0 var(--panel-border-radius) var(--panel-border-radius); + + --panel-primary-accent: var(--color-brand-primary); + --panel-primary-surface: var(--color-bg-active); + --panel-primary-emphasis: var(--panel-primary-accent); + --panel-primary-title-fg: #fff; + --panel-primary-body-fg: var(--panel-primary-accent); + --panel-primary-box-shadow: none; + --panel-primary-icon: '\EA6A'; + + --panel-info-accent: var(--oc-cyan-5); + --panel-info-surface: var(--oc-cyan-0); + --panel-info-emphasis: var(--oc-cyan-6); + --panel-info-title-fg: #fff; + --panel-info-body-fg: var(--oc-cyan-8); + --panel-info-box-shadow: none; + --panel-info-icon: '\EA69'; + + --panel-warning-accent: var(--oc-yellow-5); + --panel-warning-surface: var(--oc-yellow-0); + --panel-warning-emphasis: var(--oc-yellow-6); + --panel-warning-title-fg: #fff; + --panel-warning-body-fg: var(--oc-yellow-8); + --panel-warning-box-shadow: none; + --panel-warning-icon: '\EA6B'; + + --panel-danger-accent: var(--oc-red-5); + --panel-danger-surface: var(--oc-red-0); + --panel-danger-emphasis: var(--oc-red-6); + --panel-danger-title-fg: #fff; + --panel-danger-body-fg: var(--oc-red-8); + --panel-danger-box-shadow: none; + --panel-danger-icon: '\EA68'; + + --panel-success-accent: var(--oc-green-5); + --panel-success-surface: var(--oc-green-0); + --panel-success-emphasis: var(--oc-green-6); + --panel-success-title-fg: #fff; + --panel-success-body-fg: var(--oc-green-8); + --panel-success-box-shadow: none; + --panel-success-icon: '\EA67'; +} diff --git a/packages/cherry-markdown/src/sass/variables/components/shortcut-panel.scss b/packages/cherry-markdown/src/sass/variables/components/shortcut-panel.scss new file mode 100644 index 000000000..5fe1b5208 --- /dev/null +++ b/packages/cherry-markdown/src/sass/variables/components/shortcut-panel.scss @@ -0,0 +1,10 @@ +.cherry { + --shortcut-key-config-panel-bg: var(--dropdown-bg); + --shortcut-key-config-panel-text-color: var(--dropdown-item-color); + + --shortcut-panel-padding-x: 15px; + --shortcut-panel-padding-y: 10px; + --shortcut-panel-font-size-xs: var(--font-size-xs); + --shortcut-panel-border-radius: 4px; + --shortcut-panel-transition: all 0.2s; +} diff --git a/packages/cherry-markdown/src/sass/variables/components/table.scss b/packages/cherry-markdown/src/sass/variables/components/table.scss new file mode 100644 index 000000000..6c50f490f --- /dev/null +++ b/packages/cherry-markdown/src/sass/variables/components/table.scss @@ -0,0 +1,6 @@ +.cherry { + --md-table-border: var(--base-border-color); + --md-table-operator-color: var(--primary-color); + --md-table-drag-border-bg: var(--primary-color); + --md-table-sort-active-bg: var(--secondary-color); +} diff --git a/packages/cherry-markdown/src/sass/variables/index.scss b/packages/cherry-markdown/src/sass/variables/index.scss index 6683a6b9f..ffb7d13b3 100644 --- a/packages/cherry-markdown/src/sass/variables/index.scss +++ b/packages/cherry-markdown/src/sass/variables/index.scss @@ -2,10 +2,13 @@ // 统一导入和导出所有 CSS 变量 // 导入一级变量（基础效果变量） -@import './base.scss'; +@forward './base'; // 导入二级变量（语义化界面变量） -@import './semantic.scss'; +@forward './semantic'; + +// 导入组件变量 +@forward './components/index'; // 导入 Open Color 颜色 -@import './open-color.scss'; +@forward './open-color'; diff --git a/packages/cherry-markdown/src/sass/variables/semantic.scss b/packages/cherry-markdown/src/sass/variables/semantic.scss index e40121bb5..7d431c774 100644 --- a/packages/cherry-markdown/src/sass/variables/semantic.scss +++ b/packages/cherry-markdown/src/sass/variables/semantic.scss @@ -2,7 +2,7 @@ // 基于现有组件和样式需求，映射到一级变量 .cherry { - /* ========== 基础色彩映射 ========== */ + /* ========== 历史语义默认值 ========== */ --base-font-color: #3f4a56; --base-sub-font-color: #6d6e6f; --base-border-color: #dfe6ee; @@ -18,15 +18,40 @@ --color-warning: var(--oc-yellow-6); --color-error: var(--oc-red-6); --color-info: var(--oc-blue-6); + --color-link-hover: var(--primary-color); + --color-primary-hover: var(--color-link-hover); + + /* ========== 新语义命名层 ========== */ + --color-text-primary: var(--base-font-color); + --color-text-secondary: var(--base-sub-font-color); + --color-text-link: var(--md-link-color); + --color-text-link-hover: var(--color-link-hover); + + --color-bg-canvas: var(--base-editor-bg); + --color-bg-surface: var(--base-previewer-bg); + --color-bg-subtle: var(--oc-gray-0); + --color-bg-hover: var(--oc-gray-1); + --color-bg-active: var(--secondary-color); + + --color-border-default: var(--base-border-color); + --color-border-strong: var(--oc-gray-4); + + --color-brand-primary: var(--primary-color); + --color-brand-primary-hover: var(--color-primary-hover); + + /* ========== 历史兼容变量 ========== */ + --border-color: var(--color-border-default); + --bg-color-lighter: var(--color-bg-hover); + --full-width-color: var(--color-brand-primary); /* ========== 工具栏相关 ========== */ --toolbar-bg: var(--oc-white); - --toolbar-border: var(--base-border-color); + --toolbar-border: var(--color-border-default); --toolbar-padding: var(--spacing-xs) var(--spacing-xl); --toolbar-font-size: var(--font-size-sm); - --toolbar-radius: none; + --toolbar-radius: var(--radius-none); --toolbar-shadow: var(--shadow-sm); - --toolbar-split-color: var(--base-border-color); + --toolbar-split-color: var(--color-border-default); --toolbar-min-height: 48px; // 单行工具栏的高度 // 侧边栏列表高度（由 JS 动态写入），默认 120px 作为无侧栏时的回退 @@ -35,8 +60,9 @@ // 工具栏按钮 --toolbar-btn-color: #3f4a56; --toolbar-btn-bg: transparent; - --toolbar-btn-hover-color: var(--primary-color); - --toolbar-btn-hover-bg: var(--secondary-color); + --toolbar-btn-hover-color: var(--color-brand-primary); + --toolbar-btn-hover-bg: var(--color-bg-active); + --toolbar-btn-active-bg: var(--color-bg-active); --toolbar-btn-disabled: #ccc; --toolbar-btn-radius: var(--radius-lg); --toolbar-btn-padding: 0 var(--spacing-md); @@ -44,7 +70,7 @@ /* ========== 工具栏的下拉菜单 ========== */ --dropdown-bg: var(--toolbar-bg); - --dropdown-border: var(--base-border-color); + --dropdown-border: var(--color-border-default); --dropdown-shadow: var(--shadow-md); --dropdown-radius: var(--radius-xl); --dropdown-padding: var(--spacing-xs) 0; @@ -53,15 +79,15 @@ --dropdown-item-height: var(--height-button); --dropdown-item-radius: var(--dropdown-radius); --dropdown-item-padding: var(--spacing-sm) var(--spacing-md); - --dropdown-item-hover-bg: var(--oc-gray-2); + --dropdown-item-hover-bg: var(--color-bg-hover); --dropdown-item-color: var(--toolbar-btn-color); - --dropdown-item-hover-color: var(--base-font-color); - --dropdown-item-active-bg: var(--secondary-color); - --dropdown-item-active-color: var(--primary-color); + --dropdown-item-hover-color: var(--color-text-primary); + --dropdown-item-active-bg: var(--color-bg-active); + --dropdown-item-active-color: var(--color-brand-primary); /* ========== 编辑气泡 ========== */ --bubble-bg: var(--toolbar-bg); - --bubble-border: var(--base-border-color); + --bubble-border: var(--color-border-default); --bubble-shadow: var(--shadow-md); --bubble-radius: var(--radius-xl); --bubble-padding: var(--toolbar-btn-padding); @@ -70,36 +96,36 @@ /* ========== 编辑器相关 ========== */ // ---base-editor-bg 编辑器背景颜色 - --editor-header-color: var(--base-font-color); + --editor-header-color: var(--color-text-primary); --editor-comment-color: var(--oc-blue-6); --editor-quote-color: var(--oc-blue-6); - --editor-string-color: var(--base-font-color); + --editor-string-color: var(--color-text-primary); --editor-link-color: var(--oc-blue-6); --editor-url-bg-color: #d7e6fe; - --editor-v2-color: var(--primary-color); - --editor-v3-color: var(--secondary-color); - --editor-keyword-color: var(--base-font-color); - --editor-cursor-color: var(--primary-color); + --editor-v2-color: var(--color-brand-primary); + --editor-v3-color: var(--color-bg-active); + --editor-keyword-color: var(--color-text-primary); + --editor-cursor-color: var(--color-brand-primary); --editor-selection-bg: var(--oc-blue-1); --editor-line-number-color: var(--oc-gray-4); --editor-active-line-bg: var(--oc-gray-0); /* ========== 预览器相关 ========== */ // --base-previewer-bg 预览器背景颜色 - --previewer-mobile-bg: var(--base-previewer-bg); + --previewer-mobile-bg: var(--color-bg-surface); /* ========== Markdown 元素样式 ========== */ // 标题 - --md-heading-color: var(--base-font-color); + --md-heading-color: var(--color-text-primary); // 段落 - --md-paragraph-color: var(--base-font-color); + --md-paragraph-color: var(--color-text-primary); --md-paragraph-line-height: var(--line-height-relaxed); - --md-paragraph-highlight-line-bg: var(--secondary-color); // 当前编辑行高光背景色 + --md-paragraph-highlight-line-bg: var(--color-bg-active); // 当前编辑行高光背景色 // 链接 --md-link-color: var(--oc-blue-6); - --md-link-hover-color: var(--color-link-hover); + --md-link-hover-color: var(--color-text-link-hover); // 行内代码 --md-inline-code-color: var(--color-error); @@ -108,18 +134,14 @@ // 引用 --md-blockquote-bg: rgba(102, 128, 153, 0.05); --md-blockquote-border: #D6DBDF; - --md-blockquote-color: var(--base-sub-font-color); - - // 表格 - --md-table-border: var(--base-border-color); - --md-table-operator-color: var(--primary-color); // 表格操作按钮颜色 + --md-blockquote-color: var(--color-text-secondary); // 分割线 - --md-hr-border: var(--base-border-color); + --md-hr-border: var(--color-border-default); // 目录 (TOC) --md-toc-bg: var(--oc-gray-0); - --md-toc-border-color: var(--base-border-color); + --md-toc-border-color: var(--color-border-default); --md-toc-radius: var(--radius-lg); --md-toc-padding: var(--spacing-lg); --md-toc-title-color: var(--md-heading-color); @@ -133,23 +155,6 @@ --md-toc-indicator-hover-color: var(--md-toc-link-hover-color); --md-toc-indicator-gap: var(--spacing-lg); - /* ========== 手风琴组件样式 ========== */ - // 基础样式 - --accordion-bg: var(--base-previewer-bg); - --accordion-border: var(--base-border-color); - --accordion-radius: var(--radius-lg); - --accordion-shadow: var(--shadow-md); - - // 标题样式 - --accordion-summary-bg: var(--primary-color); - --accordion-summary-color: var(--oc-white); - --accordion-summary-hover-bg: var(--color-primary-hover); - - // 内容区域 - --accordion-body-bg: var(--base-previewer-bg); - --accordion-body-color: var(--base-font-color); - --accordion-body-border: var(--base-border-color); - /* ========== Mermaid 源码工具栏 ========== */ --mermaid-toolbar-switch-bg: rgba(128, 128, 128, 0.12); --mermaid-toolbar-slider-bg: rgba(255, 255, 255, 0.85); @@ -158,5 +163,5 @@ --mermaid-container-border: rgba(128, 128, 128, 0.2); /* ========== 其余单个组件 ========== */ - --drag-border-color: #ebedee; + --drag-border-color: var(--color-border-default); } From 8d57355d15d6093e5fc44d29b59d134f9786f735 Mon Sep 17 00:00:00 2001 From: Seeridia Date: Sun, 5 Apr 2026 14:17:52 +0800 Subject: [PATCH 2/4] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=E4=B8=8D?= =?UTF-8?q?=E5=BF=85=E8=A6=81=E7=9A=84=E6=A0=B7=E5=BC=8F=E5=BC=95=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/cherry-markdown/src/sass/markdown_pure.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/cherry-markdown/src/sass/markdown_pure.scss b/packages/cherry-markdown/src/sass/markdown_pure.scss index 802d0da59..20da36dcf 100644 --- a/packages/cherry-markdown/src/sass/markdown_pure.scss +++ b/packages/cherry-markdown/src/sass/markdown_pure.scss @@ -1,6 +1,5 @@ @use 'sass:meta'; -@include meta.load-css('./variables/index'); @include meta.load-css('./markdown'); /** 引入自带的主题 */ @include meta.load-css('./themes/index'); From 7a6610bafb8732d13f611c23a70e2f11e77a8e3b Mon Sep 17 00:00:00 2001 From: Seeridia Date: Sun, 5 Apr 2026 14:48:17 +0800 Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20=E6=8B=86=E5=88=86Components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/cherry-markdown/src/sass/cherry.scss | 6 +- .../src/sass/themes/abyss.scss | 46 +++--- .../cherry-markdown/src/sass/themes/blue.scss | 20 +-- .../cherry-markdown/src/sass/themes/dark.scss | 14 +- .../src/sass/themes/default.scss | 16 +- .../cherry-markdown/src/sass/themes/gray.scss | 8 - .../src/sass/themes/green.scss | 20 +-- .../cherry-markdown/src/sass/themes/red.scss | 20 +-- .../src/sass/themes/violet.scss | 18 +- .../sass/variables/components/accordion.scss | 17 +- .../src/sass/variables/components/bubble.scss | 11 ++ .../sass/variables/components/dropdown.scss | 20 +++ .../src/sass/variables/components/editor.scss | 20 +++ .../src/sass/variables/components/index.scss | 7 + .../sass/variables/components/markdown.scss | 40 +++++ .../sass/variables/components/mermaid.scss | 10 ++ .../src/sass/variables/components/panel.scss | 4 + .../sass/variables/components/previewer.scss | 8 + .../variables/components/shortcut-panel.scss | 4 + .../src/sass/variables/components/table.scss | 11 +- .../sass/variables/components/toolbar.scss | 26 +++ .../src/sass/variables/semantic.scss | 155 ++---------------- .../cherry-markdown/src/utils/exportWord.js | 14 +- 23 files changed, 243 insertions(+), 272 deletions(-) create mode 100644 packages/cherry-markdown/src/sass/variables/components/bubble.scss create mode 100644 packages/cherry-markdown/src/sass/variables/components/dropdown.scss create mode 100644 packages/cherry-markdown/src/sass/variables/components/editor.scss create mode 100644 packages/cherry-markdown/src/sass/variables/components/markdown.scss create mode 100644 packages/cherry-markdown/src/sass/variables/components/mermaid.scss create mode 100644 packages/cherry-markdown/src/sass/variables/components/previewer.scss create mode 100644 packages/cherry-markdown/src/sass/variables/components/toolbar.scss diff --git a/packages/cherry-markdown/src/sass/cherry.scss b/packages/cherry-markdown/src/sass/cherry.scss index 6933d57c9..ad278d195 100644 --- a/packages/cherry-markdown/src/sass/cherry.scss +++ b/packages/cherry-markdown/src/sass/cherry.scss @@ -882,7 +882,7 @@ } .cm-editor .cm-fullWidth { - color: var(--full-width-color) !important; + color: var(--color-brand-primary) !important; z-index: 3; cursor: pointer; } @@ -1306,7 +1306,7 @@ .cherry-color-tab-group { display: flex; - background: var(--border-color); + background: var(--color-border-default); border-radius: var(--radius-lg); padding: 2px; width: auto; @@ -1446,7 +1446,7 @@ gap: 6px; .cherry-color-recent-empty { - background: var(--bg-color-lighter); + background: var(--color-bg-hover); border-style: dashed; cursor: default; diff --git a/packages/cherry-markdown/src/sass/themes/abyss.scss b/packages/cherry-markdown/src/sass/themes/abyss.scss index 4a85ea5a7..6788405df 100644 --- a/packages/cherry-markdown/src/sass/themes/abyss.scss +++ b/packages/cherry-markdown/src/sass/themes/abyss.scss @@ -14,14 +14,6 @@ --color-bg-active: #2C2E37; --color-border-default: var(--color-brand-primary); - /* ========== 兼容旧语义别名 ========== */ - --primary-color: var(--color-brand-primary); - --secondary-color: var(--color-bg-active); - --base-font-color: var(--color-text-primary); - --base-editor-bg: var(--color-bg-canvas); - --base-previewer-bg: var(--color-bg-surface); - --base-border-color: var(--color-border-default); - /* ========== 工具栏相关变量 ========== */ --toolbar-bg: #181C24; --toolbar-btn-color: var(--color-text-primary); @@ -33,7 +25,7 @@ /* ========== 工具栏的下拉菜单 ========== */ --dropdown-bg: var(--toolbar-bg); - --dropdown-border: var(--base-border-color); + --dropdown-border: var(--color-border-default); --dropdown-radius: var(--radius-xl); --dropdown-padding: var(--spacing-xs) 0; @@ -42,26 +34,26 @@ --dropdown-item-color: var(--toolbar-btn-color); /* ========== 编辑器相关变量 ========== */ - --editor-header-color: var(--primary-color); + --editor-header-color: var(--color-brand-primary); --editor-string-color: var(--oc-blue-4); --editor-comment-color: #A8A8A9; --editor-quote-color: var(--oc-gray-8); --editor-link-color: var(--oc-blue-4); --editor-url-bg-color: none; --editor-v2-color: var(--oc-gray-8); - --editor-v3-color: var(--primary-color); + --editor-v3-color: var(--color-brand-primary); --editor-keyword-color: var(--oc-blue-4); --editor-selection-bg: #636e87; /* ========== Markdown 相关变量 ========== */ - --md-heading-color: var(--primary-color); - --md-paragraph-color: var(--base-font-color); + --md-heading-color: var(--color-brand-primary); + --md-paragraph-color: var(--color-text-primary); --md-link-color: var(--oc-blue-4); - --md-link-hover-color: var(--primary-color); - --md-inline-code-color: var(--primary-color); + --md-link-hover-color: var(--color-brand-primary); + --md-inline-code-color: var(--color-brand-primary); --md-inline-code-bg: #00203d; --md-blockquote-bg: #2A2F3B; - --md-hr-border: var(--primary-color); + --md-hr-border: var(--color-brand-primary); /* ========== Table 相关变量 ========== */ --md-table-border: #47556D; --md-table-drag-border-bg: var(--oc-blue-3); @@ -69,22 +61,22 @@ /* ========== TOC 相关变量 ========== */ --md-toc-bg: #2A2F3B; - --md-toc-title-color: var(--primary-color); - --md-toc-link-color: var(--primary-color); - --md-toc-indicator-color: var(--secondary-color); - --md-toc-link-hover-color: var(--secondary-color); - --md-toc-link-hover-bg: var(--primary-color); - --md-toc-indicator-hover-color: var(--primary-color); + --md-toc-title-color: var(--color-brand-primary); + --md-toc-link-color: var(--color-brand-primary); + --md-toc-indicator-color: var(--color-bg-active); + --md-toc-link-hover-color: var(--color-bg-active); + --md-toc-link-hover-bg: var(--color-brand-primary); + --md-toc-indicator-hover-color: var(--color-brand-primary); /* ========== Accordion 相关变量 ========== */ --accordion-bg: #2A2F3B; --accordion-border: var(--oc-blue-5); --accordion-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); - --accordion-summary-bg: var(--secondary-color); + --accordion-summary-bg: var(--color-bg-active); --accordion-summary-hover-bg: var(--toolbar-btn-hover-bg); --accordion-body-bg: #2A2F3B; --accordion-body-border: var(--oc-blue-5); - --accordion-body-color: var(--base-font-color); + --accordion-body-color: var(--color-text-primary); /* ========== Mermaid 相关变量 ========== */ --mermaid-toolbar-slider-bg: rgba(255, 255, 255, 0.15); @@ -152,16 +144,16 @@ path, rect, line { - stroke: var(--primary-color) !important; + stroke: var(--color-brand-primary) !important; } text { - fill: var(--primary-color) !important; + fill: var(--color-brand-primary) !important; stroke: none !important; } tspan { - fill: var(--primary-color) !important; + fill: var(--color-brand-primary) !important; } circle { diff --git a/packages/cherry-markdown/src/sass/themes/blue.scss b/packages/cherry-markdown/src/sass/themes/blue.scss index ba47056a1..eae7b002c 100644 --- a/packages/cherry-markdown/src/sass/themes/blue.scss +++ b/packages/cherry-markdown/src/sass/themes/blue.scss @@ -14,14 +14,6 @@ --color-bg-active: var(--oc-violet-0); --color-border-default: var(--oc-indigo-4); - /* ========== 兼容旧语义别名 ========== */ - --primary-color: var(--color-brand-primary); - --secondary-color: var(--color-bg-active); - --base-font-color: var(--color-text-primary); - --base-editor-bg: var(--color-bg-canvas); - --base-previewer-bg: var(--color-bg-surface); - --base-border-color: var(--color-border-default); - /* ========== 工具栏相关变量 ========== */ --toolbar-bg: var(--oc-violet-1); --toolbar-btn-color: var(--oc-indigo-7); @@ -34,22 +26,22 @@ --dropdown-bg: var(--oc-white); /* ========== 编辑器相关变量 ========== */ - --editor-header-color: var(--primary-color); + --editor-header-color: var(--color-brand-primary); --editor-string-color: var(--oc-indigo-5); --editor-comment-color: var(--oc-indigo-5); --editor-quote-color: var(--oc-indigo-8); --editor-link-color: var(--oc-indigo-5); --editor-url-bg-color: var(--oc-violet-1); --editor-v2-color: var(--oc-indigo-8); - --editor-v3-color: var(--primary-color); + --editor-v3-color: var(--color-brand-primary); --editor-keyword-color: var(--oc-indigo-5); --editor-selection-bg: var(--oc-violet-2); /* ========== Markdown 相关变量 ========== */ - --md-heading-color: var(--primary-color); + --md-heading-color: var(--color-brand-primary); --md-paragraph-color: var(--oc-indigo-8); --md-link-color: var(--oc-indigo-5); - --md-link-hover-color: var(--primary-color); + --md-link-hover-color: var(--color-brand-primary); --md-inline-code-color: var(--oc-indigo-5); --md-inline-code-bg: var(--oc-violet-1); --md-blockquote-bg: var(--oc-violet-1); @@ -57,13 +49,13 @@ /* ========== Table 相关变量 ========== */ --md-table-border: var(--oc-blue-5); - --md-table-drag-border-bg: var(--primary-color); + --md-table-drag-border-bg: var(--color-brand-primary); --md-table-sort-active-bg: rgba(184, 134, 253, 0.4); /* ========== TOC 相关变量 ========== */ --md-paragraph-highlight-line-bg: var(--oc-violet-1); --md-toc-bg: var(--oc-white); - --md-toc-border-color: var(--base-border-color); + --md-toc-border-color: var(--color-border-default); --md-toc-indicator-color: var(--oc-indigo-1); --md-toc-link-hover-bg: var(--oc-violet-0); --md-toc-link-active-bg: var(--oc-violet-1); diff --git a/packages/cherry-markdown/src/sass/themes/dark.scss b/packages/cherry-markdown/src/sass/themes/dark.scss index 75f09a53f..6c780ae18 100644 --- a/packages/cherry-markdown/src/sass/themes/dark.scss +++ b/packages/cherry-markdown/src/sass/themes/dark.scss @@ -14,14 +14,6 @@ --color-bg-active: #513838; --color-border-default: var(--oc-gray-5); - /* ========== 兼容旧语义别名 ========== */ - --primary-color: var(--color-brand-primary); - --secondary-color: var(--color-bg-active); - --base-font-color: var(--color-text-primary); - --base-editor-bg: var(--color-bg-canvas); - --base-previewer-bg: var(--color-bg-surface); - --base-border-color: var(--color-border-default); - /* ========== 工具栏相关变量 ========== */ --toolbar-bg: var(--oc-gray-7); --toolbar-btn-color: var(--oc-gray-4); @@ -33,14 +25,14 @@ /* ========== 工具栏的下拉菜单 ========== */ --dropdown-bg: var(--toolbar-bg); /* ========== 编辑器相关变量 ========== */ - --editor-header-color: var(--primary-color); + --editor-header-color: var(--color-brand-primary); --editor-string-color: var(--oc-yellow-3); --editor-comment-color: var(--oc-yellow-3); --editor-quote-color: var(--oc-gray-4); --editor-link-color: var(--oc-yellow-3); --editor-url-bg-color: rgb(81, 56, 56); --editor-v2-color: var(--oc-gray-4); - --editor-v3-color: var(--primary-color); + --editor-v3-color: var(--color-brand-primary); --editor-keyword-color: var(--oc-yellow-3); --editor-selection-bg: rgba(134, 142, 150, 0.8); @@ -60,7 +52,7 @@ --md-hr-border: var(--oc-gray-5); /* ========== Table 相关变量 ========== */ --md-table-border: var(--oc-gray-5); - --md-table-drag-border-bg: var(--primary-color); + --md-table-drag-border-bg: var(--color-brand-primary); --md-table-sort-active-bg: rgba(141, 104, 51, 0.493); /* ========== TOC 相关变量 ========== */ diff --git a/packages/cherry-markdown/src/sass/themes/default.scss b/packages/cherry-markdown/src/sass/themes/default.scss index bc9d5f9af..54ffb6fe0 100644 --- a/packages/cherry-markdown/src/sass/themes/default.scss +++ b/packages/cherry-markdown/src/sass/themes/default.scss @@ -14,14 +14,6 @@ --color-bg-active: var(--oc-blue-0); --color-border-default: var(--oc-blue-5); - /* ========== 兼容旧语义别名 ========== */ - --primary-color: var(--color-brand-primary); - --secondary-color: var(--color-bg-active); - --base-font-color: var(--color-text-primary); - --base-editor-bg: var(--color-bg-canvas); - --base-previewer-bg: var(--color-bg-surface); - --base-border-color: var(--color-border-default); - /* ========== 工具栏相关变量 ========== */ --toolbar-bg: var(--oc-white); --toolbar-btn-color: var(--oc-gray-8); @@ -31,22 +23,22 @@ --toolbar-split-color: var(--oc-blue-5); /* ========== 编辑器相关变量 ========== */ - --editor-header-color: var(--primary-color); + --editor-header-color: var(--color-brand-primary); --editor-string-color: var(--oc-blue-4); --editor-comment-color: var(--oc-blue-4); --editor-quote-color: var(--oc-gray-8); --editor-link-color: var(--oc-blue-4); --editor-url-bg-color: var(--oc-blue-0); --editor-v2-color: var(--oc-gray-8); - --editor-v3-color: var(--primary-color); + --editor-v3-color: var(--color-brand-primary); --editor-keyword-color: var(--oc-blue-4); --editor-selection-bg: var(--oc-blue-2); /* ========== Markdown 相关变量 ========== */ - --md-heading-color: var(--primary-color); + --md-heading-color: var(--color-brand-primary); --md-paragraph-color: var(--oc-gray-8); --md-link-color: var(--oc-blue-4); - --md-link-hover-color: var(--primary-color); + --md-link-hover-color: var(--color-brand-primary); --md-inline-code-color: var(--oc-blue-4); --md-inline-code-bg: var(--oc-blue-0); --md-blockquote-bg: var(--oc-blue-0); diff --git a/packages/cherry-markdown/src/sass/themes/gray.scss b/packages/cherry-markdown/src/sass/themes/gray.scss index e1e99627c..f62bccb9d 100644 --- a/packages/cherry-markdown/src/sass/themes/gray.scss +++ b/packages/cherry-markdown/src/sass/themes/gray.scss @@ -14,14 +14,6 @@ --color-bg-active: var(--oc-gray-3); --color-border-default: var(--oc-gray-4); - /* ========== 兼容旧语义别名 ========== */ - --primary-color: var(--color-brand-primary); - --secondary-color: var(--color-bg-active); - --base-font-color: var(--color-text-primary); - --base-editor-bg: var(--color-bg-canvas); - --base-previewer-bg: var(--color-bg-surface); - --base-border-color: var(--color-border-default); - /* ========== 编辑器相关变量 ========== */ --editor-url-bg-color: var(--oc-gray-2); diff --git a/packages/cherry-markdown/src/sass/themes/green.scss b/packages/cherry-markdown/src/sass/themes/green.scss index dd2b75554..478a40f7b 100644 --- a/packages/cherry-markdown/src/sass/themes/green.scss +++ b/packages/cherry-markdown/src/sass/themes/green.scss @@ -14,14 +14,6 @@ --color-bg-active: var(--oc-green-0); --color-border-default: var(--oc-green-8); - /* ========== 兼容旧语义别名 ========== */ - --primary-color: var(--color-brand-primary); - --secondary-color: var(--color-bg-active); - --base-font-color: var(--color-text-primary); - --base-editor-bg: var(--color-bg-canvas); - --base-previewer-bg: var(--color-bg-surface); - --base-border-color: var(--color-border-default); - /* ========== 工具栏相关变量 ========== */ --toolbar-bg: var(--oc-white); --toolbar-btn-color: var(--color-brand-primary); @@ -34,10 +26,10 @@ --editor-header-color: var(--oc-green-7); --editor-string-color: var(--oc-green-6); --editor-comment-color: var(--oc-green-6); - --editor-quote-color: var(--primary-color); + --editor-quote-color: var(--color-brand-primary); --editor-link-color: var(--oc-green-6); - --editor-url-bg-color: var(--secondary-color); - --editor-v2-color: var(--primary-color); + --editor-url-bg-color: var(--color-bg-active); + --editor-v2-color: var(--color-brand-primary); --editor-v3-color: var(--oc-green-7); --editor-keyword-color: var(--oc-green-6); --editor-selection-bg: var(--oc-green-2); @@ -47,7 +39,7 @@ /* ========== Markdown 相关变量 ========== */ --md-heading-color: var(--oc-green-7); - --md-paragraph-color: var(--primary-color); + --md-paragraph-color: var(--color-brand-primary); --md-link-color: var(--oc-green-6); --md-link-hover-color: var(--oc-green-7); --md-inline-code-color: var(--oc-green-6); @@ -57,7 +49,7 @@ /* ========== Table 相关变量 ========== */ --md-table-border: var(--oc-green-8); - --md-table-drag-border-bg: var(--primary-color); + --md-table-drag-border-bg: var(--color-brand-primary); --md-table-sort-active-bg: rgba(137, 245, 171, 0.493); /* ========== TOC 相关变量 ========== */ @@ -73,7 +65,7 @@ --accordion-summary-hover-bg: var(--oc-green-5); --accordion-body-bg: var(--oc-green-0); --accordion-body-border: var(--oc-green-1); - --accordion-body-color: var(--primary-color); + --accordion-body-color: var(--color-brand-primary); /* ========== Panel 相关变量 ========== */ --panel-border-radius: 12px; diff --git a/packages/cherry-markdown/src/sass/themes/red.scss b/packages/cherry-markdown/src/sass/themes/red.scss index a0fae37cf..7f6f836e8 100644 --- a/packages/cherry-markdown/src/sass/themes/red.scss +++ b/packages/cherry-markdown/src/sass/themes/red.scss @@ -14,14 +14,6 @@ --color-bg-active: var(--oc-pink-0); --color-border-default: var(--oc-pink-8); - /* ========== 兼容旧语义别名 ========== */ - --primary-color: var(--color-brand-primary); - --secondary-color: var(--color-bg-active); - --base-font-color: var(--color-text-primary); - --base-editor-bg: var(--color-bg-canvas); - --base-previewer-bg: var(--color-bg-surface); - --base-border-color: var(--color-border-default); - /* ========== 工具栏相关变量 ========== */ --toolbar-bg: var(--oc-pink-1); --toolbar-btn-color: var(--oc-pink-8); @@ -33,22 +25,22 @@ --dropdown-bg: var(--oc-white); /* ========== 编辑器相关变量 ========== */ - --editor-header-color: var(--primary-color); + --editor-header-color: var(--color-brand-primary); --editor-string-color: var(--oc-pink-5); --editor-comment-color: var(--oc-pink-5); --editor-quote-color: var(--oc-pink-9); --editor-link-color: var(--oc-pink-5); --editor-url-bg-color: var(--oc-pink-1); --editor-v2-color: var(--oc-pink-9); - --editor-v3-color: var(--primary-color); + --editor-v3-color: var(--color-brand-primary); --editor-keyword-color: var(--oc-pink-5); --editor-selection-bg: var(--oc-pink-2); /* ========== Markdown 相关变量 ========== */ - --md-heading-color: var(--primary-color); + --md-heading-color: var(--color-brand-primary); --md-paragraph-color: var(--oc-pink-9); --md-link-color: var(--oc-pink-5); - --md-link-hover-color: var(--primary-color); + --md-link-hover-color: var(--color-brand-primary); --md-inline-code-color: var(--oc-pink-5); --md-inline-code-bg: var(--oc-pink-1); --md-blockquote-bg: var(--oc-pink-1); @@ -56,13 +48,13 @@ /* ========== Table 相关变量 ========== */ --md-table-border: var(--oc-pink-8); - --md-table-drag-border-bg: var(--primary-color); + --md-table-drag-border-bg: var(--color-brand-primary); --md-table-sort-active-bg: var(--oc-pink-2); /* ========== TOC 相关变量 ========== */ --md-paragraph-highlight-line-bg: var(--oc-red-1); --md-toc-bg: var(--oc-white); - --md-toc-border-color: var(--base-border-color); + --md-toc-border-color: var(--color-border-default); --md-toc-indicator-color: var(--oc-pink-1); --md-toc-link-hover-bg: var(--oc-pink-0); --md-toc-link-active-bg: var(--oc-pink-1); diff --git a/packages/cherry-markdown/src/sass/themes/violet.scss b/packages/cherry-markdown/src/sass/themes/violet.scss index 0f3853683..b2e9a335d 100644 --- a/packages/cherry-markdown/src/sass/themes/violet.scss +++ b/packages/cherry-markdown/src/sass/themes/violet.scss @@ -14,14 +14,6 @@ --color-bg-active: var(--oc-violet-0); --color-border-default: var(--oc-violet-8); - /* ========== 兼容旧语义别名 ========== */ - --primary-color: var(--color-brand-primary); - --secondary-color: var(--color-bg-active); - --base-font-color: var(--color-text-primary); - --base-editor-bg: var(--color-bg-canvas); - --base-previewer-bg: var(--color-bg-surface); - --base-border-color: var(--color-border-default); - /* ========== 工具栏相关变量 ========== */ --toolbar-bg: var(--oc-white); --toolbar-btn-color: var(--color-brand-primary); @@ -34,17 +26,17 @@ --editor-header-color: var(--oc-violet-7); --editor-string-color: var(--oc-violet-6); --editor-comment-color: var(--oc-violet-6); - --editor-quote-color: var(--primary-color); + --editor-quote-color: var(--color-brand-primary); --editor-link-color: var(--oc-violet-6); --editor-url-bg-color: var(--oc-violet-0); - --editor-v2-color: var(--primary-color); + --editor-v2-color: var(--color-brand-primary); --editor-v3-color: var(--oc-violet-7); --editor-keyword-color: var(--oc-violet-6); --editor-selection-bg: var(--oc-violet-2); /* ========== Markdown 相关变量 ========== */ --md-heading-color: var(--oc-violet-7); - --md-paragraph-color: var(--primary-color); + --md-paragraph-color: var(--color-brand-primary); --md-link-color: var(--oc-violet-6); --md-link-hover-color: var(--oc-violet-7); --md-inline-code-color: var(--oc-violet-6); @@ -54,7 +46,7 @@ /* ========== Table 相关变量 ========== */ --md-table-border: var(--oc-violet-8); - --md-table-drag-border-bg: var(--primary-color); + --md-table-drag-border-bg: var(--color-brand-primary); --md-table-sort-active-bg: var(--oc-violet-2); /* ========== TOC 相关变量 ========== */ @@ -70,7 +62,7 @@ --accordion-summary-hover-bg: var(--oc-violet-5); --accordion-body-bg: var(--oc-violet-0); --accordion-body-border: var(--oc-violet-1); - --accordion-body-color: var(--primary-color); + --accordion-body-color: var(--color-brand-primary); /* ========== Panel 相关变量 ========== */ --panel-border-radius: 4px; diff --git a/packages/cherry-markdown/src/sass/variables/components/accordion.scss b/packages/cherry-markdown/src/sass/variables/components/accordion.scss index 7720ab7a7..052fdfeed 100644 --- a/packages/cherry-markdown/src/sass/variables/components/accordion.scss +++ b/packages/cherry-markdown/src/sass/variables/components/accordion.scss @@ -1,14 +1,19 @@ +/* ========== 手风琴 ========== */ + .cherry { - --accordion-bg: var(--base-previewer-bg); - --accordion-border: var(--base-border-color); + /* 外层容器 */ + --accordion-bg: var(--color-bg-surface); + --accordion-border: var(--color-border-default); --accordion-radius: var(--radius-lg); --accordion-shadow: var(--shadow-md); - --accordion-summary-bg: var(--primary-color); + /* summary 是可点击标题区 */ + --accordion-summary-bg: var(--color-brand-primary); --accordion-summary-color: var(--oc-white); --accordion-summary-hover-bg: var(--color-primary-hover); - --accordion-body-bg: var(--base-previewer-bg); - --accordion-body-color: var(--base-font-color); - --accordion-body-border: var(--base-border-color); + /* body 是展开后的内容区 */ + --accordion-body-bg: var(--color-bg-surface); + --accordion-body-color: var(--color-text-primary); + --accordion-body-border: var(--color-border-default); } diff --git a/packages/cherry-markdown/src/sass/variables/components/bubble.scss b/packages/cherry-markdown/src/sass/variables/components/bubble.scss new file mode 100644 index 000000000..2fff60dd3 --- /dev/null +++ b/packages/cherry-markdown/src/sass/variables/components/bubble.scss @@ -0,0 +1,11 @@ +/* ========== 编辑气泡 ========== */ + +.cherry { + --bubble-bg: var(--toolbar-bg); + --bubble-border: var(--color-border-default); + --bubble-shadow: var(--shadow-md); + --bubble-radius: var(--radius-xl); + --bubble-padding: var(--toolbar-btn-padding); + --bubble-btn-height: var(--height-button); + --bubble-z-index: var(--z-index-popover); +} diff --git a/packages/cherry-markdown/src/sass/variables/components/dropdown.scss b/packages/cherry-markdown/src/sass/variables/components/dropdown.scss new file mode 100644 index 000000000..70613cb64 --- /dev/null +++ b/packages/cherry-markdown/src/sass/variables/components/dropdown.scss @@ -0,0 +1,20 @@ +/* ========== 工具栏的下拉菜单 ========== */ + +.cherry { + /* 弹层本身 */ + --dropdown-bg: var(--toolbar-bg); + --dropdown-border: var(--color-border-default); + --dropdown-shadow: var(--shadow-md); + --dropdown-radius: var(--radius-xl); + --dropdown-padding: var(--spacing-xs) 0; + + /* 列表项 */ + --dropdown-item-height: var(--height-button); + --dropdown-item-radius: var(--dropdown-radius); + --dropdown-item-padding: var(--spacing-sm) var(--spacing-md); + --dropdown-item-hover-bg: var(--color-bg-hover); + --dropdown-item-color: var(--toolbar-btn-color); + --dropdown-item-hover-color: var(--color-text-primary); + --dropdown-item-active-bg: var(--color-bg-active); + --dropdown-item-active-color: var(--color-brand-primary); +} diff --git a/packages/cherry-markdown/src/sass/variables/components/editor.scss b/packages/cherry-markdown/src/sass/variables/components/editor.scss new file mode 100644 index 000000000..91ac9804c --- /dev/null +++ b/packages/cherry-markdown/src/sass/variables/components/editor.scss @@ -0,0 +1,20 @@ +/* ========== 编辑器相关 ========== */ + +.cherry { + /* 语法高亮与行内装饰，默认依赖语义层颜色 */ + --editor-header-color: var(--color-text-primary); + --editor-comment-color: var(--oc-blue-6); + --editor-quote-color: var(--oc-blue-6); + --editor-string-color: var(--color-text-primary); + --editor-link-color: var(--oc-blue-6); + --editor-url-bg-color: #d7e6fe; + --editor-v2-color: var(--color-brand-primary); + --editor-v3-color: var(--color-bg-active); + --editor-keyword-color: var(--color-text-primary); + + /* 交互态 */ + --editor-cursor-color: var(--color-brand-primary); + --editor-selection-bg: var(--oc-blue-1); + --editor-line-number-color: var(--oc-gray-4); + --editor-active-line-bg: var(--oc-gray-0); +} diff --git a/packages/cherry-markdown/src/sass/variables/components/index.scss b/packages/cherry-markdown/src/sass/variables/components/index.scss index 408627389..103d7805c 100644 --- a/packages/cherry-markdown/src/sass/variables/components/index.scss +++ b/packages/cherry-markdown/src/sass/variables/components/index.scss @@ -1,3 +1,10 @@ +@forward './toolbar'; +@forward './dropdown'; +@forward './bubble'; +@forward './editor'; +@forward './markdown'; +@forward './previewer'; +@forward './mermaid'; @forward './table'; @forward './accordion'; @forward './panel'; diff --git a/packages/cherry-markdown/src/sass/variables/components/markdown.scss b/packages/cherry-markdown/src/sass/variables/components/markdown.scss new file mode 100644 index 000000000..22b41633c --- /dev/null +++ b/packages/cherry-markdown/src/sass/variables/components/markdown.scss @@ -0,0 +1,40 @@ +/* ========== Markdown 元素样式 ========== */ + +.cherry { + /* 正文基础排版 */ + --md-heading-color: var(--color-text-primary); + + --md-paragraph-color: var(--color-text-primary); + --md-paragraph-line-height: var(--line-height-relaxed); + --md-paragraph-highlight-line-bg: var(--color-bg-active); + + /* 行内元素 */ + --md-link-color: var(--oc-blue-6); + --md-link-hover-color: var(--color-text-link-hover); + + --md-inline-code-color: var(--color-error); + --md-inline-code-bg: #e5e5e5; + + /* 引用与分隔 */ + --md-blockquote-bg: rgba(102, 128, 153, 0.05); + --md-blockquote-border: #D6DBDF; + --md-blockquote-color: var(--color-text-secondary); + + --md-hr-border: var(--color-border-default); + + /* TOC 目录 */ + --md-toc-bg: var(--oc-gray-0); + --md-toc-border-color: var(--color-border-default); + --md-toc-radius: var(--radius-lg); + --md-toc-padding: var(--spacing-lg); + --md-toc-title-color: var(--md-heading-color); + --md-toc-link-hover-bg: var(--oc-gray-1); + --md-toc-link-active-bg: var(--oc-gray-2); + --md-toc-link-radius: var(--radius-md); + --md-toc-link-color: var(--md-paragraph-color); + --md-toc-link-hover-color: var(--md-link-hover-color); + --md-toc-indicator-width: var(--border-width-4); + --md-toc-indicator-color: var(--oc-gray-3); + --md-toc-indicator-hover-color: var(--md-toc-link-hover-color); + --md-toc-indicator-gap: var(--spacing-lg); +} diff --git a/packages/cherry-markdown/src/sass/variables/components/mermaid.scss b/packages/cherry-markdown/src/sass/variables/components/mermaid.scss new file mode 100644 index 000000000..0034584a5 --- /dev/null +++ b/packages/cherry-markdown/src/sass/variables/components/mermaid.scss @@ -0,0 +1,10 @@ +/* ========== Mermaid 源码工具栏 ========== */ + +.cherry { + /* mermaid 源码 / 预览切换工具条 */ + --mermaid-toolbar-switch-bg: rgba(128, 128, 128, 0.12); + --mermaid-toolbar-slider-bg: rgba(255, 255, 255, 0.85); + --mermaid-toolbar-tab-color: inherit; + --mermaid-toolbar-tab-active-color: #333; + --mermaid-container-border: rgba(128, 128, 128, 0.2); +} diff --git a/packages/cherry-markdown/src/sass/variables/components/panel.scss b/packages/cherry-markdown/src/sass/variables/components/panel.scss index 2f239bb84..77e1ea013 100644 --- a/packages/cherry-markdown/src/sass/variables/components/panel.scss +++ b/packages/cherry-markdown/src/sass/variables/components/panel.scss @@ -1,4 +1,7 @@ +/* ========== 面板 ========== */ + .cherry { + /* 面板共用容器样式 */ --panel-margin: 10px 0; --panel-border-radius: var(--radius-xl); --panel-border: 1px solid var(--color-border-default); @@ -17,6 +20,7 @@ --panel-body-color: var(--color-text-primary); --panel-body-border-radius: 0 0 var(--panel-border-radius) var(--panel-border-radius); + /* 各状态优先通过 accent / surface / emphasis 三层来覆写，而不是重写细项实现 */ --panel-primary-accent: var(--color-brand-primary); --panel-primary-surface: var(--color-bg-active); --panel-primary-emphasis: var(--panel-primary-accent); diff --git a/packages/cherry-markdown/src/sass/variables/components/previewer.scss b/packages/cherry-markdown/src/sass/variables/components/previewer.scss new file mode 100644 index 000000000..05cbaf4e4 --- /dev/null +++ b/packages/cherry-markdown/src/sass/variables/components/previewer.scss @@ -0,0 +1,8 @@ +/* ========== 预览器相关 ========== */ + +.cherry { + /* mobile-bg 只作用于移动设备模拟预览区 */ + --previewer-mobile-bg: var(--color-bg-surface); + /* 拖拽分栏线 */ + --drag-border-color: var(--color-border-default); +} diff --git a/packages/cherry-markdown/src/sass/variables/components/shortcut-panel.scss b/packages/cherry-markdown/src/sass/variables/components/shortcut-panel.scss index 5fe1b5208..7baabceb4 100644 --- a/packages/cherry-markdown/src/sass/variables/components/shortcut-panel.scss +++ b/packages/cherry-markdown/src/sass/variables/components/shortcut-panel.scss @@ -1,7 +1,11 @@ +/* ========== 快捷键配置面板 ========== */ + .cherry { + /* 快捷键配置面板沿用 dropdown 的视觉基础 */ --shortcut-key-config-panel-bg: var(--dropdown-bg); --shortcut-key-config-panel-text-color: var(--dropdown-item-color); + /* 面板内部布局和动画 */ --shortcut-panel-padding-x: 15px; --shortcut-panel-padding-y: 10px; --shortcut-panel-font-size-xs: var(--font-size-xs); diff --git a/packages/cherry-markdown/src/sass/variables/components/table.scss b/packages/cherry-markdown/src/sass/variables/components/table.scss index 6c50f490f..a7837c10c 100644 --- a/packages/cherry-markdown/src/sass/variables/components/table.scss +++ b/packages/cherry-markdown/src/sass/variables/components/table.scss @@ -1,6 +1,9 @@ +/* ========== 表格 ========== */ + .cherry { - --md-table-border: var(--base-border-color); - --md-table-operator-color: var(--primary-color); - --md-table-drag-border-bg: var(--primary-color); - --md-table-sort-active-bg: var(--secondary-color); + /* 表格编辑态颜色：边框、操作按钮、拖拽指示与排序高亮 */ + --md-table-border: var(--color-border-default); + --md-table-operator-color: var(--color-brand-primary); + --md-table-drag-border-bg: var(--color-brand-primary); + --md-table-sort-active-bg: var(--color-bg-active); } diff --git a/packages/cherry-markdown/src/sass/variables/components/toolbar.scss b/packages/cherry-markdown/src/sass/variables/components/toolbar.scss new file mode 100644 index 000000000..5fb58e018 --- /dev/null +++ b/packages/cherry-markdown/src/sass/variables/components/toolbar.scss @@ -0,0 +1,26 @@ +/* ========== 工具栏相关 ========== */ + +.cherry { + /* 工具栏容器 */ + --toolbar-bg: var(--oc-white); + --toolbar-border: var(--color-border-default); + --toolbar-padding: var(--spacing-xs) var(--spacing-xl); + --toolbar-font-size: var(--font-size-sm); + --toolbar-radius: var(--radius-none); + --toolbar-shadow: var(--shadow-sm); + --toolbar-split-color: var(--color-border-default); + + --toolbar-min-height: 48px; + --sidebar-list-height: 120px; + + /* 工具栏按钮 */ + --toolbar-btn-color: #3f4a56; + --toolbar-btn-bg: transparent; + --toolbar-btn-hover-color: var(--color-brand-primary); + --toolbar-btn-hover-bg: var(--color-bg-active); + --toolbar-btn-active-bg: var(--color-bg-active); + --toolbar-btn-disabled: #ccc; + --toolbar-btn-radius: var(--radius-lg); + --toolbar-btn-padding: 0 var(--spacing-md); + --toolbar-btn-height: var(--height-button); +} diff --git a/packages/cherry-markdown/src/sass/variables/semantic.scss b/packages/cherry-markdown/src/sass/variables/semantic.scss index 7d431c774..c1fa1749f 100644 --- a/packages/cherry-markdown/src/sass/variables/semantic.scss +++ b/packages/cherry-markdown/src/sass/variables/semantic.scss @@ -2,166 +2,43 @@ // 基于现有组件和样式需求，映射到一级变量 .cherry { - /* ========== 历史语义默认值 ========== */ - --base-font-color: #3f4a56; - --base-sub-font-color: #6d6e6f; - --base-border-color: #dfe6ee; - --base-editor-bg: #ffffff; - --base-previewer-bg: #ffffff; - - /* ========== 主题色彩系统 ========== */ - --primary-color: #3582fb; - --secondary-color: #f0f4ff; - /* ========== 系统状态颜色 ========== */ --color-success: var(--oc-green-6); --color-warning: var(--oc-yellow-6); --color-error: var(--oc-red-6); --color-info: var(--oc-blue-6); - --color-link-hover: var(--primary-color); + --color-link-hover: #3582fb; --color-primary-hover: var(--color-link-hover); /* ========== 新语义命名层 ========== */ - --color-text-primary: var(--base-font-color); - --color-text-secondary: var(--base-sub-font-color); + --color-text-primary: #3f4a56; + --color-text-secondary: #6d6e6f; --color-text-link: var(--md-link-color); --color-text-link-hover: var(--color-link-hover); - --color-bg-canvas: var(--base-editor-bg); - --color-bg-surface: var(--base-previewer-bg); + --color-bg-canvas: #ffffff; + --color-bg-surface: #ffffff; --color-bg-subtle: var(--oc-gray-0); --color-bg-hover: var(--oc-gray-1); - --color-bg-active: var(--secondary-color); + --color-bg-active: #f0f4ff; - --color-border-default: var(--base-border-color); + --color-border-default: #dfe6ee; --color-border-strong: var(--oc-gray-4); - --color-brand-primary: var(--primary-color); + --color-brand-primary: #3582fb; --color-brand-primary-hover: var(--color-primary-hover); /* ========== 历史兼容变量 ========== */ + /* 仅保留给外部覆写或遗留调用，不建议新增内部依赖 */ + --base-font-color: var(--color-text-primary); + --base-sub-font-color: var(--color-text-secondary); + --base-border-color: var(--color-border-default); + --base-editor-bg: var(--color-bg-canvas); + --base-previewer-bg: var(--color-bg-surface); + --primary-color: var(--color-brand-primary); + --secondary-color: var(--color-bg-active); --border-color: var(--color-border-default); --bg-color-lighter: var(--color-bg-hover); --full-width-color: var(--color-brand-primary); - /* ========== 工具栏相关 ========== */ - --toolbar-bg: var(--oc-white); - --toolbar-border: var(--color-border-default); - --toolbar-padding: var(--spacing-xs) var(--spacing-xl); - --toolbar-font-size: var(--font-size-sm); - --toolbar-radius: var(--radius-none); - --toolbar-shadow: var(--shadow-sm); - --toolbar-split-color: var(--color-border-default); - - --toolbar-min-height: 48px; // 单行工具栏的高度 - // 侧边栏列表高度（由 JS 动态写入），默认 120px 作为无侧栏时的回退 - --sidebar-list-height: 120px; - - // 工具栏按钮 - --toolbar-btn-color: #3f4a56; - --toolbar-btn-bg: transparent; - --toolbar-btn-hover-color: var(--color-brand-primary); - --toolbar-btn-hover-bg: var(--color-bg-active); - --toolbar-btn-active-bg: var(--color-bg-active); - --toolbar-btn-disabled: #ccc; - --toolbar-btn-radius: var(--radius-lg); - --toolbar-btn-padding: 0 var(--spacing-md); - --toolbar-btn-height: var(--height-button); - - /* ========== 工具栏的下拉菜单 ========== */ - --dropdown-bg: var(--toolbar-bg); - --dropdown-border: var(--color-border-default); - --dropdown-shadow: var(--shadow-md); - --dropdown-radius: var(--radius-xl); - --dropdown-padding: var(--spacing-xs) 0; - - // 下拉菜单项 - --dropdown-item-height: var(--height-button); - --dropdown-item-radius: var(--dropdown-radius); - --dropdown-item-padding: var(--spacing-sm) var(--spacing-md); - --dropdown-item-hover-bg: var(--color-bg-hover); - --dropdown-item-color: var(--toolbar-btn-color); - --dropdown-item-hover-color: var(--color-text-primary); - --dropdown-item-active-bg: var(--color-bg-active); - --dropdown-item-active-color: var(--color-brand-primary); - - /* ========== 编辑气泡 ========== */ - --bubble-bg: var(--toolbar-bg); - --bubble-border: var(--color-border-default); - --bubble-shadow: var(--shadow-md); - --bubble-radius: var(--radius-xl); - --bubble-padding: var(--toolbar-btn-padding); - --bubble-btn-height: var(--height-button); - --bubble-z-index: var(--z-index-popover); - - /* ========== 编辑器相关 ========== */ - // ---base-editor-bg 编辑器背景颜色 - --editor-header-color: var(--color-text-primary); - --editor-comment-color: var(--oc-blue-6); - --editor-quote-color: var(--oc-blue-6); - --editor-string-color: var(--color-text-primary); - --editor-link-color: var(--oc-blue-6); - --editor-url-bg-color: #d7e6fe; - --editor-v2-color: var(--color-brand-primary); - --editor-v3-color: var(--color-bg-active); - --editor-keyword-color: var(--color-text-primary); - --editor-cursor-color: var(--color-brand-primary); - --editor-selection-bg: var(--oc-blue-1); - --editor-line-number-color: var(--oc-gray-4); - --editor-active-line-bg: var(--oc-gray-0); - - /* ========== 预览器相关 ========== */ - // --base-previewer-bg 预览器背景颜色 - --previewer-mobile-bg: var(--color-bg-surface); - - /* ========== Markdown 元素样式 ========== */ - // 标题 - --md-heading-color: var(--color-text-primary); - - // 段落 - --md-paragraph-color: var(--color-text-primary); - --md-paragraph-line-height: var(--line-height-relaxed); - --md-paragraph-highlight-line-bg: var(--color-bg-active); // 当前编辑行高光背景色 - - // 链接 - --md-link-color: var(--oc-blue-6); - --md-link-hover-color: var(--color-text-link-hover); - - // 行内代码 - --md-inline-code-color: var(--color-error); - --md-inline-code-bg: #e5e5e5; - - // 引用 - --md-blockquote-bg: rgba(102, 128, 153, 0.05); - --md-blockquote-border: #D6DBDF; - --md-blockquote-color: var(--color-text-secondary); - - // 分割线 - --md-hr-border: var(--color-border-default); - - // 目录 (TOC) - --md-toc-bg: var(--oc-gray-0); - --md-toc-border-color: var(--color-border-default); - --md-toc-radius: var(--radius-lg); - --md-toc-padding: var(--spacing-lg); - --md-toc-title-color: var(--md-heading-color); - --md-toc-link-hover-bg: var(--oc-gray-1); - --md-toc-link-active-bg: var(--oc-gray-2); - --md-toc-link-radius: var(--radius-md); - --md-toc-link-color: var(--md-paragraph-color); - --md-toc-link-hover-color: var(--md-link-hover-color); - --md-toc-indicator-width: var(--border-width-4); - --md-toc-indicator-color: var(--oc-gray-3); - --md-toc-indicator-hover-color: var(--md-toc-link-hover-color); - --md-toc-indicator-gap: var(--spacing-lg); - - /* ========== Mermaid 源码工具栏 ========== */ - --mermaid-toolbar-switch-bg: rgba(128, 128, 128, 0.12); - --mermaid-toolbar-slider-bg: rgba(255, 255, 255, 0.85); - --mermaid-toolbar-tab-color: inherit; - --mermaid-toolbar-tab-active-color: #333; // active 状态深色文字，确保在亮色 slider 上可见 - --mermaid-container-border: rgba(128, 128, 128, 0.2); - - /* ========== 其余单个组件 ========== */ - --drag-border-color: var(--color-border-default); } diff --git a/packages/cherry-markdown/src/utils/exportWord.js b/packages/cherry-markdown/src/utils/exportWord.js index 56ab812a6..5ab076761 100644 --- a/packages/cherry-markdown/src/utils/exportWord.js +++ b/packages/cherry-markdown/src/utils/exportWord.js @@ -201,8 +201,8 @@ function showExportWordTip() { top: 50%; left: 50%; transform: translate(-50%, -50%); - background: var(--base-editor-bg); - border: 1px solid var(--base-border-color); + background: var(--color-bg-canvas); + border: 1px solid var(--color-border-default); border-radius: var(--radius-xl); padding: var(--spacing-lg); box-shadow: var(--shadow-lg); @@ -211,16 +211,16 @@ function showExportWordTip() { text-align: center; font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif); "> -

内容已复制到剪贴板

-

+

内容已复制到剪贴板

+

请打开 Microsoft Word，然后按 Ctrl+V（Windows）或 Cmd+V（Mac）粘贴内容。

-

+

部分样式可能会丢失或变更