@controleonline/ui-default 1.0.265 → 1.0.267

package/src/react/components/table/DefaultTableToolbar.js

@@ -20,13 +20,15 @@ const DefaultTableToolbar = ({ storeName }) => {
   const showTotalItemsInCompactToolbar = configs.showTotalItemsInCompactToolbar === true;
   const showTotalItemsInFooter = configs.showTotalItemsInFooter !== false;
   const toolbarActions = Array.isArray(configs.toolbarActions) ? configs.toolbarActions : [];
-  const { toolbarColors } = useDefaultTableTheme();
+  const { tableBorderColors, toolbarColors } = useDefaultTableTheme();
   const {
     backgroundColor: toolbarBackgroundColor,
     borderColor: toolbarBorderColor,
     countBackgroundColor: toolbarCountBackgroundColor,
     countTextColor: toolbarCountTextColor,
   } = toolbarColors;
+  const resolvedToolbarBorderColor =
+    tableBorderColors.toolbarBorderColor || toolbarBorderColor;
   const storeTotalItems = store?.getters?.totalItems;
   const resolvedTotalItems = storeTotalItems;
   const totalItemsNumber = Number(resolvedTotalItems);
@@ -63,7 +65,11 @@ const DefaultTableToolbar = ({ storeName }) => {
       style={[
         styles.toolbar,
         shouldRenderCompactToolbarTotalItems ? styles.toolbarWithCompactTotal : null,
-        { borderBottomColor: toolbarBorderColor, backgroundColor: toolbarBackgroundColor },
+        {
+          borderBottomColor: resolvedToolbarBorderColor,
+          borderBottomWidth: resolvedToolbarBorderColor ? 1 : 0,
+          backgroundColor: toolbarBackgroundColor,
+        },
       ]}
     >
       {shouldRenderCompactToolbarTotalItems ? (

package/src/react/components/table/useDefaultTableTheme.js

@@ -1,58 +1,101 @@
 import { useMemo } from 'react';
 import { useStore } from '@store';
-import { resolveThemePalette } from '@controleonline/../../src/styles/branding';
-import { colors } from '@controleonline/../../src/styles/colors';
+
+const firstThemeToken = (themeColors, keys) =>
+  keys.map(key => themeColors?.[key]).find(Boolean);
 
 const useDefaultTableTheme = (accentColor = null) => {
   const themeStore = useStore('theme');
-  const baseColors = themeStore?.getters?.colors || {};
-  const themeTokens = useMemo(
-    () => ({ ...baseColors }),
-    [baseColors],
+  const rawThemeColors = themeStore?.getters?.colors || {};
+  const themeColors = useMemo(
+    () => ({ ...rawThemeColors }),
+    [rawThemeColors],
   );
-  const palette = useMemo(
-    () => resolveThemePalette(themeTokens, colors) || {},
-    [themeTokens],
-  );
-  const themeColors = palette.colors || baseColors || colors || {};
-  const resolvedAccentColor = accentColor || palette.primary || themeColors.primary || '#0EA5E9';
+  const themeTokens = useMemo(
+    () => ({ ...themeColors }),
+    [themeColors],
+  );
+  const palette = themeColors;
+  const resolvedAccentColor = accentColor ?? themeColors.primary;
+  const tableBorderColors = {
+    containerBorderColor: firstThemeToken(themeColors, [
+      'tableContainerBorder',
+      'tableBorder',
+      'tableHeaderBorder',
+      'tableToolbarBorder',
+      'cardBorder',
+      'listItemBorder',
+      'dividerBorder',
+      'dividerBackground',
+      'inputBorder',
+      'panelBorder',
+      'border',
+    ]),
+    headerBorderColor: firstThemeToken(themeColors, [
+      'tableHeaderBorder',
+      'tableToolbarBorder',
+      'tableBorder',
+      'dividerBorder',
+      'dividerBackground',
+      'listItemBorder',
+      'border',
+    ]),
+    rowBorderColor: firstThemeToken(themeColors, [
+      'tableRowBorder',
+      'listItemBorder',
+      'dividerBorder',
+      'dividerBackground',
+      'tableBorder',
+      'border',
+    ]),
+    toolbarBorderColor: firstThemeToken(themeColors, [
+      'tableToolbarBorder',
+      'tableHeaderBorder',
+      'toolbarBorder',
+      'tableBorder',
+      'dividerBorder',
+      'dividerBackground',
+      'border',
+    ]),
+  };
 
   return {
     palette,
     resolvedAccentColor,
+    tableBorderColors,
     themeColors,
-    themeTokens,
-    checkboxBorderColor: themeColors.checkboxBorder,
-    checkboxSelectedMarkColor: themeColors.checkboxSelectedMark,
-    modalColors: {
-      backgroundColor: themeColors.modalBackground,
-      borderColor: themeColors.modalBorder,
-      closeIconColor: themeColors.modalCloseIcon,
-      headerTextColor: themeColors.modalHeaderText,
-      overlayColor: themeColors.modalOverlay,
-      textColor: themeColors.modalText,
-    },
-    tableButtonColors: {
-      backgroundColor: themeColors.buttonBackground,
-      borderColor: themeColors.buttonBorder,
-      iconColor: themeColors.buttonIcon,
-      pressedBackgroundColor: themeColors.buttonPressedBackground,
-      pressedBorderColor: themeColors.buttonPressedBorder,
-      pressedIconColor: themeColors.buttonPressedIcon,
-      textColor: themeColors.buttonText,
-    },
-    tableActionColors: {
-      backgroundColor: themeColors.tableActionBackground,
-      borderColor: themeColors.tableActionBorder,
-      textColor: themeColors.tableActionIcon,
-    },
-    toolbarColors: {
-      backgroundColor: themeColors.toolbarBackground,
-      borderColor: themeColors.toolbarBorder,
-      countBackgroundColor: themeColors.badgeBackground,
-      countTextColor: themeColors.badgeText,
-    },
-  };
-};
-
-export default useDefaultTableTheme;
+    themeTokens,
+    checkboxBorderColor: themeColors.checkboxBorder,
+    checkboxSelectedMarkColor: themeColors.checkboxSelectedMark,
+    modalColors: {
+      backgroundColor: themeColors.modalBackground,
+      borderColor: themeColors.modalBorder,
+      closeIconColor: themeColors.modalCloseIcon,
+      headerTextColor: themeColors.modalHeaderText,
+      overlayColor: themeColors.modalOverlay,
+      textColor: themeColors.modalText,
+    },
+    tableButtonColors: {
+      backgroundColor: themeColors.buttonBackground,
+      borderColor: themeColors.buttonBorder,
+      iconColor: themeColors.buttonIcon,
+      pressedBackgroundColor: themeColors.buttonPressedBackground,
+      pressedBorderColor: themeColors.buttonPressedBorder,
+      pressedIconColor: themeColors.buttonPressedIcon,
+      textColor: themeColors.buttonText,
+    },
+    tableActionColors: {
+      backgroundColor: themeColors.tableActionBackground,
+      borderColor: themeColors.tableActionBorder,
+      textColor: themeColors.tableActionIcon,
+    },
+    toolbarColors: {
+      backgroundColor: themeColors.toolbarBackground,
+      borderColor: themeColors.toolbarBorder,
+      countBackgroundColor: themeColors.badgeBackground,
+      countTextColor: themeColors.badgeText,
+    },
+  };
+};
+
+export default useDefaultTableTheme;