feat(accessible teal colour): add accessible teal colour

Add new colour and use it for scroll bar, progress bar, input fields

src/components/atoms/Icon/Icon.md

@@ -26,7 +26,7 @@ import { faCoffee } from '@fortawesome/free-solid-svg-icons';
 
 <>
   <Icon variant={faCoffee} className="mr-6" />
-  <Icon variant={faCoffee} color={colors.brand} className="mr-6" />
+  <Icon variant={faCoffee} color={colors.brandDecorative} className="mr-6" />
   <Icon variant={faCoffee} pulse className="mr-6" />
   <Icon variant={faCoffee} spin className="mr-6" />
   <Icon variant={faCoffee} rotation={180} />

src/components/atoms/List/List/README.md

@@ -6,7 +6,7 @@ Use this component to render a HTML unordered or ordered list of elements with o
 
 ```tsx static
 <List>
-  <List.Item icon={<Icon variant={faCoffee} color={colors.brand} />}>
+  <List.Item icon={<Icon variant={faCoffee} color={colors.brandDecorative} />}>
     <Text as="p">Item One</Text>
   </List.Item>
 </List>
@@ -24,7 +24,7 @@ import { faCoffee } from '@fortawesome/free-solid-svg-icons';
 
 <>
   <List>
-    <List.Item icon={<Icon variant={faCoffee} color={colors.brand} />}>
+    <List.Item icon={<Icon variant={faCoffee} color={colors.brandDecorative} />}>
       <Text as="p" color={colors.greyDark}>
         Item
       </Text>

src/components/atoms/Logo/Logo.tsx

@@ -10,7 +10,7 @@ export interface LogoProps extends React.SVGProps<SVGSVGElement> {
 
 const LogoSvg = styled.path<LogoProps>`
   transition: fill 0.3s ease;
-  fill: ${({ negative }) => (negative ? colors.white : colors.brand)};
+  fill: ${({ negative }) => (negative ? colors.white : colors.brandDecorative)};
 `;
 
 const Logo = ({ negative, ...rest }: LogoProps) => (

src/components/molecules/Help/Help.tsx

@@ -95,7 +95,7 @@ const Help = ({
             <Card.Content>
               <FlexRow>
                 <FlexColCenter xs={3} align="center">
-                  <Icon variant={faPhone} color={colors.brand} size="3x" />
+                  <Icon variant={faPhone} color={colors.brandDecorative} size="3x" />
                 </FlexColCenter>
                 <FlexCol xs={9}>
                   <Card.Heading>{HelpLineDetails[helpLine].telephone.label}</Card.Heading>
@@ -117,7 +117,7 @@ const Help = ({
             <Card.Content>
               <FlexRow>
                 <FlexColCenter xs={3} align="center">
-                  <Icon variant={faEnvelope} color={colors.brand} size="3x" />
+                  <Icon variant={faEnvelope} color={colors.brandDecorative} size="3x" />
                 </FlexColCenter>
                 <FlexCol xs={9}>
                   <Card.Heading>contactus@zopa.com</Card.Heading>

src/components/organisms/Card/README.md

@@ -315,7 +315,7 @@ import { faPiggyBank, faChevronRight } from '@fortawesome/free-solid-svg-icons';
     <FlexCol xs={6}>
       <Card styling="action" layout="horizontal">
         <Card.LineItem>
-          <Icon variant={faPiggyBank} color={colors.brand} size="2x" className="ml-4" />
+          <Icon variant={faPiggyBank} color={colors.brandDecorative} size="2x" className="ml-4" />
         </Card.LineItem>
         <Card.Content className="py-6 pl-1">
           <Card.Heading className="mb-1">Card with additional line item</Card.Heading>

src/components/organisms/Carousel/CarouselSlideIcon/CarouselSlideIcon.tsx

@@ -5,6 +5,6 @@ import Icon, { IconProps } from '../../../atoms/Icon/Icon';
 
 const StyledIcon = styled(Icon).attrs<IconProps>({ className: 'm-4' })``;
 
-const SlideIcon = (props: IconProps) => <StyledIcon color={colors.brand} size="lg" {...props} />;
+const SlideIcon = (props: IconProps) => <StyledIcon color={colors.brandDecorative} size="lg" {...props} />;
 
 export default SlideIcon;

src/components/organisms/Navbar/Navbar/Navbar.tsx

@@ -366,7 +366,7 @@ const NavbarWrapper = ({
                 >
                   <Icon
                     variant={faBars}
-                    color={open ? colors.brand : colors.white}
+                    color={open ? colors.brandDecorative : colors.white}
                     width="20px"
                     height="20px"
                     size="1x"
@@ -376,7 +376,7 @@ const NavbarWrapper = ({
                 <IconContainer theme={theme} />
               )}
               <LogoContainer theme={theme}>
-                {theme.navbar.logo.render && <Logo color={colors.brand} height="20px" negative />}
+                {theme.navbar.logo.render && <Logo color={colors.brandDecorative} height="20px" negative />}
                 {overlayLogoWith}
               </LogoContainer>
               {withCTA ? cta : <IconContainer theme={theme} />}

src/components/styles/Theme/ThemeProvider.tsx

@@ -272,7 +272,7 @@ library.add(fas);
 export const zopaTheme: AppTheme = {
   alert: {
     brand: {
-      icon: colors.brand,
+      icon: colors.brandDecorative,
       background: colors.brandLight,
       border: 'none',
       text: colors.greyDarkest,
@@ -346,7 +346,7 @@ export const zopaTheme: AppTheme = {
       headingSize: typography.sizes.heading.h6,
       textSize: typography.sizes.text.small,
       boxShadowStyle: 'none',
-      borderStyle: `1px solid ${colors.brand}`,
+      borderStyle: `1px solid ${colors.brandDecorative}`,
       backgroundStyle: `${colors.brandLight};`,
       borderRadius: '12px',
     },
@@ -458,7 +458,7 @@ export const zopaTheme: AppTheme = {
     },
     mobile: {
       minHeight: 'auto',
-      bgColor: colors.brand,
+      bgColor: colors.brandDecorative,
     },
   },
   progressBar: {

src/constants/colors.ts

@@ -1,7 +1,8 @@
 const brandColors = {
-  brand: '#00D9C5',
+  brand: '#009E8E',
   brandDark: '#063737',
   brandLight: '#ECFCF9',
+  brandDecorative: '#00D9C5',
 } as const;
 
 const actionColors = {