@sk-web-gui/core 0.1.68 → 0.1.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sk-web-gui/core",
-  "version": "0.1.68",
+  "version": "0.1.70",
   "license": "MIT",
   "main": "src/index.js",
   "files": [
@@ -31,5 +31,5 @@
     "postcss-import": "^14.0.2",
     "tailwindcss": "^2.2.4"
   },
-  "gitHead": "b4d080f30347f482b696750c233c39f3f2a7da62"
+  "gitHead": "df8579fb46bdf8153829a6a70b554f7b23abeaaf"
 }

package/src/components/accordion.js

@@ -34,7 +34,7 @@ module.exports = Accordion = (colors) => ({
     },
 
     '&-body': {
-      '@apply h-0 overflow-hidden m-lg': {},
+      '@apply h-0 overflow-hidden': {},
       transitionProperty: 'visibility, height, padding, margin',
       transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
       transitionDuration: '180ms',

package/src/components/forms.js

@@ -3,37 +3,6 @@ function fieldOutline(colors) {
     '&-outline': {
       '@apply border shadow-sm border-gray-stroke': {},
       '@apply text-gray bg-white': {},
-      //"@apply hover:border-neutral-300": {},
-
-      '&[aria-invalid=true]': {
-        '--tw-border-opacity': '1',
-        borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',
-        '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
-        '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
-        boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
-        '--tw-ring-opacity': '1',
-        '--tw-ring-color': 'rgba(220, 38, 38, var(--tw-ring-opacity))',
-      },
-      'focus-visible:ring-4': {},
-      /* dark mode */
-      '@apply dark:border-neutral-700': {},
-      '@apply dark:text-neutral-100 dark:bg-base': {},
-      '@apply dark:hover:border-neutral-600': {},
-
-      '.dark &[aria-invalid=true]': {
-        '--tw-border-opacity': '1',
-        borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
-        '--tw-ring-opacity': '1',
-        '--tw-ring-color': 'rgba(248, 113, 113, var(--tw-ring-opacity))',
-      },
-      '@media (prefers-color-scheme: dark)': {
-        '&[aria-invalid=true]': {
-          '--tw-border-opacity': '1',
-          borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
-          '--tw-ring-opacity': '1',
-          '--tw-ring-color': 'rgba(248, 113, 113, var(--tw-ring-opacity))',
-        },
-      },
 
       ...colors.reduce(
         (styles, color) => ({
@@ -45,6 +14,14 @@ function fieldOutline(colors) {
         }),
         {}
       ),
+
+      '&[aria-invalid=true]': {
+        '@apply border-error ring-error': {},
+
+        '&:focus-visible': {
+          '@apply border-error ring-error': {},
+        },
+      },
     },
   };
 }
@@ -54,35 +31,6 @@ function fieldSolid(colors) {
     '&-solid': {
       '@apply border border-transparent': {},
       '@apply text-black bg-gray-light': {},
-      //"@apply hover:bg-gray-200": {},
-
-      '&[aria-invalid=true]': {
-        '--tw-border-opacity': '1',
-        borderColor: 'rgba(220, 38, 38, var(--tw-border-opacity))',
-        '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
-        '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
-        boxShadow: 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
-        '--tw-ring-opacity': '1',
-        '--tw-ring-color': 'rgba(220, 38, 38, var(--tw-ring-opacity))',
-      },
-      'focus-visible:ring-4': {},
-      /* dark mode */
-      '@apply dark:text-neutral-100 dark:bg-white/50': {},
-      '@apply dark:hover:bg-white/100': {},
-      '.dark &[aria-invalid=true]': {
-        '--tw-border-opacity': '1',
-        borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
-        '--tw-ring-opacity': '1',
-        '--tw-ring-color': 'rgba(248, 113, 113, var(--tw-ring-opacity))',
-      },
-      '@media (prefers-color-scheme: dark)': {
-        '&[aria-invalid=true]': {
-          '--tw-border-opacity': '1',
-          borderColor: 'rgba(248, 113, 113, var(--tw-border-opacity))',
-          '--tw-ring-opacity': '1',
-          '--tw-ring-color': 'rgba(248, 113, 113, var(--tw-ring-opacity))',
-        },
-      },
 
       ...colors.reduce(
         (styles, color) => ({
@@ -94,6 +42,14 @@ function fieldSolid(colors) {
         }),
         {}
       ),
+
+      '&[aria-invalid=true]': {
+        '@apply border-error ring-error': {},
+
+        '&:focus-visible': {
+          '@apply border-error ring-error': {},
+        },
+      },
     },
   };
 }
@@ -107,20 +63,10 @@ function formControl() {
       '@apply mt-1.5 leading-none text-gray dark:text-white/60': {},
     },
     '.form-error-message': {
-      '@apply mt-1.5 leading-none flex items-center text-sm': {},
-      '--tw-text-opacity': '1',
-      color: 'rgba(239, 68, 68, var(--tw-text-opacity))',
-      '.dark &': {
-        '--tw-text-opacity': '1',
-        color: 'rgba(252, 165, 165, var(--tw-text-opacity))',
-      },
+      '@apply mt-1.5 leading-none flex items-center text-sm text-error': {},
     },
     '.form-label': {
       '@apply text-sm font-medium text-left align-middle block mb-1.5': {},
-
-      '&-disabled': {
-        //"@apply opacity-60": {},
-      },
     },
     '.form-required-indicator': {
       '@apply ml-1 text-sm': {},
@@ -137,7 +83,59 @@ function formControl() {
 function formInputGroup() {
   return {
     '.form-input-group': {
-      '@apply flex relative': {},
+      '@apply flex relative h-fit w-full rounded-[0.2rem] border border-gray-stroke': {},
+
+      '&:focus-within': {
+        '@apply border border-primary ring-primary ring-1': {},
+      },
+
+      '> *': {
+        '@apply border-0 ring-0': {},
+
+        '&:focus': {
+          '@apply ring-0': {},
+        },
+      },
+
+      '&-sm': {
+        '@apply min-h-[4rem] max-h-[4rem]': {},
+
+        '.form-field': {
+          '@apply min-h-[3.8rem] max-h-[3.8rem]': {},
+        },
+      },
+
+      '&-md': {
+        '@apply min-h-[4.4rem] max-h-[4.4rem]': {},
+
+        '.form-field': {
+          '@apply min-h-[4.2rem] max-h-[4.2rem]': {},
+        },
+      },
+
+      '&-lg': {
+        '@apply min-h-[4.8rem] max-h-[4.8rem]': {},
+
+        '.form-field': {
+          '@apply min-h-[4.6rem] max-h-[4.6rem]': {},
+        },
+      },
+
+      "&[data-rounded='true']": {
+        '@apply rounded-[3.2rem]': {},
+
+        '> *:first-child': {
+          '@apply rounded-[3.2rem]': {},
+        },
+
+        '> *:last-child': {
+          '@apply rounded-[3.2rem]': {},
+        },
+      },
+
+      '&[aria-invalid=true]': {
+        '@apply border-error ring-error': {},
+      },
     },
 
     '.form-input-element': {
@@ -157,8 +155,7 @@ function formInputGroup() {
     },
 
     '.form-input-addon': {
-      '@apply flex items-center w-auto rounded-base shadow-sm whitespace-nowrap': {},
-      '@apply border border-neutral-300': {},
+      '@apply flex items-center w-auto shadow-sm whitespace-nowrap': {},
       '@apply text-neutral-600 bg-neutral-50': {},
       // dark colors
       '@apply dark:border-neutral-700': {},
@@ -177,11 +174,35 @@ function formInputGroup() {
       },
 
       '&-left': {
-        '@apply -mr-1 rounded-r-none': {},
+        '@apply rounded-r-none': {},
       },
 
       '&-right': {
-        '@apply -ml-1 rounded-l-none': {},
+        '@apply rounded-l-none': {},
+      },
+    },
+    '.form-input-addin': {
+      '@apply flex items-center w-auto whitespace-nowrap': {},
+      '@apply text-body': {},
+
+      '&-sm': {
+        '@apply px-[1.44rem] text-xs': {},
+      },
+
+      '&-md': {
+        '@apply px-[1.6rem] text-sm': {},
+      },
+
+      '&-lg': {
+        '@apply px-[1.76rem] text-base': {},
+      },
+
+      '&-left': {
+        '@apply pr-0 rounded-r-none': {},
+      },
+
+      '&-right': {
+        '@apply pl-0 rounded-l-none': {},
       },
     },
   };
@@ -189,44 +210,32 @@ function formInputGroup() {
 
 module.exports = Forms = (colors) => ({
   '.form-field': {
-    '@apply placeholder-gray-stroke': {},
+    '@apply rounded-[0.2rem] placeholder-gray-stroke': {},
     '@apply relative w-full min-w-0 inline-flex items-center appearance-none focus-visible:outline-none': {},
     '@apply transition-colors	duration-75 ease-out': {},
 
     '&-sm': {
       '@apply text-sm leading-sm': {},
-      borderRadius: '0.2rem',
-      padding: '0 1.44rem',
-      minHeight: '4rem',
-      maxHeight: '4rem',
+      '@apply py-0 px-[1.44rem] min-h-[4rem] max-h-[4rem]': {},
     },
 
     '&-md': {
       '@apply text-base leading-base': {},
-      borderRadius: '0.2rem',
-      padding: '0 1.6rem',
-      minHeight: '4.4rem',
-      maxHeight: '4.4rem',
+      '@apply py-0 px-[1.6rem] min-h-[4.4rem] max-h-[4.4rem]': {},
     },
 
     '&-lg': {
-      '@apply text-lg leading-lg': {},
-      borderRadius: '0.2rem',
-      padding: '0 1.76rem',
-      minHeight: '4.8rem',
-      maxHeight: '4.8rem',
+      '@apply text-base leading-lg': {},
+      '@apply py-0 px-[1.76rem] min-h-[4.8rem] max-h-[4.8rem]': {},
     },
 
     '&-disabled, &&-disabled': {
       '@apply disabled:cursor-not-allowed cursor-not-allowed': {},
       '@apply disabled:bg-gray-lighter bg-gray-lighter': {},
-      //"@apply disabled:shadow-none disabled:cursor-not-allowed disabled:opacity-60": {},
-      //"@apply disabled:border-neutral-200 disabled:bg-neutral-200": {},
-      //"@apply dark:disabled:border-transparent dark:disabled:bg-white/20": {},
     },
 
     "&[data-rounded='true']": {
-      borderRadius: '3.2rem',
+      '@apply rounded-[3.2rem]': {},
     },
 
     // variants
@@ -234,8 +243,12 @@ module.exports = Forms = (colors) => ({
     ...fieldSolid(colors),
   },
 
-  '.form-close-button': {
-    '@apply border-0 ml-auto': {},
+  '.form-button': {
+    '@apply text-[1.1433em] border-0 ml-auto text-primary hover:text-white': {},
+
+    '&[data-icon=true]': {
+      '@apply p-[0.2em]': {},
+    },
 
     '&-icon': {
       '@apply inline-flex': {},

package/src/components/search-bar.js

@@ -1,17 +1,5 @@
 module.exports = SearchBar = () => ({
-  '.SearchBar': {
-    width: '100%',
-    position: 'relative',
-
-    '.search-button': {
-      '@apply flex items-center absolute inset-y-0 right-md text-primary': {},
-      '&-icon': {
-        '@apply !text-2xl': {},
-
-        '&.small': {
-          '@apply h-[13px] w-[13px]': {},
-        },
-      },
-    },
+  '.search-bar': {
+    '@apply w-full relative': {},
   },
 });