Updating new headers #1232 (#1469)

* Header colour update in support of #1232.

* Removes unneccessary import.

* Updates colour specifications for header themes.

* Adds opacity to gradient definitions and updates colours.

* Quickfix to Library colors.

* Splits wave colour out into another variable.

packages/core/src/layout/Header/Header.stories.tsx

@@ -86,7 +86,7 @@ export const App = () => (
 );
 
 export const Other = () => (
-  <Page theme={pageTheme.library}>
+  <Page theme={pageTheme.other}>
     <Header title="Other/generic component page" type="other">
       {labels}
     </Header>

packages/core/src/layout/Header/Waves.tsx

@@ -37,7 +37,9 @@ type Props = {
 
 export const Waves: FC<Props> = ({ theme }) => {
   const classes = useStyles();
-  const [color1, color2] = theme.gradient.colors;
+  const [backgroundColor1, backgroundColor2] = theme.gradient.colors;
+  const waveColor = theme.gradient.waveColor;
+  const [opacityStart, opacityStop] = theme.gradient.opacity;
 
   return (
     <svg
@@ -48,7 +50,7 @@ export const Waves: FC<Props> = ({ theme }) => {
       className={classes.wave}
       data-testid="wave-svg"
     >
-      <rect width="1440" height="94" fill="url(#paint0_linear)" />
+      <rect width="1440" height="94" fill="url(#headerGradient)" />
       <g opacity="0.8">
         <mask
           id="mask0"
@@ -59,7 +61,7 @@ export const Waves: FC<Props> = ({ theme }) => {
           width="1440"
           height="94"
         >
-          <rect width="1440" height="94" fill={color1} />
+          <rect width="1440" height="94" fill="#1F8A77" />
         </mask>
         <g mask="url(#mask0)">
           <path
@@ -81,6 +83,10 @@ export const Waves: FC<Props> = ({ theme }) => {
         </g>
       </g>
       <defs>
+        <linearGradient id="headerGradient">
+          <stop offset="0%" stopColor={backgroundColor1} />
+          <stop offset="100" stopColor={backgroundColor2} />
+        </linearGradient>
         <linearGradient
           id="paint0_linear"
           x1="7.21415e-07"
@@ -89,7 +95,8 @@ export const Waves: FC<Props> = ({ theme }) => {
           y2="59.5001"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor={color1} />
+          <stop stopColor={waveColor} stopOpacity={opacityStart} />
+          <stop offset="1" stopColor={waveColor} stopOpacity={opacityStop} />
         </linearGradient>
         <linearGradient
           id="paint1_linear"
@@ -99,8 +106,8 @@ export const Waves: FC<Props> = ({ theme }) => {
           y2="241.925"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor={color2} stopOpacity="0.72" />
-          <stop offset="1" stopColor={color2} stopOpacity="0" />
+          <stop stopColor={waveColor} stopOpacity={opacityStart} />
+          <stop offset="1" stopColor={waveColor} stopOpacity={opacityStop} />
         </linearGradient>
         <linearGradient
           id="paint2_linear"
@@ -110,8 +117,8 @@ export const Waves: FC<Props> = ({ theme }) => {
           y2="-103.806"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor={color2} stopOpacity="0.72" />
-          <stop offset="1" stopColor={color2} stopOpacity="0" />
+          <stop stopColor={waveColor} stopOpacity={opacityStart} />
+          <stop offset="1" stopColor={waveColor} stopOpacity={opacityStop} />
         </linearGradient>
         <linearGradient
           id="paint3_linear"
@@ -121,8 +128,8 @@ export const Waves: FC<Props> = ({ theme }) => {
           y2="104.375"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor={color2} stopOpacity="0.72" />
-          <stop offset="1" stopColor={color2} stopOpacity="0" />
+          <stop stopColor={waveColor} stopOpacity={opacityStart} />
+          <stop offset="1" stopColor={waveColor} stopOpacity={opacityStop} />
         </linearGradient>
         <linearGradient
           id="paint4_linear"
@@ -132,8 +139,8 @@ export const Waves: FC<Props> = ({ theme }) => {
           y2="194.894"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor={color2} stopOpacity="0.72" />
-          <stop offset="1" stopColor={color2} stopOpacity="0" />
+          <stop stopColor={waveColor} stopOpacity={opacityStart} />
+          <stop offset="1" stopColor={waveColor} stopOpacity={opacityStop} />
         </linearGradient>
       </defs>
     </svg>

packages/core/src/layout/Page/PageThemeProvider.ts

@@ -16,6 +16,8 @@
 
 export type Gradient = {
   colors: string[];
+  waveColor: string;
+  opacity: string[];
 };
 
 export type PageTheme = {
@@ -23,59 +25,45 @@ export type PageTheme = {
 };
 
 export const gradients: Record<string, Gradient> = {
-  blue: {
-    colors: ['#2D46B9', '#509BF5'],
+  darkGrey: {
+    colors: ['#181818', '#404040'],
+    waveColor: '#757575',
+    opacity: ['1.0', '0.0'],
   },
-  darkBlue: {
-    colors: ['#1E3264', '#A0C3D2'],
+  marineBlue: {
+    colors: ['#00759A', '#004EAC'],
+    waveColor: '#BDDBFF',
+    opacity: ['0.72', '0.0'],
   },
-  brown: {
-    colors: ['#674638', '#C39887'],
+  veryBlue: {
+    colors: ['#0B2B9C', '#311288'],
+    waveColor: '#8960FD',
+    opacity: ['0.72', '0.0'],
   },
-  green: {
-    colors: ['#1DB954', '#006350'],
+  rubyRed: {
+    colors: ['#A4284B', '#8D1134'],
+    waveColor: '#FFBFF5',
+    opacity: ['0.28', '0.10'],
   },
-  orangeYellow: {
-    colors: ['#FF6437', '#FFC864'],
+  toastyOrange: {
+    colors: ['#CC3707', '#9A2500'],
+    waveColor: '#FF784E',
+    opacity: ['0.72', '0.0'],
   },
-  redOrange: {
-    colors: ['#A72525', '#E6542D'],
-  },
-  pinkOrange: {
-    colors: ['#F13DA2', '#FF8A48'],
-  },
-  purpleBlue: {
-    colors: ['#2D00AA', '#C769B5'],
-  },
-  tealGreen: {
-    colors: ['#19E68C', '#1D7F6E'],
-  },
-  violetPeach: {
-    colors: ['#B39AC8', '#FCCBD3'],
-  },
-  violetGreen: {
-    colors: ['#4302F4', '#C3EFC8'],
-  },
-  purple: {
-    colors: ['#a186bd', '#7c5c92'],
+  purpleSky: {
+    colors: ['#AF29F8', '#4100F4'],
+    waveColor: '#AF29F8',
+    opacity: ['0.72', '0.0'],
   },
   eveningSea: {
     colors: ['#00FFF2', '#035355'],
-  },
-  royalBlue: {
-    colors: ['#000044', '#4B80D4'],
-  },
-  grey: {
-    colors: ['#111111', '#777777'],
-  },
-  sunset: {
-    colors: ['#cf8022', '#4e6ec7'],
-  },
-  sky: {
-    colors: ['#69B9FF', '#ACCEEC'],
+    waveColor: '',
+    opacity: ['0.72', '0.0'],
   },
   teal: {
-    colors: ['#005E4D', '#9BF0E1'],
+    colors: ['#005E4D', '#004E40'],
+    waveColor: '#9BF0E1',
+    opacity: ['0.72', '0.0'],
   },
 };
 
@@ -87,21 +75,21 @@ export const pageTheme: Record<string, PageTheme> = {
     gradient: gradients.eveningSea,
   },
   tool: {
-    gradient: gradients.purpleBlue,
+    gradient: gradients.purpleSky,
   },
   service: {
-    gradient: gradients.green,
+    gradient: gradients.marineBlue,
   },
   website: {
-    gradient: gradients.purple,
+    gradient: gradients.veryBlue,
   },
   library: {
-    gradient: gradients.sunset,
+    gradient: gradients.rubyRed,
   },
   other: {
-    gradient: gradients.brown,
+    gradient: gradients.darkGrey,
   },
   app: {
-    gradient: gradients.redOrange,
+    gradient: gradients.toastyOrange,
   },
 };