@royaloperahouse/chord 0.1.0

package/src/styles/GlobalStyles.tsx

@@ -0,0 +1,205 @@
+import { createGlobalStyle, GlobalStyleComponent } from 'styled-components';
+import { devices } from './viewports';
+
+const GlobalStyles: GlobalStyleComponent<any, any> = createGlobalStyle`
+  html {
+    --base-color-primary: ${({ theme }) => theme.colors.primary};
+    --base-color-white: ${({ theme }) => theme.colors.white};
+    --base-color-black: ${({ theme }) => theme.colors.black};
+    --base-color-dark-grey: ${({ theme }) => theme.colors.darkgrey};
+    --base-color-mid-grey: ${({ theme }) => theme.colors.midgrey};
+    --base-color-light-grey: ${({ theme }) => theme.colors.lightgrey};
+    --error-color-state: ${({ theme }) => theme.colors.error};
+    --medium-color-state: ${({ theme }) => theme.colors.medium};
+    --good-color-state: ${({ theme }) => theme.colors.good};
+    --base-color-darkgrey: ${({ theme }) => theme.colors.darkgrey};
+    --base-color-midgrey: ${({ theme }) => theme.colors.midgrey};
+    --base-color-lightgrey: ${({ theme }) => theme.colors.lightgrey};
+    --base-color-transparent: transparent;
+    --base-color-errorstate: ${({ theme }) => theme.colors.error};
+    --base-color-mediumstate: ${({ theme }) => theme.colors.medium};
+    --base-color-goodstate: ${({ theme }) => theme.colors.good};
+
+    --button-height: ${({ theme }) => theme.spacing[12]};
+    --button-line-height: ${({ theme }) => theme.fonts.desktop.lineHeights.buttons};
+    --button-padding-x: ${({ theme }) => theme.buttons.paddingX};
+    --button-padding-y: ${({ theme }) => theme.buttons.paddingY};
+    --button-padding-y-icon: ${({ theme }) => theme.buttons.paddingYIcon};
+    --button-icon-margin: ${({ theme }) => theme.buttons.iconMargin};
+    --button-icon-width: ${({ theme }) => theme.buttons.iconWidth};
+    --button-icon-height: ${({ theme }) => theme.buttons.iconHeight};
+    --button-font-size: ${({ theme }) => theme.fonts.desktop.sizes.buttons};
+    --button-font-weight: ${({ theme }) => theme.fonts.desktop.weights.buttons};
+
+    --font-size-header-1: ${({ theme }) => theme.fonts.desktop.sizes.headers[1]};
+    --letter-spacing-header-1: ${({ theme }) => theme.fonts.desktop.letterSpacing.headers[1]};
+    --line-height-header-1: ${({ theme }) => theme.fonts.desktop.lineHeights.headers[1]};
+    --font-weight-header-1: ${({ theme }) => theme.fonts.desktop.weights.headers[1]};
+    --font-size-header-2: ${({ theme }) => theme.fonts.desktop.sizes.headers[2]};
+    --letter-spacing-header-2: ${({ theme }) => theme.fonts.desktop.letterSpacing.headers[2]};
+    --line-height-header-2: ${({ theme }) => theme.fonts.desktop.lineHeights.headers[2]};
+    --font-weight-header-2: ${({ theme }) => theme.fonts.desktop.weights.headers[2]};
+    --font-size-header-3: ${({ theme }) => theme.fonts.desktop.sizes.headers[3]};
+    --letter-spacing-header-3: ${({ theme }) => theme.fonts.desktop.letterSpacing.headers[3]};
+    --line-height-header-3: ${({ theme }) => theme.fonts.desktop.lineHeights.headers[3]};
+    --font-weight-header-3: ${({ theme }) => theme.fonts.desktop.weights.headers[3]};
+    --font-size-header-4: ${({ theme }) => theme.fonts.desktop.sizes.headers[4]};
+    --letter-spacing-header-4: ${({ theme }) => theme.fonts.desktop.letterSpacing.headers[4]};
+    --line-height-header-4: ${({ theme }) => theme.fonts.desktop.lineHeights.headers[4]};
+    --font-weight-header-4: ${({ theme }) => theme.fonts.desktop.weights.headers[4]};
+    --font-size-header-5: ${({ theme }) => theme.fonts.desktop.sizes.headers[5]};
+    --letter-spacing-header-5: ${({ theme }) => theme.fonts.desktop.letterSpacing.headers[5]};
+    --line-height-header-5: ${({ theme }) => theme.fonts.desktop.lineHeights.headers[5]};
+    --font-weight-header-5: ${({ theme }) => theme.fonts.desktop.weights.headers[5]};
+    --font-size-header-6: ${({ theme }) => theme.fonts.desktop.sizes.headers[6]};
+    --letter-spacing-header-6: ${({ theme }) => theme.fonts.desktop.letterSpacing.headers[6]};
+    --line-height-header-6: ${({ theme }) => theme.fonts.desktop.lineHeights.headers[6]};
+    --font-weight-header-6: ${({ theme }) => theme.fonts.desktop.weights.headers[6]};
+
+    --font-size-overline-1: ${({ theme }) => theme.fonts.desktop.sizes.overline[1]};
+    --font-weigth-overline-1: ${({ theme }) => theme.fonts.desktop.weights.overline[1]};
+    --line-height-overline-1: ${({ theme }) => theme.fonts.desktop.lineHeights.overline[1]};
+    --text-transform-overline-1: ${({ theme }) => theme.fonts.desktop.transforms.overline};
+    --letter-spacing-overline-1: ${({ theme }) => theme.fonts.desktop.letterSpacing.overline[1]};
+    --font-family-body-1: ${({ theme }) => theme.fonts.desktop.families.body};
+    --font-size-title-description: ${({ theme }) => theme.fonts.desktop.sizes.titleDescription};
+    --line-height-title-description: ${({ theme }) => theme.fonts.desktop.lineHeights.titleDescription};
+    --font-size-body-1: ${({ theme }) => theme.fonts.desktop.sizes.body[1]};
+    --font-weigth-body-1: ${({ theme }) => theme.fonts.desktop.weights.body[1]};
+    --line-height-body-1: ${({ theme }) => theme.fonts.desktop.lineHeights.body[1]};
+    --text-transform-body-1: ${({ theme }) => theme.fonts.desktop.transforms.body};
+    --letter-spacing-body-1: ${({ theme }) => theme.fonts.desktop.letterSpacing.body[1]};
+    --font-size-body-2: ${({ theme }) => theme.fonts.desktop.sizes.body[2]};
+    --line-height-body-2: ${({ theme }) => theme.fonts.desktop.lineHeights.body[2]};
+    --font-size-body-3: ${({ theme }) => theme.fonts.desktop.sizes.body[3]};
+    --line-height-body-3: ${({ theme }) => theme.fonts.desktop.lineHeights.body[3]};
+    --font-size-subtitles-1: ${({ theme }) => theme.fonts.desktop.sizes.subtitles[1]};
+    --font-weigth-subtitles-1: ${({ theme }) => theme.fonts.desktop.weights.subtitles[1]};
+    --line-height-subtitles-1: ${({ theme }) => theme.fonts.desktop.lineHeights.subtitles[1]};
+    --text-transform-subtitles-1: ${({ theme }) => theme.fonts.desktop.transforms.subtitles};
+    --letter-spacing-subtitles-1: ${({ theme }) => theme.fonts.desktop.letterSpacing.subtitles[1]};
+    --line-height-listing: ${({ theme }) => theme.fonts.desktop.lineHeights.listing};
+    
+    --font-size-individual-listing-name: ${({ theme }) => theme.fonts.desktop.sizes.listing};
+    --line-height-individual-listing-name: ${({ theme }) => theme.fonts.desktop.lineHeights.peopleListing};
+    --line-height-people-listing-gap: ${({ theme }) => theme.spacing[6]};
+
+    --font-family-header: ${({ theme }) => theme.fonts.desktop.families.headers};
+    --font-family-body: ${({ theme }) => theme.fonts.desktop.families.body};
+    --font-family-body-italics: ${({ theme }) => theme.fonts.desktop.families.bodyItalics};
+    --font-family-buttons: ${({ theme }) => theme.fonts.desktop.families.buttons};
+    --font-family-overline: ${({ theme }) => theme.fonts.desktop.families.overline};
+    --font-family-subtitles: ${({ theme }) => theme.fonts.desktop.families.subtitles};
+    --font-family-people-listing-role: ${({ theme }) => theme.fonts.desktop.families.peopleListingRole};
+    --font-family-people-listing-name: ${({ theme }) => theme.fonts.desktop.families.body};
+
+    --font-family-navigation: ${({ theme }) => theme.fonts.desktop.families.navigation};
+    --font-size-navigation: ${({ theme }) => theme.fonts.desktop.sizes.navigation};
+    --navigation-small-gap: ${({ theme }) => theme.spacing[4]};
+    --navigation-middle-gap: ${({ theme }) => theme.spacing[5]};
+    --navigation-large-gap: ${({ theme }) => theme.spacing[6]};
+    --navigation-xlarge-gap: ${({ theme }) => theme.spacing[9]};
+    --navigation-large-margin: ${({ theme }) => theme.spacing[15]};
+
+    --font-size-search: ${({ theme }) => theme.fonts.desktop.sizes.search};
+  
+    --grid-margin: ${({ theme }) => theme.grid.desktop.margin};
+    --grid-outer-margin: ${({ theme }) => theme.grid.desktop.outerMargin};
+    --grid-template-columns: calc(${({ theme }) => theme.grid.desktop.outerMargin} - ${({ theme }) =>
+  theme.grid.desktop.gap}) calc(${({ theme }) => theme.grid.desktop.margin} - ${({ theme }) =>
+  theme.grid.desktop.outerMargin} - ${({ theme }) => theme.grid.desktop.gap}) repeat(12, minmax(0,1fr)) calc(${({
+  theme,
+}) => theme.grid.desktop.margin} - ${({ theme }) => theme.grid.desktop.outerMargin} - ${({ theme }) =>
+  theme.grid.desktop.gap}) calc(${({ theme }) => theme.grid.desktop.outerMargin} - ${({ theme }) =>
+  theme.grid.desktop.gap});
+    --grid-column-gap: ${({ theme }) => theme.grid.desktop.gap};
+    --grid-margin: 0;
+
+    --footer-height: ${({ theme }) => theme.footer.desktop.height};
+    --footer-padding-top: ${({ theme }) => theme.footer.desktop.paddingTop};
+    --footer-padding-bottom: ${({ theme }) => theme.footer.desktop.paddingBottom};
+    --footer-items-gap: ${({ theme }) => theme.footer.desktop.itemsGap};
+    --footer-media-gap: ${({ theme }) => theme.footer.desktop.mediaGap};
+    --footer-media-icon-width: ${({ theme }) => theme.footer.desktop.mediaIconWidth};
+    --footer-media-icon-height: ${({ theme }) => theme.footer.desktop.mediaIconHeight};
+    --footer-vertical-spacing-lg: ${({ theme }) => theme.footer.desktop.verticalSpacingLarge};
+    --footer-vertical-spacing-sm: ${({ theme }) => theme.footer.desktop.verticalSpacingSmall};
+
+    --text-link-underline-offset: ${({ theme }) => theme.spacing[2]};
+
+    --editorial-subtitle-margin-bottom: ${({ theme }) => theme.spacing[4]};
+    
+
+    @media ${devices.mobile} {
+      --font-size-header-1: ${({ theme }) => theme.fonts.mobile.sizes.headers[1]};
+      --line-height-header-1: ${({ theme }) => theme.fonts.mobile.lineHeights.headers[1]};
+      --font-family-header-1: ${({ theme }) => theme.fonts.mobile.families.headers};
+      --font-size-header-2: ${({ theme }) => theme.fonts.mobile.sizes.headers[2]};
+      --line-height-header-2: ${({ theme }) => theme.fonts.mobile.lineHeights.headers[2]};
+      --font-family-header-2: ${({ theme }) => theme.fonts.mobile.families.headers};
+      --font-size-header-3: ${({ theme }) => theme.fonts.mobile.sizes.headers[3]};
+      --line-height-header-3: ${({ theme }) => theme.fonts.mobile.lineHeights.headers[3]};
+      --font-family-header-3: ${({ theme }) => theme.fonts.mobile.families.headers};
+      --font-size-header-4: ${({ theme }) => theme.fonts.mobile.sizes.headers[4]};
+      --line-height-header-4: ${({ theme }) => theme.fonts.mobile.lineHeights.headers[4]};
+      --font-family-header-4: ${({ theme }) => theme.fonts.mobile.families.headers};
+      --font-size-header-5: ${({ theme }) => theme.fonts.mobile.sizes.headers[5]};
+      --line-height-header-5: ${({ theme }) => theme.fonts.mobile.lineHeights.headers[5]};
+      --font-family-header-5: ${({ theme }) => theme.fonts.mobile.families.headers};
+      --font-size-header-6: ${({ theme }) => theme.fonts.mobile.sizes.headers[6]};
+      --line-height-header-6: ${({ theme }) => theme.fonts.mobile.lineHeights.headers[6]};
+      --font-family-header-6: ${({ theme }) => theme.fonts.mobile.families.headers};
+
+      --font-size-overline-1: ${({ theme }) => theme.fonts.mobile.sizes.overline[1]};
+      --font-weigth-overline-1: ${({ theme }) => theme.fonts.mobile.weights.overline[1]};
+      --line-height-overline-1: ${({ theme }) => theme.fonts.mobile.lineHeights.overline[1]};
+      --letter-spacing-overline-1: ${({ theme }) => theme.fonts.mobile.letterSpacing.overline[1]};
+      --font-size-title-description: ${({ theme }) => theme.fonts.mobile.sizes.titleDescription};
+      --line-height-title-description: ${({ theme }) => theme.fonts.mobile.lineHeights.titleDescription};
+      --font-size-body-2: ${({ theme }) => theme.fonts.mobile.sizes.body[2]};
+      --line-height-body-2: ${({ theme }) => theme.fonts.mobile.lineHeights.body[2]};
+      --font-size-body-3: ${({ theme }) => theme.fonts.mobile.sizes.body[3]};
+      --line-height-body-3: ${({ theme }) => theme.fonts.mobile.lineHeights.body[3]};
+      --font-size-subtitles-1: ${({ theme }) => theme.fonts.mobile.sizes.subtitles[1]};
+      --font-weigth-subtitles-1: ${({ theme }) => theme.fonts.mobile.weights.subtitles[1]};
+      --line-height-subtitles-1: ${({ theme }) => theme.fonts.mobile.lineHeights.subtitles[1]};
+      --text-transform-subtitles-1: ${({ theme }) => theme.fonts.mobile.transforms.subtitles};
+      --letter-spacing-subtitles-1: ${({ theme }) => theme.fonts.mobile.letterSpacing.subtitles[1]};
+      --line-height-people-listing-gap: ${({ theme }) => theme.spacing[4]};
+
+      --grid-template-columns: calc(${({ theme }) => theme.grid.mobile.margin} - ${({ theme }) =>
+  theme.grid.mobile.gap}) repeat(12, minmax(0, 1fr)) calc(${({ theme }) => theme.grid.mobile.margin} - ${({ theme }) =>
+  theme.grid.mobile.gap});
+      --grid-column-gap: ${({ theme }) => theme.grid.mobile.gap};
+      --grid-margin: ${({ theme }) => theme.grid.mobile.margin};
+
+      --footer-height: ${({ theme }) => theme.footer.mobile.height};
+      --footer-padding-top: ${({ theme }) => theme.footer.mobile.paddingTop};
+      --footer-padding-bottom: ${({ theme }) => theme.footer.mobile.paddingBottom};
+      --footer-items-gap: ${({ theme }) => theme.footer.mobile.itemsGap};
+      --footer-media-gap: ${({ theme }) => theme.footer.mobile.mediaGap};
+      --footer-media-icon-width: ${({ theme }) => theme.footer.mobile.mediaIconWidth};
+      --footer-media-icon-height: ${({ theme }) => theme.footer.mobile.mediaIconHeight};
+      --footer-vertical-spacing-lg: ${({ theme }) => theme.footer.mobile.verticalSpacingLarge};
+      --footer-vertical-spacing-sm: ${({ theme }) => theme.footer.mobile.verticalSpacingSmall};
+    }
+
+    @media ${devices.tablet} {
+      --grid-template-columns: calc(${({ theme }) => theme.grid.tablet.margin} - ${({ theme }) =>
+  theme.grid.tablet.gap}) repeat(12, minmax(0, 1fr)) calc(${({ theme }) => theme.grid.tablet.margin} - ${({ theme }) =>
+  theme.grid.tablet.gap});
+      --grid-column-gap: ${({ theme }) => theme.grid.tablet.gap};
+      --grid-margin: ${({ theme }) => theme.grid.tablet.margin};
+    }
+
+    @media ${devices.desktop} {
+      
+    }
+
+    @media ${devices.largeDesktop} {
+      
+    }
+  }
+`;
+
+export default GlobalStyles;

package/src/styles/StorybookSupport/Colours/Colours.stories.mdx

@@ -0,0 +1,101 @@
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
+import { StorybookColourBox } from './StorybookColourBox';
+import { themes } from '../../themes';
+
+
+<Meta 
+  title="Foundations/Colours"
+  parameters= {{
+    viewMode: 'docs',
+    previewTabs: { 
+      canvas: { hidden: true } 
+    }
+  }}
+/>
+
+
+export const Template = (args) => <div>{args.colourSpecs.map((c, n) => <StorybookColourBox color={c.color} name={c.name} key={`colour_${n}`} />)}</div>
+
+
+# Colours
+
+Colours are split into sections based on use case. There are also themes which should be followed in components which relate to events.
+
+
+## Primary Palette
+
+The primary palette is representative of the core brand colours. These are the colours which should be used to make it instantly recognisable to relatable to the ROH brand.
+
+<Canvas>
+  <Story 
+    name="Primary Palette"
+    args={{
+      colourSpecs: [
+        { color: themes.core.colors.primary, name: 'Core' },
+        { color: themes.core.colors.black, name: 'Black' },
+      ]
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Base Colours
+The base colours are those which are supporting to the primary. The main base colour of the site is white, and there are three tones of grey which can be used. The ‘Light Grey’ and ‘Mid Grey’ should never be used for text as it will fail accessibility. If a grey tone needs to be used the ‘Dark Grey’ should be used.
+
+<Canvas>
+ <Story 
+    name="Base Colours"
+    args={{
+      colourSpecs: [
+        { color: themes.core.colors.white, name: 'White' },
+        { color: themes.core.colors.darkgrey, name: 'Dark Grey' },
+        { color: themes.core.colors.midgrey, name: 'Mid Grey' },
+        { color: themes.core.colors.lightgrey, name: 'Light Grey' },
+      ]
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## States
+
+These are the colour which are used to depict a state such as errors.
+
+<Canvas>
+  <Story 
+    name="States"
+    args={{
+      colourSpecs: [
+        { color: themes.core.colors.error, name: 'Error' },
+        { color: themes.core.colors.medium, name: 'Medium' },
+        { color: themes.core.colors.good, name: 'Good' },
+      ]
+  }}>
+  {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Event Themes
+
+When it comes to event components, these are defined by a colourway system where the accent colour changes.
+
+* In ‘Core’ events, or ‘generic’ content, the theme should be ‘Core’.
+* In all ‘Stream’ events, the theme should be ‘Stream’.
+* In all ‘Cinema’ events, the theme should be ‘Cinema’ which is the black colour.
+
+<Canvas>
+  <Story 
+    name="Event Themes"
+    args={{
+      colourSpecs: [
+        { color: themes.core.colors.primary, name: 'Core' },
+        { color: themes.stream.colors.primary, name: 'Stream' },
+        { color: themes.cinema.colors.primary, name: 'Cinema' },
+      ]
+  }}>
+  {Template.bind({})}
+  </Story>
+</Canvas>
+

package/src/styles/StorybookSupport/Colours/StorybookColourBox.tsx

@@ -0,0 +1,32 @@
+import styled from 'styled-components';
+
+export interface IStorybookColourBoxProps {
+  color: string;
+  name: string;
+}
+
+export const StorybookColourBox = styled.div<IStorybookColourBoxProps>`
+
+  & {
+    align-items: center;
+    background-color: ${({ color }: IStorybookColourBoxProps) => color}
+    border: 4px solid ${({ color }: IStorybookColourBoxProps) => (color === '#FFFFFF' ? '#f0f0f0' : color)}
+    display: inline-block;
+    height: 80px;
+    margin: 20px;
+    width: 180px;
+  }
+
+  &:after {
+    align-items: center;
+    color: ${({ color }: IStorybookColourBoxProps) => color}
+    content: ${({ name }: IStorybookColourBoxProps) => "'" + name + "';"}
+    display: grid;
+    filter: invert(100%) grayscale(100%) brightness(100);
+    height: 100%;
+    margin: auto 0px;
+    text-align: center;
+    vertical-align: middle;
+    width: 100%;
+  }
+`;

package/src/styles/ThemeProvider.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ThemeProvider } from 'styled-components';
+import { themes } from './themes';
+import { IThemeProviderProps } from '../types/types';
+
+const Theme = ({ children, theme }: IThemeProviderProps) => {
+  const chosenTheme = themes[theme];
+  return <ThemeProvider theme={chosenTheme}>{children}</ThemeProvider>;
+};
+
+export default Theme;