WIP Color theme page

Author: rossta

app/controllers/color_themes_controller.rb

@@ -0,0 +1,11 @@
+class ColorThemesController < ApplicationController
+  def show
+    @color_scale = params[:id] ? ColorScale.find(params[:id]) : ColorScale.find_or_create_default
+    curated_color_scales = Rails.cache.fetch("curated_color_scales") { ColorScale.curated }
+
+    render ColorThemes::ShowView.new(
+      color_scale: color_scale,
+      curated_color_scales: curated_color_scales
+    )
+  end
+end

app/javascript/css/application.css

@@ -32,3 +32,4 @@
 @import './components/newsletter-banner.css';
 @import './components/anchors.scss';
 @import './components/callout.css';
+@import './components/color-theme.css';

app/javascript/css/components/color-theme.css

@@ -0,0 +1,33 @@
+.color-theme {
+  color: var(--joy-background-clean);
+  margin-bottom: var(--space-3xl);
+  display: flex;
+  flex-direction: row;
+  border-radius: 0.5rem;
+}
+
+.color-swatch {
+  width: 100%;
+  padding: 1rem;
+  margin-right: 1px;
+  height: 6rem;
+  border-radius: 0.5rem;
+  justify-content: center;
+  flex-direction: column;
+  text-transform: uppercase;
+  border: 1px solid var(--joy-border-subtle);
+  font-size: var(--step--2);
+  text-align: center;
+}
+
+.color-swatch__weight\:50,
+.color-swatch__weight\:100,
+.color-swatch__weight\:200,
+.color-swatch__weight\:300,
+.color-swatch__weight\:400 {
+  color: var(--joy-dark);
+}
+
+.color-swatch__weight {
+  font-weight: 700;
+}

app/javascript/css/utilities/custom.css

@@ -1,3 +1,11 @@
+.mb-gap {
+  margin-bottom: var(--grid-gutter);
+}
+
+.mb-gap {
+  margin-bottom: var(--grid-gutter);
+}
+
 .py-gap {
   padding-top: var(--grid-gutter);
   padding-bottom: var(--grid-gutter);

app/models/color_scale.rb

@@ -25,6 +25,16 @@ def self.curated
     where(name: names)
   end
 
+  def self.cached_curated
+    cached_ids = Rails.cache.read("curated_color_scale_ids")
+
+    return where(id: cached_ids) if cached_ids
+
+    curated.tap do |collection|
+      Rails.cache.write("curated_color_scale_ids", collection.map(&:id))
+    end
+  end
+
   def self.find_or_create_default
     find_or_create_by(name: APP_DEFAULT[:name]) do |cs|
       APP_DEFAULT[:weights].each do |weight, value|
@@ -41,7 +51,11 @@ def set_weight(weight, value)
 
   def weights
     VALID_WEIGHTS.each_with_object({}) do |weight, hash|
-      hash[weight] = send(:"weight_#{weight}")
+      hash[weight] = ColorConversion::Color.new(send(:"weight_#{weight}"))
     end
   end
+
+  def display_name
+    name.gsub("Custom ", "")
+  end
 end

app/views/color_themes/show_view.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+class ColorThemes::ShowView < ApplicationView
+  include Phlex::Rails::Helpers::FormWith
+
+  def initialize(color_scale:, curated_color_scales: [])
+    @color_scale = color_scale
+    @curated_color_scales = curated_color_scales
+  end
+
+  def view_template
+    render Pages::Header.new(title: "Settings: Color Theme")
+    div(class: "section-content container py-gap") do
+      p { "You can preview and save your desired color theme for this site. We have curated some options for you below." }
+
+      h3 { @color_scale.display_name }
+      div(class: "color-theme color-theme:#{@color_scale.name.parameterize}") do
+        @color_scale.weights.each do |weight, color|
+          div(class: "color-swatch color-swatch__weight:#{weight}", style: "background-color: #{color.hex}") do
+            div(class: "color-swatch__weight") { weight }
+            div(class: "color-swatch__color") { color.hex.delete("#").upcase }
+          end
+        end
+      end
+
+      h3 { "Want to try a different color theme?" }
+      form_with(url: color_theme_path, method: :get) do |f|
+        fieldset do
+          f.select :id, @curated_color_scales.map { |cs| [cs.display_name, cs.id] }, include_blank: "Pick one!"
+        end
+        fieldset do
+          f.submit "Show me!", class: "button primary"
+        end
+      end
+    end
+  end
+end

config/routes.rb

@@ -16,6 +16,8 @@
   end
   resources :examples, only: [:index, :show]
 
+  resource :color_theme, only: [:show, :update]
+
   namespace :pwa do
     resource :installation_instructions, only: [:show]
     resources :web_pushes, only: [:create]

spec/system/color_themes/customize_spec.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe "Customize Color Themes", type: :system do
+  it "user can selected a curated color scale" do
+    visit color_theme_path
+
+    select "Thunderbird", from: "Choose a color scheme"
+
+    click_button "Use this color scheme"
+
+    expect(page).to have_content("You are now using the Cerulean Blue color scheme")
+
+    expect(page).to have_css("color-theme:custom-thunderbird")
+  end
+end