@vueless/storybook 0.0.41 → 0.0.43
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
CHANGED
|
@@ -11,8 +11,46 @@ 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 > p,
|
|
18
|
+
.light .sbdocs .sbdocs-content > table th,
|
|
19
|
+
.light .sbdocs .sbdocs-content > table td {
|
|
20
|
+
@apply !text-gray-900;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.dark .sbdocs .sbdocs-content > h1,
|
|
24
|
+
.dark .sbdocs .sbdocs-content > h2,
|
|
25
|
+
.dark .sbdocs .sbdocs-content > h3,
|
|
26
|
+
.dark .sbdocs .sbdocs-content > p,
|
|
27
|
+
.dark .sbdocs .sbdocs-content > table th,
|
|
28
|
+
.dark .sbdocs .sbdocs-content > table td {
|
|
29
|
+
@apply !text-gray-200;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.light .sbdocs .sbdocs-content > table th {
|
|
33
|
+
@apply bg-gray-100 border-gray-200 text-left;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.light .sbdocs .sbdocs-content > table td {
|
|
37
|
+
@apply bg-white border-gray-200;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.light .sbdocs .sbdocs-content > table {
|
|
41
|
+
@apply rounded-lg outline outline-1 outline-gray-200 overflow-hidden;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.dark .sbdocs .sbdocs-content > table th {
|
|
45
|
+
@apply bg-gray-800 border-gray-700 text-left;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.dark .sbdocs .sbdocs-content > table td {
|
|
49
|
+
@apply bg-gray-900 border-gray-700;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.dark .sbdocs .sbdocs-content > table {
|
|
53
|
+
@apply rounded-lg outline outline-1 outline-gray-700 overflow-hidden;
|
|
16
54
|
}
|
|
17
55
|
|
|
18
56
|
/* -------------------- All docs block -------------------- */
|
|
@@ -110,13 +148,29 @@ body {
|
|
|
110
148
|
@apply !text-gray-400;
|
|
111
149
|
}
|
|
112
150
|
|
|
113
|
-
.
|
|
151
|
+
.light .sbdocs .sbdocs-content code,
|
|
152
|
+
.light .docblock-argstable-body tr > td > div + div > span[class],
|
|
153
|
+
.light .docblock-argstable-body tr > td > div + div > div > span,
|
|
154
|
+
.light .docblock-argstable-body tr > td:nth-child(2) > div > div > span[class],
|
|
155
|
+
.light .docblock-argstable-body tr > td:nth-child(3) > div > span[class],
|
|
156
|
+
.light .docblock-argstable-body tr > td:nth-child(3) > span[class] {
|
|
157
|
+
@apply bg-gray-100 border-gray-200 text-gray-800;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.dark .sbdocs .sbdocs-content code,
|
|
161
|
+
.dark .docblock-argstable-body tr > td > div + div > span[class],
|
|
114
162
|
.dark .docblock-argstable-body tr > td > div + div > div > span,
|
|
163
|
+
.dark .docblock-argstable-body tr > td:nth-child(2) > div > div > span[class],
|
|
115
164
|
.dark .docblock-argstable-body tr > td:nth-child(3) > div > span[class],
|
|
116
165
|
.dark .docblock-argstable-body tr > td:nth-child(3) > span[class] {
|
|
117
166
|
@apply bg-gray-800 border-gray-700/50 text-gray-400;
|
|
118
167
|
}
|
|
119
168
|
|
|
169
|
+
.dark .docblock-argstable-body tr > td > div + div > span:not([class]) {
|
|
170
|
+
@apply text-gray-400;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.dark .docblock-argstable-body tr > td input,
|
|
120
174
|
.dark .docblock-argstable-body tr > td textarea,
|
|
121
175
|
.dark .docblock-argstable-body tr > td select,
|
|
122
176
|
.dark .docblock-argstable-body tr > td:nth-child(4) button {
|
|
@@ -124,6 +178,7 @@ body {
|
|
|
124
178
|
box-shadow: none !important;
|
|
125
179
|
}
|
|
126
180
|
|
|
181
|
+
.light .docblock-argstable-body tr > td input,
|
|
127
182
|
.light .docblock-argstable-body tr > td textarea,
|
|
128
183
|
.light .docblock-argstable-body tr > td select,
|
|
129
184
|
.light .docblock-argstable-body tr > td:nth-child(4) button {
|
|
@@ -162,10 +217,6 @@ body {
|
|
|
162
217
|
@apply border-b-gray-800;
|
|
163
218
|
}
|
|
164
219
|
|
|
165
|
-
.sbdocs-title + p code {
|
|
166
|
-
@apply bg-white;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
220
|
.docblock-source {
|
|
170
221
|
@apply !bg-gray-800 border-gray-800 !rounded-lg;
|
|
171
222
|
box-shadow: none !important;
|
|
@@ -179,21 +230,6 @@ body {
|
|
|
179
230
|
@apply bg-gray-800 border-gray-800 text-gray-400 rounded-tl-none;
|
|
180
231
|
}
|
|
181
232
|
|
|
182
|
-
.markdown code {
|
|
183
|
-
background-color: #f3f4f6 !important;
|
|
184
|
-
border-color: #d1d5db !important;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
.markdown .sbdocs-a {
|
|
188
|
-
border-bottom: dashed 1px #4b5563;
|
|
189
|
-
color: #4b5563;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
.markdown .sbdocs-a:hover {
|
|
193
|
-
border-bottom: none;
|
|
194
|
-
color: #4b5563;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
233
|
/* -------------------- Storybook story preview -------------------- */
|
|
198
234
|
|
|
199
235
|
.vl-dark {
|
|
@@ -5,8 +5,13 @@ 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
|
-
<!-- Styles overriding -->
|
|
9
8
|
<style>
|
|
9
|
+
/* -------------------- Prevent showing users default storybook theme styles -------------------- */
|
|
10
|
+
|
|
11
|
+
body {
|
|
12
|
+
visibility: hidden;
|
|
13
|
+
}
|
|
14
|
+
|
|
10
15
|
/* -------------------- Storybook config tooltip -------------------- */
|
|
11
16
|
|
|
12
17
|
div[data-testid="tooltip"] {
|
|
@@ -64,3 +69,19 @@ Overrides content of storybook layout HTML page <head> tag,
|
|
|
64
69
|
background: white;
|
|
65
70
|
}
|
|
66
71
|
</style>
|
|
72
|
+
|
|
73
|
+
<script>
|
|
74
|
+
/* This trick prevents showing users default storybook theme */
|
|
75
|
+
(() => {
|
|
76
|
+
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
77
|
+
const theme = prefersDarkScheme ? 'dark' : 'light';
|
|
78
|
+
|
|
79
|
+
document.documentElement.classList.add(theme);
|
|
80
|
+
|
|
81
|
+
window.onload = function() {
|
|
82
|
+
setTimeout(() => {
|
|
83
|
+
document.body.style.visibility = 'visible';
|
|
84
|
+
}, 500);
|
|
85
|
+
};
|
|
86
|
+
})();
|
|
87
|
+
</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