@pareto-engineering/design-system 4.0.0-alpha.21 → 4.0.0-alpha.22
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/cjs/a/AppContext/useTheme.js +10 -0
- package/dist/cjs/a/ContentTree/styles.scss +10 -2
- package/dist/cjs/a/Conversation/styles.scss +0 -2
- package/dist/cjs/b/Button/styles.scss +3 -3
- package/dist/cjs/f/fields/TextInput/styles.scss +1 -1
- package/dist/es/a/AppContext/useTheme.js +10 -0
- package/dist/es/a/ContentTree/styles.scss +10 -2
- package/dist/es/a/Conversation/styles.scss +0 -2
- package/dist/es/b/Button/styles.scss +3 -3
- package/dist/es/f/fields/TextInput/styles.scss +1 -1
- package/package.json +4 -4
- package/src/ui/a/AppContext/useTheme.js +11 -0
- package/src/ui/a/ContentTree/styles.scss +10 -2
- package/src/ui/a/Conversation/styles.scss +0 -2
- package/src/ui/b/Button/styles.scss +3 -3
- package/src/ui/f/fields/TextInput/styles.scss +1 -1
|
@@ -28,6 +28,16 @@ var _default = function _default(initialTheme) {
|
|
|
28
28
|
setUserTheme('light');
|
|
29
29
|
}
|
|
30
30
|
}, [preferredTheme, isClient]);
|
|
31
|
+
(0, _react.useEffect)(() => {
|
|
32
|
+
const fav_theme = userTheme === 'dark' ? 'favicon-dark' : 'favicon-light';
|
|
33
|
+
let link = document.querySelector("link[rel~='icon']");
|
|
34
|
+
if (!link) {
|
|
35
|
+
link = document.createElement('link');
|
|
36
|
+
link.rel = 'icon';
|
|
37
|
+
document.getElementsByTagName('head')[0].appendChild(link);
|
|
38
|
+
}
|
|
39
|
+
link.href = `/${fav_theme}.svg`;
|
|
40
|
+
}, [userTheme]);
|
|
31
41
|
const isTheme = (0, _react.useCallback)(theme => userTheme === theme || undefined, [userTheme]);
|
|
32
42
|
return {
|
|
33
43
|
userTheme,
|
|
@@ -10,11 +10,19 @@ $default-padding: 1em;
|
|
|
10
10
|
.#{bem.$base}.content-tree {
|
|
11
11
|
> .#{bem.$base}.tree {
|
|
12
12
|
position: sticky;
|
|
13
|
-
top:
|
|
13
|
+
top: var(--spacing-2);
|
|
14
14
|
|
|
15
15
|
ul {
|
|
16
16
|
list-style: none;
|
|
17
|
-
padding: 0
|
|
17
|
+
padding: 0;
|
|
18
|
+
|
|
19
|
+
&:first-child > li > p {
|
|
20
|
+
margin-top: 0;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&:last-child > li > p {
|
|
24
|
+
margin-bottom: 0;
|
|
25
|
+
}
|
|
18
26
|
|
|
19
27
|
> li > p > a {
|
|
20
28
|
color: var(--paragraph);
|
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
$default-border-radius: var(--theme-default-border-radius);
|
|
9
9
|
$default-padding: var(--gap);
|
|
10
10
|
$default-message-max-width: calc(100% - 4 * #{$default-padding});
|
|
11
|
-
$default-message-min-width: 12em;
|
|
12
11
|
$default-message-border: 1px solid var(--hard-background-cards);
|
|
13
12
|
|
|
14
13
|
.#{bem.$base}.conversation {
|
|
@@ -30,7 +29,6 @@ $default-message-border: 1px solid var(--hard-background-cards);
|
|
|
30
29
|
> .#{bem.$base}.message {
|
|
31
30
|
align-self: flex-start;
|
|
32
31
|
max-width: $default-message-max-width;
|
|
33
|
-
min-width: $default-message-min-width;
|
|
34
32
|
position: relative;
|
|
35
33
|
|
|
36
34
|
> .sender {
|
|
@@ -59,9 +59,9 @@ $default-animation-time: .31s;
|
|
|
59
59
|
cursor: pointer;
|
|
60
60
|
|
|
61
61
|
&:hover
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
62
|
+
:not(.#{bem.$modifier-gradient})
|
|
63
|
+
:not(.#{bem.$modifier-ghost})
|
|
64
|
+
:not(.#{bem.$modifier-simple}) {
|
|
65
65
|
background: var(--soft-x, var(--soft-#{$default-color}));
|
|
66
66
|
}
|
|
67
67
|
|
|
@@ -21,6 +21,16 @@ export default ((initialTheme, storageKey = 'theme') => {
|
|
|
21
21
|
setUserTheme('light');
|
|
22
22
|
}
|
|
23
23
|
}, [preferredTheme, isClient]);
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
const fav_theme = userTheme === 'dark' ? 'favicon-dark' : 'favicon-light';
|
|
26
|
+
let link = document.querySelector("link[rel~='icon']");
|
|
27
|
+
if (!link) {
|
|
28
|
+
link = document.createElement('link');
|
|
29
|
+
link.rel = 'icon';
|
|
30
|
+
document.getElementsByTagName('head')[0].appendChild(link);
|
|
31
|
+
}
|
|
32
|
+
link.href = `/${fav_theme}.svg`;
|
|
33
|
+
}, [userTheme]);
|
|
24
34
|
const isTheme = useCallback(theme => userTheme === theme || undefined, [userTheme]);
|
|
25
35
|
return {
|
|
26
36
|
userTheme,
|
|
@@ -10,11 +10,19 @@ $default-padding: 1em;
|
|
|
10
10
|
.#{bem.$base}.content-tree {
|
|
11
11
|
> .#{bem.$base}.tree {
|
|
12
12
|
position: sticky;
|
|
13
|
-
top:
|
|
13
|
+
top: var(--spacing-2);
|
|
14
14
|
|
|
15
15
|
ul {
|
|
16
16
|
list-style: none;
|
|
17
|
-
padding: 0
|
|
17
|
+
padding: 0;
|
|
18
|
+
|
|
19
|
+
&:first-child > li > p {
|
|
20
|
+
margin-top: 0;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&:last-child > li > p {
|
|
24
|
+
margin-bottom: 0;
|
|
25
|
+
}
|
|
18
26
|
|
|
19
27
|
> li > p > a {
|
|
20
28
|
color: var(--paragraph);
|
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
$default-border-radius: var(--theme-default-border-radius);
|
|
9
9
|
$default-padding: var(--gap);
|
|
10
10
|
$default-message-max-width: calc(100% - 4 * #{$default-padding});
|
|
11
|
-
$default-message-min-width: 12em;
|
|
12
11
|
$default-message-border: 1px solid var(--hard-background-cards);
|
|
13
12
|
|
|
14
13
|
.#{bem.$base}.conversation {
|
|
@@ -30,7 +29,6 @@ $default-message-border: 1px solid var(--hard-background-cards);
|
|
|
30
29
|
> .#{bem.$base}.message {
|
|
31
30
|
align-self: flex-start;
|
|
32
31
|
max-width: $default-message-max-width;
|
|
33
|
-
min-width: $default-message-min-width;
|
|
34
32
|
position: relative;
|
|
35
33
|
|
|
36
34
|
> .sender {
|
|
@@ -59,9 +59,9 @@ $default-animation-time: .31s;
|
|
|
59
59
|
cursor: pointer;
|
|
60
60
|
|
|
61
61
|
&:hover
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
62
|
+
:not(.#{bem.$modifier-gradient})
|
|
63
|
+
:not(.#{bem.$modifier-ghost})
|
|
64
|
+
:not(.#{bem.$modifier-simple}) {
|
|
65
65
|
background: var(--soft-x, var(--soft-#{$default-color}));
|
|
66
66
|
}
|
|
67
67
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pareto-engineering/design-system",
|
|
3
|
-
"version": "4.0.0-alpha.
|
|
3
|
+
"version": "4.0.0-alpha.22",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/es/index.js",
|
|
@@ -50,9 +50,9 @@
|
|
|
50
50
|
"style-loader": "^3.3.2"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@pareto-engineering/assets": "^4.0.0-alpha.
|
|
53
|
+
"@pareto-engineering/assets": "^4.0.0-alpha.22",
|
|
54
54
|
"@pareto-engineering/bem": "^4.0.0-alpha.20",
|
|
55
|
-
"@pareto-engineering/styles": "^4.0.0-alpha.
|
|
55
|
+
"@pareto-engineering/styles": "^4.0.0-alpha.22",
|
|
56
56
|
"date-fns": "^2.29.3",
|
|
57
57
|
"downshift": "^6.1.12",
|
|
58
58
|
"formik": "^2.2.9",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"relay-test-utils": "^15.0.0"
|
|
68
68
|
},
|
|
69
69
|
"browserslist": "> 2%",
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "3701cf2d7e297e33391876a0323bd055f7106ceb"
|
|
71
71
|
}
|
|
@@ -32,6 +32,17 @@ export default (
|
|
|
32
32
|
}
|
|
33
33
|
}, [preferredTheme, isClient])
|
|
34
34
|
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
const fav_theme = userTheme === 'dark' ? 'favicon-dark' : 'favicon-light'
|
|
37
|
+
let link = document.querySelector("link[rel~='icon']")
|
|
38
|
+
if (!link) {
|
|
39
|
+
link = document.createElement('link')
|
|
40
|
+
link.rel = 'icon'
|
|
41
|
+
document.getElementsByTagName('head')[0].appendChild(link)
|
|
42
|
+
}
|
|
43
|
+
link.href = `/${fav_theme}.svg`
|
|
44
|
+
}, [userTheme])
|
|
45
|
+
|
|
35
46
|
const isTheme = useCallback((theme) => (userTheme === theme) || undefined, [userTheme])
|
|
36
47
|
|
|
37
48
|
return {
|
|
@@ -10,11 +10,19 @@ $default-padding: 1em;
|
|
|
10
10
|
.#{bem.$base}.content-tree {
|
|
11
11
|
> .#{bem.$base}.tree {
|
|
12
12
|
position: sticky;
|
|
13
|
-
top:
|
|
13
|
+
top: var(--spacing-2);
|
|
14
14
|
|
|
15
15
|
ul {
|
|
16
16
|
list-style: none;
|
|
17
|
-
padding: 0
|
|
17
|
+
padding: 0;
|
|
18
|
+
|
|
19
|
+
&:first-child > li > p {
|
|
20
|
+
margin-top: 0;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
&:last-child > li > p {
|
|
24
|
+
margin-bottom: 0;
|
|
25
|
+
}
|
|
18
26
|
|
|
19
27
|
> li > p > a {
|
|
20
28
|
color: var(--paragraph);
|
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
$default-border-radius: var(--theme-default-border-radius);
|
|
9
9
|
$default-padding: var(--gap);
|
|
10
10
|
$default-message-max-width: calc(100% - 4 * #{$default-padding});
|
|
11
|
-
$default-message-min-width: 12em;
|
|
12
11
|
$default-message-border: 1px solid var(--hard-background-cards);
|
|
13
12
|
|
|
14
13
|
.#{bem.$base}.conversation {
|
|
@@ -30,7 +29,6 @@ $default-message-border: 1px solid var(--hard-background-cards);
|
|
|
30
29
|
> .#{bem.$base}.message {
|
|
31
30
|
align-self: flex-start;
|
|
32
31
|
max-width: $default-message-max-width;
|
|
33
|
-
min-width: $default-message-min-width;
|
|
34
32
|
position: relative;
|
|
35
33
|
|
|
36
34
|
> .sender {
|
|
@@ -59,9 +59,9 @@ $default-animation-time: .31s;
|
|
|
59
59
|
cursor: pointer;
|
|
60
60
|
|
|
61
61
|
&:hover
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
62
|
+
:not(.#{bem.$modifier-gradient})
|
|
63
|
+
:not(.#{bem.$modifier-ghost})
|
|
64
|
+
:not(.#{bem.$modifier-simple}) {
|
|
65
65
|
background: var(--soft-x, var(--soft-#{$default-color}));
|
|
66
66
|
}
|
|
67
67
|
|