@sk-web-gui/core 0.1.92 → 1.0.0

package/src/components/progress-bar.js

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,50 @@
+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,103 +1,137 @@
-module.exports = Radio = (colors) => ({
-  '.form-radio': {
-    '@apply shadow-sm': {},
-    backgroundColor: 'inherit',
-    '@apply border-neutral-300': {},
-    '&[aria-invalid=true]': {
-      '--tw-border-opacity': '1',
-      borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',
-    },
-    '&[aria-invalid=true]:hover': {
-      '--tw-border-opacity': '1',
-      'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))',
-    },
-    // dark colors
-    '@apply dark:border-neutral-400': {},
-    '.dark &[aria-invalid=true]': {
-      '--tw-border-opacity': '1',
-      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
-    },
-    '.dark &[aria-invalid=true]:hover': {
-      '--tw-border-opacity': '1',
-      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
-    },
+module.exports = Radio = () => ({
+  '.sk-form-radio': {
+    backgroundImage: 'none',
 
-    '@media (prefers-color-scheme: dark)': {
-      '&[aria-invalid=true]': {
-        '--tw-border-opacity': '1',
-        borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',
-      },
-      '&[aria-invalid=true]:hover': {
-        '--tw-border-opacity': '1',
-        'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))',
-      },
-    },
+    '@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': {},
 
-    '&:checked': {
-      borderColor: 'transparent',
+    //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': {},
     },
 
-    // colors
-    ...colors.reduce(
-      (styles, color) => ({
-        ...styles,
-        [`&[data-color="${color}"]`]: {
-          [`@apply text-${color}-600`]: {},
-          [`@apply focus-visible:border-${color}-600 focus-visible:ring-${color}-600`]: {},
-          [`@apply dark:text-${color}-500`]: {},
-          [`@apply dark:focus-visible:border-${color}-400 dark:focus-visible:ring-${color}-400`]: {},
-        },
-      }),
-      {}
-    ),
+    //Focus
+    '@apply focus-visible:ring': {},
+    '@apply focus-visible:bg-background-content': {},
+    '@apply focus-visible:border-background-content': {},
+    '@apply focus-visible:hover:border-background-content': {},
 
-    '@apply dark:focus-visible:ring-offset-neutral-900': {},
-
-    // sizing
-    '&-sm': {
-      '@apply w-3 h-3': {},
-    },
-
-    '&-md': {
-      '@apply w-4 h-4': {},
+    //Invalid
+    '&[aria-invalid="true"]': {
+      '@apply border-2': {},
+      '@apply border-error-surface-primary': {},
+      '@apply hover:border-2': {},
+      '@apply hover:border-error-surface-primary': {},
     },
 
-    '&-lg': {
-      '@apply w-5 h-5': {},
+    //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': {},
+      },
     },
 
-    '&-xl': {
-      '@apply w-6 h-6': {},
+    '&:active': {
+      '@apply ring-0 ring-offset-0': {},
     },
 
-    // disabled
-    '&-disabled': {
-      '@apply disabled:shadow-none disabled:border-neutral-300 disabled:bg-neutral-300 disabled:hover:text-neutral-300':
-        {},
-      '@apply dark:disabled:border-transparent dark:disabled:bg-white/20 dark:disabled:hover:text-white/20': {},
+    //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
     '&-label': {
-      '@apply ml-2 select-none text-sm': {},
-      '@apply text-body': {},
-      // dark colors
-      '@apply dark:text-neutral-100': {},
-
+      '@apply inline-flex align-top items-center': {},
+      '@apply font-normal': {},
+      '@apply p-2': {},
       '&-sm': {
-        '@apply text-xs': {},
+        '@apply text-small': {},
+        '@apply h-[2.8rem]': {},
+        '@apply gap-10': {},
       },
-
       '&-md': {
-        '@apply text-sm': {},
+        '@apply text-base': {},
+        '@apply h-[2.8rem]': {},
+        '@apply gap-10': {},
       },
-
       '&-lg': {
-        '@apply text-base': {},
+        '@apply text-large': {},
+        '@apply h-[3rem]': {},
+        '@apply gap-12': {},
       },
-
-      '&-xl': {
-        '@apply text-lg': {},
+      '&[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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,203 @@
+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)')}")`],
+    },
+  },
+});

package/src/components/side-menu.js

@@ -107,7 +107,7 @@ module.exports = Menu = () => ({
           },
 
           '& > .sk-sidemenu-wrapper::after': {
-            '@apply bg-info-light block relative w-full h-[44px]': {},
+            '@apply bg-info-surface-accent block relative w-full h-[44px]': {},
             content: "''",
           },
         },
@@ -138,7 +138,7 @@ module.exports = Menu = () => ({
       },
 
       '&-separator': {
-        '@apply text-svartvik-200': {},
+        '@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)`,
@@ -152,7 +152,7 @@ module.exports = Menu = () => ({
           '@apply border-t-0': {},
         },
         '> .sk-sidemenu-wrapper': {
-          '@apply h-[64px] max-h-[64px] border border-svartvik-200': {},
+          '@apply h-[64px] max-h-[64px] border border-divider': {},
 
           '> .sk-sidemenu-item-link': {
             '@apply  py-md': {},
@@ -169,16 +169,16 @@ module.exports = Menu = () => ({
         },
 
         '> .items': {
-          '@apply border-l border-r border-svartvik-200': {},
+          '@apply border-l border-r border-divider': {},
         },
 
         '&.open > .items': {
-          '@apply border-b border-svartvik-200': {},
+          '@apply border-b border-divider': {},
         },
 
         '&.separator': {
           '& + .lvl-0': {
-            '@apply border-t border-svartvik-200': {},
+            '@apply border-t border-divider': {},
           },
         },
 
@@ -195,7 +195,7 @@ module.exports = Menu = () => ({
         },
 
         '&.open > .sk-sidemenu-wrapper': {
-          '@apply border-b border-svartvik-200': {},
+          '@apply border-b border-divider': {},
         },
 
         '> .sk-sidemenu-wrapper > .sk-sidemenu-item-link': {

package/src/components/snackbar.js

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,23 @@
+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`]: {},
+          },
+        },
+      }),
+      {}
+    ),
+  },
+});