@cldemo/ui-kit 1.1.4 → 1.1.6

package/buildLibs/styles/Element/ClSwitchery.css

@@ -132,7 +132,7 @@
 }
 .switchery-container {
   background-color: var(--cl-bg, #ffffff);
-  border: 1px solid var(--cl-border, #cfcfcf);
+  border: 1px solid var(--cl-border-control, #cfcfcf);
   border-radius: 20px;
   cursor: pointer;
   display: inline-block;
@@ -217,7 +217,7 @@
   color: #b6b6b6;
 }
 .switchery-container.switchery-open > .switchery-txt > span {
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 .switchery-container > .switchery-txt > span i {
   font-size: 14px;

package/buildLibs/styles/Element/ClTags.css

@@ -37,7 +37,7 @@
 .panel-tags .tag .tag-close {
   margin-left: 4px;
   flex-shrink: 0;
-  color: var(--cl-border, #cfcfcf);
+  color: var(--cl-border-focus, #8c8c8c);
   cursor: pointer;
   font-size: 14px;
   transition: all 0.3s linear;
@@ -66,7 +66,7 @@
 
 .panel-tags .tag.tag-disabled .tag-close:hover {
   cursor: no-drop;
-  color: var(--cl-border, #cfcfcf);
+  color: var(--cl-text-tertiary, #aaaaaa);
 }
 
 .tag.tag-hlight {
@@ -88,7 +88,7 @@
   position: absolute;
   right: 3px;
   top: 6px;
-  color: var(--cl-border, #cfcfcf);
+  color: var(--cl-border-focus, #8c8c8c);
   cursor: pointer;
   font-size: 14px;
   opacity: 1;

package/buildLibs/styles/Element/__provide__/LoadScreen.css

@@ -325,7 +325,7 @@
 }
 
 .loadScreen-text {
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   font-size: 25px;
   font-family: KaiTi, STKaiti;
   margin-right: 5px;

package/buildLibs/styles/Mobile/ClBanner.css

@@ -184,7 +184,7 @@
   height: 16px;
   border-radius: 50%;
   background: var(--cl-mask, rgba(0, 0, 0, 0.3));
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   font-size: 12px;
   line-height: 1;
   cursor: pointer;

package/buildLibs/styles/Mobile/ClCalendarM.css

@@ -207,8 +207,8 @@
 
 .panel-calendarm__day-inner {
   position: relative;
-  width: 36px;
-  height: 36px;
+  width: 38px;
+  height: 38px;
   border-radius: 50%;
   display: flex;
   flex-direction: column;
@@ -232,7 +232,7 @@
   justify-content: center;
   font-size: 8px;
   line-height: 1;
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   box-sizing: border-box;
 }
 

package/buildLibs/styles/Mobile/ClCell.css

@@ -18,7 +18,7 @@
   right: 0;
   bottom: -10px;
   height: 1px;
-  background: var(--cl-border, #cfcfcf);
+  background: var(--cl-border-light, #dcdcdc);
   transform: scaleY(0.5);
 }
 

package/buildLibs/styles/Mobile/ClCellSwipe.css

@@ -15,7 +15,7 @@
   display: flex;
   align-items: stretch;
   background: var(--cl-primary, #1088f0);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 /* 右侧操作区（默认红色） */
@@ -27,7 +27,7 @@
   display: flex;
   align-items: stretch;
   background: var(--cl-danger, #ee0a24);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 /* 右侧操作区二次确认态（isConfirm 开启、首次点击后）：视觉加深，提示需再次确认 */

package/buildLibs/styles/Mobile/ClCodeLegendM.css

@@ -10,7 +10,7 @@
 }
 
 .clipboard-btn {
-    color: var(--cl-bg, #ffffff);
+    color: var(--cl-text-on-accent, #1a1a1a);
     cursor: pointer;
 }
 

package/buildLibs/styles/Mobile/ClCropperM.css

@@ -290,7 +290,7 @@
 }
 
 .imgCropperM-btns .imgCropperM-btn:active {
-  background-color: var(--cl-border, #cfcfcf);
+  background-color: var(--cl-bg-press, #cfcfcf);
 }
 
 .imgCropperM-btns-save {
@@ -305,7 +305,7 @@
   justify-content: center;
   align-items: center;
   gap: 6px;
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   background-color: var(--cl-primary, #1088f0);
   cursor: pointer;
   border-radius: 8px;
@@ -428,7 +428,7 @@
   border-radius: 4px;
   gap: 8px;
   font-size: 13px;
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   cursor: default;
   user-select: none;
 }

package/buildLibs/styles/Mobile/ClGrid.css

@@ -82,7 +82,7 @@
   padding: 0 4px;
   border-radius: 8px;
   background: var(--cl-danger, #ee0a24);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   font-size: 10px;
   line-height: 16px;
   text-align: center;

package/buildLibs/styles/Mobile/ClInputPin.css

@@ -40,7 +40,7 @@
   justify-content: center;
   width: 40px;
   height: 48px;
-  border: 1px solid var(--cl-border, #cfcfcf);
+  border: 1px solid var(--cl-border-control, #cfcfcf);
   border-radius: 6px;
   background: var(--cl-bg, #ffffff);
   font-size: 18px;
@@ -88,12 +88,12 @@
 /* theme="line"：仅保留底部一条线 */
 .panel-input-pin--line .inputpin-cell {
   border: none;
-  border-bottom: 1px solid var(--cl-border, #cfcfcf);
+  border-bottom: 1px solid var(--cl-border-control, #cfcfcf);
   border-radius: 0;
 }
 
 .panel-input-pin--line .inputpin-cell--filled {
-  border-bottom-color: var(--cl-border, #cfcfcf);
+  border-bottom-color: var(--cl-border-control, #cfcfcf);
 }
 
 .panel-input-pin--line .inputpin-cell--active {

package/buildLibs/styles/Mobile/ClNotifyM.css

@@ -67,23 +67,23 @@
 /* 类型配色 */
 .panel-notify-m--primary {
   background: var(--cl-primary, #1088f0);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .panel-notify-m--success {
   background: var(--cl-success, #12b76a);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .panel-notify-m--danger {
   background: var(--cl-danger, #ee0a24);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .panel-notify-m--warning {
   /* 警示橙：Notify 局部色，与 --cl-warning 区分（更亮以适配深色通知条） */
   background: #ff976a;
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 /* 顶部滑入滑出 */

package/buildLibs/styles/Mobile/ClNumberKeyboard.css

@@ -445,7 +445,7 @@
 }
 
 .btn-body-backdrop-container .btn-body-backdrop-text {
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   font-size: 12px;
   margin-top: 5px;
   cursor: default;
@@ -619,7 +619,7 @@
 }
 
 .numberkeyboard-key:active {
-  background: var(--cl-border, #cfcfcf);
+  background: var(--cl-bg-press, #cfcfcf);
 }
 
 .numberkeyboard-key--extra,
@@ -640,7 +640,7 @@
 
 .numberkeyboard-key--done {
   background: var(--cl-primary, #1088f0);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   font-size: 16px;
 }
 

package/buildLibs/styles/Mobile/ClPicker.css

@@ -213,7 +213,7 @@
   transform: translateY(-50%);
   height: 40%;
   width: 1px;
-  background: var(--cl-border, #cfcfcf);
+  background: var(--cl-border-light, #dcdcdc);
   z-index: 3;
 }
 

package/buildLibs/styles/Mobile/ClPickerArea.css

@@ -115,7 +115,7 @@
   transform: translateY(-50%);
   height: 40%;
   width: 1px;
-  background: var(--cl-border, #cfcfcf);
+  background: var(--cl-border-light, #dcdcdc);
   z-index: 3;
 }
 

package/buildLibs/styles/Mobile/ClPickerDate.css

@@ -327,7 +327,7 @@
   transform: translateY(-50%);
   height: 40%;
   width: 1px;
-  background: var(--cl-border, #cfcfcf);
+  background: var(--cl-border-light, #dcdcdc);
   z-index: 3;
 }
 

package/buildLibs/styles/Mobile/ClPickerTime.css

@@ -327,7 +327,7 @@
   transform: translateY(-50%);
   height: 40%;
   width: 1px;
-  background: var(--cl-border, #cfcfcf);
+  background: var(--cl-border-light, #dcdcdc);
   z-index: 3;
 }
 

package/buildLibs/styles/Mobile/ClSharePanel.css

@@ -190,7 +190,7 @@
   color: var(--cl-text-primary, #323233);
   text-align: center;
   border: none;
-  border-top: 1px solid #f5f6f7;
+  border-top: 1px solid var(--cl-border-light, #dcdcdc);
   background: transparent;
   font-family: inherit;
   box-sizing: border-box;

package/buildLibs/styles/Mobile/ClSidebar.css

@@ -20,7 +20,7 @@
 }
 
 .sidebar-item:active {
-  background: var(--cl-border, #cfcfcf);
+  background: var(--cl-bg-press, #cfcfcf);
 }
 
 .sidebar-item--active {
@@ -51,7 +51,7 @@
   padding: 0 4px;
   border-radius: 8px;
   background: var(--cl-danger, #ee0a24);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   font-size: 10px;
   line-height: 16px;
   text-align: center;

package/buildLibs/styles/Mobile/ClSignature.css

@@ -44,7 +44,7 @@
 }
 
 .panel-signature__btn--confirm {
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   background: var(--cl-danger, #ee0a24);
   border-color: var(--cl-danger, #ee0a24);
 }

package/buildLibs/styles/Mobile/ClSteps.css

@@ -77,7 +77,7 @@
 
 .steps-item--active .steps-circle-wrap {
   background: var(--steps-active-color);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .panel-steps--vertical .steps-circle-wrap {

package/buildLibs/styles/Mobile/ClTabbar.css

@@ -8,7 +8,7 @@
     text-transform: none;
     font-weight: 500;
     font-size: 12px;
-    color: var(--cl-bg, #ffffff);
+    color: var(--cl-text-on-accent, #1a1a1a);
     border-radius: 8px;
     min-width: 16px;
     min-height: 16px;
@@ -31,19 +31,37 @@
 }
 
 .bg-red {
-    background-color: var(--cl-danger, #ee0a24) !important;
+    /* 固定深红：亮色 --cl-danger 白字仅 4.46:1 不达标，暗色 --cl-danger 更亮，故不随主题翻转 */
+    background-color: #cc0020 !important;
 }
 
 .bg-yellow {
-    background-color: #fbe300 !important;
+    background-color: var(--cl-bg-badge-yellow, #8a6a00) !important;
 }
 
 .bg-black {
-    background-color: var(--cl-text-primary, #323233) !important;
+    /* 固定深色：原用 --cl-text-primary 当底色，暗色下该 token 翻成近白色会让白字失效 */
+    background-color: var(--cl-bg-inverse, #323233) !important;
 }
 
 .bg-gray {
-    background-color: #848D98 !important;
+    /* 固定深灰：暗色下仍需承载白字，不随主题翻转 */
+    background-color: var(--cl-bg-badge-gray, #5c6672) !important;
+}
+
+/* 各变体字色：必须写在基类 .badge 之后（同特异性下靠后者生效）。
+   底色偏暗的变体（黑/红/黄/灰）用固定白字；底色偏亮的（主色/成功色）用强调面字色，
+   因这两种强调色在暗色主题下反而更亮，深字在两侧均达 WCAG 4.5:1 */
+.badge.bg-black,
+.badge.bg-red,
+.badge.bg-yellow,
+.badge.bg-gray {
+    color: #ffffff;
+}
+
+.badge.bg-default,
+.badge.bg-green {
+    color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .badge-dot {

package/buildLibs/styles/Mobile/ClToast.css

@@ -142,7 +142,7 @@
   padding: 12px 16px;
   background: var(--cl-overlay, rgba(0, 0, 0, 0.7));
   border-radius: 8px;
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   font-size: 14px;
   line-height: 1.4;
   word-break: break-all;

package/buildLibs/styles/Mobile/__provide__/NotifyM.css

@@ -67,23 +67,23 @@
 /* 类型配色 */
 .panel-notify-m--primary {
   background: var(--cl-primary, #1088f0);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .panel-notify-m--success {
   background: var(--cl-success, #12b76a);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .panel-notify-m--danger {
   background: var(--cl-danger, #ee0a24);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .panel-notify-m--warning {
   /* 警示橙：Notify 局部色，与 --cl-warning 区分（更亮以适配深色通知条） */
   background: #ff976a;
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 /* 顶部滑入滑出 */

package/buildLibs/styles/Mobile/__provide__/Toast.css

@@ -332,7 +332,7 @@
   padding: 12px 16px;
   background: var(--cl-overlay, rgba(0, 0, 0, 0.7));
   border-radius: 8px;
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   font-size: 14px;
   line-height: 1.4;
   word-break: break-all;

package/buildLibs/styles/Web/ClAnchorNav.css

@@ -115,7 +115,7 @@
 }
 
 .tooltip.tooltip-black .tooltip-inner {
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   background-color: var(--cl-text-primary, #323233);
 }
 .tooltip.tooltip-black[data-popper-placement^='top'] > .arrow::before {

package/buildLibs/styles/Web/ClCalendar.css

@@ -99,7 +99,7 @@
     justify-content: center;
     font-size: 10px;
     line-height: 1;
-    color: var(--cl-bg, #ffffff);
+    color: var(--cl-text-on-accent, #1a1a1a);
     box-sizing: border-box;
 }
 

package/buildLibs/styles/Web/ClCodeLegend.css

@@ -23,7 +23,7 @@
   padding: 16px;
   border-radius: 0;
   background-color: var(--cl-bg, #ffffff);
-  border-top: 1px solid #eaeefb;
+  border-top: 1px solid var(--cl-border-light, #dcdcdc);
 }
 
 .card-box.card-default {
@@ -160,7 +160,7 @@
 }
 
 .code-legend.card-box > .card-footer .code-legend-footer {
-  color: var(--cl-border, #cfcfcf);
+  color: var(--cl-text-tertiary, #aaaaaa);
   text-align: center;
   cursor: pointer;
   padding: 8px 0;

package/buildLibs/styles/Web/ClColorpicker.css

@@ -270,26 +270,26 @@
 }
 
 .dropdownLayer-dropdown-theme-popup.dropdownLayer-dropdown {
-  border-color: var(--cl-border, #cfcfcf);
+  border-color: var(--cl-border-control, #cfcfcf);
   border-radius: 4px;
   width: auto;
   cursor: default;
 }
 
 .dropdownLayer-dropdown-arrow.dropdownLayer-dropdown-theme-popup.dropdownLayer-dropdown.dropdownLayer-dropdown-up > .arrow {
-  border-top-color: var(--cl-border, #cfcfcf);
+  border-top-color: var(--cl-border-control, #cfcfcf);
 }
 
 .dropdownLayer-dropdown-arrow.dropdownLayer-dropdown-theme-popup.dropdownLayer-dropdown.dropdownLayer-dropdown-down > .arrow {
-  border-bottom-color: var(--cl-border, #cfcfcf);
+  border-bottom-color: var(--cl-border-control, #cfcfcf);
 }
 
 .dropdownLayer-dropdown-arrow.dropdownLayer-dropdown-theme-popup.dropdownLayer-dropdown.dropdownLayer-dropdown-left > .arrow {
-  border-left-color: var(--cl-border, #cfcfcf);
+  border-left-color: var(--cl-border-control, #cfcfcf);
 }
 
 .dropdownLayer-dropdown-arrow.dropdownLayer-dropdown-theme-popup.dropdownLayer-dropdown.dropdownLayer-dropdown-right > .arrow {
-  border-right-color: var(--cl-border, #cfcfcf);
+  border-right-color: var(--cl-border-control, #cfcfcf);
 }
 .panel-colorpicker-palette {
     position: relative;
@@ -498,7 +498,7 @@
 }
 
 .clipboard-btn {
-    color: var(--cl-bg, #ffffff);
+    color: var(--cl-text-on-accent, #1a1a1a);
     cursor: pointer;
 }
 
@@ -629,7 +629,7 @@
 .panel-colorpicker-operate > div:last-child > div:hover,
 .panel-colorpicker-operate > div:last-child:has(.panel-clipboard:focus-visible) > div {
     background: #bbbbbb;
-    color: var(--cl-bg, #ffffff);
+    color: var(--cl-text-on-accent, #1a1a1a);
 }
 .panel-colorpicker-operate > div:last-child > div > i {
     transition: font-size 0.3s;
@@ -647,7 +647,7 @@
     font-size: 14px;
 }
 .panel-colorpicker-operate > div:last-child > .panel-colorpicker-copy:hover .panel-clipboard > .clipboard-btn {
-    color: var(--cl-bg, #ffffff);
+    color: var(--cl-text-on-accent, #1a1a1a);
 }
 .panel-colorpicker-operate > div:last-child > .panel-colorpicker-copy:hover .panel-clipboard > .clipboard-btn > i {
     font-size: 16px;
@@ -658,7 +658,7 @@
    白字落在子元素 .clipboard-btn 上，故用 :has() 跨层级同步；
    否则只改字色会得到"白字透明底"，在浅色页面上不可见 */
 .panel-colorpicker-operate > div:last-child > .panel-colorpicker-copy:has(.panel-clipboard:focus-visible) .panel-clipboard > .clipboard-btn {
-    color: var(--cl-bg, #ffffff);
+    color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .panel-colorpicker-operate > div:last-child > .panel-colorpicker-copy:has(.panel-clipboard:focus-visible) .panel-clipboard > .clipboard-btn > i {
@@ -710,7 +710,7 @@
   width: 32px;
   padding: 2px;
   border-radius: 4px;
-  border: 1px solid var(--cl-border, #cfcfcf);
+  border: 1px solid var(--cl-border-control, #cfcfcf);
 }
 
 .panel-colorpicker-dropdown-text {
@@ -734,7 +734,7 @@
   align-items: center;
   justify-content: center;
   z-index: 10;
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .panel-colorpicker-dropdown-text > .panel-colorpicker-dropdown-arrow i {

package/buildLibs/styles/Web/ClCropper.css

@@ -774,7 +774,7 @@ button.close {
 }
 
 .btn-body-backdrop-container .btn-body-backdrop-text {
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   font-size: 12px;
   margin-top: 5px;
   cursor: default;

package/buildLibs/styles/Web/ClCropperPreview.css

@@ -774,7 +774,7 @@ button.close {
 }
 
 .btn-body-backdrop-container .btn-body-backdrop-text {
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   font-size: 12px;
   margin-top: 5px;
   cursor: default;
@@ -973,7 +973,7 @@ button.close {
 }
 
 .fileUpload-item .fileUpload-item-video .preview-icon > i {
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   font-size: 12px;
   height: 21px;
   line-height: 21px;
@@ -1050,7 +1050,7 @@ button.close {
   height: auto;
   min-height: 60px;
   background-color: transparent;
-  border: 1px solid var(--cl-border, #cfcfcf);
+  border: 1px solid var(--cl-border-control, #cfcfcf);
   border-radius: 4px;
   box-shadow: none;
   transition: all var(--cl-transition-fast, 150ms);
@@ -1195,7 +1195,7 @@ button.close {
   width: auto;
   height: 22px;
   background-color: var(--cl-overlay, rgba(0, 0, 0, 0.55));
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   text-align: center;
   vertical-align: middle;
   transition: all 0.2s ease;
@@ -1215,7 +1215,7 @@ button.close {
   height: 16px;
   z-index: 1;
   transition: all 0.2s ease;
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .fileUpload-complete .fileUpload-img .preview-icon {
@@ -1259,7 +1259,7 @@ button.close {
 }
 
 .fileUpload-complete .download-icon {
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .fileUpload-complete .fileUpload-video {
@@ -1304,7 +1304,7 @@ button.close {
 }
 
 .fileUpload-complete .fileUpload-video .preview-icon > i {
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   font-size: 18px;
   height: 39px;
   line-height: 39px;
@@ -1321,7 +1321,7 @@ button.close {
 }
 
 .fileUpload-complete .fileUpload-video .download-icon {
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .fileUpload-complete .fileUpload-icon {
@@ -1338,7 +1338,7 @@ button.close {
   text-align: center;
   font-size: 13px;
   border: 2px solid var(--cl-bg, #ffffff);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .fileUpload-complete .fileUpload-file {
@@ -1527,7 +1527,7 @@ table .previewExample-container > div {
   z-index: 100;
 }
 .previewExample-video-icon > i {
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   font-size: 18px;
   height: 40px;
   line-height: 40px;
@@ -1576,7 +1576,7 @@ table .previewExample-container > div {
 }
 .previewExample-totalCount > span {
   font-size: 12px;
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 .previewExample-item {
   overflow: hidden;
@@ -1591,7 +1591,7 @@ table .previewExample-container > div {
   width: auto;
   height: 22px;
   background-color: var(--cl-overlay, rgba(0, 0, 0, 0.55));
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   text-align: center;
   transition: all 0.2s ease;
 }