From bf5c38c5cfc04401c38fdc0c7bd783c90b1643e2 Mon Sep 17 00:00:00 2001
From: David <33458145+davidmcpowell@users.noreply.github.com>
Date: Thu, 29 May 2025 09:37:37 +0100
Subject: [PATCH] Merge pull request #25846 from
 overleaf/dp-themed-style-variables

Create themed colour variables and use them in new editor rail

GitOrigin-RevId: 48719f1b29170bcb95d34ecd538554bdf4fad2bb
---
 .../abstracts/themes-common-variables.scss    | 48 +++++++++++++++++++
 .../bootstrap-5/pages/editor/rail.scss        | 26 ++++------
 2 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/themes-common-variables.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/themes-common-variables.scss
index e113f63829..562dfb3efd 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/themes-common-variables.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/abstracts/themes-common-variables.scss
@@ -1,7 +1,55 @@
+/* ====== Semantic CSS color variables that adjust depending on the current theme ====== */
 :root {
   --editor-border-color: var(--neutral-80);
+  --bg-primary-themed: var(--bg-dark-primary);
+  --bg-secondary-themed: var(--bg-dark-secondary);
+  --bg-tertiary-themed: var(--bg-dark-tertiary);
+  --bg-disabled-themed: var(--bg-dark-disabled);
+  --content-primary-themed: var(--content-primary-dark);
+  --content-secondary-themed: var(--content-secondary-dark);
+  --content-disabled-themed: var(--content-disabled-dark);
+  --content-placeholder-themed: var(--content-placeholder-dark);
+  --content-danger-themed: var(--content-danger-dark);
+  --content-warning-themed: var(--content-warning-dark);
+  --content-positive-themed: var(--content-positive-dark);
+  --border-primary-themed: var(--border-primary-dark);
+  --border-hover-themed: var(--border-hover-dark);
+  --border-disabled-themed: var(--border-disabled-dark);
+  --border-active-themed: var(--border-active-dark);
+  --border-danger-themed: var(--border-danger-dark);
+  --border-divider-themed: var(--border-divider-dark);
+  --link-web-themed: var(--link-web-dark);
+  --link-web-hover-themed: var(--link-web-hover-dark);
+  --link-web-visited-themed: var(--link-web-visited-dark);
+  --link-ui-themed: var(--link-ui-dark);
+  --link-ui-hover-themed: var(--link-ui-hover-dark);
+  --link-ui-visited-themed: var(--link-ui-visited-dark);
 }
 
 @include theme('light') {
   --editor-border-color: var(--neutral-20);
+  --bg-primary-themed: var(--bg-light-primary);
+  --bg-secondary-themed: var(--bg-light-secondary);
+  --bg-tertiary-themed: var(--bg-light-tertiary);
+  --bg-disabled-themed: var(--bg-light-disabled);
+  --content-primary-themed: var(--content-primary);
+  --content-secondary-themed: var(--content-secondary);
+  --content-disabled-themed: var(--content-disabled);
+  --content-placeholder-themed: var(--content-placeholder);
+  --content-danger-themed: var(--content-danger);
+  --content-warning-themed: var(--content-warning);
+  --content-positive-themed: var(--content-positive);
+  --border-primary-themed: var(--border-primary);
+  --border-hover-themed: var(--border-hover);
+  --border-disabled-themed: var(--border-disabled);
+  --border-active-themed: var(--border-active);
+  --border-danger-themed: var(--border-danger);
+  --border-divider-themed: var(--border-divider);
+  --border-dark-divider-themed: var(--border-dark-divider);
+  --link-web-themed: var(--link-web);
+  --link-web-hover-themed: var(--link-web-hover);
+  --link-web-visited-themed: var(--link-web-visited);
+  --link-ui-themed: var(--link-ui);
+  --link-ui-hover-themed: var(--link-ui-hover);
+  --link-ui-visited-themed: var(--link-ui-visited);
 }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss
index a3aa9ddbb4..f6e65416cc 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss
+++ b/services/web/frontend/stylesheets/bootstrap-5/pages/editor/rail.scss
@@ -1,27 +1,19 @@
-:root {
-  --ide-rail-background: var(--bg-dark-primary);
-  --ide-rail-color: var(--content-primary-dark);
-  --ide-rail-link-background: var(--bg-dark-primary);
+body {
+  --ide-rail-background: var(--bg-primary-themed);
+  --ide-rail-color: var(--content-primary-themed);
+  --ide-rail-link-hover-color: var(--content-primary-themed);
+  --ide-rail-link-background: var(--bg-primary-themed);
+  --ide-rail-link-hover-background: var(--bg-secondary-themed);
+  --ide-rail-border-colour: var(--border-divider-themed);
+  --ide-rail-header-subdued-button-color: var(--content-primary-themed);
+  --ide-rail-header-subdued-button-hover-background: var(--bg-tertiary-themed);
   --ide-rail-link-active-color: var(--green-10);
   --ide-rail-link-active-background: var(--green-70);
-  --ide-rail-link-hover-color: var(--content-primary-dark);
-  --ide-rail-link-hover-background: var(--bg-dark-secondary);
-  --ide-rail-border-colour: var(--border-divider-dark);
-  --ide-rail-header-subdued-button-color: var(--content-primary-dark);
-  --ide-rail-header-subdued-button-hover-background: var(--bg-dark-tertiary);
 }
 
 @include theme('light') {
-  --ide-rail-background: #fff;
-  --ide-rail-color: var(--content-primary);
-  --ide-rail-link-background: #fff;
   --ide-rail-link-active-color: var(--green-70);
   --ide-rail-link-active-background: var(--bg-accent-03);
-  --ide-rail-link-hover-color: var(--content-primary);
-  --ide-rail-link-hover-background: var(--bg-light-secondary);
-  --ide-rail-border-colour: var(--border-divider);
-  --ide-rail-header-subdued-button-color: var(--content-primary);
-  --ide-rail-header-subdued-button-hover-background: var(--bg-light-tertiary);
 }
 
 .rail-panel-header {