@deriv-web-design/ui 0.0.10 → 0.0.13

package/dist/index.css

@@ -1444,7 +1444,7 @@
   font-family: var(--font-family-base);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-regular);
-  line-height: 1.375rem;
+  line-height: var(--line-height-sm);
   text-align: center;
   white-space: nowrap;
   cursor: pointer;
@@ -1472,7 +1472,7 @@
   font-family: var(--font-family-base);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-regular);
-  line-height: 1.375rem;
+  line-height: var(--line-height-sm);
   user-select: none;
 }
 .pagination .navButton {
@@ -1542,10 +1542,10 @@
   }
 }
 .fc-sectionTitle {
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-4xl);
-  font-weight: var(--font-weight-extra-bold);
-  line-height: var(--line-height-4xl);
+  font-family: var(--typography-h2-font-family);
+  font-size: var(--typography-h2-font-size);
+  font-weight: var(--typography-h2-font-weight);
+  line-height: var(--typography-h2-line-height);
   color: var(--color-slate-1200);
   margin: 0;
 }
@@ -2056,14 +2056,14 @@
   --hero-light-bg: var(--color-slate-75);
   --hero-text-light: var(--color-slate-50);
   --hero-text-dark: var(--color-slate-1200);
-  --hero-subtitle-size: var(--font-size-md);
-  --hero-subtitle-lh: var(--line-height-md);
-  --hero-title-size-mobile: var(--font-size-4xl);
-  --hero-title-lh-mobile: var(--line-height-4xl);
-  --hero-title-size: var(--font-size-5xl);
-  --hero-title-lh: var(--line-height-5xl);
-  --hero-body-size: var(--font-size-sm);
-  --hero-body-lh: var(--line-height-md);
+  --hero-subtitle-size: var(--typography-body-md-font-size);
+  --hero-subtitle-lh: var(--typography-body-md-line-height);
+  --hero-title-size-mobile: var(--typography-h2-font-size);
+  --hero-title-lh-mobile: var(--typography-h2-line-height);
+  --hero-title-size: var(--typography-h1-font-size);
+  --hero-title-lh: var(--typography-h1-line-height);
+  --hero-body-size: var(--typography-body-sm-font-size);
+  --hero-body-lh: var(--typography-body-md-line-height);
 }
 .hero {
   position: relative;
@@ -2105,19 +2105,19 @@
 }
 .hero__subtitle {
   font-size: var(--hero-subtitle-size);
-  font-weight: var(--font-weight-extra-bold);
+  font-weight: var(--typography-h2-font-weight);
   line-height: var(--hero-subtitle-lh);
   margin: 0;
 }
 .hero__title {
   font-size: var(--hero-title-size-mobile);
-  font-weight: var(--font-weight-extra-bold);
+  font-weight: var(--typography-h1-font-weight);
   line-height: var(--hero-title-lh-mobile);
   margin: 0;
 }
 .hero__description {
   font-size: var(--hero-body-size);
-  font-weight: var(--font-weight-regular);
+  font-weight: var(--typography-body-sm-font-weight);
   line-height: var(--hero-body-lh);
   margin: 0;
 }
@@ -2381,12 +2381,12 @@
     gap: var(--spacing-32);
   }
   .hero--homepage .hero__subtitle {
-    font-size: var(--font-size-2xl);
-    line-height: var(--line-height-xl);
+    font-size: var(--typography-h4-font-size);
+    line-height: var(--typography-h5-line-height);
   }
   .hero--homepage .hero__title {
-    font-size: var(--font-size-5xl);
-    line-height: var(--line-height-5xl);
+    font-size: var(--typography-h1-font-size);
+    line-height: var(--typography-h1-line-height);
   }
   .hero--homepage .hero__image-slot {
     position: absolute;
@@ -2473,10 +2473,10 @@
   --stats-bg: var(--color-slate-50);
   --stats-card-bg: var(--color-slate-75);
   --stats-text-primary: var(--color-slate-1200);
-  --stats-title-size: var(--font-size-4xl);
-  --stats-title-lh: var(--line-height-4xl);
-  --stats-desc-size: var(--font-size-md);
-  --stats-desc-lh: var(--line-height-md);
+  --stats-title-size: var(--typography-h2-font-size);
+  --stats-title-lh: var(--typography-h2-line-height);
+  --stats-desc-size: var(--typography-body-md-font-size);
+  --stats-desc-lh: var(--typography-body-md-line-height);
   --stats-value-size: var(--font-size-3xl);
   --stats-value-lh: var(--line-height-3xl);
   --stats-value-featured-size: var(--font-size-5xl);
@@ -2576,7 +2576,7 @@
 .stats__stat--active .stats__stat-value {
   font-size: var(--stats-value-featured-size);
   line-height: var(--stats-value-featured-lh);
-  font-weight: 900;
+  font-weight: var(--font-weight-extra-bold);
 }
 .stats__stat--inactive .stats__stat-value {
   font-size: var(--stats-value-size);
@@ -2700,28 +2700,20 @@
   --scrolly-link-color: var(--color-coral-500);
   --scrolly-link-hover: var(--color-coral-600);
   --scrolly-media-bg: var(--color-slate-200);
-  --scrolly-header-size: var(--font-size-3xl);
-  --scrolly-header-lh: var(--line-height-3xl);
-  --scrolly-title-size: var(--font-size-2xl);
-  --scrolly-title-lh: var(--line-height-2xl);
-  --scrolly-body-size: var(--font-size-md);
-  --scrolly-body-lh: var(--line-height-md);
-  --scrolly-link-size: var(--font-size-md);
-  --scrolly-link-lh: var(--line-height-sm);
+  --scrolly-header-size: var(--typography-h2-font-size);
+  --scrolly-header-lh: var(--typography-h2-line-height);
+  --scrolly-title-size: var(--typography-h3-font-size);
+  --scrolly-title-lh: var(--typography-h3-line-height);
+  --scrolly-body-size: var(--typography-body-md-font-size);
+  --scrolly-body-lh: var(--typography-body-md-line-height);
+  --scrolly-link-size: var(--typography-link-md-font-size);
+  --scrolly-link-lh: var(--typography-link-md-line-height);
   --scrolly-col-gap: var(--spacing-112);
   --scrolly-media-radius: var(--radius-2xl);
   --scrolly-mobile-radius: var(--radius-2xl);
   --scrolly-item-min-height: 60vh;
   --scrolly-sticky-top: var(--spacing-80);
 }
-@media (min-width: 992px) {
-  :root {
-    --scrolly-header-size: var(--font-size-4xl);
-    --scrolly-header-lh: var(--line-height-4xl);
-    --scrolly-title-size: var(--font-size-3xl);
-    --scrolly-title-lh: var(--line-height-3xl);
-  }
-}
 .scrolly {
   width: 100%;
   background-color: var(--scrolly-bg);
@@ -2910,12 +2902,12 @@
   --ssc-card-coral-text: var(--color-slate-50);
   --ssc-card-dark-bg: var(--color-slate-1200);
   --ssc-card-dark-text: var(--color-slate-50);
-  --ssc-header-size: var(--font-size-4xl);
-  --ssc-header-lh: var(--line-height-4xl);
-  --ssc-title-size: var(--font-size-3xl);
-  --ssc-title-lh: var(--line-height-3xl);
-  --ssc-body-size: var(--font-size-md);
-  --ssc-body-lh: var(--line-height-md);
+  --ssc-header-size: var(--typography-h2-font-size);
+  --ssc-header-lh: var(--typography-h2-line-height);
+  --ssc-title-size: var(--typography-h3-font-size);
+  --ssc-title-lh: var(--typography-h3-line-height);
+  --ssc-body-size: var(--typography-body-md-font-size);
+  --ssc-body-lh: var(--typography-body-md-line-height);
   --ssc-card-radius: var(--radius-2xl);
   --ssc-content-gap: var(--spacing-24);
   --ssc-sticky-top: var(--spacing-80);
@@ -3182,10 +3174,10 @@
 }
 .ctab__headline {
   margin: 0;
-  font-family: var(--font-family-base);
-  font-size: var(--font-size-5xl);
-  font-weight: var(--font-weight-extra-bold);
-  line-height: var(--line-height-5xl);
+  font-family: var(--typography-h1-font-family);
+  font-size: var(--typography-h1-font-size);
+  font-weight: var(--typography-h1-font-weight);
+  line-height: var(--typography-h1-line-height);
   color: var(--color-slate-50);
 }
 .ctab__avatar {
@@ -3368,6 +3360,106 @@
 .navbar--dark .navbar__pill .navbar__lang-globe {
   filter: brightness(0) invert(1);
 }
+.navbar__lang-wrapper {
+  position: relative;
+}
+.navbar__lang-dropdown {
+  position: absolute;
+  top: calc(100% + var(--spacing-8));
+  left: calc(50% - 352px);
+  width: 704px;
+  background-color: var(--color-slate-50);
+  border: 1px solid var(--color-slate-100);
+  border-radius: var(--navbar-dropdown-radius);
+  box-shadow: 0px 8px 16px 2px rgba(0, 0, 0, 0.04), 0px -14px 16px 2px rgba(0, 0, 0, 0.02);
+  padding: var(--spacing-24) var(--spacing-32);
+  z-index: var(--navbar-z-dropdown);
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.navbar__lang-dropdown-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-flow: column;
+  grid-template-rows: repeat(var(--lang-rows, 7), auto);
+  gap: 0;
+}
+.navbar__lang-dropdown-item {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-8) 0;
+  border: none;
+  background: transparent;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-md);
+  color: var(--color-slate-1200);
+  text-align: left;
+  cursor: pointer;
+  transition: color 120ms ease;
+  box-sizing: border-box;
+  white-space: nowrap;
+}
+.navbar__lang-dropdown-item:hover {
+  color: #ff444f;
+}
+.navbar__lang-dropdown-item--active {
+  color: #ff444f;
+  font-weight: var(--font-weight-semi-bold);
+}
+.navbar__drawer-lang-panel {
+  position: absolute;
+  inset: 0;
+  background-color: var(--color-slate-50);
+  display: flex;
+  flex-direction: column;
+  padding: 0 var(--spacing-24);
+  overflow-y: auto;
+  z-index: 1;
+}
+.navbar__drawer-lang-back {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: none;
+  background: transparent;
+  color: var(--color-slate-1200);
+  cursor: pointer;
+  padding: 0;
+  margin: var(--spacing-8) 0;
+  flex-shrink: 0;
+}
+.navbar__drawer-lang-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0;
+  padding: var(--spacing-8) 0 var(--spacing-16);
+}
+.navbar__drawer-lang-item {
+  display: block;
+  width: 100%;
+  padding: var(--spacing-12) 0;
+  border: none;
+  background: transparent;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-md);
+  color: var(--color-slate-1200);
+  text-align: left;
+  cursor: pointer;
+  transition: color 120ms ease;
+}
+.navbar__drawer-lang-item:hover {
+  color: #ff444f;
+}
+.navbar__drawer-lang-item--active {
+  color: #ff444f;
+  font-weight: var(--font-weight-semi-bold);
+}
 .navbar__actions {
   grid-column: 3;
   grid-row: 1;
@@ -3683,8 +3775,8 @@
   background-color: var(--color-slate-50);
 }
 .navbar__drawer-panel-cols {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
   gap: var(--spacing-16);
 }
 .navbar__drawer-panel-col {
@@ -3893,9 +3985,9 @@
 
 /* templates/DayNightTransition/DayNightTransition.css */
 :root {
-  --dnt-headline-size: var(--font-size-4xl);
-  --dnt-headline-lh: var(--line-height-4xl);
-  --dnt-headline-weight: var(--font-weight-extra-bold);
+  --dnt-headline-size: var(--typography-h2-font-size);
+  --dnt-headline-lh: var(--typography-h2-line-height);
+  --dnt-headline-weight: var(--typography-h2-font-weight);
   --dnt-text-day: var(--color-slate-1400);
   --dnt-text-night: var(--color-slate-50);
   --dnt-btn-bg: var(--color-coral-500);
@@ -3911,9 +4003,9 @@
   --dnt-content-max-width: 37.5rem;
   --dnt-content-py: var(--spacing-80);
   --dnt-content-px: var(--spacing-16);
-  --dnt-desc-size: var(--font-size-md);
-  --dnt-desc-lh: var(--line-height-md);
-  --dnt-desc-weight: var(--font-weight-regular);
+  --dnt-desc-size: var(--typography-body-md-font-size);
+  --dnt-desc-lh: var(--typography-body-md-line-height);
+  --dnt-desc-weight: var(--typography-body-md-font-weight);
   --dnt-gap: var(--spacing-16);
 }
 @media (min-width: 992px) {
@@ -4038,21 +4130,21 @@
   --pm-carousel-height: 39.375rem;
   --pm-carousel-height-mob: 20.5rem;
   --pm-fade-height: var(--spacing-64);
-  --pm-headline-size: var(--font-size-4xl);
-  --pm-headline-lh: var(--line-height-4xl);
+  --pm-headline-size: var(--typography-h2-font-size);
+  --pm-headline-lh: var(--typography-h2-line-height);
   --pm-headline-color: var(--color-slate-50);
-  --pm-headline-weight: var(--font-weight-extra-bold);
-  --pm-body-size: var(--font-size-md);
-  --pm-body-lh: var(--line-height-md);
+  --pm-headline-weight: var(--typography-h2-font-weight);
+  --pm-body-size: var(--typography-body-md-font-size);
+  --pm-body-lh: var(--typography-body-md-line-height);
   --pm-body-color: var(--color-slate-50);
-  --pm-body-weight: var(--font-weight-regular);
-  --pm-disc-size: var(--font-size-sm);
-  --pm-disc-lh: var(--line-height-sm);
+  --pm-body-weight: var(--typography-body-md-font-weight);
+  --pm-disc-size: var(--typography-body-sm-font-size);
+  --pm-disc-lh: var(--typography-body-sm-line-height);
   --pm-disc-color: var(--color-slate-400);
-  --pm-disc-weight: var(--font-weight-regular);
+  --pm-disc-weight: var(--typography-body-sm-font-weight);
   --pm-link-color: var(--color-coral-500);
-  --pm-link-size: var(--font-size-md);
-  --pm-link-weight: var(--font-weight-semi-bold);
+  --pm-link-size: var(--typography-link-md-font-size);
+  --pm-link-weight: var(--typography-link-md-font-weight);
   --pm-text-width: 32.625rem;
   --pm-section-py-mobile: var(--spacing-48);
   --pm-section-px-mobile: var(--spacing-16);