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

package/build/styles/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/build/styles/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/build/styles/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/build/styles/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/build/styles/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) {

package/build/styles/tile/Tile.css

@@ -5,28 +5,31 @@
   width: 100%;
 }
 .np-theme-personal .np-tile {
-  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 .np-tile .tw-avatar .tw-avatar__content {
+  background-color: #ffffff;
   background-color: var(--color-contrast);
 }
 .np-tile.decision {
   margin-top: 0;
-  border: 1px solid rgba(0,0,0,0.10196);
+  border: 1px solid rgba(14,15,12,0.12157);
   border: 1px solid var(--color-border-neutral);
 }
 .np-theme-personal .np-tile.decision {
   border: none;
 }
 .np-theme-personal .np-tile.decision:hover {
+  background-color: rgba(22,51,0,0.12941);
   background-color: var(--color-background-neutral-hover);
 }
 .np-theme-personal .np-tile.decision:active {
+  background-color: rgba(22,51,0,0.18039);
   background-color: var(--color-background-neutral-active);
 }
 .np-theme-personal .np-tile.decision .np-text-body-default {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .np-tile.np-decision__tile--fixed-width {
@@ -36,7 +39,7 @@
   width: 100%;
 }
 .np-tile__description {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   margin-top: 12px;
   margin-top: var(--size-12);
@@ -57,7 +60,7 @@
   background-color: var(--color-background-screen);
 }
 .np-tile__description {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   font-weight: 400;
   font-weight: var(--font-weight-regular);

package/build/styles/typeahead/Typeahead.css

@@ -162,10 +162,11 @@
   }
 }
 .np-theme-personal .typeahead .input-group:not(.disabled):not(:disabled):not(.input-group--has-error):focus-within .tw-icon-search {
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .typeahead .tw-icon-search {
-  color: #c9cbce;
+  color: #868685;
   color: var(--color-interactive-secondary);
 }
 .np-theme-personal .typeahead .np-chip {

package/build/styles/typeahead/typeaheadOption/TypeaheadOption.css

@@ -1,8 +1,5 @@
-.typeahead__option.tw-dropdown-item .dropdown-item:active strong {
-  color: #ffffff;
-}
 .typeahead__option.tw-dropdown-item--focused {
-  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);
   border-radius: 10px;
   border-radius: var(--radius-small);

package/build/styles/upload/Upload.css

@@ -22,7 +22,7 @@
 .upload-error-message {
   margin-top: 24px;
   margin-top: var(--padding-medium);
-  border-top: 1px solid rgba(0,0,0,0.10196);
+  border-top: 1px solid rgba(14,15,12,0.12157);
   border-top: 1px solid var(--color-border-neutral);
   text-align: start;
 }

package/build/styles/uploadInput/uploadButton/UploadButton.css

@@ -13,6 +13,7 @@
   cursor: pointer;
 }
 .np-upload-input__upload-button .np-upload-input__title {
+  color: #163300;
   color: var(--color-content-link);
   -webkit-text-decoration: underline;
   text-decoration: underline;
@@ -25,6 +26,7 @@
 .np-upload-input__upload-button .np-upload-input__icon {
   padding-right: 16px;
   padding-right: var(--size-16);
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-upload-input__upload-button.is-dropping .np-upload-input__icon,
@@ -59,7 +61,7 @@
   display: block;
   position: absolute;
   height: 1px;
-  background-color: rgba(0,0,0,0.10196);
+  background-color: rgba(14,15,12,0.12157);
   background-color: var(--color-border-neutral);
   content: " ";
   left: 16px;
@@ -76,7 +78,7 @@
 .np-upload-input__upload-button--enabled.is-dropping,
 .np-upload-input__upload-button--enabled:hover,
 .np-upload-input__upload-button--enabled:active {
-  background: rgba(134,167,189,0.10196);
+  background: rgba(22,51,0,0.07843);
   background: var(--color-background-neutral);
 }
 .np-upload-input__upload-button--enabled.is-dropping:before,

package/build/styles/uploadInput/uploadItem/UploadItem.css

@@ -24,7 +24,7 @@
   width: calc(100% - 2 * 16px);
   width: calc(100% - 2 * var(--size-16));
   top: 0;
-  background: rgba(0,0,0,0.10196);
+  background: rgba(14,15,12,0.12157);
   background: var(--color-border-neutral);
 }
 .np-upload-input__item .np-upload-input__item-content {
@@ -43,7 +43,7 @@
   margin: 0;
   -moz-text-align-last: left;
        text-align-last: left;
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .np-upload-input__item .np-upload-input__title + .np-upload-input__text {
@@ -87,8 +87,9 @@
   padding: 0 var(--size-4);
   border-radius: 50%;
   border: 0;
-  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);
   transition: color, background-color 0.15s ease-in-out;
   outline-offset: 0;
@@ -107,10 +108,13 @@
   right: var(--clickAreaTopRightOffset);
 }
 .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:hover {
+  background-color: #cb272f;
   background-color: var(--color-sentiment-negative);
+  color: #ffffff !important;
   color: var(--color-contrast-overlay) !important;
 }
 .np-upload-input__item .np-upload-input__item-action .np-upload-input__item-button:active {
+  background-color: rgba(22,51,0,0.18039);
   background-color: var(--color-background-neutral-active);
 }
 .np-upload-input__item.is-interactive {
@@ -136,7 +140,7 @@
 }
 .np-upload-input__item.is-interactive .np-upload-input__item-link:hover,
 .np-upload-input__item.is-interactive .np-upload-input__item-link:active {
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-neutral);
 }
 .np-upload-input__item.is-interactive:first-child .np-upload-input__item-link {

package/build/types/mocks.d.ts

@@ -5,5 +5,6 @@ interface GlobalMockParams {
 }
 export declare function mockMatchMedia({ fn, stubGlobal }: GlobalMockParams): void;
 export declare function mockResizeObserver({ fn, stubGlobal }: GlobalMockParams): void;
+export declare function mockRequestAnimationFrame(): void;
 export {};
 //# sourceMappingURL=mocks.d.ts.map

package/build/types/mocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mocks.d.ts","sourceRoot":"","sources":["../../src/mocks.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAE9D,UAAU,gBAAgB;IACxB,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,EAAE,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAWD,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAkBtF;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAW1F"}
+{"version":3,"file":"mocks.d.ts","sourceRoot":"","sources":["../../src/mocks.ts"],"names":[],"mappings":"AAAA,KAAK,UAAU,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAE9D,UAAU,gBAAgB;IACxB,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,KAAK,EAAE,KAAK,OAAO,EAAE,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IACvE,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAWD,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAkBtF;AAED,wBAAgB,kBAAkB,CAAC,EAAE,EAAE,EAAE,UAA8B,EAAE,EAAE,gBAAgB,QAW1F;AAED,wBAAgB,yBAAyB,SAKxC"}

package/build/types/test-utils/window-mock.d.ts

@@ -1,3 +1,4 @@
 export declare function mockMatchMedia(): void;
 export declare function mockResizeObserver(): void;
+export declare function mockRequestAnimationFrame(): void;
 //# sourceMappingURL=window-mock.d.ts.map

package/build/types/test-utils/window-mock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"window-mock.d.ts","sourceRoot":"","sources":["../../../src/test-utils/window-mock.ts"],"names":[],"mappings":"AAKA,wBAAgB,cAAc,SAE7B;AAED,wBAAgB,kBAAkB,SAIjC"}
+{"version":3,"file":"window-mock.d.ts","sourceRoot":"","sources":["../../../src/test-utils/window-mock.ts"],"names":[],"mappings":"AAMA,wBAAgB,cAAc,SAE7B;AAED,wBAAgB,kBAAkB,SAIjC;AAED,wBAAgB,yBAAyB,SAExC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-7df8816",
+  "version": "0.0.0-experimental-bca35d9",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {
@@ -69,9 +69,9 @@
     "@types/react-dom": "^18.3.7",
     "@types/react-transition-group": "4.4.12",
     "@wise/art": "^2.24.4",
-    "@wise/eslint-config": "^13.2.0",
+    "@wise/eslint-config": "^13.1.0",
     "babel-plugin-formatjs": "^10.5.39",
-    "eslint": "^9.39.1",
+    "eslint": "^9.33.0",
     "gulp": "^5.0.1",
     "jest": "^30.0.5",
     "jest-environment-jsdom": "^29.7.0",
@@ -84,13 +84,13 @@
     "storybook-addon-tag-badges": "^2.0.2",
     "storybook-addon-test-codegen": "^2.0.1",
     "@transferwise/less-config": "3.1.2",
-    "@transferwise/neptune-css": "14.25.2",
+    "@transferwise/neptune-css": "0.0.0-experimental-bca35d9",
     "@wise/components-theming": "1.8.0",
     "@wise/wds-configs": "0.0.0"
   },
   "peerDependencies": {
     "@transferwise/icons": "^3 || ^4",
-    "@transferwise/neptune-css": "^14.24",
+    "@transferwise/neptune-css": "0.0.0-experimental-bca35d9",
     "@wise/art": "^2.24.4",
     "@wise/components-theming": "^1.6.2",
     "react": ">=18",

package/src/accordion/Accordion.css

@@ -8,14 +8,10 @@
 .np-accordion-item .decision:not(.disabled):not(:disabled):hover {
   background-color: transparent;
 }
-.np-accordion-item.np-accordion-item--dark .media-body,
-.np-accordion-item.np-accordion-item--dark .np-text-title-body {
-  color: #ffffff;
-}
 .np-accordion-item__content {
   padding: 0 12px 24px 12px;
   padding: 0 var(--size-12) var(--size-24) var(--size-12);
-  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);
 }
 @media (min-width: 480px) {
@@ -69,6 +65,6 @@
   padding: 0 56px 16px 16px;
   padding: 0 var(--size-56) var(--size-16) var(--size-16);
   border-bottom: none;
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }

package/src/accordion/Accordion.less

@@ -16,13 +16,6 @@
     background-color: transparent;
   }
 
-  &.np-accordion-item--dark {
-    .media-body,
-    .np-text-title-body {
-      color: @color-navy-content-primary;
-    }
-  }
-
   &__content {
     padding: 0 var(--size-12) var(--size-24) var(--size-12);
     border-bottom: 1px solid var(--color-border-neutral);

package/src/actionButton/ActionButton.css

@@ -14,8 +14,9 @@
   border-radius: 10px;
   border-radius: var(--radius-small);
   align-items: center;
+  color: #163300;
   color: var(--color-interactive-control);
-  background-color: #00a2dd;
+  background-color: #9fe870;
   background-color: var(--color-interactive-accent);
   border-radius: 24px;
   border-radius: var(--radius-large);
@@ -28,35 +29,42 @@
   }
 }
 .np-action-btn.btn-priority-2 {
-  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-action-btn.btn-priority-3 {
   background-color: transparent !important;
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-action-btn:not(:disabled):hover {
-  background-color: #008fc9;
+  background-color: #80e142;
   background-color: var(--color-interactive-accent-hover);
 }
 .np-action-btn:not(:disabled):hover.btn-priority-2 {
+  background-color: rgba(22,51,0,0.12941);
   background-color: var(--color-background-neutral-hover);
 }
 .np-action-btn:not(:disabled):hover.btn-priority-3 {
+  color: #0d1f00;
   color: var(--color-interactive-primary-hover);
 }
 .np-action-btn:not(:disabled):active {
   box-shadow: none;
   border-color: transparent;
-  background-color: #0081ba;
+  background-color: #65cf21;
   background-color: var(--color-interactive-accent-active);
 }
 .np-action-btn:not(:disabled):active.btn-priority-2 {
+  background-color: rgba(22,51,0,0.18039);
   background-color: var(--color-background-neutral-active);
 }
 .np-action-btn:not(:disabled):active.btn-priority-3 {
+  color: #0e0f0c;
   color: var(--color-interactive-primary-active);
+  background-color: rgba(22,51,0,0.12941) !important;
   background-color: var(--color-background-screen-active) !important;
 }
 .np-action-btn:not(:disabled):focus {