@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
762 lines (761 loc) • 24.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const uikitStyles = require("@hitachivantara/uikit-styles");
const ld = (c1, c2) => `light-dark(${c1}, ${c2})`;
const semaColors = ["positive", "warning", "negative", "info"];
const notificationMap = {
success: "positive",
warning: "warning",
error: "negative",
default: "info",
info: "info",
accent: "accent"
};
const inputColors = {
bg: ld("#FFFFFF", "#020617")
};
const popperStyles = {
backgroundColor: uikitStyles.theme.colors.bgContainer,
border: `1px solid ${uikitStyles.theme.colors.borderSubtle}`,
borderRadius: uikitStyles.theme.radii.large,
boxShadow: `0px 0px 6px 0px rgba(65, 65, 65, 0.08)`
};
const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
components: {
HvLoading: {
classes: {
loadingBar: {
borderRadius: 1
}
}
},
HvBadge: {
classes: {
badgePosition: {
color: ld(uikitStyles.theme.colors.textLight, uikitStyles.theme.colors.textDark),
"&[data-color='textSubtle']:not(.HvBadge-badgePosition:empty)": {
color: uikitStyles.theme.colors.textSubtle,
backgroundColor: uikitStyles.theme.colors.bgPageSecondary
},
"&[data-color='primary']:not(.HvBadge-badgePosition:empty)": {
color: uikitStyles.theme.colors.primary,
backgroundColor: uikitStyles.theme.colors.primaryDimmed
}
}
}
},
HvCallout: {
classes: {
root: { outline: "1px solid var(--icolor, currentcolor)" },
...Object.fromEntries(
Object.entries(notificationMap).map(([variant, color]) => [
variant,
{
backgroundColor: uikitStyles.theme.colors[`${color}Dimmed`],
"--icolor": uikitStyles.theme.colors[color],
"--outline": uikitStyles.theme.colors[`${color}Border`],
"--bg": uikitStyles.theme.colors[`${color}Subtle`],
"--title": uikitStyles.theme.colors[`${color}Deep`]
}
])
),
message: {
"&&": {
color: uikitStyles.theme.colors.secondary
}
},
messageIcon: {
alignSelf: "start",
borderRadius: uikitStyles.theme.radii.round,
color: "var(--icolor)",
outline: `1px solid var(--outline)`,
backgroundColor: "var(--bg)"
},
messageTitle: {
color: "var(--title)"
},
actionClose: {
color: uikitStyles.theme.colors.secondary
}
}
},
HvSnackbar: {
anchorOrigin: { vertical: "bottom", horizontal: "center" }
},
HvSnackbarProvider: {
anchorOrigin: { vertical: "bottom", horizontal: "center" }
},
HvBaseCheckBox: {
classes: {
root: {
borderRadius: uikitStyles.theme.radii.base
}
}
},
HvCheckBoxIcon: {
classes: {
root: {
borderRadius: uikitStyles.theme.radii.base
},
checked: {
"--bg-color": uikitStyles.theme.colors.primary,
color: uikitStyles.theme.colors.atmo1
}
}
},
HvBaseRadio: {
classes: {
root: {
borderRadius: uikitStyles.theme.radii.base
}
}
},
HvRadioIcon: {
classes: {
checked: {
"--bg-color": uikitStyles.theme.colors.primary
}
}
},
HvBaseSwitch: {
classes: {
root: {
borderRadius: uikitStyles.theme.radii.base,
"&:hover": {
backgroundColor: uikitStyles.theme.colors.bgHover
},
"& .HvBaseSwitch-switchBase": {
"& .HvBaseSwitch-thumb": {
borderColor: "transparent",
boxShadow: `0px 1px 1px 0px ${uikitStyles.theme.alpha(uikitStyles.slate[700], 0.16)}`
},
"+.HvBaseSwitch-track": {
height: 14,
backgroundColor: uikitStyles.theme.colors.textDimmed,
borderColor: uikitStyles.theme.colors.textSubtle
},
"&.HvBaseSwitch-checked": {
"& .HvBaseSwitch-thumb": {
border: `1px solid ${uikitStyles.theme.colors.bgContainer}`
},
"+.HvBaseSwitch-track": {
borderColor: uikitStyles.theme.colors.primaryStrong
}
},
"&.HvBaseSwitch-disabled": {
"& .HvBaseSwitch-thumb": {
backgroundColor: uikitStyles.theme.colors.borderDisabled,
borderColor: uikitStyles.theme.colors.borderDisabled
},
"+.HvBaseSwitch-track": {
borderColor: uikitStyles.theme.colors.borderDisabled,
backgroundColor: uikitStyles.theme.colors.bgDisabled
}
}
}
}
}
},
HvSelect: {
classes: {
root: {
borderRadius: uikitStyles.theme.radii.round,
"&& .HvButton-secondarySubtle": {
borderColor: uikitStyles.theme.colors.textDimmed,
backgroundColor: inputColors.bg
}
},
select: {
borderRadius: uikitStyles.theme.radii.round
},
panel: {
...popperStyles
},
popper: {
"&[data-popper-placement*='bottom'] .HvSelect-panel": {
borderRadius: uikitStyles.theme.radii.large,
top: 1
},
"&[data-popper-placement*='top'] .HvSelect-panel": {
borderRadius: uikitStyles.theme.radii.large,
top: -1
}
}
}
},
HvSuggestions: {
classes: {
list: {
...popperStyles
}
}
},
HvTagsInput: {
classes: {
tagsList: {
backgroundColor: inputColors.bg,
padding: uikitStyles.theme.space.xxs
},
singleLine: {
height: 32
}
}
},
HvTag: {
showSelectIcon: false,
size: "sm",
classes: {
root: {
outline: `1px solid ${uikitStyles.theme.colors.border}`,
outlineOffset: -1,
borderRadius: uikitStyles.theme.radii.round,
":where(:not([data-color],.HvTag-disabled))": {
color: uikitStyles.theme.colors.text,
"--tagColor": uikitStyles.theme.colors.bgContainer
},
":where([data-color]:not(.HvTag-disabled))": {
":not([data-color$=_20],[data-color^=cat])": {
color: "var(--tagColor)",
backgroundColor: uikitStyles.theme.mix("var(--tagColor)", "8%", "white"),
outlineColor: uikitStyles.theme.mix("var(--tagColor)", "30%", "white"),
"&.HvTag-clickable:is(:hover,:focus-visible)": {
backgroundColor: uikitStyles.theme.mix("var(--tagColor)", "20%", "white")
}
},
...Object.fromEntries(
semaColors.map((color) => [
[`&[data-color=${color}]`],
{
color: uikitStyles.theme.colors[`${color}Strong`],
backgroundColor: uikitStyles.theme.colors[`${color}Dimmed`],
outlineColor: uikitStyles.theme.colors[`${color}Border`],
"&.HvTag-clickable:has(:hover,:focus-visible)": {
backgroundColor: uikitStyles.theme.colors[`${color}Subtle`]
}
}
])
)
}
},
hasIcon: {
paddingLeft: uikitStyles.theme.space.xs
},
xs: { borderRadius: uikitStyles.theme.radii.base },
sm: { borderRadius: uikitStyles.theme.radii.base },
md: { borderRadius: uikitStyles.theme.radii.round },
label: {
paddingLeft: 8,
paddingRight: 8
},
deleteIcon: {
borderRadius: "inherit",
marginRight: 4
},
clickable: {
":hover": {
backgroundColor: uikitStyles.theme.colors.bgHover
}
},
selected: {
"&&": {
outlineColor: "currentcolor"
}
},
disabled: {
color: uikitStyles.theme.colors.textDisabled,
outlineColor: "transparent",
"&,:hover": {
backgroundColor: uikitStyles.theme.colors.bgDisabled
}
}
}
},
HvIconContainer: {
classes: {
root: {
padding: 0
},
xs: { fontSize: 16, padding: 0 },
sm: { fontSize: 20, padding: 2 },
md: { fontSize: 26, padding: 3 },
lg: { fontSize: 36, padding: 6 },
xl: { fontSize: 48, padding: 8 }
}
},
HvInlineEditor: {
classes: {
button: {
borderRadius: 2,
"&:focus": {
borderColor: uikitStyles.theme.colors.secondary
}
},
inputRoot: {
borderRadius: 2
}
}
},
HvButtonBase: {
classes: {
root: {
":where(:not(.HvButtonBase-disabled))": {
":hover": { backgroundColor: uikitStyles.theme.colors.primaryDimmed },
":active": { backgroundColor: uikitStyles.theme.colors.primarySubtle }
}
}
}
},
HvButton: {
radius: "full",
classes: {
root: {
":where(:not(.HvButton-disabled,.HvButton-contained))": {
"&[data-color=positive]": { color: uikitStyles.theme.colors.positive },
"&[data-color=warning]": { color: uikitStyles.theme.colors.warning },
"&[data-color=negative]": { color: uikitStyles.theme.colors.negative },
":hover": { backgroundColor: uikitStyles.theme.colors.primaryDimmed },
":active": { backgroundColor: uikitStyles.theme.colors.primarySubtle }
}
},
contained: {
":where(:not(.HvButton-disabled))": {
color: "#FFFFFF",
"&[data-color=primary]": {
backgroundColor: uikitStyles.theme.colors.primary,
":hover": { backgroundColor: uikitStyles.theme.colors.primaryStrong },
":active": { backgroundColor: uikitStyles.theme.colors.primaryDeep }
},
"&[data-color=positive]": {
":hover": { backgroundColor: uikitStyles.theme.colors.positiveDeep },
":active": { backgroundColor: uikitStyles.theme.colors.positiveStrong }
},
"&[data-color=warning]": {
":hover": { backgroundColor: uikitStyles.theme.colors.warningDeep },
":active": { backgroundColor: uikitStyles.theme.colors.warningStrong }
},
"&[data-color=negative]": {
":hover": { backgroundColor: uikitStyles.theme.colors.negativeDeep },
":active": { backgroundColor: uikitStyles.theme.colors.negativeStrong }
}
}
},
subtle: {
borderColor: uikitStyles.theme.alpha("currentcolor", 0.4),
":where(:not(.HvButton-disabled))": {
"&[data-color=primary]": {
borderColor: uikitStyles.theme.colors.primarySubtle,
backgroundColor: uikitStyles.theme.colors.primaryDimmed
},
"&[data-color=secondary]": {
borderColor: uikitStyles.theme.colors.border,
backgroundColor: uikitStyles.theme.colors.bgContainerSecondary
},
":hover": {
backgroundColor: uikitStyles.theme.colors.primaryDimmed
},
":active": {
borderColor: "transparent",
backgroundColor: uikitStyles.theme.colors.primarySubtle
},
"&[data-color=positive]": {
borderColor: uikitStyles.theme.colors.positiveBorder,
backgroundColor: uikitStyles.theme.colors.positiveDimmed,
":hover": { backgroundColor: uikitStyles.theme.colors.positiveSubtle },
":active": {
backgroundColor: uikitStyles.theme.colors.positiveBorder
}
},
"&[data-color=warning]": {
borderColor: uikitStyles.theme.colors.warningBorder,
backgroundColor: uikitStyles.theme.colors.warningDimmed,
":hover": { backgroundColor: uikitStyles.theme.colors.warningSubtle },
":active": { backgroundColor: uikitStyles.theme.colors.warningBorder }
},
"&[data-color=negative]": {
borderColor: uikitStyles.theme.colors.negativeBorder,
backgroundColor: uikitStyles.theme.colors.negativeDimmed,
":hover": { backgroundColor: uikitStyles.theme.colors.negativeSubtle },
":active": {
backgroundColor: uikitStyles.theme.colors.negativeBorder
}
}
}
},
ghost: {
":where(:not(.HvButton-disabled))": {
"&[data-color=positive]": {
":hover": { backgroundColor: uikitStyles.theme.colors.positiveDimmed },
":active": { backgroundColor: uikitStyles.theme.colors.positiveSubtle }
},
"&[data-color=warning]": {
":hover": { backgroundColor: uikitStyles.theme.colors.warningDimmed },
":active": { backgroundColor: uikitStyles.theme.colors.warningSubtle }
},
"&[data-color=negative]": {
":hover": { backgroundColor: uikitStyles.theme.colors.negativeDimmed },
":active": { backgroundColor: uikitStyles.theme.colors.negativeSubtle }
}
}
},
disabled: {
color: uikitStyles.theme.colors.textDisabled,
":not(.HvButton-ghost)": {
borderColor: "transparent",
"&,:hover,:active": {
backgroundColor: uikitStyles.theme.colors.bgDisabled
}
}
}
}
},
HvMultiButton: {
classes: {
multiple: {
borderRadius: uikitStyles.theme.radii.full,
borderColor: uikitStyles.theme.colors.border,
"& .HvMultiButton-button": {
borderColor: "inherit",
...uikitStyles.theme.typography.body,
"&.HvMultiButton-selected": {
color: uikitStyles.theme.colors.primary,
backgroundColor: uikitStyles.theme.colors.primaryDimmed
},
"&:not(.HvMultiButton-firstButton, .HvMultiButton-lastButton)": {
borderRadius: 0
}
}
},
vertical: {
borderRadius: uikitStyles.theme.radii.large,
borderColor: uikitStyles.theme.colors.border
}
}
},
HvDropdownButton: {
classes: {
disabled: {
backgroundColor: uikitStyles.theme.colors.bgDisabled,
borderColor: uikitStyles.theme.colors.bgDisabled,
"&.HvButton-subtle": {
borderColor: uikitStyles.theme.colors.bgDisabled,
"&,:hover": {
backgroundColor: uikitStyles.theme.colors.bgDisabled
}
},
"&.HvButton-ghost": {
borderColor: uikitStyles.theme.colors.bgDisabled,
"&,:hover": {
backgroundColor: uikitStyles.theme.colors.bgDisabled
}
}
}
}
},
HvHeader: {
classes: {
root: {
borderBottom: `1px solid ${uikitStyles.theme.colors.atmo3}`,
boxShadow: "none"
}
}
},
HvHeaderBrand: {
classes: {
separator: {
backgroundColor: uikitStyles.theme.colors.atmo4,
margin: uikitStyles.theme.spacing(0, "md"),
height: 32
}
}
},
HvHeaderMenuBarBar: {
classes: {
active: {
boxShadow: "none",
borderBottom: `1px solid ${uikitStyles.theme.colors.atmo3}`
},
list: {
"& li:hover > .HvHeader-MenuBar-hidden": {
boxShadow: "none",
borderBottom: `1px solid ${uikitStyles.theme.colors.atmo3}`
},
"& li:focus-within > .HvHeader-MenuBar-hidden": {
boxShadow: "none",
borderBottom: `1px solid ${uikitStyles.theme.colors.atmo3}`
}
}
}
},
HvVerticalNavigation: {
classes: {
root: {
width: 280,
color: uikitStyles.theme.colors.base_light,
backgroundColor: uikitStyles.slate[900],
borderRight: `1px solid ${uikitStyles.slate[500]}`,
"& > :not(nav:first-of-type)": {
borderTop: `1px solid ${uikitStyles.slate[500]}`
},
"& > :only-child": {
padding: uikitStyles.theme.space.sm,
"& .HvVerticalNavigationSlider-listContainer": { padding: 0 }
}
},
slider: {
"& > div:first-of-type": {
borderBottom: `1px solid ${uikitStyles.slate[500]}`
}
}
}
},
HvVerticalNavigationAction: {
classes: {
action: {
borderRadius: uikitStyles.theme.radii.round,
"&:hover, &:focus": {
backgroundColor: uikitStyles.slate[700]
}
}
}
},
HvVerticalNavigationSlider: {
classes: {
root: {
minHeight: "32px",
borderLeft: "unset",
borderRadius: uikitStyles.theme.radii.round,
"&.HvIsFocused": {
backgroundColor: uikitStyles.slate[700]
},
"&.HvListItem-interactive:not(.HvListItem-disabled):not(.HvListItem-selected):hover": {
backgroundColor: uikitStyles.slate[700]
}
},
listItemDisabled: {
color: uikitStyles.neutral[500],
backgroundColor: uikitStyles.neutral[800],
"& .HvListItem-startAdornment": { backgroundColor: "transparent" },
"& .HvListItem-endAdornment": { backgroundColor: "transparent" }
},
listItemSelected: {
background: uikitStyles.blue[800],
borderLeft: "unset"
},
listItemFocus: {
background: uikitStyles.slate[700]
},
listContainer: {
padding: uikitStyles.theme.space.sm
}
}
},
HvVerticalNavigationTreeViewItem: {
classes: {
content: {
borderLeft: "unset",
borderRadius: uikitStyles.theme.radii.round,
".HvVerticalNavigationTreeViewItem-selected>&": {
background: uikitStyles.blue[800],
borderLeft: "unset"
},
":not(.HvVerticalNavigationTreeViewItem-disabled>&):not(.HvVerticalNavigationTreeViewItem-selected>&)": {
"&:hover, &:focus-visible, &.focus-visible": {
background: uikitStyles.slate[700]
}
},
".HvVerticalNavigationTreeViewItem-focused>&": {
background: uikitStyles.slate[700]
}
},
disabled: {
"& .HvVerticalNavigationTreeViewItem-label": {
color: uikitStyles.neutral[500]
},
"& .HvVerticalNavigationTreeViewItem-content": {
background: uikitStyles.neutral[800]
}
},
icon: {
"& .HvAvatar-root": {
borderRadius: uikitStyles.theme.radii.round
}
}
}
},
HvCard: {
classes: {
root: {
outlineColor: uikitStyles.theme.colors.borderSubtle,
"--rb": uikitStyles.theme.radii.large,
// default non-semantic card
"&[data-color=sema0]": {
overflow: "hidden",
height: "fit-content",
"--rt": uikitStyles.theme.radii.large,
"& .HvCard-semanticContainer": {
display: "none"
}
},
"& > :last-child:not(.HvCardMedia-root)": {
paddingBottom: uikitStyles.theme.space.sm
},
"& .HvActionBar-root": {
padding: uikitStyles.theme.spacing("xs", "sm"),
borderTop: "none"
}
},
selectable: {
":hover": {
outlineColor: uikitStyles.theme.colors.bgHover,
backgroundColor: uikitStyles.theme.colors.primaryDimmed
}
},
selected: {
outlineColor: uikitStyles.theme.colors.primaryDeep
},
semanticBar: {
"--bar-height": "2px",
borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0 0`
}
}
},
HvCardHeader: {
classes: {
root: {
flexDirection: "row-reverse",
padding: uikitStyles.theme.spacing("xs", "sm"),
gap: 0
}
}
},
HvCardContent: {
classes: {
content: {
padding: uikitStyles.theme.spacing("xs", "sm"),
"&:last-child": {
paddingBottom: uikitStyles.theme.space.xs
}
}
}
},
HvFooter: {
name: "Pentaho+"
},
HvTabs: {
classes: {
floating: {
"& .HvTab-root": {
marginTop: 0,
zIndex: 1,
"&:is(.HvTab-selected)": {
borderColor: "transparent",
backgroundColor: "transparent"
},
"&:hover": {
borderRadius: uikitStyles.theme.radii.full
},
"::after": {
display: "none"
}
},
"& .HvTabs-indicator": {
height: "100%",
backgroundColor: uikitStyles.theme.colors.bgContainer,
border: `1px solid ${uikitStyles.theme.colors.primary}`,
borderRadius: uikitStyles.theme.radii.full
},
"& .HvTabs-flexContainer": {
display: "inline-flex",
backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
borderRadius: uikitStyles.theme.radii.full,
marginLeft: 0
}
}
}
},
HvLabel: {
classes: {
root: {
"& span[aria-hidden]": {
color: uikitStyles.theme.form.errorColor
}
}
}
},
HvBaseInput: {
classes: {
root: {
borderColor: uikitStyles.theme.colors.textDimmed,
backgroundColor: inputColors.bg
},
disabled: {
backgroundColor: uikitStyles.theme.colors.bgDisabled
}
}
},
HvInput: {
classes: {
label: {
"& span[aria-hidden]::before": {
content: '" "'
}
},
inputRoot: {
":has([type=search])": {
borderRadius: uikitStyles.theme.radii.full
}
},
inputExtension: {
backgroundColor: "transparent",
height: 0,
boxShadow: "none"
}
}
},
HvBaseDropdown: {
classes: {
header: {
borderColor: uikitStyles.theme.colors.textDimmed,
backgroundColor: inputColors.bg
},
headerOpen: {
"&,:hover": {
borderColor: uikitStyles.theme.colors.textDimmed
}
},
panel: {
"&[data-popper-placement*='top'],&[data-popper-placement*='bottom']": {
...popperStyles
}
}
}
},
HvDropDownMenu: {
classes: {
root: {
"--r": "calc(var(--HvButton-height) / 2)"
},
iconSelected: {
"&[data-color=secondary]": {
borderColor: uikitStyles.theme.colors.textDimmed
}
}
}
},
HvNumberInput: {
classes: {
root: {
".HvBaseInput-disabled .HvInput-adornmentsBox": {
backgroundColor: uikitStyles.theme.colors.bgDisabled
}
},
adornmentsBox: {
backgroundColor: uikitStyles.theme.colors.bgContainer,
borderLeft: `1px solid ${uikitStyles.theme.colors.border}`,
borderRadius: uikitStyles.theme.radii.none
}
}
}
}
});
exports.pentahoPlus = pentahoPlus;