Custom CSS for Kontent.ai integrations

Overview

The SCSS/CSS file defines classes for elements commonly used when developing a custom element or an open source tool that seeks to maintain Kontent.ai visual identity, such as inputs, buttons, etc. It also comes with predefined color classes, using a palette from Kontent.ai application interface. The color classes can be combined with most of the element classes to streamline the styling process.

Installation

Install using your preferred package manager.

npm i @kontent-ai/stylekit

If your environment supports it (e.g. you're using a bundler), you can import the styles directly:

import '@kontent-ai/stylekit';

Alternatively, you can link the CSS from node_modules:

<link rel="stylesheet" href="node_modules/@kontent-ai/stylekit/styles/styles.css">

Colors

There are twelve base colors defined in the CSS, wrapped in a matching number of color classes of the same name (minus the CSS custom property syntax --). These are as follows:

You can combine the color classes with most of the elements in the following manner:

<div class="button red">Red button</div>

If you want to use any of the colors in your own class, use CSS var() function, e.g. color: var(--red).

Note

Class names do not correspond to their CSS color counterparts. All colors are custom, matching the Kontent.ai application interface.

Basic styles

One-class-does-it-all styles with optional modifiers.

.button

A round, color-filled button with a hover animation. Defaults to upper-case font, which can be overridden using no-caps helper class.

Modifiers

• secondary: bordered button, sets background color to white, defaults font color to black
• destructive: specific style for Delete and similar actions, matches UI
• [color-class-name]: affects border-color and background-color ::hovered, background-color for secondary only
• no-caps: sets text-transform to none
• disabled: sets opacity to 0.5 and disables pointer events

Usage example

<div class="button destructive">Delete</div>
<div class="button green">Save</div>
<div class="button secondary">Cancel</div>

Tip

Buttons follow their UI hierarchy. Default (primary) button is filled, secondary button is bordered.

destructive is a standalone style and shouldn't be combined with secondary modifier.

.input

Base class for all kinds of inputs, comes in a form of rounded box with hover effect.

Modifiers

• [color-class-name]: affects border-color and its :hover state
• type="text": sets placeholder color to light-grey and cursor to text
• disabled: sets opacity to 0.5 and disables pointer events

Usage example

<input class="input" placeholder="Insert something" type="text">

.status

A small pill-shaped informative element with optional colored background. Useful e.g. for displaying a loading status of an asynchronously fetched asset.

Modifiers

• [color-class-name]: affects border-color, background-color and sets font color to white

Usage example

<div class="status red">Loading failed.</div>

.section

A bordered area for content, with round corners and predefined padding, suitable for separating UI elements.

Modifiers

• [color-class-name]: affects border-color

Usage example

<div class="section">
    <div>Some text content</div>
    <div class="button">Button</div>
</div>

.section.info

Same as section but with background color set to 10% of border color. Suitable for warning or info boxes.

Modifiers

• [color-class-name]: affects border-color, background-color

Usage example

<div class="section info red">
    <h2>Warning</h2>
    <p>Some warning message.</p>
</div>

.loader

A simple animation to display if the custom element is busy loading a resource, e.g. from an asynchronous operation.

Apply dynamically and combine with pointer-events: none to prevent user interaction.

Usage example

<div class="loader"></div>

Modifiers

• [color-class-name]: affects the loader colors

Composed styles

Multiple classes meant to be used together to achieve the desired style.

Switch

Modified checkbox in form of an animated on/off switch.

Classes

• .switch, .slider

Modifiers

• slider [color-class-name]: affects color of a toggled switch
• disabled: sets opacity to 0.5 and disables pointer events

Usage example

<label class="switch">
    Switch
    <input type="checkbox" id="switch">
    <span class="slider red"></span>
</label>

Checkbox

Animated checkbox in UI colors.

Classes

• .checkbox, .checkmark

Modifiers

• disabled: sets opacity to 0.5 and disables pointer events

Usage example

<label class="checkbox">
    <input type="checkbox" id="checkbox">
    <span class="checkmark"></span>
    Expert
</label>

Radio

Animated radio buttons in UI colors.

Classes

• .radio, .radio-button

Modifiers

• disabled: sets opacity to 0.5 and disables pointer events

Usage example

<label class="radio">
    <input type="radio" name="radio" checked>
    <span class="radio-button"></span>
    Option 1
</label>

<label class="radio">
    <input type="radio" name="radio">
    <span class="radio-button"></span>
    Option 2
</label>

Dropdown

Input in form of an animated dropdown menu with multiple options.

Classes

• .select, .options, .option

Modifiers

• .option.selected: highlights the currently selected option in the dropdown
• .select.open: when the open class is set, it applies animated 180 degree rotation to the arrow. Rotates back when the class is removed.
• disabled: sets opacity to 0.5 and disables pointer events

Usage example

<div class="select">Pick an option</div> 
<div class="options">
    <div class="option">Available option</div>
    <div class="option selected">Selected option</div>
</div>

Note

Above example doesn't work on its own but expects JavaScript to handle toggle and selection events.

It's possible to use the select class with the HTML <select> element by removing its default styling and applying the class on a wrapper div.

Contributing

Clone the repository and adjust the styles.scss file accordingly. To test the styles locally, run npm run convert to build the styles.css file and its map.