@deriv-com/dds-marketing 0.2.0 → 1.0.1

package/dist/components/testimonial-row-data.d.ts

@@ -0,0 +1,51 @@
+/**
+ * The reviews a TestimonialRow runs along, and the overall rating it states over them.
+ *
+ * Exported from the package for the reason `testimonial-slider-data.ts` and `banner-data.ts` are: a block
+ * whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a component per review, because a review is words, a name and a score —
+ * nothing in it is an element a page composes — and a set of them is what a review service's feed
+ * hands over.
+ */
+/** One review in a TestimonialRow: what was said, who said it, and what they rated it. */
+export interface TestimonialRowReview {
+    /**
+     * What the reviewer wrote, in their words. A sentence or two: a card is read on the way along the
+     * row, and one that runs on is one nobody finishes.
+     */
+    quote: string;
+    /** Who wrote it — the name the review service shows. */
+    name: string;
+    /** Where they are, under the name: "United Kingdom". */
+    detail?: string;
+    /**
+     * The stars they gave, out of five. Halves are drawn as half a star; anything finer is rounded to
+     * the nearest half. Absent, no stars are drawn — never five on a reviewer's behalf. Keep it the
+     * rating the source shows: it is a claim made in the reviewer's name.
+     */
+    rating?: number;
+    /**
+     * Where the review itself is, as a URL. Given, the whole card links to it and opens in a new tab,
+     * the review being on a service the page does not own.
+     */
+    href?: string;
+}
+/**
+ * The overall rating the reviews come with, written under the section's heading.
+ *
+ * The words are the page's rather than the component's, because they name the service the reviews
+ * came from — which this component deliberately does not know — and they have to be translated.
+ */
+export interface TestimonialRowSummary {
+    /**
+     * The overall rating, in the page's words: "Rated 4.5 out of 5 on our review site". Written, not
+     * drawn — the score is stated once, in words that can be translated and read aloud.
+     */
+    label: string;
+    /**
+     * Where the reviews were collected, as a URL. Given, the words become a link to it, opening in a
+     * new tab.
+     */
+    href?: string;
+}

package/dist/components/testimonial-row-data.js

@@ -0,0 +1,11 @@
+/**
+ * The reviews a TestimonialRow runs along, and the overall rating it states over them.
+ *
+ * Exported from the package for the reason `testimonial-slider-data.ts` and `banner-data.ts` are: a block
+ * whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * Records rather than a component per review, because a review is words, a name and a score —
+ * nothing in it is an element a page composes — and a set of them is what a review service's feed
+ * hands over.
+ */
+export {};

package/dist/components/testimonial-slider-data.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The quotes a TestimonialSlider rotates between.
+ *
+ * Exported from the package for the reason `scroll-data.ts` and `banner-data.ts` are: a block
+ * whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * A record rather than a component per quote, because a quote is words and a name — nothing in it
+ * is an element a page composes — and a set of them is what a CMS hands over.
+ */
+/** One quote in a TestimonialSlider: what was said, and who said it. */
+export interface TestimonialSliderQuote {
+    /**
+     * What the person said, in their words. A few sentences at most: a quote is read while it is in
+     * view, and one that runs past the card is one nobody finishes.
+     */
+    quote: string;
+    /** Who said it — a name, or the role they speak as: "Deriv partner". */
+    name: string;
+    /** Where they are or what they do, under the name: "Sri Lanka", "Trader since 2019". */
+    detail?: string;
+    /**
+     * Their picture, as a path or a URL. Drawn round at size.avatar beside the name, and decorative:
+     * the name says who it is.
+     */
+    avatar?: string;
+}

package/dist/components/testimonial-slider-data.js

@@ -0,0 +1,10 @@
+/**
+ * The quotes a TestimonialSlider rotates between.
+ *
+ * Exported from the package for the reason `scroll-data.ts` and `banner-data.ts` are: a block
+ * whose content is a list is one whose consumer builds a value before passing it.
+ *
+ * A record rather than a component per quote, because a quote is words and a name — nothing in it
+ * is an element a page composes — and a set of them is what a CMS hands over.
+ */
+export {};

package/dist/marketing.css

@@ -20,16 +20,19 @@
   --border-width-strong: 2px;
   --border-width-thick: 4px;
   --color-bg-active-inverse: #FFFFFF14;
+  --color-bg-active-on-brand-strong: #FFFFFF14;
   --color-bg-active: #00000014;
+  --color-bg-band-subtle: #F4F5F6;
   --color-bg-brand-active: #D2002A;
   --color-bg-brand-hover: #E82A3D;
-  --color-bg-brand-strong: #100000;
+  --color-bg-brand-strong: #0C0C0C;
   --color-bg-brand-subtle: #FFE4E1;
   --color-bg-brand: #FF444F;
   --color-bg-danger-subtle: #FFE7E0;
   --color-bg-danger: #E3272A;
   --color-bg-field: #0000000A;
   --color-bg-hover-inverse: #FFFFFF0A;
+  --color-bg-hover-on-brand-strong: #FFFFFF0A;
   --color-bg-hover: #0000000A;
   --color-bg-info-subtle: #DDF7FF;
   --color-bg-info: #0068FF;
@@ -38,14 +41,26 @@
   --color-bg-page: #FFFFFF;
   --color-bg-readonly: #0000001A;
   --color-bg-selected: #00000014;
+  --color-bg-strong-on-brand: #0C0C0C;
   --color-bg-strong: #0C0C0C;
+  --color-bg-subtle-on-brand-strong: #FFFFFF0F;
   --color-bg-subtle: #0000000F;
   --color-bg-success-subtle: #DFFFE5;
   --color-bg-success: #00A14E;
+  --color-bg-surface-card-light-raised: #FFFFFF;
+  --color-bg-surface-card-light: #F4F5F6;
+  --color-bg-surface-card-raised: #FFFFFF;
+  --color-bg-surface-card-strong-raised: #202020;
+  --color-bg-surface-card-strong: #202020;
   --color-bg-surface-inverse: #FFFFFF14;
   --color-bg-surface-modal: #FFFFFF;
   --color-bg-surface-raised-inverse: #FFFFFF3D;
+  --color-bg-surface-raised-on-brand-strong: #FFFFFF3D;
   --color-bg-surface-raised: #FFFFFF;
+  --color-bg-surface-translucent-on-brand-strong: #000000E0;
+  --color-bg-surface-translucent-tint-on-brand-strong: #FFFFFF1F;
+  --color-bg-surface-translucent-tint: #FFFFFF00;
+  --color-bg-surface-translucent: #FFFFFFE0;
   --color-bg-surface: #F4F5F6;
   --color-bg-track-active: #0000007A;
   --color-bg-track-hover: #0000003D;
@@ -56,6 +71,7 @@
   --color-border-danger: #E3272A;
   --color-border-default: #00000029;
   --color-border-focus-inverse: #FFFFFF;
+  --color-border-focus-on-brand-strong: #FFFFFF;
   --color-border-focus: #0C0C0C;
   --color-border-info: #0068FF;
   --color-border-strong: #63666B;
@@ -72,8 +88,11 @@
   --color-fg-muted-inverse: #FFFFFFA3;
   --color-fg-muted: #63666B;
   --color-fg-on-brand-strong: #FFFFFF;
+  --color-fg-on-brand: #FFFFFF;
   --color-fg-on-solid: #FFFFFF;
+  --color-fg-on-strong-on-brand: #FFFFFF;
   --color-fg-on-strong: #FFFFFF;
+  --color-fg-on-surface-card-light: #0C0C0C;
   --color-fg-on-warning: #0C0C0C;
   --color-fg-required: #C00000;
   --color-fg-success: #00802E;
@@ -102,11 +121,16 @@
   --font-body-sm-line-height: 1.5;
   --font-body-sm-size: 14px;
   --font-body-sm-weight: 400;
-  --font-eyebrow-family: var(--font-family-sans);
-  --font-eyebrow-letter-spacing: 0.025em;
-  --font-eyebrow-line-height: 1.25;
-  --font-eyebrow-size: 12px;
-  --font-eyebrow-weight: 500;
+  --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;
+  --font-eyebrow-sm-line-height: 1.25;
+  --font-eyebrow-sm-size: 12px;
+  --font-eyebrow-sm-weight: 500;
   --font-field-label-lg-family: var(--font-family-sans);
   --font-field-label-lg-letter-spacing: 0em;
   --font-field-label-lg-line-height: 1.25;
@@ -188,7 +212,9 @@
   --icon-size-xs: 16px;
   --layer-overlay: 800;
   --layer-popup: 400;
+  --motion-distance-drift: 64px;
   --motion-duration-dramatic: 700ms;
+  --motion-duration-dwell: 5000ms;
   --motion-duration-fast: 100ms;
   --motion-duration-instant: 0ms;
   --motion-duration-media-hover: 400ms;
@@ -198,6 +224,7 @@
   --motion-duration-shift: 400ms;
   --motion-duration-slow: 300ms;
   --motion-duration-spinner: 500ms;
+  --motion-duration-stagger: 100ms;
   --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);
@@ -205,12 +232,16 @@
   --motion-easing-shift: cubic-bezier(0.65, 0, 0.35, 1);
   --motion-easing-spinner: cubic-bezier(0, 0, 1, 1);
   --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --motion-scale-band-exit: 0.92;
   --motion-scale-enter: 0.96;
   --motion-scale-hover: 1.02;
   --motion-scale-media-hover: 1.04;
   --motion-translate-enter: 0 100%;
   --motion-translate-hover: 0 -4px;
+  --motion-translate-reveal: 0 24px;
   --opacity-disabled: 0.22;
+  --opacity-dot-current: 1;
+  --opacity-dot-rest: 0.48;
   --opacity-hidden: 0;
   --opacity-muted: 0.72;
   --opacity-track: 0.22;
@@ -227,6 +258,9 @@
   --radius-subtle: 12px;
   --radius-surface-compact: 16px;
   --radius-surface: 24px;
+  --size-avatar: 48px;
+  --size-backdrop-blur: 16px;
+  --size-band-compact: 480px;
   --size-bar-height: 56px;
   --size-breakpoint-lg: 1024px;
   --size-breakpoint-md: 768px;
@@ -235,17 +269,25 @@
   --size-control-lg: 48px;
   --size-control-md: 40px;
   --size-control-sm: 32px;
+  --size-dot-current: 24px;
   --size-dot-diameter: 8px;
   --size-grid-track-lg: 320px;
   --size-grid-track-md: 240px;
   --size-grid-track-sm: 160px;
   --size-heading-group-max: 846px;
+  --size-logo-columns-height: 640px;
+  --size-logo-rows-tile: 192px;
   --size-measure-description: 60ch;
+  --size-measure-heading: 846px;
+  --size-measure-hero-description: 70ch;
+  --size-measure-hero-heading: 960px;
   --size-measure-long-form: 65ch;
   --size-measure-title: 20ch;
   --size-menu-max: 224px;
   --size-menu-panel-max: 846px;
   --size-menu-panel-min: 320px;
+  --size-review-card-min: 320px;
+  --size-rule-grid-pitch: 96px;
   --size-sheet-handle-height: 4px;
   --size-sheet-handle-width: 40px;
   --size-sheet-max: 640px;
@@ -258,8 +300,9 @@
   --size-spinner-stroke-sm: 2px;
   --size-switcher-panel-width: 640px;
   --size-target-min: 24px;
+  --size-testimonial-art: 192px;
   --size-tooltip-max: 224px;
-  --space-actions-gap: 16px;
+  --space-actions-gap: 8px;
   --space-control-lg: 24px;
   --space-control-md: 20px;
   --space-control-sm: 16px;
@@ -273,7 +316,338 @@
   --space-gap-xs: 4px;
   --space-grid-gutter: 20px;
   --space-heading-content: 48px;
-  --space-heading-description-actions: 32px;
+  --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;
+}
+
+[data-theme="dark"], [data-dds-context="marketing"][data-theme="dark"], [data-theme="dark"] [data-dds-context="marketing"] {
+  --aspect-landscape: 4 / 3;
+  --aspect-portrait: 4 / 5;
+  --aspect-square: 1 / 1;
+  --aspect-ultrawide: 21 / 9;
+  --aspect-widescreen: 16 / 9;
+  --border-style-decorative: dashed;
+  --border-style-default: solid;
+  --border-width-default: 1px;
+  --border-width-emphasis: 1.5px;
+  --border-width-focus: 2px;
+  --border-width-hairline: 0.5px;
+  --border-width-none: 0px;
+  --border-width-strong: 2px;
+  --border-width-thick: 4px;
+  --color-bg-active-inverse: #00000014;
+  --color-bg-active-on-brand-strong: #FFFFFF14;
+  --color-bg-active: #FFFFFF14;
+  --color-bg-band-subtle: #FFFFFF0F;
+  --color-bg-brand-active: #D2002A;
+  --color-bg-brand-hover: #E82A3D;
+  --color-bg-brand-strong: #0C0C0C;
+  --color-bg-brand-subtle: #3F0000;
+  --color-bg-brand: #FF444F;
+  --color-bg-danger-subtle: #390000;
+  --color-bg-danger: #F6554D;
+  --color-bg-field: #FFFFFF0A;
+  --color-bg-hover-inverse: #0000000A;
+  --color-bg-hover-on-brand-strong: #FFFFFF0A;
+  --color-bg-hover: #FFFFFF0A;
+  --color-bg-info-subtle: #00004A;
+  --color-bg-info: #3786FF;
+  --color-bg-overlay-subtle: #0000003D;
+  --color-bg-overlay: #000000A3;
+  --color-bg-page: #0C0C0C;
+  --color-bg-readonly: #FFFFFF1A;
+  --color-bg-selected: #FFFFFF14;
+  --color-bg-strong-on-brand: #0C0C0C;
+  --color-bg-strong: #FFFFFF;
+  --color-bg-subtle-on-brand-strong: #FFFFFF0F;
+  --color-bg-subtle: #FFFFFF0F;
+  --color-bg-success-subtle: #002001;
+  --color-bg-success: #45B569;
+  --color-bg-surface-card-light-raised: #F4F5F6;
+  --color-bg-surface-card-light: #F4F5F6;
+  --color-bg-surface-card-raised: #FFFFFF0F;
+  --color-bg-surface-card-strong-raised: #363636;
+  --color-bg-surface-card-strong: #202020;
+  --color-bg-surface-inverse: #FFFFFF14;
+  --color-bg-surface-modal: #202020;
+  --color-bg-surface-raised-inverse: #0000003D;
+  --color-bg-surface-raised-on-brand-strong: #FFFFFF3D;
+  --color-bg-surface-raised: #4C4D50;
+  --color-bg-surface-translucent-on-brand-strong: #000000E0;
+  --color-bg-surface-translucent-tint-on-brand-strong: #FFFFFF1F;
+  --color-bg-surface-translucent-tint: #FFFFFF29;
+  --color-bg-surface-translucent: #000000E0;
+  --color-bg-surface: #202020;
+  --color-bg-track-active: #FFFFFF7A;
+  --color-bg-track-hover: #FFFFFF3D;
+  --color-bg-track: #FFFFFF14;
+  --color-bg-transparent: #FFFFFF00;
+  --color-bg-warning-subtle: #360F00;
+  --color-bg-warning: #FDAE43;
+  --color-border-danger: #F6554D;
+  --color-border-default: #FFFFFF29;
+  --color-border-focus-inverse: #0C0C0C;
+  --color-border-focus-on-brand-strong: #FFFFFF;
+  --color-border-focus: #FFFFFF;
+  --color-border-info: #3786FF;
+  --color-border-strong: #A2A7AD;
+  --color-border-subtle-inverse: #FFFFFF29;
+  --color-border-subtle: #FFFFFF0F;
+  --color-border-success: #45B569;
+  --color-border-warning: #FDAE43;
+  --color-fg-brand-accent: #FF444F;
+  --color-fg-brand: #FF8583;
+  --color-fg-danger: #FF796E;
+  --color-fg-default: #F4F5F6;
+  --color-fg-disabled: #4C4D50;
+  --color-fg-info: #5EA3FF;
+  --color-fg-muted-inverse: #FFFFFFA3;
+  --color-fg-muted: #A2A7AD;
+  --color-fg-on-brand-strong: #FFFFFF;
+  --color-fg-on-brand: #FFFFFF;
+  --color-fg-on-solid: #0C0C0C;
+  --color-fg-on-strong-on-brand: #FFFFFF;
+  --color-fg-on-strong: #0C0C0C;
+  --color-fg-on-surface-card-light: #0C0C0C;
+  --color-fg-on-warning: #0C0C0C;
+  --color-fg-required: #FF796E;
+  --color-fg-success: #6BC985;
+  --color-fg-tertiary: #71767D;
+  --color-fg-warning: #FFBD65;
+  --elevation-edge-bottom: 0px 1px 2px 0px #0000001F;
+  --elevation-edge-top: 0px -1px 2px 0px #0000001F;
+  --elevation-ring-hover: inset 0px 0px 0px 2px #FFFFFF0A;
+  --elevation-surface-floating: 0px 4px 8px 0px #00000029;
+  --elevation-surface-modal: 0px 12px 24px 0px #00000029;
+  --elevation-surface-overlay: 0px 12px 24px 0px #00000029;
+  --elevation-surface-raised: 0px 1px 2px 0px #0000001F;
+  --elevation-surface-sticky: 0px 4px 8px 0px #0000001F;
+  --font-body-lg-family: var(--font-family-sans);
+  --font-body-lg-letter-spacing: 0em;
+  --font-body-lg-line-height: 1.5;
+  --font-body-lg-size: 18px;
+  --font-body-lg-weight: 400;
+  --font-body-md-family: var(--font-family-sans);
+  --font-body-md-letter-spacing: 0em;
+  --font-body-md-line-height: 1.5;
+  --font-body-md-size: 16px;
+  --font-body-md-weight: 400;
+  --font-body-sm-family: var(--font-family-sans);
+  --font-body-sm-letter-spacing: 0em;
+  --font-body-sm-line-height: 1.5;
+  --font-body-sm-size: 14px;
+  --font-body-sm-weight: 400;
+  --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;
+  --font-eyebrow-sm-line-height: 1.25;
+  --font-eyebrow-sm-size: 12px;
+  --font-eyebrow-sm-weight: 500;
+  --font-field-label-lg-family: var(--font-family-sans);
+  --font-field-label-lg-letter-spacing: 0em;
+  --font-field-label-lg-line-height: 1.25;
+  --font-field-label-lg-size: 18px;
+  --font-field-label-lg-weight: 500;
+  --font-field-label-md-family: var(--font-family-sans);
+  --font-field-label-md-letter-spacing: 0em;
+  --font-field-label-md-line-height: 1.25;
+  --font-field-label-md-size: 16px;
+  --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-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;
+  --font-label-lg-line-height: 1.25;
+  --font-label-lg-size: 18px;
+  --font-label-lg-weight: 600;
+  --font-label-md-family: var(--font-family-sans);
+  --font-label-md-letter-spacing: 0em;
+  --font-label-md-line-height: 1.25;
+  --font-label-md-size: 16px;
+  --font-label-md-weight: 600;
+  --font-label-medium-sm-family: var(--font-family-sans);
+  --font-label-medium-sm-letter-spacing: 0em;
+  --font-label-medium-sm-line-height: 1.25;
+  --font-label-medium-sm-size: 14px;
+  --font-label-medium-sm-weight: 500;
+  --font-label-sm-family: var(--font-family-sans);
+  --font-label-sm-letter-spacing: 0em;
+  --font-label-sm-line-height: 1.25;
+  --font-label-sm-size: 14px;
+  --font-label-sm-weight: 600;
+  --font-subtitle-family: var(--font-family-sans);
+  --font-subtitle-letter-spacing: 0em;
+  --font-subtitle-line-height: 1.25;
+  --font-subtitle-size: 20px;
+  --font-subtitle-weight: 600;
+  --font-title-family: var(--font-family-sans);
+  --font-title-letter-spacing: -0.005em;
+  --font-title-line-height: 1.25;
+  --font-title-size: 20px;
+  --font-title-weight: 700;
+  --icon-control-lg: 20px;
+  --icon-control-md: 18px;
+  --icon-control-sm: 16px;
+  --icon-size-2xs: 12px;
+  --icon-size-lg: 32px;
+  --icon-size-md: 24px;
+  --icon-size-sm: 20px;
+  --icon-size-xl: 48px;
+  --icon-size-xs: 16px;
+  --layer-overlay: 800;
+  --layer-popup: 400;
+  --motion-distance-drift: 64px;
+  --motion-duration-dramatic: 700ms;
+  --motion-duration-dwell: 5000ms;
+  --motion-duration-fast: 100ms;
+  --motion-duration-instant: 0ms;
+  --motion-duration-media-hover: 400ms;
+  --motion-duration-normal: 200ms;
+  --motion-duration-pulse: 1500ms;
+  --motion-duration-reveal: 500ms;
+  --motion-duration-shift: 400ms;
+  --motion-duration-slow: 300ms;
+  --motion-duration-spinner: 500ms;
+  --motion-duration-stagger: 100ms;
+  --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);
+  --motion-easing-reveal: cubic-bezier(0.22, 1, 0.36, 1);
+  --motion-easing-shift: cubic-bezier(0.65, 0, 0.35, 1);
+  --motion-easing-spinner: cubic-bezier(0, 0, 1, 1);
+  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+  --motion-scale-band-exit: 0.92;
+  --motion-scale-enter: 0.96;
+  --motion-scale-hover: 1.02;
+  --motion-scale-media-hover: 1.04;
+  --motion-translate-enter: 0 100%;
+  --motion-translate-hover: 0 -4px;
+  --motion-translate-reveal: 0 24px;
+  --opacity-disabled: 0.22;
+  --opacity-dot-current: 1;
+  --opacity-dot-rest: 0.48;
+  --opacity-hidden: 0;
+  --opacity-muted: 0.72;
+  --opacity-track: 0.22;
+  --radius-container-item: 16px;
+  --radius-container: 32px;
+  --radius-control-lg: 12px;
+  --radius-control-md: 10px;
+  --radius-control-sm: 8px;
+  --radius-expressive: 48px;
+  --radius-menu-item: 12px;
+  --radius-menu: 16px;
+  --radius-none: 0px;
+  --radius-pill: 9999px;
+  --radius-subtle: 12px;
+  --radius-surface-compact: 16px;
+  --radius-surface: 24px;
+  --size-avatar: 48px;
+  --size-backdrop-blur: 16px;
+  --size-band-compact: 480px;
+  --size-bar-height: 56px;
+  --size-breakpoint-lg: 1024px;
+  --size-breakpoint-md: 768px;
+  --size-checkbox-box: 20px;
+  --size-content-max: 1280px;
+  --size-control-lg: 48px;
+  --size-control-md: 40px;
+  --size-control-sm: 32px;
+  --size-dot-current: 24px;
+  --size-dot-diameter: 8px;
+  --size-grid-track-lg: 320px;
+  --size-grid-track-md: 240px;
+  --size-grid-track-sm: 160px;
+  --size-heading-group-max: 846px;
+  --size-logo-columns-height: 640px;
+  --size-logo-rows-tile: 192px;
+  --size-measure-description: 60ch;
+  --size-measure-heading: 846px;
+  --size-measure-hero-description: 70ch;
+  --size-measure-hero-heading: 960px;
+  --size-measure-long-form: 65ch;
+  --size-measure-title: 20ch;
+  --size-menu-max: 224px;
+  --size-menu-panel-max: 846px;
+  --size-menu-panel-min: 320px;
+  --size-review-card-min: 320px;
+  --size-rule-grid-pitch: 96px;
+  --size-sheet-handle-height: 4px;
+  --size-sheet-handle-width: 40px;
+  --size-sheet-max: 640px;
+  --size-sheet-peek: 56px;
+  --size-spinner-lg: 40px;
+  --size-spinner-md: 24px;
+  --size-spinner-sm: 16px;
+  --size-spinner-stroke-lg: 4px;
+  --size-spinner-stroke-md: 3px;
+  --size-spinner-stroke-sm: 2px;
+  --size-switcher-panel-width: 640px;
+  --size-target-min: 24px;
+  --size-testimonial-art: 192px;
+  --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;
@@ -294,6 +668,7 @@
 
 @media (max-width: 767px) {
   :root, [data-dds-context="marketing"] {
+    --font-eyebrow-lg-size: 20px;
     --font-figure-line-height: 1.25;
     --font-figure-size: 40px;
     --font-h1-letter-spacing: -0.015em;
@@ -307,13 +682,11 @@
     --font-h4-size: 24px;
     --font-h5-line-height: 1.375;
     --font-h5-size: 20px;
-    --space-actions-gap: 12px;
     --space-gap-2xl: 32px;
     --space-gap-3xl: 48px;
     --space-gap-xl: 24px;
     --space-grid-gutter: 16px;
     --space-heading-content: 32px;
-    --space-heading-description-actions: 24px;
     --space-heading-eyebrow-title: 12px;
     --space-inset-2xl: 32px;
     --space-inset-3xl: 48px;
@@ -327,6 +700,7 @@
 }
 
 [data-dds-viewport="mobile"], [data-dds-context="marketing"][data-dds-viewport="mobile"] {
+  --font-eyebrow-lg-size: 20px;
   --font-figure-line-height: 1.25;
   --font-figure-size: 40px;
   --font-h1-letter-spacing: -0.015em;
@@ -340,13 +714,11 @@
   --font-h4-size: 24px;
   --font-h5-line-height: 1.375;
   --font-h5-size: 20px;
-  --space-actions-gap: 12px;
   --space-gap-2xl: 32px;
   --space-gap-3xl: 48px;
   --space-gap-xl: 24px;
   --space-grid-gutter: 16px;
   --space-heading-content: 32px;
-  --space-heading-description-actions: 24px;
   --space-heading-eyebrow-title: 12px;
   --space-inset-2xl: 32px;
   --space-inset-3xl: 48px;
@@ -359,6 +731,7 @@
 }
 
 [data-dds-viewport="desktop"], [data-dds-context="marketing"][data-dds-viewport="desktop"] {
+  --font-eyebrow-lg-size: 24px;
   --font-figure-line-height: 1.125;
   --font-figure-size: 56px;
   --font-h1-letter-spacing: -0.025em;
@@ -372,13 +745,11 @@
   --font-h4-size: 36px;
   --font-h5-line-height: 1.25;
   --font-h5-size: 24px;
-  --space-actions-gap: 16px;
   --space-gap-2xl: 48px;
   --space-gap-3xl: 72px;
   --space-gap-xl: 32px;
   --space-grid-gutter: 20px;
   --space-heading-content: 48px;
-  --space-heading-description-actions: 32px;
   --space-heading-eyebrow-title: 16px;
   --space-inset-2xl: 48px;
   --space-inset-3xl: 72px;

package/package.json

@@ -1,17 +1,12 @@
 {
   "name": "@deriv-com/dds-marketing",
-  "version": "0.2.0",
+  "version": "1.0.1",
   "description": "Deriv Design System — components and tokens for marketing sites (landing pages, pricing, sign-up).",
   "license": "MIT",
   "author": {
     "name": "Deriv.com Limited"
   },
   "type": "module",
-  "dds": {
-    "modes": [
-      "light"
-    ]
-  },
   "sideEffects": [
     "**/*.css"
   ],