@hitachivantara/uikit-react-core 5.97.0 → 5.99.0

package/dist/esm/themes/pentahoPlus.js

@@ -51,29 +51,23 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
             {
               backgroundColor: theme.mix(`${color}Dimmed`, 0.5, "dimmer"),
               "--icolor": theme.colors[color],
-              "--outline": theme.colors[`${color}Border`],
-              "--bg": theme.colors[`${color}Subtle`],
               "--title": theme.colors[`${color}Deep`]
             }
           ])
         ),
         message: {
           "&&": {
-            color: theme.colors.secondary
+            color: theme.colors.text
           }
         },
         messageIcon: {
-          alignSelf: "start",
-          borderRadius: theme.radii.round,
-          color: "var(--icolor)",
-          outline: `1px solid var(--outline)`,
-          backgroundColor: "var(--bg)"
+          alignSelf: "start"
         },
         messageTitle: {
           color: "var(--title)"
         },
         actionClose: {
-          color: theme.colors.secondary
+          color: theme.colors.text
         }
       }
     },
@@ -97,7 +91,7 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
         },
         checked: {
           "--bg-color": theme.colors.primary,
-          color: theme.colors.atmo1
+          color: theme.colors.bgContainer
         }
       }
     },
@@ -154,6 +148,14 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
         }
       }
     },
+    HvSection: {
+      classes: {
+        content: {
+          backgroundColor: theme.colors.bgPage
+          // = bgContainerSecondary
+        }
+      }
+    },
     HvSelect: {
       classes: {
         root: {
@@ -289,7 +291,7 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
         sm: { fontSize: 20, padding: 2 },
         md: { fontSize: 26, padding: 3 },
         lg: { fontSize: 36, padding: 6 },
-        xl: { fontSize: 48, padding: 8 }
+        xl: { fontSize: 48, padding: 5 }
       }
     },
     HvInlineEditor: {
@@ -297,7 +299,7 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
         button: {
           borderRadius: 2,
           "&:focus": {
-            borderColor: theme.colors.secondary
+            borderColor: theme.colors.text
           }
         },
         inputRoot: {
@@ -441,6 +443,25 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
         }
       }
     },
+    HvDialog: {
+      classes: {
+        paper: {
+          borderRadius: theme.radii.large
+        },
+        statusBar: {
+          border: "none",
+          borderTopLeftRadius: theme.radii.large,
+          borderTopRightRadius: theme.radii.large
+        }
+      }
+    },
+    HvDialogActions: {
+      classes: {
+        root: {
+          borderTop: "none"
+        }
+      }
+    },
     HvDropdownButton: {
       classes: {
         disabled: {
@@ -464,7 +485,7 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
     HvHeader: {
       classes: {
         root: {
-          borderBottom: `1px solid ${theme.colors.atmo3}`,
+          borderBottom: `1px solid ${theme.colors.borderSubtle}`,
           boxShadow: "none"
         }
       }
@@ -472,7 +493,7 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
     HvHeaderBrand: {
       classes: {
         separator: {
-          backgroundColor: theme.colors.atmo4,
+          backgroundColor: theme.colors.border,
           margin: theme.spacing(0, "md"),
           height: 32
         }
@@ -482,16 +503,16 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
       classes: {
         active: {
           boxShadow: "none",
-          borderBottom: `1px solid ${theme.colors.atmo3}`
+          borderBottom: `1px solid ${theme.colors.borderSubtle}`
         },
         list: {
           "& li:hover > .HvHeader-MenuBar-hidden": {
             boxShadow: "none",
-            borderBottom: `1px solid ${theme.colors.atmo3}`
+            borderBottom: `1px solid ${theme.colors.borderSubtle}`
           },
           "& li:focus-within > .HvHeader-MenuBar-hidden": {
             boxShadow: "none",
-            borderBottom: `1px solid ${theme.colors.atmo3}`
+            borderBottom: `1px solid ${theme.colors.borderSubtle}`
           }
         }
       }
@@ -500,7 +521,7 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
       classes: {
         root: {
           width: 280,
-          color: theme.colors.base_light,
+          color: theme.colors.textLight,
           backgroundColor: slate[900],
           borderRight: `1px solid ${slate[500]}`,
           "& > :not(nav:first-of-type)": {
@@ -616,12 +637,14 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
         },
         selectable: {
           ":hover": {
-            outlineColor: theme.colors.bgHover,
-            backgroundColor: theme.colors.primaryDimmed
+            outlineColor: theme.colors.primarySubtle,
+            backgroundColor: theme.colors.bgHover
           }
         },
         selected: {
-          outlineColor: theme.colors.primaryDeep
+          "&,&:hover,&:focus": {
+            outlineColor: theme.colors.primary
+          }
         },
         semanticBar: {
           "--bar-height": "2px",
@@ -633,8 +656,13 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
       classes: {
         root: {
           flexDirection: "row-reverse",
-          padding: theme.spacing("xs", "sm"),
-          gap: 0
+          padding: theme.spacing("xs", "sm")
+        },
+        subheader: {
+          color: theme.colors.textSubtle
+        },
+        action: {
+          alignSelf: "center"
         }
       }
     },
@@ -649,7 +677,7 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
       }
     },
     HvFooter: {
-      name: "Pentaho+"
+      name: "Pentaho"
     },
     HvTabs: {
       classes: {

package/dist/esm/utils/Callout.js

@@ -7,6 +7,7 @@ import { HvIcon } from "../icons.js";
 import { iconVariant } from "./iconVariant.js";
 import { HvActionsGeneric } from "../ActionsGeneric/ActionsGeneric.js";
 import { HvButton } from "../Button/Button.js";
+import { HvStatusIcon } from "../StatusIcon/StatusIcon.js";
 const { useClasses } = createClasses("HvCallout", {
   root: {
     position: "relative",
@@ -44,10 +45,7 @@ const { useClasses } = createClasses("HvCallout", {
     overflow: "hidden",
     wordBreak: "break-word"
   },
-  messageIcon: {
-    lineHeight: 0,
-    flexShrink: 0
-  },
+  messageIcon: {},
   messageTitle: {
     display: "block",
     fontWeight: theme.fontWeights.semibold
@@ -113,7 +111,14 @@ const HvCallout = forwardRef(function HvCallout2(props, ref) {
         action: classes.action
       },
       message: /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon && /* @__PURE__ */ jsx("div", { className: classes.messageIcon, children: icon }),
+        icon && /* @__PURE__ */ jsx(
+          HvStatusIcon,
+          {
+            className: classes.messageIcon,
+            variant: variant === "default" ? "info" : variant,
+            customIcon
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: classes.messageContent, children: [
           title && /* @__PURE__ */ jsx("b", { className: classes.messageTitle, children: title }),
           children