-
Notifications
You must be signed in to change notification settings - Fork 1.1k
/
index.js
51 lines (45 loc) · 1.18 KB
/
index.js
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
51
import styled from '@emotion/styled';
import { borderRadius, colors } from '@arch-ui/theme';
const boldBackgroundColor = {
info: colors.primary,
success: colors.create,
warning: colors.warning,
danger: colors.danger,
};
const boldTextColor = {
info: 'white',
success: 'white',
warning: 'white',
danger: 'white',
};
const subtleBackgroundColor = {
info: colors.B.L80,
success: colors.G.L80,
warning: colors.Y.L80,
danger: colors.R.L80,
};
const subtleTextColor = {
info: colors.B.D20,
success: colors.G.D20,
warning: colors.Y.D20,
danger: colors.R.D20,
};
export const Alert = styled.div(({ appearance, variant }) => ({
backgroundColor:
variant === 'bold' ? boldBackgroundColor[appearance] : subtleBackgroundColor[appearance],
color: variant === 'bold' ? boldTextColor[appearance] : subtleTextColor[appearance],
borderRadius,
display: 'flex',
fontWeight: variant === 'bold' ? 500 : null,
minWidth: 1,
padding: '0.9em 1.2em',
margin: '0.9em 0',
'& a': {
color: variant === 'bold' ? boldTextColor[appearance] : subtleTextColor[appearance],
textDecoration: 'underline',
},
}));
Alert.defaultProps = {
appearance: 'info',
variant: 'subtle',
};