diff --git a/src/app/content/components/popUp/__snapshots__/ChapterFilter.spec.tsx.snap b/src/app/content/components/popUp/__snapshots__/ChapterFilter.spec.tsx.snap
index 929605d2927..9bf422ba0b2 100644
--- a/src/app/content/components/popUp/__snapshots__/ChapterFilter.spec.tsx.snap
+++ b/src/app/content/components/popUp/__snapshots__/ChapterFilter.spec.tsx.snap
@@ -115,8 +115,8 @@ input:checked + .c10 .c12 {
 .c8:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c8:focus-within .c9 {
@@ -161,8 +161,8 @@ input:checked + .c10 .c12 {
 .c15:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c15:focus-within .c9 {
diff --git a/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap b/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap
index f44870b0dc9..284975a50d8 100644
--- a/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap
+++ b/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap
@@ -115,8 +115,8 @@ input:checked + .c8 .c10 {
 .c6:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c6:focus-within .c7 {
@@ -161,8 +161,8 @@ input:checked + .c8 .c10 {
 .c22:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c22:focus-within .c7 {
@@ -296,8 +296,8 @@ input:checked + .c8 .c10 {
 
 .c13 input:focus + .c16 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c20 {
@@ -329,8 +329,8 @@ input:checked + .c8 .c10 {
 
 .c20 input:focus + .c16 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c23 {
@@ -362,8 +362,8 @@ input:checked + .c8 .c10 {
 
 .c23 input:focus + .c16 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c25 {
@@ -395,8 +395,8 @@ input:checked + .c8 .c10 {
 
 .c25 input:focus + .c16 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c27 {
@@ -428,8 +428,8 @@ input:checked + .c8 .c10 {
 
 .c27 input:focus + .c16 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c19 {
diff --git a/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap b/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap
index 223ca863b41..d20b7dd3e81 100644
--- a/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap
+++ b/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap
@@ -254,8 +254,8 @@ exports[`ContextMenu match snapshot when open 1`] = `
 
 .c16 input:focus + .c20 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c23 {
@@ -287,8 +287,8 @@ exports[`ContextMenu match snapshot when open 1`] = `
 
 .c23 input:focus + .c20 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c25 {
@@ -324,8 +324,8 @@ exports[`ContextMenu match snapshot when open 1`] = `
 
 .c25 input:focus + .c20 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c27 {
@@ -357,8 +357,8 @@ exports[`ContextMenu match snapshot when open 1`] = `
 
 .c27 input:focus + .c20 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c29 {
@@ -390,8 +390,8 @@ exports[`ContextMenu match snapshot when open 1`] = `
 
 .c29 input:focus + .c20 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c17 {
diff --git a/src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap b/src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap
index e4abcf53f04..e11df27f8d9 100644
--- a/src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap
+++ b/src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap
@@ -69,8 +69,8 @@ input:checked + .c21 .c22 {
 .c19:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c19:focus-within .c20 {
@@ -277,8 +277,8 @@ input:checked + .c21 .c22 {
 
 .c25 input:focus + .c28 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c32 {
@@ -310,8 +310,8 @@ input:checked + .c21 .c22 {
 
 .c32 input:focus + .c28 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c34 {
@@ -343,8 +343,8 @@ input:checked + .c21 .c22 {
 
 .c34 input:focus + .c28 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c36 {
@@ -376,8 +376,8 @@ input:checked + .c21 .c22 {
 
 .c36 input:focus + .c28 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c38 {
@@ -409,8 +409,8 @@ input:checked + .c21 .c22 {
 
 .c38 input:focus + .c28 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c48 {
diff --git a/src/app/content/highlights/components/__snapshots__/ColorIndicator.spec.tsx.snap b/src/app/content/highlights/components/__snapshots__/ColorIndicator.spec.tsx.snap
index 889e6d0971d..c14feee77fd 100644
--- a/src/app/content/highlights/components/__snapshots__/ColorIndicator.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/ColorIndicator.spec.tsx.snap
@@ -47,8 +47,8 @@ exports[`ColorIndicator matches snapshot (checked) 1`] = `
 
 .c7 input:focus + .c4 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c0 {
@@ -84,8 +84,8 @@ exports[`ColorIndicator matches snapshot (checked) 1`] = `
 
 .c0 input:focus + .c4 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 <div
@@ -198,8 +198,8 @@ exports[`ColorIndicator matches snapshot 1`] = `
 
 .c0 input:focus + .c4 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 <div
diff --git a/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap b/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
index 298e806180c..6c55b33568d 100644
--- a/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
@@ -125,8 +125,8 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
 
 .c1 input:focus + .c6 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c9 {
@@ -158,8 +158,8 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
 
 .c9 input:focus + .c6 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c11 {
@@ -191,8 +191,8 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
 
 .c11 input:focus + .c6 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c13 {
@@ -224,8 +224,8 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
 
 .c13 input:focus + .c6 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c15 {
@@ -257,8 +257,8 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
 
 .c15 input:focus + .c6 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c2 {
diff --git a/src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap b/src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap
index 74fd9b917c4..f7cfb608cb3 100644
--- a/src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap
+++ b/src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap
@@ -72,8 +72,8 @@ input:checked + .c21 .c22 {
 .c19:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c19:focus-within .c20 {
@@ -115,8 +115,8 @@ input:checked + .c21 .c22 {
 .c25:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c25:focus-within .c20 {
@@ -369,8 +369,8 @@ input:checked + .c21 .c22 {
 
 .c28 input:focus + .c31 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c35 {
@@ -402,8 +402,8 @@ input:checked + .c21 .c22 {
 
 .c35 input:focus + .c31 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c37 {
@@ -435,8 +435,8 @@ input:checked + .c21 .c22 {
 
 .c37 input:focus + .c31 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c39 {
@@ -468,8 +468,8 @@ input:checked + .c21 .c22 {
 
 .c39 input:focus + .c31 {
   display: block;
-  outline: 0.1rem dotted #212121;
-  outline: 0.5rem auto -webkit-focus-ring-color;
+  outline: 0.2rem auto Highlight;
+  outline: 0.2rem inset -webkit-focus-ring-color;
 }
 
 .c10 {