From 8f585a5be9ccbd18b80009430fb3517463003eb4 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Wed, 25 Jun 2025 19:44:28 -0700 Subject: [PATCH] adjust styles to better support light theme --- .../components/player-button.module.css | 2 +- .../player/components/player-button.tsx | 41 +++++++++++-------- .../shared/components/play-button.tsx | 3 +- .../action-icon/action-icon.module.css | 14 ++++++- .../components/button/button.module.css | 12 ++++-- src/shared/components/icon/icon.module.css | 4 ++ src/shared/components/icon/icon.tsx | 14 ++++++- .../themes/default-light/default-light.ts | 6 +-- 8 files changed, 66 insertions(+), 30 deletions(-) diff --git a/src/renderer/features/player/components/player-button.module.css b/src/renderer/features/player/components/player-button.module.css index 8f4f9084..d74dabc2 100644 --- a/src/renderer/features/player/components/player-button.module.css +++ b/src/renderer/features/player/components/player-button.module.css @@ -37,8 +37,8 @@ } .main { - border-radius: 50%; background: var(--theme-colors-foreground) !important; + border-radius: 50%; svg { display: flex; diff --git a/src/renderer/features/player/components/player-button.tsx b/src/renderer/features/player/components/player-button.tsx index 51aa5dab..9071c8a0 100644 --- a/src/renderer/features/player/components/player-button.tsx +++ b/src/renderer/features/player/components/player-button.tsx @@ -15,7 +15,7 @@ interface PlayerButtonProps extends Omit { } export const PlayerButton = forwardRef( - ({ icon, isActive, tooltip, variant, ...rest }: PlayerButtonProps) => { + ({ icon, isActive, tooltip, variant, ...rest }: PlayerButtonProps, ref) => { if (tooltip) { return ( @@ -23,6 +23,7 @@ export const PlayerButton = forwardRef( className={clsx({ [styles.active]: isActive, })} + ref={ref} {...rest} onClick={(e) => { e.stopPropagation(); @@ -41,6 +42,7 @@ export const PlayerButton = forwardRef( className={clsx(styles.playerButton, styles[variant], { [styles.active]: isActive, })} + ref={ref} {...rest} onClick={(e) => { e.stopPropagation(); @@ -58,20 +60,23 @@ interface PlayButtonProps extends Omit { isPaused?: boolean; } -export const PlayButton = ({ isPaused, ...props }: PlayButtonProps) => { - return ( - - ); -}; +export const PlayButton = forwardRef( + ({ isPaused, ...props }: PlayButtonProps, ref) => { + return ( + + ); + }, +); diff --git a/src/renderer/features/shared/components/play-button.tsx b/src/renderer/features/shared/components/play-button.tsx index 336c944a..b3c90471 100644 --- a/src/renderer/features/shared/components/play-button.tsx +++ b/src/renderer/features/shared/components/play-button.tsx @@ -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} diff --git a/src/shared/components/action-icon/action-icon.module.css b/src/shared/components/action-icon/action-icon.module.css index 3f53379c..ea45e5bb 100644 --- a/src/shared/components/action-icon/action-icon.module.css +++ b/src/shared/components/action-icon/action-icon.module.css @@ -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%); + } } } diff --git a/src/shared/components/button/button.module.css b/src/shared/components/button/button.module.css index dd0af991..b17dc529 100644 --- a/src/shared/components/button/button.module.css +++ b/src/shared/components/button/button.module.css @@ -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%); } } diff --git a/src/shared/components/icon/icon.module.css b/src/shared/components/icon/icon.module.css index aa86d196..be5122e9 100644 --- a/src/shared/components/icon/icon.module.css +++ b/src/shared/components/icon/icon.module.css @@ -70,6 +70,10 @@ fill: var(--theme-colors-foreground); } +.fill-contrast { + fill: var(--theme-colors-primary-contrast); +} + .fill-inherit { fill: inherit; } diff --git a/src/shared/components/icon/icon.tsx b/src/shared/components/icon/icon.tsx index 7601137e..d77b5552 100644 --- a/src/shared/components/icon/icon.tsx +++ b/src/shared/components/icon/icon.tsx @@ -224,11 +224,21 @@ export const AppIcon = { export interface IconProps extends Omit { 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((props, ref) => { const { animate, className, color, fill, icon, size = 'md' } = props; diff --git a/src/shared/themes/default-light/default-light.ts b/src/shared/themes/default-light/default-light.ts index 2dec6041..4f1b7e49 100644 --- a/src/shared/themes/default-light/default-light.ts +++ b/src/shared/themes/default-light/default-light.ts @@ -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)', },