@sk-web-gui/core 0.1.2

package/src/components/button.js

@@ -0,0 +1,295 @@
+function buttonSolid(colors) {
+  return {
+    "&-solid": {
+      //"@apply text-": {},
+      "@apply border border-gray-stroke": {},
+      "@apply text-black bg-white": {},
+      /* hover */
+      "@apply hover:text-white hover:bg-hover": {},
+      /* focus */
+      "@apply focus-visible:z-base": {},
+      "@apply focus-visible:border-primary": {},
+      "@apply focus-visible:ring-4 focus-visible:ring-black": {},
+      /* active */
+      "@apply active:bg-hover active:text-white": {},
+
+
+      /* dark mode */
+      "@apply dark:border-neutral-600": {},
+      "@apply dark:text-neutral-100 dark:bg-neutral-700": {},
+      /* dark hover */
+      "@apply dark:hover:border-hover dark:hover:bg-neutral-600": {},
+      /* dark focus */
+      "@apply dark:focus-visible:border-primary-500": {},
+      /* dark active */
+      "@apply dark:active:bg-neutral-900 dark:active:border-neutral-600": {},
+
+      /* "&[data-color=\"primary\"]": {
+        "@apply text-white bg-primary": {},
+        "@apply hover:text-white hover:bg-hover": {},
+        "@apply active:text-white active:bg-hover": {},
+        "@apply focus-visible:ring-4 focus-visible:ring-black": {},
+      }, */
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            //[`@apply border-${color}`]: {},
+            [`@apply text-white bg-${color}`]: {},
+            // hover
+            [`@apply hover:text-white hover:bg-${color}-active`]: {},
+
+            [`@apply active:text-white active:bg-${color}-active`]: {},
+            [`@apply focus-visible:ring-4 focus-visible:ring-black`]: {},
+
+
+            // focus
+            //[`@apply focus-visible:bg-${color}-700`]: {},
+            //[`@apply focus-visible:border-${color}-500`]: {},
+            //[`@apply focus-visible:ring-${color}-500`]: {},
+            // active
+            //[`@apply active:bg-${color}-600`]: {},
+            // dark mode
+            //[`@apply dark:border-${color}-500`]: {},
+            //[`@apply dark:bg-${color}-600`]: {},
+            // dark hover
+            //[`@apply dark:hover:border-${color}-400 dark:hover:bg-${color}-500`]: {},
+            // dark focus
+            //[`@apply dark:focus-visible:border-${color}-500`]: {},
+            //[`@apply dark:focus-visible:ring-${color}-500`]: {},
+            // dark active
+            //[`@apply dark:active:bg-${color}-800 dark:active:border-${color}-600`]: {},
+          },
+        }),
+        {}
+      ),
+
+    },
+  };
+}
+
+function buttonOutline(colors) {
+  return {
+    "&-outline": {
+      "@apply border border-neutral-200": {},
+      "@apply text-neutral-900 bg-transparent": {},
+      /* hover */
+      "@apply hover:bg-neutral-100 hover:border-neutral-300": {},
+      /* focus */
+      "@apply focus-visible:z-base": {},
+      "@apply focus-visible:border-primary-500": {},
+      "@apply focus-visible:ring-4 focus-visible:ring-primary-500": {},
+      /* active */
+      "@apply active:bg-neutral-200": {},
+      /* dark mode */
+      "@apply dark:border-neutral-600": {},
+      "@apply dark:text-neutral-100 dark:bg-transparent": {},
+      /* dark hover */
+      "@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700": {},
+      /* dark focus */
+      "@apply dark:focus-visible:border-primary-500": {},
+      /* dark active */
+      "@apply dark:active:bg-neutral-600 dark:active:border-neutral-600": {},
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply border-current`]: {},
+            [`@apply text-${color}-600 bg-transparent`]: {},
+            /* hover */
+            [`@apply hover:bg-${color}-50`]: {},
+            /* focus */
+            [`@apply focus-visible:border-${color}-500`]: {},
+            [`@apply focus-visible:ring-${color}-500`]: {},
+            /* active */
+            [`@apply active:bg-${color}-100`]: {},
+            /* dark mode */
+            [`@apply dark:border-${color}-200`]: {},
+            [`@apply dark:text-${color}-200 dark:bg-transparent`]: {},
+            [`@apply dark:border-${color}-300`]: {},
+            /* dark hover */
+            [`@apply dark:hover:bg-${color}-200`]: {},
+            [`@apply dark:hover:bg-opacity-15`]: {},
+            /* dark focus */
+            [`@apply dark:focus-visible:border-${color}-500`]: {},
+            [`@apply dark:focus-visible:ring-${color}-500`]: {},
+            /* dark active */
+            [`@apply dark:active:bg-${color}-200`]: {},
+            [`@apply dark:active:bg-opacity-25`]: {},
+          },
+        }),
+        {}
+      ),
+    },
+  };
+}
+
+function buttonGhost(colors) {
+  return {
+    "&-ghost": {
+      "@apply text-neutral-900 bg-transparent": {},
+      "@apply hover:bg-neutral-100": {},
+      /* focus */
+      "@apply focus-visible:z-base": {},
+      "@apply focus-visible:ring-4 focus-visible:ring-primary-500": {},
+      /* active */
+      "@apply active:bg-neutral-200": {},
+      /* dark mode */
+      "@apply dark:text-neutral-100 dark:bg-transparent": {},
+      /* dark hover */
+      "@apply dark:hover:border-neutral-300 dark:hover:bg-neutral-700": {},
+      /* dark active */
+      "@apply dark:active:bg-neutral-600 dark:active:border-neutral-400": {},
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply text-${color}-600`]: {},
+            [`@apply hover:bg-${color}-50`]: {},
+            /* focus */
+            [`@apply focus-visible:ring-${color}-500`]: {},
+            [`@apply active:bg-${color}-100`]: {},
+            // dark colors
+            [`@apply dark:text-${color}-200 dark:bg-transparent`]: {},
+            [`@apply dark:border-${color}-300 dark:hover:bg-${color}-200`]: {},
+            [`@apply dark:hover:bg-opacity-15`]: {},
+            [`@apply dark:active:bg-${color}-200`]: {},
+            [`@apply dark:active:bg-opacity-25`]: {},
+          },
+        }),
+        {}
+      ),
+    },
+  };
+}
+
+function buttonLight(colors) {
+  return {
+    "&-light": {
+      "@apply shadow-sm": {},
+      "@apply border border-transparent": {},
+      "@apply text-neutral-900 bg-neutral-100": {},
+      /* hover */
+      "@apply hover:bg-neutral-200": {},
+      /* focus */
+      "@apply focus-visible:z-base": {},
+      "@apply focus-visible:border-primary-500": {},
+      "@apply focus-visible:ring-4 focus-visible:ring-primary-500": {},
+      /* active */
+      "@apply active:bg-neutral-300": {},
+      /* dark mode */
+      "@apply dark:border-transparent": {},
+      "@apply dark:text-neutral-100 dark:bg-neutral-700": {},
+      /* dark hover */
+      "@apply dark:hover:bg-neutral-600": {},
+      /* dark focus */
+      "@apply dark:focus-visible:border-primary-500": {},
+      /* dark active */
+      "@apply dark:active:bg-neutral-600": {},
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply text-${color}-600 bg-${color}-50`]: {},
+            /* hover */
+            [`@apply hover:bg-${color}-100`]: {},
+            /* focus */
+            [`@apply focus-visible:border-${color}-500`]: {},
+            [`@apply focus-visible:ring-${color}-500`]: {},
+            /* active */
+            [`@apply active:bg-${color}-200`]: {},
+            /* dark mode */
+            [`@apply dark:text-${color}-300 dark:bg-${color}-500`]: {},
+            [`@apply dark:bg-opacity-15`]: {},
+            /* dark hover */
+            [`@apply dark:hover:bg-${color}-500`]: {},
+            [`@apply dark:hover:bg-opacity-25`]: {},
+            /* dark focus */
+            [`@apply dark:focus-visible:border-${color}-500`]: {},
+            [`@apply dark:focus-visible:ring-${color}-500`]: {},
+            /* dark active */
+            [`@apply dark:active:bg-${color}-500`]: {},
+            [`@apply dark:active:bg-opacity-30`]: {},
+          },
+        }),
+        {}
+      ),
+    },
+  };
+}
+
+function buttonLink(colors) {
+  return {
+    "&-link": {
+      "@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700": {},
+      "@apply focus-visible:z-base focus-visible:ring-4 focus-visible:ring-primary-500": {},
+      // dark colors
+      "@apply dark:text-neutral-200": {},
+      "@apply dark:active:text-neutral-500": {},
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply text-${color}-600 active:text-${color}-700`]: {},
+            [`@apply focus-visible:ring-${color}-500`]: {},
+            // dark colors
+            [`@apply dark:text-${color}-200`]: {},
+            [`@apply dark:active:text-${color}-500`]: {},
+          },
+        }),
+        {}
+      ),
+    },
+  };
+}
+
+module.exports = Button = (colors) => ({
+  ".btn": {
+    "@apply relative": {},
+    "@apply m-0": {},
+    "@apply inline-flex items-center justify-center flex-shrink-0 align-middle": {},
+    "@apply font-medium leading-tight": {},
+    transitionProperty: "background-color, border-color, color, fill, stroke, box-shadow",
+    "@apply	duration-75 ease-out": {},
+    "@apply outline-none appearance-none cursor-base select-none whitespace-nowrap": {},
+    "@apply focus-visible:outline-none": {},
+
+    padding: "1.2rem 3.2rem",
+    borderRadius: "3.2rem",
+
+    // sizing
+    "&-sm": {
+      "@apply text-xs": {},
+      // minWidth: "1.75rem",
+    },
+
+    "&-md": {
+      "@apply text-sm": {},
+      // minWidth: "2rem",
+    },
+
+    "&-lg": {
+      "@apply text-base": {},
+      // minWidth: "2.5rem",
+    },
+
+    // State
+
+    "&-disabled": {
+      "@apply disabled:shadow-none disabled:cursor-not-allowed": {},
+      "@apply disabled:text-black disabled:bg-gray-light !important": {},
+    },
+
+    // variants
+    ...buttonSolid(colors),
+    ...buttonOutline(colors),
+    //...buttonGhost(colors),
+    //...buttonLight(colors),
+    ...buttonLink(colors),
+  },
+});

package/src/components/card.js

@@ -0,0 +1,55 @@
+module.exports = Card = () => ({
+
+    ".avatar": {
+        "@apply bg-primary-light text-primary rounded-full p-4": {},
+    },
+
+    ".card-list": {
+        "@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10": {},
+        //"@apply text-center": {},
+        //"@apply justify-center items-center": {},
+    },
+
+    ".card": {
+        "@apply p-lg rounded shadow-lg bg-white relative": {},
+        "@apply p-0": {},
+        //padding: "2.4rem",
+
+        // clickable
+        "&-clickable": {
+            // Hover
+            "@apply hover:shadow-xl hover:cursor-pointer": {},
+        },
+
+        // "@apply bg-neutral-200 border border-neutral-100 text-neutral-900": {},
+        // dark
+        //"@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300": {},
+    },
+    ".card-outlined": {
+        "@apply border-2 border-gray-stroke": {},
+    },
+    ".card-border-top": {
+        "@apply border-t-4 border-t-primary": {},
+    },    
+
+    ".card-body": {
+        "@apply p-8": {},
+    },
+
+    ".card-image": {
+        "@apply object-cover": {},
+        "width": "100%",
+        "height": "250px",
+    },
+
+    ".card-link": {
+        "&::after": {
+            "content": "''",
+            "position": "absolute",
+            "left": "0",
+            "top": "0",
+            "right": "0",
+            "bottom": "0",
+        },
+    },
+});

package/src/components/checkbox.js

@@ -0,0 +1,128 @@
+const svgToDataUri = require('mini-svg-data-uri');
+
+module.exports = Checkbox = (colors, theme) => ({
+  ".form-checkbox": {
+    //"@apply rounded shadow-sm": {},
+    backgroundColor: "inherit",
+    "@apply border-gray-stroke focus:bg-white": {},
+
+    "&[aria-invalid=true]": {
+      "--tw-border-opacity": "1",
+      "borderColor": "rgba(220, 38, 38, var(--tw-border-opacity))",
+    },
+    "&[aria-invalid=true]:hover": {
+      "--tw-border-opacity": "1",
+      "border-color": "rgba(220, 38, 38, var(--tw-border-opacity))",
+    },
+    // dark colors
+    "@apply dark:border-neutral-400": {},
+    ".dark &[aria-invalid=true]": {
+      "--tw-border-opacity": "1",
+      "borderColor": "rgba(248, 113, 113, var(--tw-border-opacity))",
+    },
+    ".dark &[aria-invalid=true]:hover": {
+      "--tw-border-opacity": "1",
+      "borderColor": "rgba(248, 113, 113, var(--tw-border-opacity))",
+    },
+
+    "@media (prefers-color-scheme: dark)": {
+      "&[aria-invalid=true]": {
+        "--tw-border-opacity": "1",
+        "borderColor": "rgba(220, 38, 38, var(--tw-border-opacity))",
+      },
+      "&[aria-invalid=true]:hover": {
+        "--tw-border-opacity": "1",
+        "border-color": "rgba(220, 38, 38, var(--tw-border-opacity))",
+      },
+    },
+
+    "&:checked": {
+      "@apply text-white bg-white border-primary": {},
+      [`@apply focus-visible:border-primary focus-visible:ring-primary`]: {},
+
+      backgroundImage: `url("${svgToDataUri(
+        `<svg viewBox="0 0 16 16" fill="#005595" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>`
+      )}")`,
+      //borderColor: "transparent",
+    },
+
+    [`&[data-color="primary"]`]: {
+      //[`@apply text-primary`]: {},
+
+      // dark
+      //[`@apply dark:text-primary`]: {},
+      //[`@apply dark:focus-visible:border-primary-400 dark:focus-visible:ring-primary-400`]: {},
+    },
+
+    // Fix focus stylign
+    "&:checked:hover, &:checked:focus": {
+      "@apply bg-white border-primary": {},
+    },
+
+    // colors
+    /*...colors.reduce(
+      (styles, color) => ({
+        ...styles,
+        [`&[data-color="${color}"]`]: {
+          [`@apply text-${color}`]: {},
+          [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},
+          backgroundImage: `url("${svgToDataUri(
+            `<svg viewBox="0 0 16 16" fill="${theme(`colors.primary_raw.DEFAULT`)}" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>`
+          )}")`,
+          // dark
+          [`@apply dark:text-${color}`]: {},
+          [`@apply dark:focus-visible:border-${color}-400 dark:focus-visible:ring-${color}-400`]: {},
+        },
+      }),
+      {}
+    ),*/
+
+    "@apply dark:focus-visible:ring-offset-neutral-900": {},
+
+    // sizing
+    "&-sm": {
+      width: "1.4rem",
+      height: "1.4rem",
+    },
+
+    "&-md": {
+      width: "1.6rem",
+      height: "1.6rem",
+      //"@apply w-4 h-4": {},
+    },
+
+    "&-lg": {
+      width: "1.8rem",
+      height: "1.8rem",
+    },
+
+    // disabled
+    "&-disabled": {
+      backgroundColor: "#ECECEC",
+      //"@apply disabled:bg-gray-stroke": {},
+      //"@apply disabled:shadow-none disabled:border-neutral-300 disabled:bg-neutral-300 disabled:hover:text-neutral-300": {},
+      //"@apply dark:disabled:border-transparent dark:disabled:bg-whiteAlpha-200 dark:disabled:hover:text-whiteAlpha-200": {},
+    },
+
+    // label
+    "&-label": {
+      "@apply select-none text-sm": {},
+      marginLeft: "0.8rem",
+      //"@apply text-black": {},
+      // dark colors
+      "@apply dark:text-neutral-100": {},
+
+      "&-sm": {
+        "@apply text-xs": {},
+      },
+
+      "&-md": {
+        "@apply text-sm": {},
+      },
+
+      "&-lg": {
+        "@apply text-base": {},
+      },
+    },
+  },
+});

package/src/components/code.js

@@ -0,0 +1,9 @@
+module.exports = Code = () => ({
+  ".code": {
+    "@apply inline-flex justify-center items-center capitalize text-xs rounded-sm font-mono break-all": {},
+    "@apply bg-neutral-200 border border-neutral-100 text-neutral-900": {},
+    // dark
+    "@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300": {},
+    padding: "2px 3px 1px",
+  },
+});

package/src/components/cookie-consent.js

@@ -0,0 +1,26 @@
+module.exports = CookieConsent = () => ({
+    ".cookie-consent": {
+        "@apply min-w-full fixed flex justify-center z-10 bottom-0 left-0 right-0 bg-white": {},
+
+        "&-close-btn": {
+            "@apply cursor-pointer hover:text-primary-active absolute right-8 top-6 border border-transparent focus-visible:border-black flex self-center": {},
+        },
+
+        "&-content-wrapper": {
+            "@apply flex flex-col container py-12 px-4 bg-white relative": {},
+        },
+
+        "&-title": {
+            "@apply text-2xl leading-2xl mb-1 mt-4": {},
+        },
+
+        "&-description": {
+            "@apply text-base leading-base mb-8": {},
+        },
+
+        "&-btn-wrapper": {
+            "@apply flex flex-col space-y-4 lg:block lg:space-y-0 lg:space-x-4": {},
+        },
+
+    },
+});

package/src/components/divider.js

@@ -0,0 +1,12 @@
+module.exports = Divider = () => ({
+  ".divider": {
+    "@apply border-0 opacity-60": {},
+    borderColor: "inherit",
+    "&-vertical": {
+      "@apply border-l border-solid h-auto mx-2": {},
+    },
+    "&-horizontal": {
+      "@apply border-b border-solid w-auto my-2": {},
+    },
+  },
+});

package/src/components/dot.js

@@ -0,0 +1,84 @@
+module.exports = Dot = (colors) => ({
+  ".dot": {
+    "@apply relative inline-flex rounded-full": {},
+    "&-solid": {
+      "@apply bg-neutral-500": {},
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply bg-${color}-500`]: {},
+          },
+        }),
+        {}
+      ),
+
+      "&.dot-bordered": {
+        "@apply border-2 border-white": {},
+        "@apply dark:border-neutral-800": {},
+      },
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&.dot-bordered[data-color="${color}"]`]: {
+            [`@apply border-${color}-100`]: {},
+            [`@apply dark:border-${color}-300`]: {},
+          },
+        }),
+        {}
+      ),
+    },
+
+    "&-outline": {
+      "@apply bg-white border-2 border-neutral-500": {},
+      "@apply dark:bg-neutral-800": {},
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply border-${color}-500`]: {},
+          },
+        }),
+        {}
+      ),
+    },
+
+    "&-3xs": {
+      "@apply w-1.5 h-1.5": {},
+    },
+
+    "&-2xs": {
+      "@apply w-2 h-2": {},
+    },
+
+    "&-xs": {
+      "@apply w-2.5 h-2.5": {},
+    },
+
+    "&-sm": {
+      "@apply w-3 h-3": {},
+    },
+
+    "&-md": {
+      "@apply w-3.5 h-3.5": {},
+    },
+
+    "&-lg": {
+      "@apply w-4 h-4": {},
+    },
+
+    "&-xl": {
+      "@apply w-5 h-5": {},
+    },
+
+    "&-2xl": {
+      "@apply w-6 h-6": {},
+    },
+
+    "&-3xl": {
+      "@apply w-8 h-8": {},
+    },
+  },
+});