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

Author: zerbitx

ui/src/components/advanced/InteractiveTerminal/InteractiveTerminal.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/constants.scss';
+@use '../../../styles/constants.scss';
 
 .terminal-wrapper {
   display: flex;
@@ -7,7 +7,7 @@
   padding: 15px;
   padding-left: 40px;
   border-radius: 4px;
-  background: $blue-dark;
+  background: constants.$blue-dark;
 
   &.fullscreen {
     position: fixed;

ui/src/components/basic/BaseLayout/BaseLayout.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/constants';
+@use '../../../styles/constants';
 
 .header-layout {
   display: flex;
@@ -7,11 +7,11 @@
   align-items: center;
   height: 100%;
   width: 100%;
-  background-color: $light-blue;
+  background-color: constants.$light-blue;
   overflow-x: hidden;
 
   & > .body {
-    max-width: $max-width;
+    max-width: constants.$max-width;
     width: 100%;
     min-height: calc(100% - 70px);
   }

ui/src/components/basic/Button/Button.module.scss

@@ -1,12 +1,12 @@
-@import '../../../styles/constants';
+@use '../../../styles/constants';
 
 .button {
   display: inline-flex;
   align-items: center;
   height: 32px;
   font-size: 0;
   padding: 0;
-  background-color: $sky-blue;
+  background-color: constants.$sky-blue;
   border-radius: 5px;
   transition: all 0.2s ease;
   cursor: pointer;
@@ -37,7 +37,7 @@
     justify-content: center;
     height: 32px;
     padding: 0 12px;
-    font: $button-text;
+    font: constants.$button-text;
     white-space: nowrap;
     color: white;
   }

ui/src/components/basic/Button/DeleteTextButton/DeleteTextButton.scss

@@ -1,10 +1,10 @@
-@import '../../../../styles/constants.scss';
+@use '../../../../styles/constants.scss';
 
 .delete-text-button {
-  background-color: $red-2;
+  background-color: constants.$red-2;
 
   &:hover {
     filter: brightness(110%);
-    background-color: $red-2 !important;
+    background-color: constants.$red-2 !important;
   }
 }

ui/src/components/basic/ButtonBase/ButtonBase.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/constants';
+@use '../../../styles/constants';
 
 .button-base {
   &.-loading {

ui/src/components/basic/CodeSnippet/AdvancedCodeLine/AdvancedCodeLine.module.scss

@@ -1,7 +1,7 @@
-@import '../../../../styles/constants.scss';
+@use '../../../../styles/constants.scss';
 
 .advanced-code-line {
-  font: $code;
+  font: constants.$code;
   color: #d3dae1;
   position: relative;
   margin: 1px 0;

ui/src/components/basic/CodeSnippet/CodeSnippet.module.scss

@@ -1,11 +1,11 @@
-@import '../../../styles/constants';
+@use '../../../styles/constants';
 
 .code-snippet {
   padding: 15px 40px 15px 30px;
   position: relative;
-  color: $dark-blue;
-  background-color: $blue-dark;
-  box-shadow: $shadow-button;
+  color: constants.$dark-blue;
+  background-color: constants.$blue-dark;
+  box-shadow: constants.$shadow-button;
   border-radius: 3px;
 
   .tooltip-container {
@@ -25,8 +25,8 @@
   > .code {
     display: flex;
     flex-direction: column;
-    color: $code-color;
-    font: $code;
+    color: constants.$code-color;
+    font: constants.$code;
     height: 100%;
 
     > div::-webkit-scrollbar {
@@ -68,7 +68,7 @@
         }
 
         b {
-          color: $primary-orange;
+          color: constants.$primary-orange;
         }
       }
     }

ui/src/components/basic/CodeSnippet/SimpleCodeLine/SimpleCodeLine.module.scss

@@ -1,7 +1,7 @@
-@import '../../../../styles/constants.scss';
+@use '../../../../styles/constants.scss';
 
 .simple-code-line {
-  font: $code;
+  font: constants.$code;
   color: #8fa6b2;
   word-break: break-all;
   margin: 1px 0;

ui/src/components/basic/CustomDropDown/CustomDropDown.module.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/constants';
+@use '../../../styles/constants';
 
 .custom-dropdown-wrapper {
   display: inline-block;
@@ -10,8 +10,8 @@
   display: flex;
   align-items: center;
   background-color: white;
-  box-shadow: $shadow-button;
-  border-bottom: 1px solid $gray-2;
+  box-shadow: constants.$shadow-button;
+  border-bottom: 1px solid constants.$gray-2;
   border-top: 1px solid transparent;
 
   &.dropdown-test {
@@ -21,8 +21,8 @@
 
   > :global(.CustomDropDown_selected-value) {
     width: 100%;
-    font: $button-text;
-    color: $gray-4;
+    font: constants.$button-text;
+    color: constants.$gray-4;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -51,15 +51,15 @@
     z-index: -999999;
     position: absolute;
     background-color: white;
-    color: $dark-blue;
+    color: constants.$dark-blue;
     width: unset;
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
     font-size: 16px;
     overflow: hidden;
     min-width: 100%;
     white-space: nowrap;
-    box-shadow: $shadow-button;
+    box-shadow: constants.$shadow-button;
     visibility: hidden;
     height: 0;
 
@@ -70,8 +70,8 @@
     .option {
       width: 100%;
       padding: 10px 16px;
-      font: $button-text;
-      color: $gray-4;
+      font: constants.$button-text;
+      color: constants.$gray-4;
       position: relative;
       text-overflow: ellipsis;
       white-space: nowrap;;

ui/src/components/basic/ErrorMessage/ErrorMessage.module.scss

@@ -1,8 +1,8 @@
-@import '../../../styles/constants.scss';
+@use '../../../styles/constants.scss';
 
 .error-component-wrapper {
   margin-top: 20px;
-  color: $red;
+  color: constants.$red;
   text-align: center;
   font-size: 14px;
 }