[Feature] Support changing accent/primary color (#282)

* [Feature] Support changing accent/primary color

- adds color picker to settings with five swatches (blue default, yellow green and red imported from sonixd, purple new)
- changing color will change the appropriate css variable

* Remove hover styles that use an alternate primary

---------

Co-authored-by: Jeff <42182408+jeffvli@users.noreply.github.com>
Co-authored-by: jeffvli <jeffvictorli@gmail.com>
This commit is contained in:
Kendall Garner 2023-10-23 00:46:28 +00:00 committed by GitHub
parent 8dcd49d574
commit 742b13d65e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 48 additions and 4 deletions

View file

@ -39,8 +39,10 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
}
&:not([data-disabled])&:hover {
color: ${(props) => `var(--btn-${props.variant}-fg-hover) !important`};
background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
color: ${(props) => `var(--btn-${props.variant}-fg) !important`};
background: ${(props) => `var(--btn-${props.variant}-bg)`};
background-image: ${(props) =>
props.variant === 'filled' ? 'linear-gradient(rgb(0 0 0/40%) 0 0)' : undefined};
border: ${(props) => `var(--btn-${props.variant}-border-hover)`};
svg {
@ -50,7 +52,9 @@ const StyledButton = styled(MantineButton)<StyledButtonProps>`
&:not([data-disabled])&:focus-visible {
color: ${(props) => `var(--btn-${props.variant}-fg-hover)`};
background: ${(props) => `var(--btn-${props.variant}-bg-hover)`};
background: ${(props) => `var(--btn-${props.variant}-bg)`};
background-image: ${(props) =>
props.variant === 'filled' ? 'linear-gradient(rgb(0 0 0/40%) 0 0)' : undefined};
}
&:active {