feat(cursor): 添加多种自定义光标样式支持

- 将原有的 custom_cursor 重命名为 default_cursor，并实现默认光标功能
- 新增 hover_cursor 配置，为链接和按钮元素提供悬停光标效果
- 新增 pointer_cursor 配置，为链接元素提供专用指针光标
- 新增 text_cursor 配置，为输入框和文本域提供文本编辑光标
- 在 settings.yml 中添加对应的配置项和描述信息
- 实现多层级光标样式的 SCSS 逻辑处理

.discourse-compatibility

@@ -0,0 +1,2 @@
+< 3.5.0.beta5-dev: 31249c4f27d93e83c6b83d42d93974522a9a612e
+

Gemfile.lock

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

README.md

@@ -1,5 +1,151 @@
-# next-gen
+# discourse_theme_ran（Horizon 主题源码）
 
-**Theme Summary**
+> 该仓库是 Discourse `Horizon (beta)` 主题的源码副本。仓库内原 README 已标注该主题已并入 Discourse Core。
 
-For more information, please see: **url to meta topic**
+## 1. 项目作用
+
+这是一个 Discourse 主题项目，核心目标是：
+- 改造论坛整体视觉（卡片化主题列表、圆角、配色系统、侧边栏样式）
+- 增强交互（侧边栏新建主题按钮、颜色方案切换、Composer Peek 模式）
+- 调整不同页面体验（分类页、主题页、聊天页、登录页、移动端）
+- 提供系统测试，验证主题关键行为
+
+---
+
+## 2. 目录结构与作用
+
+### `.github/`
+- `workflows/discourse-theme.yml`：CI 配置，复用 Discourse 官方主题工作流。
+
+### `assets/`
+- `.gitkeep`：占位目录，预留静态资源（当前无实际资源文件）。
+
+### `common/`
+- `common.scss`：公共样式入口，按模块聚合 `scss/` 下样式。
+- `color_definitions.scss`：主题色变量定义（基于 tertiary 推导背景、链接、侧边栏等）。
+- `head_tag.html`：注入浏览器兼容检测脚本，不支持 `hsl(from ...)` 时提示升级浏览器。
+
+### `desktop/`
+- `desktop.scss`：桌面端样式入口。
+- `desktop-full-width.scss`：全宽布局与头部网格布局规则。
+- `desktop-horizon-fixes.scss`：桌面端修复（如 bulk select 样式/布局修正）。
+
+### `javascripts/`
+- `.gitkeep`：占位。
+- `discourse/api-initializers/`：通过 Discourse API 注入主题行为。
+  - `horizon.gjs`：主题主初始化器；注册实验装饰层、配色选择器、站点设置覆盖、管理员弃用提示。
+  - `sidebar-new-topic-button-connector.js`：把自定义“新建主题”按钮渲染到侧边栏。
+  - `composer-peek-toggle-connector.js`：把 Peek 模式切换按钮挂到 composer 工具区。
+  - `full-width-logo-behavior.js`：侧边栏展开时控制 Logo 最小化行为。
+  - `reposition-bulk-select.js`：将批量选择入口放到导航控制区。
+  - `hamburger-click-outside-transformer.js`：扩展汉堡菜单“点击外部关闭”例外元素。
+- `discourse/components/`：Glimmer 组件。
+  - `experimental-screen.gjs`：主内容四角/底部装饰层组件（根据容器位置实时计算）。
+  - `sidebar-new-topic-button.gjs`：侧边栏新建主题按钮逻辑（权限、分类只读、草稿、关闭汉堡菜单）。
+  - `composer-peek-mode-toggle.gjs`：Composer Peek 模式开关，偏好写入 `keyValueStore`。
+  - `user-color-palette-selector.gjs`：用户配色切换主组件（支持匿名/登录、明暗配套、CSS 热替换）。
+  - `user-color-palette-menu-item.gjs`：配色菜单项。
+- `discourse/components/card/`：主题列表卡片列组件。
+  - `topic-status-column.gjs`：Pinned/Hot 状态徽章。
+  - `topic-category-column.gjs`：分类列。
+  - `topic-creator-column.gjs`：主题创建者头像列。
+  - `topic-replies-column.gjs`：回复数列。
+  - `topic-likes-column.gjs`：点赞数列（当前主题列表布局中未启用展示）。
+  - `topic-activity-column.gjs`：最近活动信息（回复/创建/更新与时间）。
+- `discourse/initializers/topic-list-columns.gjs`：重排主题列表列、注入卡片列、改写点击行为与移动布局策略。
+
+### `locales/`
+- `en.yml`：主题文案与元数据（如 `topic_hot`、`topic_pinned`、描述文本）。
+
+### `scss/`
+按功能拆分的样式模块（由 `common/common.scss` 与 `desktop/desktop.scss` 聚合）：
+- `variables.scss`：全局尺寸/圆角/间距变量。
+- `main.scss`：页面主体容器网格与背景结构。
+- `topic-cards.scss`：主题列表卡片化布局核心样式。
+- `topic.scss`：主题阅读页、时间线、帖子流样式。
+- `categories-view.scss`：分类页与分类+最新混合页样式。
+- `sidebar.scss`：侧边栏容器/section/链接样式。
+- `sidebar-new-topic-button.scss`：侧边栏新建主题按钮视觉与状态。
+- `header.scss`：顶部栏、通知菜单、图标交互样式。
+- `nav-pills.scss`：列表导航区（sticky、tab/下拉）样式。
+- `buttons.scss`：按钮体系（默认/主按钮 hover、focus、active）。
+- `composer.scss`：编辑器外观与工具条、翻译 composer 相关样式。
+- `composer-peek-mode.scss`：Peek 模式下 composer 与主布局联动。
+- `chat.scss`：聊天页/聊天抽屉适配。
+- `welcome-banner.scss`：欢迎横幅和搜索区域样式。
+- `mobile-stuff.scss`：移动端/小屏布局调整。
+- `login.scss`：登录类页面布局样式。
+- `misc.scss`：分散组件兼容/补丁样式。
+- `hiddenstuff.scss`：隐藏部分原生 UI 元素。
+- `color-choice.scss`：配色切换菜单样式。
+- `color-exploration.scss`：侧边栏等颜色变量实验定义。
+- `box-view.scss`：实验装饰层（四角遮罩）与聊天相关视觉细节。
+- `desktop-full-width.scss`、`desktop-horizon-fixes.scss`：虽然在 `scss/` 目录下存在同名文件，实际桌面入口使用 `desktop/` 目录版本。
+
+### `screenshots/`
+- `light.png`、`dark.png`：主题明/暗模式截图，供主题元信息展示。
+
+### `spec/`
+系统测试（RSpec + Capybara）：
+- `system/core_features_spec.rb`：主题与核心能力兼容性基础测试。
+- `system/horizon_high_level_spec.rb`：高层端到端流程（主题列表、导航、配色切换）。
+- `system/sidebar_topic_button_spec.rb`：侧边栏新建主题按钮行为测试。
+- `system/composer_peek_spec.rb`：Peek 模式可见性与持久化测试。
+- `system/user_color_palette_selector_spec.rb`：配色切换在匿名/登录/深色模式下的行为测试。
+- `system/page_objects/components/user_color_palette_selector.rb`：配色选择器的 PageObject 封装。
+- `.gitkeep`：占位。
+
+### `test/`
+- `acceptance/.gitkeep`：预留前端测试目录（当前无具体测试文件）。
+
+---
+
+## 3. 根目录文件作用
+
+- `about.json`：主题元数据（名称、作者、链接、版本、颜色方案、截图、modifiers）。
+- `settings.yml`：主题设置项（欢迎横幅开关、搜索体验模式）。
+- `README.md`：项目说明文档（本文件）。
+- `LICENSE`：MIT 许可证。
+- `package.json`：前端开发依赖与 Node/pnpm 版本约束。
+- `pnpm-lock.yaml`：前端依赖锁定文件。
+- `Gemfile` / `Gemfile.lock`：Ruby 工具链依赖（rubocop-discourse、syntax_tree 等）。
+- `.discourse-compatibility`：与 Discourse 版本兼容映射。
+- `eslint.config.mjs`：ESLint 配置（继承 `@discourse/lint-configs`）。
+- `stylelint.config.mjs`：Stylelint 配置。
+- `.template-lintrc.cjs`：Ember Template Lint 配置。
+- `.prettierrc.cjs`：Prettier 配置。
+- `.rubocop.yml`：Rubocop 配置（Discourse 规则）。
+- `.streerc`：Syntax Tree 格式化配置。
+- `.npmrc`：npm 行为约束（严格引擎、禁自动 peer 安装）。
+- `.gitignore`：Git 忽略规则。
+
+---
+
+## 4. 关键功能对应关系（便于快速定位）
+
+- 主题配色切换：
+  - 逻辑：`javascripts/discourse/components/user-color-palette-selector.gjs`
+  - 菜单样式：`scss/color-choice.scss`
+  - 颜色定义：`about.json` + `common/color_definitions.scss`
+
+- 侧边栏新建主题按钮：
+  - 逻辑：`javascripts/discourse/components/sidebar-new-topic-button.gjs`
+  - 挂载：`javascripts/discourse/api-initializers/sidebar-new-topic-button-connector.js`
+  - 样式：`scss/sidebar-new-topic-button.scss`
+
+- 主题列表卡片化：
+  - 列注册：`javascripts/discourse/initializers/topic-list-columns.gjs`
+  - 各列组件：`javascripts/discourse/components/card/*.gjs`
+  - 主样式：`scss/topic-cards.scss`
+
+- Composer Peek 模式：
+  - 逻辑：`javascripts/discourse/components/composer-peek-mode-toggle.gjs`
+  - 挂载：`javascripts/discourse/api-initializers/composer-peek-toggle-connector.js`
+  - 样式：`scss/composer-peek-mode.scss`
+
+---
+
+## 5. 说明
+
+- 此仓库 README 原文已声明：该主题已并入 Discourse Core，生产环境优先使用 Core 内置 Horizon 主题。
+- 当前仓库更适合作为学习/二次开发参考，用于理解 Discourse 主题的样式组织方式与前端扩展点。

about.json

@@ -1,43 +1,135 @@
 {
-  "name": "Horizon Theme",
-  "authors": "Design Team",
-  "about_url": "TODO: Put your theme's public repo or Meta topic URL here",
-  "license_url": "TODO: Put your theme's LICENSE URL here",
-  "learn_more": "TODO",
+  "name": "Horizon-shiran",
+  "authors": "shiran",
+  "about_url": "",
+  "license_url": "https://gitea.s1f.ren/shiran/discourse_theme_ran/horizon/blob/main/LICENSE",
+  "learn_more": "",
   "theme_version": "0.0.1",
-  "minimum_discourse_version": null,
-  "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",
+      "tertiary-med-or-tertiary": "595bca",
+      "selected": "d7dfff",
+      "header_background": "ffffff",
+      "header_primary": "1A1A1A",
+      "hover": "E1E8FF"
     },
     "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",
+      "tertiary-med-or-tertiary": "595bca",
+      "selected": "3b3e56",
+      "header_background": "1A1A1A",
+      "header_primary": "ffffff",
+      "hover": "333548"
+    },
+    "Royal": {
+      "primary": "1A1A1A",
+      "secondary": "ffffff",
+      "tertiary": "1F7BC1",
+      "tertiary-med-or-tertiary": "1F7BC1",
+      "selected": "c7e3ff",
+      "header_background": "ffffff",
+      "header_primary": "1A1A1A",
+      "hover": "D6EBFF"
+    },
+    "Royal Dark": {
+      "primary": "ffffff",
+      "secondary": "1A1A1A",
+      "tertiary": "1F7BC1",
+      "tertiary-med-or-tertiary": "1F7BC1",
+      "selected": "3a455f",
+      "header_background": "1A1A1A",
+      "header_primary": "ffffff",
+      "hover": "323B4E"
+    },
+    "Clover": {
+      "primary": "1A1A1A",
+      "secondary": "ffffff",
+      "tertiary": "39845B",
+      "tertiary-med-or-tertiary": "39845B",
+      "selected": "c6f1d5",
+      "header_background": "ffffff",
+      "header_primary": "1A1A1A",
+      "hover": "D5F5E0"
+    },
+    "Clover Dark": {
+      "primary": "ffffff",
+      "secondary": "1A1A1A",
+      "tertiary": "39845B",
+      "tertiary-med-or-tertiary": "39845B",
+      "selected": "47594e",
+      "header_background": "1A1A1A",
+      "header_primary": "ffffff",
+      "hover": "3C4A40"
+    },
+    "Lily": {
+      "primary": "1A1A1A",
+      "secondary": "ffffff",
+      "tertiary": "cc338c",
+      "tertiary-med-or-tertiary": "cc338c",
+      "selected": "ffc8ee",
+      "header_background": "ffffff",
+      "header_primary": "1A1A1A",
+      "hover": "FFD7F3"
+    },
+    "Lily Dark": {
+      "primary": "ffffff",
+      "secondary": "1A1A1A",
+      "tertiary": "cc338c",
+      "tertiary-med-or-tertiary": "cc338c",
+      "selected": "5f3e4e",
+      "header_background": "1A1A1A",
+      "header_primary": "ffffff",
+      "hover": "4E3640"
+    },
+    "Violet": {
+      "primary": "1A1A1A",
+      "secondary": "ffffff",
+      "tertiary": "9b15de",
+      "tertiary-med-or-tertiary": "9b15de",
+      "selected": "feccff",
+      "header_background": "ffffff",
+      "header_primary": "1A1A1A",
+      "hover": "FFD9FF"
+    },
+    "Violet Dark": {
+      "primary": "ffffff",
+      "secondary": "1A1A1A",
+      "tertiary": "9b15de",
+      "tertiary-med-or-tertiary": "9b15de",
+      "selected": "4c385c",
+      "header_background": "1A1A1A",
+      "header_primary": "ffffff",
+      "hover": "40314C"
+    },
+    "Marigold": {
+      "primary": "1A1A1A",
+      "secondary": "ffffff",
+      "tertiary": "d3881f",
+      "tertiary-med-or-tertiary": "d3881f",
+      "selected": "ffdcb2",
+      "header_background": "ffffff",
+      "header_primary": "1A1A1A",
+      "hover": "FFE6C6"
+    },
+    "Marigold Dark": {
+      "primary": "ffffff",
+      "secondary": "1A1A1A",
+      "tertiary": "d3881f",
+      "tertiary-med-or-tertiary": "d3881f",
+      "selected": "6c5b49",
+      "header_background": "1A1A1A",
+      "header_primary": "ffffff",
+      "hover": "584B3E"
     }
-  }
+  },
+  "screenshots": ["screenshots/light.png", "screenshots/dark.png"]
 }

common/color_definitions.scss

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

common/common.scss

@@ -1,14 +1,21 @@
+@import "box-view";
 @import "buttons";
+@import "chat";
+@import "categories-view";
+@import "color-choice";
+@import "composer";
+@import "composer-peek-mode";
 @import "header";
 @import "hiddenstuff";
+@import "login";
 @import "main";
+@import "misc";
+@import "mobile-stuff";
 @import "nav-pills";
-@import "search-banner";
+@import "welcome-banner";
 @import "sidebar";
+@import "sidebar-new-topic-button";
 @import "topic";
 @import "topic-cards";
 @import "variables";
-@import "box-view";
-@import "chat";
-@import "misc";
-@import "mobile-stuff";
+@import "self";

common/head_tag.html

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

desktop/desktop.scss

@@ -0,0 +1,2 @@
+@import "desktop-horizon-fixes";
+@import "desktop-full-width";

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

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

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

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

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

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

javascripts/discourse/api-initializers/horizon.gjs

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

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

@@ -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);
-});

javascripts/discourse/api-initializers/reposition-bulk-select.js

@@ -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;
+  });
+});

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

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

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

@@ -0,0 +1,49 @@
+import Component from "@glimmer/component";
+import concatClass from "discourse/helpers/concat-class";
+import formatDate from "discourse/helpers/format-date";
+
+export default class TopicActivityColumn extends Component {
+  get topicUser() {
+    if (
+      moment(this.args.topic.bumped_at).isAfter(this.args.topic.last_posted_at)
+    ) {
+      return {
+        user: undefined,
+        username: undefined,
+        activityText: "user_updated",
+        class: "--updated",
+      };
+    }
+
+    if (this.args.topic.posts_count > 1) {
+      return {
+        user: this.args.topic.lastPosterUser,
+        username: this.args.topic.last_poster_username,
+        activityText: "user_replied",
+        class: "--replied",
+      };
+    } else if (this.args.topic.posts_count === 1) {
+      return {
+        user: this.args.topic.firstPosterUser,
+        username: this.args.topic.last_poster_username,
+        class: "--created",
+      };
+    } else {
+      return;
+    }
+  }
+
+  <template>
+    <span class={{concatClass "topic-activity" this.topicUser.class}}>
+      {{#if this.topicUser.username}}
+        <span
+          class="topic-activity__username"
+        >{{this.topicUser.username}}</span>
+        <span class="dot-separator"></span>
+      {{/if}}
+      <div class="topic-activity__time">
+        {{formatDate @topic.bumpedAt leaveAgo="true" format="tiny"}}
+      </div>
+    </span>
+  </template>
+}

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

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

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

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

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

@@ -0,0 +1,17 @@
+import Component from "@glimmer/component";
+import avatar from "discourse/helpers/avatar";
+
+export default class TopicCreatorColumn extends Component {
+  get topicCreator() {
+    return {
+      user: this.args.topic.creator,
+      class: "--topic-creator",
+    };
+  }
+
+  <template>
+    <div class={{this.topicCreator.class}}>
+      {{avatar this.topicCreator.user}}
+    </div>
+  </template>
+}

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

@@ -1,8 +1,12 @@
+import { gt } from "truth-helpers";
 import icon from "discourse/helpers/d-icon";
+import number from "discourse/helpers/number";
 
 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"}}{{number
+        @topic.posts_count
+      }}</span>
   {{/if}}
 </template>;
 

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

@@ -1,115 +1,38 @@
 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
+        }}<p class="topic-status-card__name">{{i18n
+            (themePrefix this.badge.text)
+          }}</p></span>
     {{/if}}
   </template>
 }

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

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

javascripts/discourse/components/experimental-screen.gjs

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

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

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

javascripts/discourse/components/user-color-palette-menu-item.gjs

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

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

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

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

@@ -1,64 +1,76 @@
 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 TopicCreatorColumn from "../components/card/topic-creator-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 TopicLikesReplies = <template>
+const TopicCategory = <template>
+  <td class="topic-category-data">
+    <TopicCategoryColumn @topic={{@topic}} />
+  </td>
+</template>;
+
+const TopicReplies = <template>
   <td class="topic-likes-replies-data">
-    <TopicLikesColumn @topic={{@topic}} />
     <TopicRepliesColumn @topic={{@topic}} />
   </td>
 </template>;
 
+const TopicCreator = <template>
+  <td class="topic-creator-data">
+    <TopicCreatorColumn @topic={{@topic}} />
+  </td>
+</template>;
+
 export default {
   name: "topic-list-customizations",
 
-  initialize() {
+  initialize(container) {
+    const router = container.lookup("service:router");
     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,
+          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,
+            item: TopicReplies,
+            after: "topic-author-avatar",
+          });
+          columns.add("topic-creator", {
+            item: TopicCreator,
             after: "topic-author-avatar",
           });
-          columns.delete("posters");
           columns.delete("views");
           columns.delete("replies");
+          if (!router.currentRouteName.includes("userPrivateMessages")) {
+            columns.add("topic-activity", {
+              item: TopicActivity,
+              after: "title",
+            });
+            columns.delete("posters");
+            columns.delete("activity");
+          }
           return columns;
         }
       );
@@ -66,8 +78,15 @@ 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");
+          }
+          if (context.topic.replyCount > 1) {
+            classes.push("has-replies");
           }
           return classes;
         }
@@ -76,6 +95,34 @@ export default {
       api.registerValueTransformer("topic-list-item-mobile-layout", () => {
         return false;
       });
+
+      api.registerBehaviorTransformer(
+        "topic-list-item-click",
+        ({ context: { event }, next }) => {
+          if (event.target.closest("a, button, input")) {
+            return next();
+          }
+
+          event.preventDefault();
+          event.stopPropagation();
+
+          const topicLink = event.target
+            .closest("tr")
+            .querySelector("a.raw-topic-link");
+
+          // Redespatch the click on the topic link, so that all key-handing is sorted
+          topicLink.dispatchEvent(
+            new MouseEvent("click", {
+              ctrlKey: event.ctrlKey,
+              metaKey: event.metaKey,
+              shiftKey: event.shiftKey,
+              button: event.button,
+              bubbles: true,
+              cancelable: true,
+            })
+          );
+        }
+      );
     });
   },
 };

locales/en.yml

@@ -1,12 +1,8 @@
 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: "自制二次元的半透明主题"
   topic_pinned: "Pinned"
-  topic_unpinned: "Unpinned"
   topic_hot: "Hot"
+  user_replied: "replied"
+  user_posted: "posted"
+  user_updated: "updated"

mobile/mobile.scss

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

package.json

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

scss/box-view.scss

@@ -1,4 +1,6 @@
-@media screen and (min-width: 1300px) {
+@use "lib/viewport";
+
+@media screen and (width >= 1300px) {
   #main-outlet {
     border-top-right-radius: var(--d-border-radius-large);
     border-top-left-radius: var(--d-border-radius-large);
@@ -17,32 +19,48 @@
   }
 }
 
-.has-full-page-chat .experimental-screen {
-  display: none;
+.has-full-page-chat .chat-replying-indicator-container {
+  margin-bottom: var(--main-grid-gap);
+
+  @include viewport.until(lg) {
+    margin-bottom: 0;
+  }
+}
+
+.has-full-page-chat .chat-selection-management {
+  margin-bottom: var(--main-grid-gap);
+
+  @include viewport.until(lg) {
+    margin-bottom: 0;
+  }
 }
 
 .experimental-screen {
-  @include breakpoint(medium) {
-    display: none;
-  }
   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;
+
+  @include viewport.until(lg) {
+    display: none;
+  }
+
+  @media screen and (width <= 488px) {
+    display: none;
+  }
+
+  @include viewport.until(md) {
+    display: none;
+  }
+
   li {
     list-style: none;
     margin: 0;
     padding: 0;
   }
+
   &__top-left,
   &__top-right,
   &__bottom-left,
@@ -52,38 +70,45 @@
     height: var(--d-border-radius-large);
     background-color: var(--background-color);
     z-index: 399;
-    -webkit-mask: radial-gradient(
+    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);
+    bottom: var(--main-grid-gap);
     left: var(--left-distance);
-    @media screen and (max-width: 768px) {
+
+    @media screen and (width <= 768px) {
       bottom: calc(var(--d-border-radius-large) * 2);
     }
   }
+
   &__bottom-right {
     transform: rotate(180deg);
-    bottom: var(--d-border-radius-large);
+    bottom: var(--main-grid-gap);
     left: calc(var(--right-distance) - var(--d-border-radius-large));
-    @media screen and (max-width: 768px) {
+
+    @media screen and (width <= 768px) {
       bottom: calc(var(--d-border-radius-large) * 2);
     }
   }
+
   &__bottom-bar {
     position: fixed;
     width: 100%;
@@ -91,17 +116,49 @@
     background-color: var(--background-color);
     bottom: 0;
     left: var(--left-distance);
-    height: var(--d-border-radius-large);
-    @media screen and (max-width: 768px) {
+    height: var(--main-grid-gap);
+
+    @media screen and (width <= 768px) {
       height: calc(var(--d-border-radius-large) * 2);
     }
+
     @container content-width (width > 1px) {
       width: 100cqw;
     }
   }
 }
 
-@media screen and (min-width: 768px) {
+.rtl .experimental-screen {
+  &__top-left {
+    right: var(--left-distance);
+    left: unset;
+  }
+
+  &__top-right {
+    transform: rotate(-90deg) !important;
+    right: calc(var(--right-distance) - var(--d-border-radius-large));
+    left: unset;
+  }
+
+  &__bottom-left {
+    transform: rotate(90deg);
+    right: var(--left-distance);
+    left: unset;
+  }
+
+  &__bottom-right {
+    transform: rotate(180deg);
+    left: unset;
+    right: calc(var(--right-distance) - var(--d-border-radius-large));
+  }
+
+  &__bottom-bar {
+    right: var(--left-distance);
+    left: unset;
+  }
+}
+
+@media screen and (width >= 768px) {
   .with-topic-progress {
     bottom: calc(
       env(safe-area-inset-bottom) + var(--composer-height, 0px) +
@@ -110,7 +167,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media screen and (width <= 768px) {
   .with-topic-progress {
     bottom: calc(
       env(safe-area-inset-bottom) + var(--composer-height, 0px) +
@@ -119,7 +176,7 @@
   }
 }
 
-@media screen and (max-width: 400px) {
+@media screen and (width <= 400px) {
   .with-topic-progress {
     bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
   }

scss/buttons.scss

@@ -6,148 +6,105 @@
   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);
-      }
-    }
-  }
-  &:focus-visible {
-    .discourse-no-touch & {
-      background: var(--secondary);
+    border-color: transparent;
+    box-shadow: 0 0 8px 1px var(--button-box-shadow);
+    background: var(--d-content-background);
+    color: var(--accent-color);
+
+    .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);
-      }
+    }
+  }
+
+  &:focus-visible {
+    background: var(--d-content-background);
+    color: var(--accent-color);
+    box-shadow: 0 0 0 3px var(--button-box-shadow);
+
+    .d-icon {
+      color: var(--accent-color);
+    }
+  }
+
+  &:active:not(:hover, :focus) {
+    color: var(--primary);
+    background: var(--tertiary-300);
+    background-image: none;
+
+    .d-icon {
+      color: var(--tertiary-high);
     }
   }
 }
+
 .btn-primary,
-#create-topic.btn {
+#create-topic.btn,
+.discourse-no-touch .btn-default.ai-new-question-button {
   background-color: var(--accent-color);
   color: var(--accent-text-color);
+
   .d-icon {
     color: var(--accent-text-color);
   }
+
   &:hover {
     .discourse-no-touch & {
-      background: 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 var(--button-box-shadow);
+      background: light-dark(
+        oklch(from var(--accent-color) 40% c h),
+        oklch(from var(--accent-color) 50% c h)
+      );
+      box-shadow: 0 0 6px 1px var(--button-box-shadow);
+      color: var(--accent-text-color);
+
+      .d-icon {
+        color: var(--accent-text-color);
+      }
     }
   }
+
   &:focus-visible {
     .discourse-no-touch & {
-      background: 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: light-dark(
+        oklch(from var(--accent-color) 40% c h),
+        oklch(from var(--accent-color) 50% c h)
+      );
+      box-shadow: 0 0 0 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: light-dark(
+      oklch(from var(--accent-color) 40% c h),
+      oklch(from var(--accent-color) 50% c h)
+    );
   }
 }
-
-.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/categories-view.scss

@@ -0,0 +1,363 @@
+@use "lib/viewport";
+
+.categories-and-latest {
+  .category-list {
+    border-collapse: separate;
+
+    th.topics,
+    .category-logo {
+      display: none;
+    }
+
+    thead tr th {
+      font-size: var(--font-up-1-rem);
+      font-weight: bold;
+    }
+
+    tbody {
+      display: flex;
+      flex-direction: column;
+      gap: 1em;
+      padding-top: 1em;
+      border: 0;
+    }
+
+    tbody tr {
+      display: grid;
+      grid-template-areas:
+        "title topics"
+        "category category"
+        "subcategory subcategory";
+      row-gap: 1em;
+      border: 1px solid var(--primary-300);
+      border-radius: var(--d-border-radius-large);
+      box-shadow: 0 0 12px 1px var(--topic-card-shadow);
+    }
+
+    td.category {
+      display: contents;
+      border-top-left-radius: var(--d-border-radius-large);
+      border-bottom-left-radius: var(--d-border-radius-large);
+      border-width: 2px;
+      padding: 1em 1.5rem;
+    }
+
+    tbody h3 {
+      grid-area: title;
+      padding: 1em 0 0 1.5rem;
+      font-size: var(--font-up-1-rem);
+
+      .category-name {
+        display: flex;
+        align-self: center;
+      }
+
+      .badge-category {
+        gap: 0.25em;
+        align-items: center;
+        font-size: var(--font-up-1-rem);
+
+        .d-icon:first-of-type:not(.d-icon-lock),
+        &.--style-square::before,
+        &.--style-emoji .emoji {
+          width: 1.25em;
+          height: 1.25em;
+          margin-right: 0.25em;
+        }
+
+        &.--style-square::before {
+          border-radius: 6px;
+        }
+      }
+
+      .d-icon.d-icon-lock {
+        order: 1;
+      }
+    }
+
+    .topics {
+      width: auto;
+      padding: 1em 1.5rem 0 0;
+      display: flex;
+      align-items: center;
+      justify-content: end;
+    }
+
+    .category-description {
+      grid-area: category;
+      padding: 0 1.5rem;
+      margin: 0;
+      font-size: var(--font-down-1-rem);
+    }
+
+    .subcategories {
+      grid-area: subcategory;
+      gap: 0.25em 0.5em;
+      padding: 0 1.5rem 1em;
+      margin: 0;
+
+      .badge-category__wrapper {
+        background-color: light-dark(
+          oklch(from var(--category-badge-color) 98% calc(c * 0.2) h),
+          oklch(from var(--category-badge-color) 45% calc(c * 0.5) h)
+        );
+        padding: 0.25em 0.5rem;
+        border-radius: var(--d-border-radius);
+      }
+
+      .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.--style-square::before {
+        border-radius: 3px;
+      }
+    }
+  }
+
+  .latest-topic-list {
+    .table-heading {
+      border: 0;
+      font-size: var(--font-up-1-rem);
+      font-weight: bold;
+    }
+
+    &-item {
+      display: grid;
+      grid-template-columns: min-content min-content auto min-content;
+      grid-template-areas:
+        "creator title title status"
+        ". category activity activity";
+      grid-column-gap: 0.75rem;
+      grid-row-gap: 0.5rem;
+      background: var(--d-content-background);
+      box-shadow: 0 0 12px 1px var(--topic-card-shadow);
+      text-overflow: ellipsis;
+      padding: 0.75em 1rem;
+      border: 1px solid var(--primary-300);
+      border-radius: var(--d-border-radius-large);
+      margin-top: 1em;
+    }
+
+    .main-link,
+    .topic-stats {
+      display: contents;
+    }
+
+    .top-row {
+      grid-area: title;
+    }
+
+    .bottom-row {
+      grid-area: category;
+
+      .discourse-tags {
+        display: none;
+      }
+    }
+
+    .badge-category__wrapper {
+      border-radius: var(--d-border-radius);
+      padding: 0.25em 0.5rem;
+      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)
+      );
+
+      @include viewport.until(md) {
+        padding: 0.25em 0.5rem;
+        font-size: var(--font-down-2);
+      }
+
+      .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)
+        );
+      }
+    }
+
+    .topic-list-data {
+      grid-area: likes-replies;
+    }
+
+    .num.posts-map {
+      display: none;
+    }
+
+    .topic-last-activity {
+      grid-area: activity;
+      display: flex;
+      align-items: center;
+      text-align: left;
+      font-size: var(--font-down-1-rem);
+
+      &::before {
+        content: "";
+        display: inline-block;
+        width: 0.25em;
+        height: 0.25em;
+        background-color: var(--primary-500);
+        border-radius: 100%;
+        margin-right: 0.5em;
+      }
+    }
+
+    .topic-poster {
+      grid-area: creator;
+      width: auto;
+      align-self: flex-start;
+
+      .avatar {
+        height: 24px;
+        width: 24px;
+        border-radius: var(--d-border-radius-small);
+      }
+    }
+  }
+}
+
+@include viewport.until(sm) {
+  .category-list.with-topics {
+    margin-inline: 1rem;
+
+    .num.posts,
+    .category-topics-count,
+    .category-logo {
+      display: none;
+    }
+
+    .category-list {
+      &-item {
+        padding-top: 0;
+        padding-bottom: 0;
+        border-top: 0 !important;
+        border-bottom: 0 !important;
+      }
+    }
+
+    tbody {
+      display: flex;
+      flex-direction: column;
+
+      tr:first-of-type {
+        order: -2;
+      }
+
+      tr.subcategories-list {
+        order: -1;
+      }
+
+      tr:nth-last-of-type(2) {
+        border-bottom: 0;
+      }
+    }
+
+    th.main-link {
+      padding-top: 0;
+    }
+  }
+}
+
+.category-boxes.with-subcategories {
+  .category-logo {
+    display: none;
+  }
+
+  @include viewport.from(sm) {
+    margin-top: 0;
+  }
+
+  @include viewport.until(md) {
+    padding-inline: 1rem;
+    box-sizing: border-box;
+  }
+
+  .category {
+    border: 0;
+
+    &-box-inner {
+      border-radius: var(--d-border-radius-large);
+      border: 1px solid var(--primary-300);
+      background: var(--d-content-background);
+      box-shadow: 0 0 12px 1px var(--topic-card-shadow);
+
+      &:hover {
+        .discourse-no-touch & {
+          border-color: var(--accent-color);
+          background: var(--d-content-background);
+        }
+      }
+
+      &.selected {
+        box-shadow:
+          0 0 0 2px var(--accent-color),
+          0 0 12px 1px var(--topic-card-shadow);
+      }
+    }
+
+    &-details {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      height: 100%;
+    }
+
+    &-box-heading {
+      h3 {
+        text-align: left;
+      }
+
+      .badge-category {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: 1em;
+        justify-content: space-between;
+        width: 100%;
+
+        &__wrapper {
+          display: flex;
+        }
+
+        &.--style-square::before {
+          aspect-ratio: 1 / 1;
+          height: auto;
+          width: 13%;
+          border-radius: var(--d-border-radius);
+        }
+
+        &__name {
+          flex-basis: 100%;
+          font-size: var(--font-up-1-rem);
+        }
+
+        .d-icon:not(.d-icon-lock),
+        img.emoji {
+          aspect-ratio: 1 / 1;
+          height: auto;
+          width: 13%;
+        }
+      }
+    }
+
+    .description {
+      text-align: left;
+      margin: 0;
+      font-size: var(--font-down-1-rem);
+    }
+
+    .subcategories {
+      margin-top: auto;
+      row-gap: 0.5em;
+
+      .subcategory {
+        margin-bottom: 0;
+        font-size: var(--font-down-1);
+      }
+    }
+  }
+}

scss/chat.scss

@@ -1,13 +1,13 @@
+@use "lib/viewport";
+
 .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;
+  .full-page-chat & {
+    padding: 0 1.5em;
+  }
   background-color: var(--d-content-background);
 }
 
@@ -15,16 +15,45 @@ 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: 0 0 0 2px var(--tertiary-medium);
+  }
+
+  .chat-drawer.is-expanded & {
+    border: none;
+  }
+
+  .c-navbar__title {
+    padding-left: 0.33em; // visual alignment for chat index, which does not havea a backarrow
+  }
+}
+
+.chat-drawer-outlet-container {
+  z-index: z("composer", "content");
+
+  .peek-mode-active & {
+    padding-bottom: 0;
+    left: unset;
+    right: var(--main-grid-gap);
+
+    &:has(.is-expanded) {
+      z-index: calc(z("composer", "dropdown") + 1);
+    }
+  }
+}
+
+.chat-drawer {
+  .peek-mode-active & {
+    max-width: 90vw;
+  }
 }
 
 .chat-drawer .channels-list-container .chat-channel-row {
   margin-bottom: var(--spacing-block-xs);
   font-size: var(--font-up-1);
-  border-radius: var(--d-border-radius);
   border-bottom: none;
+
   &:hover {
     background-color: var(--d-sidebar-active-background);
   }
@@ -35,3 +64,25 @@ 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("modal", "dialog");
+}
+
+.chat-replying-indicator-container {
+  @include viewport.from(sm) {
+    margin-left: calc(0.65em + 0.2rem);
+  }
+}

scss/color-choice.scss

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

scss/color-exploration.scss

@@ -0,0 +1,26 @@
+:root {
+  --d-sidebar-highlight-hover-icon: var(--d-sidebar-link-color);
+  --d-sidebar-highlight-hover-background: var(--d-selected);
+  --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-active-suffix-color: var(--d-sidebar-suffix-color);
+  --d-sidebar-background: var(--background-color);
+  --d-sidebar-footer-fade: rgb(var(--tertiary-50-rgb), 1);
+  --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-hover: oklch(from var(--d-selected) l c h / 0.75);
+  --d-input-bg-color: var(--d-content-background);
+  --d-sidebar-active-color: var(--primary) !important;
+}

scss/composer-peek-mode.scss

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

scss/composer.scss

@@ -0,0 +1,121 @@
+@use "lib/viewport";
+
+#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 viewport.from(sm) {
+    background: var(--d-content-background);
+    border-top-right-radius: var(--d-border-radius);
+    border-top-left-radius: var(--d-border-radius);
+
+    .grippie {
+      background: var(--tertiary-low);
+      border-top-right-radius: var(--d-border-radius);
+      border-top-left-radius: var(--d-border-radius);
+    }
+
+    .user-selector,
+    .title-and-category {
+      padding: 0 var(--spacing-inline-m);
+      width: calc(100% - var(--spacing-inline-m) * 2);
+    }
+
+    .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);
+  }
+}
+
+.discourse-no-touch .translation-selector-dropdown {
+  .select-kit-header.btn-default {
+    background: var(--background-color);
+  }
+}
+
+#reply-control.composer-action-add_translation {
+  .d-editor-preview .d-editor-translation-preview-wrapper {
+    border-color: var(--d-sidebar-border-color);
+  }
+
+  .d-editor-preview .d-editor-translation-preview-wrapper__header {
+    top: 6.5rem;
+    padding: 0.25rem 0.75rem;
+    background: var(--background-color);
+    color: var(--accent-color);
+    border-radius: var(--d-border-radius-large);
+  }
+
+  .topic-title-translator input {
+    width: 47.25vw;
+  }
+}

scss/desktop-full-width.scss

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

scss/desktop-horizon-fixes.scss

@@ -0,0 +1,83 @@
+// Fixing bulk select (only needed for desktop)
+.bulk-select-enabled {
+  .topic-list-header {
+    position: relative;
+    top: 0;
+    z-index: 2;
+  }
+
+  .topic-author-avatar-data {
+    display: none;
+  }
+
+  .bulk-select.topic-list-data {
+    grid-area: bulk-select;
+    margin-left: -0.5em;
+
+    @media screen and (width <= 576px) {
+      margin-top: 0;
+
+      label {
+        padding-block: 0.345em;
+      }
+    }
+
+    input {
+      transform: scale(1.5);
+    }
+  }
+}
+
+.topic-list-header {
+  position: relative;
+  margin-bottom: 0.35rem;
+
+  tr {
+    border: none;
+  }
+
+  .topic-list-data {
+    padding: 0.25rem 0;
+    color: var(--primary-600);
+    font-size: var(--font-down-2);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    background: transparent;
+
+    &:not(.default) {
+      display: none;
+    }
+
+    &.default {
+      border-radius: var(--d-border-radius);
+
+      .bulk-select,
+      span:not(.bulk-select-topics, .d-button-label) {
+        display: none;
+      }
+    }
+  }
+
+  // bulk select
+  .bulk-select-topics {
+    position: absolute;
+    right: 0.25rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: color-mix(in srgb, var(--d-content-background) 88%, white 12%);
+    border: 1px solid var(--primary-200);
+    border-radius: 999px;
+    box-shadow: 0 6px 18px -12px rgb(10 18 35 / 35%);
+    display: flex;
+    gap: 0.5rem;
+    margin: 0;
+    padding: 0.25rem;
+
+    button {
+      white-space: nowrap;
+      margin: 0;
+      border-radius: 999px;
+    }
+  }
+}

scss/header.scss

@@ -1,13 +1,12 @@
+@use "lib/viewport";
+
 .d-header {
   box-shadow: none;
   background: var(--background-color);
-  @include breakpoint(extra-large, $rule: min-width) {
-    padding-bottom: 1.5em;
-  }
-}
 
-.has-full-page-chat .d-header {
-  background-color: transparent;
+  @include viewport.from(xl) {
+    padding-bottom: var(--main-grid-gap);
+  }
 }
 
 .user-menu .quick-access-panel,
@@ -30,3 +29,62 @@
 .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,
+.discourse-no-touch .header-sidebar-toggle button:hover .d-icon {
+  color: var(--header_primary-medium);
+}
+
+.discourse-no-touch .interface-color-selector-content {
+  border: none;
+  border-radius: var(--d-border-radius);
+
+  .btn {
+    border: none;
+
+    &:hover {
+      box-shadow: none;
+    }
+  }
+}
+
+.drop-down-mode .d-header-icons .active .icon,
+.drop-down-mode .d-header-icons .header-color-scheme-toggle .-expanded {
+  border-color: transparent;
+  background-color: transparent;
+}
+
+.badge-notification {
+  color: var(--accent-text-color);
+}
+
+body.login-page,
+body.signup-page,
+body.invite-page,
+body.password-reset-page,
+body.activate-account-page {
+  .d-header {
+    background: var(--background-color);
+  }
+}
+
+.header-dropdown-toggle.chat-header-icon .icon .chat-channel-unread-indicator {
+  border-color: var(--background-color);
+}
+
+.d-header-icons .badge-notification {
+  border-color: var(--background-color);
+}

scss/hiddenstuff.scss

@@ -1,10 +1,7 @@
 .sidebar__panel-switch-button,
-.sidebar-section[data-section-name="messages"],
 .list-controls #create-topic,
 .notifications-button-footer .reason .text,
 .pinned-button .reason .text,
-.more-topics__browse-more,
-//footer-message might cause issues, not sure what possible stuff can be in there, but the general idea is to hide it bcs having an ugly H3 (what?) CTA at the bottom is just… ugly imo
-.footer-message {
+.more-topics__browse-more {
   display: none;
 }

scss/login.scss

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

scss/main.scss

@@ -1,11 +1,23 @@
-html:not(:has(.has-full-page-chat)) {
-  // @include breakpoint(extra-large, $rule: min-width) {
-  background-color: var(--background-color);
-  // }
-}
+@use "lib/viewport";
 
 :root {
-  --main-grid-gap: 2em;
+  --main-grid-gap: 0.5em;
+}
+
+html:not(:has(.has-full-page-chat)) {
+  background-color: var(--background-color);
+
+  @include viewport.until(sm) {
+    background-color: var(--d-content-background);
+  }
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+
+  @include viewport.until(sm) {
+    background-color: var(--d-content-background);
+  }
 }
 
 #main-outlet-wrapper {
@@ -14,94 +26,99 @@ html:not(:has(.has-full-page-chat)) {
 
 body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
   grid-column-gap: var(--main-grid-gap);
+  background-color: var(--background-color);
 }
 
 body.has-full-page-chat:not(.has-sidebar-page) {
   .d-header {
     background-color: var(--background-color);
   }
+
   #main-outlet-wrapper {
-    --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 viewport.until(lg) {
+      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) 0;
+
   #main-outlet {
     max-width: unset;
   }
 }
 
-body:not(.has-full-page-chat) {
-  @include breakpoint(extra-large, $rule: min-width) {
-    background-color: var(--background-color);
+body:not(.has-sidebar-page) #main-outlet-wrapper {
+  @include viewport.from(lg) {
+    grid-template-columns: 0 minmax(0, 1fr) 0;
   }
-  #main-outlet-wrapper {
-    @include breakpoint(medium) {
-      --main-grid-gap: 0;
-    }
-    @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;
-      // }
-      //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,
-      .topic-above-footer-buttons-outlet .presence-users,
-      .global-notice {
-        max-width: 1000px;
-        margin-inline: auto;
-        padding-inline: 1.5em;
-      }
-      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 {
+body:not(.has-full-page-chat, .wizard) {
+  @include viewport.from(xl) {
+    background-color: var(--background-color);
+  }
+
+  #main-outlet-wrapper {
+    @include viewport.until(lg) {
+      --main-grid-gap: 0;
+    }
+
+    @media screen and (width >= 768px) {
+      gap: var(--main-grid-gap);
+    }
+
+    #main-outlet {
+      width: 100%;
+      max-width: unset;
+      padding-bottom: var(--spacing-block-l);
+      border-radius: var(--d-border-radius-large);
+      background-color: var(--d-content-background);
+
+      @include viewport.until(lg) {
+        border-radius: 0;
+      }
+
+      html.composer-open & {
+        padding-bottom: var(--composer-height);
+      }
+
+      > *:not(.experimental-screen, .activate-account) {
+        @include viewport.from(lg) {
+          box-sizing: border-box;
+          max-width: 1000px;
+          margin-inline: auto;
+          padding-inline: var(--spacing-inline-l);
+        }
+      }
+    }
+  }
+}
+
+@include viewport.until(sm) {
+  .welcome-banner {
+    display: none;
+  }
+}
+
+#list-area {
+  .show-more.has-topics {
+    @include viewport.from(lg) {
+      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 +129,16 @@ 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);
 }
+
+.no-ember {
+  #main-outlet {
+    border-radius: var(--d-border-radius-large);
+    margin: 0 var(--main-grid-gap) var(--main-grid-gap) var(--main-grid-gap);
+    padding: 2em;
+    max-height: calc(100vh - 50px - 1em - var(--main-grid-gap));
+  }
+}

scss/misc.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 .user-main .about.collapsed-info .details {
   background: var(--d-content-background);
 }
@@ -8,7 +10,7 @@
 }
 
 .powered-by-discourse {
-  z-index: 9999;
+  z-index: 400;
 }
 
 .boxed.white {
@@ -40,11 +42,100 @@
   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);
+}
+
+@include viewport.until(sm) {
+  // pinned topic excerpts are hidden on small screens too
+  .fk-d-menu__trigger.topic-list-layout-trigger {
+    display: none;
+  }
+}
+
+.search-container .search-header,
+.search-container .search-bar,
+.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: 0;
+  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;
+}
+
+.group-details-container {
+  border-radius: var(--d-border-radius);
+}
+
+.period-chooser-header {
+  border-radius: 0;
+}
+
+// compatibility with the top contributors sidebar theme component
+// https://meta.discourse.org/t/top-contributors-sidebar/215110
+.list-container
+  #list-area
+  > .contents
+  > .topic-list:has(.discourse-top-contributors) {
+  grid-template-areas: "head head" "body sidebar";
+  grid-template-rows: auto 1fr;
+
+  @include viewport.until(lg) {
+    grid-template-areas: "head head" "body body";
+  }
+
+  tbody {
+    display: flex;
+  }
+
+  .discourse-top-contributors {
+    width: auto;
+    box-sizing: border-box;
+
+    @include viewport.until(lg) {
+      display: none;
+    }
+
+    .top-contributors-heading {
+      font-size: var(--font-up-2);
+      padding-bottom: 0.5em;
+    }
+  }
 }

scss/mobile-stuff.scss

@@ -1,132 +1,173 @@
-//temp sepeate file to avoid merge hell… to be distributed later
-@include breakpoint(medium) {
+@use "lib/viewport";
+
+// temp separate file to avoid merge hell… to be distributed later
+@include viewport.until(lg) {
   html,
   .d-header {
-    background-color: var(--secondary);
+    background-color: var(--d-content-background);
   }
 }
+
 #main-outlet-wrapper {
-  .navigation-topics & {
-    @include breakpoint(mobile-extra-large) {
+  *[class*="navigation-"] & {
+    @include viewport.until(sm) {
       padding: 0;
     }
   }
 }
+
 #main-outlet {
-  @include breakpoint(mobile-extra-large) {
+  @include viewport.until(sm) {
     padding-top: var(--spacing-block-sm);
   }
 
   .list-controls {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding-inline: var(
         --spacing-inline-m
-      ) !important; //override will be fixed when the whole chat page shenanigans is resolved
+      ) !important; // override will be fixed when the whole chat page shenanigans is resolved
       padding-block: var(--spacing-block-s);
       border-bottom: 1px solid var(--primary-200);
     }
+
     .navigation-container {
-      @include breakpoint(mobile-extra-large) {
+      @include viewport.until(sm) {
         gap: var(--spacing-inline-s);
-        //dont know why we even hide this crucial navigation on mobile
+
         .category-breadcrumb.hidden,
         .category-breadcrumb {
           display: flex !important;
-          gap: var(--spacing-inline-sm);
+          column-gap: var(--spacing-inline-m);
+          row-gap: var(--spacing-block-xs);
+          flex-basis: 100%;
+
+          li {
+            margin-right: 0;
+            margin-left: calc(
+              (var(--spacing-block-s) - 2px) * -1
+            ); // 2px is width of the outline
+          }
+
+          .select-kit-header-wrapper {
+            gap: 0.25em;
+          }
+
           .select-kit-header {
-            padding-block: var(--spacing-block-s);
-            padding-inline: 0;
-            border: 0;
+            background: var(--d-content-background);
           }
         }
+
         .btn-default {
           border: 0;
           margin-right: 0;
+
           .d-icon {
             font-size: var(--font-up-1);
           }
         }
+
         .fk-d-button-tooltip {
           margin-right: 0;
           margin-left: var(
             --spacing-inline-xs
-          ); //pure visual correction for horitzontal alignment
+          ); // pure visual correction for horizontal alignment
+
           &:has(#create-topic) {
             order: 1;
           }
         }
       }
+
       #navigation-bar,
       .navigation-controls,
       .category-breadcrumb {
-        @include breakpoint(mobile-extra-large) {
+        @include viewport.until(sm) {
           margin-bottom: 0;
         }
       }
+
       .navigation-controls {
-        gap: var(--spacing-inline-s);
+        @include viewport.until(sm) {
+          gap: var(--spacing-inline-s);
+        }
       }
     }
   }
 
   .list-container {
-    @include breakpoint(mobile-extra-large) {
+    @include viewport.until(sm) {
       padding-inline: 0 !important;
     }
 
     .topic-list-body {
-      @include breakpoint(mobile-extra-large) {
+      @include viewport.until(sm) {
         border-top: 0;
         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;
+    @include viewport.until(sm) {
+      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__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)
-      //     );
-      //   }
+      // make mixin of this
+      .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)
+        );
+      }
+
+      .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;
+    @include viewport.until(sm) {
+      padding-inline: var(--spacing-inline-xs) !important;
 
       .main-avatar .avatar {
         width: 40px;
         height: 40px;
-        border-radius: var(--d-border-radius);
       }
 
       .topic-body {
@@ -135,13 +176,68 @@
             font-size: var(--font-0-rem);
           }
         }
+
         .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 viewport.until(sm) {
+      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 doesn't work well with rounded corners
+#topic-progress-wrapper {
+  .progress-back-container {
+    margin-right: 0;
+    margin-bottom: var(--spacing-block-xs);
+
+    .btn-primary.progress-back {
+      border-radius: 0;
+      background: var(--secondary);
+      border: 1px solid var(--tertiary-low);
+      color: var(--accent-color);
+      padding: var(--spacing-inline-s) var(--spacing-inline-m);
+
+      .d-icon {
+        color: var(--accent-color);
+      }
+    }
+  }
+
+  .topic-admin-menu-trigger {
+    border-radius: 0;
+    background: var(--secondary);
+    border: 1px solid var(--tertiary-low);
+  }
+}
+
+.mobile-device #reply-control.show-preview .submit-panel {
+  background-color: var(--background-color);
+}
+
+.d-editor-preview-wrapper {
+  outline: 2px solid var(--background-color);
 }

scss/nav-pills.scss

@@ -2,27 +2,41 @@
   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;
 
   .navigation-container {
     gap: 1rem;
+
     .category-breadcrumb {
       order: 1;
     }
   }
+
   .combo-box .combo-box-header {
-    // needs more specificy than just in the button file
+    // needs more specificity than just in the button file
     background-color: var(--secondary);
-    border-radius: var(--d-border-radius-large);
+    border-radius: var(--d-border-radius);
     border: 1px solid var(--primary-300);
-    // 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: 0 0 0 3px var(--button-box-shadow);
+
+        .d-icon {
+          color: var(--accent-color);
+        }
+      }
     }
   }
+
   .select-kit.combo-box.category-drop.has-selection
     .category-drop-header:hover {
     border-color: transparent;
@@ -36,15 +50,18 @@
 
 .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(--d-nav-color--hover);
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      height: var(--d-nav-underline-height);
+      background: var(--d-nav-color--hover);
+    }
   }
 }

scss/search-banner.scss

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

scss/self.scss

@@ -0,0 +1,127 @@
+@use "lib/viewport";
+
+#main-outlet {
+  @if $home_bg_image != "" {
+    background-image: url($home_bg_image);
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+  }
+}
+
+.container.list-container{
+  position: relative;
+}
+
+.container.list-container::before{
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff9;
+  border-radius: var(--d-border-radius);
+  backdrop-filter: blur(10px);
+  box-shadow: #00000077 0 0 19px 0;
+}
+
+.topic-list-header{
+  background-color: unset;
+}
+.list-controls, .search-container{
+  border-radius: var(--d-border-radius);
+}
+
+.welcome-banner {
+  padding: 0 !important;
+  box-shadow: #00000094 0 0 11px 0;
+}
+
+#list-area, .topic-list-header, .admin-detail{
+  background-color: unset !important;
+}
+
+.user-content, .details{
+  border-radius: var(--d-border-radius);
+}
+
+.regular.ember-view, .user-main, .reviewable,
+.admin-content, .contents.clearfix.body-page,
+.search-container, .show-badge, .users-directory, #main-outlet>.edit-category,
+#main-outlet>.container.groups-index,
+.container.group{
+  background-color: #ffffffa8 !important;
+  border-radius: var(--d-border-radius);
+  backdrop-filter: blur(32px);
+  box-shadow: #00000077 0 0 19px 0;
+  padding: 24px;
+}
+
+.topic-post.clearfix.regular, .post-list-item.user-stream-item,
+.search-header, .admin-plugin-config-page__content,
+.user-main .about.collapsed-info .details,
+.ember-view.group-box, .admin-container>.container.groups-index{
+  background: var(--d-chat-input-bg-color);
+  border-radius: var(--d-border-radius);
+  box-shadow: #00000024 0 0 7px 2px;
+  margin: 10px 0;
+  position: relative;
+  padding: 16px 12px;
+  overflow: hidden;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.user-content{
+  background-color: unset;
+}
+
+.powered-by-discourse{
+  display: none;
+}
+
+// 默认光标
+@if $default_cursor != "" {
+  * {
+    cursor: url($default_cursor) 1 1, auto;
+  }
+}
+
+// 悬停光标
+@if $hover_cursor != "" {
+  a,
+  button,
+  [role="button"],
+  input[type="button"],
+  input[type="submit"],
+  .btn,
+  .clickable {
+    cursor: url($hover_cursor) 1 1, auto;
+  }
+}
+
+// 链接光标
+@if $pointer_cursor != "" {
+  a[href],
+  button,
+  [role="button"],
+  label,
+  input[type="button"],
+  input[type="submit"],
+  .pointer {
+    cursor: url($pointer_cursor) 1 1, pointer;
+  }
+}
+
+// 文本光标
+@if $text_cursor != "" {
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  input[type="search"],
+  textarea {
+    cursor: url($text_cursor) 1 1, text;
+  }
+}

scss/sidebar-new-topic-button.scss

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

scss/sidebar.scss

@@ -1,14 +1,24 @@
-.sidebar-wrapper {
-  @include breakpoint(medium) {
+@use "lib/viewport";
+
+.sidebar-wrapper,
+.sidebar-hamburger-dropdown {
+  @include viewport.until(lg) {
     background: var(--secondary);
+
     .sidebar-footer-wrapper {
       background: var(--secondary);
+
+      .sidebar-footer-container::before {
+        display: none;
+      }
     }
   }
+
   .has-full-page-chat &,
   .has-full-page-chat & .sidebar-footer-wrapper {
     background: transparent;
   }
+
   .sidebar-container {
     border-right: none;
   }
@@ -16,31 +26,48 @@
   .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;
     transition: none;
     border-radius: var(--d-border-radius);
   }
+
   .dropdown-menu__item .sidebar-section-link {
-    border-radius: 0px;
+    border-radius: 0;
   }
 }
+
 .sidebar-section-wrapper {
-  padding-block: 0.45em;
-  .sidebar-section-header {
-    font-size: var(--font-down-1);
+  @include viewport.from(xl) {
+    padding-block: 0.45em;
   }
+
+  @include viewport.until(sm) {
+    .hamburger-panel .revamped & {
+      margin-bottom: var(--spacing-block-m);
+    }
+  }
+
+  .sidebar-section-header {
+    font-size: var(--font-down-2);
+  }
+
   .sidebar-section-content {
     margin: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--spacing-block-xs);
+
+    @include viewport.from(xl) {
+      gap: var(--spacing-block-xs);
+    }
   }
 }
 
+.sidebar-wrapper .sidebar-sections {
+  --scrollbarThumbBg: var(--d-selected);
+  padding: 0 1rem;
+}
+
 .sidebar-section-link-wrapper .sidebar-section-link:focus,
 .sidebar-section-link-wrapper .sidebar-section-link:hover {
   .d-icon {
@@ -49,14 +76,18 @@
 }
 
 .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;
   }
 }
 
-.sidebar-wrapper .sidebar-sections {
-  padding: 0 1rem;
+// put the draft menu above the slide-out hamburger on small desktop screens
+@include viewport.until(md) {
+  html:not(.mobile-view) {
+    .topic-drafts-menu-content {
+      z-index: z("modal", "overlay");
+    }
+  }
 }

scss/topic-cards.scss

@@ -1,161 +1,211 @@
-// 390x844 – mobile/portrait – (Figma iPhone 13 & 14)
-// 744x1133 – tablet/portrait – (Figma iPad mini 8.3)
-// 1280x832 – desktop small – (Figma MacBook Air)
+@use "lib/viewport";
 
 :root {
-  --hot-color: oklch(63.79% 0.1823 34.77);
+  --d-border-radius-small: calc(var(--d-border-radius) * 0.5);
 }
 
-$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);
+  border-bottom: none;
+}
+
+.topic-list,
+.category-boxes .subcategories {
+  .badge-category__wrapper {
+    border-radius: var(--d-border-radius);
+    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)
+    );
+
+    @include viewport.until(md) {
+      padding: 2px 6px;
+      font-size: var(--font-down-2);
+    }
+
+    .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)
+      );
+    }
+  }
+}
+
+// undo all the above for the few instances that arent styled like traditional badges
+.category-text-title {
+  .badge-category__wrapper {
+    border-radius: 0;
+    padding: 0;
+    background-color: transparent;
+
+    .badge-category__name {
+      color: var(--primary);
+    }
+  }
 }
 
 .topic-list-body {
   border: none;
   display: flex;
   flex-direction: column;
-  gap: 1em;
-  @include breakpoint(medium) {
+  gap: 1.25em;
+
+  @include viewport.until(lg) {
     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 viewport.until(sm) {
+    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;
-  }
+.topic-list-body .topic-list-item {
+  position: relative;
+  background: linear-gradient(45deg, var(--active-color), rgb(255 255 255 / 25%));
+  box-shadow: 4px 4px 6px 0px rgba(10, 18, 35, .38), 0 6px 16px -10px var(--topic-card-shadow);
+  text-overflow: ellipsis;
+  padding: var(--space-3);
+  border: none;
+  display: grid;
+  grid-template-columns: min-content min-content min-content auto min-content;
   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";
-    }
+    "creator title title title status"
+    ". category activity activity .";
+  grid-gap: var(--space-3);
+  border-radius: var(--d-border-radius);
+  cursor: pointer;
+  transition:
+          all 0.2s ease;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    mask-composite: exclude;
+    pointer-events: none;
   }
-  @media screen and (max-width: $small) {
-    grid-template-columns: 25px auto repeat(6, 1fr);
-    grid-template-rows: auto auto;
+
+  &.has-replies {
     grid-template-areas:
-      "topic-title topic-title topic-title topic-title topic-title topic-title topic-title activity"
-      "avatar author . . . . . likes-replies";
-    .topic-excerpt {
+      "creator title title title status"
+      ". category likes-replies activity .";
+  }
+
+  &:not(.has-replies) {
+    .topic-likes-replies-data {
       display: none;
     }
   }
-}
 
-.topic-list-item {
-  -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;
+  @include viewport.until(sm) {
+    max-width: 100vw;
+    box-sizing: border-box;
     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) {
+      "creator title title title status"
+      ". category activity activity . ";
+    border: none;
+    border-bottom: 1px solid var(--primary-200);
+    box-shadow: none;
+    border-radius: 0;
+    padding: var(--space-4) var(--space-3);
+
+    &.has-replies {
       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";
+        "creator title title title status"
+        ". category likes-replies activity . ";
     }
-    @media screen and (max-width: $small) {
-      grid-template-columns: 25px auto repeat(6, 1fr);
-      grid-template-rows: auto auto auto;
+  }
+
+  .bulk-select-enabled & {
+    grid-template-columns: min-content min-content min-content auto min-content min-content;
+    grid-template-areas:
+      "bulk-select creator title title title status"
+      "bulk-select category category activity activity .";
+
+    &.has-replies {
       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 {
+        "bulk-select creator title title title status"
+        "bulk-select category category activity likes-replies likes-replies";
+
+      @include viewport.until(sm) {
+        grid-template-areas:
+          "bulk-select creator title title title status"
+          "bulk-select . category likes-replies activity . ";
+      }
+    }
+
+    @include viewport.until(sm) {
+      grid-template-columns: min-content min-content min-content min-content auto min-content;
+      grid-template-areas:
+        "bulk-select creator title title title status"
+        "bulk-select . category activity activity . ";
+    }
+  }
+
+  &:hover {
+      background: var(--active-color);
+      box-shadow: 4px 5px 3px 1px rgba(0, 0, 0, .2), 0 8px 20px -10px var(--topic-card-shadow);
+      border-left: 5px solid #0006;
+  }
+
+  &.selected {
+    box-shadow:
+            0 14px 32px -14px rgb(10 18 35 / 48%),
+            0 0 0 2px oklch(from var(--accent-color) l calc(c * 0.45) h / 0.28),
+            0 0 0 8px oklch(from var(--accent-color) l calc(c * 0.2) h / 0.14);
+  }
+
+  &.excerpt-expanded {
+    @include viewport.until(sm) {
+      .topic-excerpt,
+      .link-bottom-line {
         display: none;
       }
     }
+
+    @include viewport.from(sm) {
+      grid-template-areas:
+        "creator title title title status"
+        ". category activity activity . "
+        ". excerpt excerpt excerpt excerpt";
+
+      &.has-replies {
+        grid-template-areas:
+          "creator title title title status"
+          ". category likes-replies activity ."
+          ". excerpt excerpt excerpt excerpt";
+      }
+
+      .bulk-select-enabled & {
+        grid-template-areas:
+          "bulk-select creator title title title status"
+          "bulk-select category category activity likes-replies likes-replies "
+          " bulk-select excerpt excerpt excerpt excerpt excerpt";
+      }
+    }
   }
-  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);
+
+  .link-top-line {
+    grid-area: title;
+    font-weight: 500;
+    line-height: calc(var(--space-3) * 2); // avatar sizing
+
+    @include viewport.until(sm) {
+      line-height: normal;
+    }
+
+    .title {
+      padding: 0;
+    }
   }
 
   // display contents
@@ -163,7 +213,8 @@ body.user-messages-page .topic-list-item {
   td.posters,
   td.posts,
   td.views,
-  td.activity {
+  td.activity,
+  td.topic-category-status-data {
     display: contents;
   }
 
@@ -171,103 +222,105 @@ body.user-messages-page .topic-list-item {
     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);
+  // display:nones
+  td.main-link a.topic-status,
+  .link-bottom-line,
+  .badge-notification.new-topic::before {
+    display: none;
   }
 
-  // status
-  .topic-status-card {
+  .topic-category-data {
+    grid-area: category;
     display: flex;
-    flex-direction: row;
-    gap: 4px;
-    align-items: center;
-    padding: 0 6px;
-    font-size: var(--font-down-2);
-    font-weight: 600;
+  }
+
+  .badge-category__wrapper {
     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);
+
+    @include viewport.until(sm) {
+      border-radius: var(--d-border-radius-small);
+      max-width: 125px;
     }
-    svg {
+    padding: 0.25em 0.5rem;
+    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)
+    );
+
+    @include viewport.until(md) {
+      padding: 0.25em 0.5rem;
+      font-size: var(--font-down-2);
+    }
+
+    .badge-category {
+      align-items: center;
+    }
+
+    .badge-category__name {
       font-size: var(--font-down-1);
-      color: var(--status-color);
+      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)
+      );
+      min-width: 0;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .d-icon {
+      width: var(--font-down-1);
+      height: var(--font-down-1);
     }
   }
 
-  .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);
+  // OP avatar
+  .topic-creator-data {
+    grid-area: creator;
+
+    .avatar {
+      height: calc(var(--space-3) * 2);
+      width: calc(var(--space-3) * 2);
+      border-radius: var(--d-border-radius);
+
+      @include viewport.until(sm) {
+        border-radius: var(--d-border-radius-small);
+      }
+    }
   }
 
-  // title
-  td.main-link .link-top-line {
-    font-size: var(--font-0);
-    grid-area: topic-title;
-    font-weight: 500;
+  .dot-separator {
+    width: 0.25em;
+    height: 0.25em;
+    background-color: var(--primary-500);
+    border-radius: 100%;
+    margin-inline: 0.25em;
   }
 
-  .link-top-line .event-date {
-    font-size: var(--font-down-3);
+  // topic activity, icon, text
+  .topic-activity-data {
+    @include ellipsis;
+    grid-area: activity;
   }
 
-  td.main-link a.topic-status {
-    display: none;
+  .topic-activity {
+    display: flex;
+    font-size: var(--font-down-1);
+    height: 100%;
+    align-items: center;
+    gap: 0.25em;
   }
 
-  td.main-link .link-top-line a.raw-topic-link {
-    padding: 0;
+  .topic-activity__type {
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
-  .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);
+  .topic-activity__username {
+    @include ellipsis;
+    margin-left: 0.25em;
   }
 
   // timestamp
@@ -279,46 +332,118 @@ body.user-messages-page .topic-list-item {
     padding: 0;
   }
 
-  // metadata
-  // metadata - category
-  td.main-link .link-bottom-line {
+  // status
+  .topic-status-data {
     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;
+  &.--has-status-card .topic-status-data {
+    display: block;
+    grid-area: status;
   }
 
-  td.topic-category-status-data .badge-category__wrapper {
-    overflow: unset;
+  .topic-status-card {
+    height: min-content;
+    margin-left: auto;
+    display: flex;
+    flex-direction: row;
+    gap: 0.25em;
+    align-items: center;
+    padding: 0.2em 0.5rem;
+    font-size: var(--font-down-2);
+
+    @include viewport.from(lg) {
+      font-size: var(--font-down-3);
+    }
+    font-weight: 600;
     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)
-    );
+    border: 1px solid var(--status-color);
+    color: var(--status-color);
+    width: min-content;
 
-    @media screen and (max-width: $small) {
-      padding: 2px 6px;
+    @include viewport.until(sm) {
+      border-radius: var(--d-border-radius-small);
+      padding: 0.35em;
     }
 
-    .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)
-      );
+    &.--pinned {
+      --status-color: var(--primary-500);
+    }
+
+    &.--hot {
+      --status-color: #e45735;
+    }
+
+    @include viewport.from(lg) {
+      position: absolute;
+      right: 1rem;
+      top: 0;
+      transform: translateY(-45%);
+      background-color: var(--d-content-background);
+    }
+
+    svg {
+      color: var(--status-color);
+
+      @include viewport.from(lg) {
+        font-size: var(--font-down-1);
+      }
+    }
+
+    &__name {
+      margin: 0;
+
+      @include viewport.until(sm) {
+        display: none;
+      }
     }
   }
+
+  .link-top-line .event-date {
+    margin-left: 0.5em;
+    font-size: var(--font-down-3);
+    white-space: nowrap;
+  }
+
+  .link-top-line .event-date-container {
+    top: -0.25rem;
+    line-height: normal;
+  }
+
+  .topic-list-data {
+    padding: 0;
+  }
+
+  .topic-post-badges .badge-notification.unread-posts,
+  .topic-post-badges .badge-notification.new-topic {
+    background-color: var(--tertiary);
+    color: var(--tertiary);
+    overflow: hidden;
+    height: 8px;
+    width: 8px;
+    padding: 0;
+    top: -2px;
+    min-width: unset;
+  }
+
+  // metadata - excerpt
+  .topic-excerpt {
+    grid-area: excerpt;
+    margin: 0;
+    padding: 0;
+    font-size: var(--font-down-2);
+    width: 100%;
+
+    .excerpt__contents {
+      color: var(--primary-high);
+    }
+
+    // default category position hidden
+    .badge-category__wrapper {
+      display: none;
+    }
+  }
+
   td.main-link .discourse-tags {
     display: none;
   }
@@ -334,34 +459,302 @@ body.user-messages-page .topic-list-item {
     grid-area: likes-replies;
     display: flex;
     flex-direction: row;
-    gap: 0.5em;
-    justify-content: flex-end;
+    gap: var(--space-3);
     height: min-content;
-    align-self: flex-end;
-    padding-bottom: 4px;
+    align-self: center;
+
+    .topic-likes {
+      display: none;
+    }
   }
-  .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);
+    font-size: var(--font-down-1-rem);
+
     svg {
       color: var(--primary-600);
     }
   }
-}
 
-.topic-list-header {
-  display: none;
-}
+  .bulk-select {
+    grid-area: bulk-select;
+    padding: 0;
+    margin: 0;
+    align-self: center;
+    justify-self: center;
 
-.topic-list-item {
-  background: var(--d-content-background);
-  box-shadow: 0px 0px 26px 1px var(--topic-card-shadow);
-  &:hover {
-    border: 1px solid var(--accent-color);
-    background: var(--d-content-background);
+    @include viewport.until(sm) {
+      align-self: flex-start;
+    }
+
+    label {
+      margin: 0;
+    }
+
+    &th {
+      display: none;
+    }
+  }
+
+  // Assigned List
+  &.assigned-list-item {
+    .topic-status-data {
+      display: none;
+    }
+    grid-template-areas:
+      "creator title title title dropdown"
+      ". category activity activity .";
+
+    &.has-replies {
+      grid-template-areas:
+        "creator title title title dropdown"
+        "category category likes-replies activity .";
+    }
+
+    .assign-topic-buttons {
+      display: contents;
+
+      .assign-actions-dropdown {
+        grid-area: dropdown;
+        justify-content: flex-end;
+        height: 1em;
+
+        .select-kit-header {
+          padding-top: 0;
+          margin-left: auto;
+          align-items: center;
+          background: transparent;
+        }
+
+        .select-kit-header-wrapper {
+          height: 1em;
+          width: 1em;
+        }
+      }
+    }
+  }
+
+  // Bookmarks
+  &.bookmark-list-item {
+    grid-template-areas:
+      "creator title title title dropdown"
+      "category category activity . . ";
+
+    @include viewport.until(sm) {
+      grid-template-areas:
+        "title title title title dropdown"
+        "category category activity activity . ";
+
+      .avatar {
+        display: none;
+      }
+    }
+
+    &.excerpt-expanded {
+      grid-template-areas:
+        "creator title title title dropdown"
+        "category category activity . . "
+        "excerpt excerpt excerpt excerpt excerpt";
+
+      @include viewport.until(sm) {
+        grid-template-areas:
+          "title title title title dropdown"
+          "category category activity activity . "
+          "excerpt excerpt excerpt excerpt excerpt";
+      }
+    }
+
+    &.has-metadata {
+      grid-template-areas:
+        "creator title title title dropdown"
+        "category category activity metadata . ";
+
+      @include viewport.until(sm) {
+        grid-template-areas:
+          "metadata metadata metadata metadata dropdown"
+          "title title title title ."
+          "category category activity activity . ";
+      }
+
+      &.excerpt-expanded {
+        grid-template-areas:
+          "creator title title title dropdown"
+          "category category activity metadata . "
+          "excerpt excerpt excerpt excerpt excerpt";
+
+        @include viewport.until(sm) {
+          grid-template-areas:
+            "metadata metadata metadata metadata dropdown"
+            "title title title title ."
+            "category category activity activity . "
+            "excerpt excerpt excerpt excerpt excerpt";
+        }
+      }
+    }
+
+    td.author-avatar {
+      grid-area: creator;
+    }
+
+    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;
+        margin: 0;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--spacing-inline-s);
+        white-space: nowrap;
+      }
+
+      .bookmark-metadata-item {
+        margin: 0;
+        vertical-align: middle;
+      }
+
+      .bookmark-status-with-link {
+        grid-area: title;
+      }
+    }
+
+    .post-excerpt {
+      grid-area: excerpt;
+      margin: 0;
+    }
+
+    .topic-list-data:last-of-type {
+      display: contents;
+
+      .bookmark-actions-dropdown {
+        grid-area: dropdown;
+        align-self: flex-start;
+        height: 1em;
+
+        .select-kit-header {
+          padding-top: 0;
+          margin-left: auto;
+          align-items: center;
+          background: transparent;
+        }
+
+        .select-kit-header-wrapper {
+          height: 1em;
+          width: 1em;
+        }
+      }
+    }
+
+    .post-metadata.topic-list-data.updated-at {
+      grid-area: activity;
+      display: flex;
+      align-items: center;
+      font-size: var(--font-down-1-rem);
+    }
+
+    td.activity .post-activity {
+      display: none;
+    }
   }
 }
+
+// bulk-select overrule for j/k nav
+.topic-list tr.selected td:first-of-type,
+.topic-list-item.selected td:first-of-type {
+  box-shadow: none;
+}
+
+// User Messages
+body.user-messages-page {
+  .topic-list-body {
+    gap: 0;
+  }
+
+  .topic-list .topic-list-data.posters a:not(.latest) {
+    display: block;
+  }
+
+  .topic-list-item {
+    border-radius: 0;
+    box-shadow: none;
+    border-bottom: 1px solid var(--primary-200);
+    border-top: none;
+    border-right: none;
+    border-left: none;
+    display: grid;
+    grid-template-areas: "title activity" "posters .";
+    grid-template-columns: auto auto;
+    grid-template-rows: auto auto;
+
+    &.has-replies {
+      grid-template-areas: "title activity" "posters .";
+    }
+
+    &:hover {
+      .discourse-no-touch & {
+        background-color: var(--primary-low);
+        border-color: var(--primary-200);
+      }
+    }
+
+    td.topic-category-data,
+    td.topic-likes-replies-data,
+    td.topic-status-data,
+    td.topic-creator-data {
+      display: none;
+    }
+
+    .main-link .link-top-line {
+      grid-area: title;
+    }
+
+    &.visited .main-link .link-top-line {
+      font-weight: normal;
+    }
+
+    td.topic-activity-data {
+      grid-area: activity;
+    }
+
+    td.topic-list-data.posters {
+      grid-area: posters;
+      display: flex;
+      align-items: center;
+      height: 100%;
+
+      a {
+        margin-right: 4px;
+      }
+
+      .avatar {
+        width: 20px;
+        height: 20px;
+        border-radius: 4px;
+        background-color: var(--primary-low);
+      }
+    }
+  }
+}
+
+.event-date-container {
+  display: inline-flex;
+  position: relative;
+}

scss/topic.scss

@@ -1,79 +1,73 @@
+@use "lib/viewport";
+
 .post-stream {
   .contents {
     font-size: var(--font-up-1);
     line-height: 1.25;
+    -webkit-font-smoothing: antialiased;
   }
 }
 
-.container.posts .topic-navigation {
-  // 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);
+
+    .timeline-scroller {
+      @include viewport.from(lg) {
+        margin-left: -4.5px;
+        background: var(--d-content-background);
+        height: 40px !important; // height is coming from element style have no other choice
+      }
+
+      .timeline-replies,
+      .timeline-ago {
+        line-height: 1;
+      }
+    }
+
+    .timeline-handle {
+      background-color: var(--accent-color);
+
+      @include viewport.from(lg) {
+        width: 8px;
+        border-radius: 10px;
+        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 viewport.until(lg) {
+    .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;
 }
 
 .container.posts {
-  grid-template-columns: auto 150px;
-  @media screen and (max-width: 924px) {
+  grid-template-columns: auto 8em;
+
+  @media screen and (width <= 924px) {
     grid-template-columns: auto auto;
   }
+
+  .post-notice {
+    padding: var(--spacing-block-sm);
+    border-radius: var(--d-border-radius);
+    font-size: var(--font-down-1-rem);
+
+    .d-icon {
+      font-size: var(--font-up-1);
+      width: 1em;
+    }
+  }
 }
 
 .timeline-container .topic-timeline .timeline-ago {
@@ -113,3 +107,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);
+}

scss/variables.scss

@@ -1,46 +1,10 @@
 :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
+
+  // 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;

scss/welcome-banner.scss

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

settings.yml

@@ -0,0 +1,37 @@
+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"
+
+home_bg_image:
+  type: upload
+  default: ""
+  description: "首页背景图"
+
+default_cursor:
+  type: upload
+  default: ""
+  description: "默认光标 SVG 文件"
+
+hover_cursor:
+  type: upload
+  default: ""
+  description: "悬停光标 SVG 文件"
+
+pointer_cursor:
+  type: upload
+  default: ""
+  description: "链接光标 SVG 文件"
+
+text_cursor:
+  type: upload
+  default: ""
+  description: "文本光标 SVG 文件"
+

spec/system/composer_peek_spec.rb

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

spec/system/core_features_spec.rb

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

spec/system/horizon_high_level_spec.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+require_relative "./page_objects/components/user_color_palette_selector"
+
+describe "Horizon theme | High level", type: :system do
+  let!(:theme) do
+    horizon_theme = upload_theme
+    ColorScheme
+      .where(theme_id: horizon_theme.id)
+      .where.not("name LIKE '%Dark%'")
+      .update_all(user_selectable: true)
+    horizon_theme
+  end
+  fab!(:current_user) { Fabricate(:user) }
+  fab!(:tag_1) { Fabricate(:tag, name: "wow-cool") }
+  fab!(:tag_2) { Fabricate(:tag, name: "another-tag") }
+  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 }
+  let(:palette_selector) { PageObjects::Components::UserColorPaletteSelector.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-category-data",
+        "topic-creator-data",
+        "topic-activity-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.
+    marigold_palette = theme.color_schemes.find_by(name: "Marigold")
+    palette_selector.open_palette_menu
+    palette_selector.click_palette_menu_item(marigold_palette.name)
+    expect(palette_selector).to have_no_palette_menu
+
+    page.refresh
+    expect(palette_selector).to have_selected_palette(marigold_palette)
+    expect(palette_selector).to have_tertiary_color(marigold_palette)
+  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

spec/system/page_objects/components/user_color_palette_selector.rb

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

spec/system/sidebar_topic_button_spec.rb

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

spec/system/user_color_palette_selector_spec.rb

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

stylelint.config.mjs

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