@transferwise/components 0.0.0-experimental-74e7404 → 0.0.0-experimental-4560f77

package/build/styles/css/popovers.css

@@ -1,4 +1,36 @@
-.close {
+.popover,
+.popover-content {
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .popover,
+  .popover-content {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .popover,
+    .popover-content {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .popover,
+    .popover-content {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .popover,
+  .popover-content {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .popover,
+    .popover-content {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.close {
   float: inline-end;
   color: #0097c7;
   color: var(--color-content-accent);
@@ -66,12 +98,6 @@ button.close {
   word-break: normal;
   word-spacing: normal;
   word-wrap: normal;
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
@@ -258,20 +284,8 @@ button.close {
   margin-inline: 0;
 }
 .popover-title {
-  padding: 0;
   margin: 0;
-  color: #37517e;
-  color: var(--color-content-primary);
-  line-height: 1.2;
-  line-height: var(--line-height-title);
-  letter-spacing: 0;
-  word-wrap: break-word;
-  font-size: 1.125rem;
-  font-size: var(--font-size-18);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  letter-spacing: -0.014em;
-  line-height: 135%;
+  padding: 0;
   background-color: #ffffff;
   background-color: var(--color-background-screen);
   border-block-end: 0;
@@ -279,50 +293,11 @@ button.close {
   border-start-end-radius: 2px;
   border-end-end-radius: 0;
   border-end-start-radius: 0;
+  color: #37517e !important;
   color: var(--color-content-primary) !important;
 }
-@supports (hyphenate-limit-chars: 1) {
-  .popover-title {
-    hyphens: auto;
-    hyphenate-limit-chars: 7 3;
-  }
-  @media (min-width: 840px) {
-    .popover-title {
-      hyphenate-limit-chars: 8 3;
-    }
-  }
-  @media (min-width: 1160px) {
-    .popover-title {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-}
-@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-  .popover-title {
-    hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-  }
-  @media (min-width: 1160px) {
-    .popover-title {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}
-.popover-title + p,
-.popover-title + ul:not(.list-unstyled),
-.popover-title + ol:not(.list-unstyled) {
-  margin-block-start: 8px;
-  margin-block-start: var(--size-8);
-}
 .popover-content {
   padding: 0;
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   color: #5d7079;
   color: var(--color-content-secondary);

package/build/styles/css/sequences.css

@@ -131,6 +131,10 @@
 .sequence > li .h2,
 .sequence > li .h3,
 .sequence > li .h4,
+.sequence > li .wds-text-title-screen,
+.sequence > li .wds-text-title-section,
+.sequence > li .wds-text-title-subsection,
+.sequence > li .wds-text-title-body,
 .sequence > li .btn-toolbar {
   margin-block-end: 16px;
 }
@@ -221,7 +225,8 @@
 }
 .sequence-inverse > .active .small,
 .sequence-inverse > .active .body-2,
-.sequence-inverse > .active .np-text-body-default {
+.sequence-inverse > .active .np-text-body-default,
+.sequence-inverse > .active .wds-text-body-default {
   color: #5d7079;
   color: var(--color-content-secondary);
 }

package/build/styles/css/tooltip.css

@@ -1,4 +1,30 @@
-.tooltip {
+.tooltip-inner {
+  word-wrap: break-word;
+}
+@supports (hyphenate-limit-chars: 1) {
+  .tooltip-inner {
+    hyphens: auto;hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .tooltip-inner {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .tooltip-inner {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .tooltip-inner {
+    hyphens: auto;-webkit-hyphenate-limit-before: 3;-webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .tooltip-inner {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}.tooltip {
   position: absolute;
   z-index: 1070;
   display: block;
@@ -45,12 +71,6 @@
   padding-inline: 5px;
 }
 .tooltip-inner {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
   word-wrap: break-word;
   max-inline-size: 200px;
   min-inline-size: 120px;

package/build/styles/less/neptune-tokens.less

@@ -171,54 +171,6 @@
 @space-medium: 32px;
 @space-large: 40px;
 @space-x-large: 56px;
-@font-size-12: 0.75rem;
-@font-size-14: 0.875rem;
-@font-size-16: 1rem;
-@font-size-18: 1.125rem;
-@font-size-20: 1.25rem;
-@font-size-22: 1.375rem;
-@font-size-24: 1.5rem;
-@font-size-26: 1.625rem;
-@font-size-28: 1.75rem;
-@font-size-30: 1.875rem;
-@font-size-32: 2rem;
-@letter-spacing-xxs: 0.005em;
-@letter-spacing-xs: 0.01em;
-@letter-spacing-sm: 0.0125em;
-@letter-spacing-md: 0.015em;
-@letter-spacing-lg: 0.02em;
-@letter-spacing-xl: 0.025em;
-@letter-spacing-negative-xxs: -0.005em;
-@letter-spacing-negative-xs: -0.01em;
-@letter-spacing-negative-sm: -0.0125em;
-@letter-spacing-negative-md: -0.015em;
-@letter-spacing-negative-lg: -0.02em;
-@letter-spacing-negative-xl: -0.025em;
-@letter-spacing-negative-xxl: -0.03em;
-@letter-spacing-negative-xxxl: -0.04em;
-@letter-spacing-negative-xxxxl: -0.05em;
-@line-height-18: 1.125rem;
-@line-height-20: 1.25rem;
-@line-height-22: 1.375rem;
-@line-height-24: 1.5rem;
-@line-height-28: 1.75rem;
-@line-height-30: 1.875rem;
-@line-height-32: 2rem;
-@line-height-34: 2.125rem;
-@line-height-36: 2.25rem;
-@line-height-42: 2.625rem;
-@line-height-48: 3rem;
-@line-height-title: 1.2;
-@line-height-body: 1.5;
-@line-height-control: 1.2;
-@font-weight-light: 300;
-@font-weight-regular: 400;
-@font-weight-medium: 500;
-@font-weight-semi-bold: 600;
-@font-weight-bold: 700;
-@font-weight-black: 900;
-@font-family-regular: 'Inter', Helvetica, Arial, sans-serif;
-@font-family-display: 'Wise Sans', 'Inter', sans-serif;
 
 // Do not edit directly, this file was auto-generated.