bfg-common 1.4.580 → 1.4.581

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,321 +1,323 @@
1
- @import 'variables.scss';
2
- :root {
3
- --scrollbar-thumb: #bbb;
4
- --scrollbar-track: #eee;
5
-
6
- --global-font-color: #{$--grey-200};
7
- --global-font-color2: #{$light-black};
8
- --global-font-color3: #{$--grey-200};
9
- --global-font-color4: #{$--grey-100};
10
- --global-font-color5: #{$light-black};
11
- --global-font-color6: #{$--grey-800};
12
- --global-font-color7: #{$--grey-900};
13
- --global-font-color8: #{$--grey-100};
14
- --global-font-color9: #{$--grey-200};
15
- --global-border-color: #ccc;
16
- --global-border-colo2: #{$--grey-100};
17
- --global-bg-color: #{$white};
18
- --global-bg-color2: #{$light-grey-100};
19
- --global-text-color: #5659b8;
20
- --global-text-color2: #{$--blue-150};
21
- --global-text-color3: #{$--grey-100};
22
- --block-view-bg-color: #{$light-grey};
23
- --block-view-bg-color2: #{$white};
24
- --block-view-bg-color3: #{$white};
25
- --block-view-bg-color4: #{$light-grey};
26
- --block-view-bg-color5: #{$white};
27
- --block-view-bg-color6: #{$light-grey-150};
28
- --block-border-color: #{$--grey-850};
29
- --block-border-color2: #{$--grey-850};
30
-
31
- --main-color-mode: #{$black};
32
-
33
- --modal-bg-color: #fff;
34
- --modal-other-bg-color: #fff;
35
-
36
- --close-icon: #8c8c8c;
37
- --arrows-icon: #000;
38
- --info-icon: #{$--blue-150};
39
- --title-color: #e9ecef;
40
- --triger-icon-color: #{$--grey-200}; //#666
41
- --ellipsis-vertical-icon-color: #{$--grey-100};
42
-
43
- --progress-color: #{$--blue-100};
44
- --progress-bg-color: #{$--grey-900};
45
- --progress-value-bg-color: #61b715; // equal in dark and white modes
46
-
47
- --dropdown-bg-color: #fff;
48
- --dropdown-item-color: #0072a3;
49
-
50
- /* UI_I_Button Variables light mode */
51
- /* outline */
52
- --btn-outline-border-color: #0079b8;
53
- --btn-outline-hover-bg-color: #e1f1f6;
54
- --btn-outline-hover-color: #004d8a;
55
- --btn-outline-box-shadow-color: #0095d3;
56
- /* primary */
57
- --btn-primary-color: #{$white};
58
- --btn-primary-border-color: #{$--blue-100};
59
- --btn-primary-hover-bg-color: #004d8a;
60
- --btn-primary-hover-color: #e1f1f6;
61
- --btn-primary-box-shadow-color: #0095d3;
62
- --btn-primary-disabled-color: #666;
63
- --btn-primary-disabled-bg-color: #ccc;
64
- /* warning */
65
- --btn-warning-color: #{$white};
66
- --btn-warning-bg-color: #{$--red-200};
67
- --btn-warning-hover-bg-color: #{$--red-150};
68
- --btn-warning-box-shadow-color: #{$--red-50};
69
- /* link */
70
- --btn-link-color: #0079b8;
71
- --btn-link-hover-color: #004d8a;
72
- --btn-link-disabled: #{$--grey-150};
73
-
74
- /* Form Input Label Variables light mode */
75
- --form-label-color: #000;
76
- --form-input-color: #000;
77
- --form-input-border-color: #9a9a9a;
78
-
79
- /* Checkbox Variables light mode */
80
- --checkbox-label-color: #454545;
81
- --checkbox-background-color: #0079b8;
82
- --checkbox-border-color: #575757;
83
- --checkbox-mark-color: #fff;
84
- --checkbox-mark-background-color: #737373;
85
- --checkbox-value-active-color: #61b715;
86
-
87
- /* Select Variables light mode */
88
- --select-color: #000;
89
-
90
- /* NavBar Variables light mode */
91
- --nav-link-color: #454545;
92
- --nav-link-active-color: #000;
93
- --nav-active-box-shadow-color: #0079b8;
94
- --nav-link-hover-color: #666666;
95
- --nav-panel-border-color: #ccc;
96
-
97
- //--gutter-bg-color: #eee; // for old
98
- --gutter-bg-color: #e9ebed; // for new
99
- //--gutter-hover-bg-color: #0079b8; // for old
100
- --gutter-hover-bg-color: #008fb6; // for new
101
- //--gutter-active-bg-color: #a6d8e7; // for old
102
- --gutter-active-bg-color: #66bce6; // for new
103
-
104
- /* Items Row Variables light mode */
105
- --row-hover-bg-color: #{$light-grey-100};
106
- --row-hover-border-color: #{$--grey-200};
107
- --row-selected-text-color: #{$white};
108
- --row-selected-bg-color: #{$--blue-800};
109
-
110
- /* Vertical Steps Variables light mode */
111
- --vertical-steps-active-color: #fff;
112
- --vertical-steps-complete-color: #454545;
113
- --vertical-steps-active-bg-color: #{$--blue-800};
114
- --vertical-steps-complete-bg-color: #{$light-grey-100};
115
- --vertical-steps-hover-border-color: #{$--grey-200};
116
- --vertical-nav-active-item-color: #fff;
117
- --vertical-nav-active-bg-color: #29414e;
118
- --vertical-nav-hover-item-color: #29414e;
119
-
120
- /* Tooltip Variables light mode */
121
- --tooltip-content-text-color: #{$white};
122
- --tooltip-content-bg-color: #{$black};
123
- --tooltip-content-error-bg-color: #{#c92100};
124
-
125
- /* Select File Variables light mode */
126
- --select-file-text-color: #182531;
127
- --select-file-selected-text-color: #ffffff;
128
- --select-file-selected-bg: #213444;
129
- --select-file-hover-bg: #e9ebed66;
130
- --select-file-sprt-color: #e9ebed;
131
- --select-file-sprt-handler-color: #9da6ad;
132
- --select-file-sprt-handler-hover-color: #4d5d69;
133
- --select-file-sprt-handler-selected-color: #008fd6;
134
- --select-file-header-bg: #e9ebed66;
135
- --select-file-header-arrow-color: #008fd6;
136
- --select-file-info-color: #4d5d69;
137
-
138
- /* Table Action */
139
- --table-actions-icon: #4d5d69;
140
- --table-actions-icon-hover: #008fd6;
141
- --table-actions-view: #182531;
142
- --table-actions-remove: #ea3223;
143
- --table-actions-bg-hover: #e9ebed66;
144
-
145
- // Diagram new view
146
- --diagram-container-bg: #ffffff;
147
- --diagram-central-panel-bg: #e9ebed66;
148
- --diagram-block-stroke: #d3d6da;
149
- --diagram-block-bg: #ffffff;
150
- --diagram-connect-line: #d3d6da;
151
- --diagram-selection-line: #008fd6;
152
- --diagram-selection-bg: #ebf6fc;
153
- --diagram-highlight-line: #fbce28;
154
- --diagram-highlight-bg: #fff9e5;
155
- --diagram-content-text: #4d5d69;
156
- --diagram-content-text-hover: #182531;
157
- --diagram-content-text-selected: #008fd6;
158
- --diagram-content-text-selected-hover: #0081c1;
159
- --diagram-content-second-text: #182531;
160
- --diagram-content-second-disabled-text: #bdc3c7;
161
- --diagram-content-third-text: #9da6ad;
162
- --diagram-info-text: #4d5d69;
163
- --diagram-info-second-text: #9da6ad;
164
- }
165
-
166
- :root.dark-theme {
167
- --scrollbar-thumb: #29414e;
168
- --scrollbar-track: #17242b;
169
-
170
- --global-font-color: #{$--grey-800};
171
- --global-font-color2: #{#eaedf0};
172
- --global-font-color3: #{$light-white-100};
173
- --global-font-color4: #{$light-white-100};
174
- --global-font-color5: #{$light-black};
175
- --global-font-color8: #{$white};
176
- --global-font-color9: #{$light-blue-100};
177
- --global-border-color: #495865;
178
- --global-border-colo2: #{$light-white-100};
179
- --global-bg-color: #17242b;
180
- --global-bg-color2: #{$--blue-950};
181
- --global-text-color: #{$--blue-200};
182
- --global-text-color2: #{$--blue-200};
183
- --global-text-color3: #{$--grey-700};
184
- --block-view-bg-color: #{$--blue-800};
185
- --block-view-bg-color2: #{$--blue-750};
186
- --block-view-bg-color3: #{$--blue-800};
187
- --block-view-bg-color4: #{$--blue-700};
188
- --block-view-bg-color5: #{$--blue-700};
189
- --block-view-bg-color6: #{$--blue-700};
190
- --block-border-color: #{$black};
191
- --block-border-color2: #{$--blue-960};
192
-
193
- --main-color-mode: #{$light-white};
194
-
195
- --modal-bg-color: #{$--blue-800};
196
- --modal-other-bg-color: #22343c;
197
-
198
- --close-icon: #{$light-grey};
199
- --arrows-icon: #e9ecef;
200
- --info-icon: #{$--grey-800};
201
- --title-color: #565656;
202
- --triger-icon-color: #fff;
203
- --ellipsis-vertical-icon-color: #{$light-white-100};
204
-
205
- --progress-color: #{$--blue-250};
206
- --progress-bg-color: #{$--blue-900};
207
-
208
- --dropdown-bg-color: #1b2a32;
209
- --dropdown-item-color: #79c6e6;
210
-
211
- /* Button Variables dark mode */
212
- /* outline */
213
- --btn-outline-border-color: #89cbdf;
214
- --btn-outline-hover-bg-color: hsla(0, 0%, 100%, 0.1);
215
- --btn-outline-hover-color: #57c8ea;
216
- --btn-outline-box-shadow-color: #000;
217
- /* primary */
218
- --btn-primary-color: #{$black};
219
- --btn-primary-border-color: #{$--blue-250};
220
- --btn-primary-hover-bg-color: #57c8ea;
221
- --btn-primary-hover-color: #000;
222
- --btn-primary-box-shadow-color: #0065ad;
223
- --btn-primary-disabled-bg-color: #fff;
224
- --btn-primary-disabled-color: #000;
225
- /* warning */
226
- --btn-warning-color: #{$black};
227
- --btn-warning-bg-color: #{$--red-300};
228
- --btn-warning-hover-bg-color: #{$--red-400};
229
- --btn-warning-box-shadow-color: #{$--red-100};
230
- /* link */
231
- --btn-link-color: #89cbdf;
232
- --btn-link-hover-color: #57c8ea;
233
- --btn-link-disabled: #{$white};
234
-
235
- /* Form Input Label Variables dark mode */
236
- --form-label-color: #adbbc4;
237
- --form-input-color: #e9ecef;
238
- --form-input-border-color: #adbbc4;
239
-
240
- /* Checkbox Variables dark mode */
241
- --checkbox-label-color: #acbac3;
242
- --checkbox-background-color: #4aaed9;
243
- --checkbox-border-color: #e9ecef;
244
- --checkbox-mark-color: #000;
245
- --checkbox-mark-background-color: #fff;
246
- --checkbox-value-active-color: #61b715;
247
-
248
- /* Select Variables light mode */
249
- --select-color: #000;
250
-
251
- /* NavBar Variables dark mode */
252
- --nav-link-color: #acbac3;
253
- --nav-link-active-color: #fff;
254
- --nav-active-box-shadow-color: #4aaed9;
255
- --nav-link-hover-color: #acbac3;
256
- --nav-panel-border-color: #495865;
257
-
258
- --gutter-bg-color: #25333d;
259
- --gutter-hover-bg-color: #495a67;
260
- --gutter-active-bg-color: #495a67;
261
-
262
- /* Items Row Variables light mode */
263
- --row-hover-bg-color: #{$--blue-950};
264
- --row-hover-border-color: #{$white};
265
- --row-selected-text-color: #{$black};
266
- --row-selected-bg-color: #{$light-blue};
267
-
268
- /* Vertical Steps Variables dark mode */
269
- --vertical-steps-active-color: #000;
270
- --vertical-steps-complete-color: #acbac3;
271
- --vertical-steps-active-bg-color: #{$light-blue};
272
- --vertical-steps-complete-bg-color: #{$--blue-950};
273
- --vertical-steps-hover-border-color: #{$white};
274
- --vertical-nav-active-item-color: #{$black};
275
- --vertical-nav-active-bg-color: #d8e3e9;
276
- --vertical-nav-hover-item-color: #d8e3e9;
277
-
278
- /* Tooltip Variables light mode */
279
- --tooltip-content-text-color: #{$black};
280
- --tooltip-content-bg-color: #{$white};
281
-
282
- /* Select File Variables dark mode */
283
- --select-file-text-color: #e9eaec;
284
- --select-file-selected-text-color: #182531;
285
- --select-file-selected-bg: #e9eaec;
286
- --select-file-hover-bg: #e9eaec1f;
287
- --select-file-sprt-color: #e9ebed1f;
288
- --select-file-sprt-handler-color: #9da6ad;
289
- --select-file-sprt-handler-hover-color: #e9eaec;
290
- --select-file-sprt-handler-selected-color: #2ba2de;
291
- --select-file-header-bg: #e9ebed0f;
292
- --select-file-header-arrow-color: #2ba2de;
293
- --select-file-info-color: #e9eaec;
294
-
295
- /* Table Action */
296
- --table-actions-icon: #e9eaec;
297
- --table-actions-icon-hover: #ffffff;
298
- --table-actions-view: #ffffff;
299
- --table-actions-remove: #ea3223;
300
- --table-actions-bg-hover: #e9ebed0f;
301
-
302
- // Diagram new view
303
- --diagram-container-bg: #334453;
304
- --diagram-central-panel-bg: #e9ebed0f;
305
- --diagram-block-stroke: #5c6a76;
306
- --diagram-block-bg: #304150;
307
- --diagram-connect-line: #5c6a76;
308
- --diagram-selection-line: #2ba2de;
309
- --diagram-selection-bg: #2f5167;
310
- --diagram-highlight-line: #fbce28;
311
- --diagram-highlight-bg: #48524b;
312
- --diagram-content-text: #e9eaec;
313
- --diagram-content-text-hover: #ffffff;
314
- --diagram-content-text-selected: #2ba2de;
315
- --diagram-content-text-selected-hover: #008fd6;
316
- --diagram-content-second-text: #e9eaec;
317
- --diagram-content-second-disabled-text: #4d5d69;
318
- --diagram-content-third-text: #9da6ad;
319
- --diagram-info-text: #e9eaec;
320
- --diagram-info-second-text: #9da6ad;
321
- }
1
+ @import 'variables.scss';
2
+ :root {
3
+ --scrollbar-thumb: #bbb;
4
+ --scrollbar-track: #eee;
5
+
6
+ --global-font-color: #{$--grey-200};
7
+ --global-font-color2: #{$light-black};
8
+ --global-font-color3: #{$--grey-200};
9
+ --global-font-color4: #{$--grey-100};
10
+ --global-font-color5: #{$light-black};
11
+ --global-font-color6: #{$--grey-800};
12
+ --global-font-color7: #{$--grey-900};
13
+ --global-font-color8: #{$--grey-100};
14
+ --global-font-color9: #{$--grey-200};
15
+ --global-border-color: #ccc;
16
+ --global-border-colo2: #{$--grey-100};
17
+ --global-bg-color: #{$white};
18
+ --global-bg-color2: #{$light-grey-100};
19
+ --global-text-color: #5659b8;
20
+ --global-text-color2: #{$--blue-150};
21
+ --global-text-color3: #{$--grey-100};
22
+ --block-view-bg-color: #{$light-grey};
23
+ --block-view-bg-color2: #{$white};
24
+ --block-view-bg-color3: #{$white};
25
+ --block-view-bg-color4: #{$light-grey};
26
+ --block-view-bg-color5: #{$white};
27
+ --block-view-bg-color6: #{$light-grey-150};
28
+ --block-border-color: #{$--grey-850};
29
+ --block-border-color2: #{$--grey-850};
30
+
31
+ --main-color-mode: #{$black};
32
+
33
+ --modal-bg-color: #fff;
34
+ --modal-other-bg-color: #fff;
35
+
36
+ --close-icon: #8c8c8c;
37
+ --arrows-icon: #000;
38
+ --info-icon: #{$--blue-150};
39
+ --title-color: #e9ecef;
40
+ --triger-icon-color: #{$--grey-200}; //#666
41
+ --ellipsis-vertical-icon-color: #{$--grey-100};
42
+
43
+ --progress-color: #{$--blue-100};
44
+ --progress-bg-color: #{$--grey-900};
45
+ --progress-value-bg-color: #61b715; // equal in dark and white modes
46
+
47
+ --dropdown-bg-color: #fff;
48
+ --dropdown-item-color: #0072a3;
49
+
50
+ /* UI_I_Button Variables light mode */
51
+ /* outline */
52
+ --btn-outline-border-color: #0079b8;
53
+ --btn-outline-hover-bg-color: #e1f1f6;
54
+ --btn-outline-hover-color: #004d8a;
55
+ --btn-outline-box-shadow-color: #0095d3;
56
+ /* primary */
57
+ --btn-primary-color: #{$white};
58
+ --btn-primary-border-color: #{$--blue-100};
59
+ --btn-primary-hover-bg-color: #004d8a;
60
+ --btn-primary-hover-color: #e1f1f6;
61
+ --btn-primary-box-shadow-color: #0095d3;
62
+ --btn-primary-disabled-color: #666;
63
+ --btn-primary-disabled-bg-color: #ccc;
64
+ /* warning */
65
+ --btn-warning-color: #{$white};
66
+ --btn-warning-bg-color: #{$--red-200};
67
+ --btn-warning-hover-bg-color: #{$--red-150};
68
+ --btn-warning-box-shadow-color: #{$--red-50};
69
+ /* link */
70
+ --btn-link-color: #0079b8;
71
+ --btn-link-hover-color: #004d8a;
72
+ --btn-link-disabled: #{$--grey-150};
73
+
74
+ /* Form Input Label Variables light mode */
75
+ --form-label-color: #000;
76
+ --form-input-color: #000;
77
+ --form-input-border-color: #9a9a9a;
78
+
79
+ /* Checkbox Variables light mode */
80
+ --checkbox-label-color: #454545;
81
+ --checkbox-background-color: #0079b8;
82
+ --checkbox-border-color: #575757;
83
+ --checkbox-mark-color: #fff;
84
+ --checkbox-mark-background-color: #737373;
85
+ --checkbox-value-active-color: #61b715;
86
+
87
+ /* Select Variables light mode */
88
+ --select-color: #000;
89
+
90
+ /* NavBar Variables light mode */
91
+ --nav-link-color: #454545;
92
+ --nav-link-active-color: #000;
93
+ --nav-active-box-shadow-color: #0079b8;
94
+ --nav-link-hover-color: #666666;
95
+ --nav-panel-border-color: #ccc;
96
+
97
+ //--gutter-bg-color: #eee; // for old
98
+ --gutter-bg-color: #e9ebed; // for new
99
+ //--gutter-hover-bg-color: #0079b8; // for old
100
+ --gutter-hover-bg-color: #008fb6; // for new
101
+ //--gutter-active-bg-color: #a6d8e7; // for old
102
+ --gutter-active-bg-color: #66bce6; // for new
103
+ --gutter-before-bg: #9da6ad;
104
+
105
+ /* Items Row Variables light mode */
106
+ --row-hover-bg-color: #{$light-grey-100};
107
+ --row-hover-border-color: #{$--grey-200};
108
+ --row-selected-text-color: #{$white};
109
+ --row-selected-bg-color: #{$--blue-800};
110
+
111
+ /* Vertical Steps Variables light mode */
112
+ --vertical-steps-active-color: #fff;
113
+ --vertical-steps-complete-color: #454545;
114
+ --vertical-steps-active-bg-color: #{$--blue-800};
115
+ --vertical-steps-complete-bg-color: #{$light-grey-100};
116
+ --vertical-steps-hover-border-color: #{$--grey-200};
117
+ --vertical-nav-active-item-color: #fff;
118
+ --vertical-nav-active-bg-color: #29414e;
119
+ --vertical-nav-hover-item-color: #29414e;
120
+
121
+ /* Tooltip Variables light mode */
122
+ --tooltip-content-text-color: #{$white};
123
+ --tooltip-content-bg-color: #{$black};
124
+ --tooltip-content-error-bg-color: #{#c92100};
125
+
126
+ /* Select File Variables light mode */
127
+ --select-file-text-color: #182531;
128
+ --select-file-selected-text-color: #ffffff;
129
+ --select-file-selected-bg: #213444;
130
+ --select-file-hover-bg: #e9ebed66;
131
+ --select-file-sprt-color: #e9ebed;
132
+ --select-file-sprt-handler-color: #9da6ad;
133
+ --select-file-sprt-handler-hover-color: #4d5d69;
134
+ --select-file-sprt-handler-selected-color: #008fd6;
135
+ --select-file-header-bg: #e9ebed66;
136
+ --select-file-header-arrow-color: #008fd6;
137
+ --select-file-info-color: #4d5d69;
138
+
139
+ /* Table Action */
140
+ --table-actions-icon: #4d5d69;
141
+ --table-actions-icon-hover: #008fd6;
142
+ --table-actions-view: #182531;
143
+ --table-actions-remove: #ea3223;
144
+ --table-actions-bg-hover: #e9ebed66;
145
+
146
+ // Diagram new view
147
+ --diagram-container-bg: #ffffff;
148
+ --diagram-central-panel-bg: #e9ebed66;
149
+ --diagram-block-stroke: #d3d6da;
150
+ --diagram-block-bg: #ffffff;
151
+ --diagram-connect-line: #d3d6da;
152
+ --diagram-selection-line: #008fd6;
153
+ --diagram-selection-bg: #ebf6fc;
154
+ --diagram-highlight-line: #fbce28;
155
+ --diagram-highlight-bg: #fff9e5;
156
+ --diagram-content-text: #4d5d69;
157
+ --diagram-content-text-hover: #182531;
158
+ --diagram-content-text-selected: #008fd6;
159
+ --diagram-content-text-selected-hover: #0081c1;
160
+ --diagram-content-second-text: #182531;
161
+ --diagram-content-second-disabled-text: #bdc3c7;
162
+ --diagram-content-third-text: #9da6ad;
163
+ --diagram-info-text: #4d5d69;
164
+ --diagram-info-second-text: #9da6ad;
165
+ }
166
+
167
+ :root.dark-theme {
168
+ --scrollbar-thumb: #29414e;
169
+ --scrollbar-track: #17242b;
170
+
171
+ --global-font-color: #{$--grey-800};
172
+ --global-font-color2: #{#eaedf0};
173
+ --global-font-color3: #{$light-white-100};
174
+ --global-font-color4: #{$light-white-100};
175
+ --global-font-color5: #{$light-black};
176
+ --global-font-color8: #{$white};
177
+ --global-font-color9: #{$light-blue-100};
178
+ --global-border-color: #495865;
179
+ --global-border-colo2: #{$light-white-100};
180
+ --global-bg-color: #17242b;
181
+ --global-bg-color2: #{$--blue-950};
182
+ --global-text-color: #{$--blue-200};
183
+ --global-text-color2: #{$--blue-200};
184
+ --global-text-color3: #{$--grey-700};
185
+ --block-view-bg-color: #{$--blue-800};
186
+ --block-view-bg-color2: #{$--blue-750};
187
+ --block-view-bg-color3: #{$--blue-800};
188
+ --block-view-bg-color4: #{$--blue-700};
189
+ --block-view-bg-color5: #{$--blue-700};
190
+ --block-view-bg-color6: #{$--blue-700};
191
+ --block-border-color: #{$black};
192
+ --block-border-color2: #{$--blue-960};
193
+
194
+ --main-color-mode: #{$light-white};
195
+
196
+ --modal-bg-color: #{$--blue-800};
197
+ --modal-other-bg-color: #22343c;
198
+
199
+ --close-icon: #{$light-grey};
200
+ --arrows-icon: #e9ecef;
201
+ --info-icon: #{$--grey-800};
202
+ --title-color: #565656;
203
+ --triger-icon-color: #fff;
204
+ --ellipsis-vertical-icon-color: #{$light-white-100};
205
+
206
+ --progress-color: #{$--blue-250};
207
+ --progress-bg-color: #{$--blue-900};
208
+
209
+ --dropdown-bg-color: #1b2a32;
210
+ --dropdown-item-color: #79c6e6;
211
+
212
+ /* Button Variables dark mode */
213
+ /* outline */
214
+ --btn-outline-border-color: #89cbdf;
215
+ --btn-outline-hover-bg-color: hsla(0, 0%, 100%, 0.1);
216
+ --btn-outline-hover-color: #57c8ea;
217
+ --btn-outline-box-shadow-color: #000;
218
+ /* primary */
219
+ --btn-primary-color: #{$black};
220
+ --btn-primary-border-color: #{$--blue-250};
221
+ --btn-primary-hover-bg-color: #57c8ea;
222
+ --btn-primary-hover-color: #000;
223
+ --btn-primary-box-shadow-color: #0065ad;
224
+ --btn-primary-disabled-bg-color: #fff;
225
+ --btn-primary-disabled-color: #000;
226
+ /* warning */
227
+ --btn-warning-color: #{$black};
228
+ --btn-warning-bg-color: #{$--red-300};
229
+ --btn-warning-hover-bg-color: #{$--red-400};
230
+ --btn-warning-box-shadow-color: #{$--red-100};
231
+ /* link */
232
+ --btn-link-color: #89cbdf;
233
+ --btn-link-hover-color: #57c8ea;
234
+ --btn-link-disabled: #{$white};
235
+
236
+ /* Form Input Label Variables dark mode */
237
+ --form-label-color: #adbbc4;
238
+ --form-input-color: #e9ecef;
239
+ --form-input-border-color: #adbbc4;
240
+
241
+ /* Checkbox Variables dark mode */
242
+ --checkbox-label-color: #acbac3;
243
+ --checkbox-background-color: #4aaed9;
244
+ --checkbox-border-color: #e9ecef;
245
+ --checkbox-mark-color: #000;
246
+ --checkbox-mark-background-color: #fff;
247
+ --checkbox-value-active-color: #61b715;
248
+
249
+ /* Select Variables light mode */
250
+ --select-color: #000;
251
+
252
+ /* NavBar Variables dark mode */
253
+ --nav-link-color: #acbac3;
254
+ --nav-link-active-color: #fff;
255
+ --nav-active-box-shadow-color: #4aaed9;
256
+ --nav-link-hover-color: #acbac3;
257
+ --nav-panel-border-color: #495865;
258
+
259
+ --gutter-bg-color: #25333d;
260
+ --gutter-hover-bg-color: #495a67;
261
+ --gutter-active-bg-color: #495a67;
262
+ --gutter-before-bg: rgba(157, 166, 173, 0.32);
263
+
264
+ /* Items Row Variables light mode */
265
+ --row-hover-bg-color: #{$--blue-950};
266
+ --row-hover-border-color: #{$white};
267
+ --row-selected-text-color: #{$black};
268
+ --row-selected-bg-color: #{$light-blue};
269
+
270
+ /* Vertical Steps Variables dark mode */
271
+ --vertical-steps-active-color: #000;
272
+ --vertical-steps-complete-color: #acbac3;
273
+ --vertical-steps-active-bg-color: #{$light-blue};
274
+ --vertical-steps-complete-bg-color: #{$--blue-950};
275
+ --vertical-steps-hover-border-color: #{$white};
276
+ --vertical-nav-active-item-color: #{$black};
277
+ --vertical-nav-active-bg-color: #d8e3e9;
278
+ --vertical-nav-hover-item-color: #d8e3e9;
279
+
280
+ /* Tooltip Variables light mode */
281
+ --tooltip-content-text-color: #{$black};
282
+ --tooltip-content-bg-color: #{$white};
283
+
284
+ /* Select File Variables dark mode */
285
+ --select-file-text-color: #e9eaec;
286
+ --select-file-selected-text-color: #182531;
287
+ --select-file-selected-bg: #e9eaec;
288
+ --select-file-hover-bg: #e9eaec1f;
289
+ --select-file-sprt-color: #e9ebed1f;
290
+ --select-file-sprt-handler-color: #9da6ad;
291
+ --select-file-sprt-handler-hover-color: #e9eaec;
292
+ --select-file-sprt-handler-selected-color: #2ba2de;
293
+ --select-file-header-bg: #e9ebed0f;
294
+ --select-file-header-arrow-color: #2ba2de;
295
+ --select-file-info-color: #e9eaec;
296
+
297
+ /* Table Action */
298
+ --table-actions-icon: #e9eaec;
299
+ --table-actions-icon-hover: #ffffff;
300
+ --table-actions-view: #ffffff;
301
+ --table-actions-remove: #ea3223;
302
+ --table-actions-bg-hover: #e9ebed0f;
303
+
304
+ // Diagram new view
305
+ --diagram-container-bg: #334453;
306
+ --diagram-central-panel-bg: #e9ebed0f;
307
+ --diagram-block-stroke: #5c6a76;
308
+ --diagram-block-bg: #304150;
309
+ --diagram-connect-line: #5c6a76;
310
+ --diagram-selection-line: #2ba2de;
311
+ --diagram-selection-bg: #2f5167;
312
+ --diagram-highlight-line: #fbce28;
313
+ --diagram-highlight-bg: #48524b;
314
+ --diagram-content-text: #e9eaec;
315
+ --diagram-content-text-hover: #ffffff;
316
+ --diagram-content-text-selected: #2ba2de;
317
+ --diagram-content-text-selected-hover: #008fd6;
318
+ --diagram-content-second-text: #e9eaec;
319
+ --diagram-content-second-disabled-text: #4d5d69;
320
+ --diagram-content-third-text: #9da6ad;
321
+ --diagram-info-text: #e9eaec;
322
+ --diagram-info-second-text: #9da6ad;
323
+ }