amotify 0.0.14 → 0.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "UI Component for React",
   "main": "dist/launch.js",
   "types": "dist/@types.d.ts",

package/src/@styles/UniStyling.scss

@@ -166,6 +166,9 @@
       &3#{ $DS } {
         font-weight: bold;
       }
+      &inherit#{ $DS } {
+        font-weight: inherit;
+      }
     }
   }
   &bgc {
@@ -556,6 +559,9 @@
         &dotted#{ $DS } {
           border-style: dotted;
         }
+        &none#{ $DS } {
+          border-style: none;
+        }
       }
     }
     &r_ {

package/src/@styles/init.scss

@@ -1,12 +1,4 @@
 @use './props' as *;
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  &:before, &:after {
-    box-sizing: border-box;
-  }
-}
 html {
   &.usrDevice_ {
     &Windows {
@@ -28,15 +20,26 @@ html {
     &iPhone {}
     &iPad {}
   }
-  * {
-    line-height: 1.5;
-    &::selection {
-      background-color: $color-theme !important;
-      color: #fff !important;
-    }
-  }
 }
-body {
+.AMOTIFY_be_body {
+  padding: 0;
+  margin: 0;
+  transition: opacity $animation-time-middle;
+  background-color: $color-dark;
+}
+.AMOTIFY_be_origin {
+  max-width: 200rem;
+  min-height: $viewHeight;
+  background-color: $color-base;
+  position: relative;
+  margin: 0 auto;
+  padding: 0;
+  z-index: 1;
+}
+.AMOTIFY_be {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
   letter-spacing: .5px;
   word-wrap: break-word;
   word-break: normal;
@@ -54,101 +57,34 @@ body {
   font-kerning: normal;
   // -webkit-font-smoothing: antialiased;
   caret-color: $color-theme;
-  transition: opacity $animation-time-middle;
-  background-color: $color-dark;
-  .amotify_base_element_root {
-    max-width: 200rem;
-    min-height: $viewHeight;
-    background-color: $color-base;
-    position: relative;
-    margin: 0 auto;
+  line-height: 1.5;
+  * {
     padding: 0;
-    z-index: 1;
+    margin: 0;
+    box-sizing: border-box;
+    &:before, &:after {
+      box-sizing: border-box;
+    }
   }
-}
-a, button, label, input, button, select, textarea {
-  display: inline-block;
-  font-size: inherit;
-  font-family: inherit;
-  font-weight: inherit;
-  color: inherit;
-  outline: none;
-  -webkit-appearance: none;
-  -webkit-tap-highlight-color: rgba(#000, 0);
-  touch-action: manipulation;
-  background-color: transparent;
-  border: none;
-  border-style: none;
-  text-decoration: none;
-}
-input, select, textarea {
-  &[ disabled] {
-    box-shadow: none !important;
-    background-color: $color-layer3 !important;
-    color: $font-color5 !important;
-    filter: grayscale(50%);
-    cursor: not-allowed !important;
+  * {
+    &::selection {
+      background-color: $color-theme !important;
+      color: #fff !important;
+    }
   }
-}
-a, button, label, select {
-  cursor: pointer;
-}
-input, textarea {
-  cursor: text;
-}
-input, textarea {
-  &::placeholder {
+  button, a, label, input, select, textarea {
+    line-height: inherit;
     font-family: inherit;
-    color: $font-color5;
-  }
-}
-input {
-  &:-webkit-autofill {
-    box-shadow: 0 0 0 100rem $color-layer3 inset !important;
-    -webkit-text-fill-color: $font-color3;
-  }
-  &[ type="radio"], &[ type="checkbox"], &[ type="file"] {
-    opacity: 0;
-    width: 0;
-    height: 0;
-    overflow: hidden;
-    position: absolute;
-    appearance: none;
+    outline: none;
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: rgba(#000, 0);
+    touch-action: manipulation;
   }
-  min-width: 0;
-  display: block;
-  &[ type="text"], &[ type="number"] {
-    width: 100%;
+  button, a, label {
+    cursor: pointer;
   }
-  &[ type="number"] {
-    &::-webkit-inner-spin-button,
-    &::-webkit-outer-spin-button {
-      -webkit-appearance: none;
-    }
+  svg {
+    vertical-align: top;
+    object-fit: cover;
   }
-}
-textarea {
-  display: block;
-  width: 100%;
-  min-height: $unit4;
-}
-a, label, button, canvas {
-  vertical-align: bottom;
-}
-svg {
-  vertical-align: top;
-  object-fit: cover;
-  height: 100%;
-}
-img {
-  user-drag: none;
-  -webkit-user-drag: none;
-  -moz-user-select: none;
-}
-img, video, iframe {
-  vertical-align: top;
-  object-fit: cover;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
 }

package/src/atoms/FAI/parts.tsx

@@ -63,19 +63,21 @@ const FAIComps: React.FC<amotify.atoms.FAI.FAIParams> = ( params ) => {
   } = params;
 
   return <Box
-    verticalAlign='center'
-    horizontalAlign='center'
+    flexCenter
     { ...others }
     freeCSS={ {
       display: 'inline-flex',
       ...others.freeCSS
     } }
   >
-    <FontAwesomeIcon
-      icon={ icon }
-      fixedWidth
-      { ...iconParams }
-    />
+    <Box freeCSS={ { aspectRatio: 1 } }>
+      <FontAwesomeIcon
+        icon={ icon }
+        fixedWidth
+        size='sm'
+        { ...iconParams }
+      />
+    </Box>
   </Box>;
 }
 

package/src/atoms/Logo/style.module.scss

@@ -1,5 +1,4 @@
 @use '@props' as *;
-
 .Size_ {
   &S {
     width: $unit2;
@@ -27,15 +26,17 @@
     font-size: $unit4;
   }
 }
-
 .Icon {
-
+  svg {
+    height: 100%;
+  }
 }
 .Title {
   width: auto;
+  svg {
+    height: 100%;
+  }
 }
-
-
 .ComunIcon {
   path {
     filter: drop-shadow($shadow4);

package/src/atoms/Various/style.module.scss

@@ -1,7 +1,14 @@
 @use '@props' as *;
 @use'@styleSet' as *;
-
 .Img {
+  user-drag: none;
+  -webkit-user-drag: none;
+  -moz-user-select: none;
+  vertical-align: top;
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
   &.ShowExpand_true {
     transition: $animation-time-middle;
     &:hover {
@@ -28,14 +35,12 @@
     width: 40%;
     background: linear-gradient(to right,
         transparent,
-        $color-layer5
-        );
+        $color-layer5 );
     animation: 1.5s PlaceholderEffect linear infinite;
     &.Color_white {
       background: linear-gradient(to right,
-        transparent,
-        $color-layer3
-        );
+          transparent,
+          $color-layer3 );
     }
   }
 }

package/src/functions/Button/_.tsx

@@ -57,66 +57,79 @@ const Styles = {
     size: amotify.fn.Buttons.Sizes,
     color: amotify.fn.Buttons.Colors
   ) => {
-    let styles: amotifyUniStyleParams = {}
+    let styles: amotifyUniStyleParams = {
+      display: 'inlineBlock',
+      fontSize: 'inherit',
+      fontWeight: 'inherit',
+      fontColor: 'inherit',
+      border: 'unset'
+    }
 
     if ( tone == 'Plain' ) return styles;
     if ( tone == 'Link' ) {
       styles.fontColor = 'theme';
       styles.textAlign = 'left';
+      styles.backgroundColor = 'trans';
     } else if ( tone == 'Normal' ) {
       styles = {
+        ...styles,
         backgroundColor: 'trans'
-      }
+      };
     } else if ( tone == 'Border' ) {
       styles = {
+        ...styles,
         backgroundColor: '1.layer.base',
         border: '2.normal',
+        borderStyle: 'solid',
         boxShadow: 0,
-      }
+      };
     } else if ( tone == 'Prime' ) {
       styles = {
+        ...styles,
         isBoldFont: true,
         fontColor: 'white',
         backgroundColor: color as any,
         boxShadow: 1,
         ssEffectsOnActive: [ 'shrink','ripple.white' ]
-      }
-
+      };
       if ( color == 'white' ) {
         styles = {
           ...styles,
           fontColor: 'theme',
           ssEffectsOnActive: [ 'shrink','ripple.cloud' ]
-        }
+        };
       }
     } else if ( tone == 'Sub' ) {
       styles = {
+        ...styles,
         fontColor: color as any,
         ssEffectsOnActive: 'shrink'
-      }
+      };
     } else if ( tone == 'Clear' ) {
       styles = {
+        ...styles,
         fontColor: color as any,
         backgroundColor: 'trans',
-      }
+      };
     } else if ( tone == 'FillToBorder' ) {
       styles = {
+        ...styles,
         fontColor: 'white',
         boxShadow: 1,
         borderWidth: 2,
-        borderStyle: 'solid',
         borderColor: color as any,
         backgroundColor: color as any,
-      }
+      };
     } else if ( tone == 'BorderToFill' ) {
       styles = {
+        ...styles,
         fontColor: color as any,
         boxShadow: 1,
+        border: '2.normal',
         borderWidth: 2,
-        borderStyle: 'solid',
         borderColor: color as any,
         backgroundColor: 'trans'
-      }
+      };
     }
 
     if ( tone != 'Link' ) {
@@ -173,14 +186,10 @@ const SeedWrapper = ( params: SeedWrapperInput ) => {
       style[ 'isLocked_' + isLocked ],
       style[ 'Tone_' + tone ],
       style[ 'Color_' + color ],
+      style[ 'Tone_' + tone + '_Color_' + color ],
     ].join( ' ' );
 
-    if ( [ 'Link','Plain' ].includes( Params.tone ) ) {
-      Params.className = [
-        Params.className,
-        style.uae_blur
-      ].join( ' ' );
-    } else {
+    if ( ![ 'Link','Plain' ].includes( Params.tone ) ) {
       Params.className = [
         Params.className,
         style.uae_remark

package/src/functions/Button/style.module.scss

@@ -1,7 +1,8 @@
 @use '@props' as *;
 @use'@styleSet' as *;
-
 .Wrap {
+  text-decoration: none;
+  vertical-align: bottom;
   position: relative;
   @include DisableduserSelect();
   > * {
@@ -17,20 +18,17 @@
     background-color: $color-layer4 !important;
   }
 }
-.uae_ {
-  &remark {
-    &:active {
-      box-shadow: $shadow2 inset, 0 0 0 transparent !important;
-    }
-    &:focus {
-      box-shadow: 0 0 0 transparent inset, $shadow3;
-    }
+.uae_remark {
+  &:active {
+    box-shadow: $shadow2 inset, 0 0 0 transparent !important;
+  }
+  &:focus {
+    box-shadow: 0 0 0 transparent inset, $shadow3;
   }
-  &blur {}
 }
 .Tone_ {
-  &Sub, &Clear {
-    &.Color_ {
+  &Sub_, &Clear_ {
+    &Color_ {
       &theme {
         background-color: $color-theme-opacity-few;
       }
@@ -70,8 +68,8 @@
           text-decoration: underline !important;
         }
       }
-      &Normal {
-        &.Color_ {
+      &Normal_ {
+        &Color_ {
           &plain {
             background-color: $color-layer3;
             color: $font-color2;
@@ -94,14 +92,14 @@
           }
         }
       }
-      &Border {
+      &Border_ {
         background-color: $color-cloud;
       }
-      &Prime {
+      &Prime_ {
         opacity: .85;
       }
-      &Sub, &Clear {
-        &.Color_ {
+      &Sub_, &Clear_ {
+        &Color_ {
           &theme {
             background-color: $color-theme-opacity-low;
             color: $color-theme;
@@ -130,9 +128,9 @@
           }
         }
       }
-      &FillToBorder {
+      &FillToBorder_ {
         background-color: $color-layer1;
-        &.Color_ {
+        &Color_ {
           &theme {
             color: $color-theme;
           }
@@ -154,9 +152,9 @@
           }
         }
       }
-      &BorderToFill {
+      &BorderToFill_ {
         color: white;
-        &.Color_ {
+        &Color_ {
           &theme {
             background-color: $color-theme;
           }

package/src/functions/Cropper/style.module.scss

@@ -1,5 +1,6 @@
 @use '@props' as *;
 .Wrap {
+  vertical-align: bottom;
   &.Use_ {
     &profile {
       max-width: calc($unit1 * 38);

package/src/functions/Input/File/_.tsx

@@ -259,11 +259,9 @@ const FileList: React.FC<{
               icon={ faCloudArrowUp }
               className={ style.Icon }
               fontColor={ 'theme' }
+              fontSize='4.thirdTitle'
               backgroundColor={ 'tcOpLow' }
-              padding={ 0 }
-              unitWidth={ 4 }
-              unitHeight={ 4 }
-              isRounded
+              ssSphere={ 4 }
             />
           </Box>
           <Box>

package/src/functions/Input/Select/style.module.scss

@@ -1,5 +1,6 @@
 @use '@props' as *;
 .Select {
+  cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;

package/src/functions/Input/Switch/_.tsx

@@ -162,6 +162,8 @@ export const SwitchInput: React.FC<amotify.fn.Input.Switch.PlainParams> = ( para
           >
             { icon ? <Box
               transition='middle'
+              ssSquare={ 2 }
+              flexCenter
               fontColor={ appearance == 'applely' && isChecked ? color : 'white' }
             >
               { icon }