vueless 0.0.50 → 0.0.52

package/adatper.locale/locales/en.js

@@ -8,6 +8,7 @@ import calendarConfig from "../../ui.form-calendar/configs/default.config";
 import datepickerConfig from "../../ui.form-date-picker/configs/default.config";
 import datepickerRangeConfig from "../../ui.form-date-picker-range/configs/default.config";
 import dataListConfig from "../../ui.data-list/configs/default.config";
+import notifyDefaultConfig from "../../ui.notify/configs/default.config";
 
 export default {
   USelect: selectConfig.i18n,
@@ -20,4 +21,5 @@ export default {
   UDatePicker: datepickerConfig.i18n,
   UDatePickerRange: datepickerRangeConfig.i18n,
   UDataList: dataListConfig.i18n,
+  UNotify: notifyDefaultConfig.i18n,
 };

package/composable.breakpoint/index.js

@@ -0,0 +1,93 @@
+import { onMounted, ref, watch, computed } from "vue";
+
+const BREAKPOINT_NAME = {
+  xs: "xs",
+  sm: "sm",
+  md: "md",
+  lg: "lg",
+  xl: "xl",
+  "2xl": "2xl",
+};
+
+const BREAKPOINT = {
+  xs: 0,
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536,
+};
+
+const mobileDevices = ["xs", "sm"];
+const portableDevices = ["xs", "sm", "md"];
+
+export default function useBreakpoint() {
+  let timeout;
+
+  const windowWidth = ref(undefined);
+  const currentBreakpoint = ref(BREAKPOINT_NAME.xs);
+
+  const isMobileBreakpoint = computed(() => {
+    return mobileDevices.includes(currentBreakpoint.value);
+  });
+
+  const isTabletBreakpoint = computed(() => {
+    return mobileDevices.includes(currentBreakpoint.value);
+  });
+
+  const isLaptopBreakpoint = computed(() => {
+    return currentBreakpoint.value === BREAKPOINT_NAME.lg;
+  });
+
+  const isPortableBreakpoint = computed(() => {
+    return portableDevices.includes(currentBreakpoint.value);
+  });
+
+  const elementSize = computed(() => {
+    return isMobileBreakpoint.value ? BREAKPOINT_NAME.md : BREAKPOINT_NAME.lg;
+  });
+
+  onMounted(() => {
+    windowWidth.value = window.innerWidth;
+
+    window.addEventListener(resizeListener, { passive: true });
+  });
+
+  watch(windowWidth, setBreakpoint, { immediate: true });
+
+  function resizeListener() {
+    if (timeout) {
+      window.cancelAnimationFrame(timeout);
+    }
+
+    timeout = window.requestAnimationFrame(() => {
+      windowWidth.value = window.innerWidth;
+    });
+  }
+
+  function setBreakpoint(newWindowWidth) {
+    if (newWindowWidth === undefined) return;
+
+    currentBreakpoint.value = "xs";
+
+    if (newWindowWidth >= BREAKPOINT.sm && newWindowWidth < BREAKPOINT.smd) {
+      currentBreakpoint.value = "sm";
+    } else if (newWindowWidth >= BREAKPOINT.md && newWindowWidth < BREAKPOINT.lg) {
+      currentBreakpoint.value = "md";
+    } else if (newWindowWidth >= BREAKPOINT.lg && newWindowWidth < BREAKPOINT.xl) {
+      currentBreakpoint.value = "lg";
+    } else if (newWindowWidth >= BREAKPOINT.xl && newWindowWidth < BREAKPOINT["2xl"]) {
+      currentBreakpoint.value = "xl";
+    } else if (newWindowWidth >= BREAKPOINT["2xl"]) {
+      currentBreakpoint.value = "2xl";
+    }
+  }
+
+  return {
+    isLaptopBreakpoint,
+    isTabletBreakpoint,
+    isMobileBreakpoint,
+    isPortableBreakpoint,
+    elementSize,
+  };
+}

package/index.js

@@ -2,6 +2,15 @@ import { createLocale, LocaleSymbol } from "./composable.locale";
 
 export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n";
 export { default as defaultEnLocale } from "./adatper.locale/locales/en";
+export {
+  notify,
+  notifySuccess,
+  notifyWarning,
+  notifyError,
+  clearAllNotifications,
+  setDelayedNotify,
+  getDelayedNotify,
+} from "./ui.notify/services";
 
 export function createVueless(options = {}) {
   const locale = createLocale(options.locale);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.50",
+  "version": "0.0.52",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -11,8 +11,8 @@
     "access": "public"
   },
   "scripts": {
-    "lint": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore src/ .storybook/ tests/",
-    "lint:fix": "eslint --ext .vue,.js,.ts --fix --ignore-path .eslintignore src/ .storybook/ tests/",
+    "lint": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore src/ .storybook/",
+    "lint:fix": "eslint --ext .vue,.js,.ts --fix --ignore-path .eslintignore src/ .storybook/",
     "lint:ci": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore --max-warnings=0",
     "release:patch": "release-it patch --ci --npm.publish",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
@@ -24,7 +24,6 @@
     "package:prepare": "node src/gen.web-types && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && rm -rf dist/assets && node dist.prepare"
   },
   "dependencies": {
-    "@kyvg/vue3-notification": "^3.2.1",
     "@material-symbols/svg-500": "^0.17.3",
     "@tailwindcss/forms": "^0.5.7",
     "@uppy/core": "^3.10.1",
@@ -35,8 +34,7 @@
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
     "vue-tippy": "^6.0.0-beta.0",
-    "vuedraggable": "^4.1.0",
-    "vuex": "^4.1.0"
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@release-it/bumper": "^6.0.1",

package/service.ui/index.js

@@ -102,6 +102,7 @@ export default class UIServiceDefault {
     return color.length === 6 || color.length === 3 ? `${r}, ${g}, ${b}` : "";
   }
 
+  // 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") {

package/ui.button/composables/attrs.composable.js

@@ -6,7 +6,7 @@ import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props) {
   const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
-  const { button } = config.value;
+  const { button, text } = config.value;
 
   const cvaButton = cva({
     base: button.base,
@@ -14,6 +14,12 @@ export function useAttrs(props) {
     compoundVariants: button.compoundVariants,
   });
 
+  const cvaText = cva({
+    base: text.base,
+    variants: text.variants,
+    compoundVariants: text.compoundVariants,
+  });
+
   const buttonClasses = computed(() =>
     setColor(
       cvaButton({
@@ -31,8 +37,9 @@ export function useAttrs(props) {
     ),
   );
 
+  const textClasses = computed(() => setColor(cvaText({ color: props.color }), props.color));
   const buttonAttrs = getAttrs("button", { classes: buttonClasses });
-  const textAttrs = getAttrs("text");
+  const textAttrs = getAttrs("text", { classes: textClasses });
 
   return {
     textAttrs,

package/ui.button-link/composables/attrs.composable.js

@@ -9,7 +9,7 @@ export function useAttrs(props) {
   const slots = useSlots();
 
   const { config, getAttrs, hasSlotContent, setColor } = useUI(defaultConfig, () => props.config);
-  const { wrapper, link, text } = config.value;
+  const { wrapper, link, text, rightSlot, leftSlot } = config.value;
 
   const cvaWrapper = cva({
     base: wrapper.base,
@@ -29,6 +29,18 @@ export function useAttrs(props) {
     compoundVariants: text.compoundVariants,
   });
 
+  const cvaRightSlot = cva({
+    base: rightSlot.base,
+    variants: rightSlot.variants,
+    compoundVariants: rightSlot.compoundVariants,
+  });
+
+  const cvaLeftSlot = cva({
+    base: leftSlot.base,
+    variants: leftSlot.variants,
+    compoundVariants: leftSlot.compoundVariants,
+  });
+
   const wrapperClasses = computed(() =>
     setColor(
       cvaWrapper({
@@ -56,6 +68,14 @@ export function useAttrs(props) {
 
   const textClasses = computed(() => setColor(cvaText({ color: props.color }), props.color));
 
+  const rightSlotClasses = computed(() =>
+    setColor(cvaRightSlot({ color: props.color }), props.color),
+  );
+
+  const leftSlotClasses = computed(() =>
+    setColor(cvaLeftSlot({ color: props.color }), props.color),
+  );
+
   const wrapperAttrsRaw = getAttrs("wrapper", { classes: wrapperClasses });
 
   const wrapperAttrs = computed(() => {
@@ -83,8 +103,8 @@ export function useAttrs(props) {
     };
   });
 
-  const rightSlotAttrs = getAttrs("rightSlot");
-  const leftSlotAttrs = getAttrs("leftSlot");
+  const rightSlotAttrs = getAttrs("rightSlot", { classes: rightSlotClasses });
+  const leftSlotAttrs = getAttrs("leftSlot", { classes: leftSlotClasses });
   const textAttrs = getAttrs("text", { classes: textClasses });
 
   return {

package/ui.button-toggle/configs/default.config.js

@@ -4,6 +4,7 @@ export default /*tw*/ {
     [&>*:first-child]:rounded-l-lg [&>*:first-child]:rounded-r-none [&>*:first-child]:overflow-hidden
     [&>*:last-child]:rounded-r-lg [&>*:last-child]:rounded-l-none [&>*:last-child]:overflow-hidden
   `,
+  toggleItem: "",
   defaultVariants: {
     size: "md",
     block: false,

package/ui.container-card/composable/attrs.composable.js

@@ -4,7 +4,7 @@ import { cva, cx } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props, { isMobileDevice }) {
+export function useAttrs(props, { isMobileBreakpoint }) {
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
   const { wrapper } = config.value;
 
@@ -33,7 +33,7 @@ export function useAttrs(props, { isMobileDevice }) {
 
   const footerAttrs = computed(() => {
     const footerMobileReverseClasses =
-      props.mobileFooterReverse && isMobileDevice.value && config.value.footerMobileReverse;
+      props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse;
 
     return {
       ...footerAttrsRaw.value,

package/ui.container-card/index.vue

@@ -40,7 +40,6 @@
 
 <script setup>
 import { computed, useSlots } from "vue";
-import { useStore } from "vuex";
 
 import UIService from "../service.ui";
 import UHeader from "../ui.text-header";
@@ -49,11 +48,11 @@ import UDivider from "../ui.container-divider";
 import { UCard } from "./constants";
 import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composable/attrs.composable";
+import useBreakpoint from "../composable.breakpoint";
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UCard", inheritAttrs: false });
 
-const store = useStore();
 const slots = useSlots();
 
 const props = defineProps({
@@ -127,9 +126,7 @@ const isShownFooter = computed(() => {
   return hasSlotContent(slots["footer-left"]) || hasSlotContent(slots["footer-right"]);
 });
 
-const isMobileDevice = computed(() => {
-  return store.getters["breakpoint/isMobileDevice"];
-});
+const { isMobileBreakpoint } = useBreakpoint();
 
 const {
   hasSlotContent,
@@ -142,5 +139,5 @@ const {
   descriptionAttrs,
   contentAttrs,
   footerAttrs,
-} = useAttrs(props, { isMobileDevice });
+} = useAttrs(props, { isMobileBreakpoint });
 </script>

package/ui.container-modal/composables/attrs.composable.js

@@ -2,13 +2,14 @@ import useUI from "../../composable.ui";
 import { cva, cx } from "../../service.ui";
 
 import defaultConfig from "../configs/default.config";
-import { useStore } from "vuex";
 import { computed } from "vue";
 
+import useBreakpoint from "../../composable.breakpoint";
+
 export function useAttrs(props) {
-  const store = useStore();
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config, "wrapper");
   const { modal } = config.value;
+  const { isMobileBreakpoint } = useBreakpoint();
 
   const cvaModal = cva({
     base: modal.base,
@@ -44,9 +45,7 @@ export function useAttrs(props) {
     ...headerAttrsRaw.value,
     class: cx([
       headerAttrsRaw.value.class,
-      props.mobileFooterReverse &&
-        store.getters["breakpoint/isMobileDevice"] &&
-        config.value.footerMobileReverse,
+      props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
     ]),
   }));
 
@@ -54,9 +53,7 @@ export function useAttrs(props) {
     ...footerAttrsRaw.value,
     class: cx([
       footerAttrsRaw.value.class,
-      props.mobileFooterReverse &&
-        store.getters["breakpoint/isMobileDevice"] &&
-        config.value.footerMobileReverse,
+      props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
     ]),
   }));
 

package/ui.container-modal-confirm/composable/attrs.composable.js

@@ -1,13 +1,63 @@
 import useUI from "../../composable.ui";
 import defaultConfig from "../configs/default.config";
+import { cva } from "../../service.ui/index.js";
+import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, hasSlotContent, setColor } = useUI(defaultConfig, () => props.config);
+  const { modal, footerLeftFallback, confirmButton, cancelButton } = config.value;
 
-  const modalAttrs = getAttrs("modal", { isComponent: true });
-  const footerLeftFallbackAttrs = getAttrs("footerLeftFallback");
-  const confirmButtonAttrs = getAttrs("confirmButton", { isComponent: true });
-  const cancelButtonAttrs = getAttrs("cancelButton", { isComponent: true });
+  const cvaModal = cva({
+    base: modal.base,
+    variants: modal.variants,
+    compoundVariants: modal.compoundVariants,
+  });
+
+  const cvaFooterLeftFallback = cva({
+    base: footerLeftFallback.base,
+    variants: footerLeftFallback.variants,
+    compoundVariants: footerLeftFallback.compoundVariants,
+  });
+
+  const cvaConfirmButton = cva({
+    base: confirmButton.base,
+    variants: confirmButton.variants,
+    compoundVariants: confirmButton.compoundVariants,
+  });
+
+  const cvaCancelButton = cva({
+    base: cancelButton.base,
+    variants: cancelButton.variants,
+    compoundVariants: cancelButton.compoundVariants,
+  });
+
+  const modalClasses = computed(() => setColor(cvaModal({ color: props.color }), props.color));
+
+  const footerLeftFallbackClasses = computed(() =>
+    setColor(cvaFooterLeftFallback({ color: props.color }), props.color),
+  );
+
+  const confirmButtonClasses = computed(() => cvaConfirmButton({ color: props.color }));
+
+  const cancelButtonClasses = computed(() => cvaCancelButton({ color: props.color }));
+
+  const modalAttrsRaw = getAttrs("modal", { isComponent: true, classes: modalClasses });
+  const footerLeftFallbackAttrs = getAttrs("footerLeftFallback", {
+    classes: footerLeftFallbackClasses,
+  });
+  const confirmButtonAttrs = getAttrs("confirmButton", {
+    isComponent: true,
+    classes: confirmButtonClasses,
+  });
+  const cancelButtonAttrs = getAttrs("cancelButton", {
+    isComponent: true,
+    classes: cancelButtonClasses,
+  });
+
+  const modalAttrs = computed(() => ({
+    ...modalAttrsRaw.value,
+    class: setColor(modalAttrsRaw.value.class, props.color),
+  }));
 
   return {
     config,

package/ui.container-page/composables/attrs.composable.js

@@ -4,7 +4,7 @@ import { cva, cx, isMobileApp } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
-export function useAttrs(props, { isMobileDevice }) {
+export function useAttrs(props, { isMobileBreakpoint }) {
   const { config, getAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
   const { wrapper, page, rightRounding } = config.value;
 
@@ -62,7 +62,7 @@ export function useAttrs(props, { isMobileDevice }) {
     ...wrapperAttrsRaw.value,
     class: cx([
       wrapperAttrsRaw.value.class,
-      isMobileDevice.value && !isMobileApp && config.value.wrapperMobile,
+      isMobileBreakpoint.value && !isMobileApp && config.value.wrapperMobile,
     ]),
   }));
 
@@ -70,7 +70,7 @@ export function useAttrs(props, { isMobileDevice }) {
     ...footerAttrsRaw.value,
     class: cx([
       footerAttrsRaw.value.class,
-      props.mobileFooterReverse && isMobileDevice.value && config.value.footerMobileReverse,
+      props.mobileFooterReverse && isMobileBreakpoint.value && config.value.footerMobileReverse,
     ]),
   }));
 

package/ui.container-page/index.vue

@@ -66,7 +66,8 @@
 
 <script setup>
 import { computed, useSlots, onMounted } from "vue";
-import { useStore } from "vuex";
+
+import useBreakpoint from "../composable.breakpoint";
 
 import ULink from "../ui.button-link/index.vue";
 import UIcon from "../ui.image-icon/index.vue";
@@ -79,7 +80,6 @@ import { UPage } from "./constants";
 import { useAttrs } from "./composables/attrs.composable";
 
 const slots = useSlots();
-const store = useStore();
 
 /* Should be a string for correct web-types gen */
 defineOptions({ name: "UPage", inheritAttrs: false });
@@ -168,9 +168,7 @@ const props = defineProps({
   },
 });
 
-const isMobileDevice = computed(() => {
-  return store.getters["breakpoint/isMobileDevice"];
-});
+const { isMobileBreakpoint } = useBreakpoint();
 
 const {
   config,
@@ -190,7 +188,7 @@ const {
   footerRightAttrs,
   rightRoundingWrapperAttrs,
   hasSlotContent,
-} = useAttrs(props, { isMobileDevice });
+} = useAttrs(props, { isMobileBreakpoint });
 
 const isShownHeader = computed(() => {
   const isHeaderLeftSlot = hasSlotContent(slots["header-left"]);

package/ui.form-calendar/configs/default.config.js

@@ -1,9 +1,9 @@
 export default /*tw*/ {
-  wrapper: "w-fit overflow-hidden rounded-lg border focus:outline-none border-gray-300 bg-white px-1 pb-4 shadow",
+  wrapper: "w-fit overflow-hidden rounded-lg border focus:outline-none border-brand-300 bg-white px-1 pb-4 shadow",
   navigation: "flex items-center justify-between px-3 pt-2",
   navigationSwitchViewButton: "",
   dayViewSwitchLabel: "flex gap-1",
-  dayViewSwitchLabelMonth: "text-gray-900",
+  dayViewSwitchLabelMonth: "text-brand-900",
   dayViewSwitchLabelIcon: "",
   dayViewSwitchLabelIconName: "keyboard_arrow_right",
   nextPrevWrapper: {
@@ -21,35 +21,35 @@ export default /*tw*/ {
   prevIconName: "keyboard_arrow_left",
   dayViewWrapper: "w-64 px-3 pt-2",
   weekDaysWrapper: "grid grid-cols-7",
-  weekDay: "flex size-8 items-center justify-center text-xs uppercase text-gray-500",
+  weekDay: "flex size-8 items-center justify-center text-xs uppercase text-brand-500",
   daysWrapper: "grid grid-cols-7",
-  day: "mx-auto size-8 rounded-lg text-sm hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed",
-  activeDay: "bg-gray-100 hover:bg-gray-100",
-  inRangeFirstDay: "rounded-none rounded-l-lg bg-gray-200 text-gray-900 hover:bg-gray-200",
-  inRangeLastDay: "rounded-none rounded-r-lg bg-gray-200 text-gray-900 hover:bg-gray-200",
-  inRangeDay: "bg-gray-100 text-gray-900 hover:!bg-gray-200 rounded-none",
-  selectedDay: "bg-gray-900 text-white hover:bg-gray-900",
-  currentDay: "hover:bg-gray-100 border-2 border-gray-900",
-  anotherMonthDay: "hover:bg-gray-100 text-gray-400",
+  day: "mx-auto size-8 rounded-lg text-sm hover:bg-brand-100 disabled:opacity-50 disabled:cursor-not-allowed",
+  activeDay: "bg-brand-100 hover:bg-brand-100",
+  inRangeFirstDay: "rounded-none rounded-l-lg bg-brand-200 text-brand-900 hover:bg-brand-200",
+  inRangeLastDay: "rounded-none rounded-r-lg bg-brand-200 text-brand-900 hover:bg-brand-200",
+  inRangeDay: "bg-brand-100 text-brand-900 hover:!bg-brand-200 rounded-none",
+  selectedDay: "bg-brand-900 text-white hover:bg-brand-900",
+  currentDay: "hover:bg-brand-100 border-2 border-brand-900",
+  anotherMonthDay: "hover:bg-brand-100 text-brand-400",
   monthViewWrapper: "grid w-64 grid-cols-4 items-center justify-center px-3 pt-2",
   month: `
-    mx-auto flex h-12 w-full items-center justify-center rounded-lg text-sm hover:cursor-pointer hover:bg-gray-100
+    mx-auto flex h-12 w-full items-center justify-center rounded-lg text-sm hover:cursor-pointer hover:bg-brand-100
     disabled:opacity-50 disabled:cursor-not-allowed
   `,
-  selectedMonth: "bg-gray-900 hover:bg-gray-900 text-white",
-  activeMonth: "bg-gray-100",
+  selectedMonth: "bg-brand-900 hover:bg-brand-900 text-white",
+  activeMonth: "bg-brand-100",
   yearViewWrapper: "grid w-64 grid-cols-4 items-center justify-center px-3 pt-2",
   year: `
-    mx-auto flex h-12 w-full items-center justify-center rounded-lg text-sm hover:cursor-pointer hover:bg-gray-100
+    mx-auto flex h-12 w-full items-center justify-center rounded-lg text-sm hover:cursor-pointer hover:bg-brand-100
     disabled:opacity-50 disabled:cursor-not-allowed
   `,
-  selectedYear: "bg-gray-900 hover:bg-gray-900 text-white",
-  activeYear: "bg-gray-100",
+  selectedYear: "bg-brand-900 hover:bg-brand-900 text-white",
+  activeYear: "bg-brand-100",
   timepickerWrapper: `
-  mx-2 -mb-1 mt-2 flex items-center justify-between gap-2 border-t border-gray-200 pl-2 pr-1 pt-3 text-sm
+    mx-2 -mb-1 mt-2 flex items-center justify-between gap-2 border-t border-brand-200 pl-2 pr-1 pt-3 text-sm
   `,
   timepickerLabel: "w-full",
-  timepickerInputWrapper: "flex items-center gap-px rounded-lg border border-gray-300",
+  timepickerInputWrapper: "flex items-center gap-px rounded-lg border border-brand-300",
   timepickerLeftInput: `
     w-11 rounded-l-lg border-none px-2.5 py-1.5 text-center text-sm focus:border-none focus:outline-none
   `,
@@ -57,8 +57,8 @@ export default /*tw*/ {
     w-11 rounded-r-lg border-none px-2.5 py-1.5 text-center text-sm focus:border-none focus:outline-none
   `,
   submitButton: `
-    rounded-lg border-none bg-gray-900/10 px-2.5 py-1.5 text-sm font-normal text-gray-900 outline-none
-    focus:ring-0 hover:bg-gray-900/10
+    rounded-lg border-none bg-brand-900/10 px-2.5 py-1.5 text-sm font-normal text-brand-900 outline-none
+    focus:ring-0 hover:bg-brand-900/10
   `,
   i18n: {
     weekdays: {

package/ui.form-color-picker/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import { cva } from "../../service.ui";
 import { computed } from "vue";
 
 export function useAttrs(props) {
-  const { config, getAttrs, setColor } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
   const { radio } = config.value;
 
   const cvaRadio = cva({
@@ -14,14 +14,7 @@ export function useAttrs(props) {
     compoundVariants: radio.compoundVariants,
   });
 
-  const radioClasses = computed(() =>
-    setColor(
-      cvaRadio({
-        color: props.color,
-      }),
-      props.color,
-    ),
-  );
+  const radioClasses = computed(() => cvaRadio({ color: props.color }));
 
   const wrapperAttrs = getAttrs("wrapper");
   const listAttrs = getAttrs("listAttrs");

package/ui.form-date-picker/configs/default.config.js

@@ -2,7 +2,7 @@ export default /*tw*/ {
   input: "",
   inputActive: {
     block: {
-      base: "ring-4 ring-gray-600/[.15] border-gray-500 hover:border-gray-500",
+      base: "ring-4 ring-brand-600/[.15] border-brand-500 hover:border-brand-500",
     },
   },
   calendar: "absolute z-40 mt-2",