diff --git a/src/Tooltip/Tooltip.test.tsx b/src/Tooltip/__tests__/Tooltip.test.tsx
similarity index 97%
rename from src/Tooltip/Tooltip.test.tsx
rename to src/Tooltip/__tests__/Tooltip.test.tsx
index f68116f941b..f7eebff1c3f 100644
--- a/src/Tooltip/Tooltip.test.tsx
+++ b/src/Tooltip/__tests__/Tooltip.test.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
-import {Tooltip, TooltipProps} from '.'
-import {checkStoriesForAxeViolations, behavesAsComponent, checkExports} from '../utils/testing'
+import {Tooltip, TooltipProps} from '..'
+import {checkStoriesForAxeViolations, behavesAsComponent, checkExports} from '../../utils/testing'
 import {render as HTMLRender, act} from '@testing-library/react'
-import {Button} from '../Button'
+import {Button} from '../../Button'
 import {SearchIcon} from '@primer/octicons-react'
 import userEvent from '@testing-library/user-event'
 
diff --git a/src/__tests__/Tooltip.types.test.tsx b/src/Tooltip/__tests__/Tooltip.types.test.tsx
similarity index 87%
rename from src/__tests__/Tooltip.types.test.tsx
rename to src/Tooltip/__tests__/Tooltip.types.test.tsx
index 7714238ff20..65d27666df2 100644
--- a/src/__tests__/Tooltip.types.test.tsx
+++ b/src/Tooltip/__tests__/Tooltip.types.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Tooltip} from '../Tooltip'
+import {Tooltip} from '..'
 
 export function shouldAcceptCallWithNoProps() {
   return <Tooltip />
diff --git a/src/Tooltip/__snapshots__/Tooltip.test.tsx.snap b/src/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap
similarity index 97%
rename from src/Tooltip/__snapshots__/Tooltip.test.tsx.snap
rename to src/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap
index f8679eb0a92..b44433c12a1 100644
--- a/src/Tooltip/__snapshots__/Tooltip.test.tsx.snap
+++ b/src/Tooltip/__tests__/__snapshots__/Tooltip.test.tsx.snap
@@ -16,7 +16,7 @@ exports[`Tooltip 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;
@@ -55,7 +55,7 @@ exports[`Tooltip 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) {
@@ -201,17 +201,17 @@ exports[`Tooltip 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);
 }
 
 .c3 {
@@ -489,7 +489,7 @@ exports[`Tooltip renders consistently 1`] = `
   onMouseLeave={[Function]}
 >
   <button
-    aria-labelledby="react-aria7769040419-1"
+    aria-labelledby="react-aria5083538615-1"
     className="c1"
     data-block={null}
     data-no-visuals={true}
@@ -534,7 +534,7 @@ exports[`Tooltip renders consistently 1`] = `
     aria-hidden={true}
     className="c3"
     data-direction="n"
-    id="react-aria7769040419-1"
+    id="react-aria5083538615-1"
   >
     label type tooltip
   </div>
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index 76832576457..4560efaa76f 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;
@@ -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;
@@ -123,7 +123,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;
@@ -197,7 +197,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;
@@ -250,7 +250,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;
@@ -316,7 +316,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;
@@ -368,7 +368,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;
@@ -435,7 +435,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;
@@ -488,7 +488,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;
@@ -561,7 +561,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;
@@ -614,7 +614,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;
@@ -686,7 +686,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;
@@ -740,7 +740,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;
@@ -806,7 +806,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;
@@ -886,7 +886,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;
@@ -953,7 +953,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;
@@ -1006,7 +1006,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;
@@ -1072,7 +1072,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;
@@ -1126,7 +1126,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;
@@ -1200,7 +1200,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;
@@ -1412,7 +1412,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 .c4 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
-  color: #57606a;
+  color: #656d76;
 }
 
 .c4 [data-component="text"] {
@@ -1427,7 +1427,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 
 .c4 [data-component="trailingAction"] {
   margin-right: -4px;
-  color: #57606a;
+  color: #656d76;
 }
 
 .c4 [data-component="buttonContent"] {
@@ -1463,7 +1463,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
 }
 
 .c4[data-component="IconButton"][data-no-visuals] {
-  color: #57606a;
+  color: #656d76;
 }
 
 .c4[data-no-visuals] {
@@ -1490,7 +1490,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;
@@ -1550,7 +1550,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;
@@ -1890,7 +1890,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
     >
       <button
         aria-label="iconLabel"
-        aria-labelledby="react-aria1299193909-2"
+        aria-labelledby="react-aria9933862465-2"
         className="c4"
         data-block={null}
         data-component="IconButton"
@@ -1929,7 +1929,7 @@ exports[`TextInput renders trailingAction icon button 1`] = `
         aria-hidden={true}
         className="c5"
         data-direction="n"
-        id="react-aria1299193909-2"
+        id="react-aria9933862465-2"
       >
         iconLabel
       </div>
@@ -2102,7 +2102,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 .c3 [data-component="leadingVisual"] {
   grid-area: leadingVisual;
-  color: #57606a;
+  color: #656d76;
 }
 
 .c3 [data-component="text"] {
@@ -2117,7 +2117,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 
 .c3 [data-component="trailingAction"] {
   margin-right: -4px;
-  color: #57606a;
+  color: #656d76;
 }
 
 .c3 [data-component="buttonContent"] {
@@ -2153,7 +2153,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c3[data-component="IconButton"][data-no-visuals] {
-  color: #57606a;
+  color: #656d76;
 }
 
 .c3[data-no-visuals] {
@@ -2180,7 +2180,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;
@@ -2240,7 +2240,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;
@@ -2501,7 +2501,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"] {
@@ -2516,7 +2516,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"] {
@@ -2552,7 +2552,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] {
@@ -2579,7 +2579,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;
@@ -2639,7 +2639,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;
@@ -2979,7 +2979,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
       onMouseLeave={[Function]}
     >
       <button
-        aria-labelledby="react-aria1299193909-1"
+        aria-labelledby="react-aria9933862465-1"
         className="c4"
         data-block={null}
         data-no-visuals={true}
@@ -3004,7 +3004,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
         aria-hidden={true}
         className="c6"
         data-direction="n"
-        id="react-aria1299193909-1"
+        id="react-aria9933862465-1"
       >
         Clear input
       </div>
@@ -3017,7 +3017,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;
@@ -3083,7 +3083,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;
@@ -3163,7 +3163,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;
@@ -3183,7 +3183,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,
@@ -3230,7 +3230,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;
@@ -3304,7 +3304,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;
@@ -3370,7 +3370,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;
@@ -3477,7 +3477,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;
@@ -3543,7 +3543,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;
@@ -3682,7 +3682,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;
@@ -3748,7 +3748,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;
@@ -3864,7 +3864,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;
@@ -3930,7 +3930,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;
@@ -4115,7 +4115,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;
@@ -4181,7 +4181,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;
@@ -4366,7 +4366,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;
@@ -4432,7 +4432,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;
@@ -4611,7 +4611,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;
@@ -4677,7 +4677,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;
@@ -4824,7 +4824,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;
@@ -4890,7 +4890,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;
@@ -5069,7 +5069,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;
@@ -5135,7 +5135,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;
@@ -5291,7 +5291,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;
@@ -5365,7 +5365,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;
@@ -5591,7 +5591,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;
@@ -5657,7 +5657,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;
@@ -5882,7 +5882,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;
@@ -5954,7 +5954,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;
@@ -6146,7 +6146,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;
@@ -6212,7 +6212,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 71e1e484452..326d560ea91 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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -18378,7 +18378,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;
@@ -18451,7 +18451,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;