/
alert.ts
71 lines (59 loc) · 2 KB
/
alert.ts
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
type AlertVariationTokens<OutputType> = DesignTokenProperties<
'backgroundColor' | 'color',
OutputType
>;
type AlertIconTokens<OutputType> = DesignTokenProperties<'size', OutputType>;
type AlertHeadingTokens<OutputType> = DesignTokenProperties<
'fontSize' | 'fontWeight',
OutputType
>;
type AlertTokenKey =
| 'alignItems'
| 'justifyContent'
| 'color'
| 'backgroundColor'
| 'paddingBlock'
| 'paddingInline';
export type AlertTokens<OutputType extends OutputVariantKey> =
DesignTokenProperties<AlertTokenKey, OutputType> & {
icon?: AlertIconTokens<OutputType>;
heading?: AlertHeadingTokens<OutputType>;
info?: AlertVariationTokens<OutputType>;
error?: AlertVariationTokens<OutputType>;
warning?: AlertVariationTokens<OutputType>;
success?: AlertVariationTokens<OutputType>;
};
export const alert: Required<AlertTokens<'default'>> = {
// Default styles
alignItems: { value: 'center' },
justifyContent: { value: 'space-between' },
color: { value: '{colors.font.primary.value}' },
backgroundColor: { value: '{colors.background.tertiary.value}' },
paddingBlock: { value: '{space.small.value}' },
paddingInline: { value: '{space.medium.value}' },
icon: {
size: { value: '{fontSizes.xl.value}' },
},
heading: {
fontSize: { value: '{fontSizes.medium.value}' },
fontWeight: { value: '{fontWeights.bold.value}' },
},
// Variations
info: {
color: { value: '{colors.font.info.value}' },
backgroundColor: { value: '{colors.background.info.value}' },
},
error: {
color: { value: '{colors.font.error.value}' },
backgroundColor: { value: '{colors.background.error.value}' },
},
warning: {
color: { value: '{colors.font.warning.value}' },
backgroundColor: { value: '{colors.background.warning.value}' },
},
success: {
color: { value: '{colors.font.success.value}' },
backgroundColor: { value: '{colors.background.success.value}' },
},
};