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

doc

Browse Source
This commit is contained in:
Manav Rathi 2025-01-14 07:29:42 +05:30
parent 9a527a15f5
commit db8270987b
No known key found for this signature in database
2 changed files with 45 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/docs/dependencies.md
View File

@ -97,7 +97,9 @@ DOM.
We use [MUI](https://mui.com)'s
[@mui/material](https://mui.com/material-ui/getting-started/installation/) as
our base React component library.
our base React component library (In our code and documentation, we use the name
"MUI" to refer to the the combination of both MUI's "Material UI" and "System"
packages that we use).
MUI uses [Emotion](https://emotion.sh/) as its preferred CSS-in-JS library, for
which we need to install install two Emotion packages (`@emotion/react` and

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

@ -43,6 +43,48 @@ export const getTheme = (
export type ColorAccentType = "auth" | "photos";
/**
* [Note: Colors]
*
* The word "color" in MUI stands for different things. In particular, the color
* prop for (e.g.) a Button is not the same as the color prop for the sx prop.
*
* There are three layers.
*
* 1. Consider some color, say a shade of red. This will be represented by its
* exact CSS color value, say "#ee0000".
*
* 2. In UI contexts a color doesn't go alone, and needs a few shades to act as
* variations. These all have roughly the same hue, but different levels of
* saturation. These hues are arranged together into a full "Color" exported
* by "@/mui/material":
*
* export interface Color {
* 50: string;
* 100: string;
* ...
* 800: string;
* 900: string;
* A100: string;
* ...
* A700: string;
* }
*
* 3. Finally, there are the so called "PaletteColors" (though the naming and
* documentation otherwise omits the palette qualifier).
*
* export interface PaletteColor {
* light: string;
* main: string;
* dark: string;
* contrastText: string;
* }
*
* The PaletteColors are what we use in the MUI component props (e.g. Button).
* The PaletteColors are themselves defined in terms of the specific Color
* values (e.g. red[500]), but they can also be defined by providing color
* values directly for the four "tokens" that make them up.
*/
const getColors = (
themeColor: THEME_COLOR,
accentType: ColorAccentType,