@transferwise/neptune-css 14.9.2 → 14.9.4

package/dist/css/neptune-core.css

@@ -311,28 +311,6 @@ Add the correct display in Chrome and Safari.
 summary {
   display: list-item;
 }
-/* TODO: Remove utility imports to prevent duplicates */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-.sr-only-focusable:focus {
-  position: static;
-  width: auto;
-  height: auto;
-  padding: 0;
-  margin: 0;
-  overflow: visible;
-  clip: auto;
-  white-space: normal;
-}
 :root {
   --base-font-size: 16px;
   --font-family-regular: "Inter", Helvetica, Arial, sans-serif;
@@ -733,8 +711,7 @@ video {
   border-radius: var(--radius-small);
 }
 .img-circle {
-  border-radius: 9999px;
-  border-radius: var(--radius-full);
+  border-radius: 50%;
 }
 .disabled,
 :disabled {
@@ -742,6 +719,25 @@ video {
   opacity: 0.45;
   cursor: not-allowed !important;
 }
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+}
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+}
 /* stylelint-disable selector-max-empty-lines */
 /* DEPRECATED: use .np-text-*-title instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
@@ -916,60 +912,7 @@ h6,
   letter-spacing: -0.006em;
   line-height: 140%;
 }
-.body-1,
-.body-2,
-.body-3,
-.label,
-.value,
-.np-text-body-default {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-  line-height: 1.5;
-  line-height: var(--line-height-body);
-}
-.body-1,
-.np-text-body-default,
-.np-text-body-default-bold {
-  font-size: 1rem;
-  font-size: var(--font-size-16);
-}
-.np-text-body-default-bold {
-  font-weight: 800;
-  font-weight: var(--font-weight-bold);
-}
-.body-2 {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-}
-.body-3 {
-  font-size: 0.75rem;
-  font-size: var(--font-size-12);
-}
-.control-1,
-.control-2 {
-  color: #0097c7;
-  color: var(--color-content-accent);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  line-height: 1.2;
-  line-height: var(--line-height-title);
-}
-.control-1 {
-  font-size: 1rem;
-  font-size: var(--font-size-16);
-}
-.control-2 {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-}
-.label {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-}
-.value {
-  font-size: 1rem;
-  font-size: var(--font-size-16);
-}
+/* DEPRECATED: use .np-text-title-body instead */
 .lead {
   margin-bottom: 24px;
   margin-bottom: var(--size-24);
@@ -978,21 +921,9 @@ h6,
   line-height: 1.2;
   line-height: var(--line-height-title);
 }
-small,
-.small,
-.body-2 {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  line-height: 1.5;
-  line-height: var(--line-height-body);
-}
 .tiny {
   color: #5d7079;
   color: var(--color-content-secondary);
-  font-size: 0.75rem;
-  font-size: var(--font-size-12);
-  line-height: 1.5;
-  line-height: var(--line-height-body);
 }
 /* DEPRECATED: use .np-text-body-default instead */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
@@ -1003,6 +934,7 @@ small,
 .small,
 .tiny,
 body,
+small,
 .np-text-body-default {
   font-size: 0.875rem;
   font-size: var(--font-size-14);
@@ -1015,15 +947,13 @@ body,
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .control-2,
 .np-text-body-default-bold {
+  font-size: 0.875rem;
+  font-size: var(--font-size-14);
   line-height: 155%;
   letter-spacing: -0.006em;
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
-.np-text-body-default-bold {
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-}
 /* DEPRECATED: use .np-text-body-large instead  */
 /* stylelint-disable-next-line selector-list-comma-newline-after */
 .body-1,
@@ -1526,6 +1456,7 @@ a,
   font-weight: 600;
   font-weight: var(--font-weight-semi-bold);
 }
+/* DEPRECATED: use `.np-text-display-*` instead */
 .display-1 {
   margin-bottom: 24px;
   margin-bottom: var(--size-24);
@@ -1539,6 +1470,7 @@ a,
     font-size: 6.5rem;
   }
 }
+/* DEPRECATED: use `.np-text-display-*` instead */
 .display-2 {
   margin-bottom: 24px;
   margin-bottom: var(--size-24);
@@ -1552,6 +1484,7 @@ a,
     font-size: 5.5rem;
   }
 }
+/* DEPRECATED: use `.np-text-display-*` instead */
 .display-3 {
   margin-bottom: 8px;
   margin-bottom: var(--size-8);
@@ -1564,6 +1497,7 @@ a,
     font-size: 4.5rem;
   }
 }
+/* DEPRECATED: use `.np-text-display-*` instead */
 .display-4 {
   margin-bottom: 4px;
   margin-bottom: var(--size-4);
@@ -1577,6 +1511,7 @@ a,
     font-size: 3.5rem;
   }
 }
+/* DEPRECATED: use `.np-text-display-*` instead */
 .display-5 {
   margin-bottom: 4px;
   margin-bottom: var(--size-4);
@@ -1785,87 +1720,17 @@ kbd kbd {
   font-weight: var(--font-weight-bold);
   font-size: 100%;
 }
-/* TODO: Remove utility imports to prevent duplicates */
-.text-primary {
-  color: #37517e !important;
-  color: var(--color-content-primary) !important;
-  /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
-}
-.bg-primary .text-primary {
-  color: #ffffff !important;
-}
-.text-secondary {
-  color: #5d7079 !important;
-  color: var(--color-content-secondary) !important;
-}
-.text-muted {
-  color: #768e9c !important;
-  color: var(--color-content-tertiary) !important;
-}
-.text-accent,
-.text-info {
-  color: var(--color-interactive-primary) !important;
-  /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
-}
-.bg-primary .text-accent,
-.bg-primary .text-info {
-  color: #00b9ff !important;
-}
-.text-negative,
-.text-danger {
-  color: var(--color-sentiment-negative) !important;
-  /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
-}
-.bg-primary .text-negative,
-.bg-primary .text-danger {
-  color: #ffa6a9 !important;
-}
-.text-positive,
-.text-success {
-  color: var(--color-sentiment-positive) !important;
-  /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
-}
-.bg-primary .text-positive,
-.bg-primary .text-success {
-  color: #6fd698 !important;
-}
-/**
- * @deprecated This makes text inaccessible. Use background color in combination with `.text-primary` instead.
- */
-.text-warning {
-  color: var(--color-sentiment-warning) !important;
-  /* @DEPRECATED: .bg-primary use .bg-elevated or ThemeProvider with theme="forest-green" instead */
-}
-.bg-primary .text-warning {
-  color: #ffd184 !important;
-}
-/**
- * @deprecated Navy colors are obsolete.
- */
-.text-inverse {
-  color: #ffffff !important;
-}
-a.text-inverse:hover,
-a.text-inverse:focus {
-  color: #c9cbce !important;
-}
-.font-weight-normal {
-  font-weight: 400 !important;
-  font-weight: var(--font-weight-regular) !important;
-}
-.font-weight-semi-bold {
-  font-weight: 600 !important;
-  font-weight: var(--font-weight-semi-bold) !important;
+.text-xs-left {
+  text-align: left;
 }
-.font-weight-bold {
-  font-weight: 800 !important;
-  font-weight: var(--font-weight-bold) !important;
+[dir="rtl"] .text-xs-left {
+  text-align: right;
 }
-.text-max-width {
-  max-width: 600px;
+.text-xs-right {
+  text-align: right;
 }
-.text-word-break {
-  word-wrap: break-word;
+[dir="rtl"] .text-xs-right {
+  text-align: left;
 }
 .text-xs-center {
   text-align: center;
@@ -1873,123 +1738,234 @@ a.text-inverse:focus {
 .text-xs-justify {
   text-align: justify;
 }
-.text-xs-left {
-  text-align: start;
-}
-.text-xs-right {
-  text-align: end;
+.text-xs-nowrap {
+  white-space: nowrap;
 }
 @media (min-width: 576px) {
+  .text-sm-left {
+    text-align: left;
+  }
+  [dir="rtl"] .text-sm-left {
+    text-align: right;
+  }
+  .text-sm-right {
+    text-align: right;
+  }
+  [dir="rtl"] .text-sm-right {
+    text-align: left;
+  }
   .text-sm-center {
     text-align: center;
   }
   .text-sm-justify {
     text-align: justify;
   }
-  .text-sm-left {
-    text-align: start;
-  }
-  .text-sm-right {
-    text-align: end;
+  .text-sm-nowrap {
+    white-space: nowrap;
   }
 }
 @media (min-width: 768px) {
+  .text-md-left {
+    text-align: left;
+  }
+  [dir="rtl"] .text-md-left {
+    text-align: right;
+  }
+  .text-md-right {
+    text-align: right;
+  }
+  [dir="rtl"] .text-md-right {
+    text-align: left;
+  }
   .text-md-center {
     text-align: center;
   }
   .text-md-justify {
     text-align: justify;
   }
-  .text-md-left {
-    text-align: start;
-  }
-  .text-md-right {
-    text-align: end;
+  .text-md-nowrap {
+    white-space: nowrap;
   }
 }
 @media (min-width: 992px) {
+  .text-lg-left {
+    text-align: left;
+  }
+  [dir="rtl"] .text-lg-left {
+    text-align: right;
+  }
+  .text-lg-right {
+    text-align: right;
+  }
+  [dir="rtl"] .text-lg-right {
+    text-align: left;
+  }
   .text-lg-center {
     text-align: center;
   }
   .text-lg-justify {
     text-align: justify;
   }
-  .text-lg-left {
-    text-align: start;
-  }
-  .text-lg-right {
-    text-align: end;
+  .text-lg-nowrap {
+    white-space: nowrap;
   }
 }
 @media (min-width: 1200px) {
+  .text-xl-left {
+    text-align: left;
+  }
+  [dir="rtl"] .text-xl-left {
+    text-align: right;
+  }
+  .text-xl-right {
+    text-align: right;
+  }
+  [dir="rtl"] .text-xl-right {
+    text-align: left;
+  }
   .text-xl-center {
     text-align: center;
   }
   .text-xl-justify {
     text-align: justify;
   }
-  .text-xl-left {
-    text-align: start;
-  }
-  .text-xl-right {
-    text-align: end;
+  .text-xl-nowrap {
+    white-space: nowrap;
   }
 }
+.text-lowercase {
+  text-transform: lowercase;
+}
+.text-uppercase {
+  text-transform: uppercase;
+}
+.text-capitalize {
+  text-transform: capitalize;
+}
 .text-underline {
-  text-decoration-line: underline !important;
-  text-underline-offset: 2px;
+  text-decoration: underline;
+  -webkit-text-decoration: underline !important;
+  text-decoration: underline !important;
+  text-underline-offset: 0.3em;
 }
 .text-no-decoration {
-  text-decoration-line: none !important;
+  -webkit-text-decoration: none !important;
+  text-decoration: none !important;
 }
 .text-ellipsis,
 .text-ellipses {
   display: block;
-  overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  overflow: hidden;
 }
-.text-uppercase {
-  text-transform: uppercase;
+.text-max-width {
+  max-width: 600px;
 }
-.text-lowercase {
-  text-transform: lowercase;
+.text-word-break {
+  word-break: break-all;
 }
-.text-capitalize {
-  text-transform: capitalize;
+.font-weight-bold {
+  font-weight: 800 !important;
+  font-weight: var(--font-weight-bold) !important;
 }
-.text-xs-nowrap {
-  white-space: nowrap;
+.font-weight-semi-bold {
+  font-weight: 600 !important;
+  font-weight: var(--font-weight-semi-bold) !important;
 }
-@media (min-width: 576px) {
-  .text-sm-nowrap {
-    white-space: nowrap;
-  }
+.font-weight-normal {
+  font-weight: 400 !important;
+  font-weight: var(--font-weight-regular) !important;
 }
-@media (min-width: 768px) {
-  .text-md-nowrap {
-    white-space: nowrap;
-  }
+.font-italic {
+  font-style: italic !important;
 }
-@media (min-width: 992px) {
-  .text-lg-nowrap {
-    white-space: nowrap;
-  }
+.text-primary {
+  color: #37517e !important;
+  color: var(--color-content-primary) !important;
 }
-@media (min-width: 1200px) {
-  .text-xl-nowrap {
-    white-space: nowrap;
-  }
+a.text-primary:hover,
+a.text-primary:focus {
+  color: #37517e !important;
+  color: var(--color-content-primary) !important;
 }
-/**
- * @deprecated Obsolete since the brand has turned green.
- */
-.font-italic {
-  font-style: italic !important;
+.bg-primary .text-primary {
+  color: #ffffff !important;
+}
+.text-secondary {
+  color: #5d7079 !important;
+  color: var(--color-content-secondary) !important;
+}
+.text-positive,
+.text-success {
+  color: #008026 !important;
+  color: var(--color-content-positive) !important;
+}
+a.text-positive:hover,
+a.text-success:hover,
+a.text-positive:focus,
+a.text-success:focus {
+  color: #006d13 !important;
+  color: var(--color-content-positive-hover) !important;
+}
+.bg-primary .text-positive,
+.bg-primary .text-success {
+  color: #6fd698 !important;
+}
+.text-accent,
+.text-info {
+  color: #0097c7 !important;
+  color: var(--color-content-accent) !important;
+  color: var(--color-interactive-primary) !important;
+}
+a.text-accent:hover,
+a.text-info:hover,
+a.text-accent:focus,
+a.text-info:focus {
+  color: #0084b3 !important;
+  color: var(--color-content-accent-hover) !important;
+}
+.bg-primary .text-accent,
+.bg-primary .text-info {
+  color: #00b9ff !important;
+}
+.text-warning {
+  color: #9a6500 !important;
+  color: var(--color-content-warning) !important;
+}
+a.text-warning:hover,
+a.text-warning:focus {
+  color: #855400 !important;
+  color: var(--color-content-warning-hover) !important;
+}
+.bg-primary .text-warning {
+  color: #ffd184 !important;
+}
+.text-negative,
+.text-danger {
+  color: var(--color-sentiment-negative) !important;
+}
+a.text-negative:hover,
+a.text-danger:hover,
+a.text-negative:focus,
+a.text-danger:focus {
+  color: var(--color-sentiment-negative-hover) !important;
+}
+.bg-primary .text-negative,
+.bg-primary .text-danger {
+  color: #ffa6a9 !important;
+}
+.text-inverse {
+  color: #ffffff !important;
+}
+a.text-inverse:hover,
+a.text-inverse:focus {
+  color: #c9cbce !important;
+}
+.text-muted {
+  color: #768e9c !important;
+  color: var(--color-content-tertiary) !important;
 }
-/**
- * @deprecated Obsolete since the brand has turned green.
- */
 .colored-dot::after {
   content: none;
 }