[Fixed] Merge branch 'hera/add-color-palette' into hera/add-main-layout

app/assets/stylesheets/hera/base.scss

@@ -63,7 +63,7 @@ code {
 
 .disabled,
 :disabled {
-  color: $muted-text !important;
+  color: $text-muted !important;
 }
 
 .form-actions {
@@ -137,7 +137,7 @@ pre code {
 }
 
 .text-muted {
-  color: $muted-text !important;
+  color: $text-muted !important;
 }
 
 .text-primary {

app/assets/stylesheets/hera/colors.scss

@@ -0,0 +1,65 @@
+//Brand colors
+$ce-green-100: #e0f2da;
+$ce-green-200: #c1e4b5;
+$ce-green-300: #a2d790;
+$ce-green-400: #83c96b;
+$ce-green-500: #64bc46;
+$ce-green-600: #509638;
+$ce-green-700: #3c712a;
+$ce-green-800: #284b1c;
+$ce-green-900: #14260e;
+
+//System colors
+$red-100: #f5d4d8;
+$red-200: #eba9b1;
+$red-300: #e07f89;
+$red-400: #d65462;
+$red-500: #cc293b;
+$red-600: #a3212f;
+$red-700: #7a1923;
+$red-800: #521018;
+$red-900: #29080c;
+
+$green-100: #e7f7e6;
+$green-200: #ceefcd;
+$green-300: #b6e7b5;
+$green-400: #9ddf9c;
+$green-500: #85d783;
+$green-600: #6aac69;
+$green-700: #50814f;
+$green-800: #355634;
+$green-900: #1b2b1a;
+
+$yellow-100: #f9f5d6;
+$yellow-200: #f3ebac;
+$yellow-300: #ede183;
+$yellow-400: #e7d759;
+$yellow-500: #e1cd30;
+$yellow-600: #b4a426;
+$yellow-700: #877b1d;
+$yellow-800: #5a5213;
+$yellow-900: #2d290a;
+
+$orange-100: #f5e1d4;
+$orange-200: #ebc3a9;
+$orange-300: #e0a47f;
+$orange-400: #d68654;
+$orange-500: #cc6829;
+$orange-600: #a35321;
+$orange-700: #7a3e19;
+$orange-800: #522a10;
+$orange-900: #291508;
+
+//Grey
+$grey-100: #f4f4f4;
+$grey-200: #e8e8e8;
+$grey-300: #dddddd;
+$grey-400: #d1d1d1;
+$grey-500: #c6c6c6;
+$grey-600: #9e9e9e;
+$grey-700: #636363;
+$grey-800: #4f4f4f;
+$grey-900: #282828;
+
+//Black
+$black: #141414;

app/assets/stylesheets/hera/modules.scss

@@ -1,3 +1,4 @@
+@import 'hera/colors';
 @import 'hera/modules/buttons';
 @import 'hera/modules/datatables';
 @import 'hera/modules/modals';

app/assets/stylesheets/hera/modules/navigation/_navigation.scss

@@ -110,7 +110,7 @@
         &:active,
         &:focus,
         &:hover {
-          color: $brand-color-light;
+          color: $instance-nav-hover;
         }
       }
     }
@@ -123,29 +123,29 @@
         &:active,
         &:focus,
         &:hover {
-          background-color: $brand-color-light;
+          background-color: $instance-nav-hover;
 
           .dropdown-item {
-            background-color: $brand-color-light;
-            color: $grey-dark;
+            background-color: $instance-nav-hover;
+            color: $text-default;
           }
         }
       }
     }
 
     .dropdown-divider {
-      border-top: 1px solid $link-color;
+      border-top: 1px solid $text-link;
       border-bottom: 1px solid $border-color-dark;
     }
 
     .navbar-toggler {
-      border: 1px solid $border-color-light;
+      border: 1px solid $border-color;
       color: $white;
 
       &:focus {
-        border: 2px solid $brand-color-light;
+        border: 2px solid $instance-nav-hover;
         box-shadow: none;
-        color: $brand-color-light;
+        color: $instance-nav-hover;
       }
     }
 
@@ -181,18 +181,18 @@
         &:focus,
         &:hover {
           .nav-link {
-            color: $link-color;
+            color: $text-link;
           }
         }
 
         .dropdown-menu {
           border: 1px solid $border-color;
-          box-shadow: 1px 1px 5px 0px rgba($shadow-color, 0.5);
+          box-shadow: 1px 1px 5px 0px rgba($shadow-color-light, 0.5);
 
           .dropdown-item {
             &:hover,
             &:focus {
-              color: $grey-dark;
+              color: $text-default;
               background-color: $light;
             }
           }
@@ -203,7 +203,7 @@
         }
 
         .nav-link {
-          color: $grey-dark;
+          color: $text-default;
           display: flex;
           flex-direction: row;
           font-size: 1rem;
@@ -219,10 +219,10 @@
         }
 
         &.active {
-          border-bottom: 5px solid $brand-color-light;
+          border-bottom: 5px solid $light;
 
           .nav-link {
-            color: $grey-dark;
+            color: $text-default;
           }
         }
       }
@@ -278,7 +278,7 @@
     white-space: nowrap;
 
     &.active {
-      color: $muted-text;
+      color: $text-muted;
     }
 
     & + .breadcrumb-item::before {

app/assets/stylesheets/hera/modules/navigation/_search.scss

@@ -29,12 +29,12 @@
       .btn {
         background-color: none;
         border: none;
-        color: $brand-color-light;
+        color: $light;
         transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
       }
 
       .search-query {
-        border-bottom-color: $brand-color-light;
+        border-bottom-color: $light;
         opacity: 1;
         right: 1.25rem;
         width: 9rem;

app/assets/stylesheets/hera/utilities.scss

@@ -1,3 +1 @@
-.bg-dark {
-  background-color: $grey-dark !important;
-}
+

app/assets/stylesheets/hera/variables.scss

@@ -1,28 +1,38 @@
 @import 'bootstrap/functions';
 @import 'bootstrap/variables';
 
-// Branding
-// Do Not Use Directly! - use Theme variables instead
-$ce-green-light: #b0e59c;
-$ce-green: #64bc46;
-$ce-green-dark: #325b23;
+@import 'hera/colors';
 
-// Edition Colors
-$light: $ce-green-light;
-$primary: $ce-green;
-$dark: $ce-green-dark;
+// Theme
+$light: $ce-green-100;
+$primary: $ce-green-500;
+$dark: $ce-green-700;
 
 // Bootstrap Overrides
-$border-color: #e8e8e8;
-$muted-text: #636363;
-$red: #cc293b;
+$green: $green-500;
+$orange: $orange-500;
+$red: $red-500;
+$yellow: $yellow-500;
 
-$theme-colors: map-merge(
-  $theme-colors,
-  (
-    'primary': $dark,
-  )
-);
+//Borders
+$border-color: $grey-200;
+$border-color-dark: $grey-900;
+
+//Misc
+$white-dark: $grey-100;
+
+// Navbar
+$instance-nav-bg: $ce-green-700;
+$instance-nav-hover: $ce-green-200;
+
+//Shadows
+$shadow-color-light: $grey-200;
+$shadow-color-dark: $grey-800;
+
+//Text
+$text-default: $grey-900;
+$text-muted: $grey-700;
+$text-link: $ce-green-700;
 
 // Theme
 $border-color-dark: $dark;
@@ -35,6 +45,16 @@ $link-color-hover: darken($link-color, 15%);
 $shadow-color: #eeeeee;
 $white-dark: #f9f9f9;
 
+$theme-colors: map-merge(
+  $theme-colors,
+  (
+    'primary': $dark,
+  )
+);
+
+// Sidebar
+$sidebar-width: 20rem;
+
 // Layout
 $default-text: $grey-dark;
 $primary-bg: $white;

app/assets/stylesheets/hera/views/search.scss

@@ -14,7 +14,7 @@ body.search.index {
   }
 
   .result-details {
-    color: $muted-text;
+    color: $text-muted;
     margin: 10px 0;
 
     p {

app/assets/stylesheets/shared/activities.scss

@@ -26,7 +26,7 @@
       display: block;
 
       .time {
-        color: $muted-text;
+        color: $text-muted;
         font-size: 0.8rem;
       }
     }

app/assets/stylesheets/shared/datatables.scss

@@ -170,7 +170,7 @@ div.dataTables_wrapper {
 
           &.disabled {
             .page-link {
-              color: $muted-text;
+              color: $text-muted;
             }
           }
 

app/assets/stylesheets/shared/notifications.scss

@@ -11,7 +11,7 @@
     z-index: 2;
 
     .time {
-      color: $muted-text;
+      color: $text-muted;
     }
   }
 

app/assets/stylesheets/shared/textile.scss

@@ -249,7 +249,7 @@
         justify-content: center;
 
         h5 {
-          color: $muted-text;
+          color: $text-muted;
           margin-bottom: 1.75rem;
         }
       }