@wikicasa-dev/components 2.1.4-alpha.24 → 2.1.4-alpha.4

package/dist/packages/components/plugins/buttonPlugin.js

@@ -1,232 +0,0 @@
-import n from "../../../_virtual/plugin.js";
-const o = {
-  //New colors
-  primary: { value: "#F20282", hover: "#E30C79", outlineHover: "#FFF8FB" },
-  secondary: { value: "#2b5dff", hover: "#244FD9" },
-  lightgray: { value: "#C1C8D5" },
-  ghost: { value: "#FAFBFF" },
-  lavender: { value: "#E9EFFE" },
-  black: { value: "#222222" },
-  warning: { value: "#FFD167" },
-  white: { value: "#FFF", hover: "" },
-  danger: { value: "#FA4F64" }
-}, b = n(({ addComponents: r, theme: t }) => {
-  r({
-    ".btn": {
-      "--btn-px": "25px",
-      "--btn-py": "11px",
-      "--btn-bg-color": "transparent",
-      "--btn-text-color": o.black.value,
-      "--btn-border-color": "unset",
-      "--btn-border-width": "0",
-      "--btn-border-radius": "24px",
-      "--btn-border-style": "solid",
-      "--btn-height": "40px",
-      "--btn-width": "auto",
-      "--btn-font-size": t("fontSize.16"),
-      "--btn-transition": "color, background-color cubic-bezier(0.4, 0, 0.2, 1) 150ms",
-      "--btn-font-weight": `${t("fontWeight.semibold")}`,
-      display: "inline-flex",
-      "align-items": "center",
-      "justify-content": "center",
-      "font-size": "var(--btn-font-size)",
-      "font-weight": "var(--btn-font-weight)",
-      "white-space": "nowrap",
-      border: "var(--btn-border-width) var(--btn-border-color) var(--btn-border-style)",
-      "border-radius": "var(--btn-border-radius)",
-      cursor: "pointer",
-      height: "var(--btn-height)",
-      width: "var(--btn-width)",
-      "background-color": "var(--btn-bg-color)",
-      color: "var(--btn-text-color)",
-      padding: "var(--btn-py) var(--btn-px)",
-      transition: "var(--btn-transition)",
-      "line-height": "1",
-      "-webkit-tap-highlight-color": "transparent",
-      "&.btn-lg": {
-        "--btn-height": "48px",
-        "--btn-px": "24px",
-        "--btn-py": "12px"
-      },
-      "&.btn-sm": {
-        "--btn-px": "24px",
-        "--btn-py": "8px",
-        "--btn-height": "40px"
-      },
-      "&.btn-rounded": {
-        "--btn-px": "0",
-        "--btn-py": "0"
-      },
-      "&.btn-outline": {
-        "--btn-border-width": "1px",
-        "--btn-bg-color": o.white.value
-      },
-      "&.btn-primary": {
-        ...e(
-          {
-            bgColor: o.primary.value,
-            textColor: o.white.value,
-            hoverBgColor: o.primary.hover
-          },
-          {
-            mainColor: o.white.hover,
-            textColor: o.primary.value,
-            hoverBgColor: o.primary.outlineHover
-          }
-        ),
-        "text-transform": "uppercase"
-      },
-      "&.btn-secondary": e(
-        {
-          bgColor: o.secondary.value,
-          textColor: o.white.value,
-          hoverBgColor: o.secondary.hover
-        },
-        {
-          mainColor: o.secondary.value,
-          textColor: o.secondary.value
-        }
-      ),
-      "&.btn-ternary": {
-        ...e({
-          bgColor: o.white.value,
-          textColor: o.secondary.value,
-          hoverBgColor: o.white.value,
-          hoverTextColor: o.secondary.hover
-        }),
-        "--btn-border-color": o.lightgray.value,
-        "--btn-border-width": "1px",
-        "--btn-border-radius": "24px"
-      },
-      "&.btn-quaternary": {
-        "--btn-px": "0",
-        "--btn-py": "0",
-        "--btn-text-color": o.secondary.value,
-        "--btn-height": "auto",
-        "&:hover": {
-          "text-decoration": "underline",
-          "--btn-text-color": o.secondary.hover
-        },
-        "&:disabled": {
-          "--btn-bg-color": "transparent",
-          "--btn-text-color": o.lightgray.value
-        }
-      },
-      "&.btn-single-selection": {
-        "--btn-px": "16px",
-        "--btn-py": "8px",
-        "--btn-border-radius": t("borderRadius.2xs"),
-        "--btn-border-color": o.lightgray.value,
-        "--btn-border-width": "1px",
-        "--btn-font-weight": t("fontWeight.regular"),
-        "&:hover": {
-          "--btn-border-color": o.secondary.value
-        },
-        "&:active,&.active,&[data-active='true']": {
-          "--btn-bg-color": o.ghost.value,
-          "--btn-text-color": o.secondary.value,
-          "--btn-border-color": o.secondary.value
-        }
-      }
-    },
-    //OLD style. Kept for retro-compatibility
-    ".btn-light": e({
-      textColor: o.primary.value,
-      bgColor: o.white.value,
-      hoverTextColor: o.primary.value,
-      hoverBgColor: "#FAFAFA"
-    }),
-    ".btn-warning": e({
-      bgColor: o.warning.value,
-      textColor: "#2A3761",
-      hoverBgColor: "#F2C761"
-    }),
-    ".btn-danger": e(
-      {
-        bgColor: o.danger.value,
-        textColor: o.white.value,
-        hoverBgColor: "#E0485A"
-      },
-      {
-        mainColor: o.danger.value,
-        textColor: o.danger.value
-      }
-    ),
-    ".btn-multi-selection": {
-      "--btn-py": "10px",
-      "--btn-height": "40px",
-      "font-weight": t("fontWeight.regular"),
-      "--btn-border-radius": t("borderRadius.xs"),
-      "--btn-border-color": "#EAEFFD",
-      "--btn-border-width": "1px",
-      "white-space": "normal",
-      ...e({
-        textColor: o.black.value,
-        bgColor: "#F5F7FA",
-        hoverBgColor: o.lavender.value
-      })
-    },
-    ".btn-facile": {
-      "--btn-facile-color": "#FF6600",
-      "--btn-facile-hover-color": "#b34700",
-      ...e({
-        bgColor: "var(--btn-facile-color)",
-        textColor: o.white.value,
-        hoverBgColor: "var(--btn-facile-hover-color)",
-        hoverTextColor: o.white.value
-      })
-    },
-    ".btn-show-more": {
-      "--btn-border-radius": "0",
-      "--btn-border-color": o.white.value,
-      ...e({
-        textColor: "#2B5DFF",
-        bgColor: o.white.value,
-        hoverTextColor: "#3646B3",
-        hoverBgColor: o.white.value
-      })
-    },
-    ".btn-transparent": {
-      "--border-color": "transparent",
-      "--btn-px": "0",
-      "--btn-py": "0",
-      "&:hover": {
-        "--btn-bg-color": "transparent",
-        "--border-color": "transparent"
-      }
-    }
-  });
-}), e = (r, t) => ({
-  "--btn-bg-color": r.bgColor,
-  "--btn-text-color": r.textColor,
-  "&:disabled": {
-    cursor: "not-allowed"
-  },
-  "&:hover:not(:disabled)": {
-    "--btn-text-color": r.hoverTextColor,
-    "--btn-bg-color": r.hoverBgColor
-  },
-  ...t ? {
-    "&.btn-outline": l(t)
-  } : {}
-}), l = (r) => ({
-  "--btn-border-color": r.mainColor ?? r.borderColor,
-  "--btn-text-color": r.textColor,
-  "--btn-bg-color": "#fff",
-  //By default, the active section is the same of the hover section in desktop mode
-  "&:active": {
-    "--btn-bg-color": (r.mainColor ?? r.activeBgColor ?? r.hoverBgColor) + " !important",
-    //By default, on active the text is white
-    ...r.activeTextColor || r.hoverTextColor ? {
-      "--btn-text-color": r.activeTextColor ?? r.hoverTextColor
-    } : {}
-  },
-  "&:hover": {
-    //By default, the text color is white
-    ...r.hoverBgColor ? { "--btn-bg-color": r.hoverBgColor } : {},
-    "--btn-text-color": r.hoverTextColor ?? r.textColor
-  }
-});
-export {
-  b as buttonPlugin
-};

package/dist/tailwind.config.js

@@ -1,147 +0,0 @@
-import o from "./_virtual/plugin.js";
-import { buttonPlugin as i } from "./packages/components/plugins/buttonPlugin.js";
-import n from "./_virtual/defaultTheme.js";
-const p = {
-  screens: {
-    xs: "360px",
-    sm: "640px",
-    md: "768px",
-    lg: "1024px",
-    xl: "1280px"
-  },
-  fontFamily: {
-    sans: ["Poppins", ...n.fontFamily.sans]
-  },
-  fontWeight: {
-    regular: 400,
-    medium: 500,
-    semibold: 600
-  },
-  lineHeight: {
-    "16px": "16px",
-    "20px": "20px",
-    "24px": "24px",
-    "28px": "28px",
-    "30px": "30px"
-  },
-  fontSize: {
-    12: "12px",
-    14: "14px",
-    16: "16px",
-    20: "20px",
-    22: "22px"
-  },
-  borderRadius: {
-    none: "0",
-    "2xs": "4px",
-    xs: "8px",
-    sm: "12px",
-    md: "16px",
-    lg: "24px",
-    xl: "32px",
-    "2xl": "40px",
-    full: "9999px"
-  },
-  aspectRatio: {
-    "1/1": "1 / 1",
-    "4/3": "4 / 3",
-    "16/9": "16 / 9"
-  },
-  opacity: {
-    0: 0,
-    50: "50%",
-    100: "100%"
-  },
-  colors: {
-    "w-pink": "#F20282",
-    "w-blue": "#2b5dff",
-    "w-darkblue": "#162F80",
-    "w-black": "#222222",
-    "w-gray": "#6D7687",
-    "w-lightgray": "#C1C8D5",
-    "w-cultured": "#F4F7FF",
-    "w-ghost": "#FAFBFF",
-    "w-white": "#FFFFFF",
-    "w-red": "#F20003",
-    "w-warning": "#FFD167",
-    "w-pink-hover": "#E30C79",
-    "w-pink-outline-hover": "#FFF8FB",
-    "w-blue-hover": "#244FD9",
-    transparent: "transparent",
-    white: "#fff"
-  },
-  spacing: {
-    0: "0",
-    "2xs": "4px",
-    xs: "8px",
-    sm: "12px",
-    md: "16px",
-    lg: "24px",
-    xl: "32px",
-    "2xl": "40px"
-  },
-  boxShadow: {
-    surface: "0px 1px 3px rgba(0,0,0,0.1)"
-  },
-  dropShadow: {},
-  extend: {
-    aria: {
-      invalid: 'invalid="true"'
-    }
-  }
-}, l = {
-  darkMode: ["selector", "[class*='htw-dark']"],
-  prefix: "uikit-",
-  content: [
-    "./src/**/*.{vue,ts}",
-    "./lib/**/*.{vue,ts}",
-    "./stories/**/*.{story.vue,ts}"
-  ],
-  theme: p,
-  corePlugins: {
-    preflight: !1
-  },
-  plugins: [
-    o(function({ addUtilities: t }) {
-      t({
-        ".no-scrollbar": {
-          "-ms-overflow-style": "none",
-          scrollbarWidth: "none",
-          "&::-webkit-scrollbar": {
-            display: "none"
-          }
-        },
-        ".no-scrolling": {
-          overflow: "hidden",
-          "&::-webkit-scrollbar": {
-            backgroundColor: "rgb(180 194 240 / 0.7)"
-          }
-        },
-        ".container-xl": {
-          maxWidth: "1280px"
-        },
-        ".safe-bottom": {
-          paddingBottom: "env(safe-area-inset-bottom) !important"
-        },
-        ".visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within)": {
-          border: "0 !important",
-          clip: "rect(0, 0, 0, 0) !important",
-          height: "1px !important",
-          margin: "-1px !important",
-          overflow: "hidden !important",
-          padding: "0 !important",
-          "white-space": "nowrap !important",
-          width: "1px !important"
-        },
-        ".visually-hidden:not(caption), .visually-hidden-focusable:not(:focus):not(:focus-within):not(caption)": {
-          position: "absolute !important"
-        }
-      });
-    }),
-    i
-  ]
-};
-export {
-  l as default,
-  p as twTheme
-};

package/plugins/buttonPlugin.ts

@@ -1,290 +0,0 @@
-import plugin from "tailwindcss/plugin";
-
-const colors = {
-  //New colors
-  primary: { value: "#F20282", hover: "#E30C79", outlineHover: "#FFF8FB" },
-  secondary: { value: "#2b5dff", hover: "#244FD9" },
-  lightgray: { value: "#C1C8D5", hover: "" },
-  ghost: { value: "#FAFBFF", hover: "" },
-
-  //Old colors
-  darkPrimary: { value: "#2A3761", hover: "" },
-  lavender: { value: "#E9EFFE", hover: "" },
-  cultured: { value: "#F4F7FF", hover: "" },
-  carbon: { value: "#3C474D", hover: "" },
-  gray: { value: "#6D7687", hover: "" },
-  black: { value: "#222222", hover: "" },
-  warning: { value: "#FFD167", hover: "" },
-  white: { value: "#FFF", hover: "" },
-  danger: { value: "#FA4F64", hover: "" },
-} as const;
-
-export const buttonPlugin = plugin(({ addComponents, theme }) => {
-  addComponents({
-    ".btn": {
-      "--btn-px": "25px",
-      "--btn-py": "11px",
-      "--btn-bg-color": "transparent",
-      "--btn-text-color": colors.black.value,
-      "--btn-border-color": "unset",
-      "--btn-border-width": "0",
-      "--btn-border-radius": "24px",
-      "--btn-border-style": "solid",
-      "--btn-height": "40px",
-      "--btn-width": "auto",
-      "--btn-font-size": theme("fontSize.16"),
-      "--btn-transition":
-        "color, background-color cubic-bezier(0.4, 0, 0.2, 1) 150ms",
-      "--btn-font-weight": `${theme("fontWeight.semibold")}`,
-      display: "inline-flex",
-      "align-items": "center",
-      "justify-content": "center",
-      "font-size": "var(--btn-font-size)",
-      "font-weight": "var(--btn-font-weight)",
-      "white-space": "nowrap",
-      border:
-        "var(--btn-border-width) var(--btn-border-color) var(--btn-border-style)",
-      "border-radius": "var(--btn-border-radius)",
-      cursor: "pointer",
-      height: "var(--btn-height)",
-      width: "var(--btn-width)",
-      "background-color": "var(--btn-bg-color)",
-      color: "var(--btn-text-color)",
-      padding: "var(--btn-py) var(--btn-px)",
-      transition: "var(--btn-transition)",
-      "line-height": "1",
-      "-webkit-tap-highlight-color": "transparent",
-      "&.btn-lg": {
-        "--btn-height": "48px",
-        "--btn-px": "24px",
-        "--btn-py": "12px",
-      },
-      "&.btn-sm": {
-        "--btn-px": "24px",
-        "--btn-py": "8px",
-        "--btn-height": "40px",
-      },
-      "&.btn-rounded": {
-        "--btn-px": "0",
-        "--btn-py": "0",
-      },
-      "&.btn-outline": {
-        "--btn-border-width": "1px",
-        "--btn-bg-color": colors.white.value,
-      },
-      "&.btn-primary": {
-        ...createBtn(
-          {
-            bgColor: colors.primary.value,
-            textColor: colors.white.value,
-            hoverBgColor: colors.primary.hover,
-            hoverDisabledBgColor: colors.primary.value,
-          },
-          {
-            mainColor: colors.white.hover,
-            textColor: colors.primary.value,
-            hoverBgColor: colors.primary.outlineHover,
-          },
-        ),
-        "text-transform": "uppercase",
-      },
-      "&.btn-secondary": createBtn(
-        {
-          bgColor: colors.secondary.value,
-          textColor: colors.white.value,
-          hoverBgColor: colors.secondary.hover,
-          hoverDisabledBgColor: colors.secondary.value,
-        },
-        {
-          mainColor: colors.secondary.value,
-          textColor: colors.secondary.value,
-        },
-      ),
-      "&.btn-ternary": {
-        ...createBtn({
-          bgColor: colors.white.value,
-          textColor: colors.secondary.value,
-          hoverBgColor: colors.white.value,
-          hoverDisabledBgColor: colors.secondary.value,
-          hoverTextColor: colors.secondary.hover,
-        }),
-        "--btn-border-color": colors.lightgray.value,
-        "--btn-border-width": "1px",
-        "--btn-border-radius": "24px",
-      },
-      "&.btn-quaternary": {
-        "--btn-px": "0",
-        "--btn-py": "0",
-        "--btn-text-color": colors.secondary.value,
-        "--btn-height": "auto",
-        "&:hover": {
-          "text-decoration": "underline",
-          "--btn-text-color": colors.secondary.hover,
-        },
-        "&:disabled": {
-          "--btn-bg-color": "transparent",
-          "--btn-text-color": colors.lightgray.value,
-        },
-      },
-      "&.btn-single-selection": {
-        "--btn-px": "16px",
-        "--btn-py": "8px",
-        "--btn-border-radius": theme("borderRadius.2xs"),
-        "--btn-border-color": colors.lightgray.value,
-        "--btn-border-width": "1px",
-        "--btn-font-weight": theme("fontWeight.regular"),
-        "&:hover": {
-          "--btn-border-color": colors.secondary.value,
-        },
-        "&:active,&.active,&[data-active='true']": {
-          "--btn-bg-color": colors.ghost.value,
-          "--btn-text-color": colors.secondary.value,
-          "--btn-border-color": colors.secondary.value,
-        },
-      },
-    },
-    //OLD style. Kept for retro-compatibility
-    ".btn-light": createBtn({
-      textColor: colors.primary.value,
-      bgColor: colors.white.value,
-      hoverTextColor: colors.primary.value,
-      hoverBgColor: "#FAFAFA",
-      hoverDisabledBgColor: colors.white.value,
-    }),
-    ".btn-warning": createBtn({
-      bgColor: colors.warning.value,
-      textColor: "#2A3761",
-      hoverBgColor: "#F2C761",
-      hoverDisabledBgColor: colors.warning.value,
-    }),
-    ".btn-danger": createBtn(
-      {
-        bgColor: colors.danger.value,
-        textColor: colors.white.value,
-        hoverBgColor: "#E0485A",
-        hoverDisabledBgColor: colors.danger.value,
-      },
-      {
-        mainColor: colors.danger.value,
-        textColor: colors.danger.value,
-      },
-    ),
-    ".btn-multi-selection": {
-      "--btn-py": "10px",
-      "--btn-height": "40px",
-      "font-weight": theme("fontWeight.regular"),
-      "--btn-border-radius": theme("borderRadius.xs"),
-      "--btn-border-color": "#EAEFFD",
-      "--btn-border-width": "1px",
-      "white-space": "normal",
-      ...createBtn({
-        textColor: colors.black.value,
-        bgColor: "#F5F7FA",
-        hoverBgColor: colors.lavender.value,
-        hoverDisabledBgColor: colors.white.value,
-        hoverBorderColor: "#385CF6",
-      }),
-    },
-
-    ".btn-facile": {
-      "--btn-facile-color": "#FF6600",
-      "--btn-facile-hover-color": "#b34700",
-      ...createBtn({
-        bgColor: "var(--btn-facile-color)",
-        textColor: colors.white.value,
-        hoverBgColor: "var(--btn-facile-hover-color)",
-        hoverTextColor: colors.white.value,
-        hoverDisabledBgColor: "var(--btn-facile-color)",
-      }),
-    },
-    ".btn-show-more": {
-      "--btn-border-radius": "0",
-      "--btn-border-color": colors.white.value,
-      ...createBtn({
-        textColor: "#2B5DFF",
-        bgColor: colors.white.value,
-        hoverTextColor: "#3646B3",
-        hoverBgColor: colors.white.value,
-        hoverDisabledBgColor: colors.white.value,
-      }),
-    },
-    ".btn-transparent": {
-      "--border-color": "transparent",
-      "--btn-px": "0",
-      "--btn-py": "0",
-      "&:hover": {
-        "--btn-bg-color": "transparent",
-        "--border-color": "transparent",
-      },
-    },
-  });
-});
-
-type BtnAttributes = {
-  bgColor: string;
-  textColor: string;
-  hoverBgColor: string;
-  hoverTextColor?: string;
-  /* The border color will be applied to desktop mode */
-  hoverBorderColor?: string;
-  activeBorderColor?: string;
-  activeBgColor?: string;
-  activeTextColor?: string;
-  hoverDisabledBgColor: string;
-};
-type BtnOutlineVariantAttributes = {
-  /* If present, it will be used to set the color to borders, text and background */
-  mainColor?: string;
-  borderColor?: string;
-  textColor?: string;
-  /* The hover bg color will be activated only from tablet mode on */
-  hoverBgColor?: string;
-  hoverDisabledBgColor?: string;
-  /* The hover text color will be activated only from tablet mode on */
-  hoverTextColor?: string;
-  activeBgColor?: string;
-  activeTextColor?: string;
-};
-
-const createBtn = (
-  btnProps: BtnAttributes,
-  btnOutlineProps?: BtnOutlineVariantAttributes,
-): any => ({
-  "--btn-bg-color": btnProps.bgColor,
-  "--btn-text-color": btnProps.textColor,
-  "&:disabled": {
-    cursor: "not-allowed",
-  },
-  "&:hover:not(:disabled)": {
-    "--btn-text-color": btnProps.hoverTextColor,
-    "--btn-bg-color": btnProps.hoverBgColor,
-  },
-  ...(btnOutlineProps
-    ? {
-        "&.btn-outline": createOutlineVariant(btnOutlineProps),
-      }
-    : {}),
-});
-
-const createOutlineVariant = (props: BtnOutlineVariantAttributes): any => ({
-  "--btn-border-color": props.mainColor ?? props.borderColor,
-  "--btn-text-color": props.textColor,
-  "--btn-bg-color": "#fff",
-  //By default, the active section is the same of the hover section in desktop mode
-  "&:active": {
-    "--btn-bg-color":
-      (props.mainColor ?? props.activeBgColor ?? props.hoverBgColor) +
-      " !important",
-    //By default, on active the text is white
-    ...(props.activeTextColor || props.hoverTextColor
-      ? {
-          "--btn-text-color": props.activeTextColor ?? props.hoverTextColor,
-        }
-      : {}),
-  },
-  "&:hover": {
-    //By default, the text color is white
-    ...(props.hoverBgColor ? { "--btn-bg-color": props.hoverBgColor } : {}),
-    "--btn-text-color": props.hoverTextColor ?? props.textColor,
-  },
-});