vueless 0.0.669 → 0.0.671

package/composables/useUI.ts

@@ -123,24 +123,6 @@ export default function useUI<T>(
     const vuelessAttrs = ref({});
 
     const attrs = useAttrs() as KeyAttrs;
-    const isDev = isCSR && import.meta.env?.DEV;
-    const isTopLevelKey = (topLevelClassKey || firstClassKey) === configKey;
-
-    const extendsKeyConfig = getExtendsKeyConfig(configKey);
-    const extendsKeyNestedComponent = getNestedComponent(extendsKeyConfig);
-    const keyNestedComponent = getNestedComponent(config.value[configKey]);
-    const nestedComponent = extendsKeyNestedComponent || keyNestedComponent || componentName;
-
-    const commonAttrs: KeyAttrs = {
-      ...(isTopLevelKey ? attrs : {}),
-      "vl-component": isDev ? attrs["vl-component"] || componentName || null : null,
-      "vl-key": isDev ? attrs["vl-key"] || configKey || null : null,
-      "vl-child-component": isDev && attrs["vl-component"] ? nestedComponent : null,
-      "vl-child-key": isDev && attrs["vl-component"] ? configKey : null,
-    };
-
-    /* Delete value key to prevent v-model overwrite. */
-    delete commonAttrs.value;
 
     const reactiveProps = computed(() => ({ ...props }));
 
@@ -156,8 +138,25 @@ export default function useUI<T>(
         keyConfig = config.value[configKey] as NestedComponent;
       }
 
+      const isDev = isCSR && import.meta.env?.DEV;
+      const isTopLevelKey = (topLevelClassKey || firstClassKey) === configKey;
+
       const extendsClasses = getExtendsClasses(configKey);
       const extendsKeyConfig = getExtendsKeyConfig(configKey);
+      const extendsKeyNestedComponent = getNestedComponent(extendsKeyConfig);
+      const keyNestedComponent = getNestedComponent(config.value[configKey]);
+      const nestedComponent = extendsKeyNestedComponent || keyNestedComponent || componentName;
+
+      const commonAttrs: KeyAttrs = {
+        ...(isTopLevelKey ? attrs : {}),
+        "vl-component": isDev ? attrs["vl-component"] || componentName || null : null,
+        "vl-key": isDev ? attrs["vl-key"] || configKey || null : null,
+        "vl-child-component": isDev && attrs["vl-component"] ? nestedComponent : null,
+        "vl-child-key": isDev && attrs["vl-component"] ? configKey : null,
+      };
+
+      /* Delete value key to prevent v-model overwrite. */
+      delete commonAttrs.value;
 
       vuelessAttrs.value = {
         ...commonAttrs,
@@ -165,6 +164,7 @@ export default function useUI<T>(
         config: getMergedConfig({
           defaultConfig: extendsKeyConfig,
           globalConfig: keyConfig,
+          propsConfig: attrs["config"] || {},
         }),
         ...getDefaults({
           ...(extendsKeyConfig.defaults || {}),

package/constants.js

@@ -108,7 +108,6 @@ export const COMPONENTS = {
   UDatePicker: "ui.form-date-picker",
   UDatePickerRange: "ui.form-date-picker-range",
   ULabel: "ui.form-label",
-  UColorPicker: "ui.form-color-picker",
 
   /* Text & Content */
   UHeader: "ui.text-header",
@@ -154,6 +153,7 @@ export const COMPONENTS = {
 
   /* Other */
   UDot: "ui.other-dot",
+  UThemeColorToggle: "ui.other-theme-color-toggle",
 };
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.669",
+  "version": "0.0.671",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/types.ts

@@ -46,7 +46,7 @@ import URadioGroupConfig from "./ui.form-radio-group/config.ts";
 import USwitchConfig from "./ui.form-switch/config.ts";
 import UTextareaConfig from "./ui.form-textarea/config.ts";
 import ULabelConfig from "./ui.form-label/config.ts";
-import UColorPickerConfig from "./ui.form-color-picker/config.ts";
+import UColorPickerConfig from "./ui.other-theme-color-toggle/config.ts";
 import UInputConfig from "./ui.form-input/config.ts";
 import UInputNumberConfig from "./ui.form-input-number/config.ts";
 import UInputRatingConfig from "./ui.form-input-rating/config.ts";
@@ -159,8 +159,7 @@ export type UnknownType = string | number | boolean | UnknownObject | undefined
 export type ComponentNames = keyof Components & string; // keys union
 export type Strategies = "merge" | "replace" | "override";
 
-export type Gray = "gray";
-export type GrayColors = "slate" | "cool" | "zinc" | "neutral" | "stone";
+export type GrayColors = "slate" | "cool" | "zinc" | "neutral" | "stone" | string;
 export type BrandColors =
   | "grayscale"
   | "red"
@@ -179,7 +178,8 @@ export type BrandColors =
   | "purple"
   | "fuchsia"
   | "pink"
-  | "rose";
+  | "rose"
+  | string;
 
 export interface Directives {
   tooltip?: Partial<Props>;

package/ui.navigation-progress/UStepperProgress.vue

@@ -17,7 +17,6 @@ const props = withDefaults(defineProps<StepperProgressProps>(), {
 
 const stepperColor = computed(() => {
   const isValidColor = (color: string): color is keyof typeof colors => color in colors;
-
   const isGrayColor = (color: string): color is keyof typeof colors => GRAY_COLORS.includes(color);
 
   if (isValidColor(props.color)) {

package/ui.other-theme-color-toggle/UThemeColorToggle.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { computed, useId, watch } from "vue";
+
+import { vTooltip } from "../directives";
+import useUI from "../composables/useUI.ts";
+import { getDefaults } from "../utils/ui.ts";
+import { setTheme, getSelectedBrandColor, getSelectedGrayColor } from "../utils/theme.ts";
+import { GRAYSCALE_COLOR } from "../constants.js";
+
+import UDivider from "../ui.container-divider/UDivider.vue";
+import UButton from "../ui.button/UButton.vue";
+
+import { COMPONENT_NAME } from "./constants.ts";
+import defaultConfig from "./config.ts";
+
+import type { BrandColors, GrayColors } from "../types.ts";
+import type { Props, Config } from "./types.ts";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+  modelValue: () => ["", ""],
+  brandColors: () => ({}),
+  grayColors: () => ({}),
+  brandLabels: () => ({}),
+  grayLabels: () => ({}),
+});
+
+const emit = defineEmits([
+  /**
+   * Triggers when color value changes.
+   * @property {string} value
+   */
+  "update:modelValue",
+]);
+
+const elementId = props.id || useId();
+
+const selectedBrand = getSelectedBrandColor();
+const selectedGray = getSelectedGrayColor();
+
+const selectedItem = computed({
+  get: () => {
+    const [brand, gray] = props.modelValue;
+
+    return [brand || selectedBrand, gray || selectedGray];
+  },
+  set: (value) => emit("update:modelValue", value),
+});
+
+watch(selectedItem, (newValue, oldValue) => {
+  const [oldBrand, oldGray] = oldValue;
+  const [brand, gray] = newValue;
+
+  if (oldBrand === brand && oldGray === gray) {
+    return;
+  }
+
+  setTheme({ brand, gray });
+
+  if (oldBrand !== brand && (brand === GRAYSCALE_COLOR || oldBrand === GRAYSCALE_COLOR)) {
+    window.location.reload();
+  }
+});
+
+function onClickBrandColor(brand: BrandColors) {
+  const [, gray] = selectedItem.value;
+
+  selectedItem.value = [brand, gray];
+}
+
+function onClickGrayColor(gray: GrayColors) {
+  const [brand] = selectedItem.value;
+
+  selectedItem.value = [brand, gray];
+}
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { listAttrs, colorButtonAttrs, circleAttrs, colorDividerAttrs } =
+  useUI<Config>(defaultConfig);
+</script>
+
+<template>
+  <div :id="elementId" v-bind="listAttrs">
+    <UButton
+      v-for="(brandColorClass, color) in brandColors"
+      :key="color"
+      v-tooltip="brandLabels?.[color] || color"
+      square
+      size="xs"
+      :ring="false"
+      color="grayscale"
+      variant="thirdary"
+      :filled="selectedItem[0] === color"
+      v-bind="colorButtonAttrs"
+      @click="onClickBrandColor(color)"
+    >
+      <div :class="brandColorClass" v-bind="circleAttrs" />
+    </UButton>
+
+    <UDivider
+      v-if="Object.keys(brandColors).length && Object.keys(grayColors).length"
+      size="xs"
+      v-bind="colorDividerAttrs"
+    />
+
+    <UButton
+      v-for="(grayColorClass, color) in grayColors"
+      :key="color"
+      v-tooltip="brandLabels?.[color] || color"
+      square
+      size="xs"
+      :ring="false"
+      color="grayscale"
+      variant="thirdary"
+      :filled="selectedItem[1] === color"
+      v-bind="colorButtonAttrs"
+      @click="onClickGrayColor(color)"
+    >
+      <div :class="grayColorClass" v-bind="circleAttrs" />
+    </UButton>
+  </div>
+</template>

package/ui.other-theme-color-toggle/config.ts

@@ -0,0 +1,29 @@
+export default /*tw*/ {
+  list: "flex flex-wrap gap-0.5",
+  colorButton: {
+    base: "{UButton}",
+    button: {
+      compoundVariants: [
+        {
+          filled: true,
+          variant: "thirdary",
+          class: "!bg-gray-800/10 dark:!bg-gray-200/10",
+        },
+      ],
+    },
+  },
+  circle: {
+    base: "rounded-full",
+    variants: {
+      size: {
+        sm: "size-4",
+        md: "size-5",
+        lg: "size-6",
+      },
+    },
+  },
+  colorDivider: "{UDivider}",
+  defaults: {
+    size: "md",
+  },
+};

package/{ui.form-color-picker → ui.other-theme-color-toggle}/constants.ts

@@ -2,4 +2,4 @@
   This const is needed to prevent the issue in script setup:
  `defineProps` is referencing locally declared variables. (vue/valid-define-props)
  */
-export const COMPONENT_NAME = "UColorPicker";
+export const COMPONENT_NAME = "UThemeColorToggle";

package/ui.other-theme-color-toggle/storybook/stories.ts

@@ -0,0 +1,111 @@
+import {
+  getArgTypes,
+  getSlotNames,
+  getSlotsFragment,
+  getDocsDescription,
+} from "../../utils/storybook.ts";
+
+import UThemeColorToggle from "../UThemeColorToggle.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import UButton from "../../ui.button/UButton.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+import type { Props } from "../types.ts";
+
+interface UThemeColorToggleArgs extends Props {
+  slotTemplate?: string;
+  enum: "size";
+}
+
+export default {
+  id: "100020",
+  title: "Other / Theme Color Switcher",
+  component: UThemeColorToggle,
+  args: {
+    modelValue: ["", ""],
+    brandColors: {
+      grayscale: "bg-gray-900",
+      gray: "bg-gray-600",
+      red: "bg-red-600",
+      orange: "bg-orange-600",
+      amber: "bg-amber-600",
+      yellow: "bg-yellow-600",
+      lime: "bg-lime-600",
+      green: "bg-green-600",
+      emerald: "bg-emerald-600",
+      teal: "bg-teal-600",
+      cyan: "bg-cyan-600",
+      sky: "bg-sky-600",
+      blue: "bg-blue-600",
+      indigo: "bg-indigo-600",
+      violet: "bg-violet-600",
+      purple: "bg-purple-600",
+      fuchsia: "bg-fuchsia-600",
+      pink: "bg-pink-600",
+      rose: "bg-rose-600",
+    },
+    grayColors: {
+      slate: "bg-slate-600",
+      cool: "bg-cool-600",
+      zinc: "bg-zinc-600",
+      neutral: "bg-neutral-600",
+      stone: "bg-stone-600",
+    },
+  },
+  argTypes: {
+    ...getArgTypes(UThemeColorToggle.__name),
+  },
+  parameters: {
+    docs: {
+      ...getDocsDescription(UThemeColorToggle.__name),
+    },
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<UThemeColorToggleArgs> = (args: UThemeColorToggleArgs) => ({
+  components: { UThemeColorToggle, UButton, UCol },
+  setup() {
+    const slots = getSlotNames(UThemeColorToggle.__name);
+
+    return { args, slots };
+  },
+  template: `
+    <UCol>
+      <UThemeColorToggle v-bind="args" v-model="args.modelValue">
+        ${args.slotTemplate || getSlotsFragment("")}
+      </UThemeColorToggle>
+
+      <UButton label="Brand button" color="brand"/>
+    </UCol>
+  `,
+});
+
+const EnumVariantTemplate: StoryFn<UThemeColorToggleArgs> = (
+  args: UThemeColorToggleArgs,
+  { argTypes },
+) => ({
+  components: { UCol, UThemeColorToggle },
+  setup() {
+    return {
+      args,
+      options: argTypes?.[args.enum]?.options,
+    };
+  },
+  template: `
+    <UCol>
+      <UThemeColorToggle
+        v-for="(option, index) in options"
+        :key="index"
+        v-bind="args"
+        v-model="args.modelValue"
+        :[args.enum]="option"
+      />
+    </UCol>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Sizes = EnumVariantTemplate.bind({});
+Sizes.args = { enum: "size" };

package/ui.other-theme-color-toggle/types.ts

@@ -0,0 +1,52 @@
+import defaultConfig from "./config.ts";
+
+import type { BrandColors, GrayColors, ComponentConfig } from "../types.ts";
+
+export type Config = typeof defaultConfig;
+
+export interface Props {
+  /**
+   * Selected values.
+   */
+  modelValue: [BrandColors, GrayColors];
+
+  /**
+   * Component size.
+   */
+  size?: "sm" | "md" | "lg";
+
+  /**
+   * Brand color list.
+   */
+  brandColors?: Record<BrandColors, string>;
+
+  /**
+   * Gray color list.
+   */
+  grayColors?: Record<GrayColors, string>;
+
+  /**
+   * Brand color labels.
+   */
+  brandLabels?: Record<BrandColors, string>;
+
+  /**
+   * Gray color labels.
+   */
+  grayLabels?: Record<GrayColors, string>;
+
+  /**
+   * Unique element id.
+   */
+  id?: string;
+
+  /**
+   * Component config object.
+   */
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string;
+}

package/utils/node/mergeConfigs.js

@@ -147,15 +147,17 @@ export function createMergeConfigs(cx) {
       function findItem(config = []) {
         config = cloneDeep(config);
 
-        const globalConfigUniqueItemIndex = globalCompoundVariants.findIndex(isSameItem);
-        const propsConfigUniqueItemIndex = propsCompoundVariants.findIndex(isSameItem);
+        const globalConfigSimilarItemIndex = globalCompoundVariants.findIndex(isSameItem);
+        const propsConfigSimilarItemIndex = propsCompoundVariants.findIndex(isSameItem);
 
-        if (~globalConfigUniqueItemIndex) {
-          globalCompoundVariants.splice(globalConfigUniqueItemIndex, 1);
+        if (~globalConfigSimilarItemIndex) {
+          config.push(globalCompoundVariants[globalConfigSimilarItemIndex]);
+          globalCompoundVariants.splice(globalConfigSimilarItemIndex, 1);
         }
 
-        if (~propsConfigUniqueItemIndex) {
-          propsCompoundVariants.splice(propsConfigUniqueItemIndex, 1);
+        if (~propsConfigSimilarItemIndex) {
+          config.push(propsCompoundVariants[propsConfigSimilarItemIndex]);
+          propsCompoundVariants.splice(propsConfigSimilarItemIndex, 1);
         }
 
         return config.find(isSameItem);

package/utils/node/tailwindSafelist.js

@@ -222,10 +222,6 @@ async function findComponentColors(componentName, files, vuelessConfigFiles) {
       isComponentExists = Boolean(matchedComponent);
     }
 
-    const propsColors = getPropsColors(fileContent);
-
-    propsColors.forEach((color) => colors.add(color));
-
     if (isDefaultConfig) {
       fileContent.match(objectColorRegExp)?.forEach((colorMatch) => {
         const [, color] = objectColorRegExp.exec(colorMatch) || [];
@@ -264,16 +260,6 @@ async function findComponentColors(componentName, files, vuelessConfigFiles) {
   };
 }
 
-function getPropsColors(inputString) {
-  const colorsMatch = inputString.match(/colors:\s*\[(.*?)\]/s);
-
-  if (colorsMatch && colorsMatch[1]) {
-    return colorsMatch[1].split(",").map((color) => color.trim().replace(/['"]/g, ""));
-  }
-
-  return [];
-}
-
 function isDefaultComponentConfig(filePath, componentName) {
   const componentDirName = filePath.split(path.sep).at(-2);
 

package/utils/theme.ts

@@ -5,7 +5,12 @@ import { tailwindConfig } from "./tailwindConfig.ts";
 import { vuelessConfig } from "./ui.ts";
 import { isSSR, isCSR } from "./helper.ts";
 import {
-  BRAND_COLORS,
+  PX_IN_REM,
+  COOL_COLOR,
+  GRAY_COLOR,
+  COLOR_MODE_KEY,
+  LIGHT_MODE_SELECTOR,
+  DARK_MODE_SELECTOR,
   GRAYSCALE_COLOR,
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
@@ -14,13 +19,6 @@ import {
   DEFAULT_GRAY_COLOR,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
   DEFAULT_RING_OFFSET_COLOR_DARK,
-  DARK_MODE_SELECTOR,
-  GRAY_COLORS,
-  PX_IN_REM,
-  COOL_COLOR,
-  GRAY_COLOR,
-  LIGHT_MODE_SELECTOR,
-  COLOR_MODE_KEY,
 } from "../constants.js";
 
 import type {
@@ -35,6 +33,10 @@ import { ColorMode } from "../types.ts";
 
 type DefaultColors = typeof tailwindColors;
 
+interface Colors extends DefaultColors {
+  [key: string]: Partial<TailwindColorShades> | string;
+}
+
 export function themeInit() {
   if (isSSR) return;
 
@@ -97,46 +99,41 @@ export function setColorMode(colorMode: `${ColorMode}`) {
   }
 }
 
+export function getSelectedBrandColor() {
+  return localStorage.getItem("brand") || undefined;
+}
+
+export function getSelectedGrayColor() {
+  return localStorage.getItem("gray") || undefined;
+}
+
 export function setTheme(config: Config = {}) {
-  setColorMode(vuelessConfig.colorMode || config?.colorMode || ColorMode.Light);
+  setColorMode(vuelessConfig.colorMode || config.colorMode || ColorMode.Light);
 
-  const rounding = config?.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;
-  const roundingSm = config?.roundingSm ?? vuelessConfig.roundingSm ?? rounding / 2;
-  const roundingLg = config?.roundingLg ?? vuelessConfig.roundingLg ?? rounding * 2;
+  const rounding = config.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;
+  const roundingSm = config.roundingSm ?? vuelessConfig.roundingSm ?? rounding / 2;
+  const roundingLg = config.roundingLg ?? vuelessConfig.roundingLg ?? rounding * 2;
   const isDarkMode = isCSR && document.documentElement.classList.contains(DARK_MODE_SELECTOR);
 
-  let brand: BrandColors | GrayColors | typeof GRAY_COLOR =
-    config?.brand ?? vuelessConfig.brand ?? DEFAULT_BRAND_COLOR;
+  const brand: BrandColors =
+    config.brand ?? getSelectedBrandColor() ?? vuelessConfig.brand ?? DEFAULT_BRAND_COLOR;
 
-  let gray: GrayColors | typeof GRAY_COLOR =
-    config?.gray ?? vuelessConfig.gray ?? DEFAULT_GRAY_COLOR;
+  let gray: GrayColors =
+    config.gray ?? getSelectedGrayColor() ?? vuelessConfig.gray ?? DEFAULT_GRAY_COLOR;
 
-  const ring = config?.ring ?? vuelessConfig.ring ?? DEFAULT_RING;
-  const ringOffset = config?.ringOffset ?? vuelessConfig.ringOffset ?? DEFAULT_RING_OFFSET;
+  const ring = config.ring ?? vuelessConfig.ring ?? DEFAULT_RING;
+  const ringOffset = config.ringOffset ?? vuelessConfig.ringOffset ?? DEFAULT_RING_OFFSET;
 
   const ringOffsetColorDark =
-    config?.ringOffsetColorDark ??
+    config.ringOffsetColorDark ??
     vuelessConfig.ringOffsetColorDark ??
     DEFAULT_RING_OFFSET_COLOR_DARK;
 
   const ringOffsetColorLight =
-    config?.ringOffsetColorLight ??
+    config.ringOffsetColorLight ??
     vuelessConfig.ringOffsetColorLight ??
     DEFAULT_RING_OFFSET_COLOR_LIGHT;
 
-  const isBrandColor = [...BRAND_COLORS, GRAYSCALE_COLOR].some((color) => color === brand);
-  const isGrayColor = GRAY_COLORS.some((color) => color === gray);
-
-  if (!isBrandColor) {
-    // eslint-disable-next-line no-console
-    console.warn(`Brand color '${brand}' is incorrect.`);
-  }
-
-  if (!isGrayColor) {
-    // eslint-disable-next-line no-console
-    console.warn(`Gray color '${gray}' is incorrect.`);
-  }
-
   const defaultBrandShade = isDarkMode ? 400 : 600;
   const defaultGrayShade = isDarkMode ? 400 : 600;
   const defaultRingOffsetColor = isDarkMode ? ringOffsetColorDark : ringOffsetColorLight;
@@ -145,10 +142,6 @@ export function setTheme(config: Config = {}) {
     gray = GRAY_COLOR;
   }
 
-  if (brand === GRAYSCALE_COLOR) {
-    brand = gray;
-  }
-
   /* Remove deprecated color aliases. */
   delete (tailwindColors as Partial<DefaultColors>).lightBlue;
   delete (tailwindColors as Partial<DefaultColors>).warmGray;
@@ -156,12 +149,29 @@ export function setTheme(config: Config = {}) {
   delete (tailwindColors as Partial<DefaultColors>).coolGray;
   delete (tailwindColors as Partial<DefaultColors>).blueGray;
 
-  const colors: DefaultColors = merge(
-    tailwindColors,
+  const colors: Colors = merge(
+    tailwindColors as Colors,
     tailwindConfig?.theme?.extend?.colors || {},
     vuelessConfig.tailwindTheme?.extend?.colors || {},
   );
 
+  const projectColors = Object.keys(colors);
+  const isBrandColor = projectColors.some((color) => color === brand) || brand === GRAYSCALE_COLOR;
+  const isGrayColor = projectColors.some((color) => color === gray);
+
+  if (!isBrandColor) {
+    // eslint-disable-next-line no-console
+    console.warn(`The brand color '${brand}' is missing in your palette.`);
+  }
+
+  if (!isGrayColor) {
+    // eslint-disable-next-line no-console
+    console.warn(`The gray color '${gray}' is missing in your palette.`);
+  }
+
+  localStorage.setItem("brand", brand);
+  localStorage.setItem("gray", gray);
+
   const variables: Partial<VuelessCssVariables> = {
     "--vl-rounding-sm": `${Number(roundingSm) / PX_IN_REM}rem`,
     "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
@@ -169,23 +179,23 @@ export function setTheme(config: Config = {}) {
     "--vl-ring": `${ring}px`,
     "--vl-ring-offset": `${ringOffset}px`,
     "--vl-ring-offset-color": convertHexInRgb(defaultRingOffsetColor),
-    "--vl-color-gray-default": convertHexInRgb(colors[gray][defaultBrandShade]),
-    "--vl-color-brand-default": convertHexInRgb(colors[brand][defaultGrayShade]),
+    "--vl-color-gray-default": convertHexInRgb(colors[gray]?.[defaultBrandShade]),
+    "--vl-color-brand-default": convertHexInRgb(colors[brand]?.[defaultGrayShade]),
   };
 
-  for (const key in colors[gray]) {
+  for (const key in colors[gray] as TailwindColorShades) {
     const shade = key as unknown as keyof TailwindColorShades;
 
     variables[`--vl-color-gray-${key}` as keyof VuelessCssVariables] = convertHexInRgb(
-      colors[gray][shade],
+      colors[gray]?.[shade],
     );
   }
 
-  for (const key in colors[brand]) {
+  for (const key in colors[brand] as TailwindColorShades) {
     const shade = key as unknown as keyof TailwindColorShades;
 
     variables[`--vl-color-brand-${key}` as keyof VuelessCssVariables] = convertHexInRgb(
-      colors[brand][shade],
+      colors[brand]?.[shade],
     );
   }
 
@@ -205,7 +215,9 @@ export function setTheme(config: Config = {}) {
   return rootVariables;
 }
 
-export function convertHexInRgb(hex: string) {
+export function convertHexInRgb(hex?: string) {
+  if (!hex) return;
+
   const color = hex.replace(/#/g, "");
 
   let r, g, b;

package/utils/ui.ts

@@ -4,10 +4,10 @@ import { extendTailwindMerge } from "tailwind-merge";
 import { isCSR, isSSR } from "./helper.ts";
 import { createGetMergedConfig } from "./node/mergeConfigs.js";
 import { COMPONENT_NAME as U_ICON } from "../ui.image-icon/constants.ts";
+import { getSelectedBrandColor } from "./theme.ts";
 import {
   BRAND_COLOR,
   GRAYSCALE_COLOR,
-  DEFAULT_BRAND_COLOR,
   ICON_NON_PROPS_DEFAULTS,
   TAILWIND_MERGE_EXTENSION,
   NESTED_COMPONENT_PATTERN_REG_EXP,
@@ -129,10 +129,10 @@ export function getDefaults<Props, Config>(defaultConfig: Config, name: Componen
  * Otherwise return given color.
  */
 export function getColor(color: string) {
-  const isBrandColorGrayscale = (vuelessConfig.brand ?? DEFAULT_BRAND_COLOR) === GRAYSCALE_COLOR;
   const isComponentColorBrand = color === BRAND_COLOR;
+  const isSelectedColorGrayscale = getSelectedBrandColor() === GRAYSCALE_COLOR;
 
-  return isBrandColorGrayscale && isComponentColorBrand ? GRAYSCALE_COLOR : color;
+  return isComponentColorBrand && isSelectedColorGrayscale ? GRAYSCALE_COLOR : color;
 }
 
 /**

package/ui.form-color-picker/UColorPicker.vue

@@ -1,118 +0,0 @@
-<script setup lang="ts">
-import { computed, useId } from "vue";
-
-import useUI from "../composables/useUI.ts";
-import { getDefaults } from "../utils/ui.ts";
-
-import UIcon from "../ui.image-icon/UIcon.vue";
-import URadio from "../ui.form-radio/URadio.vue";
-import ULabel from "../ui.form-label/ULabel.vue";
-
-import { COMPONENT_NAME } from "./constants.ts";
-import defaultConfig from "./config.ts";
-
-import type { Props, Config } from "./types.ts";
-import type { BrandColors } from "../types.ts";
-
-defineOptions({ inheritAttrs: false });
-
-const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
-  colorOptions: () =>
-    getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME).colorOptions as BrandColors[],
-  modelValue: "",
-  label: "",
-});
-
-const emit = defineEmits([
-  /**
-   * Triggers when color value changes.
-   * @property {string} value
-   */
-  "update:modelValue",
-]);
-
-const elementId = props.id || useId();
-
-const selectedItem = computed({
-  get: () => props.modelValue,
-  set: (value) => emit("update:modelValue", value),
-});
-
-function onUpdateValue(value: string) {
-  selectedItem.value = value;
-}
-
-/**
- * Get element / nested component attributes for each config token ✨
- * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
- */
-const {
-  config,
-  colorPickerLabelAttrs,
-  listAttrs,
-  colorPickerRadioAttrs,
-  unselectedColorPickerRadioAttrs,
-  unselectedIconAttrs,
-  unselectedAttrs,
-} = useUI<Config>(defaultConfig);
-</script>
-
-<template>
-  <ULabel
-    :label="label"
-    :description="description"
-    :disabled="disabled"
-    :error="error"
-    :size="size"
-    align="topWithDesc"
-    v-bind="colorPickerLabelAttrs"
-    :data-test="dataTest"
-  >
-    <template #label>
-      <!--
-        @slot Use this to add custom content instead of the label.
-        @binding {string} label
-      -->
-      <slot name="label" :label="label" />
-    </template>
-
-    <div v-bind="listAttrs">
-      <div v-bind="unselectedAttrs">
-        <URadio
-          :id="elementId"
-          :name="name"
-          :size="size"
-          color="gray"
-          :checked="selectedItem === ''"
-          :disabled="disabled"
-          v-bind="unselectedColorPickerRadioAttrs"
-          @update:model-value="onUpdateValue('')"
-        />
-
-        <label :for="elementId">
-          <UIcon
-            v-if="selectedItem === ''"
-            internal
-            color="gray"
-            :name="config.defaults.unselectedIcon"
-            v-bind="unselectedIconAttrs"
-          />
-        </label>
-      </div>
-
-      <URadio
-        v-for="(color, index) in colorOptions"
-        :key="index"
-        :name="name"
-        :size="size"
-        :value="color"
-        :color="color"
-        :checked="selectedItem === color"
-        :disabled="disabled"
-        v-bind="colorPickerRadioAttrs"
-        @update:model-value="onUpdateValue(color)"
-      />
-    </div>
-  </ULabel>
-</template>

package/ui.form-color-picker/config.ts

@@ -1,63 +0,0 @@
-export default /*tw*/ {
-  colorPickerLabel: "{ULabel}",
-  list: {
-    base: "flex flex-wrap",
-    variants: {
-      size: {
-        sm: "gap-2 mt-px",
-        md: "gap-3 mt-0.5",
-        lg: "gap-3 mt-1",
-      },
-    },
-  },
-  unselected: "relative flex",
-  unselectedIcon: {
-    base: "{UIcon} absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full",
-    defaults: {
-      size: {
-        xs: "3xs",
-        sm: "2xs",
-        md: "xs",
-        lg: "sm",
-        xl: "md",
-      },
-    },
-  },
-  unselectedColorPickerRadio: {
-    base: "{URadio}",
-    radio: "checked:text-white !border-gray-300",
-  },
-  colorPickerRadio: {
-    base: "{URadio}",
-    radio: `
-      bg-{color}-600 border-{color}-600 hover:border-{color}-600 active:bg-{color}-800
-      disabled:border-{color}-400 disabled:bg-{color}-400
-    `,
-  },
-  defaults: {
-    size: "md",
-    name: "colorPicker",
-    disabled: false,
-    colorOptions: [
-      "red",
-      "orange",
-      "amber",
-      "yellow",
-      "lime",
-      "green",
-      "emerald",
-      "teal",
-      "cyan",
-      "sky",
-      "blue",
-      "indigo",
-      "violet",
-      "purple",
-      "fuchsia",
-      "pink",
-      "rose",
-    ],
-    /* icons */
-    unselectedIcon: "close",
-  },
-};

package/ui.form-color-picker/storybook/stories.ts

@@ -1,86 +0,0 @@
-import {
-  getArgTypes,
-  getSlotNames,
-  getSlotsFragment,
-  getDocsDescription,
-} from "../../utils/storybook.ts";
-
-import UColorPicker from "../../ui.form-color-picker/UColorPicker.vue";
-import UCol from "../../ui.container-col/UCol.vue";
-
-import type { Meta, StoryFn } from "@storybook/vue3";
-import type { Props } from "../types.ts";
-
-interface UColorPickerArgs extends Props {
-  slotTemplate?: string;
-  enum: "size";
-}
-
-export default {
-  id: "3210",
-  title: "Form Inputs & Controls / Color Picker",
-  component: UColorPicker,
-  args: {
-    label: "Label",
-    modelValue: "",
-  },
-  argTypes: {
-    ...getArgTypes(UColorPicker.__name),
-  },
-  parameters: {
-    docs: {
-      ...getDocsDescription(UColorPicker.__name),
-    },
-  },
-} as Meta;
-
-const DefaultTemplate: StoryFn<UColorPickerArgs> = (args: UColorPickerArgs) => ({
-  components: { UColorPicker },
-  setup() {
-    const slots = getSlotNames(UColorPicker.__name);
-
-    return { args, slots };
-  },
-  template: `
-    <UColorPicker v-bind="args" v-model="args.modelValue">
-      ${args.slotTemplate || getSlotsFragment("")}
-    </UColorPicker>
-  `,
-});
-
-const EnumVariantTemplate: StoryFn<UColorPickerArgs> = (args: UColorPickerArgs, { argTypes }) => ({
-  components: { UCol, UColorPicker },
-  setup() {
-    return {
-      args,
-      options: argTypes?.[args.enum]?.options,
-    };
-  },
-  template: `
-    <UCol>
-      <UColorPicker
-        v-for="(option, index) in options"
-        :key="index"
-        v-bind="args"
-        v-model="args.modelValue"
-        :[args.enum]="option"
-        :name="option"
-      />
-    </UCol>
-  `,
-});
-
-export const Default = DefaultTemplate.bind({});
-Default.args = { name: "Default" };
-
-export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { name: "Sizes", enum: "size" };
-
-export const Description = DefaultTemplate.bind({});
-Description.args = { name: "Description", description: "Description" };
-
-export const Error = DefaultTemplate.bind({});
-Error.args = { name: "Error", error: "some error" };
-
-export const Disabled = DefaultTemplate.bind({});
-Disabled.args = { name: "Disabled", disabled: true };

package/ui.form-color-picker/types.ts

@@ -1,62 +0,0 @@
-import defaultConfig from "./config.ts";
-
-import type { BrandColors, ComponentConfig } from "../types.ts";
-
-export type Config = typeof defaultConfig;
-
-export interface Props {
-  /**
-   * Color picker selected value.
-   */
-  modelValue?: string;
-
-  /**
-   * Color picker name.
-   */
-  name?: string;
-
-  /**
-   * Color picker label.
-   */
-  label?: string;
-
-  /**
-   * Color picker description.
-   */
-  description?: string;
-
-  /**
-   * Error message.
-   */
-  error?: string;
-
-  /**
-   * Color picker size.
-   */
-  size?: "sm" | "md" | "lg";
-
-  /**
-   * Color picker color list.
-   */
-  colorOptions?: BrandColors[];
-
-  /**
-   * Set color picker disabled.
-   */
-  disabled?: boolean;
-
-  /**
-   * Unique element id.
-   */
-  id?: string;
-
-  /**
-   * Component config object.
-   */
-  config?: ComponentConfig<Config>;
-
-  /**
-   * Data-test attribute for automated testing.
-   */
-  dataTest?: string;
-}