Open Design System Docs links in a new tab

dimodi · dimodi · commit 7fc44fbae8ee · 2024-10-07T13:19:32.000+03:00
diff --git a/common-features/icons.md b/common-features/icons.md
@@ -176,7 +176,7 @@ Telerik UI for Blazor shares the same [themes]({%slug themes-overview%}) with se
 
 You can use the built-in font icons directly with HTML tags, without the `<TelerikFontIcon>` component. Such direct HTML usage may provide more flexibility, but if you don't really need it, we recommend using `FontIcon` objects and the `<TelerikFontIcon>` component instead.
 
-To use the icons directly, refer to [List of all Telerik Icons](https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/) and obtain the desired CSS class. The `<TelerikFontIcon>` component simply drops the `k-i-` CSS class prefix to make it easier for you.
+To use the icons directly, refer to <a href="https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/" target="_blank">List of all Telerik Icons</a> and obtain the desired CSS class. The `<TelerikFontIcon>` component simply drops the `k-i-` CSS class prefix to make it easier for you.
 
 >caption Use Telerik font icons with plain HTML
 
@@ -314,7 +314,7 @@ It is possible to configure the icon type for the whole application:
 
 ## Icons List
 
-The [Telerik Design System](https://www.telerik.com/design-system/docs/) website provides a list of all [**built-in icons in Telerik UI for Blazor**](https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/).
+The <a href="https://www.telerik.com/design-system/docs/" target="_blank">Progress Design System</a> website provides a list of all <a href="https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/" target="_blank">built-in icons in Telerik UI for Blazor</a>.
 
 To define an icon with C# syntax, replace the kebab-case with PascalCase. For example, `plus-outline` should become `FontIcon.PlusOutline` or `SvgIcon.PlusOutline`.
 
@@ -341,6 +341,6 @@ Telerik UI for Blazor supports using custom (third-party) icons:
 
 ## See Also
 
-* [Built-in Icon List](https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/)
+* <a href="https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/" target="_blank">Built-in Icon List</a>
 * [Blazor Live Demos](https://demos.telerik.com/blazor-ui/)
 * [CSS Themes]({%slug themes-overview%})
diff --git a/styling-and-themes/custom-theme.md b/styling-and-themes/custom-theme.md
@@ -31,7 +31,7 @@ The ThemeBuilder allows [different customization capabilities, depending on the
 
 ## Setting Theme Variables
 
-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/kendo-themes/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.
+Each theme defines the same collection of variables, but with different values. For example, here are the <a href="https://www.telerik.com/design-system/docs/themes/kendo-themes/default/theme-variables/" target="_blank">Default theme variables</a>. 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.
 
 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.
 
@@ -86,7 +86,7 @@ Upgrading may require changes to the additional custom CSS code, but only if the
 
 The most complex and flexible way to use Telerik themes is to build them from the SASS source code in your development environment.
 
-The [Theme Customization page of the Progress Design System documentation](https://www.telerik.com/design-system/docs/themes/customization/) and the [kendo-themes repository wiki](https://github.com/telerik/kendo-themes/wiki/Compiling-themes) provide more information about this process.
+The <a href="https://www.telerik.com/design-system/docs/themes/customization/" target="_blank">Theme Customization page of the Progress Design System documentation</a> and the [kendo-themes repository wiki](https://github.com/telerik/kendo-themes/wiki/Compiling-themes) provide more information about this process.
 
 
 ## Loading Custom Themes
diff --git a/styling-and-themes/overview.md b/styling-and-themes/overview.md
@@ -39,17 +39,17 @@ The CSS file of any swatch is self-sufficient and contains all required styles f
 The CSS themes represent an external dependency to Telerik UI for Blazor:
 
 * The themes represent a separate product, which is used by multiple Telerik and Kendo UI products. [Each Telerik UI for Blazor version is compatible with specific theme versions](#compatibility-and-maintenance).
-* The [Telerik and Kendo UI Themes documentation](https://www.telerik.com/design-system/docs/themes/get-started/introduction/) is part of the [Telerik Design System documentation](https://www.telerik.com/design-system/docs/). The content in the Telerik UI for Blazor documentation is introductory or specific only to the Blazor components.
+* The <a href="https://www.telerik.com/design-system/docs/themes/get-started/introduction/" target="_blank">Telerik and Kendo UI Themes documentation</a> is part of the <a href="https://www.telerik.com/design-system/docs/" target="_blank">Telerik Design System documentation</a>. The content in the Telerik UI for Blazor documentation is introductory or specific only to the Blazor components.
 * The Telerik and Kendo UI Themes have their own product development, roadmap and strategy. You can log public feature requests or bug reports on the [Telerik Themes feedback portal](https://feedback.telerik.com/themes).
 
 
 ## Built-in Themes
 
-The [Themes - Get Started page](https://www.telerik.com/design-system/docs/themes/get-started/introduction/#available-themes) lists the built-in themes in Telerik UI for Blazor and describes their unique specifics.
+The <a href="https://www.telerik.com/design-system/docs/themes/get-started/introduction/#available-themes" target="_blank">Themes - Get Started page</a> lists the built-in themes in Telerik UI for Blazor and describes their unique specifics.
 
 ### Comparing Themes and Swatches
 
-You can explore and compare the built-in theme swatches on the [live Telerik UI for Blazor demos](https://demos.telerik.com/blazor-ui/grid/overview). Use the **Change Theme** dropdown above each component example. To test how the available swatches affect the appearance of the Telerik UI for Blazor components, you can also check the [ThemeBuilder app](https://themebuilderapp.telerik.com). This tool provides the ability to [customize the existing themes and swatches](https://www.telerik.com/design-system/docs/themes/themebuilder/).
+You can explore and compare the built-in theme swatches on the [live Telerik UI for Blazor demos](https://demos.telerik.com/blazor-ui/grid/overview). Use the **Change Theme** dropdown above each component example. To test how the available swatches affect the appearance of the Telerik UI for Blazor components, you can also check the [ThemeBuilder app](https://themebuilderapp.telerik.com). This tool provides the ability to <a href="https://www.telerik.com/design-system/docs/themes/themebuilder/" target="_blank">customize the existing themes and swatches</a>.
 
 
 ## Using a Theme
@@ -59,12 +59,12 @@ To register a theme, you must reference its stylesheet in the `<head>` of the we
 There are three ways to load a Telerik theme, in terms of physical CSS file location. Note that each option provides access to a different number of theme swatches.
 
 * [Load a CSS theme as a static asset from the `Telerik.UI.for.Blazor` NuGet package](#loading-themes-from-the-nuget-package). This is the easiest option and it doesn't require maintenance during [Telerik UI for Blazor version upgrades]({%slug upgrade-tutorial%}). However, you can use only the *Main* swatch of each theme and the *Ocean Blue* swatch of the *Default* theme.
-* Load a CSS theme from a remote URL, for example, CDN. The dedicated [documentation of each theme provides a list of swatches and their URLs](https://www.telerik.com/design-system/docs/themes/kendo-themes/default/).
+* Load a CSS theme from a remote URL, for example, CDN. The dedicated <a href="https://www.telerik.com/design-system/docs/themes/kendo-themes/default/" target="_blank">documentation of each theme provides a list of swatches and their URLs</a>.
 * Load a CSS theme as a local file in the `wwwroot` folder in the Blazor app. This option is relevant to the following cases:
     * When using [custom themes]({%slug themes-customize%}).
     * When [creating]({%slug getting-started-vs-integration-new-project%}) or [converting]({%slug getting-started-vs-integration-convert-project%}) Telerik Blazor apps with the [Telerik UI for Blazor Visual Studio extension]({%slug getting-started-vs-integration-overview%}).
     * When using themes from the Telerik UI for Blazor [MSI installer]({%slug installation/msi%}) or [ZIP archive]({%slug installation/zip%}). The CSS files are in the `swatches` folder.
-    * When using [LibMan]({%slug common-kb-telerik-themes-libman%}) or [npm](https://www.telerik.com/design-system/docs/themes/get-started/installation/) to obtain a specific Telerik theme version. In this case, you can use all built-in theme swatches.
+    * When using [LibMan]({%slug common-kb-telerik-themes-libman%}) or <a href="https://www.telerik.com/design-system/docs/themes/get-started/installation/" target="_blank">npm</a> to obtain a specific Telerik theme version. In this case, you can use all built-in theme swatches.
 
 > The Blazor app must load only one Telerik theme file at a time. Upgrade the theme with every Telerik UI for Blazor version upgrade, unless you are loading the theme as a static NuGet asset.
 
@@ -105,7 +105,7 @@ The `Telerik.UI.for.Blazor` NuGet package includes only the *Main* swatch of eac
 The Telerik themes are decoupled from the Telerik Blazor components, which leads to the following usage requirements:
 
 * When using a CSS theme as local file in `wwwroot`, [replace the file every time you change the Telerik UI for Blazor version]({%slug upgrade-tutorial%}). This includes apps [created with the Telerik Blazor Visual Studio extension without CDN support]({%slug getting-started-vs-integration-new-project%}#step-3-configure-additional-project-settings).
-* When loading [theme swatches](https://www.telerik.com/design-system/docs/themes/customization/swatches/) from a CDN, make sure that the theme version is compatible with the Telerik UI for Blazor version. Our [release notes](https://www.telerik.com/support/whats-new/blazor-ui/release-history) provide theme compatibility information for each components version. You can also use a [newer minor theme version](https://www.telerik.com/design-system/docs/themes/get-started/changelog/), which doesn't contain breaking changes.
+* When loading <a href="https://www.telerik.com/design-system/docs/themes/customization/swatches/" target="_blank">theme swatches</a> from a CDN, make sure that the theme version is compatible with the Telerik UI for Blazor version. Our [release notes](https://www.telerik.com/support/whats-new/blazor-ui/release-history) provide theme compatibility information for each components version. You can also use a <a href="https://www.telerik.com/design-system/docs/themes/get-started/changelog/" target="_blank">newer minor theme version</a>, which doesn't contain breaking changes.
 
 
 ## Next Steps
@@ -116,5 +116,5 @@ The Telerik themes are decoupled from the Telerik Blazor components, which leads
 ## See Also
 
 * [Change the Theme at Runtime]({%slug common-kb-change-theme-runtime%})
-* [Default Ocean Blue Accessibility Swatch](https://www.telerik.com/design-system/docs/foundation/guides/accessibility/global-accessibility/)
+* <a href="https://www.telerik.com/design-system/docs/foundation/guides/accessibility/global-accessibility/" target="_blank">Default Ocean Blue Accessibility Swatch</a>
 * [Live UI for Blazor Demos](https://demos.telerik.com/blazor-ui/)
