@sk-web-gui/core 1.0.2 → 1.1.0

package/src/components/popup-menu.js

@@ -1,111 +0,0 @@
-module.exports = PopupMenu = () => ({
-  '.sk-popup-menu-items': {
-    '&[data-position="left"]': {
-      '@apply mt-0 mr-8 right-[100%]': {},
-      '&[data-align="end"]': {
-        '@apply bottom-0': {},
-      },
-      '&[data-align="start"]': {
-        '@apply top-0': {},
-      },
-    },
-    '&[data-position="right"]': {
-      '@apply mt-0 ml-8 left-[100%]': {},
-      '&[data-align="end"]': {
-        '@apply bottom-0': {},
-      },
-      '&[data-align="start"]': {
-        '@apply top-0': {},
-      },
-    },
-    '&[data-position="over"]': {
-      '@apply mt-0 mb-8 bottom-[100%]': {},
-      '&[data-align="end"]': {
-        '@apply right-0': {},
-      },
-      '&[data-align="start"]': {
-        '@apply left-0': {},
-      },
-    },
-    '&[data-position="under"]': {
-      '&[data-align="end"]': {
-        '@apply right-0': {},
-      },
-      '&[data-align="start"]': {
-        '@apply left-0': {},
-      },
-    },
-    '@apply absolute flex flex-col justify-start items-start mt-8': {},
-    '@apply w-max': {},
-    '@apply rounded-utility': {},
-    '@apply bg-background-100': {},
-    '@apply z-10': {},
-    '@apply p-8 gap-4': {},
-    '@apply shadow-100': {},
-    '@apply border-0': {},
-    '@apply focus-within:border-0': {},
-    '@apply focus:outline-0 focus-visible:outline-0 focus-visible:ring': {},
-
-    '.sk-popup-menu-item': {
-      '@apply w-full': {},
-      '@apply h-[4rem]': {},
-      '@apply min-h-[4rem]': {},
-      '@apply bg-transparent hover:bg-primitives-gray-200': {},
-      '@apply dark:hover:bg-primitives-overlay-lighten-1': {},
-      '@apply cursor-pointer': {},
-      '@apply flex flex-row shrink-0': {},
-      '@apply pl-8 pr-32 py-4 gap-12': {},
-
-      '@apply rounded-utility': {},
-      '@apply text-body font-normal': {},
-      '&.active, &:active': {
-        '@apply bg-primitives-gray-200': {},
-        '@apply dark:bg-primitives-overlay-lighten-1': {},
-      },
-      svg: {
-        '@apply w-[2rem] h-[2rem]': {},
-      },
-
-      '@apply justify-start': {},
-
-      '@apply border-0': {},
-      '@apply items-center': {},
-      '@apply no-underline': {},
-    },
-    '&-group': {
-      '@apply w-full flex flex-col border-b-1 border-divider pb-4 gap-4': {},
-      '&:first-child': {
-        '@apply pt-0': {},
-      },
-      '&:last-child': {
-        '@apply border-0 pb-0': {},
-      },
-      '> *': {
-        '@apply pl-8 pr-32 py-4 gap-12': {},
-      },
-    },
-    '&-sm': {
-      '@apply p-8 gap-6': {},
-
-      '.sk-popup-menu-item': {
-        '@apply h-[3.2rem]': {},
-        '@apply min-h-[3.2rem]': {},
-        '@apply gap-10 pl-8 pr-24 py-4': {},
-
-        '@apply text-small': {},
-        '&-group': {
-          '@apply gap-6 pb-6': {},
-          '> *': {
-            '@apply gap-10 pl-8 pr-24 py-4': {},
-          },
-        },
-        svg: {
-          '@apply w-[1.8rem] h-[1.8rem]': {},
-        },
-      },
-    },
-    '&.right': {
-      '@apply right-0': {},
-    },
-  },
-});

package/src/components/progress-bar.js

@@ -1,31 +0,0 @@
-module.exports = ProgressBar = (colors) => ({
-  '.sk-progress-bar': {
-    '@apply flex h-[.4rem] rounded-circular bg-background-color-mixin-2': {},
-
-    '&-fill': {
-      '@apply rounded-circular': {},
-    },
-
-    ...colors.reduce(
-      (styles, color) => ({
-        ...styles,
-        [`&[data-color="${color}"]`]: {
-          '.sk-progress-bar-fill': {
-            [`@apply bg-${color}-surface-primary`]: {},
-          },
-
-          '&[data-accent="true"]': {
-            [`@apply bg-inverted-${color}-surface-primary`]: {},
-          },
-        },
-      }),
-      {}
-    ),
-
-    "&[data-color='tertiary']": {
-      '.sk-progress-bar-fill': {
-        [`@apply bg-primary-surface`]: {},
-      },
-    },
-  },
-});

package/src/components/progress-stepper.js

@@ -1,50 +0,0 @@
-module.exports = ProgressStepper = () => ({
-  '.sk-progress-stepper': {
-    '@apply flex justify-between': {},
-    hr: {
-      '@apply w-full mt-[1.9rem]': {},
-    },
-    '&-step': {
-      '@apply flex flex-col items-center': {},
-      '@apply gap-4': {},
-      '@apply w-auto': {},
-      '@apply shrink-0': {},
-      '@apply text-base leading-base text-dark-primary font-normal': {},
-      svg: {
-        '@apply w-20 h-20': {},
-      },
-      '&-wrapper': {
-        '@apply flex flex-row shrink w-full gap-4': {},
-        hr: {
-          '@apply w-full grow shrink mt-[1.9rem]': {},
-        },
-      },
-      '&-box': {
-        '@apply box-border': {},
-        '@apply shrink-0': {},
-        '@apply h-[4rem] w-[4rem]': {},
-        '@apply bg-secondary-surface': {},
-        '@apply flex justify-center items-center': {},
-        '@apply text-label-medium': {},
-        '@apply border-2 border-secondary-outline': {},
-        '@apply text-dark-secondary': {},
-        '@apply rounded-button-sm md:rounded-button-md xl:rounded-button-lg': {},
-      },
-      '&[data-progress="current"]': {
-        '@apply font-bold': {},
-        '.sk-progress-stepper-step-box': {
-          '@apply border-vattjom-surface-primary': {},
-          '@apply bg-vattjom-surface-primary': {},
-          '@apply text-vattjom-text-secondary': {},
-        },
-      },
-      '&[data-progress="done"]': {
-        '.sk-progress-stepper-step-box': {
-          '@apply border-success-surface-primary': {},
-          '@apply bg-success-surface-primary': {},
-          '@apply text-success-text-secondary': {},
-        },
-      },
-    },
-  },
-});

package/src/components/radio.js

@@ -1,138 +0,0 @@
-module.exports = Radio = () => ({
-  '.sk-form-radio': {
-    backgroundImage: 'none',
-
-    '@apply relative': {},
-    '@apply box-border': {},
-    '@apply bg-primitives-overlay-lighten-10': {},
-    '@apply dark:bg-primitives-overlay-darken-6': {},
-    '@apply border-1': {},
-    '@apply border-primitives-overlay-darken-6': {},
-    '@apply dark:border-primitives-overlay-lighten-6': {},
-    '@apply m-0': {},
-    '@apply h-24 w-24': {},
-
-    //Hover
-    '@apply hover:after:content-[""]': {},
-    '@apply hover:border-primitives-overlay-darken-8': {},
-    '@apply hover:dark:border-primitives-overlay-lighten-4': {},
-    '&::after': {
-      '@apply absolute': {},
-      '@apply rounded-full': {},
-      '@apply bg-dark-placeholder': {},
-      '@apply m-[0.5rem]': {},
-      '@apply top-0 left-0 bottom-0 right-0': {},
-    },
-
-    //Focus
-    '@apply focus-visible:ring': {},
-    '@apply focus-visible:bg-background-content': {},
-    '@apply focus-visible:border-background-content': {},
-    '@apply focus-visible:hover:border-background-content': {},
-
-    //Invalid
-    '&[aria-invalid="true"]': {
-      '@apply border-2': {},
-      '@apply border-error-surface-primary': {},
-      '@apply hover:border-2': {},
-      '@apply hover:border-error-surface-primary': {},
-    },
-
-    //Checked
-    '&:checked, &[checked="true"]': {
-      '@apply bg-primitives-overlay-lighten-10': {},
-      '@apply dark:bg-primitives-overlay-darken-6': {},
-      '@apply hover:bg-primitives-overlay-lighten-10': {},
-      '@apply hover:dark:bg-primitives-overlay-darken-6': {},
-      '@apply focus:bg-primitives-overlay-lighten-10': {},
-      '@apply focus:dark:bg-primitives-overlay-darken-6': {},
-      '@apply text-primitives-overlay-lighten-10': {},
-      '@apply dark:text-primitives-overlay-darken-6': {},
-      '@apply hover:text-primitives-overlay-lighten-10': {},
-      '@apply hover:dark:text-primitives-overlay-darken-6': {},
-      '@apply focus:text-primitives-overlay-lighten-10': {},
-      '@apply focus:dark:text-primitives-overlay-darken-6': {},
-      '@apply border-primitives-overlay-darken-6': {},
-      '@apply focus:border-primitives-overlay-darken-6': {},
-      '@apply dark:border-primitives-overlay-lighten-6': {},
-      '@apply hover:border-primitives-overlay-darken-8': {},
-      '@apply hover:dark:border-primitives-overlay-lighten-4': {},
-      '@apply focus:outline-0': {},
-      '@apply focus:ring-0 focus:ring-offset-0': {},
-      '@apply focus-visible:ring': {},
-      '@apply focus-visible:border-transparent': {},
-      '@apply after:content-[""]': {},
-      '&[aria-invalid="true"]': {
-        '@apply border-2': {},
-        '@apply border-error-surface-primary': {},
-        '@apply hover:border-2': {},
-        '@apply hover:border-error-surface-primary': {},
-      },
-      '&::after': {
-        '@apply bg-dark-primary': {},
-      },
-    },
-
-    '&:active': {
-      '@apply ring-0 ring-offset-0': {},
-    },
-
-    //Disabled
-    '&:disabled, &[disabled="true"]': {
-      '@apply border-primitives-overlay-darken-3': {},
-      '@apply dark:border-primitives-overlay-lighten-3': {},
-      '@apply hover:border-primitives-overlay-darken-3': {},
-      '@apply hover:dark:border-primitives-overlay-lighten-3': {},
-      '@apply bg-background-200': {},
-      '@apply hover:bg-background-200': {},
-      '@apply cursor-not-allowed': {},
-      '&:not(:checked):not([checked="true"]):after': {
-        '@apply hidden': {},
-      },
-      '&:checked, &[checked="true"]': {
-        '&::after': {
-          '@apply bg-dark-disabled': {},
-        },
-      },
-    },
-
-    '&-label': {
-      '@apply inline-flex align-top items-center': {},
-      '@apply font-normal': {},
-      '@apply p-2': {},
-      '&-sm': {
-        '@apply text-small': {},
-        '@apply h-[2.8rem]': {},
-        '@apply gap-10': {},
-      },
-      '&-md': {
-        '@apply text-base': {},
-        '@apply h-[2.8rem]': {},
-        '@apply gap-10': {},
-      },
-      '&-lg': {
-        '@apply text-large': {},
-        '@apply h-[3rem]': {},
-        '@apply gap-12': {},
-      },
-      '&[data-disabled="true"]': {
-        '@apply text-dark-disabled': {},
-      },
-    },
-    '&-group': {
-      '@apply flex flex-row': {},
-      '&[data-direction="column"]': {
-        '@apply flex-col': {},
-      },
-      '&-sm': {
-        '@apply gap-12': {},
-      },
-      '&-md': {
-        '@apply gap-16': {},
-      },
-      '&-lg': {
-        '@apply gap-16': {},
-      },
-    },
-  },
-});

package/src/components/search-field.js

@@ -1,20 +0,0 @@
-module.exports = SearchField = () => ({
-  '.sk-search-field': {
-    '&-md': {
-      '.sk-search-field-icon': {
-        '@apply w-[2rem] h-[2rem]': {},
-        svg: {
-          '@apply w-[2rem] h-[2rem]': {},
-        },
-      },
-    },
-    '&-lg': {
-      '.sk-search-field-icon': {
-        '@apply w-[2.2rem] h-[2.2rem]': {},
-        svg: {
-          '@apply w-[2.2rem] h-[2.2rem]': {},
-        },
-      },
-    },
-  },
-});

package/src/components/select.js

@@ -1,203 +0,0 @@
-function chevronDown(color) {
-  //TODO: This wont work with CSS variables. The colors are set here and wont work with themes
-  return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='${color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6' /></svg>`;
-}
-
-function tertiary() {
-  return {
-    '&-tertiary': {
-      '@apply border-2': {},
-
-      '@apply bg-tertiary-surface': {},
-      '@apply hover:bg-tertiary-surface-hover': {},
-      '@apply border-transparent': {},
-
-      '&.sk-form-select-sm': {
-        //Padding - border width
-        '@apply pl-12': {},
-        //Background position - border width
-        '@apply bg-right-8': {},
-
-        //Padding + icon width - border width
-        '@apply pr-[3.2rem]': {},
-      },
-      '&.sk-form-select-md': {
-        //Padding - border width
-        '@apply pl-16': {},
-        //Background position - border width
-        '@apply bg-right-12': {},
-        //Padding + icon width - border width
-        '@apply pr-[4.2rem]': {},
-      },
-      '&.sk-form-select-lg': {
-        //Padding - border width
-        '@apply pl-18': {},
-        //Background position - border width
-        '@apply bg-right-16': {},
-        //Padding + icon width - border width
-        '@apply pr-[4.8rem]': {},
-      },
-      //Disabled
-      '&[aria-disabled="true"]': {
-        '@apply bg-tertiary-surface-disabled': {},
-      },
-    },
-  };
-}
-
-function primary() {
-  return {
-    '&-primary': {
-      '@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 bg-primitives-overlay-lighten-10': {},
-      '@apply dark:bg-primitives-overlay-darken-6': {},
-      '@apply hover:bg-primitives-overlay-lighten-10': {},
-      '@apply dark:hover:bg-primitives-overlay-darken-6': {},
-
-      '&.sk-form-select-sm': {
-        //Padding - border width
-        '@apply pl-[1.3rem]': {},
-        //Background position - border width
-        '@apply bg-[center_right_0.9rem]': {},
-        //Padding + icon width - border width
-        '@apply pr-[3.3rem]': {},
-
-        '&[aria-invalid="true"]': {
-          //Padding - border width
-          '@apply pl-12': {},
-          //Background position - border width
-          '@apply bg-right-8': {},
-          //Padding + icon width - border width
-          '@apply pr-[3.2rem]': {},
-        },
-      },
-      '&.sk-form-select-md': {
-        //Padding - border width
-        '@apply pl-[1.7rem]': {},
-        //Background position - border width
-        '@apply bg-[center_right_1.3rem]': {},
-        //Padding + icon width - border width
-        '@apply pr-[4.3rem]': {},
-
-        '&[aria-invalid="true"]': {
-          //Padding - border width
-          '@apply pl-16': {},
-          //Background position - border width
-          '@apply bg-right-12': {},
-          //Padding + icon width - border width
-          '@apply pr-[4.2rem]': {},
-        },
-      },
-      '&.sk-form-select-lg': {
-        //Padding - border width
-        '@apply pl-[1.9rem]': {},
-        //Background position - border width
-        '@apply bg-[center_right_1.7rem]': {},
-        //Padding + icon width - border width
-        '@apply pr-[4.9rem]': {},
-
-        '&[aria-invalid="true"]': {
-          //Padding - border width
-          '@apply pl-18': {},
-          //Background position - border width
-          '@apply bg-right-16': {},
-          //Padding + icon width - border width
-          '@apply pr-[4.8rem]': {},
-        },
-      },
-      //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': {},
-      },
-    },
-  };
-}
-
-module.exports = Select = () => ({
-  '.sk-form-select': {
-    '@apply h-fit': {},
-    '@apply w-fit': {},
-    '@apply box-border': {},
-    '@apply focus:border-transparent': {},
-    '@apply rounded-button': {},
-    '@apply text-dark-secondary': {},
-    '@apply placeholder:text-dark-secondary': {},
-    '@apply hover:placeholder:text-dark-primary': {},
-    '@apply focus:placeholder:text-dark-primary': {},
-    '@apply hover:text-dark-primary': {},
-    '@apply focus:text-dark-primary': {},
-    '@apply py-6': {},
-    '@apply focus:ring focus:ring-ring focus:ring-offset': {},
-    '@apply focus:outline-0': {},
-
-    backgroundImage: [`url("data:image/svg+xml;utf-8,${chevronDown('rgb(68,68,80)')}")`],
-    '&:hover, &:focus': {
-      backgroundImage: [`url("data:image/svg+xml;utf-8,${chevronDown('rgb(28,28,40)')}")`],
-    },
-
-    ...tertiary(),
-    ...primary(),
-
-    //Droprown
-    '*': {
-      '@apply bg-background-content': {},
-    },
-
-    //Invalid
-    '&[aria-invalid="true"]': {
-      '@apply border-2 border-error-surface-primary': {},
-    },
-
-    //Disabled
-    '&[aria-disabled="true"]': {
-      '@apply opacity-100': {},
-      '@apply text-dark-disabled': {},
-      '@apply placeholder:text-dark-disabled': {},
-      '@apply bg-tertiary-surface-disabled': {},
-      backgroundImage: [`url("data:image/svg+xml;utf-8,${chevronDown('rgba(28,28,40, 0.5)')}")`],
-    },
-
-    '&-sm': {
-      '@apply h-[3.2rem]': {},
-      '@apply text-label-small': {},
-      '@apply rounded-button-sm': {},
-      '*': {
-        '@apply text-input-small': {},
-      },
-    },
-    '&-md': {
-      '@apply h-[4rem]': {},
-      '@apply text-label-medium': {},
-      '@apply rounded-button-md': {},
-      '*': {
-        '@apply text-input-medium': {},
-      },
-    },
-    '&-lg': {
-      '@apply h-[4.8rem]': {},
-      '@apply text-label-large': {},
-      '@apply rounded-button-lg': {},
-      '*': {
-        '@apply text-input-large': {},
-      },
-    },
-  },
-  '.dark .sk-form-select': {
-    backgroundImage: [`url("data:image/svg+xml;utf-8,${chevronDown('rgb(229,229,229)')}")`],
-    '&:hover, &:focus': {
-      backgroundImage: [`url("data:image/svg+xml;utf-8,${chevronDown('rgb(255,255,255)')}")`],
-    },
-    '&[aria-disabled="true"]': {
-      backgroundImage: [`url("data:image/svg+xml;utf-8,${chevronDown('rgba(255,255,255, 0.64)')}")`],
-    },
-  },
-});