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

package/src/Calendar/TableLink/TableLink.css

@@ -2,16 +2,12 @@
 .wds-Calendar__option--month,
 .wds-Calendar__option--year {
   inline-size: 100%;
-  padding-block: 4px;
   padding-block: var(--size-4);
   padding-inline: 0;
   border: transparent;
-  border-radius: 10px;
   border-radius: var(--radius-small);
   background-color: transparent;
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  color: #37517e;
+  font-weight: var(--wds-font-weight-title-screen);
   color: var(--color-content-primary);
 }
 @media (max-width: 320px) {
@@ -33,7 +29,6 @@
 .wds-Calendar__option--month[aria-disabled="true"],
 .wds-Calendar__option--year[aria-disabled="true"] {
   --ring-outline-color: var(--color-sentiment-content-primary);
-  color: #768e9c;
   color: var(--color-content-tertiary);
   cursor: not-allowed;
 }
@@ -91,18 +86,14 @@
 .wds-Calendar__option--day[aria-disabled="true"].today,
 .wds-Calendar__option--month[aria-disabled="true"].today,
 .wds-Calendar__option--year[aria-disabled="true"].today {
-  text-decoration-color: #768e9c;
   text-decoration-color: var(--color-content-tertiary);
 }
 .wds-Calendar__option--day {
-  block-size: 40px;
-  block-size: var(--size-40);
-  border-radius: 9999px;
+  --circleSize: var(--size-40);
+  block-size: var(--circleSize);
+  line-height: var(--circleSize);
+  inline-size: var(--circleSize);
   border-radius: var(--radius-full);
-  line-height: 40px;
-  line-height: var(--size-40);
-  inline-size: 40px;
-  inline-size: var(--size-40);
   padding: 0;
   display: inline-flex;
   align-items: center;
@@ -114,3 +105,9 @@
   text-decoration-thickness: 2px;
   text-underline-offset: 4px;
 }
+.wds-Calendar__option--year {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  block-size: calc(1rlh * 1.6);
+}

package/src/Calendar/TableLink/TableLink.less

@@ -11,7 +11,7 @@
   border: transparent;
   border-radius: var(--radius-small);
   background-color: transparent;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-title-screen);
   color: var(--color-content-primary);
 
   &:focus {
@@ -51,10 +51,11 @@
 }
 
 .wds-Calendar__option--day {
-  height: var(--size-40);
+  --circleSize: var(--size-40);
+  height: var(--circleSize);
+  line-height: var(--circleSize);
+  width: var(--circleSize);
   border-radius: var(--radius-full);
-  line-height: var(--size-40);
-  width: var(--size-40);
   padding: 0;
   display: inline-flex;
   align-items: center;
@@ -66,3 +67,12 @@
     text-underline-offset: 4px;
   }
 }
+
+.wds-Calendar__option--year{
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(1rlh * 1.6);
+}
+
+

package/src/Calendar/TableLink/TableLink.tsx

@@ -96,7 +96,7 @@ const TableLink = ({
       aria-pressed={active}
       className={clsx(
         `wds-Calendar__option--${type}`,
-        `tw-date-lookup-${type}-option np-text-body-default-bold`,
+        `tw-date-lookup-${type}-option wds-text-body-default-bold`,
         { active: !!active },
         { today: !!today },
         { disabled: !!isUnavailable },

package/src/Carousel/Carousel.css

@@ -8,14 +8,11 @@
   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: 839.98px) {
   .carousel {
-    gap: 8px;
     gap: var(--size-8);
   }
 }
@@ -23,9 +20,7 @@
   display: flex;
   align-items: center;
   overflow: hidden;
-  min-block-size: 32px;
   min-block-size: var(--size-32);
-  padding-block-end: 16px;
   padding-block-end: var(--size-16);
 }
 .carousel__card,
@@ -43,9 +38,7 @@
   text-align: start;
   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;
@@ -64,7 +57,6 @@
   }
   .carousel {
     margin-block: 0;
-    margin-inline: calc(-1 * 8px);
     margin-inline: calc(-1 * var(--size-8));
   }
 }
@@ -97,25 +89,18 @@
 .carousel__card-content {
   block-size: 100%;
   font-weight: normal;
-  padding: 24px;
   padding: var(--size-24);
 }
 .carousel__indicators {
   display: flex;
   justify-content: center;
-  padding-block-start: 8px;
   padding-block-start: var(--size-8);
-  gap: 8px;
   gap: var(--size-8);
 }
 .carousel__indicator {
-  inline-size: 12px;
   inline-size: var(--size-12);
-  block-size: 12px;
   block-size: var(--size-12);
-  border-radius: 8px;
   border-radius: var(--size-8);
-  background: #c9cbce;
   background: var(--color-interactive-secondary);
   border: none;
   -webkit-appearance: none;
@@ -124,12 +109,10 @@
   transition: all 0.1s;
 }
 .carousel__indicator:hover {
-  inline-size: 16px;
   inline-size: var(--size-16);
 }
 .carousel__indicator--selected,
 .carousel__indicator--selected:hover {
   background: var(--color-interactive-primary);
-  inline-size: 24px;
   inline-size: var(--size-24);
 }

package/src/CheckboxButton/CheckboxButton.css

@@ -1,8 +1,6 @@
 .np-checkbox-button input[type="checkbox"] {
   position: absolute;
-  inline-size: 24px;
   inline-size: var(--size-24);
-  block-size: 24px;
   block-size: var(--size-24);
   opacity: 0;
 }
@@ -28,7 +26,6 @@
   block-size: 2px;
   inset-block-start: 55%;
   inset-inline-start: 50%;
-  background: #ffffff;
   background: var(--color-background-screen);
   transform: translate(-50%, -50%);
 }
@@ -36,6 +33,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/Chip.css

@@ -1,23 +1,16 @@
 .np-chip {
   background-color: transparent;
-  border: 1px solid rgba(0,0,0,0.10196);
   border: 1px solid var(--color-border-neutral);
-  border-radius: 16px;
   border-radius: var(--size-16);
-  color: #5d7079;
   color: var(--color-content-secondary);
-  block-size: 32px;
   block-size: var(--size-32);
-  margin-inline-end: 8px;
   margin-inline-end: var(--size-8);
   padding-block: 0;
-  padding-inline: 12px;
   padding-inline: var(--size-12);
   transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
 }
 @media (max-width: 320px) {
   .np-chip {
-    block-size: 40px;
     block-size: var(--size-40);
   }
 }
@@ -34,33 +27,26 @@
   margin-inline-end: 0;
 }
 .np-chip:active {
-  background-color: #0081ba;
   background-color: var(--color-interactive-accent-active);
-  border-color: #0081ba;
   border-color: var(--color-interactive-accent-active);
   color: #fff;
 }
 .np-chip--selected {
   color: #fff;
-  background-color: #00a2dd;
   background-color: var(--color-interactive-accent);
-  border-color: #00a2dd;
   border-color: var(--color-interactive-accent);
   pointer-events: none;
 }
 .np-chip--selected:hover,
 .np-chip--selected:active {
   color: #fff;
-  background-color: #008fc9;
   background-color: var(--color-interactive-accent-hover);
-  border-color: #008fc9;
   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;
 }
@@ -84,29 +70,23 @@
   border-color: var(--color-sentiment-negative-active) !important;
 }
 .np-theme-personal .np-chip {
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
   color: var(--color-interactive-primary);
   padding-block: 0;
-  padding-inline: 16px;
   padding-inline: var(--size-16);
-  border-color: #c9cbce;
   border-color: var(--color-interactive-secondary);
 }
 .np-theme-personal .np-chip:not(.disabled):not(:disabled):hover {
   color: var(--color-interactive-primary-hover);
   background-color: var(--color-background-screen-hover);
-  border-color: #b5b7ba;
   border-color: var(--color-interactive-secondary-hover);
 }
 .np-theme-personal .np-chip:not(.disabled):not(:disabled):active {
   color: var(--color-interactive-primary-active);
   background-color: var(--color-background-screen-active);
-  border-color: #a7a9ab;
   border-color: var(--color-interactive-secondary-active);
 }
 .np-theme-personal .np-chip .np-close-button {
-  margin-inline-end: calc(8px * -1);
   margin-inline-end: calc(var(--size-8) * -1);
   border-radius: inherit;
 }
@@ -134,13 +114,13 @@
 .np-theme-personal .np-chip.np-chip--removable {
   position: relative;
 }
-.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
-  padding-inline-end: 24px;
+.np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
+.np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
   padding-inline-end: var(--size-24);
 }
 @media (max-width: 320px) {
-  .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold {
-    padding-inline-end: 48px;
+  .np-theme-personal .np-chip.np-chip--removable .np-text-body-default-bold,
+  .np-theme-personal .np-chip.np-chip--removable .wds-text-body-default-bold {
     padding-inline-end: var(--size-48);
   }
 }
@@ -149,7 +129,6 @@
   inset-block-start: 0;
   inset-inline-start: 0;
   position: absolute;
-  padding-inline-end: 8px;
   padding-inline-end: var(--size-8);
   block-size: 100%;
   inline-size: 100%;

package/src/Chips/Chip/Chip.less

@@ -90,7 +90,7 @@
   }
 
   .np-theme-personal & {
-    font-weight: var(--font-weight-semi-bold);
+    font-weight: var(--wds-font-weight-body-bold);
     color: var(--color-interactive-primary);
     padding: 0 var(--size-16);
     border-color: var(--color-interactive-secondary);
@@ -137,7 +137,8 @@
     &.np-chip--removable {
       position: relative;
 
-      .np-text-body-default-bold {
+      .np-text-body-default-bold,
+      .wds-text-body-default-bold {
         padding-right: var(--size-24);
 
         @media (--screen-400-zoom) {

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

@@ -163,7 +163,7 @@ export const RTLDiff: Story = {
       <>
         {/* Choice mode: chip row order reverses in RTL */}
         <Chips
-          chips={amountChips}
+          chips={amountChips.toSpliced(0, 1)}
           selected={300}
           multiple={false}
           aria-label={i18n.transferAmount}

package/src/CircularButton/_stories/CircularButton.story.tsx

@@ -232,13 +232,8 @@ export const SentimentAwareness: Story = {
             style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
           >
             <div
-              style={{
-                width: '120px',
-                fontSize: '11px',
-                fontWeight: 'bold',
-                textAlign: 'left',
-                paddingLeft: '8px',
-              }}
+              className="wds-text-body-default-bold p-l-1 text-align-left"
+              style={{ width: '12ch' }}
             >
               {sentiment} (base)
             </div>
@@ -246,7 +241,7 @@ export const SentimentAwareness: Story = {
               <div
                 key={button.label}
                 style={{
-                  width: '100px',
+                  width: '13ch',
                   display: 'flex',
                   justifyContent: 'center',
                 }}
@@ -270,13 +265,8 @@ export const SentimentAwareness: Story = {
             style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
           >
             <div
-              style={{
-                width: '120px',
-                fontSize: '11px',
-                fontWeight: 'bold',
-                textAlign: 'left',
-                paddingLeft: '8px',
-              }}
+              className="wds-text-body-default-bold p-l-1 text-align-left"
+              style={{ width: '12ch' }}
             >
               {sentiment} (elevated)
             </div>
@@ -284,7 +274,7 @@ export const SentimentAwareness: Story = {
               <div
                 key={button.label}
                 style={{
-                  width: '100px',
+                  width: '13ch',
                   display: 'flex',
                   justifyContent: 'center',
                 }}

package/src/Container/Container.css

@@ -6,7 +6,6 @@
   --wds-container-width-compact: 600px;
   inline-size: 100%;
   margin-inline: auto;
-  padding-inline: 16px;
   padding-inline: var(--wds-container-padding-inline);
 }
 @media (min-width: 600px) {

package/src/DateInput/_stories/DateInput.story.tsx

@@ -37,5 +37,6 @@ export const Basic: Story = {
     onChange: fn(),
     onBlur: fn(),
     onFocus: fn(),
+    size: 'lg',
   },
 } satisfies Story;

package/src/DateLookup/DateTrigger/DateTrigger.css

@@ -5,14 +5,11 @@
   inline-size: 100%;
 }
 .np-theme-personal .np-date-trigger {
-  padding-inline-start: 16px;
   padding-inline-start: var(--size-16);
 }
 .clear-btn {
   position: absolute;
-  inset-block-start: 8px;
   inset-block-start: var(--size-8);
-  inset-inline-end: 8px;
   inset-inline-end: var(--size-8);
 }
 .clear-btn--sm {

package/src/Decision/Decision.css

@@ -1,17 +1,14 @@
 .np-decision .decision {
   display: flex;
 }
-.np-decision__tile--small .np-text-title-subsection {
-  font-size: 1rem;
-  font-size: var(--font-size-16);
-  line-height: 1.2;
-  line-height: var(--line-height-title);
+.np-decision__tile--small .np-text-title-subsection,
+.np-decision__tile--small .wds-text-title-subsection {
+  font-size: var(--wds-font-size-body-large);
+  line-height: var(--wds-line-height-body-large);
 }
 .np-decision:not(.flex-column) {
-  gap: 24px;
   gap: var(--size-24);
 }
 .np-decision:not(.flex-column).np-decision--small {
-  gap: 16px;
   gap: var(--size-16);
 }

package/src/Decision/Decision.less

@@ -4,9 +4,10 @@
   }
 
   &__tile--small {
-    .np-text-title-subsection {
-      font-size: var(--font-size-16);
-      line-height: var(--line-height-title);
+    .np-text-title-subsection,
+    .wds-text-title-subsection {
+      font-size: var(--wds-font-size-body-large);
+      line-height: var(--wds-line-height-body-large);
     }
   }
 

package/src/DefinitionList/DefinitionList.css

@@ -31,22 +31,17 @@
     flex: 1;
     min-inline-size: 150px;
     max-inline-size: 30%;
-    margin-inline-end: 8px;
     margin-inline-end: var(--size-8);
   }
   .tw-definition-list.tw-definition-list--horizontal .tw-definition-list__item dd {
     flex: 1;
     align-items: center;
-    margin-block-end: 8px;
     margin-block-end: var(--size-8);
   }
   .tw-definition-list.tw-definition-list--horizontal-right-aligned {
     display: grid;
     grid-template-columns: minmax(0, max-content) minmax(0, max-content);
-    grid-column-gap: 52px;
     grid-column-gap: var(--size-52);
-    -moz-column-gap: 52px;
-         column-gap: 52px;
     -moz-column-gap: var(--size-52);
          column-gap: var(--size-52);
     justify-content: space-between;
@@ -67,6 +62,5 @@
   }
 }
 .np-theme-personal .tw-definition-list dt {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }

package/src/DefinitionList/_stories/DefinitionList.story.tsx

@@ -32,7 +32,7 @@ const definitions = [
   },
   {
     title: 'Use wrapper elements to style',
-    value: <span className="np-text-title-subsection">89.45GBP</span>,
+    value: <span className="wds-text-title-subsection">89.45GBP</span>,
     key: 'second',
   },
   {

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

@@ -202,16 +202,21 @@ export const RTLDiff: Story = {
       },
     ];
 
+    const heights = {
+      plain: [7, 10, 7, 7, 7],
+      action: [9, 11, 7, 7, 7],
+    };
+
     return (
       <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--size-48)' }}>
-        {layouts.map((layout) => (
-          <section key={layout}>
+        {layouts.map((layout, index) => (
+          <section key={layout} style={{ height: `${heights.plain[index]}lh` }}>
             <h3 style={{ fontSize: 14, margin: '0 0 var(--size-8)' }}>{layout}</h3>
             <DefinitionList layout={layout} definitions={rtlDefinitions} />
           </section>
         ))}
-        {layouts.map((layout) => (
-          <section key={`${layout}-action`}>
+        {layouts.map((layout, index) => (
+          <section key={`${layout}-action`} style={{ height: `${heights.action[index]}lh` }}>
             <h3 style={{ fontSize: 14, margin: '0 0 var(--size-8)' }}>
               {layout} {i18n.withActionButtons}
             </h3>

package/src/Display/_stories/Display.story.tsx

@@ -118,27 +118,41 @@ export const Basic = () => {
 export const Numbers = () => {
   return (
     <>
-      <Title type={Typography.TITLE_SCREEN}>Display Number</Title>
+      <Title type={Typography.TITLE_SCREEN}>Display Number Small</Title>
       <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
+      <Display type={Typography.DISPLAY_NUMBER_SMALL}>
         <Money amount={1050.6} currency="UAH" />
       </Display>
       <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
+      <Display type={Typography.DISPLAY_NUMBER_SMALL}>
         <Money amount={10.17} currency="JPY" />
       </Display>
+
+      <Title type={Typography.TITLE_SCREEN}>Display Number Medium</Title>
       <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
+      <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
         <Money amount={0.01} currency="EUR" />
       </Display>
       <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
+      <Display type={Typography.DISPLAY_NUMBER_MEDIUM}>
         <Money amount={1000000} currency="EUR" />
       </Display>
+
+      <Title type={Typography.TITLE_SCREEN}>Display Number Large</Title>
       <hr />
-      <Display type={Typography.DISPLAY_NUMBER}>
+      <Display type={Typography.DISPLAY_NUMBER_LARGE}>
         <Money amount={1000000} currency="GBP" />
       </Display>
+      <hr />
+      <Display type={Typography.DISPLAY_NUMBER_LARGE}>
+        <Money amount={1050.6} currency="UAH" />
+      </Display>
+
+      <Title type={Typography.TITLE_SCREEN}>Display Number (Deprecated)</Title>
+      <hr />
+      <Display type={Typography.DISPLAY_NUMBER}>
+        <Money amount={1050.6} currency="UAH" />
+      </Display>
     </>
   );
 };

package/src/Divider/Divider.css

@@ -4,13 +4,10 @@
   --Divider-border-style: solid;
   --Divider-dash-length: 4px;
   --Divider-dash-spacing: 4px;
-  border-block-start: 4px solid rgba(0,0,0,0.10196);
-  border-block-start: 4px solid #0000001a;
   border-block-start: var(--Divider-border-width) var(--Divider-border-style) var(--Divider-border-color);
   display: inline-block;
   margin: 0;
   padding: 0;
-  block-size: 4px;
   block-size: var(--Divider-border-width);
   inline-size: 100%;
 }

package/src/Drawer/Drawer.css

@@ -15,14 +15,11 @@
   }
 }
 .np-drawer .np-drawer-header {
-  min-block-size: 56px;
   min-block-size: var(--size-56);
-  padding: 24px;
   padding: var(--size-24);
 }
 @media (max-width: 320px) {
   .np-drawer .np-drawer-header {
-    padding: 16px;
     padding: var(--size-16);
   }
 }
@@ -35,23 +32,19 @@
   background-color: transparent;
 }
 .np-drawer .np-drawer-footer {
-  padding: 16px;
   padding: var(--size-16);
 }
 .np-drawer .np-drawer-content {
   padding-block: 0;
-  padding-inline: 16px;
   padding-inline: var(--size-16);
 }
 @media (min-width: 840px) {
   .np-drawer .np-drawer-header,
   .np-drawer .np-drawer-footer {
-    padding: 24px;
     padding: var(--size-24);
   }
   .np-drawer .np-drawer-content {
     padding-block: 0;
-    padding-inline: 24px;
     padding-inline: var(--size-24);
   }
 }

package/src/Emphasis/Emphasis.css

@@ -1,31 +1,25 @@
 .emphasis {
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
   font-style: normal;
 }
 .emphasis--important {
-  color: #37517e;
   color: var(--color-content-primary);
 }
 .emphasis--positive {
-  color: #008026;
   color: var(--color-content-positive);
 }
 .np-theme-personal .emphasis--positive {
   color: var(--color-sentiment-positive);
 }
 .emphasis--negative {
-  color: #cf2929;
   color: var(--color-content-negative);
 }
 .np-theme-personal .emphasis--negative {
   color: var(--color-sentiment-negative);
 }
 .emphasis--warning {
-  color: #9a6500;
   color: var(--color-content-warning);
 }
 .np-theme-personal .emphasis--warning {
-  color: #5d7079;
   color: var(--color-content-secondary);
 }

package/src/Emphasis/Emphasis.less

@@ -1,5 +1,5 @@
 .emphasis {
-  font-weight: var(--font-weight-semi-bold);
+  font-weight: var(--wds-font-weight-body-bold);
   font-style: normal;
 }