From f1d89acca6f85c44c8a443bf8e187649cde1dd17 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Mon, 24 Apr 2023 21:25:23 +0000
Subject: [PATCH 1/7] Fix create-slots utils path

---
 src/ActionList/shared.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ActionList/shared.ts b/src/ActionList/shared.ts
index ca99d5ec5fa..ff77e7975b8 100644
--- a/src/ActionList/shared.ts
+++ b/src/ActionList/shared.ts
@@ -2,7 +2,7 @@ import React from 'react'
 
 import {AriaRole} from '../utils/types'
 import {SxProp} from '../sx'
-import createSlots from '../utils/create-slots'
+import createSlots from '../deprecated/utils/create-slots'
 
 export type ActionListItemProps = {
   /**

From ba71bf1af89f8c24bca1fbd28495d67540c574eb Mon Sep 17 00:00:00 2001
From: "Amanda G. Brown" <green6erry@gmail.com>
Date: Mon, 24 Apr 2023 16:37:30 -0600
Subject: [PATCH 2/7] fix(TextInput): changed aria-live polite

---
 src/TextInput/TextInput.tsx | 1 -
 src/_InputValidation.tsx    | 1 +
 2 files changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/TextInput/TextInput.tsx b/src/TextInput/TextInput.tsx
index ff915a29f4f..eb715d4dc5f 100644
--- a/src/TextInput/TextInput.tsx
+++ b/src/TextInput/TextInput.tsx
@@ -126,7 +126,6 @@ const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
         hasTrailingAction={Boolean(trailingAction)}
         isInputFocused={isInputFocused}
         onClick={focusInput}
-        aria-live="polite"
         aria-busy={Boolean(loading)}
       >
         {IconComponent && <IconComponent className="TextInput-icon" />}
diff --git a/src/_InputValidation.tsx b/src/_InputValidation.tsx
index 8db0185ccd7..28d2659cda1 100644
--- a/src/_InputValidation.tsx
+++ b/src/_InputValidation.tsx
@@ -43,6 +43,7 @@ const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, id
         },
         ...sx,
       }}
+      aria-live="polite"
     >
       {IconComponent && (
         <Box as="span" mr={1} sx={{display: 'flex'}} aria-hidden="true">

From 1e7d24189be101d25115a2683e3dba541c6c043b Mon Sep 17 00:00:00 2001
From: "Amanda G. Brown" <green6erry@gmail.com>
Date: Mon, 24 Apr 2023 16:38:28 -0600
Subject: [PATCH 3/7] chore: added changeset

---
 .changeset/swift-cobras-visit.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/swift-cobras-visit.md

diff --git a/.changeset/swift-cobras-visit.md b/.changeset/swift-cobras-visit.md
new file mode 100644
index 00000000000..083713c9a94
--- /dev/null
+++ b/.changeset/swift-cobras-visit.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Removed default aria-live polite

From 94bfdad10e5a53a2ce021079d49c9e36708ee1f9 Mon Sep 17 00:00:00 2001
From: "Amanda G. Brown" <green6erry@gmail.com>
Date: Tue, 25 Apr 2023 10:38:37 -0600
Subject: [PATCH 4/7] chore(Autocomplete): update snapshot

---
 .../__snapshots__/Autocomplete.test.tsx.snap  | 61 ++++++++-----------
 1 file changed, 27 insertions(+), 34 deletions(-)

diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index 9294c10d3d1..f142220fb81 100644
--- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -62,7 +62,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -71,7 +71,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -105,7 +105,6 @@ exports[`snapshots renders a custom empty state message 1`] = `
 
 <span
     aria-busy={false}
-    aria-live="polite"
     className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
@@ -165,7 +164,7 @@ exports[`snapshots renders a loading state 1`] = `
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -222,7 +221,7 @@ exports[`snapshots renders a loading state 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -231,7 +230,7 @@ exports[`snapshots renders a loading state 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -265,7 +264,6 @@ exports[`snapshots renders a loading state 1`] = `
 
 <span
     aria-busy={false}
-    aria-live="polite"
     className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
@@ -360,7 +358,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -417,7 +415,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -426,7 +424,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -460,7 +458,6 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 
 <span
     aria-busy={false}
-    aria-live="polite"
     className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
@@ -541,7 +538,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   display: -ms-flexbox;
   display: flex;
   border-radius: 6px;
-  color: #1F2328;
+  color: #24292f;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
   -webkit-text-decoration: none;
@@ -647,7 +644,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 }
 
 .c10 svg {
-  fill: #656d76;
+  fill: #57606a;
   font-size: 12px;
 }
 
@@ -1318,7 +1315,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -1375,7 +1372,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -1384,7 +1381,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1418,7 +1415,6 @@ exports[`snapshots renders a multiselect input 1`] = `
 
 <span
     aria-busy={false}
-    aria-live="polite"
     className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
@@ -1499,7 +1495,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   display: -ms-flexbox;
   display: flex;
   border-radius: 6px;
-  color: #1F2328;
+  color: #24292f;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
   -webkit-text-decoration: none;
@@ -2186,7 +2182,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -2243,7 +2239,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -2252,7 +2248,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2286,7 +2282,6 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 
 <span
     aria-busy={false}
-    aria-live="polite"
     className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
@@ -2367,7 +2362,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   display: -ms-flexbox;
   display: flex;
   border-radius: 6px;
-  color: #1F2328;
+  color: #24292f;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
   -webkit-text-decoration: none;
@@ -3065,7 +3060,7 @@ exports[`snapshots renders a single select input 1`] = `
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -3122,7 +3117,7 @@ exports[`snapshots renders a single select input 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -3131,7 +3126,7 @@ exports[`snapshots renders a single select input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3165,7 +3160,6 @@ exports[`snapshots renders a single select input 1`] = `
 
 <span
     aria-busy={false}
-    aria-live="polite"
     className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
@@ -3246,7 +3240,7 @@ exports[`snapshots renders a single select input 1`] = `
   display: -ms-flexbox;
   display: flex;
   border-radius: 6px;
-  color: #1F2328;
+  color: #24292f;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
   -webkit-text-decoration: none;
@@ -3689,7 +3683,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
   display: -ms-flexbox;
   display: flex;
   border-radius: 6px;
-  color: #1F2328;
+  color: #24292f;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
   -webkit-text-decoration: none;
@@ -4074,7 +4068,7 @@ exports[`snapshots renders with an input value 1`] = `
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -4131,7 +4125,7 @@ exports[`snapshots renders with an input value 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -4140,7 +4134,7 @@ exports[`snapshots renders with an input value 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4174,7 +4168,6 @@ exports[`snapshots renders with an input value 1`] = `
 
 <span
     aria-busy={false}
-    aria-live="polite"
     className="c0 TextInput-wrapper"
     onClick={[Function]}
   >

From eedb6e4744f56028980c1b1b55546dafa299b576 Mon Sep 17 00:00:00 2001
From: "Amanda G. Brown" <green6erry@gmail.com>
Date: Tue, 25 Apr 2023 11:11:43 -0600
Subject: [PATCH 5/7] chore(TextInput): update snapshot

---
 .../__snapshots__/TextInput.test.tsx.snap     | 216 ++++++-------
 .../TextInputWithTokens.test.tsx.snap         | 296 +++++++++---------
 2 files changed, 242 insertions(+), 270 deletions(-)

diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 7188ef0de6b..f0eb6baefb9 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`TextInput renders 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -61,7 +61,7 @@ exports[`TextInput renders 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -70,7 +70,7 @@ exports[`TextInput renders 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -104,7 +104,6 @@ exports[`TextInput renders 1`] = `
 
 <span
   aria-busy={false}
-  aria-live="polite"
   className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
@@ -123,7 +122,7 @@ exports[`TextInput renders block 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -188,7 +187,7 @@ exports[`TextInput renders block 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -197,7 +196,7 @@ exports[`TextInput renders block 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -231,7 +230,6 @@ exports[`TextInput renders block 1`] = `
 
 <span
   aria-busy={false}
-  aria-live="polite"
   className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
@@ -250,7 +248,7 @@ exports[`TextInput renders consistently 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -307,7 +305,7 @@ exports[`TextInput renders consistently 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -316,7 +314,7 @@ exports[`TextInput renders consistently 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -350,7 +348,6 @@ exports[`TextInput renders consistently 1`] = `
 
 <span
   aria-busy={false}
-  aria-live="polite"
   className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
@@ -368,7 +365,7 @@ exports[`TextInput renders contrast 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -426,7 +423,7 @@ exports[`TextInput renders contrast 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -435,7 +432,7 @@ exports[`TextInput renders contrast 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -469,7 +466,6 @@ exports[`TextInput renders contrast 1`] = `
 
 <span
   aria-busy={false}
-  aria-live="polite"
   className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
@@ -488,7 +484,7 @@ exports[`TextInput renders error 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -552,7 +548,7 @@ exports[`TextInput renders error 1`] = `
   box-shadow: inset 0 0 0 1px #0969da;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -561,7 +557,7 @@ exports[`TextInput renders error 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -595,7 +591,6 @@ exports[`TextInput renders error 1`] = `
 
 <span
   aria-busy={false}
-  aria-live="polite"
   className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
@@ -614,7 +609,7 @@ exports[`TextInput renders large 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -677,7 +672,7 @@ exports[`TextInput renders large 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -686,7 +681,7 @@ exports[`TextInput renders large 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -720,7 +715,6 @@ exports[`TextInput renders large 1`] = `
 
 <span
   aria-busy={false}
-  aria-live="polite"
   className="c0 TextInput-wrapper"
   onClick={[Function]}
   size="large"
@@ -740,7 +734,7 @@ exports[`TextInput renders leadingVisual 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -797,7 +791,7 @@ exports[`TextInput renders leadingVisual 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -806,7 +800,7 @@ exports[`TextInput renders leadingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -840,7 +834,6 @@ exports[`TextInput renders leadingVisual 1`] = `
 
 <span
   aria-busy={false}
-  aria-live="polite"
   className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
@@ -886,7 +879,7 @@ exports[`TextInput renders monospace 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -944,7 +937,7 @@ exports[`TextInput renders monospace 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -953,7 +946,7 @@ exports[`TextInput renders monospace 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -987,7 +980,6 @@ exports[`TextInput renders monospace 1`] = `
 
 <span
   aria-busy={false}
-  aria-live="polite"
   className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
@@ -1006,7 +998,7 @@ exports[`TextInput renders placeholder 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -1063,7 +1055,7 @@ exports[`TextInput renders placeholder 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -1072,7 +1064,7 @@ exports[`TextInput renders placeholder 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1106,7 +1098,6 @@ exports[`TextInput renders placeholder 1`] = `
 
 <span
   aria-busy={false}
-  aria-live="polite"
   className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
@@ -1126,7 +1117,7 @@ exports[`TextInput renders small 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -1191,7 +1182,7 @@ exports[`TextInput renders small 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -1200,7 +1191,7 @@ exports[`TextInput renders small 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1234,7 +1225,6 @@ exports[`TextInput renders small 1`] = `
 
 <span
   aria-busy={false}
-  aria-live="polite"
   className="c0 TextInput-wrapper"
   onClick={[Function]}
   size="small"
@@ -1407,7 +1397,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 .c4 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
-  color: #656d76;
+  color: #57606a;
 }
 
 .c4 [data-component="text"] {
@@ -1422,7 +1412,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 .c4 [data-component="trailingAction"] {
   margin-right: -4px;
-  color: #656d76;
+  color: #57606a;
 }
 
 .c4 [data-component="buttonContent"] {
@@ -1458,7 +1448,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 .c4[data-component="IconButton"][data-no-visuals] {
-  color: #656d76;
+  color: #57606a;
 }
 
 .c4[data-no-visuals] {
@@ -1493,7 +1483,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -1544,7 +1534,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -1553,7 +1543,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1831,7 +1821,6 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 <span
   aria-busy={false}
-  aria-live="polite"
   className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
@@ -2054,7 +2043,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 .c3 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
-  color: #656d76;
+  color: #57606a;
 }
 
 .c3 [data-component="text"] {
@@ -2069,7 +2058,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 .c3 [data-component="trailingAction"] {
   margin-right: -4px;
-  color: #656d76;
+  color: #57606a;
 }
 
 .c3 [data-component="buttonContent"] {
@@ -2105,7 +2094,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c3[data-component="IconButton"][data-no-visuals] {
-  color: #656d76;
+  color: #57606a;
 }
 
 .c3[data-no-visuals] {
@@ -2140,7 +2129,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -2191,7 +2180,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -2200,7 +2189,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2254,7 +2243,6 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 <span
   aria-busy={false}
-  aria-live="polite"
   className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
@@ -2456,7 +2444,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 .c4 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
-  color: #656d76;
+  color: #57606a;
 }
 
 .c4 [data-component="text"] {
@@ -2471,7 +2459,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 .c4 [data-component="trailingAction"] {
   margin-right: -4px;
-  color: #656d76;
+  color: #57606a;
 }
 
 .c4 [data-component="buttonContent"] {
@@ -2507,7 +2495,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c4[data-component="IconButton"][data-no-visuals] {
-  color: #656d76;
+  color: #57606a;
 }
 
 .c4[data-no-visuals] {
@@ -2542,7 +2530,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -2593,7 +2581,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -2602,7 +2590,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2881,7 +2869,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 <span
   aria-busy={false}
-  aria-live="polite"
   className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
@@ -2929,7 +2916,7 @@ exports[`TextInput renders trailingVisual 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -2986,7 +2973,7 @@ exports[`TextInput renders trailingVisual 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -2995,7 +2982,7 @@ exports[`TextInput renders trailingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3029,7 +3016,6 @@ exports[`TextInput renders trailingVisual 1`] = `
 
 <span
   aria-busy={false}
-  aria-live="polite"
   className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
@@ -3075,7 +3061,7 @@ exports[`TextInput renders warning 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -3095,7 +3081,7 @@ exports[`TextInput renders warning 1`] = `
   background-position: right 8px center;
   padding-left: 0;
   padding-right: 0;
-  border-color: #9a6700;
+  border-color: #bf8700;
 }
 
 .c0 input,
@@ -3133,7 +3119,7 @@ exports[`TextInput renders warning 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -3142,7 +3128,7 @@ exports[`TextInput renders warning 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3182,7 +3168,6 @@ exports[`TextInput renders warning 1`] = `
 
 <span
   aria-busy={false}
-  aria-live="polite"
   className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
@@ -3216,7 +3201,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -3273,7 +3258,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -3282,7 +3267,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3316,7 +3301,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 <span
     aria-busy={true}
-    aria-live="polite"
     className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
@@ -3389,7 +3373,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -3446,7 +3430,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -3455,7 +3439,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3489,7 +3473,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 <span
     aria-busy={true}
-    aria-live="polite"
     className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
@@ -3594,7 +3577,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -3651,7 +3634,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -3660,7 +3643,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3694,7 +3677,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 <span
     aria-busy={true}
-    aria-live="polite"
     className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
@@ -3776,7 +3758,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -3833,7 +3815,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -3842,7 +3824,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3876,7 +3858,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 <span
     aria-busy={true}
-    aria-live="polite"
     className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
@@ -4027,7 +4008,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -4084,7 +4065,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -4093,7 +4074,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4127,7 +4108,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 <span
     aria-busy={true}
-    aria-live="polite"
     className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
@@ -4278,7 +4258,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -4335,7 +4315,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -4344,7 +4324,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4378,7 +4358,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 <span
     aria-busy={true}
-    aria-live="polite"
     className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
@@ -4523,7 +4502,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -4580,7 +4559,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -4589,7 +4568,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4623,7 +4602,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 <span
     aria-busy={true}
-    aria-live="polite"
     className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
@@ -4736,7 +4714,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -4793,7 +4771,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -4802,7 +4780,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4836,7 +4814,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 <span
     aria-busy={true}
-    aria-live="polite"
     className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
@@ -4981,7 +4958,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -5038,7 +5015,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -5047,7 +5024,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5081,7 +5058,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 <span
     aria-busy={true}
-    aria-live="polite"
     className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
@@ -5203,7 +5179,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -5268,7 +5244,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -5277,7 +5253,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5311,7 +5287,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 <span
     aria-busy={true}
-    aria-live="polite"
     className="c0 TextInput-wrapper"
     onClick={[Function]}
     size="small"
@@ -5503,7 +5478,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -5560,7 +5535,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -5569,7 +5544,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5603,7 +5578,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 <span
     aria-busy={true}
-    aria-live="polite"
     className="c0 TextInput-wrapper"
     onClick={[Function]}
   >
@@ -5794,7 +5768,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -5857,7 +5831,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -5866,7 +5840,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5900,7 +5874,6 @@ exports[`TextInput renders with a loading indicator 1`] = `
 
 <span
     aria-busy={true}
-    aria-live="polite"
     className="c0 TextInput-wrapper"
     onClick={[Function]}
     size="large"
@@ -6058,7 +6031,7 @@ exports[`TextInput should render a password input 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -6115,7 +6088,7 @@ exports[`TextInput should render a password input 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -6124,7 +6097,7 @@ exports[`TextInput should render a password input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -6158,7 +6131,6 @@ exports[`TextInput should render a password input 1`] = `
 
 <span
   aria-busy={false}
-  aria-live="polite"
   className="c0 TextInput-wrapper"
   onClick={[Function]}
 >
diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index f2119138454..a710afbad03 100644
--- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -119,7 +119,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -128,7 +128,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -180,10 +180,10 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -191,7 +191,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c7 {
@@ -826,13 +826,13 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 
 .c8 {
   font-size: 16px;
-  color: #656d76;
+  color: #57606a;
 }
 
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -896,7 +896,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -905,7 +905,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -957,10 +957,10 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -968,7 +968,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c7 {
@@ -1241,7 +1241,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -1323,7 +1323,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -1332,7 +1332,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1445,7 +1445,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -1513,7 +1513,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -1522,7 +1522,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1574,10 +1574,10 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -1585,7 +1585,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c7 {
@@ -2169,7 +2169,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -2240,7 +2240,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -2249,7 +2249,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2299,10 +2299,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   padding-left: 4px;
   padding-right: 4px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -2310,7 +2310,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c7 {
@@ -2894,7 +2894,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -2965,7 +2965,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -2974,7 +2974,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3024,10 +3024,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -3035,7 +3035,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c7 {
@@ -3619,7 +3619,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -3683,7 +3683,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -3692,7 +3692,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3742,10 +3742,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -3753,7 +3753,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c7 {
@@ -4337,7 +4337,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -4401,7 +4401,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -4410,7 +4410,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4462,10 +4462,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -4473,7 +4473,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c7 {
@@ -5057,7 +5057,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -5121,7 +5121,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -5130,7 +5130,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5182,10 +5182,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -5193,7 +5193,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c7 {
@@ -5777,7 +5777,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -5843,7 +5843,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -5852,7 +5852,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5904,10 +5904,10 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -5915,7 +5915,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c7 {
@@ -6499,7 +6499,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -6563,7 +6563,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -6572,7 +6572,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -6624,17 +6624,17 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
 }
 
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c5 {
@@ -6944,7 +6944,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -7008,7 +7008,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -7017,7 +7017,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -7069,10 +7069,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -7080,7 +7080,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c7 {
@@ -7719,7 +7719,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -7783,7 +7783,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -7792,7 +7792,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -7844,10 +7844,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -7855,7 +7855,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c6:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c9 {
@@ -8526,7 +8526,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -8590,7 +8590,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -8599,7 +8599,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -8651,10 +8651,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -8662,7 +8662,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c7 {
@@ -9310,7 +9310,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -9374,7 +9374,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -9383,7 +9383,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -9435,10 +9435,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -9446,7 +9446,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c10 {
@@ -10163,7 +10163,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -10227,7 +10227,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -10236,7 +10236,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -10288,10 +10288,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -10299,7 +10299,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c10 {
@@ -11016,7 +11016,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -11080,7 +11080,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -11089,7 +11089,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -11141,10 +11141,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -11152,7 +11152,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c10 {
@@ -11863,7 +11863,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -11927,7 +11927,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -11936,7 +11936,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -11988,10 +11988,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -11999,7 +11999,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c7 {
@@ -12678,7 +12678,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -12742,7 +12742,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -12751,7 +12751,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -12803,10 +12803,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -12814,7 +12814,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c6:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c9 {
@@ -13525,7 +13525,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -13589,7 +13589,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -13598,7 +13598,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -13650,10 +13650,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -13661,7 +13661,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c7 {
@@ -14349,7 +14349,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -14420,7 +14420,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -14429,7 +14429,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -14479,10 +14479,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-left: 4px;
   padding-right: 4px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -14490,7 +14490,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c10 {
@@ -15247,7 +15247,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -15311,7 +15311,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -15320,7 +15320,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -15372,10 +15372,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -15383,7 +15383,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c10 {
@@ -16140,7 +16140,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -16204,7 +16204,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -16213,7 +16213,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -16263,10 +16263,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -16274,7 +16274,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c10 {
@@ -16997,7 +16997,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -17061,7 +17061,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -17070,7 +17070,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -17122,10 +17122,10 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -17133,7 +17133,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c7 {
@@ -17704,7 +17704,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -17768,7 +17768,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -17777,7 +17777,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -18383,7 +18383,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -18447,7 +18447,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   padding: 12px;
 }
 
-.c0 > :not(:last-child) {
+.c0 >:not(:last-child) {
   margin-right: 8px;
 }
 
@@ -18456,7 +18456,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #656d76;
+  color: #57606a;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;

From b894e210a93ec3b7659ed22fa0c6dacf0fa462c8 Mon Sep 17 00:00:00 2001
From: "Amanda G. Brown" <green6erry@gmail.com>
Date: Tue, 25 Apr 2023 11:38:41 -0600
Subject: [PATCH 6/7] update snpahots

---
 .../BreadcrumbsItem.test.tsx.snap             |   6 +-
 .../__snapshots__/CounterLabel.test.tsx.snap  |   2 +-
 .../__snapshots__/Flash.test.tsx.snap         |   4 +-
 .../__snapshots__/Link.test.tsx.snap          |   4 +-
 .../__snapshots__/NavList.test.tsx.snap       |  54 +-
 .../SegmentedControl.test.tsx.snap            |   6 +-
 .../__snapshots__/SelectPanel.test.tsx.snap   |  10 +-
 .../__snapshots__/StateLabel.test.tsx.snap    |  10 +-
 .../__snapshots__/TabNav.test.tsx.snap        |   6 +-
 .../__snapshots__/Timeline.test.tsx.snap      |   4 +-
 .../__snapshots__/Token.test.tsx.snap         |  86 +-
 .../__snapshots__/UnderlineNav.test.tsx.snap  |   4 +-
 .../__snapshots__/Pagination.test.tsx.snap    |   2 +-
 .../__snapshots__/ActionMenu.test.tsx.snap    |  12 +-
 .../AnchoredOverlay.test.tsx.snap             |  22 +-
 .../__snapshots__/Avatar.test.tsx.snap        |   2 +-
 .../__snapshots__/Button.test.tsx.snap        |  10 +-
 .../__snapshots__/Checkbox.test.tsx.snap      |   4 +-
 .../__snapshots__/CheckboxGroup.test.tsx.snap |   6 +-
 .../CheckboxOrRadioGroup.test.tsx.snap        |   4 +-
 .../ConfirmationDialog.test.tsx.snap          |  10 +-
 .../__snapshots__/Dialog.test.tsx.snap        |   8 +-
 .../__snapshots__/Dropdown.test.tsx.snap      |  14 +-
 .../FilterListItem.test.tsx.snap              |   2 +-
 .../__snapshots__/ProgressBar.test.tsx.snap   |   8 +-
 .../__snapshots__/Radio.test.tsx.snap         |   2 +-
 .../__snapshots__/RadioGroup.test.tsx.snap    |   4 +-
 .../__snapshots__/SelectMenu.test.tsx.snap    |  26 +-
 .../__snapshots__/SideNav.test.tsx.snap       |   8 +-
 .../__snapshots__/SubNavLink.test.tsx.snap    |  12 +-
 .../__snapshots__/Textarea.test.tsx.snap      |   2 +-
 .../__snapshots__/ThemeProvider.test.tsx.snap |   2 +-
 .../__snapshots__/ToggleSwitch.test.tsx.snap  |   4 +-
 .../UnderlineNavLink.test.tsx.snap            |  30 +-
 .../__snapshots__/themePreval.test.ts.snap    | 760 +++++++++---------
 .../__snapshots__/ActionList.test.tsx.snap    |   2 +-
 .../__snapshots__/ActionMenu.test.tsx.snap    |   8 +-
 .../__snapshots__/Button.test.tsx.snap        | 102 +--
 .../ChoiceFieldset.test.tsx.snap              |  44 +-
 .../__snapshots__/DropdownMenu.test.tsx.snap  |   8 +-
 .../__snapshots__/Label.test.tsx.snap         |   2 +-
 41 files changed, 641 insertions(+), 675 deletions(-)

diff --git a/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap b/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
index 39ec4605f7d..c66412b13b3 100644
--- a/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
+++ b/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`Breadcrumbs.Item adds activeClassName={SELECTED_CLASS} when it gets a "
 }
 
 .c0.selected {
-  color: #1F2328;
+  color: #24292f;
   pointer-events: none;
 }
 
@@ -42,7 +42,7 @@ exports[`Breadcrumbs.Item renders consistently 1`] = `
 }
 
 .c0.selected {
-  color: #1F2328;
+  color: #24292f;
   pointer-events: none;
 }
 
@@ -67,7 +67,7 @@ exports[`Breadcrumbs.Item respects the "selected" prop 1`] = `
 }
 
 .c0.selected {
-  color: #1F2328;
+  color: #24292f;
   pointer-events: none;
 }
 
diff --git a/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap b/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap
index e58baa1e1cc..4fed3becb94 100644
--- a/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap
+++ b/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`CounterLabel renders consistently 1`] = `
   line-height: 1;
   border-radius: 20px;
   background-color: rgba(175,184,193,0.2);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c0:empty {
diff --git a/src/Flash/__tests__/__snapshots__/Flash.test.tsx.snap b/src/Flash/__tests__/__snapshots__/Flash.test.tsx.snap
index e9d29a2ea00..f9881867f3a 100644
--- a/src/Flash/__tests__/__snapshots__/Flash.test.tsx.snap
+++ b/src/Flash/__tests__/__snapshots__/Flash.test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`Flash renders consistently 1`] = `
 .c0 {
   position: relative;
-  color: #1F2328;
+  color: #24292f;
   padding: 16px;
   border-style: solid;
   border-width: 1px;
   border-radius: 6px;
   margin-top: 0;
-  color: #1F2328;
+  color: #24292f;
   background-color: #ddf4ff;
   border-color: rgba(84,174,255,0.4);
 }
diff --git a/src/Link/__tests__/__snapshots__/Link.test.tsx.snap b/src/Link/__tests__/__snapshots__/Link.test.tsx.snap
index eaad8694936..1f8d25ac1e7 100644
--- a/src/Link/__tests__/__snapshots__/Link.test.tsx.snap
+++ b/src/Link/__tests__/__snapshots__/Link.test.tsx.snap
@@ -140,7 +140,7 @@ exports[`Link respects hoverColor prop 1`] = `
 
 exports[`Link respects the  "sx" prop when "muted" prop is also passed 1`] = `
 .c0 {
-  color: #656d76;
+  color: #57606a;
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #ffffff;
@@ -177,7 +177,7 @@ exports[`Link respects the  "sx" prop when "muted" prop is also passed 1`] = `
 
 exports[`Link respects the "muted" prop 1`] = `
 .c0 {
-  color: #656d76;
+  color: #57606a;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap
index 0bf63a4a99d..53d24c7e50a 100644
--- a/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`NavList renders a simple list 1`] = `
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: #24292f;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -136,7 +136,7 @@ exports[`NavList renders a simple list 1`] = `
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: #24292f;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -240,7 +240,7 @@ exports[`NavList renders a simple list 1`] = `
 @media (hover:hover) and (pointer:fine) {
   .c3:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
+    color: #24292f;
   }
 
   .c3:focus-visible,
@@ -252,7 +252,7 @@ exports[`NavList renders a simple list 1`] = `
 
   .c3:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    color: #24292f;
   }
 }
 
@@ -265,7 +265,7 @@ exports[`NavList renders a simple list 1`] = `
 @media (hover:hover) and (pointer:fine) {
   .c7:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
+    color: #24292f;
   }
 
   .c7:focus-visible,
@@ -277,7 +277,7 @@ exports[`NavList renders a simple list 1`] = `
 
   .c7:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    color: #24292f;
   }
 }
 
@@ -418,7 +418,7 @@ exports[`NavList renders with groups 1`] = `
   padding-right: 16px;
   font-size: 12px;
   font-weight: 600;
-  color: #656d76;
+  color: #57606a;
   list-style: none;
 }
 
@@ -456,7 +456,7 @@ exports[`NavList renders with groups 1`] = `
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: #24292f;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -540,7 +540,7 @@ exports[`NavList renders with groups 1`] = `
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: #24292f;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -644,7 +644,7 @@ exports[`NavList renders with groups 1`] = `
 @media (hover:hover) and (pointer:fine) {
   .c7:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
+    color: #24292f;
   }
 
   .c7:focus-visible,
@@ -656,7 +656,7 @@ exports[`NavList renders with groups 1`] = `
 
   .c7:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    color: #24292f;
   }
 }
 
@@ -669,7 +669,7 @@ exports[`NavList renders with groups 1`] = `
 @media (hover:hover) and (pointer:fine) {
   .c11:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
+    color: #24292f;
   }
 
   .c11:focus-visible,
@@ -681,7 +681,7 @@ exports[`NavList renders with groups 1`] = `
 
   .c11:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    color: #24292f;
   }
 }
 
@@ -855,7 +855,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
-  color: #656d76;
+  color: #57606a;
   margin-left: 8px;
   font-weight: initial;
 }
@@ -889,7 +889,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: #24292f;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1015,7 +1015,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: #24292f;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1128,7 +1128,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 @media (hover:hover) and (pointer:fine) {
   .c11:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
+    color: #24292f;
   }
 
   .c11:focus-visible,
@@ -1140,7 +1140,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 
   .c11:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    color: #24292f;
   }
 }
 
@@ -1153,7 +1153,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 @media (hover:hover) and (pointer:fine) {
   .c4:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
+    color: #24292f;
   }
 
   .c4:focus-visible,
@@ -1165,7 +1165,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 
   .c4:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    color: #24292f;
   }
 }
 
@@ -1324,7 +1324,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
-  color: #656d76;
+  color: #57606a;
   margin-left: 8px;
   font-weight: initial;
 }
@@ -1358,7 +1358,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: #24292f;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1490,7 +1490,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #1F2328;
+  color: #24292f;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1609,7 +1609,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 @media (hover:hover) and (pointer:fine) {
   .c11:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
+    color: #24292f;
   }
 
   .c11:focus-visible,
@@ -1621,7 +1621,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 
   .c11:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    color: #24292f;
   }
 }
 
@@ -1634,7 +1634,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 @media (hover:hover) and (pointer:fine) {
   .c4:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
-    color: #1F2328;
+    color: #24292f;
   }
 
   .c4:focus-visible,
@@ -1646,7 +1646,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 
   .c4:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
-    color: #1F2328;
+    color: #24292f;
   }
 }
 
diff --git a/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap b/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap
index 459dc27156d..6556fd291a7 100644
--- a/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap
+++ b/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap
@@ -119,7 +119,7 @@ exports[`SegmentedControl renders consistently 1`] = `
 }
 
 .c2 svg {
-  fill: #656d76;
+  fill: #57606a;
 }
 
 .c2:focus:focus-visible:not(:last-child):after {
@@ -182,7 +182,7 @@ exports[`SegmentedControl renders consistently 1`] = `
 }
 
 .c4 svg {
-  fill: #656d76;
+  fill: #57606a;
 }
 
 .c4:hover .segmentedControl-content {
@@ -253,7 +253,7 @@ exports[`SegmentedControl renders consistently 1`] = `
 }
 
 .c5 svg {
-  fill: #656d76;
+  fill: #57606a;
 }
 
 .c5:hover .segmentedControl-content {
diff --git a/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
index 5548fe2693d..eafafb07094 100644
--- a/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
+++ b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`SelectPanel renders consistently 1`] = `
 .c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c1 {
@@ -31,8 +31,8 @@ exports[`SelectPanel renders consistently 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:hover {
@@ -54,7 +54,7 @@ exports[`SelectPanel renders consistently 1`] = `
 
 .c1:hover {
   background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c1:focus {
@@ -68,7 +68,7 @@ exports[`SelectPanel renders consistently 1`] = `
 .c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c2 {
diff --git a/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap b/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
index ba583e95a8c..896c2c3e434 100644
--- a/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
+++ b/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`StateLabel renders children 1`] = `
   color: #ffffff;
   text-align: center;
   border-radius: 100px;
-  background-color: #1f883d;
+  background-color: #2da44e;
   color: #ffffff;
   padding-left: 12px;
   padding-right: 12px;
@@ -79,7 +79,7 @@ exports[`StateLabel renders consistently 1`] = `
   color: #ffffff;
   text-align: center;
   border-radius: 100px;
-  background-color: #1f883d;
+  background-color: #2da44e;
   color: #ffffff;
   padding-left: 12px;
   padding-right: 12px;
@@ -139,7 +139,7 @@ exports[`StateLabel respects the status prop 1`] = `
   color: #ffffff;
   text-align: center;
   border-radius: 100px;
-  background-color: #1f883d;
+  background-color: #2da44e;
   color: #ffffff;
   padding-left: 12px;
   padding-right: 12px;
@@ -369,7 +369,7 @@ exports[`StateLabel respects the variant prop 1`] = `
   color: #ffffff;
   text-align: center;
   border-radius: 100px;
-  background-color: #1f883d;
+  background-color: #2da44e;
   color: #ffffff;
   padding-left: 8px;
   padding-right: 8px;
@@ -428,7 +428,7 @@ exports[`StateLabel respects the variant prop 2`] = `
   color: #ffffff;
   text-align: center;
   border-radius: 100px;
-  background-color: #1f883d;
+  background-color: #2da44e;
   color: #ffffff;
   padding-left: 12px;
   padding-right: 12px;
diff --git a/src/TabNav/__tests__/__snapshots__/TabNav.test.tsx.snap b/src/TabNav/__tests__/__snapshots__/TabNav.test.tsx.snap
index fe365f58ce8..117b0f21e9c 100644
--- a/src/TabNav/__tests__/__snapshots__/TabNav.test.tsx.snap
+++ b/src/TabNav/__tests__/__snapshots__/TabNav.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`TabNav TabNav.Link renders consistently 1`] = `
   padding: 8px 12px;
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   -webkit-text-decoration: none;
   text-decoration: none;
   background-color: transparent;
@@ -31,13 +31,13 @@ exports[`TabNav TabNav.Link renders consistently 1`] = `
 
 .c0:hover,
 .c0:focus {
-  color: #1F2328;
+  color: #24292f;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 .c0.selected {
-  color: #1F2328;
+  color: #24292f;
   border-color: #d0d7de;
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
diff --git a/src/Timeline/__tests__/__snapshots__/Timeline.test.tsx.snap b/src/Timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
index e7455fe8441..0d5bc6c3cb6 100644
--- a/src/Timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
+++ b/src/Timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`Timeline.Badge renders consistently 1`] = `
 .c1 {
   margin-right: 8px;
   margin-left: -15px;
-  color: #656d76;
+  color: #57606a;
   background-color: #eaeef2;
   display: -webkit-box;
   display: -webkit-flex;
@@ -148,7 +148,7 @@ exports[`Timeline.Item renders with condensed prop 1`] = `
   height: 16px;
   margin-top: 8px;
   margin-bottom: 8px;
-  color: #656d76;
+  color: #57606a;
   background-color: #ffffff;
   border: 0;
 }
diff --git a/src/Token/__tests__/__snapshots__/Token.test.tsx.snap b/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
index 0eb72bbc832..410fcaeef94 100644
--- a/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
+++ b/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
+  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
   width: 100%;
   height: 100%;
 }
@@ -56,10 +56,10 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
   padding-left: 4px;
   padding-right: 4px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   padding-left: 4px;
@@ -251,7 +251,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
+  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
   width: 100%;
   height: 100%;
 }
@@ -279,10 +279,10 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   padding-left: 4px;
@@ -474,7 +474,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
+  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
   width: 100%;
   height: 100%;
 }
@@ -502,10 +502,10 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   padding-left: 4px;
@@ -697,7 +697,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
+  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
   width: 100%;
   height: 100%;
 }
@@ -727,10 +727,10 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   padding-left: 4px;
@@ -922,7 +922,7 @@ exports[`Token components AvatarToken renders all sizes 5`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
+  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
   width: 100%;
   height: 100%;
 }
@@ -952,10 +952,10 @@ exports[`Token components AvatarToken renders all sizes 5`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   padding-left: 4px;
@@ -1143,10 +1143,10 @@ exports[`Token components AvatarToken renders consistently 1`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
 }
 
@@ -1214,7 +1214,7 @@ exports[`Token components AvatarToken renders isSelected 1`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
+  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
   width: 100%;
   height: 100%;
 }
@@ -1242,10 +1242,10 @@ exports[`Token components AvatarToken renders isSelected 1`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: #1F2328;
+  border-color: #24292f;
   border-style: solid;
   border-width: 1px;
-  color: #1F2328;
+  color: #24292f;
   max-width: 100%;
   padding-left: 4px;
 }
@@ -1352,7 +1352,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
+  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
   width: 100%;
   height: 100%;
 }
@@ -1380,10 +1380,10 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
   padding-left: 4px;
@@ -2440,10 +2440,10 @@ exports[`Token components IssueLabelToken renders consistently 1`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
 }
 
@@ -3163,10 +3163,10 @@ exports[`Token components Token renders all sizes 1`] = `
   padding-left: 4px;
   padding-right: 4px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -3343,10 +3343,10 @@ exports[`Token components Token renders all sizes 2`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -3523,10 +3523,10 @@ exports[`Token components Token renders all sizes 3`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -3705,10 +3705,10 @@ exports[`Token components Token renders all sizes 4`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -3887,10 +3887,10 @@ exports[`Token components Token renders all sizes 5`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
@@ -4054,10 +4054,10 @@ exports[`Token components Token renders consistently 1`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
 }
 
@@ -4134,10 +4134,10 @@ exports[`Token components Token renders isSelected 1`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: #1F2328;
+  border-color: #24292f;
   border-style: solid;
   border-width: 1px;
-  color: #1F2328;
+  color: #24292f;
   max-width: 100%;
 }
 
@@ -4224,10 +4224,10 @@ exports[`Token components Token renders with a leadingVisual 1`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
 }
 
@@ -4330,10 +4330,10 @@ exports[`Token components Token renders with a remove button 1`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #656d76;
+  color: #57606a;
   max-width: 100%;
   padding-right: 0;
 }
diff --git a/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap b/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap
index 31095a86b83..ab8203e973f 100644
--- a/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap
+++ b/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap
@@ -42,7 +42,7 @@ exports[`UnderlineNav renders consistently 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  color: #1F2328;
+  color: #24292f;
   text-align: center;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -127,7 +127,7 @@ exports[`UnderlineNav renders consistently 1`] = `
   line-height: 1;
   border-radius: 20px;
   background-color: rgba(175,184,193,0.2);
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c7:empty {
diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
index 476f0bd791c..889609579e2 100644
--- a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
+++ b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Pagination renders consistently 1`] = `
   padding: 0.5rem calc((2rem - 1.25rem) / 2);
   font-style: normal;
   line-height: 1;
-  color: #1F2328;
+  color: #24292f;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
index 203b3082ca3..ae80a3d1458 100644
--- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ActionMenu renders consistently 1`] = `
 .c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c2 {
@@ -25,7 +25,7 @@ exports[`ActionMenu renders consistently 1`] = `
 .c1 {
   border-radius: 6px;
   border: 1px solid;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   font-family: inherit;
   font-weight: 500;
   font-size: 14px;
@@ -64,7 +64,7 @@ exports[`ActionMenu renders consistently 1`] = `
   transition-property: color,fill,background-color,border-color;
   color: #24292f;
   background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:focus:not(:disabled) {
@@ -210,17 +210,17 @@ exports[`ActionMenu renders consistently 1`] = `
 
 .c1:hover:not([disabled]) {
   background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c1:active:not([disabled]) {
   background-color: hsla(220,14%,93%,1);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c1[aria-expanded=true] {
   background-color: hsla(220,14%,93%,1);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 @media (forced-colors:active) {
diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
index 5a929d12ade..5b02f210d7f 100644
--- a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
+++ b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 .c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c1 {
@@ -31,8 +31,8 @@ exports[`AnchoredOverlay renders consistently 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:hover {
@@ -54,7 +54,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 
 .c1:hover {
   background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c1:focus {
@@ -68,7 +68,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 .c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 <div
@@ -94,7 +94,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
 .c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c1 {
@@ -121,8 +121,8 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:hover {
@@ -144,7 +144,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
 
 .c1:hover {
   background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c1:focus {
@@ -158,12 +158,12 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
 .c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c2 {
   background-color: #ffffff;
-  box-shadow: 0 1px 3px rgba(31,35,40,0.12),0 8px 24px rgba(66,74,83,0.12);
+  box-shadow: 0 1px 3px rgba(27,31,36,0.12),0 8px 24px rgba(66,74,83,0.12);
   position: absolute;
   min-width: 192px;
   max-width: 640px;
diff --git a/src/__tests__/__snapshots__/Avatar.test.tsx.snap b/src/__tests__/__snapshots__/Avatar.test.tsx.snap
index 3a2e8e4b28d..81c3acf395a 100644
--- a/src/__tests__/__snapshots__/Avatar.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Avatar.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Avatar renders consistently 1`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
+  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
 }
 
 <img
diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
index 58a254a85f8..a49ae3e67a0 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`Button renders consistently 1`] = `
 .c0 {
   border-radius: 6px;
   border: 1px solid;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
   font-family: inherit;
   font-weight: 500;
   font-size: 14px;
@@ -50,7 +50,7 @@ exports[`Button renders consistently 1`] = `
   transition-property: color,fill,background-color,border-color;
   color: #24292f;
   background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:focus:not(:disabled) {
@@ -196,17 +196,17 @@ exports[`Button renders consistently 1`] = `
 
 .c0:hover:not([disabled]) {
   background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c0:active:not([disabled]) {
   background-color: hsla(220,14%,93%,1);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c0[aria-expanded=true] {
   background-color: hsla(220,14%,93%,1);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 @media (forced-colors:active) {
diff --git a/src/__tests__/__snapshots__/Checkbox.test.tsx.snap b/src/__tests__/__snapshots__/Checkbox.test.tsx.snap
index 39de01ea347..f8cd31bf3b0 100644
--- a/src/__tests__/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Checkbox.test.tsx.snap
@@ -65,8 +65,8 @@ exports[`Checkbox renders consistently 1`] = `
 
 .c0:checked:disabled {
   cursor: not-allowed;
-  background-color: #656d76;
-  border-color: #656d76;
+  background-color: #57606a;
+  border-color: #57606a;
   opacity: 1;
 }
 
diff --git a/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap b/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
index 97844173021..bf7a63dba00 100644
--- a/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`CheckboxGroup renders consistently 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #1F2328;
+  color: #24292f;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -132,8 +132,8 @@ exports[`CheckboxGroup renders consistently 1`] = `
 
 .c6:checked:disabled {
   cursor: not-allowed;
-  background-color: #656d76;
-  border-color: #656d76;
+  background-color: #57606a;
+  border-color: #57606a;
   opacity: 1;
 }
 
diff --git a/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap b/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
index e48aa53ef97..a77edeed66b 100644
--- a/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #1F2328;
+  color: #24292f;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -100,7 +100,7 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
 
 .c6:checked:disabled {
   cursor: not-allowed;
-  border-color: #656d76;
+  border-color: #57606a;
 }
 
 .c6:focus:not(:disabled) {
diff --git a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap b/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
index 29e001cf9b9..fb82aa2579b 100644
--- a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ConfirmationDialog renders consistently 1`] = `
 .c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c1 {
@@ -31,8 +31,8 @@ exports[`ConfirmationDialog renders consistently 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:hover {
@@ -54,7 +54,7 @@ exports[`ConfirmationDialog renders consistently 1`] = `
 
 .c1:hover {
   background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c1:focus {
@@ -68,7 +68,7 @@ exports[`ConfirmationDialog renders consistently 1`] = `
 .c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 <div
diff --git a/src/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/__tests__/__snapshots__/Dialog.test.tsx.snap
index 62d088691e3..24ed7dad7c9 100644
--- a/src/__tests__/__snapshots__/Dialog.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Dialog Dialog.Header renders consistently 1`] = `
   font-size: 14px;
   font-weight: 600;
   font-family: sans-serif;
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c0 {
@@ -51,7 +51,7 @@ exports[`Dialog renders consistently 1`] = `
   content: ' ';
   background: transparent;
   z-index: 99;
-  background: rgba(31,35,40,0.5);
+  background: rgba(27,31,36,0.5);
 }
 
 <span
@@ -67,7 +67,7 @@ exports[`Dialog renders consistently 1`] = `
   background: transparent;
   cursor: pointer;
   border-radius: 6px;
-  color: #656d76;
+  color: #57606a;
   position: absolute;
   top: 16px;
   right: 16px;
@@ -85,7 +85,7 @@ exports[`Dialog renders consistently 1`] = `
   font-size: 14px;
   font-weight: 600;
   font-family: sans-serif;
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c5 {
diff --git a/src/__tests__/__snapshots__/Dropdown.test.tsx.snap b/src/__tests__/__snapshots__/Dropdown.test.tsx.snap
index 5fc9fbc3644..dbce256b7fa 100644
--- a/src/__tests__/__snapshots__/Dropdown.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -47,8 +47,8 @@ exports[`Dropdown.Button renders consistently 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -70,7 +70,7 @@ exports[`Dropdown.Button renders consistently 1`] = `
 
 .c0:hover {
   background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c0:focus {
@@ -84,7 +84,7 @@ exports[`Dropdown.Button renders consistently 1`] = `
 .c0:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c1 {
@@ -133,18 +133,18 @@ exports[`Dropdown.Item renders consistently 1`] = `
   display: block;
   padding: 4px 10px 4px 15px;
   overflow: hidden;
-  color: #1F2328;
+  color: #24292f;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .c0 a {
-  color: #1F2328;
+  color: #24292f;
   -webkit-text-decoration: none;
   text-decoration: none;
   display: block;
   overflow: hidden;
-  color: #1F2328;
+  color: #24292f;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
diff --git a/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap b/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap
index ecc0b3122cd..e8ebaa3f24c 100644
--- a/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap
+++ b/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`FilterList.Item renders consistently 1`] = `
   margin: 0 0 5px 0;
   overflow: hidden;
   font-size: 14px;
-  color: #656d76;
+  color: #57606a;
   background-color: !important;
   -webkit-text-decoration: none;
   text-decoration: none;
diff --git a/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap
index 7050d8d3b7d..897e6392209 100644
--- a/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap
@@ -3,8 +3,8 @@
 exports[`ProgressBar renders consistently 1`] = `
 .c1 {
   width: 0;
-  background-color: #1f883d;
-  background-color: #1f883d;
+  background-color: #2da44e;
+  background-color: #2da44e;
 }
 
 .c0 {
@@ -30,8 +30,8 @@ exports[`ProgressBar renders consistently 1`] = `
 exports[`ProgressBar respects the "progress" prop 1`] = `
 .c1 {
   width: 80%;
-  background-color: #1f883d;
-  background-color: #1f883d;
+  background-color: #2da44e;
+  background-color: #2da44e;
 }
 
 .c0 {
diff --git a/src/__tests__/__snapshots__/Radio.test.tsx.snap b/src/__tests__/__snapshots__/Radio.test.tsx.snap
index caad863c07d..895d60c186b 100644
--- a/src/__tests__/__snapshots__/Radio.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Radio.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`Radio renders consistently 1`] = `
 
 .c0:checked:disabled {
   cursor: not-allowed;
-  border-color: #656d76;
+  border-color: #57606a;
 }
 
 .c0:focus:not(:disabled) {
diff --git a/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap b/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
index 910aef774dd..8b74aca6d34 100644
--- a/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`RadioGroup renders consistently 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #1F2328;
+  color: #24292f;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -100,7 +100,7 @@ exports[`RadioGroup renders consistently 1`] = `
 
 .c6:checked:disabled {
   cursor: not-allowed;
-  border-color: #656d76;
+  border-color: #57606a;
 }
 
 .c6:focus:not(:disabled) {
diff --git a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap b/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
index 3fd7842da9c..631c15de438 100644
--- a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
@@ -25,8 +25,8 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:hover {
@@ -48,7 +48,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
 
 .c1:hover {
   background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c1:focus {
@@ -62,7 +62,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
 .c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c6 {
@@ -70,7 +70,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   margin: 0;
   font-size: 12px;
   font-weight: 600;
-  color: #656d76;
+  color: #57606a;
   background-color: #f6f8fa;
   border-bottom: 1px solid hsla(210,18%,87%,1);
 }
@@ -79,7 +79,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   margin-top: -1px;
   padding: 8px 16px;
   font-size: 12px;
-  color: #656d76;
+  color: #57606a;
   text-align: center;
   border-top: 1px solid hsla(210,18%,87%,1);
 }
@@ -100,7 +100,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   background-color: #ffffff;
   border: 0;
   border-bottom: 1px solid hsla(210,18%,87%,1);
-  color: #656d76;
+  color: #57606a;
   -webkit-text-decoration: none;
   text-decoration: none;
   font-size: 12px;
@@ -141,7 +141,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
 
 .c5[aria-checked='true'] {
   font-weight: 500;
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c5[aria-checked='true'] .SelectMenu-selected-icon {
@@ -183,7 +183,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   flex-direction: column;
   background-color: #ffffff;
   border-radius: 6px;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04);
   -webkit-animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards;
   animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards;
   width: 300px;
@@ -215,7 +215,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   left: 0;
   pointer-events: none;
   content: '';
-  background-color: rgba(31,35,40,0.5);
+  background-color: rgba(27,31,36,0.5);
 }
 
 .c0 > summary {
@@ -268,12 +268,12 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   }
 
   .c4 .SelectMenuTab:not([aria-checked='true']):hover {
-    color: #1F2328;
+    color: #24292f;
     background-color: #f6f8fa;
   }
 
   .c4 .SelectMenuTab:not([aria-checked='true']):active {
-    color: #1F2328;
+    color: #24292f;
     background-color: #f6f8fa;
   }
 }
@@ -286,7 +286,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
     font-size: 12px;
     border: 1px solid #d0d7de;
     border-radius: 6px;
-    box-shadow: 0 1px 0 rgba(31,35,40,0.04);
+    box-shadow: 0 1px 0 rgba(27,31,36,0.04);
   }
 }
 
diff --git a/src/__tests__/__snapshots__/SideNav.test.tsx.snap b/src/__tests__/__snapshots__/SideNav.test.tsx.snap
index d54bec24567..416de17cba3 100644
--- a/src/__tests__/__snapshots__/SideNav.test.tsx.snap
+++ b/src/__tests__/__snapshots__/SideNav.test.tsx.snap
@@ -42,7 +42,7 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `
 }
 
 .c2.variant-normal > .c1 {
-  color: #1F2328;
+  color: #24292f;
   padding: 16px;
   border: 0;
   border-top: 1px solid hsla(210,18%,87%,1);
@@ -100,13 +100,13 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `
 }
 
 .c2.variant-lightweight > .c1:hover {
-  color: #1F2328;
+  color: #24292f;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 .c2.variant-lightweight > .c1:focus {
-  color: #1F2328;
+  color: #24292f;
   -webkit-text-decoration: none;
   text-decoration: none;
   outline: solid 1px #0969da;
@@ -115,7 +115,7 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `
 
 .c2.variant-lightweight > .c1[aria-current='page'],
 .c2.variant-lightweight > .c1[aria-selected='true'] {
-  color: #1F2328;
+  color: #24292f;
   font-weight: 500;
 }
 
diff --git a/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap b/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
index 8e37ba389fc..0766b036b9e 100644
--- a/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
+++ b/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`SubNav.Link adds activeClassName={SELECTED_CLASS} when it gets a "to" p
   font-size: 14px;
   line-height: 20px;
   min-height: 34px;
-  color: #1F2328;
+  color: #24292f;
   text-align: center;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -47,7 +47,7 @@ exports[`SubNav.Link adds activeClassName={SELECTED_CLASS} when it gets a "to" p
 
 .c0:hover .SubNav-octicon,
 .c0:focus .SubNav-octicon {
-  color: #656d76;
+  color: #57606a;
 }
 
 .c0.selected {
@@ -75,7 +75,7 @@ exports[`SubNav.Link renders consistently 1`] = `
   font-size: 14px;
   line-height: 20px;
   min-height: 34px;
-  color: #1F2328;
+  color: #24292f;
   text-align: center;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -114,7 +114,7 @@ exports[`SubNav.Link renders consistently 1`] = `
 
 .c0:hover .SubNav-octicon,
 .c0:focus .SubNav-octicon {
-  color: #656d76;
+  color: #57606a;
 }
 
 .c0.selected {
@@ -140,7 +140,7 @@ exports[`SubNav.Link respects the "selected" prop 1`] = `
   font-size: 14px;
   line-height: 20px;
   min-height: 34px;
-  color: #1F2328;
+  color: #24292f;
   text-align: center;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -179,7 +179,7 @@ exports[`SubNav.Link respects the "selected" prop 1`] = `
 
 .c0:hover .SubNav-octicon,
 .c0:focus .SubNav-octicon {
-  color: #656d76;
+  color: #57606a;
 }
 
 .c0.selected {
diff --git a/src/__tests__/__snapshots__/Textarea.test.tsx.snap b/src/__tests__/__snapshots__/Textarea.test.tsx.snap
index b0c63ebe245..291f828423b 100644
--- a/src/__tests__/__snapshots__/Textarea.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Textarea.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Textarea renders consistently 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #1F2328;
+  color: #24292f;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
diff --git a/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap b/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap
index 101fd03be24..9c4e84902b4 100644
--- a/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`has default theme 1`] = `
 .c0 {
-  color: #1F2328;
+  color: #24292f;
   margin-bottom: 4px;
 }
 
diff --git a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap b/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
index be527cef621..e953cf1f2f5 100644
--- a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`renders consistently 1`] = `
 }
 
 .c8 {
-  color: #656d76;
+  color: #57606a;
   line-height: 0;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
@@ -100,7 +100,7 @@ exports[`renders consistently 1`] = `
 
 .c1 {
   font-size: 14px;
-  color: #1F2328;
+  color: #24292f;
   margin-left: 8px;
   margin-right: 8px;
   position: relative;
diff --git a/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap b/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap
index 728670dcac0..400ce2f4e58 100644
--- a/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap
+++ b/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a
   margin-right: 16px;
   font-size: 14px;
   line-height: 1.5;
-  color: #1F2328;
+  color: #24292f;
   text-align: center;
   border-bottom: 2px solid transparent;
   -webkit-text-decoration: none;
@@ -15,7 +15,7 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a
 
 .c0:hover,
 .c0:focus {
-  color: #1F2328;
+  color: #24292f;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom-color: rgba(175,184,193,0.2);
@@ -25,16 +25,16 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a
 
 .c0:hover .PRC-UnderlineNav-octicon,
 .c0:focus .PRC-UnderlineNav-octicon {
-  color: #656d76;
+  color: #57606a;
 }
 
 .c0.PRC-selected {
-  color: #1F2328;
+  color: #24292f;
   border-bottom-color: #fd8c73;
 }
 
 .c0.PRC-selected .PRC-UnderlineNav-octicon {
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c0:focus:not(:disabled) {
@@ -66,7 +66,7 @@ exports[`UnderlineNav.Link renders consistently 1`] = `
   margin-right: 16px;
   font-size: 14px;
   line-height: 1.5;
-  color: #1F2328;
+  color: #24292f;
   text-align: center;
   border-bottom: 2px solid transparent;
   -webkit-text-decoration: none;
@@ -75,7 +75,7 @@ exports[`UnderlineNav.Link renders consistently 1`] = `
 
 .c0:hover,
 .c0:focus {
-  color: #1F2328;
+  color: #24292f;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom-color: rgba(175,184,193,0.2);
@@ -85,16 +85,16 @@ exports[`UnderlineNav.Link renders consistently 1`] = `
 
 .c0:hover .PRC-UnderlineNav-octicon,
 .c0:focus .PRC-UnderlineNav-octicon {
-  color: #656d76;
+  color: #57606a;
 }
 
 .c0.PRC-selected {
-  color: #1F2328;
+  color: #24292f;
   border-bottom-color: #fd8c73;
 }
 
 .c0.PRC-selected .PRC-UnderlineNav-octicon {
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c0:focus:not(:disabled) {
@@ -124,7 +124,7 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = `
   margin-right: 16px;
   font-size: 14px;
   line-height: 1.5;
-  color: #1F2328;
+  color: #24292f;
   text-align: center;
   border-bottom: 2px solid transparent;
   -webkit-text-decoration: none;
@@ -133,7 +133,7 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = `
 
 .c0:hover,
 .c0:focus {
-  color: #1F2328;
+  color: #24292f;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom-color: rgba(175,184,193,0.2);
@@ -143,16 +143,16 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = `
 
 .c0:hover .PRC-UnderlineNav-octicon,
 .c0:focus .PRC-UnderlineNav-octicon {
-  color: #656d76;
+  color: #57606a;
 }
 
 .c0.PRC-selected {
-  color: #1F2328;
+  color: #24292f;
   border-bottom-color: #fd8c73;
 }
 
 .c0.PRC-selected .PRC-UnderlineNav-octicon {
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c0:focus:not(:disabled) {
diff --git a/src/__tests__/__snapshots__/themePreval.test.ts.snap b/src/__tests__/__snapshots__/themePreval.test.ts.snap
index 4fd687d02ab..4734fd20d36 100644
--- a/src/__tests__/__snapshots__/themePreval.test.ts.snap
+++ b/src/__tests__/__snapshots__/themePreval.test.ts.snap
@@ -5,7 +5,7 @@ exports[`snapshot theme-preval.js 1`] = `
 
 // this file was prevaled
 // This file needs to be a JavaScript file using CommonJS to be compatible with preval
-// Cache bust: 2023-04-04 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
+// Cache bust: 2022-10-17 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
 var themePreval = {
   "animation": {
     "easeOutCubic": "cubic-bezier(0.33, 1, 0.68, 1)"
@@ -47,15 +47,15 @@ var themePreval = {
         },
         "diffBlob": {
           "addition": {
-            "numText": "#1F2328",
-            "fg": "#1F2328",
+            "numText": "#24292f",
+            "fg": "#24292f",
             "numBg": "#ccffd8",
             "lineBg": "#e6ffec",
             "wordBg": "#abf2bc"
           },
           "deletion": {
-            "numText": "#1F2328",
-            "fg": "#1F2328",
+            "numText": "#24292f",
+            "fg": "#24292f",
             "numBg": "#ffd7d5",
             "lineBg": "#ffebe9",
             "wordBg": "rgba(255,129,130,0.4)"
@@ -64,13 +64,13 @@ var themePreval = {
             "numBg": "rgba(84,174,255,0.4)"
           },
           "expander": {
-            "icon": "#656d76"
+            "icon": "#57606a"
           }
         },
         "diffstat": {
-          "deletionBorder": "rgba(31,35,40,0.15)",
-          "additionBorder": "rgba(31,35,40,0.15)",
-          "additionBg": "#1f883d"
+          "deletionBorder": "rgba(27,31,36,0.15)",
+          "additionBorder": "rgba(27,31,36,0.15)",
+          "additionBg": "#2da44e"
         },
         "searchKeyword": {
           "hl": "#fff8c5"
@@ -110,16 +110,16 @@ var themePreval = {
           }
         },
         "codemirror": {
-          "text": "#1F2328",
+          "text": "#24292f",
           "bg": "#ffffff",
           "guttersBg": "#ffffff",
           "guttermarkerText": "#ffffff",
           "guttermarkerSubtleText": "#6e7781",
-          "linenumberText": "#656d76",
-          "cursor": "#1F2328",
+          "linenumberText": "#57606a",
+          "cursor": "#24292f",
           "selectionBg": "rgba(84,174,255,0.4)",
           "activelineBg": "rgba(234,238,242,0.5)",
-          "matchingbracketText": "#1F2328",
+          "matchingbracketText": "#24292f",
           "linesBg": "#ffffff",
           "syntax": {
             "comment": "#24292f",
@@ -146,12 +146,12 @@ var themePreval = {
           "inputBg": "#32383f",
           "donutError": "#fa4549",
           "donutPending": "#bf8700",
-          "donutSuccess": "#1f883d",
+          "donutSuccess": "#2da44e",
           "donutNeutral": "#afb8c1",
           "dropdownText": "#afb8c1",
           "dropdownBg": "#32383f",
           "dropdownBorder": "#424a53",
-          "dropdownShadow": "rgba(31,35,40,0.3)",
+          "dropdownShadow": "rgba(27,31,36,0.3)",
           "dropdownHoverText": "#f6f8fa",
           "dropdownHoverBg": "#424a53",
           "dropdownBtnHoverText": "#f6f8fa",
@@ -217,14 +217,9 @@ var themePreval = {
             "bg": "#1b1f23"
           }
         },
-        "control": {
-          "borderColor": {
-            "emphasis": "#858F99"
-          }
-        },
         "avatar": {
           "bg": "#ffffff",
-          "border": "rgba(31,35,40,0.15)",
+          "border": "rgba(27,31,36,0.15)",
           "stackFade": "#afb8c1",
           "stackFadeMore": "#d0d7de"
         },
@@ -283,23 +278,27 @@ var themePreval = {
         "btn": {
           "text": "#24292f",
           "bg": "#f6f8fa",
-          "border": "rgba(31,35,40,0.15)",
+          "border": "rgba(27,31,36,0.15)",
           "hoverBg": "#f3f4f6",
-          "hoverBorder": "rgba(31,35,40,0.15)",
+          "hoverBorder": "rgba(27,31,36,0.15)",
           "activeBg": "hsla(220,14%,93%,1)",
-          "activeBorder": "rgba(31,35,40,0.15)",
+          "activeBorder": "rgba(27,31,36,0.15)",
           "selectedBg": "hsla(220,14%,94%,1)",
-          "counterBg": "rgba(31,35,40,0.08)",
+          "focusBg": "#f6f8fa",
+          "focusBorder": "rgba(27,31,36,0.15)",
+          "counterBg": "rgba(27,31,36,0.08)",
           "primary": {
             "text": "#ffffff",
-            "bg": "#1f883d",
-            "border": "rgba(31,35,40,0.15)",
-            "hoverBg": "#1a7f37",
-            "hoverBorder": "rgba(31,35,40,0.15)",
-            "selectedBg": "hsla(137,66%,28%,1)",
+            "bg": "#2da44e",
+            "border": "rgba(27,31,36,0.15)",
+            "hoverBg": "#2c974b",
+            "hoverBorder": "rgba(27,31,36,0.15)",
+            "selectedBg": "hsla(137,55%,36%,1)",
             "disabledText": "rgba(255,255,255,0.8)",
             "disabledBg": "#94d3a2",
-            "disabledBorder": "rgba(31,35,40,0.15)",
+            "disabledBorder": "rgba(27,31,36,0.15)",
+            "focusBg": "#2da44e",
+            "focusBorder": "rgba(27,31,36,0.15)",
             "icon": "rgba(255,255,255,0.8)",
             "counterBg": "rgba(255,255,255,0.2)"
           },
@@ -307,28 +306,30 @@ var themePreval = {
             "text": "#0969da",
             "hoverText": "#ffffff",
             "hoverBg": "#0969da",
-            "hoverBorder": "rgba(31,35,40,0.15)",
+            "hoverBorder": "rgba(27,31,36,0.15)",
             "hoverCounterBg": "rgba(255,255,255,0.2)",
             "selectedText": "#ffffff",
             "selectedBg": "hsla(212,92%,42%,1)",
-            "selectedBorder": "rgba(31,35,40,0.15)",
+            "selectedBorder": "rgba(27,31,36,0.15)",
             "disabledText": "rgba(9,105,218,0.5)",
             "disabledBg": "#f6f8fa",
             "disabledCounterBg": "rgba(9,105,218,0.05)",
+            "focusBorder": "rgba(27,31,36,0.15)",
             "counterBg": "rgba(9,105,218,0.1)"
           },
           "danger": {
             "text": "#cf222e",
             "hoverText": "#ffffff",
             "hoverBg": "#a40e26",
-            "hoverBorder": "rgba(31,35,40,0.15)",
+            "hoverBorder": "rgba(27,31,36,0.15)",
             "hoverCounterBg": "rgba(255,255,255,0.2)",
             "selectedText": "#ffffff",
             "selectedBg": "hsla(356,72%,44%,1)",
-            "selectedBorder": "rgba(31,35,40,0.15)",
+            "selectedBorder": "rgba(27,31,36,0.15)",
             "disabledText": "rgba(207,34,46,0.5)",
             "disabledBg": "#f6f8fa",
             "disabledCounterBg": "rgba(207,34,46,0.05)",
+            "focusBorder": "rgba(27,31,36,0.15)",
             "counterBg": "rgba(207,34,46,0.1)",
             "icon": "#cf222e",
             "hoverIcon": "#ffffff"
@@ -350,40 +351,28 @@ var themePreval = {
           "danger": {
             "hoverBg": "rgba(255,235,233,0.64)",
             "activeBg": "#ffebe9",
-            "hoverText": "#d1242f"
+            "hoverText": "#cf222e"
           }
         },
         "switchTrack": {
           "bg": "#eaeef2",
-          "hoverBg": "hsla(210,24%,90%,1)",
-          "activeBg": "hsla(210,24%,88%,1)",
-          "disabledBg": "#8c959f",
-          "fg": "#656d76",
-          "disabledFg": "#ffffff",
-          "border": "rgba(0,0,0,0)",
+          "border": "#afb8c1",
           "checked": {
-            "bg": "#0969da",
-            "hoverBg": "#0860CA",
-            "activeBg": "#0757BA",
-            "fg": "#ffffff",
-            "disabledFg": "#ffffff",
-            "border": "rgba(0,0,0,0)"
+            "bg": "#ddf4ff",
+            "hoverBg": "#b6e3ff",
+            "activeBg": "#80ccff",
+            "border": "#54aeff"
           }
         },
         "switchKnob": {
-          "bg": "#ffffff",
-          "disabledBg": "#f6f8fa",
-          "border": "#858F99",
           "checked": {
-            "bg": "#ffffff",
-            "disabledBg": "#f6f8fa",
-            "border": "#0969da"
+            "bg": "#0969da",
+            "disabledBg": "#6e7781"
           }
         },
         "segmentedControl": {
           "bg": "#eaeef2",
           "button": {
-            "bg": "#ffffff",
             "hover": {
               "bg": "rgba(175,184,193,0.2)"
             },
@@ -391,7 +380,7 @@ var themePreval = {
               "bg": "rgba(175,184,193,0.4)"
             },
             "selected": {
-              "border": "#8c959f"
+              "border": "#6e7781"
             }
           }
         },
@@ -404,8 +393,8 @@ var themePreval = {
           }
         },
         "fg": {
-          "default": "#1F2328",
-          "muted": "#656d76",
+          "default": "#24292f",
+          "muted": "#57606a",
           "subtle": "#6e7781",
           "onEmphasis": "#ffffff"
         },
@@ -418,7 +407,7 @@ var themePreval = {
         "border": {
           "default": "#d0d7de",
           "muted": "hsla(210,18%,87%,1)",
-          "subtle": "rgba(31,35,40,0.15)"
+          "subtle": "rgba(27,31,36,0.15)"
         },
         "neutral": {
           "emphasisPlus": "#24292f",
@@ -434,13 +423,13 @@ var themePreval = {
         },
         "success": {
           "fg": "#1a7f37",
-          "emphasis": "#1f883d",
+          "emphasis": "#2da44e",
           "muted": "rgba(74,194,107,0.4)",
           "subtle": "#dafbe1"
         },
         "attention": {
           "fg": "#9a6700",
-          "emphasis": "#9a6700",
+          "emphasis": "#bf8700",
           "muted": "rgba(212,167,44,0.4)",
           "subtle": "#fff8c5"
         },
@@ -451,19 +440,19 @@ var themePreval = {
           "subtle": "#fff1e5"
         },
         "danger": {
-          "fg": "#d1242f",
+          "fg": "#cf222e",
           "emphasis": "#cf222e",
           "muted": "rgba(255,129,130,0.4)",
           "subtle": "#ffebe9"
         },
         "open": {
           "fg": "#1a7f37",
-          "emphasis": "#1f883d",
+          "emphasis": "#2da44e",
           "muted": "rgba(74,194,107,0.4)",
           "subtle": "#dafbe1"
         },
         "closed": {
-          "fg": "#d1242f",
+          "fg": "#cf222e",
           "emphasis": "#cf222e",
           "muted": "rgba(255,129,130,0.4)",
           "subtle": "#ffebe9"
@@ -485,12 +474,12 @@ var themePreval = {
             "disabled": "#8c959f"
           },
           "canvas": {
-            "backdrop": "rgba(31,35,40,0.5)",
+            "backdrop": "rgba(27,31,36,0.5)",
             "sticky": "rgba(255,255,255,0.95)"
           },
           "border": {
             "active": "#fd8c73",
-            "contrast": "rgba(31,35,40,0.1)"
+            "contrast": "rgba(27,31,36,0.1)"
           }
         }
       },
@@ -506,32 +495,38 @@ var themePreval = {
           }
         },
         "avatar": {
-          "childShadow": "0 0 0 2px rgba(255,255,255,0.8)"
+          "childShadow": "-2px -2px 0 rgba(255,255,255,0.8)"
         },
         "overlay": {
-          "shadow": "0 1px 3px rgba(31,35,40,0.12), 0 8px 24px rgba(66,74,83,0.12)"
+          "shadow": "0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12)"
         },
         "btn": {
-          "shadow": "0 1px 0 rgba(31,35,40,0.04)",
+          "shadow": "0 1px 0 rgba(27,31,36,0.04)",
           "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.25)",
+          "focusShadow": "0 0 0 3px rgba(9,105,218,0.3)",
+          "shadowActive": "inset 0 0.15em 0.3em rgba(27,31,36,0.15)",
+          "shadowInputFocus": "0 0 0 0.2em rgba(9,105,218,0.3)",
           "primary": {
-            "shadow": "0 1px 0 rgba(31,35,40,0.1)",
+            "shadow": "0 1px 0 rgba(27,31,36,0.1)",
             "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(0,45,17,0.2)"
+            "selectedShadow": "inset 0 1px 0 rgba(0,45,17,0.2)",
+            "focusShadow": "0 0 0 3px rgba(45,164,78,0.4)"
           },
           "outline": {
-            "hoverShadow": "0 1px 0 rgba(31,35,40,0.1)",
+            "hoverShadow": "0 1px 0 rgba(27,31,36,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)"
+            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)",
+            "focusShadow": "0 0 0 3px rgba(5,80,174,0.4)"
           },
           "danger": {
-            "hoverShadow": "0 1px 0 rgba(31,35,40,0.1)",
+            "hoverShadow": "0 1px 0 rgba(27,31,36,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(76,0,20,0.2)"
+            "selectedShadow": "inset 0 1px 0 rgba(76,0,20,0.2)",
+            "focusShadow": "0 0 0 3px rgba(164,14,38,0.4)"
           }
         },
         "shadow": {
-          "small": "0 1px 0 rgba(31,35,40,0.04)",
+          "small": "0 1px 0 rgba(27,31,36,0.04)",
           "medium": "0 3px 6px rgba(140,149,159,0.15)",
           "large": "0 8px 24px rgba(140,149,159,0.2)",
           "extraLarge": "0 12px 28px rgba(140,149,159,0.3)"
@@ -539,7 +534,8 @@ var themePreval = {
         "primer": {
           "shadow": {
             "highlight": "inset 0 1px 0 rgba(255,255,255,0.25)",
-            "inset": "inset 0 1px 0 rgba(208,215,222,0.2)"
+            "inset": "inset 0 1px 0 rgba(208,215,222,0.2)",
+            "focus": "0 0 0 3px rgba(9,105,218,0.3)"
           }
         }
       }
@@ -577,7 +573,7 @@ var themePreval = {
         "diffstat": {
           "deletionBorder": "rgba(1,4,9,0.8)",
           "additionBorder": "rgba(1,4,9,0.8)",
-          "additionBg": "#055d20"
+          "additionBg": "#117f32"
         },
         "searchKeyword": {
           "hl": "#fcf7be"
@@ -653,7 +649,7 @@ var themePreval = {
           "inputBg": "#20252c",
           "donutError": "#d5232c",
           "donutPending": "#956400",
-          "donutSuccess": "#055d20",
+          "donutSuccess": "#117f32",
           "donutNeutral": "#acb6c0",
           "dropdownText": "#acb6c0",
           "dropdownBg": "#20252c",
@@ -724,11 +720,6 @@ var themePreval = {
             "bg": "#1b1f23"
           }
         },
-        "control": {
-          "borderColor": {
-            "emphasis": "#20252c"
-          }
-        },
         "avatar": {
           "bg": "#ffffff",
           "border": "rgba(1,4,9,0.8)",
@@ -796,6 +787,8 @@ var themePreval = {
           "activeBg": "#acb6c0",
           "activeBorder": "rgba(1,4,9,0.8)",
           "selectedBg": "#acb6c0",
+          "focusBg": "#ced5dc",
+          "focusBorder": "rgba(1,4,9,0.8)",
           "counterBg": "rgba(1,4,9,0.08)",
           "primary": {
             "text": "#ffffff",
@@ -807,6 +800,8 @@ var themePreval = {
             "disabledText": "rgba(255,255,255,0.8)",
             "disabledBg": "#94d3a2",
             "disabledBorder": "rgba(1,4,9,0.8)",
+            "focusBg": "#013d14",
+            "focusBorder": "#013d14",
             "icon": "rgba(255,255,255,0.8)",
             "counterBg": "rgba(255,255,255,0.2)"
           },
@@ -822,6 +817,7 @@ var themePreval = {
             "disabledText": "rgba(3,73,180,0.5)",
             "disabledBg": "#e7ecf0",
             "disabledCounterBg": "rgba(3,73,180,0.05)",
+            "focusBorder": "#022f7a",
             "counterBg": "rgba(3,73,180,0.1)"
           },
           "danger": {
@@ -836,6 +832,7 @@ var themePreval = {
             "disabledText": "rgba(160,17,31,0.5)",
             "disabledBg": "#e7ecf0",
             "disabledCounterBg": "rgba(160,17,31,0.05)",
+            "focusBorder": "#6e011a",
             "counterBg": "rgba(160,17,31,0.1)",
             "icon": "#86061d",
             "hoverIcon": "#ffffff"
@@ -861,36 +858,24 @@ var themePreval = {
           }
         },
         "switchTrack": {
-          "bg": "#66707b",
-          "hoverBg": "hsla(211,9%,47%,1)",
-          "activeBg": "hsla(211,9%,49%,1)",
-          "disabledBg": "#88929d",
-          "fg": "#ffffff",
-          "disabledFg": "#ffffff",
-          "border": "rgba(0,0,0,0)",
+          "bg": "#ffffff",
+          "border": "#20252c",
           "checked": {
-            "bg": "#0349b4",
-            "hoverBg": "#0860CA",
-            "activeBg": "#0757BA",
-            "fg": "#ffffff",
-            "disabledFg": "#ffffff",
-            "border": "rgba(0,0,0,0)"
+            "bg": "#dff7ff",
+            "hoverBg": "#9cd7ff",
+            "activeBg": "#67b3fd",
+            "border": "#0349b4"
           }
         },
         "switchKnob": {
-          "bg": "#ffffff",
-          "disabledBg": "#e7ecf0",
-          "border": "#20252c",
           "checked": {
-            "bg": "#ffffff",
-            "disabledBg": "#e7ecf0",
-            "border": "#0349b4"
+            "bg": "#0349b4",
+            "disabledBg": "#66707b"
           }
         },
         "segmentedControl": {
           "bg": "#e7ecf0",
           "button": {
-            "bg": "#ffffff",
             "hover": {
               "bg": "rgba(172,182,192,0.2)"
             },
@@ -898,7 +883,7 @@ var themePreval = {
               "bg": "rgba(172,182,192,0.4)"
             },
             "selected": {
-              "border": "#88929d"
+              "border": "#66707b"
             }
           }
         },
@@ -958,19 +943,19 @@ var themePreval = {
           "subtle": "#fff2d5"
         },
         "danger": {
-          "fg": "#d1242f",
+          "fg": "#a0111f",
           "emphasis": "#a0111f",
           "muted": "#ee5a5d",
           "subtle": "#fff0ee"
         },
         "open": {
           "fg": "#055d20",
-          "emphasis": "#055d20",
+          "emphasis": "#117f32",
           "muted": "rgba(38,161,72,0.4)",
           "subtle": "#d2fedb"
         },
         "closed": {
-          "fg": "#d1242f",
+          "fg": "#a0111f",
           "emphasis": "#a0111f",
           "muted": "rgba(238,90,93,0.4)",
           "subtle": "#fff0ee"
@@ -1013,7 +998,7 @@ var themePreval = {
           }
         },
         "avatar": {
-          "childShadow": "0 0 0 2px rgba(255,255,255,0.8)"
+          "childShadow": "-2px -2px 0 rgba(255,255,255,0.8)"
         },
         "overlay": {
           "shadow": "0 1px 3px rgba(1,4,9,0.12), 0 8px 24px rgba(52,59,67,0.12)"
@@ -1021,20 +1006,26 @@ var themePreval = {
         "btn": {
           "shadow": "0 1px 0 rgba(1,4,9,0.04)",
           "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.25)",
+          "focusShadow": "0 0 0 3px rgba(3,73,180,0.3)",
+          "shadowActive": "inset 0 0.15em 0.3em rgba(1,4,9,0.15)",
+          "shadowInputFocus": "0 0 0 0.2em rgba(3,73,180,0.3)",
           "primary": {
             "shadow": "0 1px 0 rgba(1,4,9,0.1)",
             "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(0,35,11,0.2)"
+            "selectedShadow": "inset 0 1px 0 rgba(0,35,11,0.2)",
+            "focusShadow": "0 0 0 3px rgba(1,61,20,0.4)"
           },
           "outline": {
             "hoverShadow": "0 1px 0 rgba(1,4,9,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(2,26,74,0.2)"
+            "selectedShadow": "inset 0 1px 0 rgba(2,26,74,0.2)",
+            "focusShadow": "0 0 0 3px rgba(2,59,149,0.4)"
           },
           "danger": {
             "hoverShadow": "0 1px 0 rgba(1,4,9,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(67,0,17,0.2)"
+            "selectedShadow": "inset 0 1px 0 rgba(67,0,17,0.2)",
+            "focusShadow": "0 0 0 3px rgba(134,6,29,0.4)"
           }
         },
         "shadow": {
@@ -1046,7 +1037,8 @@ var themePreval = {
         "primer": {
           "shadow": {
             "highlight": "inset 0 1px 0 rgba(255,255,255,0.25)",
-            "inset": "inset 0 1px 0 rgba(206,213,220,0.2)"
+            "inset": "inset 0 1px 0 rgba(206,213,220,0.2)",
+            "focus": "0 0 0 3px rgba(3,73,180,0.3)"
           }
         }
       }
@@ -1084,7 +1076,7 @@ var themePreval = {
         "diffstat": {
           "deletionBorder": "rgba(27,31,36,0.15)",
           "additionBorder": "rgba(27,31,36,0.15)",
-          "additionBg": "#0969da"
+          "additionBg": "#218bff"
         },
         "searchKeyword": {
           "hl": "#fff8c5"
@@ -1160,7 +1152,7 @@ var themePreval = {
           "inputBg": "#32383f",
           "donutError": "#dd7815",
           "donutPending": "#bf8700",
-          "donutSuccess": "#0969da",
+          "donutSuccess": "#218bff",
           "donutNeutral": "#afb8c1",
           "dropdownText": "#afb8c1",
           "dropdownBg": "#32383f",
@@ -1231,11 +1223,6 @@ var themePreval = {
             "bg": "#1b1f23"
           }
         },
-        "control": {
-          "borderColor": {
-            "emphasis": "#858F99"
-          }
-        },
         "avatar": {
           "bg": "#ffffff",
           "border": "rgba(27,31,36,0.15)",
@@ -1303,10 +1290,12 @@ var themePreval = {
           "activeBg": "hsla(220,14%,93%,1)",
           "activeBorder": "rgba(27,31,36,0.15)",
           "selectedBg": "hsla(220,14%,94%,1)",
+          "focusBg": "#f6f8fa",
+          "focusBorder": "rgba(27,31,36,0.15)",
           "counterBg": "rgba(27,31,36,0.08)",
           "primary": {
             "text": "#ffffff",
-            "bg": "#0969da",
+            "bg": "#218bff",
             "border": "rgba(27,31,36,0.15)",
             "hoverBg": "#0969da",
             "hoverBorder": "rgba(27,31,36,0.15)",
@@ -1314,6 +1303,8 @@ var themePreval = {
             "disabledText": "rgba(255,255,255,0.8)",
             "disabledBg": "#80ccff",
             "disabledBorder": "rgba(27,31,36,0.15)",
+            "focusBg": "#218bff",
+            "focusBorder": "rgba(27,31,36,0.15)",
             "icon": "rgba(255,255,255,0.8)",
             "counterBg": "rgba(255,255,255,0.2)"
           },
@@ -1329,6 +1320,7 @@ var themePreval = {
             "disabledText": "rgba(9,105,218,0.5)",
             "disabledBg": "#f6f8fa",
             "disabledCounterBg": "rgba(9,105,218,0.05)",
+            "focusBorder": "rgba(27,31,36,0.15)",
             "counterBg": "rgba(9,105,218,0.1)"
           },
           "danger": {
@@ -1343,6 +1335,7 @@ var themePreval = {
             "disabledText": "rgba(179,89,0,0.5)",
             "disabledBg": "#f6f8fa",
             "disabledCounterBg": "rgba(179,89,0,0.05)",
+            "focusBorder": "rgba(27,31,36,0.15)",
             "counterBg": "rgba(179,89,0,0.1)",
             "icon": "#b35900",
             "hoverIcon": "#ffffff"
@@ -1369,35 +1362,23 @@ var themePreval = {
         },
         "switchTrack": {
           "bg": "#eaeef2",
-          "hoverBg": "hsla(210,24%,90%,1)",
-          "activeBg": "hsla(210,24%,88%,1)",
-          "disabledBg": "#8c959f",
-          "fg": "#57606a",
-          "disabledFg": "#ffffff",
-          "border": "rgba(0,0,0,0)",
+          "border": "#afb8c1",
           "checked": {
-            "bg": "#0969da",
-            "hoverBg": "#0860CA",
-            "activeBg": "#0757BA",
-            "fg": "#ffffff",
-            "disabledFg": "#ffffff",
-            "border": "rgba(0,0,0,0)"
+            "bg": "#ddf4ff",
+            "hoverBg": "#b6e3ff",
+            "activeBg": "#80ccff",
+            "border": "#54aeff"
           }
         },
         "switchKnob": {
-          "bg": "#ffffff",
-          "disabledBg": "#f6f8fa",
-          "border": "#858F99",
           "checked": {
-            "bg": "#ffffff",
-            "disabledBg": "#f6f8fa",
-            "border": "#0969da"
+            "bg": "#0969da",
+            "disabledBg": "#6e7781"
           }
         },
         "segmentedControl": {
           "bg": "#eaeef2",
           "button": {
-            "bg": "#ffffff",
             "hover": {
               "bg": "rgba(175,184,193,0.2)"
             },
@@ -1405,7 +1386,7 @@ var themePreval = {
               "bg": "rgba(175,184,193,0.4)"
             },
             "selected": {
-              "border": "#8c959f"
+              "border": "#6e7781"
             }
           }
         },
@@ -1448,13 +1429,13 @@ var themePreval = {
         },
         "success": {
           "fg": "#0969da",
-          "emphasis": "#0969da",
+          "emphasis": "#218bff",
           "muted": "rgba(84,174,255,0.4)",
           "subtle": "#ddf4ff"
         },
         "attention": {
           "fg": "#9a6700",
-          "emphasis": "#9a6700",
+          "emphasis": "#bf8700",
           "muted": "rgba(212,167,44,0.4)",
           "subtle": "#fff8c5"
         },
@@ -1520,7 +1501,7 @@ var themePreval = {
           }
         },
         "avatar": {
-          "childShadow": "0 0 0 2px rgba(255,255,255,0.8)"
+          "childShadow": "-2px -2px 0 rgba(255,255,255,0.8)"
         },
         "overlay": {
           "shadow": "0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12)"
@@ -1528,20 +1509,26 @@ var themePreval = {
         "btn": {
           "shadow": "0 1px 0 rgba(27,31,36,0.04)",
           "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.25)",
+          "focusShadow": "0 0 0 3px rgba(9,105,218,0.3)",
+          "shadowActive": "inset 0 0.15em 0.3em rgba(27,31,36,0.15)",
+          "shadowInputFocus": "0 0 0 0.2em rgba(9,105,218,0.3)",
           "primary": {
             "shadow": "0 1px 0 rgba(27,31,36,0.1)",
             "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)"
+            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)",
+            "focusShadow": "0 0 0 3px rgba(33,139,255,0.4)"
           },
           "outline": {
             "hoverShadow": "0 1px 0 rgba(27,31,36,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)"
+            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)",
+            "focusShadow": "0 0 0 3px rgba(5,80,174,0.4)"
           },
           "danger": {
             "hoverShadow": "0 1px 0 rgba(27,31,36,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(65,32,0,0.2)"
+            "selectedShadow": "inset 0 1px 0 rgba(65,32,0,0.2)",
+            "focusShadow": "0 0 0 3px rgba(138,70,0,0.4)"
           }
         },
         "shadow": {
@@ -1553,7 +1540,8 @@ var themePreval = {
         "primer": {
           "shadow": {
             "highlight": "inset 0 1px 0 rgba(255,255,255,0.25)",
-            "inset": "inset 0 1px 0 rgba(208,215,222,0.2)"
+            "inset": "inset 0 1px 0 rgba(208,215,222,0.2)",
+            "focus": "0 0 0 3px rgba(9,105,218,0.3)"
           }
         }
       }
@@ -1591,7 +1579,7 @@ var themePreval = {
         "diffstat": {
           "deletionBorder": "rgba(27,31,36,0.15)",
           "additionBorder": "rgba(27,31,36,0.15)",
-          "additionBg": "#0969da"
+          "additionBg": "#218bff"
         },
         "searchKeyword": {
           "hl": "#fff8c5"
@@ -1667,7 +1655,7 @@ var themePreval = {
           "inputBg": "#32383f",
           "donutError": "#fa4549",
           "donutPending": "#bf8700",
-          "donutSuccess": "#0969da",
+          "donutSuccess": "#218bff",
           "donutNeutral": "#afb8c1",
           "dropdownText": "#afb8c1",
           "dropdownBg": "#32383f",
@@ -1738,11 +1726,6 @@ var themePreval = {
             "bg": "#1b1f23"
           }
         },
-        "control": {
-          "borderColor": {
-            "emphasis": "#858F99"
-          }
-        },
         "avatar": {
           "bg": "#ffffff",
           "border": "rgba(27,31,36,0.15)",
@@ -1810,10 +1793,12 @@ var themePreval = {
           "activeBg": "hsla(220,14%,93%,1)",
           "activeBorder": "rgba(27,31,36,0.15)",
           "selectedBg": "hsla(220,14%,94%,1)",
+          "focusBg": "#f6f8fa",
+          "focusBorder": "rgba(27,31,36,0.15)",
           "counterBg": "rgba(27,31,36,0.08)",
           "primary": {
             "text": "#ffffff",
-            "bg": "#0969da",
+            "bg": "#218bff",
             "border": "rgba(27,31,36,0.15)",
             "hoverBg": "#0969da",
             "hoverBorder": "rgba(27,31,36,0.15)",
@@ -1821,6 +1806,8 @@ var themePreval = {
             "disabledText": "rgba(255,255,255,0.8)",
             "disabledBg": "#80ccff",
             "disabledBorder": "rgba(27,31,36,0.15)",
+            "focusBg": "#218bff",
+            "focusBorder": "rgba(27,31,36,0.15)",
             "icon": "rgba(255,255,255,0.8)",
             "counterBg": "rgba(255,255,255,0.2)"
           },
@@ -1836,6 +1823,7 @@ var themePreval = {
             "disabledText": "rgba(9,105,218,0.5)",
             "disabledBg": "#f6f8fa",
             "disabledCounterBg": "rgba(9,105,218,0.05)",
+            "focusBorder": "rgba(27,31,36,0.15)",
             "counterBg": "rgba(9,105,218,0.1)"
           },
           "danger": {
@@ -1850,6 +1838,7 @@ var themePreval = {
             "disabledText": "rgba(207,34,46,0.5)",
             "disabledBg": "#f6f8fa",
             "disabledCounterBg": "rgba(207,34,46,0.05)",
+            "focusBorder": "rgba(27,31,36,0.15)",
             "counterBg": "rgba(207,34,46,0.1)",
             "icon": "#cf222e",
             "hoverIcon": "#ffffff"
@@ -1876,35 +1865,23 @@ var themePreval = {
         },
         "switchTrack": {
           "bg": "#eaeef2",
-          "hoverBg": "hsla(210,24%,90%,1)",
-          "activeBg": "hsla(210,24%,88%,1)",
-          "disabledBg": "#8c959f",
-          "fg": "#57606a",
-          "disabledFg": "#ffffff",
-          "border": "rgba(0,0,0,0)",
+          "border": "#afb8c1",
           "checked": {
-            "bg": "#0969da",
-            "hoverBg": "#0860CA",
-            "activeBg": "#0757BA",
-            "fg": "#ffffff",
-            "disabledFg": "#ffffff",
-            "border": "rgba(0,0,0,0)"
+            "bg": "#ddf4ff",
+            "hoverBg": "#b6e3ff",
+            "activeBg": "#80ccff",
+            "border": "#54aeff"
           }
         },
         "switchKnob": {
-          "bg": "#ffffff",
-          "disabledBg": "#f6f8fa",
-          "border": "#858F99",
           "checked": {
-            "bg": "#ffffff",
-            "disabledBg": "#f6f8fa",
-            "border": "#0969da"
+            "bg": "#0969da",
+            "disabledBg": "#6e7781"
           }
         },
         "segmentedControl": {
           "bg": "#eaeef2",
           "button": {
-            "bg": "#ffffff",
             "hover": {
               "bg": "rgba(175,184,193,0.2)"
             },
@@ -1912,7 +1889,7 @@ var themePreval = {
               "bg": "rgba(175,184,193,0.4)"
             },
             "selected": {
-              "border": "#8c959f"
+              "border": "#6e7781"
             }
           }
         },
@@ -1955,13 +1932,13 @@ var themePreval = {
         },
         "success": {
           "fg": "#0969da",
-          "emphasis": "#0969da",
+          "emphasis": "#218bff",
           "muted": "rgba(84,174,255,0.4)",
           "subtle": "#ddf4ff"
         },
         "attention": {
           "fg": "#9a6700",
-          "emphasis": "#9a6700",
+          "emphasis": "#bf8700",
           "muted": "rgba(212,167,44,0.4)",
           "subtle": "#fff8c5"
         },
@@ -2027,7 +2004,7 @@ var themePreval = {
           }
         },
         "avatar": {
-          "childShadow": "0 0 0 2px rgba(255,255,255,0.8)"
+          "childShadow": "-2px -2px 0 rgba(255,255,255,0.8)"
         },
         "overlay": {
           "shadow": "0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12)"
@@ -2035,20 +2012,26 @@ var themePreval = {
         "btn": {
           "shadow": "0 1px 0 rgba(27,31,36,0.04)",
           "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.25)",
+          "focusShadow": "0 0 0 3px rgba(9,105,218,0.3)",
+          "shadowActive": "inset 0 0.15em 0.3em rgba(27,31,36,0.15)",
+          "shadowInputFocus": "0 0 0 0.2em rgba(9,105,218,0.3)",
           "primary": {
             "shadow": "0 1px 0 rgba(27,31,36,0.1)",
             "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)"
+            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)",
+            "focusShadow": "0 0 0 3px rgba(33,139,255,0.4)"
           },
           "outline": {
             "hoverShadow": "0 1px 0 rgba(27,31,36,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)"
+            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)",
+            "focusShadow": "0 0 0 3px rgba(5,80,174,0.4)"
           },
           "danger": {
             "hoverShadow": "0 1px 0 rgba(27,31,36,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(76,0,20,0.2)"
+            "selectedShadow": "inset 0 1px 0 rgba(76,0,20,0.2)",
+            "focusShadow": "0 0 0 3px rgba(164,14,38,0.4)"
           }
         },
         "shadow": {
@@ -2060,7 +2043,8 @@ var themePreval = {
         "primer": {
           "shadow": {
             "highlight": "inset 0 1px 0 rgba(255,255,255,0.25)",
-            "inset": "inset 0 1px 0 rgba(208,215,222,0.2)"
+            "inset": "inset 0 1px 0 rgba(208,215,222,0.2)",
+            "focus": "0 0 0 3px rgba(9,105,218,0.3)"
           }
         }
       }
@@ -2075,24 +2059,24 @@ var themePreval = {
         },
         "diffBlob": {
           "addition": {
-            "numText": "#e6edf3",
-            "fg": "#e6edf3",
+            "numText": "#c9d1d9",
+            "fg": "#c9d1d9",
             "numBg": "rgba(63,185,80,0.3)",
             "lineBg": "rgba(46,160,67,0.15)",
             "wordBg": "rgba(46,160,67,0.4)"
           },
           "deletion": {
-            "numText": "#e6edf3",
-            "fg": "#e6edf3",
+            "numText": "#c9d1d9",
+            "fg": "#c9d1d9",
             "numBg": "rgba(248,81,73,0.3)",
-            "lineBg": "rgba(248,81,73,0.1)",
+            "lineBg": "rgba(248,81,73,0.15)",
             "wordBg": "rgba(248,81,73,0.4)"
           },
           "hunk": {
             "numBg": "rgba(56,139,253,0.4)"
           },
           "expander": {
-            "icon": "#7d8590"
+            "icon": "#8b949e"
           }
         },
         "diffstat": {
@@ -2138,16 +2122,16 @@ var themePreval = {
           }
         },
         "codemirror": {
-          "text": "#e6edf3",
+          "text": "#c9d1d9",
           "bg": "#0d1117",
           "guttersBg": "#0d1117",
           "guttermarkerText": "#0d1117",
           "guttermarkerSubtleText": "#6e7681",
-          "linenumberText": "#7d8590",
-          "cursor": "#e6edf3",
+          "linenumberText": "#8b949e",
+          "cursor": "#c9d1d9",
           "selectionBg": "rgba(56,139,253,0.4)",
           "activelineBg": "rgba(110,118,129,0.1)",
-          "matchingbracketText": "#e6edf3",
+          "matchingbracketText": "#c9d1d9",
           "linesBg": "#0d1117",
           "syntax": {
             "comment": "#8b949e",
@@ -2162,57 +2146,57 @@ var themePreval = {
         },
         "checks": {
           "bg": "#010409",
-          "textPrimary": "#e6edf3",
-          "textSecondary": "#7d8590",
-          "textLink": "#2f81f7",
-          "btnIcon": "#7d8590",
-          "btnHoverIcon": "#e6edf3",
+          "textPrimary": "#c9d1d9",
+          "textSecondary": "#8b949e",
+          "textLink": "#58a6ff",
+          "btnIcon": "#8b949e",
+          "btnHoverIcon": "#c9d1d9",
           "btnHoverBg": "rgba(110,118,129,0.1)",
-          "inputText": "#7d8590",
+          "inputText": "#8b949e",
           "inputPlaceholderText": "#6e7681",
-          "inputFocusText": "#e6edf3",
+          "inputFocusText": "#c9d1d9",
           "inputBg": "#161b22",
           "donutError": "#f85149",
           "donutPending": "#d29922",
           "donutSuccess": "#2ea043",
           "donutNeutral": "#8b949e",
-          "dropdownText": "#e6edf3",
+          "dropdownText": "#c9d1d9",
           "dropdownBg": "#161b22",
           "dropdownBorder": "#30363d",
           "dropdownShadow": "rgba(1,4,9,0.3)",
-          "dropdownHoverText": "#e6edf3",
+          "dropdownHoverText": "#c9d1d9",
           "dropdownHoverBg": "rgba(110,118,129,0.1)",
-          "dropdownBtnHoverText": "#e6edf3",
+          "dropdownBtnHoverText": "#c9d1d9",
           "dropdownBtnHoverBg": "rgba(110,118,129,0.1)",
           "scrollbarThumbBg": "rgba(110,118,129,0.4)",
-          "headerLabelText": "#7d8590",
-          "headerLabelOpenText": "#e6edf3",
+          "headerLabelText": "#8b949e",
+          "headerLabelOpenText": "#c9d1d9",
           "headerBorder": "#21262d",
-          "headerIcon": "#7d8590",
-          "lineText": "#7d8590",
+          "headerIcon": "#8b949e",
+          "lineText": "#8b949e",
           "lineNumText": "#6e7681",
           "lineTimestampText": "#6e7681",
           "lineHoverBg": "rgba(110,118,129,0.1)",
-          "lineSelectedBg": "rgba(56,139,253,0.1)",
-          "lineSelectedNumText": "#2f81f7",
+          "lineSelectedBg": "rgba(56,139,253,0.15)",
+          "lineSelectedNumText": "#58a6ff",
           "lineDtFmText": "#ffffff",
           "lineDtFmBg": "#9e6a03",
           "gateBg": "rgba(187,128,9,0.15)",
-          "gateText": "#7d8590",
+          "gateText": "#8b949e",
           "gateWaitingText": "#d29922",
           "stepHeaderOpenBg": "#161b22",
           "stepErrorText": "#f85149",
           "stepWarningText": "#d29922",
-          "loglineText": "#7d8590",
+          "loglineText": "#8b949e",
           "loglineNumText": "#6e7681",
           "loglineDebugText": "#a371f7",
-          "loglineErrorText": "#7d8590",
+          "loglineErrorText": "#8b949e",
           "loglineErrorNumText": "#6e7681",
-          "loglineErrorBg": "rgba(248,81,73,0.1)",
-          "loglineWarningText": "#7d8590",
+          "loglineErrorBg": "rgba(248,81,73,0.15)",
+          "loglineWarningText": "#8b949e",
           "loglineWarningNumText": "#d29922",
           "loglineWarningBg": "rgba(187,128,9,0.15)",
-          "loglineCommandText": "#2f81f7",
+          "loglineCommandText": "#58a6ff",
           "loglineSectionText": "#3fb950",
           "ansi": {
             "black": "#0d1117",
@@ -2245,11 +2229,6 @@ var themePreval = {
             "bg": "#f6f8fa"
           }
         },
-        "control": {
-          "borderColor": {
-            "emphasis": "#606771"
-          }
-        },
         "avatar": {
           "bg": "rgba(255,255,255,0.1)",
           "border": "rgba(240,246,252,0.1)",
@@ -2317,6 +2296,8 @@ var themePreval = {
           "activeBg": "hsla(212,12%,18%,1)",
           "activeBorder": "#6e7681",
           "selectedBg": "#161b22",
+          "focusBg": "#21262d",
+          "focusBorder": "#8b949e",
           "counterBg": "#30363d",
           "primary": {
             "text": "#ffffff",
@@ -2328,6 +2309,8 @@ var themePreval = {
             "disabledText": "rgba(255,255,255,0.5)",
             "disabledBg": "rgba(35,134,54,0.6)",
             "disabledBorder": "rgba(240,246,252,0.1)",
+            "focusBg": "#238636",
+            "focusBorder": "rgba(240,246,252,0.1)",
             "icon": "#ffffff",
             "counterBg": "rgba(255,255,255,0.2)"
           },
@@ -2343,6 +2326,7 @@ var themePreval = {
             "disabledText": "rgba(88,166,255,0.5)",
             "disabledBg": "#0d1117",
             "disabledCounterBg": "rgba(31,111,235,0.05)",
+            "focusBorder": "rgba(240,246,252,0.1)",
             "counterBg": "rgba(31,111,235,0.1)"
           },
           "danger": {
@@ -2358,6 +2342,7 @@ var themePreval = {
             "disabledText": "rgba(248,81,73,0.5)",
             "disabledBg": "#0d1117",
             "disabledCounterBg": "rgba(218,54,51,0.05)",
+            "focusBorder": "#f85149",
             "counterBg": "rgba(218,54,51,0.1)",
             "icon": "#f85149"
           }
@@ -2382,36 +2367,24 @@ var themePreval = {
           }
         },
         "switchTrack": {
-          "bg": "rgba(110,118,129,0.1)",
-          "hoverBg": "hsla(215,8%,72%,0.1)",
-          "activeBg": "rgba(110,118,129,0.4)",
-          "disabledBg": "#21262d",
-          "fg": "#7d8590",
-          "disabledFg": "#010409",
-          "border": "rgba(0,0,0,0)",
+          "bg": "#010409",
+          "border": "#6e7681",
           "checked": {
             "bg": "rgba(31,111,235,0.35)",
             "hoverBg": "rgba(31,111,235,0.5)",
             "activeBg": "rgba(31,111,235,0.65)",
-            "fg": "#ffffff",
-            "disabledFg": "#010409",
-            "border": "rgba(0,0,0,0)"
+            "border": "#58a6ff"
           }
         },
         "switchKnob": {
-          "bg": "#0d1117",
-          "border": "#606771",
-          "disabledBg": "#161b22",
           "checked": {
-            "bg": "#0d1117",
-            "disabledBg": "#161b22",
-            "border": "rgba(31,111,235,0.35)"
+            "bg": "#1f6feb",
+            "disabledBg": "#484f58"
           }
         },
         "segmentedControl": {
-          "bg": "rgba(110,118,129,0.1)",
+          "bg": "#161b22",
           "button": {
-            "bg": "#0d1117",
             "hover": {
               "bg": "#30363d"
             },
@@ -2428,12 +2401,12 @@ var themePreval = {
             "hoverBg": "rgba(177,186,196,0.12)"
           },
           "directory": {
-            "fill": "#7d8590"
+            "fill": "#8b949e"
           }
         },
         "fg": {
-          "default": "#e6edf3",
-          "muted": "#7d8590",
+          "default": "#c9d1d9",
+          "muted": "#8b949e",
           "subtle": "#6e7681",
           "onEmphasis": "#ffffff"
         },
@@ -2455,10 +2428,10 @@ var themePreval = {
           "subtle": "rgba(110,118,129,0.1)"
         },
         "accent": {
-          "fg": "#2f81f7",
+          "fg": "#58a6ff",
           "emphasis": "#1f6feb",
           "muted": "rgba(56,139,253,0.4)",
-          "subtle": "rgba(56,139,253,0.1)"
+          "subtle": "rgba(56,139,253,0.15)"
         },
         "success": {
           "fg": "#3fb950",
@@ -2476,13 +2449,13 @@ var themePreval = {
           "fg": "#db6d28",
           "emphasis": "#bd561d",
           "muted": "rgba(219,109,40,0.4)",
-          "subtle": "rgba(219,109,40,0.1)"
+          "subtle": "rgba(219,109,40,0.15)"
         },
         "danger": {
           "fg": "#f85149",
           "emphasis": "#da3633",
           "muted": "rgba(248,81,73,0.4)",
-          "subtle": "rgba(248,81,73,0.1)"
+          "subtle": "rgba(248,81,73,0.15)"
         },
         "open": {
           "fg": "#3fb950",
@@ -2500,13 +2473,13 @@ var themePreval = {
           "fg": "#a371f7",
           "emphasis": "#8957e5",
           "muted": "rgba(163,113,247,0.4)",
-          "subtle": "rgba(163,113,247,0.1)"
+          "subtle": "rgba(163,113,247,0.15)"
         },
         "sponsors": {
           "fg": "#db61a2",
           "emphasis": "#bf4b8a",
           "muted": "rgba(219,97,162,0.4)",
-          "subtle": "rgba(219,97,162,0.1)"
+          "subtle": "rgba(219,97,162,0.15)"
         },
         "primer": {
           "fg": {
@@ -2537,7 +2510,7 @@ var themePreval = {
           }
         },
         "avatar": {
-          "childShadow": "0 0 0 2px #0d1117"
+          "childShadow": "-2px -2px 0 #0d1117"
         },
         "overlay": {
           "shadow": "0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85)"
@@ -2545,20 +2518,26 @@ var themePreval = {
         "btn": {
           "shadow": "0 0 transparent",
           "insetShadow": "0 0 transparent",
+          "focusShadow": "0 0 0 3px rgba(139,148,158,0.3)",
+          "shadowActive": "inset 0 0.15em 0.3em rgba(1,4,9,0.15)",
+          "shadowInputFocus": "0 0 0 0.2em rgba(31,111,235,0.3)",
           "primary": {
             "shadow": "0 0 transparent",
             "insetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent"
+            "selectedShadow": "0 0 transparent",
+            "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)"
           },
           "outline": {
             "hoverShadow": "0 1px 0 rgba(1,4,9,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "0 0 transparent"
+            "selectedShadow": "0 0 transparent",
+            "focusShadow": "0 0 0 3px rgba(17,88,199,0.4)"
           },
           "danger": {
             "hoverShadow": "0 0 transparent",
             "hoverInsetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent"
+            "selectedShadow": "0 0 transparent",
+            "focusShadow": "0 0 0 3px rgba(248,81,73,0.4)"
           }
         },
         "shadow": {
@@ -2570,7 +2549,8 @@ var themePreval = {
         "primer": {
           "shadow": {
             "highlight": "0 0 transparent",
-            "inset": "0 0 transparent"
+            "inset": "0 0 transparent",
+            "focus": "0 0 0 3px #0c2d6b"
           }
         }
       }
@@ -2595,14 +2575,14 @@ var themePreval = {
             "numText": "#adbac7",
             "fg": "#adbac7",
             "numBg": "rgba(229,83,75,0.3)",
-            "lineBg": "rgba(229,83,75,0.1)",
+            "lineBg": "rgba(229,83,75,0.15)",
             "wordBg": "rgba(229,83,75,0.4)"
           },
           "hunk": {
             "numBg": "rgba(65,132,228,0.4)"
           },
           "expander": {
-            "icon": "#adbac7"
+            "icon": "#768390"
           }
         },
         "diffstat": {
@@ -2703,7 +2683,7 @@ var themePreval = {
           "lineNumText": "#636e7b",
           "lineTimestampText": "#636e7b",
           "lineHoverBg": "rgba(99,110,123,0.1)",
-          "lineSelectedBg": "rgba(65,132,228,0.1)",
+          "lineSelectedBg": "rgba(65,132,228,0.15)",
           "lineSelectedNumText": "#539bf5",
           "lineDtFmText": "#cdd9e5",
           "lineDtFmBg": "#966600",
@@ -2718,7 +2698,7 @@ var themePreval = {
           "loglineDebugText": "#986ee2",
           "loglineErrorText": "#768390",
           "loglineErrorNumText": "#636e7b",
-          "loglineErrorBg": "rgba(229,83,75,0.1)",
+          "loglineErrorBg": "rgba(229,83,75,0.15)",
           "loglineWarningText": "#768390",
           "loglineWarningNumText": "#c69026",
           "loglineWarningBg": "rgba(174,124,20,0.15)",
@@ -2755,11 +2735,6 @@ var themePreval = {
             "bg": "#f6f8fa"
           }
         },
-        "control": {
-          "borderColor": {
-            "emphasis": "#606771"
-          }
-        },
         "avatar": {
           "bg": "rgba(205,217,229,0.1)",
           "border": "rgba(205,217,229,0.1)",
@@ -2827,6 +2802,8 @@ var themePreval = {
           "activeBg": "hsla(213,12%,27%,1)",
           "activeBorder": "#636e7b",
           "selectedBg": "#2d333b",
+          "focusBg": "#373e47",
+          "focusBorder": "#768390",
           "counterBg": "#444c56",
           "primary": {
             "text": "#ffffff",
@@ -2838,6 +2815,8 @@ var themePreval = {
             "disabledText": "rgba(205,217,229,0.5)",
             "disabledBg": "rgba(52,125,57,0.6)",
             "disabledBorder": "rgba(205,217,229,0.1)",
+            "focusBg": "#347d39",
+            "focusBorder": "rgba(205,217,229,0.1)",
             "icon": "#cdd9e5",
             "counterBg": "rgba(205,217,229,0.2)"
           },
@@ -2853,6 +2832,7 @@ var themePreval = {
             "disabledText": "rgba(83,155,245,0.5)",
             "disabledBg": "#22272e",
             "disabledCounterBg": "rgba(49,109,202,0.05)",
+            "focusBorder": "rgba(205,217,229,0.1)",
             "counterBg": "rgba(49,109,202,0.1)"
           },
           "danger": {
@@ -2868,6 +2848,7 @@ var themePreval = {
             "disabledText": "rgba(229,83,75,0.5)",
             "disabledBg": "#22272e",
             "disabledCounterBg": "rgba(201,60,55,0.05)",
+            "focusBorder": "#e5534b",
             "counterBg": "rgba(201,60,55,0.1)",
             "icon": "#e5534b"
           }
@@ -2892,36 +2873,24 @@ var themePreval = {
           }
         },
         "switchTrack": {
-          "bg": "rgba(99,110,123,0.1)",
-          "hoverBg": "hsla(213,11%,69%,0.1)",
-          "activeBg": "rgba(99,110,123,0.4)",
-          "disabledBg": "#373e47",
-          "fg": "#768390",
-          "disabledFg": "#1c2128",
-          "border": "rgba(0,0,0,0)",
+          "bg": "#1c2128",
+          "border": "#636e7b",
           "checked": {
             "bg": "rgba(49,109,202,0.35)",
             "hoverBg": "rgba(49,109,202,0.5)",
             "activeBg": "rgba(49,109,202,0.65)",
-            "fg": "#cdd9e5",
-            "disabledFg": "#1c2128",
-            "border": "rgba(0,0,0,0)"
+            "border": "#539bf5"
           }
         },
         "switchKnob": {
-          "bg": "#22272e",
-          "border": "#606771",
-          "disabledBg": "#2d333b",
           "checked": {
-            "bg": "#22272e",
-            "disabledBg": "#2d333b",
-            "border": "rgba(49,109,202,0.35)"
+            "bg": "#316dca",
+            "disabledBg": "#545d68"
           }
         },
         "segmentedControl": {
-          "bg": "rgba(99,110,123,0.1)",
+          "bg": "#2d333b",
           "button": {
-            "bg": "#22272e",
             "hover": {
               "bg": "#444c56"
             },
@@ -2968,7 +2937,7 @@ var themePreval = {
           "fg": "#539bf5",
           "emphasis": "#316dca",
           "muted": "rgba(65,132,228,0.4)",
-          "subtle": "rgba(65,132,228,0.1)"
+          "subtle": "rgba(65,132,228,0.15)"
         },
         "success": {
           "fg": "#57ab5a",
@@ -2986,13 +2955,13 @@ var themePreval = {
           "fg": "#cc6b2c",
           "emphasis": "#ae5622",
           "muted": "rgba(204,107,44,0.4)",
-          "subtle": "rgba(204,107,44,0.1)"
+          "subtle": "rgba(204,107,44,0.15)"
         },
         "danger": {
           "fg": "#e5534b",
           "emphasis": "#c93c37",
           "muted": "rgba(229,83,75,0.4)",
-          "subtle": "rgba(229,83,75,0.1)"
+          "subtle": "rgba(229,83,75,0.15)"
         },
         "open": {
           "fg": "#57ab5a",
@@ -3010,13 +2979,13 @@ var themePreval = {
           "fg": "#986ee2",
           "emphasis": "#8256d0",
           "muted": "rgba(152,110,226,0.4)",
-          "subtle": "rgba(152,110,226,0.1)"
+          "subtle": "rgba(152,110,226,0.15)"
         },
         "sponsors": {
           "fg": "#c96198",
           "emphasis": "#ae4c82",
           "muted": "rgba(201,97,152,0.4)",
-          "subtle": "rgba(201,97,152,0.1)"
+          "subtle": "rgba(201,97,152,0.15)"
         },
         "primer": {
           "fg": {
@@ -3047,7 +3016,7 @@ var themePreval = {
           }
         },
         "avatar": {
-          "childShadow": "0 0 0 2px #22272e"
+          "childShadow": "-2px -2px 0 #22272e"
         },
         "overlay": {
           "shadow": "0 0 0 1px #444c56, 0 16px 32px rgba(28,33,40,0.85)"
@@ -3055,20 +3024,26 @@ var themePreval = {
         "btn": {
           "shadow": "0 0 transparent",
           "insetShadow": "0 0 transparent",
+          "focusShadow": "0 0 0 3px rgba(118,131,144,0.3)",
+          "shadowActive": "inset 0 0.15em 0.3em rgba(28,33,40,0.15)",
+          "shadowInputFocus": "0 0 0 0.2em rgba(49,109,202,0.3)",
           "primary": {
             "shadow": "0 0 transparent",
             "insetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent"
+            "selectedShadow": "0 0 transparent",
+            "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)"
           },
           "outline": {
             "hoverShadow": "0 1px 0 rgba(28,33,40,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(205,217,229,0.03)",
-            "selectedShadow": "0 0 transparent"
+            "selectedShadow": "0 0 transparent",
+            "focusShadow": "0 0 0 3px rgba(37,90,178,0.4)"
           },
           "danger": {
             "hoverShadow": "0 0 transparent",
             "hoverInsetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent"
+            "selectedShadow": "0 0 transparent",
+            "focusShadow": "0 0 0 3px rgba(229,83,75,0.4)"
           }
         },
         "shadow": {
@@ -3080,7 +3055,8 @@ var themePreval = {
         "primer": {
           "shadow": {
             "highlight": "0 0 transparent",
-            "inset": "0 0 transparent"
+            "inset": "0 0 transparent",
+            "focus": "0 0 0 3px #143d79"
           }
         }
       }
@@ -3105,7 +3081,7 @@ var themePreval = {
             "numText": "#f0f3f6",
             "fg": "#0a0c10",
             "numBg": "rgba(255,106,105,0.3)",
-            "lineBg": "rgba(255,106,105,0.1)",
+            "lineBg": "rgba(255,106,105,0.15)",
             "wordBg": "#ff6a69"
           },
           "hunk": {
@@ -3213,7 +3189,7 @@ var themePreval = {
           "lineNumText": "#9ea7b3",
           "lineTimestampText": "#9ea7b3",
           "lineHoverBg": "rgba(158,167,179,0.1)",
-          "lineSelectedBg": "rgba(64,158,255,0.1)",
+          "lineSelectedBg": "rgba(64,158,255,0.15)",
           "lineSelectedNumText": "#71b7ff",
           "lineDtFmText": "#0a0c10",
           "lineDtFmBg": "#e09b13",
@@ -3228,7 +3204,7 @@ var themePreval = {
           "loglineDebugText": "#b780ff",
           "loglineErrorText": "#f0f3f6",
           "loglineErrorNumText": "#9ea7b3",
-          "loglineErrorBg": "rgba(255,106,105,0.1)",
+          "loglineErrorBg": "rgba(255,106,105,0.15)",
           "loglineWarningText": "#f0f3f6",
           "loglineWarningNumText": "#f0b72f",
           "loglineWarningBg": "rgba(224,155,19,0.15)",
@@ -3265,11 +3241,6 @@ var themePreval = {
             "bg": "#f6f8fa"
           }
         },
-        "control": {
-          "borderColor": {
-            "emphasis": "#9ea7b3"
-          }
-        },
         "avatar": {
           "bg": "rgba(255,255,255,0.1)",
           "border": "rgba(255,255,255,0.9)",
@@ -3337,6 +3308,8 @@ var themePreval = {
           "activeBg": "hsla(217,10%,33%,1)",
           "activeBorder": "#9ea7b3",
           "selectedBg": "rgba(82,89,100,0.9)",
+          "focusBg": "#272b33",
+          "focusBorder": "#bdc4cc",
           "counterBg": "#525964",
           "primary": {
             "text": "#0a0c10",
@@ -3348,6 +3321,8 @@ var themePreval = {
             "disabledText": "rgba(10,12,16,0.5)",
             "disabledBg": "rgba(9,180,58,0.6)",
             "disabledBorder": "rgba(74,225,104,0.4)",
+            "focusBg": "#09b43a",
+            "focusBorder": "#7a828e",
             "icon": "#0a0c10",
             "counterBg": "rgba(1,4,9,0.15)"
           },
@@ -3363,6 +3338,7 @@ var themePreval = {
             "disabledText": "rgba(113,183,255,0.5)",
             "disabledBg": "#0a0c10",
             "disabledCounterBg": "rgba(64,158,255,0.05)",
+            "focusBorder": "#7a828e",
             "counterBg": "rgba(64,158,255,0.1)"
           },
           "danger": {
@@ -3378,6 +3354,7 @@ var themePreval = {
             "disabledText": "rgba(255,106,105,0.5)",
             "disabledBg": "#0a0c10",
             "disabledCounterBg": "rgba(255,106,105,0.05)",
+            "focusBorder": "#ff6a69",
             "counterBg": "rgba(1,4,9,0.15)",
             "icon": "#ff6a69"
           }
@@ -3402,36 +3379,24 @@ var themePreval = {
           }
         },
         "switchTrack": {
-          "bg": "#9ea7b3",
-          "hoverBg": "hsla(214,12%,61%,1)",
-          "activeBg": "hsla(214,12%,58%,1)",
-          "disabledBg": "#272b33",
-          "fg": "#0a0c10",
-          "disabledFg": "#010409",
-          "border": "rgba(0,0,0,0)",
+          "bg": "#010409",
+          "border": "#7a828e",
           "checked": {
-            "bg": "#409eff",
+            "bg": "rgba(64,158,255,0.35)",
             "hoverBg": "rgba(64,158,255,0.5)",
             "activeBg": "rgba(64,158,255,0.65)",
-            "fg": "#0a0c10",
-            "disabledFg": "#010409",
-            "border": "rgba(0,0,0,0)"
+            "border": "#409eff"
           }
         },
         "switchKnob": {
-          "bg": "#0a0c10",
-          "border": "#9ea7b3",
-          "disabledBg": "#272b33",
           "checked": {
-            "bg": "#0a0c10",
-            "disabledBg": "#272b33",
-            "border": "#409eff"
+            "bg": "#409eff",
+            "disabledBg": "#7a828e"
           }
         },
         "segmentedControl": {
-          "bg": "rgba(158,167,179,0.1)",
+          "bg": "#272b33",
           "button": {
-            "bg": "#0a0c10",
             "hover": {
               "bg": "#525964"
             },
@@ -3478,7 +3443,7 @@ var themePreval = {
           "fg": "#71b7ff",
           "emphasis": "#409eff",
           "muted": "#409eff",
-          "subtle": "rgba(64,158,255,0.1)"
+          "subtle": "rgba(64,158,255,0.15)"
         },
         "success": {
           "fg": "#26cd4d",
@@ -3496,13 +3461,13 @@ var themePreval = {
           "fg": "#e7811d",
           "emphasis": "#e7811d",
           "muted": "#e7811d",
-          "subtle": "rgba(231,129,29,0.1)"
+          "subtle": "rgba(231,129,29,0.15)"
         },
         "danger": {
           "fg": "#ff6a69",
           "emphasis": "#ff6a69",
           "muted": "#ff6a69",
-          "subtle": "rgba(255,106,105,0.1)"
+          "subtle": "rgba(255,106,105,0.15)"
         },
         "open": {
           "fg": "#26cd4d",
@@ -3520,13 +3485,13 @@ var themePreval = {
           "fg": "#b780ff",
           "emphasis": "#b87fff",
           "muted": "#b780ff",
-          "subtle": "rgba(183,128,255,0.1)"
+          "subtle": "rgba(183,128,255,0.15)"
         },
         "sponsors": {
           "fg": "#ef6eb1",
           "emphasis": "#ef6eb1",
           "muted": "#ef6eb1",
-          "subtle": "rgba(239,110,177,0.1)"
+          "subtle": "rgba(239,110,177,0.15)"
         },
         "primer": {
           "fg": {
@@ -3557,7 +3522,7 @@ var themePreval = {
           }
         },
         "avatar": {
-          "childShadow": "0 0 0 2px #0a0c10"
+          "childShadow": "-2px -2px 0 #0a0c10"
         },
         "overlay": {
           "shadow": "0 0 0 1px #525964, 0 16px 32px rgba(1,4,9,0.85)"
@@ -3565,20 +3530,26 @@ var themePreval = {
         "btn": {
           "shadow": "0 0 transparent",
           "insetShadow": "0 0 transparent",
+          "focusShadow": "0 0 0 3px rgba(189,196,204,0.3)",
+          "shadowActive": "inset 0 0.15em 0.3em rgba(1,4,9,0.15)",
+          "shadowInputFocus": "0 0 0 0.2em rgba(64,158,255,0.3)",
           "primary": {
             "shadow": "0 0 transparent",
             "insetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent"
+            "selectedShadow": "0 0 transparent",
+            "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)"
           },
           "outline": {
             "hoverShadow": "0 1px 0 rgba(1,4,9,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "0 0 transparent"
+            "selectedShadow": "0 0 transparent",
+            "focusShadow": "0 0 0 3px rgba(49,139,248,0.4)"
           },
           "danger": {
             "hoverShadow": "0 0 transparent",
             "hoverInsetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent"
+            "selectedShadow": "0 0 transparent",
+            "focusShadow": "0 0 0 3px rgba(255,106,105,0.4)"
           }
         },
         "shadow": {
@@ -3590,7 +3561,8 @@ var themePreval = {
         "primer": {
           "shadow": {
             "highlight": "0 0 transparent",
-            "inset": "0 0 transparent"
+            "inset": "0 0 transparent",
+            "focus": "0 0 0 3px #1e60d5"
           }
         }
       }
@@ -3615,7 +3587,7 @@ var themePreval = {
             "numText": "#c9d1d9",
             "fg": "#c9d1d9",
             "numBg": "rgba(212,118,22,0.3)",
-            "lineBg": "rgba(212,118,22,0.1)",
+            "lineBg": "rgba(212,118,22,0.15)",
             "wordBg": "rgba(212,118,22,0.4)"
           },
           "hunk": {
@@ -3723,7 +3695,7 @@ var themePreval = {
           "lineNumText": "#6e7681",
           "lineTimestampText": "#6e7681",
           "lineHoverBg": "rgba(110,118,129,0.1)",
-          "lineSelectedBg": "rgba(56,139,253,0.1)",
+          "lineSelectedBg": "rgba(56,139,253,0.15)",
           "lineSelectedNumText": "#58a6ff",
           "lineDtFmText": "#ffffff",
           "lineDtFmBg": "#9e6a03",
@@ -3738,7 +3710,7 @@ var themePreval = {
           "loglineDebugText": "#a371f7",
           "loglineErrorText": "#8b949e",
           "loglineErrorNumText": "#6e7681",
-          "loglineErrorBg": "rgba(212,118,22,0.1)",
+          "loglineErrorBg": "rgba(212,118,22,0.15)",
           "loglineWarningText": "#8b949e",
           "loglineWarningNumText": "#d29922",
           "loglineWarningBg": "rgba(187,128,9,0.15)",
@@ -3775,11 +3747,6 @@ var themePreval = {
             "bg": "#f6f8fa"
           }
         },
-        "control": {
-          "borderColor": {
-            "emphasis": "#606771"
-          }
-        },
         "avatar": {
           "bg": "rgba(255,255,255,0.1)",
           "border": "rgba(240,246,252,0.1)",
@@ -3847,6 +3814,8 @@ var themePreval = {
           "activeBg": "hsla(212,12%,18%,1)",
           "activeBorder": "#6e7681",
           "selectedBg": "#161b22",
+          "focusBg": "#21262d",
+          "focusBorder": "#8b949e",
           "counterBg": "#30363d",
           "primary": {
             "text": "#ffffff",
@@ -3858,6 +3827,8 @@ var themePreval = {
             "disabledText": "rgba(255,255,255,0.5)",
             "disabledBg": "rgba(31,111,235,0.6)",
             "disabledBorder": "rgba(240,246,252,0.1)",
+            "focusBg": "#1f6feb",
+            "focusBorder": "rgba(240,246,252,0.1)",
             "icon": "#ffffff",
             "counterBg": "rgba(255,255,255,0.2)"
           },
@@ -3873,6 +3844,7 @@ var themePreval = {
             "disabledText": "rgba(88,166,255,0.5)",
             "disabledBg": "#0d1117",
             "disabledCounterBg": "rgba(31,111,235,0.05)",
+            "focusBorder": "rgba(240,246,252,0.1)",
             "counterBg": "rgba(31,111,235,0.1)"
           },
           "danger": {
@@ -3888,6 +3860,7 @@ var themePreval = {
             "disabledText": "rgba(212,118,22,0.5)",
             "disabledBg": "#0d1117",
             "disabledCounterBg": "rgba(183,97,0,0.05)",
+            "focusBorder": "#d47616",
             "counterBg": "rgba(183,97,0,0.1)",
             "icon": "#d47616"
           }
@@ -3912,36 +3885,24 @@ var themePreval = {
           }
         },
         "switchTrack": {
-          "bg": "rgba(110,118,129,0.1)",
-          "hoverBg": "hsla(215,8%,72%,0.1)",
-          "activeBg": "rgba(110,118,129,0.4)",
-          "disabledBg": "#21262d",
-          "fg": "#8b949e",
-          "disabledFg": "#010409",
-          "border": "rgba(0,0,0,0)",
+          "bg": "#010409",
+          "border": "#6e7681",
           "checked": {
             "bg": "rgba(31,111,235,0.35)",
             "hoverBg": "rgba(31,111,235,0.5)",
             "activeBg": "rgba(31,111,235,0.65)",
-            "fg": "#ffffff",
-            "disabledFg": "#010409",
-            "border": "rgba(0,0,0,0)"
+            "border": "#58a6ff"
           }
         },
         "switchKnob": {
-          "bg": "#0d1117",
-          "border": "#606771",
-          "disabledBg": "#161b22",
           "checked": {
-            "bg": "#0d1117",
-            "disabledBg": "#161b22",
-            "border": "rgba(31,111,235,0.35)"
+            "bg": "#1f6feb",
+            "disabledBg": "#484f58"
           }
         },
         "segmentedControl": {
-          "bg": "rgba(110,118,129,0.1)",
+          "bg": "#161b22",
           "button": {
-            "bg": "#0d1117",
             "hover": {
               "bg": "#30363d"
             },
@@ -3988,7 +3949,7 @@ var themePreval = {
           "fg": "#58a6ff",
           "emphasis": "#1f6feb",
           "muted": "rgba(56,139,253,0.4)",
-          "subtle": "rgba(56,139,253,0.1)"
+          "subtle": "rgba(56,139,253,0.15)"
         },
         "success": {
           "fg": "#58a6ff",
@@ -4006,13 +3967,13 @@ var themePreval = {
           "fg": "#d47616",
           "emphasis": "#b76100",
           "muted": "rgba(212,118,22,0.4)",
-          "subtle": "rgba(212,118,22,0.1)"
+          "subtle": "rgba(212,118,22,0.15)"
         },
         "danger": {
           "fg": "#d47616",
           "emphasis": "#b76100",
           "muted": "rgba(212,118,22,0.4)",
-          "subtle": "rgba(212,118,22,0.1)"
+          "subtle": "rgba(212,118,22,0.15)"
         },
         "open": {
           "fg": "#ec8e2c",
@@ -4030,13 +3991,13 @@ var themePreval = {
           "fg": "#a371f7",
           "emphasis": "#8957e5",
           "muted": "rgba(163,113,247,0.4)",
-          "subtle": "rgba(163,113,247,0.1)"
+          "subtle": "rgba(163,113,247,0.15)"
         },
         "sponsors": {
           "fg": "#db61a2",
           "emphasis": "#bf4b8a",
           "muted": "rgba(219,97,162,0.4)",
-          "subtle": "rgba(219,97,162,0.1)"
+          "subtle": "rgba(219,97,162,0.15)"
         },
         "primer": {
           "fg": {
@@ -4067,7 +4028,7 @@ var themePreval = {
           }
         },
         "avatar": {
-          "childShadow": "0 0 0 2px #0d1117"
+          "childShadow": "-2px -2px 0 #0d1117"
         },
         "overlay": {
           "shadow": "0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85)"
@@ -4075,20 +4036,26 @@ var themePreval = {
         "btn": {
           "shadow": "0 0 transparent",
           "insetShadow": "0 0 transparent",
+          "focusShadow": "0 0 0 3px rgba(139,148,158,0.3)",
+          "shadowActive": "inset 0 0.15em 0.3em rgba(1,4,9,0.15)",
+          "shadowInputFocus": "0 0 0 0.2em rgba(31,111,235,0.3)",
           "primary": {
             "shadow": "0 0 transparent",
             "insetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent"
+            "selectedShadow": "0 0 transparent",
+            "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)"
           },
           "outline": {
             "hoverShadow": "0 1px 0 rgba(1,4,9,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "0 0 transparent"
+            "selectedShadow": "0 0 transparent",
+            "focusShadow": "0 0 0 3px rgba(17,88,199,0.4)"
           },
           "danger": {
             "hoverShadow": "0 0 transparent",
             "hoverInsetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent"
+            "selectedShadow": "0 0 transparent",
+            "focusShadow": "0 0 0 3px rgba(212,118,22,0.4)"
           }
         },
         "shadow": {
@@ -4100,7 +4067,8 @@ var themePreval = {
         "primer": {
           "shadow": {
             "highlight": "0 0 transparent",
-            "inset": "0 0 transparent"
+            "inset": "0 0 transparent",
+            "focus": "0 0 0 3px #0c2d6b"
           }
         }
       }
@@ -4125,7 +4093,7 @@ var themePreval = {
             "numText": "#c9d1d9",
             "fg": "#c9d1d9",
             "numBg": "rgba(248,81,73,0.3)",
-            "lineBg": "rgba(248,81,73,0.1)",
+            "lineBg": "rgba(248,81,73,0.15)",
             "wordBg": "rgba(248,81,73,0.4)"
           },
           "hunk": {
@@ -4233,7 +4201,7 @@ var themePreval = {
           "lineNumText": "#6e7681",
           "lineTimestampText": "#6e7681",
           "lineHoverBg": "rgba(110,118,129,0.1)",
-          "lineSelectedBg": "rgba(56,139,253,0.1)",
+          "lineSelectedBg": "rgba(56,139,253,0.15)",
           "lineSelectedNumText": "#58a6ff",
           "lineDtFmText": "#ffffff",
           "lineDtFmBg": "#9e6a03",
@@ -4248,7 +4216,7 @@ var themePreval = {
           "loglineDebugText": "#a371f7",
           "loglineErrorText": "#8b949e",
           "loglineErrorNumText": "#6e7681",
-          "loglineErrorBg": "rgba(248,81,73,0.1)",
+          "loglineErrorBg": "rgba(248,81,73,0.15)",
           "loglineWarningText": "#8b949e",
           "loglineWarningNumText": "#d29922",
           "loglineWarningBg": "rgba(187,128,9,0.15)",
@@ -4285,11 +4253,6 @@ var themePreval = {
             "bg": "#f6f8fa"
           }
         },
-        "control": {
-          "borderColor": {
-            "emphasis": "#606771"
-          }
-        },
         "avatar": {
           "bg": "rgba(255,255,255,0.1)",
           "border": "rgba(240,246,252,0.1)",
@@ -4357,6 +4320,8 @@ var themePreval = {
           "activeBg": "hsla(212,12%,18%,1)",
           "activeBorder": "#6e7681",
           "selectedBg": "#161b22",
+          "focusBg": "#21262d",
+          "focusBorder": "#8b949e",
           "counterBg": "#30363d",
           "primary": {
             "text": "#ffffff",
@@ -4368,6 +4333,8 @@ var themePreval = {
             "disabledText": "rgba(255,255,255,0.5)",
             "disabledBg": "rgba(31,111,235,0.6)",
             "disabledBorder": "rgba(240,246,252,0.1)",
+            "focusBg": "#1f6feb",
+            "focusBorder": "rgba(240,246,252,0.1)",
             "icon": "#ffffff",
             "counterBg": "rgba(255,255,255,0.2)"
           },
@@ -4383,6 +4350,7 @@ var themePreval = {
             "disabledText": "rgba(88,166,255,0.5)",
             "disabledBg": "#0d1117",
             "disabledCounterBg": "rgba(31,111,235,0.05)",
+            "focusBorder": "rgba(240,246,252,0.1)",
             "counterBg": "rgba(31,111,235,0.1)"
           },
           "danger": {
@@ -4398,6 +4366,7 @@ var themePreval = {
             "disabledText": "rgba(248,81,73,0.5)",
             "disabledBg": "#0d1117",
             "disabledCounterBg": "rgba(218,54,51,0.05)",
+            "focusBorder": "#f85149",
             "counterBg": "rgba(218,54,51,0.1)",
             "icon": "#f85149"
           }
@@ -4422,36 +4391,24 @@ var themePreval = {
           }
         },
         "switchTrack": {
-          "bg": "rgba(110,118,129,0.1)",
-          "hoverBg": "hsla(215,8%,72%,0.1)",
-          "activeBg": "rgba(110,118,129,0.4)",
-          "disabledBg": "#21262d",
-          "fg": "#8b949e",
-          "disabledFg": "#010409",
-          "border": "rgba(0,0,0,0)",
+          "bg": "#010409",
+          "border": "#6e7681",
           "checked": {
             "bg": "rgba(31,111,235,0.35)",
             "hoverBg": "rgba(31,111,235,0.5)",
             "activeBg": "rgba(31,111,235,0.65)",
-            "fg": "#ffffff",
-            "disabledFg": "#010409",
-            "border": "rgba(0,0,0,0)"
+            "border": "#58a6ff"
           }
         },
         "switchKnob": {
-          "bg": "#0d1117",
-          "border": "#606771",
-          "disabledBg": "#161b22",
           "checked": {
-            "bg": "#0d1117",
-            "disabledBg": "#161b22",
-            "border": "rgba(31,111,235,0.35)"
+            "bg": "#1f6feb",
+            "disabledBg": "#484f58"
           }
         },
         "segmentedControl": {
-          "bg": "rgba(110,118,129,0.1)",
+          "bg": "#161b22",
           "button": {
-            "bg": "#0d1117",
             "hover": {
               "bg": "#30363d"
             },
@@ -4498,7 +4455,7 @@ var themePreval = {
           "fg": "#58a6ff",
           "emphasis": "#1f6feb",
           "muted": "rgba(56,139,253,0.4)",
-          "subtle": "rgba(56,139,253,0.1)"
+          "subtle": "rgba(56,139,253,0.15)"
         },
         "success": {
           "fg": "#58a6ff",
@@ -4516,13 +4473,13 @@ var themePreval = {
           "fg": "#f85149",
           "emphasis": "#da3633",
           "muted": "rgba(248,81,73,0.4)",
-          "subtle": "rgba(248,81,73,0.1)"
+          "subtle": "rgba(248,81,73,0.15)"
         },
         "danger": {
           "fg": "#f85149",
           "emphasis": "#da3633",
           "muted": "rgba(248,81,73,0.4)",
-          "subtle": "rgba(248,81,73,0.1)"
+          "subtle": "rgba(248,81,73,0.15)"
         },
         "open": {
           "fg": "#ff7b72",
@@ -4540,13 +4497,13 @@ var themePreval = {
           "fg": "#a371f7",
           "emphasis": "#8957e5",
           "muted": "rgba(163,113,247,0.4)",
-          "subtle": "rgba(163,113,247,0.1)"
+          "subtle": "rgba(163,113,247,0.15)"
         },
         "sponsors": {
           "fg": "#db61a2",
           "emphasis": "#bf4b8a",
           "muted": "rgba(219,97,162,0.4)",
-          "subtle": "rgba(219,97,162,0.1)"
+          "subtle": "rgba(219,97,162,0.15)"
         },
         "primer": {
           "fg": {
@@ -4577,7 +4534,7 @@ var themePreval = {
           }
         },
         "avatar": {
-          "childShadow": "0 0 0 2px #0d1117"
+          "childShadow": "-2px -2px 0 #0d1117"
         },
         "overlay": {
           "shadow": "0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85)"
@@ -4585,20 +4542,26 @@ var themePreval = {
         "btn": {
           "shadow": "0 0 transparent",
           "insetShadow": "0 0 transparent",
+          "focusShadow": "0 0 0 3px rgba(139,148,158,0.3)",
+          "shadowActive": "inset 0 0.15em 0.3em rgba(1,4,9,0.15)",
+          "shadowInputFocus": "0 0 0 0.2em rgba(31,111,235,0.3)",
           "primary": {
             "shadow": "0 0 transparent",
             "insetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent"
+            "selectedShadow": "0 0 transparent",
+            "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)"
           },
           "outline": {
             "hoverShadow": "0 1px 0 rgba(1,4,9,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "0 0 transparent"
+            "selectedShadow": "0 0 transparent",
+            "focusShadow": "0 0 0 3px rgba(17,88,199,0.4)"
           },
           "danger": {
             "hoverShadow": "0 0 transparent",
             "hoverInsetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent"
+            "selectedShadow": "0 0 transparent",
+            "focusShadow": "0 0 0 3px rgba(248,81,73,0.4)"
           }
         },
         "shadow": {
@@ -4610,7 +4573,8 @@ var themePreval = {
         "primer": {
           "shadow": {
             "highlight": "0 0 transparent",
-            "inset": "0 0 transparent"
+            "inset": "0 0 transparent",
+            "focus": "0 0 0 3px #0c2d6b"
           }
         }
       }
diff --git a/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap
index e261d464937..aeba8dd6d70 100644
--- a/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap
@@ -144,7 +144,7 @@ exports[`ActionList.Item renders consistently 1`] = `
   display: -ms-flexbox;
   display: flex;
   border-radius: 6px;
-  color: #1F2328;
+  color: #24292f;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
   -webkit-text-decoration: none;
diff --git a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
index 2b488c64daf..a293df82422 100644
--- a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
@@ -25,8 +25,8 @@ exports[`ActionMenu renders consistently 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -48,7 +48,7 @@ exports[`ActionMenu renders consistently 1`] = `
 
 .c0:hover {
   background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c0:focus {
@@ -62,7 +62,7 @@ exports[`ActionMenu renders consistently 1`] = `
 .c0:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 <button
diff --git a/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
index 9c106f86e5a..2dea0b8818c 100644
--- a/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
@@ -25,8 +25,8 @@ exports[`Button renders consistently 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -48,7 +48,7 @@ exports[`Button renders consistently 1`] = `
 
 .c0:hover {
   background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c0:focus {
@@ -62,7 +62,7 @@ exports[`Button renders consistently 1`] = `
 .c0:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 <button
@@ -95,8 +95,8 @@ exports[`Button respects the "disabled" prop 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -118,7 +118,7 @@ exports[`Button respects the "disabled" prop 1`] = `
 
 .c0:hover {
   background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c0:focus {
@@ -132,7 +132,7 @@ exports[`Button respects the "disabled" prop 1`] = `
 .c0:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 <button
@@ -165,9 +165,9 @@ exports[`ButtonDanger renders consistently 1`] = `
   text-align: center;
   font-size: 14px;
   color: #cf222e;
-  border: 1px solid rgba(31,35,40,0.15);
+  border: 1px solid rgba(27,31,36,0.15);
   background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04);
 }
 
 .c0:hover {
@@ -190,15 +190,15 @@ exports[`ButtonDanger renders consistently 1`] = `
 .c0:hover {
   color: #ffffff;
   background-color: #a40e26;
-  border-color: rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
 }
 
 .c0:active {
   color: #ffffff;
   background-color: hsla(356,72%,44%,1);
   box-shadow: inset 0 1px 0 rgba(76,0,20,0.2);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c0:disabled {
@@ -235,9 +235,9 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
   text-align: center;
   font-size: 14px;
   color: #cf222e;
-  border: 1px solid rgba(31,35,40,0.15);
+  border: 1px solid rgba(27,31,36,0.15);
   background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04);
 }
 
 .c0:hover {
@@ -260,15 +260,15 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
 .c0:hover {
   color: #ffffff;
   background-color: #a40e26;
-  border-color: rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
 }
 
 .c0:active {
   color: #ffffff;
   background-color: hsla(356,72%,44%,1);
   box-shadow: inset 0 1px 0 rgba(76,0,20,0.2);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c0:disabled {
@@ -343,9 +343,9 @@ exports[`ButtonInvisible renders consistently 1`] = `
   text-align: center;
   font-size: 14px;
   color: #0969da;
-  border: 1px solid rgba(31,35,40,0.15);
+  border: 1px solid rgba(27,31,36,0.15);
   background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04);
 }
 
 .c0:hover {
@@ -368,21 +368,21 @@ exports[`ButtonInvisible renders consistently 1`] = `
 .c0:hover {
   color: #ffffff;
   background-color: #0969da;
-  border-color: rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
 }
 
 .c0:active {
   color: #ffffff;
   background-color: hsla(212,92%,42%,1);
   box-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c0:disabled {
   color: rgba(9,105,218,0.5);
   background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 <button
@@ -483,9 +483,9 @@ exports[`ButtonOutline renders consistently 1`] = `
   text-align: center;
   font-size: 14px;
   color: #0969da;
-  border: 1px solid rgba(31,35,40,0.15);
+  border: 1px solid rgba(27,31,36,0.15);
   background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04);
 }
 
 .c0:hover {
@@ -508,21 +508,21 @@ exports[`ButtonOutline renders consistently 1`] = `
 .c0:hover {
   color: #ffffff;
   background-color: #0969da;
-  border-color: rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
 }
 
 .c0:active {
   color: #ffffff;
   background-color: hsla(212,92%,42%,1);
   box-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c0:disabled {
   color: rgba(9,105,218,0.5);
   background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 <button
@@ -554,9 +554,9 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
   text-align: center;
   font-size: 14px;
   color: #0969da;
-  border: 1px solid rgba(31,35,40,0.15);
+  border: 1px solid rgba(27,31,36,0.15);
   background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04);
 }
 
 .c0:hover {
@@ -579,21 +579,21 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
 .c0:hover {
   color: #ffffff;
   background-color: #0969da;
-  border-color: rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
 }
 
 .c0:active {
   color: #ffffff;
   background-color: hsla(212,92%,42%,1);
   box-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c0:disabled {
   color: rgba(9,105,218,0.5);
   background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 <button
@@ -626,9 +626,9 @@ exports[`ButtonPrimary renders consistently 1`] = `
   text-align: center;
   font-size: 14px;
   color: #ffffff;
-  border: 1px solid rgba(31,35,40,0.15);
-  background-color: #1f883d;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
+  border: 1px solid rgba(27,31,36,0.15);
+  background-color: #2da44e;
+  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
 }
 
 .c0:hover {
@@ -649,19 +649,19 @@ exports[`ButtonPrimary renders consistently 1`] = `
 }
 
 .c0:hover {
-  background-color: #1a7f37;
-  border-color: rgba(31,35,40,0.15);
+  background-color: #2c974b;
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c0:active {
-  background-color: hsla(137,66%,28%,1);
+  background-color: hsla(137,55%,36%,1);
   box-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
 }
 
 .c0:disabled {
   color: rgba(255,255,255,0.8);
   background-color: #94d3a2;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 <button
@@ -693,9 +693,9 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
   text-align: center;
   font-size: 14px;
   color: #ffffff;
-  border: 1px solid rgba(31,35,40,0.15);
-  background-color: #1f883d;
-  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
+  border: 1px solid rgba(27,31,36,0.15);
+  background-color: #2da44e;
+  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
 }
 
 .c0:hover {
@@ -716,19 +716,19 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
 }
 
 .c0:hover {
-  background-color: #1a7f37;
-  border-color: rgba(31,35,40,0.15);
+  background-color: #2c974b;
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c0:active {
-  background-color: hsla(137,66%,28%,1);
+  background-color: hsla(137,55%,36%,1);
   box-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
 }
 
 .c0:disabled {
   color: rgba(255,255,255,0.8);
   background-color: #94d3a2;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 <button
@@ -742,7 +742,7 @@ exports[`ButtonTableList renders consistently 1`] = `
   display: inline-block;
   padding: 0;
   font-size: 14px;
-  color: #656d76;
+  color: #57606a;
   -webkit-text-decoration: none;
   text-decoration: none;
   white-space: nowrap;
diff --git a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
index 2c066511224..565a63a3c19 100644
--- a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
@@ -35,7 +35,7 @@ exports[`ChoiceFieldset renders a disabled list 1`] = `
 }
 
 .c2 {
-  color: #656d76;
+  color: #57606a;
   font-size: 16px;
   padding: 0;
 }
@@ -44,7 +44,7 @@ exports[`ChoiceFieldset renders a disabled list 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #656d76;
+  color: #57606a;
   cursor: not-allowed;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -83,7 +83,7 @@ exports[`ChoiceFieldset renders a disabled list 1`] = `
 
 .c6:checked:disabled {
   cursor: not-allowed;
-  border-color: #656d76;
+  border-color: #57606a;
 }
 
 .c6:focus:not(:disabled) {
@@ -261,7 +261,7 @@ exports[`ChoiceFieldset renders a fieldset with a description 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #1F2328;
+  color: #24292f;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -270,7 +270,7 @@ exports[`ChoiceFieldset renders a fieldset with a description 1`] = `
 
 .c3 {
   font-size: 14px;
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c7 {
@@ -305,7 +305,7 @@ exports[`ChoiceFieldset renders a fieldset with a description 1`] = `
 
 .c7:checked:disabled {
   cursor: not-allowed;
-  border-color: #656d76;
+  border-color: #57606a;
 }
 
 .c7:focus:not(:disabled) {
@@ -485,7 +485,7 @@ exports[`ChoiceFieldset renders a list of items with leading visuals and caption
 
 .c7 {
   margin-left: 8px;
-  color: #1F2328;
+  color: #24292f;
 }
 
 .c7 > * {
@@ -503,7 +503,7 @@ exports[`ChoiceFieldset renders a list of items with leading visuals and caption
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #1F2328;
+  color: #24292f;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -512,7 +512,7 @@ exports[`ChoiceFieldset renders a list of items with leading visuals and caption
 
 .c10 {
   font-size: 12px;
-  color: #656d76;
+  color: #57606a;
   display: block;
 }
 
@@ -548,7 +548,7 @@ exports[`ChoiceFieldset renders a list of items with leading visuals and caption
 
 .c6:checked:disabled {
   cursor: not-allowed;
-  border-color: #656d76;
+  border-color: #57606a;
 }
 
 .c6:focus:not(:disabled) {
@@ -794,7 +794,7 @@ exports[`ChoiceFieldset renders a list with selected items 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #1F2328;
+  color: #24292f;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -865,8 +865,8 @@ exports[`ChoiceFieldset renders a list with selected items 1`] = `
 
 .c6:checked:disabled {
   cursor: not-allowed;
-  background-color: #656d76;
-  border-color: #656d76;
+  background-color: #57606a;
+  border-color: #57606a;
   opacity: 1;
 }
 
@@ -1110,7 +1110,7 @@ exports[`ChoiceFieldset renders a required fieldset 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #1F2328;
+  color: #24292f;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -1149,7 +1149,7 @@ exports[`ChoiceFieldset renders a required fieldset 1`] = `
 
 .c7:checked:disabled {
   cursor: not-allowed;
-  border-color: #656d76;
+  border-color: #57606a;
 }
 
 .c7:focus:not(:disabled) {
@@ -1338,7 +1338,7 @@ exports[`ChoiceFieldset renders default 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #1F2328;
+  color: #24292f;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -1377,7 +1377,7 @@ exports[`ChoiceFieldset renders default 1`] = `
 
 .c6:checked:disabled {
   cursor: not-allowed;
-  border-color: #656d76;
+  border-color: #57606a;
 }
 
 .c6:focus:not(:disabled) {
@@ -1553,7 +1553,7 @@ exports[`ChoiceFieldset renders with a custom name and id passed 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #1F2328;
+  color: #24292f;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -1592,7 +1592,7 @@ exports[`ChoiceFieldset renders with a custom name and id passed 1`] = `
 
 .c6:checked:disabled {
   cursor: not-allowed;
-  border-color: #656d76;
+  border-color: #57606a;
 }
 
 .c6:focus:not(:disabled) {
@@ -1759,7 +1759,7 @@ exports[`ChoiceFieldset renders with a hidden legend 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #1F2328;
+  color: #24292f;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -1811,7 +1811,7 @@ exports[`ChoiceFieldset renders with a hidden legend 1`] = `
 
 .c5:checked:disabled {
   cursor: not-allowed;
-  border-color: #656d76;
+  border-color: #57606a;
 }
 
 .c5:focus:not(:disabled) {
@@ -2203,6 +2203,7 @@ exports[`ChoiceFieldset renders with a success validation message 1`] = `
           class="c11"
         >
           <span
+            aria-live="polite"
             class="c12"
           >
             <span
@@ -2497,6 +2498,7 @@ exports[`ChoiceFieldset renders with an error validation message 1`] = `
           class="c11"
         >
           <span
+            aria-live="polite"
             class="c12"
           >
             <span
diff --git a/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap
index eacd73368f9..fa9552aff6c 100644
--- a/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap
@@ -25,8 +25,8 @@ exports[`DropdownMenu renders consistently 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(31,35,40,0.15);
-  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -48,7 +48,7 @@ exports[`DropdownMenu renders consistently 1`] = `
 
 .c0:hover {
   background-color: #f3f4f6;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c0:focus {
@@ -62,7 +62,7 @@ exports[`DropdownMenu renders consistently 1`] = `
 .c0:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(31,35,40,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c1 {
diff --git a/src/__tests__/deprecated/__snapshots__/Label.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/Label.test.tsx.snap
index 61f7235fb4f..95e650b2bb6 100644
--- a/src/__tests__/deprecated/__snapshots__/Label.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/Label.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`Label respects the "outline" prop 1`] = `
   padding: 0 8px;
   margin-top: -1px;
   margin-bottom: -1px;
-  color: #656d76;
+  color: #57606a;
   border: 1px solid #d0d7de;
   box-shadow: none;
   background-color: transparent;

From 048bad2e450840192d87468e0ce9dda742ecdd66 Mon Sep 17 00:00:00 2001
From: "Amanda G. Brown" <green6erry@gmail.com>
Date: Tue, 25 Apr 2023 13:00:27 -0600
Subject: [PATCH 7/7] update again

---
 .../BreadcrumbsItem.test.tsx.snap             |   6 +-
 .../__snapshots__/CounterLabel.test.tsx.snap  |   2 +-
 .../__snapshots__/Flash.test.tsx.snap         |   4 +-
 .../__snapshots__/Link.test.tsx.snap          |   4 +-
 .../__snapshots__/NavList.test.tsx.snap       |  54 +-
 .../SegmentedControl.test.tsx.snap            |   6 +-
 .../__snapshots__/SelectPanel.test.tsx.snap   |  10 +-
 .../__snapshots__/StateLabel.test.tsx.snap    |  10 +-
 .../__snapshots__/TabNav.test.tsx.snap        |   6 +-
 .../__snapshots__/Timeline.test.tsx.snap      |   4 +-
 .../__snapshots__/Token.test.tsx.snap         |  86 +-
 .../__snapshots__/UnderlineNav.test.tsx.snap  |   4 +-
 .../__snapshots__/Pagination.test.tsx.snap    |   2 +-
 .../__snapshots__/ActionMenu.test.tsx.snap    |  12 +-
 .../AnchoredOverlay.test.tsx.snap             |  22 +-
 .../__snapshots__/Autocomplete.test.tsx.snap  |  54 +-
 .../__snapshots__/Avatar.test.tsx.snap        |   2 +-
 .../__snapshots__/Button.test.tsx.snap        |  10 +-
 .../__snapshots__/Checkbox.test.tsx.snap      |   4 +-
 .../__snapshots__/CheckboxGroup.test.tsx.snap |   6 +-
 .../CheckboxOrRadioGroup.test.tsx.snap        |   4 +-
 .../ConfirmationDialog.test.tsx.snap          |  10 +-
 .../__snapshots__/Dialog.test.tsx.snap        |   8 +-
 .../__snapshots__/Dropdown.test.tsx.snap      |  14 +-
 .../FilterListItem.test.tsx.snap              |   2 +-
 .../__snapshots__/ProgressBar.test.tsx.snap   |   8 +-
 .../__snapshots__/Radio.test.tsx.snap         |   2 +-
 .../__snapshots__/RadioGroup.test.tsx.snap    |   4 +-
 .../__snapshots__/SelectMenu.test.tsx.snap    |  26 +-
 .../__snapshots__/SideNav.test.tsx.snap       |   8 +-
 .../__snapshots__/SubNavLink.test.tsx.snap    |  12 +-
 .../__snapshots__/TextInput.test.tsx.snap     | 188 ++---
 .../TextInputWithTokens.test.tsx.snap         | 296 +++----
 .../__snapshots__/Textarea.test.tsx.snap      |   2 +-
 .../__snapshots__/ThemeProvider.test.tsx.snap |   2 +-
 .../__snapshots__/ToggleSwitch.test.tsx.snap  |   4 +-
 .../UnderlineNavLink.test.tsx.snap            |  30 +-
 .../__snapshots__/themePreval.test.ts.snap    | 760 +++++++++---------
 .../__snapshots__/ActionList.test.tsx.snap    |   2 +-
 .../__snapshots__/ActionMenu.test.tsx.snap    |   8 +-
 .../__snapshots__/Button.test.tsx.snap        | 102 +--
 .../ChoiceFieldset.test.tsx.snap              |  42 +-
 .../__snapshots__/DropdownMenu.test.tsx.snap  |   8 +-
 .../__snapshots__/Label.test.tsx.snap         |   2 +-
 44 files changed, 944 insertions(+), 908 deletions(-)

diff --git a/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap b/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
index c66412b13b3..39ec4605f7d 100644
--- a/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
+++ b/src/Breadcrumbs/__tests__/__snapshots__/BreadcrumbsItem.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`Breadcrumbs.Item adds activeClassName={SELECTED_CLASS} when it gets a "
 }
 
 .c0.selected {
-  color: #24292f;
+  color: #1F2328;
   pointer-events: none;
 }
 
@@ -42,7 +42,7 @@ exports[`Breadcrumbs.Item renders consistently 1`] = `
 }
 
 .c0.selected {
-  color: #24292f;
+  color: #1F2328;
   pointer-events: none;
 }
 
@@ -67,7 +67,7 @@ exports[`Breadcrumbs.Item respects the "selected" prop 1`] = `
 }
 
 .c0.selected {
-  color: #24292f;
+  color: #1F2328;
   pointer-events: none;
 }
 
diff --git a/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap b/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap
index 4fed3becb94..e58baa1e1cc 100644
--- a/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap
+++ b/src/CounterLabel/__snapshots__/CounterLabel.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`CounterLabel renders consistently 1`] = `
   line-height: 1;
   border-radius: 20px;
   background-color: rgba(175,184,193,0.2);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c0:empty {
diff --git a/src/Flash/__tests__/__snapshots__/Flash.test.tsx.snap b/src/Flash/__tests__/__snapshots__/Flash.test.tsx.snap
index f9881867f3a..e9d29a2ea00 100644
--- a/src/Flash/__tests__/__snapshots__/Flash.test.tsx.snap
+++ b/src/Flash/__tests__/__snapshots__/Flash.test.tsx.snap
@@ -3,13 +3,13 @@
 exports[`Flash renders consistently 1`] = `
 .c0 {
   position: relative;
-  color: #24292f;
+  color: #1F2328;
   padding: 16px;
   border-style: solid;
   border-width: 1px;
   border-radius: 6px;
   margin-top: 0;
-  color: #24292f;
+  color: #1F2328;
   background-color: #ddf4ff;
   border-color: rgba(84,174,255,0.4);
 }
diff --git a/src/Link/__tests__/__snapshots__/Link.test.tsx.snap b/src/Link/__tests__/__snapshots__/Link.test.tsx.snap
index 1f8d25ac1e7..eaad8694936 100644
--- a/src/Link/__tests__/__snapshots__/Link.test.tsx.snap
+++ b/src/Link/__tests__/__snapshots__/Link.test.tsx.snap
@@ -140,7 +140,7 @@ exports[`Link respects hoverColor prop 1`] = `
 
 exports[`Link respects the  "sx" prop when "muted" prop is also passed 1`] = `
 .c0 {
-  color: #57606a;
+  color: #656d76;
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #ffffff;
@@ -177,7 +177,7 @@ exports[`Link respects the  "sx" prop when "muted" prop is also passed 1`] = `
 
 exports[`Link respects the "muted" prop 1`] = `
 .c0 {
-  color: #57606a;
+  color: #656d76;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap
index 53d24c7e50a..0bf63a4a99d 100644
--- a/src/NavList/__snapshots__/NavList.test.tsx.snap
+++ b/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`NavList renders a simple list 1`] = `
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #24292f;
+  color: #1F2328;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -136,7 +136,7 @@ exports[`NavList renders a simple list 1`] = `
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #24292f;
+  color: #1F2328;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -240,7 +240,7 @@ exports[`NavList renders a simple list 1`] = `
 @media (hover:hover) and (pointer:fine) {
   .c3:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
-    color: #24292f;
+    color: #1F2328;
   }
 
   .c3:focus-visible,
@@ -252,7 +252,7 @@ exports[`NavList renders a simple list 1`] = `
 
   .c3:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
-    color: #24292f;
+    color: #1F2328;
   }
 }
 
@@ -265,7 +265,7 @@ exports[`NavList renders a simple list 1`] = `
 @media (hover:hover) and (pointer:fine) {
   .c7:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
-    color: #24292f;
+    color: #1F2328;
   }
 
   .c7:focus-visible,
@@ -277,7 +277,7 @@ exports[`NavList renders a simple list 1`] = `
 
   .c7:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
-    color: #24292f;
+    color: #1F2328;
   }
 }
 
@@ -418,7 +418,7 @@ exports[`NavList renders with groups 1`] = `
   padding-right: 16px;
   font-size: 12px;
   font-weight: 600;
-  color: #57606a;
+  color: #656d76;
   list-style: none;
 }
 
@@ -456,7 +456,7 @@ exports[`NavList renders with groups 1`] = `
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #24292f;
+  color: #1F2328;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -540,7 +540,7 @@ exports[`NavList renders with groups 1`] = `
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #24292f;
+  color: #1F2328;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -644,7 +644,7 @@ exports[`NavList renders with groups 1`] = `
 @media (hover:hover) and (pointer:fine) {
   .c7:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
-    color: #24292f;
+    color: #1F2328;
   }
 
   .c7:focus-visible,
@@ -656,7 +656,7 @@ exports[`NavList renders with groups 1`] = `
 
   .c7:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
-    color: #24292f;
+    color: #1F2328;
   }
 }
 
@@ -669,7 +669,7 @@ exports[`NavList renders with groups 1`] = `
 @media (hover:hover) and (pointer:fine) {
   .c11:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
-    color: #24292f;
+    color: #1F2328;
   }
 
   .c11:focus-visible,
@@ -681,7 +681,7 @@ exports[`NavList renders with groups 1`] = `
 
   .c11:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
-    color: #24292f;
+    color: #1F2328;
   }
 }
 
@@ -855,7 +855,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
-  color: #57606a;
+  color: #656d76;
   margin-left: 8px;
   font-weight: initial;
 }
@@ -889,7 +889,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #24292f;
+  color: #1F2328;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1015,7 +1015,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #24292f;
+  color: #1F2328;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1128,7 +1128,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 @media (hover:hover) and (pointer:fine) {
   .c11:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
-    color: #24292f;
+    color: #1F2328;
   }
 
   .c11:focus-visible,
@@ -1140,7 +1140,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 
   .c11:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
-    color: #24292f;
+    color: #1F2328;
   }
 }
 
@@ -1153,7 +1153,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 @media (hover:hover) and (pointer:fine) {
   .c4:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
-    color: #24292f;
+    color: #1F2328;
   }
 
   .c4:focus-visible,
@@ -1165,7 +1165,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 
   .c4:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
-    color: #24292f;
+    color: #1F2328;
   }
 }
 
@@ -1324,7 +1324,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
-  color: #57606a;
+  color: #656d76;
   margin-left: 8px;
   font-weight: initial;
 }
@@ -1358,7 +1358,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #24292f;
+  color: #1F2328;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1490,7 +1490,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   border-radius: 6px;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
-  color: #24292f;
+  color: #1F2328;
   cursor: pointer;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -1609,7 +1609,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 @media (hover:hover) and (pointer:fine) {
   .c11:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
-    color: #24292f;
+    color: #1F2328;
   }
 
   .c11:focus-visible,
@@ -1621,7 +1621,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 
   .c11:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
-    color: #24292f;
+    color: #1F2328;
   }
 }
 
@@ -1634,7 +1634,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 @media (hover:hover) and (pointer:fine) {
   .c4:hover:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.32);
-    color: #24292f;
+    color: #1F2328;
   }
 
   .c4:focus-visible,
@@ -1646,7 +1646,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 
   .c4:active:not([aria-disabled]) {
     background-color: rgba(208,215,222,0.48);
-    color: #24292f;
+    color: #1F2328;
   }
 }
 
diff --git a/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap b/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap
index 6556fd291a7..459dc27156d 100644
--- a/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap
+++ b/src/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap
@@ -119,7 +119,7 @@ exports[`SegmentedControl renders consistently 1`] = `
 }
 
 .c2 svg {
-  fill: #57606a;
+  fill: #656d76;
 }
 
 .c2:focus:focus-visible:not(:last-child):after {
@@ -182,7 +182,7 @@ exports[`SegmentedControl renders consistently 1`] = `
 }
 
 .c4 svg {
-  fill: #57606a;
+  fill: #656d76;
 }
 
 .c4:hover .segmentedControl-content {
@@ -253,7 +253,7 @@ exports[`SegmentedControl renders consistently 1`] = `
 }
 
 .c5 svg {
-  fill: #57606a;
+  fill: #656d76;
 }
 
 .c5:hover .segmentedControl-content {
diff --git a/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
index eafafb07094..5548fe2693d 100644
--- a/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
+++ b/src/SelectPanel/__snapshots__/SelectPanel.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`SelectPanel renders consistently 1`] = `
 .c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c1 {
@@ -31,8 +31,8 @@ exports[`SelectPanel renders consistently 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(27,31,36,0.15);
-  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:hover {
@@ -54,7 +54,7 @@ exports[`SelectPanel renders consistently 1`] = `
 
 .c1:hover {
   background-color: #f3f4f6;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c1:focus {
@@ -68,7 +68,7 @@ exports[`SelectPanel renders consistently 1`] = `
 .c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c2 {
diff --git a/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap b/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
index 896c2c3e434..ba583e95a8c 100644
--- a/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
+++ b/src/StateLabel/__tests__/__snapshots__/StateLabel.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`StateLabel renders children 1`] = `
   color: #ffffff;
   text-align: center;
   border-radius: 100px;
-  background-color: #2da44e;
+  background-color: #1f883d;
   color: #ffffff;
   padding-left: 12px;
   padding-right: 12px;
@@ -79,7 +79,7 @@ exports[`StateLabel renders consistently 1`] = `
   color: #ffffff;
   text-align: center;
   border-radius: 100px;
-  background-color: #2da44e;
+  background-color: #1f883d;
   color: #ffffff;
   padding-left: 12px;
   padding-right: 12px;
@@ -139,7 +139,7 @@ exports[`StateLabel respects the status prop 1`] = `
   color: #ffffff;
   text-align: center;
   border-radius: 100px;
-  background-color: #2da44e;
+  background-color: #1f883d;
   color: #ffffff;
   padding-left: 12px;
   padding-right: 12px;
@@ -369,7 +369,7 @@ exports[`StateLabel respects the variant prop 1`] = `
   color: #ffffff;
   text-align: center;
   border-radius: 100px;
-  background-color: #2da44e;
+  background-color: #1f883d;
   color: #ffffff;
   padding-left: 8px;
   padding-right: 8px;
@@ -428,7 +428,7 @@ exports[`StateLabel respects the variant prop 2`] = `
   color: #ffffff;
   text-align: center;
   border-radius: 100px;
-  background-color: #2da44e;
+  background-color: #1f883d;
   color: #ffffff;
   padding-left: 12px;
   padding-right: 12px;
diff --git a/src/TabNav/__tests__/__snapshots__/TabNav.test.tsx.snap b/src/TabNav/__tests__/__snapshots__/TabNav.test.tsx.snap
index 117b0f21e9c..fe365f58ce8 100644
--- a/src/TabNav/__tests__/__snapshots__/TabNav.test.tsx.snap
+++ b/src/TabNav/__tests__/__snapshots__/TabNav.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`TabNav TabNav.Link renders consistently 1`] = `
   padding: 8px 12px;
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   -webkit-text-decoration: none;
   text-decoration: none;
   background-color: transparent;
@@ -31,13 +31,13 @@ exports[`TabNav TabNav.Link renders consistently 1`] = `
 
 .c0:hover,
 .c0:focus {
-  color: #24292f;
+  color: #1F2328;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 .c0.selected {
-  color: #24292f;
+  color: #1F2328;
   border-color: #d0d7de;
   border-top-right-radius: 6px;
   border-top-left-radius: 6px;
diff --git a/src/Timeline/__tests__/__snapshots__/Timeline.test.tsx.snap b/src/Timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
index 0d5bc6c3cb6..e7455fe8441 100644
--- a/src/Timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
+++ b/src/Timeline/__tests__/__snapshots__/Timeline.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`Timeline.Badge renders consistently 1`] = `
 .c1 {
   margin-right: 8px;
   margin-left: -15px;
-  color: #57606a;
+  color: #656d76;
   background-color: #eaeef2;
   display: -webkit-box;
   display: -webkit-flex;
@@ -148,7 +148,7 @@ exports[`Timeline.Item renders with condensed prop 1`] = `
   height: 16px;
   margin-top: 8px;
   margin-bottom: 8px;
-  color: #57606a;
+  color: #656d76;
   background-color: #ffffff;
   border: 0;
 }
diff --git a/src/Token/__tests__/__snapshots__/Token.test.tsx.snap b/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
index 410fcaeef94..0eb72bbc832 100644
--- a/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
+++ b/src/Token/__tests__/__snapshots__/Token.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
   width: 100%;
   height: 100%;
 }
@@ -56,10 +56,10 @@ exports[`Token components AvatarToken renders all sizes 1`] = `
   padding-left: 4px;
   padding-right: 4px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
   padding-left: 4px;
@@ -251,7 +251,7 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
   width: 100%;
   height: 100%;
 }
@@ -279,10 +279,10 @@ exports[`Token components AvatarToken renders all sizes 2`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
   padding-left: 4px;
@@ -474,7 +474,7 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
   width: 100%;
   height: 100%;
 }
@@ -502,10 +502,10 @@ exports[`Token components AvatarToken renders all sizes 3`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
   padding-left: 4px;
@@ -697,7 +697,7 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
   width: 100%;
   height: 100%;
 }
@@ -727,10 +727,10 @@ exports[`Token components AvatarToken renders all sizes 4`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
   padding-left: 4px;
@@ -922,7 +922,7 @@ exports[`Token components AvatarToken renders all sizes 5`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
   width: 100%;
   height: 100%;
 }
@@ -952,10 +952,10 @@ exports[`Token components AvatarToken renders all sizes 5`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
   padding-left: 4px;
@@ -1143,10 +1143,10 @@ exports[`Token components AvatarToken renders consistently 1`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
 }
 
@@ -1214,7 +1214,7 @@ exports[`Token components AvatarToken renders isSelected 1`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
   width: 100%;
   height: 100%;
 }
@@ -1242,10 +1242,10 @@ exports[`Token components AvatarToken renders isSelected 1`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: #24292f;
+  border-color: #1F2328;
   border-style: solid;
   border-width: 1px;
-  color: #24292f;
+  color: #1F2328;
   max-width: 100%;
   padding-left: 4px;
 }
@@ -1352,7 +1352,7 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
   width: 100%;
   height: 100%;
 }
@@ -1380,10 +1380,10 @@ exports[`Token components AvatarToken renders with a remove button 1`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
   padding-left: 4px;
@@ -2440,10 +2440,10 @@ exports[`Token components IssueLabelToken renders consistently 1`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
 }
 
@@ -3163,10 +3163,10 @@ exports[`Token components Token renders all sizes 1`] = `
   padding-left: 4px;
   padding-right: 4px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -3343,10 +3343,10 @@ exports[`Token components Token renders all sizes 2`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -3523,10 +3523,10 @@ exports[`Token components Token renders all sizes 3`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -3705,10 +3705,10 @@ exports[`Token components Token renders all sizes 4`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -3887,10 +3887,10 @@ exports[`Token components Token renders all sizes 5`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -4054,10 +4054,10 @@ exports[`Token components Token renders consistently 1`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
 }
 
@@ -4134,10 +4134,10 @@ exports[`Token components Token renders isSelected 1`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: #24292f;
+  border-color: #1F2328;
   border-style: solid;
   border-width: 1px;
-  color: #24292f;
+  color: #1F2328;
   max-width: 100%;
 }
 
@@ -4224,10 +4224,10 @@ exports[`Token components Token renders with a leadingVisual 1`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
 }
 
@@ -4330,10 +4330,10 @@ exports[`Token components Token renders with a remove button 1`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
diff --git a/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap b/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap
index ab8203e973f..31095a86b83 100644
--- a/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap
+++ b/src/UnderlineNav2/__snapshots__/UnderlineNav.test.tsx.snap
@@ -42,7 +42,7 @@ exports[`UnderlineNav renders consistently 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  color: #24292f;
+  color: #1F2328;
   text-align: center;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -127,7 +127,7 @@ exports[`UnderlineNav renders consistently 1`] = `
   line-height: 1;
   border-radius: 20px;
   background-color: rgba(175,184,193,0.2);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c7:empty {
diff --git a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
index 889609579e2..476f0bd791c 100644
--- a/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
+++ b/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`Pagination renders consistently 1`] = `
   padding: 0.5rem calc((2rem - 1.25rem) / 2);
   font-style: normal;
   line-height: 1;
-  color: #24292f;
+  color: #1F2328;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
index ae80a3d1458..203b3082ca3 100644
--- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ActionMenu renders consistently 1`] = `
 .c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c2 {
@@ -25,7 +25,7 @@ exports[`ActionMenu renders consistently 1`] = `
 .c1 {
   border-radius: 6px;
   border: 1px solid;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   font-family: inherit;
   font-weight: 500;
   font-size: 14px;
@@ -64,7 +64,7 @@ exports[`ActionMenu renders consistently 1`] = `
   transition-property: color,fill,background-color,border-color;
   color: #24292f;
   background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:focus:not(:disabled) {
@@ -210,17 +210,17 @@ exports[`ActionMenu renders consistently 1`] = `
 
 .c1:hover:not([disabled]) {
   background-color: #f3f4f6;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c1:active:not([disabled]) {
   background-color: hsla(220,14%,93%,1);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c1[aria-expanded=true] {
   background-color: hsla(220,14%,93%,1);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 @media (forced-colors:active) {
diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
index 5b02f210d7f..5a929d12ade 100644
--- a/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
+++ b/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 .c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c1 {
@@ -31,8 +31,8 @@ exports[`AnchoredOverlay renders consistently 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(27,31,36,0.15);
-  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:hover {
@@ -54,7 +54,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 
 .c1:hover {
   background-color: #f3f4f6;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c1:focus {
@@ -68,7 +68,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 .c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 <div
@@ -94,7 +94,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
 .c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c1 {
@@ -121,8 +121,8 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(27,31,36,0.15);
-  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:hover {
@@ -144,7 +144,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
 
 .c1:hover {
   background-color: #f3f4f6;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c1:focus {
@@ -158,12 +158,12 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
 .c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c2 {
   background-color: #ffffff;
-  box-shadow: 0 1px 3px rgba(27,31,36,0.12),0 8px 24px rgba(66,74,83,0.12);
+  box-shadow: 0 1px 3px rgba(31,35,40,0.12),0 8px 24px rgba(66,74,83,0.12);
   position: absolute;
   min-width: 192px;
   max-width: 640px;
diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
index f142220fb81..263505f77a8 100644
--- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -62,7 +62,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -71,7 +71,7 @@ exports[`snapshots renders a custom empty state message 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -164,7 +164,7 @@ exports[`snapshots renders a loading state 1`] = `
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -221,7 +221,7 @@ exports[`snapshots renders a loading state 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -230,7 +230,7 @@ exports[`snapshots renders a loading state 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -358,7 +358,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -415,7 +415,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -424,7 +424,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -538,7 +538,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
   display: -ms-flexbox;
   display: flex;
   border-radius: 6px;
-  color: #24292f;
+  color: #1F2328;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
   -webkit-text-decoration: none;
@@ -644,7 +644,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 }
 
 .c10 svg {
-  fill: #57606a;
+  fill: #656d76;
   font-size: 12px;
 }
 
@@ -1315,7 +1315,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -1372,7 +1372,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -1381,7 +1381,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1495,7 +1495,7 @@ exports[`snapshots renders a multiselect input 1`] = `
   display: -ms-flexbox;
   display: flex;
   border-radius: 6px;
-  color: #24292f;
+  color: #1F2328;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
   -webkit-text-decoration: none;
@@ -2182,7 +2182,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -2239,7 +2239,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -2248,7 +2248,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2362,7 +2362,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
   display: -ms-flexbox;
   display: flex;
   border-radius: 6px;
-  color: #24292f;
+  color: #1F2328;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
   -webkit-text-decoration: none;
@@ -3060,7 +3060,7 @@ exports[`snapshots renders a single select input 1`] = `
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -3117,7 +3117,7 @@ exports[`snapshots renders a single select input 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -3126,7 +3126,7 @@ exports[`snapshots renders a single select input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3240,7 +3240,7 @@ exports[`snapshots renders a single select input 1`] = `
   display: -ms-flexbox;
   display: flex;
   border-radius: 6px;
-  color: #24292f;
+  color: #1F2328;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
   -webkit-text-decoration: none;
@@ -3683,7 +3683,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
   display: -ms-flexbox;
   display: flex;
   border-radius: 6px;
-  color: #24292f;
+  color: #1F2328;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
   -webkit-text-decoration: none;
@@ -4068,7 +4068,7 @@ exports[`snapshots renders with an input value 1`] = `
   .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -4125,7 +4125,7 @@ exports[`snapshots renders with an input value 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -4134,7 +4134,7 @@ exports[`snapshots renders with an input value 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
diff --git a/src/__tests__/__snapshots__/Avatar.test.tsx.snap b/src/__tests__/__snapshots__/Avatar.test.tsx.snap
index 81c3acf395a..3a2e8e4b28d 100644
--- a/src/__tests__/__snapshots__/Avatar.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Avatar.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`Avatar renders consistently 1`] = `
   line-height: 1;
   vertical-align: middle;
   border-radius: 50%;
-  box-shadow: 0 0 0 1px rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 1px rgba(31,35,40,0.15);
 }
 
 <img
diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
index a49ae3e67a0..58a254a85f8 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`Button renders consistently 1`] = `
 .c0 {
   border-radius: 6px;
   border: 1px solid;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   font-family: inherit;
   font-weight: 500;
   font-size: 14px;
@@ -50,7 +50,7 @@ exports[`Button renders consistently 1`] = `
   transition-property: color,fill,background-color,border-color;
   color: #24292f;
   background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:focus:not(:disabled) {
@@ -196,17 +196,17 @@ exports[`Button renders consistently 1`] = `
 
 .c0:hover:not([disabled]) {
   background-color: #f3f4f6;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c0:active:not([disabled]) {
   background-color: hsla(220,14%,93%,1);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c0[aria-expanded=true] {
   background-color: hsla(220,14%,93%,1);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 @media (forced-colors:active) {
diff --git a/src/__tests__/__snapshots__/Checkbox.test.tsx.snap b/src/__tests__/__snapshots__/Checkbox.test.tsx.snap
index f8cd31bf3b0..39de01ea347 100644
--- a/src/__tests__/__snapshots__/Checkbox.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Checkbox.test.tsx.snap
@@ -65,8 +65,8 @@ exports[`Checkbox renders consistently 1`] = `
 
 .c0:checked:disabled {
   cursor: not-allowed;
-  background-color: #57606a;
-  border-color: #57606a;
+  background-color: #656d76;
+  border-color: #656d76;
   opacity: 1;
 }
 
diff --git a/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap b/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
index bf7a63dba00..97844173021 100644
--- a/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`CheckboxGroup renders consistently 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #24292f;
+  color: #1F2328;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -132,8 +132,8 @@ exports[`CheckboxGroup renders consistently 1`] = `
 
 .c6:checked:disabled {
   cursor: not-allowed;
-  background-color: #57606a;
-  border-color: #57606a;
+  background-color: #656d76;
+  border-color: #656d76;
   opacity: 1;
 }
 
diff --git a/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap b/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
index a77edeed66b..e48aa53ef97 100644
--- a/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #24292f;
+  color: #1F2328;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -100,7 +100,7 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
 
 .c6:checked:disabled {
   cursor: not-allowed;
-  border-color: #57606a;
+  border-color: #656d76;
 }
 
 .c6:focus:not(:disabled) {
diff --git a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap b/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
index fb82aa2579b..29e001cf9b9 100644
--- a/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ConfirmationDialog.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ConfirmationDialog renders consistently 1`] = `
 .c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c1 {
@@ -31,8 +31,8 @@ exports[`ConfirmationDialog renders consistently 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(27,31,36,0.15);
-  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:hover {
@@ -54,7 +54,7 @@ exports[`ConfirmationDialog renders consistently 1`] = `
 
 .c1:hover {
   background-color: #f3f4f6;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c1:focus {
@@ -68,7 +68,7 @@ exports[`ConfirmationDialog renders consistently 1`] = `
 .c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 <div
diff --git a/src/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/__tests__/__snapshots__/Dialog.test.tsx.snap
index 24ed7dad7c9..62d088691e3 100644
--- a/src/__tests__/__snapshots__/Dialog.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Dialog Dialog.Header renders consistently 1`] = `
   font-size: 14px;
   font-weight: 600;
   font-family: sans-serif;
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c0 {
@@ -51,7 +51,7 @@ exports[`Dialog renders consistently 1`] = `
   content: ' ';
   background: transparent;
   z-index: 99;
-  background: rgba(27,31,36,0.5);
+  background: rgba(31,35,40,0.5);
 }
 
 <span
@@ -67,7 +67,7 @@ exports[`Dialog renders consistently 1`] = `
   background: transparent;
   cursor: pointer;
   border-radius: 6px;
-  color: #57606a;
+  color: #656d76;
   position: absolute;
   top: 16px;
   right: 16px;
@@ -85,7 +85,7 @@ exports[`Dialog renders consistently 1`] = `
   font-size: 14px;
   font-weight: 600;
   font-family: sans-serif;
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c5 {
diff --git a/src/__tests__/__snapshots__/Dropdown.test.tsx.snap b/src/__tests__/__snapshots__/Dropdown.test.tsx.snap
index dbce256b7fa..5fc9fbc3644 100644
--- a/src/__tests__/__snapshots__/Dropdown.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -47,8 +47,8 @@ exports[`Dropdown.Button renders consistently 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(27,31,36,0.15);
-  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -70,7 +70,7 @@ exports[`Dropdown.Button renders consistently 1`] = `
 
 .c0:hover {
   background-color: #f3f4f6;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c0:focus {
@@ -84,7 +84,7 @@ exports[`Dropdown.Button renders consistently 1`] = `
 .c0:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c1 {
@@ -133,18 +133,18 @@ exports[`Dropdown.Item renders consistently 1`] = `
   display: block;
   padding: 4px 10px 4px 15px;
   overflow: hidden;
-  color: #24292f;
+  color: #1F2328;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .c0 a {
-  color: #24292f;
+  color: #1F2328;
   -webkit-text-decoration: none;
   text-decoration: none;
   display: block;
   overflow: hidden;
-  color: #24292f;
+  color: #1F2328;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
diff --git a/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap b/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap
index e8ebaa3f24c..ecc0b3122cd 100644
--- a/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap
+++ b/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`FilterList.Item renders consistently 1`] = `
   margin: 0 0 5px 0;
   overflow: hidden;
   font-size: 14px;
-  color: #57606a;
+  color: #656d76;
   background-color: !important;
   -webkit-text-decoration: none;
   text-decoration: none;
diff --git a/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap b/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap
index 897e6392209..7050d8d3b7d 100644
--- a/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap
@@ -3,8 +3,8 @@
 exports[`ProgressBar renders consistently 1`] = `
 .c1 {
   width: 0;
-  background-color: #2da44e;
-  background-color: #2da44e;
+  background-color: #1f883d;
+  background-color: #1f883d;
 }
 
 .c0 {
@@ -30,8 +30,8 @@ exports[`ProgressBar renders consistently 1`] = `
 exports[`ProgressBar respects the "progress" prop 1`] = `
 .c1 {
   width: 80%;
-  background-color: #2da44e;
-  background-color: #2da44e;
+  background-color: #1f883d;
+  background-color: #1f883d;
 }
 
 .c0 {
diff --git a/src/__tests__/__snapshots__/Radio.test.tsx.snap b/src/__tests__/__snapshots__/Radio.test.tsx.snap
index 895d60c186b..caad863c07d 100644
--- a/src/__tests__/__snapshots__/Radio.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Radio.test.tsx.snap
@@ -33,7 +33,7 @@ exports[`Radio renders consistently 1`] = `
 
 .c0:checked:disabled {
   cursor: not-allowed;
-  border-color: #57606a;
+  border-color: #656d76;
 }
 
 .c0:focus:not(:disabled) {
diff --git a/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap b/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
index 8b74aca6d34..910aef774dd 100644
--- a/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
+++ b/src/__tests__/__snapshots__/RadioGroup.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`RadioGroup renders consistently 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #24292f;
+  color: #1F2328;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -100,7 +100,7 @@ exports[`RadioGroup renders consistently 1`] = `
 
 .c6:checked:disabled {
   cursor: not-allowed;
-  border-color: #57606a;
+  border-color: #656d76;
 }
 
 .c6:focus:not(:disabled) {
diff --git a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap b/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
index 631c15de438..3fd7842da9c 100644
--- a/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
+++ b/src/__tests__/__snapshots__/SelectMenu.test.tsx.snap
@@ -25,8 +25,8 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(27,31,36,0.15);
-  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:hover {
@@ -48,7 +48,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
 
 .c1:hover {
   background-color: #f3f4f6;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c1:focus {
@@ -62,7 +62,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
 .c1:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c6 {
@@ -70,7 +70,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   margin: 0;
   font-size: 12px;
   font-weight: 600;
-  color: #57606a;
+  color: #656d76;
   background-color: #f6f8fa;
   border-bottom: 1px solid hsla(210,18%,87%,1);
 }
@@ -79,7 +79,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   margin-top: -1px;
   padding: 8px 16px;
   font-size: 12px;
-  color: #57606a;
+  color: #656d76;
   text-align: center;
   border-top: 1px solid hsla(210,18%,87%,1);
 }
@@ -100,7 +100,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   background-color: #ffffff;
   border: 0;
   border-bottom: 1px solid hsla(210,18%,87%,1);
-  color: #57606a;
+  color: #656d76;
   -webkit-text-decoration: none;
   text-decoration: none;
   font-size: 12px;
@@ -141,7 +141,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
 
 .c5[aria-checked='true'] {
   font-weight: 500;
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c5[aria-checked='true'] .SelectMenu-selected-icon {
@@ -183,7 +183,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   flex-direction: column;
   background-color: #ffffff;
   border-radius: 6px;
-  box-shadow: 0 1px 0 rgba(27,31,36,0.04);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
   -webkit-animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards;
   animation: lejQAW 0.12s cubic-bezier(0,0.1,0.1,1) backwards;
   width: 300px;
@@ -215,7 +215,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   left: 0;
   pointer-events: none;
   content: '';
-  background-color: rgba(27,31,36,0.5);
+  background-color: rgba(31,35,40,0.5);
 }
 
 .c0 > summary {
@@ -268,12 +268,12 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
   }
 
   .c4 .SelectMenuTab:not([aria-checked='true']):hover {
-    color: #24292f;
+    color: #1F2328;
     background-color: #f6f8fa;
   }
 
   .c4 .SelectMenuTab:not([aria-checked='true']):active {
-    color: #24292f;
+    color: #1F2328;
     background-color: #f6f8fa;
   }
 }
@@ -286,7 +286,7 @@ exports[`SelectMenu right-aligned modal has right: 0px 1`] = `
     font-size: 12px;
     border: 1px solid #d0d7de;
     border-radius: 6px;
-    box-shadow: 0 1px 0 rgba(27,31,36,0.04);
+    box-shadow: 0 1px 0 rgba(31,35,40,0.04);
   }
 }
 
diff --git a/src/__tests__/__snapshots__/SideNav.test.tsx.snap b/src/__tests__/__snapshots__/SideNav.test.tsx.snap
index 416de17cba3..d54bec24567 100644
--- a/src/__tests__/__snapshots__/SideNav.test.tsx.snap
+++ b/src/__tests__/__snapshots__/SideNav.test.tsx.snap
@@ -42,7 +42,7 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `
 }
 
 .c2.variant-normal > .c1 {
-  color: #24292f;
+  color: #1F2328;
   padding: 16px;
   border: 0;
   border-top: 1px solid hsla(210,18%,87%,1);
@@ -100,13 +100,13 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `
 }
 
 .c2.variant-lightweight > .c1:hover {
-  color: #24292f;
+  color: #1F2328;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
 .c2.variant-lightweight > .c1:focus {
-  color: #24292f;
+  color: #1F2328;
   -webkit-text-decoration: none;
   text-decoration: none;
   outline: solid 1px #0969da;
@@ -115,7 +115,7 @@ exports[`SideNav SideNav.Link renders consistently 1`] = `
 
 .c2.variant-lightweight > .c1[aria-current='page'],
 .c2.variant-lightweight > .c1[aria-selected='true'] {
-  color: #24292f;
+  color: #1F2328;
   font-weight: 500;
 }
 
diff --git a/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap b/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
index 0766b036b9e..8e37ba389fc 100644
--- a/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
+++ b/src/__tests__/__snapshots__/SubNavLink.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`SubNav.Link adds activeClassName={SELECTED_CLASS} when it gets a "to" p
   font-size: 14px;
   line-height: 20px;
   min-height: 34px;
-  color: #24292f;
+  color: #1F2328;
   text-align: center;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -47,7 +47,7 @@ exports[`SubNav.Link adds activeClassName={SELECTED_CLASS} when it gets a "to" p
 
 .c0:hover .SubNav-octicon,
 .c0:focus .SubNav-octicon {
-  color: #57606a;
+  color: #656d76;
 }
 
 .c0.selected {
@@ -75,7 +75,7 @@ exports[`SubNav.Link renders consistently 1`] = `
   font-size: 14px;
   line-height: 20px;
   min-height: 34px;
-  color: #24292f;
+  color: #1F2328;
   text-align: center;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -114,7 +114,7 @@ exports[`SubNav.Link renders consistently 1`] = `
 
 .c0:hover .SubNav-octicon,
 .c0:focus .SubNav-octicon {
-  color: #57606a;
+  color: #656d76;
 }
 
 .c0.selected {
@@ -140,7 +140,7 @@ exports[`SubNav.Link respects the "selected" prop 1`] = `
   font-size: 14px;
   line-height: 20px;
   min-height: 34px;
-  color: #24292f;
+  color: #1F2328;
   text-align: center;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -179,7 +179,7 @@ exports[`SubNav.Link respects the "selected" prop 1`] = `
 
 .c0:hover .SubNav-octicon,
 .c0:focus .SubNav-octicon {
-  color: #57606a;
+  color: #656d76;
 }
 
 .c0.selected {
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index f0eb6baefb9..a02f8b8c3c2 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`TextInput renders 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -61,7 +61,7 @@ exports[`TextInput renders 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -70,7 +70,7 @@ exports[`TextInput renders 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -122,7 +122,7 @@ exports[`TextInput renders block 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -187,7 +187,7 @@ exports[`TextInput renders block 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -196,7 +196,7 @@ exports[`TextInput renders block 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -248,7 +248,7 @@ exports[`TextInput renders consistently 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -305,7 +305,7 @@ exports[`TextInput renders consistently 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -314,7 +314,7 @@ exports[`TextInput renders consistently 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -365,7 +365,7 @@ exports[`TextInput renders contrast 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -423,7 +423,7 @@ exports[`TextInput renders contrast 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -432,7 +432,7 @@ exports[`TextInput renders contrast 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -484,7 +484,7 @@ exports[`TextInput renders error 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -548,7 +548,7 @@ exports[`TextInput renders error 1`] = `
   box-shadow: inset 0 0 0 1px #0969da;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -557,7 +557,7 @@ exports[`TextInput renders error 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -609,7 +609,7 @@ exports[`TextInput renders large 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -672,7 +672,7 @@ exports[`TextInput renders large 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -681,7 +681,7 @@ exports[`TextInput renders large 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -734,7 +734,7 @@ exports[`TextInput renders leadingVisual 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -791,7 +791,7 @@ exports[`TextInput renders leadingVisual 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -800,7 +800,7 @@ exports[`TextInput renders leadingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -879,7 +879,7 @@ exports[`TextInput renders monospace 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -937,7 +937,7 @@ exports[`TextInput renders monospace 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -946,7 +946,7 @@ exports[`TextInput renders monospace 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -998,7 +998,7 @@ exports[`TextInput renders placeholder 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -1055,7 +1055,7 @@ exports[`TextInput renders placeholder 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -1064,7 +1064,7 @@ exports[`TextInput renders placeholder 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1117,7 +1117,7 @@ exports[`TextInput renders small 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -1182,7 +1182,7 @@ exports[`TextInput renders small 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -1191,7 +1191,7 @@ exports[`TextInput renders small 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1397,7 +1397,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 .c4 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
-  color: #57606a;
+  color: #656d76;
 }
 
 .c4 [data-component="text"] {
@@ -1412,7 +1412,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 .c4 [data-component="trailingAction"] {
   margin-right: -4px;
-  color: #57606a;
+  color: #656d76;
 }
 
 .c4 [data-component="buttonContent"] {
@@ -1448,7 +1448,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 .c4[data-component="IconButton"][data-no-visuals] {
-  color: #57606a;
+  color: #656d76;
 }
 
 .c4[data-no-visuals] {
@@ -1483,7 +1483,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -1534,7 +1534,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -1543,7 +1543,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2043,7 +2043,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 .c3 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
-  color: #57606a;
+  color: #656d76;
 }
 
 .c3 [data-component="text"] {
@@ -2058,7 +2058,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 .c3 [data-component="trailingAction"] {
   margin-right: -4px;
-  color: #57606a;
+  color: #656d76;
 }
 
 .c3 [data-component="buttonContent"] {
@@ -2094,7 +2094,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c3[data-component="IconButton"][data-no-visuals] {
-  color: #57606a;
+  color: #656d76;
 }
 
 .c3[data-no-visuals] {
@@ -2129,7 +2129,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -2180,7 +2180,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -2189,7 +2189,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2444,7 +2444,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 .c4 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
-  color: #57606a;
+  color: #656d76;
 }
 
 .c4 [data-component="text"] {
@@ -2459,7 +2459,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 
 .c4 [data-component="trailingAction"] {
   margin-right: -4px;
-  color: #57606a;
+  color: #656d76;
 }
 
 .c4 [data-component="buttonContent"] {
@@ -2495,7 +2495,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c4[data-component="IconButton"][data-no-visuals] {
-  color: #57606a;
+  color: #656d76;
 }
 
 .c4[data-no-visuals] {
@@ -2530,7 +2530,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -2581,7 +2581,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -2590,7 +2590,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2916,7 +2916,7 @@ exports[`TextInput renders trailingVisual 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -2973,7 +2973,7 @@ exports[`TextInput renders trailingVisual 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -2982,7 +2982,7 @@ exports[`TextInput renders trailingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3061,7 +3061,7 @@ exports[`TextInput renders warning 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -3081,7 +3081,7 @@ exports[`TextInput renders warning 1`] = `
   background-position: right 8px center;
   padding-left: 0;
   padding-right: 0;
-  border-color: #bf8700;
+  border-color: #9a6700;
 }
 
 .c0 input,
@@ -3119,7 +3119,7 @@ exports[`TextInput renders warning 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -3128,7 +3128,7 @@ exports[`TextInput renders warning 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3201,7 +3201,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -3258,7 +3258,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -3267,7 +3267,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3373,7 +3373,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -3430,7 +3430,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -3439,7 +3439,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3577,7 +3577,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -3634,7 +3634,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -3643,7 +3643,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3758,7 +3758,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -3815,7 +3815,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -3824,7 +3824,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4008,7 +4008,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -4065,7 +4065,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -4074,7 +4074,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4258,7 +4258,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -4315,7 +4315,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -4324,7 +4324,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4502,7 +4502,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -4559,7 +4559,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -4568,7 +4568,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4714,7 +4714,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -4771,7 +4771,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -4780,7 +4780,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4958,7 +4958,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -5015,7 +5015,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -5024,7 +5024,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5179,7 +5179,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -5244,7 +5244,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -5253,7 +5253,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5478,7 +5478,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -5535,7 +5535,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -5544,7 +5544,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5768,7 +5768,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -5831,7 +5831,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -5840,7 +5840,7 @@ exports[`TextInput renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -6031,7 +6031,7 @@ exports[`TextInput should render a password input 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -6088,7 +6088,7 @@ exports[`TextInput should render a password input 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -6097,7 +6097,7 @@ exports[`TextInput should render a password input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
diff --git a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
index a710afbad03..f2119138454 100644
--- a/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap
@@ -55,7 +55,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -119,7 +119,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -128,7 +128,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -180,10 +180,10 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -191,7 +191,7 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c7 {
@@ -826,13 +826,13 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 
 .c8 {
   font-size: 16px;
-  color: #57606a;
+  color: #656d76;
 }
 
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -896,7 +896,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -905,7 +905,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -957,10 +957,10 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -968,7 +968,7 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c7 {
@@ -1241,7 +1241,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -1323,7 +1323,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -1332,7 +1332,7 @@ exports[`TextInputWithTokens renders as block layout 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1445,7 +1445,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -1513,7 +1513,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -1522,7 +1522,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -1574,10 +1574,10 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -1585,7 +1585,7 @@ exports[`TextInputWithTokens renders at a maximum height when specified 1`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c7 {
@@ -2169,7 +2169,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -2240,7 +2240,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -2249,7 +2249,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -2299,10 +2299,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
   padding-left: 4px;
   padding-right: 4px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -2310,7 +2310,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c7 {
@@ -2894,7 +2894,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -2965,7 +2965,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -2974,7 +2974,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3024,10 +3024,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -3035,7 +3035,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c7 {
@@ -3619,7 +3619,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -3683,7 +3683,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -3692,7 +3692,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -3742,10 +3742,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -3753,7 +3753,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c7 {
@@ -4337,7 +4337,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -4401,7 +4401,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -4410,7 +4410,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -4462,10 +4462,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -4473,7 +4473,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c7 {
@@ -5057,7 +5057,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -5121,7 +5121,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -5130,7 +5130,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5182,10 +5182,10 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -5193,7 +5193,7 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c7 {
@@ -5777,7 +5777,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -5843,7 +5843,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -5852,7 +5852,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -5904,10 +5904,10 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -5915,7 +5915,7 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`]
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c7 {
@@ -6499,7 +6499,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -6563,7 +6563,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -6572,7 +6572,7 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -6624,17 +6624,17 @@ exports[`TextInputWithTokens renders tokens without a remove button when specifi
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
 }
 
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c5 {
@@ -6944,7 +6944,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -7008,7 +7008,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -7017,7 +7017,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -7069,10 +7069,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -7080,7 +7080,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c7 {
@@ -7719,7 +7719,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -7783,7 +7783,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -7792,7 +7792,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -7844,10 +7844,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -7855,7 +7855,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c6:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c9 {
@@ -8526,7 +8526,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -8590,7 +8590,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -8599,7 +8599,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -8651,10 +8651,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -8662,7 +8662,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c7 {
@@ -9310,7 +9310,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -9374,7 +9374,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -9383,7 +9383,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -9435,10 +9435,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -9446,7 +9446,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c10 {
@@ -10163,7 +10163,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -10227,7 +10227,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -10236,7 +10236,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -10288,10 +10288,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -10299,7 +10299,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c10 {
@@ -11016,7 +11016,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -11080,7 +11080,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -11089,7 +11089,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -11141,10 +11141,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -11152,7 +11152,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c10 {
@@ -11863,7 +11863,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -11927,7 +11927,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -11936,7 +11936,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -11988,10 +11988,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -11999,7 +11999,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c7 {
@@ -12678,7 +12678,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -12742,7 +12742,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -12751,7 +12751,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -12803,10 +12803,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -12814,7 +12814,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c6:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c9 {
@@ -13525,7 +13525,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -13589,7 +13589,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -13598,7 +13598,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -13650,10 +13650,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -13661,7 +13661,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c7 {
@@ -14349,7 +14349,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -14420,7 +14420,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -14429,7 +14429,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -14479,10 +14479,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-left: 4px;
   padding-right: 4px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -14490,7 +14490,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c10 {
@@ -15247,7 +15247,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -15311,7 +15311,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -15320,7 +15320,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -15372,10 +15372,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -15383,7 +15383,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c10 {
@@ -16140,7 +16140,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -16204,7 +16204,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -16213,7 +16213,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -16263,10 +16263,10 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
   padding-left: 8px;
   padding-right: 8px;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -16274,7 +16274,7 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = `
 .c7:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c10 {
@@ -16997,7 +16997,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -17061,7 +17061,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -17070,7 +17070,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -17122,10 +17122,10 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
   padding-top: 0;
   padding-bottom: 0;
   background-color: rgba(234,238,242,0.5);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
   border-style: solid;
   border-width: 1px;
-  color: #57606a;
+  color: #656d76;
   max-width: 100%;
   padding-right: 0;
 }
@@ -17133,7 +17133,7 @@ exports[`TextInputWithTokens renders with tokens 1`] = `
 .c4:hover {
   background-color: rgba(175,184,193,0.2);
   box-shadow: 0 3px 6px rgba(140,149,159,0.15);
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c7 {
@@ -17704,7 +17704,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -17768,7 +17768,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -17777,7 +17777,7 @@ exports[`TextInputWithTokens renders with tokens using a custom token component
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
@@ -18383,7 +18383,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
@@ -18447,7 +18447,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   padding: 12px;
 }
 
-.c0 >:not(:last-child) {
+.c0 > :not(:last-child) {
   margin-right: 8px;
 }
 
@@ -18456,7 +18456,7 @@ exports[`TextInputWithTokens renders without tokens 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #57606a;
+  color: #656d76;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
   flex-shrink: 0;
diff --git a/src/__tests__/__snapshots__/Textarea.test.tsx.snap b/src/__tests__/__snapshots__/Textarea.test.tsx.snap
index 291f828423b..b0c63ebe245 100644
--- a/src/__tests__/__snapshots__/Textarea.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Textarea.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Textarea renders consistently 1`] = `
 .c0 {
   font-size: 14px;
   line-height: 20px;
-  color: #24292f;
+  color: #1F2328;
   vertical-align: middle;
   background-color: #ffffff;
   border: 1px solid #d0d7de;
diff --git a/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap b/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap
index 9c4e84902b4..101fd03be24 100644
--- a/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`has default theme 1`] = `
 .c0 {
-  color: #24292f;
+  color: #1F2328;
   margin-bottom: 4px;
 }
 
diff --git a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap b/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
index e953cf1f2f5..be527cef621 100644
--- a/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
+++ b/src/__tests__/__snapshots__/ToggleSwitch.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`renders consistently 1`] = `
 }
 
 .c8 {
-  color: #57606a;
+  color: #656d76;
   line-height: 0;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
@@ -100,7 +100,7 @@ exports[`renders consistently 1`] = `
 
 .c1 {
   font-size: 14px;
-  color: #24292f;
+  color: #1F2328;
   margin-left: 8px;
   margin-right: 8px;
   position: relative;
diff --git a/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap b/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap
index 400ce2f4e58..728670dcac0 100644
--- a/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap
+++ b/src/__tests__/__snapshots__/UnderlineNavLink.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a
   margin-right: 16px;
   font-size: 14px;
   line-height: 1.5;
-  color: #24292f;
+  color: #1F2328;
   text-align: center;
   border-bottom: 2px solid transparent;
   -webkit-text-decoration: none;
@@ -15,7 +15,7 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a
 
 .c0:hover,
 .c0:focus {
-  color: #24292f;
+  color: #1F2328;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom-color: rgba(175,184,193,0.2);
@@ -25,16 +25,16 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a
 
 .c0:hover .PRC-UnderlineNav-octicon,
 .c0:focus .PRC-UnderlineNav-octicon {
-  color: #57606a;
+  color: #656d76;
 }
 
 .c0.PRC-selected {
-  color: #24292f;
+  color: #1F2328;
   border-bottom-color: #fd8c73;
 }
 
 .c0.PRC-selected .PRC-UnderlineNav-octicon {
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c0:focus:not(:disabled) {
@@ -66,7 +66,7 @@ exports[`UnderlineNav.Link renders consistently 1`] = `
   margin-right: 16px;
   font-size: 14px;
   line-height: 1.5;
-  color: #24292f;
+  color: #1F2328;
   text-align: center;
   border-bottom: 2px solid transparent;
   -webkit-text-decoration: none;
@@ -75,7 +75,7 @@ exports[`UnderlineNav.Link renders consistently 1`] = `
 
 .c0:hover,
 .c0:focus {
-  color: #24292f;
+  color: #1F2328;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom-color: rgba(175,184,193,0.2);
@@ -85,16 +85,16 @@ exports[`UnderlineNav.Link renders consistently 1`] = `
 
 .c0:hover .PRC-UnderlineNav-octicon,
 .c0:focus .PRC-UnderlineNav-octicon {
-  color: #57606a;
+  color: #656d76;
 }
 
 .c0.PRC-selected {
-  color: #24292f;
+  color: #1F2328;
   border-bottom-color: #fd8c73;
 }
 
 .c0.PRC-selected .PRC-UnderlineNav-octicon {
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c0:focus:not(:disabled) {
@@ -124,7 +124,7 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = `
   margin-right: 16px;
   font-size: 14px;
   line-height: 1.5;
-  color: #24292f;
+  color: #1F2328;
   text-align: center;
   border-bottom: 2px solid transparent;
   -webkit-text-decoration: none;
@@ -133,7 +133,7 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = `
 
 .c0:hover,
 .c0:focus {
-  color: #24292f;
+  color: #1F2328;
   -webkit-text-decoration: none;
   text-decoration: none;
   border-bottom-color: rgba(175,184,193,0.2);
@@ -143,16 +143,16 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = `
 
 .c0:hover .PRC-UnderlineNav-octicon,
 .c0:focus .PRC-UnderlineNav-octicon {
-  color: #57606a;
+  color: #656d76;
 }
 
 .c0.PRC-selected {
-  color: #24292f;
+  color: #1F2328;
   border-bottom-color: #fd8c73;
 }
 
 .c0.PRC-selected .PRC-UnderlineNav-octicon {
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c0:focus:not(:disabled) {
diff --git a/src/__tests__/__snapshots__/themePreval.test.ts.snap b/src/__tests__/__snapshots__/themePreval.test.ts.snap
index 4734fd20d36..4fd687d02ab 100644
--- a/src/__tests__/__snapshots__/themePreval.test.ts.snap
+++ b/src/__tests__/__snapshots__/themePreval.test.ts.snap
@@ -5,7 +5,7 @@ exports[`snapshot theme-preval.js 1`] = `
 
 // this file was prevaled
 // This file needs to be a JavaScript file using CommonJS to be compatible with preval
-// Cache bust: 2022-10-17 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
+// Cache bust: 2023-04-04 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
 var themePreval = {
   "animation": {
     "easeOutCubic": "cubic-bezier(0.33, 1, 0.68, 1)"
@@ -47,15 +47,15 @@ var themePreval = {
         },
         "diffBlob": {
           "addition": {
-            "numText": "#24292f",
-            "fg": "#24292f",
+            "numText": "#1F2328",
+            "fg": "#1F2328",
             "numBg": "#ccffd8",
             "lineBg": "#e6ffec",
             "wordBg": "#abf2bc"
           },
           "deletion": {
-            "numText": "#24292f",
-            "fg": "#24292f",
+            "numText": "#1F2328",
+            "fg": "#1F2328",
             "numBg": "#ffd7d5",
             "lineBg": "#ffebe9",
             "wordBg": "rgba(255,129,130,0.4)"
@@ -64,13 +64,13 @@ var themePreval = {
             "numBg": "rgba(84,174,255,0.4)"
           },
           "expander": {
-            "icon": "#57606a"
+            "icon": "#656d76"
           }
         },
         "diffstat": {
-          "deletionBorder": "rgba(27,31,36,0.15)",
-          "additionBorder": "rgba(27,31,36,0.15)",
-          "additionBg": "#2da44e"
+          "deletionBorder": "rgba(31,35,40,0.15)",
+          "additionBorder": "rgba(31,35,40,0.15)",
+          "additionBg": "#1f883d"
         },
         "searchKeyword": {
           "hl": "#fff8c5"
@@ -110,16 +110,16 @@ var themePreval = {
           }
         },
         "codemirror": {
-          "text": "#24292f",
+          "text": "#1F2328",
           "bg": "#ffffff",
           "guttersBg": "#ffffff",
           "guttermarkerText": "#ffffff",
           "guttermarkerSubtleText": "#6e7781",
-          "linenumberText": "#57606a",
-          "cursor": "#24292f",
+          "linenumberText": "#656d76",
+          "cursor": "#1F2328",
           "selectionBg": "rgba(84,174,255,0.4)",
           "activelineBg": "rgba(234,238,242,0.5)",
-          "matchingbracketText": "#24292f",
+          "matchingbracketText": "#1F2328",
           "linesBg": "#ffffff",
           "syntax": {
             "comment": "#24292f",
@@ -146,12 +146,12 @@ var themePreval = {
           "inputBg": "#32383f",
           "donutError": "#fa4549",
           "donutPending": "#bf8700",
-          "donutSuccess": "#2da44e",
+          "donutSuccess": "#1f883d",
           "donutNeutral": "#afb8c1",
           "dropdownText": "#afb8c1",
           "dropdownBg": "#32383f",
           "dropdownBorder": "#424a53",
-          "dropdownShadow": "rgba(27,31,36,0.3)",
+          "dropdownShadow": "rgba(31,35,40,0.3)",
           "dropdownHoverText": "#f6f8fa",
           "dropdownHoverBg": "#424a53",
           "dropdownBtnHoverText": "#f6f8fa",
@@ -217,9 +217,14 @@ var themePreval = {
             "bg": "#1b1f23"
           }
         },
+        "control": {
+          "borderColor": {
+            "emphasis": "#858F99"
+          }
+        },
         "avatar": {
           "bg": "#ffffff",
-          "border": "rgba(27,31,36,0.15)",
+          "border": "rgba(31,35,40,0.15)",
           "stackFade": "#afb8c1",
           "stackFadeMore": "#d0d7de"
         },
@@ -278,27 +283,23 @@ var themePreval = {
         "btn": {
           "text": "#24292f",
           "bg": "#f6f8fa",
-          "border": "rgba(27,31,36,0.15)",
+          "border": "rgba(31,35,40,0.15)",
           "hoverBg": "#f3f4f6",
-          "hoverBorder": "rgba(27,31,36,0.15)",
+          "hoverBorder": "rgba(31,35,40,0.15)",
           "activeBg": "hsla(220,14%,93%,1)",
-          "activeBorder": "rgba(27,31,36,0.15)",
+          "activeBorder": "rgba(31,35,40,0.15)",
           "selectedBg": "hsla(220,14%,94%,1)",
-          "focusBg": "#f6f8fa",
-          "focusBorder": "rgba(27,31,36,0.15)",
-          "counterBg": "rgba(27,31,36,0.08)",
+          "counterBg": "rgba(31,35,40,0.08)",
           "primary": {
             "text": "#ffffff",
-            "bg": "#2da44e",
-            "border": "rgba(27,31,36,0.15)",
-            "hoverBg": "#2c974b",
-            "hoverBorder": "rgba(27,31,36,0.15)",
-            "selectedBg": "hsla(137,55%,36%,1)",
+            "bg": "#1f883d",
+            "border": "rgba(31,35,40,0.15)",
+            "hoverBg": "#1a7f37",
+            "hoverBorder": "rgba(31,35,40,0.15)",
+            "selectedBg": "hsla(137,66%,28%,1)",
             "disabledText": "rgba(255,255,255,0.8)",
             "disabledBg": "#94d3a2",
-            "disabledBorder": "rgba(27,31,36,0.15)",
-            "focusBg": "#2da44e",
-            "focusBorder": "rgba(27,31,36,0.15)",
+            "disabledBorder": "rgba(31,35,40,0.15)",
             "icon": "rgba(255,255,255,0.8)",
             "counterBg": "rgba(255,255,255,0.2)"
           },
@@ -306,30 +307,28 @@ var themePreval = {
             "text": "#0969da",
             "hoverText": "#ffffff",
             "hoverBg": "#0969da",
-            "hoverBorder": "rgba(27,31,36,0.15)",
+            "hoverBorder": "rgba(31,35,40,0.15)",
             "hoverCounterBg": "rgba(255,255,255,0.2)",
             "selectedText": "#ffffff",
             "selectedBg": "hsla(212,92%,42%,1)",
-            "selectedBorder": "rgba(27,31,36,0.15)",
+            "selectedBorder": "rgba(31,35,40,0.15)",
             "disabledText": "rgba(9,105,218,0.5)",
             "disabledBg": "#f6f8fa",
             "disabledCounterBg": "rgba(9,105,218,0.05)",
-            "focusBorder": "rgba(27,31,36,0.15)",
             "counterBg": "rgba(9,105,218,0.1)"
           },
           "danger": {
             "text": "#cf222e",
             "hoverText": "#ffffff",
             "hoverBg": "#a40e26",
-            "hoverBorder": "rgba(27,31,36,0.15)",
+            "hoverBorder": "rgba(31,35,40,0.15)",
             "hoverCounterBg": "rgba(255,255,255,0.2)",
             "selectedText": "#ffffff",
             "selectedBg": "hsla(356,72%,44%,1)",
-            "selectedBorder": "rgba(27,31,36,0.15)",
+            "selectedBorder": "rgba(31,35,40,0.15)",
             "disabledText": "rgba(207,34,46,0.5)",
             "disabledBg": "#f6f8fa",
             "disabledCounterBg": "rgba(207,34,46,0.05)",
-            "focusBorder": "rgba(27,31,36,0.15)",
             "counterBg": "rgba(207,34,46,0.1)",
             "icon": "#cf222e",
             "hoverIcon": "#ffffff"
@@ -351,28 +350,40 @@ var themePreval = {
           "danger": {
             "hoverBg": "rgba(255,235,233,0.64)",
             "activeBg": "#ffebe9",
-            "hoverText": "#cf222e"
+            "hoverText": "#d1242f"
           }
         },
         "switchTrack": {
           "bg": "#eaeef2",
-          "border": "#afb8c1",
+          "hoverBg": "hsla(210,24%,90%,1)",
+          "activeBg": "hsla(210,24%,88%,1)",
+          "disabledBg": "#8c959f",
+          "fg": "#656d76",
+          "disabledFg": "#ffffff",
+          "border": "rgba(0,0,0,0)",
           "checked": {
-            "bg": "#ddf4ff",
-            "hoverBg": "#b6e3ff",
-            "activeBg": "#80ccff",
-            "border": "#54aeff"
+            "bg": "#0969da",
+            "hoverBg": "#0860CA",
+            "activeBg": "#0757BA",
+            "fg": "#ffffff",
+            "disabledFg": "#ffffff",
+            "border": "rgba(0,0,0,0)"
           }
         },
         "switchKnob": {
+          "bg": "#ffffff",
+          "disabledBg": "#f6f8fa",
+          "border": "#858F99",
           "checked": {
-            "bg": "#0969da",
-            "disabledBg": "#6e7781"
+            "bg": "#ffffff",
+            "disabledBg": "#f6f8fa",
+            "border": "#0969da"
           }
         },
         "segmentedControl": {
           "bg": "#eaeef2",
           "button": {
+            "bg": "#ffffff",
             "hover": {
               "bg": "rgba(175,184,193,0.2)"
             },
@@ -380,7 +391,7 @@ var themePreval = {
               "bg": "rgba(175,184,193,0.4)"
             },
             "selected": {
-              "border": "#6e7781"
+              "border": "#8c959f"
             }
           }
         },
@@ -393,8 +404,8 @@ var themePreval = {
           }
         },
         "fg": {
-          "default": "#24292f",
-          "muted": "#57606a",
+          "default": "#1F2328",
+          "muted": "#656d76",
           "subtle": "#6e7781",
           "onEmphasis": "#ffffff"
         },
@@ -407,7 +418,7 @@ var themePreval = {
         "border": {
           "default": "#d0d7de",
           "muted": "hsla(210,18%,87%,1)",
-          "subtle": "rgba(27,31,36,0.15)"
+          "subtle": "rgba(31,35,40,0.15)"
         },
         "neutral": {
           "emphasisPlus": "#24292f",
@@ -423,13 +434,13 @@ var themePreval = {
         },
         "success": {
           "fg": "#1a7f37",
-          "emphasis": "#2da44e",
+          "emphasis": "#1f883d",
           "muted": "rgba(74,194,107,0.4)",
           "subtle": "#dafbe1"
         },
         "attention": {
           "fg": "#9a6700",
-          "emphasis": "#bf8700",
+          "emphasis": "#9a6700",
           "muted": "rgba(212,167,44,0.4)",
           "subtle": "#fff8c5"
         },
@@ -440,19 +451,19 @@ var themePreval = {
           "subtle": "#fff1e5"
         },
         "danger": {
-          "fg": "#cf222e",
+          "fg": "#d1242f",
           "emphasis": "#cf222e",
           "muted": "rgba(255,129,130,0.4)",
           "subtle": "#ffebe9"
         },
         "open": {
           "fg": "#1a7f37",
-          "emphasis": "#2da44e",
+          "emphasis": "#1f883d",
           "muted": "rgba(74,194,107,0.4)",
           "subtle": "#dafbe1"
         },
         "closed": {
-          "fg": "#cf222e",
+          "fg": "#d1242f",
           "emphasis": "#cf222e",
           "muted": "rgba(255,129,130,0.4)",
           "subtle": "#ffebe9"
@@ -474,12 +485,12 @@ var themePreval = {
             "disabled": "#8c959f"
           },
           "canvas": {
-            "backdrop": "rgba(27,31,36,0.5)",
+            "backdrop": "rgba(31,35,40,0.5)",
             "sticky": "rgba(255,255,255,0.95)"
           },
           "border": {
             "active": "#fd8c73",
-            "contrast": "rgba(27,31,36,0.1)"
+            "contrast": "rgba(31,35,40,0.1)"
           }
         }
       },
@@ -495,38 +506,32 @@ var themePreval = {
           }
         },
         "avatar": {
-          "childShadow": "-2px -2px 0 rgba(255,255,255,0.8)"
+          "childShadow": "0 0 0 2px rgba(255,255,255,0.8)"
         },
         "overlay": {
-          "shadow": "0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12)"
+          "shadow": "0 1px 3px rgba(31,35,40,0.12), 0 8px 24px rgba(66,74,83,0.12)"
         },
         "btn": {
-          "shadow": "0 1px 0 rgba(27,31,36,0.04)",
+          "shadow": "0 1px 0 rgba(31,35,40,0.04)",
           "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.25)",
-          "focusShadow": "0 0 0 3px rgba(9,105,218,0.3)",
-          "shadowActive": "inset 0 0.15em 0.3em rgba(27,31,36,0.15)",
-          "shadowInputFocus": "0 0 0 0.2em rgba(9,105,218,0.3)",
           "primary": {
-            "shadow": "0 1px 0 rgba(27,31,36,0.1)",
+            "shadow": "0 1px 0 rgba(31,35,40,0.1)",
             "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(0,45,17,0.2)",
-            "focusShadow": "0 0 0 3px rgba(45,164,78,0.4)"
+            "selectedShadow": "inset 0 1px 0 rgba(0,45,17,0.2)"
           },
           "outline": {
-            "hoverShadow": "0 1px 0 rgba(27,31,36,0.1)",
+            "hoverShadow": "0 1px 0 rgba(31,35,40,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)",
-            "focusShadow": "0 0 0 3px rgba(5,80,174,0.4)"
+            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)"
           },
           "danger": {
-            "hoverShadow": "0 1px 0 rgba(27,31,36,0.1)",
+            "hoverShadow": "0 1px 0 rgba(31,35,40,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(76,0,20,0.2)",
-            "focusShadow": "0 0 0 3px rgba(164,14,38,0.4)"
+            "selectedShadow": "inset 0 1px 0 rgba(76,0,20,0.2)"
           }
         },
         "shadow": {
-          "small": "0 1px 0 rgba(27,31,36,0.04)",
+          "small": "0 1px 0 rgba(31,35,40,0.04)",
           "medium": "0 3px 6px rgba(140,149,159,0.15)",
           "large": "0 8px 24px rgba(140,149,159,0.2)",
           "extraLarge": "0 12px 28px rgba(140,149,159,0.3)"
@@ -534,8 +539,7 @@ var themePreval = {
         "primer": {
           "shadow": {
             "highlight": "inset 0 1px 0 rgba(255,255,255,0.25)",
-            "inset": "inset 0 1px 0 rgba(208,215,222,0.2)",
-            "focus": "0 0 0 3px rgba(9,105,218,0.3)"
+            "inset": "inset 0 1px 0 rgba(208,215,222,0.2)"
           }
         }
       }
@@ -573,7 +577,7 @@ var themePreval = {
         "diffstat": {
           "deletionBorder": "rgba(1,4,9,0.8)",
           "additionBorder": "rgba(1,4,9,0.8)",
-          "additionBg": "#117f32"
+          "additionBg": "#055d20"
         },
         "searchKeyword": {
           "hl": "#fcf7be"
@@ -649,7 +653,7 @@ var themePreval = {
           "inputBg": "#20252c",
           "donutError": "#d5232c",
           "donutPending": "#956400",
-          "donutSuccess": "#117f32",
+          "donutSuccess": "#055d20",
           "donutNeutral": "#acb6c0",
           "dropdownText": "#acb6c0",
           "dropdownBg": "#20252c",
@@ -720,6 +724,11 @@ var themePreval = {
             "bg": "#1b1f23"
           }
         },
+        "control": {
+          "borderColor": {
+            "emphasis": "#20252c"
+          }
+        },
         "avatar": {
           "bg": "#ffffff",
           "border": "rgba(1,4,9,0.8)",
@@ -787,8 +796,6 @@ var themePreval = {
           "activeBg": "#acb6c0",
           "activeBorder": "rgba(1,4,9,0.8)",
           "selectedBg": "#acb6c0",
-          "focusBg": "#ced5dc",
-          "focusBorder": "rgba(1,4,9,0.8)",
           "counterBg": "rgba(1,4,9,0.08)",
           "primary": {
             "text": "#ffffff",
@@ -800,8 +807,6 @@ var themePreval = {
             "disabledText": "rgba(255,255,255,0.8)",
             "disabledBg": "#94d3a2",
             "disabledBorder": "rgba(1,4,9,0.8)",
-            "focusBg": "#013d14",
-            "focusBorder": "#013d14",
             "icon": "rgba(255,255,255,0.8)",
             "counterBg": "rgba(255,255,255,0.2)"
           },
@@ -817,7 +822,6 @@ var themePreval = {
             "disabledText": "rgba(3,73,180,0.5)",
             "disabledBg": "#e7ecf0",
             "disabledCounterBg": "rgba(3,73,180,0.05)",
-            "focusBorder": "#022f7a",
             "counterBg": "rgba(3,73,180,0.1)"
           },
           "danger": {
@@ -832,7 +836,6 @@ var themePreval = {
             "disabledText": "rgba(160,17,31,0.5)",
             "disabledBg": "#e7ecf0",
             "disabledCounterBg": "rgba(160,17,31,0.05)",
-            "focusBorder": "#6e011a",
             "counterBg": "rgba(160,17,31,0.1)",
             "icon": "#86061d",
             "hoverIcon": "#ffffff"
@@ -858,24 +861,36 @@ var themePreval = {
           }
         },
         "switchTrack": {
-          "bg": "#ffffff",
-          "border": "#20252c",
+          "bg": "#66707b",
+          "hoverBg": "hsla(211,9%,47%,1)",
+          "activeBg": "hsla(211,9%,49%,1)",
+          "disabledBg": "#88929d",
+          "fg": "#ffffff",
+          "disabledFg": "#ffffff",
+          "border": "rgba(0,0,0,0)",
           "checked": {
-            "bg": "#dff7ff",
-            "hoverBg": "#9cd7ff",
-            "activeBg": "#67b3fd",
-            "border": "#0349b4"
+            "bg": "#0349b4",
+            "hoverBg": "#0860CA",
+            "activeBg": "#0757BA",
+            "fg": "#ffffff",
+            "disabledFg": "#ffffff",
+            "border": "rgba(0,0,0,0)"
           }
         },
         "switchKnob": {
+          "bg": "#ffffff",
+          "disabledBg": "#e7ecf0",
+          "border": "#20252c",
           "checked": {
-            "bg": "#0349b4",
-            "disabledBg": "#66707b"
+            "bg": "#ffffff",
+            "disabledBg": "#e7ecf0",
+            "border": "#0349b4"
           }
         },
         "segmentedControl": {
           "bg": "#e7ecf0",
           "button": {
+            "bg": "#ffffff",
             "hover": {
               "bg": "rgba(172,182,192,0.2)"
             },
@@ -883,7 +898,7 @@ var themePreval = {
               "bg": "rgba(172,182,192,0.4)"
             },
             "selected": {
-              "border": "#66707b"
+              "border": "#88929d"
             }
           }
         },
@@ -943,19 +958,19 @@ var themePreval = {
           "subtle": "#fff2d5"
         },
         "danger": {
-          "fg": "#a0111f",
+          "fg": "#d1242f",
           "emphasis": "#a0111f",
           "muted": "#ee5a5d",
           "subtle": "#fff0ee"
         },
         "open": {
           "fg": "#055d20",
-          "emphasis": "#117f32",
+          "emphasis": "#055d20",
           "muted": "rgba(38,161,72,0.4)",
           "subtle": "#d2fedb"
         },
         "closed": {
-          "fg": "#a0111f",
+          "fg": "#d1242f",
           "emphasis": "#a0111f",
           "muted": "rgba(238,90,93,0.4)",
           "subtle": "#fff0ee"
@@ -998,7 +1013,7 @@ var themePreval = {
           }
         },
         "avatar": {
-          "childShadow": "-2px -2px 0 rgba(255,255,255,0.8)"
+          "childShadow": "0 0 0 2px rgba(255,255,255,0.8)"
         },
         "overlay": {
           "shadow": "0 1px 3px rgba(1,4,9,0.12), 0 8px 24px rgba(52,59,67,0.12)"
@@ -1006,26 +1021,20 @@ var themePreval = {
         "btn": {
           "shadow": "0 1px 0 rgba(1,4,9,0.04)",
           "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.25)",
-          "focusShadow": "0 0 0 3px rgba(3,73,180,0.3)",
-          "shadowActive": "inset 0 0.15em 0.3em rgba(1,4,9,0.15)",
-          "shadowInputFocus": "0 0 0 0.2em rgba(3,73,180,0.3)",
           "primary": {
             "shadow": "0 1px 0 rgba(1,4,9,0.1)",
             "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(0,35,11,0.2)",
-            "focusShadow": "0 0 0 3px rgba(1,61,20,0.4)"
+            "selectedShadow": "inset 0 1px 0 rgba(0,35,11,0.2)"
           },
           "outline": {
             "hoverShadow": "0 1px 0 rgba(1,4,9,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(2,26,74,0.2)",
-            "focusShadow": "0 0 0 3px rgba(2,59,149,0.4)"
+            "selectedShadow": "inset 0 1px 0 rgba(2,26,74,0.2)"
           },
           "danger": {
             "hoverShadow": "0 1px 0 rgba(1,4,9,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(67,0,17,0.2)",
-            "focusShadow": "0 0 0 3px rgba(134,6,29,0.4)"
+            "selectedShadow": "inset 0 1px 0 rgba(67,0,17,0.2)"
           }
         },
         "shadow": {
@@ -1037,8 +1046,7 @@ var themePreval = {
         "primer": {
           "shadow": {
             "highlight": "inset 0 1px 0 rgba(255,255,255,0.25)",
-            "inset": "inset 0 1px 0 rgba(206,213,220,0.2)",
-            "focus": "0 0 0 3px rgba(3,73,180,0.3)"
+            "inset": "inset 0 1px 0 rgba(206,213,220,0.2)"
           }
         }
       }
@@ -1076,7 +1084,7 @@ var themePreval = {
         "diffstat": {
           "deletionBorder": "rgba(27,31,36,0.15)",
           "additionBorder": "rgba(27,31,36,0.15)",
-          "additionBg": "#218bff"
+          "additionBg": "#0969da"
         },
         "searchKeyword": {
           "hl": "#fff8c5"
@@ -1152,7 +1160,7 @@ var themePreval = {
           "inputBg": "#32383f",
           "donutError": "#dd7815",
           "donutPending": "#bf8700",
-          "donutSuccess": "#218bff",
+          "donutSuccess": "#0969da",
           "donutNeutral": "#afb8c1",
           "dropdownText": "#afb8c1",
           "dropdownBg": "#32383f",
@@ -1223,6 +1231,11 @@ var themePreval = {
             "bg": "#1b1f23"
           }
         },
+        "control": {
+          "borderColor": {
+            "emphasis": "#858F99"
+          }
+        },
         "avatar": {
           "bg": "#ffffff",
           "border": "rgba(27,31,36,0.15)",
@@ -1290,12 +1303,10 @@ var themePreval = {
           "activeBg": "hsla(220,14%,93%,1)",
           "activeBorder": "rgba(27,31,36,0.15)",
           "selectedBg": "hsla(220,14%,94%,1)",
-          "focusBg": "#f6f8fa",
-          "focusBorder": "rgba(27,31,36,0.15)",
           "counterBg": "rgba(27,31,36,0.08)",
           "primary": {
             "text": "#ffffff",
-            "bg": "#218bff",
+            "bg": "#0969da",
             "border": "rgba(27,31,36,0.15)",
             "hoverBg": "#0969da",
             "hoverBorder": "rgba(27,31,36,0.15)",
@@ -1303,8 +1314,6 @@ var themePreval = {
             "disabledText": "rgba(255,255,255,0.8)",
             "disabledBg": "#80ccff",
             "disabledBorder": "rgba(27,31,36,0.15)",
-            "focusBg": "#218bff",
-            "focusBorder": "rgba(27,31,36,0.15)",
             "icon": "rgba(255,255,255,0.8)",
             "counterBg": "rgba(255,255,255,0.2)"
           },
@@ -1320,7 +1329,6 @@ var themePreval = {
             "disabledText": "rgba(9,105,218,0.5)",
             "disabledBg": "#f6f8fa",
             "disabledCounterBg": "rgba(9,105,218,0.05)",
-            "focusBorder": "rgba(27,31,36,0.15)",
             "counterBg": "rgba(9,105,218,0.1)"
           },
           "danger": {
@@ -1335,7 +1343,6 @@ var themePreval = {
             "disabledText": "rgba(179,89,0,0.5)",
             "disabledBg": "#f6f8fa",
             "disabledCounterBg": "rgba(179,89,0,0.05)",
-            "focusBorder": "rgba(27,31,36,0.15)",
             "counterBg": "rgba(179,89,0,0.1)",
             "icon": "#b35900",
             "hoverIcon": "#ffffff"
@@ -1362,23 +1369,35 @@ var themePreval = {
         },
         "switchTrack": {
           "bg": "#eaeef2",
-          "border": "#afb8c1",
+          "hoverBg": "hsla(210,24%,90%,1)",
+          "activeBg": "hsla(210,24%,88%,1)",
+          "disabledBg": "#8c959f",
+          "fg": "#57606a",
+          "disabledFg": "#ffffff",
+          "border": "rgba(0,0,0,0)",
           "checked": {
-            "bg": "#ddf4ff",
-            "hoverBg": "#b6e3ff",
-            "activeBg": "#80ccff",
-            "border": "#54aeff"
+            "bg": "#0969da",
+            "hoverBg": "#0860CA",
+            "activeBg": "#0757BA",
+            "fg": "#ffffff",
+            "disabledFg": "#ffffff",
+            "border": "rgba(0,0,0,0)"
           }
         },
         "switchKnob": {
+          "bg": "#ffffff",
+          "disabledBg": "#f6f8fa",
+          "border": "#858F99",
           "checked": {
-            "bg": "#0969da",
-            "disabledBg": "#6e7781"
+            "bg": "#ffffff",
+            "disabledBg": "#f6f8fa",
+            "border": "#0969da"
           }
         },
         "segmentedControl": {
           "bg": "#eaeef2",
           "button": {
+            "bg": "#ffffff",
             "hover": {
               "bg": "rgba(175,184,193,0.2)"
             },
@@ -1386,7 +1405,7 @@ var themePreval = {
               "bg": "rgba(175,184,193,0.4)"
             },
             "selected": {
-              "border": "#6e7781"
+              "border": "#8c959f"
             }
           }
         },
@@ -1429,13 +1448,13 @@ var themePreval = {
         },
         "success": {
           "fg": "#0969da",
-          "emphasis": "#218bff",
+          "emphasis": "#0969da",
           "muted": "rgba(84,174,255,0.4)",
           "subtle": "#ddf4ff"
         },
         "attention": {
           "fg": "#9a6700",
-          "emphasis": "#bf8700",
+          "emphasis": "#9a6700",
           "muted": "rgba(212,167,44,0.4)",
           "subtle": "#fff8c5"
         },
@@ -1501,7 +1520,7 @@ var themePreval = {
           }
         },
         "avatar": {
-          "childShadow": "-2px -2px 0 rgba(255,255,255,0.8)"
+          "childShadow": "0 0 0 2px rgba(255,255,255,0.8)"
         },
         "overlay": {
           "shadow": "0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12)"
@@ -1509,26 +1528,20 @@ var themePreval = {
         "btn": {
           "shadow": "0 1px 0 rgba(27,31,36,0.04)",
           "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.25)",
-          "focusShadow": "0 0 0 3px rgba(9,105,218,0.3)",
-          "shadowActive": "inset 0 0.15em 0.3em rgba(27,31,36,0.15)",
-          "shadowInputFocus": "0 0 0 0.2em rgba(9,105,218,0.3)",
           "primary": {
             "shadow": "0 1px 0 rgba(27,31,36,0.1)",
             "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)",
-            "focusShadow": "0 0 0 3px rgba(33,139,255,0.4)"
+            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)"
           },
           "outline": {
             "hoverShadow": "0 1px 0 rgba(27,31,36,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)",
-            "focusShadow": "0 0 0 3px rgba(5,80,174,0.4)"
+            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)"
           },
           "danger": {
             "hoverShadow": "0 1px 0 rgba(27,31,36,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(65,32,0,0.2)",
-            "focusShadow": "0 0 0 3px rgba(138,70,0,0.4)"
+            "selectedShadow": "inset 0 1px 0 rgba(65,32,0,0.2)"
           }
         },
         "shadow": {
@@ -1540,8 +1553,7 @@ var themePreval = {
         "primer": {
           "shadow": {
             "highlight": "inset 0 1px 0 rgba(255,255,255,0.25)",
-            "inset": "inset 0 1px 0 rgba(208,215,222,0.2)",
-            "focus": "0 0 0 3px rgba(9,105,218,0.3)"
+            "inset": "inset 0 1px 0 rgba(208,215,222,0.2)"
           }
         }
       }
@@ -1579,7 +1591,7 @@ var themePreval = {
         "diffstat": {
           "deletionBorder": "rgba(27,31,36,0.15)",
           "additionBorder": "rgba(27,31,36,0.15)",
-          "additionBg": "#218bff"
+          "additionBg": "#0969da"
         },
         "searchKeyword": {
           "hl": "#fff8c5"
@@ -1655,7 +1667,7 @@ var themePreval = {
           "inputBg": "#32383f",
           "donutError": "#fa4549",
           "donutPending": "#bf8700",
-          "donutSuccess": "#218bff",
+          "donutSuccess": "#0969da",
           "donutNeutral": "#afb8c1",
           "dropdownText": "#afb8c1",
           "dropdownBg": "#32383f",
@@ -1726,6 +1738,11 @@ var themePreval = {
             "bg": "#1b1f23"
           }
         },
+        "control": {
+          "borderColor": {
+            "emphasis": "#858F99"
+          }
+        },
         "avatar": {
           "bg": "#ffffff",
           "border": "rgba(27,31,36,0.15)",
@@ -1793,12 +1810,10 @@ var themePreval = {
           "activeBg": "hsla(220,14%,93%,1)",
           "activeBorder": "rgba(27,31,36,0.15)",
           "selectedBg": "hsla(220,14%,94%,1)",
-          "focusBg": "#f6f8fa",
-          "focusBorder": "rgba(27,31,36,0.15)",
           "counterBg": "rgba(27,31,36,0.08)",
           "primary": {
             "text": "#ffffff",
-            "bg": "#218bff",
+            "bg": "#0969da",
             "border": "rgba(27,31,36,0.15)",
             "hoverBg": "#0969da",
             "hoverBorder": "rgba(27,31,36,0.15)",
@@ -1806,8 +1821,6 @@ var themePreval = {
             "disabledText": "rgba(255,255,255,0.8)",
             "disabledBg": "#80ccff",
             "disabledBorder": "rgba(27,31,36,0.15)",
-            "focusBg": "#218bff",
-            "focusBorder": "rgba(27,31,36,0.15)",
             "icon": "rgba(255,255,255,0.8)",
             "counterBg": "rgba(255,255,255,0.2)"
           },
@@ -1823,7 +1836,6 @@ var themePreval = {
             "disabledText": "rgba(9,105,218,0.5)",
             "disabledBg": "#f6f8fa",
             "disabledCounterBg": "rgba(9,105,218,0.05)",
-            "focusBorder": "rgba(27,31,36,0.15)",
             "counterBg": "rgba(9,105,218,0.1)"
           },
           "danger": {
@@ -1838,7 +1850,6 @@ var themePreval = {
             "disabledText": "rgba(207,34,46,0.5)",
             "disabledBg": "#f6f8fa",
             "disabledCounterBg": "rgba(207,34,46,0.05)",
-            "focusBorder": "rgba(27,31,36,0.15)",
             "counterBg": "rgba(207,34,46,0.1)",
             "icon": "#cf222e",
             "hoverIcon": "#ffffff"
@@ -1865,23 +1876,35 @@ var themePreval = {
         },
         "switchTrack": {
           "bg": "#eaeef2",
-          "border": "#afb8c1",
+          "hoverBg": "hsla(210,24%,90%,1)",
+          "activeBg": "hsla(210,24%,88%,1)",
+          "disabledBg": "#8c959f",
+          "fg": "#57606a",
+          "disabledFg": "#ffffff",
+          "border": "rgba(0,0,0,0)",
           "checked": {
-            "bg": "#ddf4ff",
-            "hoverBg": "#b6e3ff",
-            "activeBg": "#80ccff",
-            "border": "#54aeff"
+            "bg": "#0969da",
+            "hoverBg": "#0860CA",
+            "activeBg": "#0757BA",
+            "fg": "#ffffff",
+            "disabledFg": "#ffffff",
+            "border": "rgba(0,0,0,0)"
           }
         },
         "switchKnob": {
+          "bg": "#ffffff",
+          "disabledBg": "#f6f8fa",
+          "border": "#858F99",
           "checked": {
-            "bg": "#0969da",
-            "disabledBg": "#6e7781"
+            "bg": "#ffffff",
+            "disabledBg": "#f6f8fa",
+            "border": "#0969da"
           }
         },
         "segmentedControl": {
           "bg": "#eaeef2",
           "button": {
+            "bg": "#ffffff",
             "hover": {
               "bg": "rgba(175,184,193,0.2)"
             },
@@ -1889,7 +1912,7 @@ var themePreval = {
               "bg": "rgba(175,184,193,0.4)"
             },
             "selected": {
-              "border": "#6e7781"
+              "border": "#8c959f"
             }
           }
         },
@@ -1932,13 +1955,13 @@ var themePreval = {
         },
         "success": {
           "fg": "#0969da",
-          "emphasis": "#218bff",
+          "emphasis": "#0969da",
           "muted": "rgba(84,174,255,0.4)",
           "subtle": "#ddf4ff"
         },
         "attention": {
           "fg": "#9a6700",
-          "emphasis": "#bf8700",
+          "emphasis": "#9a6700",
           "muted": "rgba(212,167,44,0.4)",
           "subtle": "#fff8c5"
         },
@@ -2004,7 +2027,7 @@ var themePreval = {
           }
         },
         "avatar": {
-          "childShadow": "-2px -2px 0 rgba(255,255,255,0.8)"
+          "childShadow": "0 0 0 2px rgba(255,255,255,0.8)"
         },
         "overlay": {
           "shadow": "0 1px 3px rgba(27,31,36,0.12), 0 8px 24px rgba(66,74,83,0.12)"
@@ -2012,26 +2035,20 @@ var themePreval = {
         "btn": {
           "shadow": "0 1px 0 rgba(27,31,36,0.04)",
           "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.25)",
-          "focusShadow": "0 0 0 3px rgba(9,105,218,0.3)",
-          "shadowActive": "inset 0 0.15em 0.3em rgba(27,31,36,0.15)",
-          "shadowInputFocus": "0 0 0 0.2em rgba(9,105,218,0.3)",
           "primary": {
             "shadow": "0 1px 0 rgba(27,31,36,0.1)",
             "insetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)",
-            "focusShadow": "0 0 0 3px rgba(33,139,255,0.4)"
+            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)"
           },
           "outline": {
             "hoverShadow": "0 1px 0 rgba(27,31,36,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)",
-            "focusShadow": "0 0 0 3px rgba(5,80,174,0.4)"
+            "selectedShadow": "inset 0 1px 0 rgba(0,33,85,0.2)"
           },
           "danger": {
             "hoverShadow": "0 1px 0 rgba(27,31,36,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "inset 0 1px 0 rgba(76,0,20,0.2)",
-            "focusShadow": "0 0 0 3px rgba(164,14,38,0.4)"
+            "selectedShadow": "inset 0 1px 0 rgba(76,0,20,0.2)"
           }
         },
         "shadow": {
@@ -2043,8 +2060,7 @@ var themePreval = {
         "primer": {
           "shadow": {
             "highlight": "inset 0 1px 0 rgba(255,255,255,0.25)",
-            "inset": "inset 0 1px 0 rgba(208,215,222,0.2)",
-            "focus": "0 0 0 3px rgba(9,105,218,0.3)"
+            "inset": "inset 0 1px 0 rgba(208,215,222,0.2)"
           }
         }
       }
@@ -2059,24 +2075,24 @@ var themePreval = {
         },
         "diffBlob": {
           "addition": {
-            "numText": "#c9d1d9",
-            "fg": "#c9d1d9",
+            "numText": "#e6edf3",
+            "fg": "#e6edf3",
             "numBg": "rgba(63,185,80,0.3)",
             "lineBg": "rgba(46,160,67,0.15)",
             "wordBg": "rgba(46,160,67,0.4)"
           },
           "deletion": {
-            "numText": "#c9d1d9",
-            "fg": "#c9d1d9",
+            "numText": "#e6edf3",
+            "fg": "#e6edf3",
             "numBg": "rgba(248,81,73,0.3)",
-            "lineBg": "rgba(248,81,73,0.15)",
+            "lineBg": "rgba(248,81,73,0.1)",
             "wordBg": "rgba(248,81,73,0.4)"
           },
           "hunk": {
             "numBg": "rgba(56,139,253,0.4)"
           },
           "expander": {
-            "icon": "#8b949e"
+            "icon": "#7d8590"
           }
         },
         "diffstat": {
@@ -2122,16 +2138,16 @@ var themePreval = {
           }
         },
         "codemirror": {
-          "text": "#c9d1d9",
+          "text": "#e6edf3",
           "bg": "#0d1117",
           "guttersBg": "#0d1117",
           "guttermarkerText": "#0d1117",
           "guttermarkerSubtleText": "#6e7681",
-          "linenumberText": "#8b949e",
-          "cursor": "#c9d1d9",
+          "linenumberText": "#7d8590",
+          "cursor": "#e6edf3",
           "selectionBg": "rgba(56,139,253,0.4)",
           "activelineBg": "rgba(110,118,129,0.1)",
-          "matchingbracketText": "#c9d1d9",
+          "matchingbracketText": "#e6edf3",
           "linesBg": "#0d1117",
           "syntax": {
             "comment": "#8b949e",
@@ -2146,57 +2162,57 @@ var themePreval = {
         },
         "checks": {
           "bg": "#010409",
-          "textPrimary": "#c9d1d9",
-          "textSecondary": "#8b949e",
-          "textLink": "#58a6ff",
-          "btnIcon": "#8b949e",
-          "btnHoverIcon": "#c9d1d9",
+          "textPrimary": "#e6edf3",
+          "textSecondary": "#7d8590",
+          "textLink": "#2f81f7",
+          "btnIcon": "#7d8590",
+          "btnHoverIcon": "#e6edf3",
           "btnHoverBg": "rgba(110,118,129,0.1)",
-          "inputText": "#8b949e",
+          "inputText": "#7d8590",
           "inputPlaceholderText": "#6e7681",
-          "inputFocusText": "#c9d1d9",
+          "inputFocusText": "#e6edf3",
           "inputBg": "#161b22",
           "donutError": "#f85149",
           "donutPending": "#d29922",
           "donutSuccess": "#2ea043",
           "donutNeutral": "#8b949e",
-          "dropdownText": "#c9d1d9",
+          "dropdownText": "#e6edf3",
           "dropdownBg": "#161b22",
           "dropdownBorder": "#30363d",
           "dropdownShadow": "rgba(1,4,9,0.3)",
-          "dropdownHoverText": "#c9d1d9",
+          "dropdownHoverText": "#e6edf3",
           "dropdownHoverBg": "rgba(110,118,129,0.1)",
-          "dropdownBtnHoverText": "#c9d1d9",
+          "dropdownBtnHoverText": "#e6edf3",
           "dropdownBtnHoverBg": "rgba(110,118,129,0.1)",
           "scrollbarThumbBg": "rgba(110,118,129,0.4)",
-          "headerLabelText": "#8b949e",
-          "headerLabelOpenText": "#c9d1d9",
+          "headerLabelText": "#7d8590",
+          "headerLabelOpenText": "#e6edf3",
           "headerBorder": "#21262d",
-          "headerIcon": "#8b949e",
-          "lineText": "#8b949e",
+          "headerIcon": "#7d8590",
+          "lineText": "#7d8590",
           "lineNumText": "#6e7681",
           "lineTimestampText": "#6e7681",
           "lineHoverBg": "rgba(110,118,129,0.1)",
-          "lineSelectedBg": "rgba(56,139,253,0.15)",
-          "lineSelectedNumText": "#58a6ff",
+          "lineSelectedBg": "rgba(56,139,253,0.1)",
+          "lineSelectedNumText": "#2f81f7",
           "lineDtFmText": "#ffffff",
           "lineDtFmBg": "#9e6a03",
           "gateBg": "rgba(187,128,9,0.15)",
-          "gateText": "#8b949e",
+          "gateText": "#7d8590",
           "gateWaitingText": "#d29922",
           "stepHeaderOpenBg": "#161b22",
           "stepErrorText": "#f85149",
           "stepWarningText": "#d29922",
-          "loglineText": "#8b949e",
+          "loglineText": "#7d8590",
           "loglineNumText": "#6e7681",
           "loglineDebugText": "#a371f7",
-          "loglineErrorText": "#8b949e",
+          "loglineErrorText": "#7d8590",
           "loglineErrorNumText": "#6e7681",
-          "loglineErrorBg": "rgba(248,81,73,0.15)",
-          "loglineWarningText": "#8b949e",
+          "loglineErrorBg": "rgba(248,81,73,0.1)",
+          "loglineWarningText": "#7d8590",
           "loglineWarningNumText": "#d29922",
           "loglineWarningBg": "rgba(187,128,9,0.15)",
-          "loglineCommandText": "#58a6ff",
+          "loglineCommandText": "#2f81f7",
           "loglineSectionText": "#3fb950",
           "ansi": {
             "black": "#0d1117",
@@ -2229,6 +2245,11 @@ var themePreval = {
             "bg": "#f6f8fa"
           }
         },
+        "control": {
+          "borderColor": {
+            "emphasis": "#606771"
+          }
+        },
         "avatar": {
           "bg": "rgba(255,255,255,0.1)",
           "border": "rgba(240,246,252,0.1)",
@@ -2296,8 +2317,6 @@ var themePreval = {
           "activeBg": "hsla(212,12%,18%,1)",
           "activeBorder": "#6e7681",
           "selectedBg": "#161b22",
-          "focusBg": "#21262d",
-          "focusBorder": "#8b949e",
           "counterBg": "#30363d",
           "primary": {
             "text": "#ffffff",
@@ -2309,8 +2328,6 @@ var themePreval = {
             "disabledText": "rgba(255,255,255,0.5)",
             "disabledBg": "rgba(35,134,54,0.6)",
             "disabledBorder": "rgba(240,246,252,0.1)",
-            "focusBg": "#238636",
-            "focusBorder": "rgba(240,246,252,0.1)",
             "icon": "#ffffff",
             "counterBg": "rgba(255,255,255,0.2)"
           },
@@ -2326,7 +2343,6 @@ var themePreval = {
             "disabledText": "rgba(88,166,255,0.5)",
             "disabledBg": "#0d1117",
             "disabledCounterBg": "rgba(31,111,235,0.05)",
-            "focusBorder": "rgba(240,246,252,0.1)",
             "counterBg": "rgba(31,111,235,0.1)"
           },
           "danger": {
@@ -2342,7 +2358,6 @@ var themePreval = {
             "disabledText": "rgba(248,81,73,0.5)",
             "disabledBg": "#0d1117",
             "disabledCounterBg": "rgba(218,54,51,0.05)",
-            "focusBorder": "#f85149",
             "counterBg": "rgba(218,54,51,0.1)",
             "icon": "#f85149"
           }
@@ -2367,24 +2382,36 @@ var themePreval = {
           }
         },
         "switchTrack": {
-          "bg": "#010409",
-          "border": "#6e7681",
+          "bg": "rgba(110,118,129,0.1)",
+          "hoverBg": "hsla(215,8%,72%,0.1)",
+          "activeBg": "rgba(110,118,129,0.4)",
+          "disabledBg": "#21262d",
+          "fg": "#7d8590",
+          "disabledFg": "#010409",
+          "border": "rgba(0,0,0,0)",
           "checked": {
             "bg": "rgba(31,111,235,0.35)",
             "hoverBg": "rgba(31,111,235,0.5)",
             "activeBg": "rgba(31,111,235,0.65)",
-            "border": "#58a6ff"
+            "fg": "#ffffff",
+            "disabledFg": "#010409",
+            "border": "rgba(0,0,0,0)"
           }
         },
         "switchKnob": {
+          "bg": "#0d1117",
+          "border": "#606771",
+          "disabledBg": "#161b22",
           "checked": {
-            "bg": "#1f6feb",
-            "disabledBg": "#484f58"
+            "bg": "#0d1117",
+            "disabledBg": "#161b22",
+            "border": "rgba(31,111,235,0.35)"
           }
         },
         "segmentedControl": {
-          "bg": "#161b22",
+          "bg": "rgba(110,118,129,0.1)",
           "button": {
+            "bg": "#0d1117",
             "hover": {
               "bg": "#30363d"
             },
@@ -2401,12 +2428,12 @@ var themePreval = {
             "hoverBg": "rgba(177,186,196,0.12)"
           },
           "directory": {
-            "fill": "#8b949e"
+            "fill": "#7d8590"
           }
         },
         "fg": {
-          "default": "#c9d1d9",
-          "muted": "#8b949e",
+          "default": "#e6edf3",
+          "muted": "#7d8590",
           "subtle": "#6e7681",
           "onEmphasis": "#ffffff"
         },
@@ -2428,10 +2455,10 @@ var themePreval = {
           "subtle": "rgba(110,118,129,0.1)"
         },
         "accent": {
-          "fg": "#58a6ff",
+          "fg": "#2f81f7",
           "emphasis": "#1f6feb",
           "muted": "rgba(56,139,253,0.4)",
-          "subtle": "rgba(56,139,253,0.15)"
+          "subtle": "rgba(56,139,253,0.1)"
         },
         "success": {
           "fg": "#3fb950",
@@ -2449,13 +2476,13 @@ var themePreval = {
           "fg": "#db6d28",
           "emphasis": "#bd561d",
           "muted": "rgba(219,109,40,0.4)",
-          "subtle": "rgba(219,109,40,0.15)"
+          "subtle": "rgba(219,109,40,0.1)"
         },
         "danger": {
           "fg": "#f85149",
           "emphasis": "#da3633",
           "muted": "rgba(248,81,73,0.4)",
-          "subtle": "rgba(248,81,73,0.15)"
+          "subtle": "rgba(248,81,73,0.1)"
         },
         "open": {
           "fg": "#3fb950",
@@ -2473,13 +2500,13 @@ var themePreval = {
           "fg": "#a371f7",
           "emphasis": "#8957e5",
           "muted": "rgba(163,113,247,0.4)",
-          "subtle": "rgba(163,113,247,0.15)"
+          "subtle": "rgba(163,113,247,0.1)"
         },
         "sponsors": {
           "fg": "#db61a2",
           "emphasis": "#bf4b8a",
           "muted": "rgba(219,97,162,0.4)",
-          "subtle": "rgba(219,97,162,0.15)"
+          "subtle": "rgba(219,97,162,0.1)"
         },
         "primer": {
           "fg": {
@@ -2510,7 +2537,7 @@ var themePreval = {
           }
         },
         "avatar": {
-          "childShadow": "-2px -2px 0 #0d1117"
+          "childShadow": "0 0 0 2px #0d1117"
         },
         "overlay": {
           "shadow": "0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85)"
@@ -2518,26 +2545,20 @@ var themePreval = {
         "btn": {
           "shadow": "0 0 transparent",
           "insetShadow": "0 0 transparent",
-          "focusShadow": "0 0 0 3px rgba(139,148,158,0.3)",
-          "shadowActive": "inset 0 0.15em 0.3em rgba(1,4,9,0.15)",
-          "shadowInputFocus": "0 0 0 0.2em rgba(31,111,235,0.3)",
           "primary": {
             "shadow": "0 0 transparent",
             "insetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent",
-            "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)"
+            "selectedShadow": "0 0 transparent"
           },
           "outline": {
             "hoverShadow": "0 1px 0 rgba(1,4,9,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "0 0 transparent",
-            "focusShadow": "0 0 0 3px rgba(17,88,199,0.4)"
+            "selectedShadow": "0 0 transparent"
           },
           "danger": {
             "hoverShadow": "0 0 transparent",
             "hoverInsetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent",
-            "focusShadow": "0 0 0 3px rgba(248,81,73,0.4)"
+            "selectedShadow": "0 0 transparent"
           }
         },
         "shadow": {
@@ -2549,8 +2570,7 @@ var themePreval = {
         "primer": {
           "shadow": {
             "highlight": "0 0 transparent",
-            "inset": "0 0 transparent",
-            "focus": "0 0 0 3px #0c2d6b"
+            "inset": "0 0 transparent"
           }
         }
       }
@@ -2575,14 +2595,14 @@ var themePreval = {
             "numText": "#adbac7",
             "fg": "#adbac7",
             "numBg": "rgba(229,83,75,0.3)",
-            "lineBg": "rgba(229,83,75,0.15)",
+            "lineBg": "rgba(229,83,75,0.1)",
             "wordBg": "rgba(229,83,75,0.4)"
           },
           "hunk": {
             "numBg": "rgba(65,132,228,0.4)"
           },
           "expander": {
-            "icon": "#768390"
+            "icon": "#adbac7"
           }
         },
         "diffstat": {
@@ -2683,7 +2703,7 @@ var themePreval = {
           "lineNumText": "#636e7b",
           "lineTimestampText": "#636e7b",
           "lineHoverBg": "rgba(99,110,123,0.1)",
-          "lineSelectedBg": "rgba(65,132,228,0.15)",
+          "lineSelectedBg": "rgba(65,132,228,0.1)",
           "lineSelectedNumText": "#539bf5",
           "lineDtFmText": "#cdd9e5",
           "lineDtFmBg": "#966600",
@@ -2698,7 +2718,7 @@ var themePreval = {
           "loglineDebugText": "#986ee2",
           "loglineErrorText": "#768390",
           "loglineErrorNumText": "#636e7b",
-          "loglineErrorBg": "rgba(229,83,75,0.15)",
+          "loglineErrorBg": "rgba(229,83,75,0.1)",
           "loglineWarningText": "#768390",
           "loglineWarningNumText": "#c69026",
           "loglineWarningBg": "rgba(174,124,20,0.15)",
@@ -2735,6 +2755,11 @@ var themePreval = {
             "bg": "#f6f8fa"
           }
         },
+        "control": {
+          "borderColor": {
+            "emphasis": "#606771"
+          }
+        },
         "avatar": {
           "bg": "rgba(205,217,229,0.1)",
           "border": "rgba(205,217,229,0.1)",
@@ -2802,8 +2827,6 @@ var themePreval = {
           "activeBg": "hsla(213,12%,27%,1)",
           "activeBorder": "#636e7b",
           "selectedBg": "#2d333b",
-          "focusBg": "#373e47",
-          "focusBorder": "#768390",
           "counterBg": "#444c56",
           "primary": {
             "text": "#ffffff",
@@ -2815,8 +2838,6 @@ var themePreval = {
             "disabledText": "rgba(205,217,229,0.5)",
             "disabledBg": "rgba(52,125,57,0.6)",
             "disabledBorder": "rgba(205,217,229,0.1)",
-            "focusBg": "#347d39",
-            "focusBorder": "rgba(205,217,229,0.1)",
             "icon": "#cdd9e5",
             "counterBg": "rgba(205,217,229,0.2)"
           },
@@ -2832,7 +2853,6 @@ var themePreval = {
             "disabledText": "rgba(83,155,245,0.5)",
             "disabledBg": "#22272e",
             "disabledCounterBg": "rgba(49,109,202,0.05)",
-            "focusBorder": "rgba(205,217,229,0.1)",
             "counterBg": "rgba(49,109,202,0.1)"
           },
           "danger": {
@@ -2848,7 +2868,6 @@ var themePreval = {
             "disabledText": "rgba(229,83,75,0.5)",
             "disabledBg": "#22272e",
             "disabledCounterBg": "rgba(201,60,55,0.05)",
-            "focusBorder": "#e5534b",
             "counterBg": "rgba(201,60,55,0.1)",
             "icon": "#e5534b"
           }
@@ -2873,24 +2892,36 @@ var themePreval = {
           }
         },
         "switchTrack": {
-          "bg": "#1c2128",
-          "border": "#636e7b",
+          "bg": "rgba(99,110,123,0.1)",
+          "hoverBg": "hsla(213,11%,69%,0.1)",
+          "activeBg": "rgba(99,110,123,0.4)",
+          "disabledBg": "#373e47",
+          "fg": "#768390",
+          "disabledFg": "#1c2128",
+          "border": "rgba(0,0,0,0)",
           "checked": {
             "bg": "rgba(49,109,202,0.35)",
             "hoverBg": "rgba(49,109,202,0.5)",
             "activeBg": "rgba(49,109,202,0.65)",
-            "border": "#539bf5"
+            "fg": "#cdd9e5",
+            "disabledFg": "#1c2128",
+            "border": "rgba(0,0,0,0)"
           }
         },
         "switchKnob": {
+          "bg": "#22272e",
+          "border": "#606771",
+          "disabledBg": "#2d333b",
           "checked": {
-            "bg": "#316dca",
-            "disabledBg": "#545d68"
+            "bg": "#22272e",
+            "disabledBg": "#2d333b",
+            "border": "rgba(49,109,202,0.35)"
           }
         },
         "segmentedControl": {
-          "bg": "#2d333b",
+          "bg": "rgba(99,110,123,0.1)",
           "button": {
+            "bg": "#22272e",
             "hover": {
               "bg": "#444c56"
             },
@@ -2937,7 +2968,7 @@ var themePreval = {
           "fg": "#539bf5",
           "emphasis": "#316dca",
           "muted": "rgba(65,132,228,0.4)",
-          "subtle": "rgba(65,132,228,0.15)"
+          "subtle": "rgba(65,132,228,0.1)"
         },
         "success": {
           "fg": "#57ab5a",
@@ -2955,13 +2986,13 @@ var themePreval = {
           "fg": "#cc6b2c",
           "emphasis": "#ae5622",
           "muted": "rgba(204,107,44,0.4)",
-          "subtle": "rgba(204,107,44,0.15)"
+          "subtle": "rgba(204,107,44,0.1)"
         },
         "danger": {
           "fg": "#e5534b",
           "emphasis": "#c93c37",
           "muted": "rgba(229,83,75,0.4)",
-          "subtle": "rgba(229,83,75,0.15)"
+          "subtle": "rgba(229,83,75,0.1)"
         },
         "open": {
           "fg": "#57ab5a",
@@ -2979,13 +3010,13 @@ var themePreval = {
           "fg": "#986ee2",
           "emphasis": "#8256d0",
           "muted": "rgba(152,110,226,0.4)",
-          "subtle": "rgba(152,110,226,0.15)"
+          "subtle": "rgba(152,110,226,0.1)"
         },
         "sponsors": {
           "fg": "#c96198",
           "emphasis": "#ae4c82",
           "muted": "rgba(201,97,152,0.4)",
-          "subtle": "rgba(201,97,152,0.15)"
+          "subtle": "rgba(201,97,152,0.1)"
         },
         "primer": {
           "fg": {
@@ -3016,7 +3047,7 @@ var themePreval = {
           }
         },
         "avatar": {
-          "childShadow": "-2px -2px 0 #22272e"
+          "childShadow": "0 0 0 2px #22272e"
         },
         "overlay": {
           "shadow": "0 0 0 1px #444c56, 0 16px 32px rgba(28,33,40,0.85)"
@@ -3024,26 +3055,20 @@ var themePreval = {
         "btn": {
           "shadow": "0 0 transparent",
           "insetShadow": "0 0 transparent",
-          "focusShadow": "0 0 0 3px rgba(118,131,144,0.3)",
-          "shadowActive": "inset 0 0.15em 0.3em rgba(28,33,40,0.15)",
-          "shadowInputFocus": "0 0 0 0.2em rgba(49,109,202,0.3)",
           "primary": {
             "shadow": "0 0 transparent",
             "insetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent",
-            "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)"
+            "selectedShadow": "0 0 transparent"
           },
           "outline": {
             "hoverShadow": "0 1px 0 rgba(28,33,40,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(205,217,229,0.03)",
-            "selectedShadow": "0 0 transparent",
-            "focusShadow": "0 0 0 3px rgba(37,90,178,0.4)"
+            "selectedShadow": "0 0 transparent"
           },
           "danger": {
             "hoverShadow": "0 0 transparent",
             "hoverInsetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent",
-            "focusShadow": "0 0 0 3px rgba(229,83,75,0.4)"
+            "selectedShadow": "0 0 transparent"
           }
         },
         "shadow": {
@@ -3055,8 +3080,7 @@ var themePreval = {
         "primer": {
           "shadow": {
             "highlight": "0 0 transparent",
-            "inset": "0 0 transparent",
-            "focus": "0 0 0 3px #143d79"
+            "inset": "0 0 transparent"
           }
         }
       }
@@ -3081,7 +3105,7 @@ var themePreval = {
             "numText": "#f0f3f6",
             "fg": "#0a0c10",
             "numBg": "rgba(255,106,105,0.3)",
-            "lineBg": "rgba(255,106,105,0.15)",
+            "lineBg": "rgba(255,106,105,0.1)",
             "wordBg": "#ff6a69"
           },
           "hunk": {
@@ -3189,7 +3213,7 @@ var themePreval = {
           "lineNumText": "#9ea7b3",
           "lineTimestampText": "#9ea7b3",
           "lineHoverBg": "rgba(158,167,179,0.1)",
-          "lineSelectedBg": "rgba(64,158,255,0.15)",
+          "lineSelectedBg": "rgba(64,158,255,0.1)",
           "lineSelectedNumText": "#71b7ff",
           "lineDtFmText": "#0a0c10",
           "lineDtFmBg": "#e09b13",
@@ -3204,7 +3228,7 @@ var themePreval = {
           "loglineDebugText": "#b780ff",
           "loglineErrorText": "#f0f3f6",
           "loglineErrorNumText": "#9ea7b3",
-          "loglineErrorBg": "rgba(255,106,105,0.15)",
+          "loglineErrorBg": "rgba(255,106,105,0.1)",
           "loglineWarningText": "#f0f3f6",
           "loglineWarningNumText": "#f0b72f",
           "loglineWarningBg": "rgba(224,155,19,0.15)",
@@ -3241,6 +3265,11 @@ var themePreval = {
             "bg": "#f6f8fa"
           }
         },
+        "control": {
+          "borderColor": {
+            "emphasis": "#9ea7b3"
+          }
+        },
         "avatar": {
           "bg": "rgba(255,255,255,0.1)",
           "border": "rgba(255,255,255,0.9)",
@@ -3308,8 +3337,6 @@ var themePreval = {
           "activeBg": "hsla(217,10%,33%,1)",
           "activeBorder": "#9ea7b3",
           "selectedBg": "rgba(82,89,100,0.9)",
-          "focusBg": "#272b33",
-          "focusBorder": "#bdc4cc",
           "counterBg": "#525964",
           "primary": {
             "text": "#0a0c10",
@@ -3321,8 +3348,6 @@ var themePreval = {
             "disabledText": "rgba(10,12,16,0.5)",
             "disabledBg": "rgba(9,180,58,0.6)",
             "disabledBorder": "rgba(74,225,104,0.4)",
-            "focusBg": "#09b43a",
-            "focusBorder": "#7a828e",
             "icon": "#0a0c10",
             "counterBg": "rgba(1,4,9,0.15)"
           },
@@ -3338,7 +3363,6 @@ var themePreval = {
             "disabledText": "rgba(113,183,255,0.5)",
             "disabledBg": "#0a0c10",
             "disabledCounterBg": "rgba(64,158,255,0.05)",
-            "focusBorder": "#7a828e",
             "counterBg": "rgba(64,158,255,0.1)"
           },
           "danger": {
@@ -3354,7 +3378,6 @@ var themePreval = {
             "disabledText": "rgba(255,106,105,0.5)",
             "disabledBg": "#0a0c10",
             "disabledCounterBg": "rgba(255,106,105,0.05)",
-            "focusBorder": "#ff6a69",
             "counterBg": "rgba(1,4,9,0.15)",
             "icon": "#ff6a69"
           }
@@ -3379,24 +3402,36 @@ var themePreval = {
           }
         },
         "switchTrack": {
-          "bg": "#010409",
-          "border": "#7a828e",
+          "bg": "#9ea7b3",
+          "hoverBg": "hsla(214,12%,61%,1)",
+          "activeBg": "hsla(214,12%,58%,1)",
+          "disabledBg": "#272b33",
+          "fg": "#0a0c10",
+          "disabledFg": "#010409",
+          "border": "rgba(0,0,0,0)",
           "checked": {
-            "bg": "rgba(64,158,255,0.35)",
+            "bg": "#409eff",
             "hoverBg": "rgba(64,158,255,0.5)",
             "activeBg": "rgba(64,158,255,0.65)",
-            "border": "#409eff"
+            "fg": "#0a0c10",
+            "disabledFg": "#010409",
+            "border": "rgba(0,0,0,0)"
           }
         },
         "switchKnob": {
+          "bg": "#0a0c10",
+          "border": "#9ea7b3",
+          "disabledBg": "#272b33",
           "checked": {
-            "bg": "#409eff",
-            "disabledBg": "#7a828e"
+            "bg": "#0a0c10",
+            "disabledBg": "#272b33",
+            "border": "#409eff"
           }
         },
         "segmentedControl": {
-          "bg": "#272b33",
+          "bg": "rgba(158,167,179,0.1)",
           "button": {
+            "bg": "#0a0c10",
             "hover": {
               "bg": "#525964"
             },
@@ -3443,7 +3478,7 @@ var themePreval = {
           "fg": "#71b7ff",
           "emphasis": "#409eff",
           "muted": "#409eff",
-          "subtle": "rgba(64,158,255,0.15)"
+          "subtle": "rgba(64,158,255,0.1)"
         },
         "success": {
           "fg": "#26cd4d",
@@ -3461,13 +3496,13 @@ var themePreval = {
           "fg": "#e7811d",
           "emphasis": "#e7811d",
           "muted": "#e7811d",
-          "subtle": "rgba(231,129,29,0.15)"
+          "subtle": "rgba(231,129,29,0.1)"
         },
         "danger": {
           "fg": "#ff6a69",
           "emphasis": "#ff6a69",
           "muted": "#ff6a69",
-          "subtle": "rgba(255,106,105,0.15)"
+          "subtle": "rgba(255,106,105,0.1)"
         },
         "open": {
           "fg": "#26cd4d",
@@ -3485,13 +3520,13 @@ var themePreval = {
           "fg": "#b780ff",
           "emphasis": "#b87fff",
           "muted": "#b780ff",
-          "subtle": "rgba(183,128,255,0.15)"
+          "subtle": "rgba(183,128,255,0.1)"
         },
         "sponsors": {
           "fg": "#ef6eb1",
           "emphasis": "#ef6eb1",
           "muted": "#ef6eb1",
-          "subtle": "rgba(239,110,177,0.15)"
+          "subtle": "rgba(239,110,177,0.1)"
         },
         "primer": {
           "fg": {
@@ -3522,7 +3557,7 @@ var themePreval = {
           }
         },
         "avatar": {
-          "childShadow": "-2px -2px 0 #0a0c10"
+          "childShadow": "0 0 0 2px #0a0c10"
         },
         "overlay": {
           "shadow": "0 0 0 1px #525964, 0 16px 32px rgba(1,4,9,0.85)"
@@ -3530,26 +3565,20 @@ var themePreval = {
         "btn": {
           "shadow": "0 0 transparent",
           "insetShadow": "0 0 transparent",
-          "focusShadow": "0 0 0 3px rgba(189,196,204,0.3)",
-          "shadowActive": "inset 0 0.15em 0.3em rgba(1,4,9,0.15)",
-          "shadowInputFocus": "0 0 0 0.2em rgba(64,158,255,0.3)",
           "primary": {
             "shadow": "0 0 transparent",
             "insetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent",
-            "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)"
+            "selectedShadow": "0 0 transparent"
           },
           "outline": {
             "hoverShadow": "0 1px 0 rgba(1,4,9,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "0 0 transparent",
-            "focusShadow": "0 0 0 3px rgba(49,139,248,0.4)"
+            "selectedShadow": "0 0 transparent"
           },
           "danger": {
             "hoverShadow": "0 0 transparent",
             "hoverInsetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent",
-            "focusShadow": "0 0 0 3px rgba(255,106,105,0.4)"
+            "selectedShadow": "0 0 transparent"
           }
         },
         "shadow": {
@@ -3561,8 +3590,7 @@ var themePreval = {
         "primer": {
           "shadow": {
             "highlight": "0 0 transparent",
-            "inset": "0 0 transparent",
-            "focus": "0 0 0 3px #1e60d5"
+            "inset": "0 0 transparent"
           }
         }
       }
@@ -3587,7 +3615,7 @@ var themePreval = {
             "numText": "#c9d1d9",
             "fg": "#c9d1d9",
             "numBg": "rgba(212,118,22,0.3)",
-            "lineBg": "rgba(212,118,22,0.15)",
+            "lineBg": "rgba(212,118,22,0.1)",
             "wordBg": "rgba(212,118,22,0.4)"
           },
           "hunk": {
@@ -3695,7 +3723,7 @@ var themePreval = {
           "lineNumText": "#6e7681",
           "lineTimestampText": "#6e7681",
           "lineHoverBg": "rgba(110,118,129,0.1)",
-          "lineSelectedBg": "rgba(56,139,253,0.15)",
+          "lineSelectedBg": "rgba(56,139,253,0.1)",
           "lineSelectedNumText": "#58a6ff",
           "lineDtFmText": "#ffffff",
           "lineDtFmBg": "#9e6a03",
@@ -3710,7 +3738,7 @@ var themePreval = {
           "loglineDebugText": "#a371f7",
           "loglineErrorText": "#8b949e",
           "loglineErrorNumText": "#6e7681",
-          "loglineErrorBg": "rgba(212,118,22,0.15)",
+          "loglineErrorBg": "rgba(212,118,22,0.1)",
           "loglineWarningText": "#8b949e",
           "loglineWarningNumText": "#d29922",
           "loglineWarningBg": "rgba(187,128,9,0.15)",
@@ -3747,6 +3775,11 @@ var themePreval = {
             "bg": "#f6f8fa"
           }
         },
+        "control": {
+          "borderColor": {
+            "emphasis": "#606771"
+          }
+        },
         "avatar": {
           "bg": "rgba(255,255,255,0.1)",
           "border": "rgba(240,246,252,0.1)",
@@ -3814,8 +3847,6 @@ var themePreval = {
           "activeBg": "hsla(212,12%,18%,1)",
           "activeBorder": "#6e7681",
           "selectedBg": "#161b22",
-          "focusBg": "#21262d",
-          "focusBorder": "#8b949e",
           "counterBg": "#30363d",
           "primary": {
             "text": "#ffffff",
@@ -3827,8 +3858,6 @@ var themePreval = {
             "disabledText": "rgba(255,255,255,0.5)",
             "disabledBg": "rgba(31,111,235,0.6)",
             "disabledBorder": "rgba(240,246,252,0.1)",
-            "focusBg": "#1f6feb",
-            "focusBorder": "rgba(240,246,252,0.1)",
             "icon": "#ffffff",
             "counterBg": "rgba(255,255,255,0.2)"
           },
@@ -3844,7 +3873,6 @@ var themePreval = {
             "disabledText": "rgba(88,166,255,0.5)",
             "disabledBg": "#0d1117",
             "disabledCounterBg": "rgba(31,111,235,0.05)",
-            "focusBorder": "rgba(240,246,252,0.1)",
             "counterBg": "rgba(31,111,235,0.1)"
           },
           "danger": {
@@ -3860,7 +3888,6 @@ var themePreval = {
             "disabledText": "rgba(212,118,22,0.5)",
             "disabledBg": "#0d1117",
             "disabledCounterBg": "rgba(183,97,0,0.05)",
-            "focusBorder": "#d47616",
             "counterBg": "rgba(183,97,0,0.1)",
             "icon": "#d47616"
           }
@@ -3885,24 +3912,36 @@ var themePreval = {
           }
         },
         "switchTrack": {
-          "bg": "#010409",
-          "border": "#6e7681",
+          "bg": "rgba(110,118,129,0.1)",
+          "hoverBg": "hsla(215,8%,72%,0.1)",
+          "activeBg": "rgba(110,118,129,0.4)",
+          "disabledBg": "#21262d",
+          "fg": "#8b949e",
+          "disabledFg": "#010409",
+          "border": "rgba(0,0,0,0)",
           "checked": {
             "bg": "rgba(31,111,235,0.35)",
             "hoverBg": "rgba(31,111,235,0.5)",
             "activeBg": "rgba(31,111,235,0.65)",
-            "border": "#58a6ff"
+            "fg": "#ffffff",
+            "disabledFg": "#010409",
+            "border": "rgba(0,0,0,0)"
           }
         },
         "switchKnob": {
+          "bg": "#0d1117",
+          "border": "#606771",
+          "disabledBg": "#161b22",
           "checked": {
-            "bg": "#1f6feb",
-            "disabledBg": "#484f58"
+            "bg": "#0d1117",
+            "disabledBg": "#161b22",
+            "border": "rgba(31,111,235,0.35)"
           }
         },
         "segmentedControl": {
-          "bg": "#161b22",
+          "bg": "rgba(110,118,129,0.1)",
           "button": {
+            "bg": "#0d1117",
             "hover": {
               "bg": "#30363d"
             },
@@ -3949,7 +3988,7 @@ var themePreval = {
           "fg": "#58a6ff",
           "emphasis": "#1f6feb",
           "muted": "rgba(56,139,253,0.4)",
-          "subtle": "rgba(56,139,253,0.15)"
+          "subtle": "rgba(56,139,253,0.1)"
         },
         "success": {
           "fg": "#58a6ff",
@@ -3967,13 +4006,13 @@ var themePreval = {
           "fg": "#d47616",
           "emphasis": "#b76100",
           "muted": "rgba(212,118,22,0.4)",
-          "subtle": "rgba(212,118,22,0.15)"
+          "subtle": "rgba(212,118,22,0.1)"
         },
         "danger": {
           "fg": "#d47616",
           "emphasis": "#b76100",
           "muted": "rgba(212,118,22,0.4)",
-          "subtle": "rgba(212,118,22,0.15)"
+          "subtle": "rgba(212,118,22,0.1)"
         },
         "open": {
           "fg": "#ec8e2c",
@@ -3991,13 +4030,13 @@ var themePreval = {
           "fg": "#a371f7",
           "emphasis": "#8957e5",
           "muted": "rgba(163,113,247,0.4)",
-          "subtle": "rgba(163,113,247,0.15)"
+          "subtle": "rgba(163,113,247,0.1)"
         },
         "sponsors": {
           "fg": "#db61a2",
           "emphasis": "#bf4b8a",
           "muted": "rgba(219,97,162,0.4)",
-          "subtle": "rgba(219,97,162,0.15)"
+          "subtle": "rgba(219,97,162,0.1)"
         },
         "primer": {
           "fg": {
@@ -4028,7 +4067,7 @@ var themePreval = {
           }
         },
         "avatar": {
-          "childShadow": "-2px -2px 0 #0d1117"
+          "childShadow": "0 0 0 2px #0d1117"
         },
         "overlay": {
           "shadow": "0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85)"
@@ -4036,26 +4075,20 @@ var themePreval = {
         "btn": {
           "shadow": "0 0 transparent",
           "insetShadow": "0 0 transparent",
-          "focusShadow": "0 0 0 3px rgba(139,148,158,0.3)",
-          "shadowActive": "inset 0 0.15em 0.3em rgba(1,4,9,0.15)",
-          "shadowInputFocus": "0 0 0 0.2em rgba(31,111,235,0.3)",
           "primary": {
             "shadow": "0 0 transparent",
             "insetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent",
-            "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)"
+            "selectedShadow": "0 0 transparent"
           },
           "outline": {
             "hoverShadow": "0 1px 0 rgba(1,4,9,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "0 0 transparent",
-            "focusShadow": "0 0 0 3px rgba(17,88,199,0.4)"
+            "selectedShadow": "0 0 transparent"
           },
           "danger": {
             "hoverShadow": "0 0 transparent",
             "hoverInsetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent",
-            "focusShadow": "0 0 0 3px rgba(212,118,22,0.4)"
+            "selectedShadow": "0 0 transparent"
           }
         },
         "shadow": {
@@ -4067,8 +4100,7 @@ var themePreval = {
         "primer": {
           "shadow": {
             "highlight": "0 0 transparent",
-            "inset": "0 0 transparent",
-            "focus": "0 0 0 3px #0c2d6b"
+            "inset": "0 0 transparent"
           }
         }
       }
@@ -4093,7 +4125,7 @@ var themePreval = {
             "numText": "#c9d1d9",
             "fg": "#c9d1d9",
             "numBg": "rgba(248,81,73,0.3)",
-            "lineBg": "rgba(248,81,73,0.15)",
+            "lineBg": "rgba(248,81,73,0.1)",
             "wordBg": "rgba(248,81,73,0.4)"
           },
           "hunk": {
@@ -4201,7 +4233,7 @@ var themePreval = {
           "lineNumText": "#6e7681",
           "lineTimestampText": "#6e7681",
           "lineHoverBg": "rgba(110,118,129,0.1)",
-          "lineSelectedBg": "rgba(56,139,253,0.15)",
+          "lineSelectedBg": "rgba(56,139,253,0.1)",
           "lineSelectedNumText": "#58a6ff",
           "lineDtFmText": "#ffffff",
           "lineDtFmBg": "#9e6a03",
@@ -4216,7 +4248,7 @@ var themePreval = {
           "loglineDebugText": "#a371f7",
           "loglineErrorText": "#8b949e",
           "loglineErrorNumText": "#6e7681",
-          "loglineErrorBg": "rgba(248,81,73,0.15)",
+          "loglineErrorBg": "rgba(248,81,73,0.1)",
           "loglineWarningText": "#8b949e",
           "loglineWarningNumText": "#d29922",
           "loglineWarningBg": "rgba(187,128,9,0.15)",
@@ -4253,6 +4285,11 @@ var themePreval = {
             "bg": "#f6f8fa"
           }
         },
+        "control": {
+          "borderColor": {
+            "emphasis": "#606771"
+          }
+        },
         "avatar": {
           "bg": "rgba(255,255,255,0.1)",
           "border": "rgba(240,246,252,0.1)",
@@ -4320,8 +4357,6 @@ var themePreval = {
           "activeBg": "hsla(212,12%,18%,1)",
           "activeBorder": "#6e7681",
           "selectedBg": "#161b22",
-          "focusBg": "#21262d",
-          "focusBorder": "#8b949e",
           "counterBg": "#30363d",
           "primary": {
             "text": "#ffffff",
@@ -4333,8 +4368,6 @@ var themePreval = {
             "disabledText": "rgba(255,255,255,0.5)",
             "disabledBg": "rgba(31,111,235,0.6)",
             "disabledBorder": "rgba(240,246,252,0.1)",
-            "focusBg": "#1f6feb",
-            "focusBorder": "rgba(240,246,252,0.1)",
             "icon": "#ffffff",
             "counterBg": "rgba(255,255,255,0.2)"
           },
@@ -4350,7 +4383,6 @@ var themePreval = {
             "disabledText": "rgba(88,166,255,0.5)",
             "disabledBg": "#0d1117",
             "disabledCounterBg": "rgba(31,111,235,0.05)",
-            "focusBorder": "rgba(240,246,252,0.1)",
             "counterBg": "rgba(31,111,235,0.1)"
           },
           "danger": {
@@ -4366,7 +4398,6 @@ var themePreval = {
             "disabledText": "rgba(248,81,73,0.5)",
             "disabledBg": "#0d1117",
             "disabledCounterBg": "rgba(218,54,51,0.05)",
-            "focusBorder": "#f85149",
             "counterBg": "rgba(218,54,51,0.1)",
             "icon": "#f85149"
           }
@@ -4391,24 +4422,36 @@ var themePreval = {
           }
         },
         "switchTrack": {
-          "bg": "#010409",
-          "border": "#6e7681",
+          "bg": "rgba(110,118,129,0.1)",
+          "hoverBg": "hsla(215,8%,72%,0.1)",
+          "activeBg": "rgba(110,118,129,0.4)",
+          "disabledBg": "#21262d",
+          "fg": "#8b949e",
+          "disabledFg": "#010409",
+          "border": "rgba(0,0,0,0)",
           "checked": {
             "bg": "rgba(31,111,235,0.35)",
             "hoverBg": "rgba(31,111,235,0.5)",
             "activeBg": "rgba(31,111,235,0.65)",
-            "border": "#58a6ff"
+            "fg": "#ffffff",
+            "disabledFg": "#010409",
+            "border": "rgba(0,0,0,0)"
           }
         },
         "switchKnob": {
+          "bg": "#0d1117",
+          "border": "#606771",
+          "disabledBg": "#161b22",
           "checked": {
-            "bg": "#1f6feb",
-            "disabledBg": "#484f58"
+            "bg": "#0d1117",
+            "disabledBg": "#161b22",
+            "border": "rgba(31,111,235,0.35)"
           }
         },
         "segmentedControl": {
-          "bg": "#161b22",
+          "bg": "rgba(110,118,129,0.1)",
           "button": {
+            "bg": "#0d1117",
             "hover": {
               "bg": "#30363d"
             },
@@ -4455,7 +4498,7 @@ var themePreval = {
           "fg": "#58a6ff",
           "emphasis": "#1f6feb",
           "muted": "rgba(56,139,253,0.4)",
-          "subtle": "rgba(56,139,253,0.15)"
+          "subtle": "rgba(56,139,253,0.1)"
         },
         "success": {
           "fg": "#58a6ff",
@@ -4473,13 +4516,13 @@ var themePreval = {
           "fg": "#f85149",
           "emphasis": "#da3633",
           "muted": "rgba(248,81,73,0.4)",
-          "subtle": "rgba(248,81,73,0.15)"
+          "subtle": "rgba(248,81,73,0.1)"
         },
         "danger": {
           "fg": "#f85149",
           "emphasis": "#da3633",
           "muted": "rgba(248,81,73,0.4)",
-          "subtle": "rgba(248,81,73,0.15)"
+          "subtle": "rgba(248,81,73,0.1)"
         },
         "open": {
           "fg": "#ff7b72",
@@ -4497,13 +4540,13 @@ var themePreval = {
           "fg": "#a371f7",
           "emphasis": "#8957e5",
           "muted": "rgba(163,113,247,0.4)",
-          "subtle": "rgba(163,113,247,0.15)"
+          "subtle": "rgba(163,113,247,0.1)"
         },
         "sponsors": {
           "fg": "#db61a2",
           "emphasis": "#bf4b8a",
           "muted": "rgba(219,97,162,0.4)",
-          "subtle": "rgba(219,97,162,0.15)"
+          "subtle": "rgba(219,97,162,0.1)"
         },
         "primer": {
           "fg": {
@@ -4534,7 +4577,7 @@ var themePreval = {
           }
         },
         "avatar": {
-          "childShadow": "-2px -2px 0 #0d1117"
+          "childShadow": "0 0 0 2px #0d1117"
         },
         "overlay": {
           "shadow": "0 0 0 1px #30363d, 0 16px 32px rgba(1,4,9,0.85)"
@@ -4542,26 +4585,20 @@ var themePreval = {
         "btn": {
           "shadow": "0 0 transparent",
           "insetShadow": "0 0 transparent",
-          "focusShadow": "0 0 0 3px rgba(139,148,158,0.3)",
-          "shadowActive": "inset 0 0.15em 0.3em rgba(1,4,9,0.15)",
-          "shadowInputFocus": "0 0 0 0.2em rgba(31,111,235,0.3)",
           "primary": {
             "shadow": "0 0 transparent",
             "insetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent",
-            "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)"
+            "selectedShadow": "0 0 transparent"
           },
           "outline": {
             "hoverShadow": "0 1px 0 rgba(1,4,9,0.1)",
             "hoverInsetShadow": "inset 0 1px 0 rgba(255,255,255,0.03)",
-            "selectedShadow": "0 0 transparent",
-            "focusShadow": "0 0 0 3px rgba(17,88,199,0.4)"
+            "selectedShadow": "0 0 transparent"
           },
           "danger": {
             "hoverShadow": "0 0 transparent",
             "hoverInsetShadow": "0 0 transparent",
-            "selectedShadow": "0 0 transparent",
-            "focusShadow": "0 0 0 3px rgba(248,81,73,0.4)"
+            "selectedShadow": "0 0 transparent"
           }
         },
         "shadow": {
@@ -4573,8 +4610,7 @@ var themePreval = {
         "primer": {
           "shadow": {
             "highlight": "0 0 transparent",
-            "inset": "0 0 transparent",
-            "focus": "0 0 0 3px #0c2d6b"
+            "inset": "0 0 transparent"
           }
         }
       }
diff --git a/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap
index aeba8dd6d70..e261d464937 100644
--- a/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/ActionList.test.tsx.snap
@@ -144,7 +144,7 @@ exports[`ActionList.Item renders consistently 1`] = `
   display: -ms-flexbox;
   display: flex;
   border-radius: 6px;
-  color: #24292f;
+  color: #1F2328;
   -webkit-transition: background 33.333ms linear;
   transition: background 33.333ms linear;
   -webkit-text-decoration: none;
diff --git a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
index a293df82422..2b488c64daf 100644
--- a/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/ActionMenu.test.tsx.snap
@@ -25,8 +25,8 @@ exports[`ActionMenu renders consistently 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(27,31,36,0.15);
-  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -48,7 +48,7 @@ exports[`ActionMenu renders consistently 1`] = `
 
 .c0:hover {
   background-color: #f3f4f6;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c0:focus {
@@ -62,7 +62,7 @@ exports[`ActionMenu renders consistently 1`] = `
 .c0:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 <button
diff --git a/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
index 2dea0b8818c..9c106f86e5a 100644
--- a/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/Button.test.tsx.snap
@@ -25,8 +25,8 @@ exports[`Button renders consistently 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(27,31,36,0.15);
-  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -48,7 +48,7 @@ exports[`Button renders consistently 1`] = `
 
 .c0:hover {
   background-color: #f3f4f6;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c0:focus {
@@ -62,7 +62,7 @@ exports[`Button renders consistently 1`] = `
 .c0:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 <button
@@ -95,8 +95,8 @@ exports[`Button respects the "disabled" prop 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(27,31,36,0.15);
-  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -118,7 +118,7 @@ exports[`Button respects the "disabled" prop 1`] = `
 
 .c0:hover {
   background-color: #f3f4f6;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c0:focus {
@@ -132,7 +132,7 @@ exports[`Button respects the "disabled" prop 1`] = `
 .c0:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 <button
@@ -165,9 +165,9 @@ exports[`ButtonDanger renders consistently 1`] = `
   text-align: center;
   font-size: 14px;
   color: #cf222e;
-  border: 1px solid rgba(27,31,36,0.15);
+  border: 1px solid rgba(31,35,40,0.15);
   background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(27,31,36,0.04);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
 }
 
 .c0:hover {
@@ -190,15 +190,15 @@ exports[`ButtonDanger renders consistently 1`] = `
 .c0:hover {
   color: #ffffff;
   background-color: #a40e26;
-  border-color: rgba(27,31,36,0.15);
-  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
+  border-color: rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
 }
 
 .c0:active {
   color: #ffffff;
   background-color: hsla(356,72%,44%,1);
   box-shadow: inset 0 1px 0 rgba(76,0,20,0.2);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c0:disabled {
@@ -235,9 +235,9 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
   text-align: center;
   font-size: 14px;
   color: #cf222e;
-  border: 1px solid rgba(27,31,36,0.15);
+  border: 1px solid rgba(31,35,40,0.15);
   background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(27,31,36,0.04);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
 }
 
 .c0:hover {
@@ -260,15 +260,15 @@ exports[`ButtonDanger renders correct disabled styles 1`] = `
 .c0:hover {
   color: #ffffff;
   background-color: #a40e26;
-  border-color: rgba(27,31,36,0.15);
-  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
+  border-color: rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
 }
 
 .c0:active {
   color: #ffffff;
   background-color: hsla(356,72%,44%,1);
   box-shadow: inset 0 1px 0 rgba(76,0,20,0.2);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c0:disabled {
@@ -343,9 +343,9 @@ exports[`ButtonInvisible renders consistently 1`] = `
   text-align: center;
   font-size: 14px;
   color: #0969da;
-  border: 1px solid rgba(27,31,36,0.15);
+  border: 1px solid rgba(31,35,40,0.15);
   background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(27,31,36,0.04);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
 }
 
 .c0:hover {
@@ -368,21 +368,21 @@ exports[`ButtonInvisible renders consistently 1`] = `
 .c0:hover {
   color: #ffffff;
   background-color: #0969da;
-  border-color: rgba(27,31,36,0.15);
-  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
+  border-color: rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
 }
 
 .c0:active {
   color: #ffffff;
   background-color: hsla(212,92%,42%,1);
   box-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c0:disabled {
   color: rgba(9,105,218,0.5);
   background-color: #f6f8fa;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 <button
@@ -483,9 +483,9 @@ exports[`ButtonOutline renders consistently 1`] = `
   text-align: center;
   font-size: 14px;
   color: #0969da;
-  border: 1px solid rgba(27,31,36,0.15);
+  border: 1px solid rgba(31,35,40,0.15);
   background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(27,31,36,0.04);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
 }
 
 .c0:hover {
@@ -508,21 +508,21 @@ exports[`ButtonOutline renders consistently 1`] = `
 .c0:hover {
   color: #ffffff;
   background-color: #0969da;
-  border-color: rgba(27,31,36,0.15);
-  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
+  border-color: rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
 }
 
 .c0:active {
   color: #ffffff;
   background-color: hsla(212,92%,42%,1);
   box-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c0:disabled {
   color: rgba(9,105,218,0.5);
   background-color: #f6f8fa;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 <button
@@ -554,9 +554,9 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
   text-align: center;
   font-size: 14px;
   color: #0969da;
-  border: 1px solid rgba(27,31,36,0.15);
+  border: 1px solid rgba(31,35,40,0.15);
   background-color: #f6f8fa;
-  box-shadow: 0 1px 0 rgba(27,31,36,0.04);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04);
 }
 
 .c0:hover {
@@ -579,21 +579,21 @@ exports[`ButtonOutline renders correct disabled styles 1`] = `
 .c0:hover {
   color: #ffffff;
   background-color: #0969da;
-  border-color: rgba(27,31,36,0.15);
-  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
+  border-color: rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
 }
 
 .c0:active {
   color: #ffffff;
   background-color: hsla(212,92%,42%,1);
   box-shadow: inset 0 1px 0 rgba(0,33,85,0.2);
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c0:disabled {
   color: rgba(9,105,218,0.5);
   background-color: #f6f8fa;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 <button
@@ -626,9 +626,9 @@ exports[`ButtonPrimary renders consistently 1`] = `
   text-align: center;
   font-size: 14px;
   color: #ffffff;
-  border: 1px solid rgba(27,31,36,0.15);
-  background-color: #2da44e;
-  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
+  border: 1px solid rgba(31,35,40,0.15);
+  background-color: #1f883d;
+  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
 }
 
 .c0:hover {
@@ -649,19 +649,19 @@ exports[`ButtonPrimary renders consistently 1`] = `
 }
 
 .c0:hover {
-  background-color: #2c974b;
-  border-color: rgba(27,31,36,0.15);
+  background-color: #1a7f37;
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c0:active {
-  background-color: hsla(137,55%,36%,1);
+  background-color: hsla(137,66%,28%,1);
   box-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
 }
 
 .c0:disabled {
   color: rgba(255,255,255,0.8);
   background-color: #94d3a2;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 <button
@@ -693,9 +693,9 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
   text-align: center;
   font-size: 14px;
   color: #ffffff;
-  border: 1px solid rgba(27,31,36,0.15);
-  background-color: #2da44e;
-  box-shadow: 0 1px 0 rgba(27,31,36,0.1);
+  border: 1px solid rgba(31,35,40,0.15);
+  background-color: #1f883d;
+  box-shadow: 0 1px 0 rgba(31,35,40,0.1);
 }
 
 .c0:hover {
@@ -716,19 +716,19 @@ exports[`ButtonPrimary renders correct disabled styles 1`] = `
 }
 
 .c0:hover {
-  background-color: #2c974b;
-  border-color: rgba(27,31,36,0.15);
+  background-color: #1a7f37;
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c0:active {
-  background-color: hsla(137,55%,36%,1);
+  background-color: hsla(137,66%,28%,1);
   box-shadow: inset 0 1px 0 rgba(0,45,17,0.2);
 }
 
 .c0:disabled {
   color: rgba(255,255,255,0.8);
   background-color: #94d3a2;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 <button
@@ -742,7 +742,7 @@ exports[`ButtonTableList renders consistently 1`] = `
   display: inline-block;
   padding: 0;
   font-size: 14px;
-  color: #57606a;
+  color: #656d76;
   -webkit-text-decoration: none;
   text-decoration: none;
   white-space: nowrap;
diff --git a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
index 565a63a3c19..ec6ae363d57 100644
--- a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap
@@ -35,7 +35,7 @@ exports[`ChoiceFieldset renders a disabled list 1`] = `
 }
 
 .c2 {
-  color: #57606a;
+  color: #656d76;
   font-size: 16px;
   padding: 0;
 }
@@ -44,7 +44,7 @@ exports[`ChoiceFieldset renders a disabled list 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #57606a;
+  color: #656d76;
   cursor: not-allowed;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -83,7 +83,7 @@ exports[`ChoiceFieldset renders a disabled list 1`] = `
 
 .c6:checked:disabled {
   cursor: not-allowed;
-  border-color: #57606a;
+  border-color: #656d76;
 }
 
 .c6:focus:not(:disabled) {
@@ -261,7 +261,7 @@ exports[`ChoiceFieldset renders a fieldset with a description 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #24292f;
+  color: #1F2328;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -270,7 +270,7 @@ exports[`ChoiceFieldset renders a fieldset with a description 1`] = `
 
 .c3 {
   font-size: 14px;
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c7 {
@@ -305,7 +305,7 @@ exports[`ChoiceFieldset renders a fieldset with a description 1`] = `
 
 .c7:checked:disabled {
   cursor: not-allowed;
-  border-color: #57606a;
+  border-color: #656d76;
 }
 
 .c7:focus:not(:disabled) {
@@ -485,7 +485,7 @@ exports[`ChoiceFieldset renders a list of items with leading visuals and caption
 
 .c7 {
   margin-left: 8px;
-  color: #24292f;
+  color: #1F2328;
 }
 
 .c7 > * {
@@ -503,7 +503,7 @@ exports[`ChoiceFieldset renders a list of items with leading visuals and caption
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #24292f;
+  color: #1F2328;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -512,7 +512,7 @@ exports[`ChoiceFieldset renders a list of items with leading visuals and caption
 
 .c10 {
   font-size: 12px;
-  color: #57606a;
+  color: #656d76;
   display: block;
 }
 
@@ -548,7 +548,7 @@ exports[`ChoiceFieldset renders a list of items with leading visuals and caption
 
 .c6:checked:disabled {
   cursor: not-allowed;
-  border-color: #57606a;
+  border-color: #656d76;
 }
 
 .c6:focus:not(:disabled) {
@@ -794,7 +794,7 @@ exports[`ChoiceFieldset renders a list with selected items 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #24292f;
+  color: #1F2328;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -865,8 +865,8 @@ exports[`ChoiceFieldset renders a list with selected items 1`] = `
 
 .c6:checked:disabled {
   cursor: not-allowed;
-  background-color: #57606a;
-  border-color: #57606a;
+  background-color: #656d76;
+  border-color: #656d76;
   opacity: 1;
 }
 
@@ -1110,7 +1110,7 @@ exports[`ChoiceFieldset renders a required fieldset 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #24292f;
+  color: #1F2328;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -1149,7 +1149,7 @@ exports[`ChoiceFieldset renders a required fieldset 1`] = `
 
 .c7:checked:disabled {
   cursor: not-allowed;
-  border-color: #57606a;
+  border-color: #656d76;
 }
 
 .c7:focus:not(:disabled) {
@@ -1338,7 +1338,7 @@ exports[`ChoiceFieldset renders default 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #24292f;
+  color: #1F2328;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -1377,7 +1377,7 @@ exports[`ChoiceFieldset renders default 1`] = `
 
 .c6:checked:disabled {
   cursor: not-allowed;
-  border-color: #57606a;
+  border-color: #656d76;
 }
 
 .c6:focus:not(:disabled) {
@@ -1553,7 +1553,7 @@ exports[`ChoiceFieldset renders with a custom name and id passed 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #24292f;
+  color: #1F2328;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -1592,7 +1592,7 @@ exports[`ChoiceFieldset renders with a custom name and id passed 1`] = `
 
 .c6:checked:disabled {
   cursor: not-allowed;
-  border-color: #57606a;
+  border-color: #656d76;
 }
 
 .c6:focus:not(:disabled) {
@@ -1759,7 +1759,7 @@ exports[`ChoiceFieldset renders with a hidden legend 1`] = `
   font-weight: 600;
   font-size: 14px;
   display: block;
-  color: #24292f;
+  color: #1F2328;
   cursor: pointer;
   -webkit-align-self: flex-start;
   -ms-flex-item-align: start;
@@ -1811,7 +1811,7 @@ exports[`ChoiceFieldset renders with a hidden legend 1`] = `
 
 .c5:checked:disabled {
   cursor: not-allowed;
-  border-color: #57606a;
+  border-color: #656d76;
 }
 
 .c5:focus:not(:disabled) {
diff --git a/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap
index fa9552aff6c..eacd73368f9 100644
--- a/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/DropdownMenu.test.tsx.snap
@@ -25,8 +25,8 @@ exports[`DropdownMenu renders consistently 1`] = `
   font-size: 14px;
   color: #24292f;
   background-color: #f6f8fa;
-  border: 1px solid rgba(27,31,36,0.15);
-  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  border: 1px solid rgba(31,35,40,0.15);
+  box-shadow: 0 1px 0 rgba(31,35,40,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -48,7 +48,7 @@ exports[`DropdownMenu renders consistently 1`] = `
 
 .c0:hover {
   background-color: #f3f4f6;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c0:focus {
@@ -62,7 +62,7 @@ exports[`DropdownMenu renders consistently 1`] = `
 .c0:disabled {
   color: #8c959f;
   background-color: #f6f8fa;
-  border-color: rgba(27,31,36,0.15);
+  border-color: rgba(31,35,40,0.15);
 }
 
 .c1 {
diff --git a/src/__tests__/deprecated/__snapshots__/Label.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/Label.test.tsx.snap
index 95e650b2bb6..61f7235fb4f 100644
--- a/src/__tests__/deprecated/__snapshots__/Label.test.tsx.snap
+++ b/src/__tests__/deprecated/__snapshots__/Label.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`Label respects the "outline" prop 1`] = `
   padding: 0 8px;
   margin-top: -1px;
   margin-bottom: -1px;
-  color: #57606a;
+  color: #656d76;
   border: 1px solid #d0d7de;
   box-shadow: none;
   background-color: transparent;