@mundogamernetwork/shared-ui 1.8.22 → 1.8.23

package/components/keys/KeyBrowser.vue

@@ -399,7 +399,7 @@ function statusColor(slug: string): string {
   &__auth-wall {
     padding: 40px;
     text-align: center;
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -430,7 +430,7 @@ function statusColor(slug: string): string {
     background: none;
     border: none;
     border-bottom: 2px solid transparent;
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
     cursor: pointer;
     display: flex;
     align-items: center;
@@ -455,7 +455,7 @@ function statusColor(slug: string): string {
   &__empty {
     padding: 40px;
     text-align: center;
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
     font-size: 0.9rem;
   }
 
@@ -484,13 +484,13 @@ function statusColor(slug: string): string {
 
   &__pool-availability { font-size: 0.82rem; }
   &__avail-ok { color: var(--success, #22c55e); }
-  &__avail-empty { color: var(--text-secondary, #888); }
+  &__avail-empty { color: var(--secondary-info-fg); }
 
   &__platform-sel { display: flex; flex-direction: column; gap: 6px; }
 
   &__label {
     font-size: 0.75rem;
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
   }
 
   &__platform-chips {
@@ -503,7 +503,7 @@ function statusColor(slug: string): string {
     padding: 4px 10px;
     font-size: 0.78rem;
     border: 1px solid var(--border-color, #2a2a2a);
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
     cursor: pointer;
     transition: border-color 0.15s, color 0.15s;
 
@@ -577,7 +577,7 @@ function statusColor(slug: string): string {
 
   &__request-platform {
     font-size: 0.78rem;
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
   }
 
   &__status-chip {
@@ -613,7 +613,7 @@ function statusColor(slug: string): string {
 
   &__pending-label {
     font-size: 0.8rem;
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
     font-style: italic;
   }
 
@@ -647,7 +647,7 @@ function statusColor(slug: string): string {
     p {
       margin: 0;
       font-size: 0.82rem;
-      color: var(--text-secondary, #888);
+      color: var(--secondary-info-fg);
       line-height: 1.4;
     }
   }
@@ -664,7 +664,7 @@ function statusColor(slug: string): string {
     font-weight: 600;
     border: 1px solid var(--border-color, #2a2a2a);
     background: none;
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
     cursor: pointer;
     transition: opacity 0.15s, border-color 0.15s, color 0.15s;
 

package/components/keys/KeyCampaignDashboardCard.vue

@@ -370,7 +370,7 @@ const detailRoute = computed(() =>
 
 	&__days {
 		font-size: 11px;
-		color: var(--text-secondary, #aaa);
+		color: var(--secondary-info-fg);
 	}
 
 	&__type {
@@ -401,7 +401,7 @@ const detailRoute = computed(() =>
 		font-weight: 600;
 		padding: 2px 6px;
 		border: 1px solid var(--border-color, rgba(255,255,255,0.2));
-		color: var(--text-secondary, #aaa);
+		color: var(--secondary-info-fg);
 		text-transform: uppercase;
 		letter-spacing: 0.4px;
 	}

package/components/keys/KeyRevealModal.vue

@@ -77,7 +77,7 @@ function copyCode() {
 
   &__sub {
     font-size: 0.88rem;
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
     margin: 0;
   }
 
@@ -112,7 +112,7 @@ function copyCode() {
   &__copy {
     background: none;
     border: none;
-    color: var(--text-secondary, #888);
+    color: var(--secondary-info-fg);
     cursor: pointer;
     font-size: 1.1rem;
     padding: 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.8.22",
+  "version": "1.8.23",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

package/pages/key-campaigns/key-materials.vue

@@ -306,9 +306,9 @@ function toggleBox(boxNumber: number) {
 function goBack() {
 	if (props.goBackPage) {
 		window.location.href = props.goBackPage
-	} else {
-		window.history.back()
+		return
 	}
+	goBackWithin("/key-campaigns")
 }
 
 function handleSuccessClose() {

package/pages/key-campaigns/redeem-key-approved.vue

@@ -191,11 +191,7 @@ function goToLogin() {
 }
 
 function goBack() {
-	if (typeof window !== "undefined" && window.history.length > 1) {
-		window.history.back()
-	} else {
-		navigateTo(`/${locale.value}/key-campaigns`)
-	}
+	goBackWithin(`/${locale.value}/key-campaigns`)
 }
 </script>
 
@@ -580,7 +576,7 @@ function goBack() {
 
 		.embargo-warning-text {
 			strong { display: block; color: var(--danger, #e53935); font-size: 14px; margin-bottom: 4px; }
-			p { margin: 0; font-size: 13px; color: var(--text-secondary, #ccc); }
+			p { margin: 0; font-size: 13px; color: var(--secondary-info-fg); }
 
 			.embargo-countdown {
 				margin-top: 4px;
@@ -628,11 +624,12 @@ function goBack() {
 			gap: 8px;
 			font-size: 13px;
 			cursor: pointer;
-			// Inherited nothing usable and rendered near-black on the dark
-			// background — the one thing the user has to read before agreeing
-			// to it. Same token the warning above uses, which is legible in
-			// both themes.
-			color: var(--text-secondary, #ccc);
+			// The one thing the user has to read before agreeing to it. This
+			// used to reference --text-secondary, which is defined nowhere in
+			// the ecosystem, so it always fell back to #ccc — fine on dark,
+			// invisible on the light-mode pink. --secondary-info-fg is the real
+			// token and is themed in both _light.scss and _dark.scss.
+			color: var(--secondary-info-fg);
 
 			input {
 				margin-top: 2px;

package/pages/key-campaigns/redeem-key.vue

@@ -246,11 +246,7 @@ function goBack() {
 		navigateTo(campaignPath.value)
 		return
 	}
-	if (typeof window !== "undefined" && window.history.length > 1) {
-		window.history.back()
-	} else {
-		navigateTo(`/${locale.value}/key-campaigns`)
-	}
+	goBackWithin(`/${locale.value}/key-campaigns`)
 }
 
 onUnmounted(() => {
@@ -535,7 +531,7 @@ onUnmounted(() => {
 			// Same omission as the reveal screen: no colour meant the text the
 			// user has to agree to inherited whatever the surrounding card left
 			// behind, and came out unreadable on dark.
-			color: var(--text-secondary, #ccc);
+			color: var(--secondary-info-fg);
 
 			input {
 				flex-shrink: 0;

package/pages/keys/index.vue

@@ -121,7 +121,7 @@ onMounted(() => fetchCampaigns())
 
   &__loading, &__empty {
     text-align: center;
-    color: var(--text-secondary, #aaa);
+    color: var(--secondary-info-fg);
     padding: 3rem 0;
     font-size: 0.9rem;
   }

package/utils/navigation.ts

@@ -0,0 +1,26 @@
+/**
+ * Go back without falling out of the app.
+ *
+ * `window.history.length > 1` is the wrong test: it counts the whole tab
+ * session, so a user who landed here from a Google result has length 2 and
+ * `history.back()` returns them to Google. Same for an email link, a Discord
+ * link, or anything else external.
+ *
+ * Vue Router records the previous in-app entry in `history.state.back`. It is
+ * only set when the navigation happened inside the SPA, which is exactly the
+ * condition under which going back is safe. Anything else falls through to an
+ * explicit route.
+ */
+export function goBackWithin(fallbackPath: string): void {
+	if (typeof window === "undefined") return
+
+	const router = useRouter()
+	const previous = (router.options.history.state as Record<string, unknown> | undefined)?.back
+
+	if (typeof previous === "string" && previous.length > 0) {
+		router.back()
+		return
+	}
+
+	navigateTo(fallbackPath)
+}