@sk-web-gui/core 0.1.3 → 0.1.6

package/src/components/card.js

@@ -1,55 +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",
-        },
-    },
-});
+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

@@ -1,128 +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": {},
-      },
-    },
-  },
-});
+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

@@ -1,9 +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",
-  },
-});
+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

@@ -1,26 +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": {},
-        },
-
-    },
-});
+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

@@ -1,12 +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": {},
-    },
-  },
-});
+module.exports = Divider = () => ({
+  ".divider": {
+    "@apply border-0 border-gray-stroke": {},
+    //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

@@ -1,84 +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": {},
-    },
-  },
-});
+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": {},
+    },
+  },
+});