@transferwise/components 0.0.0-experimental-95dfe69 → 0.0.0-experimental-526a2be

package/src/styles/less/sequences.css

@@ -4,7 +4,9 @@
   margin-inline-start: 25px;
   margin-block-start: 0;
   margin-block-end: 0;
+  font-size: 0.875rem;
   font-size: var(--font-size-14);
+  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
 .sequence > li {
@@ -81,6 +83,7 @@
 @media (min-width: 840px) {
   .sequence {
     padding-inline-end: 24px;
+    font-size: 1rem;
     font-size: var(--font-size-16);
   }
 }
@@ -88,13 +91,16 @@
   display: block;
   line-height: 24px;
   position: relative;
+  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
 .sequence > li > a {
   display: block;
   -webkit-text-decoration: none;
   text-decoration: none;
+  font-weight: 400;
   font-weight: var(--font-weight-regular);
+  color: #0097c7;
   color: var(--color-content-accent);
   outline-offset: -1px;
 }
@@ -102,9 +108,11 @@
 .sequence > li > a:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
+  color: #0084b3;
   color: var(--color-content-accent-hover);
 }
 .sequence > li > a:active {
+  color: #0077a5;
   color: var(--color-content-accent-active);
 }
 .sequence > li p {
@@ -148,6 +156,7 @@
   border-color: inherit;
   outline: 0;
   border-width: 0;
+  background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   background-size: 200% 200%;
   background-position: 0 0%;
@@ -158,38 +167,47 @@
 .sequence > .active > a {
   -webkit-text-decoration: none;
   text-decoration: none;
+  color: #37517e;
   color: var(--color-content-primary);
+  font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
 .sequence > .active > a:hover,
 .sequence > .active > a:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .sequence > .active > a:active {
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .sequence > .active::before {
+  border-color: #0097c7;
   border-color: var(--color-content-accent);
 }
 .sequence > .active::after,
 .sequence > .active ~ li::after {
+  background-color: rgba(0,0,0,0.10196);
   background-color: var(--color-border-neutral);
   background-image: none;
 }
 .sequence > .active ~ li::before {
+  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
 .sequence a {
   -webkit-text-decoration: none;
   text-decoration: none;
+  font-weight: 400;
   font-weight: var(--font-weight-regular);
 }
 .sequence-top > li:first-child::after {
   inset-block-start: 0;
 }
 .sequence-inverse > li {
+  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
 }
 .sequence-inverse > li > a {
@@ -204,6 +222,7 @@
 .sequence-inverse > .active .small,
 .sequence-inverse > .active .body-2,
 .sequence-inverse > .active .np-text-body-default {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .sequence-inverse > .active::after,
@@ -215,16 +234,21 @@
   border-color: #37517e;
 }
 .sequence-info > li {
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .sequence-info > li::after {
+  background-image: linear-gradient(#00a2dd 0, #00a2dd 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-accent) 0, var(--color-interactive-accent) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-info.sequence-inverse > li::after {
+  background-image: linear-gradient(#00a2dd 0, #00a2dd 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-accent) 0, var(--color-interactive-accent) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
 }
 .sequence-info > .active::before {
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
+  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
 }
 @keyframes sequence-pip-info {
@@ -232,6 +256,7 @@
     border-color: rgba(255,255,255,0.10196);
   }
   to {
+    border-color: #00a2dd;
     border-color: var(--color-interactive-accent);
   }
 }
@@ -239,6 +264,7 @@
   border-color: #37517e;
 }
 .sequence-primary > li::after {
+  background-image: linear-gradient(#37517e 0, #37517e 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(#37517e 0, #37517e 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-primary.sequence-inverse > li::after {
@@ -257,16 +283,21 @@
   }
 }
 .sequence-success > li {
+  border-color: #2ead4b;
   border-color: var(--color-interactive-positive);
 }
 .sequence-success > li::after {
+  background-image: linear-gradient(#2ead4b 0, #2ead4b 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-positive) 0, var(--color-interactive-positive) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-success.sequence-inverse > li::after {
+  background-image: linear-gradient(#2ead4b 0, #2ead4b 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-positive) 0, var(--color-interactive-positive) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
 }
 .sequence-success > .active::before {
+  border-color: #2ead4b;
   border-color: var(--color-interactive-positive);
+  background-color: #2ead4b;
   background-color: var(--color-interactive-positive);
 }
 @keyframes sequence-pip-success {
@@ -274,20 +305,26 @@
     border-color: rgba(255,255,255,0.10196);
   }
   to {
+    border-color: #2ead4b;
     border-color: var(--color-interactive-positive);
   }
 }
 .sequence-warning > li {
+  border-color: #df8700;
   border-color: var(--color-interactive-warning);
 }
 .sequence-warning > li::after {
+  background-image: linear-gradient(#df8700 0, #df8700 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-warning) 0, var(--color-interactive-warning) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-warning.sequence-inverse > li::after {
+  background-image: linear-gradient(#df8700 0, #df8700 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-warning) 0, var(--color-interactive-warning) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
 }
 .sequence-warning > .active::before {
+  border-color: #df8700;
   border-color: var(--color-interactive-warning);
+  background-color: #df8700;
   background-color: var(--color-interactive-warning);
 }
 @keyframes sequence-pip-warning {
@@ -295,20 +332,26 @@
     border-color: rgba(255,255,255,0.10196);
   }
   to {
+    border-color: #df8700;
     border-color: var(--color-interactive-warning);
   }
 }
 .sequence-danger > li {
+  border-color: #e74848;
   border-color: var(--color-interactive-negative);
 }
 .sequence-danger > li::after {
+  background-image: linear-gradient(#e74848 0, #e74848 50%, rgba(0,0,0,0.10196) 50%, rgba(0,0,0,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-negative) 0, var(--color-interactive-negative) 50%, var(--color-border-neutral) 50%, var(--color-border-neutral) 100%);
 }
 .sequence-danger.sequence-inverse > li::after {
+  background-image: linear-gradient(#e74848 0, #e74848 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
   background-image: linear-gradient(var(--color-interactive-negative) 0, var(--color-interactive-negative) 50%, rgba(255,255,255,0.10196) 50%, rgba(255,255,255,0.10196) 100%);
 }
 .sequence-danger > .active::before {
+  border-color: #e74848;
   border-color: var(--color-interactive-negative);
+  background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }
 @keyframes sequence-pip-danger {
@@ -316,17 +359,20 @@
     border-color: rgba(255,255,255,0.10196);
   }
   to {
+    border-color: #e74848;
     border-color: var(--color-interactive-negative);
   }
 }
 .sequence-hollow > li::before {
   border-width: 2px;
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .sequence-hollow > .active::before {
   border-width: 4px;
 }
 .sequence-hollow > .active ~ li::before {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .sequence-hollow.sequence-inverse > li::before {
@@ -336,6 +382,7 @@
   position: absolute;
   display: block;
   margin-inline-start: -35px;
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-radius: 50%;
   inline-size: 24px;
@@ -346,11 +393,14 @@
   text-decoration: none !important;
   border-width: 1px;
   border-style: solid;
+  border-color: rgba(0,0,0,0.10196);
   border-color: var(--color-border-neutral);
   inset-block-start: 4px;
+  font-size: 0.75rem;
   font-size: var(--font-size-12);
 }
 .sequence-icon .icon {
+  font-size: 1rem;
   font-size: var(--font-size-16);
   line-height: 23px;
 }
@@ -359,12 +409,16 @@
   border-color: #ffffff;
 }
 .sequence a .sequence-icon {
+  color: #0097c7;
   color: var(--color-content-accent);
+  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
 }
 .sequence a:hover .sequence-icon,
 .sequence a:focus .sequence-icon {
+  color: #0084b3;
   color: var(--color-content-accent-hover);
+  border-color: #008fc9;
   border-color: var(--color-interactive-accent-hover);
 }
 .sequence-table {
@@ -379,7 +433,9 @@
 .sequence-table > li > .sequence-table-td,
 .sequence-table > li > .sequence-table-th {
   display: table-cell;
+  padding-block: 4px;
   padding-block: var(--size-4);
+  padding-inline: 12px;
   padding-inline: var(--size-12);
   padding-inline-start: 0;
 }
@@ -388,6 +444,7 @@
   padding-inline-end: 0;
 }
 .sequence-table > li > .sequence-table-th {
+  color: #37517e;
   color: var(--color-content-primary);
   white-space: nowrap;
 }
@@ -435,6 +492,7 @@
 }
 .sequence-inverse > li > .sequence-table-th,
 .sequence-inverse > li > .sequence-table-td {
+  color: #5d7079;
   color: var(--color-content-secondary);
 }
 .sequence-icon-md {
@@ -442,6 +500,7 @@
   block-size: 32px;
   line-height: 30px;
   margin-block-start: -6px;
+  font-size: 0.875rem;
   font-size: var(--font-size-14);
 }
 .sequence-icon-lg {
@@ -449,6 +508,7 @@
   block-size: 40px;
   line-height: 38px;
   margin-block-start: -6px;
+  font-size: 1rem;
   font-size: var(--font-size-16);
 }
 .sequence-icon-lg .icon {

package/src/styles/less/table.css

@@ -1,4 +1,5 @@
 table {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-collapse: separate;
 }
@@ -11,6 +12,7 @@ table th[class*="col-"] {
 caption {
   padding-block-start: 16px;
   padding-block-end: 16px;
+  color: #5d7079;
   color: var(--color-content-secondary);
   text-align: start;
 }
@@ -20,6 +22,7 @@ th {
 .table {
   inline-size: 100%;
   max-inline-size: 100%;
+  margin-block-end: 24px;
   margin-block-end: var(--size-24);
 }
 .table > thead > tr > th,
@@ -28,10 +31,15 @@ th {
 .table > thead > tr > td,
 .table > tbody > tr > td,
 .table > tfoot > tr > td {
+  padding-block: 24px;
   padding-block: var(--size-24);
+  padding-inline: 16px;
   padding-inline: var(--size-16);
+  line-height: 1.5;
   line-height: var(--line-height-body);
   vertical-align: top;
+  border-block-start: 1px solid rgba(0,0,0,0.10196);
+  border-block-start: 1px solid #0000001a;
   border-block-start: 1px solid var(--color-border-neutral);
   border-block-end: 0;
   transition: border ease 0.15s;
@@ -39,10 +47,15 @@ th {
 .table > .thead > ol > li,
 .table > .tbody > dl > dd,
 .table > .tfoot > ol > li {
+  padding-block: 24px;
   padding-block: var(--size-24);
+  padding-inline: 16px;
   padding-inline: var(--size-16);
+  line-height: 1.5;
   line-height: var(--line-height-body);
   vertical-align: top;
+  border-block-start: 1px solid rgba(0,0,0,0.10196);
+  border-block-start: 1px solid #0000001a;
   border-block-start: 1px solid var(--color-border-neutral);
   border-block-end: 0;
   transition: border ease 0.15s;
@@ -72,24 +85,31 @@ th {
   border-block-start: 0;
 }
 .table > tbody + tbody {
+  border-block-start: 1px solid rgba(0,0,0,0.10196);
+  border-block-start: 1px solid #0000001a;
   border-block-start: 1px solid var(--color-border-neutral);
 }
 .table .table {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .table > thead,
 .table > tfoot,
 .table > .thead,
 .table > .tfoot {
+  font-size: 0.875rem;
   font-size: var(--font-size-14);
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .table > tbody,
 .table > .tbody {
+  font-size: 0.875rem;
   font-size: var(--font-size-14);
 }
 .table > tbody > tr > th,
 .table > .tbody > dl > .th {
+  color: #37517e;
   color: var(--color-content-primary);
 }
 .table-condensed > thead > tr > th,
@@ -98,18 +118,22 @@ th {
 .table-condensed > thead > tr > td,
 .table-condensed > tbody > tr > td,
 .table-condensed > tfoot > tr > td {
+  padding: 8px;
   padding: var(--size-8);
 }
 .table-condensed > .thead > ol > li,
 .table-condensed > .tbody > dl > dd {
+  padding: 8px;
   padding: var(--size-8);
 }
 .table-bordered {
+  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-neutral);
   border-radius: 3px;
 }
 .table-bordered thead,
 .table-bordered .thead {
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 @media (max-width: 839.98px) {
@@ -118,10 +142,12 @@ th {
   }
 }
 .table-striped > tbody > tr:nth-of-type(odd) {
+  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 @media (min-width: 840px) {
   .table-striped > .tbody > dl:nth-of-type(odd) {
+    background-color: rgba(134,167,189,0.10196);
     background-color: var(--color-background-neutral);
   }
 }
@@ -163,6 +189,7 @@ table col[class*="col-"] {
 .table > thead > tr.active > th,
 .table > tbody > tr.active > th,
 .table > tfoot > tr.active > th {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .table-hover > tbody > tr > td.active:hover,
@@ -170,6 +197,7 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.active:hover > td,
 .table-hover > tbody > tr:hover > .active,
 .table-hover > tbody > tr.active:hover > th {
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .table > thead > tr > td.success,
@@ -184,6 +212,7 @@ table col[class*="col-"] {
 .table > thead > tr.success > th,
 .table > tbody > tr.success > th,
 .table > tfoot > tr.success > th {
+  background-color: rgba(54,199,151,0.10196);
   background-color: var(--color-background-positive);
 }
 .table-hover > tbody > tr > td.success:hover,
@@ -191,6 +220,7 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.success:hover > td,
 .table-hover > tbody > tr:hover > .success,
 .table-hover > tbody > tr.success:hover > th {
+  background-color: rgba(54,199,151,0.10196);
   background-color: var(--color-background-positive);
 }
 .table > thead > tr > td.info,
@@ -205,6 +235,7 @@ table col[class*="col-"] {
 .table > thead > tr.info > th,
 .table > tbody > tr.info > th,
 .table > tfoot > tr.info > th {
+  background-color: rgba(56,200,255,0.10196);
   background-color: var(--color-background-accent);
 }
 .table-hover > tbody > tr > td.info:hover,
@@ -212,6 +243,7 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.info:hover > td,
 .table-hover > tbody > tr:hover > .info,
 .table-hover > tbody > tr.info:hover > th {
+  background-color: rgba(56,200,255,0.10196);
   background-color: var(--color-background-accent);
 }
 .table > thead > tr > td.warning,
@@ -226,6 +258,7 @@ table col[class*="col-"] {
 .table > thead > tr.warning > th,
 .table > tbody > tr.warning > th,
 .table > tfoot > tr.warning > th {
+  background-color: rgba(255,172,0,0.10196);
   background-color: var(--color-background-warning);
 }
 .table-hover > tbody > tr > td.warning:hover,
@@ -233,6 +266,7 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.warning:hover > td,
 .table-hover > tbody > tr:hover > .warning,
 .table-hover > tbody > tr.warning:hover > th {
+  background-color: rgba(255,172,0,0.10196);
   background-color: var(--color-background-warning);
 }
 .table > thead > tr > td.danger,
@@ -247,6 +281,7 @@ table col[class*="col-"] {
 .table > thead > tr.danger > th,
 .table > tbody > tr.danger > th,
 .table > tfoot > tr.danger > th {
+  background-color: rgba(255,135,135,0.10196);
   background-color: var(--color-background-negative);
 }
 .table-hover > tbody > tr > td.danger:hover,
@@ -254,6 +289,7 @@ table col[class*="col-"] {
 .table-hover > tbody > tr.danger:hover > td,
 .table-hover > tbody > tr:hover > .danger,
 .table-hover > tbody > tr.danger:hover > th {
+  background-color: rgba(255,135,135,0.10196);
   background-color: var(--color-background-negative);
 }
 .table > thead > tr > td.default,
@@ -287,6 +323,7 @@ table col[class*="col-"] {
 @media screen and (max-width: 839.98px) {
   .table-responsive {
     inline-size: 100%;
+    margin-block-end: 24px;
     margin-block-end: var(--size-24);
     overflow-y: hidden;
     -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -312,6 +349,7 @@ table col[class*="col-"] {
     border-block-end: 0;
   }
   .table-responsive.table-bordered {
+    border: 1px solid rgba(134,167,189,0.10196);
     border: 1px solid var(--color-background-neutral);
     border-radius: 3px;
   }
@@ -328,7 +366,9 @@ table col[class*="col-"] {
   }
   .table > .thead > ol > li {
     display: table-cell;
+    font-weight: 700;
     font-weight: var(--font-weight-bold);
+    color: #37517e;
     color: var(--color-content-primary);
   }
   .table > .tbody {
@@ -342,7 +382,9 @@ table col[class*="col-"] {
   }
   .table > .tbody > dl > dd {
     display: table-cell;
+    font-size: 0.875rem;
     font-size: var(--font-size-14);
+    color: #5d7079;
     color: var(--color-content-secondary);
   }
   .table > .tfoot {
@@ -354,10 +396,14 @@ table col[class*="col-"] {
     display: none;
   }
   .table > .tbody > dl {
+    border: 1px #c9cbce solid;
     border: 1px var(--color-interactive-secondary) solid;
     border-radius: 3px;
+    margin-block-end: 24px;
     margin-block-end: var(--size-24);
+    padding-block: 24px 0;
     padding-block: var(--size-24) 0;
+    padding-inline: 1.5;
     padding-inline: var(--line-height-body);
   }
   .table > .tbody > dl > dd {
@@ -396,6 +442,7 @@ table col[class*="col-"] {
   color: #ffffff;
 }
 .table-calendar > tbody > tr > td > a:not([disabled]):hover {
+  background-color: #0097c7;
   background-color: var(--color-content-accent);
   color: #fff;
 }

package/src/styles/less/tick.css

@@ -8,6 +8,7 @@
 .tw-checkbox-check::after {
   content: "";
   position: absolute;
+  background: #ffffff;
   background: var(--color-background-screen);
   transform: translateX(-1.5px) rotate(-45deg);
   transform-origin: left bottom;
@@ -19,6 +20,7 @@
 }
 .tw-checkbox-check .has-error::before,
 .tw-checkbox-check .has-error::after {
+  background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }
 .tw-checkbox-check::before {

package/src/styles/less/tooltip.css

@@ -2,11 +2,13 @@
   position: absolute;
   z-index: 1070;
   display: block;
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   font-style: normal;
   font-weight: normal;
   letter-spacing: normal;
   line-break: auto;
+  line-height: 24px;
   line-height: var(--size-24);
   text-align: start;
   -webkit-text-decoration: none;
@@ -43,17 +45,23 @@
   padding-inline: 5px;
 }
 .tooltip-inner {
+  font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: 155%;
   letter-spacing: -0.006em;
+  font-weight: 400;
   font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   max-inline-size: 200px;
   min-inline-size: 120px;
+  padding-block: 16px;
   padding-block: var(--size-16);
+  padding-inline: 16px;
   padding-inline: var(--size-16);
+  color: #37517e;
   color: var(--color-content-primary);
   text-align: center;
+  background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-radius: 3px;
   box-shadow: 0 1px 28px 0 rgba(34, 48, 73, 0.2);
@@ -104,6 +112,7 @@
   margin-inline-start: -5px;
   border-block-width: 5px 0;
   border-inline-width: 5px;
+  border-block-start-color: #ffffff;
   border-block-start-color: var(--color-background-screen);
 }
 .tooltip.right .tooltip-arrow {
@@ -112,6 +121,7 @@
   margin-block-start: -5px;
   border-block-width: 5px 5px;
   border-inline-width: 0 5px;
+  border-inline-end-color: #ffffff;
   border-inline-end-color: var(--color-background-screen);
 }
 .tooltip.left .tooltip-arrow {
@@ -120,6 +130,7 @@
   margin-block-start: -5px;
   border-block-width: 5px 5px;
   border-inline-width: 5px 0;
+  border-inline-start-color: #ffffff;
   border-inline-start-color: var(--color-background-screen);
 }
 .tooltip.bottom .tooltip-arrow {
@@ -128,6 +139,7 @@
   margin-inline-start: -5px;
   border-block-width: 0 5px;
   border-inline-width: 5px;
+  border-block-end-color: #ffffff;
   border-block-end-color: var(--color-background-screen);
 }
 [data-toggle="tooltip"]:not(.btn) {
@@ -135,6 +147,7 @@
 }
 [data-toggle="tooltip"]:not(.btn):hover,
 [data-toggle="tooltip"]:not(.btn):focus {
+  color: #0084b3 !important;
   color: var(--color-content-accent-hover) !important;
   outline: 0;
 }