Add column color names

app/assets/stylesheets/_global.css

@@ -209,14 +209,6 @@
   /* Colors: Cards */
   --color-card-default: oklch(var(--lch-blue-dark));
   --color-card-complete: var(--color-ink-darker);
-  --color-card-1: oklch(var(--lch-ink-medium));
-  --color-card-2: oklch(var(--lch-uncolor-medium));
-  --color-card-3: oklch(var(--lch-yellow-medium));
-  --color-card-4: oklch(var(--lch-lime-medium));
-  --color-card-5: oklch(var(--lch-aqua-medium));
-  --color-card-6: oklch(var(--lch-violet-medium));
-  --color-card-7: oklch(var(--lch-purple-medium));
-  --color-card-8: oklch(var(--lch-pink-medium));
 
   /* Colors: Syntax highlighting */
   --color-code-token__att: oklch(var(--lch-blue-dark));

app/helpers/cards_helper.rb

@@ -9,7 +9,7 @@ module CardsHelper
 
     tag.article \
       id: id,
-      style: "--card-color: #{card.color}; view-transition-name: #{id}",
+      style: "--card-color: #{card.color[:value]}; view-transition-name: #{id}",
       class: classes,
       **options,
       &block

app/helpers/messages_helper.rb

@@ -2,7 +2,7 @@ module MessagesHelper
   def messages_tag(card, &)
     turbo_frame_tag dom_id(card, :messages),
       class: "comments gap center",
-      style: "--card-color: #{card.color}",
+      style: "--card-color: #{card.color[:value]}",
       role: "group", aria: { label: "Messages" },
       data: {
         controller: "created-by-current-user",

app/helpers/notifications_helper.rb

@@ -29,7 +29,7 @@ module NotificationsHelper
       link_to(notification,
         class: [ "card card--notification", { "card--closed": notification.card.closed? }, { "unread": !notification.read? } ],
         data: { turbo_frame: "_top", badge_target: "unread", action: "badge#update dialog#close" },
-        style: { "--card-color:": notification.card.color },
+        style: { "--card-color:": notification.card.color[:value] },
         &)
     end
   end

app/models/card/colored.rb

@@ -1,24 +1,25 @@
 module Card::Colored
   extend ActiveSupport::Concern
 
-  COLORS = %w[
-    var(--color-card-1)
-    var(--color-card-2)
-    var(--color-card-3)
-    var(--color-card-4)
-    var(--color-card-5)
-    var(--color-card-6)
-    var(--color-card-7)
-    var(--color-card-8)
+  COLORS = [
+    { name: "Blue", value: "var(--color-card-default)" },
+    { name: "Gray", value: "oklch(var(--lch-ink-dark))" },
+    { name: "Tan", value: "oklch(var(--lch-uncolor-medium))" },
+    { name: "Yellow", value: "oklch(var(--lch-yellow-medium))" },
+    { name: "Lime", value: "oklch(var(--lch-lime-medium))" },
+    { name: "Aqua", value: "oklch(var(--lch-aqua-medium))" },
+    { name: "Violet", value: "oklch(var(--lch-violet-medium))" },
+    { name: "Purple", value: "oklch(var(--lch-purple-medium))" },
+    { name: "Pink", value: "oklch(var(--lch-pink-medium))" }
   ]
-  DEFAULT_COLOR = "var(--color-card-default)"
+  DEFAULT_COLOR = COLORS.first
 
   def color
-    color_from_column || DEFAULT_COLOR
-  end
-
-  private
-    def color_from_column
-      column&.color&.presence
+    if column&.color.present?
+      found = COLORS.find { |c| c[:value] == column.color }
+      return found || { name: column.color, value: column.color }
+    else
+      DEFAULT_COLOR
     end
+  end
 end

app/models/column.rb

@@ -4,7 +4,7 @@ class Column < ApplicationRecord
   belongs_to :board, touch: true
   has_many :cards, dependent: :nullify
 
-  before_validation    -> { self.color ||= Card::DEFAULT_COLOR }
+  before_validation    -> { self.color ||= Card::DEFAULT_COLOR[:value] }
   after_save_commit    -> { cards.touch_all }, if: -> { saved_change_to_name? || saved_change_to_color? }
   after_destroy_commit -> { board.cards.touch_all }
 end

app/views/boards/show/menu/_column_form.html.erb

@@ -3,11 +3,11 @@
         required: true, autocomplete: "off", pattern: ".*\\S.*", title: "Column name cannot be blank", data: { action: "focus->form#select" } %>
 
   <div class="color-picker__colors">
-    <% ([Card::DEFAULT_COLOR] + Card::COLORS).each do |color| %>
-      <label class="btn txt-small borderless" style="--btn-background: <%= color %>" title="<%= color %>">
-        <%= form.radio_button :color, color, checked: (column.color == color || (column.new_record? && color == Card::DEFAULT_COLOR)) %>
+    <% (Card::COLORS).each do |color| %>
+      <label class="btn txt-small borderless" style="--btn-background: <%= color[:value] %>" title="<%= color[:name] %>">
+        <%= form.radio_button :color, color[:value], checked: (column.color == color[:value] || (column.new_record? && color[:value] == Card::DEFAULT_COLOR[:value])) %>
         <%= icon_tag "check", class: "checked" %>
-        <span class="for-screen-reader"><%= color %></span>
+        <span class="for-screen-reader"><%= color[:name] %></span>
       </label>
     <% end %>
   </div>

app/views/cards/_container.html.erb

@@ -1,5 +1,5 @@
 <% cache card do %>
-  <section id="<%= dom_id(card, :card_container) %>" class="card-perma" style="--card-color: <%= card.color %>;">
+  <section id="<%= dom_id(card, :card_container) %>" class="card-perma" style="--card-color: <%= card.color[:value] %>;">
     <div class="card-perma__actions card-perma__actions--left">
       <%= render "cards/container/gild", card: card if card.published? && !card.closed? %>
       <%= render "cards/container/image", card: card %>

app/views/events/event/_layout.html.erb

@@ -1,7 +1,7 @@
 <%= link_to event.notifiable_target,
       id: dom_id(event, "timelined"),
       class: "event event--#{ event.action } #{ "golden-effect" if event.card.golden? } center-block flex flex-column full-width align-start justify-start position-relative",
-      style: "--card-color: #{ card.closed? ? "var(--color-card-complete)" : card.color };",
+      style: "--card-color: #{ card.closed? ? "var(--color-card-complete)" : card.color[:value] };",
       target: "_top",
       data: {
         related_element_target: "related",

app/views/public/cards/show.html.erb

@@ -19,7 +19,7 @@
 <% end %>
 
 <section id="<%= dom_id(@card, :card_container) %>"
-    class="card-perma card-perma--public" data-controller="lightbox" style="--card-color: <%= @card.color %>;">
+  class="card-perma card-perma--public" data-controller="lightbox" style="--card-color: <%= @card.color[:value] %>;">
   <div class="card-perma__bg">
     <%= card_article_tag @card, class: "card" do %>
       <header class="card__header">

test/models/column_test.rb

@@ -4,7 +4,7 @@ class ColumnTest < ActiveSupport::TestCase
   test "creates column with default color when color not provided" do
     column = boards(:writebook).columns.create!(name: "New Column")
 
-    assert_equal Card::DEFAULT_COLOR, column.color
+    assert_equal Card::DEFAULT_COLOR[:value], column.color
   end
 
   test "touch all the cards when the name or color changes" do