Merge pull request #14 from vuelessjs/fix-colors-in-nested-components…

…_Pavlo-Vasylechko

Fix colors in nested components

.storybook/themes/vueless.theme.js

@@ -9,7 +9,8 @@ export default create({
 
   brandTitle: "Vueless UI",
   brandUrl: "https://vueless.com",
-  brandImage: "https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/logo.png",
+  brandImage:
+    "https://raw.githubusercontent.com/vuelessjs/vueless-storybook/main/public/images/logo.png",
   brandTarget: "_blank",
 
   // Main colors

package.json

@@ -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",

src/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 {

src/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,

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

@@ -6,14 +6,20 @@ 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,
     variants: button.variants,
     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,

src/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,

src/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,44 +21,44 @@ 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
   `,
   timepickerRightInput: `
     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: {

src/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");

src/ui.form-date-picker-range/configs/default.config.js

@@ -2,23 +2,23 @@ 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",
     },
   },
-  buttonWrapper: "flex h-full rounded-lg focus-within:ring-4 focus-within:ring-gray-600/[.15] max-md:justify-between",
+  buttonWrapper: "flex h-full rounded-lg focus-within:ring-4 focus-within:ring-brand-600/[.15] max-md:justify-between",
   button: `
     shrink-0 grow rounded-none border-0 bg-zinc-100 py-2 text-base font-medium text-gray-900 shadow-none
-  hover:bg-zinc-200 hover:ring-gray-600/[.15] focus:border-0 focus:bg-zinc-200 focus:ring-0 focus:ring-gray-600/[.15]
-  active:bg-zinc-200 disabled:cursor-not-allowed
+    hover:bg-zinc-200 hover:ring-brand-600/[.15] focus:border-0 focus:bg-zinc-200 focus:ring-0 focus:ring-brand-600/[.15]
+    active:bg-zinc-200 disabled:cursor-not-allowed
   `,
-  buttonActive: "border-0 hover:bg-zinc-200 ring-0 ring-gray-600/[.15] bg-zinc-200",
-  buttonWrapperActive: "ring-4 ring-gray-600/[.15]",
+  buttonActive: "border-0 hover:bg-zinc-200 ring-0 ring-brand-600/[.15] bg-zinc-200",
+  buttonWrapperActive: "ring-4 ring-brand-600/[.15]",
   shiftRangeButton: `
     focus:bg-bg-zinc-200 flex items-center border-0 bg-zinc-100 py-[0.71875rem] shadow-none
-    hover:bg-zinc-200 hover:ring-gray-600/[.15] focus:border-0 focus:ring-0 focus:ring-gray-600/[.15] active:bg-zinc-200
+    hover:bg-zinc-200 hover:ring-brand-600/[.15] focus:border-0 focus:ring-0 focus:ring-brand-600/[.15] active:bg-zinc-200
     disabled:cursor-not-allowed last:rounded-l-none last:rounded-r-lg first:rounded-l-lg first:rounded-r-none
   `,
-  menu: "absolute z-40 mt-2 w-80 overflow-hidden rounded-lg border border-gray-300 bg-white p-2 shadow focus:outline-none",
+  menu: "absolute z-40 mt-2 w-80 overflow-hidden rounded-lg border border-brand-300 bg-white p-2 shadow focus:outline-none",
   menuTransition: {
     enterFromClass: "opacity-0 scale-95",
     enterActiveClass: "transition transform ease-out duration-100",
@@ -30,8 +30,8 @@ export default /*tw*/ {
   periodsRow: "mb-1 flex min-w-64 gap-1",
   periodButton: `
     flex h-[3.125rem] w-full cursor-pointer flex-col items-center justify-center rounded-lg bg-zinc-100
-    px-1.5 py-2.5 text-center text-xs font-medium text-gray-900 hover:bg-gray-200
-    [&_span]:block [&_span]:font-normal [&_span]:text-gray-500
+    px-1.5 py-2.5 text-center text-xs font-medium text-brand-900 hover:bg-brand-200
+    [&_span]:block [&_span]:font-normal [&_span]:text-brand-500
   `,
   periodButtonActive: "bg-zinc-200",
   rangeSwitchWrapper: "mb-2.5 mt-4 flex items-center justify-between py-2",
@@ -46,7 +46,7 @@ export default /*tw*/ {
   periodDateYearList: "grid grid-cols-3 grid-rows-1 gap-0.5",
   periodDateQuarterList: "",
   periodDate: `
-    cursor-pointer block w-full rounded-lg py-3 text-center text-sm font-medium text-gray-900 hover:rounded-lg hover:bg-gray-50
+    cursor-pointer block w-full rounded-lg py-3 text-center text-sm font-medium text-gray-900 hover:rounded-lg hover:bg-brand-50
     disabled:opacity-50 disabled:cursor-not-allowed
   `,
   periodDateActive: "bg-zinc-100",
@@ -58,7 +58,7 @@ export default /*tw*/ {
       description: "hidden",
     },
     input: {
-      base: "text-sm border-gray-100 px-4 py-2.5",
+      base: "text-sm border-brand-100 px-4 py-2.5",
       variants: {
         size: {
           md: "pt-2.5 pb-2.5",
@@ -72,7 +72,7 @@ export default /*tw*/ {
     dayViewWrapper: "p-0 w-full",
     monthViewWrapper: "p-0 w-full",
     yearViewWrapper: "p-0 w-full",
-    dayViewSwitchLabel: "font-medium text-gray-900",
+    dayViewSwitchLabel: "font-medium text-brand-900",
     nextPrevButton: "p-0 py-2 hover:bg-transparent",
     navigation: "px-0 w-full",
     nextIcon: {
@@ -88,12 +88,12 @@ export default /*tw*/ {
       },
     },
     day: "font-medium w-full h-10 text-sm mb-0.5",
-    currentDay: "text-white bg-gray-900 hover:bg-gray-900 hover:text-white",
+    currentDay: "text-white bg-brand-900 hover:bg-brand-900 hover:text-white",
     weekDay: "text-sm size-10",
     month: "font-medium",
-    selectedMonth: "bg-zinc-100 text-gray-900 hover:text-white",
+    selectedMonth: "bg-zinc-100 text-brand-900 hover:text-white",
     year: "font-medium",
-    selectedYear: "bg-zinc-100 text-gray-900 hover:text-white",
+    selectedYear: "bg-zinc-100 text-brand-900 hover:text-white",
   },
   i18n: {
     lastThirtyDays: "Last 30 days <span> and 2 next two weeks </span>",

src/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",

src/ui.form-input/configs/default.config.js

@@ -10,8 +10,8 @@ export default /*tw*/ {
     base: `
       rounded-lg border border-solid border-gray-300 bg-white !opacity-100 relative flex
       transition duration-100 ease-in-out
-      hover:border-gray-400 hover:focus-within:border-gray-500
-      focus-within:border-gray-500 focus-within:ring-4 focus-within:ring-gray-600/[.15]
+      hover:border-gray-400 hover:focus-within:border-brand-500
+      focus-within:border-brand-500 focus-within:ring-4 focus-within:ring-brand-600/[.15]
     `,
     variants: {
       disabled: {