From 9fd2fff74eeed1fe695131ee2d9768d36ca55a29 Mon Sep 17 00:00:00 2001
From: Jamie <79877362+indutny-signal@users.noreply.github.com>
Date: Mon, 24 Aug 2026 10:51:59 -0700
Subject: [PATCH] Fix all Sass deprecation warnings

---
 sticker-creator/src/colors.scss               | 209 ------------------
 .../src/components/ArtFrame.module.scss       |  82 +++----
 .../src/components/ArtPackPreview.module.scss |  52 ++---
 .../src/components/ShareButtons.module.scss   |  16 +-
 .../src/elements/Button.module.scss           | 120 ++++++----
 .../src/elements/ConfirmDialog.module.scss    |  56 ++---
 .../src/elements/CopyText.module.scss         |  22 +-
 .../src/elements/DropZone.module.scss         |  48 ++--
 .../src/elements/LabeledCheckbox.module.scss  |  16 +-
 .../src/elements/LabeledInput.module.scss     |  32 +--
 .../src/elements/MessageBubble.module.scss    |  10 +-
 .../src/elements/MessageMeta.module.scss      |  10 +-
 .../src/elements/PageHeader.module.scss       |  14 +-
 .../src/elements/ProgressBar.module.scss      |  14 +-
 .../src/elements/StickerPreview.module.scss   |  48 ++--
 .../src/elements/Toast.module.scss            |  20 +-
 .../src/elements/Typography.module.scss       |  42 ++--
 sticker-creator/src/fonts.scss                |  71 ------
 sticker-creator/src/index.scss                |  68 +++---
 sticker-creator/src/mixins.scss               |  24 --
 .../src/routes/art/AppStage.module.scss       |   6 +-
 .../src/routes/art/MetaStage.module.scss      |  48 ++--
 .../src/routes/art/ShareStage.module.scss     |   2 +-
 .../src/routes/art/UploadStage.module.scss    |  12 +-
 sticker-creator/vite.config.ts                |   9 +
 25 files changed, 395 insertions(+), 656 deletions(-)

diff --git a/sticker-creator/src/colors.scss b/sticker-creator/src/colors.scss
index cdad53f19a..070c07ec41 100644
--- a/sticker-creator/src/colors.scss
+++ b/sticker-creator/src/colors.scss
@@ -2,237 +2,28 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 
 $color-accent-blue: #2c6bed;
-$color-accent-green: #4caf50;
-$color-accent-red: #f44336;
-$color-accent-yellow: #ffd624;
 
 $color-white: #ffffff;
 $color-gray-02: #f6f6f6;
-$color-gray-04: #f0f0f0;
 $color-gray-05: #e9e9e9;
 $color-gray-15: #dedede;
-$color-gray-20: #c6c6c6;
 $color-gray-25: #b9b9b9;
 $color-gray-45: #848484;
 $color-gray-60: #5e5e5e;
-$color-gray-62: #545454;
 $color-gray-65: #4a4a4a;
 $color-gray-75: #3b3b3b;
-$color-gray-78: #343434;
 $color-gray-80: #2e2e2e;
 $color-gray-90: #1b1b1b;
 $color-gray-95: #121212;
 $color-black: #000000;
 
-$color-white-alpha-06: rgba($color-white, 0.06);
-$color-white-alpha-08: rgba($color-white, 0.08);
-$color-white-alpha-12: rgba($color-white, 0.12);
-$color-white-alpha-16: rgba($color-white, 0.16);
-$color-white-alpha-20: rgba($color-white, 0.2);
-$color-white-alpha-40: rgba($color-white, 0.4);
 $color-white-alpha-60: rgba($color-white, 0.6);
-$color-white-alpha-70: rgba($color-white, 0.7);
 $color-white-alpha-75: rgba($color-white, 0.75);
 $color-white-alpha-80: rgba($color-white, 0.8);
 $color-white-alpha-90: rgba($color-white, 0.9);
 
-$color-black-alpha-05: rgba($color-black, 0.05);
-$color-black-alpha-06: rgba($color-black, 0.06);
-$color-black-alpha-08: rgba($color-black, 0.08);
-$color-black-alpha-12: rgba($color-black, 0.12);
-$color-black-alpha-16: rgba($color-black, 0.16);
-$color-black-alpha-20: rgba($color-black, 0.2);
-$color-black-alpha-24: rgba($color-black, 0.24);
-$color-black-alpha-30: rgba($color-black, 0.3);
 $color-black-alpha-40: rgba($color-black, 0.4);
-$color-black-alpha-50: rgba($color-black, 0.5);
 $color-black-alpha-60: rgba($color-black, 0.6);
-$color-black-alpha-70: rgba($color-black, 0.7);
-$color-black-alpha-80: rgba($color-black, 0.8);
-$color-black-alpha-90: rgba($color-black, 0.9);
 
-$color-transparent: rgba(0, 0, 0, 0);
-
-$color-ultramarine-dark: #1851b4;
-$color-ultramarine-logo: #3b45fd;
 $color-ultramarine-light: #6191f3;
-$color-ultramarine-dawn: #406ec9;
 $color-ultramarine: #2c6bed;
-
-// Flat colors
-
-$color-crimson: #cf163e;
-$color-vermilion: #c73f0a;
-$color-burlap: #6f6a58;
-$color-forest: #3b7845;
-$color-wintergreen: #1d8663;
-$color-teal: #077d92;
-$color-blue: #336ba3;
-$color-indigo: #6058ca;
-$color-violet: #9932c8;
-$color-plum: #aa377a;
-$color-taupe: #8f616a;
-$color-steel: #71717f;
-
-// Gradient colors
-
-$color-ultramarine-gradient: (
-  deg: 180deg,
-  start: #0552f0,
-  end: $color-ultramarine,
-);
-$color-basil: (
-  deg: 180deg,
-  start: #2f9373,
-  end: #077343,
-);
-$color-ember: (
-  deg: 168deg,
-  start: #e57c00,
-  end: #5e0000,
-);
-$color-fluorescent: (
-  deg: 192deg,
-  start: #ec13dd,
-  end: #1b36c6,
-);
-$color-infrared: (
-  deg: 192deg,
-  start: #f65560,
-  end: #442ced,
-);
-$color-lagoon: (
-  deg: 180deg,
-  start: #004066,
-  end: #32867d,
-);
-$color-midnight: (
-  deg: 180deg,
-  start: #2c2c3a,
-  end: #787891,
-);
-$color-sea: (
-  deg: 180deg,
-  start: #498fd4,
-  end: #2c66a0,
-);
-$color-sublime: (
-  deg: 180deg,
-  start: #6281d5,
-  end: #974460,
-);
-$color-tangerine: (
-  deg: 192deg,
-  start: #db7133,
-  end: #911231,
-);
-
-// Avatars
-
-$avatar-color-A100: (
-  bg: #e3e3fe,
-  fg: #3838f5,
-);
-$avatar-color-A110: (
-  bg: #dde7fc,
-  fg: #1251d3,
-);
-$avatar-color-A120: (
-  bg: #d8e8f0,
-  fg: #086da0,
-);
-$avatar-color-A130: (
-  bg: #cde4cd,
-  fg: #067906,
-);
-$avatar-color-A140: (
-  bg: #eae0fd,
-  fg: #661aff,
-);
-$avatar-color-A150: (
-  bg: #f5e3fe,
-  fg: #9f00f0,
-);
-$avatar-color-A160: (
-  bg: #f6d8ec,
-  fg: #b8057c,
-);
-$avatar-color-A170: (
-  bg: #f5d7d7,
-  fg: #be0404,
-);
-$avatar-color-A180: (
-  bg: #fef5d0,
-  fg: #836b01,
-);
-$avatar-color-A190: (
-  bg: #eae6d5,
-  fg: #7d6f40,
-);
-$avatar-color-A200: (
-  bg: #d2d2dc,
-  fg: #4f4f6d,
-);
-$avatar-color-A210: (
-  bg: #d7d7d9,
-  fg: #5c5c5c,
-);
-
-// Maps for easy manipulation
-
-$avatar-colors: (
-  A100: $avatar-color-A100,
-  A110: $avatar-color-A110,
-  A120: $avatar-color-A120,
-  A130: $avatar-color-A130,
-  A140: $avatar-color-A140,
-  A150: $avatar-color-A150,
-  A160: $avatar-color-A160,
-  A170: $avatar-color-A170,
-  A180: $avatar-color-A180,
-  A190: $avatar-color-A190,
-  A200: $avatar-color-A200,
-  A210: $avatar-color-A210,
-);
-
-$conversation-colors: (
-  'blue': $color-blue,
-  'burlap': $color-burlap,
-  'crimson': $color-crimson,
-  'forest': $color-forest,
-  'indigo': $color-indigo,
-  'plum': $color-plum,
-  'steel': $color-steel,
-  'taupe': $color-taupe,
-  'teal': $color-teal,
-  'vermilion': $color-vermilion,
-  'violet': $color-violet,
-  'wintergreen': $color-wintergreen,
-);
-
-$conversation-colors-gradient: (
-  'ultramarine': $color-ultramarine-gradient,
-  'basil': $color-basil,
-  'ember': $color-ember,
-  'fluorescent': $color-fluorescent,
-  'infrared': $color-infrared,
-  'lagoon': $color-lagoon,
-  'midnight': $color-midnight,
-  'sea': $color-sea,
-  'sublime': $color-sublime,
-  'tangerine': $color-tangerine,
-);
-
-// Used for the safety number change warning banner
-$color-ios-blue-tint: #b0c8f9;
-
-// -- Non-V3 colors
-
-// Used in spinners
-$color-white-alpha-40: rgba($color-white, 0.4);
-
-// Used in tap-to-view error states
-$color-deep-red: #ff261f;
-
-$color-selected-message-background-light: rgba(44, 107, 237, 0.24);
-$color-selected-message-background-dark: $color-gray-65;
diff --git a/sticker-creator/src/components/ArtFrame.module.scss b/sticker-creator/src/components/ArtFrame.module.scss
index 6598adc8fa..0fb7fb432a 100644
--- a/sticker-creator/src/components/ArtFrame.module.scss
+++ b/sticker-creator/src/components/ArtFrame.module.scss
@@ -1,9 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../mixins.scss';
-@import '../colors.scss';
-@import '../fonts.scss';
+@use '../mixins.scss';
+@use '../colors.scss';
+@use '../fonts.scss';
 
 $width: 186px;
 $height: 186px;
@@ -40,26 +40,26 @@ $emoji-height: 64px;
     style: solid;
   }
 
-  @include light-theme() {
-    border-color: $color-gray-25;
-    background: $color-white;
+  @include mixins.light-theme() {
+    border-color: colors.$color-gray-25;
+    background: colors.$color-white;
   }
 
-  @include dark-theme() {
-    border-color: $color-gray-60;
-    background: $color-gray-90;
+  @include mixins.dark-theme() {
+    border-color: colors.$color-gray-60;
+    background: colors.$color-gray-90;
   }
 
   width: $width;
   height: $height;
 
   &[data-drag-active='true'] {
-    @include light-theme() {
-      border-color: $color-ultramarine;
+    @include mixins.light-theme() {
+      border-color: colors.$color-ultramarine;
     }
 
-    @include dark-theme() {
-      border-color: $color-ultramarine-light;
+    @include mixins.dark-theme() {
+      border-color: colors.$color-ultramarine-light;
     }
   }
 }
@@ -80,24 +80,24 @@ $emoji-height: 64px;
   justify-content: center;
   align-items: center;
 
-  @include light-theme() {
-    color: $color-gray-25;
+  @include mixins.light-theme() {
+    color: colors.$color-gray-25;
   }
 
-  @include dark-theme() {
-    color: $color-gray-60;
+  @include mixins.dark-theme() {
+    color: colors.$color-gray-60;
   }
 }
 
 .emoji-picker-spinner {
   composes: spinner;
 
-  @include light-theme() {
-    background-color: $color-gray-05;
+  @include mixins.light-theme() {
+    background-color: colors.$color-gray-05;
   }
 
-  @include dark-theme() {
-    background-color: $color-gray-75;
+  @include mixins.dark-theme() {
+    background-color: colors.$color-gray-75;
   }
 
   padding: 4px;
@@ -113,12 +113,12 @@ $emoji-height: 64px;
     width: $border-width;
     style: dashed;
   }
-  @include light-theme() {
-    border-color: $color-gray-25;
+  @include mixins.light-theme() {
+    border-color: colors.$color-gray-25;
   }
 
-  @include dark-theme() {
-    border-color: $color-gray-60;
+  @include mixins.dark-theme() {
+    border-color: colors.$color-gray-60;
   }
 
   width: $width - (2 * $guide-offset);
@@ -147,18 +147,18 @@ $emoji-height: 64px;
   display: flex;
   justify-content: center;
   align-items: center;
-  font-family: $inter;
+  font-family: fonts.$inter;
   border: none;
   background: none;
   padding: 0;
 
-  filter: drop-shadow(0px 0px 2px $color-black-alpha-60);
+  filter: drop-shadow(0px 0px 2px colors.$color-black-alpha-60);
 
   &::after {
     content: '';
     width: 20px;
     height: 20px;
-    background: $color-white;
+    background: colors.$color-white;
     mask-image: url(/src/assets/icons/x-20.svg);
     -webkit-mask-image: url(/src/assets/icons/x-20.svg);
   }
@@ -178,12 +178,12 @@ $emoji-height: 64px;
   justify-content: center;
   align-items: center;
 
-  @include light-theme() {
-    background-color: $color-gray-05;
+  @include mixins.light-theme() {
+    background-color: colors.$color-gray-05;
   }
 
-  @include dark-theme() {
-    background-color: $color-gray-75;
+  @include mixins.dark-theme() {
+    background-color: colors.$color-gray-75;
   }
 }
 
@@ -205,24 +205,24 @@ $emoji-height: 64px;
   border-radius: 4px;
   background-color: transparent;
   font-size: 14px;
-  font-family: $inter;
+  font-family: fonts.$inter;
 
   &::placeholder {
-    color: $color-gray-45;
+    color: colors.$color-gray-45;
   }
 
   &:focus {
     outline: 0;
-    border-color: $color-accent-blue;
+    border-color: colors.$color-accent-blue;
   }
 
-  @include light-theme() {
-    border: 1px solid $color-gray-15;
-    color: $color-gray-90;
+  @include mixins.light-theme() {
+    border: 1px solid colors.$color-gray-15;
+    color: colors.$color-gray-90;
   }
 
-  @include dark-theme() {
-    border: 1px solid $color-gray-60;
-    color: $color-white;
+  @include mixins.dark-theme() {
+    border: 1px solid colors.$color-gray-60;
+    color: colors.$color-white;
   }
 }
diff --git a/sticker-creator/src/components/ArtPackPreview.module.scss b/sticker-creator/src/components/ArtPackPreview.module.scss
index 2eaf382cf3..91a7364513 100644
--- a/sticker-creator/src/components/ArtPackPreview.module.scss
+++ b/sticker-creator/src/components/ArtPackPreview.module.scss
@@ -1,17 +1,17 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../mixins.scss';
-@import '../colors.scss';
-@import '../fonts.scss';
+@use '../mixins.scss';
+@use '../colors.scss';
+@use '../fonts.scss';
 
 @mixin background() {
-  @include light-theme() {
-    background: $color-white;
+  @include mixins.light-theme() {
+    background: colors.$color-white;
   }
 
-  @include dark-theme() {
-    background: $color-gray-75;
+  @include mixins.dark-theme() {
+    background: colors.$color-gray-75;
   }
 }
 
@@ -36,7 +36,7 @@
   flex-direction: row;
   align-items: center;
   font: {
-    family: $inter;
+    family: fonts.$inter;
     size: 14px;
     weight: 500;
   }
@@ -44,12 +44,12 @@
 
   @include background();
 
-  @include light-theme {
-    color: $color-gray-90;
+  @include mixins.light-theme {
+    color: colors.$color-gray-90;
   }
 
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: colors.$color-gray-05;
   }
 }
 
@@ -67,7 +67,7 @@
   overflow: auto;
   justify-items: center;
 
-  @include small-screen() {
+  @include mixins.small-screen() {
     gap: 4px;
   }
 }
@@ -82,12 +82,12 @@
   padding-inline: 16px;
   display: flex;
 
-  @include light-theme {
-    background: $color-white;
+  @include mixins.light-theme {
+    background: colors.$color-white;
   }
 
-  @include dark-theme {
-    background: $color-gray-60;
+  @include mixins.dark-theme {
+    background: colors.$color-gray-60;
   }
 }
 
@@ -100,7 +100,7 @@
 }
 
 .text {
-  font-family: $inter;
+  font-family: fonts.$inter;
 }
 
 .meta-title {
@@ -111,12 +111,12 @@
     weight: 600;
   }
 
-  @include light-theme {
-    color: $color-gray-95;
+  @include mixins.light-theme {
+    color: colors.$color-gray-95;
   }
 
-  @include dark-theme {
-    color: $color-gray-05;
+  @include mixins.dark-theme {
+    color: colors.$color-gray-05;
   }
 }
 
@@ -128,11 +128,11 @@
     weight: 400;
   }
 
-  @include light-theme {
-    color: $color-gray-60;
+  @include mixins.light-theme {
+    color: colors.$color-gray-60;
   }
 
-  @include dark-theme {
-    color: $color-gray-25;
+  @include mixins.dark-theme {
+    color: colors.$color-gray-25;
   }
 }
diff --git a/sticker-creator/src/components/ShareButtons.module.scss b/sticker-creator/src/components/ShareButtons.module.scss
index 95609e1987..d0aed4c348 100644
--- a/sticker-creator/src/components/ShareButtons.module.scss
+++ b/sticker-creator/src/components/ShareButtons.module.scss
@@ -1,8 +1,8 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../colors.scss';
-@import '../mixins.scss';
+@use '../colors.scss';
+@use '../mixins.scss';
 
 .container {
   display: flex;
@@ -11,14 +11,14 @@
 }
 
 .text {
-  @include light-theme() {
-    border: 1px solid $color-gray-15;
-    color: $color-gray-90;
+  @include mixins.light-theme() {
+    border: 1px solid colors.$color-gray-15;
+    color: colors.$color-gray-90;
   }
 
-  @include dark-theme() {
-    border: 1px solid $color-gray-60;
-    color: $color-white;
+  @include mixins.dark-theme() {
+    border: 1px solid colors.$color-gray-60;
+    color: colors.$color-white;
   }
 }
 
diff --git a/sticker-creator/src/elements/Button.module.scss b/sticker-creator/src/elements/Button.module.scss
index 856f56669b..2b5ce9c553 100644
--- a/sticker-creator/src/elements/Button.module.scss
+++ b/sticker-creator/src/elements/Button.module.scss
@@ -1,9 +1,11 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../mixins.scss';
-@import '../colors.scss';
-@import '../fonts.scss';
+@use 'sass:color';
+
+@use '../mixins.scss';
+@use '../colors.scss';
+@use '../fonts.scss';
 
 .base {
   border: none;
@@ -15,37 +17,53 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-family: $inter;
+  font-family: fonts.$inter;
   font-weight: normal;
   font-size: 14px;
   white-space: nowrap;
 
-  @include light-theme() {
-    background-color: $color-gray-05;
-    color: $color-gray-90;
+  @include mixins.light-theme() {
+    background-color: colors.$color-gray-05;
+    color: colors.$color-gray-90;
   }
 
-  @include dark-theme() {
-    background-color: $color-gray-65;
-    color: $color-gray-05;
+  @include mixins.dark-theme() {
+    background-color: colors.$color-gray-65;
+    color: colors.$color-gray-05;
   }
 
   &:hover {
-    @include light-theme() {
-      background-color: mix($color-black, $color-gray-05, 15%);
+    @include mixins.light-theme() {
+      background-color: color.mix(
+        colors.$color-black,
+        colors.$color-gray-05,
+        15%
+      );
     }
 
-    @include dark-theme() {
-      background-color: mix($color-white, $color-gray-65, 15%);
+    @include mixins.dark-theme() {
+      background-color: color.mix(
+        colors.$color-white,
+        colors.$color-gray-65,
+        15%
+      );
     }
   }
 
   &:active {
-    @include light-theme() {
-      background-color: mix($color-black, $color-gray-05, 25%);
+    @include mixins.light-theme() {
+      background-color: color.mix(
+        colors.$color-black,
+        colors.$color-gray-05,
+        25%
+      );
     }
-    @include dark-theme() {
-      background-color: mix($color-white, $color-gray-65, 25%);
+    @include mixins.dark-theme() {
+      background-color: color.mix(
+        colors.$color-white,
+        colors.$color-gray-65,
+        25%
+      );
     }
   }
 
@@ -56,32 +74,48 @@
 
 .primary {
   composes: base;
-  background-color: $color-ultramarine;
+  background-color: colors.$color-ultramarine;
 
-  @include light-theme() {
-    color: $color-white;
+  @include mixins.light-theme() {
+    color: colors.$color-white;
   }
 
-  @include dark-theme() {
-    color: $color-white;
+  @include mixins.dark-theme() {
+    color: colors.$color-white;
   }
 
   &:hover {
-    @include light-theme() {
-      background-color: mix($color-black, $color-ultramarine, 15%);
+    @include mixins.light-theme() {
+      background-color: color.mix(
+        colors.$color-black,
+        colors.$color-ultramarine,
+        15%
+      );
     }
 
-    @include dark-theme() {
-      background-color: mix($color-white, $color-ultramarine, 15%);
+    @include mixins.dark-theme() {
+      background-color: color.mix(
+        colors.$color-white,
+        colors.$color-ultramarine,
+        15%
+      );
     }
   }
 
   &:active {
-    @include light-theme() {
-      background-color: mix($color-black, $color-ultramarine, 25%);
+    @include mixins.light-theme() {
+      background-color: color.mix(
+        colors.$color-black,
+        colors.$color-ultramarine,
+        25%
+      );
     }
-    @include dark-theme() {
-      background-color: mix($color-white, $color-ultramarine, 25%);
+    @include mixins.dark-theme() {
+      background-color: color.mix(
+        colors.$color-white,
+        colors.$color-ultramarine,
+        25%
+      );
     }
   }
 }
@@ -93,15 +127,15 @@
   padding-block: 0;
   padding-inline: 17px;
 
-  @include light-theme() {
-    color: $color-gray-90;
-    border: 1px solid $color-gray-90;
+  @include mixins.light-theme() {
+    color: colors.$color-gray-90;
+    border: 1px solid colors.$color-gray-90;
     background: transparent;
   }
 
-  @include dark-theme() {
-    color: $color-white;
-    border: 1px solid $color-white;
+  @include mixins.dark-theme() {
+    color: colors.$color-white;
+    border: 1px solid colors.$color-white;
     background: transparent;
   }
 }
@@ -109,15 +143,15 @@
 .pill-primary {
   composes: pill;
 
-  @include light-theme() {
+  @include mixins.light-theme() {
     border: none;
-    background-color: $color-ultramarine;
-    color: $color-white;
+    background-color: colors.$color-ultramarine;
+    color: colors.$color-white;
   }
 
-  @include dark-theme() {
+  @include mixins.dark-theme() {
     border: none;
-    background-color: $color-ultramarine-light;
-    color: $color-white;
+    background-color: colors.$color-ultramarine-light;
+    color: colors.$color-white;
   }
 }
diff --git a/sticker-creator/src/elements/ConfirmDialog.module.scss b/sticker-creator/src/elements/ConfirmDialog.module.scss
index b073e6c400..0500b4ac43 100644
--- a/sticker-creator/src/elements/ConfirmDialog.module.scss
+++ b/sticker-creator/src/elements/ConfirmDialog.module.scss
@@ -1,9 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../mixins.scss';
-@import '../colors.scss';
-@import '../fonts.scss';
+@use '../mixins.scss';
+@use '../colors.scss';
+@use '../fonts.scss';
 
 .base {
   max-width: 468px;
@@ -16,12 +16,12 @@
   border-radius: 8px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 20px 0 rgba(0, 0, 0, 0.33);
 
-  @include light-theme() {
-    background: $color-white;
+  @include mixins.light-theme() {
+    background: colors.$color-white;
   }
 
-  @include dark-theme() {
-    background: $color-gray-75;
+  @include mixins.dark-theme() {
+    background: colors.$color-gray-75;
   }
 }
 
@@ -31,17 +31,17 @@
 
 .text {
   font: {
-    family: $inter;
+    family: fonts.$inter;
     size: 14px;
   }
   margin: 0;
 
-  @include light-theme() {
-    color: $color-gray-90;
+  @include mixins.light-theme() {
+    color: colors.$color-gray-90;
   }
 
-  @include dark-theme() {
-    color: $color-gray-05;
+  @include mixins.dark-theme() {
+    color: colors.$color-gray-05;
   }
 }
 
@@ -50,12 +50,12 @@
   font-weight: 500;
   margin-bottom: 12px;
 
-  @include light-theme() {
-    color: $color-gray-90;
+  @include mixins.light-theme() {
+    color: colors.$color-gray-90;
   }
 
-  @include dark-theme() {
-    color: $color-white;
+  @include mixins.dark-theme() {
+    color: colors.$color-white;
   }
 }
 
@@ -74,15 +74,15 @@
   padding-block: 0;
   padding-inline: 17px;
 
-  @include light-theme() {
-    color: $color-gray-90;
-    border: 1px solid $color-gray-90;
+  @include mixins.light-theme() {
+    color: colors.$color-gray-90;
+    border: 1px solid colors.$color-gray-90;
     background: transparent;
   }
 
-  @include dark-theme() {
-    color: $color-white;
-    border: 1px solid $color-white;
+  @include mixins.dark-theme() {
+    color: colors.$color-white;
+    border: 1px solid colors.$color-white;
     background: transparent;
   }
 }
@@ -90,15 +90,15 @@
 .pill-primary {
   composes: pill;
 
-  @include light-theme() {
+  @include mixins.light-theme() {
     border: none;
-    background-color: $color-ultramarine;
-    color: $color-white;
+    background-color: colors.$color-ultramarine;
+    color: colors.$color-white;
   }
 
-  @include dark-theme() {
+  @include mixins.dark-theme() {
     border: none;
-    background-color: $color-ultramarine-light;
-    color: $color-white;
+    background-color: colors.$color-ultramarine-light;
+    color: colors.$color-white;
   }
 }
diff --git a/sticker-creator/src/elements/CopyText.module.scss b/sticker-creator/src/elements/CopyText.module.scss
index 306134d5a9..0200f9f2df 100644
--- a/sticker-creator/src/elements/CopyText.module.scss
+++ b/sticker-creator/src/elements/CopyText.module.scss
@@ -1,9 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../colors.scss';
-@import '../mixins.scss';
-@import '../fonts.scss';
+@use '../colors.scss';
+@use '../mixins.scss';
+@use '../fonts.scss';
 
 .container {
   flex-grow: 1;
@@ -24,19 +24,19 @@
   border-radius: 4px;
   background-color: transparent;
   font-size: 14px;
-  font-family: $inter;
+  font-family: fonts.$inter;
 
   &::placeholder {
-    color: $color-gray-45;
+    color: colors.$color-gray-45;
   }
 
-  @include light-theme() {
-    border: 1px solid $color-gray-15;
-    color: $color-gray-90;
+  @include mixins.light-theme() {
+    border: 1px solid colors.$color-gray-15;
+    color: colors.$color-gray-90;
   }
 
-  @include dark-theme() {
-    border: 1px solid $color-gray-60;
-    color: $color-white;
+  @include mixins.dark-theme() {
+    border: 1px solid colors.$color-gray-60;
+    color: colors.$color-white;
   }
 }
diff --git a/sticker-creator/src/elements/DropZone.module.scss b/sticker-creator/src/elements/DropZone.module.scss
index 831997a292..216007534d 100644
--- a/sticker-creator/src/elements/DropZone.module.scss
+++ b/sticker-creator/src/elements/DropZone.module.scss
@@ -1,9 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../colors.scss';
-@import '../mixins.scss';
-@import '../fonts.scss';
+@use '../colors.scss';
+@use '../mixins.scss';
+@use '../fonts.scss';
 
 .base {
   width: 100%;
@@ -14,28 +14,28 @@
   flex-direction: column;
   flex-grow: 1;
 
-  @include light-theme() {
-    color: $color-gray-60;
+  @include mixins.light-theme() {
+    color: colors.$color-gray-60;
   }
 
-  @include dark-theme() {
-    color: $color-gray-45;
+  @include mixins.dark-theme() {
+    color: colors.$color-gray-45;
   }
 }
 
 .text {
   margin-block: 16px 0;
   margin-inline: 0;
-  font-family: $inter;
+  font-family: fonts.$inter;
   font-size: 14px;
   font-weight: normal;
 
-  @include light-theme() {
-    color: $color-gray-60;
+  @include mixins.light-theme() {
+    color: colors.$color-gray-60;
   }
 
-  @include dark-theme() {
-    color: $color-gray-45;
+  @include mixins.dark-theme() {
+    color: colors.$color-gray-45;
   }
 }
 
@@ -44,27 +44,27 @@
   border-radius: 12px;
   border: 0;
 
-  @include light-theme() {
-    background: $color-gray-02;
-    color: $color-gray-60;
+  @include mixins.light-theme() {
+    background: colors.$color-gray-02;
+    color: colors.$color-gray-60;
   }
 
-  @include dark-theme() {
-    background: $color-gray-80;
-    color: $color-gray-25;
+  @include mixins.dark-theme() {
+    background: colors.$color-gray-80;
+    color: colors.$color-gray-25;
   }
 }
 
 .active {
   composes: standalone;
 
-  @include light-theme() {
-    border-color: $color-ultramarine;
-    outline: 3px solid $color-ultramarine;
+  @include mixins.light-theme() {
+    border-color: colors.$color-ultramarine;
+    outline: 3px solid colors.$color-ultramarine;
   }
 
-  @include dark-theme() {
-    border-color: $color-ultramarine-light;
-    outline: 3px solid $color-ultramarine-light;
+  @include mixins.dark-theme() {
+    border-color: colors.$color-ultramarine-light;
+    outline: 3px solid colors.$color-ultramarine-light;
   }
 }
diff --git a/sticker-creator/src/elements/LabeledCheckbox.module.scss b/sticker-creator/src/elements/LabeledCheckbox.module.scss
index 8216187fc8..26694901c6 100644
--- a/sticker-creator/src/elements/LabeledCheckbox.module.scss
+++ b/sticker-creator/src/elements/LabeledCheckbox.module.scss
@@ -1,8 +1,8 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../colors.scss';
-@import '../mixins.scss';
+@use '../colors.scss';
+@use '../mixins.scss';
 
 .base {
   display: flex;
@@ -37,20 +37,20 @@
     style: solid;
   }
 
-  @include light-theme() {
-    border-color: $color-gray-60;
+  @include mixins.light-theme() {
+    border-color: colors.$color-gray-60;
   }
 
-  @include dark-theme() {
-    border-color: $color-gray-25;
+  @include mixins.dark-theme() {
+    border-color: colors.$color-gray-25;
   }
 }
 
 .checkbox-checked {
   composes: checkbox;
   border: none;
-  background-color: $color-ultramarine;
-  color: $color-white;
+  background-color: colors.$color-ultramarine;
+  color: colors.$color-white;
 }
 
 .label {
diff --git a/sticker-creator/src/elements/LabeledInput.module.scss b/sticker-creator/src/elements/LabeledInput.module.scss
index 6e59cc86b5..bf8c751ac9 100644
--- a/sticker-creator/src/elements/LabeledInput.module.scss
+++ b/sticker-creator/src/elements/LabeledInput.module.scss
@@ -1,9 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../colors.scss';
-@import '../mixins.scss';
-@import '../fonts.scss';
+@use '../colors.scss';
+@use '../mixins.scss';
+@use '../fonts.scss';
 
 .container {
   display: flex;
@@ -16,7 +16,7 @@
 .label {
   user-select: none;
   font-size: 13px;
-  font-family: $inter;
+  font-family: fonts.$inter;
   font-weight: 500;
 }
 
@@ -30,20 +30,20 @@
   border-radius: 4px;
   background-color: transparent;
   font-size: 14px;
-  font-family: $inter;
+  font-family: fonts.$inter;
 
   &::placeholder {
-    color: $color-gray-45;
+    color: colors.$color-gray-45;
   }
 
-  @include light-theme() {
-    border: 1px solid $color-gray-15;
-    color: $color-gray-90;
+  @include mixins.light-theme() {
+    border: 1px solid colors.$color-gray-15;
+    color: colors.$color-gray-90;
   }
 
-  @include dark-theme() {
-    border: 1px solid $color-gray-60;
-    color: $color-white;
+  @include mixins.dark-theme() {
+    border: 1px solid colors.$color-gray-60;
+    color: colors.$color-white;
   }
 
   &:focus {
@@ -51,12 +51,12 @@
     padding-block: 0;
     padding-inline: 11px;
 
-    @include light-theme() {
-      border: 2px solid $color-ultramarine;
+    @include mixins.light-theme() {
+      border: 2px solid colors.$color-ultramarine;
     }
 
-    @include dark-theme() {
-      border: 2px solid $color-ultramarine-light;
+    @include mixins.dark-theme() {
+      border: 2px solid colors.$color-ultramarine-light;
     }
   }
 }
diff --git a/sticker-creator/src/elements/MessageBubble.module.scss b/sticker-creator/src/elements/MessageBubble.module.scss
index 361bf0d57b..03d69ba284 100644
--- a/sticker-creator/src/elements/MessageBubble.module.scss
+++ b/sticker-creator/src/elements/MessageBubble.module.scss
@@ -1,18 +1,18 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../colors.scss';
-@import '../fonts.scss';
+@use '../colors.scss';
+@use '../fonts.scss';
 
 .base {
-  background-color: $color-ultramarine;
+  background-color: colors.$color-ultramarine;
   padding-block: 6px;
   padding-inline: 12px;
   border-radius: 18px;
-  color: $color-white-alpha-90;
+  color: colors.$color-white-alpha-90;
   font: {
     size: 12px;
-    family: $inter;
+    family: fonts.$inter;
     weight: normal;
   }
 }
diff --git a/sticker-creator/src/elements/MessageMeta.module.scss b/sticker-creator/src/elements/MessageMeta.module.scss
index b443b1c5ae..2667f6f7ed 100644
--- a/sticker-creator/src/elements/MessageMeta.module.scss
+++ b/sticker-creator/src/elements/MessageMeta.module.scss
@@ -1,9 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../mixins.scss';
-@import '../colors.scss';
-@import '../fonts.scss';
+@use '../mixins.scss';
+@use '../colors.scss';
+@use '../fonts.scss';
 
 .base {
   display: flex;
@@ -16,7 +16,7 @@
   margin-inline-start: 6px;
   font: {
     size: 11px;
-    family: $inter;
+    family: fonts.$inter;
     weight: normal;
   }
 }
@@ -28,7 +28,7 @@
 
 .light {
   composes: item;
-  color: $color-gray-60;
+  color: colors.$color-gray-60;
 }
 
 .dark {
diff --git a/sticker-creator/src/elements/PageHeader.module.scss b/sticker-creator/src/elements/PageHeader.module.scss
index fabf9d9489..0592e0a172 100644
--- a/sticker-creator/src/elements/PageHeader.module.scss
+++ b/sticker-creator/src/elements/PageHeader.module.scss
@@ -1,8 +1,8 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../colors.scss';
-@import '../mixins.scss';
+@use '../colors.scss';
+@use '../mixins.scss';
 
 .container {
 }
@@ -14,7 +14,7 @@
   border-bottom-style: solid;
   padding-block: 0;
   padding-inline: 64px;
-  @include small-screen() {
+  @include mixins.small-screen() {
     padding-block: 0;
     padding-inline: 32px;
   }
@@ -23,12 +23,12 @@
   align-items: center;
   flex-shrink: 0;
 
-  @include light-theme() {
-    border-bottom-color: $color-gray-15;
+  @include mixins.light-theme() {
+    border-bottom-color: colors.$color-gray-15;
   }
 
-  @include dark-theme() {
-    border-bottom-color: $color-gray-75;
+  @include mixins.dark-theme() {
+    border-bottom-color: colors.$color-gray-75;
   }
 }
 
diff --git a/sticker-creator/src/elements/ProgressBar.module.scss b/sticker-creator/src/elements/ProgressBar.module.scss
index 532922b889..b242cb896a 100644
--- a/sticker-creator/src/elements/ProgressBar.module.scss
+++ b/sticker-creator/src/elements/ProgressBar.module.scss
@@ -1,27 +1,27 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../colors.scss';
-@import '../mixins.scss';
+@use '../colors.scss';
+@use '../mixins.scss';
 
 .base {
   height: 4px;
   width: 100%;
   max-width: 448px;
 
-  @include light-theme() {
-    background: $color-gray-15;
+  @include mixins.light-theme() {
+    background: colors.$color-gray-15;
   }
 
-  @include dark-theme() {
-    background: $color-gray-75;
+  @include mixins.dark-theme() {
+    background: colors.$color-gray-75;
   }
 }
 
 .bar {
   height: 4px;
   width: 0px;
-  background: $color-ultramarine;
+  background: colors.$color-ultramarine;
 
   transition: width 100ms ease-out;
 }
diff --git a/sticker-creator/src/elements/StickerPreview.module.scss b/sticker-creator/src/elements/StickerPreview.module.scss
index 0f9babcf1d..037cea8f38 100644
--- a/sticker-creator/src/elements/StickerPreview.module.scss
+++ b/sticker-creator/src/elements/StickerPreview.module.scss
@@ -1,8 +1,8 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../mixins.scss';
-@import '../colors.scss';
+@use '../mixins.scss';
+@use '../colors.scss';
 
 .base {
   width: 380px;
@@ -13,12 +13,12 @@
   box-shadow: 0 2px 13px 3px rgba(0, 0, 0, 0.3);
   position: relative;
 
-  @include light-theme() {
-    background: $color-white;
+  @include mixins.light-theme() {
+    background: colors.$color-white;
   }
 
-  @include dark-theme() {
-    background: $color-gray-75;
+  @include mixins.dark-theme() {
+    background: colors.$color-gray-75;
   }
 }
 
@@ -30,13 +30,13 @@
 
 .frame-light {
   composes: frame;
-  background: $color-white;
+  background: colors.$color-white;
   border-radius: 6px 0 0 6px;
 }
 
 .frame-dark {
   composes: frame;
-  background: $color-black;
+  background: colors.$color-black;
   border-radius: 0 6px 6px 0;
 }
 
@@ -52,12 +52,12 @@
   border-width: 0 8px 8px 8px;
   top: -8px;
 
-  @include light-theme() {
-    border-color: transparent transparent $color-white transparent;
+  @include mixins.light-theme() {
+    border-color: transparent transparent colors.$color-white transparent;
   }
 
-  @include dark-theme() {
-    border-color: transparent transparent $color-gray-75 transparent;
+  @include mixins.dark-theme() {
+    border-color: transparent transparent colors.$color-gray-75 transparent;
   }
 }
 
@@ -66,12 +66,12 @@
   border-width: 8px 8px 0 8px;
   bottom: -8px;
 
-  @include light-theme() {
-    border-color: $color-white transparent transparent transparent;
+  @include mixins.light-theme() {
+    border-color: colors.$color-white transparent transparent transparent;
   }
 
-  @include dark-theme() {
-    border-color: $color-gray-75 transparent transparent transparent;
+  @include mixins.dark-theme() {
+    border-color: colors.$color-gray-75 transparent transparent transparent;
   }
 }
 
@@ -80,12 +80,12 @@
   border-width: 8px 8px 8px 0;
   inset-inline-start: -8px;
 
-  @include light-theme() {
-    border-color: transparent $color-white transparent transparent;
+  @include mixins.light-theme() {
+    border-color: transparent colors.$color-white transparent transparent;
   }
 
-  @include dark-theme() {
-    border-color: transparent $color-gray-75 transparent transparent;
+  @include mixins.dark-theme() {
+    border-color: transparent colors.$color-gray-75 transparent transparent;
   }
 }
 
@@ -94,11 +94,11 @@
   border-width: 8px 0 8px 8px;
   inset-inline-end: -8px;
 
-  @include light-theme() {
-    border-color: transparent transparent transparent $color-white;
+  @include mixins.light-theme() {
+    border-color: transparent transparent transparent colors.$color-white;
   }
 
-  @include dark-theme() {
-    border-color: transparent transparent transparent $color-gray-75;
+  @include mixins.dark-theme() {
+    border-color: transparent transparent transparent colors.$color-gray-75;
   }
 }
diff --git a/sticker-creator/src/elements/Toast.module.scss b/sticker-creator/src/elements/Toast.module.scss
index 5d2a611a7a..7b87d03ea3 100644
--- a/sticker-creator/src/elements/Toast.module.scss
+++ b/sticker-creator/src/elements/Toast.module.scss
@@ -1,9 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../mixins.scss';
-@import '../colors.scss';
-@import '../fonts.scss';
+@use '../mixins.scss';
+@use '../colors.scss';
+@use '../fonts.scss';
 
 .base {
   padding-block: 8px;
@@ -11,19 +11,19 @@
   border-radius: 4px;
   border: none;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 20px 0px rgba(0, 0, 0, 0.33);
-  font-family: $inter;
+  font-family: fonts.$inter;
   font-weight: normal;
   font-size: 14px;
   line-height: 18px;
   cursor: pointer;
 
-  @include light-theme() {
-    background-color: $color-gray-75;
-    color: $color-gray-05;
+  @include mixins.light-theme() {
+    background-color: colors.$color-gray-75;
+    color: colors.$color-gray-05;
   }
 
-  @include dark-theme() {
-    background-color: $color-gray-15;
-    color: $color-gray-95;
+  @include mixins.dark-theme() {
+    background-color: colors.$color-gray-15;
+    color: colors.$color-gray-95;
   }
 }
diff --git a/sticker-creator/src/elements/Typography.module.scss b/sticker-creator/src/elements/Typography.module.scss
index dac0ac5935..4da2ca3c8c 100644
--- a/sticker-creator/src/elements/Typography.module.scss
+++ b/sticker-creator/src/elements/Typography.module.scss
@@ -1,12 +1,12 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../colors.scss';
-@import '../mixins.scss';
-@import '../fonts.scss';
+@use '../colors.scss';
+@use '../mixins.scss';
+@use '../fonts.scss';
 
 .base {
-  font-family: $inter;
+  font-family: fonts.$inter;
   margin: 0;
 }
 
@@ -20,12 +20,12 @@
   font-size: 16px;
   line-height: 20px;
 
-  @include light-theme() {
-    color: $color-gray-90;
+  @include mixins.light-theme() {
+    color: colors.$color-gray-90;
   }
 
-  @include dark-theme() {
-    color: $color-gray-05;
+  @include mixins.dark-theme() {
+    color: colors.$color-gray-05;
   }
 }
 
@@ -35,12 +35,12 @@
   line-height: 18px;
   margin-bottom: 8px;
 
-  @include light-theme() {
-    color: $color-gray-90;
+  @include mixins.light-theme() {
+    color: colors.$color-gray-90;
   }
 
-  @include dark-theme() {
-    color: $color-white;
+  @include mixins.dark-theme() {
+    color: colors.$color-white;
   }
 }
 
@@ -49,16 +49,16 @@
   font-size: 13px;
   line-height: 18px;
 
-  @include light-theme() {
-    color: $color-gray-90;
+  @include mixins.light-theme() {
+    color: colors.$color-gray-90;
   }
 
-  @include dark-theme() {
-    color: $color-white;
+  @include mixins.dark-theme() {
+    color: colors.$color-white;
   }
 
   a {
-    color: $color-ultramarine;
+    color: colors.$color-ultramarine;
     text-decoration: none;
   }
 }
@@ -69,11 +69,11 @@
 }
 
 .secondary {
-  @include light-theme() {
-    color: $color-gray-60;
+  @include mixins.light-theme() {
+    color: colors.$color-gray-60;
   }
 
-  @include dark-theme() {
-    color: $color-gray-25;
+  @include mixins.dark-theme() {
+    color: colors.$color-gray-25;
   }
 }
diff --git a/sticker-creator/src/fonts.scss b/sticker-creator/src/fonts.scss
index 5afa38504a..fee20606f3 100644
--- a/sticker-creator/src/fonts.scss
+++ b/sticker-creator/src/fonts.scss
@@ -67,79 +67,8 @@ $inter: Inter, 'Source Sans Pro', 'Source Han Sans', 'Signal Emoji Large',
   }
 }
 
-@mixin font-title-1 {
-  font-weight: 600;
-  font-size: 26px;
-  line-height: 32px;
-  letter-spacing: -0.56px;
-}
-
-@mixin font-title-2 {
-  font-weight: 600;
-  font-size: 20px;
-  line-height: 26px;
-  letter-spacing: -0.34px;
-}
-
 @mixin font-body-1 {
   font-size: 14px;
   line-height: 20px;
   letter-spacing: -0.08px;
 }
-@mixin font-body-1-bold {
-  @include font-body-1;
-  font-weight: 600;
-}
-@mixin font-body-1-italic {
-  @include font-body-1;
-  font-style: italic;
-}
-@mixin font-body-1-bold-italic {
-  @include font-body-1;
-  font-weight: 600;
-  font-style: italic;
-}
-
-@mixin font-body-2 {
-  font-size: 13px;
-  line-height: 18px;
-  letter-spacing: -0.03px;
-}
-@mixin font-body-2-bold {
-  @include font-body-2;
-  font-weight: 600;
-}
-@mixin font-body-2-medium {
-  @include font-body-2;
-  font-weight: 500;
-}
-@mixin font-body-2-italic {
-  @include font-body-2;
-  font-style: italic;
-}
-@mixin font-body-2-bold-italic {
-  @include font-body-2;
-  font-weight: 600;
-  font-style: italic;
-}
-
-@mixin font-subtitle {
-  font-size: 12px;
-  line-height: 16px;
-  letter-spacing: 0;
-}
-
-@mixin font-caption {
-  font-size: 11px;
-  line-height: 14px;
-  letter-spacing: 0.06px;
-}
-@mixin font-caption-bold {
-  @include font-caption;
-  font-weight: 600;
-}
-@mixin font-caption-bold-italic {
-  @include font-caption;
-  font-weight: 600;
-  font-style: italic;
-}
diff --git a/sticker-creator/src/index.scss b/sticker-creator/src/index.scss
index 4dda24f67e..84c8debfc3 100644
--- a/sticker-creator/src/index.scss
+++ b/sticker-creator/src/index.scss
@@ -1,9 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import './mixins.scss';
-@import './colors.scss';
-@import './fonts.scss';
+@use './mixins.scss';
+@use './colors.scss';
+@use './fonts.scss';
 
 html {
   height: 100%;
@@ -25,16 +25,16 @@ body {
   margin: 0;
   user-select: none;
 
-  @include font-family;
-  @include font-body-1;
+  @include fonts.font-family;
+  @include fonts.font-body-1;
 
-  @include light-theme() {
-    background-color: $color-white;
-    color: $color-gray-90;
+  @include mixins.light-theme() {
+    background-color: colors.$color-white;
+    color: colors.$color-gray-90;
   }
-  @include dark-theme() {
-    background-color: $color-gray-95;
-    color: $color-gray-05;
+  @include mixins.dark-theme() {
+    background-color: colors.$color-gray-95;
+    color: colors.$color-gray-05;
   }
 }
 
@@ -54,31 +54,31 @@ button {
 
 button.grey {
   border-radius: 5px;
-  border: solid 1px $color-gray-25;
+  border: solid 1px colors.$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: colors.$color-gray-60;
+    background: colors.$color-gray-02;
+    box-shadow: 0 0 10px -5px colors.$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 colors.$color-gray-25;
+    color: colors.$color-gray-60;
+    background: colors.$color-gray-02;
+    box-shadow: 0 0 10px -5px colors.$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 colors.$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 colors.$color-white-alpha-80;
     }
   }
 
@@ -93,11 +93,11 @@ button.grey {
 }
 
 a {
-  @include light-theme() {
-    color: $color-gray-90;
+  @include mixins.light-theme() {
+    color: colors.$color-gray-90;
   }
-  @include dark-theme() {
-    color: $color-gray-05;
+  @include mixins.dark-theme() {
+    color: colors.$color-gray-05;
   }
 }
 
@@ -106,12 +106,12 @@ a {
   flex-direction: column;
   min-height: 100vh;
 
-  @include light-theme() {
-    background-color: $color-white;
+  @include mixins.light-theme() {
+    background-color: colors.$color-white;
   }
 
-  @include dark-theme() {
-    background-color: $color-gray-90;
+  @include mixins.dark-theme() {
+    background-color: colors.$color-gray-90;
   }
 }
 
@@ -122,7 +122,7 @@ a {
 
   .epr-search,
   .epr-emoji-category-label {
-    font-family: $inter;
+    font-family: fonts.$inter;
   }
 
   button.epr-emoji {
diff --git a/sticker-creator/src/mixins.scss b/sticker-creator/src/mixins.scss
index 94b91f1b79..2c3c808adb 100644
--- a/sticker-creator/src/mixins.scss
+++ b/sticker-creator/src/mixins.scss
@@ -13,32 +13,8 @@
   }
 }
 
-// Icons
-
-@mixin color-svg($svg, $color, $stretch: true, $mask-origin: null) {
-  -webkit-mask: url($svg) no-repeat center;
-  @if $stretch {
-    -webkit-mask-size: 100%;
-  }
-  @if $mask-origin {
-    -webkit-mask-origin: $mask-origin;
-  }
-  background-color: $color;
-  @media (forced-colors: active) {
-    background-color: CanvasText;
-  }
-}
-
 // Other
 
-@mixin popper-shadow() {
-  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;
-  }
-}
-
 @mixin small-screen() {
   @media screen and (max-width: 800px) {
     @content;
diff --git a/sticker-creator/src/routes/art/AppStage.module.scss b/sticker-creator/src/routes/art/AppStage.module.scss
index bfc092d622..36e212b45a 100644
--- a/sticker-creator/src/routes/art/AppStage.module.scss
+++ b/sticker-creator/src/routes/art/AppStage.module.scss
@@ -1,7 +1,7 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../../mixins.scss';
+@use '../../mixins.scss';
 
 .container {
   display: flex;
@@ -34,7 +34,7 @@
   padding-block: 0;
   padding-inline: 64px;
 
-  @include small-screen() {
+  @include mixins.small-screen() {
     padding-block: 0;
     padding-inline: 32px;
   }
@@ -55,7 +55,7 @@
   flex-direction: row;
   align-items: center;
 
-  @include small-screen() {
+  @include mixins.small-screen() {
     margin-block: 16px;
     margin-inline: 32px;
   }
diff --git a/sticker-creator/src/routes/art/MetaStage.module.scss b/sticker-creator/src/routes/art/MetaStage.module.scss
index 355279d30c..300e2b52a6 100644
--- a/sticker-creator/src/routes/art/MetaStage.module.scss
+++ b/sticker-creator/src/routes/art/MetaStage.module.scss
@@ -1,9 +1,9 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../../colors.scss';
-@import '../../mixins.scss';
-@import '../../fonts.scss';
+@use '../../colors.scss';
+@use '../../mixins.scss';
+@use '../../fonts.scss';
 
 .main {
   display: flex;
@@ -28,16 +28,16 @@
 .label {
   user-select: none;
   font-size: 13px;
-  font-family: $inter;
+  font-family: fonts.$inter;
   font-weight: 500;
   margin: 0;
 
-  @include light-theme() {
-    color: $color-gray-90;
+  @include mixins.light-theme() {
+    color: colors.$color-gray-90;
   }
 
-  @include dark-theme() {
-    color: $color-white;
+  @include mixins.dark-theme() {
+    color: colors.$color-white;
   }
 }
 
@@ -68,21 +68,21 @@
     width: 1px;
   }
 
-  @include light-theme() {
-    border-color: $color-gray-60;
+  @include mixins.light-theme() {
+    border-color: colors.$color-gray-60;
   }
 
-  @include dark-theme() {
-    border-color: $color-gray-25;
+  @include mixins.dark-theme() {
+    border-color: colors.$color-gray-25;
   }
 
   &[data-drag-active='true'] {
-    @include light-theme() {
-      border-color: $color-ultramarine;
+    @include mixins.light-theme() {
+      border-color: colors.$color-ultramarine;
     }
 
-    @include dark-theme() {
-      border-color: $color-ultramarine-light;
+    @include mixins.dark-theme() {
+      border-color: colors.$color-ultramarine-light;
     }
   }
 }
@@ -96,12 +96,12 @@
   height: 32px;
   border-radius: 16px;
 
-  @include light-theme() {
-    background-color: $color-gray-05;
+  @include mixins.light-theme() {
+    background-color: colors.$color-gray-05;
   }
 
-  @include dark-theme() {
-    background-color: $color-gray-75;
+  @include mixins.dark-theme() {
+    background-color: colors.$color-gray-75;
   }
 
   &::after {
@@ -117,12 +117,12 @@
     -webkit-mask-image: url(/src/assets/icons/compose-outline-24.svg);
     -webkit-mask-size: 22px;
 
-    @include light-theme() {
-      background: $color-black;
+    @include mixins.light-theme() {
+      background: colors.$color-black;
     }
 
-    @include dark-theme() {
-      background: $color-white-alpha-75;
+    @include mixins.dark-theme() {
+      background: colors.$color-white-alpha-75;
     }
   }
 }
diff --git a/sticker-creator/src/routes/art/ShareStage.module.scss b/sticker-creator/src/routes/art/ShareStage.module.scss
index 805cfe7935..d9fa6801f2 100644
--- a/sticker-creator/src/routes/art/ShareStage.module.scss
+++ b/sticker-creator/src/routes/art/ShareStage.module.scss
@@ -1,7 +1,7 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../../mixins.scss';
+@use '../../mixins.scss';
 
 .main {
   display: flex;
diff --git a/sticker-creator/src/routes/art/UploadStage.module.scss b/sticker-creator/src/routes/art/UploadStage.module.scss
index d3325099b6..5f94c517b9 100644
--- a/sticker-creator/src/routes/art/UploadStage.module.scss
+++ b/sticker-creator/src/routes/art/UploadStage.module.scss
@@ -1,8 +1,8 @@
 // Copyright 2023 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
-@import '../../mixins.scss';
-@import '../../colors.scss';
+@use '../../mixins.scss';
+@use '../../colors.scss';
 
 .base {
   height: 100%;
@@ -17,12 +17,12 @@
   line-height: 18px;
   font-weight: 400;
 
-  @include light-theme() {
-    color: $color-gray-60;
+  @include mixins.light-theme() {
+    color: colors.$color-gray-60;
   }
 
-  @include dark-theme() {
-    color: $color-gray-45;
+  @include mixins.dark-theme() {
+    color: colors.$color-gray-45;
   }
 }
 
diff --git a/sticker-creator/vite.config.ts b/sticker-creator/vite.config.ts
index 06e85ff52d..8fa6b8f540 100644
--- a/sticker-creator/vite.config.ts
+++ b/sticker-creator/vite.config.ts
@@ -3,6 +3,7 @@
 
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import * as sass from 'sass';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -10,6 +11,14 @@ export default defineConfig({
     modules: {
       localsConvention: 'camelCaseOnly',
     },
+    preprocessorOptions: {
+      scss: {
+        // setting the version number is not working for some reason
+        fatalDeprecations: Object.values(sass.deprecations)
+          .filter(dep => dep.status !== 'obsolete')
+          .map(dep => dep.id),
+      },
+    },
   },
   worker: {
     format: 'es',