CSS: Use variables to define font weight (#5342)

2024-12-29 11:58:36 +01:00 · 2024-12-29 11:58:36 +01:00 · 7e316db081
commit 7e316db081
parent 6563d37e8a
129 changed files with 175 additions and 175 deletions
--- a/src/components/calls/ActiveCallHeader.scss
+++ b/src/components/calls/ActiveCallHeader.scss
@ -8,7 +8,7 @@

  display: flex;
  justify-content: center;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  font-size: 0.875rem;
  color: #fff;
  align-items: center;
--- a/src/components/calls/group/GroupCall.module.scss
+++ b/src/components/calls/group/GroupCall.module.scss
@ -118,7 +118,7 @@
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
  font-size: 1rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  margin: 0;
 }

--- a/src/components/calls/group/GroupCallParticipant.module.scss
+++ b/src/components/calls/group/GroupCallParticipant.module.scss
@ -13,7 +13,7 @@
      display: flex !important;

      .fullName {
-        font-weight: 500;
+        font-weight: var(--font-weight-medium);
        font-size: 1rem;
        --emoji-size: 1rem;
      }
--- a/src/components/calls/group/GroupCallParticipantVideo.module.scss
+++ b/src/components/calls/group/GroupCallParticipantVideo.module.scss
@ -133,7 +133,7 @@

 .name {
  color: #FFFFFF;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  line-height: 1.125rem;

  :global(.fullName) {
--- a/src/components/calls/group/GroupCallTopPane.scss
+++ b/src/components/calls/group/GroupCallTopPane.scss
@ -28,7 +28,7 @@
  .join {
    height: 1.875rem;
    border-radius: 1rem;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    padding: 0 1rem;
    width: auto;
  }
--- a/src/components/calls/phone/PhoneCall.module.scss
+++ b/src/components/calls/phone/PhoneCall.module.scss
@ -107,7 +107,7 @@
  color: white;
  max-width: 20rem;
  text-align: center;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  opacity: 0;
  transition: 0.25s ease-in-out opacity;

--- a/src/components/common/Audio.scss
+++ b/src/components/common/Audio.scss
@ -160,7 +160,7 @@
  }

  .title {
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
@ -391,7 +391,7 @@
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
-      font-weight: 400;
+      font-weight: var(--font-weight-normal);
      line-height: 1.5rem;
    }

--- a/src/components/common/AvatarList.module.scss
+++ b/src/components/common/AvatarList.module.scss
@ -77,7 +77,7 @@

  font-size: 0.75rem;
  line-height: 1rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);

  padding: 0rem 0.25rem;
 }
--- a/src/components/common/CalendarModal.scss
+++ b/src/components/common/CalendarModal.scss
@ -67,7 +67,7 @@
    position: relative;
    border-radius: 4rem;
    outline: none !important;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    margin: 0.125rem 0.625rem;

    @media (max-width: 600px) {
--- a/src/components/common/Composer.scss
+++ b/src/components/common/Composer.scss
@ -466,7 +466,7 @@
    .bot-menu-text {
      --emoji-size: 1rem;
      font-size: 0.875rem;
-      font-weight: 500;
+      font-weight: var(--font-weight-medium);
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
--- a/src/components/common/FakeIcon.scss
+++ b/src/components/common/FakeIcon.scss
@ -6,6 +6,6 @@
  padding: 0.125rem 0.25rem;
  line-height: initial;
  margin-inline: 0.25rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  text-transform: capitalize;
 }
--- a/src/components/common/File.scss
+++ b/src/components/common/File.scss
@ -51,7 +51,7 @@

    .file-ext {
      font-size: 1rem;
-      font-weight: 500;
+      font-weight: var(--font-weight-medium);
      transition: opacity 0.15s;
    }

@ -144,7 +144,7 @@
  .file-title {
    font-size: 1rem;
    line-height: 1.5rem;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;

@ -193,7 +193,7 @@
    }

    .file-title {
-      font-weight: 400;
+      font-weight: var(--font-weight-normal);
    }

    .file-subtitle {
--- a/src/components/common/LinkField.module.scss
+++ b/src/components/common/LinkField.module.scss
@ -18,7 +18,7 @@
 }

 .title {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  padding-left: 1rem;
 }
--- a/src/components/common/PeerBadge.module.scss
+++ b/src/components/common/PeerBadge.module.scss
@ -22,7 +22,7 @@
  align-items: center;
  gap: 0.125rem;
  font-size: 0.75rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  line-height: 1;
  white-space: nowrap;
  padding: 0.25rem;
--- a/src/components/common/PremiumProgress.module.scss
+++ b/src/components/common/PremiumProgress.module.scss
@ -83,7 +83,7 @@

 .floating-badge-value {
  font-size: 16px;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }

 .left, .right {
@ -92,7 +92,7 @@
  bottom: 0;
  display: flex;
  align-items: center;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }

 .left {
--- a/src/components/common/ProfileInfo.module.scss
+++ b/src/components/common/ProfileInfo.module.scss
@ -175,7 +175,7 @@
  border-radius: 1rem;
  padding: 0.1875rem 0.375rem;
  pointer-events: all;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  transition: 150ms filter ease-in;
  background: var(--blured-background-color);
  backdrop-filter: blur(100px);
@ -214,7 +214,7 @@
 .topicIconTitle {
  font-size: 3rem !important;

-  font-weight: 400;
+  font-weight: var(--font-weight-normal);

  :global(.emoji-small) {
    width: 3rem;
--- a/src/components/common/ProfileInfo.scss
+++ b/src/components/common/ProfileInfo.scss
@ -18,7 +18,7 @@
  }

  .fullName {
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    font-size: 1.25rem;
    line-height: 1.375rem;
    white-space: pre-wrap;
--- a/src/components/common/StickerButton.scss
+++ b/src/components/common/StickerButton.scss
@ -38,7 +38,7 @@
    vertical-align: bottom;
    align-self: center;
    justify-self: center;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
  }

  .sticker-locked {
--- a/src/components/common/TopicDefaultIcon.module.scss
+++ b/src/components/common/TopicDefaultIcon.module.scss
@ -19,7 +19,7 @@
 .title {
  z-index: 1;
  color: #ffffff;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  font-size: 0.75em;
  line-height: 1;
  position: absolute;
--- a/src/components/common/WebLink.scss
+++ b/src/components/common/WebLink.scss
@ -23,7 +23,7 @@
    justify-content: center;
    border-radius: var(--border-radius-messages-small);
    text-transform: uppercase;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    font-size: 1.5rem;
  }

@ -48,7 +48,7 @@
  .site-name {
    display: block;
    color: var(--color-links);
-    font-weight: 400;
+    font-weight: var(--font-weight-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
--- a/src/components/common/code/CodeBlock.scss
+++ b/src/components/common/code/CodeBlock.scss
@ -22,7 +22,7 @@
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
    color: var(--accent-color);
    font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
--- a/src/components/common/embedded/EmbeddedMessage.scss
+++ b/src/components/common/embedded/EmbeddedMessage.scss
@ -236,7 +236,7 @@
    }

    .message-title {
-      font-weight: 500;
+      font-weight: var(--font-weight-medium);
      color: var(--accent-color);
    }
  }
--- a/src/components/common/gift/UserGift.module.scss
+++ b/src/components/common/gift/UserGift.module.scss
@ -40,7 +40,7 @@
  gap: 0.125rem;

  color: #E88011;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }

 .hiddenGift {
--- a/src/components/common/pickers/ChatOrUserPicker.scss
+++ b/src/components/common/pickers/ChatOrUserPicker.scss
@ -114,7 +114,7 @@

      font-size: 1rem;
      line-height: 1.6875rem;
-      font-weight: 500;
+      font-weight: var(--font-weight-medium);
    }

    .fullName {
--- a/src/components/common/pickers/PickerStyles.module.scss
+++ b/src/components/common/pickers/PickerStyles.module.scss
@ -34,7 +34,7 @@
 .pickerCategoryTitle {
  color: var(--color-text-secondary);
  padding-inline: 0.5rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);

  &:not(:first-child) {
    border-top: 1px solid var(--color-borders);
--- a/src/components/left/ConnectionStatusOverlay.scss
+++ b/src/components/left/ConnectionStatusOverlay.scss
@ -40,7 +40,7 @@
    flex: 1;
    color: var(--color-text-lighter);
    font-size: 0.9375rem;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    padding-bottom: 0.0625rem;
    margin-inline-start: 1.875rem;
    white-space: nowrap;
--- a/src/components/left/LeftColumn.scss
+++ b/src/components/left/LeftColumn.scss
@ -13,7 +13,7 @@
  h3 {
    margin-bottom: 0;
    font-size: 1.25rem;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    margin-left: 1.375rem;
    margin-right: auto;
    user-select: none;
--- a/src/components/left/main/ChatBadge.scss
+++ b/src/components/left/main/ChatBadge.scss
@ -33,7 +33,7 @@
  color: white;
  font-size: 0.875rem;
  line-height: 1.5625rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  text-align: center;
  flex-shrink: 0;

--- a/src/components/left/main/EmptyFolder.module.scss
+++ b/src/components/left/main/EmptyFolder.module.scss
@ -36,7 +36,7 @@
  :global(.Button.pill) {
    max-width: 100%;
    margin-top: 0.625rem;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    padding-inline-start: 0.75rem;
    unicode-bidi: plaintext;

--- a/src/components/left/main/EmptyForum.module.scss
+++ b/src/components/left/main/EmptyForum.module.scss
@ -13,7 +13,7 @@
  :global(.Button.pill) {
    max-width: 100%;
    margin-top: 0.625rem;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    padding-inline-start: 0.75rem;
    unicode-bidi: plaintext;

--- a/src/components/left/main/ForumPanel.module.scss
+++ b/src/components/left/main/ForumPanel.module.scss
@ -85,7 +85,7 @@
    text-overflow: ellipsis;
    unicode-bidi: plaintext;
    font-size: 1rem !important;
-    font-weight: 500 !important;
+    font-weight: var(--font-weight-medium) !important;
    margin: 0 !important;
  }

--- a/src/components/left/main/LeftMainHeader.scss
+++ b/src/components/left/main/LeftMainHeader.scss
@ -144,7 +144,7 @@

  .left-search-picker-item {
    color: var(--color-text-secondary);
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    padding-right: 0;
  }
 }
--- a/src/components/left/main/UnconfirmedSession.module.scss
+++ b/src/components/left/main/UnconfirmedSession.module.scss
@ -28,5 +28,5 @@

 .button {
  font-size: 0.875rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }
--- a/src/components/left/newChat/NewChat.scss
+++ b/src/components/left/newChat/NewChat.scss
@ -30,7 +30,7 @@
      .chat-members-heading {
        color: var(--color-text-secondary);
        font-size: 1rem;
-        font-weight: 500;
+        font-weight: var(--font-weight-medium);
        margin: 1rem 0.25rem;
      }

--- a/src/components/left/search/DateSuggest.scss
+++ b/src/components/left/search/DateSuggest.scss
@ -12,7 +12,7 @@
    margin-top: 0.375rem;
    cursor: var(--custom-cursor, pointer);
    font-size: 0.875rem;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);

    .icon-calendar {
--- a/src/components/left/search/LeftSearch.scss
+++ b/src/components/left/search/LeftSearch.scss
@ -44,7 +44,7 @@
    padding-left: 0.5rem;
    margin-bottom: 1rem;

-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    font-size: 1rem;
    color: var(--color-text-secondary);

@ -167,7 +167,7 @@
      align-items: center;
      font-size: 1rem;
      line-height: 1.6875rem;
-      font-weight: 500;
+      font-weight: var(--font-weight-medium);
      overflow: hidden;

      .topic-icon {
@ -196,7 +196,7 @@
      .Link {
        float: right;
        color: var(--color-links);
-        font-weight: 500;
+        font-weight: var(--font-weight-medium);
        margin-right: 0.5rem;
        transition: opacity 0.15s ease-in;

--- a/src/components/left/settings/Settings.scss
+++ b/src/components/left/settings/Settings.scss
@ -241,7 +241,7 @@
        font-size: 1rem;
        line-height: 1rem;
        margin-bottom: 0.25rem;
-        font-weight: 500;
+        font-weight: var(--font-weight-medium);
      }

      .contact-phone {
--- a/src/components/left/settings/folders/SettingsFolders.scss
+++ b/src/components/left/settings/folders/SettingsFolders.scss
@ -33,7 +33,7 @@

      h3 {
        font-size: 1rem;
-        font-weight: 500;
+        font-weight: var(--font-weight-medium);
        line-height: 1.3125;
        margin: 0;
        overflow: hidden;
--- a/src/components/main/premium/GiveawayModal.module.scss
+++ b/src/components/main/premium/GiveawayModal.module.scss
@ -18,7 +18,7 @@
 }

 .button {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  font-size: 1rem;
  height: 3rem;
 }
@ -40,7 +40,7 @@

 .header-text {
  font-size: 1.5rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  text-align: center;
  margin-inline: 0.5rem;
 }
@ -79,7 +79,7 @@

 .premium-header-text {
  font-size: 1.25rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  margin: 0 0 0 3rem;
  unicode-bidi: plaintext;
 }
@ -128,7 +128,7 @@
 .subscription {
  margin: 1rem 1.625rem 1.3125rem 1.5rem;
  font-size: 1rem;
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);

  @include mixins.adapt-margin-to-scrollbar(1rem);
@ -206,7 +206,7 @@

 .floatingBadgeValue {
  font-size: 0.875rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }

 .subscriptionFooter {
--- a/src/components/main/premium/PremiumFeatureModal.module.scss
+++ b/src/components/main/premium/PremiumFeatureModal.module.scss
@ -3,7 +3,7 @@
 }

 .button {
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  height: 3rem;
 }
@ -70,7 +70,7 @@
 .header {
  padding-left: 4rem;
  font-size: 1.25rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
  border-bottom: 0.0625rem solid var(--color-borders);
@ -102,7 +102,7 @@

 .title {
  font-size: 1.25rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  text-align: center;
  color: var(--color-text);
  margin-top: 1rem;
@ -110,7 +110,7 @@

 .description {
  font-size: 1rem;
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
  line-height: 1.375rem;
  text-align: center;
  color: var(--color-text-secondary);
--- a/src/components/main/premium/PremiumMainModal.module.scss
+++ b/src/components/main/premium/PremiumMainModal.module.scss
@ -26,7 +26,7 @@
 }

 .button {
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  height: 3rem;
 }
@ -58,7 +58,7 @@

 .header-text {
  font-size: 1.5rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  text-align: center;
  margin-inline: 0.5rem;
 }
@ -106,7 +106,7 @@

 .premium-header-text {
  font-size: 1.25rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  margin: 0 0 0 3rem;
  unicode-bidi: plaintext;
 }
--- a/src/components/main/premium/PremiumSubscriptionOption.module.scss
+++ b/src/components/main/premium/PremiumSubscriptionOption.module.scss
@ -121,7 +121,7 @@

 .giveawayDiscount {
  font-size: 0.8125rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  border-radius: 0.375rem;
  padding: 0.1875rem;
 }
--- a/src/components/main/premium/StarsGiftingPickerModal.module.scss
+++ b/src/components/main/premium/StarsGiftingPickerModal.module.scss
@ -82,5 +82,5 @@

 .button {
  height: 3rem;
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
 }
--- a/src/components/main/premium/common/PremiumLimitPreview.module.scss
+++ b/src/components/main/premium/common/PremiumLimitPreview.module.scss
@ -5,7 +5,7 @@
 }

 .title {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  margin-left: 0.75rem;
  unicode-bidi: plaintext;
--- a/src/components/main/premium/common/PremiumLimitReachedModal.module.scss
+++ b/src/components/main/premium/common/PremiumLimitReachedModal.module.scss
@ -25,7 +25,7 @@
 }

 .limit-value {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  color: var(--color-white);
 }

--- a/src/components/main/premium/common/PremiumLimitsCompare.module.scss
+++ b/src/components/main/premium/common/PremiumLimitsCompare.module.scss
@ -28,7 +28,7 @@

 .text, .floating-badge-value {
  font-size: 16px;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }

 .left-text {
--- a/src/components/main/premium/previews/PremiumFeaturePreviewStories.module.scss
+++ b/src/components/main/premium/previews/PremiumFeaturePreviewStories.module.scss
@ -19,7 +19,7 @@

 .title {
  font-size: 1.25rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  align-self: center;
  margin-top: 1rem;
  margin-bottom: 1rem;
--- a/src/components/mediaViewer/SenderInfo.scss
+++ b/src/components/mediaViewer/SenderInfo.scss
@ -26,7 +26,7 @@

  .title {
    line-height: 1.4375rem;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
--- a/src/components/middle/ContactGreeting.module.scss
+++ b/src/components/middle/ContactGreeting.module.scss
@ -30,7 +30,7 @@
  }

  .title {
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    margin-bottom: 0;
  }

--- a/src/components/middle/DeleteSelectedMessageModal.module.scss
+++ b/src/components/middle/DeleteSelectedMessageModal.module.scss
@ -22,7 +22,7 @@
  margin-left: 1rem;
  color: var(--color-links);
  font-size: 1rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }

 .restrictionTitle {
--- a/src/components/middle/MessageList.scss
+++ b/src/components/middle/MessageList.scss
@ -296,7 +296,7 @@
    display: flex;
    gap: 0.25rem;
    line-height: 1.5;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
  }

  .action-message-user-caption {
--- a/src/components/middle/MessageListBotInfo.module.scss
+++ b/src/components/middle/MessageListBotInfo.module.scss
@ -26,7 +26,7 @@
 }

 .bot-info-title {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  margin-bottom: 0.25rem;
 }

--- a/src/components/middle/MessageSelectToolbar.scss
+++ b/src/components/middle/MessageSelectToolbar.scss
@ -85,7 +85,7 @@
    background: var(--color-background);
    border-radius: var(--border-radius-messages);
    box-shadow: 0 1px 2px var(--color-default-shadow);
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);

    transform: scaleX(1);
    transition: transform var(--select-transition), opacity var(--select-transition);
--- a/src/components/middle/MiddleHeader.scss
+++ b/src/components/middle/MiddleHeader.scss
@ -50,7 +50,7 @@
      border-radius: 0.625rem;
      font-size: 0.75rem;
      line-height: 1.25rem;
-      font-weight: 500;
+      font-weight: var(--font-weight-medium);
      text-align: center;

      position: absolute;
@ -110,7 +110,7 @@
  }

  h3 {
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    font-size: 1.125rem;
    line-height: 1.375rem;
    white-space: pre;
@ -122,7 +122,7 @@
    body.is-ios &,
    body.is-macos & {
      font-size: 1.0625rem;
-      font-weight: 600;
+      font-weight: var(--font-weight-semibold);
    }

    @media (max-width: 600px) {
@ -313,7 +313,7 @@
      color: white;
      font-size: 0.75rem;
      line-height: 1rem;
-      font-weight: 500;
+      font-weight: var(--font-weight-medium);
      text-align: center;
      flex-shrink: 0;
      right: 0;
--- a/src/components/middle/NoMessages.scss
+++ b/src/components/middle/NoMessages.scss
@ -32,7 +32,7 @@
  }

  .title {
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    font-size: 1rem;
    margin-bottom: 0.25rem;
    text-align: center;
--- a/src/components/middle/ScrollDownButton.module.scss
+++ b/src/components/middle/ScrollDownButton.module.scss
@ -57,7 +57,7 @@
  border-radius: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  text-align: center;

  position: absolute;
--- a/src/components/middle/composer/BotKeyboardMenu.scss
+++ b/src/components/middle/composer/BotKeyboardMenu.scss
@ -34,7 +34,7 @@
      border: 2px solid var(--color-primary);
      background: var(--color-background);
      color: var(--color-primary);
-      font-weight: 500;
+      font-weight: var(--font-weight-medium);
      text-transform: none;

      &:hover {
--- a/src/components/middle/composer/DropTarget.scss
+++ b/src/components/middle/composer/DropTarget.scss
@ -95,7 +95,7 @@

  .title {
    font-size: 1.3125rem;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    letter-spacing: -0.18px;

    @media (max-height: 450px) {
--- a/src/components/middle/composer/InlineBotTooltip.scss
+++ b/src/components/middle/composer/InlineBotTooltip.scss
@ -1,7 +1,7 @@
 .InlineBotTooltip {
  .switch-pm .title {
    margin: 0 auto;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
  }

  &.gallery {
--- a/src/components/middle/composer/PollModal.scss
+++ b/src/components/middle/composer/PollModal.scss
@ -18,7 +18,7 @@
  .options-header {
    color: var(--color-text-secondary);
    font-size: 1rem;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    margin: 1.5rem 0.25rem;
  }

--- a/src/components/middle/composer/SendAsMenu.scss
+++ b/src/components/middle/composer/SendAsMenu.scss
@ -1,6 +1,6 @@
 .SendAsMenu {
  .send-as-title {
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    line-height: 1.25rem;
    word-break: break-word;
    margin-inline-start: 1rem;
--- a/src/components/middle/composer/SymbolMenu.scss
+++ b/src/components/middle/composer/SymbolMenu.scss
@ -194,7 +194,7 @@

    font-size: 1rem;
    line-height: 1.6875rem;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    margin: 0;
    padding: 0 0.25rem 0.125rem;
    overflow: hidden;
--- a/src/components/middle/composer/inlineResults/BaseResult.scss
+++ b/src/components/middle/composer/inlineResults/BaseResult.scss
@ -32,7 +32,7 @@
  }

  .title {
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    text-align: left;
    unicode-bidi: plaintext;
  }
--- a/src/components/middle/message/CommentButton.scss
+++ b/src/components/middle/message/CommentButton.scss
@ -12,7 +12,7 @@
  border-bottom-right-radius: var(--border-bottom-right-radius);
  border-bottom-left-radius: var(--border-bottom-left-radius);
  font-size: 0.9375rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  line-height: 2.125rem;
  color: var(--accent-color);
  white-space: nowrap;
--- a/src/components/middle/message/Contact.module.scss
+++ b/src/components/middle/message/Contact.module.scss
@ -19,7 +19,7 @@

 .name {
  font-size: 1rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  max-width: 12.5rem;
 }

@ -49,7 +49,7 @@
    flex: 1;
    height: 2.25rem;
    margin-block: 0.25rem;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    background-color: transparent;
    color: var(--accent-color);
    --ripple-color: var(--accent-background-active-color);
--- a/src/components/middle/message/FactCheck.module.scss
+++ b/src/components/middle/message/FactCheck.module.scss
@ -7,7 +7,7 @@
 }

 .title {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }

 .content {
--- a/src/components/middle/message/Game.scss
+++ b/src/components/middle/message/Game.scss
@ -1,6 +1,6 @@
 .Game {
  .title {
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
  }

  .description {
--- a/src/components/middle/message/Giveaway.module.scss
+++ b/src/components/middle/message/Giveaway.module.scss
@ -73,7 +73,7 @@
 }

 .result {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }

 .separator {
--- a/src/components/middle/message/InlineButtons.scss
+++ b/src/components/middle/message/InlineButtons.scss
@ -15,7 +15,7 @@
    margin: 0.125rem;
    background: var(--pattern-color);
    border-radius: var(--border-radius-messages-small);
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    text-transform: none;
    transition: background-color 150ms, color 150ms, backdrop-filter 150ms, filter 150ms;

--- a/src/components/middle/message/Invoice.scss
+++ b/src/components/middle/message/Invoice.scss
@ -1,7 +1,7 @@
 .Invoice {
  .title {
    color: var(--accent-color);
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    margin-bottom: 0;
  }

@ -41,7 +41,7 @@
        background-color: rgba(0, 0, 0, 0.4);
        border-radius: var(--border-radius-messages-small);
        color: var(--color-white);
-        font-weight: 500;
+        font-weight: var(--font-weight-medium);
      }
    }

--- a/src/components/middle/message/Location.scss
+++ b/src/components/middle/message/Location.scss
@ -154,7 +154,7 @@
    padding: 0.3125rem 0.5rem 0.25rem;

    &-title {
-      font-weight: 500;
+      font-weight: var(--font-weight-medium);
      grid-area: 1 / 1 / 2 / 2;
    }

@ -184,7 +184,7 @@
    left: 0;
    transform: translateY(-50%);
    font-size: 0.875rem;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    line-height: 1;
    width: 100%;
    text-align: center;
--- a/src/components/middle/message/MessagePhoneCall.module.scss
+++ b/src/components/middle/message/MessagePhoneCall.module.scss
@ -19,7 +19,7 @@
 }

 .reason {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }

 .arrow {
--- a/src/components/middle/message/Poll.scss
+++ b/src/components/middle/message/Poll.scss
@ -7,7 +7,7 @@
  }

  .poll-question {
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    line-height: 1.25rem;
    margin: 0.125rem 0;
    word-break: break-word;
--- a/src/components/middle/message/PollOption.scss
+++ b/src/components/middle/message/PollOption.scss
@ -17,7 +17,7 @@
    width: 1.75rem;
    margin-inline-end: 0.5rem;
    flex-shrink: 0;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
    font-size: 0.875rem;
    text-align: right;

--- a/src/components/middle/message/SimilarChannels.module.scss
+++ b/src/components/middle/message/SimilarChannels.module.scss
@ -34,7 +34,7 @@

 .title {
  font-size: 0.875rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  line-height: 1.5rem;
 }

@ -196,7 +196,7 @@

 .members-count {
  font-size: 0.5625rem;
-  font-weight: 700;
+  font-weight: var(--font-weight-semibold);
  line-height: 0.6875rem;
 }

@ -204,7 +204,7 @@
  text-align: center;
  height: 1.625rem;
  font-size: 0.6875rem;
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
  line-height: 0.8125rem;
  max-width: 3.4375rem;
  margin-top: 0.125rem;
--- a/src/components/middle/message/TimeMenuItem.module.scss
+++ b/src/components/middle/message/TimeMenuItem.module.scss
@ -1,7 +1,7 @@
 :global(.MenuItem).item {
  margin-bottom: 0;
  font-size: 0.8125rem;
-  font-weight: 400;
+  font-weight: var(--font-weight-normal);
  cursor: var(--custom-cursor, default);
  pointer-events: none;
  --color-skeleton-background: #2121211a;
@ -23,7 +23,7 @@
  border-radius: 1rem;
  padding: 0.1875rem 0.375rem;
  pointer-events: all;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  transition: 150ms filter ease-in;
  background: var(--color-background-menu-separator);
  filter: opacity(0.8);
--- a/src/components/middle/message/_message-content.scss
+++ b/src/components/middle/message/_message-content.scss
@ -371,7 +371,7 @@

    .via {
      padding-right: 0.25rem;
-      font-weight: 400;
+      font-weight: var(--font-weight-normal);
    }

    span + .via {
@ -397,7 +397,7 @@
    .admin-title {
      margin-left: 1rem;
      text-align: right;
-      font-weight: 400;
+      font-weight: var(--font-weight-normal);
      font-size: 0.75rem;
      color: rgba(var(--color-text-meta-rgb), 0.75);
      user-select: none;
--- a/src/components/middle/message/reactions/ReactionButton.module.scss
+++ b/src/components/middle/message/reactions/ReactionButton.module.scss
@ -32,7 +32,7 @@
  padding: 0 0.375rem 0 0.25rem;
  background-color: var(--reaction-background) !important;
  border-radius: 1.75rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  font-variant-numeric: tabular-nums;
  text-transform: none;
  color: var(--reaction-text-color);
--- a/src/components/middle/panes/AudioPlayer.scss
+++ b/src/components/middle/panes/AudioPlayer.scss
@ -181,7 +181,7 @@
    .AudioPlayer & .title {
      display: block;
      margin-top: 0.125rem;
-      font-weight: 500;
+      font-weight: var(--font-weight-medium);
      font-size: 0.875rem !important;
      line-height: 1rem;
      white-space: nowrap;
--- a/src/components/middle/panes/BotAdPane.module.scss
+++ b/src/components/middle/panes/BotAdPane.module.scss
@ -40,7 +40,7 @@

 .title, .info {
  font-size: calc(var(--message-text-size, 1rem) - 0.125rem);
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  line-height: 1.25rem;
 }

--- a/src/components/middle/panes/HeaderPinnedMessage.module.scss
+++ b/src/components/middle/panes/HeaderPinnedMessage.module.scss
@ -132,7 +132,7 @@
 }

 .title {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  font-size: 0.875rem;
  line-height: 1rem;
  height: 1rem;
@ -170,7 +170,7 @@
  text-overflow: ellipsis;
  border-radius: 1.5rem;
  padding: 0 0.75rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  text-transform: none;
  height: 2rem;
  max-width: 10rem;
--- a/src/components/middle/search/MiddleSearch.module.scss
+++ b/src/components/middle/search/MiddleSearch.module.scss
@ -218,7 +218,7 @@

  color: var(--color-text-secondary);
  background-color: var(--color-item-active);
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);

  margin-bottom: 0;
 }
--- a/src/components/modals/boost/BoostModal.module.scss
+++ b/src/components/modals/boost/BoostModal.module.scss
@ -32,7 +32,7 @@
 }

 .bold {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }

 .chip {
--- a/src/components/modals/chatlist/ChatlistModal.module.scss
+++ b/src/components/modals/chatlist/ChatlistModal.module.scss
@ -15,7 +15,7 @@
 }

 .picker-header-info {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
 }

--- a/src/components/modals/gift/GiftComposer.module.scss
+++ b/src/components/modals/gift/GiftComposer.module.scss
@ -21,7 +21,7 @@
 .title {
  margin-inline: 0.5rem;
  font-size: 1.25rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }

 .balance-container {
@ -42,7 +42,7 @@
 .balance {
  display: flex;
  font-size: 1rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  align-items: center;
 }

--- a/src/components/modals/gift/GiftItem.module.scss
+++ b/src/components/modals/gift/GiftItem.module.scss
@ -39,7 +39,7 @@

 .monthsDescription {
  margin-top: 0.25rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }

 .description {
--- a/src/components/modals/gift/GiftModal.module.scss
+++ b/src/components/modals/gift/GiftModal.module.scss
@ -88,7 +88,7 @@

 .headerText {
  font-size: 1.5rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  margin-bottom: 0;
 }

--- a/src/components/modals/gift/info/GiftInfoModal.module.scss
+++ b/src/components/modals/gift/info/GiftInfoModal.module.scss
@ -11,7 +11,7 @@
  display: flex;
  gap: 0.25rem;
  font-size: 1rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  line-height: 1.325;
 }

--- a/src/components/modals/paidReaction/StarSlider.module.scss
+++ b/src/components/modals/paidReaction/StarSlider.module.scss
@ -123,7 +123,7 @@

  line-height: 1;
  font-size: 1.5rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  color: white;
  white-space: nowrap;
 }
--- a/src/components/modals/reportModal/ReportModal.module.scss
+++ b/src/components/modals/reportModal/ReportModal.module.scss
@ -43,7 +43,7 @@
  color: var(--color-primary);
  padding-inline: 1rem;
  margin-top: 0.75rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  font-size: 1rem;
 }

--- a/src/components/modals/stars/StarTopupOptionList.module.scss
+++ b/src/components/modals/stars/StarTopupOptionList.module.scss
@ -41,7 +41,7 @@
  align-items: center;
  gap: 0.25rem;

-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  font-size: 1.5rem;
  line-height: 1;
 }
--- a/src/components/modals/stars/StarsBalanceModal.module.scss
+++ b/src/components/modals/stars/StarsBalanceModal.module.scss
@ -43,7 +43,7 @@

 .sectionTitle {
  color: var(--color-primary);
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  font-size: 1rem;
  align-self: flex-start;
  padding: 0.25rem 0.75rem;
@ -74,7 +74,7 @@

 .headerHext {
  font-size: 1.5rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  text-align: center;
  margin-inline: 0.5rem;
 }
@ -104,7 +104,7 @@

 .starHeaderText {
  font-size: 1.25rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  margin: 0 0 0 3rem;
  unicode-bidi: plaintext;
 }
@ -137,7 +137,7 @@

 .balanceBottom {
  line-height: 1.5;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: 0.25rem;
--- a/src/components/modals/stars/gift/StarsGiftModal.module.scss
+++ b/src/components/modals/stars/gift/StarsGiftModal.module.scss
@ -67,7 +67,7 @@

 .starHeaderText {
  font-size: 1.25rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  margin: 0 0 0 3.5rem;
  unicode-bidi: plaintext;
 }
--- a/src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss
+++ b/src/components/modals/stars/subscription/StarsSubscriptionItem.module.scss
@ -41,7 +41,7 @@
 }

 .amount {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }

 .title, .description, .subtitle {
--- a/src/components/modals/stars/transaction/StarsTransactionItem.module.scss
+++ b/src/components/modals/stars/transaction/StarsTransactionItem.module.scss
@ -27,7 +27,7 @@
 }

 .amount {
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
 }

 .title, .description, .date {
--- a/src/components/modals/stars/transaction/StarsTransactionModal.module.scss
+++ b/src/components/modals/stars/transaction/StarsTransactionModal.module.scss
@ -29,7 +29,7 @@
  display: flex;
  gap: 0.25rem;
  font-size: 1rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  line-height: 1.325;
 }

@ -41,7 +41,7 @@
  text-align: center;
  text-wrap: balance;
  font-size: 1.5rem;
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold);
  margin: 0.5rem 0 0.25rem;
 }

--- a/src/components/modals/webApp/MinimizedWebAppModal.module.scss
+++ b/src/components/modals/webApp/MinimizedWebAppModal.module.scss
@ -1,7 +1,7 @@
 .root {
  height: 2.5rem;
  font-size: 0.875rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);

  border-radius: var(--border-radius-default);
  background-color: transparent;
--- a/src/components/modals/webApp/MoreAppsTabContent.module.scss
+++ b/src/components/modals/webApp/MoreAppsTabContent.module.scss
@ -19,7 +19,7 @@

 .section-title {
  font-size: 1rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  padding: 0.5rem;
  padding-block: 0.25rem;
  justify-content: space-between;
--- a/src/components/modals/webApp/WebAppGridItem.module.scss
+++ b/src/components/modals/webApp/WebAppGridItem.module.scss
@ -13,7 +13,7 @@

 .user-count-badge {
  font-family: var(--font-family-condensed);
-  font-weight: 600 !important;
+  font-weight: var(--font-weight-semibold) !important;
  font-size: 0.5rem !important;
  border-width: 1px !important;
  bottom: 0 !important;
@ -34,6 +34,6 @@
  font-size: 0.625rem !important;

  height: 1.625rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  line-height: 0.75rem;
 }
--- a/src/components/modals/webApp/WebAppModal.module.scss
+++ b/src/components/modals/webApp/WebAppModal.module.scss
@ -256,7 +256,7 @@
  padding-right: 1rem;

  font-size: 1rem;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium);
  text-overflow: ellipsis;

  border-top-right-radius: var(--border-radius-default);
--- a/Show More
+++ b/Show More