DEV: Experimenting with using built in core color palettes for the color picking component (#71)

This PR is the beginning of converting the color picker to use built in
core color palettes.
The `color_schemes` defined in `about.json` are created in core when the
theme is imported,
and we then show all user-selectable color palettes in this sidebar
footer menu.

An important caveat here is that all of the Horizon themes must be
changed to `user_selectable`
otherwise they will not show up in the color palette selector in the
sidebar.

When choosing a color palette that also has a corresponding dark color
palette,
*both* light mode and dark mode are correctly saved with the color
palette(s) chosen,
using the color palette cookie we already have in core.

Anon users can also set a palette, which will be saved in a cookie.

---------

Co-authored-by: Sérgio Saquetim <saquetim@discourse.org>
Co-authored-by: Martin Brennan <martin@discourse.org>
Co-authored-by: Osama Sayegh <asooomaasoooma90@gmail.com>
This commit is contained in:
Jordan Vidrine
2025-03-30 22:28:28 -05:00
committed by GitHub
parent 0473f90cd9
commit b4e451e64b
14 changed files with 506 additions and 251 deletions
+21 -9
View File
@@ -1,7 +1,16 @@
# frozen_string_literal: true
require_relative "./page_objects/components/user_color_palette_selector"
describe "Horizon theme | High level", type: :system do
let!(:theme) { upload_theme }
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") }
@@ -10,6 +19,7 @@ describe "Horizon theme | High level", type: :system do
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")
@@ -33,18 +43,20 @@ describe "Horizon theme | High level", type: :system do
],
)
# Can see a topic in the list and navigate to it successfully
# Can see a topic in the list and navigate to it successfully.
topic_list.visit_topic(topic_1)
expect(topic_page).to have_topic_title(topic_1.title)
# Can change site colors from the sidebar palette, which are remembered across page reloads
palette_menu =
PageObjects::Components::DMenu.new(find(".sidebar-footer-actions .user-color-palette"))
palette_menu.expand
find(".color-palette-menu__content .color-palette-menu__item[data-color='marigold']").click
expect(page).to have_css(".custom-color-marigold")
# Can change site colors from the sidebar palette, which are remembered
# across page reloads.
marigold_palette = ColorScheme.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(page).to have_css(".custom-color-marigold")
expect(palette_selector).to have_selected_palette(marigold_palette)
expect(palette_selector).to have_tertiary_color(marigold_palette)
end
it "works for anon" do