diff --git a/package-lock.json b/package-lock.json
index 51df21f20b..f1ca7101ce 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -230,7 +230,7 @@
         "protobufjs-cli": "1.1.1",
         "resedit": "2.0.2",
         "resolve-url-loader": "5.0.0",
-        "sass": "1.49.7",
+        "sass": "1.80.7",
         "sass-loader": "16.0.3",
         "sinon": "19.0.2",
         "storybook": "8.4.3",
@@ -3857,6 +3857,324 @@
         "@octokit/openapi-types": "^12.11.0"
       }
     },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.0.tgz",
+      "integrity": "sha512-i0GV1yJnm2n3Yq1qw6QrUrd/LI9bE8WEBOTtOkpCXHHdyN3TAGgqAK/DAT05z4fq2x04cARXt2pDmjWjL92iTQ==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.0",
+        "@parcel/watcher-darwin-arm64": "2.5.0",
+        "@parcel/watcher-darwin-x64": "2.5.0",
+        "@parcel/watcher-freebsd-x64": "2.5.0",
+        "@parcel/watcher-linux-arm-glibc": "2.5.0",
+        "@parcel/watcher-linux-arm-musl": "2.5.0",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.0",
+        "@parcel/watcher-linux-arm64-musl": "2.5.0",
+        "@parcel/watcher-linux-x64-glibc": "2.5.0",
+        "@parcel/watcher-linux-x64-musl": "2.5.0",
+        "@parcel/watcher-win32-arm64": "2.5.0",
+        "@parcel/watcher-win32-ia32": "2.5.0",
+        "@parcel/watcher-win32-x64": "2.5.0"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.0.tgz",
+      "integrity": "sha512-qlX4eS28bUcQCdribHkg/herLe+0A9RyYC+mm2PXpncit8z5b3nSqGVzMNR3CmtAOgRutiZ02eIJJgP/b1iEFQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.0.tgz",
+      "integrity": "sha512-hyZ3TANnzGfLpRA2s/4U1kbw2ZI4qGxaRJbBH2DCSREFfubMswheh8TeiC1sGZ3z2jUf3s37P0BBlrD3sjVTUw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.0.tgz",
+      "integrity": "sha512-9rhlwd78saKf18fT869/poydQK8YqlU26TMiNg7AIu7eBp9adqbJZqmdFOsbZ5cnLp5XvRo9wcFmNHgHdWaGYA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.0.tgz",
+      "integrity": "sha512-syvfhZzyM8kErg3VF0xpV8dixJ+RzbUaaGaeb7uDuz0D3FK97/mZ5AJQ3XNnDsXX7KkFNtyQyFrXZzQIcN49Tw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.0.tgz",
+      "integrity": "sha512-0VQY1K35DQET3dVYWpOaPFecqOT9dbuCfzjxoQyif1Wc574t3kOSkKevULddcR9znz1TcklCE7Ht6NIxjvTqLA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.0.tgz",
+      "integrity": "sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.0.tgz",
+      "integrity": "sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.0.tgz",
+      "integrity": "sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.0.tgz",
+      "integrity": "sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.0.tgz",
+      "integrity": "sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.0.tgz",
+      "integrity": "sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.0.tgz",
+      "integrity": "sha512-+rgpsNRKwo8A53elqbbHXdOMtY/tAtTzManTWShB5Kk54N8Q9mzNWV7tV+IbGueCbcj826MfWGU3mprWtuf1TA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.0.tgz",
+      "integrity": "sha512-lPrxve92zEHdgeff3aiu4gDOIt4u7sJYha6wbdEZDCDUhtjTsOMiaJzG5lMY4GkWH8p0fMmO2Ppq5G5XXG+DQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher/node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -19111,10 +19429,11 @@
       }
     },
     "node_modules/immutable": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.0.0.tgz",
-      "integrity": "sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==",
-      "dev": true
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.0.2.tgz",
+      "integrity": "sha512-1NU7hWZDkV7hJ4PJ9dur9gTNQ4ePNPN4k9/0YhwjzykTi/+3Q5pF93YU5QoVj8BuOnhLgaY8gs0U2pj4kSYVcw==",
+      "dev": true,
+      "license": "MIT"
     },
     "node_modules/import-fresh": {
       "version": "3.3.0",
@@ -27854,20 +28173,24 @@
       "integrity": "sha512-Ox0X2lk0kOGeODJgT9S9HFv0j5Cz89ir9ILylj62/vejHPdMmahmetfocoQwyiAnseeXyDa+KIbO6ZQJe5n2Lg=="
     },
     "node_modules/sass": {
-      "version": "1.49.7",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.49.7.tgz",
-      "integrity": "sha512-13dml55EMIR2rS4d/RDHHP0sXMY3+30e1TKsyXaSz3iLWVoDWEoboY8WzJd5JMnxrRHffKO3wq2mpJ0jxRJiEQ==",
+      "version": "1.80.7",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.80.7.tgz",
+      "integrity": "sha512-MVWvN0u5meytrSjsU7AWsbhoXi1sc58zADXFllfZzbsBT1GHjjar6JwBINYPRrkx/zqnQ6uqbQuHgE95O+C+eQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "chokidar": ">=3.0.0 <4.0.0",
-        "immutable": "^4.0.0",
+        "chokidar": "^4.0.0",
+        "immutable": "^5.0.2",
         "source-map-js": ">=0.6.2 <2.0.0"
       },
       "bin": {
         "sass": "sass.js"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
       }
     },
     "node_modules/sass-loader": {
@@ -27911,6 +28234,36 @@
         }
       }
     },
+    "node_modules/sass/node_modules/chokidar": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
+      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass/node_modules/readdirp": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
+      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/sax": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
diff --git a/package.json b/package.json
index d0bb4fc13c..326be5f256 100644
--- a/package.json
+++ b/package.json
@@ -314,7 +314,7 @@
     "protobufjs-cli": "1.1.1",
     "resedit": "2.0.2",
     "resolve-url-loader": "5.0.0",
-    "sass": "1.49.7",
+    "sass": "1.80.7",
     "sass-loader": "16.0.3",
     "sinon": "19.0.2",
     "storybook": "8.4.3",
diff --git a/sticker-creator/src/mixins.scss b/sticker-creator/src/mixins.scss
index 780b148dce..67c4946bc2 100644
--- a/sticker-creator/src/mixins.scss
+++ b/sticker-creator/src/mixins.scss
@@ -2,7 +2,9 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 @mixin light-theme() {
-  @content;
+  & {
+    @content;
+  }
 }
 
 @mixin dark-theme() {
diff --git a/stylesheets/_global.scss b/stylesheets/_global.scss
index a9ac680783..b893ef6b5f 100644
--- a/stylesheets/_global.scss
+++ b/stylesheets/_global.scss
@@ -1,6 +1,9 @@
 // Copyright 2015 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use 'mixins';
+@use 'variables';
+
 html {
   height: 100%;
   cursor: inherit;
@@ -16,18 +19,18 @@ body {
   width: 100%;
   margin: 0;
 
-  color: $color-gray-90;
+  color: variables.$color-gray-90;
 
-  @include font-family;
-  @include font-body-1;
+  @include mixins.font-family;
+  @include mixins.font-body-1;
 
   &.light-theme {
-    background-color: $color-white;
-    color: $color-gray-90;
+    background-color: variables.$color-white;
+    color: variables.$color-gray-90;
   }
   &.dark-theme {
-    background-color: $color-gray-95;
-    color: $color-gray-05;
+    background-color: variables.$color-gray-95;
+    color: variables.$color-gray-05;
   }
 
   &.is-resizing-left-pane {
@@ -87,31 +90,31 @@ textarea {
 ::-webkit-scrollbar-thumb {
   border-radius: 4px;
 
-  @include light-theme {
-    background: $color-gray-25;
-    border: 2px solid $color-white;
+  @include mixins.light-theme {
+    background: variables.$color-gray-25;
+    border: 2px solid variables.$color-white;
   }
-  @include dark-theme {
-    background: $color-gray-45;
-    border: 2px solid $color-gray-90;
+  @include mixins.dark-theme {
+    background: variables.$color-gray-45;
+    border: 2px solid variables.$color-gray-90;
   }
 
   &:hover {
-    @include light-theme {
-      background: $color-gray-45;
+    @include mixins.light-theme {
+      background: variables.$color-gray-45;
     }
-    @include dark-theme {
-      background: $color-gray-25;
+    @include mixins.dark-theme {
+      background: variables.$color-gray-25;
     }
   }
 }
 
 ::-webkit-scrollbar-corner {
-  @include light-theme {
-    background: $color-white;
+  @include mixins.light-theme {
+    background: variables.$color-white;
   }
-  @include dark-theme {
-    background: $color-black;
+  @include mixins.dark-theme {
+    background: variables.$color-black;
   }
 }
 
@@ -126,13 +129,13 @@ audio {
   bottom: 0;
 
   opacity: 0.25;
-  z-index: $z-index-popup-overlay;
+  z-index: variables.$z-index-popup-overlay;
 
-  @include light-theme {
-    background-color: $color-black;
+  @include mixins.light-theme {
+    background-color: variables.$color-black;
   }
-  @include dark-theme {
-    background-color: $color-gray-95;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-95;
   }
 }
 
@@ -156,31 +159,31 @@ button {
 }
 button.grey {
   border-radius: 5px;
-  border: solid 1px $color-gray-25;
+  border: solid 1px variables.$color-gray-25;
   cursor: pointer;
   margin-block: 1em;
   margin-inline: auto;
   padding: 1em;
   font-family: inherit;
 
-  @include light-theme {
-    color: $color-gray-60;
-    background: $color-gray-02;
-    box-shadow: 0 0 10px -5px $color-black-alpha-40;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
+    background: variables.$color-gray-02;
+    box-shadow: 0 0 10px -5px variables.$color-black-alpha-40;
   }
-  @include dark-theme {
-    border: solid 1px $color-gray-25;
-    color: $color-gray-60;
-    background: $color-gray-02;
-    box-shadow: 0 0 10px -5px $color-white-alpha-60;
+  @include mixins.dark-theme {
+    border: solid 1px variables.$color-gray-25;
+    color: variables.$color-gray-60;
+    background: variables.$color-gray-02;
+    box-shadow: 0 0 10px -5px variables.$color-white-alpha-60;
   }
 
   &:hover {
-    @include light-theme {
-      box-shadow: 0 0 10px -3px $color-black-alpha-60;
+    @include mixins.light-theme {
+      box-shadow: 0 0 10px -3px variables.$color-black-alpha-60;
     }
-    @include dark-theme {
-      box-shadow: 0 0 10px -3px $color-white-alpha-80;
+    @include mixins.dark-theme {
+      box-shadow: 0 0 10px -3px variables.$color-white-alpha-80;
     }
   }
 
@@ -195,12 +198,12 @@ button.grey {
 }
 
 a {
-  @include light-theme {
-    color: $color-ultramarine;
+  @include mixins.light-theme {
+    color: variables.$color-ultramarine;
   }
 
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 }
 
@@ -219,8 +222,8 @@ $loading-height: 16px;
     animation: rotate 1s linear infinite;
 
     border: solid 3px;
-    border-color: $color-ios-blue-tint $color-ios-blue-tint $color-gray-02
-      $color-gray-02 !important;
+    border-color: variables.$color-ios-blue-tint variables.$color-ios-blue-tint
+      variables.$color-gray-02 variables.$color-gray-02 !important;
   }
 }
 
@@ -232,14 +235,17 @@ $loading-height: 16px;
   width: 22px;
   height: 22px;
   padding: 3px;
-  background: $color-gray-60;
+  background: variables.$color-gray-60;
 
   &:before {
     content: '';
     display: block;
     width: 100%;
     height: 100%;
-    @include color-svg('../images/icons/v3/x/x.svg', $color-white);
+    @include mixins.color-svg(
+      '../images/icons/v3/x/x.svg',
+      variables.$color-white
+    );
   }
 }
 
@@ -268,7 +274,7 @@ $loading-height: 16px;
 }
 
 .app-loading-screen {
-  z-index: $z-index-on-top-of-everything;
+  z-index: variables.$z-index-on-top-of-everything;
   position: absolute;
   inset-inline: 0;
   top: 0;
@@ -279,13 +285,13 @@ $loading-height: 16px;
   /* Note: background-color is intentionally transparent until body has the
    *       theme class.
    */
-  @include explicit-light-theme {
-    background-color: $color-white;
-    color: $color-black-alpha-80;
+  @include mixins.explicit-light-theme {
+    background-color: variables.$color-white;
+    color: variables.$color-black-alpha-80;
   }
-  @include dark-theme {
-    background-color: $color-gray-95;
-    color: $color-white-alpha-80;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-95;
+    color: variables.$color-white-alpha-80;
   }
 
   display: flex;
@@ -309,14 +315,16 @@ $loading-height: 16px;
       margin-block: 0;
       margin-inline: 6px;
       transform: scale(0);
-      @include light-theme {
-        border-color: $color-black;
+      @include mixins.light-theme {
+        border-color: variables.$color-black;
       }
-      @include dark-theme {
-        border-color: $color-white;
+      @include mixins.dark-theme {
+        border-color: variables.$color-white;
       }
 
-      animation: loading 1500ms ease infinite 0ms;
+      & {
+        animation: loading 1500ms ease infinite 0ms;
+      }
       &:nth-child(2) {
         animation: loading 1500ms ease infinite 333ms;
       }
@@ -336,11 +344,11 @@ $loading-height: 16px;
       width: 100%;
       margin-block: 12px 26px;
       margin-inline: 0;
-      @include light-theme {
-        background: $color-black-alpha-20;
+      @include mixins.light-theme {
+        background: variables.$color-black-alpha-20;
       }
-      @include dark-theme {
-        background: $color-white-alpha-20;
+      @include mixins.dark-theme {
+        background: variables.$color-white-alpha-20;
       }
     }
 
@@ -359,11 +367,11 @@ $loading-height: 16px;
       }
       transition: transform 500ms linear;
 
-      @include light-theme {
-        background: $color-black;
+      @include mixins.light-theme {
+        background: variables.$color-black;
       }
-      @include dark-theme {
-        background: $color-white;
+      @include mixins.dark-theme {
+        background: variables.$color-white;
       }
     }
   }
@@ -383,12 +391,12 @@ $loading-height: 16px;
   bottom: 0;
 
   &.overlay {
-    z-index: $z-index-popup-overlay;
+    z-index: variables.$z-index-popup-overlay;
   }
 
-  color: $color-black;
+  color: variables.$color-black;
   a {
-    color: $color-ultramarine;
+    color: variables.$color-ultramarine;
   }
   background: linear-gradient(
     to bottom,
@@ -407,7 +415,7 @@ $loading-height: 16px;
   input {
     margin-top: 1em;
     font-size: 12pt;
-    border: 2px solid $color-ultramarine;
+    border: 2px solid variables.$color-ultramarine;
     padding: 0.5em;
     text-align: center;
     width: 20em;
@@ -491,54 +499,57 @@ $loading-height: 16px;
 
     // generic
     &.check-circle-outline {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/full-screen-flow/check-circle-outline.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
     &.alert-outline {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/full-screen-flow/alert-outline.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
 
     // import and export
     &.folder-outline {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/full-screen-flow/folder-outline.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
     &.import {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/full-screen-flow/import.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
 
     // registration process
     &.lead-pencil {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/full-screen-flow/lead-pencil.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
     &.sync {
-      @include color-svg('../images/full-screen-flow/sync.svg', $color-gray-15);
+      @include mixins.color-svg(
+        '../images/full-screen-flow/sync.svg',
+        variables.$color-gray-15
+      );
     }
 
     // delete
     &.alert-outline-red {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/full-screen-flow/alert-outline.svg',
-        $color-accent-red
+        variables.$color-accent-red
       );
     }
     &.delete {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/full-screen-flow/delete.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
   }
@@ -551,18 +562,18 @@ $loading-height: 16px;
     padding: 0.75em;
     margin-top: 1em;
     margin-inline: 0.5em;
-    color: $color-white;
-    background: $color-ultramarine;
-    box-shadow: 2px 2px 4px $color-black-alpha-40;
+    color: variables.$color-white;
+    background: variables.$color-ultramarine;
+    box-shadow: 2px 2px 4px variables.$color-black-alpha-40;
 
     font-size: 12pt;
 
     &.neutral {
-      color: $color-black;
-      background: $color-gray-15;
+      color: variables.$color-black;
+      background: variables.$color-gray-15;
     }
     &.destructive {
-      background: $color-accent-red;
+      background: variables.$color-accent-red;
     }
 
     @media (min-height: 750px) and (min-width: 700px) {
@@ -570,23 +581,25 @@ $loading-height: 16px;
     }
 
     &:disabled {
-      background-color: $color-gray-20;
+      background-color: variables.$color-gray-20;
       cursor: auto;
     }
   }
 
   button.link {
-    @include button-reset;
+    @include mixins.button-reset;
 
-    display: block;
-    margin-block: 0.5em;
-    margin-inline: auto;
-    text-align: center;
-    text-decoration: underline;
-    color: $color-ultramarine;
+    & {
+      display: block;
+      margin-block: 0.5em;
+      margin-inline: auto;
+      text-align: center;
+      text-decoration: underline;
+      color: variables.$color-ultramarine;
+    }
 
     &:disabled {
-      color: $color-gray-20;
+      color: variables.$color-gray-20;
       cursor: auto;
     }
   }
@@ -596,7 +609,7 @@ $loading-height: 16px;
     cursor: pointer;
     text-decoration: underline;
     margin: 0.5em;
-    color: $color-ultramarine;
+    color: variables.$color-ultramarine;
   }
 
   .progress {
@@ -608,14 +621,14 @@ $loading-height: 16px;
     .bar-container {
       height: 1em;
       margin: 1em;
-      background-color: $color-gray-02;
+      background-color: variables.$color-gray-02;
     }
     .bar {
       width: 100%;
       height: 100%;
-      background-color: $color-ios-blue-tint;
+      background-color: variables.$color-ios-blue-tint;
       transition: width 0.25s;
-      box-shadow: 2px 2px 4px $color-black-alpha-40;
+      box-shadow: 2px 2px 4px variables.$color-black-alpha-40;
     }
   }
 
@@ -651,7 +664,7 @@ $loading-height: 16px;
   }
 
   .StandaloneRegistration__error {
-    color: $color-accent-red;
+    color: variables.$color-accent-red;
   }
 }
 
diff --git a/stylesheets/_mixins.scss b/stylesheets/_mixins.scss
index f53de25bc1..ff245aed22 100644
--- a/stylesheets/_mixins.scss
+++ b/stylesheets/_mixins.scss
@@ -1,6 +1,11 @@
 // Copyright 2016 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use 'sass:color';
+@use 'sass:map';
+@use 'sass:string';
+@use 'variables';
+
 // Fonts
 
 @mixin localized-fonts {
@@ -32,12 +37,12 @@
 }
 
 @mixin font-family {
-  font-family: $inter;
+  font-family: variables.$inter;
   @include localized-fonts;
 }
 
 @mixin time-fonts {
-  font-family: Hatsuishi, $inter;
+  font-family: Hatsuishi, variables.$inter;
   @include localized-fonts;
 }
 
@@ -111,7 +116,9 @@
 }
 @mixin font-subtitle-bold {
   @include font-subtitle;
-  font-weight: 600;
+  & {
+    font-weight: 600;
+  }
 }
 
 @mixin font-caption {
@@ -132,7 +139,9 @@
 // Themes
 
 @mixin light-theme() {
-  @content;
+  & {
+    @content;
+  }
 }
 
 @mixin explicit-light-theme() {
@@ -187,10 +196,10 @@
   }
 
   @include light-theme {
-    background: $color-gray-05;
+    background: variables.$color-gray-05;
   }
   @include dark-theme {
-    background: $color-gray-65;
+    background: variables.$color-gray-65;
   }
 }
 
@@ -216,13 +225,13 @@
 // Icons
 
 @function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
+  $index: string.index($string, $search);
 
   @if $index {
     @return (
-      str-slice($string, 1, $index - 1) + $replace +
+      string.slice($string, 1, $index - 1) + $replace +
         str-replace(
-          str-slice($string, $index + str-length($search)),
+          string.slice($string, $index + string.length($search)),
           $search,
           $replace
         )
@@ -263,28 +272,30 @@ $rtl-icon-map: (
 
 @function get-rtl-svg($svg) {
   @each $ltr, $rtl in $rtl-icon-map {
-    @if str-index($svg, $ltr) {
+    @if string.index($svg, $ltr) {
       @if $rtl == '' {
         @return $ltr;
       }
       @return str-replace($svg, $ltr, $rtl);
     }
   }
-  @if str-index($svg, 'left') or str-index($svg, 'right') {
+  @if string.index($svg, 'left') or string.index($svg, 'right') {
     @error "Missing RTL icon for #{$svg}";
   }
   @return false;
 }
 
 @mixin color-svg($svg, $color, $stretch: true, $mask-origin: null) {
-  -webkit-mask: url($svg) no-repeat center;
-  @if $stretch {
-    -webkit-mask-size: 100%;
+  & {
+    -webkit-mask: url($svg) no-repeat center;
+    @if $stretch {
+      -webkit-mask-size: 100%;
+    }
+    @if $mask-origin {
+      -webkit-mask-origin: $mask-origin;
+    }
+    background-color: $color;
   }
-  @if $mask-origin {
-    -webkit-mask-origin: $mask-origin;
-  }
-  background-color: $color;
   @media (forced-colors: active) {
     background-color: WindowText;
   }
@@ -325,9 +336,11 @@ $rtl-icon-map: (
 // Other
 
 @mixin popper-shadow() {
-  box-shadow:
-    0px 8px 20px rgba(0, 0, 0, 0.3),
-    0px 0px 8px rgba(0, 0, 0, 0.05);
+  & {
+    box-shadow:
+      0px 8px 20px rgba(0, 0, 0, 0.3),
+      0px 0px 8px rgba(0, 0, 0, 0.05);
+  }
 
   @media (forced-colors: active) {
     border: 1px solid WindowText;
@@ -335,15 +348,17 @@ $rtl-icon-map: (
 }
 
 @mixin button-reset {
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  cursor: pointer;
-  outline: inherit;
-  text-align: inherit;
+  & {
+    background: none;
+    color: inherit;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font: inherit;
+    cursor: pointer;
+    outline: inherit;
+    text-align: inherit;
+  }
 
   @media (forced-colors: active) {
     border: 1px solid WindowText;
@@ -353,16 +368,18 @@ $rtl-icon-map: (
 @mixin staged-attachment-close-button {
   @include button-reset;
 
-  position: absolute;
-  top: 4px;
-  inset-inline-end: 4px;
-  width: 16px;
-  height: 16px;
-  z-index: $z-index-above-base;
+  & {
+    position: absolute;
+    top: 4px;
+    inset-inline-end: 4px;
+    width: 16px;
+    height: 16px;
+    z-index: variables.$z-index-above-base;
+  }
 }
 
 @mixin calling-text-shadow {
-  text-shadow: 0 0 4px $color-black-alpha-40;
+  text-shadow: 0 0 4px variables.$color-black-alpha-40;
 }
 
 @mixin lonely-local-video-preview {
@@ -380,45 +397,53 @@ $rtl-icon-map: (
 @mixin button-focus-outline {
   &:focus {
     @include keyboard-mode {
-      box-shadow: 0px 0px 0px 3px $color-ultramarine;
+      box-shadow: 0px 0px 0px 3px variables.$color-ultramarine;
     }
     @include dark-keyboard-mode {
-      box-shadow: 0px 0px 0px 3px $color-ultramarine-light;
+      box-shadow: 0px 0px 0px 3px variables.$color-ultramarine-light;
     }
   }
 }
 
 @mixin button-blue-text {
   @include light-theme {
-    color: $color-ultramarine;
+    color: variables.$color-ultramarine;
   }
   @include dark-theme {
-    color: $color-ultramarine-light;
+    color: variables.$color-ultramarine-light;
   }
 }
 
 // Complete button styles
 
 @mixin button-primary {
-  background-color: $color-ultramarine;
+  background-color: variables.$color-ultramarine;
 
   // Note: the background colors here need to match the parent component
   @include light-theme {
-    color: $color-white;
+    color: variables.$color-white;
     border: 1px solid white;
   }
   @include dark-theme {
-    color: $color-white-alpha-90;
-    border: 1px solid $color-gray-95;
+    color: variables.$color-white-alpha-90;
+    border: 1px solid variables.$color-gray-95;
   }
 
   &:hover {
     @include mouse-mode {
-      background-color: mix($color-black, $color-ultramarine, 15%);
+      background-color: color.mix(
+        variables.$color-black,
+        variables.$color-ultramarine,
+        15%
+      );
     }
 
     @include dark-mouse-mode {
-      background-color: mix($color-white, $color-ultramarine, 15%);
+      background-color: color.mix(
+        variables.$color-white,
+        variables.$color-ultramarine,
+        15%
+      );
     }
   }
 
@@ -426,17 +451,33 @@ $rtl-icon-map: (
     // We need to include all four here for specificity precedence
 
     @include mouse-mode {
-      background-color: mix($color-black, $color-ultramarine, 25%);
+      background-color: color.mix(
+        variables.$color-black,
+        variables.$color-ultramarine,
+        25%
+      );
     }
     @include dark-mouse-mode {
-      background-color: mix($color-white, $color-ultramarine, 25%);
+      background-color: color.mix(
+        variables.$color-white,
+        variables.$color-ultramarine,
+        25%
+      );
     }
 
     @include keyboard-mode {
-      background-color: mix($color-black, $color-ultramarine, 25%);
+      background-color: color.mix(
+        variables.$color-black,
+        variables.$color-ultramarine,
+        25%
+      );
     }
     @include dark-keyboard-mode {
-      background-color: mix($color-black, $color-ultramarine, 25%);
+      background-color: color.mix(
+        variables.$color-black,
+        variables.$color-ultramarine,
+        25%
+      );
     }
   }
 
@@ -445,21 +486,29 @@ $rtl-icon-map: (
 
 @mixin button-secondary {
   @include light-theme {
-    color: $color-gray-90;
-    background-color: $color-gray-05;
+    color: variables.$color-gray-90;
+    background-color: variables.$color-gray-05;
   }
   @include dark-theme {
-    color: $color-gray-05;
-    background-color: $color-gray-65;
+    color: variables.$color-gray-05;
+    background-color: variables.$color-gray-65;
   }
 
   &:hover {
     @include mouse-mode {
-      background-color: mix($color-black, $color-gray-05, 15%);
+      background-color: color.mix(
+        variables.$color-black,
+        variables.$color-gray-05,
+        15%
+      );
     }
 
     @include dark-mouse-mode {
-      background-color: mix($color-white, $color-gray-65, 15%);
+      background-color: color.mix(
+        variables.$color-white,
+        variables.$color-gray-65,
+        15%
+      );
     }
   }
 
@@ -467,17 +516,33 @@ $rtl-icon-map: (
     // We need to include all four here for specificity precedence
 
     @include mouse-mode {
-      background-color: mix($color-black, $color-gray-05, 25%);
+      background-color: color.mix(
+        variables.$color-black,
+        variables.$color-gray-05,
+        25%
+      );
     }
     @include dark-mouse-mode {
-      background-color: mix($color-white, $color-gray-65, 25%);
+      background-color: color.mix(
+        variables.$color-white,
+        variables.$color-gray-65,
+        25%
+      );
     }
 
     @include keyboard-mode {
-      background-color: mix($color-black, $color-gray-05, 25%);
+      background-color: color.mix(
+        variables.$color-black,
+        variables.$color-gray-05,
+        25%
+      );
     }
     @include dark-keyboard-mode {
-      background-color: mix($color-white, $color-gray-65, 25%);
+      background-color: color.mix(
+        variables.$color-white,
+        variables.$color-gray-65,
+        25%
+      );
     }
   }
 
@@ -491,21 +556,29 @@ $rtl-icon-map: (
 
 @mixin button-light {
   @include light-theme {
-    color: $color-gray-90;
-    background-color: $color-gray-02;
+    color: variables.$color-gray-90;
+    background-color: variables.$color-gray-02;
   }
   @include dark-theme {
-    color: $color-gray-05;
-    background-color: $color-gray-75;
+    color: variables.$color-gray-05;
+    background-color: variables.$color-gray-75;
   }
 
   &:hover {
     @include mouse-mode {
-      background-color: mix($color-black, $color-gray-02, 10%);
+      background-color: color.mix(
+        variables.$color-black,
+        variables.$color-gray-02,
+        10%
+      );
     }
 
     @include dark-mouse-mode {
-      background-color: mix($color-white, $color-gray-75, 10%);
+      background-color: color.mix(
+        variables.$color-white,
+        variables.$color-gray-75,
+        10%
+      );
     }
   }
 
@@ -513,17 +586,33 @@ $rtl-icon-map: (
     // We need to include all four here for specificity precedence
 
     @include mouse-mode {
-      background-color: mix($color-black, $color-gray-02, 20%);
+      background-color: color.mix(
+        variables.$color-black,
+        variables.$color-gray-02,
+        20%
+      );
     }
     @include dark-mouse-mode {
-      background-color: mix($color-white, $color-gray-75, 20%);
+      background-color: color.mix(
+        variables.$color-white,
+        variables.$color-gray-75,
+        20%
+      );
     }
 
     @include keyboard-mode {
-      background-color: mix($color-black, $color-gray-02, 20%);
+      background-color: color.mix(
+        variables.$color-black,
+        variables.$color-gray-02,
+        20%
+      );
     }
     @include dark-keyboard-mode {
-      background-color: mix($color-white, $color-gray-75, 20%);
+      background-color: color.mix(
+        variables.$color-white,
+        variables.$color-gray-75,
+        20%
+      );
     }
   }
 
@@ -537,21 +626,29 @@ $rtl-icon-map: (
 
 @mixin button-destructive {
   @include light-theme {
-    color: $color-white;
-    background-color: $color-accent-red;
+    color: variables.$color-white;
+    background-color: variables.$color-accent-red;
   }
   @include dark-theme {
-    color: $color-white-alpha-90;
-    background-color: $color-accent-red;
+    color: variables.$color-white-alpha-90;
+    background-color: variables.$color-accent-red;
   }
 
   &:hover {
     @include mouse-mode {
-      background-color: mix($color-black, $color-accent-red, 15%);
+      background-color: color.mix(
+        variables.$color-black,
+        variables.$color-accent-red,
+        15%
+      );
     }
 
     @include dark-mouse-mode {
-      background-color: mix($color-white, $color-accent-red, 15%);
+      background-color: color.mix(
+        variables.$color-white,
+        variables.$color-accent-red,
+        15%
+      );
     }
   }
 
@@ -559,17 +656,33 @@ $rtl-icon-map: (
     // We need to include all four here for specificity precedence
 
     @include mouse-mode {
-      background-color: mix($color-black, $color-accent-red, 25%);
+      background-color: color.mix(
+        variables.$color-black,
+        variables.$color-accent-red,
+        25%
+      );
     }
     @include dark-mouse-mode {
-      background-color: mix($color-white, $color-accent-red, 25%);
+      background-color: color.mix(
+        variables.$color-white,
+        variables.$color-accent-red,
+        25%
+      );
     }
 
     @include keyboard-mode {
-      background-color: mix($color-black, $color-accent-red, 25%);
+      background-color: color.mix(
+        variables.$color-black,
+        variables.$color-accent-red,
+        25%
+      );
     }
     @include dark-keyboard-mode {
-      background-color: mix($color-white, $color-accent-red, 25%);
+      background-color: color.mix(
+        variables.$color-white,
+        variables.$color-accent-red,
+        25%
+      );
     }
   }
 
@@ -577,26 +690,42 @@ $rtl-icon-map: (
 }
 
 @mixin button-green {
-  $background-color: $color-accent-green;
+  $background-color: variables.$color-accent-green;
 
   background-color: $background-color;
-  color: $color-white;
+  color: variables.$color-white;
 
   &:active {
     // We need to include all four here for specificity precedence
 
     @include mouse-mode {
-      background-color: mix($color-black, $background-color, 25%);
+      background-color: color.mix(
+        variables.$color-black,
+        $background-color,
+        25%
+      );
     }
     @include dark-mouse-mode {
-      background-color: mix($color-white, $background-color, 25%);
+      background-color: color.mix(
+        variables.$color-white,
+        $background-color,
+        25%
+      );
     }
 
     @include keyboard-mode {
-      background-color: mix($color-black, $background-color, 25%);
+      background-color: color.mix(
+        variables.$color-black,
+        $background-color,
+        25%
+      );
     }
     @include dark-keyboard-mode {
-      background-color: mix($color-white, $background-color, 25%);
+      background-color: color.mix(
+        variables.$color-white,
+        $background-color,
+        25%
+      );
     }
   }
 
@@ -617,52 +746,57 @@ $rtl-icon-map: (
 
 @mixin modal-reset {
   @include popper-shadow();
-  border-radius: 8px;
-  margin-block: 0;
-  margin-inline: auto;
-  max-height: 100%;
-  max-width: 360px;
-  padding: 16px;
-  position: relative;
-  width: 95%;
-  display: flex;
-  flex-direction: column;
+
+  & {
+    border-radius: 8px;
+    margin-block: 0;
+    margin-inline: auto;
+    max-height: 100%;
+    max-width: 360px;
+    padding: 16px;
+    position: relative;
+    width: 95%;
+    display: flex;
+    flex-direction: column;
+  }
 
   @include light-theme() {
-    background: $color-white;
-    color: $color-gray-90;
+    background: variables.$color-white;
+    color: variables.$color-gray-90;
   }
 
   @include dark-theme() {
-    background: $color-gray-95;
-    color: $color-gray-05;
+    background: variables.$color-gray-95;
+    color: variables.$color-gray-05;
   }
 }
 
 @mixin modal-close-button {
   @include button-reset;
 
-  position: absolute;
-  inset-inline-end: 12px;
-  top: 12px;
+  & {
+    position: absolute;
+    inset-inline-end: 12px;
+    top: 12px;
 
-  height: 24px;
-  width: 24px;
+    height: 24px;
+    width: 24px;
+  }
 
   @include light-theme {
-    @include color-svg('../images/icons/v3/x/x.svg', $color-gray-75);
+    @include color-svg('../images/icons/v3/x/x.svg', variables.$color-gray-75);
   }
 
   @include dark-theme {
-    @include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
+    @include color-svg('../images/icons/v3/x/x.svg', variables.$color-gray-15);
   }
 
   &:focus {
     @include keyboard-mode {
-      background-color: $color-ultramarine;
+      background-color: variables.$color-ultramarine;
     }
     @include dark-keyboard-mode {
-      background-color: $color-ultramarine-light;
+      background-color: variables.$color-ultramarine-light;
     }
   }
 }
@@ -678,27 +812,27 @@ $rtl-icon-map: (
   padding: 2px;
   width: $bubble-size;
 
-  @each $color, $value in $conversation-colors {
+  @each $color, $value in variables.$conversation-colors {
     &--#{$color} {
       background-color: $value;
     }
   }
-  @each $color, $value in $conversation-colors-gradient {
+  @each $color, $value in variables.$conversation-colors-gradient {
     &--#{$color} {
       background-image: linear-gradient(
-        map-get($value, 'deg'),
-        map-get($value, 'start'),
-        map-get($value, 'end')
+        map.get($value, 'deg'),
+        map.get($value, 'start'),
+        map.get($value, 'end')
       );
     }
   }
 }
 
 @mixin avatar-colors {
-  @each $color, $value in $avatar-colors {
+  @each $color, $value in variables.$avatar-colors {
     &--#{$color} {
-      --bg: #{map-get($value, 'bg')};
-      --fg: #{map-get($value, 'fg')};
+      --bg: #{map.get($value, 'bg')};
+      --fg: #{map.get($value, 'fg')};
 
       background-color: var(--bg);
       color: var(--fg);
@@ -721,10 +855,10 @@ $rtl-icon-map: (
     width: 6px;
 
     @include light-theme {
-      background: $color-black-alpha-40;
+      background: variables.$color-black-alpha-40;
     }
     @include dark-theme {
-      background: $color-white-alpha-40;
+      background: variables.$color-white-alpha-40;
     }
   }
 
@@ -751,26 +885,26 @@ $rtl-icon-map: (
   width: 100%;
 
   @include light-theme {
-    background: $color-white;
-    color: $color-black;
-    border-color: $color-gray-15;
+    background: variables.$color-white;
+    color: variables.$color-black;
+    border-color: variables.$color-gray-15;
 
     &:disabled {
-      background: $color-gray-02;
-      border-color: $color-gray-05;
-      color: $color-gray-90;
+      background: variables.$color-gray-02;
+      border-color: variables.$color-gray-05;
+      color: variables.$color-gray-90;
     }
   }
 
   @include dark-theme {
-    background: $color-gray-80;
-    color: $color-gray-05;
-    border-color: $color-gray-45;
+    background: variables.$color-gray-80;
+    color: variables.$color-gray-05;
+    border-color: variables.$color-gray-45;
 
     &:disabled {
-      background: $color-gray-95;
-      border-color: $color-gray-60;
-      color: $color-gray-20;
+      background: variables.$color-gray-95;
+      border-color: variables.$color-gray-60;
+      color: variables.$color-gray-20;
     }
   }
 
@@ -778,10 +912,10 @@ $rtl-icon-map: (
     outline: none;
 
     @include light-theme {
-      border-color: $color-ultramarine;
+      border-color: variables.$color-ultramarine;
     }
     @include dark-theme {
-      border-color: $color-ultramarine-light;
+      border-color: variables.$color-ultramarine-light;
     }
   }
 }
@@ -796,13 +930,13 @@ $rtl-icon-map: (
   user-select: none;
 
   @include light-theme {
-    background: $color-gray-02;
-    color: $color-black;
+    background: variables.$color-gray-02;
+    color: variables.$color-black;
   }
 
   @include dark-theme {
-    background: $color-gray-95;
-    color: $color-white;
+    background: variables.$color-gray-95;
+    color: variables.$color-white;
   }
 
   h1 {
@@ -817,13 +951,13 @@ $rtl-icon-map: (
 
 @mixin timeline-floating-header-node {
   @include rounded-corners;
-  box-shadow: 0 1px 4px $color-black-alpha-20;
+  box-shadow: 0 1px 4px variables.$color-black-alpha-20;
 
   @include light-theme {
-    background: $color-white;
+    background: variables.$color-white;
   }
   @include dark-theme {
-    background: $color-gray-80;
+    background: variables.$color-gray-80;
   }
 }
 
@@ -879,12 +1013,12 @@ $rtl-icon-map: (
   @include scrollbar;
   &::-webkit-scrollbar-thumb {
     @include light-theme {
-      background: $color-gray-25;
-      border-color: $color-gray-04;
+      background: variables.$color-gray-25;
+      border-color: variables.$color-gray-04;
     }
     @include dark-theme {
-      background: $color-gray-45;
-      border-color: $color-gray-80;
+      background: variables.$color-gray-45;
+      border-color: variables.$color-gray-80;
     }
   }
 }
@@ -901,22 +1035,24 @@ $rtl-icon-map: (
     @include font-body-2;
 
     @include light-theme {
-      background-color: $color-gray-04;
-      color: $color-black;
-      outline: 1px solid $color-gray-20;
+      background-color: variables.$color-gray-04;
+      color: variables.$color-black;
+      outline: 1px solid variables.$color-gray-20;
     }
 
     @include dark-theme {
-      background-color: $color-gray-80;
-      color: $color-gray-15;
-      outline: 1px solid $color-gray-62;
+      background-color: variables.$color-gray-80;
+      color: variables.$color-gray-15;
+      outline: 1px solid variables.$color-gray-62;
     }
 
-    padding-block: 5px;
-    padding-inline: 12px;
-    border-radius: 6px;
-    filter: drop-shadow(0px 4px 3px $color-black-alpha-16);
-    pointer-events: none;
+    & {
+      padding-block: 5px;
+      padding-inline: 12px;
+      border-radius: 6px;
+      filter: drop-shadow(0px 4px 3px variables.$color-black-alpha-16);
+      pointer-events: none;
+    }
   }
 
   & .module-tooltip-arrow::before {
@@ -928,55 +1064,59 @@ $rtl-icon-map: (
 
   &[data-placement='bottom'] .module-tooltip-arrow::before {
     @include light-theme {
-      border-color: transparent transparent $color-gray-20 transparent;
+      border-color: transparent transparent variables.$color-gray-20 transparent;
     }
 
     @include dark-theme {
-      border-color: transparent transparent $color-gray-62 transparent;
+      border-color: transparent transparent variables.$color-gray-62 transparent;
     }
 
-    margin-top: -14px;
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    margin-left: -7px;
+    & {
+      margin-top: -14px;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      margin-left: -7px;
+    }
   }
 
   &[data-placement='bottom'] .module-tooltip-arrow::after {
     @include light-theme {
-      border-bottom-color: $color-gray-04;
+      border-bottom-color: variables.$color-gray-04;
     }
 
     @include dark-theme {
-      border-bottom-color: $color-gray-80;
+      border-bottom-color: variables.$color-gray-80;
     }
   }
 
   &[data-placement='top'] .module-tooltip-arrow::before {
     @include light-theme {
-      border-color: $color-gray-20 transparent transparent transparent;
+      border-color: variables.$color-gray-20 transparent transparent transparent;
     }
 
     @include dark-theme {
-      border-color: $color-gray-62 transparent transparent transparent;
+      border-color: variables.$color-gray-62 transparent transparent transparent;
     }
 
-    margin-top: 0;
-    /* stylelint-disable-next-line liberty/use-logical-spec */
-    margin-left: -7px;
+    & {
+      margin-top: 0;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      margin-left: -7px;
+    }
   }
 
   &[data-placement='top'] .module-tooltip-arrow::after {
     @include light-theme {
-      border-top-color: $color-gray-04;
+      border-top-color: variables.$color-gray-04;
     }
 
     @include dark-theme {
-      border-top-color: $color-gray-80;
+      border-top-color: variables.$color-gray-80;
     }
   }
 }
 
 @mixin button-active-call {
-  $background: $color-accent-green;
+  $background: variables.$color-accent-green;
 
   @include font-body-2-bold;
   @include rounded-corners;
@@ -985,7 +1125,7 @@ $rtl-icon-map: (
   width: auto;
   align-items: center;
   background-color: $background;
-  color: $color-white;
+  color: variables.$color-white;
   outline: none;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -997,26 +1137,55 @@ $rtl-icon-map: (
 
     @include color-svg(
       '../images/icons/v3/video/video-compact-fill.svg',
-      $color-white
+      variables.$color-white
     );
-    content: '';
-    display: block;
-    height: $icon-size;
-    margin-inline-end: 4px;
-    min-width: $icon-size;
-    width: $icon-size;
+    & {
+      content: '';
+      display: block;
+      height: $icon-size;
+      margin-inline-end: 4px;
+      min-width: $icon-size;
+      width: $icon-size;
+    }
   }
 
   &:not(:disabled) {
     &:hover {
       @include any-theme {
-        background-color: darken($background, 16%);
+        background-color: color.adjust($background, $lightness: -16%);
       }
     }
 
     &:focus {
       @include keyboard-mode {
-        background-color: darken($background, 16%);
+        background-color: color.adjust($background, $lightness: -16%);
+      }
+    }
+  }
+}
+
+@mixin module-composition-popper {
+  width: 332px;
+  border-radius: 4px;
+  margin-bottom: 6px;
+  z-index: variables.$z-index-context-menu;
+  user-select: none;
+  overflow: hidden;
+
+  @include popper-shadow();
+
+  & {
+    @include light-theme {
+      background: variables.$color-gray-02;
+      ::-webkit-scrollbar-thumb {
+        border: 2px solid variables.$color-gray-02;
+      }
+    }
+
+    @include dark-theme {
+      background: variables.$color-gray-75;
+      ::-webkit-scrollbar-thumb {
+        border: 2px solid variables.$color-gray-75;
       }
     }
   }
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
index c3a6b939d5..033759351a 100644
--- a/stylesheets/_modules.scss
+++ b/stylesheets/_modules.scss
@@ -1,6 +1,10 @@
 // Copyright 2018 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use 'sass:map';
+@use 'mixins';
+@use 'variables';
+
 // Using BEM syntax explained here: https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
 
 // CAUTION: these styles are often overridden by other components
@@ -23,7 +27,7 @@
   position: fixed;
   top: 0;
   width: 100%;
-  z-index: $z-index-on-top-of-everything;
+  z-index: variables.$z-index-on-top-of-everything;
 }
 
 .module-splash-screen {
@@ -37,11 +41,17 @@
   margin-block: 24px;
   margin-inline: 0;
 
-  @include light-theme {
-    @include color-svg('../images/signal-logo.svg', $color-ultramarine-logo);
+  @include mixins.light-theme {
+    @include mixins.color-svg(
+      '../images/signal-logo.svg',
+      variables.$color-ultramarine-logo
+    );
   }
-  @include dark-theme {
-    @include color-svg('../images/signal-logo.svg', $color-white);
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
+      '../images/signal-logo.svg',
+      variables.$color-white
+    );
   }
 
   &.module-splash-screen__logo--128 {
@@ -70,15 +80,15 @@
 }
 
 .module-message__quote-story-reaction-header {
-  @include font-subtitle;
+  @include mixins.font-subtitle;
   margin-bottom: 6px;
 
   .module-message__container-outgoing & {
-    color: $color-white-alpha-80;
+    color: variables.$color-white-alpha-80;
   }
 
   .module-message__container-incoming & {
-    color: $color-gray-60;
+    color: variables.$color-gray-60;
   }
 }
 
@@ -182,35 +192,35 @@
   height: 20px;
   width: 20px;
 
-  @include light-theme {
-    @include color-svg($light-icon, $color-gray-45);
+  @include mixins.light-theme {
+    @include mixins.color-svg($light-icon, variables.$color-gray-45);
     &:hover {
-      @include color-svg($light-icon, $color-gray-90);
+      @include mixins.color-svg($light-icon, variables.$color-gray-90);
     }
   }
 
-  @include dark-theme {
-    @include color-svg($dark-icon, $color-gray-45);
+  @include mixins.dark-theme {
+    @include mixins.color-svg($dark-icon, variables.$color-gray-45);
     &:hover {
-      @include color-svg($dark-icon, $color-gray-02);
+      @include mixins.color-svg($dark-icon, variables.$color-gray-02);
     }
   }
 
   .module-message--targeted & {
-    @include mouse-mode {
-      background-color: $color-gray-60;
+    @include mixins.mouse-mode {
+      background-color: variables.$color-gray-60;
     }
-    @include dark-mouse-mode {
-      background-color: $color-white;
+    @include mixins.dark-mouse-mode {
+      background-color: variables.$color-white;
     }
   }
 
   .module-message:focus & {
-    @include keyboard-mode {
-      background-color: $color-gray-60;
+    @include mixins.keyboard-mode {
+      background-color: variables.$color-gray-60;
     }
-    @include dark-keyboard-mode {
-      background-color: $color-white;
+    @include mixins.dark-keyboard-mode {
+      background-color: variables.$color-white;
     }
   }
 }
@@ -239,7 +249,7 @@
     height: 20px;
     // the z-index here is so that this container is above the message and when
     // clicked on, doesn't propagate the click event to the message.
-    z-index: $z-index-above-base;
+    z-index: variables.$z-index-above-base;
   }
 }
 
@@ -255,30 +265,30 @@
   position: absolute;
   bottom: 4px;
 
-  @include light-theme {
-    @include color-svg(
+  @include mixins.light-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/error/error-circle.svg',
-      $color-accent-red
+      variables.$color-accent-red
     );
   }
-  @include dark-theme {
-    @include color-svg(
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/error/error-circle.svg',
-      $color-accent-red
+      variables.$color-accent-red
     );
   }
 }
 .module-message__error--paused {
-  @include light-theme {
-    @include color-svg(
+  @include mixins.light-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/error/error-circle.svg',
-      $color-gray-60
+      variables.$color-gray-60
     );
   }
-  @include dark-theme {
-    @include color-svg(
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/error/error-circle.svg',
-      $color-gray-45
+      variables.$color-gray-45
     );
   }
 }
@@ -352,12 +362,12 @@ $message-padding-horizontal: 12px;
 }
 
 .module-message__container--targeted {
-  @include mouse-mode {
+  @include mixins.mouse-mode {
     animation: module-message__highlight 1.2s cubic-bezier(0.17, 0.17, 0, 1);
   }
 }
 .module-message__container--targeted-lighter {
-  @include mouse-mode {
+  @include mixins.mouse-mode {
     animation: module-message__highlight-lighter 1.2s
       cubic-bezier(0.17, 0.17, 0, 1);
   }
@@ -382,11 +392,11 @@ $message-padding-horizontal: 12px;
 }
 
 .module-message__alt-accessibility-tree {
-  @include sr-only;
+  @include mixins.sr-only;
 }
 
 .module-message__wrapper--selected {
-  background: rgba($color-ultramarine, 8%);
+  background: rgba(variables.$color-ultramarine, 8%);
 }
 
 .module-message__select-checkbox {
@@ -398,7 +408,7 @@ $message-padding-horizontal: 12px;
   height: 20px;
   border-radius: 9999px;
   background: transparent;
-  border: 1px solid $color-gray-20;
+  border: 1px solid variables.$color-gray-20;
   animation: module-message__select-checkbox--fadeIn 0.2s ease-out;
   transition:
     background 0.1s ease-out,
@@ -410,17 +420,19 @@ $message-padding-horizontal: 12px;
     width: 14px;
     height: 14px;
     margin: 2px;
-    @include color-svg(
+    @include mixins.color-svg(
       '../images/icons/v3/check/check-compact-bold.svg',
-      $color-white
+      variables.$color-white
     );
-    opacity: 0;
-    transition: opacity 0.1s ease-out;
+    & {
+      opacity: 0;
+      transition: opacity 0.1s ease-out;
+    }
   }
 
   .module-message__wrapper--selected & {
-    background: $color-ultramarine;
-    border-color: $color-ultramarine;
+    background: variables.$color-ultramarine;
+    border-color: variables.$color-ultramarine;
     &::before {
       opacity: 1;
     }
@@ -434,11 +446,11 @@ $message-padding-horizontal: 12px;
 }
 
 .module-message:focus-within {
-  @include keyboard-mode {
-    background: $color-selected-message-background-light;
+  @include mixins.keyboard-mode {
+    background: variables.$color-selected-message-background-light;
   }
-  @include dark-keyboard-mode {
-    background: $color-selected-message-background-dark;
+  @include mixins.dark-keyboard-mode {
+    background: variables.$color-selected-message-background-dark;
   }
 }
 
@@ -451,32 +463,32 @@ $message-padding-horizontal: 12px;
 }
 
 .module-message__container--outgoing {
-  @include light-theme {
-    background-color: $color-ultramarine;
-    color: $color-white;
+  @include mixins.light-theme {
+    background-color: variables.$color-ultramarine;
+    color: variables.$color-white;
   }
-  @include dark-theme {
-    background-color: $color-ultramarine;
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    background-color: variables.$color-ultramarine;
+    color: variables.$color-gray-05;
   }
 }
 
 // In case the color gets messed up
 .module-message__container--incoming {
-  background-color: $color-gray-05;
-  color: $color-gray-90;
+  background-color: variables.$color-gray-05;
+  color: variables.$color-gray-90;
 
-  @include dark-theme {
-    background-color: $color-gray-75;
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-75;
+    color: variables.$color-gray-05;
   }
 }
 
-@each $color, $value in $conversation-colors {
+@each $color, $value in variables.$conversation-colors {
   .module-message__container--outgoing-#{$color} {
     background-color: $value;
 
-    @include dark-theme {
+    @include mixins.dark-theme {
       background-color: $value;
     }
   }
@@ -486,13 +498,13 @@ $message-padding-horizontal: 12px;
   background-attachment: fixed;
 }
 
-@each $color, $value in $conversation-colors-gradient {
+@each $color, $value in variables.$conversation-colors-gradient {
   .module-message__container--outgoing-#{$color} {
     background-attachment: fixed;
     background-image: linear-gradient(
-      map-get($value, 'deg'),
-      map-get($value, 'start'),
-      map-get($value, 'end')
+      map.get($value, 'deg'),
+      map.get($value, 'start'),
+      map.get($value, 'end')
     );
   }
 }
@@ -504,7 +516,7 @@ $message-padding-horizontal: 12px;
 }
 
 .module-message__container--with-tap-to-view-pending {
-  background-color: $color-gray-15;
+  background-color: variables.$color-gray-15;
 }
 
 .module-message__container--with-tap-to-view-pending {
@@ -512,13 +524,13 @@ $message-padding-horizontal: 12px;
 }
 
 .module-message__container--with-tap-to-view-expired {
-  @include light-theme {
-    border: 1px solid $color-gray-15;
-    background-color: $color-white;
+  @include mixins.light-theme {
+    border: 1px solid variables.$color-gray-15;
+    background-color: variables.$color-white;
   }
-  @include dark-theme {
-    border: 1px solid $color-gray-60;
-    background-color: $color-gray-95;
+  @include mixins.dark-theme {
+    border: 1px solid variables.$color-gray-60;
+    background-color: variables.$color-gray-95;
   }
 }
 
@@ -526,27 +538,27 @@ $message-padding-horizontal: 12px;
   width: auto;
   cursor: default;
 
-  @include light-theme {
-    background-color: $color-white;
-    border: 1px solid $color-deep-red;
+  @include mixins.light-theme {
+    background-color: variables.$color-white;
+    border: 1px solid variables.$color-deep-red;
   }
-  @include dark-theme {
-    background-color: $color-black;
-    border: 1px solid $color-deep-red;
+  @include mixins.dark-theme {
+    background-color: variables.$color-black;
+    border: 1px solid variables.$color-deep-red;
   }
 }
 
 .module-message__container--deleted-for-everyone {
-  @include light-theme {
-    color: $color-gray-90;
-    border: 1px solid $color-gray-25;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
+    border: 1px solid variables.$color-gray-25;
     background-color: transparent;
     background-image: none;
   }
 
-  @include dark-theme {
-    color: $color-gray-05;
-    border: 1px solid $color-gray-75;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
+    border: 1px solid variables.$color-gray-75;
     background-color: transparent;
     background-image: none;
   }
@@ -564,19 +576,19 @@ $message-padding-horizontal: 12px;
 
   border-radius: 18px;
 
-  @include font-body-1-italic;
+  @include mixins.font-body-1-italic;
 
-  @include light-theme {
-    color: $color-gray-90;
-    border: 1px solid $color-gray-05;
-    background-color: $color-white;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
+    border: 1px solid variables.$color-gray-05;
+    background-color: variables.$color-white;
     background-image: none;
   }
 
-  @include dark-theme {
-    color: $color-gray-05;
-    border: 1px solid $color-gray-75;
-    background-color: $color-gray-95;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
+    border: 1px solid variables.$color-gray-75;
+    background-color: variables.$color-gray-95;
     background-image: none;
   }
 }
@@ -637,71 +649,71 @@ $message-padding-horizontal: 12px;
   width: 20px;
   height: 20px;
 
-  @include light-theme {
-    @include color-svg(
+  @include mixins.light-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/view_once/view_once.svg',
-      $color-gray-90
+      variables.$color-gray-90
     );
   }
-  @include dark-theme {
-    @include color-svg(
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/view_once/view_once.svg',
-      $color-gray-05
+      variables.$color-gray-05
     );
   }
 }
 .module-message__tap-to-view__icon--expired {
-  @include light-theme {
-    @include color-svg(
+  @include mixins.light-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/view_once/view_once-dash.svg',
-      $color-gray-75
+      variables.$color-gray-75
     );
   }
-  @include dark-theme {
-    @include color-svg(
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/view_once/view_once-dash.svg',
-      $color-gray-05
+      variables.$color-gray-05
     );
   }
 }
 .module-message__tap-to-view__icon--outgoing {
-  background-color: $color-gray-05;
+  background-color: variables.$color-gray-05;
 }
 .module-message__tap-to-view__text {
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
 
-  color: $color-gray-05;
+  color: variables.$color-gray-05;
 }
 .module-message__tap-to-view__text--incoming {
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 }
 .module-message__tap-to-view__text--incoming-expired {
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 }
 .module-message__tap-to-view__text--incoming-error {
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 
 .module-message__tap-to-view__text--outgoing {
-  color: $color-white;
+  color: variables.$color-white;
 }
 .module-message__tap-to-view__text--outgoing-expired {
-  color: $color-gray-05;
+  color: variables.$color-gray-05;
 }
 
 .module-message__attachment-container {
@@ -716,11 +728,11 @@ $message-padding-horizontal: 12px;
   line-height: 0;
   overflow: hidden;
 
-  @include light-theme {
-    background-color: $color-white;
+  @include mixins.light-theme {
+    background-color: variables.$color-white;
   }
-  @include dark-theme {
-    background-color: $color-gray-95;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-95;
   }
 
   &--with-content-below {
@@ -757,17 +769,18 @@ $message-padding-horizontal: 12px;
 }
 
 .module-message__generic-attachment {
-  @include button-reset;
+  @include mixins.button-reset;
 
-  width: 100%;
+  & {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
 
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
-      box-shadow: 0px 0px 0px 2px $color-ultramarine;
+      box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
     }
   }
 }
@@ -811,16 +824,16 @@ $message-padding-horizontal: 12px;
   width: 16px;
 
   border-radius: 50%;
-  background-color: $color-white;
+  background-color: variables.$color-white;
 }
 
 .module-message__generic-attachment__icon-dangerous {
   height: 16px;
   width: 16px;
 
-  @include color-svg(
+  @include mixins.color-svg(
     '../images/icons/v2/error-solid-24.svg',
-    $color-accent-red
+    variables.$color-accent-red
   );
 }
 
@@ -840,7 +853,7 @@ $message-padding-horizontal: 12px;
   white-space: nowrap;
   text-overflow: clip;
 
-  color: $color-gray-90;
+  color: variables.$color-gray-90;
 }
 
 .module-message__generic-attachment__text {
@@ -851,7 +864,7 @@ $message-padding-horizontal: 12px;
 }
 
 .module-message__generic-attachment__file-name {
-  @include font-body-2-bold;
+  @include mixins.font-body-2-bold;
 
   margin-top: 2px;
   user-select: none;
@@ -861,47 +874,47 @@ $message-padding-horizontal: 12px;
   white-space: nowrap;
   text-overflow: ellipsis;
 
-  @include light-theme {
-    color: $color-white;
+  @include mixins.light-theme {
+    color: variables.$color-white;
   }
-  @include dark-theme {
-    color: $color-gray-02;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-02;
   }
 }
 
 .module-message__generic-attachment__file-name--incoming {
-  color: $color-white;
+  color: variables.$color-white;
 
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 
 .module-message__generic-attachment__file-size {
-  @include font-body-2;
+  @include mixins.font-body-2;
 
   margin-top: 3px;
   user-select: none;
 
-  @include light-theme {
-    color: $color-white;
+  @include mixins.light-theme {
+    color: variables.$color-white;
   }
-  @include dark-theme {
-    color: $color-gray-02;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-02;
   }
 }
 
 .module-message__generic-attachment__file-size--incoming {
-  color: $color-white;
+  color: variables.$color-white;
 
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 
@@ -916,19 +929,21 @@ $message-padding-horizontal: 12px;
     }
   }
 
-  display: block;
+  & {
+    display: block;
 
-  margin-inline: -$message-padding-horizontal;
-  width: calc(100% + 24px);
-  outline: none;
+    margin-inline: -$message-padding-horizontal;
+    width: calc(100% + 24px);
+    outline: none;
 
-  margin-top: -$message-padding-vertical;
-  margin-bottom: 5px;
-  overflow: hidden;
+    margin-top: -$message-padding-vertical;
+    margin-bottom: 5px;
+    overflow: hidden;
 
-  @include keyboard-mode {
-    &:focus {
-      box-shadow: 0px 0px 0px 2px $color-ultramarine;
+    @include mixins.keyboard-mode {
+      &:focus {
+        box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
+      }
     }
   }
 }
@@ -944,11 +959,11 @@ $message-padding-horizontal: 12px;
   flex-direction: row;
   align-items: center;
 
-  @include light-theme {
-    background-color: $color-gray-02;
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-02;
   }
-  @include dark-theme {
-    background-color: $color-gray-80;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-80;
   }
 }
 
@@ -963,23 +978,23 @@ $message-padding-horizontal: 12px;
 }
 
 .module-message__link-preview__title {
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
 
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 }
 
 .module-message__link-preview__description {
-  @include font-body-2;
+  @include mixins.font-body-2;
 
   margin-top: 4px;
   overflow: hidden;
@@ -987,27 +1002,27 @@ $message-padding-horizontal: 12px;
   -webkit-line-clamp: 5;
   -webkit-box-orient: vertical;
 
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 }
 
 .module-message__link-preview__footer {
-  @include font-body-2;
+  @include mixins.font-body-2;
 
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   margin-top: 2px;
 
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 
   > *:not(:first-child) {
@@ -1027,7 +1042,7 @@ $message-padding-horizontal: 12px;
 }
 
 .module-message__author {
-  @include font-body-2-bold;
+  @include mixins.font-body-2-bold;
 
   height: 18px;
   overflow-x: hidden;
@@ -1038,7 +1053,7 @@ $message-padding-horizontal: 12px;
 }
 
 .module-message__author--with-tap-to-view-expired {
-  @include font-body-2-bold;
+  @include mixins.font-body-2-bold;
 
   height: 18px;
   overflow-x: hidden;
@@ -1046,16 +1061,16 @@ $message-padding-horizontal: 12px;
   white-space: nowrap;
   text-overflow: ellipsis;
 
-  @include light-theme {
-    color: $color-gray-75;
+  @include mixins.light-theme {
+    color: variables.$color-gray-75;
   }
-  @include dark-theme {
-    color: $color-white;
+  @include mixins.dark-theme {
+    color: variables.$color-white;
   }
 }
 
 .module-message__author_with_sticker {
-  @include font-body-2-bold;
+  @include mixins.font-body-2-bold;
 
   height: 18px;
   overflow-x: hidden;
@@ -1069,16 +1084,16 @@ $message-padding-horizontal: 12px;
   //   look bad for RTL users if we make it too wide.
   width: 300px;
 
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 }
 
 .module-message__text {
-  @include font-body-1;
+  @include mixins.font-body-1;
 
   text-align: start;
   overflow-wrap: break-word;
@@ -1086,11 +1101,11 @@ $message-padding-horizontal: 12px;
   word-break: break-word;
   white-space: pre-wrap;
 
-  @include light-theme {
-    color: $color-white-alpha-90;
+  @include mixins.light-theme {
+    color: variables.$color-white-alpha-90;
   }
-  @include dark-theme {
-    color: $color-white-alpha-90;
+  @include mixins.dark-theme {
+    color: variables.$color-white-alpha-90;
   }
 
   a {
@@ -1100,69 +1115,69 @@ $message-padding-horizontal: 12px;
     // when surrounded by text.
     word-break: break-all;
 
-    @include light-theme {
-      color: $color-white-alpha-90;
+    @include mixins.light-theme {
+      color: variables.$color-white-alpha-90;
     }
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       &:focus {
-        outline: 1px solid $color-gray-90;
+        outline: 1px solid variables.$color-gray-90;
       }
     }
 
-    @include dark-theme {
-      color: $color-white-alpha-90;
+    @include mixins.dark-theme {
+      color: variables.$color-white-alpha-90;
     }
-    @include dark-keyboard-mode {
+    @include mixins.dark-keyboard-mode {
       &:focus {
-        outline: 1px solid $color-white-alpha-90;
+        outline: 1px solid variables.$color-white-alpha-90;
       }
     }
   }
 }
 
 .module-message__text--incoming {
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 
   a {
     text-decoration: underline;
     outline: none;
 
-    @include light-theme {
-      color: $color-gray-90;
+    @include mixins.light-theme {
+      color: variables.$color-gray-90;
     }
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       &:focus {
-        outline: 1px solid $color-gray-90;
+        outline: 1px solid variables.$color-gray-90;
       }
     }
 
-    @include dark-theme {
-      color: $color-gray-05;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-05;
     }
-    @include dark-keyboard-mode {
+    @include mixins.dark-keyboard-mode {
       &:focus {
-        outline: 1px solid $color-gray-05;
+        outline: 1px solid variables.$color-gray-05;
       }
     }
   }
 }
 
 .module-message__text--error {
-  @include font-body-1-italic;
+  @include mixins.font-body-1-italic;
 }
 .module-message__text--delete-for-everyone {
   user-select: none;
 
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 }
 
@@ -1178,20 +1193,22 @@ $message-padding-horizontal: 12px;
     float: inline-end;
     margin-top: -14px;
     position: relative;
-    z-index: $z-index-base;
+    z-index: variables.$z-index-base;
   }
 }
 
 .module-message__metadata__edited {
-  @include button-reset;
-  @include font-caption;
-  color: $color-gray-60;
-  cursor: pointer;
-  margin-inline-end: 6px;
-  z-index: $z-index-base;
+  @include mixins.button-reset;
+  & {
+    @include mixins.font-caption;
+    color: variables.$color-gray-60;
+    cursor: pointer;
+    margin-inline-end: 6px;
+    z-index: variables.$z-index-base;
+  }
 
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 
@@ -1203,30 +1220,30 @@ $message-padding-horizontal: 12px;
   // High margin to leave space for the increase when we go to two checks
   margin-bottom: 2px;
 
-  @include color-svg(
+  @include mixins.color-svg(
     '../images/icons/v2/lock-unlock-outline-12.svg',
-    $color-white
+    variables.$color-white
   );
 }
 
 .module-message__metadata__sms--incoming {
-  @include light-theme {
-    background-color: $color-gray-60;
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    background-color: $color-gray-25;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-25;
   }
 }
 
 .module-message__container--outgoing .module-message__metadata__edited {
-  color: $color-white-alpha-80;
+  color: variables.$color-white-alpha-80;
 }
 
 // With an image and no caption, this section needs to be on top of the image overlay
 .module-message__metadata--with-image-no-caption {
   position: absolute;
   bottom: 9px;
-  z-index: $z-index-above-base;
+  z-index: variables.$z-index-above-base;
 
   width: 100%;
   // Because this is absolutely positioned, we 100% is too big, take it down by parent
@@ -1238,69 +1255,69 @@ $message-padding-horizontal: 12px;
 }
 
 .module-message__metadata--outline-only-bubble {
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 
 .module-message__metadata__date {
-  @include font-caption;
+  @include mixins.font-caption;
   user-select: none;
   white-space: nowrap;
 
-  @include light-theme {
-    color: $color-white-alpha-80;
+  @include mixins.light-theme {
+    color: variables.$color-white-alpha-80;
   }
-  @include dark-theme {
-    color: $color-white-alpha-80;
+  @include mixins.dark-theme {
+    color: variables.$color-white-alpha-80;
   }
 }
 .module-message__metadata__tapable {
-  @include button-reset;
+  @include mixins.button-reset;
 }
 .module-message__metadata__date--incoming {
-  color: $color-white-alpha-80;
+  color: variables.$color-white-alpha-80;
 
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 .module-message__metadata__date--with-image-no-caption {
-  @include light-theme {
-    color: $color-white;
+  @include mixins.light-theme {
+    color: variables.$color-white;
   }
-  @include dark-theme {
-    color: $color-white-alpha-80;
+  @include mixins.dark-theme {
+    color: variables.$color-white-alpha-80;
   }
 }
 .module-message__metadata__date--outline-only-bubble {
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 .module-message__metadata__date.module-message__metadata__date--incoming-with-tap-to-view-expired {
-  color: $color-gray-75;
+  color: variables.$color-gray-75;
 
-  @include dark-theme {
-    color: $color-white-alpha-80;
+  @include mixins.dark-theme {
+    color: variables.$color-white-alpha-80;
   }
 }
 .module-message__metadata__date.module-message__metadata__date--outgoing-with-tap-to-view-expired {
-  color: $color-white-alpha-80;
+  color: variables.$color-white-alpha-80;
 }
 
 .module-message__metadata__date--with-sticker {
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
 }
 
@@ -1315,26 +1332,26 @@ $message-padding-horizontal: 12px;
 
 .module-message__metadata__status-icon--paused,
 .module-message__metadata__status-icon--sending {
-  @include only-when-page-is-visible {
+  @include mixins.only-when-page-is-visible {
     animation: rotate 4s linear infinite;
   }
-  @include color-svg(
+  @include mixins.color-svg(
     '../images/icons/v3/message_status/messagestatus-sending.svg',
-    $color-white
+    variables.$color-white
   );
 }
 
 .module-message__metadata__status-icon--sent {
-  @include light-theme {
-    @include color-svg(
+  @include mixins.light-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/message_status/messagestatus-sent.svg',
-      $color-white-alpha-80
+      variables.$color-white-alpha-80
     );
   }
-  @include dark-theme {
-    @include color-svg(
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/message_status/messagestatus-sent.svg',
-      $color-white-alpha-80
+      variables.$color-white-alpha-80
     );
   }
 }
@@ -1343,16 +1360,16 @@ $message-padding-horizontal: 12px;
   margin-inline-end: 0px;
   width: 18px;
 
-  @include light-theme {
-    @include color-svg(
+  @include mixins.light-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/message_status/messagestatus-delivered.svg',
-      $color-white-alpha-80
+      variables.$color-white-alpha-80
     );
   }
-  @include dark-theme {
-    @include color-svg(
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/message_status/messagestatus-delivered.svg',
-      $color-white-alpha-80
+      variables.$color-white-alpha-80
     );
   }
 }
@@ -1362,41 +1379,41 @@ $message-padding-horizontal: 12px;
   margin-inline-end: 0px;
   width: 18px;
 
-  @include light-theme {
-    @include color-svg(
+  @include mixins.light-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/message_status/messagestatus-read.svg',
-      $color-white-alpha-80
+      variables.$color-white-alpha-80
     );
   }
-  @include dark-theme {
-    @include color-svg(
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/message_status/messagestatus-read.svg',
-      $color-white-alpha-80
+      variables.$color-white-alpha-80
     );
   }
 }
 
 // When status indicators are overlaid on top of an image, they use different colors
 .module-message__metadata__status-icon--with-image-no-caption {
-  @include dark-theme {
-    background-color: $color-gray-02;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-02;
   }
-  @include light-theme {
-    background-color: $color-white;
+  @include mixins.light-theme {
+    background-color: variables.$color-white;
   }
 }
 .module-message__metadata__status-icon--with-sticker {
-  @include light-theme {
-    background-color: $color-gray-60;
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-60;
   }
 }
 
 .module-message__metadata__status-icon--outline-only-bubble {
-  @include light-theme {
-    background-color: $color-gray-60;
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    background-color: $color-gray-25;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-25;
   }
 }
 
@@ -1405,36 +1422,39 @@ $message-padding-horizontal: 12px;
 }
 
 .module-message__send-message-button {
-  @include button-reset;
+  @include mixins.button-reset;
 
-  width: calc(100% + 24px);
+  & {
+    width: calc(100% + 24px);
 
-  @include font-body-2-bold;
+    @include mixins.font-body-2-bold;
 
-  margin-top: $message-padding-vertical;
-  margin-bottom: -$message-padding-vertical;
-  margin-inline: -$message-padding-horizontal;
+    margin-top: $message-padding-vertical;
+    margin-bottom: -$message-padding-vertical;
+    margin-inline: -$message-padding-horizontal;
 
-  text-align: center;
-  padding: 10px;
+    text-align: center;
+    padding: 10px;
 
-  border-bottom-left-radius: 18px;
-  border-bottom-right-radius: 18px;
+    border-bottom-left-radius: 18px;
+    border-bottom-right-radius: 18px;
 
-  @include light-theme {
-    color: $color-ultramarine;
-    background-color: $color-gray-02;
-    border: 1px solid $color-black-alpha-20;
-  }
-  @include dark-theme {
-    color: $color-ultramarine-light;
-    background-color: $color-gray-75;
-    border: 1px solid $color-gray-45;
+    @include mixins.light-theme {
+      color: variables.$color-ultramarine;
+      background-color: variables.$color-gray-02;
+      border: 1px solid variables.$color-black-alpha-20;
+    }
+
+    @include mixins.dark-theme {
+      color: variables.$color-ultramarine-light;
+      background-color: variables.$color-gray-75;
+      border: 1px solid variables.$color-gray-45;
+    }
   }
 
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
-      box-shadow: 0px 0px 0px 2px $color-ultramarine;
+      box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
     }
   }
 }
@@ -1477,7 +1497,7 @@ $message-padding-horizontal: 12px;
   display: flex;
   justify-content: center;
   position: relative;
-  z-index: $z-index-base;
+  z-index: variables.$z-index-base;
 
   &:not(:last-child) {
     margin-inline-start: -4px;
@@ -1485,19 +1505,19 @@ $message-padding-horizontal: 12px;
 
   &--overflow-count {
     .module-Avatar__contents {
-      @include light-theme() {
-        background: $color-gray-05;
-        color: $color-gray-60;
+      @include mixins.light-theme() {
+        background: variables.$color-gray-05;
+        color: variables.$color-gray-60;
       }
 
-      @include dark-theme() {
-        background: $color-gray-75;
-        color: $color-gray-25;
+      @include mixins.dark-theme() {
+        background: variables.$color-gray-75;
+        color: variables.$color-gray-25;
       }
     }
 
     .module-Avatar__label {
-      @include font-caption-bold;
+      @include mixins.font-caption-bold;
     }
   }
 
@@ -1510,12 +1530,12 @@ $message-padding-horizontal: 12px;
   .module-Avatar__contents {
     outline: 3px solid;
 
-    @include light-theme() {
-      outline-color: $color-white;
+    @include mixins.light-theme() {
+      outline-color: variables.$color-white;
     }
 
-    @include dark-theme() {
-      outline-color: $color-gray-95;
+    @include mixins.dark-theme() {
+      outline-color: variables.$color-gray-95;
     }
   }
 }
@@ -1527,7 +1547,7 @@ $message-padding-horizontal: 12px;
 .module-message__unopened-gift-badge {
   width: 240px;
   height: 132px;
-  background-color: $color-ultramarine;
+  background-color: variables.$color-ultramarine;
   position: relative;
 
   margin-inline: -$message-padding-horizontal;
@@ -1535,11 +1555,11 @@ $message-padding-horizontal: 12px;
   margin-bottom: $message-padding-vertical;
 
   &--outgoing {
-    @include light-theme {
-      border-bottom: 1px solid $color-white-alpha-80;
+    @include mixins.light-theme {
+      border-bottom: 1px solid variables.$color-white-alpha-80;
     }
-    @include dark-theme {
-      border-bottom: 1px solid $color-gray-95;
+    @include mixins.dark-theme {
+      border-bottom: 1px solid variables.$color-gray-95;
     }
   }
 
@@ -1554,20 +1574,20 @@ $message-padding-horizontal: 12px;
     height: 16px;
     top: 50%;
     transform: translateY(-50%);
-    background-color: $color-white;
+    background-color: variables.$color-white;
   }
 
   &__ribbon-vertical {
-    @include position-absolute-center-x;
+    @include mixins.position-absolute-center-x;
     top: 0;
     bottom: 0;
     width: 16px;
-    background-color: $color-white;
+    background-color: variables.$color-white;
   }
 
   &__bow {
     // Centered
-    @include position-absolute-center;
+    @include mixins.position-absolute-center;
 
     // For proper alignment with the ribbons
     margin-top: 3px;
@@ -1578,36 +1598,36 @@ $message-padding-horizontal: 12px;
   }
 
   &__text {
-    @include font-body-2-italic;
+    @include mixins.font-body-2-italic;
 
     &--incoming {
-      @include light-theme {
-        color: $color-gray-60;
+      @include mixins.light-theme {
+        color: variables.$color-gray-60;
       }
-      @include dark-theme {
-        color: $color-gray-25;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-25;
       }
     }
   }
 
   &__container .module-message__text--incoming {
-    @include font-body-2-italic;
+    @include mixins.font-body-2-italic;
 
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
   }
   &__container .module-message__text--outgoing {
-    @include font-body-2-italic;
+    @include mixins.font-body-2-italic;
 
-    @include light-theme {
-      color: $color-white-alpha-80;
+    @include mixins.light-theme {
+      color: variables.$color-white-alpha-80;
     }
-    @include dark-theme {
-      color: $color-white-alpha-80;
+    @include mixins.dark-theme {
+      color: variables.$color-white-alpha-80;
     }
   }
 }
@@ -1632,21 +1652,21 @@ $message-padding-horizontal: 12px;
     &--missing-incoming {
       border-radius: 50%;
 
-      @include light-theme {
-        background-color: $color-gray-15;
+      @include mixins.light-theme {
+        background-color: variables.$color-gray-15;
       }
-      @include dark-theme {
-        background-color: $color-gray-60;
+      @include mixins.dark-theme {
+        background-color: variables.$color-gray-60;
       }
     }
     &--missing-outgoing {
       border-radius: 50%;
 
-      @include light-theme {
-        background-color: $color-white-alpha-20;
+      @include mixins.light-theme {
+        background-color: variables.$color-white-alpha-20;
       }
-      @include dark-theme {
-        background-color: $color-white-alpha-20;
+      @include mixins.dark-theme {
+        background-color: variables.$color-white-alpha-20;
       }
     }
   }
@@ -1657,108 +1677,113 @@ $message-padding-horizontal: 12px;
   }
   &__title {
     margin-bottom: 6px;
-    @include font-body-1;
+    @include mixins.font-body-1;
   }
   &__remaining {
-    @include font-subtitle;
+    @include mixins.font-subtitle;
 
     &--incoming {
-      @include light-theme {
-        color: $color-gray-75;
+      @include mixins.light-theme {
+        color: variables.$color-gray-75;
       }
-      @include dark-theme {
-        color: $color-gray-25;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-25;
       }
     }
     &--outgoing {
-      @include light-theme {
-        color: $color-white-alpha-80;
+      @include mixins.light-theme {
+        color: variables.$color-white-alpha-80;
       }
-      @include dark-theme {
-        color: $color-white-alpha-80;
+      @include mixins.dark-theme {
+        color: variables.$color-white-alpha-80;
       }
     }
   }
 
   &__button {
-    @include button-reset;
-    @include button-secondary;
-    margin-inline: auto;
-    width: 216px;
-    margin-bottom: 7px;
-    text-align: center;
-    border-radius: 4px;
+    @include mixins.button-reset;
+    & {
+      @include mixins.button-secondary;
+    }
 
-    @include font-body-1-bold;
+    & {
+      margin-inline: auto;
+      width: 216px;
+      margin-bottom: 7px;
+      text-align: center;
+      border-radius: 4px;
 
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    cursor: pointer;
+      @include mixins.font-body-1-bold;
+
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      cursor: pointer;
+    }
 
     &--incoming {
-      @include light-theme {
-        color: $color-gray-90;
-        background-color: $color-white;
+      @include mixins.light-theme {
+        color: variables.$color-gray-90;
+        background-color: variables.$color-white;
       }
-      @include dark-theme {
-        color: $color-gray-05;
-        background-color: $color-gray-62;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-05;
+        background-color: variables.$color-gray-62;
       }
 
       // Disabling hover
       &:hover {
-        @include mouse-mode {
-          background-color: $color-white;
+        @include mixins.mouse-mode {
+          background-color: variables.$color-white;
         }
 
-        @include dark-mouse-mode {
-          background-color: $color-gray-62;
+        @include mixins.dark-mouse-mode {
+          background-color: variables.$color-gray-62;
         }
       }
     }
 
     &--outgoing {
-      @include light-theme {
-        color: $color-gray-90;
-        background-color: $color-white-alpha-80;
+      @include mixins.light-theme {
+        color: variables.$color-gray-90;
+        background-color: variables.$color-white-alpha-80;
       }
-      @include dark-theme {
-        color: $color-gray-90;
-        background-color: $color-white-alpha-80;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-90;
+        background-color: variables.$color-white-alpha-80;
       }
       &:hover {
-        @include mouse-mode {
-          background-color: $color-white-alpha-90;
+        @include mixins.mouse-mode {
+          background-color: variables.$color-white-alpha-90;
         }
 
-        @include dark-mouse-mode {
-          background-color: $color-white-alpha-90;
+        @include mixins.dark-mouse-mode {
+          background-color: variables.$color-white-alpha-90;
         }
       }
       &:focus {
-        @include keyboard-mode {
-          box-shadow: 0px 0px 0px 3px $color-ultramarine-light;
+        @include mixins.keyboard-mode {
+          box-shadow: 0px 0px 0px 3px variables.$color-ultramarine-light;
         }
-        @include dark-keyboard-mode {
-          box-shadow: 0px 0px 0px 3px $color-ultramarine-light;
+        @include mixins.dark-keyboard-mode {
+          box-shadow: 0px 0px 0px 3px variables.$color-ultramarine-light;
         }
       }
       &:active {
         // We need to include all four here for specificity precedence
 
-        @include mouse-mode {
-          background-color: $color-white;
+        @include mixins.mouse-mode {
+          background-color: variables.$color-white;
         }
-        @include dark-mouse-mode {
-          background-color: $color-white;
+        @include mixins.dark-mouse-mode {
+          background-color: variables.$color-white;
         }
 
-        @include keyboard-mode {
-          background-color: $color-white;
+        @include mixins.keyboard-mode {
+          background-color: variables.$color-white;
         }
-        @include dark-keyboard-mode {
-          background-color: $color-white;
+        @include mixins.dark-keyboard-mode {
+          background-color: variables.$color-white;
         }
       }
     }
@@ -1778,31 +1803,31 @@ $message-padding-horizontal: 12px;
     display: inline-block;
 
     &--incoming {
-      @include light-theme {
-        @include color-svg(
+      @include mixins.light-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/check/check-circle.svg',
-          $color-gray-90
+          variables.$color-gray-90
         );
       }
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/check/check-circle.svg',
-          $color-gray-05
+          variables.$color-gray-05
         );
       }
     }
 
     &--outgoing {
-      @include light-theme {
-        @include color-svg(
+      @include mixins.light-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/check/check-circle.svg',
-          $color-gray-90
+          variables.$color-gray-90
         );
       }
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/check/check-circle.svg',
-          $color-gray-90
+          variables.$color-gray-90
         );
       }
     }
@@ -1820,7 +1845,7 @@ $message-padding-horizontal: 12px;
 
 .module-message__reactions {
   position: relative;
-  z-index: $z-index-above-base;
+  z-index: variables.$z-index-above-base;
   height: 22px;
   display: flex;
   user-select: none;
@@ -1838,15 +1863,17 @@ $message-padding-horizontal: 12px;
 }
 
 .module-message__reactions__reaction {
-  @include button-reset;
+  @include mixins.button-reset;
 
-  min-width: 28px;
-  height: 22px;
-  border: 1px solid;
-  border-radius: 33px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  & {
+    min-width: 28px;
+    height: 22px;
+    border: 1px solid;
+    border-radius: 33px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 
   &--with-count {
     min-width: 40px;
@@ -1855,7 +1882,7 @@ $message-padding-horizontal: 12px;
   }
 
   &__count {
-    @include font-caption-bold;
+    @include mixins.font-caption-bold;
 
     margin-inline-start: 4px;
 
@@ -1863,17 +1890,19 @@ $message-padding-horizontal: 12px;
       margin-inline-start: 0px;
     }
 
-    @include light-theme {
-      color: $color-gray-60;
-    }
+    & {
+      @include mixins.light-theme {
+        color: variables.$color-gray-60;
+      }
 
-    @include dark-theme {
-      color: $color-gray-25;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-25;
+      }
     }
 
     &--is-me {
-      @include dark-theme {
-        color: $color-gray-15;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-15;
       }
     }
   }
@@ -1882,29 +1911,31 @@ $message-padding-horizontal: 12px;
     outline: none;
   }
 
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
-      box-shadow: 0px 0px 0px 2px $color-ultramarine;
+      box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
     }
   }
 
-  @include light-theme() {
-    border-color: $color-white;
-    background: $color-gray-05;
+  & {
+    @include mixins.light-theme() {
+      border-color: variables.$color-white;
+      background: variables.$color-gray-05;
+    }
   }
 
-  @include dark-theme() {
-    border-color: $color-gray-95;
-    background: $color-gray-90;
+  @include mixins.dark-theme() {
+    border-color: variables.$color-gray-95;
+    background: variables.$color-gray-90;
   }
 
   &--is-me {
-    @include dark-theme() {
-      background: $color-gray-60;
+    @include mixins.dark-theme() {
+      background: variables.$color-gray-60;
     }
 
-    @include light-theme() {
-      background: $color-gray-25;
+    @include mixins.light-theme() {
+      background: variables.$color-gray-25;
     }
   }
 }
@@ -1918,17 +1949,21 @@ $message-padding-horizontal: 12px;
   margin-inline-start: 6px;
   margin-bottom: 2px;
 
-  @include dark-theme {
-    @include color-svg(
-      '../images/icons/v3/message_timer/messagetimer-60.svg',
-      $color-white-alpha-80
-    );
+  & {
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/message_timer/messagetimer-60.svg',
+        variables.$color-white-alpha-80
+      );
+    }
   }
-  @include light-theme {
-    @include color-svg(
-      '../images/icons/v3/message_timer/messagetimer-60.svg',
-      $color-white-alpha-80
-    );
+  & {
+    @include mixins.light-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/message_timer/messagetimer-60.svg',
+        variables.$color-white-alpha-80
+      );
+    }
   }
 }
 
@@ -1937,63 +1972,67 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 
 @each $timer-icon in $timer-icons {
   .module-expire-timer--#{$timer-icon} {
-    @include dark-theme {
-      @include color-svg(
-        '../images/icons/v3/message_timer/messagetimer-#{$timer-icon}.svg',
-        $color-white-alpha-80
-      );
+    & {
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/message_timer/messagetimer-#{$timer-icon}.svg',
+          variables.$color-white-alpha-80
+        );
+      }
     }
-    @include light-theme {
-      @include color-svg(
-        '../images/icons/v3/message_timer/messagetimer-#{$timer-icon}.svg',
-        $color-white-alpha-80
-      );
+    & {
+      @include mixins.light-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/message_timer/messagetimer-#{$timer-icon}.svg',
+          variables.$color-white-alpha-80
+        );
+      }
     }
   }
 }
 
 .module-expire-timer--incoming {
-  background-color: $color-white-alpha-80;
+  background-color: variables.$color-white-alpha-80;
 
-  @include light-theme {
-    background-color: $color-gray-60;
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    background-color: $color-gray-25;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-25;
   }
 }
 .module-expire-timer.module-expire-timer--incoming-with-tap-to-view-expired {
-  background-color: $color-gray-75;
+  background-color: variables.$color-gray-75;
 
-  @include dark-theme {
-    background-color: $color-white-alpha-80;
+  @include mixins.dark-theme {
+    background-color: variables.$color-white-alpha-80;
   }
 }
 .module-expire-timer.module-expire-timer--outgoing-with-tap-to-view-expired {
-  background-color: $color-white-alpha-80;
+  background-color: variables.$color-white-alpha-80;
 }
 .module-expire-timer--with-sticker {
-  @include light-theme {
-    background-color: $color-gray-60;
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-60;
   }
 }
 
 // When status indicators are overlaid on top of an image, they use different colors
 .module-expire-timer--with-image-no-caption {
-  @include light-theme {
-    background-color: $color-white;
+  @include mixins.light-theme {
+    background-color: variables.$color-white;
   }
-  @include dark-theme {
-    background-color: $color-gray-02;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-02;
   }
 }
 
 .module-expire-timer--outline-only-bubble {
-  @include light-theme {
-    background-color: $color-gray-60;
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    background-color: $color-gray-25;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-25;
   }
 }
 
@@ -2005,20 +2044,22 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   }
 
   &__text {
-    @include font-body-1;
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.font-body-1;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
-    max-width: 400px;
+    & {
+      max-width: 400px;
 
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    display: -webkit-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      display: -webkit-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
 
     img.emoji {
       height: 1em;
@@ -2033,26 +2074,28 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 // Module: Embedded Contact
 
 .module-embedded-contact {
-  @include button-reset;
+  @include mixins.button-reset;
 
-  width: 100%;
-  padding: 5px;
+  & {
+    width: 100%;
+    padding: 5px;
 
-  display: flex;
-  flex-direction: row;
-  align-items: center;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
 
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
-      box-shadow: 0px 0px 0px 2px $color-ultramarine;
+      box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
     }
   }
 }
 
 .module-embedded-contact--outgoing {
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
-      box-shadow: 0px 0px 0px 2px $color-white;
+      box-shadow: 0px 0px 0px 2px variables.$color-white;
     }
   }
 }
@@ -2077,7 +2120,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 }
 
 .module-embedded-contact__contact-name {
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
 
   margin-top: 6px;
 
@@ -2086,27 +2129,27 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   overflow-x: hidden;
   text-overflow: ellipsis;
 
-  @include light-theme {
-    color: $color-white;
+  @include mixins.light-theme {
+    color: variables.$color-white;
   }
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 }
 
 .module-embedded-contact__contact-name--incoming {
-  color: $color-white;
+  color: variables.$color-white;
 
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 
 .module-embedded-contact__contact-method {
-  @include font-body-2;
+  @include mixins.font-body-2;
 
   margin-top: 3px;
   max-width: 100%;
@@ -2114,19 +2157,19 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   overflow-x: hidden;
   text-overflow: ellipsis;
 
-  @include dark-theme {
-    color: $color-white-alpha-80;
+  @include mixins.dark-theme {
+    color: variables.$color-white-alpha-80;
   }
-  @include light-theme {
-    color: $color-white-alpha-80;
+  @include mixins.light-theme {
+    color: variables.$color-white-alpha-80;
   }
 }
 
 .module-embedded-contact__contact-method--incoming {
-  color: $color-white-alpha-80;
+  color: variables.$color-white-alpha-80;
 
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
 }
 
@@ -2143,28 +2186,30 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
 }
 
 .module-contact-detail__contact-name {
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
 }
 
 .module-contact-detail__contact-method {
-  @include font-body-2;
+  @include mixins.font-body-2;
 
   margin-top: 10px;
 }
 
 .module-contact-detail__send-message {
-  @include button-reset;
+  @include mixins.button-reset;
 
-  border-radius: 4px;
-  background-color: $color-ultramarine;
-  display: inline-block;
-  padding: 6px;
-  margin-top: 20px;
+  & {
+    border-radius: 4px;
+    background-color: variables.$color-ultramarine;
+    display: inline-block;
+    padding: 6px;
+    margin-top: 20px;
 
-  color: $color-white;
+    color: variables.$color-white;
 
-  flex-direction: column;
-  align-items: center;
+    flex-direction: column;
+    align-items: center;
+  }
 }
 
 .module-contact-detail__send-message__inner {
@@ -2172,7 +2217,7 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   align-items: center;
   padding-inline-end: 5px;
 
-  @include font-body-2-bold;
+  @include mixins.font-body-2-bold;
 }
 
 .module-contact-detail__send-message__bubble-icon {
@@ -2180,11 +2225,17 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   width: 18px;
   display: inline-block;
   margin-inline-end: 5px;
-  @include light-theme {
-    @include color-svg('../images/icons/v3/chat/chat.svg', $color-white);
+  @include mixins.light-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/chat/chat.svg',
+      variables.$color-white
+    );
   }
-  @include dark-theme {
-    @include color-svg('../images/icons/v3/chat/chat.svg', $color-white);
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/chat/chat.svg',
+      variables.$color-white
+    );
   }
 }
 
@@ -2193,18 +2244,18 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   margin-top: 15px;
   padding-top: 8px;
 
-  @include light-theme {
-    border-top: 1px solid $color-gray-05;
+  @include mixins.light-theme {
+    border-top: 1px solid variables.$color-gray-05;
   }
-  @include dark-theme {
-    border-top: 1px solid $color-gray-75;
+  @include mixins.dark-theme {
+    border-top: 1px solid variables.$color-gray-75;
   }
 }
 
 .module-contact-detail__additional-contact__type {
-  @include font-caption-bold;
+  @include mixins.font-caption-bold;
 
-  color: $color-gray-45;
+  color: variables.$color-gray-45;
 
   margin-bottom: 3px;
 }
@@ -2215,11 +2266,11 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   outline: none;
 
   &:focus {
-    @include keyboard-mode {
-      background: $color-selected-message-background-light;
+    @include mixins.keyboard-mode {
+      background: variables.$color-selected-message-background-light;
     }
-    @include dark-keyboard-mode {
-      background: $color-selected-message-background-dark;
+    @include mixins.dark-keyboard-mode {
+      background: variables.$color-selected-message-background-dark;
     }
   }
 }
@@ -2241,13 +2292,13 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   cursor: pointer;
 
   &:focus {
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       outline: 0;
     }
   }
 
   &:focus &__message {
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       opacity: 1;
     }
   }
@@ -2256,11 +2307,13 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
     opacity: 0.8;
   }
 
-  @include light-theme {
-    color: $color-gray-60;
-  }
-  @include dark-theme {
-    color: $color-gray-05;
+  & {
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
+    }
+    @include mixins.dark-theme {
+      color: variables.$color-gray-05;
+    }
   }
 
   &__icon-container {
@@ -2277,16 +2330,16 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
     display: inline-block;
     opacity: 0.6;
 
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v2/error-solid-24.svg',
-        $color-gray-60
+        variables.$color-gray-60
       );
     }
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v2/error-solid-24.svg',
-        $color-gray-05
+        variables.$color-gray-05
       );
     }
   }
@@ -2312,24 +2365,24 @@ $timer-icons: '55', '50', '45', '40', '35', '30', '25', '20', '15', '10', '05',
   margin-bottom: 2px;
   vertical-align: middle;
 
-  @include light-theme {
-    @include color-svg(
+  @include mixins.light-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/person/person-circle-compact.svg',
-      $color-gray-60
+      variables.$color-gray-60
     );
   }
-  @include dark-theme {
-    @include color-svg(
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/person/person-circle-compact.svg',
-      $color-gray-25
+      variables.$color-gray-25
     );
   }
 
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/person/person-circle-compact.svg',
-        $color-ultramarine
+        variables.$color-ultramarine
       );
     }
   }
@@ -2398,7 +2451,7 @@ button.ConversationDetails__action-button {
 }
 
 .module-attachment-section__header {
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
 }
 
 .module-attachment-section__items {
@@ -2417,27 +2470,29 @@ button.ConversationDetails__action-button {
 }
 
 .module-document-list-item--with-separator {
-  @include light-theme {
-    border-bottom: 1px solid $color-gray-02;
+  @include mixins.light-theme {
+    border-bottom: 1px solid variables.$color-gray-02;
   }
-  @include dark-theme {
-    border-bottom: 1px solid $color-gray-75;
+  @include mixins.dark-theme {
+    border-bottom: 1px solid variables.$color-gray-75;
   }
 }
 
 .module-document-list-item__content {
-  @include button-reset;
-  width: 100%;
-  height: 100%;
+  @include mixins.button-reset;
+  & {
+    width: 100%;
+    height: 100%;
 
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  align-items: center;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+  }
 
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
-      box-shadow: 0px 0px 0px 2px $color-ultramarine;
+      box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
     }
   }
 }
@@ -2447,7 +2502,7 @@ button.ConversationDetails__action-button {
 
   width: 48px;
   height: 48px;
-  @include color-svg('../images/file.svg', $color-gray-45);
+  @include mixins.color-svg('../images/file.svg', variables.$color-gray-45);
 }
 
 .module-document-list-item__metadata {
@@ -2461,7 +2516,7 @@ button.ConversationDetails__action-button {
 .module-document-list-item__file-size {
   display: inline-block;
   margin-top: 8px;
-  @include font-body-2;
+  @include mixins.font-body-2;
 }
 
 .module-document-list-item__date {
@@ -2472,18 +2527,19 @@ button.ConversationDetails__action-button {
 // Module: Media Grid Item
 
 .module-media-grid-item {
-  @include button-reset;
+  @include mixins.button-reset;
+  & {
+    height: 94px;
+    width: 94px;
+    background-color: variables.$color-gray-05;
+    margin-inline-end: 4px;
+    margin-bottom: 4px;
+    position: relative;
+  }
 
-  height: 94px;
-  width: 94px;
-  background-color: $color-gray-05;
-  margin-inline-end: 4px;
-  margin-bottom: 4px;
-  position: relative;
-
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
-      box-shadow: 0px 0px 0px 2px $color-ultramarine;
+      box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
     }
   }
 }
@@ -2502,7 +2558,7 @@ button.ConversationDetails__action-button {
 }
 
 .module-media-grid-item__icon-image {
-  @include color-svg('../images/image.svg', $color-gray-45);
+  @include mixins.color-svg('../images/image.svg', variables.$color-gray-45);
 }
 
 .module-media-grid-item__image-container {
@@ -2510,29 +2566,29 @@ button.ConversationDetails__action-button {
 }
 
 .module-media-grid-item__circle-overlay {
-  @include position-absolute-center;
+  @include mixins.position-absolute-center;
   width: 42px;
   height: 42px;
-  background-color: $color-white;
+  background-color: variables.$color-white;
   border-radius: 21px;
 }
 
 .module-media-grid-item__play-overlay {
-  @include position-absolute-center;
+  @include mixins.position-absolute-center;
   height: 24px;
   width: 24px;
-  @include color-svg(
+  @include mixins.color-svg(
     '../images/icons/v3/play/play-fill.svg',
-    $color-ultramarine
+    variables.$color-ultramarine
   );
 }
 
 .module-media-grid-item__icon-video {
-  @include color-svg('../images/movie.svg', $color-gray-45);
+  @include mixins.color-svg('../images/movie.svg', variables.$color-gray-45);
 }
 
 .module-media-grid-item__icon-generic {
-  @include color-svg('../images/file.svg', $color-gray-45);
+  @include mixins.color-svg('../images/file.svg', variables.$color-gray-45);
 }
 
 /* Module: Empty State*/
@@ -2543,9 +2599,9 @@ button.ConversationDetails__action-button {
   align-items: center;
   flex-grow: 1;
 
-  @include font-title-1;
+  @include mixins.font-title-1;
 
-  color: $color-gray-45;
+  color: variables.$color-gray-45;
 }
 
 // Module: Message Request Actions
@@ -2554,29 +2610,29 @@ button.ConversationDetails__action-button {
   padding-block: 8px 12px;
   padding-inline: 16px;
 
-  @include light-theme {
-    background: $color-white;
+  @include mixins.light-theme {
+    background: variables.$color-white;
   }
 
-  @include dark-theme {
-    background: $color-gray-95;
+  @include mixins.dark-theme {
+    background: variables.$color-gray-95;
   }
 
   &__message {
-    @include font-body-2;
+    @include mixins.font-body-2;
     text-align: center;
     margin-bottom: 12px;
 
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
 
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
 
     &__name {
-      @include font-body-2-bold;
+      @include mixins.font-body-2-bold;
     }
 
     &__learn-more {
@@ -2624,19 +2680,19 @@ button.ConversationDetails__action-button {
     border-radius: 48px;
     height: 48px;
     width: 48px;
-    background-color: $color-black-alpha-70;
+    background-color: variables.$color-black-alpha-70;
   }
 
   &:hover {
     span {
-      background-color: $color-black-alpha-80;
+      background-color: variables.$color-black-alpha-80;
     }
   }
 
   &:focus {
     span {
-      background-color: $color-gray-75;
-      border: 4px solid $color-ultramarine;
+      background-color: variables.$color-gray-75;
+      border: 4px solid variables.$color-ultramarine;
       box-sizing: border-box;
       outline: none;
     }
@@ -2649,7 +2705,10 @@ button.ConversationDetails__action-button {
     height: 24px;
     width: 24px;
 
-    @include color-svg('../images/icons/v3/arrow/arrow-down.svg', $color-white);
+    @include mixins.color-svg(
+      '../images/icons/v3/arrow/arrow-down.svg',
+      variables.$color-white
+    );
   }
 }
 
@@ -2663,8 +2722,8 @@ button.ConversationDetails__action-button {
     height: 24px;
     width: 24px;
 
-    @include font-body-1;
-    color: $color-white;
+    @include mixins.font-body-1;
+    color: variables.$color-white;
   }
 }
 
@@ -2683,7 +2742,7 @@ button.ConversationDetails__action-button {
   }
 
   &--spinner {
-    background-color: $color-gray-75;
+    background-color: variables.$color-gray-75;
     border-radius: 48px;
     height: 48px;
     width: 48px;
@@ -2695,16 +2754,16 @@ button.ConversationDetails__action-button {
       }
 
       &__arc {
-        background-color: $color-gray-75;
+        background-color: variables.$color-gray-75;
       }
 
       &__circle {
-        background-color: $color-white;
+        background-color: variables.$color-white;
       }
 
-      @include dark-theme {
+      @include mixins.dark-theme {
         &__arc {
-          background-color: $color-gray-75;
+          background-color: variables.$color-gray-75;
         }
       }
     }
@@ -2712,11 +2771,11 @@ button.ConversationDetails__action-button {
 }
 
 .module-image--with-background {
-  @include light-theme {
-    background-color: $color-white;
+  @include mixins.light-theme {
+    background-color: variables.$color-white;
   }
-  @include dark-theme {
-    background-color: $color-black;
+  @include mixins.dark-theme {
+    background-color: variables.$color-black;
   }
 }
 
@@ -2731,16 +2790,18 @@ button.ConversationDetails__action-button {
 }
 
 .module-image__border-overlay {
-  @include button-reset;
+  @include mixins.button-reset;
 
-  width: 100%;
-  cursor: inherit;
+  & {
+    width: 100%;
+    cursor: inherit;
 
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  inset-inline: 0;
-  z-index: $z-index-above-base;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    inset-inline: 0;
+    z-index: variables.$z-index-above-base;
+  }
 }
 
 .module-image__border-overlay--with-click-handler {
@@ -2748,11 +2809,11 @@ button.ConversationDetails__action-button {
 }
 
 .module-image__border-overlay--with-border {
-  @include light-theme {
-    box-shadow: inset 0px 0px 0px 1px $color-black-alpha-085;
+  @include mixins.light-theme {
+    box-shadow: inset 0px 0px 0px 1px variables.$color-black-alpha-085;
   }
-  @include dark-theme {
-    box-shadow: inset 0px 0px 0px 1px $color-white-alpha-20;
+  @include mixins.dark-theme {
+    box-shadow: inset 0px 0px 0px 1px variables.$color-white-alpha-20;
   }
 }
 
@@ -2764,8 +2825,8 @@ button.ConversationDetails__action-button {
     padding-block: 2px;
     padding-inline: 8px;
 
-    color: $color-white;
-    background: $color-black-alpha-70;
+    color: variables.$color-white;
+    background: variables.$color-black-alpha-70;
 
     /* The height is: 14px + 2x2px from the padding */
     border-radius: 9px;
@@ -2782,13 +2843,13 @@ button.ConversationDetails__action-button {
 }
 
 button.module-image__border-overlay:focus {
-  @include keyboard-mode {
-    box-shadow: inset 0px 0px 0px 2px $color-ultramarine;
+  @include mixins.keyboard-mode {
+    box-shadow: inset 0px 0px 0px 2px variables.$color-ultramarine;
   }
 }
 
 .module-image__border-overlay--dark {
-  background-color: $color-black-alpha-20;
+  background-color: variables.$color-black-alpha-20;
 }
 
 .module-image__loading-placeholder {
@@ -2796,11 +2857,11 @@ button.module-image__border-overlay:focus {
   flex-direction: row;
   align-items: center;
 
-  @include light-theme {
-    background-color: $color-black-alpha-20;
+  @include mixins.light-theme {
+    background-color: variables.$color-black-alpha-20;
   }
-  @include dark-theme {
-    background-color: $color-white-alpha-20;
+  @include mixins.dark-theme {
+    background-color: variables.$color-white-alpha-20;
   }
 }
 
@@ -2832,26 +2893,26 @@ button.module-image__border-overlay:focus {
   );
   position: absolute;
   bottom: 0;
-  z-index: $z-index-base;
+  z-index: variables.$z-index-base;
   inset-inline: 0;
 }
 
 .module-image__play-overlay__circle {
-  @include position-absolute-center;
+  @include mixins.position-absolute-center;
   width: 48px;
   height: 48px;
-  background-color: $color-white;
+  background-color: variables.$color-white;
   border-radius: 24px;
 }
 
 .module-image__play-overlay__icon {
-  @include position-absolute-center;
+  @include mixins.position-absolute-center;
 
   height: 24px;
   width: 24px;
-  @include color-svg(
+  @include mixins.color-svg(
     '../images/icons/v3/play/play-fill.svg',
-    $color-ultramarine
+    variables.$color-ultramarine
   );
 }
 
@@ -2860,34 +2921,40 @@ button.module-image__border-overlay:focus {
   top: 0;
   inset-inline: 0;
   bottom: 0;
-  z-index: $z-index-above-above-base;
+  z-index: variables.$z-index-above-above-base;
 
   // This allows click-through to the overlay button behind it
   pointer-events: none;
 
-  color: $color-white;
+  color: variables.$color-white;
 
-  @include font-body-1;
+  @include mixins.font-body-1;
 
   text-align: center;
 }
 
 .module-image__close-button {
-  @include staged-attachment-close-button;
+  @include mixins.staged-attachment-close-button;
 
   &::before {
     content: '';
     display: block;
     width: 16px;
     height: 16px;
-    @include color-svg('../images/icons/v3/x/x-compact.svg', $color-white);
+    @include mixins.color-svg(
+      '../images/icons/v3/x/x-compact.svg',
+      variables.$color-white
+    );
   }
-  background-image: url('../images/icons/v3/x/x-compact.svg');
-  filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.6));
 
-  @include keyboard-mode {
+  & {
+    background-image: url('../images/icons/v3/x/x-compact.svg');
+    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.6));
+  }
+
+  @include mixins.keyboard-mode {
     &:focus {
-      outline: 2px solid $color-ultramarine;
+      outline: 2px solid variables.$color-ultramarine;
     }
   }
 }
@@ -2949,14 +3016,14 @@ button.module-image__border-overlay:focus {
   opacity: 0.4;
   will-change: transform, opacity;
 
-  @include dark-theme {
-    background-color: $color-white;
+  @include mixins.dark-theme {
+    background-color: variables.$color-white;
   }
-  @include light-theme {
-    background-color: $color-gray-60;
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-60;
   }
 
-  @include only-when-page-is-visible {
+  @include mixins.only-when-page-is-visible {
     animation: {
       name: typing-animation;
       duration: 1600ms;
@@ -2967,16 +3034,16 @@ button.module-image__border-overlay:focus {
 }
 
 .module-left-pane .module-typing-animation__dot {
-  @include only-when-page-is-visible {
+  @include mixins.only-when-page-is-visible {
     animation-name: typing-animation-bare;
   }
 }
 
 .module-typing-animation__dot--light {
-  background-color: $color-white;
+  background-color: variables.$color-white;
 
-  @include light-theme {
-    background-color: $color-gray-60;
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-60;
   }
 }
 
@@ -3026,7 +3093,7 @@ button.module-image__border-overlay:focus {
 
 .module-attachments__edit-icon {
   align-items: center;
-  background: $color-black-alpha-60;
+  background: variables.$color-black-alpha-60;
   border-radius: 100%;
   display: flex;
   height: 36px;
@@ -3040,13 +3107,15 @@ button.module-image__border-overlay:focus {
   width: 36px;
 
   &::after {
-    @include color-svg(
+    @include mixins.color-svg(
       '../images/icons/v3/edit/edit-compact.svg',
-      $color-white
+      variables.$color-white
     );
-    content: '';
-    height: 20px;
-    width: 20px;
+    & {
+      content: '';
+      height: 20px;
+      width: 20px;
+    }
   }
 }
 
@@ -3064,27 +3133,29 @@ button.module-image__border-overlay:focus {
 .module-attachments__close-button {
   $icon: '../images/icons/v3/x/x.svg';
 
-  @include button-reset;
+  @include mixins.button-reset;
 
-  position: absolute;
-  top: 8px;
-  inset-inline-end: 16px;
+  & {
+    position: absolute;
+    top: 8px;
+    inset-inline-end: 16px;
 
-  width: 20px;
-  height: 20px;
+    width: 20px;
+    height: 20px;
 
-  z-index: $z-index-above-base;
+    z-index: variables.$z-index-above-base;
 
-  @include light-theme {
-    @include color-svg($icon, $color-black);
-  }
-  @include dark-theme {
-    @include color-svg($icon, $color-white);
+    @include mixins.light-theme {
+      @include mixins.color-svg($icon, variables.$color-black);
+    }
+    @include mixins.dark-theme {
+      @include mixins.color-svg($icon, variables.$color-white);
+    }
   }
 
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
-      @include color-svg($icon, $color-ultramarine);
+      @include mixins.color-svg($icon, variables.$color-ultramarine);
     }
   }
 }
@@ -3106,7 +3177,7 @@ button.module-image__border-overlay:focus {
   &.module-image::before {
     background: linear-gradient(
       180deg,
-      $color-black-alpha-30 0%,
+      variables.$color-black-alpha-30 0%,
       transparent 100%
     );
     content: '';
@@ -3134,25 +3205,33 @@ button.module-image__border-overlay:focus {
   vertical-align: middle;
   white-space: nowrap;
 
-  @include light-theme {
-    box-shadow: inset 0px 0px 0px 1px $color-black-alpha-20;
-    background-color: $color-gray-05;
+  @include mixins.light-theme {
+    box-shadow: inset 0px 0px 0px 1px variables.$color-black-alpha-20;
+    background-color: variables.$color-gray-05;
   }
-  @include dark-theme {
-    box-shadow: inset 0px 0px 0px 1px $color-gray-45;
-    background-color: $color-gray-75;
-    color: $color-gray-02;
+  @include mixins.dark-theme {
+    box-shadow: inset 0px 0px 0px 1px variables.$color-gray-45;
+    background-color: variables.$color-gray-75;
+    color: variables.$color-gray-02;
   }
 }
 
 .module-staged-generic-attachment__close-button {
-  @include staged-attachment-close-button;
+  @include mixins.staged-attachment-close-button;
 
-  @include light-theme {
-    @include color-svg('../images/icons/v3/x/x-compact.svg', $color-black);
-  }
-  @include dark-theme {
-    @include color-svg('../images/icons/v3/x/x-compact.svg', $color-gray-45);
+  & {
+    @include mixins.light-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/x/x-compact.svg',
+        variables.$color-black
+      );
+    }
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/x/x-compact.svg',
+        variables.$color-gray-45
+      );
+    }
   }
 }
 
@@ -3187,11 +3266,11 @@ button.module-image__border-overlay:focus {
   white-space: nowrap;
   text-overflow: clip;
 
-  color: $color-gray-90;
+  color: variables.$color-gray-90;
 }
 
 .module-staged-generic-attachment__filename {
-  @include font-caption;
+  @include mixins.font-caption;
 
   margin: 7px;
   margin-top: 5px;
@@ -3208,58 +3287,60 @@ button.module-image__border-overlay:focus {
 // Module: Staged Placeholder Attachment
 
 .module-staged-placeholder-attachment {
-  @include button-reset;
+  @include mixins.button-reset;
 
-  margin: 1px;
-  border-radius: 4px;
+  & {
+    margin: 1px;
+    border-radius: 4px;
 
-  height: 120px;
-  width: 120px;
-  display: inline-block;
-  vertical-align: middle;
-  position: relative;
+    height: 120px;
+    width: 120px;
+    display: inline-block;
+    vertical-align: middle;
+    position: relative;
 
-  @include light-theme {
-    border: 1px solid $color-gray-25;
-    &:hover {
-      background: $color-gray-05;
+    @include mixins.light-theme {
+      border: 1px solid variables.$color-gray-25;
+      &:hover {
+        background: variables.$color-gray-05;
+      }
     }
-  }
-  @include keyboard-mode {
-    &:focus {
-      box-shadow: inset 0 0 0 2px $color-ultramarine;
+    @include mixins.keyboard-mode {
+      &:focus {
+        box-shadow: inset 0 0 0 2px variables.$color-ultramarine;
+      }
     }
   }
 
-  @include dark-theme {
-    border: 1px solid $color-gray-60;
+  @include mixins.dark-theme {
+    border: 1px solid variables.$color-gray-60;
 
     &:hover {
-      background: $color-gray-75;
+      background: variables.$color-gray-75;
     }
   }
-  @include dark-keyboard-mode {
+  @include mixins.dark-keyboard-mode {
     &:focus {
-      box-shadow: inset 0 0 0 2px $color-ultramarine;
+      box-shadow: inset 0 0 0 2px variables.$color-ultramarine;
     }
   }
 }
 
 .module-staged-placeholder-attachment__plus-icon {
-  @include position-absolute-center;
+  @include mixins.position-absolute-center;
   height: 28px;
   width: 28px;
 
-  @include light-theme {
-    @include color-svg(
+  @include mixins.light-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/plus/plus-light.svg',
-      $color-gray-45
+      variables.$color-gray-45
     );
   }
-  @include dark-theme {
-    @include color-svg(
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/plus/plus-light.svg',
-      $color-gray-60
+      variables.$color-gray-60
     );
   }
 }
@@ -3272,13 +3353,13 @@ button.module-image__border-overlay:focus {
   &__label {
     margin-block: 0 7px;
     margin-inline: 0;
-    @include font-subtitle;
+    @include mixins.font-subtitle;
 
-    @include light-theme() {
-      color: $color-gray-60;
+    @include mixins.light-theme() {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme() {
-      color: $color-gray-25;
+    @include mixins.dark-theme() {
+      color: variables.$color-gray-25;
     }
   }
 
@@ -3286,7 +3367,7 @@ button.module-image__border-overlay:focus {
     display: flex;
     gap: 9px;
     align-items: center;
-    @include font-body-2;
+    @include mixins.font-body-2;
     padding-block: 22px;
     padding-inline: 7px;
     padding-inline-start: 12px;
@@ -3294,13 +3375,13 @@ button.module-image__border-overlay:focus {
     margin-block: 0;
     margin-inline: -4px;
 
-    @include light-theme() {
-      background: $color-white-alpha-60;
-      color: $color-gray-90;
+    @include mixins.light-theme() {
+      background: variables.$color-white-alpha-60;
+      color: variables.$color-gray-90;
     }
-    @include dark-theme() {
-      background: $color-white-alpha-20;
-      color: $color-white;
+    @include mixins.dark-theme() {
+      background: variables.$color-white-alpha-20;
+      color: variables.$color-white;
     }
 
     &::before {
@@ -3309,28 +3390,31 @@ button.module-image__border-overlay:focus {
       flex-shrink: 0;
       width: 16px;
       height: 16px;
-      @include color-svg('../images/icons/v3/info/info.svg', currentcolor);
+      @include mixins.color-svg(
+        '../images/icons/v3/info/info.svg',
+        currentcolor
+      );
     }
   }
 
   &__note {
     margin-block: 9px 0;
     margin-inline: 0;
-    @include font-body-1;
+    @include mixins.font-body-1;
   }
 
   &--outgoing &__label {
-    @include light-theme() {
-      color: $color-white-alpha-80;
+    @include mixins.light-theme() {
+      color: variables.$color-white-alpha-80;
     }
-    @include dark-theme() {
-      color: $color-white-alpha-80;
+    @include mixins.dark-theme() {
+      color: variables.$color-white-alpha-80;
     }
   }
 
   &--outgoing &__check_device_box {
-    background: $color-white-alpha-20;
-    color: $color-white;
+    background: variables.$color-white-alpha-20;
+    color: variables.$color-white;
   }
 }
 
@@ -3348,28 +3432,37 @@ button.module-image__border-overlay:focus {
   top: 0;
   inset-inline-start: 0;
 
-  z-index: $z-index-above-base;
+  z-index: variables.$z-index-above-base;
   height: 100%;
   width: 100%;
 
-  @include color-svg('../images/spinner-track-56.svg', $color-white-alpha-40);
+  @include mixins.color-svg(
+    '../images/spinner-track-56.svg',
+    variables.$color-white-alpha-40
+  );
 }
 .module-spinner__arc {
   position: absolute;
   top: 0;
   inset-inline-start: 0;
 
-  z-index: $z-index-above-above-base;
+  z-index: variables.$z-index-above-above-base;
   height: 100%;
   width: 100%;
 
   animation: rotate 1000ms linear infinite;
 
-  @include light-theme {
-    @include color-svg('../images/spinner-56.svg', $color-gray-60);
+  @include mixins.light-theme {
+    @include mixins.color-svg(
+      '../images/spinner-56.svg',
+      variables.$color-gray-60
+    );
   }
-  @include dark-theme {
-    @include color-svg('../images/spinner-56.svg', $color-gray-05);
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
+      '../images/spinner-56.svg',
+      variables.$color-gray-05
+    );
   }
 }
 
@@ -3386,7 +3479,7 @@ button.module-image__border-overlay:focus {
   -webkit-mask-size: 100%;
 
   // For specificity
-  @include dark-theme {
+  @include mixins.dark-theme {
     -webkit-mask: url('../images/spinner-track-24.svg') no-repeat center;
     -webkit-mask-size: 100%;
   }
@@ -3396,81 +3489,81 @@ button.module-image__border-overlay:focus {
   -webkit-mask-size: 100%;
 
   // For specificity
-  @include dark-theme {
+  @include mixins.dark-theme {
     -webkit-mask: url('../images/spinner-24.svg') no-repeat center;
     -webkit-mask-size: 100%;
   }
 }
 
 .module-spinner__circle--incoming {
-  background-color: $color-white-alpha-40;
+  background-color: variables.$color-white-alpha-40;
 }
 .module-spinner__arc--incoming {
-  @include light-theme {
-    background-color: $color-gray-60;
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    background-color: $color-gray-02;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-02;
   }
 }
 
 .module-spinner__circle--outgoing {
-  @include light-theme {
-    background-color: $color-white-alpha-40;
+  @include mixins.light-theme {
+    background-color: variables.$color-white-alpha-40;
   }
-  @include dark-theme {
-    background-color: $color-white-alpha-40;
+  @include mixins.dark-theme {
+    background-color: variables.$color-white-alpha-40;
   }
 }
 .module-spinner__arc--outgoing {
-  @include light-theme {
-    background-color: $color-white;
+  @include mixins.light-theme {
+    background-color: variables.$color-white;
   }
-  @include dark-theme {
-    background-color: $color-gray-05;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-05;
   }
 }
 
 .module-spinner__circle--on-avatar {
-  background-color: $color-white-alpha-40;
+  background-color: variables.$color-white-alpha-40;
 }
 .module-spinner__circle--on-background {
-  @include light-theme {
-    background-color: $color-gray-05;
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-05;
   }
-  @include dark-theme {
-    background-color: $color-gray-75;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-75;
   }
 }
 .module-spinner__arc--on-background {
-  @include light-theme {
-    background-color: $color-gray-60;
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    background-color: $color-gray-25;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-25;
   }
 }
 
 .module-spinner__circle--on-primary-button {
-  background-color: $color-white-alpha-40;
+  background-color: variables.$color-white-alpha-40;
 }
 
 .module-spinner__circle--on-progress-dialog {
-  @include light-theme {
-    background-color: $color-white;
+  @include mixins.light-theme {
+    background-color: variables.$color-white;
   }
-  @include dark-theme {
-    background-color: $color-gray-80;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-80;
   }
 }
 .module-spinner__arc--on-progress-dialog {
-  background-color: $color-ultramarine;
+  background-color: variables.$color-ultramarine;
 }
 .module-spinner__arc--on-avatar {
-  background-color: $color-white;
+  background-color: variables.$color-white;
 }
 .module-spinner__arc--on-primary-button {
-  background-color: $color-white;
+  background-color: variables.$color-white;
 }
 
 // Module: Reaction Viewer
@@ -3482,14 +3575,16 @@ button.module-image__border-overlay:focus {
   display: flex;
   flex-direction: column;
 
-  @include popper-shadow();
+  @include mixins.popper-shadow();
 
-  @include light-theme() {
-    background: $color-white;
-  }
+  & {
+    @include mixins.light-theme() {
+      background: variables.$color-white;
+    }
 
-  @include dark-theme() {
-    background: $color-gray-75;
+    @include mixins.dark-theme() {
+      background: variables.$color-gray-75;
+    }
   }
 
   &__header {
@@ -3522,36 +3617,36 @@ button.module-image__border-overlay:focus {
       &:focus {
         outline: none;
       }
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus {
-          box-shadow: 0px 0px 0px 2px $color-ultramarine;
+          box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
         }
       }
 
       background: none;
 
       &--selected {
-        @include light-theme() {
-          background: $color-gray-05;
+        @include mixins.light-theme() {
+          background: variables.$color-gray-05;
         }
 
-        @include dark-theme() {
-          background: $color-gray-60;
+        @include mixins.dark-theme() {
+          background: variables.$color-gray-60;
         }
       }
 
       &__count,
       &__all {
-        @include font-body-2-bold();
+        @include mixins.font-body-2-bold();
 
         white-space: nowrap;
 
-        @include light-theme() {
-          color: $color-gray-90;
+        @include mixins.light-theme() {
+          color: variables.$color-gray-90;
         }
 
-        @include dark-theme() {
-          color: $color-gray-05;
+        @include mixins.dark-theme() {
+          color: variables.$color-gray-05;
         }
       }
 
@@ -3585,19 +3680,19 @@ button.module-image__border-overlay:focus {
       }
 
       &__name {
-        @include font-body-1-bold();
+        @include mixins.font-body-1-bold();
         flex-grow: 1;
         margin-inline-start: 8px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
 
-        @include light-theme() {
-          color: $color-gray-90;
+        @include mixins.light-theme() {
+          color: variables.$color-gray-90;
         }
 
-        @include dark-theme() {
-          color: $color-gray-05;
+        @include mixins.dark-theme() {
+          color: variables.$color-gray-05;
         }
       }
 
@@ -3620,12 +3715,12 @@ button.module-image__border-overlay:focus {
     position: fixed;
     top: 0;
     inset-inline-start: 0;
-    z-index: $z-index-calling-container;
+    z-index: variables.$z-index-calling-container;
   }
 
   &__container {
     align-items: center;
-    background-color: $calling-background-color;
+    background-color: variables.$calling-background-color;
     display: flex;
     flex-direction: column;
     height: 100vh;
@@ -3635,7 +3730,7 @@ button.module-image__border-overlay:focus {
     left: 0;
     top: 0;
     width: 100%;
-    z-index: $z-index-calling;
+    z-index: variables.$z-index-calling;
   }
 
   &__background {
@@ -3662,10 +3757,10 @@ button.module-image__border-overlay:focus {
   }
 
   &__camera-is-off {
-    @include font-body-2;
-    @include calling-text-shadow;
+    @include mixins.font-body-2;
+    @include mixins.calling-text-shadow;
     align-items: center;
-    color: $color-white;
+    color: variables.$color-white;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
@@ -3675,12 +3770,12 @@ button.module-image__border-overlay:focus {
     text-align: center;
     transition: opacity 100ms ease-out;
     user-select: none;
-    z-index: $z-index-base;
+    z-index: variables.$z-index-base;
 
     &::before {
       content: '';
       display: block;
-      background-color: $color-white;
+      background-color: variables.$color-white;
       -webkit-mask-repeat: no-repeat;
       -webkit-mask-position: center;
       -webkit-mask-size: 100%;
@@ -3723,7 +3818,7 @@ button.module-image__border-overlay:focus {
   animation: {
     name: module-ongoing-call__controls--fade-in;
     duration: 1200ms;
-    timing-function: $ease-out-expo;
+    timing-function: variables.$ease-out-expo;
     fill-mode: forwards;
   }
 }
@@ -3732,7 +3827,7 @@ button.module-image__border-overlay:focus {
   animation: {
     name: module-ongoing-call__controls--fade-out;
     duration: 1200ms;
-    timing-function: $ease-out-expo;
+    timing-function: variables.$ease-out-expo;
     fill-mode: forwards;
   }
   pointer-events: none;
@@ -3748,7 +3843,7 @@ button.module-image__border-overlay:focus {
   $local-preview-height: 80px;
 
   &__remote-video-enabled {
-    background-color: $color-gray-95;
+    background-color: variables.$color-gray-95;
     height: 100%;
     width: 100%;
     &--reconnecting {
@@ -3757,7 +3852,7 @@ button.module-image__border-overlay:focus {
   }
 
   &__remote-video-disabled {
-    background-color: $color-gray-95;
+    background-color: variables.$color-gray-95;
     height: 100vh;
     width: 100%;
     display: flex;
@@ -3775,18 +3870,20 @@ button.module-image__border-overlay:focus {
 
   &__next-page,
   &__prev-page {
-    @include button-reset;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    height: 32px;
-    width: 32px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    background-color: $color-gray-78;
-    z-index: $z-index-above-above-base;
+    @include mixins.button-reset;
+    & {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      height: 32px;
+      width: 32px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: 50%;
+      background-color: variables.$color-gray-78;
+      z-index: variables.$z-index-above-above-base;
+    }
 
     &--arrow {
       width: 20px;
@@ -3797,9 +3894,9 @@ button.module-image__border-overlay:focus {
   &__next-page {
     inset-inline-end: 4px;
     &--arrow {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/chevron/chevron-right.svg',
-        $color-white
+        variables.$color-white
       );
     }
   }
@@ -3807,9 +3904,9 @@ button.module-image__border-overlay:focus {
   &__prev-page {
     inset-inline-start: 4px;
     &--arrow {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/chevron/chevron-left.svg',
-        $color-white
+        variables.$color-white
       );
     }
   }
@@ -3823,7 +3920,7 @@ button.module-image__border-overlay:focus {
     flex: 1 1 0;
     width: 100%;
     margin-block-start: 24px;
-    z-index: $z-index-above-base;
+    z-index: variables.$z-index-above-base;
     -webkit-app-region: no-drag;
 
     &__grid--wrapper {
@@ -3911,16 +4008,18 @@ button.module-image__border-overlay:focus {
       &__scroll-marker {
         $scroll-marker-selector: &;
 
-        @include smooth-scroll;
+        @include mixins.smooth-scroll;
 
-        display: flex;
-        justify-content: center;
-        inset-inline-start: 0;
-        opacity: 1;
-        position: absolute;
-        transition: opacity 200ms ease-out;
-        width: 100%;
-        z-index: $z-index-above-above-base;
+        & {
+          display: flex;
+          justify-content: center;
+          inset-inline-start: 0;
+          opacity: 1;
+          position: absolute;
+          transition: opacity 200ms ease-out;
+          width: 100%;
+          z-index: variables.$z-index-above-above-base;
+        }
 
         &--hidden {
           opacity: 0;
@@ -3928,33 +4027,37 @@ button.module-image__border-overlay:focus {
 
         &__button {
           &::before {
-            @include color-svg(
+            @include mixins.color-svg(
               '../images/icons/v3/chevron/chevron-down.svg',
-              $color-gray-15
+              variables.$color-gray-15
             );
 
-            content: '';
-            display: block;
-            height: 100%;
-            width: 100%;
+            & {
+              content: '';
+              display: block;
+              height: 100%;
+              width: 100%;
+            }
           }
 
-          background: $color-gray-78;
-          border-radius: 100%;
-          border: 0;
-          height: 24px;
-          padding-inline: 4px;
-          margin-inline: 0;
-          opacity: 0;
-          outline: none;
-          transition: opacity 200ms ease-out;
-          width: 24px;
+          & {
+            background: variables.$color-gray-78;
+            border-radius: 100%;
+            border: 0;
+            height: 24px;
+            padding-inline: 4px;
+            margin-inline: 0;
+            opacity: 0;
+            outline: none;
+            transition: opacity 200ms ease-out;
+            width: 24px;
+          }
         }
 
         &--top {
           top: 0;
           background: linear-gradient(
-            $calling-background-color,
+            variables.$calling-background-color,
             transparent 20px,
             transparent
           );
@@ -3969,7 +4072,7 @@ button.module-image__border-overlay:focus {
           bottom: 0;
           background: linear-gradient(
             to top,
-            $calling-background-color,
+            variables.$calling-background-color,
             transparent 20px,
             transparent
           );
@@ -3987,30 +4090,36 @@ button.module-image__border-overlay:focus {
   }
 
   &__group-call--pagination-tile {
-    @include button-reset;
-    position: absolute;
-    border-radius: 10px;
-    background-color: $color-gray-78;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    @include font-body-1;
-    color: $color-gray-20;
+    @include mixins.button-reset;
+    & {
+      position: absolute;
+      border-radius: 10px;
+      background-color: variables.$color-gray-78;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      @include mixins.font-body-1;
+      color: variables.$color-gray-20;
+    }
     &--next-arrow {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/chevron/chevron-right.svg',
-        $color-gray-20
+        variables.$color-gray-20
       );
-      height: 16px;
-      width: 16px;
+      & {
+        height: 16px;
+        width: 16px;
+      }
     }
     &--prev-arrow {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/chevron/chevron-left.svg',
-        $color-gray-20
+        variables.$color-gray-20
       );
-      height: 16px;
-      width: 16px;
+      & {
+        height: 16px;
+        width: 16px;
+      }
     }
   }
 
@@ -4036,7 +4145,7 @@ button.module-image__border-overlay:focus {
     &:after {
       content: '';
       position: absolute;
-      z-index: $z-index-above-above-base;
+      z-index: variables.$z-index-above-above-base;
       width: 100%;
       height: 100%;
       border: 0 solid transparent;
@@ -4050,7 +4159,7 @@ button.module-image__border-overlay:focus {
     }
     &--speaking:after {
       border-width: 3px;
-      border-color: $color-white;
+      border-color: variables.$color-white;
       // Turn off the transition when the user starts speaking to appear instantly
       transition-duration: 0ms;
       transition-delay: 0ms;
@@ -4058,14 +4167,14 @@ button.module-image__border-overlay:focus {
 
     &__remote-video {
       // The background-color is seen while the video loads.
-      background-color: $color-gray-75;
+      background-color: variables.$color-gray-75;
       &--reconnecting {
         filter: blur(15px);
       }
     }
 
     &-background.module-calling__background--no-avatar {
-      background-color: $color-gray-78;
+      background-color: variables.$color-gray-78;
     }
 
     &-background .module-calling__background--blur {
@@ -4081,23 +4190,25 @@ button.module-image__border-overlay:focus {
       margin-inline: 8px;
       font-size: 12px;
       line-height: 16px;
-      color: $color-white;
+      color: variables.$color-white;
       text-align: center;
-      z-index: $z-index-base;
+      z-index: variables.$z-index-base;
     }
 
     &__more-info {
-      @include button-reset;
-      padding-block: 3px;
-      padding-inline: 10px;
-      border-radius: 16px;
-      background-color: $color-black-alpha-30;
-      color: $color-white;
-      font-size: 12px;
-      line-height: 16px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      z-index: $z-index-above-base;
+      @include mixins.button-reset;
+      & {
+        padding-block: 3px;
+        padding-inline: 10px;
+        border-radius: 16px;
+        background-color: variables.$color-black-alpha-30;
+        color: variables.$color-white;
+        font-size: 12px;
+        line-height: 16px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        z-index: variables.$z-index-above-base;
+      }
 
       &-modal-title {
         -webkit-box-orient: vertical;
@@ -4114,13 +4225,16 @@ button.module-image__border-overlay:focus {
       }
 
       &--icon-blocked {
-        @include color-svg('../images/icons/v3/block/block.svg', $color-white);
+        @include mixins.color-svg(
+          '../images/icons/v3/block/block.svg',
+          variables.$color-white
+        );
       }
 
       &--icon-missing-media-keys {
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/error/error-circle.svg',
-          $color-white
+          variables.$color-white
         );
       }
     }
@@ -4131,13 +4245,16 @@ button.module-image__border-overlay:focus {
       margin-block-end: 12px;
 
       &--blocked {
-        @include color-svg('../images/icons/v3/block/block.svg', $color-white);
+        @include mixins.color-svg(
+          '../images/icons/v3/block/block.svg',
+          variables.$color-white
+        );
       }
 
       &--missing-media-keys {
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/error/error-circle.svg',
-          $color-white
+          variables.$color-white
         );
       }
     }
@@ -4151,7 +4268,7 @@ button.module-image__border-overlay:focus {
       padding-inline: 12px;
       user-select: none;
       width: 100%;
-      z-index: $z-index-above-base;
+      z-index: variables.$z-index-above-base;
     }
 
     &__info {
@@ -4165,7 +4282,7 @@ button.module-image__border-overlay:focus {
         flex-grow: 1;
         font-size: 13px;
         line-height: 18px;
-        color: $color-white;
+        color: variables.$color-white;
         overflow: hidden;
         text-overflow: ellipsis;
         visibility: hidden;
@@ -4174,7 +4291,7 @@ button.module-image__border-overlay:focus {
       }
 
       &--clickable {
-        @include button-reset;
+        @include mixins.button-reset;
       }
     }
 
@@ -4183,12 +4300,12 @@ button.module-image__border-overlay:focus {
     }
 
     &--hand-raised &__info {
-      background: $color-white;
+      background: variables.$color-white;
       border-radius: 40px;
 
       &__contact-name {
         display: none;
-        color: $color-black;
+        color: variables.$color-black;
         margin-inline-end: 12px;
       }
     }
@@ -4207,7 +4324,7 @@ button.module-image__border-overlay:focus {
         background: linear-gradient(
           180deg,
           transparent,
-          $color-black-alpha-60 100%
+          variables.$color-black-alpha-60 100%
         );
       }
     }
@@ -4225,10 +4342,10 @@ button.module-image__border-overlay:focus {
     justify-content: center;
     width: 100%;
     height: 100%;
-    z-index: $z-index-negative;
+    z-index: variables.$z-index-negative;
 
     video {
-      @include lonely-local-video-preview;
+      @include mixins.lonely-local-video-preview;
     }
 
     &--presenting {
@@ -4244,7 +4361,7 @@ button.module-image__border-overlay:focus {
     flex-direction: row-reverse;
     justify-content: space-between;
     width: 100%;
-    z-index: $z-index-above-base;
+    z-index: variables.$z-index-above-base;
 
     &__actions {
       align-items: center;
@@ -4262,10 +4379,10 @@ button.module-image__border-overlay:focus {
       margin-inline: 0 16px;
       overflow: hidden;
       position: relative;
-      width: $calling-local-preview-width;
+      width: variables.$calling-local-preview-width;
 
       &--active {
-        box-shadow: 0px 4px 14px 0px $color-black-alpha-40;
+        box-shadow: 0px 4px 14px 0px variables.$color-black-alpha-40;
       }
 
       &__video {
@@ -4274,7 +4391,7 @@ button.module-image__border-overlay:focus {
 
         video {
           // The background-color is seen while the video loads.
-          background-color: $color-gray-75;
+          background-color: variables.$color-gray-75;
           height: 100%;
           width: 100%;
 
@@ -4289,7 +4406,7 @@ button.module-image__border-overlay:focus {
   }
 
   &__controls {
-    z-index: $z-index-above-above-base;
+    z-index: variables.$z-index-above-above-base;
   }
 
   &__controls--fadeIn {
@@ -4322,7 +4439,7 @@ button.module-image__border-overlay:focus {
 
 .module-calling-pip {
   backface-visibility: hidden;
-  background-color: $color-gray-95;
+  background-color: variables.$color-gray-95;
   border-radius: 4px;
   box-shadow:
     0px 0px 8px rgba(0, 0, 0, 0.05),
@@ -4331,7 +4448,7 @@ button.module-image__border-overlay:focus {
   height: 158px;
   position: fixed;
   width: 120px;
-  z-index: $z-index-calling-pip;
+  z-index: variables.$z-index-calling-pip;
 
   & .module-ongoing-call__group-call-remote-participant {
     border-radius: 0;
@@ -4340,7 +4457,7 @@ button.module-image__border-overlay:focus {
   &__video {
     &--remote {
       align-items: center;
-      background-color: $color-gray-95;
+      background-color: variables.$color-gray-95;
       border-radius: 4px 4px 0 0;
       display: flex;
       height: 120px; // This height should be kept in sync with <CallingPipRemoteVideo>'s hard-coded height.
@@ -4381,47 +4498,51 @@ button.module-image__border-overlay:focus {
 
   &__actions {
     align-items: center;
-    background-color: $color-gray-02;
+    background-color: variables.$color-gray-02;
     border-radius: 0 0 4px 4px;
     display: flex;
     flex-direction: row;
     height: 38px;
     justify-content: space-around;
 
-    @include dark-theme {
-      background-color: $color-gray-65;
+    @include mixins.dark-theme {
+      background-color: variables.$color-gray-65;
     }
   }
 
   &__button {
     &--hangup {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/phone/phone-down-light.svg',
-        $color-gray-75
+        variables.$color-gray-75
       );
-      height: 28px;
-      width: 28px;
-      border: none;
-      @include dark-theme {
-        @include color-svg(
+      & {
+        height: 28px;
+        width: 28px;
+        border: none;
+      }
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/phone/phone-down-light.svg',
-          $color-gray-15
+          variables.$color-gray-15
         );
       }
     }
 
     &--pip {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/pip/pip-maximize-light.svg',
-        $color-gray-75
+        variables.$color-gray-75
       );
-      height: 24px;
-      width: 24px;
-      border: none;
-      @include dark-theme {
-        @include color-svg(
+      & {
+        height: 24px;
+        width: 24px;
+        border: none;
+      }
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/pip/pip-maximize-light.svg',
-          $color-gray-15
+          variables.$color-gray-15
         );
       }
     }
@@ -4433,17 +4554,17 @@ button.module-image__border-overlay:focus {
   flex-direction: column;
   width: 320px;
   height: 440px;
-  max-height: calc(100vh - $CallControls__height - 22px);
+  max-height: calc(100vh - variables.$CallControls__height - 22px);
   padding-block: 5px 0;
   padding-inline: 5px;
   margin-block-end: 85px;
   margin-block-start: 20px;
   margin-inline: auto;
-  background-color: $color-gray-80;
+  background-color: variables.$color-gray-80;
   border-radius: 10px;
-  color: $color-white;
-  filter: drop-shadow(0px 4px 3px $color-black-alpha-20);
-  outline: 1px solid $color-gray-62;
+  color: variables.$color-white;
+  filter: drop-shadow(0px 4px 3px variables.$color-black-alpha-20);
+  outline: 1px solid variables.$color-gray-62;
   overflow: hidden;
 
   &__overlay {
@@ -4456,7 +4577,7 @@ button.module-image__border-overlay:focus {
     padding-inline-start: 15px;
     align-items: flex-end;
     inset-inline-start: 0;
-    z-index: $z-index-calling;
+    z-index: variables.$z-index-calling;
 
     &::after {
       content: '';
@@ -4467,12 +4588,12 @@ button.module-image__border-overlay:focus {
   }
 
   &__title {
-    @include font-body-2-bold;
+    @include mixins.font-body-2-bold;
   }
 
   &__contact-icon {
     margin-inline-start: 0.3em;
-    background-color: $color-gray-25;
+    background-color: variables.$color-gray-25;
   }
 
   &__list {
@@ -4493,20 +4614,22 @@ button.module-image__border-overlay:focus {
   }
 
   &__contact {
-    @include font-body-1;
-    @include button-reset;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    margin-block: 2px;
-    padding-block: 8px;
-    padding-inline-start: 10px;
-    padding-inline-end: 2px;
-    list-style-type: none;
-    border-radius: 6px;
-    cursor: auto;
+    @include mixins.font-body-1;
+    @include mixins.button-reset;
+    & {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      margin-block: 2px;
+      padding-block: 8px;
+      padding-inline-start: 10px;
+      padding-inline-end: 2px;
+      list-style-type: none;
+      border-radius: 6px;
+      cursor: auto;
+    }
     &:hover {
-      background-color: $color-gray-62;
+      background-color: variables.$color-gray-62;
     }
     &[disabled] {
       cursor: auto;
@@ -4539,18 +4662,25 @@ button.module-image__border-overlay:focus {
   }
 
   &__close {
-    @include button-reset;
+    @include mixins.button-reset;
 
-    @include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
+    & {
+      @include mixins.color-svg(
+        '../images/icons/v3/x/x.svg',
+        variables.$color-gray-15
+      );
+    }
 
-    height: 18px;
-    width: 18px;
-    margin-inline-end: 4px;
-    z-index: $z-index-above-base;
+    & {
+      height: 18px;
+      width: 18px;
+      margin-inline-end: 4px;
+      z-index: variables.$z-index-above-base;
+    }
 
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       &:focus {
-        background: $color-ultramarine;
+        background: variables.$color-ultramarine;
       }
     }
   }
@@ -4564,39 +4694,39 @@ button.module-image__border-overlay:focus {
   }
 
   &__hand-raised {
-    @include color-svg(
+    @include mixins.color-svg(
       '../images/icons/v3/raise_hand/raise_hand-light.svg',
-      $color-white
+      variables.$color-white
     );
   }
 
   &__muted {
     &--video {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/video/video-slash-compact-light.svg',
-        $color-white
+        variables.$color-white
       );
     }
 
     &--audio {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/mic/mic-slash-compact-light.svg',
-        $color-white
+        variables.$color-white
       );
     }
   }
 
   &__presenting {
-    @include color-svg(
+    @include mixins.color-svg(
       '../images/icons/v3/share_screen/share_screen-fill-light.svg',
-      $color-white
+      variables.$color-white
     );
   }
 
   &__remove {
-    @include color-svg(
+    @include mixins.color-svg(
       '../images/icons/v3/minus/minus-circle-compact.svg',
-      $color-white
+      variables.$color-white
     );
   }
 }
@@ -4607,8 +4737,8 @@ button.module-calling-participants-list__contact {
 
 .module-call-need-permission-screen {
   align-items: center;
-  background-color: $color-gray-95;
-  color: $color-gray-05;
+  background-color: variables.$color-gray-95;
+  color: variables.$color-gray-05;
   display: flex;
   flex-direction: column;
   height: 100vh;
@@ -4623,7 +4753,7 @@ button.module-calling-participants-list__contact {
     margin-block: 2em;
     margin-inline: 1em;
     max-width: 400px;
-    @include font-body-1;
+    @include mixins.font-body-1;
     text-align: center;
   }
 
@@ -4632,9 +4762,9 @@ button.module-calling-participants-list__contact {
     padding-inline: 1em;
     border: 0;
     border-radius: 4px;
-    @include font-body-1-bold;
-    color: $color-gray-05;
-    background: $color-gray-65;
+    @include mixins.font-body-1-bold;
+    color: variables.$color-gray-05;
+    background: variables.$color-gray-65;
   }
 }
 
@@ -4643,7 +4773,7 @@ button.module-calling-participants-list__contact {
 .module-conversation-list {
   $normal-row-height: 72px;
 
-  @include NavTabs__Scroller;
+  @include mixins.NavTabs__Scroller;
   padding-inline: 10px;
 
   // list tiles in choose-group-members and compose extend to the edge
@@ -4661,32 +4791,34 @@ button.module-calling-participants-list__contact {
 
   &__item {
     &--archive-button {
-      @include button-reset;
+      @include mixins.button-reset;
 
-      align-items: center;
-      display: flex;
-      justify-content: center;
-      border-radius: 10px;
-      height: $normal-row-height;
-      line-height: $normal-row-height;
-      text-align: center;
-      width: 100%;
-      padding-inline: 18px;
-      display: flex;
+      & {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        border-radius: 10px;
+        height: $normal-row-height;
+        line-height: $normal-row-height;
+        text-align: center;
+        width: 100%;
+        padding-inline: 18px;
+        display: flex;
 
-      @include light-theme {
-        color: $color-gray-60;
+        @include mixins.light-theme {
+          color: variables.$color-gray-60;
 
-        &:hover,
-        &:focus {
-          background-color: $color-gray-05;
+          &:hover,
+          &:focus {
+            background-color: variables.$color-gray-05;
+          }
         }
-      }
-      @include dark-theme {
-        color: $color-gray-25;
-        &:hover,
-        &:focus {
-          background-color: $color-gray-75;
+        @include mixins.dark-theme {
+          color: variables.$color-gray-25;
+          &:hover,
+          &:focus {
+            background-color: variables.$color-gray-75;
+          }
         }
       }
 
@@ -4697,28 +4829,28 @@ button.module-calling-participants-list__contact {
           width: 24px;
           height: 24px;
 
-          @include light-theme {
-            @include color-svg(
+          @include mixins.light-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/archive/archive.svg',
-              $color-gray-60
+              variables.$color-gray-60
             );
           }
-          @include dark-theme {
-            @include color-svg(
+          @include mixins.dark-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/archive/archive.svg',
-              $color-gray-25
+              variables.$color-gray-25
             );
           }
         }
       }
 
       &__text {
-        @include font-body-1-bold;
+        @include mixins.font-body-1-bold;
         margin-inline: 8px;
       }
 
       &__archived-count {
-        @include font-body-2-bold;
+        @include mixins.font-body-2-bold;
 
         padding: 6px;
         padding-top: 1px;
@@ -4726,13 +4858,13 @@ button.module-calling-participants-list__contact {
         border-radius: 10px;
         white-space: pre;
 
-        @include light-theme {
-          color: $color-gray-60;
-          background-color: $color-gray-05;
+        @include mixins.light-theme {
+          color: variables.$color-gray-60;
+          background-color: variables.$color-gray-05;
         }
-        @include dark-theme {
-          color: $color-gray-25;
-          background-color: $color-gray-75;
+        @include mixins.dark-theme {
+          color: variables.$color-gray-25;
+          background-color: variables.$color-gray-75;
         }
       }
 
@@ -4754,20 +4886,22 @@ button.module-calling-participants-list__contact {
     &--contact-or-conversation {
       $unread-indicator: '#{&}__unread-indicator';
 
-      @include button-reset;
+      @include mixins.button-reset;
 
-      align-items: center;
-      border-radius: 10px;
-      cursor: inherit;
-      display: flex;
-      flex-direction: row;
-      height: $normal-row-height;
-      margin-block: 2px;
-      margin-inline: 0;
-      padding-block: 8px;
-      padding-inline: 14px;
-      user-select: none;
-      width: 100%;
+      & {
+        align-items: center;
+        border-radius: 10px;
+        cursor: inherit;
+        display: flex;
+        flex-direction: row;
+        height: $normal-row-height;
+        margin-block: 2px;
+        margin-inline: 0;
+        padding-block: 8px;
+        padding-inline: 14px;
+        user-select: none;
+        width: 100%;
+      }
 
       #{$unread-indicator} {
         $size: 18px;
@@ -4783,26 +4917,31 @@ button.module-calling-participants-list__contact {
           display: none;
         }
 
-        @include light-theme {
-          background-color: $color-ultramarine;
+        @include mixins.light-theme {
+          background-color: variables.$color-ultramarine;
         }
-        @include dark-theme {
-          background-color: $color-ultramarine-dawn;
+        @include mixins.dark-theme {
+          background-color: variables.$color-ultramarine-dawn;
         }
         &--unread-messages,
         &--marked-unread {
-          @include font-caption-bold;
+          @include mixins.font-caption-bold;
           text-align: center;
           word-break: normal;
           padding-inline: 4px;
           line-height: 100%;
-          color: $color-white;
+          color: variables.$color-white;
           font-weight: 500;
         }
         &--unread-mentions__icon {
-          @include color-svg('../images/icons/v3/at/at.svg', $color-white);
-          width: 12px;
-          height: 12px;
+          @include mixins.color-svg(
+            '../images/icons/v3/at/at.svg',
+            variables.$color-white
+          );
+          & {
+            width: 12px;
+            height: 12px;
+          }
         }
       }
 
@@ -4824,38 +4963,38 @@ button.module-calling-participants-list__contact {
 
       &:hover:not(:disabled, &--disabled, &--is-selected),
       &:focus:not(:disabled, &--disabled, &--is-selected) {
-        @include light-theme {
-          background-color: $color-gray-05;
+        @include mixins.light-theme {
+          background-color: variables.$color-gray-05;
           #{$unread-indicator} {
-            border-color: $color-gray-05;
+            border-color: variables.$color-gray-05;
           }
         }
-        @include dark-theme {
-          background-color: $color-gray-75;
+        @include mixins.dark-theme {
+          background-color: variables.$color-gray-75;
           #{$unread-indicator} {
-            border-color: $color-gray-75;
+            border-color: variables.$color-gray-75;
           }
         }
       }
 
       &--is-selected {
-        @include light-theme {
-          background-color: $color-gray-15;
+        @include mixins.light-theme {
+          background-color: variables.$color-gray-15;
         }
-        @include dark-theme {
-          background-color: $color-gray-65;
+        @include mixins.dark-theme {
+          background-color: variables.$color-gray-65;
         }
       }
 
       &--is-selected &__avatar-container {
-        @include light-theme {
+        @include mixins.light-theme {
           #{$unread-indicator} {
-            border-color: $color-gray-15;
+            border-color: variables.$color-gray-15;
           }
         }
-        @include dark-theme {
+        @include mixins.dark-theme {
           #{$unread-indicator} {
-            border-color: $color-gray-65;
+            border-color: variables.$color-gray-65;
           }
         }
       }
@@ -4867,7 +5006,7 @@ button.module-calling-participants-list__contact {
           $border-width: 3px;
           $size: 21px + $border-width;
 
-          @include rounded-corners;
+          @include mixins.rounded-corners;
           border: $border-width solid transparent;
           height: $size;
           margin: 0;
@@ -4880,11 +5019,11 @@ button.module-calling-participants-list__contact {
             display: flex;
           }
 
-          @include light-theme {
-            border-color: $color-gray-02;
+          @include mixins.light-theme {
+            border-color: variables.$color-gray-02;
           }
-          @include dark-theme {
-            border-color: $color-gray-80;
+          @include mixins.dark-theme {
+            border-color: variables.$color-gray-80;
           }
 
           &--unread-messages,
@@ -4895,11 +5034,11 @@ button.module-calling-participants-list__contact {
             inset-inline-start: -(5px + $border-width);
           }
           &--is-selected {
-            @include light-theme {
-              border-color: $color-gray-15;
+            @include mixins.light-theme {
+              border-color: variables.$color-gray-15;
             }
-            @include dark-theme {
-              border-color: $color-gray-65;
+            @include mixins.dark-theme {
+              border-color: variables.$color-gray-65;
             }
           }
         }
@@ -4932,17 +5071,17 @@ button.module-calling-participants-list__contact {
             flex-grow: 1;
             flex-shrink: 1;
 
-            @include font-body-1-bold;
+            @include mixins.font-body-1-bold;
 
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
 
-            @include light-theme {
-              color: $color-gray-90;
+            @include mixins.light-theme {
+              color: variables.$color-gray-90;
             }
-            @include dark-theme {
-              color: $color-gray-05;
+            @include mixins.dark-theme {
+              color: variables.$color-gray-05;
             }
 
             &__contact-name {
@@ -4963,33 +5102,33 @@ button.module-calling-participants-list__contact {
               min-width: $size;
               width: $size;
 
-              @include light-theme {
-                @include color-svg(
+              @include mixins.light-theme {
+                @include mixins.color-svg(
                   '../images/icons/v3/bell/bell-slash-bold.svg',
-                  $color-gray-45
+                  variables.$color-gray-45
                 );
               }
 
-              @include dark-theme {
-                @include color-svg(
+              @include mixins.dark-theme {
+                @include mixins.color-svg(
                   '../images/icons/v3/bell/bell-slash-bold.svg',
-                  $color-gray-25
+                  variables.$color-gray-25
                 );
               }
             }
           }
 
           &__date {
-            @include font-caption;
+            @include mixins.font-caption;
             display: inline-block;
             flex-shrink: 0;
             margin-inline-start: 6px;
 
-            @include light-theme {
-              color: $color-gray-60;
+            @include mixins.light-theme {
+              color: variables.$color-gray-60;
             }
-            @include dark-theme {
-              color: $color-gray-25;
+            @include mixins.dark-theme {
+              color: variables.$color-gray-25;
             }
           }
         }
@@ -5016,7 +5155,7 @@ button.module-calling-participants-list__contact {
             flex-grow: 1;
             flex-shrink: 1;
 
-            @include font-body-2;
+            @include mixins.font-body-2;
 
             -webkit-box-orient: vertical;
             -webkit-line-clamp: 2;
@@ -5025,11 +5164,11 @@ button.module-calling-participants-list__contact {
             text-overflow: ellipsis;
             text-align: start;
 
-            @include light-theme {
-              color: $color-gray-60;
+            @include mixins.light-theme {
+              color: variables.$color-gray-60;
             }
-            @include dark-theme {
-              color: $color-gray-25;
+            @include mixins.dark-theme {
+              color: variables.$color-gray-25;
             }
 
             .module-conversation-list--width-narrow & {
@@ -5049,7 +5188,7 @@ button.module-calling-participants-list__contact {
                 width: 16px;
                 height: 16px;
                 margin-inline-end: 4px;
-                @include color-svg(
+                @include mixins.color-svg(
                   '../images/icons/v3/block/block.svg',
                   currentColor
                 );
@@ -5057,13 +5196,13 @@ button.module-calling-participants-list__contact {
             }
 
             &__message-request {
-              @include font-body-2-bold;
+              @include mixins.font-body-2-bold;
 
-              @include light-theme {
-                color: $color-gray-60;
+              @include mixins.light-theme {
+                color: variables.$color-gray-60;
               }
-              @include dark-theme {
-                color: $color-gray-25;
+              @include mixins.dark-theme {
+                color: variables.$color-gray-25;
               }
             }
 
@@ -5087,28 +5226,28 @@ button.module-calling-participants-list__contact {
               }
 
               @mixin normal-status-icon($icon) {
-                @include light-theme {
-                  @include color-svg($icon, $color-gray-45);
+                @include mixins.light-theme {
+                  @include mixins.color-svg($icon, variables.$color-gray-45);
                 }
-                @include dark-theme {
-                  @include color-svg($icon, $color-gray-25);
+                @include mixins.dark-theme {
+                  @include mixins.color-svg($icon, variables.$color-gray-25);
                 }
               }
 
               &--sending {
-                @include only-when-page-is-visible {
+                @include mixins.only-when-page-is-visible {
                   animation: rotate 4s linear infinite;
                 }
-                @include light-theme {
-                  @include color-svg(
+                @include mixins.light-theme {
+                  @include mixins.color-svg(
                     '../images/icons/v3/message_status/messagestatus-sending.svg',
-                    $color-gray-60
+                    variables.$color-gray-60
                   );
                 }
-                @include dark-theme {
-                  @include color-svg(
+                @include mixins.dark-theme {
+                  @include mixins.color-svg(
                     '../images/icons/v3/message_status/messagestatus-sending.svg',
-                    $color-gray-45
+                    variables.$color-gray-45
                   );
                 }
               }
@@ -5123,7 +5262,9 @@ button.module-calling-participants-list__contact {
                 @include normal-status-icon(
                   '../images/icons/v3/message_status/messagestatus-delivered.svg'
                 );
-                width: 18px;
+                & {
+                  width: 18px;
+                }
               }
 
               &--read,
@@ -5131,36 +5272,38 @@ button.module-calling-participants-list__contact {
                 @include normal-status-icon(
                   '../images/icons/v3/message_status/messagestatus-read.svg'
                 );
-                width: 18px;
+                & {
+                  width: 18px;
+                }
               }
 
               &--error,
               &--partial-sent {
-                @include light-theme {
-                  @include color-svg(
+                @include mixins.light-theme {
+                  @include mixins.color-svg(
                     '../images/icons/v3/error/error-circle.svg',
-                    $color-accent-red
+                    variables.$color-accent-red
                   );
                 }
-                @include dark-theme {
-                  @include color-svg(
+                @include mixins.dark-theme {
+                  @include mixins.color-svg(
                     '../images/icons/v3/error/error-circle.svg',
-                    $color-accent-red
+                    variables.$color-accent-red
                   );
                 }
               }
 
               &--paused {
-                @include light-theme {
-                  @include color-svg(
+                @include mixins.light-theme {
+                  @include mixins.color-svg(
                     '../images/icons/v3/error/error-circle.svg',
-                    $color-gray-60
+                    variables.$color-gray-60
                   );
                 }
-                @include dark-theme {
-                  @include color-svg(
+                @include mixins.dark-theme {
+                  @include mixins.color-svg(
                     '../images/icons/v3/error/error-circle.svg',
-                    $color-gray-45
+                    variables.$color-gray-45
                   );
                 }
               }
@@ -5174,7 +5317,7 @@ button.module-calling-participants-list__contact {
             }
 
             &__start-new-conversation {
-              @include font-body-1-italic;
+              @include mixins.font-body-1-italic;
             }
           }
         }
@@ -5191,7 +5334,7 @@ button.module-calling-participants-list__contact {
 
       &__checkbox {
         -webkit-appearance: none;
-        background: $color-white;
+        background: variables.$color-white;
         border-radius: 100%;
         height: 20px;
         margin-inline: 16px;
@@ -5199,33 +5342,33 @@ button.module-calling-participants-list__contact {
         min-width: 20px;
         pointer-events: none;
 
-        @include light-theme {
-          border: 1px solid $color-gray-15;
+        @include mixins.light-theme {
+          border: 1px solid variables.$color-gray-15;
         }
-        @include dark-theme {
-          border: 1px solid $color-gray-80;
+        @include mixins.dark-theme {
+          border: 1px solid variables.$color-gray-80;
         }
 
         &:focus {
           outline: none;
         }
 
-        @include keyboard-mode {
+        @include mixins.keyboard-mode {
           &:focus {
             border-width: 2px;
-            border-color: $color-ultramarine;
+            border-color: variables.$color-ultramarine;
             &:checked {
-              box-shadow: inset 0 0 0px 1px $color-white;
+              box-shadow: inset 0 0 0px 1px variables.$color-white;
             }
           }
         }
-        @include dark-keyboard-mode {
+        @include mixins.dark-keyboard-mode {
           &:focus {
             border-width: 2px;
-            border-color: $color-ultramarine-light;
+            border-color: variables.$color-ultramarine-light;
 
             &:checked {
-              box-shadow: inset 0 0 0px 1px $color-black;
+              box-shadow: inset 0 0 0px 1px variables.$color-black;
             }
           }
         }
@@ -5237,7 +5380,7 @@ button.module-calling-participants-list__contact {
         &:checked {
           $icon: '../images/icons/v3/check/check.svg';
 
-          background: $color-ultramarine;
+          background: variables.$color-ultramarine;
           display: flex;
           align-items: center;
           justify-content: center;
@@ -5245,19 +5388,21 @@ button.module-calling-participants-list__contact {
           &::before {
             content: '';
             display: block;
-            @include color-svg($icon, $color-white);
-            width: 13px;
-            height: 13px;
-          }
-
-          @include light-theme {
-            &:disabled {
-              background: $color-gray-15;
+            @include mixins.color-svg($icon, variables.$color-white);
+            & {
+              width: 13px;
+              height: 13px;
             }
           }
-          @include dark-theme {
+
+          @include mixins.light-theme {
             &:disabled {
-              background: $color-gray-45;
+              background: variables.$color-gray-15;
+            }
+          }
+          @include mixins.dark-theme {
+            &:disabled {
+              background: variables.$color-gray-45;
             }
           }
         }
@@ -5275,7 +5420,7 @@ button.module-calling-participants-list__contact {
     }
 
     &--header {
-      @include font-body-1-bold;
+      @include mixins.font-body-1-bold;
 
       align-items: flex-end;
       display: flex;
@@ -5287,12 +5432,12 @@ button.module-calling-participants-list__contact {
       user-select: none;
       white-space: nowrap;
 
-      @include dark-theme {
-        color: $color-gray-05;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-05;
       }
 
       .module-conversation-list--width-narrow & {
-        @include rounded-corners;
+        @include mixins.rounded-corners;
         display: block;
         height: 2px;
         margin-block: 19px;
@@ -5305,12 +5450,12 @@ button.module-calling-participants-list__contact {
         overflow: hidden;
         text-indent: -99999px;
 
-        @include light-theme {
-          background: $color-black-alpha-12;
+        @include mixins.light-theme {
+          background: variables.$color-black-alpha-12;
         }
 
-        @include dark-theme {
-          background: $color-white-alpha-12;
+        @include mixins.dark-theme {
+          background: variables.$color-white-alpha-12;
         }
       }
     }
@@ -5333,12 +5478,12 @@ button.module-calling-participants-list__contact {
   width: 100%;
   position: relative;
 
-  @include light-theme {
-    $background-color: $color-gray-02;
+  @include mixins.light-theme {
+    $background-color: variables.$color-gray-02;
   }
 
-  @include dark-theme {
-    $background-color: $color-gray-80;
+  @include mixins.dark-theme {
+    $background-color: variables.$color-gray-80;
   }
 }
 
@@ -5359,78 +5504,80 @@ button.module-calling-participants-list__contact {
     padding-block: 15px;
 
     &__back-button {
-      @include button-reset;
+      @include mixins.button-reset;
 
-      margin-inline-start: 16px;
+      & {
+        margin-inline-start: 16px;
 
-      width: 20px;
-      height: 20px;
+        width: 20px;
+        height: 20px;
+      }
 
       &:disabled {
         cursor: not-allowed;
       }
 
-      @include light-theme {
+      @include mixins.light-theme {
         &:dir(ltr) {
-          @include color-svg(
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-left.svg',
-            $color-gray-60
+            variables.$color-gray-60
           );
         }
         &:dir(rtl) {
-          @include color-svg(
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-right.svg',
-            $color-gray-60
+            variables.$color-gray-60
           );
         }
       }
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:dir(ltr) {
           &:focus {
-            @include color-svg(
+            @include mixins.color-svg(
               '../images/icons/v3/chevron/chevron-left.svg',
-              $color-ultramarine
+              variables.$color-ultramarine
             );
           }
         }
         &:dir(rtl) {
           &:focus {
-            @include color-svg(
+            @include mixins.color-svg(
               '../images/icons/v3/chevron/chevron-right.svg',
-              $color-ultramarine
+              variables.$color-ultramarine
             );
           }
         }
       }
 
-      @include dark-theme {
+      @include mixins.dark-theme {
         &:dir(ltr) {
-          @include color-svg(
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-left.svg',
-            $color-gray-25
+            variables.$color-gray-25
           );
         }
         &:dir(rtl) {
-          @include color-svg(
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-right.svg',
-            $color-gray-25
+            variables.$color-gray-25
           );
         }
       }
-      @include dark-keyboard-mode {
+      @include mixins.dark-keyboard-mode {
         &:dir(ltr) {
           &:hover {
-            @include color-svg(
+            @include mixins.color-svg(
               '../images/icons/v3/chevron/chevron-left.svg',
-              $color-ultramarine-light
+              variables.$color-ultramarine-light
             );
           }
         }
         &:dir(rtl) {
           &:hover {
-            @include color-svg(
+            @include mixins.color-svg(
               '../images/icons/v3/chevron/chevron-right.svg',
-              $color-ultramarine-light
+              variables.$color-ultramarine-light
             );
           }
         }
@@ -5438,16 +5585,16 @@ button.module-calling-participants-list__contact {
     }
 
     &__text {
-      @include font-body-1-bold;
+      @include mixins.font-body-1-bold;
       flex-grow: 1;
       padding-inline-end: 36px;
       text-align: center;
 
-      @include light-theme {
-        color: $color-gray-90;
+      @include mixins.light-theme {
+        color: variables.$color-gray-90;
       }
-      @include dark-theme {
-        color: $color-gray-05;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-05;
       }
     }
   }
@@ -5480,16 +5627,16 @@ button.module-calling-participants-list__contact {
   display: block;
   width: 20px;
   height: 20px;
-  @include light-theme {
-    @include color-svg(
+  @include mixins.light-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/compose/compose.svg',
-      $color-gray-75
+      variables.$color-gray-75
     );
   }
-  @include dark-theme {
-    @include color-svg(
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/compose/compose.svg',
-      $color-gray-15
+      variables.$color-gray-15
     );
   }
 }
@@ -5498,16 +5645,22 @@ button.module-calling-participants-list__contact {
   display: block;
   width: 20px;
   height: 20px;
-  @include light-theme {
-    @include color-svg('../images/icons/v3/more/more.svg', $color-black);
+  @include mixins.light-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/more/more.svg',
+      variables.$color-black
+    );
   }
-  @include dark-theme {
-    @include color-svg('../images/icons/v3/more/more.svg', $color-gray-15);
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/more/more.svg',
+      variables.$color-gray-15
+    );
   }
 }
 
 .module-left-pane__archive-helper-text {
-  @include font-body-2;
+  @include mixins.font-body-2;
 
   flex-grow: 0;
   flex-shrink: 0;
@@ -5515,13 +5668,13 @@ button.module-calling-participants-list__contact {
 
   padding: 1em;
 
-  @include light-theme {
-    color: $color-gray-60;
-    background-color: $color-gray-05;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
+    background-color: variables.$color-gray-05;
   }
-  @include dark-theme {
-    color: $color-gray-25;
-    background-color: $color-gray-75;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
+    background-color: variables.$color-gray-75;
   }
 }
 .module-left-pane__no-search-results__unread-header {
@@ -5556,11 +5709,11 @@ button.module-calling-participants-list__contact {
 
 .module-left-pane__no-search-results__sms-only {
   margin-top: 12px;
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 
@@ -5595,12 +5748,12 @@ button.module-calling-participants-list__contact {
   position: absolute;
   width: 100%;
 
-  @include light-theme {
-    background: linear-gradient(transparent, $color-gray-02);
+  @include mixins.light-theme {
+    background: linear-gradient(transparent, variables.$color-gray-02);
   }
 
-  @include dark-theme {
-    background: linear-gradient(transparent, $color-gray-80);
+  @include mixins.dark-theme {
+    background: linear-gradient(transparent, variables.$color-gray-80);
   }
 }
 
@@ -5610,7 +5763,7 @@ button.module-calling-participants-list__contact {
   height: 100%;
   inset-inline-end: -8px;
   top: 0;
-  z-index: $z-index-above-base;
+  z-index: variables.$z-index-above-base;
   cursor: col-resize;
 }
 
@@ -5675,7 +5828,7 @@ button.module-calling-participants-list__contact {
 }
 
 .module-timeline__scrolldown-buttons {
-  z-index: $z-index-scroll-down-button;
+  z-index: variables.$z-index-scroll-down-button;
   position: absolute;
   inset-inline-end: 16px;
   bottom: 12px;
@@ -5689,42 +5842,17 @@ button.module-calling-participants-list__contact {
   outline: none;
 }
 
-// Module: CompositionPopper
-
-%module-composition-popper {
-  width: 332px;
-  border-radius: 4px;
-  margin-bottom: 6px;
-  z-index: $z-index-context-menu;
-  user-select: none;
-  overflow: hidden;
-
-  @include popper-shadow();
-
-  @include light-theme {
-    background: $color-gray-02;
-    ::-webkit-scrollbar-thumb {
-      border: 2px solid $color-gray-02;
-    }
-  }
-
-  @include dark-theme {
-    background: $color-gray-75;
-    ::-webkit-scrollbar-thumb {
-      border: 2px solid $color-gray-75;
-    }
-  }
-}
-
 // Module: StickerPicker
 
 .module-sticker-picker {
-  @extend %module-composition-popper;
-  height: 400px;
-  display: grid;
-  grid-template-rows: 44px 1fr;
-  grid-template-columns: 1fr;
-  z-index: $z-index-context-menu;
+  @include mixins.module-composition-popper;
+  & {
+    height: 400px;
+    display: grid;
+    grid-template-rows: 44px 1fr;
+    grid-template-columns: 1fr;
+    z-index: variables.$z-index-context-menu;
+  }
 }
 
 .module-sticker-picker__header {
@@ -5751,7 +5879,7 @@ button.module-calling-participants-list__contact {
 }
 
 .module-sticker-picker__recents--title {
-  color: $color-gray-05;
+  color: variables.$color-gray-05;
 }
 
 .module-sticker-picker__header__button {
@@ -5769,20 +5897,20 @@ button.module-calling-participants-list__contact {
 
   &:active,
   &:focus {
-    @include keyboard-mode {
-      background: $color-gray-05;
+    @include mixins.keyboard-mode {
+      background: variables.$color-gray-05;
     }
-    @include dark-keyboard-mode {
-      background: $color-gray-60;
+    @include mixins.dark-keyboard-mode {
+      background: variables.$color-gray-60;
     }
   }
 
   &--selected {
-    @include light-theme {
-      background: $color-gray-15;
+    @include mixins.light-theme {
+      background: variables.$color-gray-15;
     }
-    @include dark-theme {
-      background: $color-gray-45;
+    @include mixins.dark-theme {
+      background: variables.$color-gray-45;
     }
   }
 
@@ -5798,16 +5926,16 @@ button.module-calling-participants-list__contact {
 
   &--recents {
     &::after {
-      @include light-theme {
-        @include color-svg(
+      @include mixins.light-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/recent/recent.svg',
-          $color-gray-60
+          variables.$color-gray-60
         );
       }
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/recent/recent.svg',
-          $color-gray-25
+          variables.$color-gray-25
         );
       }
     }
@@ -5815,11 +5943,17 @@ button.module-calling-participants-list__contact {
 
   &--add-pack {
     &::after {
-      @include light-theme {
-        @include color-svg('../images/icons/v3/plus/plus.svg', $color-gray-60);
+      @include mixins.light-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/plus/plus.svg',
+          variables.$color-gray-60
+        );
       }
-      @include dark-theme {
-        @include color-svg('../images/icons/v3/plus/plus.svg', $color-gray-25);
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/plus/plus.svg',
+          variables.$color-gray-25
+        );
       }
     }
   }
@@ -5837,12 +5971,12 @@ button.module-calling-participants-list__contact {
       min-height: 16px;
     }
 
-    @include light-theme {
-      background: $color-gray-02;
+    @include mixins.light-theme {
+      background: variables.$color-gray-02;
     }
 
-    @include dark-theme {
-      background: $color-gray-75;
+    @include mixins.dark-theme {
+      background: variables.$color-gray-75;
     }
   }
 
@@ -5852,32 +5986,32 @@ button.module-calling-participants-list__contact {
 
     &:dir(ltr) {
       &::after {
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-left.svg',
-            $color-gray-60
+            variables.$color-gray-60
           );
         }
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-left.svg',
-            $color-gray-25
+            variables.$color-gray-25
           );
         }
       }
     }
     &:dir(rtl) {
       &::after {
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-right.svg',
-            $color-gray-60
+            variables.$color-gray-60
           );
         }
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-right.svg',
-            $color-gray-25
+            variables.$color-gray-25
           );
         }
       }
@@ -5890,32 +6024,32 @@ button.module-calling-participants-list__contact {
 
     &:dir(ltr) {
       &::after {
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-right.svg',
-            $color-gray-60
+            variables.$color-gray-60
           );
         }
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-right.svg',
-            $color-gray-25
+            variables.$color-gray-25
           );
         }
       }
     }
     &:dir(rtl) {
       &::after {
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-left.svg',
-            $color-gray-60
+            variables.$color-gray-60
           );
         }
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-left.svg',
-            $color-gray-25
+            variables.$color-gray-25
           );
         }
       }
@@ -5933,9 +6067,9 @@ button.module-calling-participants-list__contact {
       position: absolute;
       inset-inline-start: 14px;
       top: 2px;
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/error/error-circle.svg',
-        $color-accent-red
+        variables.$color-accent-red
       );
     }
   }
@@ -5951,7 +6085,7 @@ button.module-calling-participants-list__contact {
       width: 14px;
       height: 14px;
       border-radius: 7px;
-      background: $color-ultramarine;
+      background: variables.$color-ultramarine;
     }
   }
 }
@@ -5967,7 +6101,7 @@ button.module-calling-participants-list__contact {
   min-height: 20px;
   max-width: 20px;
   max-height: 20px;
-  background-color: $color-gray-05;
+  background-color: variables.$color-gray-05;
 }
 
 .module-sticker-picker__body {
@@ -6006,7 +6140,7 @@ button.module-calling-participants-list__contact {
     justify-content: center;
     align-items: center;
 
-    @include mouse-mode {
+    @include mixins.mouse-mode {
       outline: none;
     }
 
@@ -6020,12 +6154,12 @@ button.module-calling-participants-list__contact {
     &__placeholder {
       border-radius: 4px;
 
-      @include light-theme() {
-        background-color: $color-gray-05;
+      @include mixins.light-theme() {
+        background-color: variables.$color-gray-05;
       }
 
-      @include dark-theme() {
-        background-color: $color-gray-60;
+      @include mixins.dark-theme() {
+        background-color: variables.$color-gray-60;
       }
     }
   }
@@ -6038,18 +6172,18 @@ button.module-calling-participants-list__contact {
   }
 
   &__text {
-    @include font-body-1-bold;
+    @include mixins.font-body-1-bold;
 
     text-align: center;
     padding-block: 8px 12px;
     padding-inline: 0 16px;
 
-    @include light-theme() {
-      color: $color-gray-60;
+    @include mixins.light-theme() {
+      color: variables.$color-gray-60;
     }
 
-    @include dark-theme() {
-      color: $color-gray-25;
+    @include mixins.dark-theme() {
+      color: variables.$color-gray-25;
     }
 
     &:only-child {
@@ -6058,21 +6192,21 @@ button.module-calling-participants-list__contact {
     }
 
     &--error {
-      @include light-theme() {
-        color: $color-accent-red;
+      @include mixins.light-theme() {
+        color: variables.$color-accent-red;
       }
-      @include dark-theme() {
-        color: $color-accent-red;
+      @include mixins.dark-theme() {
+        color: variables.$color-accent-red;
       }
     }
 
     &--hint {
-      @include light-theme() {
-        color: $color-ultramarine;
+      @include mixins.light-theme() {
+        color: variables.$color-ultramarine;
       }
 
-      @include dark-theme() {
-        color: $color-ultramarine-light;
+      @include mixins.dark-theme() {
+        color: variables.$color-ultramarine-light;
       }
     }
 
@@ -6086,8 +6220,8 @@ button.module-calling-participants-list__contact {
 }
 
 .module-sticker-picker__time--digital {
-  @include time-fonts;
-  color: $color-white;
+  @include mixins.time-fonts;
+  color: variables.$color-white;
   font-size: 28px;
   line-height: 0px;
 }
@@ -6144,9 +6278,9 @@ button.module-calling-participants-list__contact {
   justify-content: center;
   align-items: center;
 
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
-      outline: 2px solid $color-ultramarine;
+      outline: 2px solid variables.$color-ultramarine;
     }
   }
 
@@ -6159,56 +6293,62 @@ button.module-calling-participants-list__contact {
     height: 20px;
     flex-shrink: 0;
 
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/sticker/sticker.svg',
-        $color-gray-75
+        variables.$color-gray-75
       );
     }
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/sticker/sticker.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
   }
 
   &--active {
-    @include light-theme() {
-      background: $color-gray-05;
+    @include mixins.light-theme() {
+      background: variables.$color-gray-05;
     }
 
-    @include dark-theme() {
-      background: $color-gray-75;
+    @include mixins.dark-theme() {
+      background: variables.$color-gray-75;
     }
 
-    opacity: 1;
+    & {
+      opacity: 1;
+    }
   }
 }
 
 .module-sticker-button__tooltip {
-  @include button-reset;
+  @include mixins.button-reset;
 
-  height: 34px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding-block: 7px;
-  padding-inline: 12px;
-  border-radius: 8px;
-  margin-bottom: 6px;
-  z-index: $z-index-tooltip;
+  & {
+    height: 34px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-block: 7px;
+    padding-inline: 12px;
+    border-radius: 8px;
+    margin-bottom: 6px;
+    z-index: variables.$z-index-tooltip;
 
-  @include light-theme {
-    background: $color-white;
+    @include mixins.light-theme {
+      background: variables.$color-white;
+    }
+
+    @include mixins.dark-theme {
+      background: variables.$color-gray-75;
+    }
+
+    & {
+      @include mixins.popper-shadow();
+    }
   }
 
-  @include dark-theme {
-    background: $color-gray-75;
-  }
-
-  @include popper-shadow();
-
   &__triangle {
     position: absolute;
     width: 0;
@@ -6216,12 +6356,12 @@ button.module-calling-participants-list__contact {
     border-style: solid;
     border-width: 8px 8px 0 8px;
 
-    @include light-theme {
-      border-color: $color-white transparent transparent transparent;
+    @include mixins.light-theme {
+      border-color: variables.$color-white transparent transparent transparent;
     }
 
-    @include dark-theme {
-      border-color: $color-gray-75 transparent transparent transparent;
+    @include mixins.dark-theme {
+      border-color: variables.$color-gray-75 transparent transparent transparent;
     }
 
     &--top-end {
@@ -6241,19 +6381,19 @@ button.module-calling-participants-list__contact {
   &__image-placeholder {
     width: 20px;
     height: 20px;
-    background-color: $color-gray-05;
+    background-color: variables.$color-gray-05;
   }
 
   &__text {
     margin-inline-start: 4px;
     cursor: default;
 
-    @include light-theme {
-      color: $color-gray-90;
+    @include mixins.light-theme {
+      color: variables.$color-gray-90;
     }
 
-    @include dark-theme {
-      color: $color-gray-05;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-05;
     }
 
     &__title {
@@ -6280,18 +6420,18 @@ button.module-calling-participants-list__contact {
       flex-direction: column;
       justify-content: center;
 
-      @include light-theme {
-        color: $color-gray-90;
+      @include mixins.light-theme {
+        color: variables.$color-gray-90;
       }
 
-      @include dark-theme {
-        color: $color-gray-05;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-05;
       }
 
       &__title {
         margin: 0;
 
-        @include font-body-1-bold;
+        @include mixins.font-body-1-bold;
         height: 16px;
       }
 
@@ -6309,17 +6449,17 @@ button.module-calling-participants-list__contact {
         height: 16px;
         border: none;
 
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/x/x-compact.svg',
-            $color-gray-60
+            variables.$color-gray-60
           );
         }
 
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/x/x-compact.svg',
-            $color-gray-05
+            variables.$color-gray-05
           );
         }
       }
@@ -6337,11 +6477,13 @@ button.module-calling-participants-list__contact {
 }
 
 .module-emoji-picker {
-  @extend %module-composition-popper;
-  height: 428px;
-  display: grid;
-  grid-template-rows: 44px 1fr;
-  grid-template-columns: 1fr;
+  @include mixins.module-composition-popper;
+  & {
+    height: 428px;
+    display: grid;
+    grid-template-rows: 44px 1fr;
+    grid-template-columns: 1fr;
+  }
 
   &__header {
     @extend %module-emoji-picker--ribbon;
@@ -6354,7 +6496,7 @@ button.module-calling-participants-list__contact {
       margin-inline-start: 8px;
       position: relative;
 
-      @include font-body-2;
+      @include mixins.font-body-2;
 
       &::after {
         display: block;
@@ -6365,16 +6507,16 @@ button.module-calling-participants-list__contact {
         inset-inline-start: 8px;
         top: 6px;
 
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/search/search-compact.svg',
-            $color-gray-60
+            variables.$color-gray-60
           );
         }
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/search/search-compact.svg',
-            $color-gray-25
+            variables.$color-gray-25
           );
         }
       }
@@ -6383,7 +6525,7 @@ button.module-calling-participants-list__contact {
         width: 100%;
         height: 28px;
 
-        @include font-body-1;
+        @include mixins.font-body-1;
 
         line-height: 28px;
 
@@ -6397,31 +6539,31 @@ button.module-calling-participants-list__contact {
           outline: none;
         }
 
-        @include light-theme {
-          background: $color-white;
-          color: $color-gray-90;
-          border-color: $color-gray-60;
+        @include mixins.light-theme {
+          background: variables.$color-white;
+          color: variables.$color-gray-90;
+          border-color: variables.$color-gray-60;
 
           &:focus {
-            border-color: $color-ultramarine;
+            border-color: variables.$color-ultramarine;
           }
 
           &:placeholder {
-            color: $color-gray-45;
+            color: variables.$color-gray-45;
           }
         }
 
-        @include dark-theme {
-          border-color: $color-gray-25;
-          background: $color-gray-75;
-          color: $color-gray-05;
+        @include mixins.dark-theme {
+          border-color: variables.$color-gray-25;
+          background: variables.$color-gray-75;
+          color: variables.$color-gray-05;
 
           &:focus {
-            border-color: $color-ultramarine;
+            border-color: variables.$color-ultramarine;
           }
 
           &:placeholder {
-            color: $color-gray-45;
+            color: variables.$color-gray-45;
           }
         }
       }
@@ -6457,7 +6599,7 @@ button.module-calling-participants-list__contact {
     align-items: center;
     background: none;
 
-    @include mouse-mode {
+    @include mixins.mouse-mode {
       outline: none;
     }
 
@@ -6471,13 +6613,13 @@ button.module-calling-participants-list__contact {
       margin-inline-start: 12px;
       border-radius: 100%;
 
-      @include light-theme {
-        background: $color-white;
-        box-shadow: 0px 0px 4px $color-black-alpha-20;
+      @include mixins.light-theme {
+        background: variables.$color-white;
+        box-shadow: 0px 0px 4px variables.$color-black-alpha-20;
       }
 
-      @include dark-theme {
-        background: $color-gray-65;
+      @include mixins.dark-theme {
+        background: variables.$color-gray-65;
       }
 
       &::before {
@@ -6486,29 +6628,29 @@ button.module-calling-participants-list__contact {
         height: 20px;
         content: '';
 
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/settings/settings.svg',
-            $color-gray-75
+            variables.$color-gray-75
           );
         }
 
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/settings/settings.svg',
-            $color-gray-25
+            variables.$color-gray-25
           );
         }
       }
     }
 
     &--selected {
-      @include light-theme {
-        background: $color-gray-05;
+      @include mixins.light-theme {
+        background: variables.$color-gray-05;
       }
 
-      @include dark-theme {
-        background: $color-gray-60;
+      @include mixins.dark-theme {
+        background: variables.$color-gray-60;
       }
     }
 
@@ -6526,16 +6668,16 @@ button.module-calling-participants-list__contact {
 
       &--search {
         &::after {
-          @include light-theme {
-            @include color-svg(
+          @include mixins.light-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/search/search.svg',
-              $color-gray-60
+              variables.$color-gray-60
             );
           }
-          @include dark-theme {
-            @include color-svg(
+          @include mixins.dark-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/search/search.svg',
-              $color-gray-25
+              variables.$color-gray-25
             );
           }
         }
@@ -6543,27 +6685,33 @@ button.module-calling-participants-list__contact {
 
       &--close {
         &::after {
-          @include light-theme {
-            @include color-svg('../images/icons/v3/x/x.svg', $color-gray-60);
+          @include mixins.light-theme {
+            @include mixins.color-svg(
+              '../images/icons/v3/x/x.svg',
+              variables.$color-gray-60
+            );
           }
-          @include dark-theme {
-            @include color-svg('../images/icons/v3/x/x.svg', $color-gray-25);
+          @include mixins.dark-theme {
+            @include mixins.color-svg(
+              '../images/icons/v3/x/x.svg',
+              variables.$color-gray-25
+            );
           }
         }
       }
 
       &--recents {
         &::after {
-          @include light-theme {
-            @include color-svg(
+          @include mixins.light-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/recent/recent.svg',
-              $color-gray-60
+              variables.$color-gray-60
             );
           }
-          @include dark-theme {
-            @include color-svg(
+          @include mixins.dark-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/recent/recent.svg',
-              $color-gray-25
+              variables.$color-gray-25
             );
           }
         }
@@ -6571,16 +6719,16 @@ button.module-calling-participants-list__contact {
 
       &--emoji {
         &::after {
-          @include light-theme {
-            @include color-svg(
+          @include mixins.light-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/emoji/emoji.svg',
-              $color-gray-60
+              variables.$color-gray-60
             );
           }
-          @include dark-theme {
-            @include color-svg(
+          @include mixins.dark-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/emoji/emoji.svg',
-              $color-gray-25
+              variables.$color-gray-25
             );
           }
         }
@@ -6591,16 +6739,16 @@ button.module-calling-participants-list__contact {
       @each $cat in $categories {
         &--#{$cat} {
           &::after {
-            @include light-theme {
-              @include color-svg(
+            @include mixins.light-theme {
+              @include mixins.color-svg(
                 '../images/icons/v3/emoji/emoji-#{$cat}.svg',
-                $color-gray-60
+                variables.$color-gray-60
               );
             }
-            @include dark-theme {
-              @include color-svg(
+            @include mixins.dark-theme {
+              @include mixins.color-svg(
                 '../images/icons/v3/emoji/emoji-#{$cat}.svg',
-                $color-gray-25
+                variables.$color-gray-25
               );
             }
           }
@@ -6626,14 +6774,14 @@ button.module-calling-participants-list__contact {
       padding: 0;
       justify-content: center;
       align-items: center;
-      @include font-body-1;
+      @include mixins.font-body-1;
 
-      @include light-theme {
-        color: $color-gray-60;
+      @include mixins.light-theme {
+        color: variables.$color-gray-60;
       }
 
-      @include dark-theme {
-        color: $color-gray-25;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-25;
       }
     }
   }
@@ -6661,9 +6809,9 @@ button.module-calling-participants-list__contact {
   justify-content: center;
   align-items: center;
 
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
-      outline: 2px solid $color-ultramarine;
+      outline: 2px solid variables.$color-ultramarine;
     }
   }
 
@@ -6676,25 +6824,31 @@ button.module-calling-participants-list__contact {
     height: 20px;
     flex-shrink: 0;
 
-    @include light-theme {
-      @include color-svg('../images/icons/v3/emoji/emoji.svg', $color-gray-75);
+    @include mixins.light-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/emoji/emoji.svg',
+        variables.$color-gray-75
+      );
     }
-    @include dark-theme {
-      @include color-svg('../images/icons/v3/emoji/emoji.svg', $color-gray-15);
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/emoji/emoji.svg',
+        variables.$color-gray-15
+      );
     }
   }
 
   &--profile-editor::after {
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/emoji/emoji-plus.svg',
-        $color-gray-75
+        variables.$color-gray-75
       );
     }
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/emoji/emoji-plus.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
   }
@@ -6708,15 +6862,17 @@ button.module-calling-participants-list__contact {
   }
 
   &--active {
-    @include light-theme() {
-      background: $color-gray-05;
+    @include mixins.light-theme() {
+      background: variables.$color-gray-05;
     }
 
-    @include dark-theme() {
-      background: $color-gray-75;
+    @include mixins.dark-theme() {
+      background: variables.$color-gray-75;
     }
 
-    opacity: 1;
+    & {
+      opacity: 1;
+    }
   }
 }
 
@@ -6747,12 +6903,12 @@ button.module-calling-participants-list__contact {
   color: transparent;
   font-family: auto;
 
-  @include light-theme() {
-    caret-color: $color-gray-90;
+  @include mixins.light-theme() {
+    caret-color: variables.$color-gray-90;
   }
 
-  @include dark-theme() {
-    caret-color: $color-gray-05;
+  @include mixins.dark-theme() {
+    caret-color: variables.$color-gray-05;
   }
 
   @include emoji-size(16px);
@@ -6775,7 +6931,7 @@ button.module-calling-participants-list__contact {
 }
 
 .module-last-seen-indicator__bar {
-  background-color: $color-gray-45;
+  background-color: variables.$color-gray-45;
   width: 100%;
   height: 1px;
 }
@@ -6783,15 +6939,15 @@ button.module-calling-participants-list__contact {
 .module-last-seen-indicator__text {
   margin-top: 3px;
 
-  @include font-body-2-bold;
+  @include mixins.font-body-2-bold;
 
   text-align: center;
 
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 }
 
@@ -6802,34 +6958,40 @@ button.module-calling-participants-list__contact {
 }
 
 .module-calling-device-selection__close-button {
-  @include button-reset;
+  @include mixins.button-reset;
 
-  @include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
+  & {
+    @include mixins.color-svg(
+      '../images/icons/v3/x/x.svg',
+      variables.$color-gray-15
+    );
+  }
+  & {
+    height: 24px;
+    position: absolute;
+    inset-inline-end: 5px;
+    top: 0;
+    width: 24px;
+    z-index: variables.$z-index-above-base;
+  }
 
-  height: 24px;
-  position: absolute;
-  inset-inline-end: 5px;
-  top: 0;
-  width: 24px;
-  z-index: $z-index-above-base;
-
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus,
     &:active,
     &:hover {
-      background-color: $color-ultramarine;
+      background-color: variables.$color-ultramarine;
     }
   }
 }
 
 .module-calling-device-selection__title {
-  @include font-title-2;
+  @include mixins.font-title-2;
   margin-top: 12px;
   margin-bottom: 20px;
 }
 
 .module-calling-device-selection__label {
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
   display: block;
   margin-bottom: 16px;
 }
@@ -6847,26 +7009,26 @@ button.module-calling-participants-list__contact {
   max-width: 650px;
   margin-inline: auto;
 
-  @include light-theme {
-    background: $color-white;
+  @include mixins.light-theme {
+    background: variables.$color-white;
   }
 
-  @include dark-theme {
-    background: $color-gray-95;
+  @include mixins.dark-theme {
+    background: variables.$color-gray-95;
   }
 }
 
 .module-group-v1-disabled-actions__message {
-  @include font-body-2;
+  @include mixins.font-body-2;
   text-align: center;
   margin-bottom: 12px;
 
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
 
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 
@@ -6880,15 +7042,16 @@ button.module-calling-participants-list__contact {
   justify-content: center;
 }
 .module-group-v1-disabled-actions__buttons__button {
-  @include button-reset;
-  @include font-body-1-bold;
+  @include mixins.button-reset;
+  & {
+    @include mixins.font-body-1-bold;
+    border-radius: 4px;
 
-  border-radius: 4px;
+    padding: 8px;
+    padding-inline: 30px;
 
-  padding: 8px;
-  padding-inline: 30px;
-
-  @include button-primary;
+    @include mixins.button-primary;
+  }
 }
 
 // Module: GroupV2 Pending Approval Actions
@@ -6899,26 +7062,26 @@ button.module-calling-participants-list__contact {
   max-width: 650px;
   margin-inline: auto;
 
-  @include light-theme {
-    background: $color-white;
+  @include mixins.light-theme {
+    background: variables.$color-white;
   }
 
-  @include dark-theme {
-    background: $color-gray-95;
+  @include mixins.dark-theme {
+    background: variables.$color-gray-95;
   }
 }
 
 .module-group-v2-pending-approval-actions__message {
-  @include font-body-2;
+  @include mixins.font-body-2;
   text-align: center;
   margin-bottom: 12px;
 
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
 
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 
@@ -6928,32 +7091,33 @@ button.module-calling-participants-list__contact {
   justify-content: center;
 }
 .module-group-v2-pending-approval-actions__buttons__button {
-  @include button-reset;
-  @include font-body-1-bold;
+  @include mixins.button-reset;
+  & {
+    @include mixins.font-body-1-bold;
+    border-radius: 4px;
 
-  border-radius: 4px;
+    padding: 8px;
+    padding-inline: 30px;
 
-  padding: 8px;
-  padding-inline: 30px;
+    @include mixins.button-secondary;
 
-  @include button-secondary;
-
-  @include light-theme {
-    color: $color-gray-60;
-    background-color: $color-gray-05;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
+      background-color: variables.$color-gray-05;
+    }
   }
 }
 
 // Module: Modal Host
 
 .module-modal-host__overlay {
-  background: $color-black-alpha-40;
+  background: variables.$color-black-alpha-40;
   width: 100vw;
   height: 100vh;
   inset-inline-start: 0;
   top: 0;
   position: fixed;
-  z-index: $z-index-modal-host;
+  z-index: variables.$z-index-modal-host;
 }
 
 .module-modal-host__overlay-container {
@@ -6968,7 +7132,7 @@ button.module-calling-participants-list__contact {
   overflow: hidden;
   padding: 20px;
   position: fixed;
-  z-index: $z-index-modal-host;
+  z-index: variables.$z-index-modal-host;
 }
 
 .module-modal-host__width-container {
@@ -6977,7 +7141,7 @@ button.module-calling-participants-list__contact {
 }
 
 .module-modal-host--on-top-of-everything {
-  $loading-screen-modal-overlay: $z-index-on-top-of-everything + 1;
+  $loading-screen-modal-overlay: variables.$z-index-on-top-of-everything + 1;
 
   .module-modal-host__overlay,
   .module-modal-host__overlay-container {
@@ -6988,7 +7152,7 @@ button.module-calling-participants-list__contact {
 // Module: GroupV2 Join Dialog
 
 .module-group-v2-join-dialog {
-  @include font-body-1;
+  @include mixins.font-body-1;
   border-radius: 8px;
   width: 360px;
   margin-inline: auto;
@@ -6996,42 +7160,49 @@ button.module-calling-participants-list__contact {
 
   position: relative;
 
-  @include light-theme {
-    background-color: $color-white;
+  @include mixins.light-theme {
+    background-color: variables.$color-white;
   }
-  @include dark-theme {
-    background-color: $color-gray-95;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-95;
   }
 }
 .module-group-v2-join-dialog__close-button {
-  @include button-reset;
+  @include mixins.button-reset;
+  & {
+    position: absolute;
+    inset-inline-end: 12px;
+    top: 12px;
 
-  position: absolute;
-  inset-inline-end: 12px;
-  top: 12px;
+    height: 24px;
+    width: 24px;
 
-  height: 24px;
-  width: 24px;
+    @include mixins.light-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/x/x.svg',
+        variables.$color-gray-75
+      );
+    }
 
-  @include light-theme {
-    @include color-svg('../images/icons/v3/x/x.svg', $color-gray-75);
-  }
-
-  @include dark-theme {
-    @include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/x/x.svg',
+        variables.$color-gray-15
+      );
+    }
   }
 
   &:focus {
-    @include keyboard-mode {
-      background-color: $color-ultramarine;
+    @include mixins.keyboard-mode {
+      background-color: variables.$color-ultramarine;
     }
-    @include dark-keyboard-mode {
-      background-color: $color-ultramarine-light;
+    @include mixins.dark-keyboard-mode {
+      background-color: variables.$color-ultramarine-light;
     }
   }
 }
 .module-group-v2-join-dialog__title {
-  @include font-title-2;
+  @include mixins.font-title-2;
   text-align: center;
   margin-top: 12px;
   margin-bottom: 2px;
@@ -7040,15 +7211,15 @@ button.module-calling-participants-list__contact {
   text-align: center;
 }
 .module-group-v2-join-dialog__metadata {
-  color: $color-gray-60;
+  color: variables.$color-gray-60;
   text-align: center;
 }
 .module-group-v2-join-dialog__prompt {
   margin-top: 40px;
 
   &--approval {
-    @include font-subtitle;
-    color: $color-gray-45;
+    @include mixins.font-subtitle;
+    color: variables.$color-gray-45;
     margin-top: 40px;
   }
 }
@@ -7069,7 +7240,7 @@ button.module-calling-participants-list__contact {
   }
 }
 .module-group-v2-join-dialog__description {
-  color: $color-gray-60;
+  color: variables.$color-gray-60;
   margin-top: 12px;
 }
 
@@ -7079,21 +7250,23 @@ button.module-calling-participants-list__contact {
   width: 138px;
   padding: 18px;
   border-radius: 8px;
-  @include popper-shadow();
+  @include mixins.popper-shadow();
 
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+  & {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 
-  @include light-theme() {
-    background: $color-white;
-    color: $color-gray-90;
-  }
+    @include mixins.light-theme() {
+      background: variables.$color-white;
+      color: variables.$color-gray-90;
+    }
 
-  @include dark-theme() {
-    background: $color-gray-80;
-    color: $color-gray-05;
+    @include mixins.dark-theme() {
+      background: variables.$color-gray-80;
+      color: variables.$color-gray-05;
+    }
   }
 }
 
@@ -7102,11 +7275,11 @@ button.module-calling-participants-list__contact {
 }
 
 .module-progress-dialog__text {
-  @include font-body-2;
+  @include mixins.font-body-2;
 }
 
 .module-progress-dialog__overlay {
-  background: $color-black-alpha-40;
+  background: variables.$color-black-alpha-40;
   position: fixed;
   inset-inline-start: 0;
   top: 0;
@@ -7115,7 +7288,7 @@ button.module-calling-participants-list__contact {
   display: flex;
   justify-content: center;
   align-items: center;
-  z-index: $z-index-popup-overlay;
+  z-index: variables.$z-index-popup-overlay;
 }
 
 // Module: Error Modal
@@ -7129,66 +7302,72 @@ button.module-calling-participants-list__contact {
 
 .module-button {
   &__small {
-    @include font-body-2;
-    @include button-reset;
+    @include mixins.font-body-2;
+    @include mixins.button-reset;
 
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       &:focus {
-        box-shadow: 0px 0px 0px 2px $color-ultramarine;
+        box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
       }
     }
 
-    @include light-theme {
-      color: $color-gray-90;
-      border-color: $color-gray-15;
+    & {
+      @include mixins.light-theme {
+        color: variables.$color-gray-90;
+        border-color: variables.$color-gray-15;
+      }
+
+      @include mixins.dark-theme {
+        color: variables.$color-gray-05;
+        border-color: variables.$color-gray-65;
+      }
     }
 
-    @include dark-theme {
-      color: $color-gray-05;
-      border-color: $color-gray-65;
+    & {
+      border-radius: 4px;
+      border-style: solid;
+      border-width: 1px;
+      outline: none;
+      padding-block: 7px;
+      padding-inline: 12px;
     }
-
-    border-radius: 4px;
-    border-style: solid;
-    border-width: 1px;
-    outline: none;
-    padding-block: 7px;
-    padding-inline: 12px;
   }
 }
 
 .module-background-color {
   &__default {
-    background-color: $color-black-alpha-40;
+    background-color: variables.$color-black-alpha-40;
   }
 
-  @include avatar-colors();
+  @include mixins.avatar-colors();
 }
 
 .module-tooltip {
-  --tooltip-text-color: #{$color-gray-75};
-  --tooltip-background-color: #{$color-gray-02};
+  --tooltip-text-color: #{variables.$color-gray-75};
+  --tooltip-background-color: #{variables.$color-gray-02};
 
   @mixin tooltip-dark-theme-variables {
-    --tooltip-text-color: #{$color-gray-05};
-    --tooltip-background-color: #{$color-gray-65};
+    --tooltip-text-color: #{variables.$color-gray-05};
+    --tooltip-background-color: #{variables.$color-gray-65};
   }
   &--dark-theme {
     @include tooltip-dark-theme-variables;
   }
-  @include dark-theme {
+  @include mixins.dark-theme {
     @include tooltip-dark-theme-variables;
   }
 
-  background-color: var(--tooltip-background-color);
-  border-radius: 8px;
-  color: var(--tooltip-text-color);
-  display: inline-block;
-  padding-block: 8px;
-  padding-inline: 21px;
-  position: fixed;
-  text-align: center;
-  z-index: $z-index-tooltip;
+  & {
+    background-color: var(--tooltip-background-color);
+    border-radius: 8px;
+    color: var(--tooltip-text-color);
+    display: inline-block;
+    padding-block: 8px;
+    padding-inline: 21px;
+    position: fixed;
+    text-align: center;
+    z-index: variables.$z-index-tooltip;
+  }
 
   .module-tooltip-arrow {
     position: absolute;
@@ -7265,7 +7444,7 @@ button.module-calling-participants-list__contact {
   text-align: center;
 }
 .module-chat-session-refreshed-dialog__title {
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
   margin-top: 10px;
   margin-bottom: 3px;
 }
@@ -7276,7 +7455,7 @@ button.module-calling-participants-list__contact {
   text-align: center;
 }
 .module-delivery-issue-dialog__title {
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
   margin-top: 10px;
   margin-bottom: 3px;
 }
@@ -7284,16 +7463,18 @@ button.module-calling-participants-list__contact {
 /* Third-party module: react-contextmenu*/
 
 .react-contextmenu {
-  @include popper-shadow();
+  @include mixins.popper-shadow();
 
-  outline: none;
-  border-radius: 4px;
-  min-width: 220px;
-  padding-block: 6px;
-  padding-inline: 0;
-  opacity: 0;
-  user-select: none;
-  visibility: hidden;
+  & {
+    outline: none;
+    border-radius: 4px;
+    min-width: 220px;
+    padding-block: 6px;
+    padding-inline: 0;
+    opacity: 0;
+    user-select: none;
+    visibility: hidden;
+  }
 
   // style a menu with only one option
   &:not(:has(:nth-child(2))) {
@@ -7303,18 +7484,20 @@ button.module-calling-participants-list__contact {
       border-radius: 4px;
     }
   }
-  @include light-theme {
-    background-color: $color-white;
-  }
-  @include dark-theme {
-    background-color: $color-gray-75;
+  & {
+    @include mixins.light-theme {
+      background-color: variables.$color-white;
+    }
+    @include mixins.dark-theme {
+      background-color: variables.$color-gray-75;
+    }
   }
 }
 
 .react-contextmenu--visible {
   opacity: 1;
   visibility: visible;
-  z-index: $z-index-context-menu;
+  z-index: variables.$z-index-context-menu;
   -webkit-app-region: no-drag;
 }
 
@@ -7326,17 +7509,17 @@ button.module-calling-participants-list__contact {
   width: 100%;
   align-items: center;
 
-  @include font-body-2;
+  @include mixins.font-body-2;
 
   padding-block: 7px;
 
   padding-inline: 12px;
 
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    color: $color-gray-02;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-02;
   }
 
   &--divider {
@@ -7345,11 +7528,11 @@ button.module-calling-participants-list__contact {
     margin-inline: 0;
     padding: 0;
 
-    @include light-theme {
-      background-color: $color-gray-15;
+    @include mixins.light-theme {
+      background-color: variables.$color-gray-15;
     }
-    @include dark-theme {
-      background-color: $color-gray-60;
+    @include mixins.dark-theme {
+      background-color: variables.$color-gray-60;
     }
   }
 }
@@ -7360,11 +7543,11 @@ button.module-calling-participants-list__contact {
   position: absolute;
   inset-inline-end: 7px;
 
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    color: $color-gray-02;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-02;
   }
 }
 
@@ -7385,31 +7568,35 @@ button.module-calling-participants-list__contact {
   inset-inline-end: 7px;
   width: 12px;
 
-  @include light-theme {
-    @include color-svg(
+  @include mixins.light-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/chevron/chevron-right.svg',
-      $color-gray-75
+      variables.$color-gray-75
     );
-    color: $color-gray-90;
+    & {
+      color: variables.$color-gray-90;
+    }
   }
-  @include dark-theme {
-    @include color-svg(
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/chevron/chevron-right.svg',
-      $color-gray-15
+      variables.$color-gray-15
     );
-    color: $color-gray-02;
+    & {
+      color: variables.$color-gray-02;
+    }
   }
 }
 
 .react-contextmenu-item.react-contextmenu-item--active,
 .react-contextmenu-item.react-contextmenu-item--selected {
-  color: $color-black;
-  @include light-theme {
-    background-color: $color-gray-15;
+  color: variables.$color-black;
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-15;
   }
-  @include dark-theme {
-    background-color: $color-gray-60;
-    color: $color-white;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-60;
+    color: variables.$color-white;
   }
 }
 
@@ -7420,9 +7607,9 @@ button.module-calling-participants-list__contact {
 
 .react-contextmenu-item.react-contextmenu-item--active.react-contextmenu-item--checked:before,
 .react-contextmenu-item.react-contextmenu-item--selected.react-contextmenu-item--checked:before {
-  color: $color-black;
-  @include dark-theme {
-    color: $color-white;
+  color: variables.$color-black;
+  @include mixins.dark-theme {
+    color: variables.$color-white;
   }
 }
 
@@ -7430,9 +7617,9 @@ button.module-calling-participants-list__contact {
   > .react-contextmenu-item.react-contextmenu-item--active:after,
 .react-contextmenu-item.react-contextmenu-submenu
   > .react-contextmenu-item.react-contextmenu-item--selected:after {
-  color: $color-black;
-  @include dark-theme {
-    color: $color-white;
+  color: variables.$color-black;
+  @include mixins.dark-theme {
+    color: variables.$color-white;
   }
 }
 
@@ -7468,204 +7655,212 @@ button.module-calling-participants-list__contact {
   }
 
   &__download::before {
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/save/save-compact.svg',
-        $color-black
+        variables.$color-black
       );
     }
 
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/save/save-compact.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
   }
 
   &__reply::before {
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/reply/reply-compact.svg',
-        $color-black
+        variables.$color-black
       );
     }
 
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/reply/reply-compact.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
   }
 
   &__react::before {
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/heart/heart-plus-compact.svg',
-        $color-black
+        variables.$color-black
       );
     }
 
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/heart/heart-plus-compact.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
   }
 
   &__more-info::before {
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/info/info-compact.svg',
-        $color-black
+        variables.$color-black
       );
     }
 
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/info/info-compact.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
   }
 
   &__select::before {
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/check/check-circle-compact.svg',
-        $color-black
+        variables.$color-black
       );
     }
 
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/check/check-circle-compact.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
   }
 
   &__retry-send::before {
-    @include light-theme {
-      @include color-svg('../images/icons/v3/send/send.svg', $color-black);
+    @include mixins.light-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/send/send.svg',
+        variables.$color-black
+      );
     }
 
-    @include dark-theme {
-      @include color-svg('../images/icons/v3/send/send.svg', $color-gray-15);
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/send/send.svg',
+        variables.$color-gray-15
+      );
     }
   }
 
   &__forward-message::before {
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/forward/forward-compact.svg',
-        $color-black
+        variables.$color-black
       );
     }
 
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/forward/forward-compact.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
   }
 
   &__edit-message::before {
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/edit/edit-compact.svg',
-        $color-black
+        variables.$color-black
       );
     }
 
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/edit/edit-compact.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
   }
 
   &__delete-message::before,
   &__delete-message-for-everyone::before {
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/trash/trash-compact.svg',
-        $color-black
+        variables.$color-black
       );
     }
 
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/trash/trash-compact.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
   }
 
   &__copy-timestamp::before {
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/copy/copy-compact.svg',
-        $color-black
+        variables.$color-black
       );
     }
 
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/copy/copy-compact.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
   }
 }
 
 .module-message__action {
-  @include button-reset();
-  border-radius: 30px;
-  margin-top: 14px;
-  margin-bottom: 4px;
-  padding: 8px;
-  text-align: center;
-  width: 100%;
+  @include mixins.button-reset();
+  & {
+    border-radius: 30px;
+    margin-top: 14px;
+    margin-bottom: 4px;
+    padding: 8px;
+    text-align: center;
+    width: 100%;
 
-  @include font-body-1-bold();
+    @include mixins.font-body-1-bold();
+  }
 }
 .module-message__action--outgoing {
-  color: $color-white;
-  background-color: rgba($color-white, 0.22);
+  color: variables.$color-white;
+  background-color: rgba(variables.$color-white, 0.22);
   &:hover {
-    background-color: rgba($color-white, 0.36);
+    background-color: rgba(variables.$color-white, 0.36);
   }
 }
 .module-message__action--outgoing--in-another-call {
-  color: rgba($color-white, 0.5);
+  color: rgba(variables.$color-white, 0.5);
 }
 .module-message__action--incoming {
-  @include light-theme {
-    color: $color-link;
-    background-color: $color-white-alpha-70;
+  @include mixins.light-theme {
+    color: variables.$color-link;
+    background-color: variables.$color-white-alpha-70;
     &:hover {
-      background-color: $color-white;
+      background-color: variables.$color-white;
     }
   }
-  @include dark-theme {
-    color: $color-white;
-    background-color: rgba($color-white, 0.07);
+  @include mixins.dark-theme {
+    color: variables.$color-white;
+    background-color: rgba(variables.$color-white, 0.07);
     &:hover {
-      background-color: rgba($color-white, 0.17);
+      background-color: rgba(variables.$color-white, 0.17);
     }
   }
 }
 .module-message__action--incoming--in-another-call {
-  @include light-theme {
-    color: rgba($color-link, 0.5);
+  @include mixins.light-theme {
+    color: rgba(variables.$color-link, 0.5);
   }
-  @include dark-theme {
-    color: rgba($color-white, 0.5);
+  @include mixins.dark-theme {
+    color: rgba(variables.$color-white, 0.5);
   }
 }
 
diff --git a/stylesheets/_options.scss b/stylesheets/_options.scss
index 31633b0330..4ce6953457 100644
--- a/stylesheets/_options.scss
+++ b/stylesheets/_options.scss
@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 @use '../node_modules/intl-tel-input/build/css/intlTelInput.css';
-@import 'fontfaces';
-@import 'variables';
-@import 'progress';
+@use 'fontfaces';
+@use 'variables';
+@use 'progress';
 
 .iti__flag {
   // override intlTelInput's flags image location
@@ -22,5 +22,5 @@
 }
 
 .intl-tel-input .country-list .country .country-name {
-  color: $color-black;
+  color: variables.$color-black;
 }
diff --git a/stylesheets/_progress.scss b/stylesheets/_progress.scss
index 3b163f3533..41f3ebbba7 100644
--- a/stylesheets/_progress.scss
+++ b/stylesheets/_progress.scss
@@ -1,6 +1,8 @@
 // Copyright 2017 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use 'variables';
+
 @keyframes progress-bar-stripes {
   from {
     background-position: 40px 0;
@@ -12,11 +14,11 @@
 .progress-bar-striped {
   background-image: linear-gradient(
     45deg,
-    $color-white-alpha-60 25%,
+    variables.$color-white-alpha-60 25%,
     transparent 25%,
     transparent 50%,
-    $color-white-alpha-60 50%,
-    $color-white-alpha-60 75%,
+    variables.$color-white-alpha-60 50%,
+    variables.$color-white-alpha-60 75%,
     transparent 75%,
     transparent
   );
@@ -25,11 +27,11 @@
 .progress-bar-striped {
   background-image: linear-gradient(
     45deg,
-    $color-white-alpha-60 25%,
+    variables.$color-white-alpha-60 25%,
     transparent 25%,
     transparent 50%,
-    $color-white-alpha-60 50%,
-    $color-white-alpha-60 75%,
+    variables.$color-white-alpha-60 50%,
+    variables.$color-white-alpha-60 75%,
     transparent 75%,
     transparent
   );
@@ -39,7 +41,7 @@
 }
 
 .bar-container {
-  background: $color-ios-blue-tint;
+  background: variables.$color-ios-blue-tint;
 
   .progress-bar {
     height: 100%;
diff --git a/stylesheets/components/About.scss b/stylesheets/components/About.scss
index acfc4d6df5..e7c0b8271b 100644
--- a/stylesheets/components/About.scss
+++ b/stylesheets/components/About.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .About {
   align-items: center;
 
@@ -11,14 +14,14 @@
   overflow: hidden;
   text-align: center;
 
-  @include light-theme {
-    background-color: $color-white;
-    color: $color-black;
+  @include mixins.light-theme {
+    background-color: variables.$color-white;
+    color: variables.$color-black;
   }
 
-  @include dark-theme {
-    background-color: $color-gray-95;
-    color: $color-white-alpha-80;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-95;
+    color: variables.$color-white-alpha-80;
   }
 
   img {
@@ -26,16 +29,16 @@
   }
 
   a {
-    @include light-theme {
-      color: $color-ultramarine;
+    @include mixins.light-theme {
+      color: variables.$color-ultramarine;
     }
-    @include dark-theme {
-      color: $color-ultramarine-pastel;
+    @include mixins.dark-theme {
+      color: variables.$color-ultramarine-pastel;
     }
   }
 }
 
 .About__Title {
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
   margin: 0;
 }
diff --git a/stylesheets/components/AboutContactModal.scss b/stylesheets/components/AboutContactModal.scss
index 726037776b..fe0e8f9788 100644
--- a/stylesheets/components/AboutContactModal.scss
+++ b/stylesheets/components/AboutContactModal.scss
@@ -1,6 +1,9 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .AboutContactModal {
   &__headerTitle.module-Modal__headerTitle {
     // No padding between header and avatar
@@ -26,7 +29,7 @@
   }
 
   &__title {
-    @include font-title-2;
+    @include mixins.font-title-2;
     font-weight: 500;
 
     margin: 0;
@@ -41,12 +44,12 @@
     flex-shrink: 0;
 
     @mixin about-modal-icon($url) {
-      @include light-theme {
-        @include color-svg($url, $color-black);
+      @include mixins.light-theme {
+        @include mixins.color-svg($url, variables.$color-black);
       }
 
-      @include dark-theme {
-        @include color-svg($url, $color-gray-05);
+      @include mixins.dark-theme {
+        @include mixins.color-svg($url, variables.$color-gray-05);
       }
     }
 
@@ -111,8 +114,10 @@
     align-items: center;
     min-width: 0;
 
-    @include button-reset();
-    cursor: pointer;
+    @include mixins.button-reset();
+    & {
+      cursor: pointer;
+    }
 
     &::after {
       content: '';
@@ -121,21 +126,23 @@
       width: 20px;
       flex-shrink: 0;
 
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/chevron/chevron-right-bold.svg',
-        $color-gray-45
+        variables.$color-gray-45
       );
     }
   }
 
   &__verified {
-    @include button-reset();
-    cursor: pointer;
+    @include mixins.button-reset();
+    & {
+      cursor: pointer;
+    }
   }
 }
 
 .AboutContactModal__TitleWithoutNickname {
-  color: $color-gray-45;
+  color: variables.$color-gray-45;
 }
 
 .AboutContactModal__OneLineEllipsis {
diff --git a/stylesheets/components/AddGroupMembersModal.scss b/stylesheets/components/AddGroupMembersModal.scss
index 1f566f64b5..4fbc8a9118 100644
--- a/stylesheets/components/AddGroupMembersModal.scss
+++ b/stylesheets/components/AddGroupMembersModal.scss
@@ -1,12 +1,14 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+
 .module-AddGroupMembersModal {
   $root-selector: &;
   $padding: 16px;
 
   &__header {
-    @include font-body-1-bold;
+    @include mixins.font-body-1-bold;
     margin: 0;
     padding: 0;
   }
@@ -26,7 +28,7 @@
   }
 
   &__close-button {
-    @include modal-close-button;
+    @include mixins.modal-close-button;
   }
 
   .module-ContactPills {
@@ -46,10 +48,12 @@
   }
 
   &--choose-members {
-    @include modal-reset;
-    padding: 0; // The <ConversationList> has its own padding, so we pad various inner elements.
-    height: 60vh;
-    min-height: 400px;
+    @include mixins.modal-reset;
+    & {
+      padding: 0; // The <ConversationList> has its own padding, so we pad various inner elements.
+      height: 60vh;
+      min-height: 400px;
+    }
 
     #{$root-selector}__header {
       padding: $padding;
@@ -57,7 +61,7 @@
   }
 
   &--confirm-adds {
-    @include modal-reset;
+    @include mixins.modal-reset;
 
     #{$root-selector}__button-container {
       margin-top: 12px;
diff --git a/stylesheets/components/AnnouncementsOnlyGroupBanner.scss b/stylesheets/components/AnnouncementsOnlyGroupBanner.scss
index 8896ead30d..dffdeceaf5 100644
--- a/stylesheets/components/AnnouncementsOnlyGroupBanner.scss
+++ b/stylesheets/components/AnnouncementsOnlyGroupBanner.scss
@@ -1,24 +1,29 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .AnnouncementsOnlyGroupBanner {
   &__banner {
-    @include font-subtitle;
+    @include mixins.font-subtitle;
     padding: 16px;
     text-align: center;
 
-    @include light-theme {
-      border-top: 1px solid $color-gray-05;
-      color: $color-gray-60;
+    @include mixins.light-theme {
+      border-top: 1px solid variables.$color-gray-05;
+      color: variables.$color-gray-60;
     }
-    @include dark-theme {
-      border-top: 1px solid $color-gray-05;
-      color: $color-gray-05;
+    @include mixins.dark-theme {
+      border-top: 1px solid variables.$color-gray-05;
+      color: variables.$color-gray-05;
     }
 
     &--admins {
-      @include button-reset;
-      color: $color-ultramarine;
+      @include mixins.button-reset;
+      & {
+        color: variables.$color-ultramarine;
+      }
     }
   }
 }
diff --git a/stylesheets/components/App.scss b/stylesheets/components/App.scss
index 0c2d2448d8..00c6d78902 100644
--- a/stylesheets/components/App.scss
+++ b/stylesheets/components/App.scss
@@ -1,6 +1,8 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../variables';
+
 .App {
   height: 100%;
   position: relative;
@@ -10,11 +12,11 @@
   flex-direction: column;
 
   &.light-theme {
-    background-color: $color-white;
-    color: $color-gray-90;
+    background-color: variables.$color-white;
+    color: variables.$color-gray-90;
   }
   &.dark-theme {
-    background-color: $color-gray-95;
-    color: $color-gray-05;
+    background-color: variables.$color-gray-95;
+    color: variables.$color-gray-05;
   }
 }
diff --git a/stylesheets/components/AudioCapture.scss b/stylesheets/components/AudioCapture.scss
index 923a8d8c0c..2a53548101 100644
--- a/stylesheets/components/AudioCapture.scss
+++ b/stylesheets/components/AudioCapture.scss
@@ -1,6 +1,10 @@
 // Copyright 2016 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use 'sass:color';
+@use '../mixins';
+@use '../variables';
+
 .AudioCapture {
   display: flex;
   text-align: center;
@@ -22,9 +26,9 @@
     padding: 0;
     border: none;
 
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       &:focus {
-        outline: 2px solid $color-ultramarine;
+        outline: 2px solid variables.$color-ultramarine;
       }
     }
 
@@ -36,11 +40,17 @@
       height: 20px;
       width: 20px;
 
-      @include light-theme {
-        @include color-svg('../images/icons/v3/mic/mic.svg', $color-gray-75);
+      @include mixins.light-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/mic/mic.svg',
+          variables.$color-gray-75
+        );
       }
-      @include dark-theme {
-        @include color-svg('../images/icons/v3/mic/mic.svg', $color-gray-15);
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/mic/mic.svg',
+          variables.$color-gray-15
+        );
       }
     }
   }
@@ -71,29 +81,32 @@
     }
 
     &--complete {
-      background: lighten($color-accent-green, 20%);
-      border: 1px solid $color-accent-green;
+      background: color.adjust(variables.$color-accent-green, $lightness: 20%);
+      border: 1px solid variables.$color-accent-green;
 
       .icon {
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/check/check.svg',
-          $color-accent-green
+          variables.$color-accent-green
         );
       }
     }
 
     &--cancel {
-      background: lighten($color-accent-red, 20%);
-      border: 1px solid $color-accent-red;
+      background: color.adjust(variables.$color-accent-red, $lightness: 20%);
+      border: 1px solid variables.$color-accent-red;
 
       .icon {
-        @include color-svg('../images/icons/v3/x/x.svg', $color-accent-red);
+        @include mixins.color-svg(
+          '../images/icons/v3/x/x.svg',
+          variables.$color-accent-red
+        );
       }
     }
   }
 
   &__time {
-    color: $color-gray-60;
+    color: variables.$color-gray-60;
     font-variant: tabular-nums;
     line-height: 36px;
     margin-block: 0;
@@ -117,7 +130,7 @@
       border-radius: 10px;
       width: 10px;
       height: 10px;
-      background: $color-accent-red;
+      background: variables.$color-accent-red;
       margin-inline-end: 10px;
       opacity: 0;
       animation: pulse 2s infinite;
diff --git a/stylesheets/components/AutoSizeInput.scss b/stylesheets/components/AutoSizeInput.scss
index 3806b313d1..baa8fd8e5d 100644
--- a/stylesheets/components/AutoSizeInput.scss
+++ b/stylesheets/components/AutoSizeInput.scss
@@ -1,9 +1,12 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .AutoSizeInput {
   &__input {
-    @include font-body-1;
+    @include mixins.font-body-1;
 
     background: inherit;
     border: none;
@@ -13,15 +16,15 @@
     width: 20px;
 
     &:placeholder {
-      color: $color-gray-45;
+      color: variables.$color-gray-45;
     }
 
-    @include light-theme {
-      color: $color-black;
+    @include mixins.light-theme {
+      color: variables.$color-black;
     }
 
-    @include dark-theme {
-      color: $color-gray-05;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-05;
     }
 
     &:focus {
@@ -35,7 +38,7 @@
       top: 0;
       width: auto;
 
-      z-index: $z-index-negative;
+      z-index: variables.$z-index-negative;
     }
   }
 }
diff --git a/stylesheets/components/Avatar.scss b/stylesheets/components/Avatar.scss
index 9e2d73c922..e4b9e5526a 100644
--- a/stylesheets/components/Avatar.scss
+++ b/stylesheets/components/Avatar.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-Avatar {
   display: inline-flex;
   line-height: 0;
@@ -10,21 +13,23 @@
   vertical-align: middle;
 
   &__contents {
-    @include avatar-colors;
-    position: relative;
-    overflow: hidden;
-    border-radius: 100%;
-    width: 100%;
-    height: 100%;
-    border: 0;
-    padding: 0;
-    margin: 0;
-    outline: none;
+    @include mixins.avatar-colors;
+    & {
+      position: relative;
+      overflow: hidden;
+      border-radius: 100%;
+      width: 100%;
+      height: 100%;
+      border: 0;
+      padding: 0;
+      margin: 0;
+      outline: none;
+    }
 
     @at-root button#{&} {
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus {
-          box-shadow: 0 0 0 3px $color-ultramarine;
+          box-shadow: 0 0 0 3px variables.$color-ultramarine;
         }
       }
     }
@@ -46,10 +51,10 @@
   }
 
   &__click-to-view {
-    @include font-body-2;
+    @include mixins.font-body-2;
     align-items: center;
-    background: $color-black-alpha-20;
-    color: $color-white;
+    background: variables.$color-black-alpha-20;
+    color: variables.$color-white;
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -58,19 +63,21 @@
     top: 0;
 
     &::before {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v2/click-outline-24.svg',
-        $color-white
+        variables.$color-white
       );
-      content: '';
-      display: block;
-      height: 24px;
-      margin-bottom: 8px;
-      width: 24px;
+      & {
+        content: '';
+        display: block;
+        height: 24px;
+        margin-bottom: 8px;
+        width: 24px;
+      }
     }
 
     &:hover {
-      background: $color-black-alpha-40;
+      background: variables.$color-black-alpha-40;
     }
   }
 
@@ -119,7 +126,7 @@
 
   &__badge {
     position: absolute;
-    z-index: $z-index-base;
+    z-index: variables.$z-index-base;
 
     // Positioning should be overridden by JavaScript. These are set defensively.
     bottom: 0;
@@ -136,9 +143,9 @@
       border: 0;
       outline: none;
 
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus {
-          outline: 2px solid $color-ultramarine;
+          outline: 2px solid variables.$color-ultramarine;
           border-radius: 6px;
         }
       }
@@ -147,26 +154,26 @@
 
   &--with-story {
     border-radius: 100%;
-    border: 2px solid $color-black-alpha-40;
+    border: 2px solid variables.$color-black-alpha-40;
     padding: 3px;
 
-    @include dark-theme {
-      border-color: $color-white-alpha-40;
+    @include mixins.dark-theme {
+      border-color: variables.$color-white-alpha-40;
 
       &--unread {
-        border-color: $color-ultramarine-dawn;
+        border-color: variables.$color-ultramarine-dawn;
       }
     }
 
     &--unread {
-      border-color: $color-ultramarine-dawn;
+      border-color: variables.$color-ultramarine-dawn;
     }
   }
 
   &--signal-official {
     .module-Avatar__contents {
       align-items: center;
-      background-color: $color-ultramarine;
+      background-color: variables.$color-ultramarine;
       display: flex;
       justify-content: center;
     }
diff --git a/stylesheets/components/AvatarEditor.scss b/stylesheets/components/AvatarEditor.scss
index 6219d2cfee..4ce3acbd7d 100644
--- a/stylesheets/components/AvatarEditor.scss
+++ b/stylesheets/components/AvatarEditor.scss
@@ -1,35 +1,40 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .AvatarEditor {
   &__top-buttons {
     display: flex;
   }
 
   &__button {
-    @include button-reset;
-    align-items: center;
-    border-radius: 8px;
-    display: flex;
-    flex-direction: column;
-    font-size: 9px;
-    justify-content: center;
-    line-height: 14px;
-    margin-block: 0;
-    margin-inline: 8px;
-    min-height: 44px;
-    min-width: 60px;
-    padding-block: 0;
-    padding-inline: 8px;
-
-    @include light-theme {
-      background-color: $color-gray-05;
-      color: $color-black;
+    @include mixins.button-reset;
+    & {
+      align-items: center;
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      font-size: 9px;
+      justify-content: center;
+      line-height: 14px;
+      margin-block: 0;
+      margin-inline: 8px;
+      min-height: 44px;
+      min-width: 60px;
+      padding-block: 0;
+      padding-inline: 8px;
     }
 
-    @include dark-theme {
-      background-color: $color-gray-65;
-      color: $color-gray-05;
+    @include mixins.light-theme {
+      background-color: variables.$color-gray-05;
+      color: variables.$color-black;
+    }
+
+    @include mixins.dark-theme {
+      background-color: variables.$color-gray-65;
+      color: variables.$color-gray-05;
     }
 
     &::before {
@@ -40,11 +45,11 @@
     }
 
     @mixin button-icon($icon) {
-      @include light-theme {
-        @include color-svg($icon, $color-black);
+      @include mixins.light-theme {
+        @include mixins.color-svg($icon, variables.$color-black);
       }
-      @include dark-theme {
-        @include color-svg($icon, $color-gray-05);
+      @include mixins.dark-theme {
+        @include mixins.color-svg($icon, variables.$color-gray-05);
       }
     }
 
@@ -57,7 +62,7 @@
     }
 
     &:focus {
-      box-shadow: 0 0 0 2px $color-ultramarine;
+      box-shadow: 0 0 0 2px variables.$color-ultramarine;
     }
   }
 
@@ -69,16 +74,16 @@
 
   &__divider {
     border: none;
-    border-bottom: 1px solid $color-gray-15;
+    border-bottom: 1px solid variables.$color-gray-15;
     margin-bottom: 24px;
     margin-top: 20px;
 
-    @include light-theme {
-      border-color: $color-gray-15;
+    @include mixins.light-theme {
+      border-color: variables.$color-gray-15;
     }
 
-    @include dark-theme {
-      border-color: $color-gray-75;
+    @include mixins.dark-theme {
+      border-color: variables.$color-gray-75;
     }
   }
 
@@ -91,7 +96,7 @@
   }
 
   &__avatar-selector-title {
-    @include font-body-1-bold;
+    @include mixins.font-body-1-bold;
     margin-bottom: 14px;
   }
 }
diff --git a/stylesheets/components/AvatarPreview.scss b/stylesheets/components/AvatarPreview.scss
index cbd432ea4b..470c165cff 100644
--- a/stylesheets/components/AvatarPreview.scss
+++ b/stylesheets/components/AvatarPreview.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .AvatarPreview {
   align-items: center;
   display: flex;
@@ -9,24 +12,25 @@
   width: 100%;
 
   &__avatar {
-    @include button-reset;
-
-    align-items: center;
-    border-radius: 100%;
-    cursor: auto;
-    display: flex;
-    font-size: 32px;
-    height: 80px;
-    justify-content: center;
-    margin-bottom: 16px;
-    margin-top: 4px;
-    position: relative;
-    transition: background-color 100ms ease-out;
-    user-select: none;
-    width: 80px;
+    @include mixins.button-reset;
+    & {
+      align-items: center;
+      border-radius: 100%;
+      cursor: auto;
+      display: flex;
+      font-size: 32px;
+      height: 80px;
+      justify-content: center;
+      margin-bottom: 16px;
+      margin-top: 4px;
+      position: relative;
+      transition: background-color 100ms ease-out;
+      user-select: none;
+      width: 80px;
+    }
 
     &--loading {
-      background: $color-black;
+      background: variables.$color-black;
     }
 
     &--has-image {
@@ -34,9 +38,9 @@
       background-position: center center;
     }
 
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       &:focus {
-        box-shadow: 0 0 0 3px $color-ultramarine;
+        box-shadow: 0 0 0 3px variables.$color-ultramarine;
       }
     }
   }
@@ -57,7 +61,7 @@
 
   &__upload {
     align-items: center;
-    background: $color-gray-02;
+    background: variables.$color-gray-02;
     border-radius: 100%;
     bottom: 4px;
     box-shadow:
@@ -71,35 +75,47 @@
     width: 28px;
 
     &::after {
-      @include color-svg('../images/icons/v3/camera/camera.svg', $color-black);
-      content: '';
-      display: block;
-      height: 16px;
-      width: 16px;
+      @include mixins.color-svg(
+        '../images/icons/v3/camera/camera.svg',
+        variables.$color-black
+      );
+      & {
+        content: '';
+        display: block;
+        height: 16px;
+        width: 16px;
+      }
     }
   }
 
   &__clear {
-    @include button-reset;
-    align-items: center;
-    background-color: $color-white;
-    border-radius: 100%;
-    box-shadow:
-      0px 4px 16px rgba(0, 0, 0, 0.12),
-      0px 2px 4px rgba(0, 0, 0, 0.2);
-    display: flex;
-    height: 24px;
-    justify-content: center;
-    position: absolute;
-    inset-inline-end: 0;
-    top: 0;
-    width: 24px;
+    @include mixins.button-reset;
+    & {
+      align-items: center;
+      background-color: variables.$color-white;
+      border-radius: 100%;
+      box-shadow:
+        0px 4px 16px rgba(0, 0, 0, 0.12),
+        0px 2px 4px rgba(0, 0, 0, 0.2);
+      display: flex;
+      height: 24px;
+      justify-content: center;
+      position: absolute;
+      inset-inline-end: 0;
+      top: 0;
+      width: 24px;
+    }
 
     &:after {
-      @include color-svg('../images/icons/v3/x/x-compact.svg', $color-gray-75);
-      content: '';
-      height: 16px;
-      width: 16px;
+      @include mixins.color-svg(
+        '../images/icons/v3/x/x-compact.svg',
+        variables.$color-gray-75
+      );
+      & {
+        content: '';
+        height: 16px;
+        width: 16px;
+      }
     }
   }
 }
diff --git a/stylesheets/components/BackupMediaDownloadProgress.scss b/stylesheets/components/BackupMediaDownloadProgress.scss
index 0f01550456..32cadb63a5 100644
--- a/stylesheets/components/BackupMediaDownloadProgress.scss
+++ b/stylesheets/components/BackupMediaDownloadProgress.scss
@@ -1,6 +1,9 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .BackupMediaDownloadProgress {
   border-radius: 12px;
   display: flex;
@@ -14,16 +17,16 @@
   position: relative;
 
   &__title {
-    @include font-body-2-bold;
+    @include mixins.font-body-2-bold;
   }
 
-  @include light-theme {
-    background-color: $color-white;
-    border: 1px solid $color-gray-20;
+  @include mixins.light-theme {
+    background-color: variables.$color-white;
+    border: 1px solid variables.$color-gray-20;
   }
-  @include dark-theme {
-    background: $color-gray-75;
-    border: 1px solid $color-gray-60;
+  @include mixins.dark-theme {
+    background: variables.$color-gray-75;
+    border: 1px solid variables.$color-gray-60;
   }
 }
 
@@ -37,16 +40,16 @@
     display: block;
     width: 24px;
     height: 24px;
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/check/check-circle.svg',
-        $color-ultramarine
+        variables.$color-ultramarine
       );
     }
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/check/check-circle.svg',
-        $color-ultramarine-light
+        variables.$color-ultramarine-light
       );
     }
   }
@@ -58,28 +61,30 @@
     display: block;
     width: 24px;
     height: 24px;
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/backup/backup-bold.svg',
-        $color-ultramarine
+        variables.$color-ultramarine
       );
     }
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/backup/backup-bold.svg',
-        $color-ultramarine-light
+        variables.$color-ultramarine-light
       );
     }
   }
 }
 button.BackupMediaDownloadProgress__button {
-  @include button-reset;
-  @include font-subtitle-bold;
-  @include light-theme {
-    color: $color-ultramarine;
-  }
-  @include dark-theme {
-    color: $color-ultramarine-light;
+  @include mixins.button-reset;
+  & {
+    @include mixins.font-subtitle-bold;
+    @include mixins.light-theme {
+      color: variables.$color-ultramarine;
+    }
+    @include mixins.dark-theme {
+      color: variables.$color-ultramarine-light;
+    }
   }
 }
 
@@ -87,17 +92,23 @@ button.BackupMediaDownloadProgress__button-more {
   position: absolute;
   inset-inline-end: 14px;
   inset-block-start: 10px;
-  @include button-reset;
+  @include mixins.button-reset;
   &::after {
     content: '';
     display: block;
     width: 20px;
     height: 20px;
-    @include light-theme {
-      @include color-svg('../images/icons/v3/more/more.svg', $color-gray-75);
+    @include mixins.light-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/more/more.svg',
+        variables.$color-gray-75
+      );
     }
-    @include dark-theme {
-      @include color-svg('../images/icons/v3/more/more.svg', $color-gray-20);
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/more/more.svg',
+        variables.$color-gray-20
+      );
     }
   }
 }
@@ -105,17 +116,23 @@ button.BackupMediaDownloadProgress__button-close {
   position: absolute;
   inset-inline-end: 14px;
   inset-block-start: 10px;
-  @include button-reset;
+  @include mixins.button-reset;
   &::after {
     content: '';
     display: block;
     width: 20px;
     height: 20px;
-    @include light-theme {
-      @include color-svg('../images/icons/v3/x/x.svg', $color-gray-45);
+    @include mixins.light-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/x/x.svg',
+        variables.$color-gray-45
+      );
     }
-    @include dark-theme {
-      @include color-svg('../images/icons/v3/x/x.svg', $color-gray-20);
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/x/x.svg',
+        variables.$color-gray-20
+      );
     }
   }
 }
@@ -129,14 +146,14 @@ button.BackupMediaDownloadProgress__button-close {
 }
 
 .BackupMediaDownloadProgress__description {
-  @include font-subtitle;
+  @include mixins.font-subtitle;
 
-  @include light-theme {
-    color: rgba($color-gray-60, 0.8);
+  @include mixins.light-theme {
+    color: rgba(variables.$color-gray-60, 0.8);
   }
 
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 
diff --git a/stylesheets/components/BadgeCarouselIndex.scss b/stylesheets/components/BadgeCarouselIndex.scss
index c4c1cb9640..771ca10dd1 100644
--- a/stylesheets/components/BadgeCarouselIndex.scss
+++ b/stylesheets/components/BadgeCarouselIndex.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .BadgeCarouselIndex {
   display: flex;
   flex-wrap: wrap;
@@ -14,21 +17,21 @@
     width: 8px;
     margin-top: 8px;
 
-    @include light-theme {
-      background: $color-black-alpha-20;
+    @include mixins.light-theme {
+      background: variables.$color-black-alpha-20;
     }
 
-    @include dark-theme {
-      background: $color-white-alpha-20;
+    @include mixins.dark-theme {
+      background: variables.$color-white-alpha-20;
     }
 
     &--selected {
-      @include light-theme {
-        background: $color-ultramarine;
+      @include mixins.light-theme {
+        background: variables.$color-ultramarine;
       }
 
-      @include dark-theme {
-        background: $color-ultramarine-light;
+      @include mixins.dark-theme {
+        background: variables.$color-ultramarine-light;
       }
     }
   }
diff --git a/stylesheets/components/BadgeDialog.scss b/stylesheets/components/BadgeDialog.scss
index 442e4af0ea..ce21d21250 100644
--- a/stylesheets/components/BadgeDialog.scss
+++ b/stylesheets/components/BadgeDialog.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .BadgeDialog {
   @mixin fixed-height($height) {
     height: $height;
@@ -19,16 +22,18 @@
   }
 
   &__nav {
-    $light-color: $color-gray-65;
-    $dark-color: $color-gray-05;
+    $light-color: variables.$color-gray-65;
+    $dark-color: variables.$color-gray-05;
 
-    @include button-reset;
-    align-items: center;
-    border-radius: 4px;
-    display: flex;
-    justify-content: center;
-    padding-block: 3px;
-    padding-inline: 0;
+    @include mixins.button-reset;
+    & {
+      align-items: center;
+      border-radius: 4px;
+      display: flex;
+      justify-content: center;
+      padding-block: 3px;
+      padding-inline: 0;
+    }
 
     &[disabled] {
       visibility: hidden;
@@ -41,34 +46,34 @@
       height: 20px;
     }
 
-    @include light-theme {
+    @include mixins.light-theme {
       &:hover,
       &:focus {
-        background: $color-gray-02;
+        background: variables.$color-gray-02;
       }
       &:active {
-        background: $color-gray-05;
+        background: variables.$color-gray-05;
       }
     }
-    @include dark-theme {
+    @include mixins.dark-theme {
       &:hover,
       &:focus {
-        background: $color-gray-80;
+        background: variables.$color-gray-80;
       }
       &:active {
-        background: $color-gray-75;
+        background: variables.$color-gray-75;
       }
     }
 
     &--previous::before {
-      @include light-theme {
-        @include color-svg(
+      @include mixins.light-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/chevron/chevron-left.svg',
           $light-color
         );
       }
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/chevron/chevron-left.svg',
           $dark-color
         );
@@ -76,14 +81,14 @@
     }
 
     &--next::before {
-      @include light-theme {
-        @include color-svg(
+      @include mixins.light-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/chevron/chevron-right.svg',
           $light-color
         );
       }
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/chevron/chevron-right.svg',
           $dark-color
         );
@@ -99,7 +104,7 @@
   }
 
   &__name {
-    @include font-title-2;
+    @include mixins.font-title-2;
     @include fixed-height(3.5em);
     align-items: center;
     display: flex;
@@ -109,7 +114,7 @@
   }
 
   &__description {
-    @include font-body-1;
+    @include mixins.font-body-1;
     @include fixed-height(5.5em);
     margin-bottom: 12px;
   }
diff --git a/stylesheets/components/BadgeSustainerInstructionsDialog.scss b/stylesheets/components/BadgeSustainerInstructionsDialog.scss
index c478d8793e..3c2368a76c 100644
--- a/stylesheets/components/BadgeSustainerInstructionsDialog.scss
+++ b/stylesheets/components/BadgeSustainerInstructionsDialog.scss
@@ -1,6 +1,8 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+
 .BadgeSustainerInstructionsDialog {
   user-select: none;
 
@@ -9,18 +11,18 @@
   }
 
   &__header {
-    @include font-title-2;
+    @include mixins.font-title-2;
     text-align: center;
   }
 
   &__subheader {
-    @include font-body-1;
+    @include mixins.font-body-1;
     font-weight: normal;
     text-align: center;
   }
 
   &__instructions {
-    @include font-body-2;
+    @include mixins.font-body-2;
     padding: 0;
     list-style-position: inside;
 
@@ -33,10 +35,10 @@
       margin-inline: auto;
       width: 146px;
 
-      @include light-theme {
+      @include mixins.light-theme {
         background-image: url('../images/mobile-settings-light.svg');
       }
-      @include dark-theme {
+      @include mixins.dark-theme {
         background-image: url('../images/mobile-settings-dark.svg');
       }
     }
diff --git a/stylesheets/components/BetterAvatarBubble.scss b/stylesheets/components/BetterAvatarBubble.scss
index 636616b338..ebdaf4a47a 100644
--- a/stylesheets/components/BetterAvatarBubble.scss
+++ b/stylesheets/components/BetterAvatarBubble.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .BetterAvatarBubble {
   align-items: center;
   background-clip: content-box;
@@ -18,21 +21,21 @@
   position: relative;
   width: 56px;
 
-  @include avatar-colors();
+  @include mixins.avatar-colors();
 
   &--selected {
-    @include light-theme {
-      border-color: $color-black;
+    @include mixins.light-theme {
+      border-color: variables.$color-black;
     }
 
-    @include dark-theme {
-      border-color: $color-white;
+    @include mixins.dark-theme {
+      border-color: variables.$color-white;
     }
   }
 
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
-      border-color: $color-ultramarine;
+      border-color: variables.$color-ultramarine;
       outline: none;
     }
   }
@@ -42,7 +45,7 @@
     align-items: center;
     justify-content: center;
     border-radius: 100%;
-    background: $color-black-alpha-20;
+    background: variables.$color-black-alpha-20;
     height: 100%;
     width: 100%;
 
@@ -51,31 +54,41 @@
       display: block;
       height: 24px;
       width: 24px;
-      @include color-svg('../images/icons/v3/edit/edit.svg', $color-white);
+      @include mixins.color-svg(
+        '../images/icons/v3/edit/edit.svg',
+        variables.$color-white
+      );
     }
   }
 
   &__delete {
-    @include button-reset;
-    align-items: center;
-    background-color: $color-white;
-    border-radius: 100%;
-    box-shadow:
-      0px 4px 16px rgba(0, 0, 0, 0.12),
-      0px 2px 4px rgba(0, 0, 0, 0.2);
-    display: none;
-    height: 20px;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    inset-inline-end: 0;
-    width: 20px;
+    @include mixins.button-reset;
+    & {
+      align-items: center;
+      background-color: variables.$color-white;
+      border-radius: 100%;
+      box-shadow:
+        0px 4px 16px rgba(0, 0, 0, 0.12),
+        0px 2px 4px rgba(0, 0, 0, 0.2);
+      display: none;
+      height: 20px;
+      justify-content: center;
+      position: absolute;
+      top: 0;
+      inset-inline-end: 0;
+      width: 20px;
+    }
 
     &:after {
-      @include color-svg('../images/icons/v3/x/x-compact.svg', $color-gray-75);
-      content: '';
-      height: 10px;
-      width: 10px;
+      @include mixins.color-svg(
+        '../images/icons/v3/x/x-compact.svg',
+        variables.$color-gray-75
+      );
+      & {
+        content: '';
+        height: 10px;
+        width: 10px;
+      }
     }
   }
 
diff --git a/stylesheets/components/Button.scss b/stylesheets/components/Button.scss
index e26824e1e9..6c77eabc21 100644
--- a/stylesheets/components/Button.scss
+++ b/stylesheets/components/Button.scss
@@ -1,6 +1,10 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use 'sass:color';
+@use '../mixins';
+@use '../variables';
+
 .module-Button {
   @mixin focus-box-shadow($inner-color, $outer-color) {
     &:focus {
@@ -12,197 +16,229 @@
 
   @mixin hover-and-active-states($background-color, $mix-color) {
     &:hover {
-      @include not-disabled {
-        background: mix($background-color, $mix-color, 85%);
+      @include mixins.not-disabled {
+        background: color.mix($background-color, $mix-color, 85%);
       }
     }
     &:active {
-      @include not-disabled {
-        background: mix($background-color, $mix-color, 75%);
+      @include mixins.not-disabled {
+        background: color.mix($background-color, $mix-color, 75%);
       }
     }
   }
 
-  @include button-reset;
-  border-radius: 4px;
-  padding-block: 8px;
-  padding-inline: 16px;
-  text-align: center;
-  user-select: none;
-  -webkit-app-region: no-drag;
-
-  @include keyboard-mode {
-    @include focus-box-shadow($color-white, $color-ultramarine);
+  @include mixins.button-reset;
+  & {
+    border-radius: 4px;
+    padding-block: 8px;
+    padding-inline: 16px;
+    text-align: center;
+    user-select: none;
+    -webkit-app-region: no-drag;
   }
 
-  @include dark-keyboard-mode {
-    @include focus-box-shadow($color-black, $color-ultramarine);
+  @include mixins.keyboard-mode {
+    @include focus-box-shadow(
+      variables.$color-white,
+      variables.$color-ultramarine
+    );
   }
 
-  @include disabled {
+  @include mixins.dark-keyboard-mode {
+    @include focus-box-shadow(
+      variables.$color-black,
+      variables.$color-ultramarine
+    );
+  }
+
+  @include mixins.disabled {
     cursor: not-allowed;
   }
 
   &--large {
-    @include font-title-2;
+    @include mixins.font-title-2;
     font-weight: bold;
   }
 
   &--medium {
-    @include font-body-1-bold;
+    @include mixins.font-body-1-bold;
   }
 
   &--small {
-    @include font-body-2;
-    @include rounded-corners;
+    @include mixins.font-body-2;
+    @include mixins.rounded-corners;
     padding-block: 6px;
     padding-inline: 12px;
   }
 
   &--primary {
-    $color: $color-white;
-    $background-color: $color-ultramarine;
+    $color: variables.$color-white;
+    $background-color: variables.$color-ultramarine;
 
     color: $color;
     background: $background-color;
 
-    @include disabled {
-      color: fade-out($color, 0.4);
-      background: fade-out($background-color, 0.6);
+    @include mixins.disabled {
+      color: color.adjust($color, $alpha: -0.4);
+      background: color.adjust($background-color, $alpha: -0.6);
     }
 
     &--discouraged {
-      @include light-theme {
+      @include mixins.light-theme {
         opacity: 0.4;
       }
-      @include dark-theme {
+      @include mixins.dark-theme {
         opacity: 0.5;
       }
     }
 
-    @include light-theme {
-      @include hover-and-active-states($background-color, $color-black);
+    @include mixins.light-theme {
+      @include hover-and-active-states(
+        $background-color,
+        variables.$color-black
+      );
     }
 
-    @include dark-theme {
-      @include hover-and-active-states($background-color, $color-white);
+    @include mixins.dark-theme {
+      @include hover-and-active-states(
+        $background-color,
+        variables.$color-white
+      );
     }
   }
 
   &--secondary {
-    @include light-theme {
-      $color: $color-gray-90;
-      $background-color: $color-gray-05;
+    @include mixins.light-theme {
+      $color: variables.$color-gray-90;
+      $background-color: variables.$color-gray-05;
 
       color: $color;
       background: $background-color;
 
-      @include disabled {
-        color: $color-black-alpha-40;
-        background: fade-out($background-color, 0.6);
+      @include mixins.disabled {
+        color: variables.$color-black-alpha-40;
+        background: color.adjust($background-color, $alpha: -0.6);
       }
 
       &--affirmative {
-        color: $color-ultramarine;
+        color: variables.$color-ultramarine;
       }
       &--affirmative--discouraged {
-        color: fade-out($color-ultramarine, 0.5);
+        color: color.adjust(variables.$color-ultramarine, $alpha: -0.5);
       }
 
       &--destructive {
-        color: $color-accent-red;
+        color: variables.$color-accent-red;
       }
       &--destructive--discouraged {
-        color: fade-out($color-ultramarine, 0.5);
+        color: color.adjust(variables.$color-ultramarine, $alpha: -0.5);
       }
 
-      @include hover-and-active-states($background-color, $color-black);
+      @include hover-and-active-states(
+        $background-color,
+        variables.$color-black
+      );
     }
 
-    @include dark-theme {
-      $color: $color-gray-05;
-      $background-color: $color-gray-65;
+    @include mixins.dark-theme {
+      $color: variables.$color-gray-05;
+      $background-color: variables.$color-gray-65;
 
       color: $color;
       background: $background-color;
 
-      @include disabled {
-        color: $color-white-alpha-20;
-        background: fade-out($background-color, 0.6);
+      @include mixins.disabled {
+        color: variables.$color-white-alpha-20;
+        background: color.adjust($background-color, $alpha: -0.6);
       }
 
       &--affirmative {
-        color: $color-ultramarine-light;
+        color: variables.$color-ultramarine-light;
       }
       &--affirmative--discouraged {
-        color: fade-out($color-ultramarine-light, 0.5);
+        color: color.adjust(variables.$color-ultramarine-light, $alpha: -0.5);
       }
 
       &--destructive {
-        color: $color-accent-red;
+        color: variables.$color-accent-red;
       }
       &--destructive--discouraged {
-        color: fade-out($color-accent-red, 0.5);
+        color: color.adjust(variables.$color-accent-red, $alpha: -0.5);
       }
 
-      @include hover-and-active-states($background-color, $color-white);
+      @include hover-and-active-states(
+        $background-color,
+        variables.$color-white
+      );
     }
   }
 
   &--destructive {
-    $color: $color-white;
-    $background-color: $color-accent-red;
+    $color: variables.$color-white;
+    $background-color: variables.$color-accent-red;
 
     color: $color;
     background: $background-color;
 
-    @include disabled {
-      color: fade-out($color, 0.4);
-      background: fade-out($background-color, 0.6);
+    @include mixins.disabled {
+      color: color.adjust($color, $alpha: -0.4);
+      background: color.adjust($background-color, $alpha: -0.6);
     }
 
-    @include light-theme {
-      @include hover-and-active-states($background-color, $color-black);
+    @include mixins.light-theme {
+      @include hover-and-active-states(
+        $background-color,
+        variables.$color-black
+      );
     }
 
-    @include dark-theme {
-      @include hover-and-active-states($background-color, $color-white);
+    @include mixins.dark-theme {
+      @include hover-and-active-states(
+        $background-color,
+        variables.$color-white
+      );
     }
   }
 
   &--calling {
-    $color: $color-white;
-    $background-color: $color-accent-green;
+    $color: variables.$color-white;
+    $background-color: variables.$color-accent-green;
 
-    @include rounded-corners;
+    @include mixins.rounded-corners;
     color: $color;
     background: $background-color;
 
-    @include disabled {
-      color: fade-out($color, 0.4);
-      background: fade-out($background-color, 0.6);
+    @include mixins.disabled {
+      color: color.adjust($color, $alpha: -0.4);
+      background: color.adjust($background-color, $alpha: -0.6);
     }
 
     &--discouraged {
-      @include light-theme {
+      @include mixins.light-theme {
         opacity: 0.4;
       }
-      @include dark-theme {
+      @include mixins.dark-theme {
         opacity: 0.5;
       }
     }
 
-    @include light-theme {
-      @include hover-and-active-states($background-color, $color-black);
+    @include mixins.light-theme {
+      @include hover-and-active-states(
+        $background-color,
+        variables.$color-black
+      );
     }
 
-    @include dark-theme {
-      @include hover-and-active-states($background-color, $color-white);
+    @include mixins.dark-theme {
+      @include hover-and-active-states(
+        $background-color,
+        variables.$color-white
+      );
     }
   }
 
   &--system-message {
-    @include rounded-corners;
+    @include mixins.rounded-corners;
 
     &.module-Button--small {
       padding-top: 5px;
@@ -210,40 +246,46 @@
       font-weight: 500;
     }
 
-    @include light-theme {
-      $color: $color-ultramarine;
-      $background-color: $color-gray-02;
+    @include mixins.light-theme {
+      $color: variables.$color-ultramarine;
+      $background-color: variables.$color-gray-02;
 
       color: $color;
       background: $background-color;
 
-      @include disabled {
-        color: fade-out($color, 0.4);
-        background: fade-out($background-color, 0.6);
+      @include mixins.disabled {
+        color: color.adjust($color, $alpha: -0.4);
+        background: color.adjust($background-color, $alpha: -0.6);
       }
       &--discouraged {
-        color: fade-out($color, 0.5);
+        color: color.adjust($color, $alpha: -0.5);
       }
 
-      @include hover-and-active-states($background-color, $color-black);
+      @include hover-and-active-states(
+        $background-color,
+        variables.$color-black
+      );
     }
 
-    @include dark-theme {
-      $color: $color-white;
-      $background-color: $color-gray-65;
+    @include mixins.dark-theme {
+      $color: variables.$color-white;
+      $background-color: variables.$color-gray-65;
 
       color: $color;
       background: $background-color;
 
-      @include disabled {
-        color: fade-out($color, 0.4);
-        background: fade-out($background-color, 0.6);
+      @include mixins.disabled {
+        color: color.adjust($color, $alpha: -0.4);
+        background: color.adjust($background-color, $alpha: -0.6);
       }
       &--discouraged {
-        color: fade-out($color, 0.5);
+        color: color.adjust($color, $alpha: -0.5);
       }
 
-      @include hover-and-active-states($background-color, $color-white);
+      @include hover-and-active-states(
+        $background-color,
+        variables.$color-white
+      );
     }
   }
 
@@ -260,27 +302,27 @@
     padding: 8px;
 
     &--discouraged {
-      @include light-theme {
+      @include mixins.light-theme {
         opacity: 0.4;
       }
-      @include dark-theme {
+      @include mixins.dark-theme {
         opacity: 0.5;
       }
     }
 
-    @include light-theme {
-      background-color: $color-gray-05;
-      color: $color-black;
+    @include mixins.light-theme {
+      background-color: variables.$color-gray-05;
+      color: variables.$color-black;
     }
 
-    @include dark-theme {
-      background-color: $color-gray-65;
-      color: $color-gray-05;
+    @include mixins.dark-theme {
+      background-color: variables.$color-gray-65;
+      color: variables.$color-gray-05;
     }
 
     &:focus {
-      @include keyboard-mode {
-        box-shadow: 0 0 0 2px $color-ultramarine;
+      @include mixins.keyboard-mode {
+        box-shadow: 0 0 0 2px variables.$color-ultramarine;
       }
     }
 
@@ -296,11 +338,11 @@
       height: 18px;
       width: 18px;
 
-      @include light-theme {
-        @include color-svg($icon, $color-black);
+      @include mixins.light-theme {
+        @include mixins.color-svg($icon, variables.$color-black);
       }
-      @include dark-theme {
-        @include color-svg($icon, $color-gray-05);
+      @include mixins.dark-theme {
+        @include mixins.color-svg($icon, variables.$color-gray-05);
       }
     }
 
diff --git a/stylesheets/components/CallControls.scss b/stylesheets/components/CallControls.scss
index cfed8a6b60..a2c1db5e5b 100644
--- a/stylesheets/components/CallControls.scss
+++ b/stylesheets/components/CallControls.scss
@@ -1,19 +1,22 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .CallControls {
   position: relative;
   bottom: 0;
   display: flex;
   flex-grow: 1;
   flex-shrink: 0;
-  flex-basis: $CallControls__initial-width;
+  flex-basis: variables.$CallControls__initial-width;
   align-items: center;
   justify-content: space-between;
-  max-width: $CallControls__max-width;
-  height: $CallControls__height;
-  background-color: $color-gray-78;
-  box-shadow: 0px 4px 14px 0px $color-black-alpha-40;
+  max-width: variables.$CallControls__max-width;
+  height: variables.$CallControls__height;
+  background-color: variables.$color-gray-78;
+  box-shadow: 0px 4px 14px 0px variables.$color-black-alpha-40;
   border-radius: 18px;
   margin-block-end: 16px;
   margin-inline: 16px;
@@ -33,7 +36,7 @@
   display: flex;
   max-height: 40px;
   margin-block-end: 2px;
-  color: $color-gray-15;
+  color: variables.$color-gray-15;
   font-size: 14px;
   font-weight: bold;
   line-height: 20px;
@@ -44,33 +47,35 @@
   display: flex;
   min-height: 18px;
   max-height: 36px;
-  color: $color-gray-20;
+  color: variables.$color-gray-20;
   font-size: 13px;
   line-height: 18px;
   overflow: hidden;
 
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus-within {
-      outline: 2px solid $color-ultramarine;
+      outline: 2px solid variables.$color-ultramarine;
       outline-offset: 2px;
     }
   }
 }
 
 .CallControls__Status--ParticipantCount {
-  @include button-reset;
-  display: flex;
-  flex-basis: 100%;
-  align-items: center;
+  @include mixins.button-reset;
+  & {
+    display: flex;
+    flex-basis: 100%;
+    align-items: center;
+  }
   &::after {
     content: '';
     display: flex;
     width: 14px;
     height: 14px;
     margin-inline-start: 1px;
-    @include color-svg(
+    @include mixins.color-svg(
       '../images/icons/v3/chevron/chevron-right.svg',
-      $color-gray-20
+      variables.$color-gray-20
     );
   }
 }
@@ -95,17 +100,17 @@
   padding-inline: 16px;
   border-radius: 40px;
 
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
       box-shadow:
-        0 0 0 1px $color-gray-80,
-        0 0 0 3px $color-ultramarine !important;
+        0 0 0 1px variables.$color-gray-80,
+        0 0 0 3px variables.$color-ultramarine !important;
     }
   }
 }
 
 .CallControls__JoinLeaveButton--hangup {
-  background-color: $color-accent-red;
+  background-color: variables.$color-accent-red;
 }
 
 .CallControls__JoinLeaveButton .module-spinner__container {
@@ -113,20 +118,20 @@
 }
 
 .CallControls__OuterSpacer {
-  flex-basis: calc($calling-local-preview-width + 16px);
+  flex-basis: calc(variables.$calling-local-preview-width + 16px);
 }
 
 .CallControls__ReactionPickerContainer {
   position: absolute;
   inset-inline-start: min(44%, 32vw);
   inset-block-end: 70px;
-  z-index: $z-index-toast;
+  z-index: variables.$z-index-toast;
 
   display: flex;
   flex-direction: column;
   max-height: calc(100vh - 155px);
   font-size: 13px;
-  filter: drop-shadow(0px 4px 3px $color-black-alpha-20);
+  filter: drop-shadow(0px 4px 3px variables.$color-black-alpha-20);
   pointer-events: auto;
 }
 
diff --git a/stylesheets/components/CallLinkAddNameModal.scss b/stylesheets/components/CallLinkAddNameModal.scss
index 02bc34ad3b..476e9dca1b 100644
--- a/stylesheets/components/CallLinkAddNameModal.scss
+++ b/stylesheets/components/CallLinkAddNameModal.scss
@@ -1,13 +1,15 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+
 .CallLinkAddNameModal__Row {
   display: flex;
   gap: 12px;
 }
 
 .CallLinkAddNameModal__SrOnly {
-  @include sr-only;
+  @include mixins.sr-only;
 }
 
 // Overriding the default styles for the input container
diff --git a/stylesheets/components/CallLinkDetails.scss b/stylesheets/components/CallLinkDetails.scss
index ff5e7f879c..701f97d7fc 100644
--- a/stylesheets/components/CallLinkDetails.scss
+++ b/stylesheets/components/CallLinkDetails.scss
@@ -1,6 +1,9 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .CallLinkDetails__Container {
   max-width: 750px;
   margin-block: 0;
@@ -27,18 +30,18 @@
 
 .CallLinkDetails__HeaderTitle {
   margin: 0;
-  @include font-title-medium;
+  @include mixins.font-title-medium;
 }
 
 .CallLinkDetails__HeaderDescription {
   margin: 0;
   user-select: text;
-  @include font-body-1;
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.font-body-1;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 
@@ -47,35 +50,35 @@
 }
 
 .CallLinkDetails__HeaderButton--active-call {
-  @include button-active-call;
+  @include mixins.button-active-call;
 }
 
 .CallLinkDetails__DeleteLink {
   // Override the default icon color
   .ConversationDetails-icon__icon--trash::after {
-    @include any-theme {
-      background-color: $color-accent-red;
+    @include mixins.any-theme {
+      background-color: variables.$color-accent-red;
     }
   }
 
   // Override the default label color
   .ConversationDetails-panel-row__label {
-    color: $color-accent-red;
+    color: variables.$color-accent-red;
   }
 }
 
 .CallLinkDetails__DeleteLink--disabled-for-active-call {
   .ConversationDetails-icon__icon--trash::after {
-    @include any-theme {
-      background-color: $color-gray-45;
+    @include mixins.any-theme {
+      background-color: variables.$color-gray-45;
     }
   }
   .ConversationDetails-panel-row__label {
-    color: $color-gray-45;
+    color: variables.$color-gray-45;
   }
 }
 
 .CallLinkDetails__ApproveAllMembersDisabledTooltip,
 .CallLinkDetails__DeleteLinkTooltip {
-  @include tooltip;
+  @include mixins.tooltip;
 }
diff --git a/stylesheets/components/CallLinkEditModal.scss b/stylesheets/components/CallLinkEditModal.scss
index 5a405ab087..52497f4c11 100644
--- a/stylesheets/components/CallLinkEditModal.scss
+++ b/stylesheets/components/CallLinkEditModal.scss
@@ -1,6 +1,9 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 // Overriding default style
 .module-Modal__body.CallLinkEditModal__body {
   padding-inline: 12px 3px;
@@ -8,7 +11,7 @@
 }
 
 .CallLinkEditModal__SrOnly {
-  @include sr-only;
+  @include mixins.sr-only;
 }
 
 .CallLinkEditModal__Header {
@@ -27,18 +30,20 @@
 }
 
 .CallLinkEditModal__Header__Title {
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
 }
 
 .CallLinkEditModal__Header__CallLinkButton {
-  @include button-reset;
-  @include font-subtitle;
+  @include mixins.button-reset;
+  & {
+    @include mixins.font-subtitle;
 
-  @include light-theme {
-    color: $color-gray-60;
-  }
-  @include dark-theme {
-    color: $color-gray-25;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
+    }
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
+    }
   }
 }
 
@@ -56,7 +61,7 @@
 }
 
 .CallLinkEditModal__JoinButton {
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
 }
 
 .CallLinkEditModal__Row {
@@ -67,9 +72,11 @@
 }
 
 .CallLinkEditModal__RowButton {
-  @include button-reset;
-  width: 100%;
-  padding-block: 1px;
+  @include mixins.button-reset;
+  & {
+    width: 100%;
+    padding-block: 1px;
+  }
 
   .CallLinkEditModal__Row {
     border-radius: 8px;
@@ -78,33 +85,33 @@
   &:hover,
   &:focus {
     .CallLinkEditModal__Row {
-      @include light-theme {
-        background: $color-gray-02;
+      @include mixins.light-theme {
+        background: variables.$color-gray-02;
       }
-      @include dark-theme {
-        background: $color-gray-75;
+      @include mixins.dark-theme {
+        background: variables.$color-gray-75;
       }
     }
   }
 }
 
 .CallLinkEditModal__Row--Button {
-  @include font-body-2;
+  @include mixins.font-body-2;
   display: flex;
   gap: 8px;
   align-items: center;
   width: 100%;
 
-  @include light-theme {
-    color: $color-black;
+  @include mixins.light-theme {
+    color: variables.$color-black;
   }
-  @include dark-theme {
-    color: $color-gray-15;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-15;
   }
 }
 
 .CallLinkEditModal__RowLabel {
-  @include font-body-1;
+  @include mixins.font-body-1;
   flex: 1;
 }
 
@@ -128,11 +135,11 @@
 
 @mixin CallLinkEditModal__RowIcon($iconPath) {
   &::after {
-    @include light-theme {
-      @include color-svg($iconPath, $color-gray-75);
+    @include mixins.light-theme {
+      @include mixins.color-svg($iconPath, variables.$color-gray-75);
     }
-    @include dark-theme {
-      @include color-svg($iconPath, $color-gray-15);
+    @include mixins.dark-theme {
+      @include mixins.color-svg($iconPath, variables.$color-gray-15);
     }
   }
 }
@@ -158,5 +165,5 @@
 .CallLinkEditModal__Hr {
   border: none;
   height: 1px;
-  background: $color-black-alpha-12;
+  background: variables.$color-black-alpha-12;
 }
diff --git a/stylesheets/components/CallLinkPendingParticipantModal.scss b/stylesheets/components/CallLinkPendingParticipantModal.scss
index 48dca7defe..eb323964ba 100644
--- a/stylesheets/components/CallLinkPendingParticipantModal.scss
+++ b/stylesheets/components/CallLinkPendingParticipantModal.scss
@@ -1,6 +1,9 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 // Overriding default style
 .module-Modal__body_inner.CallLinkPendingParticipantModal__body_inner {
   align-items: center;
@@ -13,22 +16,24 @@
 }
 
 .CallLinkPendingParticipantModal__NameButton {
-  @include button-reset();
-  @include font-title-1;
-  display: flex;
-  flex-direction: row;
-  align-items: baseline;
-  max-width: 100%;
-  margin-top: 12px;
-  font-weight: 500;
-  color: $color-gray-05;
-  cursor: pointer;
+  @include mixins.button-reset();
+  & {
+    @include mixins.font-title-1;
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    max-width: 100%;
+    margin-top: 12px;
+    font-weight: 500;
+    color: variables.$color-gray-05;
+    cursor: pointer;
+  }
 }
 
 .CallLinkPendingParticipantModal__InContactsIcon {
   height: 22px;
   width: 22px;
-  @include any-theme {
+  @include mixins.any-theme {
     background-color: currentColor;
   }
 }
@@ -41,15 +46,15 @@
   position: relative;
   inset-block-start: 2px;
 
-  @include color-svg(
+  @include mixins.color-svg(
     '../images/icons/v3/chevron/chevron-right-bold.svg',
-    $color-gray-25
+    variables.$color-gray-25
   );
 }
 
 .CallLinkPendingParticipantModal__SharedGroupInfo {
   margin-top: 10px;
-  color: $color-gray-25;
+  color: variables.$color-gray-25;
   text-align: center;
 }
 
@@ -58,17 +63,18 @@
   margin-block: 24px;
   border: none;
   height: 1px;
-  background: $color-gray-65;
+  background: variables.$color-gray-65;
 }
 
 .CallLinkPendingParticipantModal__ActionButton {
-  @include button-reset;
-
-  display: flex;
-  padding-block: 6px;
-  width: 100%;
-  align-items: center;
-  color: $color-gray-05;
+  @include mixins.button-reset;
+  & {
+    display: flex;
+    padding-block: 6px;
+    width: 100%;
+    align-items: center;
+    color: variables.$color-gray-05;
+  }
 }
 
 .CallLinkPendingParticipantModal__ActionButton:last-child {
@@ -76,8 +82,8 @@
 }
 
 .CallLinkPendingParticipantModal__ActionButton:focus {
-  @include keyboard-mode {
-    background: $color-gray-65;
+  @include mixins.keyboard-mode {
+    background: variables.$color-gray-65;
   }
 }
 
@@ -95,12 +101,15 @@
 }
 
 .CallLinkPendingParticipantModal__ButtonIconContent--approve {
-  @include color-svg(
+  @include mixins.color-svg(
     '../images/icons/v3/check/check-circle.svg',
-    $color-gray-25
+    variables.$color-gray-25
   );
 }
 
 .CallLinkPendingParticipantModal__ButtonIconContent--deny {
-  @include color-svg('../images/icons/v3/x/x-circle.svg', $color-gray-25);
+  @include mixins.color-svg(
+    '../images/icons/v3/x/x-circle.svg',
+    variables.$color-gray-25
+  );
 }
diff --git a/stylesheets/components/CallReactionBurst.scss b/stylesheets/components/CallReactionBurst.scss
index ee1c63cf5c..a719bbcca1 100644
--- a/stylesheets/components/CallReactionBurst.scss
+++ b/stylesheets/components/CallReactionBurst.scss
@@ -1,16 +1,18 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../variables';
+
 .CallingReactionsBurstToasts {
   position: absolute;
   width: 100%;
-  inset-block-end: calc($CallControls__height + 32px);
+  inset-block-end: calc(variables.$CallControls__height + 32px);
   inset-inline-start: 15px;
 }
 
 .CallReactionBursts {
   position: absolute;
-  z-index: $z-index-toast;
+  z-index: variables.$z-index-toast;
   display: flex;
 }
 
diff --git a/stylesheets/components/CallSettingsButton.scss b/stylesheets/components/CallSettingsButton.scss
index 229a4cce8c..4546846df4 100644
--- a/stylesheets/components/CallSettingsButton.scss
+++ b/stylesheets/components/CallSettingsButton.scss
@@ -1,13 +1,16 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 @mixin CallSettingsButton-icon($path) {
-  @include color-svg($path, $color-gray-15);
+  @include mixins.color-svg($path, variables.$color-gray-15);
 }
 
 .CallSettingsButton__Button {
   align-items: center;
-  background-color: $color-gray-78;
+  background-color: variables.$color-gray-78;
   border: none;
   border-radius: 40px;
   display: flex;
@@ -16,10 +19,10 @@
   outline: none;
   width: 36px;
 
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
       outline-offset: 1px;
-      outline: 2px solid $color-ultramarine;
+      outline: 2px solid variables.$color-ultramarine;
     }
   }
 }
diff --git a/stylesheets/components/CallingAdhocCallInfo.scss b/stylesheets/components/CallingAdhocCallInfo.scss
index 1fd6ffe3f4..15a3a121c4 100644
--- a/stylesheets/components/CallingAdhocCallInfo.scss
+++ b/stylesheets/components/CallingAdhocCallInfo.scss
@@ -1,6 +1,9 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .CallingAdhocCallInfo {
   flex-shrink: 0;
   width: 360px;
@@ -41,22 +44,24 @@
 }
 
 .CallingAdhocCallInfo__MenuItem {
-  @include button-reset;
-  @include font-body-2;
-  display: flex;
-  width: 100%;
-  padding-block: 8px;
-  padding-inline: 10px 2px;
-  align-items: center;
-  border-radius: 6px;
+  @include mixins.button-reset;
+  & {
+    @include mixins.font-body-2;
+    display: flex;
+    width: 100%;
+    padding-block: 8px;
+    padding-inline: 10px 2px;
+    align-items: center;
+    border-radius: 6px;
+  }
 }
 
 .CallingAdhocCallInfo__MenuItem:hover {
-  background-color: $color-gray-62;
+  background-color: variables.$color-gray-62;
 }
 
 .CallingAdhocCallInfo__MenuItemIcon {
-  background: $color-gray-65;
+  background: variables.$color-gray-65;
   display: flex;
   width: 36px;
   height: 36px;
@@ -74,11 +79,17 @@
 }
 
 .CallingAdhocCallInfo__MenuItemIcon--copy-link:before {
-  @include color-svg('../images/icons/v3/copy/copy.svg', $color-gray-15);
+  @include mixins.color-svg(
+    '../images/icons/v3/copy/copy.svg',
+    variables.$color-gray-15
+  );
 }
 
 .CallingAdhocCallInfo__MenuItemIcon--share-via-signal:before {
-  @include color-svg('../images/icons/v3/forward/forward.svg', $color-gray-15);
+  @include mixins.color-svg(
+    '../images/icons/v3/forward/forward.svg',
+    variables.$color-gray-15
+  );
 }
 
 .CallingAdhocCallInfo__MenuItemText {
@@ -89,30 +100,37 @@
   display: flex;
   margin-block: 16px;
   margin-inline: 10px;
-  border: 1px solid $color-gray-65;
+  border: 1px solid variables.$color-gray-65;
 }
 
 .CallingAdhocCallInfo__RemoveClient {
-  @include button-reset;
-  width: 16px;
-  height: 16px;
-  margin-inline: 8px;
-  background: $color-white;
+  @include mixins.button-reset;
+  & {
+    width: 16px;
+    height: 16px;
+    margin-inline: 8px;
+    background: variables.$color-white;
+  }
 }
 
 .CallingAdhocCallInfo__UnknownContactInfoButton {
-  @include button-reset;
-  @include color-svg('../images/icons/v3/info/info.svg', $color-white);
-  display: flex;
-  flex: none;
-  width: 16px;
-  height: 16px;
-  margin-inline: 8px;
+  @include mixins.button-reset;
+  @include mixins.color-svg(
+    '../images/icons/v3/info/info.svg',
+    variables.$color-white
+  );
+  & {
+    display: flex;
+    flex: none;
+    width: 16px;
+    height: 16px;
+    margin-inline: 8px;
+  }
 }
 
 .CallingAdhocCallInfo__UnknownContactInfoButton:focus {
-  @include keyboard-mode {
-    background: $color-ultramarine;
+  @include mixins.keyboard-mode {
+    background: variables.$color-ultramarine;
   }
 }
 
@@ -132,7 +150,7 @@
 
   .module-Avatar__contents {
     outline: 2px solid;
-    outline-color: $color-gray-80;
+    outline-color: variables.$color-gray-80;
   }
 }
 
@@ -141,7 +159,7 @@
   .CallingAdhocCallInfo__UnknownContactAvatar
   .module-Avatar__contents {
   // Should match background of .module-calling-participants-list__contact:hover
-  outline-color: $color-gray-62;
+  outline-color: variables.$color-gray-62;
 }
 
 .CallingAdhocCallInfo__RemoveClientDialog {
diff --git a/stylesheets/components/CallingAudioIndicator.scss b/stylesheets/components/CallingAudioIndicator.scss
index b7a5c0d3d2..7f903cd017 100644
--- a/stylesheets/components/CallingAudioIndicator.scss
+++ b/stylesheets/components/CallingAudioIndicator.scss
@@ -1,6 +1,9 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .CallingAudioIndicator {
   $size: 28px;
 
@@ -10,11 +13,11 @@
   height: $size;
   min-width: $size;
   width: $size;
-  z-index: $z-index-base;
+  z-index: variables.$z-index-base;
   border-radius: calc($size / 2);
 
   &--with-content {
-    background: rgba($color-gray-80, 0.7);
+    background: rgba(variables.$color-gray-80, 0.7);
   }
 
   &__content {
@@ -27,9 +30,9 @@
     justify-content: center;
 
     &--muted {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/mic/mic-slash-fill-compact-light.svg',
-        $color-white
+        variables.$color-white
       );
     }
   }
@@ -39,12 +42,12 @@
   position: absolute;
   top: 6px;
   inset-inline-end: 6px;
-  z-index: $z-index-base;
+  z-index: variables.$z-index-base;
 }
 
 .module-ongoing-call__group-call-remote-participant .CallingAudioIndicator {
   position: absolute;
   top: 8px;
   inset-inline-end: 8px;
-  z-index: $z-index-base;
+  z-index: variables.$z-index-base;
 }
diff --git a/stylesheets/components/CallingButton.scss b/stylesheets/components/CallingButton.scss
index d08940550f..31b4ac50b2 100644
--- a/stylesheets/components/CallingButton.scss
+++ b/stylesheets/components/CallingButton.scss
@@ -1,9 +1,12 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .CallingButton {
   @mixin icon($path) {
-    @include color-svg($path, $color-white);
+    @include mixins.color-svg($path, variables.$color-white);
     height: 20px;
     width: 20px;
     border: none;
@@ -19,10 +22,10 @@
     outline: none;
     width: 36px;
 
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       &:focus {
         outline-offset: 1px;
-        outline: 2px solid $color-ultramarine;
+        outline: 2px solid variables.$color-ultramarine;
       }
     }
 
@@ -30,24 +33,42 @@
       background-color: $background-color;
 
       div {
-        @include color-svg($icon, $icon-color);
-        height: 20px;
-        width: 20px;
+        @include mixins.color-svg($icon, $icon-color);
+        & {
+          height: 20px;
+          width: 20px;
+        }
       }
     }
 
     @mixin calling-button-icon-highlighted($icon) {
-      @include calling-button-icon($icon, $color-gray-15, $color-gray-90);
+      @include calling-button-icon(
+        $icon,
+        variables.$color-gray-15,
+        variables.$color-gray-90
+      );
     }
 
     @mixin calling-button-icon-regular($icon) {
-      @include calling-button-icon($icon, $color-gray-60, $color-gray-15);
-      backdrop-filter: blur(10px);
+      @include calling-button-icon(
+        $icon,
+        variables.$color-gray-60,
+        variables.$color-gray-15
+      );
+      & {
+        backdrop-filter: blur(10px);
+      }
     }
 
     @mixin calling-button-icon-disabled($icon) {
-      @include calling-button-icon($icon, $color-gray-60, $color-gray-15);
-      opacity: 0.4;
+      @include calling-button-icon(
+        $icon,
+        variables.$color-gray-60,
+        variables.$color-gray-15
+      );
+      & {
+        opacity: 0.4;
+      }
     }
 
     &--audio {
@@ -83,8 +104,8 @@
     &--hangup {
       @include calling-button-icon(
         '../images/icons/v3/phone/phone-down-fill-light.svg',
-        $color-accent-red,
-        $color-white
+        variables.$color-accent-red,
+        variables.$color-white
       );
     }
 
@@ -168,13 +189,13 @@
   }
 
   &__tooltip {
-    background-color: $color-gray-80;
-    color: $color-gray-15;
+    background-color: variables.$color-gray-80;
+    color: variables.$color-gray-15;
     font-size: 13px;
-    outline: 1px solid $color-gray-62;
+    outline: 1px solid variables.$color-gray-62;
     padding-block: 5px;
     padding-inline: 12px;
-    filter: drop-shadow(0px 4px 3px $color-black-alpha-20);
+    filter: drop-shadow(0px 4px 3px variables.$color-black-alpha-20);
     pointer-events: none;
   }
 
@@ -186,24 +207,24 @@
   }
 
   &__tooltip[data-placement='bottom'] .module-tooltip-arrow::before {
-    border-color: transparent transparent $color-gray-62 transparent;
+    border-color: transparent transparent variables.$color-gray-62 transparent;
     margin-top: -14px;
     /* stylelint-disable-next-line liberty/use-logical-spec */
     margin-left: -7px;
   }
 
   &__tooltip[data-placement='bottom'] .module-tooltip-arrow::after {
-    border-bottom-color: $color-gray-80 !important;
+    border-bottom-color: variables.$color-gray-80 !important;
   }
 
   &__tooltip[data-placement='top'] .module-tooltip-arrow::before {
-    border-color: $color-gray-62 transparent transparent transparent;
+    border-color: variables.$color-gray-62 transparent transparent transparent;
     margin-top: 0;
     /* stylelint-disable-next-line liberty/use-logical-spec */
     margin-left: -7px;
   }
 
   &__tooltip[data-placement='top'] .module-tooltip-arrow::after {
-    border-top-color: $color-gray-80 !important;
+    border-top-color: variables.$color-gray-80 !important;
   }
 }
diff --git a/stylesheets/components/CallingLobby.scss b/stylesheets/components/CallingLobby.scss
index e072c605bf..5582cd344d 100644
--- a/stylesheets/components/CallingLobby.scss
+++ b/stylesheets/components/CallingLobby.scss
@@ -1,15 +1,18 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-CallingLobby {
   &__local-preview {
     position: absolute;
-    z-index: $z-index-negative;
+    z-index: variables.$z-index-negative;
     top: 28px;
     -webkit-app-region: no-drag;
 
     &--camera-is-on {
-      @include lonely-local-video-preview;
+      @include mixins.lonely-local-video-preview;
       width: auto;
       height: 100%;
       max-height: calc(100% - 140px);
@@ -25,7 +28,7 @@
     }
 
     &--camera-is-off {
-      @include lonely-local-video-preview;
+      @include mixins.lonely-local-video-preview;
       width: auto;
       height: 100%;
       max-height: calc(100% - 140px);
@@ -36,7 +39,7 @@
         position: absolute;
         height: 100%;
         width: 100%;
-        background: $color-black-alpha-40;
+        background: variables.$color-black-alpha-40;
       }
     }
   }
@@ -53,21 +56,21 @@
 }
 
 .CallingLobby__CallLinkNotice {
-  @include font-caption;
+  @include mixins.font-caption;
   display: flex;
   padding-block: 12px;
   padding-inline: 18px;
   margin-block-end: 32px;
   width: 340px;
-  background: $color-gray-78;
-  color: $color-white;
+  background: variables.$color-gray-78;
+  color: variables.$color-white;
   border-radius: 10px;
   align-items: center;
   text-align: center;
 }
 
 .CallingLobby__CallLinkNotice--join-request-pending {
-  @include font-body-1;
+  @include mixins.font-body-1;
   width: auto;
 }
 
diff --git a/stylesheets/components/CallingPendingParticipants.scss b/stylesheets/components/CallingPendingParticipants.scss
index bfed0a9b9b..45aa2ef6fb 100644
--- a/stylesheets/components/CallingPendingParticipants.scss
+++ b/stylesheets/components/CallingPendingParticipants.scss
@@ -1,6 +1,9 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .CallingPendingParticipants {
   width: 420px;
   height: auto;
@@ -18,7 +21,7 @@
 }
 
 .CallingPendingParticipants--Expandable {
-  background: $color-gray-78;
+  background: variables.$color-gray-78;
 }
 
 .CallingPendingParticipants--Expanded {
@@ -38,19 +41,19 @@
 }
 
 .CallingPendingParticipants__ParticipantButton {
-  @include button-reset();
+  @include mixins.button-reset();
 }
 
 .CallingPendingParticipants__ParticipantButton:focus {
-  @include keyboard-mode {
-    outline: 3px solid $color-ultramarine;
+  @include mixins.keyboard-mode {
+    outline: 3px solid variables.$color-ultramarine;
     outline-offset: 1px;
   }
 }
 
 .CallingPendingParticipants__ParticipantName {
-  @include font-body-1-bold;
-  color: $color-gray-15;
+  @include mixins.font-body-1-bold;
+  color: variables.$color-gray-15;
 }
 
 .CallingPendingParticipants__ParticipantAboutIcon {
@@ -61,15 +64,15 @@
   position: relative;
   inset-block-start: 3px;
 
-  @include color-svg(
+  @include mixins.color-svg(
     '../images/icons/v3/chevron/chevron-right-bold.svg',
-    $color-gray-05
+    variables.$color-gray-05
   );
 }
 
 .CallingPendingParticipants__WouldLikeToJoin {
-  @include font-body-2;
-  color: $color-gray-20;
+  @include mixins.font-body-2;
+  color: variables.$color-gray-20;
 }
 
 .CallingPendingParticipants__PendingActionButton {
@@ -111,11 +114,17 @@
 }
 
 .CallingPendingParticipants__PendingActionButtonIcon--Approve {
-  @include color-svg('../images/icons/v3/check/check-bold.svg', $color-white);
+  @include mixins.color-svg(
+    '../images/icons/v3/check/check-bold.svg',
+    variables.$color-white
+  );
 }
 
 .CallingPendingParticipants__PendingActionButtonIcon--Deny {
-  @include color-svg('../images/icons/v3/x/x-bold.svg', $color-white);
+  @include mixins.color-svg(
+    '../images/icons/v3/x/x-bold.svg',
+    variables.$color-white
+  );
 }
 
 .CallingPendingParticipants__ActionPanel {
@@ -133,26 +142,28 @@
 }
 
 .CallingPendingParticipants__ShowAllRequestsButton {
-  @include button-reset;
-  @include font-body-2-bold;
-  display: flex;
-  padding-block: 5px;
-  padding-inline: 15px;
-  margin-block: 12px;
-  margin-inline: auto;
-  color: $color-white-alpha-90;
-  background: $color-gray-65;
-  border-radius: 46px;
-  outline: none;
+  @include mixins.button-reset;
+  & {
+    @include mixins.font-body-2-bold;
+    display: flex;
+    padding-block: 5px;
+    padding-inline: 15px;
+    margin-block: 12px;
+    margin-inline: auto;
+    color: variables.$color-white-alpha-90;
+    background: variables.$color-gray-65;
+    border-radius: 46px;
+    outline: none;
+  }
 }
 
 .CallingPendingParticipants__ShowAllRequestsButton:focus {
-  @include keyboard-mode {
-    outline: 3px solid $color-ultramarine;
+  @include mixins.keyboard-mode {
+    outline: 3px solid variables.$color-ultramarine;
     outline-offset: 1px;
   }
 }
 
 .CallingPendingParticipants__ShowAllRequestsButtonContainer {
-  background: $color-black-alpha-24;
+  background: variables.$color-black-alpha-24;
 }
diff --git a/stylesheets/components/CallingPreCallInfo.scss b/stylesheets/components/CallingPreCallInfo.scss
index 664e890cd5..c613bc8e3b 100644
--- a/stylesheets/components/CallingPreCallInfo.scss
+++ b/stylesheets/components/CallingPreCallInfo.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-CallingPreCallInfo {
   text-align: center;
   user-select: none;
@@ -8,22 +11,22 @@
   &__title,
   &__subtitle {
     -webkit-box-orient: vertical;
-    color: $color-white;
+    color: variables.$color-white;
     display: -webkit-box;
     overflow: hidden;
     text-overflow: ellipsis;
-    @include calling-text-shadow;
+    @include mixins.calling-text-shadow;
   }
 
   &__title {
     -webkit-line-clamp: 1;
-    @include font-title-2;
+    @include mixins.font-title-2;
     margin-top: 16px;
   }
 
   &__subtitle {
     -webkit-line-clamp: 2;
-    @include font-body-1;
+    @include mixins.font-body-1;
     margin-top: 8px;
   }
 }
diff --git a/stylesheets/components/CallingRaisedHandsList.scss b/stylesheets/components/CallingRaisedHandsList.scss
index 49535ab91e..6e939a40b1 100644
--- a/stylesheets/components/CallingRaisedHandsList.scss
+++ b/stylesheets/components/CallingRaisedHandsList.scss
@@ -1,6 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .CallingRaisedHandsList {
   width: 100%;
   height: auto;
@@ -45,22 +48,24 @@
 }
 
 .CallingRaisedHandsList__Button {
-  @include button-reset;
-  position: absolute;
-  inset-inline-start: 16px;
-  inset-block-end: 16px;
-  display: flex;
-  padding-block: 14px;
-  padding-inline: 12px;
-  background: $color-white;
-  border-radius: 24px;
-  color: $color-black;
-  font-size: 14px;
-  z-index: $z-index-above-above-base;
+  @include mixins.button-reset;
+  & {
+    position: absolute;
+    inset-inline-start: 16px;
+    inset-block-end: 16px;
+    display: flex;
+    padding-block: 14px;
+    padding-inline: 12px;
+    background: variables.$color-white;
+    border-radius: 24px;
+    color: variables.$color-black;
+    font-size: 14px;
+    z-index: variables.$z-index-above-above-base;
+  }
 
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
-      outline: 2px solid $color-ultramarine;
+      outline: 2px solid variables.$color-ultramarine;
     }
   }
 }
@@ -73,9 +78,9 @@
   margin-inline-end: 4px;
   content: '';
 
-  @include color-svg(
+  @include mixins.color-svg(
     '../images/icons/v3/raise_hand/raise_hand-light.svg',
-    $color-black
+    variables.$color-black
   );
 }
 
@@ -86,23 +91,25 @@
   height: $icon-size;
   content: '';
 
-  @include color-svg(
+  @include mixins.color-svg(
     '../images/icons/v3/raise_hand/raise_hand-light.svg',
-    $color-gray-15
+    variables.$color-gray-15
   );
 }
 
 .CallingRaisedHandsList__LowerMyHandLink {
-  @include button-reset;
-  display: flex;
-  margin-inline-end: 16px;
-  font-size: 13px;
-  font-weight: 500;
-  color: $color-ultramarine-pastel;
+  @include mixins.button-reset;
+  & {
+    display: flex;
+    margin-inline-end: 16px;
+    font-size: 13px;
+    font-weight: 500;
+    color: variables.$color-ultramarine-pastel;
+  }
 
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
-      outline: 2px solid $color-ultramarine;
+      outline: 2px solid variables.$color-ultramarine;
     }
   }
 }
diff --git a/stylesheets/components/CallingRaisedHandsToasts.scss b/stylesheets/components/CallingRaisedHandsToasts.scss
index 5d92b31ad0..0f2308577e 100644
--- a/stylesheets/components/CallingRaisedHandsToasts.scss
+++ b/stylesheets/components/CallingRaisedHandsToasts.scss
@@ -1,6 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .CallingRaisedHandsToast__Content {
   display: flex;
   margin-block: 4px;
@@ -16,21 +19,23 @@
   margin-inline-end: 8px;
   content: '';
 
-  @include color-svg(
+  @include mixins.color-svg(
     '../images/icons/v3/raise_hand/raise_hand-light.svg',
-    $color-white
+    variables.$color-white
   );
 }
 
 .CallingRaisedHandsToasts__Link {
-  @include button-reset;
-  color: $color-ultramarine-pastel;
-  font-weight: 600;
-  margin-inline-start: 16px;
+  @include mixins.button-reset;
+  & {
+    color: variables.$color-ultramarine-pastel;
+    font-weight: 600;
+    margin-inline-start: 16px;
+  }
 
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
-      outline: 2px solid $color-ultramarine;
+      outline: 2px solid variables.$color-ultramarine;
     }
   }
 }
diff --git a/stylesheets/components/CallingReactionsToasts.scss b/stylesheets/components/CallingReactionsToasts.scss
index 1db31675f9..820ee9c900 100644
--- a/stylesheets/components/CallingReactionsToasts.scss
+++ b/stylesheets/components/CallingReactionsToasts.scss
@@ -1,9 +1,12 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .CallingReactionsToasts {
   position: absolute;
-  inset-block-end: calc($CallControls__height + 32px);
+  inset-block-end: calc(variables.$CallControls__height + 32px);
   inset-inline-start: 65px;
   width: 100%;
 }
@@ -25,9 +28,9 @@
 }
 
 .CallingReactionsToasts .CallingToast {
-  @include font-body-1;
+  @include mixins.font-body-1;
   padding-inline: 16px;
-  color: $color-gray-20;
+  color: variables.$color-gray-20;
   font-size: 15px;
   line-height: 20px;
   transform: rotate(-180deg);
diff --git a/stylesheets/components/CallingScreenSharingController.scss b/stylesheets/components/CallingScreenSharingController.scss
index 58ee35a933..fd017bd55a 100644
--- a/stylesheets/components/CallingScreenSharingController.scss
+++ b/stylesheets/components/CallingScreenSharingController.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-CallingScreenSharingController {
   display: flex;
   width: 100%;
@@ -10,10 +13,10 @@
   overflow: hidden;
   align-items: center;
   justify-content: space-between;
-  @include draggable-region;
+  @include mixins.draggable-region;
 
   &__text {
-    @include font-body-2;
+    @include mixins.font-body-2;
     overflow: hidden;
     text-overflow: ellipsis;
     user-select: none;
@@ -39,11 +42,16 @@
   }
 
   &__close {
-    @include button-reset;
-    @include color-svg('../images/icons/v3/x/x.svg', $color-gray-25);
-    width: 4.5vw;
-    height: 45.5vh;
-    margin-inline-start: 2.5vw;
-    cursor: pointer;
+    @include mixins.button-reset;
+    @include mixins.color-svg(
+      '../images/icons/v3/x/x.svg',
+      variables.$color-gray-25
+    );
+    & {
+      width: 4.5vw;
+      height: 45.5vh;
+      margin-inline-start: 2.5vw;
+      cursor: pointer;
+    }
   }
 }
diff --git a/stylesheets/components/CallingSelectPresentingSourcesModal.scss b/stylesheets/components/CallingSelectPresentingSourcesModal.scss
index fd84258515..af9d965e43 100644
--- a/stylesheets/components/CallingSelectPresentingSourcesModal.scss
+++ b/stylesheets/components/CallingSelectPresentingSourcesModal.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-CallingSelectPresentingSourcesModal {
   &__width-container {
     max-width: 665px;
@@ -10,7 +13,7 @@
   // there's no module-class-name on the footer,
   // so we have to reference it using the generic selector
   .module-Modal__button-footer {
-    background-color: $color-gray-95;
+    background-color: variables.$color-gray-95;
   }
 
   &__sources {
@@ -30,18 +33,19 @@
   }
 
   &__source {
-    @include button-reset();
-
-    border-radius: 4px;
-    border: 1px solid $color-gray-60;
-    overflow: hidden;
-    padding: 8px;
-    text-align: center;
-    width: 200px;
+    @include mixins.button-reset();
+    & {
+      border-radius: 4px;
+      border: 1px solid variables.$color-gray-60;
+      overflow: hidden;
+      padding: 8px;
+      text-align: center;
+      width: 200px;
+    }
 
     &--selected {
-      background-color: $color-ultramarine-dark;
-      border: 1px solid $color-ultramarine-dark;
+      background-color: variables.$color-ultramarine-dark;
+      border: 1px solid variables.$color-ultramarine-dark;
     }
 
     img {
diff --git a/stylesheets/components/CallingStatusIndicator.scss b/stylesheets/components/CallingStatusIndicator.scss
index 81e45eb7d3..adbe1d2abd 100644
--- a/stylesheets/components/CallingStatusIndicator.scss
+++ b/stylesheets/components/CallingStatusIndicator.scss
@@ -1,6 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .CallingStatusIndicator {
   $size: 28px;
 
@@ -10,9 +13,9 @@
   height: $size;
   min-width: $size;
   width: $size;
-  z-index: $z-index-base;
+  z-index: variables.$z-index-base;
   border-radius: calc($size / 2);
-  background: rgba($color-gray-80, 0.7);
+  background: rgba(variables.$color-gray-80, 0.7);
 
   &::after {
     content: '';
@@ -23,26 +26,26 @@
 }
 
 .CallingStatusIndicator--HandRaised {
-  background: $color-white;
+  background: variables.$color-white;
 }
 
 .CallingStatusIndicator--HandRaised::after {
-  @include color-svg(
+  @include mixins.color-svg(
     '../images/icons/v3/raise_hand/raise_hand-light.svg',
-    $color-black
+    variables.$color-black
   );
 }
 
 .CallingStatusIndicator--Video::after {
-  @include color-svg(
+  @include mixins.color-svg(
     '../images/icons/v3/video/video-slash-fill-light.svg',
-    $color-white
+    variables.$color-white
   );
 }
 
 .module-ongoing-call__footer__local-preview .CallingStatusIndicator {
   position: absolute;
-  z-index: $z-index-base;
+  z-index: variables.$z-index-base;
 }
 
 .module-ongoing-call__footer__local-preview .CallingStatusIndicator--Video {
diff --git a/stylesheets/components/CallingToast.scss b/stylesheets/components/CallingToast.scss
index dda4093ecf..9d810077aa 100644
--- a/stylesheets/components/CallingToast.scss
+++ b/stylesheets/components/CallingToast.scss
@@ -1,9 +1,12 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .CallingToasts {
   position: fixed;
-  z-index: $z-index-toast;
+  z-index: variables.$z-index-toast;
   top: 32px;
   width: 100%;
   display: flex;
@@ -21,16 +24,16 @@
 }
 
 .CallingToast--dismissable {
-  @include button-reset();
+  @include mixins.button-reset();
 }
 
 .CallingToast {
-  @include font-subtitle;
+  @include mixins.font-subtitle;
   padding-block: 8px;
   padding-inline: 12px;
   border-radius: 22px;
-  background-color: $color-gray-80;
-  color: $color-gray-15;
+  background-color: variables.$color-gray-80;
+  color: variables.$color-gray-15;
   text-align: center;
   user-select: none;
   &__reconnecting {
@@ -42,10 +45,10 @@
 
 .CallingButtonToasts__outer {
   position: absolute;
-  inset-block-end: calc($CallControls__height + 16px);
+  inset-block-end: calc(variables.$CallControls__height + 16px);
   width: 100%;
   // Match .module-ongoing-call__footer
-  z-index: $z-index-above-base;
+  z-index: variables.$z-index-above-base;
 }
 
 // Match the width behavior of .CallControls
@@ -53,8 +56,8 @@
   display: flex;
   flex-grow: 1;
   flex-shrink: 0;
-  flex-basis: $CallControls__initial-width;
-  max-width: $CallControls__max-width;
+  flex-basis: variables.$CallControls__initial-width;
+  max-width: variables.$CallControls__max-width;
 }
 
 .CallingButtonToasts .CallingToasts {
diff --git a/stylesheets/components/CallsTab.scss b/stylesheets/components/CallsTab.scss
index 95053980cf..312ea496e8 100644
--- a/stylesheets/components/CallsTab.scss
+++ b/stylesheets/components/CallsTab.scss
@@ -1,6 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .CallsTab {
   display: flex;
   width: 100%;
@@ -11,16 +14,16 @@
   display: block;
   width: 20px;
   height: 20px;
-  @include light-theme {
-    @include color-svg(
+  @include mixins.light-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/phone/phone-plus-light.svg',
-      $color-black
+      variables.$color-black
     );
   }
-  @include dark-theme {
-    @include color-svg(
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/phone/phone-plus-light.svg',
-      $color-gray-15
+      variables.$color-gray-15
     );
   }
 }
@@ -29,11 +32,17 @@
   display: block;
   width: 20px;
   height: 20px;
-  @include light-theme {
-    @include color-svg('../images/icons/v3/more/more.svg', $color-black);
+  @include mixins.light-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/more/more.svg',
+      variables.$color-black
+    );
   }
-  @include dark-theme {
-    @include color-svg('../images/icons/v3/more/more.svg', $color-gray-15);
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/more/more.svg',
+      variables.$color-gray-15
+    );
   }
 }
 
@@ -52,16 +61,16 @@
   width: 40px;
   height: 40px;
   opacity: 0.7;
-  @include light-theme {
-    @include color-svg(
+  @include mixins.light-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/phone/phone-display-bold.svg',
-      $color-gray-60
+      variables.$color-gray-60
     );
   }
-  @include dark-theme {
-    @include color-svg(
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/phone/phone-display-bold.svg',
-      $color-gray-25
+      variables.$color-gray-25
     );
   }
 }
@@ -71,11 +80,11 @@
   margin-inline: 0;
   opacity: 0.7;
   text-align: center;
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 
@@ -85,16 +94,16 @@
 
   width: 16px;
   height: 16px;
-  @include light-theme {
-    @include color-svg(
+  @include mixins.light-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/phone/phone-plus-bold.svg',
-      $color-gray-60
+      variables.$color-gray-60
     );
   }
-  @include dark-theme {
-    @include color-svg(
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/phone/phone-plus-bold.svg',
-      $color-gray-25
+      variables.$color-gray-25
     );
   }
 }
@@ -110,16 +119,16 @@
 }
 
 .CallsTab__ClearCallHistoryIcon {
-  @include light-theme {
-    @include color-svg(
+  @include mixins.light-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/trash/trash-compact.svg',
-      $color-gray-90
+      variables.$color-gray-90
     );
   }
-  @include dark-theme {
-    @include color-svg(
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/trash/trash-compact.svg',
-      $color-white
+      variables.$color-white
     );
   }
 }
@@ -133,10 +142,10 @@
   display: flex;
   align-items: center;
 
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
 
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
   padding-inline-start: 24px;
   text-overflow: ellipsis;
@@ -145,27 +154,29 @@
 }
 
 .CallsList__ToggleFilterByMissed {
-  @include button-reset;
-  flex-shrink: 0;
-  padding: 4px;
-  margin-inline-end: 8px;
-  border-radius: 4px;
+  @include mixins.button-reset;
+  & {
+    flex-shrink: 0;
+    padding: 4px;
+    margin-inline-end: 8px;
+    border-radius: 4px;
+  }
 
   &:not(.CallsList__ToggleFilterByMissed--pressed):hover {
-    @include light-theme {
-      background-color: $color-black-alpha-06;
+    @include mixins.light-theme {
+      background-color: variables.$color-black-alpha-06;
     }
-    @include dark-theme {
-      background-color: $color-white-alpha-06;
+    @include mixins.dark-theme {
+      background-color: variables.$color-white-alpha-06;
     }
   }
 
   &:focus {
     outline: none;
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       box-shadow:
-        0 0 0 2px $color-white,
-        0 0 0 4px $color-ultramarine;
+        0 0 0 2px variables.$color-white,
+        0 0 0 4px variables.$color-ultramarine;
     }
   }
 
@@ -174,13 +185,16 @@
     display: block;
     width: 20px;
     height: 20px;
-    @include light-theme {
-      @include color-svg('../images/icons/v3/filter/filter.svg', $color-black);
-    }
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/filter/filter.svg',
-        $color-gray-15
+        variables.$color-black
+      );
+    }
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/filter/filter.svg',
+        variables.$color-gray-15
       );
     }
   }
@@ -188,14 +202,17 @@
 
 .CallsList__ToggleFilterByMissed--pressed {
   border-radius: 9999px;
-  background: $color-accent-blue;
+  background: variables.$color-accent-blue;
   &::before {
-    @include color-svg('../images/icons/v3/filter/filter.svg', $color-white);
+    @include mixins.color-svg(
+      '../images/icons/v3/filter/filter.svg',
+      variables.$color-white
+    );
   }
 }
 
 .CallsList__ToggleFilterByMissedLabel {
-  @include sr-only;
+  @include mixins.sr-only;
 }
 
 .CallsList__ListContainer {
@@ -204,7 +221,7 @@
 }
 
 .CallsList__List {
-  @include NavTabs__Scroller;
+  @include mixins.NavTabs__Scroller;
 }
 
 .CallsList__List--disableScrolling {
@@ -225,31 +242,43 @@
 }
 
 .CallsList__ItemIcon--Phone {
-  @include light-theme {
-    @include color-svg('../images/icons/v3/phone/phone.svg', $color-black);
+  @include mixins.light-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/phone/phone.svg',
+      variables.$color-black
+    );
   }
-  @include dark-theme {
-    @include color-svg('../images/icons/v3/phone/phone.svg', $color-gray-15);
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/phone/phone.svg',
+      variables.$color-gray-15
+    );
   }
 }
 
 .CallsList__ItemIcon--Video {
-  @include light-theme {
-    @include color-svg('../images/icons/v3/video/video.svg', $color-black);
+  @include mixins.light-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/video/video.svg',
+      variables.$color-black
+    );
   }
-  @include dark-theme {
-    @include color-svg('../images/icons/v3/video/video.svg', $color-gray-15);
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/video/video.svg',
+      variables.$color-gray-15
+    );
   }
 }
 
 .CallsList__LoadingAvatar,
 .CallsList__LoadingText {
   animation: CallsList__LoadingPulse 1.5s ease-in-out infinite;
-  @include light-theme {
-    background-color: $color-gray-05;
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-05;
   }
-  @include dark-theme {
-    background-color: $color-gray-75;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-75;
   }
 }
 
@@ -282,11 +311,11 @@
 .CallsList__Item--missed .ListTile__subtitle,
 .CallsList__Item--declined .ListTile__subtitle {
   // Need to override the themed selector specificity of .ListTile__subtitle
-  @include light-theme {
-    color: $color-accent-red;
+  @include mixins.light-theme {
+    color: variables.$color-accent-red;
   }
-  @include dark-theme {
-    color: $color-accent-red;
+  @include mixins.dark-theme {
+    color: variables.$color-accent-red;
   }
 }
 
@@ -296,16 +325,16 @@
 
   // Override .ListTile__subtitle with correct font size
   .ListTile__subtitle {
-    @include font-body-2;
+    @include mixins.font-body-2;
   }
 }
 
 .CallsList__Item--selected .CallsList__ItemTile {
-  @include light-theme {
-    background-color: $color-gray-15;
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-15;
   }
-  @include dark-theme {
-    background-color: $color-gray-65;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-65;
   }
 }
 
@@ -325,13 +354,13 @@
 }
 
 .CallsNewCall__List {
-  @include NavTabs__Scroller;
+  @include mixins.NavTabs__Scroller;
 }
 
 .CallsNewCall__ListHeaderItem {
   padding-block: 10px;
   padding-inline: 24px;
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
 }
 
 .CallsNewCall__EmptyState {
@@ -347,21 +376,23 @@
 }
 
 .CallsNewCall__ItemActionButton {
-  @include button-reset;
-  padding: 4px;
-  border-radius: 4px;
+  @include mixins.button-reset;
+  & {
+    padding: 4px;
+    border-radius: 4px;
+  }
   &:not(:disabled, [aria-disabled='true']):hover {
-    @include light-theme {
-      background: $color-gray-20;
+    @include mixins.light-theme {
+      background: variables.$color-gray-20;
     }
-    @include dark-theme {
-      background: $color-gray-62;
+    @include mixins.dark-theme {
+      background: variables.$color-gray-62;
     }
   }
   &:focus {
     outline: none;
-    @include keyboard-mode {
-      box-shadow: 0 0 0 2px $color-ultramarine;
+    @include mixins.keyboard-mode {
+      box-shadow: 0 0 0 2px variables.$color-ultramarine;
     }
   }
   &:disabled,
@@ -371,24 +402,28 @@
 }
 
 .CallsNewCall__ItemActionButton--join-call {
-  @include button-active-call;
-  height: 26px;
-  padding-block: 4px;
-  padding-inline: 10px;
+  @include mixins.button-active-call;
+  & {
+    height: 26px;
+    padding-block: 4px;
+    padding-inline: 10px;
+  }
 }
 
 .CallsNewCall__ItemActionButton--join-call-disabled {
-  @include light-theme {
+  @include mixins.light-theme {
     opacity: 0.4;
   }
-  @include dark-theme {
+  @include mixins.dark-theme {
     opacity: 0.5;
   }
 }
 
 .CallsNewCall__ItemActionButtonTooltip {
-  @include tooltip;
-  max-width: 212px;
+  @include mixins.tooltip;
+  & {
+    max-width: 212px;
+  }
 }
 
 .CallsNewCall__ItemIcon {
@@ -398,19 +433,31 @@
 }
 
 .CallsNewCall__ItemIcon--Phone {
-  @include light-theme {
-    @include color-svg('../images/icons/v3/phone/phone.svg', $color-black);
+  @include mixins.light-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/phone/phone.svg',
+      variables.$color-black
+    );
   }
-  @include dark-theme {
-    @include color-svg('../images/icons/v3/phone/phone.svg', $color-gray-15);
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/phone/phone.svg',
+      variables.$color-gray-15
+    );
   }
 }
 
 .CallsNewCall__ItemIcon--Video {
-  @include light-theme {
-    @include color-svg('../images/icons/v3/video/video.svg', $color-black);
+  @include mixins.light-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/video/video.svg',
+      variables.$color-black
+    );
   }
-  @include dark-theme {
-    @include color-svg('../images/icons/v3/video/video.svg', $color-gray-15);
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/video/video.svg',
+      variables.$color-gray-15
+    );
   }
 }
diff --git a/stylesheets/components/ChatColorPicker.scss b/stylesheets/components/ChatColorPicker.scss
index c4befd4f81..acb228e3cd 100644
--- a/stylesheets/components/ChatColorPicker.scss
+++ b/stylesheets/components/ChatColorPicker.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .ChatColorPicker {
   $bubble-size: 52px;
 
@@ -10,12 +13,12 @@
     margin-inline: auto;
 
     hr {
-      @include light-theme {
-        border-color: $color-gray-15;
+      @include mixins.light-theme {
+        border-color: variables.$color-gray-15;
       }
 
-      @include dark-theme {
-        border-color: $color-gray-75;
+      @include mixins.dark-theme {
+        border-color: variables.$color-gray-75;
       }
     }
   }
@@ -38,18 +41,18 @@
     align-items: center;
     display: flex;
     justify-content: center;
-    @include color-bubble($bubble-size);
+    @include mixins.color-bubble($bubble-size);
 
     &--selected {
-      border-color: $color-gray-75;
+      border-color: variables.$color-gray-75;
 
-      @include dark-theme {
-        border-color: $color-white;
+      @include mixins.dark-theme {
+        border-color: variables.$color-white;
       }
     }
 
     &:focus {
-      border-color: $color-ultramarine;
+      border-color: variables.$color-ultramarine;
       outline: none;
     }
 
@@ -59,19 +62,27 @@
         display: block;
         height: 24px;
         width: 24px;
-        @include color-svg('../images/icons/v3/more/more.svg', $color-gray-05);
+        @include mixins.color-svg(
+          '../images/icons/v3/more/more.svg',
+          variables.$color-gray-05
+        );
       }
     }
 
     &--custom {
-      background-color: $color-gray-05;
+      background-color: variables.$color-gray-05;
     }
   }
 
   &__add-icon {
-    @include color-svg('../images/icons/v3/plus/plus.svg', $color-gray-90);
-    display: block;
-    height: 24px;
-    width: 24px;
+    @include mixins.color-svg(
+      '../images/icons/v3/plus/plus.svg',
+      variables.$color-gray-90
+    );
+    & {
+      display: block;
+      height: 24px;
+      width: 24px;
+    }
   }
 }
diff --git a/stylesheets/components/Checkbox.scss b/stylesheets/components/Checkbox.scss
index 60a8d7db87..8a17779385 100644
--- a/stylesheets/components/Checkbox.scss
+++ b/stylesheets/components/Checkbox.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .Checkbox {
   &__container {
     align-items: center;
@@ -10,17 +13,17 @@
       height: 18px;
       width: 18px;
 
-      @include mouse-mode {
+      @include mixins.mouse-mode {
         &:focus,
         &:active {
           outline: none;
         }
       }
 
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus,
         &:active {
-          outline: 1px solid $color-ultramarine;
+          outline: 1px solid variables.$color-ultramarine;
         }
       }
     }
@@ -33,12 +36,12 @@
   }
 
   &__description {
-    @include font-subtitle;
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.font-subtitle;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
   }
 }
diff --git a/stylesheets/components/CircleCheckbox.scss b/stylesheets/components/CircleCheckbox.scss
index 8c8c932c7c..0367a99620 100644
--- a/stylesheets/components/CircleCheckbox.scss
+++ b/stylesheets/components/CircleCheckbox.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .CircleCheckbox {
   &__checkbox {
     position: relative;
@@ -13,17 +16,17 @@
       position: absolute;
       width: 0;
 
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus {
           &::before {
-            border-color: $color-ultramarine;
+            border-color: variables.$color-ultramarine;
           }
           outline: none;
         }
       }
 
       &::before {
-        @include rounded-corners;
+        @include mixins.rounded-corners;
         background: inherit;
         content: '';
         display: block;
@@ -31,11 +34,11 @@
         position: absolute;
         width: 20px;
 
-        @include light-theme {
-          border: 1.5px solid $color-gray-25;
+        @include mixins.light-theme {
+          border: 1.5px solid variables.$color-gray-25;
         }
-        @include dark-theme {
-          border: 1.5px solid $color-gray-65;
+        @include mixins.dark-theme {
+          border: 1.5px solid variables.$color-gray-65;
         }
       }
 
@@ -43,30 +46,30 @@
         cursor: inherit;
       }
 
-      @include light-theme {
+      @include mixins.light-theme {
         &:disabled {
           &::before {
-            border-color: $color-gray-15;
+            border-color: variables.$color-gray-15;
           }
         }
         &:disabled:checked {
           &::before {
-            background: $color-gray-15;
-            border-color: $color-gray-15;
+            background: variables.$color-gray-15;
+            border-color: variables.$color-gray-15;
           }
         }
       }
 
-      @include dark-theme {
+      @include mixins.dark-theme {
         &:disabled {
           &::before {
-            border-color: $color-gray-45;
+            border-color: variables.$color-gray-45;
           }
         }
         &:disabled:checked {
           &::before {
-            background: $color-gray-45;
-            border-color: $color-gray-45;
+            background: variables.$color-gray-45;
+            border-color: variables.$color-gray-45;
           }
         }
       }
@@ -83,19 +86,21 @@
     input[type='checkbox'] {
       &:checked {
         &:not([disabled])::before {
-          background: $color-ultramarine;
-          border: 1.5px solid $color-ultramarine;
+          background: variables.$color-ultramarine;
+          border: 1.5px solid variables.$color-ultramarine;
         }
 
         &::after {
-          @include color-svg(
+          @include mixins.color-svg(
             '../images/icons/v3/check/check-compact-bold.svg',
-            $color-white
+            variables.$color-white
           );
-          width: 14px;
-          height: 14px;
-          top: 3px;
-          inset-inline-start: 3px;
+          & {
+            width: 14px;
+            height: 14px;
+            top: 3px;
+            inset-inline-start: 3px;
+          }
         }
       }
     }
@@ -103,11 +108,11 @@
     input[type='radio'] {
       &:checked {
         &::before {
-          border: 2px solid $color-ultramarine;
+          border: 2px solid variables.$color-ultramarine;
         }
 
         &::after {
-          background: $color-ultramarine;
+          background: variables.$color-ultramarine;
           top: 4px;
           inset-inline-start: 4px;
           width: 12px;
@@ -131,12 +136,12 @@
       input[type='checkbox'] {
         &:checked {
           &::before {
-            background: $color-ultramarine;
-            border: 1.5px solid $color-ultramarine;
+            background: variables.$color-ultramarine;
+            border: 1.5px solid variables.$color-ultramarine;
           }
 
           &::after {
-            border: solid $color-white;
+            border: solid variables.$color-white;
             border-width: 0 2px 2px 0;
             height: 10px;
             /* stylelint-disable-next-line liberty/use-logical-spec */
@@ -151,11 +156,11 @@
       input[type='radio'] {
         &:checked {
           &::before {
-            border: 2px solid $color-ultramarine;
+            border: 2px solid variables.$color-ultramarine;
           }
 
           &::after {
-            background: $color-ultramarine;
+            background: variables.$color-ultramarine;
             top: 4px;
             /* stylelint-disable-next-line liberty/use-logical-spec */
             left: 4px;
diff --git a/stylesheets/components/ClearFilterButton.scss b/stylesheets/components/ClearFilterButton.scss
index e2fb9d799d..ba32169ab3 100644
--- a/stylesheets/components/ClearFilterButton.scss
+++ b/stylesheets/components/ClearFilterButton.scss
@@ -1,6 +1,10 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use 'sass:color';
+@use '../mixins';
+@use '../variables';
+
 .ClearFilterButton {
   display: flex;
   justify-content: center;
@@ -15,23 +19,31 @@
     padding-block: 5px;
     padding-inline: 15px;
 
-    @include dark-theme {
-      background-color: mix($color-gray-80, $color-gray-65, 40%);
-      color: $color-white;
+    @include mixins.dark-theme {
+      background-color: color.mix(
+        variables.$color-gray-80,
+        variables.$color-gray-65,
+        40%
+      );
+      color: variables.$color-white;
 
       &:hover {
-        @include not-disabled {
-          background-color: $color-gray-65;
+        @include mixins.not-disabled {
+          background-color: variables.$color-gray-65;
         }
       }
     }
 
-    @include light-theme {
-      background-color: mix($color-gray-04, $color-white, 15%);
-      color: $color-black;
+    @include mixins.light-theme {
+      background-color: color.mix(
+        variables.$color-gray-04,
+        variables.$color-white,
+        15%
+      );
+      color: variables.$color-black;
       &:hover {
-        @include not-disabled {
-          background-color: $color-white;
+        @include mixins.not-disabled {
+          background-color: variables.$color-white;
         }
       }
     }
diff --git a/stylesheets/components/ComposeStepButton.scss b/stylesheets/components/ComposeStepButton.scss
index 8bb8b5db9e..15e68c4c8a 100644
--- a/stylesheets/components/ComposeStepButton.scss
+++ b/stylesheets/components/ComposeStepButton.scss
@@ -1,6 +1,9 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .ComposeStepButton {
   &__icon {
     display: flex;
@@ -11,11 +14,11 @@
     height: 32px;
     border-radius: 16px;
 
-    @include light-theme {
-      background-color: $color-black-alpha-06;
+    @include mixins.light-theme {
+      background-color: variables.$color-black-alpha-06;
     }
-    @include dark-theme {
-      background-color: $color-white-alpha-12;
+    @include mixins.dark-theme {
+      background-color: variables.$color-white-alpha-12;
     }
 
     &::before {
@@ -26,11 +29,11 @@
       -webkit-mask-repeat: no-repeat;
       -webkit-mask-position: center;
 
-      @include light-theme {
-        background-color: $color-black;
+      @include mixins.light-theme {
+        background-color: variables.$color-black;
       }
-      @include dark-theme {
-        background-color: $color-gray-05;
+      @include mixins.dark-theme {
+        background-color: variables.$color-gray-05;
       }
     }
 
diff --git a/stylesheets/components/CompositionArea.scss b/stylesheets/components/CompositionArea.scss
index 5e695a5cc3..911968e281 100644
--- a/stylesheets/components/CompositionArea.scss
+++ b/stylesheets/components/CompositionArea.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .CompositionArea {
   position: relative;
   min-height: 42px;
@@ -56,14 +59,16 @@
   }
 
   &__edit-button {
-    @include button-reset;
-    @include rounded-corners;
-    align-items: center;
-    background-color: $color-gray-45;
-    display: flex;
-    height: 28px;
-    justify-content: center;
-    width: 28px;
+    @include mixins.button-reset;
+    & {
+      @include mixins.rounded-corners;
+      align-items: center;
+      background-color: variables.$color-gray-45;
+      display: flex;
+      height: 28px;
+      justify-content: center;
+      width: 28px;
+    }
 
     &::before {
       content: '';
@@ -73,14 +78,20 @@
 
     &--discard {
       &::before {
-        @include color-svg('../images/icons/v3/x/x.svg', $color-white);
+        @include mixins.color-svg(
+          '../images/icons/v3/x/x.svg',
+          variables.$color-white
+        );
       }
     }
     &--accept {
-      background-color: $color-ultramarine;
+      background-color: variables.$color-ultramarine;
       margin-inline-start: 16px;
       &::before {
-        @include color-svg('../images/icons/v3/check/check.svg', $color-white);
+        @include mixins.color-svg(
+          '../images/icons/v3/check/check.svg',
+          variables.$color-white
+        );
       }
       &:disabled {
         opacity: 0.5;
@@ -102,9 +113,9 @@
       width: 20px;
       height: 20px;
       flex-shrink: 0;
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/send/send-fill.svg',
-        $color-ultramarine
+        variables.$color-ultramarine
       );
     }
   }
@@ -141,12 +152,12 @@
       pointer-events: all;
     }
 
-    @include light-theme() {
-      background-color: $color-white;
+    @include mixins.light-theme() {
+      background-color: variables.$color-white;
     }
 
-    @include dark-theme() {
-      background-color: $color-gray-95;
+    @include mixins.dark-theme() {
+      background-color: variables.$color-gray-95;
     }
 
     &__button {
@@ -154,35 +165,35 @@
       height: 24px;
       border: none;
 
-      @include light-theme() {
-        @include color-svg(
+      @include mixins.light-theme() {
+        @include mixins.color-svg(
           '../images/icons/v3/chevron/chevron-shallow-up.svg',
-          $color-gray-45,
+          variables.$color-gray-45,
           false
         );
       }
 
-      @include dark-theme() {
-        @include color-svg(
+      @include mixins.dark-theme() {
+        @include mixins.color-svg(
           '../images/icons/v3/chevron/chevron-shallow-up.svg',
-          $color-gray-45,
+          variables.$color-gray-45,
           false
         );
       }
 
       &--large-active {
-        @include light-theme() {
-          @include color-svg(
+        @include mixins.light-theme() {
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-shallow-down.svg',
-            $color-gray-45,
+            variables.$color-gray-45,
             false
           );
         }
 
-        @include dark-theme() {
-          @include color-svg(
+        @include mixins.dark-theme() {
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-shallow-down.svg',
-            $color-gray-45,
+            variables.$color-gray-45,
             false
           );
         }
@@ -203,38 +214,38 @@
     padding-inline: 16px;
 
     &:not(.module-composition-area--pending) {
-      @include light-theme {
-        border-top: 1px solid $color-gray-05;
+      @include mixins.light-theme {
+        border-top: 1px solid variables.$color-gray-05;
       }
-      @include dark-theme {
-        border-top: 1px solid $color-gray-75;
+      @include mixins.dark-theme {
+        border-top: 1px solid variables.$color-gray-75;
       }
     }
 
     &__title {
-      @include font-body-2-bold;
+      @include mixins.font-body-2-bold;
       margin-block: 0 2px;
       margin-inline: 0;
 
-      @include light-theme {
-        color: $color-gray-60;
+      @include mixins.light-theme {
+        color: variables.$color-gray-60;
       }
-      @include dark-theme {
-        color: $color-gray-05;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-05;
       }
     }
 
     &__body {
-      @include font-body-2;
+      @include mixins.font-body-2;
       text-align: center;
 
       margin: 0;
 
-      @include light-theme {
-        color: $color-gray-60;
+      @include mixins.light-theme {
+        color: variables.$color-gray-60;
       }
-      @include dark-theme {
-        color: $color-gray-05;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-05;
       }
     }
   }
@@ -250,9 +261,9 @@
     align-items: center;
     justify-content: center;
 
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       &:focus {
-        outline: 2px solid $color-ultramarine;
+        outline: 2px solid variables.$color-ultramarine;
       }
     }
 
@@ -264,16 +275,16 @@
       width: 20px;
       height: 20px;
 
-      @include light-theme {
-        @include color-svg(
+      @include mixins.light-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/attach/attach.svg',
-          $color-gray-75
+          variables.$color-gray-75
         );
       }
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/attach/attach.svg',
-          $color-gray-15
+          variables.$color-gray-15
         );
       }
     }
diff --git a/stylesheets/components/CompositionInput.scss b/stylesheets/components/CompositionInput.scss
index 752ab93a20..747a036222 100644
--- a/stylesheets/components/CompositionInput.scss
+++ b/stylesheets/components/CompositionInput.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-composition-input {
   &__quill {
     height: 100%;
@@ -31,15 +34,15 @@
   }
 
   &__at-mention {
-    background-color: $color-gray-20;
+    background-color: variables.$color-gray-20;
     border-radius: 4px;
     display: inline;
     padding-inline: 4px;
     height: 22px;
     line-height: 22px;
 
-    @include dark-theme {
-      background-color: $color-gray-60;
+    @include mixins.dark-theme {
+      background-color: variables.$color-gray-60;
     }
   }
 
@@ -54,29 +57,29 @@
     .ql-container {
       // Inherit global font stack
       font-family: inherit;
-      @include font-body-1;
+      @include mixins.font-body-1;
     }
 
     .ql-blank::before {
-      @include light-theme() {
-        color: $color-gray-45;
+      @include mixins.light-theme() {
+        color: variables.$color-gray-45;
       }
 
-      @include dark-theme() {
-        color: $color-gray-25;
+      @include mixins.dark-theme() {
+        color: variables.$color-gray-25;
       }
     }
 
-    @include light-theme() {
+    @include mixins.light-theme() {
       // Same as background color
-      background-color: $color-gray-05;
-      color: $color-gray-90;
+      background-color: variables.$color-gray-05;
+      color: variables.$color-gray-90;
     }
 
-    @include dark-theme() {
+    @include mixins.dark-theme() {
       // Same as background color
-      background-color: $color-gray-75;
-      color: $color-gray-05;
+      background-color: variables.$color-gray-75;
+      color: variables.$color-gray-05;
     }
 
     &__scroller {
@@ -89,11 +92,11 @@
       overflow: auto;
 
       &::-webkit-scrollbar-thumb {
-        @include light-theme {
-          border: 2px solid $color-gray-05;
+        @include mixins.light-theme {
+          border: 2px solid variables.$color-gray-05;
         }
-        @include dark-theme {
-          border: 2px solid $color-gray-75;
+        @include mixins.dark-theme {
+          border: 2px solid variables.$color-gray-75;
         }
       }
 
@@ -116,12 +119,14 @@
       }
     }
 
-    border: $border-size solid transparent;
+    & {
+      border: $border-size solid transparent;
+    }
 
     &:focus-within {
       outline: 0;
-      @include keyboard-mode {
-        border: $border-size solid $color-ultramarine;
+      @include mixins.keyboard-mode {
+        border: $border-size solid variables.$color-ultramarine;
       }
     }
   }
@@ -131,7 +136,7 @@
     padding-block: 6px;
     padding-inline: 12px;
     border-radius: 8px;
-    z-index: $z-index-above-popup;
+    z-index: variables.$z-index-above-popup;
 
     display: flex;
     flex-direction: row;
@@ -144,85 +149,87 @@
       0px 4px 10px rgba(0, 0, 0, 30%),
       0px 0px 4px rgba(0, 0, 0, 5%);
 
-    @include light-theme() {
-      background: $color-white;
+    @include mixins.light-theme() {
+      background: variables.$color-white;
     }
-    @include dark-theme() {
-      background: $color-gray-65;
+    @include mixins.dark-theme() {
+      background: variables.$color-gray-65;
     }
 
     &__item {
       $parent: &;
-      @include button-reset;
-
-      height: 24px;
-      width: 24px;
-      border-radius: 4px;
-
-      margin-inline-end: 8px;
+      @include mixins.button-reset;
+      & {
+        height: 24px;
+        width: 24px;
+        border-radius: 4px;
+        margin-inline-end: 8px;
+      }
       &:last-child {
         margin-inline-end: 0;
       }
 
-      @include mouse-mode {
+      @include mixins.mouse-mode {
         &:hover {
-          background-color: $color-gray-05;
+          background-color: variables.$color-gray-05;
         }
       }
-      @include dark-mouse-mode {
+      @include mixins.dark-mouse-mode {
         &:hover {
-          background-color: $color-gray-60;
+          background-color: variables.$color-gray-60;
         }
       }
 
       &--active {
-        @include light-theme {
-          background-color: $color-gray-05;
+        @include mixins.light-theme {
+          background-color: variables.$color-gray-05;
         }
-        @include dark-theme {
-          background-color: rgba($color-gray-45, 30%);
+        @include mixins.dark-theme {
+          background-color: rgba(variables.$color-gray-45, 30%);
         }
 
-        @include mouse-mode {
+        @include mixins.mouse-mode {
           &:hover {
-            background-color: $color-gray-15;
+            background-color: variables.$color-gray-15;
           }
         }
-        @include dark-mouse-mode {
+        @include mixins.dark-mouse-mode {
           &:hover {
-            background-color: rgba($color-gray-45, 50%);
+            background-color: rgba(variables.$color-gray-45, 50%);
           }
         }
       }
 
       &__popover {
-        @include font-subtitle-bold;
-        padding-block: 5px;
-        padding-inline: 8px;
-        text-align: center;
-        border-radius: 4px;
-        margin-bottom: 8px;
+        @include mixins.font-subtitle-bold;
+        & {
+          padding-block: 5px;
+          padding-inline: 8px;
+          text-align: center;
+          border-radius: 4px;
+          margin-bottom: 8px;
 
-        opacity: 0;
-        transition: opacity 120ms ease-out;
-
-        @include light-theme {
-          background-color: $color-black;
-          color: $color-gray-05;
+          opacity: 0;
+          transition: opacity 120ms ease-out;
         }
-        @include dark-theme {
-          background-color: $color-gray-65;
-          color: $color-gray-05;
+
+        @include mixins.light-theme {
+          background-color: variables.$color-black;
+          color: variables.$color-gray-05;
+        }
+        @include mixins.dark-theme {
+          background-color: variables.$color-gray-65;
+          color: variables.$color-gray-05;
         }
 
         &__shortcut {
-          @include font-caption-bold;
+          @include mixins.font-caption-bold;
 
-          @include light-theme {
-            color: $color-gray-15;
+          @include mixins.light-theme {
+            color: variables.$color-gray-15;
           }
-          @include dark-theme {
-            color: $color-gray-25;
+          @include mixins.dark-theme {
+            color: variables.$color-gray-25;
           }
         }
       }
@@ -233,76 +240,76 @@
         margin: 2px;
 
         &--bold {
-          @include dark-theme {
-            @include color-svg(
+          @include mixins.dark-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/text_format/textformat-bold-bold.svg',
-              $color-gray-25
+              variables.$color-gray-25
             );
           }
-          @include light-theme {
-            @include color-svg(
+          @include mixins.light-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/text_format/textformat-bold-bold.svg',
-              $color-gray-60
+              variables.$color-gray-60
             );
           }
         }
 
         &--italic {
-          @include dark-theme {
-            @include color-svg(
+          @include mixins.dark-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/text_format/textformat-italic-bold.svg',
-              $color-gray-25
+              variables.$color-gray-25
             );
           }
-          @include light-theme {
-            @include color-svg(
+          @include mixins.light-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/text_format/textformat-italic-bold.svg',
-              $color-gray-60
+              variables.$color-gray-60
             );
           }
         }
 
         &--strike {
-          @include dark-theme {
-            @include color-svg(
+          @include mixins.dark-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/text_format/textformat-strikethrough-bold.svg',
-              $color-gray-25
+              variables.$color-gray-25
             );
           }
-          @include light-theme {
-            @include color-svg(
+          @include mixins.light-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/text_format/textformat-strikethrough-bold.svg',
-              $color-gray-60
+              variables.$color-gray-60
             );
           }
         }
 
         &--monospace {
-          @include dark-theme {
-            @include color-svg(
+          @include mixins.dark-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/text_format/textformat-monospace-bold.svg',
-              $color-gray-25
+              variables.$color-gray-25
             );
           }
-          @include light-theme {
-            @include color-svg(
+          @include mixins.light-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/text_format/textformat-monospace-bold.svg',
-              $color-gray-60
+              variables.$color-gray-60
             );
           }
         }
 
         &--spoiler {
-          @include dark-theme {
-            @include color-svg(
+          @include mixins.dark-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/text_format/textformat-spoiler-bold.svg',
-              $color-gray-25
+              variables.$color-gray-25
             );
           }
-          @include light-theme {
-            @include color-svg(
+          @include mixins.light-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/text_format/textformat-spoiler-bold.svg',
-              $color-gray-60
+              variables.$color-gray-60
             );
           }
         }
@@ -310,26 +317,26 @@
         // Here we look at hover for the parent so the 2px border is a hover target
         // Note: We can't use the mixins because .mouse-mode would end up after the >
         .mouse-mode #{$parent}:hover & {
-          background-color: $color-gray-90;
+          background-color: variables.$color-gray-90;
         }
         .dark-theme.mouse-mode #{$parent}:hover & {
-          background-color: $color-gray-15;
+          background-color: variables.$color-gray-15;
         }
 
         &--active {
-          @include dark-theme {
-            background-color: $color-ultramarine-light;
+          @include mixins.dark-theme {
+            background-color: variables.$color-ultramarine-light;
           }
-          @include light-theme {
-            background-color: $color-ultramarine;
+          @include mixins.light-theme {
+            background-color: variables.$color-ultramarine;
           }
 
           // Override above hover behaviors
           .mouse-mode #{$parent}:hover & {
-            background-color: $color-ultramarine;
+            background-color: variables.$color-ultramarine;
           }
           .dark-theme.mouse-mode #{$parent}:hover & {
-            background-color: $color-ultramarine-light;
+            background-color: variables.$color-ultramarine-light;
           }
         }
       }
@@ -341,7 +348,7 @@
     padding: 0;
     margin-bottom: 6px;
     border-radius: 8px;
-    z-index: $z-index-above-popup;
+    z-index: variables.$z-index-above-popup;
     overflow: hidden;
 
     &--scroller {
@@ -349,14 +356,14 @@
       overflow-y: auto;
     }
 
-    @include popper-shadow();
+    @include mixins.popper-shadow();
 
-    @include light-theme() {
-      background: $color-white;
+    @include mixins.light-theme() {
+      background: variables.$color-white;
     }
 
-    @include dark-theme() {
-      background: $color-gray-75;
+    @include mixins.dark-theme() {
+      background: variables.$color-gray-75;
     }
 
     &__row {
@@ -379,14 +386,16 @@
         outline: 0;
       }
 
-      @include font-body-2;
-
-      @include light-theme() {
-        color: $color-gray-60;
+      & {
+        @include mixins.font-body-2;
       }
 
-      @include dark-theme() {
-        color: $color-gray-25;
+      @include mixins.light-theme() {
+        color: variables.$color-gray-60;
+      }
+
+      @include mixins.dark-theme() {
+        color: variables.$color-gray-25;
       }
 
       &__short-name {
@@ -395,14 +404,14 @@
 
       &--selected,
       &:hover {
-        @include light-theme() {
-          background: $color-gray-05;
-          color: $color-gray-90;
+        @include mixins.light-theme() {
+          background: variables.$color-gray-05;
+          color: variables.$color-gray-90;
         }
 
-        @include dark-theme() {
-          background: $color-gray-60;
-          color: $color-gray-05;
+        @include mixins.dark-theme() {
+          background: variables.$color-gray-60;
+          color: variables.$color-gray-05;
         }
       }
     }
@@ -411,11 +420,13 @@
       padding-inline-start: 8px;
     }
 
-    stroke: $color-white;
+    & {
+      stroke: variables.$color-white;
+    }
   }
 
   &__editing-message {
-    @include font-body-2-bold;
+    @include mixins.font-body-2-bold;
     margin-top: 10px;
     user-select: none;
 
@@ -428,10 +439,16 @@
       width: 16px;
       vertical-align: middle;
 
-      @include color-svg('../images/icons/v3/edit/edit.svg', $color-black);
+      @include mixins.color-svg(
+        '../images/icons/v3/edit/edit.svg',
+        variables.$color-black
+      );
 
-      @include dark-theme {
-        @include color-svg('../images/icons/v3/edit/edit.svg', $color-gray-15);
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/edit/edit.svg',
+          variables.$color-gray-15
+        );
       }
     }
 
@@ -447,7 +464,7 @@
 }
 
 div.CompositionInput__link-preview {
-  background: $color-gray-02;
+  background: variables.$color-gray-02;
   border-radius: 8px;
   flex-direction: row-reverse;
   justify-content: space-between;
@@ -455,8 +472,8 @@ div.CompositionInput__link-preview {
   min-height: 74px;
   overflow: hidden;
 
-  @include dark-theme {
-    background: $color-gray-80;
+  @include mixins.dark-theme {
+    background: variables.$color-gray-80;
   }
 
   &__icon-container {
@@ -480,10 +497,10 @@ div.CompositionInput__link-preview {
 
 button.CompositionInput__link-preview__close-button {
   -webkit-mask: none;
-  @include rounded-corners;
+  @include mixins.rounded-corners;
   align-items: center;
   backdrop-filter: blur(32px);
-  background: $color-white-alpha-80;
+  background: variables.$color-white-alpha-80;
   display: flex;
   height: 20px;
   justify-content: center;
@@ -492,13 +509,18 @@ button.CompositionInput__link-preview__close-button {
   width: 20px;
 
   &::before {
-    @include color-svg('../images/icons/v3/x/x.svg', $color-gray-75);
-    content: '';
-    height: 16px;
-    width: 16px;
+    @include mixins.color-svg(
+      '../images/icons/v3/x/x.svg',
+      variables.$color-gray-75
+    );
+    & {
+      content: '';
+      height: 16px;
+      width: 16px;
+    }
 
-    @include dark-theme {
-      background-color: $color-gray-05;
+    @include mixins.dark-theme {
+      background-color: variables.$color-gray-05;
     }
   }
 }
@@ -506,16 +528,16 @@ button.CompositionInput__link-preview__close-button {
 // Note: These are referenced in formatting/matchers.ts, to detect these styles on paste
 .quill {
   &--monospace {
-    font-family: $monospace;
+    font-family: variables.$monospace;
   }
   &--spoiler {
-    @include light-theme {
+    @include mixins.light-theme {
       // vs color/$color-gray-90, background/$color-gray-05
-      background-color: $color-gray-25;
+      background-color: variables.$color-gray-25;
     }
-    @include dark-theme {
+    @include mixins.dark-theme {
       // vs color/$color-gray-05, background/$color-gray-95
-      background-color: $color-gray-45;
+      background-color: variables.$color-gray-45;
     }
   }
 }
diff --git a/stylesheets/components/CompositionRecording.scss b/stylesheets/components/CompositionRecording.scss
index 078337fa70..0d992a0c1b 100644
--- a/stylesheets/components/CompositionRecording.scss
+++ b/stylesheets/components/CompositionRecording.scss
@@ -1,6 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .CompositionRecording {
   display: flex;
   align-items: center;
@@ -18,11 +21,11 @@
     padding-block: 6px;
     padding-inline: 12px;
 
-    @include light-theme {
-      background: $color-gray-05;
+    @include mixins.light-theme {
+      background: variables.$color-gray-05;
     }
-    @include dark-theme {
-      background: $color-gray-75;
+    @include mixins.dark-theme {
+      background: variables.$color-gray-75;
     }
   }
 
@@ -30,11 +33,13 @@
     display: inline-block;
     height: 20px;
     width: 20px;
-    @include color-svg(
+    @include mixins.color-svg(
       '../images/icons/v3/mic/mic-fill.svg',
-      $color-accent-red
+      variables.$color-accent-red
     );
-    animation: pulse 2s infinite;
+    & {
+      animation: pulse 2s infinite;
+    }
   }
 
   &__timer {
diff --git a/stylesheets/components/CompositionTextArea.scss b/stylesheets/components/CompositionTextArea.scss
index aae55ce262..3e1e4f4509 100644
--- a/stylesheets/components/CompositionTextArea.scss
+++ b/stylesheets/components/CompositionTextArea.scss
@@ -1,6 +1,9 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .CompositionTextArea {
   position: relative;
 
@@ -15,7 +18,7 @@
         border: none;
       }
 
-      @include dark-theme() {
+      @include mixins.dark-theme() {
         border: none;
 
         &:focus-within {
@@ -23,9 +26,9 @@
         }
       }
 
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus-within {
-          border: solid 1px $color-ultramarine;
+          border: solid 1px variables.$color-ultramarine;
         }
       }
     }
@@ -45,13 +48,13 @@
     top: 8px;
 
     button::after {
-      background-color: $color-black;
+      background-color: variables.$color-black;
     }
   }
 
   &__remaining-character-count {
-    @include font-subtitle;
-    color: $color-gray-45;
+    @include mixins.font-subtitle;
+    color: variables.$color-gray-45;
     position: absolute;
     bottom: 0;
     inset-inline-start: 0;
diff --git a/stylesheets/components/ContactListItem.scss b/stylesheets/components/ContactListItem.scss
index 6f0aaf9b17..bcfff5e918 100644
--- a/stylesheets/components/ContactListItem.scss
+++ b/stylesheets/components/ContactListItem.scss
@@ -1,79 +1,82 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .ContactListItem {
   &__context-menu {
     &__chat-icon {
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/chat/chat-compact.svg',
-          $color-white
+          variables.$color-white
         );
       }
-      @include light-theme {
-        @include color-svg(
+      @include mixins.light-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/chat/chat-compact.svg',
-          $color-black
+          variables.$color-black
         );
       }
     }
 
     &__phone-icon {
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/phone/phone-compact.svg',
-          $color-white
+          variables.$color-white
         );
       }
-      @include light-theme {
-        @include color-svg(
+      @include mixins.light-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/phone/phone-compact.svg',
-          $color-black
+          variables.$color-black
         );
       }
     }
 
     &__video-icon {
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/video/video-compact.svg',
-          $color-white
+          variables.$color-white
         );
       }
-      @include light-theme {
-        @include color-svg(
+      @include mixins.light-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/video/video-compact.svg',
-          $color-black
+          variables.$color-black
         );
       }
     }
 
     &__delete-icon {
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/minus/minus-circle-compact.svg',
-          $color-white
+          variables.$color-white
         );
       }
-      @include light-theme {
-        @include color-svg(
+      @include mixins.light-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/minus/minus-circle-compact.svg',
-          $color-black
+          variables.$color-black
         );
       }
     }
 
     &__block-icon {
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/block/block-compact.svg',
-          $color-white
+          variables.$color-white
         );
       }
-      @include light-theme {
-        @include color-svg(
+      @include mixins.light-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/block/block-compact.svg',
-          $color-black
+          variables.$color-black
         );
       }
     }
@@ -91,12 +94,12 @@
       }
 
       &:hover {
-        @include light-theme {
-          background-color: $color-gray-20;
+        @include mixins.light-theme {
+          background-color: variables.$color-gray-20;
         }
 
-        @include dark-theme {
-          background-color: $color-gray-80;
+        @include mixins.dark-theme {
+          background-color: variables.$color-gray-80;
         }
       }
 
@@ -111,11 +114,17 @@
         height: 20px;
         content: '';
 
-        @include dark-theme {
-          @include color-svg('../images/icons/v3/more/more.svg', $color-white);
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
+            '../images/icons/v3/more/more.svg',
+            variables.$color-white
+          );
         }
-        @include light-theme {
-          @include color-svg('../images/icons/v3/more/more.svg', $color-black);
+        @include mixins.light-theme {
+          @include mixins.color-svg(
+            '../images/icons/v3/more/more.svg',
+            variables.$color-black
+          );
         }
       }
     }
diff --git a/stylesheets/components/ContactModal.scss b/stylesheets/components/ContactModal.scss
index d6a1fb0061..79efa297d2 100644
--- a/stylesheets/components/ContactModal.scss
+++ b/stylesheets/components/ContactModal.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .ContactModal {
   align-items: center;
   display: flex;
@@ -11,16 +14,18 @@
   padding-inline: 24px;
 
   &__name {
-    @include button-reset();
-    @include font-title-1;
-    font-weight: 400;
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    max-width: 100%;
+    @include mixins.button-reset();
+    & {
+      @include mixins.font-title-1;
+      font-weight: 400;
+      display: flex;
+      flex-direction: row;
+      align-items: baseline;
+      max-width: 100%;
 
-    margin-top: 12px;
-    cursor: pointer;
+      margin-top: 12px;
+      cursor: pointer;
+    }
   }
 
   &__name__text {
@@ -32,7 +37,7 @@
   &__name__contact-icon {
     height: 22px;
     width: 22px;
-    @include any-theme {
+    @include mixins.any-theme {
       background-color: currentColor;
     }
   }
@@ -48,16 +53,16 @@
     position: relative;
     inset-block-start: 2px;
 
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/chevron/chevron-right-bold.svg',
-        $color-gray-90
+        variables.$color-gray-90
       );
     }
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/chevron/chevron-right-bold.svg',
-        $color-gray-05
+        variables.$color-gray-05
       );
     }
   }
@@ -77,32 +82,33 @@
   }
 
   &__button {
-    @include button-reset;
-
-    display: flex;
-    align-items: center;
-    padding-block: 6px;
-    width: 100%;
+    @include mixins.button-reset;
+    & {
+      display: flex;
+      align-items: center;
+      padding-block: 6px;
+      width: 100%;
+    }
 
     &:last-child {
       margin-bottom: 0;
     }
 
     &:hover {
-      background-color: $color-gray-02;
+      background-color: variables.$color-gray-02;
 
-      @include dark-theme {
-        background-color: $color-gray-80;
+      @include mixins.dark-theme {
+        background-color: variables.$color-gray-80;
       }
     }
 
     &:focus {
-      @include keyboard-mode {
-        background-color: $color-gray-02;
+      @include mixins.keyboard-mode {
+        background-color: variables.$color-gray-02;
       }
 
-      @include dark-keyboard-mode {
-        background-color: $color-gray-80;
+      @include mixins.dark-keyboard-mode {
+        background-color: variables.$color-gray-80;
       }
     }
   }
@@ -119,12 +125,18 @@
     height: 20px;
     width: 20px;
 
-    @include light-theme {
-      @include color-svg('../images/icons/v3/edit/edit.svg', $color-gray-75);
+    @include mixins.light-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/edit/edit.svg',
+        variables.$color-gray-75
+      );
     }
 
-    @include dark-theme {
-      @include color-svg('../images/icons/v3/edit/edit.svg', $color-gray-15);
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/edit/edit.svg',
+        variables.$color-gray-15
+      );
     }
   }
 
@@ -132,12 +144,18 @@
     height: 20px;
     width: 20px;
 
-    @include light-theme {
-      @include color-svg('../images/icons/v3/chat/chat.svg', $color-gray-75);
+    @include mixins.light-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/chat/chat.svg',
+        variables.$color-gray-75
+      );
     }
 
-    @include dark-theme {
-      @include color-svg('../images/icons/v3/chat/chat.svg', $color-gray-15);
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/chat/chat.svg',
+        variables.$color-gray-15
+      );
     }
   }
 
@@ -145,17 +163,17 @@
     height: 20px;
     width: 20px;
 
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/safety_number/safety_number.svg',
-        $color-gray-75
+        variables.$color-gray-75
       );
     }
 
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/safety_number/safety_number.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
   }
@@ -164,12 +182,18 @@
     height: 20px;
     width: 20px;
 
-    @include light-theme {
-      @include color-svg('../images/icons/v3/block/block.svg', $color-gray-75);
+    @include mixins.light-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/block/block.svg',
+        variables.$color-gray-75
+      );
     }
 
-    @include dark-theme {
-      @include color-svg('../images/icons/v3/block/block.svg', $color-gray-15);
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/block/block.svg',
+        variables.$color-gray-15
+      );
     }
   }
 
@@ -177,12 +201,18 @@
     height: 20px;
     width: 20px;
 
-    @include light-theme {
-      @include color-svg('../images/icons/v3/key/key.svg', $color-gray-75);
+    @include mixins.light-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/key/key.svg',
+        variables.$color-gray-75
+      );
     }
 
-    @include dark-theme {
-      @include color-svg('../images/icons/v3/key/key.svg', $color-gray-15);
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/key/key.svg',
+        variables.$color-gray-15
+      );
     }
   }
 
@@ -190,17 +220,17 @@
     height: 20px;
     width: 20px;
 
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/plus/plus-circle.svg',
-        $color-gray-75
+        variables.$color-gray-75
       );
     }
 
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/plus/plus-circle.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
   }
@@ -209,12 +239,18 @@
     height: 20px;
     width: 20px;
 
-    @include light-theme {
-      @include color-svg('../images/icons/v3/leave/leave.svg', $color-gray-75);
+    @include mixins.light-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/leave/leave.svg',
+        variables.$color-gray-75
+      );
     }
 
-    @include dark-theme {
-      @include color-svg('../images/icons/v3/leave/leave.svg', $color-gray-15);
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/leave/leave.svg',
+        variables.$color-gray-15
+      );
     }
   }
 
@@ -237,7 +273,7 @@
       width: 10px;
       height: 10px;
       border-radius: 5px;
-      background: $color-white;
+      background: variables.$color-white;
     }
   }
 
@@ -251,9 +287,9 @@
       inset-inline-start: 0;
       width: 100%;
       height: 100%;
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/official/official-compact.svg',
-        $color-ultramarine
+        variables.$color-ultramarine
       );
     }
   }
@@ -276,9 +312,9 @@
       inset-inline-start: 0;
       width: 100%;
       height: 100%;
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/official/official.svg',
-        $color-ultramarine
+        variables.$color-ultramarine
       );
     }
   }
@@ -299,14 +335,16 @@
     border-bottom: none;
     border-width: 1px;
 
-    @include light-theme {
-      border-color: $color-gray-15;
+    @include mixins.light-theme {
+      border-color: variables.$color-gray-15;
     }
 
-    @include dark-theme {
-      border-color: $color-gray-75;
+    @include mixins.dark-theme {
+      border-color: variables.$color-gray-75;
     }
 
-    margin-block: 8px 5px;
+    & {
+      margin-block: 8px 5px;
+    }
   }
 }
diff --git a/stylesheets/components/ContactName.scss b/stylesheets/components/ContactName.scss
index bdf7be6ce9..09f00cebd8 100644
--- a/stylesheets/components/ContactName.scss
+++ b/stylesheets/components/ContactName.scss
@@ -1,8 +1,10 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+
 button.module-contact-name {
-  @include button-reset;
+  @include mixins.button-reset;
 
   &:hover,
   &:focus {
@@ -10,7 +12,7 @@ button.module-contact-name {
   }
 
   &:focus {
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       outline: auto;
       text-decoration: none;
     }
@@ -20,252 +22,252 @@ button.module-contact-name {
 .module-contact-name {
   &--000 {
     color: #d00b0b;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #ff7070;
     }
   }
 
   &--010 {
     color: #c13215;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #ff6f52;
     }
   }
 
   &--020 {
     color: #b34209;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #f57a3d;
     }
   }
 
   &--030 {
     color: #9c5711;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #d5920b;
     }
   }
 
   &--040 {
     color: #866118;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #d68f00;
     }
   }
 
   &--050 {
     color: #76681e;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #b89b0a;
     }
   }
 
   &--060 {
     color: #6b6b24;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #a4a437;
     }
   }
 
   &--070 {
     color: #5e6e0c;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #8faa09;
     }
   }
 
   &--080 {
     color: #4b7000;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #74ad00;
     }
   }
 
   &--090 {
     color: #3d7406;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #5eb309;
     }
   }
 
   &--100 {
     color: #2d7906;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #42b309;
     }
   }
 
   &--110 {
     color: #2d761e;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #43b42d;
     }
   }
 
   &--120 {
     color: #067906;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #0ab80a;
     }
   }
 
   &--130 {
     color: #067919;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #0ab827;
     }
   }
 
   &--140 {
     color: #06792d;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #0ab844;
     }
   }
 
   &--150 {
     color: #007a3d;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #00b85c;
     }
   }
 
   &--160 {
     color: #067953;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #00b87a;
     }
   }
 
   &--170 {
     color: #067462;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #09b397;
     }
   }
 
   &--180 {
     color: #007575;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #00b2b2;
     }
   }
 
   &--190 {
     color: #077288;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #00aed1;
     }
   }
 
   &--200 {
     color: #006da3;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #00a7fa;
     }
   }
 
   &--210 {
     color: #5b6976;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #8ba1b6;
     }
   }
 
   &--220 {
     color: #2662d9;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #7da1e8;
     }
   }
 
   &--230 {
     color: #2e51ff;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #8599ff;
     }
   }
 
   &--240 {
     color: #5151f6;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #9494ff;
     }
   }
 
   &--250 {
     color: #6447f5;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #a18ff9;
     }
   }
 
   &--260 {
     color: #7a3df5;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #af8af9;
     }
   }
 
   &--270 {
     color: #8f2af4;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #bf80ff;
     }
   }
 
   &--280 {
     color: #a20ced;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #cf7cf8;
     }
   }
 
   &--290 {
     color: #af0bd0;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #e06ef7;
     }
   }
 
   &--300 {
     color: #b814b8;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #f65af6;
     }
   }
 
   &--310 {
     color: #c20aa3;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #f75fdd;
     }
   }
 
   &--320 {
     color: #c70a88;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #f76ec9;
     }
   }
 
   &--330 {
     color: #cc0066;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #f76eb2;
     }
   }
 
   &--340 {
     color: #d00b4d;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #ff6b9c;
     }
   }
 
   &--350 {
     color: #d00b2c;
-    @include dark-theme {
+    @include mixins.dark-theme {
       color: #f77389;
     }
   }
diff --git a/stylesheets/components/ContactPill.scss b/stylesheets/components/ContactPill.scss
index 413511303d..86bde98400 100644
--- a/stylesheets/components/ContactPill.scss
+++ b/stylesheets/components/ContactPill.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-ContactPill {
   align-items: center;
   display: inline-flex;
@@ -10,31 +13,31 @@
   padding-inline: 8px;
   border-radius: 6px;
 
-  @include light-theme {
-    background: $color-black-alpha-08;
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    background: variables.$color-black-alpha-08;
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    background: $color-white-alpha-12;
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    background: variables.$color-white-alpha-12;
+    color: variables.$color-gray-05;
   }
 
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus-within {
-      @include light-theme {
-        background: $color-gray-45;
-        color: $color-white;
+      @include mixins.light-theme {
+        background: variables.$color-gray-45;
+        color: variables.$color-white;
       }
 
-      @include dark-theme {
-        background: $color-gray-25;
-        color: $color-gray-90;
+      @include mixins.dark-theme {
+        background: variables.$color-gray-25;
+        color: variables.$color-gray-90;
       }
     }
   }
 
   &__contact-name {
-    @include font-body-2;
+    @include mixins.font-body-2;
     padding-block: 0;
     padding-inline: 6px;
     text-overflow: ellipsis;
@@ -45,14 +48,16 @@
   &__remove {
     $icon: '../images/icons/v3/x/x-compact-light.svg';
 
-    @include button-reset;
-    height: 100%;
-    display: flex;
-    width: 16px;
-    height: 16px;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
+    @include mixins.button-reset;
+    & {
+      height: 100%;
+      display: flex;
+      width: 16px;
+      height: 16px;
+      justify-content: center;
+      align-items: center;
+      padding: 0;
+    }
 
     &::before {
       content: '';
@@ -60,25 +65,25 @@
       height: 100%;
       display: block;
 
-      @include light-theme {
-        @include color-svg($icon, $color-gray-60);
+      @include mixins.light-theme {
+        @include mixins.color-svg($icon, variables.$color-gray-60);
       }
-      @include dark-theme {
-        @include color-svg($icon, $color-gray-25);
+      @include mixins.dark-theme {
+        @include mixins.color-svg($icon, variables.$color-gray-25);
       }
     }
 
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       &:focus {
         &::before {
-          @include color-svg($icon, $color-white);
+          @include mixins.color-svg($icon, variables.$color-white);
         }
       }
     }
-    @include dark-keyboard-mode {
+    @include mixins.dark-keyboard-mode {
       &:focus {
         &::before {
-          @include color-svg($icon, $color-gray-90);
+          @include mixins.color-svg($icon, variables.$color-gray-90);
         }
       }
     }
diff --git a/stylesheets/components/ContactPills.scss b/stylesheets/components/ContactPills.scss
index 82668cdb8f..46a94b2945 100644
--- a/stylesheets/components/ContactPills.scss
+++ b/stylesheets/components/ContactPills.scss
@@ -1,18 +1,21 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-.module-ContactPills {
-  @include smooth-scroll;
+@use '../mixins';
 
-  display: flex;
-  flex-wrap: wrap;
-  margin-bottom: 10px;
-  max-height: 88px;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  padding-block: 4px;
-  padding-inline: 16px;
-  gap: 8px 12px;
+.module-ContactPills {
+  @include mixins.smooth-scroll;
+  & {
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: 10px;
+    max-height: 88px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    padding-block: 4px;
+    padding-inline: 16px;
+    gap: 8px 12px;
+  }
 
   .module-ContactPill {
     max-width: calc(
diff --git a/stylesheets/components/ContactSpoofingReviewDialog.scss b/stylesheets/components/ContactSpoofingReviewDialog.scss
index c63a8d8253..97c72c8ca3 100644
--- a/stylesheets/components/ContactSpoofingReviewDialog.scss
+++ b/stylesheets/components/ContactSpoofingReviewDialog.scss
@@ -1,18 +1,21 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-ContactSpoofingReviewDialog {
   user-select: none;
 
   p {
-    @include font-body-2;
+    @include mixins.font-body-2;
 
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
 
-    @include dark-theme {
-      color: $color-gray-05;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-05;
     }
   }
 
@@ -21,7 +24,7 @@
   }
 
   h2 {
-    @include font-body-1-bold;
+    @include mixins.font-body-1-bold;
     margin-top: 28px;
     margin-bottom: 20px;
   }
@@ -32,11 +35,11 @@
     margin-block: 12px;
     margin-inline: 0;
 
-    @include light-theme {
-      background: $color-gray-05;
+    @include mixins.light-theme {
+      background: variables.$color-gray-05;
     }
-    @include dark-theme {
-      background: $color-gray-75;
+    @include mixins.dark-theme {
+      background: variables.$color-gray-75;
     }
   }
 
diff --git a/stylesheets/components/ContactSpoofingReviewDialogPerson.scss b/stylesheets/components/ContactSpoofingReviewDialogPerson.scss
index 0a025164fb..bfd8f64a72 100644
--- a/stylesheets/components/ContactSpoofingReviewDialogPerson.scss
+++ b/stylesheets/components/ContactSpoofingReviewDialogPerson.scss
@@ -1,13 +1,16 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-ContactSpoofingReviewDialogPerson {
   display: flex;
   padding-block: 8px;
   gap: 16px;
 
   &:is(button) {
-    @include button-reset;
+    @include mixins.button-reset;
   }
 
   &__info {
@@ -16,23 +19,25 @@
     gap: 12px;
 
     &__contact-name {
-      @include font-body-1-bold;
+      @include mixins.font-body-1-bold;
       display: block;
     }
 
     &__property {
-      @include font-body-2;
+      @include mixins.font-body-2;
 
-      @include light-theme {
-        color: $color-gray-60;
+      @include mixins.light-theme {
+        color: variables.$color-gray-60;
       }
 
-      @include dark-theme {
-        color: $color-gray-05;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-05;
       }
 
-      display: flex;
-      gap: 12px;
+      & {
+        display: flex;
+        gap: 12px;
+      }
 
       &__icon {
         display: inline-block;
@@ -42,12 +47,12 @@
         flex-shrink: 0;
 
         @mixin contact-spoofing-icon($url) {
-          @include light-theme {
-            @include color-svg($url, $color-gray-90);
+          @include mixins.light-theme {
+            @include mixins.color-svg($url, variables.$color-gray-90);
           }
 
-          @include dark-theme {
-            @include color-svg($url, $color-gray-05);
+          @include mixins.dark-theme {
+            @include mixins.color-svg($url, variables.$color-gray-05);
           }
         }
 
@@ -79,8 +84,10 @@
         flex-direction: row;
         align-items: center;
 
-        @include button-reset();
-        cursor: pointer;
+        @include mixins.button-reset();
+        & {
+          cursor: pointer;
+        }
 
         &::after {
           content: '';
@@ -88,9 +95,9 @@
           height: 20px;
           width: 20px;
 
-          @include color-svg(
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-right-bold.svg',
-            $color-gray-45
+            variables.$color-gray-45
           );
         }
       }
diff --git a/stylesheets/components/ContextMenu.scss b/stylesheets/components/ContextMenu.scss
index f93a0cde7d..19e0a0b76e 100644
--- a/stylesheets/components/ContextMenu.scss
+++ b/stylesheets/components/ContextMenu.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .ContextMenu {
   &__container {
     align-items: center;
@@ -9,11 +12,13 @@
   }
 
   &__popper {
-    @extend %module-composition-popper;
-    margin: 0;
-    padding-block: 6px;
-    padding-inline: 0px;
-    width: auto;
+    @include mixins.module-composition-popper;
+    & {
+      margin: 0;
+      padding-block: 6px;
+      padding-inline: 0px;
+      width: auto;
+    }
 
     &--single-item {
       padding: 0;
@@ -21,26 +26,28 @@
   }
 
   &__title {
-    @include font-body-1-bold;
+    @include mixins.font-body-1-bold;
     margin-bottom: 12px;
   }
 
   &__button {
-    @include button-reset();
+    @include mixins.button-reset();
   }
 
   &__option {
-    @include button-reset();
-    @include font-body-2;
-    @include dark-theme {
-      color: $color-gray-05;
-    }
+    @include mixins.button-reset();
+    & {
+      @include mixins.font-body-2;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-05;
+      }
 
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-    min-width: 150px;
-    width: 100%;
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      min-width: 150px;
+      width: 100%;
+    }
 
     &--container {
       display: flex;
@@ -58,16 +65,16 @@
         }
       }
       &--selected::before {
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/check/check.svg',
-            $color-black
+            variables.$color-black
           );
         }
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/check/check.svg',
-            $color-white
+            variables.$color-white
           );
         }
       }
@@ -84,28 +91,28 @@
     }
 
     &--title {
-      @include font-body-2;
+      @include mixins.font-body-2;
     }
 
     &--description {
-      @include font-subtitle;
+      @include mixins.font-subtitle;
     }
 
     &:hover {
-      @include light-theme() {
-        background-color: $color-gray-05;
+      @include mixins.light-theme() {
+        background-color: variables.$color-gray-05;
       }
 
-      @include dark-theme() {
-        background-color: $color-gray-65;
+      @include mixins.dark-theme() {
+        background-color: variables.$color-gray-65;
       }
     }
 
     &--focused,
     &:focus,
     &:active {
-      @include keyboard-mode {
-        box-shadow: 0 0 1px 1px $color-ultramarine;
+      @include mixins.keyboard-mode {
+        box-shadow: 0 0 1px 1px variables.$color-ultramarine;
         outline: none;
       }
     }
@@ -119,12 +126,12 @@
     margin-top: 2px;
     margin-bottom: 2px;
 
-    @include light-theme {
-      border-color: $color-gray-15;
+    @include mixins.light-theme {
+      border-color: variables.$color-gray-15;
     }
 
-    @include dark-theme {
-      border-color: $color-gray-65;
+    @include mixins.dark-theme {
+      border-color: variables.$color-gray-65;
     }
   }
 }
diff --git a/stylesheets/components/ConversationDetails.scss b/stylesheets/components/ConversationDetails.scss
index 53fa84d143..bf8709b304 100644
--- a/stylesheets/components/ConversationDetails.scss
+++ b/stylesheets/components/ConversationDetails.scss
@@ -1,9 +1,12 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .ConversationDetails {
   &__chat-color {
-    @include color-bubble(32px);
+    @include mixins.color-bubble(32px);
   }
 
   &-membership-list,
@@ -11,11 +14,16 @@
     &__add-members-icon,
     &__add-to-group-icon {
       @mixin plus-icon($color) {
-        @include color-svg('../images/icons/v3/plus/plus-compact.svg', $color);
-        content: '';
-        display: block;
-        height: 18px;
-        width: 18px;
+        @include mixins.color-svg(
+          '../images/icons/v3/plus/plus-compact.svg',
+          $color
+        );
+        & {
+          content: '';
+          display: block;
+          height: 18px;
+          width: 18px;
+        }
       }
 
       align-items: center;
@@ -25,26 +33,26 @@
       justify-content: center;
       width: 32px;
 
-      @include light-theme {
-        background: $color-gray-02;
+      @include mixins.light-theme {
+        background: variables.$color-gray-02;
         &::before {
-          @include plus-icon($color-black);
+          @include plus-icon(variables.$color-black);
         }
       }
-      @include dark-theme {
-        background: $color-gray-90;
+      @include mixins.dark-theme {
+        background: variables.$color-gray-90;
         &::before {
-          @include plus-icon($color-gray-15);
+          @include plus-icon(variables.$color-gray-15);
         }
       }
     }
   }
 
   &__block-group {
-    color: $color-accent-red;
+    color: variables.$color-accent-red;
   }
   &__unblock-group {
-    color: $color-accent-blue;
+    color: variables.$color-accent-blue;
   }
 
   &__tabs {
@@ -54,16 +62,18 @@
   }
 
   &__pending--info {
-    @include font-subtitle;
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.font-subtitle;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
+    }
+    & {
+      padding-block: 0;
+      padding-inline: 28px;
+      padding-top: 16px;
     }
-    padding-block: 0;
-    padding-inline: 28px;
-    padding-top: 16px;
   }
 
   &-icon {
@@ -76,8 +86,8 @@
         outline: none;
 
         .ConversationDetails-icon__icon::after {
-          @include keyboard-mode {
-            background-color: $color-ultramarine;
+          @include mixins.keyboard-mode {
+            background-color: variables.$color-ultramarine;
           }
         }
       }
@@ -99,15 +109,15 @@
 
       @mixin details-icon(
         $url,
-        $light-color: $color-gray-75,
-        $dark-color: $color-gray-15
+        $light-color: variables.$color-gray-75,
+        $dark-color: variables.$color-gray-15
       ) {
-        @include light-theme {
-          @include color-svg($url, $light-color);
+        @include mixins.light-theme {
+          @include mixins.color-svg($url, $light-color);
         }
 
-        @include dark-theme {
-          @include color-svg($url, $dark-color);
+        @include mixins.dark-theme {
+          @include mixins.color-svg($url, $dark-color);
         }
       }
 
@@ -205,12 +215,12 @@
 
       &--down {
         border-radius: 18px;
-        @include light-theme {
-          background-color: $color-gray-02;
+        @include mixins.light-theme {
+          background-color: variables.$color-gray-02;
         }
 
-        @include dark-theme {
-          background-color: $color-gray-90;
+        @include mixins.dark-theme {
+          background-color: variables.$color-gray-90;
         }
 
         &::after {
@@ -232,8 +242,8 @@
         &::after {
           @include details-icon(
             '../images/icons/v3/block/block.svg',
-            $color-accent-red,
-            $color-accent-red
+            variables.$color-accent-red,
+            variables.$color-accent-red
           );
         }
       }
@@ -241,8 +251,8 @@
         &::after {
           @include details-icon(
             '../images/icons/v3/block/block.svg',
-            $color-accent-blue,
-            $color-accent-blue
+            variables.$color-accent-blue,
+            variables.$color-accent-blue
           );
         }
       }
@@ -294,11 +304,11 @@
       border: none;
       padding: 0;
 
-      @include light-theme {
-        color: $color-gray-95;
+      @include mixins.light-theme {
+        color: variables.$color-gray-95;
       }
-      @include dark-theme {
-        color: $color-gray-05;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-05;
       }
     }
   }
@@ -314,19 +324,19 @@
       padding-inline: 24px;
       user-select: none;
       width: 100%;
-      @include font-body-2;
+      @include mixins.font-body-2;
 
       &--button {
         color: inherit;
         background: none;
 
         &:hover:not(:disabled) {
-          @include light-theme {
-            background-color: $color-gray-02;
+          @include mixins.light-theme {
+            background-color: variables.$color-gray-02;
           }
 
-          @include dark-theme {
-            background-color: $color-gray-90;
+          @include mixins.dark-theme {
+            background-color: variables.$color-gray-90;
           }
 
           & .ConversationDetails-panel-row__actions {
@@ -345,11 +355,11 @@
         }
       }
 
-      @include keyboard-mode {
-        @include keyboard-focus-state($color-ultramarine);
+      @include mixins.keyboard-mode {
+        @include keyboard-focus-state(variables.$color-ultramarine);
       }
-      @include dark-keyboard-mode {
-        @include keyboard-focus-state($color-ultramarine-light);
+      @include mixins.dark-keyboard-mode {
+        @include keyboard-focus-state(variables.$color-ultramarine-light);
       }
     }
 
@@ -367,18 +377,18 @@
     &__info {
       margin-top: 4px;
 
-      @include light-theme {
-        color: $color-gray-60;
+      @include mixins.light-theme {
+        color: variables.$color-gray-60;
       }
 
-      @include dark-theme {
-        color: $color-gray-25;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-25;
       }
     }
 
     &__right {
       position: relative;
-      color: $color-gray-45;
+      color: variables.$color-gray-45;
       min-width: 143px;
     }
 
@@ -401,18 +411,20 @@
       &:not(:first-child)::before {
         border-top: 1px solid transparent;
 
-        @include light-theme {
-          border-top-color: $color-gray-15;
+        @include mixins.light-theme {
+          border-top-color: variables.$color-gray-15;
         }
 
-        @include dark-theme {
-          border-top-color: $color-gray-65;
+        @include mixins.dark-theme {
+          border-top-color: variables.$color-gray-65;
         }
 
-        content: '';
-        display: block;
-        margin-block: 8px;
-        margin-inline: 0;
+        & {
+          content: '';
+          display: block;
+          margin-block: 8px;
+          margin-inline: 0;
+        }
       }
 
       &--borderless {
@@ -434,7 +446,7 @@
     }
 
     &__title {
-      @include font-body-1-bold;
+      @include mixins.font-body-1-bold;
     }
   }
 
@@ -483,29 +495,47 @@
 }
 
 .ConversationDetails__CallHistoryGroup__ItemIcon--Audio {
-  @include light-theme {
-    @include color-svg('../images/icons/v3/phone/phone.svg', $color-black);
+  @include mixins.light-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/phone/phone.svg',
+      variables.$color-black
+    );
   }
-  @include dark-theme {
-    @include color-svg('../images/icons/v3/phone/phone.svg', $color-gray-15);
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/phone/phone.svg',
+      variables.$color-gray-15
+    );
   }
 }
 
 .ConversationDetails__CallHistoryGroup__ItemIcon--Video {
-  @include light-theme {
-    @include color-svg('../images/icons/v3/video/video.svg', $color-black);
+  @include mixins.light-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/video/video.svg',
+      variables.$color-black
+    );
   }
-  @include dark-theme {
-    @include color-svg('../images/icons/v3/video/video.svg', $color-gray-15);
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/video/video.svg',
+      variables.$color-gray-15
+    );
   }
 }
 
 .ConversationDetails__CallHistoryGroup__ItemIcon--Adhoc {
-  @include light-theme {
-    @include color-svg('../images/icons/v3/link/link.svg', $color-black);
+  @include mixins.light-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/link/link.svg',
+      variables.$color-black
+    );
   }
-  @include dark-theme {
-    @include color-svg('../images/icons/v3/link/link.svg', $color-gray-15);
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/link/link.svg',
+      variables.$color-gray-15
+    );
   }
 }
 
@@ -518,40 +548,48 @@
 }
 
 .ConversationDetails--nickname-actions {
-  @include button-reset;
-  width: 32px;
-  height: 32px;
+  @include mixins.button-reset;
+  & {
+    width: 32px;
+    height: 32px;
+  }
   &::before {
     display: inline-block;
     content: '';
     width: 20px;
     height: 20px;
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/chevron/chevron-down.svg',
-        $color-black
+        variables.$color-black
       );
     }
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/chevron/chevron-down.svg',
-        $color-white
+        variables.$color-white
       );
     }
   }
 }
 
 .ConversationDetails--nickname-actions-label {
-  @include sr-only;
+  @include mixins.sr-only;
 }
 
 .ConversationDetails--nickname-actions--delete {
   width: 16px;
   height: 16px;
-  @include light-theme {
-    @include color-svg('../images/icons/v3/trash/trash.svg', $color-black);
+  @include mixins.light-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/trash/trash.svg',
+      variables.$color-black
+    );
   }
-  @include dark-theme {
-    @include color-svg('../images/icons/v3/trash/trash.svg', $color-white);
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/trash/trash.svg',
+      variables.$color-white
+    );
   }
 }
diff --git a/stylesheets/components/ConversationDetailsHeader.scss b/stylesheets/components/ConversationDetailsHeader.scss
index c7812a1f2d..8ce1786a8f 100644
--- a/stylesheets/components/ConversationDetailsHeader.scss
+++ b/stylesheets/components/ConversationDetailsHeader.scss
@@ -1,6 +1,9 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .ConversationDetailsHeader {
   align-items: center;
   display: flex;
@@ -14,12 +17,14 @@
 
   &__edit-button,
   &__about-button {
-    @include button-reset();
-    cursor: pointer;
+    @include mixins.button-reset();
+    & {
+      cursor: pointer;
+    }
   }
 
   &__title {
-    @include font-title-1;
+    @include mixins.font-title-1;
     font-weight: 400;
     padding-bottom: 8px;
     padding-top: 12px;
@@ -33,13 +38,13 @@
   }
 
   &__subtitle {
-    @include font-body-1;
-    color: $color-gray-60;
+    @include mixins.font-body-1;
+    color: variables.$color-gray-60;
     justify-content: center;
     padding-bottom: 6px;
 
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
 
     &__about {
@@ -64,11 +69,11 @@
       transition: opacity 100ms ease-out;
       width: $size;
 
-      @include light-theme {
-        @include color-svg($icon, $color-gray-60);
+      @include mixins.light-theme {
+        @include mixins.color-svg($icon, variables.$color-gray-60);
       }
-      @include dark-theme {
-        @include color-svg($icon, $color-gray-25);
+      @include mixins.dark-theme {
+        @include mixins.color-svg($icon, variables.$color-gray-25);
       }
     }
   }
@@ -86,16 +91,16 @@
     position: relative;
     inset-block-start: 2px;
 
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/chevron/chevron-right-bold.svg',
-        $color-black
+        variables.$color-black
       );
     }
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/chevron/chevron-right-bold.svg',
-        $color-gray-05
+        variables.$color-gray-05
       );
     }
   }
diff --git a/stylesheets/components/ConversationHeader.scss b/stylesheets/components/ConversationHeader.scss
index 92e8f5cc90..c675348300 100644
--- a/stylesheets/components/ConversationHeader.scss
+++ b/stylesheets/components/ConversationHeader.scss
@@ -1,6 +1,10 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use 'sass:color';
+@use '../mixins';
+@use '../variables';
+
 .module-ConversationHeader {
   @mixin icon-element($icon, $margin-right: 4px) {
     display: flex;
@@ -17,11 +21,11 @@
       display: block;
       margin-inline-end: $margin-right;
 
-      @include light-theme {
-        @include color-svg($icon, $color-gray-60);
+      @include mixins.light-theme {
+        @include mixins.color-svg($icon, variables.$color-gray-60);
       }
-      @include dark-theme {
-        @include color-svg($icon, $color-gray-25);
+      @include mixins.dark-theme {
+        @include mixins.color-svg($icon, variables.$color-gray-25);
       }
     }
   }
@@ -32,7 +36,7 @@
     --button-spacing: 4px;
   }
 
-  @include draggable-region;
+  @include mixins.draggable-region;
   // In Electron v23+, clicking on a `drag` region in an unfocused window may not
   // propagate clicks to no-drag elements that have a higher CSS order; this avoids that
   // scenario for interactive elements (e.g. IncomingCallBar) which overlap the
@@ -45,15 +49,15 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  height: calc(#{$header-height} + var(--title-bar-drag-area-height));
+  height: calc(#{variables.$header-height} + var(--title-bar-drag-area-height));
 
-  @include light-theme {
-    color: $color-gray-90;
-    background-color: $color-white;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
+    background-color: variables.$color-white;
   }
-  @include dark-theme {
-    color: $color-gray-02;
-    background-color: $color-gray-95;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-02;
+    background-color: variables.$color-gray-95;
   }
 
   &__header {
@@ -70,24 +74,26 @@
     transition: margin-inline-end 200ms ease-out;
 
     &--clickable {
-      @include button-reset;
-      flex: 1;
-      border-radius: 4px;
-      -webkit-app-region: no-drag;
+      @include mixins.button-reset;
+      & {
+        flex: 1;
+        border-radius: 4px;
+        -webkit-app-region: no-drag;
 
-      // These are clobbered by button-reset:
-      margin-inline: 4px var(--button-spacing);
-      padding: $padding;
-      padding-inline-start: 0;
+        // These are clobbered by button-reset:
+        margin-inline: 4px var(--button-spacing);
+        padding: $padding;
+        padding-inline-start: 0;
+      }
 
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus {
-          color: $color-ultramarine;
+          color: variables.$color-ultramarine;
         }
       }
-      @include dark-keyboard-mode {
+      @include mixins.dark-keyboard-mode {
         &:focus {
-          color: $color-ultramarine-light;
+          color: variables.$color-ultramarine-light;
         }
       }
     }
@@ -105,7 +111,7 @@
       min-width: 0;
 
       &__title {
-        @include font-body-1-bold;
+        @include mixins.font-body-1-bold;
         display: flex;
         align-items: center;
 
@@ -121,18 +127,20 @@
 
       &__subtitle {
         display: flex;
-        @include font-body-2;
+        @include mixins.font-body-2;
 
-        @include light-theme {
-          color: $color-gray-60;
+        @include mixins.light-theme {
+          color: variables.$color-gray-60;
         }
-        @include dark-theme {
-          color: $color-gray-25;
+        @include mixins.dark-theme {
+          color: variables.$color-gray-25;
         }
 
         &__expiration {
           @include icon-element('../images/icons/v3/timer/timer-compact.svg');
-          margin-inline-end: 12px;
+          & {
+            margin-inline-end: 12px;
+          }
         }
 
         &__verified {
@@ -148,21 +156,23 @@
     $icon-size: 32px;
 
     -webkit-app-region: no-drag;
-    @include button-reset;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    border: 2px solid transparent;
-    display: flex;
-    height: $icon-size;
-    margin-inline-end: var(--button-spacing);
-    min-width: $icon-size;
-    padding: 2px;
-    transition:
-      margin-inline-end 200ms ease-out,
-      opacity 200ms ease-out,
-      background 100ms ease-out;
-    width: $icon-size;
+    @include mixins.button-reset;
+    & {
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      border: 2px solid transparent;
+      display: flex;
+      height: $icon-size;
+      margin-inline-end: var(--button-spacing);
+      min-width: $icon-size;
+      padding: 2px;
+      transition:
+        margin-inline-end 200ms ease-out,
+        opacity 200ms ease-out,
+        background 100ms ease-out;
+      width: $icon-size;
+    }
 
     &:disabled {
       cursor: default;
@@ -174,50 +184,50 @@
     }
 
     &--in-another-call {
-      @include light-theme {
+      @include mixins.light-theme {
         opacity: 0.5;
       }
-      @include dark-theme {
+      @include mixins.dark-theme {
         opacity: 0.4;
       }
     }
 
     &:not(:disabled) {
-      @include light-theme {
+      @include mixins.light-theme {
         &:hover {
-          background: $color-gray-02;
+          background: variables.$color-gray-02;
         }
         &:focus {
-          @include keyboard-mode {
-            background: $color-gray-02;
+          @include mixins.keyboard-mode {
+            background: variables.$color-gray-02;
           }
         }
         &:active {
-          background: $color-gray-05;
+          background: variables.$color-gray-05;
         }
       }
-      @include dark-theme {
+      @include mixins.dark-theme {
         &:hover {
-          background: $color-gray-80;
+          background: variables.$color-gray-80;
         }
         &:focus {
-          @include keyboard-mode {
-            background: $color-gray-02;
+          @include mixins.keyboard-mode {
+            background: variables.$color-gray-02;
           }
         }
         &:active {
-          background: $color-gray-75;
+          background: variables.$color-gray-75;
         }
       }
 
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus {
-          border-color: $color-ultramarine;
+          border-color: variables.$color-ultramarine;
         }
       }
-      @include dark-keyboard-mode {
+      @include mixins.dark-keyboard-mode {
         &:focus {
-          border-color: $color-ultramarine-light;
+          border-color: variables.$color-ultramarine-light;
         }
       }
     }
@@ -229,20 +239,20 @@
         width: $size;
         height: $size;
 
-        @include light-theme {
-          @include color-svg($icon, $color-gray-75);
+        @include mixins.light-theme {
+          @include mixins.color-svg($icon, variables.$color-gray-75);
           &:hover,
           &:active,
           &:focus {
-            @include color-svg($icon, $color-gray-90);
+            @include mixins.color-svg($icon, variables.$color-gray-90);
           }
         }
-        @include dark-theme {
-          @include color-svg($icon, $color-gray-15);
+        @include mixins.dark-theme {
+          @include mixins.color-svg($icon, variables.$color-gray-15);
           &:hover,
           &:active,
           &:focus {
-            @include color-svg($icon, $color-gray-02);
+            @include mixins.color-svg($icon, variables.$color-gray-02);
           }
         }
       }
@@ -262,17 +272,19 @@
 
     &--more {
       @include normal-button('../images/icons/v3/more/more.svg', 20px);
-      margin-inline-end: 16px;
+      & {
+        margin-inline-end: 16px;
+      }
     }
 
     &--join-call {
-      $background: $color-accent-green;
+      $background: variables.$color-accent-green;
 
-      @include font-body-1;
-      @include rounded-corners;
+      @include mixins.font-body-1;
+      @include mixins.rounded-corners;
       align-items: center;
       background-color: $background;
-      color: $color-white;
+      color: variables.$color-white;
       display: flex;
       outline: none;
       overflow: hidden;
@@ -287,29 +299,31 @@
       &:before {
         $icon-size: 16px;
 
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/video/video-compact-fill.svg',
-          $color-white
+          variables.$color-white
         );
-        content: '';
-        display: block;
-        height: $icon-size;
-        margin-inline-end: 4px;
-        min-width: $icon-size;
-        width: $icon-size;
+        & {
+          content: '';
+          display: block;
+          height: $icon-size;
+          margin-inline-end: 4px;
+          min-width: $icon-size;
+          width: $icon-size;
+        }
       }
 
       &:not(:disabled) {
         // Override hover/focus/active state coming from __button above.
         &:hover,
         &:active {
-          @include any-theme {
-            background-color: darken($background, 16%);
+          @include mixins.any-theme {
+            background-color: color.adjust($background, $lightness: -16%);
           }
         }
         &:focus {
-          @include keyboard-mode {
-            background-color: darken($background, 16%);
+          @include mixins.keyboard-mode {
+            background-color: color.adjust($background, $lightness: -16%);
           }
         }
       }
diff --git a/stylesheets/components/ConversationHero.scss b/stylesheets/components/ConversationHero.scss
index 36fa9cf8f6..f19dda9729 100644
--- a/stylesheets/components/ConversationHero.scss
+++ b/stylesheets/components/ConversationHero.scss
@@ -1,6 +1,9 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-conversation-hero {
   padding-block: 32px 28px;
   padding-inline: 0;
@@ -11,12 +14,14 @@
   }
 
   &__title {
-    @include button-reset();
-    cursor: pointer;
+    @include mixins.button-reset();
+    & {
+      cursor: pointer;
+    }
   }
 
   &__title span {
-    @include font-title-1;
+    @include mixins.font-title-1;
     font-weight: 400;
   }
 
@@ -29,16 +34,16 @@
     position: relative;
     inset-block-start: 2px;
 
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/chevron/chevron-right-bold.svg',
-        $color-gray-90
+        variables.$color-gray-90
       );
     }
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/chevron/chevron-right-bold.svg',
-        $color-gray-05
+        variables.$color-gray-05
       );
     }
   }
@@ -48,47 +53,47 @@
     align-items: center;
     justify-content: center;
 
-    @include font-title-2;
+    @include mixins.font-title-2;
     margin-bottom: 2px;
     margin-top: 0;
 
-    @include light-theme {
-      color: $color-gray-90;
+    @include mixins.light-theme {
+      color: variables.$color-gray-90;
     }
 
-    @include dark-theme {
-      color: $color-gray-05;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-05;
     }
   }
 
   &__with {
-    @include font-body-2;
+    @include mixins.font-body-2;
     margin-block: 0;
     margin-inline: auto;
     margin-bottom: 20px;
     max-width: 500px;
 
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
 
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
   }
 
   &__note-to-self {
-    @include font-body-2;
+    @include mixins.font-body-2;
 
     padding-block: 0;
     padding-inline: 16px;
 
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
 
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
   }
 
@@ -97,11 +102,11 @@
     padding-block: 6px;
     padding-inline: 14px;
     margin-top: 12px;
-    @include font-subtitle;
+    @include mixins.font-subtitle;
   }
 
   &__membership {
-    @include font-body-2;
+    @include mixins.font-body-2;
     user-select: none;
 
     max-width: 255px;
@@ -113,19 +118,19 @@
     border-style: solid;
     border-width: 1.5px;
 
-    @include light-theme() {
-      border-color: $color-gray-05;
+    @include mixins.light-theme() {
+      border-color: variables.$color-gray-05;
     }
-    @include dark-theme() {
-      border-color: $color-gray-80;
+    @include mixins.dark-theme() {
+      border-color: variables.$color-gray-80;
     }
 
-    @include light-theme {
-      color: $color-gray-90;
+    @include mixins.light-theme {
+      color: variables.$color-gray-90;
     }
 
-    @include dark-theme {
-      color: $color-gray-02;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-02;
     }
 
     &__chevron {
@@ -135,14 +140,17 @@
       vertical-align: text-top;
       margin-inline-end: 8px;
 
-      @include light-theme {
-        @include color-svg('../images/icons/v3/group/group.svg', $color-black);
+      @include mixins.light-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/group/group.svg',
+          variables.$color-black
+        );
       }
 
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/group/group.svg',
-          $color-gray-05
+          variables.$color-gray-05
         );
       }
     }
@@ -163,30 +171,32 @@
         width: 18px;
         vertical-align: middle;
 
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/info/info.svg',
-            $color-gray-90
+            variables.$color-gray-90
           );
         }
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/info/info.svg',
-            $color-gray-02
+            variables.$color-gray-02
           );
         }
       }
 
       &__learn-more {
-        @include button-reset();
-        cursor: pointer;
-        text-decoration: underline;
+        @include mixins.button-reset();
+        & {
+          cursor: pointer;
+          text-decoration: underline;
+        }
       }
     }
   }
 
   &__linkNotification {
-    @include font-body-2;
+    @include mixins.font-body-2;
 
     margin-top: 12px;
     text-align: center;
@@ -200,11 +210,17 @@
       vertical-align: middle;
       width: 16px;
 
-      @include light-theme {
-        @include color-svg('../images/icons/v3/info/info.svg', $color-gray-60);
+      @include mixins.light-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/info/info.svg',
+          variables.$color-gray-60
+        );
       }
-      @include dark-theme {
-        @include color-svg('../images/icons/v3/info/info.svg', $color-gray-25);
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/info/info.svg',
+          variables.$color-gray-25
+        );
       }
     }
   }
diff --git a/stylesheets/components/ConversationPanel.scss b/stylesheets/components/ConversationPanel.scss
index 0621ea4145..160c59b6e7 100644
--- a/stylesheets/components/ConversationPanel.scss
+++ b/stylesheets/components/ConversationPanel.scss
@@ -1,6 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .ConversationPanel {
   height: 100%;
   inset-inline-start: 0;
@@ -8,18 +11,20 @@
   position: absolute;
   top: 0;
   width: 100%;
-  z-index: $z-index-above-base;
+  z-index: variables.$z-index-above-base;
 
-  @include light-theme() {
-    background-color: $color-white;
+  @include mixins.light-theme() {
+    background-color: variables.$color-white;
   }
 
-  @include dark-theme() {
-    background-color: $color-gray-95;
+  @include mixins.dark-theme() {
+    background-color: variables.$color-gray-95;
   }
 
   &__body {
-    margin-top: calc(#{$header-height} + var(--title-bar-drag-area-height));
+    margin-top: calc(
+      #{variables.$header-height} + var(--title-bar-drag-area-height)
+    );
     padding-inline: 24px;
   }
 
@@ -27,19 +32,21 @@
     align-items: center;
     display: flex;
     flex-direction: row;
-    height: calc(#{$header-height} + var(--title-bar-drag-area-height));
+    height: calc(
+      #{variables.$header-height} + var(--title-bar-drag-area-height)
+    );
     padding-top: var(--title-bar-drag-area-height);
     position: fixed;
     width: 100%;
-    z-index: $z-index-base;
+    z-index: variables.$z-index-base;
 
-    @include light-theme {
-      color: $color-gray-90;
-      background-color: $color-white;
+    @include mixins.light-theme {
+      color: variables.$color-gray-90;
+      background-color: variables.$color-white;
     }
-    @include dark-theme {
-      color: $color-gray-02;
-      background-color: $color-gray-95;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-02;
+      background-color: variables.$color-gray-95;
     }
 
     &__info {
@@ -48,7 +55,7 @@
       min-width: 0;
 
       &__title {
-        @include font-body-1-bold;
+        @include mixins.font-body-1-bold;
         display: flex;
         align-items: center;
 
@@ -79,27 +86,27 @@
         cursor: default;
       }
 
-      @include light-theme {
-        @include color-svg(
+      @include mixins.light-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/chevron/chevron-left.svg',
-          $color-gray-90
+          variables.$color-gray-90
         );
       }
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/chevron/chevron-left.svg',
-          $color-gray-02
+          variables.$color-gray-02
         );
       }
 
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus {
-          background-color: $color-ultramarine;
+          background-color: variables.$color-ultramarine;
         }
       }
-      @include dark-keyboard-mode {
+      @include mixins.dark-keyboard-mode {
         &:focus {
-          background-color: $color-ultramarine-light;
+          background-color: variables.$color-ultramarine-light;
         }
       }
     }
@@ -111,7 +118,7 @@
     position: absolute;
     top: 0;
     width: 100%;
-    z-index: $z-index-above-base;
+    z-index: variables.$z-index-above-base;
   }
 
   &__hidden {
diff --git a/stylesheets/components/ConversationView.scss b/stylesheets/components/ConversationView.scss
index 6ef79e75f5..eab27c00fc 100644
--- a/stylesheets/components/ConversationView.scss
+++ b/stylesheets/components/ConversationView.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .ConversationView {
   display: flex;
   flex-direction: column;
@@ -9,20 +12,22 @@
   &__pane {
     display: flex;
     flex-direction: column;
-    height: calc(100% - #{$header-height} - var(--title-bar-drag-area-height));
+    height: calc(
+      100% - #{variables.$header-height} - var(--title-bar-drag-area-height)
+    );
     inset-inline-start: 0;
     overflow-y: overlay;
     position: absolute;
-    top: calc(#{$header-height} + var(--title-bar-drag-area-height));
+    top: calc(#{variables.$header-height} + var(--title-bar-drag-area-height));
     width: 100%;
-    z-index: $z-index-base;
+    z-index: variables.$z-index-base;
 
-    @include light-theme() {
-      background-color: $color-white;
+    @include mixins.light-theme() {
+      background-color: variables.$color-white;
     }
 
-    @include dark-theme() {
-      background-color: $color-gray-95;
+    @include mixins.dark-theme() {
+      background-color: variables.$color-gray-95;
     }
   }
 
@@ -35,15 +40,17 @@
       z-index: 0;
     }
 
-    -webkit-padding-start: 0px;
-    height: 100%;
-    margin: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    padding: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
+    & {
+      -webkit-padding-start: 0px;
+      height: 100%;
+      margin: 0;
+      overflow-x: hidden;
+      overflow-y: auto;
+      padding: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
   }
 
   &__composition-area {
diff --git a/stylesheets/components/CountryCodeSelect.scss b/stylesheets/components/CountryCodeSelect.scss
index 38483058e6..1cbede5599 100644
--- a/stylesheets/components/CountryCodeSelect.scss
+++ b/stylesheets/components/CountryCodeSelect.scss
@@ -1,27 +1,32 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .CountryCodeSelect {
-  @include button-reset();
-  display: flex;
-  flex-direction: row;
-  gap: 12px;
-  align-items: center;
+  @include mixins.button-reset();
+  & {
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+    align-items: center;
 
-  @include font-body-2;
-  border: solid 1px transparent;
-  border-radius: 8px;
-  height: 28px;
-  padding-inline: 12px;
-  width: 100%;
-
-  @include light-theme {
-    background-color: $color-black-alpha-06;
-    color: $color-gray-90;
+    @include mixins.font-body-2;
+    border: solid 1px transparent;
+    border-radius: 8px;
+    height: 28px;
+    padding-inline: 12px;
+    width: 100%;
   }
-  @include dark-theme {
-    background-color: $color-white-alpha-12;
-    color: $color-gray-05;
+
+  @include mixins.light-theme {
+    background-color: variables.$color-black-alpha-06;
+    color: variables.$color-gray-90;
+  }
+  @include mixins.dark-theme {
+    background-color: variables.$color-white-alpha-12;
+    color: variables.$color-gray-05;
   }
 
   &__text {
@@ -33,17 +38,17 @@
     width: 16px;
     height: 16px;
 
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/dropdown/dropdown-compact.svg',
-        $color-black
+        variables.$color-black
       );
     }
 
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/dropdown/dropdown-compact.svg',
-        $color-gray-05
+        variables.$color-gray-05
       );
     }
   }
@@ -72,33 +77,35 @@
   }
 
   &__CountryButton {
-    @include button-reset();
-    @include font-body-1;
+    @include mixins.button-reset();
+    & {
+      @include mixins.font-body-1;
 
-    width: 100%;
+      width: 100%;
 
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
 
-    height: 40px;
-    padding-inline: 14px;
-    border-radius: 8px;
+      height: 40px;
+      padding-inline: 14px;
+      border-radius: 8px;
+    }
 
-    @include mouse-mode {
+    @include mixins.mouse-mode {
       &:hover {
-        @include light-theme {
-          background-color: $color-black-alpha-06;
+        @include mixins.light-theme {
+          background-color: variables.$color-black-alpha-06;
         }
-        @include dark-theme {
-          background-color: $color-white-alpha-12;
+        @include mixins.dark-theme {
+          background-color: variables.$color-white-alpha-12;
         }
       }
     }
 
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       &:focus {
-        box-shadow: inset 0px 0px 0px 2px $color-ultramarine;
+        box-shadow: inset 0px 0px 0px 2px variables.$color-ultramarine;
       }
     }
   }
diff --git a/stylesheets/components/CustomColorEditor.scss b/stylesheets/components/CustomColorEditor.scss
index 3991037f89..89464ec49b 100644
--- a/stylesheets/components/CustomColorEditor.scss
+++ b/stylesheets/components/CustomColorEditor.scss
@@ -1,10 +1,13 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .CustomColorEditor {
   &__messages {
     border-radius: 8px;
-    border: 1px solid $color-gray-15;
+    border: 1px solid variables.$color-gray-15;
     padding-block: 27px;
     padding-inline: 0;
     margin-top: 16px;
@@ -16,9 +19,11 @@
   }
 
   &__gradient-knob {
-    @include color-bubble(42px);
-    cursor: move;
-    position: absolute;
+    @include mixins.color-bubble(42px);
+    & {
+      cursor: move;
+      position: absolute;
+    }
   }
 
   &__slider-container {
@@ -45,7 +50,7 @@
   &__hue-slider__handle {
     &:focus {
       outline: none;
-      border: 2px solid $color-white;
+      border: 2px solid variables.$color-white;
       border-radius: 8px;
     }
   }
diff --git a/stylesheets/components/CustomizingPreferredReactionsModal.scss b/stylesheets/components/CustomizingPreferredReactionsModal.scss
index 7d4dd40ee7..f2fb5f4fec 100644
--- a/stylesheets/components/CustomizingPreferredReactionsModal.scss
+++ b/stylesheets/components/CustomizingPreferredReactionsModal.scss
@@ -1,13 +1,16 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-CustomizingPreferredReactionsModal {
   &__overlay-container {
-    z-index: $z-index-above-context-menu;
+    z-index: variables.$z-index-above-context-menu;
   }
 
   &__small-emoji-picker-wrapper {
-    @include font-subtitle;
+    @include mixins.font-subtitle;
     align-items: center;
     display: flex;
     flex-direction: column;
@@ -17,11 +20,11 @@
     text-align: center;
     user-select: none;
 
-    @include light-theme {
-      color: $color-gray-45;
+    @include mixins.light-theme {
+      color: variables.$color-gray-45;
     }
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
 
     .module-ReactionPickerPicker {
diff --git a/stylesheets/components/DebugLogWindow.scss b/stylesheets/components/DebugLogWindow.scss
index a49554d0f1..0d5eb339fc 100644
--- a/stylesheets/components/DebugLogWindow.scss
+++ b/stylesheets/components/DebugLogWindow.scss
@@ -1,6 +1,9 @@
 // Copyright 2016 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .DebugLogWindow {
   display: flex;
   flex-direction: column;
@@ -22,15 +25,15 @@
     overflow-y: scroll;
     max-height: 100%;
 
-    border: 1px solid $color-gray-45;
+    border: 1px solid variables.$color-gray-45;
 
-    @include dark-theme {
-      background-color: $color-gray-90;
-      color: $color-gray-02;
+    @include mixins.dark-theme {
+      background-color: variables.$color-gray-90;
+      color: variables.$color-gray-02;
     }
 
     &__text {
-      font-family: $monospace;
+      font-family: variables.$monospace;
       font-size: 12px;
       margin: 0;
       user-select: none;
@@ -39,16 +42,16 @@
   }
 
   &__title {
-    @include font-title-2;
+    @include mixins.font-title-2;
   }
 
   &__subtitle {
-    @include font-body-2;
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.font-body-2;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
   }
 
@@ -70,13 +73,13 @@
     padding-inline: 10px;
     width: 100%;
 
-    @include light-theme {
-      border: solid 1px $color-gray-25;
+    @include mixins.light-theme {
+      border: solid 1px variables.$color-gray-25;
     }
-    @include dark-theme {
-      background-color: $color-gray-90;
-      border: solid 1px $color-gray-45;
-      color: $color-gray-02;
+    @include mixins.dark-theme {
+      background-color: variables.$color-gray-90;
+      border: solid 1px variables.$color-gray-45;
+      color: variables.$color-gray-02;
     }
   }
 }
diff --git a/stylesheets/components/DisappearingTimerSelect.scss b/stylesheets/components/DisappearingTimerSelect.scss
index 8d6a96c5f2..c03c9c07b2 100644
--- a/stylesheets/components/DisappearingTimerSelect.scss
+++ b/stylesheets/components/DisappearingTimerSelect.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-disappearing-timer-select {
   position: relative;
 
@@ -10,14 +13,14 @@
     margin-top: 4px;
     padding-inline-start: 14px;
 
-    @include font-subtitle;
+    @include mixins.font-subtitle;
 
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
 
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
   }
 }
diff --git a/stylesheets/components/EditConversationAttributesModal.scss b/stylesheets/components/EditConversationAttributesModal.scss
index d63d396860..3c9fed69b4 100644
--- a/stylesheets/components/EditConversationAttributesModal.scss
+++ b/stylesheets/components/EditConversationAttributesModal.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-EditConversationAttributesModal {
   .module-AvatarInput {
     margin-block: 24px;
@@ -8,14 +11,14 @@
   }
 
   &__error-message {
-    @include font-body-1;
+    @include mixins.font-body-1;
     margin-block: 16px;
     margin-inline: 0;
   }
 
   &__description-warning {
-    @include font-subtitle;
-    color: $color-gray-45;
+    @include mixins.font-subtitle;
+    color: variables.$color-gray-45;
     margin-block: 0;
     margin-inline: 16px;
   }
diff --git a/stylesheets/components/EditHistoryMessagesModal.scss b/stylesheets/components/EditHistoryMessagesModal.scss
index 58ce963338..2f39c63baf 100644
--- a/stylesheets/components/EditHistoryMessagesModal.scss
+++ b/stylesheets/components/EditHistoryMessagesModal.scss
@@ -1,37 +1,40 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .EditHistoryMessagesModal {
   &__divider {
     border-bottom: 0;
     border-style: solid;
     margin-block: 24px;
 
-    @include light-theme {
-      border-color: $color-gray-15;
+    @include mixins.light-theme {
+      border-color: variables.$color-gray-15;
     }
 
-    @include dark-theme {
-      border-color: $color-gray-75;
+    @include mixins.dark-theme {
+      border-color: variables.$color-gray-75;
     }
   }
 
   &__title {
-    @include font-body-1-bold;
+    @include mixins.font-body-1-bold;
   }
 
   .module-message {
     padding-inline: 0;
 
     &__link-preview__content {
-      @include dark-theme {
-        background-color: $color-gray-75;
+      @include mixins.dark-theme {
+        background-color: variables.$color-gray-75;
       }
     }
 
     &__container--incoming {
-      @include dark-theme {
-        background-color: $color-gray-65;
+      @include mixins.dark-theme {
+        background-color: variables.$color-gray-65;
       }
     }
   }
diff --git a/stylesheets/components/EditNicknameAndNoteModal.scss b/stylesheets/components/EditNicknameAndNoteModal.scss
index 03443663f7..3ee2130882 100644
--- a/stylesheets/components/EditNicknameAndNoteModal.scss
+++ b/stylesheets/components/EditNicknameAndNoteModal.scss
@@ -1,18 +1,21 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .EditNicknameAndNoteModal__width-container {
   max-width: 360px;
 }
 
 .EditNicknameAndNoteModal__Description {
   margin-block: 12px 24px;
-  @include font-body-2;
-  @include light-theme {
-    color: $color-gray-75;
+  @include mixins.font-body-2;
+  @include mixins.light-theme {
+    color: variables.$color-gray-75;
   }
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 
@@ -23,5 +26,5 @@
 }
 
 .EditNicknameAndNoteModal__Label {
-  @include sr-only;
+  @include mixins.sr-only;
 }
diff --git a/stylesheets/components/EditUsernameModalBody.scss b/stylesheets/components/EditUsernameModalBody.scss
index 82d00dc14f..84785cae37 100644
--- a/stylesheets/components/EditUsernameModalBody.scss
+++ b/stylesheets/components/EditUsernameModalBody.scss
@@ -1,6 +1,9 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .EditUsernameModalBody {
   &__header {
     display: flex;
@@ -19,12 +22,12 @@
       margin-top: 21px;
       margin-bottom: 16px;
 
-      @include light-theme {
-        background-color: $color-gray-04;
+      @include mixins.light-theme {
+        background-color: variables.$color-gray-04;
       }
 
-      @include dark-theme {
-        background-color: $color-gray-65;
+      @include mixins.dark-theme {
+        background-color: variables.$color-gray-65;
       }
 
       &::after {
@@ -33,12 +36,18 @@
         height: 36px;
         content: '';
 
-        @include light-theme {
-          @include color-svg('../images/icons/v3/at/at.svg', $color-gray-75);
+        @include mixins.light-theme {
+          @include mixins.color-svg(
+            '../images/icons/v3/at/at.svg',
+            variables.$color-gray-75
+          );
         }
 
-        @include dark-theme {
-          @include color-svg('../images/icons/v3/at/at.svg', $color-gray-15);
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
+            '../images/icons/v3/at/at.svg',
+            variables.$color-gray-15
+          );
         }
       }
     }
@@ -54,12 +63,12 @@
     margin-block: 0;
     margin-inline: 12px;
 
-    @include light-theme {
-      background-color: $color-gray-20;
+    @include mixins.light-theme {
+      background-color: variables.$color-gray-20;
     }
 
-    @include dark-theme {
-      background-color: $color-gray-45;
+    @include mixins.dark-theme {
+      background-color: variables.$color-gray-45;
     }
   }
 
@@ -68,27 +77,27 @@
   }
 
   &__error {
-    @include font-body-2;
+    @include mixins.font-body-2;
     margin-block: 8px 12px;
     margin-inline: 6px;
     font-size: 12px;
     line-height: 17px;
 
-    color: $color-accent-red;
+    color: variables.$color-accent-red;
   }
 
   &__info {
-    @include font-body-2;
+    @include mixins.font-body-2;
     font-size: 12px;
     line-height: 17px;
     margin-block: 12px;
     margin-inline: 6px;
 
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
 
     // To account for missing error section: 8px top margin, 17px line height,
@@ -99,8 +108,10 @@
   }
 
   &__learn-more-button {
-    @include button-reset;
-    color: $color-accent-blue;
+    @include mixins.button-reset;
+    & {
+      color: variables.$color-accent-blue;
+    }
   }
 
   &__learn-more {
@@ -118,15 +129,17 @@
       -webkit-mask-size: 100%;
       content: '';
 
-      @include light-theme {
-        background-color: $color-gray-75;
+      @include mixins.light-theme {
+        background-color: variables.$color-gray-75;
       }
 
-      @include dark-theme {
-        background-color: $color-gray-15;
+      @include mixins.dark-theme {
+        background-color: variables.$color-gray-15;
       }
 
-      -webkit-mask: url(../images/icons/v2/hashtag-24.svg) no-repeat center;
+      & {
+        -webkit-mask: url(../images/icons/v2/hashtag-24.svg) no-repeat center;
+      }
     }
   }
 
diff --git a/stylesheets/components/ForwardMessageModal.scss b/stylesheets/components/ForwardMessageModal.scss
index 35dc477cc3..357b1c9350 100644
--- a/stylesheets/components/ForwardMessageModal.scss
+++ b/stylesheets/components/ForwardMessageModal.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-ForwardMessageModal {
   flex-direction: column;
   margin-block: 0;
@@ -14,12 +17,12 @@
   }
 
   &--link-preview {
-    border-bottom: 1px solid $color-gray-15;
+    border-bottom: 1px solid variables.$color-gray-15;
     padding-block: 12px;
     padding-inline: 16px;
 
-    @include dark-theme() {
-      border-color: $color-gray-60;
+    @include mixins.dark-theme() {
+      border-color: variables.$color-gray-60;
     }
   }
 
@@ -62,18 +65,18 @@
       &::after {
         height: 24px;
         width: 24px;
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/arrow/arrow-right.svg',
-          $color-white
+          variables.$color-white
         );
       }
     }
 
     &--forward {
       &::after {
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/send/send-fill.svg',
-          $color-white
+          variables.$color-white
         );
       }
     }
@@ -86,7 +89,7 @@
   }
 
   &__footer {
-    @include font-body-2;
+    @include mixins.font-body-2;
     display: flex;
     align-items: center;
     flex-grow: 1;
diff --git a/stylesheets/components/GradientDial.scss b/stylesheets/components/GradientDial.scss
index 684cba20bd..8e895c0318 100644
--- a/stylesheets/components/GradientDial.scss
+++ b/stylesheets/components/GradientDial.scss
@@ -1,10 +1,13 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .GradientDial {
   &__container {
     height: 100%;
-    @include position-absolute-center;
+    @include mixins.position-absolute-center;
     width: 100%;
   }
 
@@ -17,8 +20,8 @@
     }
 
     &--node {
-      background: $color-white;
-      border: 1px solid $color-black-alpha-20;
+      background: variables.$color-white;
+      border: 1px solid variables.$color-black-alpha-20;
       height: 100%;
       height: 1000px;
       inset-inline-start: 50%;
@@ -30,20 +33,22 @@
   }
 
   &__knob {
-    @include color-bubble(42px);
-    box-shadow: 0 0 4px $color-black-alpha-20;
-    cursor: move;
-    margin-inline-start: -20px;
-    margin-top: -20px;
-    padding: 2px;
-    position: absolute;
-    z-index: $z-index-base;
+    @include mixins.color-bubble(42px);
+    & {
+      box-shadow: 0 0 4px variables.$color-black-alpha-20;
+      cursor: move;
+      margin-inline-start: -20px;
+      margin-top: -20px;
+      padding: 2px;
+      position: absolute;
+      z-index: variables.$z-index-base;
+    }
 
     &--selected {
-      border-color: $color-gray-75;
+      border-color: variables.$color-gray-75;
 
-      @include dark-theme {
-        border-color: $color-white;
+      @include mixins.dark-theme {
+        border-color: variables.$color-white;
       }
     }
 
@@ -51,9 +56,9 @@
       outline: none;
     }
 
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       &:focus {
-        border-color: $color-ultramarine;
+        border-color: variables.$color-ultramarine;
         outline: none;
       }
     }
diff --git a/stylesheets/components/GroupDescription.scss b/stylesheets/components/GroupDescription.scss
index d7494e8d7e..e23b63c0e4 100644
--- a/stylesheets/components/GroupDescription.scss
+++ b/stylesheets/components/GroupDescription.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .GroupDescription {
   &__text {
     -webkit-box-orient: vertical;
@@ -10,18 +13,20 @@
     user-select: text;
 
     a {
-      @include light-theme {
-        color: $color-gray-90;
+      @include mixins.light-theme {
+        color: variables.$color-gray-90;
       }
-      @include dark-theme {
-        color: $color-gray-02;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-02;
       }
     }
   }
 
   &__read-more {
-    @include button-reset();
-    display: inline-block;
-    font-weight: bold;
+    @include mixins.button-reset();
+    & {
+      display: inline-block;
+      font-weight: bold;
+    }
   }
 }
diff --git a/stylesheets/components/GroupDialog.scss b/stylesheets/components/GroupDialog.scss
index 05714f0ac9..b036a04940 100644
--- a/stylesheets/components/GroupDialog.scss
+++ b/stylesheets/components/GroupDialog.scss
@@ -1,59 +1,72 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-.module-GroupDialog {
-  @include popper-shadow();
-  border-radius: 8px;
-  margin-block: 0;
-  margin-inline: auto;
-  max-height: 80vh;
-  max-width: 360px;
-  padding: 16px;
-  position: relative;
-  width: 95%;
-  display: flex;
-  flex-direction: column;
+@use '../mixins';
+@use '../variables';
 
-  @include light-theme() {
-    background: $color-white;
-    color: $color-gray-90;
+.module-GroupDialog {
+  @include mixins.popper-shadow();
+  & {
+    border-radius: 8px;
+    margin-block: 0;
+    margin-inline: auto;
+    max-height: 80vh;
+    max-width: 360px;
+    padding: 16px;
+    position: relative;
+    width: 95%;
+    display: flex;
+    flex-direction: column;
   }
 
-  @include dark-theme() {
-    background: $color-gray-95;
-    color: $color-gray-05;
+  @include mixins.light-theme() {
+    background: variables.$color-white;
+    color: variables.$color-gray-90;
+  }
+
+  @include mixins.dark-theme() {
+    background: variables.$color-gray-95;
+    color: variables.$color-gray-05;
   }
 
   &__close-button {
-    @include button-reset;
+    @include mixins.button-reset;
 
-    position: absolute;
-    inset-inline-end: 12px;
-    top: 12px;
+    & {
+      position: absolute;
+      inset-inline-end: 12px;
+      top: 12px;
 
-    height: 24px;
-    width: 24px;
-
-    @include light-theme {
-      @include color-svg('../images/icons/v3/x/x.svg', $color-gray-75);
+      height: 24px;
+      width: 24px;
     }
 
-    @include dark-theme {
-      @include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
+    @include mixins.light-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/x/x.svg',
+        variables.$color-gray-75
+      );
+    }
+
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/x/x.svg',
+        variables.$color-gray-15
+      );
     }
 
     &:focus {
-      @include keyboard-mode {
-        background-color: $color-ultramarine;
+      @include mixins.keyboard-mode {
+        background-color: variables.$color-ultramarine;
       }
-      @include dark-keyboard-mode {
-        background-color: $color-ultramarine-light;
+      @include mixins.dark-keyboard-mode {
+        background-color: variables.$color-ultramarine-light;
       }
     }
   }
 
   &__title {
-    @include font-title-2;
+    @include mixins.font-title-2;
     text-align: center;
     margin-bottom: 20px;
 
@@ -84,11 +97,11 @@
       top: 4px;
       width: 4px;
 
-      @include light-theme {
-        background-color: $color-gray-15;
+      @include mixins.light-theme {
+        background-color: variables.$color-gray-15;
       }
-      @include dark-theme {
-        background-color: $color-gray-65;
+      @include mixins.dark-theme {
+        background-color: variables.$color-gray-65;
       }
     }
   }
diff --git a/stylesheets/components/GroupInput.scss b/stylesheets/components/GroupInput.scss
index e855c7c268..0baaeeb106 100644
--- a/stylesheets/components/GroupInput.scss
+++ b/stylesheets/components/GroupInput.scss
@@ -1,8 +1,11 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-GroupInput {
-  @include normal-input;
+  @include mixins.normal-input;
 
   &__description {
     resize: none;
@@ -13,9 +16,9 @@
     }
 
     &--remaining {
-      @include font-subtitle;
+      @include mixins.font-subtitle;
       bottom: 0;
-      color: $color-gray-45;
+      color: variables.$color-gray-45;
       margin: 12px;
       position: absolute;
       inset-inline-end: 0;
diff --git a/stylesheets/components/HueSlider.scss b/stylesheets/components/HueSlider.scss
index ba589bf481..b105c86933 100644
--- a/stylesheets/components/HueSlider.scss
+++ b/stylesheets/components/HueSlider.scss
@@ -1,6 +1,8 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../variables';
+
 .HueSlider {
   &.Slider {
     background-image: linear-gradient(
@@ -24,7 +26,7 @@
 
   &__handle {
     &.Slider__handle {
-      border: 7px solid $color-white;
+      border: 7px solid variables.$color-white;
       margin-top: -7px;
       margin-inline-start: -11px;
       height: 22px;
diff --git a/stylesheets/components/InAnotherCallTooltip.scss b/stylesheets/components/InAnotherCallTooltip.scss
index a666cd4e4c..bed2c35c0b 100644
--- a/stylesheets/components/InAnotherCallTooltip.scss
+++ b/stylesheets/components/InAnotherCallTooltip.scss
@@ -1,6 +1,8 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+
 .InAnotherCallTooltip {
-  @include tooltip;
+  @include mixins.tooltip;
 }
diff --git a/stylesheets/components/Inbox.scss b/stylesheets/components/Inbox.scss
index f3ead907bb..7eed469de2 100644
--- a/stylesheets/components/Inbox.scss
+++ b/stylesheets/components/Inbox.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .Inbox {
   display: flex;
   flex-direction: row;
@@ -25,12 +28,12 @@
   }
 
   .__conversation {
-    @include light-theme {
-      background-color: $color-white;
+    @include mixins.light-theme {
+      background-color: variables.$color-white;
     }
 
-    @include dark-theme {
-      background-color: $color-gray-95;
+    @include mixins.dark-theme {
+      background-color: variables.$color-gray-95;
     }
   }
 }
@@ -48,11 +51,11 @@
   margin-block: 24px;
   position: relative;
 
-  @include light-theme() {
-    --Inbox__logo__bg: #{$color-ultramarine-logo};
+  @include mixins.light-theme() {
+    --Inbox__logo__bg: #{variables.$color-ultramarine-logo};
   }
-  @include dark-theme() {
-    --Inbox__logo__bg: #{$color-white};
+  @include mixins.dark-theme() {
+    --Inbox__logo__bg: #{variables.$color-white};
   }
 
   .Inbox__logo__part {
@@ -62,8 +65,13 @@
   }
 
   .Inbox__logo__part--base {
-    @include color-svg('../images/logo-parts/base.svg', var(--Inbox__logo__bg));
-    z-index: 1;
+    @include mixins.color-svg(
+      '../images/logo-parts/base.svg',
+      var(--Inbox__logo__bg)
+    );
+    & {
+      z-index: 1;
+    }
   }
 
   .Inbox__logo__part--segment {
@@ -79,11 +87,13 @@
 
   @for $i from 1 through 16 {
     .Inbox__logo__part--segment:nth-child(#{$i + 1}) {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/logo-parts/p#{$i}.svg',
         var(--Inbox__logo__bg)
       );
-      transform: rotate(#{(16 - $i) * 22.5}deg);
+      & {
+        transform: rotate(#{(16 - $i) * 22.5}deg);
+      }
     }
   }
 
@@ -96,7 +106,7 @@
 .Inbox__welcome {
   margin-block: 20px 6px;
 
-  @include font-title-medium;
+  @include mixins.font-title-medium;
   line-height: 24px;
 }
 
diff --git a/stylesheets/components/IncomingCallBar.scss b/stylesheets/components/IncomingCallBar.scss
index b3a9eced0a..1207956f41 100644
--- a/stylesheets/components/IncomingCallBar.scss
+++ b/stylesheets/components/IncomingCallBar.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .IncomingCallBar {
   &__container {
     -webkit-app-region: no-drag;
@@ -9,14 +12,14 @@
     top: 22px;
     user-select: none;
     width: 100%;
-    z-index: $z-index-calling;
+    z-index: variables.$z-index-calling;
     padding-inline: 1rem;
   }
 
   &__bar {
     -webkit-app-region: no-drag;
     align-items: center;
-    background-color: $color-gray-75;
+    background-color: variables.$color-gray-75;
     border-radius: 8px;
     display: flex;
     height: 70px;
@@ -49,7 +52,7 @@
     }
 
     &--name-header {
-      @include font-body-1-bold;
+      @include mixins.font-body-1-bold;
       color: #ffffff;
       overflow-x: hidden;
       text-overflow: ellipsis;
@@ -59,7 +62,7 @@
     &--message-text {
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
-      @include font-body-2;
+      @include mixins.font-body-2;
       color: #ffffff;
       display: -webkit-box;
       overflow: hidden;
@@ -90,102 +93,110 @@
     }
 
     &--accept-video-as-audio {
-      background-color: $color-gray-45;
+      background-color: variables.$color-gray-45;
 
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus {
-          box-shadow: 0px 0px 0px 4px $color-ultramarine;
+          box-shadow: 0px 0px 0px 4px variables.$color-ultramarine;
         }
       }
 
-      @include mouse-mode {
+      @include mixins.mouse-mode {
         &:hover {
-          box-shadow: 0px 0px 0px 2px $color-ultramarine;
+          box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
         }
       }
 
       div {
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/video/video-slash-fill.svg',
-          $color-white
+          variables.$color-white
         );
-        height: 24px;
-        width: 24px;
+        & {
+          height: 24px;
+          width: 24px;
+        }
       }
     }
 
     &--accept-video {
-      background-color: $color-accent-green;
+      background-color: variables.$color-accent-green;
 
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus {
-          box-shadow: 0px 0px 0px 4px $color-ultramarine;
+          box-shadow: 0px 0px 0px 4px variables.$color-ultramarine;
         }
       }
 
-      @include mouse-mode {
+      @include mixins.mouse-mode {
         &:hover {
-          box-shadow: 0px 0px 0px 2px $color-ultramarine;
+          box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
         }
       }
 
       div {
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/video/video-fill.svg',
-          $color-white
+          variables.$color-white
         );
-        height: 24px;
-        width: 24px;
+        & {
+          height: 24px;
+          width: 24px;
+        }
       }
     }
 
     &--accept-audio {
-      background-color: $color-accent-green;
+      background-color: variables.$color-accent-green;
 
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus {
-          box-shadow: 0px 0px 0px 4px $color-ultramarine;
+          box-shadow: 0px 0px 0px 4px variables.$color-ultramarine;
         }
       }
 
-      @include mouse-mode {
+      @include mixins.mouse-mode {
         &:hover {
-          box-shadow: 0px 0px 0px 2px $color-ultramarine;
+          box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
         }
       }
 
       div {
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/phone/phone-fill.svg',
-          $color-white
+          variables.$color-white
         );
-        height: 24px;
-        width: 24px;
+        & {
+          height: 24px;
+          width: 24px;
+        }
       }
     }
 
     &--decline {
-      background-color: $color-accent-red;
+      background-color: variables.$color-accent-red;
 
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus {
-          box-shadow: 0px 0px 0px 4px $color-ultramarine;
+          box-shadow: 0px 0px 0px 4px variables.$color-ultramarine;
         }
       }
 
-      @include mouse-mode {
+      @include mixins.mouse-mode {
         &:hover {
-          box-shadow: 0px 0px 0px 2px $color-ultramarine;
+          box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
         }
       }
 
       div {
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/phone/phone-down-fill.svg',
-          $color-white
+          variables.$color-white
         );
-        height: 24px;
-        width: 24px;
+        & {
+          height: 24px;
+          width: 24px;
+        }
       }
     }
   }
diff --git a/stylesheets/components/Input.scss b/stylesheets/components/Input.scss
index eacb90719f..22afc448ee 100644
--- a/stylesheets/components/Input.scss
+++ b/stylesheets/components/Input.scss
@@ -1,9 +1,12 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .Input {
   &__container {
-    @include font-body-1;
+    @include mixins.font-body-1;
     border-radius: 6px;
     border-style: solid;
     border-width: 2px;
@@ -19,40 +22,40 @@
       padding-inline: 8px;
     }
 
-    @include light-theme {
-      background: $color-white;
-      border-color: $color-gray-15;
-      color: $color-black;
+    @include mixins.light-theme {
+      background: variables.$color-white;
+      border-color: variables.$color-gray-15;
+      color: variables.$color-black;
     }
 
-    @include dark-theme {
-      background: $color-gray-80;
-      border-color: $color-gray-45;
-      color: $color-gray-05;
+    @include mixins.dark-theme {
+      background: variables.$color-gray-80;
+      border-color: variables.$color-gray-45;
+      color: variables.$color-gray-05;
     }
 
     &--disabled {
-      @include light-theme {
-        background: $color-gray-02;
-        border-color: $color-gray-05;
-        color: $color-gray-90;
+      @include mixins.light-theme {
+        background: variables.$color-gray-02;
+        border-color: variables.$color-gray-05;
+        color: variables.$color-gray-90;
       }
 
-      @include dark-theme {
-        background: $color-gray-95;
-        border-color: $color-gray-60;
-        color: $color-gray-20;
+      @include mixins.dark-theme {
+        background: variables.$color-gray-95;
+        border-color: variables.$color-gray-60;
+        color: variables.$color-gray-20;
       }
     }
 
     &:focus-within {
       outline: none;
 
-      @include light-theme {
-        border-color: $color-ultramarine;
+      @include mixins.light-theme {
+        border-color: variables.$color-ultramarine;
       }
-      @include dark-theme {
-        border-color: $color-ultramarine-light;
+      @include mixins.dark-theme {
+        border-color: variables.$color-ultramarine-light;
       }
     }
   }
@@ -65,7 +68,7 @@
   }
 
   &__input {
-    @include font-body-1;
+    @include mixins.font-body-1;
 
     background: inherit;
     border: none;
@@ -81,15 +84,15 @@
     }
 
     &:placeholder {
-      color: $color-gray-45;
+      color: variables.$color-gray-45;
     }
 
-    @include light-theme {
-      color: $color-black;
+    @include mixins.light-theme {
+      color: variables.$color-black;
     }
 
-    @include dark-theme {
-      color: $color-gray-05;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-05;
     }
 
     &:focus {
@@ -110,17 +113,23 @@
     height: 18px;
     width: 18px;
 
-    @include light-theme {
-      @include color-svg('../images/icons/v3/x/x.svg', $color-gray-60);
+    @include mixins.light-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/x/x.svg',
+        variables.$color-gray-60
+      );
     }
-    @include dark-theme {
-      @include color-svg('../images/icons/v3/x/x.svg', $color-gray-25);
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/x/x.svg',
+        variables.$color-gray-25
+      );
     }
   }
 
   &__remaining-count {
-    @include font-subtitle;
-    color: $color-gray-45;
+    @include mixins.font-subtitle;
+    color: variables.$color-gray-45;
 
     &--large {
       position: absolute;
@@ -131,7 +140,7 @@
     }
 
     &--warn {
-      color: $color-accent-red;
+      color: variables.$color-accent-red;
     }
   }
 }
diff --git a/stylesheets/components/InstallScreenBackupImportStep.scss b/stylesheets/components/InstallScreenBackupImportStep.scss
index 8e1def945b..af0072d93e 100644
--- a/stylesheets/components/InstallScreenBackupImportStep.scss
+++ b/stylesheets/components/InstallScreenBackupImportStep.scss
@@ -1,6 +1,9 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .InstallScreenBackupImportStep {
   position: relative;
   display: flex;
@@ -22,7 +25,7 @@
 }
 
 .InstallScreenBackupImportStep__title {
-  @include font-title-2;
+  @include mixins.font-title-2;
   margin-block: 0 20px;
 }
 
@@ -31,41 +34,43 @@
 }
 
 .InstallScreenBackupImportStep__progressbar-hint {
-  @include font-caption;
+  @include mixins.font-caption;
   margin-block-end: 22px;
 
-  @include light-theme {
-    color: rgba($color-gray-60, 0.8);
+  @include mixins.light-theme {
+    color: rgba(variables.$color-gray-60, 0.8);
   }
 
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 
 .InstallScreenBackupImportStep__description {
-  @include font-body-1;
+  @include mixins.font-body-1;
 
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
 
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 
 .InstallScreenBackupImportStep__cancel {
-  @include button-reset();
-  @include button-focus-outline;
-  @include font-body-1-bold;
-
-  @include light-theme() {
-    color: $color-ultramarine;
+  @include mixins.button-reset();
+  & {
+    @include mixins.button-focus-outline;
+    @include mixins.font-body-1-bold;
   }
 
-  @include dark-theme() {
-    color: $color-ultramarine-light;
+  @include mixins.light-theme() {
+    color: variables.$color-ultramarine;
+  }
+
+  @include mixins.dark-theme() {
+    color: variables.$color-ultramarine-light;
   }
 }
 
@@ -85,34 +90,39 @@
   max-width: 336px;
 
   &--icon::after {
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/lock/lock.svg',
-        rgba($color-gray-60, 0.8)
+        rgba(variables.$color-gray-60, 0.8)
       );
     }
 
-    @include dark-theme {
-      @include color-svg('../images/icons/v3/lock/lock.svg', $color-gray-25);
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/lock/lock.svg',
+        variables.$color-gray-25
+      );
     }
 
-    content: '';
-    display: block;
-    height: 16px;
-    width: 16px;
-    margin-bottom: 4px;
+    & {
+      content: '';
+      display: block;
+      height: 16px;
+      width: 16px;
+      margin-bottom: 4px;
+    }
   }
 
   &--description {
-    @include font-caption;
+    @include mixins.font-caption;
     text-align: center;
 
-    @include light-theme {
-      color: rgba($color-gray-60, 0.8);
+    @include mixins.light-theme {
+      color: rgba(variables.$color-gray-60, 0.8);
     }
 
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
 
     a {
diff --git a/stylesheets/components/InstallScreenChoosingDeviceNameStep.scss b/stylesheets/components/InstallScreenChoosingDeviceNameStep.scss
index d381923930..ec0557486d 100644
--- a/stylesheets/components/InstallScreenChoosingDeviceNameStep.scss
+++ b/stylesheets/components/InstallScreenChoosingDeviceNameStep.scss
@@ -1,10 +1,14 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-.module-InstallScreenChoosingDeviceNameStep {
-  @include install-screen;
+@use '../mixins';
 
-  text-align: center;
+.module-InstallScreenChoosingDeviceNameStep {
+  @include mixins.install-screen;
+
+  & {
+    text-align: center;
+  }
 
   &__inputs {
     display: flex;
@@ -15,9 +19,11 @@
   }
 
   &__input {
-    @include normal-input;
-    width: 90%;
-    max-width: 300px;
-    margin-bottom: 18px;
+    @include mixins.normal-input;
+    & {
+      width: 90%;
+      max-width: 300px;
+      margin-bottom: 18px;
+    }
   }
 }
diff --git a/stylesheets/components/InstallScreenErrorStep.scss b/stylesheets/components/InstallScreenErrorStep.scss
index 1d141c4754..a2b0ccbfe7 100644
--- a/stylesheets/components/InstallScreenErrorStep.scss
+++ b/stylesheets/components/InstallScreenErrorStep.scss
@@ -1,11 +1,15 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+
 .module-InstallScreenErrorStep {
-  @include install-screen;
-  flex-direction: column;
-  padding-inline: 2rem;
-  text-align: center;
+  @include mixins.install-screen;
+  & {
+    flex-direction: column;
+    padding-inline: 2rem;
+    text-align: center;
+  }
 
   &__buttons {
     margin-top: 1rem;
diff --git a/stylesheets/components/InstallScreenLinkInProgressStep.scss b/stylesheets/components/InstallScreenLinkInProgressStep.scss
index 622bc72999..59fe4b361a 100644
--- a/stylesheets/components/InstallScreenLinkInProgressStep.scss
+++ b/stylesheets/components/InstallScreenLinkInProgressStep.scss
@@ -1,27 +1,32 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-.module-InstallScreenLinkInProgressStep {
-  @include install-screen;
+@use '../mixins';
+@use '../variables';
 
-  flex-direction: column;
-  text-align: center;
+.module-InstallScreenLinkInProgressStep {
+  @include mixins.install-screen;
+
+  & {
+    flex-direction: column;
+    text-align: center;
+  }
 
   h1 {
-    @include font-title-2;
+    @include mixins.font-title-2;
     margin-top: 18px;
   }
 
   h2 {
-    @include font-body-1;
+    @include mixins.font-body-1;
     font-weight: normal;
     margin-block-start: 0;
 
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
   }
 }
diff --git a/stylesheets/components/InstallScreenQrCodeNotScannedStep.scss b/stylesheets/components/InstallScreenQrCodeNotScannedStep.scss
index c4da94ee2f..e0a16dc302 100644
--- a/stylesheets/components/InstallScreenQrCodeNotScannedStep.scss
+++ b/stylesheets/components/InstallScreenQrCodeNotScannedStep.scss
@@ -1,28 +1,31 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-InstallScreenQrCodeNotScannedStep {
-  @include install-screen;
+  @include mixins.install-screen;
 
   &__contents {
     $base-max-width: 760px;
 
     align-items: center;
-    background: $color-white;
+    background: variables.$color-white;
     border-radius: 8px;
-    color: $color-black;
+    color: variables.$color-black;
     display: flex;
     flex-direction: row;
     animation: 500ms module-InstallScreenQrCodeNotScannedStep__slide-in;
     position: relative;
     top: 0;
 
-    @include light-theme {
+    @include mixins.light-theme {
       max-width: $base-max-width;
       padding: 22px;
     }
 
-    @include dark-theme {
+    @include mixins.dark-theme {
       max-width: $base-max-width + 44px;
       padding: 44px;
       margin-top: 44px; // Avoids overlap with the Signal logo
@@ -45,36 +48,40 @@
     width: $size;
 
     &--loaded {
-      background: $color-white;
+      background: variables.$color-white;
     }
 
     &--load-failed {
-      @include font-subtitle;
-      border-color: $color-gray-05;
+      @include mixins.font-subtitle;
+      border-color: variables.$color-gray-05;
       border-radius: 10px;
-      color: $color-gray-60;
+      color: variables.$color-gray-60;
     }
 
     &__link {
-      @include button-reset;
-      @include font-body-2-bold;
+      @include mixins.button-reset;
+      & {
+        @include mixins.font-body-2-bold;
 
-      display: flex;
-      gap: 4px;
-      align-items: center;
+        display: flex;
+        gap: 4px;
+        align-items: center;
 
-      color: $color-ultramarine;
-      margin-block-start: 16px;
+        color: variables.$color-ultramarine;
+        margin-block-start: 16px;
+      }
 
       &::before {
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/refresh/refresh-bold.svg',
-          $color-ultramarine
+          variables.$color-ultramarine
         );
-        content: '';
-        display: block;
-        height: 16px;
-        width: 16px;
+        & {
+          content: '';
+          display: block;
+          height: 16px;
+          width: 16px;
+        }
       }
     }
 
@@ -87,22 +94,26 @@
 
     &__error-message {
       text-align: center;
-      @include font-body-2;
+      @include mixins.font-body-2;
 
       &::before {
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/error/error-circle.svg',
-          $color-accent-red
+          variables.$color-accent-red
         );
-        content: '';
-        display: block;
-        height: 22px;
-        margin-block: 0 8px;
-        margin-inline: auto;
-        width: 22px;
+        & {
+          content: '';
+          display: block;
+          height: 22px;
+          margin-block: 0 8px;
+          margin-inline: auto;
+          width: 22px;
+        }
       }
 
-      margin-inline: 24px;
+      & {
+        margin-inline: 24px;
+      }
     }
 
     &__error-message p {
@@ -110,7 +121,7 @@
     }
 
     &__get-help {
-      @include font-body-2-bold;
+      @include mixins.font-body-2-bold;
 
       display: flex;
       gap: 4px;
@@ -118,24 +129,26 @@
 
       margin-block-start: 16px;
 
-      color: $color-ultramarine;
+      color: variables.$color-ultramarine;
       text-decoration: none;
 
       &::before {
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/open/open-compact-bold.svg',
-          $color-ultramarine
+          variables.$color-ultramarine
         );
-        content: '';
-        display: block;
-        height: 16px;
-        width: 16px;
+        & {
+          content: '';
+          display: block;
+          height: 16px;
+          width: 16px;
+        }
       }
     }
   }
 
   ol {
-    @include font-body-1;
+    @include mixins.font-body-1;
     line-height: 26px;
     list-style-position: inside;
     padding-inline-start: 0;
@@ -143,7 +156,7 @@
 
   a {
     // We want the right link color in dark mode. This is a no-op in light mode.
-    color: $color-ultramarine;
+    color: variables.$color-ultramarine;
   }
 }
 
diff --git a/stylesheets/components/InstallScreenSignalLogo.scss b/stylesheets/components/InstallScreenSignalLogo.scss
index bbe9deceb9..bbdeb79cd9 100644
--- a/stylesheets/components/InstallScreenSignalLogo.scss
+++ b/stylesheets/components/InstallScreenSignalLogo.scss
@@ -1,8 +1,11 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .InstallScreenSignalLogo {
-  @include font-title-1;
+  @include mixins.font-title-1;
   align-items: center;
   display: flex;
   font-weight: bold;
@@ -11,11 +14,16 @@
   inset-inline-start: 32px;
 
   &::before {
-    @include color-svg('../images/signal-logo.svg', $color-ultramarine-logo);
-    content: '';
-    display: block;
-    height: 32px;
-    margin-inline-end: 6px;
-    width: 32px;
+    @include mixins.color-svg(
+      '../images/signal-logo.svg',
+      variables.$color-ultramarine-logo
+    );
+    & {
+      content: '';
+      display: block;
+      height: 32px;
+      margin-inline-end: 6px;
+      width: 32px;
+    }
   }
 }
diff --git a/stylesheets/components/InstallScreenUpdateDialog.scss b/stylesheets/components/InstallScreenUpdateDialog.scss
index 6d8e17aa2d..7d1d136435 100644
--- a/stylesheets/components/InstallScreenUpdateDialog.scss
+++ b/stylesheets/components/InstallScreenUpdateDialog.scss
@@ -1,6 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .InstallScreenUpdateDialog {
   &__download-size {
     font-weight: 400;
@@ -8,22 +11,24 @@
 
   &__progress {
     &--container {
-      @include light-theme() {
-        background-color: $color-gray-15;
+      @include mixins.light-theme() {
+        background-color: variables.$color-gray-15;
       }
-      @include dark-theme() {
-        background-color: $color-gray-65;
+      @include mixins.dark-theme() {
+        background-color: variables.$color-gray-65;
+      }
+      & {
+        border-radius: 2px;
+        height: 4px;
+        overflow: hidden;
+        width: 100%;
+        margin-block: 16px;
+        margin-inline: 0;
       }
-      border-radius: 2px;
-      height: 4px;
-      overflow: hidden;
-      width: 100%;
-      margin-block: 16px;
-      margin-inline: 0;
     }
 
     &--bar {
-      background-color: $color-ultramarine;
+      background-color: variables.$color-ultramarine;
       border-radius: 2px;
       display: block;
       height: 100%;
diff --git a/stylesheets/components/LeftPaneBanner.scss b/stylesheets/components/LeftPaneBanner.scss
index 303a5a2648..ff1f960332 100644
--- a/stylesheets/components/LeftPaneBanner.scss
+++ b/stylesheets/components/LeftPaneBanner.scss
@@ -1,6 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .LeftPaneBanner {
   margin-block: 4px 8px;
   margin-inline: 10px;
@@ -9,16 +12,18 @@
   padding-inline-end: 7px;
 
   border-radius: 8px;
-  @include light-theme {
-    background-color: $color-gray-15;
-    color: $color-gray-75;
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-15;
+    color: variables.$color-gray-75;
   }
-  @include dark-theme {
-    background-color: $color-gray-75;
-    color: $color-gray-15;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-75;
+    color: variables.$color-gray-15;
   }
 
-  @include font-body-2;
+  & {
+    @include mixins.font-body-2;
+  }
 
   &__content {
     margin-bottom: 8px;
@@ -30,15 +35,17 @@
     margin-inline-end: 9px;
 
     &__action-button {
-      @include button-reset;
-      @include button-focus-outline;
-      @include font-body-1-bold;
-
-      @include light-theme {
-        color: $color-gray-90;
+      @include mixins.button-reset;
+      @include mixins.button-focus-outline;
+      & {
+        @include mixins.font-body-1-bold;
       }
-      @include dark-theme {
-        color: $color-gray-05;
+
+      @include mixins.light-theme {
+        color: variables.$color-gray-90;
+      }
+      @include mixins.dark-theme {
+        color: variables.$color-gray-05;
       }
     }
   }
diff --git a/stylesheets/components/LeftPaneDialog.scss b/stylesheets/components/LeftPaneDialog.scss
index e529bdd910..1163097886 100644
--- a/stylesheets/components/LeftPaneDialog.scss
+++ b/stylesheets/components/LeftPaneDialog.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 @keyframes progress-animation {
   0% {
     background-position: 100%;
@@ -11,12 +14,12 @@
 }
 
 .LeftPaneDialog {
-  $default-background-color: $color-ultramarine;
-  $default-text-color: $color-white;
-  $error-background-color: $color-accent-red;
+  $default-background-color: variables.$color-ultramarine;
+  $default-text-color: variables.$color-white;
+  $error-background-color: variables.$color-accent-red;
   $error-text-color: $default-text-color;
-  $warning-background-color: $color-accent-yellow;
-  $warning-text-color: $color-black;
+  $warning-background-color: variables.$color-accent-yellow;
+  $warning-text-color: variables.$color-black;
 
   align-items: center;
   background: $default-background-color;
@@ -39,8 +42,10 @@
   }
 
   &__retry {
-    @include button-reset;
-    @include font-body-1-bold;
+    @include mixins.button-reset;
+    & {
+      @include mixins.font-body-1-bold;
+    }
   }
 
   &--clickable {
@@ -64,16 +69,16 @@
 
   &__spinner {
     &__arc {
-      background-color: $color-black;
+      background-color: variables.$color-black;
 
       // Needed for specificity
-      @include dark-theme {
-        background-color: $color-black;
+      @include mixins.dark-theme {
+        background-color: variables.$color-black;
       }
     }
 
     &__circle {
-      background-color: $color-accent-yellow;
+      background-color: variables.$color-accent-yellow;
     }
   }
 
@@ -81,7 +86,7 @@
     width: 24px;
     height: 24px;
     margin-inline-end: 18px;
-    background-color: $color-white;
+    background-color: variables.$color-white;
     -webkit-mask-size: contain;
 
     @media (forced-colors: active) {
@@ -115,22 +120,26 @@
   }
 
   &__action-text {
-    @include button-reset;
-    text-decoration: none;
-    color: $color-white-alpha-80;
+    @include mixins.button-reset;
+    & {
+      text-decoration: none;
+      color: variables.$color-white-alpha-80;
+    }
   }
 
   &__close-button {
-    @include button-reset;
+    @include mixins.button-reset;
 
-    border-radius: 4px;
-    float: inline-end;
-    height: 20px;
-    width: 20px;
+    & {
+      border-radius: 4px;
+      float: inline-end;
+      height: 20px;
+      width: 20px;
+    }
 
     &::before {
       -webkit-mask: url('../images/icons/v3/x/x.svg') no-repeat center;
-      background-color: $color-white;
+      background-color: variables.$color-white;
       content: '';
       display: block;
       width: 100%;
@@ -138,7 +147,7 @@
 
       @media (forced-colors: active) {
         background-color: WindowText;
-        @include dark-theme {
+        @include mixins.dark-theme {
           background-color: WindowText;
         }
       }
@@ -146,10 +155,10 @@
 
     &:hover,
     &:focus {
-      background-color: $color-white-alpha-20;
+      background-color: variables.$color-white-alpha-20;
     }
     &:active {
-      background-color: $color-white-alpha-20;
+      background-color: variables.$color-white-alpha-20;
     }
 
     @media (forced-colors: active) {
@@ -158,7 +167,7 @@
       &:active {
         background-color: none;
       }
-      @include dark-theme {
+      @include mixins.dark-theme {
         &:hover,
         &:focus,
         &:active {
@@ -177,12 +186,12 @@
     max-width: 250px;
 
     h3 {
-      @include font-body-1-bold;
+      @include mixins.font-body-1-bold;
       padding: 0px;
       margin: 0px;
     }
     span {
-      @include font-body-1;
+      @include mixins.font-body-1;
       display: inline-block;
     }
     a {
@@ -204,7 +213,7 @@
       background-color: $error-background-color;
       color: $error-text-color;
 
-      @include any-theme {
+      @include mixins.any-theme {
         --tooltip-background-color: #{$error-background-color};
         --tooltip-text-color: #{$error-text-color};
       }
@@ -222,7 +231,7 @@
       background-color: $warning-background-color;
       color: $warning-text-color;
 
-      @include any-theme {
+      @include mixins.any-theme {
         --tooltip-background-color: #{$warning-background-color};
         --tooltip-text-color: #{$warning-text-color};
       }
@@ -255,7 +264,7 @@
 
   &__progress {
     &--container {
-      background: $color-white-alpha-20;
+      background: variables.$color-white-alpha-20;
       border-radius: 2px;
       height: 4px;
       max-width: 210px;
@@ -269,11 +278,11 @@
       animation: progress-animation 2s linear infinite;
       background: linear-gradient(
         90deg,
-        $color-white-alpha-40,
-        $color-white-alpha-60,
-        $color-white-alpha-90,
-        $color-white-alpha-60,
-        $color-white-alpha-40
+        variables.$color-white-alpha-40,
+        variables.$color-white-alpha-60,
+        variables.$color-white-alpha-90,
+        variables.$color-white-alpha-60,
+        variables.$color-white-alpha-40
       );
       background-size: 200% 100%;
       border-radius: 2px;
diff --git a/stylesheets/components/LeftPaneSearchInput.scss b/stylesheets/components/LeftPaneSearchInput.scss
index ec495ddb79..1bb311cfb3 100644
--- a/stylesheets/components/LeftPaneSearchInput.scss
+++ b/stylesheets/components/LeftPaneSearchInput.scss
@@ -1,29 +1,34 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .LeftPaneSearchInput {
   &__input--with-children.module-SearchInput__input--with-children {
     padding-inline-start: 50px;
   }
 
   &__in-conversation-pill {
-    @include button-reset;
-    @include rounded-corners;
-    align-items: center;
-    bottom: 4px;
-    display: flex;
-    flex-direction: row;
-    inset-inline-start: 3px;
-    padding-block: 0;
-    padding-inline: 0 3px;
-    position: absolute;
-    top: 4px;
-
-    @include light-theme {
-      background-color: $color-gray-25;
+    @include mixins.button-reset;
+    & {
+      @include mixins.rounded-corners;
+      align-items: center;
+      bottom: 4px;
+      display: flex;
+      flex-direction: row;
+      inset-inline-start: 3px;
+      padding-block: 0;
+      padding-inline: 0 3px;
+      position: absolute;
+      top: 4px;
     }
-    @include dark-theme {
-      background-color: $color-gray-80;
+
+    @include mixins.light-theme {
+      background-color: variables.$color-gray-25;
+    }
+    @include mixins.dark-theme {
+      background-color: variables.$color-gray-80;
     }
 
     &__x-button {
@@ -31,25 +36,31 @@
       margin-inline-start: 2px;
       width: 16px;
 
-      @include light-theme {
-        @include color-svg('../images/icons/v3/x/x.svg', $color-gray-60);
+      @include mixins.light-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/x/x.svg',
+          variables.$color-gray-60
+        );
       }
-      @include dark-theme {
-        @include color-svg('../images/icons/v3/x/x.svg', $color-gray-25);
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/x/x.svg',
+          variables.$color-gray-25
+        );
       }
 
-      @include light-theme {
+      @include mixins.light-theme {
         &:hover,
         &:focus,
         &:active {
-          background: $color-ultramarine;
+          background: variables.$color-ultramarine;
         }
       }
-      @include dark-theme {
+      @include mixins.dark-theme {
         &:hover,
         &:focus,
         &:active {
-          background: $color-ultramarine-light;
+          background: variables.$color-ultramarine-light;
         }
       }
     }
@@ -62,27 +73,29 @@
   }
 
   &__FilterButton {
-    @include button-reset;
-    flex-shrink: 0;
-    padding: 4px;
-    margin-inline-end: 8px;
-    border-radius: 4px;
+    @include mixins.button-reset;
+    & {
+      flex-shrink: 0;
+      padding: 4px;
+      margin-inline-end: 8px;
+      border-radius: 4px;
+    }
 
     &:not(.LeftPaneSearchInput__FilterButton--pressed):hover {
-      @include light-theme {
-        background-color: $color-black-alpha-06;
+      @include mixins.light-theme {
+        background-color: variables.$color-black-alpha-06;
       }
-      @include dark-theme {
-        background-color: $color-white-alpha-06;
+      @include mixins.dark-theme {
+        background-color: variables.$color-white-alpha-06;
       }
     }
 
     &:focus {
       outline: none;
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         box-shadow:
-          0 0 0 2px $color-white,
-          0 0 0 4px $color-ultramarine;
+          0 0 0 2px variables.$color-white,
+          0 0 0 4px variables.$color-ultramarine;
       }
     }
 
@@ -91,33 +104,33 @@
       display: block;
       width: 20px;
       height: 20px;
-      @include light-theme {
-        @include color-svg(
+      @include mixins.light-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/filter/filter.svg',
-          $color-black
+          variables.$color-black
         );
       }
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/filter/filter.svg',
-          $color-gray-15
+          variables.$color-gray-15
         );
       }
     }
 
     &--pressed {
       border-radius: 9999px;
-      background: $color-accent-blue;
+      background: variables.$color-accent-blue;
       &::before {
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/filter/filter.svg',
-          $color-white
+          variables.$color-white
         );
       }
     }
   }
 
   &__FilterLabel {
-    @include sr-only;
+    @include mixins.sr-only;
   }
 }
diff --git a/stylesheets/components/Lightbox.scss b/stylesheets/components/Lightbox.scss
index 3790110915..cd97e792eb 100644
--- a/stylesheets/components/Lightbox.scss
+++ b/stylesheets/components/Lightbox.scss
@@ -1,14 +1,17 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .Lightbox {
   &__container {
-    background-color: $color-black;
+    background-color: variables.$color-black;
     bottom: 0;
     inset-inline: 0;
     position: absolute;
     top: 0;
-    z-index: $z-index-popup;
+    z-index: variables.$z-index-popup;
   }
 
   &__animated {
@@ -51,13 +54,15 @@
   }
 
   &__thumbnail {
-    @include button-reset;
-    position: relative;
-    border-radius: 6px;
-    height: 44px;
-    margin-inline-end: 8px;
-    overflow: hidden;
-    width: 44px;
+    @include mixins.button-reset;
+    & {
+      position: relative;
+      border-radius: 6px;
+      height: 44px;
+      margin-inline-end: 8px;
+      overflow: hidden;
+      width: 44px;
+    }
 
     img {
       height: 100%;
@@ -74,13 +79,18 @@
       width: 100%;
       height: 100%;
       border-radius: 6px;
-      box-shadow: inset 0px 0px 0px 2px $color-white;
+      box-shadow: inset 0px 0px 0px 2px variables.$color-white;
     }
 
     &--unavailable {
-      @include color-svg('../images/image.svg', $color-gray-25);
-      height: 100%;
-      width: 100%;
+      @include mixins.color-svg(
+        '../images/image.svg',
+        variables.$color-gray-25
+      );
+      & {
+        height: 100%;
+        width: 100%;
+      }
     }
   }
 
@@ -92,7 +102,7 @@
       overflow: hidden;
       position: relative;
       // Using this so that the zoom cleanly goes over the footer
-      z-index: $z-index-base;
+      z-index: variables.$z-index-base;
 
       &--zoom {
         backface-visibility: hidden;
@@ -113,37 +123,47 @@
       }
     }
 
-    height: auto;
-    max-height: 100%;
-    max-width: 100%;
-    object-fit: contain;
-    outline: none;
-    width: auto;
+    & {
+      height: auto;
+      max-height: 100%;
+      max-width: 100%;
+      object-fit: contain;
+      outline: none;
+      width: auto;
+    }
   }
 
   &__unsupported {
-    @include button-reset;
-    flex-grow: 1;
-    height: 100%;
-    max-width: 200px;
-    width: 100%;
+    @include mixins.button-reset;
+    & {
+      flex-grow: 1;
+      height: 100%;
+      max-width: 200px;
+      width: 100%;
+    }
 
     &--image {
-      @include color-svg('../images/image.svg', $color-gray-25);
+      @include mixins.color-svg(
+        '../images/image.svg',
+        variables.$color-gray-25
+      );
     }
 
     &--video {
-      @include color-svg('../images/movie.svg', $color-gray-25);
+      @include mixins.color-svg(
+        '../images/movie.svg',
+        variables.$color-gray-25
+      );
     }
 
     &--file {
-      @include color-svg('../images/file.svg', $color-gray-25);
+      @include mixins.color-svg('../images/file.svg', variables.$color-gray-25);
     }
 
     &--missing {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/full-screen-flow/alert-outline.svg',
-        $color-gray-25
+        variables.$color-gray-25
       );
     }
   }
@@ -158,10 +178,12 @@
   }
 
   &__zoom-button {
-    @include button-reset;
-    max-height: 100%;
-    max-width: 100%;
-    cursor: zoom-in;
+    @include mixins.button-reset;
+    & {
+      max-height: 100%;
+      max-width: 100%;
+      cursor: zoom-in;
+    }
   }
 
   &__object--container--zoom,
@@ -172,8 +194,8 @@
   }
 
   &__caption {
-    @include font-body-2;
-    color: $color-white;
+    @include mixins.font-body-2;
+    color: variables.$color-white;
     margin-block: 12px;
     margin-inline: 0;
     text-align: center;
@@ -184,8 +206,8 @@
   }
 
   &__timestamp {
-    @include font-body-1;
-    background-color: $color-black;
+    @include mixins.font-body-1;
+    background-color: variables.$color-black;
     border-radius: 15px;
     color: #eeefef;
     padding-block: 6px;
@@ -201,7 +223,7 @@
     height: var(--height);
 
     // We need this so that the buttons stack above the container
-    z-index: $z-index-above-base;
+    z-index: variables.$z-index-above-base;
 
     // Added extended click zone only when it wouldn't overlap video controls
     @media (min-height: 500px) {
@@ -242,13 +264,13 @@
     }
 
     &--name {
-      @include font-body-2-bold;
-      color: $color-white;
+      @include mixins.font-body-2-bold;
+      color: variables.$color-white;
     }
 
     &--timestamp {
-      @include font-caption;
-      color: $color-gray-25;
+      @include mixins.font-caption;
+      color: variables.$color-gray-25;
     }
   }
 
@@ -272,12 +294,13 @@
   }
 
   &__button {
-    @include button-reset;
-
-    border-radius: 4px;
-    display: inline-block;
-    height: 24px;
-    width: 24px;
+    @include mixins.button-reset;
+    & {
+      border-radius: 4px;
+      display: inline-block;
+      height: 24px;
+      width: 24px;
+    }
 
     &::before {
       content: '';
@@ -287,33 +310,39 @@
     }
 
     &:focus {
-      outline: 4px solid $color-ultramarine;
+      outline: 4px solid variables.$color-ultramarine;
     }
 
     &:disabled {
       &::before {
-        background: $color-gray-65;
+        background: variables.$color-gray-65;
       }
     }
 
     &--forward {
       &::before {
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/forward/forward.svg',
-          $color-gray-15
+          variables.$color-gray-15
         );
       }
     }
 
     &--save {
       &::before {
-        @include color-svg('../images/icons/v3/save/save.svg', $color-gray-15);
+        @include mixins.color-svg(
+          '../images/icons/v3/save/save.svg',
+          variables.$color-gray-15
+        );
       }
     }
 
     &--close {
       &::before {
-        @include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
+        @include mixins.color-svg(
+          '../images/icons/v3/x/x.svg',
+          variables.$color-gray-15
+        );
       }
     }
 
@@ -331,7 +360,7 @@
       &::before {
         width: 32px;
         height: 32px;
-        -webkit-filter: drop-shadow(0 0 4px $color-black-alpha-40);
+        -webkit-filter: drop-shadow(0 0 4px variables.$color-black-alpha-40);
         content: '';
         display: block;
         background-size: 100%;
@@ -346,12 +375,12 @@
         outline: none;
       }
 
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus {
           opacity: 1;
         }
       }
-      @include button-focus-outline;
+      @include mixins.button-focus-outline;
     }
 
     &--previous {
diff --git a/stylesheets/components/ListTile.scss b/stylesheets/components/ListTile.scss
index 7c7fff92c9..92d2a3cc17 100644
--- a/stylesheets/components/ListTile.scss
+++ b/stylesheets/components/ListTile.scss
@@ -1,6 +1,9 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 button.ListTile {
   width: 100%;
 }
@@ -33,7 +36,7 @@ button.ListTile {
     flex: 1;
     display: flex;
     flex-direction: column;
-    font-family: $inter;
+    font-family: variables.$inter;
   }
 
   &__title {
@@ -50,7 +53,7 @@ button.ListTile {
     -webkit-box-orient: vertical;
     overflow: hidden;
     font-size: 12px;
-    color: $color-gray-25;
+    color: variables.$color-gray-25;
     line-height: 17px;
 
     &--max-lines-1 {
@@ -63,11 +66,11 @@ button.ListTile {
       -webkit-line-clamp: 3;
     }
 
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
   }
 
@@ -87,12 +90,12 @@ button.ListTile {
 
     &:hover:not([aria-disabled='true'], [aria-selected='true']),
     &:focus:not([aria-disabled='true'], [aria-selected='true']) {
-      @include light-theme {
-        background-color: $color-black-alpha-06;
+      @include mixins.light-theme {
+        background-color: variables.$color-black-alpha-06;
       }
 
-      @include dark-theme {
-        background-color: $color-white-alpha-06;
+      @include mixins.dark-theme {
+        background-color: variables.$color-white-alpha-06;
       }
 
       & .ConversationDetails-panel-row__actions {
diff --git a/stylesheets/components/LocalDeleteWarningModal.scss b/stylesheets/components/LocalDeleteWarningModal.scss
index bd0b228688..a7a9ca15bf 100644
--- a/stylesheets/components/LocalDeleteWarningModal.scss
+++ b/stylesheets/components/LocalDeleteWarningModal.scss
@@ -1,6 +1,8 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+
 .LocalDeleteWarningModal__width-container {
   max-width: 440px;
 }
@@ -11,7 +13,7 @@
 }
 
 .LocalDeleteWarningModal__header {
-  @include font-title-2;
+  @include mixins.font-title-2;
 
   margin-block: 18px;
   margin-inline: 8px;
diff --git a/stylesheets/components/MediaEditor.scss b/stylesheets/components/MediaEditor.scss
index 7197c1448c..861148b405 100644
--- a/stylesheets/components/MediaEditor.scss
+++ b/stylesheets/components/MediaEditor.scss
@@ -1,8 +1,11 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .MediaEditor {
-  background: $color-gray-95;
+  background: variables.$color-gray-95;
   display: flex;
   flex-direction: column;
   width: 100vw;
@@ -13,7 +16,7 @@
   user-select: none;
   -webkit-app-region: no-drag;
 
-  z-index: $z-index-popup-overlay;
+  z-index: variables.$z-index-popup-overlay;
 
   &__container {
     display: flex;
@@ -43,16 +46,18 @@
   }
 
   &__control {
-    @include button-reset;
-    align-items: center;
-    border-radius: 20px;
-    display: inline-flex;
-    height: 32px;
-    justify-content: center;
-    margin-block: 0;
-    margin-inline: 20px;
-    opacity: 1;
-    width: 32px;
+    @include mixins.button-reset;
+    & {
+      align-items: center;
+      border-radius: 20px;
+      display: inline-flex;
+      height: 32px;
+      justify-content: center;
+      margin-block: 0;
+      margin-inline: 20px;
+      opacity: 1;
+      width: 32px;
+    }
 
     &::after {
       content: ' ';
@@ -61,58 +66,76 @@
     }
 
     &--crop::after {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/crop/crop-rotate.svg',
-        $color-white
+        variables.$color-white
       );
     }
 
     &--pen::after {
-      @include color-svg('../images/icons/v2/draw-24.svg', $color-white);
+      @include mixins.color-svg(
+        '../images/icons/v2/draw-24.svg',
+        variables.$color-white
+      );
     }
 
     &--redo {
       &::after {
-        @include color-svg('../images/icons/v3/redo/redo.svg', $color-white);
+        @include mixins.color-svg(
+          '../images/icons/v3/redo/redo.svg',
+          variables.$color-white
+        );
       }
       &:disabled::after {
-        @include color-svg('../images/icons/v3/redo/redo.svg', $color-gray-45);
+        @include mixins.color-svg(
+          '../images/icons/v3/redo/redo.svg',
+          variables.$color-gray-45
+        );
       }
     }
 
     &--sticker.module-sticker-button__button::after {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/sticker/sticker-smiley.svg',
-        $color-white
+        variables.$color-white
       );
     }
 
     &--text::after {
-      @include color-svg('../images/icons/v2/text-24.svg', $color-white);
+      @include mixins.color-svg(
+        '../images/icons/v2/text-24.svg',
+        variables.$color-white
+      );
     }
 
     &--undo {
       &::after {
-        @include color-svg('../images/icons/v3/undo/undo.svg', $color-white);
+        @include mixins.color-svg(
+          '../images/icons/v3/undo/undo.svg',
+          variables.$color-white
+        );
       }
       &:disabled::after {
-        @include color-svg('../images/icons/v3/undo/undo.svg', $color-gray-45);
+        @include mixins.color-svg(
+          '../images/icons/v3/undo/undo.svg',
+          variables.$color-gray-45
+        );
       }
     }
 
     &--selected {
-      background-color: $color-white;
+      background-color: variables.$color-white;
 
       &::after {
-        background-color: $color-black;
+        background-color: variables.$color-black;
       }
     }
 
     &:hover {
-      background-color: $color-gray-80;
+      background-color: variables.$color-gray-80;
 
       &::after {
-        background-color: $color-white;
+        background-color: variables.$color-white;
       }
     }
   }
@@ -141,13 +164,15 @@
       height: 44px;
 
       &__add-caption-button {
-        @include button-reset;
-        @include rounded-corners;
-        background: $color-gray-90;
-        color: $color-gray-15;
-        padding-block: 8px;
-        padding-inline: 15px;
-        border: none;
+        @include mixins.button-reset;
+        & {
+          @include mixins.rounded-corners;
+          background: variables.$color-gray-90;
+          color: variables.$color-gray-15;
+          padding-block: 8px;
+          padding-inline: 15px;
+          border: none;
+        }
 
         & > span {
           display: -webkit-box;
@@ -181,7 +206,7 @@
 
   &__toolbar__crop {
     align-items: center;
-    color: $color-white;
+    color: variables.$color-white;
     display: flex;
     height: 36px;
     justify-content: center;
@@ -190,18 +215,20 @@
     margin-inline: 16px;
 
     &__button {
-      @include button-reset;
-      display: flex;
-      margin-block: 0;
-      margin-inline: 20px;
+      @include mixins.button-reset;
+      & {
+        display: flex;
+        margin-block: 0;
+        margin-inline: 20px;
+      }
     }
   }
 
   &__toolbar {
     align-items: center;
-    background-color: $color-gray-90;
+    background-color: variables.$color-gray-90;
     border-radius: 10px;
-    color: $color-white;
+    color: variables.$color-white;
     display: flex;
     height: 36px;
     justify-content: center;
@@ -217,22 +244,29 @@
 
     &__button {
       @mixin icon($icon) {
-        @include color-svg('../images/icons/#{$icon}', $color-white);
-        opacity: 1;
-        height: 20px;
-        width: 20px;
-        border-radius: 0;
+        @include mixins.color-svg(
+          '../images/icons/#{$icon}',
+          variables.$color-white
+        );
+        & {
+          opacity: 1;
+          height: 20px;
+          width: 20px;
+          border-radius: 0;
+        }
 
         &::after {
           display: none;
         }
       }
 
-      @include button-reset;
-      display: flex;
-      margin-block: 0;
-      margin-inline: 8px;
-      padding: 8px;
+      @include mixins.button-reset;
+      & {
+        display: flex;
+        margin-block: 0;
+        margin-inline: 8px;
+        padding: 8px;
+      }
 
       &--draw-pen__button {
         @include icon('v3/brush/brush-pen-compact.svg');
@@ -278,65 +312,65 @@
 
   &__icon {
     &--draw-pen {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/brush/brush-pen-compact.svg',
-        $color-white
+        variables.$color-white
       );
     }
 
     &--draw-highlighter {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/brush/brush-highlighter-compact.svg',
-        $color-white
+        variables.$color-white
       );
     }
 
     &--text-regular {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/text/text-square-compact.svg',
-        $color-white
+        variables.$color-white
       );
     }
 
     &--text-highlight {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/text/text-square-fill-compact.svg',
-        $color-white
+        variables.$color-white
       );
     }
 
     &--text-outline {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/text/text-outline-compact.svg',
-        $color-white
+        variables.$color-white
       );
     }
 
     &--width-thin {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/brush_size/brush_size-thin-compact.svg',
-        $color-white
+        variables.$color-white
       );
     }
 
     &--width-regular {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/brush_size/brush_size-regular-compact.svg',
-        $color-white
+        variables.$color-white
       );
     }
 
     &--width-medium {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/brush_size/brush_size-medium-compact.svg',
-        $color-white
+        variables.$color-white
       );
     }
 
     &--width-heavy {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/brush_size/brush_size-heavy-compact.svg',
-        $color-white
+        variables.$color-white
       );
     }
   }
@@ -348,40 +382,47 @@
   }
 
   &__close {
-    @include button-reset;
+    @include mixins.button-reset;
 
-    border-radius: 4px;
-    height: 20px;
-    position: absolute;
-    inset-inline-end: 24px;
-    top: 40px;
-    width: 20px;
+    & {
+      border-radius: 4px;
+      height: 20px;
+      position: absolute;
+      inset-inline-end: 24px;
+      top: 40px;
+      width: 20px;
+    }
 
     &::before {
       content: '';
       display: block;
       width: 100%;
       height: 100%;
-      @include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
+      @include mixins.color-svg(
+        '../images/icons/v3/x/x.svg',
+        variables.$color-gray-15
+      );
     }
 
     &:hover,
     &:focus {
-      box-shadow: 0 0 0 2px $color-ultramarine;
+      box-shadow: 0 0 0 2px variables.$color-ultramarine;
     }
   }
 
   &__crop-preset {
-    @include button-reset;
-    color: $color-white;
-    height: 28px;
-    margin-inline: 12px;
-    padding-block: 5px;
-    padding-inline: 12px;
+    @include mixins.button-reset;
+    & {
+      color: variables.$color-white;
+      height: 28px;
+      margin-inline: 12px;
+      padding-block: 5px;
+      padding-inline: 12px;
+    }
 
     &--selected {
-      @include rounded-corners;
-      background: $color-gray-80;
+      @include mixins.rounded-corners;
+      background: variables.$color-gray-80;
     }
   }
 }
diff --git a/stylesheets/components/MediaQualitySelector.scss b/stylesheets/components/MediaQualitySelector.scss
index 4596746bc2..4ea513583a 100644
--- a/stylesheets/components/MediaQualitySelector.scss
+++ b/stylesheets/components/MediaQualitySelector.scss
@@ -1,35 +1,44 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .MediaQualitySelector {
   &__popper {
-    @extend %module-composition-popper;
-    padding-block: 12px;
-    padding-inline: 16px;
-    width: auto;
+    @include mixins.module-composition-popper;
+    & {
+      padding-block: 12px;
+      padding-inline: 16px;
+      width: auto;
+    }
   }
 
   &__title {
-    @include font-body-1-bold;
+    @include mixins.font-body-1-bold;
     margin-bottom: 12px;
   }
 
   &__button {
-    @include button-reset();
-    align-items: center;
-    border-radius: 4px;
-    display: flex;
-    height: 32px;
-    justify-content: center;
-    width: 32px;
+    @include mixins.button-reset();
+    & {
+      align-items: center;
+      border-radius: 4px;
+      display: flex;
+      height: 32px;
+      justify-content: center;
+      width: 32px;
+    }
 
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       &:focus {
-        outline: 2px solid $color-ultramarine;
+        outline: 2px solid variables.$color-ultramarine;
       }
     }
 
-    outline: none;
+    & {
+      outline: none;
+    }
 
     &::after {
       content: '';
@@ -38,32 +47,32 @@
       height: 20px;
       width: 20px;
 
-      @include light-theme {
-        @include color-svg(
+      @include mixins.light-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/quality/quality-standard.svg',
-          $color-gray-75
+          variables.$color-gray-75
         );
       }
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/quality/quality-standard.svg',
-          $color-gray-15
+          variables.$color-gray-15
         );
       }
     }
 
     &--hq {
       &::after {
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/quality/quality-high.svg',
-            $color-gray-75
+            variables.$color-gray-75
           );
         }
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/quality/quality-high.svg',
-            $color-gray-15
+            variables.$color-gray-15
           );
         }
       }
@@ -72,26 +81,28 @@
     &--active {
       opacity: 1;
 
-      @include light-theme() {
-        background-color: $color-gray-05;
+      @include mixins.light-theme() {
+        background-color: variables.$color-gray-05;
       }
 
-      @include dark-theme() {
-        background-color: $color-gray-75;
+      @include mixins.dark-theme() {
+        background-color: variables.$color-gray-75;
       }
     }
   }
 
   &__option {
-    @include button-reset();
+    @include mixins.button-reset();
 
-    align-items: center;
-    border-radius: 6px;
-    display: flex;
-    height: 42px;
-    margin-block: 2px;
-    margin-inline: 0;
-    min-width: 200px;
+    & {
+      align-items: center;
+      border-radius: 6px;
+      display: flex;
+      height: 42px;
+      margin-block: 2px;
+      margin-inline: 0;
+      min-width: 200px;
+    }
 
     &--checkmark {
       height: 12px;
@@ -101,27 +112,27 @@
     }
 
     &--selected {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/check/check-compact.svg',
-        $color-ultramarine
+        variables.$color-ultramarine
       );
     }
 
     &--title {
-      @include font-body-2;
+      @include mixins.font-body-2;
     }
 
     &--description {
-      @include font-subtitle;
+      @include mixins.font-subtitle;
     }
 
     &:hover {
-      @include light-theme() {
-        background-color: $color-gray-05;
+      @include mixins.light-theme() {
+        background-color: variables.$color-gray-05;
       }
 
-      @include dark-theme() {
-        background-color: $color-gray-65;
+      @include mixins.dark-theme() {
+        background-color: variables.$color-gray-65;
       }
     }
 
@@ -129,7 +140,7 @@
     &:focus,
     &:active {
       border-radius: 6px;
-      box-shadow: 0 0 1px 1px $color-ultramarine;
+      box-shadow: 0 0 1px 1px variables.$color-ultramarine;
       outline: none;
     }
   }
diff --git a/stylesheets/components/MessageAudio.scss b/stylesheets/components/MessageAudio.scss
index 0cde8fd0c7..4f9d68b93d 100644
--- a/stylesheets/components/MessageAudio.scss
+++ b/stylesheets/components/MessageAudio.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 $audio-attachment-button-size: 36px;
 $audio-attachment-button-margin-big: 12px;
 $audio-attachment-button-margin-small: 4px;
@@ -32,22 +35,22 @@ $audio-attachment-button-margin-small: 4px;
 
 /* The separator between audio and text */
 .module-message__audio-attachment--with-content-below {
-  border-bottom: 1px solid $color-white-alpha-20;
+  border-bottom: 1px solid variables.$color-white-alpha-20;
   padding-bottom: 12px;
   margin-bottom: 7px;
 
   &.module-message__audio-attachment--incoming {
-    @include light-theme {
-      border-color: $color-black-alpha-20;
+    @include mixins.light-theme {
+      border-color: variables.$color-black-alpha-20;
     }
 
-    @include dark-theme {
-      border-color: $color-white-alpha-20;
+    @include mixins.dark-theme {
+      border-color: variables.$color-white-alpha-20;
     }
   }
 
   .module-message__container--outgoing & {
-    border-color: $color-white-alpha-20;
+    border-color: variables.$color-white-alpha-20;
   }
 }
 
@@ -78,17 +81,17 @@ $audio-attachment-button-margin-small: 4px;
 
   .module-message__audio-attachment--incoming & {
     &:before {
-      @include light-theme {
-        background: $color-gray-60;
+      @include mixins.light-theme {
+        background: variables.$color-gray-60;
       }
-      @include dark-theme {
-        background: $color-gray-25;
+      @include mixins.dark-theme {
+        background: variables.$color-gray-25;
       }
     }
   }
   .module-message__audio-attachment--outgoing & {
     &--unplayed:before {
-      background: $color-white-alpha-80;
+      background: variables.$color-white-alpha-80;
     }
   }
 }
@@ -107,15 +110,15 @@ $audio-attachment-button-margin-small: 4px;
 .PlaybackRateButton,
 .module-message__audio-attachment__waveform {
   &:focus {
-    @include keyboard-mode {
-      outline: 2px solid $color-ultramarine;
+    @include mixins.keyboard-mode {
+      outline: 2px solid variables.$color-ultramarine;
     }
   }
 
   .module-message__audio-attachment--outgoing & {
     &:focus {
-      @include keyboard-mode {
-        outline: 2px solid $color-white-alpha-60;
+      @include mixins.keyboard-mode {
+        outline: 2px solid variables.$color-white-alpha-60;
       }
     }
   }
@@ -134,7 +137,7 @@ $audio-attachment-button-margin-small: 4px;
 }
 
 .module-message__audio-attachment__countdown {
-  @include font-caption;
+  @include mixins.font-caption;
   width: $audio-attachment-button-size;
   user-select: none;
   text-align: center;
@@ -142,8 +145,8 @@ $audio-attachment-button-margin-small: 4px;
   margin-inline-end: 12px;
 
   .module-message__audio-attachment--incoming & {
-    @include light-theme {
-      $color: $color-black-alpha-60;
+    @include mixins.light-theme {
+      $color: variables.$color-black-alpha-60;
       color: $color;
 
       &--unplayed:after {
@@ -151,8 +154,8 @@ $audio-attachment-button-margin-small: 4px;
       }
     }
 
-    @include dark-theme {
-      $color: $color-white-alpha-80;
+    @include mixins.dark-theme {
+      $color: variables.$color-white-alpha-80;
       color: $color;
 
       &--unplayed:after {
@@ -162,10 +165,10 @@ $audio-attachment-button-margin-small: 4px;
   }
 
   .module-message__audio-attachment--outgoing & {
-    color: $color-white-alpha-80;
+    color: variables.$color-white-alpha-80;
 
     &--unplayed:after {
-      background: $color-white-alpha-80;
+      background: variables.$color-white-alpha-80;
     }
   }
 }
diff --git a/stylesheets/components/MessageBody.scss b/stylesheets/components/MessageBody.scss
index 6028b8a3d8..69f468a44e 100644
--- a/stylesheets/components/MessageBody.scss
+++ b/stylesheets/components/MessageBody.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .MessageBody {
   &__highlight {
     font-weight: bold;
@@ -8,12 +11,14 @@
 
   &__download-body,
   &__read-more {
-    @include button-reset;
-    font-weight: bold;
+    @include mixins.button-reset;
+    & {
+      font-weight: bold;
+    }
 
     &:focus {
-      @include keyboard-mode {
-        border: 1px solid $color-black;
+      @include mixins.keyboard-mode {
+        border: 1px solid variables.$color-black;
         outline: none;
       }
     }
@@ -30,31 +35,31 @@
     padding-inline: 4px;
     border: 1px solid transparent;
 
-    @include light-theme {
-      background-color: $color-gray-20;
+    @include mixins.light-theme {
+      background-color: variables.$color-gray-20;
     }
 
-    @include dark-theme {
-      background-color: $color-black-alpha-40;
+    @include mixins.dark-theme {
+      background-color: variables.$color-black-alpha-40;
     }
 
     &:focus {
-      border: 1px solid $color-black;
+      border: 1px solid variables.$color-black;
       outline: none;
     }
 
     &--incoming {
-      @include light-theme {
-        background-color: $color-gray-20;
+      @include mixins.light-theme {
+        background-color: variables.$color-gray-20;
       }
 
-      @include dark-theme {
-        background-color: $color-gray-60;
+      @include mixins.dark-theme {
+        background-color: variables.$color-gray-60;
       }
     }
 
     &--outgoing {
-      background-color: $color-black-alpha-40;
+      background-color: variables.$color-black-alpha-40;
     }
 
     &--invisible {
@@ -63,6 +68,6 @@
   }
 
   &__author {
-    @include font-body-2-medium;
+    @include mixins.font-body-2-medium;
   }
 }
diff --git a/stylesheets/components/MessageDetail.scss b/stylesheets/components/MessageDetail.scss
index 65f66dbb65..2b9f92a90f 100644
--- a/stylesheets/components/MessageDetail.scss
+++ b/stylesheets/components/MessageDetail.scss
@@ -1,6 +1,9 @@
 // Copyright 2018 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-message-detail {
   max-width: 650px;
   margin-inline: auto;
@@ -22,7 +25,7 @@
 }
 
 .module-message-detail__label {
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
 
   min-width: 72px;
 }
@@ -31,16 +34,16 @@
 }
 
 .module-message-detail__unix-timestamp {
-  @include light-theme {
-    color: $color-gray-05;
+  @include mixins.light-theme {
+    color: variables.$color-gray-05;
   }
-  @include dark-theme {
-    color: $color-gray-45;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-45;
   }
 }
 
 .module-message-detail__contact-group__header {
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -70,26 +73,26 @@
 
   &--Failed:after {
     width: 12px;
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/error/error-circle-compact.svg',
-        $color-accent-red
+        variables.$color-accent-red
       );
     }
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/error/error-circle-compact.svg',
-        $color-accent-red
+        variables.$color-accent-red
       );
     }
   }
 
   @mixin normal-icon($icon) {
-    @include light-theme {
-      @include color-svg($icon, $color-gray-60);
+    @include mixins.light-theme {
+      @include mixins.color-svg($icon, variables.$color-gray-60);
     }
-    @include dark-theme {
-      @include color-svg($icon, $color-gray-25);
+    @include mixins.dark-theme {
+      @include mixins.color-svg($icon, variables.$color-gray-25);
     }
   }
 
@@ -139,13 +142,13 @@
 }
 
 .module-message-detail__contact__text {
-  @include font-body-1;
+  @include mixins.font-body-1;
   flex-grow: 1;
   margin-inline-start: 10px;
 }
 
 .module-message-detail__contact__error {
-  color: $color-accent-red;
+  color: variables.$color-accent-red;
   font-weight: bold;
 }
 
@@ -156,16 +159,16 @@
   height: 18px;
   display: inline-block;
 
-  @include light-theme {
-    @include color-svg(
+  @include mixins.light-theme {
+    @include mixins.color-svg(
       '../images/icons/v2/unidentified-delivery-solid-20.svg',
-      $color-gray-60
+      variables.$color-gray-60
     );
   }
-  @include dark-theme {
-    @include color-svg(
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
       '../images/icons/v2/unidentified-delivery-solid-20.svg',
-      $color-gray-25
+      variables.$color-gray-25
     );
   }
 }
@@ -175,28 +178,31 @@
 }
 
 .module-message-detail__contact__show-safety-number {
-  @include button-reset;
-  padding: 4px;
-  border-radius: 4px;
-
-  color: $color-white;
-
-  @include light-theme {
-    background-color: $color-gray-45;
+  @include mixins.button-reset;
+  & {
+    padding: 4px;
+    border-radius: 4px;
+    color: variables.$color-white;
   }
-  @include dark-theme {
-    background-color: $color-gray-25;
+
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-45;
+  }
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-25;
   }
 }
 .module-message-detail__contact__send-anyway {
-  @include button-reset;
-  margin-inline-start: 5px;
-  margin-top: 5px;
-  padding: 4px;
-  border-radius: 4px;
+  @include mixins.button-reset;
+  & {
+    margin-inline-start: 5px;
+    margin-top: 5px;
+    padding: 4px;
+    border-radius: 4px;
 
-  color: $color-white;
-  background-color: $color-accent-red;
+    color: variables.$color-white;
+    background-color: variables.$color-accent-red;
+  }
 }
 
 .module-message-detail__status-timestamp {
diff --git a/stylesheets/components/MessageTextRenderer.scss b/stylesheets/components/MessageTextRenderer.scss
index 9d5db01fed..adb31ee3e7 100644
--- a/stylesheets/components/MessageTextRenderer.scss
+++ b/stylesheets/components/MessageTextRenderer.scss
@@ -1,6 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .MessageTextRenderer {
   &__formatting {
     // bold is handled by <strong> element
@@ -8,7 +11,7 @@
     // strikethrough is handled by <s> element
 
     &--monospace {
-      font-family: $monospace;
+      font-family: variables.$monospace;
     }
 
     // Note: only used in the left pane for search results, not in message bubbles
@@ -17,11 +20,11 @@
       // Boldness of this is handled by <strong> element
 
       // To differentiate it from bold formatting, we increase the color contrast
-      @include light-theme {
-        color: $color-black; // vs color-gray-60 normally
+      @include mixins.light-theme {
+        color: variables.$color-black; // vs color-gray-60 normally
       }
-      @include dark-theme {
-        color: $color-white; // vs color-gray-25 normally
+      @include mixins.dark-theme {
+        color: variables.$color-white; // vs color-gray-25 normally
       }
     }
 
@@ -42,9 +45,9 @@
       // fix outline
       outline: none;
 
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus {
-          box-shadow: 0 0 0px 1px $color-ultramarine;
+          box-shadow: 0 0 0px 1px variables.$color-ultramarine;
         }
       }
     }
@@ -57,46 +60,46 @@
 
     // The simplest; always in dark mode
     &--spoiler-StoryViewer {
-      background-color: $color-white;
+      background-color: variables.$color-white;
     }
     &--spoiler-MediaEditor {
-      background-color: $color-gray-15;
+      background-color: variables.$color-gray-15;
     }
 
     // The left pane
     &--spoiler-ConversationList,
     &--spoiler-SearchResult {
-      @include light-theme {
-        background-color: $color-gray-60;
+      @include mixins.light-theme {
+        background-color: variables.$color-gray-60;
       }
-      @include dark-theme {
-        background-color: $color-gray-25;
+      @include mixins.dark-theme {
+        background-color: variables.$color-gray-25;
       }
     }
 
     // The timeline
     &--spoiler-Quote {
-      @include light-theme {
-        background-color: $color-gray-90;
+      @include mixins.light-theme {
+        background-color: variables.$color-gray-90;
       }
-      @include dark-theme {
-        background-color: $color-gray-05;
+      @include mixins.dark-theme {
+        background-color: variables.$color-gray-05;
       }
     }
 
     &--spoiler-Timeline--incoming {
-      @include light-theme {
-        background-color: $color-gray-90;
+      @include mixins.light-theme {
+        background-color: variables.$color-gray-90;
       }
-      @include dark-theme {
-        background-color: $color-gray-05;
+      @include mixins.dark-theme {
+        background-color: variables.$color-gray-05;
       }
     }
     &--spoiler-Timeline--outgoing {
-      @include light-theme {
+      @include mixins.light-theme {
         background-color: rgba(255, 255, 255, 0.9);
       }
-      @include dark-theme {
+      @include mixins.dark-theme {
         background-color: rgba(255, 255, 255, 0.9);
       }
     }
diff --git a/stylesheets/components/MiniPlayer.scss b/stylesheets/components/MiniPlayer.scss
index 120d8568aa..788b61b31c 100644
--- a/stylesheets/components/MiniPlayer.scss
+++ b/stylesheets/components/MiniPlayer.scss
@@ -1,10 +1,15 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 @mixin audio-icon($name, $icon, $color) {
   &--#{$name}::before {
-    @include color-svg('../images/icons/#{$icon}.svg', $color, false);
-    -webkit-mask-size: 100%;
+    @include mixins.color-svg('../images/icons/#{$icon}.svg', $color, false);
+    & {
+      -webkit-mask-size: 100%;
+    }
   }
 }
 
@@ -18,7 +23,7 @@
   position: absolute;
   top: 0;
   inset-inline: 0;
-  z-index: calc($z-index-above-above-base + 1);
+  z-index: calc(variables.$z-index-above-above-base + 1);
   display: flex;
   align-items: center;
   gap: 18px;
@@ -27,11 +32,11 @@
   margin-top: calc(52px + var(--title-bar-drag-area-height));
   text-align: start;
 
-  @include light-theme {
-    background-color: $color-gray-02;
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-02;
   }
-  @include dark-theme {
-    background-color: $color-gray-75;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-75;
   }
 
   &--flow {
@@ -40,7 +45,7 @@
   }
 
   &__playback-button {
-    @include button-reset;
+    @include mixins.button-reset;
 
     &::before {
       display: block;
@@ -49,12 +54,12 @@
       content: '';
     }
 
-    @include light-theme {
-      @include all-audio-icons($color-gray-60);
+    @include mixins.light-theme {
+      @include all-audio-icons(variables.$color-gray-60);
     }
 
-    @include dark-theme {
-      @include all-audio-icons($color-gray-15);
+    @include mixins.dark-theme {
+      @include all-audio-icons(variables.$color-gray-15);
     }
 
     &--pending::before {
@@ -72,11 +77,13 @@
   }
 
   &__close-button {
-    @include button-reset;
+    @include mixins.button-reset;
 
-    border-radius: 4px;
-    height: 16px;
-    width: 16px;
+    & {
+      border-radius: 4px;
+      height: 16px;
+      width: 16px;
+    }
 
     &::before {
       content: '';
@@ -84,31 +91,37 @@
       width: 100%;
       height: 100%;
 
-      @include light-theme {
-        @include color-svg('../images/icons/v3/x/x.svg', $color-gray-75);
+      @include mixins.light-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/x/x.svg',
+          variables.$color-gray-75
+        );
       }
 
-      @include dark-theme {
-        @include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/x/x.svg',
+          variables.$color-gray-15
+        );
       }
     }
 
-    @include light-theme {
+    @include mixins.light-theme {
       &:hover,
       &:focus {
-        background: $color-gray-02;
+        background: variables.$color-gray-02;
       }
       &:active {
-        background: $color-gray-05;
+        background: variables.$color-gray-05;
       }
     }
-    @include dark-theme {
+    @include mixins.dark-theme {
       &:hover,
       &:focus {
-        background: $color-gray-80;
+        background: variables.$color-gray-80;
       }
       &:active {
-        background: $color-gray-75;
+        background: variables.$color-gray-75;
       }
     }
   }
diff --git a/stylesheets/components/Modal.scss b/stylesheets/components/Modal.scss
index e97e05425e..fdf19c0c29 100644
--- a/stylesheets/components/Modal.scss
+++ b/stylesheets/components/Modal.scss
@@ -1,23 +1,28 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-Modal {
-  @include popper-shadow();
-  border-radius: 8px;
-  overflow: hidden;
-  // We need this to be a number not divisible by 5 so that if we have sticky
-  // buttons the bottom doesn't bleed through by 1px.
-  max-height: 89vh;
-  display: flex;
-  flex-direction: column;
-  @include light-theme() {
-    background: $color-white;
-    color: $color-gray-90;
+  @include mixins.popper-shadow();
+  & {
+    border-radius: 8px;
+    overflow: hidden;
+    // We need this to be a number not divisible by 5 so that if we have sticky
+    // buttons the bottom doesn't bleed through by 1px.
+    max-height: 89vh;
+    display: flex;
+    flex-direction: column;
+  }
+  @include mixins.light-theme() {
+    background: variables.$color-white;
+    color: variables.$color-gray-90;
   }
 
-  @include dark-theme() {
-    background: $color-gray-80;
-    color: $color-gray-05;
+  @include mixins.dark-theme() {
+    background: variables.$color-gray-80;
+    color: variables.$color-gray-05;
   }
 
   &__header {
@@ -35,18 +40,20 @@
   }
 
   &__title {
-    @include font-body-1-bold;
+    @include mixins.font-body-1-bold;
     margin: 0;
     padding: 0;
     flex: 1;
   }
 
   &__back-button {
-    @include button-reset;
+    @include mixins.button-reset;
 
-    border-radius: 4px;
-    height: 20px;
-    width: 20px;
+    & {
+      border-radius: 4px;
+      height: 20px;
+      width: 20px;
+    }
 
     &::before {
       content: '';
@@ -54,33 +61,35 @@
       width: 100%;
       height: 100%;
 
-      @include light-theme {
-        @include color-svg(
+      @include mixins.light-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/chevron/chevron-left.svg',
-          $color-gray-75
+          variables.$color-gray-75
         );
       }
 
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/chevron/chevron-left.svg',
-          $color-gray-15
+          variables.$color-gray-15
         );
       }
     }
 
     &:hover,
     &:focus {
-      box-shadow: 0 0 0 2px $color-ultramarine;
+      box-shadow: 0 0 0 2px variables.$color-ultramarine;
     }
   }
 
   &__close-button {
-    @include button-reset;
+    @include mixins.button-reset;
 
-    border-radius: 4px;
-    height: 20px;
-    width: 20px;
+    & {
+      border-radius: 4px;
+      height: 20px;
+      width: 20px;
+    }
 
     &::before {
       content: '';
@@ -88,24 +97,30 @@
       width: 100%;
       height: 100%;
 
-      @include light-theme {
-        @include color-svg('../images/icons/v3/x/x.svg', $color-gray-75);
+      @include mixins.light-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/x/x.svg',
+          variables.$color-gray-75
+        );
       }
 
-      @include dark-theme {
-        @include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/x/x.svg',
+          variables.$color-gray-15
+        );
       }
     }
 
     &:hover,
     &:focus {
-      box-shadow: 0 0 0 2px $color-ultramarine;
+      box-shadow: 0 0 0 2px variables.$color-ultramarine;
     }
   }
 
   &__body {
-    @include scrollbar;
-    @include font-body-1;
+    @include mixins.scrollbar;
+    @include mixins.font-body-1;
     margin: 0;
     overflow-y: overlay;
     overflow-x: auto;
@@ -126,11 +141,11 @@
 
   &--has-header#{&}--header-divider {
     .module-Modal__body {
-      @include light-theme() {
-        border-top-color: $color-gray-05;
+      @include mixins.light-theme() {
+        border-top-color: variables.$color-gray-05;
       }
-      @include dark-theme() {
-        border-top-color: $color-gray-90;
+      @include mixins.dark-theme() {
+        border-top-color: variables.$color-gray-90;
       }
     }
   }
@@ -142,12 +157,12 @@
       border-bottom: 1px solid transparent;
 
       &--scrolled {
-        @include light-theme {
-          border-top-color: $color-gray-05;
+        @include mixins.light-theme {
+          border-top-color: variables.$color-gray-05;
         }
 
-        @include dark-theme {
-          border-top-color: $color-gray-90;
+        @include mixins.dark-theme {
+          border-top-color: variables.$color-gray-90;
         }
       }
     }
@@ -155,11 +170,11 @@
 
   &--has-footer#{&}--footer-divider {
     .module-Modal__body {
-      @include light-theme() {
-        border-bottom-color: $color-gray-05;
+      @include mixins.light-theme() {
+        border-bottom-color: variables.$color-gray-05;
       }
-      @include dark-theme() {
-        border-bottom-color: $color-gray-90;
+      @include mixins.dark-theme() {
+        border-bottom-color: variables.$color-gray-90;
       }
     }
   }
@@ -169,12 +184,12 @@
       border-bottom: 1px solid transparent;
 
       &--overflow:not(&--scrolledToBottom) {
-        @include light-theme {
-          border-bottom-color: $color-gray-05;
+        @include mixins.light-theme {
+          border-bottom-color: variables.$color-gray-05;
         }
 
-        @include dark-theme {
-          border-bottom-color: $color-gray-90;
+        @include mixins.dark-theme {
+          border-bottom-color: variables.$color-gray-90;
         }
       }
     }
@@ -221,7 +236,7 @@
     }
 
     .module-Modal__title {
-      @include font-title-2;
+      @include mixins.font-title-2;
       text-align: center;
       margin-block: 10px 22px;
       margin-inline: 0;
diff --git a/stylesheets/components/MyStories.scss b/stylesheets/components/MyStories.scss
index 4f50c6cbd7..931c2e3c2a 100644
--- a/stylesheets/components/MyStories.scss
+++ b/stylesheets/components/MyStories.scss
@@ -1,17 +1,20 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .MyStories {
   &__distribution {
     &__title {
-      @include font-body-1-bold;
+      @include mixins.font-body-1-bold;
       margin-block: 24px 8px;
       margin-inline: 10px;
-      @include light-theme() {
-        color: $color-gray-90;
+      @include mixins.light-theme() {
+        color: variables.$color-gray-90;
       }
-      @include dark-theme() {
-        color: $color-gray-05;
+      @include mixins.dark-theme() {
+        color: variables.$color-gray-05;
       }
     }
   }
@@ -28,35 +31,35 @@
     padding-inline-end: 10px;
 
     &:hover {
-      @include light-theme {
-        background: $color-gray-15;
+      @include mixins.light-theme {
+        background: variables.$color-gray-15;
       }
-      @include dark-theme {
-        background: $color-gray-65;
+      @include mixins.dark-theme {
+        background: variables.$color-gray-65;
       }
 
       & .MyStories__story__download,
       .MyStories__story__more__button {
-        @include light-theme() {
-          background: $color-gray-20;
+        @include mixins.light-theme() {
+          background: variables.$color-gray-20;
         }
-        @include dark-theme() {
-          background: $color-gray-60;
+        @include mixins.dark-theme() {
+          background: variables.$color-gray-60;
         }
       }
     }
 
     &__details {
-      @include font-body-1-bold;
+      @include mixins.font-body-1-bold;
       display: flex;
       flex-direction: column;
       flex: 1;
       margin-inline-start: 12px;
-      @include light-theme() {
-        color: $color-gray-90;
+      @include mixins.light-theme() {
+        color: variables.$color-gray-90;
       }
-      @include dark-theme() {
-        color: $color-gray-05;
+      @include mixins.dark-theme() {
+        color: variables.$color-gray-05;
       }
 
       &__failed {
@@ -69,20 +72,22 @@
           height: 12px;
           margin-inline-end: 12px;
           width: 12px;
-          @include color-svg(
+          @include mixins.color-svg(
             '../images/icons/v3/error/error-circle.svg',
-            $color-accent-red
+            variables.$color-accent-red
           );
         }
 
         &__button {
-          @include button-reset;
-          @include font-subtitle;
-          @include light-theme {
-            color: $color-gray-90;
+          @include mixins.button-reset;
+          & {
+            @include mixins.font-subtitle;
           }
-          @include dark-theme {
-            color: $color-gray-25;
+          @include mixins.light-theme {
+            color: variables.$color-gray-90;
+          }
+          @include mixins.dark-theme {
+            color: variables.$color-gray-25;
           }
         }
       }
@@ -90,53 +95,55 @@
 
     &__timestamp {
       font-weight: normal;
-      @include light-theme {
-        color: $color-gray-90;
+      @include mixins.light-theme {
+        color: variables.$color-gray-90;
       }
-      @include dark-theme {
-        color: $color-gray-25;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-25;
       }
     }
 
     &__download {
-      @include button-reset;
-      align-items: center;
-      border-radius: 100%;
-      display: flex;
-      height: 28px;
-      justify-content: center;
-      width: 28px;
-      @include light-theme {
-        background: $color-gray-20;
+      @include mixins.button-reset;
+      & {
+        align-items: center;
+        border-radius: 100%;
+        display: flex;
+        height: 28px;
+        justify-content: center;
+        width: 28px;
       }
-      @include dark-theme {
-        background: $color-gray-65;
+      @include mixins.light-theme {
+        background: variables.$color-gray-20;
+      }
+      @include mixins.dark-theme {
+        background: variables.$color-gray-65;
       }
 
       &::after {
         content: '';
         height: 18px;
         width: 18px;
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/save/save-compact.svg',
-            $color-black
+            variables.$color-black
           );
         }
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/save/save-compact.svg',
-            $color-gray-15
+            variables.$color-gray-15
           );
         }
       }
 
       &:hover {
-        @include light-theme() {
-          background: $color-white !important;
+        @include mixins.light-theme() {
+          background: variables.$color-white !important;
         }
-        @include dark-theme() {
-          background: $color-gray-75 !important;
+        @include mixins.dark-theme() {
+          background: variables.$color-gray-75 !important;
         }
       }
     }
@@ -149,37 +156,37 @@
       justify-content: center;
       margin-inline-start: 16px;
       width: 28px;
-      @include light-theme {
-        background: $color-gray-15;
+      @include mixins.light-theme {
+        background: variables.$color-gray-15;
       }
-      @include dark-theme {
-        background: $color-gray-65;
+      @include mixins.dark-theme {
+        background: variables.$color-gray-65;
       }
 
       &::after {
         content: '';
         height: 18px;
         width: 18px;
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/more/more-compact.svg',
-            $color-black
+            variables.$color-black
           );
         }
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/more/more-compact.svg',
-            $color-gray-15
+            variables.$color-gray-15
           );
         }
       }
 
       &:hover {
-        @include light-theme() {
-          background: $color-white !important;
+        @include mixins.light-theme() {
+          background: variables.$color-white !important;
         }
-        @include dark-theme() {
-          background: $color-gray-75 !important;
+        @include mixins.dark-theme() {
+          background: variables.$color-gray-75 !important;
         }
       }
     }
@@ -187,31 +194,31 @@
 
   &__icon {
     &--forward {
-      @include light-theme() {
-        @include color-svg(
+      @include mixins.light-theme() {
+        @include mixins.color-svg(
           '../images/icons/v3/forward/forward-compact.svg',
-          $color-black
+          variables.$color-black
         );
       }
-      @include dark-theme() {
-        @include color-svg(
+      @include mixins.dark-theme() {
+        @include mixins.color-svg(
           '../images/icons/v3/forward/forward-compact.svg',
-          $color-white
+          variables.$color-white
         );
       }
     }
 
     &--delete {
-      @include light-theme() {
-        @include color-svg(
+      @include mixins.light-theme() {
+        @include mixins.color-svg(
           '../images/icons/v3/trash/trash-compact.svg',
-          $color-black
+          variables.$color-black
         );
       }
-      @include dark-theme() {
-        @include color-svg(
+      @include mixins.dark-theme() {
+        @include mixins.color-svg(
           '../images/icons/v3/trash/trash-compact.svg',
-          $color-white
+          variables.$color-white
         );
       }
     }
@@ -222,34 +229,36 @@
   }
 
   &__avatar__add-story {
-    @include button-reset;
-    @include rounded-corners;
-    align-items: center;
-    background: $color-ultramarine-dawn;
-    border: 2px solid;
-    bottom: -2px;
-    display: flex;
-    height: 20px;
-    justify-content: center;
-    position: absolute;
-    inset-inline-end: -4px;
-    width: 20px;
-    z-index: $z-index-base;
-
-    @include light-theme {
-      border-color: $color-gray-04;
+    @include mixins.button-reset;
+    & {
+      @include mixins.rounded-corners;
+      align-items: center;
+      background: variables.$color-ultramarine-dawn;
+      border: 2px solid;
+      bottom: -2px;
+      display: flex;
+      height: 20px;
+      justify-content: center;
+      position: absolute;
+      inset-inline-end: -4px;
+      width: 20px;
+      z-index: variables.$z-index-base;
     }
-    @include dark-theme {
-      border-color: $color-gray-80;
+
+    @include mixins.light-theme {
+      border-color: variables.$color-gray-04;
+    }
+    @include mixins.dark-theme {
+      border-color: variables.$color-gray-80;
     }
 
     &::after {
       content: '';
       height: 12px;
       width: 12px;
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/plus/plus-compact-bold.svg',
-        $color-white
+        variables.$color-white
       );
     }
   }
@@ -258,11 +267,11 @@
 .StoryListItem__button:hover,
 .StoryListItem__button--active {
   .MyStories__avatar__add-story {
-    @include light-theme {
-      border-color: $color-gray-15;
+    @include mixins.light-theme {
+      border-color: variables.$color-gray-15;
     }
-    @include dark-theme {
-      border-color: $color-gray-65;
+    @include mixins.dark-theme {
+      border-color: variables.$color-gray-65;
     }
   }
 }
diff --git a/stylesheets/components/NavSidebar.scss b/stylesheets/components/NavSidebar.scss
index 494eb1aecf..e6e7f073ae 100644
--- a/stylesheets/components/NavSidebar.scss
+++ b/stylesheets/components/NavSidebar.scss
@@ -1,6 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .NavSidebar {
   position: relative;
   // Note: Intentionally no z-index here so drag handle is above other content
@@ -10,13 +13,13 @@
   flex-shrink: 0;
   padding-top: var(--title-bar-drag-area-height);
   user-select: none;
-  @include light-theme {
-    background-color: $color-gray-04;
-    border-inline-end: 1px solid $color-black-alpha-16;
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-04;
+    border-inline-end: 1px solid variables.$color-black-alpha-16;
   }
-  @include dark-theme {
-    background-color: $color-gray-80;
-    border-inline-end: 1px solid $color-white-alpha-16;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-80;
+    border-inline-end: 1px solid variables.$color-white-alpha-16;
   }
 }
 
@@ -25,10 +28,10 @@
   align-items: start;
   flex-shrink: 0;
   padding-bottom: 6px;
-  @include draggable-region;
+  @include mixins.draggable-region;
 
   .NavTabs__Toggle {
-    width: $NavTabs__width;
+    width: variables.$NavTabs__width;
   }
 
   .NavSidebar--narrow & {
@@ -44,7 +47,8 @@
   align-items: center;
   justify-content: center;
   padding-block: calc(
-    $NavTabs__Item__blockPadding + $NavTabs__ItemButton__blockPadding
+    variables.$NavTabs__Item__blockPadding +
+      variables.$NavTabs__ItemButton__blockPadding
   );
   padding-inline: 24px;
 
@@ -66,38 +70,40 @@
 .NavSidebar__HeaderTitle {
   flex: 1 1 0%;
   margin: 0;
-  @include font-title-medium;
+  @include mixins.font-title-medium;
   line-height: 20px;
 
   .NavSidebar--narrow & {
-    @include sr-only;
+    @include mixins.sr-only;
   }
 }
 
 .NavSidebar__HeaderTitle--withBackButton {
   text-align: center;
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
 }
 
 .NavSidebar__BackButton {
-  @include button-reset();
-  margin-block: -4px;
-  padding: 4px;
-  border-radius: 4px;
+  @include mixins.button-reset();
+  & {
+    margin-block: -4px;
+    padding: 4px;
+    border-radius: 4px;
+  }
 
   &:hover {
-    @include light-theme {
-      background: $color-gray-20;
+    @include mixins.light-theme {
+      background: variables.$color-gray-20;
     }
-    @include dark-theme {
-      background: $color-gray-62;
+    @include mixins.dark-theme {
+      background: variables.$color-gray-62;
     }
   }
 
   &:focus {
     outline: none;
-    @include keyboard-mode {
-      box-shadow: 0 0 0 2px $color-ultramarine;
+    @include mixins.keyboard-mode {
+      box-shadow: 0 0 0 2px variables.$color-ultramarine;
     }
   }
 
@@ -106,23 +112,23 @@
     display: block;
     width: 20px;
     height: 20px;
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/chevron/chevron-left.svg',
-        $color-black
+        variables.$color-black
       );
     }
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/chevron/chevron-left.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
   }
 }
 
 .NavSidebar__BackButtonLabel {
-  @include sr-only;
+  @include mixins.sr-only;
 }
 
 .NavSidebar .module-SearchInput__container {
@@ -139,7 +145,7 @@
 
 .NavSidebar__DragHandle {
   position: absolute;
-  z-index: $z-index-above-above-base;
+  z-index: variables.$z-index-above-above-base;
   top: 0;
   bottom: 0;
   inset-inline-start: 100%;
@@ -149,18 +155,18 @@
 
   &:focus {
     outline: none;
-    @include keyboard-mode {
-      box-shadow: inset 0 0 0 2px $color-ultramarine;
+    @include mixins.keyboard-mode {
+      box-shadow: inset 0 0 0 2px variables.$color-ultramarine;
     }
   }
 }
 
 .NavSidebar__DragHandle--dragging {
-  @include light-theme {
-    background-color: $color-black-alpha-12;
+  @include mixins.light-theme {
+    background-color: variables.$color-black-alpha-12;
   }
-  @include dark-theme {
-    background-color: $color-white-alpha-12;
+  @include mixins.dark-theme {
+    background-color: variables.$color-white-alpha-12;
   }
 }
 
@@ -181,39 +187,41 @@
 }
 
 .NavSidebar__ActionButton {
-  @include button-reset();
-  padding: 4px;
-  border-radius: 4px;
+  @include mixins.button-reset();
+  & {
+    padding: 4px;
+    border-radius: 4px;
+  }
 
   &:hover,
   &:focus {
-    @include light-theme {
-      background-color: $color-black-alpha-06;
+    @include mixins.light-theme {
+      background-color: variables.$color-black-alpha-06;
     }
-    @include dark-theme {
-      background-color: $color-white-alpha-06;
+    @include mixins.dark-theme {
+      background-color: variables.$color-white-alpha-06;
     }
   }
 
   &:active {
-    @include light-theme {
-      background: $color-gray-20;
+    @include mixins.light-theme {
+      background: variables.$color-gray-20;
     }
-    @include dark-theme {
-      background: $color-gray-62;
+    @include mixins.dark-theme {
+      background: variables.$color-gray-62;
     }
   }
 
   &:focus {
     outline: none;
-    @include keyboard-mode {
-      box-shadow: 0 0 0 2px $color-ultramarine;
+    @include mixins.keyboard-mode {
+      box-shadow: 0 0 0 2px variables.$color-ultramarine;
     }
   }
 }
 
 .NavSidebar__ActionButtonLabel {
-  @include sr-only;
+  @include mixins.sr-only;
 }
 
 .NavSidebarSearchHeader {
@@ -251,12 +259,12 @@
 .NavSidebarEmpty__title {
   margin-block: 0px 6px;
 
-  @include font-title-medium;
-  color: $color-gray-45;
+  @include mixins.font-title-medium;
+  color: variables.$color-gray-45;
 }
 
 .NavSidebarEmpty__subtitle {
   margin-block: 0;
 
-  color: $color-gray-45;
+  color: variables.$color-gray-45;
 }
diff --git a/stylesheets/components/NavTabs.scss b/stylesheets/components/NavTabs.scss
index 6012243d48..56d848a723 100644
--- a/stylesheets/components/NavTabs.scss
+++ b/stylesheets/components/NavTabs.scss
@@ -1,6 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 $NavTabs__ToggleButton__blockPadding: 4px;
 $NavTabs__ItemIcon__size: 20px;
 $NavTabs__ProfileAvatar__size: 28px;
@@ -19,16 +22,16 @@ $NavTabs__ProfileAvatar__size: 28px;
   flex-shrink: 0;
   flex-direction: column;
   align-items: center;
-  width: $NavTabs__width;
+  width: variables.$NavTabs__width;
   height: 100%;
   padding-top: var(--title-bar-drag-area-height);
-  @include light-theme {
-    background-color: $color-gray-04;
-    border-inline-end: 1px solid $color-black-alpha-16;
+  @include mixins.light-theme {
+    background-color: variables.$color-gray-04;
+    border-inline-end: 1px solid variables.$color-black-alpha-16;
   }
-  @include dark-theme {
-    background-color: $color-gray-80;
-    border-inline-end: 1px solid $color-white-alpha-16;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-80;
+    border-inline-end: 1px solid variables.$color-white-alpha-16;
   }
 }
 
@@ -39,7 +42,7 @@ $NavTabs__ProfileAvatar__size: 28px;
 // Wraps .NavTabs__ItemButton to make the hitbox larger
 .NavTabs__Item {
   width: 100%;
-  padding-block: $NavTabs__Item__blockPadding;
+  padding-block: variables.$NavTabs__Item__blockPadding;
   padding-inline: 10px;
   border: none;
   background: transparent;
@@ -50,7 +53,8 @@ $NavTabs__ProfileAvatar__size: 28px;
   }
   &.NavTabs__Toggle {
     padding-block: calc(
-      $NavTabs__Item__blockPadding + $NavTabs__ItemButton__blockPadding -
+      variables.$NavTabs__Item__blockPadding +
+        variables.$NavTabs__ItemButton__blockPadding -
         $NavTabs__ToggleButton__blockPadding
     );
   }
@@ -61,30 +65,30 @@ $NavTabs__ProfileAvatar__size: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-block: $NavTabs__ItemButton__blockPadding;
+  padding-block: variables.$NavTabs__ItemButton__blockPadding;
   border-radius: 8px;
   .NavTabs__Item:hover &,
   .NavTabs__Item:focus & {
-    @include light-theme {
-      background-color: $color-black-alpha-06;
+    @include mixins.light-theme {
+      background-color: variables.$color-black-alpha-06;
     }
-    @include dark-theme {
-      background-color: $color-white-alpha-06;
+    @include mixins.dark-theme {
+      background-color: variables.$color-white-alpha-06;
     }
   }
   .NavTabs__Item:focus & {
     outline: none;
-    @include keyboard-mode {
-      box-shadow: 0 0 0 2px $color-ultramarine;
+    @include mixins.keyboard-mode {
+      box-shadow: 0 0 0 2px variables.$color-ultramarine;
     }
   }
   .NavTabs__Item:active &,
   .NavTabs__Item[aria-selected='true'] & {
-    @include light-theme {
-      background: $color-gray-20;
+    @include mixins.light-theme {
+      background: variables.$color-gray-20;
     }
-    @include dark-theme {
-      background: $color-gray-62;
+    @include mixins.dark-theme {
+      background: variables.$color-gray-62;
     }
   }
 
@@ -98,7 +102,7 @@ $NavTabs__ProfileAvatar__size: 28px;
   .NavTabs__Item--Profile & {
     // Normalize for the size difference of the avatar vs sidebar icons
     padding-block: calc(
-      $NavTabs__ItemButton__blockPadding -
+      variables.$NavTabs__ItemButton__blockPadding -
         (($NavTabs__ProfileAvatar__size - $NavTabs__ItemIcon__size) / 2)
     );
   }
@@ -110,14 +114,14 @@ $NavTabs__ProfileAvatar__size: 28px;
 }
 
 .NavTabs__ItemLabel {
-  @include sr-only;
+  @include mixins.sr-only;
 }
 
 .NavTabs__ItemUnreadBadge {
-  @include rounded-corners;
+  @include mixins.rounded-corners;
   align-items: center;
-  background-color: $color-accent-red;
-  color: $color-white;
+  background-color: variables.$color-accent-red;
+  color: variables.$color-white;
   display: flex;
   font-size: 10px;
   height: 16px;
@@ -130,14 +134,14 @@ $NavTabs__ProfileAvatar__size: 28px;
   inset-inline-end: -6px;
   top: -4px;
   user-select: none;
-  z-index: $z-index-base;
+  z-index: variables.$z-index-base;
   word-break: keep-all;
 }
 
 .NavTabs__ItemUpdateBadge {
-  background: $color-ultramarine;
+  background: variables.$color-ultramarine;
   border-radius: 100%;
-  border: 1px solid $color-white;
+  border: 1px solid variables.$color-white;
   height: 8px;
   width: 8px;
   position: absolute;
@@ -152,11 +156,11 @@ $NavTabs__ProfileAvatar__size: 28px;
 }
 
 @mixin NavTabs__Icon($icon) {
-  @include light-theme {
-    @include color-svg($icon, $color-black);
+  @include mixins.light-theme {
+    @include mixins.color-svg($icon, variables.$color-black);
   }
-  @include dark-theme {
-    @include color-svg($icon, $color-gray-15);
+  @include mixins.dark-theme {
+    @include mixins.color-svg($icon, variables.$color-gray-15);
   }
 }
 
@@ -193,7 +197,7 @@ $NavTabs__ProfileAvatar__size: 28px;
 }
 
 .NavTabs__ItemIconLabel {
-  @include sr-only;
+  @include mixins.sr-only;
 }
 
 .NavTabs__TabList {
@@ -220,25 +224,31 @@ $NavTabs__ProfileAvatar__size: 28px;
 }
 
 .NavTabs__ContextMenuIcon--Settings {
-  @include dark-theme {
-    @include color-svg(
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/settings/settings.svg',
-      $color-white
+      variables.$color-white
     );
   }
-  @include light-theme {
-    @include color-svg(
+  @include mixins.light-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/settings/settings.svg',
-      $color-black
+      variables.$color-black
     );
   }
 }
 
 .NavTabs__ContextMenuIcon--Update {
-  @include dark-theme {
-    @include color-svg('../images/icons/v3/refresh/refresh.svg', $color-white);
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/refresh/refresh.svg',
+      variables.$color-white
+    );
   }
-  @include light-theme {
-    @include color-svg('../images/icons/v3/refresh/refresh.svg', $color-black);
+  @include mixins.light-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/refresh/refresh.svg',
+      variables.$color-black
+    );
   }
 }
diff --git a/stylesheets/components/OutgoingGiftBadgeModal.scss b/stylesheets/components/OutgoingGiftBadgeModal.scss
index ff86e36701..0a55d1564e 100644
--- a/stylesheets/components/OutgoingGiftBadgeModal.scss
+++ b/stylesheets/components/OutgoingGiftBadgeModal.scss
@@ -1,6 +1,9 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .OutgoingGiftBadgeModal {
   text-align: center;
 
@@ -10,11 +13,11 @@
   }
 
   &__title {
-    @include font-title-2;
+    @include mixins.font-title-2;
     margin-top: 5px;
   }
   &__description {
-    @include font-body-1;
+    @include mixins.font-body-1;
     margin-top: 8px;
     margin-inline: auto;
     width: 328px;
@@ -28,17 +31,17 @@
       border-radius: 50%;
       margin-inline: auto;
 
-      @include light-theme {
-        background-color: $color-gray-05;
+      @include mixins.light-theme {
+        background-color: variables.$color-gray-05;
       }
-      @include dark-theme {
-        background-color: $color-gray-60;
+      @include mixins.dark-theme {
+        background-color: variables.$color-gray-60;
       }
     }
   }
   &__badge-summary {
     margin-top: 16px;
     margin-bottom: 16px;
-    @include font-body-1-bold;
+    @include mixins.font-body-1-bold;
   }
 }
diff --git a/stylesheets/components/PermissionsPopup.scss b/stylesheets/components/PermissionsPopup.scss
index c261a92315..23aca11c56 100644
--- a/stylesheets/components/PermissionsPopup.scss
+++ b/stylesheets/components/PermissionsPopup.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .PermissionsPopup {
   align-items: center;
   display: flex;
@@ -8,18 +11,18 @@
   justify-content: center;
   padding: 16px;
 
-  @include light-theme() {
-    background: $color-white;
-    color: $color-gray-90;
+  @include mixins.light-theme() {
+    background: variables.$color-white;
+    color: variables.$color-gray-90;
   }
 
-  @include dark-theme() {
-    background: $color-gray-95;
-    color: $color-gray-05;
+  @include mixins.dark-theme() {
+    background: variables.$color-gray-95;
+    color: variables.$color-gray-05;
   }
 
   &__body {
-    @include font-body-1;
+    @include mixins.font-body-1;
   }
 
   &__buttons {
diff --git a/stylesheets/components/PlaybackButton.scss b/stylesheets/components/PlaybackButton.scss
index a39aaae243..10b07f0393 100644
--- a/stylesheets/components/PlaybackButton.scss
+++ b/stylesheets/components/PlaybackButton.scss
@@ -1,14 +1,20 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+@use 'MessageAudio';
+
 .PlaybackButton {
-  @include button-reset;
+  @include mixins.button-reset;
 
-  flex-shrink: 0;
-  margin-inline-end: $audio-attachment-button-margin-big;
+  & {
+    flex-shrink: 0;
+    margin-inline-end: MessageAudio.$audio-attachment-button-margin-big;
 
-  outline: none;
-  border-radius: 18px;
+    outline: none;
+    border-radius: 18px;
+  }
 
   &::before {
     display: block;
@@ -18,7 +24,7 @@
 
   @mixin audio-icon($name, $icon, $color) {
     &.PlaybackButton--#{$name}::before {
-      @include color-svg('../images/icons/#{$icon}.svg', $color, false);
+      @include mixins.color-svg('../images/icons/#{$icon}.svg', $color, false);
     }
   }
 
@@ -30,8 +36,8 @@
   }
 
   &--variant-message {
-    width: $audio-attachment-button-size;
-    height: $audio-attachment-button-size;
+    width: MessageAudio.$audio-attachment-button-size;
+    height: MessageAudio.$audio-attachment-button-size;
   }
 
   &--variant-mini {
@@ -57,28 +63,28 @@
     animation: rotate 1000ms linear infinite;
   }
 
-  @include light-theme {
+  @include mixins.light-theme {
     &--context-incoming {
       &.PlaybackButton--variant-message {
-        background: $color-white;
+        background: variables.$color-white;
       }
     }
-    @include all-audio-icons($color-gray-60);
+    @include all-audio-icons(variables.$color-gray-60);
   }
 
-  @include dark-theme {
+  @include mixins.dark-theme {
     &--context-incoming {
       &.PlaybackButton--variant-message {
-        background: $color-gray-60;
+        background: variables.$color-gray-60;
       }
     }
-    @include all-audio-icons($color-gray-15);
+    @include all-audio-icons(variables.$color-gray-15);
   }
 
   &--context-outgoing {
     &.PlaybackButton--variant-message {
-      background: $color-white-alpha-20;
+      background: variables.$color-white-alpha-20;
     }
-    @include all-audio-icons($color-white);
+    @include all-audio-icons(variables.$color-white);
   }
 }
diff --git a/stylesheets/components/PlaybackRateButton.scss b/stylesheets/components/PlaybackRateButton.scss
index 75d63eb6d8..bc11d94127 100644
--- a/stylesheets/components/PlaybackRateButton.scss
+++ b/stylesheets/components/PlaybackRateButton.scss
@@ -1,47 +1,52 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .PlaybackRateButton {
-  @include button-reset;
+  @include mixins.button-reset;
 
-  @include font-body-2-bold;
+  & {
+    @include mixins.font-body-2-bold;
 
-  width: 38px;
-  height: 18px;
-  text-align: center;
-  font-weight: 700;
-  border-radius: 4px;
-  font-size: 11px;
-  padding-block: 1px;
-  padding-inline: 2px;
-  margin-block: -2px;
-  margin-inline: 0;
-  line-height: 16px;
-  letter-spacing: 0.05px;
-  user-select: none;
+    width: 38px;
+    height: 18px;
+    text-align: center;
+    font-weight: 700;
+    border-radius: 4px;
+    font-size: 11px;
+    padding-block: 1px;
+    padding-inline: 2px;
+    margin-block: -2px;
+    margin-inline: 0;
+    line-height: 16px;
+    letter-spacing: 0.05px;
+    user-select: none;
+  }
 
   &--message-incoming {
-    @include light-theme {
-      color: $color-gray-60;
-      background: $color-black-alpha-08;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
+      background: variables.$color-black-alpha-08;
     }
-    @include dark-theme {
-      color: $color-gray-25;
-      background: $color-white-alpha-08;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
+      background: variables.$color-white-alpha-08;
     }
   }
   &--message-outgoing {
-    color: $color-white-alpha-80;
-    background: $color-white-alpha-20;
+    color: variables.$color-white-alpha-80;
+    background: variables.$color-white-alpha-20;
   }
   &--mini-player {
-    @include light-theme {
-      color: $color-gray-60;
-      background: $color-black-alpha-08;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
+      background: variables.$color-black-alpha-08;
     }
-    @include dark-theme {
-      color: $color-gray-25;
-      background: $color-white-alpha-08;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
+      background: variables.$color-white-alpha-08;
     }
   }
 
diff --git a/stylesheets/components/Preferences.scss b/stylesheets/components/Preferences.scss
index 7da2d8f77c..b6cdda4832 100644
--- a/stylesheets/components/Preferences.scss
+++ b/stylesheets/components/Preferences.scss
@@ -1,13 +1,16 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 @mixin preferences-icon($url) {
   &::before {
-    @include light-theme {
-      @include color-svg($url, $color-gray-75);
+    @include mixins.light-theme {
+      @include mixins.color-svg($url, variables.$color-gray-75);
     }
-    @include dark-theme {
-      @include color-svg($url, $color-gray-15);
+    @include mixins.dark-theme {
+      @include mixins.color-svg($url, variables.$color-gray-15);
     }
   }
 }
@@ -16,21 +19,21 @@
   display: flex;
   overflow: hidden;
   user-select: none;
-  @include light-theme {
-    background: $color-white;
+  @include mixins.light-theme {
+    background: variables.$color-white;
   }
-  @include dark-theme {
-    background: $color-gray-95;
+  @include mixins.dark-theme {
+    background: variables.$color-gray-95;
   }
 
   &__page-selector {
     padding-top: calc(24px + var(--title-bar-drag-area-height));
     min-width: min(34%, 240px);
-    @include light-theme {
-      background: $color-gray-02;
+    @include mixins.light-theme {
+      background: variables.$color-gray-02;
     }
-    @include dark-theme {
-      background: $color-gray-80;
+    @include mixins.dark-theme {
+      background: variables.$color-gray-80;
     }
   }
 
@@ -44,30 +47,32 @@
   }
 
   &__button {
-    @include button-reset;
-    @include font-body-1;
-    align-items: center;
-    display: flex;
-    height: 48px;
-    width: 100%;
-    padding-block: 14px;
-    padding-inline: 0;
+    @include mixins.button-reset;
+    & {
+      @include mixins.font-body-1;
+      align-items: center;
+      display: flex;
+      height: 48px;
+      width: 100%;
+      padding-block: 14px;
+      padding-inline: 0;
+    }
 
     &--selected {
-      @include light-theme {
-        background: $color-gray-15;
+      @include mixins.light-theme {
+        background: variables.$color-gray-15;
       }
-      @include dark-theme {
-        background: $color-gray-65;
+      @include mixins.dark-theme {
+        background: variables.$color-gray-65;
       }
     }
 
     &:focus {
-      @include keyboard-mode {
-        background: $color-gray-05;
+      @include mixins.keyboard-mode {
+        background: variables.$color-gray-05;
       }
-      @include dark-keyboard-mode {
-        background: $color-gray-75;
+      @include mixins.dark-keyboard-mode {
+        background: variables.$color-gray-75;
       }
     }
 
@@ -115,7 +120,7 @@
   }
 
   &__title {
-    @include font-body-1-bold;
+    @include mixins.font-body-1-bold;
     align-items: center;
     display: flex;
     height: 48px;
@@ -123,12 +128,12 @@
     margin-bottom: 24px;
     text-align: center;
 
-    border-bottom: 1px solid $color-gray-15;
-    @include light-theme {
-      border-color: $color-gray-15;
+    border-bottom: 1px solid variables.$color-gray-15;
+    @include mixins.light-theme {
+      border-color: variables.$color-gray-15;
     }
-    @include dark-theme {
-      border-color: $color-gray-65;
+    @include mixins.dark-theme {
+      border-color: variables.$color-gray-65;
     }
 
     &--header {
@@ -144,7 +149,7 @@
     padding-bottom: 20px;
 
     h3 {
-      @include font-body-1-bold;
+      @include mixins.font-body-1-bold;
       margin: 0;
       margin-bottom: 8px;
     }
@@ -155,14 +160,16 @@
   }
 
   &__settings-row:not(:last-child) {
-    border-bottom: 1px solid $color-gray-15;
-    @include light-theme {
-      border-color: $color-gray-15;
+    border-bottom: 1px solid variables.$color-gray-15;
+    @include mixins.light-theme {
+      border-color: variables.$color-gray-15;
     }
-    @include dark-theme {
-      border-color: $color-gray-65;
+    @include mixins.dark-theme {
+      border-color: variables.$color-gray-65;
+    }
+    & {
+      margin-bottom: 24px;
     }
-    margin-bottom: 24px;
   }
 
   &__pnp {
@@ -170,7 +177,7 @@
     width: 100%;
 
     h3 {
-      @include font-body-1;
+      @include mixins.font-body-1;
       font-weight: 400;
       margin: 0;
     }
@@ -197,21 +204,23 @@
     }
 
     &--value {
-      color: $color-gray-45;
+      color: variables.$color-gray-45;
       flex-shrink: 0;
     }
 
     &--clickable {
-      @include button-reset;
-      padding-block: 4px;
-      padding-inline: 24px;
-      width: 100%;
+      @include mixins.button-reset;
+      & {
+        padding-block: 4px;
+        padding-inline: 24px;
+        width: 100%;
+      }
       &:hover {
-        @include light-theme {
-          background: $color-gray-02;
+        @include mixins.light-theme {
+          background: variables.$color-gray-02;
         }
-        @include dark-theme {
-          background: $color-gray-80;
+        @include mixins.dark-theme {
+          background: variables.$color-gray-80;
         }
       }
     }
@@ -223,16 +232,16 @@
   }
 
   &__description {
-    @include font-subtitle;
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.font-subtitle;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
 
     &--error {
-      color: $color-accent-red !important;
+      color: variables.$color-accent-red !important;
     }
   }
 
@@ -252,25 +261,27 @@
   }
 
   &__back-icon {
-    @include button-reset;
+    @include mixins.button-reset;
 
-    display: inline-block;
-    height: 20px;
-    margin-inline-start: 12px;
-    min-width: 20px;
-    vertical-align: text-bottom;
-    width: 20px;
+    & {
+      display: inline-block;
+      height: 20px;
+      margin-inline-start: 12px;
+      min-width: 20px;
+      vertical-align: text-bottom;
+      width: 20px;
+    }
 
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/chevron/chevron-left.svg',
-        $color-gray-90
+        variables.$color-gray-90
       );
     }
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/chevron/chevron-left.svg',
-        $color-gray-02
+        variables.$color-gray-02
       );
     }
   }
@@ -296,17 +307,23 @@
 }
 
 .Preferences__LanguageIcon {
-  @include light-theme {
-    @include color-svg('../images/icons/v3/globe/globe.svg', $color-gray-75);
+  @include mixins.light-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/globe/globe.svg',
+      variables.$color-gray-75
+    );
   }
-  @include dark-theme {
-    @include color-svg('../images/icons/v3/globe/globe.svg', $color-gray-15);
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/globe/globe.svg',
+      variables.$color-gray-15
+    );
   }
 }
 
 .Preferences__LanguageButton {
-  @include button-reset;
-  @include localized-fonts;
+  @include mixins.button-reset;
+  @include mixins.localized-fonts;
 }
 
 .Preferences__LanguageModal {
@@ -317,40 +334,42 @@
 }
 
 .Preferences__LanguageModal__Title {
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
   margin-inline: 8px;
 }
 
 .Preferences__LanguageModal__NoResults {
-  @include font-body-1;
+  @include mixins.font-body-1;
   margin: 16px;
   text-align: center;
 }
 
 .Preferences__LanguageModal__Item {
-  @include button-reset;
-  width: 100%;
-  padding-block: 2px;
-  padding-inline: 8px;
+  @include mixins.button-reset;
+  & {
+    width: 100%;
+    padding-block: 2px;
+    padding-inline: 8px;
+  }
   &:hover {
     .Preferences__LanguageModal__Item__Inner {
-      @include light-theme {
-        background-color: $color-black-alpha-06;
+      @include mixins.light-theme {
+        background-color: variables.$color-black-alpha-06;
       }
-      @include dark-theme {
-        background-color: $color-white-alpha-06;
+      @include mixins.dark-theme {
+        background-color: variables.$color-white-alpha-06;
       }
     }
   }
   &:focus {
     outline: none;
     .Preferences__LanguageModal__Item__Inner {
-      @include keyboard-mode {
-        background-color: $color-black-alpha-06;
-        box-shadow: 0 0 0 2px $color-ultramarine;
+      @include mixins.keyboard-mode {
+        background-color: variables.$color-black-alpha-06;
+        box-shadow: 0 0 0 2px variables.$color-ultramarine;
       }
-      @include dark-keyboard-mode {
-        background-color: $color-white-alpha-06;
+      @include mixins.dark-keyboard-mode {
+        background-color: variables.$color-white-alpha-06;
       }
     }
   }
@@ -372,7 +391,7 @@
 
 .Preferences__LanguageModal__Item__Current {
   display: block;
-  @include font-body-1;
+  @include mixins.font-body-1;
 }
 
 .Preferences__LanguageModal__Item__Check {
@@ -381,24 +400,29 @@
   width: 20px;
   align-items: center;
   justify-content: center;
-  background: $color-ultramarine;
-  @include rounded-corners;
+  background: variables.$color-ultramarine;
+  @include mixins.rounded-corners;
   &::after {
-    @include color-svg('../images/icons/v3/check/check.svg', $color-white);
-    content: '';
-    height: 14px;
-    width: 14px;
+    @include mixins.color-svg(
+      '../images/icons/v3/check/check.svg',
+      variables.$color-white
+    );
+    & {
+      content: '';
+      height: 14px;
+      width: 14px;
+    }
   }
 }
 
 .Preferences__LanguageModal__Item__Matching {
   display: block;
-  @include localized-fonts;
-  @include font-body-2;
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.localized-fonts;
+  @include mixins.font-body-2;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
diff --git a/stylesheets/components/ProfileEditor.scss b/stylesheets/components/ProfileEditor.scss
index 2cb950d366..3aeff95b13 100644
--- a/stylesheets/components/ProfileEditor.scss
+++ b/stylesheets/components/ProfileEditor.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .ProfileEditor {
   &__icon {
     &--container {
@@ -19,28 +22,28 @@
       height: 20px;
       width: 20px;
 
-      @include light-theme {
-        background-color: $color-gray-75;
+      @include mixins.light-theme {
+        background-color: variables.$color-gray-75;
       }
 
-      @include dark-theme {
-        background-color: $color-gray-15;
+      @include mixins.dark-theme {
+        background-color: variables.$color-gray-15;
       }
     }
 
     &--name {
       &::after {
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/person/person.svg',
-            $color-gray-75
+            variables.$color-gray-75
           );
         }
 
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/person/person.svg',
-            $color-gray-15
+            variables.$color-gray-15
           );
         }
       }
@@ -48,29 +51,35 @@
 
     &--username {
       &::after {
-        @include light-theme {
-          @include color-svg('../images/icons/v3/at/at.svg', $color-gray-75);
+        @include mixins.light-theme {
+          @include mixins.color-svg(
+            '../images/icons/v3/at/at.svg',
+            variables.$color-gray-75
+          );
         }
 
-        @include dark-theme {
-          @include color-svg('../images/icons/v3/at/at.svg', $color-gray-15);
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
+            '../images/icons/v3/at/at.svg',
+            variables.$color-gray-15
+          );
         }
       }
     }
 
     &--username-link {
       &::after {
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/qr_code/qr_code.svg',
-            $color-gray-75
+            variables.$color-gray-75
           );
         }
 
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/qr_code/qr_code.svg',
-            $color-gray-15
+            variables.$color-gray-15
           );
         }
       }
@@ -78,17 +87,17 @@
 
     &--bio {
       &::after {
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/edit/edit.svg',
-            $color-gray-75
+            variables.$color-gray-75
           );
         }
 
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/edit/edit.svg',
-            $color-gray-15
+            variables.$color-gray-15
           );
         }
       }
@@ -104,12 +113,12 @@
     border-style: solid;
     border-bottom: none;
 
-    @include light-theme {
-      border-color: $color-gray-15;
+    @include mixins.light-theme {
+      border-color: variables.$color-gray-15;
     }
 
-    @include dark-theme {
-      border-color: $color-gray-75;
+    @include mixins.dark-theme {
+      border-color: variables.$color-gray-75;
     }
   }
 
@@ -118,15 +127,15 @@
   }
 
   &__info {
-    @include font-body-2;
+    @include mixins.font-body-2;
     margin-block: 12px;
     margin-inline: 8px;
 
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
 
     a {
@@ -140,44 +149,62 @@
       width: 20px;
       height: 20px;
 
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/chevron/chevron-down.svg',
-          $color-white
+          variables.$color-white
         );
       }
-      @include light-theme {
-        @include color-svg(
+      @include mixins.light-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/chevron/chevron-down.svg',
-          $color-black
+          variables.$color-black
         );
       }
     }
 
     &__copy-icon {
-      @include dark-theme {
-        @include color-svg('../images/icons/v3/copy/copy.svg', $color-white);
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/copy/copy.svg',
+          variables.$color-white
+        );
       }
-      @include light-theme {
-        @include color-svg('../images/icons/v3/copy/copy.svg', $color-black);
+      @include mixins.light-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/copy/copy.svg',
+          variables.$color-black
+        );
       }
     }
 
     &__copy-link-icon {
-      @include dark-theme {
-        @include color-svg('../images/icons/v3/link/link.svg', $color-white);
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/link/link.svg',
+          variables.$color-white
+        );
       }
-      @include light-theme {
-        @include color-svg('../images/icons/v3/link/link.svg', $color-black);
+      @include mixins.light-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/link/link.svg',
+          variables.$color-black
+        );
       }
     }
 
     &__trash-icon {
-      @include dark-theme {
-        @include color-svg('../images/icons/v3/trash/trash.svg', $color-white);
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/trash/trash.svg',
+          variables.$color-white
+        );
       }
-      @include light-theme {
-        @include color-svg('../images/icons/v3/trash/trash.svg', $color-black);
+      @include mixins.light-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/trash/trash.svg',
+          variables.$color-black
+        );
       }
     }
   }
@@ -188,17 +215,17 @@
     height: 20px;
     width: 20px;
 
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/error/error-circle.svg',
-        $color-accent-red
+        variables.$color-accent-red
       );
     }
 
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/error/error-circle.svg',
-        $color-accent-red
+        variables.$color-accent-red
       );
     }
   }
@@ -215,17 +242,19 @@
         flex-direction: row;
         padding: var(--container-padding);
         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
-        border: 1px solid $color-gray-20;
+        border: 1px solid variables.$color-gray-20;
         border-radius: inherit;
-        background-color: $color-gray-02;
+        background-color: variables.$color-gray-02;
         transform-origin: 0 0; // needed for react-spring scale animation
-        @include dark-theme {
-          background-color: $color-gray-75;
-          border-color: $color-gray-60;
+        @include mixins.dark-theme {
+          background-color: variables.$color-gray-75;
+          border-color: variables.$color-gray-60;
         }
       }
 
-      --direction-multiplier: 1;
+      & {
+        --direction-multiplier: 1;
+      }
       &:dir(rtl) {
         --direction-multiplier: -1;
       }
@@ -255,16 +284,16 @@
         margin-block-start: 4px;
         margin-inline: 4px 12px;
 
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/share/share.svg',
-            $color-white
+            variables.$color-white
           );
         }
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/share/share.svg',
-            $color-black
+            variables.$color-black
           );
         }
       }
@@ -273,29 +302,37 @@
         text-align: start;
 
         h3 {
-          @include font-body-2-bold;
+          @include mixins.font-body-2-bold;
           margin: 0;
         }
 
         p {
-          @include font-subtitle;
+          @include mixins.font-subtitle;
           max-width: 240px;
           margin: 0;
         }
       }
 
       &__close {
-        @include button-reset;
-        @include button-focus-outline;
+        @include mixins.button-reset;
+        @include mixins.button-focus-outline;
 
-        width: 20px;
-        height: 20px;
-        padding: 0;
-        margin: 0;
+        & {
+          width: 20px;
+          height: 20px;
+          padding: 0;
+          margin: 0;
+        }
 
-        @include color-svg('../images/icons/v3/x/x.svg', $color-gray-45);
-        @include dark-theme {
-          @include color-svg('../images/icons/v3/x/x.svg', $color-gray-25);
+        @include mixins.color-svg(
+          '../images/icons/v3/x/x.svg',
+          variables.$color-gray-45
+        );
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
+            '../images/icons/v3/x/x.svg',
+            variables.$color-gray-25
+          );
         }
       }
     }
@@ -303,34 +340,34 @@
 }
 
 .ProfileEditor__Title {
-  @include font-title-1;
+  @include mixins.font-title-1;
   text-align: center;
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   margin-block: 0 4px;
   margin-inline: 0;
-  @include light-theme() {
-    color: $color-gray-90;
+  @include mixins.light-theme() {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme() {
-    color: $color-gray-05;
+  @include mixins.dark-theme() {
+    color: variables.$color-gray-05;
   }
 }
 
 .ProfileEditor__PhoneNumber {
-  @include font-body-2;
+  @include mixins.font-body-2;
   text-align: center;
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   margin-block: 0 14px;
   margin-inline: 0;
-  @include light-theme() {
-    color: $color-black;
+  @include mixins.light-theme() {
+    color: variables.$color-black;
   }
-  @include dark-theme() {
-    color: $color-white;
+  @include mixins.dark-theme() {
+    color: variables.$color-white;
   }
 }
 
@@ -341,7 +378,7 @@
 }
 
 .ProfileEditor__EditPhoto {
-  @include font-subtitle;
+  @include mixins.font-subtitle;
 
   padding-block: 5px;
   padding-inline: 10px;
diff --git a/stylesheets/components/ProgressBar.scss b/stylesheets/components/ProgressBar.scss
index aa0a47b019..699b0a5862 100644
--- a/stylesheets/components/ProgressBar.scss
+++ b/stylesheets/components/ProgressBar.scss
@@ -1,17 +1,19 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../variables';
+
 .ProgressBar {
   position: relative;
   overflow: hidden;
-  background: rgba($color-ultramarine, 0.2);
+  background: rgba(variables.$color-ultramarine, 0.2);
   height: 5px;
   border-radius: 2px;
 }
 
 .ProgressBar__fill {
   position: absolute;
-  background-color: $color-ultramarine;
+  background-color: variables.$color-ultramarine;
   border-radius: 2px;
   display: block;
   height: 100%;
diff --git a/stylesheets/components/ProgressCircle.scss b/stylesheets/components/ProgressCircle.scss
index ed12815846..6e115dbab0 100644
--- a/stylesheets/components/ProgressCircle.scss
+++ b/stylesheets/components/ProgressCircle.scss
@@ -1,6 +1,9 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .ProgressCircle {
   fill: none;
   transform: rotate(-90deg);
@@ -11,14 +14,14 @@
   }
 
   .ProgressCircle__background {
-    stroke: $color-gray-20;
-    @include dark-theme() {
-      stroke: $color-gray-60;
+    stroke: variables.$color-gray-20;
+    @include mixins.dark-theme() {
+      stroke: variables.$color-gray-60;
     }
   }
 
   .ProgressCircle__fill {
-    stroke: $color-ultramarine;
+    stroke: variables.$color-ultramarine;
     stroke-linecap: round;
     transition: stroke-dashoffset 500ms ease-out;
   }
diff --git a/stylesheets/components/Quote.scss b/stylesheets/components/Quote.scss
index 505cc136d9..ab6aeec280 100644
--- a/stylesheets/components/Quote.scss
+++ b/stylesheets/components/Quote.scss
@@ -1,6 +1,11 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use 'sass:color';
+@use 'sass:map';
+@use '../mixins';
+@use '../variables';
+
 .module-quote {
   &__container {
     .module-message & {
@@ -10,20 +15,22 @@
     }
   }
 
-  @include button-reset;
-  width: 100%;
+  @include mixins.button-reset;
+  & {
+    width: 100%;
 
-  position: relative;
-  border-radius: 8px 8px 4px 4px;
+    position: relative;
+    border-radius: 8px 8px 4px 4px;
 
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  overflow: hidden;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    overflow: hidden;
+  }
 
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
-      box-shadow: 0px 0px 0px 2px $color-ultramarine;
+      box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
     }
   }
 
@@ -31,7 +38,7 @@
     bottom: 5px;
     position: absolute;
     inset-inline-end: 25px;
-    z-index: $z-index-base;
+    z-index: variables.$z-index-base;
 
     img.emoji {
       height: 24px;
@@ -57,57 +64,57 @@
 }
 
 .module-quote--outgoing {
-  background-color: $color-steel;
+  background-color: variables.$color-steel;
 
   .module-quote__primary {
-    border-inline-start-color: $color-steel;
+    border-inline-start-color: variables.$color-steel;
   }
 
   // To preserve contrast
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
-      box-shadow: 0px 0px 0px 2px $color-white;
+      box-shadow: 0px 0px 0px 2px variables.$color-white;
     }
   }
 }
 
-@each $color, $value in $conversation-colors {
+@each $color, $value in variables.$conversation-colors {
   .module-quote--incoming-#{$color} {
-    background-color: scale-color($value, $lightness: 60%);
+    background-color: color.scale($value, $lightness: 60%);
 
     .module-quote__primary {
       border-inline-start-color: $value;
     }
 
-    @include dark-theme {
-      background-color: scale-color($value, $lightness: -40%);
+    @include mixins.dark-theme {
+      background-color: color.scale($value, $lightness: -40%);
     }
   }
 
   .module-quote--outgoing-#{$color} {
-    background-color: scale-color($value, $lightness: 60%);
+    background-color: color.scale($value, $lightness: 60%);
 
     .module-quote__primary {
-      border-inline-start-color: $color-white;
+      border-inline-start-color: variables.$color-white;
     }
 
-    @include dark-theme {
-      background-color: scale-color($value, $lightness: -40%);
-      border-inline-start-color: $color-white;
+    @include mixins.dark-theme {
+      background-color: color.scale($value, $lightness: -40%);
+      border-inline-start-color: variables.$color-white;
     }
   }
 
   .module-quote--compose-#{$color} {
-    background-color: scale-color($value, $lightness: 60%);
+    background-color: color.scale($value, $lightness: 60%);
 
     .module-quote__primary {
       border-inline-start-color: $value;
     }
 
-    @include dark-theme {
-      background-color: scale-color($value, $lightness: -40%);
+    @include mixins.dark-theme {
+      background-color: color.scale($value, $lightness: -40%);
       .module-quote__primary {
-        border-inline-start-color: $color-white;
+        border-inline-start-color: variables.$color-white;
       }
     }
   }
@@ -119,38 +126,38 @@
   background-attachment: fixed;
 }
 
-@each $color, $value in $conversation-colors-gradient {
+@each $color, $value in variables.$conversation-colors-gradient {
   .module-quote--compose-#{$color},
   .module-quote--incoming-#{$color} {
     .module-quote__primary,
     &.module-quote__reference-warning {
-      border-inline-start-color: map-get($value, 'start');
+      border-inline-start-color: map.get($value, 'start');
     }
   }
   .module-quote--compose-#{$color},
   .module-quote--incoming-#{$color},
   .module-quote--outgoing-#{$color} {
     background-attachment: fixed;
-    @include light-theme {
+    @include mixins.light-theme {
       background-image: linear-gradient(
-          map-get($value, 'deg'),
-          scale-color(map-get($value, 'start'), $lightness: 60%),
-          scale-color(map-get($value, 'end'), $lightness: 60%)
+          map.get($value, 'deg'),
+          color.scale(map.get($value, 'start'), $lightness: 60%),
+          color.scale(map.get($value, 'end'), $lightness: 60%)
         ),
         linear-gradient(red, blue);
     }
-    @include dark-theme {
+    @include mixins.dark-theme {
       background-image: linear-gradient(
-        map-get($value, 'deg'),
-        scale-color(map-get($value, 'start'), $lightness: -40%),
-        scale-color(map-get($value, 'end'), $lightness: -40%)
+        map.get($value, 'deg'),
+        color.scale(map.get($value, 'start'), $lightness: -40%),
+        color.scale(map.get($value, 'end'), $lightness: -40%)
       );
     }
   }
   .module-quote--outgoing-#{$color} {
     .module-quote__primary,
     &.module-quote__reference-warning {
-      border-inline-start-color: $color-white;
+      border-inline-start-color: variables.$color-white;
     }
   }
 }
@@ -168,83 +175,85 @@
 }
 
 .module-quote__primary__author {
-  @include font-body-2-bold;
+  @include mixins.font-body-2-bold;
 
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 }
 
 .module-quote__primary__author--incoming {
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 }
 
 .module-quote__primary__text {
-  @include font-body-1;
+  @include mixins.font-body-1;
 
   text-align: start;
 
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
     a {
-      color: $color-gray-90;
+      color: variables.$color-gray-90;
     }
   }
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
     a {
-      color: $color-gray-05;
+      color: variables.$color-gray-05;
     }
   }
 
-  overflow-wrap: break-word;
-  word-wrap: break-word;
-  word-break: break-word;
-  white-space: pre-wrap;
+  & {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+    white-space: pre-wrap;
 
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
 }
 
 .module-quote__primary__text--incoming {
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
     a {
-      color: $color-gray-05;
+      color: variables.$color-gray-05;
     }
   }
 }
 
 .module-quote__primary__type-label {
-  @include font-body-2-italic;
+  @include mixins.font-body-2-italic;
 
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 }
 
 .module-quote__primary__type-label--incoming {
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 }
 
 .module-quote__primary__filename-label {
-  @include font-body-2;
+  @include mixins.font-body-2;
 }
 
 .module-quote__close-container {
@@ -256,24 +265,26 @@
 
   border-radius: 50%;
 
-  background-color: $color-black-alpha-40;
+  background-color: variables.$color-black-alpha-40;
 
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus-within {
-      background-color: $color-ultramarine;
+      background-color: variables.$color-ultramarine;
     }
   }
 }
 
 .module-quote__close-button {
-  @include button-reset;
-
-  width: 14px;
-  height: 14px;
-
-  @include position-absolute-center;
-
-  @include color-svg('../images/icons/v3/x/x.svg', $color-white);
+  @include mixins.button-reset;
+  & {
+    width: 14px;
+    height: 14px;
+    @include mixins.position-absolute-center;
+  }
+  @include mixins.color-svg(
+    '../images/icons/v3/x/x.svg',
+    variables.$color-white
+  );
 }
 
 .module-quote__icon-container {
@@ -289,11 +300,11 @@
 }
 
 .module-quote__icon-container__outgoing-gift-badge {
-  @include light-theme {
-    border: 1px solid $color-white;
+  @include mixins.light-theme {
+    border: 1px solid variables.$color-white;
   }
-  @include dark-theme {
-    border: 1px solid $color-white-alpha-80;
+  @include mixins.dark-theme {
+    border: 1px solid variables.$color-white-alpha-80;
   }
 }
 
@@ -317,7 +328,7 @@
   height: 32px;
   width: 32px;
   border-radius: 50%;
-  background-color: $color-white;
+  background-color: variables.$color-white;
 }
 
 .module-quote__icon-container__icon {
@@ -326,30 +337,39 @@
 }
 
 .module-quote__icon-container__icon--file {
-  @include color-svg('../images/icons/v3/file/file.svg', $color-ultramarine);
+  @include mixins.color-svg(
+    '../images/icons/v3/file/file.svg',
+    variables.$color-ultramarine
+  );
 }
 .module-quote__icon-container__icon--image {
-  @include color-svg(
+  @include mixins.color-svg(
     '../images/icons/v3/photo/photo-square.svg',
-    $color-ultramarine
+    variables.$color-ultramarine
   );
 }
 .module-quote__icon-container__icon--microphone {
-  @include color-svg('../images/icons/v3/mic/mic.svg', $color-ultramarine);
+  @include mixins.color-svg(
+    '../images/icons/v3/mic/mic.svg',
+    variables.$color-ultramarine
+  );
 }
 .module-quote__icon-container__icon--play {
-  @include color-svg(
+  @include mixins.color-svg(
     '../images/icons/v3/play/play-fill.svg',
-    $color-ultramarine
+    variables.$color-ultramarine
   );
 }
 .module-quote__icon-container__icon--movie {
-  @include color-svg('../images/movie.svg', $color-ultramarine);
+  @include mixins.color-svg(
+    '../images/movie.svg',
+    variables.$color-ultramarine
+  );
 }
 .module-quote__icon-container__icon--view-once {
-  @include color-svg(
+  @include mixins.color-svg(
     '../images/icons/v3/view_once/view_once.svg',
-    $color-ultramarine
+    variables.$color-ultramarine
   );
 }
 
@@ -368,29 +388,29 @@
   margin-bottom: 5px;
 }
 .module-quote__generic-file__text {
-  @include font-body-2;
+  @include mixins.font-body-2;
 
   max-width: calc(100% - 26px);
   overflow-x: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 }
 
 .module-quote__generic-file__text--incoming {
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 }
 
 .module-quote__reference-warning {
-  color: $color-gray-90;
+  color: variables.$color-gray-90;
   height: 26px;
   display: flex;
   flex-direction: row;
@@ -407,51 +427,51 @@
   height: 16px;
   width: 16px;
 
-  @include light-theme {
-    @include color-svg(
+  @include mixins.light-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/link/link-slash.svg',
-      $color-gray-90
+      variables.$color-gray-90
     );
   }
-  @include dark-theme {
-    @include color-svg(
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/link/link-slash.svg',
-      $color-gray-05
+      variables.$color-gray-05
     );
   }
 }
 
 .module-quote__reference-warning__icon--incoming {
-  @include light-theme {
-    @include color-svg(
+  @include mixins.light-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/link/link-slash.svg',
-      $color-gray-90
+      variables.$color-gray-90
     );
   }
-  @include dark-theme {
-    @include color-svg(
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
       '../images/icons/v3/link/link-slash.svg',
-      $color-gray-05
+      variables.$color-gray-05
     );
   }
 }
 
 .module-quote__reference-warning__text {
-  @include font-caption;
+  @include mixins.font-caption;
 
   margin-inline-start: 6px;
 
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 }
 
 .module-quote__reference-warning__text--incoming {
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 }
 
diff --git a/stylesheets/components/ReactionPickerPicker.scss b/stylesheets/components/ReactionPickerPicker.scss
index 043beceeff..7554237d4b 100644
--- a/stylesheets/components/ReactionPickerPicker.scss
+++ b/stylesheets/components/ReactionPickerPicker.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 @use 'sass:math';
 
 .module-ReactionPickerPicker {
@@ -13,13 +16,13 @@
 
   $root-selector: &;
 
-  @include rounded-corners;
+  @include mixins.rounded-corners;
   align-items: center;
   border-style: solid;
   border-width: 1px;
   box-shadow:
-    0 1px 4px $color-black-alpha-05,
-    0 10px 16px $color-black-alpha-20;
+    0 1px 4px variables.$color-black-alpha-05,
+    0 10px 16px variables.$color-black-alpha-20;
   display: inline-flex;
   flex-direction: row;
   padding-block: 3px;
@@ -30,27 +33,29 @@
   @media (prefers-reduced-motion: no-preference) {
     animation-name: module-ReactionPickerPicker__appear;
     animation-duration: 400ms;
-    animation-timing-function: $ease-out-expo;
+    animation-timing-function: variables.$ease-out-expo;
     animation-fill-mode: forwards;
   }
 
-  @include light-theme {
-    background: $color-white;
-    border-color: $color-black-alpha-05;
+  @include mixins.light-theme {
+    background: variables.$color-white;
+    border-color: variables.$color-black-alpha-05;
   }
 
-  @include dark-theme {
-    background: $color-gray-75;
-    border-color: $color-gray-80;
+  @include mixins.dark-theme {
+    background: variables.$color-gray-75;
+    border-color: variables.$color-gray-80;
   }
 
   &__button {
-    @include button-reset;
-    align-items: center;
-    border-radius: 100%;
-    display: flex;
-    justify-content: center;
-    position: relative;
+    @include mixins.button-reset;
+    & {
+      align-items: center;
+      border-radius: 100%;
+      display: flex;
+      justify-content: center;
+      position: relative;
+    }
 
     &--emoji {
       $emoji-button-selector: &;
@@ -58,7 +63,7 @@
       height: $button-size;
       width: $button-size;
       @media (prefers-reduced-motion: no-preference) {
-        transition: background 200ms $ease-out-expo;
+        transition: background 200ms variables.$ease-out-expo;
       }
 
       .module-emoji {
@@ -66,7 +71,7 @@
           math.div($button-content-size, $emoji-size-from-component)
         );
         @media (prefers-reduced-motion: no-preference) {
-          transition: transform 400ms $ease-out-expo;
+          transition: transform 400ms variables.$ease-out-expo;
         }
       }
     }
@@ -78,31 +83,31 @@
       margin: math.div($button-size - $button-content-size, 2);
       width: $button-content-size;
       @media (prefers-reduced-motion: no-preference) {
-        transition: background 200ms $ease-out-expo;
+        transition: background 200ms variables.$ease-out-expo;
       }
 
-      @include light-theme {
-        background: $color-gray-02;
+      @include mixins.light-theme {
+        background: variables.$color-gray-02;
 
         &:hover {
-          background: $color-gray-05;
+          background: variables.$color-gray-05;
         }
-        @include keyboard-mode {
+        @include mixins.keyboard-mode {
           &:focus {
-            background: $color-gray-05;
+            background: variables.$color-gray-05;
           }
         }
       }
 
-      @include dark-theme {
-        background: $color-gray-60;
+      @include mixins.dark-theme {
+        background: variables.$color-gray-60;
 
         &:hover {
-          background: $color-gray-45;
+          background: variables.$color-gray-45;
         }
-        @include dark-keyboard-mode {
+        @include mixins.dark-keyboard-mode {
           &:focus {
-            background: $color-gray-45;
+            background: variables.$color-gray-45;
           }
         }
       }
@@ -113,17 +118,17 @@
         display: block;
         content: '';
 
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/more/more.svg',
-            $color-gray-45
+            variables.$color-gray-45
           );
         }
 
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/more/more.svg',
-            $color-gray-15
+            variables.$color-gray-15
           );
         }
       }
@@ -131,7 +136,7 @@
   }
 
   &--picker-style {
-    z-index: $z-index-above-base;
+    z-index: variables.$z-index-above-base;
 
     #{$root-selector}__button {
       @media (prefers-reduced-motion: no-preference) {
@@ -140,7 +145,7 @@
 
         animation-name: module-ReactionPickerPicker__button-appear;
         animation-duration: 400ms;
-        animation-timing-function: $ease-out-expo;
+        animation-timing-function: variables.$ease-out-expo;
         animation-fill-mode: forwards;
         // This delay is a fallback in case there are more than the expected number of
         //   buttons.
@@ -165,7 +170,7 @@
         &:hover {
           @include focus-or-hover-styles;
         }
-        @include keyboard-mode {
+        @include mixins.keyboard-mode {
           &:focus {
             @include focus-or-hover-styles;
           }
@@ -173,12 +178,12 @@
       }
 
       &--selected {
-        @include light-theme {
-          background: $color-black-alpha-20;
+        @include mixins.light-theme {
+          background: variables.$color-black-alpha-20;
         }
 
-        @include dark-theme {
-          background: $color-white-alpha-20;
+        @include mixins.dark-theme {
+          background: variables.$color-white-alpha-20;
         }
       }
     }
@@ -186,14 +191,14 @@
 
   &--menu-style {
     #{$root-selector}__button {
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus {
-          background: $color-black-alpha-20;
+          background: variables.$color-black-alpha-20;
         }
       }
-      @include dark-keyboard-mode {
+      @include mixins.dark-keyboard-mode {
         &:focus {
-          background: $color-white-alpha-40;
+          background: variables.$color-white-alpha-40;
         }
       }
 
diff --git a/stylesheets/components/RecordingComposer.scss b/stylesheets/components/RecordingComposer.scss
index 8044770baa..bbba1971ab 100644
--- a/stylesheets/components/RecordingComposer.scss
+++ b/stylesheets/components/RecordingComposer.scss
@@ -1,6 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .RecordingComposer {
   display: flex;
   align-items: center;
@@ -19,11 +22,11 @@
     padding-inline: 12px;
     overflow: hidden;
 
-    @include light-theme {
-      background: $color-gray-05;
+    @include mixins.light-theme {
+      background: variables.$color-gray-05;
     }
-    @include dark-theme {
-      background: $color-gray-75;
+    @include mixins.dark-theme {
+      background: variables.$color-gray-75;
     }
   }
 
diff --git a/stylesheets/components/SafetyNumberChangeDialog.scss b/stylesheets/components/SafetyNumberChangeDialog.scss
index 30907981d0..8dab5f0a4a 100644
--- a/stylesheets/components/SafetyNumberChangeDialog.scss
+++ b/stylesheets/components/SafetyNumberChangeDialog.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-SafetyNumberChangeDialog {
   &__confirm-dialog__header {
     padding-bottom: 0px;
@@ -20,48 +23,48 @@
 
     height: 24px;
     width: 24px;
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/safety_number/safety_number.svg',
-        $color-gray-90
+        variables.$color-gray-90
       );
     }
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/safety_number/safety_number.svg',
-        $color-white
+        variables.$color-white
       );
     }
   }
 
   &__title {
-    @include font-body-1-bold;
+    @include mixins.font-body-1-bold;
 
     text-align: center;
     margin-top: 8px;
 
-    @include light-theme {
-      color: $color-gray-90;
+    @include mixins.light-theme {
+      color: variables.$color-gray-90;
     }
-    @include dark-theme {
-      color: $color-white;
+    @include mixins.dark-theme {
+      color: variables.$color-white;
     }
   }
 
   &__message {
-    @include font-body-2;
+    @include mixins.font-body-2;
 
     text-align: center;
     margin-top: 8px;
     margin-bottom: 24px;
     padding-inline: 4px;
 
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
 
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
 
     &--narrow {
@@ -84,7 +87,7 @@
     margin-bottom: 16px;
 
     &__story-name {
-      @include font-body-1-bold;
+      @include mixins.font-body-1-bold;
       flex-grow: 1;
       margin-inline-end: auto;
     }
@@ -95,31 +98,33 @@
     }
 
     &--name {
-      @include font-body-1;
+      @include mixins.font-body-1;
 
-      @include dark-theme {
-        color: $color-white;
+      @include mixins.dark-theme {
+        color: variables.$color-white;
       }
     }
 
     &--subtitle {
-      @include font-subtitle;
+      @include mixins.font-subtitle;
 
-      @include light-theme {
-        color: $color-gray-60;
+      @include mixins.light-theme {
+        color: variables.$color-gray-60;
       }
 
-      @include dark-theme {
-        color: $color-gray-25;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-25;
       }
     }
 
     &__view {
-      @include button-reset;
-      @include button-secondary-blue-text;
+      @include mixins.button-reset;
+      @include mixins.button-secondary-blue-text;
 
-      opacity: 0;
-      transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
+      & {
+        opacity: 0;
+        transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
+      }
 
       // Using keyboard/mouse classes directly; mixins were doing weird things
       .mouse-mode #{$row}:hover & {
@@ -129,9 +134,11 @@
         opacity: 1;
       }
 
-      border-radius: 4px;
-      padding-block: 8px;
-      padding-inline: 14px;
+      & {
+        border-radius: 4px;
+        padding-block: 8px;
+        padding-inline: 14px;
+      }
     }
 
     &__chevron__option {
@@ -149,24 +156,26 @@
     }
 
     &__chevron__button {
-      @include button-reset;
+      @include mixins.button-reset;
 
-      display: flex;
-      align-items: center;
+      & {
+        display: flex;
+        align-items: center;
 
-      flex-grow: 0;
-      flex-shrink: 0;
+        flex-grow: 0;
+        flex-shrink: 0;
 
-      padding: 10px;
-      height: 16px;
-      width: 16px;
+        padding: 10px;
+        height: 16px;
+        width: 16px;
 
-      justify-content: center;
-      border-radius: 4px;
-      border: 2px solid transparent;
+        justify-content: center;
+        border-radius: 4px;
+        border: 2px solid transparent;
 
-      opacity: 0;
-      transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
+        opacity: 0;
+        transition: opacity 150ms cubic-bezier(0.17, 0.17, 0, 1);
+      }
 
       // Using keyboard/mouse classes directly; mixins were doing weird things
       .mouse-mode #{$row}:hover & {
@@ -176,14 +185,14 @@
         opacity: 1;
       }
 
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus {
-          border-color: $color-ultramarine;
+          border-color: variables.$color-ultramarine;
         }
       }
-      @include dark-keyboard-mode {
+      @include mixins.dark-keyboard-mode {
         &:focus {
-          border-color: $color-ultramarine-light;
+          border-color: variables.$color-ultramarine-light;
         }
       }
 
@@ -194,16 +203,16 @@
         width: 16px;
         flex-shrink: 0;
 
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-down.svg',
-            $color-gray-60
+            variables.$color-gray-60
           );
         }
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-down.svg',
-            $color-gray-25
+            variables.$color-gray-25
           );
         }
       }
@@ -212,24 +221,30 @@
 
   &__menu-icon {
     &--delete {
-      @include light-theme {
-        @include color-svg('../images/icons/v3/x/x-circle.svg', $color-gray-90);
+      @include mixins.light-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/x/x-circle.svg',
+          variables.$color-gray-90
+        );
       }
-      @include dark-theme {
-        @include color-svg('../images/icons/v3/x/x-circle.svg', $color-gray-05);
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/x/x-circle.svg',
+          variables.$color-gray-05
+        );
       }
     }
     &--verify {
-      @include light-theme {
-        @include color-svg(
+      @include mixins.light-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/safety_number/safety_number.svg',
-          $color-gray-90
+          variables.$color-gray-90
         );
       }
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/safety_number/safety_number.svg',
-          $color-gray-05
+          variables.$color-gray-05
         );
       }
     }
diff --git a/stylesheets/components/SafetyNumberOnboarding.scss b/stylesheets/components/SafetyNumberOnboarding.scss
index b91bcd1406..952ecb75fd 100644
--- a/stylesheets/components/SafetyNumberOnboarding.scss
+++ b/stylesheets/components/SafetyNumberOnboarding.scss
@@ -1,6 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-SafetyNumberOnboarding {
   display: flex;
   flex-direction: column;
@@ -15,31 +18,33 @@
     margin-block: 0 25px;
     text-align: start;
 
-    @include font-body-2;
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.font-body-2;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
 
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
   }
 
   svg {
     margin-block: 0 21px;
     border-radius: 12px;
-    @include light-theme {
-      border: 1.5px solid $color-black-alpha-12;
+    @include mixins.light-theme {
+      border: 1.5px solid variables.$color-black-alpha-12;
     }
-    @include dark-theme {
-      border: 1.5px solid $color-gray-60;
+    @include mixins.dark-theme {
+      border: 1.5px solid variables.$color-gray-60;
+    }
+    & {
+      background: variables.$color-white;
     }
-    background: $color-white;
   }
 
   &__help {
     a {
-      @include font-body-1-bold;
+      @include mixins.font-body-1-bold;
       text-decoration: none;
     }
     margin-block: 0 24px;
diff --git a/stylesheets/components/SafetyNumberViewer.scss b/stylesheets/components/SafetyNumberViewer.scss
index 334ac66b8a..3af9cbc339 100644
--- a/stylesheets/components/SafetyNumberViewer.scss
+++ b/stylesheets/components/SafetyNumberViewer.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-SafetyNumberViewer {
   display: flex;
   flex-direction: column;
@@ -32,14 +35,14 @@
     padding: 24px;
     border-radius: 12px;
 
-    background-color: $color-borage-blue;
+    background-color: variables.$color-borage-blue;
 
     &__qr {
       width: 120px;
       height: 120px;
       padding: 10px;
       border-radius: 8px;
-      background: $color-white;
+      background: variables.$color-white;
     }
 
     &__number {
@@ -47,30 +50,32 @@
       flex-wrap: wrap;
       gap: 8px;
       justify-content: center;
-      color: $color-white;
+      color: variables.$color-white;
 
-      font-family: $monospace;
+      font-family: variables.$monospace;
       margin-block: 0 4px;
 
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus {
-          box-shadow: 0 0 0 3px $color-ultramarine;
+          box-shadow: 0 0 0 3px variables.$color-ultramarine;
         }
       }
     }
   }
 
   &__help {
-    @include font-subtitle;
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.font-subtitle;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
 
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
 
-    margin-top: 4px;
+    & {
+      margin-top: 4px;
+    }
   }
 
   &__verification-status {
diff --git a/stylesheets/components/SafetyTipsModal.scss b/stylesheets/components/SafetyTipsModal.scss
index 59b8c9598a..bdb3e293d8 100644
--- a/stylesheets/components/SafetyTipsModal.scss
+++ b/stylesheets/components/SafetyTipsModal.scss
@@ -1,6 +1,9 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 $SafetyTipsModal__paddingInline: 32px;
 $SafetyTipsModal__paddingBlock: 24px;
 
@@ -11,7 +14,7 @@ $SafetyTipsModal__paddingBlock: 24px;
 
   .module-Modal__title {
     padding-top: 20px;
-    @include font-title-1;
+    @include mixins.font-title-1;
     text-align: center;
   }
 
@@ -35,12 +38,12 @@ $SafetyTipsModal__paddingBlock: 24px;
   padding-inline: $SafetyTipsModal__paddingInline;
   padding-bottom: 24px;
   text-align: center;
-  @include font-body-1;
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.font-body-1;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 
@@ -56,14 +59,14 @@ $SafetyTipsModal__paddingBlock: 24px;
 .SafetyTipsModal__Button--Previous {
   &,
   &:is(:disabled, [aria-disabled='true']) {
-    @include any-theme {
+    @include mixins.any-theme {
       background: transparent;
     }
-    @include light-theme {
-      color: $color-accent-blue;
+    @include mixins.light-theme {
+      color: variables.$color-accent-blue;
     }
-    @include dark-theme {
-      color: $color-white;
+    @include mixins.dark-theme {
+      color: variables.$color-white;
     }
   }
 
@@ -74,20 +77,20 @@ $SafetyTipsModal__paddingBlock: 24px;
   &:not(:disabled):not([aria-disabled='true']) {
     &:hover,
     &:focus {
-      @include light-theme {
-        background: $color-gray-15;
+      @include mixins.light-theme {
+        background: variables.$color-gray-15;
       }
-      @include dark-theme {
-        background: $color-gray-65;
+      @include mixins.dark-theme {
+        background: variables.$color-gray-65;
       }
     }
 
     &:active {
-      @include light-theme {
-        background: $color-gray-20;
+      @include mixins.light-theme {
+        background: variables.$color-gray-20;
       }
-      @include dark-theme {
-        background: $color-gray-60;
+      @include mixins.dark-theme {
+        background: variables.$color-gray-60;
       }
     }
   }
@@ -110,11 +113,11 @@ $SafetyTipsModal__paddingBlock: 24px;
   padding-inline: 12px;
   border-radius: 18px;
   text-align: center;
-  @include light-theme {
-    background: $color-gray-02;
+  @include mixins.light-theme {
+    background: variables.$color-gray-02;
   }
-  @include dark-theme {
-    background: $color-gray-75;
+  @include mixins.dark-theme {
+    background: variables.$color-gray-75;
   }
 }
 
@@ -123,33 +126,33 @@ $SafetyTipsModal__paddingBlock: 24px;
   height: auto;
   vertical-align: top;
   border-radius: 12px;
-  @include light-theme {
+  @include mixins.light-theme {
     background: white;
   }
-  @include dark-theme {
-    background: $color-gray-65;
+  @include mixins.dark-theme {
+    background: variables.$color-gray-65;
   }
 }
 
 .SafetyTipsModal__CardTitle {
   margin-block: 14px 0;
-  @include font-title-2;
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.font-title-2;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 }
 
 .SafetyTipsModal__CardDescription {
   margin-block: 8px 0;
-  @include font-body-1;
-  @include light-theme {
-    color: $color-gray-62;
+  @include mixins.font-body-1;
+  @include mixins.light-theme {
+    color: variables.$color-gray-62;
   }
-  @include dark-theme {
-    color: $color-gray-20;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-20;
   }
 }
 
@@ -160,8 +163,10 @@ $SafetyTipsModal__paddingBlock: 24px;
 }
 
 .SafetyTipsModal__DotsButton {
-  @include button-reset;
-  padding: 4px;
+  @include mixins.button-reset;
+  & {
+    padding: 4px;
+  }
 
   &::before {
     content: '';
@@ -170,11 +175,11 @@ $SafetyTipsModal__paddingBlock: 24px;
     height: 8px;
     border-radius: 9999px;
     transition: background 100ms ease;
-    @include light-theme {
-      background: rgba($color-black, 30%);
+    @include mixins.light-theme {
+      background: rgba(variables.$color-black, 30%);
     }
-    @include dark-theme {
-      background: rgba($color-white, 30%);
+    @include mixins.dark-theme {
+      background: rgba(variables.$color-white, 30%);
     }
   }
 
@@ -182,43 +187,43 @@ $SafetyTipsModal__paddingBlock: 24px;
     &:hover,
     &:focus {
       &::before {
-        @include light-theme {
-          background: rgba($color-black, 45%);
+        @include mixins.light-theme {
+          background: rgba(variables.$color-black, 45%);
         }
-        @include dark-theme {
-          background: rgba($color-white, 45%);
+        @include mixins.dark-theme {
+          background: rgba(variables.$color-white, 45%);
         }
       }
     }
   }
 
   &[aria-current]::before {
-    @include light-theme {
-      background: $color-black;
+    @include mixins.light-theme {
+      background: variables.$color-black;
     }
-    @include dark-theme {
-      background: $color-white;
+    @include mixins.dark-theme {
+      background: variables.$color-white;
     }
   }
 
   &:focus {
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       &::before {
         box-shadow:
-          0 0 0 2px $color-white,
-          0 0 0 4px $color-accent-blue;
+          0 0 0 2px variables.$color-white,
+          0 0 0 4px variables.$color-accent-blue;
       }
     }
-    @include dark-keyboard-mode {
+    @include mixins.dark-keyboard-mode {
       &::before {
         box-shadow:
-          0 0 0 2px $color-gray-80,
-          0 0 0 4px $color-accent-blue;
+          0 0 0 2px variables.$color-gray-80,
+          0 0 0 4px variables.$color-accent-blue;
       }
     }
   }
 }
 
 .SafetyTipsModal__DotsButtonLabel {
-  @include sr-only;
+  @include mixins.sr-only;
 }
diff --git a/stylesheets/components/ScrollDownButton.scss b/stylesheets/components/ScrollDownButton.scss
index 702afc4a4b..54ae34c692 100644
--- a/stylesheets/components/ScrollDownButton.scss
+++ b/stylesheets/components/ScrollDownButton.scss
@@ -1,6 +1,9 @@
 // Copyright 2018 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .ScrollDownButton {
   position: relative;
 
@@ -15,42 +18,48 @@
   justify-content: center;
 
   box-shadow:
-    0px 0px 2px $color-black-alpha-20,
-    0px 2px 6px $color-black-alpha-12;
+    0px 0px 2px variables.$color-black-alpha-20,
+    0px 2px 6px variables.$color-black-alpha-12;
 
-  @include light-theme {
-    background-color: $color-white;
+  @include mixins.light-theme {
+    background-color: variables.$color-white;
   }
-  @include dark-theme {
-    background-color: $color-gray-75;
+  @include mixins.dark-theme {
+    background-color: variables.$color-gray-75;
   }
 
   &__icon--unread-mentions {
     height: 17px;
     width: 17px;
-    @include light-theme {
-      @include color-svg('../images/icons/v3/at/at.svg', $color-gray-75);
+    @include mixins.light-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/at/at.svg',
+        variables.$color-gray-75
+      );
     }
 
-    @include dark-theme {
-      @include color-svg('../images/icons/v3/at/at.svg', $color-gray-15);
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/at/at.svg',
+        variables.$color-gray-15
+      );
     }
   }
 
   &__icon--unread-messages {
     height: 20px;
     width: 20px;
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/chevron/chevron-down.svg',
-        $color-gray-75
+        variables.$color-gray-75
       );
     }
 
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/chevron/chevron-down.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
   }
@@ -63,12 +72,12 @@
     border-radius: 8px;
     padding-block: 1px;
     padding-inline: 4px;
-    background-color: $color-ultramarine;
-    color: $color-white;
+    background-color: variables.$color-ultramarine;
+    color: variables.$color-white;
 
     font-size: 10px;
     line-height: 14px;
 
-    box-shadow: 0px 1px 4px $color-black-alpha-24;
+    box-shadow: 0px 1px 4px variables.$color-black-alpha-24;
   }
 }
diff --git a/stylesheets/components/SearchInput.scss b/stylesheets/components/SearchInput.scss
index d9df84b831..a2e47eadfe 100644
--- a/stylesheets/components/SearchInput.scss
+++ b/stylesheets/components/SearchInput.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-SearchInput {
   &__container {
     position: relative;
@@ -17,48 +20,48 @@
     top: 6px;
     width: 16px;
 
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/search/search-compact-light.svg',
-        $color-gray-45
+        variables.$color-gray-45
       );
     }
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/search/search-compact-light.svg',
-        $color-gray-25
+        variables.$color-gray-25
       );
     }
   }
 
   &__input {
-    @include font-body-2;
+    @include mixins.font-body-2;
     border: solid 1px transparent;
     border-radius: 8px;
     height: 28px;
     padding-inline: 30px 5px;
     width: 100%;
 
-    @include light-theme {
-      background-color: $color-black-alpha-06;
-      color: $color-gray-90;
+    @include mixins.light-theme {
+      background-color: variables.$color-black-alpha-06;
+      color: variables.$color-gray-90;
 
       &:placeholder {
-        color: $color-gray-45;
+        color: variables.$color-gray-45;
       }
     }
-    @include dark-theme {
-      background-color: $color-white-alpha-12;
-      color: $color-gray-05;
+    @include mixins.dark-theme {
+      background-color: variables.$color-white-alpha-12;
+      color: variables.$color-gray-05;
 
       &:placeholder {
-        color: $color-gray-25;
+        color: variables.$color-gray-25;
       }
     }
 
     &:focus {
-      @include keyboard-mode {
-        border: solid 1px $color-ultramarine;
+      @include mixins.keyboard-mode {
+        border: solid 1px variables.$color-ultramarine;
       }
       outline: none;
     }
@@ -75,23 +78,29 @@
     top: 6px;
     width: 16px;
 
-    @include light-theme {
-      @include color-svg('../images/icons/v3/x/x-compact.svg', $color-gray-60);
+    @include mixins.light-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/x/x-compact.svg',
+        variables.$color-gray-60
+      );
     }
-    @include dark-theme {
-      @include color-svg('../images/icons/v3/x/x-compact.svg', $color-gray-25);
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/x/x-compact.svg',
+        variables.$color-gray-25
+      );
     }
   }
 
   &__description {
     margin-block-start: 12px;
-    @include font-subtitle;
+    @include mixins.font-subtitle;
 
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme {
-      color: $color-gray-05;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-05;
     }
   }
 }
diff --git a/stylesheets/components/SearchResultsLoadingFakeHeader.scss b/stylesheets/components/SearchResultsLoadingFakeHeader.scss
index 02d4031006..7462e53eb1 100644
--- a/stylesheets/components/SearchResultsLoadingFakeHeader.scss
+++ b/stylesheets/components/SearchResultsLoadingFakeHeader.scss
@@ -1,6 +1,8 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+
 // These styles should match the "real" header.
 .module-SearchResultsLoadingFakeHeader {
   display: flex;
@@ -11,6 +13,6 @@
   &::before {
     content: '';
     display: block;
-    @include search-results-loading-box(25%);
+    @include mixins.search-results-loading-box(25%);
   }
 }
diff --git a/stylesheets/components/SearchResultsLoadingFakeRow.scss b/stylesheets/components/SearchResultsLoadingFakeRow.scss
index 81a2fadc4f..4c00a201f8 100644
--- a/stylesheets/components/SearchResultsLoadingFakeRow.scss
+++ b/stylesheets/components/SearchResultsLoadingFakeRow.scss
@@ -1,6 +1,8 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+
 // These styles should match the "real" contact/conversation row.
 .module-SearchResultsLoadingFakeRow {
   display: flex;
@@ -15,7 +17,7 @@
     width: 48px;
     height: 48px;
     border-radius: 100%;
-    @include search-results-loading-pulsating-background;
+    @include mixins.search-results-loading-pulsating-background;
   }
 
   &__content {
@@ -27,17 +29,21 @@
 
     &__line {
       &:nth-child(1) {
-        @include search-results-loading-box(30%);
-        margin-bottom: 8px;
+        @include mixins.search-results-loading-box(30%);
+        & {
+          margin-bottom: 8px;
+        }
       }
 
       &:nth-child(2) {
-        @include search-results-loading-box(90%);
-        margin-bottom: 8px;
+        @include mixins.search-results-loading-box(90%);
+        & {
+          margin-bottom: 8px;
+        }
       }
 
       &:nth-child(3) {
-        @include search-results-loading-box(60%);
+        @include mixins.search-results-loading-box(60%);
       }
     }
   }
diff --git a/stylesheets/components/Select.scss b/stylesheets/components/Select.scss
index 1f465aff7b..dcdb70342e 100644
--- a/stylesheets/components/Select.scss
+++ b/stylesheets/components/Select.scss
@@ -1,14 +1,17 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-select {
   position: relative;
 
   select {
-    @include font-body-2;
+    @include mixins.font-body-2;
     -webkit-appearance: none;
     border-radius: 4px;
-    border: 1px solid $color-gray-25;
+    border: 1px solid variables.$color-gray-25;
     cursor: pointer;
     height: 40px;
     min-width: 124px;
@@ -18,15 +21,15 @@
     text-overflow: ellipsis;
     width: 100%;
 
-    @include dark-theme {
-      background-color: $color-gray-90;
-      border-color: $color-gray-60;
-      color: $color-gray-05;
+    @include mixins.dark-theme {
+      background-color: variables.$color-gray-90;
+      border-color: variables.$color-gray-60;
+      color: variables.$color-gray-05;
     }
 
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       &:focus {
-        border: 3px solid $color-ultramarine;
+        border: 3px solid variables.$color-ultramarine;
         line-height: 14px;
         padding-inline-start: 10px;
       }
@@ -42,17 +45,17 @@
     inset-inline-end: 8px;
     top: 11px;
     width: 16px;
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/dropdown/dropdown-compact-light.svg',
-        $color-gray-60
+        variables.$color-gray-60
       );
     }
 
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/dropdown/dropdown-compact-light.svg',
-        $color-gray-15
+        variables.$color-gray-15
       );
     }
   }
diff --git a/stylesheets/components/SelectModeActions.scss b/stylesheets/components/SelectModeActions.scss
index 6d2d9c0133..67c607bb56 100644
--- a/stylesheets/components/SelectModeActions.scss
+++ b/stylesheets/components/SelectModeActions.scss
@@ -1,6 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .SelectModeActions {
   display: flex;
   align-items: center;
@@ -12,12 +15,12 @@
   flex: 1;
   padding-block: 17px;
   padding-inline: 10px;
-  @include font-body-1;
-  @include light-theme() {
-    color: $color-gray-60;
+  @include mixins.font-body-1;
+  @include mixins.light-theme() {
+    color: variables.$color-gray-60;
   }
-  @include dark-theme() {
-    color: $color-gray-25;
+  @include mixins.dark-theme() {
+    color: variables.$color-gray-25;
   }
 }
 
@@ -32,31 +35,34 @@
   display: block;
   width: 20px;
   height: 20px;
-  @include light-theme {
-    color: $color-gray-75;
+  @include mixins.light-theme {
+    color: variables.$color-gray-75;
   }
-  @include dark-theme {
-    color: $color-gray-15;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-15;
   }
 
   .SelectModeActions__button--disabled & {
-    @include light-theme {
-      color: $color-gray-25;
+    @include mixins.light-theme {
+      color: variables.$color-gray-25;
     }
-    @include dark-theme {
-      color: $color-gray-60;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-60;
     }
   }
 }
 
 .SelectModeActions__icon--exitSelectMode {
-  @include color-svg('../images/icons/v3/x/x.svg', currentColor);
+  @include mixins.color-svg('../images/icons/v3/x/x.svg', currentColor);
 }
 
 .SelectModeActions__icon--forwardSelectedMessages {
-  @include color-svg('../images/icons/v3/forward/forward.svg', currentColor);
+  @include mixins.color-svg(
+    '../images/icons/v3/forward/forward.svg',
+    currentColor
+  );
 }
 
 .SelectModeActions__icon--deleteSelectedMessages {
-  @include color-svg('../images/icons/v3/trash/trash.svg', currentColor);
+  @include mixins.color-svg('../images/icons/v3/trash/trash.svg', currentColor);
 }
diff --git a/stylesheets/components/SendStoryModal.scss b/stylesheets/components/SendStoryModal.scss
index a34ddad2f5..307b7e0927 100644
--- a/stylesheets/components/SendStoryModal.scss
+++ b/stylesheets/components/SendStoryModal.scss
@@ -1,6 +1,9 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .SendStoryModal {
   &__body {
     // force
@@ -60,13 +63,18 @@
       padding-block: 5px;
       padding-inline: 10px;
       &::before {
-        @include color-svg('../images/icons/v3/plus/plus.svg', $color-white);
-        content: '';
-        height: 16px;
-        width: 16px;
-        margin-inline-end: 8px;
-        display: inline-block;
-        vertical-align: text-bottom;
+        @include mixins.color-svg(
+          '../images/icons/v3/plus/plus.svg',
+          variables.$color-white
+        );
+        & {
+          content: '';
+          height: 16px;
+          width: 16px;
+          margin-inline-end: 8px;
+          display: inline-block;
+          vertical-align: text-bottom;
+        }
       }
     }
 
@@ -82,40 +90,54 @@
       }
 
       &--description {
-        color: $color-gray-25;
+        color: variables.$color-gray-25;
       }
     }
   }
 
   &__icon {
     &--delete {
-      @include color-svg('../images/icons/v3/trash/trash.svg', $color-white);
-      height: 14px;
-      width: 14px;
+      @include mixins.color-svg(
+        '../images/icons/v3/trash/trash.svg',
+        variables.$color-white
+      );
+      & {
+        height: 14px;
+        width: 14px;
+      }
     }
 
     &--custom {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/stories/stories.svg',
-        $color-white
+        variables.$color-white
       );
-      height: 16px;
-      width: 16px;
+      & {
+        height: 16px;
+        width: 16px;
+      }
     }
 
     &--group {
-      @include color-svg('../images/icons/v3/group/group.svg', $color-white);
-      height: 16px;
-      width: 16px;
+      @include mixins.color-svg(
+        '../images/icons/v3/group/group.svg',
+        variables.$color-white
+      );
+      & {
+        height: 16px;
+        width: 16px;
+      }
     }
 
     &--settings {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/settings/settings.svg',
-        $color-white
+        variables.$color-white
       );
-      height: 14px;
-      width: 14px;
+      & {
+        height: 14px;
+        width: 14px;
+      }
     }
   }
 
@@ -152,14 +174,14 @@
     }
 
     &__name {
-      @include font-body-1-bold;
+      @include mixins.font-body-1-bold;
       font-weight: 400;
     }
 
     &__description {
-      @include font-body-2;
+      @include mixins.font-body-2;
       font-size: 12px;
-      color: $color-gray-25;
+      color: variables.$color-gray-25;
     }
 
     &__checkbox {
@@ -173,19 +195,19 @@
       position: absolute;
       width: 0;
 
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus {
           &::before {
-            border-color: $color-ultramarine;
+            border-color: variables.$color-ultramarine;
           }
           outline: none;
         }
       }
 
       &::before {
-        @include rounded-corners;
+        @include mixins.rounded-corners;
         background: inherit;
-        border: 1.5px solid $color-gray-60;
+        border: 1.5px solid variables.$color-gray-60;
         content: '';
         display: block;
         height: 20px;
@@ -195,12 +217,12 @@
 
       &:checked {
         &::before {
-          background: $color-ultramarine;
-          border: 1.5px solid $color-ultramarine;
+          background: variables.$color-ultramarine;
+          border: 1.5px solid variables.$color-ultramarine;
         }
 
         &::after {
-          border: solid $color-white;
+          border: solid variables.$color-white;
           border-width: 0 2px 2px 0;
           content: '';
           display: block;
@@ -216,8 +238,8 @@
   }
 
   &__selected-lists {
-    @include font-body-2;
-    color: $color-gray-15;
+    @include mixins.font-body-2;
+    color: variables.$color-gray-15;
     padding-inline-end: 16px;
     user-select: none;
     flex: 1;
@@ -227,46 +249,60 @@
   }
 
   &__ok {
-    @include button-reset;
-    @include rounded-corners;
-    align-items: center;
-    background: $color-ultramarine;
-    display: flex;
-    height: 32px;
-    justify-content: center;
-    width: 32px;
+    @include mixins.button-reset;
+    & {
+      @include mixins.rounded-corners;
+      align-items: center;
+      background: variables.$color-ultramarine;
+      display: flex;
+      height: 32px;
+      justify-content: center;
+      width: 32px;
+    }
 
     &::disabled {
-      background: $color-gray-60;
+      background: variables.$color-gray-60;
     }
 
     &::after {
-      @include color-svg('../images/icons/v3/check/check.svg', $color-white);
-      content: '';
-      height: 18px;
-      width: 18px;
+      @include mixins.color-svg(
+        '../images/icons/v3/check/check.svg',
+        variables.$color-white
+      );
+      & {
+        content: '';
+        height: 18px;
+        width: 18px;
+      }
     }
   }
 
   &__send {
-    @include button-reset;
-    @include rounded-corners;
-    align-items: center;
-    background: $color-ultramarine;
-    display: flex;
-    height: 32px;
-    justify-content: center;
-    width: 32px;
+    @include mixins.button-reset;
+    & {
+      @include mixins.rounded-corners;
+      align-items: center;
+      background: variables.$color-ultramarine;
+      display: flex;
+      height: 32px;
+      justify-content: center;
+      width: 32px;
+    }
 
     &::disabled {
-      background: $color-gray-60;
+      background: variables.$color-gray-60;
     }
 
     &::after {
-      @include color-svg('../images/icons/v3/send/send-fill.svg', $color-white);
-      content: '';
-      height: 18px;
-      width: 18px;
+      @include mixins.color-svg(
+        '../images/icons/v3/send/send-fill.svg',
+        variables.$color-white
+      );
+      & {
+        content: '';
+        height: 18px;
+        width: 18px;
+      }
     }
   }
 
diff --git a/stylesheets/components/ShortcutGuide.scss b/stylesheets/components/ShortcutGuide.scss
index 435163710d..371b86db33 100644
--- a/stylesheets/components/ShortcutGuide.scss
+++ b/stylesheets/components/ShortcutGuide.scss
@@ -1,6 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-shortcut-guide {
   border-radius: 4px;
   padding: 16px;
@@ -12,18 +15,18 @@
   display: flex;
   flex-direction: column;
 
-  @include popper-shadow;
+  @include mixins.popper-shadow;
 
-  @include light-theme {
-    color: $color-gray-90;
-    background-color: $color-white;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
+    background-color: variables.$color-white;
   }
-  @include dark-theme {
-    color: $color-gray-05;
-    background-color: $color-gray-75;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
+    background-color: variables.$color-gray-75;
 
     ::-webkit-scrollbar-thumb {
-      border: 2px solid $color-gray-75;
+      border: 2px solid variables.$color-gray-75;
     }
   }
 }
@@ -37,38 +40,48 @@
 }
 
 .module-shortcut-guide__header-text {
-  @include font-title-2;
+  @include mixins.font-title-2;
 
   flex-grow: 1;
 }
 .module-shortcut-guide__header-close {
-  @include button-reset;
-
-  height: 24px;
-  width: 24px;
-
-  @include light-theme {
-    @include color-svg('../images/icons/v3/x/x.svg', $color-gray-60);
+  @include mixins.button-reset;
+  & {
+    height: 24px;
+    width: 24px;
   }
-  @include dark-theme {
-    @include color-svg('../images/icons/v3/x/x.svg', $color-gray-05);
+
+  @include mixins.light-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/x/x.svg',
+      variables.$color-gray-60
+    );
+  }
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/x/x.svg',
+      variables.$color-gray-05
+    );
   }
 
   &:focus {
-    @include keyboard-mode {
-      @include color-svg('../images/icons/v3/x/x.svg', $color-ultramarine);
-    }
-    @include dark-keyboard-mode {
-      @include color-svg(
+    @include mixins.keyboard-mode {
+      @include mixins.color-svg(
         '../images/icons/v3/x/x.svg',
-        $color-ultramarine-light
+        variables.$color-ultramarine
+      );
+    }
+    @include mixins.dark-keyboard-mode {
+      @include mixins.color-svg(
+        '../images/icons/v3/x/x.svg',
+        variables.$color-ultramarine-light
       );
     }
   }
 }
 
 .module-shortcut-guide__section-header {
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
 
   margin-bottom: 8px;
 }
@@ -95,19 +108,19 @@
   outline: none;
 
   &:focus {
-    @include keyboard-mode {
-      background-color: $color-gray-05;
+    @include mixins.keyboard-mode {
+      background-color: variables.$color-gray-05;
     }
-    @include dark-keyboard-mode {
-      background-color: $color-gray-90;
+    @include mixins.dark-keyboard-mode {
+      background-color: variables.$color-gray-90;
     }
   }
 
-  @include light-theme {
-    border-bottom: 1px solid $color-gray-05;
+  @include mixins.light-theme {
+    border-bottom: 1px solid variables.$color-gray-05;
   }
-  @include dark-theme {
-    border-bottom: 1px solid $color-gray-90;
+  @include mixins.dark-theme {
+    border-bottom: 1px solid variables.$color-gray-90;
   }
 }
 
@@ -137,11 +150,11 @@
   height: 30px;
   text-align: center;
 
-  @include light-theme {
-    border: 1px solid $color-gray-15;
+  @include mixins.light-theme {
+    border: 1px solid variables.$color-gray-15;
   }
-  @include dark-theme {
-    border: 1px solid $color-gray-90;
+  @include mixins.dark-theme {
+    border: 1px solid variables.$color-gray-90;
   }
 }
 
@@ -164,8 +177,8 @@
   flex-direction: row;
   align-items: center;
 
-  background-color: $color-black-alpha-40;
-  z-index: $z-index-above-context-menu;
+  background-color: variables.$color-black-alpha-40;
+  z-index: variables.$z-index-above-context-menu;
 }
 
 .module-shortcut-guide-container {
diff --git a/stylesheets/components/SignalConnectionsModal.scss b/stylesheets/components/SignalConnectionsModal.scss
index fb3dbe7f7c..bd137776df 100644
--- a/stylesheets/components/SignalConnectionsModal.scss
+++ b/stylesheets/components/SignalConnectionsModal.scss
@@ -1,33 +1,38 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .SignalConnectionsModal {
   padding-inline: 8px;
   padding-block-end: 20px;
 
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 
   &__icon {
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/connections/connections-display.svg',
-        $color-gray-90
+        variables.$color-gray-90
       );
     }
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/connections/connections-display.svg',
-        $color-gray-25
+        variables.$color-gray-25
       );
     }
-    display: block;
-    height: 48px;
-    margin-block: 0;
-    margin-inline: auto;
-    margin-bottom: 24px;
-    width: 48px;
+    & {
+      display: block;
+      height: 48px;
+      margin-block: 0;
+      margin-inline: auto;
+      margin-bottom: 24px;
+      width: 48px;
+    }
   }
 
   &__list {
@@ -52,11 +57,11 @@
       height: 14px;
       border-radius: 6px;
 
-      @include light-theme {
-        background-color: $color-gray-20;
+      @include mixins.light-theme {
+        background-color: variables.$color-gray-20;
       }
-      @include dark-theme {
-        background-color: $color-gray-25;
+      @include mixins.dark-theme {
+        background-color: variables.$color-gray-25;
       }
     }
   }
diff --git a/stylesheets/components/Slider.scss b/stylesheets/components/Slider.scss
index d94897ba7a..1702ae63d9 100644
--- a/stylesheets/components/Slider.scss
+++ b/stylesheets/components/Slider.scss
@@ -1,17 +1,19 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../variables';
+
 .Slider {
-  background-color: $color-gray-15;
+  background-color: variables.$color-gray-15;
   cursor: pointer;
   height: 8px;
   position: relative;
   width: 100%;
 
   &__handle {
-    background-color: $color-gray-90;
+    background-color: variables.$color-gray-90;
     border-radius: 16px;
-    border: 1px solid $color-white;
+    border: 1px solid variables.$color-white;
     cursor: move;
     height: 16px;
     margin-inline-start: -4px;
diff --git a/stylesheets/components/SpinnerV2.scss b/stylesheets/components/SpinnerV2.scss
index 9b5e3bfe63..69b05f4066 100644
--- a/stylesheets/components/SpinnerV2.scss
+++ b/stylesheets/components/SpinnerV2.scss
@@ -1,12 +1,14 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../variables';
+
 .SpinnerV2 {
   animation: SpinnerV2-rotate 2s linear infinite;
 }
 
 .SpinnerV2__Path {
-  stroke: $color-gray-15;
+  stroke: variables.$color-gray-15;
   stroke-linecap: round;
   animation: SpinnerV2-dash 1.5s ease-in-out infinite;
 }
diff --git a/stylesheets/components/StagedLinkPreview.scss b/stylesheets/components/StagedLinkPreview.scss
index f5d7ed2525..8801069e30 100644
--- a/stylesheets/components/StagedLinkPreview.scss
+++ b/stylesheets/components/StagedLinkPreview.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-staged-link-preview {
   position: relative;
   display: flex;
@@ -11,7 +14,7 @@
 
   &__no-image {
     align-items: center;
-    background-color: $color-white;
+    background-color: variables.$color-white;
     border-radius: 14px;
     display: flex;
     flex-direction: row;
@@ -21,10 +24,15 @@
     width: 74px;
 
     &::after {
-      @include color-svg('../images/icons/v3/link/link.svg', $color-black);
-      content: '';
-      height: 44px;
-      width: 44px;
+      @include mixins.color-svg(
+        '../images/icons/v3/link/link.svg',
+        variables.$color-black
+      );
+      & {
+        content: '';
+        height: 44px;
+        width: 44px;
+      }
     }
   }
 }
@@ -37,11 +45,11 @@
   flex-grow: 1;
   flex-shrink: 1;
 
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 
@@ -62,22 +70,24 @@
   }
 }
 .module-staged-link-preview__title {
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
 
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: variables.$color-gray-90;
   }
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
+  & {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
 }
 .module-staged-link-preview__description {
-  @include font-body-1;
+  @include mixins.font-body-1;
 
   overflow: hidden;
   display: -webkit-box;
@@ -85,17 +95,17 @@
   -webkit-box-orient: vertical;
 }
 .module-staged-link-preview__footer {
-  @include font-body-2;
+  @include mixins.font-body-2;
 
   display: flex;
   flex-flow: row wrap;
   align-items: center;
 
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 
   > *:not(:first-child) {
@@ -109,44 +119,55 @@
   }
 }
 .module-staged-link-preview__location {
-  @include font-body-2;
+  @include mixins.font-body-2;
 
   text-transform: lowercase;
 
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 }
 .module-staged-link-preview__close-button {
-  @include button-reset;
+  @include mixins.button-reset;
 
-  position: absolute;
-  top: 0px;
-  inset-inline-end: 0px;
+  & {
+    position: absolute;
+    top: 0px;
+    inset-inline-end: 0px;
 
-  height: 16px;
-  width: 16px;
-
-  @include light-theme {
-    @include color-svg('../images/icons/v3/x/x.svg', $color-gray-60);
+    height: 16px;
+    width: 16px;
   }
-  @include keyboard-mode {
+
+  @include mixins.light-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/x/x.svg',
+      variables.$color-gray-60
+    );
+  }
+  @include mixins.keyboard-mode {
     &:focus {
-      @include color-svg('../images/icons/v3/x/x.svg', $color-ultramarine);
+      @include mixins.color-svg(
+        '../images/icons/v3/x/x.svg',
+        variables.$color-ultramarine
+      );
     }
   }
 
-  @include dark-theme {
-    @include color-svg('../images/icons/v3/x/x.svg', $color-gray-25);
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/x/x.svg',
+      variables.$color-gray-25
+    );
   }
-  @include dark-keyboard-mode {
+  @include mixins.dark-keyboard-mode {
     &:focus {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/x/x.svg',
-        $color-ultramarine-light
+        variables.$color-ultramarine-light
       );
     }
   }
diff --git a/stylesheets/components/StickerManager.scss b/stylesheets/components/StickerManager.scss
index 053e7e04f1..fba958f930 100644
--- a/stylesheets/components/StickerManager.scss
+++ b/stylesheets/components/StickerManager.scss
@@ -1,6 +1,9 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-sticker-manager {
   padding-block: 0;
   padding-inline: 16px;
@@ -14,23 +17,23 @@
   line-height: 18px;
   padding-inline-start: 8px;
 
-  @include light-theme() {
-    color: $color-gray-60;
+  @include mixins.light-theme() {
+    color: variables.$color-gray-60;
   }
 
-  @include dark-theme() {
-    color: $color-gray-25;
+  @include mixins.dark-theme() {
+    color: variables.$color-gray-25;
   }
 
   &--heading {
-    @include font-body-1-bold;
+    @include mixins.font-body-1-bold;
 
-    @include light-theme() {
-      color: $color-gray-90;
+    @include mixins.light-theme() {
+      color: variables.$color-gray-90;
     }
 
-    @include dark-theme() {
-      color: $color-gray-05;
+    @include mixins.dark-theme() {
+      color: variables.$color-gray-05;
     }
   }
 }
@@ -42,14 +45,14 @@
   height: 64px;
   border-radius: 8px;
 
-  @include light-theme {
-    background: $color-gray-02;
-    color: $color-gray-60;
+  @include mixins.light-theme {
+    background: variables.$color-gray-02;
+    color: variables.$color-gray-60;
   }
 
-  @include dark-theme {
-    background: $color-gray-90;
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    background: variables.$color-gray-90;
+    color: variables.$color-gray-25;
   }
 }
 
@@ -57,7 +60,7 @@
   height: 14px;
   width: 14px;
   border-radius: 8px;
-  background-color: $color-white;
+  background-color: variables.$color-white;
   display: inline-block;
   vertical-align: middle;
   margin-inline-start: 5px;
@@ -73,33 +76,35 @@
     top: -1px;
     inset-inline-start: -1px;
 
-    @include light-theme {
-      @include color-svg(
+    @include mixins.light-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/check/check-circle-fill.svg',
-        $color-accent-blue
+        variables.$color-accent-blue
       );
     }
 
-    @include dark-theme {
-      @include color-svg(
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
         '../images/icons/v3/check/check-circle-fill.svg',
-        $color-accent-blue
+        variables.$color-accent-blue
       );
     }
   }
 }
 
 .module-sticker-manager__pack-row {
-  @include button-reset;
+  @include mixins.button-reset;
 
-  display: flex;
-  flex-direction: row;
-  padding: 16px;
-  padding-inline-start: 8px;
+  & {
+    display: flex;
+    flex-direction: row;
+    padding: 16px;
+    padding-inline-start: 8px;
+  }
 
-  @include keyboard-mode {
+  @include mixins.keyboard-mode {
     &:focus {
-      box-shadow: 0px 0px 0px 2px $color-ultramarine;
+      box-shadow: 0px 0px 0px 2px variables.$color-ultramarine;
     }
   }
 
@@ -111,7 +116,7 @@
   &__cover-placeholder {
     width: 48px;
     height: 48px;
-    background: $color-gray-05;
+    background: variables.$color-gray-05;
   }
 
   &__meta {
@@ -131,12 +136,12 @@
     &__author {
       flex: 1;
 
-      @include light-theme() {
-        color: $color-gray-45;
+      @include mixins.light-theme() {
+        color: variables.$color-gray-45;
       }
 
-      @include dark-theme() {
-        color: $color-gray-25;
+      @include mixins.dark-theme() {
+        color: variables.$color-gray-25;
       }
     }
 
@@ -160,16 +165,16 @@
           display: block;
           min-width: 24px;
           min-height: 24px;
-          @include light-theme {
-            @include color-svg(
+          @include mixins.light-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/more/more.svg',
-              $color-gray-60
+              variables.$color-gray-60
             );
           }
-          @include dark-theme {
-            @include color-svg(
+          @include mixins.dark-theme {
+            @include mixins.color-svg(
               '../images/icons/v3/more/more.svg',
-              $color-gray-25
+              variables.$color-gray-25
             );
           }
         }
@@ -181,12 +186,12 @@
 .module-sticker-manager__install-button {
   background: none;
   border: 0;
-  color: $color-gray-90;
+  color: variables.$color-gray-90;
 
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
 
   height: 24px;
-  background: $color-gray-05;
+  background: variables.$color-gray-05;
   border-radius: 12px;
   display: flex;
   justify-content: center;
@@ -194,23 +199,23 @@
   padding-block: 0;
   padding-inline: 12px;
 
-  @include dark-theme {
-    color: $color-gray-05;
-    background: $color-gray-75;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
+    background: variables.$color-gray-75;
   }
 
-  @include mouse-mode {
+  @include mixins.mouse-mode {
     outline: none;
   }
 
   &--blue {
-    @include light-theme {
-      background: $color-ultramarine;
-      color: $color-white;
+    @include mixins.light-theme {
+      background: variables.$color-ultramarine;
+      color: variables.$color-white;
     }
-    @include dark-theme {
-      background: $color-ultramarine-light;
-      color: $color-white;
+    @include mixins.dark-theme {
+      background: variables.$color-ultramarine-light;
+      color: variables.$color-white;
     }
   }
 }
@@ -220,7 +225,7 @@
     width: fit-content;
   }
   &__error {
-    color: $color-accent-red;
+    color: variables.$color-accent-red;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -230,7 +235,7 @@
     padding-block: 0 30px;
     padding-inline: 80px;
 
-    @include font-body-1-bold;
+    @include mixins.font-body-1-bold;
   }
 
   &__sticker-grid {
@@ -255,12 +260,12 @@
       &--placeholder {
         border-radius: 4px;
 
-        @include light-theme() {
-          background: $color-gray-05;
+        @include mixins.light-theme() {
+          background: variables.$color-gray-05;
         }
 
-        @include dark-theme() {
-          background: $color-gray-60;
+        @include mixins.dark-theme() {
+          background: variables.$color-gray-60;
         }
       }
     }
@@ -285,14 +290,14 @@
       overflow: hidden;
       text-overflow: ellipsis;
 
-      @include font-body-1-bold;
+      @include mixins.font-body-1-bold;
 
-      @include light-theme {
-        color: $color-gray-90;
+      @include mixins.light-theme {
+        color: variables.$color-gray-90;
       }
 
-      @include dark-theme {
-        color: $color-gray-05;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-05;
       }
     }
 
@@ -302,12 +307,12 @@
       white-space: nowrap;
       text-overflow: ellipsis;
 
-      @include light-theme {
-        color: $color-gray-45;
+      @include mixins.light-theme {
+        color: variables.$color-gray-45;
       }
 
-      @include dark-theme {
-        color: $color-gray-25;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-25;
       }
     }
 
diff --git a/stylesheets/components/Stories.scss b/stylesheets/components/Stories.scss
index 6a42a50a8a..638cfcd2bf 100644
--- a/stylesheets/components/Stories.scss
+++ b/stylesheets/components/Stories.scss
@@ -1,5 +1,8 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
+
+@use '../mixins';
+@use '../variables';
 .Stories {
   display: flex;
   height: 100vh;
@@ -8,12 +11,12 @@
   top: 0;
   user-select: none;
   width: 100%;
-  z-index: $z-index-stories;
-  @include light-theme {
-    background: $color-white;
+  z-index: variables.$z-index-stories;
+  @include mixins.light-theme {
+    background: variables.$color-white;
   }
-  @include dark-theme {
-    background: $color-gray-95;
+  @include mixins.dark-theme {
+    background: variables.$color-gray-95;
   }
 
   &__pane {
@@ -22,13 +25,13 @@
     height: 100%;
     width: 380px;
     padding-top: calc(2px + var(--title-bar-drag-area-height));
-    @include light-theme {
-      background: $color-gray-04;
-      border-inline-end: 1px solid $color-black-alpha-16;
+    @include mixins.light-theme {
+      background: variables.$color-gray-04;
+      border-inline-end: 1px solid variables.$color-black-alpha-16;
     }
-    @include dark-theme {
-      background: $color-gray-80;
-      border-inline-end: 1px solid $color-white-alpha-16;
+    @include mixins.dark-theme {
+      background: variables.$color-gray-80;
+      border-inline-end: 1px solid variables.$color-white-alpha-16;
     }
 
     &__add-story__container {
@@ -36,11 +39,11 @@
       border-radius: 4px;
       &:hover,
       &:focus {
-        @include light-theme {
-          background-color: $color-black-alpha-06;
+        @include mixins.light-theme {
+          background-color: variables.$color-black-alpha-06;
         }
-        @include dark-theme {
-          background-color: $color-white-alpha-06;
+        @include mixins.dark-theme {
+          background-color: variables.$color-white-alpha-06;
         }
       }
     }
@@ -48,16 +51,22 @@
     &__add-story__button {
       height: 20px;
       width: 20px;
-      @include light-theme {
-        @include color-svg('../images/icons/v3/plus/plus.svg', $color-black);
+      @include mixins.light-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/plus/plus.svg',
+          variables.$color-black
+        );
       }
-      @include dark-theme {
-        @include color-svg('../images/icons/v3/plus/plus.svg', $color-gray-15);
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/plus/plus.svg',
+          variables.$color-gray-15
+        );
       }
 
       &:focus {
-        @include keyboard-mode {
-          background-color: $color-ultramarine;
+        @include mixins.keyboard-mode {
+          background-color: variables.$color-ultramarine;
         }
       }
     }
@@ -75,13 +84,13 @@
       }
 
       &--title {
-        @include font-title-medium;
+        @include mixins.font-title-medium;
         flex: 1;
-        @include light-theme {
-          color: $color-black;
+        @include mixins.light-theme {
+          color: variables.$color-black;
         }
-        @include dark-theme {
-          color: $color-gray-05;
+        @include mixins.dark-theme {
+          color: variables.$color-gray-05;
         }
       }
 
@@ -92,7 +101,7 @@
     }
 
     &__list {
-      @include NavTabs__Scroller;
+      @include mixins.NavTabs__Scroller;
       display: flex;
       flex-direction: column;
       flex: 1;
@@ -100,18 +109,20 @@
       padding-inline: 16px;
 
       &--empty {
-        @include font-body-1;
+        @include mixins.font-body-1;
         align-items: center;
-        @include light-theme() {
-          color: $color-gray-60;
+        @include mixins.light-theme() {
+          color: variables.$color-gray-60;
         }
-        @include dark-theme() {
-          color: $color-gray-45;
+        @include mixins.dark-theme() {
+          color: variables.$color-gray-45;
+        }
+        & {
+          display: flex;
+          flex: 1;
+          flex-direction: column;
+          justify-content: center;
         }
-        display: flex;
-        flex: 1;
-        flex-direction: column;
-        justify-content: center;
       }
     }
   }
@@ -125,27 +136,27 @@
     opacity: 0.7;
     padding-block: 78px 28px;
 
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
 
     &__icon {
       margin-bottom: 12px;
       width: 40px;
       height: 40px;
-      @include light-theme {
-        @include color-svg(
+      @include mixins.light-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/stories/stories-display-bold.svg',
-          $color-gray-60
+          variables.$color-gray-60
         );
       }
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/stories/stories-display-bold.svg',
-          $color-gray-25
+          variables.$color-gray-25
         );
       }
     }
@@ -160,30 +171,38 @@
 
       width: 16px;
       height: 16px;
-      @include light-theme {
-        @include color-svg('../images/icons/v3/plus/plus.svg', $color-gray-60);
+      @include mixins.light-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/plus/plus.svg',
+          variables.$color-gray-60
+        );
       }
-      @include dark-theme {
-        @include color-svg('../images/icons/v3/plus/plus.svg', $color-gray-25);
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/plus/plus.svg',
+          variables.$color-gray-25
+        );
       }
     }
   }
 
   &__hidden-stories {
-    @include button-reset;
-    @include font-body-1-bold;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-    padding-block: 12px;
-    padding-inline: 24px;
-    position: relative;
-    width: 100%;
-    @include light-theme {
-      color: $color-black;
+    @include mixins.button-reset;
+    & {
+      @include mixins.font-body-1-bold;
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      padding-block: 12px;
+      padding-inline: 24px;
+      position: relative;
+      width: 100%;
     }
-    @include dark-theme {
-      color: $color-gray-05;
+    @include mixins.light-theme {
+      color: variables.$color-black;
+    }
+    @include mixins.dark-theme {
+      color: variables.$color-gray-05;
     }
 
     &::after {
@@ -194,16 +213,16 @@
 
     &--collapsed {
       &::after {
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-right.svg',
-            $color-black
+            variables.$color-black
           );
         }
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-right.svg',
-            $color-gray-05
+            variables.$color-gray-05
           );
         }
       }
@@ -211,16 +230,16 @@
 
     &--expanded {
       &::after {
-        @include light-theme {
-          @include color-svg(
+        @include mixins.light-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-down.svg',
-            $color-black
+            variables.$color-black
           );
         }
-        @include dark-theme {
-          @include color-svg(
+        @include mixins.dark-theme {
+          @include mixins.color-svg(
             '../images/icons/v3/chevron/chevron-down.svg',
-            $color-gray-05
+            variables.$color-gray-05
           );
         }
       }
@@ -232,10 +251,16 @@
   display: block;
   width: 20px;
   height: 20px;
-  @include light-theme {
-    @include color-svg('../images/icons/v3/more/more.svg', $color-black);
+  @include mixins.light-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/more/more.svg',
+      variables.$color-black
+    );
   }
-  @include dark-theme {
-    @include color-svg('../images/icons/v3/more/more.svg', $color-gray-15);
+  @include mixins.dark-theme {
+    @include mixins.color-svg(
+      '../images/icons/v3/more/more.svg',
+      variables.$color-gray-15
+    );
   }
 }
diff --git a/stylesheets/components/StoriesSettingsModal.scss b/stylesheets/components/StoriesSettingsModal.scss
index 8218c489af..c8f98b99f3 100644
--- a/stylesheets/components/StoriesSettingsModal.scss
+++ b/stylesheets/components/StoriesSettingsModal.scss
@@ -1,6 +1,9 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .StoriesSettingsModal {
   &__width-container {
     max-width: 420px;
@@ -33,51 +36,55 @@
       position: absolute;
       width: 0;
 
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus {
           &::before {
-            border-color: $color-ultramarine;
+            border-color: variables.$color-ultramarine;
           }
           outline: none;
         }
       }
 
       &::before {
-        @include rounded-corners;
+        @include mixins.rounded-corners;
         background: inherit;
         border: 1.5px solid;
-        @include light-theme {
-          border-color: $color-gray-25;
+        @include mixins.light-theme {
+          border-color: variables.$color-gray-25;
         }
-        @include dark-theme {
-          border-color: $color-gray-60;
+        @include mixins.dark-theme {
+          border-color: variables.$color-gray-60;
+        }
+        & {
+          content: '';
+          display: block;
+          height: 20px;
+          position: absolute;
+          width: 20px;
         }
-        content: '';
-        display: block;
-        height: 20px;
-        position: absolute;
-        width: 20px;
       }
 
       &:checked {
         &::before {
           -webkit-mask: none;
-          background: $color-ultramarine;
-          border: 1.5px solid $color-ultramarine;
+          background: variables.$color-ultramarine;
+          border: 1.5px solid variables.$color-ultramarine;
         }
       }
     }
   }
 
   &__list {
-    @include button-reset;
-    @include font-body-1;
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-    width: 100%;
-    padding-block: 8px;
-    padding-inline: 0;
+    @include mixins.button-reset;
+    & {
+      @include mixins.font-body-1;
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+      padding-block: 8px;
+      padding-inline: 0;
+    }
 
     &--no-pointer {
       cursor: inherit;
@@ -85,12 +92,12 @@
 
     &__viewers {
       display: flex;
-      @include font-body-2;
-      @include light-theme {
-        color: $color-gray-60;
+      @include mixins.font-body-2;
+      @include mixins.light-theme {
+        color: variables.$color-gray-60;
       }
-      @include dark-theme {
-        color: $color-gray-25;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-25;
       }
     }
 
@@ -101,28 +108,28 @@
 
     &__avatar {
       @mixin avatar($svg) {
-        @include rounded-corners;
+        @include mixins.rounded-corners;
         display: inline-flex;
         justify-content: center;
         align-items: center;
         width: 32px;
         height: 32px;
-        @include light-theme {
-          background: $color-gray-15;
+        @include mixins.light-theme {
+          background: variables.$color-gray-15;
         }
-        @include dark-theme {
-          background: $color-gray-75;
+        @include mixins.dark-theme {
+          background: variables.$color-gray-75;
         }
 
         &::after {
           content: '';
           height: 20px;
           width: 20px;
-          @include light-theme {
-            @include color-svg($svg, $color-black);
+          @include mixins.light-theme {
+            @include mixins.color-svg($svg, variables.$color-black);
           }
-          @include dark-theme {
-            @include color-svg($svg, $color-white);
+          @include mixins.dark-theme {
+            @include mixins.color-svg($svg, variables.$color-white);
           }
         }
       }
@@ -146,21 +153,23 @@
     }
 
     &__delete {
-      @include button-reset;
-      height: 20px;
-      width: 20px;
-      visibility: hidden;
+      @include mixins.button-reset;
+      & {
+        height: 20px;
+        width: 20px;
+        visibility: hidden;
+      }
 
-      @include light-theme {
-        @include color-svg(
+      @include mixins.light-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/trash/trash.svg',
-          $color-gray-45
+          variables.$color-gray-45
         );
       }
-      @include dark-theme {
-        @include color-svg(
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
           '../images/icons/v3/trash/trash.svg',
-          $color-gray-25
+          variables.$color-gray-25
         );
       }
     }
@@ -174,11 +183,11 @@
     width: 100%;
     border: 0 solid;
     border-top-width: 1px;
-    @include light-theme {
-      border-color: $color-gray-15;
+    @include mixins.light-theme {
+      border-color: variables.$color-gray-15;
     }
-    @include dark-theme {
-      border-color: $color-gray-65;
+    @include mixins.dark-theme {
+      border-color: variables.$color-gray-65;
     }
   }
 
@@ -188,30 +197,30 @@
   }
 
   &__visibility {
-    @include font-subtitle;
+    @include mixins.font-subtitle;
     margin-top: 10px;
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
   }
 
   &__title {
-    @include font-body-1-bold;
+    @include mixins.font-body-1-bold;
     margin-top: 32px;
   }
 
   &__description {
-    @include font-subtitle;
+    @include mixins.font-subtitle;
     margin-top: 0px;
     margin-bottom: 16px;
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
   }
 
@@ -222,28 +231,32 @@
 
   &__listHeader__title {
     flex: 1;
-    @include font-body-1-bold;
+    @include mixins.font-body-1-bold;
     margin-inline-end: 8px;
   }
 
   &__delete-list {
-    @include button-reset;
-    align-items: center;
-    color: $color-accent-red;
-    display: flex;
-    padding-block: 8px;
-    padding-inline: 0;
-    width: 100%;
+    @include mixins.button-reset;
+    & {
+      align-items: center;
+      color: variables.$color-accent-red;
+      display: flex;
+      padding-block: 8px;
+      padding-inline: 0;
+      width: 100%;
+    }
 
     &::before {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/trash/trash.svg',
-        $color-accent-red
+        variables.$color-accent-red
       );
-      content: '';
-      height: 20px;
-      margin-inline-end: 20px;
-      width: 20px;
+      & {
+        content: '';
+        height: 20px;
+        margin-inline-end: 20px;
+        width: 20px;
+      }
     }
   }
 
@@ -264,11 +277,11 @@
   }
 
   &__checkbox-description {
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
   }
 
@@ -279,21 +292,21 @@
   }
 
   &__disclaimer {
-    @include font-subtitle;
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.font-subtitle;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
 
     &__learn-more {
-      @include button-reset;
-      @include light-theme {
-        color: $color-gray-90;
+      @include mixins.button-reset;
+      @include mixins.light-theme {
+        color: variables.$color-gray-90;
       }
-      @include dark-theme {
-        color: $color-gray-05;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-05;
       }
     }
   }
@@ -306,12 +319,12 @@
 
   &__stories-off-text {
     flex: 1;
-    @include font-subtitle;
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.font-subtitle;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
   }
 }
@@ -325,7 +338,7 @@
   }
 
   &__members_title {
-    @include font-body-1-bold;
+    @include mixins.font-body-1-bold;
   }
 
   &__members_item {
@@ -334,39 +347,43 @@
     align-items: center;
 
     &__name {
-      @include font-body-1;
+      @include mixins.font-body-1;
     }
   }
 
   &__members_help {
-    @include font-body-2;
-    @include light-theme {
-      color: $color-gray-60;
+    @include mixins.font-body-2;
+    @include mixins.light-theme {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme {
-      color: $color-gray-25;
+    @include mixins.dark-theme {
+      color: variables.$color-gray-25;
     }
   }
 
   &__remove_group {
-    @include button-reset;
-    align-items: center;
-    color: $color-accent-red;
-    display: flex;
-    padding-block: 8px;
-    padding-inline: 0;
-    width: 100%;
-    margin-top: 12px;
+    @include mixins.button-reset;
+    & {
+      align-items: center;
+      color: variables.$color-accent-red;
+      display: flex;
+      padding-block: 8px;
+      padding-inline: 0;
+      width: 100%;
+      margin-top: 12px;
+    }
 
     &::before {
-      @include color-svg(
+      @include mixins.color-svg(
         '../images/icons/v3/minus/minus-circle.svg',
-        $color-accent-red
+        variables.$color-accent-red
       );
-      content: '';
-      height: 20px;
-      margin-inline-end: 20px;
-      width: 20px;
+      & {
+        content: '';
+        height: 20px;
+        margin-inline-end: 20px;
+        width: 20px;
+      }
     }
   }
 }
diff --git a/stylesheets/components/StoryCreator.scss b/stylesheets/components/StoryCreator.scss
index b1a0488bfd..527285df42 100644
--- a/stylesheets/components/StoryCreator.scss
+++ b/stylesheets/components/StoryCreator.scss
@@ -1,14 +1,20 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .StoryCreator {
   $tools-height: 44px;
 
   @mixin svg($icon) {
-    @include color-svg('../images/icons/#{$icon}', $color-white);
+    @include mixins.color-svg(
+      '../images/icons/#{$icon}',
+      variables.$color-white
+    );
   }
 
-  background: $color-gray-95;
+  background: variables.$color-gray-95;
   display: flex;
   flex-direction: column;
   width: 100vw;
@@ -17,7 +23,7 @@
   position: absolute;
   top: 0;
   user-select: none;
-  z-index: $z-index-popup-overlay;
+  z-index: variables.$z-index-popup-overlay;
 
   &__container {
     display: flex;
@@ -54,16 +60,18 @@
   }
 
   &__control {
-    @include button-reset;
-    align-items: center;
-    border-radius: 32px;
-    display: inline-flex;
-    height: 32px;
-    justify-content: center;
-    margin-block: 0;
-    margin-inline: 15px;
-    opacity: 1;
-    width: 32px;
+    @include mixins.button-reset;
+    & {
+      align-items: center;
+      border-radius: 32px;
+      display: inline-flex;
+      height: 32px;
+      justify-content: center;
+      margin-block: 0;
+      margin-inline: 15px;
+      opacity: 1;
+      width: 32px;
+    }
 
     &::after {
       content: ' ';
@@ -72,16 +80,22 @@
     }
 
     &--link::after {
-      @include color-svg('../images/icons/v3/link/link.svg', $color-white);
+      @include mixins.color-svg(
+        '../images/icons/v3/link/link.svg',
+        variables.$color-white
+      );
     }
 
     &--text::after {
-      @include color-svg('../images/icons/v2/text-24.svg', $color-white);
+      @include mixins.color-svg(
+        '../images/icons/v2/text-24.svg',
+        variables.$color-white
+      );
     }
 
     &--bg {
-      @include rounded-corners;
-      border: 1.5px solid $color-white;
+      @include mixins.rounded-corners;
+      border: 1.5px solid variables.$color-white;
       display: block;
       height: 24px;
       padding: 2.5px;
@@ -97,18 +111,18 @@
     }
 
     &--selected {
-      background-color: $color-white;
+      background-color: variables.$color-white;
 
       &::after {
-        background-color: $color-black;
+        background-color: variables.$color-black;
       }
     }
 
     &:hover {
-      background-color: $color-gray-80;
+      background-color: variables.$color-gray-80;
 
       &::after {
-        background-color: $color-white;
+        background-color: variables.$color-white;
       }
     }
   }
@@ -136,9 +150,9 @@
 
   &__tools {
     align-items: center;
-    background-color: $color-gray-90;
+    background-color: variables.$color-gray-90;
     border-radius: 10px;
-    color: $color-white;
+    color: variables.$color-white;
     display: flex;
     height: $tools-height;
     justify-content: center;
@@ -154,15 +168,19 @@
     &__button {
       @mixin icon($icon) {
         @include svg($icon);
-        height: 20px;
-        width: 20px;
-        border-radius: 0;
+        & {
+          height: 20px;
+          width: 20px;
+          border-radius: 0;
+        }
       }
 
-      @include button-reset;
-      margin-block: 0;
-      margin-inline: 8px;
-      padding: 8px;
+      @include mixins.button-reset;
+      & {
+        margin-block: 0;
+        margin-inline: 8px;
+        padding: 8px;
+      }
 
       &--bg {
         @include icon('v2/text-effect-on-24.svg');
@@ -210,21 +228,23 @@
   }
 
   &__bg {
-    @include button-reset;
-    @include rounded-corners;
+    @include mixins.button-reset;
+    & {
+      @include mixins.rounded-corners;
 
-    border: 2px solid transparent;
-    height: 24px;
-    margin: 4px;
-    width: 24px;
+      border: 2px solid transparent;
+      height: 24px;
+      margin: 4px;
+      width: 24px;
+    }
 
     &--selected {
-      border: 2px solid $color-white;
+      border: 2px solid variables.$color-white;
     }
   }
 
   &__popper {
-    background: $color-gray-80;
+    background: variables.$color-gray-80;
     border-radius: 10px;
     margin-bottom: 18px;
     padding: 8px;
@@ -233,8 +253,8 @@
     &__arrow {
       border-inline-start: 14px solid transparent;
       border-inline-end: 14px solid transparent;
-      border-top: 14px solid $color-gray-80;
-      @include position-absolute-center-x;
+      border-top: 14px solid variables.$color-gray-80;
+      @include mixins.position-absolute-center-x;
       bottom: -14px;
       height: 0;
       width: 0;
@@ -271,7 +291,7 @@
   }
 
   &__link-preview {
-    background: $color-black-alpha-40;
+    background: variables.$color-black-alpha-40;
     border-radius: 16px;
     display: flex;
     padding: 14px;
@@ -293,29 +313,34 @@
     &__title {
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 2;
-      @include font-body-1-bold;
-      color: $color-white;
+      @include mixins.font-body-1-bold;
+      color: variables.$color-white;
       display: -webkit-box;
       overflow: hidden;
       user-select: none;
     }
 
     &__location {
-      @include font-subtitle;
-      color: $color-white-alpha-60;
+      @include mixins.font-subtitle;
+      color: variables.$color-white-alpha-60;
     }
   }
 
   &__link-preview-empty {
     align-items: center;
-    color: $color-gray-45;
+    color: variables.$color-gray-45;
     display: flex;
     flex-direction: column;
 
     &__icon {
-      @include color-svg('../images/icons/v3/link/link.svg', $color-gray-45);
-      height: 20px;
-      width: 20px;
+      @include mixins.color-svg(
+        '../images/icons/v3/link/link.svg',
+        variables.$color-gray-45
+      );
+      & {
+        height: 20px;
+        width: 20px;
+      }
     }
   }
 
diff --git a/stylesheets/components/StoryDetailsModal.scss b/stylesheets/components/StoryDetailsModal.scss
index 988d43f007..e6adb652b2 100644
--- a/stylesheets/components/StoryDetailsModal.scss
+++ b/stylesheets/components/StoryDetailsModal.scss
@@ -1,6 +1,9 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .StoryDetailsModal {
   min-width: 320px;
   overflow: hidden;
@@ -15,7 +18,7 @@
   }
 
   &__debugger__button {
-    color: $color-gray-25;
+    color: variables.$color-gray-25;
     display: block;
     font-weight: 600;
     height: auto;
@@ -27,29 +30,41 @@
   }
 
   &__copy-icon {
-    @include dark-theme {
-      @include color-svg('../images/icons/v3/copy/copy.svg', $color-white);
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/copy/copy.svg',
+        variables.$color-white
+      );
     }
-    @include light-theme {
-      @include color-svg('../images/icons/v3/copy/copy.svg', $color-black);
+    @include mixins.light-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/copy/copy.svg',
+        variables.$color-black
+      );
     }
   }
 
   &__download-icon {
-    @include dark-theme {
-      @include color-svg('../images/icons/v3/save/save.svg', $color-white);
+    @include mixins.dark-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/save/save.svg',
+        variables.$color-white
+      );
     }
-    @include light-theme {
-      @include color-svg('../images/icons/v3/save/save.svg', $color-black);
+    @include mixins.light-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/save/save.svg',
+        variables.$color-black
+      );
     }
   }
 
   &__contact-container {
-    border-top: 1px solid $color-gray-75;
+    border-top: 1px solid variables.$color-gray-75;
   }
 
   &__contact-group__header {
-    @include font-body-1-bold;
+    @include mixins.font-body-1-bold;
     align-items: center;
     display: flex;
     justify-content: space-between;
@@ -72,7 +87,7 @@
     align-items: center;
 
     &__text {
-      @include font-body-1;
+      @include mixins.font-body-1;
       flex-grow: 1;
       margin-inline-start: 10px;
     }
diff --git a/stylesheets/components/StoryImage.scss b/stylesheets/components/StoryImage.scss
index 82155a6689..fb5c320b8f 100644
--- a/stylesheets/components/StoryImage.scss
+++ b/stylesheets/components/StoryImage.scss
@@ -1,6 +1,9 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .StoryImage {
   align-items: center;
   display: flex;
@@ -9,7 +12,7 @@
   overflow: hidden;
   position: relative;
   width: 100%;
-  z-index: $z-index-base;
+  z-index: variables.$z-index-base;
 
   &--thumbnail {
     height: 72px;
@@ -34,20 +37,22 @@
   }
 
   &__error {
-    @include color-svg(
+    @include mixins.color-svg(
       '../images/full-screen-flow/alert-outline.svg',
-      $color-white
+      variables.$color-white
     );
-    align-items: center;
-    display: flex;
-    height: 32px;
-    justify-content: center;
-    width: 32px;
+    & {
+      align-items: center;
+      display: flex;
+      height: 32px;
+      justify-content: center;
+      width: 32px;
+    }
   }
 
   &__spinner-bubble {
     align-items: center;
-    background-color: $color-gray-75;
+    background-color: variables.$color-gray-75;
     border-radius: 32px;
     display: flex;
     height: 32px;
@@ -56,13 +61,13 @@
   }
 
   &__spinner {
-    @include dark-theme {
+    @include mixins.dark-theme {
       &__circle {
-        background-color: $color-white;
+        background-color: variables.$color-white;
       }
 
       &__arc {
-        background-color: $color-gray-75;
+        background-color: variables.$color-gray-75;
       }
     }
   }
diff --git a/stylesheets/components/StoryLinkPreview.scss b/stylesheets/components/StoryLinkPreview.scss
index 6e370d6790..3ece92b5b4 100644
--- a/stylesheets/components/StoryLinkPreview.scss
+++ b/stylesheets/components/StoryLinkPreview.scss
@@ -1,11 +1,14 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .StoryLinkPreview {
   align-items: center;
-  background-color: $color-white;
+  background-color: variables.$color-white;
   border-radius: 36px;
-  color: $color-gray-90;
+  color: variables.$color-gray-90;
   display: inline-flex;
   max-width: 560px;
   min-width: 560px;
@@ -20,7 +23,7 @@
   }
 
   &__title {
-    @include font-body-1-bold;
+    @include mixins.font-body-1-bold;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
     display: -webkit-box;
@@ -31,7 +34,7 @@
   }
 
   &__description {
-    @include font-body-2;
+    @include mixins.font-body-2;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     display: -webkit-box;
@@ -42,8 +45,8 @@
   }
 
   &__location {
-    @include font-caption;
-    color: $color-gray-45;
+    @include mixins.font-caption;
+    color: variables.$color-gray-45;
     font-size: 22px;
     line-height: 28px;
     letter-spacing: 0.12px;
@@ -57,11 +60,16 @@
     margin-inline: 52px;
 
     &::before {
-      @include color-svg('../images/icons/v3/link/link.svg', $color-gray-90);
-      content: '';
-      display: block;
-      height: 48px;
-      width: 48px;
+      @include mixins.color-svg(
+        '../images/icons/v3/link/link.svg',
+        variables.$color-gray-90
+      );
+      & {
+        content: '';
+        display: block;
+        height: 48px;
+        width: 48px;
+      }
     }
   }
 
diff --git a/stylesheets/components/StoryListItem.scss b/stylesheets/components/StoryListItem.scss
index afa51b3dde..8ed9802f43 100644
--- a/stylesheets/components/StoryListItem.scss
+++ b/stylesheets/components/StoryListItem.scss
@@ -1,24 +1,29 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .StoryListItem {
   &__button {
-    @include button-reset;
-    align-items: center;
-    border-radius: 10px;
-    display: flex;
-    height: 96px;
-    min-height: 96px;
-    padding-block: 0;
-    padding-inline: 10px;
-    width: 100%;
+    @include mixins.button-reset;
+    & {
+      align-items: center;
+      border-radius: 10px;
+      display: flex;
+      height: 96px;
+      min-height: 96px;
+      padding-block: 0;
+      padding-inline: 10px;
+      width: 100%;
+    }
 
     &:focus {
-      @include keyboard-mode {
-        background: $color-gray-15;
+      @include mixins.keyboard-mode {
+        background: variables.$color-gray-15;
       }
-      @include dark-keyboard-mode {
-        background: $color-gray-65;
+      @include mixins.dark-keyboard-mode {
+        background: variables.$color-gray-65;
       }
     }
 
@@ -26,11 +31,11 @@
     // that has not been closed yet (active)
     &:hover,
     &--active {
-      @include light-theme {
-        background: $color-gray-15;
+      @include mixins.light-theme {
+        background: variables.$color-gray-15;
       }
-      @include dark-theme {
-        background: $color-gray-65;
+      @include mixins.dark-theme {
+        background: variables.$color-gray-65;
       }
     }
   }
@@ -52,9 +57,9 @@
       outline: none;
     }
 
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       &:focus {
-        outline: 1px solid $color-ultramarine;
+        outline: 1px solid variables.$color-ultramarine;
       }
     }
   }
@@ -67,26 +72,26 @@
     margin-inline: 12px;
 
     &--title {
-      @include font-body-1-bold;
+      @include mixins.font-body-1-bold;
       display: flex;
       align-items: center;
-      @include light-theme {
-        color: $color-black;
+      @include mixins.light-theme {
+        color: variables.$color-black;
       }
-      @include dark-theme {
-        color: $color-gray-05;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-05;
       }
     }
 
     &--timestamp,
     &--sending,
     &--send_failed {
-      @include font-body-2;
-      @include light-theme {
-        color: $color-gray-60;
+      @include mixins.font-body-2;
+      @include mixins.light-theme {
+        color: variables.$color-gray-60;
       }
-      @include dark-theme {
-        color: $color-gray-25;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-25;
       }
     }
 
@@ -100,30 +105,34 @@
         height: 12px;
         width: 12px;
         margin-inline-end: 8px;
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/error/error-circle.svg',
-          $color-accent-red
+          variables.$color-accent-red
         );
       }
     }
 
     &--replies {
       &--others {
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/thread/thread-fill-compact.svg',
-          $color-gray-25
+          variables.$color-gray-25
         );
-        height: 16px;
-        width: 16px;
+        & {
+          height: 16px;
+          width: 16px;
+        }
       }
 
       &--self {
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/reply/reply-fill-compact.svg',
-          $color-gray-25
+          variables.$color-gray-25
         );
-        height: 16px;
-        width: 16px;
+        & {
+          height: 16px;
+          width: 16px;
+        }
       }
     }
   }
@@ -134,25 +143,26 @@
     width: 46px;
 
     &--image {
-      @include button-reset;
-
-      align-items: center;
-      background-color: $color-gray-60;
-      background-size: cover;
-      border-radius: 8px;
-      display: flex;
-      height: 72px;
-      justify-content: center;
-      inset-inline-start: 0;
-      overflow: hidden;
-      position: absolute;
-      top: 0;
-      width: 46px;
-      z-index: $z-index-base;
+      @include mixins.button-reset;
+      & {
+        align-items: center;
+        background-color: variables.$color-gray-60;
+        background-size: cover;
+        border-radius: 8px;
+        display: flex;
+        height: 72px;
+        justify-content: center;
+        inset-inline-start: 0;
+        overflow: hidden;
+        position: absolute;
+        top: 0;
+        width: 46px;
+        z-index: variables.$z-index-base;
+      }
     }
 
     &--multiple &--image {
-      border: 1px solid $color-gray-80;
+      border: 1px solid variables.$color-gray-80;
     }
 
     &--more {
@@ -166,11 +176,11 @@
   }
 
   @mixin StoryListItem__Icon($path) {
-    @include light-theme {
-      @include color-svg($path, $color-black);
+    @include mixins.light-theme {
+      @include mixins.color-svg($path, variables.$color-black);
     }
-    @include dark-theme {
-      @include color-svg($path, $color-white);
+    @include mixins.dark-theme {
+      @include mixins.color-svg($path, variables.$color-white);
     }
   }
 
diff --git a/stylesheets/components/StoryProgressSegment.scss b/stylesheets/components/StoryProgressSegment.scss
index 5d791698f1..515d07736b 100644
--- a/stylesheets/components/StoryProgressSegment.scss
+++ b/stylesheets/components/StoryProgressSegment.scss
@@ -1,8 +1,10 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../variables';
+
 .StoryProgressSegment {
-  background: $color-white-alpha-40;
+  background: variables.$color-white-alpha-40;
   border-radius: 2px;
   height: 2px;
   margin-block: 12px 0;
@@ -12,7 +14,7 @@
 }
 
 .StoryProgressSegment__bar {
-  background: $color-white;
+  background: variables.$color-white;
   border-radius: 2px;
   height: 100%;
   &:dir(ltr) {
diff --git a/stylesheets/components/StoryViewer.scss b/stylesheets/components/StoryViewer.scss
index 819dcdc3ce..61dfa5496b 100644
--- a/stylesheets/components/StoryViewer.scss
+++ b/stylesheets/components/StoryViewer.scss
@@ -1,6 +1,9 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .StoryViewer {
   &__overlay {
     background-size: contain;
@@ -9,13 +12,13 @@
     position: absolute;
     top: 0;
     width: 100%;
-    z-index: $z-index-popup-overlay;
+    z-index: variables.$z-index-popup-overlay;
   }
 
   &__content {
     align-items: center;
     backdrop-filter: blur(90px);
-    background: $color-black-alpha-20;
+    background: variables.$color-black-alpha-20;
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -24,20 +27,27 @@
     position: absolute;
     top: 0;
     width: 100%;
-    z-index: $z-index-popup-overlay;
+    z-index: variables.$z-index-popup-overlay;
   }
 
   &__close-button {
-    @include button-reset;
-    @include modal-close-button;
-    @include light-theme {
-      @include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
+    @include mixins.button-reset;
+    & {
+      @include mixins.modal-close-button;
+    }
+    @include mixins.light-theme {
+      @include mixins.color-svg(
+        '../images/icons/v3/x/x.svg',
+        variables.$color-gray-15
+      );
+    }
+    & {
+      width: 20px;
+      height: 20px;
+      top: var(--title-bar-drag-area-height);
+      inset-inline-end: 28px;
+      z-index: variables.$z-index-above-above-base;
     }
-    width: 20px;
-    height: 20px;
-    top: var(--title-bar-drag-area-height);
-    inset-inline-end: 28px;
-    z-index: $z-index-above-above-base;
   }
 
   &__container {
@@ -57,30 +67,32 @@
   }
 
   &__meta {
-    @include position-absolute-center-x;
+    @include mixins.position-absolute-center-x;
     bottom: 0;
     min-width: 284px;
     padding-block: 0;
     padding-inline: 16px;
     width: clamp(0vh, 56.25vh, 100vw);
-    z-index: $z-index-story-meta;
+    z-index: variables.$z-index-story-meta;
 
     &__list {
-      @include font-body-2;
+      @include mixins.font-body-2;
       align-items: center;
       display: flex;
-      color: $color-white-alpha-80;
+      color: variables.$color-white-alpha-80;
 
       &::before {
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/stories/stories-fill-compact.svg',
-          $color-white-alpha-80
+          variables.$color-white-alpha-80
         );
-        content: '';
-        display: block;
-        height: 14px;
-        margin-inline-end: 6px;
-        width: 14px;
+        & {
+          content: '';
+          display: block;
+          height: 14px;
+          margin-inline-end: 6px;
+          width: 14px;
+        }
       }
     }
 
@@ -93,15 +105,15 @@
     }
 
     &--title {
-      @include font-body-1-bold;
-      color: $color-white;
+      @include mixins.font-body-1-bold;
+      color: variables.$color-white;
       display: inline;
       margin-inline-end: 8px;
     }
 
     &--timestamp {
-      @include font-body-2;
-      color: $color-white-alpha-60;
+      @include mixins.font-body-2;
+      color: variables.$color-white-alpha-60;
     }
 
     &__playback-bar {
@@ -122,22 +134,24 @@
   }
 
   &__caption {
-    @include font-body-1;
-    color: $color-white;
+    @include mixins.font-body-1;
+    color: variables.$color-white;
     padding-block: 4px;
     padding-inline: 0;
     margin-bottom: 24px;
-    text-shadow: 0px 0px 48px 0px $color-black-alpha-80;
+    text-shadow: 0px 0px 48px 0px variables.$color-black-alpha-80;
 
     &__overlay {
-      @include button-reset;
-      background: $color-black-alpha-60;
-      height: 100%;
-      inset-inline-start: 0;
-      position: absolute;
-      top: 0;
-      width: 100%;
-      z-index: $z-index-base;
+      @include mixins.button-reset;
+      & {
+        background: variables.$color-black-alpha-60;
+        height: 100%;
+        inset-inline-start: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: variables.$z-index-base;
+      }
     }
   }
 
@@ -147,11 +161,13 @@
     min-height: 60px;
 
     &__failed {
-      @include button-reset;
-      @include font-body-1;
-      align-items: center;
-      color: $color-white;
-      display: flex;
+      @include mixins.button-reset;
+      & {
+        @include mixins.font-body-1;
+        align-items: center;
+        color: variables.$color-white;
+        display: flex;
+      }
 
       &::before {
         content: '';
@@ -159,20 +175,22 @@
         height: 18px;
         margin-inline-end: 12px;
         width: 18px;
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/error/error-circle.svg',
-          $color-accent-red
+          variables.$color-accent-red
         );
       }
     }
   }
 
   &__reply {
-    @include button-reset;
-    color: $color-gray-05;
-    @include keyboard-mode {
+    @include mixins.button-reset;
+    & {
+      color: variables.$color-gray-05;
+    }
+    @include mixins.keyboard-mode {
       &:focus {
-        color: $color-ultramarine;
+        color: variables.$color-ultramarine;
       }
     }
 
@@ -185,7 +203,10 @@
         height: 20px;
         margin-inline-end: 12px;
         width: 20px;
-        @include color-svg('../images/icons/v3/reply/reply.svg', $color-white);
+        @include mixins.color-svg(
+          '../images/icons/v3/reply/reply.svg',
+          variables.$color-white
+        );
       }
     }
 
@@ -200,9 +221,9 @@
         margin-inline-start: 4px;
         vertical-align: middle;
         width: 16px;
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/chevron/chevron-right.svg',
-          $color-white
+          variables.$color-white
         );
       }
     }
@@ -216,87 +237,111 @@
     width: 24px;
 
     &::after {
-      @include color-svg('../images/icons/v3/more/more.svg', $color-white);
-      content: '';
-      height: 20px;
-      width: 20px;
+      @include mixins.color-svg(
+        '../images/icons/v3/more/more.svg',
+        variables.$color-white
+      );
+      & {
+        content: '';
+        height: 20px;
+        width: 20px;
+      }
 
-      @include keyboard-mode {
+      @include mixins.keyboard-mode {
         &:focus {
-          background-color: $color-black;
+          background-color: variables.$color-black;
         }
       }
     }
   }
 
   &__mute {
-    @include button-reset;
-    height: 20px;
-    margin-block: 0;
-    margin-inline: 24px;
-    width: 20px;
-    @include color-svg('../images/icons/v3/speaker/speaker.svg', $color-white);
-    @include keyboard-mode {
+    @include mixins.button-reset;
+    & {
+      height: 20px;
+      margin-block: 0;
+      margin-inline: 24px;
+      width: 20px;
+    }
+    @include mixins.color-svg(
+      '../images/icons/v3/speaker/speaker.svg',
+      variables.$color-white
+    );
+    @include mixins.keyboard-mode {
       &:focus {
-        background-color: $color-white-alpha-80;
+        background-color: variables.$color-white-alpha-80;
       }
     }
   }
 
   &__pause {
-    @include button-reset;
-    height: 20px;
-    width: 20px;
-    @include color-svg('../images/icons/v3/pause/pause.svg', $color-white);
-    @include keyboard-mode {
+    @include mixins.button-reset;
+    & {
+      height: 20px;
+      width: 20px;
+    }
+    @include mixins.color-svg(
+      '../images/icons/v3/pause/pause.svg',
+      variables.$color-white
+    );
+    @include mixins.keyboard-mode {
       &:focus {
-        background-color: $color-white-alpha-80;
+        background-color: variables.$color-white-alpha-80;
       }
     }
   }
 
   &__play {
-    @include button-reset;
-    height: 20px;
-    width: 20px;
-    @include color-svg('../images/icons/v3/play/play-fill.svg', $color-white);
-    @include keyboard-mode {
+    @include mixins.button-reset;
+    & {
+      height: 20px;
+      width: 20px;
+    }
+    @include mixins.color-svg(
+      '../images/icons/v3/play/play-fill.svg',
+      variables.$color-white
+    );
+    @include mixins.keyboard-mode {
       &:focus {
-        background-color: $color-white-alpha-80;
+        background-color: variables.$color-white-alpha-80;
       }
     }
   }
 
   &__unmute {
-    @include button-reset;
-    height: 20px;
-    margin-block: 0;
-    margin-inline: 24px;
-    width: 20px;
-    @include color-svg(
+    @include mixins.button-reset;
+    & {
+      height: 20px;
+      margin-block: 0;
+      margin-inline: 24px;
+      width: 20px;
+    }
+    @include mixins.color-svg(
       '../images/icons/v3/speaker/speaker-slash.svg',
-      $color-white
+      variables.$color-white
     );
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       &:focus {
-        background-color: $color-white-alpha-80;
+        background-color: variables.$color-white-alpha-80;
       }
     }
   }
 
   &__soundless {
-    @include button-reset;
-    height: 20px;
-    margin-block: 0;
-    margin-inline: 24px;
-    width: 20px;
-    @include color-svg(
+    @include mixins.button-reset;
+    & {
+      height: 20px;
+      margin-block: 0;
+      margin-inline: 24px;
+      width: 20px;
+    }
+    @include mixins.color-svg(
       '../images/icons/v3/speaker/speaker-x.svg',
-      $color-white
+      variables.$color-white
     );
-    @include keyboard-mode {
+    @include mixins.keyboard-mode {
       &:focus {
-        background-color: $color-white-alpha-80;
+        background-color: variables.$color-white-alpha-80;
       }
     }
   }
@@ -309,17 +354,19 @@
     height: 100%;
     position: absolute;
     width: 100%;
-    z-index: $z-index-above-base;
+    z-index: variables.$z-index-above-base;
   }
 
   &__arrow {
-    @include button-reset;
-    align-items: center;
-    display: flex;
-    height: 100%;
-    position: absolute;
-    width: 25%;
-    z-index: $z-index-above-above-base;
+    @include mixins.button-reset;
+    & {
+      align-items: center;
+      display: flex;
+      height: 100%;
+      position: absolute;
+      width: 25%;
+      z-index: variables.$z-index-above-above-base;
+    }
 
     &::before {
       content: '';
@@ -335,9 +382,9 @@
 
       &::before {
         margin-inline-start: 16px;
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/chevron/chevron-left.svg',
-          $color-white
+          variables.$color-white
         );
       }
     }
@@ -348,9 +395,9 @@
 
       &::before {
         margin-inline-end: 16px;
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/chevron/chevron-right.svg',
-          $color-white
+          variables.$color-white
         );
       }
     }
@@ -363,28 +410,40 @@
   &__protection {
     position: absolute;
     width: 100%;
-    z-index: $z-index-base;
+    z-index: variables.$z-index-base;
 
     &--top {
-      background: linear-gradient($color-black-alpha-16, $color-transparent);
+      background: linear-gradient(
+        variables.$color-black-alpha-16,
+        variables.$color-transparent
+      );
       top: 0;
       height: 80px;
     }
 
     &--bottom {
-      background: linear-gradient($color-transparent, $color-black-alpha-60);
+      background: linear-gradient(
+        variables.$color-transparent,
+        variables.$color-black-alpha-60
+      );
       bottom: 0;
       height: 140px;
     }
     &--bottom.StoryViewer__protection--has-caption {
-      background: linear-gradient($color-transparent, $color-black-alpha-80);
+      background: linear-gradient(
+        variables.$color-transparent,
+        variables.$color-black-alpha-80
+      );
       height: 280px;
     }
 
     &--whole {
       top: 0;
       bottom: 0;
-      background: linear-gradient($color-transparent, $color-black-alpha-40);
+      background: linear-gradient(
+        variables.$color-transparent,
+        variables.$color-black-alpha-40
+      );
     }
   }
 
diff --git a/stylesheets/components/StoryViewsNRepliesModal.scss b/stylesheets/components/StoryViewsNRepliesModal.scss
index c66e17ba2f..5864cb096c 100644
--- a/stylesheets/components/StoryViewsNRepliesModal.scss
+++ b/stylesheets/components/StoryViewsNRepliesModal.scss
@@ -1,6 +1,9 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .StoryViewsNRepliesModal {
   min-width: 320px;
   max-height: 80vh;
@@ -50,7 +53,7 @@
 
     &--none {
       align-items: center;
-      color: $color-gray-45;
+      color: variables.$color-gray-45;
       display: flex;
       flex: 1;
       justify-content: center;
@@ -81,8 +84,11 @@
     width: 24px;
 
     &::after {
-      @include dark-theme {
-        @include color-svg('../images/icons/v3/emoji/emoji.svg', $color-white);
+      @include mixins.dark-theme {
+        @include mixins.color-svg(
+          '../images/icons/v3/emoji/emoji.svg',
+          variables.$color-white
+        );
       }
     }
   }
@@ -92,20 +98,20 @@
     margin-inline: 4px;
     font-size: 12px;
     text-align: center;
-    color: $color-gray-25;
+    color: variables.$color-gray-25;
   }
 
   &__input {
     &__input {
       // For specificity because StoryViewsNRepliesModal is always in dark-theme
-      @include dark-theme {
-        background: $color-gray-75;
-        border: 1px solid $color-gray-75;
-        color: $color-white;
+      @include mixins.dark-theme {
+        background: variables.$color-gray-75;
+        border: 1px solid variables.$color-gray-75;
+        color: variables.$color-white;
       }
 
       .ql-editor.ql-blank::before {
-        color: $color-gray-25;
+        color: variables.$color-gray-25;
       }
 
       display: flex;
@@ -130,13 +136,13 @@
     margin-inline: 0;
 
     &--name {
-      @include font-body-2;
+      @include mixins.font-body-2;
       margin-inline-start: 12px;
     }
 
     &--timestamp {
-      @include font-body-2;
-      color: $color-gray-45;
+      @include mixins.font-body-2;
+      color: variables.$color-gray-45;
     }
   }
 
@@ -146,12 +152,12 @@
     padding-bottom: 12px;
 
     &--title {
-      @include font-body-2;
+      @include mixins.font-body-2;
     }
 
     &--timestamp {
-      @include font-subtitle;
-      color: $color-gray-25;
+      @include mixins.font-subtitle;
+      color: variables.$color-gray-25;
       margin-inline-start: 6px;
     }
   }
@@ -173,7 +179,7 @@
   }
 
   &__message-bubble {
-    background: $color-gray-75;
+    background: variables.$color-gray-75;
     border-radius: 18px;
     margin-inline-start: 8px;
     padding-block: 7px;
@@ -181,7 +187,7 @@
 
     &--doe {
       background: none;
-      border: 1px solid $color-gray-75;
+      border: 1px solid variables.$color-gray-75;
     }
   }
 
@@ -193,8 +199,8 @@
     }
 
     &--outgoing-ultramarine {
-      @include dark-theme {
-        background-color: $color-gray-60;
+      @include mixins.dark-theme {
+        background-color: variables.$color-gray-60;
         background-image: none;
       }
     }
@@ -202,7 +208,7 @@
     &__primary {
       min-height: 64px;
 
-      color: $color-gray-05;
+      color: variables.$color-gray-05;
       font-size: 12px;
       font-weight: 400;
       &__author,
@@ -218,7 +224,7 @@
   }
 
   &__debugger__button {
-    color: $color-gray-25;
+    color: variables.$color-gray-25;
     display: block;
     font-weight: 600;
     height: auto;
@@ -226,7 +232,7 @@
     width: auto;
 
     &--active {
-      @include dark-theme {
+      @include mixins.dark-theme {
         background: inherit;
       }
     }
@@ -241,11 +247,14 @@
   }
 
   &__copy-icon {
-    @include color-svg('../images/icons/v3/copy/copy.svg', $color-white);
+    @include mixins.color-svg(
+      '../images/icons/v3/copy/copy.svg',
+      variables.$color-white
+    );
   }
 
   &__read-receipts-off {
-    color: $color-gray-25;
+    color: variables.$color-gray-25;
     margin-block: 160px;
     margin-inline: 16px;
   }
@@ -268,15 +277,15 @@
 .Tabs.StoryViewsNRepliesModal__tabs {
   position: sticky;
   top: 0;
-  z-index: $z-index-base;
+  z-index: variables.$z-index-base;
   padding-block: 16px;
-  background: $color-gray-80;
+  background: variables.$color-gray-80;
   border-bottom: none;
   justify-content: center;
 }
 
 .Tabs__tab.StoryViewsNRepliesModal__tabs__tab {
-  @include font-body-1-bold;
+  @include mixins.font-body-1-bold;
   padding-block: 4px;
   padding-inline: 12px;
   margin-block: 0;
@@ -284,7 +293,7 @@
 }
 
 .Tabs__tab--selected.StoryViewsNRepliesModal__tabs__tab--selected {
-  background: $color-gray-65;
+  background: variables.$color-gray-65;
   border-radius: 24px;
   border-bottom: none;
 }
diff --git a/stylesheets/components/SystemMessage.scss b/stylesheets/components/SystemMessage.scss
index 0ab5728b46..384dab6aaf 100644
--- a/stylesheets/components/SystemMessage.scss
+++ b/stylesheets/components/SystemMessage.scss
@@ -1,19 +1,22 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 @mixin system-message-icon($url) {
-  @include light-theme {
+  @include mixins.light-theme {
     -webkit-mask: url($url) no-repeat center;
     -webkit-mask-size: 100%;
   }
-  @include dark-theme {
+  @include mixins.dark-theme {
     -webkit-mask: url($url) no-repeat center;
     -webkit-mask-size: 100%;
   }
 }
 
 .SystemMessage {
-  @include font-body-2;
+  @include mixins.font-body-2;
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -22,11 +25,11 @@
   padding-bottom: 16px;
   padding-top: 16px;
 
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-25;
   }
 
   &__contents {
@@ -58,11 +61,11 @@
       width: 16px;
       vertical-align: text-top;
 
-      @include light-theme {
-        background-color: $color-gray-60;
+      @include mixins.light-theme {
+        background-color: variables.$color-gray-60;
       }
-      @include dark-theme {
-        background-color: $color-gray-25;
+      @include mixins.dark-theme {
+        background-color: variables.$color-gray-25;
       }
     }
 
@@ -263,29 +266,29 @@
 
   &--error {
     .SystemMessage__contents::before {
-      @include light-theme {
-        background-color: $color-accent-red;
+      @include mixins.light-theme {
+        background-color: variables.$color-accent-red;
       }
-      @include dark-theme {
-        background-color: $color-accent-red;
+      @include mixins.dark-theme {
+        background-color: variables.$color-accent-red;
       }
     }
   }
 
   &--danger {
-    @include light-theme {
-      color: $color-accent-red;
+    @include mixins.light-theme {
+      color: variables.$color-accent-red;
     }
-    @include dark-theme {
-      color: $color-accent-red;
+    @include mixins.dark-theme {
+      color: variables.$color-accent-red;
     }
 
     .SystemMessage__contents::before {
-      @include light-theme {
-        background-color: $color-accent-red;
+      @include mixins.light-theme {
+        background-color: variables.$color-accent-red;
       }
-      @include dark-theme {
-        background-color: $color-accent-red;
+      @include mixins.dark-theme {
+        background-color: variables.$color-accent-red;
       }
     }
   }
diff --git a/stylesheets/components/Tabs.scss b/stylesheets/components/Tabs.scss
index f0b50bd6b9..c9d58c2bd7 100644
--- a/stylesheets/components/Tabs.scss
+++ b/stylesheets/components/Tabs.scss
@@ -1,14 +1,17 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .Tabs {
-  border-bottom: 1px solid $color-gray-15;
+  border-bottom: 1px solid variables.$color-gray-15;
   display: flex;
   justify-content: space-around;
   user-select: none;
 
   &__tab {
-    @include font-body-1;
+    @include mixins.font-body-1;
     cursor: pointer;
     padding: 10px;
     padding-bottom: 6px;
@@ -17,19 +20,19 @@
     &:focus {
       outline: none;
 
-      @include keyboard-mode {
-        border-bottom-color: $color-ultramarine;
+      @include mixins.keyboard-mode {
+        border-bottom-color: variables.$color-ultramarine;
       }
     }
 
     &--selected {
-      @include font-body-1-bold;
+      @include mixins.font-body-1-bold;
       border-bottom: 2px solid;
-      @include light-theme {
-        border-bottom-color: $color-black;
+      @include mixins.light-theme {
+        border-bottom-color: variables.$color-black;
       }
-      @include dark-theme {
-        border-bottom-color: $color-white;
+      @include mixins.dark-theme {
+        border-bottom-color: variables.$color-white;
       }
     }
   }
diff --git a/stylesheets/components/TextAttachment.scss b/stylesheets/components/TextAttachment.scss
index 5dd5295d47..f2fe530752 100644
--- a/stylesheets/components/TextAttachment.scss
+++ b/stylesheets/components/TextAttachment.scss
@@ -1,6 +1,9 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .TextAttachment {
   max-height: 100%;
   max-width: 100%;
@@ -69,7 +72,7 @@
 
   &__preview {
     align-items: center;
-    background: $color-black-alpha-40;
+    background: variables.$color-black-alpha-40;
     border-radius: 28px;
     display: flex;
     flex-direction: row;
@@ -82,19 +85,19 @@
     }
 
     &__location {
-      color: $color-white;
+      color: variables.$color-white;
       font: bold 22px Inter;
       max-width: 422px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
 
-      @include dark-theme {
-        color: $color-white;
+      @include mixins.dark-theme {
+        color: variables.$color-white;
       }
 
       .TextAttachment__preview-container--large & {
-        color: $color-white-alpha-60;
+        color: variables.$color-white-alpha-60;
         font: 18px Inter;
         max-width: 352px;
       }
@@ -103,7 +106,7 @@
     &__remove {
       align-items: center;
       backdrop-filter: blur(26px);
-      background: $color-black-alpha-40;
+      background: variables.$color-black-alpha-40;
       border-radius: 100%;
       display: flex;
       height: 48px;
@@ -112,13 +115,18 @@
       inset-inline-end: -16px;
       top: -16px;
       width: 48px;
-      z-index: $z-index-base;
+      z-index: variables.$z-index-base;
 
       button {
-        @include button-reset;
-        height: 24px;
-        width: 24px;
-        @include color-svg('../images/icons/v3/x/x.svg', $color-gray-15);
+        @include mixins.button-reset;
+        & {
+          height: 24px;
+          width: 24px;
+        }
+        @include mixins.color-svg(
+          '../images/icons/v3/x/x.svg',
+          variables.$color-gray-15
+        );
       }
     }
 
@@ -149,21 +157,21 @@
     &__title {
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3;
-      color: $color-white;
+      color: variables.$color-white;
       display: -webkit-box;
       font: bold 22px Inter;
       overflow: hidden;
 
-      @include dark-theme {
-        color: $color-white;
+      @include mixins.dark-theme {
+        color: variables.$color-white;
       }
     }
 
     &__tooltip {
       align-items: center;
-      background: $color-black-alpha-90;
+      background: variables.$color-black-alpha-90;
       border-radius: 12px;
-      color: $color-white;
+      color: variables.$color-white;
       display: flex;
       font-size: 13px;
       font-weight: 400;
@@ -173,7 +181,7 @@
       padding: 12px;
       position: absolute;
       text-decoration: none;
-      z-index: $z-index-above-base;
+      z-index: variables.$z-index-above-base;
 
       &::after {
         border-color: black transparent transparent transparent;
@@ -200,12 +208,14 @@
       }
 
       &__arrow {
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/chevron/chevron-right.svg',
-          $color-white
+          variables.$color-white
         );
-        height: 24px;
-        width: 24px;
+        & {
+          height: 24px;
+          width: 24px;
+        }
       }
     }
   }
diff --git a/stylesheets/components/TimelineDateHeader.scss b/stylesheets/components/TimelineDateHeader.scss
index 7e0288c75f..be0912a862 100644
--- a/stylesheets/components/TimelineDateHeader.scss
+++ b/stylesheets/components/TimelineDateHeader.scss
@@ -1,17 +1,20 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .TimelineDateHeader {
-  @include font-body-2;
+  @include mixins.font-body-2;
   display: block;
   text-align: center;
   user-select: none;
 
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.light-theme {
+    color: variables.$color-gray-60;
   }
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-05;
   }
 
   &--inline {
@@ -19,8 +22,10 @@
   }
 
   &--floating {
-    @include timeline-floating-header-node;
-    padding-block: 5px;
-    padding-inline: 10px;
+    @include mixins.timeline-floating-header-node;
+    & {
+      padding-block: 5px;
+      padding-inline: 10px;
+    }
   }
 }
diff --git a/stylesheets/components/TimelineFloatingHeader.scss b/stylesheets/components/TimelineFloatingHeader.scss
index 5f51a9341e..876ba66c7c 100644
--- a/stylesheets/components/TimelineFloatingHeader.scss
+++ b/stylesheets/components/TimelineFloatingHeader.scss
@@ -1,6 +1,9 @@
 // Copyright 2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .TimelineFloatingHeader {
   align-items: center;
   display: flex;
@@ -11,7 +14,7 @@
   top: 10px;
   transition: opacity 0.25s ease-out;
   width: 100%;
-  z-index: $z-index-above-above-base;
+  z-index: variables.$z-index-above-above-base;
 
   &--visible {
     opacity: 1;
@@ -22,8 +25,10 @@
   }
 
   &__spinner-container {
-    @include timeline-floating-header-node;
-    margin-top: 12px;
-    padding: 6px;
+    @include mixins.timeline-floating-header-node;
+    & {
+      margin-top: 12px;
+      padding: 6px;
+    }
   }
 }
diff --git a/stylesheets/components/TimelineWarning.scss b/stylesheets/components/TimelineWarning.scss
index 113387eb92..8d8c20dfab 100644
--- a/stylesheets/components/TimelineWarning.scss
+++ b/stylesheets/components/TimelineWarning.scss
@@ -1,13 +1,16 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .module-TimelineWarning {
   @mixin icon($icon) {
-    @include light-theme {
-      @include color-svg($icon, $color-gray-60);
+    @include mixins.light-theme {
+      @include mixins.color-svg($icon, variables.$color-gray-60);
     }
-    @include dark-theme {
-      @include color-svg($icon, $color-gray-20);
+    @include mixins.dark-theme {
+      @include mixins.color-svg($icon, variables.$color-gray-20);
     }
   }
 
@@ -25,53 +28,59 @@
     border-bottom-style: solid;
   }
 
-  @include light-theme {
-    color: $color-gray-65;
-    background: $color-gray-02;
-    border-color: $color-gray-15;
+  @include mixins.light-theme {
+    color: variables.$color-gray-65;
+    background: variables.$color-gray-02;
+    border-color: variables.$color-gray-15;
   }
 
-  @include dark-theme {
-    color: $color-gray-15;
-    background: $color-gray-80;
-    border-color: $color-gray-65;
+  @include mixins.dark-theme {
+    color: variables.$color-gray-15;
+    background: variables.$color-gray-80;
+    border-color: variables.$color-gray-65;
   }
 
   &__generic-icon {
     @include icon('../images/icons/v3/info/info.svg');
-    width: 20px;
-    height: 20px;
+    & {
+      width: 20px;
+      height: 20px;
+    }
   }
 
   &__text {
-    @include font-body-2;
+    @include mixins.font-body-2;
     flex-grow: 1;
     margin-inline: 12px;
 
     &__link {
-      @include button-reset;
-      display: inline;
-      font-weight: bold;
-      text-decoration: none;
-
-      @include light-theme {
-        color: $color-ultramarine;
+      @include mixins.button-reset;
+      & {
+        display: inline;
+        font-weight: bold;
+        text-decoration: none;
       }
-      @include dark-theme {
-        color: $color-ios-blue-tint;
+
+      @include mixins.light-theme {
+        color: variables.$color-ultramarine;
+      }
+      @include mixins.dark-theme {
+        color: variables.$color-ios-blue-tint;
       }
     }
   }
 
   &__close-button {
-    @include button-reset;
+    @include mixins.button-reset;
 
     &::after {
       @include icon('../images/icons/v3/x/x.svg');
-      content: '';
-      display: block;
-      height: 20px;
-      width: 20px;
+      & {
+        content: '';
+        display: block;
+        height: 20px;
+        width: 20px;
+      }
     }
   }
 
diff --git a/stylesheets/components/TimelineWarnings.scss b/stylesheets/components/TimelineWarnings.scss
index 55e80ce9f7..d57b7ad4db 100644
--- a/stylesheets/components/TimelineWarnings.scss
+++ b/stylesheets/components/TimelineWarnings.scss
@@ -1,12 +1,14 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../variables';
+
 .module-TimelineWarnings {
   inset-inline-start: 0;
   position: absolute;
   top: 0;
   width: 100%;
-  z-index: $z-index-above-above-base;
+  z-index: variables.$z-index-above-above-base;
 
   display: flex;
   flex-direction: column;
diff --git a/stylesheets/components/Toast.scss b/stylesheets/components/Toast.scss
index fd780ed99a..f1b39dce04 100644
--- a/stylesheets/components/Toast.scss
+++ b/stylesheets/components/Toast.scss
@@ -1,10 +1,13 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .Toast {
   $border-radius-px: 8px;
 
-  @include font-body-2;
+  @include mixins.font-body-2;
 
   align-items: stretch;
   border-radius: $border-radius-px;
@@ -17,17 +20,17 @@
   overflow: hidden;
   width: fit-content;
   max-width: 280px;
-  background-color: $color-gray-75;
-  color: $color-gray-05;
-  z-index: $z-index-toast;
+  background-color: variables.$color-gray-75;
+  color: variables.$color-gray-05;
+  z-index: variables.$z-index-toast;
 
   inset-inline-start: 20px;
   text-align: start;
 
   &:focus {
     outline: none;
-    @include keyboard-mode {
-      box-shadow: inset 0px 0px 0px 2px $color-ultramarine;
+    @include mixins.keyboard-mode {
+      box-shadow: inset 0px 0px 0px 2px variables.$color-ultramarine;
     }
   }
 
@@ -49,17 +52,17 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    @include font-body-2-bold;
+    @include mixins.font-body-2-bold;
     cursor: pointer;
     padding-block: 13px;
     padding-inline: 16px;
     white-space: nowrap;
-    color: $color-ios-blue-tint;
+    color: variables.$color-ios-blue-tint;
 
     &:focus {
       outline: none;
-      @include keyboard-mode {
-        box-shadow: inset 0px 0px 0px 2px $color-ultramarine;
+      @include mixins.keyboard-mode {
+        box-shadow: inset 0px 0px 0px 2px variables.$color-ultramarine;
       }
     }
   }
diff --git a/stylesheets/components/ToastManager.scss b/stylesheets/components/ToastManager.scss
index 5d9c320eaa..057995ddc5 100644
--- a/stylesheets/components/ToastManager.scss
+++ b/stylesheets/components/ToastManager.scss
@@ -1,6 +1,8 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../variables';
+
 .ToastManager {
   display: flex;
   flex-direction: column;
@@ -12,7 +14,7 @@
   position: fixed;
   width: inherit;
   bottom: 0;
-  z-index: $z-index-toast;
+  z-index: variables.$z-index-toast;
 
   padding: 16px;
 
@@ -27,7 +29,7 @@
 
     position: fixed;
     bottom: 16px;
-    z-index: $z-index-toast;
+    z-index: variables.$z-index-toast;
 
     inset-inline-start: 0;
     width: 100%;
@@ -45,5 +47,5 @@
 }
 
 .ToastManager--full-screen-call {
-  bottom: calc($CallControls__height + 32px);
+  bottom: calc(variables.$CallControls__height + 32px);
 }
diff --git a/stylesheets/components/UsernameLinkModalBody.scss b/stylesheets/components/UsernameLinkModalBody.scss
index 0b16a7cbc2..c09479069b 100644
--- a/stylesheets/components/UsernameLinkModalBody.scss
+++ b/stylesheets/components/UsernameLinkModalBody.scss
@@ -1,6 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .UsernameLinkModalBody {
   display: flex;
   flex-direction: column;
@@ -39,13 +42,13 @@
       justify-content: center;
 
       padding: 10px;
-      background-color: $color-white;
+      background-color: variables.$color-white;
       border-radius: 8px;
       width: 148px;
       height: 148px;
 
       .UsernameLinkModalBody__card--shadow & {
-        outline: 2px solid $color-gray-05;
+        outline: 2px solid variables.$color-gray-05;
       }
 
       &__spinner__arc {
@@ -62,9 +65,9 @@
         height: 28px;
         width: 28px;
 
-        @include color-svg(
+        @include mixins.color-svg(
           '../images/icons/v3/error/error-circle.svg',
-          $color-gray-25
+          variables.$color-gray-25
         );
       }
     }
@@ -95,14 +98,16 @@
           width: 16px;
           height: 16px;
 
-          @include color-svg(
+          @include mixins.color-svg(
             '../images/icons/v3/copy/copy.svg',
             var(--text-color)
           );
         }
 
-        @include button-reset;
-        @include button-focus-outline;
+        & {
+          @include mixins.button-reset;
+          @include mixins.button-focus-outline;
+        }
       }
     }
   }
@@ -117,28 +122,30 @@
 
     &__save,
     &__color {
-      @include button-reset;
-      @include button-focus-outline;
-      @include font-caption;
+      @include mixins.button-reset;
+      @include mixins.button-focus-outline;
+      & {
+        @include mixins.font-caption;
 
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
-      align-items: center;
-      justify-content: center;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        align-items: center;
+        justify-content: center;
 
-      min-width: 68px;
-      border-radius: 8px;
-      padding: 5px;
-
-      @include light-theme() {
-        background-color: $color-gray-05;
-        color: $color-black;
+        min-width: 68px;
+        border-radius: 8px;
+        padding: 5px;
       }
 
-      @include dark-theme() {
-        background-color: $color-gray-75;
-        color: $color-gray-02;
+      @include mixins.light-theme() {
+        background-color: variables.$color-gray-05;
+        color: variables.$color-black;
+      }
+
+      @include mixins.dark-theme() {
+        background-color: variables.$color-gray-75;
+        color: variables.$color-gray-02;
       }
 
       i {
@@ -150,24 +157,33 @@
     }
 
     &__save i {
-      @include light-theme() {
-        @include color-svg('../images/icons/v3/save/save.svg', $color-black);
+      @include mixins.light-theme() {
+        @include mixins.color-svg(
+          '../images/icons/v3/save/save.svg',
+          variables.$color-black
+        );
       }
 
-      @include dark-theme() {
-        @include color-svg('../images/icons/v3/save/save.svg', $color-gray-02);
+      @include mixins.dark-theme() {
+        @include mixins.color-svg(
+          '../images/icons/v3/save/save.svg',
+          variables.$color-gray-02
+        );
       }
     }
 
     &__color i {
-      @include light-theme() {
-        @include color-svg('../images/icons/v3/color/color.svg', $color-black);
+      @include mixins.light-theme() {
+        @include mixins.color-svg(
+          '../images/icons/v3/color/color.svg',
+          variables.$color-black
+        );
       }
 
-      @include dark-theme() {
-        @include color-svg(
+      @include mixins.dark-theme() {
+        @include mixins.color-svg(
           '../images/icons/v3/color/color.svg',
-          $color-gray-02
+          variables.$color-gray-02
         );
       }
     }
@@ -185,17 +201,19 @@
     margin-block-start: 20px;
     max-width: 296px;
     width: 100%;
-    @include light-theme() {
-      border: 2px solid $color-gray-05;
+    @include mixins.light-theme() {
+      border: 2px solid variables.$color-gray-05;
     }
-    @include dark-theme() {
-      border: 2px solid $color-gray-75;
+    @include mixins.dark-theme() {
+      border: 2px solid variables.$color-gray-75;
     }
 
     &__icon {
-      @include button-reset;
-      @include button-focus-outline;
-      border-radius: 2px;
+      @include mixins.button-reset;
+      @include mixins.button-focus-outline;
+      & {
+        border-radius: 2px;
+      }
 
       &:after {
         content: '';
@@ -205,25 +223,28 @@
         height: 20px;
         flex-shrink: 0;
 
-        @include light-theme() {
-          @include color-svg('../images/icons/v3/copy/copy.svg', $color-black);
+        @include mixins.light-theme() {
+          @include mixins.color-svg(
+            '../images/icons/v3/copy/copy.svg',
+            variables.$color-black
+          );
         }
 
-        @include dark-theme() {
-          @include color-svg(
+        @include mixins.dark-theme() {
+          @include mixins.color-svg(
             '../images/icons/v3/copy/copy.svg',
-            $color-gray-02
+            variables.$color-gray-02
           );
         }
       }
 
       &:disabled:after {
-        @include light-theme() {
-          background-color: $color-gray-45;
+        @include mixins.light-theme() {
+          background-color: variables.$color-gray-45;
         }
 
-        @include dark-theme() {
-          background-color: $color-gray-25;
+        @include mixins.dark-theme() {
+          background-color: variables.$color-gray-25;
         }
       }
     }
@@ -233,44 +254,46 @@
       user-select: text;
 
       &--resetting {
-        @include light-theme() {
-          color: $color-gray-45;
+        @include mixins.light-theme() {
+          color: variables.$color-gray-45;
         }
 
-        @include dark-theme() {
-          color: $color-gray-25;
+        @include mixins.dark-theme() {
+          color: variables.$color-gray-25;
         }
       }
     }
   }
 
   &__help {
-    @include font-subtitle;
+    @include mixins.font-subtitle;
 
     margin-block-start: 16px;
     text-align: center;
 
-    @include light-theme() {
-      color: $color-gray-60;
+    @include mixins.light-theme() {
+      color: variables.$color-gray-60;
     }
-    @include dark-theme() {
-      color: $color-gray-25;
+    @include mixins.dark-theme() {
+      color: variables.$color-gray-25;
     }
   }
 
   &__reset {
-    @include button-reset;
-    @include button-focus-outline;
-    @include font-body-1-bold;
+    @include mixins.button-reset;
+    @include mixins.button-focus-outline;
+    & {
+      @include mixins.font-body-1-bold;
 
-    margin-block: 12px 16px;
-
-    @include light-theme() {
-      color: $color-ultramarine;
+      margin-block: 12px 16px;
     }
 
-    @include dark-theme() {
-      color: $color-ultramarine-light;
+    @include mixins.light-theme() {
+      color: variables.$color-ultramarine;
+    }
+
+    @include mixins.dark-theme() {
+      color: variables.$color-ultramarine-light;
     }
   }
 
@@ -290,21 +313,23 @@
     }
 
     &__radio {
-      @include button-reset;
-      @include button-focus-outline;
+      @include mixins.button-reset;
+      @include mixins.button-focus-outline;
 
-      display: flex;
-      width: 48px;
-      height: 48px;
-      border-radius: 24px;
+      & {
+        display: flex;
+        width: 48px;
+        height: 48px;
+        border-radius: 24px;
+      }
 
       &[aria-pressed='true'] {
         padding: 3px;
-        @include light-theme() {
-          border: 2px solid $color-black;
+        @include mixins.light-theme() {
+          border: 2px solid variables.$color-black;
         }
-        @include dark-theme() {
-          border: 2px solid $color-ultramarine;
+        @include mixins.dark-theme() {
+          border: 2px solid variables.$color-ultramarine;
         }
       }
 
@@ -318,11 +343,11 @@
 
       &--white-bg {
         i {
-          @include light-theme() {
-            border-color: $color-gray-15;
+          @include mixins.light-theme() {
+            border-color: variables.$color-gray-15;
           }
-          @include dark-theme() {
-            border-color: $color-gray-60;
+          @include mixins.dark-theme() {
+            border-color: variables.$color-gray-60;
           }
         }
       }
diff --git a/stylesheets/components/UsernameMegaphone.scss b/stylesheets/components/UsernameMegaphone.scss
index 4d50ed7a76..0793fd8548 100644
--- a/stylesheets/components/UsernameMegaphone.scss
+++ b/stylesheets/components/UsernameMegaphone.scss
@@ -1,8 +1,11 @@
 // Copyright 2024 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .UsernameMegaphone {
-  @include font-body-2;
+  @include mixins.font-body-2;
 
   border-radius: 10px;
   box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
@@ -10,17 +13,17 @@
   flex-direction: column;
 
   user-select: none;
-  z-index: $z-index-megaphone;
+  z-index: variables.$z-index-megaphone;
   padding-block: 12px;
   padding-inline: 8px;
 
-  @include light-theme {
-    background-color: $color-white;
-    border: 1px solid $color-gray-20;
+  @include mixins.light-theme {
+    background-color: variables.$color-white;
+    border: 1px solid variables.$color-gray-20;
   }
-  @include dark-theme {
-    background: $color-gray-75;
-    border: 1px solid $color-gray-60;
+  @include mixins.dark-theme {
+    background: variables.$color-gray-75;
+    border: 1px solid variables.$color-gray-60;
   }
 
   &__row {
@@ -39,22 +42,22 @@
     margin-inline-start: 8px;
 
     background-size: cover;
-    @include light-theme {
+    @include mixins.light-theme {
       background-image: url(../images/usernames_40_color.svg);
     }
 
-    @include dark-theme {
+    @include mixins.dark-theme {
       background-image: url(../images/usernames_40_color_dark.svg);
     }
   }
 
   &__row__text {
-    @include font-body-2;
+    @include mixins.font-body-2;
 
     padding-inline-end: 8px;
 
     h2 {
-      @include font-body-2-bold;
+      @include mixins.font-body-2-bold;
       margin: 0;
       line-height: 20px;
     }
@@ -62,11 +65,11 @@
     p {
       margin: 0;
 
-      @include light-theme {
-        color: $color-gray-60;
+      @include mixins.light-theme {
+        color: variables.$color-gray-60;
       }
-      @include dark-theme {
-        color: $color-gray-25;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-25;
       }
     }
   }
@@ -83,23 +86,23 @@
     font-weight: 600;
     padding-block: 5px;
 
-    @include light-theme {
+    @include mixins.light-theme {
       background: transparent;
 
       &:hover,
       &:active {
-        @include not-disabled {
+        @include mixins.not-disabled {
           background: transparent;
         }
       }
     }
 
-    @include dark-theme {
+    @include mixins.dark-theme {
       background: transparent;
 
       &:hover,
       &:active {
-        @include not-disabled {
+        @include mixins.not-disabled {
           background: transparent;
         }
       }
diff --git a/stylesheets/components/UsernameOnboardingModal.scss b/stylesheets/components/UsernameOnboardingModal.scss
index 124acae01f..f57236fcf1 100644
--- a/stylesheets/components/UsernameOnboardingModal.scss
+++ b/stylesheets/components/UsernameOnboardingModal.scss
@@ -1,6 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .UsernameOnboardingModal {
   display: flex;
   flex-direction: column;
@@ -8,7 +11,7 @@
   user-select: none;
 
   &__title {
-    @include font-title-2;
+    @include mixins.font-title-2;
     margin-bottom: 20px;
     max-width: 240px;
     text-align: center;
@@ -26,61 +29,63 @@
       background-size: cover;
 
       &--number {
-        @include light-theme {
+        @include mixins.light-theme {
           background-image: url(../images/phone_40_color.svg);
         }
 
-        @include dark-theme {
+        @include mixins.dark-theme {
           background-image: url(../images/phone_40_color_dark.svg);
         }
       }
 
       &--username {
-        @include light-theme {
+        @include mixins.light-theme {
           background-image: url(../images/usernames_40_color.svg);
         }
 
-        @include dark-theme {
+        @include mixins.dark-theme {
           background-image: url(../images/usernames_40_color_dark.svg);
         }
       }
 
       &--qr {
-        @include light-theme {
+        @include mixins.light-theme {
           background-image: url(../images/qr_codes_40_color.svg);
         }
 
-        @include dark-theme {
+        @include mixins.dark-theme {
           background-image: url(../images/qr_codes_40_color_dark.svg);
         }
       }
     }
 
     &__body {
-      @include font-body-2;
+      @include mixins.font-body-2;
 
-      @include light-theme {
-        color: $color-gray-60;
+      @include mixins.light-theme {
+        color: variables.$color-gray-60;
       }
 
-      @include dark-theme {
-        color: $color-gray-25;
+      @include mixins.dark-theme {
+        color: variables.$color-gray-25;
       }
 
-      max-width: 248px;
+      & {
+        max-width: 248px;
+      }
 
       h2 {
-        @include font-body-1;
+        @include mixins.font-body-1;
 
         margin-top: 0;
         margin-bottom: 2px;
         font-weight: 400;
 
-        @include light-theme {
-          color: $color-gray-90;
+        @include mixins.light-theme {
+          color: variables.$color-gray-90;
         }
-        @include dark-theme {
-          color: $color-gray-05;
+        @include mixins.dark-theme {
+          color: variables.$color-gray-05;
         }
       }
     }
@@ -100,23 +105,23 @@
   &__skip {
     margin-bottom: 0;
 
-    @include light-theme {
+    @include mixins.light-theme {
       background: transparent;
 
       &:hover,
       &:active {
-        @include not-disabled {
+        @include mixins.not-disabled {
           background: transparent;
         }
       }
     }
 
-    @include dark-theme {
+    @include mixins.dark-theme {
       background: transparent;
 
       &:hover,
       &:active {
-        @include not-disabled {
+        @include mixins.not-disabled {
           background: transparent;
         }
       }
diff --git a/stylesheets/components/Waveform.scss b/stylesheets/components/Waveform.scss
index d7470715e8..e556c0591c 100644
--- a/stylesheets/components/Waveform.scss
+++ b/stylesheets/components/Waveform.scss
@@ -1,6 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .Waveform {
   /**
    * Progress indicators for audio or video content should always be left-to-right.
@@ -30,41 +33,41 @@
       margin-inline-start: 2px;
     }
 
-    @include light-theme {
-      background: $color-black-alpha-40;
+    @include mixins.light-theme {
+      background: variables.$color-black-alpha-40;
 
       &--active {
-        background: $color-black-alpha-80;
+        background: variables.$color-black-alpha-80;
       }
     }
 
-    @include dark-theme {
-      background: $color-white-alpha-40;
+    @include mixins.dark-theme {
+      background: variables.$color-white-alpha-40;
 
       &--active {
-        background: $color-white-alpha-80;
+        background: variables.$color-white-alpha-80;
       }
     }
 
     .module-message__audio-attachment--incoming & {
-      @include light-theme {
+      @include mixins.light-theme {
         &--active {
-          background: $color-black-alpha-80;
+          background: variables.$color-black-alpha-80;
         }
       }
 
-      @include dark-theme {
+      @include mixins.dark-theme {
         &--active {
-          background: $color-white-alpha-70;
+          background: variables.$color-white-alpha-70;
         }
       }
     }
 
     .module-message__audio-attachment--outgoing & {
-      background: $color-white-alpha-40;
+      background: variables.$color-white-alpha-40;
 
       &--active {
-        background: $color-white-alpha-80;
+        background: variables.$color-white-alpha-80;
       }
     }
   }
diff --git a/stylesheets/components/WhatsNew.scss b/stylesheets/components/WhatsNew.scss
index 63e91290a6..75916d57bf 100644
--- a/stylesheets/components/WhatsNew.scss
+++ b/stylesheets/components/WhatsNew.scss
@@ -1,7 +1,12 @@
 // Copyright 2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
+@use '../mixins';
+@use '../variables';
+
 .WhatsNew {
-  @include button-reset;
-  color: $color-ultramarine;
+  @include mixins.button-reset;
+  & {
+    color: variables.$color-ultramarine;
+  }
 }
diff --git a/stylesheets/manifest.scss b/stylesheets/manifest.scss
index 4e15e40b83..a96d48cd22 100644
--- a/stylesheets/manifest.scss
+++ b/stylesheets/manifest.scss
@@ -2,189 +2,189 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 // Global Settings, Variables, and Mixins
-@import 'fontfaces';
-@import 'variables';
-@import 'mixins';
-@import 'global';
-@import 'titlebar';
+@use 'fontfaces';
+@use 'variables';
+@use 'mixins';
+@use 'global';
+@use 'titlebar';
 
 // Old style: components
-@import 'progress';
-@import 'emoji';
+@use 'progress';
+@use 'emoji';
 
 // Old style: modules
-@import 'modules';
+@use 'modules';
 
 // Old style: installer
-@import 'options';
+@use 'options';
 
 // New style: components
-@import './components/About.scss';
-@import './components/AboutContactModal.scss';
-@import './components/AddGroupMembersModal.scss';
-@import './components/AddUserToAnotherGroupModal.scss';
-@import './components/AnnouncementsOnlyGroupBanner.scss';
-@import './components/App.scss';
-@import './components/AudioCapture.scss';
-@import './components/AutoSizeInput.scss';
-@import './components/Avatar.scss';
-@import './components/AvatarEditor.scss';
-@import './components/AvatarModalButtons.scss';
-@import './components/AvatarPreview.scss';
-@import './components/AvatarTextEditor.scss';
-@import './components/BackupMediaDownloadProgress.scss';
-@import './components/BadgeCarouselIndex.scss';
-@import './components/BadgeDialog.scss';
-@import './components/BadgeSustainerInstructionsDialog.scss';
-@import './components/BetterAvatarBubble.scss';
-@import './components/Button.scss';
-@import './components/CallsTab.scss';
-@import './components/CallingAdhocCallInfo.scss';
-@import './components/CallingAudioIndicator.scss';
-@import './components/CallingStatusIndicator.scss';
-@import './components/CallingButton.scss';
-@import './components/CallControls.scss';
-@import './components/CallSettingsButton.scss';
-@import './components/CallingLobby.scss';
-@import './components/CallingPendingParticipants.scss';
-@import './components/CallingPreCallInfo.scss';
-@import './components/CallingScreenSharingController.scss';
-@import './components/CallingSelectPresentingSourcesModal.scss';
-@import './components/CallingToast.scss';
-@import './components/CallLinkAddNameModal.scss';
-@import './components/CallLinkDetails.scss';
-@import './components/CallLinkEditModal.scss';
-@import './components/CallLinkPendingParticipantModal.scss';
-@import './components/CallLinkRestrictionsSelect.scss';
-@import './components/CallingRaisedHandsList.scss';
-@import './components/CallingRaisedHandsToasts.scss';
-@import './components/CallingReactionsToasts.scss';
-@import './components/CallReactionBurst.scss';
-@import './components/ChatColorPicker.scss';
-@import './components/Checkbox.scss';
-@import './components/CircleCheckbox.scss';
-@import './components/ClearFilterButton.scss';
-@import './components/CollidingAvatars.scss';
-@import './components/ComposeStepButton.scss';
-@import './components/CompositionArea.scss';
-@import './components/CompositionRecording.scss';
-@import './components/CompositionRecordingDraft.scss';
-@import './components/CompositionInput.scss';
-@import './components/CompositionTextArea.scss';
-@import './components/ContactListItem.scss';
-@import './components/ContactModal.scss';
-@import './components/ContactName.scss';
-@import './components/ContactPill.scss';
-@import './components/ContactPills.scss';
-@import './components/ContactSpoofingReviewDialog.scss';
-@import './components/ContactSpoofingReviewDialogPerson.scss';
-@import './components/ContextMenu.scss';
-@import './components/ConversationDetails.scss';
-@import './components/ConversationDetailsHeader.scss';
-@import './components/ConversationHeader.scss';
-@import './components/ConversationHero.scss';
-@import './components/ConversationMergeNotification.scss';
-@import './components/ConversationPanel.scss';
-@import './components/ConversationView.scss';
-@import './components/CountryCodeSelect.scss';
-@import './components/CustomColorEditor.scss';
-@import './components/CustomizingPreferredReactionsModal.scss';
-@import './components/DebugLogWindow.scss';
-@import './components/DeleteMessagesModal.scss';
-@import './components/DisappearingTimeDialog.scss';
-@import './components/DisappearingTimerSelect.scss';
-@import './components/EditConversationAttributesModal.scss';
-@import './components/EditHistoryMessagesModal.scss';
-@import './components/EditNicknameAndNoteModal.scss';
-@import './components/EditUsernameModalBody.scss';
-@import './components/ForwardMessageModal.scss';
-@import './components/GradientDial.scss';
-@import './components/GroupDescription.scss';
-@import './components/GroupDialog.scss';
-@import './components/GroupInput.scss';
-@import './components/HueSlider.scss';
-@import './components/InAnotherCallTooltip.scss';
-@import './components/Inbox.scss';
-@import './components/IncomingCallBar.scss';
-@import './components/Input.scss';
-@import './components/InstallScreenBackupImportStep.scss';
-@import './components/InstallScreenChoosingDeviceNameStep.scss';
-@import './components/InstallScreenErrorStep.scss';
-@import './components/InstallScreenLinkInProgressStep.scss';
-@import './components/InstallScreenQrCodeNotScannedStep.scss';
-@import './components/InstallScreenSignalLogo.scss';
-@import './components/InstallScreenUpdateDialog.scss';
-@import './components/LeftPaneBanner.scss';
-@import './components/LeftPaneDialog.scss';
-@import './components/LeftPaneFindByPhoneNumberHelper.scss';
-@import './components/LeftPaneFindByUsernameHelper.scss';
-@import './components/LeftPaneSearchInput.scss';
-@import './components/Lightbox.scss';
-@import './components/ListTile.scss';
-@import './components/LocalDeleteWarningModal.scss';
-@import './components/MediaEditor.scss';
-@import './components/MediaQualitySelector.scss';
-@import './components/MessageAudio.scss';
-@import './components/MessageBody.scss';
-@import './components/MessageRequestActionsConfirmation.scss';
-@import './components/MessageTextRenderer.scss';
-@import './components/MessageDetail.scss';
-@import './components/MiniPlayer.scss';
-@import './components/Modal.scss';
-@import './components/MyStories.scss';
-@import './components/NavSidebar.scss';
-@import './components/NavTabs.scss';
-@import './components/OutgoingGiftBadgeModal.scss';
-@import './components/PermissionsPopup.scss';
-@import './components/PlaybackButton.scss';
-@import './components/PlaybackRateButton.scss';
-@import './components/Preferences.scss';
-@import './components/ProfileEditor.scss';
-@import './components/ProgressBar.scss';
-@import './components/ProgressCircle.scss';
-@import './components/Quote.scss';
-@import './components/ReactionPickerPicker.scss';
-@import './components/RecordingComposer.scss';
-@import './components/SafetyNumberChangeDialog.scss';
-@import './components/SafetyNumberOnboarding.scss';
-@import './components/SafetyNumberViewer.scss';
-@import './components/SafetyTipsModal.scss';
-@import './components/ScrollDownButton.scss';
-@import './components/SearchInput.scss';
-@import './components/SearchResultsLoadingFakeHeader.scss';
-@import './components/SearchResultsLoadingFakeRow.scss';
-@import './components/Select.scss';
-@import './components/SelectModeActions.scss';
-@import './components/SendStoryModal.scss';
-@import './components/ShortcutGuide.scss';
-@import './components/SignalConnectionsModal.scss';
-@import './components/Slider.scss';
-@import './components/SpinnerV2.scss';
-@import './components/StagedLinkPreview.scss';
-@import './components/StickerManager.scss';
-@import './components/Stories.scss';
-@import './components/StoriesSettingsModal.scss';
-@import './components/StoryCreator.scss';
-@import './components/StoryDetailsModal.scss';
-@import './components/StoryImage.scss';
-@import './components/StoryLinkPreview.scss';
-@import './components/StoryListItem.scss';
-@import './components/StoryProgressSegment.scss';
-@import './components/StoryReplyQuote.scss';
-@import './components/StoryViewer.scss';
-@import './components/StoryViewsNRepliesModal.scss';
-@import './components/SystemMessage.scss';
-@import './components/Tabs.scss';
-@import './components/TextAttachment.scss';
-@import './components/TimelineDateHeader.scss';
-@import './components/TimelineFloatingHeader.scss';
-@import './components/TimelineWarning.scss';
-@import './components/TimelineWarnings.scss';
-@import './components/Toast.scss';
-@import './components/ToastManager.scss';
-@import './components/Waveform.scss';
-@import './components/WaveformScrubber.scss';
-@import './components/UsernameLinkModalBody.scss';
-@import './components/UsernameMegaphone.scss';
-@import './components/UsernameOnboardingModal.scss';
-@import './components/WhatsNew.scss';
+@use 'components/About.scss';
+@use 'components/AboutContactModal.scss';
+@use 'components/AddGroupMembersModal.scss';
+@use 'components/AddUserToAnotherGroupModal.scss';
+@use 'components/AnnouncementsOnlyGroupBanner.scss';
+@use 'components/App.scss';
+@use 'components/AudioCapture.scss';
+@use 'components/AutoSizeInput.scss';
+@use 'components/Avatar.scss';
+@use 'components/AvatarEditor.scss';
+@use 'components/AvatarModalButtons.scss';
+@use 'components/AvatarPreview.scss';
+@use 'components/AvatarTextEditor.scss';
+@use 'components/BackupMediaDownloadProgress.scss';
+@use 'components/BadgeCarouselIndex.scss';
+@use 'components/BadgeDialog.scss';
+@use 'components/BadgeSustainerInstructionsDialog.scss';
+@use 'components/BetterAvatarBubble.scss';
+@use 'components/Button.scss';
+@use 'components/CallsTab.scss';
+@use 'components/CallingAdhocCallInfo.scss';
+@use 'components/CallingAudioIndicator.scss';
+@use 'components/CallingStatusIndicator.scss';
+@use 'components/CallingButton.scss';
+@use 'components/CallControls.scss';
+@use 'components/CallSettingsButton.scss';
+@use 'components/CallingLobby.scss';
+@use 'components/CallingPendingParticipants.scss';
+@use 'components/CallingPreCallInfo.scss';
+@use 'components/CallingScreenSharingController.scss';
+@use 'components/CallingSelectPresentingSourcesModal.scss';
+@use 'components/CallingToast.scss';
+@use 'components/CallLinkAddNameModal.scss';
+@use 'components/CallLinkDetails.scss';
+@use 'components/CallLinkEditModal.scss';
+@use 'components/CallLinkPendingParticipantModal.scss';
+@use 'components/CallLinkRestrictionsSelect.scss';
+@use 'components/CallingRaisedHandsList.scss';
+@use 'components/CallingRaisedHandsToasts.scss';
+@use 'components/CallingReactionsToasts.scss';
+@use 'components/CallReactionBurst.scss';
+@use 'components/ChatColorPicker.scss';
+@use 'components/Checkbox.scss';
+@use 'components/CircleCheckbox.scss';
+@use 'components/ClearFilterButton.scss';
+@use 'components/CollidingAvatars.scss';
+@use 'components/ComposeStepButton.scss';
+@use 'components/CompositionArea.scss';
+@use 'components/CompositionRecording.scss';
+@use 'components/CompositionRecordingDraft.scss';
+@use 'components/CompositionInput.scss';
+@use 'components/CompositionTextArea.scss';
+@use 'components/ContactListItem.scss';
+@use 'components/ContactModal.scss';
+@use 'components/ContactName.scss';
+@use 'components/ContactPill.scss';
+@use 'components/ContactPills.scss';
+@use 'components/ContactSpoofingReviewDialog.scss';
+@use 'components/ContactSpoofingReviewDialogPerson.scss';
+@use 'components/ContextMenu.scss';
+@use 'components/ConversationDetails.scss';
+@use 'components/ConversationDetailsHeader.scss';
+@use 'components/ConversationHeader.scss';
+@use 'components/ConversationHero.scss';
+@use 'components/ConversationMergeNotification.scss';
+@use 'components/ConversationPanel.scss';
+@use 'components/ConversationView.scss';
+@use 'components/CountryCodeSelect.scss';
+@use 'components/CustomColorEditor.scss';
+@use 'components/CustomizingPreferredReactionsModal.scss';
+@use 'components/DebugLogWindow.scss';
+@use 'components/DeleteMessagesModal.scss';
+@use 'components/DisappearingTimeDialog.scss';
+@use 'components/DisappearingTimerSelect.scss';
+@use 'components/EditConversationAttributesModal.scss';
+@use 'components/EditHistoryMessagesModal.scss';
+@use 'components/EditNicknameAndNoteModal.scss';
+@use 'components/EditUsernameModalBody.scss';
+@use 'components/ForwardMessageModal.scss';
+@use 'components/GradientDial.scss';
+@use 'components/GroupDescription.scss';
+@use 'components/GroupDialog.scss';
+@use 'components/GroupInput.scss';
+@use 'components/HueSlider.scss';
+@use 'components/InAnotherCallTooltip.scss';
+@use 'components/Inbox.scss';
+@use 'components/IncomingCallBar.scss';
+@use 'components/Input.scss';
+@use 'components/InstallScreenBackupImportStep.scss';
+@use 'components/InstallScreenChoosingDeviceNameStep.scss';
+@use 'components/InstallScreenErrorStep.scss';
+@use 'components/InstallScreenLinkInProgressStep.scss';
+@use 'components/InstallScreenQrCodeNotScannedStep.scss';
+@use 'components/InstallScreenSignalLogo.scss';
+@use 'components/InstallScreenUpdateDialog.scss';
+@use 'components/LeftPaneBanner.scss';
+@use 'components/LeftPaneDialog.scss';
+@use 'components/LeftPaneFindByPhoneNumberHelper.scss';
+@use 'components/LeftPaneFindByUsernameHelper.scss';
+@use 'components/LeftPaneSearchInput.scss';
+@use 'components/Lightbox.scss';
+@use 'components/ListTile.scss';
+@use 'components/LocalDeleteWarningModal.scss';
+@use 'components/MediaEditor.scss';
+@use 'components/MediaQualitySelector.scss';
+@use 'components/MessageAudio.scss';
+@use 'components/MessageBody.scss';
+@use 'components/MessageRequestActionsConfirmation.scss';
+@use 'components/MessageTextRenderer.scss';
+@use 'components/MessageDetail.scss';
+@use 'components/MiniPlayer.scss';
+@use 'components/Modal.scss';
+@use 'components/MyStories.scss';
+@use 'components/NavSidebar.scss';
+@use 'components/NavTabs.scss';
+@use 'components/OutgoingGiftBadgeModal.scss';
+@use 'components/PermissionsPopup.scss';
+@use 'components/PlaybackButton.scss';
+@use 'components/PlaybackRateButton.scss';
+@use 'components/Preferences.scss';
+@use 'components/ProfileEditor.scss';
+@use 'components/ProgressBar.scss';
+@use 'components/ProgressCircle.scss';
+@use 'components/Quote.scss';
+@use 'components/ReactionPickerPicker.scss';
+@use 'components/RecordingComposer.scss';
+@use 'components/SafetyNumberChangeDialog.scss';
+@use 'components/SafetyNumberOnboarding.scss';
+@use 'components/SafetyNumberViewer.scss';
+@use 'components/SafetyTipsModal.scss';
+@use 'components/ScrollDownButton.scss';
+@use 'components/SearchInput.scss';
+@use 'components/SearchResultsLoadingFakeHeader.scss';
+@use 'components/SearchResultsLoadingFakeRow.scss';
+@use 'components/Select.scss';
+@use 'components/SelectModeActions.scss';
+@use 'components/SendStoryModal.scss';
+@use 'components/ShortcutGuide.scss';
+@use 'components/SignalConnectionsModal.scss';
+@use 'components/Slider.scss';
+@use 'components/SpinnerV2.scss';
+@use 'components/StagedLinkPreview.scss';
+@use 'components/StickerManager.scss';
+@use 'components/Stories.scss';
+@use 'components/StoriesSettingsModal.scss';
+@use 'components/StoryCreator.scss';
+@use 'components/StoryDetailsModal.scss';
+@use 'components/StoryImage.scss';
+@use 'components/StoryLinkPreview.scss';
+@use 'components/StoryListItem.scss';
+@use 'components/StoryProgressSegment.scss';
+@use 'components/StoryReplyQuote.scss';
+@use 'components/StoryViewer.scss';
+@use 'components/StoryViewsNRepliesModal.scss';
+@use 'components/SystemMessage.scss';
+@use 'components/Tabs.scss';
+@use 'components/TextAttachment.scss';
+@use 'components/TimelineDateHeader.scss';
+@use 'components/TimelineFloatingHeader.scss';
+@use 'components/TimelineWarning.scss';
+@use 'components/TimelineWarnings.scss';
+@use 'components/Toast.scss';
+@use 'components/ToastManager.scss';
+@use 'components/Waveform.scss';
+@use 'components/WaveformScrubber.scss';
+@use 'components/UsernameLinkModalBody.scss';
+@use 'components/UsernameMegaphone.scss';
+@use 'components/UsernameOnboardingModal.scss';
+@use 'components/WhatsNew.scss';
diff --git a/stylesheets/manifest_bridge.scss b/stylesheets/manifest_bridge.scss
index 2ed7bf1a3e..059e89f049 100644
--- a/stylesheets/manifest_bridge.scss
+++ b/stylesheets/manifest_bridge.scss
@@ -3,7 +3,7 @@
 
 // This file acts as a bridge to allow BEM modules to work in the newer CSS
 // modules development model
-@import 'variables';
-@import 'mixins';
-@import 'modules';
-@import 'titlebar';
+@use 'variables';
+@use 'mixins';
+@use 'modules';
+@use 'titlebar';