Move wrapper out of template

Author: garronej

.storybook/DocsContainer.js

@@ -2,30 +2,45 @@ import React from "react";
 import { DocsContainer as BaseContainer } from "@storybook/addon-docs";
 import { useDarkMode } from "storybook-dark-mode";
 import { darkTheme, lightTheme } from "./customTheme";
+import { useColors } from "../dist";
 
 export const DocsContainer = ({ children, context }) => {
-    const dark = useDarkMode();
+    const isStorybookUiDark = useDarkMode();
+
+    const backgroundColor = useColors().decisions.background.default.grey.default;
 
     return (
-        <BaseContainer
-            context={{
-                ...context,
-                "storyById": id => {
-                    const storyContext = context.storyById(id);
-                    return {
-                        ...storyContext,
-                        "parameters": {
-                            ...storyContext?.parameters,
-                            "docs": {
-                                ...storyContext?.parameters?.docs,
-                                "theme": dark ? darkTheme : lightTheme
-                            }
-                        }
-                    };
+        <>
+            <style>{`
+                body {
+                    padding: 0 !important,
+                    background-color: ${backgroundColor};
                 }
-            }}
-        >
-            {children}
-        </BaseContainer>
+
+                .docs-story {
+                    background-color: ${backgroundColor};
+                }
+            `}</style>
+            <BaseContainer
+                context={{
+                    ...context,
+                    "storyById": id => {
+                        const storyContext = context.storyById(id);
+                        return {
+                            ...storyContext,
+                            "parameters": {
+                                ...storyContext?.parameters,
+                                "docs": {
+                                    ...storyContext?.parameters?.docs,
+                                    "theme": isStorybookUiDark ? darkTheme : lightTheme
+                                }
+                            }
+                        };
+                    }
+                }}
+            >
+                {children}
+            </BaseContainer>
+        </>
     );
 };

docs/getStory.tsx

@@ -32,34 +32,16 @@ export function getStoryFactory<Props extends Record<string, any>>(params: {
             setIsDark(darkMode);
         }, [darkMode]);
 
-        const backgroundColor = useColors().decisions.background.default.grey.default;
-
         return (
-            <>
-                <GlobalStyles
-                    styles={{
-                        "html": {
-                            "fontSize": "100% !important"
-                        },
-                        "body": {
-                            "padding": `0 !important`,
-                            backgroundColor
-                        },
-                        ".docs-story": {
-                            backgroundColor
-                        }
-                    }}
-                />
-                <div
-                    style={{
-                        "width": width || undefined,
-                        "border": "1px dashed #e8e8e8",
-                        "display": "inline-block"
-                    }}
-                >
-                    <Component {...props} />
-                </div>
-            </>
+            <div
+                style={{
+                    "width": width || undefined,
+                    "border": "1px dashed #e8e8e8",
+                    "display": "inline-block"
+                }}
+            >
+                <Component {...props} />
+            </div>
         );
     };
 

package.json

@@ -53,7 +53,6 @@
     ],
     "keywords": [
         "dsfr",
-        "tss-react",
         "design system",
         "react",
         "typescript"
@@ -110,7 +109,6 @@
         "storybook-dark-mode": "^1.1.2",
         "ts-node": "^10.9.1",
         "tsd": "^0.24.1",
-        "tss-react": "^4.4.4",
         "typescript": "^4.9.1-beta",
         "vitest": "^0.24.3"
     }