feat: Input focus style (#45286)

* feat: input focus style

* chore: update

* feat: revert control outline back

components/color-picker/style/index.ts

@@ -20,9 +20,14 @@ export interface ColorPickerToken extends FullToken<'ColorPicker'> {
   colorPickerPresetColorSize: number;
 }
 
-export const genActiveStyle = (token: ColorPickerToken, borderColor: string) => ({
+export const genActiveStyle = (
+  token: ColorPickerToken,
+  borderColor: string,
+  outlineColor: string,
+) => ({
   borderInlineEndWidth: token.lineWidth,
   borderColor,
+  boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${outlineColor}`,
   outline: 0,
 });
 
@@ -78,7 +83,15 @@ const genClearStyle = (
 };
 
 const genStatusStyle = (token: ColorPickerToken): CSSObject => {
-  const { componentCls, colorError, colorWarning, colorErrorHover, colorWarningHover } = token;
+  const {
+    componentCls,
+    colorError,
+    colorWarning,
+    colorErrorHover,
+    colorWarningHover,
+    colorErrorOutline,
+    colorWarningOutline,
+  } = token;
   return {
     [`&${componentCls}-status-error`]: {
       borderColor: colorError,
@@ -86,7 +99,7 @@ const genStatusStyle = (token: ColorPickerToken): CSSObject => {
         borderColor: colorErrorHover,
       },
       [`&${componentCls}-trigger-active`]: {
-        ...genActiveStyle(token, colorError),
+        ...genActiveStyle(token, colorError, colorErrorOutline),
       },
     },
     [`&${componentCls}-status-warning`]: {
@@ -95,7 +108,7 @@ const genStatusStyle = (token: ColorPickerToken): CSSObject => {
         borderColor: colorWarningHover,
       },
       [`&${componentCls}-trigger-active`]: {
-        ...genActiveStyle(token, colorWarning),
+        ...genActiveStyle(token, colorWarning, colorWarningOutline),
       },
     },
   };
@@ -163,6 +176,7 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
     paddingXXS,
     fontSize,
     colorPrimaryHover,
+    controlOutline,
   } = token;
 
   return [
@@ -210,7 +224,7 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
             borderColor: colorPrimaryHover,
           },
           [`&${componentCls}-trigger-active`]: {
-            ...genActiveStyle(token, colorPrimary),
+            ...genActiveStyle(token, colorPrimary, controlOutline),
           },
           '&-disabled': {
             color: colorTextDisabled,

components/input/style/index.ts

@@ -1039,6 +1039,10 @@ export const initComponentToken = (token: GlobalToken): SharedComponentToken =>
     colorFillAlter,
     colorPrimaryHover,
     colorPrimary,
+    controlOutlineWidth,
+    controlOutline,
+    colorErrorOutline,
+    colorWarningOutline,
   } = token;
 
   return {
@@ -1058,9 +1062,9 @@ export const initComponentToken = (token: GlobalToken): SharedComponentToken =>
     addonBg: colorFillAlter,
     activeBorderColor: colorPrimary,
     hoverBorderColor: colorPrimaryHover,
-    activeShadow: `none`,
-    errorActiveShadow: `none`,
-    warningActiveShadow: `none`,
+    activeShadow: `0 0 0 ${controlOutlineWidth}px ${controlOutline}`,
+    errorActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorErrorOutline}`,
+    warningActiveShadow: `0 0 0 ${controlOutlineWidth}px ${colorWarningOutline}`,
     hoverBg: '',
     activeBg: '',
   };

components/select/style/index.tsx

@@ -156,15 +156,21 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
 // ============================== Status ==============================
 const genStatusStyle = (
   rootSelectCls: string,
-  token: {
-    componentCls: string;
-    antCls: string;
+  token: SelectToken & {
     borderHoverColor: string;
     borderActiveColor: string;
+    outlineColor: string;
   },
   overwriteDefaultBorder: boolean = false,
 ): CSSObject => {
-  const { componentCls, borderHoverColor, antCls, borderActiveColor } = token;
+  const {
+    componentCls,
+    borderHoverColor,
+    antCls,
+    borderActiveColor,
+    outlineColor,
+    controlOutlineWidth,
+  } = token;
 
   const overwriteStyle: CSSObject = overwriteDefaultBorder
     ? {
@@ -186,6 +192,7 @@ const genStatusStyle = (
 
           [`${componentCls}-focused& ${componentCls}-selector`]: {
             borderColor: borderActiveColor,
+            boxShadow: `0 0 0 ${controlOutlineWidth}px ${outlineColor}`,
             outline: 0,
           },
         },
@@ -398,6 +405,7 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
       mergeToken<any>(token, {
         borderHoverColor: token.colorPrimaryHover,
         borderActiveColor: token.colorPrimary,
+        outlineColor: token.controlOutline,
       }),
     ),
     genStatusStyle(
@@ -405,6 +413,7 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
       mergeToken<any>(token, {
         borderHoverColor: token.colorErrorHover,
         borderActiveColor: token.colorError,
+        outlineColor: token.colorErrorOutline,
       }),
       true,
     ),
@@ -413,6 +422,7 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
       mergeToken<any>(token, {
         borderHoverColor: token.colorWarningHover,
         borderActiveColor: token.colorWarning,
+        outlineColor: token.colorWarningOutline,
       }),
       true,
     ),