From 0e94e5ecdab18d8eceee68d18e3055824dcd5a17 Mon Sep 17 00:00:00 2001
From: Matthias Clasen <mclasen@redhat.com>
Date: Mon, 3 Jun 2024 20:37:09 -0400
Subject: [PATCH] theme: Stop using alpha() and shade()

These are being phased out in favor of color-mix().
---
 gtk/theme/Default/_colors-public.scss | 16 ++++++++--------
 gtk/theme/Default/_common.scss        |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/gtk/theme/Default/_colors-public.scss b/gtk/theme/Default/_colors-public.scss
index 3b638e2bf6..c50fbf9baf 100644
--- a/gtk/theme/Default/_colors-public.scss
+++ b/gtk/theme/Default/_colors-public.scss
@@ -93,22 +93,22 @@ $_wm_highlight: if($variant=='light', $top_hilight,  // Sass gets mad if this is
 /*
 these colors are exported for the window manager and shouldn't be used in applications,
 read if you used those and something break with a version upgrade you're on your own... */
-@define-color wm_title shade(#{$fg_color}, 1.8);
+@define-color wm_title color-mix(in hsl, #{$fg_color}, white 80%);
 @define-color wm_unfocused_title #{$backdrop_fg_color};
 @define-color wm_highlight #{"" + $_wm_highlight};
 @define-color wm_borders_edge #{"" + $borders_edge};
 
-@define-color wm_bg_a shade(#{$bg_color}, 1.2);
+@define-color wm_bg_a color-mix(in hsl, #{$bg_color}, white 20%);
 @define-color wm_bg_b #{$bg_color};
 
-@define-color wm_shadow alpha(black, 0.35);
-@define-color wm_border alpha(black, 0.18);
+@define-color wm_shadow color-mix(in srgb, black, transparent 35%);
+@define-color wm_border color-mix(in srgb, black, transparent 18%);
 
-@define-color wm_button_hover_color_a shade(#{$bg_color}, 1.3);
+@define-color wm_button_hover_color_a color-mix(in hsl, #{$bg_color}, white 30%);
 @define-color wm_button_hover_color_b #{$bg_color};
-@define-color wm_button_active_color_a shade(#{$bg_color}, 0.85);
-@define-color wm_button_active_color_b shade(#{$bg_color}, 0.89);
-@define-color wm_button_active_color_c shade(#{$bg_color}, 0.9);
+@define-color wm_button_active_color_a color-mix(in hsl, #{$bg_color}, black 15%);
+@define-color wm_button_active_color_b color-mix(in hsl, #{$bg_color}, black 11%);
+@define-color wm_button_active_color_c color-mix(in hsl, #{$bg_color}, black 10%);
 
 //FIXME this is really an API
 
diff --git a/gtk/theme/Default/_common.scss b/gtk/theme/Default/_common.scss
index fd9dc8607b..27062c46c8 100644
--- a/gtk/theme/Default/_common.scss
+++ b/gtk/theme/Default/_common.scss
@@ -1,5 +1,5 @@
 @function gtkalpha($c,$a) {
-  @return unquote("alpha(#{$c},#{$a})");
+  @return unquote("color-mix(in srgb, #{$c}, transparent calc(#{$a} * 100%))");
 }
 
 $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);