DRY up domain colors (#575)

* Add DomainTheme to lib and reference it for colors

* Remove hard-coded colors and replace w calls to DomainTheme.bg_class_for

* Replace button tailwind classes w btn btn-danger-outline

* Use tagging_label partial to show sector and category buttons

* Adjust sector word to Service populations, and change taggings index to match format

Author: maebeale

app/controllers/taggings_controller.rb

@@ -44,10 +44,11 @@ def matrix
 		# ------------------------------------------------------------------
 		@model_heatmap_stats = {}
 
-		Tag::TAGGABLE_MODELS.each do |key, model_class|
+		Tag::TAGGABLE_META.each do |key, data|
+			klass = data[:klass]
 			@model_heatmap_stats[key] = { sector: {}, category: {} }
 
-			model_class
+			klass
 				.published
 				.joins(:sectors)
 				.group("sectors.id")
@@ -56,7 +57,7 @@ def matrix
 				@model_heatmap_stats[key][:sector][sector_id] = count
 			end
 
-			model_class
+			klass
 				.published
 				.joins(:categories)
 				.group("categories.id")

app/decorators/facilitator_decorator.rb

@@ -37,13 +37,13 @@ def badges
     years = member_since ? (Time.zone.now.year - member_since.year) : 0
     badges = []
     badges << ["Legacy Facilitator (10+ years)", "yellow"] if years >= 10
-    badges << ["Seasoned Facilitator (3-10 years)", "gray"] if member_since.present? && years >= 3
+    badges << ["Seasoned Facilitator (3-10 years)", DomainTheme.bg_class_for(:facilitators)] if member_since.present? && years >= 3
     badges << ["New Facilitator (<3 years)", "green"] if member_since.present? && years < 3
     badges << ["Spotlighted Facilitator", "gray"] if stories_as_spotlighted_facilitator
-    badges << ["Events Attended", "blue"] if user.events.any?
-    badges << ["Workshop Author", "indigo"] if user.workshops.any? # indigo
-    badges << ["Story Author", "rose"] if user.stories_as_creator.any? # pink
-    badges << ["Sector Leader", "purple"] if sectorable_items.where(is_leader: true).any?
+    badges << ["Events Attended", DomainTheme.bg_class_for(:events)] if user.events.any?
+    badges << ["Workshop Author", DomainTheme.bg_class_for(:workshops)] if user.workshops.any? # indigo
+    badges << ["Story Author", DomainTheme.bg_class_for(:stories)] if user.stories_as_creator.any? # pink
+    badges << ["Sector Leader", DomainTheme.bg_class_for(:sectors)] if sectorable_items.where(is_leader: true).any?
     badges << ["Blog Contributor", "orange"] if true # || user.respond_to?(:blogs) && user.blogs.any? # red
     badges
   end

app/helpers/tag_matrix_helper.rb

@@ -27,64 +27,19 @@ def tag_link_for(model, tag:, type:)
 	def heatmap_class_for(count, model_key:, type:, quantiles:)
 		return "bg-white" if count.zero?
 
-		q = quantiles[model_key][type]
-		return base_color(model_key, 200) if q.nil?
-
+		q = quantiles.dig(model_key, type)
 		shade =
-			if count <= q[:q20]
-				50
-			elsif count <= q[:q40]
-				100
-			elsif count <= q[:q60]
+			if q.nil?
 				200
-			elsif count <= q[:q80]
-				300
-			else
-				400
+			elsif count <= q[:q20] then 50
+			elsif count <= q[:q40] then 100
+			elsif count <= q[:q60] then 200
+			elsif count <= q[:q80] then 300
+			else 400
 			end
 
-		base_color(model_key, shade)
+		base_color = DomainTheme::COLORS[model_key] || :gray
+		"bg-#{base_color}-#{shade}"
 	end
 
-	def base_color(model_key, shade)
-		color = Tag::TAGGABLE_COLORS.fetch(model_key, :gray)
-		{
-			indigo:  {
-				50 => "bg-indigo-50", 100 => "bg-indigo-100",
-				200 => "bg-indigo-200", 300 => "bg-indigo-300", 400 => "bg-indigo-400"
-			},
-			violet: {
-				50 => "bg-violet-50", 100 => "bg-violet-100",
-				200 => "bg-violet-200", 300 => "bg-violet-300", 400 => "bg-violet-400"
-			},
-			orange: {
-				50 => "bg-orange-50", 100 => "bg-orange-100",
-				200 => "bg-orange-200", 300 => "bg-orange-300", 400 => "bg-orange-400"
-			},
-			rose: {
-				50 => "bg-rose-50", 100 => "bg-rose-100",
-				200 => "bg-rose-200", 300 => "bg-rose-300", 400 => "bg-rose-400"
-			},
-			blue: {
-				50 => "bg-blue-50", 100 => "bg-blue-100",
-				200 => "bg-blue-200", 300 => "bg-blue-300", 400 => "bg-blue-400"
-			},
-			sky: {
-				50 => "bg-sky-50", 100 => "bg-sky-100",
-				200 => "bg-sky-200", 300 => "bg-sky-300", 400 => "bg-sky-400"
-			},
-			cyan: {
-				50 => "bg-cyan-50", 100 => "bg-cyan-100",
-				200 => "bg-cyan-200", 300 => "bg-cyan-300", 400 => "bg-cyan-400"
-			},
-			emerald: {
-				50 => "bg-emerald-50", 100 => "bg-emerald-100",
-				200 => "bg-emerald-200", 300 => "bg-emerald-300", 400 => "bg-emerald-400"
-			},
-			gray: {
-				50 => "bg-gray-50", 100 => "bg-gray-100",
-				200 => "bg-gray-200", 300 => "bg-gray-300", 400 => "bg-gray-400"
-			}
-		}.dig(color, shade) || "bg-gray-100"
-	end
 end

app/helpers/taggings_helper.rb

@@ -1,7 +1,7 @@
 module TaggingsHelper
 
 	def tagged_index_path(type, sector_names:, category_names:)
-		model = Tag::TAGGABLE_MODELS.fetch(type)
+		klass = Tag::TAGGABLE_META.fetch(type)[:klass]
 
 		params = {}
 
@@ -15,7 +15,7 @@ def tagged_index_path(type, sector_names:, category_names:)
 			params[:categories] = hashify_ids(category_ids)
 		end
 
-		polymorphic_path(model, params)
+		polymorphic_path(klass, params)
 	end
 
 	private

app/models/tag.rb

@@ -1,40 +1,58 @@
 class Tag
-	TAGGABLE_MODELS = {
-		workshops:      Workshop,
-		resources:      Resource,
-		community_news: CommunityNews,
-		stories:        Story,
-		events:         Event,
-		facilitators:   Facilitator,
-		projects:       ::Project,
-		quotes:         Quote
-	}
+	TAGGABLE_META = {
+		workshops: {
+			icon: "🎨",
+			path: -> { Rails.application.routes.url_helpers.workshops_path },
+			klass: Workshop
+		},
+		resources: {
+			icon: "📚",
+			path: -> { Rails.application.routes.url_helpers.resources_path },
+			klass: Resource
+		},
+		community_news: {
+			icon: "📰",
+			path: -> { Rails.application.routes.url_helpers.community_news_index_path },
+			klass: CommunityNews
+		},
+		stories: {
+			icon: "🗣️",
+			path: -> { Rails.application.routes.url_helpers.stories_path },
+			klass:  Story
+		},
+		events: {
+			icon: "📆",
+			path: -> { Rails.application.routes.url_helpers.events_path },
+			klass: Event
+		},
+		facilitators: {
+			icon: "🧑‍🎨",
+			path: -> { Rails.application.routes.url_helpers.facilitators_path },
+			klass: Facilitator
+		},
+		projects: {
+			icon: "🏫",
+			path: -> { Rails.application.routes.url_helpers.projects_path },
+			klass: ::Project
+		},
+		quotes: {
+			icon: "💬",
+			path: -> { Rails.application.routes.url_helpers.quotes_path },
+			klass: Quote
+		}
+	}.freeze
 
-	TAGGABLE_COLORS = {
-		workshops:      :indigo,
-		workshops_variations: :purple,
-		workshop_logs: :teal,
-		resources:      :violet,
-		community_news: :orange,
-		stories:        :rose,
-		events:         :blue,
-		facilitators:   :sky,
-		projects:       :emerald,
-		quotes:         :slate,
-		tags:           :lime
-	}
+	def self.dashboard_card_for(key)
+		meta = TAGGABLE_META.fetch(key)
 
-	def self.color_for(key)
-		TAGGABLE_COLORS[key.to_sym]
+		{
+			title: key.to_s.humanize,
+			path: meta[:path].call,
+			icon: meta[:icon],
+			bg_color: DomainTheme.bg_class_for(key),
+			hover_bg_color: DomainTheme.bg_class_for(key, intensity: 100),
+			text_color: "text-gray-800"
+		}
 	end
 
-	def self.bg_class_for(key, intensity: 50)
-		color = color_for(key)
-		color ? "bg-#{color}-#{intensity}" : "bg-gray-50"
-	end
-
-	def self.text_class_for(key, intensity: 700)
-		color = color_for(key)
-		color ? "text-#{color}-#{intensity}" : "text-gray-700"
-	end
 end

app/services/tagging_search_service.rb

@@ -82,7 +82,7 @@ def self.call(sector_names:, category_names: nil,
 	end
 
 	def self.empty_results(per_page)
-		Tag::TAGGABLE_MODELS.keys.index_with do
+		Tag::TAGGABLE_META.keys.index_with do
 			WillPaginate::Collection.create(1, per_page || 9, 0) { |pager| pager.replace([]) }
 		end
 	end

app/views/categories/_tagging_label.html.erb

@@ -1,17 +1,19 @@
 <% category ||= nil %>
 <% name_only ||= false %>
+<% bg_color ||= DomainTheme.bg_class_for(:sectors) %>
+<%# bg_hover_color ||= DomainTheme.bg_class_for(:sectors, hover: true) %>
+<% bg_hover_color ||= "bg-lime-200" %>
 
 <% if category %>
 
   <%= link_to taggings_path(category_names: category.name),
               class: "inline-flex items-center
                       rounded-md
-                      border border-gray-300
-                      bg-white
+                      border border-gray-300 hover:border-gray-400
+                      #{ bg_color } hover:#{ bg_hover_color }
                       text-gray-500
                       px-3 py-1
                       text-sm font-medium
-                      hover:bg-gray-100 hover:border-gray-400
                       transition" do %>
     <%= "#{category.category_type&.name}: " if !name_only && category.category_type %><%= category.name %>
   <% end %>

app/views/community_news/_form.html.erb

@@ -63,7 +63,7 @@
     <% if @community_news.persisted? && current_user&.super_user? %>
       <%= link_to "Delete", @community_news, method: :delete,
                   data: { confirm: "Are you sure?" },
-                  class: "inline-flex items-center px-4 py-2 border border-red-300 text-red-700 bg-white hover:bg-red-50 rounded-lg transition" %>
+                  class: "btn btn-danger-outline" %>
     <% end %>
 
     <%= link_to "Cancel", community_news_index_path,

app/views/community_news/index.html.erb

@@ -1,6 +1,6 @@
 <div class="min-h-screen py-8">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="bg-orange-50 border border-gray-200 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-200 p-6">
+    <div class="<%= DomainTheme.bg_class_for(:community_news) %> border border-gray-200 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-200 p-6">
       <!-- Header Row -->
       <div class="w-full">
         <div class="flex items-start justify-between mb-6">

app/views/community_news/show.html.erb

@@ -2,7 +2,7 @@
 <% community_news_title = ERB::Util.url_encode(@community_news.title) %>
 <div class="min-h-screen py-8">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-    <div class="bg-orange-50 border border-gray-200 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-200 p-6">
+    <div class="<%= DomainTheme.bg_class_for(:community_news) %> border border-gray-200 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-200 p-6">
       <!-- Top Right Utility Buttons -->
       <div class="text-right mb-4 space-x-1">
         <span class="inline-block text-sm">