This commit is contained in:
Manav Rathi 2025-01-09 09:55:45 +05:30
parent e9153635ea
commit 830185a089
No known key found for this signature in database
32 changed files with 49 additions and 1108 deletions

View File

@ -1,93 +0,0 @@
Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

View File

@ -5,10 +5,10 @@ import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { Overlay } from "@/base/components/mui/Container";
import { AppNavbar } from "@/base/components/Navbar";
import { useAttributedMiniDialog } from "@/base/components/utils/dialog";
import { getTheme, THEME_COLOR } from "@/base/components/utils/theme";
import { setupI18n } from "@/base/i18n";
import { disableDiskLogs } from "@/base/log";
import { logUnhandledErrorsAndRejections } from "@/base/log-web";
import { getTheme, THEME_COLOR } from "@ente/shared/themes";
import { CssBaseline } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";
import { t } from "i18next";

View File

@ -1,42 +1,3 @@
/* inter-regular - latin */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 400;
src:
local(""),
url("/fonts/inter-v11-latin-500.woff2") format("woff2"),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url("/fonts/inter-v11-latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
font-display: swap; /*https://web.dev/font-display/?utm_source=lighthouse&utm_medium=devtools#how-to-avoid-showing-invisible-text*/
}
/* inter-600 - latin */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 700;
src:
local(""),
url("/fonts/inter-v11-latin-600.woff2") format("woff2"),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url("/fonts/inter-v11-latin-600.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
font-display: swap;
}
/* inter-800 - latin */
@font-face {
font-family: "Inter";
font-style: normal;
font-weight: 900;
src:
local(""),
url("/fonts/inter-v11-latin-800.woff2") format("woff2"),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url("/fonts/inter-v11-latin-800.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
font-display: swap;
}
html,
body {
min-height: 100vh;

View File

@ -10,6 +10,6 @@
"src",
"next-env.d.ts",
"../../packages/base/global-electron.d.ts",
"../../packages/shared/themes/mui-theme.d.ts"
"../../packages/base/components/utils/mui-theme.d.ts"
]
}

View File

@ -1,66 +0,0 @@
/* inter-regular - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400;
src: local(''), url('/fonts/inter-v11-latin-500.woff2') format('woff2'),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url('/fonts/inter-v11-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
font-display: swap; /*https://web.dev/font-display/?utm_source=lighthouse&utm_medium=devtools#how-to-avoid-showing-invisible-text*/
}
/* inter-600 - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 700;
src: local(''), url('/fonts/inter-v11-latin-600.woff2') format('woff2'),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url('/fonts/inter-v11-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
font-display: swap;
}
/* inter-800 - latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 900;
src: local(''), url('/fonts/inter-v11-latin-800.woff2') format('woff2'),
/* Chrome 26+, Opera 23+, Firefox 39+ */
url('/fonts/inter-v11-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
font-display: swap;
}
html,
body {
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
}
#__next {
flex: 1;
display: flex;
flex-direction: column;
}
div.otp-input input {
width: 36px !important;
height: 36px;
margin: 0 10px;
}
div.otp-input input::placeholder {
opacity: 0;
}
div.otp-input input:not(:placeholder-shown),
div.otp-input input:focus {
border: 2px solid #51cd7c;
border-radius: 1px;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}

View File

@ -1,93 +0,0 @@
Copyright 2020 The Inter Project Authors (https://github.com/rsms/inter)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

View File

@ -6,6 +6,7 @@ import { ActivityIndicator } from "@/base/components/mui/ActivityIndicator";
import { Overlay } from "@/base/components/mui/Container";
import { AppNavbar } from "@/base/components/Navbar";
import { useAttributedMiniDialog } from "@/base/components/utils/dialog";
import { THEME_COLOR, getTheme } from "@/base/components/utils/theme";
import { setupI18n } from "@/base/i18n";
import {
logStartupBanner,
@ -18,7 +19,6 @@ import {
getData,
migrateKVToken,
} from "@ente/shared/storage/localStorage";
import { THEME_COLOR, getTheme } from "@ente/shared/themes";
import type { User } from "@ente/shared/user/types";
import { CssBaseline } from "@mui/material";
import { ThemeProvider } from "@mui/material/styles";
@ -28,7 +28,8 @@ import { useRouter } from "next/router";
import React, { useCallback, useEffect, useMemo, useState } from "react";
import { AppContext } from "types/context";
import "../../public/css/global.css";
import "@fontsource-variable/inter";
import "styles/global.css";
const App: React.FC<AppProps> = ({ Component, pageProps }) => {
const router = useRouter();

View File

@ -0,0 +1,32 @@
html,
body {
height: 100%;
flex: 1;
display: flex;
flex-direction: column;
}
#__next {
flex: 1;
display: flex;
flex-direction: column;
}
div.otp-input input {
width: 36px !important;
height: 36px;
margin: 0 10px;
}
div.otp-input input::placeholder {
opacity: 0;
}
div.otp-input input:not(:placeholder-shown),
div.otp-input input:focus {
border: 2px solid #51cd7c;
border-radius: 1px;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}

View File

@ -1,5 +1,5 @@
import type { AccountsContextT } from "@/accounts/types/context";
import { THEME_COLOR } from "@ente/shared/themes";
import { THEME_COLOR } from "@/base/components/utils/theme";
import { createContext, useContext } from "react";
/**

View File

@ -10,6 +10,6 @@
"src",
"next-env.d.ts",
"../../packages/base/global-electron.d.ts",
"../../packages/shared/themes/mui-theme.d.ts"
"../../packages/base/components/utils/mui-theme.d.ts"
]
}

View File

@ -1,12 +1,13 @@
import { staticAppTitle } from "@/base/app";
import { CustomHead } from "@/base/components/Head";
import { getTheme, THEME_COLOR } from "@/base/components/utils/theme";
import { disableDiskLogs } from "@/base/log";
import { logUnhandledErrorsAndRejections } from "@/base/log-web";
import { getTheme, THEME_COLOR } from "@ente/shared/themes";
import { CssBaseline, ThemeProvider } from "@mui/material";
import type { AppProps } from "next/app";
import React, { useEffect } from "react";
import "@fontsource-variable/inter";
import "styles/global.css";
const App: React.FC<AppProps> = ({ Component, pageProps }) => {

View File

@ -10,6 +10,6 @@
"src",
"next-env.d.ts",
"../../packages/base/global-electron.d.ts",
"../../packages/shared/themes/mui-theme.d.ts"
"../../packages/base/components/utils/mui-theme.d.ts"
]
}

View File

@ -7,6 +7,7 @@ import { SpaceBetweenFlex } from "@/base/components/mui/Container";
import { SidebarDrawer } from "@/base/components/mui/SidebarDrawer";
import { useIsSmallWidth } from "@/base/components/utils/hooks";
import { useModalVisibility } from "@/base/components/utils/modal";
import { THEME_COLOR } from "@/base/components/utils/theme";
import log from "@/base/log";
import { savedLogs } from "@/base/log-web";
import { customAPIHost } from "@/base/origins";
@ -47,7 +48,6 @@ import {
} from "@ente/shared/components/Container";
import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
import { PHOTOS_PAGES as PAGES } from "@ente/shared/constants/pages";
import { THEME_COLOR } from "@ente/shared/themes";
import ArchiveOutlinedIcon from "@mui/icons-material/ArchiveOutlined";
import CategoryIcon from "@mui/icons-material/Category";
import CloseIcon from "@mui/icons-material/Close";

View File

@ -7,6 +7,6 @@
"include": [
".",
"../base/global-electron.d.ts",
"../shared/themes/mui-theme.d.ts"
"../base/components/utils/mui-theme.d.ts"
]
}

View File

@ -7,6 +7,6 @@
"include": [
".",
"../base/global-electron.d.ts",
"../shared/themes/mui-theme.d.ts"
"../base/components/utils/mui-theme.d.ts"
]
}

View File

@ -1,5 +1,5 @@
import type { AccountsContextT } from "@/accounts/types/context";
import { THEME_COLOR } from "@ente/shared/themes";
import { THEME_COLOR } from "@/base/components/utils/theme";
import { createContext, useContext } from "react";
import type { SetNotificationAttributes } from "./notification";

View File

@ -7,6 +7,6 @@
"include": [
".",
"../base/global-electron.d.ts",
"../shared/themes/mui-theme.d.ts"
"../base/components/utils/mui-theme.d.ts"
]
}

View File

@ -1,621 +0,0 @@
import type {
FixedColors,
PaletteOptions,
Shadow,
ThemeColorsOptions,
} from "@mui/material";
import { createTheme } from "@mui/material";
import type { Components } from "@mui/material/styles/components";
import type { TypographyOptions } from "@mui/material/styles/createTypography";
export enum THEME_COLOR {
LIGHT = "light",
DARK = "dark",
}
export const getTheme = (
themeColor: THEME_COLOR,
colorAccentType: ColorAccentType,
) => {
const colors = getColors(themeColor, colorAccentType);
const palette = getPallette(themeColor, colors);
const components = getComponents(colors, typography);
const theme = createTheme({
colors,
palette,
typography,
components,
shape: {
// Increase the default border radius mulitplier from 4 to 8.
borderRadius: 8,
},
transitions: {
// Increase the default transition out duration from 195 to 300.
duration: { leavingScreen: 300 },
},
});
return theme;
};
const typography: TypographyOptions = {
h1: {
fontSize: "48px",
lineHeight: "58px",
// [Note: Bold headings]
//
// Browser default is bold, but MUI resets it to 500 which is too light
// for our chosen font.
fontWeight: "bold",
},
h2: {
fontSize: "32px",
lineHeight: "39px",
},
h3: {
fontSize: "24px",
lineHeight: "29px",
},
h4: {
fontSize: "22px",
lineHeight: "27px",
},
h5: {
fontSize: "20px",
lineHeight: "25px",
// See: [Note: Bold headings]
fontWeight: "bold",
},
// 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",
// See: [Note: Bold headings]
fontWeight: "bold",
},
large: {
fontSize: "18px",
lineHeight: "22px",
},
body: {
fontSize: "16px",
lineHeight: "20px",
},
small: {
fontSize: "14px",
lineHeight: "17px",
},
mini: {
fontSize: "12px",
lineHeight: "15px",
},
tiny: {
fontSize: "10px",
lineHeight: "12px",
},
fontFamily: ["Inter", "sans-serif"].join(","),
};
export type ColorAccentType = "auth" | "photos";
const getColors = (
themeColor: THEME_COLOR,
accentType: ColorAccentType,
): ThemeColorsOptions => {
switch (themeColor) {
case THEME_COLOR.LIGHT:
return { ...fixedColors(accentType), ...lightThemeColors };
default:
return { ...fixedColors(accentType), ...darkThemeColors };
}
};
const fixedColors = (
accentType: "auth" | "photos",
): Pick<ThemeColorsOptions, keyof FixedColors> => {
switch (accentType) {
case "auth":
return {
...commonFixedColors,
accent: authAccentColor,
};
default:
return {
...commonFixedColors,
accent: photosAccentColor,
};
}
};
const commonFixedColors: Partial<Pick<ThemeColorsOptions, keyof FixedColors>> =
{
accent: {
A700: "#00B33C",
A500: "#1DB954",
A400: "#26CB5F",
A300: "#01DE4D",
},
warning: {
A500: "#FFC247",
},
danger: {
A800: "#F53434",
A700: "#EA3F3F",
A500: "#FF6565",
A400: "#FF6F6F",
},
white: { base: "#fff", muted: "rgba(255, 255, 255, 0.48)" },
black: { base: "#000", muted: "rgba(0, 0, 0, 0.65)" },
};
const authAccentColor = {
A700: "rgb(164, 0, 182)",
A500: "rgb(150, 13, 214)",
A400: "rgb(122, 41, 193)",
A300: "rgb(152, 77, 244)",
};
const photosAccentColor = {
A700: "#00B33C",
A500: "#1DB954",
A400: "#26CB5F",
A300: "#01DE4D",
};
const lightThemeColors: Omit<ThemeColorsOptions, keyof FixedColors> = {
background: {
base: "#fff",
elevated: "#fff",
elevated2: "rgba(153, 153, 153, 0.04)",
},
backdrop: {
base: "rgba(255, 255, 255, 0.92)",
muted: "rgba(255, 255, 255, 0.75)",
faint: "rgba(255, 255, 255, 0.30)",
},
text: {
base: "#000",
muted: "rgba(0, 0, 0, 0.60)",
faint: "rgba(0, 0, 0, 0.50)",
},
fill: {
base: "#000",
muted: "rgba(0, 0, 0, 0.12)",
faint: "rgba(0, 0, 0, 0.04)",
basePressed: "rgba(0, 0, 0, 0.87))",
faintPressed: "rgba(0, 0, 0, 0.08)",
},
stroke: {
base: "#000",
muted: "rgba(0, 0, 0, 0.24)",
faint: "rgba(0, 0, 0, 0.12)",
},
shadows: {
float: [{ x: 0, y: 0, blur: 10, color: "rgba(0, 0, 0, 0.25)" }],
menu: [
{
x: 0,
y: 0,
blur: 6,
color: "rgba(0, 0, 0, 0.16)",
},
{
x: 0,
y: 3,
blur: 6,
color: "rgba(0, 0, 0, 0.12)",
},
],
button: [
{
x: 0,
y: 4,
blur: 4,
color: "rgba(0, 0, 0, 0.25)",
},
],
},
};
const darkThemeColors: Omit<ThemeColorsOptions, keyof FixedColors> = {
background: {
base: "#000000",
elevated: "#1b1b1b",
elevated2: "#252525",
},
backdrop: {
base: "rgba(0, 0, 0, 0.90)",
muted: "rgba(0, 0, 0, 0.65)",
faint: "rgba(0, 0, 0,0.20)",
},
text: {
base: "#fff",
muted: "rgba(255, 255, 255, 0.70)",
faint: "rgba(255, 255, 255, 0.50)",
},
fill: {
base: "#fff",
muted: "rgba(255, 255, 255, 0.16)",
faint: "rgba(255, 255, 255, 0.12)",
basePressed: "rgba(255, 255, 255, 0.90)",
faintPressed: "rgba(255, 255, 255, 0.06)",
},
stroke: {
base: "#ffffff",
muted: "rgba(255,255,255,0.24)",
faint: "rgba(255,255,255,0.16)",
},
shadows: {
float: [
{
x: 0,
y: 2,
blur: 12,
color: "rgba(0, 0, 0, 0.75)",
},
],
menu: [
{
x: 0,
y: 0,
blur: 6,
color: "rgba(0, 0, 0, 0.50)",
},
{
x: 0,
y: 3,
blur: 6,
color: "rgba(0, 0, 0, 0.25)",
},
],
button: [
{
x: 0,
y: 4,
blur: 4,
color: "rgba(0, 0, 0, 0.75)",
},
],
},
};
const getPallette = (
themeColor: THEME_COLOR,
colors: ThemeColorsOptions,
): PaletteOptions => {
const paletteOptions = getPalletteOptions(themeColor, colors);
switch (themeColor) {
case THEME_COLOR.LIGHT:
return { mode: "light", ...paletteOptions };
default:
return { mode: "dark", ...paletteOptions };
}
};
const getPalletteOptions = (
themeColor: THEME_COLOR,
colors: ThemeColorsOptions,
): PaletteOptions => {
return {
primary: {
// See: [Note: strict mode migration]
//
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
main: colors.fill.base,
dark: colors.fill?.basePressed,
contrastText:
themeColor === "dark" ? colors.black?.base : colors.white?.base,
},
secondary: {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
main: colors.fill.faint,
dark: colors.fill?.faintPressed,
contrastText: colors.text?.base,
},
accent: {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
main: colors.accent.A500,
dark: colors.accent?.A700,
contrastText: colors.white?.base,
},
critical: {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
main: colors.danger.A700,
dark: colors.danger?.A800,
contrastText: colors.white?.base,
},
background: {
default: colors.background?.base,
paper: colors.background?.elevated,
},
text: {
primary: colors.text?.base,
secondary: colors.text?.muted,
disabled: colors.text?.faint,
base: colors.text?.base,
muted: colors.text?.muted,
faint: colors.text?.faint,
},
divider: colors.stroke?.faint,
};
};
const getComponents = (
colors: ThemeColorsOptions,
typography: TypographyOptions,
): Components => ({
MuiCssBaseline: {
styleOverrides: {
body: {
fontFamily: typography.fontFamily,
// MUI has different letter spacing for each variant, but those
// are values arrived at for the default Material font, and
// don't work for the font that we're using, so reset it to a
// reasonable value that works for our font.
letterSpacing: "-0.011em",
},
strong: { fontWeight: 700 },
},
},
MuiTypography: {
defaultProps: {
// MUI has body1 as the default variant for Typography, but our
// variant scheme is different, instead of body1/2, we have
// large/body/small etc. So reset the default to our equivalent of
// body1, which is "body".
variant: "body",
// Map all our custom variants to <p>.
variantMapping: {
large: "p",
body: "p",
small: "p",
mini: "p",
tiny: "p",
},
},
},
MuiDrawer: {
styleOverrides: {
root: {
".MuiBackdrop-root": {
backgroundColor: colors.backdrop?.faint,
},
},
},
},
MuiDialog: {
defaultProps: {
// This is required to prevent console errors about aria-hiding a
// focused button when the dialog is closed.
//
// https://github.com/mui/material-ui/issues/43106#issuecomment-2314809028
closeAfterTransition: false,
},
styleOverrides: {
root: {
".MuiBackdrop-root": {
backgroundColor: colors.backdrop?.faint,
},
"& .MuiDialog-paper": {
filter: getDropShadowStyle(colors.shadows?.float),
},
// Reset the MUI default paddings to 16px everywhere.
//
// This is not a great choice either, usually most dialogs, for
// one reason or the other, will need to customize this padding
// anyway. But not resetting it to 16px leaves it at the MUI
// defaults, which just doesn't work well with our designs.
"& .MuiDialogTitle-root": {
// MUI default is '16px 24px'.
padding: "16px",
},
"& .MuiDialogContent-root": {
// MUI default is '20px 24px'.
padding: "16px",
// If the contents of the dialog's contents exceed the
// available height, show a scrollbar just for the contents
// instead of the entire dialog.
overflowY: "auto",
},
"& .MuiDialogActions-root": {
// MUI default is way off for us since they cluster the
// buttons to the right, while our designs usually want the
// buttons to align with the heading / content.
padding: "16px",
},
".MuiDialogTitle-root + .MuiDialogContent-root": {
// MUI resets this to 0 when the content doesn't use
// dividers (none of ours do). I feel that is a better
// default, since unlike margins, padding doesn't collapse,
// but changing this now would break existing layouts.
paddingTop: "16px",
},
},
},
},
MuiPaper: {
styleOverrides: { root: { backgroundImage: "none" } },
},
MuiLink: {
defaultProps: {
color: colors.accent?.A500,
underline: "none",
},
styleOverrides: {
root: {
"&:hover": {
underline: "always",
color: colors.accent?.A500,
},
},
},
},
MuiButton: {
defaultProps: {
// Change the default button variant from "text" to "contained".
variant: "contained",
},
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).
root: {
padding: "12px 16px",
borderRadius: "4px",
textTransform: "none",
fontWeight: "bold",
fontSize: typography.body?.fontSize,
lineHeight: typography.body?.lineHeight,
},
startIcon: {
marginRight: "12px",
"&& >svg": {
fontSize: "20px",
},
},
endIcon: {
marginLeft: "12px",
"&& >svg": {
fontSize: "20px",
},
},
},
},
MuiInputBase: {
styleOverrides: {
formControl: {
// Give a symmetric border to the input field, by default the
// border radius is only applied to the top for the "filled"
// variant of input used inside TextFields.
borderRadius: "8px",
// TODO: Should we also add overflow hidden so that there is no
// gap between the filled area and the (full width) border. Not
// sure how this might interact with selects.
// overflow: "hidden",
// Hide the bottom border that always appears for the "filled"
// variant of input used inside TextFields.
"::before": {
borderBottom: "none !important",
},
},
},
},
MuiFilledInput: {
styleOverrides: {
input: {
"&:autofill": {
boxShadow: "#c7fd4f",
},
},
},
},
MuiTextField: {
defaultProps: {
// The MUI default variant is "outlined", override it to use the
// "filled" one by default.
variant: "filled",
// Reduce the vertical margins that MUI adds to the TextField.
//
// Note that this causes things to be too tight when the helper text
// is shown, so this is not recommended for new code that we write.
margin: "dense",
},
styleOverrides: {
root: {
"& .MuiInputAdornment-root": {
marginRight: "8px",
},
},
},
},
MuiSvgIcon: {
styleOverrides: {
root: ({ ownerState }) => ({
...getIconColor(ownerState, colors),
}),
},
},
MuiIconButton: {
styleOverrides: {
root: ({ ownerState }) => ({
...getIconColor(ownerState, colors),
padding: "12px",
}),
},
},
MuiSnackbar: {
styleOverrides: {
root: {
// Set a default border radius for all snackbar's (e.g.
// notification popups).
borderRadius: "8px",
},
},
},
MuiModal: {
styleOverrides: {
root: {
'&:has(> div[style*="opacity: 0"])': {
pointerEvents: "none",
},
},
},
},
MuiMenuItem: {
styleOverrides: {
// don't reduce opacity of disabled items
root: {
"&.Mui-disabled": {
opacity: 1,
},
},
},
},
});
const getDropShadowStyle = (shadows: Shadow[] | undefined) => {
return (shadows ?? [])
.map(
(shadow) =>
`drop-shadow(${shadow.x}px ${shadow.y}px ${shadow.blur}px ${shadow.color})`,
)
.join(" ");
};
interface IconColorableOwnerState {
color?: string;
disabled?: boolean;
}
function getIconColor(
ownerState: IconColorableOwnerState,
colors: ThemeColorsOptions,
) {
switch (ownerState.color) {
case "primary":
return {
color: colors.stroke?.base,
};
case "secondary":
return {
color: colors.stroke?.muted,
};
}
if (ownerState.disabled) {
return {
color: colors.stroke?.faint,
};
}
return {};
}

View File

@ -1,181 +0,0 @@
import type { PaletteColor, PaletteColorOptions } from "@mui/material";
import React from "react";
declare module "@mui/material/styles" {
interface Theme {
colors: ThemeColors;
}
interface ThemeOptions {
colors?: ThemeColorsOptions;
}
interface Palette {
accent: PaletteColor;
critical: PaletteColor;
}
interface PaletteOptions {
accent?: PaletteColorOptions;
critical?: PaletteColorOptions;
}
interface TypeText {
base: string;
muted: string;
faint: string;
}
interface TypographyVariants {
large: React.CSSProperties;
body: React.CSSProperties;
small: React.CSSProperties;
mini: React.CSSProperties;
tiny: React.CSSProperties;
}
interface TypographyVariantsOptions {
large?: React.CSSProperties;
body?: React.CSSProperties;
small?: React.CSSProperties;
mini?: React.CSSProperties;
tiny?: React.CSSProperties;
}
}
declare module "@mui/material/Typography" {
interface TypographyPropsVariantOverrides {
large: true;
body: true;
small: true;
mini: true;
tiny: true;
h4: true;
h5: true;
h6: true;
subtitle1: false;
subtitle2: false;
body1: false;
body2: false;
caption: false;
button: false;
overline: false;
}
}
declare module "@mui/material/Button" {
interface ButtonPropsColorOverrides {
accent: true;
critical: true;
error: false;
success: false;
info: false;
warning: false;
inherit: false;
}
}
declare module "@mui/material/Checkbox" {
interface CheckboxPropsColorOverrides {
accent: true;
critical: true;
}
}
declare module "@mui/material/Switch" {
interface SwitchPropsColorOverrides {
accent: true;
}
}
declare module "@mui/material/SvgIcon" {
interface SvgIconPropsColorOverrides {
accent: true;
}
}
declare module "@mui/material/CircularProgress" {
interface CircularProgressPropsColorOverrides {
accent: true;
}
}
// =================================================
// Custom Interfaces
// =================================================
declare module "@mui/material/styles" {
interface ThemeColors {
background: BackgroundType;
backdrop: Strength;
text: Strength;
fill: FillStrength;
stroke: Strength;
shadows: Shadows;
accent: ColorStrength;
warning: ColorStrength;
danger: ColorStrength;
white: Omit<Strength, "faint">;
black: Omit<Strength, "faint">;
}
interface ThemeColorsOptions {
background?: Partial<BackgroundType>;
backdrop?: Partial<Strength>;
text?: Partial<Strength>;
fill?: Partial<FillStrength>;
stroke?: Partial<StrokeStrength>;
shadows?: Partial<Shadows>;
accent?: Partial<ColorStrength>;
warning?: Partial<ColorStrength>;
danger?: Partial<ColorStrength>;
white?: Partial<Omit<Strength, "faint">>;
black?: Partial<Omit<Strength, "faint">>;
}
interface ColorStrength {
A800: string;
A700: string;
A500: string;
A400: string;
A300: string;
}
interface FixedColors {
accent: string;
warning: string;
danger: string;
white: string;
black: string;
}
interface BackgroundType {
base: string;
elevated: string;
elevated2: string;
}
interface Strength {
base: string;
muted: string;
faint: string;
}
type FillStrength = Strength & {
basePressed: string;
faintPressed: string;
};
interface Shadows {
float: Shadow[];
menu: Shadow[];
button: Shadow[];
}
interface Shadow {
x: number;
y: number;
blur: number;
color: string;
}
}
export {};

View File

@ -21,9 +21,9 @@
"**/*.ts",
"**/*.tsx",
"**/*.js",
"themes/mui-theme.d.ts",
"../base/log-web.ts",
"../base/global-electron.d.ts"
"../base/global-electron.d.ts",
"../base/components/utils/mui-theme.d.ts"
],
"exclude": ["**/node_modules", "**/.*/"]
}