merge

about.json

@@ -8,19 +8,36 @@
   "minimum_discourse_version": null,
   "maximum_discourse_version": null,
   "assets": {},
-  "modifiers": {},
+  "modifiers": {
+    "svg_icons": ["fa-fire"]
+  },
+  "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": {
     "next_gen": {
       "primary": "1A1A1A",
-      "secondary": "F5F8FF",
-      "header_background": "F5F8FF",
-      "tertiary": "595bca"
+      "primary-low": "ebecf9",
+      "primary-500": "8591ad",
+      "secondary": "ffffff",
+      "header_background": "f5f8ff",
+      "tertiary": "313270",
+      "tertiary-low": "d8d9f3",
+      "tertiary-50": "f5f8ff",
+      "selected": "d8d9f3",
+      "hover": "ebebf9"
     },
     "next_gen_dark": {
-      "primary": "F5F8FF",
-      "secondary": "1A1A1A",
-      "header_background": "1A1A1A",
-      "tertiary": "595bca"
+      "primary": "F1EFF9",
+      "secondary": "1e1a36",
+      "header_background": "00091d",
+      "header_primary": "F5F8FF",
+      "tertiary": "6465ab",
+      "tertiary-50": "131124",
+      "selected": "1e1a36",
+      "hover": "131124"
     }
   }
-}
+}

common/color_definitions.scss

@@ -0,0 +1,6 @@
+$accent-color: dark-light-choose(#3c41c3, #6e4bbc);
+
+:root {
+  --accent-color: #{$accent-color};
+  --background-color: #f5f8ff;
+}

common/common.scss

@@ -1,12 +1,13 @@
-@import "variables";
-@import "header";
-@import "sidebar";
-@import "main";
-@import "topic-cards";
-@import "search-banner";
-@import "nav-pills";
 @import "buttons";
-@import "chat";
+@import "header";
 @import "hiddenstuff";
+@import "main";
+@import "nav-pills";
+@import "search-banner";
+@import "sidebar";
 @import "topic";
-@import "user";
+@import "topic-cards";
+@import "variables";
+@import "box-view";
+@import "chat";
+@import "misc";

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

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

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

@@ -1,5 +0,0 @@
-import { apiInitializer } from "discourse/lib/api";
-
-export default apiInitializer("1.8.0", (/* api */) => {
-  // console.log("hello world from api initializer!");
-});

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

@@ -0,0 +1,14 @@
+import Component from "@glimmer/component";
+import avatar from "discourse/helpers/avatar";
+
+export default class TopicAuthorColumn extends Component {
+  constructor() {
+    super(...arguments);
+  }
+
+  <template>
+    <span class="topic-author-avatar">
+      {{avatar @topic.creator imageSize="large"}}
+    </span>
+  </template>
+}

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

@@ -0,0 +1,11 @@
+import Component from "@glimmer/component";
+
+export default class TopicAuthorColumn extends Component {
+  constructor() {
+    super(...arguments);
+  }
+
+  <template>
+    <span class="topic-author">@{{@topic.creator.username}}</span>
+  </template>
+}

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

@@ -0,0 +1,12 @@
+import Component from "@glimmer/component";
+import { categoryLinkHTML } from "discourse/helpers/category-link";
+
+export default class TopicAuthorColumn extends Component {
+  constructor() {
+    super(...arguments);
+  }
+
+  <template>
+    {{categoryLinkHTML @topic.category}}
+  </template>
+}

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

@@ -0,0 +1,14 @@
+import Component from "@glimmer/component";
+import icon from "discourse/helpers/d-icon";
+
+export default class TopicLikesColumn extends Component {
+  constructor() {
+    super(...arguments);
+  }
+
+  <template>
+    {{#if @topic.like_count}}
+      <span class="topic-likes">{{icon "heart"}}{{@topic.like_count}}</span>
+    {{/if}}
+  </template>
+}

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

@@ -0,0 +1,14 @@
+import Component from "@glimmer/component";
+import icon from "discourse/helpers/d-icon";
+
+export default class TopicRepliesColumn extends Component {
+  constructor() {
+    super(...arguments);
+  }
+
+  <template>
+    {{#if @topic.posts_count}}
+      <span class="topic-replies">{{icon "reply"}}{{@topic.posts_count}}</span>
+    {{/if}}
+  </template>
+}

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

@@ -0,0 +1,96 @@
+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";
+
+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");
+    }
+    return classes.join(" ");
+  }
+
+  get heatMap() {
+    return this.args.topic.views > this.siteSettings.topic_views_heat_medium;
+  }
+
+  @action
+  togglePinned(e) {
+    e.preventDefault();
+    this.args.topic.togglePinnedForUser();
+  }
+
+  <template>
+    {{#if @topic.bookmarked}}
+      <span class={{this.statusClass}}>{{icon "bookmark"}}Bookmarked</span>
+    {{/if}}
+    {{#if (and @topic.closed @topic.archived)~}}
+      <span class={{this.statusClass}}>Locked and Archived</span>
+    {{else if @topic.closed}}
+      <span class={{this.statusClass}}>Locked</span>
+    {{else if @topic.archived}}
+      <span class={{this.statusClass}}>Archived</span>
+    {{/if}}
+    {{#if @topic.is_warning}}
+      <span class={{this.statusClass}}>Warning</span>
+    {{else if (and @showPrivateMessageIcon @topic.isPrivateMessage)}}
+      <span class={{this.statusClass}}>Private Message</span>
+    {{/if}}
+    {{#if @topic.pinned}}
+      {{#if this.canAct}}
+        <button
+          type="button"
+          {{on "click" this.togglePinned}}
+          class={{this.statusClass}}
+        >{{icon "thumbtack"}}Pinned</button>
+      {{else}}
+        <span class={{this.statusClass}}>{{icon "thumbtack"}}Pinned</span>
+      {{/if}}
+    {{else if @topic.unpinned}}
+      {{#if this.canAct}}
+        <button
+          type="button"
+          {{on "click" this.togglePinned}}
+          class={{this.statusClass}}
+        >{{icon "thumbtack" class="unpinned"}}Unpinned</button>
+      {{else}}
+        <span class={{this.statusClass}}>{{icon
+            "thumbtack"
+            class="unpinned"
+          }}Unpinned</span>
+      {{/if}}
+    {{/if}}
+
+    {{#if this.heatMap}}
+      <span class="topic-status-card --hot">{{icon "fa-fire"}}Hot</span>
+    {{/if}}
+  </template>
+}

javascripts/discourse/components/experimental-screen.gjs

@@ -0,0 +1,67 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import { cancel, throttle } from "@ember/runloop";
+import { htmlSafe } from "@ember/template";
+import { bind } from "discourse/lib/decorators";
+
+export default class ExperimentalScreen extends Component {
+  @tracked left = 0;
+  @tracked right = 0;
+
+  willDestroy() {
+    super.willDestroy(...arguments);
+    cancel(this._throttledCalculateDistanceHandler);
+  }
+
+  getDistance(element) {
+    const rect = element.getBoundingClientRect();
+    return rect;
+  }
+
+  @bind
+  calculateDistance() {
+    this._throttledCalculateDistanceHandler = throttle(
+      this,
+      this._throttledCalculateDistance,
+      50
+    );
+  }
+
+  _throttledCalculateDistance() {
+    const element = document.getElementById("main-outlet");
+
+    if (element) {
+      const distance = this.getDistance(element);
+      this.left = distance.left;
+      this.right = distance.right;
+    }
+  }
+
+  get distanceStyles() {
+    return htmlSafe(
+      `--left-distance: ${this.left}px; --right-distance: ${this.right}px;`
+    );
+  }
+
+  @action
+  onInsert() {
+    this.calculateDistance();
+    window.addEventListener("resize", this.calculateDistance);
+  }
+
+  <template>
+    <ul
+      class="experimental-screen"
+      {{didInsert this.onInsert}}
+      style={{this.distanceStyles}}
+    >
+      <li class="experimental-screen__top-left"></li>
+      <li class="experimental-screen__top-right"></li>
+      <li class="experimental-screen__bottom-left"></li>
+      <li class="experimental-screen__bottom-right"></li>
+      <li class="experimental-screen__bottom-bar"></li>
+    </ul>
+  </template>
+}

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

@@ -0,0 +1,81 @@
+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 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}} />
+  </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}} />
+    <TopicStatusColumn @topic={{@topic}} />
+  </td>
+</template>;
+
+const TopicLikesReplies = <template>
+  <td class="topic-likes-replies-data">
+    <TopicLikesColumn @topic={{@topic}} />
+    <TopicRepliesColumn @topic={{@topic}} />
+  </td>
+</template>;
+
+export default {
+  name: "topic-list-customizations",
+
+  initialize() {
+    withPluginApi("1.39.0", (api) => {
+      api.registerValueTransformer(
+        "topic-list-columns",
+        ({ value: columns }) => {
+          columns.add("topic-author", {
+            item: TopicAuthor,
+            after: "activity",
+          });
+          columns.add("topic-category-status", {
+            item: TopicCategoryStatus,
+            after: "topic-author",
+          });
+          columns.add("topic-author-avatar", {
+            item: TopicAuthorAvatar,
+            after: "topic-category-status",
+          });
+          columns.add("topic-likes-replies", {
+            item: TopicLikesReplies,
+            after: "topic-author-avatar",
+          });
+          columns.delete("posters");
+          columns.delete("views");
+          columns.delete("replies");
+          return columns;
+        }
+      );
+
+      api.registerValueTransformer(
+        "topic-list-item-class",
+        ({ value: classes, context }) => {
+          if (context.topic.pinned || context.topic.pinned_globally) {
+            classes.push("--pinned");
+          }
+          return classes;
+        }
+      );
+
+      api.registerValueTransformer("topic-list-item-mobile-layout", () => {
+        return false;
+      });
+    });
+  },
+};

locales/en.yml

@@ -1,5 +1,5 @@
 en:
   theme_metadata:
-    description: ''
+    description: ""
     settings:
       example_setting: A description of a setting.

mobile/mobile.scss

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

scss/box-view.scss

@@ -0,0 +1,113 @@
+@media screen and (min-width: 1300px) {
+  #main-outlet {
+    border-top-right-radius: var(--d-border-radius-large);
+    border-top-left-radius: var(--d-border-radius-large);
+  }
+}
+
+.has-full-page-chat .experimental-screen {
+  display: none;
+}
+
+.experimental-screen {
+  max-width: unset !important;
+  .has-full-page-chat & {
+    display: none;
+  }
+  @media screen and (max-width: 488px) {
+    display: none;
+  }
+  width: 100%;
+  display: block;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  container: content-width / inline-size;
+  li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  &__top-left,
+  &__top-right,
+  &__bottom-left,
+  &__bottom-right {
+    position: fixed;
+    width: var(--d-border-radius-large);
+    height: var(--d-border-radius-large);
+    background-color: var(--tertiary-50);
+    z-index: 399;
+    -webkit-mask: radial-gradient(
+      circle at var(--d-border-radius-large) var(--d-border-radius-large),
+      transparent var(--d-border-radius-large),
+      transparent var(--d-border-radius-large),
+      black var(--d-border-radius-large)
+    );
+  }
+  &__top-left {
+    top: var(--header-offset);
+    left: var(--left-distance);
+  }
+  &__top-right {
+    top: var(--header-offset);
+    transform: rotate(90deg);
+    left: calc(var(--right-distance) - var(--d-border-radius-large));
+  }
+  &__bottom-left {
+    transform: rotate(-90deg);
+    bottom: var(--d-border-radius-large);
+    left: var(--left-distance);
+    @media screen and (max-width: 768px) {
+      bottom: calc(var(--d-border-radius-large) * 2);
+    }
+  }
+  &__bottom-right {
+    transform: rotate(180deg);
+    bottom: var(--d-border-radius-large);
+    @container content-width (width > 1px) {
+      left: calc(var(--right-distance) - var(--d-border-radius-large));
+      @media screen and (max-width: 768px) {
+        bottom: calc(var(--d-border-radius-large) * 2);
+      }
+    }
+  }
+  &__bottom-bar {
+    position: fixed;
+    width: 100%;
+    z-index: 399;
+    background-color: var(--tertiary-50);
+    bottom: 0;
+    left: var(--left-distance);
+    height: var(--d-border-radius-large);
+    @media screen and (max-width: 768px) {
+      height: calc(var(--d-border-radius-large) * 2);
+    }
+    @container content-width (width > 1px) {
+      width: 100cqw;
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .with-topic-progress {
+    bottom: calc(
+      env(safe-area-inset-bottom) + var(--composer-height, 0px) +
+        var(--d-border-radius-large)
+    );
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .with-topic-progress {
+    bottom: calc(
+      env(safe-area-inset-bottom) + var(--composer-height, 0px) +
+        calc(var(--d-border-radius-large) * 2)
+    );
+  }
+}
+
+@media screen and (max-width: 400px) {
+  .with-topic-progress {
+    bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
+  }
+}

scss/buttons.scss

@@ -2,19 +2,136 @@
   --d-button-border-radius: 6.25rem;
 }
 
-.btn {
-  padding: 0.5em 1rem;
+.discourse-no-touch .topic-body .actions .fade-out {
+  transition: none;
 }
 
-.btn-default {
-  border: 1px solid var(--accent-color);
-  background: var(--secondary);
+.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;
+  }
 }
-#create-topic.btn,
-.topic-drafts-menu-trigger {
+
+.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);
+  }
+  svg {
+    color: var(--secondary);
+  }
+}
+
+.btn-default,
+.select-kit .select-kit-header {
+  border: 1px solid var(--accent-color);
+  //id like to use rgba of the accent colour but how to derive that?
+  // box-shadow: 0px 0px 8px 2px oklch(from (var(--accent-color)) calc(l * 2) calc(c * 0.125) h);
+  background: var(--secondary);
+
+  .d-icon {
+    color: var(--accent-color);
+  }
+  &:hover {
+    .discourse-no-touch & {
+      border: 1px solid transparent;
+      box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.1);
+      background: var(--secondary);
+      color: var(--accent-color);
+      .d-icon {
+        color: var(--accent-color);
+      }
+    }
+  }
+  &:focus-visible {
+    .discourse-no-touch & {
+      background: var(--secondary);
+      color: var(--accent-color);
+      box-shadow: 0px 0px 0px 2px var(--secondary),
+        0px 0px 0px 4px var(--accent-color);
+      .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);
+      }
+    }
+  }
+}
+.btn-primary,
+#create-topic.btn {
   background-color: var(--accent-color);
   color: var(--accent-text-color);
   .d-icon {
     color: var(--accent-text-color);
   }
+  &: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);
+      box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.15);
+    }
+  }
+  &: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(--accent-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;
+    }
+  }
+}
+
+.post-controls {
+  svg.d-icon {
+    color: inherit !important; //something we should honestly implement in core imo, when do we ever NOT want the same colour for icon and text?
+  }
+}
+
+//undoing the outline for select-kit, since Im using a custom visual cue
+.select-kit.single-select.is-expanded .select-kit-header:not(.btn),
+.select-kit.single-select .select-kit-header:not(.btn):focus,
+.select-kit.single-select .select-kit-header:not(.btn):active {
+  outline: transparent;
+  border-color: var(--accent-color);
 }

scss/chat.scss

@@ -1,10 +1,16 @@
-.c-navbar-container {
-  background-color: light-dark(#ffffff, #000000);
-  border-top-right-radius: var(--d-border-radius-large);
+.full-page-chat.full-page-chat-sidebar-enabled {
   border-top-left-radius: var(--d-border-radius-large);
+  box-shadow: 0px 0px 1px 2px var(--tertiary-100),
+    0px 0px 24px 4px var(--tertiary-100);
+  border: none;
 }
 
-.chat-message-container,
-.chat-transcript {
-  background: transparent;
+.c-navbar-container {
+  border-top-left-radius: var(--d-border-radius-large);
+  padding: 0 1.5rem;
+  background-color: var(--d-content-background);
+}
+
+body.has-full-page-chat {
+  background-color: var(--background-color);
 }

scss/header.scss

@@ -1,6 +1,30 @@
 .d-header {
   box-shadow: none;
+  background: var(--background-color);
+  padding-bottom: 1.5em;
 }
-.desktop-view .d-header {
-  background: transparent;
+
+.has-full-page-chat .d-header {
+  background-color: transparent;
+}
+
+.user-menu .quick-access-panel,
+.user-notifications-list {
+  li {
+    &.pending,
+    &.unread {
+      background: var(--d-hover);
+
+      .discourse-no-touch & {
+        &:hover,
+        &:focus {
+          background: var(--d-selected);
+        }
+      }
+    }
+  }
+}
+
+.user-menu.revamped .tabs-list .btn.active {
+  background: var(--d-hover);
 }

scss/hiddenstuff.scss

@@ -1,5 +1,8 @@
 .sidebar__panel-switch-button,
 .sidebar-section[data-section-name="messages"],
-.list-controls #create-topic {
+.list-controls #create-topic,
+.notifications-button-footer .reason .text,
+.pinned-button .reason .text,
+.more-topics__browse-more {
   display: none;
 }

scss/main.scss

@@ -1,68 +1,84 @@
-body,
-html {
-  background-color: #f5f8ff;
+html:not(:has(.has-full-page-chat)) {
+  background-color: var(--background-color);
 }
 
-body:not(.archetype-regular, .has-full-page-chat)
-  #main-outlet-wrapper
-  #main-outlet {
-  overflow: scroll;
-  border-radius: var(--d-border-radius-large);
-  @media screen and (max-width: 600px) {
-    border-radius: 0;
-  }
+:root {
+  --main-grid-gap: 2em;
 }
 
-#main-outlet-wrapper {
-  margin-top: 1.5rem;
-  gap: 2em;
-  height: calc(100vh - var(--header-offset) - 4rem);
-  box-sizing: border-box;
-  @media screen and (max-width: 600px) {
-    gap: 0;
-    margin-top: 0;
-    height: 100%;
-  }
-  #main-outlet {
-    width: calc(100% - 48px);
-    height: inherit;
-    overflow: scroll;
-    padding: 12px 24px;
-    @media screen and (max-width: 600px) {
-      border-radius: 0px;
+body:not(.has-full-page-chat) {
+  background-color: var(--background-color);
+  #main-outlet-wrapper {
+    // margin-top: 1.5rem;
+    @media screen and (max-width: 485px) {
+      --main-grid-gap: 0;
     }
-    @media screen and (max-width: 425px) {
-      padding: 12px 0;
+    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;
+      // }
+      //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,
+      #topic-title,
+      .container.posts,
+      #topic-footer-buttons,
+      .more-topics__container,
+      .search-banner,
+      .container.viewing-self,
+      .reviewable,
+      .admin-content,
+      .discourse-post-event-upcoming-events,
+      .container.groups-index,
+      .body-page,
+      .container.badges {
+        max-width: 1000px;
+        margin-inline: auto;
+        padding-inline: 1.5em;
+        @media screen and (max-width: 425px) {
+          padding-inline: 0.5em;
+        }
+      }
+      border-radius: var(--d-border-radius-large);
+      border-radius: 1.25rem;
+      // box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
+      background-color: var(--d-content-background);
     }
-    &:has(.list-controls) {
-      padding-top: 0;
-    }
-    &:has(#topic-title) {
-      padding-top: 0;
-      max-width: 1000px;
-    }
-    > *:not(.full-page-chat) {
-      max-width: 1000px;
-      margin-inline: auto;
-    }
-    border-radius: var(--d-border-radius-large);
-    border-radius: 1.25rem;
-    .navigation-topics &,
-    .navigation-category & {
-      background: radial-gradient(
-          100.59% 70.87% at 41.19% 73.28%,
-          rgba(188, 241, 238, 0.2) 0%,
-          rgba(255, 255, 255, 0) 100%
-        ),
-        radial-gradient(
-          75.11% 79.17% at 66.02% 41.71%,
-          rgba(162, 164, 225, 0.2) 0%,
-          rgba(255, 255, 255, 0) 100%
-        ),
-        #fff;
-    }
-    box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
-    background-color: light-dark(#ffffff, #000000);
+  }
+
+  // .global-notice {
+  //   margin-top: var(--spacing-block-m);
+  // }
+}
+
+.list-container {
+  .topic-list-body {
+    padding-top: var(--spacing-block-m);
   }
 }
+
+aside.onebox {
+  background-color: var(--d-content-background);
+}
+
+.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);
+  padding: 1em;
+  background-color: var(--d-content-background);
+}

scss/misc.scss

@@ -0,0 +1,45 @@
+.user-main .about.collapsed-info .details {
+  background: var(--d-content-background);
+}
+
+.user-menu .quick-access-panel .read,
+.user-notifications-list .read {
+  background: var(--d-content-background);
+}
+
+.powered-by-discourse {
+  z-index: 9999;
+}
+
+.boxed.white {
+  background-color: var(--d-content-background);
+}
+
+.admin-area .sidebar-wrapper .admin-panel {
+  background-color: transparent;
+}
+
+.admin-report .main .report-alert.no-data,
+.admin-report .main .report-alert.rate-limited {
+  background-color: var(--d-content-background);
+}
+
+.admin-detail {
+  background-color: var(--d-content-background);
+}
+
+.select-kit.combo-box .select-kit-header,
+.select-kit.multi-select .multi-select-header,
+.d-editor-textarea-wrapper,
+.fk-d-menu__inner-content,
+.menu-panel {
+  background-color: var(--d-content-background);
+}
+
+.fk-d-menu .btn {
+  border-radius: 0;
+}
+
+.d-editor-button-bar {
+  padding: 3px;
+}

scss/nav-pills.scss

@@ -1,29 +1,36 @@
 .list-controls {
-  // position: sticky;
-  // top: 0;
-  // background: transparent;
-  // this does not work properly without using a background color
-  // which if used, conflicts with the gradient background
+  position: sticky;
+  top: var(--header-offset);
+  background: var(--d-content-background);
   z-index: 100;
-  padding-top: 1.5rem;
+  padding: 1.5rem 0 1rem 0;
   max-width: unset;
-  width: 100%;
 
   .navigation-container {
+    gap: 1rem;
     .category-breadcrumb {
       order: 1;
-      margin-left: 0.5em;
     }
   }
-  .combo-box .combo-box-header {
+  .combo-box .combo-box-header,
+  .discourse-post-event .discourse-post-event-widget {
+    // needs more specificy than just in the button file
     background-color: var(--secondary);
-    border-radius: 6.25rem;
+    border: 1px solid var(--accent-color);
+    border-radius: var(--d-border-radius-large);
+    // font-size: var(--font-up-1-rem);
   }
-  .select-kit.is-expanded .select-kit-body {
-    background: #ffffff;
-    border-radius: var(--d-border-radius);
+  .select-kit.combo-box.category-drop.has-selection
+    .category-drop-header:hover {
+    border-color: transparent;
   }
 }
+
+.select-kit.is-expanded .select-kit-body {
+  border-radius: var(--d-border-radius);
+  background-color: var(--d-content-background);
+}
+
 .nav-pills > li > a:hover,
 .nav-pills > li button:hover {
   background: transparent;

scss/search-banner.scss

@@ -5,13 +5,11 @@
   grid-column-gap: 1em;
   grid-row-gap: 0.5em;
   border-bottom: 1px solid var(--primary-300);
-  padding: 2.5em 0 2.5em;
-  margin-bottom: 2.5em;
-  --search-color: #595bca;
-  @media screen and (max-width: 425px) {
-    padding: 1em 1em 0 1em;
-    margin-bottom: 0.5em;
-    border-bottom: none;
+  padding: 1.5em 0 2.5em;
+  margin-bottom: 0;
+  --search-color: var(--tertiary-medium);
+  @media screen and (max-width: 900px) {
+    padding-bottom: 1em;
   }
   h1 {
     grid-column: 1/2;
@@ -21,7 +19,7 @@
     align-self: center;
     margin: 0;
     font-weight: 400;
-    color: #350c73;
+    color: var(--tertiary);
     @media screen and (max-width: 1028px) {
       font-size: var(--font-up-4);
       grid-column: 1/-1;
@@ -64,8 +62,8 @@
     display: none;
   }
   .search-input {
-    background: light-dark(#ffffff, #1f1f1f);
-    border: 1px solid oklch(from var(--search-color) 80% calc(c * 2.5) h);
+    background: var(--d-content-background);
+    border: 1px solid var(--search-color);
     box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
   }
   .search-menu .search-input:focus-within,
@@ -77,7 +75,10 @@
   .search-menu .searching .d-icon {
     color: var(--search-color);
   }
+  .panel-body {
+    z-index: z("dropdown");
+  }
   .results {
-    background: light-dark(#ffffff, #1f1f1f);
+    background: var(--d-content-background);
   }
 }

scss/sidebar.scss

@@ -1,9 +1,53 @@
-:root {
-  --d-sidebar-background: #f5f8ff;
-}
-
 .sidebar-wrapper {
+  .has-full-page-chat &,
+  .has-full-page-chat & .sidebar-footer-wrapper {
+    background: transparent;
+  }
   .sidebar-container {
     border-right: none;
   }
+
+  .sidebar-sections {
+    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;
+    border-radius: 10px; // visually somewhat consistent with border on main outlet (?)
+    transition: none;
+  }
+}
+.sidebar-section-wrapper {
+  padding-block: 0.45em;
+  .sidebar-section-header {
+    font-size: var(--font-down-1);
+  }
+  .sidebar-section-content {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-block-xs);
+  }
+}
+
+.sidebar-section-link-wrapper .sidebar-section-link:focus,
+.sidebar-section-link-wrapper .sidebar-section-link:hover {
+  .d-icon {
+    color: var(--primary);
+  }
+}
+
+.sidebar-new-topic-button__wrapper {
+  margin-bottom: 1.5rem;
+  @media screen and (max-width: 1000px) {
+    .sidebar-new-topic-button .d-icon {
+      display: none;
+    }
+  }
+}
+
+.sidebar-wrapper .sidebar-sections {
+  padding: 0 1rem;
 }

scss/topic-cards.scss

@@ -1,26 +1,334 @@
+// 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);
+}
+
+.topic-list-body {
+  border: none;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  @media screen and (max-width: $extra-small) {
+    gap: 0.5em;
+  }
+}
+
+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 {
-  background: light-dark(#ffffff, #1f1f1f);
+  -webkit-font-smoothing: antialiased;
+  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-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;
+    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";
+    }
+    @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";
+      .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";
+  }
+  @media screen and (max-width: $extra-small) {
+    border: none;
+    border-bottom: 1px solid var(--primary-200);
+  }
+
+  background: var(--d-content-background);
+  box-shadow: 0px 0px 26px 1px
+    light-dark(hsl(224 61% 96% / 1), hsl(224 61% 96% / 0.1));
   &:hover {
-    background: light-dark(#fcfcfc, #161616);
+    border: 1px solid var(--accent-color);
+    background: var(--d-content-background);
+  }
+
+  // display contents
+  td.main-link,
+  td.posters,
+  td.posts,
+  td.views,
+  td.activity {
+    display: contents;
+  }
+
+  td.num.posts a {
+    padding: 0;
+  }
+
+  // avatar & author
+  .topic-author-avatar-data {
+    grid-area: avatar;
+    margin: 0;
+  }
+  .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;
+    display: flex;
+    gap: 0.5em;
+    align-items: center;
+  }
+  .topic-author-data .topic-author {
+    color: var(--primary-500);
+  }
+
+  // status
+  .topic-status-card {
+    display: flex;
+    flex-direction: row;
+    gap: 4px;
+    align-items: center;
+    padding: 0 6px;
+    font-size: var(--font-down-2);
+    font-weight: 600;
+    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 {
+    --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;
+  }
+
+  .link-top-line .event-date {
+    font-size: var(--font-down-3);
+  }
+
+  td.main-link a.topic-status {
+    display: none;
+  }
+
+  td.main-link .link-top-line a.raw-topic-link {
+    padding: 0;
+  }
+
+  .topic-post-badges .badge-notification.unread-posts {
+    background-color: var(--tertiary);
+    color: var(--tertiary);
+    overflow: hidden;
+    height: 8px;
+    width: 8px;
+    padding: 0;
+    top: -2px;
+    min-width: unset;
+  }
+
+  // excerpt
+  .topic-excerpt {
+    grid-area: excerpt;
+    margin: 0;
+    font-size: var(--font-down-2);
+  }
+
+  // timestamp
+  td.activity .post-activity {
+    grid-area: activity;
+    font-size: var(--font-down-1);
+    color: var(--primary-500);
+    margin-left: auto;
+    padding: 0;
+  }
+
+  // metadata
+  // metadata - category
+  td.main-link .link-bottom-line {
+    display: none;
+  }
+
+  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-status-data .badge-category__wrapper {
+    grid-area: category;
+  }
+
+  td.topic-category-status-data .badge-category__wrapper {
+    overflow: unset;
+    border-radius: var(--d-border-radius);
+    padding: 6px;
+    align-self: flex-end;
+    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) {
+      padding: 2px 6px;
+    }
+
+    .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)
+      );
+    }
+  }
+  td.main-link .discourse-tags {
+    display: none;
+  }
+
+  // metadata - likes and replies
+  td.posts .badge-posts {
+    grid-area: replies;
+    align-self: center;
+    font-weight: normal;
+  }
+
+  td.topic-likes-replies-data {
+    grid-area: likes-replies;
+    display: flex;
+    flex-direction: row;
+    gap: 0.5em;
+    justify-content: flex-end;
+    height: min-content;
+    align-self: flex-end;
+    padding-bottom: 4px;
+  }
+  .topic-likes-replies-data .topic-likes,
+  .topic-likes-replies-data .topic-replies {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5em;
+    align-items: center;
+    color: var(--primary-500);
+    svg {
+      color: var(--primary-600);
+    }
   }
-  border: 1px solid #cedde3;
 }
 
-.more-topics__container
-  .more-topics__list
-  .topic-list-body
-  .topic-list-item:last-of-type {
-  border: 1px solid #cedde3;
-}
-
-@media screen and (max-width: 480px) {
-  .topic-list-body {
-    border-top: none;
-  }
-  .topic-list-item {
-    border-top: none;
-    border-left: none;
-    border-right: none;
-    border-radius: 0;
-  }
+.topic-list-header {
+  display: none;
 }

scss/topic.scss

@@ -1,24 +1,59 @@
-.topic-post.sticky-avatar > article > .row > .topic-avatar {
-  position: sticky;
-  top: calc(var(--header-offset) + 0.75em);
-  margin-bottom: 25px;
+.post-stream {
+  .contents {
+    font-size: var(--font-up-1);
+    line-height: 1.25;
+  }
 }
 
 .container.posts .topic-navigation {
-  top: calc(var(--header-offset, 60px) + 4em);
+  // super fragile because new sticky topic title doesnt have a calculated value (= 53px with this font and size but…)
+  top: calc(
+    var(--header-offset, 60px) + 53px + calc(var(--spacing-block-l) * 2)
+  );
+}
+
+.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);
+  }
 }
 
 #topic-title {
-  z-index: 999;
-  margin-bottom: 1em;
-  padding: 12px 24px;
+  z-index: z("composer", "content") - 1;
+  padding: var(--spacing-block-l) var(--spacing-inline-xl);
   position: sticky;
-  top: 0;
-  background-image: linear-gradient(
-    to right,
-    rgba(255, 255, 255, 1) 50%,
-    rgba(255, 255, 255, 0) 100%
-  );
+  margin-bottom: 0;
+  top: var(--header-offset);
+  background: var(--d-content-background);
+  border-radius: var(--d-border-radius-large);
 }
 
 .container.posts,
@@ -27,6 +62,19 @@
   padding: 0 24px;
 }
 
-.more-topics__lists.single-list {
-  padding: 12px 0;
+.more-topics__container
+  .more-topics__list
+  .topic-list-body
+  .topic-list-item:last-of-type {
+  border-bottom: 1px solid var(--primary-300);
+}
+
+.discourse-post-event .discourse-post-event-widget {
+  background: var(--d-content-background);
+}
+
+.more-topics__container .nav {
+  position: unset;
+  margin-block: unset;
+  margin-bottom: 1em;
 }

scss/user.scss

@@ -1,3 +0,0 @@
-.user-main .about.collapsed-info .details {
-  background-color: #ffffff;
-}

scss/variables.scss

@@ -1,8 +1,32 @@
 :root {
+  color-scheme: light dark;
   --d-border-radius-large: 20px;
-  --d-border-radius: 6px;
+  --d-border-radius: 8px;
   --d-input-border-radius: 6px;
-  --accent-color: #595bca;
-  --accent-text-color: #ffffff;
+  --accent-text-color: var(--secondary);
+  --d-content-background: var(--secondary);
   --d-nav-color--active: var(--accent-color);
+  --d-sidebar-background: var(--tertiary-50);
+  --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;
+  --spacing-block-s: 0.5em;
+  --spacing-block-sm: 0.75em;
+  --spacing-block-m: 1em;
+  --spacing-block-l: 1.5em;
+  --spacing-block-xl: 2em;
+  --spacing-block-xxl: 4em;
+  --spacing-inline-xs: 0.25em;
+  --spacing-inline-s: 0.5rem;
+  --spacing-inline-sm: 0.75rem;
+  --spacing-inline-m: 1rem;
+  --spacing-inline-l: 1.5rem;
+  --spacing-inline-xl: 2rem;
+  --spacing-inline-xxl: 4rem;
 }