summaryrefslogtreecommitdiff
path: root/DomainDig/DashboardView.swift
diff options
context:
space:
mode:
authorChristian Cleberg <[email protected]>2026-07-20 18:16:01 -0500
committerChristian Cleberg <[email protected]>2026-07-20 18:50:57 -0500
commiteb8a0d30da0cc150e95d44bad998c13ee2defc25 (patch)
tree1ad349e302b5b48bbc9f79d17a66bcfc31dace11 /DomainDig/DashboardView.swift
parent1e25fb947d3c01fc983b481fff5b064ed82349ab (diff)
downloaddomain-dig-eb8a0d30da0cc150e95d44bad998c13ee2defc25.tar.gz
domain-dig-eb8a0d30da0cc150e95d44bad998c13ee2defc25.tar.bz2
domain-dig-eb8a0d30da0cc150e95d44bad998c13ee2defc25.zip
feat(a11y): semantic colour system (#21 phase 1)
Replaces every hard-coded colour with semantic asset colours that adapt to light, dark, and Increase Contrast. Dark mode stays locked, so this is a pure refactor: the audit reports the same findings before and after. The accent is now blue rather than cyan, per the tech/DNS theme. Why custom values rather than the system palette: every system colour fails WCAG AA in light mode. Measured on white — systemYellow 1.51:1, systemOrange 2.20:1, systemGreen 2.22:1, systemCyan 2.54:1, systemRed 3.55:1. All of them pass in dark mode, which is why the dark-locked app looked fine, and why unlocking light mode was never a matter of deleting .preferredColorScheme(.dark). Every new value clears 4.5:1 as text on its page, its card, and its own 16% badge tint — the way AppStatusBadgeView actually draws it. The accent needed splitting in two. As text on a dark background it must be light; as a fill behind a white label it must be dark. #4DA3FF reads 8.00:1 as text on black but 2.63:1 behind white text, so StatusInfo / AccentColor cover the foreground role and AccentFill covers .borderedProminent. AppOnAccent is the label colour for a solid fill and flips by scheme. Colours live in Shared/Colors.xcassets rather than the app catalog: the Shared folder is already a synchronized group in all three targets, so the widget and share extension pick the palette up with no project-file surgery. AccentColor stays in the app catalog as the global tint — and is now actually defined, having been an empty colorset that silently left system controls rendering in stock blue while custom chrome used cyan. Two deliberate visual changes: orange folds into StatusWarning and pink into StatusCritical. They encoded the same severity as the colours they now share, and both sites also carry a text label. Audit findings drop 15 to 14, and one of the originals turned out to be a phantom: the Inspect contrast failure was the Run button in its disabled state, which WCAG 1.4.3 exempts. testInspectScreen now types a domain first so the audit measures an enabled control. Findings also carry the offending element now, so the remaining clipped-text items name themselves ("No Portfolio Yet", "Search domains") instead of being anonymous.
Diffstat (limited to 'DomainDig/DashboardView.swift')
-rw-r--r--DomainDig/DashboardView.swift62
1 files changed, 31 insertions, 31 deletions
diff --git a/DomainDig/DashboardView.swift b/DomainDig/DashboardView.swift
index 398ff3e..da8d90a 100644
--- a/DomainDig/DashboardView.swift
+++ b/DomainDig/DashboardView.swift
@@ -22,20 +22,20 @@ struct DashboardView: View {
showsCardBackground: false
)
}
- .listRowBackground(Color(.systemGray6).opacity(0.5))
+ .listRowBackground(Color(.appSurface))
} else {
Section {
LazyVGrid(columns: summaryColumns, spacing: 10) {
- summaryCard(title: "Total Domains", value: viewModel.portfolioDashboardData.snapshot.totalDomains, filter: .all, tint: .cyan)
- summaryCard(title: "Healthy", value: viewModel.portfolioDashboardData.snapshot.healthyCount, filter: .healthy, tint: .green)
- summaryCard(title: "Warning", value: viewModel.portfolioDashboardData.snapshot.warningCount, filter: .warning, tint: .yellow)
- summaryCard(title: "Critical", value: viewModel.portfolioDashboardData.snapshot.criticalCount, filter: .critical, tint: .red)
- summaryCard(title: "Changes (24h)", value: viewModel.portfolioDashboardData.snapshot.changedLast24h, filter: .changed, tint: .orange)
- summaryCard(title: "Unreachable", value: viewModel.portfolioDashboardData.snapshot.unreachableCount, filter: .unreachable, tint: .pink)
+ summaryCard(title: "Total Domains", value: viewModel.portfolioDashboardData.snapshot.totalDomains, filter: .all, tint: Color(.statusInfo))
+ summaryCard(title: "Healthy", value: viewModel.portfolioDashboardData.snapshot.healthyCount, filter: .healthy, tint: Color(.statusPositive))
+ summaryCard(title: "Warning", value: viewModel.portfolioDashboardData.snapshot.warningCount, filter: .warning, tint: Color(.statusWarning))
+ summaryCard(title: "Critical", value: viewModel.portfolioDashboardData.snapshot.criticalCount, filter: .critical, tint: Color(.statusCritical))
+ summaryCard(title: "Changes (24h)", value: viewModel.portfolioDashboardData.snapshot.changedLast24h, filter: .changed, tint: Color(.statusWarning))
+ summaryCard(title: "Unreachable", value: viewModel.portfolioDashboardData.snapshot.unreachableCount, filter: .unreachable, tint: Color(.statusCritical))
}
.padding(.vertical, 4)
}
- .listRowBackground(Color(.systemGray6).opacity(0.5))
+ .listRowBackground(Color(.appSurface))
Section("Quick Filters") {
ScrollView(.horizontal, showsIndicators: false) {
@@ -46,10 +46,10 @@ struct DashboardView: View {
} label: {
Text(filter.title)
.font(appDensity.font(.caption, weight: .semibold))
- .foregroundStyle(viewModel.dashboardFilter == filter ? Color.black : Color.white)
+ .foregroundStyle(viewModel.dashboardFilter == filter ? Color(.appOnAccent) : Color.primary)
.padding(.horizontal, 12)
.padding(.vertical, 8)
- .background(viewModel.dashboardFilter == filter ? Color.cyan : Color(.systemGray5).opacity(0.6))
+ .background(viewModel.dashboardFilter == filter ? Color(.statusInfo) : Color(.appSurfaceElevated))
.clipShape(Capsule())
}
.buttonStyle(.plain)
@@ -58,7 +58,7 @@ struct DashboardView: View {
.padding(.vertical, 4)
}
}
- .listRowBackground(Color(.systemGray6).opacity(0.5))
+ .listRowBackground(Color(.appSurface))
Section("Recent Activity") {
if viewModel.filteredPortfolioRecentActivity.isEmpty {
@@ -76,7 +76,7 @@ struct DashboardView: View {
}
}
}
- .listRowBackground(Color(.systemGray6).opacity(0.5))
+ .listRowBackground(Color(.appSurface))
Section("Attention Required") {
if viewModel.filteredPortfolioAttentionRequired.isEmpty {
@@ -94,7 +94,7 @@ struct DashboardView: View {
}
}
}
- .listRowBackground(Color(.systemGray6).opacity(0.5))
+ .listRowBackground(Color(.appSurface))
Section("Expiring Soon") {
if viewModel.filteredPortfolioExpiringSoon.isEmpty {
@@ -110,7 +110,7 @@ struct DashboardView: View {
}
}
}
- .listRowBackground(Color(.systemGray6).opacity(0.5))
+ .listRowBackground(Color(.appSurface))
Section("Portfolio List") {
if viewModel.filteredPortfolioGroups.isEmpty {
@@ -150,11 +150,11 @@ struct DashboardView: View {
}
}
}
- .listRowBackground(Color(.systemGray6).opacity(0.5))
+ .listRowBackground(Color(.appSurface))
}
}
.scrollContentBackground(.hidden)
- .background(Color.black)
+ .background(Color(.appBackground))
.navigationTitle("Dashboard")
.searchable(text: $viewModel.dashboardSearchText, prompt: "Search portfolio")
.toolbar {
@@ -196,7 +196,7 @@ struct DashboardView: View {
.foregroundStyle(.secondary)
Text("\(value)")
.font(.system(size: 28, weight: .bold, design: .rounded))
- .foregroundStyle(.white)
+ .foregroundStyle(.primary)
HStack {
Circle()
.fill(tint)
@@ -218,13 +218,13 @@ struct DashboardView: View {
if viewModel.dashboardFilter == filter {
return AnyShapeStyle(
LinearGradient(
- colors: [Color.cyan.opacity(0.28), Color.cyan.opacity(0.12)],
+ colors: [Color(.statusInfo).opacity(0.28), Color(.statusInfo).opacity(0.12)],
startPoint: .topLeading,
endPoint: .bottomTrailing
)
)
}
- return AnyShapeStyle(Color(.systemGray5).opacity(0.45))
+ return AnyShapeStyle(Color(.appSurfaceElevated))
}
private func dashboardEmptyRow(_ message: String) -> some View {
@@ -243,15 +243,15 @@ struct DashboardView: View {
if criticalCount > 0 {
title = "\(criticalCount) critical"
- color = .red
+ color = Color(.statusCritical)
systemImage = "exclamationmark.octagon.fill"
} else if warningCount > 0 {
title = "\(warningCount) warning"
- color = .yellow
+ color = Color(.statusWarning)
systemImage = "exclamationmark.triangle.fill"
} else {
title = "Healthy"
- color = .green
+ color = Color(.statusPositive)
systemImage = "checkmark.circle.fill"
}
@@ -297,11 +297,11 @@ private struct PortfolioActivityRow: View {
private var iconColor: Color {
switch item.health {
case .healthy:
- return .cyan
+ return Color(.statusInfo)
case .warning:
- return .yellow
+ return Color(.statusWarning)
case .critical:
- return .red
+ return Color(.statusCritical)
}
}
}
@@ -332,11 +332,11 @@ private struct PortfolioAttentionRow: View {
private var badgeModel: AppStatusBadgeModel {
switch item.health {
case .healthy:
- return .init(title: "Healthy", systemImage: "checkmark.circle.fill", foregroundColor: .green, backgroundColor: .green.opacity(0.16))
+ return .init(title: "Healthy", systemImage: "checkmark.circle.fill", foregroundColor: Color(.statusPositive), backgroundColor: Color(.statusPositive).opacity(0.16))
case .warning:
- return .init(title: "Warning", systemImage: "exclamationmark.triangle.fill", foregroundColor: .yellow, backgroundColor: .yellow.opacity(0.16))
+ return .init(title: "Warning", systemImage: "exclamationmark.triangle.fill", foregroundColor: Color(.statusWarning), backgroundColor: Color(.statusWarning).opacity(0.16))
case .critical:
- return .init(title: "Critical", systemImage: "exclamationmark.octagon.fill", foregroundColor: .red, backgroundColor: .red.opacity(0.16))
+ return .init(title: "Critical", systemImage: "exclamationmark.octagon.fill", foregroundColor: Color(.statusCritical), backgroundColor: Color(.statusCritical).opacity(0.16))
}
}
}
@@ -371,11 +371,11 @@ private struct PortfolioExpiryRow: View {
private var badgeModel: AppStatusBadgeModel {
switch state.certificateExpiryState {
case .none:
- return .init(title: "Healthy", systemImage: "lock.fill", foregroundColor: .green, backgroundColor: .green.opacity(0.16))
+ return .init(title: "Healthy", systemImage: "lock.fill", foregroundColor: Color(.statusPositive), backgroundColor: Color(.statusPositive).opacity(0.16))
case .warning:
- return .init(title: "Warning", systemImage: "exclamationmark.triangle.fill", foregroundColor: .yellow, backgroundColor: .yellow.opacity(0.16))
+ return .init(title: "Warning", systemImage: "exclamationmark.triangle.fill", foregroundColor: Color(.statusWarning), backgroundColor: Color(.statusWarning).opacity(0.16))
case .critical:
- return .init(title: "Critical", systemImage: "xmark.octagon.fill", foregroundColor: .red, backgroundColor: .red.opacity(0.16))
+ return .init(title: "Critical", systemImage: "xmark.octagon.fill", foregroundColor: Color(.statusCritical), backgroundColor: Color(.statusCritical).opacity(0.16))
}
}
}