From 785bca55f4742a6238046c3b9012732a6345d55b Mon Sep 17 00:00:00 2001
From: Gregor Wassmann <gregor.wassmann@gmail.com>
Date: Fri, 24 Feb 2023 11:56:45 +0100
Subject: [PATCH] Form Switch should be square when enable-rounded is switched
 off

`$enable-rounded` turns round corners into sharp edges. For consistency, this should apply to the form switch component, too.

The form switch or toggle component should always be rounded even when `$enable-rounded: false`. A rectangular toggle may be thinkable but requires additional design effort.
---
 scss/_variables.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 31fa5e5d7a..38f05072f3 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -969,15 +969,16 @@ $form-check-inline-margin-end:    1rem !default;
 $form-switch-color:               rgba($black, .25) !default;
 $form-switch-width:               2em !default;
 $form-switch-padding-start:       $form-switch-width + .5em !default;
-$form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
+$form-switch-bg-shape:            if($enable-rounded, "circle r='3'", "rect x='-3' y='-3' width='6' height='6'") !default;
+$form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><#{$form-switch-bg-shape} fill='#{$form-switch-color}'/></svg>") !default;
 $form-switch-border-radius:       $form-switch-width !default;
 $form-switch-transition:          background-position .15s ease-in-out !default;
 
 $form-switch-focus-color:         $input-focus-border-color !default;
-$form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
+$form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><#{$form-switch-bg-shape} fill='#{$form-switch-focus-color}'/></svg>") !default;
 
 $form-switch-checked-color:       $component-active-color !default;
-$form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
+$form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><#{$form-switch-bg-shape} fill='#{$form-switch-checked-color}'/></svg>") !default;
 $form-switch-checked-bg-position: right center !default;
 // scss-docs-end form-switch-variables