docs(common): Update information about custom themes and color variables #2103
Conversation
| * [Comparing the Blazor CSS Customization Approaches](#comparing-the-blazor-css-customization-approaches) | ||
| * [How to Use a Custom Theme I Have](#how-to-use-a-custom-theme-i-have) | ||
| * [Contribution](#contribution) | ||
| * [Compare the visual customization options for the Telerik Blazor components](#blazor-css-customization-options) |
There was a problem hiding this comment.
This anchor link is broken. Should be: (#visual-customization-options)
|
|
||
| // Alternatively, include all components. | ||
| @import "../all.scss"; | ||
| It is possible to customize the appearance of our components by overriding the theme variable values outside the theme CSS file. This spares the need to create and maintain a full custom theme. |
There was a problem hiding this comment.
our components should be Telerik Blazor components or Blazor UI components.
|
|
||
| For the Default and Bootstrap themes, the swatch should look like: | ||
| * [Default theme variables](https://www.telerik.com/design-system/docs/themes/theme-default/theme-variables/) |
There was a problem hiding this comment.
All links here should use the syntax for external links (<a href="" target="_blank"></a>) as per our latest style guide recommendations.
|
|
||
| ### Using Variables | ||
| 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. |
There was a problem hiding this comment.
Switch to external link syntax for both links.
|
|
||
| ## Contribution | ||
|
|
||
| To contribute to the development of the Kendo UI Default Theme, refer to the [telerik/kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository it is stored in. | ||
| To contribute to the development of the Kendo UI Themes, go to the [telerik/kendo-themes](https://github.com/telerik/kendo-themes) GitHub repository. |
There was a problem hiding this comment.
External link syntax needed here.
|
|
||
| * **Default** is our own neutral styling that suits most cases. The theme has a [swatch (color variation)]({%slug themes-swatches%}) called [Ocean Blue]({%slug themes-accessibility-swatch%}), which features enhanced accessibility. |
There was a problem hiding this comment.
our own neutral styling should be a neutral styling.
|
|
||
| * **Default** is our own neutral styling that suits most cases. The theme has a [swatch (color variation)]({%slug themes-swatches%}) called [Ocean Blue]({%slug themes-accessibility-swatch%}), which features enhanced accessibility. | ||
| * **Bootstrap** matches the styling of the [Bootstrap CSS framework](https://getbootstrap.com). Read more in the [Bootstrap Notes](#bootstrap-notes) section below. |
There was a problem hiding this comment.
Apply external link syntax throughout the page as needed. Not marking these anymore.
|
|
||
| The UI for Blazor suite has the same HTML rendering and SASS Theme stylesheets like other Kendo UI suites, so previous experience with them can be helpful. The components in **UI for Blazor are native components** and not wrappers over jQuery widgets, however. | ||
| Telerik UI for Blazor has the same HTML rendering and SASS theme stylesheets as the Kendo UI widgets, so previous experience with them can be helpful. The components in **UI for Blazor are native components** and not wrappers over jQuery widgets. |
There was a problem hiding this comment.
The bold formatting is odd here. Maybe apply it only to **native components** or to the entire start of the sentence: **The components in UI for Blazor are native components**.
|
|
||
| This article contains the following sections: | ||
| To register a theme, you must reference its stylesheet in the `<head>` the web page. The exact file that contains the `<head>` 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 was a problem hiding this comment.
An of went missing. Should be: in the <head> of the web page.
| @@ -10,9 +10,9 @@ position: 3 | |||
|
|
|||
| # ThemeBuilder Overview | |||
|
|
|||
| [ThemeBuilder](https://www.telerik.com/themebuilder) is a web application that enables you to create your custom styles and apply them to the UI components in your Blazor apps. | |||
| 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. | |||
There was a problem hiding this comment.
Note that the marketing page does not use the ThemeBuilder as a valid product name. It's either ThemeBuilder (no defnite/indefinite article), or the ThemeBuilder application/plugin. Correct as needed.
No description provided.