Fix/dark theme missing variables

.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, 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(([key, value]) => ({
+        name: Themes[value][1],
+        value: key,
+      })),
     },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/i,
       },
     },
+    docs: {
+      container: DocsWithTheme,
+    },
   },
 };
 

.storybook/theme.ts

@@ -0,0 +1,83 @@
+import { create } from "@storybook/theming";
+import { tokens } from "../src/cunningham-tokens";
+
+type DesignTokens = typeof tokens.themes.default;
+
+const buildTheme = (
+  { globals, contextuals }: DesignTokens,
+  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 as DesignTokens, "dark"),
+  }),
+};
+
+export const Themes = {
+  'dsfr-light': ['dsfr-light', 'DSFR light'],
+  'dsfr-dark': ['dsfr-dark', 'DSFR dark'],
+  'white-label-light': ['default', 'White label light'],
+  'white-label-dark': ['dark', 'White label dark'],
+  'anct-light': ['anct-light', 'ANCT light'],
+  'anct-dark': ['anct-dark', 'ANCT dark'],
+}
+
+export const BACKGROUND_COLOR_TO_THEME = {
+  "#FEFFFF": 'dsfr-light',
+  "#2B303D": 'dsfr-dark',
+  "#FFFEFF": 'anct-light',
+  "#283044": 'anct-dark',
+  "#FFFFFF": 'white-label-light',
+  "#2F2F40": 'white-label-dark',
+};
+
+export const getThemeFromGlobals = (globals): string => {
+  const themeKey = BACKGROUND_COLOR_TO_THEME[globals.backgrounds?.value] ?? 'dsfr-light';
+  return Themes[themeKey][0];
+};

CHANGELOG.md

@@ -5,22 +5,23 @@
 ### Minor Changes
 
 - Add props to customize row in TreeView component
+- Override design tokens for both default and dark themes
 
 ## 0.18.4
 
-### Patch Changes 
+### Patch Changes
 
 - fix LaGaufreV2 component rerender and add headerLogo for mobile
 
 ## 0.18.3
 
-### Patch Changes 
+### Patch Changes
 
 - fixes the responsiveness of the User Menu component
 
 ## 0.18.2
 
-### Patch Changes 
+### Patch Changes
 
 - fix missing export LaGaufreV2 component
 
@@ -34,7 +35,7 @@
 
 ### Major changes
 
-- Add pagination to the tree components 
+- Add pagination to the tree components
 
 ### Patch Changes