@sk-web-gui/core 1.0.2 → 1.1.0

package/src/components/list.js

@@ -1,61 +0,0 @@
-module.exports = Link = () => ({
-  '.sk-list': {
-    // General
-    li: {
-      '&:before': {
-        '@apply text-vattjom-surface-primary font-bold': {},
-        '@apply absolute inline-flex items-center justify-center text-center': {},
-        '@apply w-24 h-24': {},
-      },
-    },
-
-    '&[data-style="bullet"]': {
-      li: {
-        '&:before': {
-          "@apply content-['•'] my-[.5rem] text-[1.8rem]": {},
-        },
-      },
-    },
-
-    '&[data-style="numbered"]': {
-      li: {
-        counterIncrement: 'item',
-
-        '&:before': {
-          '@apply text-small border-vattjom-surface-primary rounded-full leading-8': {},
-          '@apply my-[.6rem] h-[2.2rem] w-[2.2rem] border-[.2rem]': {},
-          content: 'counter(item)',
-        },
-      },
-    },
-
-    '&[data-style="stroke"]': {
-      li: {
-        '&:before': {
-          "@apply content-['–'] my-[.4rem] text-[1.6rem]": {},
-        },
-      },
-    },
-
-    '.sk-link': {
-      '&-tertiary': {
-        '@apply text-dark-primary': {},
-        '&:hover': {
-          '@apply text-dark-secondary': {},
-        },
-      },
-    },
-
-    '&-item': {
-      '@apply pt-20': {},
-    },
-
-    '&-header': {
-      '@apply text-large font-bold ml-[3.2rem]': {},
-    },
-
-    '&-text': {
-      '@apply text-dark-secondary ml-[3.2rem]': {},
-    },
-  },
-});

package/src/components/logo.js

@@ -1,49 +0,0 @@
-module.exports = Logo = () => ({
-  '.sk-logo': {
-    '@apply flex w-auto h-auto': {},
-    '@apply items-center': {},
-    '@apply text-dark-primary': {},
-    '&[data-inverted="true"]': {
-      '@apply text-light-primary': {},
-      '.sk-logo-divider': {
-        '@apply border-inverted-divider': {},
-      },
-    },
-
-    '&-figure': {
-      '@apply w-full h-full': {},
-    },
-    '&[data-variant="service"]': {
-      '@apply flex-row gap-6': {},
-      '@apply w-max': {},
-      '@apply h-[6rem]': {},
-      '@apply pb-4': {},
-      '.sk-logo-figure': {
-        '@apply w-auto h-[5.6rem]': {},
-      },
-    },
-    'a:focus-within &': {
-      '@apply outline outline-2 outline-ring': {},
-    },
-    'a &': {
-      '@apply no-underline': {},
-    },
-    'a:hover &': {
-      '@apply underline': {},
-    },
-    '&-service-content': {
-      '@apply h-full w-max': {},
-      '@apply flex flex-col justify-center': {},
-      '@apply pl-2 pt-2 pr-8 pb-0': {},
-    },
-    '&-title': {
-      '@apply text-[2.2rem] leading-[2.8rem] font-header font-bold': {},
-    },
-    '&-subtitle': {
-      '@apply text-small font-normal block': {},
-    },
-    '&-divider': {
-      '@apply pt-8 pb-4': {},
-    },
-  },
-});

package/src/components/menu-vertical.js

@@ -1,293 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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,47 +0,0 @@
-module.exports = Modal = () => ({
-  '.sk-modal': {
-    // '@apply fixed inset-0 z-10 flex items-center justify-center overflow-y-auto': {},
-
-    '&-wrapper': {
-      '@apply fixed inset-0 z-20 overflow-y-auto': {},
-      '@apply bg-primitives-overlay-darken-6': {},
-      '@apply dark:bg-primitives-overlay-darken-8': {},
-
-      '&-inner': {
-        '@apply min-h-screen px-4 text-center': {},
-      },
-    },
-
-    '&-overlay': {
-      '@apply fixed inset-0': {},
-    },
-
-    '&-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': {},
-
-      '&-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,56 +0,0 @@
-module.exports = Notification = () => ({
-  '.notification': {
-    '@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': {},
-  },
-
-  '.notification-icon': {
-    '@apply flex-shrink-0 w-5 h-5 mr-3': {},
-
-    '&-info': {
-      '--tw-text-opacity': '1',
-      color: 'rgba(59, 130, 246, var(--tw-text-opacity))',
-    },
-    '&-success': {
-      '--tw-text-opacity': '1',
-      color: 'rgba(34, 197, 94, var(--tw-text-opacity))',
-    },
-    '&-error': {
-      '--tw-text-opacity': '1',
-      color: 'rgba(239, 68, 68, var(--tw-text-opacity))',
-    },
-    '&-warning': {
-      '--tw-text-opacity': '1',
-      color: 'rgba(234, 179, 8, var(--tw-text-opacity))',
-    },
-  },
-
-  '.notification-content': {
-    '@apply flex flex-col items-start flex-1 mr-2 -mt-px text-left': {},
-
-    '&-title': {
-      '@apply font-semibold': {},
-    },
-
-    '&-description': {
-      '@apply text-neutral-500 dark:text-neutral-400': {},
-    },
-  },
-
-  '.notification-action': {
-    '@apply absolute space-x-2': {},
-    right: 16,
-    top: 16,
-
-    '&-undo': {
-      '@apply h-auto p-0 text-small': {},
-    },
-
-    '&-close-button': {
-      '@apply cursor-base text-neutral-700 hover:text-body': {},
-      '@apply dark:text-neutral-400 dark:hover:text-neutral-100': {},
-    },
-  },
-});

package/src/components/pagination.js

@@ -1,116 +0,0 @@
-module.exports = Pagination = () => ({
-  '.sk-pagination': {
-    '@apply select-none': {},
-    '@apply text-base': {},
-
-    '&-list': {
-      '@apply flex justify-between items-center': {},
-
-      '.sk-pagination[data-hideprevnextlabel="true"] &': {
-        '@apply w-fit': {},
-      },
-
-      li: {
-        '@apply min-w-[4rem] text-center': {},
-      },
-
-      'li:first-child': {
-        '@apply text-left': {},
-      },
-
-      'li:last-child': {
-        '@apply text-right': {},
-      },
-    },
-    '.form-select-wrapper': {
-      '@apply w-fit': {},
-    },
-    '&-pageLabel': {
-      '@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 font-bold no-underline text-dark-primary': {},
-      },
-    },
-
-    '&-prevNextButton': {
-      '@apply text-dark-secondary': {},
-
-      '&.sk-btn': {
-        '@apply bg-transparent text-dark-secondary font-normal': {},
-
-        '&.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 cursor-default': {},
-      },
-
-      "&[disabled='false']": {
-        '.sk-pagination-prevNextButton-label, .sk-pagination-prevNextButton-icon': {
-          '@apply cursor-pointer': {},
-        },
-      },
-
-      '&-label': {
-        '@apply hidden sm:inline ml-sm leading-none': {},
-      },
-
-      '&-icon': {
-        '@apply m-1 leading-none flex items-center': {},
-      },
-    },
-
-    '&-ellipsis': {
-      '@apply inline-block w-16 text-center': {},
-    },
-    '&.fit-content': {
-      '@apply w-full max-w-full': {},
-      '.sk-pagination-list': {
-        '@apply w-full flex justify-center': {},
-        '@apply gap-24': {},
-        '&-item': {
-          '@apply px-0 grow-0 text-center': {},
-          '&.ellipsis': {
-            '@apply flex-shrink grow-0': {},
-          },
-          '&.prev-next': {
-            '@apply flex-shrink grow': {},
-            '&.prev': {
-              '@apply text-left': {},
-            },
-            '&.next': {
-              '@apply text-right': {},
-            },
-          },
-          '.sk-pagination-pageLabel': {
-            '@apply mx-xs': {},
-          },
-        },
-      },
-      '.form-select-wrapper': {
-        '@apply w-full': {},
-      },
-    },
-  },
-});