@sk-web-gui/core 0.1.22 → 0.1.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "0.1.22",
+  "version": "0.1.25",
   "license": "MIT",
   "main": "src/index.js",
   "files": [
@@ -31,5 +31,5 @@
     "postcss-import": "^14.0.2",
     "tailwindcss": "^2.2.4"
   },
-  "gitHead": "109cac916802484e5b57826f06a107fd81707aec"
+  "gitHead": "98dc00be73bb80955d4b41dd19c98b8ee44fceb7"
 }

package/src/components/alert.js

@@ -2,7 +2,7 @@ function alertSubtle(colors) {
   return {
     ".alert-subtle": {
       "@apply border rounded-base": {},
-      "@apply text-neutral-900": {},
+      "@apply text-body": {},
 
       ...colors.reduce(
         (styles, color) => ({
@@ -47,7 +47,7 @@ function alertLeftAccent(colors) {
   return {
     ".alert-left-accent": {
       "@apply border-l-2 rounded-none": {},
-      "@apply text-neutral-900": {},
+      "@apply text-body": {},
 
       ...colors.reduce(
         (styles, color) => ({

package/src/components/badge.js

@@ -3,7 +3,7 @@ module.exports = Badge = (colors) => ({
     "@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 text-body bg-neutral-200 border border-transparent": {},
       "@apply dark:text-neutral-100 dark:bg-neutral-700": {},
 
       ...colors.reduce(

package/src/components/breadcrumb.js

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

package/src/components/button.js

@@ -73,7 +73,7 @@ function buttonOutline(colors) {
   return {
     "&-outline": {
       "@apply border border-neutral-200": {},
-      "@apply text-neutral-900 bg-transparent": {},
+      "@apply text-body bg-transparent": {},
       /* hover */
       "@apply hover:bg-neutral-100 hover:border-neutral-300": {},
       /* focus */
@@ -129,7 +129,7 @@ function buttonOutline(colors) {
 function buttonGhost(colors) {
   return {
     "&-ghost": {
-      "@apply text-neutral-900 bg-transparent": {},
+      "@apply text-body bg-transparent": {},
       "@apply hover:bg-neutral-100": {},
       /* focus */
       "@apply focus-visible:z-base": {},
@@ -171,7 +171,7 @@ function buttonLight(colors) {
     "&-light": {
       "@apply shadow-sm": {},
       "@apply border border-transparent": {},
-      "@apply text-neutral-900 bg-neutral-100": {},
+      "@apply text-body bg-neutral-100": {},
       /* hover */
       "@apply hover:bg-neutral-200": {},
       /* focus */

package/src/components/card.js

@@ -21,7 +21,7 @@ module.exports = Card = () => ({
             "@apply hover:shadow-xl hover:cursor-pointer": {},
         },
 
-        // "@apply bg-neutral-200 border border-neutral-100 text-neutral-900": {},
+        // "@apply bg-neutral-200 border border-neutral-100 text-body": {},
         // dark
         //"@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300": {},
     },
@@ -33,7 +33,7 @@ module.exports = Card = () => ({
     },    
 
     ".card-body": {
-        "@apply p-8": {},
+        "@apply text-body p-8": {},
     },
 
     ".card-image": {

package/src/components/checkbox.js

@@ -101,12 +101,12 @@ module.exports = Checkbox = (colors, theme) => ({
       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": {},
+      //"@apply dark:disabled:border-transparent dark:disabled:bg-white/20 dark:disabled:hover:text-white/20": {},
     },
 
     // label
     "&-label": {
-      "@apply select-none text-sm": {},
+      "@apply text-body select-none text-sm": {},
       marginLeft: "0.8rem",
       //"@apply text-black": {},
       // dark colors

package/src/components/code.js

@@ -1,7 +1,7 @@
 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": {},
+    "@apply bg-neutral-200 border border-neutral-100 text-body": {},
     // dark
     "@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300": {},
     padding: "2px 3px 1px",

package/src/components/forms.js

@@ -73,8 +73,8 @@ function fieldSolid(colors) {
       },
       "focus-visible:ring-4": {},
       /* dark mode */
-      "@apply dark:text-neutral-100 dark:bg-whiteAlpha-50": {},
-      "@apply dark:hover:bg-whiteAlpha-100": {},
+      "@apply dark:text-neutral-100 dark:bg-white/50": {},
+      "@apply dark:hover:bg-white/100": {},
       ".dark &[aria-invalid=true]": {
         "--tw-border-opacity": "1",
         borderColor: "rgba(248, 113, 113, var(--tw-border-opacity))",
@@ -110,7 +110,7 @@ function formControl() {
       "@apply w-full relative": {},
     },
     ".form-helper-text": {
-      "@apply mt-1.5 leading-none text-gray dark:text-whiteAlpha-600": {},
+      "@apply mt-1.5 leading-none text-gray dark:text-white/60": {},
     },
     ".form-error-message": {
       "@apply mt-1.5 leading-none flex items-center text-sm": {},
@@ -169,7 +169,7 @@ function formInputGroup() {
       "@apply text-neutral-600 bg-neutral-50": {},
       // dark colors
       "@apply dark:border-neutral-700": {},
-      "@apply dark:text-neutral-100 dark:bg-whiteAlpha-300": {},
+      "@apply dark:text-neutral-100 dark:bg-white/30": {},
 
       "&-sm": {
         "@apply px-3 text-xs": {},
@@ -224,7 +224,7 @@ module.exports = Forms = (colors) => ({
       "@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": {},
+      //"@apply dark:disabled:border-transparent dark:disabled:bg-white/20": {},
     },
 
     // variants

package/src/components/kbd.js

@@ -2,8 +2,8 @@ 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": {},
+    "@apply bg-blackAlpha-100 text-body": {},
     // dark
-    "@apply dark:bg-whiteAlpha-300 dark:text-neutral-300": {},
+    "@apply dark:bg-white/30 dark:text-neutral-300": {},
   },
 });

package/src/components/link.js

@@ -1,6 +1,6 @@
 module.exports = Link = () => ({
   ".link": {
-    "@apply cursor-base no-underline outline-none hover:underline": {},
+    "@apply cursor-base underline outline-none hover:underline": {},
     "@apply text-primary dark:text-primary": {},
     "@apply focus-visible:ring-4 focus-visible:ring-primary": {},
 

package/src/components/message.js

@@ -1,29 +1,64 @@
 module.exports = Message = () => ({
   ".message": {
-    "@apply max-w-2xl 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": {},
+    "@apply max-w-2xl flex items-center font-bold text-sm sm:text-base px-6 py-6 m-2 shadow-lg w-max break-words": {},
+    "@apply text-body bg-white border-l-4": {},
     // dark
     "@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600": {},
-  },
+    "minWidth": "520px",
+    "width": "520px",
 
-  ".message-icon": {
-    "@apply mr-2 flex-shrink-0": {},
+    "&-text": {
+      "@apply text-left flex-grow": {},
+    },
 
     "&-info": {
-      "--tw-text-opacity": "1",
-      color: "rgba(59, 130, 246, var(--tw-text-opacity))",
+      "@apply border-info": {},
+
+      ".message-icon": {
+        "@apply text-info": {},
+      },
+
     },
     "&-success": {
-      "--tw-text-opacity": "1",
-      color: "rgba(34, 197, 94, var(--tw-text-opacity))",
+      "@apply border-success": {},
+
+      ".message-icon": {
+        "@apply text-success": {},
+      },
     },
     "&-error": {
-      "--tw-text-opacity": "1",
-      color: "rgba(239, 68, 68, var(--tw-text-opacity))",
+      "@apply border-error": {},
+
+      ".message-icon": {
+        "@apply text-error": {},
+      },
     },
     "&-warning": {
-      "--tw-text-opacity": "1",
-      color: "rgba(234, 179, 8, var(--tw-text-opacity))",
+      "@apply border-warning": {},
+
+      ".message-icon": {
+        "@apply text-warning": {},
+      },
+    },
+  },
+
+  ".message-icon": {
+    "@apply mr-4 flex-shrink-0 w-10 h-10": {},
+  },
+
+  ".message-close-button": {
+    "@apply text-body border-transparent flex items-center justify-center transition-all duration-150 rounded-full outline-none cursor-base": {},
+    fontSize: "1.2em",
+    padding: "0.36em",
+    marginLeft: "0.25em",
+    marginRight: "-0.55em",
+
+    "&-icon": {
+      fontSize: "1em"
+    },
+
+    "&-disabled": {
+      "@apply disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none": {},
     },
   },
 });

package/src/components/notification.js

@@ -1,7 +1,7 @@
 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": {},
+    "@apply text-body bg-white border border-neutral-200": {},
     // dark
     "@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600": {},
   },
@@ -49,7 +49,7 @@ module.exports = Notification = () => ({
     },
 
     "&-close-button": {
-      "@apply cursor-base text-neutral-700 hover:text-neutral-900": {},
+      "@apply cursor-base text-neutral-700 hover:text-body": {},
       "@apply dark:text-neutral-400 dark:hover:text-neutral-100": {},
     },
   },

package/src/components/pagination.js

@@ -29,7 +29,7 @@ module.exports = Pagination = () => ({
     },
 
     "&-prevNextButton": {
-      "@apply ml-4 inline-flex items-center sm:w-auto inline-flex flex-row leading-none":
+      "@apply text-body ml-4 inline-flex items-center sm:w-auto inline-flex flex-row leading-none":
         {},
 
       "&[data-reverse=true]": {

package/src/components/radio.js

@@ -73,13 +73,13 @@ module.exports = Radio = (colors) => ({
     // 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": {},
+      "@apply dark:disabled:border-transparent dark:disabled:bg-white/20 dark:disabled:hover:text-white/20": {},
     },
 
     // label
     "&-label": {
       "@apply ml-2 select-none text-sm": {},
-      "@apply text-neutral-900": {},
+      "@apply text-body": {},
       // dark colors
       "@apply dark:text-neutral-100": {},
   

package/src/components/tag.js

@@ -1,7 +1,7 @@
 function tagOutline(colors) {
   return {
     ".tag-outline": {
-      "@apply border bg-transparent border-gray-stroke text-neutral-900": {},
+      "@apply border bg-transparent border-gray-stroke text-body": {},
 
       "&[href]": {
         [`@apply hover:border-hover hover:text-white hover:bg-hover`]: {},
@@ -24,7 +24,7 @@ function tagSolid(colors) {
       },
 
       ".tag-close-button": {
-        "@apply text-white": {}
+        "@apply text-white hover:text-body": {}
       },
     },
   };
@@ -33,7 +33,7 @@ function tagSolid(colors) {
 function tagLight(colors) {
   return {
     ".tag-light": {
-      "@apply border border-transparent text-neutral-900": {},
+      "@apply border border-transparent text-body": {},
 
       "&[href]": {
         [`@apply hover:border-hover`]: {},
@@ -78,7 +78,7 @@ module.exports = Tag = (colors) => ({
   ...tagLight(colors),
 
   ".tag-close-button": {
-    "@apply border-transparent flex items-center justify-center transition-all duration-150 rounded-full outline-none cursor-base": {},
+    "@apply text-body border-transparent flex items-center justify-center transition-all duration-150 rounded-full outline-none cursor-base": {},
     fontSize: "1em",
     padding: "0.36em",
     marginLeft: "0.25em",

package/src/components/user-menu.js

@@ -1,7 +1,7 @@
 module.exports = UserMenu = (colors) => ({
   ".usermenu": {
     // "@apply mx-sm mt-sm mb-0 px-md py-0 divide-y divide-y-2 divide-gray-300 bg-white border-2 border-white border-solid rounded":
-    "@apply drop-shadow-none shadow-none filter-none": {},
+    "@apply text-body drop-shadow-none shadow-none filter-none": {},
     // "@apply ": {},
     "&-is-open": {
       // "@apply border-2 border-gray-300 border-solid rounded": {},
@@ -14,7 +14,7 @@ module.exports = UserMenu = (colors) => ({
       },
     },
     "&-item": {
-      "@apply block px-lg py-md lg:px-md lg:py-sm w-full cursor-pointer text-black no-underline": {},
+      "@apply block px-lg py-md lg:px-md lg:py-sm w-full cursor-pointer text-body no-underline": {},
       "&.active": {
         "@apply bg-hover text-white no-underline": {},
       },

package/src/components/zebratable.js

@@ -38,7 +38,7 @@ module.exports = ZebraTable = () => ({
                 },
     
                 "&-more": {
-                    "@apply text-gray-stroke": {},
+                    "@apply text-gray": {},
                 },
             },
         },
@@ -48,7 +48,7 @@ module.exports = ZebraTable = () => ({
         },
 
         "&-tbody": {
-            "@apply lg:bg-white": {},
+            "@apply text-body lg:bg-white": {},
 
             "&-tr": {
                 "@apply transition-all bg-white lg:even:bg-white lg:odd:bg-gray-100 px-md py-md md:px-lg md:py-lg my-lg first-of-type:mt-0 block shadow-md lg:shadow-none lg:table-row lg:my-0 lg:py-0 lg:px-lg": {},
@@ -64,7 +64,11 @@ module.exports = ZebraTable = () => ({
         },
 
         "&-paginationwrapper": {
-            "@apply px-lg my-lg w-full text-lg flex justify-center lg:justify-start": {},
+            "@apply w-full text-lg flex justify-center lg:justify-start": {},
+        },
+
+        "&-bottomwrapper": {
+            "@apply mt-lg px-lg flex items-center justify-end": {},
         },
     },
 });

package/src/index.js

@@ -1,6 +1,7 @@
 const plugin = require("tailwindcss/plugin");
 
-const colors = require("./colors");
+// const colors = require("/colors");
+const { colors } = require("@sk-web-gui/theme");
 const withOpacity = require("./with-opacity");
 // components
 const Alert = require("./components/alert");
@@ -141,16 +142,7 @@ module.exports = plugin.withOptions(
         extend: {
           colors: {
             ...colors,
-            gray: {
-              DEFAULT: "#4b4b4b",
-              stroke: "#939393",
-              middle: "#ECECEC",
-              light: "#F4F4F4",
-              lighter: "#F9F9F9",
-            },
-            hover: {
-              DEFAULT: "#2B76B0",
-            },
+            current: 'currentColor',
           },
           cursor: {
             base: "var(--vc-cursor)",