chore: upate preview

oramasearch · Jul 11, 2024 · c8696ff · c8696ff
1 parent f3b8208
commit c8696ff
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -35,7 +35,6 @@ export class SearchBox {
             padding: '16px 0',
             alginItems: 'center',
             justifyContent: 'center',
-            backgroundColor: 'black',
             color: 'white',
           }}
         >