@wikicasa-dev/components 2.1.4-alpha.16 → 2.1.4-alpha.18

package/dist/plugins/buttonPlugin.js

@@ -0,0 +1,232 @@
+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

@@ -0,0 +1,143 @@
+import t from "./_virtual/plugin.js";
+import { buttonPlugin as i } from "./plugins/buttonPlugin.js";
+import n from "./_virtual/defaultTheme.js";
+const p = {
+  darkMode: ["selector", "[class*='htw-dark']"],
+  prefix: "uikit-",
+  content: [
+    "./src/**/*.{vue,ts}",
+    "./lib/**/*.{vue,ts}",
+    "./stories/**/*.{story.vue,ts}"
+  ],
+  theme: {
+    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: {
+      6: "1.5rem",
+      7: "1.75rem"
+    },
+    fontSize: {
+      10: "10px",
+      12: "12px",
+      DEFAULT: "14px",
+      16: "16px",
+      18: "18px",
+      20: "20px",
+      22: "22px"
+    },
+    borderRadius: {
+      none: "0",
+      "3xs": "4px",
+      "2xs": "8px",
+      xs: "12px",
+      DEFAULT: "20px",
+      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: {
+      //TEMP: alla fine ci dovranno essere SOLO questi valori per lo spacing (e.g. margin, padding, top,left,right,bottom...)
+      aria: {
+        invalid: 'invalid="true"'
+      }
+    }
+  },
+  corePlugins: {
+    preflight: !1
+  },
+  plugins: [
+    t(function({ addUtilities: o }) {
+      o({
+        ".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 {
+  p as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wikicasa-dev/components",
-  "version": "2.1.4-alpha.16",
+  "version": "2.1.4-alpha.18",
   "description": "Wikicasa frontend components",
   "type": "module",
   "main": "./dist/index.js",
@@ -30,7 +30,8 @@
       "import": "./dist/chart/*.js",
       "types": "./dist/chart/*.d.ts"
     },
-    "./plugins/buttonPlugin": "./plugins/buttonPlugin.ts"
+    "./plugins/buttonPlugin": "./plugins/buttonPlugin.ts",
+    "./tailwind.config": "./tailwind.config.js"
   },
   "repository": {
     "type": "git",