@royaloperahouse/harmonic 0.18.2-d → 0.18.2-e

package/dist/components/organisms/TitleWithCTA/TitleWithCTA.style.d.ts

@@ -6,21 +6,6 @@ export declare const AnchorTitle: import("styled-components").StyledComponent<"d
 export declare const GridItemTitleWrapper: import("styled-components").StyledComponent<"div", any, import("../../../types/types").IGridItemProps, never>;
 export declare const ButtonsDesktopWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ButtonsMobileWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PrimaryButtonReverse: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
-    children: import("react").ReactNode;
-    onClick?: ((event: import("react").MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined;
-    className?: string | undefined;
-} & {
-    iconName?: "Shift" | "AddToMyList" | "Arrow" | "ArrowPagination" | "AudioDescription" | "Back10" | "BalletAndDance" | "Basket" | "BasketFull" | "BritishSignLanguage" | "BookTickets" | "CarouselArrow" | "ChooseDates" | "Cinema" | "Clips" | "Clock" | "Close" | "ClosedCaptions" | "Confirm" | "CreditCard" | "Delete" | "Detract" | "DropdownArrow" | "EditMyList" | "Email" | "Expand" | "Expand12px" | "ExternalLink" | "Facebook" | "Favourite" | "FavouriteFull" | "Filter" | "FindAScreening" | "Forward10" | "FullScreen" | "GridView" | "Home" | "Info" | "Instagram" | "LastPageArrow" | "List" | "ListView" | "LiveStream" | "Location" | "Menu" | "Minimise" | "Muted" | "NavLogoMobile" | "NavLogoNoCrest" | "NavLogoWithCrest" | "OnMyList" | "OpenCaptions" | "OperaAndMusic" | "Pause" | "PDF" | "Phone" | "Play" | "Print" | "Refresh" | "RelaxedPerformance" | "Reminder" | "Remove" | "Remove12px" | "Restart" | "Search" | "Seat" | "Secure" | "Settings" | "Space" | "Standing" | "Star" | "Subscribe" | "Subtitles" | "Tick" | "Tickets" | "Tiktok" | "Trailer" | "Twitter" | "User" | "UserSignedIn" | "Volume" | "Watch" | "Wheelchair" | "X" | "Youtube" | undefined;
-    iconDirection?: "left" | "right" | "up" | "down" | "reverse" | undefined;
-    iconClassName?: string | undefined;
-} & import("react").AnchorHTMLAttributes<HTMLAnchorElement> & Pick<{
-    textColor?: "primary" | "primary-red" | "primary-black" | "base-white" | "base-black" | "base-dark-grey" | "base-mid-grey" | "base-light-grey" | "base-transparent" | "state-error" | "state-medium" | "state-good" | "state-focused" | "state-disabled" | "rbo-red-hovered" | "rbo-red-pressed" | "rbo-black-hovered" | "rbo-black-pressed" | "black-hovered" | "black-pressed" | "white-hovered" | "white-pressed" | "secondary-yellow" | "secondary-pink" | "secondary-orange" | "secondary-blue" | undefined;
-    backgroundColor?: "primary" | "primary-red" | "primary-black" | "base-white" | "base-black" | "base-dark-grey" | "base-mid-grey" | "base-light-grey" | "base-transparent" | "state-error" | "state-medium" | "state-good" | "state-focused" | "state-disabled" | "rbo-red-hovered" | "rbo-red-pressed" | "rbo-black-hovered" | "rbo-black-pressed" | "black-hovered" | "black-pressed" | "white-hovered" | "white-pressed" | "secondary-yellow" | "secondary-pink" | "secondary-orange" | "secondary-blue" | undefined;
-    borderColor?: "primary" | "primary-red" | "primary-black" | "base-white" | "base-black" | "base-dark-grey" | "base-mid-grey" | "base-light-grey" | "base-transparent" | "state-error" | "state-medium" | "state-good" | "state-focused" | "state-disabled" | "rbo-red-hovered" | "rbo-red-pressed" | "rbo-black-hovered" | "rbo-black-pressed" | "black-hovered" | "black-pressed" | "white-hovered" | "white-pressed" | "secondary-yellow" | "secondary-pink" | "secondary-orange" | "secondary-blue" | undefined;
-    hoveredColor?: "primary" | "primary-red" | "primary-black" | "base-white" | "base-black" | "base-dark-grey" | "base-mid-grey" | "base-light-grey" | "base-transparent" | "state-error" | "state-medium" | "state-good" | "state-focused" | "state-disabled" | "rbo-red-hovered" | "rbo-red-pressed" | "rbo-black-hovered" | "rbo-black-pressed" | "black-hovered" | "black-pressed" | "white-hovered" | "white-pressed" | "secondary-yellow" | "secondary-pink" | "secondary-orange" | "secondary-blue" | undefined;
-    pressedColor?: "primary" | "primary-red" | "primary-black" | "base-white" | "base-black" | "base-dark-grey" | "base-mid-grey" | "base-light-grey" | "base-transparent" | "state-error" | "state-medium" | "state-good" | "state-focused" | "state-disabled" | "rbo-red-hovered" | "rbo-red-pressed" | "rbo-black-hovered" | "rbo-black-pressed" | "black-hovered" | "black-pressed" | "white-hovered" | "white-pressed" | "secondary-yellow" | "secondary-pink" | "secondary-orange" | "secondary-blue" | undefined;
-    disabled?: boolean | undefined;
-}, "disabled" | "textColor" | "backgroundColor" | "hoveredColor" | "pressedColor"> & import("react").RefAttributes<HTMLAnchorElement>>, any, {}, never>;
+export declare const PrimaryButtonReverse: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../../../types/buttonTypes").PrimaryButtonProps>, any, {}, never>;
 export declare const MessageWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MessageWrapperMobile: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/harmonic.cjs.development.css

@@ -350,6 +350,325 @@
   font-display: swap;
 }
 
+/* ~~~~~ General Styling Classes ~~~~~ */
+.typography_color-primary__LOfDi {
+  color: var(--color-primary);
+}
+
+.typography_color-black__6MHRL {
+  color: var(--color-base-black);
+}
+
+.typography_color-white__PfW5s {
+  color: var(--color-base-white);
+}
+
+.typography_color-red__iPlbG {
+  color: var(--color-primary-red);
+}
+
+.typography_color-grey__GA1c2 {
+  color: var(--color-base-dark-grey);
+}
+
+.typography_color-inherit__RDd0Y {
+  color: inherit;
+}
+
+.typography_em__E6tX- {
+  font-style: italic;
+}
+/* ~~~ */
+
+/* Display Headers */
+.typography_display__-F3p4 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  line-height: 100%;
+
+  &.typography_large__uq0zC {
+    font-size: 96px;
+    font-weight: 700;
+    letter-spacing: -5px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 68px;
+    font-weight: 500;
+    letter-spacing: -3px;
+  }
+
+  /* Serif and Italic styles */
+  &.typography_serif__VSO38,
+  &.typography_em__E6tX- {
+    font-family: var(--font-family-serif);
+    font-weight: 500;
+  }
+
+  /* Serif and Italic adjustments */
+  &.typography_large__uq0zC.typography_serif__VSO38,
+  &.typography_large__uq0zC.typography_em__E6tX- {
+    letter-spacing: -3px;
+  }
+
+  &.typography_small__wfQ0K.typography_serif__VSO38,
+  &.typography_small__wfQ0K.typography_em__E6tX- {
+    letter-spacing: -2px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 38px;
+      letter-spacing: -1.5px;
+    }
+
+    &.typography_small__wfQ0K {
+      font-size: 32px;
+      letter-spacing: -1.5px;
+    }
+
+    &.typography_large__uq0zC.typography_serif__VSO38,
+    &.typography_large__uq0zC.typography_em__E6tX-,
+    &.typography_small__wfQ0K.typography_serif__VSO38,
+    &.typography_small__wfQ0K.typography_em__E6tX- {
+      letter-spacing: -0.5px;
+    }
+  }
+}
+
+/* Headers */
+.typography_header__BexiD {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+
+  &.typography_large__uq0zC {
+    font-size: 44px;
+    line-height: 48px;
+    letter-spacing: -1.5px;
+  }
+
+  &.typography_medium__K0uZD {
+    font-size: 34px;
+    line-height: 40px;
+    letter-spacing: -1px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 26px;
+    line-height: 32px;
+    letter-spacing: -0.5px;
+  }
+
+  /* Serif and Italic styles */
+  &.typography_serif__VSO38,
+  &.typography_em__E6tX- {
+    font-family: var(--font-family-serif);
+  }
+
+  /* Serif and Italic letter-spacing overrides */
+  &.typography_large__uq0zC.typography_serif__VSO38,
+  &.typography_large__uq0zC.typography_em__E6tX- {
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_medium__K0uZD.typography_serif__VSO38,
+  &.typography_medium__K0uZD.typography_em__E6tX- {
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_small__wfQ0K.typography_serif__VSO38,
+  &.typography_small__wfQ0K.typography_em__E6tX- {
+    letter-spacing: -0.5px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 28px;
+      line-height: 34px;
+      letter-spacing: -1.5px;
+    }
+
+    &.typography_medium__K0uZD {
+      font-size: 24px;
+      line-height: 28px;
+      letter-spacing: -1px;
+    }
+
+    &.typography_small__wfQ0K {
+      font-size: 20px;
+      line-height: 26px;
+      letter-spacing: -0.75px;
+    }
+
+    /* Mobile overrides for serif/italic letter-spacing */
+    &.typography_large__uq0zC.typography_serif__VSO38,
+    &.typography_large__uq0zC.typography_em__E6tX-,
+    &.typography_medium__K0uZD.typography_serif__VSO38,
+    &.typography_medium__K0uZD.typography_em__E6tX-,
+    &.typography_small__wfQ0K.typography_serif__VSO38,
+    &.typography_small__wfQ0K.typography_em__E6tX- {
+      letter-spacing: -0.5px;
+    }
+  }
+}
+
+/* Subtitle */
+.typography_subtitle__aoFTV {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+
+  &.typography_large__uq0zC {
+    font-size: 19px;
+    line-height: 26px;
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 17px;
+    line-height: 24px;
+    letter-spacing: -0.5px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 17px;
+      line-height: 24px;
+      letter-spacing: -0.5px;
+    }
+
+    &.typography_small__wfQ0K {
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: -0.2px;
+    }
+  }
+}
+
+/* Body Copy */
+.typography_bodycopy__vYtQ8 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 400;
+
+  &.typography_large__uq0zC {
+    font-size: 19px;
+    line-height: 26px;
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_medium__K0uZD {
+    font-size: 17px;
+    line-height: 24px;
+    letter-spacing: -0.5px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: -0.5px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      font-size: 17px;
+      line-height: 24px;
+      letter-spacing: -0.5px;
+    }
+
+    &.typography_medium__K0uZD {
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: -0.2px;
+    }
+
+    &.typography_small__wfQ0K {
+      font-size: 11px;
+      line-height: 16px;
+      letter-spacing: -0.2px;
+    }
+  }
+}
+
+/* Overline */
+.typography_overline__EnUK3 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 500;
+  text-transform: uppercase;
+
+  &.typography_large__uq0zC {
+    font-size: 14px;
+    line-height: 18px;
+    letter-spacing: 0.3px;
+  }
+
+  &.typography_small__wfQ0K {
+    font-size: 12px;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+  }
+
+  @media (max-width: 699px) {
+    &.typography_large__uq0zC {
+      line-height: 17px;
+      letter-spacing: 0.3px; /* Added to ensure it stays */
+    }
+
+    &.typography_small__wfQ0K {
+      line-height: 14px;
+      letter-spacing: 0.3px;
+    }
+  }
+}
+
+/* Button Text */
+.typography_buttontext__vcxNi {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: 17px;
+  line-height: 20px;
+  letter-spacing: -0.5px;
+  font-weight: 400;
+
+  @media (max-width: 699px) {
+    font-weight: 500;
+    line-height: 17px;
+  }
+}
+
+/* Caption Text */
+.typography_captiontext__91UFb {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 24px;
+  letter-spacing: -0.5px;
+
+  @media (max-width: 699px) {
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: -0.2px;
+  }
+}
+
+/* Navigation Text */
+.typography_navigationtext__YfGf7 {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: 19px;
+  line-height: 19px;
+  letter-spacing: 0.4px;
+  font-weight: 500;
+
+  @media (max-width: 699px) {
+    font-size: 17px;
+    line-height: 17px;
+  }
+}
+
 .core-theme-module_coreTheme__pWxYB {
   /* RBO Red */
   /* Primary Palette */