@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
143 lines (142 loc) • 4.11 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const uikitStyles = require("@hitachivantara/uikit-styles");
const ds5 = uikitStyles.mergeTheme(uikitStyles.ds5, {
components: {
HvAvatar: {
classes: {
square: {
borderRadius: uikitStyles.theme.radii.round
}
}
},
HvBannerContent: {
classes: {
root: {
borderRadius: 0
}
}
},
HvBaseDropdown: {
classes: {
headerOpen: {
"--r": uikitStyles.theme.radii.round,
"&[data-popper-placement*='top']": {
borderRadius: "0 0 var(--r) var(--r)"
},
"&[data-popper-placement*='bottom']": {
borderRadius: "var(--r) var(--r) 0 0"
}
},
panel: {
"--r": uikitStyles.theme.radii.round,
"&[data-popper-placement*='top']": {
top: 1,
borderRadius: "var(--r) var(--r) 0 0"
},
"&[data-popper-placement*='bottom']": {
top: -1,
borderRadius: "0 0 var(--r) var(--r)"
}
}
}
},
HvButton: {
radius: "round",
classes: {
root: {
":where(:not(.HvButton-disabled,.HvButton-contained))": {
"&[data-color=warning]": { color: uikitStyles.theme.colors.warning_140 }
}
},
contained: {
":where([data-color=primary]:not(.HvButton-disabled))": {
":hover, &:focus-visible": {
backgroundColor: uikitStyles.theme.colors.primary_80,
borderColor: uikitStyles.theme.colors.primary_80
}
},
":where([data-color=positive]:not(.HvButton-disabled))": {
":hover, &:focus-visible": {
backgroundColor: uikitStyles.theme.colors.positive_80,
borderColor: uikitStyles.theme.colors.positive_80
}
},
":where([data-color=warning]:not(.HvButton-disabled))": {
backgroundColor: uikitStyles.theme.colors.warning_120,
":hover, &:focus-visible": {
backgroundColor: uikitStyles.theme.colors.warning_140,
borderColor: uikitStyles.theme.colors.warning_140
}
},
":where([data-color=negative]:not(.HvButton-disabled))": {
":hover, &:focus-visible": {
backgroundColor: uikitStyles.theme.colors.negative_80,
borderColor: uikitStyles.theme.colors.negative_80
}
}
}
}
},
HvDropdownButton: {
classes: {
open: {
"&[data-popper-placement*='top']": {
borderTopLeftRadius: 0,
borderTopRightRadius: 0
},
"&[data-popper-placement*='bottom']": {
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0
}
}
}
},
HvMultiButton: {
classes: {
splitGroup: {
// NEXT5 subtle multi-buttons have a custom background
"& .HvButton-subtle": {
backgroundColor: uikitStyles.theme.colors.atmo1
},
"&& .HvButton-disabled": {
backgroundColor: uikitStyles.theme.colors.atmo3
}
}
}
},
HvSelect: {
classes: {
popper: {
"--r": uikitStyles.theme.radii.round,
"&[data-popper-placement*='top'] .HvSelect-panel": {
borderRadius: "var(--r) var(--r) 0 0"
},
"&[data-popper-placement*='bottom'] .HvSelect-panel": {
borderRadius: "0 0 var(--r) var(--r)"
}
}
}
},
HvTab: {
classes: {
root: {
"&.HvTab-selected": {
color: uikitStyles.theme.colors.secondary
}
}
}
},
HvTag: {
classes: {
root: {
"--tagColor": uikitStyles.theme.colors.neutral_20
},
categorical: {
"--tagColor": uikitStyles.theme.alpha("cat1", 0.2)
}
}
}
}
});
exports.ds5 = ds5;