@vueless/storybook 0.0.65 → 0.0.67

package/.storybook/decorators/storyDarkModeDecorator.js

@@ -5,18 +5,24 @@ import { COLOR_MODE_KEY } from "vueless/constants.js";
 const { initializeThemeState, pluckThemeFromContext } = DecoratorHelpers;
 
 export const storyDarkModeDecorator = () => {
+  /* Set theme className to html tag before initialization (fix white blink issue). */
+  const sbAddonThemesConfig = localStorage.getItem("sb-addon-themes-3") || "{}";
+  const storybookTheme = JSON.parse(sbAddonThemesConfig).current || "light";
+
+  document.body.classList.add(storybookTheme); // this fixing first load
+  document.documentElement.classList.add(storybookTheme);
+
+  setTimeout(() => {
+    document.documentElement.classList.remove("light", "dark");
+  }, 4000);
+
+  /* Initialize theme state. */
   const prefersColorSchemeDark = window.matchMedia("(prefers-color-scheme: dark)");
   const preferScheme = prefersColorSchemeDark.matches ? "dark" : "light";
   const cachedColorMode = localStorage.getItem(COLOR_MODE_KEY) || preferScheme;
 
   initializeThemeState(["light", "dark"], cachedColorMode);
 
-  /* Set theme className to html tag before initialization. */
-  const sbAddonThemesConfig = localStorage.getItem("sb-addon-themes-3") || {};
-  const storybookTheme = JSON.parse(sbAddonThemesConfig).current || "light";
-
-  document.documentElement.classList.add(storybookTheme);
-
   return (story, context) => {
     const theme = pluckThemeFromContext(context);
 

package/.storybook/index.css

@@ -19,29 +19,36 @@
   @apply rounded-sm transition;
 }
 
+.light::-webkit-scrollbar-track,
 .light ::-webkit-scrollbar-track {
   @apply bg-gray-50 hover:bg-gray-200;
 }
 
+.light::-webkit-scrollbar-thumb,
 .light ::-webkit-scrollbar-thumb {
   @apply bg-gray-400 hover:bg-gray-500;
 }
 
-.light * {
-  scrollbar-color: rgba(var(--vl-color-gray-400)) rgba(var(--vl-color-gray-50)); /* thumb color track color */
-}
-
-.dark ::-webkit-scrollbar-track {
+ .dark::-webkit-scrollbar-track,
+ .dark ::-webkit-scrollbar-track {
   @apply bg-gray-950 hover:bg-gray-800;
 }
 
-.dark ::-webkit-scrollbar-thumb {
+.dark::-webkit-scrollbar-thumb,
+.dark ::-webkit-scrollbar-thumb  {
   @apply bg-gray-600 hover:bg-gray-500;
 }
 
-.dark * {
-  scrollbar-width: thin;
-  scrollbar-color: rgba(var(--vl-color-gray-600)) rgba(var(--vl-color-gray-950)); /* thumb color track color */
+@supports (-moz-appearance: none) {
+  .light * {
+    scrollbar-width: thin;
+    scrollbar-color: #9ca3af #f9fafb; /* thumb color track color */
+  }
+
+  .dark * {
+    scrollbar-width: thin;
+    scrollbar-color: #4b5563 #030712; /* thumb color track color */
+  }
 }
 
 html.dark {
@@ -328,7 +335,12 @@ body {
 .dark .docblock-argstable-body tr > td:nth-child(2) > div > div > span[class],
 .dark .docblock-argstable-body tr > td:nth-child(3) > div > span[class],
 .dark .docblock-argstable-body tr > td:nth-child(3) > span[class] {
-  @apply !bg-gray-800 !border-gray-700/50 !text-gray-400;
+  @apply bg-gray-800 border-gray-700/50 text-gray-400;
+}
+
+.dark .sb-story code,
+.light .sb-story code {
+  @apply !bg-inherit !text-inherit;
 }
 
 .dark .docblock-argstable-body tr > td > div + div > span:not([class]) {

package/.storybook/manager-head.html

@@ -25,7 +25,7 @@ Custom dark mode related vueless loader.
 <style>
   /* -------------------- Prevent showing users default storybook theme styles -------------------- */
 
-  body.dark {
+  html.dark {
     background: #111827;
   }
 
@@ -108,6 +108,32 @@ Custom dark mode related vueless loader.
     border: 1px solid transparent;
   }
 
+  .sidebar-item {
+    text-transform: capitalize;
+  }
+
+  .light .sidebar-item svg[width="12"] {
+      color: #10b981;
+  }
+
+  .light .sidebar-item[data-nodetype="document"] svg[width="12"],
+  .light .sidebar-item[data-nodetype="story"] svg[width="12"] {
+      color: #9ca3af;
+  }
+
+  .dark .sidebar-item[data-nodetype="document"] svg[width="12"],
+  .dark .sidebar-item[data-nodetype="story"] svg[width="12"] {
+      color: #4b5563;
+  }
+
+  .dark .sidebar-item svg[width="12"] {
+      color: #059669;
+  }
+
+  #sidebar-bottom-wrapper {
+      display: none;
+  }
+
   /* -------------------- Storybook args -------------------- */
 
   .dark,
@@ -146,7 +172,7 @@ Custom dark mode related vueless loader.
       setTimeout(() => {
         document.getElementById("root").style.visibility = 'visible';
         document.getElementById("sb-vueless-loader").style.display = 'none';
-      }, 1000);
+      }, 1500);
     };
   })();
 </script>

package/.storybook/preview.js

@@ -45,7 +45,7 @@ export const parameters = {
   darkMode: {
     light: themeLight,
     dark: themeDark,
-    classTarget: "html",
+    classTarget: "body",
     stylePreview: true,
   },
   options: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueless/storybook",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "description": "Simplifies Storybook configuration for Vueless UI library.",
   "homepage": "https://vueless.com",
   "author": "Johnny Grid",