@vueless/storybook 1.2.6 → 1.2.7-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.
Files changed (12) hide show
  1. package/.storybook-js/manager-head.html +2 -2
  2. package/.storybook-js/themes/themeDark.js +1 -1
  3. package/.storybook-js/themes/themeLight.js +1 -1
  4. package/.storybook-ts/manager-head.html +2 -2
  5. package/.storybook-ts/themes/themeDark.ts +1 -1
  6. package/.storybook-ts/themes/themeLight.ts +1 -1
  7. package/decorators/storyDarkModeDecorator.js +12 -0
  8. package/package.json +1 -1
  9. /package/.storybook-js/public/images/{vueless-logo-dark.svg → logo-dark.svg} +0 -0
  10. /package/.storybook-js/public/images/{vueless-logo-light.svg → logo-light.svg} +0 -0
  11. /package/.storybook-ts/public/images/{vueless-logo-dark.svg → logo-dark.svg} +0 -0
  12. /package/.storybook-ts/public/images/{vueless-logo-light.svg → logo-light.svg} +0 -0
package/.storybook-js/manager-head.html CHANGED
@@ -10,13 +10,13 @@ Custom dark mode related vueless loader.
10
10
  <div id="sb-vueless-loader">
11
11
  <img
12
12
  class="sb-vueless-loader-img-dark"
13
- src="./images/vueless-logo-dark.svg"
13
+ src="./images/logo-dark.svg"
14
14
  alt="Vueless UI"
15
15
  width="250" />
16
16
 
17
17
  <img
18
18
  class="sb-vueless-loader-img-light"
19
- src="./images/vueless-logo-light.svg"
19
+ src="./images/logo-light.svg"
20
20
  alt="Vueless UI"
21
21
  width="250" />
22
22
  </div>
package/.storybook-js/themes/themeDark.js CHANGED
@@ -8,7 +8,7 @@ export const themeDark = create({
8
8
 
9
9
  brandTitle: "Vueless UI",
10
10
  brandUrl: "https://vueless.com",
11
- brandImage: "./images/vueless-logo-dark.svg",
11
+ brandImage: "./images/logo-dark.svg",
12
12
  brandTarget: "_blank",
13
13
 
14
14
  // Main colors
package/.storybook-js/themes/themeLight.js CHANGED
@@ -8,7 +8,7 @@ export const themeLight = create({
8
8
 
9
9
  brandTitle: "Vueless UI",
10
10
  brandUrl: "https://vueless.com",
11
- brandImage: "./images/vueless-logo-light.svg",
11
+ brandImage: "./images/logo-light.svg",
12
12
  brandTarget: "_blank",
13
13
 
14
14
  // Main colors
package/.storybook-ts/manager-head.html CHANGED
@@ -10,13 +10,13 @@ Custom dark mode related vueless loader.
10
10
  <div id="sb-vueless-loader">
11
11
  <img
12
12
  class="sb-vueless-loader-img-dark"
13
- src="./images/vueless-logo-dark.svg"
13
+ src="./images/logo-dark.svg"
14
14
  alt="Vueless UI"
15
15
  width="250" />
16
16
 
17
17
  <img
18
18
  class="sb-vueless-loader-img-light"
19
- src="./images/vueless-logo-light.svg"
19
+ src="./images/logo-light.svg"
20
20
  alt="Vueless UI"
21
21
  width="250" />
22
22
  </div>
package/.storybook-ts/themes/themeDark.ts CHANGED
@@ -9,7 +9,7 @@ export const themeDark: ThemeVars = create({
9
9
 
10
10
  brandTitle: "Vueless UI",
11
11
  brandUrl: "https://vueless.com",
12
- brandImage: "./images/vueless-logo-dark.svg",
12
+ brandImage: "./images/logo-dark.svg",
13
13
  brandTarget: "_blank",
14
14
 
15
15
  // Main colors
package/.storybook-ts/themes/themeLight.ts CHANGED
@@ -9,7 +9,7 @@ export const themeLight: ThemeVars = create({
9
9
 
10
10
  brandTitle: "Vueless UI",
11
11
  brandUrl: "https://vueless.com",
12
- brandImage: "./images/vueless-logo-light.svg",
12
+ brandImage: "./images/logo-light.svg",
13
13
  brandTarget: "_blank",
14
14
 
15
15
  // Main colors
package/decorators/storyDarkModeDecorator.js CHANGED
@@ -22,6 +22,18 @@ export const storyDarkModeDecorator = makeDecorator({
22
22
  const storybookColorMode = JSON.parse(sbAddonThemesConfig).current || "light";
23
23
  const systemColorMode = prefersColorSchemeDark.matches ? "dark" : "light";
24
24
 
25
+ // this fixing first load
26
+ document.body.classList.add(storybookColorMode);
27
+
28
+ // this fixing white blink issue
29
+ if (window.location.toString().includes("viewMode=docs")) {
30
+ document.documentElement.classList.add(storybookColorMode);
31
+
32
+ setTimeout(() => {
33
+ document.documentElement.classList.remove("light", "dark");
34
+ }, 4000);
35
+ }
36
+
25
37
  DecoratorHelpers.initializeThemeState(["light", "dark"], storybookColorMode || systemColorMode);
26
38
 
27
39
  previewColorMode = DecoratorHelpers.pluckThemeFromContext(context);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vueless/storybook",
3
- "version": "1.2.6",
3
+ "version": "1.2.7-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",