@sk-web-gui/core 0.1.33 → 0.1.35

package/src/components/forms.js

@@ -1,40 +1,37 @@
 function fieldOutline(colors) {
   return {
-    "&-outline": {
-      "@apply border shadow-sm border-gray-stroke": {},
-      "@apply text-gray bg-white": {},
+    '&-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))",
+      '&[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": {},
+      '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))",
+      '@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))",
+      '@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))',
         },
       },
 
@@ -54,39 +51,36 @@ function fieldOutline(colors) {
 
 function fieldSolid(colors) {
   return {
-    "&-solid": {
-      "@apply border border-transparent": {},
-      "@apply text-black bg-gray-light": {},
+    '&-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))",
+      '&[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": {},
+      'focus-visible:ring-4': {},
       /* dark mode */
-      "@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))",
-        "--tw-ring-opacity": "1",
-        "--tw-ring-color": "rgba(248, 113, 113, var(--tw-ring-opacity))",
+      '@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))',
+        '--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))",
+      '@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))',
         },
       },
 
@@ -106,122 +100,120 @@ function fieldSolid(colors) {
 
 function formControl() {
   return {
-    ".form-control": {
-      "@apply w-full relative": {},
+    '.form-control': {
+      '@apply w-full relative': {},
     },
-    ".form-helper-text": {
-      "@apply mt-1.5 leading-none text-gray dark:text-white/60": {},
+    '.form-helper-text': {
+      '@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": {},
-      "--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-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": {},
+    '.form-label': {
+      '@apply text-sm font-medium text-left align-middle block mb-1.5': {},
 
-      "&-disabled": {
+      '&-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))",
-      }
-    }
+    '.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-group': {
+      '@apply flex relative': {},
     },
 
-    ".form-input-element": {
-      "@apply flex items-center justify-center absolute z-base top-0": {},
+    '.form-input-element': {
+      '@apply flex items-center justify-center absolute z-base top-0': {},
 
-      "&-sm": {
-        "@apply text-xs h-7 w-7": {},
+      '&-sm': {
+        '@apply text-xs h-7 w-7': {},
       },
 
-      "&-md": {
-        "@apply text-sm h-8 w-8": {},
+      '&-md': {
+        '@apply text-sm h-8 w-8': {},
       },
 
-      "&-lg": {
-        "@apply text-base h-10 w-10": {},
+      '&-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": {},
+    '.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-white/30": {},
+      '@apply dark:border-neutral-700': {},
+      '@apply dark:text-neutral-100 dark:bg-white/30': {},
 
-      "&-sm": {
-        "@apply px-3 text-xs": {},
+      '&-sm': {
+        '@apply px-3 text-xs': {},
       },
 
-      "&-md": {
-        "@apply px-4 text-sm": {},
+      '&-md': {
+        '@apply px-4 text-sm': {},
       },
 
-      "&-lg": {
-        "@apply px-4 text-base": {},
+      '&-lg': {
+        '@apply px-4 text-base': {},
       },
 
-      "&-left": {
-        "@apply -mr-1 rounded-r-none": {},
+      '&-left': {
+        '@apply -mr-1 rounded-r-none': {},
       },
 
-      "&-right": {
-        "@apply -ml-1 rounded-l-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",
+  '.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",
+    '&-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",
+    '&-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": {},
+    '&-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-white/20": {},
@@ -232,30 +224,31 @@ module.exports = Forms = (colors) => ({
     ...fieldSolid(colors),
   },
 
-  ".form-textarea": {
+  '.form-textarea': {
     //"@apply leading-tight": {},
-    minHeight: "5rem",
+    minHeight: '5rem',
 
-    "&-counter": {
-      "@apply mt-xs text-right": {},
+    '&-counter': {
+      '@apply mt-xs text-right': {},
     },
   },
 
-  ".form-select": {
-    "@apply min-h-[50px] text-body bg-white caret-transparent select-none cursor-pointer border-gray-stroke":{},
-    "background-image": "none",
+  '.form-select': {
+    '@apply min-h-[50px] text-body bg-white caret-transparent select-none cursor-pointer border-gray-stroke': {},
+    'background-image': 'none',
 
-    "&-list": {
-      "@apply z-10 absolute w-full bg-white mt-0 border border-gray-stroke border-t-0": {},
+    '&-list': {
+      '@apply z-10 absolute w-full bg-white mt-0 border border-gray-stroke border-t-0': {},
     },
 
-    "&-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": {},
-        }
-    }
+    '&-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/header.js

@@ -1,37 +1,35 @@
 module.exports = Header = (colors) => ({
-    ".header": {
-        "@apply lg:border-t-8 lg:border-primary lg:static lg:w-auto lg:h-auto lg:min-h-0": {},
-
-        ...colors.reduce(
-            (styles, color) => ({
-                ...styles,
-                [`&[data-color="${color}"]`]: {
-                    [`@apply border-${color}`]: {},
-                },
-            }),
-            {}
-        ),
-
-        [`&[data-color="none"]`]: {
-            [`@apply border-none`]: {},
-        },
-
-        "&-container": {
-            "@apply flex lg:h-[112px] shadow-lg relative mx-auto px-7 pt-[22px] pb-[8px] z-10": {},
-        },
-
-        "&-content": {
-            "@apply flex items-center w-full justify-between m-auto flex-shrink-0 text-body max-w-[140rem]": {},
+  '.header': {
+    '@apply lg:border-t-8 lg:border-primary lg:static lg:w-auto lg:h-auto lg:min-h-0': {},
+
+    ...colors.reduce(
+      (styles, color) => ({
+        ...styles,
+        [`&[data-color="${color}"]`]: {
+          [`@apply border-${color}`]: {},
         },
-
-        "&-usermenu": {
-            "@apply lg:-mr-lg block flex-shrink lg:flex lg:items-center lg:w-auto": {},
-
-            "&-content": {
-                "@apply flex flex-grow lg:flex justify-end items-center lg:w-auto": {},
-            },
-        },
-
-    }
-
-});
+      }),
+      {}
+    ),
+
+    [`&[data-color="none"]`]: {
+      [`@apply border-none`]: {},
+    },
+
+    '&-container': {
+      '@apply flex lg:h-[112px] shadow-lg relative mx-auto px-7 pt-[22px] pb-[8px] z-10': {},
+    },
+
+    '&-content': {
+      '@apply flex items-center w-full justify-between m-auto flex-shrink-0 text-body max-w-[140rem]': {},
+    },
+
+    '&-usermenu': {
+      '@apply lg:-mr-lg block flex-shrink lg:flex lg:items-center lg:w-auto': {},
+
+      '&-content': {
+        '@apply flex flex-grow lg:flex justify-end items-center lg:w-auto': {},
+      },
+    },
+  },
+});

package/src/components/icon-button.js

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

package/src/components/icon.js

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

package/src/components/kbd.js

@@ -1,9 +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-body": {},
+  '.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-body': {},
     // dark
-    "@apply dark:bg-white/30 dark:text-neutral-300": {},
+    '@apply dark:bg-white/30 dark:text-neutral-300': {},
   },
 });

package/src/components/link.js

@@ -1,20 +1,20 @@
 module.exports = Link = () => ({
-  ".link": {
-    "@apply cursor-base underline outline-none hover:underline": {},
-    "@apply text-primary dark:text-primary": {},
-    "@apply focus-visible:ring-4 focus-visible:ring-primary": {},
+  '.link': {
+    '@apply cursor-base 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": {},
+    '@apply hover:text-primary-active': {},
 
-    "&-external-icon": {
-      fontSize: "0.875em !important",
-      lineHeight: "1",
-      marginLeft: ".25em",
-      verticalAlign: "text-top",
+    '&-external-icon': {
+      fontSize: '0.875em !important',
+      lineHeight: '1',
+      marginLeft: '.25em',
+      verticalAlign: 'text-top',
     },
 
-    "&-disabled": {
-      "@apply disabled:opacity-60 disabled:cursor-not-allowed disabled:no-underline": {},
+    '&-disabled': {
+      '@apply disabled:opacity-60 disabled:cursor-not-allowed disabled:no-underline': {},
     },
   },
 });

package/src/components/message.js

@@ -1,62 +1,62 @@
 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-body bg-white border-l-4": {},
+  '.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-body bg-white border-l-4': {},
     // dark
-    "@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600": {},
+    '@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600': {},
 
-    "&-text": {
-      "@apply text-left flex-grow": {},
+    '&-text': {
+      '@apply text-left flex-grow': {},
     },
 
-    "&-info": {
-      "@apply border-info": {},
+    '&-info': {
+      '@apply border-info': {},
 
-      ".message-icon": {
-        "@apply text-info": {},
+      '.message-icon': {
+        '@apply text-info': {},
       },
-
     },
-    "&-success": {
-      "@apply border-success": {},
+    '&-success': {
+      '@apply border-success': {},
 
-      ".message-icon": {
-        "@apply text-success": {},
+      '.message-icon': {
+        '@apply text-success': {},
       },
     },
-    "&-error": {
-      "@apply border-error": {},
+    '&-error': {
+      '@apply border-error': {},
 
-      ".message-icon": {
-        "@apply text-error": {},
+      '.message-icon': {
+        '@apply text-error': {},
       },
     },
-    "&-warning": {
-      "@apply border-warning": {},
+    '&-warning': {
+      '@apply border-warning': {},
 
-      ".message-icon": {
-        "@apply text-warning": {},
+      '.message-icon': {
+        '@apply text-warning': {},
       },
     },
   },
 
-  ".message-icon": {
-    "@apply mr-4 flex-shrink-0 w-10 h-10": {},
+  '.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",
+  '.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": {
-      "@apply !text-xl": {},
+    '&-icon': {
+      '@apply !text-xl': {},
     },
 
-    "&-disabled": {
-      "@apply disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none": {},
+    '&-disabled': {
+      '@apply disabled:opacity-40 disabled:cursor-not-allowed disabled:shadow-none': {},
     },
   },
 });