/
styled.tsx
50 lines (41 loc) · 1.61 KB
/
styled.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import { theme as defaultTheme } from '@bigcommerce/big-design-theme';
import { hideVisually } from 'polished';
import styled, { DefaultTheme, StyledComponent } from 'styled-components';
import { StyleableText } from '../Typography/private';
interface StyledCheckboxProps {
checked?: boolean;
}
export const CheckboxContainer = styled.div`
align-items: center;
display: flex;
`;
export const HiddenCheckbox = styled.input`
${hideVisually()}
`;
export const StyledCheckbox = styled.label<StyledCheckboxProps>`
align-items: center;
background: ${props => (props.checked ? props.theme.colors.primary40 : props.theme.colors.white)};
border: ${({ theme }) => theme.border.box};
border-color: ${props => (props.checked ? props.theme.colors.primary40 : props.theme.colors.secondary30)};
border-radius: ${({ theme }) => theme.borderRadius.normal};
color: ${({ theme }) => theme.colors.white};
display: inline-flex;
height: ${({ theme }) => theme.spacing.large};
justify-content: center;
transition: all 150ms;
user-select: none;
width: ${({ theme }) => theme.spacing.large};
${HiddenCheckbox}:focus + & {
box-shadow: ${({ theme }) => `0 0 0 ${theme.spacing.xxSmall} ${theme.colors.primary20}`};
}
svg {
visibility: ${props => (props.checked ? 'visible' : 'hidden')};
}
`;
export const StyledLabel = styled(StyleableText).attrs({
as: 'label',
})<React.LabelHTMLAttributes<HTMLLabelElement>>`
margin-left: ${({ theme }) => theme.spacing.medium};
` as StyledComponent<'label', DefaultTheme>;
StyledCheckbox.defaultProps = { theme: defaultTheme };
StyledLabel.defaultProps = { theme: defaultTheme };