forked from riccardoperra/codeimage
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathAlert.css.ts
More file actions
42 lines (39 loc) · 996 Bytes
/
Copy pathAlert.css.ts
File metadata and controls
42 lines (39 loc) · 996 Bytes
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
import {themeTokens, themeVars} from '@codeui/kit';
import {style} from '@vanilla-extract/css';
import {recipe, RecipeVariants} from '@vanilla-extract/recipes';
export const alert = recipe({
base: {
padding: `${themeTokens.spacing['4']} ${themeTokens.spacing['5']}`,
borderRadius: themeTokens.radii.md,
fontSize: themeTokens.fontSize.md,
display: 'inline-flex',
alignItems: 'center',
},
variants: {
fluid: {
true: {
width: '100%',
},
},
theme: {
info: {
backgroundColor: themeVars.brandSoft,
color: themeVars.brandLink,
},
warning: {
backgroundColor: themeVars.caution,
color: '#fff',
},
critical: {
backgroundColor: themeVars.critical,
color: '#fff',
},
},
},
});
export const alertIcon = style({
marginRight: themeTokens.spacing['2'],
alignSelf: 'flex-start',
lineHeight: 1,
});
export type AlertVariants = RecipeVariants<typeof alert>;