antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2025-12-31 18:13:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

adjust styles to better support light theme

Browse source
This commit is contained in:
jeffvli 2025-06-25 19:44:28 -07:00
parent ac0c396712
commit 8f585a5be9
8 changed files with 66 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/renderer/features/player/components/player-button.module.css
View file

@ -37,8 +37,8 @@
}
.main {
border-radius: 50%;
background: var(--theme-colors-foreground) !important;
border-radius: 50%;
svg {
display: flex;

41
src/renderer/features/player/components/player-button.tsx
View file

@ -15,7 +15,7 @@ interface PlayerButtonProps extends Omit<ActionIconProps, 'icon' | 'variant'> {
}
export const PlayerButton = forwardRef<HTMLButtonElement, PlayerButtonProps>(
({ icon, isActive, tooltip, variant, ...rest }: PlayerButtonProps) => {
({ icon, isActive, tooltip, variant, ...rest }: PlayerButtonProps, ref) => {
if (tooltip) {
return (
<Tooltip {...tooltip}>
@ -23,6 +23,7 @@ export const PlayerButton = forwardRef<HTMLButtonElement, PlayerButtonProps>(
className={clsx({
[styles.active]: isActive,
})}
ref={ref}
{...rest}
onClick={(e) => {
e.stopPropagation();
@ -41,6 +42,7 @@ export const PlayerButton = forwardRef<HTMLButtonElement, PlayerButtonProps>(
className={clsx(styles.playerButton, styles[variant], {
[styles.active]: isActive,
})}
ref={ref}
{...rest}
onClick={(e) => {
e.stopPropagation();
@ -58,20 +60,23 @@ interface PlayButtonProps extends Omit<ActionIconProps, 'icon' | 'variant'> {
isPaused?: boolean;
}
export const PlayButton = ({ isPaused, ...props }: PlayButtonProps) => {
return (
<ActionIcon
className={styles.main}
icon={isPaused ? 'mediaPlay' : 'mediaPause'}
iconProps={{
size: 'lg',
}}
tooltip={{
label: isPaused
? (t('player.play', { postProcess: 'sentenceCase' }) as string)
: (t('player.pause', { postProcess: 'sentenceCase' }) as string),
}}
{...props}
/>
);
};
export const PlayButton = forwardRef<HTMLButtonElement, PlayButtonProps>(
({ isPaused, ...props }: PlayButtonProps, ref) => {
return (
<ActionIcon
className={styles.main}
icon={isPaused ? 'mediaPlay' : 'mediaPause'}
iconProps={{
size: 'lg',
}}
ref={ref}
tooltip={{
label: isPaused
? (t('player.play', { postProcess: 'sentenceCase' }) as string)
: (t('player.pause', { postProcess: 'sentenceCase' }) as string),
}}
{...props}
/>
);
},
);

3
src/renderer/features/shared/components/play-button.tsx
View file

@ -14,8 +14,7 @@ export const PlayButton = ({ className, ...props }: PlayButtonProps) => {
className={clsx(styles.button, className)}
icon="mediaPlay"
iconProps={{
fill: 'default',
size: 'lg',
size: 'xl',
}}
variant="filled"
{...props}

14
src/shared/components/action-icon/action-icon.module.css
View file

@ -53,6 +53,11 @@
&:focus-visible {
background: darken(var(--theme-colors-primary-filled), 10%);
}
svg {
color: var(--theme-colors-primary-contrast);
fill: var(--theme-colors-primary-contrast);
}
}
&[data-variant='subtle'] {
@ -60,8 +65,15 @@
background: transparent;
&:hover,
&:active,
&:focus-visible {
background: lighten(var(--theme-colors-surface), 10%);
@mixin dark {
background: lighten(var(--theme-colors-background), 5%);
}
@mixin light {
background: darken(var(--theme-colors-background), 5%);
}
}
}

12
src/shared/components/button/button.module.css
View file

@ -92,7 +92,13 @@
&:hover,
&:active,
&:focus-visible {
background-color: lighten(var(--button-bg), 10%);
@mixin dark {
background-color: lighten(var(--theme-colors-background), 10%);
}
@mixin light {
background-color: darken(var(--theme-colors-background), 5%);
}
}
}
@ -100,11 +106,11 @@
border: 1px solid transparent;
&:hover {
background-color: darken(var(--button-bg), 5%);
background-color: darken(var(--theme-colors-background), 5%);
}
&:focus-visible {
background-color: darken(var(--button-bg), 10%);
background-color: darken(var(--theme-colors-background), 10%);
}
}

4
src/shared/components/icon/icon.module.css
View file

@ -70,6 +70,10 @@
fill: var(--theme-colors-foreground);
}
.fill-contrast {
fill: var(--theme-colors-primary-contrast);
}
.fill-inherit {
fill: inherit;
}

14
src/shared/components/icon/icon.tsx
View file

@ -224,11 +224,21 @@ export const AppIcon = {
export interface IconProps extends Omit<IconBaseProps, 'color' | 'fill' | 'size'> {
animate?: 'pulse' | 'spin';
color?: 'default' | 'error' | 'info' | 'inherit' | 'muted' | 'primary' | 'success' | 'warn';
fill?: 'default' | 'error' | 'info' | 'inherit' | 'muted' | 'primary' | 'success' | 'warn';
color?: IconColor;
fill?: IconColor;
icon: keyof typeof AppIcon;
size?: '2xl' | '3xl' | '4xl' | '5xl' | 'lg' | 'md' | 'sm' | 'xl' | 'xs' | number | string;
}
type IconColor =
| 'contrast'
| 'default'
| 'error'
| 'info'
| 'inherit'
| 'muted'
| 'primary'
| 'success'
| 'warn';
export const Icon = forwardRef<HTMLDivElement, IconProps>((props, ref) => {
const { animate, className, color, fill, icon, size = 'md' } = props;

6
src/shared/themes/default-light/default-light.ts
View file

@ -11,8 +11,8 @@ export const defaultLight: AppThemeConfiguration = {
'scrollbar-track-background': 'transparent',
},
colors: {
background: 'rgb(255, 255, 255)',
'background-alternate': 'rgb(245, 245, 245)',
background: 'rgb(235, 235, 235)',
'background-alternate': 'rgb(240, 240, 240)',
black: 'rgb(0, 0, 0)',
foreground: 'rgb(25, 25, 25)',
'foreground-muted': 'rgb(80, 80, 80)',
@ -20,7 +20,7 @@ export const defaultLight: AppThemeConfiguration = {
'state-info': 'rgb(0, 122, 255)',
'state-success': 'rgb(48, 209, 88)',
'state-warning': 'rgb(255, 214, 0)',
surface: 'rgb(245, 245, 245)',
surface: 'rgb(225, 225, 225)',
'surface-foreground': 'rgb(0, 0, 0)',
white: 'rgb(255, 255, 255)',
},