Merge pull request #81 from oramasearch/feature/orm-2229

ORM-2229: Expose border radius and box shadow of text area in chatbox

apps/storybook/stories/config.ts

@@ -54,6 +54,12 @@ const demoIndexes: DemoIndexConfig = {
           '--backdrop-background-color-primary': 'rgba(20, 3, 3, 0.7)',
         },
       },
+      radius: {
+        '--textarea-radius': '0.5rem',
+      },
+      shadow: {
+        '--textarea-shadow': 'none',
+      },
     },
     facetProperty: 'category',
     resultMap: {

apps/storybook/stories/public/orama-chat-box.stories.tsx

@@ -103,5 +103,13 @@ export const ChatBox: Story = {
   args: {
     preset: 'orama',
     colorScheme: 'dark',
+    themeConfig: {
+      radius: {
+        // "--textarea-radius": '0px'
+      },
+      shadow: {
+        // "--textarea-shadow": '0px 4px 24px 0px white'
+      },
+    },
   },
 }

packages/ui-stencil/src/components/internal/orama-textarea/orama-textarea.scss

@@ -2,10 +2,10 @@
   position: relative;
   display: flex;
   align-items: center;
-  border-radius: var(--radius-l, $radius-l);
+  border-radius: var(--textarea-radius, var(--radius-l, $radius-l));
   border: 1px solid var(--border-color-primary, border-color('primary'));
   background: var(--background-color-secondary, background-color('secondary'));
-  box-shadow: 0px 4px 24px 0px var(--shadow-color-primary, shadow-color('primary'));
+  box-shadow: var(--textarea-shadow, var(--shadow-color-primary, shadow-color('primary')));
   padding: var(--spacing-xs, $spacing-xs) var(--spacing-xs, $spacing-xs) var(--spacing-xs, $spacing-xs) var(--spacing-m, $spacing-m);
 }
 

packages/ui-stencil/src/config/radius.ts

@@ -0,0 +1,10 @@
+const radius = {
+  '--radius-xs': '6px',
+  '--radius-s': '8px',
+  '--radius-m': '12px',
+  '--radius-l': '16px',
+  '--radius-3xl': '40px',
+  '--textarea-radius': '16px',
+}
+
+export default radius

packages/ui-stencil/src/config/shadow.ts

@@ -0,0 +1,5 @@
+const shadow = {
+  '--textarea-shadow': undefined,
+}
+
+export default shadow

packages/ui-stencil/src/config/theme.ts

@@ -1,9 +1,13 @@
 import colors from './colors'
 import typography from './typography'
+import radius from './radius'
+import shadow from './shadow'
 
 const theme = {
   typography,
   colors,
+  radius,
+  shadow,
 }
 
 type TTheme = typeof theme

packages/ui-stencil/src/styles/_radius.scss

@@ -5,11 +5,18 @@ $radius-s: pxToRem($base);
 $radius-m: pxToRem($base * 1.5);
 $radius-l: pxToRem($base * 2);
 $radius-3xl: pxToRem($base * 5);
+$textarea-radius: $radius-l;
 
-$theme-radius: (
+$base-radius: (
   '--radius-xs': $radius-xs,
   '--radius-s': $radius-s,
   '--radius-m': $radius-m,
   '--radius-l': $radius-l,
   '--radius-3xl': $radius-3xl,
 );
+
+$element-radius: (
+  '--textarea-radius': $textarea-radius,
+);
+
+$theme-radius: map-merge($base-radius, $element-radius);

packages/ui-stencil/src/styles/_shadow.scss

@@ -0,0 +1,8 @@
+$base-shadow: (
+);
+
+$element-shadow: (
+  '--textarea-shadow': 0px 4px 24px 0px var(--shadow-color-primary, shadow-color('primary')),
+);
+
+$theme-shadow: map-merge($base-shadow, $element-shadow);

packages/ui-stencil/src/styles/_variables.scss

@@ -4,4 +4,5 @@
 @import 'typography';
 @import 'spacing';
 @import 'radius';
+@import 'shadow';
 @import 'zindex';

packages/ui-stencil/src/styles/globals.scss

@@ -12,6 +12,7 @@
   @include mapToCustomProperties($theme-typography);
   @include mapToCustomProperties($theme-radius);
   @include mapToCustomProperties($theme-spacing);
+  @include mapToCustomProperties($theme-shadow);
 
   *,
   *:before,

packages/ui-stencil/src/utils/utils.ts

@@ -129,7 +129,7 @@ export function generateRandomID(componentName: string): string {
 export function updateThemeClasses(
   element: HTMLElement,
   colorScheme: ColorScheme,
-  systemScheme: Omit<ColorScheme, 'system'>
+  systemScheme: Omit<ColorScheme, 'system'>,
 ) {
   const scheme = colorScheme === 'system' ? systemScheme : colorScheme
 
@@ -141,22 +141,20 @@ export function updateThemeClasses(
   return scheme
 }
 
-export function updateCssVariables(
-  element: HTMLElement,
-  scheme: ColorScheme,
-  themeConfig?: Partial<TThemeOverrides>
-) {
+export function updateCssVariables(element: HTMLElement, scheme: ColorScheme, themeConfig?: Partial<TThemeOverrides>) {
   if (!element || !themeConfig || !scheme) return
 
-  if (themeConfig.colors?.[scheme]) {
-    for (const key of Object.keys(themeConfig.colors[scheme])) {
-      element.style.setProperty(`${key}`, themeConfig.colors[scheme][key])
-    }
-  }
-
-  if (themeConfig.typography) {
-    for (const key of Object.keys(themeConfig.typography)) {
-      element.style.setProperty(`${key}`, themeConfig.typography[key])
+  for (const base of Object.keys(themeConfig)) {
+    if (base === 'colors') {
+      if (themeConfig[base]?.[scheme]) {
+        for (const key of Object.keys(themeConfig[base][scheme])) {
+          element.style.setProperty(`${key}`, themeConfig[base][scheme][key])
+        }
+      }
+    } else {
+      for (const key of Object.keys(themeConfig[base])) {
+        element.style.setProperty(`${key}`, themeConfig[base][key])
+      }
     }
   }
 }