From c8696ff2f238a8986918b99ec02a5560f77a0502 Mon Sep 17 00:00:00 2001
From: Francesca Giannino <francesca.giannino86@gmail.com>
Date: Thu, 11 Jul 2024 12:12:23 +0200
Subject: [PATCH] chore: upate preview

---
 apps/storybook/.storybook/preview.js              | 15 +++++++++++----
 .../internal/orama-search/orama-search.tsx        |  2 +-
 .../components/orama-toggler/orama-toggler.scss   |  2 +-
 .../src/components/search-box/search-box.tsx      |  1 -
 4 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/apps/storybook/.storybook/preview.js b/apps/storybook/.storybook/preview.js
index 11f7f7aa..b3d42ab3 100644
--- a/apps/storybook/.storybook/preview.js
+++ b/apps/storybook/.storybook/preview.js
@@ -3,10 +3,17 @@ import 'ui-stencil/dist/orama-ui/orama-ui.css'
 
 defineCustomElements()
 
+const LIGTH_THEME_BG = '#fbfbfb'
+const DARK_THEME_BG = '#050505'
+
 /** @type { import('@storybook/html').Preview } */
 const preview = {
-  // TODO: Theme class should be a variable
-  decorators: [(story) => `<div id="orama-ui" class="theme-ligth">${story()}</div>`],
+  decorators: [
+    (story, context) => {
+      const classTheme = context.globals.backgrounds.value === DARK_THEME_BG ? 'theme-dark' : 'theme-light'
+      return `<div id="orama-ui" class="${classTheme}" style="padding: 20px">${story()}</div>`
+    },
+  ],
   parameters: {
     controls: {
       matchers: {
@@ -19,11 +26,11 @@ const preview = {
       values: [
         {
           name: 'dark',
-          value: '#050505',
+          value: DARK_THEME_BG,
         },
         {
           name: 'light',
-          value: '#fbfbfb',
+          value: LIGTH_THEME_BG,
         },
       ],
     },
diff --git a/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx b/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx
index a9f1f1af..affb2a48 100644
--- a/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx
+++ b/packages/ui-stencil/src/components/internal/orama-search/orama-search.tsx
@@ -46,7 +46,7 @@ export class OramaSearch {
 
   render() {
     return (
-      <Host style={{ background: 'black', color: 'white' }}>
+      <Host>
         <div>
           <orama-input
             autofocus
diff --git a/packages/ui-stencil/src/components/orama-toggler/orama-toggler.scss b/packages/ui-stencil/src/components/orama-toggler/orama-toggler.scss
index 91512c25..89e35f6d 100644
--- a/packages/ui-stencil/src/components/orama-toggler/orama-toggler.scss
+++ b/packages/ui-stencil/src/components/orama-toggler/orama-toggler.scss
@@ -4,7 +4,7 @@
   align-items: center;
 
   border-radius: var(--radius-3xl, $radius-3xl);
-  background: var(---background-color-fourth, background-color('fourth'));
+  background: var(--background-color-fourth, background-color('fourth'));
   overflow: hidden;
 
   button {
diff --git a/packages/ui-stencil/src/components/search-box/search-box.tsx b/packages/ui-stencil/src/components/search-box/search-box.tsx
index 0816076e..eb9b6b7f 100644
--- a/packages/ui-stencil/src/components/search-box/search-box.tsx
+++ b/packages/ui-stencil/src/components/search-box/search-box.tsx
@@ -35,7 +35,6 @@ export class SearchBox {
             padding: '16px 0',
             alginItems: 'center',
             justifyContent: 'center',
-            backgroundColor: 'black',
             color: 'white',
           }}
         >