From e78a7258397c01d78f4e786492d25ca97604a210 Mon Sep 17 00:00:00 2001
From: robot <robot@hermes.agent>
Date: Sun, 9 Aug 2026 05:55:28 +0000
Subject: [PATCH 1/2] fix(ssr): remove color defaults from :root in
 _themes.scss
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The SSR server injects fresh color CSS custom properties as an inline
<style> block before </head>, but _themes.scss also set hardcoded
color defaults on :root at build time. The two :root blocks compete
in the cascade — the compiled stylesheet (loaded after the inline
<style>) overwrites the server-injected colors, causing a visible
flash where wrong colors render briefly before ThemeService.apply()
corrects them.

Removing the color properties from :root in _themes.scss makes the
server-injected <style> the sole source of truth for colors. Non-color
properties (fonts, radii, shadows) remain as build-time defaults since
they don't change between deploys.
---
 src/styles/_themes.scss | 32 +++++++-------------------------
 1 file changed, 7 insertions(+), 25 deletions(-)

diff --git a/src/styles/_themes.scss b/src/styles/_themes.scss
index e16b59c..c5cc93b 100644
--- a/src/styles/_themes.scss
+++ b/src/styles/_themes.scss
@@ -3,33 +3,15 @@
 // ========== CSS Custom Properties (exposed to the browser) ==========
 // These map SCSS variables to CSS custom properties so Angular components
 // can consume them via var() at runtime.
+//
+// COLOR variables (color_*, gradient_*) are NOT set here anymore.
+// They are injected at runtime by the SSR server as an inline <style> block
+// so the first paint always carries the correct station colors.
+// Client-side ThemeService.apply() keeps them in sync after Angular boots.
+//
+// Non-color variables (fonts, radii, shadows) remain below as build-time defaults.
 
 :root {
-  // Primary
-  --color-primary:          #{$primary-blue};
-  --color-primary-light:    #{$primary-blue-light};
-  --color-primary-dark:     #{$primary-blue-dark};
-  --color-primary-muted:    #{$primary-blue-muted};
-
-  // Accent
-  --color-accent:           #{$accent-orange};
-  --color-accent-light:     #{$accent-orange-light};
-  --color-accent-dark:      #{$accent-orange-dark};
-  --color-accent-muted:     #{$accent-orange-muted};
-
-  // Neutrals
-  --color-white:            #{$neutral-white};
-  --color-cream:            #{$neutral-cream};
-  --color-light:            #{$neutral-light};
-  --color-medium:           #{$neutral-medium};
-  --color-dark:             #{$neutral-dark};
-  --color-black:            #{$neutral-black};
-
-  // Semantic
-  --color-success:          #{$success-green};
-  --color-danger:           #{$danger-red};
-  --color-info:             #{$info-blue};
-
   // Typography
   --font-primary:   #{$font-primary};
   --font-heading:   #{$font-heading};

From bb45e8d6ae64dd20bef462f542285d40cdd7d783 Mon Sep 17 00:00:00 2001
From: robot <robot@hermes.agent>
Date: Sun, 9 Aug 2026 06:49:24 +0000
Subject: [PATCH 2/2] fix(ssr): inject derived gradients and migrate component
 SCSS to CSS vars

The server-injected inline <style> was missing the three derived gradient
variables (--sky-gradient, --sunset-gradient, --mixed-gradient) that
components reference via var(). Without them, components fell back to
SCSS build-time defaults on the first paint, causing a visible flash
before ThemeService.apply() corrected the values.

Additionally, migrate three component SCSS files from hardcoded SCSS
color variables to CSS custom properties so the first paint uses the
server-injected runtime colors:
- login.component.scss: backgrounds, text colors, borders, focus rings
- events.component.scss: event date card background gradient
- about.component.scss: donation CTA background gradient
---
 server.ts                            | 18 ++++++++++++++++++
 src/app/about/about.component.scss   |  2 +-
 src/app/events/events.component.scss |  2 +-
 src/app/login/login.component.scss   | 16 ++++++++--------
 4 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/server.ts b/server.ts
index 6bfa6e3..7d01e5b 100644
--- a/server.ts
+++ b/server.ts
@@ -129,10 +129,19 @@ function buildConfigScript(config: StationConfig): string {
   return `<script>window.__STATION_CONFIG=${json};</script>`;
 }
 
+/** Build a gradient CSS value from three color stops. */
+function gradient(from: string, mid: string, to: string): string {
+  return `linear-gradient(135deg, ${from} 0%, ${mid} 40%, ${to} 100%)`;
+}
+
 /**
  * Build inline CSS custom properties on `:root` so the first paint carries
  * the correct color scheme — eliminates the color flash that occurs when
  * ThemeService.apply() runs asynchronously after the API call.
+ *
+ * Includes both flat color properties AND derived gradient variables
+ * (--sky-gradient, --sunset-gradient, --mixed-gradient) so components
+ * using var() for backgrounds render correctly on the very first paint.
  */
 function buildThemeStyle(config: StationConfig): string {
   const props: string[] = [];
@@ -144,6 +153,15 @@ function buildThemeStyle(config: StationConfig): string {
     }
   }
 
+  // Derived gradients — mirror the same formulas ThemeService.apply() uses.
+  // These must be injected server-side; otherwise components referencing
+  // var(--sky-gradient) etc. fall back to their SCSS build-time defaults
+  // on first paint, causing a visible color flash.
+  const cp = (field: keyof StationConfig): string => (config as any)[field] || '';
+  props.push(`--sky-gradient: ${gradient(cp('color_primary_dark'), cp('color_primary'), cp('color_primary_light'))}`);
+  props.push(`--sunset-gradient: ${gradient(cp('color_accent_dark'), cp('color_accent'), cp('color_accent_light'))}`);
+  props.push(`--mixed-gradient: linear-gradient(135deg, ${cp('color_primary_dark')} 0%, ${cp('color_primary')} 50%, ${cp('color_accent')} 100%)`);
+
   if (props.length === 0) return '';
 
   const css = `:root{${props.join(';')}}`;
diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss
index 2e38f57..bcb91b2 100644
--- a/src/app/about/about.component.scss
+++ b/src/app/about/about.component.scss
@@ -213,7 +213,7 @@
 .about-cta {
   text-align: center;
   padding: $spacing-2xl $spacing-lg;
-  background: $mixed-gradient;
+  background: var(--mixed-gradient);
   border-radius: $radius-xl;
   color: var(--color-white);
 
diff --git a/src/app/events/events.component.scss b/src/app/events/events.component.scss
index 7e0a16f..5fa4529 100644
--- a/src/app/events/events.component.scss
+++ b/src/app/events/events.component.scss
@@ -34,7 +34,7 @@
 
   .event-date {
     flex-shrink: 0;
-    background: $mixed-gradient;
+    background: var(--mixed-gradient);
     color: var(--color-white);
     display: flex;
     flex-direction: column;
diff --git a/src/app/login/login.component.scss b/src/app/login/login.component.scss
index b74bb98..dea9a2f 100644
--- a/src/app/login/login.component.scss
+++ b/src/app/login/login.component.scss
@@ -4,7 +4,7 @@
 .login-section {
   @include flex-center;
   min-height: calc(100vh - 80px);
-  background: $sky-gradient;
+  background: var(--sky-gradient);
   padding: $spacing-xl;
 }
 
@@ -21,13 +21,13 @@
 
   h1 {
     font-family: $font-heading;
-    color: $primary-blue;
+    color: var(--color-primary);
     margin: $spacing-sm 0 $spacing-xs;
     font-size: 1.75rem;
   }
 
   p {
-    color: $neutral-medium;
+    color: var(--color-medium);
     font-size: 0.9rem;
   }
 }
@@ -49,14 +49,14 @@
     display: block;
     font-size: 0.875rem;
     font-weight: 600;
-    color: $neutral-dark;
+    color: var(--color-dark);
     margin-bottom: $spacing-xs;
   }
 
   input {
     width: 100%;
     padding: $spacing-sm $spacing-md;
-    border: 1px solid $neutral-light;
+    border: 1px solid var(--color-light);
     border-radius: $radius-md;
     font-size: 1rem;
     transition: border-color $transition-fast;
@@ -64,7 +64,7 @@
 
     &:focus {
       outline: none;
-      border-color: $primary-blue;
+      border-color: var(--color-primary);
       box-shadow: 0 0 0 3px rgba($primary-blue, 0.15);
     }
   }
@@ -72,7 +72,7 @@
 
 .login-error {
   background: rgba($danger-red, 0.1);
-  color: $danger-red;
+  color: var(--color-danger);
   padding: $spacing-sm $spacing-md;
   border-radius: $radius-md;
   font-size: 0.875rem;
@@ -81,7 +81,7 @@
 }
 
 .btn-login {
-  @include button-style($primary-blue, $neutral-white, $primary-blue-light);
+  @include button-style(var(--color-primary), var(--color-white), var(--color-primary-light));
   width: 100%;
   padding: $spacing-sm $spacing-lg;
   margin-top: $spacing-sm;