Alpha-blend borders with backgrounds in quad SDF

Antonio Scandurra and Max Brunsfeld created 4 years ago

Co-Authored-By: Max Brunsfeld <[e-mail]>

Change summary

crates/gpui/src/platform/mac/shaders/shaders.metal | 14 ++++++++++----
crates/zed/assets/themes/black.toml                |  2 +-
crates/zed/assets/themes/dark.toml                 |  2 +-
3 files changed, 12 insertions(+), 6 deletions(-)

Detailed changes

crates/gpui/src/platform/mac/shaders/shaders.metal

@@ -66,13 +66,19 @@ float4 quad_sdf(QuadFragmentInput input) {
         border_width = vertical_border;
     }
 
-    float4 color = input.background_color * float4(1., 1., 1., saturate(0.5 - distance));
-    if (border_width != 0.) {
+    float4 color;
+    if (border_width == 0.) {
+        color = input.background_color;
+    } else {
         float inset_distance = distance + border_width;
-        color = mix(input.border_color, color, saturate(0.5 - inset_distance));
+        float4 border_color = float4(
+            mix(input.background_color.rgb, input.border_color.rgb, input.border_color.a),
+            saturate(input.background_color.a + input.border_color.a)
+        );
+        color = mix(border_color, input.background_color, saturate(0.5 - inset_distance));
     }
 
-    return color;
+    return color * float4(1., 1., 1., saturate(0.5 - distance));
 }
 
 vertex QuadFragmentInput quad_vertex(

crates/zed/assets/themes/black.toml

@@ -7,7 +7,7 @@ extends = "_base"
 
 [border]
 0 = "#000000B2"
-1 = "#FFFFFF16"
+1 = "#FFFFFF4A"
 
 [text]
 0 = { extends = "$text.base", color = "#ffffff" }

crates/zed/assets/themes/dark.toml

@@ -7,7 +7,7 @@ extends = "_base"
 
 [border]
 0 = "#1B222B"
-1 = "#FFFFFF16"
+1 = "#FFFFFF4A"
 
 [text]
 0 = { extends = "$text.base", color = "#FFFFFF" }