Localize fonts
authorAjay Bura <ajbura@gmail.com>
Thu, 16 Dec 2021 12:25:16 +0000 (17:55 +0530)
committerAjay Bura <ajbura@gmail.com>
Thu, 16 Dec 2021 12:25:16 +0000 (17:55 +0530)
Signed-off-by: Ajay Bura <ajbura@gmail.com>
43 files changed:
public/index.html
public/res/fonts/inter/Inter_vf_slant_weight.ttf [new file with mode: 0644]
public/res/fonts/roboto/LICENSE.txt [new file with mode: 0644]
public/res/fonts/roboto/Roboto-Bold.ttf [new file with mode: 0644]
public/res/fonts/roboto/Roboto-BoldItalic.ttf [new file with mode: 0644]
public/res/fonts/roboto/Roboto-Italic.ttf [new file with mode: 0644]
public/res/fonts/roboto/Roboto-Light.ttf [new file with mode: 0644]
public/res/fonts/roboto/Roboto-LightItalic.ttf [new file with mode: 0644]
public/res/fonts/roboto/Roboto-Medium.ttf [new file with mode: 0644]
public/res/fonts/roboto/Roboto-MediumItalic.ttf [new file with mode: 0644]
public/res/fonts/roboto/Roboto-Regular.ttf [new file with mode: 0644]
src/app/atoms/avatar/Avatar.jsx
src/app/atoms/badge/NotificationBadge.jsx
src/app/atoms/badge/NotificationBadge.scss
src/app/atoms/divider/Divider.jsx
src/app/atoms/divider/Divider.scss
src/app/atoms/text/Text.jsx
src/app/atoms/text/Text.scss
src/app/molecules/dialog/Dialog.jsx
src/app/molecules/image-upload/ImageUpload.jsx
src/app/molecules/image-upload/ImageUpload.scss
src/app/molecules/message/Message.jsx
src/app/molecules/message/Message.scss
src/app/molecules/popup-window/PopupWindow.jsx
src/app/molecules/popup-window/PopupWindow.scss
src/app/molecules/room-intro/RoomIntro.jsx
src/app/molecules/room-selector/RoomSelector.jsx
src/app/molecules/room-selector/RoomSelector.scss
src/app/organisms/emoji-board/EmojiBoard.jsx
src/app/organisms/emoji-board/EmojiBoard.scss
src/app/organisms/invite-list/InviteList.jsx
src/app/organisms/invite-list/InviteList.scss
src/app/organisms/navigation/Drawer.scss
src/app/organisms/navigation/DrawerHeader.jsx
src/app/organisms/navigation/Home.jsx
src/app/organisms/profile-viewer/ProfileViewer.jsx
src/app/organisms/profile-viewer/ProfileViewer.scss
src/app/organisms/room/PeopleDrawer.jsx
src/app/organisms/room/RoomViewHeader.jsx
src/app/organisms/welcome/Welcome.jsx
src/app/templates/client/Client.jsx
src/font-face.css [new file with mode: 0644]
src/index.scss

index 371c9e3e9b7ecaa8c66dbca423bad8989778f1c1..8ac369349a8d456d38d4fd5995aaf50b2cd23917 100644 (file)
@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
-    <link href="https://api.fontshare.com/css?f[]=supreme@300,301,400,401,500,501,700,701&display=swap" rel="stylesheet">
     <title>Cinny</title>
     <meta name="name"        content="Cinny">
     <meta name="author"      content="Ajay Bura">
diff --git a/public/res/fonts/inter/Inter_vf_slant_weight.ttf b/public/res/fonts/inter/Inter_vf_slant_weight.ttf
new file mode 100644 (file)
index 0000000..969a990
Binary files /dev/null and b/public/res/fonts/inter/Inter_vf_slant_weight.ttf differ
diff --git a/public/res/fonts/roboto/LICENSE.txt b/public/res/fonts/roboto/LICENSE.txt
new file mode 100644 (file)
index 0000000..d645695
--- /dev/null
@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
diff --git a/public/res/fonts/roboto/Roboto-Bold.ttf b/public/res/fonts/roboto/Roboto-Bold.ttf
new file mode 100644 (file)
index 0000000..3742457
Binary files /dev/null and b/public/res/fonts/roboto/Roboto-Bold.ttf differ
diff --git a/public/res/fonts/roboto/Roboto-BoldItalic.ttf b/public/res/fonts/roboto/Roboto-BoldItalic.ttf
new file mode 100644 (file)
index 0000000..e85e7fb
Binary files /dev/null and b/public/res/fonts/roboto/Roboto-BoldItalic.ttf differ
diff --git a/public/res/fonts/roboto/Roboto-Italic.ttf b/public/res/fonts/roboto/Roboto-Italic.ttf
new file mode 100644 (file)
index 0000000..c9df607
Binary files /dev/null and b/public/res/fonts/roboto/Roboto-Italic.ttf differ
diff --git a/public/res/fonts/roboto/Roboto-Light.ttf b/public/res/fonts/roboto/Roboto-Light.ttf
new file mode 100644 (file)
index 0000000..0e97751
Binary files /dev/null and b/public/res/fonts/roboto/Roboto-Light.ttf differ
diff --git a/public/res/fonts/roboto/Roboto-LightItalic.ttf b/public/res/fonts/roboto/Roboto-LightItalic.ttf
new file mode 100644 (file)
index 0000000..3ad14fa
Binary files /dev/null and b/public/res/fonts/roboto/Roboto-LightItalic.ttf differ
diff --git a/public/res/fonts/roboto/Roboto-Medium.ttf b/public/res/fonts/roboto/Roboto-Medium.ttf
new file mode 100644 (file)
index 0000000..e89b0b7
Binary files /dev/null and b/public/res/fonts/roboto/Roboto-Medium.ttf differ
diff --git a/public/res/fonts/roboto/Roboto-MediumItalic.ttf b/public/res/fonts/roboto/Roboto-MediumItalic.ttf
new file mode 100644 (file)
index 0000000..a5a41d3
Binary files /dev/null and b/public/res/fonts/roboto/Roboto-MediumItalic.ttf differ
diff --git a/public/res/fonts/roboto/Roboto-Regular.ttf b/public/res/fonts/roboto/Roboto-Regular.ttf
new file mode 100644 (file)
index 0000000..3d6861b
Binary files /dev/null and b/public/res/fonts/roboto/Roboto-Regular.ttf differ
index eefb5752c1587b29945475e4d95b5110aa4d840a..0c84f6b00c7ad56cdc8d701f5afda5f3ae4b5f7c 100644 (file)
@@ -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>
                   )
index c92815b775fdcf818d9b135cc2bee521c1f421b8..12c1bd44735c3578f005d4a9715d330810a6da30 100644 (file)
@@ -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>
   );
 }
index 1c93f96472aa48543f338a5858b05b0ea6bc272a..f5cfa73f397f9e77e38d1d99bc8ce288f132b30c 100644 (file)
@@ -8,7 +8,6 @@
   .text {
     color: var(--tc-badge);
     text-align: center;
-    font-weight: 700;
   }
 
   &--alert {
index 76a9731564c7c9e471ff7b7a66a8013fdf68f736..76721241f821c9b3058b5fd95c8a87c18fd8251b 100644 (file)
@@ -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>
   );
 }
index a7dbbb274ec5ff71a191de28fefeaff63d79ed50..0f013ff0ebf452a020ca3a87e882b5b5ca638c38 100644 (file)
@@ -22,7 +22,6 @@
   &__text {
     padding: 2px var(--sp-extra-tight);
     border-radius: calc(var(--bo-radius) / 2);
-    font-weight: 500;
   }
 }
 
index cbd8d01bdbb02978cb7f5b941c5cab5cf034d4b9..9567bad116481abdffe19803fe8944f82bfb56b0 100644 (file)
@@ -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,
 };
 
index 6f685ea4671bec08dea2c443a293b796e9974b81..0bae52861f0ee7c3b45b1d53f47b79d8b9fe33be 100644 (file)
@@ -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);
   }
 }
 
+.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);
 }
\ No newline at end of file
index 1b918afda197267eee1e604e27f669d34331a20f..4d67597d725a4d20c9b8beab1ec975b9fbc3bf01 100644 (file)
@@ -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>
index 5beed72b6a9b69ea3b3bd55bcb1c7ec31ea1053c..69564aa56bcdc0860a647b577fb4c4852044f94d 100644 (file)
@@ -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>
index 9e0f312f52d4edf7712d6e41bc8ed5ed1f05a9a2..3ae38bc05de80614fe0cc0a0be41e295aabdd530 100644 (file)
@@ -24,7 +24,6 @@
                z-index: 1;
                & .text {
                        text-transform: uppercase;
-                       font-weight: 600;
                        color: white;
                }
                &--stopped {
index 883fcfca9201b5ad3c022074539d4ab146c8ad5c..b376b7f5a0e46ff9b6622cf1c7e7249182e27d66 100644 (file)
@@ -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>
index c545ab72e272d15f4edda5a572a97975b8eb96d5..91b249b04d521c1fec3855770d2fca9348569d88 100644 (file)
 
     & > .text {
       color: inherit;
-      font-weight: 500;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
     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);
index 016679ee959e45b5d0828e4d021e4b8351ee5ec5..ae2a2d4810cea08958f4732c6d247ee2f665a1a8 100644 (file)
@@ -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>
index 6b6e3a42dcec5585703e4560c6f1ce60abca5601..0b70d7a9d30911d8d04b4238dfdef846a494e729 100644 (file)
   & .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);
     }
   }
 }
index f22f8b10083dc8b010be9e6f33ec0b9f7fecab38..2c6f944f3c9cd3f0ea164cbf74a224c74265a739 100644 (file)
@@ -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>
index 4966d832e3247b40259d2e8d297d957841dd3884..ee5471fd9aa2a6df8700faafc01da81099d8d9d2 100644 (file)
@@ -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 && (
index 4419c07d9e7cf96c86d5074efae2f0a64b5d2f1f..a0f7ed18a15f231674c545026fd37888910b2e18 100644 (file)
@@ -17,7 +17,6 @@
 
   &--unread {
     .room-selector__content > .text {
-      font-weight: 500;
       color: var(--tc-surface-high);
     }
   }
index 05f7395203355dca1e18e3c907dc3b8bcd406400..9175576ba2d2f36f8b2543948223f55426d2d95e 100644 (file)
@@ -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>
   );
index f9c791ec2144d9aea81e47fdd076ecf5ba9838ee..db64ffa509c9eba65fa4d417447bb8ea52239dcd 100644 (file)
     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] & {
index 28a924beacb7b0e829527325f29c2a2f32905f18..65920704a4a0abbcd18b236858995e8c006812e8 100644 (file)
@@ -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) }
index 70e82c76c7757f6e4b793b6e2cd2b01f00cf2555..84d3c53b44328b766338da8254e5660c2555dff3 100644 (file)
@@ -7,7 +7,6 @@
 
     & .text {
       text-transform: uppercase;
-      font-weight: 600;
     }
     &:first-child {
       margin-top: var(--sp-tight);
index 0a33c4d868880dfc255615b9079dcbd9dcbef023..6cb1a39f89665d0b0e3675f1c75560fe354c8be7 100644 (file)
     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;
   }
 }
\ No newline at end of file
index 072397ef18a8da2c8d625286ce1f2145690aabd8..51d2bed66ceb5a900f23fb30a6800b4172f8b14f 100644 (file)
@@ -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
index 2c505f7239a920ab87e69822ed4868d7509886db..59207a0f802686f9d49a206abe937d791b2a084e 100644 (file)
@@ -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}
index bcb0cbc025ad5ca75d2eea3221198c5b91389148..25040550b439e2f8d5736ce47a1c42765f177180 100644 (file)
@@ -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">
index b7da7c50a87c5dab293aa7313362936ac61b0139..ac9078634dffc5d43f99f833497298a6aafb4f35 100644 (file)
@@ -26,9 +26,6 @@
 
       margin: 0 var(--sp-normal);
 
-      & .text-s1 {
-        font-weight: 500;
-      }
       & .text {
         white-space: pre-wrap;
         word-break: break-word;
index 85992f78b5efb7b46fbb1bf1cad7d1fa0092e4eb..0a9226c2fcfac5bba71fbf6cd79aa438b4f0ee67 100644 (file)
@@ -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>
index a2e0d4850e4ea50f280e51280ce65ca72f7888a5..e9153f5486183063fe4ce641563db1bc0e851dd7 100644 (file)
@@ -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} />
index 9d9eb7d754363ea16926ec23e82a620c1a6419b8..3ffd05c46fa257884c8619065d62fa342fedfd3d 100644 (file)
@@ -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>
index 05bd43f7c3d468dc5886ee32e32aa48526873daa..3bb6055b7e69b065e523f8dfb8a90cb3231c9fa7 100644 (file)
@@ -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>
     );
diff --git a/src/font-face.css b/src/font-face.css
new file mode 100644 (file)
index 0000000..94fe4e3
--- /dev/null
@@ -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;
+}
\ No newline at end of file
index aed54b83c9c7161fab54f7038bc8b367bf4aaa39..9aa8c4dae329bb62d2ab12d5413717125bba425a 100644 (file)
@@ -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%);
   --bo-radius: 8px;
 
 
-  /* font syles */
+  /* font styles: font-size, letter-spacing, line-hight */
   --fs-h1: 36px;
   --ls-h1: -1.5px;
   --lh-h1: 38px;
   --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;
   /* 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 {
 
   --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;
+
+  --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-family: 'Supreme', 'Roboto', sans-serif;
+  --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;