Add Opacity constants and consolidate hardcoded opacity values

DRadmir · web-flow · commit eb915e3fe077 · 2026-02-26T20:29:37.000+05:00
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -62,12 +62,12 @@ public struct SelectionView<T: Hashable, Content: View>: 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
@@ -52,7 +52,7 @@ public struct TagView<T: TagItemViewable>: 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<T: TagItemViewable>: 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
@@ -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
@@ -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
@@ -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
@@ -71,22 +71,22 @@ 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))
                     .symbol {
                         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
@@ -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
@@ -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
@@ -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
@@ -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
     }

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ import Style`
`6`	`6`	`final class TermItemViewModel: Identifiable {`
`7`	`7`	`let message: String`
`8`	`8`	`var style: TextStyle {`
`9`		`- isConfirmed ? .body : TextStyle(font: .body, color: Colors.black.opacity(0.8))`
	`9`	`+ isConfirmed ? .body : TextStyle(font: .body, color: Colors.black.opacity(.strong))`
`10`	`10`	`}`
`11`	`11`	`var isConfirmed: Bool = false`
`12`	`12`
Original file line number	Diff line number	Diff line change
`@@ -26,9 +26,9 @@ struct CandleTooltipView: View {`
`26`	`26`	`.clipShape(RoundedRectangle(cornerRadius: Spacing.small))`
`27`	`27`	`.overlay(`
`28`	`28`	`RoundedRectangle(cornerRadius: Spacing.small)`
`29`		`- .stroke(Colors.black.opacity(0.08), lineWidth: 1)`
	`29`	`+ .stroke(Colors.black.opacity(.opacity8), lineWidth: 1)`
`30`	`30`	`)`
`31`		`- .shadow(color: .black.opacity(0.12), radius: Spacing.small, y: Spacing.tiny)`
	`31`	`+ .shadow(color: .black.opacity(.opacity12), radius: Spacing.small, y: Spacing.tiny)`
`32`	`32`	`.fixedSize()`
`33`	`33`	`}`
`34`	`34`	`}`
Original file line number	Diff line number	Diff line change
`@@ -166,7 +166,7 @@ struct CandlestickChartView: View {`
`166`	`166`	`private func linesMarks(_ bounds: ChartBounds) -> some ChartContent {`
`167`	`167`	`ForEach(bounds.visibleLines) { line in`
`168`	`168`	`RuleMark(y: .value(ChartKey.price, line.price))`
`169`		`- .foregroundStyle(line.color.opacity(0.6))`
	`169`	`+ .foregroundStyle(line.color.opacity(.semiStrong))`
`170`	`170`	`.lineStyle(line.lineStyle)`
`171`	`171`	`}`
`172`	`172`
Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ struct LatencyViewModel: Sendable {`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`var background: Color {`
`29`		`- color.opacity(0.15)`
	`29`	`+ color.opacity(.light)`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`var value: Int {`
Original file line number	Diff line number	Diff line change
`@@ -42,10 +42,10 @@ struct NodeStatusStateViewModel: Sendable {`
`42`	`42`
`43`	`43`	`public var background: Color {`
`44`	`44`	`switch nodeStatus {`
`45`		`- case .error: Colors.red.opacity(0.15)`
	`45`	`+ case .error: Colors.red.opacity(.light)`
`46`	`46`	`case .none: .clear`
`47`	`47`	`case .result(let nodeStatus):`
`48`		`- nodeStatus.latestBlockNumber.isZero ? Colors.red.opacity(0.15) : LatencyViewModel(latency: nodeStatus.latency).background`
	`48`	`+ nodeStatus.latestBlockNumber.isZero ? Colors.red.opacity(.light) : LatencyViewModel(latency: nodeStatus.latency).background`
`49`	`49`	`}`
`50`	`50`	`}`
`51`	`51`	`}`
Original file line number	Diff line number	Diff line change
`@@ -43,7 +43,7 @@ public struct ReceiveScene: View {`
`43`	`43`	`.background(`
`44`	`44`	`RoundedRectangle(cornerRadius: .medium)`
`45`	`45`	`.fill(Colors.listStyleColor)`
`46`		`- .shadow(color: Color.black.opacity(Sizing.shadow.opacity), radius: Sizing.shadow.radius, x: .zero, y: Sizing.shadow.yOffset)`
	`46`	`+ .shadow(color: Color.black.opacity(.opacity25), radius: Sizing.shadow.radius, x: .zero, y: Sizing.shadow.yOffset)`
`47`	`47`	`)`
`48`	`48`	`}`
`49`	`49`	`Text(model.warningMessage)`
Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@ public struct NftImageView: View {`
`42`	`42`	`if let type = assetImage.type {`
`43`	`43`	`Text(type)`
`44`	`44`	`.font(.body)`
`45`		`- .foregroundStyle(Colors.black.opacity(0.8))`
	`45`	`+ .foregroundStyle(Colors.black.opacity(.strong))`
`46`	`46`	`.padding(.small)`
`47`	`47`	`}`
`48`	`48`	`}`