Add Material background modifier. (#144)

Part of #51.

Sources/Slipstream/Documentation.docc/Guides/SlipstreamForTailwindCSSDevelopers.md

@@ -171,7 +171,7 @@ Tailwind utility | Slipstream modifier
 [Invert](https://tailwindcss.com/docs/invert) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Saturate](https://tailwindcss.com/docs/saturate) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Sepia](https://tailwindcss.com/docs/sepia) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
-[Backdrop Blur](https://tailwindcss.com/docs/backdrop-blur) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
+[Backdrop Blur](https://tailwindcss.com/docs/backdrop-blur) | ``View/background(_:condition:)-89gyc``
 [Backdrop Brightness](https://tailwindcss.com/docs/backdrop-brightness) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Backdrop Contrast](https://tailwindcss.com/docs/backdrop-contrast) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)
 [Backdrop Grayscale](https://tailwindcss.com/docs/backdrop-grayscale) | [Not implemented yet](https://github.com/jverkoey/slipstream/issues/51)

Sources/Slipstream/Documentation.docc/Guides/SlipstreamforSwiftUIDevelopers.md

@@ -126,6 +126,19 @@ var body: some View {
 }
 ```
 
+## Materials
+
+SwiftUI and Slipstream both provide the ability to apply material backgrounds to views.
+
+### Offset
+
+```swift
+var body: some View {
+  Text("Blurred background")
+    .background(.ultraThin)
+}
+```
+
 ## Sizing
 
 SwiftUI and Slipstream both provide a

Sources/Slipstream/Documentation.docc/TailwindCSS/Filters/Filters-BackdropBlur.md

@@ -0,0 +1,13 @@
+# Backdrop blur
+
+Utilities for applying backdrop blur filters to an element.
+
+## Topics
+
+### Modifiers
+
+- ``View/background(_:condition:)-89gyc``
+
+### Supporting types
+
+- ``Material``

Sources/Slipstream/Documentation.docc/TailwindCSS/TailwindCSS-Utilities.md

@@ -51,6 +51,10 @@ Slipstream implementations of Tailwind CSS's utility classes.
 - <doc:Borders-Border>
 - <doc:Borders-CornerRadius>
 
+### Filters
+
+- <doc:Filters-BackdropBlur>
+
 ### Transitions and animations
 
 - <doc:TransitionsAndAnimations-Animation>

Sources/Slipstream/TailwindCSS/Backgrounds/View+background.swift

@@ -92,6 +92,14 @@ extension View {
     modifier(TailwindClassModifier(add: "bg-\(color.toTailwindColorClass())", condition: condition))
   }
 
+  /// Sets the background material of the view.
+  ///
+  /// - SeeAlso: Tailwind CSS' [backdrop blur](https://tailwindcss.com/docs/backdrop-blur) documentation.
+  @available(iOS 17.0, macOS 14.0, *)
+  public func background(_ material: Material, condition: Condition? = nil) -> some View {
+    modifier(TailwindClassModifier(add: "backdrop-blur\(material.rawValue)", condition: condition))
+  }
+
   /// Sets the background color to a specific Tailwind CSS palette.
   ///
   /// - Parameters:

Sources/Slipstream/TailwindCSS/Material.swift

@@ -0,0 +1,16 @@
+/// Constants that define a background material type.
+///
+/// - SeeAlso: Tailwind CSS' [`backdrop blur`](https://tailwindcss.com/docs/backdrop-blur) documentation.
+@available(iOS 17.0, macOS 14.0, *)
+public enum Material: String {
+  case ultraThin = "-sm"
+  case thin = ""
+  case regular = "-md"
+  case thick = "-lg"
+  case ultraThick = "-xl"
+
+  // MARK: Tailwind CSS-specific filters
+
+  case ultraUltraThick = "-2xl"
+  case ultraUltraUltraThick = "-3xl"
+}

Tests/SlipstreamTests/TailwindCSS/Backgrounds/BackgroundImageTests.swift → Tests/SlipstreamTests/TailwindCSS/Backgrounds/BackgroundTests.swift

@@ -4,6 +4,26 @@ import Testing
 import Slipstream
 
 struct BackgroundImageTests {
+  // MARK: - Color backgrounds
+
+  @Test func color() throws {
+    try #expect(renderHTML(Div {}.background(.black)) == #"<div class="bg-black"></div>"#)
+    try #expect(renderHTML(Div {}.background(.white)) == #"<div class="bg-white"></div>"#)
+    try #expect(renderHTML(Div {}.background(.white)) == #"<div class="bg-white"></div>"#)
+  }
+
+  @Test func colorWithDarkness() throws {
+    try #expect(renderHTML(Div {}.background(.cyan, darkness: 500)) == #"<div class="bg-cyan-500"></div>"#)
+  }
+
+  @Test func colorWithOpacity() throws {
+    try #expect(renderHTML(Div {}.background(.init(.cyan, darkness: 500).opacity(0))) == #"<div class="bg-cyan-500/0"></div>"#)
+    try #expect(renderHTML(Div {}.background(.init(.cyan, darkness: 500).opacity(0.5))) == #"<div class="bg-cyan-500/50"></div>"#)
+    try #expect(renderHTML(Div {}.background(.init(.cyan, darkness: 500).opacity(20))) == #"<div class="bg-cyan-500"></div>"#)
+  }
+
+  // MARK: - Image backgrounds
+
   @Test func justURL() throws {
     try #expect(renderHTML(Div {}.background(URL(string: "/logo.png"))) == #"<div class="bg-[url('/logo.png')]"></div>"#)
   }
@@ -23,4 +43,16 @@ struct BackgroundImageTests {
     try #expect(renderHTML(Div {}.background(URL(string: "/logo.png"), size: .cover)) == #"<div class="bg-[url('/logo.png')] bg-cover"></div>"#)
     try #expect(renderHTML(Div {}.background(URL(string: "/logo.png"), size: .size(width: 100, height: 50))) == #"<div class="bg-[length:100px_50px] bg-[url('/logo.png')]"></div>"#)
   }
+
+  // MARK: - Material backgrounds
+
+  @Test func material() throws {
+    try #expect(renderHTML(Div {}.background(.ultraThin)) == #"<div class="backdrop-blur-sm"></div>"#)
+    try #expect(renderHTML(Div {}.background(.thin)) == #"<div class="backdrop-blur"></div>"#)
+    try #expect(renderHTML(Div {}.background(.regular)) == #"<div class="backdrop-blur-md"></div>"#)
+    try #expect(renderHTML(Div {}.background(.thick)) == #"<div class="backdrop-blur-lg"></div>"#)
+    try #expect(renderHTML(Div {}.background(.ultraThick)) == #"<div class="backdrop-blur-xl"></div>"#)
+    try #expect(renderHTML(Div {}.background(.ultraUltraThick)) == #"<div class="backdrop-blur-2xl"></div>"#)
+    try #expect(renderHTML(Div {}.background(.ultraUltraUltraThick)) == #"<div class="backdrop-blur-3xl"></div>"#)
+  }
 }