Merge pull request #113 from farabi-deriv/farabi/bot-2360/fix-new-sas…

…s-deprecation-warnings Farabi/bot-2360/fix-new-sass-deprecation-warnings
deriv-com · Nov 5, 2024 · 856d09a · 856d09a
2 parents a45ffae + 129d6e0
commit 856d09a
Show file tree

Hide file tree

Showing 23 changed files with 340 additions and 332 deletions.
diff --git a/src/components/data-list/data-list.scss b/src/components/data-list/data-list.scss
@@ -38,7 +38,7 @@
             -webkit-tap-highlight-color: transparent;
         }
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             border-radius: $BORDER_RADIUS;
         }
     }
@@ -74,7 +74,7 @@
             color: var(--text-prominent);
             line-height: 2rem;
 
-            @include mobile {
+            @include mobile-or-tablet-screen {
                 font-size: 1.2rem;
             }
         }

diff --git a/src/components/error-modal/error-modal.scss b/src/components/error-modal/error-modal.scss
@@ -10,7 +10,7 @@
         margin-top: 2.4rem;
     }
 
-    @include mobile {
+    @include mobile-or-tablet-screen {
         height: calc(100vh - 80px);
 
         .dc-btn {

diff --git a/src/components/layout/header/custom-notifications/custom-notifications.scss b/src/components/layout/header/custom-notifications/custom-notifications.scss
@@ -6,7 +6,7 @@
     border-width: 1px;
     margin-inline-end: 2.4rem;
 
-    @include mobile-screen {
+    @include mobile-or-tablet-screen {
         margin-inline-end: 0;
     }
 

diff --git a/src/components/page-error/page-error.scss b/src/components/page-error/page-error.scss
@@ -81,7 +81,7 @@
             justify-content: center;
         }
 
-        @include mobile {
+        @include mobile-or-tablet-screen {
             margin: 0 0 1.6rem;
 
             &-wrapper {

diff --git a/src/components/shared/styles/_constants.scss b/src/components/shared/styles/_constants.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 /* ------------------------------------*
  *  # Constants
  *------------------------------------ */
@@ -78,36 +80,36 @@ $color-status-announcement: rgb(75 180 179 / 16%);
 $color-status-error: rgb(236 63 63 / 16%);
 
 /* alpha colors */
-$alpha-color-black-1: transparentize($color-black-7, 0.28);
-$alpha-color-black-2: transparentize($color-black, 0.04);
-$alpha-color-black-3: transparentize($color-black-7, 0.92);
-$alpha-color-black-4: transparentize($color-black-7, 0.84);
-$alpha-color-black-5: transparentize($color-black-7, 0.16);
-$alpha-color-black-6: transparentize($color-black-7, 0.36);
-$alpha-color-black-7: transparentize($color-black, 0.5);
-$alpha-color-blue-1: transparentize($color-blue, 0.84);
-$alpha-color-blue-2: transparentize($color-blue-3, 0.84);
-$alpha-color-blue-3: transparentize($color-blue, 0.92);
-$alpha-color-white-1: transparentize($color-white, 0.04);
-$alpha-color-white-2: transparentize($color-white, 0.84);
-$alpha-color-white-3: transparentize($color-white, 0.92);
-$alpha-color-white-4: transparentize($color-white, 0.3);
-$alpha-color-red-1: transparentize($color-red, 0.92);
-$alpha-color-red-2: transparentize($color-red, 0.84);
-$alpha-color-red-3: transparentize($color-red, 0.76);
-$alpha-color-green-1: transparentize($color-green-1, 0.08);
-$alpha-color-green-2: transparentize($color-green-3, 0.08);
-$alpha-color-yellow-1: transparentize($color-yellow, 0.84);
+$alpha-color-black-1: color.scale($color-black-7, $alpha: -28%);
+$alpha-color-black-2: color.scale($color-black, $alpha: -4%);
+$alpha-color-black-3: color.scale($color-black-7, $alpha: -92%);
+$alpha-color-black-4: color.scale($color-black-7, $alpha: -84%);
+$alpha-color-black-5: color.scale($color-black-7, $alpha: -16%);
+$alpha-color-black-6: color.scale($color-black-7, $alpha: -36%);
+$alpha-color-black-7: color.scale($color-black, $alpha: -50%);
+$alpha-color-blue-1: color.scale($color-blue, $alpha: -84%);
+$alpha-color-blue-2: color.scale($color-blue-3, $alpha: -84%);
+$alpha-color-blue-3: color.scale($color-blue, $alpha: -92%);
+$alpha-color-white-1: color.scale($color-white, $alpha: -4%);
+$alpha-color-white-2: color.scale($color-white, $alpha: -84%);
+$alpha-color-white-3: color.scale($color-white, $alpha: -92%);
+$alpha-color-white-4: color.scale($color-white, $alpha: -30%);
+$alpha-color-red-1: color.scale($color-red, $alpha: -92%);
+$alpha-color-red-2: color.scale($color-red, $alpha: -84%);
+$alpha-color-red-3: color.scale($color-red, $alpha: -76%);
+$alpha-color-green-1: color.scale($color-green-1, $alpha: -8%);
+$alpha-color-green-2: color.scale($color-green-3, $alpha: -8%);
+$alpha-color-yellow-1: color.scale($color-yellow, $alpha: -84%);
 
 /* gradient colors */
-$gradient-color-green-1: linear-gradient(to top, $color-white, transparentize($color-green-1, 0.84));
-$gradient-color-green-2: linear-gradient(to top, $color-black, transparentize($color-green-3, 0.84));
-$gradient-color-red-1: linear-gradient(to top, $color-white, transparentize($color-red, 0.84));
-$gradient-color-red-2: linear-gradient(to top, $color-black, transparentize($color-red, 0.84));
-$contract-gradient-color-red-1: linear-gradient(to top, $color-white 85%, transparentize($color-red, 0.84));
-$contract-gradient-color-red-2: linear-gradient(to top, $color-black 85%, transparentize($color-red, 0.84));
-$gradient-color-white: linear-gradient(to right, transparentize($color-white, 1) -5%, $color-white 71%);
-$gradient-color-black: linear-gradient(to right, transparentize($color-black, 1) -5%, $color-black 71%);
+$gradient-color-green-1: linear-gradient(to top, $color-white, color.scale($color-green-1, $alpha: -84%));
+$gradient-color-green-2: linear-gradient(to top, $color-black, color.scale($color-green-3, $alpha: -84%));
+$gradient-color-red-1: linear-gradient(to top, $color-white, color.scale($color-red, $alpha: -84%));
+$gradient-color-red-2: linear-gradient(to top, $color-black, color.scale($color-red, $alpha: -84%));
+$contract-gradient-color-red-1: linear-gradient(to top, $color-white 85%, color.scale($color-red, $alpha: -84%));
+$contract-gradient-color-red-2: linear-gradient(to top, $color-black 85%, color.scale($color-red, $alpha: -84%));
+$gradient-color-white: linear-gradient(to right, color.scale($color-white, $alpha: -100%) -5%, $color-white 71%);
+$gradient-color-black: linear-gradient(to right, color.scale($color-black, $alpha: -100%) -5%, $color-black 71%);
 $gradient-color-purple: linear-gradient(274.73deg, #5a205d 3.82%, #7f3883 88.49%);
 $gradient-color-blue: linear-gradient(274.73deg, #1a205e 3.82%, #122d96 88.49%);
 $gradient-color-orange: linear-gradient(90deg, #eb001b 0%, #f79e1b 100%);

diff --git a/src/components/shared/styles/_fonts.scss b/src/components/shared/styles/_fonts.scss
@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 /*
     Constants
 */
@@ -53,7 +55,7 @@ $LINEHEIGHTS: (
                     $typeface: (
                         $key: $val,
                     );
-                    $typeface_list: map-merge($typeface_list, $typeface);
+                    $typeface_list: map.merge($typeface_list, $typeface);
                 }
             }
         }

diff --git a/src/components/shared/styles/_mixins.scss b/src/components/shared/styles/_mixins.scss
@@ -1,5 +1,8 @@
-@import './devices';
-@import './fonts';
+@use 'sass:map';
+@use 'sass:list';
+@use './devices';
+@use './fonts';
+@use './constants';
 
 /* ------------------------------------*
  *  # SASS Mixins and Functions
@@ -56,7 +59,7 @@
 
     @if length($px) != 1 {
         @for $i from 1 through length($px) {
-            $val_em: (nth($px, $i) / $base) * 1em;
+            $val_em: (list.nth($px, $i) / $base) * 1em;
             $list: append($list, $val_em, space);
         }
 
@@ -95,7 +98,7 @@
                     $typeface: (
                         $key: $val,
                     );
-                    $typeface_list: map-merge($typeface_list, $typeface);
+                    $typeface_list: map.merge($typeface_list, $typeface);
                 }
             }
         }
@@ -132,13 +135,13 @@
     }
 
     @if $size == 1.6rem {
-        line-height: map-get($map: $LINEHEIGHTS, $key: 'large');
+        line-height: map.get($map: fonts.$LINEHEIGHTS, $key: 'large');
     } @else if $size == 1.4rem {
-        line-height: map-get($map: $LINEHEIGHTS, $key: 'medium');
+        line-height: map.get($map: fonts.$LINEHEIGHTS, $key: 'medium');
     } @else if $size == 1.2rem {
-        line-height: map-get($map: $LINEHEIGHTS, $key: 'small');
+        line-height: map.get($map: fonts.$LINEHEIGHTS, $key: 'small');
     } @else if $size == 1rem {
-        line-height: map-get($map: $LINEHEIGHTS, $key: 'xsmall');
+        line-height: map.get($map: fonts.$LINEHEIGHTS, $key: 'xsmall');
     } @else {
         line-height: unset;
     }
@@ -153,14 +156,14 @@
    @include typeface(--paragraph-bold-black, uppercase, center);
  */
 @mixin typeface($var, $tt: none) {
-    $typeface_config: map-get(
-        $map: $TYPEFACES_LIST,
+    $typeface_config: map.get(
+        $map: fonts.$TYPEFACES_LIST,
         $key: $var,
     );
-    $size: nth($typeface_config, 1); // font-size
-    $align: nth($typeface_config, 2); // text-align
-    $weight: nth($typeface_config, 3); // font-weight
-    $color: nth($typeface_config, 4); // color
+    $size: list.nth($typeface_config, 1); // font-size
+    $align: list.nth($typeface_config, 2); // text-align
+    $weight: list.nth($typeface_config, 3); // font-weight
+    $color: list.nth($typeface_config, 4); // color
 
     @include setTypeface($size, $align, $weight, $color, $tt);
 }
@@ -190,12 +193,12 @@
     @for $i from 1 through length($colors) {
         /* postcss-bem-linter: ignore */
         .color#{$i}-fill {
-            fill: nth($colors, $i);
+            fill: list.nth($colors, $i);
         }
 
         /* postcss-bem-linter: ignore */
         .color#{$i}-stroke {
-            stroke: nth($colors, $i);
+            stroke: list.nth($colors, $i);
         }
     }
 }