fix(ssr): remove color defaults from :root in _themes.scss
CI Pipeline / backend-test (push) Successful in 9m55s
CI Pipeline / frontend-test (push) Successful in 23s
CI Pipeline / frontend-build (push) Successful in 29s
CI Pipeline / backend-lint (push) Successful in 9s
CI Pipeline / backend-test (pull_request) Successful in 9m56s
CI Pipeline / frontend-test (pull_request) Successful in 23s
CI Pipeline / frontend-build (pull_request) Successful in 30s
CI Pipeline / backend-lint (pull_request) Successful in 8s
CI Pipeline / quality-gate (push) Successful in 2s
CI Pipeline / quality-gate (pull_request) Successful in 1s
CI Pipeline / backend-test (push) Successful in 9m55s
CI Pipeline / frontend-test (push) Successful in 23s
CI Pipeline / frontend-build (push) Successful in 29s
CI Pipeline / backend-lint (push) Successful in 9s
CI Pipeline / backend-test (pull_request) Successful in 9m56s
CI Pipeline / frontend-test (pull_request) Successful in 23s
CI Pipeline / frontend-build (pull_request) Successful in 30s
CI Pipeline / backend-lint (pull_request) Successful in 8s
CI Pipeline / quality-gate (push) Successful in 2s
CI Pipeline / quality-gate (pull_request) Successful in 1s
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.
This commit is contained in:
1 parent
849856aecb
commit
e78a725839
1 file changed
+7
-25
+7
-25
@@ -3,33 +3,15 @@
|
|||||||
// ========== CSS Custom Properties (exposed to the browser) ==========
|
// ========== CSS Custom Properties (exposed to the browser) ==========
|
||||||
// These map SCSS variables to CSS custom properties so Angular components
|
// These map SCSS variables to CSS custom properties so Angular components
|
||||||
// can consume them via var() at runtime.
|
// 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 {
|
: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
|
// Typography
|
||||||
--font-primary: #{$font-primary};
|
--font-primary: #{$font-primary};
|
||||||
--font-heading: #{$font-heading};
|
--font-heading: #{$font-heading};
|
||||||
|
|||||||
Reference in new issue
Block a user