inputs ui unification (#26593)

frontend/src/metabase/components/InputBlurChange.styled.tsx

 import styled from "@emotion/styled";
+import {
+  inputFocusOutline,
+  inputPadding,
+  inputTypography,
+  numericInputReset,
+} from "metabase/core/style/input";
 import { color } from "metabase/lib/colors";
 
 export const Input = styled.input`
-  border: 1px solid ${color("border")};
+  ${inputPadding};
+  ${inputTypography};
+  border: 1px solid ${() => color("border")};
+  border-radius: 0.5rem;
+  color: ${() => color("text-dark")};
+  transition: border 0.3s;
 
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
+  ${inputFocusOutline};
 
-  &[type="number"] {
-    -moz-appearance: textfield;
-  }
+  ${numericInputReset};
 `;

frontend/src/metabase/core/components/SelectButton/SelectButton.styled.tsx

@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 import { color } from "metabase/lib/colors";
 import Icon from "metabase/components/Icon";
 import { space } from "metabase/styled-components/theme";
+import { inputPadding } from "metabase/core/style/input";
 interface SelectButtonRootProps {
   hasValue: boolean;
   fullWidth: boolean;
@@ -17,11 +18,11 @@ const getColor = ({ hasValue, highlighted }: SelectButtonRootProps) => {
 };
 
 export const SelectButtonRoot = styled.button<SelectButtonRootProps>`
+  ${inputPadding}
   cursor: pointer;
   display: flex;
   width: ${props => (props.fullWidth ? "100%" : "unset")};
   align-items: center;
-  padding: 0.6em;
   border: 1px solid
     ${({ hasValue, highlighted }) =>
       hasValue && highlighted ? color("brand") : color("border")};

frontend/src/metabase/core/style/input.ts

+import { css } from "@emotion/react";
+import { color } from "metabase/lib/colors";
+
+export const inputPadding = css`
+  padding: 0.625rem 0.75rem;
+`;
+
+export const inputTypography = css`
+  font-size: 0.875rem;
+  font-weight: 700;
+`;
+
+export const inputFocusOutline = () => css`
+  &:focus {
+    border-color: ${color("brand")};
+    outline: 2px solid ${color("focus")};
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+`;
+
+export const numericInputReset = () => css`
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &[type="number"] {
+    -moz-appearance: textfield;
+  }
+`;

frontend/src/metabase/visualizations/components/settings/ChartSettingInput.styled.tsx

 import styled from "@emotion/styled";
-import { css } from "@emotion/react";
 import InputBlurChange from "metabase/components/InputBlurChange";
 
-import { color } from "metabase/lib/colors";
-
-export const ChartSettingInputStyle = css`
-  font-size: 0.875rem;
-  border: 1px solid ${color("border")};
-  border-radius: 0.5rem;
-  color: ${color("text-dark")};
-  padding: 0.625rem 0.75rem;
+export const ChartSettingInputBlurChange = styled(InputBlurChange)`
   display: block;
   width: 100%;
-  transition: border 0.3s;
-  font-weight: 700;
-`;
-
-export const ChartSettingInputBlurChange = styled(InputBlurChange)`
-  ${ChartSettingInputStyle}
 `;

frontend/src/metabase/visualizations/components/settings/ChartSettingInputNumeric.styled.tsx

 import styled from "@emotion/styled";
 import Input from "metabase/core/components/Input";
+import {
+  inputFocusOutline,
+  inputPadding,
+  inputTypography,
+  numericInputReset,
+} from "metabase/core/style/input";
 
 export const ChartSettingNumericInput = styled(Input)`
   display: block;
 
   ${Input.Field} {
     width: 100%;
-    padding: 0.625rem 0.75rem;
-    font-size: 0.875rem;
+    ${inputPadding};
+    ${inputTypography};
+    ${inputFocusOutline};
+    ${numericInputReset};
   }
 `;