@vueless/storybook 0.0.39 → 0.0.40
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/decorators/storyDarkModeDecorator.js +11 -0
- package/.storybook/decorators/vue3SourceDecorator.js +1 -1
- package/.storybook/{index.pcss → index.css} +2 -0
- package/.storybook/main.js +2 -2
- package/.storybook/manager-head.html +56 -3
- package/.storybook/manager.js +1 -2
- package/.storybook/preview-head.html +156 -18
- package/.storybook/preview.js +39 -33
- package/.storybook/tailwind.storybook.config.js +12 -0
- package/.storybook/themes/themeDark.js +46 -0
- package/.storybook/themes/{vueless.theme.js → themeLight.js} +5 -5
- package/package.json +3 -2
- package/.storybook/configs/main.config.js +0 -20
- /package/.storybook/themes/{vueless.docs.theme.js → themeLightDocs.js} +0 -0
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { withThemeByDataAttribute } from "@storybook/addon-themes";
|
|
2
|
+
|
|
3
|
+
export const storyDarkModeDecorator = (darkClass, lightClass) =>
|
|
4
|
+
withThemeByDataAttribute({
|
|
5
|
+
attributeName: "class",
|
|
6
|
+
defaultTheme: "light",
|
|
7
|
+
themes: {
|
|
8
|
+
light: lightClass,
|
|
9
|
+
dark: darkClass,
|
|
10
|
+
},
|
|
11
|
+
});
|
package/.storybook/main.js
CHANGED
|
@@ -7,11 +7,11 @@ export default {
|
|
|
7
7
|
"../src/**/*.@(mdx)",
|
|
8
8
|
],
|
|
9
9
|
addons: [
|
|
10
|
-
"storybook-dark-mode",
|
|
11
10
|
"@storybook/addon-links",
|
|
12
|
-
"@storybook/addon-themes",
|
|
13
11
|
"@storybook/addon-essentials",
|
|
14
12
|
"@storybook/addon-interactions",
|
|
13
|
+
"storybook-dark-mode",
|
|
14
|
+
// "@storybook/addon-themes", TODO: uncomment when dark mode will be implemented to the components.
|
|
15
15
|
],
|
|
16
16
|
framework: {
|
|
17
17
|
name: "@storybook/vue3-vite",
|
|
@@ -7,7 +7,60 @@ Overrides content of storybook layout HTML page <head> tag,
|
|
|
7
7
|
|
|
8
8
|
<!-- Styles overriding -->
|
|
9
9
|
<style>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
/* -------------------- Storybook config tooltip -------------------- */
|
|
11
|
+
|
|
12
|
+
div[data-testid="tooltip"] {
|
|
13
|
+
border-radius: 8px;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
div[data-testid="tooltip"] a[id]:hover,
|
|
18
|
+
div[data-testid="tooltip"] button[id]:hover {
|
|
19
|
+
background-color: rgb(17 24 39 / 5%) !important;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.dark div[data-testid="tooltip"] a[id]:hover,
|
|
23
|
+
.dark div[data-testid="tooltip"] button[id]:hover {
|
|
24
|
+
background-color: rgb(255 255 255 / 5%) !important;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* -------------------- Storybook sidebar -------------------- */
|
|
28
|
+
|
|
29
|
+
.sidebar-header img {
|
|
30
|
+
width: 150px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.sidebar-header a:focus {
|
|
34
|
+
border: 1px solid transparent;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* -------------------- Storybook args -------------------- */
|
|
38
|
+
|
|
39
|
+
.dark,
|
|
40
|
+
.dark #panel-tab-content div,
|
|
41
|
+
.dark .docblock-argstable-body > tr > td {
|
|
42
|
+
background: #030712 !important;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.light,
|
|
46
|
+
.light #panel-tab-content div,
|
|
47
|
+
.light .docblock-argstable-body > tr > td {
|
|
48
|
+
background: #f9fafb !important;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.dark .docblock-argstable-head > tr {
|
|
52
|
+
background: #1e293b !important;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.dark .docblock-argstable-body tr > td textarea,
|
|
56
|
+
.dark .docblock-argstable-body tr > td select,
|
|
57
|
+
.dark .docblock-argstable-body tr > td:last-child button:not([tabindex="-1"]) {
|
|
58
|
+
background: #111827;
|
|
59
|
+
border: solid 1px #1f2937;
|
|
60
|
+
box-shadow: none;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.light .docblock-argstable-body tr > td:last-child button:not([tabindex="-1"]) {
|
|
64
|
+
background: white;
|
|
65
|
+
}
|
|
13
66
|
</style>
|
package/.storybook/manager.js
CHANGED
|
@@ -11,37 +11,146 @@ affecting rendered component(s) below Canvas and Docs tabs.
|
|
|
11
11
|
|
|
12
12
|
<!-- Styles overriding -->
|
|
13
13
|
<style>
|
|
14
|
+
/* -------------------- General -------------------- */
|
|
15
|
+
|
|
14
16
|
body {
|
|
15
17
|
font-family: Roboto, sans-serif;
|
|
16
18
|
}
|
|
17
19
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
.dark h1, .dark h2, .dark h3 {
|
|
21
|
+
@apply text-gray-200;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* -------------------- All docs block -------------------- */
|
|
25
|
+
|
|
26
|
+
.dark .sbdocs {
|
|
27
|
+
@apply bg-gray-950;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* -------------------- Main story -------------------- */
|
|
31
|
+
|
|
32
|
+
.sb-bar,
|
|
33
|
+
.docs-story {
|
|
34
|
+
@apply bg-white;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.vl-dark .sb-bar,
|
|
38
|
+
.vl-dark .docs-story {
|
|
39
|
+
@apply !bg-gray-900;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.sb-bar {
|
|
43
|
+
@apply border-0;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.dark .sb-bar,
|
|
47
|
+
.dark .docs-story {
|
|
48
|
+
@apply bg-gray-100;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.dark .sb-bar {
|
|
52
|
+
@apply border-b border-gray-300;
|
|
53
|
+
box-shadow: none !important;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.vl-dark .sb-bar {
|
|
57
|
+
@apply border-b border-gray-800;
|
|
58
|
+
box-shadow: none !important;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.sbdocs.sbdocs-preview .prismjs {
|
|
62
|
+
@apply border-t border-t-gray-700 bg-gray-800;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.vl-dark .docblock-code-toggle {
|
|
66
|
+
@apply bg-gray-800 border-gray-800 text-gray-400 rounded-tl-none;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.sbdocs-preview {
|
|
70
|
+
box-shadow: none !important;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.dark .sbdocs.sbdocs-preview,
|
|
74
|
+
.vl-dark .sbdocs.sbdocs-preview {
|
|
75
|
+
@apply border-gray-800;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* -------------------- Args table -------------------- */
|
|
79
|
+
|
|
80
|
+
.dark .docblock-argstable,
|
|
81
|
+
.dark .docblock-argstable-head th {
|
|
82
|
+
@apply !text-gray-200;
|
|
23
83
|
}
|
|
24
84
|
|
|
25
85
|
.docblock-argstable-body {
|
|
26
|
-
|
|
27
|
-
|
|
86
|
+
@apply rounded-lg !filter-none;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.docblock-argstable-body tr td {
|
|
90
|
+
@apply !rounded-none;
|
|
28
91
|
}
|
|
29
92
|
|
|
30
93
|
.docblock-argstable-body tr:not([title]) > td {
|
|
31
|
-
|
|
94
|
+
@apply !bg-white;
|
|
32
95
|
}
|
|
33
96
|
|
|
34
|
-
.docblock-argstable-body tr td {
|
|
35
|
-
border-
|
|
97
|
+
.dark .docblock-argstable-body tr > td {
|
|
98
|
+
@apply border-b border-solid !bg-gray-900 border-s-0 border-e-0 !border-t-gray-800;
|
|
99
|
+
border-block-end: none !important;
|
|
36
100
|
}
|
|
37
101
|
|
|
38
|
-
.
|
|
102
|
+
.dark .docblock-argstable-body tr > td:first-child,
|
|
103
|
+
.dark .docblock-argstable-body tr > td:last-child {
|
|
104
|
+
@apply !border-s-gray-800 !border-e-gray-800;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.dark .docblock-argstable-body {
|
|
108
|
+
@apply border border-b-gray-800;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.dark .docblock-argstable-body tr[title] > td {
|
|
112
|
+
@apply !bg-gray-800 !text-gray-400;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.dark .docblock-argstable-body tr[title] > td svg {
|
|
116
|
+
@apply !text-gray-400;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.dark .docblock-argstable-body tr > td > div + div > span,
|
|
120
|
+
.dark .docblock-argstable-body tr > td > div + div > div > span,
|
|
121
|
+
.dark .docblock-argstable-body tr > td:nth-child(3) > div > span[class],
|
|
122
|
+
.dark .docblock-argstable-body tr > td:nth-child(3) > span[class] {
|
|
123
|
+
@apply bg-gray-800 border-gray-700/50 text-gray-400;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.dark .docblock-argstable-body tr > td textarea,
|
|
127
|
+
.dark .docblock-argstable-body tr > td select,
|
|
128
|
+
.dark .docblock-argstable-body tr > td:nth-child(4) button {
|
|
129
|
+
@apply text-gray-200 bg-gray-800 border border-solid border-gray-700/50 hover:border-gray-600 focus:border-gray-500;
|
|
39
130
|
box-shadow: none !important;
|
|
40
131
|
}
|
|
41
132
|
|
|
42
|
-
.docblock-argstable
|
|
43
|
-
.docblock-argstable
|
|
44
|
-
|
|
133
|
+
.light .docblock-argstable-body tr > td textarea,
|
|
134
|
+
.light .docblock-argstable-body tr > td select,
|
|
135
|
+
.light .docblock-argstable-body tr > td:nth-child(4) button {
|
|
136
|
+
@apply border border-solid border-gray-300 hover:border-gray-400 focus:border-gray-500;
|
|
137
|
+
box-shadow: none !important;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
.dark .docblock-argstable-body [type='checkbox'],
|
|
141
|
+
.dark .docblock-argstable-body [type='radio'] {
|
|
142
|
+
@apply !border !border-solid !border-gray-300;
|
|
143
|
+
box-shadow: none !important;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.dark .docblock-argstable-body [type='checkbox']:checked,
|
|
147
|
+
.dark .docblock-argstable-body [type='radio']:checked {
|
|
148
|
+
@apply bg-gray-700;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.docblock-argstable-body [type='checkbox']:checked,
|
|
152
|
+
.docblock-argstable-body [type='radio']:checked {
|
|
153
|
+
@apply !bg-gray-900;
|
|
45
154
|
}
|
|
46
155
|
|
|
47
156
|
.docblock-argstable [type='checkbox']:focus,
|
|
@@ -49,15 +158,34 @@ affecting rendered component(s) below Canvas and Docs tabs.
|
|
|
49
158
|
@apply !ring-gray-300;
|
|
50
159
|
}
|
|
51
160
|
|
|
161
|
+
/* -------------------- Code block and user markdown -------------------- */
|
|
162
|
+
|
|
163
|
+
#storybook-docs h2 {
|
|
164
|
+
@apply mt-8 mb-6 pb-2 font-bold;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.dark h2 {
|
|
168
|
+
@apply border-b-gray-800;
|
|
169
|
+
}
|
|
170
|
+
|
|
52
171
|
.sbdocs-title + p code {
|
|
53
|
-
|
|
172
|
+
@apply bg-white;
|
|
54
173
|
}
|
|
55
174
|
|
|
56
|
-
.
|
|
57
|
-
|
|
58
|
-
|
|
175
|
+
.docblock-source {
|
|
176
|
+
@apply !bg-gray-800 border-gray-800 !rounded-lg;
|
|
177
|
+
box-shadow: none !important;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.dark .docblock-source {
|
|
181
|
+
@apply !bg-gray-900 !border-gray-800;
|
|
182
|
+
|
|
183
|
+
button {
|
|
184
|
+
@apply bg-gray-800 border-gray-800 text-gray-400 rounded-tl-none;
|
|
59
185
|
}
|
|
186
|
+
}
|
|
60
187
|
|
|
188
|
+
.markdown {
|
|
61
189
|
code {
|
|
62
190
|
background-color: #f3f4f6 !important;
|
|
63
191
|
border-color: #d1d5db !important;
|
|
@@ -73,4 +201,14 @@ affecting rendered component(s) below Canvas and Docs tabs.
|
|
|
73
201
|
color: #4b5563;
|
|
74
202
|
}
|
|
75
203
|
}
|
|
204
|
+
|
|
205
|
+
/* -------------------- Storybook story preview -------------------- */
|
|
206
|
+
|
|
207
|
+
.vl-dark {
|
|
208
|
+
@apply min-h-full bg-gray-950;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.vl-light {
|
|
212
|
+
@apply min-h-full bg-white;
|
|
213
|
+
}
|
|
76
214
|
</style>
|
package/.storybook/preview.js
CHANGED
|
@@ -1,19 +1,21 @@
|
|
|
1
1
|
import { setup } from "@storybook/vue3";
|
|
2
|
-
import { DARK_MODE_SELECTOR } from "vueless/constants.js";
|
|
3
|
-
import { withThemeByClassName } from '@storybook/addon-themes';
|
|
4
2
|
|
|
5
|
-
import
|
|
3
|
+
import themeLight from "./themes/themeLight.js";
|
|
4
|
+
import themeDark from "./themes/themeDark.js";
|
|
5
|
+
import themeLightDocs from "./themes/themeLightDocs.js";
|
|
6
|
+
import { storyDarkModeDecorator } from "./decorators/storyDarkModeDecorator.js";
|
|
6
7
|
import { vue3SourceDecorator } from "./decorators/vue3SourceDecorator.js";
|
|
8
|
+
import { DARK_MODE_SELECTOR, LIGHT_MODE_SELECTOR } from "vueless/constants.js";
|
|
7
9
|
|
|
8
|
-
|
|
10
|
+
/* Tailwind styles */
|
|
11
|
+
import "./index.css";
|
|
12
|
+
|
|
13
|
+
/* Vue plugins */
|
|
9
14
|
import { createVueless } from "vueless";
|
|
10
15
|
import { createRouter, createWebHistory } from "vue-router";
|
|
11
16
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
// Create storybook app instance
|
|
16
|
-
const storybookApp = (app) => {
|
|
17
|
+
/* Setup storybook */
|
|
18
|
+
setup((app) => {
|
|
17
19
|
const vueless = createVueless();
|
|
18
20
|
const router = createRouter({ history: createWebHistory(), routes: [] });
|
|
19
21
|
|
|
@@ -21,31 +23,35 @@ const storybookApp = (app) => {
|
|
|
21
23
|
app.use(router);
|
|
22
24
|
app.use(vueless);
|
|
23
25
|
}
|
|
24
|
-
};
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
/* Set storybook decorators */
|
|
29
|
+
export const decorators = [
|
|
30
|
+
vue3SourceDecorator,
|
|
31
|
+
storyDarkModeDecorator(DARK_MODE_SELECTOR, LIGHT_MODE_SELECTOR),
|
|
32
|
+
];
|
|
33
|
+
|
|
34
|
+
/* Set storybook parameters */
|
|
35
|
+
export const parameters = {
|
|
36
|
+
layout: "fullscreen",
|
|
37
|
+
backgrounds: { disable: true },
|
|
38
|
+
docs: {
|
|
39
|
+
theme: themeLightDocs,
|
|
40
|
+
source: { language: "html" },
|
|
41
|
+
},
|
|
42
|
+
darkMode: {
|
|
43
|
+
current: "light",
|
|
44
|
+
light: themeLight,
|
|
45
|
+
dark: themeDark,
|
|
46
|
+
classTarget: "body",
|
|
47
|
+
stylePreview: true,
|
|
48
|
+
},
|
|
49
|
+
options: {
|
|
50
|
+
storySort: (a, b) => {
|
|
51
|
+
const idA = a.id.split("--")[0];
|
|
52
|
+
const idB = b.id.split("--")[0];
|
|
25
53
|
|
|
26
|
-
|
|
27
|
-
setup(storybookApp);
|
|
28
|
-
|
|
29
|
-
// Set storybook config
|
|
30
|
-
export default {
|
|
31
|
-
decorators: [
|
|
32
|
-
vue3SourceDecorator,
|
|
33
|
-
withThemeByClassName({
|
|
34
|
-
themes: { light: "", dark: DARK_MODE_SELECTOR },
|
|
35
|
-
defaultTheme: "dark",
|
|
36
|
-
}),
|
|
37
|
-
],
|
|
38
|
-
parameters: {
|
|
39
|
-
layout,
|
|
40
|
-
docs,
|
|
41
|
-
backgrounds,
|
|
42
|
-
options: {
|
|
43
|
-
storySort: (a, b) => {
|
|
44
|
-
const idA = a.id.split("--")[0];
|
|
45
|
-
const idB = b.id.split("--")[0];
|
|
46
|
-
|
|
47
|
-
return idA.localeCompare(idB, undefined, { numeric: true });
|
|
48
|
-
},
|
|
54
|
+
return idA.localeCompare(idB, undefined, { numeric: true });
|
|
49
55
|
},
|
|
50
56
|
},
|
|
51
57
|
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/** @type {import('tailwindcss').Config} */
|
|
2
|
+
import { vuelessContent, vuelessContentVue, vuelessPreset } from "vueless/preset.tailwind.js";
|
|
3
|
+
|
|
4
|
+
export default {
|
|
5
|
+
content: [...vuelessContent, ...vuelessContentVue, "./.storybook/**/*.{js,ts,jsx,tsx,html}"],
|
|
6
|
+
presets: [vuelessPreset],
|
|
7
|
+
theme: {
|
|
8
|
+
fontFamily: {
|
|
9
|
+
roboto: ["Roboto", "sans-serif"],
|
|
10
|
+
},
|
|
11
|
+
},
|
|
12
|
+
};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { create } from "@storybook/theming/create";
|
|
2
|
+
import colors from "tailwindcss/colors.js";
|
|
3
|
+
|
|
4
|
+
export default create({
|
|
5
|
+
base: "dark",
|
|
6
|
+
// Typography
|
|
7
|
+
fontBase: '"Roboto", sans-serif',
|
|
8
|
+
fontCode: "monospace",
|
|
9
|
+
|
|
10
|
+
brandTitle: "Vueless UI",
|
|
11
|
+
brandUrl: "https://vueless.com",
|
|
12
|
+
brandImage:
|
|
13
|
+
"https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/vueless-logo-dark.svg",
|
|
14
|
+
brandTarget: "_blank",
|
|
15
|
+
|
|
16
|
+
// Main colors
|
|
17
|
+
colorPrimary: colors.gray["200"],
|
|
18
|
+
colorSecondary: colors.gray["700"],
|
|
19
|
+
|
|
20
|
+
// UI
|
|
21
|
+
appBg: colors.gray["900"],
|
|
22
|
+
appPreviewBg: colors.gray["900"],
|
|
23
|
+
appBorderColor: colors.gray["900"],
|
|
24
|
+
appBorderRadius: 0,
|
|
25
|
+
|
|
26
|
+
// Text colors
|
|
27
|
+
textColor: colors.gray["300"],
|
|
28
|
+
textInverseColor: colors.gray["800"],
|
|
29
|
+
|
|
30
|
+
// Toolbar default and active colors
|
|
31
|
+
barTextColor: colors.gray["500"],
|
|
32
|
+
barHoverColor: colors.gray["400"],
|
|
33
|
+
barSelectedColor: colors.gray["300"],
|
|
34
|
+
barBg: colors.gray["950"],
|
|
35
|
+
|
|
36
|
+
// Form colors
|
|
37
|
+
inputBg: colors.gray["950"],
|
|
38
|
+
inputBorder: colors.gray["600"],
|
|
39
|
+
inputTextColor: colors.gray["100"],
|
|
40
|
+
inputBorderRadius: 4,
|
|
41
|
+
|
|
42
|
+
buttonBg: colors.gray["800"],
|
|
43
|
+
buttonBorder: colors.gray["800"],
|
|
44
|
+
booleanBg: colors.gray["900"],
|
|
45
|
+
booleanSelectedBg: colors.gray["800"],
|
|
46
|
+
});
|
|
@@ -10,7 +10,7 @@ export default create({
|
|
|
10
10
|
brandTitle: "Vueless UI",
|
|
11
11
|
brandUrl: "https://vueless.com",
|
|
12
12
|
brandImage:
|
|
13
|
-
"https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/logo.
|
|
13
|
+
"https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/vueless-logo-light.svg",
|
|
14
14
|
brandTarget: "_blank",
|
|
15
15
|
|
|
16
16
|
// Main colors
|
|
@@ -25,7 +25,7 @@ export default create({
|
|
|
25
25
|
|
|
26
26
|
// Text colors
|
|
27
27
|
textColor: colors.gray["900"],
|
|
28
|
-
textInverseColor: colors.gray["
|
|
28
|
+
textInverseColor: colors.gray["900"],
|
|
29
29
|
|
|
30
30
|
// Toolbar default and active colors
|
|
31
31
|
barTextColor: colors.gray["500"],
|
|
@@ -40,7 +40,7 @@ export default create({
|
|
|
40
40
|
inputBorderRadius: 4,
|
|
41
41
|
|
|
42
42
|
buttonBg: colors.gray["100"],
|
|
43
|
-
buttonBorder: colors.gray["
|
|
44
|
-
booleanBg: colors.
|
|
45
|
-
booleanSelectedBg: colors.gray["
|
|
43
|
+
buttonBorder: colors.gray["200"],
|
|
44
|
+
booleanBg: colors.gray["50"],
|
|
45
|
+
booleanSelectedBg: colors.gray["200"],
|
|
46
46
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vueless/storybook",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.40",
|
|
4
4
|
"description": "Simplifies Storybook configuration for Vueless UI library.",
|
|
5
5
|
"homepage": "https://vueless.com",
|
|
6
6
|
"author": "Johnny Grid",
|
|
@@ -48,7 +48,8 @@
|
|
|
48
48
|
"prettier": "^3.2.5",
|
|
49
49
|
"prettier-eslint": "^16.3.0",
|
|
50
50
|
"release-it": "^17.2.1",
|
|
51
|
-
"vue-router": "^4.3.2"
|
|
51
|
+
"vue-router": "^4.3.2",
|
|
52
|
+
"vueless": "^0.0.439"
|
|
52
53
|
},
|
|
53
54
|
"resolutions": {
|
|
54
55
|
"jackspeak": "2.3.6"
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import vuelessDocsTheme from "../themes/vueless.docs.theme.js";
|
|
2
|
-
import colors from "tailwindcss/colors.js";
|
|
3
|
-
|
|
4
|
-
export const docs = {
|
|
5
|
-
theme: vuelessDocsTheme,
|
|
6
|
-
source: {
|
|
7
|
-
language: "html",
|
|
8
|
-
},
|
|
9
|
-
};
|
|
10
|
-
|
|
11
|
-
export const backgrounds = {
|
|
12
|
-
default: "white",
|
|
13
|
-
values: [
|
|
14
|
-
{ name: "white", value: colors.white },
|
|
15
|
-
{ name: "light", value: colors.gray[50] },
|
|
16
|
-
{ name: "dark", value: colors.gray[900] },
|
|
17
|
-
],
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
export const layout = "fullscreen";
|
|
File without changes
|