@sk-web-gui/core 1.0.2 → 1.1.0

package/src/components/accordion.js

@@ -1,103 +0,0 @@
-module.exports = Accordion = () => ({
-  '.sk-disclosure': {
-    '&-header': {
-      '@apply mt-6 mb-8': {},
-      '@apply flex flex-col text-left': {},
-      '@apply cursor-pointer': {},
-      '*': {
-        '@apply cursor-pointer': {},
-      },
-      '&:focus-visible': {
-        '@apply outline-0': {},
-      },
-
-      '&-icon': {
-        '@apply ml-auto': {},
-        svg: {
-          '@apply w-20 h-20': {},
-        },
-      },
-      '&[data-disabled="true"]': {
-        '@apply text-dark-disabled': {},
-        '@apply cursor-default': {},
-        '*': {
-          '@apply cursor-default': {},
-        },
-      },
-    },
-
-    '&-sm': {
-      '.sk-disclosure-title': {
-        '@apply text-h4-sm font-bold': {},
-      },
-      '.sk-disclosure-toggle': {
-        '@apply py-4': {},
-        '@apply h-40': {},
-      },
-      '.sk-disclosure-header-icon': {
-        '@apply w-32 h-32': {},
-      },
-    },
-    '&-md': {
-      '.sk-disclosure-title': {
-        '@apply text-h4-md font-bold': {},
-      },
-      '.sk-disclosure-toggle': {
-        '@apply py-8': {},
-        '@apply h-56': {},
-      },
-      '.sk-disclosure-header-icon': {
-        '@apply w-40 h-40': {},
-      },
-    },
-    '&-toggle': {
-      '@apply flex items-center justify-between': {},
-      '@apply gap-16': {},
-    },
-    '&-title': {
-      '@apply text-dark-secondary': {},
-    },
-
-    '&-body': {
-      '@apply flex flex-col': {},
-      '@apply mb-32': {},
-      '@apply mr-32': {},
-      '@apply gap-8': {},
-      '@apply py-0': {},
-      '@apply h-0 overflow-hidden': {},
-      transitionProperty: 'visibility, height, padding, margin',
-      transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
-      transitionDuration: '180ms',
-
-      '&[aria-hidden="true"], &[data-hidden="true"]': {
-        '@apply my-0 invisible h-0': {},
-      },
-
-      '&[aria-hidden="false"], &[data-hidden="false"]': {
-        '@apply block h-max visible': {},
-      },
-    },
-
-    '&-is-open': {
-      '.sk-disclosure-body': {
-        '@apply overflow-visible animate-reset-overflow': {},
-      },
-      '.sk-disclosure-title': {
-        '@apply text-vattjom-text-primary': {},
-      },
-    },
-  },
-  '.sk-accordion': {
-    '&-item': {
-      '.sk-disclosure': {
-        transitionProperty: 'margin',
-        transitionDuration: '180ms',
-        '@apply border-b-1 border-divider': {},
-      },
-
-      '&:last-child .sk-disclosure': {
-        '@apply border-b-transparent': {},
-      },
-    },
-  },
-});

package/src/components/alert-banner.js

@@ -1,29 +0,0 @@
-module.exports = Modal = () => ({
-  '.alert-banner': {
-    '@apply p-md': {},
-
-    '&-content': {
-      '@apply w-full m-auto flex': {},
-
-      '&-wrapper': {
-        '@apply flex-grow flex': {},
-      },
-    },
-
-    '&-icon': {
-      '@apply mr-[10px]': {},
-    },
-
-    '&-children': {
-      '@apply w-full underline inline-block max-w-[800px] text-body text-base': {},
-    },
-
-    '&-close': {
-      '@apply p-4 -m-4 flex flex-col': {},
-    },
-  },
-
-  '.tab': {
-    '@apply mr-[10px] bg-white pt-4 pb-3 px-4 rounded-b-button shadow-[rgba(0,_0,_0,_0.24)_0px_1.5px_4px]': {},
-  },
-});

package/src/components/alert.js

@@ -1,90 +0,0 @@
-function alertSubtle(colors) {
-  return {
-    '.alert-subtle': {
-      '@apply border rounded-base': {},
-      '@apply text-body': {},
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply bg-${color}-background-100 border-${color}-surface-primary`]: {},
-
-            '@apply dark:bg-opacity-15': {},
-            '@apply dark:border-opacity-40': {},
-          },
-        }),
-        {}
-      ),
-    },
-  };
-}
-
-function alertSolid(colors) {
-  return {
-    '.alert-solid': {
-      '@apply border rounded-base': {},
-      '@apply text-white': {},
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply bg-${color}-surface-primary border-${color}-surface-primary border-opacity-20`]: {},
-          },
-        }),
-        {}
-      ),
-    },
-  };
-}
-
-function alertLeftAccent(colors) {
-  return {
-    '.alert-left-accent': {
-      '@apply border-l-2 rounded-none': {},
-      '@apply text-body': {},
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply bg-transparent border-${color}-surface-primary`]: {},
-          },
-        }),
-        {}
-      ),
-    },
-  };
-}
-
-function alertCloseButton(colors) {
-  return {
-    '.alert-close-button': {
-      '@apply absolute right-4 cursor-base focus-visible:outline-none': {},
-      '@apply text-neutral-600 hover:text-neutral-700': {},
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {},
-        }),
-        {}
-      ),
-    },
-  };
-}
-
-module.exports = Alert = (colors) => ({
-  '.alert': {
-    '@apply w-full flex items-center px-4 py-3 relative overflow-hidden text-small': {},
-  },
-
-  // variants
-  ...alertSubtle(colors),
-  ...alertSolid(colors),
-  ...alertLeftAccent(colors),
-
-  // close button
-  ...alertCloseButton(colors),
-});

package/src/components/avatar.js

@@ -1,39 +0,0 @@
-module.exports = Avatar = (colors) => ({
-  '.sk-avatar': {
-    '@apply inline-flex': {},
-    '@apply justify-center items-center': {},
-    '@apply rounded-button-sm md:rounded-button-md xl:rounded-button-lg': {},
-    '@apply overflow-hidden': {},
-    '&[data-rounded="true"]': {
-      '@apply rounded-circular': {},
-    },
-    '&&-sm': {
-      '@apply h-[3.2rem] w-[3.2rem] min-h-[2.4rem] max-h-[3.2rem] min-w-[2.4rem] max-w-[3.2rem]': {},
-      '@apply text-label-small': {},
-    },
-    '&&-md': {
-      '@apply h-[4rem] w-[4rem] min-h-[3.2rem] max-h-[4rem] min-w-[3.2rem] max-w-[4rem]': {},
-      '@apply text-label-medium': {},
-    },
-    '&&-lg': {
-      '@apply h-[6.4rem] w-[6.4rem] min-h-[4rem] max-h-[6.4rem] min-w-[4rem] max-w-[6.4rem]': {},
-      '@apply text-label-large': {},
-    },
-    ...colors.reduce(
-      (styles, color) => ({
-        ...styles,
-        [`&[data-color="${color}"]`]: {
-          [`@apply bg-${color}-surface-primary  text-${color}-text-secondary`]: {},
-
-          '&[data-accent="true"]': {
-            [`@apply bg-${color}-surface-accent  text-${color}-text-primary`]: {},
-          },
-        },
-      }),
-      {}
-    ),
-    '&-img': {
-      '@apply min-w-full min-h-full object-cover': {},
-    },
-  },
-});

package/src/components/badge.js

@@ -1,41 +0,0 @@
-module.exports = Badge = (colors) => ({
-  '.sk-badge': {
-    '@apply inline-flex': {},
-    '@apply justify-center items-center': {},
-    '@apply text-light-primary': {},
-    '@apply rounded-utility': {},
-    '@apply overflow-hidden': {},
-
-    // size
-    '@apply h-[2.4rem] w-[2.4rem]': {},
-    '@apply text-label-small': {},
-
-    '&[data-rounded="true"]': {
-      '@apply rounded-circular': {},
-    },
-
-    ...colors.reduce(
-      (styles, color) => ({
-        ...styles,
-        [`&[data-color="${color}"]`]: {
-          [`@apply bg-${color}-surface-primary  text-${color}-text-secondary`]: {},
-
-          '&[data-inverted="true"]': {
-            '@apply text-inverted-light-primary': {},
-            [`@apply bg-inverted-${color}-surface-primary text-inverted-${color}-text-secondary`]: {},
-          },
-        },
-      }),
-      {}
-    ),
-
-    "&[data-color='tertiary']": {
-      '@apply bg-primary-surface': {},
-
-      '&[data-inverted="true"]': {
-        '@apply text-inverted-light-primary': {},
-        '@apply bg-tertiary-surface dark:bg-inverted-primary-surface': {},
-      },
-    },
-  },
-});

package/src/components/breadcrumb.js

@@ -1,33 +0,0 @@
-module.exports = Breadcrumb = () => ({
-  '.sk-breadcrumb': {
-    '@apply text-body relative': {},
-
-    '&-item': {
-      '@apply inline-flex items-center whitespace-nowrap': {},
-    },
-
-    '&-separator': {
-      '@apply mx-6': {},
-    },
-  },
-
-  '.sk-breadcrumb-item': {
-    span: {
-      '&[aria-current="page"]': {
-        '@apply font-bold': {},
-      },
-    },
-
-    [`&[data-color="primary"]`]: {
-      'a.sk-link': {
-        [`@apply text-secondary`]: {},
-      },
-    },
-
-    [`&[data-color="vattjom"]`]: {
-      'a.sk-link': {
-        [`@apply text-vattjom-text-primary`]: {},
-      },
-    },
-  },
-});

package/src/components/button-group.js

@@ -1,31 +0,0 @@
-module.exports = ButtonGroup = () => ({
-  '.sk-btn-group': {
-    '@apply inline-flex items-center': {},
-
-    '&.sk-btn-group-attached': {
-      '@apply rounded-groups': {},
-      '@apply bg-tertiary-surface': {},
-      '@apply py-6 px-12': {},
-
-      '> *': {
-        '@apply bg-transparent': {},
-      },
-
-      '.sk-btn[data-icon="true"] .sk-icon': {
-        '@apply bg-transparent text-dark-secondary': {},
-      },
-
-      '.sk-icon': {
-        '@apply p-0 w-fit h-fit': {},
-      },
-    },
-
-    '&-divider': {
-      '@apply grow bg-tertiary-surface px-6': {},
-
-      hr: {
-        '@apply h-[2rem]': {},
-      },
-    },
-  },
-});

package/src/components/button.js

@@ -1,309 +0,0 @@
-function buttonPrimary(colors) {
-  return {
-    '&-primary': {
-      '@apply text-light-primary': {},
-      /* hover */
-      '@apply hover:bg-primary-surface-hover': {},
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply bg-${color}-surface-primary  text-${color}-text-secondary`]: {},
-            // hover
-            [`@apply hover:bg-${color}-surface-primary-hover hover:text-light-primary`]: {},
-            // keyboard active
-            '&.active': {
-              [`@apply bg-${color}-surface-primary-hover`]: {},
-            },
-            [`@apply active:bg-${color}-surface-primary-hover`]: {},
-
-            '&[data-inverted="true"]': {
-              '@apply text-inverted-light-primary': {},
-              [`@apply bg-inverted-${color}-surface-primary text-inverted-${color}-text-secondary`]: {},
-              // hover
-              [`@apply hover:bg-inverted-${color}-surface-primary-hover hover:text-inverted-light-primary`]: {},
-              // keyboard active
-              '&.active': {
-                [`@apply bg-inverted-${color}-surface-primary-hover`]: {},
-              },
-              [`@apply active:bg-inverted-${color}-surface-primary-hover`]: {},
-            },
-          },
-        }),
-        {}
-      ),
-
-      "&[data-color='primary']": {
-        '@apply bg-primary-surface': {},
-        '@apply hover:bg-primary-surface-hover': {},
-        '&.active': {
-          '@apply bg-primary-surface-hover': {},
-        },
-        [`@apply active:bg-primary-surface-hover`]: {},
-
-        '&[data-inverted="true"]': {
-          '@apply text-inverted-light-primary': {},
-          '@apply bg-inverted-primary-surface': {},
-          '@apply hover:bg-inverted-primary-surface-hover': {},
-          '&.active': {
-            '@apply bg-inverted-primary-surface-hover': {},
-          },
-          [`@apply active:bg-inverted-primary-surface-hover`]: {},
-        },
-      },
-    },
-  };
-}
-function buttonSecondary() {
-  return {
-    '&-secondary': {
-      '@apply border-secondary-outline': {},
-      '@apply text-dark-secondary': {},
-      '@apply bg-secondary-surface': {},
-      /* hover */
-      '@apply hover:border-secondary-outline-hover': {},
-      '@apply hover:bg-secondary-surface-hover': {},
-      /* focus */
-      '@apply focus-visible:border-background-content': {},
-
-      // State
-      '&.sk-btn-disabled, &[aria-disabled="true"]': {
-        '@apply disabled:bg-secondary-surface-disabled bg-secondary-surface-disabled disabled:border-transparent border-transparent !important':
-          {},
-      },
-
-      '&[data-inverted="true"]': {
-        '@apply border-inverted-secondary-outline': {},
-        '@apply text-inverted-dark-secondary': {},
-        '@apply bg-inverted-secondary-surface': {},
-        /* hover */
-        '@apply hover:border-inverted-secondary-outline-hover': {},
-        '@apply hover:bg-inverted-secondary-surface-hover': {},
-        /* focus */
-        '@apply focus-visible:border-inverted-background-content': {},
-
-        // State
-        '&.sk-btn-disabled, &[aria-disabled="true"]': {
-          '@apply disabled:bg-inverted-secondary-surface-disabled bg-inverted-secondary-surface-disabled disabled:border-transparent border-transparent !important':
-            {},
-        },
-      },
-    },
-  };
-}
-
-function buttonTertiary() {
-  return {
-    '&-tertiary': {
-      '@apply text-dark-secondary': {},
-      '@apply bg-tertiary-surface': {},
-      /* hover */
-      '@apply hover:bg-tertiary-surface-hover': {},
-
-      // State
-      '&.sk-btn-disabled, &[aria-disabled="true"]': {
-        '@apply disabled:bg-tertiary-surface-disabled bg-tertiary-surface-disabled disabled:border-transparent border-transparent !important':
-          {},
-      },
-
-      '&[data-inverted="true"]': {
-        '@apply text-inverted-dark-secondary': {},
-        '@apply bg-inverted-tertiary-surface': {},
-        /* hover */
-        '@apply hover:bg-inverted-tertiary-surface-hover': {},
-        '&.sk-btn-disabled, &[aria-disabled="true"]': {
-          '@apply disabled:bg-inverted-tertiary-surface-disabled bg-inverted-tertiary-surface-disabled disabled:border-transparent border-transparent !important':
-            {},
-        },
-      },
-    },
-  };
-}
-function buttonGhost() {
-  return {
-    '&-ghost': {
-      '@apply text-dark-secondary': {},
-      '@apply bg-transparent': {},
-      '@apply border-transparent': {},
-      /* hover */
-      '@apply hover:bg-transparent': {},
-      '@apply hover:border-transparent': {},
-
-      // State
-      '&.sk-btn-disabled, &[aria-disabled="true"]': {
-        '@apply disabled:bg-transparent bg-transparent disabled:border-transparent border-transparent !important': {},
-      },
-
-      '&[data-inverted="true"]': {
-        '@apply text-inverted-dark-secondary': {},
-      },
-    },
-  };
-}
-
-function buttonLink(colors) {
-  return {
-    '&-link': {
-      '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {},
-      '&.active': {
-        '@apply underline': {},
-      },
-      // dark colors
-      '@apply dark:text-neutral-200': {},
-      '@apply dark:active:text-neutral-500': {},
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply text-${color}-text active:text-${color}-text`]: {},
-            // dark colors
-          },
-        }),
-        {}
-      ),
-    },
-  };
-}
-
-module.exports = Button = (colors) => ({
-  '.sk-btn': {
-    '@apply box-border': {},
-    '@apply border-2 border-transparent': {},
-    '@apply cursor-pointer': {},
-    '@apply relative': {},
-    '@apply m-0': {},
-    '@apply px-24 py-8 gap-8': {},
-    '@apply inline-flex items-center justify-center flex-shrink-0 align-middle': {},
-    '@apply rounded-button': {},
-    transitionProperty: 'background-color, border-color, color, fill, stroke, box-shadow',
-    '@apply	duration-75 ease-out': {},
-    '@apply outline-none appearance-none select-none whitespace-nowrap': {},
-    '@apply focus-visible:outline-none': {},
-    '@apply focus-visible:ring': {},
-
-    "&[data-rounded='true']": {
-      '@apply rounded-circular': {},
-    },
-
-    // sizing
-    '&-sm': {
-      '@apply text-label-small': {},
-      '@apply px-14 py-8 gap-6': {},
-      '@apply max-h-[3.2rem] h-[3.2rem]': {},
-      '@apply rounded-button-sm': {},
-      svg: {
-        '@apply h-[1.6rem] w-[1.6rem]': {},
-      },
-    },
-
-    '&-md': {
-      '@apply text-label-medium': {},
-      '@apply px-18 py-8 gap-8': {},
-      '@apply max-h-[4rem] h-[4rem]': {},
-      '@apply rounded-button-md': {},
-      svg: {
-        '@apply h-[1.8rem] w-[1.8rem]': {},
-      },
-    },
-
-    '&-lg': {
-      '@apply text-label-large': {},
-      '@apply px-24 py-8 gap-8': {},
-      '@apply max-h-[4.8rem] h-[4.8rem]': {},
-      '@apply rounded-button-lg': {},
-      svg: {
-        '@apply h-[2rem] w-[2rem]': {},
-      },
-    },
-
-    // State
-    '&-disabled, &[aria-disabled="true"]': {
-      '@apply shadow-none disabled:shadow-none disabled:cursor-default cursor-default': {},
-      '@apply disabled:text-dark-disabled text-dark-disabled disabled:bg-primary-surface-disabled bg-primary-surface-disabled disabled:border-transparent border-transparent !important':
-        {},
-      '&[data-inverted="true"]': {
-        '@apply disabled:text-inverted-dark-disabled text-inverted-dark-disabled disabled:bg-inverted-primary-surface-disabled bg-inverted-primary-surface-disabled disabled:border-transparent border-transparent !important':
-          {},
-      },
-    },
-
-    // variants
-    ...buttonPrimary(colors),
-    ...buttonSecondary(),
-    ...buttonTertiary(),
-    ...buttonGhost(),
-    ...buttonLink(colors),
-
-    '.btn-has-icon': {
-      '&-left': {
-        '@apply h-full flex items-center justify-center -ml-2': {},
-        '.sk-icon': {
-          '@apply bg-transparent': {},
-          color: 'currentColor',
-        },
-      },
-      '&-right': {
-        '@apply h-full flex items-center justify-center -mr-2': {},
-        '.sk-icon': {
-          '@apply bg-transparent': {},
-          color: 'currentColor',
-        },
-      },
-    },
-    '&-lg .btn-has-icon-left': {
-      '@apply -ml-4': {},
-    },
-    '&-lg .btn-has-icon-right': {
-      '@apply -mr-4': {},
-    },
-    '&[data-icon=true]': {
-      '@apply p-0': {},
-
-      '.sk-icon': {
-        '@apply bg-transparent': {},
-        color: 'currentColor',
-      },
-
-      "&[data-rounded='true']": {
-        '@apply rounded-full': {},
-      },
-
-      '&.sk-btn-sm': {
-        minWidth: '3.2rem',
-        width: '3.2rem',
-        maxWidth: '3.2rem',
-        svg: {
-          '@apply h-[2rem] w-[2rem]': {},
-        },
-      },
-
-      '&.sk-btn-md': {
-        minWidth: '4rem',
-        width: '4rem',
-        maxWidth: '4rem',
-        svg: {
-          '@apply h-[2rem] w-[2rem]': {},
-        },
-      },
-
-      '&.sk-btn-lg': {
-        minWidth: '4.8rem',
-        width: '4.8rem',
-        maxWidth: '4.8rem',
-        svg: {
-          '@apply h-[2.4rem] w-[2.4rem]': {},
-        },
-      },
-      '.btn-has-icon': {
-        '&-left': {
-          '@apply m-0': {},
-        },
-        '&-right': {
-          '@apply m-0': {},
-        },
-      },
-    },
-  },
-});