@sk-web-gui/core 0.1.92 → 1.0.0

package/src/components/comments.js

@@ -1,38 +1,38 @@
-module.exports = Comments = () => ({ 
-
-    '.comment-header': {
-        '@apply w-full flex items-center gap-8 p-16 border-b-4 border-gray-200': {},
-    },
-
-    '.comment-item':{
-        '@apply w-full': {},
-
-        '&-container': {
-            '@apply flex justify-between relative': {},
-
-            '&-textpic': {
-                '@apply flex gap-2': {},
-            },
-        },
-        '&-text': {
-            '@apply text-base font-bold mx-0 mb-0 mt-4': {},
-        },
-        '&-commentorpublished': {
-            '@apply float-right text-neutral-600 m-0': {},
-        },
-    },
-    '.comment-input':{
-        '@apply w-full flex gap-4 px-10 pt-8 pb-10': {},
-
-        '&-inactive': {
-            '@apply text-neutral-300 !text-3xl': {},
-        },
-
-        '&-active': {
-            '@apply text-primary !text-3xl': {},
-        }
-
-    },
-
-   
+module.exports = Comments = () => ({ 
+
+    '.comment-header': {
+        '@apply w-full flex items-center gap-8 p-16 border-b-4 border-gray-200': {},
+    },
+
+    '.comment-item':{
+        '@apply w-full': {},
+
+        '&-container': {
+            '@apply flex justify-between relative': {},
+
+            '&-textpic': {
+                '@apply flex gap-2': {},
+            },
+        },
+        '&-text': {
+            '@apply text-base font-bold mx-0 mb-0 mt-4': {},
+        },
+        '&-commentorpublished': {
+            '@apply float-right text-neutral-600 m-0': {},
+        },
+    },
+    '.comment-input':{
+        '@apply w-full flex gap-4 px-10 pt-8 pb-10': {},
+
+        '&-inactive': {
+            '@apply text-neutral-300 !text-3xl': {},
+        },
+
+        '&-active': {
+            '@apply text-primary !text-3xl': {},
+        }
+
+    },
+
+   
 });

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': {},
       },
     },
   },