Cookbook

Components Overview

Clean UI Kit contains three folders: kit-core, kit-vendors, kit-widgets

Folder

Description

kit-core

Contains mixins.scss, core, utils, measurement styles, etc

kit-vendors

Contains third-party plugin styles

kit-widgets

Contains widgets (general, charts, etc...)

Using Widgets

All theme widgets are placed to components/kit-widgets folder. Best practice is create your own folder, eg components/widgets and then copy the needed widget into this folder. Rename copied widget and then edit code with your requirements.

Import your new widget anywhere in your project.

Theme Primary Color

The primary color is set in the kit-core/css/core.scss file.

:root {
--kit-color-primary: #4b7cf3;
--kit-font-family: 'Mukta', sans-serif;
}

We used CSS variable to set primary color globally. On color change next code will be added to the end of the document, which will be set --kit-color-primary variable to a new statement:

<style id="primaryColor">:root { --kit-color-primary: #f35847;}</style>

Some third-party plugins used this variable too. See kit-vendors folder. For example Ant Design uses this variable in kit-vendors/antd/themes/themeDark.js and kit-vendors/antd/themes/themeLight.js

Switching Light / Dark Theme

Basically switching light theme to dark theme will add kit__dark class to body tag. All component style files have dark styles section in the end of file:

// dark theme // html
body.kit__dark { ... }
// dark theme // react & vue
:global(body.kit__dark) { ... }
// dark theme // angular
:host-context(body.kit__dark) {

Ant Design Theming

Ant Design theme switching is more complex process and based on this approach: https://github.com/mzohaibqc/antd-theme-generator/

To make a long story short, we set unique colors (kit-vendors/antd/themes/variables.less) for antd variables which should be changed (kit-vendors/antd/themes/variablesToChange.js) on build compilation, and then in browser this unique colors will be replaced by set of a new colors (kit-vendors/antd/themes/themeDark.js or kit-vendors/antd/themes/themeLight.js):

import AntDesignDarkTheme from 'components/kit-vendors/antd/themes/themeDark'
import AntDesignLightTheme from 'components/kit-vendors/antd/themes/themeLight'
// light theme
window.less.modifyVars(AntDesignLightTheme)
// or dark theme
window.less.modifyVars(AntDesignDarkTheme)

LESS file (less.min.js) is placed to public folder and should imported in index.html file:

<!-- start:antd live theme switch resources -->
<link rel="stylesheet/less" type="text/css" href="color.less" />
<script>
window.less = {
async: false,
env: 'production'
};
</script>
<script type="text/javascript" src="resources/less.min.js"></script>
<!-- end:antd live theme switch resources -->