@transferwise/components 0.0.0-experimental-7df8816 → 0.0.0-experimental-d2bc8ee

package/src/select/Select.css

@@ -1,11 +1,11 @@
 .np-select .np-dropdown-toggle {
   background-color: #ffffff;
   background-color: var(--color-background-screen);
-  border: 1px solid #c9cbce;
+  border: 1px solid #868685;
   border: 1px solid var(--color-interactive-secondary);
   border-radius: 10px;
   border-radius: var(--radius-small);
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   font-weight: 400;
   font-weight: var(--font-weight-regular);
@@ -27,17 +27,8 @@
   border-radius: var(--radius-small);
 }
 .has-error .np-select .np-dropdown-toggle {
-  border: 1px solid #e74848;
   border: 1px solid var(--color-interactive-negative);
 }
-.np-select .np-dropdown-toggle-navy {
-  --color-content-accent: #00b9ff;
-  --color-content-primary: #ffffff;
-  --color-content-secondary: #c9cbce;
-  --color-background-screen: #2e4369;
-  --color-interactive-secondary: #2e4369;
-  --color-interactive-secondary-hover: #2e4369;
-}
 .np-select .np-dropdown-toggle.np-btn-sm {
   padding-right: 32px;
   padding-right: var(--size-32);
@@ -101,19 +92,19 @@
   top: 27px;
 }
 .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading) {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):hover {
-  border-color: #b5b7ba;
+  border-color: #6c6c6b;
   border-color: var(--color-interactive-secondary-hover);
 }
 .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):focus {
-  border-color: #00a2dd;
+  border-color: #9fe870;
   border-color: var(--color-interactive-accent);
 }
 .np-theme-personal .np-select .btn:not(.disabled):not(:disabled):not(.btn-loading):focus {
-  border-color: #c9cbce;
+  border-color: #868685;
   border-color: var(--color-interactive-secondary);
 }
 .np-option-content {
@@ -164,7 +155,7 @@
   width: 420px;
 }
 .np-dropdown-menu .np-dropdown-item--focused {
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
   border-radius: 10px;
   border-radius: var(--radius-small);
@@ -183,7 +174,7 @@
   clear: both;
   border-radius: 10px;
   border-radius: var(--radius-small);
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   font-size: 0.875rem;
   font-size: var(--font-size-14);
@@ -218,32 +209,15 @@
 }
 .np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):hover,
 .np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):focus {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
 }
-.np-dropdown-menu > li:not(.active):not(.selected):not(:has(input)) > a:not([disabled]):not(.disabled):active {
-  color: #ffffff;
-  background-color: #37517e;
-}
-.np-dropdown-menu > .active > a,
-.np-dropdown-menu > .selected > a,
-.np-dropdown-menu > .active > a:hover,
-.np-dropdown-menu > .selected > a:hover,
-.np-dropdown-menu > .active > a:focus,
-.np-dropdown-menu > .selected > a:focus {
-  color: #ffffff;
-  background-color: #37517e;
-}
 .np-dropdown-menu > .active > a strong,
 .np-dropdown-menu > .selected > a strong {
   color: inherit;
 }
-.np-dropdown-menu > .active > a .np-text-body-default,
-.np-dropdown-menu > .selected > a .np-text-body-default {
-  color: #c9cbce;
-}
 .np-dropdown-menu .np-select-filter,
 .np-dropdown-menu .input-group-addon {
   border: 0;
@@ -252,13 +226,13 @@
   height: 1px;
   margin: 0;
   overflow: hidden;
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
 }
 .np-dropdown-menu .np-dropdown-header {
   padding: 8px 16px;
   padding: var(--size-8) var(--size-16);
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   display: block;
   font-size: 0.875rem;
@@ -289,7 +263,7 @@
 }
 .np-select .np-text-body-default,
 .np-dropdown-menu .np-text-body-default {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .np-select .tw-icon-search,
@@ -305,25 +279,28 @@
   background-color: initial;
   transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
   border: none;
-  box-shadow: inset 0 0 0 1px #c9cbce;
+  box-shadow: inset 0 0 0 1px #868685;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
 }
 .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):hover {
-  box-shadow: inset 0 0 0 2px #b5b7ba;
+  box-shadow: inset 0 0 0 2px #6c6c6b;
   box-shadow: inset 0 0 0 2px var(--color-interactive-secondary-hover);
 }
 .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus,
 .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-visible,
 .np-theme-personal .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-within {
+  box-shadow: inset 0 0 0 3px #163300;
   box-shadow: inset 0 0 0 3px var(--color-interactive-primary);
 }
 .np-theme-personal .has-error .np-select .np-dropdown-toggle,
 .np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):hover {
+  box-shadow: inset 0 0 0 2px #cb272f;
   box-shadow: inset 0 0 0 2px var(--color-sentiment-negative);
 }
 .np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus,
 .np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-visible,
 .np-theme-personal .has-error .np-select .np-dropdown-toggle:not(.disabled):not(:disabled):focus-within {
+  box-shadow: inset 0 0 0 3px #cb272f;
   box-shadow: inset 0 0 0 3px var(--color-sentiment-negative);
 }
 .np-theme-personal .np-dropdown-menu {
@@ -335,7 +312,9 @@
 .np-theme-personal .np-dropdown-menu .selected a:focus,
 .np-theme-personal .np-dropdown-menu .active a:hover,
 .np-theme-personal .np-dropdown-menu .selected a:hover {
+  color: #163300;
   color: var(--color-interactive-primary);
+  background-color: rgba(22,51,0,0.18039);
   background-color: var(--color-background-neutral-active);
 }
 .np-theme-personal .np-dropdown-menu .active a .body-2,
@@ -350,19 +329,24 @@
 .np-theme-personal .np-dropdown-menu .selected a:focus .np-text-body-default,
 .np-theme-personal .np-dropdown-menu .active a:hover .np-text-body-default,
 .np-theme-personal .np-dropdown-menu .selected a:hover .np-text-body-default {
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active {
+  color: #163300 !important;
   color: var(--color-interactive-primary) !important;
+  background-color: rgba(22,51,0,0.18039) !important;
   background-color: var(--color-background-neutral-active) !important;
 }
 .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .body-2,
 .np-theme-personal .np-dropdown-menu li:not(.active):not(.selected):not(:has(input)) a:not([disabled]):not(.disabled):active .np-text-body-default {
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .np-dropdown-menu .np-dropdown-item {
   outline: none;
 }
 .np-theme-personal .np-dropdown-menu .np-dropdown-item--focused {
+  box-shadow: inset 0 0 0 2px #163300;
   box-shadow: inset 0 0 0 2px var(--color-interactive-primary);
 }

package/src/select/Select.less

@@ -1,4 +1,3 @@
-@import (reference) "../../node_modules/@transferwise/neptune-css/dist/less/neptune-tokens.less";
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_border-radius.less";
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/core/_typography.less";
@@ -38,15 +37,6 @@
       border: 1px solid var(--color-interactive-negative);
     }
 
-    &-navy {
-      --color-content-accent: @color-navy-content-accent;
-      --color-content-primary: @color-navy-content-primary;
-      --color-content-secondary: @color-navy-content-secondary;
-      --color-background-screen: @color-navy-background-screen;
-      --color-interactive-secondary: @color-navy-background-screen;
-      --color-interactive-secondary-hover: @color-navy-background-screen;
-    }
-
     &.np-btn-sm {
       .padding(right, var(--size-32));
     }
@@ -197,29 +187,14 @@
       color: var(--color-content-primary);
       background-color: var(--color-background-neutral);
     }
-
-    &:active {
-      color: @color-navy-content-primary;
-      background-color: @color-navy-background-elevated;
-    }
   }
 
   > .active > a,
   > .selected > a {
-    &,
-    &:hover,
-    &:focus {
-      color: @color-navy-content-primary;
-      background-color: @color-navy-background-elevated;
-    }
 
     strong {
       color: inherit;
     }
-
-    .np-text-body-default {
-      color: @color-navy-content-secondary;
-    }
   }
 
   .np-select-filter,

package/src/select/Select.tsx

@@ -142,7 +142,6 @@ export default function Select({
   id,
   required,
   disabled,
-  inverse,
   dropdownWidth,
   size = 'md',
   block = true,
@@ -558,11 +557,7 @@ export default function Select({
         block={block}
         size={size}
         htmlType="button"
-        className={clsx(
-          s('np-dropdown-toggle'),
-          s('np-text-body-large'),
-          inverse ? s('np-dropdown-toggle-navy') : null,
-        )}
+        className={clsx(s('np-dropdown-toggle'), s('np-text-body-large'))}
         // reset Button's styles
         type={null}
         priority={null}

package/src/slidingPanel/SlidingPanel.css

@@ -88,18 +88,18 @@
   box-shadow: inset -1px 0 0 0 #e2e6e8;
 }
 .np-theme-personal .sliding-panel.sliding-panel--border-top {
-  box-shadow: inset 0 -1px 0 0 rgba(0,0,0,0.10196);
+  box-shadow: inset 0 -1px 0 0 rgba(14,15,12,0.12157);
   box-shadow: inset 0 -1px 0 0 var(--color-border-neutral);
 }
 .np-theme-personal .sliding-panel.sliding-panel--border-right {
-  box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.10196);
+  box-shadow: inset 1px 0 0 0 rgba(14,15,12,0.12157);
   box-shadow: inset 1px 0 0 0 var(--color-border-neutral);
 }
 .np-theme-personal .sliding-panel.sliding-panel--border-bottom {
-  box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.10196);
+  box-shadow: inset 0 1px 0 0 rgba(14,15,12,0.12157);
   box-shadow: inset 0 1px 0 0 var(--color-border-neutral);
 }
 .np-theme-personal .sliding-panel.sliding-panel--border-left {
-  box-shadow: inset -1px 0 0 0 rgba(0,0,0,0.10196);
+  box-shadow: inset -1px 0 0 0 rgba(14,15,12,0.12157);
   box-shadow: inset -1px 0 0 0 var(--color-border-neutral);
 }

package/src/snackbar/Snackbar.css

@@ -16,8 +16,10 @@
   right: 0;
 }
 .snackbar__text {
-  background: #37517e;
+  background: #121511;
+  background: var(--color-contrast-theme);
   color: #ffffff;
+  color: var(--color-contrast-overlay);
   display: inline-flex;
   border-radius: 2px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
@@ -40,10 +42,8 @@
 .np-theme-personal .snackbar__text {
   box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
   position: relative;
-  background: var(--color-contrast-theme);
   border-radius: 10px;
   border-radius: var(--radius-small);
-  color: var(--color-contrast-overlay);
 }
 .np-theme-personal .snackbar__text::after {
   display: block;
@@ -55,7 +55,7 @@
   left: 0;
   top: 0;
   z-index: -1;
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
 }
 .np-theme-personal--dark .snackbar__text,

package/src/snackbar/Snackbar.less

@@ -13,8 +13,8 @@
   z-index: @zindex-mobile-nav;
 
   &__text {
-    background: @color-navy-background-elevated;
-    color: @color-navy-content-primary;
+    background: var(--color-contrast-theme);
+    color: var(--color-contrast-overlay);
     display: inline-flex;
     border-radius: 2px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
@@ -31,9 +31,7 @@
     .np-theme-personal & {
       box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
       position: relative;
-      background: var(--color-contrast-theme);
       border-radius: var(--radius-small);
-      color: var(--color-contrast-overlay);
 
       &::after {
         display: block;

package/src/statusIcon/StatusIcon.css

@@ -1,38 +1,46 @@
 .status-circle .light {
+  color: #ffffff;
   color: var(--color-contrast-overlay);
 }
 .np-theme-personal--bright-green .status-circle .light {
+  color: #ffffff;
   color: var(--color-white);
 }
 .status-circle .dark {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .status-circle.warning,
 .status-circle.pending {
+  background-color: #ffd11a;
   background-color: var(--color-sentiment-warning);
 }
 .np-theme-personal .status-circle.warning .status-icon,
 .np-theme-personal .status-circle.pending .status-icon {
+  color: #121511;
   color: var(--color-dark);
 }
 .status-circle.negative,
 .status-circle.error {
+  background-color: #cb272f;
   background-color: var(--color-sentiment-negative);
 }
 .status-circle.negative .status-icon,
 .status-circle.error .status-icon {
+  color: #fbeaea;
   color: var(--color-sentiment-negative-secondary);
 }
 .status-circle.neutral {
-  background-color: #5d7079;
+  background-color: #454745;
   background-color: var(--color-content-secondary);
 }
 .status-circle.positive,
 .status-circle.success {
+  background-color: #054d28;
   background-color: var(--color-sentiment-positive);
 }
 .status-circle.positive .status-icon,
 .status-circle.success .status-icon {
+  color: #e2f6d5;
   color: var(--color-sentiment-positive-secondary);
 }

package/src/stepper/Stepper.css

@@ -14,18 +14,17 @@
 }
 .tw-stepper__step--active .tw-stepper__step-label {
   cursor: default;
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .tw-stepper__step--clickable .tw-stepper__step-label {
-  color: #0097c7;
   color: var(--color-content-accent);
   transition: color 0.15s ease-in-out;
   line-height: 0;
   border-radius: 2px;
 }
 .np-theme-personal .tw-stepper__step--clickable .tw-stepper__step-label {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   top: 0;
 }
@@ -43,7 +42,7 @@
 .tw-stepper__step-label {
   position: absolute;
   top: 0;
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   transition: color 0.6s ease-in-out;
   white-space: nowrap;
@@ -71,6 +70,7 @@
 }
 .progress-bar {
   -webkit-backface-visibility: hidden;
+  background-color: #163300;
   background-color: var(--color-interactive-primary);
   transition: width 0.6s ease-in-out;
   will-change: width;

package/src/summary/Summary.css

@@ -24,17 +24,20 @@
   margin-top: 0;
 }
 .np-summary__title .np-info .tw-icon {
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-summary__icon {
   position: relative;
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .np-summary__icon .np-summary-icon__done {
+  color: #054d28;
   color: var(--color-sentiment-positive);
 }
 .np-summary__icon .np-summary-icon__pending {
+  color: #ffd11a;
   color: var(--color-sentiment-warning);
 }
 .np-summary__icon :nth-child(2) {
@@ -57,7 +60,7 @@
   font-size: 0.875rem;
   font-size: var(--font-size-14);
   line-height: calc(20 / 14);
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   padding-right: calc(24px + 8px);
   padding-right: calc(var(--size-24) + var(--size-8));

package/src/switch/Switch.css

@@ -26,14 +26,14 @@
   color: #fff;
 }
 .np-switch--unchecked {
-  background: #c9cbce;
+  background: #868685;
   background: var(--color-interactive-secondary);
 }
 .np-switch--unchecked .switch--thumb {
   transform: translateX(0);
 }
 .np-switch--checked {
-  background: #00a2dd;
+  background: #9fe870;
   background: var(--color-interactive-accent);
 }
 .np-switch--checked .np-switch--thumb {
@@ -51,6 +51,7 @@
   padding: 1px 2px;
 }
 .np-theme-personal .np-switch--checked {
+  background: #163300;
   background: var(--color-interactive-primary);
 }
 .np-theme-personal .np-switch--thumb {

package/src/table/Table.css

@@ -31,7 +31,7 @@
 .np-table-container {
   padding: 8px;
   padding: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
   border-radius: inherit;
 }
@@ -39,9 +39,11 @@
   background-image: none;
 }
 .np-table-inner-container {
+  background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
   background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));
   background-position: left center, right center, left center, right center;
   background-repeat: no-repeat;
+  background-color: #ffffff;
   background-color: var(--color-contrast-overlay);
   background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
   background-attachment: local, local, scroll, scroll;
@@ -49,6 +51,7 @@
   border-radius: 10px;
 }
 .np-theme-personal--dark .np-table-inner-container {
+  background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, #ffffff, #ffffff), linear-gradient(to right, #000000, rgba(0, 0, 0, 0)), linear-gradient(to left, #000000, rgba(0, 0, 0, 0));
   background-image: linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, var(--color-contrast-overlay), var(--color-contrast-overlay)), linear-gradient(to right, #000000, rgba(0, 0, 0, 0)), linear-gradient(to left, #000000, rgba(0, 0, 0, 0));
 }
 .np-table-row:last-child .np-table-cell:first-child {
@@ -79,6 +82,7 @@
   width: 100%;
   top: 0;
   left: 0;
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-screen-hover);
 }
 .np-table-row--clickable .np-table-cell:first-child:before,
@@ -164,8 +168,9 @@
   padding-bottom: var(--size-8);
   padding-left: 8px;
   padding-left: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-table-header-content {
@@ -178,6 +183,7 @@
   letter-spacing: var(--letter-spacing-sm);
 }
 .np-table-header--error {
+  color: #cb272f;
   color: var(--color-sentiment-negative);
 }
 .np-table-header--action {
@@ -208,21 +214,23 @@
   margin-bottom: 4px;
   margin-bottom: var(--size-4);
   height: 1px;
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
   padding: 0;
 }
 .np-table-cell .np-text-body-default-bold {
   display: flex;
   align-items: center;
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   white-space: nowrap;
 }
 .np-table-cell .np-table-content--success {
+  color: #054d28;
   color: var(--color-sentiment-positive);
 }
 .np-table-cell .np-table-content--error {
+  color: #cb272f;
   color: var(--color-sentiment-negative);
 }
 .np-table-cell .tw-loader {
@@ -255,7 +263,7 @@
   flex-direction: column;
   font-size: 0.75rem;
   font-size: var(--font-size-12);
-  color: #768e9c;
+  color: #6a6c6a;
   color: var(--color-content-tertiary);
 }
 .np-table-content--reversed {

package/src/tabs/Tabs.css

@@ -8,23 +8,23 @@
   padding: 8px;
   padding: var(--size-8);
   margin-bottom: -2px;
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
   transition: color 0.15s ease-in-out;
 }
 .np-theme-personal .tabs__tab {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   font-weight: 400;
   font-weight: var(--font-weight-regular);
 }
 .tabs__tab--selected {
-  color: #0097c7;
   color: var(--color-content-accent);
 }
 .np-theme-personal .tabs__tab--selected {
+  color: #163300;
   color: var(--color-interactive-primary);
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
@@ -33,29 +33,29 @@
   border-radius: 2px;
 }
 .tabs__tab:not(.disabled):not(:disabled):focus-visible .tabs__tab__content {
-  color: #0084b3;
   color: var(--color-content-accent-hover);
 }
 .np-theme-personal .tabs__tab:not(.disabled):not(:disabled):focus-visible .tabs__tab__content {
+  color: #0d1f00;
   color: var(--color-interactive-primary-hover);
   outline: var(--ring-outline-color) solid var(--ring-outline-width);
   outline-offset: var(--ring-outline-offset);
 }
 @media (min-width: 992px) {
   .tabs__tab:not(.disabled):not(:disabled):hover {
-    color: #0084b3;
     color: var(--color-content-accent-hover);
   }
   .np-theme-personal .tabs__tab:not(.disabled):not(:disabled):hover {
+    color: #0d1f00;
     color: var(--color-interactive-primary-hover);
   }
 }
 @media (hover: hover) {
   .tabs__tab:not(.disabled):not(:disabled):hover {
-    color: #0084b3;
     color: var(--color-content-accent-hover);
   }
   .np-theme-personal .tabs__tab:not(.disabled):not(:disabled):hover {
+    color: #0d1f00;
     color: var(--color-interactive-primary-hover);
   }
 }
@@ -63,18 +63,19 @@
   list-style: none;
   padding: 0;
   margin: 0;
-  border-bottom: 1px solid rgba(0,0,0,0.10196);
+  border-bottom: 1px solid rgba(14,15,12,0.12157);
   border-bottom: 1px solid var(--color-border-neutral);
 }
 .tabs__line {
   height: 2px;
-  background-color: #00a2dd;
+  background-color: #9fe870;
   background-color: var(--color-interactive-accent);
   transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
   position: relative;
   bottom: -1px;
 }
 .np-theme-personal .tabs__line {
+  background-color: #163300;
   background-color: var(--color-interactive-primary);
 }
 .tabs__panel-container {
@@ -97,7 +98,7 @@
   opacity: 0;
 }
 .tabs--inverse .tabs__tab-list {
-  border-bottom-color: rgba(0,0,0,0.10196);
+  border-bottom-color: rgba(14,15,12,0.12157);
   border-bottom-color: var(--color-border-neutral);
 }
 .tabs--inverse .tabs__tab:not(.tabs__tab--selected) {