update caption text style

www/src/Themes.tsx

@@ -83,9 +83,9 @@ export const themeBase = {
     },
     subtitle2: {
       fontFamily: HEADING_FONT,
-      fontSize: toRem(16),
+      fontSize: toRem(14),
       fontWeight: "bold",
-      letterSpacing: toEm(0.4, 16),
+      letterSpacing: toEm(0.4, 14),
       lineHeight: 1.5,
     },
     body1: {

www/src/components/Navigation/Breadcrumbs.tsx

@@ -84,7 +84,7 @@ export default function Breadcrumbs(props: BreadcrumbsProps) {
         // If it’s the first breadcrumb, show with specific style
         const crumbProps = {
           key: index,
-          variant: index === 0 ? "h6" : "caption",
+          variant: index === 0 ? "h6" : "subtitle2",
           component: index === 0 ? "h2" : "div",
           color: index === 0 ? "textPrimary" : "textSecondary",
         } as const;

www/src/components/SideDrawer/Form/FieldWrapper.tsx

@@ -72,7 +72,7 @@ export default function FieldWrapper({
           {type === "debug" ? <DebugIcon /> : getFieldProp("icon", type)}
         </Grid>
         <Grid item xs>
-          <Typography variant="caption">{label}</Typography>
+          <Typography variant="subtitle2">{label}</Typography>
         </Grid>
         {disabled && (
           <Grid item>

www/src/components/Table/ColumnHeader.tsx

@@ -186,7 +186,7 @@ export default function DraggableHeaderRenderer<R>({
       <Tooltip
         title={
           <>
-            <Typography variant="caption" component="p">
+            <Typography variant="subtitle2" component="p">
               {column.key as string}
             </Typography>
             <Typography variant="body2" component="p">
@@ -209,7 +209,7 @@ export default function DraggableHeaderRenderer<R>({
 
       <Grid item xs className={classes.columnNameContainer}>
         <Tooltip
-          title={<Typography variant="caption">{column.name}</Typography>}
+          title={<Typography variant="subtitle2">{column.name}</Typography>}
           enterDelay={1000}
           placement="bottom-start"
           PopperProps={{
@@ -226,7 +226,7 @@ export default function DraggableHeaderRenderer<R>({
           classes={{ tooltip: classes.columnNameTooltip }}
         >
           <Typography
-            variant="caption"
+            variant="subtitle2"
             noWrap
             className={classes.columnName}
             component="div"

www/src/components/Table/Filters/index.tsx

@@ -108,6 +108,10 @@ const useStyles = makeStyles((theme) =>
       marginLeft: -1,
       borderColor: theme.palette.action.disabled,
     },
+    filterChipLabel: {
+      ...theme.typography.subtitle2,
+      lineHeight: 1,
+    },
     filterChipDelete: {
       color: theme.palette.primary.main,
       "&:hover": { color: theme.palette.primary.dark },
@@ -363,6 +367,7 @@ const Filters = () => {
             onDelete={() => handleUpdateFilters([])}
             classes={{
               root: classes.filterChip,
+              label: classes.filterChipLabel,
               deleteIcon: classes.filterChipDelete,
             }}
             variant="outlined"

www/src/components/Wizards/Column.tsx

@@ -94,7 +94,7 @@ export default function Column({
         <Typography
           component={Grid}
           item
-          variant="caption"
+          variant="subtitle2"
           noWrap
           className={classes.columnName}
         >

www/src/components/Wizards/ImportCsvWizard/Step1Columns.tsx

@@ -50,7 +50,7 @@ const useStyles = makeStyles((theme) =>
       border: `1px solid ${theme.palette.divider}`,
       borderRadius: 0,
 
-      ...theme.typography.caption,
+      ...theme.typography.subtitle2,
       color: theme.palette.text.secondary,
       transition: theme.transitions.create("color", {
         duration: theme.transitions.duration.short,

www/src/components/Wizards/ImportWizard/Step1Columns.tsx

@@ -126,7 +126,7 @@ export default function Step1Columns({ config, setConfig }: IStepProps) {
                 />
               }
               label={
-                <Typography variant="caption" color="textSecondary">
+                <Typography variant="subtitle2" color="textSecondary">
                   Select all
                 </Typography>
               }

www/src/components/Wizards/ImportWizard/Step2Rename.tsx

@@ -36,7 +36,7 @@ const useStyles = makeStyles((theme) =>
       boxShadow: `0 0 0 1px inset ${theme.palette.divider}`,
       backgroundColor: theme.palette.background.default + " !important",
 
-      ...theme.typography.caption,
+      ...theme.typography.subtitle2,
     },
     inputHiddenLabel: {
       paddingTop: theme.spacing(14 / 8) + 1,

www/src/pages/Home.tsx

@@ -50,8 +50,6 @@ const useStyles = makeStyles((theme) =>
     },
     sectionHeader: {
       color: theme.palette.text.secondary,
-      textTransform: "uppercase",
-      letterSpacing: `${2 / 13}em`,
     },
     divider: { margin: theme.spacing(1, 0, 3) },
 
@@ -236,7 +234,7 @@ export default function HomePage() {
           {favs.length !== 0 && (
             <section id="favorites" className={classes.section}>
               <Typography
-                variant="subtitle2"
+                variant="h6"
                 component="h1"
                 className={classes.sectionHeader}
               >
@@ -264,7 +262,7 @@ export default function HomePage() {
                 className={classes.section}
               >
                 <Typography
-                  variant="subtitle2"
+                  variant="h6"
                   component="h1"
                   className={classes.sectionHeader}
                 >