Merge pull request #9 from encryption4all/fix/dark-mode-contrast

fix: improve white-on-purple contrast in dark mode

Author: rubenhensen

src/lib/components/Header.svelte

@@ -113,7 +113,7 @@
 		font-family: var(--pg-font-family);
 		font-size: var(--pg-font-size-xs);
 		font-weight: var(--pg-font-weight-bold);
-		background: var(--pg-primary);
+		background: var(--pg-primary-bg);
 		color: #fff;
 		padding: 2px 6px;
 		border-radius: var(--pg-border-radius-sm);

src/lib/global.scss

@@ -47,6 +47,10 @@ body {
 	/* Colors — Purple business colorway */
 	--pg-primary: #7c3aed;
 	--pg-primary-contrast: #6d28d9;
+	/* Background shade used wherever white text sits on purple (buttons, badges). */
+	/* Must keep contrast >= 4.5:1 against white in both themes. */
+	--pg-primary-bg: #7c3aed; /* white = 4.76:1, passes AA */
+	--pg-primary-bg-hover: #6d28d9; /* white = 5.84:1 */
 	--pg-general-background: #ffffff;
 	--pg-soft-background: #f5f3ff;
 	--pg-strong-background: #ddd6fe;
@@ -65,7 +69,11 @@ body {
 
 .dark {
 	--pg-primary: #a78bfa;
-	--pg-primary-contrast: #a78bfa;
+	--pg-primary-contrast: #6d28d9;
+	/* Keep the darker purple in dark mode too so white-text-on-purple */
+	/* buttons / badges keep a passing contrast ratio. */
+	--pg-primary-bg: #7c3aed;
+	--pg-primary-bg-hover: #6d28d9;
 	--pg-general-background: #0f0a1e;
 	--pg-soft-background: #1a1030;
 	--pg-strong-background: #2d1b69;
@@ -287,7 +295,7 @@ textarea.pg-input:disabled {
 	font-weight: var(--pg-font-weight-medium);
 	font-family: var(--pg-font-family);
 	border-radius: var(--pg-border-radius-sm);
-	background: var(--pg-primary);
+	background: var(--pg-primary-bg);
 	color: #ffffff;
 	box-shadow: 0 4px 3px -2px rgba(0, 0, 0, 0.3);
 	cursor: pointer;
@@ -300,7 +308,7 @@ textarea.pg-input:disabled {
 }
 
 .primary-btn:hover:not(:disabled) {
-	background: var(--pg-primary-contrast);
+	background: var(--pg-primary-bg-hover);
 	transform: translateY(-1px);
 	box-shadow: 0 6px 4px -2px rgba(0, 0, 0, 0.3);
 }

src/routes/(admin)/+layout.svelte

@@ -168,7 +168,7 @@
 		font-family: var(--pg-font-family);
 		font-size: var(--pg-font-size-xs);
 		font-weight: var(--pg-font-weight-bold);
-		background: var(--pg-primary);
+		background: var(--pg-primary-bg);
 		color: #fff;
 		padding: 2px 6px;
 		border-radius: var(--pg-border-radius-sm);

src/routes/(marketing)/pricing/+page.svelte

@@ -155,7 +155,7 @@
 		top: -12px;
 		left: 50%;
 		transform: translateX(-50%);
-		background: var(--pg-primary);
+		background: var(--pg-primary-bg);
 		color: #fff;
 		font-family: var(--pg-font-family);
 		font-size: var(--pg-font-size-xs);

src/routes/(portal)/+layout.svelte

@@ -183,7 +183,7 @@
 		font-family: var(--pg-font-family);
 		font-size: var(--pg-font-size-xs);
 		font-weight: var(--pg-font-weight-bold);
-		background: var(--pg-primary);
+		background: var(--pg-primary-bg);
 		color: #fff;
 		padding: 2px 6px;
 		border-radius: var(--pg-border-radius-sm);

src/routes/(portal)/portal/dns/+page.svelte

@@ -173,7 +173,7 @@
 		width: 32px;
 		height: 32px;
 		border-radius: 50%;
-		background: var(--pg-primary);
+		background: var(--pg-primary-bg);
 		color: #fff;
 		display: flex;
 		align-items: center;

src/routes/auth/login/+page.svelte

@@ -75,7 +75,7 @@
 		font-family: var(--pg-font-family);
 		font-size: var(--pg-font-size-xs);
 		font-weight: var(--pg-font-weight-bold);
-		background: var(--pg-primary);
+		background: var(--pg-primary-bg);
 		color: #fff;
 		padding: 2px 6px;
 		border-radius: var(--pg-border-radius-sm);

src/routes/auth/login/admin/+page.svelte

@@ -67,7 +67,7 @@
 		font-family: var(--pg-font-family);
 		font-size: var(--pg-font-size-xs);
 		font-weight: var(--pg-font-weight-bold);
-		background: var(--pg-primary);
+		background: var(--pg-primary-bg);
 		color: #fff;
 		padding: 2px 6px;
 		border-radius: var(--pg-border-radius-sm);