UNPKG

@hitachivantara/uikit-react-core

Version:

Core React components for the NEXT Design System.

1,209 lines (1,208 loc) 30 kB
"use strict"; Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" }); const uikitStyles = require("@hitachivantara/uikit-styles"); const ds3 = uikitStyles.mergeTheme(uikitStyles.ds3, { components: { HvActionBar: { classes: { root: { borderTop: `3px solid ${uikitStyles.theme.colors.atmo2}` } } }, HvBaseCheckBox: { classes: { root: { borderRadius: 0 } } }, HvCallout: { classes: { root: { borderRadius: 0 } } }, HvCheckBoxIcon: { classes: { root: { borderRadius: 0, borderColor: uikitStyles.theme.colors.text }, checked: { "--bg-color": uikitStyles.theme.colors.text, color: uikitStyles.theme.colors.atmo1 }, semantic: { "&[data-variant=indeterminate]": { backgroundColor: uikitStyles.theme.colors.textLight, color: uikitStyles.theme.colors.textDark } }, indeterminate: { color: uikitStyles.theme.colors.text } } }, HvBaseDropdown: { classes: { header: { borderRadius: 0, border: `1px solid ${uikitStyles.theme.colors.atmo4}`, ":hover,:focus-visible": { borderColor: uikitStyles.theme.colors.secondary } }, headerOpen: { "&,:hover": { borderColor: "transparent", boxShadow: uikitStyles.theme.colors.shadow } }, headerDisabled: { background: uikitStyles.theme.colors.atmo3, "&,:hover": { borderColor: uikitStyles.theme.colors.atmo4 } }, headerReadOnly: { background: uikitStyles.theme.colors.atmo1, "&,:focus-visible": { border: "none" } }, placeholder: { color: uikitStyles.theme.colors.secondary_60 }, panel: { boxShadow: uikitStyles.theme.colors.shadow, border: "1px solid transparent" }, inputExtensionOpen: { height: uikitStyles.theme.space.xs, borderRight: "1px solid transparent", borderLeft: "1px solid transparent" } } }, HvLabelContainer: { classes: { root: { height: "auto" } } }, HvBaseInput: { classes: { root: { border: "none", borderRadius: 0, ":not(.HvBaseInput-disabled,.HvBaseInput-invalid,.HvBaseInput-readOnly)": { ":hover,:focus-within": { borderColor: uikitStyles.theme.colors.secondary, "::after": { borderBottomColor: uikitStyles.theme.colors.secondary } } }, "::after": { content: '" "', position: "absolute", inset: "auto 0 0", margin: "0 2px", borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}` } }, invalid: { "::after": { borderBottomColor: uikitStyles.theme.form.errorColor } }, disabled: { backgroundColor: uikitStyles.theme.colors.atmo3, "&& .HvBaseInput-input": { color: uikitStyles.theme.colors.secondary_60, WebkitTextFillColor: uikitStyles.theme.colors.secondary_60 } }, multiline: { border: `1px solid ${uikitStyles.theme.colors.atmo4}`, "&::after": { display: "none" }, "&.HvBaseInput-disabled": { borderColor: uikitStyles.theme.colors.atmo4 } }, readOnly: { borderColor: "transparent", backgroundColor: uikitStyles.theme.colors.atmo1, "::after": { borderColor: "transparent" } }, focused: { "&.HvBaseInput-readOnly": { backgroundColor: uikitStyles.theme.colors.atmo1 } }, input: { "&::placeholder": { color: uikitStyles.theme.colors.secondary_60 } }, inputReadOnly: { color: uikitStyles.theme.colors.secondary } } }, HvBaseRadio: { classes: { root: { "&:hover": { borderRadius: 0 } } } }, HvRadioIcon: { classes: { checked: { "--bg-color": uikitStyles.theme.colors.text, color: uikitStyles.theme.colors.bgPage } } }, HvBaseSwitch: { classes: { root: { width: "32px", height: "16px", borderRadius: 0, "&:hover": { backgroundColor: "transparent" }, " .HvBaseSwitch-switchBase.HvBaseSwitch-checked:not(.HvBaseSwitch-disabled) + .HvBaseSwitch-track": { backgroundColor: uikitStyles.theme.colors.text } }, switch: { width: "32px", height: "16px" }, switchBase: { width: "32px", height: "16px" }, track: { backgroundColor: uikitStyles.theme.colors.atmo2 }, thumb: { width: 12, height: 12 } } }, HvBreadCrumbPage: { classes: { link: { ":hover,:focus": { backgroundColor: uikitStyles.theme.colors.atmo3 } } } }, HvBulkActions: { classes: { root: { border: "none", backgroundColor: uikitStyles.theme.colors.atmo1, padding: "0px" }, semantic: { backgroundColor: uikitStyles.theme.colors.neutral_20, "& .HvBulkActions-selectAll div": { color: uikitStyles.theme.colors.base_dark, "& *": { color: uikitStyles.theme.colors.base_dark, backgroundColor: "transparent" } } }, divider: { display: "none" } } }, HvButton: { classes: { root: { padding: uikitStyles.theme.spacing(0, "xs"), minWidth: "70px" }, icon: { minWidth: "unset" }, secondarySubtle: { backgroundColor: uikitStyles.theme.colors.atmo1, borderColor: uikitStyles.theme.colors.atmo4 }, secondary: { backgroundColor: uikitStyles.theme.colors.atmo1, borderColor: uikitStyles.theme.colors.atmo4 }, ghost: {}, disabled: { "&:not(.HvButton-ghost):not(.HvButton-semantic)": { backgroundColor: uikitStyles.theme.colors.atmo3 }, "&.HvButton-subtle": { borderColor: uikitStyles.theme.colors.atmo4 } } } }, HvCalendarHeader: { classes: { root: { marginTop: uikitStyles.theme.space.xs, paddingBottom: 32, "& input": { height: "27px", fontSize: "18px", letterSpacing: "0.02em", lineHeight: "28px", fontWeight: uikitStyles.theme.fontWeights.semibold } }, invalid: { paddingBottom: 0 }, headerDayOfWeek: { color: uikitStyles.theme.colors.secondary } } }, HvCard: { classes: { root: { outline: "none", borderRadius: 0 }, selectable: { "&:hover": { outline: `1px solid ${uikitStyles.theme.colors.atmo4}` } }, icon: { top: `calc(-24px + ${uikitStyles.theme.space.xs})`, right: `calc(-24px + ${uikitStyles.theme.space.xs})` } } }, HvCardHeader: { classes: { root: { padding: uikitStyles.theme.spacing("15px", "sm") }, title: { ...uikitStyles.theme.typography.title3 }, titleShort: { ...uikitStyles.theme.typography.title3 }, subheader: { ...uikitStyles.theme.typography.body } } }, HvCarousel: { classes: { xs: { "& .HvCarousel-controls": { display: "none" } }, controls: { justifyContent: "space-between", backgroundColor: "transparent", border: "none" }, counterContainer: { display: "block" }, thumbnail: { "& img": { borderRadius: 0 } }, thumbnailSelected: { "& img": { border: `1px solid ${uikitStyles.theme.colors.base_dark}` } } } }, HvCheckBox: { classes: { container: { "&:hover": { borderRadius: 0 } } } }, HvColorPicker: { classes: { panel: { minWidth: "240px", padding: "20px 15px 20px 20px" }, colorPicker: { width: "205px" }, headerColorValue: { ...uikitStyles.theme.typography.body }, recommendedColorsRoot: { ":not(:only-child)": { paddingBottom: "20px" } } } }, HvColorPickerFields: { classes: { fields: { paddingTop: "10px", marginRight: "5px" }, single: { maxWidth: "40px", paddingLeft: "5px" }, double: { maxWidth: "80px", paddingRight: "20px" } } }, HvColorPickerPicker: { classes: { pickers: { flexDirection: "row" }, saturation: { width: "180px", height: "180px", marginRight: "5px", "& > div": { borderRadius: 0, "& .saturation-white": { borderRadius: 0, "& .saturation-black": { borderRadius: 0 } } } }, saturationPointer: { width: "6px", height: "6px" }, hue: { height: "180px", width: "15px", marginTop: "0px", "& .hue-horizontal": { borderRadius: 0 } }, hueSlider: { width: "12px", height: "6px", background: "#fff", marginLeft: "1px", border: "1px solid #fff", borderRadius: "1px" } } }, HvColorPickerPresetColors: { classes: { root: { width: "205px" }, colors: { width: "calc(100% + 5px)", margin: "-5px -3px" }, swatchWrap: { width: "16px", height: "16px", margin: "5px", "& > span > div": { borderRadius: 0 } } } }, HvColorPickerSavedColors: { classes: { addButton: { margin: "5px", width: "32px", height: "32px" }, root: { width: "calc(100% + 5px)", margin: "-5px -3px" }, swatchWrap: { width: "32px", height: "32px", margin: "4px", "& > span > div": { borderRadius: uikitStyles.theme.radii.base } } } }, HvDatePicker: { classes: { inputText: { ...uikitStyles.theme.typography.body, color: uikitStyles.theme.colors.secondary_60 } } }, HvDialog: { classes: { paper: { borderRadius: 0 } } }, HvDialogTitle: { classes: { titleText: { ...uikitStyles.theme.typography.xxsTitle } } }, HvDropdown: { classes: { readOnly: { "& .HvDropdown-dropdownHeader": { border: "none", backgroundColor: uikitStyles.theme.colors.atmo1 } }, placeholderClosed: { color: uikitStyles.theme.colors.secondary_60 } } }, HvDropDownMenu: { classes: { iconSelected: { border: "none", "&:hover": { border: "none" } } } }, HvEmptyState: { classes: { titleContainer: { marginTop: "2px", ...uikitStyles.theme.typography.xxsTitle } } }, HvFile: { classes: { root: { border: "none", borderRadius: 0 }, progressbarContainer: { height: "2px" }, previewContainer: { width: "52px", height: "52px", "& img": { width: "100%", height: "100%" } } } }, HvFileUploaderPreview: { classes: { previewButton: { width: "52px", height: "52px" }, overlay: { backgroundColor: uikitStyles.theme.colors.atmo3, opacity: "0.75", borderRadius: 0 } } }, HvDropZone: { classes: { dropZoneContainer: { border: `1px dotted ${uikitStyles.theme.colors.atmo4}`, background: uikitStyles.theme.colors.atmo2, borderRadius: 0, ":hover,:focus-within": { borderColor: uikitStyles.theme.colors.secondary } }, dragAction: { border: `1px dotted ${uikitStyles.theme.colors.secondary}` }, dropZoneContainerDisabled: { "&,:hover": { borderColor: uikitStyles.theme.colors.atmo4 } } } }, HvFilterGroupCounter: { classes: { partialCounter: { fontWeight: uikitStyles.theme.fontWeights.bold } } }, HvFilterGroupContent: { classes: { rightSidePanel: { boxShadow: `inset 8px 0 8px -6px ${uikitStyles.theme.colors.shad1}`, borderLeft: "none" }, applyButton: { marginRight: "0px" } } }, HvGlobalActions: { classes: { section: { "& .HvGlobalActions-wrapper": { backgroundColor: "transparent", paddingLeft: "0px" } }, wrapper: { "&&": { padding: uikitStyles.theme.space.xs, borderWidth: 0, borderRadius: 0 } }, sectionName: { ...uikitStyles.theme.typography.sectionTitle } } }, HvHeader: { classes: { root: { backgroundColor: uikitStyles.theme.colors.atmo1, borderTop: `4px solid ${uikitStyles.theme.colors.brand}` } } }, HvHeaderMenuBarBar: { classes: { active: { top: `calc(${uikitStyles.theme.header.height} - 4px)` }, list: { "& li:hover > .HvHeader-MenuBar-hidden": { top: `calc(${uikitStyles.theme.header.height} - 4px)` }, "& li:focus-within > .HvHeader-MenuBar-hidden": { top: `calc(${uikitStyles.theme.header.height} - 4px)` } } } }, HvHeaderMenuItem: { classes: { root: { borderTop: "2px solid transparent", borderBottom: "none", color: uikitStyles.theme.colors.secondary }, selected: { borderBottom: "none", color: uikitStyles.theme.colors.brand, "&.HvHeader-MenuItem-menu": { borderTop: "2px solid transparent" }, "&.HvHeader-MenuItem-menubar": { borderTop: "2px solid currentcolor" } } } }, HvHorizontalScrollListItem: { classes: { root: { maxWidth: 180 }, button: { height: "32px", borderBottom: "2px solid transparent", "&:hover": { backgroundColor: uikitStyles.theme.colors.atmo3, "& .HvHorizontalScrollListItem-notSelected": { height: "10px", width: "10px", backgroundColor: uikitStyles.theme.colors.atmo4 } } }, text: { height: "32px", borderBottom: "2px solid transparent", padding: "8px 10px", margin: 0 }, selected: { borderBottom: `2px solid ${uikitStyles.theme.colors.secondary}` }, bullet: { display: "none" } } }, HvSelect: { classes: { select: { ".HvButton-endIcon": { marginRight: uikitStyles.theme.spacing(-1) } }, panel: { borderColor: uikitStyles.theme.colors.atmo4 } } }, HvVerticalScrollListItem: { classes: { icon: { fontSize: "10px" }, notSelected: { color: uikitStyles.theme.colors.atmo4, fontSize: "6px" }, text: { height: "32px", width: "32px" }, button: { height: "32px", width: "32px", borderRadius: 0, cursor: "pointer", "&:hover": { "& .HvVerticalScrollListItem-notSelected": { fontSize: "10px", color: uikitStyles.theme.colors.atmo4 } } } } }, HvInlineEditor: { classes: { button: { "&,:hover": { border: "none", backgroundColor: "transparent" }, ":focus,:active": { border: "none" } } } }, HvInfoMessage: { classes: { root: { color: uikitStyles.theme.colors.secondary } } }, HvLabel: { classes: { root: { fontWeight: uikitStyles.theme.fontWeights.semibold }, childGutter: { paddingBottom: 6 } } }, HvList: { classes: { itemSelector: { "&:not(:hover):not(.HvIsFocused):not(:focus-within)": { backgroundColor: "transparent" } } } }, HvListItem: { classes: { disabled: { backgroundColor: "transparent" } } }, HvPagination: { classes: { root: { [`& .HvPagination-pageSizeInput`]: { ...uikitStyles.theme.typography.label, "&:focus": { padding: "unset" } }, [`& .HvPagination-pageSizeInputContainer`]: { width: 40, minWidth: 40 }, [`&& .HvPagination-pageSizeInputRoot`]: { height: 32 } }, icon: { fontSize: 16 }, pageSizeOptions: { height: 32 }, pageSizeHeader: { height: "unset", [`& .HvBaseDropdown-arrowContainer`]: { marginTop: 0 } }, pageSizeTextContainer: { height: 32, ...uikitStyles.theme.typography.body }, pageSizeOptionsSelect: { ...uikitStyles.theme.typography.body }, totalPagesTextContainer: { ...uikitStyles.theme.typography.body }, pageNavigator: { alignItems: "stretch" } } }, HvPaginationSelect: { classes: { header: { borderColor: "transparent", "&:hover": { borderColor: "transparent" } } } }, HvQueryBuilder: { classes: { topGroup: { paddingBottom: `calc(${uikitStyles.theme.space.sm} * 3)` }, subGroup: { "&::before": { left: "-42px" } }, subRulesContainer: { left: "-41px" }, topActionButtonContainer: { position: "absolute", bottom: `calc(-1 * ${uikitStyles.theme.space.md} * 0.5)`, right: `calc(${uikitStyles.theme.space.sm} * 1.75)` }, createConditionButton: { ...uikitStyles.theme.typography.link, textDecoration: "underline" }, createGroupButton: { ...uikitStyles.theme.typography.link, textDecoration: "underline" } } }, HvQueryBuilderRule: { classes: { root: { "&::before": { width: "21px", height: "36px", left: `calc( -1 * 21px)` }, ":not(.HvQueryBuilder-topRulesContainer)>&:last-child::after": { width: "21px", left: `calc( -1 * 21px)` } }, actionsContainer: { marginTop: "22px" } } }, HvRadio: { classes: { container: { "&:hover": { borderRadius: 0 } } } }, HvScrollToHorizontal: { classes: { root: { backgroundColor: uikitStyles.theme.alpha("atmo2", 0.8) } } }, HvScrollToVertical: { classes: { root: { backgroundColor: uikitStyles.theme.alpha("atmo2", 0.8) } } }, HvSlider: { classes: { trackDragging: { "&& .rc-slider-track": { "&::before": { borderTop: `12px solid ${uikitStyles.theme.colors.atmo3}`, borderBottom: `12px solid ${uikitStyles.theme.colors.atmo3}` } } }, trackStandBy: { "&& .rc-slider-track": { "&:hover": { "&::before": { borderTop: `12px solid ${uikitStyles.theme.colors.atmo3}`, borderBottom: `12px solid ${uikitStyles.theme.colors.atmo3}` } } } }, handleContainer: { "&& .rc-slider-handle": { "&:active": { cursor: "grab", "&::before": { border: `9px solid ${uikitStyles.theme.colors.secondary}`, opacity: "20%" } }, "&:hover": { "&::before": { border: `9px solid ${uikitStyles.theme.colors.secondary}`, opacity: "20%" } } } } } }, HvSnackbarContent: { classes: { action: { marginLeft: "inherit" } } }, HvSwitch: { classes: { invalidSwitch: { paddingBottom: "0px" } } }, HvSuggestions: { classes: { list: { borderColor: "transparent", borderRadius: 0 } } }, HvTab: { classes: { root: { padding: "0 20px", "&:hover": { backgroundColor: "transparent", borderRadius: 0, "&::after": { height: "1px", backgroundColor: uikitStyles.theme.colors.secondary_60 } } } } }, HvTag: { classes: { root: { "--tagColor": uikitStyles.theme.colors.neutral_20 }, categorical: { "--tagColor": uikitStyles.theme.alpha("cat1", 0.2) } } }, HvTagsInput: { classes: { disabled: { "& .HvTagsInput-tagsList": { backgroundColor: uikitStyles.theme.colors.atmo1 } }, readOnly: { "& .HvTagsInput-tagsList": { backgroundColor: uikitStyles.theme.colors.atmo1, borderColor: "transparent", "&:hover": { borderColor: "transparent" } } }, tagInputRoot: { "&::after": { display: "none" } }, tagsList: { borderColor: uikitStyles.theme.colors.atmo4, borderRadius: 0, "&:hover": { borderColor: uikitStyles.theme.colors.secondary } } } }, HvTableCell: { classes: { root: { padding: `calc(${uikitStyles.theme.space.xs} - 2px ) ${uikitStyles.theme.space.xs} calc(${uikitStyles.theme.space.xs} - 3px ) ${uikitStyles.theme.spacing(4)}` }, head: { borderTop: `1px solid ${uikitStyles.theme.colors.atmo4}` }, body: { "&.HvTableCell-sorted": { backgroundImage: `linear-gradient(to right, ${uikitStyles.theme.alpha( "atmo1", 0.4 )}, ${uikitStyles.theme.alpha("atmo1", 0.4)})` } }, variantListactions: { borderLeft: `solid 2px ${uikitStyles.theme.colors.atmo2}` }, variantListcheckbox: { borderRight: `solid 2px ${uikitStyles.theme.colors.atmo2}` } } }, HvTableHeader: { classes: { head: { "&.HvTableHeader-sortable": { "&:hover": { backgroundColor: uikitStyles.theme.colors.atmo3, "& .HvTableHeader-sortIcon": { visibility: "visible" } }, "&:focus-within": { backgroundColor: uikitStyles.theme.colors.atmo3, "& .HvTableHeader-sortIcon": { visibility: "visible" } } }, "*:first-of-type > &": { borderTop: `1px solid ${uikitStyles.theme.colors.atmo4}` } }, sortButton: { ".HvTableHeader-root.HvTableHeader-sortable &": { "&:hover": { backgroundColor: "transparent" } } } } }, HvTableRow: { classes: { root: { backgroundColor: "transparent" }, selected: { backgroundColor: uikitStyles.theme.colors.atmo1 }, variantList: { borderRadius: 0, "& td": { borderTop: "1px solid transparent", borderBottom: "1px solid transparent" }, "& td:first-of-type": { borderLeft: "1px solid transparent", borderRadius: 0 }, "& td:last-of-type": { borderRight: "1px solid transparent", borderRadius: 0 }, "&.HvTableRow-selected": { "& td": { borderTop: `1px solid ${uikitStyles.theme.colors.secondary}`, borderBottom: `1px solid ${uikitStyles.theme.colors.secondary}` }, "& td:first-of-type": { borderLeft: `1px solid ${uikitStyles.theme.colors.secondary}`, borderRadius: 0 }, "& td:last-of-type": { borderRight: `1px solid ${uikitStyles.theme.colors.secondary}`, borderRadius: 0 }, "&:hover": { "& td": { borderTop: `1px solid ${uikitStyles.theme.colors.atmo4}`, borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}` }, "& td:first-of-type": { borderLeft: `1px solid ${uikitStyles.theme.colors.atmo4}`, borderRadius: 0 }, "& td:last-of-type": { borderRight: `1px solid ${uikitStyles.theme.colors.atmo4}`, borderRadius: 0 } } }, "&:hover": { "& td": { borderTop: `1px solid ${uikitStyles.theme.colors.atmo4}`, borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}` }, "& td:first-of-type": { borderLeft: `1px solid ${uikitStyles.theme.colors.atmo4}`, borderRadius: 0 }, "& td:last-of-type": { borderRight: `1px solid ${uikitStyles.theme.colors.atmo4}`, borderRadius: 0 } }, "&.HvIsFocused": { borderRadius: 0 } } } }, HvMultiButton: { variant: "secondaryGhost", classes: { root: { "& button&.HvMultiButton-button&.HvMultiButton-selected": { height: 32 } }, splitDisabled: { backgroundColor: uikitStyles.theme.colors.atmo3 } } }, HvTooltip: { classes: { popper: { "& .HvTooltip-tooltip": { borderRadius: 0 } } } }, HvVerticalNavigation: { classes: { root: { justifyContent: "space-between" } } }, HvVerticalNavigationActions: { classes: { root: { marginTop: "none" } } }, HvVerticalNavigationSlider: { classes: { root: { borderLeft: `2px solid transparent` }, listItemSelected: { borderLeft: `2px solid ${uikitStyles.theme.colors.brand}` } } }, HvVerticalNavigationTreeViewItem: { classes: { content: { borderLeft: `2px solid transparent`, ".HvVerticalNavigationTreeViewItem-selected>&": { borderLeft: `2px solid ${uikitStyles.theme.colors.brand}` } } } }, HvWarningText: { classes: { warningText: { ...uikitStyles.theme.typography.body, color: "inherit" }, topGutter: { paddingTop: "8px" }, defaultIcon: { fontSize: 16, margin: 8 } } }, HvWizardContainer: { classes: { paper: { maxHeight: "calc(100% - (2 * 100px))" } } } } }); exports.ds3 = ds3;