UI Library text updates (#35833)

* use normal font weight for 'values'

* update label styles across inputs

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

@@ -62,7 +62,6 @@ export const getCheckboxOverrides = (): MantineThemeOverride["components"] => ({
         ref: getStylesRef("label"),
         color: theme.colors.text[2],
         fontSize: theme.fontSizes.md,
-        fontWeight: "bold",
         lineHeight: theme.lineHeight,
       },
       description: {

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

 import type { MantineThemeOverride } from "@mantine/core";
+import { getSize } from "@mantine/core";
 
 export const getDateInputOverrides =
   (): MantineThemeOverride["components"] => ({
@@ -6,7 +7,7 @@ export const getDateInputOverrides =
       defaultProps: {
         size: "md",
       },
-      styles: theme => ({
+      styles: (theme, _, { size = "md" }) => ({
         wrapper: {
           "&:not(:only-child)": {
             marginTop: theme.spacing.xs,
@@ -15,6 +16,10 @@ export const getDateInputOverrides =
         calendar: {
           padding: `${theme.spacing.sm} ${theme.spacing.md}`,
         },
+        label: {
+          color: theme.colors.text[1],
+          fontSize: getSize({ size, sizes: theme.fontSizes }),
+        },
       }),
     },
   });

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

 import type { MantineThemeOverride } from "@mantine/core";
+import { getSize } from "@mantine/core";
 import { FileInputValue } from "./FileInputValue";
 
 export const getFileInputOverrides =
@@ -8,10 +9,14 @@ export const getFileInputOverrides =
         size: "md",
         valueComponent: FileInputValue,
       },
-      styles: theme => ({
+      styles: (theme, _, { size = "md" }) => ({
         wrapper: {
           marginTop: theme.spacing.xs,
         },
+        label: {
+          color: theme.colors.text[1],
+          fontSize: getSize({ size, sizes: theme.fontSizes }),
+        },
       }),
     },
   });

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

@@ -59,7 +59,6 @@ export const getRadioOverrides = (): MantineThemeOverride["components"] => ({
         ref: getStylesRef("label"),
         color: theme.colors.text[2],
         fontSize: theme.fontSizes.md,
-        fontWeight: "bold",
       },
       description: {
         ref: getStylesRef("description"),

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

-import { px, rem } from "@mantine/core";
+import { px, rem, getSize } from "@mantine/core";
 import type { MantineThemeOverride } from "@mantine/core";
 import { SelectItem } from "./SelectItem";
 
@@ -10,10 +10,14 @@ export const getSelectOverrides = (): MantineThemeOverride["components"] => ({
       itemComponent: SelectItem,
       maxDropdownHeight: 512,
     },
-    styles: theme => ({
+    styles: (theme, _, { size = "md" }) => ({
       wrapper: {
         marginTop: theme.spacing.xs,
       },
+      label: {
+        color: theme.colors.text[1],
+        fontSize: getSize({ size, sizes: theme.fontSizes }),
+      },
       rightSection: {
         svg: {
           color: theme.colors.text[2],

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

@@ -69,7 +69,6 @@ export const getSwitchOverrides = (): MantineThemeOverride["components"] => ({
         },
         label: {
           padding: 0,
-          fontWeight: 700,
           fontSize: getSize({ size, sizes: LABEL_FONT_SIZES }),
           lineHeight: getSize({ size, sizes: LABEL_LINE_HEIGHT }),
           color: theme.colors.text[2],

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

 import type { MantineThemeOverride } from "@mantine/core";
+import { getSize } from "@mantine/core";
 
 export const getTextInputOverrides =
   (): MantineThemeOverride["components"] => ({
@@ -6,10 +7,14 @@ export const getTextInputOverrides =
       defaultProps: {
         size: "md",
       },
-      styles: theme => ({
+      styles: (theme, _, { size = "md" }) => ({
         wrapper: {
           marginTop: theme.spacing.xs,
         },
+        label: {
+          color: theme.colors.text[1],
+          fontSize: getSize({ size, sizes: theme.fontSizes }),
+        },
       }),
     },
   });

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

 import type { MantineThemeOverride } from "@mantine/core";
+import { getSize } from "@mantine/core";
 
 export const getTextareaOverrides = (): MantineThemeOverride["components"] => ({
   Textarea: {
     defaultProps: {
       size: "md",
     },
-    styles: theme => ({
+    styles: (theme, _, { size = "md" }) => ({
       wrapper: {
         marginTop: theme.spacing.xs,
       },
+      label: {
+        color: theme.colors.text[1],
+        fontSize: getSize({ size, sizes: theme.fontSizes }),
+      },
     }),
   },
 });