ColorPalette
A group of color tokens that collectively define a theme
Definition
public struct ColorPalette {
public let background: ColorSet
public let brandPrimary: ColorSet
public let brandPrimaryLight: ColorSet
public let buttonColor: ColorSet
public let buttonFontColor: ColorSet
public let danger: ColorSet
public let dangerLight: ColorSet
public let divider: ColorSet
public let foreground: ColorSet
public let icon: ColorSet
public let inputLine: ColorSet
public let loadingBackground: ColorSet
public let loadingSpinner: ColorSet
public let loadingText: ColorSet
public let success: ColorSet
public let text: ColorSet
public let textSecondary: ColorSet
public init(
background: ColorSet,
brandPrimary: ColorSet,
brandPrimaryLight: ColorSet,
buttonColor: ColorSet,
buttonFontColor: ColorSet,
danger: ColorSet,
dangerLight: ColorSet,
divider: ColorSet,
foreground: ColorSet,
icon: ColorSet,
inputLine: ColorSet,
loadingBackground: ColorSet,
loadingSpinner: ColorSet,
loadingText: ColorSet,
success: ColorSet,
text: ColorSet,
textSecondary: ColorSet
) {
self.background = background
self.brandPrimary = brandPrimary
self.brandPrimaryLight = brandPrimaryLight
self.buttonColor = buttonColor
self.buttonFontColor = buttonFontColor
self.danger = danger
self.dangerLight = dangerLight
self.divider = divider
self.foreground = foreground
self.icon = icon
self.inputLine = inputLine
self.loadingBackground = loadingBackground
self.loadingSpinner = loadingSpinner
self.loadingText = loadingText
self.success = success
self.text = text
self.textSecondary = textSecondary
}
}Properties
| Property | Type | Description |
|---|---|---|
| background | ColorSet | The surface color of many backgrounds throughout the UI. |
| brandPrimary | ColorSet | Primary brand color applied to primary buttons and links |
| brandPrimaryLight | ColorSet | The foreground color of the entire remittance flow |
| buttonColor | ColorSet | Represents the main fill color for primary buttons and the outline color for secondary buttons. |
| buttonFontColor | ColorSet | Represents the font color for primary buttons. |
| danger | ColorSet | Indicates negative sentiment, for example on error states or destructive actions. Can be used as text or as a background. |
| dangerLight | ColorSet | Accent color used alongside #danger. |
| divider | ColorSet | Used to subtly separate different blocks of content. |
| foreground | ColorSet | Use for elevated surfaces that contain content. |
| icon | ColorSet | Fill and stroke colors for SVG icons |
| inputLine | ColorSet | Represents the border color of input fields |
| loadingBackground | ColorSet | Background color for full-page loading screens; can be customized to match branding. |
| loadingSpinner | ColorSet | Spinner color for full-page loading screens; customizable to match branding. |
| loadingText | ColorSet | Text color for full-page loading screens; customizable to match branding. |
| success | ColorSet | Indicates positive sentiment, for example in positive alerts. Can be used as text or as a background. |
| text | ColorSet | Use to emphasize primary text content in relation to other elements nearby. |
| textSecondary | ColorSet | Use for most body text, labels, disclosures and in supportive elements that give context to content that's close to it. |
Default
| Property | Dark Appearance | Light Appearance |
|---|---|---|
| background | ||
| brandPrimary | ||
| brandPrimaryLight | ||
| buttonColor | ||
| buttonFontColor | ||
| danger | ||
| dangerLight | ||
| divider | ||
| foreground | ||
| icon | ||
| inputLine | ||
| loadingBackground | ||
| loadingSpinner | ||
| loadingText | ||
| success | ||
| text | ||
| textSecondary |
public extension ColorPalette {
static let `default`: Self = .init(
background: .init(
darkAppearance: .init(
red: Double(0x11) / 255.0,
green: Double(0x11) / 255.0,
blue: Double(0x11) / 255.0
),
lightAppearance: .init(
red: Double(0xF3) / 255.0,
green: Double(0xF4) / 255.0,
blue: Double(0xF6) / 255.0
)
),
brandPrimary: .init(
darkAppearance: .init(
red: Double(0x84) / 255.0,
green: Double(0x4F) / 255.0,
blue: Double(0xBB) / 255.0
),
lightAppearance: .init(
red: Double(0x93) / 255.0,
green: Double(0x4A) / 255.0,
blue: Double(0xE0) / 255.0
)
),
brandPrimaryLight: .init(
darkAppearance: .init(
red: Double(0x2B) / 255.0,
green: Double(0x23) / 255.0,
blue: Double(0x32) / 255.0
),
lightAppearance: .init(
red: Double(0xF3) / 255.0,
green: Double(0xED) / 255.0,
blue: Double(0xF8) / 255.0
)
),
buttonColor: .init(
darkAppearance: .init(
red: Double(0x52) / 255.0,
green: Double(0x7F) / 255.0,
blue: Double(0xFF) / 255.0
),
lightAppearance: .init(
red: Double(0x27) / 255.0,
green: Double(0x4B) / 255.0,
blue: Double(0xAF) / 255.0
)
),
buttonFontColor: .init(
darkAppearance: .init(
red: Double(0xFF) / 255.0,
green: Double(0xFF) / 255.0,
blue: Double(0xFF) / 255.0
),
lightAppearance: .init(
red: Double(0xFF) / 255.0,
green: Double(0xFF) / 255.0,
blue: Double(0xFF) / 255.0
)
),
danger: .init(
darkAppearance: .init(
red: Double(0xED) / 255.0,
green: Double(0x70) / 255.0,
blue: Double(0x83) / 255.0
),
lightAppearance: .init(
red: Double(0xAA) / 255.0,
green: Double(0x22) / 255.0,
blue: Double(0x0F) / 255.0
)
),
dangerLight: .init(
darkAppearance: .init(
red: Double(0x53) / 255.0,
green: Double(0x33) / 255.0,
blue: Double(0x38) / 255.0
),
lightAppearance: .init(
red: Double(0xF4) / 255.0,
green: Double(0xE9) / 255.0,
blue: Double(0xE7) / 255.0
)
),
divider: .init(
darkAppearance: .init(
red: Double(0x31) / 255.0,
green: Double(0x31) / 255.0,
blue: Double(0x31) / 255.0
),
lightAppearance: .init(
red: Double(0xE2) / 255.0,
green: Double(0xE2) / 255.0,
blue: Double(0xE2) / 255.0
)
),
foreground: .init(
darkAppearance: .init(
red: Double(0x1F) / 255.0,
green: Double(0x1F) / 255.0,
blue: Double(0x1F) / 255.0
),
lightAppearance: .init(
red: Double(0xFF) / 255.0,
green: Double(0xFF) / 255.0,
blue: Double(0xFF) / 255.0
)
),
icon: .init(
darkAppearance: .init(
red: Double(0x7E) / 255.0,
green: Double(0x7E) / 255.0,
blue: Double(0x7E) / 255.0
),
lightAppearance: .init(
red: Double(0x44) / 255.0,
green: Double(0x44) / 255.0,
blue: Double(0x44) / 255.0
)
),
inputLine: .init(
darkAppearance: .init(
red: Double(0x50) / 255.0,
green: Double(0x50) / 255.0,
blue: Double(0x50) / 255.0
),
lightAppearance: .init(
red: Double(0x85) / 255.0,
green: Double(0x85) / 255.0,
blue: Double(0x85) / 255.0
)
),
loadingBackground: .init(
darkAppearance: .init(
red: Double(0x11) / 255.0,
green: Double(0x11) / 255.0,
blue: Double(0x11) / 255.0
),
lightAppearance: .init(
red: Double(0xF3) / 255.0,
green: Double(0xF4) / 255.0,
blue: Double(0xF6) / 255.0
)
),
loadingSpinner: .init(
darkAppearance: .init(
red: Double(0x84) / 255.0,
green: Double(0x4F) / 255.0,
blue: Double(0xBB) / 255.0
),
lightAppearance: .init(
red: Double(0x93) / 255.0,
green: Double(0x4A) / 255.0,
blue: Double(0xE0) / 255.0
)
),
loadingText: .init(
darkAppearance: .init(
red: Double(0xE3) / 255.0,
green: Double(0xE3) / 255.0,
blue: Double(0xE3) / 255.0
),
lightAppearance: .init(
red: Double(0x0E) / 255.0,
green: Double(0x0F) / 255.0,
blue: Double(0x0C) / 255.0
)
),
success: .init(
darkAppearance: .init(
red: Double(0x00) / 255.0,
green: Double(0x87) / 255.0,
blue: Double(0x61) / 255.0
),
lightAppearance: .init(
red: Double(0x00) / 255.0,
green: Double(0x87) / 255.0,
blue: Double(0x61) / 255.0
)
),
text: .init(
darkAppearance: .init(
red: Double(0xE3) / 255.0,
green: Double(0xE3) / 255.0,
blue: Double(0xE3) / 255.0
),
lightAppearance: .init(
red: Double(0x0E) / 255.0,
green: Double(0x0F) / 255.0,
blue: Double(0x0C) / 255.0
)
),
textSecondary: .init(
darkAppearance: .init(
red: Double(0xB0) / 255.0,
green: Double(0xB0) / 255.0,
blue: Double(0xB0) / 255.0
),
lightAppearance: .init(
red: Double(0x45) / 255.0,
green: Double(0x45) / 255.0,
blue: Double(0x45) / 255.0
)
)
)
}private let colorPalette: ColorPalette = .defaultSample Usages
private let background: ColorSet = .init(
anyAppearance: .init(
red: Double(0xF3) / 255.0,
green: Double(0xF4) / 255.0,
blue: Double(0xF6) / 255.0
)
)
...
private let colorPalette: ColorPalette = .init(
background: background,
brandPrimary: ...,
brandPrimaryLight: ...,
buttonColor: ...,
buttonFontColor: ...,
danger: ...,
dangerLight: ...,
divider: ...,
foreground: ...,
icon: ...,
inputLine: ...,
loadingBackground: ...,
loadingSpinner: ...,
loadingText: ...,
success: ...,
text: ...,
textSecondary: ...
)private let background: ColorSet = .init(
darkAppearance: .init(
red: Double(0x11) / 255.0,
green: Double(0x11) / 255.0,
blue: Double(0x11) / 255.0
),
lightAppearance: .init(
red: Double(0xF3) / 255.0,
green: Double(0xF4) / 255.0,
blue: Double(0xF6) / 255.0
)
)
...
private let colorPalette: ColorPalette = .init(
background: background,
brandPrimary: ...,
brandPrimaryLight: ...,
buttonColor: ...,
buttonFontColor: ...,
danger: ...,
dangerLight: ...,
divider: ...,
foreground: ...,
icon: ...,
inputLine: ...,
loadingBackground: ...,
loadingSpinner: ...,
loadingText: ...,
success: ...,
text: ...,
textSecondary: ...
)private let background: ColorSet = .init(
anyAppearance: .init(
red: 0xF3 / 255.0,
green: 0xF4 / 255.0,
blue: 0xF6 / 255.0,
alpha: 1.0
)
)
...
private let colorPalette: ColorPalette = .init(
background: background,
brandPrimary: ...,
brandPrimaryLight: ...,
buttonColor: ...,
buttonFontColor: ...,
danger: ...,
dangerLight: ...,
divider: ...,
foreground: ...,
icon: ...,
inputLine: ...,
loadingBackground: ...,
loadingSpinner: ...,
loadingText: ...,
success: ...,
text: ...,
textSecondary: ...
)private let background: ColorSet = .init(
darkAppearance: .init(
red: 0x11 / 255.0,
green: 0x11 / 255.0,
blue: 0x11 / 255.0,
alpha: 1.0
),
lightAppearance: .init(
red: 0xF3 / 255.0,
green: 0xF4 / 255.0,
blue: 0xF6 / 255.0,
alpha: 1.0
)
)
...
private let colorPalette: ColorPalette = .init(
background: background,
brandPrimary: ...,
brandPrimaryLight: ...,
buttonColor: ...,
buttonFontColor: ...,
danger: ...,
dangerLight: ...,
divider: ...,
foreground: ...,
icon: ...,
inputLine: ...,
loadingBackground: ...,
loadingSpinner: ...,
loadingText: ...,
success: ...,
text: ...,
textSecondary: ...
)Updated 5 months ago