@sk-web-gui/core 1.0.2 → 1.1.0

package/src/components/side-menu.js

@@ -1,272 +0,0 @@
-module.exports = Menu = () => ({
-  '.sk-sidemenu': {
-    '@apply w-[440px]': {},
-
-    '&-header': {
-      '@apply relative py-[2rem] px-[1.6rem] rounded-t-[.2rem] bg-primary text-white': {},
-
-      '.label-small': {
-        '@apply text-[1.6rem]': {},
-      },
-
-      '.label-button': {
-        '@apply w-full justify-between p-0 leading-[inherit]': {},
-
-        '&-icon': {
-          '@apply !text-xl': {},
-        },
-      },
-
-      '&-label': {
-        '@apply flex items-center': {},
-
-        'label, .label': {
-          '@apply text-xl font-bold flex items-center w-full': {},
-        },
-
-        span: {
-          '@apply ml-auto': {},
-        },
-      },
-    },
-
-    '&-item': {
-      '@apply bg-white h-full': {},
-
-      '> ul.items': {
-        '@apply hidden': {},
-      },
-
-      '&.open > ul.items': {
-        '@apply block': {},
-      },
-
-      '&-label': {
-        '@apply flex-grow select-none flex items-center': {},
-      },
-
-      '&.active': {
-        '> .sk-sidemenu-wrapper': {
-          boxShadow: 'inset 6px 0 0 0 #005595',
-          '.sk-sidemenu-item-label': {
-            '@apply underline': {},
-          },
-        },
-      },
-
-      '& .sk-sidemenu-wrapper': {
-        '@apply min-h-[48px] max-h-[48px] relative flex flex-wrap items-center': {},
-
-        '.sk-sidemenu-item-link': {
-          '@apply flex-grow relative flex items-center text-base text-left justify-start pr-sm h-full': {},
-          '@apply focus-visible:z-base': {},
-
-          '&[aria-disabled="true"]': {
-            '@apply text-neutral-600 cursor-not-allowed': {},
-
-            '.sk-sidemenu-item-label': {
-              '@apply text-neutral-600': {},
-            },
-          },
-        },
-
-        '.expand': {
-          '@apply w-[50px] h-full flex justify-center items-center ml-auto p-0': {},
-
-          '&[aria-disabled="true"]': {
-            '@apply !text-gray-stroke cursor-not-allowed !bg-transparent': {},
-
-            path: {
-              '@apply fill-gray-stroke': {},
-            },
-          },
-
-          path: {
-            '@apply fill-primary': {},
-          },
-
-          '&-button': {
-            '@apply fill-primary flex justify-center items-center border-l border-gray-stroke h-[24px] w-[45px]': {},
-          },
-        },
-      },
-
-      '&.open': {
-        '& + .menu-item > .sk-sidemenu-wrapper': {
-          '@apply border-t': {},
-        },
-      },
-
-      '&.draggable': {
-        '&.dragenter': {
-          '> .sk-sidemenu-wrapper': {
-            '@apply h-full max-h-full': {},
-          },
-          "> .sk-sidemenu-wrapper > *:not([draggable='true'])": {
-            '@apply pointer-events-none': {},
-          },
-
-          '& > .sk-sidemenu-wrapper::after': {
-            '@apply bg-info-surface-accent block relative w-full h-[44px]': {},
-            content: "''",
-          },
-        },
-
-        '&.moving': {
-          '@apply hidden': {},
-        },
-
-        '& .sk-sidemenu-menuitem-movebutton': {
-          '@apply -translate-x-full no-underline text-gray-stroke absolute py-sm inset-y-0 my-auto': {},
-
-          svg: {
-            '@apply h-full': {},
-          },
-
-          '&[aria-disabled="true"]': {
-            '@apply !text-gray-stroke cursor-not-allowed !bg-transparent': {},
-          },
-        },
-
-        '&.separator': {
-          '@apply bg-transparent relative': {},
-
-          '> div.sk-sidemenu-wrapper, > .sk-sidemenu-item-link': {
-            '@apply h-[44px]': {},
-          },
-        },
-      },
-
-      '&-separator': {
-        '@apply text-divider': {},
-        height: '1px',
-        width: '100%',
-        backgroundImage: `repeating-linear-gradient(0deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px), repeating-linear-gradient(90deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px), repeating-linear-gradient(180deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px), repeating-linear-gradient(270deg, currentColor, currentColor 19px, transparent 19px, transparent 38px, currentColor 38px)`,
-        backgroundSize: '2px 100%, 100% 2px, 2px 100% , 100% 2px',
-        backgroundPosition: '0 0, 0 0, 100% 0, 0 100%',
-        backgroundRepeat: 'no-repeat',
-      },
-
-      '&.lvl-0': {
-        '&:first-child > .sk-sidemenu-wrapper': {
-          '@apply border-t-0': {},
-        },
-        '> .sk-sidemenu-wrapper': {
-          '@apply h-[64px] max-h-[64px] border border-divider': {},
-
-          '> .sk-sidemenu-item-link': {
-            '@apply  py-md': {},
-            paddingLeft: '3.2rem',
-          },
-        },
-
-        '.sk-sidemenu-item-link': {
-          '@apply h-[64px] max-h-[64px]': {},
-        },
-
-        '& + .sk-sidemenu-item > .sk-sidemenu-wrapper': {
-          '@apply border-t-0': {},
-        },
-
-        '> .items': {
-          '@apply border-l border-r border-divider': {},
-        },
-
-        '&.open > .items': {
-          '@apply border-b border-divider': {},
-        },
-
-        '&.separator': {
-          '& + .lvl-0': {
-            '@apply border-t border-divider': {},
-          },
-        },
-
-        '&.separator > .sk-sidemenu-wrapper': {
-          '@apply border-0': {},
-        },
-      },
-
-      '&.lvl-1': {
-        '@apply bg-gray-lighter': {},
-
-        '> .sk-sidemenu-wrapper, .sk-sidemenu-item-link': {
-          '@apply h-[56px] max-h-[56px]': {},
-        },
-
-        '&.open > .sk-sidemenu-wrapper': {
-          '@apply border-b border-divider': {},
-        },
-
-        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
-          paddingLeft: '4.8rem',
-        },
-      },
-
-      '&.lvl-2': {
-        '.sk-sidemenu-wrapper': {
-          '@apply bg-gray-middle h-[48px] max-h-[48px]': {},
-
-          '> .sk-sidemenu-item-link': {
-            '@apply h-[48px] max-h-[48px]': {},
-          },
-        },
-
-        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
-          paddingLeft: '6.4rem',
-        },
-      },
-
-      '&.lvl-3': {
-        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
-          paddingLeft: '8rem',
-        },
-      },
-
-      '&.lvl-4': {
-        '.sk-sidemenu-wrapper': {
-          '@apply bg-[#d4d4d4]': {},
-        },
-        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
-          paddingLeft: '9.6rem',
-        },
-      },
-
-      '&.lvl-5': {
-        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
-          paddingLeft: '11.2rem',
-        },
-      },
-
-      '&.lvl-6': {
-        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
-          paddingLeft: '12.8rem',
-        },
-      },
-
-      '&.lvl-7': {
-        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
-          paddingLeft: '14.4rem',
-        },
-      },
-
-      '&.lvl-8': {
-        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
-          paddingLeft: '16rem',
-        },
-      },
-
-      '&.lvl-9': {
-        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
-          paddingLeft: '17.6rem',
-        },
-      },
-
-      '&.lvl-10': {
-        '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {
-          paddingLeft: '19.2rem',
-        },
-      },
-    },
-  },
-});

package/src/components/snackbar.js

@@ -1,34 +0,0 @@
-module.exports = Snackbar = () => ({
-  '.sk-snackbar': {
-    '@apply flex items-center gap-12 py-8 pl-16 pr-8 rounded-groups break-words max-w-[40rem]': {},
-    '@apply text-label-small text-vattjom-text-secondary': {},
-
-    '&-text': {
-      '@apply flex-grow': {},
-    },
-
-    '.sk-icon': {
-      '@apply text-light-primary': {},
-    },
-
-    '&-content': {
-      '@apply flex-grow gap-12 py-4 flex items-center': {},
-    },
-
-    '&-primary': {
-      '@apply text-light-secondary bg-dark-primary': {},
-    },
-    '&-info': {
-      '@apply text-vattjom-text-secondary bg-vattjom-surface-primary': {},
-    },
-    '&-success': {
-      '@apply text-gronsta-text-secondary bg-gronsta-surface-primary': {},
-    },
-    '&-warning': {
-      '@apply text-warning-text-secondary bg-warning-surface-primary': {},
-    },
-    '&-error': {
-      '@apply text-error-text-secondary bg-error-surface-primary': {},
-    },
-  },
-});

package/src/components/spinner.js

@@ -1,23 +0,0 @@
-module.exports = SearchBar = (colors) => ({
-  '.sk-spinner': {
-    '@apply box-border': {},
-    '@apply flex justify-center items-center object-center': {},
-    '@apply overflow-hidden': {},
-
-    path: {
-      '@apply stroke-dark-secondary': {},
-    },
-
-    ...colors.reduce(
-      (styles, color) => ({
-        ...styles,
-        [`&[data-color="${color}"]`]: {
-          path: {
-            [`@apply stroke-${color}-surface-primary`]: {},
-          },
-        },
-      }),
-      {}
-    ),
-  },
-});

package/src/components/switch.js

@@ -1,85 +0,0 @@
-module.exports = Switch = () => ({
-  '.sk-form-switch-label': {
-    '@apply inline-flex align-middle items-center': {},
-    '@apply flex-row gap-12': {},
-    '@apply font-normal text-base': {},
-
-    "&[type='hidden']": {
-      '@apply hidden': {},
-
-      '.sk-form-switch': {
-        '@apply hidden': {},
-      },
-    },
-  },
-  '.sk-form-switch': {
-    '@apply rounded-full cursor-pointer focus:outline-none': {},
-    '@apply bg-primitives-overlay-darken-3 dark:bg-primitives-overlay-lighten-3': {},
-
-    // Hover
-    '@apply hover:bg-primitives-overlay-darken-5 hover:dark:bg-primitives-overlay-lighten-4': {},
-
-    // Focus
-    'input[type=checkbox]:focus-visible + &': {
-      '@apply ring ring-blue-500': {},
-    },
-
-    // Checked
-    'input[type=checkbox]:checked + &': {
-      [`&[data-color="gronsta"]`]: {
-        '.sk-form-switch-box': {
-          '@apply bg-gronsta-surface-primary': {},
-        },
-      },
-
-      '.sk-form-switch-icon': {
-        '@apply flex': {},
-      },
-
-      '.sk-form-switch-box': {
-        transform: 'translateX(2.4rem)',
-      },
-
-      '@apply bg-primitives-overlay-darken-4 dark:bg-primitives-overlay-lighten-5': {},
-
-      // Disabled
-      [`&[data-disabled="true"]`]: {
-        '.sk-form-switch-box': {
-          '@apply bg-transparent': {},
-
-          '.sk-form-switch-icon': {
-            '@apply bg-primitives-overlay-darken-6 dark:bg-primitives-overlay-lighten-6': {},
-            '@apply text-light-primary': {},
-          },
-        },
-      },
-    },
-
-    // Disabled not checked
-    [`&[data-disabled="true"]`]: {
-      '@apply cursor-default': {},
-      '@apply bg-primitives-overlay-darken-2 dark:bg-primitives-overlay-lighten-2': {},
-
-      '.sk-form-switch-box': {
-        '@apply bg-primitives-overlay-darken-6 dark:bg-primitives-overlay-lighten-6': {},
-      },
-    },
-
-    width: '5.6rem',
-  },
-
-  // Knob
-  '.sk-form-switch-box': {
-    '@apply transition-transform ease-in-out duration-150 transform rounded-full shadow translate-x-0 m-6': {},
-    '@apply bg-primitives-overlay-darken-7 dark:bg-primitives-overlay-lighten-7': {},
-    '@apply h-20 w-20': {},
-    '@apply flex justify-center items-center object-center': {},
-
-    '.sk-form-switch-icon': {
-      '@apply bg-transparent': {},
-      '@apply hidden': {},
-      '@apply w-20 h-20': {},
-      '@apply text-light-primary': {},
-    },
-  },
-});

package/src/components/tab-menu.js

@@ -1,58 +0,0 @@
-module.exports = TabMenu = () => ({
-  '.sk-tab-menu': {
-    '&-wrapper': {
-      display: 'flex',
-      flexDirection: 'row',
-      margin: 'auto',
-    },
-    '&-right': {
-      '@apply justify-end': {},
-    },
-    '&-center': {
-      '@apply justify-center': {},
-    },
-    '&-list': {
-      all: 'unset',
-      display: 'flex',
-      '&-stretch': {
-        '@apply w-full justify-between': {},
-      },
-    },
-
-    '&-underline': {
-      width: '100%',
-      height: 6,
-      '@apply bg-gray-light': {},
-    },
-    '&-item': {
-      all: 'unset',
-      height: 65,
-      display: 'flex',
-      padding: '0 1rem',
-      marginRight: '5rem',
-      alignItems: 'center',
-      position: 'relative',
-      cursor: 'pointer',
-      '&-stretch': {
-        '@apply mr-0': {},
-      },
-      '&-right': {
-        '@apply mr-0 ml-[5rem]': {},
-      },
-      '&-center:last-of-type': {
-        '@apply mr-0': {},
-      },
-
-      '&.active::after': {
-        content: '""',
-        display: 'block',
-        position: 'absolute',
-        width: '100%',
-        height: 6,
-        top: '100%',
-        left: 0,
-        '@apply bg-primary': {},
-      },
-    },
-  },
-});

package/src/components/table.js

@@ -1,13 +0,0 @@
-module.exports = Table = () => ({
-  '.table': {
-    '@apply min-w-full border-collapse border-gray-stroke divide-gray-lighter table-auto': {},
-
-    '&-item': {
-      '@apply px-6 py-4 border border-gray-stroke whitespace-nowrap': {},
-
-      '&:nth-child(odd)': {
-        '@apply bg-gray-lighter': {},
-      },
-    },
-  },
-});

package/src/components/tabs.js

@@ -1,64 +0,0 @@
-module.exports = Tabs = () => ({
-  '.sk-tabs': {
-    '&-stretch': {
-      '@apply w-full': {},
-    },
-    '&-list': {
-      '@apply  block relative w-full h-[3rem]': {},
-      '&-stretch': {
-        '@apply flex justify-between': {},
-      },
-      '&-right': {
-        '@apply text-right': {},
-      },
-      '&-center': {
-        '@apply text-center': {},
-      },
-
-      '&-line::after': {
-        content: '""',
-        '@apply bg-gray-middle w-full h-[2px] absolute left-0 right-0 bottom-0': {},
-      },
-    },
-    '&-tab': {
-      '@apply relative mr-[3.2rem] text-base font-bold  p-0 relative h-[2.8rem] inline-block': {},
-      '@apply text-gray': {},
-      '@apply cursor-pointer': {},
-      '&.disabled': {
-        '@apply cursor-not-allowed': {},
-        '@apply text-gray-stroke': {},
-      },
-      '&.active': {
-        '@apply text-body': {},
-        '&::after': {
-          content: '""',
-          '@apply bg-primary w-full h-[2px] absolute left-0 right-0 top-[100%] z-[1]': {},
-        },
-      },
-      '&-stretch': {
-        '@apply mr-0': {},
-      },
-      '&-header': {
-        '@apply text-large font-normal': {},
-      },
-      '&-right': {
-        '@apply mr-0 ml-lg': {},
-      },
-      '&:last-of-type': {
-        '@apply mr-0': {},
-      },
-      '&-icon': {
-        '&-with-label': {
-          '@apply mr-sm': {},
-        },
-      },
-    },
-    '&-panel': {
-      '@apply mt-lg': {},
-      '&:not(.active)': {
-        display: 'none',
-        hidden: true,
-      },
-    },
-  },
-});

package/src/components/tooltip.js

@@ -1,64 +0,0 @@
-module.exports = Tooltip = () => ({
-  '.sk-tooltip': {
-    '@apply inline-flex justify-center items-center': {},
-    '@apply w-fit h-fit': {},
-    '@apply grow-0': {},
-
-    '&-text': {
-      '@apply inline-flex': {},
-      '@apply bg-primary-surface shadow': {},
-      '@apply px-16 py-8': {},
-      '@apply rounded-utility': {},
-      '@apply text-light-primary text-small': {},
-      '@apply font-bold': {},
-      '@apply w-fit h-fit': {},
-      '@apply grow-0': {},
-      '@apply min-h-[3.4rem]': {},
-    },
-
-    //Arrow
-    '&::after, &::before': {
-      '@apply h-0 w-0 overflow-hidden': {},
-    },
-
-    // Above
-    '&[data-position="above"]': {
-      '@apply flex-col': {},
-      '@apply pb-2': {},
-      '&::after': {
-        '@apply content-[""] border-solid border-[0.6rem] border-b-0': {},
-        '@apply border-t-primary-surface border-r-transparent border-b-transparent border-l-transparent': {},
-      },
-    },
-
-    // Below
-    '&[data-position="below"]': {
-      '@apply flex-col': {},
-      '@apply pt-2': {},
-      '&::before': {
-        '@apply content-[""] border-solid border-[0.6rem] border-t-0': {},
-        '@apply border-t-transparent border-r-transparent border-b-primary-surface border-l-transparent': {},
-      },
-    },
-
-    // Left
-    '&[data-position="left"]': {
-      '@apply flex-row': {},
-      '@apply pr-2 py-[0.3rem]': {},
-      '&::after': {
-        '@apply content-[""] border-solid border-[0.6rem] border-r-0': {},
-        '@apply border-t-transparent border-r-transparent border-b-transparent border-l-primary-surface': {},
-      },
-    },
-
-    // Right
-    '&[data-position="right"]': {
-      '@apply flex-row': {},
-      '@apply pl-2 py-[0.3rem]': {},
-      '&::before': {
-        '@apply content-[""] border-solid border-[0.6rem] border-l-0': {},
-        '@apply border-t-transparent border-r-primary-surface border-b-transparent border-l-transparent': {},
-      },
-    },
-  },
-});

package/src/components/user-menu.js

@@ -1,13 +0,0 @@
-module.exports = UserMenu = () => ({
-  '.sk-usermenu': {
-    '@apply relative': {},
-    '&-button': {
-      '@apply p-0 bg-transparent hover:bg-transparent': {},
-      '@apply border-0': {},
-      '.sk-avatar': {
-        height: 'inherit',
-        width: 'inherit',
-      },
-    },
-  },
-});