@sk-web-gui/core 2.2.2 → 2.4.0

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

@@ -0,0 +1,164 @@
+export declare const Accordion: () => {
+    '.sk-disclosure': {
+        '&-header': {
+            '@apply mt-6 mb-8': {};
+            '@apply flex flex-col text-left': {};
+            '@apply cursor-pointer': {};
+            '*': {
+                '@apply cursor-pointer': {};
+            };
+            '&:focus-visible': {
+                '@apply outline-0': {};
+            };
+            '&-icon': {
+                '@apply ml-auto': {};
+                '@apply text-dark-secondary': {};
+                svg: {
+                    '@apply w-20 h-20': {};
+                };
+            };
+            '&[data-disabled="true"]': {
+                '@apply text-dark-disabled': {};
+                '.sk-disclosure-title': {
+                    '@apply text-dark-disabled': {};
+                };
+                '@apply cursor-default': {};
+                '*': {
+                    '@apply cursor-default': {};
+                };
+            };
+        };
+        '&-label': {
+            '@apply shrink-0': {};
+        };
+        '&-toggle': {
+            '@apply flex items-center justify-between': {};
+            '@apply gap-16': {};
+        };
+        '&-title': {
+            '@apply text-dark-primary': {};
+            '&-wrapper': {
+                '@apply w-full': {};
+                '@apply flex flex-row': {};
+                '@apply items-center': {};
+            };
+        };
+        '&-sm': {
+            '.sk-disclosure-title': {
+                '@apply text-h4-sm font-bold': {};
+                '&-wrapper': {
+                    '@apply gap-12': {};
+                };
+            };
+            '.sk-disclosure-toggle': {
+                '@apply gap-12': {};
+            };
+            '.sk-disclosure-support': {
+                '@apply text-small': {};
+            };
+            '&[data-variant="default"]': {
+                '.sk-disclosure-toggle': {
+                    '@apply py-4': {};
+                    '@apply h-40': {};
+                };
+                '.sk-disclosure-header-icon': {
+                    '@apply w-32 h-32': {};
+                };
+            };
+            '&[data-variant="alt"]': {};
+        };
+        '&-md': {
+            '.sk-disclosure-title': {
+                '@apply text-h4-md font-bold': {};
+                '&-wrapper': {
+                    '@apply gap-12': {};
+                };
+            };
+            '.sk-disclosure-toggle': {
+                '@apply gap-12': {};
+            };
+            '.sk-disclosure-support': {
+                '@apply text-body': {};
+            };
+            '&[data-variant="default"]': {
+                '.sk-disclosure-toggle': {
+                    '@apply py-8': {};
+                    '@apply h-56': {};
+                };
+                '.sk-disclosure-header-icon': {
+                    '@apply w-40 h-40': {};
+                };
+            };
+        };
+        '&-lg': {
+            '&[data-variant="alt"]': {
+                '.sk-disclosure-support': {
+                    '@apply text-large': {};
+                };
+                '.sk-disclosure-title': {
+                    '@apply text-h3-md font-bold': {};
+                    '&-wrapper': {
+                        '@apply gap-16': {};
+                    };
+                };
+            };
+        };
+        '&-body': {
+            '@apply flex flex-col': {};
+            '@apply mb-32': {};
+            '@apply mr-32': {};
+            '@apply gap-8': {};
+            '@apply py-0': {};
+            '@apply h-0 overflow-hidden': {};
+            transitionProperty: string;
+            transitionTimingFunction: string;
+            transitionDuration: string;
+            '&[aria-hidden="true"], &[data-hidden="true"]': {
+                '@apply my-0 invisible h-0': {};
+            };
+            '&[aria-hidden="false"], &[data-hidden="false"]': {
+                '@apply block h-max visible': {};
+            };
+            '&[data-variant="alt"]': {
+                '@apply mt-24': {};
+                '&[data-size="sm"]': {
+                    '@apply pr-12': {};
+                };
+                '&[data-size="md"]': {
+                    '@apply pr-12': {};
+                };
+                '&[data-size="lg"]': {
+                    '@apply pr-16': {};
+                };
+                '&[data-has-icon="true"]': {
+                    '&[data-size="sm"]': {
+                        '@apply ml-[3.2rem]': {};
+                    };
+                    '&[data-size="md"]': {
+                        '@apply ml-[3.6rem]': {};
+                    };
+                    '&[data-size="lg"]': {
+                        '@apply ml-[4.8rem]': {};
+                    };
+                };
+            };
+        };
+        '&-is-open': {
+            '.sk-disclosure-body': {
+                '@apply overflow-visible animate-reset-overflow': {};
+            };
+        };
+    };
+    '.sk-accordion': {
+        '&-item': {
+            '.sk-disclosure': {
+                transitionProperty: string;
+                transitionDuration: string;
+                '@apply border-b-1 border-divider': {};
+            };
+            '&:last-child .sk-disclosure': {
+                '@apply border-b-transparent': {};
+            };
+        };
+    };
+};

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

@@ -0,0 +1,21 @@
+export declare const Alert: (colors: string[]) => {
+    '.alert-close-button': {
+        '@apply absolute right-4 cursor-base focus-visible:outline-none': {};
+        '@apply text-neutral-600 hover:text-neutral-700': {};
+    };
+    '.alert-left-accent': {
+        '@apply border-l-2 rounded-none': {};
+        '@apply text-body': {};
+    };
+    '.alert-solid': {
+        '@apply border rounded-base': {};
+        '@apply text-white': {};
+    };
+    '.alert-subtle': {
+        '@apply border rounded-base': {};
+        '@apply text-body': {};
+    };
+    '.alert': {
+        '@apply w-full flex items-center px-4 py-3 relative overflow-hidden text-small': {};
+    };
+};

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

@@ -0,0 +1,26 @@
+export declare const Avatar: (colors: string[]) => {
+    '.sk-avatar': {
+        '&-img': {
+            '@apply min-w-full min-h-full object-cover': {};
+        };
+        '@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': {};
+        };
+    };
+};

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

@@ -0,0 +1,21 @@
+export declare const Badge: (colors: string[]) => {
+    '.sk-badge': {
+        "&[data-color='tertiary']": {
+            '@apply bg-primary-surface': {};
+            '&[data-inverted="true"]': {
+                '@apply text-inverted-light-primary': {};
+                '@apply bg-tertiary-surface dark:bg-inverted-primary-surface': {};
+            };
+        };
+        '@apply inline-flex': {};
+        '@apply justify-center items-center': {};
+        '@apply text-light-primary': {};
+        '@apply rounded-utility': {};
+        '@apply overflow-hidden': {};
+        '@apply h-[2.4rem] w-[2.4rem]': {};
+        '@apply text-label-small': {};
+        '&[data-rounded="true"]': {
+            '@apply rounded-circular': {};
+        };
+    };
+};

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

@@ -0,0 +1,28 @@
+export declare const Breadcrumb: () => {
+    '.sk-breadcrumb': {
+        '@apply text-body relative': {};
+        '&-item': {
+            '@apply inline-flex items-center whitespace-nowrap': {};
+        };
+        '&-separator': {
+            '@apply mx-6': {};
+        };
+    };
+    '.sk-breadcrumb-item': {
+        span: {
+            '&[aria-current="page"]': {
+                '@apply font-bold': {};
+            };
+        };
+        "&[data-color=\"primary\"]": {
+            'a.sk-link': {
+                "@apply text-secondary": {};
+            };
+        };
+        "&[data-color=\"vattjom\"]": {
+            'a.sk-link': {
+                "@apply text-vattjom-text-primary": {};
+            };
+        };
+    };
+};

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

@@ -0,0 +1,25 @@
+export declare const ButtonGroup: () => {
+    '.sk-btn-group': {
+        '@apply inline-flex items-center': {};
+        '&.sk-btn-group-attached': {
+            '@apply rounded-groups': {};
+            '@apply bg-tertiary-surface': {};
+            '@apply py-6 px-12': {};
+            '> *': {
+                '@apply bg-transparent': {};
+            };
+            '.sk-btn[data-icon="true"] .sk-icon': {
+                '@apply bg-transparent text-dark-secondary': {};
+            };
+            '.sk-icon': {
+                '@apply p-0 w-fit h-fit': {};
+            };
+        };
+        '&-divider': {
+            '@apply grow bg-tertiary-surface px-6': {};
+            hr: {
+                '@apply h-[2rem]': {};
+            };
+        };
+    };
+};

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

@@ -0,0 +1,201 @@
+export declare const Button: (colors: string[]) => {
+    '.sk-btn': {
+        '&[data-background="false"]:not(:hover)': {
+            '@apply bg-transparent': {};
+        };
+        '.btn-has-icon': {
+            '&-left': {
+                '@apply h-full flex items-center justify-center -ml-2': {};
+                '.sk-icon': {
+                    '@apply bg-transparent': {};
+                    color: string;
+                };
+            };
+            '&-right': {
+                '@apply h-full flex items-center justify-center -mr-2': {};
+                '.sk-icon': {
+                    '@apply bg-transparent': {};
+                    color: string;
+                };
+            };
+        };
+        '&-lg .btn-has-icon-left': {
+            '@apply -ml-4': {};
+        };
+        '&-lg .btn-has-icon-right': {
+            '@apply -mr-4': {};
+        };
+        '&[data-icon=true]': {
+            '@apply p-0': {};
+            '.sk-icon': {
+                '@apply bg-transparent': {};
+                color: string;
+            };
+            "&[data-rounded='true']": {
+                '@apply rounded-full': {};
+            };
+            '&.sk-btn-sm': {
+                minWidth: string;
+                width: string;
+                maxWidth: string;
+                'svg, .sk-icon': {
+                    '@apply h-[2rem] w-[2rem]': {};
+                };
+            };
+            '&.sk-btn-md': {
+                minWidth: string;
+                width: string;
+                maxWidth: string;
+                'svg, .sk-icon': {
+                    '@apply h-[2rem] w-[2rem]': {};
+                };
+            };
+            '&.sk-btn-lg': {
+                minWidth: string;
+                width: string;
+                maxWidth: string;
+                'svg, .sk-icon': {
+                    '@apply h-[2.4rem] w-[2.4rem]': {};
+                };
+            };
+            '.btn-has-icon': {
+                '&-left': {
+                    '@apply m-0': {};
+                };
+                '&-right': {
+                    '@apply m-0': {};
+                };
+            };
+        };
+        '&-link': {
+            '@apply h-auto p-0 leading-normal text-neutral-600 hover:underline active:text-neutral-700': {};
+            '&.active': {
+                '@apply underline': {};
+            };
+            '@apply dark:text-neutral-200': {};
+            '@apply dark:active:text-neutral-500': {};
+        };
+        '&-ghost': {
+            '@apply text-dark-secondary': {};
+            '@apply bg-transparent': {};
+            '@apply border-transparent': {};
+            '@apply hover:bg-transparent': {};
+            '@apply hover:border-transparent': {};
+            '&.sk-btn-disabled, &[aria-disabled="true"]': {
+                '@apply disabled:bg-transparent bg-transparent disabled:border-transparent border-transparent !important': {};
+            };
+            '&[data-inverted="true"]': {
+                '@apply text-inverted-dark-secondary': {};
+            };
+        };
+        '&-tertiary': {
+            '@apply text-dark-secondary': {};
+            '@apply bg-tertiary-surface': {};
+            '@apply hover:bg-tertiary-surface-hover': {};
+            '&.sk-btn-disabled, &[aria-disabled="true"]': {
+                '@apply disabled:bg-tertiary-surface-disabled bg-tertiary-surface-disabled disabled:border-transparent border-transparent !important': {};
+            };
+            '&[data-inverted="true"]': {
+                '@apply text-inverted-dark-secondary': {};
+                '@apply bg-inverted-tertiary-surface': {};
+                '@apply hover:bg-inverted-tertiary-surface-hover': {};
+                '&.sk-btn-disabled, &[aria-disabled="true"]': {
+                    '@apply disabled:bg-inverted-tertiary-surface-disabled bg-inverted-tertiary-surface-disabled disabled:border-transparent border-transparent !important': {};
+                };
+            };
+        };
+        '&-secondary': {
+            '@apply border-secondary-outline': {};
+            '@apply text-dark-secondary': {};
+            '@apply bg-secondary-surface': {};
+            '@apply hover:border-secondary-outline-hover': {};
+            '@apply hover:bg-secondary-surface-hover': {};
+            '@apply focus-visible:border-background-content': {};
+            '&.sk-btn-disabled, &[aria-disabled="true"]': {
+                '@apply disabled:bg-secondary-surface-disabled bg-secondary-surface-disabled disabled:border-transparent border-transparent !important': {};
+            };
+            '&[data-inverted="true"]': {
+                '@apply border-inverted-secondary-outline': {};
+                '@apply text-inverted-dark-secondary': {};
+                '@apply bg-inverted-secondary-surface': {};
+                '@apply hover:border-inverted-secondary-outline-hover': {};
+                '@apply hover:bg-inverted-secondary-surface-hover': {};
+                '@apply focus-visible:border-inverted-background-content': {};
+                '&.sk-btn-disabled, &[aria-disabled="true"]': {
+                    '@apply disabled:bg-inverted-secondary-surface-disabled bg-inverted-secondary-surface-disabled disabled:border-transparent border-transparent !important': {};
+                };
+            };
+        };
+        '&-primary': {
+            "&[data-color='primary']": {
+                '@apply bg-primary-surface': {};
+                '@apply hover:bg-primary-surface-hover': {};
+                '&.active': {
+                    '@apply bg-primary-surface-hover': {};
+                };
+                "@apply active:bg-primary-surface-hover": {};
+                '&[data-inverted="true"]': {
+                    '@apply text-inverted-light-primary': {};
+                    '@apply bg-inverted-primary-surface': {};
+                    '@apply hover:bg-inverted-primary-surface-hover': {};
+                    '&.active': {
+                        '@apply bg-inverted-primary-surface-hover': {};
+                    };
+                    "@apply active:bg-inverted-primary-surface-hover": {};
+                };
+            };
+            '@apply text-light-primary': {};
+            '@apply hover:bg-primary-surface-hover': {};
+        };
+        '@apply box-border': {};
+        '@apply border-2 border-transparent': {};
+        '@apply cursor-pointer': {};
+        '@apply relative': {};
+        '@apply m-0': {};
+        '@apply px-24 py-8 gap-8': {};
+        '@apply inline-flex items-center justify-center flex-shrink-0 align-middle': {};
+        '@apply rounded-button': {};
+        transitionProperty: string;
+        '@apply\tduration-75 ease-out': {};
+        '@apply outline-none appearance-none select-none whitespace-nowrap': {};
+        '@apply focus-visible:outline-none': {};
+        '@apply focus-visible:ring': {};
+        "&[data-rounded='true']": {
+            '@apply rounded-circular': {};
+        };
+        '&-sm': {
+            '@apply text-label-small': {};
+            '@apply px-14 py-8 gap-6': {};
+            '@apply max-h-[3.2rem] h-[3.2rem]': {};
+            '@apply rounded-button-sm': {};
+            'svg, .sk-icon': {
+                '@apply h-[1.6rem] w-[1.6rem]': {};
+            };
+        };
+        '&-md': {
+            '@apply text-label-medium': {};
+            '@apply px-18 py-8 gap-8': {};
+            '@apply max-h-[4rem] h-[4rem]': {};
+            '@apply rounded-button-md': {};
+            'svg, .sk-icon': {
+                '@apply h-[1.8rem] w-[1.8rem]': {};
+            };
+        };
+        '&-lg': {
+            '@apply text-label-large': {};
+            '@apply px-24 py-8 gap-8': {};
+            '@apply max-h-[4.8rem] h-[4.8rem]': {};
+            '@apply rounded-button-lg': {};
+            'svg, .sk-icon': {
+                '@apply h-[2rem] w-[2rem]': {};
+            };
+        };
+        '&-disabled, &[aria-disabled="true"]': {
+            '@apply shadow-none disabled:shadow-none disabled:cursor-default cursor-default': {};
+            '@apply disabled:text-dark-disabled text-dark-disabled disabled:bg-primary-surface-disabled bg-primary-surface-disabled disabled:border-transparent border-transparent !important': {};
+            '&[data-inverted="true"]': {
+                '@apply disabled:text-inverted-dark-disabled text-inverted-dark-disabled disabled:bg-inverted-primary-surface-disabled bg-inverted-primary-surface-disabled disabled:border-transparent border-transparent !important': {};
+            };
+        };
+    };
+};

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

@@ -0,0 +1,135 @@
+export declare const Card: (colors: string[]) => {
+    '.sk-card': {
+        '&.sk-card-use-hover-effect': {
+            '.sk-card-body-icon': {
+                '@apply inline-flex': {};
+                '@apply mt-auto mb-auto mr-24': {};
+            };
+        };
+        "&[data-layout=\"horizontal\"]": {
+            '@apply flex-row h-[100%]': {};
+            '.sk-card': {
+                '&-image': {
+                    '@apply h-[100%] w-[128px]': {};
+                    '@apply float-left': {};
+                    '@apply rounded-none rounded-l-cards grow-0': {};
+                };
+                '&-body': {
+                    '@apply w-[100%]': {};
+                    '@apply border-none': {};
+                    '&-wrapper': {
+                        '@apply w-[100%]': {};
+                    };
+                    '&-content': {
+                        'p, a': {
+                            '@apply text-small': {};
+                        };
+                    };
+                    '&-meta': {
+                        '@apply hidden': {};
+                    };
+                };
+            };
+        };
+        '@apply bg-white relative rounded-b-cards rounded-cards': {};
+        '@apply flex flex-col': {};
+        '@apply no-underline hover:no-underline': {};
+        '@apply h-[100%]': {};
+        '&-wrapper': {
+            '@apply grid': {};
+        };
+        '&-image': {
+            '@apply object-cover grow': {};
+            '@apply rounded-t-cards': {};
+        };
+        '&-body': {
+            '@apply px-24 pb-24 pt-16 rounded-b-cards': {};
+            '@apply shrink': {};
+            '&-wrapper': {
+                '@apply flex': {};
+            };
+            '&-meta': {
+                '@apply flex space-x-12 mt-16': {};
+                span: {
+                    '@apply flex space-x-4 items-center': {};
+                    time: {
+                        '@apply h-[23px] leading-[24px]': {};
+                    };
+                };
+                '&.sk-card-image': {
+                    backgroundColor: string;
+                    '@apply h-[278px]': {};
+                };
+            };
+            '&-header': {
+                'h1, h2, h3, h4, h5, h6, h7, a': {
+                    '@apply line-clamp-1 text-h3-md text-dark-primary mt-16': {};
+                };
+                span: {
+                    '@apply pl-12': {};
+                };
+            };
+            '&-content': {
+                '@apply w-full': {};
+                'p, a': {
+                    '@apply line-clamp-3 m-0 pt-8 text-base': {};
+                };
+            };
+            '&-icon': {
+                '@apply hidden': {};
+            };
+        };
+    };
+    '.sk-card-link': {
+        '@apply hover:cursor-pointer': {};
+        '&::after': {
+            content: string;
+            position: string;
+            left: string;
+            top: string;
+            right: string;
+            bottom: string;
+        };
+    };
+    /**
+     * Meta card
+     */
+    '.sk-meta-card': {
+        '@apply no-underline hover:no-underline': {};
+        '@apply flex bg-vattjom-surface-accent': {};
+        '@apply p-14 rounded-16 w-[454px]': {};
+        '&[data-color="mono"]': {
+            '@apply bg-primitives-overlay-darken-1 dark:bg-primitives-overlay-lighten-1': {};
+        };
+        '&[data-color="vattjom"]': {
+            '@apply bg-vattjom-background-200': {};
+        };
+        '&-text-icon': {
+            '@apply mr-12 rounded-12 p-8': {};
+            '@apply bg-primitives-gray-lightest dark:bg-primitives-gray-800': {};
+            '@apply text-dark': {};
+            svg: {
+                height: string;
+                width: string;
+            };
+        };
+        '&-body': {
+            '&-header': {
+                'h1, h2, h3, h4, h5, h6, h7, a, p': {
+                    '@apply mt-6 text-base line-clamp-1': {};
+                    '@apply text-dark-primary': {};
+                };
+            };
+            '&-content': {
+                'p, a': {
+                    '@apply text-primitives-gray-700 dark:text-primitives-gray-200': {};
+                    '@apply text-dark-secondary line-clamp-1': {};
+                };
+            };
+        };
+        '&-external-link-icon': {
+            '@apply ml-auto h-[32px] w-[32px]': {};
+            '@apply p-6 text-dark': {};
+        };
+    };
+};