Render default color scheme from db

Author: rossta

app/javascript/css/application.css

@@ -3,7 +3,7 @@
 @import './reset.css' layer(reset);
 
 @import './config/colors-tailwind.css' layer(theme);
-@import './config/colors-uicolors.css' layer(theme);
+/* @import './config/colors-uicolors.css' layer(theme); */
 @import './config/colors.css' layer(theme);
 @import './config/dracula.css' layer(theme);
 @import './config/theme.css' layer(theme);

app/models/color_scale.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "color_conversion"
+
 class ColorScale < ApplicationRecord
   APP_DEFAULT = {
     name: "Custom Cerulean Blue",

app/views/application/theme/_color.html.erb

@@ -1,11 +1,11 @@
 <%
   my_color = 'cerulean-blue'
   ui_colors_color_increments = [50, *1.upto(9).map { |n| n*100}, 950 ]
+
+  color_scale = ColorScale.find_or_create_default
 %>
 <style>
   :root {
-    <% ui_colors_color_increments.each do |n| %>
-    --my-color-<%= n %>: var(--color-<%= my_color %>-<%= n %>);
-    <% end %>
+    <%= render ColorScales::Css.new(color_scale: color_scale) %>
   }
 </style>

app/views/components/color_scales/css.rb

@@ -0,0 +1,25 @@
+class ColorScales::Css < Phlex::HTML
+  attr_reader :color_scale
+
+  def initialize(color_scale:)
+    @color_scale = color_scale
+  end
+
+  def color_name
+    color_scale.name.parameterize
+  end
+
+  def to_hsla_css(color)
+    hsl = color.hsl
+    "hsla(#{hsl[:h]}, #{hsl[:s]}%, #{hsl[:l]}%, 1)"
+  end
+
+  def view_template
+    color_scale.weights.each do |weight, color|
+      unsafe_raw "--color-#{color_name}-#{weight}: #{to_hsla_css(color)};\n"
+    end
+    color_scale.weights.each do |weight, color|
+      unsafe_raw "--my-color-#{weight}: var(--color-#{color_name}-#{weight});\n"
+    end
+  end
+end