fix: fix for colour page in storybook

Author: stuarthendren

src/docs/colours.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks'
 import {
-  ThemeProvider,
+  ComponentsProvider,
   lightTheme,
   darkTheme,
   Flex,
@@ -16,7 +16,7 @@ import { SemanticColors, Swatch, Colors, Surfaces } from './util'
 
 ### Light
 
-<ThemeProvider local light={lightTheme} choice="light">
+<ComponentsProvider theme={{ local: true, light: lightTheme, choice: 'light' }}>
   <Grid
     css={{
       gridTemplateColumns: '1fr 1fr 1fr',
@@ -39,11 +39,11 @@ import { SemanticColors, Swatch, Colors, Surfaces } from './util'
     <SemanticColors key="success" theme={lightTheme} name="success" />
     <SemanticColors key="info" theme={lightTheme} name="info" />
   </Grid>
-</ThemeProvider>
+</ComponentsProvider>
 
 ### Dark
 
-<ThemeProvider local darkTheme={darkTheme} choice="dark">
+<ComponentsProvider theme={{ local: true, dark: darkTheme, choice: 'dark' }}>
   <Grid
     css={{
       gridTemplateColumns: '1fr 1fr 1fr',
@@ -66,7 +66,7 @@ import { SemanticColors, Swatch, Colors, Surfaces } from './util'
     <SemanticColors key="success" theme={darkTheme} name="success" />
     <SemanticColors key="info" theme={darkTheme} name="info" />
   </Grid>
-</ThemeProvider>
+</ComponentsProvider>
 
 ## Palettes
 
@@ -75,7 +75,7 @@ These are themed and rand from 1-12, with 9 being the pure color from which the
 
 ### Light
 
-<ThemeProvider local light={lightTheme} choice="light">
+<ComponentsProvider theme={{ local: true, light: lightTheme, choice: 'light' }}>
   <Column css={{ p: '$3', py: '$6', backgroundColor: '$paper' }}>
     <Colors key="primary" theme={lightTheme} name="primary" />
     <Colors key="grey" theme={lightTheme} name="grey" />
@@ -85,11 +85,11 @@ These are themed and rand from 1-12, with 9 being the pure color from which the
     <Colors key="info" theme={lightTheme} name="info" />
     <Colors key="transparency" theme={lightTheme} name="transparency" />
   </Column>
-</ThemeProvider>
+</ComponentsProvider>
 
 ### Dark
 
-<ThemeProvider local dark={darkTheme} choice="dark">
+<ComponentsProvider theme={{ local: true, dark: darkTheme, choice: 'dark' }}>
   <Column css={{ p: '$3', py: '$6', backgroundColor: '$paper' }}>
     <Colors key="primary" theme={darkTheme} name="primary" />
     <Colors key="grey" theme={darkTheme} name="grey" />
@@ -99,24 +99,26 @@ These are themed and rand from 1-12, with 9 being the pure color from which the
     <Colors key="info" theme={darkTheme} name="info" />
     <Colors key="transparency" theme={darkTheme} name="transparency" />
   </Column>
-</ThemeProvider>
+</ComponentsProvider>
 
 ## Brand Colors
 
 We use the brand colours within our main color sets differently for light and dark themes but full palettes are provided in both
 themes.
 
 <>
-  <ThemeProvider local light={lightTheme} choice="light">
+  <ComponentsProvider
+    theme={{ local: true, light: lightTheme, choice: 'light' }}
+  >
     <Column css={{ p: '$3', py: '$6', backgroundColor: '$paper' }}>
       <Colors key="brandYellow" theme={lightTheme} name="brandYellow" />
       <Colors key="brandGrey" theme={lightTheme} name="brandGrey" />
     </Column>
-  </ThemeProvider>
-  <ThemeProvider local dark={darkTheme} choice="dark">
+  </ComponentsProvider>
+  <ComponentsProvider theme={{ local: true, dark: darkTheme, choice: 'dark' }}>
     <Column css={{ p: '$3', py: '$6', backgroundColor: '$paper' }}>
       <Colors key="brandYellow" theme={darkTheme} name="brandYellow" />
       <Colors key="brandGrey" theme={darkTheme} name="brandGrey" />
     </Column>
-  </ThemeProvider>
+  </ComponentsProvider>
 </>