@wikicasa-dev/components 2.1.4-alpha.9 → 2.1.4

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