From 22747e26fd70c4a29ea5d918c89dab084acac7e0 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 8 Sep 2023 12:07:04 -0400
Subject: [PATCH] DEV: common CSS property for content backgrounds (#23467)

---
 .../discourse/app/templates/groups/index.hbs  |   2 +-
 .../discourse/app/templates/tags/index.hbs    | 104 +++++++++---------
 .../stylesheets/common/admin/admin_base.scss  |   1 +
 .../stylesheets/common/base/_topic-list.scss  |   7 ++
 .../stylesheets/common/base/directory.scss    |   1 +
 app/assets/stylesheets/common/base/faqs.scss  |   1 +
 app/assets/stylesheets/common/base/group.scss |   4 +
 .../stylesheets/common/base/groups.scss       |   4 +
 .../stylesheets/common/base/not-found.scss    |   4 +
 .../stylesheets/common/base/reviewables.scss  |   2 +
 .../stylesheets/common/base/search.scss       |   2 +
 .../stylesheets/common/base/tagging.scss      |   4 +
 .../stylesheets/common/base/topic-post.scss   |   4 +
 app/assets/stylesheets/common/base/topic.scss |   1 +
 .../stylesheets/common/base/user-badges.scss  |   8 ++
 app/assets/stylesheets/common/base/user.scss  |   2 +
 .../common/components/user-stream-item.scss   |   2 +-
 .../stylesheets/common/foundation/base.scss   |   1 +
 app/assets/stylesheets/desktop/user.scss      |   2 +-
 .../stylesheets/common/base-common.scss       |   1 +
 .../stylesheets/common/chat-message.scss      |   2 +-
 21 files changed, 105 insertions(+), 54 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/groups/index.hbs b/app/assets/javascripts/discourse/app/templates/groups/index.hbs
index bff756a98a9..9b536cccbbd 100644
--- a/app/assets/javascripts/discourse/app/templates/groups/index.hbs
+++ b/app/assets/javascripts/discourse/app/templates/groups/index.hbs
@@ -4,7 +4,7 @@
 
 <PluginOutlet @name="before-groups-index-container" @connectorTagName="div" />
 
-<DSection @pageClass="groups">
+<DSection @pageClass="groups" @class="container groups-index">
   <div class="groups-header">
     {{#if this.currentUser.can_create_group}}
       <DButton
diff --git a/app/assets/javascripts/discourse/app/templates/tags/index.hbs b/app/assets/javascripts/discourse/app/templates/tags/index.hbs
index 949e000b89a..b1dc4a0edf8 100644
--- a/app/assets/javascripts/discourse/app/templates/tags/index.hbs
+++ b/app/assets/javascripts/discourse/app/templates/tags/index.hbs
@@ -2,59 +2,63 @@
   <DiscourseBanner @user={{this.currentUser}} @banner={{this.site.banner}} />
 </div>
 
-<div class="list-controls">
-  <div class="container tags-controls">
-    {{#if this.canAdminTags}}
-      <TagsAdminDropdown @actionsMapping={{this.actionsMapping}} />
-    {{/if}}
-    <h2>{{i18n "tagging.tags"}}</h2>
+<div class="container tags-index">
+
+  <div class="list-controls">
+    <div class="container tags-controls">
+      {{#if this.canAdminTags}}
+        <TagsAdminDropdown @actionsMapping={{this.actionsMapping}} />
+      {{/if}}
+      <h2>{{i18n "tagging.tags"}}</h2>
+    </div>
   </div>
-</div>
 
-<div>
-  <PluginOutlet
-    @name="tags-below-title"
-    @connectorTagName="div"
-    @outletArgs={{hash model=this.model}}
-  />
-</div>
-
-<div class="tag-sort-options">
-  {{i18n "tagging.sort_by"}}
-  <span class="tag-sort-count {{if this.sortedByCount 'active'}}"><a
-      href
-      {{on "click" this.sortByCount}}
-    >{{i18n "tagging.sort_by_count"}}</a></span>
-  <span class="tag-sort-name {{if this.sortedByName 'active'}}"><a
-      href
-      {{on "click" this.sortById}}
-    >{{i18n "tagging.sort_by_name"}}</a></span>
-</div>
-
-<hr />
-
-<div class="all-tag-lists">
-  {{#each this.model.extras.categories as |category|}}
-    <TagList
-      @tags={{category.tags}}
-      @sortProperties={{this.sortProperties}}
-      @categoryId={{category.id}}
+  <div>
+    <PluginOutlet
+      @name="tags-below-title"
+      @connectorTagName="div"
+      @outletArgs={{hash model=this.model}}
     />
-  {{/each}}
+  </div>
 
-  {{#each this.model.extras.tag_groups as |tagGroup|}}
-    <TagList
-      @tags={{tagGroup.tags}}
-      @sortProperties={{this.sortProperties}}
-      @tagGroupName={{tagGroup.name}}
-    />
-  {{/each}}
+  <div class="tag-sort-options">
+    {{i18n "tagging.sort_by"}}
+    <span class="tag-sort-count {{if this.sortedByCount 'active'}}"><a
+        href
+        {{on "click" this.sortByCount}}
+      >{{i18n "tagging.sort_by_count"}}</a></span>
+    <span class="tag-sort-name {{if this.sortedByName 'active'}}"><a
+        href
+        {{on "click" this.sortById}}
+      >{{i18n "tagging.sort_by_name"}}</a></span>
+  </div>
+
+  <hr />
+
+  <div class="all-tag-lists">
+    {{#each this.model.extras.categories as |category|}}
+      <TagList
+        @tags={{category.tags}}
+        @sortProperties={{this.sortProperties}}
+        @categoryId={{category.id}}
+      />
+    {{/each}}
+
+    {{#each this.model.extras.tag_groups as |tagGroup|}}
+      <TagList
+        @tags={{tagGroup.tags}}
+        @sortProperties={{this.sortProperties}}
+        @tagGroupName={{tagGroup.name}}
+      />
+    {{/each}}
+
+    {{#if this.model}}
+      <TagList
+        @tags={{this.model}}
+        @sortProperties={{this.sortProperties}}
+        @titleKey={{this.otherTagsTitleKey}}
+      />
+    {{/if}}
+  </div>
 
-  {{#if this.model}}
-    <TagList
-      @tags={{this.model}}
-      @sortProperties={{this.sortProperties}}
-      @titleKey={{this.otherTagsTitleKey}}
-    />
-  {{/if}}
 </div>
\ No newline at end of file
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 5aa31982d8f..5d566df986c 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -10,6 +10,7 @@ $mobile-breakpoint: 700px;
   width: 100%;
   overflow: hidden;
   height: 100%;
+  background: var(--d-content-background);
 
   @include breakpoint(tablet) {
     width: calc(100% + 10px);
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index 2d86e80cd6c..fa936bd64dd 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -1,6 +1,8 @@
 // Topic list navigation & controls
 
 .list-controls {
+  background: var(--d-content-background);
+
   a.badge-category {
     padding: 3px 12px;
     font-size: var(--font-up-1);
@@ -115,6 +117,10 @@
   margin-bottom: 1.5em;
 }
 
+#header-list-area {
+  background: var(--d-content-background);
+}
+
 // Topic list body
 
 .topic-list-item.visited .topic-list-data,
@@ -369,6 +375,7 @@
 }
 
 #list-area {
+  background: var(--d-content-background);
   margin-bottom: 100px;
 
   .empty-topic-list {
diff --git a/app/assets/stylesheets/common/base/directory.scss b/app/assets/stylesheets/common/base/directory.scss
index cd3408a3dec..0b678e22a66 100644
--- a/app/assets/stylesheets/common/base/directory.scss
+++ b/app/assets/stylesheets/common/base/directory.scss
@@ -5,6 +5,7 @@
 
 .directory {
   margin-bottom: 100px;
+  background: var(--d-content-background);
 
   &.users-directory {
     .directory-group-selector {
diff --git a/app/assets/stylesheets/common/base/faqs.scss b/app/assets/stylesheets/common/base/faqs.scss
index 95a6327a056..44580fed63f 100644
--- a/app/assets/stylesheets/common/base/faqs.scss
+++ b/app/assets/stylesheets/common/base/faqs.scss
@@ -2,6 +2,7 @@
   /* covers /about, /faq, /guidelines, /tos, /privacy, and login-required */
   width: 100%;
   max-width: 700px;
+  background: var(--d-content-background);
   .about-page & {
     max-width: unset;
     section:not(.admins):not(.moderators):not(.category-moderators) {
diff --git a/app/assets/stylesheets/common/base/group.scss b/app/assets/stylesheets/common/base/group.scss
index 54116873acc..b32f181147a 100644
--- a/app/assets/stylesheets/common/base/group.scss
+++ b/app/assets/stylesheets/common/base/group.scss
@@ -4,6 +4,10 @@
 
 @use "sass:math";
 
+.container.group {
+  background: var(--d-content-background);
+}
+
 .group-details-container {
   background: var(--primary-very-low);
   padding: 20px;
diff --git a/app/assets/stylesheets/common/base/groups.scss b/app/assets/stylesheets/common/base/groups.scss
index 1aab6046096..7f924ab8672 100644
--- a/app/assets/stylesheets/common/base/groups.scss
+++ b/app/assets/stylesheets/common/base/groups.scss
@@ -28,6 +28,10 @@
   }
 }
 
+.container.groups-index {
+  background: var(--d-content-background);
+}
+
 .groups-boxes {
   display: grid;
   grid-gap: 1em;
diff --git a/app/assets/stylesheets/common/base/not-found.scss b/app/assets/stylesheets/common/base/not-found.scss
index 51b0e34d8fa..bda5490e890 100644
--- a/app/assets/stylesheets/common/base/not-found.scss
+++ b/app/assets/stylesheets/common/base/not-found.scss
@@ -1,5 +1,9 @@
 // Page not found styles
 
+.not-found-container {
+  background: var(--d-content-background);
+}
+
 .page-not-found {
   margin: 0 0 40px 0;
 
diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss
index b3003c76753..5cc0f7ba117 100644
--- a/app/assets/stylesheets/common/base/reviewables.scss
+++ b/app/assets/stylesheets/common/base/reviewables.scss
@@ -1,4 +1,6 @@
 .reviewable {
+  background: var(--d-content-background);
+
   .flagged-post-header {
     width: 100%;
     display: flex;
diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss
index 1572828d3a8..222b36d1b22 100644
--- a/app/assets/stylesheets/common/base/search.scss
+++ b/app/assets/stylesheets/common/base/search.scss
@@ -11,6 +11,8 @@
 }
 
 .search-container {
+  background: var(--d-content-background);
+
   .search-header {
     @include search-page-spacing();
     background: var(--primary-very-low);
diff --git a/app/assets/stylesheets/common/base/tagging.scss b/app/assets/stylesheets/common/base/tagging.scss
index d796d75ed48..a01541831e5 100644
--- a/app/assets/stylesheets/common/base/tagging.scss
+++ b/app/assets/stylesheets/common/base/tagging.scss
@@ -1,3 +1,7 @@
+.container.tags-index {
+  background: var(--d-content-background);
+}
+
 .topic-title-outlet.choose-tags {
   margin-left: 25px;
   margin-top: 3px;
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 751f93a7fa5..49504acf2c6 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -1,3 +1,7 @@
+#main-outlet > .regular {
+  background: var(--d-content-background);
+}
+
 .button-count.has-pending {
   span {
     background-color: var(--danger);
diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss
index ca905e12942..9b2a8f465ea 100644
--- a/app/assets/stylesheets/common/base/topic.scss
+++ b/app/assets/stylesheets/common/base/topic.scss
@@ -330,6 +330,7 @@ a.badge-category {
 }
 
 .private_message {
+  background: var(--d-content-background);
   #topic-title {
     .edit-topic-title {
       position: relative;
diff --git a/app/assets/stylesheets/common/base/user-badges.scss b/app/assets/stylesheets/common/base/user-badges.scss
index 204330fb770..1795adcc37c 100644
--- a/app/assets/stylesheets/common/base/user-badges.scss
+++ b/app/assets/stylesheets/common/base/user-badges.scss
@@ -1,4 +1,8 @@
 /* Default badge styles. */
+.show-badge {
+  background: var(--d-content-background);
+}
+
 .user-badge {
   padding: 3px 8px;
   color: var(--primary);
@@ -231,6 +235,10 @@
   }
 }
 
+.container.badges {
+  background: var(--d-content-background);
+}
+
 .badge-groups {
   margin: 20px 0;
   color: var(--primary-med-or-secondary-med);
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index 5a568850167..0a84aae2c9c 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -78,6 +78,8 @@
 }
 
 .user-main {
+  background: var(--d-content-background);
+
   .about {
     width: 100%;
     margin-bottom: 0;
diff --git a/app/assets/stylesheets/common/components/user-stream-item.scss b/app/assets/stylesheets/common/components/user-stream-item.scss
index ad6efc54148..a1fef7daa2c 100644
--- a/app/assets/stylesheets/common/components/user-stream-item.scss
+++ b/app/assets/stylesheets/common/components/user-stream-item.scss
@@ -7,7 +7,7 @@
   // selectors below are its children
   .item,
   .user-stream-item {
-    background-color: var(--secondary);
+    background: var(--d-content-background, var(--secondary));
     border-bottom: 1px solid var(--primary-low);
     padding: 1em 0.53em;
     list-style: none;
diff --git a/app/assets/stylesheets/common/foundation/base.scss b/app/assets/stylesheets/common/foundation/base.scss
index cea08f71fe3..3c24bbeb093 100644
--- a/app/assets/stylesheets/common/foundation/base.scss
+++ b/app/assets/stylesheets/common/foundation/base.scss
@@ -11,6 +11,7 @@
   --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-content-background: initial;
 }
 
 // --------------------------------------------------
diff --git a/app/assets/stylesheets/desktop/user.scss b/app/assets/stylesheets/desktop/user.scss
index 9444c63de6d..9582d19a52b 100644
--- a/app/assets/stylesheets/desktop/user.scss
+++ b/app/assets/stylesheets/desktop/user.scss
@@ -92,7 +92,7 @@
   margin-top: 2em;
   padding-bottom: 12px;
   margin-bottom: 12px;
-  background-color: var(--secondary);
+  background: var(--d-content-background, var(--secondary));
   box-sizing: border-box;
 
   .btn.right {
diff --git a/plugins/chat/assets/stylesheets/common/base-common.scss b/plugins/chat/assets/stylesheets/common/base-common.scss
index 794330db303..a7f3489a39d 100644
--- a/plugins/chat/assets/stylesheets/common/base-common.scss
+++ b/plugins/chat/assets/stylesheets/common/base-common.scss
@@ -195,6 +195,7 @@ body.has-full-page-chat {
 .full-page-chat {
   display: grid;
   grid-template-columns: var(--full-page-sidebar-width) 1fr;
+  background: var(--d-content-background);
 
   .chat-full-page-header {
     border-top: 1px solid var(--primary-low);
diff --git a/plugins/chat/assets/stylesheets/common/chat-message.scss b/plugins/chat/assets/stylesheets/common/chat-message.scss
index 27195653a32..a05bff4c16d 100644
--- a/plugins/chat/assets/stylesheets/common/chat-message.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-message.scss
@@ -168,7 +168,7 @@
 }
 
 .chat-message-container {
-  background-color: var(--secondary);
+  background-color: var(--d-content-background, var(--secondary));
 
   &.-errored {
     color: var(--primary-medium);