UNPKG

@kubit-ui-web/react-components

Version:

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

www.kubit-ui.com

kubit-ui/kubit-react-components

161 lines (160 loc) • 6.28 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
export declare const COLORS: { BRAND: { color_brand_font_50: string; color_brand_icon_50: string; color_brand_border_50: string; color_brand_bg_50: string; color_brand_border_100: string; color_brand_font_100: string; }; SECONDARY: { color_secondary_font_50: string; color_secondary_font_100: string; color_secondary_font_150: string; color_secondary_icon_50: string; color_secondary_icon_100: string; color_secondary_icon_150: string; color_secondary_border_50: string; color_secondary_border_100: string; color_secondary_border_150: string; color_secondary_bg_50: string; color_secondary_bg_100: string; color_secondary_bg_150: string; color_secondary_bg_200: string; color_secondary_bg_250: string; }; NEUTRAL: { color_neutral_font_50: string; color_neutral_font_100: string; color_neutral_font_150: string; color_neutral_font_200: string; color_neutral_font_250: string; color_neutral_icon_50: string; color_neutral_icon_100: string; color_neutral_icon_150: string; color_neutral_icon_200: string; color_neutral_icon_250: string; color_neutral_border_50: string; color_neutral_border_100: string; color_neutral_border_150: string; color_neutral_border_200: string; color_neutral_border_250: string; color_neutral_bg_50: string; color_neutral_bg_100: string; color_neutral_bg_150: string; color_neutral_bg_200: string; color_neutral_bg_250: string; }; ACCENT: { color_accent_default_font_50: string; color_accent_default_font_100: string; color_accent_default_font_150: string; color_accent_default_icon_50: string; color_accent_default_icon_100: string; color_accent_default_icon_150: string; color_accent_default_border_50: string; color_accent_default_border_100: string; color_accent_default_border_150: string; color_accent_default_bg_50: string; color_accent_default_bg_100: string; color_accent_default_bg_150: string; color_accent_hover_font_200: string; color_accent_hover_icon_150: string; color_accent_hover_icon_200: string; color_accent_hover_bg_50: string; color_accent_hover_bg_100: string; color_accent_hover_bg_150: string; color_accent_pressed_font_200: string; color_accent_pressed_font_250: string; color_accent_pressed_icon_200: string; color_accent_pressed_icon_250: string; color_accent_pressed_bg_50: string; color_accent_pressed_bg_150: string; color_accent_loading_icon_50: string; color_accent_loading_icon_100: string; color_accent_loading_border_50: string; color_accent_loading_border_100: string; color_accent_loading_bg_50: string; color_accent_loading_bg_100: string; color_accent_loading_bg_150: string; color_code_50: string; color_code_100: string; color_code_150: string; color_code_200: string; color_code_250: string; }; PRESSED: { color_accent_pressed_font_50: string; color_accent_pressed_font_100: string; color_accent_pressed_font_150: string; color_accent_pressed_bg_50: string; color_accent_pressed_bg_100: string; color_accent_pressed_bg_200: string; color_accent_pressed_icon_50: string; color_accent_pressed_icon_100: string; color_accent_pressed_icon_150: string; color_accent_pressed_icon_250: string; color_accent_pressed_border_50: string; }; KEYBOARD_FOCUS: { color_accentKeyboardFocus_border_50: string; color_accentKeyboardFocus_border_100: string; }; DISABLED: { color_accentDisabled_font_50: string; color_accentDisabled_font_100: string; color_accentDisabled_font_150: string; color_accentDisabled_icon_50: string; color_accentDisabled_icon_100: string; color_accentDisabled_icon_150: string; color_accentDisabled_border_50: string; color_accentDisabled_border_100: string; color_accentDisabled_border_150: string; color_accentDisabled_bg_50: string; color_accentDisabled_bg_100: string; color_accentDisabled_bg_150: string; }; FEEDBACK: { color_feedbackError_font_50: string; color_feedbackSuccess_font_50: string; color_feedbackInfo_icon_50: string; color_feedback_warning_icon_50: string; color_feedback_success_icon_50: string; color_feedbackSuccess_icon_100: string; color_feedback_error_icon_50: string; color_feedbackError_icon_100: string; color_feedback_info_border_50: string; color_feedbackInfo_border_100: string; color_feedback_warning_border_50: string; color_feedbackWarning_border_100: string; color_feedback_success_border_50: string; color_feedbackSuccess_border_100: string; color_feedback_error_border_50: string; color_feedbackError_border_100: string; color_feedback_info_bg_50: string; color_feedback_info_bg_100: string; color_feedback_info_bg_150: string; color_feedback_warning_bg_50: string; color_feedback_warning_bg_100: string; color_feedback_warning_bg_150: string; color_feedback_success_bg_50: string; color_feedback_success_bg_100: string; color_feedback_success_bg_150: string; color_feedback_error_bg_50: string; color_feedback_error_bg_100: string; color_feedbackError_bg_150: string; }; DECORATIVE: { color_decorative_50: string; color_decorative_100: string; color_decorative_150: string; color_decorative_200: string; color_decorative_250: string; color_decorative_300: string; color_decorative_350: string; }; HOVER: { color_accent_hover_bg_50: string; }; }; export type ColorsType = typeof COLORS;