@peassoft/mnr-web-ui-kit 0.1.2 → 1.0.1
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/README.md +6 -0
- package/dist/button/styles.css +15 -5
- package/dist/button-radio-group/styles.css +22 -6
- package/dist/error-message/styles.css +5 -0
- package/dist/input-field/styles.css +38 -0
- package/dist/plain-select/styles.css +15 -0
- package/dist/select/styles.css +19 -0
- package/dist/text-button/styles.css +8 -2
- package/package.json +18 -42
package/README.md
CHANGED
|
@@ -1 +1,7 @@
|
|
|
1
1
|
# Memorize'n'Revise Web UI Kit
|
|
2
|
+
|
|
3
|
+
## Light/Dark Color Schemes
|
|
4
|
+
|
|
5
|
+
The Kit supports the `prefers-color-scheme` media query.
|
|
6
|
+
|
|
7
|
+
To check appearance of a component in any scheme, while running the Storybook, use Chrome DevTools to emulate a color scheme (`Rendering` tab).
|
package/dist/button/styles.css
CHANGED
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
.uikit_Button_btn {
|
|
2
|
+
--uikit-color-main: #3f72af;
|
|
3
|
+
--uikit-color-secondary: #dbe2ef;
|
|
4
|
+
|
|
2
5
|
display: block;
|
|
3
6
|
appearance: none;
|
|
4
7
|
border: 0;
|
|
5
|
-
color:
|
|
6
|
-
background-color:
|
|
8
|
+
color: var(--uikit-color-secondary);
|
|
9
|
+
background-color: var(--uikit-color-main);
|
|
10
|
+
border: 1px solid var(--uikit-color-main);
|
|
7
11
|
border-radius: 5px;
|
|
8
12
|
font-family: inherit;
|
|
9
13
|
font-size: 1em;
|
|
@@ -15,9 +19,15 @@
|
|
|
15
19
|
}
|
|
16
20
|
|
|
17
21
|
.uikit_Button_btn--secondary {
|
|
18
|
-
color:
|
|
19
|
-
background-color:
|
|
20
|
-
border: 1px solid
|
|
22
|
+
color: var(--uikit-color-main);
|
|
23
|
+
background-color: var(--uikit-color-secondary);
|
|
24
|
+
border: 1px solid var(--uikit-color-main);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@media (prefers-color-scheme: dark) {
|
|
28
|
+
.uikit_Button_btn--secondary {
|
|
29
|
+
border-color: var(--uikit-color-secondary);
|
|
30
|
+
}
|
|
21
31
|
}
|
|
22
32
|
|
|
23
33
|
.uikit_Button_btn--stretched {
|
|
@@ -1,9 +1,18 @@
|
|
|
1
1
|
.uikit_ButtonRadioGroup_label {
|
|
2
2
|
margin: 0 0 0.5em;
|
|
3
|
-
color: #
|
|
3
|
+
color: #666;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
@media (prefers-color-scheme: dark) {
|
|
7
|
+
.uikit_ButtonRadioGroup_label {
|
|
8
|
+
color: #979797;
|
|
9
|
+
}
|
|
4
10
|
}
|
|
5
11
|
|
|
6
12
|
.uikit_ButtonRadioGroup_cont {
|
|
13
|
+
--uikit-color-main: #3f72af;
|
|
14
|
+
--uikit-color-secondary: #dbe2ef;
|
|
15
|
+
|
|
7
16
|
display: flex;
|
|
8
17
|
align-items: center;
|
|
9
18
|
}
|
|
@@ -11,10 +20,10 @@
|
|
|
11
20
|
.uikit_ButtonRadioGroup_btn {
|
|
12
21
|
display: block;
|
|
13
22
|
appearance: none;
|
|
14
|
-
border: 1px solid
|
|
23
|
+
border: 1px solid var(--uikit-color-main);
|
|
15
24
|
border-right: 0;
|
|
16
|
-
color:
|
|
17
|
-
background-color:
|
|
25
|
+
color: var(--uikit-color-main);
|
|
26
|
+
background-color: var(--uikit-color-secondary);
|
|
18
27
|
border-radius: 5px 0 0 5px;
|
|
19
28
|
font-family: inherit;
|
|
20
29
|
font-size: 1em;
|
|
@@ -26,12 +35,19 @@
|
|
|
26
35
|
}
|
|
27
36
|
|
|
28
37
|
.uikit_ButtonRadioGroup_btn--checked {
|
|
29
|
-
|
|
38
|
+
color: var(--uikit-color-secondary);
|
|
39
|
+
background-color: var(--uikit-color-main);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@media (prefers-color-scheme: dark) {
|
|
43
|
+
.uikit_ButtonRadioGroup_btn--checked {
|
|
44
|
+
border-color: var(--uikit-color-main);
|
|
45
|
+
}
|
|
30
46
|
}
|
|
31
47
|
|
|
32
48
|
.uikit_ButtonRadioGroup_btn--last {
|
|
33
49
|
border-radius: 0 5px 5px 0;
|
|
34
|
-
border-right: 1px solid
|
|
50
|
+
border-right: 1px solid var(--uikit-color-main);
|
|
35
51
|
}
|
|
36
52
|
|
|
37
53
|
.uikit_ButtonRadioGroup_btn--mid {
|
|
@@ -15,6 +15,12 @@
|
|
|
15
15
|
width: 100%;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
+
@media (prefers-color-scheme: dark) {
|
|
19
|
+
.uikit_InputField_label {
|
|
20
|
+
color: #979797;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
18
24
|
.uikit_InputField_input {
|
|
19
25
|
display: block;
|
|
20
26
|
box-sizing: border-box;
|
|
@@ -28,11 +34,25 @@
|
|
|
28
34
|
font-family: inherit;
|
|
29
35
|
}
|
|
30
36
|
|
|
37
|
+
@media (prefers-color-scheme: dark) {
|
|
38
|
+
.uikit_InputField_input {
|
|
39
|
+
background-color: #f9f9f9;
|
|
40
|
+
border-color: #f9f9f9;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
31
44
|
.uikit_InputField_input:disabled {
|
|
32
45
|
color: #848484;
|
|
33
46
|
background-color: #efefef;
|
|
34
47
|
}
|
|
35
48
|
|
|
49
|
+
@media (prefers-color-scheme: dark) {
|
|
50
|
+
.uikit_InputField_input:disabled {
|
|
51
|
+
background-color: #dadada;
|
|
52
|
+
border-color: #dadada;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
36
56
|
.uikit_InputField_capslockMsg {
|
|
37
57
|
display: flex;
|
|
38
58
|
gap: .5em;
|
|
@@ -41,13 +61,31 @@
|
|
|
41
61
|
font-size: 0.85rem;
|
|
42
62
|
}
|
|
43
63
|
|
|
64
|
+
@media (prefers-color-scheme: dark) {
|
|
65
|
+
.uikit_InputField_capslockMsg {
|
|
66
|
+
color: #979797;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
|
|
44
70
|
.uikit_InputField_capslockIcon {
|
|
45
71
|
color: #a7241b;
|
|
46
72
|
fill: currentColor;
|
|
47
73
|
}
|
|
48
74
|
|
|
75
|
+
@media (prefers-color-scheme: dark) {
|
|
76
|
+
.uikit_InputField_capslockIcon {
|
|
77
|
+
color: #fb827a;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
49
81
|
.uikit_InputField_errorMsg {
|
|
50
82
|
color: #a7241b;
|
|
51
83
|
font-size: 0.85rem;
|
|
52
84
|
margin-top: 0.2em;
|
|
53
85
|
}
|
|
86
|
+
|
|
87
|
+
@media (prefers-color-scheme: dark) {
|
|
88
|
+
.uikit_InputField_errorMsg {
|
|
89
|
+
color: #fb827a;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
@@ -3,14 +3,28 @@
|
|
|
3
3
|
color: #757575;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
+
@media (prefers-color-scheme: dark) {
|
|
7
|
+
.uikit_PlainSelect_label {
|
|
8
|
+
color: #979797;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
6
12
|
.uikit_PlainSelect_cont {
|
|
7
13
|
margin: 0.5em 0 0;
|
|
8
14
|
padding: 0.5em;
|
|
15
|
+
background-color: #fff;
|
|
9
16
|
border: 1px solid #bcbcbc;
|
|
10
17
|
list-style-type: none;
|
|
11
18
|
border-radius: 0.25em;
|
|
12
19
|
}
|
|
13
20
|
|
|
21
|
+
@media (prefers-color-scheme: dark) {
|
|
22
|
+
.uikit_PlainSelect_cont {
|
|
23
|
+
background-color: #f9f9f9;
|
|
24
|
+
border-color: #f9f9f9;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
14
28
|
.uikit_PlainSelect_itemCont {
|
|
15
29
|
display: flex;
|
|
16
30
|
align-items: flex-start;
|
|
@@ -32,6 +46,7 @@
|
|
|
32
46
|
flex-basis: 100%;
|
|
33
47
|
flex-shrink: 1;
|
|
34
48
|
padding-bottom: 0.25em;
|
|
49
|
+
color: #242629;
|
|
35
50
|
}
|
|
36
51
|
|
|
37
52
|
.uikit_PlainSelect_description {
|
package/dist/select/styles.css
CHANGED
|
@@ -15,6 +15,12 @@
|
|
|
15
15
|
width: 100%;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
+
@media (prefers-color-scheme: dark) {
|
|
19
|
+
.uikit_Select_label {
|
|
20
|
+
color: #979797;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
18
24
|
.uikit_Select_selectCont {
|
|
19
25
|
position: relative;
|
|
20
26
|
}
|
|
@@ -33,6 +39,13 @@
|
|
|
33
39
|
appearance: none;
|
|
34
40
|
}
|
|
35
41
|
|
|
42
|
+
@media (prefers-color-scheme: dark) {
|
|
43
|
+
.uikit_Select_input {
|
|
44
|
+
background-color: #f9f9f9;
|
|
45
|
+
border-color: #f9f9f9;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
36
49
|
.uikit_Select_arrowCont {
|
|
37
50
|
position: absolute;
|
|
38
51
|
top: 0;
|
|
@@ -47,3 +60,9 @@
|
|
|
47
60
|
font-size: 0.85rem;
|
|
48
61
|
margin-top: 0.2em;
|
|
49
62
|
}
|
|
63
|
+
|
|
64
|
+
@media (prefers-color-scheme: dark) {
|
|
65
|
+
.uikit_Select_errorMsg {
|
|
66
|
+
color: #fb827a;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
display: inline;
|
|
3
3
|
appearance: none;
|
|
4
4
|
border: 0;
|
|
5
|
-
border-bottom: 1px solid
|
|
6
|
-
color: #
|
|
5
|
+
border-bottom: 1px solid currentColor;
|
|
6
|
+
color: #3f72af;
|
|
7
7
|
background-color: transparent;
|
|
8
8
|
font-family: inherit;
|
|
9
9
|
font-size: 1em;
|
|
@@ -12,3 +12,9 @@
|
|
|
12
12
|
cursor: pointer;
|
|
13
13
|
outline-offset: 3px;
|
|
14
14
|
}
|
|
15
|
+
|
|
16
|
+
@media (prefers-color-scheme: dark) {
|
|
17
|
+
.uikit_TextButton_btn {
|
|
18
|
+
color: #dbe2ef;
|
|
19
|
+
}
|
|
20
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@peassoft/mnr-web-ui-kit",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "1.0.1",
|
|
4
4
|
"description": "Peassoft web UI kit for MNR web applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
],
|
|
12
12
|
"scripts": {
|
|
13
13
|
"dev": "npm run storybook",
|
|
14
|
-
"test": "stylelint './src/**/*.css' && eslint ./ && npm run tsc &&
|
|
14
|
+
"test": "stylelint './src/**/*.css' && eslint ./ && npm run tsc && vitest run",
|
|
15
15
|
"tsc": "tsc --noEmit",
|
|
16
16
|
"build": "del-cli ./compiled && del-cli ./dist && tsc -p tsconfig-prod.json && babel ./compiled --out-dir ./dist && cpy './src/**/*.css' './dist' && cpy './compiled/**/*.d.ts' './dist'",
|
|
17
17
|
"storybook": "storybook dev -p 9001 --no-open",
|
|
@@ -20,57 +20,33 @@
|
|
|
20
20
|
"browserslist": [
|
|
21
21
|
"extends @memnrev/browserslist-config"
|
|
22
22
|
],
|
|
23
|
-
"jest": {
|
|
24
|
-
"verbose": false,
|
|
25
|
-
"coverageDirectory": "coverage",
|
|
26
|
-
"transform": {
|
|
27
|
-
"^.+\\.(ts|js)$": [
|
|
28
|
-
"<rootDir>/node_modules/ts-jest",
|
|
29
|
-
{
|
|
30
|
-
"useESM": true
|
|
31
|
-
}
|
|
32
|
-
]
|
|
33
|
-
},
|
|
34
|
-
"transformIgnorePatterns": [
|
|
35
|
-
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
|
|
36
|
-
],
|
|
37
|
-
"extensionsToTreatAsEsm": [
|
|
38
|
-
".ts"
|
|
39
|
-
],
|
|
40
|
-
"moduleNameMapper": {
|
|
41
|
-
"^(\\.{1,2}/.*)\\.js$": "$1"
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
23
|
"devDependencies": {
|
|
45
24
|
"@babel/cli": "^7.22.15",
|
|
46
25
|
"@babel/core": "^7.22.17",
|
|
47
26
|
"@babel/preset-env": "^7.22.15",
|
|
48
|
-
"@memnrev/browserslist-config": "^0.
|
|
49
|
-
"@memnrev/eslint-v9-config": "^0.
|
|
50
|
-
"@storybook/addon-a11y": "^
|
|
51
|
-
"@storybook/addon-
|
|
52
|
-
"@storybook/addon-
|
|
53
|
-
"@storybook/addon-
|
|
54
|
-
"@storybook/addon-
|
|
55
|
-
"@storybook/
|
|
56
|
-
"@
|
|
57
|
-
"@storybook/react": "^8.0.5",
|
|
58
|
-
"@storybook/react-webpack5": "^8.0.5",
|
|
59
|
-
"@storybook/test": "^8.0.5",
|
|
60
|
-
"@types/jest": "^29.5.4",
|
|
27
|
+
"@memnrev/browserslist-config": "^0.2.0",
|
|
28
|
+
"@memnrev/eslint-v9-config": "^0.2.2",
|
|
29
|
+
"@storybook/addon-a11y": "^9.1.8",
|
|
30
|
+
"@storybook/addon-docs": "^9.1.8",
|
|
31
|
+
"@storybook/addon-links": "^9.1.8",
|
|
32
|
+
"@storybook/addon-onboarding": "^9.1.8",
|
|
33
|
+
"@storybook/addon-vitest": "^9.1.9",
|
|
34
|
+
"@storybook/react-vite": "^9.1.8",
|
|
35
|
+
"@types/node": "^22.18.8",
|
|
61
36
|
"@types/react": "^19.0.2",
|
|
37
|
+
"@vitest/browser": "3.2.4",
|
|
38
|
+
"@vitest/coverage-v8": "3.2.4",
|
|
62
39
|
"cpy-cli": "^5.0.0",
|
|
63
40
|
"del-cli": "^6.0.0",
|
|
64
41
|
"eslint": "^9.8.0",
|
|
65
|
-
"eslint-plugin-storybook": "^
|
|
66
|
-
"
|
|
42
|
+
"eslint-plugin-storybook": "^9.1.8",
|
|
43
|
+
"playwright": "^1.55.1",
|
|
67
44
|
"react": "^19.0.0",
|
|
68
45
|
"react-dom": "^19.0.0",
|
|
69
|
-
"storybook": "^
|
|
46
|
+
"storybook": "^9.1.8",
|
|
70
47
|
"stylelint": "^16.2.1",
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"typescript": "^5.2.2"
|
|
48
|
+
"typescript": "^5.2.2",
|
|
49
|
+
"vitest": "^3.2.4"
|
|
74
50
|
},
|
|
75
51
|
"peerDependencies": {
|
|
76
52
|
"react": ">= 19 < 20",
|