@vueless/storybook 1.2.10-beta.5 → 1.2.10-beta.7

package/.storybook-js/manager.js

@@ -1,9 +1,10 @@
 import { addons } from "storybook/manager-api";
+import { getThemeDark, getThemeLight } from "@vueless/storybook";
 
 /* Theme styles */
-import "./themes/manager.css";
-import { themeDark } from "./themes/themeDark.js";
-import { themeLight } from "./themes/themeLight.js";
+import "./theme/theme.css";
+import "@vueless/storybook/manager.css";
+import { theme } from "./theme/theme.js";
 
 const DARK_MODE_KEY = "dark";
 const LIGHT_MODE_KEY = "light";
@@ -24,7 +25,7 @@ prefersColorSchemeDark.addEventListener("change", (event) => {
 
 function setSystemTheme(colorMode) {
   addons.setConfig({
-    theme: colorMode === DARK_MODE_KEY ? themeDark : themeLight,
+    theme: colorMode === DARK_MODE_KEY ? getThemeDark(theme) : getThemeLight(theme),
     panelPosition: "right",
   });
 }

package/.storybook-js/preview.js

@@ -1,12 +1,17 @@
-import { storyDarkModeDecorator, vue3SourceDecorator } from "@vueless/storybook";
+import {
+  getThemeDark,
+  getThemeLight,
+  getThemeLightPreview,
+  vue3SourceDecorator,
+  storyDarkModeDecorator,
+} from "@vueless/storybook";
 import { getRandomId } from "vueless";
 import { setup } from "@storybook/vue3-vite";
 
 /* Theme styles */
-import "./themes/preview.css";
-import { themeDark } from "./themes/themeDark.js";
-import { themeLight } from "./themes/themeLight.js";
-import { themeLightPreview } from "./themes/themeLightPreview.js";
+import "./theme/theme.css";
+import "@vueless/storybook/preview.css";
+import { theme } from "./theme/theme.js";
 
 /* Vue plugins */
 import { createVueless } from "vueless";
@@ -37,12 +42,12 @@ export default {
     layout: "fullscreen",
     backgrounds: { disable: true },
     docs: {
-      theme: themeLightPreview,
+      theme: getThemeLightPreview(theme),
       source: { language: "html" },
     },
     darkMode: {
-      light: themeLight,
-      dark: themeDark,
+      light: getThemeLight(theme),
+      dark: getThemeDark(theme),
       classTarget: "body",
       stylePreview: true,
     },

package/.storybook-js/theme/theme.css

@@ -0,0 +1,37 @@
+/* -------------------- Color Palettes -------------------- */
+
+:root {
+  /* Neutral (Gray) Colors */
+  --neutral-50: #f9fafb;
+  --neutral-100: #f3f4f6;
+  --neutral-200: #e5e7eb;
+  --neutral-300: #d1d5db;
+  --neutral-400: #9ca3af;
+  --neutral-500: #6b7280;
+  --neutral-600: #4b5563;
+  --neutral-700: #374151;
+  --neutral-800: #1f2937;
+  --neutral-900: #111827;
+  --neutral-950: #030712;
+
+  /* Primary (Green) Colors */
+  --primary-50: #f0fdf4;
+  --primary-100: #dcfce7;
+  --primary-200: #bbf7d0;
+  --primary-300: #86efac;
+  --primary-400: #4ade80;
+  --primary-500: #22c55e;
+  --primary-600: #16a34a;
+  --primary-700: #15803d;
+  --primary-800: #166534;
+  --primary-900: #14532d;
+  --primary-950: #052e16;
+
+  /* White */
+  --white: #ffffff;
+
+  /* Border Radius */
+  --rounded-sm: 0.25rem;
+  --rounded-md: 0.375rem;
+  --rounded-lg: 0.5rem;
+}

package/.storybook-js/theme/theme.js

@@ -0,0 +1,30 @@
+export const theme = {
+  fontBase: '"Roboto", sans-serif',
+  fontCode: "monospace",
+  brandTitle: "Vueless UI",
+  brandUrl: "https://vueless.com",
+  brandTarget: "_blank",
+  brandImageLight: "./images/logo-light.svg",
+  brandImageDark: "./images/logo-dark.svg",
+  rounded: {
+    sm: 4,
+    md: 8,
+    lg: 12,
+  },
+  colors: {
+    white: "#ffffff",
+    gray: {
+      50: "#f9fafb",
+      100: "#f3f4f6",
+      200: "#e5e7eb",
+      300: "#d1d5db",
+      400: "#9ca3af",
+      500: "#6b7280",
+      600: "#4b5563",
+      700: "#374151",
+      800: "#1f2937",
+      900: "#111827",
+      950: "#030712",
+    },
+  },
+};

package/.storybook-js/vite.config.js

@@ -14,7 +14,7 @@ export default defineConfig({
       "prettier2",
       "prettier2/parser-html",
       "@storybook/addon-docs/blocks",
-      "storybook/theming/create",
+      "storybook/theming",
       "storybook/internal/docs-tools",
       "@storybook/addon-themes",
       "@storybook/vue3-vite",

package/.storybook-ts/manager.ts

@@ -1,9 +1,10 @@
 import { addons } from "storybook/manager-api";
+import { getThemeDark, getThemeLight } from "@vueless/storybook";
 
 /* Theme styles */
-import "./themes/manager.css";
-import { themeDark } from "./themes/themeDark";
-import { themeLight } from "./themes/themeLight";
+import "./theme/theme.css";
+import "@vueless/storybook/manager.css";
+import { theme } from "./theme/theme";
 
 const DARK_MODE_KEY = "dark";
 const LIGHT_MODE_KEY = "light";
@@ -24,7 +25,7 @@ prefersColorSchemeDark.addEventListener("change", (event) => {
 
 function setSystemTheme(colorMode: string) {
   addons.setConfig({
-    theme: colorMode === DARK_MODE_KEY ? themeDark : themeLight,
+    theme: colorMode === DARK_MODE_KEY ? getThemeDark(theme) : getThemeLight(theme),
     panelPosition: "right",
   });
 }

package/.storybook-ts/preview.ts

@@ -1,14 +1,19 @@
-import { storyDarkModeDecorator, vue3SourceDecorator } from "@vueless/storybook";
+import {
+  getThemeDark,
+  getThemeLight,
+  getThemeLightPreview,
+  vue3SourceDecorator,
+  storyDarkModeDecorator,
+} from "@vueless/storybook";
 import { getRandomId } from "vueless";
 import { setup } from "@storybook/vue3-vite";
 
 import type { Preview } from "@storybook/vue3-vite";
 
 /* Theme styles */
-import "./themes/preview.css";
-import { themeDark } from "./themes/themeDark";
-import { themeLight } from "./themes/themeLight";
-import { themeLightPreview } from "./themes/themeLightPreview";
+import "./theme/theme.css";
+import "@vueless/storybook/preview.css";
+import { theme } from "./theme/theme";
 
 /* Vue plugins */
 import { createVueless } from "vueless";
@@ -39,12 +44,12 @@ export default {
     layout: "fullscreen",
     backgrounds: { disable: true },
     docs: {
-      theme: themeLightPreview,
+      theme: getThemeLightPreview(theme),
       source: { language: "html" },
     },
     darkMode: {
-      light: themeLight,
-      dark: themeDark,
+      light: getThemeLight(theme),
+      dark: getThemeDark(theme),
       classTarget: "body",
       stylePreview: true,
     },

package/.storybook-ts/theme/theme.css

@@ -0,0 +1,38 @@
+/* -------------------- Color Palettes -------------------- */
+
+:root {
+  /* Neutral (Gray) Colors */
+  --neutral-50: #f9fafb;
+  --neutral-100: #f3f4f6;
+  --neutral-200: #e5e7eb;
+  --neutral-300: #d1d5db;
+  --neutral-400: #9ca3af;
+  --neutral-500: #6b7280;
+  --neutral-600: #4b5563;
+  --neutral-700: #374151;
+  --neutral-800: #1f2937;
+  --neutral-900: #111827;
+  --neutral-950: #030712;
+
+  /* Primary (Green) Colors */
+  --primary-50: #f0fdf4;
+  --primary-100: #dcfce7;
+  --primary-200: #bbf7d0;
+  --primary-300: #86efac;
+  --primary-400: #4ade80;
+  --primary-500: #22c55e;
+  --primary-600: #16a34a;
+  --primary-700: #15803d;
+  --primary-800: #166534;
+  --primary-900: #14532d;
+  --primary-950: #052e16;
+
+  /* White */
+  --white: #ffffff;
+
+  /* Border Radius */
+  --rounded-sm: 0.25rem;
+  --rounded-md: 0.375rem;
+  --rounded-lg: 0.5rem;
+}
+

package/.storybook-ts/theme/theme.ts

@@ -0,0 +1,31 @@
+export const theme = {
+  fontBase: '"Roboto", sans-serif',
+  fontCode: "monospace",
+  brandTitle: "Vueless UI",
+  brandUrl: "https://vueless.com",
+  brandTarget: "_blank",
+  brandImageLight: "./images/logo-light.svg",
+  brandImageDark: "./images/logo-dark.svg",
+  rounded: {
+    sm: 4,
+    md: 8,
+    lg: 12,
+  },
+  colors: {
+    white: "#ffffff",
+    gray: {
+      50: "#f9fafb",
+      100: "#f3f4f6",
+      200: "#e5e7eb",
+      300: "#d1d5db",
+      400: "#9ca3af",
+      500: "#6b7280",
+      600: "#4b5563",
+      700: "#374151",
+      800: "#1f2937",
+      900: "#111827",
+      950: "#030712",
+    },
+  },
+};
+

package/.storybook-ts/vite.config.ts

@@ -14,7 +14,7 @@ export default defineConfig({
       "prettier2",
       "prettier2/parser-html",
       "@storybook/addon-docs/blocks",
-      "storybook/theming/create",
+      "storybook/theming",
       "storybook/internal/docs-tools",
       "@storybook/addon-themes",
       "@storybook/vue3-vite",

package/decorators/storyDarkModeDecorator.js

@@ -25,14 +25,15 @@ export const storyDarkModeDecorator = makeDecorator({
     // this fixing first load
     document.body.classList.add(storybookColorMode);
 
+    // TODO: Temporary disables
     // this fixing white blink issue
-    if (window.location.toString().includes("viewMode=docs")) {
-      document.documentElement.classList.add(storybookColorMode);
-
-      setTimeout(() => {
-        document.documentElement.classList.remove("light", "dark");
-      }, 4000);
-    }
+    // if (window.location.toString().includes("viewMode=docs")) {
+    //   document.documentElement.classList.add(storybookColorMode);
+    //
+    //   setTimeout(() => {
+    //     document.documentElement.classList.remove("light", "dark");
+    //   }, 4000);
+    // }
 
     DecoratorHelpers.initializeThemeState(["light", "dark"], storybookColorMode || systemColorMode);
 

package/index.browser.js

@@ -1,2 +1,6 @@
-export { storyDarkModeDecorator } from "./decorators/storyDarkModeDecorator.js";
+export { getThemeDark } from "./theme/getThemeDark.js";
+export { getThemeLight } from "./theme/getThemeLight.js";
+export { getThemeLightPreview } from "./theme/getThemeLightPreview.js";
+
 export { vue3SourceDecorator } from "./decorators/vue3SourceDecorator.js";
+export { storyDarkModeDecorator } from "./decorators/storyDarkModeDecorator.js";

package/index.d.ts

@@ -1,5 +1,9 @@
 export declare function defineConfigWithVueless(options?: any): () => any;
 export declare function getVuelessStoriesGlob(vuelessEnv?: string): Promise<string[]>;
 
+export { getThemeDark } from "./theme/getThemeDark.js";
+export { getThemeLight } from "./theme/getThemeLight.js";
+export { getThemeLightPreview } from "./theme/getThemeLightPreview.js";
+
+export { vue3SourceDecorator } from "./decorators/vue3SourceDecorator.js";
 export { storyDarkModeDecorator } from "./decorators/storyDarkModeDecorator.js";
-export { vue3SourceDecorator } from "./decorators/vue3SourceDecorator.js";

package/index.js

@@ -1,4 +1,10 @@
 export { buildWebTypes } from "./webTypes/index.js";
+export { storyDarkModeDecorator } from "./decorators/storyDarkModeDecorator.js";
+export { vue3SourceDecorator } from "./decorators/vue3SourceDecorator.js";
+
+export { getThemeDark } from "./theme/getThemeDark.js";
+export { getThemeLight } from "./theme/getThemeLight.js";
+export { getThemeLightPreview } from "./theme/getThemeLightPreview.js";
 
 import { getVuelessConfig } from "vueless/utils/node/vuelessConfig.js";
 import {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueless/storybook",
-  "version": "1.2.10-beta.5",
+  "version": "1.2.10-beta.7",
   "description": "Simplifies Storybook configuration for Vueless UI library.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -27,7 +27,7 @@
     "@storybook/addon-links": "^10.0.2",
     "@storybook/addon-themes": "^10.0.2",
     "@storybook/vue3-vite": "^10.0.2",
-    "@vueless/storybook-dark-mode": "^10.0.1-beta.0",
+    "@vueless/storybook-dark-mode": "^10.0.1",
     "chokidar": "^4.0.3",
     "esbuild": "^0.25.9",
     "globby": "^14.1.0",
@@ -56,7 +56,7 @@
     "vue": "latest",
     "vue-router": "latest",
     "vue-tsc": "^3.0.6",
-    "vueless": "^1.2.14"
+    "vueless": "^1.3.1"
   },
   "type": "module",
   "main": "index.js",
@@ -66,7 +66,9 @@
       "node": "./index.js",
       "types": "./index.d.ts",
       "browser": "./index.browser.js"
-    }
+    },
+    "./manager.css": "./theme/manager.css",
+    "./preview.css": "./theme/preview.css"
   },
   "overrides": {
     "vue-docgen-api": {

package/theme/getThemeDark.js

@@ -0,0 +1,47 @@
+import { create } from "storybook/theming";
+
+export function getThemeDark(theme) {
+  return create({
+    base: "dark",
+
+    /* Fonts */
+    fontBase: theme.fontBase,
+    fontCode: theme.fontCode,
+
+    /* Brand block */
+    brandTitle: theme.brandTitle,
+    brandUrl: theme.brandUrl,
+    brandImage: theme.brandImageDark,
+    brandTarget: theme.brandTarget,
+
+    /* Main colors */
+    colorPrimary: theme.colors.gray[200],
+    colorSecondary: theme.colors.gray[700],
+
+    /* UI */
+    appBg: theme.colors.gray[900],
+    appPreviewBg: theme.colors.gray[900],
+    appBorderColor: theme.colors.gray[900],
+    appBorderRadius: 0,
+
+    /* Text colors */
+    textColor: theme.colors.gray[300],
+    textInverseColor: theme.colors.gray[800],
+
+    /* Toolbar default and active colors */
+    barTextColor: theme.colors.gray[500],
+    barHoverColor: theme.colors.gray[400],
+    barSelectedColor: theme.colors.gray[300],
+    barBg: theme.colors.gray[950],
+
+    /* Form colors */
+    inputBg: theme.colors.gray[950],
+    inputBorder: theme.colors.gray[600],
+    inputTextColor: theme.colors.gray[100],
+    inputBorderRadius: theme.rounded.sm,
+    buttonBg: theme.colors.gray[800],
+    buttonBorder: theme.colors.gray[800],
+    booleanBg: theme.colors.gray[900],
+    booleanSelectedBg: theme.colors.gray[800],
+  });
+}

package/theme/getThemeLight.js

@@ -0,0 +1,47 @@
+import { create } from "storybook/theming";
+
+export function getThemeLight(theme) {
+  return create({
+    base: "light",
+
+    /* Fonts */
+    fontBase: theme.fontBase,
+    fontCode: theme.fontCode,
+
+    /* Brand block */
+    brandTitle: theme.brandTitle,
+    brandUrl: theme.brandUrl,
+    brandImage: theme.brandImageLight,
+    brandTarget: theme.brandTarget,
+
+    /* Main colors */
+    colorPrimary: theme.colors.gray[900],
+    colorSecondary: theme.colors.gray[500],
+
+    /* UI */
+    appBg: theme.colors.white,
+    appPreviewBg: theme.colors.gray[50],
+    appBorderColor: theme.colors.gray[300],
+    appBorderRadius: 0,
+
+    /* Text colors */
+    textColor: theme.colors.gray[900],
+    textInverseColor: theme.colors.gray[900],
+
+    /* Toolbar default and active colors */
+    barTextColor: theme.colors.gray[500],
+    barHoverColor: theme.colors.gray[600],
+    barSelectedColor: theme.colors.gray[700],
+    barBg: theme.colors.gray[50],
+
+    /* Form colors */
+    inputBg: theme.colors.white,
+    inputBorder: theme.colors.gray[300],
+    inputTextColor: theme.colors.gray[900],
+    inputBorderRadius: theme.rounded.sm,
+    buttonBg: theme.colors.gray[100],
+    buttonBorder: theme.colors.gray[200],
+    booleanBg: theme.colors.gray[50],
+    booleanSelectedBg: theme.colors.gray[200],
+  });
+}

package/theme/getThemeLightPreview.js

@@ -0,0 +1,42 @@
+import { create } from "storybook/theming";
+
+export function getThemeLightPreview(theme) {
+  return create({
+    base: "light",
+
+    /* Fonts */
+    fontBase: theme.fontBase,
+    fontCode: theme.fontCode,
+
+    /* Main colors */
+    colorPrimary: theme.colors.gray[900],
+    colorSecondary: theme.colors.gray[500],
+
+    /* UI */
+    appBg: theme.colors.gray[100],
+    appPreviewBg: theme.colors.gray[50],
+    appBorderColor: theme.colors.gray[200],
+    appContentBg: theme.colors.gray[50],
+    appBorderRadius: theme.rounded.lg,
+
+    /* Text colors */
+    textColor: theme.colors.gray[900],
+    textInverseColor: theme.colors.gray[50],
+
+    /* Toolbar default and active colors */
+    barTextColor: theme.colors.gray[500],
+    barHoverColor: theme.colors.gray[600],
+    barSelectedColor: theme.colors.gray[700],
+    barBg: theme.colors.white,
+
+    /* Form colors */
+    inputBg: theme.colors.white,
+    inputBorder: theme.colors.gray[300],
+    inputTextColor: theme.colors.gray[900],
+    inputBorderRadius: theme.rounded.sm,
+    buttonBg: theme.colors.gray[100],
+    buttonBorder: theme.colors.gray[200],
+    booleanBg: theme.colors.gray[50],
+    booleanSelectedBg: theme.colors.gray[200],
+  });
+}