@cyber-harbour/ui 1.0.36 → 1.0.37

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 (14) hide show
  1. package/dist/index.d.mts +4 -0
  2. package/dist/index.d.ts +4 -0
  3. package/dist/index.js +81 -77
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +89 -85
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
  8. package/src/Core/Sidebar/Sidebar.tsx +1 -1
  9. package/src/Core/Sidebar/SidebarItem.tsx +8 -8
  10. package/src/Graph2D/GraphLoader.tsx +9 -21
  11. package/src/Theme/GlobalStyle.tsx +9 -3
  12. package/src/Theme/themes/dark.ts +94 -90
  13. package/src/Theme/themes/light.ts +15 -11
  14. package/src/Theme/types.ts +4 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cyber-harbour/ui",
3
- "version": "1.0.36",
3
+ "version": "1.0.37",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",
package/src/Core/Sidebar/Sidebar.tsx CHANGED
@@ -59,7 +59,7 @@ const StyledContainer = styled.aside<StyledProps>(
59
59
  width: 100%;
60
60
  height: 25dvh;
61
61
  transform: translateY(-100%);
62
- background: ${theme.colors.background};
62
+ background: ${theme.sidebar.background};
63
63
  border-right: 1px solid ${theme.sidebar.border};
64
64
 
65
65
  width: ${theme.sidebar.width};
package/src/Core/Sidebar/SidebarItem.tsx CHANGED
@@ -84,15 +84,15 @@ const StyledItem = styled.a<StyledProps>(
84
84
  cursor: pointer;
85
85
  text-decoration: none;
86
86
  border-radius: 8px;
87
- color: ${theme.colors.text.light};
88
- background: ${theme.colors.background};
87
+ color: ${theme.sidebar.text.default};
88
+ background: ${theme.sidebar.item.default.background};
89
89
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
90
90
  position: relative;
91
91
  ${
92
92
  $active
93
93
  ? `
94
- background: ${theme.colors.primary.lighter};
95
- color: ${theme.colors.primary.main};
94
+ background: ${theme.sidebar.item.active.background};
95
+ color: ${theme.sidebar.text.active};
96
96
  `
97
97
  : ''
98
98
  }
@@ -101,8 +101,8 @@ const StyledItem = styled.a<StyledProps>(
101
101
 
102
102
 
103
103
  &:hover {
104
- background: ${theme.colors.primary.lightest};
105
- color: ${theme.colors.primary.main};
104
+ background: ${theme.sidebar.item.hover.background};
105
+ color: ${theme.sidebar.text.hover};
106
106
  }
107
107
 
108
108
  &:before {
@@ -114,12 +114,12 @@ const StyledItem = styled.a<StyledProps>(
114
114
  width: 0px;
115
115
  border-top-right-radius: 5px;
116
116
  border-bottom-right-radius: 5px;
117
- background: rgaba(0, 0, 0, 0);
117
+ background: rgba(0, 0, 0, 0);
118
118
  transition: background 0.4s ease-in-out, width 0.3s ease-in-out;
119
119
  ${
120
120
  $active
121
121
  ? `
122
- background: ${theme.colors.primary.main};
122
+ background: ${theme.sidebar.text.active};
123
123
  width: 5px;
124
124
  `
125
125
  : ''
package/src/Graph2D/GraphLoader.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import ContentLoader from 'react-content-loader';
3
- import styled from 'styled-components';
3
+ import styled, { useTheme } from 'styled-components';
4
4
 
5
5
  const LoaderWrapper = styled.div`
6
6
  position: absolute;
@@ -21,29 +21,17 @@ interface GraphLoaderProps {
21
21
 
22
22
  const GraphLoader: React.FC<GraphLoaderProps> = ({ width = 280, height = 280 }) => {
23
23
  // Helper function to create a rect from line coordinates
24
- const lineToRect = (x1: number, y1: number, x2: number, y2: number, thickness: number = 1) => {
25
- // Calculate length and angle of the line
26
- const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
27
- const angle = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI;
28
-
29
- // Calculate center point of the line
30
- const centerX = (x1 + x2) / 2;
31
- const centerY = (y1 + y2) / 2;
32
-
33
- return (
34
- <rect
35
- x={centerX - length / 2}
36
- y={centerY - thickness / 2}
37
- width={length}
38
- height={thickness}
39
- transform={`rotate(${angle}, ${centerX}, ${centerY})`}
40
- />
41
- );
42
- };
24
+ const theme = useTheme();
43
25
 
44
26
  return (
45
27
  <LoaderWrapper>
46
- <ContentLoader width={width} height={height} viewBox="0 0 280 280">
28
+ <ContentLoader
29
+ foregroundColor={theme.contentLoader.foreground}
30
+ backgroundColor={theme.contentLoader.background}
31
+ width={width}
32
+ height={height}
33
+ viewBox="0 0 280 280"
34
+ >
47
35
  <path d="m55 38-0.97266 0.22852 7.0801 30.092-18.355-20.979-0.75195 0.6582 19.596 22.395 0.43164 1.834 0.97266-0.22852 0.75195-0.6582-0.37695-0.42969 9.625-27.912-0.94531-0.32617-9.4375 27.371-0.10547-0.12109zm8 34-0.78516 0.61914 0.0957 0.12305-12.311 13.258 0.73242 0.67969 12.205-13.145 14.277 18.084 0.78516-0.61914-14.373-18.207 0.10547-0.11328zm15 19-0.48438 0.875 46.992 25.996 8e-3 4e-3 20.506 11.592-28.182 4.5449 0.15998 0.98819 29.418-4.7441 0.25 0.14062-12.555 24.143 0.88672 0.46094 13-25 15 25 26 30v18l-11 18 0.85352 0.52148 9.8008-16.039-4.6543 33.518 0.99023 0.13867 4.7793-34.408 7.2305 16.27 0.91406-0.40625-7.9141-17.807v-17.104l18 12.316 0.56445-0.82617-18.896-12.928-25.855-29.836-14.633-24.387 0.01562-0.02344h23.805v-1h-23.152l13.848-21.234 55.201-28.791-0.45898-0.88476 0.77734 0.62305 11.402-14.25 16.668-11.842-0.58008-0.81641-16.785 11.928-11.486 14.355-55.434 28.912-14.277 21.893-7.7617-27.166-0.96094 0.27344 7.7227 27.031-1.1191 0.17969-21.604-12.211zm140.43-12.912-6.957-17.338-0.92773 0.37305 6.957 17.338zm-6.957-17.338 0.72266 0.69336 16.232-16.896-0.7207-0.69336zm-3.4766 137.25 5 15 0.94922-0.31641-5-15zm-91-63-0.48047-0.87695-31 17 0.48047 0.87695zm-31 17 5 18 0.96289-0.26758-5-18zm0 0-0.70703-0.70703-12.898 12.898-17.881 9.9336 0.48633 0.875 18-10zm5 18-0.64062-0.76758-18 15 0.64062 0.76758z" />
48
36
  <circle cx="229.92" cy="63.7318" r="5" transform="rotate(173.661 229.92 63.7318)" />
49
37
  <circle cx="227.711" cy="43.8541" r="5" transform="rotate(173.661 227.711 43.8541)" />
package/src/Theme/GlobalStyle.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import { createGlobalStyle } from 'styled-components';
2
2
 
3
- export const GlobalStyle = createGlobalStyle`
3
+ export const GlobalStyle = createGlobalStyle(
4
+ ({ theme }) => `
4
5
  *, *::before, *::after {
5
6
  box-sizing: border-box;
6
7
  margin: 0;
@@ -8,5 +9,10 @@ export const GlobalStyle = createGlobalStyle`
8
9
  }
9
10
 
10
11
  body, html {
11
- font-size: 14px;}
12
- `;
12
+ background: ${theme.colors.backgroundBase};
13
+ color: ${theme.colors.text.main};
14
+ font-family: ${theme.typography.fontFamily};
15
+ font-size: ${theme.baseSize}px;
16
+ }
17
+ `
18
+ );
package/src/Theme/themes/dark.ts CHANGED
@@ -10,7 +10,7 @@ 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: {
@@ -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: '#0A0A0A',
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: '#0A0A0A',
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
  },
@@ -428,9 +428,9 @@ export const darkThemePx: Theme = {
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: '#0A0A0A',
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;