add a mixin for color palette

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

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

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

@@ -1,9 +1,14 @@
 :root[data-bs-theme='light'] {
   @import '@growi/core/scss/bootstrap/init-stage-1';
   @import '@growi/core/scss/bootstrap/theming/variables';
+  @import '@growi/core/scss/bootstrap/theming/utils/color-palette';
 
-  $primary: orange;
+  $primary: #409cb9;
   $secondary: $gray-600;
+  $highlight: #93e3ea;
+
+  @include generate-color-palette('primary', $primary);
+  @include generate-color-palette('highlight', $highlight);
 
   $body-color:                $gray-900;
   $body-bg:                   white;

packages/preset-themes/src/styles/theme/mixins/_colors.scss

@@ -1,5 +0,0 @@
-@mixin generate-color-palette($colors) {
-  @each $color, $value in $colors {
-    --#{$prefix}#{$color}: #{$value};
-  }
-}