@transferwise/components 0.0.0-experimental-4568e68 → 0.0.0-experimental-20a9e0c

package/src/button/Button.css

@@ -0,0 +1,246 @@
+.wds-Button {
+  --Button-background: var(--color-interactive-accent);
+  --Button-background-hover: var(--color-interactive-accent-hover);
+  --Button-background-active: var(--color-interactive-accent-active);
+  --Button-color: var(--color-interactive-control);
+  --Button-color-hover: var(--color-interactive-control-hover);
+  --Button-color-active: var(--color-interactive-control-active);
+  --Button-border-radius: var(--radius-full);
+  --Button-label-gap: var(--size-4);
+  --Button-large-padding: var(--size-12) var(--size-16);
+  --Button-medium-padding: var(--size-8) var(--size-12);
+  --Button-small-padding: var(--size-5) var(--size-12);
+  --Button-avatar-border-color: var(--color-border-neutral);
+  --Button-transition-duration: 150ms;
+  --Button-transition-easing: ease-in-out;
+  --Button-secondary-background: var(--color-interactive-neutral);
+  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
+  --Button-secondary-background-active: var(--color-interactive-neutral-active);
+  --Button-secondary-color: var(--color-interactive-primary);
+  --Button-secondary-color-hover: var(--color-interactive-primary-hover);
+  --Button-secondary-color-active: var(--color-interactive-primary-active);
+  --Button-secondary-neutral-background: var(--color-background-neutral);
+  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
+  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
+  --Button-secondary-neutral-color: var(--color-content-primary);
+  --Button-tertiary-background: transparent;
+  --Button-tertiary-background-hover: var(--color-background-screen-hover);
+  --Button-tertiary-background-active: var(--color-background-screen-active);
+  --Button-tertiary-color: var(--color-interactive-primary);
+  --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
+  --Button-tertiary-color-active: var(--color-interactive-primary-active);
+  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
+  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
+  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
+  --Button-primary-negative-color: var(--color-contrast-overlay);
+  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
+  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
+  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
+  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
+  --Button-secondary-negative-color-hover: var(--color-sentiment-negative-primary-hover);
+  --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
+}
+.np-theme-personal--bright-green .wds-Button {
+  --Button-primary-negative-color: var(--color-white);
+  --Button-secondary-negative-color: var(--color-white);
+}
+/* Button Styles */
+.wds-Button {
+  display: inline-flex;
+  flex: none;
+  width: auto;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  text-align: center;
+  white-space: nowrap;
+  word-wrap: break-word;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background-color: var(--Button-background);
+  border: none;
+  border-radius: var(--Button-border-radius);
+  color: var(--Button-color);
+  cursor: pointer;
+  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
+}
+.wds-Button,
+.wds-Button:hover,
+.wds-Button:active,
+.wds-Button:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--Button-color);
+}
+.wds-Button:hover {
+  --Button-color: var(--Button-color-hover);
+  background-color: var(--Button-background-hover);
+}
+.wds-Button:active {
+  --Button-color: var(--Button-color-active);
+  background-color: var(--Button-background-active);
+}
+.wds-Button.wds-Button--disabled,
+.wds-Button:disabled {
+  filter: none;
+  mix-blend-mode: luminosity;
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.wds-Button.wds-Button--disabled,
+.wds-Button:disabled,
+.wds-Button.wds-Button--disabled:hover,
+.wds-Button:disabled:hover,
+.wds-Button.wds-Button--disabled:active,
+.wds-Button:disabled:active {
+  background-color: var(--Button-background);
+}
+.wds-Button--secondary {
+  --Button-background: var(--Button-secondary-background);
+  --Button-background-hover: var(--Button-secondary-background-hover);
+  --Button-background-active: var(--Button-secondary-background-active);
+  --Button-color: var(--Button-secondary-color);
+  --Button-color-hover: var(--Button-secondary-color-hover);
+  --Button-color-active: var(--Button-secondary-color-active);
+}
+.wds-Button--secondary-neutral {
+  --Button-background: var(--Button-secondary-neutral-background);
+  --Button-background-hover: var(--Button-secondary-neutral-background-hover);
+  --Button-background-active: var(--Button-secondary-neutral-background-active);
+  --Button-color: var(--Button-secondary-neutral-color);
+  --Button-color-hover: var(--Button-secondary-neutral-color);
+  --Button-color-active: var(--Button-secondary-neutral-color);
+}
+.wds-Button--secondary-neutral .wds-Button-icon--end {
+  color: var(--color-interactive-primary);
+}
+.wds-Button--tertiary {
+  --Button-background: var(--Button-tertiary-background);
+  --Button-background-hover: var(--Button-tertiary-background-hover);
+  --Button-background-active: var(--Button-tertiary-background-active);
+  --Button-color: var(--Button-tertiary-color);
+  --Button-color-hover: var(--Button-tertiary-color-hover);
+  --Button-color-active: var(--Button-tertiary-color-active);
+}
+.wds-Button--tertiary .wds-Button-labelText,
+.wds-Button--tertiary:hover .wds-Button-labelText,
+.wds-Button--tertiary:active .wds-Button-labelText,
+.wds-Button--tertiary:focus .wds-Button-labelText {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+}
+.wds-Button--negative.wds-Button--primary {
+  --Button-background: var(--Button-primary-negative-background);
+  --Button-background-hover: var(--Button-primary-negative-background-hover);
+  --Button-background-active: var(--Button-primary-negative-background-active);
+  --Button-color: var(--Button-primary-negative-color);
+}
+.wds-Button--negative.wds-Button--secondary {
+  --Button-background: var(--Button-secondary-negative-background);
+  --Button-background-hover: var(--Button-secondary-negative-background-hover);
+  --Button-background-active: var(--Button-secondary-negative-background-active);
+  --Button-color: var(--Button-secondary-negative-color);
+  --Button-color-hover: var(--Button-secondary-negative-color-hover);
+  --Button-color-active: var(--Button-secondary-negative-color-active);
+}
+.wds-Button--large {
+  padding: var(--Button-large-padding);
+}
+.wds-Button--medium {
+  padding: var(--Button-medium-padding);
+}
+.wds-Button--medium:has(.wds-Button-avatars) {
+  padding-inline-start: 8px;
+  padding-inline-start: var(--size-8);
+}
+.wds-Button--medium:has(.wds-Button-icon--end) {
+  padding-inline-end: 8px;
+  padding-inline-end: var(--size-8);
+}
+.wds-Button--medium .wds-Button-icon--start {
+  margin-inline-end: var(--Button-label-gap);
+}
+.wds-Button--small {
+  padding: var(--Button-small-padding);
+}
+.wds-Button--small:has(.wds-Button-icon--start) {
+  padding-inline-start: 8px;
+  padding-inline-start: var(--size-8);
+}
+.wds-Button--small:has(.wds-Button-icon--end) {
+  padding-inline-end: 8px;
+  padding-inline-end: var(--size-8);
+}
+.wds-Button--block {
+  width: 100%;
+}
+.wds-Button-avatars {
+  display: inline-flex;
+}
+.wds-Button-avatars .np-avatar-view .np-avatar-view-content {
+  color: var(--Button-color);
+}
+.wds-Button-icon {
+  display: inline-block;
+}
+.wds-Button-icon--md {
+  --Button-iconSize: calc(var(--size-10) + var(--size-8));
+}
+.wds-Button-icon--sm {
+  --Button-iconSize: var(--size-16);
+}
+.wds-Button-icon svg {
+  width: var(--Button-iconSize);
+  height: var(--Button-iconSize);
+}
+.wds-Button-content {
+  position: relative;
+}
+.wds-Button-content--loading .wds-Button-label,
+.wds-Button-content--loading .wds-Button-media,
+.wds-Button-content--loading .wds-Button-icon {
+  visibility: hidden;
+  opacity: 0;
+}
+.wds-Button-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--Button-label-gap);
+  position: relative;
+}
+.wds-Button-loader {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.wds-Button-loader .process-circle {
+  stroke: var(--Button-color);
+}
+/* Avatar border transparency */
+/* dark buttons get 20% transparency, light buttons get 12% */
+.wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
+}
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary-neutral .wds-Button-avatars .np-circle,
+.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+}
+.np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
+.np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
+.np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
+.np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+}
+.np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
+.np-theme-personal--bright-green .wds-Button--secondary-neutral .wds-Button-avatars .np-circle {
+  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+}
+[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
+  scale: -1 1;
+}

package/src/button/Button.vars.css

@@ -0,0 +1,46 @@
+.wds-Button {
+  --Button-background: var(--color-interactive-accent);
+  --Button-background-hover: var(--color-interactive-accent-hover);
+  --Button-background-active: var(--color-interactive-accent-active);
+  --Button-color: var(--color-interactive-control);
+  --Button-color-hover: var(--color-interactive-control-hover);
+  --Button-color-active: var(--color-interactive-control-active);
+  --Button-border-radius: var(--radius-full);
+  --Button-label-gap: var(--size-4);
+  --Button-large-padding: var(--size-12) var(--size-16);
+  --Button-medium-padding: var(--size-8) var(--size-12);
+  --Button-small-padding: var(--size-5) var(--size-12);
+  --Button-avatar-border-color: var(--color-border-neutral);
+  --Button-transition-duration: 150ms;
+  --Button-transition-easing: ease-in-out;
+  --Button-secondary-background: var(--color-interactive-neutral);
+  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
+  --Button-secondary-background-active: var(--color-interactive-neutral-active);
+  --Button-secondary-color: var(--color-interactive-primary);
+  --Button-secondary-color-hover: var(--color-interactive-primary-hover);
+  --Button-secondary-color-active: var(--color-interactive-primary-active);
+  --Button-secondary-neutral-background: var(--color-background-neutral);
+  --Button-secondary-neutral-background-hover: var(--color-background-neutral-hover);
+  --Button-secondary-neutral-background-active: var(--color-background-neutral-active);
+  --Button-secondary-neutral-color: var(--color-content-primary);
+  --Button-tertiary-background: transparent;
+  --Button-tertiary-background-hover: var(--color-background-screen-hover);
+  --Button-tertiary-background-active: var(--color-background-screen-active);
+  --Button-tertiary-color: var(--color-interactive-primary);
+  --Button-tertiary-color-hover: var(--color-interactive-primary-hover);
+  --Button-tertiary-color-active: var(--color-interactive-primary-active);
+  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
+  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
+  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
+  --Button-primary-negative-color: var(--color-contrast-overlay);
+  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
+  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
+  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
+  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
+  --Button-secondary-negative-color-hover: var(--color-sentiment-negative-primary-hover);
+  --Button-secondary-negative-color-active: var(--color-sentiment-negative-primary-active);
+}
+.np-theme-personal--bright-green .wds-Button {
+  --Button-primary-negative-color: var(--color-white);
+  --Button-secondary-negative-color: var(--color-white);
+}

package/src/button/LegacyButton.css

@@ -0,0 +1,23 @@
+.np-btn {
+  position: relative;
+}
+.np-btn.np-btn-block > span.btn-loader {
+  position: absolute;
+  left: 24px;
+  left: var(--size-24);
+}
+[dir="rtl"] .np-btn.np-btn-block > span.btn-loader {
+  right: 24px;
+  right: var(--size-24);
+  left: auto;
+  left: initial;
+}
+.np-btn.np-btn-xs > span.btn-loader {
+  background-size: 16px 16px;
+}
+.np-btn.np-btn-xs.btn-block > span.btn-loader {
+  top: 0;
+}
+.np-btn.disabled[class] {
+  pointer-events: auto;
+}

package/src/button/LegacyButton.less

@@ -1,4 +1,4 @@
-@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
 
 .np-btn {
   position: relative;

package/src/card/Card.css

@@ -0,0 +1,100 @@
+.np-card {
+  overflow: hidden;
+  transition-property: transform, box-shadow;
+  transition-duration: 0.35s;
+  transition-timing-function: ease;
+}
+.np-card .media {
+  border: 0;
+}
+.np-card--expanded {
+  background-color: #ffffff;
+  background-color: var(--color-background-elevated);
+  box-shadow: 0 1px 10px rgba(0,0,0,0.10196);
+  box-shadow: 0 1px 10px var(--color-border-neutral);
+}
+.np-theme-personal .np-card--expanded {
+  box-shadow: 0 1px 10px 0 rgba(69, 71, 69, 0.2);
+}
+.np-theme-personal--forest-green .np-card--expanded,
+.np-theme-personal--bright-green .np-card--expanded,
+.np-theme-personal--dark .np-card--expanded {
+  box-shadow: none;
+}
+.np-card--inactive .decision {
+  cursor: default;
+}
+@media (min-width: 480px) {
+  .np-card--has-icon .np-card__content {
+    padding: 24px 72px;
+    padding: var(--size-24) var(--size-72);
+  }
+}
+@media (min-width: 480px) {
+  .np-card--has-icon .np-card__divider--expanded {
+    margin: 0 72px;
+    margin: 0 var(--size-72);
+  }
+}
+.np-card__button {
+  background-color: transparent;
+  text-align: left;
+  width: 100%;
+}
+[dir="rtl"] .np-card__button {
+  text-align: right;
+}
+.np-theme-personal .np-card__button:focus {
+  outline: none;
+}
+.np-theme-personal .np-card__button:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.np-card__content {
+  padding: 24px 16px;
+  padding: var(--size-24) var(--size-16);
+}
+.np-theme-personal .np-card__content {
+  padding: 16px 16px 24px;
+  padding: var(--size-16) var(--size-16) var(--size-24);
+}
+.np-card__divider {
+  transition: margin 0.35s ease;
+}
+.np-card__divider--expanded {
+  background-color: rgba(0,0,0,0.10196);
+  background-color: var(--color-border-neutral);
+  height: 1px;
+  margin: 0 16px;
+  margin: 0 var(--size-16);
+}
+.np-theme-personal .np-card {
+  overflow: visible;
+  overflow: initial;
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  /* stylelint-disable-next-line no-duplicate-selectors */
+}
+.np-theme-personal .np-card__divider {
+  transition: none;
+  margin: 0;
+}
+.np-theme-personal .np-card__button {
+  border-radius: 16px;
+  border-radius: var(--radius-medium);
+  --ring-outline-width: 3px;
+  --ring-outline-offset: calc(-1 * var(--ring-outline-width));
+}
+.np-theme-personal .np-card__button:focus {
+  outline: none;
+}
+.np-theme-personal .np-card__button:focus-visible {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width);
+  outline-offset: var(--ring-outline-offset);
+}
+.np-theme-personal .np-card--expanded .np-card__button {
+  border-radius: 16px 16px 0 0;
+  border-radius: var(--radius-medium) var(--radius-medium) 0 0;
+}

package/src/card/Card.less

@@ -1,6 +1,6 @@
-@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
-@import (reference) "./../neptune-css/less/mixins/_theming.less";
-@import (reference) "./../neptune-css/less/ring.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_theming.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
 
 .np-card {
   overflow: hidden;

package/src/carousel/Carousel.css

@@ -0,0 +1,134 @@
+.carousel-wrapper {
+  overflow: hidden;
+}
+.carousel {
+  display: flex;
+  align-items: center;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  gap: 16px;
+  gap: var(--size-16);
+  padding: 8px;
+  padding: var(--size-8);
+}
+@media (max-width: 767px) {
+  .carousel {
+    gap: 8px;
+    gap: var(--size-8);
+  }
+}
+.carousel__header {
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  min-height: 32px;
+  min-height: var(--size-32);
+  padding-bottom: 16px;
+  padding-bottom: var(--size-16);
+}
+.carousel__card,
+.carousel__card:hover,
+.carousel__card:focus,
+.carousel__card:focus-within {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  transition: none !important;
+  box-shadow: none !important;
+}
+.carousel__card {
+  display: block;
+  position: relative;
+  text-align: left;
+  border: none;
+  overflow: hidden;
+  background: rgba(134,167,189,0.10196);
+  background: var(--color-background-neutral);
+  border-radius: 32px;
+  border-radius: var(--size-32);
+  scroll-snap-align: center;
+  -webkit-scroll-snap-align: center;
+  transition: all 0.4s !important;
+}
+@media (min-width: 1200px) {
+  .carousel__card {
+    min-width: 280px;
+    width: 280px;
+    height: 280px;
+  }
+}
+@media (min-width: 768px) {
+  .carousel-wrapper {
+    overflow: visible;
+  }
+  .carousel {
+    margin: 0 calc(-1 * 8px);
+    margin: 0 calc(-1 * var(--size-8));
+  }
+}
+@media (max-width: 1199px) {
+  .carousel__card {
+    min-width: 242px;
+    width: 242px;
+    height: 242px;
+  }
+}
+@media (max-width: 767px) {
+  .carousel__card {
+    min-width: 336px;
+    width: 336px;
+    height: 336px;
+    scroll-snap-stop: always;
+  }
+}
+.carousel__card:focus,
+.carousel__card:has(:focus-visible) {
+  outline: var(--ring-outline-color) solid var(--ring-outline-width) !important;
+  outline-offset: var(--ring-outline-offset) !important;
+}
+.carousel__card:hover {
+  background-color: var(--color-background-neutral-hover);
+}
+.carousel__card:focus {
+  background-color: var(--color-background-neutral-hover);
+}
+.carousel__card-content {
+  height: 100%;
+  font-weight: normal;
+  padding: 24px;
+  padding: var(--size-24);
+}
+.carousel__indicators {
+  display: flex;
+  justify-content: center;
+  padding-top: 8px;
+  padding-top: var(--size-8);
+  gap: 8px;
+  gap: var(--size-8);
+}
+.carousel__indicator {
+  width: 12px;
+  width: var(--size-12);
+  height: 12px;
+  height: var(--size-12);
+  border-radius: 8px;
+  border-radius: var(--size-8);
+  background: #c9cbce;
+  background: var(--color-interactive-secondary);
+  border: none;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  transition: all 0.1s;
+}
+.carousel__indicator:hover {
+  width: 16px;
+  width: var(--size-16);
+}
+.carousel__indicator--selected,
+.carousel__indicator--selected:hover {
+  background: var(--color-interactive-primary);
+  width: 24px;
+  width: var(--size-24);
+}

package/src/checkboxButton/CheckboxButton.css

@@ -0,0 +1,43 @@
+.np-checkbox-button input[type="checkbox"] {
+  position: absolute;
+  width: 24px;
+  width: var(--size-24);
+  height: 24px;
+  height: var(--size-24);
+  opacity: 0;
+}
+.np-checkbox-button input[type="checkbox"]:not(:disabled) {
+  cursor: pointer;
+}
+.np-checkbox-button .tw-checkbox-check,
+.np-checkbox-button .np-tw-checkbox-indeterminate {
+  pointer-events: none;
+}
+.checkbox .np-checkbox-button input[type="checkbox"] {
+  top: 0;
+  left: 0;
+  margin: 0;
+}
+[dir="rtl"] .checkbox .np-checkbox-button input[type="checkbox"] {
+  right: 0;
+  left: auto;
+  left: initial;
+}
+.np-tw-checkbox-indeterminate {
+  position: relative;
+}
+.np-tw-checkbox-indeterminate::after {
+  content: "";
+  position: absolute;
+  width: 12px;
+  height: 2px;
+  top: 55%;
+  left: 50%;
+  background: #ffffff;
+  background: var(--color-background-screen);
+  transform: translate(-50%, -50%);
+}
+.np-tw-checkbox-indeterminate .has-error::after {
+  background-color: #e74848;
+  background-color: var(--color-interactive-negative);
+}

package/src/checkboxButton/CheckboxButton.less

@@ -1,5 +1,5 @@
-@import (reference) "./../neptune-css/variables/neptune-tokens.less";
-@import (reference) "./../neptune-css/less/mixins/_logical-properties.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/variables/neptune-tokens.less";
+@import (reference) "../../node_modules/@transferwise/neptune-css/src/less/mixins/_logical-properties.less";
 
 .np-checkbox-button {
   input[type="checkbox"] {