Update colors for Solidus Legacy

The previous version of colors reflected exactly the new Solidus Admin, but its application on the legacy UI makes more difficult for merchants to individuate links and clickable elements.
solidusio · Oct 24, 2023 · 5d96336 · 5d96336
1 parent b2a6f41
commit 5d96336
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 7 deletions.
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_hint.scss b/backend/app/assets/stylesheets/spree/backend/components/_hint.scss
@@ -1,3 +1,7 @@
 .hint-tooltip {
   cursor: pointer;
+
+  i {
+    color: $color-dark-light;
+  }
 }
diff --git a/backend/app/assets/stylesheets/spree/backend/components/_navigation_solidus_admin.scss b/backend/app/assets/stylesheets/spree/backend/components/_navigation_solidus_admin.scss
@@ -122,7 +122,7 @@ $color-navbar-hover: $color-navbar !default;
       padding: 2px 12px;
       width: 100%;
       border-radius: $border-radius;
-      color: $color-primary;
+      color: $solidus-admin-gray-800;
       gap: 12px;
       display: flex;
       align-items: center;

diff --git a/backend/app/assets/stylesheets/spree/backend/shared/_tables.scss b/backend/app/assets/stylesheets/spree/backend/shared/_tables.scss
@@ -38,6 +38,7 @@ table {
         text-align: center;
         border-bottom: none;
         vertical-align: middle;
+        color: $color-dark-light;
 
         &:before {
           padding: 0;
@@ -111,6 +112,10 @@ table {
 
   th a {
     color: $color-dark;
+
+    &:hover {
+      color: $color-dark-light;
+    }
   }
 
   tbody {

diff --git a/backend/app/assets/stylesheets/spree/backend/themes/solidus_admin/_variables.scss b/backend/app/assets/stylesheets/spree/backend/themes/solidus_admin/_variables.scss
@@ -19,10 +19,10 @@ $color-dark-dark: $solidus-admin-gray-600;
 $color-dark-light: $solidus-admin-gray-500;
 $color-dark-accent: $solidus-admin-gray-200;
 
-$color-primary: $solidus-admin-black;
+$color-primary: $solidus-admin-gray-700;
 $color-primary-light: $solidus-admin-gray-100;
 
-$color-light: $solidus-admin-gray-15;
+$color-light: $solidus-admin-gray-25;
 $color-light-dark: $solidus-admin-gray-50;
 $color-light-accent: $solidus-admin-gray-100;
 
@@ -49,10 +49,10 @@ $color-navbar-active: $solidus-admin-solidus-red;
 $color-navbar-active-bg: $solidus-admin-gray-50;
 $color-navbar-submenu: $color-dark-light;
 $color-navbar-submenu-bg: $color-light;
-$color-navbar-submenu-active: $color-primary;
+$color-navbar-submenu-active: $solidus-admin-solidus-red;
 $color-navbar-footer: $color-dark;
 $color-navbar-footer-bg: $color-light;
-$color-navbar-footer-active: $color-primary;
+$color-navbar-footer-active: $solidus-admin-solidus-red;
 $color-icon-navbar: $color-dark-light;
 
 $color-navbar-hover-bg: $solidus-admin-gray-50;
@@ -61,7 +61,7 @@ $color-navbar-hover: $color-dark;
 // Basic Tabs colors
 $color-tab: $color-dark-light;
 $color-tab-bg: $color-light;
-$color-tab-border: $color-border;
+$color-tab-border: $color-light-accent;
 $color-tab-active: $color-primary;
 $color-tab-active-bg: $color-white;
 $color-tab-active-border: $color-white;
@@ -74,6 +74,7 @@ $color-error: $color-red;
 // Breadcrumb custom variable
 
 $breadcrumb-color: $color-dark-light;
+$breadcrumb-active-color: $color-dark;
 
 // Color for spinner
 $color-spinner: $color-white;
@@ -157,4 +158,14 @@ $main-header-height: 84px;
 $content-wrapper-bg: $color-white;
 $admin-body-bg: $color-white;
 
-$link-hover-color: $solidus-admin-solidus-red;
+// Links
+//--------------------------------------------------------------
+
+$link-color: $solidus-admin-blue;
+$link-hover-color: darken($solidus-admin-blue, 10%);
+
+// Pagination
+//--------------------------------------------------------------
+
+$pagination-color: $color-primary;
+$pagination-hover-color: $color-dark;