@cyber-harbour/ui 1.0.36 → 1.0.38

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.
Files changed (16) hide show
  1. package/dist/index.d.mts +5 -20
  2. package/dist/index.d.ts +5 -20
  3. package/dist/index.js +96 -92
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +91 -87
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
  8. package/src/Core/Flex/FlexContainer.tsx +20 -16
  9. package/src/Core/Sidebar/Sidebar.tsx +1 -1
  10. package/src/Core/Sidebar/SidebarItem.tsx +8 -8
  11. package/src/Graph2D/Graph2D.tsx +11 -11
  12. package/src/Graph2D/GraphLoader.tsx +9 -21
  13. package/src/Theme/GlobalStyle.tsx +9 -3
  14. package/src/Theme/themes/dark.ts +96 -92
  15. package/src/Theme/themes/light.ts +15 -11
  16. package/src/Theme/types.ts +4 -0
package/src/Theme/themes/dark.ts CHANGED
@@ -10,11 +10,11 @@ import { breakpoints, typography, zIndex } from './config';
10
10
  */
11
11
 
12
12
  export const darkThemePx: Theme = {
13
- mode: 'light',
13
+ mode: 'dark',
14
14
  baseSize: 14, // Базовий розмір шрифту для конвертації px в rem
15
15
  // Секція кольорів з теми
16
16
  colors: {
17
- background: '#0A0A0A',
17
+ background: '#0F1317',
18
18
  backgroundBase: '#000000',
19
19
  primary: {
20
20
  main: '#158EFF',
@@ -26,7 +26,7 @@ export const darkThemePx: Theme = {
26
26
  text: {
27
27
  main: '#FFFFFF',
28
28
  light: '#99989C',
29
- lighter: '#99989C',
29
+ lighter: '#535353',
30
30
  invert: '#101010',
31
31
  },
32
32
  stroke: {
@@ -46,7 +46,7 @@ export const darkThemePx: Theme = {
46
46
  zIndex,
47
47
  line: {
48
48
  size: 1,
49
- color: '#EBEBEB',
49
+ color: '#1E2226',
50
50
  },
51
51
  button: {
52
52
  // Варіанти кнопок з кольорами
@@ -54,27 +54,27 @@ export const darkThemePx: Theme = {
54
54
  default: {
55
55
  // колір default
56
56
  default: {
57
- background: '#E8EAEE',
57
+ background: '#1E2226',
58
58
  text: '#FFFFFF',
59
- border: ' #E8EAEE',
59
+ border: ' #1E2226',
60
60
  boxShadow: 'none',
61
61
  },
62
62
  hover: {
63
- background: '#E5ECFD',
63
+ background: '#10253A',
64
64
  text: '#FFFFFF',
65
- border: ' #E5ECFD',
65
+ border: ' #10253A',
66
66
  boxShadow: 'none',
67
67
  },
68
68
  active: {
69
- background: '#E5ECFD',
69
+ background: '#10253A',
70
70
  text: '#FFFFFF',
71
- border: ' #E5ECFD',
71
+ border: ' #10253A',
72
72
  boxShadow: 'none',
73
73
  },
74
74
  disabled: {
75
- background: '#EBEBEB',
75
+ background: '#1E2226',
76
76
  text: '#99989C',
77
- border: ' #EBEBEB',
77
+ border: ' #1E2226',
78
78
  boxShadow: 'none',
79
79
  },
80
80
  },
@@ -87,21 +87,21 @@ export const darkThemePx: Theme = {
87
87
  boxShadow: 'none',
88
88
  },
89
89
  hover: {
90
- background: '#4D7BF2',
90
+ background: '#44a5ff',
91
91
  text: '#FFFFFF',
92
- border: ' #4D7BF2',
92
+ border: ' #44a5ff',
93
93
  boxShadow: 'none',
94
94
  },
95
95
  active: {
96
- background: '#4D7BF2',
96
+ background: '#44a5ff',
97
97
  text: '#FFFFFF',
98
- border: ' #4D7BF2',
98
+ border: ' #44a5ff',
99
99
  boxShadow: 'none',
100
100
  },
101
101
  disabled: {
102
102
  background: '#99989C',
103
103
  text: '#FFFFFF',
104
- border: ' #E5ECFD',
104
+ border: ' #10253A',
105
105
  boxShadow: 'none',
106
106
  },
107
107
  },
@@ -109,27 +109,27 @@ export const darkThemePx: Theme = {
109
109
  secondary: {
110
110
  // колір default
111
111
  default: {
112
- background: '#E8EAEE',
112
+ background: '#1E2226',
113
113
  text: '#FFFFFF',
114
- border: ' #E8EAEE',
114
+ border: ' #1E2226',
115
115
  boxShadow: 'none',
116
116
  },
117
117
  hover: {
118
- background: '#E5ECFD',
118
+ background: '#10253A',
119
119
  text: '#FFFFFF',
120
- border: ' #E5ECFD',
120
+ border: ' #10253A',
121
121
  boxShadow: 'none',
122
122
  },
123
123
  active: {
124
- background: '#E5ECFD',
124
+ background: '#10253A',
125
125
  text: '#FFFFFF',
126
- border: ' #E5ECFD',
126
+ border: ' #10253A',
127
127
  boxShadow: 'none',
128
128
  },
129
129
  disabled: {
130
- background: '#EBEBEB',
130
+ background: '#1E2226',
131
131
  text: '#99989C',
132
- border: ' #EBEBEB',
132
+ border: ' #1E2226',
133
133
  boxShadow: 'none',
134
134
  },
135
135
  },
@@ -142,21 +142,21 @@ export const darkThemePx: Theme = {
142
142
  boxShadow: 'none',
143
143
  },
144
144
  hover: {
145
- background: '#C53939',
145
+ background: '#d46161',
146
146
  text: '#FFFFFF',
147
- border: ' #C53939',
147
+ border: ' #d46161',
148
148
  boxShadow: 'none',
149
149
  },
150
150
  active: {
151
- background: '#C53939',
151
+ background: '#d46161',
152
152
  text: '#FFFFFF',
153
- border: ' #C53939',
153
+ border: ' #d46161',
154
154
  boxShadow: 'none',
155
155
  },
156
156
  disabled: {
157
- background: '#FFCCCB',
157
+ background: '#511616',
158
158
  text: '#FFFFFF',
159
- border: ' #FFCCCB',
159
+ border: ' #511616',
160
160
  boxShadow: 'none',
161
161
  },
162
162
  },
@@ -167,25 +167,25 @@ export const darkThemePx: Theme = {
167
167
  default: {
168
168
  background: 'transparent',
169
169
  text: '#FFFFFF',
170
- border: ' #EBEBEB',
170
+ border: ' #1E2226',
171
171
  boxShadow: 'none',
172
172
  },
173
173
  hover: {
174
- background: '#E5ECFD',
174
+ background: '#10253A',
175
175
  text: '#FFFFFF',
176
- border: ' #EBEBEB',
176
+ border: ' #1E2226',
177
177
  boxShadow: 'none',
178
178
  },
179
179
  active: {
180
- background: '#E5ECFD',
180
+ background: '#10253A',
181
181
  text: '#FFFFFF',
182
- border: ' #EBEBEB',
182
+ border: ' #1E2226',
183
183
  boxShadow: 'none',
184
184
  },
185
185
  disabled: {
186
186
  background: 'transparent',
187
187
  text: '#99989C',
188
- border: ' #EBEBEB',
188
+ border: ' #1E2226',
189
189
  boxShadow: 'none',
190
190
  },
191
191
  },
@@ -198,13 +198,13 @@ export const darkThemePx: Theme = {
198
198
  boxShadow: 'none',
199
199
  },
200
200
  hover: {
201
- background: '#E5ECFD',
201
+ background: '#10253A',
202
202
  text: '#158EFF',
203
203
  border: ' #158EFF',
204
204
  boxShadow: 'none',
205
205
  },
206
206
  active: {
207
- background: '#E5ECFD',
207
+ background: '#10253A',
208
208
  text: '#158EFF',
209
209
  border: ' #158EFF',
210
210
  boxShadow: 'none',
@@ -221,25 +221,25 @@ export const darkThemePx: Theme = {
221
221
  default: {
222
222
  background: 'transparent',
223
223
  text: '#158EFF',
224
- border: ' #EBEBEB',
224
+ border: ' #1E2226',
225
225
  boxShadow: 'none',
226
226
  },
227
227
  hover: {
228
- background: '#E5ECFD',
228
+ background: '#10253A',
229
229
  text: '#158EFF',
230
- border: ' #EBEBEB',
230
+ border: ' #1E2226',
231
231
  boxShadow: 'none',
232
232
  },
233
233
  active: {
234
- background: '#E5ECFD',
234
+ background: '#10253A',
235
235
  text: '#158EFF',
236
- border: ' #EBEBEB',
236
+ border: ' #1E2226',
237
237
  boxShadow: 'none',
238
238
  },
239
239
  disabled: {
240
240
  background: 'transparent',
241
241
  text: '#99989C',
242
- border: ' #EBEBEB',
242
+ border: ' #1E2226',
243
243
  boxShadow: 'none',
244
244
  },
245
245
  },
@@ -252,15 +252,15 @@ export const darkThemePx: Theme = {
252
252
  boxShadow: 'none',
253
253
  },
254
254
  hover: {
255
- background: '#FCF5F5',
255
+ background: '#290b0b',
256
256
  text: '#C93939',
257
- border: ' #C93939',
257
+ border: ' #290b0b',
258
258
  boxShadow: 'none',
259
259
  },
260
260
  active: {
261
- background: '#FCF5F5',
261
+ background: '#290b0b',
262
262
  text: '#C93939',
263
- border: ' #C93939',
263
+ border: ' #290b0b',
264
264
  boxShadow: 'none',
265
265
  },
266
266
  disabled: {
@@ -282,13 +282,13 @@ export const darkThemePx: Theme = {
282
282
  },
283
283
  hover: {
284
284
  background: 'transparent',
285
- text: '#80A0F5',
285
+ text: '#44a5ff',
286
286
  border: 'transparent',
287
287
  boxShadow: 'none',
288
288
  },
289
289
  active: {
290
290
  background: 'transparent',
291
- text: '#80A0F5',
291
+ text: '#44a5ff',
292
292
  border: 'transparent',
293
293
  boxShadow: 'none',
294
294
  },
@@ -307,28 +307,28 @@ export const darkThemePx: Theme = {
307
307
  border: 'transparent',
308
308
  boxShadow: 'none',
309
309
  filledIcon: {
310
- background: '#E5ECFD',
310
+ background: '#10253A',
311
311
  color: '#158EFF',
312
312
  },
313
313
  },
314
314
  hover: {
315
315
  background: 'transparent',
316
- text: '#80A0F5',
316
+ text: '#44a5ff',
317
317
  border: 'transparent',
318
318
  boxShadow: 'none',
319
319
  filledIcon: {
320
320
  background: '#158EFF',
321
- color: '#ffffff',
321
+ color: '#0F1317',
322
322
  },
323
323
  },
324
324
  active: {
325
325
  background: 'transparent',
326
- text: '#80A0F5',
326
+ text: '#44a5ff',
327
327
  border: 'transparent',
328
328
  boxShadow: 'none',
329
329
  filledIcon: {
330
330
  background: '#158EFF',
331
- color: '#ffffff',
331
+ color: '#0F1317',
332
332
  },
333
333
  },
334
334
  disabled: {
@@ -352,14 +352,14 @@ export const darkThemePx: Theme = {
352
352
  boxShadow: 'none',
353
353
  },
354
354
  hover: {
355
- background: 'rgba(0, 0, 0, 0.05)',
356
- text: '#FFFFFF',
355
+ background: 'transparent',
356
+ text: '#158EFF',
357
357
  border: 'transparent',
358
358
  boxShadow: 'none',
359
359
  },
360
360
  active: {
361
- background: 'rgba(0, 0, 0, 0.1)',
362
- text: '#FFFFFF',
361
+ background: 'transparent',
362
+ text: '#158EFF',
363
363
  border: 'transparent',
364
364
  boxShadow: 'none',
365
365
  },
@@ -380,13 +380,13 @@ export const darkThemePx: Theme = {
380
380
  },
381
381
  hover: {
382
382
  background: 'transparent',
383
- text: '#FCF5F5',
383
+ text: '#d46161',
384
384
  border: 'transparent',
385
385
  boxShadow: 'none',
386
386
  },
387
387
  active: {
388
388
  background: 'transparent',
389
- text: '#FCF5F5',
389
+ text: '#d46161',
390
390
  border: 'transparent',
391
391
  boxShadow: 'none',
392
392
  },
@@ -423,14 +423,14 @@ export const darkThemePx: Theme = {
423
423
 
424
424
  // Компонент Sidebar
425
425
  sidebar: {
426
- background: '#0A0A0A',
426
+ background: '#0F1317',
427
427
  border: '#1E2226',
428
428
  width: 224,
429
429
  collapsedWidth: 65,
430
430
  text: {
431
- default: '#ffffff',
431
+ default: '#99989C',
432
432
  active: '#158EFF',
433
- hover: '#99989C',
433
+ hover: '#158EFF',
434
434
  },
435
435
  item: {
436
436
  default: {
@@ -440,13 +440,13 @@ export const darkThemePx: Theme = {
440
440
  height: 40,
441
441
  },
442
442
  active: {
443
- background: '#F3F7FF',
443
+ background: '#10253A',
444
444
  borderLeft: '2px solid #158EFF',
445
445
  padding: '10px 16px',
446
446
  height: 40,
447
447
  },
448
448
  hover: {
449
- background: '#F3F3F3',
449
+ background: '#020E19',
450
450
  border: 'transparent',
451
451
  padding: '10px 16px',
452
452
  height: 40,
@@ -456,7 +456,7 @@ export const darkThemePx: Theme = {
456
456
  background: 'transparent',
457
457
  padding: '16px 16px 8px',
458
458
  title: {
459
- color: '#99989C',
459
+ color: '#020b14',
460
460
  fontSize: '12px',
461
461
  fontWeight: 600,
462
462
  },
@@ -472,36 +472,36 @@ export const darkThemePx: Theme = {
472
472
  default: {
473
473
  background: 'transparent',
474
474
  text: '#FFFFFF',
475
- border: ' #EBEBEB',
475
+ border: ' #1E2226',
476
476
  boxShadow: 'none',
477
477
  },
478
478
  hover: {
479
479
  background: 'transparent',
480
480
  text: '#158EFF',
481
- border: ' #EBEBEB',
481
+ border: ' #1E2226',
482
482
  boxShadow: 'none',
483
483
  },
484
484
  active: {
485
485
  background: 'transparent',
486
486
  text: '#158EFF',
487
- border: ' #EBEBEB',
487
+ border: ' #1E2226',
488
488
  boxShadow: 'none',
489
489
  },
490
490
  disabled: {
491
491
  background: '#FAFAFA',
492
492
  text: '#99989C',
493
- border: ' #EBEBEB',
493
+ border: ' #1E2226',
494
494
  boxShadow: 'none',
495
495
  },
496
496
  },
497
497
  delimeter: {
498
- color: '#EBEBEB',
498
+ color: '#34404C',
499
499
  thickness: 1,
500
500
  marginInline: 12,
501
501
  marginBlock: 3,
502
502
  style: 'solid',
503
503
  },
504
- shadow: '0px 4px 16px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.06)',
504
+ shadow: '0px 4px 16px rgba(255, 255, 255, 0.9), 0px 2px 4px rgba(0, 0, 0, 0.06)',
505
505
  padding: 5,
506
506
  icon: {
507
507
  size: 7,
@@ -517,13 +517,13 @@ export const darkThemePx: Theme = {
517
517
  boxShadow: 'none',
518
518
  },
519
519
  hover: {
520
- background: '#E5ECFD',
520
+ background: '#10253A',
521
521
  text: '#FFFFFF',
522
522
  border: ' none',
523
523
  boxShadow: 'none',
524
524
  },
525
525
  active: {
526
- background: '#E8EAEE',
526
+ background: '#1E2226',
527
527
  text: '#FFFFFF',
528
528
  border: ' none',
529
529
  boxShadow: 'none',
@@ -564,7 +564,7 @@ export const darkThemePx: Theme = {
564
564
  boxShadow: 'none',
565
565
  },
566
566
  },
567
- delimiterColor: '#EBEBEB',
567
+ delimiterColor: '#34404C',
568
568
  icon: {
569
569
  size: 16,
570
570
  },
@@ -602,7 +602,7 @@ export const darkThemePx: Theme = {
602
602
  background: 'transparent',
603
603
  text: '#FFFFFF',
604
604
  placeholder: '#99989C',
605
- border: ' #EBEBEB',
605
+ border: ' #1E2226',
606
606
  boxShadow: 'none',
607
607
  icon: '#FFFFFF',
608
608
  },
@@ -626,7 +626,7 @@ export const darkThemePx: Theme = {
626
626
  background: '#FAFAFA',
627
627
  text: '#99989C',
628
628
  placeholder: '#99989C',
629
- border: ' #EBEBEB',
629
+ border: ' #1E2226',
630
630
  boxShadow: 'none',
631
631
  icon: '#99989C',
632
632
  },
@@ -672,32 +672,36 @@ export const darkThemePx: Theme = {
672
672
  border: {
673
673
  width: 1,
674
674
  style: 'solid',
675
- color: '#EBEBEB',
675
+ color: '#1E2226',
676
676
  },
677
- background: '#FFFFFF',
677
+ background: '#0F1317',
678
678
  },
679
679
  // Graph2D
680
680
  graph2D: {
681
681
  ring: {
682
- highlightFill: 'rgba(255, 165, 0, 0.3)',
682
+ highlightFill: 'rgba(0, 90, 255, 0.3)',
683
683
  },
684
684
  button: {
685
- stroke: '#e5e5e5',
686
- normalFill: 'rgba(255, 255, 255, 0.8)',
687
- hoverFill: 'rgba(230, 230, 230, 0.9)',
685
+ stroke: '#1A1A1A',
686
+ normalFill: 'rgba(0, 0, 0, 0.8)',
687
+ hoverFill: 'rgba(25, 25, 25, 0.9)',
688
688
  },
689
689
  grid: {
690
- dotColor: 'rgba(0, 0, 0, 0.5)',
690
+ dotColor: 'rgba(255, 255, 255, 0.5)',
691
691
  },
692
692
  link: {
693
- normal: '#999',
694
- highlighted: '#ff9900',
695
- textColor: '#666',
696
- highlightedTextColor: '#663300',
697
- textBgColor: 'rgba(255, 255, 255, 0.8)',
698
- highlightedTextBgColor: 'rgba(255, 230, 204, 0.9)',
693
+ normal: '#666',
694
+ highlighted: '#0066ff',
695
+ textColor: '#999',
696
+ highlightedTextColor: '#99ccff',
697
+ textBgColor: 'rgba(0, 0, 0, 0.8)',
698
+ highlightedTextBgColor: 'rgba(0, 25, 51, 0.9)',
699
699
  },
700
700
  },
701
+ contentLoader: {
702
+ foreground: '#99989C',
703
+ background: '#535353',
704
+ },
701
705
  };
702
706
 
703
707
  export const darkTheme = convertPaletteToRem(darkThemePx, darkThemePx.baseSize) as DefaultTheme;
package/src/Theme/themes/light.ts CHANGED
@@ -351,14 +351,14 @@ export const lightThemePx: Theme = {
351
351
  boxShadow: 'none',
352
352
  },
353
353
  hover: {
354
- background: 'rgba(0, 0, 0, 0.05)',
355
- text: '#101010',
354
+ background: 'transparent',
355
+ text: '#0042EC',
356
356
  border: 'transparent',
357
357
  boxShadow: 'none',
358
358
  },
359
359
  active: {
360
- background: 'rgba(0, 0, 0, 0.1)',
361
- text: '#101010',
360
+ background: 'transparent',
361
+ text: '#0042EC',
362
362
  border: 'transparent',
363
363
  boxShadow: 'none',
364
364
  },
@@ -427,9 +427,9 @@ export const lightThemePx: Theme = {
427
427
  width: 224,
428
428
  collapsedWidth: 65,
429
429
  text: {
430
- default: '#101010',
430
+ default: '#535353',
431
431
  active: '#0042EC',
432
- hover: '#535353',
432
+ hover: '#0042EC',
433
433
  },
434
434
  item: {
435
435
  default: {
@@ -439,13 +439,13 @@ export const lightThemePx: Theme = {
439
439
  height: 40,
440
440
  },
441
441
  active: {
442
- background: '#F3F7FF',
442
+ background: '#E5ECFD',
443
443
  borderLeft: '2px solid #0042EC',
444
444
  padding: '10px 16px',
445
445
  height: 40,
446
446
  },
447
447
  hover: {
448
- background: '#F3F3F3',
448
+ background: '#F3F7FF',
449
449
  border: 'transparent',
450
450
  padding: '10px 16px',
451
451
  height: 40,
@@ -461,7 +461,7 @@ export const lightThemePx: Theme = {
461
461
  },
462
462
  },
463
463
  delimeter: {
464
- color: '#EBEBEB',
464
+ color: '#C7C5C5',
465
465
  thickness: 1,
466
466
  margin: '8px 0',
467
467
  },
@@ -494,7 +494,7 @@ export const lightThemePx: Theme = {
494
494
  },
495
495
  },
496
496
  delimeter: {
497
- color: '#EBEBEB',
497
+ color: '#C7C5C5',
498
498
  thickness: 1,
499
499
  marginInline: 12,
500
500
  marginBlock: 3,
@@ -563,7 +563,7 @@ export const lightThemePx: Theme = {
563
563
  boxShadow: 'none',
564
564
  },
565
565
  },
566
- delimiterColor: '#EBEBEB',
566
+ delimiterColor: '#C7C5C5',
567
567
  icon: {
568
568
  size: 16,
569
569
  },
@@ -697,6 +697,10 @@ export const lightThemePx: Theme = {
697
697
  highlightedTextBgColor: 'rgba(255, 230, 204, 0.9)',
698
698
  },
699
699
  },
700
+ contentLoader: {
701
+ foreground: '#E2E2E2E2',
702
+ background: '#F3F3F3',
703
+ },
700
704
  };
701
705
 
702
706
  export const lightTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;
package/src/Theme/types.ts CHANGED
@@ -229,6 +229,10 @@ export type Theme = {
229
229
  highlightedTextBgColor: string;
230
230
  };
231
231
  };
232
+ contentLoader: {
233
+ foreground: string;
234
+ background: string;
235
+ };
232
236
  };
233
237
 
234
238
  //TODO check and refactoring