skillgrid 0.0.89 → 0.0.90
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/assets/styles/{button.module-DjunAbRS.css → button.module-BG9KYkTN.css} +1 -1
- package/dist/components/Avatar/AvatarGroup/AvatarGroupRoot.js +5 -5
- package/dist/components/ConfigProvider/ConfigProvider.js +1 -1
- package/dist/components/FileUpload/FileUpload.js +1 -1
- package/dist/components/InputBase/Input.js +6 -6
- package/dist/components/Popover/lib/use-popover.js +1 -1
- package/dist/components/Tabs/ScrollWrapper.js +1 -1
- package/dist/components/Tabs/Tabs.js +1 -1
- package/dist/index.cjs.js +25 -3
- package/dist/index.css +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +91 -89
- package/dist/styles/brand.module.css.js +24 -2
- package/dist/styles/brand.module.css2.js +4 -0
- package/dist/styles/button.module.css.js +1 -1
- package/dist/utils/generate-brand-primary-palette.d.ts +36 -0
- package/dist/utils/generate-brand-primary-palette.js +101 -0
- package/package.json +2 -1
package/dist/index.d.ts
CHANGED
package/dist/index.es.js
CHANGED
|
@@ -1,95 +1,97 @@
|
|
|
1
1
|
import { Avatar as e } from "./components/Avatar/index.js";
|
|
2
2
|
import { Radio as p } from "./components/Radio/index.js";
|
|
3
|
-
import {
|
|
4
|
-
import { default as a } from "./locale/
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import {
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
33
|
-
import {
|
|
34
|
-
import {
|
|
35
|
-
import {
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import {
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
41
|
-
import {
|
|
42
|
-
import {
|
|
43
|
-
import {
|
|
44
|
-
import {
|
|
45
|
-
import {
|
|
46
|
-
import {
|
|
3
|
+
import { generateBrandPrimaryPalette as m } from "./utils/generate-brand-primary-palette.js";
|
|
4
|
+
import { default as a } from "./locale/en_US.js";
|
|
5
|
+
import { default as s } from "./locale/ru_RU.js";
|
|
6
|
+
import { Button as i } from "./components/Button/Button.js";
|
|
7
|
+
import { Modal as l } from "./components/Modal/Modal.js";
|
|
8
|
+
import { Alert as g } from "./components/Alert/Alert.js";
|
|
9
|
+
import { Placeholder as P } from "./components/Placeholder/Placeholder.js";
|
|
10
|
+
import { Badge as C } from "./components/Badge/Badge.js";
|
|
11
|
+
import { Image as S } from "./components/Image/Image.js";
|
|
12
|
+
import { Loader as y } from "./components/Loader/Loader.js";
|
|
13
|
+
import { ConfigProvider as b } from "./components/ConfigProvider/ConfigProvider.js";
|
|
14
|
+
import { useConfig as U, useLocale as k } from "./components/ConfigProvider/ConfigProvider.hook.js";
|
|
15
|
+
import { Icon as D } from "./components/Icon/IconWithCategories.js";
|
|
16
|
+
import { CountryIcons as R } from "./components/Icon/categories/country.js";
|
|
17
|
+
import { EditorIcons as F } from "./components/Icon/categories/editor.js";
|
|
18
|
+
import { LayoutIcons as H } from "./components/Icon/categories/layout.js";
|
|
19
|
+
import { UsersIcons as j } from "./components/Icon/categories/users.js";
|
|
20
|
+
import { GeneralIcons as z } from "./components/Icon/categories/general.js";
|
|
21
|
+
import { ArrowsIcons as K } from "./components/Icon/categories/arrows.js";
|
|
22
|
+
import { ChartsIcons as O } from "./components/Icon/categories/charts.js";
|
|
23
|
+
import { PrivateIcons as V } from "./components/Icon/categories/private.js";
|
|
24
|
+
import { DevelopmentIcons as X } from "./components/Icon/categories/development.js";
|
|
25
|
+
import { ProductIcons as Z } from "./components/Icon/categories/product.js";
|
|
26
|
+
import { ServiceIcons as $ } from "./components/Icon/categories/service.js";
|
|
27
|
+
import { extendLocale as ro } from "./locale/extendLocale.js";
|
|
28
|
+
import { Tag as to } from "./components/Tag/Tag.js";
|
|
29
|
+
import { Checkbox as fo } from "./components/Checkbox/Checkbox.js";
|
|
30
|
+
import { Typography as xo } from "./components/Typography/Typography.js";
|
|
31
|
+
import { TextInput as no } from "./components/TextInput/TextInput.js";
|
|
32
|
+
import { TextArea as co } from "./components/TextArea/TextArea.js";
|
|
33
|
+
import { Helper as lo } from "./components/Helper/Helper.js";
|
|
34
|
+
import { List as go } from "./components/List/List.js";
|
|
35
|
+
import { Tabs as Po } from "./components/Tabs/Tabs.js";
|
|
36
|
+
import { Tooltip as Co } from "./components/Tooltip/Tooltip.js";
|
|
37
|
+
import { SegmentedControl as So } from "./components/SegmentedControl/SegmentedControl.js";
|
|
38
|
+
import { Trigger as yo } from "./components/Trigger/Trigger.js";
|
|
39
|
+
import { useSnackbar as bo } from "./components/Snackbar/lib/useSnackbar.js";
|
|
40
|
+
import { SnackbarProvider as Uo } from "./components/Snackbar/Provider/SnackbarProvider.js";
|
|
41
|
+
import { Divider as Bo } from "./components/Divider/Divider.js";
|
|
42
|
+
import { Drop as wo } from "./components/Drop/Drop.js";
|
|
43
|
+
import { Container as Eo } from "./components/Container/Container.js";
|
|
44
|
+
import { Progress as Go } from "./components/Progress/Progress.js";
|
|
45
|
+
import { Switch as Mo } from "./components/Switch/Switch.js";
|
|
46
|
+
import { FileUpload as qo } from "./components/FileUpload/FileUpload.js";
|
|
47
|
+
import { Popover as Jo } from "./components/Popover/Popover.js";
|
|
47
48
|
export {
|
|
48
|
-
|
|
49
|
-
|
|
49
|
+
g as Alert,
|
|
50
|
+
K as ArrowsIcons,
|
|
50
51
|
e as Avatar,
|
|
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
|
-
|
|
52
|
+
C as Badge,
|
|
53
|
+
i as Button,
|
|
54
|
+
O as ChartsIcons,
|
|
55
|
+
fo as Checkbox,
|
|
56
|
+
b as ConfigProvider,
|
|
57
|
+
Eo as Container,
|
|
58
|
+
R as CountryIcons,
|
|
59
|
+
X as DevelopmentIcons,
|
|
60
|
+
Bo as Divider,
|
|
61
|
+
wo as Drop,
|
|
62
|
+
F as EditorIcons,
|
|
63
|
+
qo as FileUpload,
|
|
64
|
+
z as GeneralIcons,
|
|
65
|
+
lo as Helper,
|
|
66
|
+
D as Icon,
|
|
67
|
+
S as Image,
|
|
68
|
+
H as LayoutIcons,
|
|
69
|
+
go as List,
|
|
70
|
+
y as Loader,
|
|
71
|
+
l as Modal,
|
|
72
|
+
P as Placeholder,
|
|
73
|
+
Jo as Popover,
|
|
74
|
+
V as PrivateIcons,
|
|
75
|
+
Z as ProductIcons,
|
|
76
|
+
Go as Progress,
|
|
76
77
|
p as Radio,
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
78
|
+
So as SegmentedControl,
|
|
79
|
+
$ as ServiceIcons,
|
|
80
|
+
Uo as SnackbarProvider,
|
|
81
|
+
Mo as Switch,
|
|
82
|
+
Po as Tabs,
|
|
83
|
+
to as Tag,
|
|
84
|
+
co as TextArea,
|
|
85
|
+
no as TextInput,
|
|
86
|
+
Co as Tooltip,
|
|
87
|
+
yo as Trigger,
|
|
88
|
+
xo as Typography,
|
|
89
|
+
j as UsersIcons,
|
|
90
|
+
a as enUS,
|
|
91
|
+
ro as extendLocale,
|
|
92
|
+
m as generateBrandPrimaryPalette,
|
|
93
|
+
s as ruRU,
|
|
94
|
+
U as useConfig,
|
|
95
|
+
k as useLocale,
|
|
96
|
+
bo as useSnackbar
|
|
95
97
|
};
|
|
@@ -1,4 +1,26 @@
|
|
|
1
|
-
|
|
1
|
+
const r = `:root {
|
|
2
|
+
--brand-primary-50: #665414;
|
|
3
|
+
--brand-primary-100: #766013;
|
|
4
|
+
--brand-primary-150: #8E7313;
|
|
5
|
+
--brand-primary-200: #A08112;
|
|
6
|
+
--brand-primary-250: #B48C00;
|
|
7
|
+
--brand-primary-300: #C19700;
|
|
8
|
+
--brand-primary-350: #CDA000;
|
|
9
|
+
--brand-primary-400: #E0AF00;
|
|
10
|
+
--brand-primary-450: #EFBE0D;
|
|
11
|
+
--brand-primary-500: #FFC804;
|
|
12
|
+
--brand-primary-550: #FFD12F;
|
|
13
|
+
--brand-primary-600: #FFD74A;
|
|
14
|
+
--brand-primary-650: #FFDD65;
|
|
15
|
+
--brand-primary-700: #FFE27B;
|
|
16
|
+
--brand-primary-750: #FFE895;
|
|
17
|
+
--brand-primary-800: #FFEDAB;
|
|
18
|
+
--brand-primary-850: #FFF1BF;
|
|
19
|
+
--brand-primary-900: #FFF4CE;
|
|
20
|
+
--brand-primary-950: #FFF8DE;
|
|
21
|
+
--brand-primary-970: #FFFBEC;
|
|
22
|
+
}
|
|
23
|
+
`;
|
|
2
24
|
export {
|
|
3
|
-
|
|
25
|
+
r as default
|
|
4
26
|
};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
declare const ACCENT_REFERENCE: {
|
|
2
|
+
readonly 50: "#000f31";
|
|
3
|
+
readonly 100: "#001947";
|
|
4
|
+
readonly 150: "#00235a";
|
|
5
|
+
readonly 200: "#012d6e";
|
|
6
|
+
readonly 250: "#003786";
|
|
7
|
+
readonly 300: "#00429b";
|
|
8
|
+
readonly 350: "#034cb4";
|
|
9
|
+
readonly 400: "#0058cc";
|
|
10
|
+
readonly 450: "#0d63e3";
|
|
11
|
+
readonly 500: "#0070ff";
|
|
12
|
+
readonly 550: "#2b7fff";
|
|
13
|
+
readonly 600: "#468ffd";
|
|
14
|
+
readonly 650: "#5e9eff";
|
|
15
|
+
readonly 700: "#76adfe";
|
|
16
|
+
readonly 750: "#8cbbff";
|
|
17
|
+
readonly 800: "#a4c9fe";
|
|
18
|
+
readonly 850: "#b9d7ff";
|
|
19
|
+
readonly 900: "#d1e4fe";
|
|
20
|
+
readonly 950: "#e7f2ff";
|
|
21
|
+
readonly 970: "#f3f9ff";
|
|
22
|
+
};
|
|
23
|
+
export type BrandPrimaryStep = keyof typeof ACCENT_REFERENCE;
|
|
24
|
+
export type BrandPrimaryPalette = Record<`--brand-primary-${BrandPrimaryStep}`, string>;
|
|
25
|
+
/**
|
|
26
|
+
* Генерирует CSS-переменные brand-primary из непрозрачного цвета #RGB или #RRGGBB.
|
|
27
|
+
* Шаг 500 точно сохраняет исходный цвет в формате шестизначного HEX.
|
|
28
|
+
*
|
|
29
|
+
* @param hex Исходный непрозрачный цвет в формате #RGB или #RRGGBB.
|
|
30
|
+
* @returns Объект CSS-переменных для ConfigProvider.theme.
|
|
31
|
+
* @example
|
|
32
|
+
* const theme = generateBrandPrimaryPalette('#FFC804');
|
|
33
|
+
* // <ConfigProvider theme={theme}>...</ConfigProvider>
|
|
34
|
+
*/
|
|
35
|
+
export declare function generateBrandPrimaryPalette(hex: string): BrandPrimaryPalette;
|
|
36
|
+
export {};
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
import { colordx as s, inGamutSrgb as S, extend as A } from "@colordx/core";
|
|
2
|
+
import N from "@colordx/core/plugins/a11y";
|
|
3
|
+
import j from "@colordx/core/plugins/mix";
|
|
4
|
+
import G from "../styles/brand.module.css.js";
|
|
5
|
+
A([N, j]);
|
|
6
|
+
const h = {
|
|
7
|
+
50: "#000f31",
|
|
8
|
+
100: "#001947",
|
|
9
|
+
150: "#00235a",
|
|
10
|
+
200: "#012d6e",
|
|
11
|
+
250: "#003786",
|
|
12
|
+
300: "#00429b",
|
|
13
|
+
350: "#034cb4",
|
|
14
|
+
400: "#0058cc",
|
|
15
|
+
450: "#0d63e3",
|
|
16
|
+
500: "#0070ff",
|
|
17
|
+
550: "#2b7fff",
|
|
18
|
+
600: "#468ffd",
|
|
19
|
+
650: "#5e9eff",
|
|
20
|
+
700: "#76adfe",
|
|
21
|
+
750: "#8cbbff",
|
|
22
|
+
800: "#a4c9fe",
|
|
23
|
+
850: "#b9d7ff",
|
|
24
|
+
900: "#d1e4fe",
|
|
25
|
+
950: "#e7f2ff",
|
|
26
|
+
970: "#f3f9ff"
|
|
27
|
+
}, y = Object.fromEntries(
|
|
28
|
+
[...G.matchAll(/(--brand-primary-\d+):\s*(#[\da-f]{6})\s*;/gi)].map(([, t, e]) => [
|
|
29
|
+
t,
|
|
30
|
+
e
|
|
31
|
+
])
|
|
32
|
+
);
|
|
33
|
+
function c(t) {
|
|
34
|
+
const e = s(t);
|
|
35
|
+
return e.apcaContrast("#ffffff", { precision: 6 }) + e.apcaContrast("#000000", { precision: 6 });
|
|
36
|
+
}
|
|
37
|
+
const M = s(h[500]).toOklch().c, v = c(h[500]), P = c("#000000"), $ = c("#ffffff"), B = Object.entries(h).map(([t, e]) => {
|
|
38
|
+
const r = c(e), f = s(e).toOklch().c;
|
|
39
|
+
return {
|
|
40
|
+
step: Number(t),
|
|
41
|
+
token: `--brand-primary-${t}`,
|
|
42
|
+
score: r,
|
|
43
|
+
chromaRatio: f / M
|
|
44
|
+
};
|
|
45
|
+
});
|
|
46
|
+
function F(t, e, r) {
|
|
47
|
+
if (S({ l: t, c: e, h: r })) return s({ l: t, c: e, h: r }).toHex();
|
|
48
|
+
let f = 0, a = e;
|
|
49
|
+
for (let m = 0; m < 24; m++) {
|
|
50
|
+
const n = (f + a) / 2;
|
|
51
|
+
S({ l: t, c: n, h: r }) ? f = n : a = n;
|
|
52
|
+
}
|
|
53
|
+
return s({ l: t, c: f, h: r }).toHex();
|
|
54
|
+
}
|
|
55
|
+
function J(t) {
|
|
56
|
+
if (typeof t != "string" || !/^#(?:[\da-f]{3}|[\da-f]{6})$/i.test(t))
|
|
57
|
+
return { ...y };
|
|
58
|
+
try {
|
|
59
|
+
return T(t);
|
|
60
|
+
} catch {
|
|
61
|
+
return { ...y };
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
function T(t) {
|
|
65
|
+
const e = s(t), r = e.toHex(), f = c(r), { c: a, h: m } = e.toOklch(), n = {};
|
|
66
|
+
let d = "#000000", u = P;
|
|
67
|
+
for (const o of B) {
|
|
68
|
+
if (o.step === 970) {
|
|
69
|
+
n[o.token] = e.mix("#ffffff", 0.925).toHex();
|
|
70
|
+
continue;
|
|
71
|
+
}
|
|
72
|
+
if (o.step === 950) {
|
|
73
|
+
n[o.token] = e.mix("#ffffff", 0.875).toHex();
|
|
74
|
+
continue;
|
|
75
|
+
}
|
|
76
|
+
if (o.step === 900) {
|
|
77
|
+
n[o.token] = e.mix("#ffffff", 0.825).toHex();
|
|
78
|
+
continue;
|
|
79
|
+
}
|
|
80
|
+
if (o.step === 500) {
|
|
81
|
+
n[o.token] = r, d = r, u = f;
|
|
82
|
+
continue;
|
|
83
|
+
}
|
|
84
|
+
const x = o.step < 500 ? P : $, R = (o.score - v) / (x - v), l = f + R * (x - f);
|
|
85
|
+
if (l === f) {
|
|
86
|
+
n[o.token] = r;
|
|
87
|
+
continue;
|
|
88
|
+
}
|
|
89
|
+
let k = 0, g = 1, i = o.step < 500 ? r : d, H = Math.abs(c(i) - l);
|
|
90
|
+
const w = a * o.chromaRatio;
|
|
91
|
+
for (let C = 0; C < 28; C++) {
|
|
92
|
+
const b = (k + g) / 2, E = F(b, w, m), p = c(E), O = Math.abs(p - l);
|
|
93
|
+
p <= u && (o.step > 500 || p >= f) && O < H && (i = E, H = O), p > l ? k = b : g = b;
|
|
94
|
+
}
|
|
95
|
+
n[o.token] = i, d = i, u = c(i);
|
|
96
|
+
}
|
|
97
|
+
return n;
|
|
98
|
+
}
|
|
99
|
+
export {
|
|
100
|
+
J as generateBrandPrimaryPalette
|
|
101
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "skillgrid",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.90",
|
|
4
4
|
"description": "Skillgrid Components Library",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -126,6 +126,7 @@
|
|
|
126
126
|
},
|
|
127
127
|
"packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447",
|
|
128
128
|
"dependencies": {
|
|
129
|
+
"@colordx/core": "^7.2.0",
|
|
129
130
|
"@floating-ui/react": "^0.27.16",
|
|
130
131
|
"@testing-library/react": "^16.3.0",
|
|
131
132
|
"antd": "^5.25.1",
|