UNPKG

@aws-amplify/ui

Version:

`@aws-amplify/ui` contains low-level logic & styles for stand-alone usage or re-use in framework-specific implementations.

github.com/aws-amplify/amplify-ui

aws-amplify/amplify-ui

97 lines (95 loc) • 3.87 kB
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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
const togglebutton = { borderColor: { value: '{colors.border.primary.value}' }, color: { value: '{colors.font.primary.value}' }, _hover: { backgroundColor: { value: '{colors.overlay.10.value}' }, }, _focus: { borderColor: { value: '{colors.border.focus.value}' }, color: { value: '{colors.font.primary.value}' }, }, _active: { backgroundColor: { value: '{colors.transparent.value}' }, }, _disabled: { backgroundColor: { value: '{colors.transparent.value}' }, borderColor: { value: '{colors.border.disabled.value}' }, color: { value: '{colors.font.disabled.value}' }, }, _pressed: { borderColor: { value: '{colors.border.pressed.value}' }, color: { value: '{colors.font.primary.value}' }, backgroundColor: { value: '{colors.overlay.20.value}' }, _hover: { backgroundColor: { value: '{colors.overlay.30.value}' }, }, }, primary: { backgroundColor: { value: '{colors.transparent.value}' }, borderWidth: { value: '{borderWidths.small.value}' }, _focus: { borderColor: { value: '{colors.border.focus.value}' }, backgroundColor: { value: '{colors.transparent.value}' }, boxShadow: { value: '{components.fieldcontrol._focus.boxShadow.value}' }, color: { value: '{colors.font.primary.value}' }, }, _hover: { backgroundColor: { value: '{colors.overlay.10.value}' }, color: { value: '{colors.font.primary.value}' }, }, _disabled: { borderColor: { value: '{colors.border.disabled.value}' }, backgroundColor: { value: '{colors.background.disabled.value}' }, color: { value: '{colors.font.disabled.value}' }, }, _pressed: { backgroundColor: { value: '{colors.primary.80.value}' }, borderColor: { value: '{colors.primary.80.value}' }, color: { value: '{colors.background.primary.value}' }, _focus: { backgroundColor: { value: '{colors.border.focus.value}', }, borderColor: { value: '{colors.border.focus.value}' }, color: { value: '{colors.background.primary.value}' }, }, _hover: { borderColor: { value: '{colors.primary.60.value}' }, backgroundColor: { value: '{colors.primary.60.value}', }, boxShadow: { value: '{colors.primary.60.value}' }, color: { value: '{colors.background.primary.value}' }, }, }, }, link: { backgroundColor: { value: '{colors.transparent.value}' }, color: { value: '{colors.overlay.50.value}' }, _hover: { backgroundColor: { value: '{colors.transparent.value}' }, color: { value: '{colors.overlay.50.value}' }, }, _focus: { backgroundColor: { value: '{colors.transparent.value}' }, color: { value: '{colors.overlay.50.value}' }, }, _disabled: { backgroundColor: { value: '{colors.transparent.value}' }, color: { value: '{colors.font.disabled.value}' }, }, _pressed: { backgroundColor: { value: '{colors.transparent.value}' }, color: { value: '{colors.overlay.90.value}' }, _focus: { backgroundColor: { value: '{colors.transparent.value}' }, color: { value: '{colors.overlay.90.value}' }, }, _hover: { color: { value: '{colors.overlay.90.value}' }, backgroundColor: { value: '{colors.transparent.value}' }, }, }, }, }; export { togglebutton };