Skip to content

amirsaam/Radix-UI-Swift

Repository files navigation

RadixUI-Swift

Radix-UI is an open source library optimized for fast development, easy maintenance, and accessibility.

Swift Version License

Since Radix-UI developers said it is not available to Mobile Development (like SwiftUI) and never be (reference), I decided to make it ready for myself to use it because I just like it so much. My inspiration for doing it is Basics website and the minimal and gorgeous design of Radix-UI.

Installation

Add this project on your Package.swift

import PackageDescription

let package = Package(
    dependencies: [
        .package(url: "https://github.com/amirsaam/RadixUI-Swift.git", from: "0.8.00"),
    ]
)

Usage example

Surely import the package

import RadixUI

Use colors as any other colors

Text("RadixUI-Swift")
  .foregroundColor(.crimson1)

In order to use your own custom color pallete head to Radix Pallete Generator and create your pallete and then use color hexes to have your own pallete with the following code:

public extension Color {
    static let colorExampleSolid = Color(lightHex: "lightSixDigitHex", darkHex: "darkSixDigitHex")
    static let colorExampleAlpha = Color(lightHex: "lightEightDigitHex", darkHex: "darkEightDigitHex")
}

Use icons in Image with bundle name completely customisable

Image("github-logo", bundle: .radixUI)
  .resizable()
  .aspectRatio(contentMode: .fit)
  .frame(width: anySize, height: anySize)
  .foregroundColor(.ruby9)

Or, make some custom extension to use Label

struct ResizeableBundledImage: View {

  let imageName: String
  let imageSize: CGFloat
  let bundle: Bundle

  var body: some View {
    Image(imageName, bundle: bundle)
      .resizable()
      .aspectRatio(contentMode: .fit)
      .frame(width: imageSize, height: imageSize)
  }
}

extension Label where Title == Text, Icon == ResizeableBundledImage {
  init(_ title: LocalizedStringKey, imageName: String, imageSize: CGFloat, bundle: Bundle) {
    let titleView: () -> Text = { Text(title) }
    let iconView: () -> ResizeableBundledImage = { ResizeableBundledImage(imageName: imageName, imageSize: imageSize, bundle: bundle) }
    self.init(title: titleView, icon: iconView)
  }
}

Apply RadixSwitch style to SwiftUI Toggles:

Toggle(isOn: $toggleBinding) {
    AnyLabel
}
.radixSwitch(onColor: .ruby9, offColor: .gray7, thumbColor: .ruby9)
// Or simply for Black and White
.radixSwitch()

For changing Segmented Picker of SwiftUI to match Radix style create an init in @main struct of the app or just apply such init in any view you want:

@main
struct RadixApp: App {

  init() {
    RadixSegmentedPicker(
      backgroundColor: .ruby3,
      selectedColor: .ruby12,
      foregroundColor: .ruby4
    )
  }

  var body: some Scene {
    WindowGroup {
      ContentView()
    }
  }
}

Radix Shadows are available as ViewModifier in 6 level:

AnyView
.radixShadow1()
.radixShadow2()
.radixShadow3()
.radixShadow4()
.radixShadow5()
.radixShadow6()

To Do

Any PRs are welcomed:

Dependencies

  • RadixUI-Swift has no dependency

Meta

Amir Mohammadi – @amirsaam – amirsaam [at] me [dot] com

Distributed under the MIT license. See LICENSE for more information.

https://github.com/amirsaam/RadixUI-Swift

Credits