@xyd-js/themes 0.1.1-build.160 → 0.1.1-build.161
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/CHANGELOG.md +13 -0
- package/dist/decorators/atlas-vars.css +29 -0
- package/dist/decorators/header-sketch.css +23 -0
- package/dist/decorators/page-layout.css +11 -0
- package/dist/decorators/page-leftpad.css +46 -0
- package/dist/decorators/page-sketch.css +52 -0
- package/dist/decorators/sidebar-pad.css +24 -0
- package/dist/decorators/sidebar-scroll.css +51 -0
- package/dist/index.css +1259 -0
- package/dist/reset.css +56 -0
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @xyd-js/themes
|
|
2
2
|
|
|
3
|
+
## 0.1.1-build.161
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- update all packages
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
- @xyd-js/analytics@0.1.0-build.158
|
|
10
|
+
- @xyd-js/atlas@0.1.0-build.174
|
|
11
|
+
- @xyd-js/components@0.1.0-build.169
|
|
12
|
+
- @xyd-js/core@0.1.0-build.171
|
|
13
|
+
- @xyd-js/framework@0.1.0-build.190
|
|
14
|
+
- @xyd-js/ui@0.1.0-build.174
|
|
15
|
+
|
|
3
16
|
## 0.1.1-build.160
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
/* Atlas */
|
|
2
|
+
:root {
|
|
3
|
+
--XydAtlas-Ref-Palette-White: var(--white);
|
|
4
|
+
--XydAtlas-Ref-Palette-Primary-60: var(--color-primary);
|
|
5
|
+
--XydAtlas-Ref-Palette-Primary-70: var(--color-primary--active);
|
|
6
|
+
--XydAtlas-Ref-Palette-Primary-80: var(--color-primary--active);
|
|
7
|
+
|
|
8
|
+
--XydAtlas-Ref-Palette-Neutral-10: var(--dark8);
|
|
9
|
+
--XydAtlas-Ref-Palette-Neutral-20: var(--dark16);
|
|
10
|
+
--XydAtlas-Ref-Palette-Neutral-30: var(--dark32);
|
|
11
|
+
--XydAtlas-Ref-Palette-Neutral-40: var(--dark40);
|
|
12
|
+
--XydAtlas-Ref-Palette-Neutral-70: var(--dark48);
|
|
13
|
+
--XydAtlas-Ref-Palette-Neutral-80: var(--dark60);
|
|
14
|
+
--XydAtlas-Ref-Palette-Neutral-100: var(--dark80);
|
|
15
|
+
|
|
16
|
+
--XydAtlas-Sys-Color-Text-Primary: var(--color-text);
|
|
17
|
+
}
|
|
18
|
+
@define-mixin dark-theme {
|
|
19
|
+
--XydAtlas-Ref-Palette-Primary-60: var(--color-text);
|
|
20
|
+
}
|
|
21
|
+
[data-color-scheme="dark"] {
|
|
22
|
+
@mixin dark-theme;
|
|
23
|
+
}
|
|
24
|
+
/* System dark mode support for sidebar - only when OS preference is enabled */
|
|
25
|
+
@media (prefers-color-scheme: dark) {
|
|
26
|
+
:root:not([data-color-scheme="light"]):not([data-color-scheme="dark"]) {
|
|
27
|
+
@mixin dark-theme;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
@layer decorators {
|
|
2
|
+
xyd-layout-primary {
|
|
3
|
+
/* tag: Header */
|
|
4
|
+
header {
|
|
5
|
+
[part="header-content"] {
|
|
6
|
+
border-bottom: 1px solid var(--decorator-sketch-border-color);
|
|
7
|
+
border-top: 1px solid var(--decorator-sketch-border-color);
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/* component: Sidebar */
|
|
12
|
+
xyd-sidebar {
|
|
13
|
+
border-radius: 0;
|
|
14
|
+
border-right: 0.5px solid var(--decorator-sketch-border-color);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/* component: SubNav */
|
|
18
|
+
xyd-subnav {
|
|
19
|
+
border-bottom: 1px solid var(--decorator-sketch-border-color);
|
|
20
|
+
border-radius: 0;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
@layer decorators {
|
|
2
|
+
xyd-layout-primary {
|
|
3
|
+
--theme-sidebar-left: unset;
|
|
4
|
+
--theme-sidebar-width: unset;
|
|
5
|
+
|
|
6
|
+
/* media: Large Desktop */
|
|
7
|
+
@media (min-width: 1440px) {
|
|
8
|
+
--theme-layout-max-width: 1600px;
|
|
9
|
+
--theme-sidebar-width-var: 350px;
|
|
10
|
+
|
|
11
|
+
--theme-sidebar-left-padding-space: 32px;
|
|
12
|
+
--theme-sidebar-left-vars: (var(--theme-layout-max-width) / 2) + var(--theme-sidebar-left-padding-space);
|
|
13
|
+
--theme-sidebar-left-calc: calc(50% - var(--theme-sidebar-left-vars));
|
|
14
|
+
|
|
15
|
+
--theme-sidebar-width-padding-space: 8px;
|
|
16
|
+
|
|
17
|
+
--theme-sidebar-left: max(32px, var(--theme-sidebar-left-calc));
|
|
18
|
+
--theme-sidebar-width: calc((100% - (var(--theme-layout-max-width))) / 2 + var(--theme-sidebar-width-var) + var(--theme-sidebar-width-padding-space));
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* layout: Sidebar */
|
|
22
|
+
[part="sidebar"] {
|
|
23
|
+
padding-left: var(--theme-sidebar-left);
|
|
24
|
+
width: var(--theme-sidebar-width);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* component: Nav */
|
|
28
|
+
xyd-nav {
|
|
29
|
+
[part="nav"]>*:first-child {
|
|
30
|
+
position: relative;
|
|
31
|
+
left: calc(var(--theme-sidebar-left) + var(--xyd-sidebar-item-padding-total) - var(--xyd-nav-padding));
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* component: SubNav */
|
|
36
|
+
xyd-subnav {
|
|
37
|
+
padding-left: var(--theme-sidebar-left);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@media (max-width: 1024px) {
|
|
41
|
+
xyd-subnav {
|
|
42
|
+
padding-left: var(--xyd-nav-padding);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
@layer decorators {
|
|
2
|
+
xyd-layout-primary {
|
|
3
|
+
/* tag: Header */
|
|
4
|
+
header {
|
|
5
|
+
[part="header-content"] {
|
|
6
|
+
border-bottom: 1px solid var(--decorator-sketch-border-color);
|
|
7
|
+
border-top: 1px solid var(--decorator-sketch-border-color);
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/* component: Sidebar */
|
|
12
|
+
xyd-sidebar {
|
|
13
|
+
border-radius: 0;
|
|
14
|
+
border-right: 0.5px solid var(--decorator-sketch-border-color);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
/* component: SubNav */
|
|
18
|
+
xyd-subnav {
|
|
19
|
+
border-bottom: 1px solid var(--decorator-sketch-border-color);
|
|
20
|
+
border-radius: 0;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
:root {
|
|
26
|
+
--decorator-sketch-border-color: var(--dark32);
|
|
27
|
+
--color-header-border: var(--decorator-sketch-border-color);
|
|
28
|
+
--xyd-sidebar-divider-color: var(--decorator-sketch-border-color);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@layer decorators {
|
|
32
|
+
xyd-layout-primary {
|
|
33
|
+
&[data-hide-subheader="true"] {
|
|
34
|
+
xyd-subnav {
|
|
35
|
+
border-top: none;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&:not([data-layout="wide"]) {
|
|
40
|
+
[part="page-article"] {
|
|
41
|
+
border-right: 1px solid var(--decorator-sketch-border-color);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* component: BaseTheme.ContentSecondary */
|
|
46
|
+
xyd-secondary-content {
|
|
47
|
+
[part="secondary-content-header"] {
|
|
48
|
+
border-bottom: 1px solid var(--decorator-sketch-border-color);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
@layer decorators {
|
|
2
|
+
xyd-layout-primary {
|
|
3
|
+
--sidebar-height: calc(100dvh - var(--xyd-nav-height) - var(--xyd-banner-height-dynamic) - var(--theme-nav-height-space, 0px));
|
|
4
|
+
--sidebar-top: calc(var(--xyd-nav-height) + var(--xyd-banner-height-dynamic) + var(--theme-nav-height-space, 0px));
|
|
5
|
+
|
|
6
|
+
--sidebar-subheader-height: calc(100dvh - var(--xyd-header-total-height) - var(--theme-nav-height-space, 0px));
|
|
7
|
+
--sidebar-subheader-top: calc(var(--xyd-header-total-height) + var(--theme-nav-height-space, 0px));
|
|
8
|
+
|
|
9
|
+
/* layout: Sidebar */
|
|
10
|
+
[part="sidebar"] {
|
|
11
|
+
position: sticky;
|
|
12
|
+
height: var(--sidebar-height);
|
|
13
|
+
top: var(--sidebar-top);
|
|
14
|
+
z-index: 1;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
&[data-subheader="true"][data-hide-subheader="false"] {
|
|
18
|
+
[part="sidebar"] {
|
|
19
|
+
height: var(--sidebar-subheader-height);
|
|
20
|
+
top: var(--sidebar-subheader-top);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
@layer decorators {
|
|
2
|
+
:root {
|
|
3
|
+
--decorator-sidebar-scroll-bgcolor: var(--xyd-toc-scroll-bgcolor);
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
xyd-layout-primary {
|
|
7
|
+
xyd-sidebar {
|
|
8
|
+
scrollbar-color: transparent transparent;
|
|
9
|
+
scrollbar-width: thin;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
xyd-sidebar::-webkit-scrollbar-corner,
|
|
13
|
+
xyd-sidebar::-webkit-scrollbar-thumb,
|
|
14
|
+
xyd-sidebar::-webkit-scrollbar-track {
|
|
15
|
+
background: none;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
xyd-sidebar::-webkit-scrollbar-thumb {
|
|
19
|
+
background: var(--decorator-sidebar-scroll-bgcolor);
|
|
20
|
+
background-clip: content-box;
|
|
21
|
+
border: 1px solid transparent;
|
|
22
|
+
border-radius: 10px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Hover effect for scrollbar */
|
|
26
|
+
xyd-sidebar:hover {
|
|
27
|
+
scrollbar-color: var(--decorator-sidebar-scroll-bgcolor) transparent;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
xyd-sidebar:hover::-webkit-scrollbar-thumb {
|
|
31
|
+
background: var(--decorator-sidebar-scroll-bgcolor);
|
|
32
|
+
background-clip: content-box;
|
|
33
|
+
border: 1px solid transparent;
|
|
34
|
+
border-radius: 10px;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* Mobile responsive scrollbar */
|
|
38
|
+
@media screen and (max-width: 640px) {
|
|
39
|
+
xyd-sidebar {
|
|
40
|
+
scrollbar-color: var(--decorator-sidebar-scroll-bgcolor) transparent;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
xyd-sidebar::-webkit-scrollbar-thumb {
|
|
44
|
+
background: var(--decorator-sidebar-scroll-bgcolor);
|
|
45
|
+
background-clip: content-box;
|
|
46
|
+
border: 1px solid transparent;
|
|
47
|
+
border-radius: 10px;
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|