@xyd-js/themes 0.0.0 → 0.1.1-xyd.2
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 +34 -0
- package/LICENSE +21 -0
- package/dist/index.css +406 -0
- package/dist/index.d.ts +45 -0
- package/dist/index.js +136 -0
- package/dist/index.js.map +1 -0
- package/dist/tokens.css +55 -0
- package/package.json +27 -6
- package/postcss.config.cjs +7 -0
- package/scripts/build-css.js +54 -0
- package/src/BaseTheme.tsx +94 -0
- package/src/index.ts +15 -0
- package/src/settings.ts +58 -0
- package/src/styles/index.css +5 -0
- package/src/styles/reset.css +55 -0
- package/src/types.ts +11 -0
- package/src/withTheme.tsx +20 -0
- package/tsconfig.json +34 -0
- package/tsup.config.ts +24 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
# @xyd-js/themes
|
|
2
|
+
|
|
3
|
+
## 0.1.1-xyd.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- fix again
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
- @xyd-js/atlas@0.1.0-xyd.15
|
|
10
|
+
- @xyd-js/components@0.1.0-xyd.10
|
|
11
|
+
- @xyd-js/framework@0.1.0-xyd.30
|
|
12
|
+
- @xyd-js/ui@0.1.0-xyd.15
|
|
13
|
+
|
|
14
|
+
## 0.1.1-xyd.1
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- fix for theme
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
- @xyd-js/atlas@0.1.0-xyd.14
|
|
21
|
+
- @xyd-js/components@0.1.0-xyd.9
|
|
22
|
+
- @xyd-js/framework@0.1.0-xyd.29
|
|
23
|
+
- @xyd-js/ui@0.1.0-xyd.14
|
|
24
|
+
|
|
25
|
+
## 0.1.1-xyd.0
|
|
26
|
+
|
|
27
|
+
### Patch Changes
|
|
28
|
+
|
|
29
|
+
- refactor, ui tweaks
|
|
30
|
+
- Updated dependencies
|
|
31
|
+
- @xyd-js/atlas@0.1.0-xyd.13
|
|
32
|
+
- @xyd-js/components@0.1.0-xyd.8
|
|
33
|
+
- @xyd-js/framework@0.1.0-xyd.28
|
|
34
|
+
- @xyd-js/ui@0.1.0-xyd.13
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 xyd
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,406 @@
|
|
|
1
|
+
.XydUi-Component-Nav__NavHost{position:sticky;top:0;z-index:20;width:100%;background:transparent;display:flex;}
|
|
2
|
+
.XydUi-Component-Nav__NavShadow{pointer-events:none;position:absolute;z-index:-1;height:100%;width:100%;background-color:white;}
|
|
3
|
+
.XydUi-Component-Nav__Nav{display:flex;width:100%;height:var(--xyd-navbar-height);align-items:center;justify-content:flex-end;gap:8px;padding-left:calc(max(env(safe-area-inset-left), 16px));padding-right:calc(max(env(safe-area-inset-right), 16px));}
|
|
4
|
+
.XydUi-Component-Nav__NavMiddle{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;}
|
|
5
|
+
.XydUi-Component-Nav__ListHost{display:flex;align-items:center;justify-content:center;gap:8px;}
|
|
6
|
+
.XydUi-Component-Nav__ItemHost{font-size:14px;position:relative;white-space:nowrap;color:#000;padding:8px 16px;display:flex;align-items:center;justify-content:center;}
|
|
7
|
+
.XydUi-Component-Nav__ItemHost:hover{color:#1f2937;}
|
|
8
|
+
.XydUi-Component-Nav__ItemHost[data-state="active"]{font-weight:bold;background:#f9f9f9;border-radius:8px;}
|
|
9
|
+
.XydUi-Component-Nav__ItemTitle1{position:absolute;inset:0;text-align:center;align-items:center;display:flex;justify-content:center;}
|
|
10
|
+
.XydUi-Component-Nav__ItemTitle2{visibility:hidden;font-weight:600;}
|
|
11
|
+
.XydUi-Component-Nav__LogoHost{display:flex;align-items:center;margin-right:auto;}
|
|
12
|
+
.XydUi-Component-Sidebar__SidebarHost{background:#f8f8f8;height:100%;border-radius:4px;display:flex;flex-direction:column;}
|
|
13
|
+
.XydUi-Component-Sidebar__SidebarUl{overflow-y:auto;overflow-x:hidden;height:100%;padding:8px;}
|
|
14
|
+
.XydUi-Component-Sidebar__FooterHost{padding:1rem;box-shadow:0 -2px 10px rgba(237, 237, 237, .1);border-top:1px solid #ededed;}
|
|
15
|
+
.XydUi-Component-Sidebar__FooterItemHost{display:flex;width:100%;padding:2px;color:#6e6e80;}
|
|
16
|
+
.XydUi-Component-Sidebar__FooterItem{display:flex;align-items:center;width:100%;gap:7px;font-size:14px;padding:4px 8px;}
|
|
17
|
+
.XydUi-Component-Sidebar__FooterItem:hover{background:#ececf1;color:#111827;border-radius:4px;}
|
|
18
|
+
.XydUi-Component-Sidebar__FooterItem:hover svg{fill:#111827;}
|
|
19
|
+
.XydUi-Component-Sidebar__FooterItem svg{fill:#6e6e80;font-size:18px;width:18px;height:18px;}
|
|
20
|
+
.XydUi-Component-Sidebar__ItemHost{color:#6e6e80;font-size:14px;}
|
|
21
|
+
.XydUi-Component-Sidebar__ItemLink{display:flex;width:100%;font-weight:500;}
|
|
22
|
+
.XydUi-Component-Sidebar__ItemLinkActive{background:#ebebeb;border-radius:4px;position:relative;font-weight:600;color:#000;}
|
|
23
|
+
.XydUi-Component-Sidebar__ItemLinkActive::before{background:#7051d4;border-radius:0 2px 2px 0;bottom:7px;content:"";left:5px;position:absolute;top:7px;width:4px;border-radius:10px;}
|
|
24
|
+
.XydUi-Component-Sidebar__ItemLinkParentActive{font-weight:600;background:transparent;}
|
|
25
|
+
.XydUi-Component-Sidebar__ItemLinkActiveSecondary{background:unset;font-weight:500;}
|
|
26
|
+
.XydUi-Component-Sidebar__ItemLinkItem{display:flex;width:100%;padding:8px 12px 8px 16px;position:relative;font-size:14px;}
|
|
27
|
+
.XydUi-Component-Sidebar__ItemLinkItem:hover{background:#ececf1;color:#111827;border-radius:4px;}
|
|
28
|
+
.XydUi-Component-Sidebar__TreeHost{margin-left:12px;}
|
|
29
|
+
.XydUi-Component-Sidebar__ItemHeaderHost{padding-left:12px;margin-bottom:8px;margin-top:24px;font-size:13px;line-height:16px;font-weight:600;letter-spacing:0.5px;color:#111827;text-transform:uppercase;}
|
|
30
|
+
.XydUi-Component-Sidebar__CollapseContainer{transform:translateZ(0);overflow:hidden;transition:width 300ms cubic-bezier(0.4, 0, 0.2, 1),height 300ms cubic-bezier(0.4, 0, 0.2, 1);will-change:width,height;}
|
|
31
|
+
@media (prefers-reduced-motion: reduce){.XydUi-Component-Sidebar__CollapseContainer{transition:none;}}
|
|
32
|
+
.XydUi-Component-Sidebar__CollapseBase{opacity:0;transition:opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);will-change:opacity;}
|
|
33
|
+
@media (prefers-reduced-motion: reduce){.XydUi-Component-Sidebar__CollapseBase{transition:none;}}
|
|
34
|
+
.XydUi-Component-Sidebar__CollapseOpen{opacity:1;}
|
|
35
|
+
.XydUi-Component-SubNav__SubNavHost{align-items:center;background-color:#f6f6f7;border-radius:0.50rem;display:flex;flex-direction:row;width:100%;height:44px;margin-top:3px;padding:0 0.25rem;}
|
|
36
|
+
.XydUi-Component-SubNav__SubNavPrefix{color:#44474a;font-size:12px;font-weight:600;padding-left:0.50rem;padding-right:1.50rem;position:relative;text-transform:uppercase;}
|
|
37
|
+
.XydUi-Component-SubNav__SubNavPrefix:after{background:#d2d5d8;border-radius:1px;content:" ";height:0.75rem;position:absolute;right:0.50rem;top:50%;transform:translateY(-50%);width:2px;}
|
|
38
|
+
.XydUi-Component-SubNav__SubNavUl{display:flex;flex-direction:row;height:100%;}
|
|
39
|
+
.XydUi-Component-SubNav__SubNavLi{display:flex;height:100%;align-items:center;position:relative;}
|
|
40
|
+
.XydUi-Component-SubNav__SubNavLi[data-state="active"]{font-weight:600;}
|
|
41
|
+
.XydUi-Component-SubNav__SubNavLi[data-state="active"] a{color:#202223;}
|
|
42
|
+
.XydUi-Component-SubNav__SubNavLi[data-state="active"] a:after{background-color:#7051d4;border-radius:1px;bottom:0;content:" ";height:2px;left:0;position:absolute;width:100%;}
|
|
43
|
+
.XydUi-Component-SubNav__SubNavLink{color:#4b5563;line-height:2.75rem;display:block;height:100%;padding:0 0.50rem;}
|
|
44
|
+
.XydUi-Component-SubNav__SubNavLink:hover{color:#202223;}
|
|
45
|
+
.XydUi-Component-Toc__TocHost{position:relative;padding-left:16px;}
|
|
46
|
+
.XydUi-Component-Toc__TocUl{margin:0;padding:0;list-style:none;}
|
|
47
|
+
.XydUi-Component-Toc__TocLi{position:relative;line-height:1.5;margin:0 0 12px;padding:0;}
|
|
48
|
+
.XydUi-Component-Toc__TocLink{display:inline-block;font-size:14px;color:#6e6e80;line-height:1.4;text-wrap:pretty;transition:color .15s ease;}
|
|
49
|
+
.XydUi-Component-Toc__TocLinkActive{font-weight:600;color:#353740;}
|
|
50
|
+
.XydUi-Component-Toc__ScrollerHost{position:absolute;top:0;bottom:0;left:0;width:2px;background-color:#ececf1;}
|
|
51
|
+
.XydUi-Component-Toc__ScrollerScroll{position:absolute;top:0;left:0;width:2px;height:var(--active-track-height);transform:translateY(var(--active-track-top));background-color:#353740;transition:height .4s cubic-bezier(.19, 1, .22, 1),transform .4s cubic-bezier(.19, 1, .22, 1);}
|
|
52
|
+
:root {
|
|
53
|
+
/* Ref tokens - Base values */
|
|
54
|
+
--XydAtlas-Ref-Palette-Primary-60: #7051d4;
|
|
55
|
+
--XydAtlas-Ref-Palette-Primary-70: #6045b9;
|
|
56
|
+
--XydAtlas-Ref-Palette-Primary-80: #4f399e;
|
|
57
|
+
|
|
58
|
+
--XydAtlas-Ref-Palette-Neutral-10: #F8F9FA;
|
|
59
|
+
--XydAtlas-Ref-Palette-Neutral-20: #F1F3F5;
|
|
60
|
+
--XydAtlas-Ref-Palette-Neutral-30: #E9ECEF;
|
|
61
|
+
--XydAtlas-Ref-Palette-Neutral-40: #DEE2E6;
|
|
62
|
+
--XydAtlas-Ref-Palette-Neutral-70: #6C757D;
|
|
63
|
+
--XydAtlas-Ref-Palette-Neutral-80: #495057;
|
|
64
|
+
--XydAtlas-Ref-Palette-Neutral-100: #212529;
|
|
65
|
+
|
|
66
|
+
/* System tokens - Semantic values */
|
|
67
|
+
--XydAtlas-Sys-Color-Primary: var(--XydAtlas-Ref-Palette-Primary-60);
|
|
68
|
+
--XydAtlas-Sys-Color-Primary--hover: var(--XydAtlas-Ref-Palette-Primary-70);
|
|
69
|
+
--XydAtlas-Sys-Color-Primary--active: var(--XydAtlas-Ref-Palette-Primary-80);
|
|
70
|
+
|
|
71
|
+
--XydAtlas-Sys-Color-Surface: var(--XydAtlas-Ref-Palette-Neutral-10);
|
|
72
|
+
--XydAtlas-Sys-Color-Surface--hover: var(--XydAtlas-Ref-Palette-Neutral-20);
|
|
73
|
+
--XydAtlas-Sys-Color-Surface--active: var(--XydAtlas-Ref-Palette-Neutral-30);
|
|
74
|
+
|
|
75
|
+
--XydAtlas-Sys-Color-Text-Primary: var(--XydAtlas-Ref-Palette-Neutral-100);
|
|
76
|
+
--XydAtlas-Sys-Color-Text-Secondary: var(--XydAtlas-Ref-Palette-Neutral-80);
|
|
77
|
+
--XydAtlas-Sys-Color-Text-Tertiary: var(--XydAtlas-Ref-Palette-Neutral-70);
|
|
78
|
+
|
|
79
|
+
--XydAtlas-Sys-Color-Border: var(--XydAtlas-Ref-Palette-Neutral-30);
|
|
80
|
+
--XydAtlas-Sys-Color-Border--hover: var(--XydAtlas-Ref-Palette-Neutral-40);
|
|
81
|
+
--XydAtlas-Sys-Color-Border--active: var(--XydAtlas-Ref-Palette-Primary-60);
|
|
82
|
+
|
|
83
|
+
/* Component tokens - Specific component values */
|
|
84
|
+
/* ApiRef Properties */
|
|
85
|
+
--XydAtlas-Component-ApiRef-Properties__color-description: var(--XydAtlas-Sys-Color-Text-Secondary);
|
|
86
|
+
--XydAtlas-Component-ApiRef-Properties__color-propName: var(--XydAtlas-Sys-Color-Text-Primary);
|
|
87
|
+
--XydAtlas-Component-ApiRef-Properties__color-propType: var(--XydAtlas-Sys-Color-Text-Tertiary);
|
|
88
|
+
--XydAtlas-Component-ApiRef-Properties__color--active: var(--XydAtlas-Sys-Color-Primary);
|
|
89
|
+
--XydAtlas-Component-ApiRef-Properties__color-border: var(--XydAtlas-Sys-Color-Border);
|
|
90
|
+
|
|
91
|
+
/* ApiRef Item */
|
|
92
|
+
--XydAtlas-Component-ApiRef-Item__color-border: var(--XydAtlas-Sys-Color-Border);
|
|
93
|
+
--XydAtlas-Component-ApiRef-Item__color-navbar: var(--XydAtlas-Sys-Color-Text-Secondary);
|
|
94
|
+
|
|
95
|
+
/* Code Sample */
|
|
96
|
+
--XydAtlas-Component-Code-Sample__color-border: var(--XydAtlas-Sys-Color-Border);
|
|
97
|
+
--XydAtlas-Component-Code-Sample__color: var(--XydAtlas-Sys-Color-Text-Secondary);
|
|
98
|
+
--XydAtlas-Component-Code-Sample__color--active: var(--XydAtlas-Sys-Color-Primary);
|
|
99
|
+
--XydAtlas-Component-Code-Sample__color-background: var(--XydAtlas-Sys-Color-Surface--hover);
|
|
100
|
+
--XydAtlas-Component-Code-Sample__color-markBorder--active: var(--XydAtlas-Sys-Color-Primary);
|
|
101
|
+
--XydAtlas-Component-Code-Sample__color-markBackground--active: var(--XydAtlas-Sys-Color-Surface--hover);
|
|
102
|
+
|
|
103
|
+
/* Code Sample Buttons */
|
|
104
|
+
--XydAtlas-Component-Code-SampleButtons__color-containerBackground: var(--XydAtlas-Sys-Color-Surface);
|
|
105
|
+
--XydAtlas-Component-Code-SampleButtons__color-background--active: var(--XydAtlas-Sys-Color-Surface--active);
|
|
106
|
+
--XydAtlas-Component-Code-SampleButtons__color: var(--XydAtlas-Sys-Color-Text-Secondary);
|
|
107
|
+
--XydAtlas-Component-Code-SampleButtons__color--active: var(--XydAtlas-Sys-Color-Text-Primary);
|
|
108
|
+
}
|
|
109
|
+
.XydAtlas-Component-ApiRef-ApiRefItem__ApiRefItemTitleHost{font-size:30px;font-weight:400;}
|
|
110
|
+
.XydAtlas-Component-ApiRef-ApiRefItem__ApiRefItemNavbarContainer{background:linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%);padding:8px;border:1px solid var(--XydAtlas-Component-ApiRef-Item__color-border);border-radius:8px;font-size:13px;}
|
|
111
|
+
.XydAtlas-Component-ApiRef-ApiRefItem__ApiRefItemNavbarLabel{color:var(--XydAtlas-Component-ApiRef-Item__color-navbar);margin-right:4px;}
|
|
112
|
+
.XydAtlas-Component-ApiRef-ApiRefItem__ApiRefItemHost{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:16px;padding-bottom:25px;}
|
|
113
|
+
.XydAtlas-Component-ApiRef-ApiRefItem__ApiRefItemGrid{display:-ms-grid;display:grid;-ms-grid-columns:repeat(2, minmax(0, 1fr));grid-template-columns:repeat(2, minmax(0, 1fr));-webkit-align-items:normal;-webkit-box-align:normal;-ms-flex-align:normal;align-items:normal;gap:100px;}
|
|
114
|
+
.XydAtlas-Component-ApiRef-ApiRefItem__ApiRefItemPropertiesItem{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:25px;margin-bottom:25px;}
|
|
115
|
+
.XydAtlas-Component-ApiRef-ApiRefItem__ApiRefItemSubtitleHost{font-size:15px;font-weight:600;}
|
|
116
|
+
.XydAtlas-Component-ApiRef-ApiRefItem__ApiRefItemSubtitleLink{-webkit-text-decoration:none;text-decoration:none;}
|
|
117
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesUlHost{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:16px;padding:0;margin:0;list-style:none;border:none;}
|
|
118
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesLiHost{margin:0;padding:0;}
|
|
119
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesLiHost:first-child{padding-top:0;}
|
|
120
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesLiHost:last-child{padding-bottom:0;}
|
|
121
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesDescriptionHost{font-size:14px;line-height:22px;color:var(--XydAtlas-Component-ApiRef-Properties__color-description);}
|
|
122
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesDlHost{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:10px;margin:8px 0;}
|
|
123
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesDlHost dd{-webkit-margin-start:0px;margin-inline-start:0px;}
|
|
124
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesPropNameCodeHost{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;padding:4px 0;font-weight:600;font-size:13px;color:var(--XydAtlas-Component-ApiRef-Properties__color-propName);}
|
|
125
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesPropTypeCodeHost{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;padding:4px 0;border-radius:4px;font-size:10px;color:var(--XydAtlas-Component-ApiRef-Properties__color-propType);}
|
|
126
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesPropTypeCodeLink{color:var(--XydAtlas-Component-ApiRef-Properties__color--active);-webkit-text-decoration:underline;text-decoration:underline;}
|
|
127
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesPropTypeCodeLink:hover{-webkit-text-decoration:none;text-decoration:none;color:var(--XydAtlas-Sys-Color-Primary--hover);}
|
|
128
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesSubPropsHost{padding:8px;border-style:none;display:none;}
|
|
129
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesSubPropsHostExpanded{display:unset;}
|
|
130
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesSubPropsUl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:16px;padding:0;margin:0;list-style:none;border:none;border-left:1px solid var(--XydAtlas-Component-ApiRef-Properties__color-border);}
|
|
131
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesSubPropsLi{padding:0 16px;}
|
|
132
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesPropToggleHost{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0;margin-top:16px;background:none;outline:inherit;border:none;cursor:pointer;color:inherit;font-size:13px;}
|
|
133
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesPropToggleHost svg{font-size:13px;}
|
|
134
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesPropToggleHost:hover svg{-webkit-transition:all ease-in .1s;transition:all ease-in .1s;color:var(--XydAtlas-Component-ApiRef-Properties__color--active);}
|
|
135
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesPropToggleLink{-webkit-text-decoration:none;text-decoration:none;cursor:pointer;margin-left:4px;}
|
|
136
|
+
.XydAtlas-Component-ApiRef-ApiRefProperties__ApiRefPropertiesPropToggleLink:hover{-webkit-transition:all ease-in .1s;transition:all ease-in .1s;color:var(--XydAtlas-Component-ApiRef-Properties__color--active);}
|
|
137
|
+
.XydAtlas-Component-Code-CodeCopy__CodeCopyHost{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:8px;border-radius:6px;cursor:pointer;}
|
|
138
|
+
.XydAtlas-Component-Code-CodeCopy__CodeCopyHost:hover{background:var(--XydAtlas-Component-Code-Copy__color-background--active);}
|
|
139
|
+
.XydAtlas-Component-Code-CodeSample__CodeSampleHost{-webkit-flex:1 1 0;-ms-flex:1 1 0;flex:1 1 0;overflow:hidden;min-width:0;max-width:512px;border:1px solid var(--XydAtlas-Component-Code-Sample__color-border);border-radius:16px;}
|
|
140
|
+
.XydAtlas-Component-Code-CodeSample__CodeSampleLanguagesHost{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1 1 0%;-ms-flex:1 1 0%;flex:1 1 0%;padding:8px 0px;background:linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%)!important;border-top-right-radius:10px;border-top-left-radius:10px;border-bottom:0px;min-width:0;}
|
|
141
|
+
.XydAtlas-Component-Code-CodeSample__CodeSampleLanguagesList{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:end;justify-content:end;gap:8px;padding:0 10px;}
|
|
142
|
+
.XydAtlas-Component-Code-CodeSample__CodeSampleLanguagesButton{all:unset;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;border-radius:6px;padding:6px;font-size:14px;color:var(--XydAtlas-Component-Code-Sample__color);}
|
|
143
|
+
.XydAtlas-Component-Code-CodeSample__CodeSampleLanguagesButton[data-state="active"]{color:var(--XydAtlas-Component-Code-Sample__color--active);border-bottom:1px solid var(--XydAtlas-Component-Code-Sample__color--active);border-bottom-left-radius:0px;border-bottom-right-radius:0px;}
|
|
144
|
+
.XydAtlas-Component-Code-CodeSample__CodeSampleLanguagesButton:hover{-webkit-transition:ease-in 0.1s;transition:ease-in 0.1s;background:var(--XydAtlas-Component-Code-Sample__color-background);}
|
|
145
|
+
.XydAtlas-Component-Code-CodeSample__CodeSampleLanguagesDescription{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:4px;font-size:14px;color:var(--XydAtlas-Component-Code-Sample__color);margin-left:4px;margin-right:4px;}
|
|
146
|
+
.XydAtlas-Component-Code-CodeSample__CodeSampleLanguagesDescriptionItem{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-left:16px;padding-right:16px;-webkit-flex:1 1 0%;-ms-flex:1 1 0%;flex:1 1 0%;gap:16px;border-radius:4px;}
|
|
147
|
+
.XydAtlas-Component-Code-CodeSample__CodeSampleLanguagesCopy{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-left:8px;padding-right:8px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
|
|
148
|
+
.XydAtlas-Component-Code-CodeSample__CodeSampleCodeHost{max-height:400px;background:linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%)!important;margin:0;padding:8px 16px;border-top:1px solid var(--XydAtlas-Component-Code-Sample__color-border);border-bottom-left-radius:10px;border-bottom-right-radius:10px;font-size:14px;line-height:20px;white-space:pre-wrap;word-break:break-all;overflow-y:scroll;}
|
|
149
|
+
.XydAtlas-Component-Code-CodeSample__CodeSampleMarkHost{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;border-left-width:4px;border-color:transparent;margin:4px 0;}
|
|
150
|
+
.XydAtlas-Component-Code-CodeSample__CodeSampleMarkLine{-webkit-flex:1 1 0%;-ms-flex:1 1 0%;flex:1 1 0%;}
|
|
151
|
+
.XydAtlas-Component-Code-CodeSample__CodeSampleMarkAnnotated{border-color:var(--XydAtlas-Component-Code-Sample__color-markBorder--active);background-color:var(--XydAtlas-Component-Code-Sample__color-markBackground--active);}
|
|
152
|
+
.XydAtlas-Component-Code-CodeSample__CodeSampleLineNumberHost{margin:0 4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:0.5;}
|
|
153
|
+
.XydAtlas-Component-Code-CodeSampleButtons__CodeSampleButtonsHost{position:relative;max-width:100%;}
|
|
154
|
+
.XydAtlas-Component-Code-CodeSampleButtons__CodeSampleButtonsContainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:8px;background-color:var(--XydAtlas-Component-Code-SampleButtons__color-containerBackground);}
|
|
155
|
+
.XydAtlas-Component-Code-CodeSampleButtons__CodeSampleButtonsArrowHost{padding:8px;background-color:#ffffff;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.05);}
|
|
156
|
+
.XydAtlas-Component-Code-CodeSampleButtons__CodeSampleButtonsArrowIcon{width:16px;height:16px;}
|
|
157
|
+
.XydAtlas-Component-Code-CodeSampleButtons__CodeSampleButtonsScrollerHost{overflow-x:auto;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}
|
|
158
|
+
.XydAtlas-Component-Code-CodeSampleButtons__CodeSampleButtonsScrollerContainer{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;gap:4px;padding:4px;margin-left:4px;}
|
|
159
|
+
.XydAtlas-Component-Code-CodeSampleButtons__CodeSampleButtonsButtonHost{padding:0.5rem 1rem;border-radius:0.375rem;font-size:0.875rem;line-height:1.25rem;font-weight:500;white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;color:var(--XydAtlas-Component-Code-SampleButtons__color);}
|
|
160
|
+
.XydAtlas-Component-Code-CodeSampleButtons__CodeSampleButtonsButtonHost:hover{color:var(--XydAtlas-Component-Code-SampleButtons__color--active);}
|
|
161
|
+
.XydAtlas-Component-Code-CodeSampleButtons__CodeSampleButtonsButtonActive{color:var(--XydAtlas-Component-Code-SampleButtons__color--active);background-color:var(--XydAtlas-Component-Code-SampleButtons__color-background--active);box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.05);}
|
|
162
|
+
.XydAtlas-Component-ApiRef-ApiRefSamples__ApiRefSamplesContainerHost{position:-webkit-sticky;position:sticky;top:6rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:32px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
|
|
163
|
+
.XydAtlas-Component-ApiRef-ApiRefSamples__ApiRefSamplesContainerHost:first-child{margin-top:0;}
|
|
164
|
+
.XydAtlas-Component-ApiRef-ApiRefSamples__ApiRefSamplesContainerHost:last-child{margin-bottom:0;}
|
|
165
|
+
.XydAtlas-Component-ApiRef-ApiRefSamples__ApiRefSamplesGroupHost{gap:10px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
|
|
166
|
+
.XydAtlas-Component-Atlas__AtlasHost{width:100%;}
|
|
167
|
+
.XydAtlas-Component-Atlas-AtlasLazy__AtlasLazyItemHost{padding:16px 0;}
|
|
168
|
+
.XydAtlas-Component-Atlas-AtlasLazy__AtlasLazyItemFirst{padding:4px 0;}
|
|
169
|
+
.XydComponents-Component-brand-Footer__FooterHost{position:relative;border-top:1px solid #f0f0f0;padding:32px;background-color:#fff;}
|
|
170
|
+
.XydComponents-Component-brand-Footer__FooterContainer{margin:0 auto;max-width:1200px;text-align:center;}
|
|
171
|
+
.XydComponents-Component-brand-Footer__FooterTextContainer{line-height:24px;font-size:14px;font-weight:500;color:rgba(60, 60, 67, .78);}
|
|
172
|
+
.XydComponents-Component-pages-HomePage__HomePageCardsHost{display:grid;grid-template-columns:repeat(2, 500px);justify-content:center;gap:30px;}
|
|
173
|
+
@media (max-width: 1200px){.XydComponents-Component-pages-HomePage__HomePageCardsHost{grid-template-columns:repeat(2, 1fr);}}
|
|
174
|
+
@media (max-width: 768px){.XydComponents-Component-pages-HomePage__HomePageCardsHost{grid-template-columns:1fr;}}
|
|
175
|
+
.XydComponents-Component-brand-CTABanner__CTABannerHost{padding:20px;}
|
|
176
|
+
.XydComponents-Component-brand-CTABanner__CTABannerContainer{display:flex;align-items:center;justify-content:center;gap:80px;}
|
|
177
|
+
.XydComponents-Component-brand-CTABanner__CTABannerHero{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:40px;}
|
|
178
|
+
.XydComponents-Component-brand-CTABanner__CTABannerHeadingEffect{display:flex;align-items:center;justify-content:center;flex-direction:column;background:-webkit-linear-gradient(
|
|
179
|
+
120deg,
|
|
180
|
+
var(--headingEffect-color-tertiary) 20%,
|
|
181
|
+
var(--headingEffect-color-tertiary) 30%,
|
|
182
|
+
var(--headingEffect-color-secondary) 60%,
|
|
183
|
+
var(--headingEffect-color-primary) 75%,
|
|
184
|
+
var(--headingEffect-color-primary) 85%
|
|
185
|
+
);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:wave-XydComponents-Component-brand-CTABanner__CTABannerHeadingEffect 5s infinite;background-size:200% 200%;-webkit-background-position:50% 50%;background-position:50% 50%;}
|
|
186
|
+
@keyframes wave-XydComponents-Component-brand-CTABanner__CTABannerHeadingEffect{0%{-webkit-background-position:50% 50%;background-position:50% 50%;}50%{-webkit-background-position:0% 50%;background-position:0% 50%;}100%{-webkit-background-position:50% 50%;background-position:50% 50%;}}
|
|
187
|
+
.XydComponents-Component-brand-CTABanner__CTABannerHeadingHost{display:flex;align-items:center;justify-content:center;flex-direction:column;}
|
|
188
|
+
.XydComponents-Component-brand-CTABanner__CTABannerHeadingTitle{font-size:76px;font-weight:900;text-align:center;letter-spacing:3px;margin:0;}
|
|
189
|
+
.XydComponents-Component-brand-CTABanner__CTABannerHeadingSubtitle{color:#3c3c43;font-size:46px;font-weight:600;text-align:center;}
|
|
190
|
+
.XydComponents-Component-brand-CTABanner__CTABannerButtonGroupHost{display:flex;align-items:center;justify-content:center;gap:10px;}
|
|
191
|
+
.XydComponents-Component-brand-Button__ButtonHost{display:inline-block;border:1px solid transparent;text-align:center;font-weight:600;white-space:nowrap;border-radius:20px;padding:0 20px;line-height:38px;font-size:14px;border-color:transparent;color:#3c3c43;background-color:#f7f7f8;transition:color .25s,border-color .25s,background-color .25s;}
|
|
192
|
+
.XydComponents-Component-brand-Button__ButtonHost:hover{background:#e3e3e6;}
|
|
193
|
+
.XydComponents-Component-brand-Button__ButtonHostSecondary{color:#fff;background-color:rgb(112, 81, 212);}
|
|
194
|
+
.XydComponents-Component-brand-Button__ButtonHostSecondary:hover{background-color:rgb(95, 59, 211);}
|
|
195
|
+
.XydComponents-Component-writer-Badge__BadgeHost{display:inline-flex;align-items:center;line-height:1rem;font-style:normal;font-weight:500;letter-spacing:normal;white-space:nowrap;text-transform:none;}
|
|
196
|
+
.XydComponents-Component-writer-Badge__BadgeHostWarning{color:#434e4e;background-color:#ffffe1;}
|
|
197
|
+
.XydComponents-Component-writer-Badge__BadgeHostInfo{color:#fff;background-color:#1971a8;}
|
|
198
|
+
.XydComponents-Component-writer-Badge__BadgeHostSm{font-size:12px;height:18px;padding:0 6px;gap:3px;border-radius:6px;}
|
|
199
|
+
.XydComponents-Component-writer-Badge__BadgeItem{position:relative;}
|
|
200
|
+
.XydComponents-Component-views-HomeView__HomeViewHost{display:flex;flex-direction:column;min-height:100vh;}
|
|
201
|
+
.XydComponents-Component-views-HomeView__HomeViewBodyHost{background:radial-gradient(circle, hsl(0 0% 9% / .3) 1px, transparent 1px);-webkit-backdrop-filter:sepia(10%);backdrop-filter:sepia(10%);background-size:30px 30px;padding:60px;flex:1;}
|
|
202
|
+
.XydComponents-Component-views-HomeView__HomeViewBodyHostSecondary{background:repeating-linear-gradient(to right, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px),repeating-linear-gradient(to bottom, hsl(0 0% 9% / .1), hsl(0 0% 9% / .1) 1px, transparent 1px, transparent 50px);}
|
|
203
|
+
.XydComponents-Component-views-HomeView__HomeViewBodyContent{width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:80px;}
|
|
204
|
+
@media (max-width: 1200px){.XydComponents-Component-views-HomeView__HomeViewBodyContent{width:100%;padding:0 20px;}}
|
|
205
|
+
@media (max-width: 768px){.XydComponents-Component-views-HomeView__HomeViewBodyContent{width:100%;padding:0 10px;}}
|
|
206
|
+
.XydComponents-Component-writer-GuideCard__GuideHostSecondary{display:flex;position:relative;overflow:hidden;border:1px solid #ebebeb;background:#f8f8f8;border-radius:8px;padding:24px;z-index:0;transition:box-shadow .2s ease-in-out,background-image .2s ease;}
|
|
207
|
+
.XydComponents-Component-writer-GuideCard__GuideHostSecondary:hover{background:#FFF;}
|
|
208
|
+
.XydComponents-Component-writer-GuideCard__GuideHostSecondaryMd{padding:21px 25px 25px;}
|
|
209
|
+
.XydComponents-Component-writer-GuideCard__GuideLink{width:100%;height:100%;}
|
|
210
|
+
.XydComponents-Component-writer-GuideCard__GuideItem{border-radius:8px;display:flex;align-items:flex-start;cursor:pointer;transition:opacity .15s;}
|
|
211
|
+
.XydComponents-Component-writer-GuideCard__GuideItem:hover [data-pointer="true"]{opacity:1;transform:translate(0);}
|
|
212
|
+
.XydComponents-Component-writer-GuideCard__GuideItemSecondary{width:100%;height:100%;}
|
|
213
|
+
.XydComponents-Component-writer-GuideCard__GuideIcon{line-height:0px;font-size:24px;height:32px;display:flex;justify-content:center;align-items:center;color:#000;transition:background .2s ease;box-sizing:border-box;flex-shrink:0;}
|
|
214
|
+
.XydComponents-Component-writer-GuideCard__GuideRight{padding-left:16px;display:flex;flex-direction:column;gap:4px;}
|
|
215
|
+
.XydComponents-Component-writer-GuideCard__GuideTitle{display:flex;color:#000;font-weight:600;align-items:center;transition:color .15s;}
|
|
216
|
+
.XydComponents-Component-writer-GuideCard__GuideTitleBody{font-size:16px;line-height:20px;}
|
|
217
|
+
.XydComponents-Component-writer-GuideCard__GuideTitleBodyMd{font-size:18px;}
|
|
218
|
+
.XydComponents-Component-writer-GuideCard__GuideBody{font-weight:400;font-size:14px;line-height:20px;color:#5C5C5C;white-space:normal;overflow:hidden;text-overflow:ellipsis;}
|
|
219
|
+
.XydComponents-Component-writer-GuideCard__GuideBodyMd{font-size:16px;}
|
|
220
|
+
.XydComponents-Component-writer-GuideCard__GuidePointer{opacity:0;transform:translate(-4px);display:flex;justify-content:center;transition:opacity .15s ease-in-out,transform .15s ease-in-out;}
|
|
221
|
+
.XydComponents-Component-writer-GuideCard__GuideListHost{display:grid;grid-template-columns:1fr 1fr;justify-content:center;gap:24px;}
|
|
222
|
+
.XydComponents-Component-writer-Hr__HrHost{border-color:rgb(229 229 229 / 0.7);}
|
|
223
|
+
.XydComponents-Component-writer-Blockquote__BlockquoteHost{color:rgb(55 65 81 / 1);font-style:italic;border-color:rgb(209 213 219 / 1);margin:0;}
|
|
224
|
+
.XydComponents-Component-writer-Callout__CalloutHost{display:inline-flex;align-items:center;position:relative;width:100%;min-width:275px;padding:8px 12px;border-radius:8px;text-align:center;border:1px solid #ececf1;}
|
|
225
|
+
.XydComponents-Component-writer-Callout__CalloutNeutral{background-color:#f7f7f8;border-color:#ececf1;}
|
|
226
|
+
.XydComponents-Component-writer-Callout__CalloutIcon{display:inline-flex;margin-right:14px;flex:0 0 auto;align-self:flex-start;color:#6e6e80;font-size:20px;margin-top:2px;}
|
|
227
|
+
.XydComponents-Component-writer-Callout__CalloutMessage{color:#353740;text-align:left;flex:1 1 auto;}
|
|
228
|
+
.XydComponents-Component-writer-Callout__CalloutMessageBody{font-size:14px;line-height:20px;}
|
|
229
|
+
.XydComponents-Component-writer-Breadcrumbs-Breadcrumbs_styles_ts__BreadcrumbsHost{display:flex;overflow:hidden;margin-top:0.375rem;gap:0.25rem;align-items:center;font-size:0.875rem;line-height:1.25rem;color:#6B7280;}
|
|
230
|
+
.XydComponents-Component-writer-Breadcrumbs-Breadcrumbs_styles_ts__BreadcrumbsIcon{shrink:0;width:0.875rem;}
|
|
231
|
+
.XydComponents-Component-writer-Breadcrumbs-Breadcrumbs_styles_ts__BreadcrumbsItem{white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;}
|
|
232
|
+
.XydComponents-Component-writer-Breadcrumbs-Breadcrumbs_styles_ts__BreadcrumbsItemActive{color:#000;font-weight:bold;}
|
|
233
|
+
.XydComponents-Component-writer-Table__TableHost{display:block;overflow-x:scroll;border-collapse:collapse;border-radius:3px;}
|
|
234
|
+
.XydComponents-Component-writer-Table__TableTh{padding:0.5rem 1rem;margin:0;font-weight:600;border-width:1px;border-color:#D1D5DB;background:rgba(234, 238, 242, 0.5);}
|
|
235
|
+
.XydComponents-Component-writer-Table__TableTr{padding:0;margin:0;border-top-width:1px;border-color:#D1D5DB;}
|
|
236
|
+
.XydComponents-Component-writer-Table__TableTd{padding:0.5rem 1rem;margin:0;border-width:1px;border-color:#D1D5DB;}
|
|
237
|
+
.XydComponents-Component-writer-Details__DetailsHost{border-top:1px solid #ececf1;}
|
|
238
|
+
.XydComponents-Component-writer-Details__DetailsHost[open] summary svg[data-icon="true"]{transform:rotate(90deg);}
|
|
239
|
+
.XydComponents-Component-writer-Details__DetailsHostSecondary{background-color:#f7f7f8;border:1px solid #ececf1;border-radius:8px;}
|
|
240
|
+
.XydComponents-Component-writer-Details__DetailsSummary{padding:16px 14px 16px 0;font-size:18px;cursor:pointer;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.4;transition:color 0.3s;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;list-style:none;}
|
|
241
|
+
.XydComponents-Component-writer-Details__DetailsSummary:hover{color:#565869;}
|
|
242
|
+
.XydComponents-Component-writer-Details__DetailsSummarySecondary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:20px 24px;}
|
|
243
|
+
.XydComponents-Component-writer-Details__DetailsSummaryTertiary{padding:10px 24px;}
|
|
244
|
+
.XydComponents-Component-writer-Details__DetailsSummaryDeep{display:flex;align-items:center;margin-bottom:8px;}
|
|
245
|
+
.XydComponents-Component-writer-Details__DetailsSummaryDeepText{color:#6e6e80;text-transform:uppercase;font-size:12px;line-height:16px;letter-spacing:.08em;margin-left:8px;font-weight:700;}
|
|
246
|
+
.XydComponents-Component-writer-Details__DetailsSummaryDeepTextTertiary{text-transform:none;}
|
|
247
|
+
.XydComponents-Component-writer-Details__DetailsSummaryDeepTextTertiary code{background:white;}
|
|
248
|
+
.XydComponents-Component-writer-Details__DetailsLabel{flex:1 1 auto;}
|
|
249
|
+
.XydComponents-Component-writer-Details__DetailsLabelTertiary{padding:10px;}
|
|
250
|
+
.XydComponents-Component-writer-Details__DetailsIcon{flex:0 0 auto;font-size:16px;display:flex;align-items:center;justify-content:center;padding-right:6px;}
|
|
251
|
+
.XydComponents-Component-writer-Details__DetailsContent{padding:0 24px 20px;}
|
|
252
|
+
.XydComponents-Component-writer-Details__DetailsContentSecondary code{background:white;}
|
|
253
|
+
.XydComponents-Component-writer-Details__DetailsContentTertiary{background:white;padding-top:20px;}
|
|
254
|
+
.XydComponents-Component-writer-Heading__HeadingHost{line-height:40px;font-weight:600;position:relative;display:inline-block;margin:0;padding:0 24px 0 0;scroll-snap-margin-top:30px;scroll-margin-top:30px;cursor:pointer;}
|
|
255
|
+
.XydComponents-Component-writer-Heading__HeadingHost:hover svg{opacity:1;}
|
|
256
|
+
.XydComponents-Component-writer-Heading__HeadingH1{font-size:36px;}
|
|
257
|
+
.XydComponents-Component-writer-Heading__HeadingH1 code{font-size:30px;}
|
|
258
|
+
.XydComponents-Component-writer-Heading__HeadingH2{font-size:30px;}
|
|
259
|
+
.XydComponents-Component-writer-Heading__HeadingH2 code{font-size:24px;}
|
|
260
|
+
.XydComponents-Component-writer-Heading__HeadingH3{font-size:26px;}
|
|
261
|
+
.XydComponents-Component-writer-Heading__HeadingH3 code{font-size:22px;}
|
|
262
|
+
.XydComponents-Component-writer-Heading__HeadingH4{font-size:22px;}
|
|
263
|
+
.XydComponents-Component-writer-Heading__HeadingH4 code{font-size:18px;}
|
|
264
|
+
.XydComponents-Component-writer-Heading__HeadingH5{font-size:18px;}
|
|
265
|
+
.XydComponents-Component-writer-Heading__HeadingH5 code{font-size:14px;}
|
|
266
|
+
.XydComponents-Component-writer-Heading__HeadingH6{font-size:16px;}
|
|
267
|
+
.XydComponents-Component-writer-Heading__HeadingH6 code{font-size:12px;}
|
|
268
|
+
.XydComponents-Component-writer-Heading__HeadingLink{position:absolute;top:50%;right:0;margin-top:-6px;opacity:0;color:#7051d4;transition:opacity .15s ease;}
|
|
269
|
+
.XydComponents-Component-writer-Code__CodeHost{display:inline-block;padding:0 .3em;border-radius:6px;margin:0 3px;border:.5px solid #ececf1;font-size:14px;font-weight:500;line-height:1.6em;background:linear-gradient(45deg, #f7f7f8 0%, rgba(247, 247, 248, 1) 100%);}
|
|
270
|
+
.XydComponents-Component-writer-Steps__StepsHost{padding-left:0;list-style:none;counter-reset:ordered-listitem;display:flex;flex-direction:column;gap:6px;}
|
|
271
|
+
.XydComponents-Component-writer-Steps__StepsLi{padding-left:32px;position:relative;line-height:1.5;}
|
|
272
|
+
.XydComponents-Component-writer-Steps__StepsLi::after{position:absolute;top:0;left:0;counter-increment:ordered-listitem;content:counter(ordered-listitem);background:#ececf1;color:#353740;font-size:12px;line-height:24px;font-weight:500;text-align:center;height:24px;width:24px;border-radius:12px;}
|
|
273
|
+
.XydComponents-Component-writer-Table__Host{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
|
|
274
|
+
.XydComponents-Component-writer-Table__Table{display:table;width:100%;min-width:640px;border-collapse:separate;border-spacing:0;border:1px solid #ECECF1;border-radius:8px;font-size:0.875rem;line-height:1.25rem;margin-top:1rem;overflow:hidden;}
|
|
275
|
+
.XydComponents-Component-writer-Table__Thead{background:#F7F7F8;}
|
|
276
|
+
.XydComponents-Component-writer-Table__Th{text-align:left;font-weight:500;padding:0.5rem 1rem;color:#353740;vertical-align:middle;border-bottom:1px solid #ECECF1;white-space:nowrap;}
|
|
277
|
+
.XydComponents-Component-writer-Table__Th:first-child{width:24rem;max-width:40%;border-right:1px solid #ECECF1;}
|
|
278
|
+
@media (max-width: 768px){.XydComponents-Component-writer-Table__Th:first-child{width:auto;min-width:12rem;}}
|
|
279
|
+
.XydComponents-Component-writer-Table__Th.numeric{text-align:right;font-weight:400;min-width:5rem;}
|
|
280
|
+
@media (max-width: 768px){.XydComponents-Component-writer-Table__Th.numeric{min-width:4rem;}}
|
|
281
|
+
.XydComponents-Component-writer-Table__Tr:not(:last-child){border-bottom:1px solid #ECECF1;}
|
|
282
|
+
.XydComponents-Component-writer-Table__Td{padding:0.5rem 1rem;vertical-align:middle;border-top:1px solid #ECECF1;}
|
|
283
|
+
.XydComponents-Component-writer-Table__Td:first-child{border-right:1px solid #ECECF1;}
|
|
284
|
+
.XydComponents-Component-writer-Table__Td.numeric{text-align:right;}
|
|
285
|
+
.XydComponents-Component-writer-Table__Td.muted{color:#6E6E80;}
|
|
286
|
+
@media (max-width: 768px){.XydComponents-Component-writer-Table__Td{padding:0.5rem;}}
|
|
287
|
+
.XydComponents-Component-writer-Table__Cell{display:flex;align-items:baseline;width:100%;gap:0.5rem;}
|
|
288
|
+
.XydComponents-Component-writer-Table__CellContent{flex:1;text-align:right;}
|
|
289
|
+
.XydComponents-Component-writer-Table__ModelCell{display:flex;align-items:center;gap:0.5rem;white-space:nowrap;color:#202123;}
|
|
290
|
+
@media (max-width: 768px){.XydComponents-Component-writer-Table__ModelCell{font-size:0.8125rem;}}
|
|
291
|
+
.XydComponents-Component-writer-Pre__PreHost{margin-top:0;border-radius:6px;padding:16px;border:0;background-color:rgb(246, 248, 250);overflow:auto;}
|
|
292
|
+
.XydComponents-Component-writer-UnderlineNav__UnderlineNavHost{align-items:center;display:flex;height:42px;background-color:#fff;border-bottom:1px solid hsl(212, 15%, calc(96% - 12% * 1));z-index:99;}
|
|
293
|
+
.XydComponents-Component-writer-UnderlineNav__UnderlineNavUl{display:flex;gap:10px;height:100%;color:hsl(212, 15%, calc(96% - 12% * 4));list-style:none;padding:0;white-space:nowrap;}
|
|
294
|
+
.XydComponents-Component-writer-UnderlineNav__UnderlineNavItem{height:100%;}
|
|
295
|
+
.XydComponents-Component-writer-UnderlineNav__UnderlineNavItem[data-state="active"] a{border-bottom-color:rgb(112, 81, 212);}
|
|
296
|
+
.XydComponents-Component-writer-UnderlineNav__UnderlineNavItemLink{display:inline-flex;border-bottom:3px solid transparent;-webkit-text-decoration:none;text-decoration:none;height:100%;padding:10px;}
|
|
297
|
+
.XydComponents-Component-writer-NavLinks-NavLinks_styles_ts__NavLinksHost{display:flex;padding-top:2rem;margin-top:2rem;margin-bottom:2rem;justify-content:space-between;align-items:center;border-top-width:1px;border-color:#d7d7d7;}
|
|
298
|
+
.XydComponents-Component-writer-NavLinks-NavLinks_styles_ts__NavLinksLink{display:flex;gap:8px;align-items:center;font-size:16px;line-height:1.5;font-weight:600;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;max-width:50%;}
|
|
299
|
+
.XydComponents-Component-writer-NavLinks-NavLinks_styles_ts__NavLinksIcon{display:inline;height:1.25rem;flex-shrink:0;}
|
|
300
|
+
.XydComponents-Component-writer-Tabs__TabsSampleHost{position:relative;max-width:100%;}
|
|
301
|
+
.XydComponents-Component-writer-Tabs__TabsSampleButtons{display:flex;align-items:center;}
|
|
302
|
+
.XydComponents-Component-writer-Tabs__TabsSampleContent{margin-top:16px;}
|
|
303
|
+
.XydComponents-Component-writer-Tabs__TabsArrowHost{padding:8px;background-color:#ffffff;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.05);}
|
|
304
|
+
.XydComponents-Component-writer-Tabs__TabsArrowIcon{width:16px;height:16px;}
|
|
305
|
+
.XydComponents-Component-writer-Tabs__TabsScrollerHost{overflow-x:auto;flex-grow:1;}
|
|
306
|
+
.XydComponents-Component-writer-Tabs__TabsScrollerContainer{display:inline-flex;gap:4px;border-radius:8px;background-color:#F3F4F6;padding:4px;margin-left:4px;}
|
|
307
|
+
.XydComponents-Component-writer-Tabs__TabsButtonHost{padding:0.5rem 1rem;border-radius:0.375rem;font-size:0.875rem;line-height:1.25rem;font-weight:500;white-space:nowrap;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;color:#6B7280;}
|
|
308
|
+
.XydComponents-Component-writer-Tabs__TabsButtonHost:hover{color:#111827;}
|
|
309
|
+
.XydComponents-Component-writer-Tabs__TabsButtonHost[data-state="active"]{color:#111827;background-color:#ffffff;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.05);}
|
|
310
|
+
.XydComponents-Component-writer-Tabs__TabsButtonActive{color:#111827;background-color:#ffffff;box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.05);}
|
|
311
|
+
:root {--xyd-navbar-height:40px;--xyd-global-page-gutter:8px;}
|
|
312
|
+
.XydComponents-Component-layouts__LayoutHost{width:100%;}
|
|
313
|
+
.XydComponents-Component-layouts__LayoutHeader{display:flex;justify-content:space-between;align-items:center;position:fixed;top:0px;right:8px;left:8px;height:40px;}
|
|
314
|
+
.XydComponents-Component-layouts__LayoutHeaderSub{flex-direction:column;height:94px;transition:transform 200ms;}
|
|
315
|
+
.XydComponents-Component-layouts__LayoutHeaderHideMain{transform:translateY(calc(-40px + 3px));}
|
|
316
|
+
.XydComponents-Component-layouts__LayoutMain{position:fixed;top:calc(40px + 0px);bottom:8px;left:8px;right:8px;}
|
|
317
|
+
.XydComponents-Component-layouts__LayoutMainSub{top:calc(94px + 0px);transition:top 200ms;}
|
|
318
|
+
.XydComponents-Component-layouts__LayoutSidebar{flex-direction:column;position:absolute;top:0;left:0;bottom:0;right:0;z-index:101;width:210px;border:0;padding:12px 0 0;overflow:visible;background:none;border-radius:0;opacity:1;visibility:visible;transition:opacity .3s cubic-bezier(.65, 0, .35, 1);}
|
|
319
|
+
.XydComponents-Component-layouts__PageHost{position:absolute;top:12px;right:0;bottom:0;z-index:201;background:#fff;overflow:hidden;transition:opacity .3s cubic-bezier(.65, 0, .35, 1);left:210px;}
|
|
320
|
+
.XydComponents-Component-layouts__PageScroll{overflow:scroll;height:100%;}
|
|
321
|
+
.XydComponents-Component-layouts__PageContainer{padding:0;width:100%;min-height:100%;max-width:100%;margin:0 auto;font-size:15px;line-height:24px;}
|
|
322
|
+
.XydComponents-Component-layouts__PageArticleContainer{width:980px;padding:40px 56px;padding-top:20px;max-width:100%;margin:0 auto;}
|
|
323
|
+
.XydComponents-Component-layouts__PageArticleContainerFullWidth{width:1200px;}
|
|
324
|
+
.XydComponents-Component-layouts__ArticleHost{display:flex;gap:30px;width:100%;align-items:flex-start;}
|
|
325
|
+
.XydComponents-Component-layouts__ArticleContent{flex:1 1 0;overflow:hidden;}
|
|
326
|
+
.XydComponents-Component-layouts__ArticleNav{position:sticky;top:30px;width:180px;margin-top:0;margin-left:50px;padding-left:16px;flex:none;}
|
|
327
|
+
.XydComponents-Component-coder-Code__MarkHost{display:flex;border-left-width:4px;border-color:transparent;margin:4px 0;}
|
|
328
|
+
.XydComponents-Component-coder-Code__MarkLine{flex:1 1 0%;}
|
|
329
|
+
.XydComponents-Component-coder-Code__MarkAnnotated{border-color:#60A5FA;background-color:#EEF2FF;}
|
|
330
|
+
.XydComponents-Component-coder-Code__LineNumberHost{margin:0 12px 0px 4px;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:0.5;}
|
|
331
|
+
.XydComponents-Component-coder-Code__CodeHost{max-height:400px;background:linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%)!important;margin:0;padding:8px 16px;border-top:1px solid rgb(236, 236, 241);border-bottom-left-radius:10px;border-bottom-right-radius:10px;font-size:12px;line-height:20px;white-space:pre-wrap;word-break:break-all;overflow-y:scroll;}
|
|
332
|
+
.XydComponents-Component-coder-Code__CodeHostFull{max-height:100%;}
|
|
333
|
+
.XydComponents-Component-coder-CodeTabs__CodeTabsHost{overflow:hidden;min-width:0;border:1px solid rgb(236, 236, 241);border-radius:16px;}
|
|
334
|
+
.XydComponents-Component-coder-CodeTabs__CodeTabsPreSingle{border:none!important;}
|
|
335
|
+
.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesHost{display:flex;flex:1 1 0%;background:linear-gradient(45deg, rgb(247, 247, 248) 0%, rgb(247, 247, 248) 100%)!important;border-top-right-radius:10px;border-top-left-radius:10px;border-bottom:0px;min-width:0;}
|
|
336
|
+
.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesHostSingle{height:0;}
|
|
337
|
+
.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesList{display:flex;flex-grow:1;justify-content:end;gap:8px;padding:0 10px;}
|
|
338
|
+
.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesButton{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;padding:6px;font-size:14px;color:rgb(53, 55, 64);}
|
|
339
|
+
.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesButton[data-state="active"]{color:rgb(112, 81, 212);border-bottom:1px solid rgb(112, 81, 212);border-bottom-left-radius:0px;border-bottom-right-radius:0px;}
|
|
340
|
+
.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesButton:hover{transition:ease-in 0.1s;background:#e3e3eb;}
|
|
341
|
+
.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesDescription{display:flex;align-items:center;gap:4px;font-size:14px;color:rgb(53, 55, 64);margin-left:4px;margin-right:4px;}
|
|
342
|
+
.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesDescriptionItem{display:flex;padding-left:16px;padding-right:16px;flex:1 1 0%;gap:16px;border-radius:4px;}
|
|
343
|
+
.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesCopy{display:flex;padding-left:8px;padding-right:8px;align-items:center;}
|
|
344
|
+
.XydComponents-Component-coder-CodeTabs__CodeTabsLanguagesCopySingle{top:17px;position:relative;right:5px;}
|
|
345
|
+
.XydComponents-Component-content-Content__ContentHost{display:flex;flex-direction:column;gap:24px;font-size:16px;line-height:1.5;}
|
|
346
|
+
:root {--xyd-navbar-height:50px;--xyd-global-page-gutter:8px;--xyd-sidebar-width:250px;}
|
|
347
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHost{width:100%;overflow-x:hidden;background:#fff;}
|
|
348
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHeader{display:flex;justify-content:space-between;align-items:center;position:fixed;top:0px;right:8px;left:8px;height:50px;z-index:20;background:#fff;}
|
|
349
|
+
@media (max-width: 768px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHeader{padding:0;}}
|
|
350
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHeaderContent{display:flex;align-items:center;width:100%;}
|
|
351
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHeaderSub{flex-direction:column;height:94px;transition:transform 200ms;}
|
|
352
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHeaderHideMain{transform:translateY(calc(-50px + 3px));}
|
|
353
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHamburgerButton{display:none;}
|
|
354
|
+
@media (max-width: 768px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHamburgerButton{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:none;cursor:pointer;padding:0;}}
|
|
355
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHamburgerIcon{width:24px;height:24px;position:relative;display:flex;flex-direction:column;justify-content:space-between;}
|
|
356
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHamburgerLine{width:100%;height:2px;background:#000;transition:transform 0.3s cubic-bezier(.65, 0, .35, 1);}
|
|
357
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHamburgerLineOpen:first-child{transform:translateY(11px) rotate(45deg);}
|
|
358
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHamburgerLineOpen:nth-child(2){opacity:0;}
|
|
359
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryHamburgerLineOpen:last-child{transform:translateY(-11px) rotate(-45deg);}
|
|
360
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryMain{position:fixed;display:flex;top:calc(50px + 0px);bottom:0;left:0;right:0;padding:8px;overflow:hidden;}
|
|
361
|
+
@media (max-width: 1024px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryMain{padding-top:calc(50px + 0px + 8px);}}
|
|
362
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryMainSub{top:calc(94px + 0px);}
|
|
363
|
+
@media (max-width: 1024px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryMainSub{padding-top:calc(94px + 0px + 8px);}}
|
|
364
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryStaticSidebar{flex:none;width:250px;background:#fff;display:flex;flex-direction:column;position:relative;height:100%;}
|
|
365
|
+
@media (max-width: 1024px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryStaticSidebar{display:none;}}
|
|
366
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryMobileSidebar{display:none;}
|
|
367
|
+
@media (max-width: 1024px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryMobileSidebar{display:flex;position:fixed;top:0;bottom:0;left:0;width:250px;background:#fff;flex-direction:column;z-index:50;transform:translateX(-100%);transition:transform .3s cubic-bezier(.65, 0, .35, 1);box-shadow:4px 0 8px rgba(0, 0, 0, 0.1);}}
|
|
368
|
+
@media (max-width: 1024px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryMobileSidebarOpen{transform:translateX(0);}}
|
|
369
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimarySidebarContent{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;height:100%;}
|
|
370
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryCloseButton{position:absolute;top:12px;right:12px;width:32px;height:32px;border:none;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
|
|
371
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimarySearchInput{width:100%;height:40px;padding:0 12px;border:1px solid #eaeaea;border-radius:6px;font-size:14px;outline:none;transition:border-color 0.2s;}
|
|
372
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimarySearchInput:focus{border-color:#666;}
|
|
373
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryCloseIcon{width:20px;height:20px;position:relative;}
|
|
374
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryCloseIcon::before,.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryCloseIcon::after{content:'';position:absolute;top:50%;left:0;width:100%;height:2px;background:#666;transform-origin:center;}
|
|
375
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryCloseIcon::before{transform:rotate(45deg);}
|
|
376
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryCloseIcon::after{transform:rotate(-45deg);}
|
|
377
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryOverlay{display:none;}
|
|
378
|
+
@media (max-width: 1024px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryOverlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0, 0, 0, 0.6);transition:opacity .3s;opacity:0;pointer-events:none;z-index:40;height:100vh;}}
|
|
379
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryOverlayVisible{opacity:1;pointer-events:auto;}
|
|
380
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryPageHost{position:relative;flex:1;background:#fff;overflow:hidden;min-width:0;height:100%;}
|
|
381
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryPageScroll{overflow-y:auto;height:100%;-webkit-overflow-scrolling:touch;padding:0 48px;}
|
|
382
|
+
@media (max-width: 1024px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryPageScroll{padding:0 32px;}}
|
|
383
|
+
@media (max-width: 768px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryPageScroll{padding:0 24px;}}
|
|
384
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryPageContainer{max-width:1000px;margin:0 auto;padding:0 8px;}
|
|
385
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryPageContainerLarge{max-width:1200px;}
|
|
386
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryPageArticleContainer{display:flex;gap:48px;padding:48px 0;min-height:100%;}
|
|
387
|
+
@media (max-width: 1024px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryPageArticleContainer{gap:32px;}}
|
|
388
|
+
@media (max-width: 768px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryPageArticleContainer{flex-direction:column;padding:24px 0;gap:24px;}}
|
|
389
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryArticleHost{flex:1;min-width:0;}
|
|
390
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryArticleContent{width:100%;}
|
|
391
|
+
.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryArticleNav{flex:none;width:256px;position:sticky;top:0;height:-moz-fit-content;height:fit-content;max-height:100vh;overflow-y:auto;padding-right:24px;padding-top:12px;}
|
|
392
|
+
@media (max-width: 1024px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryArticleNav{width:200px;padding-right:16px;}}
|
|
393
|
+
@media (max-width: 768px){.XydComponents-Component-layouts-LayoutPrimary__LayoutPrimaryArticleNav{width:100%;position:static;max-height:none;padding-right:0;}}
|
|
394
|
+
.XydComponents-Component-content-Anchor__AnchorHost{color:#7051d4;}
|
|
395
|
+
.XydComponents-Component-content-Subtitle-Subtitle_styles_ts__Host{margin-top:-18px;font-size:18px;color:#6e6e80;font-weight:300;}
|
|
396
|
+
.XydComponents-Component-coder-CodeCopy__CodeCopyHost{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;padding:6px;}
|
|
397
|
+
.XydComponents-Component-coder-CodeCopy__CodeCopyHost:hover{transition:ease-in 0.1s;background:#e3e3eb;}
|
|
398
|
+
.XydComponents-Component-ui-Loader__LoaderHost{display:inline-flex;align-items:center;justify-content:center;}
|
|
399
|
+
.XydComponents-Component-ui-Loader__LoaderDots{display:flex;gap:4px;}
|
|
400
|
+
.XydComponents-Component-ui-Loader__LoaderDot{width:8px;height:8px;background-color:currentColor;border-radius:50%;animation:pulse-XydComponents-Component-ui-Loader__LoaderDot 1.4s infinite ease-in-out;opacity:0.6;}
|
|
401
|
+
.XydComponents-Component-ui-Loader__LoaderDot:nth-of-type(2){animation-delay:0.2s;}
|
|
402
|
+
.XydComponents-Component-ui-Loader__LoaderDot:nth-of-type(3){animation-delay:0.4s;}
|
|
403
|
+
@keyframes pulse-XydComponents-Component-ui-Loader__LoaderDot{0%,80%,100%{transform:scale(0.6);opacity:0.4;}40%{transform:scale(1);opacity:1;}}
|
|
404
|
+
.XydComponents-Component-ui-Loader__LoaderSmall .XydComponents-Component-ui-Loader__LoaderDot{width:6px;height:6px;}
|
|
405
|
+
.XydComponents-Component-ui-Loader__LoaderLarge .XydComponents-Component-ui-Loader__LoaderDot{width:12px;height:12px;}
|
|
406
|
+
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
declare abstract class BaseThemeSettings {
|
|
4
|
+
private _toc?;
|
|
5
|
+
private _tocHidden;
|
|
6
|
+
private _clientSidebarRouting;
|
|
7
|
+
private _layoutSize;
|
|
8
|
+
protected toc: {
|
|
9
|
+
(value: React.ReactElement): BaseThemeSettings;
|
|
10
|
+
get: () => React.ReactNode | undefined;
|
|
11
|
+
hide: () => BaseThemeSettings;
|
|
12
|
+
isHidden: () => boolean;
|
|
13
|
+
};
|
|
14
|
+
protected sidebar: {
|
|
15
|
+
clientSideRouting: (value: boolean) => BaseThemeSettings;
|
|
16
|
+
getClientSideRouting: () => boolean;
|
|
17
|
+
};
|
|
18
|
+
protected layout: {
|
|
19
|
+
size: (value: string) => BaseThemeSettings;
|
|
20
|
+
getSize: () => string;
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
interface ThemeProps<T extends BaseThemeSettings> {
|
|
25
|
+
children: React.ReactNode;
|
|
26
|
+
settings?: T;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
interface BaseThemeRenderProps {
|
|
30
|
+
children: React.ReactNode;
|
|
31
|
+
}
|
|
32
|
+
declare abstract class BaseTheme extends BaseThemeSettings {
|
|
33
|
+
protected render(props: BaseThemeRenderProps): React.JSX.Element;
|
|
34
|
+
protected mergeSettings(props: ThemeProps<BaseThemeSettings>): void;
|
|
35
|
+
protected Navbar(): React.JSX.Element;
|
|
36
|
+
protected Sidebar(): React.JSX.Element;
|
|
37
|
+
protected Content({ children }: {
|
|
38
|
+
children: React.ReactNode;
|
|
39
|
+
}): React.JSX.Element;
|
|
40
|
+
protected ContentNav(): string | number | bigint | true | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
declare function withTheme<T extends BaseThemeSettings>(theme: BaseTheme): (props: ThemeProps<T>) => any;
|
|
44
|
+
|
|
45
|
+
export { BaseTheme, BaseThemeSettings, type ThemeProps, withTheme };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
// src/BaseTheme.tsx
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import {
|
|
4
|
+
LayoutPrimary
|
|
5
|
+
} from "@xyd-js/components/layouts";
|
|
6
|
+
import {
|
|
7
|
+
helperContent
|
|
8
|
+
} from "@xyd-js/components/content";
|
|
9
|
+
import {
|
|
10
|
+
FwNav,
|
|
11
|
+
FwNavLinks,
|
|
12
|
+
FwToc,
|
|
13
|
+
FwSubNav,
|
|
14
|
+
FwSidebarGroups,
|
|
15
|
+
useMatchedSubNav
|
|
16
|
+
} from "@xyd-js/framework/react";
|
|
17
|
+
|
|
18
|
+
// src/settings.ts
|
|
19
|
+
var BaseThemeSettings = class {
|
|
20
|
+
constructor() {
|
|
21
|
+
this._toc = void 0;
|
|
22
|
+
this._tocHidden = false;
|
|
23
|
+
this._clientSidebarRouting = false;
|
|
24
|
+
this._layoutSize = "";
|
|
25
|
+
this.toc = Object.assign(
|
|
26
|
+
(value) => {
|
|
27
|
+
this._toc = value;
|
|
28
|
+
return this;
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
get: () => {
|
|
32
|
+
return this._toc;
|
|
33
|
+
},
|
|
34
|
+
hide: () => {
|
|
35
|
+
this._tocHidden = true;
|
|
36
|
+
return this;
|
|
37
|
+
},
|
|
38
|
+
isHidden: () => {
|
|
39
|
+
return this._tocHidden;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
this.sidebar = {
|
|
44
|
+
clientSideRouting: (value) => {
|
|
45
|
+
this._clientSidebarRouting = value;
|
|
46
|
+
return this;
|
|
47
|
+
},
|
|
48
|
+
getClientSideRouting: () => {
|
|
49
|
+
return this._clientSidebarRouting;
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
this.layout = {
|
|
53
|
+
size: (value) => {
|
|
54
|
+
this._layoutSize = value;
|
|
55
|
+
return this;
|
|
56
|
+
},
|
|
57
|
+
getSize: () => {
|
|
58
|
+
return this._layoutSize;
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
// src/BaseTheme.tsx
|
|
65
|
+
var {
|
|
66
|
+
Content: HelperContent
|
|
67
|
+
} = helperContent();
|
|
68
|
+
var BaseTheme = class extends BaseThemeSettings {
|
|
69
|
+
render(props) {
|
|
70
|
+
const {
|
|
71
|
+
Navbar: $Navbar,
|
|
72
|
+
Sidebar: $Sidebar,
|
|
73
|
+
Content: $Content,
|
|
74
|
+
ContentNav: $ContentNav
|
|
75
|
+
} = this;
|
|
76
|
+
const subheader = useMatchedSubNav() ? /* @__PURE__ */ React.createElement(FwSubNav, null) : null;
|
|
77
|
+
const contentNav = this.toc.isHidden() ? void 0 : /* @__PURE__ */ React.createElement($ContentNav, null);
|
|
78
|
+
return /* @__PURE__ */ React.createElement(
|
|
79
|
+
LayoutPrimary,
|
|
80
|
+
{
|
|
81
|
+
header: /* @__PURE__ */ React.createElement($Navbar, null),
|
|
82
|
+
subheader,
|
|
83
|
+
aside: /* @__PURE__ */ React.createElement($Sidebar, null),
|
|
84
|
+
content: /* @__PURE__ */ React.createElement($Content, null, props.children),
|
|
85
|
+
contentNav,
|
|
86
|
+
layoutSize: (this == null ? void 0 : this.layout.getSize()) || void 0
|
|
87
|
+
}
|
|
88
|
+
);
|
|
89
|
+
}
|
|
90
|
+
// TODO: it should be protected and passed via withTheme?
|
|
91
|
+
mergeSettings(props) {
|
|
92
|
+
if (props.settings) {
|
|
93
|
+
Object.assign(this, props.settings);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
Navbar() {
|
|
97
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FwNav, { kind: "middle" }));
|
|
98
|
+
}
|
|
99
|
+
Sidebar() {
|
|
100
|
+
var _a;
|
|
101
|
+
return /* @__PURE__ */ React.createElement(
|
|
102
|
+
FwSidebarGroups,
|
|
103
|
+
{
|
|
104
|
+
clientSideRouting: (_a = this == null ? void 0 : this.sidebar) == null ? void 0 : _a.getClientSideRouting()
|
|
105
|
+
}
|
|
106
|
+
);
|
|
107
|
+
}
|
|
108
|
+
Content({ children }) {
|
|
109
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(HelperContent, null, children), /* @__PURE__ */ React.createElement(FwNavLinks, null));
|
|
110
|
+
}
|
|
111
|
+
ContentNav() {
|
|
112
|
+
var _a;
|
|
113
|
+
const toc = (_a = this == null ? void 0 : this.toc) == null ? void 0 : _a.get();
|
|
114
|
+
if (toc) {
|
|
115
|
+
return toc;
|
|
116
|
+
}
|
|
117
|
+
return /* @__PURE__ */ React.createElement(FwToc, null);
|
|
118
|
+
}
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
// src/withTheme.tsx
|
|
122
|
+
function withTheme(theme) {
|
|
123
|
+
return function WithThemeComponent(props) {
|
|
124
|
+
return withThemeComponent.call(theme, props);
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
function withThemeComponent(props) {
|
|
128
|
+
this.mergeSettings(props);
|
|
129
|
+
return this.render(props);
|
|
130
|
+
}
|
|
131
|
+
export {
|
|
132
|
+
BaseTheme,
|
|
133
|
+
BaseThemeSettings,
|
|
134
|
+
withTheme
|
|
135
|
+
};
|
|
136
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/BaseTheme.tsx","../src/settings.ts","../src/withTheme.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n LayoutPrimary\n} from \"@xyd-js/components/layouts\";\nimport {\n helperContent\n} from \"@xyd-js/components/content\"\nimport {\n FwNav,\n FwNavLinks,\n FwToc,\n FwSubNav,\n FwSidebarGroups,\n\n useMatchedSubNav\n} from \"@xyd-js/framework/react\";\n\nimport {BaseThemeSettings} from \"./settings\";\nimport {ThemeProps} from \"./types\";\n\ninterface BaseThemeRenderProps {\n children: React.ReactNode;\n}\n\nconst {\n Content: HelperContent\n} = helperContent()\n\nexport abstract class BaseTheme extends BaseThemeSettings {\n protected render(props: BaseThemeRenderProps): React.JSX.Element {\n const {\n Navbar: $Navbar,\n Sidebar: $Sidebar,\n Content: $Content,\n ContentNav: $ContentNav\n } = this\n\n const subheader = useMatchedSubNav() ? <FwSubNav/> : null\n const contentNav = this.toc.isHidden() ? undefined : <$ContentNav/>\n\n return <LayoutPrimary\n header={<$Navbar/>}\n subheader={subheader}\n aside={<$Sidebar/>}\n content={<$Content>{props.children}</$Content>}\n contentNav={contentNav}\n layoutSize={this?.layout.getSize() as \"large\" || undefined}\n />\n }\n\n // TODO: it should be protected and passed via withTheme?\n protected mergeSettings(props: ThemeProps<BaseThemeSettings>) {\n if (props.settings) {\n Object.assign(this, props.settings);\n }\n }\n\n protected Navbar() {\n return <>\n <FwNav kind=\"middle\"/>\n </>\n }\n\n protected Sidebar() {\n return <FwSidebarGroups\n // onePathBehaviour={this?.sidebar?.onePathBehaviour} TODO: finish\n clientSideRouting={this?.sidebar?.getClientSideRouting()}\n />\n }\n\n protected Content({children}: { children: React.ReactNode }) {\n return <>\n {/*TODO: optional breadcrumbs*/}\n {/*{props.breadcrumbs ? <FwBreadcrumbs/> : undefined}*/}\n\n <HelperContent>\n {children}\n </HelperContent>\n\n <FwNavLinks/>\n </>\n }\n\n protected ContentNav() {\n const toc = this?.toc?.get()\n\n if (toc) {\n return toc\n }\n\n return <FwToc/>\n }\n}\n","import * as React from \"react\";\n\nexport abstract class BaseThemeSettings {\n private _toc?: React.ReactNode = undefined;\n private _tocHidden: boolean = false;\n private _clientSidebarRouting: boolean = false;\n private _layoutSize: string = \"\";\n\n protected toc: {\n (value: React.ReactElement): BaseThemeSettings;\n get: () => React.ReactNode | undefined;\n hide: () => BaseThemeSettings;\n isHidden: () => boolean;\n } = Object.assign(\n (value: React.ReactElement) => {\n this._toc = value;\n return this;\n },\n {\n get: () => {\n return this._toc;\n },\n hide: () => {\n this._tocHidden = true;\n return this;\n },\n isHidden: () => {\n return this._tocHidden;\n }\n }\n );\n\n protected sidebar: {\n clientSideRouting: (value: boolean) => BaseThemeSettings;\n getClientSideRouting: () => boolean\n } = {\n clientSideRouting: (value: boolean) => { // TODO: deprecate?\n this._clientSidebarRouting = value;\n return this;\n },\n getClientSideRouting: () => {\n return this._clientSidebarRouting;\n }\n };\n\n protected layout: {\n size: (value: string) => BaseThemeSettings;\n getSize: () => string;\n } = {\n size: (value: string) => {\n this._layoutSize = value;\n return this;\n },\n getSize: () => {\n return this._layoutSize;\n }\n };\n}\n","import React from \"react\";\n\nimport {type ThemeProps} from \"./types\";\nimport {BaseThemeSettings} from \"./settings\";\nimport {BaseTheme} from \"./BaseTheme\";\n\nexport function withTheme<T extends BaseThemeSettings>(theme: BaseTheme) {\n return function WithThemeComponent(props: ThemeProps<T>) {\n return withThemeComponent.call(theme, props);\n };\n}\n\nfunction withThemeComponent<T extends BaseThemeSettings>(\n this: BaseTheme,\n props: ThemeProps<T>\n) {\n this.mergeSettings(props); // TODO: is it ok to do this on this level?\n\n return this.render(props);\n}"],"mappings":";AAAA,YAAY,WAAW;AAEvB;AAAA,EACI;AAAA,OACG;AACP;AAAA,EACI;AAAA,OACG;AACP;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,OACG;;;ACdA,IAAe,oBAAf,MAAiC;AAAA,EAAjC;AACH,SAAQ,OAAyB;AACjC,SAAQ,aAAsB;AAC9B,SAAQ,wBAAiC;AACzC,SAAQ,cAAsB;AAE9B,SAAU,MAKN,OAAO;AAAA,MACP,CAAC,UAA8B;AAC3B,aAAK,OAAO;AACZ,eAAO;AAAA,MACX;AAAA,MACA;AAAA,QACI,KAAK,MAAM;AACP,iBAAO,KAAK;AAAA,QAChB;AAAA,QACA,MAAM,MAAM;AACR,eAAK,aAAa;AAClB,iBAAO;AAAA,QACX;AAAA,QACA,UAAU,MAAM;AACZ,iBAAO,KAAK;AAAA,QAChB;AAAA,MACJ;AAAA,IACJ;AAEA,SAAU,UAGN;AAAA,MACA,mBAAmB,CAAC,UAAmB;AACnC,aAAK,wBAAwB;AAC7B,eAAO;AAAA,MACX;AAAA,MACA,sBAAsB,MAAM;AACxB,eAAO,KAAK;AAAA,MAChB;AAAA,IACJ;AAEA,SAAU,SAGN;AAAA,MACA,MAAM,CAAC,UAAkB;AACrB,aAAK,cAAc;AACnB,eAAO;AAAA,MACX;AAAA,MACA,SAAS,MAAM;AACX,eAAO,KAAK;AAAA,MAChB;AAAA,IACJ;AAAA;AACJ;;;ADhCA,IAAM;AAAA,EACF,SAAS;AACb,IAAI,cAAc;AAEX,IAAe,YAAf,cAAiC,kBAAkB;AAAA,EAC5C,OAAO,OAAgD;AAC7D,UAAM;AAAA,MACF,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,IAChB,IAAI;AAEJ,UAAM,YAAY,iBAAiB,IAAI,oCAAC,cAAQ,IAAK;AACrD,UAAM,aAAa,KAAK,IAAI,SAAS,IAAI,SAAY,oCAAC,iBAAW;AAEjE,WAAO;AAAA,MAAC;AAAA;AAAA,QACJ,QAAQ,oCAAC,aAAO;AAAA,QAChB;AAAA,QACA,OAAO,oCAAC,cAAQ;AAAA,QAChB,SAAS,oCAAC,gBAAU,MAAM,QAAS;AAAA,QACnC;AAAA,QACA,aAAY,6BAAM,OAAO,cAAwB;AAAA;AAAA,IACrD;AAAA,EACJ;AAAA;AAAA,EAGU,cAAc,OAAsC;AAC1D,QAAI,MAAM,UAAU;AAChB,aAAO,OAAO,MAAM,MAAM,QAAQ;AAAA,IACtC;AAAA,EACJ;AAAA,EAEU,SAAS;AACf,WAAO,0DACH,oCAAC,SAAM,MAAK,UAAQ,CACxB;AAAA,EACJ;AAAA,EAEU,UAAU;AAhExB;AAiEQ,WAAO;AAAA,MAAC;AAAA;AAAA,QAEJ,oBAAmB,kCAAM,YAAN,mBAAe;AAAA;AAAA,IACtC;AAAA,EACJ;AAAA,EAEU,QAAQ,EAAC,SAAQ,GAAkC;AACzD,WAAO,0DAIH,oCAAC,qBACI,QACL,GAEA,oCAAC,gBAAU,CACf;AAAA,EACJ;AAAA,EAEU,aAAa;AApF3B;AAqFQ,UAAM,OAAM,kCAAM,QAAN,mBAAW;AAEvB,QAAI,KAAK;AACL,aAAO;AAAA,IACX;AAEA,WAAO,oCAAC,WAAK;AAAA,EACjB;AACJ;;;AEvFO,SAAS,UAAuC,OAAkB;AACrE,SAAO,SAAS,mBAAmB,OAAsB;AACrD,WAAO,mBAAmB,KAAK,OAAO,KAAK;AAAA,EAC/C;AACJ;AAEA,SAAS,mBAEL,OACF;AACE,OAAK,cAAc,KAAK;AAExB,SAAO,KAAK,OAAO,KAAK;AAC5B;","names":[]}
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/*TODO: in the future not needed cuz every component would have have default styles itself?*/
|
|
2
|
+
|
|
3
|
+
body {
|
|
4
|
+
margin: 0;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
ol, ul, menu {
|
|
8
|
+
list-style: none;
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
|
|
14
|
+
-webkit-appearance: button;
|
|
15
|
+
background-color: transparent;
|
|
16
|
+
background-image: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
button, [role=button] {
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
button, select {
|
|
24
|
+
text-transform: none;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
button, input, optgroup, select, textarea {
|
|
28
|
+
font-family: inherit;
|
|
29
|
+
font-feature-settings: inherit;
|
|
30
|
+
font-variation-settings: inherit;
|
|
31
|
+
font-size: 100%;
|
|
32
|
+
font-weight: inherit;
|
|
33
|
+
line-height: inherit;
|
|
34
|
+
letter-spacing: inherit;
|
|
35
|
+
color: inherit;
|
|
36
|
+
margin: 0;
|
|
37
|
+
padding: 0;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
a {
|
|
41
|
+
color: inherit;
|
|
42
|
+
text-decoration: inherit;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
*, :before, :after {
|
|
46
|
+
box-sizing: border-box;
|
|
47
|
+
border-width: 0;
|
|
48
|
+
border-style: solid;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
p {
|
|
52
|
+
padding: 0;
|
|
53
|
+
margin: 0;
|
|
54
|
+
}
|
|
55
|
+
|
package/package.json
CHANGED
|
@@ -1,11 +1,32 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xyd-js/themes",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "
|
|
5
|
-
"main": "index.js",
|
|
6
|
-
"
|
|
7
|
-
"
|
|
3
|
+
"version": "0.1.1-xyd.2",
|
|
4
|
+
"description": "xyd themes API",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"exports": {
|
|
8
|
+
"./package.json": "./package.json",
|
|
9
|
+
"./reset.css": "./dist/tokens.css",
|
|
10
|
+
"./index.css": "./dist/index.css",
|
|
11
|
+
".": {
|
|
12
|
+
"import": "./dist/index.js"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"peerDependencies": {
|
|
16
|
+
"react": "^19.0.0",
|
|
17
|
+
"react-dom": "^19.0.0",
|
|
18
|
+
"@xyd-js/atlas": "0.1.0-xyd.15",
|
|
19
|
+
"@xyd-js/framework": "0.1.0-xyd.30",
|
|
20
|
+
"@xyd-js/ui": "0.1.0-xyd.15",
|
|
21
|
+
"@xyd-js/components": "0.1.0-xyd.10"
|
|
22
|
+
},
|
|
23
|
+
"devDependencies": {
|
|
24
|
+
"postcss": "^8.4.47",
|
|
25
|
+
"postcss-import": "^16.1.0",
|
|
26
|
+
"tsup": "^8.3.0",
|
|
27
|
+
"typescript": "5.6.2"
|
|
28
|
+
},
|
|
8
29
|
"scripts": {
|
|
9
|
-
"
|
|
30
|
+
"build": "tsup && node scripts/build-css.js"
|
|
10
31
|
}
|
|
11
32
|
}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import fs from 'fs/promises';
|
|
2
|
+
import path from 'path';
|
|
3
|
+
import { fileURLToPath } from 'url';
|
|
4
|
+
|
|
5
|
+
import postcss from 'postcss';
|
|
6
|
+
import postcssImport from 'postcss-import';
|
|
7
|
+
|
|
8
|
+
const __dirname = path.dirname(fileURLToPath(import.meta.url));
|
|
9
|
+
const workspaceRoot = path.join(__dirname, '../../..');
|
|
10
|
+
|
|
11
|
+
async function processCSS(inputFile, outputFile) {
|
|
12
|
+
const css = await fs.readFile(inputFile, 'utf8');
|
|
13
|
+
const result = await postcss([
|
|
14
|
+
postcssImport({
|
|
15
|
+
path: [
|
|
16
|
+
path.join(__dirname, '../src'),
|
|
17
|
+
path.join(workspaceRoot, 'packages'),
|
|
18
|
+
workspaceRoot
|
|
19
|
+
],
|
|
20
|
+
filter: (url) => {
|
|
21
|
+
// Handle package imports
|
|
22
|
+
if (url.startsWith('@xyd-js/')) {
|
|
23
|
+
const [scope, packageName, ...rest] = url.split('/');
|
|
24
|
+
// Look in dist directory for the CSS files
|
|
25
|
+
return path.join(workspaceRoot, 'packages', packageName, 'dist', ...rest);
|
|
26
|
+
}
|
|
27
|
+
return url;
|
|
28
|
+
}
|
|
29
|
+
})
|
|
30
|
+
]).process(css, {
|
|
31
|
+
from: inputFile,
|
|
32
|
+
to: outputFile,
|
|
33
|
+
config: path.join(__dirname, '../postcss.config.cjs')
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
await fs.writeFile(outputFile, result.css);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
async function main() {
|
|
40
|
+
const distDir = path.join(__dirname, '../dist');
|
|
41
|
+
await fs.mkdir(distDir, { recursive: true });
|
|
42
|
+
|
|
43
|
+
await processCSS(
|
|
44
|
+
path.join(__dirname, '../src/styles/index.css'),
|
|
45
|
+
path.join(distDir, 'index.css')
|
|
46
|
+
);
|
|
47
|
+
|
|
48
|
+
await processCSS(
|
|
49
|
+
path.join(__dirname, '../src/styles/reset.css'),
|
|
50
|
+
path.join(distDir, 'tokens.css')
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
main().catch(console.error);
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
|
|
3
|
+
import {
|
|
4
|
+
LayoutPrimary
|
|
5
|
+
} from "@xyd-js/components/layouts";
|
|
6
|
+
import {
|
|
7
|
+
helperContent
|
|
8
|
+
} from "@xyd-js/components/content"
|
|
9
|
+
import {
|
|
10
|
+
FwNav,
|
|
11
|
+
FwNavLinks,
|
|
12
|
+
FwToc,
|
|
13
|
+
FwSubNav,
|
|
14
|
+
FwSidebarGroups,
|
|
15
|
+
|
|
16
|
+
useMatchedSubNav
|
|
17
|
+
} from "@xyd-js/framework/react";
|
|
18
|
+
|
|
19
|
+
import {BaseThemeSettings} from "./settings";
|
|
20
|
+
import {ThemeProps} from "./types";
|
|
21
|
+
|
|
22
|
+
interface BaseThemeRenderProps {
|
|
23
|
+
children: React.ReactNode;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
const {
|
|
27
|
+
Content: HelperContent
|
|
28
|
+
} = helperContent()
|
|
29
|
+
|
|
30
|
+
export abstract class BaseTheme extends BaseThemeSettings {
|
|
31
|
+
protected render(props: BaseThemeRenderProps): React.JSX.Element {
|
|
32
|
+
const {
|
|
33
|
+
Navbar: $Navbar,
|
|
34
|
+
Sidebar: $Sidebar,
|
|
35
|
+
Content: $Content,
|
|
36
|
+
ContentNav: $ContentNav
|
|
37
|
+
} = this
|
|
38
|
+
|
|
39
|
+
const subheader = useMatchedSubNav() ? <FwSubNav/> : null
|
|
40
|
+
const contentNav = this.toc.isHidden() ? undefined : <$ContentNav/>
|
|
41
|
+
|
|
42
|
+
return <LayoutPrimary
|
|
43
|
+
header={<$Navbar/>}
|
|
44
|
+
subheader={subheader}
|
|
45
|
+
aside={<$Sidebar/>}
|
|
46
|
+
content={<$Content>{props.children}</$Content>}
|
|
47
|
+
contentNav={contentNav}
|
|
48
|
+
layoutSize={this?.layout.getSize() as "large" || undefined}
|
|
49
|
+
/>
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// TODO: it should be protected and passed via withTheme?
|
|
53
|
+
protected mergeSettings(props: ThemeProps<BaseThemeSettings>) {
|
|
54
|
+
if (props.settings) {
|
|
55
|
+
Object.assign(this, props.settings);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
protected Navbar() {
|
|
60
|
+
return <>
|
|
61
|
+
<FwNav kind="middle"/>
|
|
62
|
+
</>
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
protected Sidebar() {
|
|
66
|
+
return <FwSidebarGroups
|
|
67
|
+
// onePathBehaviour={this?.sidebar?.onePathBehaviour} TODO: finish
|
|
68
|
+
clientSideRouting={this?.sidebar?.getClientSideRouting()}
|
|
69
|
+
/>
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
protected Content({children}: { children: React.ReactNode }) {
|
|
73
|
+
return <>
|
|
74
|
+
{/*TODO: optional breadcrumbs*/}
|
|
75
|
+
{/*{props.breadcrumbs ? <FwBreadcrumbs/> : undefined}*/}
|
|
76
|
+
|
|
77
|
+
<HelperContent>
|
|
78
|
+
{children}
|
|
79
|
+
</HelperContent>
|
|
80
|
+
|
|
81
|
+
<FwNavLinks/>
|
|
82
|
+
</>
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
protected ContentNav() {
|
|
86
|
+
const toc = this?.toc?.get()
|
|
87
|
+
|
|
88
|
+
if (toc) {
|
|
89
|
+
return toc
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
return <FwToc/>
|
|
93
|
+
}
|
|
94
|
+
}
|
package/src/index.ts
ADDED
package/src/settings.ts
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
|
|
3
|
+
export abstract class BaseThemeSettings {
|
|
4
|
+
private _toc?: React.ReactNode = undefined;
|
|
5
|
+
private _tocHidden: boolean = false;
|
|
6
|
+
private _clientSidebarRouting: boolean = false;
|
|
7
|
+
private _layoutSize: string = "";
|
|
8
|
+
|
|
9
|
+
protected toc: {
|
|
10
|
+
(value: React.ReactElement): BaseThemeSettings;
|
|
11
|
+
get: () => React.ReactNode | undefined;
|
|
12
|
+
hide: () => BaseThemeSettings;
|
|
13
|
+
isHidden: () => boolean;
|
|
14
|
+
} = Object.assign(
|
|
15
|
+
(value: React.ReactElement) => {
|
|
16
|
+
this._toc = value;
|
|
17
|
+
return this;
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
get: () => {
|
|
21
|
+
return this._toc;
|
|
22
|
+
},
|
|
23
|
+
hide: () => {
|
|
24
|
+
this._tocHidden = true;
|
|
25
|
+
return this;
|
|
26
|
+
},
|
|
27
|
+
isHidden: () => {
|
|
28
|
+
return this._tocHidden;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
);
|
|
32
|
+
|
|
33
|
+
protected sidebar: {
|
|
34
|
+
clientSideRouting: (value: boolean) => BaseThemeSettings;
|
|
35
|
+
getClientSideRouting: () => boolean
|
|
36
|
+
} = {
|
|
37
|
+
clientSideRouting: (value: boolean) => { // TODO: deprecate?
|
|
38
|
+
this._clientSidebarRouting = value;
|
|
39
|
+
return this;
|
|
40
|
+
},
|
|
41
|
+
getClientSideRouting: () => {
|
|
42
|
+
return this._clientSidebarRouting;
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
protected layout: {
|
|
47
|
+
size: (value: string) => BaseThemeSettings;
|
|
48
|
+
getSize: () => string;
|
|
49
|
+
} = {
|
|
50
|
+
size: (value: string) => {
|
|
51
|
+
this._layoutSize = value;
|
|
52
|
+
return this;
|
|
53
|
+
},
|
|
54
|
+
getSize: () => {
|
|
55
|
+
return this._layoutSize;
|
|
56
|
+
}
|
|
57
|
+
};
|
|
58
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/*TODO: in the future not needed cuz every component would have have default styles itself?*/
|
|
2
|
+
|
|
3
|
+
body {
|
|
4
|
+
margin: 0;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
ol, ul, menu {
|
|
8
|
+
list-style: none;
|
|
9
|
+
margin: 0;
|
|
10
|
+
padding: 0;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
|
|
14
|
+
-webkit-appearance: button;
|
|
15
|
+
background-color: transparent;
|
|
16
|
+
background-image: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
button, [role=button] {
|
|
20
|
+
cursor: pointer;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
button, select {
|
|
24
|
+
text-transform: none;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
button, input, optgroup, select, textarea {
|
|
28
|
+
font-family: inherit;
|
|
29
|
+
font-feature-settings: inherit;
|
|
30
|
+
font-variation-settings: inherit;
|
|
31
|
+
font-size: 100%;
|
|
32
|
+
font-weight: inherit;
|
|
33
|
+
line-height: inherit;
|
|
34
|
+
letter-spacing: inherit;
|
|
35
|
+
color: inherit;
|
|
36
|
+
margin: 0;
|
|
37
|
+
padding: 0;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
a {
|
|
41
|
+
color: inherit;
|
|
42
|
+
text-decoration: inherit;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
*, :before, :after {
|
|
46
|
+
box-sizing: border-box;
|
|
47
|
+
border-width: 0;
|
|
48
|
+
border-style: solid;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
p {
|
|
52
|
+
padding: 0;
|
|
53
|
+
margin: 0;
|
|
54
|
+
}
|
|
55
|
+
|
package/src/types.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
import {type ThemeProps} from "./types";
|
|
4
|
+
import {BaseThemeSettings} from "./settings";
|
|
5
|
+
import {BaseTheme} from "./BaseTheme";
|
|
6
|
+
|
|
7
|
+
export function withTheme<T extends BaseThemeSettings>(theme: BaseTheme) {
|
|
8
|
+
return function WithThemeComponent(props: ThemeProps<T>) {
|
|
9
|
+
return withThemeComponent.call(theme, props);
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
function withThemeComponent<T extends BaseThemeSettings>(
|
|
14
|
+
this: BaseTheme,
|
|
15
|
+
props: ThemeProps<T>
|
|
16
|
+
) {
|
|
17
|
+
this.mergeSettings(props); // TODO: is it ok to do this on this level?
|
|
18
|
+
|
|
19
|
+
return this.render(props);
|
|
20
|
+
}
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"module": "esnext",
|
|
4
|
+
"esModuleInterop": true,
|
|
5
|
+
"moduleResolution": "bundler",
|
|
6
|
+
"target": "ES6",
|
|
7
|
+
"lib": [
|
|
8
|
+
"dom",
|
|
9
|
+
"dom.iterable",
|
|
10
|
+
"esnext"
|
|
11
|
+
],
|
|
12
|
+
"allowJs": true,
|
|
13
|
+
"skipLibCheck": true,
|
|
14
|
+
"strict": false,
|
|
15
|
+
"noEmit": true,
|
|
16
|
+
"incremental": false,
|
|
17
|
+
"resolveJsonModule": true,
|
|
18
|
+
"isolatedModules": true,
|
|
19
|
+
"jsx": "preserve",
|
|
20
|
+
"plugins": [
|
|
21
|
+
{
|
|
22
|
+
"name": "next"
|
|
23
|
+
}
|
|
24
|
+
],
|
|
25
|
+
"strictNullChecks": true
|
|
26
|
+
},
|
|
27
|
+
"include": [
|
|
28
|
+
"src/**/*.ts",
|
|
29
|
+
"src/**/*.tsx"
|
|
30
|
+
],
|
|
31
|
+
"exclude": [
|
|
32
|
+
"node_modules"
|
|
33
|
+
]
|
|
34
|
+
}
|
package/tsup.config.ts
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { defineConfig } from 'tsup';
|
|
2
|
+
|
|
3
|
+
export default defineConfig({
|
|
4
|
+
entry: {
|
|
5
|
+
index: 'src/index.ts'
|
|
6
|
+
},
|
|
7
|
+
format: ['esm'],
|
|
8
|
+
target: 'node16',
|
|
9
|
+
dts: {
|
|
10
|
+
entry: {
|
|
11
|
+
index: 'src/index.ts'
|
|
12
|
+
},
|
|
13
|
+
resolve: true,
|
|
14
|
+
},
|
|
15
|
+
splitting: false,
|
|
16
|
+
sourcemap: true,
|
|
17
|
+
clean: true,
|
|
18
|
+
esbuildOptions: (options) => {
|
|
19
|
+
options.platform = 'node';
|
|
20
|
+
options.external = ['node:fs/promises', 'react-router'];
|
|
21
|
+
options.loader = { '.js': 'jsx' };
|
|
22
|
+
},
|
|
23
|
+
ignoreWatch: ['node_modules', 'dist', '.git', 'build']
|
|
24
|
+
});
|