@royaloperahouse/chord 0.1.0 → 0.3.0

package/src/styles/GlobalStyles.tsx

@@ -1,205 +0,0 @@
-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

@@ -1,101 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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;