@transferwise/components 0.0.0-experimental-28eac06 → 0.0.0-experimental-9b6d886

package/build/styles/button/Button.css

@@ -1,238 +1,23 @@
-.wds-Button {
-  --Button-background: var(--color-interactive-accent);
-  --Button-background-hover: var(--color-interactive-accent-hover);
-  --Button-background-active: var(--color-interactive-accent-active);
-  --Button-color: var(--color-interactive-control);
-  --Button-border-radius: var(--radius-full);
-  --Button-label-gap: var(--size-4);
-  --Button-large-padding: var(--size-12) var(--size-16);
-  --Button-medium-padding: var(--size-8) var(--size-12);
-  --Button-small-padding: var(--size-5) var(--size-12);
-  --Button-avatar-border-color: var(--color-border-neutral);
-  --Button-transition-duration: 150ms;
-  --Button-transition-easing: ease-in-out;
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-background-hover: var(--color-interactive-neutral-hover);
-  --Button-secondary-background-active: var(--color-interactive-neutral-active);
-  --Button-secondary-color: var(--color-interactive-primary);
-  --Button-tertiary-background: var(--color-background-neutral);
-  --Button-tertiary-background-hover: var(--color-background-neutral-hover);
-  --Button-tertiary-background-active: var(--color-background-neutral-active);
-  --Button-tertiary-color: var(--color-content-primary);
-  --Button-minimal-background: transparent;
-  --Button-minimal-background-hover: var(--color-background-screen-hover);
-  --Button-minimal-background-active: var(--color-background-screen-active);
-  --Button-minimal-color: var(--color-interactive-primary);
-  --Button-primary-negative-background: var(--color-sentiment-negative-primary);
-  --Button-primary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
-  --Button-primary-negative-background-active: var(--color-sentiment-negative-primary-active);
-  --Button-primary-negative-color: var(--color-contrast-overlay);
-  --Button-secondary-negative-background: var(--color-sentiment-negative-secondary);
-  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-secondary-hover);
-  --Button-secondary-negative-background-active: var(--color-sentiment-negative-secondary-active);
-  --Button-secondary-negative-color: var(--color-sentiment-negative-primary);
-}
-.np-theme-personal--bright-green .wds-Button {
-  --Button-primary-negative-color: var(--color-white);
-  --Button-secondary-color: var(--color-interactive-control);
-  --Button-secondary-negative-color: var(--color-white);
-}
-.np-theme-personal--forest-green .wds-Button {
-  --Button-secondary-background: var(--color-interactive-neutral);
-  --Button-secondary-negative-background: var(--color-sentiment-negative-primary);
-  --Button-secondary-negative-background-hover: var(--color-sentiment-negative-primary-hover);
-  --Button-secondary-negative-background-active: var(--color-sentiment-negative-primary-active);
-  --Button-secondary-negative-color: var(--color-contrast-overlay);
-}
-/* Button Styles */
-.wds-Button {
-  display: inline-flex;
-  flex: none;
-  width: auto;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  text-align: center;
-  white-space: nowrap;
-  word-wrap: break-word;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background-color: var(--Button-background);
-  border: none;
-  border-radius: var(--Button-border-radius);
-  color: var(--Button-color);
-  cursor: pointer;
-  transition: color, background-color var(--Button-transition-duration) var(--Button-transition-easing);
-}
-.wds-Button,
-.wds-Button:hover,
-.wds-Button:active,
-.wds-Button:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-.wds-Button:hover {
-  background-color: var(--Button-background-hover);
-}
-.wds-Button:active {
-  background-color: var(--Button-background-active);
-}
-.wds-Button.wds-Button--disabled,
-.wds-Button:disabled {
-  filter: none;
-  mix-blend-mode: luminosity;
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-.wds-Button.wds-Button--disabled,
-.wds-Button:disabled,
-.wds-Button.wds-Button--disabled:hover,
-.wds-Button:disabled:hover,
-.wds-Button.wds-Button--disabled:active,
-.wds-Button:disabled:active {
-  background-color: var(--Button-background);
-}
-.wds-Button--secondary {
-  --Button-background: var(--Button-secondary-background);
-  --Button-background-hover: var(--Button-secondary-background-hover);
-  --Button-background-active: var(--Button-secondary-background-active);
-  --Button-color: var(--Button-secondary-color);
-}
-.wds-Button--tertiary {
-  --Button-background: var(--Button-tertiary-background);
-  --Button-background-hover: var(--Button-tertiary-background-hover);
-  --Button-background-active: var(--Button-tertiary-background-active);
-  --Button-color: var(--Button-tertiary-color);
-}
-.wds-Button--tertiary .wds-Button-icon--end {
-  color: var(--color-interactive-primary);
-}
-.wds-Button--minimal {
-  --Button-background: var(--Button-minimal-background);
-  --Button-background-hover: var(--Button-minimal-background-hover);
-  --Button-background-active: var(--Button-minimal-background-active);
-  --Button-color: var(--Button-minimal-color);
-}
-.wds-Button--minimal,
-.wds-Button--minimal:hover,
-.wds-Button--minimal:active,
-.wds-Button--minimal:focus {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-  text-underline-offset: 3px;
-  text-decoration-thickness: 1px;
-}
-.wds-Button--negative.wds-Button--primary {
-  --Button-background: var(--Button-primary-negative-background);
-  --Button-background-hover: var(--Button-primary-negative-background-hover);
-  --Button-background-active: var(--Button-primary-negative-background-active);
-  --Button-color: var(--Button-primary-negative-color);
-}
-.wds-Button--negative.wds-Button--secondary {
-  --Button-background: var(--Button-secondary-negative-background);
-  --Button-background-hover: var(--Button-secondary-negative-background-hover);
-  --Button-background-active: var(--Button-secondary-negative-background-active);
-  --Button-color: var(--Button-secondary-negative-color);
-}
-.wds-Button--large {
-  padding: var(--Button-large-padding);
-}
-.wds-Button--medium {
-  padding: var(--Button-medium-padding);
-}
-.wds-Button--medium:has(.wds-Button-avatars) {
-  padding-inline-start: 8px;
-  padding-inline-start: var(--size-8);
-}
-.wds-Button--medium:has(.wds-Button-icon--end) {
-  padding-inline-end: 8px;
-  padding-inline-end: var(--size-8);
-}
-.wds-Button--medium .wds-Button-icon--start {
-  margin-inline-end: var(--Button-label-gap);
-}
-.wds-Button--small {
-  padding: var(--Button-small-padding);
-}
-.wds-Button--small:has(.wds-Button-icon--start) {
-  padding-inline-start: 8px;
-  padding-inline-start: var(--size-8);
-}
-.wds-Button--small:has(.wds-Button-icon--end) {
-  padding-inline-end: 8px;
-  padding-inline-end: var(--size-8);
-}
-.wds-Button--block {
-  width: 100%;
-}
-.wds-Button-avatars {
-  display: inline-flex;
-}
-.wds-Button-avatars .np-avatar-view .np-avatar-view-content {
-  color: var(--Button-color);
-}
-.wds-Button-icon {
-  display: inline-block;
-}
-.wds-Button-icon--md {
-  --Button-iconSize: calc(var(--size-10) + var(--size-8));
-}
-.wds-Button-icon--sm {
-  --Button-iconSize: var(--size-16);
-}
-.wds-Button-icon svg {
-  width: var(--Button-iconSize);
-  height: var(--Button-iconSize);
-}
-.wds-Button-content {
+.np-btn {
   position: relative;
 }
-.wds-Button-content--loading .wds-Button-label,
-.wds-Button-content--loading .wds-Button-media,
-.wds-Button-content--loading .wds-Button-icon {
-  visibility: hidden;
-  opacity: 0;
-}
-.wds-Button-label {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: var(--Button-label-gap);
-  position: relative;
-}
-.wds-Button-loader {
+.np-btn.np-btn-block > span.btn-loader {
   position: absolute;
-  width: 100%;
-  height: 100%;
-}
-.wds-Button-loader .process-circle {
-  stroke: var(--Button-color);
-}
-/* Avatar border transparency */
-/* dark buttons get 20% transparency, light buttons get 12% */
-.wds-Button-avatars .np-circle {
-  --circle-border-color: color-mix(in srgb, var(--Button-color) 20%, transparent);
-}
-.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary.wds-Button--negative .wds-Button-avatars .np-circle,
-.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--secondary .wds-Button-avatars .np-circle,
-.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--tertiary .wds-Button-avatars .np-circle,
-.np-theme-personal:not(.np-theme-personal--dark):not(.np-theme-personal--forest-green):not(.np-theme-personal--bright-green) .wds-Button--minimal .wds-Button-avatars .np-circle {
-  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+  left: 24px;
+  left: var(--size-24);
 }
-.np-theme-personal--dark .wds-Button--primary .wds-Button-avatars .np-circle,
-.np-theme-personal--dark .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle,
-.np-theme-personal--forest-green .wds-Button--primary .wds-Button-avatars .np-circle,
-.np-theme-personal--forest-green .wds-Button--primary.wds-Button--negative .wds-Button-avatars .np-circle {
-  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+[dir="rtl"] .np-btn.np-btn-block > span.btn-loader {
+  right: 24px;
+  right: var(--size-24);
+  left: auto;
+  left: initial;
 }
-.np-theme-personal--bright-green .wds-Button--tertiary .wds-Button-avatars .np-circle,
-.np-theme-personal--bright-green .wds-Button--minimal .wds-Button-avatars .np-circle {
-  --circle-border-color: color-mix(in srgb, var(--Button-color) 12%, transparent);
+.np-btn.np-btn-xs > span.btn-loader {
+  background-size: 16px 16px;
 }
-.critical-comms .wds-Button {
-  --Button-background: var(--color-contrast-overlay);
+.np-btn.np-btn-xs.btn-block > span.btn-loader {
+  top: 0;
 }
-[dir="rtl"] .wds-Button .tw-icon-chevron-right,[dir="rtl"] .wds-Button .tw-icon-arrow-right,[dir="rtl"] .wds-Button .tw-icon-chevron-left,[dir="rtl"] .wds-Button .tw-icon-arrow-left,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-down,[dir="rtl"] .wds-Button .tw-icon-arrow-diagonal-up,[dir="rtl"] .wds-Button .tw-icon-list,[dir="rtl"] .wds-Button .tw-icon-activity {
-  scale: -1 1;
+.np-btn.disabled[class] {
+  pointer-events: auto;
 }

package/build/styles/criticalBanner/CriticalCommsBanner.css

@@ -1,24 +1,76 @@
-.critical-comms .alert-critical {
-  color: var(--color-contrast-overlay) !important;
-  background-color: var(--color-sentiment-negative) !important;
-}
-.critical-comms .alert-critical .np-text-title-body {
-  color: var(--color-contrast-overlay);
-}
-.critical-comms .status-circle.critical {
-  background-color: #ffffff;
-  background-color: var(--color-background-screen);
-}
-@media (min-width: 768px) {
-  .critical-comms .alert-critical .alert__message {
-    flex-direction: row !important;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
+div.critical-comms {
+  --critical-comms-background-color: var(--color-background-negative);
+  --critical-comms-title-color: var(--color-content-negative);
+  --critical-comms-subtitle-color: var(--color-content-secondary);
+  --critical-comms-subtitle-color-padding-left: var(--size-16);
+  --critical-comms-vertical-spacing: var(--size-8);
+  background-color: rgba(255,135,135,0.10196);
+  background-color: var(--critical-comms-background-color);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.np-theme-personal div.critical-comms,
+.np-theme-personal--dark div.critical-comms {
+  --critical-comms-background-color: var(--color-sentiment-negative);
+  --critical-comms-title-color: var(--color-contrast);
+  --critical-comms-subtitle-color: var(--color-contrast);
+  --critical-comms-subtitle-color-padding-left: 0;
+  --critical-comms-vertical-spacing: var(--size-16);
+  padding: 24px;
+  padding: var(--padding-medium);
+}
+.np-theme-personal div.critical-comms .tw-icon-alert-circle-fill,
+.np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill {
+  color: var(--color-contrast);
+}
+.np-theme-personal div.critical-comms .tw-icon-alert-circle-fill svg,
+.np-theme-personal--dark div.critical-comms .tw-icon-alert-circle-fill svg {
+  width: 48px;
+  height: 48px;
+}
+.np-theme-personal div.critical-comms .cta-btn,
+.np-theme-personal--dark div.critical-comms .cta-btn {
+  background-color: var(--color-contrast);
+}
+.np-theme-personal div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus,
+.np-theme-personal--dark div.critical-comms .cta-btn:not(.disabled):not(:disabled):focus {
+  outline-color: var(--color-contrast);
+}
+@media (max-width: 767px) {
+  div.critical-comms {
+    display: inline;
+    display: initial;
   }
-  .critical-comms .alert-critical .alert__message .alert__action {
-    margin-top: 0;
-    padding-left: 16px;
-    padding-left: var(--padding-small);
+}
+div.critical-comms .critical-comms--title {
+  color: var(--critical-comms-title-color);
+}
+div.critical-comms .critical-comms--subtitle {
+  color: var(--critical-comms-subtitle-color);
+}
+div.critical-comms .critical-comms--cta {
+  padding-left: 0;
+}
+@media (max-width: 767px) {
+  div.critical-comms .critical-comms--cta {
+    padding-left: var(--critical-comms-subtitle-color-padding-left);
+    padding-top: var(--critical-comms-vertical-spacing);
+    min-width: 100%;
+  }
+}
+div.critical-comms .critical-comms-body {
+  display: flex;
+  width: 100%;
+}
+@media (max-width: 767px) {
+  div.critical-comms .critical-comms-body {
+    flex-direction: column;
+  }
+}
+@media (max-width: 767px) {
+  div.critical-comms .critical-comms-content {
+    padding-top: var(--critical-comms-vertical-spacing);
+    flex-wrap: wrap;
   }
 }