From d314ab79bf3f0ef90019123d16e772d82f26e8b4 Mon Sep 17 00:00:00 2001
From: Mil4n0r <morenocarmonaenrique@gmail.com>
Date: Fri, 6 Mar 2026 12:56:28 +0100
Subject: [PATCH] Added inline styles for HalstackProvider

---
 .../halstack-provider/HalstackProviderPage.tsx      | 13 +++++++++++++
 packages/lib/src/HalstackContext.tsx                |  5 +++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx b/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx
index b47a212d4a..6a7479dfec 100644
--- a/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx
+++ b/apps/website/screens/utilities/halstack-provider/HalstackProviderPage.tsx
@@ -53,6 +53,19 @@ const sections = [
             <td>Object with a given structure, specified below, for defining the opinionated theme.</td>
             <td>-</td>
           </tr>
+          <tr>
+            <td>
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="new" />
+                style
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>React.CSSProperties</TableCode>
+            </td>
+            <td>CSS properties for styling the provider.</td>
+            <td>-</td>
+          </tr>
         </tbody>
       </DxcTable>
     ),
diff --git a/packages/lib/src/HalstackContext.tsx b/packages/lib/src/HalstackContext.tsx
index f1f53e54d9..9b9b299640 100644
--- a/packages/lib/src/HalstackContext.tsx
+++ b/packages/lib/src/HalstackContext.tsx
@@ -35,6 +35,7 @@ type HalstackProviderPropsType = {
   labels?: DeepPartial<TranslatedLabels>;
   children: ReactNode;
   opinionatedTheme?: ThemeType;
+  style?: React.CSSProperties;
 };
 
 const HalstackThemed = styled.div<{ coreTheme?: ThemeType }>`
@@ -63,7 +64,7 @@ const createCoreTheme = (opinionatedTheme: ThemeType | undefined = {}) => {
   return newTheme;
 };
 
-const HalstackProvider = ({ labels, children, opinionatedTheme }: HalstackProviderPropsType): JSX.Element => {
+const HalstackProvider = ({ labels, children, opinionatedTheme, style }: HalstackProviderPropsType): JSX.Element => {
   const parsedLabels = useMemo(() => (labels ? parseLabels(labels) : null), [labels]);
   const parsedCoreTheme = useMemo(() => {
     const theme = createCoreTheme(opinionatedTheme);
@@ -71,7 +72,7 @@ const HalstackProvider = ({ labels, children, opinionatedTheme }: HalstackProvid
   }, [opinionatedTheme]);
 
   return (
-    <HalstackThemed coreTheme={parsedCoreTheme}>
+    <HalstackThemed coreTheme={parsedCoreTheme} style={style}>
       {parsedLabels ? (
         <HalstackLanguageContext.Provider value={parsedLabels}>{children}</HalstackLanguageContext.Provider>
       ) : (