Contrast fixes

scss/_alert.scss

@@ -34,6 +34,7 @@
 .alert-link {
   font-weight: $alert-link-font-weight;
   color: var(--#{$prefix}alert-link-color);
+  text-decoration: underline;
 }
 
 
@@ -69,7 +70,13 @@
     --#{$prefix}alert-color: #{color-contrast($value)};
     --#{$prefix}alert-bg: #{$value};
     --#{$prefix}alert-border-color: #{$value};
-    --#{$prefix}alert-link-color: #{shade-color(color-contrast($value), 10%)};
+    // The link deliberately keeps the alert's own text color. These alerts are
+    // solid and saturated, so `--#{$prefix}alert-color` is already at maximum
+    // contrast against the fill; any shade or tint of it can only reduce
+    // contrast. (The previous `shade-color(color-contrast($value), 10%)` shaded
+    // *white* to #e6e6e6 on the six dark alerts, making links dimmer than the
+    // surrounding text.) Emphasis comes from weight and the underline instead.
+    --#{$prefix}alert-link-color: var(--#{$prefix}alert-color);
   }
 }
 // scss-docs-end alert-modifiers

scss/_buttons.scss

@@ -156,13 +156,13 @@
 
 @each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
-    @include button-outline-variant($value);
+    @include button-outline-variant($color, $value);
   }
 }
 
 @each $color, $value in $theme-colors {
   .btn-tint-#{$color} {
-    @include button-tint-variant($value);
+    @include button-tint-variant($color, $value);
   }
 }
 // scss-docs-end btn-variant-loops

scss/_variables.scss

@@ -329,7 +329,7 @@ $info-text-emphasis:      shade-color($info, 60%) !default;
 $warning-text-emphasis:   shade-color($warning, 60%) !default;
 $danger-text-emphasis:    shade-color($danger, 60%) !default;
 $light-text-emphasis:     $gray-700 !default;
-$dark-text-emphasis:      $gray-700 !default;
+$dark-text-emphasis:      $gray-900 !default;
 // scss-docs-end theme-text-variables
 
 // scss-docs-start theme-bg-subtle-variables
@@ -340,7 +340,7 @@ $info-bg-subtle:          tint-color($info, 80%) !default;
 $warning-bg-subtle:       tint-color($warning, 80%) !default;
 $danger-bg-subtle:        tint-color($danger, 80%) !default;
 $light-bg-subtle:         mix($gray-100, $white) !default;
-$dark-bg-subtle:          $gray-400 !default;
+$dark-bg-subtle:          $gray-200 !default;
 // scss-docs-end theme-bg-subtle-variables
 
 // scss-docs-start theme-border-subtle-variables
@@ -1548,7 +1548,7 @@ $alert-padding-y:               $spacer !default;
 $alert-padding-x:               $spacer !default;
 $alert-margin-bottom:           1rem !default;
 $alert-border-radius:           var(--#{$prefix}border-radius) !default;
-$alert-link-font-weight:        $font-weight-normal !default;
+$alert-link-font-weight:        $font-weight-bold !default;
 $alert-border-width:            var(--#{$prefix}border-width) !default;
 $alert-dismissible-padding-r:   $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
 // scss-docs-end alert-variables

scss/mixins/_alert.scss

@@ -5,7 +5,7 @@
   --#{$prefix}alert-color: #{$color};
   --#{$prefix}alert-bg: #{$background};
   --#{$prefix}alert-border-color: #{$border};
-  --#{$prefix}alert-link-color: #{shade-color($color, 10%)};
+  --#{$prefix}alert-link-color: var(--#{$prefix}alert-color);
 
   @if $enable-gradients {
     background-image: var(--#{$prefix}gradient);

scss/mixins/_buttons.scss

@@ -36,62 +36,82 @@
 // scss-docs-end btn-variant-mixin
 
 // Tinted "outline" button variant.
-// The resting state uses a translucent tint of the color plus a slightly
-// darker border of the same hue. Hover deepens both the tint and the border;
-// active fills solid.
+//
+// This fork replaces Bootstrap's transparent outline buttons with a tinted
+// style. The tints are the opaque color-mode custom properties from
+// `_root.scss` (`-bg-subtle` / `-border-subtle` / `-text-emphasis`) rather
+// than `rgba()` of the theme color, for two reasons: translucent fills
+// composite over the parent element, so the button changes appearance on any
+// non-white background, and the raw theme color as text fails WCAG on light
+// fills (`$warning` is ~1.6:1 against white). The subtle/emphasis pair is
+// opaque and pre-darkened, and it swaps under `[data-bs-theme="dark"]`.
+//
+// Intensity ladder: rest is the subtle fill, hover fills solid, active deepens
+// the solid fill by the same shade/tint amounts the solid `.btn-*` variants
+// use. Hover deliberately jumps to solid rather than to `-border-subtle`: that
+// variable is a *border* color, not a background, and pairing it with
+// `-text-emphasis` lands around 4.1:1 in dark mode where both are mid-tone.
+//
+// `$name` is the `$theme-colors` key (e.g. "primary") used to build the custom
+// property names; `$color` is still needed for the focus ring and for
+// `color-contrast()` on the solid active state.
 // scss-docs-start btn-outline-variant-mixin
 @mixin button-outline-variant(
+  $name,
   $color,
-  $color-hover: $color,
-  $active-background: $color,
-  $active-color: color-contrast($active-background),
-  $tint-amount: .1,
-  $hover-tint-amount: .2,
-  $disabled-tint-amount: .1,
-  $border-tint-amount: .15,
-  $hover-border-tint-amount: .3
+  $hover-background: $color,
+  $color-hover: color-contrast($hover-background),
+  $active-background: if(color-contrast($color) == $color-contrast-light, shade-color($color, $btn-active-bg-shade-amount), tint-color($color, $btn-active-bg-tint-amount)),
+  $active-border: $active-background,
+  $active-color: color-contrast($active-background)
 ) {
-  --#{$prefix}btn-color: #{$color};
-  --#{$prefix}btn-bg: #{rgba($color, $tint-amount)};
-  --#{$prefix}btn-border-color: #{rgba($color, $border-tint-amount)};
+  --#{$prefix}btn-color: var(--#{$prefix}#{$name}-text-emphasis);
+  --#{$prefix}btn-bg: var(--#{$prefix}#{$name}-bg-subtle);
+  --#{$prefix}btn-border-color: var(--#{$prefix}#{$name}-border-subtle);
   --#{$prefix}btn-hover-color: #{$color-hover};
-  --#{$prefix}btn-hover-bg: #{rgba($color, $hover-tint-amount)};
-  --#{$prefix}btn-hover-border-color: #{rgba($color, $hover-border-tint-amount)};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-background};
   --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
   --#{$prefix}btn-active-color: #{$active-color};
   --#{$prefix}btn-active-bg: #{$active-background};
-  --#{$prefix}btn-active-border-color: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
   --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
-  --#{$prefix}btn-disabled-color: #{$color};
-  --#{$prefix}btn-disabled-bg: #{rgba($color, $disabled-tint-amount)};
-  --#{$prefix}btn-disabled-border-color: #{rgba($color, $border-tint-amount)};
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$name}-text-emphasis);
+  --#{$prefix}btn-disabled-bg: var(--#{$prefix}#{$name}-bg-subtle);
+  --#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$name}-border-subtle);
   --#{$prefix}gradient: none;
 }
 // scss-docs-end btn-outline-variant-mixin
 
 // Borderless, tinted button variant (`.btn-tint-*`).
-// Same tinted fill as the outline variant but with no border at all — every
-// border variable is left as its `.btn` default of transparent.
+// Same fill ladder as the outline variant with no border at all. Every border
+// variable is declared explicitly as `transparent`: `.btn` only defaults
+// `--#{$prefix}btn-border-color` and `--#{$prefix}btn-hover-border-color`, so
+// leaving the active and disabled ones undeclared makes `border-color:
+// var(…)` fall back to `currentColor` and draw a ring on `:active`.
 // scss-docs-start btn-tint-variant-mixin
 @mixin button-tint-variant(
+  $name,
   $color,
-  $color-hover: $color,
-  $active-background: $color,
-  $active-color: color-contrast($active-background),
-  $tint-amount: .1,
-  $hover-tint-amount: .2,
-  $disabled-tint-amount: .1
+  $hover-background: $color,
+  $color-hover: color-contrast($hover-background),
+  $active-background: if(color-contrast($color) == $color-contrast-light, shade-color($color, $btn-active-bg-shade-amount), tint-color($color, $btn-active-bg-tint-amount)),
+  $active-color: color-contrast($active-background)
 ) {
-  --#{$prefix}btn-color: #{$color};
-  --#{$prefix}btn-bg: #{rgba($color, $tint-amount)};
+  --#{$prefix}btn-color: var(--#{$prefix}#{$name}-text-emphasis);
+  --#{$prefix}btn-bg: var(--#{$prefix}#{$name}-bg-subtle);
+  --#{$prefix}btn-border-color: transparent;
   --#{$prefix}btn-hover-color: #{$color-hover};
-  --#{$prefix}btn-hover-bg: #{rgba($color, $hover-tint-amount)};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: transparent;
   --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
   --#{$prefix}btn-active-color: #{$active-color};
   --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: transparent;
   --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
-  --#{$prefix}btn-disabled-color: #{$color};
-  --#{$prefix}btn-disabled-bg: #{rgba($color, $disabled-tint-amount)};
+  --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$name}-text-emphasis);
+  --#{$prefix}btn-disabled-bg: var(--#{$prefix}#{$name}-bg-subtle);
+  --#{$prefix}btn-disabled-border-color: transparent;
   --#{$prefix}gradient: none;
 }
 // scss-docs-end btn-tint-variant-mixin