mirror of
https://github.com/ente-io/ente.git
synced 2025-08-07 23:18:10 +00:00
wip checkpoint
This commit is contained in:
Manav Rathi
parent
8366a8fe4d
commit
5328e6cfee
@ -190,6 +190,7 @@ declare module "@mui/material/styles" {
|
|||||||
* consider moving to others.
|
* consider moving to others.
|
||||||
*/
|
*/
|
||||||
fill: {
|
fill: {
|
||||||
|
base: string;
|
||||||
muted: string;
|
muted: string;
|
||||||
faint: string;
|
faint: string;
|
||||||
faintHover: string;
|
faintHover: string;
|
||||||
|
|||||||
@ -3,30 +3,19 @@
|
|||||||
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
|
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
|
||||||
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
|
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
|
||||||
|
|
||||||
import type {
|
import type { AppName } from "@/base/app";
|
||||||
FixedColors,
|
import type { PaletteOptions, Theme, ThemeColorsOptions } from "@mui/material";
|
||||||
PaletteOptions,
|
|
||||||
Theme,
|
|
||||||
ThemeColorsOptions,
|
|
||||||
} from "@mui/material";
|
|
||||||
import { createTheme } from "@mui/material";
|
import { createTheme } from "@mui/material";
|
||||||
import type { Components } from "@mui/material/styles/components";
|
import type { Components } from "@mui/material/styles/components";
|
||||||
import type { TypographyOptions } from "@mui/material/styles/createTypography";
|
import type { TypographyOptions } from "@mui/material/styles/createTypography";
|
||||||
|
|
||||||
enum THEME_COLOR {
|
const getTheme = (appName: AppName): Theme => {
|
||||||
LIGHT = "light",
|
const colors = getColors(appName);
|
||||||
DARK = "dark",
|
const colorSchemes = getColorSchemes(colors);
|
||||||
}
|
|
||||||
|
|
||||||
const getTheme = (colorAccentType: ColorAccentType): Theme => {
|
|
||||||
const colors = getColors(THEME_COLOR.DARK, colorAccentType);
|
|
||||||
const palette = getPallette(THEME_COLOR.DARK, colors);
|
|
||||||
const components = getComponents(colors, palette, typography);
|
const components = getComponents(colors, palette, typography);
|
||||||
return createTheme({
|
return createTheme({
|
||||||
cssVariables: true,
|
cssVariables: true,
|
||||||
colorSchemes: { dark: true, light: false },
|
colorSchemes,
|
||||||
colors,
|
|
||||||
palette,
|
|
||||||
typography,
|
typography,
|
||||||
components,
|
components,
|
||||||
shape: {
|
shape: {
|
||||||
@ -40,8 +29,6 @@ const getTheme = (colorAccentType: ColorAccentType): Theme => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
type ColorAccentType = "auth" | "photos";
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* [Note: Colors]
|
* [Note: Colors]
|
||||||
*
|
*
|
||||||
@ -129,143 +116,19 @@ type ColorAccentType = "auth" | "photos";
|
|||||||
*
|
*
|
||||||
* - All other custom variables remain within the top level theme.
|
* - All other custom variables remain within the top level theme.
|
||||||
*/
|
*/
|
||||||
const getColors = (
|
const getColors = (appName: AppName) => ({
|
||||||
themeColor: THEME_COLOR,
|
..._colors,
|
||||||
accentType: ColorAccentType,
|
...{
|
||||||
): ThemeColorsOptions => ({
|
accent: appName == "auth" ? _colors.accentAuth : _colors.accentPhotos,
|
||||||
...commonFixedColors,
|
},
|
||||||
...{ accent: accentType == "auth" ? authAccentColor : photosAccentColor },
|
|
||||||
...(themeColor === THEME_COLOR.LIGHT ? lightThemeColors : darkThemeColors),
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const commonFixedColors: Partial<Pick<ThemeColorsOptions, keyof FixedColors>> =
|
|
||||||
{
|
|
||||||
accent: {
|
|
||||||
A700: "#00B33C" /* prune */,
|
|
||||||
A500: "#1DB954",
|
|
||||||
A400: "#26CB5F" /* prune */,
|
|
||||||
A300: "#01DE4D" /* prune */,
|
|
||||||
},
|
|
||||||
warning: {
|
|
||||||
A500: "#FFC247" /* prune */,
|
|
||||||
},
|
|
||||||
danger: {
|
|
||||||
A800: "#F53434" /* prune */,
|
|
||||||
A700: "#EA3F3F" /* prune */,
|
|
||||||
A500: "#FF6565",
|
|
||||||
A400: "#FF6F6F" /* prune */,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
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" /* prune */,
|
|
||||||
A500: "#1DB954",
|
|
||||||
A400: "#26CB5F" /* prune */,
|
|
||||||
A300: "#01DE4D" /* prune */,
|
|
||||||
};
|
|
||||||
|
|
||||||
const lightThemeColors: Omit<ThemeColorsOptions, keyof FixedColors> = {
|
|
||||||
background: {
|
|
||||||
base: "#fff",
|
|
||||||
paper: "#fff",
|
|
||||||
paper2: "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)",
|
|
||||||
},
|
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
boxShadow: {
|
|
||||||
float: "0px 0px 10px rgba(0, 0, 0, 0.25)",
|
|
||||||
menu: "0px 0px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.12)",
|
|
||||||
button: "0px 4px 4px rgba(0, 0, 0, 0.25)",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const darkThemeColors: Omit<ThemeColorsOptions, keyof FixedColors> = {
|
|
||||||
background: {
|
|
||||||
base: "#000000",
|
|
||||||
paper: "#1b1b1b",
|
|
||||||
paper2: "#252525",
|
|
||||||
},
|
|
||||||
backdrop: {
|
|
||||||
base: "rgba(0, 0, 0, 0.90)" /* unused */,
|
|
||||||
muted: "rgba(0, 0, 0, 0.65)" /* unused */,
|
|
||||||
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)",
|
|
||||||
},
|
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
boxShadow: {
|
|
||||||
float: "0px 2px 12px rgba(0, 0, 0, 0.75)",
|
|
||||||
menu: "0px 0px 6px rgba(0, 0, 0, 0.50), 0px 3px 6px rgba(0, 0, 0, 0.25)",
|
|
||||||
button: "0px 4px 4px 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 };
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The color values.
|
* The color values.
|
||||||
*
|
*
|
||||||
* Use this arbitrarily shaped object to define the palette. It both prevents
|
* Use this arbitrarily shaped object to define the palette. This avoid
|
||||||
* duplication across color schemes, and also us to see the semantic
|
* duplication across color schemes, and also helps see if there are any
|
||||||
* relationships between the colors (if there are any).
|
* reusable colors.
|
||||||
*/
|
*/
|
||||||
const _colors = {
|
const _colors = {
|
||||||
accentPhotos: {
|
accentPhotos: {
|
||||||
@ -273,6 +136,11 @@ const _colors = {
|
|||||||
main: "#1DB954",
|
main: "#1DB954",
|
||||||
light: "#01DE4D",
|
light: "#01DE4D",
|
||||||
},
|
},
|
||||||
|
accentAuth: {
|
||||||
|
dark: "rgb(164, 0, 182)",
|
||||||
|
main: "rgb(150, 13, 214)",
|
||||||
|
light: "rgb(152, 77, 244)",
|
||||||
|
},
|
||||||
fixed: {
|
fixed: {
|
||||||
white: "#fff",
|
white: "#fff",
|
||||||
black: "#000",
|
black: "#000",
|
||||||
@ -285,92 +153,160 @@ const _colors = {
|
|||||||
},
|
},
|
||||||
overlayIndicatorMuted: "rgba(255, 255, 255, 0.48)",
|
overlayIndicatorMuted: "rgba(255, 255, 255, 0.48)",
|
||||||
},
|
},
|
||||||
};
|
light: {
|
||||||
|
|
||||||
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.fixed.black
|
|
||||||
: _colors.fixed.white,
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
main: colors.fill.faint,
|
|
||||||
dark: colors.fill?.faintPressed,
|
|
||||||
contrastText: colors.text?.base,
|
|
||||||
},
|
|
||||||
success: { main: _colors.fixed.success },
|
|
||||||
warning: { main: _colors.fixed.warning },
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
accent: {
|
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
||||||
// @ts-ignore
|
|
||||||
main: colors.accent.A500,
|
|
||||||
dark: colors.accent!.A700!,
|
|
||||||
light: colors.accent!.A300!,
|
|
||||||
contrastText: _colors.fixed.white,
|
|
||||||
},
|
|
||||||
critical: {
|
|
||||||
main: _colors.fixed.danger.main,
|
|
||||||
dark: _colors.fixed.danger.dark,
|
|
||||||
light: _colors.fixed.danger.light,
|
|
||||||
contrastText: _colors.fixed.white,
|
|
||||||
},
|
|
||||||
background: {
|
background: {
|
||||||
default: colors.background?.base,
|
base: "#fff",
|
||||||
paper: colors.background?.paper,
|
paper: "#fff",
|
||||||
paper2: colors.background?.paper2,
|
paper2: "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: {
|
text: {
|
||||||
// Alias the tokens used by MUI to the ones that we use. This way,
|
base: "#000",
|
||||||
// we don't need to change the default ("primary"), or update the
|
muted: "rgba(0, 0, 0, 0.60)",
|
||||||
// MUI internal styling that refers to these tokens.
|
faint: "rgba(0, 0, 0, 0.50)",
|
||||||
//
|
|
||||||
// Our own code should not use these.
|
|
||||||
primary: colors.text?.base,
|
|
||||||
secondary: colors.text?.muted,
|
|
||||||
disabled: colors.text?.faint,
|
|
||||||
// Our color tokens.
|
|
||||||
base: colors.text?.base,
|
|
||||||
muted: colors.text?.muted,
|
|
||||||
faint: colors.text?.faint,
|
|
||||||
},
|
},
|
||||||
fill: {
|
fill: {
|
||||||
muted: colors.fill!.muted!,
|
base: "#000",
|
||||||
faint: colors.fill!.faint!,
|
muted: "rgba(0, 0, 0, 0.12)",
|
||||||
faintHover: colors.fill!.faintPressed!,
|
faint: "rgba(0, 0, 0, 0.04)",
|
||||||
|
basePressed: "rgba(0, 0, 0, 0.87))",
|
||||||
|
faintPressed: "rgba(0, 0, 0, 0.08)",
|
||||||
},
|
},
|
||||||
stroke: {
|
stroke: {
|
||||||
base: colors.stroke!.base!,
|
base: "#000",
|
||||||
muted: colors.stroke!.muted!,
|
muted: "rgba(0, 0, 0, 0.24)",
|
||||||
faint: colors.stroke!.faint!,
|
faint: "rgba(0, 0, 0, 0.12)",
|
||||||
|
},
|
||||||
|
boxShadow: {
|
||||||
|
float: "0px 0px 10px rgba(0, 0, 0, 0.25)",
|
||||||
|
menu: "0px 0px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.12)",
|
||||||
|
button: "0px 4px 4px rgba(0, 0, 0, 0.25)",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
dark: {
|
||||||
|
background: {
|
||||||
|
base: "#000000",
|
||||||
|
paper: "#1b1b1b",
|
||||||
|
paper2: "#252525",
|
||||||
},
|
},
|
||||||
divider: colors.stroke?.faint,
|
|
||||||
fixed: { ..._colors.fixed },
|
|
||||||
backdrop: {
|
backdrop: {
|
||||||
base: colors.backdrop!.base!,
|
base: "rgba(0, 0, 0, 0.90)" /* unused */,
|
||||||
muted: colors.backdrop!.muted!,
|
muted: "rgba(0, 0, 0, 0.65)" /* unused */,
|
||||||
faint: colors.backdrop!.faint!,
|
faint: "rgba(0, 0, 0,0.20)",
|
||||||
},
|
},
|
||||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
text: {
|
||||||
// @ts-ignore
|
base: "#fff",
|
||||||
boxShadow: colors.boxShadow,
|
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)",
|
||||||
|
},
|
||||||
|
boxShadow: {
|
||||||
|
float: "0px 2px 12px rgba(0, 0, 0, 0.75)",
|
||||||
|
menu: "0px 0px 6px rgba(0, 0, 0, 0.50), 0px 3px 6px rgba(0, 0, 0, 0.25)",
|
||||||
|
button: "0px 4px 4px rgba(0, 0, 0, 0.75)",
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getColorSchemes = (colors: ReturnType<typeof getColors>) => ({
|
||||||
|
light: false,
|
||||||
|
dark: {
|
||||||
|
palette: {
|
||||||
|
primary: {
|
||||||
|
// See: [Note: strict mode migration]
|
||||||
|
//
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
|
main: colors.dark.fill.base,
|
||||||
|
dark: colors.dark.fill.basePressed,
|
||||||
|
contrastText:
|
||||||
|
// themeColor === "dark"
|
||||||
|
// ? _colors.fixed.black
|
||||||
|
colors.fixed.white,
|
||||||
|
},
|
||||||
|
secondary: {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
|
main: colors.dark.fill.faint,
|
||||||
|
dark: colors.dark.fill.faintPressed,
|
||||||
|
contrastText: colors.dark.text.base,
|
||||||
|
},
|
||||||
|
success: { main: colors.fixed.success },
|
||||||
|
warning: { main: colors.fixed.warning },
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
|
accent: {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
|
main: colors.accent.main,
|
||||||
|
dark: colors.accent.dark,
|
||||||
|
light: colors.accent.light,
|
||||||
|
contrastText: colors.fixed.white,
|
||||||
|
},
|
||||||
|
critical: {
|
||||||
|
main: colors.fixed.danger.main,
|
||||||
|
dark: colors.fixed.danger.dark,
|
||||||
|
light: colors.fixed.danger.light,
|
||||||
|
contrastText: colors.fixed.white,
|
||||||
|
},
|
||||||
|
background: {
|
||||||
|
default: colors.dark.background.base,
|
||||||
|
paper: colors.dark.background.paper,
|
||||||
|
paper2: colors.dark.background.paper2,
|
||||||
|
},
|
||||||
|
text: {
|
||||||
|
// Alias the tokens used by MUI to the ones that we use. This way,
|
||||||
|
// we don't need to change the default ("primary"), or update the
|
||||||
|
// MUI internal styling that refers to these tokens.
|
||||||
|
//
|
||||||
|
// Our own code should not use these.
|
||||||
|
primary: colors.dark.text.base,
|
||||||
|
secondary: colors.dark.text.muted,
|
||||||
|
disabled: colors.dark.text.faint,
|
||||||
|
// Our color tokens.
|
||||||
|
base: colors.dark.text.base,
|
||||||
|
muted: colors.dark.text.muted,
|
||||||
|
faint: colors.dark.text.faint,
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
muted: colors.dark.fill.muted,
|
||||||
|
faint: colors.dark.fill.faint,
|
||||||
|
faintHover: colors.dark.fill.faintPressed,
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
base: colors.dark.stroke.base,
|
||||||
|
muted: colors.dark.stroke.muted,
|
||||||
|
faint: colors.dark.stroke.faint,
|
||||||
|
},
|
||||||
|
divider: colors.dark.stroke.faint,
|
||||||
|
fixed: colors.fixed,
|
||||||
|
backdrop: {
|
||||||
|
base: colors.dark.backdrop.base,
|
||||||
|
muted: colors.dark.backdrop.muted,
|
||||||
|
faint: colors.dark.backdrop.faint,
|
||||||
|
},
|
||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-ignore
|
||||||
|
boxShadow: colors.dark.boxShadow,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const typography: TypographyOptions = {
|
const typography: TypographyOptions = {
|
||||||
// [Note: Font weights]
|
// [Note: Font weights]
|
||||||
//
|
//
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user