Medium

web/apps/photos/src/components/Collections/AllCollections/index.tsx

@@ -115,7 +115,11 @@ const AllCollectionsHeader = ({
                     </Typography>
                     <Typography
                         variant="small"
-                        sx={{ fontWeight: "normal", color: "text.muted" }}
+                        sx={{
+                            color: "text.muted",
+                            // Undo the effects of DialogTitle.
+                            fontWeight: "normal",
+                        }}
                     >
                         {t("albums_count", { count: collectionCount })}
                     </Typography>

web/apps/photos/src/components/Collections/CollectionShare.tsx

@@ -981,7 +981,6 @@ const ManageEmailShare: React.FC<ManageEmailShareProps> = ({
                                 ))}
                                 <EnteMenuItem
                                     startIcon={<AddIcon />}
-                                    fontWeight={"bold"}
                                     onClick={openAddViewer}
                                     label={
                                         viewers?.length
@@ -1894,7 +1893,7 @@ function PublicLinkSetPassword({
             <Stack sx={{ gap: 3, p: 1.5 }}>
                 <Typography
                     variant="h3"
-                    sx={{ fontWeight: "bold", px: 1, py: 0.5 }}
+                    sx={{ fontWeight: "medium", px: 1, py: 0.5 }}
                 >
                     {t("password_lock")}
                 </Typography>

web/apps/photos/src/components/Export.tsx

@@ -178,7 +178,7 @@ export const Export: React.FC<ExportProps> = ({
     return (
         <Dialog {...{ open, onClose }} maxWidth="xs" fullWidth>
             <SpaceBetweenFlex sx={{ p: "12px 4px 0px 0px" }}>
-                <DialogTitle variant="h3" fontWeight={"bold"}>
+                <DialogTitle variant="h3" sx={{ fontWeight: "medium" }}>
                     {t("export_data")}
                 </DialogTitle>
                 <DialogCloseIconButton {...{ onClose }} />

web/apps/photos/src/components/Notification.tsx

@@ -92,12 +92,12 @@ export default function Notification({
                             </EllipsizedTypography>
                         )}
                         {attributes.message && (
-                            <EllipsizedTypography fontWeight="bold">
+                            <EllipsizedTypography sx={{ fontWeight: "medium" }}>
                                 {attributes.message}
                             </EllipsizedTypography>
                         )}
                         {attributes.title && (
-                            <EllipsizedTypography fontWeight="bold">
+                            <EllipsizedTypography sx={{ fontWeight: "medium" }}>
                                 {attributes.title}
                             </EllipsizedTypography>
                         )}

web/apps/photos/src/components/PhotoViewer/FileInfo.tsx

@@ -249,7 +249,7 @@ export const FileInfo: React.FC<FileInfoProps> = ({
                                         href={openStreetMapLink(location)}
                                         target="_blank"
                                         rel="noopener"
-                                        sx={{ fontWeight: "bold" }}
+                                        sx={{ fontWeight: "medium" }}
                                     >
                                         {t("view_on_map")}
                                     </Link>
@@ -261,7 +261,7 @@ export const FileInfo: React.FC<FileInfoProps> = ({
                                         sx={{
                                             textDecoration: "none",
                                             color: "text.muted",
-                                            fontWeight: "bold",
+                                            fontWeight: "medium",
                                         }}
                                     >
                                         {t("disable_map")}
@@ -301,7 +301,7 @@ export const FileInfo: React.FC<FileInfoProps> = ({
                                 sx={{
                                     textDecoration: "none",
                                     color: "text.muted",
-                                    fontWeight: "bold",
+                                    fontWeight: "medium",
                                 }}
                             >
                                 {t("view_exif")}

web/apps/photos/src/components/PhotoViewer/ImageEditorOverlay.tsx

@@ -543,7 +543,7 @@ export const ImageEditorOverlay: React.FC<ImageEditorOverlayProps> = (
                             alignItems: "center",
                         }}
                     >
-                        <Typography variant="h2" sx={{ fontWeight: "bold" }}>
+                        <Typography variant="h2" sx={{ fontWeight: "medium" }}>
                             {t("photo_editor")}
                         </Typography>
                         <IconButton

web/apps/photos/src/components/Sidebar/SubscriptionCard.tsx

@@ -151,9 +151,9 @@ const StorageSection: React.FC<StorageSectionProps> = ({ usage, storage }) => {
             <DefaultBox>
                 <Typography
                     sx={{
-                        fontWeight: "bold",
                         fontSize: "24px",
                         lineHeight: "30px",
+                        fontWeight: "medium",
                     }}
                 >
                     {`${formattedStorageByteSize(usage, { round: true })} ${t(
@@ -164,9 +164,9 @@ const StorageSection: React.FC<StorageSectionProps> = ({ usage, storage }) => {
             <MobileSmallBox>
                 <Typography
                     sx={{
-                        fontWeight: "bold",
                         fontSize: "24px",
                         lineHeight: "30px",
+                        fontWeight: "medium",
                     }}
                 >
                     {`${bytesInGB(usage)} /  ${bytesInGB(storage)} ${t("storage_unit.gb")} ${t("used")}`}
@@ -205,7 +205,7 @@ const IndividualUsageSection: React.FC<IndividualUsageSectionProps> = ({
                 <Typography variant="mini">{`${formattedStorageByteSize(
                     storage - usage,
                 )} ${t("free")}`}</Typography>
-                <Typography variant="mini" sx={{ fontWeight: "bold" }}>
+                <Typography variant="mini" sx={{ fontWeight: "medium" }}>
                     {t("photos_count", { count: fileCount ?? 0 })}
                 </Typography>
             </SpaceBetweenFlex>
@@ -262,7 +262,7 @@ const FamilyUsageSection: React.FC<FamilyUsageSectionProps> = ({
                     <Legend label={t("you")} color="text.base" />
                     <Legend label={t("family")} color="text.muted" />
                 </Stack>
-                <Typography variant="mini" sx={{ fontWeight: "bold" }}>
+                <Typography variant="mini" sx={{ fontWeight: "medium" }}>
                     {t("photos_count", { count: fileCount ?? 0 })}
                 </Typography>
             </SpaceBetweenFlex>
@@ -332,7 +332,7 @@ interface LegendProps {
 const Legend: React.FC<LegendProps> = ({ label, color }) => (
     <Stack direction="row" sx={{ alignItems: "center" }}>
         <LegendDot sx={{ color }} />
-        <Typography variant="mini" sx={{ fontWeight: "bold" }}>
+        <Typography variant="mini" sx={{ fontWeight: "medium" }}>
             {label}
         </Typography>
     </Stack>

web/apps/photos/src/components/Sidebar/index.tsx

@@ -349,12 +349,7 @@ function MemberSubscriptionManage({ open, userDetails, onClose }) {
         <Dialog {...{ open, onClose, fullScreen }} maxWidth="xs" fullWidth>
             <SpaceBetweenFlex sx={{ p: "20px 8px 12px 16px" }}>
                 <Stack>
-                    <Typography
+                    <Typography variant="h3" sx={{ fontWeight: "medium" }}>
-                        variant="h3"
-                        sx={{
-                            fontWeight: "bold",
-                        }}
-                    >
                         {t("subscription")}
                     </Typography>
                     <Typography sx={{ color: "text.muted" }}>

web/apps/photos/src/components/WatchFolder.tsx

@@ -120,7 +120,7 @@ export const WatchFolder: React.FC<ModalVisibilityProps> = ({
                 PaperProps={{ sx: { height: "448px", maxWidth: "414px" } }}
             >
                 <SpaceBetweenFlex sx={{ p: "16px 8px 8px 8px" }}>
-                    <DialogTitle variant="h3" fontWeight={"bold"}>
+                    <DialogTitle variant="h3" sx={{ fontWeight: "medium" }}>
                         {t("watched_folders")}
                     </DialogTitle>
                     <DialogCloseIconButton {...{ onClose }} />
@@ -183,7 +183,7 @@ const NoWatches: React.FC = () => {
     return (
         <NoWatchesContainer>
             <Stack spacing={1}>
-                <Typography variant="large" sx={{ fontWeight: "bold" }}>
+                <Typography variant="h6">
                     {t("no_folders_added")}
                 </Typography>
                 <Typography

web/packages/accounts/components/RecoveryKey.tsx

@@ -75,7 +75,7 @@ export const RecoveryKey: React.FC<RecoveryKeyProps> = ({
             fullWidth
         >
             <SpaceBetweenFlex sx={{ p: "8px 4px 8px 0" }}>
-                <DialogTitle variant="h3" fontWeight={"bold"}>
+                <DialogTitle variant="h3" sx={{ fontWeight: "medium" }}>
                     {t("recovery_key")}
                 </DialogTitle>
                 <DialogCloseIconButton {...{ onClose }} />

web/packages/base/components/OverflowMenu.tsx

@@ -148,7 +148,7 @@ export const OverflowMenuOption: React.FC<
                 }}
             >
                 {startIcon}
-                <Typography sx={{ flex: 1, fontWeight: "bold" }}>
+                <Typography sx={{ flex: 1, fontWeight: "medium" }}>
                     {children}
                 </Typography>
                 {endIcon}

web/packages/base/components/Titlebar.tsx

@@ -46,7 +46,7 @@ export const Titlebar: React.FC<TitlebarProps> = ({
                 </Stack>
             </FlexWrapper>
             <Box sx={{ py: 0.5, px: 2 }}>
-                <Typography variant="h3" sx={{ fontWeight: "bold" }}>
+                <Typography variant="h3" sx={{ fontWeight: "medium" }}>
                     {title}
                 </Typography>
                 <Typography

web/packages/base/components/mui/SidebarDrawer.tsx

@@ -126,7 +126,7 @@ export const SidebarDrawerTitlebar: React.FC<SidebarDrawerTitlebarProps> = ({
             </Stack>
         </SpaceBetweenFlex>
         <Box sx={{ px: "16px", py: "4px" }}>
-            <Typography variant="h3" sx={{ fontWeight: "bold" }}>
+            <Typography variant="h3" sx={{ fontWeight: "medium" }}>
                 {title}
             </Typography>
             <Typography

web/packages/base/components/utils/mui-theme.d.ts

@@ -44,14 +44,7 @@ declare module "@mui/material/styles" {
 
 declare module "@mui/material/Typography" {
     interface TypographyPropsVariantOverrides {
-        large: true;
+        // Turn off MUI provided variants we don't use.
-        body: true;
-        small: true;
-        mini: true;
-        tiny: true;
-        h4: true;
-        h5: true;
-        h6: true;
         subtitle1: false;
         subtitle2: false;
         body1: false;
@@ -59,6 +52,12 @@ declare module "@mui/material/Typography" {
         caption: false;
         button: false;
         overline: false;
+        // Add our custom variants.
+        large: true;
+        body: true;
+        small: true;
+        mini: true;
+        tiny: true;
     }
 }
 

web/packages/base/components/utils/theme.ts

@@ -296,87 +296,73 @@ const typography: TypographyOptions = {
     //
     // We only use three font weights:
     //
-    // - 500 regular
+    // - 500 (sx "regular", CSS "normal")
-    // - 600 bold
+    // - 600 (sx "medium")
-    // - 700 strong
+    // - 700 (sx "bold", CSS "bold")
     //
-    // Regular and bold are specified as typography overrides, while 700 for
+    // While the sx prop allows us to use keywords "regular", "medium" and
-    // strong is specified in the CSS baseline reset below.
+    // "bold", which we do elsewhere in the code, within this file those
-    //
+    // keywords cannot be used in all contexts because they instead map to the
-    // While the sx prop allows us to use keywords "regular" and "bold",
+    // CSS keywords (which MUI can't and doesn't remap). To avoid any confusion,
-    // which we do elsewhere in the code, within this file those keywords
-    // cannot be used in all contexts because they instead map to the CSS
-    // keywords (which MUI can't and doesn't remap). To avoid any confusion,
     // within this file we only use the numeric values.
     //
     // ---
     //
-    // Details:
+    // MUI (as of v6) uses the following font weights by default:
-    //
-    // (This was true as of MUI v6)
-    //
-    // MUI uses the following font weights by default:
     // - fontWeightLight 300
     // - fontWeightRegular 400
     // - fontWeightMedium 500
     // - fontWeightBold 700
     //
-    // fontWeightLight is only used as the default font weight for the h1
+    // The browser default (CSS keyword "normal"), is also 400.
-    // and h2 variants, but we override their font weight in our theme. Thus
-    // we don't need to bother with the light variant (though for
-    // consistency of specifying every value, we alias it the same weight as
-    // regular, 500).
     //
-    // For Inter (the font we're using), 400 is too light, and to improve
+    // However for Inter, the font that we use, 400 is too light, and to improve
     // legibility we change fontWeightRegular to 500.
     //
-    // We also change fontWeightBold to 600 (and load inter-600).
+    // Correspondingly, we shift fontWeightMedium to 600. fontWeightBold then
+    // ends up mapping back to 700, which also nicely coincides with the CSS
+    // keyword "bold".
     //
-    // That leaves fontWeightMedium. We don't use it anywhere in our own
+    // MUI uses fontWeightLight only as the default font weight for the h1 and
-    // code. MUI uses it for:
+    // h2 variants, but we override their font weight in our theme. Thus we
-    // - h6, but we already specify our custom font weight in our theme.
+    // don't need to bother with the light variant (though for consistency of
-    // - Tooltip
+    // specifying every value, we alias it the same weight as regular, 500).
-    // - A handful other places in components we don't use.
-    //
-    // Since we don't anyways have a need for a medium font in our current
-    // design, we just alias it to the same font weight as our bold, i.e. we
-    // set fontWeightMedium to 600 (same as fontWeightBold).
     fontFamily: "Inter Variable, sans-serif",
     fontWeightLight: 500,
-    fontWeightRegular: 500,
+    fontWeightRegular: 500 /* CSS baseline reset sets this as the default */,
     fontWeightMedium: 600,
-    fontWeightBold: 600,
+    fontWeightBold: 700,
     h1: {
         fontSize: "48px",
         lineHeight: "58px",
-        fontWeight: 600,
+        fontWeight: 600 /* medium */,
     },
     h2: {
         fontSize: "32px",
         lineHeight: "39px",
-        fontWeight: 500,
+        fontWeight: 500 /* Reset to regular to override MUI's default theme */,
     },
     h3: {
         fontSize: "24px",
         lineHeight: "29px",
-        fontWeight: 500,
+        fontWeight: 500 /* Reset to regular to override MUI's default theme */,
     },
     h4: {
         fontSize: "22px",
         lineHeight: "27px",
-        fontWeight: 500,
+        fontWeight: 500 /* Reset to regular to override MUI's default theme */,
     },
     h5: {
         fontSize: "20px",
         lineHeight: "25px",
-        fontWeight: 600,
+        fontWeight: 600 /* medium */,
     },
     // h6 is the default variant used by MUI's DialogTitle.
     h6: {
         // The font size and line height below is the same as large.
         fontSize: "18px",
         lineHeight: "22px",
-        fontWeight: 600,
+        fontWeight: 600 /* medium */,
     },
     large: {
         fontSize: "18px",
@@ -415,8 +401,6 @@ const getComponents = (
                 // reasonable value that works for our font.
                 letterSpacing: "-0.011em",
             },
-            // See: [Note: Font weights].
-            strong: { fontWeight: 700 },
         },
     },
 
@@ -523,12 +507,12 @@ const getComponents = (
         styleOverrides: {
             // We don't use the size prop for the MUI button, or rather it
             // cannot be used, since we have fixed the paddings and font sizes
-            // unconditionally here (which are all that the size prop changes).
+            // unconditionally here (which is all that the size prop changes).
             root: {
                 padding: "12px 16px",
                 borderRadius: "4px",
                 textTransform: "none",
-                // Body, but bold.
+                // Body, but medium.
                 fontSize: typography.body?.fontSize,
                 lineHeight: typography.body?.lineHeight,
                 fontWeight: 600,

web/packages/new/photos/components/CollectionSelector.tsx

@@ -168,7 +168,7 @@ export const CollectionSelector: React.FC<CollectionSelectorProps> = ({
             PaperProps={{ sx: { maxWidth: "490px" } }}
         >
             <SpaceBetweenFlex sx={{ padding: "10px 8px 6px 0" }}>
-                <DialogTitle variant="h3" fontWeight={"bold"}>
+                <DialogTitle variant="h3" fontWeight={"medium"}>
                     {titleForAction(action)}
                 </DialogTitle>
                 <DialogCloseIconButton onClose={handleClose} />

web/packages/new/photos/components/PlanSelector.tsx

@@ -309,7 +309,7 @@ const FreeSubscriptionPlanSelectorCard: React.FC<
     children,
 }) => (
     <>
-        <Typography variant="h3" sx={{ fontWeight: "bold" }}>
+        <Typography variant="h3" sx={{ fontWeight: "medium" }}>
             {t("choose_plan")}
         </Typography>
         <Box>
@@ -365,7 +365,7 @@ const PaidSubscriptionPlanSelectorCard: React.FC<
         <Box sx={{ pl: 1.5, py: 0.5 }}>
             <SpaceBetweenFlex>
                 <Box>
-                    <Typography variant="h3" sx={{ fontWeight: "bold" }}>
+                    <Typography variant="h3" sx={{ fontWeight: "medium" }}>
                         {t("subscription")}
                     </Typography>
                     <Typography variant="small" sx={{ color: "text.muted" }}>
@@ -380,7 +380,7 @@ const PaidSubscriptionPlanSelectorCard: React.FC<
         </Box>
 
         <Box sx={{ px: 1.5 }}>
-            <Typography sx={{ color: "text.muted", fontWeight: "bold" }}>
+            <Typography sx={{ color: "text.muted", fontWeight: "medium" }}>
                 <Trans
                     i18nKey="current_usage"
                     values={{

web/packages/new/photos/components/SearchBar.tsx

@@ -468,7 +468,7 @@ const OptionContents = ({ data: option }: { data: SearchOption }) => (
         >
             <Box>
                 <Typography
-                    sx={{ fontWeight: "bold", wordBreak: "break-word" }}
+                    sx={{ fontWeight: "medium", wordBreak: "break-word" }}
                 >
                     {option.suggestion.label}
                 </Typography>

web/packages/new/photos/components/gallery/PeopleHeader.tsx

@@ -356,7 +356,7 @@ const AddPersonDialog: React.FC<AddPersonDialogProps> = ({
                 PaperProps={{ sx: { maxWidth: "490px" } }}
             >
                 <SpaceBetweenFlex sx={{ padding: "10px 8px 6px 0" }}>
-                    <DialogTitle variant="h3" fontWeight={"bold"}>
+                    <DialogTitle variant="h3" fontWeight={"medium"}>
                         {t("add_name")}
                     </DialogTitle>
                     <DialogCloseIconButton {...{ onClose }} />

web/packages/shared/components/Menu/EnteMenuItem.tsx

@@ -41,7 +41,7 @@ export const EnteMenuItem: React.FC<EnteMenuItemProps> = ({
     subIcon,
     checked,
     variant = "primary",
-    fontWeight = "bold",
+    fontWeight = "medium",
     labelComponent,
     disabled = false,
 }) => {