From f0f83879f9b793b486225bad3c78aa8e417a145e Mon Sep 17 00:00:00 2001 From: Harrie Shin Date: Thu, 23 Jul 2020 09:34:46 -0700 Subject: [PATCH] move color definition of the component out of Colors.swift file (#129) --- ios/FluentUI/Badge Field/BadgeField.swift | 10 + ios/FluentUI/Badge Field/BadgeView.swift | 18 ++ .../Views/CalendarViewDayMonthCell.swift | 32 +- .../Controls/ActivityIndicatorView.swift | 8 + ios/FluentUI/Controls/Button.swift | 12 + ios/FluentUI/Controls/Label.swift | 37 +++ .../Controls/ResizingHandleView.swift | 10 + ios/FluentUI/Controls/SearchBar.swift | 25 ++ ios/FluentUI/Controls/SegmentedControl.swift | 21 ++ ios/FluentUI/Controls/Separator.swift | 17 + ios/FluentUI/Controls/TwoLineTitleView.swift | 14 + ios/FluentUI/Core/Colors.swift | 290 ------------------ ios/FluentUI/Core/FluentUIFramework.swift | 21 ++ .../DateTimePickerViewComponentCell.swift | 10 +- ios/FluentUI/Drawer/DrawerController.swift | 9 + ios/FluentUI/HUD/HUDView.swift | 10 + ios/FluentUI/Navigation/NavigationBar.swift | 17 +- .../Notification/NotificationView.swift | 20 ++ ios/FluentUI/People Picker/AvatarView.swift | 10 + ios/FluentUI/People Picker/ContactView.swift | 11 + ios/FluentUI/Pill Button Bar/PillButton.swift | 17 +- .../Popup Menu/PopupMenuController.swift | 10 + .../PageCardPresenterController.swift | 14 + .../Shimmer/ShimmerViewAppearance.swift | 10 + ios/FluentUI/Table View/TableViewCell.swift | 41 +++ ios/FluentUI/Tooltip/TooltipView.swift | 8 + 26 files changed, 408 insertions(+), 294 deletions(-) diff --git a/ios/FluentUI/Badge Field/BadgeField.swift b/ios/FluentUI/Badge Field/BadgeField.swift index 8d51e61419..6acb98afdd 100644 --- a/ios/FluentUI/Badge Field/BadgeField.swift +++ b/ios/FluentUI/Badge Field/BadgeField.swift @@ -45,6 +45,16 @@ public protocol BadgeFieldDelegate: AnyObject { @objc optional func badgeFieldShouldReturn(_ badgeField: BadgeField) -> Bool } +// MARK: - BadgeField Colors + +public extension Colors { + struct BadgeField { + public static var background: UIColor = surfacePrimary + public static var label: UIColor = textSecondary + public static var placeholder: UIColor = textSecondary + } +} + // MARK: - BadgeField @available(*, deprecated, renamed: "BadgeField") diff --git a/ios/FluentUI/Badge Field/BadgeView.swift b/ios/FluentUI/Badge Field/BadgeView.swift index 5e0729c80f..a9f5b19193 100644 --- a/ios/FluentUI/Badge Field/BadgeView.swift +++ b/ios/FluentUI/Badge Field/BadgeView.swift @@ -34,6 +34,24 @@ public protocol BadgeViewDelegate { func didTapSelectedBadge(_ badge: BadgeView) } +// MARK: - Badge Colors + +public extension Colors { + struct Badge { + public static var backgroundDisabled = UIColor(light: surfaceSecondary, dark: gray700) + public static var backgroundError = UIColor(light: Palette.dangerTint40.color, dark: Palette.dangerTint30.color) + public static var backgroundErrorSelected: UIColor = error + public static var backgroundWarning = UIColor(light: Palette.warningTint40.color, dark: Palette.warningTint30.color) + public static var backgroundWarningSelected: UIColor = warning + public static var textSelected: UIColor = textOnAccent + public static var textDisabled: UIColor = textSecondary + public static var textError: UIColor = Palette.dangerShade20.color + public static var textErrorSelected: UIColor = textOnAccent + public static var textWarning = UIColor(light: Palette.warningShade30.color, dark: Palette.warningPrimary.color) + public static var textWarningSelected = UIColor(light: Palette.warningShade30.color, dark: .black) + } +} + // MARK: - BadgeView /** diff --git a/ios/FluentUI/Calendar/Views/CalendarViewDayMonthCell.swift b/ios/FluentUI/Calendar/Views/CalendarViewDayMonthCell.swift index 125978cbfb..5fe1086227 100644 --- a/ios/FluentUI/Calendar/Views/CalendarViewDayMonthCell.swift +++ b/ios/FluentUI/Calendar/Views/CalendarViewDayMonthCell.swift @@ -5,7 +5,37 @@ import UIKit -// MARK: CalendarViewDayMonthCell +// MARK: Calendar Colors + +public extension Colors { + struct Calendar { + public struct Day { + public static var textPrimary = UIColor(light: Colors.textSecondary, dark: Colors.textPrimary) + public static var textSecondary: UIColor = Colors.textSecondary + public static var textSelected: UIColor = textOnAccent + public static var backgroundPrimary = UIColor(light: Calendar.background, dark: surfaceSecondary) + public static var backgroundSecondary = UIColor(light: surfaceSecondary, dark: Calendar.background) + public static var circleHighlighted: UIColor = gray400 + } + public struct Today { + public static var background: UIColor = Calendar.Day.backgroundPrimary + } + public struct WeekdayHeading { + public struct Light { + public static var textRegular = UIColor(light: gray600, lightHighContrast: gray700, dark: textPrimary) + public static var textWeekend: UIColor = textSecondary + public static var background: UIColor = Calendar.background + } + public struct Dark { + public static var textRegular: UIColor = textOnAccent + public static var textWeekend: UIColor = textOnAccent.withAlphaComponent(0.7) + } + } + public static var background = UIColor(light: surfacePrimary, dark: surfaceTertiary) + } +} + +// MARK: - CalendarViewDayMonthCell class CalendarViewDayMonthCell: CalendarViewDayCell { struct Constants { diff --git a/ios/FluentUI/Controls/ActivityIndicatorView.swift b/ios/FluentUI/Controls/ActivityIndicatorView.swift index e054d3c690..11f8ee053e 100644 --- a/ios/FluentUI/Controls/ActivityIndicatorView.swift +++ b/ios/FluentUI/Controls/ActivityIndicatorView.swift @@ -61,6 +61,14 @@ enum ActivityIndicatorStrokeThickness: CGFloat { case xLarge = 4 } +// MARK: - ActivityIndicator Colors + +public extension Colors { + struct ActivityIndicator { + public static var foreground: UIColor = iconSecondary + } +} + // MARK: - ActivityIndicatorView /** diff --git a/ios/FluentUI/Controls/Button.swift b/ios/FluentUI/Controls/Button.swift index 1c73a73630..f34b0f2728 100644 --- a/ios/FluentUI/Controls/Button.swift +++ b/ios/FluentUI/Controls/Button.swift @@ -68,6 +68,18 @@ public enum ButtonStyle: Int, CaseIterable { } } +// MARK: - Button Colors + +public extension Colors { + struct Button { + public static var background: UIColor = .clear + public static var backgroundFilledDisabled: UIColor = surfaceQuaternary + public static var borderDisabled: UIColor = surfaceQuaternary + public static var titleDisabled: UIColor = textDisabled + public static var titleWithFilledBackground: UIColor = textOnAccent + } +} + // MARK: - Button /// By default, `titleLabel`'s `adjustsFontForContentSizeCategory` is set to true to automatically update its font when device's content size category changes diff --git a/ios/FluentUI/Controls/Label.swift b/ios/FluentUI/Controls/Label.swift index b50a2a3be2..16e196275b 100644 --- a/ios/FluentUI/Controls/Label.swift +++ b/ios/FluentUI/Controls/Label.swift @@ -5,6 +5,43 @@ import UIKit +// MARK: TextColorStyle + +@available(*, deprecated, renamed: "TextColorStyle") +public typealias MSTextColorStyle = TextColorStyle + +@objc(MSFTextColorStyle) +public enum TextColorStyle: Int, CaseIterable { + case regular + case secondary + case white + case primary + case error + case warning + case disabled + + public func color(for window: UIWindow) -> UIColor { + switch self { + case .regular: + return Colors.textPrimary + case .secondary: + return Colors.textSecondary + case .white: + return .white + case .primary: + return Colors.primary(for: window) + case .error: + return Colors.error + case .warning: + return Colors.warning + case .disabled: + return Colors.textDisabled + } + } +} + +// MARK: - Label + @available(*, deprecated, renamed: "Label") public typealias MSLabel = Label diff --git a/ios/FluentUI/Controls/ResizingHandleView.swift b/ios/FluentUI/Controls/ResizingHandleView.swift index 37d7a82d81..00b71319e4 100644 --- a/ios/FluentUI/Controls/ResizingHandleView.swift +++ b/ios/FluentUI/Controls/ResizingHandleView.swift @@ -5,6 +5,16 @@ import UIKit +// MARK: ResizingHandle Colors + +public extension Colors { + struct ResizingHandle { + public static var mark: UIColor = iconSecondary + } +} + +// MARK: - ResizingHandleView + @available(*, deprecated, renamed: "ResizingHandleView") public typealias MSResizingHandleView = ResizingHandleView diff --git a/ios/FluentUI/Controls/SearchBar.swift b/ios/FluentUI/Controls/SearchBar.swift index 0b7bf96495..0ac36b4670 100644 --- a/ios/FluentUI/Controls/SearchBar.swift +++ b/ios/FluentUI/Controls/SearchBar.swift @@ -5,6 +5,31 @@ import UIKit +// MARK: Search Colors + +public extension Colors { + struct SearchBar { + public struct DarkContent { + public static var background = UIColor(light: surfaceTertiary, dark: LightContent.background) + public static var cancelButton = UIColor(light: textSecondary, dark: LightContent.cancelButton) + public static var clearIcon = UIColor(light: iconPrimary, dark: LightContent.clearIcon) + public static var placeholderText = UIColor(light: textSecondary, dark: LightContent.placeholderText) + public static var searchIcon = UIColor(light: iconPrimary, dark: LightContent.searchIcon) + public static var text = UIColor(light: textDominant, dark: LightContent.text) + public static var tint = UIColor(light: iconSecondary, dark: LightContent.tint) + } + public struct LightContent { + public static var background = UIColor(light: UIColor.black.withAlphaComponent(0.2), dark: gray700, darkElevated: gray600) + public static var cancelButton: UIColor = LightContent.text + public static var clearIcon = UIColor(light: iconOnAccent, dark: textSecondary) + public static var placeholderText = UIColor(light: textOnAccent, dark: textSecondary) + public static var searchIcon: UIColor = placeholderText + public static var text = UIColor(light: textOnAccent, dark: textDominant) + public static var tint: UIColor = LightContent.text + } + } +} + // MARK: SearchBarDelegate @available(*, deprecated, renamed: "SearchBarDelegate") diff --git a/ios/FluentUI/Controls/SegmentedControl.swift b/ios/FluentUI/Controls/SegmentedControl.swift index 84cdeaaae8..071d42b3c4 100644 --- a/ios/FluentUI/Controls/SegmentedControl.swift +++ b/ios/FluentUI/Controls/SegmentedControl.swift @@ -5,6 +5,27 @@ import UIKit +// MARK: SegmentedControl Colors + +public extension Colors { + struct SegmentedControl { + public struct Tabs { + public static var background: UIColor = NavigationBar.background + public static var backgroundDisabled: UIColor = background + public static var segmentText: UIColor = textSecondary + public static var segmentTextDisabled: UIColor = surfaceQuaternary + public static var segmentTextSelectedAndDisabled: UIColor = textDisabled + public static var selectionDisabled: UIColor = textDisabled + } + + public struct Switch { + public static var segmentText = UIColor(light: textOnAccent, dark: textPrimary) + public static var selection = UIColor(light: Colors.surfacePrimary, dark: Colors.surfaceQuaternary) + public static var selectionDisabled: UIColor = selection + } + } +} + // MARK: SegmentedControl @available(*, deprecated, renamed: "SegmentedControl") diff --git a/ios/FluentUI/Controls/Separator.swift b/ios/FluentUI/Controls/Separator.swift index c2613288d5..613bc5f26e 100644 --- a/ios/FluentUI/Controls/Separator.swift +++ b/ios/FluentUI/Controls/Separator.swift @@ -5,6 +5,19 @@ import UIKit +// MARK: Separator Colors + +public extension Colors { + struct Separator { + public static var `default`: UIColor = dividerOnPrimary + public static var shadow: UIColor = dividerOnSecondary + } + // Objective-C support + @objc static var separatorDefault: UIColor { return Separator.default } +} + +// MARK: - SeparatorStyle + @available(*, deprecated, renamed: "SeparatorStyle") public typealias MSSeparatorStyle = SeparatorStyle @@ -23,6 +36,8 @@ public enum SeparatorStyle: Int { } } +// MARK: - SeparatorOrientation + @available(*, deprecated, renamed: "SeparatorOrientation") public typealias MSSeparatorOrientation = SeparatorOrientation @@ -32,6 +47,8 @@ public enum SeparatorOrientation: Int { case vertical } +// MARK: - Separator + @available(*, deprecated, renamed: "Separator") public typealias MSSeparator = Separator diff --git a/ios/FluentUI/Controls/TwoLineTitleView.swift b/ios/FluentUI/Controls/TwoLineTitleView.swift index 3ecb85d045..8c879915f3 100644 --- a/ios/FluentUI/Controls/TwoLineTitleView.swift +++ b/ios/FluentUI/Controls/TwoLineTitleView.swift @@ -15,6 +15,20 @@ public protocol TwoLineTitleViewDelegate: AnyObject { func twoLineTitleViewDidTapOnTitle(_ twoLineTitleView: TwoLineTitleView) } +// MARK: - TwoLineTitle Colors + +public extension Colors { + struct TwoLineTitle { + // light style is used Navigation.Primary.background. Dark style is used for Navigation.System.background + public static var titleDark: UIColor = Navigation.System.title + public static var titleLight: UIColor = Navigation.Primary.title + public static var subtitleDark = UIColor(light: textSecondary, dark: textDominant) + public static var subtitleLight: UIColor = titleLight + public static var titleAccessoryLight = UIColor(light: iconOnAccent, dark: iconPrimary) + public static var titleAccessoryDark = UIColor(light: iconSecondary, dark: iconPrimary) + } +} + // MARK: - TwoLineTitleView @available(*, deprecated, renamed: "TwoLineTitleView") diff --git a/ios/FluentUI/Core/Colors.swift b/ios/FluentUI/Core/Colors.swift index 7c38c20a45..5037e9d162 100644 --- a/ios/FluentUI/Core/Colors.swift +++ b/ios/FluentUI/Core/Colors.swift @@ -408,261 +408,6 @@ public final class Colors: NSObject { @objc public static let dividerOnSecondary = UIColor(light: gray200, dark: gray700, darkElevated: gray600) @objc public static let dividerOnTertiary = UIColor(light: gray200, dark: gray700, darkElevated: gray600) - // MARK: Final semantic - - // Add semantic colors describing colors used for particular control elements - - public struct ActivityIndicator { - public static var foreground: UIColor = iconSecondary - } - - public struct Avatar { - // Should use physical color because this text is shown on physical avatar background - public static var text: UIColor = textOnAccent - public static var border = UIColor(light: .white, dark: gray900, darkElevated: gray800) - } - - public struct Badge { - public static var backgroundDisabled = UIColor(light: surfaceSecondary, dark: gray700) - public static var backgroundError = UIColor(light: Palette.dangerTint40.color, dark: Palette.dangerTint30.color) - public static var backgroundErrorSelected: UIColor = error - public static var backgroundWarning = UIColor(light: Palette.warningTint40.color, dark: Palette.warningTint30.color) - public static var backgroundWarningSelected: UIColor = warning - public static var textSelected: UIColor = textOnAccent - public static var textDisabled: UIColor = textSecondary - public static var textError: UIColor = Palette.dangerShade20.color - public static var textErrorSelected: UIColor = textOnAccent - public static var textWarning = UIColor(light: Palette.warningShade30.color, dark: Palette.warningPrimary.color) - public static var textWarningSelected = UIColor(light: Palette.warningShade30.color, dark: .black) - } - - public struct BadgeField { - public static var background: UIColor = surfacePrimary - public static var label: UIColor = textSecondary - public static var placeholder: UIColor = textSecondary - } - - public struct Button { - public static var background: UIColor = .clear - public static var backgroundFilledDisabled: UIColor = surfaceQuaternary - public static var borderDisabled: UIColor = surfaceQuaternary - public static var titleDisabled: UIColor = textDisabled - public static var titleWithFilledBackground: UIColor = textOnAccent - } - - public struct Calendar { - public struct Day { - public static var textPrimary = UIColor(light: Colors.textSecondary, dark: Colors.textPrimary) - public static var textSecondary: UIColor = Colors.textSecondary - public static var textSelected: UIColor = textOnAccent - public static var backgroundPrimary = UIColor(light: Calendar.background, dark: surfaceSecondary) - public static var backgroundSecondary = UIColor(light: surfaceSecondary, dark: Calendar.background) - public static var circleHighlighted: UIColor = gray400 - } - public struct Today { - public static var background: UIColor = Calendar.Day.backgroundPrimary - } - public struct WeekdayHeading { - public struct Light { - public static var textRegular = UIColor(light: gray600, lightHighContrast: gray700, dark: textPrimary) - public static var textWeekend: UIColor = textSecondary - public static var background: UIColor = Calendar.background - } - public struct Dark { - public static var textRegular: UIColor = textOnAccent - public static var textWeekend: UIColor = textOnAccent.withAlphaComponent(0.7) - } - } - public static var background = UIColor(light: surfacePrimary, dark: surfaceTertiary) - } - - public struct Contact { - public static var title: UIColor = textPrimary - public static var subtitle: UIColor = textSecondary - } - - public struct DateTimePicker { - public static var background: UIColor = Calendar.background - public static var text: UIColor = textSecondary - } - - public struct Drawer { - public static var background = UIColor(light: surfacePrimary, dark: surfaceSecondary) - public static var popoverBackground = UIColor(light: surfacePrimary, dark: surfaceQuaternary) - } - - public struct HUD { - public static var activityIndicator: UIColor = .white - public static var background = UIColor(light: gray900.withAlphaComponent(0.9), dark: gray700) - public static var text = UIColor(light: textOnAccent, dark: textPrimary) - } - - public struct Navigation { - public struct System { - public static var background: UIColor = NavigationBar.background - public static var tint: UIColor = NavigationBar.tint - public static var title: UIColor = NavigationBar.title - } - public struct Primary { - public static var tint = UIColor(light: textOnAccent, dark: System.tint) - public static var title = UIColor(light: textOnAccent, dark: System.title) - } - } - - public struct Notification { - public struct NeutralToast { - public static var background: UIColor = surfaceQuaternary.withAlphaComponent(0.6) - public static var foreground: UIColor = textDominant - } - public struct PrimaryOutlineBar { - public static var background = UIColor(light: surfacePrimary, dark: surfaceQuaternary).withAlphaComponent(0.6) - } - public struct NeutralBar { - public static var background: UIColor = NeutralToast.background - public static var foreground: UIColor = NeutralToast.foreground - } - } - - public struct NavigationBar { - public static var background = UIColor(light: surfacePrimary, dark: gray900) - public static var tint: UIColor = iconPrimary - public static var title: UIColor = textDominant - } - - public struct PageCardPresenter { - // Should use physical color because page indicators are shown on physical blurred dark background - public static var currentPageIndicator: UIColor = .white - public static var pageIndicator = UIColor.white.withAlphaComponent(0.5) - } - - public struct PillButton { - public struct Outline { - public static var background = UIColor(light: surfaceTertiary, dark: surfaceSecondary) - public static var title = UIColor(light: textSecondary, dark: textPrimary) - public static var titleSelected = UIColor(light: textOnAccent, dark: textDominant) - } - public struct Filled { - public static var title = UIColor(light: textOnAccent, dark: Outline.title) - } - } - - public struct PopupMenu { - public static var description: UIColor = textSecondary - } - - public struct Progress { - public static var trackTint = UIColor(light: surfaceQuaternary, dark: surfaceTertiary) - } - - public struct ResizingHandle { - public static var mark: UIColor = iconSecondary - } - - public struct SearchBar { - public struct DarkContent { - public static var background = UIColor(light: surfaceTertiary, dark: LightContent.background) - public static var cancelButton = UIColor(light: textSecondary, dark: LightContent.cancelButton) - public static var clearIcon = UIColor(light: iconPrimary, dark: LightContent.clearIcon) - public static var placeholderText = UIColor(light: textSecondary, dark: LightContent.placeholderText) - public static var searchIcon = UIColor(light: iconPrimary, dark: LightContent.searchIcon) - public static var text = UIColor(light: textDominant, dark: LightContent.text) - public static var tint = UIColor(light: iconSecondary, dark: LightContent.tint) - } - public struct LightContent { - public static var background = UIColor(light: UIColor.black.withAlphaComponent(0.2), dark: gray700, darkElevated: gray600) - public static var cancelButton: UIColor = LightContent.text - public static var clearIcon = UIColor(light: iconOnAccent, dark: textSecondary) - public static var placeholderText = UIColor(light: textOnAccent, dark: textSecondary) - public static var searchIcon: UIColor = placeholderText - public static var text = UIColor(light: textOnAccent, dark: textDominant) - public static var tint: UIColor = LightContent.text - } - } - - public struct SegmentedControl { - public struct Tabs { - public static var background: UIColor = NavigationBar.background - public static var backgroundDisabled: UIColor = background - public static var segmentText: UIColor = textSecondary - public static var segmentTextDisabled: UIColor = surfaceQuaternary - public static var segmentTextSelectedAndDisabled: UIColor = textDisabled - public static var selectionDisabled: UIColor = textDisabled - } - - public struct Switch { - public static var segmentText: UIColor = PillButton.Filled.title - public static var selection = UIColor(light: Colors.surfacePrimary, dark: Colors.surfaceQuaternary) - public static var selectionDisabled: UIColor = selection - } - } - - public struct Separator { - public static var `default`: UIColor = dividerOnPrimary - public static var shadow: UIColor = dividerOnSecondary - } - // Objective-C support - @objc public static var separatorDefault: UIColor { return Separator.default } - - public struct Shimmer { - public static var tint = UIColor(light: surfaceTertiary, dark: surfaceQuaternary) - } - - public struct Table { - public struct Cell { - public static var background: UIColor = surfacePrimary - public static var backgroundGrouped = UIColor(light: surfacePrimary, dark: surfaceSecondary) - public static var backgroundSelected: UIColor = surfaceTertiary - public static var image: UIColor = iconSecondary - public static var title: UIColor = textPrimary - public static var subtitle: UIColor = textSecondary - public static var footer: UIColor = textSecondary - public static var accessoryDisclosureIndicator: UIColor = iconSecondary - public static var accessoryDetailButton: UIColor = iconSecondary - public static var selectionIndicatorOff: UIColor = iconSecondary - } - public struct ActionCell { - public static var textDestructive: UIColor = error - public static var textDestructiveHighlighted: UIColor = error.withAlphaComponent(0.4) - public static var textCommunication: UIColor = communicationBlue - public static var textCommunicationHighlighted: UIColor = communicationBlue.withAlphaComponent(0.4) - } - public struct HeaderFooter { - public static var accessoryButtonText: UIColor = textSecondary - public static var background: UIColor = .clear - public static var backgroundDivider: UIColor = surfaceSecondary - public static var text: UIColor = textSecondary - public static var textDivider: UIColor = textSecondary - public static var textLink: UIColor = communicationBlue - } - public static var background: UIColor = surfacePrimary - public static var backgroundGrouped = UIColor(light: surfaceSecondary, dark: surfacePrimary) - } - // Objective-C support - @objc public static var tableBackground: UIColor { return Table.background } - @objc public static var tableBackgroundGrouped: UIColor { return Table.backgroundGrouped } - @objc public static var tableCellBackground: UIColor { return Table.Cell.background } - @objc public static var tableCellBackgroundGrouped: UIColor { return Table.Cell.backgroundGrouped } - @objc public static var tableCellImage: UIColor { return Table.Cell.image } - - public struct Toolbar { - public static var background: UIColor = NavigationBar.background - public static var tint: UIColor = NavigationBar.tint - } - - public struct Tooltip { - public static var text: UIColor = textOnAccent - } - - public struct TwoLineTitle { - // light style is used Navigation.Primary.background. Dark style is used for Navigation.System.background - public static var titleDark: UIColor = Navigation.System.title - public static var titleLight: UIColor = Navigation.Primary.title - public static var subtitleDark = UIColor(light: textSecondary, dark: textDominant) - public static var subtitleLight: UIColor = titleLight - public static var titleAccessoryLight = UIColor(light: iconOnAccent, dark: iconPrimary) - public static var titleAccessoryDark = UIColor(light: iconSecondary, dark: iconPrimary) - } - @objc public static func color(from palette: Palette) -> UIColor { return palette.color } @@ -675,38 +420,3 @@ public final class Colors: NSObject { /// Make palette enum CaseIterable for unit testing purposes extension Colors.Palette: CaseIterable {} - -// MARK: - TextColorStyle - -@available(*, deprecated, renamed: "TextColorStyle") -public typealias MSTextColorStyle = TextColorStyle - -@objc(MSFTextColorStyle) -public enum TextColorStyle: Int, CaseIterable { - case regular - case secondary - case white - case primary - case error - case warning - case disabled - - public func color(for window: UIWindow) -> UIColor { - switch self { - case .regular: - return Colors.textPrimary - case .secondary: - return Colors.textSecondary - case .white: - return .white - case .primary: - return Colors.primary(for: window) - case .error: - return Colors.error - case .warning: - return Colors.warning - case .disabled: - return Colors.textDisabled - } - } -} diff --git a/ios/FluentUI/Core/FluentUIFramework.swift b/ios/FluentUI/Core/FluentUIFramework.swift index 0ede8de245..02d20843c4 100644 --- a/ios/FluentUI/Core/FluentUIFramework.swift +++ b/ios/FluentUI/Core/FluentUIFramework.swift @@ -5,6 +5,27 @@ import UIKit +// MARK: Colors + +public extension Colors { + struct Progress { + public static var trackTint = UIColor(light: surfaceQuaternary, dark: surfaceTertiary) + } + + struct NavigationBar { + public static var background = UIColor(light: surfacePrimary, dark: gray900) + public static var tint: UIColor = iconPrimary + public static var title: UIColor = textDominant + } + + struct Toolbar { + public static var background: UIColor = NavigationBar.background + public static var tint: UIColor = NavigationBar.tint + } +} + +// MARK: - FluentUIFramework + public class FluentUIFramework: NSObject { @objc public static var bundle: Bundle { return Bundle(for: self) } @objc public static let resourceBundle: Bundle = { diff --git a/ios/FluentUI/Date Time Pickers/Date Time Picker/Views/DateTimePickerViewComponentCell.swift b/ios/FluentUI/Date Time Pickers/Date Time Picker/Views/DateTimePickerViewComponentCell.swift index ff4215993b..a39d8991f0 100644 --- a/ios/FluentUI/Date Time Pickers/Date Time Picker/Views/DateTimePickerViewComponentCell.swift +++ b/ios/FluentUI/Date Time Pickers/Date Time Picker/Views/DateTimePickerViewComponentCell.swift @@ -5,7 +5,15 @@ import UIKit -// MARK: DateTimePickerViewComponentCell +// MARK: DateTimePicker Colors +public extension Colors { + struct DateTimePicker { + public static var background: UIColor = Calendar.background + public static var text: UIColor = textSecondary + } +} + +// MARK: - DateTimePickerViewComponentCell /// TableViewCell representing the cell of component view (should be used only by DateTimePickerViewComponent and not instantiated on its own) class DateTimePickerViewComponentCell: UITableViewCell { diff --git a/ios/FluentUI/Drawer/DrawerController.swift b/ios/FluentUI/Drawer/DrawerController.swift index bab5d8893c..ec22673b9f 100644 --- a/ios/FluentUI/Drawer/DrawerController.swift +++ b/ios/FluentUI/Drawer/DrawerController.swift @@ -72,6 +72,15 @@ public enum DrawerPresentationBackground: Int { } } +// MARK: - Drawer Color + +public extension Colors { + struct Drawer { + public static var background = UIColor(light: surfacePrimary, dark: surfaceSecondary) + public static var popoverBackground = UIColor(light: surfacePrimary, dark: surfaceQuaternary) + } +} + // MARK: - DrawerControllerDelegate @available(*, deprecated, renamed: "DrawerControllerDelegate") diff --git a/ios/FluentUI/HUD/HUDView.swift b/ios/FluentUI/HUD/HUDView.swift index 32f82b08ce..2c18e00229 100644 --- a/ios/FluentUI/HUD/HUDView.swift +++ b/ios/FluentUI/HUD/HUDView.swift @@ -14,6 +14,16 @@ enum HUDType: Equatable { case custom(image: UIImage) } +// MARK: - HUD Colors + +public extension Colors { + struct HUD { + public static var activityIndicator: UIColor = .white + public static var background = UIColor(light: gray900.withAlphaComponent(0.9), dark: gray700) + public static var text = UIColor(light: textOnAccent, dark: textPrimary) + } +} + // MARK: - HUDView class HUDView: UIView { diff --git a/ios/FluentUI/Navigation/NavigationBar.swift b/ios/FluentUI/Navigation/NavigationBar.swift index ce68ec9e18..6b66c65517 100644 --- a/ios/FluentUI/Navigation/NavigationBar.swift +++ b/ios/FluentUI/Navigation/NavigationBar.swift @@ -5,7 +5,22 @@ import UIKit -// MARK: NavigationBar +// MARK: Navigation Colors +public extension Colors { + struct Navigation { + public struct System { + public static var background: UIColor = NavigationBar.background + public static var tint: UIColor = NavigationBar.tint + public static var title: UIColor = NavigationBar.title + } + public struct Primary { + public static var tint = UIColor(light: textOnAccent, dark: System.tint) + public static var title = UIColor(light: textOnAccent, dark: System.title) + } + } +} + +// MARK: - NavigationBar @available(*, deprecated, renamed: "NavigationBar") public typealias MSNavigationBar = NavigationBar diff --git a/ios/FluentUI/Notification/NotificationView.swift b/ios/FluentUI/Notification/NotificationView.swift index 85126da579..6dab0d069f 100644 --- a/ios/FluentUI/Notification/NotificationView.swift +++ b/ios/FluentUI/Notification/NotificationView.swift @@ -5,6 +5,26 @@ import UIKit +// MARK: Notification Colors + +public extension Colors { + struct Notification { + public struct NeutralToast { + public static var background: UIColor = surfaceQuaternary.withAlphaComponent(0.6) + public static var foreground: UIColor = textDominant + } + public struct PrimaryOutlineBar { + public static var background = UIColor(light: surfacePrimary, dark: surfaceQuaternary).withAlphaComponent(0.6) + } + public struct NeutralBar { + public static var background: UIColor = NeutralToast.background + public static var foreground: UIColor = NeutralToast.foreground + } + } +} + +// MARK: - NotificationView + @available(*, deprecated, renamed: "NotificationView") public typealias MSNotificationView = NotificationView diff --git a/ios/FluentUI/People Picker/AvatarView.swift b/ios/FluentUI/People Picker/AvatarView.swift index 46546f8bb0..8ca03673ca 100644 --- a/ios/FluentUI/People Picker/AvatarView.swift +++ b/ios/FluentUI/People Picker/AvatarView.swift @@ -78,6 +78,16 @@ public enum AvatarStyle: Int { case square } +// MARK: - Avatar Colors + +public extension Colors { + struct Avatar { + // Should use physical color because this text is shown on physical avatar background + public static var text: UIColor = textOnAccent + public static var border = UIColor(light: .white, dark: gray900, darkElevated: gray800) + } +} + // MARK: - AvatarView @available(*, deprecated, renamed: "AvatarView") diff --git a/ios/FluentUI/People Picker/ContactView.swift b/ios/FluentUI/People Picker/ContactView.swift index 5717453610..c01844c928 100644 --- a/ios/FluentUI/People Picker/ContactView.swift +++ b/ios/FluentUI/People Picker/ContactView.swift @@ -5,6 +5,17 @@ import UIKit +// MARK: Contact Colors + +public extension Colors { + struct Contact { + public static var title: UIColor = textPrimary + public static var subtitle: UIColor = textSecondary + } +} + +// MARK: ContactView + @objc(MSFContactView) open class ContactView: UIView { private struct Constants { diff --git a/ios/FluentUI/Pill Button Bar/PillButton.swift b/ios/FluentUI/Pill Button Bar/PillButton.swift index 99378bf03c..cd6cd9d812 100644 --- a/ios/FluentUI/Pill Button Bar/PillButton.swift +++ b/ios/FluentUI/Pill Button Bar/PillButton.swift @@ -5,7 +5,22 @@ import UIKit -// MARK: PillButtonStyle +// MARK: PillButton Colors + +public extension Colors { + struct PillButton { + public struct Outline { + public static var background = UIColor(light: surfaceTertiary, dark: surfaceSecondary) + public static var title = UIColor(light: textSecondary, dark: textPrimary) + public static var titleSelected = UIColor(light: textOnAccent, dark: textDominant) + } + public struct Filled { + public static var title = UIColor(light: textOnAccent, dark: Outline.title) + } + } +} + +// MARK: - PillButtonStyle @available(*, deprecated, renamed: "PillButtonStyle") public typealias MSPillButtonStyle = PillButtonStyle diff --git a/ios/FluentUI/Popup Menu/PopupMenuController.swift b/ios/FluentUI/Popup Menu/PopupMenuController.swift index 6068c2474b..493e86063f 100644 --- a/ios/FluentUI/Popup Menu/PopupMenuController.swift +++ b/ios/FluentUI/Popup Menu/PopupMenuController.swift @@ -5,6 +5,16 @@ import UIKit +// MARK: PopupMenu Colors + +public extension Colors { + struct PopupMenu { + public static var description: UIColor = textSecondary + } +} + +// MARK: - PopupMenuController Colors + @available(*, deprecated, renamed: "PopupMenuController") public typealias MSPopupMenuController = PopupMenuController diff --git a/ios/FluentUI/Presenters/PageCardPresenterController.swift b/ios/FluentUI/Presenters/PageCardPresenterController.swift index 52712e91a2..bc67af9975 100644 --- a/ios/FluentUI/Presenters/PageCardPresenterController.swift +++ b/ios/FluentUI/Presenters/PageCardPresenterController.swift @@ -5,10 +5,24 @@ import UIKit +// MARK: PageCardPresenter Colors + +public extension Colors { + struct PageCardPresenter { + // Should use physical color because page indicators are shown on physical blurred dark background + public static var currentPageIndicator: UIColor = .white + public static var pageIndicator = UIColor.white.withAlphaComponent(0.5) + } +} + +// MARK: - CardPresentable + protocol CardPresentable: AnyObject { func idealSize() -> CGSize } +// MARK: - PageCardPresenterController + @available(*, deprecated, renamed: "PageCardPresenterController") public typealias MSPageCardPresenterController = PageCardPresenterController diff --git a/ios/FluentUI/Shimmer/ShimmerViewAppearance.swift b/ios/FluentUI/Shimmer/ShimmerViewAppearance.swift index e7c2801f91..1f21fd1102 100644 --- a/ios/FluentUI/Shimmer/ShimmerViewAppearance.swift +++ b/ios/FluentUI/Shimmer/ShimmerViewAppearance.swift @@ -5,6 +5,16 @@ import UIKit +// MARK: Shimmer Colors + +public extension Colors { + struct Shimmer { + public static var tint = UIColor(light: surfaceTertiary, dark: surfaceQuaternary) + } +} + +// MARK: - ShimmerViewAppearance + @available(*, deprecated, renamed: "ShimmerViewAppearance") public typealias MSShimmerViewAppearance = ShimmerViewAppearance diff --git a/ios/FluentUI/Table View/TableViewCell.swift b/ios/FluentUI/Table View/TableViewCell.swift index b7cc9a1e2a..1a9ce05a8f 100644 --- a/ios/FluentUI/Table View/TableViewCell.swift +++ b/ios/FluentUI/Table View/TableViewCell.swift @@ -61,6 +61,47 @@ public enum TableViewCellAccessoryType: Int { } } +// MARK: - Table Colors + +public extension Colors { + struct Table { + public struct Cell { + public static var background: UIColor = surfacePrimary + public static var backgroundGrouped = UIColor(light: surfacePrimary, dark: surfaceSecondary) + public static var backgroundSelected: UIColor = surfaceTertiary + public static var image: UIColor = iconSecondary + public static var title: UIColor = textPrimary + public static var subtitle: UIColor = textSecondary + public static var footer: UIColor = textSecondary + public static var accessoryDisclosureIndicator: UIColor = iconSecondary + public static var accessoryDetailButton: UIColor = iconSecondary + public static var selectionIndicatorOff: UIColor = iconSecondary + } + public struct ActionCell { + public static var textDestructive: UIColor = error + public static var textDestructiveHighlighted: UIColor = error.withAlphaComponent(0.4) + public static var textCommunication: UIColor = communicationBlue + public static var textCommunicationHighlighted: UIColor = communicationBlue.withAlphaComponent(0.4) + } + public struct HeaderFooter { + public static var accessoryButtonText: UIColor = textSecondary + public static var background: UIColor = .clear + public static var backgroundDivider: UIColor = surfaceSecondary + public static var text: UIColor = textSecondary + public static var textDivider: UIColor = textSecondary + public static var textLink: UIColor = communicationBlue + } + public static var background: UIColor = surfacePrimary + public static var backgroundGrouped = UIColor(light: surfaceSecondary, dark: surfacePrimary) + } + // Objective-C support + @objc static var tableBackground: UIColor { return Table.background } + @objc static var tableBackgroundGrouped: UIColor { return Table.backgroundGrouped } + @objc static var tableCellBackground: UIColor { return Table.Cell.background } + @objc static var tableCellBackgroundGrouped: UIColor { return Table.Cell.backgroundGrouped } + @objc static var tableCellImage: UIColor { return Table.Cell.image } +} + // MARK: - TableViewCell @available(*, deprecated, renamed: "TableViewCell") diff --git a/ios/FluentUI/Tooltip/TooltipView.swift b/ios/FluentUI/Tooltip/TooltipView.swift index 6e8d808361..109a814993 100644 --- a/ios/FluentUI/Tooltip/TooltipView.swift +++ b/ios/FluentUI/Tooltip/TooltipView.swift @@ -5,6 +5,14 @@ import UIKit +// MARK: Tooltip Colors + +public extension Colors { + struct Tooltip { + public static var text: UIColor = textOnAccent + } +} + // MARK: TooltipView class TooltipView: UIView {