17fce5417a
* introduce tokens file + theme type * fix lint error * TRCL-3497 Use color tokens in app + tradingView widget (#240) * update to use tokens, small fixes * fix eol lint * move usage style helper to lib/styles * move files, fix text colors * fix logo in light mode * remove colors.css file * small lint things * add transparency to button + destructive borders
89 lines
1.9 KiB
TypeScript
89 lines
1.9 KiB
TypeScript
import styled, { type AnyStyledComponent } from 'styled-components';
|
|
|
|
import { Root, Thumb } from '@radix-ui/react-switch';
|
|
|
|
type ElementProps = {
|
|
checked: boolean;
|
|
onCheckedChange: (checked: boolean) => void;
|
|
disabled?: boolean;
|
|
required?: boolean;
|
|
name?: string;
|
|
value?: string;
|
|
};
|
|
|
|
type StyleProps = {
|
|
className?: string;
|
|
};
|
|
|
|
export const Switch = ({
|
|
checked,
|
|
className,
|
|
disabled,
|
|
name,
|
|
onCheckedChange,
|
|
required,
|
|
value,
|
|
}: ElementProps & StyleProps) => (
|
|
<Styled.Root
|
|
checked={checked}
|
|
className={className}
|
|
disabled={disabled}
|
|
id={name}
|
|
onCheckedChange={onCheckedChange}
|
|
name={name}
|
|
required={required}
|
|
value={value}
|
|
>
|
|
<Styled.Thumb />
|
|
</Styled.Root>
|
|
);
|
|
|
|
const Styled: Record<string, AnyStyledComponent> = {};
|
|
|
|
Styled.Root = styled(Root)`
|
|
--switch-width: 2.625em;
|
|
--switch-height: 1.5em;
|
|
--switch-backgroundColor: var(--color-layer-0);
|
|
--switch-thumb-backgroundColor: var(--color-layer-6);
|
|
|
|
--switch-active-backgroundColor: var(--color-accent);
|
|
--switch-active-thumb-backgroundColor: ${({ theme }) => theme.switchThumbActiveBackground};
|
|
|
|
position: relative;
|
|
width: var(--switch-width);
|
|
height: var(--switch-height);
|
|
|
|
background-color: var(--switch-backgroundColor);
|
|
border-radius: 100vmax;
|
|
transition: none;
|
|
-webkit-tap-highlight-color: var(--color-layer-0);
|
|
|
|
&:disabled {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
&[data-state='checked'] {
|
|
background-color: var(--switch-active-backgroundColor);
|
|
}
|
|
`;
|
|
|
|
Styled.Thumb = styled(Thumb)`
|
|
width: calc(var(--switch-width) / 2);
|
|
height: calc(var(--switch-height) - 0.1875em);
|
|
|
|
display: block;
|
|
|
|
background-color: var(--switch-thumb-backgroundColor);
|
|
border-radius: 50%;
|
|
|
|
transform: translateX(0.125em);
|
|
|
|
will-change: transform;
|
|
transition: transform 100ms;
|
|
|
|
&[data-state='checked'] {
|
|
transform: translateX(calc((var(--switch-width) / 2) - 0.125em));
|
|
background-color: var(--switch-active-thumb-backgroundColor);
|
|
}
|
|
`;
|