@vueless/storybook 0.0.42 → 0.0.44
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/.storybook/index.css +55 -21
- package/.storybook/manager-head.html +83 -1
- package/.storybook/manager.js +14 -3
- package/.storybook/preview-head.html +1 -0
- package/.storybook/preview.js +0 -1
- package/package.json +1 -1
package/.storybook/index.css
CHANGED
|
@@ -11,8 +11,48 @@ body {
|
|
|
11
11
|
font-family: Roboto, sans-serif;
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
.
|
|
15
|
-
|
|
14
|
+
.light .sbdocs .sbdocs-content > h1,
|
|
15
|
+
.light .sbdocs .sbdocs-content > h2,
|
|
16
|
+
.light .sbdocs .sbdocs-content > h3,
|
|
17
|
+
.light .sbdocs .sbdocs-content > .sb-anchor > h3,
|
|
18
|
+
.light .sbdocs .sbdocs-content > p,
|
|
19
|
+
.light .sbdocs .sbdocs-content > table th,
|
|
20
|
+
.light .sbdocs .sbdocs-content > table td {
|
|
21
|
+
@apply !text-gray-900;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.dark .sbdocs .sbdocs-content > h1,
|
|
25
|
+
.dark .sbdocs .sbdocs-content > h2,
|
|
26
|
+
.dark .sbdocs .sbdocs-content > h3,
|
|
27
|
+
.dark .sbdocs .sbdocs-content > .sb-anchor > h3,
|
|
28
|
+
.dark .sbdocs .sbdocs-content > p,
|
|
29
|
+
.dark .sbdocs .sbdocs-content > table th,
|
|
30
|
+
.dark .sbdocs .sbdocs-content > table td {
|
|
31
|
+
@apply !text-gray-200;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.light .sbdocs .sbdocs-content > table th {
|
|
35
|
+
@apply bg-gray-100 border-gray-200 text-left;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.light .sbdocs .sbdocs-content > table td {
|
|
39
|
+
@apply bg-white border-gray-200;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.light .sbdocs .sbdocs-content > table {
|
|
43
|
+
@apply rounded-lg outline outline-1 outline-gray-200 overflow-hidden;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.dark .sbdocs .sbdocs-content > table th {
|
|
47
|
+
@apply bg-gray-800 border-gray-700 text-left;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.dark .sbdocs .sbdocs-content > table td {
|
|
51
|
+
@apply bg-gray-900 border-gray-700;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.dark .sbdocs .sbdocs-content > table {
|
|
55
|
+
@apply rounded-lg outline outline-1 outline-gray-700 overflow-hidden;
|
|
16
56
|
}
|
|
17
57
|
|
|
18
58
|
/* -------------------- All docs block -------------------- */
|
|
@@ -110,8 +150,19 @@ body {
|
|
|
110
150
|
@apply !text-gray-400;
|
|
111
151
|
}
|
|
112
152
|
|
|
153
|
+
.light .sbdocs .sbdocs-content code,
|
|
154
|
+
.light .docblock-argstable-body tr > td > div + div > span[class],
|
|
155
|
+
.light .docblock-argstable-body tr > td > div + div > div > span,
|
|
156
|
+
.light .docblock-argstable-body tr > td:nth-child(2) > div > div > span[class],
|
|
157
|
+
.light .docblock-argstable-body tr > td:nth-child(3) > div > span[class],
|
|
158
|
+
.light .docblock-argstable-body tr > td:nth-child(3) > span[class] {
|
|
159
|
+
@apply bg-gray-100 border-gray-200 text-gray-800;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.dark .sbdocs .sbdocs-content code,
|
|
113
163
|
.dark .docblock-argstable-body tr > td > div + div > span[class],
|
|
114
164
|
.dark .docblock-argstable-body tr > td > div + div > div > span,
|
|
165
|
+
.dark .docblock-argstable-body tr > td:nth-child(2) > div > div > span[class],
|
|
115
166
|
.dark .docblock-argstable-body tr > td:nth-child(3) > div > span[class],
|
|
116
167
|
.dark .docblock-argstable-body tr > td:nth-child(3) > span[class] {
|
|
117
168
|
@apply bg-gray-800 border-gray-700/50 text-gray-400;
|
|
@@ -121,6 +172,7 @@ body {
|
|
|
121
172
|
@apply text-gray-400;
|
|
122
173
|
}
|
|
123
174
|
|
|
175
|
+
.dark .docblock-argstable-body tr > td input,
|
|
124
176
|
.dark .docblock-argstable-body tr > td textarea,
|
|
125
177
|
.dark .docblock-argstable-body tr > td select,
|
|
126
178
|
.dark .docblock-argstable-body tr > td:nth-child(4) button {
|
|
@@ -128,6 +180,7 @@ body {
|
|
|
128
180
|
box-shadow: none !important;
|
|
129
181
|
}
|
|
130
182
|
|
|
183
|
+
.light .docblock-argstable-body tr > td input,
|
|
131
184
|
.light .docblock-argstable-body tr > td textarea,
|
|
132
185
|
.light .docblock-argstable-body tr > td select,
|
|
133
186
|
.light .docblock-argstable-body tr > td:nth-child(4) button {
|
|
@@ -166,10 +219,6 @@ body {
|
|
|
166
219
|
@apply border-b-gray-800;
|
|
167
220
|
}
|
|
168
221
|
|
|
169
|
-
.sbdocs-title + p code {
|
|
170
|
-
@apply bg-white;
|
|
171
|
-
}
|
|
172
|
-
|
|
173
222
|
.docblock-source {
|
|
174
223
|
@apply !bg-gray-800 border-gray-800 !rounded-lg;
|
|
175
224
|
box-shadow: none !important;
|
|
@@ -183,21 +232,6 @@ body {
|
|
|
183
232
|
@apply bg-gray-800 border-gray-800 text-gray-400 rounded-tl-none;
|
|
184
233
|
}
|
|
185
234
|
|
|
186
|
-
.markdown code {
|
|
187
|
-
background-color: #f3f4f6 !important;
|
|
188
|
-
border-color: #d1d5db !important;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
.markdown .sbdocs-a {
|
|
192
|
-
border-bottom: dashed 1px #4b5563;
|
|
193
|
-
color: #4b5563;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
.markdown .sbdocs-a:hover {
|
|
197
|
-
border-bottom: none;
|
|
198
|
-
color: #4b5563;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
235
|
/* -------------------- Storybook story preview -------------------- */
|
|
202
236
|
|
|
203
237
|
.vl-dark {
|
|
@@ -5,8 +5,78 @@ Overrides content of storybook layout HTML page <head> tag,
|
|
|
5
5
|
<link rel="shortcut icon" href="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/favicons/favicon.ico">
|
|
6
6
|
<link rel="icon" type="image/svg+xml" href="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/favicons/favicon.svg" />
|
|
7
7
|
|
|
8
|
-
<!--
|
|
8
|
+
<!--
|
|
9
|
+
Custom dark mode related vueless loader.
|
|
10
|
+
-->
|
|
11
|
+
<div id="sb-vueless-loader">
|
|
12
|
+
<img
|
|
13
|
+
class="sb-vueless-loader-img-dark"
|
|
14
|
+
src="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/vueless-logo-dark.svg"
|
|
15
|
+
alt="Vueless UI"
|
|
16
|
+
width="250" />
|
|
17
|
+
|
|
18
|
+
<img
|
|
19
|
+
class="sb-vueless-loader-img-light"
|
|
20
|
+
src="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/vueless-logo-light.svg"
|
|
21
|
+
alt="Vueless UI"
|
|
22
|
+
width="250" />
|
|
23
|
+
</div>
|
|
24
|
+
|
|
9
25
|
<style>
|
|
26
|
+
/* -------------------- Prevent showing users default storybook theme styles -------------------- */
|
|
27
|
+
|
|
28
|
+
body.dark {
|
|
29
|
+
background: #111827;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
#root {
|
|
33
|
+
visibility: hidden;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
#sb-vueless-loader {
|
|
37
|
+
top: 0;
|
|
38
|
+
left: 0;
|
|
39
|
+
display: flex;
|
|
40
|
+
align-items: center;
|
|
41
|
+
justify-content: center;
|
|
42
|
+
position: fixed;
|
|
43
|
+
background: inherit;
|
|
44
|
+
width: 100%;
|
|
45
|
+
height: 100%;
|
|
46
|
+
z-index: 999;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.light #sb-vueless-loader {
|
|
50
|
+
background: #f1f5f9;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.dark #sb-vueless-loader {
|
|
54
|
+
background: #111827;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.sb-vueless-loader-img-dark,
|
|
58
|
+
.sb-vueless-loader-img-light {
|
|
59
|
+
display: none;
|
|
60
|
+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.light .sb-vueless-loader-img-light {
|
|
64
|
+
display: block;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.dark .sb-vueless-loader-img-dark {
|
|
68
|
+
display: block;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
@keyframes pulse {
|
|
72
|
+
0%, 100% {
|
|
73
|
+
opacity: 1;
|
|
74
|
+
}
|
|
75
|
+
50% {
|
|
76
|
+
opacity: .5;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
10
80
|
/* -------------------- Storybook config tooltip -------------------- */
|
|
11
81
|
|
|
12
82
|
div[data-testid="tooltip"] {
|
|
@@ -64,3 +134,15 @@ Overrides content of storybook layout HTML page <head> tag,
|
|
|
64
134
|
background: white;
|
|
65
135
|
}
|
|
66
136
|
</style>
|
|
137
|
+
|
|
138
|
+
<script>
|
|
139
|
+
/* This trick prevents showing users default storybook theme */
|
|
140
|
+
(() => {
|
|
141
|
+
window.onload = function() {
|
|
142
|
+
setTimeout(() => {
|
|
143
|
+
document.getElementById("root").style.visibility = 'visible';
|
|
144
|
+
document.getElementById("sb-vueless-loader").style.display = 'none';
|
|
145
|
+
}, 1000);
|
|
146
|
+
};
|
|
147
|
+
})();
|
|
148
|
+
</script>
|
package/.storybook/manager.js
CHANGED
|
@@ -1,7 +1,18 @@
|
|
|
1
1
|
import { addons } from "@storybook/manager-api";
|
|
2
2
|
import themeLight from "./themes/themeLight.js";
|
|
3
|
+
import themeDark from "./themes/themeDark.js";
|
|
3
4
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
|
|
6
|
+
|
|
7
|
+
function setSystemTheme(theme) {
|
|
8
|
+
addons.setConfig({
|
|
9
|
+
theme: theme ? themeDark : themeLight,
|
|
10
|
+
panelPosition: "right",
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
setSystemTheme(prefersDarkScheme.matches);
|
|
15
|
+
|
|
16
|
+
prefersDarkScheme.addEventListener("change", (event) => {
|
|
17
|
+
setSystemTheme(event.matches);
|
|
7
18
|
});
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Overrides content of preview IFRAME HTML page's <head> tag,
|
|
3
3
|
affecting rendered component(s) below Canvas and Docs tabs.
|
|
4
4
|
-->
|
|
5
|
+
|
|
5
6
|
<!-- Fonts overriding -->
|
|
6
7
|
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
|
|
7
8
|
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
|
package/.storybook/preview.js
CHANGED