From 5c7b6ddf9d730714f8b6d5249da934c664af37b9 Mon Sep 17 00:00:00 2001
From: andresin87 <andresin87@gmail.com>
Date: Tue, 7 Jan 2025 10:03:25 +0100
Subject: [PATCH] feat(utils/sui-theme): use native functions

---
 utils/sui-theme/src/utils/_colors.scss  | 12 ++++++++----
 utils/sui-theme/src/utils/_opacity.scss |  6 +++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/utils/sui-theme/src/utils/_colors.scss b/utils/sui-theme/src/utils/_colors.scss
index edb4ca3c2..4b91e56f6 100644
--- a/utils/sui-theme/src/utils/_colors.scss
+++ b/utils/sui-theme/src/utils/_colors.scss
@@ -25,14 +25,18 @@ $color-darken-steps: 20, 35, 55, 75 !default;
   $variation: $color;
 
   @if ($step > $positive-steps) {
-    $variation: mix($light, $color, nth($color-lighten-steps, $positive-steps));
+    $variation: color-mix(in srgb, $light #{'#{nth($color-lighten-steps, $positive-steps)}%'}, $color);
   } @else if ($step < -$negative-steps) {
-    $variation: mix($dark, $color, nth($color-darken-steps, $negative-steps));
+    $variation: color-mix(in srgb, $dark #{'#{nth($color-darken-steps, $negative-steps)}%'}, $color);
   } @else if ($step < 0) {
-    $variation: mix($dark, $color, nth($color-darken-steps, -$step));
+    $variation: color-mix(in srgb, $dark #{'#{nth($color-darken-steps, -$step)}%'}, $color);
   } @else if ($step > 0) {
-    $variation: mix($light, $color, nth($color-lighten-steps, $step));
+    $variation: color-mix(in srgb, $light #{'#{nth($color-lighten-steps, $step)}%'}, $color);
   }
 
   @return $variation;
 }
+
+@function transparentize($color, $amount) {
+  @return color-mix(in srgb, $color #{'#{(1 - $amount) * 100}%'}, transparent);
+}
diff --git a/utils/sui-theme/src/utils/_opacity.scss b/utils/sui-theme/src/utils/_opacity.scss
index 78ea8fbe9..14d88e5d6 100644
--- a/utils/sui-theme/src/utils/_opacity.scss
+++ b/utils/sui-theme/src/utils/_opacity.scss
@@ -4,11 +4,11 @@
 // @include bgcolor-opacity($c-black);
 
 @mixin bgcolor-opacity($color) {
-  background-color: rgba($color, 1);
+  background-color: color-mix(in srgb, $color 100%, transparent);
 
   @each $value in $c-opacity {
     &-#{$value} {
-      background-color: rgba($color, $value * 0.01);
+      background-color: color-mix(in srgb, $color #{$value + '%'}, transparent);
     }
   }
 }
@@ -19,7 +19,7 @@
       position: relative;
 
       &::before {
-        background-color: rgba($color, $value * 0.01);
+        background-color: color-mix(in srgb, $color #{$value + '%'}, transparent);
         content: '';
         display: block;
         height: 100%;