@vueless/storybook 1.2.10-beta.6 → 1.2.10-beta.8

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