header search alignment

Followup dfa22d21b6,
the search banner has been replaced in core
with the welcome banner, this is no longer needed,
c.f. https://github.com/discourse/discourse/pull/31516

about.json

@@ -13,17 +13,14 @@
   },
   "components": [
     "https://github.com/discourse/discourse-sidebar-new-topic-button.git",
-    "https://github.com/discourse/discourse-search-banner.git",
     "https://github.com/discourse/discourse-full-width-component.git"
   ],
   "color_schemes": {
     "Horizon": {
       "primary": "1A1A1A",
-      "primary-low": "ebecf9",
-      "primary-500": "8591ad",
       "secondary": "ffffff",
       "header_background": "f5f8ff",
-      "tertiary": "313270",
+      "tertiary": "595bca",
       "tertiary-low": "d8d9f3",
       "tertiary-50": "f5f8ff",
       "selected": "d8d9f3",

common/common.scss

@@ -1,14 +1,17 @@
+@import "box-view";
 @import "buttons";
+@import "chat";
+@import "color-choice";
+@import "color-exploration";
+@import "composer";
 @import "header";
 @import "hiddenstuff";
 @import "main";
+@import "misc";
+@import "mobile-stuff";
 @import "nav-pills";
 @import "search-banner";
 @import "sidebar";
 @import "topic";
 @import "topic-cards";
 @import "variables";
-@import "box-view";
-@import "chat";
-@import "misc";
-@import "mobile-stuff";

javascripts/discourse/api-initializers/next-gen.gjs

@@ -1,6 +1,8 @@
 import { apiInitializer } from "discourse/lib/api";
+import CustomColorHtmlClass from "../components/custom-color-html-class";
 import ExperimentalScreen from "../components/experimental-screen";
 
 export default apiInitializer("1.8.0", (api) => {
   api.renderInOutlet("above-main-container", ExperimentalScreen);
+  api.renderInOutlet("above-main-container", CustomColorHtmlClass);
 });

javascripts/discourse/api-initializers/user-pallette.js

@@ -0,0 +1,6 @@
+import { apiInitializer } from "discourse/lib/api";
+import CustomUserPalette from "../components/custom-user-palette";
+
+export default apiInitializer("1.8.0", (api) => {
+  api.renderInOutlet("sidebar-footer-actions", CustomUserPalette);
+});

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

@@ -1,7 +1,8 @@
 import icon from "discourse/helpers/d-icon";
+import gt from "truth-helpers/helpers/gt";
 
 const TopicRepliesColumn = <template>
-  {{#if @topic.posts_count}}
+  {{#if (gt @topic.posts_count 1)}}
     <span class="topic-replies">{{icon "reply"}}{{@topic.posts_count}}</span>
   {{/if}}
 </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/site-palette-menu-item.gjs

@@ -0,0 +1,41 @@
+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 SitePaletteMenuItem extends Component {
+  @service customColor;
+
+  get siteStyle() {
+    return `--icon-color: ${this.args.colorPalette.color}`;
+  }
+
+  get activeClass() {
+    if (this.customColor.color === this.args.colorPalette.name) {
+      return "active";
+    }
+  }
+
+  @action
+  handleInput(colorPalette) {
+    this.customColor.setColor(colorPalette.name);
+  }
+
+  <template>
+    <div class="color-palette-menu__item" data-color={{@colorPalette.name}}>
+      <DButton
+        class={{concatClass
+          "btn-flat color-palette-menu__item-choice"
+          this.activeClass
+        }}
+        style={{htmlSafe this.siteStyle}}
+        @icon="circle"
+        @translatedLabel={{@colorPalette.label}}
+        @action={{fn this.handleInput @colorPalette}}
+      />
+    </div>
+  </template>
+}

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

@@ -1,6 +1,6 @@
 en:
   theme_metadata:
-    description: "A simple, beautiful theme for the future of Discourse that improves the out of the box experience for sites."
+    description: "A simple, beautiful theme that improves the out of the box experience for Discourse sites."
   topic_bookmarked: "Bookmarked"
   topic_closed_archived: "Closed and archived"
   topic_closed: "Closed"

mobile/mobile.scss

@@ -1,3 +0,0 @@
-#main-outlet-wrapper {
-  padding: 0;
-}

scss/box-view.scss

@@ -17,8 +17,18 @@
   }
 }
 
-.has-full-page-chat .experimental-screen {
+.has-full-page-chat .chat-replying-indicator-container {
-  display: none;
+  margin-bottom: var(--d-border-radius-large);
+  @include breakpoint(medium) {
+    margin-bottom: 0;
+  }
+}
+
+.has-full-page-chat .chat-selection-management {
+  margin-bottom: var(--d-border-radius-large);
+  @include breakpoint(medium) {
+    margin-bottom: 0;
+  }
 }
 
 .experimental-screen {
@@ -26,9 +36,6 @@
     display: none;
   }
   max-width: unset !important;
-  .has-full-page-chat & {
-    display: none;
-  }
   @media screen and (max-width: 488px) {
     display: none;
   }

scss/buttons.scss

@@ -6,95 +6,57 @@
   transition: none;
 }
 
-.btn-default,
-.btn-primary,
-.btn-danger,
-.select-kit .select-kit-header {
-  padding: var(--spacing-block-s) var(--spacing-inline-m);
-  // font-size: var(--font-up-1-rem);
-  // border-radius: var(--d-button-border-radius);
-
-  &.no-text {
-    padding-inline: 0.665rem;
-  }
-}
-
 .sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger.btn.no-text {
   background: var(--accent-color);
-  &:hover {
+  &:hover,
-    background: radial-gradient(
+  &:focus-visible {
-        90% 110% at 50% 50%,
+    background: oklch(from var(--accent-color) 40% c h) !important;
-        rgba(255, 255, 255, 0.3) 0%,
+    box-shadow: none;
-        rgba(255, 255, 255, 0) 100%
-      ),
-      var(--accent-color);
   }
-  svg {
+  .d-icon {
     color: var(--accent-text-color);
   }
 }
 
+.discourse-no-touch .dropdown-menu__item .btn {
+  background: transparent;
+}
+
 .discourse-no-touch .btn-default.sidebar-new-topic-button,
-.discourse-no-touch .interface-color-selector-content .btn-default {
+.discourse-no-touch .btn-default,
-  border: none;
+.discourse-no-touch .select-kit .select-kit-header.btn-default {
-  &:hover {
+  background: var(--primary-100);
-    border: none;
-    box-shadow: none;
-  }
-}
-
-.discourse-no-touch .btn-default.topic-drafts-menu-trigger {
-  border: none;
-  margin-left: 2px;
-  &:hover {
-    border: none;
-    box-shadow: none;
-  }
-}
-
-.btn-default {
-  border: 1px solid var(--primary-300);
-  background: var(--secondary);
-
   .d-icon {
     color: var(--accent-color);
   }
 
   &:hover {
-    .discourse-no-touch & {
+    border-color: transparent;
-      border: 1px solid var(--accent-color);
+    box-shadow: 0px 0px 8px 1px var(--button-box-shadow);
-      box-shadow: 0px 0px 8px 2px var(--button-box-shadow);
+    background: var(--d-content-background);
-      background: var(--secondary);
+    color: var(--accent-color);
-      color: var(--primary);
+    .d-icon {
-      .d-icon {
+      color: var(--accent-color);
-        color: var(--accent-color);
-      }
     }
   }
   &:focus-visible {
-    .discourse-no-touch & {
+    background: var(--d-content-background);
-      background: var(--secondary);
+    color: var(--accent-color);
+    box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
+    .d-icon {
       color: var(--accent-color);
-      box-shadow: 0px 0px 0px 2px var(--secondary),
+    }
-        0px 0px 0px 4px var(--button-box-shadow);
+  }
-      .d-icon {
+  &:active:not(:hover, :focus) {
-        color: var(--accent-color);
+    color: var(--primary);
-      }
+    background: var(--tertiary-300);
-    }
+    background-image: none;
-  }
+    .d-icon {
-}
+      color: var(--tertiary-high);
-//not shared with select-kit
-.btn-default {
-  &:active {
-    .discourse-no-touch & {
-      color: var(--secondary);
-      background: oklch(from var(--accent-color) 30% c h) !important;
-      .d-icon {
-        color: var(--secondary);
-      }
     }
   }
 }
+
 .btn-primary,
 #create-topic.btn {
   background-color: var(--accent-color);
@@ -104,50 +66,22 @@
   }
   &:hover {
     .discourse-no-touch & {
-      background: radial-gradient(
+      background: oklch(from var(--accent-color) 40% c h) !important;
-          90% 110% at 50% 50%,
-          rgba(255, 255, 255, 0.3) 0%,
-          rgba(255, 255, 255, 0) 100%
-        ),
-        var(--accent-color);
       box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
+      color: var(--accent-text-color);
+      .d-icon {
+        color: var(--accent-text-color);
+      }
     }
   }
   &:focus-visible {
     .discourse-no-touch & {
-      background: radial-gradient(
+      background: oklch(from var(--accent-color) 40% c h) !important;
-          90% 110% at 50% 50%,
+      box-shadow: 0px 0px 0px 4px var(--button-box-shadow);
-          rgba(255, 255, 255, 0.3) 0%,
+      color: var(--accent-text-color);
-          rgba(255, 255, 255, 0) 100%
-        ),
-        var(--accent-color);
-      box-shadow: 0px 0px 0px 2px var(--secondary),
-        0px 0px 0px 4px var(--button-box-shadow);
     }
   }
   &:active {
-    .discourse-no-touch & {
+    background: oklch(from var(--accent-color) 30% c h) !important;
-      // background: radial-gradient(
-      //     65% 95% at 50% 50%,
-      //     rgba(0, 0, 0, 0.4) 0%,
-      //     rgba(0, 0, 0, 0) 100%
-      //   ),
-      //   var(--accent-color) !important;
-      background: oklch(from var(--accent-color) 30% c h) !important;
-    }
   }
 }
-
-.post-controls {
-  svg.d-icon {
-    color: inherit !important; //something we should honestly implement in core imo, when do we ever NOT want the same colour for icon and text?
-  }
-}
-
-//undoing the outline for select-kit, since Im using a custom visual cue
-.select-kit.single-select.is-expanded .select-kit-header:not(.btn),
-.select-kit.single-select .select-kit-header:not(.btn):focus,
-.select-kit.single-select .select-kit-header:not(.btn):active {
-  outline: transparent;
-  border-color: var(--accent-color);
-}

scss/chat.scss

@@ -1,12 +1,8 @@
 .full-page-chat.full-page-chat-sidebar-enabled {
-  border-top-left-radius: var(--d-border-radius-large);
-  border-top-right-radius: var(--d-border-radius-large);
   border: none;
 }
 
 .c-navbar-container {
-  border-top-left-radius: var(--d-border-radius-large);
-  border-top-right-radius: var(--d-border-radius-large);
   padding: 0 1.5em;
   background-color: var(--d-content-background);
 }
@@ -15,9 +11,17 @@ body.has-full-page-chat {
   background-color: var(--background-color);
 }
 
-.chat-drawer .chat-drawer-container {
+.chat-drawer-container {
-  box-shadow: 0px 0px 0px 2px var(--d-chat-border);
+  .is-expanded & {
-  border: none;
+    box-shadow: 0px 0px 0px 2px var(--d-chat-border);
+  }
+  .chat-drawer.is-expanded & {
+    border: none;
+  }
+}
+
+.chat-drawer-outlet-container {
+  z-index: z("composer", "content");
 }
 
 .chat-drawer .channels-list-container .chat-channel-row {
@@ -35,3 +39,15 @@ body.has-full-page-chat {
   text-transform: uppercase;
   font-size: var(--font-down-1);
 }
+
+.chat-composer__wrapper {
+  background: var(--d-content-background);
+}
+
+.chat-message-actions .more-buttons .btn-icon-text {
+  &:hover {
+    background-color: var(--d-selected);
+    box-shadow: none;
+    color: var(--primary);
+  }
+}

scss/color-choice.scss

@@ -0,0 +1,49 @@
+.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);
+  }
+}
+
+.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

@@ -0,0 +1,121 @@
+: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);
+  --link-color: light-dark(
+    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),
+    oklch(from var(--d-selected) calc(l * 0.7) c h)
+  );
+  --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)
+  );
+  --d-sidebar-highlight-suffix-color: var(--d-sidebar-active-suffix-color);
+  --d-sidebar-highlight-color: var(--primary);
+  --d-sidebar-highlight-background: var(--d-selected);
+  --d-sidebar-section-link-icon-size: 1em;
+  --d-input-bg-color: var(--d-content-background);
+  --tertiary-hover: var(--accent-color);
+}

scss/composer.scss

@@ -0,0 +1,40 @@
+#reply-control
+  .select-kit.dropdown-select-box.composer-actions
+  .select-kit-header {
+  border: 1px solid var(--tertiary-700);
+  background: var(--secondary);
+  &:hover {
+    .d-icon {
+      color: var(--accent-color);
+    }
+  }
+}
+.d-editor-button-bar {
+  .btn:hover,
+  .toolbar-popup-menu-options.is-expanded {
+    .discourse-no-touch & {
+      background: var(--tertiary-very-low);
+      color: var(--accent-color);
+
+      .d-icon {
+        color: inherit;
+      }
+
+      //to have parity with regular select-kit styling used elsewhere
+      .select-kit-row {
+        .d-icon {
+          color: var(--primary-high);
+        }
+        &:hover {
+          .d-icon {
+            color: var(--primary);
+          }
+        }
+      }
+    }
+  }
+
+  .toolbar-popup-menu-options.is-expanded {
+    border-radius: var(--d-border-radius);
+  }
+}

scss/header.scss

@@ -2,7 +2,7 @@
   box-shadow: none;
   background: var(--background-color);
   @include breakpoint(extra-large, $rule: min-width) {
-    padding-bottom: 1.5em;
+    padding-bottom: 1em;
   }
 }
 
@@ -30,3 +30,179 @@
 .user-menu.revamped .tabs-list .btn.active {
   background: var(--d-hover);
 }
+
+.discourse-no-touch .d-header-icons .icon:hover,
+.discourse-no-touch .d-header-icons .icon:focus,
+.header-sidebar-toggle button:focus:hover,
+.discourse-no-touch .header-sidebar-toggle button:hover {
+  background-color: transparent;
+}
+
+.discourse-no-touch .d-header-icons .icon:hover > .d-icon,
+.drop-down-mode .d-header-icons .active .icon > .d-icon,
+.drop-down-mode
+  .d-header-icons
+  .header-color-scheme-toggle
+  .-expanded
+  > .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;
+    }
+  }
+}
+
+.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;
+}
+
+.badge-notification {
+  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,
+body.password-reset-page,
+body.activate-account-page {
+  .d-header {
+    background: var(--background-color);
+  }
+}
+
+// attempt to center the title
+// by mirroring the body grid
+
+.has-sidebar-page {
+  .d-header > .wrap {
+    .contents {
+      display: grid;
+      grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr);
+      grid-template-rows: auto;
+      gap: 0; // gap will ruin the alignment
+
+      .header-sidebar-toggle,
+      .home-logo-wrapper-outlet {
+        grid-column: 1;
+        grid-row: 1;
+        justify-self: start;
+      }
+
+      .home-logo-wrapper-outlet {
+        margin-left: 3.5em;
+        margin-right: 0;
+        max-width: 13em; // crosses into column 2 beyond this
+        overflow: hidden;
+      }
+
+      .extra-info-wrapper {
+        grid-column: 2;
+        grid-row: 1;
+
+        justify-self: center;
+
+        max-width: 59em; // width of topic + timeline
+        padding: 0;
+
+        @media screen and (max-width: 1350px) {
+          justify-self: start;
+
+          box-sizing: border-box;
+          padding-left: 3em;
+        }
+      }
+
+      .panel {
+        grid-column: 2;
+        grid-row: 1;
+        justify-self: end;
+
+        padding-right: 1em;
+
+        // the title and panel don't exist on the same plane
+        // so we let the panel overlap the title
+        // and fade it out so it looks intentional
+
+        background: var(--background-color);
+
+        @media screen and (max-width: 850px) {
+          background: var(--secondary);
+        }
+
+        &:before {
+          content: "";
+          background: linear-gradient(
+            90deg,
+            rgba(255, 255, 255, 0) 0%,
+            var(--background-color) 80%
+          );
+          @media screen and (max-width: 850px) {
+            background: linear-gradient(
+              90deg,
+              rgba(255, 255, 255, 0) 0%,
+              var(--secondary) 80%
+            );
+          }
+          top: -0.5em;
+          bottom: 0;
+          height: 4em;
+          width: 3em;
+          left: -3em;
+          position: absolute;
+          display: flex;
+        }
+      }
+
+      // these will probably cause problems when used
+      .before-header-panel-outlet,
+      .after-header-panel-outlet {
+        grid-row: 1;
+      }
+
+      .before-header-panel-outlet {
+        &:has(.search-banner) {
+          grid-column: 2;
+        }
+
+        @media screen and (max-width: 1280px) {
+          .floating-search-input {
+            margin-left: 2.75em;
+            padding-right: 15em;
+          }
+        }
+      }
+    }
+  }
+
+  @media screen and (max-width: 1000px) {
+    &.search-header--visible
+      .floating-search-input
+      .search-banner-inner.wrap
+      .search-menu {
+      width: 100%;
+    }
+  }
+}

scss/hiddenstuff.scss

@@ -1,5 +1,4 @@
 .sidebar__panel-switch-button,
-.sidebar-section[data-section-name="messages"],
 .list-controls #create-topic,
 .notifications-button-footer .reason .text,
 .pinned-button .reason .text,

scss/main.scss

@@ -1,13 +1,14 @@
-html:not(:has(.has-full-page-chat)) {
-  // @include breakpoint(extra-large, $rule: min-width) {
-  background-color: var(--background-color);
-  // }
-}
-
 :root {
   --main-grid-gap: 2em;
 }
 
+html:not(:has(.has-full-page-chat)) {
+  background-color: var(--background-color);
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+}
 #main-outlet-wrapper {
   gap: var(--main-grid-gap);
 }
@@ -21,22 +22,26 @@ body.has-full-page-chat:not(.has-sidebar-page) {
     background-color: var(--background-color);
   }
   #main-outlet-wrapper {
-    --main-grid-gap: 0;
+    gap: var(--main-grid-gap);
-    .full-page-chat.full-page-chat-sidebar-enabled,
+    @include breakpoint(medium) {
-    .c-navbar-container {
+      gap: 0;
-      border-top-right-radius: 0;
-      border-top-left-radius: 0;
     }
   }
 }
 
 body.has-sidebar-page #main-outlet-wrapper {
-  grid-template-columns: var(--d-sidebar-width) 1fr 0px;
+  grid-template-columns: var(--d-sidebar-width) minmax(0, 1fr) 0px;
   #main-outlet {
     max-width: unset;
   }
 }
 
+body:not(.has-sidebar-page) #main-outlet-wrapper {
+  @include breakpoint(medium, $rule: min-width) {
+    grid-template-columns: 0px minmax(0, 1fr) 0px;
+  }
+}
+
 body:not(.has-full-page-chat) {
   @include breakpoint(extra-large, $rule: min-width) {
     background-color: var(--background-color);
@@ -48,23 +53,10 @@ body:not(.has-full-page-chat) {
     @include breakpoint(tablet, $rule: min-width) {
       gap: var(--main-grid-gap);
     }
-    // height: calc(100vh - var(--header-offset) - 4rem);
-    // box-sizing: border-box;
-    // > * {
-    // height: inherit;
-    // box-sizing: border-box;
-    // }
     #main-outlet {
       width: 100%;
       padding-bottom: var(--spacing-block-l);
-      // height: inherit;
+      max-width: unset;
-      // overflow: scroll;
-      // &:has(.list-controls) {
-      // padding-top: 0;
-      // }
-      // &:has(#topic-title) {
-      // padding-top: 0;
-      // }
       //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,
       .list-container,
@@ -72,8 +64,8 @@ body:not(.has-full-page-chat) {
       .container.posts,
       #topic-footer-buttons,
       .more-topics__container,
-      .search-banner,
+      .welcome-banner,
-      .container.viewing-self,
+      .container .user-main,
       .reviewable,
       .admin-content,
       .discourse-post-event-upcoming-events,
@@ -82,26 +74,35 @@ body:not(.has-full-page-chat) {
       .container.badges,
       .topic-above-footer-buttons-outlet .presence-users,
       .global-notice {
-        max-width: 1000px;
+        @include breakpoint(medium, $rule: min-width) {
-        margin-inline: auto;
+          max-width: 1000px;
-        padding-inline: 1.5em;
+          margin-inline: auto;
+          padding-inline: var(--spacing-inline-l);
+        }
       }
       border-radius: var(--d-border-radius-large);
       @include breakpoint(medium) {
         border-radius: 0px;
       }
-      border-radius: 1.25rem;
-      // box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
       background-color: var(--d-content-background);
     }
   }
-
-  // .global-notice {
-  //   margin-top: var(--spacing-block-m);
-  // }
 }
 
-.list-container {
+#list-area {
+  .show-more.has-topics {
+    @include breakpoint(medium, $rule: min-width) {
+      width: auto;
+      right: 50%;
+      transform: translateX(50%);
+
+      .alert {
+        padding: var(--spacing-block-sm) var(--spacing-inline-m);
+        border-radius: var(--d-border-radius-large);
+        font-size: var(--font-down-1-rem);
+      }
+    }
+  }
   .topic-list-body {
     padding-top: var(--spacing-block-m);
   }
@@ -112,9 +113,7 @@ aside.onebox {
 }
 
 .d-editor-preview-wrapper {
-  box-shadow: 0px 0px 1px 2px var(--tertiary-50),
+  border-radius: var(--d-border-radius);
-    0px 0px 24px 4px var(--tertiary-50);
-  border-radius: var(--d-border-radius-large);
   padding: 1em;
   background-color: var(--d-content-background);
 }

scss/misc.scss

@@ -44,7 +44,57 @@
   padding: 3px;
 }
 
-a,
+.open .grippie {
-a:visited {
+  background-color: var(--accent-color);
-  color: var(--accent-color);
+}
+
+.d-editor-textarea-wrapper.in-focus,
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus,
+input[type="date"]:focus,
+input[type="month"]:focus,
+input[type="time"]:focus,
+input[type="week"]:focus,
+input[type="number"]:focus,
+input[type="email"]:focus,
+input[type="url"]:focus,
+input[type="search"]:focus,
+input[type="tel"]:focus,
+input[type="color"]:focus,
+.select-kit.multi-select.is-expanded .multi-select-header,
+.select-kit.multi-select .multi-select-header:focus {
+  border-color: var(--accent-color);
+  outline: 2px solid var(--accent-color);
+}
+
+#reply-control {
+  background-color: var(--background-color);
+}
+
+.fk-d-menu__trigger.topic-list-layout-trigger {
+  display: none;
+}
+
+.search-container .search-header,
+.search-container .search-bar,
+.search-container .search-filters,
+.search-container .search-filters .search-advanced-filters {
+  background-color: var(--d-content-background);
+}
+
+.user-main .about .details {
+  padding: 1em 1em 0;
+  border-bottom: 0px;
+  border-radius: var(--d-border-radius);
+  background-color: var(--primary-50);
+}
+
+.alert.alert-info {
+  background: var(--tertiary-very-low);
+}
+
+.discourse-reactions-list .reactions {
+  gap: 0.15em;
 }

scss/mobile-stuff.scss

@@ -6,7 +6,7 @@
   }
 }
 #main-outlet-wrapper {
-  .navigation-topics & {
+  *[class*="navigation-"] & {
     @include breakpoint(mobile-extra-large) {
       padding: 0;
     }
@@ -32,7 +32,9 @@
         .category-breadcrumb.hidden,
         .category-breadcrumb {
           display: flex !important;
-          gap: var(--spacing-inline-sm);
+          column-gap: var(--spacing-inline-s);
+          row-gap: var(--spacing-block-xs);
+          flex-basis: 100%;
           .select-kit-header {
             padding-block: var(--spacing-block-s);
             padding-inline: 0;
@@ -64,7 +66,9 @@
         }
       }
       .navigation-controls {
-        gap: var(--spacing-inline-s);
+        @include breakpoint(mobile-extra-large) {
+          gap: var(--spacing-inline-s);
+        }
       }
     }
   }
@@ -98,30 +102,48 @@
   #topic-title {
     @include breakpoint(mobile-extra-large) {
       padding-inline: var(--spacing-inline-m) !important;
+
+      .title-wrapper {
+        gap: var(--spacing-block-s);
+      }
       .topic-category {
         order: -1;
       }
       //make mixin of this
-      //   .badge-category__wrapper {
+      .badge-category__wrapper {
-      //     border-radius: var(--d-border-radius);
+        font-size: var(--font-down-2-rem);
-      //     padding: var(--spacing-inline-xs) var(--spacing-inline-s);
+        border-radius: var(--d-border-radius);
-      //     background-color: light-dark(
+        padding: var(--spacing-inline-xs) var(--spacing-inline-s);
-      //       oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
+        background-color: light-dark(
-      //       oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
+          oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
-      //     );
+          oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
-      //   }
+        );
+        border: 1px solid
+          light-dark(
+            oklch(from var(--category-badge-color) 97% calc(c * 0.3) h),
+            oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
+          );
+      }
 
-      //   .badge-category__name {
+      .badge-category__name {
-      //     color: light-dark(
+        color: light-dark(
-      //       oklch(from var(--category-badge-color) 20% calc(c * 1) h),
+          oklch(from var(--category-badge-color) 20% calc(c * 1) h),
-      //       oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
+          oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
-      //     );
+        );
-      //   }
+      }
+      .discourse-tag {
+        font-size: var(--font-down-2-rem);
+        padding: var(--spacing-inline-xs) var(--spacing-inline-s);
+        gap: var(--spacing-inline-xs);
+        border-radius: var(--d-border-radius-large);
+        border: 1px solid var(--primary-low-mid);
+        background: var(--secondary);
+      }
     }
   }
   .container.posts {
     @include breakpoint(mobile-extra-large) {
-      padding-inline: var(--spacing-inline-m) !important;
+      padding-inline: var(--spacing-inline-xs) !important;
 
       .main-avatar .avatar {
         width: 40px;
@@ -137,11 +159,51 @@
         }
         .contents {
           padding-top: var(--spacing-block-m);
-          p {
+        }
-            line-height: 1.65;
+      }
+      .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);
           }
         }
       }
     }
   }
+
+  #topic-footer-buttons {
+    @include breakpoint(mobile-extra-large) {
+      padding-inline: var(--spacing-inline-xs) !important;
+    }
+  }
+}
+
+//should be changed in core, should not be a primary btn
+//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);
+  }
 }

scss/nav-pills.scss

@@ -20,7 +20,16 @@
     // font-size: var(--font-up-1-rem);
     &:hover {
       border: 1px solid var(--accent-color);
-      box-shadow: 0px 0px 8px 2px var(--button-box-shadow);
+    }
+    &:focus-visible {
+      .discourse-no-touch & {
+        background: var(--secondary);
+        color: var(--accent-color);
+        box-shadow: 0px 0px 0px 3px var(--button-box-shadow);
+        .d-icon {
+          color: var(--accent-color);
+        }
+      }
     }
   }
   .select-kit.combo-box.category-drop.has-selection
@@ -36,15 +45,17 @@
 
 .nav-pills > li > a:hover,
 .nav-pills > li button:hover {
-  background: transparent;
+  .discourse-no-touch & {
-  color: var(--accent-color);
+    background: transparent;
-  &::after {
+    color: var(--accent-color);
-    content: "";
+    &::after {
-    position: absolute;
+      content: "";
-    left: 0;
+      position: absolute;
-    bottom: 0;
+      left: 0;
-    right: 0;
+      bottom: 0;
-    height: var(--d-nav-underline-height);
+      right: 0;
-    background: var(--accent-color);
+      height: var(--d-nav-underline-height);
+      background: var(--accent-color);
+    }
   }
 }

scss/search-banner.scss

@@ -7,13 +7,12 @@
   border-bottom: 1px solid var(--primary-300);
   padding: 1.5em 0 2.5em;
   margin-bottom: 0;
-  @media screen and (max-width: 900px) {
+  @media screen and (max-width: 768px) {
-    padding-bottom: 1em;
+    padding: 1em;
   }
   h1 {
     grid-column: 1/2;
     grid-row: 1/-1;
-    padding: 0 1em;
     text-align: left;
     align-self: center;
     margin: 0;

scss/sidebar.scss

@@ -1,8 +1,12 @@
-.sidebar-wrapper {
+.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 &,
@@ -17,10 +21,6 @@
     padding: 0;
   }
   .sidebar-section-link {
-    font-size: var(--font-up-1);
-    // dont want to change fonts here just yet as font-size can be changed as a user pref.
-    // – charlie: sure but I want it to be bigger by default
-    // letter-spacing: 0.5px;
     transition: none;
     border-radius: var(--d-border-radius);
   }
@@ -29,18 +29,31 @@
   }
 }
 .sidebar-section-wrapper {
-  padding-block: 0.45em;
+  @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-1);
+    font-size: var(--font-down-2);
   }
   .sidebar-section-content {
     margin: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-block-xs);
+    @include breakpoint(extra-large, $rule: min-width) {
+      gap: var(--spacing-block-xs);
+    }
   }
 }
 
+.sidebar-wrapper .sidebar-sections {
+  --scrollbarThumbBg: var(--d-selected);
+}
+
 .sidebar-section-link-wrapper .sidebar-section-link:focus,
 .sidebar-section-link-wrapper .sidebar-section-link:hover {
   .d-icon {
@@ -49,11 +62,9 @@
 }
 
 .sidebar-new-topic-button__wrapper {
-  margin-bottom: 1.5rem;
+  margin: 0 var(--spacing-inline-m) var(--spacing-block-l);
-  @media screen and (max-width: 1000px) {
+  .sidebar-new-topic-button .d-icon {
-    .sidebar-new-topic-button .d-icon {
+    display: none;
-      display: none;
-    }
   }
 }
 

scss/topic-cards.scss

@@ -17,6 +17,9 @@ $extra-large: 1280px;
 
 .topic-list > .topic-list-body > .topic-list-item.last-visit {
   border-bottom: 1px solid var(--primary-300);
+  &:hover {
+    border-color: var(--accent-color);
+  }
 }
 
 .topic-list-body {
@@ -29,7 +32,7 @@ $extra-large: 1280px;
   }
 }
 
-body.bulk-select-enabled .topic-list-item {
+.bulk-select-enabled .topic-list-item {
   grid-template-areas:
     "bulk-select avatar author status status . activity"
     ". topic-title topic-title topic-title likes-replies likes-replies category";
@@ -97,7 +100,6 @@ body.user-messages-page .topic-list-item {
 }
 
 .topic-list-item {
-  -webkit-font-smoothing: antialiased;
   text-overflow: ellipsis;
   padding: 0.75em 1rem;
   border: 1px solid var(--primary-300);
@@ -107,6 +109,9 @@ body.user-messages-page .topic-list-item {
   grid-template-areas:
     "avatar author status status . . activity"
     ". topic-title topic-title topic-title likes-replies likes-replies category";
+  grid-column-gap: 12px;
+  grid-row-gap: 8px;
+  border-radius: var(--d-border-radius);
   &.excerpt-expanded {
     grid-template-columns: 44px repeat(6, 1fr) auto;
     grid-template-rows: 22px auto auto 30px;
@@ -134,9 +139,6 @@ body.user-messages-page .topic-list-item {
       }
     }
   }
-  grid-column-gap: 12px;
-  grid-row-gap: 8px;
-  border-radius: var(--d-border-radius);
   @media screen and (max-width: $medium) {
     grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
     grid-template-rows: 22px minmax(22px, auto);
@@ -359,9 +361,15 @@ body.user-messages-page .topic-list-item {
 
 .topic-list-item {
   background: var(--d-content-background);
-  box-shadow: 0px 0px 26px 1px var(--topic-card-shadow);
+  box-shadow: 0px 0px 12px 1px var(--topic-card-shadow);
   &:hover {
-    border: 1px solid var(--accent-color);
+    .discourse-no-touch & {
-    background: var(--d-content-background);
+      border-color: var(--accent-color);
+      background: var(--d-content-background);
+    }
+  }
+  &.selected {
+    box-shadow: 0px 0px 0px 2px var(--accent-color),
+      0px 0px 12px 1px var(--topic-card-shadow);
   }
 }

scss/topic.scss

@@ -2,6 +2,7 @@
   .contents {
     font-size: var(--font-up-1);
     line-height: 1.25;
+    -webkit-font-smoothing: antialiased;
   }
 }
 
@@ -10,6 +11,7 @@
   top: calc(
     var(--header-offset, 60px) + 53px + calc(var(--spacing-block-l) * 2)
   );
+  z-index: 300;
 }
 
 .timeline-container .topic-timeline {
@@ -23,7 +25,7 @@
     border-radius: 0.75em;
     padding-left: 0.5em;
     margin-left: calc(-0.5em - 2.5px);
-    background: var(--secondary);
+    background: var(--d-content-background);
     height: 40px !important; // height is coming from element style have no other choice
   }
   .timelime-scroller-content {
@@ -46,25 +48,7 @@
   }
 }
 
-#topic-title {
-  @include breakpoint(extra-large, $rule: min-width) {
-    z-index: z("composer", "content") - 1;
-    padding: var(--spacing-block-l) var(--spacing-inline-xl);
-    position: sticky;
-    margin-bottom: 0;
-    top: var(--header-offset);
-    background: var(--d-content-background);
-  }
-  z-index: z("composer", "content") - 1;
-  padding: var(--spacing-block-l) var(--spacing-inline-xl);
-  position: sticky;
-  margin-bottom: 0;
-  top: var(--header-offset);
-  background: var(--d-content-background);
-  border-radius: var(--d-border-radius-large);
-}
 .container.posts,
-.more-topics__container,
 #topic-footer-buttons {
   padding: 0 24px;
 }
@@ -113,3 +97,7 @@
   position: relative;
   right: -4px;
 }
+
+nav.post-controls .actions button {
+  font-size: var(--font-0);
+}

scss/variables.scss

@@ -1,44 +1,8 @@
 :root {
-  --accent-color: #393edb;
-  --background-color: light-dark(#f5f8ff, #1b1c1e);
-  --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 * 2) calc(c * 0.1) h / 0.5),
-    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 * 2) calc(c * 0.125) h),
-    oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.5) h)
-  );
-  --d-selected: light-dark(
-    oklch(from var(--accent-color) calc(l * 1.9) calc(c * 2) h / 0.3),
-    oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h / 0.75)
-  );
-  --d-chat-border: light-dark(
-    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h),
-    oklch(from var(--accent-color) calc(l * 0.25) calc(c * 0.25) h)
-  );
   --d-max-width: 1000px;
   --d-border-radius-large: 20px;
   --d-border-radius: 8px;
   --d-input-border-radius: 6px;
-  --accent-text-color: light-dark(#ffffff, #0f1024);
-  --d-content-background: var(--secondary);
-  --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: var(--primary);
-  --d-sidebar-highlight-color: var(--primary);
-  --d-sidebar-highlight-background: var(--d-selected);
-  --d-sidebar-section-link-icon-size: 1em;
-  --d-input-bg-color: var(--d-content-background);
   // --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;

spec/system/horizon_high_level_spec.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+describe "Horizon theme | High level", type: :system do
+  let!(:theme) { upload_theme }
+  fab!(:current_user) { Fabricate(:user) }
+  fab!(:tag_1) { Fabricate(:tag, name: "wow-cool") }
+  fab!(:tag_2) { Fabricate(:tag, name: "another-tag") }
+  fab!(:category)
+  fab!(:topic_1) { Fabricate(:topic_with_op, category: category, tags: [tag_1, tag_2]) }
+  let(:topic_list) { PageObjects::Components::TopicList.new }
+  let(:topic_page) { PageObjects::Pages::Topic.new }
+  let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new }
+
+  def run_all_high_level_tests
+    expect(page).to have_css(".experimental-screen")
+
+    expect(sidebar).to have_categories_section
+    expect(sidebar).to have_section_link(category.name)
+
+    expect(topic_list).to have_topic(topic_1)
+
+    # Ensure the topic list columns are in the correct order via 'topic-list-columns' valueTransformer
+    #
+    # NOTE(martin): Maybe there is a better way to do this in a qunit test instead.
+    topic_item = find(topic_list.topic_list_item_class(topic_1))
+    expect(topic_item.all("td").map { |el| el["class"] }).to eq(
+      [
+        "main-link clearfix topic-list-data",
+        "activity num topic-list-data age",
+        "topic-author-data",
+        "topic-category-status-data",
+        "topic-author-avatar-data",
+        "topic-likes-replies-data",
+      ],
+    )
+
+    # 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 across page reloads
+    palette_menu =
+      PageObjects::Components::DMenu.new(find(".sidebar-footer-actions .user-color-palette"))
+    palette_menu.expand
+    find(".color-palette-menu__content .color-palette-menu__item[data-color='marigold']").click
+    expect(page).to have_css(".custom-color-marigold")
+    page.refresh
+    expect(page).to have_css(".custom-color-marigold")
+  end
+
+  it "works for anon" do
+    visit "/"
+    run_all_high_level_tests
+  end
+
+  context "for signed in users" do
+    before { sign_in(current_user) }
+
+    it "works" do
+      visit "/"
+      run_all_high_level_tests
+    end
+  end
+end