Installation link to current page

release-v5 | Release notes

1. Install the plugin
#

Kolibri Design System (KDS) is a Vue plugin. Register it in your application alongside scripts that are needed for its full functioning: 


      import KThemePlugin from 'kolibri-design-system/lib/KThemePlugin';
      import trackInputModality from 'kolibri-design-system/lib/styles/trackInputModality';
      import trackMediaType from 'kolibri-design-system/lib/styles/trackMediaType';

      Vue.use(KThemePlugin);

      trackInputModality();
      trackMediaType();
This ensures the following:
  • Makes theme values available in two forms: as reactive objects on every Vue instance ($themeBrand, $themeTokens, $themePalette, $computedClass) for use in JavaScript, and as CSS variables (--tokens-*, --brand-*, --palette-*) emitted to a <style> tag with #k-theme-css-variables in the document head for use in style blocks. Both stay in sync when the theme changes via setBrandColors() or setTokenMapping(). See Colors .
  • Provides $coreOutline, $inputModality, $mediaType, and $isPrint computed properties as well as $print method to all Vue instances.
  • Globally registers all KDS Vue components.
  • Inserts assertive and polite ARIA live regions #k-live-region to an application's document body (see useKLiveRegion ).
  • Inserts the overlay container element #k-overlay to an application's document body (see KOverlay or search for appendToOverlay prop on components).

2. Register global styles
#

Import KDS styles in the main application stylesheet:


      @import '~kolibri-design-system/lib/styles/common';
common.scss registers both the global styles, such as the page background, text color, focus outline, text selection, and print styles, and the helper styles . The helper styles are also a public entry point of their own. An application that doesn't need the global styles can import ~kolibri-design-system/lib/styles/helper-styles instead. Every theme CSS variable is still defined at its default value here, the global styles are the only optional part.

3. Initialize theme
#

Until this section is better documented, refer to Kolibri's initializeTheme.js.