@vueless/storybook 1.2.10-beta.6 → 1.2.10-beta.7
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-js/manager.js +5 -4
- package/.storybook-js/preview.js +13 -8
- package/.storybook-js/theme/theme.css +37 -0
- package/.storybook-js/theme/theme.js +30 -0
- package/.storybook-js/vite.config.js +1 -1
- package/.storybook-ts/manager.ts +5 -4
- package/.storybook-ts/preview.ts +13 -8
- package/.storybook-ts/theme/theme.css +38 -0
- package/.storybook-ts/theme/theme.ts +31 -0
- package/.storybook-ts/vite.config.ts +1 -1
- package/decorators/storyDarkModeDecorator.js +8 -7
- package/index.browser.js +5 -1
- package/index.d.ts +5 -1
- package/index.js +6 -0
- package/package.json +6 -4
- package/theme/getThemeDark.js +47 -0
- package/theme/getThemeLight.js +47 -0
- package/theme/getThemeLightPreview.js +42 -0
- package/theme/manager.css +200 -0
- package/{.storybook-ts/themes → theme}/preview.css +185 -146
- package/.storybook-js/themes/manager.css +0 -123
- package/.storybook-js/themes/preview.css +0 -608
- package/.storybook-js/themes/themeDark.js +0 -44
- package/.storybook-js/themes/themeLight.js +0 -44
- package/.storybook-js/themes/themeLightPreview.js +0 -40
- package/.storybook-ts/themes/manager.css +0 -123
- package/.storybook-ts/themes/themeDark.ts +0 -45
- package/.storybook-ts/themes/themeLight.ts +0 -45
- package/.storybook-ts/themes/themeLightPreview.ts +0 -41
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import { create } from "storybook/theming/create";
|
|
2
|
-
|
|
3
|
-
export const themeLightPreview = create({
|
|
4
|
-
base: "light",
|
|
5
|
-
// Typography
|
|
6
|
-
fontBase: '"Roboto", sans-serif',
|
|
7
|
-
fontCode: "monospace",
|
|
8
|
-
|
|
9
|
-
// Main colors
|
|
10
|
-
colorPrimary: "#111827", // gray-900
|
|
11
|
-
colorSecondary: "#6b7280", // gray-500
|
|
12
|
-
|
|
13
|
-
// UI
|
|
14
|
-
appBg: "#f3f4f6", // gray-100
|
|
15
|
-
appPreviewBg: "#f9fafb", // gray-50
|
|
16
|
-
appBorderColor: "#e5e7eb", // gray-200
|
|
17
|
-
appContentBg: "#f9fafb", // gray-50
|
|
18
|
-
appBorderRadius: 8,
|
|
19
|
-
|
|
20
|
-
// Text colors
|
|
21
|
-
textColor: "#111827", // gray-900
|
|
22
|
-
textInverseColor: "#f9fafb", // gray-50
|
|
23
|
-
|
|
24
|
-
// Toolbar default and active colors
|
|
25
|
-
barTextColor: "#6b7280", // gray-500
|
|
26
|
-
barHoverColor: "#4b5563", // gray-600
|
|
27
|
-
barSelectedColor: "#374151", // gray-700
|
|
28
|
-
barBg: "#ffffff", // white
|
|
29
|
-
|
|
30
|
-
// Form colors
|
|
31
|
-
inputBg: "#ffffff", // white
|
|
32
|
-
inputBorder: "#d1d5db", // gray-300
|
|
33
|
-
inputTextColor: "#111827", // gray-900
|
|
34
|
-
inputBorderRadius: 4,
|
|
35
|
-
|
|
36
|
-
buttonBg: "#f3f4f6", // gray-100
|
|
37
|
-
buttonBorder: "#e5e7eb", // gray-200
|
|
38
|
-
booleanBg: "#f9fafb", // gray-50
|
|
39
|
-
booleanSelectedBg: "#e5e7eb", // gray-200
|
|
40
|
-
});
|
|
@@ -1,123 +0,0 @@
|
|
|
1
|
-
/* -------------------- Storybook config tooltip -------------------- */
|
|
2
|
-
|
|
3
|
-
div[data-testid="tooltip"] {
|
|
4
|
-
border-radius: 8px;
|
|
5
|
-
overflow: hidden;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
div[data-testid="tooltip"] a[id]:hover,
|
|
9
|
-
div[data-testid="tooltip"] button[id]:hover {
|
|
10
|
-
background-color: rgb(17 24 39 / 5%) !important;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.dark div[data-testid="tooltip"] a[id]:hover,
|
|
14
|
-
.dark div[data-testid="tooltip"] button[id]:hover {
|
|
15
|
-
background-color: rgb(255 255 255 / 5%) !important;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
/* -------------------- Storybook sidebar -------------------- */
|
|
19
|
-
|
|
20
|
-
.dark .sidebar-container {
|
|
21
|
-
background: #020713;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.sidebar-header img {
|
|
25
|
-
width: 150px;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.sidebar-header a:focus {
|
|
29
|
-
border: 1px solid transparent;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.sidebar-item {
|
|
33
|
-
border-radius: 6px !important;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.dark .sidebar-item:hover {
|
|
37
|
-
background: #101828 !important;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.dark .sidebar-item[data-selected="true"],
|
|
41
|
-
.dark .sidebar-item[data-selected="true"]:hover {
|
|
42
|
-
background: #1f2937 !important;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.search-field,
|
|
46
|
-
.search-result-item {
|
|
47
|
-
border-radius: 8px !important;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.sidebar-item,
|
|
51
|
-
.search-result-item {
|
|
52
|
-
text-transform: capitalize;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.light .sidebar-item svg[type="component"],
|
|
56
|
-
.light .search-result-item svg[type="component"],
|
|
57
|
-
.dark .search-result-item mark {
|
|
58
|
-
color: #10b981;
|
|
59
|
-
font-weight: 600;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.dark .sidebar-item svg[type="component"],
|
|
63
|
-
.dark .search-result-item svg[type="component"],
|
|
64
|
-
.light .search-result-item mark {
|
|
65
|
-
color: #059669;
|
|
66
|
-
font-weight: 600;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.light .sidebar-item svg[type="document"],
|
|
70
|
-
.light .sidebar-item svg[type="story"],
|
|
71
|
-
.light .search-result-item svg[type="document"],
|
|
72
|
-
.light .search-result-item svg[type="story"] {
|
|
73
|
-
color: #9ca3af;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
.dark .sidebar-item svg[type="document"],
|
|
77
|
-
.dark .sidebar-item svg[type="story"],
|
|
78
|
-
.dark .search-result-item svg[type="document"],
|
|
79
|
-
.dark .search-result-item svg[type="story"] {
|
|
80
|
-
color: #4b5563;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.light .search-result-item--label {
|
|
84
|
-
color: #6b7280; /* text-gray-600 */
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.dark .search-result-item--label {
|
|
88
|
-
color: #a8abb0; /* text-gray-400 */
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
#sidebar-bottom-wrapper {
|
|
92
|
-
display: none;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
/* -------------------- Storybook args -------------------- */
|
|
96
|
-
|
|
97
|
-
.dark,
|
|
98
|
-
.dark #panel-tab-content div,
|
|
99
|
-
.dark .docblock-argstable-body > tr > td {
|
|
100
|
-
background: #030712 !important;
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
.light,
|
|
104
|
-
.light #panel-tab-content div,
|
|
105
|
-
.light .docblock-argstable-body > tr > td {
|
|
106
|
-
background: #f9fafb !important;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
.dark .docblock-argstable-head > tr {
|
|
110
|
-
background: #1e293b !important;
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
.dark .docblock-argstable-body tr > td textarea,
|
|
114
|
-
.dark .docblock-argstable-body tr > td select,
|
|
115
|
-
.dark .docblock-argstable-body tr > td:last-child button:not([tabindex="-1"]) {
|
|
116
|
-
background: #111827;
|
|
117
|
-
border: solid 1px #1f2937;
|
|
118
|
-
box-shadow: none;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
.light .docblock-argstable-body tr > td:last-child button:not([tabindex="-1"]) {
|
|
122
|
-
background: white;
|
|
123
|
-
}
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { create } from "storybook/theming/create";
|
|
2
|
-
import type { ThemeVars } from "storybook/theming";
|
|
3
|
-
|
|
4
|
-
export const themeDark: ThemeVars = 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: "./images/logo-dark.svg",
|
|
13
|
-
brandTarget: "_blank",
|
|
14
|
-
|
|
15
|
-
// Main colors
|
|
16
|
-
colorPrimary: "#e5e7eb", // gray-200
|
|
17
|
-
colorSecondary: "#374151", // gray-700
|
|
18
|
-
|
|
19
|
-
// UI
|
|
20
|
-
appBg: "#111827", // gray-900
|
|
21
|
-
appPreviewBg: "#111827", // gray-900
|
|
22
|
-
appBorderColor: "#111827", // gray-900
|
|
23
|
-
appBorderRadius: 0,
|
|
24
|
-
|
|
25
|
-
// Text colors
|
|
26
|
-
textColor: "#d1d5db", // gray-300
|
|
27
|
-
textInverseColor: "#1f2937", // gray-800
|
|
28
|
-
|
|
29
|
-
// Toolbar default and active colors
|
|
30
|
-
barTextColor: "#6b7280", // gray-500
|
|
31
|
-
barHoverColor: "#9ca3af", // gray-400
|
|
32
|
-
barSelectedColor: "#d1d5db", // gray-300
|
|
33
|
-
barBg: "#030712", // gray-950
|
|
34
|
-
|
|
35
|
-
// Form colors
|
|
36
|
-
inputBg: "#030712", // gray-950
|
|
37
|
-
inputBorder: "#4b5563", // gray-600
|
|
38
|
-
inputTextColor: "#f3f4f6", // gray-100
|
|
39
|
-
inputBorderRadius: 4,
|
|
40
|
-
|
|
41
|
-
buttonBg: "#1f2937", // gray-800
|
|
42
|
-
buttonBorder: "#1f2937", // gray-800
|
|
43
|
-
booleanBg: "#111827", // gray-900
|
|
44
|
-
booleanSelectedBg: "#1f2937", // gray-800
|
|
45
|
-
});
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { create } from "storybook/theming/create";
|
|
2
|
-
import type { ThemeVars } from "storybook/theming";
|
|
3
|
-
|
|
4
|
-
export const themeLight: ThemeVars = create({
|
|
5
|
-
base: "light",
|
|
6
|
-
// Typography
|
|
7
|
-
fontBase: '"Roboto", sans-serif',
|
|
8
|
-
fontCode: "monospace",
|
|
9
|
-
|
|
10
|
-
brandTitle: "Vueless UI",
|
|
11
|
-
brandUrl: "https://vueless.com",
|
|
12
|
-
brandImage: "./images/logo-light.svg",
|
|
13
|
-
brandTarget: "_blank",
|
|
14
|
-
|
|
15
|
-
// Main colors
|
|
16
|
-
colorPrimary: "#111827", // gray-900
|
|
17
|
-
colorSecondary: "#6b7280", // gray-500
|
|
18
|
-
|
|
19
|
-
// UI
|
|
20
|
-
appBg: "#ffffff", // white
|
|
21
|
-
appPreviewBg: "#f9fafb", // gray-50
|
|
22
|
-
appBorderColor: "#d1d5db", // gray-300
|
|
23
|
-
appBorderRadius: 0,
|
|
24
|
-
|
|
25
|
-
// Text colors
|
|
26
|
-
textColor: "#111827", // gray-900
|
|
27
|
-
textInverseColor: "#111827", // gray-900
|
|
28
|
-
|
|
29
|
-
// Toolbar default and active colors
|
|
30
|
-
barTextColor: "#6b7280", // gray-500
|
|
31
|
-
barHoverColor: "#4b5563", // gray-600
|
|
32
|
-
barSelectedColor: "#374151", // gray-700
|
|
33
|
-
barBg: "#f9fafb", // gray-50
|
|
34
|
-
|
|
35
|
-
// Form colors
|
|
36
|
-
inputBg: "#ffffff", // white
|
|
37
|
-
inputBorder: "#d1d5db", // gray-300
|
|
38
|
-
inputTextColor: "#111827", // gray-900
|
|
39
|
-
inputBorderRadius: 4,
|
|
40
|
-
|
|
41
|
-
buttonBg: "#f3f4f6", // gray-100
|
|
42
|
-
buttonBorder: "#e5e7eb", // gray-200
|
|
43
|
-
booleanBg: "#f9fafb", // gray-50
|
|
44
|
-
booleanSelectedBg: "#e5e7eb", // gray-200
|
|
45
|
-
});
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { create } from "storybook/theming/create";
|
|
2
|
-
import type { ThemeVars } from "storybook/theming";
|
|
3
|
-
|
|
4
|
-
export const themeLightPreview: ThemeVars = create({
|
|
5
|
-
base: "light",
|
|
6
|
-
// Typography
|
|
7
|
-
fontBase: '"Roboto", sans-serif',
|
|
8
|
-
fontCode: "monospace",
|
|
9
|
-
|
|
10
|
-
// Main colors
|
|
11
|
-
colorPrimary: "#111827", // gray-900
|
|
12
|
-
colorSecondary: "#6b7280", // gray-500
|
|
13
|
-
|
|
14
|
-
// UI
|
|
15
|
-
appBg: "#f3f4f6", // gray-100
|
|
16
|
-
appPreviewBg: "#f9fafb", // gray-50
|
|
17
|
-
appBorderColor: "#e5e7eb", // gray-200
|
|
18
|
-
appContentBg: "#f9fafb", // gray-50
|
|
19
|
-
appBorderRadius: 8,
|
|
20
|
-
|
|
21
|
-
// Text colors
|
|
22
|
-
textColor: "#111827", // gray-900
|
|
23
|
-
textInverseColor: "#f9fafb", // gray-50
|
|
24
|
-
|
|
25
|
-
// Toolbar default and active colors
|
|
26
|
-
barTextColor: "#6b7280", // gray-500
|
|
27
|
-
barHoverColor: "#4b5563", // gray-600
|
|
28
|
-
barSelectedColor: "#374151", // gray-700
|
|
29
|
-
barBg: "#ffffff", // white
|
|
30
|
-
|
|
31
|
-
// Form colors
|
|
32
|
-
inputBg: "#ffffff", // white
|
|
33
|
-
inputBorder: "#d1d5db", // gray-300
|
|
34
|
-
inputTextColor: "#111827", // gray-900
|
|
35
|
-
inputBorderRadius: 4,
|
|
36
|
-
|
|
37
|
-
buttonBg: "#f3f4f6", // gray-100
|
|
38
|
-
buttonBorder: "#e5e7eb", // gray-200
|
|
39
|
-
booleanBg: "#f9fafb", // gray-50
|
|
40
|
-
booleanSelectedBg: "#e5e7eb", // gray-200
|
|
41
|
-
});
|