@cldemo/ui-kit 1.1.4 → 1.1.6

package/buildLibs/styles/Web/ClSelectmove.css

@@ -7,7 +7,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;
@@ -30,19 +30,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 {
@@ -321,7 +339,7 @@
 }
 
 .dropdownLayer-theme-list .dropdownLayer-text {
-  height: 36px;
+  height: 38px;
   box-sizing: border-box;
   display: inline-block;
   margin: 0;
@@ -341,8 +359,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;
@@ -401,8 +419,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
@@ -558,7 +577,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;
@@ -576,7 +595,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 {
@@ -649,7 +668,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,
@@ -779,7 +798,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 {
@@ -837,7 +856,7 @@
   flex-wrap: nowrap;
 }
 .panel-selectmove .selectmove-text-num > .badge {
-  background-color: var(--cl-border, #cfcfcf) !important;
+  background-color: var(--cl-bg-press, #cfcfcf) !important;
   margin-left: 3px;
 }
 .selectmove-disabled .selectmove-tree-item .selectmove-tree-body > ul > li {
@@ -867,7 +886,7 @@
 .selectmove-result .selectmove-result-container {
   width: 175px;
   background: transparent;
-  border: 1px solid var(--cl-border, #cfcfcf);
+  border: 1px solid var(--cl-border-control, #cfcfcf);
   border-radius: 4px;
 }
 .selectmove-result-head {
@@ -881,7 +900,7 @@
   box-sizing: border-box;
   height: 35px;
   padding: 5px;
-  border-bottom: 1px solid var(--cl-border, #cfcfcf);
+  border-bottom: 1px solid var(--cl-border-control, #cfcfcf);
   font-size: 14px;
   color: var(--cl-text-primary, #323233);
 }
@@ -982,7 +1001,7 @@
 }
 .selectmove-search-dropdown {
   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;
@@ -1066,7 +1085,7 @@
   margin-right: 3px;
   margin-bottom: 3px;
   background: transparent;
-  border: 1px solid var(--cl-border, #cfcfcf);
+  border: 1px solid var(--cl-border-control, #cfcfcf);
   border-radius: 4px;
 }
 .selectmove-tree > .selectmove-tree-item:first-child {
@@ -1082,7 +1101,7 @@
   box-sizing: border-box;
   height: 35px;
   padding: 7px 6px 6px 6px;
-  border-bottom: 1px solid var(--cl-border, #cfcfcf);
+  border-bottom: 1px solid var(--cl-border-control, #cfcfcf);
   font-size: 14px;
   color: var(--cl-text-primary, #323233);
 }

package/buildLibs/styles/Web/ClTable.css

@@ -145,7 +145,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;
@@ -163,7 +163,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 {
@@ -236,7 +236,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,
@@ -367,7 +367,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 {
@@ -460,7 +460,7 @@
 .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;
@@ -478,7 +478,7 @@
 }
 
 .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 {
@@ -612,7 +612,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;
@@ -635,19 +635,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 {
@@ -927,7 +945,7 @@
 }
 
 .dropdownLayer-theme-list .dropdownLayer-text {
-  height: 36px;
+  height: 38px;
   box-sizing: border-box;
   display: inline-block;
   margin: 0;
@@ -947,8 +965,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;
@@ -1007,8 +1025,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
@@ -1153,7 +1172,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;
@@ -1182,7 +1201,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 {
@@ -1204,7 +1223,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;
@@ -1371,7 +1390,7 @@
 }
 
 .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;
@@ -1408,7 +1427,7 @@
 
 .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;
@@ -1499,7 +1518,7 @@
   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 常量保持同步） */
@@ -1642,7 +1661,7 @@
 
 .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;
@@ -1727,7 +1746,7 @@
 
 .pagination > li > span:hover {
   background-color: var(--cl-primary, #1088f0);
-  color: var(--cl-bg, #ffffff);
+  color: var(--cl-text-on-accent, #1a1a1a);
   outline: none;
 }
 
@@ -1758,7 +1777,7 @@
   border-color: var(--cl-primary, #1088f0) !important;
   text-decoration: none;
   border-radius: 5px;
-  color: var(--cl-bg, #ffffff) !important;
+  color: var(--cl-text-on-accent, #1a1a1a) !important;
   cursor: default;
   outline: none;
 }
@@ -2073,7 +2092,7 @@
 
 /* .tip */
 .th-tip > .th-tip-icon {
-  color: var(--cl-border, #cfcfcf);
+  color: var(--cl-text-tertiary, #aaaaaa);
   margin-left: 2px;
 }
 
@@ -2110,7 +2129,7 @@
 
 /* .tip - 单元格侧（与 th 侧同构；td 需 position: relative 承载 absolute 图标） */
 .table-default > tbody > tr > td.td-tip > .td-tip-icon {
-  color: var(--cl-border, #cfcfcf);
+  color: var(--cl-text-tertiary, #aaaaaa);
   margin-left: 2px;
 }
 

package/buildLibs/styles/Web/ClTableEdit.css

@@ -119,7 +119,7 @@
 .panel-table-edit > .tableedit-table > tbody > tr > td > .panel-date-time
   .dropdownLayer-text.dropdownLayer-text-open
   > .dropdownLayer-text-container {
-  border: 1px solid var(--cl-border, #cfcfcf) !important;
+  border: 1px solid var(--cl-border-control, #cfcfcf) !important;
   background-color: var(--cl-bg-muted, #f5f5f5) !important;
   box-shadow: 0 1px 1px rgba(96, 96, 96, 0.1) inset, 0 2px 8px rgba(52, 52, 52, 0.2) !important;
   cursor: auto;