@sk-web-gui/core 3.0.0 → 3.1.0

package/dist/types/components/tooltip.d.ts

@@ -0,0 +1,53 @@
+export declare const 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-34': {};
+        };
+        '&::after, &::before': {
+            '@apply h-0 w-0 overflow-hidden': {};
+        };
+        '&[data-position="above"]': {
+            '@apply flex-col': {};
+            '@apply pb-2': {};
+            '&::after': {
+                '@apply content-[""] border-solid border-6 border-b-0': {};
+                '@apply border-t-primary-surface border-r-transparent border-b-transparent border-l-transparent': {};
+            };
+        };
+        '&[data-position="below"]': {
+            '@apply flex-col': {};
+            '@apply pt-2': {};
+            '&::before': {
+                '@apply content-[""] border-solid border-6 border-t-0': {};
+                '@apply border-t-transparent border-r-transparent border-b-primary-surface border-l-transparent': {};
+            };
+        };
+        '&[data-position="left"]': {
+            '@apply flex-row': {};
+            '@apply pr-2 py-3': {};
+            '&::after': {
+                '@apply content-[""] border-solid border-6 border-r-0': {};
+                '@apply border-t-transparent border-r-transparent border-b-transparent border-l-primary-surface': {};
+            };
+        };
+        '&[data-position="right"]': {
+            '@apply flex-row': {};
+            '@apply pl-2 py-3': {};
+            '&::before': {
+                '@apply content-[""] border-solid border-6 border-l-0': {};
+                '@apply border-t-transparent border-r-primary-surface border-b-transparent border-l-transparent': {};
+            };
+        };
+    };
+};

package/dist/types/components/user-menu.d.ts

@@ -0,0 +1,14 @@
+export declare const UserMenu: () => {
+    '.sk-usermenu': {
+        '@apply relative': {};
+        '&-button': {
+            '@apply p-0 bg-transparent hover:bg-transparent': {};
+            '@apply border-0': {};
+            '@apply hover:border-0': {};
+            '.sk-avatar': {
+                height: string;
+                width: string;
+            };
+        };
+    };
+};

package/dist/types/components/zebratable.d.ts

@@ -0,0 +1,134 @@
+export declare const 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 table-row': {};
+                '@apply text-label-small': {};
+            };
+            '&-th': {
+                '@apply py-4': {};
+                "&[data-isColumnSortable='true']": {
+                    '@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': {};
+                '&-sort': {
+                    '@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 last-of-type:text-dark-ghost': {};
+                        };
+                    };
+                    "&[data-sortmodeascending='false']": {
+                        '> *': {
+                            '@apply first-of-type:text-dark-ghost': {};
+                        };
+                    };
+                };
+            };
+        };
+        '&-tbody': {
+            '@apply text-dark-secondary bg-transparent': {};
+            '&-tr': {
+                '@apply bg-transparent': {};
+                '@apply hover:bg-background-100': {};
+                '@apply border-b-1': {};
+                '@apply last-of-type:border-b-transparent': {};
+            };
+            '&-td': {
+                '@apply text-small': {};
+                '&-content': {
+                    '@apply inline-flex': {};
+                    '@apply justify-start items-center': {};
+                    '@apply gap-8': {};
+                    '@apply py-8 px-18': {};
+                    '@apply h-[6.3rem]': {};
+                    '@apply min-h-[6.3rem]': {};
+                };
+            };
+        };
+        '&[data-dense="true"]': {
+            '.sk-zebratable': {
+                '&-thead': {
+                    '&-th': {
+                        '@apply py-4': {};
+                    };
+                };
+                '&-tbody': {
+                    '&-td-content': {
+                        '@apply py-0': {};
+                        '@apply h-[4.7rem]': {};
+                        '@apply min-h-[4.7rem]': {};
+                    };
+                };
+            };
+        };
+        '&-paginationwrapper': {
+            '@apply w-full max-w-[60rem]': {};
+            '@apply shrink': {};
+        };
+        '&-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': {};
+                };
+            };
+            '&-pagination': {
+                '@apply grow': {};
+                '@apply shrink': {};
+            };
+        };
+    };
+};

package/dist/types/core/src/base.d.ts

@@ -43,7 +43,7 @@ declare const _base: {
         '@apply my-4': {};
     };
     '.text-content': {
-        '@apply max-w-[80rem]': {};
+        '@apply max-w-content': {};
         p: {
             '@apply mt-sm text-base': {};
         };

package/dist/types/core/src/components/accordion.d.ts

@@ -34,6 +34,9 @@ export declare const Accordion: () => {
         '&-toggle': {
             '@apply flex items-center justify-between': {};
             '@apply gap-16': {};
+            '.sk-icon': {
+                '@apply w-32 h-32': {};
+            };
         };
         '&-title': {
             '@apply text-dark-primary': {};
@@ -52,6 +55,9 @@ export declare const Accordion: () => {
             };
             '.sk-disclosure-toggle': {
                 '@apply gap-12': {};
+                '.sk-icon': {
+                    '@apply w-20 h-20': {};
+                };
             };
             '.sk-disclosure-support': {
                 '@apply text-small': {};
@@ -76,6 +82,9 @@ export declare const Accordion: () => {
             };
             '.sk-disclosure-toggle': {
                 '@apply gap-12': {};
+                '.sk-icon': {
+                    '@apply w-24 h-24': {};
+                };
             };
             '.sk-disclosure-support': {
                 '@apply text-body': {};
@@ -104,6 +113,7 @@ export declare const Accordion: () => {
             };
         };
         '&-body': {
+            '@apply text-base': {};
             '@apply flex flex-col': {};
             '@apply mb-32': {};
             '@apply mr-32': {};
@@ -132,13 +142,13 @@ export declare const Accordion: () => {
                 };
                 '&[data-has-icon="true"]': {
                     '&[data-size="sm"]': {
-                        '@apply ml-[3.2rem]': {};
+                        '@apply ml-32': {};
                     };
                     '&[data-size="md"]': {
-                        '@apply ml-[3.6rem]': {};
+                        '@apply ml-36': {};
                     };
                     '&[data-size="lg"]': {
-                        '@apply ml-[4.8rem]': {};
+                        '@apply ml-48': {};
                     };
                 };
             };

package/dist/types/core/src/components/avatar.d.ts

@@ -11,15 +11,15 @@ export declare const Avatar: (colors: string[]) => {
             '@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 h-32 w-32 min-h-24 max-h-32 min-w-24 max-w-32': {};
             '@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 h-40 w-40 min-h-32 max-h-40 min-w-32 max-w-40': {};
             '@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 h-64 w-64 min-h-40 max-h-64 min-w-40 max-w-64': {};
             '@apply text-label-large': {};
         };
     };

package/dist/types/core/src/components/badge.d.ts

@@ -12,7 +12,7 @@ export declare const Badge: (colors: string[]) => {
         '@apply text-light-primary': {};
         '@apply rounded-utility': {};
         '@apply overflow-hidden': {};
-        '@apply h-[2.4rem] w-[2.4rem]': {};
+        '@apply h-24 w-24': {};
         '@apply text-label-small': {};
         '&[data-rounded="true"]': {
             '@apply rounded-circular': {};

package/dist/types/core/src/components/breadcrumb.d.ts

@@ -1,6 +1,6 @@
 export declare const Breadcrumb: () => {
     '.sk-breadcrumb': {
-        '@apply text-body relative': {};
+        '@apply text-body text-base relative': {};
         '&-item': {
             '@apply inline-flex items-center whitespace-nowrap': {};
         };

package/dist/types/core/src/components/button-group.d.ts

@@ -18,7 +18,7 @@ export declare const ButtonGroup: () => {
         '&-divider': {
             '@apply grow bg-tertiary-surface px-6': {};
             hr: {
-                '@apply h-[2rem]': {};
+                '@apply h-20': {};
             };
         };
     };

package/dist/types/core/src/components/button.d.ts

@@ -35,27 +35,21 @@ export declare const Button: (colors: string[]) => {
                 '@apply rounded-full': {};
             };
             '&.sk-btn-sm': {
-                minWidth: string;
-                width: string;
-                maxWidth: string;
+                '@apply w-32 min-w-32 max-w-32': {};
                 'svg, .sk-icon': {
-                    '@apply h-[2rem] w-[2rem]': {};
+                    '@apply h-20 w-20': {};
                 };
             };
             '&.sk-btn-md': {
-                minWidth: string;
-                width: string;
-                maxWidth: string;
+                '@apply w-40 min-w-40 max-w-40': {};
                 'svg, .sk-icon': {
-                    '@apply h-[2rem] w-[2rem]': {};
+                    '@apply h-20 w-20': {};
                 };
             };
             '&.sk-btn-lg': {
-                minWidth: string;
-                width: string;
-                maxWidth: string;
+                '@apply w-48 min-w-48 max-w-48': {};
                 'svg, .sk-icon': {
-                    '@apply h-[2.4rem] w-[2.4rem]': {};
+                    '@apply h-24 w-24': {};
                 };
             };
             '.btn-has-icon': {
@@ -166,28 +160,28 @@ export declare const Button: (colors: string[]) => {
         '&-sm': {
             '@apply text-label-small': {};
             '@apply px-14 py-8 gap-6': {};
-            '@apply max-h-[3.2rem] h-[3.2rem]': {};
+            '@apply max-h-32 h-32': {};
             '@apply rounded-button-sm': {};
             'svg, .sk-icon': {
-                '@apply h-[1.6rem] w-[1.6rem]': {};
+                '@apply h-16 w-16': {};
             };
         };
         '&-md': {
             '@apply text-label-medium': {};
             '@apply px-18 py-8 gap-8': {};
-            '@apply max-h-[4rem] h-[4rem]': {};
+            '@apply max-h-40 h-40': {};
             '@apply rounded-button-md': {};
             'svg, .sk-icon': {
-                '@apply h-[1.8rem] w-[1.8rem]': {};
+                '@apply h-18 w-18': {};
             };
         };
         '&-lg': {
             '@apply text-label-large': {};
             '@apply px-24 py-8 gap-8': {};
-            '@apply max-h-[4.8rem] h-[4.8rem]': {};
+            '@apply max-h-48 h-48': {};
             '@apply rounded-button-lg': {};
             'svg, .sk-icon': {
-                '@apply h-[2rem] w-[2rem]': {};
+                '@apply h-20 w-20': {};
             };
         };
         '&-disabled, &[aria-disabled="true"]': {

package/dist/types/core/src/components/card.d.ts

@@ -7,18 +7,18 @@ export declare const Card: (colors: string[]) => {
             };
         };
         "&[data-layout=\"horizontal\"]": {
-            '@apply flex-row h-[100%]': {};
+            '@apply flex-row h-full': {};
             '.sk-card': {
                 '&-image': {
-                    '@apply h-[100%] w-[128px]': {};
+                    '@apply h-full w-[8em]': {};
                     '@apply float-left': {};
                     '@apply rounded-none rounded-l-cards grow-0': {};
                 };
                 '&-body': {
-                    '@apply w-[100%]': {};
+                    '@apply w-full': {};
                     '@apply border-none': {};
                     '&-wrapper': {
-                        '@apply w-[100%]': {};
+                        '@apply w-full': {};
                     };
                     '&-content': {
                         'p, a': {
@@ -31,10 +31,11 @@ export declare const Card: (colors: string[]) => {
                 };
             };
         };
+        '@apply text-base': {};
         '@apply bg-white relative rounded-b-cards rounded-cards': {};
         '@apply flex flex-col': {};
         '@apply no-underline hover:no-underline': {};
-        '@apply h-[100%]': {};
+        '@apply h-full': {};
         '&-wrapper': {
             '@apply grid': {};
         };
@@ -49,16 +50,15 @@ export declare const Card: (colors: string[]) => {
                 '@apply flex': {};
             };
             '&-meta': {
-                '@apply flex space-x-12 mt-16': {};
+                '@apply flex space-x-12 mt-16 text-base': {};
                 span: {
                     '@apply flex space-x-4 items-center': {};
                     time: {
-                        '@apply h-[23px] leading-[24px]': {};
+                        '@apply h-24': {};
                     };
                 };
                 '&.sk-card-image': {
-                    backgroundColor: string;
-                    '@apply h-[278px]': {};
+                    '@apply min-h-[12.5em] max-h-[20em]': {};
                 };
             };
             '&-header': {
@@ -97,7 +97,7 @@ export declare const Card: (colors: string[]) => {
     '.sk-meta-card': {
         '@apply no-underline hover:no-underline': {};
         '@apply flex bg-vattjom-surface-accent': {};
-        '@apply p-14 rounded-16 w-[454px]': {};
+        '@apply p-14 rounded-groups': {};
         '&[data-color="mono"]': {
             '@apply bg-primitives-overlay-darken-1 dark:bg-primitives-overlay-lighten-1': {};
         };
@@ -122,13 +122,13 @@ export declare const Card: (colors: string[]) => {
             };
             '&-content': {
                 'p, a': {
-                    '@apply text-primitives-gray-700 dark:text-primitives-gray-200': {};
+                    '@apply text-primitives-gray-700 dark:text-primitives-gray-200 text-small': {};
                     '@apply text-dark-secondary line-clamp-1': {};
                 };
             };
         };
         '&-external-link-icon': {
-            '@apply ml-auto h-[32px] w-[32px]': {};
+            '@apply ml-auto h-32 w-32': {};
             '@apply p-6 text-dark': {};
         };
     };

package/dist/types/core/src/components/checkbox.d.ts

@@ -4,17 +4,17 @@ export declare const Checkbox: () => {
         '@apply rounded-utility': {};
         '@apply bg-transparent border-transparent': {};
         '&-sm': {
-            '@apply w-[2.4rem] h-[2.4rem]': {};
+            '@apply w-24 h-24': {};
         };
         '&-md': {
-            '@apply w-[2.4rem] h-[2.4rem]': {};
+            '@apply w-24 h-24': {};
         };
         '&-lg': {
-            '@apply w-[2.4rem] h-[2.4rem]': {};
+            '@apply w-24 h-24': {};
         };
         '+ .sk-icon': {
             '@apply absolute inset-0 my-auto bg-transparent': {};
-            '@apply border-[0.1rem] p-2 border-primitives-overlay-darken-6 dark:border-primitives-overlay-lighten-6': {};
+            '@apply border-1 p-2 border-primitives-overlay-darken-6 dark:border-primitives-overlay-lighten-6': {};
             '@apply bg-primitives-overlay-lighten-10 dark:bg-primitives-overlay-darken-6': {};
             svg: {
                 '@apply hidden': {};
@@ -68,10 +68,10 @@ export declare const Checkbox: () => {
             };
         };
         '&-label-left &-label': {
-            '@apply mr-[.8rem]': {};
+            '@apply mr-8': {};
         };
         '&-label-right &-label': {
-            '@apply ml-[.8rem]': {};
+            '@apply ml-8': {};
         };
         '&-label-left': {
             '.sk-icon': {

package/dist/types/core/src/components/chip.d.ts

@@ -6,8 +6,8 @@ export declare const Chip: () => {
         '@apply hover:bg-secondary-surface-hover': {};
         '@apply focus-visible:bg-secondary-surface-hover': {};
         '@apply focus-visible:ring': {};
-        '@apply px-[.9rem] gap-4': {};
-        '@apply h-[3.4rem]': {};
+        '@apply px-9 gap-4': {};
+        '@apply h-34': {};
         '@apply text-small': {};
         '@apply text-dark-secondary': {};
         '@apply border-1': {};
@@ -30,5 +30,8 @@ export declare const Chip: () => {
             '@apply hover:bg-inverted-secondary-surface-hover': {};
             '@apply focus-visible:bg-inverted-secondary-surface-hover': {};
         };
+        '.sk-icon': {
+            '@apply h-16 w-16': {};
+        };
     };
 };

package/dist/types/core/src/components/combobox.d.ts

@@ -7,27 +7,27 @@ export declare const ComboBox: () => {
         '@apply relative w-auto': {};
         '@apply inline-block': {};
         '&-sm': {
-            '@apply h-[3.2rem]': {};
+            '@apply h-32': {};
             '@apply rounded-button-sm': {};
             '.sk-form-combobox-select.active': {
                 '@apply text-input-small': {};
-                '@apply pr-[5.2rem]': {};
+                '@apply pr-52': {};
             };
         };
         '&-md': {
-            '@apply h-[4rem]': {};
+            '@apply h-40': {};
             '@apply rounded-button-md': {};
             '.sk-form-combobox-select.active': {
                 '@apply text-input-medium': {};
-                '@apply pr-[6.1rem]': {};
+                '@apply pr-62': {};
             };
         };
         '&-lg': {
-            '@apply h-[4.8rem]': {};
+            '@apply h-48': {};
             '@apply rounded-button-lg': {};
             '.sk-form-combobox-select.active': {
                 '@apply text-input-large': {};
-                '@apply pr-[6.8rem]': {};
+                '@apply pr-68': {};
             };
         };
         '&[data-showvalue="true"]': {
@@ -56,7 +56,7 @@ export declare const ComboBox: () => {
         };
         '&-list': {
             '@apply w-full': {};
-            '@apply max-h-[23rem] overflow-y-auto': {};
+            '@apply max-h-[15em] overflow-y-auto': {};
             '&-option': {
                 '&.sk-popup-menu-item': {
                     '@apply cursor-default': {};

package/dist/types/core/src/components/cookie-consent.d.ts

@@ -13,11 +13,11 @@ export declare const CookieConsent: () => {
             '&-icon': {};
         };
         '&-content-wrapper': {
-            '@apply flex flex-col gap-24 container max-w-[102.4rem] relative': {};
+            '@apply flex flex-col gap-24 container max-w-[64em] relative': {};
         };
         '&-body': {
             '@apply flex flex-col gap-8': {};
-            '@apply max-w-[80rem]': {};
+            '@apply max-w-[50em]': {};
         };
         '&-title': {
             '@apply text-h2-sm md:text-h2-md xl:text-h2-lg': {};

package/dist/types/core/src/components/dialog.d.ts

@@ -1,5 +1,5 @@
 export declare const Dialog: () => {
     '.sk-dialog': {
-        '@apply w-fit max-w-prose md:min-w-[40rem]': {};
+        '@apply w-fit max-w-prose md:min-w-[25em]': {};
     };
 };

package/dist/types/core/src/components/divider.d.ts

@@ -19,7 +19,7 @@ export declare const Divider: () => {
         '&-sm': {
             '&.sk-divider': {
                 '&-root': {
-                    '@apply gap-[.8rem]': {};
+                    '@apply gap-8': {};
                 };
                 '.sk-divider-text': {
                     '@apply text-label-small': {};
@@ -29,7 +29,7 @@ export declare const Divider: () => {
         '&-md': {
             '&.sk-divider': {
                 '&-root': {
-                    '@apply gap-[1rem]': {};
+                    '@apply gap-10': {};
                 };
                 '.sk-divider-text': {
                     '@apply text-label-medium': {};
@@ -39,7 +39,7 @@ export declare const Divider: () => {
         '&-lg': {
             '&.sk-divider': {
                 '&-root': {
-                    '@apply gap-[1.2rem]': {};
+                    '@apply gap-12': {};
                 };
                 '.sk-divider-text': {
                     '@apply text-label-large': {};

package/dist/types/core/src/components/footer.d.ts

@@ -8,11 +8,11 @@ export declare const Footer: () => {
         '&-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 flex flex-row flex-wrap gap-100': {};
             '@apply justify-between': {};
         };
         '&-logo': {
-            '@apply max-h-[7.2rem] h-[7.2rem]': {};
+            '@apply max-h-72 h-72': {};
         };
         '&-content': {
             '@apply flex flex-row gap-36 w-fit grow-0 flex-wrap': {};

package/dist/types/core/src/components/icon.d.ts

@@ -26,7 +26,7 @@ export declare const Icon: (colors: string[]) => {
             };
             '@apply rounded-utility': {};
             '@apply text-light-primary fill-light-primary': {};
-            '@apply p-[0.4rem]': {};
+            '@apply p-4': {};
         };
         '&[data-size="fit"]': {
             '@apply w-fit h-fit': {};