header search alignment

UX: attempt to keep title centered with content
Undo sticky topic header (#64 )
2025-03-19 17:53:57 -04:00 · 2025-03-19 17:32:00 -04:00 · 2025-03-19 10:19:25 -05:00 · 2025-03-19 10:01:43 +01:00 · 2025-03-18 19:29:42 -05:00 · 2025-03-18 19:18:32 -05:00
29 changed files with 922 additions and 287 deletions
@@ -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",
@@ -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";
@@ -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);
 });
@@ -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);
+});
@@ -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>;
@@ -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>
+}
@@ -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>
@@ -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>
+}
@@ -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);
+  }
+}
@@ -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"
@@ -1,3 +0,0 @@
-#main-outlet-wrapper {
-  padding: 0;
-}
@@ -17,8 +17,18 @@
  }
 }

-.has-full-page-chat .experimental-screen {
-  display: none;
+.has-full-page-chat .chat-replying-indicator-container {
+  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;
  }
@@ -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 {
-    background: radial-gradient(
-        90% 110% at 50% 50%,
-        rgba(255, 255, 255, 0.3) 0%,
-        rgba(255, 255, 255, 0) 100%
-      ),
-      var(--accent-color);
+  &:hover,
+  &:focus-visible {
+    background: oklch(from var(--accent-color) 40% c h) !important;
+    box-shadow: none;
  }
-  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 {
-  border: none;
-  &:hover {
-    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);
-
+.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 {
-    .discourse-no-touch & {
-      border: 1px solid var(--accent-color);
-      box-shadow: 0px 0px 8px 2px var(--button-box-shadow);
-      background: var(--secondary);
-      color: var(--primary);
-      .d-icon {
-        color: var(--accent-color);
-      }
+    border-color: transparent;
+    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 {
-    .discourse-no-touch & {
-      background: var(--secondary);
+    background: var(--d-content-background);
+    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 {
-        color: var(--accent-color);
-      }
-    }
-  }
-}
-//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);
-      }
+    }
+  }
+  &:active:not(:hover, :focus) {
+    color: var(--primary);
+    background: var(--tertiary-300);
+    background-image: none;
+    .d-icon {
+      color: var(--tertiary-high);
    }
  }
 }
+
 .btn-primary,
 #create-topic.btn {
  background-color: var(--accent-color);
@@ -104,50 +66,22 @@
  }
  &:hover {
    .discourse-no-touch & {
-      background: radial-gradient(
-          90% 110% at 50% 50%,
-          rgba(255, 255, 255, 0.3) 0%,
-          rgba(255, 255, 255, 0) 100%
-        ),
-        var(--accent-color);
+      background: oklch(from var(--accent-color) 40% c h) !important;
      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(
-          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 0px 2px var(--secondary),
-        0px 0px 0px 4px var(--button-box-shadow);
+      background: oklch(from var(--accent-color) 40% c h) !important;
+      box-shadow: 0px 0px 0px 4px var(--button-box-shadow);
+      color: var(--accent-text-color);
    }
  }
  &:active {
-    .discourse-no-touch & {
-      // 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;
-    }
+    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);
-}
@@ -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 {
-  box-shadow: 0px 0px 0px 2px var(--d-chat-border);
-  border: none;
+.chat-drawer-container {
+  .is-expanded & {
+    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);
+  }
+}
@@ -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;
+}
@@ -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);
+}
@@ -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);
+  }
+}
@@ -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%;
+    }
+  }
+}
@@ -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,
@@ -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;
-    .full-page-chat.full-page-chat-sidebar-enabled,
-    .c-navbar-container {
-      border-top-right-radius: 0;
-      border-top-left-radius: 0;
+    gap: var(--main-grid-gap);
+    @include breakpoint(medium) {
+      gap: 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;
-      // overflow: scroll;
-      // &:has(.list-controls) {
-      // padding-top: 0;
-      // }
-      // &:has(#topic-title) {
-      // padding-top: 0;
-      // }
+      max-width: unset;
      //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,
-      .container.viewing-self,
+      .welcome-banner,
+      .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;
-        margin-inline: auto;
-        padding-inline: 1.5em;
+        @include breakpoint(medium, $rule: min-width) {
+          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;
      }
-      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),
-    0px 0px 24px 4px var(--tertiary-50);
-  border-radius: var(--d-border-radius-large);
+  border-radius: var(--d-border-radius);
  padding: 1em;
  background-color: var(--d-content-background);
 }
@@ -44,7 +44,57 @@
  padding: 3px;
 }

-a,
-a:visited {
-  color: var(--accent-color);
+.open .grippie {
+  background-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;
 }
@@ -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 {
-      //     border-radius: var(--d-border-radius);
-      //     padding: var(--spacing-inline-xs) var(--spacing-inline-s);
-      //     background-color: 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__wrapper {
+        font-size: var(--font-down-2-rem);
+        border-radius: var(--d-border-radius);
+        padding: var(--spacing-inline-xs) var(--spacing-inline-s);
+        background-color: 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)
+        );
+        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 {
-      //     color: light-dark(
-      //       oklch(from var(--category-badge-color) 20% calc(c * 1) h),
-      //       oklch(from var(--category-badge-color) 100% calc(c * 0.9) h)
-      //     );
-      //   }
+      .badge-category__name {
+        color: light-dark(
+          oklch(from var(--category-badge-color) 20% calc(c * 1) 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);
+  }
 }
@@ -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;
-  color: var(--accent-color);
-  &::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    height: var(--d-nav-underline-height);
-    background: var(--accent-color);
+  .discourse-no-touch & {
+    background: transparent;
+    color: var(--accent-color);
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      height: var(--d-nav-underline-height);
+      background: var(--accent-color);
+    }
  }
 }
@@ -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) {
-    padding-bottom: 1em;
+  @media screen and (max-width: 768px) {
+    padding: 1em;
  }
  h1 {
    grid-column: 1/2;
    grid-row: 1/-1;
-    padding: 0 1em;
    text-align: left;
    align-self: center;
    margin: 0;
@@ -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;
-  @media screen and (max-width: 1000px) {
-    .sidebar-new-topic-button .d-icon {
-      display: none;
-    }
+  margin: 0 var(--spacing-inline-m) var(--spacing-block-l);
+  .sidebar-new-topic-button .d-icon {
+    display: none;
  }
 }

@@ -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);
-    background: var(--d-content-background);
+    .discourse-no-touch & {
+      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);
  }
 }
@@ -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);
+}
@@ -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;
@@ -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
Author	SHA1	Message	Date
awesomerobot	b292befd1d	header search alignment	2025-03-19 17:53:57 -04:00
awesomerobot	f0834f197c	UX: attempt to keep title centered with content	2025-03-19 17:32:00 -04:00
chapoi	d062468f93	Undo sticky topic header (#64 )	2025-03-19 10:19:25 -05:00
chapoi	b6db617017	Mobile: New alert info width fix (#63 )	2025-03-19 10:01:43 +01:00
Jordan Vidrine	efc3dd5475	cleanup dropdown button (#62 )	2025-03-18 19:29:42 -05:00
Jordan Vidrine	d79313436d	fix (#61 )	2025-03-18 19:18:32 -05:00
Jordan Vidrine	19c957aecc	apply anti-aliased font to topics as well (#60 )	2025-03-18 18:43:27 -05:00
chapoi	3816c49bbf	Tiny misc fixes (#59 )	2025-03-18 17:02:45 +01:00
chapoi	f64d0cc6dc	UX: update styling of overlapping alert new/updated topics (#56 )	2025-03-18 17:01:49 +01:00
chapoi	71f246c8a3	Button hover style reapply (#58 )	2025-03-18 09:28:25 -05:00
Jordan Vidrine	970ee33771	cleanup (#55 )	2025-03-17 19:49:30 -05:00
Jordan Vidrine	2c41c2ffab	fix user page (#54 )	2025-03-17 15:13:39 -05:00
Martin Brennan	185651b10d	DEV: Remove search banner dependency (#53 ) 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	2025-03-17 11:45:14 +08:00
Jordan Vidrine	dfa22d21b6	UX: Welcome banner merge prep (#49 ) This PR preps the Horizon theme for the merger of the search banner into core. This PR should only be merged once this PR in core has been merged.	2025-03-17 12:18:54 +10:00
Jordan Vidrine	598f4fce65	fix (#52 )	2025-03-14 17:13:38 -05:00
Jordan Vidrine	144c3dff8f	DEV: main container sizing & border radius cleanup (#51 )	2025-03-14 16:12:54 -05:00
Jordan Vidrine	8b09523510	DEV: Button stylesheet cleanup (#50 )	2025-03-14 15:30:00 -05:00
Jordan Vidrine	f70c452f26	selected (#48 )	2025-03-12 13:52:05 -05:00
Jordan Vidrine	3911572b29	UX: More fixes (#47 )	2025-03-12 13:39:27 -05:00
Jordan Vidrine	7fe1b87f82	small tweaks (#46 )	2025-03-12 12:27:56 -05:00
Martin Brennan	d85097774f	DEV: Add high level system spec and clean up JS (#34 )	2025-03-12 10:18:36 -05:00
chapoi	9a5759ae86	Tweak to color shadows, sidebar font-size, general small fixes (#36 )	2025-03-12 10:02:45 -05:00
Jordan Vidrine	7023cc0f97	add margin to select menu (#45 )	2025-03-11 17:21:46 -05:00
Jordan Vidrine	feae5a0214	hide topic list trigger (#44 )	2025-03-11 17:21:28 -05:00
Jordan Vidrine	81b7466224	fix sidebar group chat icon (#43 )	2025-03-11 17:20:26 -05:00
Jordan Vidrine	97b379eb08	UX: font smoothing (#42 )	2025-03-11 17:20:14 -05:00
Jordan Vidrine	1f55a9d9a2	fixes (#41 )	2025-03-11 17:19:41 -05:00
Jordan Vidrine	f4d5b3b97e	UX: Color fixes (#40 )	2025-03-11 16:29:35 -05:00
Jordan Vidrine	09ef1d2a14	paintbrush (#39 )	2025-03-11 14:48:10 -05:00
Jordan Vidrine	d1800ffd98	PR: Custom Color Choice (#38 )	2025-03-11 14:45:04 -05:00
Jordan Vidrine	664e3a5910	UX: Small tweaks to colors (#37 )	2025-03-11 14:01:34 -05:00
chapoi	cdf49bd516	Button styling and states (#35 )	2025-03-11 12:01:18 -05:00
Jordan Vidrine	a90b691505	UX: Color exploration & base (#33 )	2025-03-11 11:24:20 -05:00
Jordan Vidrine	eca05948c3	UX:Breakpoint padding (#32 )	2025-03-10 15:56:17 -05:00
Jordan Vidrine	cef5ad279c	fix target (#31 )	2025-03-10 13:15:44 -05:00
chapoi	fc97ab99fe	Mobile: topic list, topic view, sidebar tweaks	2025-03-10 16:50:13 +01:00
Jordan Vidrine	9e96704c24	UX: Mobile fix (#29 )	2025-03-08 09:45:06 +00:00
Jordan Vidrine	536b58feba	small-mobile-fix (#28 )	2025-03-07 14:54:20 -06:00
Jordan Vidrine	35a4642042	UX: Width & calculation adjustments for main container (#27 )	2025-03-07 12:01:26 -06:00