@sk-web-gui/core 1.0.2 → 1.1.0

package/src/components/dot.js

@@ -1,83 +0,0 @@
-module.exports = Dot = (colors) => ({
-  '.dot': {
-    '@apply relative inline-flex rounded-full': {},
-    '&-solid': {
-      '@apply bg-neutral-500': {},
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply bg-${color}-surface-primary`]: {},
-          },
-        }),
-        {}
-      ),
-
-      '&.dot-bordered': {
-        '@apply border-2 border-white': {},
-        '@apply dark:border-neutral-800': {},
-      },
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&.dot-bordered[data-color="${color}"]`]: {
-            [`@apply border-${color}-background-200`]: {},
-          },
-        }),
-        {}
-      ),
-    },
-
-    '&-outline': {
-      '@apply bg-white border-2 border-neutral-500': {},
-      '@apply dark:bg-neutral-800': {},
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply border-${color}-surface-primary`]: {},
-          },
-        }),
-        {}
-      ),
-    },
-
-    '&-3xs': {
-      '@apply w-1.5 h-1.5': {},
-    },
-
-    '&-2xs': {
-      '@apply w-2 h-2': {},
-    },
-
-    '&-xs': {
-      '@apply w-2.5 h-2.5': {},
-    },
-
-    '&-sm': {
-      '@apply w-3 h-3': {},
-    },
-
-    '&-md': {
-      '@apply w-3.5 h-3.5': {},
-    },
-
-    '&-lg': {
-      '@apply w-4 h-4': {},
-    },
-
-    '&-xl': {
-      '@apply w-5 h-5': {},
-    },
-
-    '&-2xl': {
-      '@apply w-6 h-6': {},
-    },
-
-    '&-3xl': {
-      '@apply w-8 h-8': {},
-    },
-  },
-});

package/src/components/dropdown-filter.js

@@ -1,66 +0,0 @@
-module.exports = DropdownFilter = () => ({
-  '.dropdown-filter': {
-    position: 'relative',
-    height: 50,
-    border: '1px solid #939393',
-    display: 'flex',
-    background: '#fff',
-    borderRadius: 2,
-
-    '.dropdown-button': {
-      '@apply flex justify-between items-center  grow': {},
-      '.dropdown-button-icon': {
-        '@apply justify-self-end grow-0': {},
-      },
-    },
-
-    '.filter-container': {
-      position: 'absolute',
-      top: '100%',
-      left: '-1px',
-      zIndex: 10,
-      width: 'calc(100% + 2px)',
-      background: '#fff',
-      border: '1px solid #939393',
-      borderRadius: 2,
-
-      '.filter-controls': {
-        display: 'flex',
-        justifyContent: 'flex-end',
-        button: {
-          marginLeft: '1rem',
-          textDecoration: 'underline',
-        },
-      },
-
-      '.filter-item': {
-        '@apply px-md': {},
-        height: 48,
-        display: 'flex',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        borderBottom: '1px solid #939393',
-
-        '> label': {
-          '@apply w-full': {},
-
-          '> .form-checkbox-label': {
-            '@apply flex-grow': {},
-          },
-        },
-
-        '&.disabled': {
-          color: '#939393',
-        },
-
-        '&:first-of-type': {
-          borderTop: '1px solid #939393',
-        },
-
-        '&:last-child': {
-          borderBottom: 'none',
-        },
-      },
-    },
-  },
-});

package/src/components/filter.js

@@ -1,16 +0,0 @@
-module.exports = Filter = () => ({
-  '.sk-filter': {
-    '@apply w-full': {},
-
-    '&-label': {
-      '@apply text-label-medium': {},
-    },
-
-    '.sk-form-checkbox-label': {
-      '@apply grow flex items-center justify-between': {},
-      '&-wrapper': {
-        '@apply w-full': {},
-      },
-    },
-  },
-});

package/src/components/footer.js

@@ -1,29 +0,0 @@
-module.exports = Footer = () => ({
-  '.sk-footer': {
-    '@apply bg-background-content': {},
-    '@apply flex justify-center': {},
-    '@apply w-full': {},
-    '@apply p-20 sm:p-32 md:p-40 lg:p-48 xl:p-80': {},
-    '@apply text-dark-secondary': {},
-
-    '&-innerwrapper': {
-      '@apply w-full max-w-content': {},
-      '@apply pb-20 sm:pb-32 md:pb-40 lg:pb-48 xl:pb-80': {},
-      '@apply flex flex-row flex-wrap gap-[10rem]': {},
-      '@apply justify-between': {},
-    },
-
-    '&-logo': {
-      '@apply max-h-[7.2rem] h-[7.2rem]': {},
-    },
-    '&-content': {
-      '@apply flex flex-row gap-36 w-fit grow-0 flex-wrap': {},
-    },
-    '&-list': {
-      '@apply flex flex-col gap-16': {},
-      '&-item': {
-        '@apply flex flex-row justify-start items-center gap-8': {},
-      },
-    },
-  },
-});

package/src/components/forms.js

@@ -1,27 +0,0 @@
-module.exports = Forms = () => ({
-  '.sk-form-control': {
-    '@apply flex flex-col gap-8 w-fit': {},
-  },
-
-  '.sk-form-label': {
-    '@apply font-bold': {},
-    '&-sm': {
-      '@apply text-label-small': {},
-    },
-    '&-md': {
-      '@apply text-label-medium': {},
-    },
-    '&-lg': {
-      '@apply text-label-large': {},
-    },
-  },
-
-  'legend.sk-form-label': {
-    display: 'contents',
-  },
-
-  '.sk-form-helper-text, .sk-form-error-message': {
-    '@apply font-normal': {},
-    '@apply text-small': {},
-  },
-});

package/src/components/header.js

@@ -1,28 +0,0 @@
-module.exports = Header = () => ({
-  '.sk-header': {
-    '@apply bg-background-content p-12 md:px-32 md:pt-24 md:pb-20 xl:pt-32 xl:pb-20 xl:px-80 xl:h-auto xl:min-h-0': {},
-    '@apply shadow-100': {},
-
-    '&-container': {
-      '@apply flex flex-col gap-20 xl:gap-24': {},
-    },
-
-    '&-top-content': {
-      '@apply flex items-center w-full justify-between m-auto flex-shrink-0 py-4 gap-20': {},
-    },
-    '&-bottom-content': {
-      '@apply hidden md:flex items-center w-full justify-start p-8 xl:p-0': {},
-    },
-
-    '&-usermenu': {
-      '@apply hidden xl:flex-shrink md:flex xl:items-center xl:w-auto': {},
-
-      '&-content': {
-        '@apply relative flex flex-grow justify-end items-center xl:w-auto': {},
-      },
-    },
-    '&-mobilemenu': {
-      '@apply block md:hidden relative': {},
-    },
-  },
-});

package/src/components/icon.js

@@ -1,78 +0,0 @@
-module.exports = Icon = (colors) => ({
-  '.sk-icon': {
-    '@apply inline-flex items-center justify-center': {},
-    '@apply w-24 h-24': {},
-    svg: {
-      '@apply w-full h-full': {},
-    },
-
-    '&.sk-icon-padded': {
-      '@apply rounded-utility': {},
-      '@apply text-light-primary fill-light-primary': {},
-      '@apply p-[0.4rem]': {},
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply bg-${color}-surface-primary text-${color}-text-secondary fill-${color}-text-secondary`]: {},
-
-            '&[data-inverted="true"]': {
-              '@apply text-inverted-light-primary': {},
-              [`@apply bg-inverted-${color}-surface-primary text-inverted-${color}-text-secondary fill-inverted-${color}-text-secondary`]:
-                {},
-            },
-          },
-        }),
-        {}
-      ),
-
-      "&[data-color='primary'], &[data-color='tertiary']": {
-        '@apply bg-primary-surface text-light-primary fill-light-primary': {},
-
-        '&[data-inverted="true"]': {
-          '@apply text-inverted-light-primary fill-inverted-light-primary': {},
-          '@apply bg-tertiary-surface': {},
-        },
-      },
-      "&[data-variant='ghost']": {
-        '@apply bg-transparent text-current fill-current': {},
-
-        '&[data-inverted="true"]': {
-          '@apply bg-transparent text-current fill-current': {},
-        },
-      },
-    },
-
-    '&[data-size="fit"]': {
-      '@apply w-fit h-fit': {},
-    },
-
-    '&[data-rounded="true"]': {
-      '@apply rounded-circular': {},
-    },
-
-    ...colors.reduce(
-      (styles, color) => ({
-        ...styles,
-        [`&[data-color="${color}"]`]: {
-          '@apply text-inverted-light-primary': {},
-          [`@apply text-inverted-${color}-text-secondary fill-inverted-${color}-text-secondary`]: {},
-
-          '&[data-inverted="true"]': {
-            '@apply text-inverted-light-primary': {},
-            [`@apply bg-inverted-${color}-surface-primary text-inverted-${color}-text-secondary fill-inverted-${color}-text-secondary`]:
-              {},
-          },
-        },
-      }),
-      {}
-    ),
-
-    "&[data-color='primary']": {
-      '&[data-inverted="true"]': {
-        '@apply text-light-primary fill-light-primary': {},
-      },
-    },
-  },
-});

package/src/components/input.js

@@ -1,244 +0,0 @@
-function calendar() {
-  return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='4' rx='2' ry='2' /><line x1='16' x2='16' y1='2' y2='6' /><line x1='8' x2='8' y1='2' y2='6' /><line x1='3' x2='21' y1='10' y2='10' /></svg>`;
-}
-function clock() {
-  return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10' /><polyline points='12 6 12 12 16 14' /></svg>`;
-}
-
-function inputStandards() {
-  return {
-    '@apply border-1': {},
-    '@apply border-primitives-overlay-darken-6': {},
-    '@apply dark:border-primitives-overlay-lighten-6': {},
-    '@apply hover:border-primitives-overlay-darken-8': {},
-    '@apply dark:hover:border-primitives-overlay-lighten-4': {},
-
-    '@apply placeholder:text-dark-placeholder': {},
-
-    '@apply bg-primitives-overlay-lighten-10': {},
-    '@apply dark:bg-primitives-overlay-darken-6': {},
-
-    //Invalid
-    '&:invalid, &[aria-invalid="true"]': {
-      '@apply border-2 border-error-surface-primary': {},
-    },
-
-    //Disabled
-    '&:disabled, &[aria-disabled="true"]': {
-      '@apply bg-primitives-overlay-darken-1': {},
-      '@apply dark:bg-primitives-overlay-lighten-1': {},
-      '@apply border-primitives-overlay-darken-3': {},
-      '@apply dark:border-primitives-overlay-lighten-3': {},
-      '@apply hover:border-primitives-overlay-darken-3': {},
-      '@apply dark:hover:border-primitives-overlay-lighten-3': {},
-      '@apply text-dark-disabled': {},
-    },
-  };
-}
-
-function addin() {
-  return {
-    '&-addin': {
-      '@apply bg-transparent': {},
-      '@apply flex': {},
-      '@apply justify-start items-center': {},
-      '&-sm': {
-        '@apply px-6 gap-6': {},
-        '&.sk-form-input-addin-left': {
-          '@apply -mr-12': {},
-          '@apply pl-10': {},
-        },
-        '&.sk-form-input-addin-right': {
-          '@apply -ml-12': {},
-          '@apply pr-10': {},
-        },
-        svg: {
-          '@apply w-[1.6rem] h-[1.6rem]': {},
-        },
-      },
-      '&-md': {
-        '@apply md:px-8 md:gap-8': {},
-        '&.sk-form-input-addin-left': {
-          '@apply -mr-16': {},
-          '@apply pl-12': {},
-        },
-        '&.sk-form-input-addin-right': {
-          '@apply -ml-16': {},
-          '@apply pr-12': {},
-        },
-        svg: {
-          '@apply w-[2rem] h-[2rem]': {},
-        },
-      },
-      '&-lg': {
-        '@apply md:px-8 md:gap-8': {},
-        '&.sk-form-input-addin-left': {
-          '@apply -mr-20': {},
-          '@apply pl-16': {},
-        },
-        '&.sk-form-input-addin-right': {
-          '@apply -ml-20': {},
-          '@apply pr-16': {},
-        },
-        svg: {
-          '@apply w-[2.2rem] h-[2.2rem]': {},
-        },
-      },
-    },
-  };
-}
-
-function inputGroup() {
-  return {
-    '&-group': {
-      '@apply flex relative': {},
-      '@apply items-center': {},
-      '@apply focus-within:ring': {},
-      '@apply focus-within:ring-ring': {},
-      '@apply text-dark-secondary': {},
-      //Focus
-      '@apply focus-within:border-primitives-overlay-lighten-10': {},
-      '@apply dark:focus-within:border-primitives-overlay-darken-6': {},
-
-      '&:not(:invalid):not([aria-invalid="true"])': {
-        '@apply focus-within:hover:border-primitives-overlay-lighten-10': {},
-        '@apply dark:focus-within:hover:border-primitives-overlay-darken-6': {},
-      },
-
-      '&:disabled, &[aria-disabled="true"]': {
-        '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {
-          '@apply color-black-disabled': {},
-        },
-      },
-      '&&-lg': {
-        '@apply text-input-large': {},
-        '@apply rounded-button-lg': {},
-      },
-      '&&-md': {
-        '@apply text-input-medium': {},
-        '@apply rounded-button-md': {},
-      },
-      '&&-sm': {
-        '@apply text-input-small': {},
-        '@apply rounded-button-sm': {},
-      },
-      ...inputStandards(),
-      '.sk-form-input': {
-        '@apply rounded-0': {},
-        '@apply border-0': {},
-        '@apply focus:ring-0': {},
-        '@apply focus:ring-offset-0': {},
-        '@apply bg-transparent': {},
-        '@apply dark:bg-transparent': {},
-        '@apply grow': {},
-      },
-    },
-  };
-}
-
-function timeAndDatePicker() {
-  return {
-    '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {
-      '@apply block': {},
-      '@apply p-0': {},
-      '@apply pl-6 md:pl-8': {},
-      '@apply m-0': {},
-      '@apply bg-none': {},
-      '@apply bg-dark-secondary': {},
-      '&.sk-form-input-sm': {
-        '@apply w-[1.6rem] h-[1.6rem]': {},
-        '@apply -mr-2': {},
-      },
-      '&.sk-form-input-md': {
-        '@apply -mr-4': {},
-        '@apply w-[1.8rem] h-[1.8rem]': {},
-      },
-      '&.sk-form-input-lg': {
-        '@apply -mr-6': {},
-        '@apply w-[2rem] h-[2rem]': {},
-      },
-    },
-
-    '&[type="date"]::-webkit-inner-spin-button, &[type="date"]::-webkit-calendar-picker-indicator': {
-      mask: [`url("data:image/svg+xml;utf-8,${calendar()}") no-repeat 100% 100%`],
-      '-webkit-mask': [`url("data:image/svg+xml;utf-8,${calendar()}") no-repeat 100% 100%`],
-      maskSize: 'contain',
-      '-webkit-mask-size': 'contain',
-    },
-    '&[type="datetime-local"]::-webkit-inner-spin-button, &[type="datetime-local"]::-webkit-calendar-picker-indicator':
-      {
-        mask: [`url("data:image/svg+xml;utf-8,${calendar()}") no-repeat 100% 100%`],
-        '-webkit-mask': [`url("data:image/svg+xml;utf-8,${calendar()}") no-repeat 100% 100%`],
-        maskSize: 'contain',
-        '-webkit-mask-size': 'contain',
-      },
-    '&[type="time"]::-webkit-inner-spin-button, &[type="time"]::-webkit-calendar-picker-indicator': {
-      mask: [`url("data:image/svg+xml;utf-8,${clock()}") no-repeat 100% 100%`],
-      '-webkit-mask': [`url("data:image/svg+xml;utf-8,${clock()}") no-repeat 100% 100%`],
-      maskSize: 'contain',
-      '-webkit-mask-size': 'contain',
-    },
-
-    '&:disabled, &[aria-disabled="true"]': {
-      '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {
-        '@apply color-black-disabled': {},
-      },
-    },
-  };
-}
-
-module.exports = Input = () => ({
-  '.sk-form-input': {
-    '@apply grow-0': {},
-    '@apply text-dark-primary': {},
-
-    '&[data-hideextra="true"]': {
-      '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
-        '-webkit-appearance': 'none',
-        display: 'none',
-        margin: 0,
-      },
-      '-moz-appearance': 'textfield',
-    },
-
-    '&&-lg': {
-      '@apply rounded-button-lg': {},
-      '@apply px-20': {},
-      '@apply py-12': {},
-      '@apply gap-8': {},
-      '@apply text-input-large': {},
-      '@apply h-[4.8rem]': {},
-    },
-    '&&-md': {
-      '@apply rounded-button-md': {},
-      '@apply px-16': {},
-      '@apply py-8': {},
-      '@apply gap-8': {},
-      '@apply text-input-medium': {},
-      '@apply h-[4rem]': {},
-    },
-    '&&-sm': {
-      '@apply rounded-button-sm': {},
-      '@apply px-12': {},
-      '@apply py-6': {},
-      '@apply gap-6': {},
-      '@apply text-input-small': {},
-      '@apply h-[3.2rem]': {},
-    },
-
-    //Focus
-    '@apply focus:ring': {},
-    '@apply focus:ring-ring': {},
-    '@apply focus:ring-offset': {},
-    '@apply focus:border-primitives-overlay-lighten-10': {},
-    '@apply dark:focus:border-primitives-overlay-darken-6': {},
-    '&:not(:invalid):not([aria-invalid="true"])': {
-      '@apply focus:hover:border-primitives-overlay-lighten-10': {},
-      '@apply dark:focus:hover:border-primitives-overlay-darken-6': {},
-    },
-    ...timeAndDatePicker(),
-    ...inputStandards(),
-    ...inputGroup(),
-    ...addin(),
-  },
-});

package/src/components/kbd.js

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

package/src/components/label.js

@@ -1,37 +0,0 @@
-module.exports = Label = (colors) => ({
-  '.sk-label': {
-    '@apply inline-flex flex-row': {},
-    '@apply justify-center items-center': {},
-    '@apply gap-6 px-10 py-4': {},
-    '@apply h-24 max-h-24': {},
-    '@apply text-label-small': {},
-
-    '@apply rounded-utility-sm md:rounded-utility-md xl:rounded-utility-lg': {},
-
-    '@apply bg-primary-surface': {},
-    '@apply text-light-primary': {},
-
-    '&[data-rounded="true"]': {
-      '@apply rounded-full': {},
-    },
-    '&[data-inverted="true"]': {
-      '@apply bg-inverted-primary-surface': {},
-      '@apply text-inverted-light-primary': {},
-    },
-
-    ...colors.reduce(
-      (styles, color) => ({
-        ...styles,
-        [`&[data-color="${color}"]`]: {
-          [`@apply bg-${color}-surface-primary`]: {},
-          [`@apply text-${color}-text-secondary`]: {},
-          '&[data-inverted="true"]': {
-            [`@apply bg-${color}-surface-accent`]: {},
-            [`@apply text-${color}-text-primary`]: {},
-          },
-        },
-      }),
-      {}
-    ),
-  },
-});

package/src/components/link.js

@@ -1,53 +0,0 @@
-module.exports = Link = () => ({
-  '.sk-link': {
-    '@apply underline outline-none hover:underline': {},
-    '@apply rounded-utility': {},
-
-    // focus
-    '@apply focus-visible:ring ring-offset-[.6rem]': {},
-
-    // sizes
-    '&-sm': {
-      '@apply text-small leading-[2rem]': {},
-    },
-    '&-md': {
-      '@apply text-base': {},
-    },
-    '&-lg': {
-      '@apply text-large': {},
-    },
-    '&-xl': {
-      '@apply text-lead leading-[3.2rem]': {},
-    },
-
-    // variants
-    '&-primary': {
-      '@apply text-vattjom-surface-primary': {},
-      '&:hover': {
-        '@apply text-vattjom-surface-primary-hover': {},
-      },
-    },
-    '&-tertiary': {
-      '@apply text-dark-secondary': {},
-      '&:hover': {
-        '@apply text-dark-primary': {},
-      },
-    },
-
-    '&.active': {
-      '@apply underline': {},
-    },
-
-    '& &-external-icon': {
-      '@apply w-[1em] h-[1em] leading-none ml-[.25em] align-text-top': {},
-    },
-
-    '&[type="button"]': {
-      '@apply inline-flex items-center align-bottom': {},
-    },
-
-    '&-disabled': {
-      '@apply text-dark-disabled cursor-default': {},
-    },
-  },
-});