diff --git a/_contentTemplates/common/general-info.md b/_contentTemplates/common/general-info.md index 53fcd5dfad..7a4bdc6a37 100644 --- a/_contentTemplates/common/general-info.md +++ b/_contentTemplates/common/general-info.md @@ -122,13 +122,6 @@ If you set the `ShouldRender` field of the event arguments to `true`, the compon | tb-wizard | [Wizard]({%slug wizard-overview%}) | #end -#change-theme-runtime - -### Changing Themes Runtime - -The application can remove a loaded stylesheet from the page and register another one. See [how to change the theme or swatch at runtime]({%slug change-theme-runtime%}) with step-by-step instructions and an example. - -#end #status-telerik-com ## Telerik NuGet Feed Status @@ -136,6 +129,7 @@ The application can remove a loaded stylesheet from the page and register anothe Visit [status.telerik.com](https://status.telerik.com) to check the status of the Telerik NuGet server. The top section shows manually logged incidents with possible updates or workaround suggestions. The [**System Metrics** section](https://status.telerik.com/#system-metrics) provides real-time automated diagnostics. #end + #ci-cd-support > All deployment articles in this documentation provide general guidance and fundamentals. Telerik does not provide technical support for setting up CI/CD environments or application publishing infrastructure. #end diff --git a/_contentTemplates/common/get-started.md b/_contentTemplates/common/get-started.md index 0d430f08c3..1bcdf0ecfc 100644 --- a/_contentTemplates/common/get-started.md +++ b/_contentTemplates/common/get-started.md @@ -90,7 +90,7 @@ Well done! Now you have your first Telerik UI for Blazor component running in yo * [Explore the live Telerik UI for Blazor demos](https://demos.telerik.com/blazor-ui/). * [Learn the data binding fundamentals for Telerik UI for Blazor components]({%slug common-features-data-binding-overview%}). * [Get started with the data Grid]({%slug grid-overview%}). -* [Review the built-in themes or create custom ones]({%slug themes-built-in%}). +* [Review the built-in themes or create custom ones]({%slug themes-overview%}). #end diff --git a/_contentTemplates/common/themebuilder-section.md b/_contentTemplates/common/themebuilder-section.md index 1d6947b9ad..748dd7eb9b 100644 --- a/_contentTemplates/common/themebuilder-section.md +++ b/_contentTemplates/common/themebuilder-section.md @@ -2,7 +2,7 @@ ## ThemeBuilder -To take full control over the appearance of the Telerik UI for Blazor components, you can create your own styles by using [ThemeBuilder]({%slug themebuilder%}). +To take full control over the appearance of the Telerik UI for Blazor components, you can create your own styles by using [ThemeBuilder](https://docs.telerik.com/themebuilder). ThemeBuilder is a web application that enables you to create new themes and customize existing ones. 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 styles for your theme and use them in your Blazor app. #end \ No newline at end of file diff --git a/accessibility/accessibility-swatch.md b/accessibility/accessibility-swatch.md index 9dd475fe71..63d65e8131 100644 --- a/accessibility/accessibility-swatch.md +++ b/accessibility/accessibility-swatch.md @@ -10,7 +10,7 @@ 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 contrast ratios for accessibility compliance. The *Default Ocean Blue A11y* [theme swatch]({%slug themes-swatches%}) in Telerik UI for Blazor conforms to WCAG Level AA, which requires contrast ratios of at least: +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 contrast ratios for accessibility compliance. The *Default Ocean Blue A11y* [theme swatch]({%slug themes-overview%}#basics) in Telerik UI for Blazor conforms to WCAG Level AA, which requires contrast ratios of at least: * 4.5:1 for normal text * 3:1 for large text @@ -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-built-in%}#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". diff --git a/common-features/cdn.md b/common-features/cdn.md index 8d47865619..dfe54923a3 100644 --- a/common-features/cdn.md +++ b/common-features/cdn.md @@ -20,10 +20,10 @@ The CDN hosts two kinds of static client assets for the Telerik UI for Blazor co ## CSS Theme URLs -The [Telerik CSS themes]({%slug themes-built-in%}) are available on two CDN hosts: +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}}`. -* `blazor.cdn.telerik.com` provides a limited set of popular [theme swatches]({%slug themes-swatches%}). The version number in the theme URL matches the version of the Telerik UI for Blazor components, for example, `{{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 diff --git a/common-features/dimensions.md b/common-features/dimensions.md index 1de67f952a..05f8be2d7d 100644 --- a/common-features/dimensions.md +++ b/common-features/dimensions.md @@ -95,5 +95,5 @@ The examples here showcase different units and examples of using them to set dim ## See Also -* [Themes]({%slug themes-built-in%}) +* [Themes]({%slug themes-overview%}) * [Override Theme Styles]({%slug themes-override%}) diff --git a/common-features/icons.md b/common-features/icons.md index ba398044b9..098e11b9d6 100644 --- a/common-features/icons.md +++ b/common-features/icons.md @@ -172,11 +172,11 @@ Our font icons are designed on a 16px grid base. For better display quality, use ### Render Font Icons with HTML -Telerik UI for Blazor shares the same [themes]({%slug themes-built-in%}) with several other Telerik and Kendo UI web component suites. All these products use the same font icons. +Telerik UI for Blazor shares the same [themes]({%slug themes-overview%}) with several other Telerik and Kendo UI web component suites. All these products use the same font icons. You can use the built-in font icons directly with HTML tags, without the `` component. Such direct HTML usage may provide more flexibility, but if you don't really need it, we recommend using `FontIcon` objects and the `` 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 `` component simply drops the `k-i-` CSS class prefix to make it easier for you. +To use the icons directly, refer to List of all Telerik Icons and obtain the desired CSS class. The `` 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 Progress Design System website provides a list of all built-in icons in Telerik UI for Blazor. 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/) +* Built-in Icon List * [Blazor Live Demos](https://demos.telerik.com/blazor-ui/) -* [CSS Themes]({%slug themes-built-in%}) +* [CSS Themes]({%slug themes-overview%}) diff --git a/components/button/overview.md b/components/button/overview.md index 1052e48c7e..3c6b6b009e 100644 --- a/components/button/overview.md +++ b/components/button/overview.md @@ -14,7 +14,7 @@ This article introduces the tip To learn more about the appearance, anatomy, and accessibility of the Button, visit the [Progress Design System documentation](https://www.telerik.com/design-system/docs/components/button/)—an information portal offering rich component usage guidelines, descriptions of the available style variables, and globalization support details. diff --git a/components/button/styling.md b/components/button/styling.md index 88484196d6..d6ac0683e4 100644 --- a/components/button/styling.md +++ b/components/button/styling.md @@ -13,7 +13,7 @@ position: 10 There are a few ways to style the Button component: * Set a [primary button](#primary-button) style. -* Use another [built-in theme]({%slug themes-built-in%}). +* Use another [built-in theme]({%slug themes-overview%}). * Use the [Button `Class`](#button-class) attribute. ## Primary Button diff --git a/components/buttongroup/overview.md b/components/buttongroup/overview.md index 9cda69344c..8c44963bfc 100644 --- a/components/buttongroup/overview.md +++ b/components/buttongroup/overview.md @@ -14,7 +14,7 @@ This article provides information about the Blazor RadioGroup component allows the user to select an option from a predefined set of choices in a list of radio buttons. The radio group is styled according to the Telerik [Theme]({%slug themes-built-in%}). You can also choose the [layout order]({%slug radiogroup-layout%}) and [label position]({%slug radiogroup-label-position%}). +The Blazor RadioGroup component allows the user to select an option from a predefined set of choices in a list of radio buttons. The radio group is styled according to the Telerik [Theme]({%slug themes-overview%}). You can also choose the [layout order]({%slug radiogroup-layout%}) and [label position]({%slug radiogroup-label-position%}). ## Creating Blazor RadioGroup diff --git a/components/spreadsheet/overview.md b/components/spreadsheet/overview.md index 18b4ba2733..e63ccecaab 100644 --- a/components/spreadsheet/overview.md +++ b/components/spreadsheet/overview.md @@ -77,12 +77,12 @@ The table below lists the Spreadsheet parameters. For a full list of the ListBox | `ColumnWidth` | `double`
(`64`) | The initial pixel width of the columns. | | `Data` | `byte[]` | The Excel file to display in the Spreadsheet component. | | `EnableLoaderContainer` | `bool`
(`true`) | Defines if the component will show a built-in [LoaderContainer]({%slug loadercontainer-overview%}) while loading Excel files. | -| `Height` | `string` | The `height` style of the `
` element. The [built-in themes]({%slug themes-built-in%}) apply `"600px"` by default. | +| `Height` | `string` | The `height` style of the `
` element. The [built-in themes]({%slug themes-overview%}) apply `"600px"` by default. | | `RowHeaderWidth` | `double`
(`32`) | The pixel width of the row headers that display the row numbers. The default width fits up to 3 digits comfortably. | | `RowHeight` | `double`
(`20`) | The initial pixel height of the rows. | | `RowsCount` | `int`
(`200`) | The initial number of rows to render. Users can add and delete rows at runtime. | | `Tools` | `SpreadsheetToolSet`
(`SpreadsheetToolSets.All`) | The available tabs and tools that users can use to manipulate the Excel file content. The Spreadsheet renders all its tools by default, so the resulting Spreadsheet UI will change in the future. | -| `Width` | `string` | The `width` style of the `
` element. The [built-in CSS themes]({%slug themes-built-in%}) apply `"100%"` by default. | +| `Width` | `string` | The `width` style of the `
` element. The [built-in CSS themes]({%slug themes-overview%}) apply `"100%"` by default. | ## Spreadsheet Reference and Methods diff --git a/components/togglebutton/overview.md b/components/togglebutton/overview.md index 8d9be1c817..7e71a46942 100644 --- a/components/togglebutton/overview.md +++ b/components/togglebutton/overview.md @@ -12,7 +12,7 @@ position: 0 This article provides information about the Blazor ToggleButton component and its core features. -The ToggleButton component can have a selected state, which is the main difference from the [regular Telerik UI for Blazor Button]({%slug components/button/overview%}). The two-state styling depends on the [chosen theme]({%slug themes-built-in%}). The ToggleButton also provides [events]({%slug togglebutton-events%}), [declarative appearance customization]({%slug togglebutton-appearance%}) and can nest [icons]({%slug togglebutton-icons%}). +The ToggleButton component can have a selected state, which is the main difference from the [regular Telerik UI for Blazor Button]({%slug components/button/overview%}). The two-state styling depends on the [chosen theme]({%slug themes-overview%}). The ToggleButton also provides [events]({%slug togglebutton-events%}), [declarative appearance customization]({%slug togglebutton-appearance%}) and can nest [icons]({%slug togglebutton-icons%}). ## Creating Blazor ToggleButton diff --git a/deployment/troubleshooting.md b/deployment/troubleshooting.md index 355d7690de..6fd304b63f 100644 --- a/deployment/troubleshooting.md +++ b/deployment/troubleshooting.md @@ -73,7 +73,7 @@ At the time of writing, sometimes the following issues have been reported that p * On Linux (and often Docker), paths are case-sensitive. Make sure you have the correct casing when registering the styles and scripts. See the [CSS Theme and JavaScript Files]({%slug getting-started/what-you-need%}#css-theme-and-javascript-files) section of the documentation. - * Some reports indicate that deploying to a Docker container never copies over the static assets and you may have to either copy the file manually, or use it from [our CDN]({%slug themes-built-in%}#cdn). This may be related to the static asset configurations from the previous points, however. + * Some reports indicate that deploying to a Docker container never copies over the static assets and you may have to either copy the file manually, or use it from [our CDN]({%slug themes-overview%}#cdn). This may be related to the static asset configurations from the previous points, however. * We have had reports that indicate missing project references do not copy the static assets. For example, in an ASP.NET Core hosted WebAssembly project the server project usually has a project reference to the Blazor project. If that reference is missing, the static assets might not be present in the output. diff --git a/getting-started/client-blazor.md b/getting-started/client-blazor.md index c76fd0f215..9718486d3f 100644 --- a/getting-started/client-blazor.md +++ b/getting-started/client-blazor.md @@ -59,7 +59,7 @@ To enable the Telerik UI for Blazor components, you must add several client-side **HTML** @[template](/_contentTemplates/common/js-interop-file.md#js-interop-file-snippet) -2\. In the `~/wwwroot/index.html` file of the client web application, add the [theme stylesheet as a static asset]({%slug themes-built-in%}#using-a-theme). The theme allows you to select the appearance and color scheme for the Telerik Blazor components. +2\. In the `~/wwwroot/index.html` file of the client web application, add the [theme stylesheet as a static asset]({%slug themes-overview%}#using-a-theme). The theme allows you to select the appearance and color scheme for the Telerik Blazor components. @[template](/_contentTemplates/common/js-interop-file.md#theme-static-asset-snippet) diff --git a/getting-started/repl/overview.md b/getting-started/repl/overview.md index 6fe2065091..ab79eb510a 100644 --- a/getting-started/repl/overview.md +++ b/getting-started/repl/overview.md @@ -52,7 +52,7 @@ The Sidebar provides the following functionalities: * **User Snippets**—allows you to review and manage the snippets saved in your account. [Read more about the user snippets...]({%slug blazor-repl-user-snippets%}) -* **Telerik UI Asset Manager**—shows the Telerik.UI.for.Blazor package version and allows you to change or update it. Starting from September 14, 2022 (R3 2022), each REPL example maintains its Telerik UI package version until changed explicitly. The Asset Manager also shows a list with the available [built-in themes]({%slug themes-built-in%}) and their corresponding [color swatches]({%slug themes-swatches%}). When you select a new theme or swatch, you can immediately see the applied styles in the Result View. +* **Telerik UI Asset Manager**—shows the Telerik.UI.for.Blazor package version and allows you to change or update it. Starting from September 14, 2022 (R3 2022), each REPL example maintains its Telerik UI package version until changed explicitly. The Asset Manager also shows a list with the available [built-in themes]({%slug themes-overview%}) and their corresponding [theme swatches]({%slug themes-overview%}#basics). When you select a new theme and swatch, you can immediately see the applied styles in the Result View. * **Snippets and Scaffolders**—it allows you to add predefined component snippets or scaffold some components defining your desired configuration. [Read more about Snippets and Scaffolders...]({%slug blazor-repl-snippets-scaffolders%}) diff --git a/getting-started/server-blazor.md b/getting-started/server-blazor.md index 8d9ada2bbf..6f23383952 100644 --- a/getting-started/server-blazor.md +++ b/getting-started/server-blazor.md @@ -58,7 +58,7 @@ To enable the Telerik UI for Blazor components, you must add several client-side @[template](/_contentTemplates/common/js-interop-file.md#js-interop-file-snippet) -2\. To select the appearance and color scheme for the Telerik Blazor components, add the [theme stylesheet as a static asset]({%slug themes-built-in%}#using-a-theme). +2\. To select the appearance and color scheme for the Telerik Blazor components, add the [theme stylesheet as a static asset]({%slug themes-overview%}#using-a-theme). * Use the `~/Pages/_Host.cshtml` index file for .NET 7 * Use the `~/Pages/_Layout.cshtml` index file for .NET 6 diff --git a/getting-started/vs-code-integration/new-project-wizard.md b/getting-started/vs-code-integration/new-project-wizard.md index 42fcca7513..1a3e59a2e4 100644 --- a/getting-started/vs-code-integration/new-project-wizard.md +++ b/getting-started/vs-code-integration/new-project-wizard.md @@ -76,7 +76,7 @@ The available .NET framework versions vary depending on the selected hosting mod #### Section 10: Select Theme -Select your desired [theme]({%slug themes-built-in%}) for your project. Click **See All Swatches** to explore the available [theme variations]({%slug themes-swatches%}). +Select your desired [theme]({%slug themes-overview%}) for your project. Click **See All Swatches** to explore the available [theme color variations]({%slug themes-overview%}#basics). @[template](/_contentTemplates/common/general-info.md#vs-code-nuget-note) diff --git a/getting-started/vs-integration/configure-project-wizard.md b/getting-started/vs-integration/configure-project-wizard.md index f83ac42968..50ff25f299 100644 --- a/getting-started/vs-integration/configure-project-wizard.md +++ b/getting-started/vs-integration/configure-project-wizard.md @@ -22,7 +22,7 @@ The configuration wizard handles the following tasks: ## Theme Selection -The **Theme Selection** page enables you to change the [CSS theme]({%slug themes-built-in%}) of your Telerik UI for Blazor application. +The **Theme Selection** page enables you to change the [CSS theme]({%slug themes-overview%}) of your Telerik UI for Blazor application. After selecting the desired theme, click **Next** to navigate to the [Project Settings](#project-settings) page. diff --git a/getting-started/vs-integration/convert-project-wizard.md b/getting-started/vs-integration/convert-project-wizard.md index 7fa20b4d01..dfa3ec4c18 100644 --- a/getting-started/vs-integration/convert-project-wizard.md +++ b/getting-started/vs-integration/convert-project-wizard.md @@ -78,7 +78,7 @@ This screen provides the ability to: ### Step 2: Select Theme -In this step, you can apply one of the available [themes]({%slug themes-built-in%}) to your project. +In this step, you can apply one of the available [themes]({%slug themes-overview%}) to your project. ### Step 3: Create a Backup diff --git a/getting-started/vs-integration/new-project-wizard.md b/getting-started/vs-integration/new-project-wizard.md index 014d55f557..6cb8e0c393 100644 --- a/getting-started/vs-integration/new-project-wizard.md +++ b/getting-started/vs-integration/new-project-wizard.md @@ -93,7 +93,7 @@ The **Create New Project** wizard provides the following project templates: > The **Admin**, **Dashboard**, **CRUD**, **Form** and **Chart** templates are deprecated and are planned to be removed with the Q1 2025 release. The source code for these projects will be moved to the [blazor-ui repo](https://github.com/telerik/blazor-ui) for continued access. ### Step 3: Select Theme -Finally, you can apply one of the available [themes]({%slug themes-built-in%}) to your project. +Finally, you can apply one of the available [themes]({%slug themes-overview%}) to your project. ## See Also diff --git a/getting-started/web-app.md b/getting-started/web-app.md index 8e77fb898b..d203c760be 100644 --- a/getting-started/web-app.md +++ b/getting-started/web-app.md @@ -58,7 +58,7 @@ To enable the Telerik UI for Blazor components, you must add several client-side @[template](/_contentTemplates/common/js-interop-file.md#js-interop-file-snippet) -2\. To select the appearance and color scheme for the Telerik Blazor components, add the [theme stylesheet as a static asset]({%slug themes-built-in%}#using-a-theme) in your `App.razor` file. +2\. To select the appearance and color scheme for the Telerik Blazor components, add the [theme stylesheet as a static asset]({%slug themes-overview%}#using-a-theme) in your `App.razor` file. **HTML** diff --git a/getting-started/what-you-need.md b/getting-started/what-you-need.md index 5df8288e14..05481d9df5 100644 --- a/getting-started/what-you-need.md +++ b/getting-started/what-you-need.md @@ -148,7 +148,7 @@ You can also [add the Telerik UI for Blazor version number to the CSS and JavaSc ### CSS Theme -Register the [Telerik theme stylesheet]({%slug themes-built-in%}) in the `` of the web page. Add the theme before the application stylesheet and the [CSS isolation stylesheet](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation). This CSS file order lets you [override Telerik theme styles]({%slug themes-override%}) more easily, if necessary. +Register the [Telerik theme stylesheet]({%slug themes-overview%}) in the `` of the web page. Add the theme before the application stylesheet and the [CSS isolation stylesheet](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation). This CSS file order lets you [override Telerik theme styles]({%slug themes-override%}) more easily, if necessary. Register the [Telerik font icon stylesheet]({%slug common-features-icons%}#font-icon-stylesheet) only if the app uses [Telerik font icons]({%slug common-features-icons%}). diff --git a/installation/zip.md b/installation/zip.md index 49003337b0..c017af22d4 100644 --- a/installation/zip.md +++ b/installation/zip.md @@ -19,7 +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 dpl-in-blazor%}) `.nupkg` files (in the `dpl` folder). -* The [built-in themes]({%slug themes-built-in%}) and some of their most commonly used [swatches]({%slug themes-swatches%}). You can find them in the `styles` folder in the archive. +* The [built-in themes]({%slug themes-overview%}) and some of their most commonly used [swatches]({%slug themes-overview%}#basics). You can find them in the `styles` folder in the archive. ## How to Download the ZIP Archive diff --git a/introduction.md b/introduction.md index 94c5eb2ff0..4fa1a26d42 100644 --- a/introduction.md +++ b/introduction.md @@ -109,4 +109,4 @@ For any issues you might encounter while working with Telerik UI for Blazor, use * [Workflow Details for using the Telerik UI for Blazor components]({%slug getting-started/what-you-need%}) (a concise version of the tutorials above) * Use guided wizards to generate new Telerik Projects in [Visual Studio]({%slug getting-started-vs-integration-new-project%}) and [Visual Studio Code]({%slug getting-started-vs-code-integration-overview%}). * [Convert an existing project to a Telerik-enabled project]({%slug getting-started-vs-integration-convert-project%}) -* [Style the Telerik Blazor Components]({%slug themes-built-in%}) +* [Style the Telerik Blazor Components]({%slug themes-overview%}) diff --git a/knowledge-base/blazor-in-asp-net.md b/knowledge-base/blazor-in-asp-net.md index 2cef3a01d6..1b6cdf435a 100644 --- a/knowledge-base/blazor-in-asp-net.md +++ b/knowledge-base/blazor-in-asp-net.md @@ -31,7 +31,7 @@ You can use an ASP.NET Core web application to render Blazor components by follo 1. [Add the Telerik components as usual]({%slug getting-started/what-you-need%}). Add the [`TelerikRootComponent`]({%slug rootcomponent-overview%}) around the contents of every Blazor component. Otherwise, it is not possible to render it in a shared location like in an actual Blazor app. 1. Use the Blazor components according to the current framework approach by using the `` approach. In previous versions, the recommended approach was by using Razor components like partial views through the `Html.RenderComponentAsync()` helper, where you has to pass their parameters as fields in an anonymous model object. 1. If you wish to use [Alert, Confirm, or Prompt Dialogs]({%slug dialog-predefined %}), you need to do this in a nested Razor component of the `TelerikRootComponent`. Otherwise, if you try to define the `DialogFactory` `CascadingParameter` in the same Razor component that includes the `TelerikRootComponent`, then the cascading parameter will be `null`. -1. If you are already using Kendo UI components in such a project, make sure to only use the [Telerik UI for Blazor Themes]({%slug themes-built-in%}). They match the [SASS-based themes from Kendo UI](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes) and you must only have one theme referenced. +1. If you are already using Kendo UI components in such a project, make sure to only use the [Telerik UI for Blazor Themes]({%slug themes-overview%}). They match the [SASS-based themes from Kendo UI](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes) and you must only have one theme referenced. It is recommended that you use the latest Kendo UI and Telerik UI for Blazor versions. If not possible, try using Kendo UI and Telerik UI for Blazor versions that are close together, so that there are as little differences in their theming as possible. diff --git a/knowledge-base/cdn-fallback.md b/knowledge-base/cdn-fallback.md index 4b652bb973..55820d002b 100644 --- a/knowledge-base/cdn-fallback.md +++ b/knowledge-base/cdn-fallback.md @@ -23,7 +23,7 @@ res_type: kb ## Description -The [CDN]({%slug themes-built-in%}#cdn) is down, or my users have it filtered by a firewall, proxy, admin policy or other problem. This can cause errors or bad looking sites. How do I ensure the necessary resources will be fetched? +The [CDN]({%slug themes-overview%}#cdn) is down, or my users have it filtered by a firewall, proxy, admin policy or other problem. This can cause errors or bad looking sites. How do I ensure the necessary resources will be fetched? ## Solution diff --git a/knowledge-base/change-theme-runtime.md b/knowledge-base/change-theme-runtime.md index f58f417ad5..44f8d222e5 100644 --- a/knowledge-base/change-theme-runtime.md +++ b/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: change-theme-runtime +slug: common-kb-change-theme-runtime position: tags: telerik, blazor, theme ticketid: 1442823 @@ -32,11 +32,11 @@ This KB article answers the following questions: ## Solution -The app stylesheets reside outside the Razor component hierarchy, so the Blazor code cannot access them. You can change Telerik [themes]({%slug themes-built-in%}) and [swatches]({%slug themes-swatches%}) at runtime with [JSInterop](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet). +The app stylesheets reside outside the Razor component hierarchy, so the Blazor code cannot access them. You can change the current Telerik [theme or swatch]({%slug themes-overview%}) at runtime with [JSInterop](https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet). -The following algorithm follows the commonly used approach to replace a CSS file in any web app. You can use it for built-in themes and custom themes, regardless of the [CSS theme's physical location]({%slug themes-built-in%}#using-a-theme). +The following algorithm follows the commonly used approach to replace a CSS file in any web app. You can use it for built-in themes and custom themes, regardless of the [CSS theme's physical location]({%slug themes-overview%}#using-a-theme). -1. [Register the initial Telerik theme]({%slug themes-built-in%}#using-a-theme) in a way that allows you to get reference to the `` tag. For example, use an `id` attribute. +1. [Register the initial Telerik theme]({%slug themes-overview%}#using-a-theme) in a way that allows you to get reference to the `` tag. For example, use an `id` attribute. >caption HTML ``` @@ -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-built-in%}#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. @@ -332,6 +332,5 @@ The following algorithm follows the commonly used approach to replace a CSS file ## See Also -* [Themes Overview]({%slug themes-built-in%}) -* [Theme Swatches]({%slug themes-swatches%}) +* [Themes Overview]({%slug themes-overview%}) * [Implement CDN Fallback]({%slug common-kb-cdn-fallback%}) diff --git a/knowledge-base/common-telerik-themes-libman.md b/knowledge-base/common-telerik-themes-libman.md index 3ccaf6caa5..219ed59476 100644 --- a/knowledge-base/common-telerik-themes-libman.md +++ b/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-built-in%}#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: @@ -43,7 +43,7 @@ The benefits of Libman are: You can use Libman to consume the following **npm** packages that are published on the **UNPKG** CDN: * [`@progress/kendo-font-icons`](https://www.npmjs.com/package/@progress/kendo-font-icons) provides font icon styles when using [font icons instead of SVG icons]({%slug common-features-icons%}). -* All [built-in themes]({%slug themes-built-in%}) and their [swatches]({%slug themes-swatches%}): +* All [built-in themes]({%slug themes-overview%}) and their [swatches]({%slug themes-overview%}#basics): * [`@progress/kendo-theme-bootstrap`](https://www.npmjs.com/package/@progress/kendo-theme-bootstrap) * [`@progress/kendo-theme-default`](https://www.npmjs.com/package/@progress/kendo-theme-default) * [`@progress/kendo-theme-fluent`](https://www.npmjs.com/package/@progress/kendo-theme-fluent) @@ -68,9 +68,9 @@ 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-built-in%}#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-built-in%}#theme-names) and the font icon stylesheet. Remove the theme or font icons entries that you don't need. +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. >caption libman.js @@ -143,4 +143,4 @@ Install the `Microsoft.Web.LibraryManager.Build` NuGet package in your Blazor ap ## See Also -* [Themes Overview]({%slug themes-built-in%}) +* [Themes Overview]({%slug themes-overview%}) diff --git a/knowledge-base/common-theme-customization-options.md b/knowledge-base/common-theme-customization-options.md index 1a195e752e..1e65a78713 100644 --- a/knowledge-base/common-theme-customization-options.md +++ b/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) diff --git a/knowledge-base/common-upgrade-breaks-css-theme-styles.md b/knowledge-base/common-upgrade-breaks-css-theme-styles.md index f49f3fb196..b6f11747e1 100644 --- a/knowledge-base/common-upgrade-breaks-css-theme-styles.md +++ b/knowledge-base/common-upgrade-breaks-css-theme-styles.md @@ -39,8 +39,8 @@ 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-swatches%}) 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 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-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. diff --git a/knowledge-base/jquery-kendo-in-blazor.md b/knowledge-base/jquery-kendo-in-blazor.md index baf2471ba1..47743b9926 100644 --- a/knowledge-base/jquery-kendo-in-blazor.md +++ b/knowledge-base/jquery-kendo-in-blazor.md @@ -36,7 +36,7 @@ Should you decide to use jQuery widgets from the Kendo UI suite, here are the th * Make sure you are familiar with [using JavaScript in Blazor](https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interop?view=aspnetcore-3.0). * Manipulate the DOM where jQuery widgets will be as little as possible through Blazor to reduce the chance that an update from the framework will break the widgets. * Reference the Kendo UI scripts as usual. More details are available in the Kendo documentation, for example, the [Getting Started](https://docs.telerik.com/kendo-ui/intro/first-steps) article. -* Use only the [themes from the Telerik UI for Blazor suite]({%slug themes-built-in%}). They are the same [SASS-based themes from Kendo](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes). You must not include more than one Kendo theme in the project as this can result in incorrect appearance in all widgets. +* Use only the [themes from the Telerik UI for Blazor suite]({%slug themes-overview%}). They are the same [SASS-based themes from Kendo](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes). You must not include more than one Kendo theme in the project as this can result in incorrect appearance in all widgets. * Try using versions of Kendo UI and UI for Blazor that are close together, so that there are as little differences in their theming as possible. The latest versions are advisable. * Be familiar with the DOM changes the Kendo widgets make and how to [dispose them](https://docs.telerik.com/kendo-ui/intro/widget-basics/destroy). You may need to clean up the DOM yourself if Blazor does not clean everything. diff --git a/styling-and-themes/custom-theme.md b/styling-and-themes/custom-theme.md index 8c0af7e366..563981df86 100644 --- a/styling-and-themes/custom-theme.md +++ b/styling-and-themes/custom-theme.md @@ -1,52 +1,39 @@ --- -title: Custom Themes -page_title: Custom Themes +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 position: 10 --- -# Custom Themes +# 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) -* [Contribute](#contribution) > 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]({%slug 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). +The ThemeBuilder allows [different customization capabilities, depending on the used tier](https://docs.telerik.com/themebuilder/introduction#themebuilder-tiers). -## Setting Theme Variables -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. You can 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 with 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. @@ -88,44 +75,31 @@ 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 customizations. 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 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. +Each Theme Customization page in the Progress Design System documentation and the [kendo-themes repository wiki](https://github.com/telerik/kendo-themes/wiki/Compiling-themes) provide more information about this process. ## Loading Custom Themes 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 `` element of the built-in theme. ->caption Adding a custom Telerik theme - -
- -````HTML - - - - - - -```` - - -## Contribution - -To contribute to the development of the Kendo UI Themes, go to the [telerik/kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository. - ## See Also -* [Progress ThemeBuilder](https://themebuilderapp.telerik.com) -* [Progress ThemeBuilder Documentation](https://docs.telerik.com/themebuilder) -* [Kendo SASS Themes](https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes) +* [ThemeBuilder Online Tool](https://themebuilderapp.telerik.com) +* [ThemeBuilder Documentation](https://docs.telerik.com/themebuilder) diff --git a/styling-and-themes/figma-ui-kits.md b/styling-and-themes/figma-ui-kits.md deleted file mode 100644 index b8a04e111a..0000000000 --- a/styling-and-themes/figma-ui-kits.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: UI Design Kits -page_title: Telerik and Kendo UI Design Kits for Figma -description: "Discover the Telerik and Kendo UI Design Kits for Figma and learn how to use them to create stylish Blazor applications." -slug: ui-kits/themes -tags: design,blazor,design kit -published: True -position: 30 ---- - -# Telerik and Kendo UI Design Kits for Figma - -The [Telerik and Kendo UI design tools for Figma](https://www.figma.com/@progress) are building blocks that match the [Telerik UI for Blazor](https://www.telerik.com/blazor-ui) components. - - -Download UI Kits - - -## Using the UI Kits - -The Telerik and Kendo UI Kits for Figma enable efficient collaboration between designers and developers. Each UI kit corresponds to one of the [themes that ship with the Telerik UI for Blazor components]({%slug themes-built-in%}#theme-names). - -These polished UI kits include pre-made, reusable design components that follow the [atomic design principles](https://atomicdesign.bradfrost.com/chapter-2/). The design files represent the Telerik UI for Blazor components in every possible state, their detailed anatomy, colors, metrics, and icons. All these elements enable the seamless handover of the design to the developers. - -You are free to decide if or how much to customize the UI kits. For example, you can: - -* Use them as they are to create application designs. -* Customize the colors in a way that matches your brand guidelines. -* Use them as a starting point for your own component design library or unique design system. - -Check the [Figma UI Kits](https://www.telerik.com/design-system/docs/resources/figma-ui-kits/) page on the [Progress Design System documentation](https://www.telerik.com/design-system/docs/) and then visit the [Telerik and Kendo UI design tools for Figma](https://www.figma.com/@progress) home page to get started. - - -## See Also - -* [Built-in Themes]({%slug themes-built-in%}) -* [Custom Themes]({%slug themes-custom%}) -* [Figma for Developers (blog)](https://www.telerik.com/blogs/figma-developers) -* [Design Systems for Developers (blog)](https://www.telerik.com/blogs/design-systems-developers) diff --git a/styling-and-themes/override-theme-styles.md b/styling-and-themes/override-theme-styles.md index 2a1c626b3e..e1762b81cc 100644 --- a/styling-and-themes/override-theme-styles.md +++ b/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-built-in%}) 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%}). diff --git a/styling-and-themes/overview.md b/styling-and-themes/overview.md index 1f834d8c67..6fa92fbb3f 100644 --- a/styling-and-themes/overview.md +++ b/styling-and-themes/overview.md @@ -1,60 +1,79 @@ --- -title: Built-in Themes -page_title: Themes +title: Themes Overview +page_title: Themes Overview description: The UI for Blazor suite comes with a set of built-in themes that you can choose from. Bootstrap and Material themes are also included. -slug: themes-built-in +slug: themes-overview tags: telerik,blazor,theme,built-in published: True -previous_url: /themes/overview,/styling-and-themes/form-elements +previous_url: /themes/overview,/styling-and-themes/swatch-distribution,/styling-and-themes/theme-swatches,/styling-and-themes/themebuilder,/styling-and-themes/form-elements,/styling-and-themes/figma-ui-kits position: 0 --- -# Built-in Themes +# Themes Overview -Telerik UI for Blazor comes with a set of built-in CSS themes that control the visual appearance of the components. Each theme determines the components' [colors](https://www.telerik.com/design-system/docs/foundation/color/), borders, backgrounds, size, layout, position, font size and sometimes the font family. You can compare all themes and swatches on the [Telerik UI for Blazor live demos](https://demos.telerik.com/blazor-ui/). +Telerik UI for Blazor comes with a set of built-in CSS themes that control the visual appearance of the components. Each theme determines the components' colors, borders, backgrounds, size, layout, position, font size and sometimes the font family. -[Telerik UI for Blazor has the same HTML rendering and theme stylesheets as other Telerik and Kendo UI web products](#built-in-theme-development), so previous experience with them can be helpful. At the same time, the Telerik UI for Blazor components are *native Blazor components* and not wrappers around other Telerik products. +>caption In This Article -## Theme Names +* [Definitions for *theme* and *swatch*](#basics) and [how the themes relate to the components](#integration-with-the-telerik-components) +* [All built-in theme and swatch names](#built-in-themes) and how to [preview them](#comparing-themes-and-swatches) +* How to [register a theme in your app](#using-a-theme) +* How to [ensure compatibility between the Telerik components and the theme version](#compatibility-and-maintenance) -The following list describes the built-in themes in Telerik UI for Blazor: +## Basics -* **Default** uses a neutral Telerik design and suits most cases. The theme has a built-in [swatch (color variation)]({%slug themes-swatches%}) called [Ocean Blue A11y]({%slug themes-accessibility-swatch%}), which provides enhanced contrast for WCAG level AA accessibility compliance. -* **Bootstrap** matches the styling of the [Bootstrap CSS framework](https://getbootstrap.com). Make sure to check the [Bootstrap Notes](#bootstrap-notes) below. -* **Material** implements the [Material Design](https://material.io/) and is built around the initial theme of [material.angular.io](https://material.angular.io). See the [Material Notes](#material-notes) below for usage recommendations. -* **Fluent** is based on [Microsoft Fluent UI](https://developer.microsoft.com/en-us/fluentui/). +### Theme -Each theme can have built-in color variations called [swatches]({%slug themes-swatches%}). When this documentation talks about a given theme name, for example *Default*, this implies the *Main* swatch of this theme. In addition, the word "theme" as a standalone term can imply any swatch of any theme, or the CSS file of a theme. +A *theme* is a collection of styles in a CSS file, which determine the appearance of the Telerik Blazor components, including fonts, colors, sizes and layouts. For example, *Default* and *Bootstrap* are two [built-in theme names](#built-in-themes). + +### Swatch + +A *theme swatch* is a color variation of a theme. All swatches of a given theme> use the same fonts, sizes, and layouts. On the other hand, the text colors, background colors and border colors are different. For example, *Default Ocean Blue* and *Bootstrap Nordic* are two built-in swatch names. + +When the Telerik UI for Blazor documentation talks about a given theme name, for example *Default*, this implies the *Main* swatch of this theme. In addition, the word "theme" as a general term can imply any swatch of any theme. + +The CSS file of any swatch is self-sufficient and contains all required styles for the Telerik Blazor components, except the optional [font icon styles]({%slug common-features-icons%}#font-icon-stylesheet). You can [switch the theme runtime]({%slug common-kb-change-theme-runtime%}), but the Blazor app should always load only one theme at a time. + +### Integration with the Telerik Components + +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 is part of the Telerik Design System documentation. 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 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. ## Using a Theme -To register a theme, you must reference its stylesheet in the `` the web page. The exact project file that contains the `` tag depends on the .NET version and the Blazor application type. See our [Getting Started guides]({%slug blazor-overview%}#getting-started) for more information. +To register a theme, you must reference its stylesheet in the `` of the web page. The exact project file that contains the `` tag depends on the .NET version and the Blazor application type. See our [Getting Started guides]({%slug blazor-overview%}#getting-started) for more information. 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, the [Telerik CDN]({%slug common-features-cdn%}). See [Theme Swatches]({%slug themes-swatches%}) for the full list of available built-in swatches and their CDN URLs. +* 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. * 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-custom%}#loading-custom-themes). + * 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 [LibMan]({%slug common-kb-telerik-themes-libman%}) or [npm]({%slug themes-custom%}#building-themes-from-source-code) 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. + * 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 to obtain a specific Telerik theme version. In this case, you can use all built-in theme swatches. -### Theme Version Compatibility and Maintenance - -The [Telerik themes are decoupled from the Telerik Blazor components](#built-in-theme-development), 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 using [swatches on UNPKG CDN]({%slug themes-swatches%}#swatch-urls), make sure that the theme version in the CDN URL 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://github.com/telerik/kendo-themes/releases), if it doesn't contain breaking changes. +> 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. ### Loading Themes from the NuGet Package -The easiest way to load a Telerik theme is to reference a static asset from the NuGet package. The .NET SDK will copy the CSS file to the output folder during build automatically. Static assets provide the following benefits: +The easiest way to load a Telerik theme in a Blazor app is to reference a static asset from the NuGet package. The .NET SDK will copy the CSS file to the output folder during build automatically. Static assets provide the following benefits: * The application relies on available local resources, instead of third parties and remote URLs. -* The theme URL does not change across component versions, which makes product updates easier. +* The theme URL does not change across component versions, which makes product updates easier. [Add a cache buster to avoid possible browser caching issues]({%slug common-kb-browser-cache-buster%}). The `Telerik.UI.for.Blazor` NuGet package includes only the *Main* swatch of each theme and the *Ocean Blue* swatch of the *Default* theme. The code snippet below shows all available CSS files in the NuGet package and their correct URLs. To use another swatch, see the section [Using a Theme](#using-a-theme) above. @@ -81,61 +100,21 @@ The `Telerik.UI.for.Blazor` NuGet package includes only the *Main* swatch of eac > > `` -@[template](/_contentTemplates/common/general-info.md#change-theme-runtime) - - -## Bootstrap Notes - -The Telerik Bootstrap theme has a similar design to the Bootstrap framework and it uses the Bootstrap metrics to integrate Telerik Blazor components in an application that already uses Bootstrap for layout and styles. +## Compatibility and Maintenance -There are some important differences between the Bootstrap framework and the Telerik Bootstrap theme: +The Telerik themes are decoupled from the Telerik Blazor components, which leads to the following usage requirements: -* The two products are completely independent. They do not share CSS classes and code. -* The Telerik Bootstrap theme does not require or depend on the Bootstrap framework stylesheet. -* The Bootstrap framework stylesheet and the Telerik Bootstrap theme cannot be used interchangeably. - -To use Bootstrap-styled Telerik components in a Bootstrap-styled app, you need to load both stylesheets. You can use Bootstrap to create layouts and then put Telerik components inside those layouts. You can use Bootstrap CSS classes and utilities on your own HTML elements in the markup regardless of the components inside. - -> Using Bootstrap CSS classes on Telerik components may lead to styling conflicts and is generally not necessary or recommended. Do not set the `form-control` Bootstrap CSS class on Telerik input components such as ComboBox, TextBox, and others. - -You may want to avoid the Bootstrap framework and rely only on Telerik components for layout. In this case, [explore and compare the layout components in Telerik UI for Blazor]({%slug common-kb-layout-component-comparison%}). - - -## Material Notes - -To apply the Material Design guidelines, the Blazor app should load and use the [Roboto font family](https://fonts.google.com/specimen/Roboto). - -The Telerik Material theme does not include the Roboto font itself, because it is a third-party property. Instead, the Telerik Blazor components inherit their font family from the application, so if the app uses Roboto, the Telerik components will do so too. - -One possible way to add the Roboto font from Google Fonts is: - -
- -````HTML - - - - - -```` - - -## Built-in Theme Development - -The CSS themes represent an external dependency to Telerik UI for Blazor. The themes are a separate product, which is used by all Telerik and Kendo UI web products. The themes have their own product roadmap and strategy. You can log bug reports and feature requests on the [Telerik Themes feedback portal](https://feedback.telerik.com/themes). +* 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 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, which doesn't contain breaking changes. In other words, the latest major theme version may be still incompatible with the latest version of Telerik UI for Blazor. ## Next Steps -* [Choose a theme swatch]({%slug themes-swatches%}) -* [Create a custom theme]({%slug themes-custom%}) - +* [Modify a built-in theme or create a custom theme]({%slug themes-customize%}) +* [Explore the Telerik and Kendo UI Kits for Figma](https://www.telerik.com/design-system/docs/resources/figma-ui-kits/) ## See Also -* [Change the Theme at Runtime]({%slug change-theme-runtime%}) +* [Change the Theme at Runtime]({%slug common-kb-change-theme-runtime%}) +* Default Ocean Blue Accessibility Swatch * [Live UI for Blazor Demos](https://demos.telerik.com/blazor-ui/) diff --git a/styling-and-themes/theme-swatches.md b/styling-and-themes/theme-swatches.md deleted file mode 100644 index 8ec74b6984..0000000000 --- a/styling-and-themes/theme-swatches.md +++ /dev/null @@ -1,112 +0,0 @@ ---- -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 -previous_url: /styling-and-themes/swatch-distribution -position: 5 ---- - -# Theme Swatches - -Telerik UI for Blazor comes with several [built-in themes]({%slug themes-built-in%}). Each of them provides a set of color swatches that you can choose from to match your application appearance and styling. - - -## Basics - -A *theme* is a collection of styles, which determine the appearance of the Telerik Blazor components, including fonts, colors, sizes and layouts. For example, *Default* and *Bootstrap* are two [built-in theme names]({%slug themes-built-in%}#built-in-theme-names). - -A *theme swatch* is a color variation of a theme. All swatches of a given theme use the same fonts, sizes, and layouts. On the other hand, the text colors, background colors and border colors are different. For example, *Default Ocean Blue* and *Bootstrap Nordic* are two built-in swatch names. - -When this documentation talks about a given theme name, for example *Default*, this implies the *Main* swatch of this theme. In addition, the word "theme" as a general term can imply any swatch of any theme. - -The CSS file of a swatch is self-sufficient and contains all required styles for the Telerik Blazor components, except the optional [font icon styles]({%slug common-features-icons%}#font-icon-stylesheet). The Blazor app should load only one theme (swatch) at a time. - -## Comparing Built-in Swatches - -You can explore the built-in theme swatches in 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]({%slug themes-custom%}). - - -## Using Built-in Swatches - -There are a few ways to obtain and use the Telerik theme swatches: - -* Download the Telerik UI for Blazor [MSI installer]({%slug installation/msi%}) or [ZIP archive]({%slug installation/zip%}) from your Telerik account. Get the required CSS file(s) from the `swatches` folder and place them in your Blazor app. -* Download the required swatch(es) from the [CDN URLs below](#swatch-urls) or use these URLs directly in your Blazor app. - -Always make sure the [swatch file version is compatible with the Telerik UI for Blazor version]({%slug themes-built-in%}#theme-version-compatibility-and-maintenance). - -@[template](/_contentTemplates/common/general-info.md#change-theme-runtime) - - -## Swatch URLs - -### Default Theme - -@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) - -| Swatch Name | CDN URL | -| --- | --- | -| Default Main | https://unpkg.com/@progress/kendo-theme-default@{{site.themesVersion}}/dist/all.css
or
https://unpkg.com/@progress/kendo-theme-default@{{site.themesVersion}}/dist/default-main.css -| Default Main Dark | https://unpkg.com/@progress/kendo-theme-default@{{site.themesVersion}}/dist/default-main-dark.css -| Default Ocean Blue | https://unpkg.com/@progress/kendo-theme-default@{{site.themesVersion}}/dist/default-ocean-blue.css -| [Default Ocean Blue A11y]({%slug themes-accessibility-swatch%}) | https://unpkg.com/@progress/kendo-theme-default@{{site.themesVersion}}/dist/default-ocean-blue-a11y.css -| Default Blue | https://unpkg.com/@progress/kendo-theme-default@{{site.themesVersion}}/dist/default-blue.css -| Default Green | https://unpkg.com/@progress/kendo-theme-default@{{site.themesVersion}}/dist/default-green.css -| Default Nordic | https://unpkg.com/@progress/kendo-theme-default@{{site.themesVersion}}/dist/default-nordic.css -| Default Orange | https://unpkg.com/@progress/kendo-theme-default@{{site.themesVersion}}/dist/default-orange.css -| Default Purple | https://unpkg.com/@progress/kendo-theme-default@{{site.themesVersion}}/dist/default-purple.css -| Default Turquoise | https://unpkg.com/@progress/kendo-theme-default@{{site.themesVersion}}/dist/default-turquoise.css -| Default Urban | https://unpkg.com/@progress/kendo-theme-default@{{site.themesVersion}}/dist/default-urban.css - -### Bootstrap Theme - -| Swatch Name | CDN URL | -| --- | --- | -| Bootstrap Main
(Bootstrap 5) | https://unpkg.com/@progress/kendo-theme-bootstrap@{{site.themesVersion}}/dist/all.css
or
https://unpkg.com/@progress/kendo-theme-bootstrap@{{site.themesVersion}}/dist/bootstrap-main.css -| Bootstrap Main Dark
(Bootstrap 5 Dark) | https://unpkg.com/@progress/kendo-theme-bootstrap@{{site.themesVersion}}/dist/bootstrap-main-dark.css -| Bootstrap 3 | https://unpkg.com/@progress/kendo-theme-bootstrap@{{site.themesVersion}}/dist/bootstrap-3.css -| Bootstrap 3 Dark | https://unpkg.com/@progress/kendo-theme-bootstrap@{{site.themesVersion}}/dist/bootstrap-3-dark.css -| Bootstrap 4 | https://unpkg.com/@progress/kendo-theme-bootstrap@{{site.themesVersion}}/dist/bootstrap-4.css -| Bootstrap 4 Dark | https://unpkg.com/@progress/kendo-theme-bootstrap@{{site.themesVersion}}/dist/bootstrap-4-dark.css -| Bootstrap Nordic | https://unpkg.com/@progress/kendo-theme-bootstrap@{{site.themesVersion}}/dist/bootstrap-nordic.css -| Bootstrap Turquoise | https://unpkg.com/@progress/kendo-theme-bootstrap@{{site.themesVersion}}/dist/bootstrap-turquoise.css -| Bootstrap Turquoise Dark | https://unpkg.com/@progress/kendo-theme-bootstrap@{{site.themesVersion}}/dist/bootstrap-turquoise-dark.css -| Bootstrap Urban | https://unpkg.com/@progress/kendo-theme-bootstrap@{{site.themesVersion}}/dist/bootstrap-urban.css -| Bootstrap Vintage | https://unpkg.com/@progress/kendo-theme-bootstrap@{{site.themesVersion}}/dist/bootstrap-vintage.css - -### Material Theme - -| Swatch Name | CDN URL | -| --- | --- | -| Material Main | https://unpkg.com/@progress/kendo-theme-material@{{site.themesVersion}}/dist/all.css
or
https://unpkg.com/@progress/kendo-theme-material@{{site.themesVersion}}/dist/material-main.css -| Material Main Dark | https://unpkg.com/@progress/kendo-theme-material@{{site.themesVersion}}/dist/material-main-dark.css -| Material Aqua Dark | https://unpkg.com/@progress/kendo-theme-material@{{site.themesVersion}}/dist/material-aqua-dark.css -| Material Arctic | https://unpkg.com/@progress/kendo-theme-material@{{site.themesVersion}}/dist/material-arctic.css -| Material Burnt Teal | https://unpkg.com/@progress/kendo-theme-material@{{site.themesVersion}}/dist/material-burnt-teal.css -| Material Eggplant | https://unpkg.com/@progress/kendo-theme-material@{{site.themesVersion}}/dist/material-eggplant.css -| Material Lime | https://unpkg.com/@progress/kendo-theme-material@{{site.themesVersion}}/dist/material-lime.css -| Material Lime Dark | https://unpkg.com/@progress/kendo-theme-material@{{site.themesVersion}}/dist/material-lime-dark.css -| Material Nova | https://unpkg.com/@progress/kendo-theme-material@{{site.themesVersion}}/dist/material-nova.css -| Material Pacific | https://unpkg.com/@progress/kendo-theme-material@{{site.themesVersion}}/dist/material-pacific.css -| Material Pacific Dark | https://unpkg.com/@progress/kendo-theme-material@{{site.themesVersion}}/dist/material-pacific-dark.css -| Material Sky | https://unpkg.com/@progress/kendo-theme-material@{{site.themesVersion}}/dist/material-sky.css -| Material Sky Dark | https://unpkg.com/@progress/kendo-theme-material@{{site.themesVersion}}/dist/material-sky-dark.css -| Material Smoke | https://unpkg.com/@progress/kendo-theme-material@{{site.themesVersion}}/dist/material-smoke.css - -### Fluent Theme - -| Swatch Name | CDN URL | -| --- | --- | -| Fluent Main | https://unpkg.com/@progress/kendo-theme-fluent@{{site.themesVersion}}/dist/all.css
or
https://unpkg.com/@progress/kendo-theme-fluent@{{site.themesVersion}}/dist/fluent-main.css - -## Next Steps - -* [Create custom themes or swatches with the ThemeBuilder]({%slug themebuilder%}) - -## See Also - -* [Change the Theme at Runtime]({%slug change-theme-runtime%}) -* [Default Ocean Blue Accessibility Swatch]({%slug themes-accessibility-swatch%}) diff --git a/styling-and-themes/themebuilder.md b/styling-and-themes/themebuilder.md index 299b6afcc5..f6b87c3136 100644 --- a/styling-and-themes/themebuilder.md +++ b/styling-and-themes/themebuilder.md @@ -1,6 +1,6 @@ --- title: ThemeBuilder -page_title: ThemeBuilder Overview +page_title: ThemeBuilder description: Learn what ThemeBuilder is and how to use it to customize the appearance of the Telerik UI for Blazor components in your applications. slug: themebuilder tags: telerik,blazor,theme,custom,themebuilder @@ -8,30 +8,16 @@ published: True position: 20 --- -# ThemeBuilder Overview +# ThemeBuilder -The [ThemeBuilder](https://www.telerik.com/themebuilder) is a web application that enables you to create your custom styles and apply them to the Telerik UI components in your Blazor apps. +The [ThemeBuilder is an online tool](https://themebuilderapp.telerik.com) that enables you to create custom themes and instantly preview how the components will look. The tool generates a [CSS file that you can use in your Blazor app]({%slug themes-customize%}#loading-custom-themes) instead of a built-in theme. -With the [ThemeBuilder online tool](https://themebuilderapp.telerik.com), you can create new custom themes, modify existing ones, and organize them in projects. You are in full control of the appearance of every Telerik UI for Blazor component while, at the same time, you can apply large-scale updates in seconds. To speed up the customization of your Blazor app, the ThemeBuilder preview visualizes every style change almost instantly. - -Visit the [ThemeBuilder documentation portal](https://docs.telerik.com/themebuilder) to learn how to: +Visit the [ThemeBuilder documentation](https://docs.telerik.com/themebuilder) to learn how to: * [Create a custom theme](https://docs.telerik.com/themebuilder/get-started/first-steps-theme-builder) * Migrate custom themes to new component versions [automatically](https://docs.telerik.com/themebuilder/web-app/automatic-migrations) or [manually](https://docs.telerik.com/themebuilder/web-app/migrating-projects) * [Export and use a theme in your Blazor app](https://docs.telerik.com/themebuilder/exported-package) -## Implementing Design Requirements - -If you work with designers, ThemeBuilder allows you to style the Telerik UI for Blazor components precisely as required by your application's design and to apply your brand colors. - -To improve the collaboration between designers and developers, Telerik UI for Blazor comes with [four UI Kits for Figma]({% slug ui-kits/themes %}): Material, Bootstrap, Fluent, and Telerik UI Default. Your designers will use them to create the required application design and to apply your brand colors. To implement these design requirements, you need to create a new theme in ThemeBuilder and customize it: - -1. Request the designer to send you a link to the UI kit with the customized colors in Figma. -2. Use the link to open the design in Figma. If you don't have a Figma account, you can create one for free. -3. Navigate to the **Components** page and locate the **Color Styles** in the [Inspect Panel](https://help.figma.com/hc/en-us/articles/360055203533-Use-the-Inspect-panel), where you can find the values of all colors used in the design. -4. Create a new project in the ThemeBuilder application. To choose the most suitable starting **Theme**, ask your designer which UI Kit was used: **Default**, **Bootstrap**, **Material**, or **Fluent**. -5. Copy the color codes from the **Color Styles** in Figma and paste them into the ThemeBuilder color editor with the same name. For example, copy the value of the `$primary` color in Figma and paste it into the `$kendo-color-primary` color editor in ThemeBuilder. - ## See Also * [Progress ThemeBuilder Application](https://themebuilderapp.telerik.com) diff --git a/troubleshooting/csp.md b/troubleshooting/csp.md index f6c7bf0177..1ab81a0a8e 100644 --- a/troubleshooting/csp.md +++ b/troubleshooting/csp.md @@ -27,7 +27,7 @@ In general, a strict CSP can disable web app features, such as: Telerik UI for Blazor components need the following exceptions to strict CSP. Some of them depend on the product version or product usage. * Allow inline styles (`'unsafe-inline'`) to use component parameters such as `Width`, `Height`, `RowHeight`, `ItemHeight`, `Top`, `Left`, etc. In addition, some components rely on inline styles for their rich functionality and UX. -* Allow data URIs (`data:`) for images that are embedded in the [CSS themes]({%slug themes-built-in%}). These images are used for styled checkboxes and radio buttons, Slider ticks, and others. +* Allow data URIs (`data:`) for images that are embedded in the [CSS themes]({%slug themes-overview%}). These images are used for styled checkboxes and radio buttons, Slider ticks, and others. * *(starting from version 6.0.0)* Allow script evaluation (`'unsafe-eval'`), which is required by the [Spreadsheet]({%slug spreadsheet-overview%}) for cell validation and formula compilation. If you don't use the Spreadsheet component in your Blazor app, then check section [Build CSP Compliant telerik-blazor.js](#build-csp-compliant-telerik-blazorjs) below. * Allow `https://blazor.cdn.telerik.com` as a source when using [the Telerik CDN]({%slug common-features-cdn%}) for styles or scripts. diff --git a/upgrade/breaking-changes/3-0-0.md b/upgrade/breaking-changes/3-0-0.md index e07b63b97e..10810126e3 100644 --- a/upgrade/breaking-changes/3-0-0.md +++ b/upgrade/breaking-changes/3-0-0.md @@ -499,7 +499,7 @@ We are making our API naming more consistent. ## Rendering and Themes ->important The [HTML rendering and CSS classes have been updated for multiple components](https://www.telerik.com/blogs/improvements-coming-telerik-kendo-ui-themes-2022), including Buttons, Textbox components, Dropdown components, Date/Time Pickers, Checkbox, Switch. [Recreate any custom themes]({%slug themes-custom%}) via [import]({%slug themes-custom%}#import-custom-theme) or [from scratch]({%slug themes-custom%}#using-themebuilder). +>important The [HTML rendering and CSS classes have been updated for multiple components](https://www.telerik.com/blogs/improvements-coming-telerik-kendo-ui-themes-2022), including Buttons, Textbox components, Dropdown components, Date/Time Pickers, Checkbox, Switch. [Recreate any custom themes]({%slug themes-customize%}) via [import]({%slug themes-customize%}#import-custom-theme) or [from scratch]({%slug themes-customize%}#using-themebuilder). ### CSS Classes for State diff --git a/upgrade/overview.md b/upgrade/overview.md index c19f24ca6a..fa7799a822 100644 --- a/upgrade/overview.md +++ b/upgrade/overview.md @@ -44,7 +44,7 @@ To upgrade the Telerik UI for Blazor components used in your project, perform th * `{{site.themesVersion}}` if using [UNPKG CDN]({%slug common-features-cdn%}#unpkg-cdn) * `{{site.uiForBlazorLatestVersion}}` if using the [Telerik CDN]({%slug common-features-cdn%}#telerik-cdn) -1. If you are using a local theme stylesheet in `wwwroot`, then replace it. For example, if the app is using a [custom theme]({%slug themes-custom%}), then recreate it with the [ThemeBuilder]({%slug themebuilder%}). Or, if the [project was created with the Telerik® UI for Blazor Visual Studio Extensions]({%slug themes-swatches%}#visual-studio-and-visual-studio-code-wizards), then [download the required built-in theme]({%slug themes-swatches%}#swatch-urls) and add it to the project. +1. If you are using a local theme stylesheet in `wwwroot`, then replace it. For example, if the app is using a [custom theme]({%slug themes-customize%}), then recreate it with the [ThemeBuilder](https://docs.telerik.com/themebuilder). Or, if the [project was created with the Telerik® UI for Blazor Visual Studio Extensions]({%slug getting-started-vs-integration-new-project%}), then [download the required built-in theme]({%slug themes-overview%}#built-in-themes) and add it to the project. 1. If the application is localized, [update the Telerik localization (`.resx`) files]({%slug globalization-localization%}#how-localization-works-in-the-telerik-components). Otherwise you may see [exceptions related to missing localization strings]({%slug common-kb-null-value-parameter-format%}). diff --git a/upgrade/rendering-changes/list.md b/upgrade/rendering-changes/list.md index 95d1f00667..337874e1c9 100644 --- a/upgrade/rendering-changes/list.md +++ b/upgrade/rendering-changes/list.md @@ -8,7 +8,7 @@ position: 0 # List of Telerik UI for Blazor Versions with Rendering Changes -As the Telerik UI for Blazor matures we will continuously optimize the HTML rendering and the usage of CSS classes. The rendering changes only affect the styling of the components if the application [overrides the built-in CSS styles]({%slug themes-override%}) or uses an outdated [custom theme]({%slug themes-custom%}). This article tracks the product versions with rendering changes. +As the Telerik UI for Blazor matures we will continuously optimize the HTML rendering and the usage of CSS classes. The rendering changes only affect the styling of the components if the application [overrides the built-in CSS styles]({%slug themes-override%}) or uses an outdated [custom theme]({%slug themes-customize%}). This article tracks the product versions with rendering changes. * [6.0.0]({%slug changes-in-6-0-0%}) * [4.6.0]({%slug changes-in-4-6-0%})