/
dropZone.ts
68 lines (65 loc) · 2.64 KB
/
dropZone.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
import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
type BaseDropZoneTokens<OutputType> = DesignTokenProperties<
| 'backgroundColor'
| 'borderColor'
| 'borderRadius'
| 'borderWidth'
| 'borderStyle'
| 'color',
OutputType
>;
export type DropZoneTokens<OutputType extends OutputVariantKey> =
DesignTokenProperties<
'gap' | 'paddingBlock' | 'paddingInline' | 'textAlign',
OutputType
> &
BaseDropZoneTokens<OutputType> & {
_active?: BaseDropZoneTokens<OutputType>;
_disabled?: BaseDropZoneTokens<OutputType>;
accepted?: BaseDropZoneTokens<OutputType>;
rejected?: BaseDropZoneTokens<OutputType>;
};
export const dropzone: Required<DropZoneTokens<'default'>> = {
backgroundColor: { value: '{colors.background.primary}' },
borderRadius: { value: '{radii.small}' },
borderColor: { value: '{colors.border.primary}' },
borderStyle: { value: 'dashed' },
borderWidth: { value: '{borderWidths.small}' },
color: { value: '{colors.font.primary}' },
gap: { value: '{space.small}' },
paddingBlock: { value: '{space.xl}' },
paddingInline: { value: '{space.large}' },
textAlign: { value: 'center' },
_active: {
backgroundColor: { value: '{colors.primary.10}' },
borderRadius: { value: '{components.dropzone.borderRadius}' },
borderColor: { value: '{colors.border.pressed}' },
borderStyle: { value: '{components.dropzone.borderStyle}' },
borderWidth: { value: '{components.dropzone.borderWidth}' },
color: { value: '{colors.font.primary}' },
},
_disabled: {
backgroundColor: { value: '{colors.background.disabled}' },
borderRadius: { value: '{components.dropzone.borderRadius}' },
borderColor: { value: '{colors.border.disabled}' },
borderStyle: { value: '{components.dropzone.borderStyle}' },
borderWidth: { value: '{components.dropzone.borderWidth}' },
color: { value: '{colors.font.disabled}' },
},
accepted: {
backgroundColor: { value: '{colors.background.success}' },
borderRadius: { value: '{components.dropzone.borderRadius}' },
borderColor: { value: '{colors.border.success}' },
borderStyle: { value: '{components.dropzone.borderStyle}' },
borderWidth: { value: '{components.dropzone.borderWidth}' },
color: { value: '{colors.font.success}' },
},
rejected: {
backgroundColor: { value: '{colors.background.error}' },
borderRadius: { value: '{components.dropzone.borderRadius}' },
borderColor: { value: '{colors.border.pressed}' },
borderStyle: { value: '{components.dropzone.borderStyle}' },
borderWidth: { value: '{components.dropzone.borderWidth}' },
color: { value: '{colors.font.error}' },
},
};