@sk-web-gui/core 0.1.92 → 1.0.0

package/src/components/menu-vertical.js

@@ -0,0 +1,293 @@
+const svgToDataUri = require('mini-svg-data-uri');
+
+const MenuVerticalNav = () => ({
+  '.sk-menu-vertical-nav': {
+    '.sk-menu-vertical': {
+      '@apply gap-12': {},
+
+      '&.ul, & ul': {
+        '@apply pt-12 pr-[1.6rem] pb-16': {},
+      },
+
+      '&-item': {
+        '.sk-menu-vertical-item-submenu': {
+          '@apply font-bold': {},
+
+          '&-medium': {
+            'button, a': {
+              '@apply py-[0.6rem] px-[1.4rem]': {},
+            },
+          },
+          '&-large': {
+            'button, a': {
+              '@apply text-large': {},
+              '@apply py-[1rem] px-[1.4rem]': {},
+            },
+          },
+        },
+        '.sk-menu-vertical-item-submenu-button:not([aria-disabled="true"])': {
+          '@apply text-dark-secondary': {},
+        },
+      },
+    },
+  },
+});
+
+const MenuVerticalSidebar = () => ({
+  '.sk-menu-vertical-sidebar': {
+    '@apply rounded-button': {},
+
+    '> ul > li > .sk-menu-vertical-item-submenu': {
+      '> .sk-menu-vertical-item-submenu-button': {
+        '@apply min-h-[5.2rem]': {},
+      },
+    },
+
+    '> ul': {
+      '@apply py-16 px-24': {},
+    },
+
+    '.sk-menu-vertical': {
+      '@apply gap-12': {},
+
+      '&-header': {
+        '@apply bg-primary-surface': {},
+
+        '@apply rounded-t-button': {},
+        '@apply py-20 px-32': {},
+
+        '&, a': {
+          '@apply text-light-primary': {},
+        },
+
+        '.sk-divider': {
+          '@apply border-inverted-divider': {},
+        },
+
+        '.sk-logo': {
+          '@apply text-light-secondary': {},
+        },
+      },
+
+      '&.ul, & ul': {
+        '@apply py-8 pl-[2rem] ml-[2rem]': {},
+      },
+
+      'li ul': {
+        '@apply gap-8': {},
+
+        ul: {
+          li: {
+            '@apply text-small leading-[1.8rem]': {},
+
+            '.sk-menu-vertical-item-submenu-button, .sk-menu-vertical-item-submenu-button-expand': {
+              '@apply py-[0.6rem] px-[1.4rem]': {},
+            },
+          },
+        },
+
+        li: {
+          '@apply relative -ml-[.4rem]': {},
+
+          // hook
+          '&:before': {
+            content: `""`,
+            position: 'absolute',
+            display: 'inline-flex',
+            width: '2rem',
+            height: '4.4rem',
+            top: '-.8rem',
+            left: '-1.6rem',
+            backgroundImage: `url("${svgToDataUri(
+              `<svg width="16" height="52" viewBox="0 0 16 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M1 17V17C1 24.1797 6.8203 30 14 30H15" stroke="#B7B7BA" stroke-linecap="round" />
+            </svg>`
+            )}")`,
+            backgroundRepeat: 'no-repeat',
+          },
+
+          // line
+          '&:not(:last-child):after': {
+            content: `""`,
+            position: 'absolute',
+            display: 'inline-flex',
+            width: '2rem',
+            top: '-.8rem',
+            bottom: 0,
+            left: '-1.6rem',
+            backgroundImage: `url("${svgToDataUri(
+              `<svg width="16" viewBox="0 0 16 52" xmlns="http://www.w3.org/2000/svg"> 
+              <line x1="1" y1="0" x2="1" y2="52" stroke="#B7B7BA" stroke-linecap="round" /> 
+            </svg> `
+            )}")`,
+            backgroundRepeat: 'repeat-y',
+          },
+
+          // lastline
+          '&:last-child:after': {
+            content: `""`,
+            position: 'absolute',
+            display: 'inline-flex',
+            width: '2rem',
+            top: '-.8rem',
+            bottom: 0,
+            left: '-1.6rem',
+            backgroundImage: `url("${svgToDataUri(
+              `<svg width="16" height="17" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg"> 
+              <line x1="1" y1="0" x2="1" y2="17" stroke="#B7B7BA" stroke-linecap="round" /> 
+            </svg> `
+            )}")`,
+            backgroundRepeat: 'no-repeat',
+          },
+        },
+      },
+      '&-item': {
+        '.sk-menu-vertical-item-submenu': {
+          '&-button': {
+            '@apply gap-8': {},
+
+            '&[aria-current="page"], &[aria-current="page"] ~ button': {
+              '@apply font-bold': {},
+            },
+          },
+        },
+
+        '> a, > button': {
+          '&[aria-current="page"]': {
+            '@apply font-bold': {},
+          },
+        },
+      },
+    },
+  },
+});
+
+module.exports = MenuVertical = () => ({
+  '.sk-menu-vertical': {
+    '@apply flex flex-col': {},
+
+    '&.hide': {
+      '@apply hidden': {},
+    },
+
+    '&-backbutton': {
+      '@apply flex items-center gap-[1.6rem] text-lead mb-40': {},
+    },
+
+    '&-label': {
+      '@apply mb-24': {},
+    },
+
+    '&-item': {
+      '@apply flex flex-col': {},
+
+      '&.hide': {
+        '@apply hidden': {},
+      },
+
+      '[aria-disabled="true"]': {
+        '@apply cursor-default bg-transparent text-primitives-overlay-darken-6 dark:text-primitives-overlay-lighten-7':
+          {},
+      },
+
+      'a, button': {
+        '@apply flex': {},
+        color: 'unset',
+      },
+
+      '& > a, > button': {
+        '@apply flex items-center min-h-[4.4rem]': {},
+
+        '&:focus-visible': {
+          '@apply outline outline-2 outline-ring': {},
+        },
+
+        '> *': {
+          '@apply flex w-full py-[.6rem] px-[1.4rem]': {},
+          '@apply rounded-button cursor-pointer': {},
+        },
+
+        '&:not([aria-disabled="true"]) > *': {
+          '@apply bg-transparent text-dark-secondary': {},
+        },
+
+        '&:hover:not([aria-disabled="true"]) > *': {
+          '@apply bg-primitives-overlay-darken-3': {},
+        },
+
+        '&[aria-current="page"]:not(:hover) > *': {
+          '@apply bg-primary-surface text-light-primary': {},
+          '@apply focus-visible:ring': {},
+        },
+      },
+
+      '.sk-menu-vertical-item-submenu': {
+        '@apply flex justify-between w-full': {},
+        '@apply rounded-button': {},
+
+        '&:hover': {
+          '> a:not([aria-disabled="true"]), > button:not([aria-disabled="true"]), > a[aria-expanded="true"]:not([aria-disabled="true"]), > button[aria-expanded="true"]:not([aria-disabled="true"])':
+            {
+              '@apply text-dark-primary bg-primitives-overlay-darken-3': {},
+            },
+        },
+
+        '&:focus-within': {
+          '@apply outline outline-2 outline-ring': {},
+
+          '.sk-menu-vertical-item-submenu-button, .sk-menu-vertical-item-submenu-button-expand': {
+            '&:focus-visible': {
+              '@apply ring-0 ring-offset-0 outline-0': {},
+            },
+          },
+        },
+
+        '&-medium': {
+          'button, a': {
+            '@apply py-[0.6rem] px-[1.4rem]': {},
+          },
+        },
+        '&-large': {
+          'button, a': {
+            '@apply py-[1rem] px-[1.4rem]': {},
+          },
+        },
+
+        '&-button, &-button-expand': {
+          '@apply items-center': {},
+          '@apply py-[1rem] px-[1.4rem]': {},
+        },
+
+        '&-button-expand': {
+          '@apply rounded-r-button rounded-l-0': {},
+        },
+
+        '&-button': {
+          '@apply text-left grow rounded-l-button rounded-r-0': {},
+
+          '&[aria-current="page"]:not(:hover), &[aria-current="page"]:not(:hover) ~ button:not(:hover)': {
+            '@apply bg-primary-surface text-light-primary': {},
+          },
+
+          '&[aria-expanded="true"]': {
+            '&:not(:hover,[aria-current="page"],[aria-disabled="true"]), &:not(:hover,[aria-current="page"],[aria-disabled="true"]) ~ button:not(:hover)':
+              {
+                '@apply bg-vattjom-surface-accent': {},
+              },
+          },
+        },
+      },
+
+      '.sk-menu-vertical-item-tool-item': {
+        '@apply flex items-center gap-10 p-[.6rem] rounded-groups': {},
+
+        '.sk-avatar': {
+          '@apply border-2 border-background-content': {},
+        },
+      },
+    },
+  },
+
+  ...MenuVerticalNav(),
+  ...MenuVerticalSidebar(),
+});

package/src/components/menubar.js

@@ -0,0 +1,56 @@
+module.exports = MenuBar = (colors) => ({
+  '.sk-menubar': {
+    '@apply flex flex-row': {},
+    '@apply p-8 gap-16': {},
+    '@apply rounded-cards': {},
+
+    '&[data-background="true"]': {
+      '@apply bg-background-color-mixin-1': {},
+    },
+
+    '&-item': {
+      '@apply inline-block': {},
+      '@apply relative': {},
+      '@apply h-40': {},
+      'a, button': {
+        color: 'unset',
+      },
+
+      '> *:first-child': {
+        '@apply rounded-button-sm md:rounded-button-md xl:rounded-button-lg': {},
+        '@apply cursor-pointer': {},
+        '@apply bg-transparent text-dark-primary': {},
+        '@apply hover:bg-tertiary-surface': {},
+        '@apply font-bold': {},
+        '@apply gap-2 px-14 py-8': {},
+        '@apply h-full min-h-full': {},
+        '@apply text-base leading-base': {},
+        '@apply inline-flex shrink-0 flex-nowrap': {},
+
+        '@apply border-0': {},
+        '@apply focus-visible:bg-background-content focus-visible:ring': {},
+        '&[aria-current="page"]:not(:hover)': {
+          '@apply bg-primary-surface text-light-primary': {},
+          '@apply focus-visible:ring': {},
+        },
+      },
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            '> *:first-child': {
+              [`@apply hover:bg-${color}-surface-accent`]: {},
+              [`@apply hover:text-${color}-text-primary`]: {},
+              '@apply focus-visible:bg-background-content focus-visible:ring': {},
+              '&[aria-current="page"]:not(:hover)': {
+                [`@apply bg-${color}-surface-primary`]: {},
+                '@apply focus-visible:ring': {},
+              },
+            },
+          },
+        }),
+        {}
+      ),
+    },
+  },
+});

package/src/components/modal.js

@@ -1,30 +1,47 @@
 module.exports = Modal = () => ({
-  '.modal': {
-    '@apply fixed inset-0 z-10 flex items-center justify-center overflow-y-auto': {},
-
-    '&-backdrop': {
-      '@apply bg-black bg-opacity-30': {},
-    },
+  '.sk-modal': {
+    // '@apply fixed inset-0 z-10 flex items-center justify-center overflow-y-auto': {},
 
     '&-wrapper': {
-      '@apply flex flex-col container py-8 px-4 text-center bg-white max-w-screen-sm relative': {},
-    },
+      '@apply fixed inset-0 z-20 overflow-y-auto': {},
+      '@apply bg-primitives-overlay-darken-6': {},
+      '@apply dark:bg-primitives-overlay-darken-8': {},
 
-    '&-close-btn': {
-      '@apply cursor-pointer hover:text-primary-active absolute right-8 top-6 border border-transparent focus-visible:border-black flex self-center':
-        {},
+      '&-inner': {
+        '@apply min-h-screen px-4 text-center': {},
+      },
     },
 
-    '&-title': {
-      '@apply text-3xl p-4': {},
+    '&-overlay': {
+      '@apply fixed inset-0': {},
     },
 
-    '&-description': {
-      '@apply text-base p-4': {},
-    },
+    '&-dialog': {
+      '@apply inline-flex flex-col': {},
+      '@apply text-left': {},
+      '@apply align-middle': {},
+      '@apply transition-all transform': {},
+      '@apply rounded-cards': {},
+      '@apply bg-background-content': {},
+      '@apply dark:bg-background-100': {},
+      '@apply px-24 pt-24 pb-40': {},
+      '@apply gap-16': {},
 
-    '&-content-wrapper': {
-      '@apply p-4 space-y-10': {},
+      '&-header': {
+        '@apply flex justify-between items-center w-full': {},
+        '&-title': {
+          '@apply grow': {},
+          '@apply text-label-medium': {},
+        },
+      },
+    },
+    '&-content': {
+      '@apply flex flex-col': {},
+      '@apply py-8 pb-16 gap-12': {},
+    },
+    '&-footer': {
+      '@apply flex flex-row justify-start': {},
+      '@apply p-0 gap-12': {},
     },
   },
 });

package/src/components/notification.js

@@ -1,6 +1,6 @@
 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 relative flex p-4 text-small w-96 m-2 max-w-full rounded-base shadow-sm sm:max-w-md': {},
     '@apply text-body bg-white border border-neutral-200': {},
     // dark
     '@apply dark:text-neutral-100 dark:bg-neutral-700 dark:border-neutral-600': {},
@@ -45,7 +45,7 @@ module.exports = Notification = () => ({
     top: 16,
 
     '&-undo': {
-      '@apply h-auto p-0 text-sm': {},
+      '@apply h-auto p-0 text-small': {},
     },
 
     '&-close-button': {

package/src/components/pagination.js

@@ -1,49 +1,69 @@
 module.exports = Pagination = () => ({
   '.sk-pagination': {
     '@apply select-none': {},
+    '@apply text-base': {},
 
-    '&-sm': {
-      '@apply text-xs': {},
-    },
+    '&-list': {
+      '@apply flex justify-between items-center': {},
 
-    '&-md': {
-      '@apply text-lg': {},
-    },
+      '.sk-pagination[data-hideprevnextlabel="true"] &': {
+        '@apply w-fit': {},
+      },
 
-    '&-lg': {
-      '@apply text-xl': {},
-    },
+      li: {
+        '@apply min-w-[4rem] text-center': {},
+      },
 
-    '&-list': {
-      '@apply flex items-center': {},
+      'li:first-child': {
+        '@apply text-left': {},
+      },
+
+      'li:last-child': {
+        '@apply text-right': {},
+      },
     },
     '.form-select-wrapper': {
       '@apply w-fit': {},
     },
     '&-pageLabel': {
-      '@apply cursor-pointer m-sm box-content': {},
-      width: '1.5em',
-      height: '1.75em',
-
+      '@apply leading-base cursor-pointer underline text-vattjom-surface-primary': {},
+      '@apply focus-visible:ring ring-ring ring-offset': {},
+      '@apply rounded-full': {},
+      '@apply h-32 w-32': {},
       "&[aria-current='true']": {
-        '@apply border-primary border-b cursor-default text-primary': {},
+        '@apply font-bold no-underline text-dark-primary': {},
       },
     },
 
     '&-prevNextButton': {
-      '@apply text-body ml-4 my-sm inline-flex items-center sm:w-auto inline-flex flex-row leading-none': {},
-      height: '1.75em',
+      '@apply text-dark-secondary': {},
 
-      '&[data-reverse=true]': {
-        '@apply mr-4 ml-0 flex-row-reverse': {},
+      '&.sk-btn': {
+        '@apply bg-transparent text-dark-secondary font-normal': {},
 
-        '.pagination-prevNextButton-label': {
-          '@apply mr-sm ml-0': {},
+        '&.sk-btn-disabled:disabled, .sk-btn[aria-disabled="true"]:disabled': {
+          '@apply bg-transparent !important': {},
+          '@apply text-dark-disabled hover:text-dark-disabled': {},
+          '.sk-icon': {
+            '@apply text-dark-disabled hover:text-dark-disabled': {},
+          },
+        },
+
+        '.sk-icon': {
+          '@apply bg-transparent text-dark-secondary': {},
+        },
+
+        '&:hover': {
+          '@apply text-white': {},
+
+          '.sk-icon': {
+            '@apply text-white': {},
+          },
         },
       },
 
       '&[disabled]': {
-        '@apply opacity-50 cursor-default': {},
+        '@apply cursor-default': {},
       },
 
       "&[disabled='false']": {
@@ -58,10 +78,6 @@ module.exports = Pagination = () => ({
 
       '&-icon': {
         '@apply m-1 leading-none flex items-center': {},
-
-        '.MuiSvgIcon-root': {
-          fontSize: '1em',
-        },
       },
     },
 
@@ -71,17 +87,24 @@ module.exports = Pagination = () => ({
     '&.fit-content': {
       '@apply w-full max-w-full': {},
       '.sk-pagination-list': {
-        '@apply w-full flex justify-between': {},
+        '@apply w-full flex justify-center': {},
+        '@apply gap-24': {},
         '&-item': {
-          '@apply px-0  flex-shrink grow text-center': {},
+          '@apply px-0 grow-0 text-center': {},
           '&.ellipsis': {
             '@apply flex-shrink grow-0': {},
           },
           '&.prev-next': {
-            '@apply flex-shrink grow-0': {},
+            '@apply flex-shrink grow': {},
+            '&.prev': {
+              '@apply text-left': {},
+            },
+            '&.next': {
+              '@apply text-right': {},
+            },
           },
           '.sk-pagination-pageLabel': {
-            '@apply w-full max-w-[1.5em] mx-xs': {},
+            '@apply mx-xs': {},
           },
         },
       },

package/src/components/popup-menu.js

@@ -0,0 +1,111 @@
+module.exports = PopupMenu = () => ({
+  '.sk-popup-menu-items': {
+    '&[data-position="left"]': {
+      '@apply mt-0 mr-8 right-[100%]': {},
+      '&[data-align="end"]': {
+        '@apply bottom-0': {},
+      },
+      '&[data-align="start"]': {
+        '@apply top-0': {},
+      },
+    },
+    '&[data-position="right"]': {
+      '@apply mt-0 ml-8 left-[100%]': {},
+      '&[data-align="end"]': {
+        '@apply bottom-0': {},
+      },
+      '&[data-align="start"]': {
+        '@apply top-0': {},
+      },
+    },
+    '&[data-position="over"]': {
+      '@apply mt-0 mb-8 bottom-[100%]': {},
+      '&[data-align="end"]': {
+        '@apply right-0': {},
+      },
+      '&[data-align="start"]': {
+        '@apply left-0': {},
+      },
+    },
+    '&[data-position="under"]': {
+      '&[data-align="end"]': {
+        '@apply right-0': {},
+      },
+      '&[data-align="start"]': {
+        '@apply left-0': {},
+      },
+    },
+    '@apply absolute flex flex-col justify-start items-start mt-8': {},
+    '@apply w-max': {},
+    '@apply rounded-utility': {},
+    '@apply bg-background-100': {},
+    '@apply z-10': {},
+    '@apply p-8 gap-4': {},
+    '@apply shadow-100': {},
+    '@apply border-0': {},
+    '@apply focus-within:border-0': {},
+    '@apply focus:outline-0 focus-visible:outline-0 focus-visible:ring': {},
+
+    '.sk-popup-menu-item': {
+      '@apply w-full': {},
+      '@apply h-[4rem]': {},
+      '@apply min-h-[4rem]': {},
+      '@apply bg-transparent hover:bg-primitives-gray-200': {},
+      '@apply dark:hover:bg-primitives-overlay-lighten-1': {},
+      '@apply cursor-pointer': {},
+      '@apply flex flex-row shrink-0': {},
+      '@apply pl-8 pr-32 py-4 gap-12': {},
+
+      '@apply rounded-utility': {},
+      '@apply text-body font-normal': {},
+      '&.active, &:active': {
+        '@apply bg-primitives-gray-200': {},
+        '@apply dark:bg-primitives-overlay-lighten-1': {},
+      },
+      svg: {
+        '@apply w-[2rem] h-[2rem]': {},
+      },
+
+      '@apply justify-start': {},
+
+      '@apply border-0': {},
+      '@apply items-center': {},
+      '@apply no-underline': {},
+    },
+    '&-group': {
+      '@apply w-full flex flex-col border-b-1 border-divider pb-4 gap-4': {},
+      '&:first-child': {
+        '@apply pt-0': {},
+      },
+      '&:last-child': {
+        '@apply border-0 pb-0': {},
+      },
+      '> *': {
+        '@apply pl-8 pr-32 py-4 gap-12': {},
+      },
+    },
+    '&-sm': {
+      '@apply p-8 gap-6': {},
+
+      '.sk-popup-menu-item': {
+        '@apply h-[3.2rem]': {},
+        '@apply min-h-[3.2rem]': {},
+        '@apply gap-10 pl-8 pr-24 py-4': {},
+
+        '@apply text-small': {},
+        '&-group': {
+          '@apply gap-6 pb-6': {},
+          '> *': {
+            '@apply gap-10 pl-8 pr-24 py-4': {},
+          },
+        },
+        svg: {
+          '@apply w-[1.8rem] h-[1.8rem]': {},
+        },
+      },
+    },
+    '&.right': {
+      '@apply right-0': {},
+    },
+  },
+});