generate css vars

packages/core/scss/bootstrap/theming/_buttons.scss

@@ -0,0 +1,15 @@
+.btn-primary {
+  @include button-variant($primary, $primary);
+}
+
+.btn-outline-primary {
+  @include button-outline-variant($primary);
+}
+
+.btn-secondary {
+  @include button-variant($secondary, $secondary);
+}
+
+.btn-outline-secondary {
+  @include button-outline-variant($secondary);
+}

packages/core/scss/bootstrap/theming/_list-group.scss

@@ -0,0 +1,4 @@
+.list-group {
+  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
+  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
+}

packages/core/scss/bootstrap/theming/_pagination.scss

@@ -0,0 +1,5 @@
+.pagination {
+  --#{$prefix}pagination-active-color: #{$pagination-active-color};
+  --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
+  --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
+}

packages/core/scss/bootstrap/theming/_progress.scss

@@ -0,0 +1,4 @@
+.progress,
+.progress-stacked {
+  --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
+}

packages/core/scss/bootstrap/theming/_root-dark.scss

@@ -0,0 +1,41 @@
+& {
+  --#{$prefix}body-color: #{$body-color-dark};
+  --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
+  --#{$prefix}body-bg: #{$body-bg-dark};
+  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
+
+  --#{$prefix}emphasis-color: #{$body-emphasis-color-dark};
+  --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
+
+  --#{$prefix}secondary-color: #{$body-secondary-color-dark};
+  --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
+  --#{$prefix}secondary-bg: #{$body-secondary-bg-dark};
+  --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
+
+  --#{$prefix}tertiary-color: #{$body-tertiary-color-dark};
+  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
+  --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark};
+  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
+
+  @each $color, $value in $theme-colors-text-dark {
+    --#{$prefix}#{$color}-text-emphasis: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-bg-subtle-dark {
+    --#{$prefix}#{$color}-bg-subtle: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-border-subtle-dark {
+    --#{$prefix}#{$color}-border-subtle: #{$value};
+  }
+
+  --#{$prefix}link-color: #{$link-color-dark};
+  --#{$prefix}link-hover-color: #{$link-hover-color-dark};
+  --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
+  --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
+
+  --#{$prefix}code-color: #{$code-color-dark};
+
+  --#{$prefix}border-color: #{$border-color-dark};
+  --#{$prefix}border-color-translucent: #{$border-color-translucent-dark};
+}

packages/core/scss/bootstrap/theming/_root-light.scss

@@ -0,0 +1,62 @@
+& {
+  @each $color, $value in $theme-colors {
+    @if $color == 'primary' or $color == 'secondary' {
+      --#{$prefix}#{$color}: #{$value};
+    }
+  }
+
+  @each $color, $value in $theme-colors-rgb {
+    @if $color == 'primary' or $color == 'secondary' {
+      --#{$prefix}#{$color}-rgb: #{$value};
+    }
+  }
+
+  @each $color, $value in $theme-colors-text {
+    @if $color == 'primary' or $color == 'secondary' {
+      --#{$prefix}#{$color}-text-emphasis: #{$value};
+    }
+  }
+
+  @each $color, $value in $theme-colors-bg-subtle {
+    @if $color == 'primary' or $color == 'secondary' {
+      --#{$prefix}#{$color}-bg-subtle: #{$value};
+    }
+  }
+
+  @each $color, $value in $theme-colors-border-subtle {
+    @if $color == 'primary' or $color == 'secondary' {
+      --#{$prefix}#{$color}-border-subtle: #{$value};
+    }
+  }
+
+  // Root and body
+  --#{$prefix}body-color: #{$body-color};
+  --#{$prefix}body-color-rgb: #{to-rgb($body-color)};
+  --#{$prefix}body-bg: #{$body-bg};
+  --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
+
+  --#{$prefix}emphasis-color: #{$body-emphasis-color};
+  --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
+
+  --#{$prefix}secondary-color: #{$body-secondary-color};
+  --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
+  --#{$prefix}secondary-bg: #{$body-secondary-bg};
+  --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
+
+  --#{$prefix}tertiary-color: #{$body-tertiary-color};
+  --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
+  --#{$prefix}tertiary-bg: #{$body-tertiary-bg};
+  --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
+
+  --#{$prefix}link-color: #{$link-color};
+  --#{$prefix}link-color-rgb: #{to-rgb($link-color)};
+
+  --#{$prefix}link-hover-color: #{$link-hover-color};
+  --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
+
+  --#{$prefix}code-color: #{$code-color};
+  --#{$prefix}highlight-bg: #{$mark-bg};
+
+  --#{$prefix}border-color: #{$border-color};
+  --#{$prefix}border-color-translucent: #{$border-color-translucent};
+}

packages/core/scss/bootstrap/theming/_tables.scss

@@ -0,0 +1,5 @@
+@each $color, $value in $table-variants {
+  @if $color == 'primary' or $color == 'secondary' {
+    @include table-variant($color, $value);
+  }
+}

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

@@ -1,18 +1,34 @@
-@import '@growi/core/scss/bootstrap/init-stage-1';
+:root[data-bs-theme='light'] {
+  @import '@growi/core/scss/bootstrap/init-stage-1';
+  @import '@growi/core/scss/bootstrap/theming/variables';
 
-$primary: orange !default;
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/variables-dark';
+  $primary: orange;
+  $secondary: $gray-600;
 
-@import '@growi/core/scss/bootstrap/init-stage-2';
+  $body-color:                $gray-900;
+  $body-bg:                   white;
 
-:root[data-bs-theme='light'] {
-  .btn-primary {
-    @include button-variant($primary, $primary);
-  }
-  .btn-outline-primary {
-    @include button-outline-variant($primary);
-  }
+  $body-secondary-color:      rgba($body-color, .75);
+  $body-secondary-bg:         $gray-200;
+
+  $body-tertiary-color:       rgba($body-color, .5);
+  $body-tertiary-bg:          $gray-100;
+
+  $body-emphasis-color:       black;
+
+  $link-color:                $primary;
+
+  @import 'bootstrap/scss/variables';
+  @import 'bootstrap/scss/variables-dark';
+
+  @import '@growi/core/scss/bootstrap/init-stage-2';
+
+  @import '@growi/core/scss/bootstrap/theming/root-light';
+  @import '@growi/core/scss/bootstrap/theming/tables';
+  @import '@growi/core/scss/bootstrap/theming/buttons';
+  @import '@growi/core/scss/bootstrap/theming/pagination';
+  @import '@growi/core/scss/bootstrap/theming/progress';
+  @import '@growi/core/scss/bootstrap/theming/list-group';
 }
 
 // @use '@growi/core/scss/bootstrap/init' as bs;