DEV: Use more css vars (#18561)

Followup to #18518 This time it's mostly line-height vars and a couple of other uncommon vars.
2024-11-26 11:13:38 +08:00 · 2022-10-12 16:05:42 +02:00 · 2022-10-12 16:05:42 +02:00 · 4170b9bb58
commit 4170b9bb58
parent 55909e30bc
57 changed files with 122 additions and 122 deletions
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@ -145,7 +145,7 @@ $mobile-breakpoint: 700px;
    tr {
      grid-template-columns: repeat(3, 1fr);
      display: grid;
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
      padding: 8px 0;
      min-width: 0;
      td {
@ -547,7 +547,7 @@ $mobile-breakpoint: 700px;
  }
  h1 {
    font-size: var(--font-up-3);
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
    color: var(--primary);
  }
  .controls {
@ -708,7 +708,7 @@ section.details {
  clear: both;
  text-align: right;
  .btn {
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
  }
  @media (max-width: $mobile-breakpoint) {
    .btn {
--- a/app/assets/stylesheets/common/admin/admin_intro.scss
+++ b/app/assets/stylesheets/common/admin/admin_intro.scss
@ -23,7 +23,7 @@
    width: 65%;
    h1 {
      display: inline-block;
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
    }
  }
  .external-link {
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@ -502,7 +502,7 @@
    .ace_placeholder {
      font-family: inherit;
      font-size: var(--font-up-1);
-      color: $primary-high;
+      color: var(--primary-high);
    }

    .status-actions {
@ -573,7 +573,7 @@
      margin: 0.15em 0 0;
      color: var(--primary-high);
      font-size: var(--font-down-1);
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
    }

    .invalid .hex input {
--- a/app/assets/stylesheets/common/admin/dashboard.scss
+++ b/app/assets/stylesheets/common/admin/dashboard.scss
@ -568,7 +568,7 @@

  .version-number {
    font-size: var(--font-up-2);
-    line-height: $line-height-small;
+    line-height: var(--line-height-small);
    box-sizing: border-box;
    font-weight: bold;
    margin-bottom: 2em;
--- a/app/assets/stylesheets/common/admin/settings.scss
+++ b/app/assets/stylesheets/common/admin/settings.scss
@ -81,7 +81,7 @@
        padding: 3px 5px 3px 18px;
        margin: 3px 0 3px 5px;
        position: relative;
-        line-height: $line-height-small;
+        line-height: var(--line-height-small);
        cursor: default;
        border: 1px dashed var(--primary-low-mid);
        border-radius: 3px;
@ -95,7 +95,7 @@
    .validation-error {
      padding-top: 3px;
      font-size: var(--font-down-1);
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
    }
    .validation-error {
      color: var(--danger);
--- a/app/assets/stylesheets/common/admin/users.scss
+++ b/app/assets/stylesheets/common/admin/users.scss
@ -40,7 +40,7 @@
    margin-left: 12px;
    @media (max-width: $mobile-breakpoint) {
      margin-left: 0;
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
      margin-top: 5px;
    }
  }
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@ -94,7 +94,7 @@
  max-width: 100%;
  p {
    margin-top: 0;
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
    font-size: var(--font-up-3);
  }
 }
@ -215,7 +215,7 @@
  }

  .topic-list-data {
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
    text-align: left;
    vertical-align: middle;
  }
@ -286,7 +286,7 @@
    margin-top: 0.33em;
    color: var(--primary-high);
    word-wrap: break-word;
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
    padding-right: 20px;
  }

@ -424,5 +424,5 @@ div.education {
 .topic-post-badges {
  white-space: nowrap;
  align-self: center;
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);
 }
--- a/app/assets/stylesheets/common/base/activation.scss
+++ b/app/assets/stylesheets/common/base/activation.scss
@ -11,7 +11,7 @@
  .account-created {
    .ac-message {
      font-size: var(--font-up-1);
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
    }
    .activation-controls {
      button {
--- a/app/assets/stylesheets/common/base/category-list.scss
+++ b/app/assets/stylesheets/common/base/category-list.scss
@ -9,7 +9,7 @@
    max-width: 100%;
    @include ellipsis;
    vertical-align: text-top;
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
  }
  &.with-topics {
    .subcategories-with-subcategories {
@ -163,7 +163,7 @@
    font-size: var(--font-up-2);
    margin-bottom: 0.5em;
    margin-top: 0.25em;
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
    text-align: center;
    color: var(--primary);
    overflow: hidden;
@ -189,7 +189,7 @@
      }
      .category-text-title {
        order: 2;
-        line-height: $line-height-medium;
+        line-height: var(--line-height-medium);
        overflow: hidden;
        margin-bottom: 0.25em;
        word-wrap: break-word;
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/app/assets/stylesheets/common/base/compose.scss
@ -448,7 +448,7 @@ div.ac-wrap div.item a.remove,
 .remove-link {
  margin-left: 4px;
  font-size: var(--font-down-1);
-  line-height: $line-height-small;
+  line-height: var(--line-height-small);
  padding: 1px 3.5px;
  border-radius: 12px;
  box-sizing: border-box;
@ -471,10 +471,10 @@ div.ac-wrap {
  div.item {
    float: left;
    padding: 4px 10px;
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
    span {
      display: inline-block;
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
    }
  }

--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@ -90,7 +90,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: $heading-font-family;
+  font-family: var(--heading-font-family);
  margin-top: 0;
  margin-bottom: 0.5rem;
 }
@ -145,7 +145,7 @@ input {
    margin-top: 0.17em;
    margin-right: 0.43em;
    margin-left: 0.1em;
-    line-height: $line-height-small;
+    line-height: var(--line-height-small);
    cursor: pointer;
    flex-shrink: 0; // Adding for safety, Safari will shrink checkboxes
  }
@ -534,7 +534,7 @@ table {
  right: 70px;
  top: 60px;
  width: 230px;
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);

  .first-notification,
  .read-later {
@ -655,11 +655,11 @@ table {
  }

  .control-label {
-    font-family: $heading-font-family;
+    font-family: var(--heading-font-family);

    font-weight: bold;
    font-size: var(--font-up-2);
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
  }

  .controls {
@ -860,7 +860,7 @@ table {
 }

 .broken-theme-alert {
-  font-size: $base-font-size;
+  font-size: var(--base-font-size);
  font-weight: bold;
  padding: 5px 0;
  background: var(--danger);
--- a/app/assets/stylesheets/common/base/groups.scss
+++ b/app/assets/stylesheets/common/base/groups.scss
@ -86,7 +86,7 @@
          span {
            width: 100%;
            word-break: break-word;
-            line-height: $line-height-medium;
+            line-height: var(--line-height-medium);
          }
        }
      }
@ -148,10 +148,10 @@
  }
  &.groups-notifications-form {
    .control-instructions {
-      color: $primary-medium;
+      color: var(--primary-medium);
      margin-bottom: 10px;
      font-size: var(--font-down-1);
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
    }

    .category-selector,
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@ -181,7 +181,7 @@
  .d-icon {
    width: 100%;
    font-size: var(--font-up-4);
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
    display: inline-block;
    color: var(--header_primary-low-mid);
  }
@ -250,7 +250,7 @@
  display: flex;
  align-items: center;
  height: 100%;
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);
  padding: 0 1.5em 0 0.5em;
  // we need to hide overflow in both to truncate the title in a flexbox
  overflow: hidden;
--- a/app/assets/stylesheets/common/base/login.scss
+++ b/app/assets/stylesheets/common/base/login.scss
@ -325,7 +325,7 @@ body.invite-page {
      .instructions {
        margin-top: 0.15em;
        color: var(--primary-medium);
-        line-height: $line-height-medium;
+        line-height: var(--line-height-medium);
      }
    }
  }
@ -402,7 +402,7 @@ body.invite-page {
      margin: 0;
      font-size: var(--font-down-1);
      font-weight: normal;
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
    }
    .tip {
      font-size: var(--font-down-1);
--- a/app/assets/stylesheets/common/base/magnific-popup.scss
+++ b/app/assets/stylesheets/common/base/magnific-popup.scss
@ -261,7 +261,7 @@ button {
 .mfp-close {
  width: 44px;
  height: 44px;
-  line-height: $line-height-large;
+  line-height: var(--line-height-large);
  position: absolute;
  right: 0;
  top: 0;
@ -307,7 +307,7 @@ button {
  right: 0;
  color: $controls-text-color;
  font-size: var(--font-down-1);
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);
 }

 // Navigation arrows
@ -459,7 +459,7 @@ button {
      color: $caption-subtitle-color;
      display: block;
      font-size: var(--font-down-1);
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
    }
    figure {
      margin: 0;
@ -475,7 +475,7 @@ button {
  }
  .mfp-title {
    text-align: left;
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
    color: $caption-title-color;
    word-wrap: break-word;
    padding-right: 36px; // leave some space for counter at right side
@ -561,7 +561,7 @@ button {
          right: 0;
          width: 35px;
          height: 35px;
-          line-height: $line-height-large;
+          line-height: var(--line-height-large);
          background: rgba(0, 0, 0, 0.6);
          position: fixed;
          text-align: center;
--- a/app/assets/stylesheets/common/base/menu-panel.scss
+++ b/app/assets/stylesheets/common/base/menu-panel.scss
@ -223,7 +223,7 @@
      }

      justify-content: unset;
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
      width: 100%;

      .d-icon {
@ -325,7 +325,7 @@
      display: inline;
      padding: 0;
      font-size: var(--font-down-1);
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
    }
    .badge-wrapper {
      &.bar,
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@ -311,7 +311,7 @@
 .delete-user-modal {
  .modal-footer {
    .btn {
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
    }
  }
 }
@ -452,7 +452,7 @@
  .flag-action-type-details {
    width: 100%;
    max-width: 500px;
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
  }
 }

--- a/app/assets/stylesheets/common/base/not-found.scss
+++ b/app/assets/stylesheets/common/base/not-found.scss
@ -5,7 +5,7 @@

  h1.title {
    font-size: var(--font-up-5);
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
  }

  &-search {
--- a/app/assets/stylesheets/common/base/onebox.scss
+++ b/app/assets/stylesheets/common/base/onebox.scss
@ -372,14 +372,14 @@ pre.onebox code ol.lines li:before {
  text-align: right;
  padding-right: 5px;
  font-size: var(--font-down-1);
-  line-height: $line-height-large;
+  line-height: var(--line-height-large);
  content: counter(li-counter);
  counter-increment: li-counter;
 }

 pre.onebox code ol {
  margin-left: 0;
-  line-height: $line-height-large;
+  line-height: var(--line-height-large);
 }
 pre.onebox code {
  background-color: var(--primary-very-low);
@ -647,7 +647,7 @@ aside.onebox.twitterstatus .onebox-body {

  .date {
    display: flex;
-    line-height: $line-height-small;
+    line-height: var(--line-height-small);

    .timestamp {
      color: var(--primary-medium);
@ -690,7 +690,7 @@ aside.onebox.twitterstatus .onebox-body {
      .album-title {
        width: 100%;
        font-size: var(--font-up-1);
-        line-height: $line-height-large;
+        line-height: var(--line-height-large);
        color: #ccc;
        text-decoration: none;
      }
--- a/app/assets/stylesheets/common/base/redirection.scss
+++ b/app/assets/stylesheets/common/base/redirection.scss
@ -2,5 +2,5 @@
  margin: 0 auto;
  text-align: center;
  font-size: var(--font-up-4);
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);
 }
--- a/app/assets/stylesheets/common/base/reviewables.scss
+++ b/app/assets/stylesheets/common/base/reviewables.scss
@ -309,7 +309,7 @@
  }

  .badge-notification {
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
    vertical-align: text-top;
  }

--- a/app/assets/stylesheets/common/base/search-menu.scss
+++ b/app/assets/stylesheets/common/base/search-menu.scss
@ -1,7 +1,7 @@
@mixin user-item-flex {
  display: flex;
  flex-direction: column;
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);
  color: var(--primary-high-or-secondary-low);
 }

@ -82,7 +82,7 @@ $search-pad-horizontal: 0.5em;
    .search-result-topic {
      .first-line {
        display: block;
-        line-height: $line-height-medium;
+        line-height: var(--line-height-medium);
      }

      .second-line {
--- a/app/assets/stylesheets/common/base/search.scss
+++ b/app/assets/stylesheets/common/base/search.scss
@ -315,7 +315,7 @@

  .blurb {
    font-size: var(--font-0);
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
    color: var(--primary-medium);
    .date {
      color: var(--primary-high);
@ -342,14 +342,14 @@
  .search-link {
    .topic-title {
      font-size: var(--font-up-1);
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
      color: var(--primary);
    }
    .topic-statuses {
      display: inline-block;
      flex-shrink: 0;
      font-size: 1.3em;
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
      color: var(--primary-medium);
      span {
        line-height: 1;
--- a/app/assets/stylesheets/common/base/tagging.scss
+++ b/app/assets/stylesheets/common/base/tagging.scss
@ -27,7 +27,7 @@
  .tag-count {
    font-size: var(--font-down-1);
    vertical-align: middle;
-    line-height: $line-height-small;
+    line-height: var(--line-height-small);
  }
 }

--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@ -84,7 +84,7 @@ $quote-share-maxwidth: 150px;
 .cooked,
 .d-editor-preview {
  word-wrap: break-word;
-  line-height: $line-height-large;
+  line-height: var(--line-height-large);

  > *:first-child {
    margin-top: 0;
@ -97,7 +97,7 @@ $quote-share-maxwidth: 150px;
  h5,
  h6 {
    margin: 30px 0 10px;
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
    a.anchor {
      opacity: 0;
      transition: opacity 0.25s;
@ -677,7 +677,7 @@ aside.quote {
      text-align: center;
      font-weight: normal;
      font-size: var(--font-down-2);
-      line-height: $line-height-small;
+      line-height: var(--line-height-small);
    }
  }

@ -698,7 +698,7 @@ aside.quote {
  h3 {
    margin-bottom: 4px;
    color: var(--primary);
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
    font-weight: normal;
    font-size: var(--font-0);
  }
@ -708,7 +708,7 @@ aside.quote {
    color: var(--primary-med-or-secondary-med);
    font-weight: normal;
    font-size: var(--font-down-1);
-    line-height: $line-height-small;
+    line-height: var(--line-height-small);
  }

  span.domain {
@ -1057,7 +1057,7 @@ kbd {
  display: inline-flex;
  font-size: var(--font-down-1);
  justify-content: center;
-  line-height: $line-height-large;
+  line-height: var(--line-height-large);
  margin: 0 0.15em;
  min-width: 24px;
  padding: 0.15em 0.6em;
@ -1184,7 +1184,7 @@ blockquote > *:last-child {
    > p {
      margin: 0;
      padding-right: 0.5em;
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
      flex: 1 1;
    }
  }
@ -1292,7 +1292,7 @@ a.mention-group {
      color: var(--primary-med-or-secondary-med);
      margin-right: 6px;
      font-size: var(--font-0);
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
    }

    > span.url {
@ -1308,7 +1308,7 @@ a.mention-group {
      color: var(--primary-med-or-secondary-med);
      font-size: var(--font-down-1);
      font-style: italic;
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
      margin-bottom: 1px;
    }

@ -1522,7 +1522,7 @@ a.mention-group {

      .text {
        margin-left: 0.5em;
-        line-height: $line-height-medium;
+        line-height: var(--line-height-medium);
      }
    }
  }
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@ -196,7 +196,7 @@ $topic-progress-height: 42px;
  h4 {
    display: inline;
    font-size: var(--font-up-2);
-    line-height: $line-height-small;
+    line-height: var(--line-height-small);
  }
  .d-icon {
    position: absolute;
@ -377,7 +377,7 @@ a.badge-category {
 .suggested-topics h3 .badge-wrapper.bullet span.badge-category {
  // Override vertical-align: text-top from `badges.css.scss`
  vertical-align: baseline;
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);
 }

 .suggested-topics h3 .badge-wrapper.bullet,
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@ -3,7 +3,7 @@
  padding: 3px 8px;
  color: var(--primary);
  border: 1px solid var(--primary-low);
-  line-height: $line-height-large;
+  line-height: var(--line-height-large);
  display: inline-flex;
  align-items: center;
  background-color: var(--secondary);
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@ -572,7 +572,7 @@
    color: var(--primary-medium);
    margin-bottom: 10px;
    font-size: var(--font-down-1);
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);

    a[href] {
      color: var(--tertiary);
--- a/app/assets/stylesheets/common/components/badges.scss
+++ b/app/assets/stylesheets/common/components/badges.scss
@ -153,7 +153,7 @@
    a.badge-category {
      display: inline-block;
      padding: 6px 8px;
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
    }
  }
 }
@ -167,7 +167,7 @@
  min-width: 0.5em;
  color: var(--secondary);
  font-size: var(--font-down-2);
-  line-height: $line-height-small;
+  line-height: var(--line-height-small);
  text-align: center;
  background-color: var(--primary-low-mid-or-secondary-low);
  &[href] {
@ -217,7 +217,7 @@
 .badge-posts {
  font-weight: normal;
  font-size: var(--font-0);
-  line-height: $line-height-small;
+  line-height: var(--line-height-small);
  &[href] {
    color: var(--primary-med-or-secondary-med);
  }
--- a/app/assets/stylesheets/common/components/bookmark-list.scss
+++ b/app/assets/stylesheets/common/components/bookmark-list.scss
@ -34,7 +34,7 @@ $mobile-breakpoint: 700px;
      display: inline-block;
      margin-right: 1em;
      margin-bottom: 0.25em;
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
      span {
        word-break: break-word;
      }
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@ -260,7 +260,7 @@
 .btn-flat {
  background: transparent;
  border: 0;
-  line-height: $line-height-small;
+  line-height: var(--line-height-small);
  transition: color 0.25s, background 0.25s;
  .d-icon {
    color: var(--primary-low-mid);
--- a/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
+++ b/app/assets/stylesheets/common/components/keyboard_shortcuts.scss
@ -74,7 +74,7 @@
    }

    kbd {
-      font-family: $base-font-family;
+      font-family: var(--font-family);
      font-weight: bold;
    }
  }
--- a/app/assets/stylesheets/common/components/navs.scss
+++ b/app/assets/stylesheets/common/components/navs.scss
@ -34,7 +34,7 @@
      padding: 6px 12px;
      color: var(--primary);
      font-size: var(--font-up-1);
-      line-height: $line-height-small;
+      line-height: var(--line-height-small);
      box-sizing: border-box;
      min-height: 30px;
      display: flex;
@ -88,7 +88,7 @@
    margin: 0;
    padding: 0.75em;
    font-size: var(--font-up-1);
-    line-height: $line-height-small;
+    line-height: var(--line-height-small);
    cursor: pointer;
    color: var(--primary);
    @include ellipsis;
@ -120,6 +120,6 @@
    width: 1.25em;
    text-align: center;
    margin-right: 0.25em;
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
  }
 }
--- a/app/assets/stylesheets/common/components/user-card.scss
+++ b/app/assets/stylesheets/common/components/user-card.scss
@ -101,7 +101,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
    margin-bottom: 5px;
  }
  h1 {
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
    .d-icon {
      color: var(--primary);
    }
--- a/app/assets/stylesheets/common/foundation/base.scss
+++ b/app/assets/stylesheets/common/foundation/base.scss
@ -4,27 +4,27 @@

 html {
  color: var(--primary);
-  font-family: $base-font-family;
-  font-size: $base-font-size;
-  line-height: $line-height-large;
+  font-family: var(--font-family);
+  font-size: var(--base-font-size);
+  line-height: var(--line-height-large);
  background-color: var(--secondary);
  overflow-y: scroll;
  direction: ltr;

  &.text-size-smallest {
-    font-size: $base-font-size-smallest;
+    font-size: var(--base-font-size-smallest);
  }

  &.text-size-smaller {
-    font-size: $base-font-size-smaller;
+    font-size: var(--base-font-size-smaller);
  }

  &.text-size-larger {
-    font-size: $base-font-size-larger;
+    font-size: var(--base-font-size-larger);
  }

  &.text-size-largest {
-    font-size: $base-font-size-largest;
+    font-size: var(--base-font-size-largest);
  }
 }

--- a/app/assets/stylesheets/common/select-kit/category-chooser.scss
+++ b/app/assets/stylesheets/common/select-kit/category-chooser.scss
@ -24,14 +24,14 @@

        .category-status {
          color: var(--primary);
-          line-height: $line-height-large;
+          line-height: var(--line-height-large);
          flex: 1 1 auto;
        }

        .category-desc {
          flex: 1 1 auto;
          font-size: var(--font-down-1);
-          line-height: $line-height-large;
+          line-height: var(--line-height-large);
        }
      }
    }
--- a/app/assets/stylesheets/common/select-kit/combo-box.scss
+++ b/app/assets/stylesheets/common/select-kit/combo-box.scss
@ -44,7 +44,7 @@
        a {
          white-space: nowrap;
          color: var(--primary);
-          line-height: $line-height-medium;
+          line-height: var(--line-height-medium);
          font-weight: bold;
          display: block;
          padding: 0.75em;
--- a/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
+++ b/app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
@ -35,7 +35,7 @@
        }

        .texts {
-          line-height: $line-height-medium;
+          line-height: var(--line-height-medium);
          flex: 1 1 0%;
          align-items: flex-start;
          display: flex;
--- a/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
+++ b/app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
@ -5,7 +5,7 @@

      .future-date-input-selector-header {
        .btn-clear {
-          line-height: $line-height-large;
+          line-height: var(--line-height-large);
        }
      }

--- a/app/assets/stylesheets/common/select-kit/select-kit.scss
+++ b/app/assets/stylesheets/common/select-kit/select-kit.scss
@ -158,7 +158,7 @@
      align-items: center;
      white-space: nowrap;
      overflow: hidden;
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);

      .d-icon {
        margin-left: 5px;
--- a/app/assets/stylesheets/common/topic-timeline.scss
+++ b/app/assets/stylesheets/common/topic-timeline.scss
@ -77,7 +77,7 @@
      }
      .post-excerpt {
        max-width: 650px;
-        line-height: $line-height-large;
+        line-height: var(--line-height-large);
        display: block;
        @include line-clamp(8);
        @media screen and (max-height: 425px) {
@ -98,7 +98,7 @@
        h2 {
          margin-top: 0;
          display: block;
-          line-height: $line-height-medium;
+          line-height: var(--line-height-medium);
          font-size: var(--font-up-2);
          @include line-clamp(4);
        }
--- a/app/assets/stylesheets/desktop/category-list.scss
+++ b/app/assets/stylesheets/desktop/category-list.scss
@ -95,7 +95,7 @@
      border-left: 6px solid;
      h3,
      h4 {
-        line-height: $line-height-medium;
+        line-height: var(--line-height-medium);
        a[href] {
          color: var(--primary);
        }
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@ -58,7 +58,7 @@ select,
 textarea {
  font-size: var(--font-0);
  font-weight: normal;
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);
 }

 select,
@ -66,7 +66,7 @@ textarea {
  display: inline-block;
  margin-bottom: 9px;
  font-size: var(--font-0);
-  line-height: $line-height-large;
+  line-height: var(--line-height-large);
  color: var(--primary);
 }

@ -77,7 +77,7 @@ textarea {

 select,
 input[type="file"] {
-  line-height: $line-height-large;
+  line-height: var(--line-height-large);
 }

 select {
--- a/app/assets/stylesheets/desktop/header.scss
+++ b/app/assets/stylesheets/desktop/header.scss
@ -35,7 +35,7 @@
  display: block;
  word-wrap: break-word;
  font-size: var(--font-down-2);
-  line-height: $line-height-large;
+  line-height: var(--line-height-large);
  .search-highlight {
    color: var(--primary-high-or-secondary-low);
  }
--- a/app/assets/stylesheets/desktop/login.scss
+++ b/app/assets/stylesheets/desktop/login.scss
@ -140,7 +140,7 @@
    padding: 3em 3em 2.5em;
    .login-welcome-header {
      .login-title {
-        line-height: $line-height-small;
+        line-height: var(--line-height-small);
        font-size: var(--font-up-6);
      }
      p.login-subheader {
@ -277,7 +277,7 @@

    .login-title {
      font-size: var(--font-up-6);
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
    }
    p.login-subheader {
      font-size: var(--font-up-1);
--- a/app/assets/stylesheets/desktop/topic-list.scss
+++ b/app/assets/stylesheets/desktop/topic-list.scss
@ -36,7 +36,7 @@

  button.bulk-select {
    padding: 0;
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
  }

  .topic-list-data.bulk-select {
@ -118,7 +118,7 @@
    a {
      color: var(--primary-med-or-secondary-med);
      margin-right: 3px;
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
    }
  }
  .activity {
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@ -270,7 +270,7 @@ pre.codeblock-buttons:hover {
    .number,
    .d-icon {
      font-size: var(--font-up-2);
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
    }
    button .d-icon,
    button:hover .d-icon {
--- a/app/assets/stylesheets/desktop/topic.scss
+++ b/app/assets/stylesheets/desktop/topic.scss
@ -25,7 +25,7 @@
  }
  h1 {
    font-size: var(--font-up-4);
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
    overflow-wrap: break-word;
    width: 100%;
    a {
@ -48,7 +48,7 @@
  margin-right: auto;
  font-size: var(--font-up-4);
  text-align: center;
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);

  .topic-retry {
    display: block;
--- a/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss
+++ b/app/assets/stylesheets/mobile/components/topic-footer-mobile-dropdown.scss
@ -6,7 +6,7 @@
        border-bottom: 1px solid rgba(var(--primary-low-rgb), 0.5);

        .name {
-          line-height: $line-height-medium;
+          line-height: var(--line-height-medium);
        }

        &:last-child {
--- a/app/assets/stylesheets/mobile/header.scss
+++ b/app/assets/stylesheets/mobile/header.scss
@ -72,7 +72,7 @@

 .d-header-icons {
  .d-icon {
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
  }
  .active .icon {
    &:after {
--- a/app/assets/stylesheets/mobile/history.scss
+++ b/app/assets/stylesheets/mobile/history.scss
@ -12,7 +12,7 @@
    max-width: 90vw;
  }
  #revision-numbers {
-    line-height: $line-height-large;
+    line-height: var(--line-height-large);
  }
  img {
    max-width: 95%;
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@ -52,7 +52,7 @@
      border: 1px solid var(--primary-medium);
    }
    > li > a {
-      line-height: $line-height-large;
+      line-height: var(--line-height-large);
      display: flex;
      align-items: center;
      .d-icon {
@ -118,7 +118,7 @@
  }

  .main-link {
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
    position: relative;
    z-index: z("base") + 1; // Intentionally overlapping category to create bigger tap target
    font-size: var(--font-up-1);
@ -140,7 +140,7 @@
    display: inline-block;
    top: -1px;
    font-size: var(--font-0);
-    line-height: $line-height-small;
+    line-height: var(--line-height-small);
    padding: 0.15em 0.4em 0.2em 0.4em;
    .d-icon {
      color: var(--secondary);
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@ -134,7 +134,7 @@ a.reply-to-tab {
 .topic-map {
  margin: 10px 0;
  h4 {
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
  }
  .user {
    float: left;
@ -154,7 +154,7 @@ a.reply-to-tab {
      }
    }
    .number {
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
    }
    .number,
    .d-icon {
@ -346,7 +346,7 @@ span.highlighted {
  margin-left: 50px;
  font-size: var(--font-down-1);
  .names {
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
    display: flex;
    flex-wrap: wrap;

--- a/app/assets/stylesheets/mobile/topic.scss
+++ b/app/assets/stylesheets/mobile/topic.scss
@ -15,7 +15,7 @@
 #topic-title {
  h1 {
    font-size: var(--font-up-3);
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
    a {
      color: var(--primary);
      vertical-align: middle;
@ -78,7 +78,7 @@
  margin-left: auto;
  margin-right: auto;
  font-size: var(--font-up-4);
-  line-height: $line-height-medium;
+  line-height: var(--line-height-medium);

  .topic-retry {
    display: block;
--- a/app/assets/stylesheets/mobile/user.scss
+++ b/app/assets/stylesheets/mobile/user.scss
@ -103,11 +103,11 @@
      margin-bottom: 12px;

      h1 {
-        line-height: $line-height-small;
+        line-height: var(--line-height-small);
      }

      h2 {
-        line-height: $line-height-medium;
+        line-height: var(--line-height-medium);
      }

      .user-profile-avatar {
--- a/app/assets/stylesheets/wizard.scss
+++ b/app/assets/stylesheets/wizard.scss
@ -253,7 +253,7 @@ body.wizard {
  &__step-title {
    font-size: 2.75em;
    color: var(--primary);
-    line-height: $line-height-medium;
+    line-height: var(--line-height-medium);
    margin: 0 0 1.5em 0;
    @include breakpoint("medium") {
      font-size: var(--font-up-5);
--- a/plugins/poll/assets/stylesheets/common/poll.scss
+++ b/plugins/poll/assets/stylesheets/common/poll.scss
@ -40,7 +40,7 @@ div.poll {

    .info-label {
      font-size: var(--font-up-4);
-      line-height: $line-height-medium;
+      line-height: var(--line-height-medium);
    }

    .info-text {