fix: Migrate to new SASS module system

https://sass-lang.com/documentation/breaking-changes/import/

Originally, Sass used @import rules to load other files with a single global namespace, with all built-in functions also available globally. We’re deprecating both Sass @import rules and global built-in functions now that the module system (@use and @forward rules) has been available for several years.

$ npm install -g sass-migrator
$ sass-migrator module --migrate-deps src/assets/style.scss

Author: uncomputable

src/assets/style/components/analysis.scss

@@ -1,8 +1,9 @@
+@use "../helpers";
 
 .analysis {
     margin-top: 40px;
     padding: 30px;
-    background-color: $background-light;
+    background-color: helpers.$background-light;
     border-radius: 7.5px;
 
     .analysis-header {
@@ -54,18 +55,18 @@
 
             border: 1px solid rgba(255, 255, 255, 0.10);
             padding: 20px;
-            background-color: $background-dark;
+            background-color: helpers.$background-dark;
 
             .analysis-item-label {
                 font-family: 'rigid-square';
-                color: $text-white;
+                color: helpers.$text-white;
                 font-size: 20px;
                 font-style: normal;
                 font-weight: 700;
                 line-height: normal;
             }
             .analysis-item-data {
-                color: $text-grey;
+                color: helpers.$text-grey;
                 font-size: 16px;
                 font-style: normal;
                 font-weight: 400;
@@ -82,7 +83,7 @@
         padding: 10px;
         overflow-x: scroll;
 
-        scrollbar-color: $background-dark #b00000;
+        scrollbar-color: helpers.$background-dark #b00000;
         scrollbar-width: thin;
     }
 

src/assets/style/components/merkle.scss

@@ -1,15 +1,16 @@
+@use "../helpers";
 
 .merkle {
     margin-top: 40px;
     padding: 30px;
-    background-color: $background-light;
+    background-color: helpers.$background-light;
 
     h2 {
         margin: 6px 0;
     }
 
     li {
-        color: $text-grey;
+        color: helpers.$text-grey;
         word-wrap: break-word;
     }
 }

src/assets/style/components/merkle_graph.scss

@@ -1,3 +1,4 @@
+@use "../helpers";
 
 .merkle_graph {
     position: relative;
@@ -7,7 +8,7 @@
         margin-top: 20px;
         border-radius: 7.5px;
         svg {
-            background-color: $background-dark;
+            background-color: helpers.$background-dark;
             max-width: 100%;
             max-height: 100%;
             border-radius: 7.5px;
@@ -21,14 +22,14 @@
             stroke-width: 2;
         }
         rect {
-            fill: $background-dark;
+            fill: helpers.$background-dark;
             stroke: #4f4f4f;
             stroke-width: 1;
         }
 
         .node-full-text{
             visibility: hidden;
-            stroke: $background-dark;
+            stroke: helpers.$background-dark;
             stroke-width: 4;
             fill: white;
             paint-order: stroke fill;

src/assets/style/components/program_window/program_input.scss

@@ -1,13 +1,15 @@
+@use "../../helpers";
+
 
 .program-input{
-    background-color: $background-light;
+    background-color: helpers.$background-light;
     padding: 30px;
     border-radius: 7.5px;
 
 
     &-field{
         width: 100%;
-        background-color: $background-dark;
+        background-color: helpers.$background-dark;
         border-radius: 7.5px;
         border: 1px solid rgba(255, 255, 255, 0.10);
         color: #fdc667;
@@ -19,7 +21,7 @@
             outline: none;
         }
 
-        scrollbar-color: $background-dark #424242;
+        scrollbar-color: helpers.$background-dark #424242;
         scrollbar-width: thin;
     }
 }

src/assets/style/components/tab_content.scss

@@ -1,4 +1,3 @@
-
 .tab-content{
     padding: 10px;
     background: #1d2127;
@@ -47,7 +46,7 @@
 // key store tab
 .key-store-tab{
     .copy-button{
-        @extend .flat-button;
+        @extend .flat-button !optional;
     }
 
     .key-store-display-row{
@@ -74,7 +73,7 @@
 
 .hash-store-tab{
     .copy-button{
-        @extend .flat-button;
+        @extend .flat-button !optional;
     }
 }
 

src/assets/style/style.scss

@@ -1,26 +1,26 @@
-@import 'helpers.scss';
-@import 'components/analysis.scss';
-@import 'components/program_window/program_input.scss';
-@import 'components/merkle.scss';
-@import 'components/merkle_graph.scss';
-@import 'components/navbar.scss';
-@import 'components/string_box.scss';
-@import 'components/tab_content.scss';
-@import 'components/tooltip.scss';
-@import 'components/footer.scss';
+@use 'helpers.scss';
+@use 'components/analysis.scss';
+@use 'components/program_window/program_input.scss';
+@use 'components/merkle.scss';
+@use 'components/merkle_graph.scss';
+@use 'components/navbar.scss';
+@use 'components/string_box.scss';
+@use 'components/tab_content.scss';
+@use 'components/tooltip.scss';
+@use 'components/footer.scss';
 
 * {
     box-sizing: border-box;
 }
 
 html {
-    scrollbar-color: $background-dark #424242;
+    scrollbar-color: helpers.$background-dark #424242;
     scrollbar-width: thin;
 }
 
 body {
-    background-color: $body-background;
-    color: $text-white;
+    background-color: helpers.$body-background;
+    color: helpers.$text-white;
     font-family: 'inter', sans-serif;
 }