Use native fonts on iOS and macOS (#1345)

src/components/common/EmbeddedMessage.scss

@@ -1,7 +1,7 @@
 .EmbeddedMessage {
   display: flex;
   align-items: center;
-  font-size: 0.875rem;
+  font-size: calc(var(--message-text-size, 1rem) - .125rem);
   line-height: 1.125rem;
   margin: 0 -0.25rem .0625rem;
   padding: .1875rem 0.25rem .1875rem .4375rem;
@@ -59,6 +59,10 @@
     background-color: var(--active-color);
   }
 
+  .message-title {
+    font-size: calc(var(--message-text-size, 1rem) - .125rem);
+  }
+
   .message-text {
     overflow: hidden;
     margin-inline-start: 0.5rem;

src/components/common/LastMessageMeta.scss

@@ -11,6 +11,10 @@
     color: var(--color-text-meta-colored);
     margin-right: 0.1rem;
     font-size: 1.15rem;
+
+    body.is-ios & {
+      margin-bottom: -.125rem;
+    }
   }
 
   .time {

src/components/left/main/Badge.scss

@@ -37,6 +37,17 @@
   text-align: center;
   flex-shrink: 0;
 
+  body.is-macos & {
+    line-height: 1.5rem;
+  }
+
+  body.is-ios & {
+    line-height: 1.375rem;
+    min-width: 1.375rem;
+    height: 1.375rem;
+    padding: 0 .375rem;
+  }
+
   &.mention, &.unread:not(.muted) {
     background: var(--color-green);
     color: var(--color-white);

src/components/left/main/Chat.scss

@@ -1,6 +1,12 @@
 .Chat {
   --background-color: var(--color-background);
 
+  body.is-ios &,
+  body.is-macos & {
+    --color-text-meta: var(--color-text-meta-apple);
+  }
+
+
   position: absolute;
   top: 0;
   left: 0;
@@ -87,10 +93,19 @@
       margin-left: 0.25rem;
       margin-top: -.0625rem;
       color: #C6C8CA;
+
+      body.is-ios & {
+        margin-top: 0;
+        margin-right: .5rem;
+      }
     }
 
     .LastMessageMeta {
       margin-left: auto;
+      body.is-ios & {
+        font-size: .875rem;
+        margin-right: 0;
+      }
     }
 
     .last-message, .typing-status {
@@ -130,6 +145,12 @@
         vertical-align: -.25rem;
         margin-inline-end: .25rem;
 
+        body.is-ios & {
+          width: 1.125rem;
+          height: 1.125rem;
+          vertical-align: -.1875rem;
+        }
+
         &.round {
           border-radius: .625rem;
         }
@@ -149,6 +170,11 @@
         margin-inline-start: -1.25rem;
         margin-inline-end: 0.5rem;
         bottom: 0.0625rem;
+
+        body.is-ios & {
+          margin-inline-start: -1.125rem;
+          bottom: 0;
+        }
       }
     }
   }

src/components/middle/AudioPlayer.scss

@@ -89,6 +89,11 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+
+      body.is-ios & {
+        font-size: .9375rem !important;
+        line-height: .8125rem;
+      }
     }
 
     .subtitle {
@@ -100,6 +105,10 @@
       overflow: hidden;
       text-overflow: ellipsis;
       margin: .125rem 0 0;
+
+      body.is-ios & {
+        font-size: .9375rem !important;
+      }
     }
   }
 }

src/components/middle/MessageList.scss

@@ -159,6 +159,11 @@
       padding: 0 .5rem;
       border-radius: 0.75rem;
       word-break: break-word;
+
+      body.is-ios &,
+      body.is-macos & {
+        font-size: .875rem;
+      }
     }
 
     &.rich {

src/components/middle/MiddleHeader.scss

@@ -228,6 +228,12 @@
     text-overflow: ellipsis;
     unicode-bidi: plaintext;
 
+    body.is-ios &,
+    body.is-macos & {
+      font-size: 1.0625rem;
+      font-weight: 600;
+    }
+
     @media (max-width: 600px) {
       display: block;
       overflow: hidden;
@@ -397,6 +403,10 @@
         margin-bottom: 0.125rem;
         white-space: pre;
         text-align: initial;
+
+        body.is-ios & {
+          font-size: .9375rem;
+        }
       }
 
       p {
@@ -407,6 +417,10 @@
         overflow: hidden;
         text-overflow: ellipsis;
         margin: 0;
+
+        body.is-ios & {
+          font-size: .9375rem;
+        }
       }
     }
 

src/components/middle/composer/Composer.scss

@@ -264,6 +264,11 @@
     unicode-bidi: plaintext;
     text-align: initial;
 
+    body.is-ios &,
+    body.is-macos & {
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif;
+    }
+
     &.overflown {
       overflow-y: auto;
       overflow-x: hidden;
@@ -289,8 +294,16 @@
     unicode-bidi: plaintext;
     text-align: initial;
 
+    body.is-macos & {
+      bottom: 1rem;
+    }
+
     @media (max-width: 600px) {
       bottom: .625rem;
+
+      body.is-ios & {
+        bottom: .6875rem;
+      }
     }
   }
 

src/components/middle/message/Message.scss

@@ -108,6 +108,13 @@
     --deleting-translate-x: 50%;
     --color-text-green: var(--color-accent-own);
 
+    body.is-ios &,
+    body.is-macos & {
+      --color-background-own: var(--color-background-own-apple);
+      --color-reply-own-hover: var(--color-reply-own-hover-apple);
+      --color-reply-own-active: var(--color-reply-own-active-apple);
+    }
+
     @media (max-width: 600px) {
       padding-right: 0.25rem;
     }

src/components/middle/message/WebPage.scss

@@ -107,6 +107,10 @@
   .site-description {
     line-height: 1rem;
     margin-bottom: 0;
+
+    body.is-ios & {
+      line-height: 1.125rem;
+    }
   }
 
   &:dir(rtl) {

src/components/middle/message/_message-content.scss

@@ -44,10 +44,11 @@
   &.document {
     & > .MessageMeta {
       position: relative;
-      top: .4375rem;
+      top: .375rem;
       bottom: auto !important;
       float: right;
       line-height: 1;
+      margin-top: .125rem;
       margin-left: .4375rem;
       margin-right: -.5rem;
     }
@@ -90,6 +91,9 @@
 
   &:not(.custom-shape) {
     font-size: var(--message-text-size, 1rem);
+    body.is-ios & {
+      font-size: var(--message-text-size, 1.0625rem);
+    }
 
     & > .content-inner {
       min-width: 0;

src/components/middle/message/helpers/calculateAuthorWidth.ts

@@ -1,10 +1,15 @@
+import { IS_IOS } from '../../../../util/environment';
+
 let element: HTMLSpanElement | undefined;
 
 export default function calculateAuthorWidth(text: string) {
   if (!element) {
     element = document.createElement('span');
     // eslint-disable-next-line max-len
-    element.style.font = '400 12px "Roboto", -apple-system, "Apple Color Emoji", BlinkMacSystemFont, "Helvetica Neue", sans-serif';
+    element.style.font = IS_IOS
+      // eslint-disable-next-line max-len
+      ? '400 12px system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif'
+      : '400 12px "Roboto", -apple-system, "Apple Color Emoji", BlinkMacSystemFont, "Helvetica Neue", sans-serif';
     element.style.whiteSpace = 'nowrap';
     element.style.position = 'absolute';
     element.style.left = '-999px';

src/components/ui/ListItem.scss

@@ -117,6 +117,11 @@
   &.chat-item-clickable {
     margin: 0 -0.5rem;
 
+    body.is-ios &,
+    body.is-macos & {
+      --color-text-secondary: var(--color-text-secondary-apple);
+    }
+
     .ListItem-button {
       padding: .5625rem .6975rem .5625rem .5625rem;
     }
@@ -209,6 +214,15 @@
       unicode-bidi: plaintext;
     }
 
+    .last-message,
+    .status,
+    .typing-status {
+      body.is-ios &,
+      body.is-macos & {
+        font-size: .9375rem;
+      }
+    }
+
     &[dir=rtl] {
       .ListItem-button {
         padding: .5625rem .5625rem .5625rem .6975rem;

src/components/ui/Tab.scss

@@ -51,6 +51,11 @@
     text-align: center;
     flex-shrink: 0;
 
+    body.is-ios &,
+    body.is-macos & {
+      line-height: 1.25rem;
+    }
+
     &.active {
       background: var(--color-primary);
     }

src/config.ts

@@ -66,6 +66,8 @@ export const ANIMATION_LEVEL_MAX = 2;
 export const ANIMATION_LEVEL_DEFAULT = ANIMATION_LEVEL_MAX;
 
 export const DEFAULT_MESSAGE_TEXT_SIZE_PX = 16;
+export const IOS_DEFAULT_MESSAGE_TEXT_SIZE_PX = 17;
+export const MACOS_DEFAULT_MESSAGE_TEXT_SIZE_PX = 15;
 
 export const DRAFT_DEBOUNCE = 10000; // 10s
 

src/global/initial.ts

@@ -3,7 +3,9 @@ import { NewChatMembersProgress } from '../types';
 
 import {
   ANIMATION_LEVEL_DEFAULT, DARK_THEME_PATTERN_COLOR, DEFAULT_MESSAGE_TEXT_SIZE_PX, DEFAULT_PATTERN_COLOR,
+  IOS_DEFAULT_MESSAGE_TEXT_SIZE_PX, MACOS_DEFAULT_MESSAGE_TEXT_SIZE_PX,
 } from '../config';
+import { IS_IOS, IS_MAC_OS } from '../util/environment';
 
 export const INITIAL_STATE: GlobalState = {
   isLeftColumnShown: true,
@@ -119,7 +121,9 @@ export const INITIAL_STATE: GlobalState = {
     byKey: {
       theme: 'light',
       shouldUseSystemTheme: true,
-      messageTextSize: DEFAULT_MESSAGE_TEXT_SIZE_PX,
+      messageTextSize: IS_IOS
+        ? IOS_DEFAULT_MESSAGE_TEXT_SIZE_PX
+        : (IS_MAC_OS ? MACOS_DEFAULT_MESSAGE_TEXT_SIZE_PX : DEFAULT_MESSAGE_TEXT_SIZE_PX),
       animationLevel: ANIMATION_LEVEL_DEFAULT,
       messageSendKeyCombo: 'enter',
       shouldAutoDownloadMediaFromContacts: true,

src/modules/actions/ui/initial.ts

@@ -2,7 +2,7 @@ import { addReducer, getGlobal, setGlobal } from '../../../lib/teact/teactn';
 
 import { ANIMATION_LEVEL_MAX } from '../../../config';
 import {
-  IS_ANDROID, IS_IOS, IS_SAFARI, IS_TOUCH_ENV,
+  IS_ANDROID, IS_IOS, IS_MAC_OS, IS_SAFARI, IS_TOUCH_ENV,
 } from '../../../util/environment';
 import { setLanguage } from '../../../util/langProvider';
 import switchTheme from '../../../util/switchTheme';
@@ -31,6 +31,8 @@ addReducer('init', (global) => {
     document.body.classList.add('is-ios');
   } else if (IS_ANDROID) {
     document.body.classList.add('is-android');
+  } else if (IS_MAC_OS) {
+    document.body.classList.add('is-macos');
   }
 });
 

src/styles/_variables.scss

@@ -34,7 +34,9 @@ $color-black: #000000;
 $color-dark-gray: #2e3939;
 $color-gray: #c4c9cc;
 $color-text-secondary: #707579;
+$color-text-secondary-apple: #8E8E92;
 $color-text-meta: #686c72;
+$color-text-meta-apple: #8C8C91;
 $color-borders: #dadce0;
 $color-item-active: #ededed;
 $color-chat-hover: #f4f4f5;
@@ -65,9 +67,11 @@ $color-user-8: #faa774;
   --color-text-lighter: #{$color-dark-gray};
   --color-text-secondary: #{$color-text-secondary};
   --color-text-secondary-rgb: #{toRGB($color-text-secondary)};
+  --color-text-secondary-apple: #{$color-text-secondary-apple};
   --color-text-meta: #{$color-text-meta};
   --color-text-meta-rgb: #{toRGB($color-text-meta)};
   --color-text-meta-colored: #{$color-text-green};
+  --color-text-meta-apple: #{$color-text-meta-apple};
   --color-text-green: #{$color-text-green};
   --color-text-green-rgb: #{toRGB($color-text-green)};
   --color-borders: #{$color-borders};
@@ -119,6 +123,10 @@ $color-user-8: #faa774;
   --color-reply-own-hover: #{blend-normal(rgba($color-text-green, 0.12), $color-light-green)};
   --color-reply-own-active: #{blend-normal(rgba($color-text-green, 0.24), $color-light-green)};
 
+  --color-background-own-apple: #E7FDCC;
+  --color-reply-own-hover-apple: #d9f9c1;
+  --color-reply-own-active-apple: #d5edc2;
+
   --color-white: #{$color-white};
   --color-gray: #{$color-gray};
 

src/styles/index.scss

@@ -7,12 +7,6 @@
 @import 'common';
 @import '../assets/fonts/roboto.css';
 
-html {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-rendering: optimizeSpeed;
-}
-
 html, body {
   width: 100%;
   height: 100%;
@@ -23,14 +17,25 @@ html, body {
   font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Helvetica Neue", sans-serif;
   color: var(--color-text);
   overflow: hidden;
+
   @media (max-width: 600px) {
     height: calc(var(--vh, 1vh) * 100);
   }
 }
 
+body.is-ios,
+body.is-macos {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif;
+}
+
 html[lang=fa],
 html[lang=fa] body {
   font-family: "Vazir", "Roboto", -apple-system, BlinkMacSystemFont, "Apple Color Emoji", "Helvetica Neue", sans-serif;
+
+  &.is-ios,
+  &.is-macos {
+    font-family: "Vazir", -apple-system, BlinkMacSystemFont, "Roboto", "Apple Color Emoji", "Helvetica Neue", sans-serif;
+  }
 }
 
 body.cursor-grabbing, body.cursor-grabbing * {

src/styles/themes.json

@@ -6,6 +6,7 @@
   "--color-background-secondary": ["#f4f4f5", "#121212"],
   "--color-background-secondary-accent": ["#E4E4E5", "#100f10"],
   "--color-background-own": ["#EEFEDF", "#8378DB"],
+  "--color-background-own-apple": ["#E7FDCC", "#8378DB"],
   "--color-background-selected": ["#F4F4F5", "#2C2C2C"],
   "--color-background-own-selected": ["#d4fcae", "#7b71c6"],
   "--color-chat-hover": ["#F4F4F5", "#2C2C2C"],
@@ -13,6 +14,7 @@
   "--color-item-active": ["#ededed", "#292929"],
   "--color-text": ["#000000", "#FFFFFF"],
   "--color-text-secondary": ["#707579", "#AAAAAA"],
+  "--color-text-secondary-apple": ["#8E8E92", "#AAAAAA"],
   "--color-borders": ["#DADCE0", "#100F10"],
   "--color-borders-input": ["#DADCE0", "#5B5B5A"],
   "--color-links": ["#52A1EF", "#868DF6"],
@@ -26,7 +28,9 @@
   "--color-reply-hover": ["#F4F4F4", "#272727"],
   "--color-reply-active": ["#E8E9E9", "#2E2F2F"],
   "--color-reply-own-hover": ["#DBF4CE", "#6458bc"],
+  "--color-reply-own-hover-apple": ["#d9f9c1", "#6458bc"],
   "--color-reply-own-active": ["#C8EBBC", "#4F4A9F"],
+  "--color-reply-own-active-apple": ["#d5edc2", "#4F4A9F"],
   "--color-accent-own": ["#4FAE4E", "#FFFFFF"],
   "--color-message-meta-own": ["#4FAE4EFF", "#FFFFFF88"],
   "--color-own-links": ["#52A1EF", "#FFFFFF"],