Kolibri comes with its default set of colors, shadows, fonts, and other style elements that make up its design system (see figma). Any application that uses Kolibri can of course selectively override or totally ignore the default style.
The style is available in two ways: via CSS - see colors-overview.html, which refers to kolibri-base.css and kolibri-colors.css - or by using the style API as provided by the style module . Sometimes, you might even want to combine both approaches, like the live test report does.
The list below serves as an overview and also allows checking visually whether both approaches lead to the same result.
colorNeutral
--kolibri-color-neutral
colorAccent
--kolibri-color-accent
colorOk
--kolibri-color-ok
colorSelect
--kolibri-color-select
colorOutput
--kolibri-color-output
colorShadow
--kolibri-color-shadow
shadow
--kolibri-box-shadow
colorPrimaryDark
--kolibri-color-primary-dark
colorPrimaryAccent
--kolibri-color-primary-accent
colorPrimaryBg
--kolibri-color-primary-bg
colorPrimaryLight
--kolibri-color-primary-light
colorSecondaryAccent
--kolibri-color-secondary-accent
colorSecondaryDark
--kolibri-color-secondary-dark
colorSecondaryBg
--kolibri-color-secondary-bg
colorSecondaryLight
--kolibri-color-secondary-light
colorSuccessAccent
--kolibri-color-success-accent
colorSuccessDark
--kolibri-color-success-dark
colorSuccessLight
--kolibri-color-success-light
colorSuccessBg
--kolibri-color-success-bg
colorWarningAccent
--kolibri-color-warning-accent
colorWarningDark
--kolibri-color-warning-dark
colorWarningBg
--kolibri-color-warning-bg
colorWarningLight
--kolibri-color-warning-light
colorDangerAccent
--kolibri-color-danger-accent
colorDangerDark
--kolibri-color-danger-dark
colorDangerBg
--kolibri-color-danger-bg
colorDangerLight
--kolibri-color-danger-light