@sk-web-gui/core 0.1.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Sundsvalls Kommun
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,5 @@
+## Installation
+
+```sh
+yarn add @sk-web-gui/core
+```

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@sk-web-gui/core",
+  "version": "0.1.2",
+  "license": "MIT",
+  "main": "src/index.js",
+  "files": [
+    "src/",
+    "dist/"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vechai/sk-web-gui.git"
+  },
+  "scripts": {
+    "build": "node scripts/build.js",
+    "version": "yarn build"
+  },
+  "bugs": {
+    "url": "https://github.com/vechai/sk-web-gui/issues"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=2.1.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.2.6",
+    "clean-css": "^5.1.2",
+    "postcss": "^8.3.4",
+    "postcss-import": "^14.0.2",
+    "tailwindcss": "^2.2.4"
+  },
+  "gitHead": "f048e706321e9d44b425a55cc44e261a248e01c2"
+}

package/src/colors.js

@@ -0,0 +1,77 @@
+const withOpacity = require("./with-opacity");
+
+module.exports = {
+  primary: {
+    DEFAULT: withOpacity("--vc-colors-primary-DEFAULT"),
+    dark: withOpacity("--vc-colors-primary-dark"),
+    light: withOpacity("--vc-colors-primary-light"),
+    active: withOpacity("--vc-colors-primary-active"),
+    50: withOpacity("--vc-colors-primary-DEFAULT"),
+    100: withOpacity("--vc-colors-primary-DEFAULT"),
+    200: withOpacity("--vc-colors-primary-DEFAULT"),
+    300: withOpacity("--vc-colors-primary-DEFAULT"),
+    400: withOpacity("--vc-colors-primary-DEFAULT"),
+    500: withOpacity("--vc-colors-primary-DEFAULT"),
+    600: withOpacity("--vc-colors-primary-DEFAULT"),
+    700: withOpacity("--vc-colors-primary-DEFAULT"),
+    800: withOpacity("--vc-colors-primary-DEFAULT"),
+    900: withOpacity("--vc-colors-primary-DEFAULT"),
+  },
+
+  secondary: {
+    DEFAULT: withOpacity("--vc-colors-secondary-DEFAULT"),
+    dark: withOpacity("--vc-colors-secondary-dark"),
+    light: withOpacity("--vc-colors-secondary-light"),
+    active: withOpacity("--vc-colors-secondary-active"),
+    50: withOpacity("--vc-colors-secondary-DEFAULT"),
+    100: withOpacity("--vc-colors-secondary-DEFAULT"),
+    200: withOpacity("--vc-colors-secondary-DEFAULT"),
+    300: withOpacity("--vc-colors-secondary-DEFAULT"),
+    400: withOpacity("--vc-colors-secondary-DEFAULT"),
+    500: withOpacity("--vc-colors-secondary-DEFAULT"),
+    600: withOpacity("--vc-colors-secondary-DEFAULT"),
+    700: withOpacity("--vc-colors-secondary-DEFAULT"),
+    800: withOpacity("--vc-colors-secondary-DEFAULT"),
+    900: withOpacity("--vc-colors-secondary-DEFAULT"),
+  },
+
+  neutral: {
+    DEFAULT: withOpacity("--vc-colors-neutral"),
+    50: withOpacity("--vc-colors-neutral-50"),
+    100: withOpacity("--vc-colors-neutral-100"),
+    200: withOpacity("--vc-colors-neutral-200"),
+    300: withOpacity("--vc-colors-neutral-300"),
+    400: withOpacity("--vc-colors-neutral-400"),
+    500: withOpacity("--vc-colors-neutral-500"),
+    600: withOpacity("--vc-colors-neutral-600"),
+    700: withOpacity("--vc-colors-neutral-700"),
+    800: withOpacity("--vc-colors-neutral-800"),
+    900: withOpacity("--vc-colors-neutral-900"),
+  },
+
+  whiteAlpha: {
+    50: "rgba(255, 255, 255, 0.04)",
+    100: "rgba(255, 255, 255, 0.06)",
+    200: "rgba(255, 255, 255, 0.08)",
+    300: "rgba(255, 255, 255, 0.16)",
+    400: "rgba(255, 255, 255, 0.24)",
+    500: "rgba(255, 255, 255, 0.36)",
+    600: "rgba(255, 255, 255, 0.48)",
+    700: "rgba(255, 255, 255, 0.64)",
+    800: "rgba(255, 255, 255, 0.80)",
+    900: "rgba(255, 255, 255, 0.92)",
+  },
+
+  blackAlpha: {
+    50: "rgba(0, 0, 0, 0.04)",
+    100: "rgba(0, 0, 0, 0.06)",
+    200: "rgba(0, 0, 0, 0.08)",
+    300: "rgba(0, 0, 0, 0.16)",
+    400: "rgba(0, 0, 0, 0.24)",
+    500: "rgba(0, 0, 0, 0.36)",
+    600: "rgba(0, 0, 0, 0.48)",
+    700: "rgba(0, 0, 0, 0.64)",
+    800: "rgba(0, 0, 0, 0.80)",
+    900: "rgba(0, 0, 0, 0.92)",
+  },
+};

package/src/components/accordion.js

@@ -0,0 +1,42 @@
+module.exports = Accordion = () => ({
+
+    ".accordion": {
+        //"@apply": {},
+        //padding: "2.4rem",
+        
+        "@apply border border-gray-stroke": {},
+
+        "&-header": {
+            "@apply flex flex-col text-left bg-primary text-white": {},
+
+            "[aria-expanded=\"true\"] &": {
+                "@apply bg-hover": {}
+            }
+        },
+
+        "&-is-open &-header": {
+            "@apply bg-hover": {}
+        },
+
+        "&-toggle": {
+            "@apply flex text-left text-lg m-4 inline-block": {},
+            //"@apply focus-visible:shadow shadow-lg": {},
+            "&:focus-visible, &:focus": {
+                boxShadow: "0 0 0 0.4rem #fff!important",
+                outline: "0",
+                //"@apply border-4": {},
+            }
+        },
+
+        "&-body": {
+            "@apply transition-all h-0 hidden overflow-hidden": {},
+            transitionProperty: "height",
+            transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
+            transitionDuration: "150m",
+
+            "&[aria-hidden=\"false\"], &[data-hidden=\"false\"]": {
+                "@apply block h-auto p-lg": {},
+            },
+        },
+    },
+});

package/src/components/alert.js

@@ -0,0 +1,98 @@
+function alertSubtle(colors) {
+  return {
+    ".alert-subtle": {
+      "@apply border rounded-base": {},
+      "@apply text-neutral-900": {},
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply bg-${color}-50 border-${color}-500`]: {},
+
+            [`@apply dark:text-${color}-300 dark:bg-${color}-500`]: {},
+            "@apply dark:bg-opacity-15": {},
+            "@apply dark:border-opacity-40": {},
+          },
+        }),
+        {}
+      ),
+    },
+  };
+}
+
+function alertSolid(colors) {
+  return {
+    ".alert-solid": {
+      "@apply border rounded-base": {},
+      "@apply text-white": {},
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply bg-${color}-500 border-${color}-700 border-opacity-20`]: {},
+
+            [`@apply dark:bg-${color}-600 dark:border-${color}-500`]: {},
+            "@apply dark:border-opacity-40": {},
+          },
+        }),
+        {}
+      ),
+    },
+  };
+}
+
+function alertLeftAccent(colors) {
+  return {
+    ".alert-left-accent": {
+      "@apply border-l-2 rounded-none": {},
+      "@apply text-neutral-900": {},
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply bg-transparent border-${color}-500`]: {},
+
+            [`@apply dark:text-${color}-300`]: {},
+          },
+        }),
+        {}
+      ),
+    },
+  };
+}
+
+function alertCloseButton(colors) {
+  return {
+    ".alert-close-button": {
+      "@apply absolute right-4 cursor-base focus-visible:outline-none": {},
+      "@apply text-neutral-600 hover:text-neutral-700": {},
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply dark:text-${color}-300 dark:hover:text-${color}-400`]: {},
+          },
+        }),
+        {}
+      ),
+    },
+  };
+}
+
+module.exports = Alert = (colors) => ({
+  ".alert": {
+    "@apply w-full flex items-center px-4 py-3 relative overflow-hidden text-sm": {},
+  },
+
+  // variants
+  ...alertSubtle(colors),
+  ...alertSolid(colors),
+  ...alertLeftAccent(colors),
+
+  // close button
+  ...alertCloseButton(colors),
+});

package/src/components/avatar.js

@@ -0,0 +1,85 @@
+module.exports = Avatar = () => ({
+  ".avatar": {
+    "@apply relative inline-flex items-center justify-center flex-shrink-0 align-top rounded-full": {},
+    "@apply bg-neutral-300 text-neutral-800": {},
+    // dark colors
+    "@apply dark:bg-neutral-600 dark:text-neutral-100": {},
+
+    "&-2xs": {
+      "@apply w-4 h-4": {},
+    },
+
+    "&-xs": {
+      "@apply w-5 h-5": {},
+    },
+
+    "&-sm": {
+      "@apply w-6 h-6": {},
+    },
+
+    "&-md": {
+      "@apply w-7 h-7": {},
+    },
+
+    "&-lg": {
+      "@apply w-8 h-8": {},
+    },
+
+    "&-xl": {
+      "@apply w-10 h-10": {},
+    },
+
+    "&-2xl": {
+      "@apply w-12 h-12": {},
+    },
+
+    "&-3xl": {
+      "@apply w-16 h-16": {},
+    },
+  },
+
+  ".avatar-bordered": {
+    "@apply border-2 border-white": {},
+    "@apply dark:border-neutral-800": {},
+  },
+
+  ".avatar-name": {
+    "@apply font-medium text-center uppercase": {},
+
+    "&-2xs": {
+      "@apply w-4 h-4": {},
+    },
+
+    "&-xs": {
+      "@apply w-5 h-5": {},
+    },
+
+    "&-sm": {
+      "@apply w-6 h-6": {},
+    },
+
+    "&-md": {
+      "@apply w-7 h-7": {},
+    },
+
+    "&-lg": {
+      "@apply w-8 h-8": {},
+    },
+
+    "&-xl": {
+      "@apply w-10 h-10": {},
+    },
+
+    "&-2xl": {
+      "@apply w-12 h-12": {},
+    },
+
+    "&-3xl": {
+      "@apply w-16 h-16": {},
+    },
+  },
+
+  ".avatar-group": {
+    "@apply flex items-center justify-end flex-row-reverse": {},
+  },
+});

package/src/components/badge.js

@@ -0,0 +1,61 @@
+module.exports = Badge = (colors) => ({
+  ".badge": {
+    "@apply inline-block text-xs font-medium leading-4 text-center whitespace-nowrap": {},
+
+    "&-light": {
+      "@apply text-neutral-900 bg-neutral-200 border border-transparent": {},
+      "@apply dark:text-neutral-100 dark:bg-neutral-700": {},
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply text-${color}-800 bg-${color}-100`]: {},
+            [`@apply dark:text-${color}-400 dark:bg-${color}-500`]: {},
+            "@apply dark:bg-opacity-15": {},
+          },
+        }),
+        {}
+      ),
+    },
+
+    "&-solid": {
+      "@apply text-white bg-neutral-500 border border-transparent": {},
+      "@apply dark:border-neutral-600 dark:text-neutral-100 dark:bg-neutral-700": {},
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply bg-${color}-500`]: {},
+            [`@apply dark:text-${color}-400 dark:border-${color}-500 dark:bg-${color}-500`]: {},
+            "@apply dark:bg-opacity-15": {},
+            "@apply dark:border-opacity-40": {},
+          },
+        }),
+        {}
+      ),
+      
+    },
+
+    "&-sm": {
+      minWidth: "14px",
+      height: "14px",
+      padding: 0,
+      lineHeight: "12px",
+      borderRadius: "2em",
+    },
+
+    "&-md": {
+      "@apply px-1.5 py-0": {},
+      minWidth: "20px",
+      height: "20px",
+      lineHeight: "18px",
+      borderRadius: "2em",
+    },
+
+    "&-shadow": {
+      "@apply ring-1 ring-white": {},
+      "@apply dark:ring-black": {},
+    },
+  },
+});

package/src/components/breadcrumb.js

@@ -0,0 +1,13 @@
+module.exports = Breadcrumb = () => ({
+  ".breadcrumb": {
+    "@apply relative": {},
+
+    "&-item": {
+      "@apply inline-flex items-center whitespace-nowrap": {},
+    },
+
+    "&-separator": {
+      "@apply mx-2 text-neutral-500": {},
+    },
+  },
+});

package/src/components/button-group.js

@@ -0,0 +1,46 @@
+// TODO: how it works with prefix?
+module.exports = ButtonGroup = () => ({
+  ".btn-group": {
+    "@apply inline-block": {},
+
+    "&.btn-group-attached": {
+      "> .btn-icon": {
+        boxSizing: "content-box",
+      },
+      "> *:first-of-type:not(:last-of-type)": {
+        borderTopRightRadius: "0px",
+        borderBottomRightRadius: "0px",
+      },
+
+      "> *:not(:first-of-type):not(:last-of-type)": {
+        borderRadius: "0px",
+      },
+
+      "> *:not(:first-of-type):last-of-type": {
+        borderTopLeftRadius: "0px",
+        borderBottomLeftRadius: "0px",
+      },
+
+      "> .btn-solid:not(:last-child), > .btn-outline:not(:last-child)": {
+        borderRightWidth: "0px",
+      },
+
+      "> .btn-solid:hover, > .btn-outline:hover": {
+        borderRightWidth: "1px",
+      },
+
+      "> *:not(:last-of-type):hover + .btn-solid, > *:not(:last-of-type):hover + .btn-outline": {
+        borderLeftWidth: "0px",
+      },
+
+      "> .btn-solid:focus, > .btn-outline:focus": {
+        zIndex: "1px",
+        borderRightWidth: "1px",
+      },
+
+      "> *:not(:last-of-type):focus + .btn-solid, > *:not(:last-of-type):focus + .btn-outline": {
+        borderLeftWidth: "0px",
+      },
+    },
+  },
+});