@vueless/storybook 0.0.43 → 0.0.45

package/.storybook/index.css

@@ -14,6 +14,7 @@ body {
 .light .sbdocs .sbdocs-content > h1,
 .light .sbdocs .sbdocs-content > h2,
 .light .sbdocs .sbdocs-content > h3,
+.light .sbdocs .sbdocs-content > .sb-anchor > h3,
 .light .sbdocs .sbdocs-content > p,
 .light .sbdocs .sbdocs-content > table th,
 .light .sbdocs .sbdocs-content > table td {
@@ -23,14 +24,33 @@ body {
 .dark .sbdocs .sbdocs-content > h1,
 .dark .sbdocs .sbdocs-content > h2,
 .dark .sbdocs .sbdocs-content > h3,
+.dark .sbdocs .sbdocs-content > .sb-anchor > h3,
 .dark .sbdocs .sbdocs-content > p,
 .dark .sbdocs .sbdocs-content > table th,
 .dark .sbdocs .sbdocs-content > table td {
   @apply !text-gray-200;
 }
 
+.sbdocs .sbdocs-content > table tr {
+  @apply border-none;
+}
+
+.sbdocs .sbdocs-content > table th,
+.sbdocs .sbdocs-content > table td {
+  @apply border-l-0 border-t-0 text-left;
+}
+
+.sbdocs .sbdocs-content > table th:last-child,
+.sbdocs .sbdocs-content > table td:last-child {
+  @apply border-r-0;
+}
+
+.sbdocs .sbdocs-content > table tbody tr:last-child td {
+  @apply border-b-0;
+}
+
 .light .sbdocs .sbdocs-content > table th {
-  @apply bg-gray-100 border-gray-200 text-left;
+  @apply bg-gray-100 border-gray-200;
 }
 
 .light .sbdocs .sbdocs-content > table td {
@@ -42,7 +62,7 @@ body {
 }
 
 .dark .sbdocs .sbdocs-content > table th {
-  @apply bg-gray-800 border-gray-700 text-left;
+  @apply bg-gray-800 border-gray-700;
 }
 
 .dark .sbdocs .sbdocs-content > table td {
@@ -109,6 +129,16 @@ body {
 
 /* -------------------- Args table -------------------- */
 
+@media screen and (max-width: 600px) {
+  div:has(> .docblock-argstable) {
+    @apply !mb-10 overflow-x-scroll;
+  }
+
+  .docblock-argstable {
+    @apply !mb-0;
+  }
+}
+
 .dark .docblock-argstable,
 .dark .docblock-argstable-head th {
   @apply !text-gray-200;
@@ -157,48 +187,68 @@ body {
   @apply bg-gray-100 border-gray-200 text-gray-800;
 }
 
+.dark .rejt-value-node:hover .rejt-value,
 .dark .sbdocs .sbdocs-content code,
 .dark .docblock-argstable-body tr > td > div + div > span[class],
 .dark .docblock-argstable-body tr > td > div + div > div > span,
 .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 .docblock-argstable-body tr > td > div + div > span:not([class]) {
   @apply text-gray-400;
 }
 
-.dark .docblock-argstable-body tr > td input,
+.dark .docblock-argstable-body tr > td .rejt-edit-form,
+.dark .docblock-argstable-body tr > td input:not([type="checkbox"]),
 .dark .docblock-argstable-body tr > td textarea,
 .dark .docblock-argstable-body tr > td select,
 .dark .docblock-argstable-body tr > td:nth-child(4) button {
-  @apply text-gray-200 bg-gray-800 border border-solid border-gray-700/50 hover:border-gray-600 focus:border-gray-500;
+  @apply text-gray-200 bg-gray-800 border border-solid border-gray-700/50 hover:border-gray-600 focus:border-gray-500 text-[13px];
   box-shadow: none !important;
+  color-scheme: dark;
+}
+
+.docblock-argstable-body tr > td .rejt-add-value-node button {
+  @apply px-1.5 py-0.5 leading-none;
 }
 
-.light .docblock-argstable-body tr > td input,
+.light .docblock-argstable-body tr > td .rejt-add-value-node button[type="submit"] {
+  @apply bg-white;
+}
+
+.light .docblock-argstable-body tr > td .rejt-edit-form,
+.light .docblock-argstable-body tr > td input:not([type="checkbox"]),
 .light .docblock-argstable-body tr > td textarea,
 .light .docblock-argstable-body tr > td select,
 .light .docblock-argstable-body tr > td:nth-child(4) button {
-  @apply border border-solid border-gray-300 hover:border-gray-400 focus:border-gray-500;
+  @apply text-gray-900 border border-solid border-gray-300 hover:border-gray-400 focus:border-gray-500 text-[13px];
   box-shadow: none !important;
 }
 
+.dark .docblock-argstable-body label[aria-disabled] {
+  @apply bg-gray-800;
+}
+
+.dark .docblock-argstable-body label[aria-disabled] span {
+  @apply text-gray-200;
+}
+
 .dark .docblock-argstable-body [type='checkbox'],
 .dark .docblock-argstable-body [type='radio'] {
-  @apply !border !border-solid !border-gray-300;
+  @apply border border-solid !border-gray-700;
   box-shadow: none !important;
 }
 
 .dark .docblock-argstable-body [type='checkbox']:checked,
 .dark .docblock-argstable-body [type='radio']:checked {
-  @apply bg-gray-700;
+  @apply bg-gray-900 invert grayscale !border-gray-300;
 }
 
-.docblock-argstable-body [type='checkbox']:checked,
-.docblock-argstable-body [type='radio']:checked {
+.light .docblock-argstable-body [type='checkbox']:checked,
+.light .docblock-argstable-body [type='radio']:checked {
   @apply !bg-gray-900;
 }
 
@@ -207,6 +257,15 @@ body {
   @apply !ring-gray-300;
 }
 
+.dark .rejt-name,
+.dark .rejt-collapsed-text {
+  @apply !text-gray-400;
+}
+
+.dark .rejt-value {
+  @apply !text-gray-200;
+}
+
 /* -------------------- Code block and user markdown -------------------- */
 
 #storybook-docs h2 {

package/.storybook/main.js

@@ -11,7 +11,8 @@ export default {
     "@storybook/addon-essentials",
     "@storybook/addon-interactions",
     "storybook-dark-mode",
-    // "@storybook/addon-themes", // TODO: uncomment when dark mode will be implemented to the components.
+    // TODO: remove the condition when the dark mode will be implemented to the components.
+    process.env.NODE_ENV === "development" && "@storybook/addon-themes",
   ],
   framework: {
     name: "@storybook/vue3-vite",

package/.storybook/manager-head.html

@@ -5,13 +5,78 @@ Overrides content of storybook layout HTML page <head> tag,
 <link rel="shortcut icon" href="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/favicons/favicon.ico">
 <link rel="icon" type="image/svg+xml" href="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/favicons/favicon.svg" />
 
+<!--
+Custom dark mode related vueless loader.
+-->
+<div id="sb-vueless-loader">
+  <img
+    class="sb-vueless-loader-img-dark"
+    src="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/vueless-logo-dark.svg"
+    alt="Vueless UI"
+    width="250" />
+
+  <img
+    class="sb-vueless-loader-img-light"
+    src="https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/vueless-logo-light.svg"
+    alt="Vueless UI"
+    width="250" />
+</div>
+
 <style>
   /* -------------------- Prevent showing users default storybook theme styles -------------------- */
 
-  body {
+  body.dark {
+    background: #111827;
+  }
+
+  #root {
     visibility: hidden;
   }
 
+  #sb-vueless-loader {
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    background: inherit;
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+  }
+
+  .light #sb-vueless-loader {
+    background: #f1f5f9;
+  }
+
+  .dark #sb-vueless-loader {
+    background: #111827;
+  }
+
+  .sb-vueless-loader-img-dark,
+  .sb-vueless-loader-img-light {
+    display: none;
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  .light .sb-vueless-loader-img-light {
+    display: block;
+  }
+
+  .dark .sb-vueless-loader-img-dark {
+    display: block;
+  }
+
+  @keyframes pulse {
+    0%, 100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: .5;
+    }
+  }
+
   /* -------------------- Storybook config tooltip -------------------- */
 
   div[data-testid="tooltip"] {
@@ -31,6 +96,10 @@ Overrides content of storybook layout HTML page <head> tag,
 
   /* -------------------- Storybook sidebar -------------------- */
 
+  .dark .sidebar-container {
+    background: #111827;
+  }
+
   .sidebar-header img {
    width: 150px;
   }
@@ -73,15 +142,11 @@ Overrides content of storybook layout HTML page <head> tag,
 <script>
   /* This trick prevents showing users default storybook theme */
   (() => {
-    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    const theme = prefersDarkScheme ? 'dark' : 'light';
-
-    document.documentElement.classList.add(theme);
-
     window.onload = function() {
       setTimeout(() => {
-        document.body.style.visibility = 'visible';
-      }, 500);
+        document.getElementById("root").style.visibility = 'visible';
+        document.getElementById("sb-vueless-loader").style.display = 'none';
+      }, 1000);
     };
   })();
 </script>

package/package.json

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