@cyber-harbour/ui 1.0.54 → 1.0.56
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.
- package/dist/index.d.mts +35 -2
- package/dist/index.d.ts +35 -2
- package/dist/index.js +261 -236
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +198 -173
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -1
- package/src/Core/Drawer/Drawer.tsx +97 -0
- package/src/Core/Drawer/index.ts +1 -0
- package/src/Core/IconComponents/FolderAlertIcon.tsx +32 -0
- package/src/Core/IconComponents/RelationIcon.tsx +28 -0
- package/src/Core/IconComponents/RelationPointsIcon.tsx +36 -0
- package/src/Core/IconComponents/index.ts +3 -0
- package/src/Core/index.ts +1 -0
- package/src/Theme/index.ts +1 -0
- package/src/Theme/themes/dark.ts +167 -0
- package/src/Theme/themes/light.ts +167 -0
- package/src/Theme/types.ts +6 -1
- package/src/Theme/useTheme.tsx +7 -0
- package/src/Theme/utils.ts +6 -11
- package/src/utils.ts +30 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cyber-harbour/ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.56",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.mjs",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
"license": "ISC",
|
|
28
28
|
"description": "",
|
|
29
29
|
"dependencies": {
|
|
30
|
+
"@types/react-dom": "^19.1.6",
|
|
30
31
|
"d3": "^7.9.0",
|
|
31
32
|
"lodash.clonedeep": "^4.5.0",
|
|
32
33
|
"react-content-loader": "^7.0.2",
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { createPortal } from 'react-dom';
|
|
2
|
+
import { styled } from 'styled-components';
|
|
3
|
+
import { createComponent, FabricComponent, generatePropertySpaceStyle, propToRem, pxToRem } from '../../Theme';
|
|
4
|
+
import { useBodyScrollLock } from '../../utils';
|
|
5
|
+
import { useEffect, useRef } from 'react';
|
|
6
|
+
|
|
7
|
+
type DrawerProps = {
|
|
8
|
+
isOpen: boolean;
|
|
9
|
+
onClose: () => void;
|
|
10
|
+
children?: any;
|
|
11
|
+
header?: number; //TODO: remove deps;
|
|
12
|
+
width?: string | number;
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
export const Drawer = (props: DrawerProps) => {
|
|
16
|
+
useBodyScrollLock(props.isOpen);
|
|
17
|
+
|
|
18
|
+
if (!props.isOpen) return null;
|
|
19
|
+
return createPortal(<DrawerWithOutclick {...props} />, document.body);
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const DrawerWithOutclick = ({ onClose, children, width, header }: DrawerProps) => {
|
|
23
|
+
const drawerRef = useRef<HTMLDivElement>(null);
|
|
24
|
+
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
const handleClick = (e: MouseEvent) => {
|
|
27
|
+
if (drawerRef.current && !drawerRef.current.contains(e.target as Node)) {
|
|
28
|
+
onClose();
|
|
29
|
+
}
|
|
30
|
+
};
|
|
31
|
+
document.addEventListener('mousedown', handleClick);
|
|
32
|
+
return () => {
|
|
33
|
+
document.removeEventListener('mousedown', handleClick);
|
|
34
|
+
};
|
|
35
|
+
}, [onClose]);
|
|
36
|
+
|
|
37
|
+
return (
|
|
38
|
+
<StyledDrawer $header={header} $width={width} ref={drawerRef}>
|
|
39
|
+
{children}
|
|
40
|
+
</StyledDrawer>
|
|
41
|
+
);
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
type DrawerHeaderProps = FabricComponent<{
|
|
45
|
+
children?: any;
|
|
46
|
+
}>;
|
|
47
|
+
|
|
48
|
+
export const DrawerHeader: any = createComponent<DrawerHeaderProps>(
|
|
49
|
+
styled.div<DrawerHeaderProps>(
|
|
50
|
+
({ theme, p = theme.drawer.padding }) => `
|
|
51
|
+
grid-area: drawer-header;
|
|
52
|
+
${generatePropertySpaceStyle(theme, 'padding', p)};
|
|
53
|
+
`
|
|
54
|
+
),
|
|
55
|
+
{
|
|
56
|
+
ignoreStyles: ['padding-inline'],
|
|
57
|
+
}
|
|
58
|
+
);
|
|
59
|
+
|
|
60
|
+
type DrawerBodyProps = FabricComponent<{
|
|
61
|
+
children?: any;
|
|
62
|
+
}>;
|
|
63
|
+
|
|
64
|
+
export const DrawerBody: any = createComponent(
|
|
65
|
+
styled.div<DrawerBodyProps>(
|
|
66
|
+
({ theme, px = theme.drawer.padding, pb = theme.drawer.padding }) => `
|
|
67
|
+
grid-area: drawer-body;
|
|
68
|
+
max-height: 100%;
|
|
69
|
+
overflow-y: auto;
|
|
70
|
+
${generatePropertySpaceStyle(theme, 'padding-inline', px)};
|
|
71
|
+
${generatePropertySpaceStyle(theme, 'padding-bottom', pb)};
|
|
72
|
+
`
|
|
73
|
+
),
|
|
74
|
+
{
|
|
75
|
+
ignoreStyles: ['padding', 'padding-bottom'],
|
|
76
|
+
}
|
|
77
|
+
);
|
|
78
|
+
|
|
79
|
+
const StyledDrawer = styled.div<{ $header?: number; $width?: string | number }>(
|
|
80
|
+
({ theme, $header, $width }) => `
|
|
81
|
+
position: fixed;
|
|
82
|
+
display: grid;
|
|
83
|
+
grid-template-areas:
|
|
84
|
+
"drawer-header"
|
|
85
|
+
"drawer-body";
|
|
86
|
+
grid-template-rows: auto 1fr;
|
|
87
|
+
z-index: ${theme.zIndex.sticky};
|
|
88
|
+
top: ${pxToRem($header || 0, theme.baseSize)};
|
|
89
|
+
bottom: 0;
|
|
90
|
+
right: 0;
|
|
91
|
+
width: ${$width ? propToRem($width, theme.baseSize) : theme.drawer.width};
|
|
92
|
+
max-width: 100%;
|
|
93
|
+
background-color: ${theme.colors.background};
|
|
94
|
+
box-shadow: ${theme.drawer.shadow};
|
|
95
|
+
border-left: 1px solid ${theme.colors.stroke.lighter};
|
|
96
|
+
`
|
|
97
|
+
);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Drawer';
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { SVGProps } from 'react';
|
|
2
|
+
|
|
3
|
+
interface FolderAlertIconProps extends SVGProps<SVGSVGElement> {
|
|
4
|
+
fill?: string;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
export const FolderAlertIcon = ({ fill = 'currentColor', ...props }: FolderAlertIconProps) => {
|
|
8
|
+
return (
|
|
9
|
+
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
|
10
|
+
<path
|
|
11
|
+
d="M13.7386 2.02034H14.8293C15.3096 2.02034 16 2.77034 16.01 3.26034V12.1703C15.97 12.6703 15.6498 13.1203 15.1995 13.3403C14.7492 13.5603 14.2989 13.4503 13.8086 13.4803C13.0181 15.7803 10.2764 16.7303 8.21513 15.3903C7.50469 14.9303 7.0344 14.2503 6.7242 13.4703H1.24078C0.590369 13.3703 0.08005 12.8603 0 12.2003V3.26034C0 2.77034 0.700438 2.02034 1.18074 2.02034H2.27142V0.300345C2.27142 0.240345 2.47154 0.0303449 2.55159 0.0203449L13.3684 0.000344886C13.4784 -0.00965511 13.7286 0.200345 13.7286 0.300345V2.02034H13.7386ZM12.848 0.880345H3.15197V2.01034H4.77298C5.40338 2.01034 6.44403 3.49035 6.90431 3.95035C6.92433 3.97035 6.93433 4.00034 6.93433 4.03034H12.858V0.880345H12.848ZM13.9887 12.5903H14.5991C14.8593 12.5903 15.1395 12.2303 15.1194 11.9803V5.53034C15.0894 5.15034 14.8793 4.95035 14.5091 4.92034H6.63415C6.54409 4.90034 6.47405 4.86034 6.41401 4.80034C5.9237 4.35035 5.48343 3.65035 5.00313 3.16035C4.83302 2.99035 4.74296 2.93035 4.50281 2.91035C3.54221 2.97035 2.49156 2.84035 1.54096 2.91035C1.15072 2.94035 0.930582 3.12034 0.890557 3.52034V12.0203C0.890557 12.2703 1.17073 12.6003 1.41088 12.6003H6.5641C6.37398 10.0903 8.61539 8.12035 11.0969 8.65034C12.8981 9.04035 14.1588 10.7603 13.9987 12.6003L13.9887 12.5903ZM15.1194 4.12034V3.41035C15.1194 3.20035 14.8093 2.89035 14.5991 2.89035H13.7286V4.02034H14.8193C14.8193 4.02034 15.0994 4.14035 15.1194 4.11034V4.12034ZM10.1363 9.45035C7.91495 9.55035 6.67417 12.1003 7.97498 13.9203C9.13571 15.5603 11.6573 15.4603 12.6879 13.7303C13.8386 11.8003 12.3877 9.35034 10.1363 9.45035Z"
|
|
12
|
+
fill={fill}
|
|
13
|
+
/>
|
|
14
|
+
<path
|
|
15
|
+
d="M2.07172 9.07031H4.83345C5.28373 9.19031 5.29373 9.82031 4.83345 9.94031H2.09173C1.65146 9.81031 1.63145 9.22031 2.06171 9.07031H2.07172Z"
|
|
16
|
+
fill={fill}
|
|
17
|
+
/>
|
|
18
|
+
<path
|
|
19
|
+
d="M2.07172 10.8398H4.83345C5.28373 10.9598 5.29373 11.5898 4.83345 11.7098H2.09173C1.65146 11.5798 1.63145 10.9898 2.06171 10.8398H2.07172Z"
|
|
20
|
+
fill={fill}
|
|
21
|
+
/>
|
|
22
|
+
<path
|
|
23
|
+
d="M10.1371 10.3314C10.3772 10.2814 10.6674 10.4014 10.7074 10.6614C10.7475 10.9214 10.7475 12.1214 10.7074 12.3914C10.6374 12.8414 9.90694 12.8314 9.82689 12.3914C9.78687 12.1514 9.78687 10.9014 9.82689 10.6614C9.84691 10.5314 10.007 10.3614 10.1271 10.3314H10.1371Z"
|
|
24
|
+
fill={fill}
|
|
25
|
+
/>
|
|
26
|
+
<path
|
|
27
|
+
d="M10.1372 13.3494C10.7876 13.2194 10.8976 14.0694 10.4273 14.2094C9.76694 14.4094 9.61684 13.4594 10.1372 13.3494Z"
|
|
28
|
+
fill={fill}
|
|
29
|
+
/>
|
|
30
|
+
</svg>
|
|
31
|
+
);
|
|
32
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { SVGProps } from 'react';
|
|
2
|
+
|
|
3
|
+
interface RelationIconProps extends SVGProps<SVGSVGElement> {
|
|
4
|
+
fill?: string;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
export const RelationIcon = ({ fill = 'currentColor', ...props }: RelationIconProps) => {
|
|
8
|
+
return (
|
|
9
|
+
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
|
10
|
+
<path
|
|
11
|
+
d="M8.40767 2.3898C7.62079 0.918033 6.09073 0 4.41496 0C4.26924 0 4.13809 0 3.99237 0.0291439C2.50603 0.145719 1.19456 1.04918 0.495103 2.43352C-0.218923 3.84699 -0.160635 5.49363 0.669966 6.8051C1.486 8.13115 2.89947 8.91803 4.45867 8.91803C6.01787 8.91803 7.34392 8.17486 8.15995 6.93625C9.09255 5.53734 9.17998 3.84699 8.40767 2.3898ZM4.47324 8.102C3.7155 8.102 2.98691 7.86885 2.34574 7.43169C2.47689 6.68852 2.98691 6.03279 3.68636 5.77049C3.93408 5.66849 4.19638 5.62477 4.45867 5.62477C5.26013 5.62477 5.98873 6.0765 6.35303 6.79053C6.45503 6.99454 6.57161 7.37341 6.57161 7.41712C6.52789 7.46084 6.17816 7.66485 6.09073 7.70856C5.58071 7.97086 5.04155 8.102 4.47324 8.102ZM4.9104 4.6776C4.76468 4.76503 4.61896 4.80874 4.45867 4.80874C4.16723 4.80874 3.89037 4.66302 3.73008 4.40073C3.56978 4.16758 3.55521 3.87614 3.67179 3.59927C3.77379 3.36612 4.03609 3.14754 4.25467 3.1184C4.31295 3.1184 4.37124 3.1184 4.4441 3.1184C4.92498 3.1184 5.20184 3.45355 5.28927 3.74499C5.36213 4.03643 5.31842 4.42987 4.9104 4.69217V4.6776ZM7.22734 6.79053C6.97962 6.06193 6.44046 5.44991 5.69729 5.07104C6.0033 4.73588 6.16359 4.28415 6.11987 3.81785C6.07616 3.26412 5.77015 2.76867 5.2747 2.4918C5.01241 2.34608 4.73554 2.27322 4.4441 2.27322C3.81751 2.27322 3.23463 2.65209 2.95776 3.2204C2.66632 3.80328 2.73918 4.47359 3.16177 5.01275C3.16177 5.01275 3.19091 5.05647 3.23463 5.08561C2.54975 5.37705 1.96687 6.00364 1.69 6.76138C1.69 6.76138 1.67543 6.77596 1.67543 6.8051C1.63171 6.76138 1.57343 6.68853 1.51514 6.60109C0.69911 5.46448 0.582534 4.06557 1.20913 2.82696C1.85029 1.58834 3.07434 0.816029 4.42953 0.816029C4.8084 0.816029 5.20184 0.874317 5.58071 0.990893C6.77561 1.36976 7.67907 2.34608 7.98508 3.61384C8.26195 4.76503 7.98508 5.93078 7.22734 6.79053Z"
|
|
12
|
+
fill={fill}
|
|
13
|
+
/>
|
|
14
|
+
<path
|
|
15
|
+
d="M15.3874 9.29697C14.5713 7.91263 13.1433 7.08203 11.555 7.08203C11.4529 7.08203 11.3364 7.08203 11.2198 7.0966C9.52945 7.21318 8.11597 8.21864 7.44566 9.77784C6.77535 11.337 7.02308 13.0565 8.1014 14.3826C8.94657 15.4026 10.1998 16.0001 11.5258 16.0001C13.1724 16.0001 14.6151 15.1549 15.4165 13.7414C16.2034 12.3425 16.1888 10.6959 15.3874 9.29697ZM11.555 15.184C10.8992 15.184 10.258 15.0092 9.64603 14.6449C9.57317 14.6157 9.45659 14.5283 9.42745 14.5283C9.38373 14.3972 9.73346 13.6977 9.90832 13.4791C10.3163 12.9837 10.8846 12.7068 11.5112 12.7068C12.4584 12.7068 13.493 13.348 13.697 14.4554C13.1142 14.9217 12.3564 15.184 11.555 15.184ZM10.6952 11.1039C10.6661 10.7104 10.8701 10.2733 11.3801 10.1859C11.4384 10.1859 11.4967 10.1713 11.555 10.1713C12.1087 10.1713 12.371 10.623 12.3856 11.031C12.3856 11.4536 12.1378 11.8762 11.5258 11.9053C11.0012 11.9053 10.7389 11.4973 10.6952 11.1039ZM14.3091 13.8871C14.0759 13.144 13.493 12.4882 12.779 12.1822C13.1724 11.7305 13.3182 11.1039 13.1287 10.5064C12.9101 9.8507 12.3564 9.41354 11.6715 9.36983H11.555C10.8264 9.36983 10.2289 9.77784 9.98118 10.4482C9.74803 11.0456 9.87918 11.7013 10.3018 12.1822C9.60231 12.4882 9.03401 13.1148 8.75714 13.8871C7.86825 12.8234 7.64967 11.4099 8.2034 10.1276C8.78628 8.75781 10.054 7.89806 11.5112 7.89806C11.6861 7.89806 11.861 7.91263 12.0358 7.9272C13.4056 8.11664 14.5276 9.04924 14.9794 10.3899C15.4019 11.6139 15.1397 12.94 14.3091 13.8871Z"
|
|
16
|
+
fill={fill}
|
|
17
|
+
/>
|
|
18
|
+
<path
|
|
19
|
+
d="M14.2213 6.73181C14.2213 6.81924 14.163 6.87753 14.0756 6.87753H13.551C13.551 6.87753 13.4781 6.86295 13.449 6.83381C13.4198 6.80467 13.4052 6.77552 13.4052 6.73181C13.4198 5.65348 12.9972 4.61887 12.1958 3.81742C11.4089 3.03053 10.3889 2.59337 9.29596 2.59337C9.2231 2.59337 9.12109 2.52051 9.12109 2.44765V1.92306C9.12109 1.83563 9.17938 1.77734 9.26681 1.77734C10.5929 1.77734 11.8606 2.31651 12.7932 3.24911C13.7258 4.21086 14.2358 5.4349 14.2213 6.73181Z"
|
|
20
|
+
fill={fill}
|
|
21
|
+
/>
|
|
22
|
+
<path
|
|
23
|
+
d="M6.88038 13.551V14.0901C6.88038 14.0901 6.82209 14.2213 6.73466 14.2213H6.67637C5.39404 14.2358 4.15542 13.7113 3.22282 12.7641C2.29022 11.8169 1.76562 10.5491 1.76562 9.26681C1.76562 9.17938 1.83848 9.12109 1.91134 9.12109H2.43593C2.43593 9.12109 2.52337 9.13567 2.55251 9.16481C2.56708 9.19395 2.58165 9.2231 2.58165 9.26681C2.58165 10.3451 3.00424 11.3797 3.79113 12.1812C4.57801 12.9681 5.61262 13.4198 6.70552 13.4198C6.79295 13.4198 6.88038 13.4781 6.88038 13.551Z"
|
|
24
|
+
fill={fill}
|
|
25
|
+
/>
|
|
26
|
+
</svg>
|
|
27
|
+
);
|
|
28
|
+
};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { SVGProps } from 'react';
|
|
2
|
+
|
|
3
|
+
interface RelationPointsIconProps extends SVGProps<SVGSVGElement> {
|
|
4
|
+
fill?: string;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
export const RelationPointsIcon = ({ fill = '#80A0F5', ...props }: RelationPointsIconProps) => {
|
|
8
|
+
return (
|
|
9
|
+
<svg viewBox="0 0 70 70" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
|
|
10
|
+
<path
|
|
11
|
+
d="M4.90056 13.6504C5.95056 13.476 5.95056 14.0866 6.65056 14.6099C9.88806 17.0087 14.0443 17.314 17.5443 15.2205C18.0256 14.9152 19.4693 13.6504 19.6881 13.6068C20.8693 13.4324 23.0131 15.0461 23.7568 15.9184C25.1568 17.7065 25.3318 20.4978 25.0693 22.6785C24.9381 23.856 23.9756 24.8155 22.7943 24.9464C16.2756 24.5103 8.92556 25.557 2.53806 24.9464C1.44431 24.8592 0.350563 24.0741 0.175563 22.9402C-0.0869367 21.4573 0.0880633 18.4479 0.744313 17.0523C1.40056 15.6567 3.41306 13.8685 4.94431 13.6068L4.90056 13.6504Z"
|
|
12
|
+
fill={fill}
|
|
13
|
+
/>
|
|
14
|
+
<path
|
|
15
|
+
d="M49.9618 58.4401C50.7931 58.3093 51.4931 59.4432 52.2806 59.923C55.3868 61.8856 59.5868 61.8856 62.6931 59.923C63.4806 59.4432 64.1806 58.3093 65.0118 58.4401C66.8493 58.7018 68.9931 60.708 69.6056 62.409C70.0431 63.5865 70.1743 67.1629 69.7368 68.2532C69.4306 69.0383 68.5118 69.6925 67.6806 69.7797C61.1618 69.3436 53.8118 70.3903 47.4243 69.7797C46.3306 69.6925 45.2368 68.9074 45.0618 67.7735C44.8868 66.6395 44.9743 63.7174 45.2806 62.627C45.8493 60.7953 48.0368 58.7018 49.9618 58.4401Z"
|
|
16
|
+
fill={fill}
|
|
17
|
+
/>
|
|
18
|
+
<path
|
|
19
|
+
d="M32.1562 3.83814C38.325 3.35839 44.4937 4.53596 49.9187 7.50169C50.4875 7.80699 53.1125 9.68237 53.3312 9.68237C53.4187 9.68237 54.25 9.15901 54.6437 9.02817C58.5812 7.89421 62.125 11.4269 60.9437 15.3522C60.8125 15.7447 60.2875 16.617 60.2875 16.6606C60.2875 16.8786 62.1688 19.4955 62.4313 20.0624C65.8438 26.2992 67.5937 36.5048 65.0562 43.3085C64.4437 44.9659 62.825 44.9659 62.4313 43.3085C62.7375 41.8693 63.1312 40.43 63.35 38.9472C64.1812 32.6232 62.9562 25.9067 59.675 20.4113C59.4125 20.0188 58.5812 18.536 58.1875 18.4923C57.925 18.4923 57.575 18.754 57.225 18.7976C53.4187 19.1465 50.925 16.835 51.2312 12.9534C51.2312 12.43 51.7125 11.9503 51.4062 11.5578C51.1 11.1652 48.3 9.63876 47.6875 9.33347C41.2125 6.14967 33.8625 5.58269 26.95 7.5453C25.8562 7.8506 23.5812 9.02817 22.6625 8.50481C21.7875 7.98144 22.0062 6.76026 22.8812 6.23689C24.85 5.10294 29.8812 4.05621 32.2 3.88175L32.1562 3.83814Z"
|
|
20
|
+
fill={fill}
|
|
21
|
+
/>
|
|
22
|
+
<path
|
|
23
|
+
d="M5.3366 27.4741C8.0491 26.8636 6.60535 30.7888 6.4741 32.1844C5.90535 37.9851 7.3491 44.6579 10.4116 49.5863C10.5866 49.8916 11.3303 51.1128 11.5491 51.2436C11.9866 51.5489 12.3366 51.1128 12.8178 51.0692C16.6678 50.7203 19.1178 53.0318 18.8116 56.9134C18.8116 57.3495 18.3741 57.9165 18.5491 58.2218C18.7241 58.5707 21.8303 60.3153 22.4428 60.577C27.0803 62.8013 32.6366 63.848 37.7553 63.3682C39.1553 63.2374 42.1741 61.9726 42.6116 63.848C43.0491 65.7234 38.6741 65.9414 37.4491 66.0287C31.5866 66.3776 25.7241 65.2436 20.5178 62.5396C19.9053 62.1907 16.9303 60.1844 16.7116 60.1844C16.6241 60.1844 16.1866 60.5333 15.9678 60.6206C11.5053 62.3215 7.5241 58.3963 9.2741 53.9477C9.3616 53.7296 9.7116 53.2498 9.7116 53.2062C9.7116 52.9882 7.83035 50.3713 7.56785 49.8044C4.68035 44.5271 3.45535 38.552 3.8491 32.4897C3.89285 31.6611 4.33035 28.3464 4.76785 27.8231C4.8991 27.6486 5.11785 27.5178 5.3366 27.4741Z"
|
|
24
|
+
fill={fill}
|
|
25
|
+
/>
|
|
26
|
+
<path
|
|
27
|
+
d="M11.2893 0.0856923C22.3143 -1.39717 22.3143 15.2633 11.7268 14.2165C3.41434 13.3879 3.63309 1.13242 11.2893 0.0856923Z"
|
|
28
|
+
fill={fill}
|
|
29
|
+
/>
|
|
30
|
+
<path
|
|
31
|
+
d="M56.3517 44.9207C66.4142 43.6995 67.2892 58.1793 58.3204 59.0079C48.6517 59.9238 47.7767 45.9238 56.3517 44.9207Z"
|
|
32
|
+
fill={fill}
|
|
33
|
+
/>
|
|
34
|
+
</svg>
|
|
35
|
+
);
|
|
36
|
+
};
|
|
@@ -53,3 +53,6 @@ export { FileIcon } from './FileIcon';
|
|
|
53
53
|
export { IosIcon } from './IosIcon';
|
|
54
54
|
export { AndroidIcon } from './AndroidIcon';
|
|
55
55
|
export { MicrosoftIcon } from './MicrosoftIcon';
|
|
56
|
+
export { FolderAlertIcon } from './FolderAlertIcon';
|
|
57
|
+
export { RelationIcon } from './RelationIcon';
|
|
58
|
+
export { RelationPointsIcon } from './RelationPointsIcon';
|
package/src/Core/index.ts
CHANGED
package/src/Theme/index.ts
CHANGED
package/src/Theme/themes/dark.ts
CHANGED
|
@@ -160,6 +160,60 @@ export const darkThemePx: Theme = {
|
|
|
160
160
|
boxShadow: 'none',
|
|
161
161
|
},
|
|
162
162
|
},
|
|
163
|
+
soft: {
|
|
164
|
+
// колір default
|
|
165
|
+
default: {
|
|
166
|
+
background: '#80A0F5',
|
|
167
|
+
text: '#FFFFFF',
|
|
168
|
+
border: '#80A0F5',
|
|
169
|
+
boxShadow: 'none',
|
|
170
|
+
},
|
|
171
|
+
hover: {
|
|
172
|
+
background: '#10253A',
|
|
173
|
+
text: '#FFFFFF',
|
|
174
|
+
border: '#10253A',
|
|
175
|
+
boxShadow: 'none',
|
|
176
|
+
},
|
|
177
|
+
active: {
|
|
178
|
+
background: '#10253A',
|
|
179
|
+
text: '#FFFFFF',
|
|
180
|
+
border: '#10253A',
|
|
181
|
+
boxShadow: 'none',
|
|
182
|
+
},
|
|
183
|
+
disabled: {
|
|
184
|
+
background: '#EBEBEB',
|
|
185
|
+
text: '#99989C',
|
|
186
|
+
border: ' #EBEBEB',
|
|
187
|
+
boxShadow: 'none',
|
|
188
|
+
},
|
|
189
|
+
},
|
|
190
|
+
light: {
|
|
191
|
+
// колір default
|
|
192
|
+
default: {
|
|
193
|
+
background: '#535353',
|
|
194
|
+
text: '#FFFFFF',
|
|
195
|
+
border: '#535353',
|
|
196
|
+
boxShadow: 'none',
|
|
197
|
+
},
|
|
198
|
+
hover: {
|
|
199
|
+
background: '#99989C',
|
|
200
|
+
text: '#FFFFFF',
|
|
201
|
+
border: '#99989C',
|
|
202
|
+
boxShadow: 'none',
|
|
203
|
+
},
|
|
204
|
+
active: {
|
|
205
|
+
background: '#99989C',
|
|
206
|
+
text: '#FFFFFF',
|
|
207
|
+
border: '#99989C',
|
|
208
|
+
boxShadow: 'none',
|
|
209
|
+
},
|
|
210
|
+
disabled: {
|
|
211
|
+
background: '#EBEBEB',
|
|
212
|
+
text: '#99989C',
|
|
213
|
+
border: ' #EBEBEB',
|
|
214
|
+
boxShadow: 'none',
|
|
215
|
+
},
|
|
216
|
+
},
|
|
163
217
|
},
|
|
164
218
|
outlined: {
|
|
165
219
|
default: {
|
|
@@ -270,6 +324,60 @@ export const darkThemePx: Theme = {
|
|
|
270
324
|
boxShadow: 'none',
|
|
271
325
|
},
|
|
272
326
|
},
|
|
327
|
+
soft: {
|
|
328
|
+
// колір default
|
|
329
|
+
default: {
|
|
330
|
+
background: 'transparent',
|
|
331
|
+
text: '#80A0F5',
|
|
332
|
+
border: '#80A0F5',
|
|
333
|
+
boxShadow: 'none',
|
|
334
|
+
},
|
|
335
|
+
hover: {
|
|
336
|
+
background: '#10253A',
|
|
337
|
+
text: '#80A0F5',
|
|
338
|
+
border: '#1E2226',
|
|
339
|
+
boxShadow: 'none',
|
|
340
|
+
},
|
|
341
|
+
active: {
|
|
342
|
+
background: '#10253A',
|
|
343
|
+
text: '#80A0F5',
|
|
344
|
+
border: '#1E2226',
|
|
345
|
+
boxShadow: 'none',
|
|
346
|
+
},
|
|
347
|
+
disabled: {
|
|
348
|
+
background: 'transparent',
|
|
349
|
+
text: '#99989C',
|
|
350
|
+
border: ' #EBEBEB',
|
|
351
|
+
boxShadow: 'none',
|
|
352
|
+
},
|
|
353
|
+
},
|
|
354
|
+
light: {
|
|
355
|
+
// колір default
|
|
356
|
+
default: {
|
|
357
|
+
background: 'transparent',
|
|
358
|
+
text: '#99989C',
|
|
359
|
+
border: '#535353',
|
|
360
|
+
boxShadow: 'none',
|
|
361
|
+
},
|
|
362
|
+
hover: {
|
|
363
|
+
background: '#1E2226',
|
|
364
|
+
text: '#99989C',
|
|
365
|
+
border: '#1E2226',
|
|
366
|
+
boxShadow: 'none',
|
|
367
|
+
},
|
|
368
|
+
active: {
|
|
369
|
+
background: '#535353',
|
|
370
|
+
text: '#99989C',
|
|
371
|
+
border: '#535353',
|
|
372
|
+
boxShadow: 'none',
|
|
373
|
+
},
|
|
374
|
+
disabled: {
|
|
375
|
+
background: 'transparent',
|
|
376
|
+
text: '#99989C',
|
|
377
|
+
border: ' #EBEBEB',
|
|
378
|
+
boxShadow: 'none',
|
|
379
|
+
},
|
|
380
|
+
},
|
|
273
381
|
},
|
|
274
382
|
empty: {
|
|
275
383
|
default: {
|
|
@@ -397,6 +505,60 @@ export const darkThemePx: Theme = {
|
|
|
397
505
|
boxShadow: 'none',
|
|
398
506
|
},
|
|
399
507
|
},
|
|
508
|
+
soft: {
|
|
509
|
+
// колір default
|
|
510
|
+
default: {
|
|
511
|
+
background: 'transparent',
|
|
512
|
+
text: '#80A0F5',
|
|
513
|
+
border: 'transparent',
|
|
514
|
+
boxShadow: 'none',
|
|
515
|
+
},
|
|
516
|
+
hover: {
|
|
517
|
+
background: 'transparent',
|
|
518
|
+
text: '#E5ECFD',
|
|
519
|
+
border: 'transparent',
|
|
520
|
+
boxShadow: 'none',
|
|
521
|
+
},
|
|
522
|
+
active: {
|
|
523
|
+
background: 'transparent',
|
|
524
|
+
text: '#E5ECFD',
|
|
525
|
+
border: 'transparent',
|
|
526
|
+
boxShadow: 'none',
|
|
527
|
+
},
|
|
528
|
+
disabled: {
|
|
529
|
+
background: 'transparent',
|
|
530
|
+
text: '#99989C',
|
|
531
|
+
border: 'transparent',
|
|
532
|
+
boxShadow: 'none',
|
|
533
|
+
},
|
|
534
|
+
},
|
|
535
|
+
light: {
|
|
536
|
+
// колір default
|
|
537
|
+
default: {
|
|
538
|
+
background: 'transparent',
|
|
539
|
+
text: '#535353',
|
|
540
|
+
border: 'transparent',
|
|
541
|
+
boxShadow: 'none',
|
|
542
|
+
},
|
|
543
|
+
hover: {
|
|
544
|
+
background: 'transparent',
|
|
545
|
+
text: '#EEEEEE',
|
|
546
|
+
border: 'transparent',
|
|
547
|
+
boxShadow: 'none',
|
|
548
|
+
},
|
|
549
|
+
active: {
|
|
550
|
+
background: 'transparent',
|
|
551
|
+
text: '#EEEEEE',
|
|
552
|
+
border: 'transparent',
|
|
553
|
+
boxShadow: 'none',
|
|
554
|
+
},
|
|
555
|
+
disabled: {
|
|
556
|
+
background: 'transparent',
|
|
557
|
+
text: '#99989C',
|
|
558
|
+
border: 'transparent',
|
|
559
|
+
boxShadow: 'none',
|
|
560
|
+
},
|
|
561
|
+
},
|
|
400
562
|
},
|
|
401
563
|
// Розміри кнопок
|
|
402
564
|
sizes: {
|
|
@@ -794,6 +956,11 @@ export const darkThemePx: Theme = {
|
|
|
794
956
|
color: '#0F1317',
|
|
795
957
|
},
|
|
796
958
|
},
|
|
959
|
+
drawer: {
|
|
960
|
+
padding: 20,
|
|
961
|
+
width: 573,
|
|
962
|
+
shadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.25)',
|
|
963
|
+
},
|
|
797
964
|
};
|
|
798
965
|
|
|
799
966
|
export const darkTheme = convertPaletteToRem(darkThemePx, darkThemePx.baseSize) as DefaultTheme;
|
|
@@ -159,6 +159,60 @@ export const lightThemePx: Theme = {
|
|
|
159
159
|
boxShadow: 'none',
|
|
160
160
|
},
|
|
161
161
|
},
|
|
162
|
+
soft: {
|
|
163
|
+
// колір default
|
|
164
|
+
default: {
|
|
165
|
+
background: '#80A0F5',
|
|
166
|
+
text: '#FFFFFF',
|
|
167
|
+
border: '#80A0F5',
|
|
168
|
+
boxShadow: 'none',
|
|
169
|
+
},
|
|
170
|
+
hover: {
|
|
171
|
+
background: '#0042EC',
|
|
172
|
+
text: '#FFFFFF',
|
|
173
|
+
border: '#0042EC',
|
|
174
|
+
boxShadow: 'none',
|
|
175
|
+
},
|
|
176
|
+
active: {
|
|
177
|
+
background: '#0042EC',
|
|
178
|
+
text: '#FFFFFF',
|
|
179
|
+
border: '#0042EC',
|
|
180
|
+
boxShadow: 'none',
|
|
181
|
+
},
|
|
182
|
+
disabled: {
|
|
183
|
+
background: '#EBEBEB',
|
|
184
|
+
text: '#99989C',
|
|
185
|
+
border: ' #EBEBEB',
|
|
186
|
+
boxShadow: 'none',
|
|
187
|
+
},
|
|
188
|
+
},
|
|
189
|
+
light: {
|
|
190
|
+
// колір default
|
|
191
|
+
default: {
|
|
192
|
+
background: '#535353',
|
|
193
|
+
text: '#FFFFFF',
|
|
194
|
+
border: '#535353',
|
|
195
|
+
boxShadow: 'none',
|
|
196
|
+
},
|
|
197
|
+
hover: {
|
|
198
|
+
background: '#99989C',
|
|
199
|
+
text: '#FFFFFF',
|
|
200
|
+
border: '#99989C',
|
|
201
|
+
boxShadow: 'none',
|
|
202
|
+
},
|
|
203
|
+
active: {
|
|
204
|
+
background: '#99989C',
|
|
205
|
+
text: '#FFFFFF',
|
|
206
|
+
border: '#99989C',
|
|
207
|
+
boxShadow: 'none',
|
|
208
|
+
},
|
|
209
|
+
disabled: {
|
|
210
|
+
background: '#EBEBEB',
|
|
211
|
+
text: '#99989C',
|
|
212
|
+
border: ' #EBEBEB',
|
|
213
|
+
boxShadow: 'none',
|
|
214
|
+
},
|
|
215
|
+
},
|
|
162
216
|
},
|
|
163
217
|
outlined: {
|
|
164
218
|
default: {
|
|
@@ -269,6 +323,60 @@ export const lightThemePx: Theme = {
|
|
|
269
323
|
boxShadow: 'none',
|
|
270
324
|
},
|
|
271
325
|
},
|
|
326
|
+
soft: {
|
|
327
|
+
// колір default
|
|
328
|
+
default: {
|
|
329
|
+
background: 'transparent',
|
|
330
|
+
text: '#80A0F5',
|
|
331
|
+
border: '#80A0F5',
|
|
332
|
+
boxShadow: 'none',
|
|
333
|
+
},
|
|
334
|
+
hover: {
|
|
335
|
+
background: '#E5ECFD',
|
|
336
|
+
text: '#80A0F5',
|
|
337
|
+
border: '#80A0F5',
|
|
338
|
+
boxShadow: 'none',
|
|
339
|
+
},
|
|
340
|
+
active: {
|
|
341
|
+
background: '#E5ECFD',
|
|
342
|
+
text: '#80A0F5',
|
|
343
|
+
border: '#80A0F5',
|
|
344
|
+
boxShadow: 'none',
|
|
345
|
+
},
|
|
346
|
+
disabled: {
|
|
347
|
+
background: 'transparent',
|
|
348
|
+
text: '#99989C',
|
|
349
|
+
border: ' #EBEBEB',
|
|
350
|
+
boxShadow: 'none',
|
|
351
|
+
},
|
|
352
|
+
},
|
|
353
|
+
light: {
|
|
354
|
+
// колір default
|
|
355
|
+
default: {
|
|
356
|
+
background: 'transparent',
|
|
357
|
+
text: '#535353',
|
|
358
|
+
border: '#EBEBEB',
|
|
359
|
+
boxShadow: 'none',
|
|
360
|
+
},
|
|
361
|
+
hover: {
|
|
362
|
+
background: '#EEEEEE',
|
|
363
|
+
text: '#535353',
|
|
364
|
+
border: '#EBEBEB',
|
|
365
|
+
boxShadow: 'none',
|
|
366
|
+
},
|
|
367
|
+
active: {
|
|
368
|
+
background: '#EEEEEE',
|
|
369
|
+
text: '#535353',
|
|
370
|
+
border: '#EBEBEB',
|
|
371
|
+
boxShadow: 'none',
|
|
372
|
+
},
|
|
373
|
+
disabled: {
|
|
374
|
+
background: 'transparent',
|
|
375
|
+
text: '#99989C',
|
|
376
|
+
border: ' #EBEBEB',
|
|
377
|
+
boxShadow: 'none',
|
|
378
|
+
},
|
|
379
|
+
},
|
|
272
380
|
},
|
|
273
381
|
empty: {
|
|
274
382
|
default: {
|
|
@@ -396,6 +504,60 @@ export const lightThemePx: Theme = {
|
|
|
396
504
|
boxShadow: 'none',
|
|
397
505
|
},
|
|
398
506
|
},
|
|
507
|
+
soft: {
|
|
508
|
+
// колір default
|
|
509
|
+
default: {
|
|
510
|
+
background: 'transparent',
|
|
511
|
+
text: '#80A0F5',
|
|
512
|
+
border: 'transparent',
|
|
513
|
+
boxShadow: 'none',
|
|
514
|
+
},
|
|
515
|
+
hover: {
|
|
516
|
+
background: 'transparent',
|
|
517
|
+
text: '#E5ECFD',
|
|
518
|
+
border: 'transparent',
|
|
519
|
+
boxShadow: 'none',
|
|
520
|
+
},
|
|
521
|
+
active: {
|
|
522
|
+
background: 'transparent',
|
|
523
|
+
text: '#E5ECFD',
|
|
524
|
+
border: 'transparent',
|
|
525
|
+
boxShadow: 'none',
|
|
526
|
+
},
|
|
527
|
+
disabled: {
|
|
528
|
+
background: 'transparent',
|
|
529
|
+
text: '#99989C',
|
|
530
|
+
border: 'transparent',
|
|
531
|
+
boxShadow: 'none',
|
|
532
|
+
},
|
|
533
|
+
},
|
|
534
|
+
light: {
|
|
535
|
+
// колір default
|
|
536
|
+
default: {
|
|
537
|
+
background: 'transparent',
|
|
538
|
+
text: '#535353',
|
|
539
|
+
border: 'transparent',
|
|
540
|
+
boxShadow: 'none',
|
|
541
|
+
},
|
|
542
|
+
hover: {
|
|
543
|
+
background: 'transparent',
|
|
544
|
+
text: '#EEEEEE',
|
|
545
|
+
border: 'transparent',
|
|
546
|
+
boxShadow: 'none',
|
|
547
|
+
},
|
|
548
|
+
active: {
|
|
549
|
+
background: 'transparent',
|
|
550
|
+
text: '#EEEEEE',
|
|
551
|
+
border: 'transparent',
|
|
552
|
+
boxShadow: 'none',
|
|
553
|
+
},
|
|
554
|
+
disabled: {
|
|
555
|
+
background: 'transparent',
|
|
556
|
+
text: '#99989C',
|
|
557
|
+
border: 'transparent',
|
|
558
|
+
boxShadow: 'none',
|
|
559
|
+
},
|
|
560
|
+
},
|
|
399
561
|
},
|
|
400
562
|
// Розміри кнопок
|
|
401
563
|
sizes: {
|
|
@@ -793,6 +955,11 @@ export const lightThemePx: Theme = {
|
|
|
793
955
|
color: '#FFFFFF',
|
|
794
956
|
},
|
|
795
957
|
},
|
|
958
|
+
drawer: {
|
|
959
|
+
padding: 20,
|
|
960
|
+
width: 573,
|
|
961
|
+
shadow: '0px 4px 10px 0px rgba(0, 0, 0, 0.25)',
|
|
962
|
+
},
|
|
796
963
|
};
|
|
797
964
|
|
|
798
965
|
export const lightTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;
|
package/src/Theme/types.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { CSSProperties } from 'styled-components';
|
|
|
2
2
|
|
|
3
3
|
// Типи для компонентної палітри
|
|
4
4
|
export type ButtonVariant = 'fill' | 'outlined' | 'empty';
|
|
5
|
-
export type ButtonColor = 'default' | 'primary' | 'secondary' | 'error';
|
|
5
|
+
export type ButtonColor = 'default' | 'primary' | 'secondary' | 'error' | 'soft' | 'light';
|
|
6
6
|
export type ButtonState = 'default' | 'hover' | 'active' | 'disabled';
|
|
7
7
|
export type ButtonSize = 'small' | 'medium';
|
|
8
8
|
|
|
@@ -299,6 +299,11 @@ export type Theme = {
|
|
|
299
299
|
color: string;
|
|
300
300
|
}
|
|
301
301
|
>;
|
|
302
|
+
drawer: {
|
|
303
|
+
padding: string | number;
|
|
304
|
+
width: number;
|
|
305
|
+
shadow: string;
|
|
306
|
+
};
|
|
302
307
|
};
|
|
303
308
|
|
|
304
309
|
//TODO check and refactoring
|