Add scripts to generate color scales

Author: rossta

app/models/color_scale.rb

@@ -39,8 +39,4 @@ def weights
       hash[weight] = send(:"weight_#{weight}")
     end
   end
-
-  def to_css
-    weights.map { |weight, value| "--color-#{name.dasherize}-#{weight}: #{value};" }.join("\n")
-  end
 end

lib/tasks/color_scales/seed.rake

@@ -0,0 +1,35 @@
+namespace :color_scales do
+  desc "Seed ColorScales from JSON files"
+  task seed: :environment do
+    # Generate ColorScale rows from precalcated JSON
+    # "hex json" files are expected to represent JSON objects of color scales: { name: { weight: color, ... }, ...
+
+    if !File.exist?("./script/colors/tmp/1500-palette-hex.json")
+      puts "Run `rake color_scales:generate_1500` first to generate 1500-palette-hex.json"
+      exit
+    end
+
+    hex_json_1500 = JSON.parse(File.read("./script/colors/tmp/1500-palette-hex.json"))
+    hex_json_1500.each do |name, weights|
+      ColorScale.find_or_create_by!(name: name) do |cs|
+        weights.each do |weight, css|
+          cs.set_weight(weight, css)
+        end
+      end
+    end
+
+    hex_json_uicolors = JSON.parse(File.read("./script/colors/data/uicolors-palette-hex.json"))
+    hex_json_uicolors.each do |name, weights|
+      custom_name = "Custom #{name.titleize}"
+      ColorScale.find_or_create_by!(name: custom_name) do |cs|
+        weights.each do |weight, css|
+          cs.set_weight(weight, css)
+        end
+      end
+    end
+  end
+
+  task :generate_1500 do
+    `node ./script/colors/generate-1500-hex.js > ./script/colors/tmp/1500-palette-hex.json`
+  end
+end

script/uicolors-seed.js renamed to script/colors/data/1500-colors.mjs

@@ -1,4 +1,5 @@
-const colors = [
+/* Credit: https://github.com/PetrochukM/1500-color-names */
+export const colors = [
   ['000000', 'Black'],
   ['000080', 'Navy Blue'],
   ['0000C8', 'Dark Blue'],

script/tailwind-colors-hex renamed to script/colors/data/tailwind-colors-hex

@@ -138,7 +138,7 @@
     "950": "#520527"
   },
 
-  "siler-tree": {
+  "silver-tree": {
     "50": "#effaf4",
     "100": "#d9f2e2",
     "200": "#b6e4ca",

script/uicolors-hex.json renamed to script/colors/data/uicolors-palette-hex.json

@@ -0,0 +1,14 @@
+// Usage: node script/colors/generate-1500-hex.js > script/colors/data/1500-palette-hex.json
+//
+// This script converts the 1500-colors.mjs file into a JSON object with the
+// palette name as the key and a monochrome color scale object as the value.
+
+import { generatePalette } from './palette.mjs';
+import { colors } from './data/1500-colors.mjs';
+
+const palettes = colors.reduce((obj, [hex, name]) => {
+  obj[name] = generatePalette(hex, name);
+  return obj;
+}, {});
+
+console.log(JSON.stringify(palettes));

script/colors/generate-1500-hex.js

@@ -0,0 +1,46 @@
+import chroma from 'chroma-js';
+
+export const getColor = (color) => chroma(color);
+
+export const generateScale = (color) => {
+  const colors = chroma.scale(['white', color, 'black']);
+  const palette = [];
+
+  // Create 50
+  palette.push(colors(0.05).hex());
+
+  // Create 100-900
+  for (let i = 0.1; i < 0.9; i += 0.1) {
+    palette.push(colors(i).hex());
+  }
+
+  // Create 950
+  palette.push(colors(0.95).hex());
+
+  return palette;
+};
+
+export const isValid = (color) => chroma.valid(color);
+
+export const generatePalette = (color, name = 'myColor') => {
+  const palette = generateScale(color);
+  return {
+    50: palette[0],
+    100: palette[1],
+    200: palette[2],
+    300: palette[3],
+    400: palette[4],
+    500: palette[5],
+    600: palette[6],
+    700: palette[7],
+    800: palette[8],
+    900: palette[9],
+    950: palette[10],
+  };
+};
+
+export const generateColorPalette = (color, name = 'myColor') => {
+  return {
+    [name]: generatePalette(color),
+  };
+};

script/colors/palette.mjs

@@ -0,0 +1,24 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "json"
+require "color_conversion"
+require "active_support/deprecation"
+require "active_support/deprecator"
+require "active_support/core_ext/string"
+
+Color = ColorConversion::Color
+
+filename = ARGV.shift
+raise "Usage: #{$0} <filename>" unless filename
+
+hex_json = JSON.parse(File.read(filename))
+
+hsl_json = hex_json.sort_by { |color, _| color }.each_with_object({}) do |(color, weight_hex_pairs), config|
+  config[color] = weight_hex_pairs.map do |weight, hex|
+    hsl = Color.new(hex).hsl
+    [weight, "hsla(#{hsl[:h]}, #{hsl[:s]}%, #{hsl[:l]}%, 1)"]
+  end.to_h
+end
+
+puts hsl_json.to_json

script/colors/rewrite-palettes-hex-to-hsla

@@ -11,7 +11,7 @@ weight = nil
 
 puts ":root {"
 
-File.readlines("./tailwind-colors-hex").each do |line|
+File.readlines("./input/tailwind-colors-hex").each do |line|
   value = line.strip
   if line.start_with?("#")
     hex = value

script/rewrite-tailwind-colors-hsla renamed to script/colors/rewrite-tailwind-colors-hsla

@@ -13,7 +13,7 @@ puts "/* This file is generated by script/rewrite-uicolors-hsla.rb */"
 puts "/* Credit: Color palettes by https://uicolors.app */"
 puts ":root {"
 
-color_json = JSON.parse(File.read("./script/uicolors-hex.json"))
+color_json = JSON.parse(File.read(File.join(File.dirname(__FILE__), "./data/uicolors-palette-hex.json")))
 
 color_json.sort_by { |color, _| color }.each do |color, weight_hex_pairs|
   puts "\s\s/* #{color} */"