diff --git a/Features/InAppNotifications/Sources/ViewModels/InAppNotificationListItemViewModel.swift b/Features/InAppNotifications/Sources/ViewModels/InAppNotificationListItemViewModel.swift index 8f69525c9..b779976f0 100644 --- a/Features/InAppNotifications/Sources/ViewModels/InAppNotificationListItemViewModel.swift +++ b/Features/InAppNotifications/Sources/ViewModels/InAppNotificationListItemViewModel.swift @@ -25,7 +25,7 @@ public struct InAppNotificationListItemViewModel: Identifiable, Sendable { ListItemModel( title: item.title, titleTag: isRead ? nil : Localized.Assets.Tags.new, - titleTagStyle: TextStyle(font: .footnote.weight(.medium), color: .blue, background: Colors.blue.opacity(0.15)), + titleTagStyle: TextStyle(font: .footnote.weight(.medium), color: .blue, background: Colors.blue.opacity(.light)), titleExtra: item.subtitle, subtitle: item.value, subtitleStyle: TextStyle(font: .callout, color: Colors.black, fontWeight: .semibold), diff --git a/Features/Onboarding/Sources/ViewModels/TermItemViewModel.swift b/Features/Onboarding/Sources/ViewModels/TermItemViewModel.swift index 221d0f574..649f05a7e 100644 --- a/Features/Onboarding/Sources/ViewModels/TermItemViewModel.swift +++ b/Features/Onboarding/Sources/ViewModels/TermItemViewModel.swift @@ -6,7 +6,7 @@ import Style final class TermItemViewModel: Identifiable { let message: String var style: TextStyle { - isConfirmed ? .body : TextStyle(font: .body, color: Colors.black.opacity(0.8)) + isConfirmed ? .body : TextStyle(font: .body, color: Colors.black.opacity(.strong)) } var isConfirmed: Bool = false diff --git a/Features/Perpetuals/Sources/Types/ChartGridStyle.swift b/Features/Perpetuals/Sources/Types/ChartGridStyle.swift index 4290f5c1f..6c2590ae4 100644 --- a/Features/Perpetuals/Sources/Types/ChartGridStyle.swift +++ b/Features/Perpetuals/Sources/Types/ChartGridStyle.swift @@ -5,9 +5,8 @@ import Charts import Style struct ChartGridStyle { - static let opacity: Double = 0.13 static let lineWidth: CGFloat = 1 static let dash: [CGFloat] = [4, 4] static let strokeStyle = StrokeStyle(lineWidth: lineWidth, dash: dash) - static let color = Colors.gray.opacity(opacity) + static let color = Colors.gray.opacity(.opacity13) } diff --git a/Features/Perpetuals/Sources/Views/CandleTooltipView.swift b/Features/Perpetuals/Sources/Views/CandleTooltipView.swift index 55782bd69..3fbf6821c 100644 --- a/Features/Perpetuals/Sources/Views/CandleTooltipView.swift +++ b/Features/Perpetuals/Sources/Views/CandleTooltipView.swift @@ -26,9 +26,9 @@ struct CandleTooltipView: View { .clipShape(RoundedRectangle(cornerRadius: Spacing.small)) .overlay( RoundedRectangle(cornerRadius: Spacing.small) - .stroke(Colors.black.opacity(0.08), lineWidth: 1) + .stroke(Colors.black.opacity(.opacity8), lineWidth: 1) ) - .shadow(color: .black.opacity(0.12), radius: Spacing.small, y: Spacing.tiny) + .shadow(color: .black.opacity(.opacity12), radius: Spacing.small, y: Spacing.tiny) .fixedSize() } } diff --git a/Features/Perpetuals/Sources/Views/CandlestickChartView.swift b/Features/Perpetuals/Sources/Views/CandlestickChartView.swift index 1431f3016..fea26ef45 100644 --- a/Features/Perpetuals/Sources/Views/CandlestickChartView.swift +++ b/Features/Perpetuals/Sources/Views/CandlestickChartView.swift @@ -166,7 +166,7 @@ struct CandlestickChartView: View { private func linesMarks(_ bounds: ChartBounds) -> some ChartContent { ForEach(bounds.visibleLines) { line in RuleMark(y: .value(ChartKey.price, line.price)) - .foregroundStyle(line.color.opacity(0.6)) + .foregroundStyle(line.color.opacity(.semiStrong)) .lineStyle(line.lineStyle) } diff --git a/Features/Settings/Sources/ChainSettings/ViewModels/LatencyViewModel.swift b/Features/Settings/Sources/ChainSettings/ViewModels/LatencyViewModel.swift index 189035350..55c532c62 100644 --- a/Features/Settings/Sources/ChainSettings/ViewModels/LatencyViewModel.swift +++ b/Features/Settings/Sources/ChainSettings/ViewModels/LatencyViewModel.swift @@ -26,7 +26,7 @@ struct LatencyViewModel: Sendable { } var background: Color { - color.opacity(0.15) + color.opacity(.light) } var value: Int { diff --git a/Features/Settings/Sources/ChainSettings/ViewModels/NodeStatusStateViewModel.swift b/Features/Settings/Sources/ChainSettings/ViewModels/NodeStatusStateViewModel.swift index ca0299e17..6e39021a9 100644 --- a/Features/Settings/Sources/ChainSettings/ViewModels/NodeStatusStateViewModel.swift +++ b/Features/Settings/Sources/ChainSettings/ViewModels/NodeStatusStateViewModel.swift @@ -42,10 +42,10 @@ struct NodeStatusStateViewModel: Sendable { public var background: Color { switch nodeStatus { - case .error: Colors.red.opacity(0.15) + case .error: Colors.red.opacity(.light) case .none: .clear case .result(let nodeStatus): - nodeStatus.latestBlockNumber.isZero ? Colors.red.opacity(0.15) : LatencyViewModel(latency: nodeStatus.latency).background + nodeStatus.latestBlockNumber.isZero ? Colors.red.opacity(.light) : LatencyViewModel(latency: nodeStatus.latency).background } } } diff --git a/Features/Transfer/Sources/Scenes/ReceiveScene.swift b/Features/Transfer/Sources/Scenes/ReceiveScene.swift index 3b2532766..94b793c4c 100644 --- a/Features/Transfer/Sources/Scenes/ReceiveScene.swift +++ b/Features/Transfer/Sources/Scenes/ReceiveScene.swift @@ -43,7 +43,7 @@ public struct ReceiveScene: View { .background( RoundedRectangle(cornerRadius: .medium) .fill(Colors.listStyleColor) - .shadow(color: Color.black.opacity(Sizing.shadow.opacity), radius: Sizing.shadow.radius, x: .zero, y: Sizing.shadow.yOffset) + .shadow(color: Color.black.opacity(.opacity25), radius: Sizing.shadow.radius, x: .zero, y: Sizing.shadow.yOffset) ) } Text(model.warningMessage) diff --git a/Packages/Components/Sources/Buttons/RoundButton.swift b/Packages/Components/Sources/Buttons/RoundButton.swift index 099dc9dcb..f3a7efa09 100644 --- a/Packages/Components/Sources/Buttons/RoundButton.swift +++ b/Packages/Components/Sources/Buttons/RoundButton.swift @@ -32,7 +32,7 @@ public struct RoundButton: View { .frame(size: 48) .background(Colors.blue) .clipShape(Circle()) - .opacity(isEnabled ? 1 : 0.5) + .opacity(isEnabled ? 1 : .medium) .liquidGlass() Text(title) .allowsTightening(true) diff --git a/Packages/Components/Sources/NftImageView.swift b/Packages/Components/Sources/NftImageView.swift index 9ada91c68..17a9a0681 100644 --- a/Packages/Components/Sources/NftImageView.swift +++ b/Packages/Components/Sources/NftImageView.swift @@ -42,7 +42,7 @@ public struct NftImageView: View { if let type = assetImage.type { Text(type) .font(.body) - .foregroundStyle(Colors.black.opacity(0.8)) + .foregroundStyle(Colors.black.opacity(.strong)) .padding(.small) } } diff --git a/Packages/Components/Sources/SelectionView.swift b/Packages/Components/Sources/SelectionView.swift index 6c88b7132..8a379824f 100644 --- a/Packages/Components/Sources/SelectionView.swift +++ b/Packages/Components/Sources/SelectionView.swift @@ -62,12 +62,12 @@ public struct SelectionView: View { Text(item) .padding() .frame(maxWidth: .infinity, alignment: .leading) - .background(Color.gray.opacity(0.1)) + .background(Color.gray.opacity(.extraLight)) .cornerRadius(8) } ) .background( - selectedValue == item ? Color.blue.opacity(0.2) : Color.clear + selectedValue == item ? Color.blue.opacity(.opacity20) : Color.clear ) } } diff --git a/Packages/Components/Sources/TagsView.swift b/Packages/Components/Sources/TagsView.swift index b797c5f8c..6dd94dc0d 100644 --- a/Packages/Components/Sources/TagsView.swift +++ b/Packages/Components/Sources/TagsView.swift @@ -52,7 +52,7 @@ public struct TagView: View { Text(tag.title) .font(.subheadline.weight(.semibold)) } - .foregroundStyle(Color.primary.opacity(tag.opacity)) + .foregroundStyle(Color.primary.opacity(tag.viewOpacity)) .padding(.horizontal, .small) .padding(.vertical, .space6) .background { @@ -61,7 +61,7 @@ public struct TagView: View { style: .continuous ) .fill(Colors.listStyleColor) - .opacity(tag.opacity) + .opacity(tag.viewOpacity) } } diff --git a/Packages/Components/Sources/TextFields/FloatTextField.swift b/Packages/Components/Sources/TextFields/FloatTextField.swift index 4bdc61ece..b329e25b6 100644 --- a/Packages/Components/Sources/TextFields/FloatTextField.swift +++ b/Packages/Components/Sources/TextFields/FloatTextField.swift @@ -212,5 +212,5 @@ extension FloatTextField { .padding() } .frame(maxWidth: .infinity, maxHeight: .infinity) - .background(Color.black.opacity(0.1)) + .background(Color.black.opacity(.extraLight)) } diff --git a/Packages/Components/Sources/Types/TagItemViewable.swift b/Packages/Components/Sources/Types/TagItemViewable.swift index bd1920bac..cbf82412f 100644 --- a/Packages/Components/Sources/Types/TagItemViewable.swift +++ b/Packages/Components/Sources/Types/TagItemViewable.swift @@ -13,9 +13,9 @@ public protocol TagItemViewable: TagItem { var id: String { get } - var opacity: CGFloat { get } + var viewOpacity: CGFloat { get } } public extension TagItemViewable { - var opacity: CGFloat { isSelected ? 1.0 : 0.5 } + var viewOpacity: CGFloat { isSelected ? 1.0 : .medium } } diff --git a/Packages/PrimitivesComponents/Sources/ViewModels/TransactionStateViewModel.swift b/Packages/PrimitivesComponents/Sources/ViewModels/TransactionStateViewModel.swift index e6a0ff3a9..1877d550c 100644 --- a/Packages/PrimitivesComponents/Sources/ViewModels/TransactionStateViewModel.swift +++ b/Packages/PrimitivesComponents/Sources/ViewModels/TransactionStateViewModel.swift @@ -48,9 +48,9 @@ public struct TransactionStateViewModel { public var background: Color { switch state { - case .confirmed: Colors.green.opacity(0.15) - case .pending, .inTransit: Colors.orange.opacity(0.15) - case .failed, .reverted: Colors.red.opacity(0.15) + case .confirmed: Colors.green.opacity(.light) + case .pending, .inTransit: Colors.orange.opacity(.light) + case .failed, .reverted: Colors.red.opacity(.light) } } } diff --git a/Packages/PrimitivesComponents/Sources/Views/ChartView.swift b/Packages/PrimitivesComponents/Sources/Views/ChartView.swift index 347343cc3..ad790ac9f 100644 --- a/Packages/PrimitivesComponents/Sources/Views/ChartView.swift +++ b/Packages/PrimitivesComponents/Sources/Views/ChartView.swift @@ -71,7 +71,7 @@ extension ChartView { if let selectedValue, let date = selectedValue.date { RuleMark(x: .value(ChartKey.date, date)) - .foregroundStyle(model.lineColor.opacity(0.5)) + .foregroundStyle(model.lineColor.opacity(.medium)) .lineStyle(StrokeStyle(lineWidth: 1, dash: [4, 4])) PointMark(x: .value(ChartKey.date, date), y: .value(ChartKey.value, selectedValue.price)) @@ -79,14 +79,14 @@ extension ChartView { Circle() .fill( RadialGradient( - colors: [Colors.white, model.lineColor.opacity(0.8)], + colors: [Colors.white, model.lineColor.opacity(.strong)], center: .center, startRadius: 0, endRadius: Metrics.selectionDotSize / 2 ) ) .frame(width: Metrics.selectionDotSize, height: Metrics.selectionDotSize) - .shadow(color: model.lineColor.opacity(0.6), radius: 6) + .shadow(color: model.lineColor.opacity(.semiStrong), radius: 6) .overlay(Circle().strokeBorder(model.lineColor, lineWidth: Metrics.lineWidth)) } } @@ -145,11 +145,11 @@ extension ChartView { private var areaGradient: LinearGradient { .linearGradient( stops: [ - .init(color: model.lineColor.opacity(0.45), location: 0), - .init(color: model.lineColor.opacity(0.38), location: 0.25), - .init(color: model.lineColor.opacity(0.28), location: 0.5), - .init(color: model.lineColor.opacity(0.15), location: 0.75), - .init(color: model.lineColor.opacity(0.05), location: 0.92), + .init(color: model.lineColor.opacity(.opacity45), location: 0), + .init(color: model.lineColor.opacity(.opacity38), location: 0.25), + .init(color: model.lineColor.opacity(.opacity28), location: 0.5), + .init(color: model.lineColor.opacity(.light), location: 0.75), + .init(color: model.lineColor.opacity(.faint), location: 0.92), .init(color: model.lineColor.opacity(0), location: 1.0) ], startPoint: .top, diff --git a/Packages/PrimitivesComponents/Sources/Views/PulsingDotView.swift b/Packages/PrimitivesComponents/Sources/Views/PulsingDotView.swift index 190f30daa..893bba2cc 100644 --- a/Packages/PrimitivesComponents/Sources/Views/PulsingDotView.swift +++ b/Packages/PrimitivesComponents/Sources/Views/PulsingDotView.swift @@ -41,8 +41,8 @@ extension PulsingDotView { ) ) .frame(width: dotSize, height: dotSize) - .shadow(color: color.opacity(0.8), radius: 6) - .shadow(color: color.opacity(0.4), radius: 12) + .shadow(color: color.opacity(.strong), radius: 6) + .shadow(color: color.opacity(.semiMedium), radius: 12) } private func pulseRing(scale: CGFloat, delay: Double) -> some View { @@ -71,7 +71,7 @@ private struct PulseRingView: View { TimelineView(.animation(paused: !isAnimated)) { timeline in let progress = progress(at: timeline.date) Circle() - .stroke(color.opacity(0.4), lineWidth: 1.5) + .stroke(color.opacity(.semiMedium), lineWidth: 1.5) .frame(width: size, height: size) .scaleEffect(1.0 + (maxScale - 1.0) * progress) .opacity(0.8 * (1.0 - progress)) diff --git a/Packages/Style/Sources/Button/StateButtonStyle.swift b/Packages/Style/Sources/Button/StateButtonStyle.swift index 4a1d64125..eb6f69713 100644 --- a/Packages/Style/Sources/Button/StateButtonStyle.swift +++ b/Packages/Style/Sources/Button/StateButtonStyle.swift @@ -55,7 +55,7 @@ public struct StateButtonStyle: ButtonStyle { private func foreground(configuration: Configuration) -> Color { switch variant.state { case .normal: configuration.isPressed ? palette.foregroundPressed : palette.foreground - case .loading(let show): show ? palette.foreground : palette.foreground.opacity(0.65) + case .loading(let show): show ? palette.foreground : palette.foreground.opacity(.semi) case .disabled: palette.foreground } } diff --git a/Packages/Style/Sources/Opacity.swift b/Packages/Style/Sources/Opacity.swift new file mode 100644 index 000000000..b6fe86be6 --- /dev/null +++ b/Packages/Style/Sources/Opacity.swift @@ -0,0 +1,59 @@ +// Copyright (c). Gem Wallet. All rights reserved. + +import Foundation + +public typealias Opacity = Double + +public extension Opacity { + /// 0.05 + static let opacity5: Opacity = 0.05 + /// 0.08 + static let opacity8: Opacity = 0.08 + /// 0.10 + static let opacity10: Opacity = 0.10 + /// 0.12 + static let opacity12: Opacity = 0.12 + /// 0.13 + static let opacity13: Opacity = 0.13 + /// 0.15 + static let opacity15: Opacity = 0.15 + /// 0.20 + static let opacity20: Opacity = 0.20 + /// 0.25 + static let opacity25: Opacity = 0.25 + /// 0.28 + static let opacity28: Opacity = 0.28 + /// 0.38 + static let opacity38: Opacity = 0.38 + /// 0.40 + static let opacity40: Opacity = 0.40 + /// 0.45 + static let opacity45: Opacity = 0.45 + /// 0.50 + static let opacity50: Opacity = 0.50 + /// 0.60 + static let opacity60: Opacity = 0.60 + /// 0.65 + static let opacity65: Opacity = 0.65 + /// 0.80 + static let opacity80: Opacity = 0.80 + + // semantic aliases + + /// 0.05 + static let faint: Opacity = opacity5 + /// 0.10 + static let extraLight: Opacity = opacity10 + /// 0.15 + static let light: Opacity = opacity15 + /// 0.40 + static let semiMedium: Opacity = opacity40 + /// 0.50 + static let medium: Opacity = opacity50 + /// 0.60 + static let semiStrong: Opacity = opacity60 + /// 0.65 + static let semi: Opacity = opacity65 + /// 0.80 + static let strong: Opacity = opacity80 +} diff --git a/Packages/Style/Sources/Spacing.swift b/Packages/Style/Sources/Spacing.swift index c0f89bca0..a99289aa7 100644 --- a/Packages/Style/Sources/Spacing.swift +++ b/Packages/Style/Sources/Spacing.swift @@ -134,7 +134,6 @@ public extension Sizing { } struct shadow { - public static let opacity: CGFloat = 0.25 public static let radius: CGFloat = 10 public static let yOffset: CGFloat = 5 }