Localize fonts

Signed-off-by: Ajay Bura <ajbura@gmail.com>

src/app/atoms/avatar/Avatar.jsx

@@ -32,7 +32,7 @@ function Avatar({
                 iconSrc !== null
                   ? <RawIcon size={size} src={iconSrc} />
                   : text !== null && (
-                    <Text variant={textSize}>
+                    <Text variant={textSize} primary>
                       {twemojify([...text][0])}
                     </Text>
                   )

src/app/atoms/badge/NotificationBadge.jsx

@@ -8,7 +8,7 @@ function NotificationBadge({ alert, content }) {
   const notificationClass = alert ? ' notification-badge--alert' : '';
   return (
     <div className={`notification-badge${notificationClass}`}>
-      {content !== null && <Text variant="b3">{content}</Text>}
+      {content !== null && <Text variant="b3" weight="bold">{content}</Text>}
     </div>
   );
 }

src/app/atoms/badge/NotificationBadge.scss

@@ -8,7 +8,6 @@
   .text {
     color: var(--tc-badge);
     text-align: center;
-    font-weight: 700;
   }
 
   &--alert {

src/app/atoms/divider/Divider.jsx

@@ -8,7 +8,7 @@ function Divider({ text, variant, align }) {
   const dividerClass = ` divider--${variant} divider--${align}`;
   return (
     <div className={`divider${dividerClass}`}>
-      {text !== null && <Text className="divider__text" variant="b3">{text}</Text>}
+      {text !== null && <Text className="divider__text" variant="b3" weight="bold">{text}</Text>}
     </div>
   );
 }

src/app/atoms/divider/Divider.scss

@@ -22,7 +22,6 @@
   &__text {
     padding: 2px var(--sp-extra-tight);
     border-radius: calc(var(--bo-radius) / 2);
-    font-weight: 500;
   }
 }
 

src/app/atoms/text/Text.jsx

@@ -3,25 +3,37 @@ import PropTypes from 'prop-types';
 import './Text.scss';
 
 function Text({
-  id, className, variant, children,
+  className, variant, weight,
+  primary, span, children,
 }) {
-  const cName = className !== '' ? `${className} ` : '';
-  if (variant === 'h1') return <h1 id={id === '' ? undefined : id} className={`${cName}text text-h1`}>{ children }</h1>;
-  if (variant === 'h2') return <h2 id={id === '' ? undefined : id} className={`${cName}text text-h2`}>{ children }</h2>;
-  if (variant === 's1') return <h4 id={id === '' ? undefined : id} className={`${cName}text text-s1`}>{ children }</h4>;
-  return <p id={id === '' ? undefined : id} className={`${cName}text text-${variant}`}>{ children }</p>;
+  const classes = [];
+  if (className) classes.push(className);
+
+  classes.push(`text text-${variant} text-${weight}`);
+  if (primary) classes.push('text-primary');
+
+  const textClass = classes.join(' ');
+  if (span) return <span className={classes.join(' ')}>{ children }</span>;
+  if (variant === 'h1') return <h1 className={textClass}>{ children }</h1>;
+  if (variant === 'h2') return <h2 className={textClass}>{ children }</h2>;
+  if (variant === 's1') return <h4 className={textClass}>{ children }</h4>;
+  return <p className={textClass}>{ children }</p>;
 }
 
 Text.defaultProps = {
-  id: '',
-  className: '',
+  className: null,
   variant: 'b1',
+  weight: 'normal',
+  primary: false,
+  span: false,
 };
 
 Text.propTypes = {
-  id: PropTypes.string,
   className: PropTypes.string,
   variant: PropTypes.oneOf(['h1', 'h2', 's1', 'b1', 'b2', 'b3']),
+  weight: PropTypes.oneOf(['light', 'normal', 'medium', 'bold']),
+  primary: PropTypes.bool,
+  span: PropTypes.bool,
   children: PropTypes.node.isRequired,
 };
 

src/app/atoms/text/Text.scss

@@ -1,7 +1,5 @@
-@mixin font($type, $weight) {
-  
+@mixin font($type) {
   font-size: var(--fs-#{$type});
-  font-weight: $weight;
   letter-spacing: var(--ls-#{$type});
   line-height: var(--lh-#{$type});
 
@@ -11,7 +9,7 @@
   }
 }
 
-%text {
+.text {
   margin: 0;
   padding: 0;
   color: var(--tc-surface-high);
@@ -26,30 +24,45 @@
   }
 }
 
+.text-primary {
+  font-family: var(--font-primary);
+  
+  --fw-light: var(--p-fw-light);
+  --fw-normal: var(--p-fw-normal);
+  --fw-medium: var(--p-fw-medium);
+  --fw-bold: var(--p-fw-bold);
+}
+.text-light {
+  font-weight: var(--fw-light);
+}
+.text-normal {
+  font-weight: var(--fw-normal);
+}
+.text-medium {
+  font-weight: var(--fw-medium);
+}
+.text-bold {
+  font-weight: var(--fw-bold);
+}
+
 .text-h1 {
-  @extend %text;
-  @include font(h1, 500);
+  @include font(h1);
 }
 .text-h2 {
-  @extend %text;
-  @include font(h2, 500);
+  @include font(h2);
 }
 .text-s1 {
-  @extend %text;
-  @include font(s1, 400);
+  @include font(s1);
 }
 .text-b1 {
-  @extend %text;
-  @include font(b1, 400);
+  @include font(b1);
   color: var(--tc-surface-normal);
 }
 .text-b2 {
-  @extend %text;
-  @include font(b2, 400);
+  @include font(b2);
   color: var(--tc-surface-normal);
 }
 .text-b3 {
-  @extend %text;
-  @include font(b3, 400);
+  @include font(b3);
   color: var(--tc-surface-low);
 }

src/app/molecules/dialog/Dialog.jsx

@@ -27,7 +27,7 @@ function Dialog({
         <div className="dialog__content">
           <Header>
             <TitleWrapper>
-              <Text variant="h2">{twemojify(title)}</Text>
+              <Text variant="h2" weight="medium" primary>{twemojify(title)}</Text>
             </TitleWrapper>
             {contentOptions}
           </Header>

src/app/molecules/image-upload/ImageUpload.jsx

@@ -53,7 +53,7 @@ function ImageUpload({
           size="large"
         />
         <div className={`img-upload__process ${uploadPromise === null ? ' img-upload__process--stopped' : ''}`}>
-          {uploadPromise === null && <Text variant="b3">Upload</Text>}
+          {uploadPromise === null && <Text variant="b3" weight="bold">Upload</Text>}
           {uploadPromise !== null && <Spinner size="small" />}
         </div>
       </button>

src/app/molecules/image-upload/ImageUpload.scss

@@ -24,7 +24,6 @@
 		z-index: 1;
 		& .text {
 			text-transform: uppercase;
-			font-weight: 600;
 			color: white;
 		}
 		&--stopped {

src/app/molecules/message/Message.jsx

@@ -70,8 +70,8 @@ const MessageHeader = React.memo(({
 }) => (
   <div className="message__header">
     <div style={{ color: colorMXID(userId) }} className="message__profile">
-      <Text variant="b1">{twemojify(username)}</Text>
-      <Text variant="b1">{twemojify(userId)}</Text>
+      <Text variant="b1" weight="medium">{twemojify(username)}</Text>
+      <Text variant="b1" weight="medium">{twemojify(userId)}</Text>
     </div>
     <div className="message__time">
       <Text variant="b3">{time}</Text>

src/app/molecules/message/Message.scss

@@ -130,7 +130,6 @@
 
     & > .text {
       color: inherit;
-      font-weight: 500;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -192,7 +191,7 @@
     padding: 0 2px;
     border-radius: 4px;
     cursor: pointer;
-    font-weight: 500;
+    font-weight: var(--fw-medium);
     &:hover {
       background-color: hsla(0, 0%, 64%, 0.3);
       color: var(--tc-surface-high);

src/app/molecules/popup-window/PopupWindow.jsx

@@ -68,7 +68,7 @@ function PopupWindow({
             <Header>
               <IconButton size="small" src={ChevronLeftIC} onClick={onRequestClose} tooltip="Back" />
               <TitleWrapper>
-                <Text variant="s1">{twemojify(title)}</Text>
+                <Text variant="s1" weight="medium" primary>{twemojify(title)}</Text>
               </TitleWrapper>
               {drawerOptions}
             </Header>
@@ -84,7 +84,7 @@ function PopupWindow({
         <div className="pw__content">
           <Header>
             <TitleWrapper>
-              <Text variant="h2">{twemojify(contentTitle !== null ? contentTitle : title)}</Text>
+              <Text variant="h2" weight="medium" primary>{twemojify(contentTitle !== null ? contentTitle : title)}</Text>
             </TitleWrapper>
             {contentOptions}
           </Header>

src/app/molecules/popup-window/PopupWindow.scss

@@ -53,10 +53,11 @@
   & .header {
     padding-left: var(--sp-tight);
     & .header__title-wrapper {
-      margin: 0 var(--sp-extra-tight);
+      margin: 0 var(--sp-extra-tight) 0 var(--sp-ultra-tight);
     }
     [dir=rtl] & {
-        padding-right: var(--sp-tight);
+      padding-right: var(--sp-tight);
+      margin: 0 var(--sp-ultra-tight) 0 var(--sp-extra-tight);
     }
   }
 }

src/app/molecules/room-intro/RoomIntro.jsx

@@ -15,7 +15,7 @@ function RoomIntro({
     <div className="room-intro">
       <Avatar imageSrc={avatarSrc} text={name} bgColor={colorMXID(roomId)} size="large" />
       <div className="room-intro__content">
-        <Text className="room-intro__name" variant="h1">{twemojify(heading)}</Text>
+        <Text className="room-intro__name" variant="h1" weight="medium" primary>{twemojify(heading)}</Text>
         <Text className="room-intro__desc" variant="b1">{twemojify(desc, undefined, true)}</Text>
         { time !== null && <Text className="room-intro__time" variant="b3">{time}</Text>}
       </div>

src/app/molecules/room-selector/RoomSelector.jsx

@@ -58,13 +58,13 @@ function RoomSelector({
             iconSrc={iconSrc}
             size="extra-small"
           />
-          <Text variant="b1">
+          <Text variant="b1" weight={isUnread ? 'medium' : 'normal'}>
             {twemojify(name)}
             {parentName && (
-              <span className="text text-b3">
+              <Text variant="b3" span>
                 {' — '}
                 {twemojify(parentName)}
-              </span>
+              </Text>
             )}
           </Text>
           { isUnread && (

src/app/molecules/room-selector/RoomSelector.scss

@@ -17,7 +17,6 @@
 
   &--unread {
     .room-selector__content > .text {
-      font-weight: 500;
       color: var(--tc-surface-high);
     }
   }

src/app/organisms/emoji-board/EmojiBoard.jsx

@@ -61,7 +61,7 @@ function EmojiGroup({ name, groupEmojis }) {
 
   return (
     <div className="emoji-group">
-      <Text className="emoji-group__header" variant="b2">{name}</Text>
+      <Text className="emoji-group__header" variant="b2" weight="bold">{name}</Text>
       {groupEmojis.length !== 0 && <div className="emoji-set">{getEmojiBoard()}</div>}
     </div>
   );

src/app/organisms/emoji-board/EmojiBoard.scss

@@ -101,7 +101,6 @@
     margin-left: var(--sp-extra-tight);
     padding: var(--sp-extra-tight) var(--sp-ultra-tight);
     text-transform: uppercase;
-    font-weight: 600;
     box-shadow: 0 -4px 0 0 var(--bg-surface);
     border-bottom: 1px solid var(--bg-surface-border);
     [dir=rtl] & {

src/app/organisms/invite-list/InviteList.jsx

@@ -89,7 +89,7 @@ function InviteList({ isOpen, onRequestClose }) {
       <div className="invites-content">
         { initMatrix.roomList.inviteDirects.size !== 0 && (
           <div className="invites-content__subheading">
-            <Text variant="b3">Direct Messages</Text>
+            <Text variant="b3" weight="bold">Direct Messages</Text>
           </div>
         )}
         {
@@ -117,14 +117,14 @@ function InviteList({ isOpen, onRequestClose }) {
         }
         { initMatrix.roomList.inviteSpaces.size !== 0 && (
           <div className="invites-content__subheading">
-            <Text variant="b3">Spaces</Text>
+            <Text variant="b3" weight="bold">Spaces</Text>
           </div>
         )}
         { Array.from(initMatrix.roomList.inviteSpaces).map(renderRoomTile) }
 
         { initMatrix.roomList.inviteRooms.size !== 0 && (
           <div className="invites-content__subheading">
-            <Text variant="b3">Rooms</Text>
+            <Text variant="b3" weight="bold">Rooms</Text>
           </div>
         )}
         { Array.from(initMatrix.roomList.inviteRooms).map(renderRoomTile) }

src/app/organisms/invite-list/InviteList.scss

@@ -7,7 +7,6 @@
 
     & .text {
       text-transform: uppercase;
-      font-weight: 600;
     }
     &:first-child {
       margin-top: var(--sp-tight);

src/app/organisms/navigation/Drawer.scss

@@ -18,10 +18,6 @@
     border-left: 1px solid var(--bg-surface-border);
   }
 
-  & .header__title-wrapper .text {
-    font-weight: 500;
-  }
-
   &__content-wrapper {
     @extend .drawer-flexItem;
     @extend .drawer-flexBox;
@@ -79,6 +75,5 @@
     margin: var(--sp-normal);
     margin-bottom: var(--sp-extra-tight);
     text-transform: uppercase;
-    font-weight: 600;
   }
 }

src/app/organisms/navigation/DrawerHeader.jsx

@@ -32,7 +32,7 @@ function DrawerHeader({ selectedTab, spaceId }) {
   return (
     <Header>
       <TitleWrapper>
-        <Text variant="s1">{twemojify(spaceName) || tabName}</Text>
+        <Text variant="s1" weight="medium" primary>{twemojify(spaceName) || tabName}</Text>
       </TitleWrapper>
       {spaceName && (
         <IconButton

src/app/organisms/navigation/Home.jsx

@@ -72,7 +72,7 @@ function Home({ spaceId }) {
 
   return (
     <>
-      { spaceIds.length !== 0 && <Text className="cat-header" variant="b3">Spaces</Text> }
+      { spaceIds.length !== 0 && <Text className="cat-header" variant="b3" weight="bold">Spaces</Text> }
       { spaceIds.map((id) => (
         <Selector
           key={id}
@@ -83,7 +83,7 @@ function Home({ spaceId }) {
         />
       ))}
 
-      { roomIds.length !== 0 && <Text className="cat-header" variant="b3">Rooms</Text> }
+      { roomIds.length !== 0 && <Text className="cat-header" variant="b3" weight="bold">Rooms</Text> }
       { roomIds.map((id) => (
         <Selector
           key={id}
@@ -94,7 +94,7 @@ function Home({ spaceId }) {
         />
       )) }
 
-      { directIds.length !== 0 && <Text className="cat-header" variant="b3">People</Text> }
+      { directIds.length !== 0 && <Text className="cat-header" variant="b3" weight="bold">People</Text> }
       { directIds.map((id) => (
         <Selector
           key={id}

src/app/organisms/profile-viewer/ProfileViewer.jsx

@@ -272,7 +272,7 @@ function ProfileViewer() {
             size="large"
           />
           <div className="profile-viewer__user__info">
-            <Text variant="s1">{twemojify(username)}</Text>
+            <Text variant="s1" weight="medium">{twemojify(username)}</Text>
             <Text variant="b2">{twemojify(userId)}</Text>
           </div>
           <div className="profile-viewer__user__role">

src/app/organisms/profile-viewer/ProfileViewer.scss

@@ -26,9 +26,6 @@
 
       margin: 0 var(--sp-normal);
 
-      & .text-s1 {
-        font-weight: 500;
-      }
       & .text {
         white-space: pre-wrap;
         word-break: break-word;

src/app/organisms/room/PeopleDrawer.jsx

@@ -143,7 +143,7 @@ function PeopleDrawer({ roomId }) {
     <div className="people-drawer">
       <Header>
         <TitleWrapper>
-          <Text variant="s1">
+          <Text variant="s1" primary>
             People
             <Text className="people-drawer__member-count" variant="b3">{`${room.getJoinedMemberCount()} members`}</Text>
           </Text>

src/app/organisms/room/RoomViewHeader.jsx

@@ -29,7 +29,7 @@ function RoomViewHeader({ roomId }) {
     <Header>
       <Avatar imageSrc={avatarSrc} text={roomName} bgColor={colorMXID(roomId)} size="small" />
       <TitleWrapper>
-        <Text variant="h2">{twemojify(roomName)}</Text>
+        <Text variant="h2" weight="medium" primary>{twemojify(roomName)}</Text>
         { typeof roomTopic !== 'undefined' && <p title={roomTopic} className="text text-b3">{twemojify(roomTopic)}</p>}
       </TitleWrapper>
       <IconButton onClick={togglePeopleDrawer} tooltip="People" src={UserIC} />

src/app/organisms/welcome/Welcome.jsx

@@ -10,7 +10,7 @@ function Welcome() {
     <div className="app-welcome flex--center">
       <div className="flex-v--center">
         <img className="app-welcome__logo noselect" src={CinnySvg} alt="Cinny logo" />
-        <Text className="app-welcome__heading" variant="h1">Welcome to Cinny</Text>
+        <Text className="app-welcome__heading" variant="h1" weight="medium">Welcome to Cinny</Text>
         <Text className="app-welcome__subheading" variant="s1">Yet another matrix client</Text>
       </div>
     </div>

src/app/templates/client/Client.jsx

@@ -49,7 +49,7 @@ function Client() {
         <Text className="loading__message" variant="b2">{loadingMsg}</Text>
 
         <div className="loading__appname">
-          <Text variant="h2">Cinny</Text>
+          <Text variant="h2" weight="bold">Cinny</Text>
         </div>
       </div>
     );

src/font-face.css

@@ -0,0 +1,59 @@
+/* ---- ROBOTO ---- */
+
+@font-face {
+  font-family: 'Roboto';
+  src: url(../public/res/fonts/roboto/Roboto-Light.ttf);
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url(../public/res/fonts/roboto/Roboto-Regular.ttf);
+  font-weight: 400;
+  font-display: swap;  
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url(../public/res/fonts/roboto/Roboto-Medium.ttf);
+  font-weight: 500;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Roboto';
+  src: url(../public/res/fonts/roboto/Roboto-Bold.ttf);
+  font-weight: 600;
+  font-display: swap;
+}
+
+/* ---- Inter ---- */
+
+@font-face {
+  font-family: 'Inter';
+  src: url(../public/res/fonts/inter/Inter_vf_slant_weight.ttf);
+  font-weight: 300;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url(../public/res/fonts/inter/Inter_vf_slant_weight.ttf);
+  font-weight: 380;
+  font-display: swap;  
+}
+@font-face {
+  font-family: 'Inter';
+  src: url(../public/res/fonts/inter/Inter_vf_slant_weight.ttf);
+  font-weight: 400;
+  font-display: swap;  
+}
+@font-face {
+  font-family: 'Inter';
+  src: url(../public/res/fonts/inter/Inter_vf_slant_weight.ttf);
+  font-weight: 500;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url(../public/res/fonts/inter/Inter_vf_slant_weight.ttf);
+  font-weight: 600;
+  font-display: swap;
+}

src/index.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
+@import url(./font-face.css);
 
 :root {
 
@@ -43,7 +43,7 @@
   --tc-surface-high: #000000;
   --tc-surface-normal: rgba(0, 0, 0, 78%);
   --tc-surface-normal-low: rgba(0, 0, 0, 60%);
-  --tc-surface-low: rgba(0, 0, 0, 38%);
+  --tc-surface-low: rgba(0, 0, 0, 48%);
   
   --tc-primary-high: #ffffff;
   --tc-primary-normal: rgba(255, 255, 255, 68%);
@@ -113,7 +113,7 @@
   --bo-radius: 8px;
 
 
-  /* font syles */
+  /* font styles: font-size, letter-spacing, line-hight */
   --fs-h1: 36px;
   --ls-h1: -1.5px;
   --lh-h1: 38px;
@@ -138,6 +138,17 @@
   --ls-b3: 0px;
   --lh-b3: 16px;
 
+  /* font-weight */
+  --p-fw-light: 300;
+  --p-fw-normal: 400;
+  --p-fw-medium: 500;
+  --p-fw-bold: 600;
+
+  --fw-light: 300;
+  --fw-normal: 400;
+  --fw-medium: 500;
+  --fw-bold: 600;
+
 
   /* spacing | --sp-[space]: value */
   --sp-none: 0px;
@@ -162,7 +173,8 @@
   /* transition curves */
   --fluid-push: cubic-bezier(0, 0.8, 0.67, 0.97);
   
-  --font-family: 'Roboto', 'Supreme', sans-serif;
+  --font-primary: 'Roboto', sans-serif;
+  --font-secondary: 'Roboto', sans-serif;
 }
 
 .silver-theme {
@@ -228,8 +240,25 @@
 
   --bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
   --bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
+  
+  /* font styles: font-size, letter-spacing, line-hight */
+  --fs-h1: 35.6px;
 
-  --font-family: 'Supreme', 'Roboto', sans-serif;
+  --fs-h2: 23.6px;
+
+  --fs-s1: 17.6px;
+
+  --fs-b1: 14.6px;
+  --ls-b1: 0.14px;
+
+  --fs-b2: 13.6px;
+
+  --fs-b3: 11.6px;
+
+  /* override normal font weight for dark mode */
+  --fw-normal: 380;
+
+  --font-secondary: 'Inter', 'Roboto', sans-serif;
 }
 
 .butter-theme {
@@ -264,8 +293,9 @@ body {
   margin: 0;
   padding: 0;
   height: 100%;
-  font-family: var(--font-family);
+  font-family: var(--font-secondary);
   font-size: 16px;
+  font-weight: var(--fw-normal);
   background-color: var(--bg-surface-low);
 }
 #root {
@@ -283,7 +313,7 @@ a {
   text-decoration: none;
 }
 b {
-  font-weight: 500;
+  font-weight: var(--fw-medium);
 }
 label {
   margin: 0;