fix: sass deprecation warnings (#1292)

* upgraded sass to the latest version and solved some issues

* update package-lock

* reorder css attributes

---------

Co-authored-by: André Nogueira <nogueira@textkernel.nl>

Author: AlsasaAmmar

package-lock.json

@@ -143,7 +143,7 @@
         "react-router-dom": "6.28.0",
         "react-transition-group": "4.4.5",
         "sass": "1.81.0",
-        "sass-loader": "13.3.3",
+        "sass-loader": "16.0.2",
         "sonner": "1.5.0",
         "standard-version": "9.5.0",
         "storybook": "7.6.20",

package.json

@@ -1 +1 @@
-@import '../Button/Button';
+@use '../Button/Button';

src/components/Buttons/FileButton/FileButton.scss

@@ -1,4 +1,4 @@
-@import '../Button/Button';
+@use '../Button/Button';
 
 .IconButton {
     &--size {

src/components/Buttons/IconButton/IconButton.scss

@@ -1,5 +1,5 @@
 @use 'sass:list';
-@import '../../themes/oneui/constants/colors';
+@use '../../themes/oneui/constants/colors' as *;
 
 $icon-size: 16px;
 

src/components/Callout/Callout.scss

@@ -1,4 +1,4 @@
-@import '../../themes/oneui/constants/colors';
+@use '../../themes/oneui/constants/colors';
 
 .CandidateAvatar {
     position: relative;
@@ -30,7 +30,7 @@
     }
 
     &__percentage {
-        background-color: rgba(0,0,0,.25);
+        background-color: rgba(0, 0, 0, 0.25);
         border-radius: 50%;
         height: 100%;
         width: 100%;

src/components/CandidateAvatar/CandidateAvatar.scss

@@ -1,4 +1,4 @@
-@import '../../themes/oneui/placeholders/input';
+@use '../../themes/oneui/placeholders/input';
 
 /* Input field */
 :global .react-datepicker__input-container input {
@@ -111,7 +111,11 @@
 /* stylelint-disable */
 :global .react-datepicker__day--in-selecting-range,
 :global
-    .react-datepicker__day--in-selecting-range:not(.react-datepicker__month-text--in-range, .react-datepicker__quarter-text--in-range, .react-datepicker__year-text--in-range),
+    .react-datepicker__day--in-selecting-range:not(
+        .react-datepicker__month-text--in-range,
+        .react-datepicker__quarter-text--in-range,
+        .react-datepicker__year-text--in-range
+    ),
 :global .react-datepicker__day--in-range {
     border-radius: 0;
     background-color: var(--color-brand-40);

src/components/DatePicker/DatePicker.scss

@@ -7,8 +7,11 @@
     border-radius: var(--space-50);
     border: 1px solid var(--color-border-subtle);
     cursor: default;
-    background-color: var(--bg-color, white); // Fallback to --color-background if bgColor isn't provided
-    
+    background-color: var(
+        --bg-color,
+        white
+    ); // Fallback to --color-background if bgColor isn't provided
+
     &[disabled] {
         color: var(--color-text-disabled);
     }
@@ -20,7 +23,7 @@
     &--clickable:not([disabled]) {
         cursor: pointer;
 
-        &:hover:not([disabled]){
+        &:hover:not([disabled]) {
             background-color: var(--color-background-neutral-subtlest-hover);
         }
 
@@ -30,13 +33,13 @@
         }
     }
 
-    &__text{
-        composes: OneUI-label-text from global;
+    &__text {
         margin: 0;
         composes: OneUI-label-text from global;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+
         &[disabled] {
             color: var(--color-text-disabled);
         }
@@ -65,6 +68,5 @@
             fill: var(--color-text-disabled);
             cursor: default;
         }
-    
     }
 }

src/components/Tag/Tag.scss

@@ -1,4 +1,4 @@
-@import '../../themes/oneui/placeholders/input';
+@use '../../themes/oneui/placeholders/input';
 
 .TextArea {
     @extend %input;

src/components/TextArea/TextArea.scss

@@ -1,12 +1,12 @@
-@use "sass:map";
-@import '../../themes/oneui/oneui';
+@use 'sass:map';
+@use '../../themes/oneui/oneui';
 
 $contexts: (info, success, cautious, critical);
 $contextMap: (
     'info': 'information',
     'success': 'success',
     'cautious': 'caution',
-    'critical': 'critical'
+    'critical': 'critical',
 );
 
 .Toast {
@@ -31,20 +31,21 @@ $contextMap: (
     }
 
     &__content {
-        flex-grow: 1; 
+        flex-grow: 1;
         display: flex;
         flex-direction: column;
         gap: var(--space-150);
     }
 
     &__message {
         gap: var(--space-100);
-        display: flex; 
+        display: flex;
         flex-direction: column;
         margin: 0;
         font-family: var(--font-family-primary);
-        h3, p {
-            margin: 0; 
+        h3,
+        p {
+            margin: 0;
         }
     }
 
@@ -64,7 +65,7 @@ $contextMap: (
         padding: 0;
         margin: 0;
     }
-       
+
     &__closeButton {
         display: flex;
         align-items: flex-start;
@@ -76,16 +77,16 @@ $contextMap: (
         background-color: var(--transparent);
         border: none;
         outline: 0;
-        
+
         &:focus {
             box-shadow: 0px 0px 0px 2px var(--color-background-neutral-subtlest-pressed);
-            border-radius: var(--space-50);;
+            border-radius: var(--space-50);
         }
     }
 
     &__closeIcon {
         font-size: var(--space-300);
-        color: var(--color-icon-subtle);  
+        color: var(--color-icon-subtle);
         fill: var(--color-icon-subtle);
     }