@sk-web-gui/core 0.1.93 → 1.0.1

package/src/components/card.js

@@ -1,47 +1,238 @@
-module.exports = Card = () => ({
-  '.avatar': {
-    '@apply bg-primary-light text-primary rounded-full p-4': {},
-  },
+module.exports = Card = (colors) => ({
+  '.sk-card': {
+    '@apply bg-white relative rounded-b-cards rounded-cards': {},
+    '@apply flex flex-col': {},
+    '@apply no-underline hover:no-underline': {},
+    '@apply h-[100%]': {},
 
-  '.card-list': {
-    '@apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10': {},
-    //"@apply text-center": {},
-    //"@apply justify-center items-center": {},
-  },
+    '&-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: 'green',
+          '@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': {},
+      },
+    },
+
+    ...colors.reduce(
+      (styles, color) => ({
+        ...styles,
+
+        '&[data-color="mono"], &[data-color="tertiary"]': {
+          '@apply border-solid border-1': {},
+          '@apply border-primitives-overlay-darken-5 dark:border-primitives-overlay-lighten-5': {},
+          '@apply bg-primitives-gray-lightest dark:bg-primitives-gray-800': {},
+
+          '.sk-card-body-meta': {
+            '@apply text-dark-secondary': {},
+          },
+
+          '.sk-card-body-icon': {
+            '@apply bg-primitives-overlay-darken-9 dark:bg-primitives-overlay-lighten-10': {},
+            '@apply text-primitives-gray-lightest dark:text-primitives-overlay-darken-9': {},
+            '@apply hover:bg-primitives-overlay-darken-10 dark:hover:bg-primitives-gray-lightest': {},
+          },
+
+          // inverted.
+          [`&[data-inverted="true"]`]: {
+            '@apply bg-primitives-gray-800': {},
+
+            '.sk-card-body': {
+              // Meta
+              '&-meta': {
+                span: {
+                  '@apply text-light-secondary': {},
+                },
+              },
+
+              // header
+              '&-header': {
+                'h1, h2, h3, h4, h5, h6, h7, a': {
+                  [`@apply text-light-primary`]: {},
+                },
+              },
+
+              // Content
+              '&-content': {
+                'p, a': {
+                  [`@apply text-light-secondary`]: {},
+                },
+              },
+
+              '.sk-card-body-icon': {
+                '@apply bg-primitives-overlay-lighten-10 text-primitives-gray-900': {},
+                '@apply hover:bg-primitives-gray-lightest': {},
+              },
+            },
+          },
+        },
+
+        '&[data-color="tertiary"]': {
+          '@apply border-solid border-1': {},
+          '@apply border-primitives-overlay-darken-5 dark:border-primitives-overlay-lighten-5': {},
+          '@apply bg-primitives-gray-50 dark:bg-primitives-gray-700': {},
+        },
+
+        [`&[data-color="${color}"]`]: {
+          // card
+          [`@apply bg-${color}-surface-primary-hover`]: {},
+
+          // clickable
+          '&.sk-card-use-hover-effect': {
+            // hover
+            [`@apply hover:cursor-pointer hover:bg-${color}-surface-primary`]: {},
+          },
+
+          // Meta
+          '.sk-card-body': {
+            '&-meta': {
+              span: {
+                '@apply text-light-secondary': {},
+              },
+            },
+
+            // header
+            '&-header': {
+              'h1, h2, h3, h4, h5, h6, h7, a': {
+                [`@apply text-light-primary`]: {},
+              },
+            },
 
-  '.card': {
-    '@apply p-lg rounded shadow-lg bg-white relative': {},
-    '@apply p-0': {},
-    //padding: "2.4rem",
+            // Content
+            '&-content': {
+              'p, a': {
+                [`@apply text-light-secondary`]: {},
+              },
+            },
+          },
+
+          // inverted.
+          [`&[data-inverted="true"]`]: {
+            // card
+            [`@apply bg-${color}-surface-accent-hover`]: {},
+
+            // clickable
+            '&.sk-card-use-hover-effect': {
+              // hover
+              [`@apply hover:cursor-pointer hover:bg-${color}-surface-accent`]: {},
+            },
+
+            '.sk-card-body': {
+              // Meta
+              '&-meta': {
+                span: {
+                  '@apply text-dark-secondary': {},
+                },
+              },
+
+              // header
+              '&-header': {
+                'h1, h2, h3, h4, h5, h6, h7, a': {
+                  [`@apply text-dark-primary`]: {},
+                },
+              },
+
+              // Content
+              '&-content': {
+                'p, a': {
+                  [`@apply text-dark-secondary`]: {},
+                },
+              },
+            },
+          },
+        },
+      }),
+      {}
+    ),
 
     // clickable
-    '&-clickable': {
-      // Hover
-      '@apply hover:shadow-xl hover:cursor-pointer': {},
+    '&.sk-card-use-hover-effect': {
+      //Hide and show of icon
+      '.sk-card-body-icon': {
+        '@apply inline-flex': {},
+        '@apply mt-auto mb-auto mr-24': {},
+      },
     },
 
-    // "@apply bg-neutral-200 border border-neutral-100 text-body": {},
-    // dark
-    //"@apply dark:bg-neutral-700 dark:border-neutral-600 dark:text-neutral-300": {},
-  },
-  '.card-outlined': {
-    '@apply border-2 border-gray-stroke': {},
-  },
-  '.card-border-top': {
-    '@apply border-t-4 border-t-primary': {},
-  },
+    [`&[data-layout="horizontal"]`]: {
+      '@apply flex-row h-[100%]': {},
 
-  '.card-body': {
-    '@apply text-body p-8': {},
-  },
+      '.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%]': {},
+          },
 
-  '.card-image': {
-    '@apply object-cover': {},
-    width: '100%',
-    height: '250px',
+          '&-content': {
+            'p, a': {
+              '@apply text-small': {},
+            },
+          },
+
+          '&-meta': {
+            '@apply hidden': {},
+          },
+        },
+      },
+    },
   },
 
-  '.card-link': {
+  '.sk-card-link': {
+    '@apply hover:cursor-pointer': {},
+
     '&::after': {
       content: "''",
       position: 'absolute',
@@ -51,4 +242,52 @@ module.exports = Card = () => ({
       bottom: '0',
     },
   },
+
+  /**
+   * 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: 'unset',
+        width: 'unset',
+      },
+    },
+
+    '&-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': {},
+    },
+  },
 });

package/src/components/checkbox.js

@@ -1,133 +1,135 @@
-const svgToDataUri = require('mini-svg-data-uri');
+module.exports = Checkbox = () => ({
+  '.sk-form-checkbox': {
+    '@apply bg-inherit': {},
+    '@apply rounded-utility': {},
+    '@apply bg-transparent border-transparent': {},
 
-module.exports = Checkbox = (colors) => ({
-  '.form-checkbox': {
-    //"@apply rounded shadow-sm": {},
-    backgroundColor: 'inherit',
-    '@apply border-gray-stroke focus:bg-white': {},
-
-    '&[aria-invalid=true]': {
-      '--tw-border-opacity': '1',
-      borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',
-    },
-    '&[aria-invalid=true]:hover': {
-      '--tw-border-opacity': '1',
-      'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))',
+    // sizing
+    '&-sm': {
+      '@apply w-[2.4rem] h-[2.4rem]': {},
     },
-    // dark colors
-    '@apply dark:border-neutral-400': {},
-    '.dark &[aria-invalid=true]': {
-      '--tw-border-opacity': '1',
-      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
+
+    '&-md': {
+      '@apply w-[2.4rem] h-[2.4rem]': {},
     },
-    '.dark &[aria-invalid=true]:hover': {
-      '--tw-border-opacity': '1',
-      borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
+
+    '&-lg': {
+      '@apply w-[2.4rem] h-[2.4rem]': {},
     },
 
-    '@media (prefers-color-scheme: dark)': {
-      '&[aria-invalid=true]': {
-        '--tw-border-opacity': '1',
-        borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',
-      },
-      '&[aria-invalid=true]:hover': {
-        '--tw-border-opacity': '1',
-        'border-color': 'rgba(220, 38, 38, var(--tw-border-opacity))',
+    '+ .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 bg-primitives-overlay-lighten-10 dark:bg-primitives-overlay-darken-6': {},
+
+      svg: {
+        '@apply hidden': {},
       },
     },
 
-    '&:checked': {
-      '@apply text-white bg-white border-primary': {},
-      [`@apply focus-visible:border-primary focus-visible:ring-primary`]: {},
+    '&&:checked': {
+      '@apply text-light-primary bg-none': {},
 
-      backgroundImage: `url("${svgToDataUri(
-        `<svg viewBox="0 0 16 16" fill="#005595" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>`
-      )}")`,
-      //borderColor: "transparent",
-    },
+      '& + .sk-icon': {
+        '@apply text-light-primary bg-dark-primary border-dark-primary': {},
 
-    [`&[data-color="primary"]`]: {
-      //[`@apply text-primary`]: {},
-      // dark
-      //[`@apply dark:text-primary`]: {},
-      //[`@apply dark:focus-visible:border-primary-400 dark:focus-visible:ring-primary-400`]: {},
+        svg: {
+          '@apply block': {},
+        },
+      },
     },
 
-    // Fix focus stylign
-    '&:checked:hover, &:checked:focus': {
-      '@apply bg-white border-primary': {},
-    },
+    '&&:hover:not(&&-disabled,&&:checked,&&[aria-invalid=true]),&&:hover:focus:not(&&-disabled,&&:checked,&&[aria-invalid=true])':
+      {
+        '& + .sk-icon, &:focus + .sk-icon': {
+          '@apply text-primitives-overlay-darken-6 dark:text-primitives-overlay-lighten-5 border-primitives-overlay-darken-8 dark:border-primitives-overlay-lighten-4':
+            {},
 
-    // colors
-    /*...colors.reduce(
-      (styles, color) => ({
-        ...styles,
-        [`&[data-color="${color}"]`]: {
-          [`@apply text-${color}`]: {},
-          [`@apply focus-visible:border-${color} focus-visible:ring-${color}`]: {},
-          backgroundImage: `url("${svgToDataUri(
-            `<svg viewBox="0 0 16 16" fill="${theme(`colors.primary_raw.DEFAULT`)}" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>`
-          )}")`,
-          // dark
-          [`@apply dark:text-${color}`]: {},
-          [`@apply dark:focus-visible:border-${color}-400 dark:focus-visible:ring-${color}-400`]: {},
+          svg: {
+            '@apply block': {},
+          },
         },
-      }),
-      {}
-    ),*/
-
-    '@apply dark:focus-visible:ring-offset-neutral-900': {},
+      },
 
-    // sizing
-    '&-sm': {
-      width: '1.4rem',
-      height: '1.4rem',
-    },
+    '&&[aria-invalid=true]': {
+      '& + .sk-icon': {
+        '@apply border-2 border-error-surface-primary': {},
+      },
 
-    '&-md': {
-      width: '1.6rem',
-      height: '1.6rem',
-      //"@apply w-4 h-4": {},
-    },
+      '&&:checked': {
+        '& + .sk-icon': {
+          '@apply p-2 bg-background-content text-dark-primary': {},
 
-    '&-lg': {
-      width: '1.8rem',
-      height: '1.8rem',
+          svg: {
+            '@apply block': {},
+          },
+        },
+      },
     },
 
     // disabled
-    '&-disabled, &-disabled:checked': {
-      '@apply grayscale cursor-not-allowed bg-gray-middle hover:bg-gray-middle': {},
-      //"@apply disabled:bg-gray-stroke": {},
-      //"@apply disabled:shadow-none disabled:border-neutral-300 disabled:bg-neutral-300 disabled:hover:text-neutral-300": {},
-      //"@apply dark:disabled:border-transparent dark:disabled:bg-white/20 dark:disabled:hover:text-white/20": {},
+    '&&-disabled,&&-disabled:hover': {
+      '@apply cursor-not-allowed': {},
+
+      '& + .sk-icon': {
+        '@apply bg-background-200 border-primitives-overlay-darken-3': {},
+      },
+
+      '&:checked': {
+        '& + .sk-icon': {
+          '@apply bg-dark-disabled text-light-primary border-0': {},
+        },
+      },
+
+      '& ~ .sk-form-checkbox-label': {
+        '@apply text-dark-disabled': {},
+      },
     },
 
     // label
     '&-label-left &-label': {
-      marginRight: '0.8rem',
+      '@apply mr-[.8rem]': {},
     },
     '&-label-right &-label': {
-      marginLeft: '0.8rem',
+      '@apply ml-[.8rem]': {},
+    },
+
+    '&-label-left': {
+      '.sk-icon': {
+        '@apply left-auto right-0': {},
+      },
+    },
+
+    '&-label-right': {
+      '.sk-icon': {
+        '@apply right-auto left-0': {},
+      },
     },
 
     '&-label': {
-      '@apply text-body select-none text-sm': {},
-      // marginLeft: '0.8rem',
-      //"@apply text-black": {},
-      // dark colors
-      '@apply dark:text-neutral-100': {},
+      '@apply font-normal text-body select-none text-small': {},
+
+      '&-wrapper': {
+        '@apply relative inline-flex align-top items-center cursor-base': {},
+      },
 
       '&-sm': {
-        '@apply text-xs': {},
+        '@apply text-small': {},
       },
 
       '&-md': {
-        '@apply text-sm': {},
+        '@apply text-base': {},
       },
 
       '&-lg': {
-        '@apply text-base': {},
+        '@apply text-large': {},
+      },
+    },
+
+    '&-group': {
+      '@apply flex flex-col gap-16 my-12': {},
+      '&[data-direction="row"]': {
+        '@apply flex-row': {},
       },
     },
   },

package/src/components/combobox.js

@@ -0,0 +1,66 @@
+module.exports = ComboBox = () => ({
+  '.sk-form-combobox': {
+    '@apply focus-within:ring ring-ring ring-offset': {},
+    '@apply relative w-auto': {},
+    '@apply inline-block': {},
+    '&-sm': {
+      '@apply h-[3.2rem]': {},
+      '@apply rounded-button-sm': {},
+      '.sk-form-combobox-select.active': {
+        '@apply text-input-small': {},
+        '@apply pr-[5.2rem]': {},
+      },
+    },
+    '&-md': {
+      '@apply h-[4rem]': {},
+      '@apply rounded-button-md': {},
+      '.sk-form-combobox-select.active': {
+        '@apply text-input-medium': {},
+        '@apply pr-[6.1rem]': {},
+      },
+    },
+    '&-lg': {
+      '@apply h-[4.8rem]': {},
+      '@apply rounded-button-lg': {},
+      '.sk-form-combobox-select.active': {
+        '@apply text-input-large': {},
+        '@apply pr-[6.8rem]': {},
+      },
+    },
+
+    '&-select': {
+      '@apply h-full bg-right-12 bg-no-repeat': {},
+
+      '&.sk-form-select': { '@apply focus:outline-none focus:ring-0 focus:ring-transparent': {} },
+      '@apply w-full': {},
+
+      '&:not(.active)': {
+        '@apply cursor-default': {},
+      },
+      '@apply focus:border-transparent': {},
+      '@apply focus:hover:border-transparent': {},
+      '&.active': {
+        '@apply bg-primitives-overlay-lighten-10': {},
+        '@apply dark:bg-primitives-overlay-darken-6': {},
+        '@apply placeholder:text-dark-placeholder': {},
+        '@apply text-dark-primary': {},
+        '@apply border-transparent': {},
+      },
+    },
+    '&-list': {
+      '@apply w-full': {},
+      '@apply max-h-[23rem] overflow-y-auto': {},
+      '&-option': {
+        '&.sk-popup-menu-item': {
+          '@apply cursor-default': {},
+          '@apply leading-none': {},
+          '@apply h-auto': {},
+        },
+
+        '&-checkbox': {
+          '@apply w-0 h-0 m-0 p-0 opacity-0': {},
+        },
+      },
+    },
+  },
+});

package/src/components/comments.js

@@ -1,34 +1,38 @@
-module.exports = Comments = () => ({
-  '.comment-header': {
-    '@apply w-full flex items-center gap-8 p-16 border-b-4 border-gray-200': {},
-  },
+module.exports = Comments = () => ({ 
 
-  '.comment-item': {
-    '@apply w-full': {},
+    '.comment-header': {
+        '@apply w-full flex items-center gap-8 p-16 border-b-4 border-gray-200': {},
+    },
 
-    '&-container': {
-      '@apply flex relative w-full': {},
+    '.comment-item':{
+        '@apply w-full': {},
 
-      '&-textpic': {
-        '@apply flex gap-2 grow': {},
-      },
-    },
-    '&-text': {
-      '@apply text-base font-bold mx-0 mb-0 mt-4': {},
-    },
-    '&-commentorpublished': {
-      '@apply float-right text-neutral-600 m-0': {},
-    },
-  },
-  '.comment-input': {
-    '@apply w-full flex gap-4 px-10 pt-8 pb-10': {},
+        '&-container': {
+            '@apply flex justify-between relative': {},
 
-    '&-inactive': {
-      '@apply text-neutral-300 !text-3xl': {},
+            '&-textpic': {
+                '@apply flex gap-2': {},
+            },
+        },
+        '&-text': {
+            '@apply text-base font-bold mx-0 mb-0 mt-4': {},
+        },
+        '&-commentorpublished': {
+            '@apply float-right text-neutral-600 m-0': {},
+        },
     },
+    '.comment-input':{
+        '@apply w-full flex gap-4 px-10 pt-8 pb-10': {},
+
+        '&-inactive': {
+            '@apply text-neutral-300 !text-3xl': {},
+        },
+
+        '&-active': {
+            '@apply text-primary !text-3xl': {},
+        }
 
-    '&-active': {
-      '@apply text-primary !text-3xl': {},
     },
-  },
-});
+
+   
+});