refactor(styles): migrate to Sass modules, cleanup

Author: xidedix

angular.json

@@ -44,7 +44,7 @@
             "allowedCommonJsDependencies": [],
             "stylePreprocessorOptions": {
               "sass": {
-                "silenceDeprecations": ["import"]
+                "silenceDeprecations": []
               }
             }
           },

src/scss/_custom.scss

@@ -1,10 +1,10 @@
 // Here you can add other styles
 
 // custom .chartjs-tooltip-body-item padding
-@import "charts";
+@use "charts";
 
 // custom tweaks for scrollbar styling (wip)
-@import "scrollbar";
+@use "scrollbar";
 
  // custom calendar today cell color
 .calendar-cell.today {

src/scss/_examples.scss

@@ -1,5 +1,6 @@
-/* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */
-$enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-variable-default */
+@use "@coreui/coreui/scss/variables" as *;
+@use "@coreui/coreui/scss/mixins/breakpoints" as *;
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
 
 .example {
   &:not(:first-child) {
@@ -8,7 +9,6 @@ $enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-varia
 
   .tab-content {
     background-color: var(--#{$prefix}tertiary-bg);
-    //background-color: rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity, 1)) !important;
   }
 
   & + p {
@@ -107,3 +107,9 @@ $enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-varia
     }
   }
 }
+
+@include color-mode(dark) {
+  .example .tab-content {
+    background-color: var(--#{$prefix}secondary-bg);
+  }
+}

src/scss/_scrollbar.scss

@@ -28,21 +28,3 @@
   background: #444;
 }
 
-.dark-theme::-webkit-scrollbar-thumb {
-  background: var(--cui-gray-600, #444);
-}
-
-.dark-theme::-webkit-scrollbar-thumb:hover {
-  background: var(--cui-gray-400, #999);
-}
-
-.ng-scroll-content {
-  display: flex !important;
-}
-
-.ng-scrollbar:not(.overflow) .ng-scrollbar-wrapper[verticalused="false"] {
-  //background-color: #e797a5;
-    .ng-scroll-viewport {
-      display: flex;
-    }
-}

src/scss/_theme.scss

@@ -1,11 +1,13 @@
+@use "@coreui/coreui/scss/mixins/transition" as *;
+@use "@coreui/coreui/scss/mixins/color-mode" as *;
+
 body {
   background-color: var(--cui-tertiary-bg);
 }
 
 .wrapper {
   width: 100%;
-  @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0));
-  @include ltr-rtl("padding-right", var(--cui-sidebar-occupy-end, 0));
+  padding-inline: var(--cui-sidebar-occupy-start, 0) var(--cui-sidebar-occupy-end, 0);
   will-change: auto;
   @include transition(padding .15s);
 }
@@ -33,13 +35,13 @@ body {
 }
 
 .sidebar-toggler {
-  @include ltr-rtl("margin-left", auto);
+  margin-inline-start: auto;
 }
 
 .sidebar-narrow,
 .sidebar-narrow-unfoldable:not(:hover) {
   .sidebar-toggler {
-    @include ltr-rtl("margin-right", auto);
+    margin-inline-end: auto;
   }
 }
 
@@ -51,14 +53,12 @@ body {
   min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
 }
 
-@if $enable-dark-mode {
-  @include color-mode(dark) {
-    body {
-      background-color: var(--cui-dark-bg-subtle);
-    }
+@include color-mode(dark) {
+  body {
+    background-color: var(--cui-dark-bg-subtle);
+  }
 
-    .footer {
-      --cui-footer-bg: var(--cui-body-bg);
-    }
+  .footer {
+    --cui-footer-bg: var(--cui-body-bg);
   }
 }

src/scss/_variables.scss

@@ -1,23 +1,23 @@
 /* You can add global styles to this file, and also import other style files */
 
-// If you want to override variables do it here
-@import "variables";
-
 // Import styles with default layout.
-@import "@coreui/coreui/scss/coreui";
+@use "@coreui/coreui/scss/coreui" as * with (
+  $enable-deprecation-messages: false
+);
 
 // Import Chart.js custom tooltips styles
-@import "@coreui/chartjs/scss/coreui-chartjs";
+@use "@coreui/chartjs/scss/coreui-chartjs";
 
 // Custom styles for this theme
-@import "theme";
+@use "theme";
 
 // Some temp fixes
-//@import "fixes";
+//@use "fixes";
 
 // If you want to add custom CSS you can put it here.
-@import "custom";
+@use "custom";
 
 // Examples
 // We use those styles to show code examples, you should remove them in your application.
-@import "examples";
+@use "examples";
+