@cldemo/ui-kit 1.1.5 → 1.1.6

package/buildLibs/styles/Web/ClPaginate.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 {
@@ -323,7 +341,7 @@
 }
 
 .dropdownLayer-theme-list .dropdownLayer-text {
-  height: 36px;
+  height: 38px;
   box-sizing: border-box;
   display: inline-block;
   margin: 0;
@@ -343,8 +361,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;
@@ -561,7 +579,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;
@@ -579,7 +597,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 {
@@ -652,7 +670,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,
@@ -782,7 +800,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 {
@@ -858,7 +876,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;
@@ -887,7 +905,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 {
@@ -909,7 +927,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;
@@ -1076,7 +1094,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;
@@ -1113,7 +1131,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;
@@ -1204,7 +1222,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 常量保持同步） */
@@ -1347,7 +1365,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;
@@ -1432,7 +1450,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;
 }
 
@@ -1463,7 +1481,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;
 }

package/buildLibs/styles/Web/ClPreviewExample.css

@@ -252,7 +252,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;
@@ -301,7 +301,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;
@@ -316,7 +316,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;
 }

package/buildLibs/styles/Web/ClSelect.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;
@@ -559,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;
@@ -577,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 {
@@ -650,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,
@@ -780,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 {
@@ -856,7 +874,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;
@@ -885,7 +903,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 {
@@ -907,7 +925,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;
@@ -1074,7 +1092,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;
@@ -1111,7 +1129,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;
@@ -1202,7 +1220,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 常量保持同步） */
@@ -1345,7 +1363,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;

package/buildLibs/styles/Web/ClSelectCascade.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 {
@@ -162,7 +162,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;
@@ -185,19 +185,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 {
@@ -477,7 +495,7 @@
 }
 
 .dropdownLayer-theme-list .dropdownLayer-text {
-  height: 36px;
+  height: 38px;
   box-sizing: border-box;
   display: inline-block;
   margin: 0;
@@ -497,8 +515,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;
@@ -715,7 +733,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;
@@ -733,7 +751,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 {
@@ -806,7 +824,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,
@@ -857,7 +875,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;
@@ -886,7 +904,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 {
@@ -908,7 +926,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;
@@ -1075,7 +1093,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;
@@ -1112,7 +1130,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;
@@ -1203,7 +1221,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 常量保持同步） */
@@ -1346,7 +1364,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;

package/buildLibs/styles/Web/ClSelectTag.css

@@ -14,7 +14,7 @@
   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;
@@ -59,7 +59,7 @@
 .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/ClSelectTree.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;
@@ -741,7 +759,7 @@
 }
 
 .selectTree-inText .selectTree-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;