UX: Move selected and hover colors up in the color palette UI (#34278)

The `selected` and `hover` colors are always positioned at the bottom of
the colors list in the admin color palette edit page. We think these
colors are more likely to be customized than many of the colors
currently shown above them, so this commit moves them a few places up so
they appear below the `header_primary` color.

app/models/color_scheme.rb

@@ -278,6 +278,20 @@ class ColorScheme < ActiveRecord::Base
   }
 
   LIGHT_THEME_ID = "Light"
+  COLORS_ORDER = %w[
+    primary
+    secondary
+    tertiary
+    quaternary
+    header_background
+    header_primary
+    selected
+    hover
+    highlight
+    danger
+    success
+    love
+  ].freeze
 
   def self.base_color_scheme_colors
     base_with_hash = []
@@ -508,6 +522,12 @@ class ColorScheme < ActiveRecord::Base
     end
   end
 
+  def self.sort_colors(hash)
+    sorted = hash.slice(*COLORS_ORDER)
+    sorted.merge!(hash.except(*COLORS_ORDER)) if sorted.size < hash.size
+    sorted
+  end
+
   def dump_caches
     self.class.hex_cache.clear
     ApplicationSerializer.expire_cache_fragment!("user_color_schemes")

app/serializers/color_scheme_serializer.rb

@@ -10,7 +10,8 @@ class ColorSchemeSerializer < ApplicationSerializer
 
   def colors
     db_colors = object.colors.index_by(&:name)
-    object.resolved_colors.map do |name, default|
+    resolved = ColorScheme.sort_colors(object.resolved_colors)
+    resolved.map do |name, default|
       db_colors[name] || ColorSchemeColor.new(name: name, hex: default, color_scheme: object)
     end
   end

spec/serializers/color_scheme_serializer_spec.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+RSpec.describe ColorSchemeSerializer do
+  fab!(:color_scheme) { Fabricate(:color_scheme, name: "Test Scheme", base_scheme_id: "WCAG") }
+
+  describe "#colors" do
+    it "returns colors sorted in a specific order" do
+      expect(
+        described_class.new(color_scheme, root: false).as_json[:colors].map { |c| c[:name] },
+      ).to eq(
+        %w[
+          primary
+          secondary
+          tertiary
+          quaternary
+          header_background
+          header_primary
+          selected
+          hover
+          highlight
+          danger
+          success
+          love
+          primary-medium
+          primary-low-mid
+          highlight-high
+          highlight-medium
+          highlight-low
+          color_0
+          color_1
+        ],
+      )
+    end
+  end
+end