@cherry-markdown/cherry-markdown-dev 0.9.4-dev.202507290929.f928c5e → 0.9.4-dev.202507301109.110b674

package/dist/cherry-markdown.js

@@ -93461,7 +93461,7 @@
 	  forEach$5(nodeIgnorePlugin).call(nodeIgnorePlugin, function (key) {
 	  });
 	}
-	var VERSION = "0.9.4-dev.202507290929.f928c5e-f928c5e2";
+	var VERSION = "0.9.4-dev.202507301109.110b674-110b6741";
 	var CherryStatic = /*#__PURE__*/function () {
 	  // for type check only
 	  // TODO: fix this error

package/dist/cherry-markdown.markdown.css

@@ -2652,78 +2652,103 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
 }
 
 .cherry-panel {
-  margin: 10px 0;
+  margin: var(--panel-margin, 10px 0);
   overflow: hidden;
-  border-radius: var(--radius-xl);
+  border-radius: var(--panel-border-radius, var(--radius-xl));
   box-sizing: border-box;
-  border: 0.5px solid;
+  border: var(--panel-border, 0.5px solid var(--panel-border-color, transparent));
+  background: var(--panel-bg, transparent);
+  box-shadow: var(--panel-box-shadow, none);
+  backdrop-filter: var(--panel-backdrop-filter, none);
 }
 .cherry-panel .cherry-panel--title {
-  color: #fff;
-  padding: 5px 20px;
+  color: var(--panel-title-color, #fff);
+  padding: var(--panel-title-padding, 5px 20px);
+  background: var(--panel-title-bg, transparent);
+  border-radius: var(--panel-title-border-radius, 0);
+  border-bottom: var(--panel-title-border-bottom, none);
 }
 .cherry-panel .cherry-panel--title.cherry-panel--title__not-empty::before {
   font-family: "ch-icon";
   margin: 0 var(--spacing-md) 0 -6px;
   vertical-align: bottom;
+  content: var(--panel-icon, "");
 }
 .cherry-panel .cherry-panel--body {
-  padding: 5px 20px;
+  padding: var(--panel-body-padding, 5px 20px);
+  background: var(--panel-body-bg, transparent);
+  color: var(--panel-body-color, inherit);
+  border-radius: var(--panel-body-border-radius, 0);
 }
 
 .cherry-panel__primary {
-  background-color: #cfe2ff;
-  color: #0a58ca;
-}
-.cherry-panel__primary .cherry-panel--title {
-  background-color: #0d6dfe;
-}
-.cherry-panel__primary .cherry-panel--title.cherry-panel--title__not-empty::before {
-  content: "\ea6a";
+  --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-icon: var(--panel-primary-icon, "");
 }
 
 .cherry-panel__info {
-  background-color: #cff4fc;
-  color: #087990;
-}
-.cherry-panel__info .cherry-panel--title {
-  background-color: #099cba;
-}
-.cherry-panel__info .cherry-panel--title.cherry-panel--title__not-empty::before {
-  content: "\ea69";
+  --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-icon: var(--panel-info-icon, "");
 }
 
 .cherry-panel__warning {
-  background-color: #fff3cd;
-  color: #997404;
-}
-.cherry-panel__warning .cherry-panel--title {
-  background-color: #b38806;
-}
-.cherry-panel__warning .cherry-panel--title.cherry-panel--title__not-empty::before {
-  content: "\ea6b";
+  --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-icon: var(--panel-warning-icon, "");
 }
 
 .cherry-panel__danger {
-  background-color: #f8d7da;
-  color: #b02a37;
-}
-.cherry-panel__danger .cherry-panel--title {
-  background-color: #dc3545;
-}
-.cherry-panel__danger .cherry-panel--title.cherry-panel--title__not-empty::before {
-  content: "\ea68";
+  --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-icon: var(--panel-danger-icon, "");
 }
 
 .cherry-panel__success {
-  background-color: #d1e7dd;
-  color: #146c43;
-}
-.cherry-panel__success .cherry-panel--title {
-  background-color: #198754;
-}
-.cherry-panel__success .cherry-panel--title.cherry-panel--title__not-empty::before {
-  content: "\ea67";
+  --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-icon: var(--panel-success-icon, "");
 }
 
 /** 引入自带的主题 */
@@ -2922,6 +2947,61 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
 }
 
 /** 预览区域样式 */
+.cherry-markdown.theme__dark {
+  /* ========== Panel 相关变量 ========== */
+  --panel-border-radius: 16px;
+  --panel-bg: linear-gradient(145deg, #2a2a2a 0%, #1e1e1e 100%);
+  --panel-border: 1px solid rgba(109, 40, 217, 0.2);
+  --panel-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+  --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-box-shadow: 0 8px 32px rgba(109, 40, 217, 0.15);
+  --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-box-shadow: 0 8px 32px rgba(34, 184, 207, 0.15);
+  --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-box-shadow: 0 8px 32px rgba(255, 193, 7, 0.15);
+  --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-box-shadow: 0 8px 32px rgba(239, 68, 68, 0.15);
+  --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-box-shadow: 0 8px 32px rgba(34, 197, 94, 0.15);
+  --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__dark figure svg path,
 .cherry-markdown.theme__dark figure svg rect,
 .cherry-markdown.theme__dark figure svg line {
@@ -2952,7 +3032,7 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   }
 }
 .cherry-markdown.theme__dark .cherry-highlight-line {
-  animation: changeBgColorDark 3s;
+  animation: changeBgColorDark 1s;
 }
 
 /*
@@ -2994,6 +3074,53 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   --md-blockquote-bg: var(--oc-blue-0);
   --md-hr-border: var(--oc-blue-5);
   --md-table-border: var(--oc-blue-5);
+  /* ========== Panel 相关变量 ========== */
+  --panel-border-radius: 16px;
+  --panel-bg: var(--oc-violet-0);
+  --panel-border: none;
+  --panel-box-shadow: 0 6px 20px rgba(139, 69, 195, 0.12);
+  --panel-title-bg: var(--oc-violet-1);
+  --panel-title-color: var(--oc-violet-9);
+  --panel-title-border-radius: 16px 16px 0 0;
+  --panel-title-border-bottom: none;
+  --panel-body-bg: var(--oc-white);
+  --panel-body-color: var(--oc-violet-9);
+  --panel-body-border-radius: 0 0 16px 16px;
+  /* Primary Panel */
+  --panel-primary-bg: var(--oc-violet-0);
+  --panel-primary-box-shadow: 0 6px 20px rgba(139, 69, 195, 0.18);
+  --panel-primary-title-bg: var(--oc-violet-3);
+  --panel-primary-title-color: var(--oc-violet-9);
+  --panel-primary-body-bg: var(--oc-violet-0);
+  --panel-primary-body-color: var(--oc-violet-8);
+  /* Info Panel */
+  --panel-info-bg: var(--oc-indigo-0);
+  --panel-info-box-shadow: 0 6px 20px rgba(92, 95, 208, 0.12);
+  --panel-info-title-bg: var(--oc-indigo-2);
+  --panel-info-title-color: var(--oc-indigo-9);
+  --panel-info-body-bg: var(--oc-indigo-0);
+  --panel-info-body-color: var(--oc-indigo-8);
+  /* Warning Panel */
+  --panel-warning-bg: var(--oc-yellow-0);
+  --panel-warning-box-shadow: 0 6px 20px rgba(255, 212, 59, 0.12);
+  --panel-warning-title-bg: var(--oc-yellow-2);
+  --panel-warning-title-color: var(--oc-yellow-9);
+  --panel-warning-body-bg: var(--oc-yellow-0);
+  --panel-warning-body-color: var(--oc-yellow-8);
+  /* Danger Panel */
+  --panel-danger-bg: var(--oc-grape-0);
+  --panel-danger-box-shadow: 0 6px 20px rgba(174, 62, 201, 0.12);
+  --panel-danger-title-bg: var(--oc-grape-2);
+  --panel-danger-title-color: var(--oc-grape-9);
+  --panel-danger-body-bg: var(--oc-grape-0);
+  --panel-danger-body-color: var(--oc-grape-8);
+  /* Success Panel */
+  --panel-success-bg: var(--oc-teal-0);
+  --panel-success-box-shadow: 0 6px 20px rgba(18, 184, 134, 0.12);
+  --panel-success-title-bg: var(--oc-teal-2);
+  --panel-success-title-color: var(--oc-teal-9);
+  --panel-success-body-bg: var(--oc-teal-0);
+  --panel-success-body-color: var(--oc-teal-8);
   --md-toc-bg: var(--oc-blue-0);
   --md-toc-indicator-color: var(--oc-blue-1);
   --md-toc-link-hover-bg: var(--oc-blue-1);
@@ -3050,6 +3177,53 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   --md-blockquote-bg: var(--oc-green-1);
   --md-hr-border: var(--oc-green-8);
   --md-table-border: var(--oc-green-8);
+  /* ========== Panel 相关变量 ========== */
+  --panel-border-radius: 12px;
+  --panel-bg: var(--oc-green-0);
+  --panel-border: 1px solid var(--oc-green-2);
+  --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-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-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-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-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-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);
@@ -3126,6 +3300,54 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   --md-blockquote-bg: var(--oc-pink-1);
   --md-hr-border: var(--oc-pink-8);
   --md-table-border: var(--oc-pink-8);
+  /* ========== Panel 相关变量 ========== */
+  --panel-border-radius: 6px;
+  --panel-bg: linear-gradient(135deg, var(--oc-pink-0), var(--oc-pink-1));
+  --panel-border: 1px solid var(--oc-pink-3);
+  --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);
+  /* 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);
+  /* 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);
+  /* 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-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);
+  /* 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);
@@ -3184,6 +3406,53 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   --md-blockquote-bg: var(--oc-violet-1);
   --md-hr-border: var(--oc-violet-8);
   --md-table-border: var(--oc-violet-8);
+  /* ========== Panel 相关变量 ========== */
+  --panel-border-radius: 4px;
+  --panel-bg: var(--oc-white);
+  --panel-border: 1px solid var(--oc-gray-2);
+  --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);
+  /* 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);
+  /* 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);
+  /* 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);
+  /* 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);
@@ -3249,6 +3518,50 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   --md-blockquote-bg: var(--oc-violet-1);
   --md-hr-border: var(--oc-indigo-4);
   --md-table-border: var(--oc-indigo-4);
+  /* ========== Panel 相关变量 ========== */
+  --panel-border-radius: 0;
+  --panel-bg: transparent;
+  --panel-border: none;
+  --panel-box-shadow: none;
+  --panel-title-bg: transparent;
+  --panel-title-color: inherit;
+  --panel-body-bg: transparent;
+  --panel-body-color: inherit;
+  /* 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;
+  /* 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;
+  /* 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;
+  /* 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;
+  /* 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);
@@ -3266,6 +3579,9 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
 }
 
 /** 预览区域样式 */
+.cherry-markdown.theme__blue {
+  /** Blue主题特殊的panel样式 - 使用左边框 */
+}
 .cherry-markdown.theme__blue h1,
 .cherry-markdown.theme__blue h2,
 .cherry-markdown.theme__blue h3,
@@ -3275,4 +3591,19 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   border-bottom: 1px dashed var(--md-hr-border);
   padding-bottom: 15px;
   margin-bottom: 25px;
+}
+.cherry-markdown.theme__blue .cherry-panel__primary {
+  border-left: 4px solid var(--oc-blue-6);
+}
+.cherry-markdown.theme__blue .cherry-panel__info {
+  border-left: 4px solid var(--oc-cyan-6);
+}
+.cherry-markdown.theme__blue .cherry-panel__warning {
+  border-left: 4px solid var(--oc-yellow-6);
+}
+.cherry-markdown.theme__blue .cherry-panel__danger {
+  border-left: 4px solid var(--oc-pink-6);
+}
+.cherry-markdown.theme__blue .cherry-panel__success {
+  border-left: 4px solid var(--oc-teal-6);
 }