Update for sass 1.79

package.json

@@ -64,7 +64,7 @@
     "mocha": "^10.4.0",
     "rollup": "^4.16.4",
     "rollup-plugin-istanbul": "^5.0.0",
-    "sass": "^1.75.0",
+    "sass": "^1.79.0",
     "sinon": "^19.0.0",
     "sinon-chai": "^3.7.0"
   }

src/scss/_color-scheme.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+@use "functions" as *;
 @use "mixins" as *;
 
 $scheme: '@primer/primitives/dist/styleLint/functional/themes/light.json' !default;
@@ -6,10 +8,10 @@ $enable-background-image-linear-gradient: str-index($scheme, '-high-contrast') =
 
 $btn-color: json($scheme, button-default-fgColor-rest, value) !default;
 $btn-background-color-start: json($scheme, button-default-bgColor-rest, value) !default;
-$btn-background-color-stop: if($enable-background-image-linear-gradient, darken($btn-background-color-start, 3.3333333333%), $btn-background-color-start) !default;
+$btn-background-color-stop: if($enable-background-image-linear-gradient, rounded-rgb(color.adjust($btn-background-color-start, $lightness: -3.3333333333%, $space: hsl)), $btn-background-color-start) !default;
 $btn-border-color: json($scheme, button-default-borderColor-rest, value) !default;
 $btn-hover-background-color-start: json($scheme, button-default-bgColor-hover, value) !default;
-$btn-hover-background-color-stop: darken($btn-hover-background-color-start, 3.3333333333%) !default;
+$btn-hover-background-color-stop: rounded-rgb(color.adjust($btn-hover-background-color-start, $lightness: -3.3333333333%, $space: hsl)) !default;
 $btn-hover-border-color: json($scheme, button-default-borderColor-hover, value) !default;
 $btn-focus-visible-outline-color: json($scheme, focus-outlineColor, value) !default;
 $btn-active-background-color: json($scheme, button-default-bgColor-active, value) !default;

src/scss/_functions.scss

@@ -0,0 +1,11 @@
+@use "sass:color";
+@use "sass:math";
+@use "sass:string";
+
+@function hex-str($color) {
+  @return string.to-lower-case(string.unquote("##{string.slice(color.ie-hex-str($color), 4)}"));
+}
+
+@function rounded-rgb($color) {
+  @return rgb(math.round(color.channel($color, "red")), math.round(color.channel($color, "green")), math.round(color.channel($color, "blue")));
+}

src/scss/_mixins.scss

@@ -1,34 +1,37 @@
+@use "sass:color";
 @use "sass:math";
+@use "functions" as *;
 
 @mixin blend($args...) {
   $declarations: keywords($args);
   $background-color: map-get($declarations, "background-color");
 
   @each $property, $value in $declarations {
-    @if type-of($value) == color and alpha($value) != 1 {
+    @if type-of($value) == color and color.channel($value, "alpha") != 1 {
       $color: $value;
-      $red:   (1 - alpha($color)) * red($background-color) + alpha($color) * red($color);
-      $green: (1 - alpha($color)) * green($background-color) + alpha($color) * green($color);
-      $blue:  (1 - alpha($color)) * blue($background-color) + alpha($color) * blue($color);
-      #{$property}: rgb($red, $green, $blue);
+      $red:   (1 - color.channel($color, "alpha")) * color.channel($background-color, "red") + color.channel($color, "alpha") * color.channel($color, "red");
+      $green: (1 - color.channel($color, "alpha")) * color.channel($background-color, "green") + color.channel($color, "alpha") * color.channel($color, "green");
+      $blue:  (1 - color.channel($color, "alpha")) * color.channel($background-color, "blue") + color.channel($color, "alpha") * color.channel($color, "blue");
+      #{$property}: hex-str(rgb($red, $green, $blue));
     }
 
     #{$property}: $value;
   }
 }
 
+
 @mixin background-image-linear-gradient($color-start, $color-stop, $color-stop-percentage: 90%) {
-  $data: encodeURIData("<svg xmlns='http://www.w3.org/2000/svg'><linearGradient id='o' x2='0' y2='1'><stop stop-color='#{$color-start}'/><stop offset='#{$color-stop-percentage}' stop-color='#{$color-stop}'/></linearGradient><rect width='100%' height='100%' fill='url(#o)'/></svg>");
+  $data: encodeURIData("<svg xmlns='http://www.w3.org/2000/svg'><linearGradient id='o' x2='0' y2='1'><stop stop-color='#{hex-str($color-start)}'/><stop offset='#{$color-stop-percentage}' stop-color='#{hex-str($color-stop)}'/></linearGradient><rect width='100%' height='100%' fill='url(#o)'/></svg>");
   background-image: url("data:image/svg+xml,#{$data}");
-  background-image: -moz-linear-gradient(top, $color-start, $color-stop $color-stop-percentage);
-  background-image: linear-gradient(180deg, $color-start, $color-stop $color-stop-percentage);
+  background-image: -moz-linear-gradient(top, hex-str($color-start), hex-str($color-stop) $color-stop-percentage);
+  background-image: linear-gradient(180deg, hex-str($color-start), hex-str($color-stop) $color-stop-percentage);
 
-  $red: red($color-start) + math.div(red($color-stop) - red($color-start), $color-stop-percentage) * 100%;
-  $green: green($color-start) + math.div(green($color-stop) - green($color-start), $color-stop-percentage) * 100%;
-  $blue: blue($color-start) + math.div(blue($color-stop) - blue($color-start), $color-stop-percentage) * 100%;
+  $red: color.channel($color-start, "red") + math.div(color.channel($color-stop, "red") - color.channel($color-start, "red"), $color-stop-percentage) * 100%;
+  $green: color.channel($color-start, "green") + math.div(color.channel($color-stop, "green") - color.channel($color-start, "green"), $color-stop-percentage) * 100%;
+  $blue: color.channel($color-start, "blue") + math.div(color.channel($color-stop, "blue") - color.channel($color-start, "blue"), $color-stop-percentage) * 100%;
   $color-stop: rgb($red, $green, $blue);
 
-  filter: unquote("progid:DXImageTransform.Microsoft.Gradient(startColorstr='#{ie-hex-str($color-start)}', endColorstr='#{ie-hex-str($color-stop)}')");
+  filter: unquote("progid:DXImageTransform.Microsoft.Gradient(startColorstr='#{color.ie-hex-str($color-start)}', endColorstr='#{color.ie-hex-str($color-stop)}')");
 
   :root & {
     filter: none;