@sk-web-gui/core 0.1.93 → 1.0.0

package/src/components/icon.js

@@ -1,9 +1,78 @@
-module.exports = Icon = () => ({
-  '.icon-inline': {
-    '@apply inline-block align-middle': {},
-  },
+module.exports = Icon = (colors) => ({
+  '.sk-icon': {
+    '@apply inline-flex items-center justify-center': {},
+    '@apply w-24 h-24': {},
+    svg: {
+      '@apply w-full h-full': {},
+    },
+
+    '&.sk-icon-padded': {
+      '@apply rounded-utility': {},
+      '@apply text-light-primary fill-light-primary': {},
+      '@apply p-[0.4rem]': {},
+
+      ...colors.reduce(
+        (styles, color) => ({
+          ...styles,
+          [`&[data-color="${color}"]`]: {
+            [`@apply bg-${color}-surface-primary text-${color}-text-secondary fill-${color}-text-secondary`]: {},
+
+            '&[data-inverted="true"]': {
+              '@apply text-inverted-light-primary': {},
+              [`@apply bg-inverted-${color}-surface-primary text-inverted-${color}-text-secondary fill-inverted-${color}-text-secondary`]:
+                {},
+            },
+          },
+        }),
+        {}
+      ),
+
+      "&[data-color='primary'], &[data-color='tertiary']": {
+        '@apply bg-primary-surface text-light-primary fill-light-primary': {},
+
+        '&[data-inverted="true"]': {
+          '@apply text-inverted-light-primary fill-inverted-light-primary': {},
+          '@apply bg-tertiary-surface': {},
+        },
+      },
+      "&[data-variant='ghost']": {
+        '@apply bg-transparent text-current fill-current': {},
+
+        '&[data-inverted="true"]': {
+          '@apply bg-transparent text-current fill-current': {},
+        },
+      },
+    },
+
+    '&[data-size="fit"]': {
+      '@apply w-fit h-fit': {},
+    },
+
+    '&[data-rounded="true"]': {
+      '@apply rounded-circular': {},
+    },
+
+    ...colors.reduce(
+      (styles, color) => ({
+        ...styles,
+        [`&[data-color="${color}"]`]: {
+          '@apply text-inverted-light-primary': {},
+          [`@apply text-inverted-${color}-text-secondary fill-inverted-${color}-text-secondary`]: {},
+
+          '&[data-inverted="true"]': {
+            '@apply text-inverted-light-primary': {},
+            [`@apply bg-inverted-${color}-surface-primary text-inverted-${color}-text-secondary fill-inverted-${color}-text-secondary`]:
+              {},
+          },
+        },
+      }),
+      {}
+    ),
 
-  '.icon-block': {
-    '@apply block': {},
+    "&[data-color='primary']": {
+      '&[data-inverted="true"]': {
+        '@apply text-light-primary fill-light-primary': {},
+      },
+    },
   },
 });

package/src/components/input.js

@@ -0,0 +1,244 @@
+function calendar() {
+  return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='4' rx='2' ry='2' /><line x1='16' x2='16' y1='2' y2='6' /><line x1='8' x2='8' y1='2' y2='6' /><line x1='3' x2='21' y1='10' y2='10' /></svg>`;
+}
+function clock() {
+  return `<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10' /><polyline points='12 6 12 12 16 14' /></svg>`;
+}
+
+function inputStandards() {
+  return {
+    '@apply border-1': {},
+    '@apply border-primitives-overlay-darken-6': {},
+    '@apply dark:border-primitives-overlay-lighten-6': {},
+    '@apply hover:border-primitives-overlay-darken-8': {},
+    '@apply dark:hover:border-primitives-overlay-lighten-4': {},
+
+    '@apply placeholder:text-dark-placeholder': {},
+
+    '@apply bg-primitives-overlay-lighten-10': {},
+    '@apply dark:bg-primitives-overlay-darken-6': {},
+
+    //Invalid
+    '&:invalid, &[aria-invalid="true"]': {
+      '@apply border-2 border-error-surface-primary': {},
+    },
+
+    //Disabled
+    '&:disabled, &[aria-disabled="true"]': {
+      '@apply bg-primitives-overlay-darken-1': {},
+      '@apply dark:bg-primitives-overlay-lighten-1': {},
+      '@apply border-primitives-overlay-darken-3': {},
+      '@apply dark:border-primitives-overlay-lighten-3': {},
+      '@apply hover:border-primitives-overlay-darken-3': {},
+      '@apply dark:hover:border-primitives-overlay-lighten-3': {},
+      '@apply text-dark-disabled': {},
+    },
+  };
+}
+
+function addin() {
+  return {
+    '&-addin': {
+      '@apply bg-transparent': {},
+      '@apply flex': {},
+      '@apply justify-start items-center': {},
+      '&-sm': {
+        '@apply px-6 gap-6': {},
+        '&.sk-form-input-addin-left': {
+          '@apply -mr-12': {},
+          '@apply pl-10': {},
+        },
+        '&.sk-form-input-addin-right': {
+          '@apply -ml-12': {},
+          '@apply pr-10': {},
+        },
+        svg: {
+          '@apply w-[1.6rem] h-[1.6rem]': {},
+        },
+      },
+      '&-md': {
+        '@apply md:px-8 md:gap-8': {},
+        '&.sk-form-input-addin-left': {
+          '@apply -mr-16': {},
+          '@apply pl-12': {},
+        },
+        '&.sk-form-input-addin-right': {
+          '@apply -ml-16': {},
+          '@apply pr-12': {},
+        },
+        svg: {
+          '@apply w-[2rem] h-[2rem]': {},
+        },
+      },
+      '&-lg': {
+        '@apply md:px-8 md:gap-8': {},
+        '&.sk-form-input-addin-left': {
+          '@apply -mr-20': {},
+          '@apply pl-16': {},
+        },
+        '&.sk-form-input-addin-right': {
+          '@apply -ml-20': {},
+          '@apply pr-16': {},
+        },
+        svg: {
+          '@apply w-[2.2rem] h-[2.2rem]': {},
+        },
+      },
+    },
+  };
+}
+
+function inputGroup() {
+  return {
+    '&-group': {
+      '@apply flex relative': {},
+      '@apply items-center': {},
+      '@apply focus-within:ring': {},
+      '@apply focus-within:ring-ring': {},
+      '@apply text-dark-secondary': {},
+      //Focus
+      '@apply focus-within:border-primitives-overlay-lighten-10': {},
+      '@apply dark:focus-within:border-primitives-overlay-darken-6': {},
+
+      '&:not(:invalid):not([aria-invalid="true"])': {
+        '@apply focus-within:hover:border-primitives-overlay-lighten-10': {},
+        '@apply dark:focus-within:hover:border-primitives-overlay-darken-6': {},
+      },
+
+      '&:disabled, &[aria-disabled="true"]': {
+        '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {
+          '@apply color-black-disabled': {},
+        },
+      },
+      '&&-lg': {
+        '@apply text-input-large': {},
+        '@apply rounded-button-lg': {},
+      },
+      '&&-md': {
+        '@apply text-input-medium': {},
+        '@apply rounded-button-md': {},
+      },
+      '&&-sm': {
+        '@apply text-input-small': {},
+        '@apply rounded-button-sm': {},
+      },
+      ...inputStandards(),
+      '.sk-form-input': {
+        '@apply rounded-0': {},
+        '@apply border-0': {},
+        '@apply focus:ring-0': {},
+        '@apply focus:ring-offset-0': {},
+        '@apply bg-transparent': {},
+        '@apply dark:bg-transparent': {},
+        '@apply grow': {},
+      },
+    },
+  };
+}
+
+function timeAndDatePicker() {
+  return {
+    '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {
+      '@apply block': {},
+      '@apply p-0': {},
+      '@apply pl-6 md:pl-8': {},
+      '@apply m-0': {},
+      '@apply bg-none': {},
+      '@apply bg-dark-secondary': {},
+      '&.sk-form-input-sm': {
+        '@apply w-[1.6rem] h-[1.6rem]': {},
+        '@apply -mr-2': {},
+      },
+      '&.sk-form-input-md': {
+        '@apply -mr-4': {},
+        '@apply w-[1.8rem] h-[1.8rem]': {},
+      },
+      '&.sk-form-input-lg': {
+        '@apply -mr-6': {},
+        '@apply w-[2rem] h-[2rem]': {},
+      },
+    },
+
+    '&[type="date"]::-webkit-inner-spin-button, &[type="date"]::-webkit-calendar-picker-indicator': {
+      mask: [`url("data:image/svg+xml;utf-8,${calendar()}") no-repeat 100% 100%`],
+      '-webkit-mask': [`url("data:image/svg+xml;utf-8,${calendar()}") no-repeat 100% 100%`],
+      maskSize: 'contain',
+      '-webkit-mask-size': 'contain',
+    },
+    '&[type="datetime-local"]::-webkit-inner-spin-button, &[type="datetime-local"]::-webkit-calendar-picker-indicator':
+      {
+        mask: [`url("data:image/svg+xml;utf-8,${calendar()}") no-repeat 100% 100%`],
+        '-webkit-mask': [`url("data:image/svg+xml;utf-8,${calendar()}") no-repeat 100% 100%`],
+        maskSize: 'contain',
+        '-webkit-mask-size': 'contain',
+      },
+    '&[type="time"]::-webkit-inner-spin-button, &[type="time"]::-webkit-calendar-picker-indicator': {
+      mask: [`url("data:image/svg+xml;utf-8,${clock()}") no-repeat 100% 100%`],
+      '-webkit-mask': [`url("data:image/svg+xml;utf-8,${clock()}") no-repeat 100% 100%`],
+      maskSize: 'contain',
+      '-webkit-mask-size': 'contain',
+    },
+
+    '&:disabled, &[aria-disabled="true"]': {
+      '&::-webkit-inner-spin-button, &::-webkit-calendar-picker-indicator': {
+        '@apply color-black-disabled': {},
+      },
+    },
+  };
+}
+
+module.exports = Input = () => ({
+  '.sk-form-input': {
+    '@apply grow-0': {},
+    '@apply text-dark-primary': {},
+
+    '&[data-hideextra="true"]': {
+      '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+        '-webkit-appearance': 'none',
+        display: 'none',
+        margin: 0,
+      },
+      '-moz-appearance': 'textfield',
+    },
+
+    '&&-lg': {
+      '@apply rounded-button-lg': {},
+      '@apply px-20': {},
+      '@apply py-12': {},
+      '@apply gap-8': {},
+      '@apply text-input-large': {},
+      '@apply h-[4.8rem]': {},
+    },
+    '&&-md': {
+      '@apply rounded-button-md': {},
+      '@apply px-16': {},
+      '@apply py-8': {},
+      '@apply gap-8': {},
+      '@apply text-input-medium': {},
+      '@apply h-[4rem]': {},
+    },
+    '&&-sm': {
+      '@apply rounded-button-sm': {},
+      '@apply px-12': {},
+      '@apply py-6': {},
+      '@apply gap-6': {},
+      '@apply text-input-small': {},
+      '@apply h-[3.2rem]': {},
+    },
+
+    //Focus
+    '@apply focus:ring': {},
+    '@apply focus:ring-ring': {},
+    '@apply focus:ring-offset': {},
+    '@apply focus:border-primitives-overlay-lighten-10': {},
+    '@apply dark:focus:border-primitives-overlay-darken-6': {},
+    '&:not(:invalid):not([aria-invalid="true"])': {
+      '@apply focus:hover:border-primitives-overlay-lighten-10': {},
+      '@apply dark:focus:hover:border-primitives-overlay-darken-6': {},
+    },
+    ...timeAndDatePicker(),
+    ...inputStandards(),
+    ...inputGroup(),
+    ...addin(),
+  },
+});

package/src/components/kbd.js

@@ -4,6 +4,6 @@ module.exports = Kbd = () => ({
     minWidth: '1.25rem',
     '@apply bg-blackAlpha-100 text-body': {},
     // dark
-    '@apply dark:bg-white/30 dark:text-neutral-300': {},
+    // '@apply dark:bg-white/30 dark:text-neutral-300': {},
   },
 });

package/src/components/label.js

@@ -0,0 +1,37 @@
+module.exports = Label = (colors) => ({
+  '.sk-label': {
+    '@apply inline-flex flex-row': {},
+    '@apply justify-center items-center': {},
+    '@apply gap-6 px-10 py-4': {},
+    '@apply h-24 max-h-24': {},
+    '@apply text-label-small': {},
+
+    '@apply rounded-utility-sm md:rounded-utility-md xl:rounded-utility-lg': {},
+
+    '@apply bg-primary-surface': {},
+    '@apply text-light-primary': {},
+
+    '&[data-rounded="true"]': {
+      '@apply rounded-full': {},
+    },
+    '&[data-inverted="true"]': {
+      '@apply bg-inverted-primary-surface': {},
+      '@apply text-inverted-light-primary': {},
+    },
+
+    ...colors.reduce(
+      (styles, color) => ({
+        ...styles,
+        [`&[data-color="${color}"]`]: {
+          [`@apply bg-${color}-surface-primary`]: {},
+          [`@apply text-${color}-text-secondary`]: {},
+          '&[data-inverted="true"]': {
+            [`@apply bg-${color}-surface-accent`]: {},
+            [`@apply text-${color}-text-primary`]: {},
+          },
+        },
+      }),
+      {}
+    ),
+  },
+});

package/src/components/link.js

@@ -1,19 +1,45 @@
 module.exports = Link = () => ({
-  '.link': {
-    '@apply cursor-base underline outline-none hover:underline': {},
-    '@apply text-primary dark:text-primary': {},
-    '@apply focus-visible:ring-4 focus-visible:ring-primary': {},
+  '.sk-link': {
+    '@apply underline outline-none hover:underline': {},
+    '@apply rounded-utility': {},
 
-    '@apply hover:text-primary-active': {},
+    // focus
+    '@apply focus-visible:ring ring-offset-[.6rem]': {},
+
+    // sizes
+    '&-sm': {
+      '@apply text-small leading-[2rem]': {},
+    },
+    '&-md': {
+      '@apply text-base': {},
+    },
+    '&-lg': {
+      '@apply text-large': {},
+    },
+    '&-xl': {
+      '@apply text-lead leading-[3.2rem]': {},
+    },
+
+    // variants
+    '&-primary': {
+      '@apply text-vattjom-surface-primary': {},
+      '&:hover': {
+        '@apply text-vattjom-surface-primary-hover': {},
+      },
+    },
+    '&-tertiary': {
+      '@apply text-dark-secondary': {},
+      '&:hover': {
+        '@apply text-dark-primary': {},
+      },
+    },
 
     '&.active': {
-      '@apply underline text-primary-active': {},
+      '@apply underline': {},
     },
-    '&-external-icon': {
-      fontSize: '0.875em !important',
-      lineHeight: '1',
-      marginLeft: '.25em',
-      verticalAlign: 'text-top',
+
+    '& &-external-icon': {
+      '@apply w-[1em] h-[1em] leading-none ml-[.25em] align-text-top': {},
     },
 
     '&[type="button"]': {
@@ -21,7 +47,7 @@ module.exports = Link = () => ({
     },
 
     '&-disabled': {
-      '@apply disabled:opacity-60 disabled:cursor-not-allowed disabled:no-underline': {},
+      '@apply text-dark-disabled cursor-default': {},
     },
   },
 });

package/src/components/list.js

@@ -0,0 +1,61 @@
+module.exports = Link = () => ({
+  '.sk-list': {
+    // General
+    li: {
+      '&:before': {
+        '@apply text-vattjom-surface-primary font-bold': {},
+        '@apply absolute inline-flex items-center justify-center text-center': {},
+        '@apply w-24 h-24': {},
+      },
+    },
+
+    '&[data-style="bullet"]': {
+      li: {
+        '&:before': {
+          "@apply content-['•'] my-[.5rem] text-[1.8rem]": {},
+        },
+      },
+    },
+
+    '&[data-style="numbered"]': {
+      li: {
+        counterIncrement: 'item',
+
+        '&:before': {
+          '@apply text-small border-vattjom-surface-primary rounded-full leading-8': {},
+          '@apply my-[.6rem] h-[2.2rem] w-[2.2rem] border-[.2rem]': {},
+          content: 'counter(item)',
+        },
+      },
+    },
+
+    '&[data-style="stroke"]': {
+      li: {
+        '&:before': {
+          "@apply content-['–'] my-[.4rem] text-[1.6rem]": {},
+        },
+      },
+    },
+
+    '.sk-link': {
+      '&-tertiary': {
+        '@apply text-dark-primary': {},
+        '&:hover': {
+          '@apply text-dark-secondary': {},
+        },
+      },
+    },
+
+    '&-item': {
+      '@apply pt-20': {},
+    },
+
+    '&-header': {
+      '@apply text-large font-bold ml-[3.2rem]': {},
+    },
+
+    '&-text': {
+      '@apply text-dark-secondary ml-[3.2rem]': {},
+    },
+  },
+});

package/src/components/logo.js

@@ -0,0 +1,48 @@
+module.exports = Logo = () => ({
+  '.sk-logo': {
+    '@apply flex w-auto h-auto': {},
+    '@apply items-center': {},
+    '@apply text-dark-primary': {},
+    '&[data-inverted="true"]': {
+      '@apply text-light-primary': {},
+      '.sk-logo-divider': {
+        '@apply border-inverted-divider': {},
+      },
+    },
+
+    '&-figure': {
+      '@apply w-full h-full': {},
+    },
+    '&[data-variant="service"]': {
+      '@apply flex-row gap-6': {},
+      '@apply w-auto h-[6rem]': {},
+      '@apply pb-4': {},
+      '.sk-logo-figure': {
+        '@apply w-auto h-[5.6rem]': {},
+      },
+    },
+    'a:focus-within &': {
+      '@apply outline outline-2 outline-ring': {},
+    },
+    'a &': {
+      '@apply no-underline': {},
+    },
+    'a:hover &': {
+      '@apply underline': {},
+    },
+    '&-service-content': {
+      '@apply h-full w-max': {},
+      '@apply flex flex-col justify-center': {},
+      '@apply pl-2 pt-2 pr-8 pb-0': {},
+    },
+    '&-title': {
+      '@apply text-[2.2rem] leading-[2.8rem] font-header font-bold': {},
+    },
+    '&-subtitle': {
+      '@apply text-small font-normal block': {},
+    },
+    '&-divider': {
+      '@apply pt-8 pb-4': {},
+    },
+  },
+});