diff --git a/dist/theme.css b/dist/theme.css index 1e69cbc..69f1814 100644 --- a/dist/theme.css +++ b/dist/theme.css @@ -19,6 +19,9 @@ --monokai-selection-border-color: var(--interactive-accent); --monokai-light-tool-background: var(--background-secondary); --monokai-tab-active-border-color: var(--interactive-accent); + --monokai-transition-fast: 120ms ease; + --monokai-transition-base: 140ms ease; + --monokai-transition-emphasis: 180ms ease; } .theme-dark { @@ -116,13 +119,13 @@ --background-modifier-border: #d2cec4; --text-accent: #e14775; --monokai-default-accent: #e14775; - --monokai-default-link: #14748a; + --monokai-default-link: #0f6478; --monokai-default-success: #269d69; --monokai-default-warning: rgb(232 179 10 / 24%); --monokai-default-code-background: #ebe8df; --monokai-selection-background: rgb(20 116 138 / 16%); --monokai-selection-muted-background: rgb(52 52 52 / 6%); - --monokai-selection-border-color: #14748a; + --monokai-selection-border-color: #0f6478; --monokai-light-tool-background: #f5f3ec; --text-accent-hover: #f63d77; --interactive-accent: #e14775; @@ -131,17 +134,17 @@ --h2-color: #e16032; --h3-color: #cc7a0a; --h4-color: #269d69; - --h5-color: #14748a; + --h5-color: #0f6478; --h6-color: #7058be; - --text-a: #14748a; + --text-a: #0f6478; --text-a-hover: #1ba5bf; - --link-color: #14748a; + --link-color: #0f6478; --link-color-hover: #1ba5bf; - --link-external-color: #14748a; + --link-external-color: #0f6478; --link-external-color-hover: #1ba5bf; --icon-color: #606060; --icon-color-hover: #343434; - --icon-color-active: #14748a; + --icon-color-active: #0f6478; --metadata-label-text-color: #e16032; --text-highlight-bg: rgb(232 179 10 / 24%); --blockquote-border-color: #269d69; @@ -159,14 +162,14 @@ --code-important: #e14775; --code-keyword: #e14775; --code-operator: #f63d77; - --code-property: #14748a; + --code-property: #0f6478; --code-punctuation: #606060; --code-string: #cc7a0a; --code-tag: #e14775; --code-value: #7058be; --code-type: #7058be; --code-class: #269d69; - --code-builtin: #14748a; + --code-builtin: #0f6478; --code-constant: #7058be; --code-namespace: #606060; --code-decorator: #e16032; @@ -175,7 +178,7 @@ --code-error: #e14775; --code-variable: #343434; --code-parameter: #e16032; - --code-module: #14748a; + --code-module: #0f6478; --ribbon-background: #f0eee7; --ribbon-background-collapsed: #f0eee7; --nav-item-background-hover: #e8e5dc; @@ -210,7 +213,7 @@ align-items: center; color: var(--nav-item-color); border-radius: var(--radius-s); - transition: color 120ms ease, background-color 120ms ease, box-shadow 120ms ease; + transition: color var(--monokai-transition-fast), background-color var(--monokai-transition-fast), box-shadow var(--monokai-transition-fast); } .nav-file-title:hover, @@ -341,6 +344,16 @@ input[type=checkbox]:checked { background-color: var(--monokai-selection-background); } +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms; + animation-iteration-count: 1; + scroll-behavior: auto; + transition-duration: 0.01ms; + } +} .markdown-source-view, .markdown-preview-view { --bold-color: var(--text-normal); @@ -497,11 +510,11 @@ body.theme-light { --blockquote-border-color: #cc7a0a; --monokai-blockquote-border: #cc7a0a; --monokai-callout-note-bg: rgb(20 116 138 / 9%); - --monokai-callout-note-border: #14748a; + --monokai-callout-note-border: #0f6478; --monokai-callout-abstract-bg: rgb(107 83 148 / 9%); --monokai-callout-abstract-border: #6b5394; --monokai-callout-info-bg: rgb(20 116 138 / 9%); - --monokai-callout-info-border: #14748a; + --monokai-callout-info-border: #0f6478; --monokai-callout-todo-bg: rgb(151 116 0 / 9%); --monokai-callout-todo-border: #977400; --monokai-callout-tip-bg: rgb(38 157 105 / 9%); @@ -529,7 +542,7 @@ body.theme-light { --monokai-codeblock-header-background: #f5f3ec; --monokai-codeblock-border-color: #c6b9a6; --monokai-codeblock-active-line-background: #e3d4bf; - --monokai-codeblock-active-line-border: #14748a; + --monokai-codeblock-active-line-border: #0f6478; --monokai-codeblock-selection-background: #c9e8ee; --monokai-table-border: rgb(61 61 61 / 18%); --monokai-table-header-background: rgb(61 61 61 / 6%); @@ -1035,17 +1048,6 @@ body.theme-light { .markdown-rendered .heading-anchor { color: var(--monokai-heading-anchor-color); } -.markdown-rendered .callout { - background-color: var(--callout-background, transparent); - border: 1px solid var(--background-modifier-border); - border-inline-start: 3px solid rgb(var(--callout-color)); - border-radius: var(--radius-m); - box-shadow: none; -} -.markdown-rendered .callout-title { - color: var(--text-normal); - font-weight: 700; -} .markdown-preview-view .markdown-rendered .copy-code-button { font-size: 0.58rem; @@ -2027,7 +2029,7 @@ body.monokai-syntax-monochrome-icons .nav-file-title.is-active::before { .status-bar-item { border-radius: var(--radius-s); - transition: color 120ms ease, background-color 120ms ease; + transition: color var(--monokai-transition-fast), background-color var(--monokai-transition-fast); } .status-bar-item:hover { @@ -2098,7 +2100,7 @@ body.is-mobile .workspace-ribbon { color: var(--text-muted); background-color: transparent; border-radius: var(--radius-s) var(--radius-s) 0 0; - transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease; + transition: color var(--monokai-transition-base), background-color var(--monokai-transition-base), box-shadow var(--monokai-transition-base); } .workspace-tab-header:hover { @@ -2174,7 +2176,7 @@ body.theme-light { border: 1px solid var(--background-modifier-border); border-radius: var(--radius-s); padding: 0.45rem 0.6rem; - transition: border-color 140ms ease, box-shadow 140ms ease; + transition: border-color var(--monokai-transition-base), box-shadow var(--monokai-transition-base); } .prompt-input:focus, @@ -2218,7 +2220,7 @@ body.theme-light { color: var(--nav-item-color); border-radius: var(--radius-s); margin-block: 1px; - transition: color 120ms ease, background-color 120ms ease, box-shadow 120ms ease; + transition: color var(--monokai-transition-fast), background-color var(--monokai-transition-fast), box-shadow var(--monokai-transition-fast); } .modal.mod-settings .vertical-tab-nav-item:hover { color: var(--nav-item-color-hover); @@ -2297,7 +2299,7 @@ body.theme-light { border: 1px solid var(--monokai-settings-item-border); border-radius: var(--radius-m); box-shadow: none; - transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease; + transition: background-color var(--monokai-transition-base), border-color var(--monokai-transition-base), box-shadow var(--monokai-transition-base); } .style-settings-container .setting-item.is-selected, .style-settings-container .setting-item:hover { @@ -2344,7 +2346,7 @@ body.theme-light { --graph-node-highlight-fill: var(--interactive-accent); --graph-node-highlight-line: var(--link-color); background-color: var(--monokai-graph-background); - transition: color 140ms ease, background-color 180ms ease; + transition: color var(--monokai-transition-base), background-color var(--monokai-transition-emphasis); } @keyframes monokai-graph-tap { @@ -2367,13 +2369,13 @@ body.theme-light { border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); - transition: border-color 140ms ease, box-shadow 180ms ease; + transition: border-color var(--monokai-transition-base), box-shadow var(--monokai-transition-emphasis); } .graph-controls-button { color: var(--icon-color); border-radius: var(--radius-s); - transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; + transition: color var(--monokai-transition-base), background-color var(--monokai-transition-base), box-shadow var(--monokai-transition-base), transform var(--monokai-transition-base); } .graph-controls-button:hover { @@ -2383,7 +2385,7 @@ body.theme-light { } .graph-controls-button:active { - animation: monokai-graph-tap 160ms ease-out; + animation: monokai-graph-tap var(--monokai-transition-emphasis); transform: translateY(0); } @@ -2438,7 +2440,7 @@ body.theme-light { .workspace-leaf-content[data-type=graph], .workspace-leaf-content[data-type=localgraph] { background-color: var(--monokai-graph-background); - transition: box-shadow 180ms ease, background-color 180ms ease; + transition: box-shadow var(--monokai-transition-emphasis), background-color var(--monokai-transition-emphasis); } .workspace-leaf-content[data-type=graph] .view-content, @@ -2486,7 +2488,7 @@ body.theme-light { .canvas-node { border-color: var(--background-modifier-border); border-radius: var(--radius-m); - transition: border-color 120ms ease, box-shadow 120ms ease; + transition: border-color var(--monokai-transition-fast), box-shadow var(--monokai-transition-fast); } .canvas-node-content { @@ -2659,35 +2661,35 @@ body.theme-light.monokai-syntax-filter-light { --text-accent-hover: #e14775; --interactive-accent: #e14775; --interactive-accent-hover: #e14775; - --link-color: #14748a; - --link-color-hover: #14748a; - --link-external-color: #14748a; - --link-external-color-hover: #14748a; + --link-color: #0f6478; + --link-color-hover: #0f6478; + --link-external-color: #0f6478; + --link-external-color-hover: #0f6478; --h1-color: #e14775; --h2-color: #e16032; --h3-color: #cc7a0a; --h4-color: #269d69; - --h5-color: #14748a; + --h5-color: #0f6478; --h6-color: #7058be; --icon-color: #606060; --icon-color-hover: #343434; - --icon-color-active: #14748a; + --icon-color-active: #0f6478; --metadata-label-text-color: #e16032; --metadata-label-text-color-hover: #e16032; --monokai-default-accent: #e14775; - --monokai-default-link: #14748a; + --monokai-default-link: #0f6478; --monokai-default-success: #269d69; --monokai-default-warning: rgba(232, 179, 10, 0.24); --monokai-default-code-background: #f0eee7; - --monokai-selection-background: rgb(from #14748a r g b / 18%); + --monokai-selection-background: rgb(from #0f6478 r g b / 18%); --monokai-selection-muted-background: rgb(from #343434 r g b / 6%); - --monokai-selection-border-color: #14748a; + --monokai-selection-border-color: #0f6478; --monokai-light-tool-background: #f0eee7; --monokai-spectrum-red: #e14775; --monokai-spectrum-orange: #e16032; --monokai-spectrum-yellow: #cc7a0a; --monokai-spectrum-green: #269d69; - --monokai-spectrum-cyan: #14748a; + --monokai-spectrum-cyan: #0f6478; --monokai-spectrum-purple: #7058be; --code-normal: #343434; --code-background: #f0eee7; @@ -2696,14 +2698,14 @@ body.theme-light.monokai-syntax-filter-light { --code-important: #e14775; --code-keyword: #e14775; --code-operator: #e16032; - --code-property: #14748a; + --code-property: #0f6478; --code-punctuation: #606060; --code-string: #cc7a0a; --code-tag: #e14775; --code-value: #7058be; --code-type: #7058be; --code-class: #269d69; - --code-builtin: #14748a; + --code-builtin: #0f6478; --code-constant: #7058be; --code-namespace: #606060; --code-decorator: #e16032; @@ -2712,11 +2714,11 @@ body.theme-light.monokai-syntax-filter-light { --code-error: #e14775; --code-variable: #343434; --code-parameter: #e16032; - --code-module: #14748a; - --monokai-callout-note-bg: rgb(from #14748a r g b / 12%); - --monokai-callout-note-border: #14748a; - --monokai-callout-info-bg: rgb(from #14748a r g b / 12%); - --monokai-callout-info-border: #14748a; + --code-module: #0f6478; + --monokai-callout-note-bg: rgb(from #0f6478 r g b / 12%); + --monokai-callout-note-border: #0f6478; + --monokai-callout-info-bg: rgb(from #0f6478 r g b / 12%); + --monokai-callout-info-border: #0f6478; --monokai-callout-abstract-bg: rgb(from #7058be r g b / 12%); --monokai-callout-abstract-border: #7058be; --monokai-callout-question-bg: rgb(from #7058be r g b / 12%); @@ -2741,18 +2743,18 @@ body.theme-light.monokai-syntax-filter-light { --monokai-callout-quote-border: #77736c; --monokai-graph-background: #f0eee7; --monokai-graph-panel: #ddd9cf; - --monokai-graph-line: rgb(from #14748a r g b / 42%); + --monokai-graph-line: rgb(from #0f6478 r g b / 42%); --monokai-graph-node: #606060; --monokai-graph-focused: #e14775; --monokai-graph-node-tag: #7058be; --monokai-graph-node-attachment: #269d69; --monokai-graph-node-unresolved: #77736c; - --monokai-graph-ring: rgb(from #14748a r g b / 28%); + --monokai-graph-ring: rgb(from #0f6478 r g b / 28%); --canvas-color-1: #e14775; --canvas-color-2: #e16032; --canvas-color-3: #cc7a0a; --canvas-color-4: #269d69; - --canvas-color-5: #14748a; + --canvas-color-5: #0f6478; --canvas-color-6: #7058be; --ribbon-background: #f0eee7; --ribbon-background-collapsed: #f0eee7; diff --git a/scripts/check-contrast.js b/scripts/check-contrast.js index dbfeda4..edf2bf7 100644 --- a/scripts/check-contrast.js +++ b/scripts/check-contrast.js @@ -11,14 +11,14 @@ export const pairs = [ { filter: "pro", label: "代码块边框", foreground: "#403e41", background: "#221f22", minimum: 1.3 }, { filter: "pro", label: "Callout 标题", foreground: "#78dce8", background: "#2e3e42", minimum: 4.5 }, { filter: "light", label: "正文", foreground: "#3d3d3d", background: "#fdf9f3", minimum: 4.5 }, - { filter: "light", label: "链接", foreground: "#14748a", background: "#fdf9f3", minimum: 4.5 }, + { filter: "light", label: "链接", foreground: "#0f6478", background: "#fdf9f3", minimum: 4.5 }, { filter: "light", label: "图标", foreground: "#666666", background: "#f5f0e6", minimum: 3 }, { filter: "light", label: "高亮文本", foreground: "#3d3d3d", background: "#f7e7b3", minimum: 4.5 }, { filter: "light", label: "代码注释", foreground: "#7a7369", background: "#f5f0e6", minimum: 3 }, { filter: "light", label: "行号", foreground: "#7a7369", background: "#f5f0e6", minimum: 3 }, { filter: "light", label: "选区文字", foreground: "#3d3d3d", background: "#d8edf0", minimum: 4.5 }, { filter: "light", label: "代码块边框", foreground: "#d8d0c2", background: "#f5f0e6", minimum: 1.3 }, - { filter: "light", label: "Callout 标题", foreground: "#14748a", background: "#eef6f5", minimum: 4.5 }, + { filter: "light", label: "Callout 标题", foreground: "#0f6478", background: "#eef6f5", minimum: 4.5 }, ]; export function toRgb(hex) { diff --git a/scripts/verify-graph.js b/scripts/verify-graph.js index da76265..2d09c5b 100644 --- a/scripts/verify-graph.js +++ b/scripts/verify-graph.js @@ -5,8 +5,8 @@ const graphPath = resolve(import.meta.dirname, "../src/scss/plugins/_graph.scss" const graphScss = readFileSync(graphPath, "utf8"); const checks = [ - ["图谱颜色支持过渡", /\.graph-view[\s\S]*?transition:[\s\S]*?color 140ms ease/], - ["图谱背景支持过渡", /\.graph-view[\s\S]*?background-color 180ms ease/], + ["图谱颜色支持过渡", /\.graph-view[\s\S]*?transition:[\s\S]*?color var\(--monokai-transition-base\)/], + ["图谱背景支持过渡", /\.graph-view[\s\S]*?background-color var\(--monokai-transition-emphasis\)/], ["图谱使用 Monokai Pro 背景变量", /\.graph-view[\s\S]*?background-color:\s*var\(--monokai-graph-background\)/], ["图谱背景默认继承当前滤镜侧栏背景", /\.graph-view[\s\S]*?--monokai-graph-background:\s*var\(--background-secondary\)/], ["图谱高亮节点跟随滤镜红色光谱", /\.graph-view[\s\S]*?--monokai-graph-focused:\s*var\(--monokai-spectrum-red, var\(--interactive-accent\)\)/], @@ -16,9 +16,9 @@ const checks = [ ["图谱高亮节点无光晕", (scss) => !/drop-shadow\(/.test(scss)], ["图谱容器无呼吸光晕伪元素", (scss) => !/\.workspace-leaf-content\[data-type="graph"\] \.view-content::before/.test(scss)], ["图谱容器无径向光背景", (scss) => !/radial-gradient\(circle at 50% 45%, var\(--monokai-graph-ring\)/.test(scss)], - ["图谱控制按钮支持动画", /\.graph-controls-button[\s\S]*?transition:[\s\S]*?transform 140ms ease/], + ["图谱控制按钮支持动画", /\.graph-controls-button[\s\S]*?transition:[\s\S]*?transform var\(--monokai-transition-base\)/], ["图谱控制按钮 hover 轻微上移", /\.graph-controls-button:hover[\s\S]*?transform:\s*translateY\(-1px\)/], - ["图谱控制按钮点击时轻微晃动", /\.graph-controls-button:active[\s\S]*?animation:\s*monokai-graph-tap 160ms ease-out/], + ["图谱控制按钮点击时轻微晃动", /\.graph-controls-button:active[\s\S]*?animation:\s*monokai-graph-tap var\(--monokai-transition-emphasis\)/], ["图谱控制按钮点击态复位", /\.graph-controls-button:active[\s\S]*?transform:\s*translateY\(0\)/], ["图谱点击晃动关键帧", /@keyframes monokai-graph-tap[\s\S]*?translateX\(1px\)[\s\S]*?translateX\(-1px\)/], ["图谱面板获得焦点时响应", /\.workspace-leaf-content\[data-type="graph"\]:focus-within[\s\S]*?box-shadow:/], diff --git a/scripts/verify-style-polish.js b/scripts/verify-style-polish.js index 06cda7c..043b21b 100644 --- a/scripts/verify-style-polish.js +++ b/scripts/verify-style-polish.js @@ -106,8 +106,9 @@ const checks = [ ], [ "标签页和 Modal 输入具备克制动效与舒适内边距", - /\.workspace-tab-header\s*\{[\s\S]*?transition:[\s\S]*?color 140ms ease,[\s\S]*?background-color 140ms ease,[\s\S]*?box-shadow 140ms ease;/.test(files.tabs) - && /\.prompt-input,[\s\S]*?\.modal textarea\s*\{[\s\S]*?padding:\s*0\.45rem 0\.6rem;[\s\S]*?transition:[\s\S]*?border-color 140ms ease,[\s\S]*?box-shadow 140ms ease;/.test(files.modals), + /--monokai-transition-base:\s*140ms ease;/.test(files.base) + && /\.workspace-tab-header\s*\{[\s\S]*?transition:[\s\S]*?color var\(--monokai-transition-base\),[\s\S]*?background-color var\(--monokai-transition-base\),[\s\S]*?box-shadow var\(--monokai-transition-base\);/.test(files.tabs) + && /\.prompt-input,[\s\S]*?\.modal textarea\s*\{[\s\S]*?padding:\s*0\.45rem 0\.6rem;[\s\S]*?transition:[\s\S]*?border-color var\(--monokai-transition-base\),[\s\S]*?box-shadow var\(--monokai-transition-base\);/.test(files.modals), ], [ "Amber / VS Code 强调色预设覆盖 tab、列表、命令面板和滚动条", diff --git a/src/scss/_base.scss b/src/scss/_base.scss index 89f87b3..c964726 100644 --- a/src/scss/_base.scss +++ b/src/scss/_base.scss @@ -14,6 +14,9 @@ --monokai-selection-border-color: var(--interactive-accent); --monokai-light-tool-background: var(--background-secondary); --monokai-tab-active-border-color: var(--interactive-accent); + --monokai-transition-fast: 120ms ease; + --monokai-transition-base: 140ms ease; + --monokai-transition-emphasis: 180ms ease; } .theme-dark { @@ -206,9 +209,9 @@ color: var(--nav-item-color); border-radius: var(--radius-s); transition: - color 120ms ease, - background-color 120ms ease, - box-shadow 120ms ease; + color var(--monokai-transition-fast), + background-color var(--monokai-transition-fast), + box-shadow var(--monokai-transition-fast); } .nav-file-title:hover, @@ -340,3 +343,14 @@ input[type="checkbox"]:checked { color: var(--monokai-selection-foreground); background-color: var(--monokai-selection-background); } + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms; + animation-iteration-count: 1; + scroll-behavior: auto; + transition-duration: 0.01ms; + } +} diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 13be47f..e9cb7ca 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -28,7 +28,7 @@ $color-light-yellow: #cc7a0a; $color-light-yellow-soft: #e8b30a; $color-light-green: #269d69; $color-light-green-soft: #3aad53; -$color-light-cyan: #14748a; +$color-light-cyan: #0f6478; $color-light-cyan-soft: #1ba5bf; $color-light-purple: #7058be; $color-light-purple-soft: #7358cf; diff --git a/src/scss/components/_editor.scss b/src/scss/components/_editor.scss index 28077ae..39e4efe 100644 --- a/src/scss/components/_editor.scss +++ b/src/scss/components/_editor.scss @@ -157,11 +157,11 @@ body.theme-light { --blockquote-border-color: #{$color-light-blockquote-border}; --monokai-blockquote-border: #{$color-light-blockquote-border}; --monokai-callout-note-bg: rgb(20 116 138 / 9%); - --monokai-callout-note-border: #14748a; + --monokai-callout-note-border: #{$color-light-cyan}; --monokai-callout-abstract-bg: rgb(107 83 148 / 9%); --monokai-callout-abstract-border: #6b5394; --monokai-callout-info-bg: rgb(20 116 138 / 9%); - --monokai-callout-info-border: #14748a; + --monokai-callout-info-border: #{$color-light-cyan}; --monokai-callout-todo-bg: rgb(151 116 0 / 9%); --monokai-callout-todo-border: #977400; --monokai-callout-tip-bg: rgb(38 157 105 / 9%); @@ -692,18 +692,6 @@ body.theme-light { color: var(--monokai-heading-anchor-color); } - .callout { - background-color: var(--callout-background, transparent); - border: 1px solid var(--background-modifier-border); - border-inline-start: 3px solid rgb(var(--callout-color)); - border-radius: var(--radius-m); - box-shadow: none; - } - - .callout-title { - color: var(--text-normal); - font-weight: 700; - } } .markdown-preview-view .markdown-rendered { diff --git a/src/scss/components/_modals.scss b/src/scss/components/_modals.scss index 1e58b1d..ee8fa27 100644 --- a/src/scss/components/_modals.scss +++ b/src/scss/components/_modals.scss @@ -53,8 +53,8 @@ body.theme-light { border-radius: var(--radius-s); padding: 0.45rem 0.6rem; transition: - border-color 140ms ease, - box-shadow 140ms ease; + border-color var(--monokai-transition-base), + box-shadow var(--monokai-transition-base); } .prompt-input:focus, @@ -102,9 +102,9 @@ body.theme-light { border-radius: var(--radius-s); margin-block: 1px; transition: - color 120ms ease, - background-color 120ms ease, - box-shadow 120ms ease; + color var(--monokai-transition-fast), + background-color var(--monokai-transition-fast), + box-shadow var(--monokai-transition-fast); } .vertical-tab-nav-item:hover { @@ -197,9 +197,9 @@ body.theme-light { border-radius: var(--radius-m); box-shadow: none; transition: - background-color 140ms ease, - border-color 140ms ease, - box-shadow 140ms ease; + background-color var(--monokai-transition-base), + border-color var(--monokai-transition-base), + box-shadow var(--monokai-transition-base); } .setting-item.is-selected, diff --git a/src/scss/components/_ribbon.scss b/src/scss/components/_ribbon.scss index f6b88d7..abdaf3d 100644 --- a/src/scss/components/_ribbon.scss +++ b/src/scss/components/_ribbon.scss @@ -44,8 +44,8 @@ .status-bar-item { border-radius: var(--radius-s); transition: - color 120ms ease, - background-color 120ms ease; + color var(--monokai-transition-fast), + background-color var(--monokai-transition-fast); } .status-bar-item:hover { diff --git a/src/scss/components/_tabs.scss b/src/scss/components/_tabs.scss index b566a5c..23a2a03 100644 --- a/src/scss/components/_tabs.scss +++ b/src/scss/components/_tabs.scss @@ -52,9 +52,9 @@ background-color: transparent; border-radius: var(--radius-s) var(--radius-s) 0 0; transition: - color 140ms ease, - background-color 140ms ease, - box-shadow 140ms ease; + color var(--monokai-transition-base), + background-color var(--monokai-transition-base), + box-shadow var(--monokai-transition-base); } .workspace-tab-header:hover { diff --git a/src/scss/plugins/_canvas.scss b/src/scss/plugins/_canvas.scss index 841d673..5cd2251 100644 --- a/src/scss/plugins/_canvas.scss +++ b/src/scss/plugins/_canvas.scss @@ -19,8 +19,8 @@ border-color: var(--background-modifier-border); border-radius: var(--radius-m); transition: - border-color 120ms ease, - box-shadow 120ms ease; + border-color var(--monokai-transition-fast), + box-shadow var(--monokai-transition-fast); } .canvas-node-content { diff --git a/src/scss/plugins/_graph.scss b/src/scss/plugins/_graph.scss index dacbb44..6b8d46c 100644 --- a/src/scss/plugins/_graph.scss +++ b/src/scss/plugins/_graph.scss @@ -22,8 +22,8 @@ background-color: var(--monokai-graph-background); transition: - color 140ms ease, - background-color 180ms ease; + color var(--monokai-transition-base), + background-color var(--monokai-transition-emphasis); } @keyframes monokai-graph-tap { @@ -51,18 +51,18 @@ border-radius: var(--radius-m); box-shadow: 0 8px 24px rgb(0 0 0 / 12%); transition: - border-color 140ms ease, - box-shadow 180ms ease; + border-color var(--monokai-transition-base), + box-shadow var(--monokai-transition-emphasis); } .graph-controls-button { color: var(--icon-color); border-radius: var(--radius-s); transition: - color 140ms ease, - background-color 140ms ease, - box-shadow 140ms ease, - transform 140ms ease; + color var(--monokai-transition-base), + background-color var(--monokai-transition-base), + box-shadow var(--monokai-transition-base), + transform var(--monokai-transition-base); } .graph-controls-button:hover { @@ -72,7 +72,7 @@ } .graph-controls-button:active { - animation: monokai-graph-tap 160ms ease-out; + animation: monokai-graph-tap var(--monokai-transition-emphasis); transform: translateY(0); } @@ -128,8 +128,8 @@ .workspace-leaf-content[data-type="localgraph"] { background-color: var(--monokai-graph-background); transition: - box-shadow 180ms ease, - background-color 180ms ease; + box-shadow var(--monokai-transition-emphasis), + background-color var(--monokai-transition-emphasis); } .workspace-leaf-content[data-type="graph"] .view-content, diff --git a/test/monokai-pro-polish.test.js b/test/monokai-pro-polish.test.js index d1c6c8f..ec04333 100644 --- a/test/monokai-pro-polish.test.js +++ b/test/monokai-pro-polish.test.js @@ -65,3 +65,20 @@ test("Monokai Pro 打磨项暴露稳定的样式入口", () => { assert.match(styleSettings, /monokai-syntax-media-border-style/); assert.match(styleSettings, /monokai-syntax-heading-color-mode/); }); + +test("低风险基础清理使用统一 token 并避免重复 Callout 基础规则", () => { + const variables = readSource("../src/scss/_variables.scss"); + const base = readSource("../src/scss/_base.scss"); + const editor = readSource("../src/scss/components/_editor.scss"); + const activeVisual = readSource("../src/scss/_active-visual-overrides.scss"); + const contrast = readSource("../scripts/check-contrast.js"); + + assert.match(variables, /\$color-light-cyan:\s*#0f6478;/); + assert.match(contrast, /\{ filter: "light", label: "链接", foreground: "#0f6478"/); + assert.match(base, /--monokai-transition-fast:\s*120ms ease;/); + assert.match(base, /--monokai-transition-base:\s*140ms ease;/); + assert.match(base, /--monokai-transition-emphasis:\s*180ms ease;/); + assert.match(base, /@media \(prefers-reduced-motion: reduce\)[\s\S]*?\*,[\s\S]*?\*::before,[\s\S]*?\*::after[\s\S]*?transition-duration:\s*0\.01ms;/); + assert.doesNotMatch(editor, /\.markdown-rendered\s*\{[\s\S]*?\.callout\s*\{/); + assert.match(activeVisual, /body \.markdown-preview-view\.markdown-rendered \.callout,[\s\S]*?body \.markdown-rendered \.callout,[\s\S]*?body \.markdown-source-view\.mod-cm6 \.callout/); +}); diff --git a/theme.css b/theme.css index 1e69cbc..69f1814 100644 --- a/theme.css +++ b/theme.css @@ -19,6 +19,9 @@ --monokai-selection-border-color: var(--interactive-accent); --monokai-light-tool-background: var(--background-secondary); --monokai-tab-active-border-color: var(--interactive-accent); + --monokai-transition-fast: 120ms ease; + --monokai-transition-base: 140ms ease; + --monokai-transition-emphasis: 180ms ease; } .theme-dark { @@ -116,13 +119,13 @@ --background-modifier-border: #d2cec4; --text-accent: #e14775; --monokai-default-accent: #e14775; - --monokai-default-link: #14748a; + --monokai-default-link: #0f6478; --monokai-default-success: #269d69; --monokai-default-warning: rgb(232 179 10 / 24%); --monokai-default-code-background: #ebe8df; --monokai-selection-background: rgb(20 116 138 / 16%); --monokai-selection-muted-background: rgb(52 52 52 / 6%); - --monokai-selection-border-color: #14748a; + --monokai-selection-border-color: #0f6478; --monokai-light-tool-background: #f5f3ec; --text-accent-hover: #f63d77; --interactive-accent: #e14775; @@ -131,17 +134,17 @@ --h2-color: #e16032; --h3-color: #cc7a0a; --h4-color: #269d69; - --h5-color: #14748a; + --h5-color: #0f6478; --h6-color: #7058be; - --text-a: #14748a; + --text-a: #0f6478; --text-a-hover: #1ba5bf; - --link-color: #14748a; + --link-color: #0f6478; --link-color-hover: #1ba5bf; - --link-external-color: #14748a; + --link-external-color: #0f6478; --link-external-color-hover: #1ba5bf; --icon-color: #606060; --icon-color-hover: #343434; - --icon-color-active: #14748a; + --icon-color-active: #0f6478; --metadata-label-text-color: #e16032; --text-highlight-bg: rgb(232 179 10 / 24%); --blockquote-border-color: #269d69; @@ -159,14 +162,14 @@ --code-important: #e14775; --code-keyword: #e14775; --code-operator: #f63d77; - --code-property: #14748a; + --code-property: #0f6478; --code-punctuation: #606060; --code-string: #cc7a0a; --code-tag: #e14775; --code-value: #7058be; --code-type: #7058be; --code-class: #269d69; - --code-builtin: #14748a; + --code-builtin: #0f6478; --code-constant: #7058be; --code-namespace: #606060; --code-decorator: #e16032; @@ -175,7 +178,7 @@ --code-error: #e14775; --code-variable: #343434; --code-parameter: #e16032; - --code-module: #14748a; + --code-module: #0f6478; --ribbon-background: #f0eee7; --ribbon-background-collapsed: #f0eee7; --nav-item-background-hover: #e8e5dc; @@ -210,7 +213,7 @@ align-items: center; color: var(--nav-item-color); border-radius: var(--radius-s); - transition: color 120ms ease, background-color 120ms ease, box-shadow 120ms ease; + transition: color var(--monokai-transition-fast), background-color var(--monokai-transition-fast), box-shadow var(--monokai-transition-fast); } .nav-file-title:hover, @@ -341,6 +344,16 @@ input[type=checkbox]:checked { background-color: var(--monokai-selection-background); } +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + animation-duration: 0.01ms; + animation-iteration-count: 1; + scroll-behavior: auto; + transition-duration: 0.01ms; + } +} .markdown-source-view, .markdown-preview-view { --bold-color: var(--text-normal); @@ -497,11 +510,11 @@ body.theme-light { --blockquote-border-color: #cc7a0a; --monokai-blockquote-border: #cc7a0a; --monokai-callout-note-bg: rgb(20 116 138 / 9%); - --monokai-callout-note-border: #14748a; + --monokai-callout-note-border: #0f6478; --monokai-callout-abstract-bg: rgb(107 83 148 / 9%); --monokai-callout-abstract-border: #6b5394; --monokai-callout-info-bg: rgb(20 116 138 / 9%); - --monokai-callout-info-border: #14748a; + --monokai-callout-info-border: #0f6478; --monokai-callout-todo-bg: rgb(151 116 0 / 9%); --monokai-callout-todo-border: #977400; --monokai-callout-tip-bg: rgb(38 157 105 / 9%); @@ -529,7 +542,7 @@ body.theme-light { --monokai-codeblock-header-background: #f5f3ec; --monokai-codeblock-border-color: #c6b9a6; --monokai-codeblock-active-line-background: #e3d4bf; - --monokai-codeblock-active-line-border: #14748a; + --monokai-codeblock-active-line-border: #0f6478; --monokai-codeblock-selection-background: #c9e8ee; --monokai-table-border: rgb(61 61 61 / 18%); --monokai-table-header-background: rgb(61 61 61 / 6%); @@ -1035,17 +1048,6 @@ body.theme-light { .markdown-rendered .heading-anchor { color: var(--monokai-heading-anchor-color); } -.markdown-rendered .callout { - background-color: var(--callout-background, transparent); - border: 1px solid var(--background-modifier-border); - border-inline-start: 3px solid rgb(var(--callout-color)); - border-radius: var(--radius-m); - box-shadow: none; -} -.markdown-rendered .callout-title { - color: var(--text-normal); - font-weight: 700; -} .markdown-preview-view .markdown-rendered .copy-code-button { font-size: 0.58rem; @@ -2027,7 +2029,7 @@ body.monokai-syntax-monochrome-icons .nav-file-title.is-active::before { .status-bar-item { border-radius: var(--radius-s); - transition: color 120ms ease, background-color 120ms ease; + transition: color var(--monokai-transition-fast), background-color var(--monokai-transition-fast); } .status-bar-item:hover { @@ -2098,7 +2100,7 @@ body.is-mobile .workspace-ribbon { color: var(--text-muted); background-color: transparent; border-radius: var(--radius-s) var(--radius-s) 0 0; - transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease; + transition: color var(--monokai-transition-base), background-color var(--monokai-transition-base), box-shadow var(--monokai-transition-base); } .workspace-tab-header:hover { @@ -2174,7 +2176,7 @@ body.theme-light { border: 1px solid var(--background-modifier-border); border-radius: var(--radius-s); padding: 0.45rem 0.6rem; - transition: border-color 140ms ease, box-shadow 140ms ease; + transition: border-color var(--monokai-transition-base), box-shadow var(--monokai-transition-base); } .prompt-input:focus, @@ -2218,7 +2220,7 @@ body.theme-light { color: var(--nav-item-color); border-radius: var(--radius-s); margin-block: 1px; - transition: color 120ms ease, background-color 120ms ease, box-shadow 120ms ease; + transition: color var(--monokai-transition-fast), background-color var(--monokai-transition-fast), box-shadow var(--monokai-transition-fast); } .modal.mod-settings .vertical-tab-nav-item:hover { color: var(--nav-item-color-hover); @@ -2297,7 +2299,7 @@ body.theme-light { border: 1px solid var(--monokai-settings-item-border); border-radius: var(--radius-m); box-shadow: none; - transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease; + transition: background-color var(--monokai-transition-base), border-color var(--monokai-transition-base), box-shadow var(--monokai-transition-base); } .style-settings-container .setting-item.is-selected, .style-settings-container .setting-item:hover { @@ -2344,7 +2346,7 @@ body.theme-light { --graph-node-highlight-fill: var(--interactive-accent); --graph-node-highlight-line: var(--link-color); background-color: var(--monokai-graph-background); - transition: color 140ms ease, background-color 180ms ease; + transition: color var(--monokai-transition-base), background-color var(--monokai-transition-emphasis); } @keyframes monokai-graph-tap { @@ -2367,13 +2369,13 @@ body.theme-light { border: 1px solid var(--background-modifier-border); border-radius: var(--radius-m); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); - transition: border-color 140ms ease, box-shadow 180ms ease; + transition: border-color var(--monokai-transition-base), box-shadow var(--monokai-transition-emphasis); } .graph-controls-button { color: var(--icon-color); border-radius: var(--radius-s); - transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; + transition: color var(--monokai-transition-base), background-color var(--monokai-transition-base), box-shadow var(--monokai-transition-base), transform var(--monokai-transition-base); } .graph-controls-button:hover { @@ -2383,7 +2385,7 @@ body.theme-light { } .graph-controls-button:active { - animation: monokai-graph-tap 160ms ease-out; + animation: monokai-graph-tap var(--monokai-transition-emphasis); transform: translateY(0); } @@ -2438,7 +2440,7 @@ body.theme-light { .workspace-leaf-content[data-type=graph], .workspace-leaf-content[data-type=localgraph] { background-color: var(--monokai-graph-background); - transition: box-shadow 180ms ease, background-color 180ms ease; + transition: box-shadow var(--monokai-transition-emphasis), background-color var(--monokai-transition-emphasis); } .workspace-leaf-content[data-type=graph] .view-content, @@ -2486,7 +2488,7 @@ body.theme-light { .canvas-node { border-color: var(--background-modifier-border); border-radius: var(--radius-m); - transition: border-color 120ms ease, box-shadow 120ms ease; + transition: border-color var(--monokai-transition-fast), box-shadow var(--monokai-transition-fast); } .canvas-node-content { @@ -2659,35 +2661,35 @@ body.theme-light.monokai-syntax-filter-light { --text-accent-hover: #e14775; --interactive-accent: #e14775; --interactive-accent-hover: #e14775; - --link-color: #14748a; - --link-color-hover: #14748a; - --link-external-color: #14748a; - --link-external-color-hover: #14748a; + --link-color: #0f6478; + --link-color-hover: #0f6478; + --link-external-color: #0f6478; + --link-external-color-hover: #0f6478; --h1-color: #e14775; --h2-color: #e16032; --h3-color: #cc7a0a; --h4-color: #269d69; - --h5-color: #14748a; + --h5-color: #0f6478; --h6-color: #7058be; --icon-color: #606060; --icon-color-hover: #343434; - --icon-color-active: #14748a; + --icon-color-active: #0f6478; --metadata-label-text-color: #e16032; --metadata-label-text-color-hover: #e16032; --monokai-default-accent: #e14775; - --monokai-default-link: #14748a; + --monokai-default-link: #0f6478; --monokai-default-success: #269d69; --monokai-default-warning: rgba(232, 179, 10, 0.24); --monokai-default-code-background: #f0eee7; - --monokai-selection-background: rgb(from #14748a r g b / 18%); + --monokai-selection-background: rgb(from #0f6478 r g b / 18%); --monokai-selection-muted-background: rgb(from #343434 r g b / 6%); - --monokai-selection-border-color: #14748a; + --monokai-selection-border-color: #0f6478; --monokai-light-tool-background: #f0eee7; --monokai-spectrum-red: #e14775; --monokai-spectrum-orange: #e16032; --monokai-spectrum-yellow: #cc7a0a; --monokai-spectrum-green: #269d69; - --monokai-spectrum-cyan: #14748a; + --monokai-spectrum-cyan: #0f6478; --monokai-spectrum-purple: #7058be; --code-normal: #343434; --code-background: #f0eee7; @@ -2696,14 +2698,14 @@ body.theme-light.monokai-syntax-filter-light { --code-important: #e14775; --code-keyword: #e14775; --code-operator: #e16032; - --code-property: #14748a; + --code-property: #0f6478; --code-punctuation: #606060; --code-string: #cc7a0a; --code-tag: #e14775; --code-value: #7058be; --code-type: #7058be; --code-class: #269d69; - --code-builtin: #14748a; + --code-builtin: #0f6478; --code-constant: #7058be; --code-namespace: #606060; --code-decorator: #e16032; @@ -2712,11 +2714,11 @@ body.theme-light.monokai-syntax-filter-light { --code-error: #e14775; --code-variable: #343434; --code-parameter: #e16032; - --code-module: #14748a; - --monokai-callout-note-bg: rgb(from #14748a r g b / 12%); - --monokai-callout-note-border: #14748a; - --monokai-callout-info-bg: rgb(from #14748a r g b / 12%); - --monokai-callout-info-border: #14748a; + --code-module: #0f6478; + --monokai-callout-note-bg: rgb(from #0f6478 r g b / 12%); + --monokai-callout-note-border: #0f6478; + --monokai-callout-info-bg: rgb(from #0f6478 r g b / 12%); + --monokai-callout-info-border: #0f6478; --monokai-callout-abstract-bg: rgb(from #7058be r g b / 12%); --monokai-callout-abstract-border: #7058be; --monokai-callout-question-bg: rgb(from #7058be r g b / 12%); @@ -2741,18 +2743,18 @@ body.theme-light.monokai-syntax-filter-light { --monokai-callout-quote-border: #77736c; --monokai-graph-background: #f0eee7; --monokai-graph-panel: #ddd9cf; - --monokai-graph-line: rgb(from #14748a r g b / 42%); + --monokai-graph-line: rgb(from #0f6478 r g b / 42%); --monokai-graph-node: #606060; --monokai-graph-focused: #e14775; --monokai-graph-node-tag: #7058be; --monokai-graph-node-attachment: #269d69; --monokai-graph-node-unresolved: #77736c; - --monokai-graph-ring: rgb(from #14748a r g b / 28%); + --monokai-graph-ring: rgb(from #0f6478 r g b / 28%); --canvas-color-1: #e14775; --canvas-color-2: #e16032; --canvas-color-3: #cc7a0a; --canvas-color-4: #269d69; - --canvas-color-5: #14748a; + --canvas-color-5: #0f6478; --canvas-color-6: #7058be; --ribbon-background: #f0eee7; --ribbon-background-collapsed: #f0eee7;