Merge branch 'main' into second-batch

Followup fix for #84

Gemfile.lock

@@ -1,9 +1,8 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    activesupport (8.0.2)
+    activesupport (7.2.1.1)
       base64
-      benchmark (>= 0.3)
       bigdecimal
       concurrent-ruby (~> 1.0, >= 1.3.1)
       connection_pool (>= 2.2.5)
@@ -13,83 +12,68 @@ GEM
       minitest (>= 5.1)
       securerandom (>= 0.3)
       tzinfo (~> 2.0, >= 2.0.5)
-      uri (>= 0.13.1)
+    ast (2.4.2)
-    ast (2.4.3)
     base64 (0.2.0)
-    benchmark (0.4.0)
+    bigdecimal (3.1.8)
-    bigdecimal (3.1.9)
+    concurrent-ruby (1.3.4)
-    concurrent-ruby (1.3.5)
+    connection_pool (2.4.1)
-    connection_pool (2.5.3)
     drb (2.2.1)
-    i18n (1.14.7)
+    i18n (1.14.6)
       concurrent-ruby (~> 1.0)
-    json (2.11.3)
+    json (2.7.2)
-    language_server-protocol (3.17.0.4)
+    language_server-protocol (3.17.0.3)
-    lint_roller (1.1.0)
+    logger (1.6.1)
-    logger (1.7.0)
+    minitest (5.25.1)
-    minitest (5.25.5)
+    parallel (1.26.3)
-    parallel (1.27.0)
+    parser (3.3.5.0)
-    parser (3.3.8.0)
       ast (~> 2.4.1)
       racc
     prettier_print (1.2.1)
-    prism (1.4.0)
     racc (1.8.1)
-    rack (3.1.13)
+    rack (3.1.10)
     rainbow (3.1.1)
-    regexp_parser (2.10.0)
+    regexp_parser (2.9.2)
-    rubocop (1.75.4)
+    rubocop (1.67.0)
       json (~> 2.3)
-      language_server-protocol (~> 3.17.0.2)
+      language_server-protocol (>= 3.17.0)
-      lint_roller (~> 1.1.0)
       parallel (~> 1.10)
       parser (>= 3.3.0.2)
       rainbow (>= 2.2.2, < 4.0)
-      regexp_parser (>= 2.9.3, < 3.0)
+      regexp_parser (>= 2.4, < 3.0)
-      rubocop-ast (>= 1.44.0, < 2.0)
+      rubocop-ast (>= 1.32.2, < 2.0)
       ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 2.4.0, < 4.0)
+      unicode-display_width (>= 2.4.0, < 3.0)
-    rubocop-ast (1.44.1)
+    rubocop-ast (1.32.3)
-      parser (>= 3.3.7.2)
+      parser (>= 3.3.1.0)
-      prism (~> 1.4)
+    rubocop-capybara (2.21.0)
-    rubocop-capybara (2.22.1)
+      rubocop (~> 1.41)
-      lint_roller (~> 1.1)
+    rubocop-discourse (3.8.2)
-      rubocop (~> 1.72, >= 1.72.1)
-    rubocop-discourse (3.12.1)
       activesupport (>= 6.1)
-      lint_roller (>= 1.1.0)
+      rubocop (>= 1.59.0)
-      rubocop (>= 1.73.2)
+      rubocop-capybara (>= 2.0.0)
-      rubocop-capybara (>= 2.22.0)
+      rubocop-factory_bot (>= 2.0.0)
-      rubocop-factory_bot (>= 2.27.0)
+      rubocop-rails (>= 2.25.0)
-      rubocop-rails (>= 2.30.3)
       rubocop-rspec (>= 3.0.1)
-      rubocop-rspec_rails (>= 2.31.0)
+      rubocop-rspec_rails (>= 2.30.0)
-    rubocop-factory_bot (2.27.1)
+    rubocop-factory_bot (2.26.1)
-      lint_roller (~> 1.1)
+      rubocop (~> 1.61)
-      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-rails (2.26.2)
-    rubocop-rails (2.31.0)
       activesupport (>= 4.2.0)
-      lint_roller (~> 1.1)
       rack (>= 1.1)
-      rubocop (>= 1.75.0, < 2.0)
+      rubocop (>= 1.52.0, < 2.0)
-      rubocop-ast (>= 1.38.0, < 2.0)
+      rubocop-ast (>= 1.31.1, < 2.0)
-    rubocop-rspec (3.6.0)
+    rubocop-rspec (3.1.0)
-      lint_roller (~> 1.1)
+      rubocop (~> 1.61)
-      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-rspec_rails (2.30.0)
-    rubocop-rspec_rails (2.31.0)
+      rubocop (~> 1.61)
-      lint_roller (~> 1.1)
+      rubocop-rspec (~> 3, >= 3.0.1)
-      rubocop (~> 1.72, >= 1.72.1)
-      rubocop-rspec (~> 3.5)
     ruby-progressbar (1.13.0)
-    securerandom (0.4.1)
+    securerandom (0.3.1)
     syntax_tree (6.2.0)
       prettier_print (>= 1.2.0)
     tzinfo (2.0.6)
       concurrent-ruby (~> 1.0)
-    unicode-display_width (3.1.4)
+    unicode-display_width (2.6.0)
-      unicode-emoji (~> 4.0, >= 4.0.4)
-    unicode-emoji (4.0.4)
-    uri (1.0.3)
 
 PLATFORMS
   ruby
@@ -99,4 +83,4 @@ DEPENDENCIES
   syntax_tree
 
 BUNDLED WITH
-   2.6.8
+   2.5.21

README.md

@@ -1,3 +1,5 @@
-Horizon is a simple, beautiful theme that improves the out-of-the-box experience for Discourse sites.
+# next-gen
 
-https://meta.discourse.org/t/horizon-theme/360486
+**Theme Summary**
+
+For more information, please see: **url to meta topic**

about.json

@@ -1,137 +1,81 @@
 {
-  "name": "Horizon",
+  "name": "Horizon Theme",
   "authors": "Design Team",
-  "about_url": "https://meta.discourse.org/t/horizon-theme/360486",
+  "about_url": "TODO: Put your theme's public repo or Meta topic URL here",
-  "license_url": "https://github.com/discourse/horizon/blob/main/LICENSE",
+  "license_url": "TODO: Put your theme's LICENSE URL here",
-  "learn_more": "https://meta.discourse.org/t/installing-a-theme-or-theme-component/63682",
+  "learn_more": "TODO",
   "theme_version": "0.0.1",
+  "minimum_discourse_version": null,
+  "maximum_discourse_version": null,
+  "assets": {},
   "modifiers": {
-    "svg_icons": [
+    "svg_icons": ["fire"],
-      "fire"
-    ],
     "serialize_topic_is_hot": true
   },
+  "components": [
+    "https://github.com/discourse/discourse-sidebar-new-topic-button.git",
+    "https://github.com/discourse/discourse-full-width-component.git"
+  ],
   "color_schemes": {
     "Horizon": {
       "primary": "1A1A1A",
       "secondary": "ffffff",
-      "tertiary": "595bca",
+      "tertiary": "595bca"
-      "tertiary-med-or-tertiary": "595bca",
-      "selected": "d7dfff",
-      "header_background": "ffffff",
-      "header_primary": "1A1A1A",
-      "hover": "E1E8FF"
     },
     "Horizon Dark": {
       "primary": "ffffff",
       "secondary": "1A1A1A",
-      "tertiary": "595bca",
+      "tertiary": "595bca"
-      "tertiary-med-or-tertiary": "595bca",
-      "selected": "3b3e56",
-      "header_background": "1A1A1A",
-      "header_primary": "ffffff",
-      "hover": "333548"
     },
     "Royal": {
       "primary": "1A1A1A",
       "secondary": "ffffff",
-      "tertiary": "1F7BC1",
+      "tertiary": "4169e1"
-      "tertiary-med-or-tertiary": "1F7BC1",
-      "selected": "c7e3ff",
-      "header_background": "ffffff",
-      "header_primary": "1A1A1A",
-      "hover": "D6EBFF"
     },
     "Royal Dark": {
       "primary": "ffffff",
       "secondary": "1A1A1A",
-      "tertiary": "1F7BC1",
+      "tertiary": "4169e1"
-      "tertiary-med-or-tertiary": "1F7BC1",
-      "selected": "3a455f",
-      "header_background": "1A1A1A",
-      "header_primary": "ffffff",
-      "hover": "323B4E"
     },
     "Clover": {
       "primary": "1A1A1A",
       "secondary": "ffffff",
-      "tertiary": "39845B",
+      "tertiary": "45a06e"
-      "tertiary-med-or-tertiary": "39845B",
-      "selected": "c6f1d5",
-      "header_background": "ffffff",
-      "header_primary": "1A1A1A",
-      "hover": "D5F5E0"
     },
     "Clover Dark": {
       "primary": "ffffff",
       "secondary": "1A1A1A",
-      "tertiary": "39845B",
+      "tertiary": "45a06e"
-      "tertiary-med-or-tertiary": "39845B",
-      "selected": "47594e",
-      "header_background": "1A1A1A",
-      "header_primary": "ffffff",
-      "hover": "3C4A40"
     },
     "Lily": {
       "primary": "1A1A1A",
       "secondary": "ffffff",
-      "tertiary": "cc338c",
+      "tertiary": "cc338c"
-      "tertiary-med-or-tertiary": "cc338c",
-      "selected": "ffc8ee",
-      "header_background": "ffffff",
-      "header_primary": "1A1A1A",
-      "hover": "FFD7F3"
     },
     "Lily Dark": {
       "primary": "ffffff",
       "secondary": "1A1A1A",
-      "tertiary": "cc338c",
+      "tertiary": "cc338c"
-      "tertiary-med-or-tertiary": "cc338c",
-      "selected": "5f3e4e",
-      "header_background": "1A1A1A",
-      "header_primary": "ffffff",
-      "hover": "4E3640"
     },
     "Violet": {
       "primary": "1A1A1A",
       "secondary": "ffffff",
-      "tertiary": "9b15de",
+      "tertiary": "9b15de"
-      "tertiary-med-or-tertiary": "9b15de",
-      "selected": "feccff",
-      "header_background": "ffffff",
-      "header_primary": "1A1A1A",
-      "hover": "FFD9FF"
     },
     "Violet Dark": {
       "primary": "ffffff",
       "secondary": "1A1A1A",
-      "tertiary": "9b15de",
+      "tertiary": "9b15de"
-      "tertiary-med-or-tertiary": "9b15de",
-      "selected": "4c385c",
-      "header_background": "1A1A1A",
-      "header_primary": "ffffff",
-      "hover": "40314C"
     },
     "Marigold": {
       "primary": "1A1A1A",
       "secondary": "ffffff",
-      "tertiary": "d3881f",
+      "tertiary": "d3881f"
-      "tertiary-med-or-tertiary": "d3881f",
-      "selected": "ffdcb2",
-      "header_background": "ffffff",
-      "header_primary": "1A1A1A",
-      "hover": "FFE6C6"
     },
     "Marigold Dark": {
       "primary": "ffffff",
       "secondary": "1A1A1A",
-      "tertiary": "d3881f",
+      "tertiary": "d3881f"
-      "tertiary-med-or-tertiary": "d3881f",
+    }
-      "selected": "6c5b49",
-      "header_background": "1A1A1A",
-      "header_primary": "ffffff",
-      "hover": "584B3E"
   }
-  },
-  "screenshots": ["screenshots/light.png", "screenshots/dark.png"]
 }

common/color_definitions.scss

@@ -1,105 +0,0 @@
-html {
-  --accent-color: #{$tertiary} !important;
-  --accent-text-color: #fff;
-
-  // Background Colors
-  --background-color: light-dark(
-    oklch(from #{$tertiary} 96% calc(c * 0.125) h),
-    oklch(from #{$tertiary} 10% 0.025 h)
-  ) !important;
-  --d-content-background: light-dark(
-    oklch(from #{$secondary} calc(2 * l) c h),
-    oklch(from #{$secondary} l c h)
-  ) !important;
-
-  // HeaderColors
-  --header_primary-low-mid: light-dark(
-    oklch(from #{$tertiary} 73.5% calc(c * 0.5) h),
-    oklch(from #{$tertiary} l calc(c * 0.25) h)
-  ) !important;
-  --header_primary-medium: light-dark(
-    oklch(from #{$tertiary} 54% calc(c * 0.5) h),
-    oklch(from #{$tertiary} calc(l * 1.35) calc(c * 0.25) h)
-  ) !important;
-
-  // Sidebar Colors
-  --d-sidebar-border-color: light-dark(
-    oklch(from #{$tertiary} 88% calc(c * 0.25) h),
-    oklch(from #{$tertiary} calc(l * 0.7) calc(c * 0.25) h)
-  ) !important;
-  --d-sidebar-link-color: light-dark(
-    oklch(from #{$tertiary} calc(l * 0.8) calc(c * 0.25) h),
-    oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.25) h)
-  ) !important;
-  --d-sidebar-active-color: #{$primary} !important;
-  --d-sidebar-suffix-color: light-dark(
-    oklch(from #{$tertiary} l calc(c * 0.9) h),
-    oklch(from #{$tertiary} l calc(c * 0.9) h)
-  ) !important;
-
-  // Other Colors
-  --d-selected: light-dark(
-    oklch(from #{$tertiary} 92% calc(c * 0.5) h),
-    oklch(from #{$tertiary} calc(l * 0.7) calc(c * 0.25) h)
-  ) !important;
-  --d-nav-color--active: light-dark(
-    oklch(from #{$tertiary} l c h),
-    oklch(from #{$tertiary} calc(l * 1.2) c h)
-  ) !important;
-  --d-nav-color--hover: light-dark(
-    oklch(from #{$tertiary} l c h),
-    oklch(from #{$tertiary} calc(l * 1.2) c h)
-  ) !important;
-  --link-color: light-dark(
-    oklch(from #{$tertiary} l c h),
-    oklch(from #{$tertiary} calc(l * 0.95) c h)
-  ) !important;
-  --link-color-hover: light-dark(
-    oklch(from #{$tertiary} l c h),
-    oklch(from #{$tertiary} calc(l * 1.5) calc(c * 2.25) h)
-  ) !important;
-  --tertiary-hover: #{$tertiary} !important;
-
-  // Search Colors
-  --search-color: light-dark(
-    oklch(from #{$tertiary} l c h),
-    oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.25) h)
-  ) !important;
-
-  // Topic Card Colors
-  --topic-card-shadow: light-dark(
-    oklch(from #{$tertiary} calc(l * 1.85) calc(c * 0.5) h),
-    oklch(from #{$tertiary} calc(l * 0.2) calc(c * 0.01) h / 0.25)
-  ) !important;
-
-  // Button Colors
-  --button-box-shadow: light-dark(
-    oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.35) h),
-    oklch(from #{$tertiary} calc(l * 0.75) calc(c * 0.5) h)
-  ) !important;
-  --d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color) !important;
-  --d-sidebar-highlight-hover-background: var(--d-selected) !important;
-  --d-sidebar-link-icon-color: var(--d-sidebar-link-color) !important;
-  --d-sidebar-header-color: var(--d-sidebar-link-color) !important;
-  --d-sidebar-header-icon-color: var(--d-sidebar-link-color) !important;
-  --d-sidebar-active-suffix-color: var(--d-sidebar-suffix-color) !important;
-  --d-sidebar-background: var(--background-color) !important;
-  --d-sidebar-footer-fade: var(--background-color) !important;
-  --d-sidebar-prefix-background: var(--d-selected) !important;
-  --d-sidebar-active-prefix-background: light-dark(
-    oklch(from var(--d-selected) calc(l * 0.85) c h),
-    oklch(from var(--d-selected) calc(l * 0.7) c h)
-  ) !important;
-  --d-sidebar-highlight-prefix-background: light-dark(
-    oklch(from var(--d-selected) calc(l * 0.85) c h),
-    oklch(from var(--d-selected) calc(l * 0.7) c h)
-  ) !important;
-  --d-sidebar-highlight-suffix-color: var(
-    --d-sidebar-active-suffix-color
-  ) !important;
-  --d-sidebar-highlight-color: var(--primary) !important;
-  --d-sidebar-highlight-background: var(--d-selected) !important;
-  --d-sidebar-section-link-icon-size: 1em !important;
-  --d-hover: oklch(from var(--d-selected) l c h / 0.75) !important;
-  --d-input-bg-color: var(--d-content-background) !important;
-}

common/common.scss

@@ -2,18 +2,16 @@
 @import "buttons";
 @import "chat";
 @import "color-choice";
+@import "color-exploration";
 @import "composer";
-@import "composer-peek-mode";
 @import "header";
 @import "hiddenstuff";
-@import "login";
 @import "main";
 @import "misc";
 @import "mobile-stuff";
 @import "nav-pills";
-@import "welcome-banner";
+@import "search-banner";
 @import "sidebar";
-@import "sidebar-new-topic-button";
 @import "topic";
 @import "topic-cards";
 @import "variables";

common/head_tag.html

@@ -1,6 +0,0 @@
-<script>
-  if(!CSS.supports("(color: hsl(from white h s l))")){
-    window.unsupportedBrowser = true;
-    window.I18n.translations[I18n.locale].js.browser_update = 'The Horizon theme does not support your browser. Please update your browser, or <a href="?safe_mode=no_themes">switch to safe mode</a>.';
-  }
-</script>

desktop/desktop.scss

@@ -1,2 +1,63 @@
-@import "desktop-horizon-fixes";
+.bulk-select-enabled {
-@import "desktop-full-width";
+  .topic-list-header .topic-list-data.default {
+    position: sticky;
+    top: 10em;
+  }
+  .topic-author-avatar-data {
+    display: none;
+  }
+
+  .bulk-select.topic-list-data {
+    grid-area: bulk-select;
+    margin-left: -0.5em;
+
+    @media screen and (max-width: 576px) {
+      margin-top: 0;
+      label {
+        padding-block: 0.345em;
+      }
+    }
+
+    input {
+      transform: scale(1.5);
+    }
+  }
+}
+
+.topic-list-header {
+  tr {
+    border: none;
+  }
+
+  .topic-list-data {
+    padding: 0;
+
+    &:not(.default) {
+      display: none;
+    }
+
+    &.default {
+      position: absolute;
+      right: 0;
+      .bulk-select,
+      span:not(.bulk-select-topics, .d-button-label) {
+        display: none;
+      }
+    }
+  }
+
+  .bulk-select-topics {
+    position: absolute;
+    right: -1em;
+    @media screen and (max-width: 1048px) {
+      right: 0;
+    }
+
+    background: var(--secondary);
+    border-radius: 0 0 0 var(--d-border-radius);
+    padding: 1em;
+    button {
+      white-space: nowrap;
+    }
+  }
+}

javascripts/discourse/api-initializers/composer-peek-toggle-connector.js

@@ -1,6 +0,0 @@
-import { apiInitializer } from "discourse/lib/api";
-import ComposerPeekModeToggle from "../components/composer-peek-mode-toggle";
-
-export default apiInitializer("1.8.0", (api) => {
-  api.renderInOutlet("before-composer-toggles", ComposerPeekModeToggle);
-});

javascripts/discourse/api-initializers/full-width-logo-behavior.js

@@ -1,16 +0,0 @@
-import { apiInitializer } from "discourse/lib/api";
-
-export default apiInitializer("0.8", (api) => {
-  document.body.classList.add("full-width-enabled");
-
-  // When the sidebar is visible, force the HomeLogo to be in an 'un-minimized' state.
-  api.registerValueTransformer?.(
-    "home-logo-minimized",
-    ({ value, context }) => {
-      if (value && context.showSidebar) {
-        return false;
-      }
-      return value;
-    }
-  );
-});

javascripts/discourse/api-initializers/hamburger-click-outside-transformer.js

@@ -1,10 +0,0 @@
-import { apiInitializer } from "discourse/lib/api";
-
-export default apiInitializer("0.8", (api) => {
-  api.registerValueTransformer(
-    "hamburger-dropdown-click-outside-exceptions",
-    ({ value }) => {
-      return [...value, ".topic-drafts-menu-content"];
-    }
-  );
-});

javascripts/discourse/api-initializers/horizon.gjs

@@ -1,10 +1,12 @@
 import { apiInitializer } from "discourse/lib/api";
+import CustomColorHtmlClass from "../components/custom-color-html-class";
+import CustomUserPalette from "../components/custom-user-palette";
 import ExperimentalScreen from "../components/experimental-screen";
-import UserColorPaletteSelector from "../components/user-color-palette-selector";
 
 export default apiInitializer("1.8.0", (api) => {
   api.renderInOutlet("above-main-container", ExperimentalScreen);
-  api.renderInOutlet("sidebar-footer-actions", UserColorPaletteSelector);
+  api.renderInOutlet("above-main-container", CustomColorHtmlClass);
+  api.renderInOutlet("sidebar-footer-actions", CustomUserPalette);
 
   api.registerValueTransformer("site-setting-enable-welcome-banner", () => {
     return settings.enable_welcome_banner;

javascripts/discourse/api-initializers/sidebar-new-topic-button-connector.js

@@ -1,6 +0,0 @@
-import { apiInitializer } from "discourse/lib/api";
-import SidebarNewTopicButton from "../components/sidebar-new-topic-button";
-
-export default apiInitializer("1.8.0", (api) => {
-  api.renderInOutlet("before-sidebar-sections", SidebarNewTopicButton);
-});

javascripts/discourse/components/card/topic-activity-column.gjs

@@ -1,56 +1,42 @@
 import Component from "@glimmer/component";
 import avatar from "discourse/helpers/avatar";
-import concatClass from "discourse/helpers/concat-class";
-import icon from "discourse/helpers/d-icon";
 import formatDate from "discourse/helpers/format-date";
 import { i18n } from "discourse-i18n";
+import gt from "truth-helpers/helpers/gt";
 
 export default class TopicActivityColumn extends Component {
-  get topicUser() {
+  get activityText() {
+    // this should handle any case where a topic was no bumped due to a reply/post
     if (
       moment(this.args.topic.bumped_at).isAfter(this.args.topic.last_posted_at)
     ) {
-      return {
+      return "user_updated";
-        user: undefined,
-        username: undefined,
-        activityText: "user_updated",
-        class: "--updated",
-      };
     }
 
     if (this.args.topic.posts_count > 1) {
-      return {
+      return "user_replied";
-        user: this.args.topic.lastPosterUser,
-        username: this.args.topic.last_poster_username,
-        activityText: "user_replied",
-        class: "--replied",
-      };
     } else if (this.args.topic.posts_count === 1) {
-      return {
+      return "user_posted";
-        user: this.args.topic.creator,
-        username: this.args.topic.creator.username,
-        activityText: "user_posted",
-        class: "--posted",
-      };
     }
   }
 
   <template>
-    <span class={{concatClass "topic-activity" this.topicUser.class}}>
+    <span class="topic-activity">
       <div class="topic-activity__user">
-        {{#if this.topicUser.user}}
+        {{#if (gt @topic.replyCount 1)}}
-          {{avatar this.topicUser.user imageSize="small"}}
+          {{avatar @topic.lastPosterUser imageSize="small"}}
-        {{else}}
-          {{icon "pencil"}}
-        {{/if}}
-      </div>
-      {{#if this.topicUser.username}}
           <span
             class="topic-activity__username"
-        >{{this.topicUser.username}}</span>
+          >@{{@topic.last_poster_username}}</span>
+        {{else}}
+          {{avatar @topic.creator imageSize="small"}}
+          <span
+            class="topic-activity__username"
+          >@{{@topic.creator.username}}</span>
         {{/if}}
+      </div>
       <div class="topic-activity__reason">
-        {{i18n (themePrefix this.topicUser.activityText)}}
+        {{i18n (themePrefix this.activityText)}}
       </div>
       <div class="topic-activity__time">
         {{formatDate

javascripts/discourse/components/card/topic-author-avatar-column.gjs

@@ -0,0 +1,9 @@
+import avatar from "discourse/helpers/avatar";
+
+const TopicAuthorAvatarColumn = <template>
+  <span class="topic-author-avatar">
+    {{avatar @topic.creator imageSize="large"}}
+  </span>
+</template>;
+
+export default TopicAuthorAvatarColumn;

javascripts/discourse/components/card/topic-author-column.gjs

@@ -0,0 +1,5 @@
+const TopicAuthorColumn = <template>
+  <span class="topic-author">@{{@topic.creator.username}}</span>
+</template>;
+
+export default TopicAuthorColumn;

javascripts/discourse/components/card/topic-replies-column.gjs

@@ -3,7 +3,7 @@ import gt from "truth-helpers/helpers/gt";
 
 const TopicRepliesColumn = <template>
   {{#if (gt @topic.replyCount 1)}}
-    <span class="topic-replies">{{icon "reply"}}{{@topic.posts_count}}</span>
+    <span class="topic-replies">{{icon "reply"}}{{@topic.replyCount}}</span>
   {{/if}}
 </template>;
 

javascripts/discourse/components/composer-peek-mode-toggle.gjs

@@ -1,37 +0,0 @@
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
-import { service } from "@ember/service";
-import DButton from "discourse/components/d-button";
-import bodyClass from "discourse/helpers/body-class";
-
-export default class ComposerPeekModeToggle extends Component {
-  @service composer;
-  @service keyValueStore;
-
-  @tracked
-  peekModeActive = this.keyValueStore.getItem("peekModeActive") === "true";
-
-  get bodyCssClass() {
-    return this.peekModeActive ? "peek-mode-active" : "";
-  }
-
-  @action
-  togglePeekMode() {
-    this.peekModeActive = !this.peekModeActive;
-    this.keyValueStore.setItem("peekModeActive", this.peekModeActive);
-    if (this.composer.showPreview) {
-      this.composer.togglePreview();
-    }
-  }
-
-  <template>
-    {{bodyClass this.bodyCssClass}}
-    <DButton
-      @action={{this.togglePeekMode}}
-      @preventFocus={{true}}
-      @icon="discourse-sidebar"
-      class="btn-mini-toggle no-text peek-mode-toggle btn-transparent"
-    />
-  </template>
-}

javascripts/discourse/components/custom-color-html-class.gjs

@@ -0,0 +1,12 @@
+import Component from "@glimmer/component";
+import { concat } from "@ember/helper";
+import { service } from "@ember/service";
+import htmlClass from "discourse/helpers/html-class";
+
+export default class CustomColorHtmlClass extends Component {
+  @service customColor;
+
+  <template>
+    {{htmlClass (concat "custom-color-" this.customColor.color)}}
+  </template>
+}

javascripts/discourse/components/custom-user-palette.gjs

@@ -0,0 +1,60 @@
+import icon from "discourse/helpers/d-icon";
+import DMenu from "float-kit/components/d-menu";
+import SitePaletteMenuItem from "./site-palette-menu-item";
+
+const PALETTES = [
+  {
+    label: "Marigold",
+    name: "marigold",
+    color: "#d3881f",
+  },
+  {
+    label: "Violet",
+    name: "violet",
+    color: "#9b15de",
+  },
+  {
+    label: "Lily",
+    name: "lily",
+    color: "#CC336F",
+  },
+  {
+    label: "Clover",
+    name: "clover",
+    color: "#45a06e",
+  },
+  {
+    label: "Royal",
+    name: "royal",
+    color: "#4169e1",
+  },
+  {
+    label: "Horizon",
+    name: "horizon",
+    color: "#595bca",
+  },
+];
+
+export const DEFAULT_PALETTE_NAME = "horizon";
+
+<template>
+  <DMenu
+    @identifier="user-color-palette"
+    @placementStrategy="fixed"
+    class="btn-flat user-color-palette sidebar-footer-actions-button"
+    @inline={{true}}
+  >
+    <:trigger>
+      {{icon "paintbrush"}}
+    </:trigger>
+    <:content>
+      <div class="color-palette-menu">
+        <div class="color-palette-menu__content">
+          {{#each PALETTES as |colorPalette|}}
+            <SitePaletteMenuItem @colorPalette={{colorPalette}} />
+          {{/each}}
+        </div>
+      </div>
+    </:content>
+  </DMenu>
+</template>

javascripts/discourse/components/experimental-screen.gjs

@@ -2,15 +2,10 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
-import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import { bind } from "discourse/lib/decorators";
 
-const DO_NOT_RENDER_LIST = ["login"];
-
 export default class ExperimentalScreen extends Component {
-  @service router;
-
   @tracked left = 0;
   @tracked right = 0;
   resizeObserver;
@@ -33,10 +28,6 @@ export default class ExperimentalScreen extends Component {
     );
   }
 
-  get shouldRender() {
-    return !DO_NOT_RENDER_LIST.includes(this.router.currentRouteName);
-  }
-
   @action
   onInsert(element) {
     this.calculateDistance(element);
@@ -51,7 +42,6 @@ export default class ExperimentalScreen extends Component {
   }
 
   <template>
-    {{#if this.shouldRender}}
     <ul
       class="experimental-screen"
       {{didInsert this.onInsert}}
@@ -63,6 +53,5 @@ export default class ExperimentalScreen extends Component {
       <li class="experimental-screen__bottom-right"></li>
       <li class="experimental-screen__bottom-bar"></li>
     </ul>
-    {{/if}}
   </template>
 }

javascripts/discourse/components/sidebar-new-topic-button.gjs

@@ -1,117 +0,0 @@
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
-import didInsert from "@ember/render-modifiers/modifiers/did-insert";
-import didUpdate from "@ember/render-modifiers/modifiers/did-update";
-import willDestroy from "@ember/render-modifiers/modifiers/will-destroy";
-import { service } from "@ember/service";
-import { gt } from "truth-helpers";
-import CreateTopicButton from "discourse/components/create-topic-button";
-import not from "truth-helpers/helpers/not";
-
-export default class SidebarNewTopicButton extends Component {
-  @service composer;
-  @service currentUser;
-  @service siteSettings;
-  @service router;
-  @service header;
-  @service appEvents;
-
-  @tracked category;
-  @tracked tag;
-
-  get shouldRender() {
-    return this.currentUser && !this.router.currentRouteName.includes("admin");
-  }
-
-  get canCreateTopic() {
-    return this.currentUser?.can_create_topic;
-  }
-
-  get draftCount() {
-    return this.currentUser?.get("draft_count");
-  }
-
-  get createTopicTargetCategory() {
-    if (this.category?.canCreateTopic) {
-      return this.category;
-    }
-
-    if (this.siteSettings.default_subcategory_on_read_only_category) {
-      return this.category?.subcategoryWithCreateTopicPermission;
-    }
-  }
-
-  get tagRestricted() {
-    return this.tag?.staff;
-  }
-
-  get createTopicDisabled() {
-    return (
-      (this.category && !this.createTopicTargetCategory) ||
-      (this.tagRestricted && !this.currentUser.staff)
-    );
-  }
-
-  get categoryReadOnlyBanner() {
-    if (this.category && this.currentUser && this.createTopicDisabled) {
-      return this.category.read_only_banner;
-    }
-  }
-
-  get createTopicClass() {
-    const baseClasses = "btn-default sidebar-new-topic-button";
-    return this.categoryReadOnlyBanner
-      ? `${baseClasses} disabled`
-      : baseClasses;
-  }
-
-  @action
-  createNewTopic() {
-    this.composer.openNewTopic({ category: this.category, tags: this.tag?.id });
-  }
-
-  @action
-  getCategoryandTag() {
-    this.category = this.router.currentRoute.attributes?.category || null;
-    this.tag = this.router.currentRoute.attributes?.tag || null;
-  }
-
-  @action
-  watchForComposer() {
-    // this covers opening drafts from the hamburger menu
-    this.appEvents.on("composer:will-open", this, this.closeHamburger);
-  }
-
-  @action
-  stopWatchingForComposer() {
-    this.appEvents.off("composer:will-open", this, this.closeHamburger);
-  }
-
-  @action
-  closeHamburger() {
-    this.header.hamburgerVisible = false;
-  }
-
-  <template>
-    {{#if this.shouldRender}}
-      <div
-        class="sidebar-new-topic-button__wrapper"
-        {{didInsert this.getCategoryandTag}}
-        {{didUpdate this.getCategoryandTag this.router.currentRoute}}
-        {{didInsert this.watchForComposer}}
-        {{willDestroy this.stopWatchingForComposer}}
-      >
-        <CreateTopicButton
-          @canCreateTopic={{this.canCreateTopic}}
-          @action={{this.createNewTopic}}
-          @disabled={{this.createTopicDisabled}}
-          @label="topic.create"
-          @btnClass={{this.createTopicClass}}
-          @canCreateTopicOnTag={{not this.tagRestricted}}
-          @showDrafts={{gt this.draftCount 0}}
-        />
-      </div>
-    {{/if}}
-  </template>
-}

javascripts/discourse/components/site-palette-menu-item.gjs

@@ -1,43 +1,40 @@
 import Component from "@glimmer/component";
+import { fn } from "@ember/helper";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import DButton from "discourse/components/d-button";
 import concatClass from "discourse/helpers/concat-class";
 
-export default class UserColorPaletteMenuItem extends Component {
+export default class SitePaletteMenuItem extends Component {
-  @service site;
+  @service customColor;
-  @service session;
 
   get siteStyle() {
-    return `--icon-color: ${this.args.colorPalette.accent}`;
+    return `--icon-color: ${this.args.colorPalette.color}`;
   }
 
   get activeClass() {
-    if (this.args.selectedColorPaletteId === this.args.colorPalette.id) {
+    if (this.customColor.color === this.args.colorPalette.name) {
       return "active";
     }
   }
 
   @action
-  paletteSelected() {
+  handleInput(colorPalette) {
-    this.args.paletteSelected(this.args.colorPalette);
+    this.customColor.setColor(colorPalette.name);
   }
 
   <template>
-    <div
+    <div class="color-palette-menu__item" data-color={{@colorPalette.name}}>
-      class="user-color-palette-menu__item"
-      data-color-palette={{@colorPalette.name}}
-    >
       <DButton
         class={{concatClass
-          "btn-flat user-color-palette-menu__item-choice"
+          "btn-flat color-palette-menu__item-choice"
           this.activeClass
         }}
         style={{htmlSafe this.siteStyle}}
         @icon="circle"
-        @translatedLabel={{@colorPalette.name}}
+        @translatedLabel={{@colorPalette.label}}
-        @action={{this.paletteSelected}}
+        @action={{fn this.handleInput @colorPalette}}
       />
     </div>
   </template>

javascripts/discourse/components/user-color-palette-selector.gjs

@@ -1,210 +0,0 @@
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
-import { service } from "@ember/service";
-import { isEmpty } from "@ember/utils";
-import { Promise } from "rsvp";
-import concatClass from "discourse/helpers/concat-class";
-import icon from "discourse/helpers/d-icon";
-import { reload } from "discourse/helpers/page-reloader";
-import { ajax } from "discourse/lib/ajax";
-import {
-  listColorSchemes,
-  updateColorSchemeCookie,
-} from "discourse/lib/color-scheme-picker";
-import cookie from "discourse/lib/cookie";
-import DMenu from "float-kit/components/d-menu";
-import UserColorPaletteMenuItem from "./user-color-palette-menu-item";
-
-const HORIZON_PALETTES = [
-  "Horizon",
-  "Marigold",
-  "Violet",
-  "Lily",
-  "Clover",
-  "Royal",
-];
-
-export default class UserColorPaletteSelector extends Component {
-  @service currentUser;
-  @service keyValueStore;
-  @service site;
-  @service session;
-  @service interfaceColor;
-
-  @tracked anonColorPaletteId = this.#loadAnonColorPalette();
-  @tracked userColorPaletteId = this.session.userColorSchemeId;
-  @tracked cssLoaded = true;
-
-  get userColorPalettes() {
-    const availablePalettes = listColorSchemes(this.site)
-      ?.map((userPalette) => {
-        return {
-          ...userPalette,
-          accent: `#${
-            userPalette.colors.find((color) => color.name === "tertiary").hex
-          }`,
-        };
-      })
-      .filter((userPalette) => {
-        return HORIZON_PALETTES.some((palette) => {
-          return userPalette.name.toLowerCase().includes(palette.toLowerCase());
-        });
-      })
-      .sort();
-
-    // Match the light scheme with the corresponding dark id based in the name
-    return (
-      availablePalettes
-        ?.map((palette) => {
-          if (palette.is_dark) {
-            return palette;
-          }
-
-          const normalizedLightName = palette.name.toLowerCase();
-
-          const correspondingDarkModeId = availablePalettes.find(
-            (item) =>
-              item.is_dark &&
-              normalizedLightName ===
-                item.name.toLowerCase().replace(/\s+dark$/, "")
-          )?.id;
-
-          return {
-            ...palette,
-            correspondingDarkModeId,
-          };
-        })
-        // Only want to show palettes that have corresponding light/dark modes
-        .filter((palette) => !palette.is_dark)
-    );
-  }
-
-  get selectedColorPaletteId() {
-    if (this.currentUser) {
-      return this.userColorPaletteId;
-    }
-
-    return this.anonColorPaletteId;
-  }
-
-  @action
-  onRegisterMenu(api) {
-    this.dMenu = api;
-  }
-
-  @action
-  paletteSelected(selectedPalette) {
-    if (selectedPalette.id === this.selectedColorPaletteId) {
-      return;
-    }
-
-    this.#updatePreference(selectedPalette);
-    this.#changeSiteColorPalette(selectedPalette);
-    this.dMenu.close();
-  }
-
-  #updatePreference(selectedPalette) {
-    updateColorSchemeCookie(selectedPalette.id);
-    updateColorSchemeCookie(selectedPalette.correspondingDarkModeId, {
-      dark: true,
-    });
-
-    if (!this.currentUser) {
-      this.anonColorPaletteId = selectedPalette.id;
-    } else {
-      this.userColorPaletteId = selectedPalette.id;
-    }
-  }
-
-  #loadAnonColorPalette() {
-    const storedAnonPaletteId = cookie("color_scheme_id");
-    if (storedAnonPaletteId) {
-      return parseInt(storedAnonPaletteId, 10);
-    }
-  }
-
-  async #changeSiteColorPalette(colorPalette) {
-    this.cssLoaded = false;
-
-    const lightPaletteId = colorPalette.id;
-    const darkPaletteId = colorPalette.correspondingDarkModeId;
-    const darkTag = document.querySelector("link.dark-scheme");
-
-    // TODO(osama) once we have built-in light/dark modes for each palette, we
-    // can stop making the 2nd ajax call for the dark palette and replace it
-    // with a include_dark_scheme param on the ajax call for the light
-    // palette which will include the href for the dark palette in the response
-    if (!darkTag) {
-      reload();
-      return;
-    }
-
-    const lightPaletteInfo = await ajax(
-      `/color-scheme-stylesheet/${lightPaletteId}/${colorPalette.theme_id}.json`
-    );
-    const darkPaletteInfo = await ajax(
-      `/color-scheme-stylesheet/${darkPaletteId}/${colorPalette.theme_id}.json`
-    );
-
-    Promise.all([
-      this.#preloadAndSwapCSS(lightPaletteInfo.new_href, "light-scheme"),
-      this.#preloadAndSwapCSS(darkPaletteInfo.new_href, "dark-scheme"),
-    ]).then(() => {
-      this.cssLoaded = true;
-    });
-  }
-
-  #preloadAndSwapCSS(newHref, existingLinkClass) {
-    return new Promise((resolve) => {
-      const existingLink = document.querySelector(
-        `link[rel='stylesheet'].${existingLinkClass}`
-      );
-      const newTag = document.createElement("link");
-
-      newTag.rel = "preload";
-      newTag.href = newHref;
-      newTag.as = "style";
-      newTag.onload = () => {
-        existingLink.href = newHref;
-        newTag.remove();
-        resolve();
-      };
-
-      document.head.appendChild(newTag);
-    });
-  }
-
-  <template>
-    {{#unless (isEmpty this.userColorPalettes)}}
-      <DMenu
-        @identifier="user-color-palette-selector"
-        @placementStrategy="fixed"
-        @onRegisterApi={{this.onRegisterMenu}}
-        class={{concatClass
-          "btn-flat user-color-palette-selector sidebar-footer-actions-button"
-          (if this.cssLoaded "user-color-palette-css-loaded")
-        }}
-        data-selected-color-palette-id={{this.selectedColorPaletteId}}
-        @inline={{true}}
-      >
-        <:trigger>
-          {{icon "paintbrush"}}
-        </:trigger>
-        <:content>
-          <div class="user-color-palette-menu">
-            <div class="user-color-palette-menu__content">
-              {{#each this.userColorPalettes as |colorPalette|}}
-                <UserColorPaletteMenuItem
-                  @selectedColorPaletteId={{this.selectedColorPaletteId}}
-                  @colorPalette={{colorPalette}}
-                  @paletteSelected={{this.paletteSelected}}
-                />
-              {{/each}}
-            </div>
-          </div>
-        </:content>
-      </DMenu>
-    {{/unless}}
-  </template>
-}

javascripts/discourse/initializers/topic-list-columns.gjs

@@ -33,12 +33,15 @@ const TopicLikesReplies = <template>
 export default {
   name: "topic-list-customizations",
 
-  initialize(container) {
+  initialize() {
-    const router = container.lookup("service:router");
     withPluginApi("1.39.0", (api) => {
       api.registerValueTransformer(
         "topic-list-columns",
         ({ value: columns }) => {
+          columns.add("topic-activity", {
+            item: TopicActivity,
+            after: "title",
+          });
           columns.add("topic-status", {
             item: TopicStatus,
             after: "topic-author",
@@ -47,21 +50,14 @@ export default {
             item: TopicCategory,
             after: "topic-status",
           });
-
           columns.add("topic-likes-replies", {
             item: TopicLikesReplies,
             after: "topic-author-avatar",
           });
+          columns.delete("posters");
           columns.delete("views");
           columns.delete("replies");
-          if (!router.currentRouteName.includes("userPrivateMessages")) {
-            columns.add("topic-activity", {
-              item: TopicActivity,
-              after: "title",
-            });
-            columns.delete("posters");
           columns.delete("activity");
-          }
           return columns;
         }
       );
@@ -83,34 +79,6 @@ export default {
       api.registerValueTransformer("topic-list-item-mobile-layout", () => {
         return false;
       });
-
-      api.registerBehaviorTransformer(
-        "topic-list-item-click",
-        ({ context: { event }, next }) => {
-          if (event.target.closest("a, button, input")) {
-            return next();
-          }
-
-          event.preventDefault();
-          event.stopPropagation();
-
-          const topicLink = event.target
-            .closest("tr")
-            .querySelector("a.raw-topic-link");
-
-          // Redespatch the click on the topic link, so that all key-handing is sorted
-          topicLink.dispatchEvent(
-            new MouseEvent("click", {
-              ctrlKey: event.ctrlKey,
-              metaKey: event.metaKey,
-              shiftKey: event.shiftKey,
-              button: event.button,
-              bubbles: true,
-              cancelable: true,
-            })
-          );
-        }
-      );
     });
   },
 };

javascripts/discourse/services/custom-color.gjs

@@ -0,0 +1,18 @@
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import Service, { service } from "@ember/service";
+import { DEFAULT_PALETTE_NAME } from "../components/custom-user-palette";
+
+const CUSTOM_COLOR_KEY = "d-custom-color-preference";
+
+export default class CustomColor extends Service {
+  @service keyValueStore;
+  @tracked
+  color = this.keyValueStore.getItem(CUSTOM_COLOR_KEY) || DEFAULT_PALETTE_NAME;
+
+  @action
+  setColor(color) {
+    this.color = color;
+    this.keyValueStore.setItem(CUSTOM_COLOR_KEY, color);
+  }
+}

locales/en.yml

@@ -6,3 +6,4 @@ en:
   user_replied: "replied"
   user_posted: "posted"
   user_updated: "updated"
+

package.json

@@ -1,14 +1,13 @@
 {
   "private": true,
   "devDependencies": {
-    "@discourse/lint-configs": "2.11.1",
+    "@discourse/lint-configs": "2.4.0",
-    "ember-template-lint": "7.0.1",
+    "ember-template-lint": "6.1.0",
-    "eslint": "9.22.0",
+    "eslint": "9.19.0",
-    "prettier": "3.5.3",
+    "prettier": "2.8.8"
-    "stylelint": "16.16.0"
   },
   "engines": {
-    "node": ">= 22",
+    "node": ">= 18",
     "npm": "please-use-pnpm",
     "yarn": "please-use-pnpm",
     "pnpm": "9.x"

scss/box-view.scss

@@ -18,48 +18,38 @@
 }
 
 .has-full-page-chat .chat-replying-indicator-container {
-  margin-bottom: var(--main-grid-gap);
+  margin-bottom: var(--d-border-radius-large);
-
   @include breakpoint(medium) {
     margin-bottom: 0;
   }
 }
 
 .has-full-page-chat .chat-selection-management {
-  margin-bottom: var(--main-grid-gap);
+  margin-bottom: var(--d-border-radius-large);
-
   @include breakpoint(medium) {
     margin-bottom: 0;
   }
 }
 
 .experimental-screen {
+  @include breakpoint(medium) {
+    display: none;
+  }
   max-width: unset !important;
+  @media screen and (max-width: 488px) {
+    display: none;
+  }
   width: 100%;
   display: block;
   margin: 0;
   padding: 0;
   position: relative;
   container: content-width / inline-size;
-
-  @include breakpoint(medium) {
-    display: none;
-  }
-
-  @media screen and (max-width: 488px) {
-    display: none;
-  }
-
-  @include breakpoint(tablet) {
-    display: none;
-  }
-
   li {
     list-style: none;
     margin: 0;
     padding: 0;
   }
-
   &__top-left,
   &__top-right,
   &__bottom-left,
@@ -69,45 +59,38 @@
     height: var(--d-border-radius-large);
     background-color: var(--background-color);
     z-index: 399;
-    mask: radial-gradient(
+    -webkit-mask: radial-gradient(
       circle at var(--d-border-radius-large) var(--d-border-radius-large),
       transparent var(--d-border-radius-large),
       transparent var(--d-border-radius-large),
       black var(--d-border-radius-large)
     );
   }
-
   &__top-left {
     top: var(--header-offset);
     left: var(--left-distance);
   }
-
   &__top-right {
     top: var(--header-offset);
     transform: rotate(90deg);
     left: calc(var(--right-distance) - var(--d-border-radius-large));
   }
-
   &__bottom-left {
     transform: rotate(-90deg);
-    bottom: var(--main-grid-gap);
+    bottom: var(--d-border-radius-large);
     left: var(--left-distance);
-
     @media screen and (max-width: 768px) {
       bottom: calc(var(--d-border-radius-large) * 2);
     }
   }
-
   &__bottom-right {
     transform: rotate(180deg);
-    bottom: var(--main-grid-gap);
+    bottom: var(--d-border-radius-large);
     left: calc(var(--right-distance) - var(--d-border-radius-large));
-
     @media screen and (max-width: 768px) {
       bottom: calc(var(--d-border-radius-large) * 2);
     }
   }
-
   &__bottom-bar {
     position: fixed;
     width: 100%;
@@ -115,48 +98,16 @@
     background-color: var(--background-color);
     bottom: 0;
     left: var(--left-distance);
-    height: var(--main-grid-gap);
+    height: var(--d-border-radius-large);
-
     @media screen and (max-width: 768px) {
       height: calc(var(--d-border-radius-large) * 2);
     }
-
     @container content-width (width > 1px) {
       width: 100cqw;
     }
   }
 }
 
-.rtl .experimental-screen {
-  &__top-left {
-    right: var(--left-distance);
-    left: unset;
-  }
-
-  &__top-right {
-    transform: rotate(-90deg) !important;
-    right: calc(var(--right-distance) - var(--d-border-radius-large));
-    left: unset;
-  }
-
-  &__bottom-left {
-    transform: rotate(90deg);
-    right: var(--left-distance);
-    left: unset;
-  }
-
-  &__bottom-right {
-    transform: rotate(180deg);
-    left: unset;
-    right: calc(var(--right-distance) - var(--d-border-radius-large));
-  }
-
-  &__bottom-bar {
-    right: var(--left-distance);
-    left: unset;
-  }
-}
-
 @media screen and (min-width: 768px) {
   .with-topic-progress {
     bottom: calc(

scss/buttons.scss

@@ -8,13 +8,11 @@
 
 .sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger.btn.no-text {
   background: var(--accent-color);
-
   &:hover,
   &:focus-visible {
     background: oklch(from var(--accent-color) 40% c h) !important;
     box-shadow: none;
   }
-
   .d-icon {
     color: var(--accent-text-color);
   }
@@ -28,37 +26,31 @@
 .discourse-no-touch .btn-default,
 .discourse-no-touch .select-kit .select-kit-header.btn-default {
   background: var(--primary-100);
-
   .d-icon {
     color: var(--accent-color);
   }
 
   &:hover {
     border-color: transparent;
-    box-shadow: 0 0 8px 1px var(--button-box-shadow);
+    box-shadow: 0px 0px 8px 1px var(--button-box-shadow);
     background: var(--d-content-background);
     color: var(--accent-color);
-
     .d-icon {
       color: var(--accent-color);
     }
   }
-
   &:focus-visible {
     background: var(--d-content-background);
     color: var(--accent-color);
-    box-shadow: 0 0 0 3px var(--button-box-shadow);
+    box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
-
     .d-icon {
       color: var(--accent-color);
     }
   }
-
   &:active:not(:hover, :focus) {
     color: var(--primary);
     background: var(--tertiary-300);
     background-image: none;
-
     .d-icon {
       color: var(--tertiary-high);
     }
@@ -66,45 +58,30 @@
 }
 
 .btn-primary,
-#create-topic.btn,
+#create-topic.btn {
-.discourse-no-touch .btn-default.ai-new-question-button {
   background-color: var(--accent-color);
   color: var(--accent-text-color);
-
   .d-icon {
     color: var(--accent-text-color);
   }
-
   &:hover {
     .discourse-no-touch & {
-      background: light-dark(
+      background: oklch(from var(--accent-color) 40% c h) !important;
-        oklch(from var(--accent-color) 40% c h),
+      box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
-        oklch(from var(--accent-color) 50% c h)
-      );
-      box-shadow: 0 0 6px 1px var(--button-box-shadow);
       color: var(--accent-text-color);
-
       .d-icon {
         color: var(--accent-text-color);
       }
     }
   }
-
   &:focus-visible {
     .discourse-no-touch & {
-      background: light-dark(
+      background: oklch(from var(--accent-color) 40% c h) !important;
-        oklch(from var(--accent-color) 40% c h),
+      box-shadow: 0px 0px 0px 4px var(--button-box-shadow);
-        oklch(from var(--accent-color) 50% c h)
-      );
-      box-shadow: 0 0 0 4px var(--button-box-shadow);
       color: var(--accent-text-color);
     }
   }
-
   &:active {
-    background: light-dark(
+    background: oklch(from var(--accent-color) 30% c h) !important;
-      oklch(from var(--accent-color) 40% c h),
-      oklch(from var(--accent-color) 50% c h)
-    );
   }
 }

scss/chat.scss

@@ -1,5 +1,3 @@
-@use "lib/viewport";
-
 .full-page-chat.full-page-chat-sidebar-enabled {
   border: none;
 }
@@ -15,9 +13,8 @@ body.has-full-page-chat {
 
 .chat-drawer-container {
   .is-expanded & {
-    box-shadow: 0 0 0 2px var(--tertiary-medium);
+    box-shadow: 0px 0px 0px 2px var(--d-chat-border);
   }
-
   .chat-drawer.is-expanded & {
     border: none;
   }
@@ -25,29 +22,13 @@ body.has-full-page-chat {
 
 .chat-drawer-outlet-container {
   z-index: z("composer", "content");
-
-  .peek-mode-active & {
-    padding-bottom: 0;
-    left: unset;
-    right: var(--main-grid-gap);
-
-    &:has(.is-expanded) {
-      z-index: calc(z("composer", "dropdown") + 1);
-    }
-  }
-}
-
-.chat-drawer {
-  .peek-mode-active & {
-    max-width: 90vw;
-  }
 }
 
 .chat-drawer .channels-list-container .chat-channel-row {
   margin-bottom: var(--spacing-block-xs);
   font-size: var(--font-up-1);
+  border-radius: var(--d-border-radius);
   border-bottom: none;
-
   &:hover {
     background-color: var(--d-sidebar-active-background);
   }
@@ -72,11 +53,5 @@ body.has-full-page-chat {
 }
 
 .chat-drawer-active.chat-drawer-expanded .chat-composer-dropdown__menu-content {
-  z-index: z("modal", "dialog");
+  z-index: z("composer", "content") + 1;
-}
-
-.chat-replying-indicator-container {
-  @include viewport.from(sm) {
-    margin-left: calc(0.65em + 0.2rem);
-  }
 }

scss/color-choice.scss

@@ -1,24 +1,20 @@
-.user-color-palette-menu {
+.color-palette-menu {
   &__item .btn-icon-text.btn-flat {
     background-color: var(--d-content-background);
     width: 100%;
     justify-content: flex-start;
   }
-
   &__item .btn-icon-text.btn-flat:hover {
     background-color: var(--d-selected);
     box-shadow: none;
     color: var(--primary);
   }
-
   &__item .btn-icon-text.btn-flat:hover svg {
     color: var(--icon-color);
   }
-
   &__item .btn-icon-text.btn-flat svg {
     color: var(--icon-color);
   }
-
   &__item-choice.active.btn-icon-text.btn-flat {
     background-color: var(--d-selected);
   }
@@ -27,3 +23,27 @@
 .user-color-palette-content .fk-d-menu__inner-content {
   border: none;
 }
+
+html.custom-color-horizon {
+  --accent-base-color: #595bca;
+}
+
+html.custom-color-marigold {
+  --accent-base-color: #d3881f;
+}
+
+html.custom-color-violet {
+  --accent-base-color: #9b15de;
+}
+
+html.custom-color-lily {
+  --accent-base-color: #cc338c;
+}
+
+html.custom-color-clover {
+  --accent-base-color: #45a06e;
+}
+
+html.custom-color-royal {
+  --accent-base-color: #4169e1;
+}

scss/color-exploration.scss

@@ -1,12 +1,108 @@
 :root {
+  --accent-base-color: #595bca;
+  --accent-color: light-dark(
+    var(--accent-base-color),
+    oklch(from var(--accent-base-color) calc(l * 0.95) c h)
+  );
+  //   --background-color: light-dark(#f5f8ff, #101112);
+  --background-color: light-dark(
+    oklch(from var(--accent-color) 98% calc(c * 0.25) h),
+    oklch(from var(--accent-color) 10% 0.025 h)
+  );
+  --header_primary-low-mid: light-dark(
+    oklch(from var(--background-color) calc(l * 0.75) calc(c * 2) h),
+    oklch(from var(--accent-color) calc(l * 1) calc(c * 0.25) h)
+  );
+  --header_primary-medium: light-dark(
+    oklch(from var(--background-color) calc(l * 0.55) calc(c * 2) h),
+    oklch(from var(--accent-color) calc(l * 1.35) calc(c * 0.25) h)
+  );
+  --d-content-background: light-dark(
+    oklch(from var(--accent-color) calc(l * 2) 0 h),
+    oklch(from var(--accent-color) calc(l * 0.375) 0 h)
+  );
+  --primary-100: light-dark(#f2f2f2, #333333);
+  --primary-300: light-dark(#d1d1d1, #838383);
+  --primary-low: light-dark(#e9e9e9, #313131);
+  --primary-high: light-dark(#646464, #a6a6a6);
+  --primary-very-high: light-dark(#434343, #c7c7c7);
+  --d-hover: oklch(from var(--d-selected) l c h / 0.75);
+  --tertiary: var(--accent-color);
+  --tertiary-medium: light-dark(
+    oklch(from var(--accent-color) calc(l * 1.25) calc(c * 0.25) h),
+    oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.25) h)
+  );
+  --tertiary-very-low: light-dark(
+    oklch(from var(--accent-color) calc(l * 1.75) calc(c * 0.25) h),
+    oklch(from var(--accent-color) calc(l * 0.5) calc(c * 0.25) h)
+  );
+  --tertiary-med-or-tertiary: var(--accent-color);
+  --tertiary-low: light-dark(
+    oklch(from var(--accent-color) calc(l * 1.6) calc(c * 0.25) h),
+    oklch(from var(--accent-color) calc(l * 0.6) calc(c * 0.25) h)
+  );
+  --tertiary-300: light-dark(
+    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 2) h),
+    oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h)
+  );
+  --tertiary-high: light-dark(
+    oklch(from var(--accent-color) calc(l * 1) c h),
+    oklch(from var(--accent-color) calc(l * 1) c h)
+  );
   --d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color);
+  --search-color: light-dark(
+    oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
+    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 2) h)
+  );
+  --search-banner-text-color: light-dark(
+    oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
+    oklch(from var(--accent-color) calc(l * 1.85) calc(c * 2) h)
+  );
+  --topic-card-shadow: light-dark(
+    oklch(from var(--accent-color) calc(l * 1.85) calc(c * 0.5) h),
+    oklch(from var(--accent-color) calc(l * 0.2) calc(c * 0.01) h / 0.25)
+  );
+  --button-box-shadow: light-dark(
+    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.35) h),
+    oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.5) h)
+  );
+  --d-selected: light-dark(
+    oklch(from var(--background-color) calc(l * 0.9375) calc(c * 2) h),
+    oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h)
+  );
   --d-sidebar-highlight-hover-background: var(--d-selected);
+  --d-sidebar-border-color: light-dark(
+    oklch(from var(--background-color) calc(l * 0.9) calc(c * 1) h),
+    oklch(from var(--accent-color) calc(l * 0.7) calc(c * 0.25) h)
+  );
+  --d-chat-border: light-dark(
+    oklch(from var(--accent-color) calc(l * 1.25) calc(c * 0.25) h),
+    oklch(from var(--accent-color) calc(l * 0.25) calc(c * 0.25) h)
+  );
+  --accent-text-color: light-dark(#ffffff, #212121);
+  --d-nav-color--active: var(--accent-color);
+  --d-sidebar-background: var(--background-color);
+  --d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
+  --d-sidebar-link-color: light-dark(
+    oklch(from var(--accent-color) calc(l * 0.8) calc(c * 0.25) h),
+    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h)
+  );
   --d-sidebar-link-icon-color: var(--d-sidebar-link-color);
   --d-sidebar-header-color: var(--d-sidebar-link-color);
   --d-sidebar-header-icon-color: var(--d-sidebar-link-color);
+  --d-sidebar-suffix-color: light-dark(
+    oklch(from var(--accent-base-color) calc(l * 1) calc(c * 0.9) h),
+    oklch(from var(--accent-base-color) calc(l * 1) calc(c * 0.9) h)
+  );
   --d-sidebar-active-suffix-color: var(--d-sidebar-suffix-color);
-  --d-sidebar-background: var(--background-color);
+  --link-color: light-dark(
-  --d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
+    var(--accent-base-color),
+    oklch(from var(--accent-base-color) calc(l * 0.95) c h)
+  );
+  --link-color-hover: light-dark(
+    var(--accent-base-color),
+    oklch(from var(--accent-base-color) calc(l * 1.5) calc(c * 2.25) h)
+  );
   --d-sidebar-prefix-background: var(--d-selected);
   --d-sidebar-active-prefix-background: light-dark(
     oklch(from var(--d-selected) calc(l * 0.85) c h),
@@ -20,7 +116,6 @@
   --d-sidebar-highlight-color: var(--primary);
   --d-sidebar-highlight-background: var(--d-selected);
   --d-sidebar-section-link-icon-size: 1em;
-  --d-hover: oklch(from var(--d-selected) l c h / 0.75);
   --d-input-bg-color: var(--d-content-background);
-  --d-sidebar-active-color: var(--primary) !important;
+  --tertiary-hover: var(--accent-color);
 }

scss/composer-peek-mode.scss

@@ -1,65 +0,0 @@
-.peek-mode-toggle {
-  display: none;
-}
-
-@media screen and (min-width: 1300px) {
-  html:not(.fullscreen-composer) {
-    .peek-mode-toggle svg {
-      transform: scaleX(-1);
-    }
-
-    &.composer-open {
-      .full-width-enabled .peek-mode-toggle {
-        display: flex;
-      }
-
-      .full-width-enabled.peek-mode-active {
-        #reply-control.hide-preview {
-          transition: none;
-          box-shadow: none;
-          border-radius: var(--d-border-radius-large);
-
-          .grippie {
-            display: none;
-          }
-
-          .reply-area {
-            padding-inline: 0.67em;
-          }
-        }
-
-        #reply-control:not(.fullscreen).hide-preview {
-          width: 100%;
-          right: var(--main-grid-gap);
-          top: var(--header-offset);
-          bottom: var(--main-grid-gap);
-          left: unset;
-          height: unset;
-          max-width: 36.5vw;
-        }
-
-        &.has-sidebar-page {
-          #main-outlet-wrapper {
-            grid-template-columns:
-              var(--d-sidebar-width) calc(100vw - 38vw - var(--d-sidebar-width))
-              1fr;
-          }
-        }
-
-        &:not(.has-sidebar-page) {
-          #main-outlet-wrapper {
-            grid-template-columns: 0 calc(100vw - 52vw) 1fr;
-          }
-
-          #reply-control:not(.fullscreen).hide-preview {
-            max-width: 46vw;
-          }
-        }
-
-        .sidebar-wrapper .sidebar-container {
-          height: unset;
-        }
-      }
-    }
-  }
-}

scss/composer.scss

@@ -3,7 +3,6 @@
   .select-kit-header {
   border: 1px solid var(--tertiary-700);
   background: var(--secondary);
-
   &:hover {
     .d-icon {
       color: var(--accent-color);
@@ -14,16 +13,14 @@
 #reply-control.hide-preview:not(.draft) {
   @include breakpoint("mobile-extra-large", $rule: min-width) {
     background: var(--d-content-background);
+
     border-top-right-radius: var(--d-border-radius);
     border-top-left-radius: var(--d-border-radius);
 
     .grippie {
       background: var(--tertiary-low);
-      border-top-right-radius: var(--d-border-radius);
-      border-top-left-radius: var(--d-border-radius);
     }
 
-    .user-selector,
     .title-and-category {
       padding: 0 var(--spacing-inline-m);
       width: calc(100% - var(--spacing-inline-m) * 2);
@@ -45,7 +42,6 @@
     .reply-area {
       padding-inline: 0;
     }
-
     .reply-to,
     .submit-panel {
       padding-inline: var(--spacing-inline-sm);
@@ -62,7 +58,6 @@
     }
   }
 }
-
 .d-editor-button-bar {
   .btn:hover,
   .toolbar-popup-menu-options.is-expanded {
@@ -79,7 +74,6 @@
         .d-icon {
           color: var(--primary-high);
         }
-
         &:hover {
           .d-icon {
             color: var(--primary);
@@ -93,27 +87,3 @@
     border-radius: var(--d-border-radius);
   }
 }
-
-.discourse-no-touch .translation-selector-dropdown {
-  .select-kit-header.btn-default {
-    background: var(--background-color);
-  }
-}
-
-#reply-control.composer-action-add_translation {
-  .d-editor-preview .d-editor-translation-preview-wrapper {
-    border-color: var(--d-sidebar-border-color);
-  }
-
-  .d-editor-preview .d-editor-translation-preview-wrapper__header {
-    top: 6.5rem;
-    padding: 0.25rem 0.75rem;
-    background: var(--background-color);
-    color: var(--accent-color);
-    border-radius: var(--d-border-radius-large);
-  }
-
-  .topic-title-translator input {
-    width: 47.25vw;
-  }
-}

scss/desktop-full-width.scss

@@ -1,274 +0,0 @@
-// Full width layout. Ported from the Discourse Full Width theme component here
-// https://meta.discourse.org/t/discourse-full-width-component/292496, which we
-// intend to move into core over time.
-//
-// We are copying this here so we can continue to iterate on Horizon with full
-// width without having to include the theme component as a dependency, we
-// need to remove this once full width is in core.
-
-$sidebar-width: 17em;
-
-.wrap {
-  max-width: unset; // undoing core default
-}
-
-.d-header #site-logo {
-  // this prevents the logo from shifting header content
-  // when the sidebar is opened
-  max-height: 100%;
-  max-width: 100%;
-  object-fit: contain; // contains logo without squishing/stretching
-
-  // allows some flexibility for wide logos
-  body:not(.has-sidebar-page) & {
-    max-width: unset;
-
-    @include breakpoint("mobile-extra-large") {
-      max-width: 25vw;
-    }
-  }
-}
-
-.d-header #site-text-logo {
-  font-size: clamp(var(--font-0), 2.5vw, var(--font-up-2));
-
-  .has-sidebar-page & {
-    white-space: wrap;
-    line-height: var(--line-height-medium);
-
-    @include line-clamp(2);
-  }
-}
-
-#main-outlet-wrapper {
-  padding: 0;
-
-  body.has-sidebar-page & {
-    .sidebar-wrapper {
-      width: var(--d-sidebar-width);
-    }
-  }
-
-  body.has-full-page-chat & {
-    gap: 0;
-  }
-
-  .sidebar-wrapper {
-    width: 100%; // safari has issues without this
-  }
-
-  #main-outlet {
-    margin: 0 auto;
-    max-width: var(--d-max-width);
-    width: 100%;
-
-    body.has-full-page-chat & {
-      max-width: unset;
-    }
-  }
-}
-
-.has-full-page-chat:not(.discourse-sidebar) .full-page-chat {
-  border: none;
-}
-
-#main-outlet > .regular {
-  max-width: var(--d-max-width);
-  margin: 0 auto;
-
-  body.has-sidebar-page & {
-    margin: 0 auto;
-  }
-}
-
-.d-header .title:not(.title--minimized) {
-  // allowing overflow here isn't always ideal
-  // but works well enough most of the time
-  overflow: visible;
-}
-
-.d-header {
-  > .wrap {
-    .contents {
-      display: grid;
-      grid-template-areas: "logo lspace extra-info rspace panel";
-      grid-template-columns:
-        minmax(auto, 1fr)
-        auto
-        minmax(0, calc(var(--d-max-width)))
-        auto
-        minmax(auto, 1fr);
-
-      .d-header-mode {
-        grid-area: extra-info;
-        white-space: nowrap;
-
-        @include breakpoint("tablet") {
-          display: none;
-        }
-      }
-
-      .d-header .title {
-        min-width: auto;
-      }
-
-      .has-sidebar-page & {
-        // at wide widths, when 1fr > 0
-        // we want the panel to be the same width as the sidebar
-        // this way we can get more accurate centering
-        grid-template-columns:
-          calc(var(--d-sidebar-width) - 11px) // 11px is wrap padding
-          1fr
-          minmax(0, calc(var(--d-max-width)))
-          1fr
-          minmax(0, calc(var(--d-sidebar-width) - 11px));
-        gap: 1em;
-
-        // at narrower widths, when 1fr = 0
-        // we can center without matching the sidebar's width
-        // which allows the title to take up the remaining width
-        @media screen and (max-width: 1400px) {
-          grid-template-columns:
-            calc(var(--d-sidebar-width) - 11px)
-            1fr
-            minmax(0, calc(var(--d-max-width)))
-            1fr
-            auto;
-        }
-
-        @media screen and (max-width: 1000px) {
-          gap: 0.5em;
-        }
-
-        .d-header-mode {
-          grid-area: extra-info;
-        }
-      }
-    }
-  }
-
-  .header-sidebar-toggle {
-    grid-area: logo;
-  }
-
-  .before-header-panel-outlet {
-    grid-area: extra-info;
-  }
-
-  .d-header-mode {
-    .bootstrap-mode {
-      display: none;
-    }
-  }
-
-  .home-logo-wrapper-outlet {
-    grid-area: logo;
-    margin-left: 3.7em; // 2.7em hamburger width + 1em for margin
-    margin-right: 0.725em;
-    display: flex;
-    overflow: visible;
-
-    .title {
-      flex: 1 1 auto;
-    }
-  }
-
-  .panel {
-    grid-area: panel;
-  }
-}
-
-.extra-info-wrapper {
-  grid-area: extra-info;
-  max-width: var(--d-max-width);
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0;
-}
-
-.header-search--enabled .floating-search-input-wrapper {
-  grid-area: extra-info;
-
-  @include breakpoint(tablet) {
-    grid-area: rspace;
-  }
-
-  @include breakpoint(mobile-extra-large) {
-    display: none;
-  }
-}
-
-body.has-sidebar-page {
-  .wrap {
-    max-width: unset; // undoing core default
-  }
-
-  .d-header-mode,
-  .extra-info-wrapper {
-    padding: 0;
-  }
-
-  @media screen and (min-width: calc($reply-area-max-width + ($sidebar-width * 2))) {
-    #reply-control.show-preview {
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .sidebar-container {
-      height: auto;
-    }
-  }
-
-  @media screen and (max-width: calc($reply-area-max-width + ($sidebar-width * 2))) and (min-width: calc($reply-area-max-width + calc($sidebar-width / 2))) {
-    #reply-control.show-preview:not(.fullscreen) {
-      margin-left: $sidebar-width;
-      width: auto;
-
-      // overruling new core composer changes
-      max-width: $reply-area-max-width;
-      transform: none;
-    }
-
-    .sidebar-container {
-      height: auto;
-    }
-  }
-
-  // overruling new core composer changes
-  @media screen and (min-width: $reply-area-max-width) {
-    #reply-control.show-preview:not(.fullscreen) {
-      max-width: $reply-area-max-width;
-      transform: none;
-    }
-  }
-}
-
-body.sidebar-animate {
-  #main-outlet-wrapper {
-    transition: none;
-  }
-
-  .d-header-wrap .wrap {
-    transition: none;
-  }
-}
-
-.d-header-icons {
-  display: flex;
-}
-
-.rtl {
-  .d-header .title {
-    margin-right: 3.7em; // 2.7em hamburger width + 1em for margin
-    margin-left: 0.725em;
-  }
-}
-
-// provides some extra space for login buttons
-@media screen and (min-width: 1400px) {
-  .anon {
-    .d-header .panel {
-      grid-column-start: -4;
-    }
-  }
-}

scss/desktop-horizon-fixes.scss

@@ -1,65 +0,0 @@
-// Fixing bulk select (only needed for desktop)
-.bulk-select-enabled {
-  .topic-list-header .topic-list-data.default {
-    position: sticky;
-    top: 10em;
-  }
-
-  .topic-author-avatar-data {
-    display: none;
-  }
-
-  .bulk-select.topic-list-data {
-    grid-area: bulk-select;
-    margin-left: -0.5em;
-
-    @media screen and (max-width: 576px) {
-      margin-top: 0;
-
-      label {
-        padding-block: 0.345em;
-      }
-    }
-
-    input {
-      transform: scale(1.5);
-    }
-  }
-}
-
-.topic-list-header {
-  tr {
-    border: none;
-  }
-
-  .topic-list-data {
-    padding: 0;
-
-    &:not(.default) {
-      display: none;
-    }
-
-    &.default {
-      .bulk-select,
-      span:not(.bulk-select-topics, .d-button-label) {
-        display: none;
-      }
-    }
-  }
-
-  .bulk-select-topics {
-    position: absolute;
-    right: -1em;
-    background: var(--secondary);
-    border-radius: 0 0 0 var(--d-border-radius);
-    padding: 1em;
-
-    @media screen and (max-width: 1048px) {
-      right: 0;
-    }
-
-    button {
-      white-space: nowrap;
-    }
-  }
-}

scss/header.scss

@@ -1,9 +1,29 @@
 .d-header {
   box-shadow: none;
   background: var(--background-color);
-
   @include breakpoint(extra-large, $rule: min-width) {
-    padding-bottom: var(--main-grid-gap);
+    padding-bottom: 1em;
+  }
+}
+
+.has-full-page-chat .d-header {
+  background-color: transparent;
+}
+
+.user-menu .quick-access-panel,
+.user-notifications-list {
+  li {
+    &.pending,
+    &.unread {
+      background: var(--d-hover);
+
+      .discourse-no-touch & {
+        &:hover,
+        &:focus {
+          background: var(--d-selected);
+        }
+      }
+    }
   }
 }
 
@@ -24,18 +44,15 @@
   .d-header-icons
   .header-color-scheme-toggle
   .-expanded
-  > .d-icon,
+  > .d-icon {
-.discourse-no-touch .header-sidebar-toggle button:hover .d-icon {
   color: var(--header_primary-medium);
 }
 
 .discourse-no-touch .interface-color-selector-content {
   border: none;
   border-radius: var(--d-border-radius);
-
   .btn {
     border: none;
-
     &:hover {
       box-shadow: none;
     }
@@ -45,6 +62,10 @@
 .drop-down-mode .d-header-icons .active .icon,
 .drop-down-mode .d-header-icons .header-color-scheme-toggle .-expanded {
   border-color: transparent;
+}
+
+.drop-down-mode .d-header-icons .active .icon,
+.drop-down-mode .d-header-icons .header-color-scheme-toggle .-expanded {
   background-color: transparent;
 }
 
@@ -52,6 +73,14 @@
   color: var(--accent-text-color);
 }
 
+.user-menu .quick-access-panel li,
+.user-notifications-list li,
+.user-menu .quick-access-panel li.do-not-disturb,
+.menu-panel .panel-body-bottom .btn,
+.menu-panel .panel-body-bottom .btn:hover {
+  // background-color: var(--d-content-background);
+}
+
 body.login-page,
 body.signup-page,
 body.invite-page,
@@ -61,11 +90,3 @@ body.activate-account-page {
     background: var(--background-color);
   }
 }
-
-.header-dropdown-toggle.chat-header-icon .icon .chat-channel-unread-indicator {
-  border-color: var(--background-color);
-}
-
-.d-header-icons .badge-notification {
-  border-color: var(--background-color);
-}

scss/login.scss

@@ -1,15 +0,0 @@
-body.static-login {
-  #main-outlet-wrapper {
-    grid-template-areas:
-      "sidebar blank"
-      "sidebar content"
-      "sidebar below-content";
-    grid-template-rows: auto 1fr auto;
-  }
-
-  .login-welcome {
-    border-radius: none;
-    border: none;
-    box-shadow: none;
-  }
-}

scss/main.scss

@@ -1,5 +1,5 @@
 :root {
-  --main-grid-gap: 0.5em;
+  --main-grid-gap: 2em;
 }
 
 html:not(:has(.has-full-page-chat)) {
@@ -12,29 +12,24 @@ html:not(:has(.has-full-page-chat)) {
 
 body {
   -webkit-font-smoothing: antialiased;
-
   @include breakpoint("mobile-extra-large") {
     background-color: var(--d-content-background);
   }
 }
-
 #main-outlet-wrapper {
   gap: var(--main-grid-gap);
 }
 
 body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
   grid-column-gap: var(--main-grid-gap);
-  background-color: var(--background-color);
 }
 
 body.has-full-page-chat:not(.has-sidebar-page) {
   .d-header {
     background-color: var(--background-color);
   }
-
   #main-outlet-wrapper {
     gap: var(--main-grid-gap);
-
     @include breakpoint(medium) {
       gap: 0;
     }
@@ -42,8 +37,7 @@ body.has-full-page-chat:not(.has-sidebar-page) {
 }
 
 body.has-sidebar-page #main-outlet-wrapper {
-  grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr) 0;
+  grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr) 0px;
-
   #main-outlet {
     max-width: unset;
   }
@@ -51,47 +45,54 @@ body.has-sidebar-page #main-outlet-wrapper {
 
 body:not(.has-sidebar-page) #main-outlet-wrapper {
   @include breakpoint(medium, $rule: min-width) {
-    grid-template-columns: 0 minmax(0, 1fr) 0;
+    grid-template-columns: 0px minmax(0, 1fr) 0px;
   }
 }
 
-body:not(.has-full-page-chat, .wizard) {
+body:not(.has-full-page-chat) {
   @include breakpoint(extra-large, $rule: min-width) {
     background-color: var(--background-color);
   }
-
   #main-outlet-wrapper {
     @include breakpoint(medium) {
       --main-grid-gap: 0;
     }
-
+    @include breakpoint(tablet, $rule: min-width) {
-    @media screen and (min-width: 768px) {
       gap: var(--main-grid-gap);
     }
-
     #main-outlet {
       width: 100%;
-      max-width: unset;
       padding-bottom: var(--spacing-block-l);
-      border-radius: var(--d-border-radius-large);
+      max-width: unset;
-      background-color: var(--d-content-background);
+      //thanks to random container elements on the page, I can't do a direct child selector here because it targets all the randomness, so I see no other option than MANUALLY adding every possible element that can appear in the main outlet YAY
-
+      .list-controls,
-      @include breakpoint(medium) {
+      .list-container,
-        border-radius: 0;
+      #topic-title,
-      }
+      .container.posts,
-
+      #topic-footer-buttons,
-      html.composer-open & {
+      .more-topics__container,
-        padding-bottom: var(--composer-height);
+      .welcome-banner,
-      }
+      .container .user-main,
-
+      .reviewable,
-      > *:not(.experimental-screen, .activate-account) {
+      .admin-content,
+      .discourse-post-event-upcoming-events,
+      .container.groups-index,
+      .body-page,
+      .container.badges,
+      .topic-above-footer-buttons-outlet .presence-users,
+      .global-notice,
+      .container.tags-index {
         @include breakpoint(medium, $rule: min-width) {
-          box-sizing: border-box;
           max-width: 1000px;
           margin-inline: auto;
           padding-inline: var(--spacing-inline-l);
         }
       }
+      border-radius: var(--d-border-radius-large);
+      @include breakpoint(medium) {
+        border-radius: 0px;
+      }
+      background-color: var(--d-content-background);
     }
   }
 }
@@ -110,7 +111,6 @@ body:not(.has-full-page-chat, .wizard) {
       }
     }
   }
-
   .topic-list-body {
     padding-top: var(--spacing-block-m);
   }
@@ -125,12 +125,3 @@ aside.onebox {
   padding: 1em;
   background-color: var(--d-content-background);
 }
-
-.no-ember {
-  #main-outlet {
-    border-radius: var(--d-border-radius-large);
-    margin: 0 var(--main-grid-gap) var(--main-grid-gap) var(--main-grid-gap);
-    padding: 2em;
-    max-height: calc(100vh - 50px - 1em - var(--main-grid-gap));
-  }
-}

scss/misc.scss

@@ -1,5 +1,3 @@
-@use "lib/viewport";
-
 .user-main .about.collapsed-info .details {
   background: var(--d-content-background);
 }
@@ -10,7 +8,7 @@
 }
 
 .powered-by-discourse {
-  z-index: 400;
+  z-index: 9999;
 }
 
 .boxed.white {
@@ -71,12 +69,9 @@ input[type="color"]:focus,
   background-color: var(--background-color);
 }
 
-@include breakpoint(mobile-extra-large) {
-  // pinned topic excerpts are hidden on small screens too
 .fk-d-menu__trigger.topic-list-layout-trigger {
   display: none;
 }
-}
 
 .search-container .search-header,
 .search-container .search-bar,
@@ -87,7 +82,7 @@ input[type="color"]:focus,
 
 .user-main .about .details {
   padding: 1em 1em 0;
-  border-bottom: 0;
+  border-bottom: 0px;
   border-radius: var(--d-border-radius);
   background-color: var(--primary-50);
 }
@@ -99,43 +94,3 @@ input[type="color"]:focus,
 .discourse-reactions-list .reactions {
   gap: 0.15em;
 }
-
-.group-details-container {
-  border-radius: var(--d-border-radius);
-}
-
-.period-chooser-header {
-  border-radius: 0;
-}
-
-// compatibility with the top contributors sidebar theme component
-// https://meta.discourse.org/t/top-contributors-sidebar/215110
-.list-container
-  #list-area
-  > .contents
-  > .topic-list:has(.discourse-top-contributors) {
-  grid-template-areas: "head head" "body sidebar";
-  grid-template-rows: auto 1fr;
-
-  @include viewport.until(lg) {
-    grid-template-areas: "head head" "body body";
-  }
-
-  tbody {
-    display: flex;
-  }
-
-  .discourse-top-contributors {
-    width: auto;
-    box-sizing: border-box;
-
-    @include viewport.until(lg) {
-      display: none;
-    }
-
-    .top-contributors-heading {
-      font-size: var(--font-up-2);
-      padding-bottom: 0.5em;
-    }
-  }
-}

scss/mobile-stuff.scss

@@ -1,11 +1,10 @@
-// temp separate file to avoid merge hell… to be distributed later
+//temp sepeate file to avoid merge hell… to be distributed later
 @include breakpoint(medium) {
   html,
   .d-header {
     background-color: var(--d-content-background);
   }
 }
-
 #main-outlet-wrapper {
   *[class*="navigation-"] & {
     @include breakpoint(mobile-extra-large) {
@@ -13,7 +12,6 @@
     }
   }
 }
-
 #main-outlet {
   @include breakpoint(mobile-extra-large) {
     padding-top: var(--spacing-block-sm);
@@ -27,53 +25,40 @@
       padding-block: var(--spacing-block-s);
       border-bottom: 1px solid var(--primary-200);
     }
-
     .navigation-container {
       @include breakpoint(mobile-extra-large) {
         gap: var(--spacing-inline-s);
-
+        //dont know why we even hide this crucial navigation on mobile
-        // don't know why we even hide this crucial navigation on mobile
         .category-breadcrumb.hidden,
         .category-breadcrumb {
           display: flex !important;
           column-gap: var(--spacing-inline-s);
           row-gap: var(--spacing-block-xs);
           flex-basis: 100%;
-
-          li {
-            margin-right: 0;
-            margin-left: calc(
-              (var(--spacing-block-s) - 2px) * -1
-            ); // 2px is width of the outline
-          }
-
           .select-kit-header {
             background: var(--d-content-background);
+            padding-block: var(--spacing-block-s);
+            padding-inline: 0;
             border: 0;
           }
         }
-
         .btn-default {
           border: 0;
           margin-right: 0;
-
           .d-icon {
             font-size: var(--font-up-1);
           }
         }
-
         .fk-d-button-tooltip {
           margin-right: 0;
           margin-left: var(
             --spacing-inline-xs
-          ); // pure visual correction for horizontal alignment
+          ); //pure visual correction for horitzontal alignment
-
           &:has(#create-topic) {
             order: 1;
           }
         }
       }
-
       #navigation-bar,
       .navigation-controls,
       .category-breadcrumb {
@@ -81,7 +66,6 @@
           margin-bottom: 0;
         }
       }
-
       .navigation-controls {
         @include breakpoint(mobile-extra-large) {
           gap: var(--spacing-inline-s);
@@ -110,11 +94,9 @@
       .title-wrapper {
         gap: var(--spacing-block-s);
       }
-
       .topic-category {
         order: -1;
       }
-
       //make mixin of this
       .badge-category__wrapper {
         font-size: var(--font-down-2-rem);
@@ -137,15 +119,12 @@
           oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
         );
       }
-
       .discourse-tags {
         gap: var(--spacing-inline-xs);
-
         &__tag-separator {
           display: none;
         }
       }
-
       .discourse-tag {
         font-size: var(--font-down-2-rem);
         padding: var(--spacing-inline-xs) var(--spacing-inline-s);
@@ -156,7 +135,6 @@
       }
     }
   }
-
   .container.posts {
     @include breakpoint(mobile-extra-large) {
       padding-inline: var(--spacing-inline-xs) !important;
@@ -164,6 +142,7 @@
       .main-avatar .avatar {
         width: 40px;
         height: 40px;
+        border-radius: var(--d-border-radius);
       }
 
       .topic-body {
@@ -172,22 +151,18 @@
             font-size: var(--font-0-rem);
           }
         }
-
         .contents {
           padding-top: var(--spacing-block-m);
         }
       }
-
       .small-action {
         &-desc {
           padding: var(--spacing-block-xs) 0;
         }
-
         //for core eventually, better way imo
         .topic-avatar {
           padding-top: 0;
           align-items: center;
-
           .d-icon {
             font-size: var(--font-up-1);
           }
@@ -204,36 +179,25 @@
 }
 
 //should be changed in core, should not be a primary btn
-// changing this into straight buttons to match the progress one, which doesn't work well with rounded corners
+//changing this into straight buttons to match the progress one, which doesnt work well with rounded corners
 #topic-progress-wrapper {
   .progress-back-container {
     margin-right: 0;
     margin-bottom: var(--spacing-block-xs);
-
     .btn-primary.progress-back {
       border-radius: 0;
       background: var(--secondary);
       border: 1px solid var(--tertiary-low);
       color: var(--accent-color);
       padding: var(--spacing-inline-s) var(--spacing-inline-m);
-
       .d-icon {
         color: var(--accent-color);
       }
     }
   }
-
   .topic-admin-menu-trigger {
     border-radius: 0;
     background: var(--secondary);
     border: 1px solid var(--tertiary-low);
   }
 }
-
-.mobile-device #reply-control.show-preview .submit-panel {
-  background-color: var(--background-color);
-}
-
-.d-editor-preview-wrapper {
-  outline: 2px solid var(--background-color);
-}

scss/nav-pills.scss

@@ -8,35 +8,30 @@
 
   .navigation-container {
     gap: 1rem;
-
     .category-breadcrumb {
       order: 1;
     }
   }
-
   .combo-box .combo-box-header {
-    // needs more specificity than just in the button file
+    // needs more specificy than just in the button file
     background-color: var(--secondary);
     border-radius: var(--d-border-radius-large);
     border: 1px solid var(--primary-300);
-
+    // font-size: var(--font-up-1-rem);
     &:hover {
       border: 1px solid var(--accent-color);
     }
-
     &:focus-visible {
       .discourse-no-touch & {
         background: var(--secondary);
         color: var(--accent-color);
-        box-shadow: 0 0 0 3px var(--button-box-shadow);
+        box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
-
         .d-icon {
           color: var(--accent-color);
         }
       }
     }
   }
-
   .select-kit.combo-box.category-drop.has-selection
     .category-drop-header:hover {
     border-color: transparent;
@@ -52,8 +47,7 @@
 .nav-pills > li button:hover {
   .discourse-no-touch & {
     background: transparent;
-    color: var(--d-nav-color--hover);
+    color: var(--accent-color);
-
     &::after {
       content: "";
       position: absolute;
@@ -61,7 +55,7 @@
       bottom: 0;
       right: 0;
       height: var(--d-nav-underline-height);
-      background: var(--d-nav-color--hover);
+      background: var(--accent-color);
     }
   }
 }

scss/search-banner.scss

@@ -0,0 +1,86 @@
+.welcome-banner {
+  z-index: calc(z("base") + 1);
+}
+
+.custom-search-banner-wrap {
+  display: grid;
+  grid-template-rows: 0.33fr 0.33fr 0.33fr;
+  grid-template-columns: 1fr 1fr;
+  grid-column-gap: 1em;
+  grid-row-gap: 0.5em;
+  border-bottom: 1px solid var(--primary-300);
+  padding: 1.5em 0 2.5em;
+  margin-bottom: 0;
+  @media screen and (max-width: 768px) {
+    padding: 1em;
+  }
+  h1 {
+    grid-column: 1/2;
+    grid-row: 1/-1;
+    text-align: left;
+    align-self: center;
+    margin: 0;
+    font-weight: 400;
+    color: var(--search-banner-text-color);
+    @media screen and (max-width: 1028px) {
+      font-size: var(--font-up-4);
+      grid-column: 1/-1;
+      grid-row: 1;
+      text-align: center;
+      margin-bottom: 0.5em;
+    }
+    @media screen and (max-width: 768px) {
+      text-align: left;
+      grid-column: 1/2;
+      grid-row: 1/-1;
+      font-size: var(--font-up-3);
+    }
+    @media screen and (max-width: 600px) {
+      grid-column: 1/-1;
+      grid-row: 1;
+      text-align: center;
+      margin-bottom: 0.5em;
+    }
+  }
+  .search-menu {
+    grid-column: 2/3;
+    grid-row: 1/-1;
+    width: 100%;
+    align-self: center;
+    @media screen and (max-width: 1028px) {
+      grid-row: 2/-1;
+      grid-column: 1/-1;
+    }
+    @media screen and (max-width: 768px) {
+      grid-column: 2/-1;
+      grid-row: 1/-1;
+    }
+    @media screen and (max-width: 600px) {
+      grid-row: 2/-1;
+      grid-column: 1/-1;
+    }
+  }
+  p {
+    display: none;
+  }
+  .search-input {
+    background: var(--d-content-background);
+    border: 1px solid var(--search-color);
+    box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
+  }
+  .search-menu .search-input:focus-within,
+  .search-menu-container .search-input:focus-within {
+    border: 1px solid var(--search-color);
+    outline: 2px solid var(--search-color);
+  }
+  .search-menu .d-icon,
+  .search-menu .searching .d-icon {
+    color: var(--search-color);
+  }
+  .panel-body {
+    z-index: z("dropdown");
+  }
+  .results {
+    background: var(--d-content-background);
+  }
+}

scss/sidebar-new-topic-button.scss

@@ -1,71 +0,0 @@
-.navigation-controls {
-  .topic-drafts-menu-trigger,
-  .fk-d-button-tooltip {
-    display: none;
-  }
-}
-
-.has-ai-conversations-sidebar {
-  .sidebar-new-topic-button__wrapper {
-    display: none;
-  }
-}
-
-.sidebar-new-topic-button {
-  flex: 1 1 auto;
-
-  &__wrapper {
-    box-sizing: border-box;
-    display: flex;
-
-    .mobile-view & {
-      margin: 0 0 1rem;
-    }
-
-    &:has(.topic-drafts-menu-trigger) {
-      .sidebar-new-topic-button {
-        border-radius: var(--d-button-border-radius) 0 0
-          var(--d-button-border-radius);
-        border-right: 1px solid var(--primary-300);
-      }
-    }
-
-    .fk-d-button-tooltip {
-      flex: 1 1 auto;
-    }
-
-    .topic-drafts-menu-trigger {
-      flex: 0 1 auto;
-      margin: 0;
-      border-radius: 0 var(--d-button-border-radius)
-        var(--d-button-border-radius) 0;
-    }
-
-    .fk-d-button-tooltip:has(button[disabled]) {
-      + .topic-drafts-menu-trigger {
-        display: none;
-      }
-
-      .fk-d-tooltip__trigger {
-        background: var(--accent-color);
-        border-radius: 0 var(--d-button-border-radius)
-          var(--d-button-border-radius) 0;
-        padding-right: 0.65em;
-
-        .d-icon {
-          color: var(--secondary);
-        }
-      }
-    }
-  }
-}
-
-li.sidebar-section-link-wrapper[data-list-item-name="New Topic"] {
-  display: none;
-}
-
-.has-full-page-chat {
-  .sidebar-new-topic-button__wrapper {
-    display: none;
-  }
-}

scss/sidebar.scss

@@ -1,24 +1,18 @@
-@use "lib/viewport";
-
 .sidebar-wrapper,
 .sidebar-hamburger-dropdown {
   @include breakpoint(medium) {
     background: var(--secondary);
-
     .sidebar-footer-wrapper {
       background: var(--secondary);
-
       .sidebar-footer-container::before {
         display: none;
       }
     }
   }
-
   .has-full-page-chat &,
   .has-full-page-chat & .sidebar-footer-wrapper {
     background: transparent;
   }
-
   .sidebar-container {
     border-right: none;
   }
@@ -26,37 +20,30 @@
   .sidebar-sections {
     padding: 0;
   }
-
   .sidebar-section-link {
     transition: none;
     border-radius: var(--d-border-radius);
   }
-
   .dropdown-menu__item .sidebar-section-link {
-    border-radius: 0;
+    border-radius: 0px;
   }
 }
-
 .sidebar-section-wrapper {
   @include breakpoint(extra-large, $rule: min-width) {
     padding-block: 0.45em;
   }
-
   @include breakpoint(mobile-extra-large) {
     .hamburger-panel .revamped & {
       margin-bottom: var(--spacing-block-m);
     }
   }
-
   .sidebar-section-header {
     font-size: var(--font-down-2);
   }
-
   .sidebar-section-content {
     margin: 0;
     display: flex;
     flex-direction: column;
-
     @include breakpoint(extra-large, $rule: min-width) {
       gap: var(--spacing-block-xs);
     }
@@ -65,7 +52,6 @@
 
 .sidebar-wrapper .sidebar-sections {
   --scrollbarThumbBg: var(--d-selected);
-  padding: 0 1rem;
 }
 
 .sidebar-section-link-wrapper .sidebar-section-link:focus,
@@ -77,17 +63,11 @@
 
 .sidebar-new-topic-button__wrapper {
   margin: 0 var(--spacing-inline-m) var(--spacing-block-l);
-
   .sidebar-new-topic-button .d-icon {
     display: none;
   }
 }
 
-// put the draft menu above the slide-out hamburger on small desktop screens
+.sidebar-wrapper .sidebar-sections {
-@include viewport.until(md) {
+  padding: 0 1rem;
-  html:not(.mobile-view) {
-    .topic-drafts-menu-content {
-      z-index: z("modal", "overlay");
-    }
-  }
 }

scss/topic-cards.scss

@@ -4,7 +4,6 @@
 
 .topic-list > .topic-list-body > .topic-list-item.last-visit {
   border-bottom: 1px solid var(--primary-300);
-
   &:hover {
     border-color: var(--accent-color);
   }
@@ -15,12 +14,10 @@
   display: flex;
   flex-direction: column;
   gap: 1em;
-
   @include breakpoint(medium) {
     gap: 0.5em;
     padding: 0 0.5em;
   }
-
   @include breakpoint(mobile-extra-large) {
     gap: 0;
     padding: 0;
@@ -40,30 +37,26 @@
   grid-column-gap: 12px;
   grid-row-gap: 8px;
   border-radius: var(--d-border-radius);
-  cursor: pointer;
-
   td.main-link .link-top-line {
     grid-row: 1/2;
     grid-column: 1/-1;
     font-weight: 500;
   }
-
   &.--has-status-card td.main-link .link-top-line {
     grid-column: 1/-2;
   }
-
   @include breakpoint(extra-large) {
     grid-template-areas:
       ". . . . status"
       "activity . . likes-replies category";
   }
-
   @include breakpoint(mobile-extra-large) {
     td.main-link .link-top-line,
     &.--has-status-card td.main-link .link-top-line {
       grid-row: 2/3;
       grid-column: 1/-1;
     }
+
     grid-template-columns: 20px repeat(5, 1fr);
     grid-template-rows: auto auto auto;
     grid-template-areas:
@@ -75,50 +68,29 @@
     box-shadow: none;
     border-radius: 0;
   }
-
   &.excerpt-expanded {
-    grid-template-columns: 20px auto auto min-content min-content;
+    grid-template-columns: 20px min-content min-content auto min-content;
     grid-template-rows: auto auto auto;
     grid-template-areas:
       ". . . . status"
       "activity . . . ."
       "excerpt excerpt excerpt likes-replies category";
-
     @include breakpoint(extra-large) {
       grid-template-areas:
         ". . . . status"
         "activity . . . ."
         "excerpt excerpt excerpt likes-replies category";
     }
-
     @include breakpoint(mobile-extra-large) {
       grid-template-rows: auto auto auto;
       grid-template-areas:
         "category category category category status"
         ". . . . ."
         "activity . . . likes-replies";
-
+      .topic-excerpt {
-      .topic-excerpt,
-      .link-bottom-line {
         display: none;
       }
     }
-
-    .topic-likes-replies-data {
-      align-self: flex-end;
-    }
-
-    .topic-category-data {
-      align-items: flex-end;
-    }
-
-    .badge-category__wrapper {
-      height: min-content;
-    }
-
-    .link-bottom-line {
-      display: flex;
-    }
   }
 
   // display contents
@@ -138,13 +110,16 @@
   .topic-activity-data {
     grid-area: activity;
   }
-
   .topic-activity {
-    display: grid;
+    display: flex;
-    grid-template-columns: 20px auto auto auto;
+    gap: 0.25em;
     font-size: var(--font-down-1);
     height: 100%;
     align-items: center;
+  }
+
+  .topic-activity__user {
+    display: flex;
     gap: 0.25em;
   }
 
@@ -154,42 +129,29 @@
     border-radius: 4px;
   }
 
-  .topic-activity__user {
-    height: 20px;
-    width: 20px;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--primary-low);
-  }
-
   .topic-activity__username {
-    margin-left: 0.25em;
-    text-wrap: nowrap;
-  }
-
     @include breakpoint(mobile-extra-large) {
-    .topic-activity__username {
       display: none;
     }
-
-    .topic-activity__reason {
-      margin-left: 0.25em;
-    }
-  }
-
-  .topic-activity.--updated .topic-activity__reason {
-    margin-left: 0.25em;
   }
 
   // status
+  .topic-status-data {
+    grid-area: status;
+  }
   .topic-status-data {
     grid-area: status;
     position: relative;
   }
-
   .topic-status-card {
+    @include breakpoint("large", min-width) {
+      position: absolute;
+      right: 0px;
+      top: -20px;
+      background-color: var(--d-content-background);
+      height: 20px;
+      font-size: var(--font-down-3);
+    }
     height: min-content;
     margin-left: auto;
     display: flex;
@@ -203,16 +165,6 @@
     border: 1px solid var(--status-color);
     color: var(--status-color);
     width: min-content;
-
-    @include breakpoint("large", min-width) {
-      position: absolute;
-      right: 0;
-      top: -20px;
-      background-color: var(--d-content-background);
-      height: 20px;
-      font-size: var(--font-down-3);
-    }
-
     svg {
       font-size: var(--font-down-1);
       color: var(--status-color);
@@ -222,7 +174,6 @@
   .topic-status-card.--pinned {
     --status-color: var(--primary-500);
   }
-
   .topic-status-card.--hot {
     --status-color: #e45735;
   }
@@ -256,8 +207,12 @@
     min-width: unset;
   }
 
-  .badge-notification.new-topic::before {
+  // excerpt
-    display: none;
+  .topic-excerpt {
+    grid-row: 3 / -1;
+    grid-column: 1 / -2;
+    margin: 0;
+    font-size: var(--font-down-2);
   }
 
   // timestamp
@@ -269,43 +224,23 @@
     padding: 0;
   }
 
-  .link-bottom-line {
-    display: none;
-  }
-
   // metadata
-  // metadata - excerpt
+  // metadata - category
-  .topic-excerpt,
   td.main-link .link-bottom-line {
-    grid-row: 3 / -1;
-    grid-column: 1 / -3;
-    margin: 0;
-    font-size: var(--font-down-2);
-
-    .excerpt__contents {
-      color: var(--primary-high);
-    }
-
-    // default category position hidden
-    .badge-category__wrapper {
     display: none;
   }
-  }
 
   td.topic-category-status-data {
     display: contents;
   }
-
   td.topic-category-data {
     grid-area: category;
     display: flex;
     justify-content: flex-end;
-
     @include breakpoint(mobile-extra-large) {
       justify-content: flex-start;
     }
   }
-
   td.topic-category-data .badge-category__wrapper,
   td.main-link .link-bottom-line .badge-category__wrapper {
     border-radius: var(--d-border-radius);
@@ -327,7 +262,6 @@
       );
     }
   }
-
   td.main-link .discourse-tags {
     display: none;
   }
@@ -348,7 +282,6 @@
     height: min-content;
     align-self: center;
   }
-
   .topic-likes-replies-data .topic-likes,
   .topic-likes-replies-data .topic-replies {
     display: flex;
@@ -356,7 +289,6 @@
     gap: 0.5em;
     align-items: center;
     color: var(--primary-500);
-
     svg {
       color: var(--primary-600);
     }
@@ -365,118 +297,70 @@
 
 .topic-list-item {
   background: var(--d-content-background);
-  box-shadow: 0 0 12px 1px var(--topic-card-shadow);
+  box-shadow: 0px 0px 12px 1px var(--topic-card-shadow);
-
   &:hover {
     .discourse-no-touch & {
       border-color: var(--accent-color);
       background: var(--d-content-background);
     }
   }
-
   &.selected {
-    box-shadow:
+    box-shadow: 0px 0px 0px 2px var(--accent-color),
-      0 0 0 2px var(--accent-color),
+      0px 0px 12px 1px var(--topic-card-shadow);
-      0 0 12px 1px var(--topic-card-shadow);
   }
 }
 
 // Bookmarks
+
 .topic-list-item.bookmark-list-item {
   .link-bottom-line {
     font-size: unset;
   }
-
+  grid-template-columns: 20px min-content min-content auto min-content min-content 36px;
-  // regular card without excerpt class
-  grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
   grid-template-areas:
     ". . . . . . dropdown"
-    "avatar update metadata metadata metadata . category";
+    "avatar update metadata metadata metadata category dropdown";
-
   @include breakpoint(mobile-extra-large) {
-    grid-template-columns: min-content min-content auto min-content min-content min-content min-content;
+    grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
+    grid-template-areas:
+      ". . . . . . . dropdown"
+      "avatar update metadata metadata metadata metadata category dropdown";
+  }
+  &.has-metadata {
     grid-template-areas:
       ". . . . . . dropdown"
-      "update metadata metadata metadata metadata category category";
+      "avatar update metadata metadata metadata category dropdown";
-
-    .avatar {
-      display: none;
-    }
-  }
-
-  &.has-metadata {
-    grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
-
     @include breakpoint(mobile-extra-large) {
       grid-template-areas:
         ". . . . . . . dropdown"
-        "update update metadata metadata metadata metadata category category";
+        "avatar update metadata metadata metadata metadata category dropdown";
-
-      .avatar {
-        display: none;
     }
   }
-  }
-
-  // card with excerpt (all in horizon since the toggle is gone)
   &.excerpt-expanded {
-    grid-template-columns: 20px min-content auto minmax(0, 100px);
     grid-template-areas:
-      ". . .  dropdown"
+      ". . . . . . . dropdown"
-      "avatar update metadata metadata"
+      "avatar update metadata metadata metadata metadata metadata dropdown"
-      "excerpt excerpt excerpt ."
+      "excerpt excerpt excerpt excerpt excerpt . . dropdown"
-      "excerpt excerpt excerpt category";
+      "excerpt excerpt excerpt excerpt excerpt category category dropdown";
-
-    @include breakpoint(extra-large, $rule: min-width) {
-      grid-template-columns: 20px min-content auto min-content;
-    }
-
     @include breakpoint(mobile-extra-large) {
-      grid-template-columns: auto min-content;
+      grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
-      grid-template-areas:
+      .post-excerpt {
-        ".  dropdown"
-        "category category";
-
-      .post-excerpt,
-      .avatar {
         display: none;
       }
     }
-
     &.has-metadata {
-      grid-template-columns: 20px min-content auto min-content;
       grid-template-areas:
-        ". . . dropdown"
+        ". . . . . . . dropdown"
-        "avatar update metadata metadata"
+        "avatar update metadata metadata metadata metadata metadata dropdown"
-        "excerpt excerpt excerpt . "
+        "excerpt excerpt excerpt excerpt excerpt . . dropdown"
-        "excerpt excerpt excerpt category";
+        "excerpt excerpt excerpt excerpt excerpt category category dropdown";
-
-      @include breakpoint(mobile-extra-large) {
-        grid-template-columns: auto min-content;
-        grid-template-areas:
-          " . dropdown"
-          "metadata category";
-
-        .bookmark-metadata {
-          flex-wrap: wrap;
     }
   }
-    }
-
-    .badge-category__wrapper {
-      align-self: flex-end;
-      height: min-content;
-      max-width: 100%;
-    }
-  }
-
   td.author-avatar {
     grid-area: avatar;
   }
-
   td.main-link .link-bottom-line {
     display: contents;
-
     .badge-category__wrapper {
       grid-area: category;
       display: flex;
@@ -485,60 +369,31 @@
       justify-self: flex-end;
     }
   }
-
   td.main-link .link-top-line {
     display: contents;
-
     .bookmark-metadata {
       grid-area: metadata;
-      margin: 0;
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-inline-xs);
     }
-
-    .bookmark-metadata-item {
-      margin: 0;
-      vertical-align: middle;
-    }
-
     .bookmark-status-with-link {
       grid-column: 1/-2;
       grid-row: 1/2;
     }
   }
-
   .post-excerpt {
     grid-area: excerpt;
     margin: 0;
   }
-
   .topic-list-data:last-of-type {
     display: contents;
-
     .bookmark-actions-dropdown {
       grid-area: dropdown;
-      align-self: flex-start;
+      align-self: center;
-      height: 1em;
-
-      .select-kit-header {
-        padding-top: 0;
-        margin-left: auto;
-        align-items: center;
-        background: transparent;
-      }
-
-      .select-kit-header-wrapper {
-        height: 1em;
-        width: 1em;
     }
   }
-  }
-
   .post-metadata.topic-list-data.updated-at {
     grid-area: update;
+    margin-left: auto;
   }
-
   td.activity .post-activity {
     display: none;
   }
@@ -546,164 +401,102 @@
 
 // Assigned List
 .topic-list-item.assigned-list-item {
+  td.main-link .link-top-line {
+    grid-column: 1/-3;
+  }
+  grid-template-columns: 20px min-content min-content auto min-content min-content 36px;
+  grid-template-areas:
+    ". . . . . status dropdown"
+    "activity . . . likes-replies category dropdown";
+  @include breakpoint(mobile-extra-large) {
+    td.main-link .link-top-line {
+      grid-column: 1/-2 !important;
+    }
+    grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
+    grid-template-areas:
+      "category category . . . . status dropdown"
+      ". . . . . . . dropdown"
+      "activity . . . . . likes-replies dropdown";
+  }
+  .assign-topic-buttons {
+    display: contents;
+    .assign-actions-dropdown {
+      grid-area: dropdown;
+      align-self: center;
+    }
+  }
+  td.topic-category-status-data {
+    display: contents;
+  }
   .topic-status-card {
-    display: none;
     position: relative;
     top: unset;
     right: unset;
   }
-
-  td.main-link .link-top-line {
-    grid-column: 1/-3;
-  }
-  grid-template-columns: 20px min-content min-content auto min-content min-content min-content;
-  grid-template-areas:
-    ". . . . . status dropdown"
-    "activity . . . . likes-replies category";
-
-  @include breakpoint(mobile-extra-large) {
-    grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
-    grid-template-areas:
-      "category category . . . . status dropdown"
-      ". . . . . . . . "
-      "activity . . . . . . likes-replies";
-  }
-
-  .assign-topic-buttons {
-    display: contents;
-
-    .assign-actions-dropdown {
-      grid-area: dropdown;
-      justify-content: flex-end;
-      height: 1em;
-
-      .select-kit-header {
-        padding-top: 0;
-        margin-left: auto;
-        align-items: center;
-        background: transparent;
-      }
-
-      .select-kit-header-wrapper {
-        height: 1em;
-        width: 1em;
-      }
-    }
-  }
-
-  td.topic-category-status-data {
-    display: contents;
-  }
 }
 
 // User Messages
-body.user-messages-page {
-  .topic-list-body {
-    gap: 0;
-  }
-
-  .topic-list .topic-list-data.posters a:not(.latest) {
-    display: block;
-  }
-
-  .topic-list-item {
-    border-radius: 0;
-    box-shadow: none;
-    border-bottom: 1px solid var(--primary-200);
-    border-top: none;
-    border-right: none;
-    border-left: none;
-    display: grid;
-    grid-template-areas: "title activity" "posters .";
-    grid-template-columns: auto auto;
-    grid-template-rows: auto auto;
-
-    &:hover {
-      background-color: var(--primary-low);
-      border-color: var(--primary-200);
-    }
 
+body.user-messages-page .topic-list-item {
   td.topic-category-data,
   td.topic-likes-replies-data,
   td.topic-status-data {
     display: none;
   }
-
+  td.main-link .link-top-line {
-    &.visited .main-link .link-top-line {
+    grid-row: 1 / 2;
-      font-weight: normal;
+    grid-column: 1 / -1;
-      grid-area: title;
   }
-
+  grid-template-areas:
-    td.topic-activity-data {
+    ". . . . . . ."
-      grid-area: activity;
+    "activity . . . . likes-replies likes-replies";
+  &.excerpt-expanded {
+    grid-template-columns: 20px repeat(6, 1fr) auto;
+    grid-template-rows: 20px auto auto 30px;
+    grid-template-areas:
+      ". . . . . . . ."
+      "activity . . . . . . ."
+      "excerpt excerpt excerpt excerpt excerpt excerpt . ."
+      "excerpt excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
+    @include breakpoint(extra-large) {
+      grid-template-areas:
+        ". . . . . . . ."
+        "activity . . . . . . ."
+        "excerpt excerpt excerpt excerpt excerpt excerpt . likes-replies"
+        "excerpt excerpt excerpt excerpt excerpt excerpt . likes-replies";
     }
-
-    td.topic-list-data.posters {
-      grid-area: posters;
-      display: flex;
-      align-items: center;
-      height: 100%;
-
-      a {
-        margin-right: 4px;
-      }
-
-      .avatar {
-        width: 20px;
-        height: 20px;
-        border-radius: 4px;
-        background-color: var(--primary-low);
   }
+  @include breakpoint(mobile-extra-large) {
+    grid-template-columns: 25px auto repeat(6, 1fr);
+    grid-template-rows: auto auto;
+    grid-template-areas:
+      ". . . . . . . ."
+      "activity . . . . . . .";
+    .topic-excerpt {
+      display: none;
     }
   }
 }
 
 // Bulk select
+
 .bulk-select-enabled .topic-list-body .topic-list-item {
-  grid-template-areas:
-    "bulk-select . . . status"
-    "bulk-select activity activity . category";
-
-  @include breakpoint(large) {
-    grid-template-areas:
-      "bulk-select . . . status"
-      "bulk-select activity activity . category";
-  }
-
-  @include breakpoint(mobile-extra-large) {
-    grid-template-areas:
-      "bulk-select category . . .  status"
-      "bulk-select . . . . ."
-      "bulk-select activity activity . . .";
-
-    td.main-link .link-top-line,
-    &.--has-status-card td.main-link .link-top-line {
-      grid-column: 2/-1;
-      grid-row: 2;
-      font-weight: 500;
-    }
-  }
-
   td.topic-likes-replies-data {
     display: none;
   }
-
   td.main-link .link-top-line,
   &.--has-status-card td.main-link .link-top-line {
     grid-column: 2/-1;
     font-weight: 500;
   }
-
   .topic-excerpt {
     grid-area: excerpt;
     margin: 0;
   }
-
   &.excerpt-expanded {
     grid-template-areas:
       "bulk-select . . . status" "bulk-select activity . . ."
       "bulk-select excerpt excerpt excerpt category";
-
     @include breakpoint(mobile-extra-large) {
       grid-template-areas:
         "bulk-select category . . .  status"
@@ -711,22 +504,34 @@ body.user-messages-page {
         "bulk-select activity activity . . .";
     }
   }
-
+  grid-template-areas:
+    "bulk-select . . . status"
+    "bulk-select activity activity . category";
   .bulk-select {
     grid-area: bulk-select;
     padding: 0;
     margin: 0;
     align-self: center;
     justify-self: center;
-
     label {
       margin: 0;
     }
   }
+  @include breakpoint(large) {
+    grid-template-areas:
+      "bulk-select . . . status"
+      "bulk-select activity activity . category";
+  }
+  @include breakpoint(mobile-extra-large) {
+    td.main-link .link-top-line,
+    &.--has-status-card td.main-link .link-top-line {
+      grid-column: 2/-1;
+      grid-row: 2;
+      font-weight: 500;
+    }
+    grid-template-areas:
+      "bulk-select category . . .  status"
+      "bulk-select . . . . ."
+      "bulk-select activity activity . . .";
   }
-
-.event-date-container {
-  display: inline-flex;
-  position: relative;
-  top: -0.25em; // optical alignment
 }

scss/topic.scss

@@ -6,8 +6,8 @@
   }
 }
 
-.container.posts .topic-navigation:not(.with-topic-progress) {
+.container.posts .topic-navigation {
-  // super fragile because new sticky topic title doesn't have a calculated value (= 53px with this font and size but…)
+  // super fragile because new sticky topic title doesnt have a calculated value (= 53px with this font and size but…)
   top: calc(
     var(--header-offset, 60px) + 53px + calc(var(--spacing-block-l) * 2)
   );
@@ -16,29 +16,35 @@
 
 .timeline-container .topic-timeline {
   min-width: unset; // why we have this?
-
   .timeline-scrollarea {
     border-left: 1px solid var(--accent-color);
 
     .timeline-scroller {
       @include breakpoint("medium", $rule: min-width) {
-        margin-left: -4.5px;
+        padding: 0.25em;
+        border: 1px solid var(--accent-color);
+        border-radius: 0.75em;
+        padding-left: 0.5em;
+        margin-left: calc(-0.5em - 2.5px);
         background: var(--d-content-background);
         height: 40px !important; // height is coming from element style have no other choice
       }
 
+      .timeline-scroller-content {
+        // display: flex;
+        // flex-direction: column;
+        // gap: 0.25em;
+      }
       .timeline-replies,
       .timeline-ago {
         line-height: 1;
       }
     }
-
     .timeline-handle {
       background-color: var(--accent-color);
-
       @include breakpoint("medium", $rule: min-width) {
-        width: 8px;
+        width: 3px;
-        border-radius: 10px;
+        border-radius: 2px;
         height: calc(100% - 6px);
       }
     }
@@ -48,6 +54,8 @@
 //should probably get rid of this extra specificity class in core?
 .timeline-container.timeline-fullscreen {
   @include breakpoint("medium", $rule: max-width) {
+    .topic-timeline .timeline-scrollarea-wrapper {
+    }
     .topic-timeline
       .timeline-scrollarea
       .timeline-scroller
@@ -56,24 +64,16 @@
     }
   }
 }
+.container.posts,
+#topic-footer-buttons {
+  padding: 0 24px;
+}
 
 .container.posts {
-  grid-template-columns: auto 8em;
+  grid-template-columns: auto 150px;
-
   @media screen and (max-width: 924px) {
     grid-template-columns: auto auto;
   }
-
-  .post-notice {
-    padding: var(--spacing-block-sm);
-    border-radius: var(--d-border-radius);
-    font-size: var(--font-down-1-rem);
-
-    .d-icon {
-      font-size: var(--font-up-1);
-      width: 1em;
-    }
-  }
 }
 
 .timeline-container .topic-timeline .timeline-ago {

scss/variables.scss

@@ -3,7 +3,7 @@
   --d-border-radius-large: 20px;
   --d-border-radius: 8px;
   --d-input-border-radius: 6px;
-
+  // --d-sidebar-row-height: 2.8em;
   //the idea is: block spacing can grow with font-size, but inline spacing should not to maintain horizontal (text) alignment
   --spacing-block-xs: 0.25em;
   --spacing-block-s: 0.5em;

scss/welcome-banner.scss

@@ -1,115 +0,0 @@
-.welcome-banner {
-  &__wrap {
-    display: grid;
-    grid-template-rows: 0.33fr 0.33fr 0.33fr;
-    grid-template-columns: 1fr 1fr;
-    grid-column-gap: 1em;
-    grid-row-gap: 0.5em;
-    border-bottom: 1px solid var(--primary-300);
-    padding: 1.5em 0 2.5em;
-    margin-bottom: 0;
-
-    @media screen and (max-width: 768px) {
-      padding: 1em;
-    }
-
-    @include breakpoint("mobile-extra-large") {
-      display: block;
-      padding: 0.5em;
-      margin-top: 0;
-    }
-
-    .search-menu {
-      grid-column: 2/3;
-      grid-row: 1/-1;
-      width: 100%;
-      align-self: center;
-
-      @media screen and (max-width: 1028px) {
-        grid-row: 2/-1;
-        grid-column: 1/-1;
-      }
-
-      @media screen and (max-width: 768px) {
-        grid-column: 2/-1;
-        grid-row: 1/-1;
-      }
-
-      @media screen and (max-width: 600px) {
-        grid-row: 2/-1;
-        grid-column: 1/-1;
-      }
-
-      @include breakpoint("mobile-extra-large") {
-        display: none;
-      }
-    }
-
-    p {
-      display: none;
-    }
-  }
-
-  .search-menu .search-input,
-  .search-menu-container .search-input {
-    background: var(--d-content-background);
-    border: 1px solid var(--search-color);
-    box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
-  }
-
-  .search-menu .search-input:focus-within,
-  .search-menu-container .search-input:focus-within {
-    border: 1px solid var(--search-color);
-    outline: 2px solid var(--search-color);
-  }
-
-  .search-menu .d-icon,
-  .search-menu .searching .d-icon,
-  .search-menu .searching .show-advanced-search .d-icon {
-    color: var(--search-color);
-  }
-
-  .panel-body {
-    z-index: z("dropdown");
-  }
-
-  .results {
-    background: var(--d-content-background);
-  }
-
-  &__title {
-    grid-column: 1/2;
-    grid-row: 1/-1;
-    text-align: left;
-    align-self: center;
-    margin: 0;
-    font-weight: 400;
-    color: var(--search-color);
-
-    @media screen and (max-width: 1028px) {
-      font-size: var(--font-up-4);
-      grid-column: 1/-1;
-      grid-row: 1;
-      text-align: center;
-      margin-bottom: 0.5em;
-    }
-
-    @media screen and (max-width: 768px) {
-      text-align: left;
-      grid-column: 1/2;
-      grid-row: 1/-1;
-      font-size: var(--font-up-3);
-    }
-
-    @media screen and (max-width: 600px) {
-      grid-column: 1/-1;
-      grid-row: 1;
-      text-align: center;
-      margin-bottom: 0.5em;
-    }
-
-    @include breakpoint("mobile-extra-large") {
-      font-size: var(--font-up-2);
-    }
-  }
-}

spec/system/composer_peek_spec.rb

@@ -1,54 +0,0 @@
-# frozen_string_literal: true
-
-describe "Composer peek", type: :system do
-  fab!(:current_user) { Fabricate(:user, refresh_auto_groups: true) }
-  fab!(:topic) { Fabricate(:topic_with_op) }
-
-  let(:topic_page) { PageObjects::Pages::Topic.new }
-  let(:composer) { PageObjects::Components::Composer.new }
-
-  before do
-    upload_theme
-    sign_in(current_user)
-  end
-
-  it "does not show composer peek for small windows" do
-    topic_page.visit_topic(topic)
-    topic_page.click_footer_reply
-    expect(composer).to be_opened
-
-    resize_window(width: 600) { expect(page).to have_no_css(".peek-mode-toggle") }
-  end
-
-  it "turns on composer peek and remembers this preference on page load" do
-    topic_page.visit_topic(topic)
-    topic_page.click_footer_reply
-    expect(composer).to be_opened
-
-    resize_window(width: 1380) do
-      find(".peek-mode-toggle").click
-      expect(page).to have_css("body.peek-mode-active")
-
-      topic_page.visit_topic(topic)
-      topic_page.click_footer_reply
-      expect(composer).to be_opened
-      expect(page).to have_css("body.peek-mode-active")
-
-      find(".peek-mode-toggle").click
-      expect(page).to have_no_css("body.peek-mode-active")
-    end
-  end
-
-  it "hides the composer preview when toggling" do
-    topic_page.visit_topic(topic)
-    topic_page.click_footer_reply
-    expect(composer).to be_opened
-    expect(composer).to have_composer_preview
-
-    resize_window(width: 1380) do
-      find(".peek-mode-toggle").click
-      expect(page).to have_css("body.peek-mode-active")
-      expect(composer).to have_no_composer_preview
-    end
-  end
-end

spec/system/core_features_spec.rb

@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-
-RSpec.describe "Core features", type: :system do
-  fab!(:current_user) { Fabricate(:user, refresh_auto_groups: true) }
-  let(:composer) { PageObjects::Components::Composer.new }
-
-  before { upload_theme_or_component }
-
-  it_behaves_like "having working core features",
-                  skip_examples: %i[search:quick_search topics:create]
-
-  it "creates a new topic" do
-    sign_in(current_user)
-    visit("/new-topic")
-    composer.fill_title("This is a new topic")
-    composer.fill_content("This is a long enough sentence.")
-    expect(page).to have_css(".d-editor-preview p", visible: true)
-    within(".save-or-cancel") { click_button("Create Topic") }
-    expect(page).to have_content("This is a new topic")
-    expect(page).to have_content("This is a long enough sentence.")
-  end
-end

spec/system/horizon_high_level_spec.rb

@@ -1,16 +1,7 @@
 # frozen_string_literal: true
 
-require_relative "./page_objects/components/user_color_palette_selector"
-
 describe "Horizon theme | High level", type: :system do
-  let!(:theme) do
+  let!(:theme) { upload_theme }
-    horizon_theme = upload_theme
-    ColorScheme
-      .where(theme_id: horizon_theme.id)
-      .where.not("name LIKE '%Dark%'")
-      .update_all(user_selectable: true)
-    horizon_theme
-  end
   fab!(:current_user) { Fabricate(:user) }
   fab!(:tag_1) { Fabricate(:tag, name: "wow-cool") }
   fab!(:tag_2) { Fabricate(:tag, name: "another-tag") }
@@ -19,7 +10,6 @@ describe "Horizon theme | High level", type: :system do
   let(:topic_list) { PageObjects::Components::TopicList.new }
   let(:topic_page) { PageObjects::Pages::Topic.new }
   let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new }
-  let(:palette_selector) { PageObjects::Components::UserColorPaletteSelector.new }
 
   def run_all_high_level_tests
     expect(page).to have_css(".experimental-screen")
@@ -36,27 +26,25 @@ describe "Horizon theme | High level", type: :system do
     expect(topic_item.all("td").map { |el| el["class"] }).to eq(
       [
         "main-link topic-list-data",
+        "topic-activity-data",
         "topic-status-data",
         "topic-category-data",
         "topic-likes-replies-data",
-        "topic-activity-data",
       ],
     )
 
-    # Can see a topic in the list and navigate to it successfully.
+    # Can see a topic in the list and navigate to it successfully
     topic_list.visit_topic(topic_1)
     expect(topic_page).to have_topic_title(topic_1.title)
 
-    # Can change site colors from the sidebar palette, which are remembered
+    # Can change site colors from the sidebar palette, which are remembered across page reloads
-    # across page reloads.
+    palette_menu =
-    marigold_palette = ColorScheme.find_by(name: "Marigold")
+      PageObjects::Components::DMenu.new(find(".sidebar-footer-actions .user-color-palette"))
-    palette_selector.open_palette_menu
+    palette_menu.expand
-    palette_selector.click_palette_menu_item(marigold_palette.name)
+    find(".color-palette-menu__content .color-palette-menu__item[data-color='marigold']").click
-    expect(palette_selector).to have_no_palette_menu
+    expect(page).to have_css(".custom-color-marigold")
-
     page.refresh
-    expect(palette_selector).to have_selected_palette(marigold_palette)
+    expect(page).to have_css(".custom-color-marigold")
-    expect(palette_selector).to have_tertiary_color(marigold_palette)
   end
 
   it "works for anon" do

spec/system/page_objects/components/user_color_palette_selector.rb

@@ -1,53 +0,0 @@
-# frozen_string_literal: true
-
-module PageObjects
-  module Components
-    class UserColorPaletteSelector < PageObjects::Components::Base
-      def sidebar_footer_button_css
-        ".sidebar-footer-actions .user-color-palette-selector"
-      end
-
-      def palette_menu
-        PageObjects::Components::DMenu.new(find(sidebar_footer_button_css))
-      end
-
-      def open_palette_menu
-        palette_menu.expand
-      end
-
-      def has_no_palette_menu?
-        has_no_css?(".user-color-palette-selector-content")
-      end
-
-      def click_palette_menu_item(palette_name)
-        find(
-          ".user-color-palette-menu__content .user-color-palette-menu__item[data-color-palette='#{palette_name}']",
-        ).click
-      end
-
-      def has_selected_palette?(palette)
-        has_css?(".user-color-palette-selector[data-selected-color-palette-id='#{palette.id}']")
-      end
-
-      def has_loaded_css?
-        has_css?(".user-color-palette-selector.user-color-palette-css-loaded")
-      end
-
-      def has_tertiary_color?(palette)
-        computed_color_hex =
-          page.evaluate_script(
-            "getComputedStyle(document.documentElement).getPropertyValue('--tertiary')",
-          )
-        computed_color_hex == "#" + palette.colors.find { |color| color.name == "tertiary" }.hex
-      end
-
-      def has_computed_color?(color)
-        computed_background_color =
-          page.evaluate_script(
-            "getComputedStyle(document.querySelector(\"li.sidebar-section-link-wrapper[data-list-item-name='everything'] .active\")).backgroundColor",
-          )
-        computed_background_color == color
-      end
-    end
-  end
-end

spec/system/sidebar_topic_button_spec.rb

@@ -1,55 +0,0 @@
-# frozen_string_literal: true
-
-RSpec.describe "Sidebar New Topic Button", system: true do
-  before { upload_theme }
-  fab!(:group)
-  fab!(:user) { Fabricate(:user, trust_level: 3, groups: [group]) }
-  fab!(:category)
-  fab!(:private_category) do
-    c = Fabricate(:category_with_definition)
-    c.set_permissions(group => :readonly)
-    c.save
-    c
-  end
-
-  context "for signed in users" do
-    before { sign_in(user) }
-
-    it "renders the new topic button in the sidebar" do
-      visit("/latest")
-      expect(page).to have_css(".sidebar-new-topic-button__wrapper")
-      expect(page).to have_css(".sidebar-new-topic-button:not(.disabled)")
-    end
-
-    it "opens the composer when clicked" do
-      visit("/")
-      find(".sidebar-new-topic-button").click
-      expect(page).to have_css("#reply-title")
-    end
-
-    it "shows draft menu when drafts exist" do
-      Draft.create!(user: user, draft_key: "topic_1", data: {})
-
-      visit("/")
-      expect(page).to have_css(".sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger")
-    end
-
-    it "disables button when visiting read-only category" do
-      visit("/c/#{private_category.slug}/#{private_category.id}")
-
-      expect(page).to have_css(".sidebar-new-topic-button[disabled]")
-
-      visit("/c/#{category.slug}/#{category.id}")
-
-      expect(page).not_to have_css(".sidebar-new-topic-button[disabled]")
-    end
-  end
-
-  context "for anon" do
-    it "does not render the sidebar button for anons" do
-      visit("/latest")
-      expect(page).not_to have_css(".sidebar-new-topic-button__wrapper")
-      expect(page).not_to have_css(".sidebar-new-topic-button:not(.disabled)")
-    end
-  end
-end

spec/system/user_color_palette_selector_spec.rb

@@ -1,119 +0,0 @@
-# frozen_string_literal: true
-
-require_relative "./page_objects/components/user_color_palette_selector"
-
-describe "Horizon theme | User color palette selector", type: :system do
-  let(:set_theme_as_default) { true }
-  let!(:theme) do
-    horizon_theme = upload_theme(set_theme_as_default: set_theme_as_default)
-    ColorScheme.where(theme_id: horizon_theme.id).update_all(user_selectable: true)
-    horizon_theme
-  end
-  fab!(:current_user) { Fabricate(:user) }
-  let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new }
-  let(:palette_selector) { PageObjects::Components::UserColorPaletteSelector.new }
-  let(:interface_color_mode) { PageObjects::Components::InterfaceColorMode.new }
-  let(:interface_color_selector) do
-    PageObjects::Components::InterfaceColorSelector.new(".sidebar-footer-actions")
-  end
-  let(:marigold_palette) { ColorScheme.find_by(name: "Marigold") }
-  let(:marigold_palette_dark) { ColorScheme.find_by(name: "Marigold Dark") }
-
-  before { SiteSetting.interface_color_selector = "sidebar_footer" }
-
-  it "does not show the sidebar button if there are no user-selectable color palettes" do
-    ColorScheme.update_all(user_selectable: false)
-    visit "/"
-    expect(page).to have_no_css(palette_selector.sidebar_footer_button_css)
-  end
-
-  describe "for logged in user" do
-    before { sign_in(current_user) }
-
-    it "can open the user color palette menu and select a palette, which is preseved on reload" do
-      visit "/"
-      palette_selector.open_palette_menu
-      palette_selector.click_palette_menu_item(marigold_palette.name)
-
-      expect(palette_selector).to have_no_palette_menu
-      expect(palette_selector).to have_selected_palette(marigold_palette)
-      expect(palette_selector).to have_loaded_css
-      expect(palette_selector).to have_tertiary_color(marigold_palette)
-
-      page.refresh
-      expect(palette_selector).to have_selected_palette(marigold_palette)
-    end
-
-    it "uses the dark version of the palette if the user selects dark mode" do
-      visit "/"
-      palette_selector.open_palette_menu
-      palette_selector.click_palette_menu_item(marigold_palette.name)
-
-      expect(palette_selector).to have_no_palette_menu
-      expect(palette_selector).to have_selected_palette(marigold_palette)
-      expect(palette_selector).to have_loaded_css
-      expect(palette_selector).to have_computed_color("oklch(0.92 0.0708528 68.5036)")
-
-      interface_color_selector.expand
-      interface_color_selector.dark_option.click
-      expect(interface_color_mode).to have_dark_mode_forced
-      expect(palette_selector).to have_computed_color("oklch(0.481966 0.0354264 68.5036)")
-
-      page.refresh
-      expect(palette_selector).to have_selected_palette(marigold_palette)
-      expect(palette_selector).to have_computed_color("oklch(0.481966 0.0354264 68.5036)")
-    end
-
-    context "when the theme is not default but is selected by a user" do
-      let(:set_theme_as_default) { false }
-
-      it "can open the user color palette menu and select a palette, which is preseved on reload" do
-        theme.update!(user_selectable: true)
-        current_user.user_option.update!(theme_ids: [theme.id])
-        visit "/"
-        palette_selector.open_palette_menu
-        palette_selector.click_palette_menu_item(marigold_palette.name)
-
-        expect(palette_selector).to have_no_palette_menu
-        expect(palette_selector).to have_selected_palette(marigold_palette)
-        expect(palette_selector).to have_loaded_css
-        expect(palette_selector).to have_tertiary_color(marigold_palette)
-      end
-    end
-  end
-
-  describe "for anon" do
-    it "can open the user color palette menu and select a palette, which is preseved on reload" do
-      visit "/"
-      palette_selector.open_palette_menu
-      palette_selector.click_palette_menu_item(marigold_palette.name)
-
-      expect(palette_selector).to have_no_palette_menu
-      expect(palette_selector).to have_selected_palette(marigold_palette)
-      expect(palette_selector).to have_loaded_css
-      expect(palette_selector).to have_tertiary_color(marigold_palette)
-    end
-
-    it "uses the dark version of the palette if the user selects dark mode, which is preserved on reload" do
-      visit "/"
-      palette_selector.open_palette_menu
-      palette_selector.click_palette_menu_item(marigold_palette.name)
-
-      expect(palette_selector).to have_no_palette_menu
-      expect(palette_selector).to have_selected_palette(marigold_palette)
-      expect(palette_selector).to have_loaded_css
-      expect(palette_selector).to have_computed_color("oklch(0.92 0.0708528 68.5036)")
-
-      interface_color_selector.expand
-      interface_color_selector.dark_option.click
-      expect(interface_color_mode).to have_dark_mode_forced
-      expect(palette_selector).to have_selected_palette(marigold_palette)
-      expect(palette_selector).to have_loaded_css
-      expect(palette_selector).to have_computed_color("oklch(0.481966 0.0354264 68.5036)")
-
-      page.refresh
-      expect(palette_selector).to have_selected_palette(marigold_palette)
-      expect(palette_selector).to have_computed_color("oklch(0.481966 0.0354264 68.5036)")
-    end
-  end
-end

stylelint.config.mjs

@@ -1,3 +0,0 @@
-export default {
-  extends: ["@discourse/lint-configs/stylelint"],
-};