FIX: Fix css var issues + button :active gradient (#10469)

FIX: Fix css var issues + button :active gradient (#10469)

  • FIX: Fix css var issues

Adds ability for published page to use css var() + import the var() definitions

diff --git a/app/assets/stylesheets/publish.scss b/app/assets/stylesheets/publish.scss
index df6ac96..15bdadf 100644
--- a/app/assets/stylesheets/publish.scss
+++ b/app/assets/stylesheets/publish.scss
@@ -9,7 +9,7 @@
   width: 100%;
   top: 0;
   z-index: z("header");
-  background-color: $secondary;
+  background-color: var(--secondary, $secondary);
   box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25);
   position: sticky;
   top: 0;
@@ -25,7 +25,7 @@
       line-height: 1em;
     }
     .published-page-title {
-      color: $header_primary;
+      color: var(--header_primary, $header_primary);
       font-size: 2em;
       margin: 0;
       max-height: 1.25em;
@@ -34,8 +34,8 @@
 }
 
 .published-page {
-  background-color: $secondary;
-  color: $primary;
+  background-color: var(--secondary, $secondary);
+  color: var(--primary, $primary);
 
   blockquote {
     margin-left: 0;
@@ -53,10 +53,10 @@
     margin-right: 1em;
     height: 45px;
     width: 45px;
-    border: 4px solid rgba($tertiary, 0.75);
+    border: 4px solid var(--tertiary-medium, $tertiary-medium);
   }
   .topic-created-at {
-    color: $primary-medium;
+    color: var(--primary-medium, $primary-medium);
   }
 }
 
diff --git a/app/views/published_pages/show.html.erb b/app/views/published_pages/show.html.erb
index d1a0588..0f84c9c 100644
--- a/app/views/published_pages/show.html.erb
+++ b/app/views/published_pages/show.html.erb
@@ -1,3 +1,5 @@
+<%= discourse_color_scheme_stylesheets() %>
+
 <div class="published-page-header">
     <div class="published-page-header-wrapper">
       <a href="<%= @site_url %>">

GitHub sha: ed0e1e28

This commit appears in #10469 which was approved by eviltrout. It was merged by jordanvidrine.