Merge pull request #164 from joyofrails/css/color-scales

rossta · web-flow · commit 34e5b694bb1e · 2024-07-01T09:28:21.000-04:00
Add color scales
diff --git a/app/models/color_scale.rb b/app/models/color_scale.rb
@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+class ColorScale < ApplicationRecord
+  APP_DEFAULT = {
+    name: "Custom Cerulean Blue",
+    weights: {
+      "50": "#f1f5fd",
+      "100": "#dfe8fa",
+      "200": "#c7d7f6",
+      "300": "#a1beef",
+      "400": "#749be6",
+      "500": "#537ade",
+      "600": "#3e5dd2",
+      "700": "#354bc0",
+      "800": "#313f9c",
+      "900": "#2c397c",
+      "950": "#1f244c"
+    }
+  }.freeze
+
+  VALID_WEIGHTS = %w[50 100 200 300 400 500 600 700 800 900 950].freeze
+
+  def self.find_or_create_default
+    find_or_create_by(name: APP_DEFAULT[:name]) do |cs|
+      APP_DEFAULT[:weights].each do |weight, value|
+        cs.set_weight(weight, value)
+      end
+    end
+  end
+
+  def set_weight(weight, value)
+    raise ArgumentError, "Invalid weight: #{weight}" unless VALID_WEIGHTS.include?(weight.to_s)
+
+    send(:"weight_#{weight}=", value)
+  end
+
+  def weights
+    VALID_WEIGHTS.each_with_object({}) do |weight, hash|
+      hash[weight] = send(:"weight_#{weight}")
+    end
+  end
+end
diff --git a/db/migrate/20240701121018_create_color_scales.rb b/db/migrate/20240701121018_create_color_scales.rb
@@ -0,0 +1,21 @@
+class CreateColorScales < ActiveRecord::Migration[7.1]
+  def change
+    create_table :color_scales, force: true, id: false do |t|
+      t.primary_key :id, :string, default: -> { "ULID()" }
+      t.string :name, null: false
+      t.string :weight_50, null: false
+      t.string :weight_100, null: false
+      t.string :weight_200, null: false
+      t.string :weight_300, null: false
+      t.string :weight_400, null: false
+      t.string :weight_500, null: false
+      t.string :weight_600, null: false
+      t.string :weight_700, null: false
+      t.string :weight_800, null: false
+      t.string :weight_900, null: false
+      t.string :weight_950, null: false
+
+      t.timestamps
+    end
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
diff --git a/db/seeds/development.rb b/db/seeds/development.rb
@@ -6,3 +6,5 @@
   u.password = password
   u.password_confirmation = password
 end
+
+ColorScale.find_or_create_default
diff --git a/db/seeds/production.rb b/db/seeds/production.rb
@@ -6,3 +6,5 @@
   u.password = password
   u.password_confirmation = password
 end
+
+ColorScale.find_or_create_default
diff --git a/lib/tasks/color_scales/seed.rake b/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
diff --git a/script/colors/data/1500-colors.mjs b/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'],
diff --git a/script/colors/data/tailwind-colors-hex b/script/colors/data/tailwind-colors-hex
diff --git a/script/colors/data/uicolors-palette-hex.json b/script/colors/data/uicolors-palette-hex.json
@@ -138,7 +138,7 @@
     "950": "#520527"
   },
 
-  "siler-tree": {
+  "silver-tree": {
     "50": "#effaf4",
     "100": "#d9f2e2",
     "200": "#b6e4ca",
diff --git a/script/colors/generate-1500-hex.js b/script/colors/generate-1500-hex.js
@@ -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));
diff --git a/script/colors/palette.mjs b/script/colors/palette.mjs
@@ -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),
+  };
+};
diff --git a/script/colors/rewrite-palettes-hex-to-hsla b/script/colors/rewrite-palettes-hex-to-hsla
@@ -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
diff --git a/script/colors/rewrite-tailwind-colors-hsla b/script/colors/rewrite-tailwind-colors-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
diff --git a/script/colors/rewrite-uicolors-hsla b/script/colors/rewrite-uicolors-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} */"
diff --git a/spec/factories/color_scales.rb b/spec/factories/color_scales.rb
@@ -0,0 +1,18 @@
+require "faker"
+
+FactoryBot.define do
+  factory :color_scale do
+    name { Faker::Color.color_name.titleize }
+    weight_50 { Faker::Color.hex_color }
+    weight_100 { Faker::Color.hex_color }
+    weight_200 { Faker::Color.hex_color }
+    weight_300 { Faker::Color.hex_color }
+    weight_400 { Faker::Color.hex_color }
+    weight_500 { Faker::Color.hex_color }
+    weight_600 { Faker::Color.hex_color }
+    weight_700 { Faker::Color.hex_color }
+    weight_800 { Faker::Color.hex_color }
+    weight_900 { Faker::Color.hex_color }
+    weight_950 { Faker::Color.hex_color }
+  end
+end
diff --git a/spec/models/color_scale_spec.rb b/spec/models/color_scale_spec.rb
@@ -0,0 +1,35 @@
+require "rails_helper"
+
+RSpec.describe ColorScale, type: :model do
+  describe "self.find_or_create_default" do
+    it "should be idempotent" do
+      expect {
+        ColorScale.find_or_create_default
+      }.to change(ColorScale, :count).by(1)
+
+      expect {
+        ColorScale.find_or_create_default
+      }.not_to change(ColorScale, :count)
+    end
+  end
+
+  describe "#weights" do
+    it "should return a hash of all weights" do
+      color_scale = FactoryBot.build(:color_scale)
+
+      expect(color_scale.weights).to eq(
+        "50" => color_scale.weight_50,
+        "100" => color_scale.weight_100,
+        "200" => color_scale.weight_200,
+        "300" => color_scale.weight_300,
+        "400" => color_scale.weight_400,
+        "500" => color_scale.weight_500,
+        "600" => color_scale.weight_600,
+        "700" => color_scale.weight_700,
+        "800" => color_scale.weight_800,
+        "900" => color_scale.weight_900,
+        "950" => color_scale.weight_950
+      )
+    end
+  end
+end
