@sk-web-gui/core 0.1.33 → 0.1.34

package/src/components/tag.js

@@ -1,9 +1,9 @@
 function tagOutline(colors) {
   return {
-    ".tag-outline": {
-      "@apply border bg-transparent border-gray-stroke text-body": {},
+    '.tag-outline': {
+      '@apply border bg-transparent border-gray-stroke text-body': {},
 
-      "&[href]": {
+      '&[href]': {
         [`@apply hover:border-hover hover:text-white hover:bg-hover`]: {},
         [`@apply active:text-white active:bg-hover`]: {},
         [`@apply focus-visible:text-white focus-visible:ring-4 focus-visible:ring-black focus-visible:bg-hover`]: {},
@@ -14,17 +14,17 @@ function tagOutline(colors) {
 
 function tagSolid(colors) {
   return {
-    ".tag-solid": {
-      "@apply border bg-gray-stroke border-transparent text-white": {},
+    '.tag-solid': {
+      '@apply border bg-gray-stroke border-transparent text-white': {},
 
-      "&[href]": {
+      '&[href]': {
         [`@apply hover:text-white hover:bg-hover`]: {},
         [`@apply active:text-white active:bg-hover`]: {},
         [`@apply focus-visible:text-white focus-visible:ring-4 focus-visible:ring-black focus-visible:bg-hover`]: {},
       },
 
-      ".tag-close-button": {
-        "@apply text-white hover:text-body": {}
+      '.tag-close-button': {
+        '@apply text-white hover:text-body': {},
       },
     },
   };
@@ -32,10 +32,10 @@ function tagSolid(colors) {
 
 function tagLight(colors) {
   return {
-    ".tag-light": {
-      "@apply border border-transparent text-body": {},
+    '.tag-light': {
+      '@apply border border-transparent text-body': {},
 
-      "&[href]": {
+      '&[href]': {
         [`@apply hover:border-hover`]: {},
         [`@apply active:border-hover`]: {},
         [`@apply focus-visible:border-hover focus-visible:ring-4 focus-visible:ring-black`]: {},
@@ -45,30 +45,31 @@ function tagLight(colors) {
 }
 
 module.exports = Tag = (colors) => ({
-  ".tag": {
-    "@apply leading-none inline-flex items-center content-center max-h-full rounded-full font-normal outline-none whitespace-nowrap": {},
-    width: "fit-content",
-    height: "fit-content",
-    padding: "0 1.145em 0 1.145em",
-    borderRadius: "3.2rem",
+  '.tag': {
+    '@apply leading-none inline-flex items-center content-center max-h-full rounded-full font-normal outline-none whitespace-nowrap':
+      {},
+    width: 'fit-content',
+    height: 'fit-content',
+    padding: '0 1.145em 0 1.145em',
+    borderRadius: '3.2rem',
 
-    "&-text": {
-      padding: "0.5em 0"
+    '&-text': {
+      padding: '0.5em 0',
     },
 
-    "&-sm": {
-      "@apply text-xs": {},
-      minWidth: "1.25rem",
+    '&-sm': {
+      '@apply text-xs': {},
+      minWidth: '1.25rem',
     },
 
-    "&-md": {
-      "@apply text-sm": {},
-      minWidth: "1.5rem",
+    '&-md': {
+      '@apply text-sm': {},
+      minWidth: '1.5rem',
     },
 
-    "&-lg": {
-      "@apply text-base": {},
-      minWidth: "1.75rem",
+    '&-lg': {
+      '@apply text-base': {},
+      minWidth: '1.75rem',
     },
   },
 
@@ -77,19 +78,20 @@ module.exports = Tag = (colors) => ({
   ...tagSolid(colors),
   ...tagLight(colors),
 
-  ".tag-close-button": {
-    "@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",
+  '.tag-close-button': {
+    '@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 !important"
+    '&-icon': {
+      fontSize: '1em !important',
     },
 
-    "&-disabled": {
-      "@apply disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none": {},
+    '&-disabled': {
+      '@apply disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none': {},
     },
   },
 });

package/src/components/user-menu.js

@@ -1,23 +1,23 @@
-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 text-body": {},
-    // "@apply ": {},
-    "&-is-open": {
-      // "@apply border-2 border-gray-300 border-solid rounded": {},
-      // "box-shadow": "0px 4px 12px rgba(27, 29, 31, 0.12)",
-    },
-
-    "&-header": {
-      '[aria-expanded="true"] &': {
-        "@apply bg-hover": {},
-      },
-    },
-    "&-item": {
-      "@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": {},
-      },
-    },
-  },
-});
+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 text-body': {},
+    // "@apply ": {},
+    '&-is-open': {
+      // "@apply border-2 border-gray-300 border-solid rounded": {},
+      // "box-shadow": "0px 4px 12px rgba(27, 29, 31, 0.12)",
+    },
+
+    '&-header': {
+      '[aria-expanded="true"] &': {
+        '@apply bg-hover': {},
+      },
+    },
+    '&-item': {
+      '@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

@@ -1,78 +1,77 @@
-module.exports = ZebraTable = () => ({
-    ".zebratable": {
-        "@apply w-full text-left table-auto": {},
+(module).exports = ZebraTable = () => ({
+  '.zebratable': {
+    '@apply w-full text-left table-auto': {},
 
+    '&-thead': {
+      '&-tr': {
+        '@apply text-sm hidden lg:table-row': {},
+      },
 
-        "&-thead": {
+      '&-th': {
+        '@apply py-sm first-of-type:pl-lg': {},
 
-            "&-tr": {
-                "@apply text-sm hidden lg:table-row": {},
-            },
+        "&[data-isColumnSortable='true']": {
+          '@apply py-sm cursor-pointer': {},
+        },
+      },
+    },
+
+    '&-sortbutton': {
+      '@apply flex items-center': {},
 
-            "&-th": {
-                "@apply py-sm first-of-type:pl-lg": {},
+      '&-icon': {
+        '@apply inline-flex pl-sm': {},
 
-                "&[data-isColumnSortable='true']": {
-                    "@apply py-sm cursor-pointer": {},
-                },
-            },
+        '.MuiSvgIcon-root': {
+          '@apply !text-lg': {},
         },
 
-        "&-sortbutton": {
-            "@apply flex items-center": {},
-
-            "&-icon": {
-                "@apply inline-flex pl-sm": {},
-
-                ".MuiSvgIcon-root": {
-                    "@apply !text-lg": {},
-                },
-    
-    
-                "&-sort": {
-                    "@apply text-black transform": {},
-        
-                    "&[data-sortmodeascending='true']": {
-                        "@apply -rotate-90": {},
-                    },
-                    
-                    "&[data-sortmodeascending='false']": {
-                        "@apply rotate-90": {},
-                    },
-                },
-    
-                "&-more": {
-                    "@apply text-gray": {},
-                },
-            },
+        '&-sort': {
+          '@apply text-black transform': {},
+
+          "&[data-sortmodeascending='true']": {
+            '@apply -rotate-90': {},
+          },
+
+          "&[data-sortmodeascending='false']": {
+            '@apply rotate-90': {},
+          },
         },
 
-        ".material-icons-outlined": {
-            fontSize: "1.25em",
+        '&-more': {
+          '@apply text-gray': {},
         },
+      },
+    },
 
-        "&-tbody": {
-            "@apply text-body lg:bg-white": {},
+    '.material-icons-outlined': {
+      fontSize: '1.25em',
+    },
 
-            "&-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": {},
+    '&-tbody': {
+      '@apply text-body lg:bg-white': {},
 
-                "&.highlighted": {
-                    "@apply lg:border lg:border-hover": {},
-                },
-            },
+      '&-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':
+          {},
 
-            "&-td": {
-                "@apply empty:hidden py-4 px-sm lg:px-0 first-of-type:pl-sm lg:first-of-type:pl-lg last-of-type:px-0 lg:last-of-type:pr-lg last-of-type:text-right block lg:table-cell even:bg-white odd:bg-gray-100 last-of-type:bg-transparent lg:even:bg-transparent lg:odd:bg-transparent": {},
-            },
+        '&.highlighted': {
+          '@apply lg:border-4 lg:border-hover': {},
         },
+      },
 
-        "&-paginationwrapper": {
-            "@apply w-full text-lg flex justify-center lg:justify-start": {},
-        },
+      '&-td': {
+        '@apply empty:hidden py-4 px-sm lg:px-0 first-of-type:pl-sm lg:first-of-type:pl-lg last-of-type:px-0 lg:last-of-type:pr-lg last-of-type:text-right block lg:table-cell even:bg-white odd:bg-gray-100 last-of-type:bg-transparent lg:even:bg-transparent lg:odd:bg-transparent':
+          {},
+      },
+    },
 
-        "&-bottomwrapper": {
-            "@apply mt-lg px-lg flex items-center justify-end": {},
-        },
+    '&-paginationwrapper': {
+      '@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,41 +1,41 @@
-const plugin = require("tailwindcss/plugin");
+const plugin = require('tailwindcss/plugin');
 
 // const colors = require("/colors");
-const { colors } = require("@sk-web-gui/theme");
-const withOpacity = require("./with-opacity");
+const { colors } = require('@sk-web-gui/theme');
+const withOpacity = require('./with-opacity');
 // components
-const Alert = require("./components/alert");
-const Breadcrumb = require("./components/breadcrumb");
-const ButtonGroup = require("./components/button-group");
+const Alert = require('./components/alert');
+const Breadcrumb = require('./components/breadcrumb');
+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");
-const Message = require("./components/message");
-const Notification = require("./components/notification");
-const Radio = require("./components/radio");
-const Switch = require("./components/switch");
+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');
+const Message = require('./components/message');
+const Notification = require('./components/notification');
+const Radio = require('./components/radio');
+const Switch = require('./components/switch');
 
-const Button = require("./components/button");
-const Accordion = require("./components/accordion");
-const Card = require("./components/card");
-const Table = require("./components/table");
-const ZebraTable = require("./components/zebratable");
+const Button = require('./components/button');
+const Accordion = require('./components/accordion');
+const Card = require('./components/card');
+const Table = require('./components/table');
+const ZebraTable = require('./components/zebratable');
 
-const Modal = require("./components/modal");
-const CookieConsent = require("./components/cookie-consent");
-const Divider = require("./components/divider");
+const Modal = require('./components/modal');
+const CookieConsent = require('./components/cookie-consent');
+const Divider = require('./components/divider');
 
-const UserMenu = require("./components/user-menu");
+const UserMenu = require('./components/user-menu');
 
-const Tag = require("./components/tag");
-const Pagination = require("./components/pagination");
-const Footer = require("./components/footer");
-const Header = require("./components/header");
+const Tag = require('./components/tag');
+const Pagination = require('./components/pagination');
+const Footer = require('./components/footer');
+const Header = require('./components/header');
 
 const components = [
   Alert,
@@ -71,19 +71,11 @@ const components = [
   Header,
 ];
 
-const defaultColors = ["primary", "secondary"];
+const defaultColors = ['primary', 'secondary'];
 
 module.exports = plugin.withOptions(
   function (options = { colors: [], cssBase: true }) {
-    return function ({
-      addComponents,
-      addVariant,
-      addBase,
-      variants,
-      e,
-      theme,
-      addUtilities,
-    }) {
+    return function ({ addComponents, addVariant, addBase, variants, e, theme, addUtilities }) {
       const optionColors = [...defaultColors, ...(options.colors || [])];
 
       active({ addVariant, variants, e, theme, addUtilities });
@@ -100,50 +92,50 @@ module.exports = plugin.withOptions(
       if (options.cssBase) {
         addBase({
           html: {
-            "@apply text-foreground antialiased bg-base": {},
-            fontSize: "62.5%",
-            lineHeight: "1.5",
-            textRendering: "optimizeLegibility",
-            textSizeAdjust: "100%",
-            touchAction: "manipulation",
+            '@apply text-foreground antialiased bg-base': {},
+            fontSize: '62.5%',
+            lineHeight: '1.5',
+            textRendering: 'optimizeLegibility',
+            textSizeAdjust: '100%',
+            touchAction: 'manipulation',
           },
           body: {
-            "@apply text-base leading-base": {},
-            position: "relative",
-            minHeight: "100%",
+            '@apply text-base leading-base': {},
+            position: 'relative',
+            minHeight: '100%',
             fontFeatureSettings: "'kern'",
           },
-          "h1,h2,h3,h4,h5,h6": {
-            "@apply font-bold": {},
+          'h1,h2,h3,h4,h5,h6': {
+            '@apply font-bold': {},
           },
           small: {
-            fontSize: "1.4rem",
+            fontSize: '1.4rem',
           },
-          h1: { "@apply text-3xl leading-3xl": {} },
-          h2: { "@apply text-2xl leading-2xl": {} },
-          h3: { "@apply text-xl leading-xl": {} },
-          h4: { "@apply text-lg leading-lg": {} },
-          h5: { "@apply text-base leading-base": {} },
-          h6: { "@apply text-sm leading-sm": {} },
-          p: { "@apply my-4": {} },
+          h1: { '@apply text-3xl leading-3xl': {} },
+          h2: { '@apply text-2xl leading-2xl': {} },
+          h3: { '@apply text-xl leading-xl': {} },
+          h4: { '@apply text-lg leading-lg': {} },
+          h5: { '@apply text-base leading-base': {} },
+          h6: { '@apply text-sm leading-sm': {} },
+          p: { '@apply my-4': {} },
 
           '.text-content': {
-            "@apply max-w-[80rem]":{},
+            '@apply max-w-[80rem]': {},
 
-            h1: { 
-              "@apply mb-md": {},
-              
-              "+ p": {
-                "@apply mb-[40px]": {}, 
-              }
+            h1: {
+              '@apply mb-md': {},
+
+              '+ p': {
+                '@apply mb-[40px] mt-0': {},
+              },
             },
-            h2: { "@apply mt-lg": {} },
-            h3: { "@apply mt-lg": {} },
-            h4: { "@apply mt-lg": {} },
-            h5: { "@apply mt-lg": {} },
-            h6: { "@apply mt-lg": {} },
-            p: { "@apply mt-sm": {} },
-          }
+            h2: { '@apply mt-lg': {} },
+            h3: { '@apply mt-lg': {} },
+            h4: { '@apply mt-lg': {} },
+            h5: { '@apply mt-lg': {} },
+            h6: { '@apply mt-lg': {} },
+            p: { '@apply mt-sm leading-[1.5]': {} },
+          },
         });
       }
     };
@@ -152,16 +144,16 @@ module.exports = plugin.withOptions(
     return {
       theme: {
         fontSize: {
-          tiny: "1rem",
-          xs: "1.2rem",
-          sm: "1.4rem",
-          base: "1.6rem",
-          lg: "1.8rem",
-          xl: "2.0rem",
-          "2xl": "2.4rem",
-          "3xl": "3.2rem",
-          "4xl": "4.0rem",
-          "5xl": "5.2rem",
+          tiny: '1rem',
+          xs: '1.2rem',
+          sm: '1.4rem',
+          base: '1.6rem',
+          lg: '1.8rem',
+          xl: '2.0rem',
+          '2xl': '2.4rem',
+          '3xl': '3.2rem',
+          '4xl': '4.0rem',
+          '5xl': '5.2rem',
         },
         extend: {
           colors: {
@@ -169,40 +161,40 @@ module.exports = plugin.withOptions(
             current: 'currentColor',
           },
           cursor: {
-            base: "var(--vc-cursor)",
+            base: 'var(--vc-cursor)',
           },
           spacing: {
-            xs: "4px",
-            sm: "8px",
-            md: "16px",
-            lg: "24px",
-            xl: "48px",
+            xs: '4px',
+            sm: '8px',
+            md: '16px',
+            lg: '24px',
+            xl: '48px',
           },
           lineHeight: {
-            tiny: "1.4rem",
-            xs: "1.6rem",
-            sm: "2rem",
-            base: "2.4rem",
-            lg: "2.4rem",
-            xl: "3.2rem",
-            "2xl": "3.2rem",
-            "3xl": "4rem",
-            "4xl": "4.8rem",
-            "5xl": "5.8rem",
+            tiny: '1.4rem',
+            xs: '1.6rem',
+            sm: '2rem',
+            base: '2.4rem',
+            lg: '2.4rem',
+            xl: '3.2rem',
+            '2xl': '3.2rem',
+            '3xl': '4rem',
+            '4xl': '4.8rem',
+            '5xl': '5.8rem',
           },
           opacity: {
-            15: "0.15",
+            15: '0.15',
           },
           backgroundColor: {
-            base: withOpacity("--vc-colors-bg-base"),
-            fill: withOpacity("--vc-colors-bg-fill"),
+            base: withOpacity('--vc-colors-bg-base'),
+            fill: withOpacity('--vc-colors-bg-fill'),
           },
           textColor: {
-            foreground: withOpacity("--vc-colors-text-foreground"),
-            muted: withOpacity("--vc-colors-text-muted"),
+            foreground: withOpacity('--vc-colors-text-foreground'),
+            muted: withOpacity('--vc-colors-text-muted'),
           },
           borderRadius: {
-            base: "var(--vc-rounded)",
+            base: 'var(--vc-rounded)',
           },
           zIndex: {
             hide: -1,
@@ -223,13 +215,13 @@ module.exports = plugin.withOptions(
       },
       variants: {
         extend: {
-          boxShadow: ["disabled"],
-          cursor: ["disabled"],
-          opacity: ["active", "disabled"],
-          textColor: ["active", "disabled:hover"],
-          textDecoration: ["disabled"],
-          backgroundColor: ["disabled"],
-          borderColor: ["disabled"],
+          boxShadow: ['disabled'],
+          cursor: ['disabled'],
+          opacity: ['active', 'disabled'],
+          textColor: ['active', 'disabled:hover'],
+          textDecoration: ['disabled'],
+          backgroundColor: ['disabled'],
+          borderColor: ['disabled'],
         },
       },
     };
@@ -237,7 +229,7 @@ module.exports = plugin.withOptions(
 );
 
 function active({ addVariant, e }) {
-  addVariant("active", ({ modifySelectors, separator }) => {
+  addVariant('active', ({ modifySelectors, separator }) => {
     modifySelectors(({ className }) => {
       return `.${e(`active${separator}${className}`)}:active, .${e(
         `active${separator}${className}`
@@ -247,7 +239,7 @@ function active({ addVariant, e }) {
 }
 
 function selected({ addVariant, e }) {
-  addVariant("selected", ({ modifySelectors, separator }) => {
+  addVariant('selected', ({ modifySelectors, separator }) => {
     modifySelectors(({ className }) => {
       return `.${e(`selected${separator}${className}`)}[aria-selected=true]`;
     });
@@ -255,16 +247,14 @@ function selected({ addVariant, e }) {
 }
 
 function disabled({ addVariant, e }) {
-  addVariant("disabled", ({ modifySelectors, separator }) => {
+  addVariant('disabled', ({ modifySelectors, separator }) => {
     modifySelectors(({ className }) => {
       return `.${e(`disabled${separator}${className}`)}[aria-disabled=true]`;
     });
   });
-  addVariant("disabled:hover", ({ modifySelectors, separator }) => {
+  addVariant('disabled:hover', ({ modifySelectors, separator }) => {
     modifySelectors(({ className }) => {
-      return `.${e(
-        `disabled:hover${separator}${className}`
-      )}[aria-disabled=true]`;
+      return `.${e(`disabled:hover${separator}${className}`)}[aria-disabled=true]`;
     });
   });
 }