Merge pull request #2790 from SUI-Components/theme-native-function

feat(utils/sui-theme): use native functions
SUI-Components · Jan 7, 2025 · 3f53883 · 3f53883
2 parents f29497f + 5c7b6dd
commit 3f53883
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git 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
@@ -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%;