diff --git a/README.md b/README.md
index 367150c..443c941 100644
--- a/README.md
+++ b/README.md
@@ -4,16 +4,60 @@
-
###### [Usage](#usage) | [Contributing](https://github.com/kontent-ai/.github/blob/main/CONTRIBUTING.md) | [Troubleshooting](https://github.com/kontent-ai/smart-link/blob/master/TROUBLESHOOTING.md) | [Breaking changes](https://github.com/kontent-ai/smart-link/blob/master/BREAKING.md)
-> Kontent.ai Smart Link SDK can be used to automatically inject smart links
-> to Kontent.ai according to manually specified [HTML data attributes](https://www.w3schools.com/tags/att_data-.asp)
-> on your website. It also lets you connect your website with Web Spotlight for faster editing and preview of your content.
->
-> :warning: Kontent.ai Smart Link SDK is **a browser-only SDK**, which means that the Node.js environment is not currently supported. Make sure to always initialize
-> the Smart Link SDK in a browser context.
+Kontent.ai Smart Link SDK simplifies and enhances the process of editing and managing web content
+in [Web Spotlight](https://kontent.ai/features/webspotlight/) by embedding "smart links" into your web pages.
+These smart links, defined by specific [HTML data attributes](https://www.w3schools.com/tags/att_data-.asp) you set,
+create a direct bridge to the Kontent.ai CMS. This allows content creators and editors to quickly navigate
+from the preview website to the corresponding content in the Kontent.ai platform for editing or previewing.
+
+:warning: **Important note:** Kontent.ai Smart Link SDK is **a browser-only SDK**, which means that the Node.js
+environment is not currently supported. Make sure to always initialize the Smart Link SDK in a browser context.
+
+## Table of Contents
+
+* [Features](#features)
+* [Installation](#installation)
+* [Usage](#usage)
+ * [Quickstart](#quickstart)
+ * [Data attributes](#data-attributes)
+ * [Smart links](#smart-links)
+ * [SDK initialization](#sdk-initialization)
+ * [Configuration](#configuration)
+ * [Customization](#customization)
+ * [Preview autorefresh in Web Spotlight](#preview-autorefresh-in-web-spotlight)
+ * [Live preview in Web Spotlight](#live-preview-in-web-spotlight)
+ * [Outside Web Spotlight](#outside-web-spotlight)
+ * [Inside Web Spotlight](#inside-web-spotlight)
+* [Examples](#examples)
+ * [HTML & UMD & CDN](#html--umd--cdn)
+ * [ES6](#es6)
+ * [React](#react)
+ * [Creating the SmartLink context](#creating-the-smartlink-context)
+ * [Optimizing content updates in React with custom refresh logic](#optimizing-content-updates-in-react-with-custom-refresh-logic)
+ * [Triggering SSG rebuilds with custom refresh logic](#triggering-ssg-rebuilds-with-custom-refresh-logic)
+ * [Live Preview in Your Application](#live-preview-in-your-application)
+* [Known issues](#known-issues)
+ * [Nested iframes](#nested-iframes)
+ * [SameSite cookie in Next.js app](#samesite-cookie-in-nextjs-app)
+* [Tests](#tests)
+ * [Unit tests](#unit-tests)
+ * [Visual regression tests](#visual-regression-tests)
+* [Breaking changes](#breaking-changes)
+* [Feedback & Contribution](#feedback--contribution)
+
+## Features
+
+- ✏️ **Edit Smart Links:** Quickly navigate from your website's preview to the corresponding content in Kontent.ai,
+ making content editing seamless and efficient.
+- ➕ **Add Smart Links:** Simplify the addition of modular content directly from your preview, enhancing content
+ management without leaving the web context.
+- 🔄️ **Automatic Reloads/Rebuilds:** Set up the automatic webpages reloads when your content is ready in the Delivery
+ Preview API, ensuring your preview always reflects the latest saved changes.
+- 👀 **Live Preview:** Experience real-time content changes even before they're saved, enabling a dynamic editing process
+ that boosts productivity.
## Installation
@@ -25,201 +69,317 @@ You can install this library using `npm` or using global CDNs such as `jsdelivr`
npm i @kontent-ai/smart-link
```
-### UMD Bundles
+### jsdelivr
-When using the UMD bundle and including this library inside the `script` tag of your HTML page, you can then find an SDK
-instance under the `KontentSmartLink` global variable. JS bundle and its minified version are distributed in `dist`
-folder.
+When you include the UMD bundle of this library in the `script` tag of your HTML page, an SDK becomes available
+under the `KontentSmartLink` global variable. Both the JS bundle and its minified version can be found
+in the `dist` folder.
-- `kontent-smart-link.umd.min.js`
-- `kontent-smart-link.umd.js`
-
-#### CDN
+- `dist/kontent-smart-link.umd.min.js`
+- `dist/kontent-smart-link.umd.js`
#### kontent-smart-link.umd.js
-```
-https://cdn.jsdelivr.net/npm/@kontent-ai/smart-link@latest/dist/kontent-smart-link.umd.js
+```html
+
+
```
##### kontent-smart-link.umd.min.js
+```html
+
+
```
-https://cdn.jsdelivr.net/npm/@kontent-ai/smart-link@latest/dist/kontent-smart-link.umd.min.js
-```
+
+To prevent potential issues from arising due to breaking changes, it is recommended to replace `@latest` with a specific
+version number.
## Usage
-Kontent.ai Smart Link SDK parses manually specified [HTML data attributes](https://www.w3schools.com/tags/att_data-.asp) on
-your webpage and automatically injects
-[smart links](https://kontent.ai/learn/tutorials/develop-apps/build-strong-foundation/set-up-editing-from-preview#a-automatically-create-edit-links-in-web-apps)
-to Kontent.ai. Injecting smart links to Kontent.ai means that all elements marked with special data attributes will
-become interactive (handle clicks/redirect to Kontent.ai/navigate from the preview in Web Spotlight/etc.). The type of
-injected smart link depends on used data attributes, their hierarchy, and context (Web Spotlight).
+### Quickstart
+
+To integrate the Kontent.ai Smart Link SDK into your web project and enable smart link injection, follow these steps:
+
+1. **Include SDK:** Add the SDK to your project. You can do this by installing it from npm or embedding
+ the UMD bundle in the `script` tag of your HTML page.
+2. **Specify HTML data attributes:** Define the HTML data attributes on your webpage elements where you want
+ the smart links to appear. Detailed guidance on setting these attributes can be found [here](#data-attributes).
+ ```html
+
+
+
+ ```
+3. **Initialization:** Initialize the SDK in your code to create the smart link to Kontent.ai. You can read more about
+ SDK initialization [here](#sdk-initialization).
+ ```ts
+ const instance = KontentSmartLink.initialize({
+ defaultDataAttributes: {
+ projectId: '00000000-0000-0000-0000-000000000000',
+ languageCodename: 'default',
+ },
+ });
+ ```
+4. **Set up the custom autorefresh behavior (optional):** The automatic page refresh feature after content is available
+ on Delivery Preview API is enabled out of the box. However, in some situations you may need to define some custom
+ behavior. You can read more about it [here](#preview-autorefresh-in-web-spotlight).
+5. **Set up the live preview (optional):** Make sure your website know how to react to the live preview messages from
+ Kontent.ai. You can read more about live preview [here](#live-preview-in-web-spotlight).
+
+For more complex examples, check the [Examples](#examples) section.
### Data attributes
-Kontent.ai Smart Link SDK highly depends on a set of manually specified data attributes in your HTML markup. That is why it
-won't work properly without those attributes. **The SDK won't add the data attributes to your HTML, you must add them
-yourself so that SDK will then be able to use them as a source of data (e.g. Kontent.ai project ID, element code name,
-etc.) when injecting the smart links.**
+The Kontent.ai Smart Link SDK relies heavily on manually specified data attributes in your HTML markup to function
+properly. These attributes are essential for the SDK to identify where and how to integrate smart links into
+your content, they also enable the SDK to access necessary information, such as the Kontent.ai project ID and element
+codenames. **It's important to note that the SDK does not automatically insert these data attributes into your HTML.
+You are responsible for adding them manually.**
#### Available data attributes
-|Attribute|Value| Description |
-|---------|:----------:|-------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `data-kontent-project-id` | guid | Kontent.ai project/environment ID. |
-| `data-kontent-language-codename` | string | Kontent.ai language codename. |
-| `data-kontent-item-id` | guid | Content item ID. |
-| `data-kontent-component-id` | guid | [Content component](https://kontent.ai/learn/tutorials/write-and-collaborate/structure-your-content/structure-your-content#a-create-single-use-content) ID. |
-| `data-kontent-element-codename` | string | Content type element codename. |
-| `data-kontent-add-button` | - | Specifies that node should have add-button rendered near it. |
-| `data-kontent-add-button-insert-position` | `start` | `before` | `after` | `end` | Specifies the insert position of an item/content component added using add button. |
+| Attribute | Value | Description |
+|-------------------------------------------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|-------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `data-kontent-project-id` | guid | Kontent.ai environment ID. |
+| `data-kontent-language-codename` | string | Kontent.ai language codename. |
+| `data-kontent-item-id` | guid | Content item ID. |
+| `data-kontent-component-id` | guid | [Content component](https://kontent.ai/learn/tutorials/write-and-collaborate/structure-your-content/structure-your-content#a-create-single-use-content) ID. |
+| `data-kontent-element-codename` | string | Content type element codename. |
+| `data-kontent-add-button` | - | Specifies that node should have add-button rendered near it. |
+| `data-kontent-add-button-insert-position` | `start` | `before` | `after` | `end` | Specifies the insert position of an item/content component added using add button. |
| `data-kontent-add-button-render-position` | `bottom-start` | `bottom` | `bottom-end` | `left-start` | `left` | `left-end` | `top-start` | `top` | `top-end` | `right-start` | `right` | `right-end` | Specifies visual location of add button. |
-| `data-kontent-disable-features` | `highlight` | Specifies that the selected node should not have highlight (which includes edit buttons). Useful when there are too many smart links on your page. |
+| `data-kontent-disable-features` | `highlight` | Specifies that the selected node should not have highlight (which includes edit smart links). Useful when there are too many smart links on your page. |
#### Data attributes hierarchy
-Although it is possible to put all previously specified data attributes on the same DOM node, you don't have to do it.
-We recommend you set data attributes hierarchically so that you don't have to duplicate the same attributes.
+Setting up data attributes in a hierarchical structure is a strategic approach to simplify your integration
+with the Kontent.ai Smart Link SDK. This method eliminates the need to repeat attributes across multiple elements,
+making your code cleaner and more maintainable.
-For example, your webpage probably represents one specific project in Kontent.ai, which means that you can place
-`data-kontent-project-id` attribute on your `` element or another wrapping DOM node so that all descendant nodes
-inherit this project ID. The same could be true for a language code name. If your page uses only 1 language variant at a
-time, you could place your `data-kontent-language-codename` attribute next to your `data-kontent-project-id` from a
-previous step. But remember, that since language variant is relevant to some specific
-project, `data-kontent-language-codename` attribute should always be on the same element as `data-kontent-project-id`
-attribute or on some of its descendants. After that, you can find all DOM nodes that represent Kontent.ai items and
-place `data-kontent-item-id` attribute on them. Then inside those nodes, you can find all descendants that represent
-some element of the Kontent.ai item and put `data-kontent-element-codename`
-attribute on them. In the case of Rich Text elements and Linked Items elements, there could be other content items or
-content components inside them, which have their own elements and so on.
+##### Hierarchical setup explained:
-#### Content components
+- **Project-Level Attributes:** Begin by assigning the `data-kontent-project-id` attribute to a high-level element,
+ such as the `` tag. That approach ensures that all elements within the body inherit this project identifier,
+ linking them to your specific Kontent.ai project. Similarly, if your content is published in a single language,
+ assign the `data-kontent-language-codename` alongside the project ID to establish the language context for all
+ contained elements.
+- **Content-Specific Attributes:** Next, identify elements representing individual content items or components within
+ your webpage. Assign each a `data-kontent-item-id`, making these elements recognizable to the SDK as distinct
+ pieces of content. For elements corresponding to specific fields or components within these elements, use
+ the `data-kontent-element-codename` to map each directly to its counterpart in Kontent.ai.
+- **Nested Content:** In scenarios involving rich text or linked items that contain additional content elements,
+ continue this hierarchical assignment. Place relevant item or component IDs on their respective container elements.
+- **[Content Components](https://kontent.ai/learn/create/add-structure-to-your-content/single-use-content-no-problem):**
+ Unlike standard content items, content components are designed to be used within a specific rich text element
+ and do not appear as standalone items in you Content Inventory. To effectively integrate these content components
+ with the Kontent.ai Smart Link SDK, it's essential to mark them with the `data-kontent-component-id` attribute
+ within your HTML, ensuring it's correctly linked to its parent content item in the CMS.
-[Content component](https://kontent.ai/learn/tutorials/write-and-collaborate/structure-your-content/structure-your-content#a-create-single-use-content)
-is single-use content, that is also sometimes referred to as one-off, channel-specific, or non-reusable. Content
-components exist only within a specific rich text element in your content items and become their integral part. This
-means you won't find components in your list of items in Content Inventory in Kontent.ai.
+### Smart links
-You should use `data-kontent-component-id` attribute to specify that something represents a content component in your
-HTML so that the SDK knows that this item has no separate page in the Kontent.ai and must be opened in the context of its
-parent content item.
+The Kontent.ai Smart Link SDK supports four distinct types of smart links, each designed to enhance
+your content editing workflow. These smart links are powered by the data attributes from the previous section and
+primarily function within the Web Spotlight preview iframe.
-### Smart link types
+#### Edit element smart link
-Currently, there are 4 types of smart links supported by Kontent.ai Smart Link SDK. All of them require certain data
-attributes to be specified in HTML markup of your webpage. Please note, that most of those smart link types are only
-available and visible inside Web Spotlight preview iframe.
+This smart link enables direct editing of a content item's specific element within the preview. When clicked:
-#### Edit element button
+- **Inside Web Spotlight:** Opens the In-Context editor, focusing on the selected element.
+- **Outside Web Spotlight:** Redirects to the corresponding item in the Kontent.ai editor.
-Edit element button allows you to edit a specific element of a content item by clicking on it in preview. Inside Web
-Spotlight, this will lead to In-Context editor being opened, and the selected element will be scrolled into view.
-Outside Web Spotlight, you will be redirected to Kontent.ai item editor.
+**Data Attributes:** `data-kontent-project-id`, `data-kontent-language-codename`, `data-kontent-item-id`,
+`data-kontent-component-id?` (optional), and `data-kontent-element-codename`.
-**Data attributes:** `data-kontent-project-id` → `data-kontent-language-codename` → `data-kontent-item-id`
-→ `data-kontent-component-id?` → `data-kontent-element-codename`.
+```html
-**Environment:** This feature is available both inside and outside Web Spotlight.
+
+```
+
+#### Edit content component smart link
+
+This smart link enables direct editing of content components within the preview. It triggers the In-Context editor
+and brings the component into view.
+
+**Availability:** Exclusive to the Web Spotlight environment.
+
+**Data attributes:** `data-kontent-project-id`, `data-kontent-language-codename`, `data-kontent-item-id`,
+and `data-kontent-component-id`.
+
+```html
-#### Edit content component button
+
+```
+
+#### Edit content item smart link
+
+This smart link enables the editing of entire content items through a preview click, opening the In-Context editor.
-Edit content component button allows you to edit a specific content component by clicking on it in preview. This will
-lead to In-Context editor being opened, and the selected content component scrolled into view.
+**Availability:** Exclusive to the Web Spotlight environment.
+
+**Data attributes:** `data-kontent-project-id`, `data-kontent-language-codename`, and `data-kontent-item-id`.
+
+```html
-**Data attributes:** `data-kontent-project-id` → `data-kontent-language-codename` → `data-kontent-item-id`
-→ `data-kontent-component-id`.
+
+```
-**Environment:** This feature is only available inside Web Spotlight.
+#### Add content smart link
-#### Edit content item button
+This smart link enables the addition of new modular content directly within your page's preview,
+supporting both rich-text and linked item elements.
-Edit content item button allows you to edit a specific content item by clicking on it in preview. This will lead to
-In-Context editor being opened.
+**Availability:** Exclusive to the Web Spotlight environment.
-**Data attributes:** `data-kontent-project-id` → `data-kontent-language-codename` → `data-kontent-item-id`.
+##### Fixed add content smart link
-**Environment:** This feature is only available inside Web Spotlight.
+Fixed add content smart link positions new content at predetermined points of
+the target rich-text or linked items (`start` or `end`).
-#### Add button
+**Data attributes:** `data-kontent-project-id`, `data-kontent-language-codename`, `data-kontent-item-id`,
+`data-kontent-component-id?` (optional),
+`data-kontent-element-codename` (codename of the rich-text or linked items element),
+`data-kontent-add-button`, `data-kontent-add-button-render-position?`, `data-kontent-add-button-insert-position=start|end`.
-Add button allows you to add content to your page right from your preview. It supports both Linked items elements and
-Rich Text elements.
+```html
-**Environment:** This feature is only available inside Web Spotlight.
+
+```
-##### Fixed add button
+##### Relative add content smart link
-**Data attributes:** `data-kontent-project-id` → `data-kontent-language-codename` → `data-kontent-item-id`
-→ `data-kontent-component-id?` → `data-kontent-element-codename`(RTE or LIE) → `data-kontent-add-button`
-& `data-kontent-add-button-render-position?` & `data-kontent-add-button-insert-position=start|end` .
+Relative add content smart link allows new content to be placed relative to existing elements (`before` or `after`).
+For example, you can insert a new content component before or after the existing content component in rich-text element.
+To turn add content smart link into a relative one, you need to set `data-kontent-insert-position`
+to `before` or `after` and provide target id on the same node
+using `data-kontent-item-id` or `data-kontent-component-id` attribute.
-##### Relative add button
+**Data attributes:** `data-kontent-project-id`, `data-kontent-language-codename`, `data-kontent-item-id`,
+`data-kontent-component-id?` (optional),
+`data-kontent-element-codename` (codename of the rich-text or linked items element),
+`data-kontent-item-id|data-kontent-component-id` (target item), `data-kontent-add-button`,
+`data-kontent-add-button-render-position?`, `data-kontent-add-button-insert-position=before|after`.
-Relative add button allows you to add content relatively to some existing content in your Rich Text element or Linked
-item element. For example, you can insert a new content component after or before the existing content component in RTE.
-To turn add button into a relative add button, you need to set insert position to `before` or `after` and provide target
-id on the same node using `data-kontent-item-id` or `data-kontent-component-id` attribute.
+```html
-**Data attributes:** `data-kontent-project-id` → `data-kontent-language-codename` → `data-kontent-item-id`
-→ `data-kontent-component-id?` → `data-kontent-element-codename`(RTE or LIE)
-→ `data-kontent-item-id|data-kontent-component-id`(target item) & `data-kontent-add-button`
-& `data-kontent-add-button-render-position?` & `data-kontent-add-button-insert-position=before|after`.
+
+```
-### SDK Initialization
+### SDK initialization
+
+To activate the Kontent.ai Smart Link SDK on your website, you need to initialize it after setting up all required
+data attributes. The SDK offers two methods for initialization:
+
+- `initialize`: Instantly initializes the SDK, making it ready to use. This method is ideal when your webpage
+ is fully loaded or when SDK initialization occurs after the document's `DOMContentLoaded` event.
+ ```ts
+ const instance = KontentSmartLink.initialize({ queryParam: "preview" });
+ ```
+- `initializeOnLoad`: Delays SDK initialization until the entire page has loaded. This approach is particularly useful
+ for including the SDK in the `` of your webpage, ensuring that all page elements are fully loaded before
+ initialization begins.
+ ```ts
+ KontentSmartLink.initializeOnLoad().then(instance => {
+ // SDK is fully initialized and ready to use
+ });
+ ```
-After all data attributes have been set, you can initialize Kontent.ai Smart Link SDK on your website. You can use
-`initialize` or `initializeOnLoad` method in order to do it. Both of the previously mentioned methods return an instance
-of initialized SDK (`initializeOnLoad` returns a Promise resolving to an instance). The main difference between the two
-methods is that the `initializedOnLoad` method will wait for the page to load before initializing the SDK. This can be
-useful when you want to initialize the SDK in the `head` section of your webpage when the page has not been fully loaded
-yet.
+Both methods return an SDK instance, with `initializeOnLoad` returning a promise that resolves to an instance.
+It is important to manage this instance appropriately:
-Kontent.ai Smart Link SDK uses multiple event listeners, timeouts, observers to track the position of the relevant
-elements, so please always call `.destroy()` method to dispose all of those side effects before trying to initialize the
-SDK again (e.g. inside `useEffect` cleanup function) to avoid memory leaks.
+- **Accessing the SDK instance:** Store the returned instance if you need to access SDK methods after initialization.
+- **Resource management:** The SDK leverages event listeners, timeouts, and observers to function properly. To prevent
+ memory leaks or unintended behavior always invoke the `.destroy()` method on the SDK instance before re-initializing
+ the SDK. This is crucial in single-page applications or dynamic webpages where content might be loaded multiple
+ times without a full page refresh.
+ ```ts
+ useEffect(() => {
+ const instance = KontentSmartLink.initialize();
+ return () => instance.destroy();
+ })
+ ```
-### Configuration
+#### Configuration
-Both initialization methods take an optional configuration argument, that you can use to configure the SDK. You can also
-use instance `setConfiguration` method to update configuration of initialized SDK.
+Customize how the SDK operated on your preview website with optional configuration arguments passed during
+initialization. Configuration can be adjusted post-initialization using the `setConfiguration` method.
-|Attribute|Default|Description|
-|---------|:-------:|-----------|
-|debug|false|When it's set to `true`, enables all debug logs. Can be useful to get more information about how the SDK works inside, but can affect performance.
-|defaultDataAttributes|```{ projectId: undefined, languageCodename: undefined }```|Default values for data attributes, which are only used when those data attributes are not found in DOM during data attributes parsing process. For now, only `projectId` and `languageCodename` attributes are supported. |
-|queryParam|`ksl-enabled`|Name of the query parameter that must be present in the URL to turn the smart link injection on. It is not necessary for query parameter to have a truthy value (just the presence of this query parameter is checked). If set to falsy value ('', null), the smart link injection will always be enabled. Query parameter is only used outside Web Spotlight.|
+| Attribute | Default | Description |
+|-----------------------|:-----------------------------------------------------------:|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| debug | false | Set to `true` to enable detailed logging, aiding in development and troubleshooting. Note: This may impact performance.
+| defaultDataAttributes | ```{ projectId: undefined, languageCodename: undefined }``` | Define default values for essential data attributes to streamline setup. |
+| queryParam | `ksl-enabled` | Name of the query parameter that must be present in the URL to turn the smart link injection on. It is not necessary for query parameter to have a truthy value (just the presence of this query parameter is checked). If set to falsy value ('', null), the smart link injection will always be enabled. Query parameter is only used outside Web Spotlight. |
-### Customization
+#### Customization
The following [custom CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) can be used to customize the
visuals of the SDK output.
-|Custom property|Default|Description|
-|---|:---:|---|
-|--ksl-color-background-default|`rgba(255, 255, 255, 1)`|Default background color used in toolbar and popover.|
-|--ksl-color-background-default-disabled|`rgba(223, 223, 223, 1)`|Disabled background color for buttons inside toolbar and popover.|
-|--ksl-color-background-default-hover|`rgba(21, 21, 21, 0.1)`|Hover background color for buttons inside toolbar and popover.|
-|--ksl-color-background-default-selected|`rgba(255, 240, 239, 1)`|Selected background color for buttons inside toolbar and popover.|
-|--ksl-color-background-secondary|`rgba(20, 22, 25, 1)`|Secondary background color used in tooltips.|
-|--ksl-color-primary|`rgba(219, 60, 0, 1)`|Primary color used as a hover border color in highlights and as a background color in add buttons.|
-|--ksl-color-primary-hover|`rgba(149, 48, 0, 1)`|Primary color used as a hover background color in add buttons.|
-|--ksl-color-primary-transparent|`rgba(219, 60, 0, 0.5)`|Primary color with transparency used as a default border color in highlights.|
-|--ksl-color-text-default|`rgba(255, 255, 255, 1)`|Text color used on a default background (buttons inside toolbar and popover).|
-|--ksl-color-text-default-disabled|`rgba(140, 140, 140, 1)`|Disabled text color used on a default background.|
-|--ksl-color-text-secondary|`rgba(21, 21, 21, 1)`|Text color used inside tooltips and add buttons.|
-|--ksl-shadow-default|`0 8px 32px rgba(16, 33, 60, 0.24), 0 0 8px rgba(0, 0, 0, 0.03)`|Default shadow for toolbar.|
-|--ksl-shadow-primary|`0 8px 10px rgba(219, 60, 0, 0.2), 0 6px 20px rgba(219, 60, 0, 0.12), 0 8px 14px rgba(219, 60, 0, 0.14)`|Shadow for add buttons.|
-|--ksl-z-index|`9000`|Base value of z-index used for calculation of individual values for each ksl-element type|
-
-For example, if you want to override all SDK colors and shadows for all SDK elements on the page, you can do it by
-changing the values of all available custom properties of a `:root` element in your CSS or inside a new `