@deriv-web-design/ui 0.1.12 → 0.1.13

package/block-registry.json

@@ -1815,6 +1815,23 @@
             "default": false,
             "defaultSource": "effective"
           },
+          "steps": {
+            "type": "array",
+            "required": false,
+            "description": "Numbered entries for \"steps\" blocks, rendered via the Steps template; the block's own `text` field is used as the section title.",
+            "itemFields": {
+              "description": {
+                "type": "string",
+                "required": true,
+                "maxLength": 200
+              },
+              "title": {
+                "type": "string",
+                "required": true,
+                "maxLength": 60
+              }
+            }
+          },
           "text": {
             "type": "string",
             "required": false,
@@ -1828,7 +1845,8 @@
               "paragraph",
               "list",
               "quote",
-              "image"
+              "image",
+              "steps"
             ]
           }
         }

package/components.manifest.json

@@ -1407,15 +1407,20 @@
               "required": false,
               "description": "Render a \"list\" block as `<ol>` instead of `<ul>` (default: false)"
             },
+            "steps": {
+              "type": "FeatureBlogStepItem[]",
+              "required": false,
+              "description": "Numbered entries for \"steps\" blocks — rendered via the Steps template"
+            },
             "text": {
               "type": "string",
               "required": false,
-              "description": "Text content for \"heading\" / \"paragraph\" / \"quote\" blocks"
+              "description": "Text content for \"heading\" / \"paragraph\" / \"quote\" blocks; section title for \"steps\" blocks"
             },
             "type": {
               "type": "FeatureBlogContentBlockType",
               "required": true,
-              "description": "Block kind — \"heading\"/\"paragraph\"/\"quote\" use `text`, \"list\" uses `items`, \"image\" uses `image`"
+              "description": "Block kind — \"heading\"/\"paragraph\"/\"quote\" use `text`, \"list\" uses `items`, \"image\" uses `image`, \"steps\" uses `text` (section title) + `steps`"
             }
           }
         },
@@ -2708,6 +2713,12 @@
       "name": "Steps",
       "source": "templates/Steps/Steps.tsx",
       "props": {
+        "embedded": {
+          "type": "boolean",
+          "required": false,
+          "description": "Render without the standalone page-section shell (no section background, no section-level block padding, and a `<div>` instead of a `<section>` landmark) for embedding inline inside another template's content flow, e.g. `FeatureBlogPage`'s article body (default: false).",
+          "default": false
+        },
         "image": {
           "type": "string",
           "required": false,
@@ -2746,6 +2757,11 @@
           "type": "string",
           "required": true,
           "description": "Section headline (H2)"
+        },
+        "titleId": {
+          "type": "string",
+          "required": false,
+          "description": "Anchor id applied to the title `<h2>` instead of the section wrapper — lets an embedding parent (e.g. a table of contents) scroll-target the heading itself."
         }
       }
     },

package/dist/index.css

@@ -1846,7 +1846,7 @@
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
   line-height: var(--typography-body-md-line-height);
-  color: var(--color-slate-1200);
+  color: var(--text-primary);
   margin: 0;
   max-width: 640px;
 }
@@ -2145,7 +2145,7 @@
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
   line-height: var(--typography-body-md-line-height);
-  color: var(--color-slate-1200);
+  color: var(--text-primary);
   margin: 0;
   max-width: 640px;
 }
@@ -2238,7 +2238,7 @@
   align-items: flex-start;
   gap: var(--spacing-16);
   padding: var(--spacing-16) 0;
-  border-bottom: 1px solid var(--color-slate-100);
+  border-bottom: 1px solid var(--color-opacity-slate-8);
 }
 .feature-bullets__bullet-item:first-child {
   padding-top: 0;
@@ -2267,7 +2267,7 @@
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
   line-height: var(--typography-body-md-line-height);
-  color: var(--color-slate-1200);
+  color: var(--text-primary);
   margin: 0;
 }
 .feature-bullets__image-wrapper {
@@ -2897,7 +2897,6 @@
   line-height: var(--hero-body-lh);
   color: var(--hero-text-light);
   margin: 0;
-  opacity: 0.8;
 }
 .hero__buttons {
   display: flex;
@@ -2906,6 +2905,10 @@
   width: 100%;
   align-items: stretch;
 }
+.hero__buttons a,
+.hero__buttons .button {
+  width: 100%;
+}
 .hero__body {
   display: flex;
   flex-direction: column;
@@ -2996,7 +2999,6 @@
 }
 .hero--split .hero__description {
   margin-top: var(--spacing-16);
-  opacity: 1;
 }
 .hero--split .hero__buttons {
   align-items: stretch;
@@ -3161,6 +3163,10 @@
   .hero__inner {
     padding: var(--spacing-40) var(--spacing-24);
   }
+  .hero__buttons a,
+  .hero__buttons .button {
+    width: auto;
+  }
   .hero--split .hero__inner {
     padding-top: var(--hero-split-padding-top-tablet);
     padding-bottom: var(--spacing-40);
@@ -3924,7 +3930,7 @@
 :root {
   --fs-bg: var(--color-slate-50);
   --fs-text-primary: var(--text-primary);
-  --fs-text-muted: var(--color-slate-500);
+  --fs-text-muted: var(--text-primary);
   --fs-link-color: var(--color-coral-700);
   --fs-link-hover: var(--color-coral-800);
   --fs-media-bg: transparent;
@@ -4208,7 +4214,7 @@
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
   line-height: var(--typography-body-md-line-height);
-  color: var(--color-slate-1200);
+  color: var(--text-primary);
   margin: 0;
 }
 .feature-split__image-wrapper {
@@ -4527,6 +4533,12 @@
   text-align: center;
   padding: var(--spacing-48) 0;
 }
+@media (max-width: 991px) {
+  .ctab__hero a,
+  .ctab__hero .button {
+    width: 100%;
+  }
+}
 .ctab__headline {
   margin: 0;
   font-family: var(--typography-h1-font-family);
@@ -5909,9 +5921,10 @@
   --steps-bg: var(--color-slate-50);
   --steps-title-color: var(--text-primary);
   --steps-number-color: var(--color-coral-700);
+  --steps-number-size: var(--spacing-40);
   --steps-item-title-color: var(--text-primary);
-  --steps-item-desc-color: var(--color-slate-600);
-  --steps-divider-color: var(--color-slate-200);
+  --steps-item-desc-color: var(--text-primary);
+  --steps-divider-color: var(--color-opacity-slate-8);
 }
 .steps {
   width: 100%;
@@ -5919,6 +5932,12 @@
   font-family: var(--font-family-base);
   box-sizing: border-box;
 }
+.steps--embedded {
+  background-color: transparent;
+}
+.steps--embedded .steps__title {
+  scroll-margin-top: var(--spacing-96);
+}
 .steps__container {
   max-width: var(--content-width-1280);
   margin: 0 auto;
@@ -5939,6 +5958,9 @@
     flex-direction: row-reverse;
   }
 }
+.steps--embedded .steps__container {
+  padding: 0;
+}
 .steps__image-wrapper {
   width: 100%;
   aspect-ratio: 1 / 1;
@@ -6002,13 +6024,12 @@
 }
 .steps__number {
   font-family: var(--font-family-base);
-  font-size: var(--typography-h5-font-size);
+  font-size: var(--steps-number-size);
   font-weight: var(--font-weight-extra-bold);
-  line-height: var(--typography-h5-line-height);
+  line-height: 1;
   color: var(--steps-number-color);
   flex-shrink: 0;
-  min-width: var(--spacing-16);
-  padding-top: 2px;
+  min-width: var(--steps-number-size);
 }
 .steps__item-body {
   display: flex;
@@ -6016,10 +6037,10 @@
   gap: var(--spacing-4);
 }
 .steps__item-title {
-  font-family: var(--typography-h5-font-family);
-  font-size: var(--typography-h5-font-size);
-  font-weight: var(--typography-h5-font-weight);
-  line-height: var(--typography-h5-line-height);
+  font-family: var(--typography-h6-font-family);
+  font-size: var(--typography-h6-font-size);
+  font-weight: var(--typography-h6-font-weight);
+  line-height: var(--typography-h6-line-height);
   color: var(--steps-item-title-color);
   margin: 0;
 }
@@ -6349,7 +6370,7 @@
   font-size: var(--typography-body-lg-font-size);
   font-weight: var(--typography-body-lg-font-weight);
   line-height: var(--typography-body-lg-line-height);
-  color: var(--color-slate-1200);
+  color: var(--smc-header-color);
   margin: 0;
   max-width: 640px;
 }
@@ -6461,7 +6482,7 @@
 /* templates/Table/Table.css */
 :root {
   --tbl-bg: var(--color-slate-50);
-  --tbl-border: var(--color-slate-100);
+  --tbl-border: var(--color-opacity-slate-8);
   --tbl-header-bg: var(--color-slate-75);
   --tbl-row-hover-bg: var(--color-slate-75);
   --tbl-text: var(--text-primary);
@@ -6772,7 +6793,7 @@
   --dtbl-section-bg: var(--color-slate-75);
   --dtbl-bg: var(--color-slate-50);
   --dtbl-header-bg: var(--color-slate-75);
-  --dtbl-border: var(--color-slate-100);
+  --dtbl-border: var(--color-opacity-slate-8);
   --dtbl-text: var(--text-primary);
   --dtbl-font-family: var(--font-family-base);
   --dtbl-radius: var(--radius-2xl);
@@ -6949,7 +6970,7 @@
   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);
+  color: var(--text-primary);
   margin: 0;
 }
 .avatar-grid__description {
@@ -6957,7 +6978,7 @@
   font-size: var(--typography-body-lg-font-size);
   font-weight: var(--typography-body-lg-font-weight);
   line-height: var(--typography-body-lg-line-height);
-  color: var(--color-slate-900);
+  color: var(--text-primary);
   margin: 0;
 }
 .avatar-grid__grid-wrapper {
@@ -7221,7 +7242,6 @@
   line-height: var(--typography-body-md-line-height);
   color: var(--color-slate-50);
   margin: 0;
-  opacity: 0.9;
   max-width: 42ch;
 }
 .image-banner__actions {
@@ -7298,10 +7318,10 @@
   --testimonial-card-radius: 2rem;
   --testimonial-card-shadow: none;
   --testimonial-card-min-height: 416px;
-  --testimonial-title-color: var(--color-slate-1200);
-  --testimonial-quote-color: var(--color-slate-900);
-  --testimonial-author-name-color: var(--color-slate-1200);
-  --testimonial-author-location-color: var(--color-slate-700);
+  --testimonial-title-color: var(--text-primary);
+  --testimonial-quote-color: var(--text-primary);
+  --testimonial-author-name-color: var(--text-primary);
+  --testimonial-author-location-color: var(--text-primary);
   --testimonial-dot-color: var(--color-slate-300);
   --testimonial-dot-active-color: var(--color-slate-1200);
   --testimonial-quotemark-color: var(--color-slate-200);
@@ -7310,8 +7330,8 @@
   --testimonial-trustpilot-card-radius: var(--radius-xl);
   --testimonial-trustpilot-card-shadow: var(--shadow-sm);
   --testimonial-trustpilot-card-shadow-hover: var(--shadow-md);
-  --testimonial-trustpilot-quote-color: var(--color-slate-1200);
-  --testimonial-trustpilot-author-color: var(--color-slate-500);
+  --testimonial-trustpilot-quote-color: var(--text-primary);
+  --testimonial-trustpilot-author-color: var(--text-primary);
   --testimonial-trustpilot-star-empty: #dcdce6;
   --testimonial-trustpilot-star-glyph: #ffffff;
   --testimonial-trustpilot-nav-border: var(--color-slate-300);
@@ -8417,8 +8437,8 @@
   --fa-bg: var(--color-slate-50);
   --fa-max-width: var(--content-width-1280);
   --fa-title-color: var(--text-primary);
-  --fa-item-title-color: var(--color-slate-1200);
-  --fa-item-subtitle-color: var(--color-slate-600);
+  --fa-item-title-color: var(--text-primary);
+  --fa-item-subtitle-color: var(--text-primary);
   --fa-item-basis: 12.5rem;
   --fa-item-max: 16rem;
   --fa-item-gap-x: var(--spacing-24);
@@ -8806,7 +8826,7 @@
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
   line-height: var(--typography-body-md-line-height);
-  color: var(--color-slate-1200);
+  color: var(--text-primary);
   margin: 0;
   max-width: 640px;
 }
@@ -9491,6 +9511,9 @@
   margin: 0;
   width: 100%;
 }
+.fbp-blockSteps {
+  width: 100%;
+}
 .fbp-blockImage {
   display: block;
   width: 100%;
@@ -9753,7 +9776,6 @@
   line-height: var(--typography-body-md-line-height);
   color: var(--color-slate-50);
   margin: 0;
-  opacity: 0.9;
   max-width: 42ch;
 }
 .parallax-banner__actions {
@@ -9826,7 +9848,7 @@
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
   line-height: var(--typography-body-md-line-height);
-  color: var(--color-slate-700);
+  color: var(--text-primary);
   margin: 0;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -9971,7 +9993,7 @@
   display: flex;
   flex-direction: column;
   padding: var(--spacing-12) var(--spacing-16) var(--spacing-8);
-  border-bottom: 1px solid var(--color-slate-100);
+  border-bottom: 1px solid var(--color-opacity-slate-8);
   cursor: pointer;
 }
 .tcalc-dropdownGroup:last-child .tcalc-dropdownOption:last-child {
@@ -10115,7 +10137,7 @@
   font-family: var(--font-family-base);
   font-size: var(--typography-body-lg-font-size);
   line-height: var(--typography-body-lg-line-height);
-  color: var(--text-secondary);
+  color: var(--text-primary);
   margin: 0;
 }
 .tchow-tabs {
@@ -10352,7 +10374,7 @@
   font-size: var(--typography-body-md-font-size);
   font-weight: var(--typography-body-md-font-weight);
   line-height: var(--typography-body-md-line-height);
-  color: var(--color-slate-600);
+  color: var(--text-primary);
   margin: 0;
 }
 .fo-linkWrap {