mirror of
https://git.sr.ht/~ashkeel/strimertul
synced 2024-09-18 01:50:50 +00:00
fix: more light mode tweaks
This commit is contained in:
parent
6114eb0333
commit
11e7741f83
3 changed files with 62 additions and 68 deletions
|
@ -38,7 +38,9 @@ function AlertContent({
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AlertDialogPrimitive.Portal>
|
<AlertDialogPrimitive.Portal
|
||||||
|
container={document.getElementById('app-container')}
|
||||||
|
>
|
||||||
<AlertOverlay />
|
<AlertOverlay />
|
||||||
<AlertContainer variation={variation ?? 'default'}>
|
<AlertContainer variation={variation ?? 'default'}>
|
||||||
{title && (
|
{title && (
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
||||||
import { keyframes } from '@stitches/react';
|
import { keyframes } from '@stitches/react';
|
||||||
import { styled } from './theme';
|
import { lightMode, styled } from './theme';
|
||||||
|
|
||||||
export const Alert = AlertDialogPrimitive.Root;
|
export const Alert = AlertDialogPrimitive.Root;
|
||||||
export const AlertTrigger = AlertDialogPrimitive.Trigger;
|
export const AlertTrigger = AlertDialogPrimitive.Trigger;
|
||||||
|
@ -24,6 +24,9 @@ export const AlertOverlay = styled(AlertDialogPrimitive.Overlay, {
|
||||||
'@media (prefers-reduced-motion: no-preference)': {
|
'@media (prefers-reduced-motion: no-preference)': {
|
||||||
animation: `${overlayShow()} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
|
animation: `${overlayShow()} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
|
||||||
},
|
},
|
||||||
|
[`.${lightMode} &`]: {
|
||||||
|
backgroundColor: '$blackA8',
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
export const AlertContainer = styled(AlertDialogPrimitive.Content, {
|
export const AlertContainer = styled(AlertDialogPrimitive.Content, {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import * as UnstyledLabel from '@radix-ui/react-label';
|
import * as UnstyledLabel from '@radix-ui/react-label';
|
||||||
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
||||||
import * as ToggleGroup from '@radix-ui/react-toggle-group';
|
import * as ToggleGroup from '@radix-ui/react-toggle-group';
|
||||||
import { styled, theme } from './theme';
|
import { lightMode, styled, theme } from './theme';
|
||||||
import ControlledInput from '../components/forms/ControlledInput';
|
import ControlledInput from '../components/forms/ControlledInput';
|
||||||
import PasswordField from '../components/forms/PasswordField';
|
import PasswordField from '../components/forms/PasswordField';
|
||||||
|
|
||||||
|
@ -76,6 +76,12 @@ const inputStyles = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
[`.${lightMode} &`]: {
|
||||||
|
border: '1px solid $gray7',
|
||||||
|
'&:disabled': {
|
||||||
|
borderColor: '$gray4',
|
||||||
|
},
|
||||||
|
},
|
||||||
} as const;
|
} as const;
|
||||||
|
|
||||||
export const InputBox = styled('input', inputStyles);
|
export const InputBox = styled('input', inputStyles);
|
||||||
|
@ -105,6 +111,11 @@ export const Textarea = styled('textarea', {
|
||||||
'&:invalid': {
|
'&:invalid': {
|
||||||
borderColor: '$red5',
|
borderColor: '$red5',
|
||||||
},
|
},
|
||||||
|
[`.${lightMode} &`]: {
|
||||||
|
'&:disabled': {
|
||||||
|
borderColor: '$gray4',
|
||||||
|
},
|
||||||
|
},
|
||||||
variants: {
|
variants: {
|
||||||
border: {
|
border: {
|
||||||
none: {
|
none: {
|
||||||
|
@ -123,6 +134,35 @@ export const MultiButton = styled('div', {
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
});
|
});
|
||||||
|
|
||||||
|
function buttonStyle(hueName: string) {
|
||||||
|
return {
|
||||||
|
border: `1px solid $${hueName}6`,
|
||||||
|
backgroundColor: `$${hueName}4`,
|
||||||
|
'&:not(:disabled)': {
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: `$${hueName}5`,
|
||||||
|
borderColor: `$${hueName}8`,
|
||||||
|
},
|
||||||
|
'&:active': {
|
||||||
|
background: `$${hueName}6`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
[`.${lightMode} &`]: {
|
||||||
|
border: `1px solid $${hueName}10`,
|
||||||
|
backgroundColor: `$${hueName}10`,
|
||||||
|
color: `$${hueName}2`,
|
||||||
|
'&:not(:disabled)': {
|
||||||
|
'&:hover': {
|
||||||
|
backgroundColor: `$${hueName}11`,
|
||||||
|
},
|
||||||
|
'&:active': {
|
||||||
|
background: `$${hueName}11`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
const button = {
|
const button = {
|
||||||
all: 'unset',
|
all: 'unset',
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
|
@ -151,6 +191,15 @@ const button = {
|
||||||
backgroundColor: '$gray3',
|
backgroundColor: '$gray3',
|
||||||
cursor: 'not-allowed',
|
cursor: 'not-allowed',
|
||||||
},
|
},
|
||||||
|
[`.${lightMode} &`]: {
|
||||||
|
backgroundColor: '$gray2',
|
||||||
|
border: '1px solid $gray7',
|
||||||
|
'&:disabled': {
|
||||||
|
border: '1px solid $gray4',
|
||||||
|
backgroundColor: '$gray3',
|
||||||
|
cursor: 'not-allowed',
|
||||||
|
},
|
||||||
|
},
|
||||||
transition: 'all 0.2s',
|
transition: 'all 0.2s',
|
||||||
variants: {
|
variants: {
|
||||||
border: {
|
border: {
|
||||||
|
@ -194,71 +243,11 @@ const button = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
variation: {
|
variation: {
|
||||||
primary: {
|
primary: buttonStyle('teal'),
|
||||||
border: '1px solid $teal6',
|
success: buttonStyle('grass'),
|
||||||
backgroundColor: '$teal4',
|
error: buttonStyle('red'),
|
||||||
'&:not(:disabled)': {
|
warning: buttonStyle('yellow'),
|
||||||
'&:hover': {
|
danger: buttonStyle('red'),
|
||||||
backgroundColor: '$teal5',
|
|
||||||
borderColor: '$teal8',
|
|
||||||
},
|
|
||||||
'&:active': {
|
|
||||||
background: '$teal6',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
success: {
|
|
||||||
border: '1px solid $grass6',
|
|
||||||
backgroundColor: '$grass4',
|
|
||||||
'&:not(:disabled)': {
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: '$grass5',
|
|
||||||
borderColor: '$grass8',
|
|
||||||
},
|
|
||||||
'&:active': {
|
|
||||||
background: '$grass6',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
error: {
|
|
||||||
border: '1px solid $red6',
|
|
||||||
backgroundColor: '$red4',
|
|
||||||
'&:not(:disabled)': {
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: '$red5',
|
|
||||||
borderColor: '$red8',
|
|
||||||
},
|
|
||||||
'&:active': {
|
|
||||||
background: '$red6',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
warning: {
|
|
||||||
border: '1px solid $yellow6',
|
|
||||||
backgroundColor: '$yellow4',
|
|
||||||
'&:not(:disabled)': {
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: '$yellow5',
|
|
||||||
borderColor: '$yellow8',
|
|
||||||
},
|
|
||||||
'&:active': {
|
|
||||||
background: '$yellow6',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
danger: {
|
|
||||||
border: '1px solid $red6',
|
|
||||||
backgroundColor: '$red4',
|
|
||||||
'&:not(:disabled)': {
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: '$red5',
|
|
||||||
borderColor: '$red8',
|
|
||||||
},
|
|
||||||
'&:active': {
|
|
||||||
background: '$red6',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
} as const;
|
} as const;
|
||||||
|
|
Loading…
Reference in a new issue