@wikicasa-dev/components 2.1.4-alpha.1 → 2.1.4-alpha.10

package/plugins/buttonPlugin.ts

@@ -0,0 +1,290 @@
+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,
+  },
+});

package/dist/UIKit/NativeSelect.js

@@ -1,5 +0,0 @@
-import o from "../packages/components/lib/UIKit/NativeSelect.vue.js";
-import '../assets/packages/components/lib/UIKit/NativeSelect.css';/* empty css                                                 */
-export {
-  o as default
-};