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

package/src/accordion/Accordion.story.tsx

@@ -145,9 +145,9 @@ export const WithinModal: Story = {
           Open Modal
         </Button>
         <Modal
-          title="Large transfer tips"
           body={
             <div className="p-a-1">
+              <h3 className="m-t-2 m-b-4 text-xs-center">Large transfer tips</h3>
               <Accordion {...args} items={[items[0]]} />
               <Accordion {...args} items={[items[0]]} indexOpen={0} />
               <Accordion {...args} items={items} />

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 {

package/src/avatar/Avatar.css

@@ -9,10 +9,10 @@
 .tw-avatar .tw-avatar__content {
   align-items: center;
   background-color: rgba(134,167,189,0.10196);
-  background-color: #86a7bd1a;
+  background-color: #16330014;
   background-color: var(--color-background-neutral);
   border-radius: 50%;
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   display: flex;
   height: 100%;
@@ -23,12 +23,12 @@
   width: 100%;
 }
 .tw-avatar--outlined {
-  border: 1px solid #00a2dd;
+  border: 1px solid #9fe870;
   border: 1px solid var(--color-interactive-accent);
   cursor: pointer;
 }
 .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
-  border-color: #008fc9;
+  border-color: #80e142;
   border-color: var(--color-interactive-accent-hover);
 }
 .tw-avatar--thumbnail * {
@@ -49,7 +49,7 @@
 }
 .tw-avatar.tw-avatar--initials,
 .tw-avatar.tw-avatar--icon {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .tw-avatar.tw-avatar--initials,
@@ -60,6 +60,7 @@
   font-family: 'Wise Sans', 'Inter', sans-serif;
   font-family: var(--font-family-display);
   font-feature-settings: "ss01";
+  color: #21231d;
   color: var(--color-dark-charcoal);
   line-height: 1;
 }
@@ -93,7 +94,7 @@
   left: 0;
   right: 0;
   bottom: 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-overlay);
   content: "";
   border-radius: 50%;
@@ -128,7 +129,7 @@
   left: 0;
   right: 0;
   bottom: 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-overlay);
   content: "";
   border-radius: 50%;
@@ -163,7 +164,7 @@
   left: 0;
   right: 0;
   bottom: 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-overlay);
   content: "";
   border-radius: 50%;
@@ -198,7 +199,7 @@
   left: 0;
   right: 0;
   bottom: 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-overlay);
   content: "";
   border-radius: 50%;
@@ -233,7 +234,7 @@
   left: 0;
   right: 0;
   bottom: 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-overlay);
   content: "";
   border-radius: 50%;
@@ -243,8 +244,10 @@
   height: 100%;
 }
 .np-theme-personal .tw-avatar--outlined {
+  border-color: #163300;
   border-color: var(--color-interactive-primary);
 }
 .np-theme-personal .tw-avatar--outlined:not(.disabled):not(:disabled):hover {
+  border-color: #0d1f00;
   border-color: var(--color-interactive-primary-hover);
 }

package/src/avatarLayout/AvatarLayout.story.tsx

@@ -7,7 +7,6 @@ import Body from '../body';
 
 export default {
   title: 'Content/AvatarLayout',
-  component: AvatarLayout,
 } satisfies Meta<typeof AvatarLayout>;
 
 type Story = StoryObj<typeof AvatarLayout>;

package/src/avatarView/AvatarView.css

@@ -18,22 +18,24 @@
   right: 0;
 }
 .np-dot-badge-notification {
+  background-color: #cb272f;
   background-color: var(--color-sentiment-negative);
 }
 .np-dot-badge-online {
-  background-color: #00a2dd;
+  background-color: #9fe870;
   background-color: var(--color-interactive-accent);
 }
 .np-avatar-view .np-avatar-view-content {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 .np-avatar-view-interactive {
   cursor: pointer;
 }
 .np-avatar-view-interactive .np-circle {
-  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-avatar-view-non-interactive .np-circle {

package/src/avatarView/AvatarView.story.tsx

@@ -26,7 +26,6 @@ import Body from '../body';
 
 export default {
   title: 'Content/AvatarView',
-  component: AvatarView,
 } satisfies Meta<typeof AvatarView>;
 
 type Story = StoryObj<typeof AvatarView>;

package/src/avatarView/Dot.css

@@ -18,9 +18,10 @@
   right: 0;
 }
 .np-dot-badge-notification {
+  background-color: #cb272f;
   background-color: var(--color-sentiment-negative);
 }
 .np-dot-badge-online {
-  background-color: #00a2dd;
+  background-color: #9fe870;
   background-color: var(--color-interactive-accent);
 }

package/src/button/Button.css

@@ -113,6 +113,7 @@
   --Button-color-active: var(--Button-secondary-neutral-color);
 }
 .wds-Button--secondary-neutral .wds-Button-icon--end {
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .wds-Button--tertiary {

package/src/card/Card.css

@@ -10,7 +10,7 @@
 .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 rgba(14,15,12,0.12157);
   box-shadow: 0 1px 10px var(--color-border-neutral);
 }
 .np-theme-personal .np-card--expanded {
@@ -63,7 +63,7 @@
   transition: margin 0.35s ease;
 }
 .np-card__divider--expanded {
-  background-color: rgba(0,0,0,0.10196);
+  background-color: rgba(14,15,12,0.12157);
   background-color: var(--color-border-neutral);
   height: 1px;
   margin: 0 16px;

package/src/carousel/Carousel.css

@@ -43,7 +43,7 @@
   text-align: left;
   border: none;
   overflow: hidden;
-  background: rgba(134,167,189,0.10196);
+  background: rgba(22,51,0,0.07843);
   background: var(--color-background-neutral);
   border-radius: 32px;
   border-radius: var(--size-32);
@@ -88,9 +88,11 @@
   outline-offset: var(--ring-outline-offset) !important;
 }
 .carousel__card:hover {
+  background-color: rgba(22,51,0,0.12941);
   background-color: var(--color-background-neutral-hover);
 }
 .carousel__card:focus {
+  background-color: rgba(22,51,0,0.12941);
   background-color: var(--color-background-neutral-hover);
 }
 .carousel__card-content {
@@ -114,7 +116,7 @@
   height: var(--size-12);
   border-radius: 8px;
   border-radius: var(--size-8);
-  background: #c9cbce;
+  background: #868685;
   background: var(--color-interactive-secondary);
   border: none;
   -webkit-appearance: none;
@@ -128,6 +130,7 @@
 }
 .carousel__indicator--selected,
 .carousel__indicator--selected:hover {
+  background: #163300;
   background: var(--color-interactive-primary);
   width: 24px;
   width: var(--size-24);

package/src/checkboxButton/CheckboxButton.css

@@ -38,6 +38,5 @@
   transform: translate(-50%, -50%);
 }
 .np-tw-checkbox-indeterminate .has-error::after {
-  background-color: #e74848;
   background-color: var(--color-interactive-negative);
 }

package/src/chips/Chip.css

@@ -1,10 +1,10 @@
 .np-chip {
   background-color: transparent;
-  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);
   border-radius: 16px;
   border-radius: var(--size-16);
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   height: 32px;
   height: var(--size-32);
@@ -38,33 +38,32 @@
   margin-right: initial;
 }
 .np-chip:active {
-  background-color: #0081ba;
+  background-color: #65cf21;
   background-color: var(--color-interactive-accent-active);
-  border-color: #0081ba;
+  border-color: #65cf21;
   border-color: var(--color-interactive-accent-active);
   color: #fff;
 }
 .np-chip--selected {
   color: #fff;
-  background-color: #00a2dd;
+  background-color: #9fe870;
   background-color: var(--color-interactive-accent);
-  border-color: #00a2dd;
+  border-color: #9fe870;
   border-color: var(--color-interactive-accent);
   pointer-events: none;
 }
 .np-chip--selected:hover,
 .np-chip--selected:active {
   color: #fff;
-  background-color: #008fc9;
+  background-color: #80e142;
   background-color: var(--color-interactive-accent-hover);
-  border-color: #008fc9;
+  border-color: #80e142;
   border-color: var(--color-interactive-accent-hover);
 }
 .np-chip--selected .np-close-button {
   color: white;
 }
 .np-chip.has-error {
-  background: #e74848;
   background: var(--color-interactive-negative);
   color: #fff;
 }
@@ -72,40 +71,51 @@
   color: white;
 }
 .np-theme-personal .np-chip.has-error {
+  background: #cb272f;
   background: var(--color-sentiment-negative);
 }
 .np-theme-personal .np-chip.has-error,
 .np-theme-personal .np-chip.has-error:not(.disabled):not(:disabled):hover,
 .np-theme-personal .np-chip.has-error:not(.disabled):not(:disabled):active {
+  color: #ffffff;
   color: var(--color-contrast);
 }
 .np-theme-personal .np-chip.has-error:not(.disabled):not(:disabled):hover {
+  background: #b8232b;
   background: var(--color-sentiment-negative-hover);
+  border-color: #b8232b !important;
   border-color: var(--color-sentiment-negative-hover) !important;
 }
 .np-theme-personal .np-chip.has-error:not(.disabled):not(:disabled):active {
+  background: #a72027;
   background: var(--color-sentiment-negative-active);
+  border-color: #a72027 !important;
   border-color: var(--color-sentiment-negative-active) !important;
 }
 .np-theme-personal .np-chip {
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
+  color: #163300;
   color: var(--color-interactive-primary);
   padding: 0 16px;
   padding: 0 var(--size-16);
-  border-color: #c9cbce;
+  border-color: #868685;
   border-color: var(--color-interactive-secondary);
 }
 .np-theme-personal .np-chip:not(.disabled):not(:disabled):hover {
+  color: #0d1f00;
   color: var(--color-interactive-primary-hover);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-screen-hover);
-  border-color: #b5b7ba;
+  border-color: #6c6c6b;
   border-color: var(--color-interactive-secondary-hover);
 }
 .np-theme-personal .np-chip:not(.disabled):not(:disabled):active {
+  color: #0e0f0c;
   color: var(--color-interactive-primary-active);
+  background-color: rgba(22,51,0,0.12941);
   background-color: var(--color-background-screen-active);
-  border-color: #a7a9ab;
+  border-color: #525251;
   border-color: var(--color-interactive-secondary-active);
 }
 .np-theme-personal .np-chip .np-close-button {
@@ -162,20 +172,29 @@
 }
 .np-theme-personal .np-chip--selected,
 .np-theme-personal .np-chip--valid {
+  color: #9fe870;
   color: var(--color-interactive-contrast);
+  background-color: #163300;
   background-color: var(--color-interactive-primary);
+  border-color: #163300;
   border-color: var(--color-interactive-primary);
 }
 .np-theme-personal .np-chip--selected:not(.disabled):not(:disabled):hover,
 .np-theme-personal .np-chip--valid:not(.disabled):not(:disabled):hover {
+  color: #cdffad;
   color: var(--color-interactive-contrast-hover);
+  background-color: #0d1f00;
   background-color: var(--color-interactive-primary-hover);
+  border-color: #0d1f00;
   border-color: var(--color-interactive-primary-hover);
 }
 .np-theme-personal .np-chip--selected:not(.disabled):not(:disabled):active,
 .np-theme-personal .np-chip--valid:not(.disabled):not(:disabled):active {
+  color: #ecffe0;
   color: var(--color-interactive-contrast-active);
+  background-color: #0e0f0c;
   background-color: var(--color-interactive-primary-active);
+  border-color: #0e0f0c;
   border-color: var(--color-interactive-primary-active);
 }
 .np-theme-personal .np-chip--selected .np-close-button,

package/src/circularButton/CircularButton.css

@@ -7,26 +7,32 @@
 .np-circular-btn-primary-default .np-circular-btn-label,
 .np-circular-btn-secondary-default .np-circular-btn-label {
   text-align: center;
+  color: #163300;
   color: var(--color-interactive-primary);
 }
 .np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover,
 .np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled):not(:disabled):hover {
+  color: #0d1f00;
   color: var(--color-interactive-primary-hover);
 }
 .np-circular-btn-primary-default .np-circular-btn-label:not(.disabled):not(:disabled):active,
 .np-circular-btn-secondary-default .np-circular-btn-label:not(.disabled):not(:disabled):active {
+  color: #0e0f0c;
   color: var(--color-interactive-primary-active);
 }
 .np-circular-btn-primary-negative .np-circular-btn-label,
 .np-circular-btn-secondary-negative .np-circular-btn-label {
+  color: #cb272f;
   color: var(--color-sentiment-negative-primary);
 }
 .np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled):not(:disabled):hover,
 .np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled):not(:disabled):hover {
+  color: #b8232b;
   color: var(--color-sentiment-negative-primary-hover);
 }
 .np-circular-btn-primary-negative .np-circular-btn-label:not(.disabled):not(:disabled):active,
 .np-circular-btn-secondary-negative .np-circular-btn-label:not(.disabled):not(:disabled):active {
+  color: #a72027;
   color: var(--color-sentiment-negative-primary-active);
 }
 .np-circular-btn-disabled {

package/src/common/Option/Option.css

@@ -14,7 +14,7 @@
   height: var(--size-40);
 }
 .np-option__title {
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
   font-size: 1rem;
   font-weight: 600;
@@ -27,7 +27,7 @@
 .np-option__body {
   margin-top: 4px;
   margin-top: var(--size-4);
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
   font-size: 0.875rem;
   font-size: var(--font-size-14);

package/src/common/RadioButton/RadioButton.css

@@ -1,4 +1,4 @@
 .radio:hover {
-  border-color: rgba(0,0,0,0.10196);
+  border-color: rgba(14,15,12,0.12157);
   border-color: var(--color-border-neutral);
 }

package/src/common/bottomSheet/BottomSheet.css

@@ -20,7 +20,7 @@
 .np-bottom-sheet--handler {
   width: 40px;
   height: 4px;
-  background: #c9cbce;
+  background: #868685;
   background: var(--color-interactive-secondary);
   border-radius: 10px;
   border-radius: var(--radius-small);

package/src/common/card/Card.css

@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  background-color: rgba(134,167,189,0.10196);
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--Card-background-color);
   border-radius: 32px;
   border-radius: var(--Card-border-radius);

package/src/common/closeButton/CloseButton.css

@@ -1,6 +1,6 @@
 .np-close-button {
   transition: color 0.15s ease-in-out;
-  color: #00a2dd;
+  color: #9fe870;
   color: var(--color-interactive-accent);
   border: none;
   background: none;
@@ -15,10 +15,11 @@
   height: var(--size-24);
 }
 .np-close-button:hover {
-  color: #008fc9;
+  color: #80e142;
   color: var(--color-interactive-accent-hover);
 }
 .np-theme-personal .np-close-button {
+  color: #163300;
   color: var(--color-interactive-primary);
   height: 32px;
   height: var(--size-32);
@@ -85,10 +86,14 @@
   }
 }
 .np-theme-personal .np-close-button:not(.disabled):not(:disabled):hover {
+  color: #0d1f00;
   color: var(--color-interactive-primary-hover);
+  background-color: rgba(22,51,0,0.12941);
   background-color: var(--color-background-neutral-hover);
 }
 .np-theme-personal .np-close-button:not(.disabled):not(:disabled):active {
+  color: #0e0f0c;
   color: var(--color-interactive-primary-active);
+  background-color: rgba(22,51,0,0.18039);
   background-color: var(--color-background-neutral-active);
 }

package/src/criticalBanner/CriticalCommsBanner.css

@@ -1,8 +1,11 @@
 .np-theme-personal .critical-comms .alert-warning {
+  color: #ffffff;
   color: var(--color-contrast-overlay);
+  background-color: #cb272f;
   background-color: var(--color-sentiment-negative);
 }
 .np-theme-personal .critical-comms .alert-warning .np-text-title-body {
+  color: #ffffff;
   color: var(--color-contrast-overlay);
 }
 .np-theme-personal .critical-comms .status-circle.warning {
@@ -10,6 +13,7 @@
   background-color: var(--color-background-screen);
 }
 .np-theme-personal .critical-comms .status-circle.warning .status-icon {
+  color: #121511;
   color: var(--color-contrast-theme);
 }
 .np-theme-personal .critical-comms .alert__message .alert__action {

package/src/dateLookup/DateLookup.css

@@ -8,7 +8,7 @@
   background-color: inherit;
 }
 .tw-date-lookup-calendar > tbody > tr > td.weekend button {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }
 .tw-date-lookup-calendar > tbody > tr > td {
@@ -27,7 +27,6 @@
   width: 100%;
   padding: 4px 0;
   padding: var(--size-4) 0;
-  color: #0097c7;
   color: var(--color-content-accent);
   border: transparent;
   border-radius: 10px;
@@ -35,7 +34,7 @@
   background-color: transparent;
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
-  color: #37517e;
+  color: #0e0f0c;
   color: var(--color-content-primary);
 }
 @media (max-width: 320px) {
@@ -65,10 +64,13 @@
 }
 .tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.show-focus,
 .tw-date-lookup-calendar > tbody > tr > td:hover button:not(.disabled):not(:disabled) {
+  background-color: rgba(22,51,0,0.07843);
   background-color: var(--color-background-screen-hover);
 }
 .tw-date-lookup-calendar > tbody > tr > td:not(.disabled):not(:disabled) button.active {
+  background-color: #163300;
   background-color: var(--color-interactive-primary);
+  color: #9fe870;
   color: var(--color-interactive-contrast);
 }
 .tw-date-lookup-calendar abbr {

package/src/definitionList/DefinitionList.css

@@ -48,6 +48,6 @@
   }
 }
 .np-theme-personal .tw-definition-list dt {
-  color: #5d7079;
+  color: #454745;
   color: var(--color-content-secondary);
 }

package/src/display/Display.story.tsx

@@ -6,7 +6,6 @@ import Display from './Display';
 
 export default {
   title: 'Typography/Display',
-  component: Display,
 };
 
 export const Basic = () => {

package/src/divider/Divider.css

@@ -4,7 +4,7 @@
   --Divider-border-style: solid;
   --Divider-dash-length: 4px;
   --Divider-dash-spacing: 4px;
-  border-top: 4px solid rgba(0,0,0,0.10196);
+  border-top: 4px solid rgba(14,15,12,0.12157);
   border-top: var(--Divider-border-width) var(--Divider-border-style) var(--Divider-border-color);
   display: inline-block;
   margin: 0;