UNPKG

@kiwicom/orbit-components

Version:

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

github.com/kiwicom/orbit-components

kiwicom/orbit-components

200 lines (198 loc) • 12.5 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
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
import convertHexToRgba from "@kiwicom/orbit-design-tokens/lib/convertHexToRgba"; import { TOKENS, TYPE_OPTIONS } from "../consts"; const getTypeToken = name => ({ theme, type }) => { const tokens = { [TOKENS.backgroundButton]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonPrimary, [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonSecondary, [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonInfo, [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonSuccess, [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonWarning, [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCritical, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.backgroundButtonFacebook, [TYPE_OPTIONS.GOOGLE]: theme.orbit.backgroundButtonGoogle, [TYPE_OPTIONS.WHITE]: theme.orbit.backgroundButtonWhite }, [TOKENS.backgroundButtonHover]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonPrimaryHover, [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonSecondaryHover, [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonInfoHover, [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonSuccessHover, [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonWarningHover, [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCriticalHover, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.backgroundButtonFacebookHover, [TYPE_OPTIONS.GOOGLE]: theme.orbit.backgroundButtonGoogleHover, [TYPE_OPTIONS.WHITE]: theme.orbit.backgroundButtonWhiteHover }, [TOKENS.backgroundButtonActive]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonPrimaryActive, [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonSecondaryActive, [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonInfoActive, [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonSuccessActive, [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonWarningActive, [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCriticalActive, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.backgroundButtonFacebookActive, [TYPE_OPTIONS.GOOGLE]: theme.orbit.backgroundButtonGoogleActive, [TYPE_OPTIONS.WHITE]: theme.orbit.backgroundButtonWhiteActive }, [TOKENS.backgroundButtonFocus]: { [TYPE_OPTIONS.PRIMARY]: convertHexToRgba(theme.orbit.paletteProductNormal, 10), [TYPE_OPTIONS.SECONDARY]: convertHexToRgba(theme.orbit.paletteInkLight, 10), [TYPE_OPTIONS.INFO]: convertHexToRgba(theme.orbit.paletteBlueNormal, 10), [TYPE_OPTIONS.SUCCESS]: convertHexToRgba(theme.orbit.paletteGreenNormal, 10), [TYPE_OPTIONS.WARNING]: convertHexToRgba(theme.orbit.paletteOrangeNormal, 10), [TYPE_OPTIONS.CRITICAL]: convertHexToRgba(theme.orbit.paletteRedNormal, 10), [TYPE_OPTIONS.FACEBOOK]: convertHexToRgba(theme.orbit.paletteSocialFacebook, 10), [TYPE_OPTIONS.GOOGLE]: convertHexToRgba(theme.orbit.paletteInkLight, 10), [TYPE_OPTIONS.WHITE]: convertHexToRgba(theme.orbit.paletteWhite, 20) }, [TOKENS.backgroundButtonBordered]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonBordered, [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonBordered, [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonBordered, [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonBordered, [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonBordered, [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonBordered, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.backgroundButtonBordered, [TYPE_OPTIONS.GOOGLE]: theme.orbit.backgroundButtonBordered, [TYPE_OPTIONS.WHITE]: theme.orbit.backgroundButtonWhiteBordered }, [TOKENS.backgroundButtonBorderedHover]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonBorderedHover, [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonBorderedHover, [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonBorderedHover, [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonBorderedHover, [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonBorderedHover, [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonBorderedHover, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.backgroundButtonBorderedHover, [TYPE_OPTIONS.GOOGLE]: theme.orbit.backgroundButtonBorderedHover, [TYPE_OPTIONS.WHITE]: theme.orbit.backgroundButtonWhiteBorderedHover }, [TOKENS.backgroundButtonBorderedActive]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonBorderedActive, [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonBorderedActive, [TYPE_OPTIONS.INFO]: theme.orbit.backgroundButtonBorderedActive, [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundButtonBorderedActive, [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundButtonBorderedActive, [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonBorderedActive, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.backgroundButtonBorderedActive, [TYPE_OPTIONS.GOOGLE]: theme.orbit.backgroundButtonBorderedActive, [TYPE_OPTIONS.WHITE]: theme.orbit.backgroundButtonWhiteBorderedActive }, [TOKENS.colorTextButton]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimary, [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondary, [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfo, [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccess, [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarning, [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCritical, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.colorTextButtonFacebook, [TYPE_OPTIONS.GOOGLE]: theme.orbit.colorTextButtonGoogle, [TYPE_OPTIONS.WHITE]: theme.orbit.colorTextButtonWhite }, [TOKENS.colorTextButtonBordered]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimaryBordered, [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondaryBordered, [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfoBordered, [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccessBordered, [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarningBordered, [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCriticalBordered, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.colorTextButtonFacebookBordered, [TYPE_OPTIONS.GOOGLE]: theme.orbit.colorTextButtonGoogleBordered, [TYPE_OPTIONS.WHITE]: theme.orbit.colorTextButtonWhiteBordered }, [TOKENS.colorTextButtonHover]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimaryHover, [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondaryHover, [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfoHover, [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccessHover, [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarningHover, [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCriticalHover, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.colorTextButtonFacebookHover, [TYPE_OPTIONS.GOOGLE]: theme.orbit.colorTextButtonGoogleHover, [TYPE_OPTIONS.WHITE]: theme.orbit.colorTextButtonWhiteHover }, [TOKENS.colorTextButtonBorderedHover]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimaryBorderedHover, [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondaryBorderedHover, [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfoBorderedHover, [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccessBorderedHover, [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarningBorderedHover, [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCriticalBorderedHover, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.colorTextButtonFacebookBorderedHover, [TYPE_OPTIONS.GOOGLE]: theme.orbit.colorTextButtonGoogleBorderedHover, [TYPE_OPTIONS.WHITE]: theme.orbit.colorTextButtonWhiteBorderedHover }, [TOKENS.colorTextButtonActive]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimaryActive, [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondaryActive, [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfoActive, [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccessActive, [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarningActive, [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCriticalActive, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.colorTextButtonFacebookActive, [TYPE_OPTIONS.GOOGLE]: theme.orbit.colorTextButtonGoogleActive, [TYPE_OPTIONS.WHITE]: theme.orbit.colorTextButtonWhiteActive }, [TOKENS.colorTextButtonBorderedActive]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimaryBorderedActive, [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondaryBorderedActive, [TYPE_OPTIONS.INFO]: theme.orbit.colorTextButtonInfoBorderedActive, [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextButtonSuccessBorderedActive, [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextButtonWarningBorderedActive, [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCriticalBorderedActive, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.colorTextButtonFacebookBorderedActive, [TYPE_OPTIONS.GOOGLE]: theme.orbit.colorTextButtonGoogleBorderedActive, [TYPE_OPTIONS.WHITE]: theme.orbit.colorTextButtonWhiteBorderedActive }, [TOKENS.borderColorButton]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.borderColorButtonPrimaryBordered, [TYPE_OPTIONS.SECONDARY]: theme.orbit.borderColorButtonSecondaryBordered, [TYPE_OPTIONS.INFO]: theme.orbit.borderColorButtonInfoBordered, [TYPE_OPTIONS.SUCCESS]: theme.orbit.borderColorButtonSuccessBordered, [TYPE_OPTIONS.WARNING]: theme.orbit.borderColorButtonWarningBordered, [TYPE_OPTIONS.CRITICAL]: theme.orbit.borderColorButtonCriticalBordered, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.borderColorButtonFacebookBordered, [TYPE_OPTIONS.GOOGLE]: theme.orbit.borderColorButtonGoogleBordered, [TYPE_OPTIONS.WHITE]: theme.orbit.borderColorButtonWhiteBordered }, [TOKENS.borderColorButtonHover]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.borderColorButtonPrimaryBorderedHover, [TYPE_OPTIONS.SECONDARY]: theme.orbit.borderColorButtonSecondaryBorderedHover, [TYPE_OPTIONS.INFO]: theme.orbit.borderColorButtonInfoBorderedHover, [TYPE_OPTIONS.SUCCESS]: theme.orbit.borderColorButtonSuccessBorderedHover, [TYPE_OPTIONS.WARNING]: theme.orbit.borderColorButtonWarningBorderedHover, [TYPE_OPTIONS.CRITICAL]: theme.orbit.borderColorButtonCriticalBorderedHover, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.borderColorButtonFacebookBorderedHover, [TYPE_OPTIONS.GOOGLE]: theme.orbit.borderColorButtonGoogleBorderedHover, [TYPE_OPTIONS.WHITE]: theme.orbit.borderColorButtonWhiteBorderedHover }, [TOKENS.borderColorButtonActive]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.borderColorButtonPrimaryBorderedActive, [TYPE_OPTIONS.SECONDARY]: theme.orbit.borderColorButtonSecondaryBorderedActive, [TYPE_OPTIONS.INFO]: theme.orbit.borderColorButtonInfoBorderedActive, [TYPE_OPTIONS.SUCCESS]: theme.orbit.borderColorButtonSuccessBorderedActive, [TYPE_OPTIONS.WARNING]: theme.orbit.borderColorButtonWarningBorderedActive, [TYPE_OPTIONS.CRITICAL]: theme.orbit.borderColorButtonCriticalBorderedActive, [TYPE_OPTIONS.FACEBOOK]: theme.orbit.borderColorButtonFacebookBorderedActive, [TYPE_OPTIONS.GOOGLE]: theme.orbit.borderColorButtonGoogleBorderedActive, [TYPE_OPTIONS.WHITE]: theme.orbit.borderColorButtonWhiteBorderedActive }, [TOKENS.borderColorButtonFocus]: { [TYPE_OPTIONS.PRIMARY]: convertHexToRgba(theme.orbit.paletteProductNormal, 50), [TYPE_OPTIONS.SECONDARY]: convertHexToRgba(theme.orbit.paletteInkLight, 50), [TYPE_OPTIONS.INFO]: convertHexToRgba(theme.orbit.paletteBlueNormal, 50), [TYPE_OPTIONS.SUCCESS]: convertHexToRgba(theme.orbit.paletteGreenNormal, 50), [TYPE_OPTIONS.WARNING]: convertHexToRgba(theme.orbit.paletteOrangeNormal, 50), [TYPE_OPTIONS.CRITICAL]: convertHexToRgba(theme.orbit.paletteRedNormal, 50), [TYPE_OPTIONS.FACEBOOK]: convertHexToRgba(theme.orbit.paletteSocialFacebook, 50), [TYPE_OPTIONS.GOOGLE]: convertHexToRgba(theme.orbit.paletteInkLight, 50), [TYPE_OPTIONS.WHITE]: convertHexToRgba(theme.orbit.paletteWhite, 50) } }; return tokens[name][type]; }; export default getTypeToken;