amotify 0.0.47 → 0.0.49

package/package.json

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

package/src/@molecules.tsx

@@ -11,22 +11,22 @@ import { LinkifyText } from './molecules/LinkifyText/parts';
 const Text = {
   Title: ( params: amotify.atoms.BoxInput ) => ( <Box
     fontSize='6.title'
-    fontWeight='3.bold'
+    fontWeight='3.semiBold'
     { ...params }
   /> ),
   SubTitle: ( params: amotify.atoms.BoxInput ) => ( <Box
     fontSize='5.subTitle'
-    fontWeight='3.bold'
+    fontWeight='3.semiBold'
     { ...params }
   /> ),
   ThirdTitle: ( params: amotify.atoms.BoxInput ) => ( <Box
     fontSize='4.thirdTitle'
-    fontWeight='3.bold'
+    fontWeight='3.semiBold'
     { ...params }
   /> ),
   Paragraph: ( params: amotify.atoms.BoxInput ) => ( <Box
     fontSize='3.paragraph'
-    fontWeight='3.bold'
+    fontWeight='3.semiBold'
     { ...params }
   /> ),
   Normal: ( params: amotify.atoms.BoxInput ) => ( <Box

package/src/@styles/UniStyling.scss

@@ -160,18 +160,33 @@
       }
     }
     &wt {
+      &0#{ $DS } {
+        font-weight: 100; // thin
+      }
       &1#{ $DS } {
-        font-weight: lighter;
+        font-weight: 300; // light
       }
       &2#{ $DS } {
-        font-weight: normal;
+        font-weight: 400; // normal
       }
       &3#{ $DS } {
-        font-weight: bold;
+        font-weight: 600; // semi-bold
+      }
+      &4#{ $DS } {
+        font-weight: 700; // bold
+      }
+      &5#{ $DS } {
+        font-weight: 800; // extra-bold
       }
       &inherit#{ $DS } {
         font-weight: inherit;
       }
+      &lighter#{ $DS } {
+        font-weight: lighter;
+      }
+      &bolder#{ $DS } {
+        font-weight: bolder;
+      }
     }
   }
   &bgc {
@@ -304,29 +319,39 @@
         0 4px 6px -1px rgba(0, 0, 0, .1),
         0 2px 4px -2px rgba(0, 0, 0, .1);
     }
-    &0#{ $DS } {
-      box-shadow: 0 0 0 transparent inset, $shadow0;
-    }
-    &1#{ $DS } {
-      box-shadow: 0 0 0 transparent inset, $shadow1;
-    }
-    &2#{ $DS } {
-      box-shadow: 0 0 0 transparent inset, $shadow2;
-    }
-    &3#{ $DS } {
-      box-shadow: 0 0 0 transparent inset, $shadow3;
-    }
-    &4#{ $DS } {
-      box-shadow: 0 0 0 transparent inset, $shadow4;
-    }
-    &-1#{ $DS } {
-      box-shadow: 0 0 2px 0px rgba($shadow-color, .25) inset, 0 0 0 transparent;
-    }
-    &-2#{ $DS } {
-      box-shadow: 0 0 3px 0px rgba($shadow-color, .25) inset, 0 0 0 transparent;
-    }
-    &-3#{ $DS } {
-      box-shadow: 0 0 4px 0px rgba($shadow-color, .25) inset, 0 0 0 transparent;
+
+    $typeArr : thin, normal, remark, thick, most;
+    @each $t in $typeArr {
+      &3-#{ $t }-inset {
+        box-shadow: (--shadow_style_3) var(--shadow_color_#{ $t }) inset, 0 0 0 transparent;
+      }
+      &2-#{ $t }-inset {
+        box-shadow: (--shadow_style_2) var(--shadow_color_#{ $t }) inset, 0 0 0 transparent;
+      }
+      &1-#{ $t }-inset {
+        box-shadow: (--shadow_style_1) var(--shadow_color_#{ $t }) inset, 0 0 0 transparent;
+      }
+      &0-#{ $t }-inset {
+        box-shadow: (--shadow_style_0) var(--shadow_color_#{ $t }) inset, 0 0 0 transparent;
+      }
+      &0-#{ $t } {
+        box-shadow: 0 0 0 transparent inset,(--shadow_style_0) var(--shadow_color_#{ $t });
+      }
+      &1-#{ $t } {
+        box-shadow: 0 0 0 transparent inset,(--shadow_style_1) var(--shadow_color_#{ $t });
+      }
+      &2-#{ $t } {
+        box-shadow: 0 0 0 transparent inset,(--shadow_style_2) var(--shadow_color_#{ $t });
+      }
+      &3-#{ $t } {
+        box-shadow: 0 0 0 transparent inset,(--shadow_style_3) var(--shadow_color_#{ $t });
+      }
+      &4-#{ $t } {
+        box-shadow: 0 0 0 transparent inset,(--shadow_style_4) var(--shadow_color_#{ $t });
+      }
+      &5-#{ $t } {
+        box-shadow: 0 0 0 transparent inset,(--shadow_style_5) var(--shadow_color_#{ $t });
+      }
     }
   }
   & {
@@ -945,6 +970,9 @@
     &trans#{ $DS } {
       opacity: 0;
     }
+    &few#{ $DS } {
+      opacity: .15;
+    }
     &low#{ $DS } {
       opacity: .3;
     }

package/src/@styles/init.scss

@@ -45,26 +45,19 @@ html {
   word-break: normal;
   color: $font-color2;
   font-size: $font-size2;
-  font-family:
-    Noto Sans,
-    Noto Sans JP,
-    -apple-system,
-    BlinkMacSystemFont,
-    Segoe UI,
-    Helvetica,
-    Arial,
-    sans-serif;
 
-    font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    Segoe UI,
-    Helvetica,
-    Arial,
-    Noto Sans JP,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji";
+  font-family: 
+  -apple-system,
+  BlinkMacSystemFont,
+  "Segoe UI",
+  "Roboto",
+  "Helvetica Neue",
+  "Ubuntu",
+  "Hiragino Sans",
+  "Yu Gothic UI",
+  "Meiryo UI",
+  "Hiragino Kaku Gothic ProN"
+  ;
   font-kerning: normal;
   // -webkit-font-smoothing: antialiased;
   caret-color: $color-theme;

package/src/@styles/props.scss

@@ -67,11 +67,12 @@ $font-size7 : var(--font-size7);
 $font-size8 : var(--font-size8);
 //
 $shadow-color : var(--sc);
-$shadow0 : 0px 1px 2px 0px rgba(var(--sc), .05);
-$shadow1 : 0px 1px 2px 0px rgba(var(--sc), .3);
-$shadow2 : 0px 2px 4px 0px rgba(var(--sc), .25);
-$shadow3 : 1px 6px 12px rgba(var(--sc), .2);
-$shadow4 : 1rem 1.5rem 3rem rgba(var(--sc), .21);
+$shadow0 : 0 0 0 transparent inset,(--shadow_style_0) var(--shadow_color_thin);
+$shadow1 : 0 0 0 transparent inset,(--shadow_style_0) var(--shadow_color_normal);
+$shadow2 : 0 0 0 transparent inset,(--shadow_style_1) var(--shadow_color_remark);
+$shadow3 : 0 0 0 transparent inset,(--shadow_style_3) var(--shadow_color_remark);
+$shadow4 : 0 0 0 transparent inset,(--shadow_style_4) var(--shadow_color_remark);
+
 $animation-time-short : var(--animation-time1);
 $animation-time-middle : var(--animation-time2);
 $animation-time-long : var(--animation-time3);

package/src/@styles/var.scss

@@ -43,7 +43,24 @@
   --color-monoPrime-rgb: 0, 0, 0;
   --color-monoSecond-rgb: 255, 255, 255;
   --font-color-logoTitle: hsl(218, 45%, 22%);
+
+  /* shadow */
   --sc: 60, 64, 67;
+  --shadow_style_0: 0px 1px 2px 0px;
+  --shadow_style_1: 0px 2px 4px 0px;
+  --shadow_style_2: 1px 3px 8px 0px;
+  --shadow_style_3: 2px 6px 12px;
+  --shadow_style_4: .4rem 1rem 2rem;
+  --shadow_style_5: 1rem 1.5rem 3rem;
+
+  --shadow_color_thin: rgba(var(--sc), .05);
+  --shadow_color_normal: rgba(var(--sc), .15);
+  --shadow_color_remark: rgba(var(--sc), .23);
+  --shadow_color_thick: rgba(var(--sc), .32);
+  --shadow_color_most: rgba(var(--sc), .41);
+
+
+
   /* font colors */
   --font-color1-rgb: 0, 0, 0;
   --font-color2-rgb: 51, 51, 51;

package/src/functions/Button/_.tsx

@@ -41,7 +41,7 @@ const Styles = {
     } else if ( size == 'L' ) {
       styles.padding = [ 1,3 ];
       styles.fontSize = '3.paragraph';
-      styles.isBoldFont = true;
+      styles.isSemiBoldFont = true;
     }
 
     styles = {
@@ -82,15 +82,15 @@ const Styles = {
         backgroundColor: '1.layer.base',
         border: '2.normal',
         borderStyle: 'solid',
-        boxShadow: 0,
+        boxShadow: '0.thin',
       };
     } else if ( tone == 'Prime' ) {
       styles = {
         ...styles,
-        isBoldFont: true,
+        isSemiBoldFont: true,
         fontColor: 'white',
         backgroundColor: color as any,
-        boxShadow: 1,
+        boxShadow: '0.normal',
         ssEffectsOnActive: [
           'shrink',
           'push',
@@ -130,7 +130,7 @@ const Styles = {
     } else if ( tone == 'FillToBorder' ) {
       styles = {
         ...styles,
-        boxShadow: 1,
+        boxShadow: '0.normal',
         border: '2.normal',
         borderWidth: 2,
         borderColor: color as any,
@@ -141,7 +141,7 @@ const Styles = {
       styles = {
         ...styles,
         fontColor: color as any,
-        boxShadow: 1,
+        boxShadow: '0.normal',
         border: '2.normal',
         borderWidth: 2,
         borderColor: color as any,

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

@@ -16,6 +16,7 @@
   }
   &.isLocked_true {
     background-color: $color-layer4 !important;
+    box-shadow: none !important;
   }
 }
 .Tone_ {
@@ -62,7 +63,7 @@
         color: white !important;
       }
       &_Color_ {
-        &white,&cloud {
+        &white, &cloud {
           &:not(:hover):not(:focus) {
             color: #000 !important;
           }
@@ -145,7 +146,7 @@
       &BorderToFill {
         color: white;
         &_Color_ {
-          &white,&cloud {
+          &white, &cloud {
             background-color: white;
             color: black;
           }

package/src/functions/Cropper/parts.tsx

@@ -772,7 +772,7 @@ const Comps: {
         position='relative'
         overflow={ 'hidden' }
         borderRadius={ 'inherit' }
-        boxShadow={ 3 }
+        boxShadow={ '3.remark' }
         UnderBreakPointStyles={ {
           flexType: 'col'
         } }
@@ -806,7 +806,7 @@ const Comps: {
         <Column
           gap={ 0 }
           flexGrid={ 2 }
-          boxShadow={ 3 }
+          boxShadow={ '3.remark' }
           UnderBreakPointStyles={ {
             width: 1,
             maxWidth: 'unset'
@@ -827,7 +827,7 @@ const Comps: {
             <Box
               flexSizing='none'
               fontSize='4.thirdTitle'
-              isBoldFont
+              isSemiBoldFont
             >
               フィルター
             </Box>

package/src/functions/Input/Chips/Selector.tsx

@@ -177,7 +177,7 @@ const Selector = ( params: {
         if ( isSelected || isFocused ) {
           styles = {
             fontColor: 'theme',
-            isBoldFont: true,
+            isSemiBoldFont: true,
           }
         }
         if ( isFocused ) {
@@ -340,7 +340,7 @@ const Selector = ( params: {
             <Span
               fontSize='3.paragraph'
               fontColor='theme'
-              isBoldFont
+              isSemiBoldFont
             >
               { val_selected.length }
             </Span> / { params.limit } 件
@@ -409,7 +409,7 @@ export const ChipsInputFNs: amotify.fn.Input.Chips.FNs = {
         borderRadius={ '2.tone.secondary' }
         backgroundColor={ '1.layer.base' }
         border
-        boxShadow={ 'borderBox' }
+        boxShadow={ '1.normal' }
         overflow='hidden'
       >
         <Selector

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

@@ -265,10 +265,10 @@ const FileList: React.FC<{
             children={ 'ファイルを選択' + `（${ Left }）` }
             fontColor={ 'theme' }
             fontSize={ '2.normal' }
-            isBoldFont
+            isSemiBoldFont
           />
           <Box
-            isBoldFont
+            isSemiBoldFont
             fontColor={ '4.thin' }
             fontSize={ '0.xs' }
           >

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

@@ -209,11 +209,12 @@ const Core: React.FC<amotify.fn.Input.RichSelect.PlainParams> = ( params ) => {
               ssCardBox
               padding={ [ 1,0 ] }
               gap={ 0 }
-              maxHeight={ 'viewHeight' }
+              // maxHeight={ 'viewHeight' }
               overflow={ 'auto' }
               { ...sheetStyles }
               freeCSS={ {
                 minWidth: 12 * 20,
+                maxHeight: '90vh',
                 ...sheetStyles?.freeCSS
               } }
             >

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

@@ -107,7 +107,7 @@ export const Segmented: amotify.fn.Input.Segmented.Types = {
       overflow: 'hidden',
       gap: 0,
       ssLastChildLossBorder: 'right',
-      boxShadow: 0,
+      boxShadow: '0.thin',
       ...params,
       cellStyles: {
         borderRadius: 0,
@@ -131,7 +131,7 @@ export const Segmented: amotify.fn.Input.Segmented.Types = {
       overflow: 'hidden',
       gap: 0,
       ssLastChildLossBorder: 'right',
-      boxShadow: 0,
+      boxShadow: '0.thin',
       fontColor: '3.blur',
       ...params,
       cellStyles: {
@@ -227,7 +227,7 @@ const Core: React.FC<CoreParams> = ( params ) => {
       style[ 'Tone_' + appearance ]
     ].join( ' ' ) }
     cellCheckedStyles={ {
-      isBoldFont: true,
+      isSemiBoldFont: true,
       ...cellCheckedStyles,
     } }
     cellCheckedClassName={ [

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

@@ -157,7 +157,7 @@ export const SwitchInput: React.FC<amotify.fn.Input.Switch.PlainParams> = ( para
             backgroundColor={ appearance == 'material' && isChecked ? color : 'white' }
             transition='middle'
             ssSphere={ 2.5 }
-            boxShadow={ 2 }
+            boxShadow={ '1.remark' }
             className={ style.Dot }
           >
             { icon ? <Box

package/src/functions/Input/Time/Picker.tsx

@@ -208,7 +208,7 @@ export const Picker: React.FC<amotify.fn.Input.Time.PickerParams> = ( params ) =
   return <Box
     backgroundColor={ '1.layer.base' }
     borderRadius={ '2.tone.secondary' }
-    boxShadow={ 2 }
+    boxShadow={ '1.remark' }
     border
     overflow='hidden'
   >
@@ -355,14 +355,14 @@ const Comps = {
             <Box
               flexCenter
               fontSize='3.paragraph'
-              isBoldFont
+              isSemiBoldFont
             >
               { val_value.hour.zeroEmbed( 2 ) } : { val_value.minutes.zeroEmbed( 2 ) }
             </Box>
             <Flex
               flexWrap={ false }
               borderRadius={ '1.tone.primary' }
-              boxShadow={ -1 }
+              boxShadow={ '0.remark.inset' }
               flexChilds='even'
               freeCSS={ {
                 minWidth: 12 * 12
@@ -960,7 +960,7 @@ const Comps = {
       let isActiveStyles: amotifyUniStyleParams = {
         backgroundColor: 'cloud',
         fontColor: '2.normal',
-        isBoldFont: true
+        isSemiBoldFont: true
       }
 
       return <Column

package/src/functions/Input/_.tsx

@@ -664,7 +664,7 @@ const DefaultStyles = {
       padding: '3/4',
       transition: 'middle',
       flexSizing: 'auto',
-      boxShadow: 0
+      boxShadow: '0.thin'
     }
     if ( type == 'border' ) {
       Styles = {
@@ -720,7 +720,7 @@ const DefaultStyles = {
           gap: '1/2',
           ...params,
           cellStyles: {
-            isBoldFont: true,
+            isSemiBoldFont: true,
             ...params.cellStyles,
           },
           cellCheckedStyles: {
@@ -733,7 +733,7 @@ const DefaultStyles = {
           gap: '3/4',
           ...params,
           cellStyles: {
-            boxShadow: 0,
+            boxShadow: '0.thin',
             ...params.cellStyles
           }
         }

package/src/functions/Inputs/text.tsx

@@ -18,7 +18,7 @@ let ToneStyles: {
     padding: '3/4',
     borderRadius: '1.tone.primary',
     transition: 'middle',
-    boxShadow: 0,
+    boxShadow: '0.thin',
     className: style.Focus
   },
   border: {

package/src/functions/Layout/PageNotFound.tsx

@@ -50,7 +50,7 @@ export const PageNotFound: React.FC<{}> = () => {
         <Text.Normal
           textAlign='left'
           ssCardBox='cloud'
-          isBoldFont
+          isSemiBoldFont
           padding={ 1 }
         >
           ・リンクが正しいか

package/src/functions/Layout/RootViewController/parts.tsx

@@ -232,7 +232,7 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
         ssEffectsOnActive='ripple.cloud'
         verticalAlign='center'
         textAlign='left'
-        isBoldFont
+        isSemiBoldFont
         isActive={ isActive }
         isActiveStyles={ {
           fontColor: 'theme',
@@ -255,7 +255,7 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
     /> ),
     Title: ( params ) => ( <Box
       fontSize='3.paragraph'
-      isBoldFont
+      isSemiBoldFont
       padding={ [ 0,1 ] }
       { ...params }
     /> ),

package/src/functions/Loader/corner.tsx

@@ -38,7 +38,7 @@ export const Corner = () => {
     borderRadius={ '2/3' }
     backgroundColor='dark'
     position='fixed'
-    boxShadow={ 2 }
+    boxShadow={ '1.remark' }
     left={ '50%' }
     top={ 1 }
     opacity='trans'
@@ -66,7 +66,7 @@ export const Corner = () => {
     <Box
       fontColor='white'
       fontSize='0.xs'
-      isBoldFont
+      isSemiBoldFont
     >
       Loading
     </Box>

package/src/functions/Sheet/parts.tsx

@@ -374,7 +374,7 @@ const Comps = {
         backgroundColor={ '1.layer.base' }
         flexSizing={ 'none' }
         minHeight={ 'viewHeight' }
-        boxShadow={ 3 }
+        boxShadow={ '3.remark' }
         className={ [
           style.BB,
           className
@@ -576,7 +576,7 @@ const Comps = {
           borderTopRightRadius={ '1.tone.primary' }
           border
           borderBottom='unset'
-          boxShadow={ 3 }
+          boxShadow={ '3.remark' }
           position='relative'
           overflow={ 'hidden' }
           height={ 1 }
@@ -979,7 +979,7 @@ const Sheet: amotify.fn.Sheet.Methods = {
       backgroundColor='1.layer.base'
       borderRadius={ '1.tone.primary' }
       position='relative'
-      boxShadow={ 3 }
+      boxShadow={ '3.remark' }
       transition='long'
       { ...params }
     /> ),

package/src/functions/SnackBar/parts.tsx

@@ -119,7 +119,7 @@ const Cell: React.FC<ElementParams> = ( props ) => {
     marginBottom={ 1 }
     borderRadius={ '1.tone.primary' }
     fontColor={ 'white' }
-    boxShadow={ 2 }
+    boxShadow={ '1.remark' }
     backgroundColor='dark'
     transition={ 'middle' }
     componentID={ val_componentID }

package/src/functions/Table/Data/parts.tsx

@@ -197,7 +197,7 @@ const Components = {
             content: <Flex
               flexType='col'
               border
-              boxShadow={ 3 }
+              boxShadow={ '3.remark' }
               backgroundColor={ '1.layer.base' }
               borderRadius={ 1 }
               freeCSS={ {

package/src/functions/Tooltips/parts.tsx

@@ -44,7 +44,7 @@ const Tooltips: amotify.fn.Tooltips.Methods = {
       backgroundColor='dark'
       borderRadius={ '2.tone.secondary' }
       fontColor='white'
-      boxShadow={ 1 }
+      boxShadow={ '0.normal' }
       { ...params }
     /> )
   }

package/src/global/styleConverter.tsx

@@ -251,7 +251,9 @@ export const ReadStyleSet: amotify.global.StyleConverter.ReadStyleSet = ( rawPar
     flexCenter,
     flexNewLine,
 
+    isLightFont,
     isBoldFont,
+    isSemiBoldFont,
     isRounded,
     ...ReturnParams
   } = params;
@@ -265,6 +267,7 @@ export const ReadStyleSet: amotify.global.StyleConverter.ReadStyleSet = ( rawPar
     ReturnParams = {
       ...ReturnParams,
       freeCSS: {
+        ...ReturnParams.freeCSS,
         background: `linear-gradient(${ deg }deg,${ colors.join( ',' ) })`,
       }
     }
@@ -278,7 +281,7 @@ export const ReadStyleSet: amotify.global.StyleConverter.ReadStyleSet = ( rawPar
     let exStyles: amotifyUniStyleParams = {
       backgroundColor: '1.layer.base',
       borderRadius: '1.tone.primary',
-      boxShadow: 0,
+      boxShadow: '0.thin',
       freeCSS: {
         zIndex: 1
       }
@@ -291,10 +294,10 @@ export const ReadStyleSet: amotify.global.StyleConverter.ReadStyleSet = ( rawPar
     } else if ( ssCardBox == 'cloud' ) {
       exStyles.backgroundColor = 'cloud';
     } else if ( ssCardBox == 'shadow' ) {
-      exStyles.boxShadow = 1;
+      exStyles.boxShadow = '0.normal';
     }
 
-    if ( [ 'dim','dark' ].includes( amotify.config.darkMode ) ) exStyles.boxShadow = 2;
+    if ( [ 'dim','dark' ].includes( amotify.config.darkMode ) ) exStyles.boxShadow = '1.remark';
     ReturnParams = {
       ...exStyles,
       ...ReturnParams,
@@ -379,9 +382,17 @@ export const ReadStyleSet: amotify.global.StyleConverter.ReadStyleSet = ( rawPar
     verticalAlign: 'center',
     ...ReturnParams
   } );
+  !isLightFont || ( ReturnParams = {
+    ...ReturnParams,
+    fontWeight: '1.light',
+  } );
+  !isSemiBoldFont || ( ReturnParams = {
+    ...ReturnParams,
+    fontWeight: '3.semiBold',
+  } );
   !isBoldFont || ( ReturnParams = {
     ...ReturnParams,
-    fontWeight: '3.bold',
+    fontWeight: '4.bold',
   } );
   !isRounded || ( ReturnParams = {
     ...ReturnParams,