adjust styles to better support light theme

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

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)',
     },