Merge pull request #2803 from abhi-innovaccer/feat-switch-outline-focus

feat(switch): enhance focus and existing states with outlines and bor…

Author: anuradha9712

css/src/components/switch.module.css

@@ -42,12 +42,14 @@
 }
 
 .Switch-input:focus ~ .Switch-wrapper {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
   background-color: var(--secondary-light);
 }
 
 .Switch-input:focus ~ .Switch-wrapper--checked {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
   background-color: var(--primary);
 }
 
@@ -67,6 +69,14 @@
   background-color: var(--primary-darker);
 }
 
+.Switch-input:active ~ .Switch-wrapper:before {
+  border-color: var(--inverse-light);
+}
+
+.Switch-input:active ~ .Switch-wrapper--checked:before {
+  border-color: transparent;
+}
+
 .Switch-wrapper--tiny {
   border-radius: var(--border-radius-full);
 }
@@ -88,6 +98,7 @@
   border-radius: var(--border-radius-full);
   box-sizing: border-box;
   transition-duration: 80ms;
+  border: var(--border-width-2-5) solid var(--inverse-lighter);
 }
 
 .Switch-wrapper--checked {
@@ -102,6 +113,7 @@
   -ms-transform: translateX(100%);
   transform: translateX(100%);
   transition-duration: 80ms;
+  border-color: transparent;
 }
 
 .Switch--disabled {
@@ -112,6 +124,14 @@
   background-color: var(--secondary-lighter);
 }
 
+.Switch-wrapper--disabled:before {
+  border-color: var(--secondary-dark);
+}
+
 .Switch-wrapper--checkedDisabled {
   background-color: var(--primary-lighter);
 }
+
+.Switch-wrapper--checkedDisabled:before {
+  border-color: transparent;
+}