WIP: override outline buttons

packages/core/scss/bootstrap/apply.scss

@@ -43,3 +43,4 @@
 
 // override
 @import './override/badge';
+@import './override/buttons';

packages/core/scss/bootstrap/override/_buttons.scss

@@ -0,0 +1,21 @@
+// @use '../theming/utils/button-outline-variant';
+
+:root[data-bs-theme='light'] {
+  @each $color, $value in $theme-colors {
+    @if $color != 'primary' and $color != 'secondary' {
+      .btn-outline-#{$color} {
+        // @include button-outline-variant.button-outline-variant-light($value);
+      }
+    }
+  }
+}
+
+:root[data-bs-theme='dark'] {
+  @each $color, $value in $theme-colors {
+    @if $color != 'primary' and $color != 'secondary' {
+      .btn-outline-#{$color} {
+        // @include button-outline-variant.button-outline-variant-dark($value);
+      }
+    }
+  }
+}

packages/core/scss/bootstrap/theming/utils/_button-outline-variant.scss

@@ -0,0 +1,59 @@
+@mixin button-outline-variant-light(
+  $color,
+  $background: mix(#fff, $color, 90%),
+  $border: $color,
+  $hover-background: mix(#fff, $color, 85%),
+  $hover-border: $border,
+  $hover-color: $color,
+  $active-background: mix(#fff, $color, 70%),
+  $active-border: $border,
+  $active-color: $color,
+  $disabled-background: $background,
+  $disabled-border: $border,
+  $disabled-color: $color
+) {
+
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-bg: #{$background};
+  --#{$prefix}btn-border-color: #{$border};
+  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-border};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$disabled-color};
+  --#{$prefix}btn-disabled-bg: #{$disabled-background};
+  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
+}
+
+@mixin button-outline-variant-dark(
+  $color,
+  $background: mix($gray-900, $color, 85%),
+  $border: mix($gray-900, $color, 50%),
+  $hover-background: mix($gray-900, $color, 80%),
+  $hover-border: $border,
+  $hover-color: $color,
+  $active-background: mix($gray-900, $color, 65%),
+  $active-border: $border,
+  $active-color: $color,
+  $disabled-background: $background,
+  $disabled-border: $border,
+  $disabled-color: $color
+) {
+
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-bg: #{$background};
+  --#{$prefix}btn-border-color: #{$border};
+  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-border};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$disabled-color};
+  --#{$prefix}btn-disabled-bg: #{$disabled-background};
+  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
+}