kenmirrors/ente
1
0
Fork 0
mirror of https://github.com/ente-io/ente.git synced 2025-08-08 07:28:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move

Browse Source
This commit is contained in:
Manav Rathi 2025-01-16 09:07:36 +05:30
parent c72b4a428a
commit 1322739707
No known key found for this signature in database
1 changed files with 42 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
web/packages/base/components/utils/theme.ts
View File

@ -287,42 +287,45 @@ const getColorSchemes = (colors: ReturnType<typeof getColors>) => ({
},
});
/**
* [Note: Font weights]
*
* We only use three font weights:
*
* - 500 (sx "regular", CSS "normal")
* - 600 (sx "medium")
* - 700 (sx "bold", CSS "bold")
*
* While the sx prop allows us to use keywords "regular", "medium" and "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 CSS keywords (which MUI
* can't and doesn't remap). To avoid any confusion, within this file we only
* use the numeric values.
*
* ---
*
* MUI (as of v6) uses the following font weights by default:
*
* - fontWeightLight 300
* - fontWeightRegular 400
* - fontWeightMedium 500
* - fontWeightBold 700
*
* The browser default (CSS keyword "normal"), is also 400.
*
* However for Inter, the font that we use, 400 is too light, and to improve
* legibility we change fontWeightRegular to 500.
*
* Correspondingly, we shift fontWeightMedium to 600. fontWeightBold then ends
* up mapping back to 700, which also nicely coincides with the CSS keyword
* "bold".
*
* MUI uses fontWeightLight only as the default font weight for the h1 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).
*/
const typography: TypographyOptions = {
// [Note: Font weights]
//
// We only use three font weights:
//
// - 500 (sx "regular", CSS "normal")
// - 600 (sx "medium")
// - 700 (sx "bold", CSS "bold")
//
// While the sx prop allows us to use keywords "regular", "medium" and
// "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
// CSS keywords (which MUI can't and doesn't remap). To avoid any confusion,
// within this file we only use the numeric values.
//
// ---
//
// MUI (as of v6) uses the following font weights by default:
// - fontWeightLight 300
// - fontWeightRegular 400
// - fontWeightMedium 500
// - fontWeightBold 700
//
// The browser default (CSS keyword "normal"), is also 400.
//
// However for Inter, the font that we use, 400 is too light, and to improve
// legibility we change fontWeightRegular to 500.
//
// Correspondingly, we shift fontWeightMedium to 600. fontWeightBold then
// ends up mapping back to 700, which also nicely coincides with the CSS
// keyword "bold".
//
// MUI uses fontWeightLight only as the default font weight for the h1 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).
fontFamily: "Inter Variable, sans-serif",
fontWeightLight: 500,
fontWeightRegular: 500 /* CSS baseline reset sets this as the default */,
@ -331,7 +334,7 @@ const typography: TypographyOptions = {
h1: {
fontSize: "48px",
lineHeight: "58px",
fontWeight: 600 /* medium */,
fontWeight: 600 /* Medium */,
},
h2: {
fontSize: "32px",
@ -341,7 +344,7 @@ const typography: TypographyOptions = {
h3: {
fontSize: "24px",
lineHeight: "29px",
fontWeight: 600 /* medium */,
fontWeight: 600 /* Medium */,
},
h4: {
fontSize: "22px",
@ -351,14 +354,14 @@ const typography: TypographyOptions = {
h5: {
fontSize: "20px",
lineHeight: "25px",
fontWeight: 600 /* medium */,
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 /* medium */,
fontWeight: 600 /* Medium */,
},
body: {
fontSize: "16px",