@sk-web-gui/core 0.1.23 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "0.1.23",
+  "version": "0.1.26",
   "license": "MIT",
   "main": "src/index.js",
   "files": [
@@ -31,5 +31,5 @@
     "postcss-import": "^14.0.2",
     "tailwindcss": "^2.2.4"
   },
-  "gitHead": "e50bb4ca3f72e752e3f94f870357e3229119f8af"
+  "gitHead": "52b6dd676c9ab6d2ab1b6de1fd130de9a19353dc"
 }

package/src/components/accordion.js

@@ -7,7 +7,11 @@ module.exports = Accordion = () => ({
 
             "[aria-expanded=\"true\"] &": {
                 "@apply bg-hover": {}
-            }
+            },
+
+            "&-icon": {
+                "@apply ml-auto !text-2xl": {},
+            },
         },
 
         "&-is-open &-header": {

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/calendar.js

@@ -0,0 +1,81 @@
+module.exports = Calendar = () => ({
+
+    // Month row
+    ".MuiCalendarPicker-root > div:first-of-type": {
+        "@apply ml-2 -mr-2 px-10": {},
+    },
+
+    // Month
+    ".MuiCalendarPicker-root > div:first-of-type > div": {
+        "@apply font-bold text-base text-body": {},
+    },
+
+    // Arrow switchers
+    ".MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root .MuiSvgIcon-root": {
+        "@apply text-body text-lg": {},
+    },
+    ".MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root": {
+        "@apply border-solid border border-transparent focus:text-transparent hover:text-transparent focus:bg-transparent hover:bg-transparent focus:border-primary hover:border-primary": {},
+    },
+    ".MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root": {
+        "@apply border-solid border border-transparent focus:text-transparent hover:text-transparent focus:bg-transparent hover:bg-transparent focus:border-primary hover:border-primary": {},
+    },
+    // Arrow spacer
+    ".MuiCalendarPicker-root .MuiPickersArrowSwitcher-spacer": {
+        "@apply w-11": {},
+    },
+    // Disabled arrow
+    ".MuiCalendarPicker-root > div:first-of-type .MuiButtonBase-root[disabled] .MuiSvgIcon-root": {
+        "@apply text-gray-stroke": {},
+    },
+
+    // Weekdays
+    ".MuiCalendarPicker-root div > div:first-of-type > .MuiTypography-root": {
+        "@apply font-bold text-body text-base":{},
+    },
+
+    // Days-Grid
+    ".MuiCalendarPicker-root > div:last-of-type > div:last-of-type": {
+        "@apply min-h-min pb-6":{},
+    },
+
+    // Day picking
+    ".MuiCalendarPicker-root .MuiPickersDay-root": {
+        "@apply text-base":{},
+    },
+    ".MuiCalendarPicker-root .Mui-disabled": {
+        "@apply text-gray-stroke":{},
+    },
+
+    // Day picked
+    ".MuiCalendarPicker-root .MuiButtonBase-root.MuiPickersDay-root.Mui-selected": {
+        "@apply bg-background-one text-body focus-visible:bg-background-one hover:bg-background-one focus:bg-background-one": {},
+    },
+
+    // Day hovered
+    ".MuiCalendarPicker-root .MuiPickersDay-root, .MuiCalendarPicker-root .MuiPickersDay-root.MuiPickersDay-today": {
+        "@apply border-primary border-solid focus-visible:border hover:bg-transparent focus:bg-transparent hover:border": {},
+    },
+
+    // today
+    ".MuiCalendarPicker-root .MuiPickersDay-root.MuiPickersDay-today": {
+        "@apply border-0 hover:border":{},
+    },
+
+    ".calendar": {
+        // Input field
+        ".datepicker-input": {
+            "@apply relative": {},
+        },
+
+        ".datepicker-input input":  {
+            "@apply pl-20 cursor-pointer":{},
+        },
+
+        ".datepicker-input-icon": {
+            "@apply pointer-events-none absolute m-6 top-0 left-0 text-xl fill-body":{},
+        },
+    },
+
+    
+});

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/cookie-consent.js

@@ -4,6 +4,10 @@ module.exports = CookieConsent = () => ({
 
         "&-close-btn": {
             "@apply cursor-pointer hover:text-primary-active absolute right-8 top-6 border border-transparent focus-visible:border-black flex self-center": {},
+
+            "&-icon": {
+                "@apply !text-2xl": {}
+            },
         },
 
         "&-content-wrapper": {

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
@@ -242,7 +242,15 @@ module.exports = Forms = (colors) => ({
   },
 
   ".form-select": {
-    //"@apply pr-10": {},
+    // "@apply ":{}
+
+    "&-option": {
+        "@apply rounded-none cursor-default hover:text-white focus-visible:text-white hover:bg-primary focus-visible:bg-primary": {},
+    
+        "&.active": {
+          "@apply bg-primary text-white": {},
+        }
+    }
   },
 
   ...formInputGroup(),

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

@@ -6,16 +6,11 @@ module.exports = Link = () => ({
 
     "@apply hover:text-primary-active": {},
 
-    "&[target='_blank']": {
-      "&::after": {
-        fontFamily: "Material Icons Outlined",
-        display: "inline-block",
-        position: "relative",
-        content: "'launch'",
-        lineHeight: "1",
-        marginLeft: ".25em",
-        verticalAlign: "text-top",
-      },
+    "&-external-icon": {
+      fontSize: "0.875em !important",
+      lineHeight: "1",
+      marginLeft: ".25em",
+      verticalAlign: "text-top",
     },
 
     "&-disabled": {

package/src/components/message.js

@@ -1,47 +1,41 @@
 module.exports = Message = () => ({
   ".message": {
     "@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-neutral-900 bg-white border-l-4": {},
+    "@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",
 
     "&-text": {
       "@apply text-left flex-grow": {},
     },
 
     "&-info": {
-      "--tw-text-opacity": "1",
-      "borderColor": "rgba(59, 130, 246, var(--tw-text-opacity))",
+      "@apply border-info": {},
 
       ".message-icon": {
-        "color": "rgba(59, 130, 246, var(--tw-text-opacity))",
+        "@apply text-info": {},
       },
 
     },
     "&-success": {
-      "--tw-text-opacity": "1",
-      "borderColor": "rgba(34, 197, 94, var(--tw-text-opacity))",
+      "@apply border-success": {},
 
       ".message-icon": {
-        "color": "rgba(34, 197, 94, var(--tw-text-opacity))",
+        "@apply text-success": {},
       },
     },
     "&-error": {
-      "--tw-text-opacity": "1",
-      "borderColor": "rgba(239, 68, 68, var(--tw-text-opacity))",
+      "@apply border-error": {},
 
       ".message-icon": {
-        "color": "rgba(239, 68, 68, var(--tw-text-opacity))",
+        "@apply text-error": {},
       },
     },
     "&-warning": {
-      "--tw-text-opacity": "1",
-      "borderColor": "rgba(234, 179, 8, var(--tw-text-opacity))",
+      "@apply border-warning": {},
 
       ".message-icon": {
-        "color": "rgba(234, 179, 8, var(--tw-text-opacity))",
+        "@apply text-warning": {},
       },
     },
   },
@@ -51,14 +45,14 @@ module.exports = Message = () => ({
   },
 
   ".message-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: "1.2em",
     padding: "0.36em",
     marginLeft: "0.25em",
     marginRight: "-0.55em",
 
     "&-icon": {
-      fontSize: "1em"
+      "@apply !text-xl": {},
     },
 
     "&-disabled": {

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]": {
@@ -57,8 +57,8 @@ module.exports = Pagination = () => ({
       "&-icon": {
         "@apply m-1 align-text-bottom leading-none flex items-center": {},
 
-        ".material-icons-outlined": {
-          fontSize: ".675em",
+        ".MuiSvgIcon-root": {
+          fontSize: "1em",
         },
       },
     },

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/switch.js

@@ -1,6 +1,16 @@
 module.exports = Switch = (colors) => ({
   ".form-switch-label": {
     "@apply inline-block align-middle": {},
+
+    "&[type='hidden']": {
+      "@apply hidden": {},
+
+      ".form-switch": {
+        "@apply hidden": {},
+      },
+    } 
+    
+      
   },
   ".form-switch": {
     "@apply rounded-full p-0.5 cursor-base focus:outline-none": {},

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,14 +78,14 @@ 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",
     marginRight: "-0.55em",
 
     "&-icon": {
-      fontSize: "1em"
+      fontSize: "1em !important"
     },
 
     "&-disabled": {

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

@@ -23,6 +23,10 @@ module.exports = ZebraTable = () => ({
 
             "&-icon": {
                 "@apply inline-flex pl-sm": {},
+
+                ".MuiSvgIcon-root": {
+                    "@apply !text-lg": {},
+                },
     
     
                 "&-sort": {
@@ -38,7 +42,7 @@ module.exports = ZebraTable = () => ({
                 },
     
                 "&-more": {
-                    "@apply text-gray-stroke": {},
+                    "@apply text-gray": {},
                 },
             },
         },
@@ -48,7 +52,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": {},

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");
@@ -10,6 +11,7 @@ const ButtonGroup = require("./components/button-group");
 const Checkbox = require("./components/checkbox");
 const Dot = require("./components/dot");
 const Forms = require("./components/forms");
+const Calendar = require("./components/calendar");
 const IconButton = require("./components/icon-button");
 const Icon = require("./components/icon");
 const Link = require("./components/link");
@@ -41,6 +43,7 @@ const components = [
   Checkbox,
   Dot,
   Forms,
+  Calendar,
   IconButton,
   Icon,
   Link,
@@ -141,16 +144,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)",