Fixed grayscale brand color bug.

vuelessjs · May 12, 2024 · 8e3103f · 8e3103f
1 parent c049165
commit 8e3103f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 13 deletions.
diff --git a/src/preset.tailwind/index.js b/src/preset.tailwind/index.js
@@ -2,8 +2,9 @@ import colors from "tailwindcss/colors.js";
 import forms from "@tailwindcss/forms";
 import vuelessConfig from "../../vueless.config.js";
 
-export const grayColors = ["slate", "gray", "zinc", "neutral", "stone"];
-export const brandColors = [
+export const GRAY_COLORS = ["slate", "gray", "zinc", "neutral", "stone"];
+export const GRAYSCALE_BRAND_COLOR = "grayscale";
+export const BRAND_COLORS = [
   "brand",
   "red",
   "orange",
@@ -33,10 +34,10 @@ export function vuelessPreset() {
   const brandColor = twColorWithOpacity("--color-brand");
   const { brand, gray } = vuelessConfig;
 
-  let brandPalette = brandColors.includes(brand) ? colors[brand] : colors.green;
-  let grayPalette = grayColors.includes(gray) ? colors[gray] : colors.zinc;
+  let brandPalette = BRAND_COLORS.includes(brand) ? colors[brand] : colors.green;
+  let grayPalette = GRAY_COLORS.includes(gray) ? colors[gray] : colors.zinc;
 
-  if (brand === "grayscale") {
+  if (brand === GRAYSCALE_BRAND_COLOR) {
     brandPalette = grayPalette;
   }
 

diff --git a/src/service.ui/index.js b/src/service.ui/index.js
@@ -2,7 +2,7 @@ import { merge } from "lodash-es";
 import { defineConfig } from "cva";
 import { twMerge } from "tailwind-merge";
 import colors from "tailwindcss/colors";
-import { brandColors, grayColors } from "../preset.tailwind";
+import { BRAND_COLORS, GRAY_COLORS, GRAYSCALE_BRAND_COLOR } from "../preset.tailwind";
 import vuelessConfig from "../../vueless.config.js";
 
 /*
@@ -105,7 +105,7 @@ export default class UIServiceDefault {
   // TODO: This should be rewrote to support all set of brand colors (not only one).
   setBrandColor(brandColor) {
     function getBrandColor(color, grayColor, brandColors) {
-      if (color === "grayscale") {
+      if (color === GRAYSCALE_BRAND_COLOR) {
         return grayColor;
       }
 
@@ -116,9 +116,9 @@ export default class UIServiceDefault {
       return grayColors.includes(color) ? colors[color][900] : colors.zinc[900];
     }
 
-    const grayColor = getGrayColor(gray, grayColors);
-    const localBrandColor = getBrandColor(brandColor, grayColor, brandColors);
-    const globalBrandColor = getBrandColor(brand, grayColor, brandColors);
+    const grayColor = getGrayColor(gray, GRAY_COLORS);
+    const localBrandColor = getBrandColor(brandColor, grayColor, BRAND_COLORS);
+    const globalBrandColor = getBrandColor(brand, grayColor, BRAND_COLORS);
 
     const style = document.createElement("style");
     const rgb = UIServiceDefault.convertHexInRgb(localBrandColor || globalBrandColor || grayColor);
@@ -167,7 +167,11 @@ export default class UIServiceDefault {
   */
   static get(defaultConfig, name) {
     return {
-      default: merge(defaultConfig.defaultVariants, globalComponentConfig[name]?.defaultVariants),
+      default: merge(
+        defaultConfig.defaultVariants,
+        brand === GRAYSCALE_BRAND_COLOR && { color: GRAYSCALE_BRAND_COLOR },
+        globalComponentConfig[name]?.defaultVariants,
+      ),
     };
   }
 }

diff --git a/src/ui.navigation-stepper/index.vue b/src/ui.navigation-stepper/index.vue
@@ -46,7 +46,7 @@ import colors from "tailwindcss/colors";
 
 import UHeader from "../ui.text-header";
 import UIService from "../service.ui";
-import { grayColors } from "../preset.tailwind";
+import { GRAY_COLORS } from "../preset.tailwind";
 
 import { UStepper } from "./constants/index";
 import defaultConfig from "./configs/default.config";
@@ -112,7 +112,7 @@ const { wrapperAttrs, titleAttrs, stepperAttrs, ringAttrs, countAttrs, gradientA
 const setStepperColor = computed(() => {
   return colors[props.color]
     ? colors[props.color][500]
-    : grayColors.includes(props.color)
+    : GRAY_COLORS.includes(props.color)
       ? colors[props.color][900]
       : colors.zinc[900];
 });