Add shadows to capsule style

Author: danielsaidi

RELEASE_NOTES.md

@@ -11,6 +11,14 @@ This requires standard styles to be converted to read-only values.
 
 This version also adjusts the visual appearance of some standard styles.
 
+### ✨ Features
+
+* `TagCapsuleStyle` now supports specifying a shadow.
+
+### 💡 Behavior Changes
+
+* `TagCapsule.standard` and `.standardSelected` now use material backgrounds.
+
 
 
 ## 0.2

Sources/TagKit/Views/TagCapsule.swift

@@ -33,7 +33,6 @@ public struct TagCapsule: View {
         Text(tag)
             .padding(style.padding)
             .foregroundColor(style.foregroundColor)
-            
             .materialCapsuleBackground(with: style.backgroundMaterial)
             .background(Capsule().fill(style.backgroundColor))
             .padding(style.borderWidth)
@@ -44,6 +43,12 @@ public struct TagCapsule: View {
                 )
             )
             .compositingGroup()
+            .shadow(
+                color: style.shadow.color,
+                radius: style.shadow.radius,
+                x: style.shadow.offsetX,
+                y: style.shadow.offsetY
+            )
 
     }
 }
@@ -76,12 +81,6 @@ private extension View {
                     TagCapsule("standard-selected")
                         .tagCapsuleStyle(.standardSelected)
                 }
-                HStack {
-                    TagCapsule("material")
-                        .tagCapsuleStyle(.standardMaterial)
-                    TagCapsule("material-selected")
-                        .tagCapsuleStyle(.standardSelectedMaterial)
-                }
 
                 TagCapsule("spider-man")
                     .tagCapsuleStyle(.init(

Sources/TagKit/Views/TagCapsuleStyle.swift

@@ -9,29 +9,34 @@
 import SwiftUI
 
 /// This style can be used to style ``TagCapsule`` views. It
-/// lets you define visual styles like colors and padding.
+/// lets you define visual styles, like fore- and background
+/// colors, background materials, border, and padding.
 ///
-/// There is a boring ``TagCapsuleStyle/standard`` style, as
-/// well as the even worse``TagCapsuleStyle/standardSelected``
-/// style. There are also some material-based styles such as
-/// ``TagCapsuleStyle/standardMaterial``.
+/// To style other parts of the capsule, such as the font or
+/// the font weight, use native SwiftUI view modifiers.
+///
+/// The ``standard`` and ``standardSelected`` capsule styles
+/// use a primary foreground color, a clear background color
+/// and a material background.
 public struct TagCapsuleStyle {
 
     /// Create a new tag capsule style.
     ///
     /// - Parameters:
-    ///   - foregroundColor: The foreground color to use, by default `.black`.
-    ///   - backgroundColor: The background color to use, by default `.gray`.
-    ///   - backgroundMaterial: The background material to use, by default `.blue`.
-    ///   - borderColor: The border color to use, by default `.clear`.
-    ///   - borderWidth: The border width to use, by default `1`.
+    ///   - foregroundColor: The foreground color, by default `.primary`.
+    ///   - backgroundColor: The background color, by default `.clear`.
+    ///   - backgroundMaterial: The background material, by default `.ultraThin`.
+    ///   - borderColor: The border color, by default `.clear`.
+    ///   - borderWidth: The border width, by default `1`.
+    ///   - shadow: The shadow style, by default ``Shadow/standard``.
     ///   - padding: The intrinsic padding to apply, by default a small padding.
     public init(
-        foregroundColor: Color = .black,
-        backgroundColor: Color = .gray,
-        backgroundMaterial: Material? = nil,
+        foregroundColor: Color = .primary,
+        backgroundColor: Color = .clear,
+        backgroundMaterial: Material? = .ultraThin,
         borderColor: Color = .clear,
         borderWidth: Double = 1,
+        shadowStyle: Shadow = .standard,
         padding: EdgeInsets? = nil
     ) {
         var defaultPadding: EdgeInsets
@@ -47,66 +52,107 @@ public struct TagCapsuleStyle {
         self.borderColor = borderColor
         self.borderWidth = borderWidth
         self.padding = padding ?? defaultPadding
+        self.shadow = shadowStyle
     }
 
-    /// The foreground color to use.
+    /// The foreground color.
     public var foregroundColor: Color
 
-    /// The background color to use.
+    /// The background color.
     public var backgroundColor: Color
 
-    /// The background material to use.
+    /// The background material.
     public var backgroundMaterial: Material?
 
-    /// The border color to use.
+    /// The border color.
     public var borderColor: Color
 
-    /// The border width to use.
+    /// The border width.
     public var borderWidth: Double
+    
+    // The shadow style.
+    public var shadow: Shadow
 
     /// The padding to apply to the text.
     public var padding: EdgeInsets
 }
 
+public extension TagCapsuleStyle {
+    
+    struct Shadow {
+        
+        /// Create a new tag capsule shadow style.
+        ///
+        /// - Parameters:
+        ///   - color: The shadow color, by default `.clear`.
+        ///   - radius: The shadow radius, by default `0`.
+        ///   - offsetX: The x offset, by default `0`.
+        ///   - offsetY: The y offset, by default `1`.
+        public init(
+            color: Color = .clear,
+            radius: Double = 0,
+            offsetX: Double = 0,
+            offsetY: Double = 1
+        ) {
+            self.color = color
+            self.radius = radius
+            self.offsetX = offsetX
+            self.offsetY = offsetY
+        }
+
+        /// The shadow color.
+        public var color: Color
+
+        /// The shadow radius.
+        public var radius: Double
+        
+        /// The x offset.
+        public var offsetX: Double
+
+        /// The y offset.
+        public var offsetY: Double
+    }
+}
+
 public extension TagCapsuleStyle {
 
     /// The standard style.
-    static var standard: TagCapsuleStyle { .init() }
+    static var standard: Self {
+        .init()
+    }
 
     /// The standard, selected style.
-    static var standardSelected: TagCapsuleStyle {
+    static var standardSelected: Self {
         .init(
-            foregroundColor: .white,
-            backgroundColor: .black,
-            borderColor: .white
+            backgroundMaterial: .regular,
+            shadowStyle: .standardSelected
         )
     }
-    
-    /// A standard material-based style.
-    static var standardMaterial: TagCapsuleStyle {
-        .init(
-            foregroundColor: .primary,
-            backgroundColor: .clear,
-            backgroundMaterial: .ultraThin
-        )
+}
+
+public extension TagCapsuleStyle.Shadow {
+
+    /// The standard style.
+    static var standard: Self {
+        .init()
     }
-    
-    /// A standard, selected material-based style.
-    static var standardMaterialSelected: TagCapsuleStyle {
+
+    /// The standard, selected shadow style.
+    static var standardSelected: Self {
         .init(
-            foregroundColor: .primary,
-            backgroundColor: .clear,
-            backgroundMaterial: .regular
+            color: .primary.opacity(0.5),
+            radius: 0
         )
     }
 }
 
 public extension TagCapsuleStyle {
 
-    @available(*, deprecated, renamed: "standardMaterialSelected")
-    static var standardSelectedMaterial: TagCapsuleStyle {
-        .standardMaterialSelected
-    }
+    @available(*, deprecated, renamed: "standard")
+    static var standardMaterial: TagCapsuleStyle { .standard }
+    
+    @available(*, deprecated, renamed: "standardSelected")
+    static var standardSelectedMaterial: TagCapsuleStyle { .standardSelected }
 }
 
 

Sources/TagKit/Views/TagEditList.swift

@@ -138,19 +138,18 @@ private extension TagEditList {
                 ScrollView {
                     VStack(alignment: .leading, spacing: 30) {
                         list("Standard Style", .standard, .standardSelected)
-                        list("Standard Material Style", .standardMaterial, .standardMaterialSelected)
                         list("Custom Style", .custom, .customSelected)
                     }
                     .padding()
 
                 }
-                .background(
-                    LinearGradient(
-                        colors: [.red, .blue],
-                        startPoint: .top,
-                        endPoint: .bottom
-                    )
-                )
+//                .background(
+//                    LinearGradient(
+//                        colors: [.red, .blue],
+//                        startPoint: .top,
+//                        endPoint: .bottom
+//                    )
+//                )
                 .toolbar {
                     ToolbarItem {
                         HStack {
@@ -205,7 +204,6 @@ private extension TagEditList {
     }
 
     return Preview()
-        // .preferredColorScheme(.dark)
 }
 
 private extension TagCapsuleStyle {