From e650074746c4beea88ec591a4309add0a2d28032 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Tue, 4 Oct 2022 17:45:54 -0500
Subject: [PATCH] Switch Example using Button: Fix white on white bug  (Pull
 #2482)

Fix #2474, which resulted in the switch being displayed as white on white, by:
* updating the css to set button text color and SVG stroke color
* changing button height
* removing stroke color specification
---
 content/patterns/switch/examples/css/switch-button.css | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/content/patterns/switch/examples/css/switch-button.css b/content/patterns/switch/examples/css/switch-button.css
index 68bac82021..0ae51f4da9 100644
--- a/content/patterns/switch/examples/css/switch-button.css
+++ b/content/patterns/switch/examples/css/switch-button.css
@@ -5,8 +5,10 @@ button[role="switch"] {
   border: 0 solid #005a9c;
   border-radius: 5px;
   width: 17em;
+  height: 3em;
   text-align: left;
   background-color: white;
+  color: black;
 }
 
 button[role="switch"] .label {
@@ -17,9 +19,13 @@ button[role="switch"] .label {
   margin: 0;
   width: 10em;
   vertical-align: middle;
+  color: black;
 }
 
 button[role="switch"] svg {
+  display: inline-block;
+  width: 36px;
+  height: 20px;
   forced-color-adjust: auto;
   position: relative;
   top: 4px;
@@ -55,7 +61,7 @@ button[role="switch"][aria-checked="true"] svg rect.on {
 }
 
 button[role="switch"] span.off {
-  display: inline;
+  display: inline-block;
 }
 
 button[role="switch"] span.on {
@@ -67,7 +73,7 @@ button[role="switch"][aria-checked="true"] span.off {
 }
 
 button[role="switch"][aria-checked="true"] span.on {
-  display: inline;
+  display: inline-block;
 }
 
 button[role="switch"]:focus,