@deriv-com/dds-marketing 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (131) hide show
  1. package/.llm/components/accordion.md +1 -1
  2. package/.llm/components/accordionitem.md +1 -1
  3. package/.llm/components/aspectratio.md +1 -1
  4. package/.llm/components/background.md +371 -0
  5. package/.llm/components/badge.md +1 -1
  6. package/.llm/components/bottomsheet.md +1 -1
  7. package/.llm/components/breadcrumb.md +1 -1
  8. package/.llm/components/breadcrumbitem.md +1 -1
  9. package/.llm/components/button.md +10 -6
  10. package/.llm/components/buttonicon.md +3 -3
  11. package/.llm/components/card.md +1 -1
  12. package/.llm/components/cardbody.md +1 -1
  13. package/.llm/components/cardbutton.md +1 -1
  14. package/.llm/components/checkbox.md +1 -1
  15. package/.llm/components/ctabanner.md +26 -1
  16. package/.llm/components/ctabannerslider.md +22 -1
  17. package/.llm/components/divider.md +1 -1
  18. package/.llm/components/dropdownmenu.md +2 -2
  19. package/.llm/components/faqaccordion.md +1 -1
  20. package/.llm/components/featurebullets.md +1 -1
  21. package/.llm/components/featurecards.md +1 -1
  22. package/.llm/components/featurescroll.md +1 -1
  23. package/.llm/components/featuresplit.md +1 -1
  24. package/.llm/components/filterchip.md +1 -1
  25. package/.llm/components/footer.md +1 -1
  26. package/.llm/components/footergroup.md +1 -1
  27. package/.llm/components/grid.md +1 -1
  28. package/.llm/components/icon.md +13 -3
  29. package/.llm/components/illustrationcard.md +236 -0
  30. package/.llm/components/illustrationscene.md +233 -0
  31. package/.llm/components/landinghero.md +25 -1
  32. package/.llm/components/link.md +4 -4
  33. package/.llm/components/logocolumns.md +1 -1
  34. package/.llm/components/logorows.md +1 -1
  35. package/.llm/components/menuitem.md +1 -1
  36. package/.llm/components/navbar.md +1 -1
  37. package/.llm/components/navbaritem.md +1 -1
  38. package/.llm/components/navbarmenu.md +1 -1
  39. package/.llm/components/navbarmenugroup.md +1 -1
  40. package/.llm/components/navbarpanel.md +1 -1
  41. package/.llm/components/navbarswitcher.md +1 -1
  42. package/.llm/components/navbarswitcheroption.md +1 -1
  43. package/.llm/components/option.md +1 -1
  44. package/.llm/components/pageheader.md +22 -1
  45. package/.llm/components/pagination.md +1 -1
  46. package/.llm/components/paginationdots.md +1 -1
  47. package/.llm/components/producthero.md +1 -1
  48. package/.llm/components/removablechip.md +1 -1
  49. package/.llm/components/row.md +1 -1
  50. package/.llm/components/scroller.md +1 -1
  51. package/.llm/components/searchinput.md +1 -1
  52. package/.llm/components/segmentedcontrol.md +1 -1
  53. package/.llm/components/segmentedcontrolitem.md +1 -1
  54. package/.llm/components/select.md +1 -1
  55. package/.llm/components/selectchip.md +1 -1
  56. package/.llm/components/spinner.md +1 -1
  57. package/.llm/components/stack.md +1 -1
  58. package/.llm/components/statusdot.md +1 -1
  59. package/.llm/components/subdomainnavbar.md +1 -1
  60. package/.llm/components/tab.md +3 -3
  61. package/.llm/components/table.md +1 -1
  62. package/.llm/components/tablebody.md +1 -1
  63. package/.llm/components/tablecell.md +1 -1
  64. package/.llm/components/tablehead.md +1 -1
  65. package/.llm/components/tableheadercell.md +1 -1
  66. package/.llm/components/tablerow.md +1 -1
  67. package/.llm/components/tablist.md +1 -1
  68. package/.llm/components/testimonialrow.md +1 -1
  69. package/.llm/components/testimonialslider.md +1 -1
  70. package/.llm/components/textarea.md +1 -1
  71. package/.llm/components/textinput.md +1 -1
  72. package/.llm/components/tooltip.md +1 -1
  73. package/.llm/components/typography.md +1 -1
  74. package/.llm/digest/background.md +52 -0
  75. package/.llm/digest/ctabanner.md +4 -0
  76. package/.llm/digest/ctabannerslider.md +3 -0
  77. package/.llm/digest/illustrationcard.md +46 -0
  78. package/.llm/digest/illustrationscene.md +51 -0
  79. package/.llm/digest/landinghero.md +7 -0
  80. package/.llm/digest/pageheader.md +3 -0
  81. package/.llm/index.md +7 -0
  82. package/.llm/rules.md +20 -10
  83. package/.llm/tokens.md +11 -0
  84. package/AGENTS.md +7 -5
  85. package/dist/components/blocks/cta-banner/CtaBanner.d.ts +1 -1
  86. package/dist/components/blocks/cta-banner/CtaBanner.js +3 -2
  87. package/dist/components/blocks/cta-banner/CtaBanner.types.d.ts +5 -0
  88. package/dist/components/blocks/cta-banner/cta-banner-impl.css +8 -0
  89. package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.d.ts +1 -1
  90. package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.js +5 -4
  91. package/dist/components/blocks/cta-banner-slider/CtaBannerSlider.types.d.ts +4 -0
  92. package/dist/components/blocks/cta-banner-slider/cta-banner-slider-impl.css +8 -0
  93. package/dist/components/blocks/landing-hero/LandingHero.d.ts +1 -1
  94. package/dist/components/blocks/landing-hero/LandingHero.js +4 -3
  95. package/dist/components/blocks/landing-hero/LandingHero.types.d.ts +7 -3
  96. package/dist/components/blocks/page-header/PageHeader.d.ts +1 -1
  97. package/dist/components/blocks/page-header/PageHeader.js +3 -2
  98. package/dist/components/blocks/page-header/PageHeader.types.d.ts +4 -0
  99. package/dist/components/blocks/page-header/page-header-impl.css +8 -0
  100. package/dist/components/core/background/Background.css +69 -0
  101. package/dist/components/core/background/Background.d.ts +21 -0
  102. package/dist/components/core/background/Background.js +36 -0
  103. package/dist/components/core/background/Background.types.d.ts +36 -0
  104. package/dist/components/core/background/Background.types.js +9 -0
  105. package/dist/components/core/background/background-impl.css +427 -0
  106. package/dist/components/core/background/halftone.d.ts +123 -0
  107. package/dist/components/core/background/halftone.js +682 -0
  108. package/dist/components/core/background/use-halftone.d.ts +15 -0
  109. package/dist/components/core/background/use-halftone.js +27 -0
  110. package/dist/components/core/background/use-offscreen.d.ts +10 -0
  111. package/dist/components/core/background/use-offscreen.js +30 -0
  112. package/dist/components/core/background/use-spotlight.d.ts +13 -0
  113. package/dist/components/core/background/use-spotlight.js +65 -0
  114. package/dist/components/core/illustration-card/IllustrationCard.css +40 -0
  115. package/dist/components/core/illustration-card/IllustrationCard.d.ts +22 -0
  116. package/dist/components/core/illustration-card/IllustrationCard.js +82 -0
  117. package/dist/components/core/illustration-card/IllustrationCard.types.d.ts +23 -0
  118. package/dist/components/core/illustration-card/IllustrationCard.types.js +8 -0
  119. package/dist/components/core/illustration-card/illustration-card-impl.css +27 -0
  120. package/dist/components/core/illustration-scene/IllustrationScene.css +44 -0
  121. package/dist/components/core/illustration-scene/IllustrationScene.d.ts +14 -0
  122. package/dist/components/core/illustration-scene/IllustrationScene.js +16 -0
  123. package/dist/components/core/illustration-scene/IllustrationScene.types.d.ts +33 -0
  124. package/dist/components/core/illustration-scene/IllustrationScene.types.js +8 -0
  125. package/dist/components/core/illustration-scene/illustration-scene-impl.css +40 -0
  126. package/dist/components/core/link/Link.js +5 -5
  127. package/dist/components/core/tab/Tab.types.d.ts +1 -1
  128. package/dist/components/index.d.ts +6 -0
  129. package/dist/components/index.js +6 -0
  130. package/dist/marketing.css +24 -0
  131. package/package.json +1 -1
@@ -9,6 +9,7 @@
9
9
  --aspect-portrait: 4 / 5;
10
10
  --aspect-square: 1 / 1;
11
11
  --aspect-ultrawide: 21 / 9;
12
+ --aspect-upright: 3 / 4;
12
13
  --aspect-widescreen: 16 / 9;
13
14
  --border-style-decorative: dashed;
14
15
  --border-style-default: solid;
@@ -52,6 +53,7 @@
52
53
  --color-bg-surface-card-raised: #FFFFFF;
53
54
  --color-bg-surface-card-strong-raised: #202020;
54
55
  --color-bg-surface-card-strong: #202020;
56
+ --color-bg-surface-glass: #FFFFFFE0;
55
57
  --color-bg-surface-inverse: #FFFFFF14;
56
58
  --color-bg-surface-modal: #FFFFFF;
57
59
  --color-bg-surface-raised-inverse: #FFFFFF3D;
@@ -74,6 +76,8 @@
74
76
  --color-border-focus-on-brand-strong: #FFFFFF;
75
77
  --color-border-focus: #0C0C0C;
76
78
  --color-border-info: #0068FF;
79
+ --color-border-pattern-inverse: #FFFFFF3D;
80
+ --color-border-pattern: #0000001A;
77
81
  --color-border-strong: #63666B;
78
82
  --color-border-subtle-inverse: #FFFFFF29;
79
83
  --color-border-subtle: #0000000F;
@@ -214,6 +218,7 @@
214
218
  --layer-popup: 400;
215
219
  --motion-distance-drift: 64px;
216
220
  --motion-duration-dramatic: 700ms;
221
+ --motion-duration-drift: 10000ms;
217
222
  --motion-duration-dwell: 5000ms;
218
223
  --motion-duration-fast: 100ms;
219
224
  --motion-duration-instant: 0ms;
@@ -225,6 +230,7 @@
225
230
  --motion-duration-slow: 300ms;
226
231
  --motion-duration-spinner: 500ms;
227
232
  --motion-duration-stagger: 100ms;
233
+ --motion-duration-trail: 500ms;
228
234
  --motion-easing-enter: cubic-bezier(0.33, 1, 0.68, 1);
229
235
  --motion-easing-exit: cubic-bezier(0.32, 0, 0.67, 0);
230
236
  --motion-easing-media-hover: cubic-bezier(0.65, 0, 0.35, 1);
@@ -258,6 +264,7 @@
258
264
  --radius-subtle: 12px;
259
265
  --radius-surface-compact: 16px;
260
266
  --radius-surface: 24px;
267
+ --size-aurora-spotlight: 112px;
261
268
  --size-avatar: 48px;
262
269
  --size-backdrop-blur: 16px;
263
270
  --size-band-compact: 480px;
@@ -274,6 +281,8 @@
274
281
  --size-grid-track-lg: 320px;
275
282
  --size-grid-track-md: 240px;
276
283
  --size-grid-track-sm: 160px;
284
+ --size-halftone-dot: 6px;
285
+ --size-halftone-pitch: 20px;
277
286
  --size-heading-group-max: 846px;
278
287
  --size-logo-columns-height: 640px;
279
288
  --size-logo-rows-tile: 192px;
@@ -287,7 +296,10 @@
287
296
  --size-menu-panel-max: 846px;
288
297
  --size-menu-panel-min: 320px;
289
298
  --size-review-card-min: 320px;
299
+ --size-rings-pitch: 64px;
300
+ --size-rings-spotlight: 128px;
290
301
  --size-rule-grid-pitch: 96px;
302
+ --size-rule-grid-spotlight: 128px;
291
303
  --size-sheet-handle-height: 4px;
292
304
  --size-sheet-handle-width: 40px;
293
305
  --size-sheet-max: 640px;
@@ -340,6 +352,7 @@
340
352
  --aspect-portrait: 4 / 5;
341
353
  --aspect-square: 1 / 1;
342
354
  --aspect-ultrawide: 21 / 9;
355
+ --aspect-upright: 3 / 4;
343
356
  --aspect-widescreen: 16 / 9;
344
357
  --border-style-decorative: dashed;
345
358
  --border-style-default: solid;
@@ -383,6 +396,7 @@
383
396
  --color-bg-surface-card-raised: #FFFFFF0F;
384
397
  --color-bg-surface-card-strong-raised: #363636;
385
398
  --color-bg-surface-card-strong: #202020;
399
+ --color-bg-surface-glass: #FFFFFF1F;
386
400
  --color-bg-surface-inverse: #FFFFFF14;
387
401
  --color-bg-surface-modal: #202020;
388
402
  --color-bg-surface-raised-inverse: #0000003D;
@@ -405,6 +419,8 @@
405
419
  --color-border-focus-on-brand-strong: #FFFFFF;
406
420
  --color-border-focus: #FFFFFF;
407
421
  --color-border-info: #3786FF;
422
+ --color-border-pattern-inverse: #FFFFFF3D;
423
+ --color-border-pattern: #FFFFFF3D;
408
424
  --color-border-strong: #A2A7AD;
409
425
  --color-border-subtle-inverse: #FFFFFF29;
410
426
  --color-border-subtle: #FFFFFF0F;
@@ -545,6 +561,7 @@
545
561
  --layer-popup: 400;
546
562
  --motion-distance-drift: 64px;
547
563
  --motion-duration-dramatic: 700ms;
564
+ --motion-duration-drift: 10000ms;
548
565
  --motion-duration-dwell: 5000ms;
549
566
  --motion-duration-fast: 100ms;
550
567
  --motion-duration-instant: 0ms;
@@ -556,6 +573,7 @@
556
573
  --motion-duration-slow: 300ms;
557
574
  --motion-duration-spinner: 500ms;
558
575
  --motion-duration-stagger: 100ms;
576
+ --motion-duration-trail: 500ms;
559
577
  --motion-easing-enter: cubic-bezier(0.33, 1, 0.68, 1);
560
578
  --motion-easing-exit: cubic-bezier(0.32, 0, 0.67, 0);
561
579
  --motion-easing-media-hover: cubic-bezier(0.65, 0, 0.35, 1);
@@ -589,6 +607,7 @@
589
607
  --radius-subtle: 12px;
590
608
  --radius-surface-compact: 16px;
591
609
  --radius-surface: 24px;
610
+ --size-aurora-spotlight: 112px;
592
611
  --size-avatar: 48px;
593
612
  --size-backdrop-blur: 16px;
594
613
  --size-band-compact: 480px;
@@ -605,6 +624,8 @@
605
624
  --size-grid-track-lg: 320px;
606
625
  --size-grid-track-md: 240px;
607
626
  --size-grid-track-sm: 160px;
627
+ --size-halftone-dot: 6px;
628
+ --size-halftone-pitch: 20px;
608
629
  --size-heading-group-max: 846px;
609
630
  --size-logo-columns-height: 640px;
610
631
  --size-logo-rows-tile: 192px;
@@ -618,7 +639,10 @@
618
639
  --size-menu-panel-max: 846px;
619
640
  --size-menu-panel-min: 320px;
620
641
  --size-review-card-min: 320px;
642
+ --size-rings-pitch: 64px;
643
+ --size-rings-spotlight: 128px;
621
644
  --size-rule-grid-pitch: 96px;
645
+ --size-rule-grid-spotlight: 128px;
622
646
  --size-sheet-handle-height: 4px;
623
647
  --size-sheet-handle-width: 40px;
624
648
  --size-sheet-max: 640px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deriv-com/dds-marketing",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "Deriv Design System — components and tokens for marketing sites (landing pages, pricing, sign-up).",
5
5
  "license": "MIT",
6
6
  "author": {