@sk-web-gui/core 0.1.93 → 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/tabs.js

@@ -39,7 +39,7 @@ module.exports = Tabs = () => ({
         '@apply mr-0': {},
       },
       '&-header': {
-        '@apply text-lg font-normal': {},
+        '@apply text-large font-normal': {},
       },
       '&-right': {
         '@apply mr-0 ml-lg': {},

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

package/src/components/zebratable.js

@@ -1,89 +1,140 @@
 module.exports = ZebraTable = () => ({
+  '.sk-zebratable-wrapper': {
+    '@apply rounded-groups': {},
+    '@apply border-1': {},
+    '@apply bg-background-content': {},
+    '&-inside': {
+      '@apply border-0 rounded-t-groups': {},
+      '@apply overflow-hidden': {},
+    },
+    '&[data-variant="table"]': {
+      '&:not([data-background="true"])': {
+        '@apply border-0': {},
+        '@apply bg-transparent': {},
+      },
+      '.sk-zebratable-wrapper-inside': {
+        '@apply border-0 rounded-b-groups': {},
+      },
+    },
+  },
   '.sk-zebratable': {
     '@apply w-full text-left table-auto': {},
+    '@apply text-dark-secondary': {},
 
     '&-thead': {
+      '@apply border-b-1 border-dark-primary': {},
+      '@apply h-48': {},
       '&-tr': {
-        '@apply text-sm hidden lg:table-row': {},
+        '@apply table-row': {},
+        '@apply text-label-small': {},
       },
 
       '&-th': {
-        '@apply py-sm first-of-type:pl-lg': {},
+        '@apply py-4': {},
 
         "&[data-isColumnSortable='true']": {
-          '@apply py-sm cursor-pointer': {},
+          '@apply cursor-pointer': {},
         },
       },
+      '@apply bg-transparent': {},
+      '&[data-background="true"]': {
+        '@apply bg-vattjom-background-200 border-b-transparent': {},
+      },
     },
 
     '&-sortbutton': {
       '@apply flex items-center': {},
+      '@apply focus-visible:ring ring-ring ring-offset-0': {},
+      '@apply focus-visible:bg-vattjom-background-200': {},
+      '@apply rounded-utility': {},
+      '@apply px-16': {},
+      '@apply h-40': {},
 
       '&-icon': {
         '@apply inline-flex pl-sm': {},
 
-        '.MuiSvgIcon-root': {
-          '@apply !text-lg': {},
-        },
-
         '&-sort': {
-          '@apply text-black transform': {},
+          '@apply text-dark-secondary': {},
+          '@apply flex flex-col': {},
+
+          svg: {
+            '@apply h-16 w-16': {},
+            '@apply first-of-type:-mb-4': {},
+            '@apply last-of-type:-mt-4': {},
+          },
 
           "&[data-sortmodeascending='true']": {
-            '@apply -rotate-90': {},
+            '> *': {
+              '@apply last-of-type:text-dark-ghost': {},
+            },
           },
 
           "&[data-sortmodeascending='false']": {
-            '@apply rotate-90': {},
+            '> *': {
+              '@apply first-of-type:text-dark-ghost': {},
+            },
           },
         },
-
-        '&-more': {
-          '@apply text-gray': {},
-        },
       },
     },
 
-    '.material-icons-outlined': {
-      fontSize: '1.25em',
-    },
-
     '&-tbody': {
-      '@apply text-body lg:bg-white': {},
+      '@apply text-dark-secondary bg-transparent': {},
 
       '&-tr': {
-        '@apply transition-all bg-white lg:even:bg-white lg:odd:bg-gray-100 px-md py-md md:px-lg md:py-lg my-lg first-of-type:mt-0 block shadow-md lg:shadow-none lg:table-row lg:my-0 lg:py-0 lg:px-lg':
-          {},
-
-        '&.highlighted': {
-          '@apply lg:border-4 lg:border-hover': {},
-        },
+        '@apply bg-transparent': {},
+        '@apply hover:bg-background-100': {},
+        '@apply border-b-1': {},
+        '@apply last-of-type:border-b-transparent': {},
       },
 
       '&-td': {
-        '@apply empty:hidden py-4 px-sm lg:px-0 first-of-type:pl-sm lg:first-of-type:pl-lg last-of-type:px-0 lg:last-of-type:pr-lg last-of-type:text-right block lg:table-cell even:bg-white odd:bg-gray-100 last-of-type:bg-transparent lg:even:bg-transparent lg:odd:bg-transparent':
-          {},
+        '@apply py-20 px-18': {},
+        '@apply text-small': {},
       },
     },
 
-    '&-paginationwrapper': {
-      '@apply w-full text-lg flex justify-center lg:justify-start': {},
+    '&[data-dense="true"]': {
+      '.sk-zebratable': {
+        '&-thead': {
+          '&-th': {
+            '@apply py-12': {},
+          },
+        },
+        '&-tbody': {
+          '&-td': {
+            '@apply py-12': {},
+          },
+        },
+      },
     },
-    '&-pagination': {
-      '@apply grow': {},
+
+    '&-paginationwrapper': {
+      '@apply w-full max-w-[60rem]': {},
+      '@apply shrink': {},
     },
-    '&-pagination-pagesizes': {
-      '@apply grow-0 flex gap-xs flex-row justify-end items-center': {},
-      '&-label': {
-        '@apply font-bold': {},
+
+    '&-bottom': {
+      '@apply py-14 px-16': {},
+      '@apply border-t-1': {},
+      '@apply flex flex-row': {},
+      '@apply gap-32': {},
+      '@apply justify-between items-center': {},
+      '&-section': {
+        '@apply shrink-0': {},
+        '@apply flex flex-row': {},
+        '@apply justify-start items-center': {},
+        '@apply gap-8': {},
+        '&-label': {
+          '@apply font-normal': {},
+          '@apply text-small': {},
+          '@apply shrink-0': {},
+        },
       },
-      '&.-select': {
-        '@apply w-auto': {},
+      '&-pagination': {
+        '@apply grow': {},
+        '@apply shrink': {},
       },
     },
-
-    '&-bottomwrapper': {
-      '@apply mt-lg px-lg flex items-center justify-end': {},
-    },
   },
 });

package/src/plugin.js

@@ -9,22 +9,32 @@ const AlertBanner = require('./components/alert-banner');
 const Badge = require('./components/badge');
 const Breadcrumb = require('./components/breadcrumb');
 const ButtonGroup = require('./components/button-group');
+const ComboBox = require('./components/combobox');
 const Comments = require('./components/comments');
 const Checkbox = require('./components/checkbox');
 const ContextMenu = require('./components/context-menu');
 const Dialog = require('./components/dialog');
 const Dot = require('./components/dot');
 const Forms = require('./components/forms');
-const Calendar = require('./components/calendar');
+const Filter = require('./components/filter');
 const Icon = require('./components/icon');
+const Input = require('./components/input');
+const Label = require('./components/label');
 const Link = require('./components/link');
-const Message = require('./components/message');
+const List = require('./components/list');
+const Logo = require('./components/logo');
+const Menubar = require('./components/menubar');
+const MenuVertical = require('./components/menu-vertical');
+const Select = require('./components/select');
+const Snackbar = require('./components/snackbar');
+const Spinner = require('./components/spinner');
 const Notification = require('./components/notification');
 const Radio = require('./components/radio');
 const Switch = require('./components/switch');
 
 const Button = require('./components/button');
 const Accordion = require('./components/accordion');
+const Avatar = require('./components/avatar');
 const Card = require('./components/card');
 const Table = require('./components/table');
 const ZebraTable = require('./components/zebratable');
@@ -36,19 +46,20 @@ const Divider = require('./components/divider');
 const SideMenu = require('./components/side-menu');
 const TabMenu = require('./components/tab-menu');
 const Tabs = require('./components/tabs');
+const Tooltip = require('./components/tooltip');
 const UserMenu = require('./components/user-menu');
 
 const DropdownFilter = require('./components/dropdown-filter');
 
-const Tag = require('./components/tag');
 const Pagination = require('./components/pagination');
+const PopupMenu = require('./components/popup-menu');
 const Footer = require('./components/footer');
 const Header = require('./components/header');
 
-const SearchBar = require('./components/search-bar');
+const SearchField = require('./components/search-field');
 
-const ProfilePicture = require('./components/profile-picture');
-const Profile = require('./components/profile');
+const ProgressStepper = require('./components/progress-stepper');
+const ProgressBar = require('./components/progress-bar');
 
 const components = [
   Alert,
@@ -58,47 +69,58 @@ const components = [
   ButtonGroup,
   Button,
   Checkbox,
+
   Comments,
   ContextMenu,
   Dialog,
   Dot,
   Forms,
-  Calendar,
+  Filter,
   Icon,
+  Input,
+  Label,
   Link,
-  Message,
+  List,
+  Logo,
+  Menubar,
+  MenuVertical,
+  Select,
+  Snackbar,
+  Spinner,
   Notification,
   Radio,
   Switch,
-
   Table,
   ZebraTable,
   CookieConsent,
   Modal,
 
   Accordion,
+  Avatar,
   Card,
   Divider,
 
   SideMenu,
   TabMenu,
   Tabs,
+  Tooltip,
+
   UserMenu,
 
   DropdownFilter,
 
-  SearchBar,
+  SearchField,
 
-  Tag,
   Pagination,
+  PopupMenu,
   Footer,
   Header,
-
-  ProfilePicture,
-  Profile,
+  ProgressStepper,
+  ProgressBar,
+  ComboBox,
 ];
 
-const defaultColors = ['primary', 'secondary'];
+const defaultColors = ['warning', 'error', 'success', 'info', 'vattjom', 'juniskar', 'bjornstigen', 'gronsta'];
 
 module.exports = plugin.withOptions(
   function (options = { colors: [], cssBase: true }) {