Styles
.rounded, .square, .outlined, .tint and .deep change the shape and finish of an element. .light and .dark set its theme.
Rounded
.rounded gives pill corners to buttons, inputs, selects, textareas,
groups, progress bars and meters. Cards, boxes and code get larger
corners instead of a pill.
Square
.square removes the corners on the same elements.
Outlined
.outlined swaps a fill or a shadow for a border. It works on
buttons, badges, cards and boxes. On inputs, selects, textareas and select
buttons it makes the background transparent.
Outlined card
Tint and deep
On buttons, .tint is a pale tint and .deep a deep
shade, the same in both themes.
Light and dark
.light and .dark force the light or dark theme on an
element and everything inside it, like data-theme, see
themes. On code,
.light also switches to light code colors.
Light card
Dark card
Variables
The corners come from the radius scale in
borders:
--i-border-radius-pill for .rounded and
--i-border-radius-xlarge on cards, boxes and code.