gpui: Add support for slash pattern fills (///) (#23576)

TODO:
- [x] Add BackgroundTag::PatternSlash
- [x] Support metal slash pattern fills
- [x] Support blade slash pattern fills
---

Adds support for a new background type in gpui, `pattern_slash`.

Usage:

```rust
div().size(px(56.0)).bg(pattern_slash(gpui::red()))
```
This will create a 56px square with a red slash pattern fill.

You can run the pattern example with `cargo run -p gpui --example
pattern`:

![CleanShot 2025-01-23 at 16 22
09@2x](https://github.com/user-attachments/assets/39d9f8c8-816c-4d3b-bc75-fcc122747e17)

---

After talking with @as-cii at length about how we want to support
patterns in gpui, we decided for now we'll simply add a new
BackgroundTag specific to this pattern.

It isn't the best long term plan however – we'll likely want to
introduce the concept of a `Fill` at some point so we can have
`Fill::Solid`, `Fill::Gradient(LinearGradient)`, etc in the future.

The pattern is designed to seamlessly tile vertically for elements of
the same height. For example, for use in editor line backgrounds:

![CleanShot 2025-01-23 at 16 27
41@2x](https://github.com/user-attachments/assets/d51b94bc-cfc2-4aff-89e3-289a04ea8841)

---


Release Notes:

(do we do gpui release notes?)
- Adds support for slash pattern fills in `gpui`.

---------

Co-authored-by: Antonio Scandurra <me@as-cii.com>

crates/gpui/src/platform/blade/shaders.wgsl

@@ -45,6 +45,7 @@ struct LinearColorStop {
 struct Background {
     // 0u is Solid
     // 1u is LinearGradient
+    // 2u is PatternSlash
     tag: u32,
     // 0u is sRGB linear color
     // 1u is Oklab color
@@ -285,7 +286,7 @@ fn prepare_gradient_color(tag: u32, color_space: u32,
     solid: Hsla, colors: array<LinearColorStop, 2>) -> GradientColor {
     var result = GradientColor();
 
-    if (tag == 0u) {
+    if (tag == 0u || tag == 2u) {
         result.solid = hsla_to_rgba(solid);
     } else if (tag == 1u) {
         // The hsla_to_rgba is returns a linear sRGB color
@@ -357,6 +358,22 @@ fn gradient_color(background: Background, position: vec2<f32>, bounds: Bounds,
                 }
             }
         }
+        case 2u: {
+            let base_pattern_size = bounds.size.y / 5.0;
+            let width = base_pattern_size * 0.5;
+            let slash_spacing = 0.89;
+            let radians = M_PI_F / 4.0;
+            let rotation = mat2x2<f32>(
+                cos(radians), -sin(radians),
+                sin(radians), cos(radians)
+            );
+            let relative_position = position - bounds.origin;
+            let rotated_point = rotation * relative_position;
+            let pattern = (rotated_point.x / slash_spacing) % (base_pattern_size * 2.0);
+            let distance = min(pattern, base_pattern_size * 2.0 - pattern) - width;
+            background_color = sold_color;
+            background_color.a *= saturate(0.5 - distance);
+        }
     }
 
     return background_color;