feat(switch): use inset border increase and update outline offset

michael-iden · michael-iden · commit 19ebdfaccebc · 2024-10-31T11:33:33.000-04:00
diff --git a/packages/pharos/src/components/switch/pharos-switch.scss b/packages/pharos/src/components/switch/pharos-switch.scss
@@ -26,7 +26,7 @@
 
   &:hover {
     border-color: var(--pharos-color-marble-gray-30);
-    box-shadow: 0 0 0 1px var(--pharos-color-marble-gray-30);
+    box-shadow: inset 0 0 0 1px var(--pharos-color-marble-gray-30);
   }
 
   &::before {
@@ -55,7 +55,7 @@
     border-color: var(--pharos-color-green-base);
 
     &:hover {
-      box-shadow: 0 0 0 1px var(--pharos-color-green-base);
+      box-shadow: inset 0 0 0 1px var(--pharos-color-green-base);
     }
 
     &::before {
@@ -83,9 +83,9 @@
 #switch-element:focus-visible {
   + .input-wrapper .switch__control {
     outline: 2px solid var(--pharos-color-focus);
-    outline-offset: 3px;
+    outline-offset: 2px;
     border-color: var(--pharos-color-marble-gray-30);
-    box-shadow: 0 0 0 1px var(--pharos-color-marble-gray-30);
+    box-shadow: inset 0 0 0 1px var(--pharos-color-marble-gray-30);
   }
 }
 
@@ -116,8 +116,8 @@
 #switch-element:focus-visible:checked {
   + .input-wrapper .switch__control {
     outline: 2px solid var(--pharos-color-focus);
-    outline-offset: 3px;
+    outline-offset: 2px;
     border-color: var(--pharos-color-green-base);
-    box-shadow: 0 0 0 1px var(--pharos-color-green-base);
+    box-shadow: inset 0 0 0 1px var(--pharos-color-green-base);
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@`
`26`	`26`
`27`	`27`	`&:hover {`
`28`	`28`	`border-color: var(--pharos-color-marble-gray-30);`
`29`		`- box-shadow: 0 0 0 1px var(--pharos-color-marble-gray-30);`
	`29`	`+ box-shadow: inset 0 0 0 1px var(--pharos-color-marble-gray-30);`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`&::before {`
`@@ -55,7 +55,7 @@`
`55`	`55`	`border-color: var(--pharos-color-green-base);`
`56`	`56`
`57`	`57`	`&:hover {`
`58`		`- box-shadow: 0 0 0 1px var(--pharos-color-green-base);`
	`58`	`+ box-shadow: inset 0 0 0 1px var(--pharos-color-green-base);`
`59`	`59`	`}`
`60`	`60`
`61`	`61`	`&::before {`
`@@ -83,9 +83,9 @@`
`83`	`83`	`#switch-element:focus-visible {`
`84`	`84`	`+ .input-wrapper .switch__control {`
`85`	`85`	`outline: 2px solid var(--pharos-color-focus);`
`86`		`- outline-offset: 3px;`
	`86`	`+ outline-offset: 2px;`
`87`	`87`	`border-color: var(--pharos-color-marble-gray-30);`
`88`		`- box-shadow: 0 0 0 1px var(--pharos-color-marble-gray-30);`
	`88`	`+ box-shadow: inset 0 0 0 1px var(--pharos-color-marble-gray-30);`
`89`	`89`	`}`
`90`	`90`	`}`
`91`	`91`
`@@ -116,8 +116,8 @@`
`116`	`116`	`#switch-element:focus-visible:checked {`
`117`	`117`	`+ .input-wrapper .switch__control {`
`118`	`118`	`outline: 2px solid var(--pharos-color-focus);`
`119`		`- outline-offset: 3px;`
	`119`	`+ outline-offset: 2px;`
`120`	`120`	`border-color: var(--pharos-color-green-base);`
`121`		`- box-shadow: 0 0 0 1px var(--pharos-color-green-base);`
	`121`	`+ box-shadow: inset 0 0 0 1px var(--pharos-color-green-base);`
`122`	`122`	`}`
`123`	`123`	`}`