diff options
| author | Christian Cleberg <[email protected]> | 2026-07-20 18:16:01 -0500 |
|---|---|---|
| committer | Christian Cleberg <[email protected]> | 2026-07-20 18:50:57 -0500 |
| commit | eb8a0d30da0cc150e95d44bad998c13ee2defc25 (patch) | |
| tree | 1ad349e302b5b48bbc9f79d17a66bcfc31dace11 /DomainDig/DashboardView.swift | |
| parent | 1e25fb947d3c01fc983b481fff5b064ed82349ab (diff) | |
| download | domain-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.swift | 62 |
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)) } } } |
