Theme Swatches docs

installation/zip.md

@@ -19,6 +19,7 @@ The `ZIP` archive provides the following:
 * The [necessary `.nupkg` files]({%slug getting-started/what-you-need%}) so you can setup a [local feed in Visual Studio](#set-up-a-local-nuget-feed-in-visual-studio). You can find them in the `packages` folder in the archive.
 * An offline version of our [demos](https://demos.telerik.com/blazor-ui) that you can run and inspect in your IDE. You can find them in the `demos` folder in the archive.
 * The [document processing]({%slug common-features-dpl%}) `.nupkg` files (in the `dpl` folder).
+* The [built-in themes]({%slug general-information/themes%}) and some of their most commonly used [swatches]({%slug themes-swatches%}). You can find them in the `styles` folder in the archive.
 
 
 ## How to Download the ZIP Archive

styling-and-themes/theme-swatches.md

@@ -0,0 +1,89 @@
+---
+title: Theme Swatches
+page_title: Theme Swatches
+description: The UI for Blazor suite comes with a set of built-in themes and themes swatches that you can choose from.
+slug: themes-swatches
+tags: telerik,blazor,theme,swatch
+published: True
+position: 1
+---
+
+# Theme Swatches
+
+Telerik UI for Blazor comes with three [built-in (base) themes]({%slug general-information/themes%}). Each of them provides a set of color swatches that you can choose from to match your application appearance and styling.
+
+#### In this article:
+   * [Basics](#basics)
+   * [Buit-in themes and swatches list](#buit-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%}).
+
+You can find the built-in themes and their swatches in the following resources:
+
+* [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.
+
+* [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.
+
+* 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.
+
+
+## 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.
+
+* [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 information about the correct theme version for each UI for Blazor version.
+
+
+### Default
+
+* Default Main - https://cdn.kendostatic.com/themes/4.41.2/default/default-main.css
+* Default Main Dark - https://cdn.kendostatic.com/themes/4.41.2/default/default-main-dark.css
+* Default Blue - https://cdn.kendostatic.com/themes/4.41.2/default/default-blue.css
+* Default Green - https://cdn.kendostatic.com/themes/4.41.2/default/default-green.css
+* Default Nordic - https://cdn.kendostatic.com/themes/4.41.2/default/default-nordic.css
+* Default Orange - https://cdn.kendostatic.com/themes/4.41.2/default/default-orange.css
+* Default Purple - https://cdn.kendostatic.com/themes/4.41.2/default/default-purple.css
+* Default Turquoise - https://cdn.kendostatic.com/themes/4.41.2/default/default-turquoise.css
+* Default Urban - https://cdn.kendostatic.com/themes/4.41.2/default/default-urban.css
+
+
+### Bootstrap
+
+* Bootstrap Main - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-main.css
+* Bootstrap Main Dark - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-main-dark.css
+* Bootstrap 3 - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-3.css
+* Bootstrap 3 Dark - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-3-dark.css
+* Bootstrap 4 - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-4.css
+* Bootstrap 4 Dark - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-4-dark.css
+* Bootstrap Nordic - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-nordic.css
+* Bootstrap Turquoise - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-turquoise.css
+* Bootstrap Turquoise Dark - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-turquoise-dark.css
+* Bootstrap Urban - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-urban.css
+* Bootstrap Vintage - https://cdn.kendostatic.com/themes/4.41.2/bootstrap/bootstrap-vintage.css
+
+
+### Material
+
+* Material Main - https://cdn.kendostatic.com/themes/4.41.2/material/material-main.css
+* Material Main Dark - https://cdn.kendostatic.com/themes/4.41.2/material/material-main-dark.css
+* Material Aqua Dark - https://cdn.kendostatic.com/themes/4.41.2/material/material-aqua-dark.css
+* Material Arctic - https://cdn.kendostatic.com/themes/4.41.2/material/material-arctic.css
+* Material Burnt Teal - https://cdn.kendostatic.com/themes/4.41.2/material/material-burnt-teal.css
+* Material Eggplant - https://cdn.kendostatic.com/themes/4.41.2/material/material-eggplant.css
+* Material Lime - https://cdn.kendostatic.com/themes/4.41.2/material/material-lime.css
+* Material Lime Dark - https://cdn.kendostatic.com/themes/4.41.2/material/material-lime-dark.css
+* Material Nova - https://cdn.kendostatic.com/themes/4.41.2/material/material-nova.css
+* Material Pacific - https://cdn.kendostatic.com/themes/4.41.2/material/material-pacific.css
+* Material Pacific Dark - https://cdn.kendostatic.com/themes/4.41.2/material/material-pacific-dark.css
+* Material Sky - https://cdn.kendostatic.com/themes/4.41.2/material/material-sky.css
+* Material Sky Dark - https://cdn.kendostatic.com/themes/4.41.2/material/material-sky-dark.css
+* Material Smoke - https://cdn.kendostatic.com/themes/4.41.2/material/material-smoke.css