@sk-web-gui/core 0.1.92 → 1.0.0

package/src/components/switch.js

@@ -1,119 +1,85 @@
-module.exports = Switch = (colors) => ({
-  '.form-switch-label': {
-    '@apply inline-block align-middle': {},
+module.exports = Switch = () => ({
+  '.sk-form-switch-label': {
+    '@apply inline-flex align-middle items-center': {},
+    '@apply flex-row gap-12': {},
+    '@apply font-normal text-base': {},
 
     "&[type='hidden']": {
       '@apply hidden': {},
 
-      '.form-switch': {
+      '.sk-form-switch': {
         '@apply hidden': {},
       },
     },
   },
-  '.form-switch': {
-    '@apply rounded-full p-0.5 cursor-base focus:outline-none': {},
-    '@apply bg-gray-stroke dark:bg-neutral-700': {},
-    // Hover
-    //"@apply hover:bg-neutral-300 dark:hover:bg-neutral-600": {},
-
-    border: '0.1rem solid transparent',
+  '.sk-form-switch': {
+    '@apply rounded-full cursor-pointer focus:outline-none': {},
+    '@apply bg-primitives-overlay-darken-3 dark:bg-primitives-overlay-lighten-3': {},
 
-    'input[type=checkbox]:checked + &, input[type=checkbox][aria-checked=mixed] + &': {
-      backgroundColor: 'currentColor',
-      '.form-switch-box-sm': {
-        transform: 'translateX(1.42rem)',
-      },
-      '.form-switch-box-md': {
-        transform: 'translateX(1.6rem)',
-      },
-      '.form-switch-box-lg': {
-        transform: 'translateX(1.78rem)',
-      },
-    },
+    // Hover
+    '@apply hover:bg-primitives-overlay-darken-5 hover:dark:bg-primitives-overlay-lighten-4': {},
 
+    // Focus
     'input[type=checkbox]:focus-visible + &': {
-      '@apply z-base !important': {},
-      '@apply border-primary !important': {},
-      '@apply ring-4 ring-black !important': {},
+      '@apply ring ring-blue-500': {},
     },
 
-    'input[type=checkbox]:checked:focus-visible + &, input[type=checkbox][aria-checked=mixed]:focus-visible + &': {
-      '@apply ring-black !important': {},
-    },
-    '.dark input[type=checkbox]:checked:focus-visible + &,.dark input[type=checkbox][aria-checked=mixed]:focus-visible + &':
-      {
-        '@apply ring-black !important': {},
+    // Checked
+    'input[type=checkbox]:checked + &': {
+      [`&[data-color="gronsta"]`]: {
+        '.sk-form-switch-box': {
+          '@apply bg-gronsta-surface-primary': {},
+        },
       },
-    'input[type=checkbox]:checked:hover:not(:disabled) + &, input[type=checkbox][aria-checked=mixed]:hover:not(:disabled) + &':
-      {
-        '@apply cursor-base': {},
+
+      '.sk-form-switch-icon': {
+        '@apply flex': {},
       },
 
-    // colors
-    ...colors.reduce(
-      (styles, color) => ({
-        ...styles,
-        [`&[data-color="${color}"]`]: {
-          [`@apply text-${color}`]: {},
+      '.sk-form-switch-box': {
+        transform: 'translateX(2.4rem)',
+      },
 
-          // 'input[type=checkbox]:focus + &': {
-          //   borderColor: `${theme(`colors.${color}.DEFAULT`)}`,
-          //   boxShadow: `0 0 5px ${theme(`colors.${color}.DEFAULT`)}`,
-          //   borderWidth: '0.1rem',
-          // },
-        },
-      }),
-      {}
-    ),
+      '@apply bg-primitives-overlay-darken-4 dark:bg-primitives-overlay-lighten-5': {},
 
-    // disabled
-    '&-disabled': {
-      '@apply cursor-not-allowed': {},
+      // Disabled
+      [`&[data-disabled="true"]`]: {
+        '.sk-form-switch-box': {
+          '@apply bg-transparent': {},
 
-      '&': {
-        backgroundColor: '#ECECEC',
+          '.sk-form-switch-icon': {
+            '@apply bg-primitives-overlay-darken-6 dark:bg-primitives-overlay-lighten-6': {},
+            '@apply text-light-primary': {},
+          },
+        },
       },
     },
 
-    'input[type=checkbox]:not(:checked) + &-disabled .form-switch-box': {
-      '@apply bg-gray-stroke': {},
-    },
-
-    // sizing
-    '&-sm': {
-      height: '2.16rem',
-      width: '3.6rem',
-    },
+    // Disabled not checked
+    [`&[data-disabled="true"]`]: {
+      '@apply cursor-default': {},
+      '@apply bg-primitives-overlay-darken-2 dark:bg-primitives-overlay-lighten-2': {},
 
-    '&-md': {
-      height: '2.4rem',
-      width: '4rem',
+      '.sk-form-switch-box': {
+        '@apply bg-primitives-overlay-darken-6 dark:bg-primitives-overlay-lighten-6': {},
+      },
     },
 
-    '&-lg': {
-      height: '2.64rem',
-      width: '4.4rem',
-    },
+    width: '5.6rem',
   },
 
   // Knob
-  '.form-switch-box': {
-    '@apply transition-transform ease-in-out duration-150 transform bg-white rounded-full shadow translate-x-0': {},
-
-    // sizing
-    '&-sm': {
-      height: '1.6rem',
-      width: '1.7rem',
-    },
-
-    '&-md': {
-      height: '2rem',
-      width: '2rem',
-    },
-
-    '&-lg': {
-      height: '2.2rem',
-      width: '2.2rem',
+  '.sk-form-switch-box': {
+    '@apply transition-transform ease-in-out duration-150 transform rounded-full shadow translate-x-0 m-6': {},
+    '@apply bg-primitives-overlay-darken-7 dark:bg-primitives-overlay-lighten-7': {},
+    '@apply h-20 w-20': {},
+    '@apply flex justify-center items-center object-center': {},
+
+    '.sk-form-switch-icon': {
+      '@apply bg-transparent': {},
+      '@apply hidden': {},
+      '@apply w-20 h-20': {},
+      '@apply text-light-primary': {},
     },
   },
 });

package/src/components/tab-menu.js

@@ -1,58 +1,58 @@
-module.exports = TabMenu = () => ({
-  '.sk-tab-menu': {
-    '&-wrapper': {
-      display: 'flex',
-      flexDirection: 'row',
-      margin: 'auto',
-    },
-    '&-right': {
-      '@apply justify-end': {},
-    },
-    '&-center': {
-      '@apply justify-center': {},
-    },
-    '&-list': {
-      all: 'unset',
-      display: 'flex',
-      '&-stretch': {
-        '@apply w-full justify-between': {},
-      },
-    },
-
-    '&-underline': {
-      width: '100%',
-      height: 6,
-      '@apply bg-gray-light': {},
-    },
-    '&-item': {
-      all: 'unset',
-      height: 65,
-      display: 'flex',
-      padding: '0 1rem',
-      marginRight: '5rem',
-      alignItems: 'center',
-      position: 'relative',
-      cursor: 'pointer',
-      '&-stretch': {
-        '@apply mr-0': {},
-      },
-      '&-right': {
-        '@apply mr-0 ml-[5rem]': {},
-      },
-      '&-center:last-of-type': {
-        '@apply mr-0': {},
-      },
-
-      '&.active::after': {
-        content: '""',
-        display: 'block',
-        position: 'absolute',
-        width: '100%',
-        height: 6,
-        top: '100%',
-        left: 0,
-        '@apply bg-primary': {},
-      },
-    },
-  },
-});
+module.exports = TabMenu = () => ({
+  '.sk-tab-menu': {
+    '&-wrapper': {
+      display: 'flex',
+      flexDirection: 'row',
+      margin: 'auto',
+    },
+    '&-right': {
+      '@apply justify-end': {},
+    },
+    '&-center': {
+      '@apply justify-center': {},
+    },
+    '&-list': {
+      all: 'unset',
+      display: 'flex',
+      '&-stretch': {
+        '@apply w-full justify-between': {},
+      },
+    },
+
+    '&-underline': {
+      width: '100%',
+      height: 6,
+      '@apply bg-gray-light': {},
+    },
+    '&-item': {
+      all: 'unset',
+      height: 65,
+      display: 'flex',
+      padding: '0 1rem',
+      marginRight: '5rem',
+      alignItems: 'center',
+      position: 'relative',
+      cursor: 'pointer',
+      '&-stretch': {
+        '@apply mr-0': {},
+      },
+      '&-right': {
+        '@apply mr-0 ml-[5rem]': {},
+      },
+      '&-center:last-of-type': {
+        '@apply mr-0': {},
+      },
+
+      '&.active::after': {
+        content: '""',
+        display: 'block',
+        position: 'absolute',
+        width: '100%',
+        height: 6,
+        top: '100%',
+        left: 0,
+        '@apply bg-primary': {},
+      },
+    },
+  },
+});

package/src/components/tabs.js

@@ -1,64 +1,64 @@
-module.exports = Tabs = () => ({
-  '.sk-tabs': {
-    '&-stretch': {
-      '@apply w-full': {},
-    },
-    '&-list': {
-      '@apply  block relative w-full h-[3rem]': {},
-      '&-stretch': {
-        '@apply flex justify-between': {},
-      },
-      '&-right': {
-        '@apply text-right': {},
-      },
-      '&-center': {
-        '@apply text-center': {},
-      },
-
-      '&-line::after': {
-        content: '""',
-        '@apply bg-gray-middle w-full h-[2px] absolute left-0 right-0 bottom-0': {},
-      },
-    },
-    '&-tab': {
-      '@apply relative mr-[3.2rem] text-base font-bold  p-0 relative h-[2.8rem] inline-block': {},
-      '@apply text-gray': {},
-      '@apply cursor-pointer': {},
-      '&.disabled': {
-        '@apply cursor-not-allowed': {},
-        '@apply text-gray-stroke': {},
-      },
-      '&.active': {
-        '@apply text-body': {},
-        '&::after': {
-          content: '""',
-          '@apply bg-primary w-full h-[2px] absolute left-0 right-0 top-[100%] z-[1]': {},
-        },
-      },
-      '&-stretch': {
-        '@apply mr-0': {},
-      },
-      '&-header': {
-        '@apply text-lg font-normal': {},
-      },
-      '&-right': {
-        '@apply mr-0 ml-lg': {},
-      },
-      '&:last-of-type': {
-        '@apply mr-0': {},
-      },
-      '&-icon': {
-        '&-with-label': {
-          '@apply mr-sm': {},
-        },
-      },
-    },
-    '&-panel': {
-      '@apply mt-lg': {},
-      '&:not(.active)': {
-        display: 'none',
-        hidden: true,
-      },
-    },
-  },
-});
+module.exports = Tabs = () => ({
+  '.sk-tabs': {
+    '&-stretch': {
+      '@apply w-full': {},
+    },
+    '&-list': {
+      '@apply  block relative w-full h-[3rem]': {},
+      '&-stretch': {
+        '@apply flex justify-between': {},
+      },
+      '&-right': {
+        '@apply text-right': {},
+      },
+      '&-center': {
+        '@apply text-center': {},
+      },
+
+      '&-line::after': {
+        content: '""',
+        '@apply bg-gray-middle w-full h-[2px] absolute left-0 right-0 bottom-0': {},
+      },
+    },
+    '&-tab': {
+      '@apply relative mr-[3.2rem] text-base font-bold  p-0 relative h-[2.8rem] inline-block': {},
+      '@apply text-gray': {},
+      '@apply cursor-pointer': {},
+      '&.disabled': {
+        '@apply cursor-not-allowed': {},
+        '@apply text-gray-stroke': {},
+      },
+      '&.active': {
+        '@apply text-body': {},
+        '&::after': {
+          content: '""',
+          '@apply bg-primary w-full h-[2px] absolute left-0 right-0 top-[100%] z-[1]': {},
+        },
+      },
+      '&-stretch': {
+        '@apply mr-0': {},
+      },
+      '&-header': {
+        '@apply text-large font-normal': {},
+      },
+      '&-right': {
+        '@apply mr-0 ml-lg': {},
+      },
+      '&:last-of-type': {
+        '@apply mr-0': {},
+      },
+      '&-icon': {
+        '&-with-label': {
+          '@apply mr-sm': {},
+        },
+      },
+    },
+    '&-panel': {
+      '@apply mt-lg': {},
+      '&:not(.active)': {
+        display: 'none',
+        hidden: true,
+      },
+    },
+  },
+});

package/src/components/tooltip.js

@@ -0,0 +1,64 @@
+module.exports = Tooltip = () => ({
+  '.sk-tooltip': {
+    '@apply inline-flex justify-center items-center': {},
+    '@apply w-fit h-fit': {},
+    '@apply grow-0': {},
+
+    '&-text': {
+      '@apply inline-flex': {},
+      '@apply bg-primary-surface shadow': {},
+      '@apply px-16 py-8': {},
+      '@apply rounded-utility': {},
+      '@apply text-light-primary text-small': {},
+      '@apply font-bold': {},
+      '@apply w-fit h-fit': {},
+      '@apply grow-0': {},
+      '@apply min-h-[3.4rem]': {},
+    },
+
+    //Arrow
+    '&::after, &::before': {
+      '@apply h-0 w-0 overflow-hidden': {},
+    },
+
+    // Above
+    '&[data-position="above"]': {
+      '@apply flex-col': {},
+      '@apply pb-2': {},
+      '&::after': {
+        '@apply content-[""] border-solid border-[0.6rem] border-b-0': {},
+        '@apply border-t-primary-surface border-r-transparent border-b-transparent border-l-transparent': {},
+      },
+    },
+
+    // Below
+    '&[data-position="below"]': {
+      '@apply flex-col': {},
+      '@apply pt-2': {},
+      '&::before': {
+        '@apply content-[""] border-solid border-[0.6rem] border-t-0': {},
+        '@apply border-t-transparent border-r-transparent border-b-primary-surface border-l-transparent': {},
+      },
+    },
+
+    // Left
+    '&[data-position="left"]': {
+      '@apply flex-row': {},
+      '@apply pr-2 py-[0.3rem]': {},
+      '&::after': {
+        '@apply content-[""] border-solid border-[0.6rem] border-r-0': {},
+        '@apply border-t-transparent border-r-transparent border-b-transparent border-l-primary-surface': {},
+      },
+    },
+
+    // Right
+    '&[data-position="right"]': {
+      '@apply flex-row': {},
+      '@apply pl-2 py-[0.3rem]': {},
+      '&::before': {
+        '@apply content-[""] border-solid border-[0.6rem] border-l-0': {},
+        '@apply border-t-transparent border-r-primary-surface border-b-transparent border-l-transparent': {},
+      },
+    },
+  },
+});

package/src/components/user-menu.js

@@ -1,65 +1,13 @@
-module.exports = UserMenu = (colors) => ({
+module.exports = UserMenu = () => ({
   '.sk-usermenu': {
-    '@apply text-body mx-auto lg:mx-sm lg:relative': {},
-
-    '&-wrapper': {
-      '@apply block max-lg:-mr-md': {},
-    },
-
+    '@apply relative': {},
     '&-button': {
-      '&-content': {
-        '@apply max-lg:font-bold lg:items-center lg:text-left': {},
-      },
-      '&-icon': {
-        '@apply !text-2xl ml-auto align-top max-lg:mr-2 max-lg:text-primary': {},
-      },
-    },
-
-    '&-first-row': {
-      '@apply max-lg:hidden bg-white border-t-2 pb-sm -mt-0 mx-md': {},
-    },
-
-    '&-label': {
-      '@apply flex align-middle mt-md lg:mb-xs': {},
-      '&-content': {
-        '@apply inline-block px-lg py-md lg:pl-md lg:pr-md lg:py-sm text-sm font-semibold uppercase whitespace-nowrap':
-          {},
-      },
-      '&-line': {
-        '@apply inline-block w-full h-px border-gray-300 border-t-2 mt-[2.6rem] lg:hidden': {},
-      },
-    },
-
-    '&-body': {
-      '@apply py-sm absolute rounded border-t-0 bg-white mt-6 right-0 left-0 border-none max-lg:shadow-lg lg:-mt-2 lg:border-2 lg:border-solid lg:border-white':
-        {},
-      '&[data-open="true"]': {
-        '@apply lg:border-gray-300 lg:border-t-0 lg:shadow-lg': {},
-      },
-    },
-
-    '&-header': {
-      '@apply px-md py-sm bg-white border-none rounded lg:border-2 lg:border-solid lg:border-b-0 lg:border-transparent':
-        {},
-      '&[aria-expanded="true"]': {
-        '@apply lg:border-gray-300 lg:shadow-none': {},
+      '@apply p-0 bg-transparent hover:bg-transparent': {},
+      '@apply border-0': {},
+      '.sk-avatar': {
+        height: 'inherit',
+        width: 'inherit',
       },
     },
-    '&-group': {
-      'a, button': {
-        '@apply block px-lg py-md lg:px-md lg:py-sm w-full cursor-pointer text-body no-underline': {},
-        '&.active': {
-          '@apply bg-hover text-white no-underline': {},
-        },
-      },
-      '&.active': {
-        'a, button': {
-          '@apply bg-hover text-white no-underline': {},
-        },
-      },
-    },
-    '&-divider': {
-      '@apply bg-white border-t-2 pb-sm mt-sm mx-md': {},
-    },
   },
 });