@deriv-com/dds-marketing 1.0.2 → 1.1.1

package/dist/marketing.css

@@ -25,6 +25,7 @@
   --color-bg-active: #00000014;
   --color-bg-band-subtle: #F4F5F6;
   --color-bg-brand-active: #D2002A;
+  --color-bg-brand-deep: #3F0000;
   --color-bg-brand-hover: #E82A3D;
   --color-bg-brand-strong: #0C0C0C;
   --color-bg-brand-subtle: #FFE4E1;
@@ -42,6 +43,7 @@
   --color-bg-page: #FFFFFF;
   --color-bg-readonly: #0000001A;
   --color-bg-selected: #00000014;
+  --color-bg-store-badge: #000000;
   --color-bg-strong-on-brand: #0C0C0C;
   --color-bg-strong: #0C0C0C;
   --color-bg-subtle-on-brand-strong: #FFFFFF0F;
@@ -147,6 +149,11 @@
   --font-field-label-md-weight: 500;
   --font-figure-family: var(--font-family-sans);
   --font-figure-letter-spacing: -0.015em;
+  --font-figure-lg-family: var(--font-family-sans);
+  --font-figure-lg-letter-spacing: -0.015em;
+  --font-figure-lg-line-height: 1.125;
+  --font-figure-lg-size: 64px;
+  --font-figure-lg-weight: 600;
   --font-figure-line-height: 1.125;
   --font-figure-size: 56px;
   --font-figure-weight: 600;
@@ -221,6 +228,7 @@
   --motion-duration-drift: 10000ms;
   --motion-duration-dwell: 5000ms;
   --motion-duration-fast: 100ms;
+  --motion-duration-hold: 1000ms;
   --motion-duration-instant: 0ms;
   --motion-duration-media-hover: 400ms;
   --motion-duration-normal: 200ms;
@@ -230,7 +238,9 @@
   --motion-duration-slow: 300ms;
   --motion-duration-spinner: 500ms;
   --motion-duration-stagger: 100ms;
+  --motion-duration-ticker: 4000ms;
   --motion-duration-trail: 500ms;
+  --motion-duration-turn: 700ms;
   --motion-easing-enter: cubic-bezier(0.33, 1, 0.68, 1);
   --motion-easing-exit: cubic-bezier(0.32, 0, 0.67, 0);
   --motion-easing-media-hover: cubic-bezier(0.65, 0, 0.35, 1);
@@ -242,6 +252,7 @@
   --motion-scale-enter: 0.96;
   --motion-scale-hover: 1.02;
   --motion-scale-media-hover: 1.04;
+  --motion-scale-pile-covered: 0.96;
   --motion-translate-enter: 0 100%;
   --motion-translate-hover: 0 -4px;
   --motion-translate-reveal: 0 24px;
@@ -276,14 +287,21 @@
   --size-control-lg: 48px;
   --size-control-md: 40px;
   --size-control-sm: 32px;
+  --size-data-table-search: 320px;
   --size-dot-current: 24px;
   --size-dot-diameter: 8px;
+  --size-download-banner-badge: 160px;
+  --size-download-banner-media: 320px;
+  --size-download-banner-qr: 128px;
+  --size-feature-cards-carousel-card: 400px;
+  --size-feature-stack-media: 960px;
   --size-grid-track-lg: 320px;
   --size-grid-track-md: 240px;
   --size-grid-track-sm: 160px;
   --size-halftone-dot: 6px;
   --size-halftone-pitch: 20px;
   --size-heading-group-max: 846px;
+  --size-image-banner-card: 480px;
   --size-logo-columns-height: 640px;
   --size-logo-rows-tile: 192px;
   --size-measure-description: 60ch;
@@ -295,6 +313,7 @@
   --size-menu-max: 224px;
   --size-menu-panel-max: 846px;
   --size-menu-panel-min: 320px;
+  --size-mesh-blur: 48px;
   --size-review-card-min: 320px;
   --size-rings-pitch: 64px;
   --size-rings-spotlight: 128px;
@@ -310,9 +329,13 @@
   --size-spinner-stroke-lg: 4px;
   --size-spinner-stroke-md: 3px;
   --size-spinner-stroke-sm: 2px;
+  --size-sticky-cards-compact-max: 846px;
+  --size-sticky-cards-compact-min: 240px;
+  --size-sticky-cards-feature-min: 560px;
   --size-switcher-panel-width: 640px;
   --size-target-min: 24px;
   --size-testimonial-art: 192px;
+  --size-tiers-medal: 64px;
   --size-tooltip-max: 224px;
   --space-actions-gap: 8px;
   --space-control-lg: 24px;
@@ -343,6 +366,7 @@
   --space-inset-sm: 12px;
   --space-inset-xl: 32px;
   --space-inset-xs: 8px;
+  --space-pile-peek: 16px;
   --space-section-compact: 48px;
   --space-section-default: 112px;
 }
@@ -368,6 +392,7 @@
   --color-bg-active: #FFFFFF14;
   --color-bg-band-subtle: #FFFFFF0F;
   --color-bg-brand-active: #D2002A;
+  --color-bg-brand-deep: #3F0000;
   --color-bg-brand-hover: #E82A3D;
   --color-bg-brand-strong: #0C0C0C;
   --color-bg-brand-subtle: #3F0000;
@@ -385,6 +410,7 @@
   --color-bg-page: #0C0C0C;
   --color-bg-readonly: #FFFFFF1A;
   --color-bg-selected: #FFFFFF14;
+  --color-bg-store-badge: #000000;
   --color-bg-strong-on-brand: #0C0C0C;
   --color-bg-strong: #FFFFFF;
   --color-bg-subtle-on-brand-strong: #FFFFFF0F;
@@ -471,7 +497,6 @@
   --font-eyebrow-lg-family: var(--font-family-sans);
   --font-eyebrow-lg-letter-spacing: 0em;
   --font-eyebrow-lg-line-height: 1.25;
-  --font-eyebrow-lg-size: 24px;
   --font-eyebrow-lg-weight: 600;
   --font-eyebrow-sm-family: var(--font-family-sans);
   --font-eyebrow-sm-letter-spacing: 0.025em;
@@ -490,33 +515,25 @@
   --font-field-label-md-weight: 500;
   --font-figure-family: var(--font-family-sans);
   --font-figure-letter-spacing: -0.015em;
-  --font-figure-line-height: 1.125;
-  --font-figure-size: 56px;
+  --font-figure-lg-family: var(--font-family-sans);
+  --font-figure-lg-letter-spacing: -0.015em;
+  --font-figure-lg-line-height: 1.125;
+  --font-figure-lg-size: 64px;
+  --font-figure-lg-weight: 600;
   --font-figure-weight: 600;
   --font-h1-family: var(--font-family-sans);
-  --font-h1-letter-spacing: -0.025em;
   --font-h1-line-height: 1.125;
-  --font-h1-size: 80px;
   --font-h1-weight: 800;
   --font-h2-family: var(--font-family-sans);
   --font-h2-letter-spacing: -0.015em;
-  --font-h2-line-height: 1.125;
-  --font-h2-size: 56px;
   --font-h2-weight: 800;
   --font-h3-family: var(--font-family-sans);
-  --font-h3-letter-spacing: -0.015em;
-  --font-h3-line-height: 1.125;
-  --font-h3-size: 48px;
   --font-h3-weight: 800;
   --font-h4-family: var(--font-family-sans);
-  --font-h4-letter-spacing: -0.015em;
   --font-h4-line-height: 1.25;
-  --font-h4-size: 36px;
   --font-h4-weight: 700;
   --font-h5-family: var(--font-family-sans);
   --font-h5-letter-spacing: -0.005em;
-  --font-h5-line-height: 1.25;
-  --font-h5-size: 24px;
   --font-h5-weight: 700;
   --font-label-lg-family: var(--font-family-sans);
   --font-label-lg-letter-spacing: 0em;
@@ -564,6 +581,7 @@
   --motion-duration-drift: 10000ms;
   --motion-duration-dwell: 5000ms;
   --motion-duration-fast: 100ms;
+  --motion-duration-hold: 1000ms;
   --motion-duration-instant: 0ms;
   --motion-duration-media-hover: 400ms;
   --motion-duration-normal: 200ms;
@@ -573,7 +591,9 @@
   --motion-duration-slow: 300ms;
   --motion-duration-spinner: 500ms;
   --motion-duration-stagger: 100ms;
+  --motion-duration-ticker: 4000ms;
   --motion-duration-trail: 500ms;
+  --motion-duration-turn: 700ms;
   --motion-easing-enter: cubic-bezier(0.33, 1, 0.68, 1);
   --motion-easing-exit: cubic-bezier(0.32, 0, 0.67, 0);
   --motion-easing-media-hover: cubic-bezier(0.65, 0, 0.35, 1);
@@ -585,6 +605,7 @@
   --motion-scale-enter: 0.96;
   --motion-scale-hover: 1.02;
   --motion-scale-media-hover: 1.04;
+  --motion-scale-pile-covered: 0.96;
   --motion-translate-enter: 0 100%;
   --motion-translate-hover: 0 -4px;
   --motion-translate-reveal: 0 24px;
@@ -619,14 +640,21 @@
   --size-control-lg: 48px;
   --size-control-md: 40px;
   --size-control-sm: 32px;
+  --size-data-table-search: 320px;
   --size-dot-current: 24px;
   --size-dot-diameter: 8px;
+  --size-download-banner-badge: 160px;
+  --size-download-banner-media: 320px;
+  --size-download-banner-qr: 128px;
+  --size-feature-cards-carousel-card: 400px;
+  --size-feature-stack-media: 960px;
   --size-grid-track-lg: 320px;
   --size-grid-track-md: 240px;
   --size-grid-track-sm: 160px;
   --size-halftone-dot: 6px;
   --size-halftone-pitch: 20px;
   --size-heading-group-max: 846px;
+  --size-image-banner-card: 480px;
   --size-logo-columns-height: 640px;
   --size-logo-rows-tile: 192px;
   --size-measure-description: 60ch;
@@ -638,6 +666,7 @@
   --size-menu-max: 224px;
   --size-menu-panel-max: 846px;
   --size-menu-panel-min: 320px;
+  --size-mesh-blur: 48px;
   --size-review-card-min: 320px;
   --size-rings-pitch: 64px;
   --size-rings-spotlight: 128px;
@@ -653,41 +682,32 @@
   --size-spinner-stroke-lg: 4px;
   --size-spinner-stroke-md: 3px;
   --size-spinner-stroke-sm: 2px;
+  --size-sticky-cards-compact-max: 846px;
+  --size-sticky-cards-compact-min: 240px;
+  --size-sticky-cards-feature-min: 560px;
   --size-switcher-panel-width: 640px;
   --size-target-min: 24px;
   --size-testimonial-art: 192px;
+  --size-tiers-medal: 64px;
   --size-tooltip-max: 224px;
   --space-actions-gap: 8px;
   --space-control-lg: 24px;
   --space-control-md: 20px;
   --space-control-sm: 16px;
-  --space-gap-2xl: 48px;
-  --space-gap-3xl: 72px;
   --space-gap-lg: 24px;
   --space-gap-md: 16px;
   --space-gap-none: 0px;
   --space-gap-sm: 8px;
-  --space-gap-xl: 32px;
   --space-gap-xs: 4px;
-  --space-grid-gutter: 20px;
-  --space-heading-content: 48px;
   --space-heading-description-actions: 24px;
-  --space-heading-eyebrow-title: 16px;
   --space-heading-title-description-compact: 8px;
   --space-heading-title-description: 16px;
-  --space-inset-2xl: 48px;
   --space-inset-2xs: 4px;
-  --space-inset-3xl: 72px;
-  --space-inset-4xl: 112px;
-  --space-inset-card: 32px;
   --space-inset-lg: 24px;
   --space-inset-md: 16px;
-  --space-inset-page: 32px;
   --space-inset-sm: 12px;
-  --space-inset-xl: 32px;
   --space-inset-xs: 8px;
-  --space-section-compact: 48px;
-  --space-section-default: 112px;
+  --space-pile-peek: 16px;
 }
 
 @media (max-width: 767px) {
@@ -785,3 +805,32 @@
   --space-section-default: 112px;
 }
 
+[data-dds-context="marketing"]:lang(ar, fa, ur, ps, ckb, sd, ug, syr, hi, mr, ne, bn, as, pa, gu, or, ta, te, kn, ml, si, my, km, lo, th, bo), [data-dds-context="marketing"] :lang(ar, fa, ur, ps, ckb, sd, ug, syr, hi, mr, ne, bn, as, pa, gu, or, ta, te, kn, ml, si, my, km, lo, th, bo) {
+  --font-eyebrow-lg-line-height: 1.4;
+  --font-eyebrow-sm-letter-spacing: 0em;
+  --font-eyebrow-sm-line-height: 1.4;
+  --font-field-label-lg-line-height: 1.4;
+  --font-field-label-md-line-height: 1.4;
+  --font-figure-letter-spacing: 0em;
+  --font-figure-lg-letter-spacing: 0em;
+  --font-figure-lg-line-height: 1.4;
+  --font-figure-line-height: 1.4;
+  --font-h1-letter-spacing: 0em;
+  --font-h1-line-height: 1.4;
+  --font-h2-letter-spacing: 0em;
+  --font-h2-line-height: 1.4;
+  --font-h3-letter-spacing: 0em;
+  --font-h3-line-height: 1.4;
+  --font-h4-letter-spacing: 0em;
+  --font-h4-line-height: 1.4;
+  --font-h5-letter-spacing: 0em;
+  --font-h5-line-height: 1.4;
+  --font-label-lg-line-height: 1.4;
+  --font-label-md-line-height: 1.4;
+  --font-label-medium-sm-line-height: 1.4;
+  --font-label-sm-line-height: 1.4;
+  --font-subtitle-line-height: 1.4;
+  --font-title-letter-spacing: 0em;
+  --font-title-line-height: 1.4;
+}
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deriv-com/dds-marketing",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "description": "Deriv Design System — components and tokens for marketing sites (landing pages, pricing, sign-up).",
   "license": "MIT",
   "author": {