From cc7fa8232ac45ae66aa25022f5118763ee671e47 Mon Sep 17 00:00:00 2001
From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com>
Date: Thu, 4 Jun 2026 22:40:48 +0700
Subject: [PATCH] Task/resolve warnings in angular-sass plugin (#6973)

* feat(client): migrate table import to @use

* feat(client): migrate bootstrap import to @use

* feat(client): implement color channel

* feat(client): migrate svgmap import to @use
---
 apps/client/src/styles.scss | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index 4321622a1..045de2eb6 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -1,10 +1,11 @@
 @use '@angular/material' as mat;
+@use 'sass:color';
 
-@import './styles/bootstrap';
-@import './styles/table';
-@import './styles/variables';
+@use './styles/bootstrap';
+@use './styles/table' as table;
+@use './styles/variables' as variables;
 
-@import 'svgmap/style.min';
+@use 'svgmap/style.min';
 
 :root {
   --dark-background: rgb(25, 25, 25);
@@ -12,8 +13,10 @@
   --light-background: rgb(255, 255, 255);
 
   --dark-primary-text:
-    #{red($dark-primary-text)}, #{green($dark-primary-text)},
-    #{blue($dark-primary-text)}, #{alpha($dark-primary-text)};
+    #{color.channel(variables.$dark-primary-text, 'red')},
+    #{color.channel(variables.$dark-primary-text, 'green')},
+    #{color.channel(variables.$dark-primary-text, 'blue')},
+    #{color.channel(variables.$dark-primary-text, 'alpha')};
   --dark-secondary-text: 0, 0, 0, 0.54;
   --dark-accent-text: 0, 0, 0, 0.87;
   --dark-warn-text: 0, 0, 0, 0.87;
@@ -21,8 +24,10 @@
   --dark-dividers: 0, 0, 0, 0.12;
   --dark-focused: 0, 0, 0, 0.12;
   --light-primary-text:
-    #{red($light-primary-text)}, #{green($light-primary-text)},
-    #{blue($light-primary-text)}, #{alpha($light-primary-text)};
+    #{color.channel(variables.$light-primary-text, 'red')},
+    #{color.channel(variables.$light-primary-text, 'green')},
+    #{color.channel(variables.$light-primary-text, 'blue')},
+    #{color.channel(variables.$light-primary-text, 'alpha')};
   --light-secondary-text: 255, 255, 255, 0.7;
   --light-accent-text: 255, 255, 255, 1;
   --light-warn-text: 255, 255, 255, 1;
@@ -240,7 +245,7 @@ body {
     }
 
     .gf-table {
-      @include gf-table(true);
+      @include table.gf-table(true);
     }
 
     .mat-mdc-dialog-container {
@@ -353,7 +358,7 @@ ngx-skeleton-loader {
 }
 
 .gf-table {
-  @include gf-table;
+  @include table.gf-table;
 }
 
 .gf-text-wrap-balance {