Class naming changes: rounded CSS classes have been renamed to match the rounded prop values and for more semantic accuracy. Classes have been renamed the following way:
Contrasts: some components had legacy contrast prop names like ‘white’ and ‘white-contrast’. Those have been renamed to match the system and naming in other components. CSS classes have also been renamed for consistency:
Colors: colors have been harmonized through all components and variants. New dark and black colors have been added to facilitate monochromatic color palettes. The light color has been added in components where it was missing and adapted to existing variants. default-contrast and muted-contrast contrast colors have been added where they were missing. This allows more consistency and the ability to group buttons and inputs for instance, without seeing different background or border styles.
Forms: input color-focus issue has been fixed and the behaviour has been extended to all form elements that can have a colored border on focus (Input, InputNumber, InputFile, Select, Autocomplete, Listbox, Textarea).
Tags: tag solid and pastel variants now have a border of the same color than the background, meaning it is not visible. This is needed to be able to group tags together.
ButtonGroup: you can now use the features of the <ButtonGroup /> component on any html element with the role=”group” on it.
Tooltip: styles have been refactored for more consistency, left and right position arrows fixed.
Text: the text component now renders a <span /> instead of a <p />.
New color prop for the following components:
DropdownItem
InputFile
Breadcrumb
Pagination
Tabs
TabSlider
Accordion
Accordion now has new dotColor prop to control the dot color.
Classes prop added to more components, to be able to customize inner styles.
Bugfixes: fixed various UI issues related to colors and typos
nui-<component>-roundedtonui-<component>-rounded-smnui-<component>-smoothtonui-<component>-rounded-mdnui-<component>-curvedtonui-<component>-rounded-lgnui-<component>-fulltonui-<component>-rounded-fullnui-<component>-whitetonui-<component>-defaultnui-<component>-white-contrasttonui-<component>-default-contrast<ButtonGroup />component on any html element with therole=”group”on it.<span />instead of a<p />.