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

kiwicom/orbit

104 lines (102 loc) • 5.97 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
import { convertHexToRgba } from "@kiwicom/orbit-design-tokens"; import { TOKENS, TYPE_OPTIONS } from "../consts"; const getButtonTypeToken = ({ name, type, theme }) => { const tokens = { [TOKENS.backgroundButton]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonPrimary, [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonSecondary, [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCritical, [TYPE_OPTIONS.WHITE]: theme.orbit.backgroundButtonWhite, [TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.paletteProductLight, [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.paletteRedLight, [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.backgroundButtonBundleBasic, [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.backgroundButtonBundleMedium, [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.backgroundButtonBundleTop }, [TOKENS.backgroundButtonHover]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonPrimaryHover, [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonSecondaryHover, [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCriticalHover, [TYPE_OPTIONS.WHITE]: theme.orbit.backgroundButtonWhiteHover, [TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.paletteProductLightHover, [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.paletteRedLightHover, [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.backgroundButtonBundleBasicHover, [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.backgroundButtonBundleMediumHover, [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.backgroundButtonBundleTopHover }, [TOKENS.backgroundButtonActive]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonPrimaryActive, [TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonSecondaryActive, [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCriticalActive, [TYPE_OPTIONS.WHITE]: theme.orbit.backgroundButtonWhiteActive, [TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.paletteProductLightActive, [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.paletteRedLightActive, [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.backgroundButtonBundleBasicActive, [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.backgroundButtonBundleMediumActive, [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.backgroundButtonBundleTopActive }, [TOKENS.backgroundButtonFocus]: { [TYPE_OPTIONS.PRIMARY]: convertHexToRgba(theme.orbit.paletteProductNormal, 10), [TYPE_OPTIONS.SECONDARY]: convertHexToRgba(theme.orbit.paletteInkLight, 10), [TYPE_OPTIONS.CRITICAL]: convertHexToRgba(theme.orbit.paletteRedNormal, 10), [TYPE_OPTIONS.WHITE]: convertHexToRgba(theme.orbit.paletteWhite, 20), [TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.paletteProductLight, [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.paletteRedLight, [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.backgroundButtonBundleBasic, [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.backgroundButtonBundleMedium, [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.backgroundButtonBundleTop }, [TOKENS.colorTextButton]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimary, [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondary, [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCritical, [TYPE_OPTIONS.WHITE]: theme.orbit.colorTextButtonWhite, [TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.paletteProductNormal, [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.paletteRedNormal, [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.paletteWhite, [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.paletteWhite, [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.paletteWhite }, [TOKENS.colorTextButtonHover]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimaryHover, [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondaryHover, [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCriticalHover, [TYPE_OPTIONS.WHITE]: theme.orbit.colorTextButtonWhiteHover, [TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.paletteProductDark, [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.paletteRedDark, [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.paletteWhite, [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.paletteWhite, [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.paletteWhite }, [TOKENS.colorTextButtonActive]: { [TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimaryActive, [TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondaryActive, [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCriticalActive, [TYPE_OPTIONS.WHITE]: theme.orbit.colorTextButtonWhiteActive, [TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.paletteProductDark, [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.paletteRedDark, [TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.paletteWhite, [TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.paletteWhite, [TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.paletteWhite }, [TOKENS.borderColorButtonFocus]: { [TYPE_OPTIONS.PRIMARY]: convertHexToRgba(theme.orbit.paletteProductNormal, 50), [TYPE_OPTIONS.SECONDARY]: convertHexToRgba(theme.orbit.paletteInkLight, 30), [TYPE_OPTIONS.CRITICAL]: convertHexToRgba(theme.orbit.paletteRedNormal, 50), // because it's not possible to see outline on the white bg, we use active token [TYPE_OPTIONS.WHITE]: convertHexToRgba(theme.orbit.paletteWhiteActive, 50), [TYPE_OPTIONS.PRIMARY_SUBTLE]: convertHexToRgba(theme.orbit.paletteProductNormal, 50), [TYPE_OPTIONS.CRITICAL_SUBTLE]: convertHexToRgba(theme.orbit.paletteRedNormal, 50), // TODO: currently we do not have tokens for these colors [TYPE_OPTIONS.BUNDLE_BASIC]: convertHexToRgba(`#E13E3B`, 50), [TYPE_OPTIONS.BUNDLE_MEDIUM]: convertHexToRgba(`#3719AB`, 50), [TYPE_OPTIONS.BUNDLE_TOP]: convertHexToRgba(`#2D2D2E`, 50) } }; return tokens[name][type]; }; export default getButtonTypeToken;