@cldemo/ui-kit 1.1.4 → 1.1.6

package/buildLibs/styles/Web/ClDatetime.css

@@ -362,7 +362,7 @@
 }
 
 .dropdownLayer-theme-list .dropdownLayer-text {
-  height: 36px;
+  height: 38px;
   box-sizing: border-box;
   display: inline-block;
   margin: 0;
@@ -382,8 +382,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;
@@ -442,8 +442,9 @@
   white-space: nowrap;
 }
 
+/* 伪占位（span 模拟）：颜色与原生 placeholder 共用同一 token，避免与 .form-control::placeholder 走偏 */
 .dropdownLayer-text-container > .dropdownLayer-text-render > .dropdownLayer-placeholder {
-  color: #6d767e;
+  color: var(--cl-text-tertiary, #aaaaaa);
 }
 
 .panel-dropdownlayer.dropdownLayer-disabled
@@ -498,7 +499,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,
@@ -510,7 +511,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 */
@@ -544,7 +545,7 @@
 }
 
 .inputNumberStepper-controls.inputNumberStepper-controls-disabled > i {
-  color: var(--cl-border, #cfcfcf) !important;
+  color: var(--cl-text-disabled, #c8c9cc) !important;
 }
 
 .inputNumberStepper-controls > i {
@@ -567,7 +568,7 @@
 }
 
 .inputNumberStepper-controls.inputNumberStepper-controls-disabled:hover > i {
-  color: var(--cl-border, #cfcfcf) !important;
+  color: var(--cl-text-disabled, #c8c9cc) !important;
 }
 
 /* controls */
@@ -604,14 +605,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"：按钮圆形胶囊（去容器边框、按钮半圆、边框移到输入框、按钮与输入框留间距） */
@@ -629,7 +630,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;
 }
 
@@ -648,7 +649,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 {
@@ -683,14 +684,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 */
@@ -1025,7 +1026,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;
@@ -1197,20 +1198,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);
 }
@@ -1250,7 +1251,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);
@@ -1379,7 +1380,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,
@@ -1452,7 +1453,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 的主色背景作为焦点视觉（不新增颜色），
@@ -1461,13 +1462,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 {
@@ -1480,7 +1481,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;
 }
 
@@ -1604,7 +1605,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 {
@@ -1816,7 +1817,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;
 }

package/buildLibs/styles/Web/ClDropdownMenu.css

@@ -269,26 +269,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-dropdown-menu .dropdownLayer-dropdown-theme-popup.dropdownLayer-dropdown > ul {
   margin: 2px 0;

package/buildLibs/styles/Web/ClDropdownPopup.css

@@ -269,26 +269,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-dropdown-popup {
   position: relative;

package/buildLibs/styles/Web/ClEchartsLineAxisTag.css

@@ -363,7 +363,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/ClFileUpload.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;
@@ -530,7 +530,7 @@
 }
 
 .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;
@@ -607,7 +607,7 @@
   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);
@@ -752,7 +752,7 @@
   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;
@@ -772,7 +772,7 @@
   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 {
@@ -816,7 +816,7 @@
 }
 
 .fileUpload-complete .download-icon {
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .fileUpload-complete .fileUpload-video {
@@ -861,7 +861,7 @@
 }
 
 .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;
@@ -878,7 +878,7 @@
 }
 
 .fileUpload-complete .fileUpload-video .download-icon {
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
 }
 
 .fileUpload-complete .fileUpload-icon {
@@ -895,7 +895,7 @@
   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 {

package/buildLibs/styles/Web/ClInputTag.css

@@ -362,7 +362,7 @@
 }
 
 .dropdownLayer-theme-list .dropdownLayer-text {
-  height: 36px;
+  height: 38px;
   box-sizing: border-box;
   display: inline-block;
   margin: 0;
@@ -382,8 +382,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;
@@ -442,8 +442,9 @@
   white-space: nowrap;
 }
 
+/* 伪占位（span 模拟）：颜色与原生 placeholder 共用同一 token，避免与 .form-control::placeholder 走偏 */
 .dropdownLayer-text-container > .dropdownLayer-text-render > .dropdownLayer-placeholder {
-  color: #6d767e;
+  color: var(--cl-text-tertiary, #aaaaaa);
 }
 
 .panel-dropdownlayer.dropdownLayer-disabled
@@ -502,7 +503,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;
@@ -525,19 +526,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 {
@@ -560,12 +579,12 @@
   width: 100%;
   font-family: inherit;
   padding: 6px 12px;
-  font-size: 16px;
+  font-size: 0.875rem; /* 对齐 .form-control：文本域与输入框文字同号，占位符字号随之统一 */
   line-height: 1.5;
   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,
@@ -582,10 +601,11 @@
 }
 .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 {
-  color: #6c757d;
+  color: var(--cl-text-tertiary, #aaaaaa);
   opacity: 1;
 }
 textarea.text-area {
@@ -656,7 +676,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;
@@ -685,7 +705,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 {
@@ -707,7 +727,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;
@@ -866,7 +886,7 @@ textarea.text-area {
 }
 
 .clipboard-btn {
-    color: var(--cl-bg, #ffffff);
+    color: var(--cl-text-on-accent, #1a1a1a);
     cursor: pointer;
 }
 
@@ -991,7 +1011,7 @@ textarea.text-area {
 .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;
@@ -1009,7 +1029,7 @@ textarea.text-area {
 }
 
 .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 {
@@ -1082,7 +1102,7 @@ textarea.text-area {
 
 .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,
@@ -1212,7 +1232,7 @@ textarea.text-area {
 }
 
 .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 {
@@ -1317,7 +1337,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;
@@ -1370,7 +1390,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;
@@ -1441,10 +1461,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 {