amotify 0.0.46 → 0.0.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amotify",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "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 {

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/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 = {
@@ -87,7 +87,7 @@ const Styles = {
     } else if ( tone == 'Prime' ) {
       styles = {
         ...styles,
-        isBoldFont: true,
+        isSemiBoldFont: true,
         fontColor: 'white',
         backgroundColor: color as any,
         boxShadow: 1,

package/src/functions/Cropper/parts.tsx

@@ -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 } 件

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/Segmented/_.tsx

@@ -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/Time/Picker.tsx

@@ -355,7 +355,7 @@ const Comps = {
             <Box
               flexCenter
               fontSize='3.paragraph'
-              isBoldFont
+              isSemiBoldFont
             >
               { val_value.hour.zeroEmbed( 2 ) } : { val_value.minutes.zeroEmbed( 2 ) }
             </Box>
@@ -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

@@ -720,7 +720,7 @@ const DefaultStyles = {
           gap: '1/2',
           ...params,
           cellStyles: {
-            isBoldFont: true,
+            isSemiBoldFont: true,
             ...params.cellStyles,
           },
           cellCheckedStyles: {

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

@@ -66,7 +66,7 @@ export const Corner = () => {
     <Box
       fontColor='white'
       fontSize='0.xs'
-      isBoldFont
+      isSemiBoldFont
     >
       Loading
     </Box>

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

@@ -350,8 +350,8 @@ const Components = {
             flexWrap={ false }
             horizontalAlign='center'
           >
-            { DisplayLabel }
             { OrderButton }
+            { DisplayLabel }
           </Flex>
         </Flex>
       </Comps.TH> );

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;
@@ -379,9 +381,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,

package/src/preload.tsx

@@ -7,35 +7,6 @@ let tags: Jsmin.CreateElement.Args[] = [
     attr: {
       name: 'viewport',content: 'width=device-width,initial-scale=1.0,maximum-scale=5.0,minimum-scale=1.0,viewport-fit=cover'
     },
-  },{
-    tag: 'link',
-    parent: document.head,
-    attr: {
-      href: 'https://fonts.googleapis.com',rel: 'preconnect',async: true
-    }
-  },{
-    tag: 'link',
-    parent: document.head,
-    attr: {
-      href: 'https://fonts.gstatic.com',rel: 'preconnect',async: true
-    }
-  },
-  {
-    tag: 'link',
-    parent: document.head,
-    attr: {
-      href: 'https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap',
-      rel: 'stylesheet',
-      async: true
-    }
-  },{
-    tag: 'link',
-    parent: document.head,
-    attr: {
-      href: 'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;600&display=swap',
-      rel: 'stylesheet',
-      async: true
-    }
   },{
     tag: 'meta',
     parent: document.head,