@sk-web-gui/core 0.1.2

package/src/components/forms.js

@@ -0,0 +1,246 @@
+function fieldOutline(colors) {
+  return {
+    "&-outline": {
+      "@apply border shadow-sm border-gray-stroke": {},
+      "@apply text-gray bg-white": {},
+      //"@apply hover:border-neutral-300": {},
+
+      "&[aria-invalid=true]": {
+        "--tw-border-opacity": "1",
+        borderColor: "rgba(220, 38, 38, var(--tw-border-opacity))",
+        "--tw-ring-offset-shadow":
+          "var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
+        "--tw-ring-shadow":
+          "var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)",
+        boxShadow:
+          "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)",
+        "--tw-ring-opacity": "1",
+        "--tw-ring-color": "rgba(220, 38, 38, var(--tw-ring-opacity))",
+      },
+      "focus-visible:ring-4": {},
+      /* dark mode */
+      "@apply dark:border-neutral-700": {},
+      "@apply dark:text-neutral-100 dark:bg-base": {},
+      "@apply dark:hover:border-neutral-600": {},
+
+      ".dark &[aria-invalid=true]": {
+        "--tw-border-opacity": "1",
+        borderColor: "rgba(248, 113, 113, var(--tw-border-opacity))",
+        "--tw-ring-opacity": "1",
+        "--tw-ring-color": "rgba(248, 113, 113, var(--tw-ring-opacity))",
+      },
+      "@media (prefers-color-scheme: dark)": {
+        "&[aria-invalid=true]": {
+          "--tw-border-opacity": "1",
+          borderColor: "rgba(248, 113, 113, var(--tw-border-opacity))",
+          "--tw-ring-opacity": "1",
+          "--tw-ring-color": "rgba(248, 113, 113, var(--tw-ring-opacity))",
+        },
+      },
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},
+            [`@apply dark:focus-visible:border-${color} dark:focus-visible:ring-${color}`]: {},
+          },
+        }),
+        {}
+      ),
+    },
+  };
+}
+
+function fieldSolid(colors) {
+  return {
+    "&-solid": {
+      "@apply border border-transparent": {},
+      "@apply text-black bg-gray-light": {},
+      //"@apply hover:bg-gray-200": {},
+
+      "&[aria-invalid=true]": {
+        "--tw-border-opacity": "1",
+        borderColor: "rgba(220, 38, 38, var(--tw-border-opacity))",
+        "--tw-ring-offset-shadow":
+          "var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)",
+        "--tw-ring-shadow":
+          "var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)",
+        boxShadow:
+          "var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)",
+        "--tw-ring-opacity": "1",
+        "--tw-ring-color": "rgba(220, 38, 38, var(--tw-ring-opacity))",
+      },
+      "focus-visible:ring-4": {},
+      /* dark mode */
+      "@apply dark:text-neutral-100 dark:bg-whiteAlpha-50": {},
+      "@apply dark:hover:bg-whiteAlpha-100": {},
+      ".dark &[aria-invalid=true]": {
+        "--tw-border-opacity": "1",
+        borderColor: "rgba(248, 113, 113, var(--tw-border-opacity))",
+        "--tw-ring-opacity": "1",
+        "--tw-ring-color": "rgba(248, 113, 113, var(--tw-ring-opacity))",
+      },
+      "@media (prefers-color-scheme: dark)": {
+        "&[aria-invalid=true]": {
+          "--tw-border-opacity": "1",
+          borderColor: "rgba(248, 113, 113, var(--tw-border-opacity))",
+          "--tw-ring-opacity": "1",
+          "--tw-ring-color": "rgba(248, 113, 113, var(--tw-ring-opacity))",
+        },
+      },
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},
+            [`@apply dark:focus-visible:border-${color} dark:focus-visible:ring-${color}`]: {},
+          },
+        }),
+        {}
+      ),
+    },
+  };
+}
+
+function formControl() {
+  return {
+    ".form-control": {
+      "@apply w-full relative": {},
+    },
+    ".form-helper-text": {
+      "@apply mt-1.5 leading-none text-gray dark:text-whiteAlpha-600": {},
+    },
+    ".form-error-message": {
+      "@apply mt-1.5 leading-none flex items-center text-sm": {},
+      "--tw-text-opacity": "1",
+      color: "rgba(239, 68, 68, var(--tw-text-opacity))",
+      ".dark &": {
+        "--tw-text-opacity": "1",
+        color: "rgba(252, 165, 165, var(--tw-text-opacity))",
+      }
+    },
+    ".form-label": {
+      "@apply text-sm font-medium text-left align-middle block mb-1.5": {},
+
+      "&-disabled": {
+        //"@apply opacity-60": {},
+      },
+    },
+    ".form-required-indicator": {
+      "@apply ml-1 text-sm": {},
+      "--tw-text-opacity": "1",
+      color: "rgba(239, 68, 68, var(--tw-text-opacity))",
+      ".dark &": {
+        "--tw-text-opacity": "1",
+        color: "rgba(252, 165, 165, var(--tw-text-opacity))",
+      }
+    }
+  };
+}
+
+function formInputGroup() {
+  return {
+    ".form-input-group": {
+      "@apply flex relative": {},
+    },
+
+    ".form-input-element": {
+      "@apply flex items-center justify-center absolute z-base top-0": {},
+
+      "&-sm": {
+        "@apply text-xs h-7 w-7": {},
+      },
+
+      "&-md": {
+        "@apply text-sm h-8 w-8": {},
+      },
+
+      "&-lg": {
+        "@apply text-base h-10 w-10": {},
+      },
+
+    },
+
+    ".form-input-addon": {
+      "@apply flex items-center w-auto rounded-base shadow-sm whitespace-nowrap": {},
+      "@apply border border-neutral-300": {},
+      "@apply text-neutral-600 bg-neutral-50": {},
+      // dark colors
+      "@apply dark:border-neutral-700": {},
+      "@apply dark:text-neutral-100 dark:bg-whiteAlpha-300": {},
+
+      "&-sm": {
+        "@apply px-3 text-xs": {},
+      },
+
+      "&-md": {
+        "@apply px-4 text-sm": {},
+      },
+
+      "&-lg": {
+        "@apply px-4 text-base": {},
+      },
+
+      "&-left": {
+        "@apply -mr-1 rounded-r-none": {},
+      },
+
+      "&-right": {
+        "@apply -ml-1 rounded-l-none": {},
+      },
+    },
+  };
+}
+
+module.exports = Forms = (colors) => ({
+  ".form-field": {
+    "@apply placeholder-gray-stroke": {},
+    "@apply relative w-full min-w-0 inline-flex items-center appearance-none focus-visible:outline-none": {},
+    "@apply transition-colors	duration-75 ease-out": {},
+
+    "&-sm": {
+      "@apply text-sm leading-sm": {},
+      borderRadius: "0.2rem",
+      padding: "1.08rem 1.44rem",
+    },
+
+    "&-md": {
+      "@apply text-base leading-base": {},
+      borderRadius: "0.2rem",
+      padding: "1.2rem 1.6rem",
+    },
+
+    "&-lg": {
+      "@apply text-lg leading-lg": {},
+      borderRadius: "0.2rem",
+      padding: "1.32rem 1.76rem",
+    },
+
+
+    "&-disabled": {
+      "@apply disabled:cursor-not-allowed": {},
+      "@apply disabled:bg-gray-lighter": {},
+      //"@apply disabled:shadow-none disabled:cursor-not-allowed disabled:opacity-60": {},
+      //"@apply disabled:border-neutral-200 disabled:bg-neutral-200": {},
+      //"@apply dark:disabled:border-transparent dark:disabled:bg-whiteAlpha-200": {},
+    },
+
+    // variants
+    ...fieldOutline(colors),
+    ...fieldSolid(colors),
+  },
+
+  ".form-textarea": {
+    //"@apply leading-tight": {},
+    minHeight: "5rem",
+  },
+
+  ".form-select": {
+    //"@apply pr-10": {},
+  },
+
+  ...formInputGroup(),
+  ...formControl(),
+});

package/src/components/icon-button.js

@@ -0,0 +1,5 @@
+module.exports = IconButton = () => ({
+  ".btn-icon": {
+    "@apply p-0": {},
+  },
+});

package/src/components/icon.js

@@ -0,0 +1,9 @@
+module.exports = Icon = () => ({
+  ".icon-inline": {
+    "@apply inline-block align-middle": {},
+  },
+
+  ".icon-block": {
+    "@apply block": {},
+  },
+});

package/src/components/kbd.js

@@ -0,0 +1,9 @@
+module.exports = Kbd = () => ({
+  ".kbd": {
+    "@apply inline-flex justify-center items-center capitalize text-xs p-1 rounded h-5 whitespace-nowrap font-sans": {},
+    "minWidth": "1.25rem",
+    "@apply bg-blackAlpha-100 text-neutral-900": {},
+    // dark
+    "@apply dark:bg-whiteAlpha-300 dark:text-neutral-300": {},
+  },
+});

package/src/components/link.js

@@ -0,0 +1,13 @@
+module.exports = Link = () => ({
+  ".link": {
+    "@apply cursor-base no-underline outline-none hover:underline": {},
+    "@apply text-primary dark:text-primary": {},
+    "@apply focus-visible:ring-4 focus-visible:ring-primary": {},
+
+    "@apply hover:text-primary-active": {},
+
+    "&-disabled": {
+      "@apply disabled:opacity-60 disabled:cursor-not-allowed disabled:no-underline": {},
+    },
+  },
+});

package/src/components/message.js

@@ -0,0 +1,29 @@
+module.exports = Message = () => ({
+  ".message": {
+    "@apply flex items-center px-3 py-1.5 m-2 text-sm rounded-base shadow-sm w-max break-words": {},
+    "@apply text-neutral-900 bg-white border border-neutral-200": {},
+    // dark
+    "@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600": {},
+  },
+
+  ".message-icon": {
+    "@apply mr-2": {},
+
+    "&-info": {
+      "--tw-text-opacity": "1",
+      color: "rgba(59, 130, 246, var(--tw-text-opacity))",
+    },
+    "&-success": {
+      "--tw-text-opacity": "1",
+      color: "rgba(34, 197, 94, var(--tw-text-opacity))",
+    },
+    "&-error": {
+      "--tw-text-opacity": "1",
+      color: "rgba(239, 68, 68, var(--tw-text-opacity))",
+    },
+    "&-warning": {
+      "--tw-text-opacity": "1",
+      color: "rgba(234, 179, 8, var(--tw-text-opacity))",
+    },
+  },
+});

package/src/components/modal.js

@@ -0,0 +1,29 @@
+module.exports = Modal = () => ({
+    ".modal": {
+        "@apply fixed inset-0 z-10 flex items-center justify-center overflow-y-auto": {},
+
+        "&-backdrop": {
+            "@apply bg-black bg-opacity-30": {},
+        },
+
+        "&-wrapper": {
+            "@apply flex flex-col container py-8 px-4 text-center bg-white max-w-screen-sm relative": {},
+        },
+
+        "&-close-btn": {
+            "@apply cursor-pointer hover:text-primary-active absolute right-8 top-6 border border-transparent focus-visible:border-black flex self-center": {},
+        },
+
+        "&-title": {
+            "@apply text-3xl p-4": {},
+        },
+
+        "&-description": {
+            "@apply text-base p-4": {},
+        },
+
+        "&-content-wrapper": {
+            "@apply p-4 space-y-10": {},
+        },
+    },
+});

package/src/components/notification.js

@@ -0,0 +1,56 @@
+module.exports = Notification = () => ({
+  ".notification": {
+    "@apply relative flex p-4 text-sm w-96 m-2 max-w-full rounded-base shadow-sm sm:max-w-md": {},
+    "@apply text-neutral-900 bg-white border border-neutral-200": {},
+    // dark
+    "@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600": {},
+  },
+
+  ".notification-icon": {
+    "@apply flex-shrink-0 w-5 h-5 mr-3": {},
+
+    "&-info": {
+      "--tw-text-opacity": "1",
+      color: "rgba(59, 130, 246, var(--tw-text-opacity))",
+    },
+    "&-success": {
+      "--tw-text-opacity": "1",
+      color: "rgba(34, 197, 94, var(--tw-text-opacity))",
+    },
+    "&-error": {
+      "--tw-text-opacity": "1",
+      color: "rgba(239, 68, 68, var(--tw-text-opacity))",
+    },
+    "&-warning": {
+      "--tw-text-opacity": "1",
+      color: "rgba(234, 179, 8, var(--tw-text-opacity))",
+    },
+  },
+
+  ".notification-content": {
+    "@apply flex flex-col items-start flex-1 mr-2 -mt-px text-left": {},
+
+    "&-title": {
+      "@apply font-semibold": {},
+    },
+
+    "&-description": {
+      "@apply text-neutral-500 dark:text-neutral-400": {},
+    },
+  },
+
+  ".notification-action": {
+    "@apply absolute space-x-2": {},
+    right: 16,
+    top: 16,
+
+    "&-undo": {
+      "@apply h-auto p-0 text-sm": {},
+    },
+
+    "&-close-button": {
+      "@apply cursor-base text-neutral-700 hover:text-neutral-900": {},
+      "@apply dark:text-neutral-400 dark:hover:text-neutral-100": {},
+    },
+  },
+});

package/src/components/radio.js

@@ -0,0 +1,103 @@
+module.exports = Radio = (colors) => ({
+  ".form-radio": {
+    "@apply shadow-sm": {},
+    backgroundColor: "inherit",
+    "@apply border-neutral-300": {},
+    "&[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": {
+      borderColor: "transparent",
+    },
+
+    // colors
+    ...colors.reduce(
+      (styles, color) => ({
+        ...styles,
+        [`&[data-color="${color}"]`]: {
+          [`@apply text-${color}-600`]: {},
+          [`@apply focus-visible:border-${color}-600 focus-visible:ring-${color}-600`]: {},
+          [`@apply dark:text-${color}-500`]: {},
+          [`@apply dark:focus-visible:border-${color}-400 dark:focus-visible:ring-${color}-400`]: {},
+        },
+      }),
+      {}
+    ),
+
+    "@apply dark:focus-visible:ring-offset-neutral-900": {},
+
+    // sizing
+    "&-sm": {
+      "@apply w-3 h-3": {},
+    },
+
+    "&-md": {
+      "@apply w-4 h-4": {},
+    },
+
+    "&-lg": {
+      "@apply w-5 h-5": {},
+    },
+
+    "&-xl": {
+      "@apply w-6 h-6": {},
+    },
+
+    // disabled
+    "&-disabled": {
+      "@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 ml-2 select-none text-sm": {},
+      "@apply text-neutral-900": {},
+      // dark colors
+      "@apply dark:text-neutral-100": {},
+  
+      "&-sm": {
+        "@apply text-xs": {},
+      },
+  
+      "&-md": {
+        "@apply text-sm": {},
+      },
+  
+      "&-lg": {
+        "@apply text-base": {},
+      },
+  
+      "&-xl": {
+        "@apply text-lg": {},
+      },
+    },
+  },
+});

package/src/components/switch.js

@@ -0,0 +1,112 @@
+module.exports = Switch = (colors) => ({
+  ".form-switch-label": {
+    "@apply inline-block align-middle": {},
+  },
+  ".form-switch": {
+    "@apply rounded-full p-0.5 cursor-base focus:outline-none": {},
+    "@apply bg-gray-stroke dark:bg-neutral-700": {},
+    // Hover
+    //"@apply hover:bg-neutral-300 dark:hover:bg-neutral-600": {},
+
+    border: "0.1rem solid transparent",
+
+    "input[type=checkbox]:checked + &, input[type=checkbox][aria-checked=mixed] + &": {
+      backgroundColor: "currentColor",
+      ".form-switch-box-sm": {
+        transform: "translateX(1.42rem)",
+      },
+      ".form-switch-box-md": {
+        transform: "translateX(1.6rem)",
+      },
+      ".form-switch-box-lg": {
+        transform: "translateX(1.78rem)",
+      },
+    },
+
+
+
+    "input[type=checkbox]:focus-visible + &": {
+      "@apply z-base !important": {},
+      "@apply border-primary !important": {},
+      "@apply ring-4 ring-black !important": {},
+    },
+
+    "input[type=checkbox]:checked:focus-visible + &, input[type=checkbox][aria-checked=mixed]:focus-visible + &": {
+      "@apply ring-black !important": {},
+    },
+    ".dark input[type=checkbox]:checked:focus-visible + &,.dark input[type=checkbox][aria-checked=mixed]:focus-visible + &": {
+      "@apply ring-black !important": {},
+    },
+    "input[type=checkbox]:checked:hover:not(:disabled) + &, input[type=checkbox][aria-checked=mixed]:hover:not(:disabled) + &": {
+      "@apply cursor-base": {},
+    },
+
+    // colors
+    ...colors.reduce(
+      (styles, color) => ({
+        ...styles,
+        [`&[data-color="${color}"]`]: {
+          [`@apply text-${color}`]: {},
+
+          "input[type=checkbox]:focus + &": {
+            borderColor: `theme('colors.${color}.DEFAULT')`,
+            boxShadow: `0 0 5px theme('colors.${color}.DEFAULT')`,
+            borderWidth: "0.1rem",
+          },
+        },
+      }),
+      {}
+    ),
+
+    // disabled
+    "&-disabled": {
+      "@apply cursor-not-allowed": {},
+
+      "&": {
+        backgroundColor: "#ECECEC",
+      }
+    },
+
+    "input[type=checkbox]:not(:checked) + &-disabled .form-switch-box": {
+      "@apply bg-gray-stroke": {},
+    },
+
+
+    // sizing
+    "&-sm": {
+      height: "2.16rem",
+      width: "3.6rem",
+    },
+
+    "&-md": {
+      height: "2.4rem",
+      width: "4rem",
+    },
+
+    "&-lg": {
+      height: "2.64rem",
+      width: "4.4rem",
+    },
+  },
+
+  // Knob
+  ".form-switch-box": {
+    "@apply transition-transform ease-in-out duration-150 transform bg-white rounded-full shadow translate-x-0": {},
+
+    // sizing
+    "&-sm": {
+      height: "1.6rem",
+      width: "1.7rem",
+    },
+
+    "&-md": {
+      height: "2rem",
+      width: "2rem",
+    },
+
+    "&-lg": {
+      height: "2.2rem",
+      width: "2.2rem",
+    },
+  },
+});

package/src/components/table.js

@@ -0,0 +1,13 @@
+module.exports = Table = () => ({
+    ".table": {
+        "@apply min-w-full border-collapse border-gray-stroke divide-gray-lighter table-auto": {},
+
+        "&-item": {
+            "@apply px-6 py-4 border border-gray-stroke whitespace-nowrap": {},
+
+            "&:nth-child(odd)": {
+                "@apply bg-gray-lighter": {},
+            }
+        }
+    },
+});