@sk-web-gui/core 0.1.93 → 1.0.1

package/src/components/cookie-consent.js

@@ -1,30 +1,45 @@
 module.exports = CookieConsent = () => ({
-  '.cookie-consent': {
-    '@apply min-w-full fixed flex justify-center z-10 bottom-0 left-0 right-0 bg-white': {},
+  '.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-primary-active absolute right-8 top-6 border border-transparent focus-visible:border-black flex self-center':
-        {},
+      // '@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': {},
+        // '@apply !text-2xl': {},
       },
     },
 
     '&-content-wrapper': {
-      '@apply flex flex-col container py-12 px-4 bg-white relative': {},
+      '@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-2xl leading-2xl mb-1 mt-4 break-words': {},
+      '@apply text-h2-sm md:text-h2-md xl:text-h2-lg': {},
+    },
+    '&-custom-wrapper': {
+      '@apply flex flex-col gap-24': {},
     },
 
     '&-description': {
-      '@apply text-base leading-base mb-8': {},
+      '@apply text-base flex flex-col gap-8': {},
     },
 
     '&-btn-wrapper': {
-      '@apply flex flex-col space-y-4 lg:block lg:space-y-0 lg:space-x-4': {},
+      '@apply flex flex-col md:flex-row gap-12 flex-wrap': {},
     },
   },
 });

package/src/components/dialog.js

@@ -1,12 +1,5 @@
 module.exports = Dialog = () => ({
-  '.dialog': {
-    '@apply w-fit max-w-prose': {},
-    '&-buttons': {
-      '@apply grid grid-flow-col gap-lg place-content-stretch': {},
-      gridAutoColumns: 'minmax(0, 1fr)',
-    },
-    '&-content': {
-      '@apply text-center mb-lg': {},
-    },
+  '.sk-dialog': {
+    '@apply w-fit max-w-prose md:min-w-[40rem]': {},
   },
 });

package/src/components/divider.js

@@ -1,12 +1,52 @@
 module.exports = Divider = () => ({
-  '.divider': {
-    '@apply border-0 border-gray-stroke': {},
-    //borderColor: "inherit",
+  '.sk-divider': {
+    '@apply border-t-0 border-divider': {},
     '&-vertical': {
-      '@apply border-l border-solid h-auto mx-2': {},
+      '@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 border-b border-solid w-auto my-2': {},
+      '@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': {},
+        },
+      },
     },
   },
 });

package/src/components/dot.js

@@ -8,7 +8,7 @@ module.exports = Dot = (colors) => ({
         (styles, color) => ({
           ...styles,
           [`&[data-color="${color}"]`]: {
-            [`@apply bg-${color}-500`]: {},
+            [`@apply bg-${color}-surface-primary`]: {},
           },
         }),
         {}
@@ -23,8 +23,7 @@ module.exports = Dot = (colors) => ({
         (styles, color) => ({
           ...styles,
           [`&.dot-bordered[data-color="${color}"]`]: {
-            [`@apply border-${color}-100`]: {},
-            [`@apply dark:border-${color}-300`]: {},
+            [`@apply border-${color}-background-200`]: {},
           },
         }),
         {}
@@ -38,7 +37,7 @@ module.exports = Dot = (colors) => ({
         (styles, color) => ({
           ...styles,
           [`&[data-color="${color}"]`]: {
-            [`@apply border-${color}-500`]: {},
+            [`@apply border-${color}-surface-primary`]: {},
           },
         }),
         {}

package/src/components/filter.js

@@ -0,0 +1,16 @@
+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,41 +1,28 @@
-module.exports = Footer = (colors) => ({
-  '.footer': {
-    '&-innerwrapper': {
-      '@apply bg-gray text-white py-12': {},
+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': {},
 
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply bg-${color}`]: {},
-          },
-        }),
-        {}
-      ),
+    '&-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 px-md md:flex items-center justify-center m-auto': {},
+      '@apply flex flex-row gap-36 w-fit grow-0 flex-wrap': {},
     },
-
-    '&-bottomlinks': {
-      '@apply bg-gray-middle text-body py-md': {},
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply bg-${color}`]: {},
-          },
-        }),
-        {}
-      ),
-
-      '&-container': {
-        '@apply px-md flex items-center items-center justify-center m-auto md:space-x-10 flex-col md:flex-row': {},
-        '> *': {
-          '@apply text-body text-sm leading-sm py-sm': {},
-        },
+    '&-list': {
+      '@apply flex flex-col gap-16': {},
+      '&-item': {
+        '@apply flex flex-row justify-start items-center gap-8': {},
       },
     },
   },

package/src/components/forms.js

@@ -1,373 +1,27 @@
-function fieldOutline(colors) {
-  return {
-    '&-outline': {
-      '@apply border shadow-sm border-gray-stroke': {},
-      '@apply text-gray bg-white': {},
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},
-            [`@apply dark:focus-visible:border-${color} dark:focus-visible:ring-${color}`]: {},
-          },
-        }),
-        {}
-      ),
-
-      '&[aria-invalid=true]': {
-        '@apply border-error ring-error': {},
-
-        '&:focus-visible': {
-          '@apply border-error ring-error': {},
-        },
-      },
-    },
-  };
-}
-
-function fieldSolid(colors) {
-  return {
-    '&-solid': {
-      '@apply border border-transparent': {},
-      '@apply text-black bg-gray-light': {},
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},
-            [`@apply dark:focus-visible:border-${color} dark:focus-visible:ring-${color}`]: {},
-          },
-        }),
-        {}
-      ),
-
-      '&[aria-invalid=true]': {
-        '@apply border-error ring-error': {},
-
-        '&:focus-visible': {
-          '@apply border-error ring-error': {},
-        },
-      },
-    },
-  };
-}
-
-function formControl() {
-  return {
-    '.form-control': {
-      '@apply w-full relative': {},
-    },
-    '.form-helper-text': {
-      '@apply mt-1.5 leading-none text-gray dark:text-white/60': {},
-    },
-    '.form-error-message': {
-      '@apply mt-1.5 leading-none flex items-center text-sm text-error': {},
-    },
-    '.form-label': {
-      '@apply text-sm font-medium text-left align-middle block mb-1.5': {},
-    },
-    '.form-required-indicator': {
-      '@apply ml-1 text-sm': {},
-      '--tw-text-opacity': '1',
-      color: 'rgba(239, 68, 68, var(--tw-text-opacity))',
-      '.dark &': {
-        '--tw-text-opacity': '1',
-        color: 'rgba(252, 165, 165, var(--tw-text-opacity))',
-      },
-    },
-  };
-}
-
-function formInputGroup() {
-  return {
-    '.form-input-group': {
-      '@apply flex relative bg-white h-fit w-full rounded-[0.2rem] border border-gray-stroke': {},
-
-      '&:focus-within': {
-        '@apply border border-primary ring-primary ring-1': {},
-      },
-
-      '> *': {
-        '@apply border-0 ring-0 shadow-none': {},
-
-        '&:focus': {
-          '@apply ring-0': {},
-        },
-      },
-
-      '&-sm': {
-        '@apply min-h-[4rem] max-h-[4rem]': {},
-
-        '.form-field': {
-          '@apply min-h-[3.8rem] max-h-[3.8rem]': {},
-        },
-      },
-
-      '&-md': {
-        '@apply min-h-[4.4rem] max-h-[4.4rem]': {},
-
-        '.form-field': {
-          '@apply min-h-[4.2rem] max-h-[4.2rem]': {},
-        },
-      },
-
-      '&-lg': {
-        '@apply min-h-[4.8rem] max-h-[4.8rem]': {},
-
-        '.form-field': {
-          '@apply min-h-[4.6rem] max-h-[4.6rem]': {},
-        },
-      },
-
-      "&[data-rounded='true']": {
-        '@apply rounded-[3.2rem]': {},
-
-        '> *:first-child': {
-          '@apply rounded-[3.2rem]': {},
-        },
-
-        '> *:last-child': {
-          '@apply rounded-[3.2rem]': {},
-        },
-      },
-
-      '&[aria-invalid=true]': {
-        '@apply border-error ring-error': {},
-      },
-    },
-
-    '.form-input-element': {
-      '@apply flex items-center justify-center absolute z-base top-0': {},
-
-      '&-sm': {
-        '@apply text-xs h-7 w-7': {},
-      },
-
-      '&-md': {
-        '@apply text-sm h-8 w-8': {},
-      },
-
-      '&-lg': {
-        '@apply text-base h-10 w-10': {},
-      },
-    },
-
-    '.form-input-addon': {
-      '@apply flex items-center w-auto shadow-sm whitespace-nowrap': {},
-      '@apply text-gray bg-neutral-50': {},
-      // dark colors
-      '@apply dark:border-neutral-700': {},
-      '@apply dark:text-neutral-100 dark:bg-white/30': {},
-
-      '&-sm': {
-        '@apply px-3 text-xs': {},
-      },
-
-      '&-md': {
-        '@apply px-4 text-sm': {},
-      },
-
-      '&-lg': {
-        '@apply px-4 text-base': {},
-      },
-
-      '&-left': {
-        '@apply rounded-r-none': {},
-      },
-
-      '&-right': {
-        '@apply rounded-l-none': {},
-      },
-    },
-    '.form-input-addin': {
-      '@apply flex items-center w-auto whitespace-nowrap': {},
-      '@apply text-body': {},
-
-      '&-sm': {
-        '@apply px-[1.44rem] text-xs': {},
-      },
-
-      '&-md': {
-        '@apply px-[1.6rem] text-sm': {},
-      },
-
-      '&-lg': {
-        '@apply px-[1.76rem] text-base': {},
-      },
-
-      '&-left': {
-        '@apply pr-0 rounded-r-none': {},
-      },
-
-      '&-right': {
-        '@apply pl-0 rounded-l-none': {},
-      },
-    },
-  };
-}
-
-module.exports = Forms = (colors) => ({
-  '.form-field': {
-    '@apply rounded-[0.2rem] placeholder-gray-stroke': {},
-    '@apply relative w-full min-w-0 inline-flex items-center appearance-none focus-visible:outline-none': {},
-    '@apply transition-colors	duration-75 ease-out': {},
+module.exports = Forms = () => ({
+  '.sk-form-control': {
+    '@apply flex flex-col gap-8 w-fit': {},
+  },
 
+  '.sk-form-label': {
+    '@apply font-bold': {},
     '&-sm': {
-      '@apply text-sm leading-sm': {},
-      '@apply py-0 px-[1.44rem] min-h-[4rem] max-h-[4rem]': {},
+      '@apply text-label-small': {},
     },
-
     '&-md': {
-      '@apply text-base leading-base': {},
-      '@apply py-0 px-[1.6rem] min-h-[4.4rem] max-h-[4.4rem]': {},
+      '@apply text-label-medium': {},
     },
-
     '&-lg': {
-      '@apply text-base leading-lg': {},
-      '@apply py-0 px-[1.76rem] min-h-[4.8rem] max-h-[4.8rem]': {},
-    },
-
-    '&-disabled, &&-disabled': {
-      '@apply disabled:cursor-not-allowed cursor-not-allowed': {},
-      '@apply disabled:bg-gray-lighter bg-gray-lighter': {},
-    },
-
-    "&[data-rounded='true']": {
-      '@apply rounded-[3.2rem]': {},
-    },
-
-    // variants
-    ...fieldOutline(colors),
-    ...fieldSolid(colors),
-  },
-
-  '.form-button': {
-    '@apply text-[1.1433em] border-0 ml-auto text-primary hover:text-white': {},
-
-    '&[data-icon=true]': {
-      '@apply p-[0.2em]': {},
-    },
-
-    '&-icon': {
-      '@apply inline-flex': {},
-    },
-
-    '&-wrapper': {
-      '@apply flex items-center absolute inset-y-0 right-sm': {},
-    },
-  },
-
-  '.form-textarea': {
-    maxHeight: 'none',
-    '&.form-field': {
-      '&-sm': {
-        '@apply py-[0.85rem] min-h-[4rem]': {},
-      },
-
-      '&-md': {
-        '@apply py-[0.9rem] min-h-[4.4rem]': {},
-      },
-
-      '&-lg': {
-        '@apply py-[1.1rem] min-h-[4.8rem]': {},
-      },
-    },
-    '&-counter': {
-      '@apply mt-xs text-right': {},
-    },
-  },
-  '.dropdown-search': {
-    '@apply block w-full relative': {},
-    '&-results': {
-      '@apply w-full flex justify-between items-center': {},
-      '&-text': {
-        '@apply truncate text-left grow': {},
-      },
-      '&-counter': {
-        '@apply grow-0': {},
-      },
-    },
-
-    '&[data-expanded=true]': {
-      '.form-input-group[data-rounded=true]': {
-        '@apply rounded-t-[2rem] rounded-bl-none rounded-br-none': {},
-
-        '> *:first-child': {
-          '@apply rounded-t-[2rem] rounded-bl-none rounded-br-none': {},
-        },
-
-        '> *:last-child': {
-          '@apply rounded-t-[2rem] rounded-bl-none rounded-br-none': {},
-        },
-
-        '& ~ #dropdown-search-results': {
-          '@apply rounded-b-[1.6rem]': {},
-        },
-      },
+      '@apply text-label-large': {},
     },
   },
 
-  '.form-select-list-transition': {
-    '@apply absolute z-50 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm':
-      {},
-    '&.showabove': {
-      '@apply mb-1 bottom-full': {},
-    },
-    '&:not(.showabove)': {
-      '@apply mt-1 top-full': {},
-    },
+  'legend.sk-form-label': {
+    display: 'contents',
   },
 
-  '.form-select': {
-    '@apply justify-between items-center grow text-body bg-white caret-transparent select-none cursor-pointer border-gray-stroke':
-      {},
-    'background-image': 'none',
-    '&-wrapper': {
-      '@apply block w-full relative': {},
-    },
-    '&-icon': {
-      '@apply grow-0': {},
-    },
-    '&-list': {
-      '@apply z-10 absolute overflow-y-auto w-full bg-white mt-0 border border-gray-stroke border-t-0 border-b': {},
-      '&.showabove': {
-        '@apply border-t border-b-0': {},
-      },
-    },
-    '&-has-multiple-choices': {
-      '@apply flex w-full h-full justify-between items-center pr-md': {},
-    },
-    '&-multiple-chioces': {
-      '@apply truncate pr-md': {},
-    },
-
-    '&-option': {
-      '@apply text-body rounded-none cursor-default hover:text-white focus-visible:text-white hover:bg-primary focus-visible:bg-primary flex items-center':
-        {},
-
-      '&.multiple.selected': {
-        '@apply bg-background-one': {},
-      },
-      '&.active': {
-        '@apply bg-primary text-white': {},
-      },
-      '&.active.selected': {
-        '@apply bg-gray text-white': {},
-      },
-      '&.disabled': {
-        '@apply opacity-75 cursor-not-allowed hover:bg-white hover:text-black': {},
-      },
-      '&-remove-button': {
-        '@apply w-full flex justify-between items-center': {},
-        '&-text': {
-          '@apply truncate grow text-left': {},
-        },
-      },
-    },
+  '.sk-form-helper-text, .sk-form-error-message': {
+    '@apply font-normal': {},
+    '@apply text-small': {},
   },
-
-  ...formInputGroup(),
-  ...formControl(),
 });

package/src/components/header.js

@@ -1,35 +1,28 @@
-module.exports = Header = (colors) => ({
-  '.header': {
-    '@apply lg:border-t-8 lg:border-primary lg:static lg:w-auto lg:h-auto lg:min-h-0': {},
-
-    ...colors.reduce(
-      (styles, color) => ({
-        ...styles,
-        [`&[data-color="${color}"]`]: {
-          [`@apply border-${color}`]: {},
-        },
-      }),
-      {}
-    ),
-
-    [`&[data-color="none"]`]: {
-      [`@apply border-none`]: {},
-    },
+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 lg:h-[112px] shadow-lg relative mx-auto px-7 pt-[22px] pb-[8px] z-10': {},
+      '@apply flex flex-col gap-20 xl:gap-24': {},
     },
 
-    '&-content': {
-      '@apply flex items-center w-full justify-between m-auto flex-shrink-0 text-body max-w-[140rem]': {},
+    '&-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 lg:-mr-lg block flex-shrink lg:flex lg:items-center lg:w-auto': {},
+      '@apply hidden xl:flex-shrink md:flex xl:items-center xl:w-auto': {},
 
       '&-content': {
-        '@apply flex flex-grow lg:flex justify-end items-center lg:w-auto': {},
+        '@apply relative flex flex-grow justify-end items-center xl:w-auto': {},
       },
     },
+    '&-mobilemenu': {
+      '@apply block md:hidden relative': {},
+    },
   },
 });