adjust styles to better support light theme

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;

src/renderer/features/player/components/player-button.tsx

@@ -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) => {
+export const PlayButton = forwardRef<HTMLButtonElement, PlayButtonProps>(
-    return (
+    ({ isPaused, ...props }: PlayButtonProps, ref) => {
-        <ActionIcon
+        return (
-            className={styles.main}
+            <ActionIcon
-            icon={isPaused ? 'mediaPlay' : 'mediaPause'}
+                className={styles.main}
-            iconProps={{
+                icon={isPaused ? 'mediaPlay' : 'mediaPause'}
-                size: 'lg',
+                iconProps={{
-            }}
+                    size: 'lg',
-            tooltip={{
+                }}
-                label: isPaused
+                ref={ref}
-                    ? (t('player.play', { postProcess: 'sentenceCase' }) as string)
+                tooltip={{
-                    : (t('player.pause', { postProcess: 'sentenceCase' }) as string),
+                    label: isPaused
-            }}
+                        ? (t('player.play', { postProcess: 'sentenceCase' }) as string)
-            {...props}
+                        : (t('player.pause', { postProcess: 'sentenceCase' }) as string),
-        />
+                }}
-    );
+                {...props}
-};
+            />
+        );
+    },
+);

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: 'xl',
-                size: 'lg',
             }}
             variant="filled"
             {...props}

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%);
+            }
         }
     }
 

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%);
         }
     }
 

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;
 }

src/shared/components/icon/icon.tsx

@@ -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';
+    color?: IconColor;
-    fill?: 'default' | 'error' | 'info' | 'inherit' | 'muted' | 'primary' | 'success' | 'warn';
+    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;

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: 'rgb(235, 235, 235)',
-        'background-alternate': 'rgb(245, 245, 245)',
+        '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)',
     },