vueless 0.0.73 → 0.0.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.73",
+  "version": "0.0.74",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/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;
   }
 

package/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,
+      ),
     };
   }
 }

package/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];
 });

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.73",
+  "version": "0.0.74",
   "contributions": {
     "html": {
       "description-markup": "markdown",