Rename backgroundColor to backgroundStyle

Sources/Orbit/Components/Badge.swift

@@ -8,7 +8,7 @@ import SwiftUI
 /// - Note: [Orbit definition](https://orbit.kiwi/components/badge/)
 public struct Badge<LeadingIcon: View, TrailingIcon: View>: View, PotentiallyEmptyView {
 
-    @Environment(\.backgroundColor) private var backgroundColor
+    @Environment(\.backgroundShape) private var backgroundShape
     @Environment(\.sizeCategory) private var sizeCategory
     @Environment(\.status) private var status
     @Environment(\.textColor) private var textColor
@@ -48,8 +48,8 @@ public struct Badge<LeadingIcon: View, TrailingIcon: View>: View, PotentiallyEmp
     }
 
     @ViewBuilder var resolvedBackground: some View {
-        if let backgroundColor {
-            backgroundColor.inactiveView
+        if let backgroundShape {
+            backgroundShape.inactiveView
         } else {
             defaultBackgroundColor
         }
@@ -97,8 +97,6 @@ public extension Badge {
 
     /// Creates Orbit Badge component.
     ///
-    /// Custom background color be specified using `.backgroundColor()` modifier.
-    ///
     /// - Parameters:
     ///   - type: A visual style of component. A `status` style can be optionally modified using `status()` modifier when `nil` value is provided.
     init(
@@ -116,8 +114,6 @@ public extension Badge {
 
     /// Creates Orbit Badge component with custom icons.
     ///
-    /// Custom background color be specified using `.backgroundColor()` modifier.
-    ///
     /// - Parameters:
     ///   - style: A visual style of component. A `status` style can be optionally modified using `status()` modifier when `nil` value is provided.
     init(
@@ -224,7 +220,7 @@ struct BadgePreviews: PreviewProvider {
                 Badge("Custom", icon: .airplane)
                     .iconColor(.pink)
                     .textColor(.blueDark)
-                    .backgroundColor(.whiteHover)
+                    .backgroundStyle(.whiteHover)
 
                 Badge("Flag") {
                     CountryFlag("us")
@@ -270,7 +266,7 @@ struct BadgePreviews: PreviewProvider {
     static func gradientBadge(_ gradient: Gradient) -> some View {
         badges(.neutral)
             .textColor(.whiteNormal)
-            .backgroundColor(gradient.background)
+            .backgroundStyle(gradient.background)
             .previewDisplayName("\(String(describing: gradient).titleCased)")
     }
 }

Sources/Orbit/Components/Button.swift

@@ -198,13 +198,13 @@ struct ButtonPreviews: PreviewProvider {
     @ViewBuilder static var gradients: some View {
         LazyVStack(alignment: .leading, spacing: .xLarge) {
             buttons(.primary)
-                .backgroundColor(Gradient.bundleBasic.background, active: Gradient.bundleBasic.startColor)
+                .backgroundStyle(Gradient.bundleBasic.background, active: Gradient.bundleBasic.startColor)
                 .previewDisplayName("Bundle Basic")
             buttons(.primary)
-                .backgroundColor(Gradient.bundleMedium.background, active: Gradient.bundleMedium.startColor)
+                .backgroundStyle(Gradient.bundleMedium.background, active: Gradient.bundleMedium.startColor)
                 .previewDisplayName("Bundle Medium")
             buttons(.primary)
-                .backgroundColor(Gradient.bundleTop.background, active: Gradient.bundleTop.startColor)
+                .backgroundStyle(Gradient.bundleTop.background, active: Gradient.bundleTop.startColor)
                 .previewDisplayName("Bundle Top")
         }
         .padding(.medium)

Sources/Orbit/Components/Card.swift

@@ -8,7 +8,7 @@ import SwiftUI
 /// - Important: Component expands horizontally unless prevented by `fixedSize` or `idealSize` modifier.
 public struct Card<Content: View>: View {
 
-    @Environment(\.backgroundColor) private var backgroundColor
+    @Environment(\.backgroundShape) private var backgroundShape
     @Environment(\.idealSize) private var idealSize
 
     let title: String
@@ -28,7 +28,7 @@ public struct Card<Content: View>: View {
             if isContentEmpty == false {
                 VStack(alignment: contentAlignment, spacing: contentSpacing) {
                     content
-                        .backgroundColor(nil)
+                        .backgroundStyle(nil)
                 }
                 .padding(.top, isHeaderEmpty ? contentPadding : 0)
                 .padding([.horizontal, .bottom], contentPadding)
@@ -78,8 +78,8 @@ public struct Card<Content: View>: View {
     }
 
     @ViewBuilder var resolvedBackground: some View {
-        if let backgroundColor {
-            backgroundColor.inactiveView
+        if let backgroundShape {
+            backgroundShape.inactiveView
         } else {
             Color.whiteDarker
         }
@@ -118,8 +118,6 @@ public struct Card<Content: View>: View {
 public extension Card {
 
     /// Creates Orbit Card component.
-    ///
-    /// Custom background color be specified using `.backgroundColor()` modifier.
     init(
         _ title: String = "",
         description: String = "",
@@ -298,13 +296,13 @@ struct CardPreviews: PreviewProvider {
         ) {
             VStack(spacing: 0) {
                 ListChoice("ListChoice", action: {})
-                    .backgroundColor(.blueLight, active: .greenLight)
+                    .backgroundStyle(.blueLight, active: .greenLight)
                 ListChoice("ListChoice", icon: .map, action: {})
                 ListChoice("ListChoice", description: "ListChoice description", icon: .airplane, showSeparator: false, action: {})
             }
             .padding(.top, .xSmall)
         }
-        .backgroundColor(.clear)
+        .backgroundStyle(.clear)
         .previewDisplayName()
     }
 

Sources/Orbit/Components/ChoiceTile.swift

@@ -6,7 +6,7 @@ import SwiftUI
 /// - Important: Component expands horizontally unless prevented by `fixedSize` or `idealSize` modifier.
 public struct ChoiceTile<Content: View, Icon: View, Header: View, Illustration: View>: View {
 
-    @Environment(\.backgroundColor) private var backgroundColor
+    @Environment(\.backgroundShape) private var backgroundShape
     @Environment(\.idealSize) private var idealSize
     @Environment(\.status) private var status
     @Environment(\.isHapticsEnabled) private var isHapticsEnabled
@@ -232,8 +232,6 @@ public extension ChoiceTile {
 
     /// Creates Orbit ChoiceTile component.
     ///
-    /// Custom background color be specified using `.backgroundColor()` modifier.
-    ///
     /// - Parameters:
     ///   - content: The content shown below the header.
     ///   - header: A trailing view placed inside the tile header.
@@ -271,8 +269,6 @@ public extension ChoiceTile {
 
     /// Creates Orbit ChoiceTile component.
     ///
-    /// Custom background color be specified using `.backgroundColor()` modifier.
-    ///
     /// - Parameters:
     ///   - content: The content shown below the header.
     ///   - header: A trailing view placed inside the tile header.
@@ -525,7 +521,7 @@ struct ChoiceTilePreviews: PreviewProvider {
 
     @ViewBuilder static var content: some View {
         choiceTile(titleStyle: .title4, showHeader: true, isError: false, isSelected: false)
-            .backgroundColor(.redLight)
+            .backgroundStyle(.redLight)
         choiceTile(titleStyle: .title4, showHeader: true, isError: false, isSelected: true)
         choiceTile(titleStyle: .title3, showHeader: true, isError: false, isSelected: false)
         choiceTile(titleStyle: .title4, showHeader: false, isError: false, isSelected: true)

Sources/Orbit/Components/Collapse.swift

@@ -51,8 +51,6 @@ public struct Collapse<Header: View, Content: View>: View {
 public extension Collapse {
 
     /// Creates Orbit Collapse component with a binding to the expansion state.
-    ///
-    /// Custom background color be specified using `.backgroundColor()` modifier.
     init(
         isExpanded: Binding<Bool>,
         showSeparator: Bool = true,
@@ -67,8 +65,6 @@ public extension Collapse {
     }
 
     /// Creates Orbit Collapse component.
-    ///
-    /// Custom background color be specified using `.backgroundColor()` modifier.
     init(@ViewBuilder content: () -> Content, showSeparator: Bool = true, @ViewBuilder header: () -> Header) {
         self.header = header()
         self.headerVerticalPadding = 0

Sources/Orbit/Components/ListChoice.swift

@@ -170,8 +170,6 @@ public struct ListChoice<Header: View, Icon: View, Content: View>: View, Potenti
     }
 
     /// Creates Orbit ListChoice component with custom content.
-    ///
-    /// Custom background color be specified using `.backgroundColor()` modifier.
     public init(
         _ title: String = "",
         description: String = "",
@@ -199,8 +197,6 @@ public struct ListChoice<Header: View, Icon: View, Content: View>: View, Potenti
 public extension ListChoice {
 
     /// Creates Orbit ListChoice component.
-    ///
-    /// Custom background color be specified using `.backgroundColor()` modifier.
     init(
         _ title: String = "",
         description: String = "",
@@ -231,8 +227,6 @@ public extension ListChoice {
 public extension ListChoice where Header == Text {
 
     /// Creates Orbit ListChoice component with text header value.
-    ///
-    /// Custom background color be specified using `.backgroundColor()` modifier.
     init(
         _ title: String = "",
         description: String = "",

Sources/Orbit/Components/NotificationBadge.swift

@@ -5,7 +5,7 @@ import SwiftUI
 /// - Note: [Orbit definition](https://orbit.kiwi/components/information/notificationbadge/)
 public struct NotificationBadge<Content: View>: View {
 
-    @Environment(\.backgroundColor) private var backgroundColor
+    @Environment(\.backgroundShape) private var backgroundShape
     @Environment(\.status) private var status
     @Environment(\.sizeCategory) private var sizeCategory
     @Environment(\.textColor) private var textColor
@@ -30,8 +30,8 @@ public struct NotificationBadge<Content: View>: View {
 
 
     @ViewBuilder var resolvedBackground: some View {
-        if let backgroundColor {
-            backgroundColor.inactiveView
+        if let backgroundShape {
+            backgroundShape.inactiveView
         } else {
             defaultBackgroundColor
         }
@@ -81,8 +81,6 @@ public struct NotificationBadge<Content: View>: View {
 
     /// Creates Orbit NotificationBadge component with custom content.
     ///
-    /// Custom background color be specified using `.backgroundColor()` modifier.
-    ///
     /// - Parameters:
     ///   - type: A visual style of component. A `status` style can be optionally modified using `status()` modifier when `nil` value is provided.
     public init(
@@ -99,8 +97,6 @@ public extension NotificationBadge {
 
     /// Creates Orbit NotificationBadge component containing text.
     ///
-    /// Custom background color be specified using `.backgroundColor()` modifier.
-    ///
     /// - Parameters:
     ///   - style: A visual style of component. A `status` style can be optionally modified using `status()` modifier when `nil` value is provided.
     init(
@@ -202,7 +198,7 @@ struct NotificationBadgePreviews: PreviewProvider {
                 NotificationBadge(.airplane)
                     .iconColor(.pink)
                     .textColor(.blueDark)
-                    .backgroundColor(.whiteNormal)
+                    .backgroundStyle(.whiteNormal)
 
                 NotificationBadge {
                     CountryFlag("us")
@@ -233,7 +229,7 @@ struct NotificationBadgePreviews: PreviewProvider {
 
     static func gradientBadge(_ gradient: Gradient) -> some View {
         badges(.neutral)
-            .backgroundColor(gradient.background)
+            .backgroundStyle(gradient.background)
             .textColor(.whiteNormal)
             .previewDisplayName("\(String(describing: gradient).titleCased)")
     }

Sources/Orbit/Components/SocialButton.swift

@@ -36,7 +36,7 @@ public struct SocialButton: View {
             }
         )
         .textColor(textColor)
-        .backgroundColor(background, active: backgroundActive)
+        .backgroundStyle(background, active: backgroundActive)
     }
 
     @ViewBuilder var logo: some View {

Sources/Orbit/Components/Tag.swift

@@ -65,8 +65,6 @@ public struct Tag<Icon: View>: View, PotentiallyEmptyView {
 public extension Tag {
 
     /// Creates Orbit Tag component with custom icon.
-    ///
-    /// Custom background color be specified using `.backgroundColor()` modifier.
     init(
         _ label: String = "",
         style: TagStyle = .default,
@@ -82,8 +80,6 @@ public extension Tag {
     }
 
     /// Creates Orbit Tag component.
-    ///
-    /// Custom background color be specified using `.backgroundColor()` modifier.
     init(
         _ label: String = "",
         icon: Icon.Symbol? = nil,

Sources/Orbit/Components/Tile.swift

@@ -143,8 +143,6 @@ public struct Tile<Content: View, Icon: View>: View {
 public extension Tile {
 
     /// Creates Orbit Tile component.
-    ///
-    /// Custom background color be specified using `.backgroundColor()` modifier.
     init(
         _ title: String = "",
         description: String = "",
@@ -173,8 +171,6 @@ public extension Tile {
     }
 
     /// Creates Orbit Tile component with custom icon.
-    ///
-    /// Custom background color be specified using `.backgroundColor()` modifier.
     init(
         _ title: String = "",
         description: String = "",

Sources/Orbit/Orbit.docc/Components/Extensions/Badge.md

@@ -9,4 +9,4 @@
 ### Customizing Appearance
 
 - ``BadgeType``
-- ``BackgroundColor``
+- ``BackgroundShape``

Sources/Orbit/Orbit.docc/Components/Extensions/Card.md

@@ -13,4 +13,4 @@
 ### Customizing Appearance
 
 - ``CardContentLayout``
-- ``BackgroundColor``
+- ``BackgroundShape``

Sources/Orbit/Orbit.docc/Components/Extensions/ChoiceTile.md

@@ -8,4 +8,4 @@
 
 ### Customizing Appearance
 
-- ``BackgroundColor``
+- ``BackgroundShape``

Sources/Orbit/Orbit.docc/Components/Extensions/Tag.md

@@ -10,4 +10,4 @@
 
 - ``TagButtonStyle``
 - ``TagStyle``
-- ``BackgroundColor``
+- ``BackgroundShape``

Sources/Orbit/Orbit.docc/Components/Extensions/Tile.md

@@ -12,4 +12,4 @@
 - ``TileBorderStyle``
 - ``TileButtonStyle``
 - ``TileDisclosure``
-- ``BackgroundColor``
+- ``BackgroundShape``

Sources/Orbit/Orbit.docc/Uncategorized.md

@@ -59,7 +59,7 @@ Supporting types and components under development.
 ### Other
 
 - ``AssetNameProviding``
-- ``BackgroundColor``
+- ``BackgroundShape``
 - ``BadgeListType``
 - ``BarButton``
 - ``BorderWidth``

Sources/Orbit/Support/ButtonStyles/AlertButtonStyle.swift

@@ -23,7 +23,7 @@ public struct AlertButtonStyle: PrimitiveButtonStyle {
         .textFontWeight(.medium)
         .textSize(.small)
         .textColor(textColor)
-        .backgroundColor(background, active: backgroundActive)
+        .backgroundStyle(background, active: backgroundActive)
     }
 
     var textColor: Color {

Sources/Orbit/Support/ButtonStyles/AlertInlineButtonStyle.swift

@@ -22,7 +22,7 @@ struct AlertInlineButtonStyle: PrimitiveButtonStyle {
         }
         .textFontWeight(.medium)
         .textColor(resolvedStatus.darkColor)
-        .backgroundColor(.clear, active: resolvedStatus.color.opacity(0.24))
+        .backgroundStyle(.clear, active: resolvedStatus.color.opacity(0.24))
         .idealSize()
     }