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

107 lines (106 loc) • 7.21 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
"use strict"; exports.__esModule = true; exports.default = void 0; var _orbitDesignTokens = require("@kiwicom/orbit-design-tokens"); var _consts = require("../consts"); const getButtonTypeToken = ({ name, type, theme }) => { const tokens = { [_consts.TOKENS.backgroundButton]: { [_consts.TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonPrimary, [_consts.TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonSecondary, [_consts.TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCritical, [_consts.TYPE_OPTIONS.WHITE]: theme.orbit.backgroundButtonWhite, [_consts.TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.backgroundButtonPrimarySubtle, [_consts.TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.backgroundButtonCriticalSubtle, [_consts.TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.backgroundButtonBundleBasic, [_consts.TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.backgroundButtonBundleMedium, [_consts.TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.backgroundButtonBundleTop }, [_consts.TOKENS.backgroundButtonHover]: { [_consts.TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonPrimaryHover, [_consts.TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonSecondaryHover, [_consts.TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCriticalHover, [_consts.TYPE_OPTIONS.WHITE]: theme.orbit.backgroundButtonWhiteHover, [_consts.TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.backgroundButtonPrimarySubtleHover, [_consts.TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.backgroundButtonCriticalSubtleHover, [_consts.TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.backgroundButtonBundleBasicHover, [_consts.TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.backgroundButtonBundleMediumHover, [_consts.TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.backgroundButtonBundleTopHover }, [_consts.TOKENS.backgroundButtonActive]: { [_consts.TYPE_OPTIONS.PRIMARY]: theme.orbit.backgroundButtonPrimaryActive, [_consts.TYPE_OPTIONS.SECONDARY]: theme.orbit.backgroundButtonSecondaryActive, [_consts.TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundButtonCriticalActive, [_consts.TYPE_OPTIONS.WHITE]: theme.orbit.backgroundButtonWhiteActive, [_consts.TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.backgroundButtonPrimarySubtleActive, [_consts.TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.backgroundButtonCriticalSubtleActive, [_consts.TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.backgroundButtonBundleBasicActive, [_consts.TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.backgroundButtonBundleMediumActive, [_consts.TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.backgroundButtonBundleTopActive }, [_consts.TOKENS.backgroundButtonFocus]: { [_consts.TYPE_OPTIONS.PRIMARY]: (0, _orbitDesignTokens.convertHexToRgba)(theme.orbit.paletteProductNormal, 10), [_consts.TYPE_OPTIONS.SECONDARY]: (0, _orbitDesignTokens.convertHexToRgba)(theme.orbit.paletteInkNormal, 10), [_consts.TYPE_OPTIONS.CRITICAL]: (0, _orbitDesignTokens.convertHexToRgba)(theme.orbit.paletteRedNormal, 10), [_consts.TYPE_OPTIONS.WHITE]: (0, _orbitDesignTokens.convertHexToRgba)(theme.orbit.paletteWhite, 20), [_consts.TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.backgroundButtonPrimarySubtleFocus, [_consts.TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.backgroundButtonCriticalSubtleFocus, [_consts.TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.backgroundButtonBundleBasic, [_consts.TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.backgroundButtonBundleMedium, [_consts.TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.backgroundButtonBundleTop }, [_consts.TOKENS.colorTextButton]: { [_consts.TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimary, [_consts.TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondary, [_consts.TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCritical, [_consts.TYPE_OPTIONS.WHITE]: theme.orbit.colorTextButtonWhite, [_consts.TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.colorTextButtonPrimarySubtle, [_consts.TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.colorTextButtonCriticalSubtle, [_consts.TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.paletteWhite, [_consts.TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.paletteWhite, [_consts.TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.paletteWhite }, [_consts.TOKENS.colorTextButtonHover]: { [_consts.TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimaryHover, [_consts.TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondaryHover, [_consts.TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCriticalHover, [_consts.TYPE_OPTIONS.WHITE]: theme.orbit.colorTextButtonWhiteHover, [_consts.TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.colorTextButtonPrimarySubtleHover, [_consts.TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.colorTextButtonCriticalSubtleHover, [_consts.TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.paletteWhite, [_consts.TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.paletteWhite, [_consts.TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.paletteWhite }, [_consts.TOKENS.colorTextButtonActive]: { [_consts.TYPE_OPTIONS.PRIMARY]: theme.orbit.colorTextButtonPrimaryActive, [_consts.TYPE_OPTIONS.SECONDARY]: theme.orbit.colorTextButtonSecondaryActive, [_consts.TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextButtonCriticalActive, [_consts.TYPE_OPTIONS.WHITE]: theme.orbit.colorTextButtonWhiteActive, [_consts.TYPE_OPTIONS.PRIMARY_SUBTLE]: theme.orbit.colorTextButtonPrimarySubtleActive, [_consts.TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.colorTextButtonCriticalSubtleActive, [_consts.TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.paletteWhite, [_consts.TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.paletteWhite, [_consts.TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.paletteWhite }, [_consts.TOKENS.borderColorButtonFocus]: { [_consts.TYPE_OPTIONS.PRIMARY]: (0, _orbitDesignTokens.convertHexToRgba)(theme.orbit.paletteProductNormal, 50), [_consts.TYPE_OPTIONS.SECONDARY]: (0, _orbitDesignTokens.convertHexToRgba)(theme.orbit.paletteInkNormal, 30), [_consts.TYPE_OPTIONS.CRITICAL]: (0, _orbitDesignTokens.convertHexToRgba)(theme.orbit.paletteRedNormal, 50), // because it's not possible to see outline on the white bg, we use active token [_consts.TYPE_OPTIONS.WHITE]: (0, _orbitDesignTokens.convertHexToRgba)(theme.orbit.paletteWhiteActive, 50), [_consts.TYPE_OPTIONS.PRIMARY_SUBTLE]: (0, _orbitDesignTokens.convertHexToRgba)(theme.orbit.paletteProductNormal, 50), [_consts.TYPE_OPTIONS.CRITICAL_SUBTLE]: (0, _orbitDesignTokens.convertHexToRgba)(theme.orbit.paletteRedNormal, 50), // TODO: currently we do not have tokens for these colors [_consts.TYPE_OPTIONS.BUNDLE_BASIC]: (0, _orbitDesignTokens.convertHexToRgba)(`#E13E3B`, 50), [_consts.TYPE_OPTIONS.BUNDLE_MEDIUM]: (0, _orbitDesignTokens.convertHexToRgba)(`#3719AB`, 50), [_consts.TYPE_OPTIONS.BUNDLE_TOP]: (0, _orbitDesignTokens.convertHexToRgba)(`#2D2D2E`, 50) } }; return tokens[name][type]; }; var _default = getButtonTypeToken; exports.default = _default;