@vueless/storybook 1.3.2-beta.1 → 1.3.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/index.browser.js +4 -0
- package/index.d.ts +4 -0
- package/index.js +3 -0
- package/package.json +1 -5
- package/theme/manager.css +78 -83
- package/theme/preview.css +2 -19
- package/themes.d.ts +0 -4
- package/themes.js +0 -3
package/index.browser.js
CHANGED
|
@@ -1,2 +1,6 @@
|
|
|
1
|
+
export { getThemeDark } from "./theme/getThemeDark.js";
|
|
2
|
+
export { getThemeLight } from "./theme/getThemeLight.js";
|
|
3
|
+
export { getThemeLightPreview } from "./theme/getThemeLightPreview.js";
|
|
4
|
+
|
|
1
5
|
export { vue3SourceDecorator } from "./decorators/vue3SourceDecorator.js";
|
|
2
6
|
export { storyDarkModeDecorator } from "./decorators/storyDarkModeDecorator.js";
|
package/index.d.ts
CHANGED
|
@@ -3,3 +3,7 @@ export declare function getVuelessStoriesGlob(vuelessEnv?: string): Promise<stri
|
|
|
3
3
|
|
|
4
4
|
export { vue3SourceDecorator } from "./decorators/vue3SourceDecorator.js";
|
|
5
5
|
export { storyDarkModeDecorator } from "./decorators/storyDarkModeDecorator.js";
|
|
6
|
+
|
|
7
|
+
export { getThemeDark } from "./theme/getThemeDark.js";
|
|
8
|
+
export { getThemeLight } from "./theme/getThemeLight.js";
|
|
9
|
+
export { getThemeLightPreview } from "./theme/getThemeLightPreview.js";
|
package/index.js
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
1
|
export { buildWebTypes } from "./webTypes/index.js";
|
|
2
|
+
export { getThemeDark } from "./theme/getThemeDark.js";
|
|
3
|
+
export { getThemeLight } from "./theme/getThemeLight.js";
|
|
4
|
+
export { getThemeLightPreview } from "./theme/getThemeLightPreview.js";
|
|
2
5
|
|
|
3
6
|
import { getVuelessConfig } from "vueless/utils/node/vuelessConfig.js";
|
|
4
7
|
import {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vueless/storybook",
|
|
3
|
-
"version": "1.3.2
|
|
3
|
+
"version": "1.3.2",
|
|
4
4
|
"description": "Simplifies Storybook configuration for Vueless UI library.",
|
|
5
5
|
"author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
|
|
6
6
|
"homepage": "https://vueless.com",
|
|
@@ -67,10 +67,6 @@
|
|
|
67
67
|
"types": "./index.d.ts",
|
|
68
68
|
"browser": "./index.browser.js"
|
|
69
69
|
},
|
|
70
|
-
"./themes": {
|
|
71
|
-
"types": "./themes.d.ts",
|
|
72
|
-
"default": "./themes.js"
|
|
73
|
-
},
|
|
74
70
|
"./manager.css": "./theme/manager.css",
|
|
75
71
|
"./preview.css": "./theme/preview.css"
|
|
76
72
|
},
|
package/theme/manager.css
CHANGED
|
@@ -1,42 +1,77 @@
|
|
|
1
|
-
/* -------------------- Storybook
|
|
1
|
+
/* -------------------- Storybook config tooltip -------------------- */
|
|
2
|
+
|
|
3
|
+
div[data-testid="tooltip"] {
|
|
4
|
+
border-radius: var(--rounded-lg);
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
}
|
|
2
7
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
8
|
+
div[data-testid="tooltip"] a[id]:hover,
|
|
9
|
+
div[data-testid="tooltip"] button[id]:hover {
|
|
10
|
+
background-color: var(--neutral-100) !important;
|
|
6
11
|
}
|
|
7
12
|
|
|
8
|
-
|
|
9
|
-
border-radius: var(--rounded-
|
|
13
|
+
div[data-testid="tooltip"] button {
|
|
14
|
+
border-radius: var(--rounded-sm);
|
|
10
15
|
}
|
|
11
16
|
|
|
12
|
-
.dark
|
|
13
|
-
.dark
|
|
14
|
-
|
|
17
|
+
.dark div[data-testid="tooltip"] a[id]:hover,
|
|
18
|
+
.dark div[data-testid="tooltip"] button[id]:hover {
|
|
19
|
+
background-color: var(--neutral-900) !important;
|
|
15
20
|
}
|
|
16
21
|
|
|
17
|
-
.
|
|
18
|
-
|
|
19
|
-
|
|
22
|
+
.dark div[data-testid="tooltip"] > div {
|
|
23
|
+
background: var(--neutral-900);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.dark div[data-testid="tooltip"] span {
|
|
27
|
+
color: var(--neutral-300);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.dark div[data-testid="context-menu"] > button {
|
|
31
|
+
color: var(--neutral-100);
|
|
32
|
+
background: var(--neutral-900);
|
|
33
|
+
box-shadow: none;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.dark div[data-testid="context-menu"] > button:hover {
|
|
37
|
+
background: var(--neutral-800);
|
|
38
|
+
box-shadow: none;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.light div[data-testid="tooltip"] > div {
|
|
42
|
+
background: var(--neutral-100);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.light div[data-testid="context-menu"] > button {
|
|
46
|
+
background: var(--neutral-200);
|
|
47
|
+
box-shadow: none;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.light div[data-testid="context-menu"] > button:hover {
|
|
51
|
+
background: var(--neutral-300);
|
|
52
|
+
box-shadow: none;
|
|
20
53
|
}
|
|
21
54
|
|
|
55
|
+
/* -------------------- Storybook sidebar -------------------- */
|
|
56
|
+
|
|
22
57
|
.dark .sidebar-container {
|
|
23
|
-
|
|
58
|
+
background: var(--neutral-950);
|
|
24
59
|
}
|
|
25
60
|
|
|
26
61
|
.sidebar-header img {
|
|
27
|
-
|
|
62
|
+
width: 150px;
|
|
28
63
|
}
|
|
29
64
|
|
|
30
65
|
.sidebar-header a:focus {
|
|
31
|
-
|
|
66
|
+
border: 1px solid transparent;
|
|
32
67
|
}
|
|
33
68
|
|
|
34
69
|
.sidebar-item {
|
|
35
|
-
|
|
70
|
+
border-radius: var(--rounded-md) !important;
|
|
36
71
|
}
|
|
37
72
|
|
|
38
73
|
.dark .sidebar-item:hover {
|
|
39
|
-
|
|
74
|
+
background: var(--neutral-900) !important;
|
|
40
75
|
}
|
|
41
76
|
|
|
42
77
|
.light .sidebar-item:hover {
|
|
@@ -51,57 +86,45 @@
|
|
|
51
86
|
|
|
52
87
|
.dark .sidebar-item[data-selected="true"],
|
|
53
88
|
.dark .sidebar-item[data-selected="true"]:hover {
|
|
54
|
-
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
button[data-testid="context-menu"] {
|
|
58
|
-
box-shadow: none !important;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
.dark button[data-testid="context-menu"] {
|
|
62
|
-
background: var(--neutral-900);
|
|
89
|
+
background: var(--neutral-800) !important;
|
|
63
90
|
}
|
|
64
91
|
|
|
65
|
-
.dark
|
|
92
|
+
.dark div[data-selected="true"] div[data-testid="context-menu"] > button {
|
|
66
93
|
background: var(--neutral-800);
|
|
67
94
|
}
|
|
68
95
|
|
|
69
|
-
.dark div[data-selected="true"]
|
|
70
|
-
background: var(--neutral-800);
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.dark div[data-selected="true"] button[data-testid="context-menu"]:hover {
|
|
96
|
+
.dark div[data-selected="true"] div[data-testid="context-menu"] > button:hover {
|
|
74
97
|
background: var(--neutral-700);
|
|
75
98
|
}
|
|
76
99
|
|
|
77
|
-
.light div[data-selected="true"]
|
|
100
|
+
.light div[data-selected="true"] div[data-testid="context-menu"] > button > svg {
|
|
78
101
|
color: var(--neutral-800);
|
|
79
102
|
}
|
|
80
103
|
|
|
81
|
-
.light
|
|
104
|
+
.light div[data-testid="context-menu"] > button {
|
|
82
105
|
background: var(--neutral-100);
|
|
83
106
|
}
|
|
84
107
|
|
|
85
|
-
.light
|
|
108
|
+
.light div[data-testid="context-menu"] > button:hover {
|
|
86
109
|
background: var(--neutral-200);
|
|
87
110
|
}
|
|
88
111
|
|
|
89
|
-
.light div[data-selected="true"]
|
|
112
|
+
.light div[data-selected="true"] div[data-testid="context-menu"] > button {
|
|
90
113
|
background: var(--neutral-200);
|
|
91
114
|
}
|
|
92
115
|
|
|
93
|
-
.light div[data-selected="true"]
|
|
116
|
+
.light div[data-selected="true"] div[data-testid="context-menu"] > button:hover {
|
|
94
117
|
background: var(--neutral-300);
|
|
95
118
|
}
|
|
96
119
|
|
|
97
120
|
.search-field,
|
|
98
121
|
.search-result-item {
|
|
99
|
-
|
|
122
|
+
border-radius: var(--rounded-lg) !important;
|
|
100
123
|
}
|
|
101
124
|
|
|
102
125
|
.sidebar-item,
|
|
103
126
|
.search-result-item {
|
|
104
|
-
|
|
127
|
+
text-transform: capitalize;
|
|
105
128
|
}
|
|
106
129
|
|
|
107
130
|
.light .sidebar-item svg[type="document"],
|
|
@@ -109,8 +132,8 @@ button[data-testid="context-menu"] {
|
|
|
109
132
|
.light .search-result-item svg[type="document"],
|
|
110
133
|
.light .search-result-item svg[type="component"],
|
|
111
134
|
.dark .search-result-item mark {
|
|
112
|
-
|
|
113
|
-
|
|
135
|
+
color: var(--primary-500);
|
|
136
|
+
font-weight: 600;
|
|
114
137
|
}
|
|
115
138
|
|
|
116
139
|
.dark .sidebar-item svg[type="document"],
|
|
@@ -118,50 +141,32 @@ button[data-testid="context-menu"] {
|
|
|
118
141
|
.dark .search-result-item svg[type="document"],
|
|
119
142
|
.dark .search-result-item svg[type="component"],
|
|
120
143
|
.light .search-result-item mark {
|
|
121
|
-
|
|
122
|
-
|
|
144
|
+
color: var(--primary-600);
|
|
145
|
+
font-weight: 600;
|
|
123
146
|
}
|
|
124
147
|
|
|
125
148
|
.light .sidebar-item svg[type="story"],
|
|
126
149
|
.light .search-result-item svg[type="document"],
|
|
127
150
|
.light .search-result-item svg[type="story"] {
|
|
128
|
-
|
|
151
|
+
color: var(--neutral-400);
|
|
129
152
|
}
|
|
130
153
|
|
|
131
154
|
.dark .sidebar-item svg[type="story"],
|
|
132
155
|
.dark .search-result-item svg[type="document"],
|
|
133
156
|
.dark .search-result-item svg[type="story"] {
|
|
134
|
-
|
|
157
|
+
color: var(--neutral-600);
|
|
135
158
|
}
|
|
136
159
|
|
|
137
160
|
.light .search-result-item--label {
|
|
138
|
-
|
|
161
|
+
color: var(--neutral-500);
|
|
139
162
|
}
|
|
140
163
|
|
|
141
164
|
.dark .search-result-item--label {
|
|
142
|
-
|
|
165
|
+
color: var(--neutral-400);
|
|
143
166
|
}
|
|
144
167
|
|
|
145
168
|
#sidebar-bottom-wrapper {
|
|
146
|
-
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
.sidebar-header + div > div {
|
|
150
|
-
box-shadow: none !important;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
.sidebar-header + div,
|
|
154
|
-
#storybook-checklist-widget,
|
|
155
|
-
.sidebar-header + div > div:before {
|
|
156
|
-
border-radius: var(--rounded-lg);
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
.dark #storybook-checklist-widget {
|
|
160
|
-
background: var(--neutral-950);
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
.light #storybook-checklist-widget {
|
|
164
|
-
background: var(--white);
|
|
169
|
+
display: none;
|
|
165
170
|
}
|
|
166
171
|
|
|
167
172
|
/* -------------------- Storybook args -------------------- */
|
|
@@ -169,37 +174,27 @@ button[data-testid="context-menu"] {
|
|
|
169
174
|
.dark,
|
|
170
175
|
.dark #panel-tab-content div,
|
|
171
176
|
.dark .docblock-argstable-body > tr > td {
|
|
172
|
-
|
|
177
|
+
background: var(--neutral-950) !important;
|
|
173
178
|
}
|
|
174
179
|
|
|
175
180
|
.light,
|
|
176
181
|
.light #panel-tab-content div,
|
|
177
182
|
.light .docblock-argstable-body > tr > td {
|
|
178
|
-
|
|
183
|
+
background: var(--neutral-50) !important;
|
|
179
184
|
}
|
|
180
185
|
|
|
181
186
|
.dark .docblock-argstable-head > tr {
|
|
182
|
-
|
|
187
|
+
background: var(--neutral-800) !important;
|
|
183
188
|
}
|
|
184
189
|
|
|
185
190
|
.dark .docblock-argstable-body tr > td textarea,
|
|
186
191
|
.dark .docblock-argstable-body tr > td select,
|
|
187
192
|
.dark .docblock-argstable-body tr > td:last-child button:not([tabindex="-1"]) {
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
193
|
+
background: var(--neutral-900);
|
|
194
|
+
border: solid 1px var(--neutral-800);
|
|
195
|
+
box-shadow: none;
|
|
191
196
|
}
|
|
192
197
|
|
|
193
198
|
.light .docblock-argstable-body tr > td:last-child button:not([tabindex="-1"]) {
|
|
194
|
-
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
/* -------------------- Storybook content -------------------- */
|
|
198
|
-
|
|
199
|
-
.dark [role="tabpanel"] [data-radix-scroll-area-content] > div {
|
|
200
|
-
background: var(--neutral-950) !important;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
.light [role="tabpanel"] [data-radix-scroll-area-content] > div {
|
|
204
|
-
background: var(--white) !important;
|
|
199
|
+
background: var(--white);
|
|
205
200
|
}
|
package/theme/preview.css
CHANGED
|
@@ -345,26 +345,9 @@ html.vl-dark #storybook-root {
|
|
|
345
345
|
box-shadow: none !important;
|
|
346
346
|
}
|
|
347
347
|
|
|
348
|
-
.sbdocs.sbdocs-preview
|
|
349
|
-
|
|
350
|
-
}
|
|
351
|
-
|
|
352
|
-
/*.light .sbdocs.sbdocs-preview > div:first-child,*/
|
|
353
|
-
.vl-light .sbdocs.sbdocs-preview > [role="toolbar"] {
|
|
354
|
-
border-bottom: 1px solid var(--neutral-200) !important;
|
|
355
|
-
}
|
|
356
|
-
|
|
357
|
-
/*.dark .sbdocs.sbdocs-preview > div:first-child,*/
|
|
358
|
-
.vl-dark .sbdocs.sbdocs-preview > [role="toolbar"] {
|
|
359
|
-
border-bottom: 1px solid var(--neutral-800) !important;
|
|
360
|
-
}
|
|
361
|
-
|
|
362
|
-
/*.dark .sbdocs.sbdocs-preview,*/
|
|
363
|
-
/*.dark .sbdocs.sbdocs-preview > div,*/
|
|
364
|
-
.vl-dark .sbdocs.sbdocs-preview,
|
|
365
|
-
.vl-dark .sbdocs.sbdocs-preview > div {
|
|
348
|
+
.dark .sbdocs.sbdocs-preview,
|
|
349
|
+
.vl-dark .sbdocs.sbdocs-preview {
|
|
366
350
|
border-color: var(--neutral-800);
|
|
367
|
-
background: var(--neutral-900);
|
|
368
351
|
}
|
|
369
352
|
|
|
370
353
|
/* -------------------- Args table -------------------- */
|
package/themes.d.ts
DELETED
package/themes.js
DELETED