Merge pull request #17904 from overleaf/td-bs5-button-focus-style

Bootstrap 5: fixes to button focus ring and background colour

GitOrigin-RevId: d89077e975c2aeb7fea385e0b8c34c92c104cc2b

services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss

@@ -44,88 +44,3 @@
     border-color: var(--bs-btn-border-color);
   }
 }
-
-.btn {
-  // Focus style for all buttons
-  --bs-btn-focus-box-shadow: 0 0 0 2px var(--border-active-dark);
-
-  // Sizes
-
-  // Default size
-  @include ol-button-size(
-    $font-size: var(--font-size-03),
-    $line-height: var(--line-height-03),
-    $padding-y: var(--spacing-03)
-  );
-
-  &.btn-lg {
-    @include ol-button-size(
-      $font-size: var(--font-size-03),
-      $line-height: var(--line-height-03),
-      $padding-y: var(--spacing-05)
-    );
-  }
-
-  &.btn-sm {
-    @include ol-button-size(
-      $font-size: var(--font-size-02),
-      $line-height: var(--line-height-02),
-      $padding-y: var(--spacing-01),
-      $padding-x: var(--spacing-05)
-    );
-  }
-
-  // Variants
-  &.btn-primary {
-    @include ol-button-variant(
-      $color: var(--content-primary-dark),
-      $background: var(--bg-accent-01),
-      $hover-background: var(--bg-accent-02),
-      $hover-border: var(--bg-accent-02)
-    );
-  }
-
-  &.btn-secondary {
-    @include ol-button-variant(
-      $color: var(--content-primary),
-      $background: var(--bg-light-primary),
-      $border: var(--border-primary),
-      $hover-background: var(--bg-light-tertiary),
-      $hover-border: var(--border-primary),
-      $borderless: false
-    );
-  }
-
-  &.btn-ghost {
-    @include ol-button-variant(
-      $color: var(--content-primary),
-      $background: var(--bg-light-primary),
-      $hover-background: var(--bg-light-tertiary)
-    );
-  }
-
-  &.btn-danger {
-    @include ol-button-variant(
-      $color: var(--content-primary-dark),
-      $background: var(--bg-danger-01),
-      $border: var(--bg-danger-01),
-      $hover-background: var(--bg-danger-02)
-    );
-  }
-
-  &.btn-danger-ghost {
-    @include ol-button-variant(
-      $color: var(--content-danger),
-      $background: var(--bg-light-primary),
-      $hover-background: var(--bg-danger-03)
-    );
-  }
-
-  &.btn-premium {
-    @include ol-button-variant(
-      $color: var(--content-primary-dark),
-      $background: var(--blue-70)
-    );
-    background: var(--premium-gradient);
-  }
-}

services/web/frontend/stylesheets/bootstrap-5/components/button.scss

@@ -1,3 +1,92 @@
+.btn {
+  // Focus style for all buttons
+  --bs-btn-focus-box-shadow: 0 0 0 2px var(--border-active-dark);
+
+  &:focus-visible {
+    background-color: var(--bs-btn-bg);
+  }
+
+  // Sizes
+
+  // Default size
+  @include ol-button-size(
+    $font-size: var(--font-size-03),
+    $line-height: var(--line-height-03),
+    $padding-y: var(--spacing-03)
+  );
+
+  &.btn-lg {
+    @include ol-button-size(
+      $font-size: var(--font-size-03),
+      $line-height: var(--line-height-03),
+      $padding-y: var(--spacing-05)
+    );
+  }
+
+  &.btn-sm {
+    @include ol-button-size(
+      $font-size: var(--font-size-02),
+      $line-height: var(--line-height-02),
+      $padding-y: var(--spacing-01),
+      $padding-x: var(--spacing-05)
+    );
+  }
+
+  // Variants
+  &.btn-primary {
+    @include ol-button-variant(
+      $color: var(--content-primary-dark),
+      $background: var(--bg-accent-01),
+      $hover-background: var(--bg-accent-02),
+      $hover-border: var(--bg-accent-02)
+    );
+  }
+
+  &.btn-secondary {
+    @include ol-button-variant(
+      $color: var(--content-primary),
+      $background: var(--bg-light-primary),
+      $border: var(--border-primary),
+      $hover-background: var(--bg-light-tertiary),
+      $hover-border: var(--border-primary),
+      $borderless: false
+    );
+  }
+
+  &.btn-ghost {
+    @include ol-button-variant(
+      $color: var(--content-primary),
+      $background: var(--bg-light-primary),
+      $hover-background: var(--bg-light-tertiary)
+    );
+  }
+
+  &.btn-danger {
+    @include ol-button-variant(
+      $color: var(--content-primary-dark),
+      $background: var(--bg-danger-01),
+      $border: var(--bg-danger-01),
+      $hover-background: var(--bg-danger-02)
+    );
+  }
+
+  &.btn-danger-ghost {
+    @include ol-button-variant(
+      $color: var(--content-danger),
+      $background: var(--bg-light-primary),
+      $hover-background: var(--bg-danger-03)
+    );
+  }
+
+  &.btn-premium {
+    @include ol-button-variant(
+      $color: var(--content-primary-dark),
+      $background: var(--blue-70)
+    );
+    background: var(--premium-gradient);
+  }
+}
+
 .button-loading {
   align-items: center;
   display: inline-grid;