diff --git a/web/apps/accounts/public/fonts/OFL.txt b/web/apps/accounts/public/fonts/OFL.txt deleted file mode 100644 index ad214842c4..0000000000 --- a/web/apps/accounts/public/fonts/OFL.txt +++ /dev/null @@ -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. diff --git a/web/apps/accounts/public/fonts/inter-v11-latin-500.woff b/web/apps/accounts/public/fonts/inter-v11-latin-500.woff deleted file mode 100644 index a5b7c7a2a9..0000000000 Binary files a/web/apps/accounts/public/fonts/inter-v11-latin-500.woff and /dev/null differ diff --git a/web/apps/accounts/public/fonts/inter-v11-latin-500.woff2 b/web/apps/accounts/public/fonts/inter-v11-latin-500.woff2 deleted file mode 100644 index 0e3db59fe7..0000000000 Binary files a/web/apps/accounts/public/fonts/inter-v11-latin-500.woff2 and /dev/null differ diff --git a/web/apps/accounts/public/fonts/inter-v11-latin-600.woff b/web/apps/accounts/public/fonts/inter-v11-latin-600.woff deleted file mode 100644 index 03c1df0b8f..0000000000 Binary files a/web/apps/accounts/public/fonts/inter-v11-latin-600.woff and /dev/null differ diff --git a/web/apps/accounts/public/fonts/inter-v11-latin-600.woff2 b/web/apps/accounts/public/fonts/inter-v11-latin-600.woff2 deleted file mode 100644 index 3eef889ee7..0000000000 Binary files a/web/apps/accounts/public/fonts/inter-v11-latin-600.woff2 and /dev/null differ diff --git a/web/apps/accounts/public/fonts/inter-v11-latin-800.woff b/web/apps/accounts/public/fonts/inter-v11-latin-800.woff deleted file mode 100644 index feb91cc1d9..0000000000 Binary files a/web/apps/accounts/public/fonts/inter-v11-latin-800.woff and /dev/null differ diff --git a/web/apps/accounts/public/fonts/inter-v11-latin-800.woff2 b/web/apps/accounts/public/fonts/inter-v11-latin-800.woff2 deleted file mode 100644 index 595bcec656..0000000000 Binary files a/web/apps/accounts/public/fonts/inter-v11-latin-800.woff2 and /dev/null differ diff --git a/web/apps/accounts/src/pages/_app.tsx b/web/apps/accounts/src/pages/_app.tsx index f5a46cab17..0da2f2b11e 100644 --- a/web/apps/accounts/src/pages/_app.tsx +++ b/web/apps/accounts/src/pages/_app.tsx @@ -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"; diff --git a/web/apps/accounts/src/styles/global.css b/web/apps/accounts/src/styles/global.css index 95a483b907..582a9e6f71 100644 --- a/web/apps/accounts/src/styles/global.css +++ b/web/apps/accounts/src/styles/global.css @@ -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; diff --git a/web/apps/accounts/tsconfig.json b/web/apps/accounts/tsconfig.json index f961946f4b..81071f5376 100644 --- a/web/apps/accounts/tsconfig.json +++ b/web/apps/accounts/tsconfig.json @@ -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" ] } diff --git a/web/apps/auth/public/css/global.css b/web/apps/auth/public/css/global.css deleted file mode 100644 index 126b9f83d1..0000000000 --- a/web/apps/auth/public/css/global.css +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/web/apps/auth/public/fonts/OFL.txt b/web/apps/auth/public/fonts/OFL.txt deleted file mode 100644 index ad214842c4..0000000000 --- a/web/apps/auth/public/fonts/OFL.txt +++ /dev/null @@ -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. diff --git a/web/apps/auth/public/fonts/inter-v11-latin-500.woff b/web/apps/auth/public/fonts/inter-v11-latin-500.woff deleted file mode 100644 index a5b7c7a2a9..0000000000 Binary files a/web/apps/auth/public/fonts/inter-v11-latin-500.woff and /dev/null differ diff --git a/web/apps/auth/public/fonts/inter-v11-latin-500.woff2 b/web/apps/auth/public/fonts/inter-v11-latin-500.woff2 deleted file mode 100644 index 0e3db59fe7..0000000000 Binary files a/web/apps/auth/public/fonts/inter-v11-latin-500.woff2 and /dev/null differ diff --git a/web/apps/auth/public/fonts/inter-v11-latin-600.woff b/web/apps/auth/public/fonts/inter-v11-latin-600.woff deleted file mode 100644 index 03c1df0b8f..0000000000 Binary files a/web/apps/auth/public/fonts/inter-v11-latin-600.woff and /dev/null differ diff --git a/web/apps/auth/public/fonts/inter-v11-latin-600.woff2 b/web/apps/auth/public/fonts/inter-v11-latin-600.woff2 deleted file mode 100644 index 3eef889ee7..0000000000 Binary files a/web/apps/auth/public/fonts/inter-v11-latin-600.woff2 and /dev/null differ diff --git a/web/apps/auth/public/fonts/inter-v11-latin-800.woff b/web/apps/auth/public/fonts/inter-v11-latin-800.woff deleted file mode 100644 index feb91cc1d9..0000000000 Binary files a/web/apps/auth/public/fonts/inter-v11-latin-800.woff and /dev/null differ diff --git a/web/apps/auth/public/fonts/inter-v11-latin-800.woff2 b/web/apps/auth/public/fonts/inter-v11-latin-800.woff2 deleted file mode 100644 index 595bcec656..0000000000 Binary files a/web/apps/auth/public/fonts/inter-v11-latin-800.woff2 and /dev/null differ diff --git a/web/apps/auth/src/pages/_app.tsx b/web/apps/auth/src/pages/_app.tsx index 0b916f5ead..f719ad301d 100644 --- a/web/apps/auth/src/pages/_app.tsx +++ b/web/apps/auth/src/pages/_app.tsx @@ -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 = ({ Component, pageProps }) => { const router = useRouter(); diff --git a/web/apps/auth/src/styles/global.css b/web/apps/auth/src/styles/global.css new file mode 100644 index 0000000000..cedca5f389 --- /dev/null +++ b/web/apps/auth/src/styles/global.css @@ -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; +} diff --git a/web/apps/auth/src/types/context.ts b/web/apps/auth/src/types/context.ts index cf5ebfb1ca..7e58b45465 100644 --- a/web/apps/auth/src/types/context.ts +++ b/web/apps/auth/src/types/context.ts @@ -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"; /** diff --git a/web/apps/auth/tsconfig.json b/web/apps/auth/tsconfig.json index f961946f4b..81071f5376 100644 --- a/web/apps/auth/tsconfig.json +++ b/web/apps/auth/tsconfig.json @@ -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" ] } diff --git a/web/apps/cast/src/pages/_app.tsx b/web/apps/cast/src/pages/_app.tsx index da26ac1189..b55da999a5 100644 --- a/web/apps/cast/src/pages/_app.tsx +++ b/web/apps/cast/src/pages/_app.tsx @@ -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 = ({ Component, pageProps }) => { diff --git a/web/apps/cast/tsconfig.json b/web/apps/cast/tsconfig.json index f961946f4b..81071f5376 100644 --- a/web/apps/cast/tsconfig.json +++ b/web/apps/cast/tsconfig.json @@ -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" ] } diff --git a/web/apps/photos/src/components/Sidebar/index.tsx b/web/apps/photos/src/components/Sidebar/index.tsx index 6887f0c7c8..5979cd8c71 100644 --- a/web/apps/photos/src/components/Sidebar/index.tsx +++ b/web/apps/photos/src/components/Sidebar/index.tsx @@ -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"; diff --git a/web/packages/accounts/tsconfig.json b/web/packages/accounts/tsconfig.json index 6cc3516dd9..bff3b51d3a 100644 --- a/web/packages/accounts/tsconfig.json +++ b/web/packages/accounts/tsconfig.json @@ -7,6 +7,6 @@ "include": [ ".", "../base/global-electron.d.ts", - "../shared/themes/mui-theme.d.ts" + "../base/components/utils/mui-theme.d.ts" ] } diff --git a/web/packages/base/tsconfig.json b/web/packages/base/tsconfig.json index 6cc3516dd9..bff3b51d3a 100644 --- a/web/packages/base/tsconfig.json +++ b/web/packages/base/tsconfig.json @@ -7,6 +7,6 @@ "include": [ ".", "../base/global-electron.d.ts", - "../shared/themes/mui-theme.d.ts" + "../base/components/utils/mui-theme.d.ts" ] } diff --git a/web/packages/new/photos/types/context.ts b/web/packages/new/photos/types/context.ts index 77f83ccff0..e7d4b57e29 100644 --- a/web/packages/new/photos/types/context.ts +++ b/web/packages/new/photos/types/context.ts @@ -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"; diff --git a/web/packages/new/tsconfig.json b/web/packages/new/tsconfig.json index 76f2742dcf..2859b3d5e7 100644 --- a/web/packages/new/tsconfig.json +++ b/web/packages/new/tsconfig.json @@ -7,6 +7,6 @@ "include": [ ".", "../base/global-electron.d.ts", - "../shared/themes/mui-theme.d.ts" + "../base/components/utils/mui-theme.d.ts" ] } diff --git a/web/packages/shared/themes/index.ts b/web/packages/shared/themes/index.ts deleted file mode 100644 index 013ac59fc5..0000000000 --- a/web/packages/shared/themes/index.ts +++ /dev/null @@ -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 => { - switch (accentType) { - case "auth": - return { - ...commonFixedColors, - accent: authAccentColor, - }; - default: - return { - ...commonFixedColors, - accent: photosAccentColor, - }; - } -}; - -const commonFixedColors: Partial> = - { - 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 = { - 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 = { - 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

. - 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 {}; -} diff --git a/web/packages/shared/themes/mui-theme.d.ts b/web/packages/shared/themes/mui-theme.d.ts deleted file mode 100644 index 6eee1e1172..0000000000 --- a/web/packages/shared/themes/mui-theme.d.ts +++ /dev/null @@ -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; - black: Omit; - } - - interface ThemeColorsOptions { - background?: Partial; - backdrop?: Partial; - text?: Partial; - fill?: Partial; - stroke?: Partial; - shadows?: Partial; - accent?: Partial; - warning?: Partial; - danger?: Partial; - white?: Partial>; - black?: Partial>; - } - - 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 {}; diff --git a/web/packages/shared/tsconfig.json b/web/packages/shared/tsconfig.json index 451358251a..9cfe521bb4 100644 --- a/web/packages/shared/tsconfig.json +++ b/web/packages/shared/tsconfig.json @@ -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", "**/.*/"] }