整理主题基础变量与动效 token

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;

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) {

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:/],

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、列表、命令面板和滚动条",

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;
+  }
+}

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;

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 {

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,

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 {

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 {

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 {

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,

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/);
+});

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;