adjust mono-blue colors

apps/app/src/components/Sidebar/Sidebar.module.scss

@@ -237,7 +237,7 @@
     --bs-border-color: var(--grw-highlight-800);
 
     .grw-contextual-navigation {
-      background-color: rgba(var(--grw-highlight-900-rgb), .5);
+      background-color: rgba(var(--grw-highlight-800-rgb), .5);
     }
   }
 }

apps/app/src/components/Sidebar/SidebarNav.module.scss

@@ -124,7 +124,7 @@
 }
 @include bs.color-mode(dark) {
   .grw-sidebar-nav :global {
-    background-color: var(--grw-sidebar-nav-bg, var(--grw-highlight-900));
+    background-color: var(--grw-sidebar-nav-bg, var(--grw-highlight-800));
 
     .btn-primary {
       --bs-btn-color: var(--grw-sidebar-nav-btn-color, var(--grw-primary-400));

packages/core/scss/bootstrap/theming/utils/_color-palette.scss

@@ -1,31 +1,31 @@
-@mixin generate-color-palette($color, $value, $shade-color-ratio: 20%, $tint-color-ratio: 20%, $prefix: 'grw-') {
-  $color-900: shade-color($value, $shade-color-ratio * 4);
-  $color-800: shade-color($value, $shade-color-ratio * 3);
-  $color-700: shade-color($value, $shade-color-ratio * 2);
-  $color-600: shade-color($value, $shade-color-ratio);
-  $color-500: $value;
-  $color-400: tint-color($value, $tint-color-ratio);
-  $color-300: tint-color($value, $tint-color-ratio * 2);
-  $color-200: tint-color($value, $tint-color-ratio * 3);
-  $color-100: tint-color($value, $tint-color-ratio * 4);
+@mixin generate-color-palette($color-id, $color-value, $shade-color: black, $tint-color: white, $shade-color-ratio: 20%, $tint-color-ratio: 20%, $prefix: 'grw-') {
+  $color-900: mix($shade-color, $color-value, $shade-color-ratio * 4);
+  $color-800: mix($shade-color, $color-value, $shade-color-ratio * 3);
+  $color-700: mix($shade-color, $color-value, $shade-color-ratio * 2);
+  $color-600: mix($shade-color, $color-value, $shade-color-ratio);
+  $color-500: $color-value;
+  $color-400: mix($tint-color, $color-value, $tint-color-ratio);
+  $color-300: mix($tint-color, $color-value, $tint-color-ratio * 2);
+  $color-200: mix($tint-color, $color-value, $tint-color-ratio * 3);
+  $color-100: mix($tint-color, $color-value, $tint-color-ratio * 4);
 
-  --#{$prefix}#{$color}-900: #{$color-900};
-  --#{$prefix}#{$color}-800: #{$color-800};
-  --#{$prefix}#{$color}-700: #{$color-700};
-  --#{$prefix}#{$color}-600: #{$color-600};
-  --#{$prefix}#{$color}-500: #{$color-500};
-  --#{$prefix}#{$color}-400: #{$color-400};
-  --#{$prefix}#{$color}-300: #{$color-300};
-  --#{$prefix}#{$color}-200: #{$color-200};
-  --#{$prefix}#{$color}-100: #{$color-100};
+  --#{$prefix}#{$color-id}-900: #{$color-900};
+  --#{$prefix}#{$color-id}-800: #{$color-800};
+  --#{$prefix}#{$color-id}-700: #{$color-700};
+  --#{$prefix}#{$color-id}-600: #{$color-600};
+  --#{$prefix}#{$color-id}-500: #{$color-500};
+  --#{$prefix}#{$color-id}-400: #{$color-400};
+  --#{$prefix}#{$color-id}-300: #{$color-300};
+  --#{$prefix}#{$color-id}-200: #{$color-200};
+  --#{$prefix}#{$color-id}-100: #{$color-100};
 
-  --#{$prefix}#{$color}-900-rgb: #{to-rgb($color-900)};
-  --#{$prefix}#{$color}-800-rgb: #{to-rgb($color-800)};
-  --#{$prefix}#{$color}-700-rgb: #{to-rgb($color-700)};
-  --#{$prefix}#{$color}-600-rgb: #{to-rgb($color-600)};
-  --#{$prefix}#{$color}-500-rgb: #{to-rgb($color-500)};
-  --#{$prefix}#{$color}-400-rgb: #{to-rgb($color-400)};
-  --#{$prefix}#{$color}-300-rgb: #{to-rgb($color-300)};
-  --#{$prefix}#{$color}-200-rgb: #{to-rgb($color-200)};
-  --#{$prefix}#{$color}-100-rgb: #{to-rgb($color-100)};
+  --#{$prefix}#{$color-id}-900-rgb: #{to-rgb($color-900)};
+  --#{$prefix}#{$color-id}-800-rgb: #{to-rgb($color-800)};
+  --#{$prefix}#{$color-id}-700-rgb: #{to-rgb($color-700)};
+  --#{$prefix}#{$color-id}-600-rgb: #{to-rgb($color-600)};
+  --#{$prefix}#{$color-id}-500-rgb: #{to-rgb($color-500)};
+  --#{$prefix}#{$color-id}-400-rgb: #{to-rgb($color-400)};
+  --#{$prefix}#{$color-id}-300-rgb: #{to-rgb($color-300)};
+  --#{$prefix}#{$color-id}-200-rgb: #{to-rgb($color-200)};
+  --#{$prefix}#{$color-id}-100-rgb: #{to-rgb($color-100)};
 }

packages/preset-themes/src/styles/mono-blue.scss

@@ -7,8 +7,8 @@
   $secondary: $gray-600;
   $highlight: #93e3ea;
 
-  @include generate-color-palette('primary', $primary);
-  @include generate-color-palette('highlight', $highlight);
+  @include generate-color-palette('primary', $primary, #021529, white);
+  @include generate-color-palette('highlight', $highlight, black, #edffff);
 
   $body-color:                $gray-700;
   $body-bg:                   white;
@@ -43,12 +43,12 @@
 
   $primary: #439cb9;
   $secondary: $gray-500;
-  $highlight: #64a9ed;
+  $highlight: #166cc0;
 
-  @include generate-color-palette('primary', $primary);
-  @include generate-color-palette('highlight', $highlight);
+  @include generate-color-palette('primary', $primary, #021529, white);
+  @include generate-color-palette('highlight', $highlight, black, white);
 
-  $body-color-dark:                   $gray-200;
+  $body-color-dark:                   $gray-400;
   $body-bg-dark:                      #16202c;
 
   $body-secondary-color-dark:         rgba($body-color-dark, .75);
@@ -59,7 +59,7 @@
 
   $border-color-dark:                 $gray-700;
 
-  $link-color-dark:                   $gray-300;
+  $link-color-dark:                   $gray-400;
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';