Merge branch 'main' into second-batch

UX: More logic for title columns (#87 )
FIX: remove overflow prop (#91 )
2025-03-28 13:16:27 -05:00 · 2025-03-28 13:13:28 -05:00 · 2025-03-28 13:12:42 -05:00 · 2025-03-28 13:12:42 -05:00 · 2025-03-28 13:11:53 -05:00 · 2025-03-28 13:11:21 -05:00
35 changed files with 1514 additions and 662 deletions
@@ -9,35 +9,73 @@
  "maximum_discourse_version": null,
  "assets": {},
  "modifiers": {
-    "svg_icons": ["fire"]
+    "svg_icons": ["fire"],
+    "serialize_topic_is_hot": true
  },
  "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-low": "d8d9f3",
-      "tertiary-50": "f5f8ff",
-      "selected": "d8d9f3",
-      "hover": "ebebf9"
+      "tertiary": "595bca"
    },
    "Horizon Dark": {
-      "primary": "F1EFF9",
-      "secondary": "1e1a36",
-      "header_background": "00091d",
-      "header_primary": "F5F8FF",
-      "tertiary": "6465ab",
-      "tertiary-50": "131124",
-      "selected": "1e1a36",
-      "hover": "131124"
+      "primary": "ffffff",
+      "secondary": "1A1A1A",
+      "tertiary": "595bca"
+    },
+    "Royal": {
+      "primary": "1A1A1A",
+      "secondary": "ffffff",
+      "tertiary": "4169e1"
+    },
+    "Royal Dark": {
+      "primary": "ffffff",
+      "secondary": "1A1A1A",
+      "tertiary": "4169e1"
+    },
+    "Clover": {
+      "primary": "1A1A1A",
+      "secondary": "ffffff",
+      "tertiary": "45a06e"
+    },
+    "Clover Dark": {
+      "primary": "ffffff",
+      "secondary": "1A1A1A",
+      "tertiary": "45a06e"
+    },
+    "Lily": {
+      "primary": "1A1A1A",
+      "secondary": "ffffff",
+      "tertiary": "cc338c"
+    },
+    "Lily Dark": {
+      "primary": "ffffff",
+      "secondary": "1A1A1A",
+      "tertiary": "cc338c"
+    },
+    "Violet": {
+      "primary": "1A1A1A",
+      "secondary": "ffffff",
+      "tertiary": "9b15de"
+    },
+    "Violet Dark": {
+      "primary": "ffffff",
+      "secondary": "1A1A1A",
+      "tertiary": "9b15de"
+    },
+    "Marigold": {
+      "primary": "1A1A1A",
+      "secondary": "ffffff",
+      "tertiary": "d3881f"
+    },
+    "Marigold Dark": {
+      "primary": "ffffff",
+      "secondary": "1A1A1A",
+      "tertiary": "d3881f"
    }
  }
-}
+}
@@ -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";
@@ -0,0 +1,63 @@
+.bulk-select-enabled {
+  .topic-list-header .topic-list-data.default {
+    position: sticky;
+    top: 10em;
+  }
+  .topic-author-avatar-data {
+    display: none;
+  }
+
+  .bulk-select.topic-list-data {
+    grid-area: bulk-select;
+    margin-left: -0.5em;
+
+    @media screen and (max-width: 576px) {
+      margin-top: 0;
+      label {
+        padding-block: 0.345em;
+      }
+    }
+
+    input {
+      transform: scale(1.5);
+    }
+  }
+}
+
+.topic-list-header {
+  tr {
+    border: none;
+  }
+
+  .topic-list-data {
+    padding: 0;
+
+    &:not(.default) {
+      display: none;
+    }
+
+    &.default {
+      position: absolute;
+      right: 0;
+      .bulk-select,
+      span:not(.bulk-select-topics, .d-button-label) {
+        display: none;
+      }
+    }
+  }
+
+  .bulk-select-topics {
+    position: absolute;
+    right: -1em;
+    @media screen and (max-width: 1048px) {
+      right: 0;
+    }
+
+    background: var(--secondary);
+    border-radius: 0 0 0 var(--d-border-radius);
+    padding: 1em;
+    button {
+      white-space: nowrap;
+    }
+  }
+}
@@ -0,0 +1,18 @@
+import { apiInitializer } from "discourse/lib/api";
+import CustomColorHtmlClass from "../components/custom-color-html-class";
+import CustomUserPalette from "../components/custom-user-palette";
+import ExperimentalScreen from "../components/experimental-screen";
+
+export default apiInitializer("1.8.0", (api) => {
+  api.renderInOutlet("above-main-container", ExperimentalScreen);
+  api.renderInOutlet("above-main-container", CustomColorHtmlClass);
+  api.renderInOutlet("sidebar-footer-actions", CustomUserPalette);
+
+  api.registerValueTransformer("site-setting-enable-welcome-banner", () => {
+    return settings.enable_welcome_banner;
+  });
+
+  api.registerValueTransformer("site-setting-search-experience", () => {
+    return settings.search_experience;
+  });
+});
@@ -1,6 +0,0 @@
-import { apiInitializer } from "discourse/lib/api";
-import ExperimentalScreen from "../components/experimental-screen";
-
-export default apiInitializer("1.8.0", (api) => {
-  api.renderInOutlet("above-main-container", ExperimentalScreen);
-});
@@ -0,0 +1,7 @@
+import { apiInitializer } from "discourse/lib/api";
+
+export default apiInitializer("0.8.0", (api) => {
+  api.registerValueTransformer("bulk-select-in-nav-controls", () => {
+    return true;
+  });
+});
@@ -0,0 +1,50 @@
+import Component from "@glimmer/component";
+import avatar from "discourse/helpers/avatar";
+import formatDate from "discourse/helpers/format-date";
+import { i18n } from "discourse-i18n";
+import gt from "truth-helpers/helpers/gt";
+
+export default class TopicActivityColumn extends Component {
+  get activityText() {
+    // this should handle any case where a topic was no bumped due to a reply/post
+    if (
+      moment(this.args.topic.bumped_at).isAfter(this.args.topic.last_posted_at)
+    ) {
+      return "user_updated";
+    }
+
+    if (this.args.topic.posts_count > 1) {
+      return "user_replied";
+    } else if (this.args.topic.posts_count === 1) {
+      return "user_posted";
+    }
+  }
+
+  <template>
+    <span class="topic-activity">
+      <div class="topic-activity__user">
+        {{#if (gt @topic.replyCount 1)}}
+          {{avatar @topic.lastPosterUser imageSize="small"}}
+          <span
+            class="topic-activity__username"
+          >@{{@topic.last_poster_username}}</span>
+        {{else}}
+          {{avatar @topic.creator imageSize="small"}}
+          <span
+            class="topic-activity__username"
+          >@{{@topic.creator.username}}</span>
+        {{/if}}
+      </div>
+      <div class="topic-activity__reason">
+        {{i18n (themePrefix this.activityText)}}
+      </div>
+      <div class="topic-activity__time">
+        {{formatDate
+          @topic.bumpedAt
+          leaveAgo="true"
+          format="medium-with-ago-and-on"
+        }}
+      </div>
+    </span>
+  </template>
+}
@@ -1,8 +1,9 @@
 import icon from "discourse/helpers/d-icon";
+import gt from "truth-helpers/helpers/gt";

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

@@ -1,115 +1,36 @@
 import Component from "@glimmer/component";
-import { on } from "@ember/modifier";
-import { action } from "@ember/object";
 import { service } from "@ember/service";
-import { and } from "truth-helpers";
 import icon from "discourse/helpers/d-icon";
 import { i18n } from "discourse-i18n";

 export default class TopicStatusColumn extends Component {
-  @service currentUser;
  @service siteSettings;

-  get canAct() {
-    return this.currentUser && !this.args.disableActions;
-  }
-
-  get statusClass() {
-    let classes = ["topic-status-card"];
-    if (this.args.topic.bookmarked) {
-      classes.push("--bookmark");
-    } else if (this.args.topic.closed && this.args.topic.archived) {
-      classes.push("--locked --archived");
-    } else if (this.args.topic.closed) {
-      classes.push("--locked");
-    } else if (this.args.topic.archived) {
-      classes.push("--archived");
-    } else if (this.args.topic.is_warning) {
-      classes.push("--warning");
-    } else if (
-      this.args.showPrivateMessageIcon &&
-      this.args.topic.isPrivateMessage
-    ) {
-      classes.push("--private-message");
-    } else if (this.args.topic.pinned) {
-      classes.push("--pinned");
-    } else if (this.args.topic.unpinned) {
-      classes.push("--unpinned");
+  get badge() {
+    if (this.args.topic.is_hot) {
+      return {
+        icon: "fire",
+        text: "topic_hot",
+        className: "--hot",
+      };
    }
-    return classes.join(" ");
-  }

-  get heatMap() {
-    return this.args.topic.views > this.siteSettings.topic_views_heat_medium;
-  }
+    if (this.args.topic.pinned) {
+      return {
+        icon: "thumbtack",
+        text: "topic_pinned",
+        className: "--pinned",
+      };
+    }

-  @action
-  togglePinned(event) {
-    event.preventDefault();
-    this.args.topic.togglePinnedForUser();
+    return null;
  }

  <template>
-    {{#if @topic.bookmarked}}
-      <span class={{this.statusClass}}>{{icon "bookmark"}}{{i18n
-          (themePrefix "topic_bookmarked")
-        }}</span>
-    {{/if}}
-    {{#if (and @topic.closed @topic.archived)~}}
-      <span class={{this.statusClass}}>{{i18n
-          (themePrefix "topic_closed_and_archived")
-        }}</span>
-    {{else if @topic.closed}}
-      <span class={{this.statusClass}}>{{i18n
-          (themePrefix "topic_closed")
-        }}</span>
-    {{else if @topic.archived}}
-      <span class={{this.statusClass}}>{{i18n
-          (themePrefix "topic_archived")
-        }}</span>
-    {{/if}}
-    {{#if @topic.is_warning}}
-      <span class={{this.statusClass}}>{{i18n
-          (themePrefix "topic_warning")
-        }}</span>
-    {{else if (and @showPrivateMessageIcon @topic.isPrivateMessage)}}
-      <span class={{this.statusClass}}>{{i18n
-          (themePrefix "topic_personal_message")
-        }}</span>
-    {{/if}}
-    {{#if @topic.pinned}}
-      {{#if this.canAct}}
-        <button
-          type="button"
-          {{on "click" this.togglePinned}}
-          class={{this.statusClass}}
-        >{{icon "thumbtack"}}{{i18n (themePrefix "topic_pinned")}}</button>
-      {{else}}
-        <span class={{this.statusClass}}>{{icon "thumbtack"}}{{i18n
-            (themePrefix "topic_pinned")
-          }}</span>
-      {{/if}}
-    {{else if @topic.unpinned}}
-      {{#if this.canAct}}
-        <button
-          type="button"
-          {{on "click" this.togglePinned}}
-          class={{this.statusClass}}
-        >{{icon "thumbtack" class="unpinned"}}{{i18n
-            (themePrefix "topic_unpinned")
-          }}</button>
-      {{else}}
-        <span class={{this.statusClass}}>{{icon
-            "thumbtack"
-            class="unpinned"
-          }}{{i18n (themePrefix "topic_unpinned")}}</span>
-      {{/if}}
-    {{/if}}
-
-    {{#if this.heatMap}}
-      <span class="topic-status-card --hot">{{icon "fire"}}{{i18n
-          (themePrefix "topic_hot")
-        }}</span>
+    {{#if this.badge}}
+      <span class="topic-status-card {{this.badge.className}}">{{icon
+          this.badge.icon
+        }}{{i18n (themePrefix this.badge.text)}}</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>
+}
@@ -1,30 +1,28 @@
 import { withPluginApi } from "discourse/lib/plugin-api";
-import TopicAuthorAvatarColumn from "../components/card/topic-author-avatar-column";
-import TopicAuthorColumn from "../components/card/topic-author-column";
+import TopicActivityColumn from "../components/card/topic-activity-column";
 import TopicCategoryColumn from "../components/card/topic-category-column";
 import TopicLikesColumn from "../components/card/topic-likes-column";
 import TopicRepliesColumn from "../components/card/topic-replies-column";
 import TopicStatusColumn from "../components/card/topic-status-column";

-const TopicAuthor = <template>
-  <td class="topic-author-data">
-    <TopicAuthorColumn @topic={{@topic}} />
+const TopicActivity = <template>
+  <td class="topic-activity-data">
+    <TopicActivityColumn @topic={{@topic}} />
  </td>
 </template>;

-const TopicAuthorAvatar = <template>
-  <td class="topic-author-avatar-data">
-    <TopicAuthorAvatarColumn @topic={{@topic}} />
-  </td>
-</template>;
-
-const TopicCategoryStatus = <template>
-  <td class="topic-category-status-data">
-    <TopicCategoryColumn @topic={{@topic}} />
+const TopicStatus = <template>
+  <td class="topic-status-data">
    <TopicStatusColumn @topic={{@topic}} />
  </td>
 </template>;

+const TopicCategory = <template>
+  <td class="topic-category-data">
+    <TopicCategoryColumn @topic={{@topic}} />
+  </td>
+</template>;
+
 const TopicLikesReplies = <template>
  <td class="topic-likes-replies-data">
    <TopicLikesColumn @topic={{@topic}} />
@@ -40,17 +38,17 @@ export default {
      api.registerValueTransformer(
        "topic-list-columns",
        ({ value: columns }) => {
-          columns.add("topic-author", {
-            item: TopicAuthor,
-            after: "activity",
+          columns.add("topic-activity", {
+            item: TopicActivity,
+            after: "title",
          });
-          columns.add("topic-category-status", {
-            item: TopicCategoryStatus,
+          columns.add("topic-status", {
+            item: TopicStatus,
            after: "topic-author",
          });
-          columns.add("topic-author-avatar", {
-            item: TopicAuthorAvatar,
-            after: "topic-category-status",
+          columns.add("topic-category", {
+            item: TopicCategory,
+            after: "topic-status",
          });
          columns.add("topic-likes-replies", {
            item: TopicLikesReplies,
@@ -59,6 +57,7 @@ export default {
          columns.delete("posters");
          columns.delete("views");
          columns.delete("replies");
+          columns.delete("activity");
          return columns;
        }
      );
@@ -66,8 +65,12 @@ export default {
      api.registerValueTransformer(
        "topic-list-item-class",
        ({ value: classes, context }) => {
-          if (context.topic.pinned || context.topic.pinned_globally) {
-            classes.push("--pinned");
+          if (
+            context.topic.is_hot ||
+            context.topic.pinned ||
+            context.topic.pinned_globally
+          ) {
+            classes.push("--has-status-card");
          }
          return classes;
        }
@@ -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,12 +1,9 @@
 en:
  theme_metadata:
-    description: "A simple, beautiful theme for the future of Discourse that improves the out of the box experience for sites."
-  topic_bookmarked: "Bookmarked"
-  topic_closed_archived: "Closed and archived"
-  topic_closed: "Closed"
-  topic_archived: "Archived"
-  topic_warning: "Warning"
-  topic_personal_message: "Personal message"
+    description: "A simple, beautiful theme that improves the out of the box experience for Discourse sites."
  topic_pinned: "Pinned"
-  topic_unpinned: "Unpinned"
  topic_hot: "Hot"
+  user_replied: "replied"
+  user_posted: "posted"
+  user_updated: "updated"
+
@@ -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,19 @@ 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);
+  }
+}
+
+.chat-drawer-active.chat-drawer-expanded .chat-composer-dropdown__menu-content {
+  z-index: z("composer", "content") + 1;
+}
@@ -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,89 @@
+#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);
+    }
+  }
+}
+
+#reply-control.hide-preview:not(.draft) {
+  @include breakpoint("mobile-extra-large", $rule: min-width) {
+    background: var(--d-content-background);
+
+    border-top-right-radius: var(--d-border-radius);
+    border-top-left-radius: var(--d-border-radius);
+
+    .grippie {
+      background: var(--tertiary-low);
+    }
+
+    .title-and-category {
+      padding: 0 var(--spacing-inline-m);
+      width: calc(100% - var(--spacing-inline-m) * 2);
+    }
+
+    .d-editor-button-bar {
+      padding: 3px var(--spacing-inline-m);
+      border: none;
+    }
+
+    .d-editor-input {
+      padding: var(--spacing-inline-m);
+    }
+
+    &:has(.in-focus) .grippie {
+      background: var(--tertiary);
+    }
+
+    .reply-area {
+      padding-inline: 0;
+    }
+    .reply-to,
+    .submit-panel {
+      padding-inline: var(--spacing-inline-sm);
+    }
+
+    .d-editor-textarea-wrapper {
+      border: 0;
+      border-bottom: 1px solid var(--primary-low);
+      border-radius: 0;
+
+      &.in-focus {
+        outline: 0;
+      }
+    }
+  }
+}
+.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,63 @@
 .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);
+  }
+}
@@ -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,21 @@
-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);
+
+  @include breakpoint("mobile-extra-large") {
+    background-color: var(--d-content-background);
+  }
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+  @include breakpoint("mobile-extra-large") {
+    background-color: var(--d-content-background);
+  }
+}
 #main-outlet-wrapper {
  gap: var(--main-grid-gap);
 }
@@ -21,22 +29,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 +60,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 +71,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,
@@ -81,27 +80,37 @@ body:not(.has-full-page-chat) {
      .body-page,
      .container.badges,
      .topic-above-footer-buttons-outlet .presence-users,
-      .global-notice {
-        max-width: 1000px;
-        margin-inline: auto;
-        padding-inline: 1.5em;
+      .global-notice,
+      .container.tags-index {
+        @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 +121,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);
 }
@@ -40,11 +40,57 @@
  border-radius: 0;
 }

-.d-editor-button-bar {
-  padding: 3px;
+.open .grippie {
+  background-color: var(--accent-color);
 }

-a,
-a:visited {
-  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;
 }
@@ -2,11 +2,11 @@
@include breakpoint(medium) {
  html,
  .d-header {
-    background-color: var(--secondary);
+    background-color: var(--d-content-background);
  }
 }
 #main-outlet-wrapper {
-  .navigation-topics & {
+  *[class*="navigation-"] & {
    @include breakpoint(mobile-extra-large) {
      padding: 0;
    }
@@ -32,8 +32,11 @@
        .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 {
+            background: var(--d-content-background);
            padding-block: var(--spacing-block-s);
            padding-inline: 0;
            border: 0;
@@ -64,7 +67,9 @@
        }
      }
      .navigation-controls {
-        gap: var(--spacing-inline-s);
+        @include breakpoint(mobile-extra-large) {
+          gap: var(--spacing-inline-s);
+        }
      }
    }
  }
@@ -80,48 +85,59 @@
        padding-top: 0;
      }
    }
-
-    .topic-list-item {
-      @include breakpoint(mobile-extra-large) {
-        box-shadow: none;
-        border-radius: 0;
-        //to be moved to topic card segment for general use
-        // .navigation-category & {
-        //   .badge-category__wrapper {
-        //     display: none;
-        //   }
-        // }
-      }
-    }
  }

  #topic-title {
    @include breakpoint(mobile-extra-large) {
-      padding-inline: var(--spacing-inline-m) !important;
+      padding-inline: var(--spacing-inline-s) !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-tags {
+        gap: var(--spacing-inline-xs);
+        &__tag-separator {
+          display: none;
+        }
+      }
+      .discourse-tag {
+        font-size: var(--font-down-2-rem);
+        padding: var(--spacing-inline-xs) var(--spacing-inline-s);
+        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 +153,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);
+  }
 }
@@ -2,7 +2,7 @@
  position: sticky;
  top: var(--header-offset);
  background: var(--d-content-background);
-  z-index: 100;
+  z-index: z("base");
  padding: 1.5rem 0 1rem 0;
  max-width: unset;

@@ -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);
+    }
  }
 }
@@ -1,3 +1,7 @@
+.welcome-banner {
+  z-index: calc(z("base") + 1);
+}
+
 .custom-search-banner-wrap {
  display: grid;
  grid-template-rows: 0.33fr 0.33fr 0.33fr;
@@ -7,13 +11,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;
  }
 }

@@ -1,22 +1,12 @@
-// 390x844 – mobile/portrait – (Figma iPhone 13 & 14)
-// 744x1133 – tablet/portrait – (Figma iPad mini 8.3)
-// 1280x832 – desktop small – (Figma MacBook Air)
-
-:root {
-  --hot-color: oklch(63.79% 0.1823 34.77);
-}
-
-$extra-small: 435px;
-$small: 576px;
-$medium: 980px;
-$extra-large: 1280px;
-
 .topic-list .topic-list-item-separator {
  display: none;
 }

 .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 {
@@ -26,137 +16,82 @@ $extra-large: 1280px;
  gap: 1em;
  @include breakpoint(medium) {
    gap: 0.5em;
+    padding: 0 0.5em;
  }
-}
-
-body.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";
-  .bulk-select {
-    grid-area: bulk-select;
+  @include breakpoint(mobile-extra-large) {
+    gap: 0;
    padding: 0;
-    margin: 0;
-    align-self: center;
-    justify-self: center;
-    label {
-      margin: 0;
-    }
-  }
-  @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);
-    grid-template-areas:
-      "bulk-select avatar author status status  . activity"
-      ". topic-title topic-title topic-title . . likes-replies"
-      ". topic-title topic-title topic-title . . category";
-  }
-  @media screen and (max-width: $small) {
-    grid-template-columns: 25px auto repeat(6, 1fr);
-    grid-template-rows: auto auto auto;
-    grid-template-areas:
-      "bulk-select category-status category-status . . . . activity"
-      "topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
-      "avatar author . . . . . likes-replies";
  }
 }

-body.user-messages-page .topic-list-item {
-  .topic-category-status-data {
-    display: none;
-  }
-  grid-template-areas:
-    "avatar author status status . . activity"
-    ". topic-title topic-title topic-title likes-replies likes-replies likes-replies";
-  &.excerpt-expanded {
-    grid-template-columns: 44px repeat(6, 1fr) auto;
-    grid-template-rows: 22px auto auto 30px;
-    grid-template-areas:
-      "avatar author status status . . . activity"
-      "avatar topic-title topic-title topic-title topic-title . . ."
-      ". excerpt excerpt excerpt excerpt excerpt . ."
-      ". excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
-    @media screen and (max-width: $extra-large) {
-      grid-template-areas:
-        "avatar author status status . . . activity"
-        "avatar topic-title topic-title topic-title topic-title . . ."
-        ". excerpt excerpt excerpt excerpt excerpt . likes-replies"
-        ". excerpt excerpt excerpt excerpt excerpt . likes-replies";
-    }
-  }
-  @media screen and (max-width: $small) {
-    grid-template-columns: 25px auto repeat(6, 1fr);
-    grid-template-rows: auto auto;
-    grid-template-areas:
-      "topic-title topic-title topic-title topic-title topic-title topic-title topic-title activity"
-      "avatar author . . . . . likes-replies";
-    .topic-excerpt {
-      display: none;
-    }
-  }
-}
-
-.topic-list-item {
-  -webkit-font-smoothing: antialiased;
+.topic-list-body .topic-list-item {
  text-overflow: ellipsis;
  padding: 0.75em 1rem;
  border: 1px solid var(--primary-300);
  display: grid;
-  grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
-  grid-template-rows: 22px minmax(22px, auto);
+  grid-template-columns: 20px min-content min-content auto min-content;
+  grid-template-rows: auto minmax(20px, auto);
  grid-template-areas:
-    "avatar author status status . . activity"
-    ". topic-title topic-title topic-title likes-replies likes-replies category";
-  &.excerpt-expanded {
-    grid-template-columns: 44px repeat(6, 1fr) auto;
-    grid-template-rows: 22px auto auto 30px;
+    ". . . . status"
+    "activity . . likes-replies category";
+  grid-column-gap: 12px;
+  grid-row-gap: 8px;
+  border-radius: var(--d-border-radius);
+  td.main-link .link-top-line {
+    grid-row: 1/2;
+    grid-column: 1/-1;
+    font-weight: 500;
+  }
+  &.--has-status-card td.main-link .link-top-line {
+    grid-column: 1/-2;
+  }
+  @include breakpoint(extra-large) {
    grid-template-areas:
-      "avatar author status status . . . activity"
-      "avatar topic-title topic-title topic-title topic-title . . ."
-      ". excerpt excerpt excerpt excerpt excerpt . ."
-      ". excerpt excerpt excerpt excerpt excerpt likes-replies category";
-    @media screen and (max-width: $extra-large) {
-      grid-template-areas:
-        "avatar author status status . . . activity"
-        "avatar topic-title topic-title topic-title topic-title . . ."
-        ". excerpt excerpt excerpt excerpt excerpt . likes-replies"
-        ". excerpt excerpt excerpt excerpt excerpt . category";
+      ". . . . status"
+      "activity . . likes-replies category";
+  }
+  @include breakpoint(mobile-extra-large) {
+    td.main-link .link-top-line,
+    &.--has-status-card td.main-link .link-top-line {
+      grid-row: 2/3;
+      grid-column: 1/-1;
    }
-    @media screen and (max-width: $small) {
-      grid-template-columns: 25px auto repeat(6, 1fr);
+
+    grid-template-columns: 20px repeat(5, 1fr);
+    grid-template-rows: auto auto auto;
+    grid-template-areas:
+      "category category category category category status"
+      ". . . . . ."
+      "activity . . . . likes-replies";
+    border: none;
+    border-bottom: 1px solid var(--primary-200);
+    box-shadow: none;
+    border-radius: 0;
+  }
+  &.excerpt-expanded {
+    grid-template-columns: 20px min-content min-content auto min-content;
+    grid-template-rows: auto auto auto;
+    grid-template-areas:
+      ". . . . status"
+      "activity . . . ."
+      "excerpt excerpt excerpt likes-replies category";
+    @include breakpoint(extra-large) {
+      grid-template-areas:
+        ". . . . status"
+        "activity . . . ."
+        "excerpt excerpt excerpt likes-replies category";
+    }
+    @include breakpoint(mobile-extra-large) {
      grid-template-rows: auto auto auto;
      grid-template-areas:
-        "category-status category-status category-status . . . . activity"
-        "topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
-        "avatar author . . . . . likes-replies";
+        "category category category category status"
+        ". . . . ."
+        "activity . . . likes-replies";
      .topic-excerpt {
        display: none;
      }
    }
  }
-  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);
-    grid-template-areas:
-      "avatar author status status . . activity"
-      ". topic-title topic-title topic-title . . likes-replies"
-      ". topic-title topic-title topic-title . . category";
-  }
-  @media screen and (max-width: $small) {
-    grid-template-columns: 25px auto repeat(6, 1fr);
-    grid-template-rows: auto auto auto;
-    grid-template-areas:
-      "category-status category-status category-status . . . . activity"
-      "topic-title topic-title topic-title topic-title topic-title topic-title topic-title topic-title"
-      "avatar author . . . . . likes-replies";
-  }
-  @include breakpoint(medium) {
-    border: none;
-    border-bottom: 1px solid var(--primary-200);
-  }

  // display contents
  td.main-link,
@@ -171,32 +106,54 @@ body.user-messages-page .topic-list-item {
    padding: 0;
  }

-  // avatar & author
-  .topic-author-avatar-data {
-    grid-area: avatar;
-    margin: 0;
+  // topic activity, avatar, text
+  .topic-activity-data {
+    grid-area: activity;
  }
-  .topic-author-avatar img.avatar {
-    width: 44px;
-    height: 44px;
-    border-radius: var(--d-border-radius);
-    @media screen and (max-width: $small) {
-      width: 25px;
-      height: 25px;
-    }
-  }
-  td.topic-author-data {
-    grid-area: author;
+  .topic-activity {
    display: flex;
-    gap: 0.5em;
+    gap: 0.25em;
+    font-size: var(--font-down-1);
+    height: 100%;
    align-items: center;
  }
-  .topic-author-data .topic-author {
-    color: var(--primary-500);
+
+  .topic-activity__user {
+    display: flex;
+    gap: 0.25em;
+  }
+
+  .topic-activity__user .avatar {
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+  }
+
+  .topic-activity__username {
+    @include breakpoint(mobile-extra-large) {
+      display: none;
+    }
  }

  // status
+  .topic-status-data {
+    grid-area: status;
+  }
+  .topic-status-data {
+    grid-area: status;
+    position: relative;
+  }
  .topic-status-card {
+    @include breakpoint("large", min-width) {
+      position: absolute;
+      right: 0px;
+      top: -20px;
+      background-color: var(--d-content-background);
+      height: 20px;
+      font-size: var(--font-down-3);
+    }
+    height: min-content;
+    margin-left: auto;
    display: flex;
    flex-direction: row;
    gap: 4px;
@@ -207,40 +164,22 @@ body.user-messages-page .topic-list-item {
    border-radius: var(--d-border-radius);
    border: 1px solid var(--status-color);
    color: var(--status-color);
-    height: min-content;
-    grid-area: status;
    width: min-content;
-    @media screen and (max-width: $small) {
-      height: calc(100% - 2px);
-    }
    svg {
      font-size: var(--font-down-1);
      color: var(--status-color);
    }
  }

-  .topic-status-card.--bookmark {
-    display: none;
-  }
-  .topic-status-card.--pinned,
-  .topic-status-card.--unpinned {
+  .topic-status-card.--pinned {
    --status-color: var(--primary-500);
-    cursor: pointer;
-    background-color: transparent;
-    line-height: unset;
  }
  .topic-status-card.--hot {
-    --status-color: var(--hot-color);
-  }
-
-  // title
-  td.main-link .link-top-line {
-    font-size: var(--font-0);
-    grid-area: topic-title;
-    font-weight: 500;
+    --status-color: #e45735;
  }

  .link-top-line .event-date {
+    margin-left: 0.5em;
    font-size: var(--font-down-3);
  }

@@ -248,11 +187,16 @@ body.user-messages-page .topic-list-item {
    display: none;
  }

+  .topic-list-data {
+    padding: 0;
+  }
+
  td.main-link .link-top-line a.raw-topic-link {
    padding: 0;
  }

-  .topic-post-badges .badge-notification.unread-posts {
+  .topic-post-badges .badge-notification.unread-posts,
+  .topic-post-badges .badge-notification.new-topic {
    background-color: var(--tertiary);
    color: var(--tertiary);
    overflow: hidden;
@@ -265,7 +209,8 @@ body.user-messages-page .topic-list-item {

  // excerpt
  .topic-excerpt {
-    grid-area: excerpt;
+    grid-row: 3 / -1;
+    grid-column: 1 / -2;
    margin: 0;
    font-size: var(--font-down-2);
  }
@@ -287,29 +232,27 @@ body.user-messages-page .topic-list-item {

  td.topic-category-status-data {
    display: contents;
-    @media screen and (max-width: $small) {
-      grid-area: category-status;
-      display: flex;
-      gap: 0.5em;
-      align-items: center;
+  }
+  td.topic-category-data {
+    grid-area: category;
+    display: flex;
+    justify-content: flex-end;
+    @include breakpoint(mobile-extra-large) {
+      justify-content: flex-start;
    }
  }
-  td.topic-category-status-data .badge-category__wrapper {
-    grid-area: category;
-  }
-
-  td.topic-category-status-data .badge-category__wrapper {
-    overflow: unset;
+  td.topic-category-data .badge-category__wrapper,
+  td.main-link .link-bottom-line .badge-category__wrapper {
    border-radius: var(--d-border-radius);
-    padding: 6px;
-    align-self: flex-end;
+    padding: 3px 6px;
    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)
    );

-    @media screen and (max-width: $small) {
+    @include breakpoint(tablet) {
      padding: 2px 6px;
+      font-size: var(--font-down-2);
    }

    .badge-category__name {
@@ -337,8 +280,7 @@ body.user-messages-page .topic-list-item {
    gap: 0.5em;
    justify-content: flex-end;
    height: min-content;
-    align-self: flex-end;
-    padding-bottom: 4px;
+    align-self: center;
  }
  .topic-likes-replies-data .topic-likes,
  .topic-likes-replies-data .topic-replies {
@@ -353,15 +295,243 @@ body.user-messages-page .topic-list-item {
  }
 }

-.topic-list-header {
-  display: none;
-}
-
 .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);
+  }
+}
+
+// Bookmarks
+
+.topic-list-item.bookmark-list-item {
+  .link-bottom-line {
+    font-size: unset;
+  }
+  grid-template-columns: 20px min-content min-content auto min-content min-content 36px;
+  grid-template-areas:
+    ". . . . . . dropdown"
+    "avatar update metadata metadata metadata category dropdown";
+  @include breakpoint(mobile-extra-large) {
+    grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
+    grid-template-areas:
+      ". . . . . . . dropdown"
+      "avatar update metadata metadata metadata metadata category dropdown";
+  }
+  &.has-metadata {
+    grid-template-areas:
+      ". . . . . . dropdown"
+      "avatar update metadata metadata metadata category dropdown";
+    @include breakpoint(mobile-extra-large) {
+      grid-template-areas:
+        ". . . . . . . dropdown"
+        "avatar update metadata metadata metadata metadata category dropdown";
+    }
+  }
+  &.excerpt-expanded {
+    grid-template-areas:
+      ". . . . . . . dropdown"
+      "avatar update metadata metadata metadata metadata metadata dropdown"
+      "excerpt excerpt excerpt excerpt excerpt . . dropdown"
+      "excerpt excerpt excerpt excerpt excerpt category category dropdown";
+    @include breakpoint(mobile-extra-large) {
+      grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
+      .post-excerpt {
+        display: none;
+      }
+    }
+    &.has-metadata {
+      grid-template-areas:
+        ". . . . . . . dropdown"
+        "avatar update metadata metadata metadata metadata metadata dropdown"
+        "excerpt excerpt excerpt excerpt excerpt . . dropdown"
+        "excerpt excerpt excerpt excerpt excerpt category category dropdown";
+    }
+  }
+  td.author-avatar {
+    grid-area: avatar;
+  }
+  td.main-link .link-bottom-line {
+    display: contents;
+    .badge-category__wrapper {
+      grid-area: category;
+      display: flex;
+      align-items: center;
+      width: min-content;
+      justify-self: flex-end;
+    }
+  }
+  td.main-link .link-top-line {
+    display: contents;
+    .bookmark-metadata {
+      grid-area: metadata;
+    }
+    .bookmark-status-with-link {
+      grid-column: 1/-2;
+      grid-row: 1/2;
+    }
+  }
+  .post-excerpt {
+    grid-area: excerpt;
+    margin: 0;
+  }
+  .topic-list-data:last-of-type {
+    display: contents;
+    .bookmark-actions-dropdown {
+      grid-area: dropdown;
+      align-self: center;
+    }
+  }
+  .post-metadata.topic-list-data.updated-at {
+    grid-area: update;
+    margin-left: auto;
+  }
+  td.activity .post-activity {
+    display: none;
+  }
+}
+
+// Assigned List
+.topic-list-item.assigned-list-item {
+  td.main-link .link-top-line {
+    grid-column: 1/-3;
+  }
+  grid-template-columns: 20px min-content min-content auto min-content min-content 36px;
+  grid-template-areas:
+    ". . . . . status dropdown"
+    "activity . . . likes-replies category dropdown";
+  @include breakpoint(mobile-extra-large) {
+    td.main-link .link-top-line {
+      grid-column: 1/-2 !important;
+    }
+    grid-template-columns: 20px min-content min-content auto min-content min-content min-content 36px;
+    grid-template-areas:
+      "category category . . . . status dropdown"
+      ". . . . . . . dropdown"
+      "activity . . . . . likes-replies dropdown";
+  }
+  .assign-topic-buttons {
+    display: contents;
+    .assign-actions-dropdown {
+      grid-area: dropdown;
+      align-self: center;
+    }
+  }
+  td.topic-category-status-data {
+    display: contents;
+  }
+  .topic-status-card {
+    position: relative;
+    top: unset;
+    right: unset;
+  }
+}
+
+// User Messages
+
+body.user-messages-page .topic-list-item {
+  td.topic-category-data,
+  td.topic-likes-replies-data,
+  td.topic-status-data {
+    display: none;
+  }
+  td.main-link .link-top-line {
+    grid-row: 1 / 2;
+    grid-column: 1 / -1;
+  }
+  grid-template-areas:
+    ". . . . . . ."
+    "activity . . . . likes-replies likes-replies";
+  &.excerpt-expanded {
+    grid-template-columns: 20px repeat(6, 1fr) auto;
+    grid-template-rows: 20px auto auto 30px;
+    grid-template-areas:
+      ". . . . . . . ."
+      "activity . . . . . . ."
+      "excerpt excerpt excerpt excerpt excerpt excerpt . ."
+      "excerpt excerpt excerpt excerpt excerpt excerpt likes-replies likes-replies";
+    @include breakpoint(extra-large) {
+      grid-template-areas:
+        ". . . . . . . ."
+        "activity . . . . . . ."
+        "excerpt excerpt excerpt excerpt excerpt excerpt . likes-replies"
+        "excerpt excerpt excerpt excerpt excerpt excerpt . likes-replies";
+    }
+  }
+  @include breakpoint(mobile-extra-large) {
+    grid-template-columns: 25px auto repeat(6, 1fr);
+    grid-template-rows: auto auto;
+    grid-template-areas:
+      ". . . . . . . ."
+      "activity . . . . . . .";
+    .topic-excerpt {
+      display: none;
+    }
+  }
+}
+
+// Bulk select
+
+.bulk-select-enabled .topic-list-body .topic-list-item {
+  td.topic-likes-replies-data {
+    display: none;
+  }
+  td.main-link .link-top-line,
+  &.--has-status-card td.main-link .link-top-line {
+    grid-column: 2/-1;
+    font-weight: 500;
+  }
+  .topic-excerpt {
+    grid-area: excerpt;
+    margin: 0;
+  }
+  &.excerpt-expanded {
+    grid-template-areas:
+      "bulk-select . . . status" "bulk-select activity . . ."
+      "bulk-select excerpt excerpt excerpt category";
+    @include breakpoint(mobile-extra-large) {
+      grid-template-areas:
+        "bulk-select category . . .  status"
+        "bulk-select . . . . ."
+        "bulk-select activity activity . . .";
+    }
+  }
+  grid-template-areas:
+    "bulk-select . . . status"
+    "bulk-select activity activity . category";
+  .bulk-select {
+    grid-area: bulk-select;
+    padding: 0;
+    margin: 0;
+    align-self: center;
+    justify-self: center;
+    label {
+      margin: 0;
+    }
+  }
+  @include breakpoint(large) {
+    grid-template-areas:
+      "bulk-select . . . status"
+      "bulk-select activity activity . category";
+  }
+  @include breakpoint(mobile-extra-large) {
+    td.main-link .link-top-line,
+    &.--has-status-card td.main-link .link-top-line {
+      grid-column: 2/-1;
+      grid-row: 2;
+      font-weight: 500;
+    }
+    grid-template-areas:
+      "bulk-select category . . .  status"
+      "bulk-select . . . . ."
+      "bulk-select activity activity . . .";
  }
 }
@@ -2,6 +2,7 @@
  .contents {
    font-size: var(--font-up-1);
    line-height: 1.25;
+    -webkit-font-smoothing: antialiased;
  }
 }

@@ -10,61 +11,60 @@
  top: calc(
    var(--header-offset, 60px) + 53px + calc(var(--spacing-block-l) * 2)
  );
+  z-index: 300;
 }

 .timeline-container .topic-timeline {
  min-width: unset; // why we have this?
  .timeline-scrollarea {
    border-left: 1px solid var(--accent-color);
-  }
-  .timeline-scroller {
-    padding: 0.25em;
-    border: 1px solid var(--accent-color);
-    border-radius: 0.75em;
-    padding-left: 0.5em;
-    margin-left: calc(-0.5em - 2.5px);
-    background: var(--secondary);
-    height: 40px !important; // height is coming from element style have no other choice
-  }
-  .timelime-scroller-content {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25em;
-  }
-  .timeline-replies,
-  .timeline-ago {
-    line-height: 1;
-  }
-  .timeline-ago {
-    // font-size: var(--font-down-1);
-  }
-  .timeline-handle {
-    background-color: var(--accent-color);
-    width: 3px;
-    border-radius: 2px;
-    height: calc(100% - 6px);
+
+    .timeline-scroller {
+      @include breakpoint("medium", $rule: min-width) {
+        padding: 0.25em;
+        border: 1px solid var(--accent-color);
+        border-radius: 0.75em;
+        padding-left: 0.5em;
+        margin-left: calc(-0.5em - 2.5px);
+        background: var(--d-content-background);
+        height: 40px !important; // height is coming from element style have no other choice
+      }
+
+      .timeline-scroller-content {
+        // display: flex;
+        // flex-direction: column;
+        // gap: 0.25em;
+      }
+      .timeline-replies,
+      .timeline-ago {
+        line-height: 1;
+      }
+    }
+    .timeline-handle {
+      background-color: var(--accent-color);
+      @include breakpoint("medium", $rule: min-width) {
+        width: 3px;
+        border-radius: 2px;
+        height: calc(100% - 6px);
+      }
+    }
  }
 }

-#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);
+//should probably get rid of this extra specificity class in core?
+.timeline-container.timeline-fullscreen {
+  @include breakpoint("medium", $rule: max-width) {
+    .topic-timeline .timeline-scrollarea-wrapper {
+    }
+    .topic-timeline
+      .timeline-scrollarea
+      .timeline-scroller
+      .timeline-scroller-content {
+      padding-right: 0.5em;
+    }
  }
-  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 +113,11 @@
  position: relative;
  right: -4px;
 }
+
+nav.post-controls .actions button {
+  font-size: var(--font-0);
+}
+
+.archetype-private_message {
+  --pm-border-radius: var(--d-border-radius);
+}
@@ -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,11 @@
+enable_welcome_banner:
+  default: true
+  description: "Overrides the core `enable welcome banner` site setting"
+
+search_experience:
+  type: enum
+  default: search_field
+  choices:
+    - search_field
+    - search_icon
+  description: "Overrides the core `search experience` site setting"
@@ -0,0 +1,63 @@
+# 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 topic-list-data",
+        "topic-activity-data",
+        "topic-status-data",
+        "topic-category-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
Jordan Vidrine	efebb531c0	Merge branch 'main' into second-batch	2025-03-28 13:16:27 -05:00
Jordan Vidrine	a54dbdc59b	UX: More logic for title columns (#87 )	2025-03-28 13:13:28 -05:00
chapoi	0715bdc33a	FIX: remove overflow prop (#91 )	2025-03-28 13:12:42 -05:00
chapoi	34dfba0677	UX: fix minimised draft bg colour for composer (#89 ) Followup fix for #84	2025-03-28 13:12:42 -05:00
chapoi	701b69e0df	Composer styling on desktop (#84 )	2025-03-28 13:11:53 -05:00
chapoi	0fbe345c0c	FIX: remove overflow prop (#91 )	2025-03-28 13:11:21 -05:00
chapoi	7d48d0f936	UX: fix minimised draft bg colour for composer (#89 ) Followup fix for #84	2025-03-28 13:11:21 -05:00
Jordan Vidrine	8b6c056720	excerpt fixes	2025-03-28 13:11:21 -05:00
Jordan Vidrine	94c31086f9	title full width on mobile	2025-03-28 13:11:21 -05:00
Jordan Vidrine	1459099b8d	more	2025-03-28 13:11:21 -05:00
Martin Brennan	2983bac4a0	FIX: Messed up CSS grid on messages list (#88 ) This needs a better follow-up, but the messages topic list is currently busted. Removing the overridden topic-list-item grid for messages helps.	2025-03-28 13:11:21 -05:00
chapoi	cb72e6e091	Composer styling on desktop (#84 )	2025-03-28 13:11:21 -05:00
Jordan Vidrine	49f708db2c	PM fixes, mobile fixes	2025-03-28 13:11:21 -05:00
Jordan Vidrine	6364aa74e6	more logic for title columns	2025-03-28 13:11:21 -05:00
Jordan Vidrine	2046f525d4	UX: More logic for title columns (#87 )	2025-03-28 10:49:28 -05:00
chapoi	9945f1d899	FIX: remove overflow prop (#91 )	2025-03-28 08:27:36 -05:00
chapoi	f70524a44b	UX: fix minimised draft bg colour for composer (#89 ) Followup fix for #84	2025-03-28 14:17:45 +01:00
Martin Brennan	0a416d317e	FIX: Messed up CSS grid on messages list (#88 ) This needs a better follow-up, but the messages topic list is currently busted. Removing the overridden topic-list-item grid for messages helps.	2025-03-28 12:39:49 +10:00
chapoi	910bc855c1	Composer styling on desktop (#84 )	2025-03-27 16:41:20 -05:00
chapoi	e20b83b79d	Misc mobile fixes (#83 )	2025-03-27 16:35:08 -05:00
Jordan Vidrine	e7de006a23	UX: Topic list layout changes (#85 )	2025-03-27 16:31:46 -05:00
Jordan Vidrine	eff8628223	DEV: Fix spec (#86 )	2025-03-27 16:31:28 -05:00
Jordan Vidrine	a84682c0d0	FIX: Bulk select fix (#81 ) This PR fixes bulk select on the new topic cards.	2025-03-27 10:03:40 +10:00
Jordan Vidrine	adb1e4dcf2	UX: Change title fonts, etc (#80 )	2025-03-26 14:08:42 -05:00
Jordan Vidrine	d300cf9d0f	UX: New topic card layout (#79 )	2025-03-26 10:47:52 -05:00
Kris	6766b94232	UX: add tags-index container (#78 )	2025-03-25 16:18:17 -04:00
Jordan Vidrine	af82802548	UX: Topic list card fixes for assignments & bookmarks (#76 )	2025-03-25 15:11:49 -05:00
Kris	943dd4e2d2	UX: change category nav background on mobile (#77 )	2025-03-25 15:54:03 -04:00
Jordan Vidrine	1a372b7edc	fix z index for input menu (#75 )	2025-03-25 10:08:16 -05:00
Kris	f786eae910	UX: set border radius on PMs (#74 )	2025-03-24 15:22:25 -04:00
Jordan Vidrine	dabd9a159a	DEV: Use new is_hot_topic serializer (#73 )	2025-03-24 12:05:10 -05:00
Jordan Vidrine	969e2b7969	begin migration of colors (#72 )	2025-03-21 09:44:09 -05:00
chapoi	ade14d7f54	Welcome banner: slight zindex increase (#70 )	2025-03-21 11:55:29 +01:00
chapoi	30cb6bbf59	UX: Z-index welcome banner (#68 ) * UX: increase z-index of welcome banner * UX: lower z-index of sticky list-controls	2025-03-20 19:13:52 +01:00
Jordan Vidrine	bee6e4e3c5	init (#69 )	2025-03-20 09:43:40 -05:00
Kris	7f6b0df5bf	UX: move and restyle bulk select on desktop (#65 )	2025-03-20 08:42:11 -04:00
Martin Brennan	274e5f7a1f	UX: Add theme settings and value transformers (#67 ) This commit adds the above for these core site settings: * search_experience * enable_welcome_banner Since for horizon we want better control of the default experience of these settings OOTB. See also https://github.com/discourse/discourse/pull/31917	2025-03-20 15:38:46 +10: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