vueless 1.1.1-beta.0 → 1.1.1-beta.2

package/package.json

@@ -1,29 +1,13 @@
 {
   "name": "vueless",
-  "version": "1.1.1-beta.0",
-  "license": "MIT",
+  "version": "1.1.1-beta.2",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
-  "keywords": [
-    "vueless",
-    "vue",
-    "vue.js",
-    "vue3",
-    "ui library",
-    "component library",
-    "vue framework",
-    "design system",
-    "tailwind",
-    "tailwindcss",
-    "unstyled",
-    "styleless",
-    "headlessui",
-    "ui"
-  ],
-  "homepage": "https://vueless.com",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
+  "homepage": "https://vueless.com",
   "style": "tailwind.css",
   "main": "index.ts",
   "type": "module",
+  "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
@@ -74,7 +58,7 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.1.0",
+    "@vueless/storybook": "^1.1.2",
     "eslint": "^9.32.0",
     "eslint-plugin-storybook": "^9.0.18",
     "eslint-plugin-vue": "^10.3.0",
@@ -102,5 +86,21 @@
   },
   "bugs": {
     "url": "https://github.com/vuelessjs/vueless/issues"
-  }
+  },
+  "keywords": [
+    "vueless",
+    "vue",
+    "vue.js",
+    "vue3",
+    "ui library",
+    "component library",
+    "vue framework",
+    "design system",
+    "tailwind",
+    "tailwindcss",
+    "unstyled",
+    "styleless",
+    "headlessui",
+    "ui"
+  ]
 }

package/utils/theme.ts

@@ -170,11 +170,39 @@ export function setTheme(config: ThemeConfig = {}, isCachedAutoMode?: boolean) {
         ? `--vl-grayscale-${shade}`
         : "--vl-grayscale";
 
-      if (!vuelessConfig.darkTheme?.[primaryShade] && !config.darkTheme?.[primaryShade]) {
+      /* Dark theme: if the primary color shade is not defined in global or runtime config, use the grayscale color. */
+
+      const hasGlobalDarkPrimaryColor = hasPrimaryColor(
+        vuelessConfig.darkTheme,
+        DEFAULT_DARK_THEME,
+        primaryShade,
+      );
+
+      const hasRuntimeDarkPrimaryColor = hasPrimaryColor(
+        config.darkTheme,
+        DEFAULT_DARK_THEME,
+        primaryShade,
+      );
+
+      if (!hasGlobalDarkPrimaryColor && !hasRuntimeDarkPrimaryColor) {
         darkTheme[primaryShade] = darkTheme[grayscaleShade];
       }
 
-      if (!vuelessConfig.lightTheme?.[primaryShade] && !config.lightTheme?.[primaryShade]) {
+      /* Light theme: if the primary color shade is not defined in global or runtime config, use the grayscale color. */
+
+      const hasGlobalLightPrimaryColor = hasPrimaryColor(
+        vuelessConfig.lightTheme,
+        DEFAULT_LIGHT_THEME,
+        primaryShade,
+      );
+
+      const hasRuntimeLightPrimaryColor = hasPrimaryColor(
+        config.lightTheme,
+        DEFAULT_LIGHT_THEME,
+        primaryShade,
+      );
+
+      if (!hasGlobalLightPrimaryColor && !hasRuntimeLightPrimaryColor) {
         lightTheme[primaryShade] = lightTheme[grayscaleShade];
       }
     });
@@ -192,6 +220,17 @@ export function setTheme(config: ThemeConfig = {}, isCachedAutoMode?: boolean) {
   });
 }
 
+function hasPrimaryColor(
+  colorModeConfig: Partial<VuelessCssVariables> | undefined,
+  defaultColorModeConfig: Partial<VuelessCssVariables>,
+  primaryShade: keyof VuelessCssVariables,
+) {
+  const shade = colorModeConfig?.[primaryShade];
+  const defaultShade = defaultColorModeConfig?.[primaryShade];
+
+  return shade && shade !== defaultShade;
+}
+
 /**
  * Retrieve primary color value and save them to cookie and localStorage.
  * @return string - primary color.