@cldemo/ui-kit 1.1.5 → 1.1.6

package/buildLibs/styles/Web/ClXeditable.css

@@ -331,7 +331,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;
@@ -471,7 +471,7 @@
 .checkbox label:before {
     background-color: transparent;
     border-radius: 3px;
-    border: 1px solid var(--cl-border, #cfcfcf);
+    border: 1px solid var(--cl-border-control, #cfcfcf);
     content: "";
     display: inline-block;
     height: 17px;
@@ -489,7 +489,7 @@
 }
 
 .checkbox input[type="checkbox"]:disabled+label:before {
-    border-color: var(--cl-border, #cfcfcf) !important;
+    border-color: var(--cl-border-disabled, #cfcfcf) !important;
 }
 
 .checkbox input[type="checkbox"]:checked:disabled+label:before {
@@ -562,7 +562,7 @@
 
 .checkbox-default input[type="checkbox"].indeterminate+label:after,
 .checkbox-default input[type="checkbox"]:checked+label:after {
-    color: var(--cl-bg, #ffffff);
+    color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .checkbox input[type="checkbox"]:disabled,
@@ -693,7 +693,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 {
@@ -998,7 +998,7 @@
 }
 
 .dropdownLayer-theme-list .dropdownLayer-text {
-  height: 36px;
+  height: 38px;
   box-sizing: border-box;
   display: inline-block;
   margin: 0;
@@ -1018,8 +1018,8 @@
 }
 
 .dropdownLayer-text > .dropdownLayer-text-container {
-  height: 36px;
-  border: 1px solid var(--cl-border, #cfcfcf);
+  height: 38px;
+  border: 1px solid var(--cl-border-control, #cfcfcf);
   background-color: transparent !important;
   box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.075);
   padding: 6px 0 6px 12px;
@@ -1135,7 +1135,7 @@
   /* 宽度归使用方控制（跟随容器）；small 尺寸由 .inputNumberStepper-small 覆盖，DateTime 时钟区由 clock-set 规则覆盖 */
   width: 100%;
   border-radius: 4px;
-  border: 1px solid var(--cl-border, #cfcfcf);
+  border: 1px solid var(--cl-border-control, #cfcfcf);
 }
 
 .panel-input-number-stepper:hover,
@@ -1147,7 +1147,7 @@
 .panel-input-number-stepper.inputNumberStepper-disabled:hover,
 .panel-input-number-stepper.inputNumberStepper-disabled.inputNumberStepper-focus {
   background-color: var(--cl-bg-muted, #f5f5f5);
-  border-color: var(--cl-border, #cfcfcf);
+  border-color: var(--cl-border-disabled, #cfcfcf);
 }
 
 /* input */
@@ -1181,7 +1181,7 @@
 }
 
 .inputNumberStepper-controls.inputNumberStepper-controls-disabled > i {
-  color: var(--cl-border, #cfcfcf) !important;
+  color: var(--cl-text-disabled, #c8c9cc) !important;
 }
 
 .inputNumberStepper-controls > i {
@@ -1204,7 +1204,7 @@
 }
 
 .inputNumberStepper-controls.inputNumberStepper-controls-disabled:hover > i {
-  color: var(--cl-border, #cfcfcf) !important;
+  color: var(--cl-text-disabled, #c8c9cc) !important;
 }
 
 /* controls */
@@ -1241,14 +1241,14 @@
   left: 0;
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
-  border-right: 1px solid var(--cl-border, #cfcfcf);
+  border-right: 1px solid var(--cl-border-control, #cfcfcf);
 }
 
 .inputNumberStepper-btn-leftRight .inputNumberStepper-add {
   right: 0;
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
-  border-left: 1px solid var(--cl-border, #cfcfcf);
+  border-left: 1px solid var(--cl-border-control, #cfcfcf);
 }
 
 /* leftRight + btnShape="circle"：按钮圆形胶囊（去容器边框、按钮半圆、边框移到输入框、按钮与输入框留间距） */
@@ -1266,7 +1266,7 @@
 
 /* 输入框边框（circle 专属，square 维持无边框 + 容器边框） */
 .inputNumberStepper-btnShape-circle > .panel-input.input-icon > div {
-  border: 1px solid var(--cl-border, #cfcfcf);
+  border: 1px solid var(--cl-border-control, #cfcfcf);
   border-radius: 4px;
 }
 
@@ -1285,7 +1285,7 @@
 .panel-input-number-stepper.inputNumberStepper-btnShape-circle.inputNumberStepper-disabled.inputNumberStepper-focus
   > .panel-input.input-icon
   > div {
-  border-color: var(--cl-border, #cfcfcf);
+  border-color: var(--cl-border-control, #cfcfcf);
 }
 
 .inputNumberStepper-btnShape-circle .inputNumberStepper-controls {
@@ -1320,14 +1320,14 @@
 .inputNumberStepper-btn-upDown .inputNumberStepper-subtract {
   top: 0;
   border-top-right-radius: 4px;
-  border-left: 1px solid var(--cl-border, #cfcfcf);
-  border-bottom: 1px solid var(--cl-border, #cfcfcf);
+  border-left: 1px solid var(--cl-border-control, #cfcfcf);
+  border-bottom: 1px solid var(--cl-border-control, #cfcfcf);
 }
 
 .inputNumberStepper-btn-upDown .inputNumberStepper-add {
   bottom: 0;
   border-bottom-right-radius: 4px;
-  border-left: 1px solid var(--cl-border, #cfcfcf);
+  border-left: 1px solid var(--cl-border-control, #cfcfcf);
 }
 
 /* focus */
@@ -1508,20 +1508,20 @@
 }
 
 .datetime-panel-body table tr td.active {
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   background-color: var(--cl-primary, #1088f0);
   border-color: var(--cl-primary-active, #0a6fc4);
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
 }
 
 .datetime-panel-body table tr td.active:focus {
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   background-color: var(--cl-primary-active, #0a6fc4);
   border-color: var(--cl-primary-active, #0a6fc4);
 }
 
 .datetime-panel-body table tr td.active:hover {
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   background-color: var(--cl-primary-hover, #3d9ef5);
   border-color: var(--cl-primary-hover, #3d9ef5);
 }
@@ -1561,7 +1561,7 @@
 
 .datetime-panel-body table tr td span.active,
 .datetime-panel-body table tr td span.active:hover {
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   background-color: var(--cl-primary, #1088f0);
   border-color: var(--cl-primary-active, #0a6fc4);
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
@@ -1690,7 +1690,7 @@
   color: #495057;
   background-color: var(--cl-bg, #ffffff);
   background-clip: padding-box;
-  border: 1px solid #ced4da;
+  border: 1px solid var(--cl-border-control, #cfcfcf);
   border-radius: 4px;
   transition:
     border-color 0.15s ease-in-out,
@@ -1763,7 +1763,7 @@
 .calendar-quick li:hover {
   background: var(--cl-primary, #1088f0);
   border: 1px solid var(--cl-primary, #1088f0);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 /* 键盘聚焦：快捷项复用 hover 的主色背景作为焦点视觉（不新增颜色），
@@ -1772,13 +1772,13 @@
   outline: none;
   background: var(--cl-primary, #1088f0);
   border: 1px solid var(--cl-primary, #1088f0);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .calendar-quick li.active {
   background: var(--cl-primary, #1088f0);
   border: 1px solid var(--cl-primary, #1088f0);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .calendar-quick li.calendar-quick-special:hover {
@@ -1791,7 +1791,7 @@
 .calendar-quick li.calendar-quick-special.active:hover {
   background: var(--cl-primary, #1088f0);
   border: 1px solid var(--cl-primary, #1088f0);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   cursor: default;
 }
 
@@ -1915,7 +1915,7 @@
 
 .times-clock .clock-nums .clock-num:hover {
   background-color: var(--cl-primary, #1088f0);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .times-clock .clock-nums .clock-num.clock-num1 {
@@ -2127,7 +2127,7 @@
   line-height: 30px;
   border-radius: 4px;
   border: 1px solid var(--cl-primary, #1088f0);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   background-color: var(--cl-primary, #1088f0);
   cursor: pointer;
 }
@@ -2221,26 +2221,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-ellipsis {
     position: relative;
@@ -2436,7 +2436,7 @@
   > .calendar-text
   > .time-input-base
   > .form-control {
-  border-color: var(--cl-border, #cfcfcf) !important;
+  border-color: var(--cl-border-control, #cfcfcf) !important;
 }
 
 .panel-form-validate[data-validate-error]
@@ -2531,7 +2531,7 @@
   > .panel-form-validate[data-validate-success]
   > .panel-select
   .select-inTag.select-inTag-open {
-  border-color: var(--cl-border, #cfcfcf) !important;
+  border-color: var(--cl-border-control, #cfcfcf) !important;
 }
 
 .panel-form-validate[data-validate-error]
@@ -2541,7 +2541,7 @@
   .panel-select
   .dropdownLayer-text-container
   > .dropdownLayer-text-arrow {
-  color: var(--cl-border, #cfcfcf) !important;
+  color: var(--cl-border-focus, #8c8c8c) !important;
 }
 .badge {
     display: inline-block;
@@ -2552,7 +2552,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;
@@ -2575,19 +2575,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 {
@@ -2614,7 +2632,7 @@
   color: #495057;
   background-color: var(--cl-bg, #ffffff);
   background-clip: padding-box;
-  border: 1px solid #ced4da;
+  border: 1px solid var(--cl-border-control, #cfcfcf);
   border-radius: 4px;
   transition:
     border-color 0.15s ease-in-out,
@@ -2631,6 +2649,7 @@
 }
 .panel-input-textarea textarea.text-area:disabled {
   background-color: var(--cl-bg-muted, #f5f5f5);
+  border-color: var(--cl-border-disabled, #cfcfcf);
   opacity: 1;
 }
 .panel-input-textarea textarea.text-area::placeholder {
@@ -2705,7 +2724,7 @@ textarea.text-area {
 .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;
@@ -2734,7 +2753,7 @@ textarea.text-area {
 
 .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 {
@@ -2756,7 +2775,7 @@ textarea.text-area {
   position: absolute;
   right: 3px;
   top: 6px;
-  color: var(--cl-border, #cfcfcf);
+  color: var(--cl-border-focus, #8c8c8c);
   cursor: pointer;
   font-size: 14px;
   opacity: 1;
@@ -2915,7 +2934,7 @@ textarea.text-area {
 }
 
 .clipboard-btn {
-    color: var(--cl-bg, #ffffff);
+    color: var(--cl-text-on-accent, #1a1a1a);
     cursor: pointer;
 }
 
@@ -3037,7 +3056,7 @@ textarea.text-area {
 
 .panel-input-tag .inputTag-container.inputTag-multiple {
   padding: 7px 20px 7px 7px !important;
-  border: 1px solid var(--cl-border, #cfcfcf);
+  border: 1px solid var(--cl-border-control, #cfcfcf);
   background-color: transparent !important;
   box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.075);
   border-radius: 4px;
@@ -3090,7 +3109,7 @@ textarea.text-area {
 }
 
 .inputTag-container .inputTag-operate .badge {
-  background-color: var(--cl-border, #cfcfcf) !important;
+  background-color: var(--cl-bg-press, #cfcfcf) !important;
   min-width: 12px;
   min-height: 12px;
   font-size: 10px;
@@ -3161,10 +3180,10 @@ textarea.text-area {
 }
 
 .dropdownLayer-list-checkboxAll {
-  border-bottom: 1px solid var(--cl-border, #cfcfcf);
+  border-bottom: 1px solid var(--cl-border-control, #cfcfcf);
   padding: 7px 0 5px 7px;
   text-align: left;
-  height: 36px;
+  height: 38px;
 }
 
 .dropdownLayer-list-body {
@@ -3318,7 +3337,7 @@ textarea.text-area {
 .radio label:before {
   background-color: transparent;
   border-radius: 50%;
-  border: 1px solid var(--cl-border, #cfcfcf);
+  border: 1px solid var(--cl-border-control, #cfcfcf);
   content: '';
   display: inline-block;
   height: 17px;
@@ -3336,7 +3355,7 @@ textarea.text-area {
 }
 
 .radio input[type='radio']:disabled + label:before {
-  border-color: var(--cl-border, #cfcfcf) !important;
+  border-color: var(--cl-border-disabled, #cfcfcf) !important;
 }
 
 .radio label::after {
@@ -3430,7 +3449,7 @@ textarea.text-area {
 }
 
 .select-inText .select-inText-num > .badge {
-  background-color: var(--cl-border, #cfcfcf) !important;
+  background-color: var(--cl-bg-press, #cfcfcf) !important;
   cursor: pointer;
   margin-left: 5px;
   margin-bottom: 1px;
@@ -3467,7 +3486,7 @@ textarea.text-area {
 
 .select-inDropdown .select-inTag {
   background-color: var(--cl-bg, #ffffff);
-  border: 1px solid var(--cl-border, #cfcfcf);
+  border: 1px solid var(--cl-border-control, #cfcfcf);
   border-radius: 4px;
   box-sizing: border-box;
   display: none;
@@ -3558,7 +3577,7 @@ textarea.text-area {
   border-bottom: 1px solid var(--cl-border, #cfcfcf);
   padding: 7px 0 5px 7px;
   text-align: left;
-  height: 36px;
+  height: 38px;
 }
 
 /* RecycleScroller 虚拟滚动容器（max-height 需与 Dropdown.vue 中 MAX_DROPDOWN_HEIGHT 常量保持同步） */
@@ -3701,7 +3720,7 @@ textarea.text-area {
 
 .select-inTag .select-inTag-title {
   padding: 0px 4px 0px 6px;
-  height: 36px;
+  height: 38px;
   border-bottom: 1px solid var(--cl-border, #cfcfcf);
   display: flex;
   flex-direction: row;
@@ -3755,7 +3774,7 @@ textarea.text-area {
   display: block;
   padding: 5px 16px;
   border-radius: 0 !important;
-  border: 1px solid var(--cl-border, #cfcfcf);
+  border: 1px solid var(--cl-border-control, #cfcfcf);
   color: var(--cl-text-primary, #323233);
   background-color: transparent;
   text-decoration: none;
@@ -3800,7 +3819,7 @@ textarea.text-area {
 .panel-select-tag > .selectTag-container > .selectTag-item.selectTag-disabled:hover,
 .panel-select-tag > .selectTag-container > .selectTag-item.selectTag-active.selectTag-disabled {
   cursor: no-drop;
-  border-color: var(--cl-border, #cfcfcf);
+  border-color: var(--cl-border-control, #cfcfcf);
   background-color: var(--cl-bg-subtle, #fafafa);
 }
 .panel-select-tag > .selectTag-container > .selectTag-item.selectTag-disabled > span {

package/buildLibs/styles/Web/__directive__/Tooltip.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/__provide__/Alert.css

@@ -521,7 +521,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;

package/buildLibs/styles/Web/__provide__/Notify.css

@@ -63,7 +63,7 @@
   display: flex;
   align-items: center;
   height: 21px;
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .notify-container > .notify-item .notify-text {
@@ -76,7 +76,7 @@
   font-weight: normal;
   max-width: 360px;
   vertical-align: middle;
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   word-break: break-all;
 }
 
@@ -95,7 +95,7 @@
 
 .notify-container > .notify-item .notify-close:hover {
   opacity: 1;
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .notify-progress .notify-item {

package/buildLibs/styles/Web/__provide__/Preview.css

@@ -10,7 +10,7 @@
 }
 
 .clipboard-btn {
-    color: var(--cl-bg, #ffffff);
+    color: var(--cl-text-on-accent, #1a1a1a);
     cursor: pointer;
 }
 
@@ -48,7 +48,7 @@
   box-sizing: border-box;
   user-select: none;
   background-color: var(--cl-text-primary, #323233);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   border-color: var(--cl-bg, #ffffff);
   transition: all 300ms linear;
   z-index: 1;
@@ -131,7 +131,7 @@
   height: 100%;
   text-align: justify;
   font-size: 23px;
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   display: flex;
   align-items: center;
   justify-content: space-around;