Minor design updates to multi select (#43292)

* Add color to icon directly

* Remove unused css file

* Only show info icon when the field is focussed

* Use metabase blue for background on value tags

* Use larger font size for value labels

* Make the value labels bold

* Tweak padding on search input

* Move custom MultiAutocomplete styles to MultiSelect overrides and adapt to accept xs size too

frontend/src/metabase/ui/components/inputs/MultiAutocomplete/MultiAutocomplete.module.css

-.icon {
-  fill: var(--color-text-light);
-}

frontend/src/metabase/ui/components/inputs/MultiAutocomplete/MultiAutocomplete.tsx

@@ -5,9 +5,9 @@ import type { ClipboardEvent, FocusEvent } from "react";
 import { useMemo, useState } from "react";
 import { t } from "ttag";
 
+import { color } from "metabase/lib/colors";
 import { Icon } from "metabase/ui";
 
-import styles from "./MultiAutocomplete.module.css";
 import { parseValues, unique } from "./utils";
 
 export type MultiAutocompleteProps = Omit<MultiSelectProps, "shouldCreate"> & {
@@ -150,7 +150,7 @@ export function MultiAutocomplete({
     }
   };
 
-  const info = (
+  const info = isFocused ? (
     <Tooltip
       label={
         <>
@@ -160,8 +160,10 @@ export function MultiAutocomplete({
         </>
       }
     >
-      <Icon name="info_filled" className={styles.icon} />
+      <Icon name="info_filled" fill={color("text-light")} />
     </Tooltip>
+  ) : (
+    <span />
   );
 
   return (

frontend/src/metabase/ui/components/inputs/MultiSelect/MultiSelect.styled.tsx

@@ -12,8 +12,13 @@ import { SelectDropdown } from "../Select/SelectDropdown";
 import { SelectItem } from "../Select/SelectItem";
 
 const SIZES = {
-  xs: rem(16),
-  md: rem(24),
+  xs: rem(30),
+  md: rem(38),
+};
+
+const VALUE_SIZES = {
+  xs: rem(20),
+  md: rem(28),
 };
 
 export const getMultiSelectOverrides =
@@ -37,14 +42,24 @@ export const getMultiSelectOverrides =
         ...getSelectInputOverrides(theme),
         ...getSelectItemsOverrides(theme, size),
         values: {
+          boxSizing: "border-box",
           minHeight: getSize({ size, sizes: SIZES }),
           marginLeft: 0,
-          gap: theme.spacing.sm,
+          gap: theme.spacing.xs,
+          padding: theme.spacing.xs,
+          alignItems: "center",
+        },
+        input: {
+          padding: 0,
+          boxSizing: "border-box",
         },
         value: {
           margin: 0,
         },
         searchInput: {
+          minHeight: getSize({ size, sizes: VALUE_SIZES }),
+          padding: 0,
+          marginLeft: theme.spacing.sm,
           "&::placeholder": {
             color: invalid
               ? theme.fn.themeColor("error")
@@ -55,17 +70,17 @@ export const getMultiSelectOverrides =
           },
         },
         defaultValue: {
-          height: getSize({ size, sizes: SIZES }),
-          paddingLeft: theme.spacing.sm,
-          paddingRight: theme.spacing.sm,
-          fontWeight: "normal",
-          fontSize: theme.fontSizes.xs,
+          padding: 0,
+          paddingInline: theme.spacing.sm,
+          height: getSize({ size, sizes: VALUE_SIZES }),
+          fontWeight: "bold",
+          fontSize: getSize({ size, sizes: theme.fontSizes }),
           borderRadius: theme.radius.xs,
-          color: theme.fn.themeColor("text-dark"),
+          color: theme.fn.themeColor("brand"),
           backgroundColor: theme.fn.themeColor("bg-medium"),
         },
         defaultValueRemove: {
-          color: theme.fn.themeColor("text-dark"),
+          color: theme.fn.themeColor("brand"),
           width: rem(12),
           height: rem(12),
           minWidth: rem(12),