From 828df3ed827a42b4c58f1265fcd4d8b2a2198a8d Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Wed, 2 Aug 2023 16:04:48 +1000
Subject: [PATCH 01/12] Consistently use red in forms

Errors and required fields now use the colour from the palette. The error messages in the old design are a bit darker now, but I think it's clearer. And it makes the new design look way better.

Also snuck in a tiny padding tweak.
---
 app/webpacker/css/admin/components/messages.scss | 6 +++---
 app/webpacker/css/admin/openfoodnetwork.scss     | 6 +++---
 app/webpacker/css/admin/shared/forms.scss        | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/webpacker/css/admin/components/messages.scss b/app/webpacker/css/admin/components/messages.scss
index ff50aa2486..61dd751a55 100644
--- a/app/webpacker/css/admin/components/messages.scss
+++ b/app/webpacker/css/admin/components/messages.scss
@@ -1,14 +1,14 @@
 .errorExplanation {
-  padding: 5px;
+  padding: 10px;
   border: 1px solid very-light($color-error, 12);
   background-color: very-light($color-error, 6);
   border-radius: 3px;
-  color: very-light($color-error, 30);
+  color: $color-error;
   margin-bottom: 15px;
 
   h2 {
     font-size: 140%;
-    color: very-light($color-error, 30);
+    color: $color-error;
     margin-bottom: 5px;
   }
 
diff --git a/app/webpacker/css/admin/openfoodnetwork.scss b/app/webpacker/css/admin/openfoodnetwork.scss
index e396dd1802..9fa0961d4e 100644
--- a/app/webpacker/css/admin/openfoodnetwork.scss
+++ b/app/webpacker/css/admin/openfoodnetwork.scss
@@ -221,12 +221,12 @@ table#listing_enterprise_groups {
   h4,
   h5,
   h6 {
-    color: $warning-red;
+    color: $color-error;
   }
 }
 
 .field_with_errors > input {
-  border-color: red;
+  border-color: $color-error;
 }
 
 // textAngular wysiwyg
@@ -269,7 +269,7 @@ text-angular {
 }
 
 span.required {
-  color: red;
+  color: $color-5;
   font-size: 110%;
 }
 
diff --git a/app/webpacker/css/admin/shared/forms.scss b/app/webpacker/css/admin/shared/forms.scss
index bd5274bced..6e956df095 100644
--- a/app/webpacker/css/admin/shared/forms.scss
+++ b/app/webpacker/css/admin/shared/forms.scss
@@ -100,15 +100,15 @@ span.info {
   &.withError {
     .field_with_errors {
       label {
-        color: very-light($color-error, 30);
+        color: $color-error;
       }
 
       input {
-        border-color: very-light($color-error, 15);
+        border-color: $color-error;
       }
     }
     .formError {
-      color: very-light($color-error, 30);
+      color: $color-error;
       font-style: italic;
       font-size: 85%;
     }

From 9207724779391bd6f0d332060519b504e296d911 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Wed, 2 Aug 2023 16:25:47 +1000
Subject: [PATCH 02/12] Copy legacy variables

I'd like to go through and remove these, but it will have to happen another day.
---
 app/webpacker/css/admin_v3/all.scss       |  2 +-
 app/webpacker/css/admin_v3/variables.scss | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 app/webpacker/css/admin_v3/variables.scss

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index 4cbc555727..5aaa0610bb 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -20,7 +20,7 @@
 @import "../admin/globals/functions";
 @import "globals/palette"; // admin_v3
 @import "globals/variables"; // admin_v3
-@import "../admin/variables";
+@import "variables"; //admin_v3
 @import "../admin/globals/mixins";
 @import "mixins"; // admin_v3
 
diff --git a/app/webpacker/css/admin_v3/variables.scss b/app/webpacker/css/admin_v3/variables.scss
new file mode 100644
index 0000000000..89fd516f2b
--- /dev/null
+++ b/app/webpacker/css/admin_v3/variables.scss
@@ -0,0 +1,18 @@
+// Legacy admin variables and colours
+
+$spree-green: #9fc820;
+$spree-blue: #5498da;
+$spree-light-blue: #eff5fc;
+
+$warning-red: $color-5;
+$warning-orange: $color-5;
+$bright-orange: #ffa92e;
+$medium-grey: #919191;
+$pale-blue: #cee1f4;
+$light-grey: #ccc;
+
+$admin-table-border: $pale-blue;
+
+$modal-close-button-color: #de6060;
+$modal-close-button-hover-color: #bf4545;
+$disabled-button: $light-grey;

From bf9cd09462eb68d1ee1130bd15d87921fe0bd9e4 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Wed, 2 Aug 2023 16:28:31 +1000
Subject: [PATCH 03/12] Remove dependence on darkswarm variables

There were all sorts of dependencies hiding in there, and it was overwriting some of the admin variables. Better to keep things separate and simple.

I discovered that there was one legitimate reason for importing them though: for styling the trix editor. I can't think of a good way to safely import them without affecting the other variables, so I just hardcoded the colours for now.
---
 .../pagination_component/pagination_component.scss        | 4 ++--
 .../search_input_component/search_input_component.scss    | 2 +-
 app/components/selector_component/selector_component.scss | 8 ++++----
 .../selector_with_filter_component.scss                   | 4 ++--
 app/webpacker/css/admin/change_type_form.scss             | 1 -
 app/webpacker/css/admin/components/input.scss             | 4 +---
 app/webpacker/css/admin/components/save_bar.scss          | 2 +-
 app/webpacker/css/admin/globals/palette.scss              | 4 ++++
 app/webpacker/css/admin/products_v3.scss                  | 7 +++++++
 app/webpacker/css/admin/trix.scss                         | 6 +++---
 app/webpacker/css/admin_v3/all.scss                       | 2 +-
 app/webpacker/css/admin_v3/globals/palette.scss           | 2 +-
 app/webpacker/css/admin_v3/variables.scss                 | 1 -
 13 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/app/components/pagination_component/pagination_component.scss b/app/components/pagination_component/pagination_component.scss
index 437e0a55d1..ad9d17fe2a 100644
--- a/app/components/pagination_component/pagination_component.scss
+++ b/app/components/pagination_component/pagination_component.scss
@@ -16,7 +16,7 @@ nav {
 
       &.inactive {
         cursor: default;
-        color: $disabled-dark;
+        color: $dark-grey;
       }
     }
 
@@ -52,7 +52,7 @@ nav {
       }
 
       .pagination-gap {
-        color: $disabled-dark;
+        color: $dark-grey;
       }
 
       .pagination-page {
diff --git a/app/components/search_input_component/search_input_component.scss b/app/components/search_input_component/search_input_component.scss
index add821dd34..4de3191239 100644
--- a/app/components/search_input_component/search_input_component.scss
+++ b/app/components/search_input_component/search_input_component.scss
@@ -1,5 +1,5 @@
 .search-input {
-  border: 1px solid $disabled-light;
+  border: 1px solid $light-grey;
   height: 3em;
   display: flex;
   line-height: 3em;
diff --git a/app/components/selector_component/selector_component.scss b/app/components/selector_component/selector_component.scss
index e5ea18583e..9faddfe4d2 100644
--- a/app/components/selector_component/selector_component.scss
+++ b/app/components/selector_component/selector_component.scss
@@ -2,7 +2,7 @@
   position: relative;
 
   .selector-main {
-    border: 1px solid $disabled-light;
+    border: 1px solid $light-grey;
     height: 3em;
     position: relative;
     cursor: pointer;
@@ -30,7 +30,7 @@
         height: 0;
         border-left: 5px solid transparent;
         border-right: 5px solid transparent;
-        border-top: 5px solid $disabled-light;
+        border-top: 5px solid $light-grey;
       }
     }
   }
@@ -42,7 +42,7 @@
     z-index: 1;
     background-color: white;
     margin-top: -1px;
-    border: 1px solid $disabled-light;
+    border: 1px solid $light-grey;
 
     .selector-items {
       overflow-y: auto;
@@ -51,7 +51,7 @@
       .selector-item {
         padding-left: 10px;
         padding-right: 10px;
-        border-bottom: 1px solid $disabled-light;
+        border-bottom: 1px solid $light-grey;
         position: relative;
         height: 3em;
         line-height: 3em;
diff --git a/app/components/selector_with_filter_component/selector_with_filter_component.scss b/app/components/selector_with_filter_component/selector_with_filter_component.scss
index 88f9e6c5f2..cf82bba9a8 100644
--- a/app/components/selector_with_filter_component/selector_with_filter_component.scss
+++ b/app/components/selector_with_filter_component/selector_with_filter_component.scss
@@ -37,11 +37,11 @@
 
   .selector-wrapper {
     .super-selector-search {
-      border-bottom: 1px solid $disabled-light;
+      border-bottom: 1px solid $light-grey;
       padding: 10px 5px;
 
       input {
-        border: 1px solid $disabled-light;
+        border: 1px solid $light-grey;
         box-sizing: border-box;
         border-radius: 4px;
         width: 100%;
diff --git a/app/webpacker/css/admin/change_type_form.scss b/app/webpacker/css/admin/change_type_form.scss
index 080a46b63b..ad2e4cc921 100644
--- a/app/webpacker/css/admin/change_type_form.scss
+++ b/app/webpacker/css/admin/change_type_form.scss
@@ -1,4 +1,3 @@
-@import "../darkswarm/branding";
 @import "../darkswarm/mixins";
 
 #change_type {
diff --git a/app/webpacker/css/admin/components/input.scss b/app/webpacker/css/admin/components/input.scss
index afc58cbfe9..1c1a847e56 100644
--- a/app/webpacker/css/admin/components/input.scss
+++ b/app/webpacker/css/admin/components/input.scss
@@ -1,9 +1,7 @@
-@import "../../darkswarm/branding";
-
 .container {
   input {
     &[readonly] {
-      background-color: $disabled-light;
+      background-color: $light-grey;
       cursor: default;
     }
   }
diff --git a/app/webpacker/css/admin/components/save_bar.scss b/app/webpacker/css/admin/components/save_bar.scss
index b60482de11..649e129ea5 100644
--- a/app/webpacker/css/admin/components/save_bar.scss
+++ b/app/webpacker/css/admin/components/save_bar.scss
@@ -13,7 +13,7 @@
     color: $spree-blue;
 
     &.error {
-      color: $red-500;
+      color: $color-error;
     }
   }
 
diff --git a/app/webpacker/css/admin/globals/palette.scss b/app/webpacker/css/admin/globals/palette.scss
index 0c4bf1611c..776dc9cda8 100644
--- a/app/webpacker/css/admin/globals/palette.scss
+++ b/app/webpacker/css/admin/globals/palette.scss
@@ -5,3 +5,7 @@ $color-3:                        #5498DA !default;    // Light Blue
 $color-4:                        #6788A2 !default;    // Dark Blue
 $color-5:                        #C60F13 !default;    // Red
 $color-6:                        #FF9300 !default;    // Yellow
+
+$dark-grey: #333;
+$light-grey: #ddd;
+$near-black: #222;
diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss
index 1a08f8a966..edd198fde0 100644
--- a/app/webpacker/css/admin/products_v3.scss
+++ b/app/webpacker/css/admin/products_v3.scss
@@ -19,6 +19,13 @@
     padding: 4px;
     border-collapse: separate; // This is needed for the outer padding. Also should be helpful to give more flexibility of borders between rows.
 
+    tr:hover {
+      th,
+      td {
+        background-color: $light-grey;
+      }
+    }
+
     th,
     td {
       padding: $padding-tbl-cell;
diff --git a/app/webpacker/css/admin/trix.scss b/app/webpacker/css/admin/trix.scss
index b07977c234..7ee927a2f3 100644
--- a/app/webpacker/css/admin/trix.scss
+++ b/app/webpacker/css/admin/trix.scss
@@ -2,9 +2,9 @@ trix-toolbar [data-trix-button-group="file-tools"] {
   display: none;
 }
 
-// Match the rendering into the shopfront
+// Match the rendering into the shopfront (see ../darkswarm/)
 trix-editor {
-  color: $darker-grey;
+  color: #222;
 
   ol,
   ul {
@@ -12,7 +12,7 @@ trix-editor {
   }
 
   a {
-    color: $ofn-brand;
+    color: #f27052;
   }
 
   // Copy/pasted from _type.scss
diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index 5aaa0610bb..4cbc555727 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -20,7 +20,7 @@
 @import "../admin/globals/functions";
 @import "globals/palette"; // admin_v3
 @import "globals/variables"; // admin_v3
-@import "variables"; //admin_v3
+@import "../admin/variables";
 @import "../admin/globals/mixins";
 @import "mixins"; // admin_v3
 
diff --git a/app/webpacker/css/admin_v3/globals/palette.scss b/app/webpacker/css/admin_v3/globals/palette.scss
index 560e1074ac..a8109f55f9 100644
--- a/app/webpacker/css/admin_v3/globals/palette.scss
+++ b/app/webpacker/css/admin_v3/globals/palette.scss
@@ -8,7 +8,7 @@ $red: #c85136 !default; // Red/Orange (Mojo)
 $yellow: #ff9300 !default; // Yellow
 $mystic: #d9e8eb !default; // Mystic
 $lighter-grey: #f8f9fa !default; // Lighter grey
-$light-grey: #eff1f2 !default; // Light grey
+$light-grey: #eff1f2 !default; // Light grey (Porcelain)
 $near-black: #191c1d !default; // Near-black
 $dark-grey: #2e3132 !default; // Dark Grey
 $fair-pink: #ffefeb !default; // Fair Pink
diff --git a/app/webpacker/css/admin_v3/variables.scss b/app/webpacker/css/admin_v3/variables.scss
index 89fd516f2b..26f18c8e90 100644
--- a/app/webpacker/css/admin_v3/variables.scss
+++ b/app/webpacker/css/admin_v3/variables.scss
@@ -9,7 +9,6 @@ $warning-orange: $color-5;
 $bright-orange: #ffa92e;
 $medium-grey: #919191;
 $pale-blue: #cee1f4;
-$light-grey: #ccc;
 
 $admin-table-border: $pale-blue;
 

From 14e07e38d34b005533ce3a88987ed4a36edbbe1d Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Wed, 2 Aug 2023 17:16:46 +1000
Subject: [PATCH 04/12] Remove depdenency on darkswarm/mixins

---
 app/webpacker/css/admin/change_type_form.scss     | 2 --
 app/webpacker/css/admin/dashboard-single-ent.scss | 2 --
 app/webpacker/css/admin/welcome.scss              | 4 +---
 3 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/app/webpacker/css/admin/change_type_form.scss b/app/webpacker/css/admin/change_type_form.scss
index ad2e4cc921..1880f029eb 100644
--- a/app/webpacker/css/admin/change_type_form.scss
+++ b/app/webpacker/css/admin/change_type_form.scss
@@ -1,5 +1,3 @@
-@import "../darkswarm/mixins";
-
 #change_type {
   section {
     margin: 2em 0 0 0;
diff --git a/app/webpacker/css/admin/dashboard-single-ent.scss b/app/webpacker/css/admin/dashboard-single-ent.scss
index e2f1926c6e..93f242257b 100644
--- a/app/webpacker/css/admin/dashboard-single-ent.scss
+++ b/app/webpacker/css/admin/dashboard-single-ent.scss
@@ -1,5 +1,3 @@
-@import "../darkswarm/mixins";
-
 .dashboard_item.single-ent {
   .header {
     padding: 0.77778em 1.33333em 0.77778em 0.77778em;
diff --git a/app/webpacker/css/admin/welcome.scss b/app/webpacker/css/admin/welcome.scss
index 9f58728823..74b8dfe290 100644
--- a/app/webpacker/css/admin/welcome.scss
+++ b/app/webpacker/css/admin/welcome.scss
@@ -1,13 +1,11 @@
-@import "../darkswarm/mixins";
-
 #welcome_page {
   header {
     text-align: center;
     padding: 4em 2em;
 
-    @include fullbg;
     background-color: black;
     background-image: url("../images/home/tagline-bg.jpg");
+    background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
     margin-bottom: 2em;

From 2f801d346d9c7af2d55ee3770bc60e07a5261784 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Thu, 22 Jun 2023 15:53:00 +1000
Subject: [PATCH 05/12] Prettify some more css files

---
 .prettierignore                                |  3 ++-
 app/webpacker/css/admin/globals/functions.scss | 13 ++++++-------
 app/webpacker/css/admin/globals/palette.scss   | 12 ++++++------
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/.prettierignore b/.prettierignore
index ec07eb9993..e6c0ce1c7f 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -13,7 +13,8 @@ postcss.config.js
 
 # SCSS
 # Enabled: most of admin
-/app/webpacker/css/admin/globals/
+/app/webpacker/css/admin/globals/mixins.scss
+/app/webpacker/css/admin/globals/variables.scss
 /app/webpacker/css/admin/shared/
 /app/webpacker/css/admin_v3/globals/variables.scss
 /app/webpacker/css/darkswarm/
diff --git a/app/webpacker/css/admin/globals/functions.scss b/app/webpacker/css/admin/globals/functions.scss
index 0abf3546f6..ec66b57c56 100644
--- a/app/webpacker/css/admin/globals/functions.scss
+++ b/app/webpacker/css/admin/globals/functions.scss
@@ -1,23 +1,22 @@
 // Make color very close to white
-@function very-light($color, $adjust: 3){  
-  @if type-of($adjust) == 'number' and $adjust > 0 {
+@function very-light($color, $adjust: 3) {
+  @if type-of($adjust) == "number" and $adjust > 0 {
     @for $i from 0 through 100 {
       @if lighten($color, $i) == white and ($i - $adjust) > $adjust {
         @return lighten($color, $i - $adjust);
       }
     }
+  } @else {
+    @debug "Please correct $adjust value. It should be number and larger then 0. Currently it is '#{type-of($adjust)}' with value '#{$adjust}'";
   }
-  @else {
-    @debug "Please correct $adjust value. It should be number and larger then 0. Currently it is '#{type-of($adjust)}' with value '#{$adjust}'"
-  }
-};
+}
 
 // Quick fix for dynamic variables missing in SASS
 @function get-value($prop, $val, $search) {
   $n1: index($prop, $search);
   $n2: index($val, $search);
 
-  @if($n1) {
+  @if ($n1) {
     @return nth($val, $n1);
   } @else {
     @return nth($prop, $n2);
diff --git a/app/webpacker/css/admin/globals/palette.scss b/app/webpacker/css/admin/globals/palette.scss
index 776dc9cda8..2648d0e66e 100644
--- a/app/webpacker/css/admin/globals/palette.scss
+++ b/app/webpacker/css/admin/globals/palette.scss
@@ -1,10 +1,10 @@
 // Basic color palette for admin
-$color-1:                        #FFFFFF !default;    // White
-$color-2:                        #9FC820 !default;    // Green
-$color-3:                        #5498DA !default;    // Light Blue
-$color-4:                        #6788A2 !default;    // Dark Blue
-$color-5:                        #C60F13 !default;    // Red
-$color-6:                        #FF9300 !default;    // Yellow
+$color-1: #ffffff !default; // White
+$color-2: #9fc820 !default; // Green
+$color-3: #5498da !default; // Light Blue
+$color-4: #6788a2 !default; // Dark Blue
+$color-5: #c60f13 !default; // Red
+$color-6: #ff9300 !default; // Yellow
 
 $dark-grey: #333;
 $light-grey: #ddd;

From 01a90951214944a21854f507b3cb102527ef1965 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Thu, 22 Jun 2023 16:04:49 +1000
Subject: [PATCH 06/12] Move some variables to the palette

---
 app/webpacker/css/admin/globals/palette.scss    | 12 ++++++++++--
 app/webpacker/css/admin/variables.scss          | 10 ----------
 app/webpacker/css/admin_v3/globals/palette.scss |  8 +++++++-
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/app/webpacker/css/admin/globals/palette.scss b/app/webpacker/css/admin/globals/palette.scss
index 2648d0e66e..b591605326 100644
--- a/app/webpacker/css/admin/globals/palette.scss
+++ b/app/webpacker/css/admin/globals/palette.scss
@@ -1,7 +1,15 @@
 // Basic color palette for admin
+$spree-green: #9fc820;
+$spree-blue: #5498da;
+$spree-light-blue: #eff5fc;
+$pale-blue: #cee1f4;
+$bright-orange: #ffa92e;
+$medium-grey: #919191;
+$light-grey: #ccc;
+
 $color-1: #ffffff !default; // White
-$color-2: #9fc820 !default; // Green
-$color-3: #5498da !default; // Light Blue
+$color-2: $spree-green !default; // Green
+$color-3: $spree-blue !default; // Light Blue
 $color-4: #6788a2 !default; // Dark Blue
 $color-5: #c60f13 !default; // Red
 $color-6: #ff9300 !default; // Yellow
diff --git a/app/webpacker/css/admin/variables.scss b/app/webpacker/css/admin/variables.scss
index 19221dc04e..421d4d2326 100644
--- a/app/webpacker/css/admin/variables.scss
+++ b/app/webpacker/css/admin/variables.scss
@@ -1,16 +1,6 @@
 // Admin variables and colours
-
-$spree-green: #9fc820;
-$spree-blue: #5498da;
-$spree-light-blue: #eff5fc;
-
 $warning-red: $color-5;
 $warning-orange: $color-5;
-$bright-orange: #ffa92e;
-$medium-grey: #919191;
-$pale-blue: #cee1f4;
-$light-grey: #ccc;
-
 $admin-table-border: $pale-blue;
 
 $modal-close-button-color: #de6060;
diff --git a/app/webpacker/css/admin_v3/globals/palette.scss b/app/webpacker/css/admin_v3/globals/palette.scss
index a8109f55f9..66e557b63a 100644
--- a/app/webpacker/css/admin_v3/globals/palette.scss
+++ b/app/webpacker/css/admin_v3/globals/palette.scss
@@ -4,17 +4,23 @@ $green: #9fc820 !default; // Green
 $teal: #008397 !default; // Teal (Allports)
 $orient: #006878 !default; // Orient (Cerulean)
 $dark-blue: #004e5b !default; // Dark Blue (Sherpa)
+$pale-blue: #cee1f4; // Pale blue
 $red: #c85136 !default; // Red/Orange (Mojo)
+$bright-orange: #ffa92e; // Bright orange
 $yellow: #ff9300 !default; // Yellow
 $mystic: #d9e8eb !default; // Mystic
 $lighter-grey: #f8f9fa !default; // Lighter grey
 $light-grey: #eff1f2 !default; // Light grey (Porcelain)
-$near-black: #191c1d !default; // Near-black
+$medium-grey: #919191 !default; // Medium grey
 $dark-grey: #2e3132 !default; // Dark Grey
+$near-black: #191c1d !default; // Near-black
 $fair-pink: #ffefeb !default; // Fair Pink
 $roof-terracotta: #b83b1f !default; // Roof Terracotta
 
 // Old colour variables for backwards compatibility
+$spree-green: $green;
+$spree-blue: $teal;
+$spree-light-blue: #eff5fc;
 $color-1: $white;
 $color-2: $green;
 $color-3: $teal;

From c4a335548acffe75cc3d5ebe4d8c65697b20b91d Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Thu, 22 Jun 2023 16:10:20 +1000
Subject: [PATCH 07/12] Rename warning color variable

To match the others in the variables file.

Also `warning-orange` was unused.
---
 app/webpacker/css/admin/alert.scss            |  6 ++--
 .../css/admin/components/buttons.scss         |  2 +-
 .../css/admin/components/dialogs.scss         |  2 +-
 .../css/admin/components/jquery_dialog.scss   |  2 +-
 .../css/admin/components/table_loading.scss   |  2 +-
 app/webpacker/css/admin/dashboard_item.scss   | 28 +++++++++----------
 .../css/admin/enterprise_index_panels.scss    |  2 +-
 app/webpacker/css/admin/enterprises.scss      |  4 +--
 .../css/admin/index_panel_buttons.scss        |  2 +-
 app/webpacker/css/admin/index_panels.scss     |  4 +--
 app/webpacker/css/admin/openfoodnetwork.scss  | 12 ++++----
 app/webpacker/css/admin/orders.scss           |  6 ++--
 .../css/admin/pages/enterprise_form.scss      |  2 +-
 .../css/admin/pages/subscription_form.scss    |  2 +-
 .../css/admin/pages/subscription_review.scss  |  2 +-
 app/webpacker/css/admin/product_import.scss   |  2 +-
 .../css/admin/shared/typography.scss          |  2 +-
 app/webpacker/css/admin/sidebar-item.scss     | 12 ++++----
 app/webpacker/css/admin/variables.scss        |  3 +-
 .../css/admin/variant_overrides.scss          |  2 +-
 .../css/admin_v3/components/buttons.scss      |  2 +-
 .../css/admin_v3/shared/typography.scss       |  2 +-
 app/webpacker/css/admin_v3/variables.scss     |  3 +-
 23 files changed, 52 insertions(+), 54 deletions(-)

diff --git a/app/webpacker/css/admin/alert.scss b/app/webpacker/css/admin/alert.scss
index 267e7a8580..26ee0b2867 100644
--- a/app/webpacker/css/admin/alert.scss
+++ b/app/webpacker/css/admin/alert.scss
@@ -14,11 +14,11 @@
   }
 
   &:hover {
-    border-color: $warning-red;
-    color: $warning-red;
+    border-color: $color-warning;
+    color: $color-warning;
 
     h6 {
-      color: $warning-red;
+      color: $color-warning;
     }
   }
 }
diff --git a/app/webpacker/css/admin/components/buttons.scss b/app/webpacker/css/admin/components/buttons.scss
index c96b70b17e..c5804a76f0 100644
--- a/app/webpacker/css/admin/components/buttons.scss
+++ b/app/webpacker/css/admin/components/buttons.scss
@@ -69,7 +69,7 @@ button:not(.plain):not(.trix-button),
     }
 
     &.danger {
-      background-color: $warning-red;
+      background-color: $color-warning;
     }
     &.success {
       background-color: $spree-green;
diff --git a/app/webpacker/css/admin/components/dialogs.scss b/app/webpacker/css/admin/components/dialogs.scss
index 53bbf0153f..76b5b71dd4 100644
--- a/app/webpacker/css/admin/components/dialogs.scss
+++ b/app/webpacker/css/admin/components/dialogs.scss
@@ -23,7 +23,7 @@
   &.error {
     .message {
       .icon {
-        color: $warning-red;
+        color: $color-warning;
       }
     }
   }
diff --git a/app/webpacker/css/admin/components/jquery_dialog.scss b/app/webpacker/css/admin/components/jquery_dialog.scss
index 002139e017..f796d9afed 100644
--- a/app/webpacker/css/admin/components/jquery_dialog.scss
+++ b/app/webpacker/css/admin/components/jquery_dialog.scss
@@ -64,7 +64,7 @@ light: #ccc
 
   &:hover {
     &:before {
-      color: $warning-red;
+      color: $color-warning;
     }
   }
 
diff --git a/app/webpacker/css/admin/components/table_loading.scss b/app/webpacker/css/admin/components/table_loading.scss
index 6c97aabc3d..4d15f95837 100644
--- a/app/webpacker/css/admin/components/table_loading.scss
+++ b/app/webpacker/css/admin/components/table_loading.scss
@@ -19,7 +19,7 @@
     }
 
     &.error {
-      color: $warning-red;
+      color: $color-warning;
     }
   }
 }
diff --git a/app/webpacker/css/admin/dashboard_item.scss b/app/webpacker/css/admin/dashboard_item.scss
index 6a758a29e3..67498fa352 100644
--- a/app/webpacker/css/admin/dashboard_item.scss
+++ b/app/webpacker/css/admin/dashboard_item.scss
@@ -19,11 +19,11 @@ div.dashboard_item {
     }
 
     &.red {
-      background-color: $warning-red;
+      background-color: $color-warning;
     }
 
     &.orange {
-      background-color: $warning-orange;
+      background-color: $color-warning;
     }
   }
 
@@ -40,20 +40,20 @@ div.dashboard_item {
     }
 
     &.red {
-      border-color: $warning-red;
+      border-color: $color-warning;
       border-width: 3px;
 
       h3 {
-        color: $warning-red;
+        color: $color-warning;
       }
     }
 
     &.orange {
-      border-color: $warning-orange;
+      border-color: $color-warning;
       border-width: 3px;
 
       h3 {
-        color: $warning-orange;
+        color: $color-warning;
       }
     }
 
@@ -141,12 +141,12 @@ div.dashboard_item {
     }
 
     .icon-warning-sign {
-      color: $warning-orange;
+      color: $color-warning;
       font-size: 30px;
     }
 
     .icon-remove-sign {
-      color: $warning-red;
+      color: $color-warning;
       font-size: 30px;
     }
 
@@ -156,13 +156,13 @@ div.dashboard_item {
     }
 
     &.orange {
-      color: $warning-orange;
-      border: solid $warning-orange;
+      color: $color-warning;
+      border: solid $color-warning;
     }
 
     &.red {
-      color: $warning-red;
-      border: solid $warning-red;
+      color: $color-warning;
+      border: solid $color-warning;
     }
 
     &.orange,
@@ -217,7 +217,7 @@ div.dashboard_item {
     text-align: center;
 
     &.orange {
-      background-color: $warning-orange;
+      background-color: $color-warning;
     }
 
     &.blue {
@@ -225,7 +225,7 @@ div.dashboard_item {
     }
 
     &.red {
-      background-color: $warning-red;
+      background-color: $color-warning;
     }
 
     &:hover {
diff --git a/app/webpacker/css/admin/enterprise_index_panels.scss b/app/webpacker/css/admin/enterprise_index_panels.scss
index 2a5aac968f..087f318042 100644
--- a/app/webpacker/css/admin/enterprise_index_panels.scss
+++ b/app/webpacker/css/admin/enterprise_index_panels.scss
@@ -84,7 +84,7 @@
       font-size: 1.5rem;
 
       &.issue {
-        color: $warning-red;
+        color: $color-warning;
       }
 
       &.warning {
diff --git a/app/webpacker/css/admin/enterprises.scss b/app/webpacker/css/admin/enterprises.scss
index d0f2969088..2bebf639fa 100644
--- a/app/webpacker/css/admin/enterprises.scss
+++ b/app/webpacker/css/admin/enterprises.scss
@@ -1,6 +1,6 @@
 form[name="enterprise_form"] {
   div.row.warning {
-    color: $warning-orange;
+    color: $color-warning;
   }
 
   table.managers {
@@ -38,7 +38,7 @@ form[name="enterprise_form"] {
 
 table .enterprise-actions {
   .warning-icon {
-    color: $warning-red;
+    color: $color-warning;
     font-size: 16px;
   }
 }
diff --git a/app/webpacker/css/admin/index_panel_buttons.scss b/app/webpacker/css/admin/index_panel_buttons.scss
index bfaa68e9e9..110a50e4cd 100644
--- a/app/webpacker/css/admin/index_panel_buttons.scss
+++ b/app/webpacker/css/admin/index_panel_buttons.scss
@@ -6,7 +6,7 @@ tbody.panel-ctrl {
         margin-top: 10px;
         margin-bottom: 10px;
         font-size: 1.3rem;
-        background-color: $warning-red;
+        background-color: $color-warning;
         &:hover {
           background-color: #cd4e4f;
         }
diff --git a/app/webpacker/css/admin/index_panels.scss b/app/webpacker/css/admin/index_panels.scss
index a7e01066f8..cbaa45bf70 100644
--- a/app/webpacker/css/admin/index_panels.scss
+++ b/app/webpacker/css/admin/index_panels.scss
@@ -27,7 +27,7 @@ tbody.panel-ctrl {
       font-size: 2rem;
       -webkit-font-smoothing: antialiased;
       content: "\f071";
-      color: $warning-red;
+      color: $color-warning;
     }
 
     &.status {
@@ -38,7 +38,7 @@ tbody.panel-ctrl {
 
       i.issue::before {
         content: "\f071";
-        color: $warning-red;
+        color: $color-warning;
       }
 
       i.warning::before {
diff --git a/app/webpacker/css/admin/openfoodnetwork.scss b/app/webpacker/css/admin/openfoodnetwork.scss
index 9fa0961d4e..b4de0d2f52 100644
--- a/app/webpacker/css/admin/openfoodnetwork.scss
+++ b/app/webpacker/css/admin/openfoodnetwork.scss
@@ -34,7 +34,7 @@ text-angular .ta-editor {
 
 span.error,
 div.error:not(.flash) {
-  color: $warning-red;
+  color: $color-warning;
 }
 
 /* Fix conflict between Spree and elRTE's styles */
@@ -46,7 +46,7 @@ div.error:not(.flash) {
 input.red,
 a.button.red,
 button.red {
-  background-color: $warning-red;
+  background-color: $color-warning;
   margin-right: 5px;
   color: #ffffff;
 }
@@ -54,7 +54,7 @@ button.red {
 a.button.red {
   &:not(:hover) {
     color: #fff;
-    background-color: $warning-red;
+    background-color: $color-warning;
   }
 }
 
@@ -208,12 +208,12 @@ table#listing_enterprise_groups {
 // TODO: remove this, use class below
 #no_results {
   font-weight: bold;
-  color: $warning-red;
+  color: $color-warning;
 }
 
 .no-results {
   font-weight: bold;
-  color: $warning-red;
+  color: $color-warning;
 
   h1,
   h2,
@@ -221,7 +221,7 @@ table#listing_enterprise_groups {
   h4,
   h5,
   h6 {
-    color: $color-error;
+    color: $color-warning;
   }
 }
 
diff --git a/app/webpacker/css/admin/orders.scss b/app/webpacker/css/admin/orders.scss
index a1bc92af18..89c9bfd468 100644
--- a/app/webpacker/css/admin/orders.scss
+++ b/app/webpacker/css/admin/orders.scss
@@ -9,7 +9,7 @@ input.show-dirty {
   &.ng-dirty {
     border: solid 1px orange;
     &.update-error {
-      border: solid 1px $warning-red;
+      border: solid 1px $color-warning;
     }
   }
 }
@@ -17,7 +17,7 @@ input.show-dirty {
 input,
 div {
   &.update-error {
-    border: solid 1px $warning-red;
+    border: solid 1px $color-warning;
   }
 }
 
@@ -138,7 +138,7 @@ table.edit-note-table {
   }
 
   .error {
-    color: $warning-red;
+    color: $color-warning;
   }
 }
 
diff --git a/app/webpacker/css/admin/pages/enterprise_form.scss b/app/webpacker/css/admin/pages/enterprise_form.scss
index 5c588ba11a..f2ce9b90cb 100644
--- a/app/webpacker/css/admin/pages/enterprise_form.scss
+++ b/app/webpacker/css/admin/pages/enterprise_form.scss
@@ -12,5 +12,5 @@ span.available {
 }
 
 span.unavailable {
-  color: $warning-red;
+  color: $color-warning;
 }
diff --git a/app/webpacker/css/admin/pages/subscription_form.scss b/app/webpacker/css/admin/pages/subscription_form.scss
index 02c9fd783e..a6c363e489 100644
--- a/app/webpacker/css/admin/pages/subscription_form.scss
+++ b/app/webpacker/css/admin/pages/subscription_form.scss
@@ -1,5 +1,5 @@
 .admin-subscription-form-subscription-line-items {
   .not-in-open-and-upcoming-order-cycles-warning {
-    color: $warning-red;
+    color: $color-warning;
   }
 }
diff --git a/app/webpacker/css/admin/pages/subscription_review.scss b/app/webpacker/css/admin/pages/subscription_review.scss
index ba3280aa2b..42718a0d30 100644
--- a/app/webpacker/css/admin/pages/subscription_review.scss
+++ b/app/webpacker/css/admin/pages/subscription_review.scss
@@ -1,5 +1,5 @@
 .admin-subscription-review-subscription-line-items {
   .not-in-open-and-upcoming-order-cycles-warning {
-    color: $warning-red;
+    color: $color-warning;
   }
 }
diff --git a/app/webpacker/css/admin/product_import.scss b/app/webpacker/css/admin/product_import.scss
index 49f220edf7..5c6ccc2276 100644
--- a/app/webpacker/css/admin/product_import.scss
+++ b/app/webpacker/css/admin/product_import.scss
@@ -1,4 +1,4 @@
-$pi-red: $warning-red;
+$pi-red: $color-warning;
 $pi-green: lighten($spree-green, 10%);
 $pi-orange: $bright-orange;
 $pi-blue: lighten($spree-blue, 10%);
diff --git a/app/webpacker/css/admin/shared/typography.scss b/app/webpacker/css/admin/shared/typography.scss
index 0b8a3707f2..4435933458 100644
--- a/app/webpacker/css/admin/shared/typography.scss
+++ b/app/webpacker/css/admin/shared/typography.scss
@@ -142,7 +142,7 @@ dl {
 }
 
 .text-red {
-  color: $warning-red;
+  color: $color-warning;
 }
 
 input.text-big {
diff --git a/app/webpacker/css/admin/sidebar-item.scss b/app/webpacker/css/admin/sidebar-item.scss
index c0aec809e5..499c4e76e9 100644
--- a/app/webpacker/css/admin/sidebar-item.scss
+++ b/app/webpacker/css/admin/sidebar-item.scss
@@ -16,7 +16,7 @@ div.sidebar_item {
     }
 
     &.red {
-      background-color: $warning-red;
+      background-color: $color-warning;
     }
   }
 
@@ -26,10 +26,10 @@ div.sidebar_item {
     overflow-x: hidden;
 
     &.red {
-      color: $warning-red;
+      color: $color-warning;
 
       .list-item {
-        border: solid $warning-red;
+        border: solid $color-warning;
         border-width: 0px 3px 0px 3px;
 
         a.alpha,
@@ -47,7 +47,7 @@ div.sidebar_item {
       }
 
       a {
-        color: $warning-red;
+        color: $color-warning;
       }
     }
   }
@@ -77,7 +77,7 @@ div.sidebar_item {
     }
 
     .icon-remove-sign {
-      color: $warning-red;
+      color: $color-warning;
       font-size: 18px;
     }
 
@@ -114,7 +114,7 @@ div.sidebar_item {
     }
 
     &.red {
-      background-color: $warning-red;
+      background-color: $color-warning;
     }
 
     &:hover {
diff --git a/app/webpacker/css/admin/variables.scss b/app/webpacker/css/admin/variables.scss
index 421d4d2326..908749d5dc 100644
--- a/app/webpacker/css/admin/variables.scss
+++ b/app/webpacker/css/admin/variables.scss
@@ -1,6 +1,5 @@
 // Admin variables and colours
-$warning-red: $color-5;
-$warning-orange: $color-5;
+$color-warning: $color-5;
 $admin-table-border: $pale-blue;
 
 $modal-close-button-color: #de6060;
diff --git a/app/webpacker/css/admin/variant_overrides.scss b/app/webpacker/css/admin/variant_overrides.scss
index c01673b292..4c3ede7162 100644
--- a/app/webpacker/css/admin/variant_overrides.scss
+++ b/app/webpacker/css/admin/variant_overrides.scss
@@ -4,5 +4,5 @@
 }
 
 button.hide:hover {
-  background-color: $warning-red;
+  background-color: $color-warning;
 }
diff --git a/app/webpacker/css/admin_v3/components/buttons.scss b/app/webpacker/css/admin_v3/components/buttons.scss
index 57683f72a6..71b38206b8 100644
--- a/app/webpacker/css/admin_v3/components/buttons.scss
+++ b/app/webpacker/css/admin_v3/components/buttons.scss
@@ -99,7 +99,7 @@ button:not(.plain):not(.trix-button),
     }
 
     &.danger {
-      background-color: $warning-red;
+      background-color: $color-warning;
     }
     &.success {
       background-color: $spree-green;
diff --git a/app/webpacker/css/admin_v3/shared/typography.scss b/app/webpacker/css/admin_v3/shared/typography.scss
index 467ee248be..b0d6d49cd3 100644
--- a/app/webpacker/css/admin_v3/shared/typography.scss
+++ b/app/webpacker/css/admin_v3/shared/typography.scss
@@ -210,7 +210,7 @@ dl {
 }
 
 .text-red {
-  color: $warning-red;
+  color: $color-warning;
 }
 
 input.text-big {
diff --git a/app/webpacker/css/admin_v3/variables.scss b/app/webpacker/css/admin_v3/variables.scss
index 26f18c8e90..457e5cb924 100644
--- a/app/webpacker/css/admin_v3/variables.scss
+++ b/app/webpacker/css/admin_v3/variables.scss
@@ -4,8 +4,7 @@ $spree-green: #9fc820;
 $spree-blue: #5498da;
 $spree-light-blue: #eff5fc;
 
-$warning-red: $color-5;
-$warning-orange: $color-5;
+$color-warning: $color-5;
 $bright-orange: #ffa92e;
 $medium-grey: #919191;
 $pale-blue: #cee1f4;

From b46e6c462dfacd0c8d26169542a2015cafffbacc Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Thu, 22 Jun 2023 16:14:37 +1000
Subject: [PATCH 08/12] Rename table border variable

There are other vars named brd, but I think border is clearer and doesn't need to be abreviated here.
---
 app/webpacker/css/admin/components/tom_select.scss | 2 +-
 app/webpacker/css/admin/enterprises.scss           | 2 +-
 app/webpacker/css/admin/sections/orders.scss       | 2 +-
 app/webpacker/css/admin/variables.scss             | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/webpacker/css/admin/components/tom_select.scss b/app/webpacker/css/admin/components/tom_select.scss
index 076f0a55b2..0783795e6e 100644
--- a/app/webpacker/css/admin/components/tom_select.scss
+++ b/app/webpacker/css/admin/components/tom_select.scss
@@ -41,7 +41,7 @@
 
 .ts-wrapper.single .ts-control,
 .ts-dropdown.single {
-  border-color: $admin-table-border;
+  border-color: $color-tbl-border;
 }
 
 .ts-control,
diff --git a/app/webpacker/css/admin/enterprises.scss b/app/webpacker/css/admin/enterprises.scss
index 2bebf639fa..85e115ec34 100644
--- a/app/webpacker/css/admin/enterprises.scss
+++ b/app/webpacker/css/admin/enterprises.scss
@@ -29,7 +29,7 @@ form[name="enterprise_form"] {
 }
 
 .admin-enterprises-index-admin-actions-divider {
-  background-color: $admin-table-border;
+  background-color: $color-tbl-border;
   border-width: 0;
   height: 1px;
   margin-bottom: 1em;
diff --git a/app/webpacker/css/admin/sections/orders.scss b/app/webpacker/css/admin/sections/orders.scss
index f6b4a4546e..e6e45309d3 100644
--- a/app/webpacker/css/admin/sections/orders.scss
+++ b/app/webpacker/css/admin/sections/orders.scss
@@ -39,7 +39,7 @@
   }
 
   table tr:last-child th {
-    border-bottom: 1px solid $admin-table-border;
+    border-bottom: 1px solid $color-tbl-border;
   }
 }
 
diff --git a/app/webpacker/css/admin/variables.scss b/app/webpacker/css/admin/variables.scss
index 908749d5dc..114eac14f3 100644
--- a/app/webpacker/css/admin/variables.scss
+++ b/app/webpacker/css/admin/variables.scss
@@ -1,6 +1,6 @@
 // Admin variables and colours
 $color-warning: $color-5;
-$admin-table-border: $pale-blue;
+$color-tbl-border: $pale-blue;
 
 $modal-close-button-color: #de6060;
 $modal-close-button-hover-color: #bf4545;

From 9610281ed3adc1ee5a838864321a1a3f4dca5b71 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Thu, 22 Jun 2023 16:31:07 +1000
Subject: [PATCH 09/12] Rename variables

---
 app/webpacker/css/admin/components/simple_modal.scss | 4 ++--
 app/webpacker/css/admin/variables.scss               | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/webpacker/css/admin/components/simple_modal.scss b/app/webpacker/css/admin/components/simple_modal.scss
index e6a88e0b25..03595f6e83 100644
--- a/app/webpacker/css/admin/components/simple_modal.scss
+++ b/app/webpacker/css/admin/components/simple_modal.scss
@@ -2,13 +2,13 @@
   width: 300px;
 
   .close-reveal-modal {
-    color: $modal-close-button-color;
+    color: $color-modal-close-btn;
     font-size: 23px;
     right: 0.45rem;
     top: 0.35rem;
 
     :hover {
-      color: $modal-close-button-hover-color;
+      color: $color-modal-close-btn-hover;
     }
   }
 
diff --git a/app/webpacker/css/admin/variables.scss b/app/webpacker/css/admin/variables.scss
index 114eac14f3..a06b20a1b6 100644
--- a/app/webpacker/css/admin/variables.scss
+++ b/app/webpacker/css/admin/variables.scss
@@ -2,6 +2,6 @@
 $color-warning: $color-5;
 $color-tbl-border: $pale-blue;
 
-$modal-close-button-color: #de6060;
-$modal-close-button-hover-color: #bf4545;
+$color-modal-close-btn: #de6060;
+$color-modal-close-btn-hover: #bf4545;
 $disabled-button: $light-grey;

From 1a02e108a586b45e5166725e7eba90bf45544a14 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Thu, 22 Jun 2023 16:31:42 +1000
Subject: [PATCH 10/12] Use red colour from the palette

It's very similar.
---
 app/webpacker/css/admin/variables.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/webpacker/css/admin/variables.scss b/app/webpacker/css/admin/variables.scss
index a06b20a1b6..37e5d6164a 100644
--- a/app/webpacker/css/admin/variables.scss
+++ b/app/webpacker/css/admin/variables.scss
@@ -2,6 +2,6 @@
 $color-warning: $color-5;
 $color-tbl-border: $pale-blue;
 
-$color-modal-close-btn: #de6060;
-$color-modal-close-btn-hover: #bf4545;
+$color-modal-close-btn: $color-5;
+$color-modal-close-btn-hover: darken($color-5, 5%);
 $disabled-button: $light-grey;

From 0aa4c144b91cc64716d87e48272180711102fead Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Thu, 22 Jun 2023 16:33:45 +1000
Subject: [PATCH 11/12] Rename disabled button variable

TIL that underscores and dashes are treated the same in SCSS variables.
---
 app/webpacker/css/admin/components/pagination.scss | 2 +-
 app/webpacker/css/admin/orders.scss                | 2 +-
 app/webpacker/css/admin/variables.scss             | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/webpacker/css/admin/components/pagination.scss b/app/webpacker/css/admin/components/pagination.scss
index beba1f2159..730abe8888 100644
--- a/app/webpacker/css/admin/components/pagination.scss
+++ b/app/webpacker/css/admin/components/pagination.scss
@@ -25,7 +25,7 @@
     }
 
     &.disabled {
-      background-color: $disabled_button;
+      background-color: $color-btn-disabled-bg;
       cursor: default;
     }
   }
diff --git a/app/webpacker/css/admin/orders.scss b/app/webpacker/css/admin/orders.scss
index 89c9bfd468..8738ce51c7 100644
--- a/app/webpacker/css/admin/orders.scss
+++ b/app/webpacker/css/admin/orders.scss
@@ -116,7 +116,7 @@ table.edit-note-table {
     float: right;
 
     &:disabled {
-      background-color: $disabled-button;
+      background-color: $color-btn-disabled-bg;
     }
   }
 }
diff --git a/app/webpacker/css/admin/variables.scss b/app/webpacker/css/admin/variables.scss
index 37e5d6164a..ba1518ee95 100644
--- a/app/webpacker/css/admin/variables.scss
+++ b/app/webpacker/css/admin/variables.scss
@@ -4,4 +4,4 @@ $color-tbl-border: $pale-blue;
 
 $color-modal-close-btn: $color-5;
 $color-modal-close-btn-hover: darken($color-5, 5%);
-$disabled-button: $light-grey;
+$color-btn-disabled-bg: $light-grey;

From 293e135a4585e475d3333cd9ffd71592a82563d1 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Thu, 22 Jun 2023 16:39:55 +1000
Subject: [PATCH 12/12] Move variables to one variables file

Note that color-tbl-border is not needed in the new admin_v3 styles.
---
 app/webpacker/css/admin/all.scss                  | 2 --
 app/webpacker/css/admin/globals/variables.scss    | 7 +++++++
 app/webpacker/css/admin/variables.scss            | 7 -------
 app/webpacker/css/admin_v3/all.scss               | 2 --
 app/webpacker/css/admin_v3/globals/variables.scss | 7 +++++++
 app/webpacker/css/mail/all.scss                   | 1 -
 6 files changed, 14 insertions(+), 12 deletions(-)
 delete mode 100644 app/webpacker/css/admin/variables.scss

diff --git a/app/webpacker/css/admin/all.scss b/app/webpacker/css/admin/all.scss
index ea19d92b46..c9ac1e54ac 100644
--- a/app/webpacker/css/admin/all.scss
+++ b/app/webpacker/css/admin/all.scss
@@ -16,7 +16,6 @@
 @import "globals/functions";
 @import "globals/palette";
 @import "globals/variables";
-@import "variables";
 @import "globals/mixins";
 
 @import "plugins/font-awesome";
@@ -111,7 +110,6 @@
 @import "tag_rules";
 @import "terms_of_service_files";
 @import "validation";
-@import "variables";
 @import "variant_overrides";
 @import "welcome";
 
diff --git a/app/webpacker/css/admin/globals/variables.scss b/app/webpacker/css/admin/globals/variables.scss
index 167d5fe2f6..86fb56b7af 100644
--- a/app/webpacker/css/admin/globals/variables.scss
+++ b/app/webpacker/css/admin/globals/variables.scss
@@ -23,18 +23,21 @@ $color-border:                   very-light($color-3, 12) !default;
 // Basic flash colors
 $color-success:                  $color-2 !default;
 $color-notice:                   $color-6 !default;
+$color-warning:                  $color-5 !default;
 $color-error:                    $color-5 !default;
 
 // Table colors
 $color-tbl-odd:                  $color-1 !default;
 $color-tbl-even:                 very-light($color-3, 4) !default;
 $color-tbl-thead:                very-light($color-3, 4) !default;
+$color-tbl-border:               $pale-blue !default;
 
 // Button colors
 $color-btn-bg:                   $color-3 !default;
 $color-btn-text:                 $color-1 !default;
 $color-btn-hover-bg:             $color-2 !default;
 $color-btn-hover-text:           $color-1 !default;
+$color-btn-disabled-bg:          $light-grey !default;
 
 // Actions colors
 $color-action-edit-bg:           very-light($color-success, 5  ) !default;
@@ -65,6 +68,10 @@ $color-txt-brd:                  $color-border !default;
 $color-txt-text:                 $color-3 !default;
 $color-txt-hover-brd:            $color-2 !default;
 
+// Modal colors
+$color-modal-close-btn:          $color-5 !default;
+$color-modal-close-btn-hover:    darken($color-5, 5%) !default;
+
 // States label colors
 $color-ste-complete-bg:          $color-success !default;
 $color-ste-complete-text:        $color-1 !default;
diff --git a/app/webpacker/css/admin/variables.scss b/app/webpacker/css/admin/variables.scss
deleted file mode 100644
index ba1518ee95..0000000000
--- a/app/webpacker/css/admin/variables.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// Admin variables and colours
-$color-warning: $color-5;
-$color-tbl-border: $pale-blue;
-
-$color-modal-close-btn: $color-5;
-$color-modal-close-btn-hover: darken($color-5, 5%);
-$color-btn-disabled-bg: $light-grey;
diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index 4cbc555727..f682daf3f0 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -20,7 +20,6 @@
 @import "../admin/globals/functions";
 @import "globals/palette"; // admin_v3
 @import "globals/variables"; // admin_v3
-@import "../admin/variables";
 @import "../admin/globals/mixins";
 @import "mixins"; // admin_v3
 
@@ -117,7 +116,6 @@
 @import "../admin/tag_rules";
 @import "../admin/terms_of_service_files";
 @import "../admin/validation";
-@import "../admin/variables";
 @import "../admin/variant_overrides";
 @import "../admin/welcome";
 
diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss
index 3c9ef5faa7..de8975e93d 100644
--- a/app/webpacker/css/admin_v3/globals/variables.scss
+++ b/app/webpacker/css/admin_v3/globals/variables.scss
@@ -23,6 +23,7 @@ $color-border:                   $light-grey !default;
 // Basic flash colors
 $color-success:                  $green !default;
 $color-notice:                   $yellow !default;
+$color-warning:                  $red !default;
 $color-error:                    $red !default;
 
 // Table styles
@@ -31,6 +32,7 @@ $color-tbl-cell-bg:              $white !default;
 $color-tbl-cell-shadow:          rgb(0, 0, 0, 0.15) !default;
 $color-tbl-thead-txt:            $color-headers !default;
 $color-tbl-thead-bg:             $light-grey !default;
+$color-tbl-border:               $pale-blue !default;
 $padding-tbl-cell:               12px 12px;
 $padding-tbl-cell-condensed:     10px 12px;
 $padding-tbl-cell-relaxed:       16px 12px;
@@ -42,6 +44,7 @@ $color-btn-shadow:               0px 1px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px rg
 $color-btn-hover-bg:             $orient !default;
 $color-btn-hover-text:           $white !default;
 $color-btn-hover-border:         $dark-blue !default;
+$color-btn-disabled-bg:          $light-grey !default;
 
 // Actions colors
 $color-action-edit-bg:           very-light($color-success, 5  ) !default;
@@ -72,6 +75,10 @@ $color-txt-brd:                  $color-border !default;
 $color-txt-text:                 $near-black !default;
 $color-txt-hover-brd:            $teal !default;
 
+// Modal colors
+$color-modal-close-btn:          $color-5 !default;
+$color-modal-close-btn-hover:    darken($color-5, 5%) !default;
+
 // States label colors
 $color-ste-complete-bg:          $color-success !default;
 $color-ste-complete-text:        $white !default;
diff --git a/app/webpacker/css/mail/all.scss b/app/webpacker/css/mail/all.scss
index fb4d0596b2..087d2d1310 100644
--- a/app/webpacker/css/mail/all.scss
+++ b/app/webpacker/css/mail/all.scss
@@ -1,4 +1,3 @@
 @import '../admin/globals/palette.scss';
-@import '../admin/variables';
 @import 'email';
 @import 'payments_list';