🧑‍💻(storybook) Allow to switch between default and dark theme

In order to ease component development for both themes, we add a tool to be
able to enable dark theme.

Author: jbpenrath

.storybook/manager.tsx

@@ -0,0 +1,35 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { addons, types, useStorybookApi } from '@storybook/manager-api';
+import { getThemeFromGlobals, themes } from './theme';
+import { useEffect } from 'react';
+import { useGlobals } from '@storybook/manager-api';
+
+addons.setConfig({ theme: themes.default });
+
+/**
+ * This add-on is just here to apply the theme to the Storybook manager ( the top-most frame
+ * containing sidebar, toolbar, etc ) when the theme is switched.
+ *
+ * The reason why we needed to add this add-on is that add-ons are the only place from where you can
+ * dynamically change the current theme of the manager.
+ */
+addons.register('theme-synchronizer', () => {
+    addons.add('theme-synchronizer/main', {
+        title: 'Theme synchronizer',
+        //👇 Sets the type of UI element in Storybook
+        type: types.TOOL,
+        //👇 Shows the Toolbar UI element if either the Canvas or Docs tab is active
+        match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
+        render: () => {
+            const api = useStorybookApi();
+            const [globals] = useGlobals();
+            const theme = getThemeFromGlobals(globals);
+            useEffect(() => {
+                api.setOptions({
+                    theme: themes[theme]
+                })
+            }, [theme, api]);
+            return null;
+        },
+    });
+});

.storybook/preview-head.html

@@ -0,0 +1,24 @@
+<style>
+    code {
+      margin: 0 2px;
+      padding: 3px 5px;
+      white-space: nowrap;
+      border-radius: 3px;
+      border: 1px solid #eeeeee;
+      color: rgba(51, 51, 51, 0.9);
+      background-color: #f8f8f8;
+    }
+    /* Prevent the index.scss font-family to override code blocks's one. */
+    pre * {
+      font-family:
+        ui-monospace, Menlo, Monaco, "Roboto Mono", "Oxygen Mono",
+        "Ubuntu Monospace", "Source Code Pro", "Droid Sans Mono", "Courier New",
+        monospace;
+    }
+
+    .cunningham-theme--dark {
+      .prismjs {
+        background-color: var(--c--globals--colors--gray-800) !important;
+      }
+    }
+  </style>

.storybook/preview.tsx

@@ -3,12 +3,23 @@ import "./../src/index.scss";
 import "./../src/styles/fonts.scss";
 import "./../src/style-stories.scss";
 import type { Preview } from "@storybook/react";
+import { DocsContainer } from "@storybook/blocks";
 import React from "react";
+import { BACKGROUND_COLOR_TO_THEME, getThemeFromGlobals, themes } from "./theme";
+
+const DocsWithTheme = (props) => {
+  const theme = getThemeFromGlobals(props.context.store.userGlobals.globals);
+  return (
+    <CunninghamProvider theme={theme}>
+      <DocsContainer {...props} theme={themes[theme]} />
+    </CunninghamProvider>
+  );
+};
 
 const preview: Preview = {
   decorators: [
-    (Story) => (
-      <CunninghamProvider currentLocale="en-US">
+    (Story, context) => (
+      <CunninghamProvider currentLocale="en-US" theme={getThemeFromGlobals(context.globals)}>
         <div>
           <Story />
         </div>
@@ -17,19 +28,21 @@ const preview: Preview = {
   ],
   parameters: {
     backgrounds: {
-      values: [
-        // 👇 Add your own
-        { name: "Gray", value: "#F7F9F2" },
-      ],
-      // 👇 Specify which background is shown by default
-      default: "light",
+      default: null,
+      values: Object.entries(BACKGROUND_COLOR_TO_THEME).map((value) => ({
+        name: value[1],
+        value: value[0],
+      })),
     },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
+    docs: {
+      container: DocsWithTheme,
+    },
   },
 };
 

.storybook/theme.ts

@@ -0,0 +1,72 @@
+import { create } from "@storybook/theming";
+import { tokens } from "../src/cunningham-tokens";
+
+const buildTheme = (
+  { globals, contextuals }: typeof tokens.themes.default,
+  type: "default" | "dark" = "default"
+) => {
+  return {
+    brandUrl: "https://github.com/suitenumerique/cunningham",
+    brandImage: `storybook/logo-uikit-${type}.svg`,
+    brandTitle: "La Suite UI Kit",
+    brandTarget: "_self",
+
+    //
+    colorPrimary: contextuals.content.semantic.brand.primary, // content.brand.primary
+    colorSecondary: contextuals.content.semantic.brand.primary, // content.brand.secondary
+
+    fontBase: globals.font.families.base,
+
+    // UI
+    appBg: contextuals.background.surface.secondary, // background.surface.tertiary
+    appContentBg: contextuals.background.surface.tertiary, // background.surface.primary
+    appBorderColor: contextuals.border.surface.primary, // border.surface.primary
+    appBorderRadius: 4,
+
+    // Text colors
+    textColor: contextuals.content.semantic.neutral.primary, // content.neutral.primary
+    textInverseColor: contextuals.content.semantic.neutral.secondary, // content.neutral.secondary
+    textMutedColor: contextuals.content.semantic.neutral.tertiary,
+
+    // Toolbar default and active colors
+    barTextColor: contextuals.content.semantic.neutral.tertiary, // content.neutral.tertiary
+    barSelectedColor: contextuals.content.semantic.neutral.primary, // content.neutral.primary
+    barSelectedTextColor: contextuals.content.semantic.neutral.primary, // content.neutral.primary
+    barBg: contextuals.background.surface.primary, // background.surface.primary
+
+    // Form colors
+    inputBg: contextuals.background.surface.primary, // background.surface.primary
+    inputBorder: contextuals.border.semantic.neutral.secondary, // border.neutral.secondary
+    inputTextColor: contextuals.content.semantic.neutral.primary, // content.neutral.primary
+    inputBorderRadius: 2,
+
+    // Code preview colors
+    codeBg: contextuals.background.surface.secondary, // background.surface.secondary
+    codeColor: contextuals.content.semantic.neutral.primary, // content.neutral.primary
+  };
+};
+
+export const themes = {
+  default: create({
+    base: "light",
+    ...buildTheme(tokens.themes.default),
+  }),
+  dark: create({
+    base: "dark",
+    ...buildTheme(tokens.themes.dark, "dark"),
+  }),
+};
+
+export enum Themes {
+  dark = "dark",
+  default = "default",
+}
+
+export const BACKGROUND_COLOR_TO_THEME = {
+  "#181B24": Themes.dark,
+};
+
+export const getThemeFromGlobals = (globals: any): string => {
+  const color = BACKGROUND_COLOR_TO_THEME[globals.backgrounds?.value];
+  return color ?? Themes.default;
+};

package.json

@@ -28,7 +28,7 @@
     "lint": "eslint . --report-unused-disable-directives",
     "preview": "vite preview",
     "test": "vitest run",
-    "build-theme": "cunningham -g css,scss -o src && mv src/cunningham-tokens.scss src/cunningham-tokens-sass.scss",
+    "build-theme": "cunningham -g css,scss,ts -o src && mv src/cunningham-tokens.scss src/cunningham-tokens-sass.scss",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },

public/storybook/logo-uikit-dark.svg

@@ -21,7 +21,6 @@ const colors: ButtonProps["color"][] = [
   "brand",
   "neutral",
   "info",
-  "success",
   "warning",
   "error",
   "success",