From b7b1561750ea3dd5a2f9c940dfea29e5e1181a06 Mon Sep 17 00:00:00 2001
From: evgenitsn <evgeni.nikolov@news.co.uk>
Date: Thu, 1 Dec 2022 15:19:50 +0200
Subject: [PATCH] docs(PPDSC-2474): add overrides storybook themes support

---
 src/banner/__tests__/banner.stories.tsx       |  12 +-
 src/block/__tests__/block.stories.tsx         |  14 +-
 .../__tests__/character-count.stories.tsx     | 204 ++++++++++--------
 src/divider/__tests__/divider.stories.tsx     |  67 +++---
 src/test/theme-select-object.ts               |  75 +++++--
 .../themes/storybook-newskit-dark/colors.json |  72 +++++++
 .../storybook-newskit-dark-theme.ts           |   9 +
 .../storybook-newskit-light/colors.json       | 178 +++++++++++++++
 .../storybook-newskit-light-theme.ts          |   9 +
 9 files changed, 508 insertions(+), 132 deletions(-)
 create mode 100644 src/theme-checker/themes/storybook-newskit-dark/colors.json
 create mode 100644 src/theme-checker/themes/storybook-newskit-dark/storybook-newskit-dark-theme.ts
 create mode 100644 src/theme-checker/themes/storybook-newskit-light/colors.json
 create mode 100644 src/theme-checker/themes/storybook-newskit-light/storybook-newskit-light-theme.ts

diff --git a/src/banner/__tests__/banner.stories.tsx b/src/banner/__tests__/banner.stories.tsx
index c07137289d..76f97d0c9e 100644
--- a/src/banner/__tests__/banner.stories.tsx
+++ b/src/banner/__tests__/banner.stories.tsx
@@ -313,9 +313,9 @@ export const StoryLogicalProps = () => (
 );
 StoryLogicalProps.storyName = 'Logical props';
 
-export const StoryOverrides = () => (
+export const StoryStylingOverrides = () => (
   <StorybookPage columns={BANNER_GRID_COLS}>
-    <StorybookCase title="Overrides">
+    <StorybookCase title="Style">
       <div style={{maxWidth: 400}}>
         <StoryBanner
           aria-label="Banner with overrides"
@@ -373,7 +373,7 @@ export const StoryOverrides = () => (
     </StorybookCase>
   </StorybookPage>
 );
-StoryOverrides.storyName = 'Overrides';
+StoryStylingOverrides.storyName = 'Styling overrides';
 
 export default {
   title: 'Components/Banner',
@@ -387,11 +387,15 @@ export default {
     },
   },
   decorators: [
-    (Story: StoryType, context: {globals: {backgrounds: {value: string}}}) => (
+    (
+      Story: StoryType,
+      context: {name: string; globals: {backgrounds: {value: string}}},
+    ) => (
       <ThemeProvider
         theme={createCustomThemeWithBaseThemeSwitch(
           context?.globals?.backgrounds?.value,
           bannerCustomThemeObject,
+          context?.name,
         )}
       >
         <Story />
diff --git a/src/block/__tests__/block.stories.tsx b/src/block/__tests__/block.stories.tsx
index 30976a9d74..59bfee25fc 100644
--- a/src/block/__tests__/block.stories.tsx
+++ b/src/block/__tests__/block.stories.tsx
@@ -141,7 +141,7 @@ export const StoryTransitions = () => (
 );
 StoryTransitions.storyName = 'Transitions';
 
-export const StoryOverrides = () => (
+export const StoryStylingOverrides = () => (
   <StorybookPage columns={blockGridCols}>
     <StorybookCase title="Style">
       <Block stylePreset="blockWrapper">
@@ -158,6 +158,12 @@ export const StoryOverrides = () => (
         </Block>
       </Block>
     </StorybookCase>
+  </StorybookPage>
+);
+StoryStylingOverrides.storyName = 'Styling overrides';
+
+export const StoryOverrides = () => (
+  <StorybookPage columns={blockGridCols}>
     <StorybookCase title="Logical props">
       <Block stylePreset="blockWrapper">
         <Block
@@ -186,11 +192,15 @@ export default {
     },
   },
   decorators: [
-    (Story: StoryType, context: {globals: {backgrounds: {value: string}}}) => (
+    (
+      Story: StoryType,
+      context: {name: string; globals: {backgrounds: {value: string}}},
+    ) => (
       <ThemeProvider
         theme={createCustomThemeWithBaseThemeSwitch(
           context?.globals?.backgrounds?.value,
           blockCustomThemeObject,
+          context?.name,
         )}
       >
         <Story />
diff --git a/src/character-count/__tests__/character-count.stories.tsx b/src/character-count/__tests__/character-count.stories.tsx
index 072b537bb2..1724aeedbd 100644
--- a/src/character-count/__tests__/character-count.stories.tsx
+++ b/src/character-count/__tests__/character-count.stories.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {useRef, useState} from 'react';
+import {Story as StoryType} from '@storybook/react';
 import {CharacterCount, CharacterCountProps} from '..';
 import {
   Form,
@@ -14,17 +15,29 @@ import {TextArea, TextAreaProps} from '../../text-area';
 import {Label} from '../../label';
 import {TextField, TextFieldSize} from '../../text-field';
 import {FormInputState} from '../../form/types';
-import {createTheme, newskitLightTheme, ThemeProvider} from '../../theme';
+import {CreateThemeArgs, newskitLightTheme, ThemeProvider} from '../../theme';
 import {deepMerge} from '../../utils';
 import {StorybookCase, StorybookPage} from '../../test/storybook-comps';
+import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object';
 
-export default {
-  title: 'Components/Character count',
-  parameters: {
-    nkDocs: {
-      title: 'Character count',
-      description:
-        'The Character count lets users know how much text they can enter in an input field as they type.',
+const myCustomTheme: CreateThemeArgs = {
+  name: 'my-custom-theme',
+  overrides: {
+    stylePresets: {
+      characterCountCustom: {
+        base: {
+          color: '{{colors.inkBrand010}}',
+        },
+      },
+      textAreaCustom: deepMerge(newskitLightTheme.stylePresets.inputField, {
+        base: {
+          borderWidth: '{{borders.borderWidth020}}',
+          borderRadius: '{{borders.borderRadiusRounded030}}',
+          borderColor: '{{colors.teal060}}',
+          placeholderColor: '{{colors.teal060}}',
+          color: '{{colors.teal060}}',
+        },
+      }),
     },
   },
 };
@@ -286,93 +299,106 @@ export const CharacterCountForm = () => (
 );
 CharacterCountForm.storyName = 'Form with submit validation';
 
-const myCustomTheme = createTheme({
-  name: 'my-custom-theme',
-  overrides: {
-    stylePresets: {
-      characterCountCustom: {
-        base: {
-          color: '{{colors.teal060}}',
-        },
-      },
-      textAreaCustom: deepMerge(newskitLightTheme.stylePresets.inputField, {
-        base: {
-          borderWidth: '{{borders.borderWidth020}}',
-          borderRadius: '{{borders.borderRadiusRounded030}}',
-          borderColor: '{{colors.teal060}}',
-          placeholderColor: '{{colors.teal060}}',
-          color: '{{colors.teal060}}',
-        },
-      }),
-    },
-  },
-});
+export const CharacterCountStylingOverrides = () => {
+  const styleRef = useRef<HTMLTextAreaElement>(null);
+  return (
+    <StorybookPage>
+      <StorybookCase title="Style">
+        <Label htmlFor="style" overrides={{stylePreset: 'inkBrand010'}}>
+          Label
+        </Label>
+        <TextArea
+          placeholder="Placeholder"
+          id="style"
+          ref={styleRef}
+          maxLength={200}
+          overrides={{stylePreset: 'textAreaCustom'}}
+        />
+        <CharacterCount
+          inputRef={styleRef}
+          overrides={{stylePreset: 'characterCountCustom'}}
+        />
+      </StorybookCase>
+    </StorybookPage>
+  );
+};
+CharacterCountStylingOverrides.storyName = 'Styling overrides';
 
 export const CharacterCountOverrides = () => {
-  const styleRef = useRef<HTMLTextAreaElement>(null);
   const logicalPropsRef = useRef<HTMLTextAreaElement>(null);
   const minHeightRef = useRef<HTMLTextAreaElement>(null);
   const formatRef = useRef<HTMLTextAreaElement>(null);
   return (
-    <ThemeProvider theme={myCustomTheme}>
-      <StorybookPage>
-        <StorybookCase title="Style">
-          <Label htmlFor="style">Label</Label>
-          <TextArea
-            placeholder="Placeholder"
-            id="style"
-            ref={styleRef}
-            maxLength={200}
-            overrides={{stylePreset: 'textAreaCustom'}}
-          />
-          <CharacterCount
-            inputRef={styleRef}
-            overrides={{stylePreset: 'characterCountCustom'}}
-          />
-        </StorybookCase>
-        <StorybookCase title="Logical props">
-          <Label htmlFor="logicalProps">Label</Label>
-          <TextArea
-            placeholder="Placeholder"
-            id="logicalProps"
-            ref={logicalPropsRef}
-            maxLength={20}
-          />
-          <CharacterCount
-            inputRef={logicalPropsRef}
-            overrides={{marginBlock: 'space040', paddingInline: 'space060'}}
-          />
-        </StorybookCase>
-        <StorybookCase title="Min height">
-          <Label htmlFor="minHeight">Label</Label>
-          <TextArea
-            placeholder="Placeholder"
-            id="minHeight"
-            ref={minHeightRef}
-            maxLength={200}
-          />
-          <CharacterCount
-            inputRef={minHeightRef}
-            overrides={{minHeight: '80px'}}
-          />
-        </StorybookCase>
-        <StorybookCase title="Custom format">
-          <Label htmlFor="format">Label</Label>
-          <TextArea
-            placeholder="Placeholder"
-            id="format"
-            ref={formatRef}
-            minLength={20}
-          />
-          <CharacterCount
-            inputRef={formatRef}
-            format={({minLength, currentLength}) =>
-              `You need to input at least ${minLength} characters but so far you've only entered ${currentLength}!`
-            }
-          />
-        </StorybookCase>
-      </StorybookPage>
-    </ThemeProvider>
+    <StorybookPage>
+      <StorybookCase title="Logical props">
+        <Label htmlFor="logicalProps">Label</Label>
+        <TextArea
+          placeholder="Placeholder"
+          id="logicalProps"
+          ref={logicalPropsRef}
+          maxLength={20}
+        />
+        <CharacterCount
+          inputRef={logicalPropsRef}
+          overrides={{marginBlock: 'space040', paddingInline: 'space060'}}
+        />
+      </StorybookCase>
+      <StorybookCase title="Min height">
+        <Label htmlFor="minHeight">Label</Label>
+        <TextArea
+          placeholder="Placeholder"
+          id="minHeight"
+          ref={minHeightRef}
+          maxLength={200}
+        />
+        <CharacterCount
+          inputRef={minHeightRef}
+          overrides={{minHeight: '80px'}}
+        />
+      </StorybookCase>
+      <StorybookCase title="Custom format">
+        <Label htmlFor="format">Label</Label>
+        <TextArea
+          placeholder="Placeholder"
+          id="format"
+          ref={formatRef}
+          minLength={20}
+        />
+        <CharacterCount
+          inputRef={formatRef}
+          format={({minLength, currentLength}) =>
+            `You need to input at least ${minLength} characters but so far you've only entered ${currentLength}!`
+          }
+        />
+      </StorybookCase>
+    </StorybookPage>
   );
 };
 CharacterCountOverrides.storyName = 'Overrides';
+
+export default {
+  title: 'Components/Character count',
+  parameters: {
+    nkDocs: {
+      title: 'Character count',
+      description:
+        'The Character count lets users know how much text they can enter in an input field as they type.',
+    },
+  },
+  decorators: [
+    (
+      Story: StoryType,
+      context: {name: string; globals: {backgrounds: {value: string}}},
+    ) => (
+      <ThemeProvider
+        theme={createCustomThemeWithBaseThemeSwitch(
+          context?.globals?.backgrounds?.value,
+          myCustomTheme,
+          context?.name,
+        )}
+      >
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
+};
diff --git a/src/divider/__tests__/divider.stories.tsx b/src/divider/__tests__/divider.stories.tsx
index e19a0eb7cd..4d28f96155 100644
--- a/src/divider/__tests__/divider.stories.tsx
+++ b/src/divider/__tests__/divider.stories.tsx
@@ -1,13 +1,14 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
-import {ThemeProvider} from '@emotion/react';
+import {Story as StoryType} from '@storybook/react';
 import {Divider, DividerProps} from '..';
 import {StorybookCase, StorybookPage} from '../../test/storybook-comps';
 import {Stack} from '../../stack';
 import {Block} from '../../block';
 import {StackChild} from '../../stack-child';
 import {getSizingCssFromTheme, getColorCssFromTheme} from '../../utils/style';
-import {compileTheme, createTheme} from '../../theme';
+import {ThemeProvider, CreateThemeArgs} from '../../theme';
+import {createCustomThemeWithBaseThemeSwitch} from '../../test/theme-select-object';
 
 const Box = styled.div<{isMarginRight?: boolean; transparent?: boolean}>`
   display: inline-block;
@@ -44,22 +45,20 @@ const verticalCols = {
   md: '1fr 1fr',
 };
 
-const myCustomTheme = compileTheme(
-  createTheme({
-    name: 'my-custom-theme',
-    overrides: {
-      stylePresets: {
-        customDivider: {
-          base: {
-            borderStyle: 'solid',
-            borderColor: '{{colors.amber060}}',
-            borderWidth: '{{borders.borderWidth030}}',
-          },
+const myCustomTheme: CreateThemeArgs = {
+  name: 'my-custom-theme',
+  overrides: {
+    stylePresets: {
+      customDivider: {
+        base: {
+          borderStyle: 'solid',
+          borderColor: '{{colors.inkBrand010}}',
+          borderWidth: '{{borders.borderWidth030}}',
         },
       },
     },
-  }),
-);
+  },
+};
 
 export const StoryDividerDefault = () => (
   <StorybookPage columns={{md: 'auto'}}>
@@ -158,7 +157,18 @@ export const StoryResponsive = () => (
 );
 StoryResponsive.storyName = 'Breakpoint';
 
-export const StoryLogicalPropsOverrides = () => (
+export const StoryStylingOverrides = () => (
+  <StorybookPage columns={dividerCols}>
+    <StorybookCase title="Style">
+      <Box transparent>
+        <Divider vertical overrides={{stylePreset: 'customDivider'}} />
+      </Box>
+    </StorybookCase>
+  </StorybookPage>
+);
+StoryStylingOverrides.storyName = 'Styling overrides';
+
+export const StoryOverrides = () => (
   <StorybookPage columns={dividerCols}>
     <StorybookCase title="Padding overrides">
       <BlockForDivider paddingInline="space030" />
@@ -174,16 +184,9 @@ export const StoryLogicalPropsOverrides = () => (
       />
       <BlockForDivider marginInline="space030" />
     </StorybookCase>
-    <StorybookCase title="Styling">
-      <ThemeProvider theme={myCustomTheme}>
-        <Box transparent>
-          <Divider vertical overrides={{stylePreset: 'customDivider'}} />
-        </Box>
-      </ThemeProvider>
-    </StorybookCase>
   </StorybookPage>
 );
-StoryLogicalPropsOverrides.storyName = 'Overrides';
+StoryOverrides.storyName = 'Overrides';
 
 export default {
   title: 'Components/Divider',
@@ -196,4 +199,20 @@ export default {
         'A divider is used to provide visual separation of different content. Dividers can be applied vertically or horizontally.',
     },
   },
+  decorators: [
+    (
+      Story: StoryType,
+      context: {name: string; globals: {backgrounds: {value: string}}},
+    ) => (
+      <ThemeProvider
+        theme={createCustomThemeWithBaseThemeSwitch(
+          context?.globals?.backgrounds?.value,
+          myCustomTheme,
+          context?.name,
+        )}
+      >
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
 };
diff --git a/src/test/theme-select-object.ts b/src/test/theme-select-object.ts
index 8620870911..bc285620ed 100644
--- a/src/test/theme-select-object.ts
+++ b/src/test/theme-select-object.ts
@@ -1,44 +1,93 @@
 import {
   newskitLightTheme,
-  newskitDarkTheme,
   UncompiledTheme,
   createTheme,
   CreateThemeArgs,
+  newskitDarkTheme,
 } from '..';
 import {tnlTheme} from '../theme-checker/themes/tnl-theme/tnl-theme';
 import {virginTheme} from '../theme-checker/themes/virgin-theme/virgin-theme';
 import {sunTheme} from '../theme-checker/themes/sun-theme/sun-theme';
+import {storybookNewskitLightTheme} from '../theme-checker/themes/storybook-newskit-light/storybook-newskit-light-theme';
+import {storybookNewskitDarkTheme} from '../theme-checker/themes/storybook-newskit-dark/storybook-newskit-dark-theme';
+
+const STYLING_OVERRIDES = 'Styling overrides';
+const THEME_KEYS = {
+  transparent: 'transparent',
+  storybookLight: 'storybookOverridesLight',
+  storybookDark: 'storybookOverridesDark',
+  newskitLight: '#ffffff',
+  newskitDark: '#2E2E2E',
+  sun: '#eb1801',
+  virgin: '#e10a0a',
+  tnl: '#006699',
+};
 
-export const themeObject: {[key: string]: UncompiledTheme} = {
-  transparent: newskitLightTheme,
-  '#ffffff': newskitLightTheme,
-  '#2E2E2E': newskitDarkTheme,
-  '#eb1801': sunTheme,
-  '#e10a0a': virginTheme,
-  '#006699': tnlTheme,
+export const themeObject = {
+  [THEME_KEYS.transparent]: newskitLightTheme,
+  [THEME_KEYS.storybookLight]: storybookNewskitLightTheme,
+  [THEME_KEYS.storybookDark]: storybookNewskitDarkTheme,
+  [THEME_KEYS.newskitLight]: newskitLightTheme,
+  [THEME_KEYS.newskitDark]: newskitDarkTheme,
+  [THEME_KEYS.sun]: sunTheme,
+  [THEME_KEYS.virgin]: virginTheme,
+  [THEME_KEYS.tnl]: tnlTheme,
 };
 
-export const getThemeObject = (key: string): UncompiledTheme => {
+const isLightTheme = (key: string) => key === THEME_KEYS.newskitLight;
+const isDarkTheme = (key: string) => key === THEME_KEYS.newskitDark;
+const isTransparentTheme = (key: string) => key === THEME_KEYS.transparent;
+
+export const getThemeObject = (
+  key: string,
+  scenarioName?: string,
+): UncompiledTheme => {
+  const isScenarioStylingOverrides = scenarioName === STYLING_OVERRIDES;
+
   if (!key) {
     const themeKey = localStorage.getItem('themeKey');
     if (themeKey) {
+      if (isScenarioStylingOverrides) {
+        if (isLightTheme(themeKey)) {
+          return themeObject[THEME_KEYS.storybookLight];
+        }
+        if (isDarkTheme(themeKey)) {
+          return themeObject[THEME_KEYS.storybookDark];
+        }
+      }
       return themeObject[themeKey];
     }
-    return themeObject.transparent;
+
+    return isScenarioStylingOverrides
+      ? themeObject[THEME_KEYS.storybookLight]
+      : themeObject[THEME_KEYS.transparent];
   }
-  if (key === 'transparent') {
+
+  if (isTransparentTheme(key)) {
     localStorage.removeItem('themeKey');
   } else {
     localStorage.setItem('themeKey', key);
   }
+
+  if (
+    (isLightTheme(key) || isTransparentTheme(key)) &&
+    isScenarioStylingOverrides
+  ) {
+    return themeObject[THEME_KEYS.storybookLight];
+  }
+  if (isDarkTheme(key) && isScenarioStylingOverrides) {
+    return themeObject[THEME_KEYS.storybookDark];
+  }
+
   return themeObject[key];
 };
 
 export const createCustomThemeWithBaseThemeSwitch = (
-  key: string,
+  themeKey: string,
   customThemeArgs: CreateThemeArgs,
+  scenarioName?: string,
 ): UncompiledTheme =>
   createTheme({
     ...customThemeArgs,
-    baseTheme: getThemeObject(key),
+    baseTheme: getThemeObject(themeKey, scenarioName),
   });
diff --git a/src/theme-checker/themes/storybook-newskit-dark/colors.json b/src/theme-checker/themes/storybook-newskit-dark/colors.json
new file mode 100644
index 0000000000..8a2871945f
--- /dev/null
+++ b/src/theme-checker/themes/storybook-newskit-dark/colors.json
@@ -0,0 +1,72 @@
+{
+  "inkBrand020": "{{colors.amber030}}",
+  "inkBrand010": "{{colors.amber010}}",
+  "inkInformative": "{{colors.teal050}}",
+  "inkNotice": "{{colors.neutral040}}",
+  "inkNegative": "{{colors.red050}}",
+  "inkPositive": "{{colors.green050}}",
+  "inkDark010": "{{colors.neutral100}}",
+  "inkLight010": "{{colors.white}}",
+  "inkInverse": "{{colors.neutral100}}",
+  "inkNonEssential": "{{colors.neutral050}}",
+  "inkBase": "{{colors.neutral020}}",
+  "inkSubtle": "{{colors.neutral040}}",
+  "inkContrast": "{{colors.white}}",
+  "interfaceSkeleton020": "{{colors.neutral080}}",
+  "interfaceSkeleton010": "{{colors.neutral090}}",
+  "interfaceNeutral020": "{{colors.amber080}}",
+  "interfaceNeutral010": "{{colors.amber030}}",
+  "interfaceInformative020": "{{colors.amber070}}",
+  "interfaceInformative010": "{{colors.amber050}}",
+  "interfaceNotice020": "{{colors.neutral080}}",
+  "interfaceNotice010": "{{colors.neutral030}}",
+  "interfaceNegative020": "{{colors.red090}}",
+  "interfaceNegative010": "{{colors.red050}}",
+  "interfacePositive020": "{{colors.green090}}",
+  "interfacePositive010": "{{colors.green050}}",
+  "interfaceBrand020": "{{colors.teal030}}",
+  "interfaceBrand010": "{{colors.teal050}}",
+  "interface060": "{{colors.neutral030}}",
+  "interface050": "{{colors.neutral050}}",
+  "interface040": "{{colors.neutral060}}",
+  "interface030": "{{colors.neutral070}}",
+  "interface020": "{{colors.neutral080}}",
+  "interface010": "{{colors.teal090}}",
+  "interfaceBackground": "{{colors.neutral100}}",
+  "interactiveInput050": "{{colors.teal030}}",
+  "interactiveInput040": "{{colors.teal050}}",
+  "interactiveInput030": "{{colors.teal070}}",
+  "interactiveInput020": "{{colors.teal055}}",
+  "interactiveInput010": "{{colors.teal030}}",
+  "interactiveFocus010": "{{colors.purple055}}",
+  "interactiveVisited010": "{{colors.blue055}}",
+  "interactiveDisabled010": "{{colors.neutral080}}",
+  "interactiveLink030": "{{colors.teal030}}",
+  "interactiveLink020": "{{colors.teal040}}",
+  "interactiveLink010": "{{colors.teal055}}",
+  "interactiveInverse050": "{{colors.blackTint080}}",
+  "interactiveInverse040": "{{colors.blackTint070}}",
+  "interactiveInverse030": "{{colors.blackTint090}}",
+  "interactiveInverse020": "{{colors.blackTint020}}",
+  "interactiveInverse010": "{{colors.blackTint010}}",
+  "interactiveNegative050": "{{colors.red030}}",
+  "interactiveNegative040": "{{colors.red040}}",
+  "interactiveNegative030": "{{colors.red050}}",
+  "interactiveNegative020": "{{colors.red080}}",
+  "interactiveNegative010": "{{colors.red090}}",
+  "interactivePositive050": "{{colors.green030}}",
+  "interactivePositive040": "{{colors.green040}}",
+  "interactivePositive030": "{{colors.green050}}",
+  "interactivePositive020": "{{colors.green080}}",
+  "interactivePositive010": "{{colors.green090}}",
+  "interactiveSecondary050": "{{colors.amber050}}",
+  "interactiveSecondary040": "{{colors.amber040}}",
+  "interactiveSecondary030": "{{colors.amber030}}",
+  "interactiveSecondary020": "{{colors.amber070}}",
+  "interactiveSecondary010": "{{colors.amber080}}",
+  "interactivePrimary050": "{{colors.teal030}}",
+  "interactivePrimary040": "{{colors.teal040}}",
+  "interactivePrimary030": "{{colors.teal050}}",
+  "interactivePrimary020": "{{colors.teal070}}",
+  "interactivePrimary010": "{{colors.teal080}}"
+}
\ No newline at end of file
diff --git a/src/theme-checker/themes/storybook-newskit-dark/storybook-newskit-dark-theme.ts b/src/theme-checker/themes/storybook-newskit-dark/storybook-newskit-dark-theme.ts
new file mode 100644
index 0000000000..1420bde054
--- /dev/null
+++ b/src/theme-checker/themes/storybook-newskit-dark/storybook-newskit-dark-theme.ts
@@ -0,0 +1,9 @@
+import colors from './colors.json';
+import {createTheme} from '../../../theme';
+import {newskitDarkTheme} from '../../..';
+
+export const storybookNewskitDarkTheme = createTheme({
+  name: 'storybook-newskit-dark',
+  baseTheme: newskitDarkTheme,
+  overrides: {colors},
+});
diff --git a/src/theme-checker/themes/storybook-newskit-light/colors.json b/src/theme-checker/themes/storybook-newskit-light/colors.json
new file mode 100644
index 0000000000..414a9675e9
--- /dev/null
+++ b/src/theme-checker/themes/storybook-newskit-light/colors.json
@@ -0,0 +1,178 @@
+{
+  "focus010": "rgba(55,104,251,1)",
+  "purple100": "rgba(15,9,54,1)",
+  "purple090": "rgba(35,22,104,1)",
+  "purple080": "rgba(55,35,156,1)",
+  "purple070": "rgba(76,51,204,1)",
+  "purple060": "rgba(100,84,227,1)",
+  "purple055": "rgba(110,97,228,1)",
+  "purple050": "rgba(136,131,246,1)",
+  "purple040": "rgba(163,163,251,1)",
+  "purple030": "rgba(192,194,252,1)",
+  "purple020": "rgba(223,224,254,1)",
+  "purple010": "rgba(239,240,255,1)",
+  "blue100": "rgba(6,15,44,1)",
+  "blue090": "rgba(3,38,77,1)",
+  "blue080": "rgba(18,56,122,1)",
+  "blue070": "rgba(37,76,172,1)",
+  "blue060": "rgba(51,88,204,1)",
+  "blue055": "rgba(68,107,228,1)",
+  "blue050": "rgba(87,127,251,1)",
+  "blue040": "rgba(139,166,246,1)",
+  "blue030": "rgba(174,191,255,1)",
+  "blue020": "rgba(213,224,252,1)",
+  "blue010": "rgba(236,241,255,1)",
+  "teal100": "rgba(0,19,20,1)",
+  "teal090": "rgba(0,43,48,1)",
+  "teal080": "rgba(0,66,73,1)",
+  "teal070": "rgba(0,91,101,1)",
+  "teal060": "rgba(1,117,130,1)",
+  "teal055": "rgba(6,128,142,1)",
+  "teal050": "rgba(40,159,171,1)",
+  "teal040": "rgba(94,184,192,1)",
+  "teal030": "rgba(151,208,214,1)",
+  "teal020": "rgba(199,231,234,1)",
+  "teal010": "rgba(230,244,246,1)",
+  "amber100": "rgba(29,13,2,1)",
+  "amber090": "rgba(60,31,0,1)",
+  "amber080": "rgba(93,47,0,1)",
+  "amber070": "rgba(128,66,0,1)",
+  "amber060": "rgba(167,85,0,1)",
+  "amber050": "rgba(205,105,0,1)",
+  "amber040": "rgba(247,146,71,1)",
+  "amber030": "rgba(254,183,136,1)",
+  "amber020": "rgba(253,220,198,1)",
+  "amber010": "rgba(255,237,225,1)",
+  "red100": "rgba(45,0,0,1)",
+  "red090": "rgba(85,0,0,1)",
+  "red080": "rgba(125,0,0,1)",
+  "red070": "rgba(169,0,0,1)",
+  "red060": "rgba(214,0,0,1)",
+  "red050": "rgba(251,89,89,1)",
+  "red040": "rgba(254,136,136,1)",
+  "red030": "rgba(254,179,179,1)",
+  "red020": "rgba(254,216,216,1)",
+  "red010": "rgba(254,236,236,1)",
+  "green100": "rgba(0,21,6,1)",
+  "green090": "rgba(0,45,13,1)",
+  "green080": "rgba(0,69,20,1)",
+  "green070": "rgba(0,96,26,1)",
+  "green060": "rgba(0,123,34,1)",
+  "green050": "rgba(65,160,91,1)",
+  "green040": "rgba(109,182,129,1)",
+  "green030": "rgba(149,202,163,1)",
+  "green020": "rgba(200,228,208,1)",
+  "green010": "rgba(229,244,234,1)",
+  "neutral100": "rgba(17,17,17,1)",
+  "neutral090": "rgba(38,38,38,1)",
+  "neutral080": "rgba(59,59,59,1)",
+  "neutral070": "rgba(82,82,82,1)",
+  "neutral060": "rgba(106,106,106,1)",
+  "neutral050": "rgba(145,145,145,1)",
+  "neutral040": "rgba(171,171,171,1)",
+  "neutral030": "rgba(198,198,198,1)",
+  "neutral020": "rgba(226,226,226,1)",
+  "neutral010": "rgba(241,241,241,1)",
+  "black": "rgba(17,17,17,1)",
+  "white": "rgba(255,255,255,1)",
+  "whiteTint090": "rgba(255,255,255,0.9)",
+  "whiteTint080": "rgba(255,255,255,0.8)",
+  "whiteTint070": "rgba(255,255,255,0.7)",
+  "whiteTint060": "rgba(255,255,255,0.6)",
+  "whiteTint050": "rgba(255,255,255,0.5)",
+  "whiteTint040": "rgba(255,255,255,0.4)",
+  "whiteTint030": "rgba(255,255,255,0.3)",
+  "whiteTint020": "rgba(255,255,255,0.2)",
+  "whiteTint010": "rgba(255,255,255,0.1)",
+  "blackTint090": "rgba(0,0,0,0.9)",
+  "blackTint080": "rgba(0,0,0,0.8)",
+  "blackTint070": "rgba(0,0,0,0.7)",
+  "blackTint060": "rgba(0,0,0,0.6)",
+  "blackTint050": "rgba(0,0,0,0.5)",
+  "blackTint040": "rgba(0,0,0,0.4)",
+  "blackTint030": "rgba(0,0,0,0.3)",
+  "blackTint020": "rgba(0,0,0,0.2)",
+  "blackTint010": "rgba(0,0,0,0.1)",
+  "socialReddit": "rgba(255,69,0,1)",
+  "socialWhatsapp": "rgba(37,211,102,1)",
+  "socialYoutube": "rgba(255,0,0,1)",
+  "socialInstagram": "rgba(195,42,163,1)",
+  "socialFacebook": "rgba(24,119,242,1)",
+  "socialTwitter": "rgba(29,161,242,1)",
+  "socialGithub": "rgba(0,0,0,1)",
+  "socialApple": "rgba(0,0,0,1)",
+  "socialGoogleBlue": "rgba(66,133,244,1)",
+  "socialGoogleRed": "rgba(219,68,55,1)",
+  "socialGoogleYellow": "rgba(244,180,0,1)",
+  "socialGoogleGreen": "rgba(15,157,88,1)",
+  "inkBrand020": "{{colors.amber090}}",
+  "inkBrand010": "{{colors.amber070}}",
+  "inkInformative": "{{colors.teal060}}",
+  "inkNotice": "{{colors.neutral070}}",
+  "inkNegative": "{{colors.red060}}",
+  "inkPositive": "{{colors.green060}}",
+  "inkDark010": "{{colors.neutral100}}",
+  "inkLight010": "{{colors.white}}",
+  "inkInverse": "{{colors.white}}",
+  "inkNonEssential": "{{colors.neutral040}}",
+  "inkBase": "{{colors.neutral080}}",
+  "inkSubtle": "{{colors.neutral060}}",
+  "inkContrast": "{{colors.neutral100}}",
+  "interfaceSkeleton020": "{{colors.neutral020}}",
+  "interfaceSkeleton010": "{{colors.neutral010}}",
+  "interfaceNeutral020": "{{colors.teal020}}",
+  "interfaceNeutral010": "{{colors.teal070}}",
+  "interfaceInformative020": "{{colors.amber020}}",
+  "interfaceInformative010": "{{colors.amber060}}",
+  "interfaceNotice020": "{{colors.neutral010}}",
+  "interfaceNotice010": "{{colors.neutral080}}",
+  "interfaceNegative020": "{{colors.red010}}",
+  "interfaceNegative010": "{{colors.red060}}",
+  "interfacePositive020": "{{colors.green010}}",
+  "interfacePositive010": "{{colors.green060}}",
+  "interfaceBrand020": "{{colors.teal070}}",
+  "interfaceBrand010": "{{colors.teal055}}",
+  "interface060": "{{colors.neutral100}}",
+  "interface050": "{{colors.neutral040}}",
+  "interface040": "{{colors.neutral030}}",
+  "interface030": "{{colors.neutral020}}",
+  "interface020": "{{colors.neutral010}}",
+  "interface010": "{{colors.teal020}}",
+  "interfaceBackground": "{{colors.white}}",
+  "interactiveInput050": "{{colors.teal060}}",
+  "interactiveInput040": "{{colors.teal050}}",
+  "interactiveInput030": "{{colors.teal010}}",
+  "interactiveInput020": "{{colors.teal050}}",
+  "interactiveInput010": "{{colors.teal010}}",
+  "interactiveFocus010": "{{colors.purple055}}",
+  "interactiveVisited010": "{{colors.blue055}}",
+  "interactiveDisabled010": "{{colors.neutral020}}",
+  "interactiveLink030": "{{colors.teal070}}",
+  "interactiveLink020": "{{colors.teal060}}",
+  "interactiveLink010": "{{colors.teal055}}",
+  "interactiveInverse050": "{{colors.whiteTint080}}",
+  "interactiveInverse040": "{{colors.whiteTint070}}",
+  "interactiveInverse030": "{{colors.white}}",
+  "interactiveInverse020": "{{colors.whiteTint020}}",
+  "interactiveInverse010": "{{colors.whiteTint010}}",
+  "interactiveNegative050": "{{colors.red080}}",
+  "interactiveNegative040": "{{colors.red070}}",
+  "interactiveNegative030": "{{colors.red060}}",
+  "interactiveNegative020": "{{colors.red020}}",
+  "interactiveNegative010": "{{colors.red010}}",
+  "interactivePositive050": "{{colors.green080}}",
+  "interactivePositive040": "{{colors.green070}}",
+  "interactivePositive030": "{{colors.green060}}",
+  "interactivePositive020": "{{colors.green020}}",
+  "interactivePositive010": "{{colors.green010}}",
+  "interactiveSecondary050": "{{colors.amber080}}",
+  "interactiveSecondary040": "{{colors.amber070}}",
+  "interactiveSecondary030": "{{colors.amber060}}",
+  "interactiveSecondary020": "{{colors.amber020}}",
+  "interactiveSecondary010": "{{colors.amber010}}",
+  "interactivePrimary050": "{{colors.teal080}}",
+  "interactivePrimary040": "{{colors.teal070}}",
+  "interactivePrimary030": "{{colors.teal060}}",
+  "interactivePrimary020": "{{colors.teal020}}",
+  "interactivePrimary010": "{{colors.teal010}}"
+}
\ No newline at end of file
diff --git a/src/theme-checker/themes/storybook-newskit-light/storybook-newskit-light-theme.ts b/src/theme-checker/themes/storybook-newskit-light/storybook-newskit-light-theme.ts
new file mode 100644
index 0000000000..8a86ab1a24
--- /dev/null
+++ b/src/theme-checker/themes/storybook-newskit-light/storybook-newskit-light-theme.ts
@@ -0,0 +1,9 @@
+import colors from './colors.json';
+import {createTheme} from '../../../theme';
+import {newskitLightTheme} from '../../..';
+
+export const storybookNewskitLightTheme = createTheme({
+  name: 'storybook-newskit-light',
+  baseTheme: newskitLightTheme,
+  overrides: {colors},
+});