feat: allow token override with theme provider

.changeset/nine-coats-lie.md

@@ -0,0 +1,5 @@
+---
+'@talend/design-system': minor
+---
+
+feat: allow token override with theme provider

packages/design-system/src/components/ThemeProvider/ThemeProvider.tsx

@@ -1,18 +1,26 @@
-import ThemeContext from './ThemeContext';
-import './ThemeProvider.scss';
+import { PropsWithChildren, useContext, useEffect, useState } from 'react';
+
+import 'modern-css-reset/dist/reset.min.css';
+import 'typeface-inconsolata/index.css';
+import 'typeface-source-sans-pro/index.css';
+
 // eslint-disable-next-line @talend/import-depth
 import '@talend/design-tokens/dist/TalendDesignTokens.css';
-import { useEffect, PropsWithChildren, useContext, useState } from 'react';
 
-import 'typeface-source-sans-pro/index.css';
-import 'typeface-inconsolata/index.css';
-import 'modern-css-reset/dist/reset.min.css';
+import ThemeContext from './ThemeContext';
+
+import './ThemeProvider.scss';
 
 export type ThemeProviderProps = PropsWithChildren<{
 	theme?: string;
+	tokensOverride?: React.CSSProperties;
 }>;
 
-export const ThemeProvider = ({ theme = 'light', children }: ThemeProviderProps) => {
+export const ThemeProvider = ({
+	theme = 'light',
+	children,
+	tokensOverride,
+}: ThemeProviderProps) => {
 	const [selectedTheme, setSelectedTheme] = useState(theme);
 	// Handle nested Providers: parent Provider doesn't have context, child does
 	const context = useContext(ThemeContext);
@@ -28,7 +36,7 @@ export const ThemeProvider = ({ theme = 'light', children }: ThemeProviderProps)
 	const switchTheme = (newTheme: string) => setSelectedTheme(newTheme);
 	return (
 		<ThemeContext.Provider value={context.theme ? context : { switchTheme, theme: selectedTheme }}>
-			{children}
+			{tokensOverride ? <div style={tokensOverride}>{children}</div> : children}
 		</ThemeContext.Provider>
 	);
 };

tools/scripts-config-storybook-lib/.storybook-templates/preview.js

@@ -110,6 +110,9 @@ const defaultPreview = {
 				React.createElement(ThemeProvider, {
 					key: 'theme-provider-decorator',
 					theme: context.globals.theme,
+					// tokensOverride: {
+					// 	"--coral-color-accent-background-strong": "red"
+					// }
 				}, storyElement)
 			];
 		},