From 788d7f01c6df1d2e5c27b6f0231f88bf27b338c3 Mon Sep 17 00:00:00 2001
From: Rainer Dema <rainer.dema@gmail.com>
Date: Fri, 20 Oct 2023 18:15:16 +0200
Subject: [PATCH] Convert camelCase to kebab-case for color names in tailwind
 configuration

This commit transitions the naming convention for our custom Tailwind color
classes from camelCase to kebab-case.
This shift aligns our custom classes with the standard Tailwind CSS naming
convention, ensuring consistency and clarity.
---
 admin/app/components/solidus_admin/ui/badge/component.rb | 4 ++--
 admin/app/components/solidus_admin/ui/toast/component.rb | 2 +-
 admin/app/views/solidus_admin/base/unauthorized.html.erb | 2 +-
 admin/config/solidus_admin/tailwind.config.js.erb        | 8 ++++----
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/admin/app/components/solidus_admin/ui/badge/component.rb b/admin/app/components/solidus_admin/ui/badge/component.rb
index bbc5d0ad976..332cf74f2cc 100644
--- a/admin/app/components/solidus_admin/ui/badge/component.rb
+++ b/admin/app/components/solidus_admin/ui/badge/component.rb
@@ -4,12 +4,12 @@ class SolidusAdmin::UI::Badge::Component < SolidusAdmin::BaseComponent
   include ViewComponent::InlineTemplate
 
   COLORS = {
-    graphite_light: "text-black bg-graphiteLight",
+    graphite_light: "text-black bg-graphite-light",
     red: 'text-red-500 bg-red-100',
     green: 'text-forest bg-seafoam',
     blue: 'text-blue bg-sky',
     black: 'text-white bg-black',
-    yellow: 'text-orange bg-papayaWhip',
+    yellow: 'text-orange bg-papaya-whip',
   }.freeze
 
   SIZES = {
diff --git a/admin/app/components/solidus_admin/ui/toast/component.rb b/admin/app/components/solidus_admin/ui/toast/component.rb
index c8747784a49..15d4ebc8afb 100644
--- a/admin/app/components/solidus_admin/ui/toast/component.rb
+++ b/admin/app/components/solidus_admin/ui/toast/component.rb
@@ -3,7 +3,7 @@
 class SolidusAdmin::UI::Toast::Component < SolidusAdmin::BaseComponent
   SCHEMES = {
     default: %w[
-      bg-fullBlack text-white
+      bg-full-black text-white
     ],
     error: %w[
       bg-red-500 text-white
diff --git a/admin/app/views/solidus_admin/base/unauthorized.html.erb b/admin/app/views/solidus_admin/base/unauthorized.html.erb
index b47118192b0..ed2af373d45 100644
--- a/admin/app/views/solidus_admin/base/unauthorized.html.erb
+++ b/admin/app/views/solidus_admin/base/unauthorized.html.erb
@@ -1,4 +1,4 @@
 <div class="p-4">
-  <h1 class="text-3xl font-semibold text-solidusRed mb-4"><%= t('solidus_admin.errors.authorization.access_denied.title') %></h1>
+  <h1 class="text-3xl font-semibold text-solidus-red mb-4"><%= t('solidus_admin.errors.authorization.access_denied.title') %></h1>
   <p class="text-lg text-gray-700"><%= t('solidus_admin.errors.authorization.access_denied.description') %></p>
 </div>
diff --git a/admin/config/solidus_admin/tailwind.config.js.erb b/admin/config/solidus_admin/tailwind.config.js.erb
index 2e29c35a048..b7cdcd6015e 100644
--- a/admin/config/solidus_admin/tailwind.config.js.erb
+++ b/admin/config/solidus_admin/tailwind.config.js.erb
@@ -18,10 +18,10 @@ module.exports = {
         current: "currentColor",
 
         // Primary palette
-        solidusRed: "#ef3023",
+        'solidus-red': "#ef3023",
         black: "#222222",
         graphite: "#c7ccc7",
-        graphiteLight: "#d8dad8",
+        'graphite-light': "#d8dad8",
         sand: "#f5f3f0",
         white: "#ffffff",
 
@@ -37,10 +37,10 @@ module.exports = {
         sky: "#cbdff1",
         seafoam: "#c1e0de",
         dune: "#e6bf9b",
-        fullBlack: "#000000",
+        'full-black': "#000000",
 
         // Extra colors (not part of the original palette)
-        papayaWhip: "#f9e3d9",
+        'papaya-whip': "#f9e3d9",
 
         // UI Red
         red: {