Themes content removal continued

Author: dimodi

accessibility/accessibility-swatch.md

@@ -25,12 +25,12 @@ The Default Ocean Blue A11y swatch is built on top of the Default Ocean Blue swa
 
 ## Using the Accessibility Swatch
 
-You can [obtain and use the Default Ocean Blue A11y swatch]({%slug themes-swatches%}#using-built-in-swatches) starting from the following component and theme versions:
+You can [obtain and use the Default Ocean Blue A11y swatch]({%slug themes-overview%}#swatch) starting from the following component and theme versions:
 
 * [Telerik UI for Blazor version 4.0.1](https://www.telerik.com/support/whats-new/blazor-ui/release-history/ui-for-blazor-4-0-1)
 * [Themes version 6.0.3](https://github.com/telerik/kendo-themes/releases/tag/v6.0.3)
 
-Check section [Theme Version Compatibility]({%slug themes-overview%}#theme-version-compatibility-and-maintenance) for more information about how to align Telerik UI for Blazor versions with theme versions.
+Check section [Theme Version Compatibility]({%slug themes-overview%}#compatibility-and-maintenance) for more information about how to align Telerik UI for Blazor versions with theme versions.
 
 > An existing limitation is that the ColorPalette component fails WCAG success criterion 1.4.11. "Non-text contrast for the focus indicator on its items".
 

common-features/cdn.md

@@ -22,7 +22,7 @@ The CDN hosts two kinds of static client assets for the Telerik UI for Blazor co
 
 The [Telerik CSS themes]({%slug themes-overview%}) are available on two CDN hosts:
 
-* `unpkg.com` provides [all built-in theme swatches]({%slug themes-swatches%}#swatch-urls). The version number in the theme URL matches the version of the theme itself. Make sure to [use compatible theme and component versions]({%slug themes-swatches%}#theme-version-compatibility-and-maintenance). For example, use theme version `{{site.themesVersion}}` with UI for Blazor version `{{site.uiForBlazorLatestVersion}}`.
+* `unpkg.com` provides [all built-in theme swatches]({%slug themes-overview%}#swatch). The version number in the theme URL matches the version of the theme itself. Make sure to [use compatible theme and component versions]({%slug themes-overview%}#compatibility-and-maintenance). For example, use theme version `{{site.themesVersion}}` with UI for Blazor version `{{site.uiForBlazorLatestVersion}}`.
 * `blazor.cdn.telerik.com` provides a limited set of popular [theme swatches]({%slug themes-overview%}#basics). The version number in the theme URL matches the version of the Telerik UI for Blazor components, for example, `{{site.uiForBlazorLatestVersion}}`.
 
 ### UNPKG CDN

knowledge-base/change-theme-runtime.md

@@ -3,7 +3,7 @@ title: Change Telerik Theme at Runtime
 description: Learn how to switch the Telerik Blazor theme at runtime on the fly with JavaScript.
 type: how-to
 page_title: How to Change the Telerik Theme or Swatch at Runtime
-slug: common-kb-common-kb-change-theme-runtime
+slug: common-kb-change-theme-runtime
 position: 
 tags: telerik, blazor, theme
 ticketid: 1442823
@@ -74,7 +74,7 @@ The following algorithm follows the commonly used approach to replace a CSS file
     ```
 1. Implement UI that triggers the JavaScript theme change. After the new CSS theme is loaded, refresh all Telerik components that use SVG or Canvas rendering, such as BarCodes, Charts, Gauges, and QR Codes.
 
-    > Make sure [the version number in the theme URL is compatible with the version of Telerik UI for Blazor]({%slug themes-overview%}#theme-version-compatibility-and-maintenance).
+    > Make sure [the version number in the theme URL is compatible with the version of Telerik UI for Blazor]({%slug themes-overview%}#compatibility-and-maintenance).
     >
     > Replace `Index` in the code below with the correct Razor component name.
 

knowledge-base/common-telerik-themes-libman.md

@@ -29,7 +29,7 @@ This KB article answers the following questions:
 * How to use LibMan to add Telerik themes to your Telerik Blazor app.
 * How to update local themes in `wwwroot` automatically when a new version is available.
 
-[LibMan](https://learn.microsoft.com/en-us/aspnet/core/client-side/libman/) is a client-side dependency manager, which is included in ASP.NET Core. You can use it to automatically download a Telerik theme to the `wwwroot` folder of your app, instead of using [static NuGet assets]({%slug themes-overview%}#loading-themes-from-the-nuget-package) or [Telerik themes CDN]({%slug themes-swatches%}#swatch-urls).
+[LibMan](https://learn.microsoft.com/en-us/aspnet/core/client-side/libman/) is a client-side dependency manager, which is included in ASP.NET Core. You can use it to automatically download a Telerik theme to the `wwwroot` folder of your app, instead of using [static NuGet assets]({%slug themes-overview%}#loading-themes-from-the-nuget-package) or [Telerik CDN]({%slug common-features-cdn%}).
 
 The benefits of Libman are:
 
@@ -68,7 +68,7 @@ Use the following information when creating the `libman.json` file:
 
 > Using the `@latest` theme version requires the latest Telerik UI for Blazor version as well.
 
-> In rare cases the `@latest` version may produce an error similar to `The "@progress/kendo-theme-default@latest" library could not be resolved by the "unpkg" provider`. In such cases, replace the `@latest` moniker with a [specific theme version](https://github.com/telerik/kendo-themes/releases), depending on the [theme version compatibility with Telerik UI for Blazor]({%slug themes-overview%}#theme-version-compatibility-and-maintenance). For example, use `^8.0.0` to get the latest version of the major release `8`.
+> In rare cases the `@latest` version may produce an error similar to `The "@progress/kendo-theme-default@latest" library could not be resolved by the "unpkg" provider`. In such cases, replace the `@latest` moniker with a [specific theme version](https://github.com/telerik/kendo-themes/releases), depending on the [theme version compatibility with Telerik UI for Blazor]({%slug themes-overview%}#compatibility-and-maintenance). For example, use `^8.0.0` to get the latest version of the major release `8`.
 
 The `libman.json` file below adds the **Main** swatches of [all built-in themes]({%slug themes-overview%}#theme-names) and the font icon stylesheet. Remove the theme or font icons entries that you don't need.
 

knowledge-base/common-theme-customization-options.md

@@ -38,15 +38,15 @@ Is there a simple and streamlined way to customize all component styles?
 
 Generally, there are **four** ways to customize the appearance of the Telerik Blazor components. All of them, except the first one, add an extra step to **every** UI for Blazor version update.
 
-1. [Use color CSS variables to modify an existing theme]({%slug themes-custom%}#setting-theme-variables).
+1. [Use color CSS variables to modify an existing theme]({%slug themes-customize%}#setting-theme-variables).
     * This approach is supported for theme versions `8.0.0` and Telerik UI for Blazor versions `6.0.0` and above.
     * It is a simple and sustainable way to make minor or major customizations to the **colors** of an existing CSS theme, even at runtime.
     * Upgrading the Blazor components does not require any additional steps with regard to the CSS code, unless there are breaking changes in the CSS variable names.
     * The apperance of the Telerik components depends on CSS code in two different files. If you prefer to avoid this, then create a custom theme.
-1. [Use the ThemeBuilder to create a custom theme]({%slug themes-custom%}#using-themebuilder).
+1. [Use the ThemeBuilder to create a custom theme]({%slug themes-customize%}#using-themebuilder).
     * This option allows [customization of the theme **colors** with the free version, or **full control** with the Pro version](https://docs.telerik.com/themebuilder/introduction#themebuilder-tiers).
     * Upgrading the custom theme is straight-forward via [manual](https://docs.telerik.com/themebuilder/web-app/migrating-projects) or [automatic](https://docs.telerik.com/themebuilder/web-app/automatic-migrations) approach.
-2. [Build a custom theme from the SASS source]({%slug themes-custom%}#building-themes-from-source-code).
+2. [Build a custom theme from the SASS source]({%slug themes-customize%}#building-themes-from-source-code).
     * This option provides **full control** over the resulting CSS code.
     * Upgrading requires you to pull the changes from the [**`kendo-themes`** repo](https://github.com/telerik/kendo-themes) and **rebuild** the custom theme. Ideally, make only [variable and style overrides](https://github.com/telerik/kendo-themes/wiki/Core-Code-Concepts) with minimal edits to our source code itself. However, major customizations may require more changes and maintenance.
 3. [Override theme styles with additional CSS code]({%slug themes-override%}).
@@ -58,10 +58,10 @@ To change the sizing and layout of most or all our components, go for manual the
 
 The final decision depends on what and how much you need to customize and what other requirements may appear.
 
-[**Figma UI Kits**](https://www.telerik.com/figma-kits) allow designers to include visual representations of the Telerik components in their application designs. Custom kits still [require you to create a custom theme afterwards]({%slug ui-kits/themes%}#choosing-how-to-use-the-ui-kits).
+[**Figma UI Kits**](https://www.telerik.com/figma-kits) allow designers to include visual representations of the Telerik components in their application designs. Custom kits still require you to [create a custom theme]({%slug themes-customize%}) afterwards.
 
 
 ## See Also
 
-* [Custom Themes]({%slug themes-custom%})
+* [Custom Themes]({%slug themes-customize%})
 * [Use best practives when overriding theme styles]({%slug themes-override%}#best-practices)

knowledge-base/common-upgrade-breaks-css-theme-styles.md

@@ -40,7 +40,7 @@ The application is using an outdated CSS theme or swatch.
 To resolve the problem, follow the [recommended UI for Blazor upgrade procedure]({%slug upgrade-tutorial%}):
 
 * If using the [Telerik **CDN**]({%slug common-features-cdn%}) - update the [stylesheet file URL]({%slug themes-overview%}#using-a-theme) to the correct version.
-* If using a **local** CSS file in `wwwroot` - replace the stylesheet with a compatible one. If the application is using a [**custom theme**, then recreate it]({%slug themes-custom%}#import-custom-theme).
+* If using a **local** CSS file in `wwwroot` - replace the stylesheet with a compatible one. If the application is using a [**custom theme**, then recreate it]({%slug themes-customize%}#import-custom-theme).
 * If using **static assets** from the NuGet package - clear the browser cache and [add a cache buster for the Telerik CSS and JavaScript files]({%slug common-kb-browser-cache-buster%}).
 
 A version update might break custom application CSS styles that are outside the Telerik theme. In this case, then check if the component HTML rendering or CSS classes have changed, and adjust the custom CSS code.

styling-and-themes/custom-theme.md

@@ -2,7 +2,7 @@
 title: Customize Themes
 page_title: Customize Themes
 description: Learn how to create a custom theme for you Blazor application and alter the default appearance of the UI for Blazor components.
-slug: themes-custom
+slug: themes-customize
 tags: telerik,blazor,theme,custom
 published: True
 previous_url: /themes/custom-theme
@@ -11,41 +11,29 @@ position: 10
 
 # Customize Themes
 
-Custom themes allow you to modify the appearance of the Telerik UI for Blazor components, so they match the desired color scheme and your Blazor app coloring and style.
+There are several ways to customize the appearance of Telerik Blazor components. Each is suitable for specific scenarios and business requirements. This article describes the pros and cons, and compares all CSS customization alternatives.
 
-This article contains the following sections:
-
-* [Compare the visual customization options for the Telerik Blazor components](#visual-customization-options)
 * [Create custom themes with the Progress ThemeBuilder](#using-themebuilder)
-* [Customize theme variables](#setting-theme-variables)
+* [Override theme variables](#setting-theme-variables)
+* [Override theme styles](#overriding-theme-styles)
 * [Build custom themes manually](#building-themes-from-source-code)
 * [Load a custom theme in your app](#loading-custom-themes)
 
 > When you use custom themes for Telerik UI for Blazor components, you must recreate the custom theme every time you update the Telerik components in your application. This ensures compatibility and allows you to get the theme updates and fixes.
 
 
-## Visual Customization Options
-
-You can customize the appearance of the Telerik Blazor components in several ways. Each has pros and cons, and each is most suitable for specific scenarios and business requirements. The [Blazor Theme Customization Options]({%slug common-kb-theme-customization-options%}) article offers a comparison between these CSS customization alternatives.
-
-
 ## Using ThemeBuilder
 
-[ThemeBuilder](https://docs.telerik.com/themebuilder) is a web application that enables you to create new custom themes by changing the styles of existing built-in themes. Every change that you make is visualized almost instantly. Once you are done styling the UI components, you can export a ZIP file with the desired styles and [use the custom theme in your Blazor app](#loading-custom-themes).
-
+[ThemeBuilder](https://docs.telerik.com/themebuilder) is a web application that enables you to create new custom themes by changing the styles of existing built-in themes. Every change that you make is visualized instantly. Once you are done styling the UI components, you can export a ZIP file with the desired styles and [add the custom theme to your Blazor app](#loading-custom-themes).
 
-## Setting Theme Variables
+The ThemeBuilder allows [different customization capabilities, depending on the used tier](https://docs.telerik.com/themebuilder/introduction#themebuilder-tiers).
 
-The Telerik themes define a collection of theme variables and values. Then, these variables take part in CSS rules to apply consistent styles to all Telerik Blazor components. With regard to colors, the themes rely on a [color system](https://www.telerik.com/design-system/docs/foundation/color/), which is built on [color variable groups](https://www.telerik.com/design-system/docs/foundation/color/swatch/) and [color palettes](https://www.telerik.com/design-system/docs/foundation/color/color-palettes/).
 
-It is possible to customize the appearance of the Telerik UI for Blazor components if you override the theme variable values outside the theme CSS file. This spares the need to create and maintain a full custom theme.
+## Setting Theme Variables
 
-Each theme defines the same collection of variables, but with different values:
+Each theme defines the same collection of variables, but with different values. For example, here are the [Default theme variables](https://www.telerik.com/design-system/docs/themes/theme-default/theme-variables/). It is possible to override the theme variable values outside the theme CSS file. In this way you can customize the appearance of the Telerik Blazor components without the need to create and maintain a full custom theme.
 
-* [Default theme variables](https://www.telerik.com/design-system/docs/themes/theme-default/theme-variables/)
-* [Bootstrap theme variables](https://www.telerik.com/design-system/docs/themes/theme-bootstrap/theme-variables/)
-* [Material theme variables](https://www.telerik.com/design-system/docs/themes/theme-material/theme-variables/)
-* [Fluent theme variables](https://www.telerik.com/design-system/docs/themes/theme-fluent/theme-variables/)
+This approach is supported starting from theme version `8.0.0` and Telerik UI for Blazor version `6.0.0`. Upgrading the Blazor components does not require any additional steps with regard to the CSS code, unless there are breaking changes in the CSS variable names.
 
 The example below shows how to customize some of the theme variables.
 
@@ -87,6 +75,12 @@ The example below shows how to customize some of the theme variables.
 }
 ````
 
+## Overriding Theme Styles
+
+You can [override theme styles with custom CSS]({%slug themes-override%}), no matter if the app is using a built-in or custom theme. This approach makes sense only for a relatively small number of customization. Beyond that, choose some of the other alternatives on this page.
+
+Upgrading may require changes to the additional custom CSS code, but only if there are breaking changes in the HTML output and styling.
+
 
 ## Building Themes From Source Code
 
@@ -99,8 +93,8 @@ The [Theme Customization page of the Progress Design System documentation](https
 
 Custom themes are used in a [similar way as the built-in themes]({%slug getting-started/what-you-need%}#css-theme). The notable differences are:
 
-* The custom theme must reside in the `wwwroot` folder of the Blazor app or on a custom CDN provider.
-* You must [recreate custom themes every time you update the Telerik UI for Blazor version]({%slug upgrade-tutorial%}).
+* The custom theme must reside in the `wwwroot` folder of the Blazor app or on a CDN provider.
+* You must recreate custom themes every time you [update the Telerik UI for Blazor version]({%slug upgrade-tutorial%}).
 
 Make sure that the Blazor app is loading only one Telerik theme at a time. If you are replacing a built-in theme with a custom theme, you must remove the `<link>` element of the built-in theme.
 

styling-and-themes/override-theme-styles.md

@@ -11,7 +11,7 @@ previous_url: /styling-and-themes/good-styling-practices
 
 # Override Theme Styles
 
-Sometimes you may need to make a small change to the appearance of a component, while still using the same [built-in]({%slug themes-overview%}) or [custom]({%slug themes-custom%}) theme.
+Sometimes you may need to make a small change to the appearance of a component, while still using the same [built-in]({%slug themes-overview%}) or [custom]({%slug themes-customize%}) theme.
 
 This article provides high-level guidance about the knowledge and tools required to override existing CSS styles without changing the theme's CSS file. In scenarios with a larger number of customizations, it may be [more practical to use a different approach, for example, a custom theme]({%slug common-kb-theme-customization-options%}).