TerribleDev/ente
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[web] Light mode WIP - Part x/x (#4909)

Browse Source
This commit is contained in:
Manav Rathi
2025-01-30 12:41:36 +05:30
committed by GitHub
parent 7c3fe5d57c 09bfca7aa4
commit 7dda0ecf81
4 changed files with 76 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
web/apps/photos/src/components/Sidebar/SubscriptionCard.tsx
View File

@@ -1,5 +1,6 @@
import { Overlay } from "@/base/components/containers";
import type { ButtonishProps } from "@/base/components/mui";
import { UnstyledButton } from "@/new/photos/components/UnstyledButton";
import type { UserDetails } from "@/new/photos/services/user-details";
import {
familyUsage,
@@ -56,7 +57,11 @@ export const SubscriptionCard: React.FC<SubscriptionCardProps> = ({
const BackgroundOverlay: React.FC = () => (
<img
style={{ aspectRatio: "2/1" }}
style={{
aspectRatio: "2/1",
// Remove extra whitespace below the image.
verticalAlign: "bottom",
}}
width="100%"
src="/images/subscription-card-background/1x.png"
srcSet="/images/subscription-card-background/2x.png 2x, /images/subscription-card-background/3x.png 3x"
@@ -64,17 +69,47 @@ const BackgroundOverlay: React.FC = () => (
);
const ClickOverlay: React.FC<ButtonishProps> = ({ onClick }) => (
<Overlay
sx={{
display: "flex",
justifyContent: "flex-end",
alignItems: "center",
cursor: "pointer",
}}
onClick={onClick}
>
<ClickOverlayButton onClick={onClick}>
<ChevronRightIcon />
</Overlay>
</ClickOverlayButton>
);
/**
* The transparent button element offers activation of the subscription card.
*
* A mixin of {@link FocusVisibleUnstyledButton} and {@link Overlay}, plus
* custom styling to place its contents (chevron) at the middle right.
*/
const ClickOverlayButton = styled(UnstyledButton)(
({ theme }) => `
/* Overlay */
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* Position the chevron at the middle right */
display: flex;
justify-content: flex-end;
align-items: center;
/* Reset the button color */
color: inherit;
/* FocusVisibleUnstyledButton, but customized to work button with the larger
subscription card and its border radii. */
&:focus-visible {
outline: 1.5px solid ${theme.vars.palette.stroke.base};
outline-offset: 2px;
border-radius: 3px;
}
&:active {
outline: 2px solid ${theme.vars.palette.stroke.faint};
outline-offset: 1px;
border-radius: 3px;
}
`,
);
interface SubscriptionCardContentOverlayProps {

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

@@ -184,8 +184,7 @@ const _colors = {
baseHover: "rgba(0 0 0 / 0.87)",
muted: "rgba(0 0 0 / 0.12)",
faint: "rgba(0 0 0 / 0.04)",
// TODO(LM): Different from Figma.
faintHover: "rgba(0 0 0 / 0.06)",
faintHover: "rgba(0 0 0 / 0.08)",
fainter: "rgba(0 0 0 / 0.02)",
},
stroke: {
@@ -221,7 +220,7 @@ const _colors = {
baseHover: "rgba(255 255 255 / 0.90)",
muted: "rgba(255 255 255 / 0.16)",
faint: "rgba(255 255 255 / 0.12)",
faintHover: "rgba(255 255 255 / 0.06)",
faintHover: "rgba(255 255 255 / 0.16)",
fainter: "rgba(255 255 255 / 0.05)",
},
stroke: {
@@ -295,8 +294,9 @@ const getColorSchemes = (colors: ReturnType<typeof getColors>) => ({
// The color of an hovered action.
hover: colors.light.fill.faintHover,
// For an icon button, the hover background color is derived
// from the active color above and this opacity.
hoverOpacity: 0.06,
// from the active color above and this opacity. Use a value
// that results in the same result as faintHover.
hoverOpacity: 0.08,
// TODO(LM): Remove commented.
// The color of a selected action.
//
@@ -323,10 +323,11 @@ const getColorSchemes = (colors: ReturnType<typeof getColors>) => ({
bg: colors.light.fill.faint,
hoverBg: colors.light.fill.faintHover,
// We don't use this currently.
// disabledBg: "#ff0000", //colors.light.fill.faint,
// disabledBg: colors.light.fill.fainter,
},
},
},
// -- See the light mode section for comments
dark: {
palette: {
background: colors.dark.background,
@@ -356,15 +357,9 @@ const getColorSchemes = (colors: ReturnType<typeof getColors>) => ({
contrastText: colors.fixed.white,
},
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,
@@ -374,43 +369,23 @@ const getColorSchemes = (colors: ReturnType<typeof getColors>) => ({
divider: colors.dark.stroke.faint,
fixed: colors.fixed,
boxShadow: colors.dark.boxShadow,
// Override some MUI defaults for styling action elements like
// buttons and menu items.
//
// https://github.com/mui/material-ui/blob/v6.4.0/packages/mui-material/src/styles/createPalette.js#L68
// -- See the light mode section for comments
action: {
// The color of an active action, like an icon button.
active: colors.dark.stroke.base,
// The color of an hovered action.
hover: colors.dark.fill.faintHover,
// For an icon button, the hover background color is derived
// from the active color above and this opacity.
hoverOpacity: 0.12,
// The color of a selected action.
//
// Placeholder; not clear how it impacts us.
hoverOpacity: 0.16,
// selected: colors.dark.stroke.base,
// selectedOpacity: 0.08,
// The color of a disabled action (including regular buttons).
disabled: colors.dark.text.faint,
// disabledOpacity: 0.12,
// The background color of a disabled action.
disabledBackground: colors.dark.fill.faint,
// Placeholder; not clear how it impacts us.
// focus: colors.dark.stroke.base,
// Placeholder (MUI default); not clear how it impacts us.
// focusOpacity: 1,
// Placeholder (MUI default); not clear how it impacts us.
// activatedOpacity: 0.12,
},
// Override some internal MUI defaults that impact the components
// which we use.
//
// https://github.com/mui/material-ui/blob/v6.4.0/packages/mui-material/src/styles/createThemeWithVars.js#L271
FilledInput: {
bg: colors.dark.fill.faint,
hoverBg: colors.dark.fill.faintHover,
// We don't use this currently.
// disabledBg: colors.dark.fill.faint,
},
},

19
web/packages/new/photos/components/UnstyledButton.tsx
View File

@@ -24,3 +24,22 @@ export const UnstyledButton = styled("button")`
/* Default cursor on mouse over of a button is not a hand pointer */
cursor: pointer;
`;
/**
* A variant of {@link UnstyledButton} that modifying the keyboard focus and
* activation states to match the styling of {@link FocusVisibleButton}.
*/
export const FocusVisibleUnstyledButton = styled(UnstyledButton)(
({ theme }) => `
&:focus-visible {
outline: 1px solid ${theme.vars.palette.stroke.base};
outline-offset: 2px;
border-radius: 2px;
}
&:active {
outline: 1px solid ${theme.vars.palette.stroke.faint};
outline-offset: 1px;
border-radius: 2px;
}
`,
);

4
web/packages/new/photos/components/gallery/BarImpl.tsx
View File

@@ -12,7 +12,7 @@ import {
ItemCard,
TileTextOverlay,
} from "@/new/photos/components/Tiles";
import { UnstyledButton } from "@/new/photos/components/UnstyledButton";
import { FocusVisibleUnstyledButton } from "@/new/photos/components/UnstyledButton";
import type {
CollectionSummary,
CollectionSummaryType,
@@ -352,7 +352,7 @@ const ModeIndicator: React.FC<
);
};
const ModeButton = styled(UnstyledButton, {
const ModeButton = styled(FocusVisibleUnstyledButton, {
shouldForwardProp: (propName) => propName != "active",
})<{ active: boolean }>(
({ theme, active }) => `