From 07e4b7550d2a61420f948331aa58d891c2755ac6 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 9 Dec 2022 14:33:15 -0500
Subject: [PATCH] DEV: relocate `:root` CSS custom properties (#19389)

---
 app/assets/stylesheets/common/foundation/base.scss | 14 ++++++++++++++
 .../stylesheets/common/foundation/variables.scss   | 11 +----------
 app/models/theme.rb                                |  2 +-
 3 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/common/foundation/base.scss b/app/assets/stylesheets/common/foundation/base.scss
index f233601f800..5dc173099eb 100644
--- a/app/assets/stylesheets/common/foundation/base.scss
+++ b/app/assets/stylesheets/common/foundation/base.scss
@@ -1,3 +1,17 @@
+// These CSS custom properties are added here instead of in variables.scss
+// because variables.scss is injected into every theme CSS file
+// which causes problems when overriding custom properties in themes
+
+:root {
+  --topic-body-width: #{$topic-body-width};
+  --topic-body-width-padding: #{$topic-body-width-padding};
+  --topic-avatar-width: #{$topic-avatar-width};
+  --d-border-radius: initial;
+  --d-nav-pill-border-radius: var(--d-border-radius);
+  --d-button-border-radius: var(--d-border-radius);
+  --d-input-border-radius: var(--d-border-radius);
+}
+
 // --------------------------------------------------
 // Base styles for HTML elements
 // --------------------------------------------------
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index cf8a1bc0fad..2f9bafab9e6 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -1,5 +1,6 @@
 // --------------------------------------------------
 // Variables used throughout the theme
+// this file is injected into every theme CSS file
 // --------------------------------------------------
 
 // Layout dimensions
@@ -14,16 +15,6 @@ $topic-body-width-padding: 11px;
 $topic-avatar-width: 45px;
 $reply-area-max-width: 1475px !default;
 
-:root {
-  --topic-body-width: #{$topic-body-width};
-  --topic-body-width-padding: #{$topic-body-width-padding};
-  --topic-avatar-width: #{$topic-avatar-width};
-  --d-border-radius: initial;
-  --d-nav-pill-border-radius: var(--d-border-radius);
-  --d-button-border-radius: var(--d-border-radius);
-  --d-input-border-radius: var(--d-border-radius);
-}
-
 $d-sidebar-width: 16em !default;
 
 // Brand color variables
diff --git a/app/models/theme.rb b/app/models/theme.rb
index ef34ef6a946..3c991a6445a 100644
--- a/app/models/theme.rb
+++ b/app/models/theme.rb
@@ -6,7 +6,7 @@ require 'json_schemer'
 class Theme < ActiveRecord::Base
   include GlobalPath
 
-  BASE_COMPILER_VERSION = 68
+  BASE_COMPILER_VERSION = 69
 
   attr_accessor :child_components