feat(input): group-label text-color & border customization

src/input/src/InputGroupLabel.tsx

@@ -38,9 +38,9 @@ export default defineComponent({
           self: {
             groupLabelColor,
             borderRadius,
-            textColor,
+            groupLabelTextColor,
             lineHeight,
-            border,
+            groupLabelBorder,
             [createKey('fontSize', size)]: fontSize,
             [createKey('height', size)]: height
           }
@@ -48,9 +48,9 @@ export default defineComponent({
         return {
           '--bezier': cubicBezierEaseInOut,
           '--group-label-color': groupLabelColor,
-          '--border': border,
+          '--group-label-border': groupLabelBorder,
           '--border-radius': borderRadius,
-          '--text-color': textColor,
+          '--group-label-text-color': groupLabelTextColor,
           '--font-size': fontSize,
           '--line-height': lineHeight,
           '--height': height

src/input/src/styles/input-group-label.cssr.ts

@@ -4,9 +4,10 @@ import { cB, cE } from '../../../_utils/cssr'
 // --bezier
 // --group-label-color
 // --border-radius
-// --text-color
+// --group-label-text-color
 // --font-size
 // --height
+// --group-label-border
 export default cB('input-group-label', `
   position: relative;
   user-select: none;
@@ -15,7 +16,7 @@ export default cB('input-group-label', `
   display: inline-block;
   border-radius: var(--border-radius);
   background-color: var(--group-label-color);
-  color: var(--text-color);
+  color: var(--group-label-text-color);
   font-size: var(--font-size);
   line-height: var(--height);
   height: var(--height);
@@ -31,7 +32,7 @@ export default cB('input-group-label', `
     top: 0;
     bottom: 0;
     border-radius: inherit;
-    border: var(--border);
+    border: var(--group-label-border);
     transition: border-color .3s var(--bezier);
   `)
 ])

src/input/styles/dark.ts

@@ -51,12 +51,14 @@ const inputDark: InputTheme = {
       textColor: textColor2,
       textColorDisabled: textColor4,
       textDecorationColor: textColor2,
+      groupLabelTextColor: textColor2,
       caretColor: primaryColor,
       placeholderColor: textColor4,
       placeholderColorDisabled: textColor5,
       color: inputColor,
       colorDisabled: inputColorDisabled,
       colorFocus: changeColor(primaryColor, { alpha: 0.1 }),
+      groupLabelBorder: '1px solid transparent',
       border: '1px solid transparent',
       borderHover: `1px solid ${primaryColorHover}`,
       borderDisabled: '1px solid transparent',

src/input/styles/light.ts

@@ -48,6 +48,7 @@ const self = (vars: ThemeCommonVars) => {
     borderRadius,
     iconSize: '16px',
     groupLabelColor: actionColor,
+    groupLabelTextColor: textColor2,
     textColor: textColor2,
     textColorDisabled: textColor4,
     textDecorationColor: textColor2,
@@ -57,6 +58,7 @@ const self = (vars: ThemeCommonVars) => {
     color: inputColor,
     colorDisabled: inputColorDisabled,
     colorFocus: inputColor,
+    groupLabelBorder: `1px solid ${borderColor}`,
     border: `1px solid ${borderColor}`,
     borderHover: `1px solid ${primaryColorHover}`,
     borderDisabled: `1px solid ${borderColor}`,

themes/tusimple/src/theme-overrides-dark.ts

@@ -17,7 +17,6 @@ function createPressedColor (
 // TODO
 // 2. input suffix & prefix text color
 // 3. input icon color?
-// 4. input group label text color
 // 5. table body color => td color
 // 6. notification size customization
 // 7. upload style
@@ -308,7 +307,8 @@ export const themeOverridesDark: GlobalThemeOverrides = {
     textColor: '#FFFFFF',
     placeholderColor: '#848484',
     lineHeight: '22px',
-    groupLabelColor: '#5B5B5B'
+    groupLabelColor: '#5B5B5B',
+    groupLabelTextColor: '#FFF'
   },
   InternalSelection: {
     heightMedium: '32px',