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)
+      uri (>= 0.13.1)
-    base64 (0.2.0)
+    ast (2.4.3)
-    bigdecimal (3.1.8)
+    base64 (0.3.0)
-    concurrent-ruby (1.3.4)
+    benchmark (0.4.1)
-    connection_pool (2.4.1)
+    bigdecimal (3.2.2)
-    drb (2.2.1)
+    concurrent-ruby (1.3.5)
-    i18n (1.14.6)
+    connection_pool (2.5.3)
+    drb (2.2.3)
+    i18n (1.14.7)
       concurrent-ruby (~> 1.0)
-    json (2.7.2)
+    json (2.12.2)
-    language_server-protocol (3.17.0.3)
+    language_server-protocol (3.17.0.5)
-    logger (1.6.1)
+    lint_roller (1.1.0)
-    minitest (5.25.1)
+    logger (1.7.0)
-    parallel (1.26.3)
+    minitest (5.25.5)
-    parser (3.3.5.0)
+    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)
+    regexp_parser (2.10.0)
-    rubocop (1.67.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)
+      regexp_parser (>= 2.9.3, < 3.0)
-      rubocop-ast (>= 1.32.2, < 2.0)
+      rubocop-ast (>= 1.45.0, < 2.0)
       ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 2.4.0, < 3.0)
+      unicode-display_width (>= 2.4.0, < 4.0)
-    rubocop-ast (1.32.3)
+    rubocop-ast (1.45.0)
-      parser (>= 3.3.1.0)
+      parser (>= 3.3.7.2)
-    rubocop-capybara (2.21.0)
+      prism (~> 1.4)
-      rubocop (~> 1.41)
+    rubocop-capybara (2.22.1)
-    rubocop-discourse (3.8.2)
+      lint_roller (~> 1.1)
+      rubocop (~> 1.72, >= 1.72.1)
+    rubocop-discourse (3.12.1)
       activesupport (>= 6.1)
-      rubocop (>= 1.59.0)
+      lint_roller (>= 1.1.0)
-      rubocop-capybara (>= 2.0.0)
+      rubocop (>= 1.73.2)
-      rubocop-factory_bot (>= 2.0.0)
+      rubocop-capybara (>= 2.22.0)
-      rubocop-rails (>= 2.25.0)
+      rubocop-factory_bot (>= 2.27.0)
+      rubocop-rails (>= 2.30.3)
       rubocop-rspec (>= 3.0.1)
-      rubocop-rspec_rails (>= 2.30.0)
+      rubocop-rspec_rails (>= 2.31.0)
-    rubocop-factory_bot (2.26.1)
+    rubocop-factory_bot (2.27.1)
-      rubocop (~> 1.61)
+      lint_roller (~> 1.1)
-    rubocop-rails (2.26.2)
+      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 (>= 1.75.0, < 2.0)
-      rubocop-ast (>= 1.31.1, < 2.0)
+      rubocop-ast (>= 1.44.0, < 2.0)
-    rubocop-rspec (3.1.0)
+    rubocop-rspec (3.6.0)
-      rubocop (~> 1.61)
+      lint_roller (~> 1.1)
-    rubocop-rspec_rails (2.30.0)
+      rubocop (~> 1.72, >= 1.72.1)
-      rubocop (~> 1.61)
+    rubocop-rspec_rails (2.31.0)
-      rubocop-rspec (~> 3, >= 3.0.1)
+      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,26 +1,135 @@
 {
-  "name": "next-gen",
+  "name": "Horizon-shiran",
-  "authors": "Design Team",
+  "authors": "shiran",
-  "about_url": "TODO: Put your theme's public repo or Meta topic URL here",
+  "about_url": "",
-  "license_url": "TODO: Put your theme's LICENSE URL here",
+  "license_url": "https://gitea.s1f.ren/shiran/discourse_theme_ran/horizon/blob/main/LICENSE",
-  "learn_more": "TODO",
+  "learn_more": "",
   "theme_version": "0.0.1",
-  "minimum_discourse_version": null,
+  "modifiers": {
-  "maximum_discourse_version": null,
+    "svg_icons": ["fire"],
-  "assets": {},
+    "serialize_topic_is_hot": true
-  "modifiers": {},
-  "color_schemes": {
-    "next_gen": {
-      "primary": "1A1A1A",
-      "secondary": "F5F8FF",
-      "header_background": "F5F8FF",
-      "tertiary": "595bca"
   },
-    "next_gen_dark": {
+  "color_schemes": {
-      "primary": "F5F8FF",
+    "Horizon": {
+      "primary": "1A1A1A",
+      "secondary": "ffffff",
+      "tertiary": "595bca",
+      "tertiary-med-or-tertiary": "595bca",
+      "selected": "d7dfff",
+      "header_background": "ffffff",
+      "header_primary": "1A1A1A",
+      "hover": "E1E8FF"
+    },
+    "Horizon Dark": {
+      "primary": "ffffff",
       "secondary": "1A1A1A",
+      "tertiary": "595bca",
+      "tertiary-med-or-tertiary": "595bca",
+      "selected": "3b3e56",
       "header_background": "1A1A1A",
-      "tertiary": "595bca"
+      "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,10 +1,21 @@
-@import "variables";
+@import "box-view";
-@import "header";
-@import "sidebar";
-@import "main";
-@import "topic-cards";
-@import "search-banner";
-@import "nav-pills";
 @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 "welcome-banner";
+@import "sidebar";
+@import "sidebar-new-topic-button";
+@import "topic";
+@import "topic-cards";
+@import "variables";
+@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.js

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

javascripts/discourse/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-category-column.gjs

@@ -0,0 +1,7 @@
+import { categoryLinkHTML } from "discourse/helpers/category-link";
+
+const TopicCategoryColumn = <template>
+  {{categoryLinkHTML @topic.category}}
+</template>;
+
+export default TopicCategoryColumn;

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-likes-column.gjs

@@ -0,0 +1,9 @@
+import icon from "discourse/helpers/d-icon";
+
+const TopicLikesColumn = <template>
+  {{#if @topic.like_count}}
+    <span class="topic-likes">{{icon "heart"}}{{@topic.like_count}}</span>
+  {{/if}}
+</template>;
+
+export default TopicLikesColumn;

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

@@ -0,0 +1,13 @@
+import { gt } from "truth-helpers";
+import icon from "discourse/helpers/d-icon";
+import number from "discourse/helpers/number";
+
+const TopicRepliesColumn = <template>
+  {{#if (gt @topic.replyCount 1)}}
+    <span class="topic-replies">{{icon "reply"}}{{number
+        @topic.posts_count
+      }}</span>
+  {{/if}}
+</template>;
+
+export default TopicRepliesColumn;

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

@@ -0,0 +1,38 @@
+import Component from "@glimmer/component";
+import { service } from "@ember/service";
+import icon from "discourse/helpers/d-icon";
+import { i18n } from "discourse-i18n";
+
+export default class TopicStatusColumn extends Component {
+  @service siteSettings;
+
+  get badge() {
+    if (this.args.topic.is_hot) {
+      return {
+        icon: "fire",
+        text: "topic_hot",
+        className: "--hot",
+      };
+    }
+
+    if (this.args.topic.pinned) {
+      return {
+        icon: "thumbtack",
+        text: "topic_pinned",
+        className: "--pinned",
+      };
+    }
+
+    return null;
+  }
+
+  <template>
+    {{#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

@@ -0,0 +1,68 @@
+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;
+
+  willDestroy() {
+    super.willDestroy(...arguments);
+    this.resizeObserver.disconnect();
+  }
+
+  @bind
+  calculateDistance(element) {
+    const distance = element.getBoundingClientRect();
+    this.left = distance.left;
+    this.right = distance.right;
+  }
+
+  get distanceStyles() {
+    return htmlSafe(
+      `--left-distance: ${this.left}px; --right-distance: ${this.right}px;`
+    );
+  }
+
+  get shouldRender() {
+    return !DO_NOT_RENDER_LIST.includes(this.router.currentRouteName);
+  }
+
+  @action
+  onInsert(element) {
+    this.calculateDistance(element);
+
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        this.calculateDistance(entry.target);
+      }
+    });
+
+    this.resizeObserver.observe(element);
+  }
+
+  <template>
+    {{#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

@@ -0,0 +1,128 @@
+import { withPluginApi } from "discourse/lib/plugin-api";
+import TopicActivityColumn from "../components/card/topic-activity-column";
+import TopicCategoryColumn from "../components/card/topic-category-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 TopicActivity = <template>
+  <td class="topic-activity-data">
+    <TopicActivityColumn @topic={{@topic}} />
+  </td>
+</template>;
+
+const TopicStatus = <template>
+  <td class="topic-status-data">
+    <TopicStatusColumn @topic={{@topic}} />
+  </td>
+</template>;
+
+const TopicCategory = <template>
+  <td class="topic-category-data">
+    <TopicCategoryColumn @topic={{@topic}} />
+  </td>
+</template>;
+
+const TopicReplies = <template>
+  <td class="topic-likes-replies-data">
+    <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(container) {
+    const router = container.lookup("service:router");
+    withPluginApi("1.39.0", (api) => {
+      api.registerValueTransformer(
+        "topic-list-columns",
+        ({ value: columns }) => {
+          columns.add("topic-status", {
+            item: TopicStatus,
+            after: "topic-author",
+          });
+          columns.add("topic-category", {
+            item: TopicCategory,
+            after: "topic-status",
+          });
+
+          columns.add("topic-likes-replies", {
+            item: TopicReplies,
+            after: "topic-author-avatar",
+          });
+          columns.add("topic-creator", {
+            item: TopicCreator,
+            after: "topic-author-avatar",
+          });
+          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;
+        }
+      );
+
+      api.registerValueTransformer(
+        "topic-list-item-class",
+        ({ value: classes, context }) => {
+          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;
+        }
+      );
+
+      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,5 +1,8 @@
 en:
   theme_metadata:
-    description: ''
+    description: "自制二次元的半透明主题"
-    settings:
+  topic_pinned: "Pinned"
-      example_setting: A description of a setting.
+  topic_hot: "Hot"
+  user_replied: "replied"
+  user_posted: "posted"
+  user_updated: "updated"

package.json

@@ -1,10 +1,11 @@
 {
   "private": true,
   "devDependencies": {
-    "@discourse/lint-configs": "2.4.0",
+    "@discourse/lint-configs": "2.25.0",
-    "ember-template-lint": "6.1.0",
+    "ember-template-lint": "7.8.1",
-    "eslint": "9.19.0",
+    "eslint": "9.28.0",
-    "prettier": "2.8.8"
+    "prettier": "3.5.3",
+    "stylelint": "16.20.0"
   },
   "engines": {
     "node": ">= 22",

scss/box-view.scss

@@ -0,0 +1,183 @@
+@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);
+  }
+}
+
+.chat-drawer-active.chat-drawer-expanded {
+  .experimental-screen {
+    &__top-left,
+    &__top-right,
+    &__bottom-left,
+    &__bottom-right,
+    &__bottom-bar {
+      z-index: 199;
+    }
+  }
+}
+
+.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 {
+  max-width: unset !important;
+  width: 100%;
+  display: block;
+  margin: 0;
+  padding: 0;
+  position: relative;
+
+  @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,
+  &__bottom-right {
+    position: fixed;
+    width: var(--d-border-radius-large);
+    height: var(--d-border-radius-large);
+    background-color: var(--background-color);
+    z-index: 399;
+    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(--main-grid-gap);
+    left: var(--left-distance);
+
+    @media screen and (width <= 768px) {
+      bottom: calc(var(--d-border-radius-large) * 2);
+    }
+  }
+
+  &__bottom-right {
+    transform: rotate(180deg);
+    bottom: var(--main-grid-gap);
+    left: calc(var(--right-distance) - var(--d-border-radius-large));
+
+    @media screen and (width <= 768px) {
+      bottom: calc(var(--d-border-radius-large) * 2);
+    }
+  }
+
+  &__bottom-bar {
+    position: fixed;
+    width: 100%;
+    z-index: 399;
+    background-color: var(--background-color);
+    bottom: 0;
+    left: var(--left-distance);
+    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;
+    }
+  }
+}
+
+.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) +
+        var(--d-border-radius-large)
+    );
+  }
+}
+
+@media screen and (width <= 768px) {
+  .with-topic-progress {
+    bottom: calc(
+      env(safe-area-inset-bottom) + var(--composer-height, 0px) +
+        calc(var(--d-border-radius-large) * 2)
+    );
+  }
+}
+
+@media screen and (width <= 400px) {
+  .with-topic-progress {
+    bottom: calc(env(safe-area-inset-bottom) + var(--composer-height, 0px));
+  }
+}

scss/buttons.scss

@@ -2,18 +2,109 @@
   --d-button-border-radius: 6.25rem;
 }
 
-.btn {
+.discourse-no-touch .topic-body .actions .fade-out {
-  padding: 0.5em 1rem;
+  transition: none;
 }
 
-.btn-default {
+.sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger.btn.no-text {
-  border: 1px solid var(--accent-color);
+  background: var(--accent-color);
-  background: var(--secondary);
+
-}
+  &:hover,
-#create-topic.btn {
+  &:focus-visible {
-  background-color: var(--accent-color);
+    background: oklch(from var(--accent-color) 40% c h) !important;
-  color: var(--accent-text-color);
+    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 .btn-default,
+.discourse-no-touch .select-kit .select-kit-header.btn-default {
+  background: var(--primary-100);
+
+  .d-icon {
+    color: var(--accent-color);
+  }
+
+  &:hover {
+    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);
+    }
+  }
+
+  &: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,
+.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: 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: 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 {
+    background: light-dark(
+      oklch(from var(--accent-color) 40% c h),
+      oklch(from var(--accent-color) 50% c h)
+    );
+  }
+}

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,10 +1,88 @@
-.c-navbar-container {
+@use "lib/viewport";
-  background-color: light-dark(#ffffff, #000000);
+
-  border-top-right-radius: var(--d-border-radius-large);
+.full-page-chat.full-page-chat-sidebar-enabled {
-  border-top-left-radius: var(--d-border-radius-large);
+  border: none;
 }
 
-.chat-message-container,
+.c-navbar-container {
-.chat-transcript {
+  .full-page-chat & {
-  background: transparent;
+    padding: 0 1.5em;
+  }
+  background-color: var(--d-content-background);
+}
+
+body.has-full-page-chat {
+  background-color: var(--background-color);
+}
+
+.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-bottom: none;
+
+  &:hover {
+    background-color: var(--d-sidebar-active-background);
+  }
+}
+
+.channel-title {
+  font-weight: bold;
+  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,6 +1,90 @@
+@use "lib/viewport";
+
 .d-header {
   box-shadow: none;
+  background: var(--background-color);
+
+  @include viewport.from(xl) {
+    padding-bottom: var(--main-grid-gap);
+  }
 }
-.desktop-view .d-header {
+
-  background: transparent;
+.user-menu .quick-access-panel,
+.user-notifications-list {
+  li {
+    &.pending,
+    &.unread {
+      background: var(--d-hover);
+
+      .discourse-no-touch & {
+        &:hover,
+        &:focus {
+          background: var(--d-selected);
+        }
+      }
+    }
+  }
+}
+
+.user-menu.revamped .tabs-list .btn.active {
+  background: var(--d-hover);
+}
+
+.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,5 +1,7 @@
 .sidebar__panel-switch-button,
-.sidebar-section[data-section-name="messages"],
+.list-controls #create-topic,
-.list-controls #create-topic {
+.notifications-button-footer .reason .text,
+.pinned-button .reason .text,
+.more-topics__browse-more {
   display: none;
 }

scss/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,73 +1,144 @@
-body,
+@use "lib/viewport";
-html {
+
-  background-color: #f5f8ff;
+:root {
+  --main-grid-gap: 0.5em;
 }
 
-body:not(.archetype-regular, .has-full-page-chat)
+html:not(:has(.has-full-page-chat)) {
-  #main-outlet-wrapper
+  background-color: var(--background-color);
-  #main-outlet {
+
-  overflow: scroll;
+  @include viewport.until(sm) {
-  border-radius: var(--d-border-radius-large);
+    background-color: var(--d-content-background);
+  }
+}
+
+body {
+  -webkit-font-smoothing: antialiased;
+
+  @include viewport.until(sm) {
+    background-color: var(--d-content-background);
+  }
 }
 
 #main-outlet-wrapper {
-  margin-top: 1.5rem;
+  gap: var(--main-grid-gap);
-  gap: 2em !important;
+}
-  height: calc(100vh - var(--header-offset) - 4rem);
+
-  box-sizing: border-box;
+body.has-sidebar-page.has-full-page-chat #main-outlet-wrapper {
-  > * {
+  grid-column-gap: var(--main-grid-gap);
-    height: inherit;
+  background-color: var(--background-color);
-    box-sizing: border-box;
+}
+
+body.has-full-page-chat:not(.has-sidebar-page) {
+  .d-header {
+    background-color: var(--background-color);
   }
+
+  #main-outlet-wrapper {
+    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) minmax(0, 1fr) 0;
+
+  #main-outlet {
+    max-width: unset;
+  }
+}
+
+body:not(.has-sidebar-page) #main-outlet-wrapper {
+  @include viewport.from(lg) {
+    grid-template-columns: 0 minmax(0, 1fr) 0;
+  }
+}
+
+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%;
-    height: inherit;
+      max-width: unset;
-    overflow: scroll;
+      padding-bottom: var(--spacing-block-l);
-    &:has(.list-controls) {
+      border-radius: var(--d-border-radius-large);
-      padding-top: 0;
+      background-color: var(--d-content-background);
+
+      @include viewport.until(lg) {
+        border-radius: 0;
       }
-    &:has(#topic-title) {
+
-      padding-top: 0;
+      html.composer-open & {
+        padding-bottom: var(--composer-height);
       }
-    > *:not(.full-page-chat) {
+
+      > *: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);
-    border-radius: 1.25rem;
+        font-size: var(--font-down-1-rem);
-    .navigation-topics & {
-      background: radial-gradient(
-          100.59% 70.87% at 41.19% 73.28%,
-          rgba(188, 241, 238, 0.2) 0%,
-          rgba(255, 255, 255, 0) 100%
-        ),
-        radial-gradient(
-          75.11% 79.17% at 66.02% 41.71%,
-          rgba(162, 164, 225, 0.2) 0%,
-          rgba(255, 255, 255, 0) 100%
-        ),
-        #fff;
       }
-    box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
+    }
-    background-color: light-dark(#ffffff, #000000);
+  }
+
+  .topic-list-body {
+    padding-top: var(--spacing-block-m);
   }
 }
 
-#topic-title {
+aside.onebox {
-  z-index: 999;
+  background-color: var(--d-content-background);
-  margin-bottom: 1em;
-  padding: 1.5rem 2rem 0.5em;
-  position: sticky;
-  top: 0;
-  background: var(--secondary);
 }
 
-.container.posts,
+.d-editor-preview-wrapper {
-.more-topics__container,
+  border-radius: var(--d-border-radius);
-#topic-footer-buttons {
+  padding: 1em;
-  padding: 0 24px;
+  background-color: var(--d-content-background);
 }
 
-.container.posts .topic-navigation {
+.no-ember {
-  top: calc(var(--header-offset, 60px) + 4em);
+  #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

@@ -0,0 +1,141 @@
+@use "lib/viewport";
+
+.user-main .about.collapsed-info .details {
+  background: var(--d-content-background);
+}
+
+.user-menu .quick-access-panel .read,
+.user-notifications-list .read {
+  background: var(--d-content-background);
+}
+
+.powered-by-discourse {
+  z-index: 400;
+}
+
+.boxed.white {
+  background-color: var(--d-content-background);
+}
+
+.admin-area .sidebar-wrapper .admin-panel {
+  background-color: transparent;
+}
+
+.admin-report .main .report-alert.no-data,
+.admin-report .main .report-alert.rate-limited {
+  background-color: var(--d-content-background);
+}
+
+.admin-detail {
+  background-color: var(--d-content-background);
+}
+
+.select-kit.combo-box .select-kit-header,
+.select-kit.multi-select .multi-select-header,
+.d-editor-textarea-wrapper,
+.fk-d-menu__inner-content,
+.menu-panel {
+  background-color: var(--d-content-background);
+}
+
+.fk-d-menu .btn {
+  border-radius: 0;
+}
+
+.open .grippie {
+  background-color: var(--accent-color);
+}
+
+.d-editor-textarea-wrapper.in-focus,
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="datetime"]:focus,
+input[type="datetime-local"]:focus,
+input[type="date"]:focus,
+input[type="month"]:focus,
+input[type="time"]:focus,
+input[type="week"]:focus,
+input[type="number"]:focus,
+input[type="email"]:focus,
+input[type="url"]:focus,
+input[type="search"]:focus,
+input[type="tel"]:focus,
+input[type="color"]:focus,
+.select-kit.multi-select.is-expanded .multi-select-header,
+.select-kit.multi-select .multi-select-header:focus {
+  border-color: var(--accent-color);
+  outline: 2px solid var(--accent-color);
+}
+
+#reply-control {
+  background-color: var(--background-color);
+}
+
+@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

@@ -0,0 +1,243 @@
+@use "lib/viewport";
+
+// temp separate file to avoid merge hell… to be distributed later
+@include viewport.until(lg) {
+  html,
+  .d-header {
+    background-color: var(--d-content-background);
+  }
+}
+
+#main-outlet-wrapper {
+  *[class*="navigation-"] & {
+    @include viewport.until(sm) {
+      padding: 0;
+    }
+  }
+}
+
+#main-outlet {
+  @include viewport.until(sm) {
+    padding-top: var(--spacing-block-sm);
+  }
+
+  .list-controls {
+    @include viewport.until(sm) {
+      padding-inline: var(
+        --spacing-inline-m
+      ) !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 viewport.until(sm) {
+        gap: var(--spacing-inline-s);
+
+        .category-breadcrumb.hidden,
+        .category-breadcrumb {
+          display: flex !important;
+          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 {
+            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 horizontal alignment
+
+          &:has(#create-topic) {
+            order: 1;
+          }
+        }
+      }
+
+      #navigation-bar,
+      .navigation-controls,
+      .category-breadcrumb {
+        @include viewport.until(sm) {
+          margin-bottom: 0;
+        }
+      }
+
+      .navigation-controls {
+        @include viewport.until(sm) {
+          gap: var(--spacing-inline-s);
+        }
+      }
+    }
+  }
+
+  .list-container {
+    @include viewport.until(sm) {
+      padding-inline: 0 !important;
+    }
+
+    .topic-list-body {
+      @include viewport.until(sm) {
+        border-top: 0;
+        padding-top: 0;
+      }
+    }
+  }
+
+  #topic-title {
+    @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 {
+        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 viewport.until(sm) {
+      padding-inline: var(--spacing-inline-xs) !important;
+
+      .main-avatar .avatar {
+        width: 40px;
+        height: 40px;
+      }
+
+      .topic-body {
+        .topic-meta-data {
+          .username {
+            font-size: var(--font-0-rem);
+          }
+        }
+
+        .contents {
+          padding-top: var(--spacing-block-m);
+        }
+      }
+
+      .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

@@ -1,28 +1,59 @@
 .list-controls {
   position: sticky;
-  top: 0;
+  top: var(--header-offset);
-  background: var(--secondary);
+  background: var(--d-content-background);
-  z-index: 100;
+  z-index: z("base");
-  padding-top: 1.5rem;
+  padding: 1.5rem 0 1rem 0;
   max-width: unset;
-  width: 100%;
 
   .navigation-container {
+    gap: 1rem;
+
     .category-breadcrumb {
       order: 1;
     }
   }
-  .combo-box .combo-box-header,
+
-  .select-kit.is-expanded .select-kit-body,
+  .combo-box .combo-box-header {
-  .discourse-post-event .discourse-post-event-widget {
+    // needs more specificity than just in the button file
     background-color: var(--secondary);
-    border-radius: 6.25rem;
+    border-radius: var(--d-border-radius);
+    border: 1px solid var(--primary-300);
+
+    &:hover {
+      border: 1px solid var(--accent-color);
+    }
+
+    &: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;
   }
 }
+
+.select-kit.is-expanded .select-kit-body {
+  border-radius: var(--d-border-radius);
+  background-color: var(--d-content-background);
+}
+
 .nav-pills > li > a:hover,
 .nav-pills > li button:hover {
+  .discourse-no-touch & {
     background: transparent;
-  color: var(--accent-color);
+    color: var(--d-nav-color--hover);
+
     &::after {
       content: "";
       position: absolute;
@@ -30,6 +61,7 @@
       bottom: 0;
       right: 0;
       height: var(--d-nav-underline-height);
-    background: var(--accent-color);
+      background: var(--d-nav-color--hover);
+    }
   }
 }

scss/search-banner.scss

@@ -1,47 +0,0 @@
-.custom-search-banner-wrap {
-  display: grid;
-  grid-template-rows: 0.33fr 0.33fr 0.33fr;
-  grid-template-columns: 0.5fr 0.5fr;
-  grid-column-gap: 1em;
-  grid-row-gap: 0.5em;
-  border-bottom: 1px solid var(--primary-300);
-  padding: 2.5em 0 2.5em;
-  margin-bottom: 2.5em;
-  --search-color: #595bca;
-  h1 {
-    grid-column: 1/2;
-    grid-row: 1/-1;
-    padding: 0 1em;
-    text-align: left;
-    align-self: center;
-    margin: 0;
-    font-weight: 400;
-    color: #350c73;
-  }
-  .search-menu {
-    grid-column: 2/3;
-    grid-row: 1/-1;
-    width: 100%;
-    align-self: center;
-  }
-  p {
-    display: none;
-  }
-  .search-input {
-    background: light-dark(#ffffff, #1f1f1f);
-    border: 1px solid oklch(from var(--search-color) 80% calc(c * 2.5) h);
-    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);
-  }
-  .results {
-    background: light-dark(#ffffff, #1f1f1f);
-  }
-}

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,8 +1,24 @@
-:root {
+@use "lib/viewport";
-  --d-sidebar-background: #f5f8ff;
+
-}
+.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-wrapper {
   .sidebar-container {
     border-right: none;
   }
@@ -10,4 +26,68 @@
   .sidebar-sections {
     padding: 0;
   }
+
+  .sidebar-section-link {
+    transition: none;
+    border-radius: var(--d-border-radius);
+  }
+
+  .dropdown-menu__item .sidebar-section-link {
+    border-radius: 0;
+  }
+}
+
+.sidebar-section-wrapper {
+  @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;
+
+    @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 {
+    color: var(--primary);
+  }
+}
+
+.sidebar-new-topic-button__wrapper {
+  margin: 0 var(--spacing-inline-m) var(--spacing-block-l);
+
+  .sidebar-new-topic-button .d-icon {
+    display: none;
+  }
+}
+
+// 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,7 +1,760 @@
-.topic-list-item {
+@use "lib/viewport";
-  background: light-dark(#ffffff, #1f1f1f);
+
-  &:hover {
+:root {
-    background: light-dark(#fcfcfc, #161616);
+  --d-border-radius-small: calc(var(--d-border-radius) * 0.5);
-  }
+}
-  border: 1px solid #cedde3;
+
+.topic-list .topic-list-item-separator {
+  display: none;
+}
+
+.topic-list > .topic-list-body > .topic-list-item.last-visit {
+  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: 1.25em;
+
+  @include viewport.until(lg) {
+    gap: 0.5em;
+    padding: 0 0.5em;
+  }
+
+  @include viewport.until(sm) {
+    gap: 0;
+    padding: 0;
+  }
+}
+
+.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:
+    "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;
+  }
+
+  &.has-replies {
+    grid-template-areas:
+      "creator title title title status"
+      ". category likes-replies activity .";
+  }
+
+  &:not(.has-replies) {
+    .topic-likes-replies-data {
+      display: none;
+    }
+  }
+
+  @include viewport.until(sm) {
+    max-width: 100vw;
+    box-sizing: border-box;
+    grid-template-areas:
+      "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:
+        "creator title title title status"
+        ". category likes-replies activity . ";
+    }
+  }
+
+  .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:
+        "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";
+      }
+    }
+  }
+
+  .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
+  td.main-link,
+  td.posters,
+  td.posts,
+  td.views,
+  td.activity,
+  td.topic-category-status-data {
+    display: contents;
+  }
+
+  td.num.posts a {
+    padding: 0;
+  }
+
+  // display:nones
+  td.main-link a.topic-status,
+  .link-bottom-line,
+  .badge-notification.new-topic::before {
+    display: none;
+  }
+
+  .topic-category-data {
+    grid-area: category;
+    display: flex;
+  }
+
+  .badge-category__wrapper {
+    border-radius: var(--d-border-radius);
+
+    @include viewport.until(sm) {
+      border-radius: var(--d-border-radius-small);
+      max-width: 125px;
+    }
+    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: 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);
+    }
+  }
+
+  // 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);
+      }
+    }
+  }
+
+  .dot-separator {
+    width: 0.25em;
+    height: 0.25em;
+    background-color: var(--primary-500);
+    border-radius: 100%;
+    margin-inline: 0.25em;
+  }
+
+  // topic activity, icon, text
+  .topic-activity-data {
+    @include ellipsis;
+    grid-area: activity;
+  }
+
+  .topic-activity {
+    display: flex;
+    font-size: var(--font-down-1);
+    height: 100%;
+    align-items: center;
+    gap: 0.25em;
+  }
+
+  .topic-activity__type {
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .topic-activity__username {
+    @include ellipsis;
+    margin-left: 0.25em;
+  }
+
+  // timestamp
+  td.activity .post-activity {
+    grid-area: activity;
+    font-size: var(--font-down-1);
+    color: var(--primary-500);
+    margin-left: auto;
+    padding: 0;
+  }
+
+  // status
+  .topic-status-data {
+    display: none;
+  }
+
+  &.--has-status-card .topic-status-data {
+    display: block;
+    grid-area: status;
+  }
+
+  .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);
+    border: 1px solid var(--status-color);
+    color: var(--status-color);
+    width: min-content;
+
+    @include viewport.until(sm) {
+      border-radius: var(--d-border-radius-small);
+      padding: 0.35em;
+    }
+
+    &.--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;
+  }
+
+  // metadata - likes and replies
+  td.posts .badge-posts {
+    grid-area: replies;
+    align-self: center;
+    font-weight: normal;
+  }
+
+  td.topic-likes-replies-data {
+    grid-area: likes-replies;
+    display: flex;
+    flex-direction: row;
+    gap: var(--space-3);
+    height: min-content;
+    align-self: center;
+
+    .topic-likes {
+      display: none;
+    }
+  }
+
+  .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);
+    }
+  }
+
+  .bulk-select {
+    grid-area: bulk-select;
+    padding: 0;
+    margin: 0;
+    align-self: center;
+    justify-self: center;
+
+    @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

@@ -0,0 +1,117 @@
+@use "lib/viewport";
+
+.post-stream {
+  .contents {
+    font-size: var(--font-up-1);
+    line-height: 1.25;
+    -webkit-font-smoothing: antialiased;
+  }
+}
+
+.timeline-container .topic-timeline {
+  min-width: unset; // why we have this?
+
+  .timeline-scrollarea {
+    border-left: 1px solid var(--accent-color);
+
+    .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);
+      }
+    }
+  }
+}
+
+// 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;
+    }
+  }
+}
+
+.container.posts {
+  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 {
+  max-width: unset;
+  overflow: unset;
+  text-overflow: unset;
+}
+
+.timeline-container .topic-timeline .timeline-scroller-content {
+  overflow: unset;
+}
+
+.more-topics__container
+  .more-topics__list
+  .topic-list-body
+  .topic-list-item:last-of-type {
+  border-bottom: 1px solid var(--primary-300);
+}
+
+.discourse-post-event .discourse-post-event-widget {
+  background: var(--d-content-background);
+}
+
+.more-topics__container .nav {
+  position: unset;
+  margin-block: unset;
+  margin-bottom: 1em;
+}
+
+.timeline-container.timeline-fullscreen
+  .topic-timeline
+  .timeline-scrollarea
+  .timeline-scroller
+  .timeline-handle {
+  float: none;
+  width: 5px;
+  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,9 +1,22 @@
 :root {
+  --d-max-width: 1000px;
   --d-border-radius-large: 20px;
-  --d-border-radius: 6px;
+  --d-border-radius: 8px;
   --d-input-border-radius: 6px;
-  --accent-color: #595bca;
+
-  --accent-text-color: #ffffff;
+  // the idea is: block spacing can grow with font-size, but inline spacing should not to maintain horizontal (text) alignment
-  --d-nav-color--active: var(--accent-color);
+  --spacing-block-xs: 0.25em;
-  --primary: #0c0d27;
+  --spacing-block-s: 0.5em;
+  --spacing-block-sm: 0.75em;
+  --spacing-block-m: 1em;
+  --spacing-block-l: 1.5em;
+  --spacing-block-xl: 2em;
+  --spacing-block-xxl: 4em;
+  --spacing-inline-xs: 0.25em;
+  --spacing-inline-s: 0.5rem;
+  --spacing-inline-sm: 0.75rem;
+  --spacing-inline-m: 1rem;
+  --spacing-inline-l: 1.5rem;
+  --spacing-inline-xl: 2rem;
+  --spacing-inline-xxl: 4rem;
 }

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

@@ -1,2 +1,37 @@
-example_setting:
+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"],
+};