@transferwise/components 0.0.0-experimental-4568e68 → 0.0.0-experimental-20a9e0c

package/src/neptune-css/less/core/_typography.less

@@ -1,597 +0,0 @@
-/* stylelint-disable selector-max-empty-lines */
-@import (reference) "../../variables/neptune-tokens.less";
-@import (reference) "../mixins/_logical-properties.less";
-@import (reference) "../mixins/_links.less";
-@import (reference) "../addons/_spacing-utilities.less";
-
-// TITLE
-
-/* DEPRECATED: use .np-text-*-title instead */
-/* stylelint-disable-next-line selector-list-comma-newline-after */
-.h1, .h2, .h3, .h4, .h5, .h6, .title-1, .title-2, .title-3, .title-4, .title-5,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.np-text-title-screen,
-.np-text-title-section,
-.np-text-title-subsection,
-.np-text-title-body,
-.np-text-title-group {
-  margin: 0;
-  color: var(--color-content-primary);
-  line-height: var(--line-height-title);
-  letter-spacing: 0;
-
-  + p,
-  + ul:not(.list-unstyled),
-  + ol:not(.list-unstyled) {
-    margin-top: var(--size-8);
-  }
-}
-
-/* DEPRECATED: use .np-text-title-screen instead */
-/* stylelint-disable-next-line selector-list-comma-newline-after */
-.h1,
-.title-1,
-h1,
-.np-text-title-screen {
-  margin-bottom: initial;
-  font-size: var(--font-size-30);
-  font-weight: var(--font-weight-semi-bold);
-  letter-spacing: -0.021em;
-  line-height: 115%;
-}
-
-/* DEPRECATED: use .np-text-title-section instead */
-/* stylelint-disable-next-line selector-list-comma-newline-after */
-.h2,
-.title-2,
-h2,
-.np-text-title-section {
-  margin-bottom: initial;
-  font-weight: var(--font-weight-semi-bold);
-  font-size: var(--font-size-26);
-  letter-spacing: -0.02em;
-  line-height: 122%;
-}
-
-/* DEPRECATED: use .np-text-title-subsection instead */
-/* stylelint-disable-next-line selector-list-comma-newline-after */
-.h3,
-.title-3,
-h3,
-.np-text-title-subsection {
-  margin-bottom: initial;
-  font-size: var(--font-size-22);
-  font-weight: var(--font-weight-semi-bold);
-  letter-spacing: -0.018em;
-  line-height: 125%;
-}
-
-/* DEPRECATED: use .np-text-title-body instead */
-/* stylelint-disable-next-line selector-list-comma-newline-after */
-.h4,
-.title-4,
-h4,
-.np-text-title-body {
-  font-size: var(--font-size-18);
-  font-weight: var(--font-weight-semi-bold);
-  letter-spacing: -0.014em;
-  line-height: 135%;
-}
-
-/* DEPRECATED: use .np-text-title-group instead */
-/* stylelint-disable-next-line selector-list-comma-newline-after */
-.h5,
-.h6,
-.title-5,
-h5,
-h6,
-.np-text-title-group {
-  font-weight: var(--font-weight-medium);
-  font-size: var(--font-size-14);
-  letter-spacing: -0.006em;
-  line-height: 140%;
-}
-
-/* DEPRECATED: use .np-text-title-body instead */
-.lead {
-  margin-bottom: var(--size-24);
-  font-size: var(--font-size-20);
-  line-height: var(--line-height-title);
-}
-
-// DEPRECATED: use .np-text-body-default instead
-.tiny {
-  color: var(--color-content-secondary);
-}
-
-// BODY
-
-/* DEPRECATED: use .np-text-body-default instead */
-/* stylelint-disable-next-line selector-list-comma-newline-after */
-.body-2, .body-3, .small, .tiny,
-body, small,
-.np-text-body-default {
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: var(--font-weight-regular);
-}
-
-/* DEPRECATED: use .np-text-body-default-bold instead */
-/* stylelint-disable-next-line selector-list-comma-newline-after */
-.control-2,
-
-// DEPRECATED: use `Field` component (or in some edge cases `Label` component) instead
-.label, .control-label,
-
-.np-text-body-default-bold {
-  font-size: var(--font-size-14);
-  line-height: 155%;
-  letter-spacing: -0.006em;
-  font-weight: var(--font-weight-semi-bold);
-}
-
-/* DEPRECATED: use .np-text-body-large instead  */
-/* stylelint-disable-next-line selector-list-comma-newline-after */
-.body-1, .value,
-.np-text-body-large {
-  font-weight: var(--font-weight-regular);
-  font-size: var(--font-size-16);
-  line-height: 150%;
-  letter-spacing: -0.011em;
-}
-
-/* DEPRECATED: use np-text-body-large-bold instead */
-/* stylelint-disable-next-line selector-list-comma-newline-after */
-.control-1,
-.np-text-body-large-bold {
-  font-weight: var(--font-weight-semi-bold);
-  font-size: var(--font-size-16);
-  line-height: 150%;
-  letter-spacing: -0.011em;
-}
-
-// LINK
-
-a,
-.np-text-link-default,
-.np-text-link-large {
-  font-weight: var(--font-weight-semi-bold);
-  .link-underline();
-}
-
-.np-text-link-large {
-  font-size: var(--font-size-16);
-  letter-spacing: -0.011em;
-  line-height: 150%;
-}
-
-.np-text-link-default {
-  font-size: var(--font-size-14);
-  letter-spacing: -0.006em;
-  line-height: 155%;
-}
-
-// DISPLAY
-
-.np-text-display-number {
-  font-weight: var(--font-weight-semi-bold);
-  font-size: 40px;
-  line-height: 110%;
-}
-
-.display-formatting(
-@font-size;
-@line-height;
-@font-weight: var(--font-weight-regular)) {
-  font-size: @font-size;
-  line-height: @line-height;
-  font-weight: @font-weight;
-}
-
-.display-1,
-.display-2,
-.display-3,
-.display-4,
-.display-5,
-.np-text-display-extra-large,
-.np-text-display-large,
-.np-text-display-medium,
-.np-text-display-small {
-  font-family: "Wise Sans", Inter, sans-serif;
-  font-synthesis: none;
-}
-
-/* DEPRECATED(.np-text-display-extra-large): use .np-text-display-large instead */
-.np-text-display-extra-large,
-.np-text-display-large,
-.np-text-display-medium,
-.np-text-display-small {
-  letter-spacing: normal;
-
-  @supports (hyphenate-limit-chars: 1) {
-    hyphens: auto;
-    hyphenate-limit-chars: 7 3;
-
-    @media (--screen-md) {
-      hyphenate-limit-chars: 8 3;
-    }
-
-    @media (--screen-lg) {
-      hyphenate-limit-chars: 10 4 3;
-    }
-  }
-
-  @supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
-    hyphens: auto;
-    -webkit-hyphenate-limit-before: 3;
-    -webkit-hyphenate-limit-after: 3;
-
-    @media (--screen-lg) {
-      -webkit-hyphenate-limit-before: 4;
-    }
-  }
-}
-
-
-.np-text-display-extra-large,
-.np-text-display-large {
-  .display-formatting(var(--size-64), normal, var(--font-weight-bold));
-}
-
-.np-text-display-medium {
-  .display-formatting(var(--size-52), normal, var(--font-weight-bold));
-}
-
-.np-text-display-small {
-  .display-formatting(var(--size-40), normal, var(--font-weight-bold));
-}
-
-:lang(en) {
-  > .np-text-display-extra-large,
-  > .np-text-display-large {
-    .display-formatting(var(--size-64), 0.85);
-  }
-
-  > .np-text-display-medium {
-    .display-formatting(var(--size-52), 0.85);
-  }
-
-  > .np-text-display-small {
-    .display-formatting(var(--size-40), 0.85);
-  }
-}
-
-:lang(af),
-:lang(sq),
-:lang(eu),
-:lang(bs),
-:lang(ca),
-:lang(kw),
-:lang(hr),
-:lang(cs),
-:lang(da),
-:lang(nl),
-:lang(eo),
-:lang(et),
-:lang(fo),
-:lang(fi),
-:lang(fr),
-:lang(gl),
-:lang(lg),
-:lang(de),
-:lang(hu),
-:lang(is),
-:lang(se),
-:lang(id),
-:lang(in),
-:lang(ga),
-:lang(it),
-:lang(kl),
-:lang(ki),
-:lang(rw),
-:lang(lv),
-:lang(lt),
-:lang(lb),
-:lang(mg),
-:lang(ms),
-:lang(mt),
-:lang(gv),
-:lang(mi),
-:lang(nd),
-:lang(nb),
-:lang(nn),
-:lang(om),
-:lang(pl),
-:lang(pt),
-:lang(ro),
-:lang(rm),
-:lang(rn),
-:lang(sg),
-:lang(gd),
-:lang(sr),
-:lang(sn),
-:lang(sk),
-:lang(sl),
-:lang(so),
-:lang(es),
-:lang(sw),
-:lang(sv),
-:lang(tr),
-:lang(cy),
-:lang(fy),
-:lang(wo),
-:lang(zu),
-:lang(hsb),
-:lang(gsw),
-:lang(dsb),
-:lang(fil) {
-  .np-text-display-extra-large,
-  .np-text-display-large {
-    .display-formatting(var(--size-64), 1.05);
-  }
-
-  .np-text-display-medium {
-    .display-formatting(var(--size-52), 1.05);
-  }
-
-  .np-text-display-small {
-    .display-formatting(var(--size-40), 1.05);
-  }
-}
-
-:lang(el),
-:lang(az),
-:lang(be),
-:lang(bs),
-:lang(bg),
-:lang(ce),
-:lang(mk),
-:lang(os),
-:lang(ru),
-:lang(sr),
-:lang(uk),
-:lang(uz),
-:lang(sah) {
-  .np-text-display-extra-large,
-  .np-text-display-large {
-    .display-formatting(var(--size-60),
-    120%,
-    var(--font-weight-semi-bold));
-  }
-
-  .np-text-display-medium {
-    .display-formatting(var(--size-48),
-    120%,
-    var(--font-weight-semi-bold));
-  }
-
-  .np-text-display-small {
-    .display-formatting(var(--size-40),
-    120%,
-    var(--font-weight-semi-bold));
-  }
-}
-
-/* DEPRECATED: use `.np-text-display-*` instead */
-.display-1 {
-  margin-bottom: var(--size-24);
-  /* stylelint-disable-next-line number-max-precision */
-  font-size: 3.7333333333rem;
-
-  @media (--screen-md) {
-    margin-bottom: var(--size-8);
-    font-size: 6.5rem;
-  }
-}
-
-/* DEPRECATED: use `.np-text-display-*` instead */
-.display-2 {
-  margin-bottom: var(--size-24);
-  /* stylelint-disable-next-line number-max-precision */
-  font-size: 3.7333333333rem;
-
-  @media (--screen-md) {
-    margin-bottom: var(--size-16);
-    font-size: 5.5rem;
-  }
-}
-
-/* DEPRECATED: use `.np-text-display-*` instead */
-.display-3 {
-  margin-bottom: var(--size-8);
-  font-size: 2.8rem;
-
-  @media (--screen-md) {
-    margin-bottom: var(--size-24);
-    font-size: 4.5rem;
-  }
-}
-
-/* DEPRECATED: use `.np-text-display-*` instead */
-.display-4 {
-  margin-bottom: var(--size-4);
-  /* stylelint-disable-next-line number-max-precision */
-  font-size: 1.8666666667rem; // 28/15px
-
-  @media (--screen-md) {
-    margin-bottom: var(--size-24);
-    font-size: 3.5rem; // 56px
-  }
-}
-
-/* DEPRECATED: use `.np-text-display-*` instead */
-.display-5 {
-  margin-bottom: var(--size-4);
-  /* stylelint-disable-next-line number-max-precision */
-  font-size: 1.8666666667rem; // 28/15px
-
-  @media (--screen-md) {
-    margin-bottom: var(--size-8);
-    font-size: 2.625rem; // 42px
-  }
-}
-
-p {
-  margin: 0 0 var(--size-16);
-
-  + h1,
-  + h2,
-  + h3,
-  + h4,
-  + h5,
-  + h6,
-  + .h1,
-  + .h2,
-  + .h3,
-  + .h4,
-  + .h5,
-  + .h6,
-  + .title-1,
-  + .title-2,
-  + .title-3,
-  + .title-4,
-  + .title-5,
-  + .np-text-title-screen,
-  + .np-text-title-section,
-  + .np-text-title-subsection,
-  + .np-text-title-body,
-  + .np-text-title-group {
-    margin-top: 0;
-    margin-bottom: var(--size-8);
-  }
-}
-
-.control-1,
-.control-2 {
-  color: var(--color-content-accent);
-}
-
-strong,
-b {
-  font-weight: var(--font-weight-semi-bold);
-  color: var(--color-content-primary);
-}
-
-mark,
-.mark {
-  padding: var(--size-4);
-  background-color: var(--color-background-warning);
-}
-
-address {
-  margin-bottom: var(--size-24);
-  font-style: normal;
-}
-
-blockquote {
-  margin: var(--size-16) 0;
-  padding: 0 var(--size-16) 0 calc(var(--size-16) - 2px);
-  font-size: var(--font-size-16);
-  .border(left, 2px, solid, var(--color-content-accent));
-
-  p {
-    margin-bottom: var(--size-8);
-  }
-
-  p,
-  ol,
-  ul {
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  footer {
-    display: block;
-    color: var(--color-content-secondary);
-    font-size: var(--font-size-14);
-    line-height: var(--line-height-body);
-
-    &::before {
-      content: "\2014 \00A0"; // em dash, nbsp
-    }
-  }
-
-  @media (--screen-sm) {
-    margin: var(--size-24);
-  }
-
-  @media (--screen-lg) {
-    margin: var(--size-32);
-    font-size: var(--font-size-16);
-  }
-}
-
-.blockquote-reverse {
-  .padding(right, 22px);
-
-  .padding(left, 0);
-
-  .text-align(right);
-
-  .border(right, 2px, solid, var(--color-content-accent));
-
-  .border(left, 0);
-
-  footer {
-    &::before {
-      content: "";
-    }
-
-    &::after {
-      content: "\00A0 \2014"; // nbsp, em dash
-    }
-  }
-}
-
-pre,
-code,
-kbd {
-  border-radius: var(--radius-small);
-}
-
-pre {
-  margin: 0 0 var(--size-24);
-  padding: var(--size-16);
-  overflow: auto;
-  color: var(--color-content-secondary);
-  font-size: var(--font-size-14);
-  line-height: var(--line-height-body);
-  word-wrap: break-word;
-  word-break: break-all;
-  background-color: var(--color-background-neutral);
-
-  code {
-    padding: 0;
-    font-size: inherit;
-    white-space: pre-wrap;
-    background-color: transparent;
-    border-radius: 0;
-  }
-}
-
-code {
-  padding: 2px var(--size-4);
-  font-size: 90%;
-  color: var(--color-content-secondary);
-  background-color: var(--color-background-neutral);
-}
-
-kbd {
-  padding: 2px var(--size-4);
-  font-size: 90%;
-  color: #fff;
-  background-color: #333;
-
-  kbd {
-    padding: 0;
-    font-weight: var(--font-weight-bold);
-    font-size: 100%;
-  }
-}

package/src/neptune-css/less/core/viewport-themes.less

@@ -1,65 +0,0 @@
-@import '@transferwise/neptune-tokens/themes/personal/tokens.less';
-
-@media (--screen-400-zoom) {
-  .np-theme-personal {
-    --delta: 2;
-
-    --size-4: calc(@size-4 / var(--delta));
-    --size-5: calc(@size-5 / var(--delta));
-    --size-8: calc(@size-8 / var(--delta));
-    --size-10: calc(@size-10 / var(--delta));
-    --size-12: calc(@size-12 / var(--delta));
-    --size-14: calc(@size-14 / var(--delta));
-    --size-16: calc(@size-16 / var(--delta));
-    --size-24: calc(@size-24 / var(--delta));
-    --size-32: calc(@size-32 / var(--delta));
-    --size-40: calc(@size-40 / var(--delta));
-    --size-48: calc(@size-48 / var(--delta));
-    --size-52: calc(@size-52 / var(--delta));
-    --size-56: calc(@size-56 / var(--delta));
-    --size-60: calc(@size-60 / var(--delta));
-    --size-64: calc(@size-64 / var(--delta));
-    --size-72: calc(@size-72 / var(--delta));
-    --size-80: calc(@size-80 / var(--delta));
-    --size-88: calc(@size-88 / var(--delta));
-    --size-96: calc(@size-96 / var(--delta));
-    --size-104: calc(@size-104 / var(--delta));
-    --size-112: calc(@size-112 / var(--delta));
-    --size-120: calc(@size-120 / var(--delta));
-    --size-126: calc(@size-126 / var(--delta));
-    --size-128: calc(@size-128 / var(--delta));
-    --size-146: calc(@size-146 / var(--delta));
-    --size-154: calc(@size-154 / var(--delta));
-    --size-x-small: calc(@size-x-small / var(--delta));
-    --size-small: calc(@size-small / var(--delta));
-    --size-medium: calc(@size-medium / var(--delta));
-    --size-large: calc(@size-large / var(--delta));
-    --size-x-large: calc(@size-x-large / var(--delta));
-    --size-2x-large: calc(@size-2x-large / var(--delta));
-    --space-content-horizontal: calc(@space-content-horizontal / var(--delta));
-    --space-small: calc(@space-small / var(--delta));
-    --space-medium: calc(@space-medium / var(--delta));
-    --space-large: calc(@space-large / var(--delta));
-    --space-x-large: calc(@space-x-large / var(--delta));
-    --padding-x-small: var(--size-8);
-    --padding-small: var(--size-16);
-    --padding-medium: var(--size-24);
-    --padding-large: var(--size-32);
-
-    --input-height-base: var(--size-32);
-    --input-height-large: var(--input-height-small);
-    --input-padding: var(--input-padding-small);
-    --input-padding-large: var(--input-padding-small);
-    --input-group-addon-padding: var(--input-group-addon-sm-padding);
-    --input-group-addon-lg-padding: var(--input-group-addon-sm-padding);
-
-    --btn-height: var(--input-height-base);
-    --btn-lg-height: var(--btn-height);
-    --btn-sm-height: var(--btn-height);
-    --btn-padding: var(--input-padding);
-    --btn-sm-padding: var(--btn-padding);
-    --btn-lg-padding: var(--btn-padding);
-
-    --dropdown-link-padding: var(--size-12) var(--size-16);
-  }
-}

package/src/neptune-css/less/currency-flags.less

@@ -1,42 +0,0 @@
-@import (reference) "./mixins/_logical-properties.less";
-
-/* DEPRECATED: use <Flag /> component instead */
-.currency-flag {
-  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.6);
-
-  .np-theme-personal & {
-    box-shadow: inset 0 0 0 1px var(--color-border-neutral);
-    border-radius: 50%;
-  }
-
-  .btn &,
-  .dropdown-menu li & {
-    vertical-align: -3px;
-    line-height: 16px;
-  }
-
-  .btn-sm &,
-  .form-group-sm .btn &,
-  .input-group-sm .btn & {
-    vertical-align: -4px;
-  }
-
-  .btn-lg &,
-  .form-group-lg .btn &,
-  .input-group-lg .btn & {
-    vertical-align: -1px;
-  }
-}
-
-li,
-li > a {
-  > .currency-flag:first-child {
-    .margin(right, var(--size-8));
-  }
-}
-
-.btn {
-  .currency-flag:first-child {
-    .margin(right, var(--size-8));
-  }
-}