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, and the deprecated $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 the global styles and the helper styles . The global styles include the Pure CSS base (normalize.css), the page background, text color, focus outline, text selection, and print 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.

The import path above, and the purecss import inside the global styles, use the webpack ~ prefix for node_modules. Compile the stylesheet with webpack and sass-loader. Other Sass compilers, such as Vite and the sass command line, do not resolve ~ without a custom importer.

To replace generateGlobalStyles:

  1. Remove the import of generateGlobalStyles and each call to it.
  2. Import ~kolibri-design-system/lib/styles/common as shown above.

3. Initialize theme
#

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