From f6d5152a37fa35d7a9d004c49278bf88d9bb6d5a Mon Sep 17 00:00:00 2001
From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>
Date: Tue, 16 Apr 2024 16:56:43 +0200
Subject: [PATCH] Merge pull request #17904 from
 overleaf/td-bs5-button-focus-style

Bootstrap 5: fixes to button focus ring and background colour

GitOrigin-RevId: d89077e975c2aeb7fea385e0b8c34c92c104cc2b
---
 .../bootstrap-5/abstracts/mixins.scss         | 85 ------------------
 .../bootstrap-5/components/button.scss        | 89 +++++++++++++++++++
 2 files changed, 89 insertions(+), 85 deletions(-)

diff --git a/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss b/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss
index adc531d47c..96c0c084f1 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss
+++ b/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);
-  }
-}
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/button.scss b/services/web/frontend/stylesheets/bootstrap-5/components/button.scss
index 2cd78f2fcb..d2ead1bfcf 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/button.scss
+++ b/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;