ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): preserve card radius in MUI sx

Browse Source
This commit is contained in:
Cho-P4
2026-07-23 01:17:22 +08:00
parent a0fd55eb37
commit 4edc660606
9 changed files with 82 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/features/manga/components/cards/MangaGridCard.tsx
View File

@@ -79,7 +79,7 @@ export const MangaGridCard = memo(
flexDirection: 'column',
m: 0.25,
outline: selected ? '4px solid' : undefined,
borderRadius: MATERIAL_YOU_VISUALS.cardRadius,
borderRadius: MATERIAL_YOU_VISUALS.cardRadiusCss,
outlineColor: (theme) => theme.palette.primary.main,
backgroundColor: (theme) => (selected ? theme.palette.primary.main : undefined),
transition: `transform ${MATERIAL_YOU_VISUALS.standardTransition}, filter ${MATERIAL_YOU_VISUALS.standardTransition}`,
@@ -106,7 +106,7 @@ export const MangaGridCard = memo(
// force standard aspect ratio of manga covers
aspectRatio: MANGA_COVER_ASPECT_RATIO,
display: 'flex',
borderRadius: MATERIAL_YOU_VISUALS.cardRadius,
borderRadius: MATERIAL_YOU_VISUALS.cardRadiusCss,
}}
>
<CardActionArea

40
src/features/manga/components/details/Thumbnail.tsx
View File

@@ -87,27 +87,29 @@ export const Thumbnail = ({
[0, 0, 0, 255, 75],
],
}),
]).then(([palette, averageColor]) => {
if (!isDynamicColorResultCurrent(url, latestUrlRef.current, aborted)) {
return;
}
])
.then(([palette, averageColor]) => {
if (!isDynamicColorResultCurrent(url, latestUrlRef.current, aborted)) {
return;
}
if (
!palette.Vibrant ||
!palette.DarkVibrant ||
!palette.LightVibrant ||
!palette.LightMuted ||
!palette.Muted ||
!palette.DarkMuted
) {
return;
}
if (
!palette.Vibrant ||
!palette.DarkVibrant ||
!palette.LightVibrant ||
!palette.LightMuted ||
!palette.Muted ||
!palette.DarkMuted
) {
return;
}
setDynamicColor({
...palette,
average: averageColor,
} as TAppThemeContext['dynamicColor']);
}).catch(noOp);
setDynamicColor({
...palette,
average: averageColor,
} as TAppThemeContext['dynamicColor']);
})
.catch(noOp);
};
};

4
src/features/navigation-bar/components/DesktopSideBar.tsx
View File

@@ -64,9 +64,7 @@ export const DesktopSideBar = ({ navBarItems }: { navBarItems: NavbarItem[] }) =
sx={{
pt: 'env(safe-area-inset-top)',
pl: 'env(safe-area-inset-left)',
width: isCollapsed
? MATERIAL_YOU_NAVIGATION.railWidth
: MATERIAL_YOU_NAVIGATION.expandedWidth,
width: isCollapsed ? MATERIAL_YOU_NAVIGATION.railWidth : MATERIAL_YOU_NAVIGATION.expandedWidth,
}}
>
<DrawerHeader sx={{ justifyContent: isCollapsed ? 'center' : 'flex-end' }}>

2
src/features/theme/services/MaterialYouPalette.test.ts
View File

@@ -8,7 +8,7 @@
import assert from 'node:assert/strict';
import { describe, it } from 'node:test';
import { createMaterialYouScheme, MATERIAL_YOU_STABLE_SEED } from './MaterialYouPalette.ts';
import { createMaterialYouScheme, MATERIAL_YOU_STABLE_SEED } from '@/features/theme/services/MaterialYouPalette.ts';
describe('createMaterialYouScheme', () => {
it('creates a deterministic stable blue light scheme', () => {

4
src/features/theme/services/MaterialYouPalette.ts
View File

@@ -50,7 +50,9 @@ const tone = (seed: string, lightness: number, saturationDelta: number = 0): str
const shiftedTone = (seed: string, hueDelta: number, lightness: number): string => {
const parsed = parseToHsl(seed);
return toUpperHex(hsl((parsed.hue + hueDelta + 360) % 360, coerceIn(parsed.saturation * 0.58, 0.28, 0.62), lightness));
return toUpperHex(
hsl((parsed.hue + hueDelta + 360) % 360, coerceIn(parsed.saturation * 0.58, 0.28, 0.62), lightness),
);
};
export const createMaterialYouScheme = (

1
src/features/theme/services/MaterialYouVisualTokens.test.ts
View File

@@ -16,6 +16,7 @@ import {
describe('Material You visual tokens', () => {
it('defines lifted cards and low-distraction reader chrome', () => {
assert.equal(MATERIAL_YOU_VISUALS.cardRadius, 20);
assert.equal(MATERIAL_YOU_VISUALS.cardRadiusCss, '20px');
assert.equal(MATERIAL_YOU_VISUALS.cardHoverLift, -4);
assert.equal(MATERIAL_YOU_VISUALS.detailRadius, 24);
assert.equal(MATERIAL_YOU_VISUALS.readerChromeOpacity, 0.92);

8
src/features/theme/services/MaterialYouVisualTokens.ts
View File

@@ -8,14 +8,12 @@
export const MATERIAL_YOU_VISUALS = {
cardRadius: 20,
cardRadiusCss: '20px',
cardHoverLift: -4,
detailRadius: 24,
readerChromeOpacity: 0.92,
standardTransition: '180ms cubic-bezier(0.2, 0, 0, 1)',
} as const;
export const isDynamicColorResultCurrent = (
requestedUrl: string,
currentUrl: string,
aborted: boolean,
): boolean => !aborted && requestedUrl === currentUrl;
export const isDynamicColorResultCurrent = (requestedUrl: string, currentUrl: string, aborted: boolean): boolean =>
!aborted && requestedUrl === currentUrl;

5
src/features/theme/services/ThemeCreator.ts
View File

@@ -34,10 +34,7 @@ const getVibrantColorForTheme = (
return mode === ThemeMode.LIGHT ? palette.DarkVibrant.hex : palette.LightVibrant.hex;
};
const getThemeSeed = (
appTheme: AppTheme['muiTheme'],
mode: Exclude<ThemeMode, ThemeMode.SYSTEM>,
): string => {
const getThemeSeed = (appTheme: AppTheme['muiTheme'], mode: Exclude<ThemeMode, ThemeMode.SYSTEM>): string => {
const colorScheme = appTheme.colorSchemes?.[mode];
if (typeof colorScheme !== 'object') {
return MATERIAL_YOU_STABLE_SEED;