add shadow to config and card

Author: mikhailChelbaev

Examples/DemosApp/DemosApp/ComponentsPreview/PreviewPages/CardPreview.swift

@@ -31,6 +31,13 @@ struct CardPreview: View {
         ContainerRadiusPicker(selection: self.$model.cornerRadius) {
           Text("Custom 4px").tag(ContainerRadius.custom(4))
         }
+        Picker("Shadow", selection: self.$model.shadow) {
+          Text("None").tag(Shadow.none)
+          Text("Small").tag(Shadow.small)
+          Text("Medium").tag(Shadow.medium)
+          Text("Large").tag(Shadow.large)
+          Text("Custom").tag(Shadow.custom(20.0, .zero, ComponentColor.accent.background))
+        }
       }
     }
   }

Sources/ComponentsKit/Components/Card/CardVM.swift

@@ -14,6 +14,8 @@ public struct CardVM: ComponentVM {
   /// Defaults to `.medium`.
   public var cornerRadius: ContainerRadius = .medium
 
+  public var shadow: Shadow = .medium
+
   public init() {}
 }
 

Sources/ComponentsKit/Components/Card/UKCard.swift

@@ -2,11 +2,17 @@ import AutoLayout
 import UIKit
 
 open class UKCard: UIView, UKComponent {
+  // MARK: - Typealiases
+
   public typealias Content = () -> UIView
 
+  // MARK: - Subviews
+
   public let content: UIView
   public let contentView = UIView()
 
+  // MARK: - Properties
+
   private var contentConstraints = LayoutConstraints()
 
   public var model: CardVM {
@@ -15,6 +21,8 @@ open class UKCard: UIView, UKComponent {
     }
   }
 
+  // MARK: - Initialization
+
   public init(model: CardVM, content: @escaping Content) {
     self.model = model
     self.content = content()
@@ -30,16 +38,28 @@ open class UKCard: UIView, UKComponent {
     fatalError("init(coder:) has not been implemented")
   }
 
+  // MARK: - Setup
+
   open func setup() {
     self.addSubview(self.contentView)
     self.contentView.addSubview(self.content)
+
+    if #available(iOS 17.0, *) {
+      self.registerForTraitChanges([UITraitUserInterfaceStyle.self]) { (view: Self, _: UITraitCollection) in
+        view.handleTraitChanges()
+      }
+    }
   }
 
+  // MARK: - Style
+
   open func style() {
     Self.Style.mainView(self, model: self.model)
     Self.Style.contentView(self.contentView, model: self.model)
   }
 
+  // MARK: - Layout
+
   open func layout() {
     self.contentView.allEdges()
 
@@ -71,6 +91,21 @@ open class UKCard: UIView, UKComponent {
 
     self.layoutIfNeeded()
   }
+
+  // MARK: - UIView Methods
+
+  open override func traitCollectionDidChange(
+    _ previousTraitCollection: UITraitCollection?
+  ) {
+    super.traitCollectionDidChange(previousTraitCollection)
+    self.handleTraitChanges()
+  }
+
+  // MARK: - Helpers
+
+  @objc private func handleTraitChanges() {
+    Self.Style.mainView(self, model: self.model)
+  }
 }
 
 extension UKCard {
@@ -79,11 +114,11 @@ extension UKCard {
       view.backgroundColor = UniversalColor.background.uiColor
       view.layer.cornerRadius = model.cornerRadius.value
       view.layer.borderWidth = 1
-      view.layer.borderColor = UniversalColor.divider.uiColor.cgColor
-      view.layer.shadowColor = UIColor.black.cgColor
-      view.layer.shadowRadius = 16
-      view.layer.shadowOpacity = 0.1
-      view.layer.shadowOffset = .init(width: 0, height: 10)
+      view.layer.borderColor = UniversalColor.divider.cgColor
+      view.layer.shadowRadius = model.shadow.radius
+      view.layer.shadowOffset = model.shadow.offset
+      view.layer.shadowColor = model.shadow.color.cgColor
+      view.layer.shadowOpacity = 1
     }
 
     static func contentView(_ view: UIView, model: Model) {

Sources/ComponentsKit/Configuration/Layout.swift

@@ -85,6 +85,65 @@ extension ComponentsKitConfig {
       }
     }
 
+    // MARK: - Shadow
+
+    /// A structure that defines the parameters for a shadow effect.
+    public struct ShadowParams {
+      /// The blur radius of the shadow.
+      ///
+      /// A larger radius results in a more diffuse shadow.
+      public var radius: CGFloat
+
+      /// The offset of the shadow, defining its position relative to the component.
+      ///
+      /// - `width`: Moves the shadow horizontally.
+      /// - `height`: Moves the shadow vertically.
+      public var offset: CGSize
+
+      /// The color of the shadow.
+      public var color: UniversalColor
+
+      // MARK: - Initialization
+
+      /// Initializes a new `ShadowParams` instance with the specified radius, offset, and color.
+      ///
+      /// - Parameters:
+      ///   - radius: The blur radius of the shadow.
+      ///   - offset: The offset of the shadow as a `CGSize`.
+      ///   - color: The color of the shadow.
+      public init(radius: CGFloat, offset: CGSize, color: UniversalColor) {
+        self.radius = radius
+        self.offset = offset
+        self.color = color
+      }
+    }
+
+    /// A structure that defines shadow presets for small, medium, and large shadows.
+    public struct Shadow {
+      /// The shadow parameters for a small shadow.
+      public var small: ShadowParams
+
+      /// The shadow parameters for a medium shadow.
+      public var medium: ShadowParams
+
+      /// The shadow parameters for a large shadow.
+      public var large: ShadowParams
+
+      // MARK: - Initialization
+
+      /// Initializes a new `Shadow` instance with the specified small, medium, and large shadow parameters.
+      ///
+      /// - Parameters:
+      ///   - small: The parameters for a small shadow.
+      ///   - medium: The parameters for a medium shadow.
+      ///   - large: The parameters for a large shadow.
+      public init(small: ShadowParams, medium: ShadowParams, large: ShadowParams) {
+        self.small = small
+        self.medium = medium
+        self.large = large
+      }
+    }
+
     // MARK: - Typography
 
     /// A structure representing a set of fonts for different component sizes.
@@ -154,6 +213,34 @@ extension ComponentsKitConfig {
       large: 26.0
     )
 
+    /// The shadow configuration for components.
+    public var shadow: Shadow = .init(
+      small: .init(
+        radius: 10.0,
+        offset: .init(width: 0, height: 6),
+        color: .themed(
+          light: .rgba(r: 0, g: 0, b: 0, a: 0.1),
+          dark: .rgba(r: 255, g: 255, b: 255, a: 0.1)
+        )
+      ),
+      medium: .init(
+        radius: 16.0,
+        offset: .init(width: 0, height: 10),
+        color: .themed(
+          light: .rgba(r: 0, g: 0, b: 0, a: 0.15),
+          dark: .rgba(r: 255, g: 255, b: 255, a: 0.15)
+        )
+      ),
+      large: .init(
+        radius: 20.0,
+        offset: .init(width: 0, height: 12),
+        color: .themed(
+          light: .rgba(r: 0, g: 0, b: 0, a: 0.2),
+          dark: .rgba(r: 255, g: 255, b: 255, a: 0.2)
+        )
+      )
+    )
+
     /// The border width configuration for components.
     public var borderWidth: BorderWidth = .init(
       small: 1.0,

Sources/ComponentsKit/Configuration/Palette.swift

@@ -151,6 +151,9 @@ extension UniversalColor {
   public static var white: Self {
     return .universal(.hex("#FFFFFF"))
   }
+  public static var clear: Self {
+    return .universal(.uiColor(.clear))
+  }
 }
 
 // MARK: - UniversalColor + Palette Colors

Sources/ComponentsKit/Shared/Colors/UniversalColor.swift

@@ -162,4 +162,9 @@ public struct UniversalColor: Hashable {
   public var color: Color {
     return Color(self.uiColor)
   }
+
+  /// Returns the `CGColor` representation of the color.
+  public var cgColor: CGColor {
+    return self.uiColor.cgColor
+  }
 }

Sources/ComponentsKit/Shared/Types/Shadow.swift

@@ -0,0 +1,52 @@
+import Foundation
+
+/// Defines shadow options for components.
+public enum Shadow: Hashable {
+  /// No shadow is applied.
+  case none
+  /// A small shadow, using a predefined configuration.
+  case small
+  /// A medium shadow, using a predefined configuration.
+  case medium
+  /// A large shadow, using a predefined configuration.
+  case large
+  /// A custom shadow with specific parameters.
+  ///
+  /// - Parameters:
+  ///   - radius: The blur radius of the shadow.
+  ///   - offset: The offset of the shadow.
+  ///   - color: The color of the shadow.
+  case custom(_ radius: CGFloat, _ offset: CGSize, _ color: UniversalColor)
+}
+
+extension Shadow {
+  var radius: CGFloat {
+    return switch self {
+    case .none: CGFloat(0)
+    case .small: ComponentsKitConfig.shared.layout.shadow.small.radius
+    case .medium: ComponentsKitConfig.shared.layout.shadow.medium.radius
+    case .large: ComponentsKitConfig.shared.layout.shadow.large.radius
+    case .custom(let radius, _, _): radius
+    }
+  }
+
+  var offset: CGSize {
+    return switch self {
+    case .none: .zero
+    case .small: ComponentsKitConfig.shared.layout.shadow.small.offset
+    case .medium: ComponentsKitConfig.shared.layout.shadow.medium.offset
+    case .large: ComponentsKitConfig.shared.layout.shadow.large.offset
+    case .custom(_, let offset, _): offset
+    }
+  }
+
+  var color: UniversalColor {
+    return switch self {
+    case .none: .clear
+    case .small: ComponentsKitConfig.shared.layout.shadow.small.color
+    case .medium: ComponentsKitConfig.shared.layout.shadow.medium.color
+    case .large: ComponentsKitConfig.shared.layout.shadow.large.color
+    case .custom(_, _, let color): color
+    }
+  }
+}