antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 02:43:33 +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

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;