@transferwise/components 0.0.0-experimental-68931a1 → 0.0.0-experimental-02ec4e3

package/src/Table/Table.css

@@ -3,7 +3,6 @@
   background-color: transparent;
 }
 .np-table-outer-container {
-  border-radius: 16px;
   border-radius: var(--radius-medium);
 }
 .np-table-outer-container:focus {
@@ -29,9 +28,7 @@
   inline-size: 100%;
 }
 .np-table-container {
-  padding: 8px;
   padding: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   border-radius: inherit;
 }
@@ -40,10 +37,16 @@
 }
 .np-table-inner-container {
   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-position: left center,
+      right center,
+      left center,
+      right center;
   background-repeat: no-repeat;
   background-color: var(--color-contrast-overlay);
-  background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
+  background-size: 15px 100%,
+      15px 100%,
+      15px 100%,
+      15px 100%;
   background-attachment: local, local, scroll, scroll;
   overflow-x: auto;
   border-radius: 10px;
@@ -83,11 +86,9 @@
 }
 .np-table-row--clickable .np-table-cell:first-child:before,
 .np-table-row--clickable .np-table-cell:last-child:before {
-  inline-size: calc(100% - 8px);
   inline-size: calc(100% - var(--size-8));
 }
 .np-table-row--clickable .np-table-cell:first-child:before {
-  inset-inline-start: 8px;
   inset-inline-start: var(--size-8);
   border-start-start-radius: 6px;
   border-end-start-radius: 6px;
@@ -107,7 +108,6 @@
   inset-inline-start: 0;
 }
 .np-table-row--cosmetic .np-table-cell {
-  block-size: 8px;
   block-size: var(--size-8);
   padding: 0;
 }
@@ -117,7 +117,6 @@
 }
 .np-table-header:first-child,
 .np-table-cell:first-child {
-  padding-inline-start: 16px;
   padding-inline-start: var(--size-16);
 }
 .np-table-header:first-child .np-table-header-content,
@@ -128,7 +127,6 @@
 }
 .np-table-header:last-child,
 .np-table-cell:last-child {
-  padding-inline-end: 16px;
   padding-inline-end: var(--size-16);
 }
 .np-table-header:last-child .np-table-header-content,
@@ -138,12 +136,13 @@
   padding-inline-end: 0;
 }
 .np-table-header.np-table-header--right > .np-text-body-default,
-.np-table-cell.np-table-cell--right > .np-text-body-default {
+.np-table-cell.np-table-cell--right > .np-text-body-default,
+.np-table-header.np-table-header--right > .wds-text-body-default,
+.np-table-cell.np-table-cell--right > .wds-text-body-default {
   text-align: end;
 }
 .np-table-header.np-table-header--right + .np-table-header:not(.np-table-header--right),
 .np-table-cell.np-table-cell--right + .np-table-cell:not(.np-table-cell--right) {
-  padding-inline-start: calc(8px + 12px);
   padding-inline-start: calc(var(--size-8) + var(--size-12));
 }
 .np-table-header.np-table-header--right .np-table-header-content,
@@ -158,13 +157,9 @@
 }
 .np-table-header {
   min-inline-size: 160px;
-  padding-inline-end: 8px;
   padding-inline-end: var(--size-8);
-  padding-block-end: 8px;
   padding-block-end: var(--size-8);
-  padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   color: var(--color-interactive-primary);
 }
@@ -172,10 +167,8 @@
   padding-block-start: 5px;
   padding-block-end: 5px;
   white-space: nowrap;
-  line-height: 1.375rem;
-  line-height: var(--line-height-22);
-  letter-spacing: 0.0125em;
-  letter-spacing: var(--letter-spacing-sm);
+  line-height: var(--wds-line-height-title-subsection);
+  letter-spacing: var(--wds-letter-spacing-title-subsection);
 }
 .np-table-header--error {
   color: var(--color-sentiment-negative);
@@ -185,9 +178,7 @@
   padding: 0;
 }
 .np-table-cell {
-  padding-block: 16px;
   padding-block: var(--size-16);
-  padding-inline: 8px;
   padding-inline: var(--size-8);
   position: relative;
 }
@@ -197,27 +188,24 @@
 .np-table-cell--primary {
   min-inline-size: 200px;
 }
-.np-table-cell--currency .np-text-body-default {
+.np-table-cell--currency .np-text-body-default,
+.np-table-cell--currency .wds-text-body-default {
   white-space: nowrap;
 }
 .np-table-cell .tw-chevron {
-  margin-inline-start: 8px;
   margin-inline-start: var(--size-8);
 }
 .np-table-cell-separator {
-  margin-block-start: 4px;
   margin-block-start: var(--size-4);
-  margin-block-end: 4px;
   margin-block-end: var(--size-4);
   block-size: 1px;
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
   padding: 0;
 }
-.np-table-cell .np-text-body-default-bold {
+.np-table-cell .np-text-body-default-bold,
+.np-table-cell .wds-text-body-default-bold {
   display: flex;
   align-items: center;
-  color: #37517e;
   color: var(--color-content-primary);
   white-space: nowrap;
 }
@@ -238,12 +226,10 @@
   }
 }
 .np-table-content {
-  gap: 12px;
   gap: var(--size-12);
 }
 .np-table-content--success,
 .np-table-content--error {
-  gap: 4px;
   gap: var(--size-4);
 }
 .np-table-content--success .np-table-content-text,
@@ -256,9 +242,7 @@
 .np-table-content-body {
   display: flex;
   flex-direction: column;
-  font-size: 0.75rem;
-  font-size: var(--font-size-12);
-  color: #768e9c;
+  font-size: var(--wds-font-size-nav);
   color: var(--color-content-tertiary);
 }
 .np-table-content--reversed {
@@ -272,6 +256,5 @@
   align-items: center;
 }
 .np-table-empty-data .status-circle {
-  margin-inline-end: 12px;
   margin-inline-end: var(--size-12);
 }

package/src/Table/Table.less

@@ -59,10 +59,18 @@
       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-position:
+      left center,
+      right center,
+      left center,
+      right center;
     background-repeat: no-repeat;
     background-color: var(--color-contrast-overlay);
-    background-size: 15px 100%, 15px 100%, 15px 100%, 15px 100%;
+    background-size:
+      15px 100%,
+      15px 100%,
+      15px 100%,
+      15px 100%;
     background-attachment: local, local, scroll, scroll;
     overflow-x: auto;
     border-radius: @table-inner-border-radius;
@@ -188,7 +196,8 @@
 
   &-header.np-table-header--right,
   &-cell.np-table-cell--right {
-    > .np-text-body-default {
+    > .np-text-body-default,
+    > .wds-text-body-default {
       text-align: right;
     }
   }
@@ -222,8 +231,8 @@
       padding-top: 5px;
       padding-bottom: 5px;
       white-space: nowrap;
-      line-height: var(--line-height-22);
-      letter-spacing: var(--letter-spacing-sm);
+      line-height: var(--wds-line-height-title-subsection);
+      letter-spacing: var(--wds-letter-spacing-title-subsection);
     }
 
     &--error {
@@ -249,7 +258,8 @@
     }
 
     &--currency {
-      .np-text-body-default {
+      .np-text-body-default,
+      .wds-text-body-default {
         white-space: nowrap;
       }
     }
@@ -266,7 +276,8 @@
       padding: 0;
     }
 
-    .np-text-body-default-bold {
+    .np-text-body-default-bold,
+    .wds-text-body-default-bold {
       display: flex;
       align-items: center;
       color: var(--color-content-primary);
@@ -306,11 +317,11 @@
     &-media {
       flex-shrink: 0;
     }
-    
+
     &-body {
       display: flex;
       flex-direction: column;
-      font-size: var(--font-size-12);
+      font-size: var(--wds-font-size-nav);
       color: var(--color-content-tertiary);
     }
 

package/src/Tabs/Tab/Tab.tsx

@@ -49,7 +49,7 @@ const Tab = forwardRef(function Tab(
   return (
     <li
       ref={reference}
-      className={clsx('tabs__tab', selected ? 'np-text-body-large-bold' : 'np-text-body-large', {
+      className={clsx('tabs__tab', selected ? 'wds-text-body-large-bold' : 'wds-text-body-large', {
         'tabs__tab--selected': selected,
         clickable: !disabled,
         disabled,

package/src/Tabs/Tabs.css

@@ -5,35 +5,27 @@
   display: inline-block;
   outline: none;
   text-align: center;
-  padding: 8px;
   padding: var(--size-8);
   margin-block-end: -2px;
-  color: #37517e;
   color: var(--color-content-primary);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
   transition: color 0.15s ease-in-out;
 }
 .np-theme-personal .tabs__tab {
-  color: #5d7079;
   color: var(--color-content-secondary);
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--wds-font-weight-body-regular);
 }
 .tabs__tab--selected {
-  color: #0097c7;
   color: var(--color-content-accent);
 }
 .np-theme-personal .tabs__tab--selected {
   color: var(--color-interactive-primary);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
 }
 .tabs__tab__content {
   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 {
@@ -43,7 +35,6 @@
 }
 @media (min-width: 1160px) {
   .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 {
@@ -52,7 +43,6 @@
 }
 @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 {
@@ -63,13 +53,10 @@
   list-style: none;
   padding: 0;
   margin: 0;
-  border-block-end: 1px solid rgba(0,0,0,0.10196);
-  border-block-end: 1px solid #0000001a;
   border-block-end: 1px solid var(--color-border-neutral);
 }
 .tabs__line {
   block-size: 2px;
-  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
   transition: transform cubic-bezier(0, 0.94, 0.62, 1) 350ms;
   position: relative;
@@ -85,7 +72,6 @@
   display: flex;
 }
 .tabs__panel--selected {
-  padding: 8px;
   padding: var(--size-8);
 }
 .tabs__panel.enter {
@@ -98,8 +84,6 @@
   opacity: 0;
 }
 .tabs--inverse .tabs__tab-list {
-  border-block-end-color: rgba(0,0,0,0.10196);
-  border-block-end-color: #0000001a;
   border-block-end-color: var(--color-border-neutral);
 }
 .tabs--inverse .tabs__tab:not(.tabs__tab--selected) {
@@ -107,10 +91,8 @@
 }
 .tabs.tabs--auto-width .tabs__tab {
   display: inline-flex;
-  min-block-size: 40px;
   min-block-size: var(--size-40);
   padding-block: 0;
-  padding-inline: 12px;
   padding-inline: var(--size-12);
   justify-content: center;
   align-items: center;
@@ -119,7 +101,6 @@
 @media (min-width: 600px) {
   .tabs.tabs--auto-width .tabs__tab {
     padding-block: 0;
-    padding-inline: 24px;
     padding-inline: var(--size-24);
   }
 }

package/src/Tabs/Tabs.less

@@ -16,12 +16,12 @@
     padding: var(--size-8);
     margin-bottom: -@line-thickness;
     color: var(--color-content-primary);
-    font-weight: var(--font-weight-semi-bold);
+    font-weight: var(--wds-font-weight-body-bold);
     transition: color @short-transition-duration @transition-timing-function;
 
     .np-theme-personal & {
       color: var(--color-content-secondary);
-      font-weight: var(--font-weight-regular);
+      font-weight: var(--wds-font-weight-body-regular);
     }
 
     &--selected {
@@ -29,7 +29,7 @@
 
       .np-theme-personal & {
         color: var(--color-interactive-primary);
-        font-weight: var(--font-weight-semi-bold);
+        font-weight: var(--wds-font-weight-body-bold);
       }
     }
 

package/src/Tabs/_stories/Tabs.test.story.tsx

@@ -39,8 +39,10 @@ export const RTLDiff: Story = {
     ];
 
     return (
-      <>
-        <div style={{ marginBottom: 32 }}>
+      <div
+        style={{ display: 'grid', gap: '2rem', width: '100%', gridTemplateRows: 'repeat(4, 6lh)' }}
+      >
+        <div>
           <h4>{i18n.blockFirstSelected}</h4>
           <Tabs
             name="rtl-block-first"
@@ -50,7 +52,7 @@ export const RTLDiff: Story = {
             onTabSelect={() => {}}
           />
         </div>
-        <div style={{ marginBottom: 32 }}>
+        <div>
           <h4>{i18n.blockSecondSelected}</h4>
           <Tabs
             name="rtl-block-second"
@@ -60,7 +62,7 @@ export const RTLDiff: Story = {
             onTabSelect={() => {}}
           />
         </div>
-        <div style={{ marginBottom: 32 }}>
+        <div>
           <h4>{i18n.autoFirstSelected}</h4>
           <Tabs
             name="rtl-auto-first"
@@ -70,7 +72,7 @@ export const RTLDiff: Story = {
             onTabSelect={() => {}}
           />
         </div>
-        <div style={{ marginBottom: 32 }}>
+        <div>
           <h4>{i18n.autoSecondSelected}</h4>
           <Tabs
             name="rtl-auto-second"
@@ -80,7 +82,7 @@ export const RTLDiff: Story = {
             onTabSelect={() => {}}
           />
         </div>
-      </>
+      </div>
     );
   },
   ...withRTLDiff({

package/src/Tag/Tag.css

@@ -11,10 +11,8 @@
 }
 .wds-tag--small {
   border-radius: 6px;
-  font-size: 0.75rem;
-  font-size: var(--font-size-12);
+  font-size: var(--wds-font-size-nav);
   padding-block: 1px;
-  padding-inline: 4px;
   padding-inline: var(--size-4);
 }
 .wds-tag--large {

package/src/Tag/Tag.less

@@ -10,7 +10,7 @@
 
   &--small {
     border-radius: 6px;
-    font-size: var(--font-size-12);
+    font-size: var(--wds-font-size-nav);
     padding-block: 1px;
     padding-inline: var(--size-4);
   }

package/src/Tag/Tag.tsx

@@ -58,7 +58,7 @@ const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(
           'wds-tag',
           `wds-tag--${size}`,
           `wds-tag--${sentiment}`,
-          'np-text-body-default-bold',
+          'wds-text-body-default-bold',
           className,
         )}
       >

package/src/Tag/_stories/Tag.story.tsx

@@ -29,7 +29,7 @@ const PHOTO = '../card-payment-bakery.webp';
 
 const Label = ({ children }: { children: ReactNode }) => (
   <span
-    className="np-text-body-default"
+    className="wds-text-body-default"
     style={{
       color: 'var(--color-content-secondary)',
       textTransform: 'capitalize',

package/src/Tile/Tile.css

@@ -1,11 +1,9 @@
 .np-tile {
   min-inline-size: 120px;
-  border-radius: 10px;
   border-radius: var(--radius-small);
   inline-size: 100%;
 }
 .np-theme-personal .np-tile {
-  background-color: rgba(134,167,189,0.10196);
   background-color: var(--color-background-neutral);
 }
 .np-theme-personal .np-tile .tw-avatar .tw-avatar__content {
@@ -13,7 +11,6 @@
 }
 .np-tile.decision {
   margin-block-start: 0;
-  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-neutral);
 }
 .np-theme-personal .np-tile.decision {
@@ -25,8 +22,8 @@
 .np-theme-personal .np-tile.decision:active {
   background-color: var(--color-background-neutral-active);
 }
-.np-theme-personal .np-tile.decision .np-text-body-default {
-  color: #5d7079;
+.np-theme-personal .np-tile.decision .np-text-body-default,
+.np-theme-personal .np-tile.decision .wds-text-body-default {
   color: var(--color-content-secondary);
 }
 .np-tile.np-decision__tile--fixed-width {
@@ -36,9 +33,7 @@
   inline-size: 100%;
 }
 .np-tile__description {
-  color: #5d7079;
   color: var(--color-content-secondary);
-  margin-block-start: 12px;
   margin-block-start: var(--size-12);
   display: inline-block;
 }
@@ -46,23 +41,17 @@
   inline-size: 260px;
 }
 .np-tile--small .np-tile__description {
-  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .np-tile:hover .tw-avatar {
   pointer-events: none;
 }
 .np-tile:hover .tw-avatar .tw-avatar__content {
-  background-color: #ffffff;
   background-color: var(--color-background-screen);
 }
 .np-tile__description {
-  color: #5d7079;
   color: var(--color-content-secondary);
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-  line-height: 1.5;
-  line-height: var(--line-height-body);
-  margin-block-start: 12px;
+  font-weight: var(--wds-font-weight-body-regular);
+  line-height: var(--wds-line-height-body);
   margin-block-start: var(--size-12);
 }

package/src/Tile/Tile.less

@@ -28,7 +28,8 @@
         background-color: var(--color-background-neutral-active);
       }
 
-      .np-text-body-default {
+      .np-text-body-default,
+      .wds-text-body-default {
         color: var(--color-content-secondary);
       }
     }
@@ -71,7 +72,7 @@
 
 .np-tile__description {
   color: var(--color-content-secondary);
-  font-weight: var(--font-weight-regular);
-  line-height: var(--line-height-body);
+  font-weight: var(--wds-font-weight-body-regular);
+  line-height: var(--wds-line-height-body);
   margin-top: var(--size-12);
 }

package/src/Typeahead/Typeahead.css

@@ -7,11 +7,8 @@
 .typeahead .dropdown-menu {
   max-inline-size: 100%;
   inline-size: 100%;
-  margin-block-start: 8px;
   margin-block-start: var(--size-8);
-  scroll-padding-top: 8px;
   scroll-padding-top: var(--size-8);
-  scroll-padding-bottom: 8px;
   scroll-padding-bottom: var(--size-8);
   --ring-outline-offset: calc(-1 * var(--ring-outline-width));
 }
@@ -25,7 +22,6 @@
 .np-theme-personal--forest-green .typeahead .dropdown-menu,
 .np-theme-personal--bright-green .typeahead .dropdown-menu,
 .np-theme-personal--dark .typeahead .dropdown-menu {
-  background-color: #ffffff;
   background-color: var(--color-background-elevated);
 }
 .typeahead--multiple .np-chip {
@@ -75,21 +71,17 @@
   inline-size: auto;
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input-container {
-  padding-inline-start: 8px;
   padding-inline-start: var(--size-8);
 }
 .typeahead--multiple.typeahead--has-value .input-group-addon + .typeahead__input-container {
   padding-inline-start: 0;
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input {
-  margin-block-end: calc(-1 * 8px + 1px);
   margin-block-end: calc(-1 * var(--size-8) + 1px);
-  margin-inline-start: 4px;
   margin-inline-start: var(--size-4);
 }
 .typeahead--multiple.typeahead--has-value .typeahead__input-wrapper::after {
   content: "";
-  block-size: calc(8px - 1);
   block-size: calc(var(--size-8) - 1);
   inline-size: 100%;
 }
@@ -109,7 +101,6 @@
   margin: 0;
 }
 .typeahead--prompt {
-  margin-block-start: 4px;
   margin-block-start: var(--size-4);
 }
 .typeahead-sm.typeahead--multiple .typeahead__input-container {
@@ -125,11 +116,9 @@
   min-block-size: var(--input-height-large);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input {
-  padding-block-start: calc(8px - 1);
   padding-block-start: calc(var(--size-8) - 1);
 }
 .typeahead-lg.typeahead--multiple .typeahead__input-wrapper {
-  padding-block-end: 8px;
   padding-block-end: var(--size-8);
   margin: 0;
 }
@@ -174,19 +163,18 @@
   color: var(--color-interactive-primary);
 }
 .np-theme-personal .typeahead .tw-icon-search {
-  color: #c9cbce;
   color: var(--color-interactive-secondary);
 }
 .np-theme-personal .typeahead .np-chip {
   margin-block-start: 9px !important;
 }
-.np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
-  padding-inline-end: 16px;
+.np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold,
+.np-theme-personal .typeahead .np-chip--removable .wds-text-body-default-bold {
   padding-inline-end: var(--size-16);
 }
 @media (max-width: 320px) {
-  .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold {
-    padding-inline-end: 32px;
+  .np-theme-personal .typeahead .np-chip--removable .np-text-body-default-bold,
+  .np-theme-personal .typeahead .np-chip--removable .wds-text-body-default-bold {
     padding-inline-end: var(--size-32);
   }
 }

package/src/Typeahead/Typeahead.less

@@ -232,7 +232,8 @@
       margin-top: 9px !important;
     }
     .np-chip--removable {
-      .np-text-body-default-bold {
+      .np-text-body-default-bold,
+      .wds-text-body-default-bold {
         padding-right: var(--size-16);
         @media (--screen-400-zoom) {
           padding-right: var(--size-32);

package/src/Typeahead/TypeaheadOption/TypeaheadOption.css

@@ -2,9 +2,7 @@
   color: #ffffff;
 }
 .typeahead__option.tw-dropdown-item--focused {
-  box-shadow: inset 0 0 0 1px #c9cbce;
   box-shadow: inset 0 0 0 1px var(--color-interactive-secondary);
-  border-radius: 10px;
   border-radius: var(--radius-small);
 }
 .dropdown-menu > li.typeahead__option:not(.active):not(.selected) > .dropdown-item:not([disabled]):not(.disabled):hover,

package/src/Typeahead/TypeaheadOption/TypeaheadOption.tsx

@@ -30,10 +30,10 @@ const Option = forwardRef<HTMLLIElement, TypeaheadOptionProps<any>>((props, ref)
     >
       <a className="dropdown-item" href="#" tabIndex={-1} onClick={onClick}>
         <Highlight value={label} query={query} />
-        {note && <span className="np-text-body-default m-l-1">{note}</span>}
+        {note && <span className="wds-text-body-default m-l-1">{note}</span>}
         {secondary && (
           <Highlight
-            className="np-text-body-default text-ellipsis"
+            className="wds-text-body-default text-ellipsis"
             value={secondary}
             query={query}
           />