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

package/dist/cherry-markdown.css

@@ -3973,78 +3973,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, "");
 }
 
 .cherry .doing-resize-img {
@@ -4063,7 +4088,8 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   border-radius: 5px;
   z-index: 11;
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-  background: var(--oc-white);
+  background: var(--base-editor-bg);
+  border: 1px solid var(--base-border-color);
 }
 .cherry .footnote.hidden {
   display: none;
@@ -4267,7 +4293,7 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   }
 }
 .cherry .cherry-highlight-line {
-  animation: changeBgColor 3s;
+  animation: changeBgColor 1s;
 }
 
 @media print {
@@ -4520,8 +4546,8 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
 .cherry .cherry-shortcut-key-config-panel-wrapper {
   background-color: var(--shortcut-key-config-panel-bg);
   color: var(--shortcut-key-config-panel-text-color);
-  width: 280px !important;
-  height: 420px !important;
+  width: 300px !important;
+  height: 518px !important;
 }
 .cherry .cherry-shortcut-key-config-panel-wrapper .cherry-shortcut-key-config-panel-inner {
   width: 100%;
@@ -4545,6 +4571,7 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   font-size: 12px;
   transition: var(--shortcut-panel-transition);
   user-select: none;
+  background-color: var(--dropdown-item-hover-bg);
 }
 .cherry .cherry-shortcut-key-config-panel-wrapper .cherry-shortcut-key-config-panel-inner .shortcut-tabs .shortcut-tab:hover {
   background-color: var(--dropdown-item-hover-bg);
@@ -4734,6 +4761,8 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   display: flex;
   flex-wrap: wrap;
   gap: 4px;
+  box-shadow: var(--accordion-shadow);
+  margin-bottom: 5px;
 }
 .cherry .cherry-shortcut-key-config-panel-wrapper .shortcut-panel-settings .shortcut-settings-btn {
   height: auto;
@@ -5588,8 +5617,8 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
 .cherry-mask-code-block {
   width: 100%;
   padding-top: 50px;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff));
-  background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(var(--toolbar-bg)));
+  background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, var(--toolbar-bg) 100%);
   text-align: center;
   position: absolute;
   left: 0;
@@ -5631,6 +5660,7 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
 .cherry-previewer-codeBlock-hover-handler {
   z-index: 0;
   position: absolute;
+  margin-top: -20px;
   pointer-events: none;
 }
 .cherry-previewer-codeBlock-hover-handler * {
@@ -5646,7 +5676,7 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   height: 25px;
   cursor: pointer;
   float: right;
-  top: 15px;
+  top: 35px;
   border-radius: 5px;
   box-shadow: 5px 0 5px rgba(0, 0, 0, 0.05);
   transition: all 0.3s;
@@ -5731,7 +5761,7 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   background-color: var(--toolbar-bg);
   border: 1px solid var(--base-border-color);
   border-radius: 6px;
-  padding: 6px 36px 6px 12px;
+  padding: 5px 36px 5px 12px;
   cursor: pointer;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23495057' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
@@ -6123,7 +6153,7 @@ div[data-code-wrap=wrap] div[data-type=codeBlock] code[class*=language-] {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.8666666667);
   margin-right: 8px;
   box-sizing: border-box;
   user-select: none;
@@ -6475,6 +6505,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 {
@@ -6505,7 +6590,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;
 }
 
 /*
@@ -6547,6 +6632,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);
@@ -6603,6 +6735,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);
@@ -6679,6 +6858,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);
@@ -6737,6 +6964,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);
@@ -6802,6 +7076,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);
@@ -6819,6 +7137,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,
@@ -6828,4 +7149,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);
 }