@sk-web-gui/core 0.1.92 → 1.0.0

package/src/components/accordion.js

@@ -1,209 +1,101 @@
-module.exports = Accordion = (colors) => ({
+module.exports = Accordion = () => ({
   '.sk-disclosure': {
-    '&:has(&-header:focus-visible)': {
-      '@apply outline': {},
-    },
     '&-header': {
+      '@apply mt-6 mb-8': {},
       '@apply flex flex-col text-left': {},
-
-      '[aria-expanded="true"] &': {
-        '@apply bg-hover': {},
+      '@apply cursor-pointer': {},
+      '*': {
+        '@apply cursor-pointer': {},
       },
-
       '&:focus-visible': {
         '@apply outline-0': {},
       },
 
       '&-icon': {
-        '@apply ml-auto !text-2xl': {},
+        '@apply ml-auto': {},
         svg: {
-          '@apply !text-2xl': {},
+          '@apply w-20 h-20': {},
+        },
+      },
+      '&[data-disabled="true"]': {
+        '@apply text-dark-disabled': {},
+        '@apply cursor-default': {},
+        '*': {
+          '@apply cursor-default': {},
         },
       },
     },
 
-    '&-is-open &-header': {
-      '@apply bg-hover': {},
+    '&-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': {},
+      },
     },
-
-    '&-toggle': {
-      '@apply flex items-center inline-block text-lg leading-lg text-left text-lg mx-md sm:mx-lg my-md': {},
-      fontWeight: 'bold',
-
+    '&-md': {
       '.sk-disclosure-title': {
-        '@apply mr-md text-base leading-base md:text-lg md:leading-lg': {},
+        '@apply text-h4-md font-bold': {},
       },
-      '.sk-disclosure-subtitle': {
-        '@apply m-0 mr-md text-sm font-normal': {},
+      '.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': {},
+        '@apply my-0 invisible h-0': {},
       },
 
       '&[aria-hidden="false"], &[data-hidden="false"]': {
-        '@apply block h-auto visible': {},
-      },
-    },
-
-    '&-solid': {
-      '@apply border border-primary': {},
-      '.sk-disclosure-header': {
-        '@apply bg-primary text-white': {},
-
-        '[aria-expanded="true"] &': {
-          '@apply bg-hover': {},
-        },
-      },
-    },
-
-    '&-solid[data-alert="true"], &-outline[data-alert="true"]': {
-      '@apply border border-warning': {},
-
-      '.sk-disclosure-header:not([data-disabled="true"])': {
-        '@apply bg-warning-light text-warning': {},
-
-        '[aria-expanded="true"] &': {
-          '@apply bg-warning-light': {},
-        },
-      },
-    },
-    '&-solid[data-error="true"], &-outline[data-error="true"]': {
-      '@apply border border-error': {},
-      '.sk-disclosure-header:not([data-disabled="true"])': {
-        '@apply bg-error-light text-error': {},
-
-        '[aria-expanded="true"] &': {
-          '@apply bg-error-light': {},
-        },
+        '@apply block h-max visible': {},
       },
     },
 
     '&-is-open': {
-      '@apply border border-gray-stroke': {},
-      '& .sk-disclosure-header': {
-        '@apply bg-hover text-white': {},
-      },
-
-      '&[data-alert="true"]': {
-        '@apply border border-warning': {},
-        '& .sk-disclosure-header': {
-          '@apply border-b border-warning': {},
-        },
-      },
-
-      '&[data-error="true"]': {
-        '@apply border border-error': {},
-        '& .sk-disclosure-header': {
-          '@apply border-b border-error': {},
-        },
-      },
-    },
-    '&-is-open &-body': {
-      '@apply overflow-visible animate-reset-overflow': {},
-    },
-
-    '&-outline': {
-      '@apply border border-gray-stroke': {},
-      '&:not([data-error="true"]):not([data-alert="true"]) .sk-disclosure-body': {
-        '@apply mt-0': {},
-      },
-      '.sk-disclosure-toggle': {},
-      '.sk-disclosure-header': {
-        '@apply bg-transparent text-body': {},
-
-        '[aria-expanded="true"] &': {
-          '@apply bg-hover': {},
-        },
-      },
-    },
-
-    '&-plain': {
-      '@apply border-0': {},
-      '&:has(.sk-disclosure-header:focus-visible)': {
-        '@apply outline-offset-4': {},
-      },
-      '.sk-disclosure-header': {
-        '@apply bg-transparent text-body': {},
-
-        '[aria-expanded="true"] &': {
-          '@apply bg-hover': {},
-        },
-        '&[data-disabled="true"]': {
-          '@apply bg-transparent text-gray-stroke': {},
-        },
-        '.sk-disclosure-toggle': {
-          '@apply mx-0': {},
-        },
-      },
       '.sk-disclosure-body': {
-        '@apply m-0': {},
-      },
-      '&[data-alert="true"]': {
-        '@apply border-0': {},
-        '.sk-disclosure-header': {
-          '@apply border-0 text-warning': {},
-        },
+        '@apply overflow-visible animate-reset-overflow': {},
       },
-      '&[data-error="true"]': {
-        '@apply border-0': {},
-        '.sk-disclosure-header': {
-          '@apply border-0 text-error': {},
-        },
+      '.sk-disclosure-title': {
+        '@apply text-vattjom-text-primary': {},
       },
     },
-
-    '&-disabled, &-disabled [role="button"]': {
-      '@apply disabled:cursor-not-allowed cursor-not-allowed': {},
-    },
-
-    '&-header[data-disabled="true"]': {
-      '@apply bg-gray-lighter text-gray-stroke': {},
-    },
-
-    '&-disabled, &&-disabled': {
-      '@apply border-gray': {},
-    },
   },
   '.sk-accordion': {
     '&-item': {
       '.sk-disclosure': {
         transitionProperty: 'margin',
         transitionDuration: '180ms',
-        '&-disabled': {
-          '@apply border-x-transparent border-y-transparent': {},
-        },
-        '&-plain, &-plain[data-disabled="true"]': {
-          '@apply border border-transparent border-b-gray-stroke': {},
-        },
-
-        '&-solid[data-open="false"]': {
-          '@apply border-white': {},
-          '&[data-disabled="true"]': {
-            '@apply border-x-transparent border-y-transparent': {},
-          },
-        },
-        '&[data-open="true"]:not(&-plain)': {
-          '@apply mt-md mb-md': {},
-        },
+        '@apply border-b-1 border-divider': {},
       },
-      '&:not(:first-child)': {
-        '@apply mt-[-1px]': {},
-      },
-      '&:first-child .sk-disclosure[data-open="true"]:not(.sk-disclosure-plain)': {
-        '@apply mt-0 mb-md': {},
-      },
-      '&:last-child .sk-disclosure[data-open="true"]:not(.sk-disclosure-plain)': {
-        '@apply mt-md mb-0': {},
-      },
-      '&:last-child .sk-disclosure-plain': {
+
+      '&:last-child .sk-disclosure': {
         '@apply border-b-transparent': {},
       },
     },

package/src/components/alert-banner.js

@@ -24,7 +24,6 @@ module.exports = Modal = () => ({
   },
 
   '.tab': {
-    '@apply mr-[10px] bg-white pt-4 pb-3 px-4 rounded-b-3xl shadow-[rgba(0,_0,_0,_0.24)_0px_1.5px_4px]': {},
+    '@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

@@ -8,9 +8,8 @@ function alertSubtle(colors) {
         (styles, color) => ({
           ...styles,
           [`&[data-color="${color}"]`]: {
-            [`@apply bg-${color}-50 border-${color}-500`]: {},
+            [`@apply bg-${color}-background-100 border-${color}-surface-primary`]: {},
 
-            [`@apply dark:text-${color}-300 dark:bg-${color}-500`]: {},
             '@apply dark:bg-opacity-15': {},
             '@apply dark:border-opacity-40': {},
           },
@@ -31,10 +30,7 @@ function alertSolid(colors) {
         (styles, color) => ({
           ...styles,
           [`&[data-color="${color}"]`]: {
-            [`@apply bg-${color}-500 border-${color}-700 border-opacity-20`]: {},
-
-            [`@apply dark:bg-${color}-600 dark:border-${color}-500`]: {},
-            '@apply dark:border-opacity-40': {},
+            [`@apply bg-${color}-surface-primary border-${color}-surface-primary border-opacity-20`]: {},
           },
         }),
         {}
@@ -53,9 +49,7 @@ function alertLeftAccent(colors) {
         (styles, color) => ({
           ...styles,
           [`&[data-color="${color}"]`]: {
-            [`@apply bg-transparent border-${color}-500`]: {},
-
-            [`@apply dark:text-${color}-300`]: {},
+            [`@apply bg-transparent border-${color}-surface-primary`]: {},
           },
         }),
         {}
@@ -73,9 +67,7 @@ function alertCloseButton(colors) {
       ...colors.reduce(
         (styles, color) => ({
           ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply dark:text-${color}-300 dark:hover:text-${color}-400`]: {},
-          },
+          [`&[data-color="${color}"]`]: {},
         }),
         {}
       ),
@@ -85,7 +77,7 @@ function alertCloseButton(colors) {
 
 module.exports = Alert = (colors) => ({
   '.alert': {
-    '@apply w-full flex items-center px-4 py-3 relative overflow-hidden text-sm': {},
+    '@apply w-full flex items-center px-4 py-3 relative overflow-hidden text-small': {},
   },
 
   // variants

package/src/components/avatar.js

@@ -1,85 +1,39 @@
-module.exports = Avatar = () => ({
-  '.avatar': {
-    '@apply relative inline-flex items-center justify-center flex-shrink-0 align-top rounded-full': {},
-    '@apply bg-neutral-300 text-neutral-800': {},
-    // dark colors
-    '@apply dark:bg-neutral-600 dark:text-neutral-100': {},
-
-    '&-2xs': {
-      '@apply w-4 h-4': {},
-    },
-
-    '&-xs': {
-      '@apply w-5 h-5': {},
-    },
-
-    '&-sm': {
-      '@apply w-6 h-6': {},
+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': {},
     },
-
-    '&-md': {
-      '@apply w-7 h-7': {},
-    },
-
-    '&-lg': {
-      '@apply w-8 h-8': {},
-    },
-
-    '&-xl': {
-      '@apply w-10 h-10': {},
-    },
-
-    '&-2xl': {
-      '@apply w-12 h-12': {},
-    },
-
-    '&-3xl': {
-      '@apply w-16 h-16': {},
-    },
-  },
-
-  '.avatar-bordered': {
-    '@apply border-2 border-white': {},
-    '@apply dark:border-neutral-800': {},
-  },
-
-  '.avatar-name': {
-    '@apply font-medium text-center uppercase': {},
-
-    '&-2xs': {
-      '@apply w-4 h-4': {},
-    },
-
-    '&-xs': {
-      '@apply w-5 h-5': {},
-    },
-
-    '&-sm': {
-      '@apply w-6 h-6': {},
-    },
-
-    '&-md': {
-      '@apply w-7 h-7': {},
-    },
-
-    '&-lg': {
-      '@apply w-8 h-8': {},
-    },
-
-    '&-xl': {
-      '@apply w-10 h-10': {},
-    },
-
-    '&-2xl': {
-      '@apply w-12 h-12': {},
-    },
-
-    '&-3xl': {
-      '@apply w-16 h-16': {},
-    },
-  },
-
-  '.avatar-group': {
-    '@apply flex items-center justify-end flex-row-reverse': {},
   },
 });

package/src/components/badge.js

@@ -1,208 +1,41 @@
-function badgeSolid(colors) {
-  return {
-    '&-solid': {
-      '@apply border-2 border-white box-border': {},
-      '@apply text-white': {},
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            //[`@apply border-${color}`]: {},
-            [`@apply text-white bg-${color}`]: {},
-          },
-        }),
-        {}
-      ),
-
-      "&[data-color='primary']": {
-        '@apply bg-primary': {},
-      },
-      "&[data-color='warning']": {
-        '@apply bg-[#B05F03]': {},
-      },
-      "&[data-color='error']": {
-        '@apply bg-error': {},
-      },
-      "&[data-color='neutral']": {
-        '@apply bg-neutral-400': {},
-      },
-    },
-  };
-}
-
-function badgeOutline(colors) {
-  return {
-    '&-outline': {
-      '@apply border border-gray-stroke': {},
-      '@apply text-body bg-transparent': {},
-
-      ...colors.reduce(
-        (styles, color) => ({
-          ...styles,
-          [`&[data-color="${color}"]`]: {
-            [`@apply border-current`]: {},
-            [`@apply text-${color}`]: {},
-          },
-        }),
-        {}
-      ),
-
-      '&.badge': {
-        '&-disabled': {
-          '@apply disabled:border-gray-stroke hover:border-gray-stroke': {},
-          '&.active': {
-            '@apply border-gray-stroke': {},
+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='primary']": {
-        '@apply border-primary': {},
-        '@apply text-primary': {},
-      },
-      "&[data-color='warning']": {
-        '@apply border-[#B05F03]': {},
-        '@apply text-[#B05F03]': {},
-      },
-      "&[data-color='error']": {
-        '@apply border-error': {},
-        '@apply text-error': {},
-      },
-      "&[data-color='neutral']": {
-        '@apply border-neutral-300': {},
-      },
-    },
-  };
-}
-
-module.exports = badge = (colors) => ({
-  '.badge': {
-    '@apply relative': {},
-    '@apply m-0': {},
-    '@apply inline-flex items-center justify-center content-center align-middle': {},
-    '@apply font-sans leading-none': {},
-
-    '&-fullrounded': {
-      '@apply rounded-full': {},
-    },
-
-    //rounding
-    '&-roundedcorners-md': {
-      '@apply rounded-3xl px-sm': {},
-    },
-
-    '&-roundedcorners-lg': {
-      '@apply rounded-3xl px-sm': {},
-    },
-
-    // sizing
-    '&-sm': {
-      '@apply text-opacity-0 text-[0rem] overflow-hidden rounded-full': {},
-      minHeight: '10px',
-      maxHeight: '10px',
-      minWidth: '10px',
-
-      '&.noborder': {
-        '@apply border-none': {},
-        minHeight: '6px',
-        maxHeight: '6px',
-        minWidth: '6px',
-      },
-    },
-
-    '&-md': {
-      '@apply text-xs font-bold': {},
-      minHeight: '24px',
-      maxHeight: '24px',
-      minWidth: '24px',
-
-      '&.noborder': {
-        '@apply border-none': {},
-        minHeight: '20px',
-        maxHeight: '20px',
-        minWidth: '20px',
-      },
-    },
-
-    '&-lg': {
-      '@apply text-sm font-bold': {},
-      minHeight: '28px',
-      maxHeight: '28px',
-      minWidth: '28px',
+      }),
+      {}
+    ),
 
-      '&.noborder': {
-        '@apply border-none': {},
-        minHeight: '24px',
-        maxHeight: '24px',
-        minWidth: '24px',
-      },
-    },
-
-    '&-standard-sm': {
-      '@apply right-[-4px] self-center': {},
-      '&.noborder': {
-        '@apply right-[-5px]': {},
-      },
-    },
-    '&-standard-md': {
-      '@apply right-[-4px] self-center': {},
-      '&.noborder': {
-        '@apply right-[-5px]': {},
-      },
-    },
-    '&-standard-lg': {
-      '@apply right-[-4px] self-center': {},
-      '&.noborder': {
-        '@apply right-[-5px]': {},
-      },
-    },
+    "&[data-color='tertiary']": {
+      '@apply bg-primary-surface': {},
 
-    '&-super-sm': {
-      '@apply right-[-2px] top-[-5px]': {},
-      '&.noborder': {
-        '@apply right-[-3px]': {},
+      '&[data-inverted="true"]': {
+        '@apply text-inverted-light-primary': {},
+        '@apply bg-tertiary-surface dark:bg-inverted-primary-surface': {},
       },
     },
-    '&-super-md': {
-      '@apply right-[-3px] top-[-8px]': {},
-      '&.noborder': {
-        '@apply right-[-4px]': {},
-      },
-    },
-    '&-super-lg': {
-      '@apply right-[-4px] top-[-8px]': {},
-      '&.noborder': {
-        '@apply right-[-5px]': {},
-      },
-    },
-
-    '&-superoverlap-sm': {
-      '@apply right-[3px] top-[-5px]': {},
-      '&.noborder': {
-        '@apply right-[2px]': {},
-      },
-    },
-    '&-superoverlap-md': {
-      '@apply right-[8px] top-[-6px]': {},
-      '&.noborder': {
-        '@apply right-[7px]': {},
-      },
-    },
-    '&-superoverlap-lg': {
-      '@apply right-[8px] top-[-8px]': {},
-      '&.noborder': {
-        '@apply right-[7px]': {},
-      },
-    },
-
-    '&-fit-content': {
-      '@apply p-0': {},
-      fontSize: 'inherit',
-    },
-
-    // variants
-    ...badgeSolid(colors),
-    ...badgeOutline(colors),
   },
 });