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;