@royaloperahouse/harmonic 0.15.0-c → 0.16.0

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 (36) hide show
  1. package/CHANGELOG.md +3 -0
  2. package/README.GIT +294 -0
  3. package/README.md +43 -268
  4. package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
  5. package/dist/components/atoms/Tab/Tab.d.ts +1 -1
  6. package/dist/components/index.d.ts +2 -2
  7. package/dist/components/molecules/BodyContent/BodyContent.d.ts +1 -6
  8. package/dist/components/molecules/PageHeading/index.d.ts +1 -2
  9. package/dist/components/molecules/PeopleListing/PeopleListing.d.ts +1 -1
  10. package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts +2 -2
  11. package/dist/components/molecules/PromoWithTags/PromoWithTags.style.d.ts +1 -271
  12. package/dist/components/molecules/PromoWithTitle/PromoWithTitle.style.d.ts +1 -271
  13. package/dist/components/molecules/SkipToMain/SkipToMain.style.d.ts +1 -1
  14. package/dist/components/molecules/UpsellCard/UpsellCard.style.d.ts +11 -276
  15. package/dist/components/molecules/index.d.ts +2 -3
  16. package/dist/components/organisms/Carousels/Carousel/Carousel.style.d.ts +1 -271
  17. package/dist/components/organisms/UpsellSection/UpsellSection.style.d.ts +1 -272
  18. package/dist/harmonic.cjs.development.css +8 -340
  19. package/dist/harmonic.cjs.development.js +4094 -4262
  20. package/dist/harmonic.cjs.development.js.map +1 -1
  21. package/dist/harmonic.cjs.production.min.js +1 -1
  22. package/dist/harmonic.cjs.production.min.js.map +1 -1
  23. package/dist/harmonic.esm.js +4105 -4274
  24. package/dist/harmonic.esm.js.map +1 -1
  25. package/dist/index.d.ts +2 -2
  26. package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +0 -1
  27. package/dist/types/anchorBar.d.ts +0 -3
  28. package/dist/types/types.d.ts +4 -34
  29. package/dist/types/upsell.d.ts +15 -7
  30. package/package.json +1 -1
  31. package/dist/components/molecules/PageHeading/HighlightCarousel/HighlightCarousel.d.ts +0 -4
  32. package/dist/components/molecules/PageHeading/HighlightCarousel/HighlightCarousel.style.d.ts +0 -14
  33. package/dist/components/molecules/PageHeading/HighlightCarousel/index.d.ts +0 -2
  34. package/dist/components/molecules/Paywall/Paywall.d.ts +0 -4
  35. package/dist/components/molecules/Paywall/Paywall.styles.d.ts +0 -292
  36. package/dist/components/molecules/Paywall/index.d.ts +0 -2
@@ -152,6 +152,7 @@
152
152
  color: var(--color-primary);
153
153
  }
154
154
 
155
+
155
156
  .typography-module_display--black__8hmsx,
156
157
  .typography-module_header--black__M3I14,
157
158
  .typography-module_subtitle--black__IQRSo,
@@ -208,24 +209,15 @@
208
209
  }
209
210
 
210
211
  /* Typography variants */
211
- .typography-module_display--serif__C0-Ve {
212
- font-family: var(--font-family-serif);
213
- }
214
-
212
+ .typography-module_display--serif__C0-Ve,
215
213
  .typography-module_header--serif__uTGCc {
216
214
  font-family: var(--font-family-serif);
217
- letter-spacing: -0.5px;
218
- }
219
-
220
- .typography-module_display--em__h2bPV {
221
- font-family: var(--font-family-serif);
222
- font-style: italic;
223
215
  }
224
216
 
217
+ .typography-module_display--em__h2bPV,
225
218
  .typography-module_header--em__UFQIA {
226
219
  font-family: var(--font-family-serif);
227
220
  font-style: italic;
228
- letter-spacing: -0.5px;
229
221
  }
230
222
 
231
223
  .typography-module_display--bold__PG-8g,
@@ -309,7 +301,6 @@
309
301
  letter-spacing: 0.3px;
310
302
  }
311
303
  }
312
-
313
304
  @font-face {
314
305
  font-family: 'GreyLLTT';
315
306
  src: url('https://static.roh.org.uk/fonts/harmonic/GreyLLTT-Regular.woff2') format('woff2');
@@ -336,7 +327,8 @@
336
327
 
337
328
  @font-face {
338
329
  font-family: 'VictorSerif';
339
- src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2') format('woff2');
330
+ src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-Medium.woff2')
331
+ format('woff2');
340
332
  font-weight: 500;
341
333
  font-style: normal;
342
334
  font-display: swap;
@@ -344,331 +336,13 @@
344
336
 
345
337
  @font-face {
346
338
  font-family: 'VictorSerif';
347
- src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2') format('woff2');
339
+ src: url('https://static.roh.org.uk/fonts/harmonic/VictorSerif-MediumItalic.woff2')
340
+ format('woff2');
348
341
  font-weight: 500;
349
342
  font-style: italic;
350
343
  font-display: swap;
351
344
  }
352
345
 
353
- /* ~~~~~ General Styling Classes ~~~~~ */
354
- .typography_color-primary__LOfDi {
355
- color: var(--color-primary);
356
- }
357
-
358
- .typography_color-black__6MHRL {
359
- color: var(--color-base-black);
360
- }
361
-
362
- .typography_color-white__PfW5s {
363
- color: var(--color-base-white);
364
- }
365
-
366
- .typography_color-red__iPlbG {
367
- color: var(--color-primary-red);
368
- }
369
-
370
- .typography_color-grey__GA1c2 {
371
- color: var(--color-base-dark-grey);
372
- }
373
-
374
- .typography_color-inherit__RDd0Y {
375
- color: inherit;
376
- }
377
-
378
- .typography_em__E6tX- {
379
- font-style: italic;
380
- }
381
- /* ~~~ */
382
-
383
- /* Display Headers */
384
- .typography_display__-F3p4 {
385
- margin: 0;
386
- font-family: var(--font-family-sans);
387
- line-height: 100%;
388
-
389
- &.typography_large__uq0zC {
390
- font-size: 96px;
391
- font-weight: 700;
392
- letter-spacing: -5px;
393
- }
394
-
395
- &.typography_small__wfQ0K {
396
- font-size: 68px;
397
- font-weight: 500;
398
- letter-spacing: -3px;
399
- }
400
-
401
- /* Serif and Italic styles */
402
- &.typography_serif__VSO38,
403
- &.typography_em__E6tX- {
404
- font-family: var(--font-family-serif);
405
- font-weight: 500;
406
- }
407
-
408
- /* Serif and Italic adjustments */
409
- &.typography_large__uq0zC.typography_serif__VSO38,
410
- &.typography_large__uq0zC.typography_em__E6tX- {
411
- letter-spacing: -3px;
412
- }
413
-
414
- &.typography_small__wfQ0K.typography_serif__VSO38,
415
- &.typography_small__wfQ0K.typography_em__E6tX- {
416
- letter-spacing: -2px;
417
- }
418
-
419
- @media (max-width: 699px) {
420
- &.typography_large__uq0zC {
421
- font-size: 38px;
422
- letter-spacing: -1.5px;
423
- }
424
-
425
- &.typography_small__wfQ0K {
426
- font-size: 32px;
427
- letter-spacing: -1.5px;
428
- }
429
-
430
- &.typography_large__uq0zC.typography_serif__VSO38,
431
- &.typography_large__uq0zC.typography_em__E6tX-,
432
- &.typography_small__wfQ0K.typography_serif__VSO38,
433
- &.typography_small__wfQ0K.typography_em__E6tX- {
434
- letter-spacing: -0.5px;
435
- }
436
- }
437
- }
438
-
439
- /* Headers */
440
- .typography_header__BexiD {
441
- margin: 0;
442
- font-family: var(--font-family-sans);
443
- font-weight: 500;
444
-
445
- &.typography_large__uq0zC {
446
- font-size: 44px;
447
- line-height: 48px;
448
- letter-spacing: -1.5px;
449
- }
450
-
451
- &.typography_medium__K0uZD {
452
- font-size: 34px;
453
- line-height: 40px;
454
- letter-spacing: -1px;
455
- }
456
-
457
- &.typography_small__wfQ0K {
458
- font-size: 26px;
459
- line-height: 32px;
460
- letter-spacing: -0.5px;
461
- }
462
-
463
- /* Serif and Italic styles */
464
- &.typography_serif__VSO38,
465
- &.typography_em__E6tX- {
466
- font-family: var(--font-family-serif);
467
- }
468
-
469
- /* Serif and Italic letter-spacing overrides */
470
- &.typography_large__uq0zC.typography_serif__VSO38,
471
- &.typography_large__uq0zC.typography_em__E6tX- {
472
- letter-spacing: -0.5px;
473
- }
474
-
475
- &.typography_medium__K0uZD.typography_serif__VSO38,
476
- &.typography_medium__K0uZD.typography_em__E6tX- {
477
- letter-spacing: -0.5px;
478
- }
479
-
480
- &.typography_small__wfQ0K.typography_serif__VSO38,
481
- &.typography_small__wfQ0K.typography_em__E6tX- {
482
- letter-spacing: -0.5px;
483
- }
484
-
485
- @media (max-width: 699px) {
486
- &.typography_large__uq0zC {
487
- font-size: 28px;
488
- line-height: 34px;
489
- letter-spacing: -1.5px;
490
- }
491
-
492
- &.typography_medium__K0uZD {
493
- font-size: 24px;
494
- line-height: 28px;
495
- letter-spacing: -1px;
496
- }
497
-
498
- &.typography_small__wfQ0K {
499
- font-size: 20px;
500
- line-height: 26px;
501
- letter-spacing: -0.75px;
502
- }
503
-
504
- /* Mobile overrides for serif/italic letter-spacing */
505
- &.typography_large__uq0zC.typography_serif__VSO38,
506
- &.typography_large__uq0zC.typography_em__E6tX-,
507
- &.typography_medium__K0uZD.typography_serif__VSO38,
508
- &.typography_medium__K0uZD.typography_em__E6tX-,
509
- &.typography_small__wfQ0K.typography_serif__VSO38,
510
- &.typography_small__wfQ0K.typography_em__E6tX- {
511
- letter-spacing: -0.5px;
512
- }
513
- }
514
- }
515
-
516
- /* Subtitle */
517
- .typography_subtitle__aoFTV {
518
- margin: 0;
519
- font-family: var(--font-family-sans);
520
- font-weight: 500;
521
-
522
- &.typography_large__uq0zC {
523
- font-size: 19px;
524
- line-height: 26px;
525
- letter-spacing: -0.5px;
526
- }
527
-
528
- &.typography_small__wfQ0K {
529
- font-size: 17px;
530
- line-height: 24px;
531
- letter-spacing: -0.5px;
532
- }
533
-
534
- @media (max-width: 699px) {
535
- &.typography_large__uq0zC {
536
- font-size: 17px;
537
- line-height: 24px;
538
- letter-spacing: -0.5px;
539
- }
540
-
541
- &.typography_small__wfQ0K {
542
- font-size: 14px;
543
- line-height: 20px;
544
- letter-spacing: -0.2px;
545
- }
546
- }
547
- }
548
-
549
- /* Body Copy */
550
- .typography_bodycopy__vYtQ8 {
551
- margin: 0;
552
- font-family: var(--font-family-sans);
553
- font-weight: 400;
554
-
555
- &.typography_large__uq0zC {
556
- font-size: 19px;
557
- line-height: 26px;
558
- letter-spacing: -0.5px;
559
- }
560
-
561
- &.typography_medium__K0uZD {
562
- font-size: 17px;
563
- line-height: 24px;
564
- letter-spacing: -0.5px;
565
- }
566
-
567
- &.typography_small__wfQ0K {
568
- font-size: 14px;
569
- line-height: 20px;
570
- letter-spacing: -0.5px;
571
- }
572
-
573
- @media (max-width: 699px) {
574
- &.typography_large__uq0zC {
575
- font-size: 17px;
576
- line-height: 24px;
577
- letter-spacing: -0.5px;
578
- }
579
-
580
- &.typography_medium__K0uZD {
581
- font-size: 14px;
582
- line-height: 20px;
583
- letter-spacing: -0.2px;
584
- }
585
-
586
- &.typography_small__wfQ0K {
587
- font-size: 11px;
588
- line-height: 16px;
589
- letter-spacing: -0.2px;
590
- }
591
- }
592
- }
593
-
594
- /* Overline */
595
- .typography_overline__EnUK3 {
596
- margin: 0;
597
- font-family: var(--font-family-sans);
598
- font-weight: 500;
599
- text-transform: uppercase;
600
-
601
- &.typography_large__uq0zC {
602
- font-size: 14px;
603
- line-height: 18px;
604
- letter-spacing: 0.3px;
605
- }
606
-
607
- &.typography_small__wfQ0K {
608
- font-size: 12px;
609
- line-height: 14px;
610
- letter-spacing: 0.2px;
611
- }
612
-
613
- @media (max-width: 699px) {
614
- &.typography_large__uq0zC {
615
- line-height: 17px;
616
- letter-spacing: 0.3px; /* Added to ensure it stays */
617
- }
618
-
619
- &.typography_small__wfQ0K {
620
- line-height: 14px;
621
- letter-spacing: 0.3px;
622
- }
623
- }
624
- }
625
-
626
- /* Button Text */
627
- .typography_buttontext__vcxNi {
628
- margin: 0;
629
- font-family: var(--font-family-sans);
630
- font-size: 17px;
631
- line-height: 20px;
632
- letter-spacing: -0.5px;
633
- font-weight: 400;
634
-
635
- @media (max-width: 699px) {
636
- font-weight: 500;
637
- line-height: 17px;
638
- }
639
- }
640
-
641
- /* Caption Text */
642
- .typography_captiontext__91UFb {
643
- margin: 0;
644
- font-family: var(--font-family-sans);
645
- font-weight: 400;
646
- font-size: 17px;
647
- line-height: 24px;
648
- letter-spacing: -0.5px;
649
-
650
- @media (max-width: 699px) {
651
- font-size: 14px;
652
- line-height: 20px;
653
- letter-spacing: -0.2px;
654
- }
655
- }
656
-
657
- /* Navigation Text */
658
- .typography_navigationtext__YfGf7 {
659
- margin: 0;
660
- font-family: var(--font-family-sans);
661
- font-size: 19px;
662
- line-height: 19px;
663
- letter-spacing: 0.4px;
664
- font-weight: 500;
665
-
666
- @media (max-width: 699px) {
667
- font-size: 17px;
668
- line-height: 17px;
669
- }
670
- }
671
-
672
346
  .core-theme-module_coreTheme__pWxYB {
673
347
  /* RBO Red */
674
348
  /* Primary Palette */
@@ -775,8 +449,6 @@
775
449
 
776
450
  --line-height-listing: 36px;
777
451
 
778
- --upsell-border-color: var(--color-primary-red);
779
-
780
452
  --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;
781
453
  --font-feature-settings-header: 'tnum' on, 'lnum' on;
782
454
  --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;
@@ -1183,8 +855,6 @@
1183
855
 
1184
856
  --heading-promo-bg-color: var(--color-base-black);
1185
857
  --page-header-bg-color: var(--color-primary-black);
1186
-
1187
- --upsell-border-color: var(--color-primary-black);
1188
858
  }
1189
859
 
1190
860
  .cinema-theme-module_cinemaTheme__f5QFs {
@@ -1230,10 +900,8 @@
1230
900
  --information-panel-button-hover-color: var(--color-rbo-red-hovered);
1231
901
  --information-panel-button-pressed-color: var(--color-rbo-red-pressed);
1232
902
 
1233
- --heading-promo-bg-color: var(--color-base-white);
903
+ --heading-promo-bg-color: var(--color-base-white);
1234
904
  --page-header-bg-color: var(--color-primary-black);
1235
-
1236
- --upsell-border-color: var(--color-primary-black);
1237
905
  };
1238
906
  .schools-theme-module_schoolsTheme__CWHba {
1239
907
  /* Schools theme overrides */