Merge pull request #113 from oaknational/chore/PUPIL-439/storybook-theme

chore(PUPIL-439): add some basic Oak branding to Storybook

.storybook/main.ts

@@ -20,5 +20,6 @@ const config = {
   docs: {
     autodocs: "tag",
   },
+  staticDirs: ["./public"],
 };
 export default config;

.storybook/manager-head.html

@@ -0,0 +1,4 @@
+<link
+  href="https://googleapis-fonts.thenational.academy/css2?family=Lexend:wght@300;400;600&display=swap"
+  rel="stylesheet"
+/>

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/manager-api";
+import { oakStorybookTheme } from "./oakStorybookTheme";
+
+addons.setConfig({
+  theme: oakStorybookTheme,
+});

.storybook/oakStorybookTheme.ts

@@ -0,0 +1,43 @@
+import { create } from "@storybook/theming/create";
+import assert from "assert";
+
+// @ts-expect-error:  this is an svg
+import brandImage from "../assets/logo.svg";
+import { oakDefaultTheme } from "../src/styles/theme/default.theme";
+import { OakUiRoleToken, oakColorTokens } from "../src/styles/theme/color";
+import { oakBorderRadiusTokens } from "../src/styles/theme/borders";
+
+export const oakStorybookTheme = create({
+  base: "light",
+  brandTitle: "Oak National Academy",
+  brandUrl: "https://www.thenational.academy",
+  brandImage,
+  fontBase: "Lexend, sans-serif",
+  colorPrimary: oakColorTokens.mint,
+  colorSecondary: oakColorTokens.oakGreen,
+
+  appBg: getUIColor("bg-decorative1-very-subdued"),
+  appBorderColor: getUIColor("border-neutral"),
+  appBorderRadius: oakBorderRadiusTokens["border-radius-m"],
+
+  textColor: getUIColor("text-primary"),
+  textInverseColor: getUIColor("text-inverted"),
+  textMutedColor: getUIColor("text-subdued"),
+
+  inputBorder: getUIColor("border-primary"),
+  inputTextColor: getUIColor("text-primary"),
+  inputBorderRadius: oakBorderRadiusTokens["border-radius-m"],
+
+  barTextColor: getUIColor("icon-inverted"),
+  barSelectedColor: getUIColor("icon-inverted"),
+  buttonBg: getUIColor("bg-btn-secondary"),
+  buttonBorder: getUIColor("border-primary"),
+  barHoverColor: getUIColor("text-primary"),
+});
+
+function getUIColor(uiColor: OakUiRoleToken) {
+  const colorName = oakDefaultTheme.uiColors[uiColor];
+  assert(colorName, `Color '${uiColor}' not found in theme`);
+
+  return oakColorTokens[colorName];
+}

.storybook/preview-head.html

@@ -0,0 +1,4 @@
+<link
+  href="https://googleapis-fonts.thenational.academy/css2?family=Lexend:wght@300;400;600&display=swap"
+  rel="stylesheet"
+/>

.storybook/preview.tsx

@@ -4,6 +4,7 @@ import type { Decorator, Preview } from "@storybook/react";
 
 import { oakDefaultTheme } from "../src/styles/theme/default.theme";
 import { OakGlobalStyle } from "../src/components/atoms/OakGlobalStyle/OakGlobalStyle";
+import { oakStorybookTheme } from "./oakStorybookTheme";
 
 const globalDecorator: Decorator = (Story, context) => {
   return (
@@ -27,6 +28,9 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    docs: {
+      theme: oakStorybookTheme,
+    },
   },
   decorators: [globalDecorator],
 };