@royaloperahouse/harmonic 0.12.0-c → 0.12.1

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 (60) hide show
  1. package/CHANGELOG.md +2 -2
  2. package/README.GIT +278 -0
  3. package/README.md +43 -252
  4. package/dist/components/Typography/Typography.d.ts +5 -5
  5. package/dist/components/atoms/Buttons/Secondary/utils.d.ts +4 -4
  6. package/dist/components/atoms/Dropdown/Dropdown.d.ts +1 -1
  7. package/dist/components/atoms/RotatorButtons/RotatorButtons.d.ts +1 -1
  8. package/dist/components/atoms/RotatorButtons/RotatorButtons.style.d.ts +0 -1
  9. package/dist/components/atoms/SectionSplitter/SectionSplitter.d.ts +1 -1
  10. package/dist/components/atoms/Tab/Tab.d.ts +1 -1
  11. package/dist/components/atoms/TextField/TextField.style.d.ts +1 -1
  12. package/dist/components/index.d.ts +2 -2
  13. package/dist/components/molecules/Accordion/Accordion.style.d.ts +3 -5
  14. package/dist/components/molecules/Card/Card.style.d.ts +1 -1
  15. package/dist/components/molecules/ContactCard/ContactCard.style.d.ts +4 -5
  16. package/dist/components/molecules/ContentSummary/ContentSummary.style.d.ts +1 -1
  17. package/dist/components/molecules/Editorial/Editorial.style.d.ts +2 -2
  18. package/dist/components/molecules/ImageWithCaption/ImageWithCaption.style.d.ts +1 -1
  19. package/dist/components/molecules/Information/Information.style.d.ts +2 -3
  20. package/dist/components/molecules/PageHeading/Promo/Promo.d.ts +2 -1
  21. package/dist/components/molecules/PageHeading/index.d.ts +1 -2
  22. package/dist/components/molecules/Pagination/Pagination.style.d.ts +1 -1
  23. package/dist/components/molecules/PromoWithTags/PromoWithTags.style.d.ts +6 -3
  24. package/dist/components/molecules/PromoWithTitle/PromoWithTitle.style.d.ts +2 -2
  25. package/dist/components/molecules/SectionTitle/SectionTitle.d.ts +1 -1
  26. package/dist/components/molecules/TextOnly/TextOnly.d.ts +4 -0
  27. package/dist/components/molecules/TextOnly/index.d.ts +2 -0
  28. package/dist/components/molecules/index.d.ts +3 -2
  29. package/dist/components/organisms/AnchorTabBar/AnchorTabBar.style.d.ts +3 -8
  30. package/dist/components/organisms/Carousels/Carousel/Carousel.style.d.ts +0 -1
  31. package/dist/components/organisms/StickyBar/StickyBar.style.d.ts +1 -1
  32. package/dist/harmonic.cjs.development.css +16 -345
  33. package/dist/harmonic.cjs.development.js +888 -885
  34. package/dist/harmonic.cjs.development.js.map +1 -1
  35. package/dist/harmonic.cjs.production.min.js +1 -1
  36. package/dist/harmonic.cjs.production.min.js.map +1 -1
  37. package/dist/harmonic.esm.js +901 -899
  38. package/dist/harmonic.esm.js.map +1 -1
  39. package/dist/index.d.ts +3 -5
  40. package/dist/styles/HarmonicThemeProvider/HarmonicThemeProvider.d.ts +0 -4
  41. package/dist/styles/HarmonicThemeProvider/index.d.ts +1 -2
  42. package/dist/types/buttonTypes.d.ts +2 -6
  43. package/dist/types/contactCard.d.ts +22 -8
  44. package/dist/types/editorial.d.ts +12 -6
  45. package/dist/types/impactHeader.d.ts +2 -22
  46. package/dist/types/information.d.ts +43 -23
  47. package/dist/types/navigation.d.ts +61 -31
  48. package/dist/types/promoWithTags.d.ts +1 -9
  49. package/dist/types/types.d.ts +72 -91
  50. package/dist/types/typography.d.ts +0 -4
  51. package/package.json +1 -1
  52. package/dist/components/molecules/BodyContent/BodyContent.d.ts +0 -4
  53. package/dist/components/molecules/BodyContent/index.d.ts +0 -2
  54. package/dist/components/molecules/CastFilter/CastFilters.d.ts +0 -4
  55. package/dist/components/molecules/CastFilter/CastFilters.style.d.ts +0 -14
  56. package/dist/components/molecules/CastFilter/index.d.ts +0 -2
  57. package/dist/components/molecules/PageHeading/Highlight/Highlight.d.ts +0 -4
  58. package/dist/components/molecules/PageHeading/Highlight/Highlight.style.d.ts +0 -9
  59. package/dist/components/molecules/PageHeading/Highlight/index.d.ts +0 -2
  60. /package/dist/components/molecules/{BodyContent/BodyContent.style.d.ts → TextOnly/TextOnly.style.d.ts} +0 -0
@@ -343,325 +343,6 @@
343
343
  font-display: swap;
344
344
  }
345
345
 
346
- /* ~~~~~ General Styling Classes ~~~~~ */
347
- .typography_color-primary__LOfDi {
348
- color: var(--color-primary);
349
- }
350
-
351
- .typography_color-black__6MHRL {
352
- color: var(--color-base-black);
353
- }
354
-
355
- .typography_color-white__PfW5s {
356
- color: var(--color-base-white);
357
- }
358
-
359
- .typography_color-red__iPlbG {
360
- color: var(--color-primary-red);
361
- }
362
-
363
- .typography_color-grey__GA1c2 {
364
- color: var(--color-base-dark-grey);
365
- }
366
-
367
- .typography_color-inherit__RDd0Y {
368
- color: inherit;
369
- }
370
-
371
- .typography_em__E6tX- {
372
- font-style: italic;
373
- }
374
- /* ~~~ */
375
-
376
- /* Display Headers */
377
- .typography_display__-F3p4 {
378
- margin: 0;
379
- font-family: var(--font-family-sans);
380
- line-height: 100%;
381
-
382
- &.typography_large__uq0zC {
383
- font-size: 96px;
384
- font-weight: 700;
385
- letter-spacing: -5px;
386
- }
387
-
388
- &.typography_small__wfQ0K {
389
- font-size: 68px;
390
- font-weight: 500;
391
- letter-spacing: -3px;
392
- }
393
-
394
- /* Serif and Italic styles */
395
- &.typography_serif__VSO38,
396
- &.typography_em__E6tX- {
397
- font-family: var(--font-family-serif);
398
- font-weight: 500;
399
- }
400
-
401
- /* Serif and Italic adjustments */
402
- &.typography_large__uq0zC.typography_serif__VSO38,
403
- &.typography_large__uq0zC.typography_em__E6tX- {
404
- letter-spacing: -3px;
405
- }
406
-
407
- &.typography_small__wfQ0K.typography_serif__VSO38,
408
- &.typography_small__wfQ0K.typography_em__E6tX- {
409
- letter-spacing: -2px;
410
- }
411
-
412
- @media (max-width: 699px) {
413
- &.typography_large__uq0zC {
414
- font-size: 38px;
415
- letter-spacing: -1.5px;
416
- }
417
-
418
- &.typography_small__wfQ0K {
419
- font-size: 32px;
420
- letter-spacing: -1.5px;
421
- }
422
-
423
- &.typography_large__uq0zC.typography_serif__VSO38,
424
- &.typography_large__uq0zC.typography_em__E6tX-,
425
- &.typography_small__wfQ0K.typography_serif__VSO38,
426
- &.typography_small__wfQ0K.typography_em__E6tX- {
427
- letter-spacing: -0.5px;
428
- }
429
- }
430
- }
431
-
432
- /* Headers */
433
- .typography_header__BexiD {
434
- margin: 0;
435
- font-family: var(--font-family-sans);
436
- font-weight: 500;
437
-
438
- &.typography_large__uq0zC {
439
- font-size: 44px;
440
- line-height: 48px;
441
- letter-spacing: -1.5px;
442
- }
443
-
444
- &.typography_medium__K0uZD {
445
- font-size: 34px;
446
- line-height: 40px;
447
- letter-spacing: -1px;
448
- }
449
-
450
- &.typography_small__wfQ0K {
451
- font-size: 26px;
452
- line-height: 32px;
453
- letter-spacing: -0.5px;
454
- }
455
-
456
- /* Serif and Italic styles */
457
- &.typography_serif__VSO38,
458
- &.typography_em__E6tX- {
459
- font-family: var(--font-family-serif);
460
- }
461
-
462
- /* Serif and Italic letter-spacing overrides */
463
- &.typography_large__uq0zC.typography_serif__VSO38,
464
- &.typography_large__uq0zC.typography_em__E6tX- {
465
- letter-spacing: -0.5px;
466
- }
467
-
468
- &.typography_medium__K0uZD.typography_serif__VSO38,
469
- &.typography_medium__K0uZD.typography_em__E6tX- {
470
- letter-spacing: -0.5px;
471
- }
472
-
473
- &.typography_small__wfQ0K.typography_serif__VSO38,
474
- &.typography_small__wfQ0K.typography_em__E6tX- {
475
- letter-spacing: -0.5px;
476
- }
477
-
478
- @media (max-width: 699px) {
479
- &.typography_large__uq0zC {
480
- font-size: 28px;
481
- line-height: 34px;
482
- letter-spacing: -1.5px;
483
- }
484
-
485
- &.typography_medium__K0uZD {
486
- font-size: 24px;
487
- line-height: 28px;
488
- letter-spacing: -1px;
489
- }
490
-
491
- &.typography_small__wfQ0K {
492
- font-size: 20px;
493
- line-height: 26px;
494
- letter-spacing: -0.75px;
495
- }
496
-
497
- /* Mobile overrides for serif/italic letter-spacing */
498
- &.typography_large__uq0zC.typography_serif__VSO38,
499
- &.typography_large__uq0zC.typography_em__E6tX-,
500
- &.typography_medium__K0uZD.typography_serif__VSO38,
501
- &.typography_medium__K0uZD.typography_em__E6tX-,
502
- &.typography_small__wfQ0K.typography_serif__VSO38,
503
- &.typography_small__wfQ0K.typography_em__E6tX- {
504
- letter-spacing: -0.5px;
505
- }
506
- }
507
- }
508
-
509
- /* Subtitle */
510
- .typography_subtitle__aoFTV {
511
- margin: 0;
512
- font-family: var(--font-family-sans);
513
- font-weight: 500;
514
-
515
- &.typography_large__uq0zC {
516
- font-size: 19px;
517
- line-height: 26px;
518
- letter-spacing: -0.5px;
519
- }
520
-
521
- &.typography_small__wfQ0K {
522
- font-size: 17px;
523
- line-height: 24px;
524
- letter-spacing: -0.5px;
525
- }
526
-
527
- @media (max-width: 699px) {
528
- &.typography_large__uq0zC {
529
- font-size: 17px;
530
- line-height: 24px;
531
- letter-spacing: -0.5px;
532
- }
533
-
534
- &.typography_small__wfQ0K {
535
- font-size: 14px;
536
- line-height: 20px;
537
- letter-spacing: -0.2px;
538
- }
539
- }
540
- }
541
-
542
- /* Body Copy */
543
- .typography_bodycopy__vYtQ8 {
544
- margin: 0;
545
- font-family: var(--font-family-sans);
546
- font-weight: 400;
547
-
548
- &.typography_large__uq0zC {
549
- font-size: 19px;
550
- line-height: 26px;
551
- letter-spacing: -0.5px;
552
- }
553
-
554
- &.typography_medium__K0uZD {
555
- font-size: 17px;
556
- line-height: 24px;
557
- letter-spacing: -0.5px;
558
- }
559
-
560
- &.typography_small__wfQ0K {
561
- font-size: 14px;
562
- line-height: 20px;
563
- letter-spacing: -0.5px;
564
- }
565
-
566
- @media (max-width: 699px) {
567
- &.typography_large__uq0zC {
568
- font-size: 17px;
569
- line-height: 24px;
570
- letter-spacing: -0.5px;
571
- }
572
-
573
- &.typography_medium__K0uZD {
574
- font-size: 14px;
575
- line-height: 20px;
576
- letter-spacing: -0.2px;
577
- }
578
-
579
- &.typography_small__wfQ0K {
580
- font-size: 11px;
581
- line-height: 16px;
582
- letter-spacing: -0.2px;
583
- }
584
- }
585
- }
586
-
587
- /* Overline */
588
- .typography_overline__EnUK3 {
589
- margin: 0;
590
- font-family: var(--font-family-sans);
591
- font-weight: 500;
592
- text-transform: uppercase;
593
-
594
- &.typography_large__uq0zC {
595
- font-size: 14px;
596
- line-height: 18px;
597
- letter-spacing: 0.3px;
598
- }
599
-
600
- &.typography_small__wfQ0K {
601
- font-size: 12px;
602
- line-height: 14px;
603
- letter-spacing: 0.2px;
604
- }
605
-
606
- @media (max-width: 699px) {
607
- &.typography_large__uq0zC {
608
- line-height: 17px;
609
- letter-spacing: 0.3px; /* Added to ensure it stays */
610
- }
611
-
612
- &.typography_small__wfQ0K {
613
- line-height: 14px;
614
- letter-spacing: 0.3px;
615
- }
616
- }
617
- }
618
-
619
- /* Button Text */
620
- .typography_buttontext__vcxNi {
621
- margin: 0;
622
- font-family: var(--font-family-sans);
623
- font-size: 17px;
624
- line-height: 20px;
625
- letter-spacing: -0.5px;
626
- font-weight: 400;
627
-
628
- @media (max-width: 699px) {
629
- font-weight: 500;
630
- line-height: 17px;
631
- }
632
- }
633
-
634
- /* Caption Text */
635
- .typography_captiontext__91UFb {
636
- margin: 0;
637
- font-family: var(--font-family-sans);
638
- font-weight: 400;
639
- font-size: 17px;
640
- line-height: 24px;
641
- letter-spacing: -0.5px;
642
-
643
- @media (max-width: 699px) {
644
- font-size: 14px;
645
- line-height: 20px;
646
- letter-spacing: -0.2px;
647
- }
648
- }
649
-
650
- /* Navigation Text */
651
- .typography_navigationtext__YfGf7 {
652
- margin: 0;
653
- font-family: var(--font-family-sans);
654
- font-size: 19px;
655
- line-height: 19px;
656
- letter-spacing: 0.4px;
657
- font-weight: 500;
658
-
659
- @media (max-width: 699px) {
660
- font-size: 17px;
661
- line-height: 17px;
662
- }
663
- }
664
-
665
346
  .core-theme-module_coreTheme__pWxYB {
666
347
  /* RBO Red */
667
348
  /* Primary Palette */
@@ -751,9 +432,8 @@
751
432
  --button-tertiary-pressed-color: var(--color-rbo-black-pressed);
752
433
  --button-auxiliary-color: var(--color-primary-black);
753
434
  --button-auxiliary-bg-color: var(--color-base-transparent);
754
- --button-anchor-tab-color: var(--color-primary-red);
755
435
 
756
- /* ----- Variables already used in Harmonic START ----- */
436
+ /* ----- Variables already used in Harmonic START ----- */
757
437
  --grid-column-gap: 36px;
758
438
  --grid-margin: 10%;
759
439
 
@@ -765,33 +445,13 @@
765
445
  --rotator-button-hover-bg-color: var(--color-primary-red);
766
446
 
767
447
  --carousel-image-caption-height: 17px;
768
-
769
- --line-height-listing: 36px;
770
-
771
- --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;
772
- --font-feature-settings-header: 'tnum' on, 'lnum' on;
773
- --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;
774
-
775
- --text-transform-body: none;
776
- --text-transform-header: uppercase;
777
- --text-transform-subtitle: uppercase;
778
-
448
+
779
449
  @media (max-width: 699px) {
780
450
  --grid-column-gap: 12px;
781
451
  --grid-margin: 20px;
782
452
  --rotator-button-width: 40px;
783
453
  --rotator-button-icon-width: 24px;
784
454
  --carousel-image-caption-height: 14px;
785
-
786
- --line-height-listing: 34px;
787
-
788
- --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;
789
- --font-feature-settings-header: 'tnum' on, 'lnum' on;
790
- --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;
791
-
792
- --text-transform-body: none;
793
- --text-transform-header: uppercase;
794
- --text-transform-subtitle: uppercase;
795
455
  }
796
456
 
797
457
  @media (min-width: 700px) and (max-width: 1139px) {
@@ -802,7 +462,7 @@
802
462
  --carousel-image-caption-height: 14px;
803
463
  }
804
464
 
805
- /* ----- Variables already used in Harmonic END ----- */
465
+ /* ----- Variables already used in Harmonic END ----- */
806
466
 
807
467
  --font-size-header-1: 96px;
808
468
  --font-weight-header-1: 500;
@@ -908,6 +568,7 @@
908
568
  --font-size-title-description: 20px;
909
569
  --line-height-title-description: 28px;
910
570
 
571
+ --line-height-listing: 36px;
911
572
  --font-size-individual-listing-name: 19px;
912
573
  --line-height-individual-listing-name: 24px;
913
574
  --line-height-people-listing-gap: 24px;
@@ -922,12 +583,18 @@
922
583
  --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;
923
584
  --font-family-people-listing-name: 'adobe-garamond-pro';
924
585
 
586
+ --font-feature-settings-header: 'tnum' on, 'lnum' on;
925
587
  --font-feature-settings-altHeader: 'pnum' on, 'onum' on;
926
588
  --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;
589
+ --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;
590
+ --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;
927
591
  --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;
928
592
 
593
+ --text-transform-header: uppercase;
929
594
  --text-transform-altHeader: none;
595
+ --text-transform-body: none;
930
596
  --text-transform-overline: uppercase;
597
+ --text-transform-subtitle: uppercase;
931
598
 
932
599
  --word-break-header: break-word;
933
600
  --word-break-altHeader: break-word;
@@ -1096,12 +763,18 @@
1096
763
  --font-family-people-listing-role: 'Gotham SSm A', 'Gotham SSm B', 'Montserrat', sans-serif;
1097
764
  --font-family-people-listing-name: 'adobe-garamond-pro';
1098
765
 
766
+ --font-feature-settings-header: 'tnum' on, 'lnum' on;
1099
767
  --font-feature-settings-altHeader: 'pnum' on, 'onum' on;
1100
768
  --font-feature-settings-overline: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;
769
+ --font-feature-settings-subtitle: 'tnum' on, 'lnum' on;
770
+ --font-feature-settings-body: 'pnum' on, 'onum' on, 'liga' off;
1101
771
  --font-feature-settings-navigation: 'tnum' on, 'lnum' on, 'liga' off, 'calt' off;
1102
772
 
773
+ --text-transform-header: uppercase;
1103
774
  --text-transform-altHeader: none;
775
+ --text-transform-body: none;
1104
776
  --text-transform-overline: uppercase;
777
+ --text-transform-subtitle: uppercase;
1105
778
 
1106
779
  --word-break-header: break-word;
1107
780
  --word-break-altHeader: break-word;
@@ -1157,7 +830,6 @@
1157
830
  --button-tertiary-color: var(--color-primary-black);
1158
831
  --button-tertiary-hover-color: var(--color-rbo-black-hovered);
1159
832
  --button-tertiary-pressed-color: var(--color-rbo-black-pressed);
1160
- --button-anchor-tab-color: var(--color-primary-black);
1161
833
 
1162
834
  --rotator-button-color: var(--color-base-black);
1163
835
  --rotator-button-bg-color: var(--color-base-light-grey);
@@ -1200,7 +872,6 @@
1200
872
  --button-tertiary-color: var(--color-base-white);
1201
873
  --button-tertiary-hover-color: var(--color-white-hovered);
1202
874
  --button-tertiary-pressed-color: var(--color-white-pressed);
1203
- --button-anchor-tab-color: var(--color-primary-black);
1204
875
 
1205
876
  --rotator-button-color: var(--color-primary-black);
1206
877
  --rotator-button-bg-color: var(--color-base-light-grey);