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