@deriv-web-design/ui 0.1.34 → 0.1.35

package/dist/index.css

@@ -11336,8 +11336,22 @@
 
 /* templates/CryptoTradeConverter/CryptoTradeConverter.css */
 .ctc-section {
-  width: 100%;
-  background-color: var(--color-slate-50);
+  --ctc-ink: #181c25;
+  --ctc-ink-2: #3a424e;
+  --ctc-ink-3: #6a7280;
+  --ctc-line: #e6e9ec;
+  --ctc-line-2: #eef0f3;
+  --ctc-bg-2: #f6f7f8;
+  --ctc-seg-bg: #e9eaed;
+  --ctc-up: #00a76a;
+  --ctc-down: #e5303b;
+  --ctc-buy: #00c390;
+  --ctc-sell: #de0040;
+  --ctc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+  width: 100%;
+  background-color: var(--color-slate-50, #f5f6fa);
+  color: var(--ctc-ink);
+  -webkit-font-smoothing: antialiased;
 }
 .ctc-container {
   display: flex;
@@ -11355,6 +11369,10 @@
 }
 @media (min-width: 992px) {
   .ctc-container {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    align-items: center;
+    gap: var(--spacing-64);
     padding: var(--spacing-112) var(--spacing-24);
   }
 }
@@ -11362,8 +11380,8 @@
   max-width: 40rem;
 }
 .ctc-title {
-  margin: 0 0 var(--spacing-8);
-  color: var(--text-primary);
+  margin: 0 0 var(--spacing-16);
+  color: var(--text-primary, var(--ctc-ink));
   font-family: var(--typography-h2-font-family);
   font-size: var(--typography-h2-font-size);
   font-weight: var(--typography-h2-font-weight);
@@ -11372,95 +11390,91 @@
 }
 .ctc-subtitle {
   margin: 0;
-  color: var(--text-primary);
+  color: var(--ctc-ink-2);
   font-family: var(--typography-body-md-font-family);
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
   line-height: var(--typography-body-md-line-height);
   max-width: 30rem;
 }
+@media (min-width: 992px) {
+  .ctc-header {
+    max-width: none;
+  }
+  .ctc-title {
+    max-width: 8.5em;
+    margin-bottom: var(--spacing-24);
+  }
+  .ctc-subtitle {
+    max-width: 28rem;
+  }
+}
 .ctc-card {
   width: 100%;
-  max-width: 28rem;
+  max-width: 38.75rem;
   margin-inline: auto;
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  padding: var(--spacing-24);
-  background: var(--color-slate-75, #fff);
-  border: 1px solid var(--color-slate-100, #e6e9ec);
-  border-radius: var(--radius-2xl, 1rem);
-  box-shadow: var(--shadow-sm);
+  padding: 0;
+  background: #fff;
+  border: 1px solid var(--ctc-line);
+  border-radius: 1.125rem;
+  box-shadow: 0 14px 36px rgba(15, 20, 30, 0.1);
   box-sizing: border-box;
+  overflow: visible;
 }
-@media (min-width: 992px) {
+.ctc-widget {
+  margin: 0.75rem 0.875rem;
+  padding: 0.75rem;
+  background: var(--ctc-bg-2);
+  border-radius: 1rem;
+  box-sizing: border-box;
+}
+@media (min-width: 768px) {
   .ctc-card {
-    margin-inline: 0;
+    padding: 1.5rem;
   }
-  .ctc-container {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) minmax(20rem, 28rem);
-    align-items: start;
-    gap: var(--spacing-48);
+  .ctc-widget {
+    margin: 0;
+    padding: 1.5rem;
+    border-radius: 1.125rem;
   }
-  .ctc-header {
-    padding-top: var(--spacing-24);
+}
+@media (min-width: 992px) {
+  .ctc-card {
+    margin-inline: 0;
+    max-width: none;
   }
 }
-.ctc-status {
+.ctc-status:not(.ctc-status--warn):not(.ctc-status--error) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.ctc-status--warn,
+.ctc-status--error {
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-8);
-  color: var(--text-secondary);
-  font-size: var(--font-size-75, 0.75rem);
+  margin-bottom: 0.75rem;
+  color: var(--ctc-ink-3);
+  font-size: 0.75rem;
 }
 .ctc-status-dot {
   width: 0.5rem;
   height: 0.5rem;
   border-radius: 999px;
-  background: var(--color-slate-200);
-}
-.ctc-status--live .ctc-status-dot {
-  background: var(--color-green-500, #00a76a);
-  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-green-500, #00a76a) 18%, transparent);
+  background: var(--color-slate-200, #c2c2c2);
 }
 .ctc-status--warn .ctc-status-dot {
   background: var(--color-orange-500, #ff8c00);
 }
 .ctc-status--error .ctc-status-dot {
-  background: var(--color-coral-600, #ff444f);
-}
-.ctc-seg {
-  display: inline-flex;
-  width: 100%;
-  padding: var(--spacing-4);
-  border-radius: 999px;
-  background: var(--color-slate-100, #f1f2f6);
-}
-.ctc-seg__btn {
-  flex: 1;
-  appearance: none;
-  border: 0;
-  background: transparent;
-  color: var(--text-secondary);
-  font: inherit;
-  font-weight: 600;
-  padding: var(--spacing-8) var(--spacing-16);
-  border-radius: 999px;
-  cursor: pointer;
-  min-height: 2.5rem;
-}
-.ctc-seg__btn.is-active.is-buy {
-  background: var(--color-green-500, #00c390);
-  color: var(--color-white, #fff);
-}
-.ctc-seg__btn.is-active.is-sell {
-  background: var(--color-coral-600, #de0040);
-  color: var(--color-white, #fff);
-}
-.ctc-seg__btn:focus-visible {
-  outline: 2px solid var(--color-blue-500, #1677ff);
-  outline-offset: 2px;
+  background: var(--ctc-sell);
 }
 .ctc-pair {
   position: relative;
@@ -11469,140 +11483,342 @@
   width: 100%;
   display: flex;
   align-items: center;
-  gap: var(--spacing-12);
-  padding: var(--spacing-12) var(--spacing-16);
-  border: 1px solid var(--color-slate-100, #e6e9ec);
-  border-radius: var(--radius-xl, 0.75rem);
-  background: var(--color-white, #fff);
+  gap: 0.6875rem;
+  padding: 0.6875rem 0.8125rem;
+  border: 1px solid var(--ctc-line);
+  border-radius: 0.625rem;
+  background: #fff;
   cursor: pointer;
   text-align: left;
   font: inherit;
-  color: var(--text-primary);
+  color: inherit;
+}
+@media (min-width: 768px) {
+  .ctc-pair__button {
+    padding: 0.875rem 1rem;
+  }
 }
 .ctc-pair__button:disabled {
   cursor: not-allowed;
   opacity: 0.7;
 }
 .ctc-pair__button:focus-visible {
-  outline: 2px solid var(--color-blue-500, #1677ff);
-  outline-offset: 2px;
+  outline: 2px solid var(--ctc-sell);
+  outline-offset: 3px;
 }
 .ctc-avatar {
-  width: 2rem;
-  height: 2rem;
+  width: 1.875rem;
+  height: 1.875rem;
   border-radius: 999px;
   object-fit: cover;
-  flex: 0 0 2rem;
-  background: var(--color-slate-100);
+  flex: 0 0 1.875rem;
+  background: #8c95a3;
 }
 .ctc-avatar--fallback {
   display: inline-grid;
   place-items: center;
   font-size: 0.625rem;
   font-weight: 800;
-  color: var(--color-white, #fff);
-  background: var(--color-slate-400);
+  letter-spacing: -0.02em;
+  color: #fff;
 }
 .ctc-pair__meta {
   display: flex;
   flex-direction: column;
-  gap: 0.125rem;
+  gap: 0;
   min-width: 0;
   flex: 1;
+  line-height: 1.3;
+  text-align: left;
 }
 .ctc-pair__name {
-  font-weight: 700;
+  display: block;
+  font-size: 0.9375rem;
+  font-weight: 800;
+  color: var(--ctc-ink);
 }
 .ctc-pair__price {
-  color: var(--text-secondary);
-  font-size: var(--font-size-75, 0.75rem);
+  font-size: 0.78125rem;
+  color: var(--ctc-ink-3);
   font-variant-numeric: tabular-nums;
 }
 .ctc-pair__chevron {
-  color: var(--text-secondary);
+  flex: 0 0 auto;
+  color: var(--ctc-ink-3);
+  transition: transform 0.22s var(--ctc-ease);
+}
+.ctc-pair__button[aria-expanded=true] .ctc-pair__chevron {
+  transform: rotate(180deg);
+}
+.ctc-change {
+  font-weight: 700;
 }
 .ctc-change--up {
-  color: var(--color-green-600, #00a76a);
+  color: var(--ctc-up);
 }
 .ctc-change--down {
-  color: var(--color-coral-600, #e5303b);
+  color: var(--ctc-down);
 }
 .ctc-listbox {
   position: absolute;
-  z-index: 5;
-  top: calc(100% + 0.5rem);
+  z-index: 20;
+  top: calc(100% + 0.375rem);
   left: 0;
   right: 0;
   max-height: 16rem;
   overflow: auto;
   margin: 0;
-  padding: var(--spacing-8);
+  padding: 0;
   list-style: none;
-  background: var(--color-white, #fff);
-  border: 1px solid var(--color-slate-100, #e6e9ec);
-  border-radius: var(--radius-xl, 0.75rem);
-  box-shadow: var(--shadow-md, var(--shadow-sm));
+  background: #fff;
+  border: 1px solid var(--ctc-line);
+  border-radius: 0.875rem;
+  box-shadow: 0 8px 32px rgba(12, 17, 27, 0.18);
+}
+.ctc-listbox__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 0.875rem 0.625rem;
+  border-bottom: 1px solid var(--ctc-line-2);
+  font-weight: 800;
+  font-size: 0.875rem;
+  letter-spacing: -0.02em;
+  color: var(--ctc-ink);
 }
 .ctc-option {
   display: flex;
   align-items: center;
-  gap: var(--spacing-12);
-  padding: var(--spacing-8) var(--spacing-12);
-  border-radius: var(--radius-lg, 0.5rem);
+  gap: 0.625rem;
+  padding: 0.625rem 0.875rem;
+  border-bottom: 1px solid var(--ctc-line-2);
   cursor: pointer;
 }
+.ctc-option:last-child {
+  border-bottom: 0;
+}
 .ctc-option.is-active,
 .ctc-option:hover {
-  background: var(--color-slate-50, #f6f7f8);
+  background: var(--ctc-bg-2);
 }
 .ctc-option__text {
   display: flex;
   flex-direction: column;
   min-width: 0;
   flex: 1;
+  line-height: 1.3;
 }
 .ctc-option__name {
+  font-size: 0.875rem;
   font-weight: 700;
+  color: var(--ctc-ink);
 }
 .ctc-option__sub {
-  color: var(--text-secondary);
-  font-size: var(--font-size-75, 0.75rem);
+  color: var(--ctc-ink-3);
+  font-size: 0.71875rem;
 }
 .ctc-option__stats {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  gap: 0.125rem;
+  gap: 0;
+  line-height: 1.3;
   font-variant-numeric: tabular-nums;
-  font-size: var(--font-size-75, 0.75rem);
+  flex: 0 0 auto;
+}
+.ctc-option__stats > span:first-child {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--ctc-ink);
+}
+.ctc-option__stats .ctc-change {
+  font-size: 0.71875rem;
+}
+.ctc-seg {
+  display: flex;
+  width: 100%;
+  margin-top: 0.75rem;
+  padding: 0.25rem;
+  gap: 0.25rem;
+  border-radius: 0.6875rem;
+  background: var(--ctc-seg-bg);
+  box-sizing: border-box;
+}
+.ctc-seg__btn {
+  flex: 1;
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--ctc-ink-3);
+  font: inherit;
+  font-weight: 800;
+  font-size: 0.875rem;
+  padding: 0.5625rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  min-height: 2.5rem;
+  box-shadow: none;
+  transition: background 0.18s, color 0.18s;
+}
+@media (min-width: 768px) {
+  .ctc-seg__btn {
+    min-height: 2.875rem;
+    font-size: 0.9375rem;
+  }
+}
+.ctc-seg__btn.is-active {
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(12, 17, 27, 0.14);
+}
+.ctc-seg__btn.is-active.is-buy {
+  color: var(--ctc-buy);
+}
+.ctc-seg__btn.is-active.is-sell {
+  color: var(--ctc-sell);
+}
+.ctc-seg__btn:focus-visible {
+  outline: 2px solid var(--ctc-sell);
+  outline-offset: 3px;
 }
 .ctc-fields {
+  display: grid;
+  gap: 0.625rem;
+  margin-top: 0.75rem;
+}
+.ctc-amount {
+  display: block;
+  background: #fff;
+  border: 1px solid var(--ctc-line);
+  border-radius: 0.75rem;
+  padding: 0.75rem 0.875rem;
+  transition: box-shadow 0.2s var(--ctc-ease), border-color 0.2s var(--ctc-ease);
+  box-sizing: border-box;
+}
+@media (min-width: 768px) {
+  .ctc-amount {
+    padding: 0.9375rem 1rem;
+  }
+}
+.ctc-amount:focus-within {
+  border-color: var(--ctc-ink-3);
+  box-shadow: 0 0 0 3px rgba(24, 28, 37, 0.06);
+}
+.ctc-amount.is-invalid {
+  border-color: var(--ctc-sell);
+}
+.ctc-amount__label {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--ctc-ink-3);
+  margin-bottom: 0.375rem;
+}
+.ctc-amount__row {
   display: flex;
-  flex-direction: column;
-  gap: var(--spacing-12);
+  align-items: center;
+  gap: 0.75rem;
 }
-.ctc-rate {
-  margin: 0;
-  color: var(--text-secondary);
-  font-size: var(--font-size-75, 0.75rem);
+.ctc-amount__input {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--ctc-ink);
+  padding: 0;
+  outline: none;
+}
+@media (min-width: 768px) {
+  .ctc-amount__input {
+    font-size: 1.375rem;
+  }
+}
+.ctc-amount__input::placeholder {
+  color: var(--ctc-ink-3);
+  font-weight: 700;
+  opacity: 1;
+}
+.ctc-amount__unit {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 4.25rem;
+  background: var(--ctc-bg-2);
+  border: 1px solid var(--ctc-line);
+  border-radius: 0.5rem;
+  padding: 0.4375rem 0.625rem;
+  font-size: 0.8125rem;
+  font-weight: 800;
+  color: var(--ctc-ink);
+}
+.ctc-amount__meta {
+  display: block;
+  margin-top: 0.375rem;
+  font-size: 0.75rem;
+  color: var(--ctc-ink-3);
+  font-variant-numeric: tabular-nums;
 }
 .ctc-error {
-  margin: 0;
-  color: var(--color-coral-600, #e5303b);
-  font-size: var(--font-size-75, 0.75rem);
+  margin: 0.5rem 0 0;
+  color: var(--ctc-sell);
+  font-size: 0.75rem;
 }
+.ctc-cta {
+  margin-top: 0.875rem;
+}
+.ctc-cta__btn,
 .ctc-cta-link {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  box-sizing: border-box;
+  color: #fff;
+  font: inherit;
+  font-weight: 800;
+  font-size: 1rem;
+  border: 0;
+  border-radius: 999px;
+  padding: 0.875rem;
+  min-height: 3.25rem;
   text-decoration: none;
+  cursor: pointer;
+  transition: background 0.2s;
+  background: var(--ctc-buy);
 }
-.ctc-cta-link .btn,
-.ctc-cta-link button {
-  pointer-events: none;
+@media (min-width: 768px) {
+  .ctc-cta__btn,
+  .ctc-cta-link {
+    min-height: 3.5rem;
+    font-size: 1.0625rem;
+  }
+}
+.ctc-cta__btn.is-sell,
+.ctc-cta-link.is-sell {
+  background: var(--ctc-sell);
+}
+.ctc-cta__btn:disabled,
+.ctc-cta__btn[aria-disabled=true] {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.ctc-cta__btn:focus-visible,
+.ctc-cta-link:focus-visible {
+  outline: 2px solid var(--ctc-sell);
+  outline-offset: 3px;
 }
 @media (prefers-reduced-motion: reduce) {
   .ctc-seg__btn,
   .ctc-pair__button,
-  .ctc-option {
+  .ctc-pair__chevron,
+  .ctc-option,
+  .ctc-amount,
+  .ctc-cta__btn,
+  .ctc-cta-link {
     transition: none;
   }
 }
@@ -11617,7 +11833,7 @@
 .cmt-container {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-24);
+  gap: var(--spacing-48);
   max-width: var(--content-width-1280);
   margin: 0 auto;
   padding: var(--spacing-56) var(--spacing-16);