feat(ios): refine native interface and app icon
Unify bottom actions, selection controls, navigation structure, spacing, and theme colors across iOS pages. Replace the app icon with a higher-contrast native-style asset and include its source SVG.
This commit is contained in:
chick
@@ -1,44 +1,49 @@
|
||||
import SwiftUI
|
||||
|
||||
#if canImport(UIKit)
|
||||
import UIKit
|
||||
#elseif canImport(AppKit)
|
||||
import AppKit
|
||||
#endif
|
||||
#if canImport(UIKit)
|
||||
import UIKit
|
||||
#elseif canImport(AppKit)
|
||||
import AppKit
|
||||
#endif
|
||||
|
||||
private enum AIPalette {
|
||||
#if canImport(UIKit)
|
||||
#if canImport(UIKit)
|
||||
private static func dynamicColor(light: UIColor, dark: UIColor) -> Color {
|
||||
Color(UIColor { traits in
|
||||
traits.userInterfaceStyle == .dark ? dark : light
|
||||
Color(
|
||||
UIColor { traits in
|
||||
traits.userInterfaceStyle == .dark ? dark : light
|
||||
})
|
||||
}
|
||||
|
||||
private static func rgba(
|
||||
_ red: CGFloat,
|
||||
_ green: CGFloat,
|
||||
_ blue: CGFloat,
|
||||
_ alpha: CGFloat
|
||||
_ red: CGFloat,
|
||||
_ green: CGFloat,
|
||||
_ blue: CGFloat,
|
||||
_ alpha: CGFloat
|
||||
) -> UIColor {
|
||||
UIColor(red: red / 255, green: green / 255, blue: blue / 255, alpha: alpha)
|
||||
UIColor(red: red / 255, green: green / 255, blue: blue / 255, alpha: alpha)
|
||||
}
|
||||
|
||||
private static func color(light: UIColor, dark: UIColor) -> Color {
|
||||
dynamicColor(light: light, dark: dark)
|
||||
dynamicColor(light: light, dark: dark)
|
||||
}
|
||||
|
||||
static let canvas = color(light: rgba(243, 245, 248, 1), dark: rgba(19, 22, 28, 1))
|
||||
static let surface = color(light: rgba(255, 255, 255, 1), dark: rgba(27, 31, 39, 1))
|
||||
static let control = color(light: rgba(247, 249, 251, 1), dark: rgba(37, 44, 56, 1))
|
||||
static let ink = color(light: rgba(28, 39, 56, 1), dark: rgba(235, 242, 247, 1))
|
||||
static let muted = color(light: rgba(111, 124, 143, 1), dark: rgba(173, 183, 199, 1))
|
||||
static let line = color(light: rgba(224, 229, 235, 1), dark: rgba(56, 63, 74, 1))
|
||||
static let brand = color(light: rgba(19, 30, 48, 1), dark: rgba(14, 22, 35, 1))
|
||||
static let primary = color(light: rgba(17, 119, 110, 1), dark: rgba(20, 142, 126, 1))
|
||||
static let danger = color(light: rgba(182, 77, 72, 1), dark: rgba(193, 79, 71, 1))
|
||||
static let warning = color(light: rgba(184, 120, 17, 1), dark: rgba(209, 141, 39, 1))
|
||||
static let success = color(light: rgba(21, 149, 112, 1), dark: rgba(32, 161, 119, 1))
|
||||
#elseif canImport(AppKit)
|
||||
static let canvas = color(light: rgba(245, 246, 248, 1), dark: rgba(6, 7, 9, 1))
|
||||
static let surface = color(light: rgba(255, 255, 255, 1), dark: rgba(18, 20, 24, 1))
|
||||
static let surfaceRaised = color(light: rgba(251, 252, 253, 1), dark: rgba(27, 30, 35, 1))
|
||||
static let control = color(light: rgba(243, 245, 247, 1), dark: rgba(26, 29, 34, 1))
|
||||
static let chrome = color(light: rgba(255, 255, 255, 0.82), dark: rgba(11, 12, 15, 0.82))
|
||||
static let ink = color(light: rgba(15, 18, 22, 1), dark: rgba(243, 245, 247, 1))
|
||||
static let muted = color(light: rgba(98, 107, 119, 1), dark: rgba(151, 160, 172, 1))
|
||||
static let line = color(light: rgba(227, 230, 234, 1), dark: rgba(255, 255, 255, 0.09))
|
||||
static let brand = color(light: rgba(13, 15, 18, 1), dark: rgba(8, 9, 11, 1))
|
||||
static let primary = color(light: rgba(17, 20, 25, 1), dark: rgba(220, 178, 111, 1))
|
||||
static let onPrimary = color(light: rgba(255, 255, 255, 1), dark: rgba(12, 14, 17, 1))
|
||||
static let danger = color(light: rgba(190, 65, 57, 1), dark: rgba(242, 124, 113, 1))
|
||||
static let onDanger = color(light: rgba(255, 255, 255, 1), dark: rgba(22, 9, 8, 1))
|
||||
static let warning = color(light: rgba(170, 111, 23, 1), dark: rgba(226, 166, 65, 1))
|
||||
static let success = color(light: rgba(50, 150, 101, 1), dark: rgba(103, 198, 148, 1))
|
||||
#elseif canImport(AppKit)
|
||||
static let canvas = Color(red: 0.953, green: 0.961, blue: 0.973)
|
||||
static let surface = Color.white
|
||||
static let control = Color(red: 0.969, green: 0.976, blue: 0.984)
|
||||
@@ -46,13 +51,17 @@ private enum AIPalette {
|
||||
static let muted = Color(red: 0.435, green: 0.486, blue: 0.561)
|
||||
static let line = Color(red: 0.878, green: 0.898, blue: 0.922)
|
||||
static let brand = Color(red: 0.075, green: 0.118, blue: 0.188)
|
||||
static let primary = Color(red: 0.067, green: 0.467, blue: 0.431)
|
||||
static let danger = Color(red: 0.714, green: 0.302, blue: 0.282)
|
||||
static let warning = Color(red: 0.722, green: 0.471, blue: 0.067)
|
||||
static let success = Color(red: 0.082, green: 0.584, blue: 0.439)
|
||||
#else
|
||||
static let surfaceRaised = Color(red: 0.984, green: 0.988, blue: 0.992)
|
||||
static let chrome = Color.white.opacity(0.82)
|
||||
static let onPrimary = Color.white
|
||||
static let onDanger = Color.white
|
||||
static let primary = Color(red: 0.067, green: 0.078, blue: 0.098)
|
||||
static let danger = Color(red: 0.745, green: 0.255, blue: 0.224)
|
||||
static let warning = Color(red: 0.667, green: 0.435, blue: 0.09)
|
||||
static let success = Color(red: 0.196, green: 0.588, blue: 0.396)
|
||||
#else
|
||||
private static func color(_ red: CGFloat, _ green: CGFloat, _ blue: CGFloat) -> Color {
|
||||
Color(red: red / 255, green: green / 255, blue: blue / 255)
|
||||
Color(red: red / 255, green: green / 255, blue: blue / 255)
|
||||
}
|
||||
|
||||
static let canvas = color(243, 245, 248)
|
||||
@@ -62,37 +71,48 @@ private enum AIPalette {
|
||||
static let muted = color(111, 124, 143)
|
||||
static let line = color(224, 229, 235)
|
||||
static let brand = color(19, 30, 48)
|
||||
static let primary = color(17, 119, 110)
|
||||
static let danger = color(182, 77, 72)
|
||||
static let warning = color(184, 120, 17)
|
||||
static let success = color(21, 149, 112)
|
||||
#endif
|
||||
static let surfaceRaised = color(251, 252, 253)
|
||||
static let chrome = color(255, 255, 255, 0.82)
|
||||
static let onPrimary = color(255, 255, 255)
|
||||
static let onDanger = color(255, 255, 255)
|
||||
static let primary = color(17, 20, 25)
|
||||
static let danger = color(190, 65, 57)
|
||||
static let warning = color(170, 111, 23)
|
||||
static let success = color(50, 150, 101)
|
||||
#endif
|
||||
}
|
||||
|
||||
public enum AITheme {
|
||||
public static let canvas = AIPalette.canvas
|
||||
public static let surface = AIPalette.surface
|
||||
public static let control = AIPalette.control
|
||||
public static let ink = AIPalette.ink
|
||||
public static let muted = AIPalette.muted
|
||||
public static let line = AIPalette.line
|
||||
public static let brand = AIPalette.brand
|
||||
public static let primary = AIPalette.primary
|
||||
public static let danger = AIPalette.danger
|
||||
public static let warning = AIPalette.warning
|
||||
public static let success = AIPalette.success
|
||||
public static let canvas = AIPalette.canvas
|
||||
public static let surface = AIPalette.surface
|
||||
public static let surfaceRaised = AIPalette.surfaceRaised
|
||||
public static let control = AIPalette.control
|
||||
public static let chrome = AIPalette.chrome
|
||||
public static let ink = AIPalette.ink
|
||||
public static let muted = AIPalette.muted
|
||||
public static let line = AIPalette.line
|
||||
public static let brand = AIPalette.brand
|
||||
public static let primary = AIPalette.primary
|
||||
public static let onPrimary = AIPalette.onPrimary
|
||||
public static let danger = AIPalette.danger
|
||||
public static let onDanger = AIPalette.onDanger
|
||||
public static let warning = AIPalette.warning
|
||||
public static let success = AIPalette.success
|
||||
|
||||
public static let buttonHeight: CGFloat = 44
|
||||
public static let compactButtonHeight: CGFloat = 40
|
||||
public static let largeButtonHeight: CGFloat = 50
|
||||
public static let toolbarButtonHeight: CGFloat = 38
|
||||
public static let iconButtonSize: CGFloat = 44
|
||||
public static let buttonRadius: CGFloat = 12
|
||||
public static let cardRadius: CGFloat = 16
|
||||
public static let compactButtonMinWidth: CGFloat = 58
|
||||
public static let regularButtonMinWidth: CGFloat = 76
|
||||
public static let toolbarButtonMinWidth: CGFloat = 88
|
||||
public static let toolbarButtonWidth: CGFloat = 100
|
||||
public static let footerSecondaryButtonWidth: CGFloat = 100
|
||||
public static let listActionButtonWidth: CGFloat = 72
|
||||
public static let buttonHeight: CGFloat = 48
|
||||
public static let compactButtonHeight: CGFloat = 44
|
||||
public static let largeButtonHeight: CGFloat = 56
|
||||
public static let toolbarButtonHeight: CGFloat = 44
|
||||
public static let iconButtonSize: CGFloat = 44
|
||||
public static let buttonRadius: CGFloat = 16
|
||||
public static let cardRadius: CGFloat = 22
|
||||
public static let inputRadius: CGFloat = 16
|
||||
public static let inputHeight: CGFloat = 52
|
||||
public static let segmentedControlHeight: CGFloat = 44
|
||||
public static let compactButtonMinWidth: CGFloat = 72
|
||||
public static let regularButtonMinWidth: CGFloat = 88
|
||||
public static let toolbarButtonMinWidth: CGFloat = 96
|
||||
public static let toolbarButtonWidth: CGFloat = 104
|
||||
public static let footerSecondaryButtonWidth: CGFloat = 104
|
||||
public static let listActionButtonWidth: CGFloat = 84
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user