@sk-web-gui/core 1.0.2 → 1.1.0

package/src/components/card.js

@@ -1,293 +0,0 @@
-module.exports = Card = (colors) => ({
-  '.sk-card': {
-    '@apply bg-white relative rounded-b-cards rounded-cards': {},
-    '@apply flex flex-col': {},
-    '@apply no-underline hover:no-underline': {},
-    '@apply h-[100%]': {},
-
-    '&-wrapper': {
-      '@apply grid': {},
-    },
-
-    '&-image': {
-      '@apply object-cover grow': {},
-      '@apply rounded-t-cards': {},
-    },
-
-    '&-body': {
-      '@apply px-24 pb-24 pt-16 rounded-b-cards': {},
-      '@apply shrink': {},
-
-      '&-wrapper': {
-        '@apply flex': {},
-      },
-
-      '&-meta': {
-        '@apply flex space-x-12 mt-16': {},
-        span: {
-          '@apply flex space-x-4 items-center': {},
-          time: {
-            '@apply h-[23px] leading-[24px]': {},
-          },
-        },
-
-        '&.sk-card-image': {
-          backgroundColor: 'green',
-          '@apply h-[278px]': {},
-        },
-      },
-
-      '&-header': {
-        'h1, h2, h3, h4, h5, h6, h7, a': {
-          '@apply line-clamp-1 text-h3-md text-dark-primary mt-16': {},
-        },
-        span: {
-          '@apply pl-12': {},
-        },
-      },
-
-      '&-content': {
-        '@apply w-full': {},
-        'p, a': {
-          '@apply line-clamp-3 m-0 pt-8 text-base': {},
-        },
-      },
-
-      '&-icon': {
-        '@apply hidden': {},
-      },
-    },
-
-    ...colors.reduce(
-      (styles, color) => ({
-        ...styles,
-
-        '&[data-color="mono"], &[data-color="tertiary"]': {
-          '@apply border-solid border-1': {},
-          '@apply border-primitives-overlay-darken-5 dark:border-primitives-overlay-lighten-5': {},
-          '@apply bg-primitives-gray-lightest dark:bg-primitives-gray-800': {},
-
-          '.sk-card-body-meta': {
-            '@apply text-dark-secondary': {},
-          },
-
-          '.sk-card-body-icon': {
-            '@apply bg-primitives-overlay-darken-9 dark:bg-primitives-overlay-lighten-10': {},
-            '@apply text-primitives-gray-lightest dark:text-primitives-overlay-darken-9': {},
-            '@apply hover:bg-primitives-overlay-darken-10 dark:hover:bg-primitives-gray-lightest': {},
-          },
-
-          // inverted.
-          [`&[data-inverted="true"]`]: {
-            '@apply bg-primitives-gray-800': {},
-
-            '.sk-card-body': {
-              // Meta
-              '&-meta': {
-                span: {
-                  '@apply text-light-secondary': {},
-                },
-              },
-
-              // header
-              '&-header': {
-                'h1, h2, h3, h4, h5, h6, h7, a': {
-                  [`@apply text-light-primary`]: {},
-                },
-              },
-
-              // Content
-              '&-content': {
-                'p, a': {
-                  [`@apply text-light-secondary`]: {},
-                },
-              },
-
-              '.sk-card-body-icon': {
-                '@apply bg-primitives-overlay-lighten-10 text-primitives-gray-900': {},
-                '@apply hover:bg-primitives-gray-lightest': {},
-              },
-            },
-          },
-        },
-
-        '&[data-color="tertiary"]': {
-          '@apply border-solid border-1': {},
-          '@apply border-primitives-overlay-darken-5 dark:border-primitives-overlay-lighten-5': {},
-          '@apply bg-primitives-gray-50 dark:bg-primitives-gray-700': {},
-        },
-
-        [`&[data-color="${color}"]`]: {
-          // card
-          [`@apply bg-${color}-surface-primary-hover`]: {},
-
-          // clickable
-          '&.sk-card-use-hover-effect': {
-            // hover
-            [`@apply hover:cursor-pointer hover:bg-${color}-surface-primary`]: {},
-          },
-
-          // Meta
-          '.sk-card-body': {
-            '&-meta': {
-              span: {
-                '@apply text-light-secondary': {},
-              },
-            },
-
-            // header
-            '&-header': {
-              'h1, h2, h3, h4, h5, h6, h7, a': {
-                [`@apply text-light-primary`]: {},
-              },
-            },
-
-            // Content
-            '&-content': {
-              'p, a': {
-                [`@apply text-light-secondary`]: {},
-              },
-            },
-          },
-
-          // inverted.
-          [`&[data-inverted="true"]`]: {
-            // card
-            [`@apply bg-${color}-surface-accent-hover`]: {},
-
-            // clickable
-            '&.sk-card-use-hover-effect': {
-              // hover
-              [`@apply hover:cursor-pointer hover:bg-${color}-surface-accent`]: {},
-            },
-
-            '.sk-card-body': {
-              // Meta
-              '&-meta': {
-                span: {
-                  '@apply text-dark-secondary': {},
-                },
-              },
-
-              // header
-              '&-header': {
-                'h1, h2, h3, h4, h5, h6, h7, a': {
-                  [`@apply text-dark-primary`]: {},
-                },
-              },
-
-              // Content
-              '&-content': {
-                'p, a': {
-                  [`@apply text-dark-secondary`]: {},
-                },
-              },
-            },
-          },
-        },
-      }),
-      {}
-    ),
-
-    // clickable
-    '&.sk-card-use-hover-effect': {
-      //Hide and show of icon
-      '.sk-card-body-icon': {
-        '@apply inline-flex': {},
-        '@apply mt-auto mb-auto mr-24': {},
-      },
-    },
-
-    [`&[data-layout="horizontal"]`]: {
-      '@apply flex-row h-[100%]': {},
-
-      '.sk-card': {
-        '&-image': {
-          '@apply h-[100%] w-[128px]': {},
-          '@apply float-left': {},
-          '@apply rounded-none rounded-l-cards grow-0': {},
-        },
-
-        '&-body': {
-          '@apply w-[100%]': {},
-          '@apply border-none': {},
-
-          '&-wrapper': {
-            '@apply w-[100%]': {},
-          },
-
-          '&-content': {
-            'p, a': {
-              '@apply text-small': {},
-            },
-          },
-
-          '&-meta': {
-            '@apply hidden': {},
-          },
-        },
-      },
-    },
-  },
-
-  '.sk-card-link': {
-    '@apply hover:cursor-pointer': {},
-
-    '&::after': {
-      content: "''",
-      position: 'absolute',
-      left: '0',
-      top: '0',
-      right: '0',
-      bottom: '0',
-    },
-  },
-
-  /**
-   * Meta card
-   */
-  '.sk-meta-card': {
-    '@apply no-underline hover:no-underline': {},
-    '@apply flex bg-vattjom-surface-accent': {},
-    '@apply p-14 rounded-16 w-[454px]': {},
-
-    '&[data-color="mono"]': {
-      '@apply bg-primitives-overlay-darken-1 dark:bg-primitives-overlay-lighten-1': {},
-    },
-
-    '&[data-color="vattjom"]': {
-      '@apply bg-vattjom-background-200': {},
-    },
-
-    '&-text-icon': {
-      '@apply mr-12 rounded-12 p-8': {},
-      '@apply bg-primitives-gray-lightest dark:bg-primitives-gray-800': {},
-      '@apply text-dark': {},
-      svg: {
-        height: 'unset',
-        width: 'unset',
-      },
-    },
-
-    '&-body': {
-      '&-header': {
-        'h1, h2, h3, h4, h5, h6, h7, a, p': {
-          '@apply mt-6 text-base line-clamp-1': {},
-          '@apply text-dark-primary': {},
-        },
-      },
-
-      '&-content': {
-        'p, a': {
-          '@apply text-primitives-gray-700 dark:text-primitives-gray-200': {},
-          '@apply text-dark-secondary line-clamp-1': {},
-        },
-      },
-    },
-
-    '&-external-link-icon': {
-      '@apply ml-auto h-[32px] w-[32px]': {},
-      '@apply p-6 text-dark': {},
-    },
-  },
-});

package/src/components/checkbox.js

@@ -1,136 +0,0 @@
-module.exports = Checkbox = () => ({
-  '.sk-form-checkbox': {
-    '@apply bg-inherit': {},
-    '@apply rounded-utility': {},
-    '@apply bg-transparent border-transparent': {},
-
-    // sizing
-    '&-sm': {
-      '@apply w-[2.4rem] h-[2.4rem]': {},
-    },
-
-    '&-md': {
-      '@apply w-[2.4rem] h-[2.4rem]': {},
-    },
-
-    '&-lg': {
-      '@apply w-[2.4rem] h-[2.4rem]': {},
-    },
-
-    '+ .sk-icon': {
-      '@apply absolute inset-0 my-auto bg-transparent': {},
-      '@apply border-[0.1rem] p-2 border-primitives-overlay-darken-6 dark:border-primitives-overlay-lighten-6': {},
-      '@apply bg-primitives-overlay-lighten-10 dark:bg-primitives-overlay-darken-6': {},
-
-      svg: {
-        '@apply hidden': {},
-      },
-    },
-
-    '&&:checked': {
-      '@apply text-light-primary bg-none': {},
-
-      '& + .sk-icon': {
-        '@apply text-light-primary bg-dark-primary border-dark-primary': {},
-
-        svg: {
-          '@apply block': {},
-        },
-      },
-    },
-
-    '&&:hover:not(&&-disabled,&&:checked,&&[aria-invalid=true]),&&:hover:focus:not(&&-disabled,&&:checked,&&[aria-invalid=true])':
-      {
-        '& + .sk-icon, &:focus + .sk-icon': {
-          '@apply text-primitives-overlay-darken-6 dark:text-primitives-overlay-lighten-5 border-primitives-overlay-darken-8 dark:border-primitives-overlay-lighten-4':
-            {},
-
-          svg: {
-            '@apply block': {},
-          },
-        },
-      },
-
-    '&&[aria-invalid=true]': {
-      '& + .sk-icon': {
-        '@apply border-2 border-error-surface-primary': {},
-      },
-
-      '&&:checked': {
-        '& + .sk-icon': {
-          '@apply p-2 bg-background-content text-dark-primary': {},
-
-          svg: {
-            '@apply block': {},
-          },
-        },
-      },
-    },
-
-    // disabled
-    '&&-disabled,&&-disabled:hover': {
-      '@apply cursor-not-allowed': {},
-
-      '& + .sk-icon': {
-        '@apply bg-background-200 border-primitives-overlay-darken-3': {},
-      },
-
-      '&:checked': {
-        '& + .sk-icon': {
-          '@apply bg-dark-disabled text-light-primary border-0': {},
-        },
-      },
-
-      '& ~ .sk-form-checkbox-label': {
-        '@apply text-dark-disabled': {},
-      },
-    },
-
-    // label
-    '&-label-left &-label': {
-      '@apply mr-[.8rem]': {},
-    },
-    '&-label-right &-label': {
-      '@apply ml-[.8rem]': {},
-    },
-
-    '&-label-left': {
-      '.sk-icon': {
-        '@apply left-auto right-0': {},
-      },
-    },
-
-    '&-label-right': {
-      '.sk-icon': {
-        '@apply right-auto left-0': {},
-      },
-    },
-
-    '&-label': {
-      '@apply font-normal text-body select-none text-small': {},
-
-      '&-wrapper': {
-        '@apply relative inline-flex align-top items-center cursor-base': {},
-      },
-
-      '&-sm': {
-        '@apply text-small': {},
-      },
-
-      '&-md': {
-        '@apply text-base': {},
-      },
-
-      '&-lg': {
-        '@apply text-large': {},
-      },
-    },
-
-    '&-group': {
-      '@apply flex flex-col gap-16 my-12': {},
-      '&[data-direction="row"]': {
-        '@apply flex-row': {},
-      },
-    },
-  },
-});

package/src/components/code.js

@@ -1,9 +0,0 @@
-module.exports = Code = () => ({
-  '.code': {
-    '@apply inline-flex justify-center items-center capitalize text-xs rounded-sm font-mono break-all': {},
-    '@apply bg-neutral-200 border border-neutral-100 text-body': {},
-    // dark
-    '@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300': {},
-    padding: '2px 3px 1px',
-  },
-});

package/src/components/combobox.js

@@ -1,66 +0,0 @@
-module.exports = ComboBox = () => ({
-  '.sk-form-combobox': {
-    '@apply focus-within:ring ring-ring ring-offset': {},
-    '@apply relative w-auto': {},
-    '@apply inline-block': {},
-    '&-sm': {
-      '@apply h-[3.2rem]': {},
-      '@apply rounded-button-sm': {},
-      '.sk-form-combobox-select.active': {
-        '@apply text-input-small': {},
-        '@apply pr-[5.2rem]': {},
-      },
-    },
-    '&-md': {
-      '@apply h-[4rem]': {},
-      '@apply rounded-button-md': {},
-      '.sk-form-combobox-select.active': {
-        '@apply text-input-medium': {},
-        '@apply pr-[6.1rem]': {},
-      },
-    },
-    '&-lg': {
-      '@apply h-[4.8rem]': {},
-      '@apply rounded-button-lg': {},
-      '.sk-form-combobox-select.active': {
-        '@apply text-input-large': {},
-        '@apply pr-[6.8rem]': {},
-      },
-    },
-
-    '&-select': {
-      '@apply h-full bg-right-12 bg-no-repeat': {},
-
-      '&.sk-form-select': { '@apply focus:outline-none focus:ring-0 focus:ring-transparent': {} },
-      '@apply w-full': {},
-
-      '&:not(.active)': {
-        '@apply cursor-default': {},
-      },
-      '@apply focus:border-transparent': {},
-      '@apply focus:hover:border-transparent': {},
-      '&.active': {
-        '@apply bg-primitives-overlay-lighten-10': {},
-        '@apply dark:bg-primitives-overlay-darken-6': {},
-        '@apply placeholder:text-dark-placeholder': {},
-        '@apply text-dark-primary': {},
-        '@apply border-transparent': {},
-      },
-    },
-    '&-list': {
-      '@apply w-full': {},
-      '@apply max-h-[23rem] overflow-y-auto': {},
-      '&-option': {
-        '&.sk-popup-menu-item': {
-          '@apply cursor-default': {},
-          '@apply leading-none': {},
-          '@apply h-auto': {},
-        },
-
-        '&-checkbox': {
-          '@apply w-0 h-0 m-0 p-0 opacity-0': {},
-        },
-      },
-    },
-  },
-});

package/src/components/comments.js

@@ -1,38 +0,0 @@
-module.exports = Comments = () => ({ 
-
-    '.comment-header': {
-        '@apply w-full flex items-center gap-8 p-16 border-b-4 border-gray-200': {},
-    },
-
-    '.comment-item':{
-        '@apply w-full': {},
-
-        '&-container': {
-            '@apply flex justify-between relative': {},
-
-            '&-textpic': {
-                '@apply flex gap-2': {},
-            },
-        },
-        '&-text': {
-            '@apply text-base font-bold mx-0 mb-0 mt-4': {},
-        },
-        '&-commentorpublished': {
-            '@apply float-right text-neutral-600 m-0': {},
-        },
-    },
-    '.comment-input':{
-        '@apply w-full flex gap-4 px-10 pt-8 pb-10': {},
-
-        '&-inactive': {
-            '@apply text-neutral-300 !text-3xl': {},
-        },
-
-        '&-active': {
-            '@apply text-primary !text-3xl': {},
-        }
-
-    },
-
-   
-});

package/src/components/context-menu.js

@@ -1,49 +0,0 @@
-module.exports = ContextMenu = () => ({
-  '.context-menu-wrapper': {
-    '@apply relative inline': {},
-
-    '> a, > button': {
-      '@apply inline-flex': {},
-    },
-
-    '.context-menu-items': {
-      '@apply absolute rounded bg-white border border-body z-10 drop-shadow-md mt-sm flex flex-col justify-start items-start':
-        {},
-      '.context-menu-item': {
-        '@apply text-base text-body hover:text-white focus-within:text-white min-h-[3.5rem] w-full flex justify-start items-center':
-          {},
-
-        'a, button': {
-          '@apply text-base font-normal min-h-[3.5rem] py-[0.6rem] items-center w-full rounded-none border-transparent px-md flex justify-start':
-            {},
-
-          '&.active': {
-            '@apply bg-primary text-white': {},
-          },
-
-          '.MuiSvgIcon-root': {
-            '@apply text-base': {},
-          },
-        },
-
-        '&:first-child a,&:first-child button': {
-          '@apply pt-[0.675rem] pb-[0.525rem]': {},
-        },
-        '&:last-child a,&:last-child button': {
-          '@apply pt-[0.525rem] pb-[0.675rem]': {},
-        },
-        '&:only-child a,&:only-child button': {
-          '@apply py-[0.6rem]': {},
-        },
-      },
-
-      hr: {
-        '@apply mx-sm w-[calc(100%_-_16px)]': {},
-      },
-
-      '&.right': {
-        '@apply right-0': {},
-      },
-    },
-  },
-});

package/src/components/cookie-consent.js

@@ -1,45 +0,0 @@
-module.exports = CookieConsent = () => ({
-  '.sk-cookie-consent': {
-    '@apply min-w-full fixed flex justify-center z-10 bottom-0 left-0 right-0': {},
-    '@apply bg-background-content': {},
-    '@apply p-40': {},
-    '@apply pt-24': {},
-
-    '&-wrapper': {
-      '@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-dark-secondary absolute right-8 top-6 border border-transparent focus-visible:border-black flex self-center':
-      // {},
-
-      '&-icon': {
-        // '@apply !text-2xl': {},
-      },
-    },
-
-    '&-content-wrapper': {
-      '@apply flex flex-col gap-24 container max-w-[102.4rem] relative': {},
-    },
-
-    '&-body': {
-      '@apply flex flex-col gap-8': {},
-      '@apply max-w-[80rem]': {},
-    },
-    '&-title': {
-      '@apply text-h2-sm md:text-h2-md xl:text-h2-lg': {},
-    },
-    '&-custom-wrapper': {
-      '@apply flex flex-col gap-24': {},
-    },
-
-    '&-description': {
-      '@apply text-base flex flex-col gap-8': {},
-    },
-
-    '&-btn-wrapper': {
-      '@apply flex flex-col md:flex-row gap-12 flex-wrap': {},
-    },
-  },
-});

package/src/components/dialog.js

@@ -1,5 +0,0 @@
-module.exports = Dialog = () => ({
-  '.sk-dialog': {
-    '@apply w-fit max-w-prose md:min-w-[40rem]': {},
-  },
-});

package/src/components/divider.js

@@ -1,52 +0,0 @@
-module.exports = Divider = () => ({
-  '.sk-divider': {
-    '@apply border-t-0 border-divider': {},
-    '&-vertical': {
-      '@apply min-h-[1em] border-l-1 border-solid h-auto ml-4 mt-8 mb-4 mr-4 self-stretch': {},
-      '&[data-strong="true"]': {
-        '@apply border-l border-solid h-auto mx-2': {},
-      },
-    },
-    '&-horizontal': {
-      '@apply flex-1 border-b-1 border-solid w-auto my-2': {},
-      '&[data-strong="true"]': {
-        '@apply border-b border-solid w-auto my-2': {},
-      },
-    },
-
-    '&-root': {
-      '@apply flex items-center gap-16': {},
-    },
-
-    '&-sm': {
-      '&.sk-divider': {
-        '&-root': {
-          '@apply gap-[.8rem]': {},
-        },
-        '.sk-divider-text': {
-          '@apply text-label-small': {},
-        },
-      },
-    },
-    '&-md': {
-      '&.sk-divider': {
-        '&-root': {
-          '@apply gap-[1rem]': {},
-        },
-        '.sk-divider-text': {
-          '@apply text-label-medium': {},
-        },
-      },
-    },
-    '&-lg': {
-      '&.sk-divider': {
-        '&-root': {
-          '@apply gap-[1.2rem]': {},
-        },
-        '.sk-divider-text': {
-          '@apply text-label-large': {},
-        },
-      },
-    },
-  },
-});