[MOB-2845] BezierColor, BezierTheme 추가 #90

solchan87 · 2025-01-02T06:38:54Z

어떤 PR 인가요?

BezierColor 와 BezierTheme 을 추가하는 PR 입니다.

왜 필요한건가요? (Optional)

작업 내용

최소 지원 버전을 15로 올립니다.
BezierColor 를 추가합니다.
- V1 Color 호환을 위해 V2 컬러를 참조하는 V1 컬러를 추가합니다.
- deprecated 를 추가해서 마이그레이션 가이드를 제공합니다.
BezierTheme을 추가합니다.
UIKitSample 을 제거합니다.

스크린샷 혹은 동영상

Reference

Figma
BezierColor(iOS)
Color 가이드 문서

Issue-number

Checklist

PR 제목을 라벨과 함께 명령형으로 작성했습니다.
코딩 컨벤션 에 맞춰서 작성했습니다
리뷰 리퀘스트 전에 더 이상 스스로 리뷰할게 없을 정도까지 셀프 리뷰를 진행했습니다
변경사항에 대한 테스트코드를 추가했습니다. 또는, 테스트코드가 필요없는 이유가 있습니다(현재는 옵셔널입니다)

[Feature] Example 앱 Delegate 추가 [Feature] Theme, BezierAppearance 분리

channeltalk · 2025-01-02T06:38:59Z

https://desk.channel.io/#/channels/1/team_chats/groups/136453/67763482b934b4edfbf5

solchan87 · 2025-01-02T06:54:07Z

Sources/BezierSwift/Foundation/BezierTheme.swift

+    case .light: return .light
+    case .dark: return .dark
+    case .system:
+      switch UITraitCollection.current.userInterfaceStyle {


앱의 기본 UIUserInterfaceStyle은 unspecified 입니다.

// unspecified 상태에서 userInterfaceStyle 호출 시 print(UITraitCollection.current.userInterfaceStyle) // light (os 테마 반환)

solchan87 · 2025-01-02T06:56:04Z

Sources/BezierSwift/BezierSwift.swift


  let toastViewModel = BezierToastViewModel()
  let dialogViewModel = BezierDialogViewModel()
+  var config = Config()
+  public private(set) var currentTheme: BezierTheme = .system


테마 분기 필요 시

switch BezierSwift.shared.currentTheme.appearance { case .light: ... case .dark: ... }

으로 구분합니다.

solchan87 · 2025-01-02T06:58:06Z

Sources/BezierSwift/Foundation/Color/BezierColor.swift

+  @available(*, deprecated, renamed: "bgNavyLighter", message: "Use `bgNavyLighter` instead.")
+  public static var bgtxtNavyLighter: BezierColor { BezierColor(functionalColorToken: .bgNavyLighter) }
+
+  @available(*, deprecated, message: "Use `fgNavyLight` for icon and text colors, and `bgNavyLight` for background color instead.")


bgtxt Color 는 V2 에서 bg/fg 로 구분합니다. icon text를 제외하고 대부분 bg Color를 사용합니다. 때문에 이 컬러에 대해서는 작업자의 판단이 필요해서 renamed 가 붙지 않습니다.

heoblitz

작업 감사합니다

heoblitz · 2025-01-02T07:05:11Z

Examples/SwiftUIExample/SwiftUIExample/SceneDelegate.swift

+  func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
+    guard let windowScene = scene as? UIWindowScene else { return }
+
+    self.window = windowScene.windows.first { $0.isKeyWindow }


Suggested change

self.window = windowScene.windows.first { $0.isKeyWindow }

self.window = UIWindow(windowScene: windowScene)

예제 코드이지만 windowScene 생성자를 사용하면 좋을 것 같아요

class SceneDelegate: UIResponder, UIWindowSceneDelegate { weak var windowScene: UIWindowScene? // ... } extension SceneDelegate: BezierSwiftDelegate { func windowsForThemeUpdate() -> [UIWindow] { self.windowScene?.windows ?? [] // or key window } }

감사합니다. 아래 코드로 변경하겠습니다!

heoblitz · 2025-01-02T07:11:47Z

Sources/BezierSwift/Foundation/Color/Token/FunctionalColorToken.swift

+
+// MARK: - ForegroundBlue
+extension FunctionalColorToken {
+  static var fgBlueNormal = FunctionalColorToken(lightGlobalColorToken: .blue400, darkGlobalColorToken: .blue300, pressedColorToken: PressedColorToken.fgBlueNormal)


Suggested change

static var fgBlueNormal = FunctionalColorToken(lightGlobalColorToken: .blue400, darkGlobalColorToken: .blue300, pressedColorToken: PressedColorToken.fgBlueNormal)

static let fgBlueNormal = FunctionalColorToken(lightGlobalColorToken: .blue400, darkGlobalColorToken: .blue300, pressedColorToken: PressedColorToken.fgBlueNormal)

변경되지 않는 값이라면 전체적으로 let 으로 처리되면 좋을 것 같아요

heoblitz · 2025-01-02T07:17:10Z

Sources/BezierSwift/Foundation/Color/Token/GlobalColorToken.swift

+  static var blue300_15: GlobalColorToken { GlobalColorToken(hex: "#7D9EFA26") }
+  static var blue300_0: GlobalColorToken { GlobalColorToken(hex: "#7D9EFA00") }
+  static var blue200: GlobalColorToken { GlobalColorToken(hex: "#96B7FF") }
+  static var blue100: GlobalColorToken { GlobalColorToken(hex: "#A9C6FF") }


전체적으로 고정 값이라면 다시 계산되지 않도록 static let 를 사용해도 좋을 것 같아요.

heoblitz · 2025-01-02T07:32:48Z

Sources/BezierSwift/MasterComponent/BezierButton/BezierButton.swift

            )
            .padding(.horizontal, Metric.textLeadingTrailing)
        }

        if let rightImage {
          rightImage
            .applyBaseImageStyle()
-            .foregroundColor(self.palette(self.type.imageTintColor(self.size)))
+            .foregroundColor(self.type.imageTintColor(self.size).color)


.color 가 항상 붙어야할 것 같아서 사용 편의성을 위해 BezierColor 가 View 나 ShapeStyle 을 직접 채택하는 것이 좋을지 조금 고민되네요.

혹은 BezierColor 를 파라미터로 받는 view extension 메서드도 생각해보았습니다.

네 맞아요. 옵션으로 callAsFunction 도 생각해봤는데,

Text().foregroundColor() + Text().foregroundColor()

같이 필요한 경우 foregroundColor를 필수로 사용해야될 때는 Color를 써야되는 경우가 있어서 조금 고민이 있습니다.

일관된 사용을 위해서 .color가 좋다 생각했어요.

bonoogi · 2025-01-02T07:33:31Z

Sources/BezierSwift/MasterComponent/BezierToast/BezierToast.swift

          }
        }

        Text(self.param.title)
-          .applyBezierFontStyle(.bold14, semanticColor: .bgtxtAbsoluteWhiteDark)
+          .applyBezierFontStyle(.bold14, bezierColor: .bgtxtAbsoluteWhiteDark)


이 친구는 아마도 fgAbsoluteWhiteDark를 사용해야 하지 않을까 싶어요. 일단 클린빌드했을때 warning이 뜨는건 이 친구 정도네요

앗 감사합니다!

bonoogi · 2025-01-02T07:34:58Z

Examples/SwiftUIExample/SwiftUIExample.xcodeproj/xcshareddata/xcschemes/SwiftUIExample.xcscheme

BezierSwift 자체에 대한 xcscheme이 없어서 매번 작업할때마다 추가해야할 것 같습니다. 추가되면 좋을 것 같아요(아래 스크린샷의 빨간 동그라미)

bonoogi · 2025-01-02T07:37:11Z

Sources/BezierSwift/BezierSwift.swift

+  public static func applyTheme(_ theme: BezierTheme) {
+    guard BezierSwift.shared.currentTheme != theme else { return }
+
+    BezierSwift.shared.currentTheme = theme
+    BezierSwift.shared.bezierWindow?.overrideUserInterfaceStyle = theme.userInterfaceStyle
+
+    BezierSwift.shared.delegate?.windowsForThemeUpdate().forEach { window in
+      window.overrideUserInterfaceStyle = theme.userInterfaceStyle
+    }
+  }


이거는 BezierSwift를 사용하는 쪽에서 호출하는거라고 보면 되겠죠? 예를들면 데스크의 AppDelegate라던가...

네 맞습니다!

bonoogi · 2025-01-02T07:39:48Z

Sources/BezierSwift/Foundation/BezierTheme.swift

+// - MARK: BezierAppearance
+// Appearance(Light/Dark)를 정의합니다.
+// NOTE: `BezierThemeCompatible` 프로토콜을 준수하여 `BezierTheme`와 호환됩니다.
+public enum BezierAppearance: BezierThemeCompatible {
+  case light
+  case dark
+}


실제로 어떻게 사용된지에 대해서 감이 안와서 그러는데, BezierAppearance는 internal이어도 괜찮지 않나요? 어차피 외부에서는 BezierTheme만 사용할 것 같아서요.

(구두로 얘기 나눔)
사용처에서 현재 테마에 따른 컬러 분기를 칠 때를 위해 필요한 상황

class FooView { var barColor: UIColor { switch BezierSwift.shared.currentTheme.appearance { case .light: return lightCustomColor case .dark: return darkCustomColor } } }

solchan87

빠른 리뷰 감사합니다!

solchan87 · 2025-01-02T10:28:10Z

Examples/SwiftUIExample/SwiftUIExample/SceneDelegate.swift

+  func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
+    guard let windowScene = scene as? UIWindowScene else { return }
+
+    self.window = windowScene.windows.first { $0.isKeyWindow }


감사합니다. 아래 코드로 변경하겠습니다!

solchan87 · 2025-01-02T10:28:24Z

Sources/BezierSwift/BezierSwift.swift

+  public static func applyTheme(_ theme: BezierTheme) {
+    guard BezierSwift.shared.currentTheme != theme else { return }
+
+    BezierSwift.shared.currentTheme = theme
+    BezierSwift.shared.bezierWindow?.overrideUserInterfaceStyle = theme.userInterfaceStyle
+
+    BezierSwift.shared.delegate?.windowsForThemeUpdate().forEach { window in
+      window.overrideUserInterfaceStyle = theme.userInterfaceStyle
+    }
+  }


네 맞습니다!

solchan87 · 2025-01-02T10:31:10Z

Sources/BezierSwift/MasterComponent/BezierToast/BezierToast.swift

          }
        }

        Text(self.param.title)
-          .applyBezierFontStyle(.bold14, semanticColor: .bgtxtAbsoluteWhiteDark)
+          .applyBezierFontStyle(.bold14, bezierColor: .bgtxtAbsoluteWhiteDark)


앗 감사합니다!

solchan87 · 2025-01-02T10:44:31Z

Sources/BezierSwift/MasterComponent/BezierButton/BezierButton.swift

            )
            .padding(.horizontal, Metric.textLeadingTrailing)
        }

        if let rightImage {
          rightImage
            .applyBaseImageStyle()
-            .foregroundColor(self.palette(self.type.imageTintColor(self.size)))
+            .foregroundColor(self.type.imageTintColor(self.size).color)


네 맞아요. 옵션으로 callAsFunction 도 생각해봤는데,

Text().foregroundColor() + Text().foregroundColor()

같이 필요한 경우 foregroundColor를 필수로 사용해야될 때는 Color를 써야되는 경우가 있어서 조금 고민이 있습니다.

일관된 사용을 위해서 .color가 좋다 생각했어요.

heoblitz

작업 감사합니다

solchan87 · 2025-01-03T04:40:33Z

Sources/BezierSwift/Foundation/Color/Token/GlobalColorToken.swift

+
+import Foundation
+
+struct GlobalColorToken: ColorTokenType {


GlobalColorToken 은 Color Value를 레퍼런스하는 이름이 부여된 Global Token 입니다. hex(String)을 rawValue로 하고 있으며, GlobalToken은 디자인에 바로 사용할 수 없습니다.

solchan87 · 2025-01-03T14:53:09Z

Sources/BezierSwift/Foundation/Color/BezierColor.swift

+  var pressedColorToken: ThemeableColorTokenType { get }
+}
+
+public struct BezierColor {


BezierColor 는 GrobalColorToken <- FunctionalColorToken <- SemanticColorToken 을 화살표 방향을 레퍼런싱하는 구조입니다.

GlobalColorToken은 디지인 컴포넌트에 직접 사용이 불가능합니다. FunctionalColorToken 이상 부터 직접 사용이 가능합니다.
Color 문서

solchan87 added 9 commits December 25, 2024 00:49

[Feature] V2 Color 마이그레이션

878d882

[Feature] UIKitExample 제거

c932cdb

[Improvement] BezierCololr, Hashable 준수

9c7660c

[Improvement] deprecated 조건 변경

82edb2a

[Improvement] iOS 최소 지원 버전 15로 변경

cdbb8c5

[Feature] BezierGradientColor 추가

920733e

[Feature] BezierTheme 추가

6e593b0

[Feature] Example 앱 Delegate 추가 [Feature] Theme, BezierAppearance 분리

[Improvement] BezierTheme 주석 추가

75ac20e

[Improvement] appearance 추가 설명 추가

7f4b64d

channeltalk bot assigned solchan87 Jan 2, 2025

solchan87 changed the title ~~[Feature]/color migration~~ [MOB-2845] BezierColor 및 BezierTheme 추가 Jan 2, 2025

solchan87 changed the title ~~[MOB-2845] BezierColor 및 BezierTheme 추가~~ [MOB-2845] BezierColor, BezierTheme 추가 Jan 2, 2025

solchan87 commented Jan 2, 2025

View reviewed changes

solchan87 requested review from bonoogi and heoblitz January 2, 2025 06:58

solchan87 added the PR:Reviewable Improvements or additions to documentation label Jan 2, 2025

solchan87 requested a review from jam0128 January 2, 2025 07:03

heoblitz reviewed Jan 2, 2025

View reviewed changes

bonoogi reviewed Jan 2, 2025

View reviewed changes

solchan87 changed the base branch from develop to feature/color January 2, 2025 08:16

solchan87 added 4 commits January 2, 2025 19:15

[Improvement] 변수 선언 키워드 변경

39338d0

[Feature] BezierSwift scheme 추가

69d77e7

[Improvement] windowScene 으로 변경

bda36f9

[Fix] 누락된 컬러 마이그레이션

6c343d2

solchan87 commented Jan 2, 2025

View reviewed changes

heoblitz approved these changes Jan 2, 2025

View reviewed changes

[Improvement] static 변수로 변경

0a4600f

bonoogi approved these changes Jan 3, 2025

View reviewed changes

solchan87 commented Jan 3, 2025

View reviewed changes

[Fix] 불필요한 Optional 제거

8c51224

solchan87 requested review from JoosungPark, elesahich, kbw2204, ghis22130, zoyi-jin and exponentChoi January 7, 2025 07:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[MOB-2845] BezierColor, BezierTheme 추가 #90

[MOB-2845] BezierColor, BezierTheme 추가 #90

solchan87 commented Jan 2, 2025 •

edited

Loading

channeltalk bot commented Jan 2, 2025

solchan87 Jan 2, 2025

solchan87 Jan 2, 2025 •

edited

Loading

solchan87 Jan 2, 2025 •

edited

Loading

heoblitz left a comment

heoblitz Jan 2, 2025

solchan87 Jan 2, 2025

heoblitz Jan 2, 2025

heoblitz Jan 2, 2025

heoblitz Jan 2, 2025 •

edited

Loading

solchan87 Jan 2, 2025

bonoogi Jan 2, 2025

solchan87 Jan 2, 2025

bonoogi Jan 2, 2025

bonoogi Jan 2, 2025

solchan87 Jan 2, 2025

bonoogi Jan 2, 2025

bonoogi Jan 2, 2025

solchan87 left a comment

solchan87 Jan 2, 2025

solchan87 Jan 2, 2025

solchan87 Jan 2, 2025

solchan87 Jan 2, 2025

heoblitz left a comment

solchan87 Jan 3, 2025

solchan87 Jan 3, 2025

	self.window = windowScene.windows.first { $0.isKeyWindow }
	self.window = UIWindow(windowScene: windowScene)

	static var fgBlueNormal = FunctionalColorToken(lightGlobalColorToken: .blue400, darkGlobalColorToken: .blue300, pressedColorToken: PressedColorToken.fgBlueNormal)
	static let fgBlueNormal = FunctionalColorToken(lightGlobalColorToken: .blue400, darkGlobalColorToken: .blue300, pressedColorToken: PressedColorToken.fgBlueNormal)

[MOB-2845] BezierColor, BezierTheme 추가 #90

Are you sure you want to change the base?

[MOB-2845] BezierColor, BezierTheme 추가 #90

Conversation

solchan87 commented Jan 2, 2025 • edited Loading

어떤 PR 인가요?

왜 필요한건가요? (Optional)

작업 내용

스크린샷 혹은 동영상

Reference

Issue-number

Checklist

channeltalk bot commented Jan 2, 2025

Choose a reason for hiding this comment

solchan87 Jan 2, 2025 • edited Loading

Choose a reason for hiding this comment

solchan87 Jan 2, 2025 • edited Loading

Choose a reason for hiding this comment

heoblitz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

heoblitz Jan 2, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

solchan87 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

heoblitz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

solchan87 commented Jan 2, 2025 •

edited

Loading

solchan87 Jan 2, 2025 •

edited

Loading

solchan87 Jan 2, 2025 •

edited

Loading

heoblitz Jan 2, 2025 •

edited

Loading