* docs(swatches):distriution article draft

* docs(themes):new cdn, swatches distribution, accessibility swatch

* Update styling-and-themes/swatch-distribution.md

* Update _contentTemplates/common/general-info.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

* Update styling-and-themes/overview.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

* Update styling-and-themes/swatch-distribution.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

* Update styling-and-themes/swatch-distribution.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

* Update styling-and-themes/swatch-distribution.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

* Update styling-and-themes/swatch-distribution.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

* Update accessibility/accessibility-swatch.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

* docs(themes):address feedback

* docs(themes):final touches

* Update styling-and-themes/swatch-distribution.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

* Update accessibility/accessibility-swatch.md

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>

Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
This commit is contained in:
Nadezhda Tacheva 2022-04-14 00:40:49 +03:00 коммит произвёл GitHub
Родитель 5b5e03d39c
Коммит 3598777a11
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
6 изменённых файлов: 193 добавлений и 48 удалений

Просмотреть файл

@ -13,6 +13,10 @@ the `Format` is culture-specific and the same format may produce different resul
#cdn
You can reference the built-in Telerik assets from a cloud CDN instead of a local resource on your server.
The Telerik Blazor CDN distributes the most common swatches of each base theme. Check out the [Telerik Blazor CDN URLs]({%slug themes-swatch-distribution%}#telerik-blazor-cdn).
All available swatches are distributed via dedicated Themes CDN. The following section contains a complete list of their CDN URLs - [Built-in themes and swatches list]({%slug themes-swatches%}#built-in-themes-and-swatches-list).
````CSHTML
<!DOCTYPE html>
<html>

Просмотреть файл

@ -0,0 +1,28 @@
---
title: Ocean Blue Accessibility Swatch
page_title: Ocean Blue Accessibility Swatch
description: Ocean Blue Accessibility Swatch in the Telerik UI for Blazor suite.
slug: themes-accessibility-swatch
tags: telerik,blazor,accessibility,swatch,theme,ocean,blue,default
published: True
position: 7
---
# Ocean Blue Accessibility Swatch
The [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG21/) sections [1.4.3 Contrast (Minimum)](https://www.w3.org/TR/WCAG21/#contrast-minimum) and [1.4.6 Contrast (Enhanced)](https://www.w3.org/TR/WCAG21/#contrast-enhanced) define the required contrast ratio for compliance. The WCAG Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. Telerik UI for Blazor library conforms to WCAG Level AA with the Default Ocean Blue theme swatch (available as of **3.2.0** version).
You can test the accessibility swatch in our [live demos](https://demos.telerik.com/blazor-ui/grid/overview) - it is initially selected in the `Change Theme` menu.
Telerik UI for Blazor distributes the Default Ocean Blue theme swatch via several resources. Read more in the [Swatch Distribution]({%slug themes-swatch-distribution%}) article.
In addition, it is also available in:
* [Themes CDN]({%slug themes-swatches%}#built-in-themes-and-swatches-list)
* [Sass Themebuilder](https://themebuilder.telerik.com/blazor-ui) - for testing and [color customization]({%slug themes-custom%})
* [kendo-themes repository](https://github.com/telerik/kendo-themes)
## See Also
* [Accessibility Overview]({%slug accessibility-overview%})
* [Globalization Overview]({%slug globalization-overview%})

Просмотреть файл

@ -21,3 +21,4 @@ Accessibility consists of several aspects:
## See Also
* [Telerik UI for Blazor Accessibility Compliance]({%slug accessibility-compliance%})
* [Default Ocean Blue Accessibility Swatch]({%slug themes-accessibility-swatch%})

Просмотреть файл

@ -13,7 +13,7 @@ position: 0
The UI for Blazor suite comes with a set of built-in themes that you can choose from to alter the visual appearance of the Telerik components (you can test them in our [live demos](https://demos.telerik.com/blazor-ui/)):
* **Default** - our own neutral styling that suits most cases.
* **Default** - our own neutral styling that suits most cases. Includes the [Ocean Blue accessibility swatch]({%slug themes-accessibility-swatch%}).
* **Bootstrap** - a theme that matches the Bootstrap styling. Read more in the [Bootstrap Notes](#bootstrap-notes) section.
* **Material** - implements the [Material Design Guidelines](https://material.io/design/). Read more in the [Material Notes](#material-notes) section.

Просмотреть файл

@ -0,0 +1,101 @@
---
title: Swatch Distribution
page_title: Swatch Distribution
description: The UI for Blazor suite distributes most commonly used swatches. Explore how you can access them.
slug: themes-swatch-distribution
tags: telerik,blazor,theme,swatch,distribution
published: True
position: 2
---
# Swatch Distribution
Telerik UI for Blazor distributes the most commonly used swatches. While it is possiblle to get them from the [Themes CDN]({%slug themes-swatches%}#buit-in-themes-and-swatches-list), the [Sass Theme Builder]({%slug themes-custom%}#using-the-sass-theme-builder) or the [kendo-themes repository](https://github.com/telerik/kendo-themes), this article lists a couple other ways of distribution.
>caption In this article:
* [Distributed Swatches](#distributed-swatches)
* [Distribution Options](#distribution-options)
* [Telerik Blazor CDN](#telerik-blazor-cdn)
* [ZIP archive](#zip-archive)
* [Visual Studio and Visual Studio Code Wizards](#visual-studio-and-visual-studio-code-wizard)
# Distributed Swatches
The following swatches are statistically most used, so we've included them in our [live demos](https://demos.telerik.com/blazor-ui/grid/overview) to allow easy testing. In addition, we are also distributing them via [several resources](#distribution-options).
Telerik UI for Blazor distributed swatches:
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
| Default | Bootstrap | Material |
| ----------- | ----------- | -------|
| Main | Main | Main
| Main Dark | Main Dark | Arctic
| [Ocean Blue]({%slug themes-accessibility-swatch%}) | Nordic | Nova
| Nordic | Urban | Lime Dark
| Purple | Vintage | Main Dark
| Turquoise
## Distribution Options
The above listed swatches are distributed in several ways:
### Telerik Blazor CDN
A dedicated Telerik UI for Blazor CDN hosts them in the `swatches` folder of the corresponding base theme. Below you will find a list of the distributed swatches and their CDN URLs.
The CDN URLs contain the Telerik UI for Blazor version. Thus, you do not need to manually track the theme compatibility. Just make sure to use your UI for Blazor version in the URL.
#### Default
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
Swatch | CDN |
| ----------- | ----------- |
| Main | https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-default/swatches/default-main.css
| Main Dark | https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-default/swatches/default-main-dark.css
| [Ocean Blue]({%slug themes-accessibility-swatch%}) | https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-default/swatches/default-ocean-blue.css
| Nordic | https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-default/swatches/default-nordic.css
| Purple | https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-default/swatches/default-purple.css
| Turquoise | https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-default/swatches/default-turquoise.css
#### Bootstrap
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
Swatch | CDN |
| ----------- | ----------- |
| Main | https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-bootstrap/swatches/bootstrap-main.css
| Main Dark | https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-bootstrap/swatches/bootstrap-main-dark.css
| Nordic | https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-bootstrap/swatches/bootstrap-nordic.css
| Urban | https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-bootstrap/swatches/bootstrap-urban.css
| Vintage | https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-bootstrap/swatches/bootstrap-vintage.css
#### Material
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
Swatch | CDN |
| ----------- | ----------- |
| Main | https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-material/swatches/material-main.css
| Arctic | https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-material/swatches/material-arctic.css
| Nova | https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-material/swatches/material-nova.css
| Lime Dark | https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-material/swatches/material-lime-dark.css
| Main Dark | https://blazor.cdn.telerik.com/blazor/{{site.uiForBlazorLatestVersion}}/kendo-theme-material/swatches/material-main-dark.css
### ZIP archive
One of the ways to install Telerik UI for Blazor is to use the ZIP Archive. Its `styles` folder contains all the above swatches. You can [download it from your Telerik account](https://www.telerik.com/account/downloads). Here is [more information about the ZIP Archive]({%slug installation/zip%})...
### Visual Studio and Visual Studio Code Wizards
You can use the Telerik Blazor Extensions to easily create a new project pre-configured to use the Telerik UI for Blazor components or convert your existing one to add them. Telerik Blazor Extensions are available for Visual Studio and Visual Studio Code.
The **Create New Project** wizards for [Visual Studio]({%slug getting-started-vs-integration-new-project%}) and [Visual Studio Code]({%slug getting-started-vs-code-integration-new-project%}) allow you to select the desired theme/swatch for your application. The wizards provide the above list of common swatches.
Once you've created the project, the selected theme will be saved locally in the `wwwroot/lib/blazor-ui/styles` folder of the application. With this configuration, **upgrading UI for Blazor requires you to replace this CSS file manually**.

Просмотреть файл

@ -14,76 +14,87 @@ Telerik UI for Blazor comes with three [built-in (base) themes]({%slug general-i
#### In this article:
* [Basics](#basics)
* [Buit-in themes and swatches list](#buit-in-themes-and-swatches-list)
* [Built-in themes and swatches list](#built-in-themes-and-swatches-list)
## Basics
The theme swatches are different color variations of the base themes. While they use the same variables as the built-in theme they accompany, they have different color values to deliver a variety of shades for the Telerik components. Any of the base themes and their swatches can be easily customized as desired - read more about that in the [Custom Themes article]({%slug themes-custom%}).
The theme swatches are different color variations of the base themes. While they use the same variables as the built-in theme they accompany, they have different color values to deliver a variety of shades for the Telerik components.
You can find the built-in themes and their swatches in the following resources:
You can explore the swatches in our [live demos](https://demos.telerik.com/blazor-ui/grid/overview). The `Change Theme` dropdown provides a list of the most common swatches. To test how all the available swatches affect the appearance of the Telerik UI for Blazor components, you might check the [Sass Themebuilder](https://themebuilder.telerik.com/blazor-ui). It also provides option for [customizing the existing themes]({%slug themes-custom%}) if needed.
* [Sass Themebuilder](https://themebuilder.telerik.com/blazor-ui) - it is a web application that enables you to [create new or customize existing themes]({%slug themes-custom%}). You can use it to explore how certain theme/swatch will affect the appearance of the Telerik UI for Blazor components.
In addition, Telerik UI for Blazor distributes some swatches via several other resources. Read more in the [Swatch Distribution]({%slug themes-swatch-distribution%}) article.
* [kendo-themes repository](https://github.com/telerik/kendo-themes) - the repository for all themes and swatches that are used across Telerik and Kendo web components.
## Built-in themes and swatches list
* ZIP archive for Telerik UI for Blazor - the `styles` folder contains the base themes and a some of their most commonly used swatches. The [ZIP Archive]({%slug installation/zip%}) article provides more details on how to get the archive.
Here is a complete list of the base themes, all available swatches and their CDN URLs in a dedicated Themes CDN.
## Buit-in themes and swatches list
Here is a complete list of the base themes, all available swatches and their CDN URLs.
* [Default](#default) - These are the mostly ported swatches from our [Sass Themebuilder](https://themebuilder.telerik.com/blazor-ui). Main swatch is the current "Default" theme.
* [Default](#default) - These are the mostly ported swatches from our [Sass Themebuilder](https://themebuilder.telerik.com/blazor-ui).
* [Bootstrap](#bootstrap) - Main swatch is the current "[Bootstrap]({%slug general-information/themes%}#bootstrap-notes)" theme, which is built on Bootstrap 5. As the other names suggest, Bootstrap 3 and Bootstrap 4 swatches are color swatches adapted to look like the respective versions.
* [Material](#material) - Based on Material Design. Main is our "[Material]({%slug general-information/themes%}#material-notes)" theme, which itself is built around the initial theme of <a href = "https://material.angular.io/" target = "_blank">material.angular.io</a>.
>important Make sure that the theme version in the CDN URL is compatible with the UI for Blazor version. Our [release notes](https://www.telerik.com/support/whats-new/blazor-ui/release-history) provide theme compatibility information for each UI for Blazor version. You can also use a [newer theme version](https://github.com/telerik/kendo-themes/releases), if it doesn't contain breaking changes and has a fix that you need.
>important Make sure that the theme version in the CDN URL is compatible with the UI for Blazor version. Our [release notes](https://www.telerik.com/support/whats-new/blazor-ui/release-history) provide theme compatibility information for each UI for Blazor version. You can also use a [newer theme version](https://github.com/telerik/kendo-themes/releases), if it doesn't contain breaking changes and has a fix that you need.
>tip We distribute the most commonly used swatches in a separate [Telerik Blazor CDN]({%slug themes-swatch-distribution%}#telerik-blazor-cdn). The CDN URLs contain the Telerik UI for Blazor version. Thus, you do not need to manually track the theme compatibility, just make sure to use the CDN URL including your UI for Blazor version.
### Default
* Default Main - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/default/default-main.css
* Default Main Dark - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/default/default-main-dark.css
* Default Blue - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/default/default-blue.css
* Default Green - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/default/default-green.css
* Default Nordic - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/default/default-nordic.css
* Default Orange - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/default/default-orange.css
* Default Purple - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/default/default-purple.css
* Default Turquoise - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/default/default-turquoise.css
* Default Urban - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/default/default-urban.css
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
| Swatch | CDN |
| ----------- | ----------- |
| Default Main | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/default/default-main.css
| Default Main Dark | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/default/default-main-dark.css
| [Default Ocean Blue]({%slug themes-accessibility-swatch%}) | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/default/default-ocean-blue.css
| Default Blue | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/default/default-blue.css
| Default Green | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/default/default-green.css
| Default Nordic | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/default/default-nordic.css
| Default Orange | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/default/default-orange.css
| Default Purple | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/default/default-purple.css
| Default Turquoise | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/default/default-turquoise.css
| Default Urban | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/default/default-urban.css
### Bootstrap
* Bootstrap Main - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-main.css
* Bootstrap Main Dark - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-main-dark.css
* Bootstrap 3 - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-3.css
* Bootstrap 3 Dark - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-3-dark.css
* Bootstrap 4 - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-4.css
* Bootstrap 4 Dark - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-4-dark.css
* Bootstrap Nordic - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-nordic.css
* Bootstrap Turquoise - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-turquoise.css
* Bootstrap Turquoise Dark - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-turquoise-dark.css
* Bootstrap Urban - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-urban.css
* Bootstrap Vintage - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-vintage.css
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
| Swatch | CDN |
| ----------- | ----------- |
| Bootstrap Main | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-main.css
| Bootstrap Main Dark | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-main-dark.css
| Bootstrap 3 | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-3.css
| Bootstrap 3 Dark | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-3-dark.css
| Bootstrap 4 | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-4.css
| Bootstrap 4 Dark | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-4-dark.css
| Bootstrap Nordic | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-nordic.css
| Bootstrap Turquoise | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-turquoise.css
| Bootstrap Turquoise Dark | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-turquoise-dark.css
| Bootstrap Urban | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-urban.css
| Bootstrap Vintage | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/bootstrap/bootstrap-vintage.css
### Material
* Material Main - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-main.css
* Material Main Dark - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-main-dark.css
* Material Aqua Dark - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-aqua-dark.css
* Material Arctic - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-arctic.css
* Material Burnt Teal - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-burnt-teal.css
* Material Eggplant - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-eggplant.css
* Material Lime - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-lime.css
* Material Lime Dark - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-lime-dark.css
* Material Nova - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-nova.css
* Material Pacific - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-pacific.css
* Material Pacific Dark - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-pacific-dark.css
* Material Sky - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-sky.css
* Material Sky Dark - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-sky-dark.css
* Material Smoke - https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-smoke.css
@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
| Swatch | CDN |
| ----------- | ----------- |
| Material Main | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-main.css
| Material Main Dark | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-main-dark.css
| Material Aqua Dark | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-aqua-dark.css
| Material Arctic | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-arctic.css
| Material Burnt Teal | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-burnt-teal.css
| Material Eggplant | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-eggplant.css
| Material Lime | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-lime.css
| Material Lime Dark | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-lime-dark.css
| Material Nova | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-nova.css
| Material Pacific | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-pacific.css
| Material Pacific Dark | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-pacific-dark.css
| Material Sky | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-sky.css
| Material Sky Dark | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-sky-dark.css
| Material Smoke | https://cdn.kendostatic.com/themes/{{site.themeCdnVersion}}/material/material-smoke.css