diff --git a/src/sass/gtk/_common-4.0.scss b/src/sass/gtk/_common-4.0.scss
index 14db9481..6cae1a18 100644
--- a/src/sass/gtk/_common-4.0.scss
+++ b/src/sass/gtk/_common-4.0.scss
@@ -3517,7 +3517,15 @@ row {
 
   @at-root %row_activatable, &.activatable {
     transition: $transition,
-                background-color $ripple-fade-in-duration $ease-out;
+                background-size $ripple-fade-out-duration $ease-out,
+                background-image $ripple-fade-out-opacity-duration $ease-out;
+    outline: none;
+    box-shadow: none;
+    background-color: transparent;
+    background-image: radial-gradient(circle, transparent 10%, transparent 0%);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 1000% 1000%;
     outline: none;
 
     &:focus {
@@ -3528,15 +3536,19 @@ row {
 
     &:hover, &.has-open-popup {
       color: $text;
-      transition: $transition;
       background-color: $overlay-hover;
       box-shadow: none;
     }
 
     &:active {
+      transition: $transition,
+                  background-size 0ms,
+                  background-image 0ms;
+      animation: ripple $ripple-fade-in-duration $ease-out forwards;
+      background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
+      background-size: 0% 0%;
+      background-color: $overlay-hover;
       color: $text;
-      transition: $transition;
-      background-color: $overlay-active;
       box-shadow: none;
     }
 
diff --git a/src/sass/gtk/_drawing-4.0.scss b/src/sass/gtk/_drawing-4.0.scss
index d000c4a3..a564f5f1 100644
--- a/src/sass/gtk/_drawing-4.0.scss
+++ b/src/sass/gtk/_drawing-4.0.scss
@@ -1,5 +1,32 @@
 // generic drawing of more complex things
 
+//
+// Ripple keyframes
+//
+
+@keyframes ripple {
+  to {
+    background-size: 1000% 1000%;
+  }
+}
+
+@keyframes ripple-on-slider {
+  to {
+    background-size: auto, 1000% 1000%;
+  }
+}
+
+@keyframes ripple-on-headerbar {
+  from {
+    background-image: radial-gradient(circle, $primary 0%, transparent 0%);
+  }
+
+  to {
+    background-image: radial-gradient(circle, $primary 100%, transparent 100%);
+  }
+}
+
+
 @mixin entry($t, $fc: $primary) {
 //
 // entry
@@ -9,32 +36,38 @@
 //
 
   @if $t == normal {
-    transition: $transition, box-shadow $ripple-fade-out-duration $ease-out;
+    transition: $transition,
+                outline $ripple-fade-out-duration $ease-out,
+                box-shadow $ripple-fade-out-duration $ease-out;
     box-shadow: inset 0 0 0 2px transparent;
     background-color: if($fc == $primary, $entry, rgba($fc, 0.1));
     color: if($fc == $primary, $text-secondary, rgba($fc, 0.75));
-    outline: none;
+    outline: 0 solid transparent;
+    outline-offset: 4px;
   }
 
   @if $t == hover {
     background-color: $overlay-hover;
     box-shadow: inset 0 0 0 2px $overlay-hover;
     color: if($fc == $primary, $text, $fc);
-    outline: none;
+    outline: 0 solid transparent;
+    outline-offset: 4px;
   }
 
   @if $t == focus {
     background-color: $overlay-focus;
-    box-shadow: inset 0 0 0 2px if($fc == $primary, $track, $fc);
+    box-shadow: inset 0 0 0 2px transparent;
     color: if($fc == $primary, $text, $fc);
-    outline: none;
+    outline: 2px solid if($fc == $primary, $track, $fc);
+    outline-offset: -2px;
   }
 
   @if $t == checked {
     background-color: if($fc == $primary, $entry, rgba($fc, 0.1));
-    box-shadow: inset 0 0 0 2px if($fc == $primary, $primary, $fc);
+    box-shadow: inset 0 0 0 2px transparent;
     color: if($fc == $primary, $text, $fc);
-    outline: none;
+    outline: 2px solid if($fc == $primary, $primary, $fc);
+    outline-offset: -2px;
   }
 
   @if $t == disabled {
@@ -78,9 +111,15 @@
 
   @if $t == normal {
     transition: $transition,
-                background-color $ripple-fade-in-duration $ease-out;
+                background-size $ripple-fade-out-duration $ease-out,
+                background-image $ripple-fade-out-opacity-duration $ease-out;
     outline: none;
+    box-shadow: inset 0 0 0 9999px transparent;
     background-color: $button;
+    background-image: radial-gradient(circle, transparent 10%, transparent 0%);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 1000% 1000%;
     color: $text;
   }
 
@@ -95,7 +134,12 @@
 
   @if $t == active {
     transition: $transition,
-                background-color $ripple-fade-in-duration $ease-out;
+                background-size 0ms,
+                background-image 0ms,
+                border 0ms;
+    animation: ripple $ripple-fade-in-duration $ease-out forwards;
+    background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
+    background-size: 0% 0%;
     background-color: $overlay-active;
     color: $text;
   }
@@ -123,8 +167,14 @@
 
   @if $t == flat-normal {
     transition: $transition,
-                background-color $ripple-fade-in-duration $ease-out;
+                border-image $ripple-fade-in-duration $ease-out,
+                background-size $ripple-fade-out-duration $ease-out,
+                background-image $ripple-fade-out-opacity-duration $ease-out;
     outline: none;
+    background-image: radial-gradient(circle, transparent 10%, transparent 0%);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 1000% 1000%;
     background-color: transparent;
     color: $text-secondary;
   }
@@ -142,7 +192,12 @@
 
   @if $t == flat-active {
     transition: $transition,
-                background-color $ripple-fade-in-duration $ease-out;
+                border-image $ripple-fade-in-duration $ease-out,
+                background-size 0ms,
+                background-image 0ms;
+    animation: ripple $ripple-fade-in-duration $ease-out forwards;
+    background-image: radial-gradient(circle, $overlay-active 10%, transparent 0%);
+    background-size: 0% 0%;
     background-color: $overlay-active;
     color: $text;
     box-shadow: none;
diff --git a/src/sass/gtk/apps/_gnome-4.0.scss b/src/sass/gtk/apps/_gnome-4.0.scss
index e8fe9ba1..9024c73c 100644
--- a/src/sass/gtk/apps/_gnome-4.0.scss
+++ b/src/sass/gtk/apps/_gnome-4.0.scss
@@ -1088,11 +1088,11 @@ window > contents > leaflet { // Gnome control center
 // Gnome Weather
 //
 
-$weather_temp_chart_fill_color: rgba(248, 228, 92, 0.5);
-$weather_temp_chart_stroke_color: rgba(246, 211, 45, 1.0);
+@define-color weather_temp_chart_fill_color: #{rgba(248, 228, 92, 0.5)};
+@define-color weather_temp_chart_stroke_color: #{rgba(246, 211, 45, 1.0)};
 
-$weather_thermometer_warm_color: if($variant == 'light', $yellow-dark, $yellow-light);
-$weather_thermometer_cold_color: if($variant == 'light', $blue-dark, $blue-light);
+@define-color weather_thermometer_warm_color: #{if($variant == 'light', $yellow-dark, $yellow-light)};
+@define-color weather_thermometer_cold_color: #{if($variant == 'light', $blue-dark, $blue-light)};
 
 $weather_thermometer_high_color: $yellow-light;
 $weather_thermometer_low_color: $blue-light;
@@ -1208,12 +1208,12 @@ image.circular {
   border-radius: $circular_radius;
 }
 
-WeatherThermometerScale {
-  border-radius: $circular_radius;
-  background-image: linear-gradient(to bottom, $weather_thermometer_warm_color, $weather_thermometer_cold_color);
-  margin: 0 36px;
-  padding: 0;
-}
+// WeatherThermometerScale {
+//   border-radius: $circular_radius;
+//   background-image: linear-gradient(to bottom, $weather_thermometer_warm_color, $weather_thermometer_cold_color);
+//   margin: 0 36px;
+//   padding: 0;
+// }
 
 //
 // Gnome Clocks