From 14dfbd613ea33770c507cf0562a9352608c4dba8 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Thu, 2 Jul 2026 15:58:27 +0000
Subject: [PATCH 1/2] fix: resolve Sass deprecations and CSS deep combinator
 issues

- Replace @import with @use/@forward across all SCSS files
- Replace / division operator with math.div() in error-message and themes
- Replace darken() with color.adjust() in _themes.scss
- Replace deprecated >>> deep combinator with ::ng-deep
- Add @use 'sass:math' and @use 'sass:color' where needed

Co-Authored-By: Toby Drinkall <toby.drinkall@cognition.ai>
---
 src/app/app.component.scss                          |  4 ++--
 src/app/core/footer/footer.component.scss           |  4 ++--
 src/app/core/header/header.component.scss           |  4 ++--
 src/app/core/settings/settings.component.scss       |  4 ++--
 src/app/feeds/feed/feed.component.scss              |  4 ++--
 src/app/feeds/item/item.component.scss              |  4 ++--
 src/app/item-details/comment/comment.component.scss |  6 +++---
 src/app/item-details/item-details.component.scss    |  4 ++--
 .../error-message/error-message.component.scss      | 13 +++++++------
 .../shared/components/loader/loader.component.scss  |  4 ++--
 src/app/shared/scss/_themes.scss                    | 12 +++++++-----
 src/app/user/user.component.scss                    |  6 +++---
 src/styles.scss                                     |  2 +-
 13 files changed, 37 insertions(+), 34 deletions(-)

diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index c0b93891e..68eb5c52d 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,5 +1,5 @@
-@import "./shared/scss/media";
-@import "./shared/scss/theme_variables";
+@use "./shared/scss/media" as *;
+@use "./shared/scss/theme_variables" as *;
 
 .body-cover {
   width: 100%;
diff --git a/src/app/core/footer/footer.component.scss b/src/app/core/footer/footer.component.scss
index 8adac775d..d77e88865 100644
--- a/src/app/core/footer/footer.component.scss
+++ b/src/app/core/footer/footer.component.scss
@@ -1,5 +1,5 @@
-@import "../../shared/scss/media";
-@import "../../shared/scss/theme_variables";
+@use "../../shared/scss/media" as *;
+@use "../../shared/scss/theme_variables" as *;
 
 #footer {
   position: relative;
diff --git a/src/app/core/header/header.component.scss b/src/app/core/header/header.component.scss
index 75a262e76..530749709 100644
--- a/src/app/core/header/header.component.scss
+++ b/src/app/core/header/header.component.scss
@@ -1,5 +1,5 @@
-@import "../../shared/scss/media";
-@import "../../shared/scss/theme_variables";
+@use "../../shared/scss/media" as *;
+@use "../../shared/scss/theme_variables" as *;
 
 #header {
   color: #fff;
diff --git a/src/app/core/settings/settings.component.scss b/src/app/core/settings/settings.component.scss
index 689da6584..06d9eec5a 100644
--- a/src/app/core/settings/settings.component.scss
+++ b/src/app/core/settings/settings.component.scss
@@ -1,5 +1,5 @@
-@import "../../shared/scss/media";
-@import "../../shared/scss/theme_variables";
+@use "../../shared/scss/media" as *;
+@use "../../shared/scss/theme_variables" as *;
 
 .overlay {
   position: fixed;
diff --git a/src/app/feeds/feed/feed.component.scss b/src/app/feeds/feed/feed.component.scss
index febcd8cdd..f370e73a3 100644
--- a/src/app/feeds/feed/feed.component.scss
+++ b/src/app/feeds/feed/feed.component.scss
@@ -1,5 +1,5 @@
-@import "../../shared/scss/media";
-@import "../../shared/scss/theme_variables";
+@use "../../shared/scss/media" as *;
+@use "../../shared/scss/theme_variables" as *;
 
 a {
   text-decoration: none;
diff --git a/src/app/feeds/item/item.component.scss b/src/app/feeds/item/item.component.scss
index 7f985c9c7..7d8a8e342 100644
--- a/src/app/feeds/item/item.component.scss
+++ b/src/app/feeds/item/item.component.scss
@@ -1,5 +1,5 @@
-@import "../../shared/scss/media";
-@import "../../shared/scss/theme_variables";
+@use "../../shared/scss/media" as *;
+@use "../../shared/scss/theme_variables" as *;
 
 p {
     margin: 2px 0;
diff --git a/src/app/item-details/comment/comment.component.scss b/src/app/item-details/comment/comment.component.scss
index 83992b13c..867505b8c 100644
--- a/src/app/item-details/comment/comment.component.scss
+++ b/src/app/item-details/comment/comment.component.scss
@@ -1,7 +1,7 @@
-@import "../../shared/scss/media";
-@import "../../shared/scss/theme_variables";
+@use "../../shared/scss/media" as *;
+@use "../../shared/scss/theme_variables" as *;
 
-:host >>> {
+::ng-deep {
   a {
     font-weight: bold;
     text-decoration: none;
diff --git a/src/app/item-details/item-details.component.scss b/src/app/item-details/item-details.component.scss
index adde0bd7c..6da9a69c1 100644
--- a/src/app/item-details/item-details.component.scss
+++ b/src/app/item-details/item-details.component.scss
@@ -1,5 +1,5 @@
-@import "../shared/scss/media";
-@import "../shared/scss/theme_variables";
+@use "../shared/scss/media" as *;
+@use "../shared/scss/theme_variables" as *;
 
 .main-content {
   position: relative;
diff --git a/src/app/shared/components/error-message/error-message.component.scss b/src/app/shared/components/error-message/error-message.component.scss
index eb5cc01e8..4597d7956 100644
--- a/src/app/shared/components/error-message/error-message.component.scss
+++ b/src/app/shared/components/error-message/error-message.component.scss
@@ -1,5 +1,6 @@
-@import "../../scss/media";
-@import "../../scss/theme_variables";
+@use "sass:math";
+@use "../../scss/media" as *;
+@use "../../scss/theme_variables" as *;
 
 .error-section {
   height: 300px;
@@ -65,9 +66,9 @@
           content: "";
           position: absolute;
           top: 100%;
-          left: $skull-size / 15;
-          border-right: $skull-size / 20 solid transparent;
-          border-left: $skull-size / 40 solid transparent;
+          left: math.div($skull-size, 15);
+          border-right: math.div($skull-size, 20) solid transparent;
+          border-left: math.div($skull-size, 40) solid transparent;
         }
       }
     }
@@ -77,7 +78,7 @@
       position: absolute;
       top: 75%;
       left: 30%;
-      border-radius: 0 0 $skull-size / 10 $skull-size / 10;
+      border-radius: 0 0 math.div($skull-size, 10) math.div($skull-size, 10);
       &:before {
         content: "";
         position: absolute;
diff --git a/src/app/shared/components/loader/loader.component.scss b/src/app/shared/components/loader/loader.component.scss
index 625d0fe8b..c23880f59 100644
--- a/src/app/shared/components/loader/loader.component.scss
+++ b/src/app/shared/components/loader/loader.component.scss
@@ -1,5 +1,5 @@
-@import "../../scss/media";
-@import "../../scss/theme_variables";
+@use "../../scss/media" as *;
+@use "../../scss/theme_variables" as *;
 
 .loader {
   -webkit-animation: load1 1s infinite ease-in-out;
diff --git a/src/app/shared/scss/_themes.scss b/src/app/shared/scss/_themes.scss
index 231ed7cf9..fb560ed66 100644
--- a/src/app/shared/scss/_themes.scss
+++ b/src/app/shared/scss/_themes.scss
@@ -1,5 +1,7 @@
-@import "./media";
-@import "./theme_variables";
+@use "sass:math";
+@use "sass:color";
+@use "./media" as *;
+@use "./theme_variables" as *;
 
 /* ----------------------------------
 
@@ -142,10 +144,10 @@
               }
 
               &:before {
-                border-top: $skull-size / 8 solid $wrapper-background-color;
+                border-top: math.div($skull-size, 8) solid $wrapper-background-color;
 
                 @media #{$mobile-only} {
-                  border-top: $skull-size / 8 solid $wrapper-mobile-background-color;
+                  border-top: math.div($skull-size, 8) solid $wrapper-mobile-background-color;
                 }
               }
             }
@@ -230,7 +232,7 @@
   $theme-amoledblack-body-background-color,
   $theme-amoledblack-text-color,
   $theme-amoledblack-text-color,
-  darken($theme-amoledblack-text-color, 33%),
+  color.adjust($theme-amoledblack-text-color, $lightness: -33%),
   $theme-amoledblack-body-background-color,
   $theme-amoledblack-subtext-color,
   $theme-amoledblack-secondary-color,
diff --git a/src/app/user/user.component.scss b/src/app/user/user.component.scss
index c5fc9af57..bf2772a0f 100644
--- a/src/app/user/user.component.scss
+++ b/src/app/user/user.component.scss
@@ -1,7 +1,7 @@
-@import "../shared/scss/media";
-@import "../shared/scss/theme_variables";
+@use "../shared/scss/media" as *;
+@use "../shared/scss/theme_variables" as *;
 
-:host >>> pre {
+::ng-deep pre {
   white-space: pre-wrap;
 }
 
diff --git a/src/styles.scss b/src/styles.scss
index 3e06b9378..88dbe5716 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,4 +1,4 @@
-@import "./app/shared/scss/themes";
+@use "./app/shared/scss/themes";
 
 html {
   height: 100%;

From 952822bd61f68619c1c60bab82441d18e1b56128 Mon Sep 17 00:00:00 2001
From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Date: Thu, 2 Jul 2026 16:01:54 +0000
Subject: [PATCH 2/2] fix: preserve :host scoping with ::ng-deep to prevent
 style leaks

Co-Authored-By: Toby Drinkall <toby.drinkall@cognition.ai>
---
 src/app/item-details/comment/comment.component.scss | 2 +-
 src/app/user/user.component.scss                    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/item-details/comment/comment.component.scss b/src/app/item-details/comment/comment.component.scss
index 867505b8c..a7e677f4f 100644
--- a/src/app/item-details/comment/comment.component.scss
+++ b/src/app/item-details/comment/comment.component.scss
@@ -1,7 +1,7 @@
 @use "../../shared/scss/media" as *;
 @use "../../shared/scss/theme_variables" as *;
 
-::ng-deep {
+:host ::ng-deep {
   a {
     font-weight: bold;
     text-decoration: none;
diff --git a/src/app/user/user.component.scss b/src/app/user/user.component.scss
index bf2772a0f..3bfc72d0d 100644
--- a/src/app/user/user.component.scss
+++ b/src/app/user/user.component.scss
@@ -1,7 +1,7 @@
 @use "../shared/scss/media" as *;
 @use "../shared/scss/theme_variables" as *;
 
-::ng-deep pre {
+:host ::ng-deep pre {
   white-space: pre-wrap;
 }