From 3551d2db7006402aa581bdb874aef07dce576c4d Mon Sep 17 00:00:00 2001 From: Yordan Mitev Date: Mon, 14 Oct 2024 14:29:24 +0300 Subject: [PATCH 1/2] Add key ThemeBuilder features --- styling-and-themes/themebuilder.md | 48 ++++++++++++++++++++++++++---- 1 file changed, 42 insertions(+), 6 deletions(-) diff --git a/styling-and-themes/themebuilder.md b/styling-and-themes/themebuilder.md index f6b87c3136..bbea0c368b 100644 --- a/styling-and-themes/themebuilder.md +++ b/styling-and-themes/themebuilder.md @@ -8,17 +8,53 @@ published: True position: 20 --- -# ThemeBuilder +# Progress ThemeBuilder -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. +[ThemeBuilder](https://themebuilderapp.telerik.com) is a SaaS tool that enables you to create custom themes and instantly preview how they affect the appearance of the components. 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. + +## Key Procedures 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) +* [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). + +## Key Features + +Whether you're developing a custom design system or applying a consistent look and feel across your applications, ThemeBuilder streamlines the process. Its features reduce the complexity of manual CSS/SASS adjustments and enable easy collaboration. + +### Atomic Customization + +ThemeBuilder gives you full control over your components' styles. From high-level settings such as color schemes and typography to detailed adjustments for specific elements and states, you can fine-tune the look of every UI component and its parts. This flexibility ensures that your components not only look great but also match your brand's guidelines. + +### Custom SASS/CSS Variables + +Simplify your workflow with ThemeBuilder’s support for SASS and CSS variables. Create and manage multiple variables as a single source of truth for your styles—adjusting one variable updates the appearance of multiple components across your project. This ensures consistency and saves time by eliminating repetitive editing. + +### Custom HTML Support + +In ThemeBuilder, you can work not only with Telerik and Kendo UI components but also with custom HTML elements. This flexibility lets you style entire web UIs, ensuring a consistent look across projects that combine your own components with the Telerik and Kendo UI controls. + +### Figma Integration + +ThemeBuilder’s Figma integration allows you to export Figma variables directly to SASS/CSS variables including colors, typography, metrics, and more. Designers can now collaborate seamlessly with developers, ensuring that the design intent translates perfectly into the final product. + +### Theme Modes and Built-In Themes + +ThemeBuilder comes with five built-in themes—Material, Bootstrap, Fluent, Default, and Classic—that provide a solid foundation for your design. You can also switch between light and dark modes, enabling quick implementation of modern UI practices. + +Importing and mapping of Figma variables to ThemeBuilder modes is also supported. + +### Custom Fonts and Iconography + +ThemeBuilder also enables you to upload and use custom fonts and icons, making it easy to apply your brand's unique visual identity. + +### Project Sharing, Version Control, and Collaboration + +ThemeBuilder’s features such as project sharing, version control, and user access rights make it easy for multiple users to work together without overwriting each other’s changes. Every project can be versioned, enabling you to roll back to earlier designs and maintain a detailed history of your progress. ## See Also * [Progress ThemeBuilder Application](https://themebuilderapp.telerik.com) -* [Progress ThemeBuilder Documentation](https://docs.telerik.com/themebuilder) +* [Progress ThemeBuilder Documentation](https://docs.telerik.com/themebuilder) \ No newline at end of file From e89718a7888d0a02f09f47d676e4065162f770c7 Mon Sep 17 00:00:00 2001 From: Yordan <60105689+yordan-mitev@users.noreply.github.com> Date: Wed, 16 Oct 2024 11:19:01 +0300 Subject: [PATCH 2/2] Add relevant links --- styling-and-themes/themebuilder.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/styling-and-themes/themebuilder.md b/styling-and-themes/themebuilder.md index bbea0c368b..759f485bf4 100644 --- a/styling-and-themes/themebuilder.md +++ b/styling-and-themes/themebuilder.md @@ -26,7 +26,7 @@ Whether you're developing a custom design system or applying a consistent look a ### Atomic Customization -ThemeBuilder gives you full control over your components' styles. From high-level settings such as color schemes and typography to detailed adjustments for specific elements and states, you can fine-tune the look of every UI component and its parts. This flexibility ensures that your components not only look great but also match your brand's guidelines. +ThemeBuilder gives you full control over your components' styles. From high-level settings such as color schemes and typography to detailed adjustments for specific elements and states, you can [fine-tune the look of every UI component and its parts](https://docs.telerik.com/themebuilder/building-visual-styles/apply-advanced-customizations). This flexibility ensures that your components not only look great but also match your brand's guidelines. ### Custom SASS/CSS Variables @@ -34,27 +34,27 @@ Simplify your workflow with ThemeBuilder’s support for SASS and CSS variables. ### Custom HTML Support -In ThemeBuilder, you can work not only with Telerik and Kendo UI components but also with custom HTML elements. This flexibility lets you style entire web UIs, ensuring a consistent look across projects that combine your own components with the Telerik and Kendo UI controls. +In ThemeBuilder, you can work not only with Telerik and Kendo UI components but also with [custom HTML elements](https://docs.telerik.com/themebuilder/building-visual-styles/custom-components). This flexibility lets you style entire web UIs, ensuring a consistent look across projects that combine your own components with the Telerik and Kendo UI controls. ### Figma Integration -ThemeBuilder’s Figma integration allows you to export Figma variables directly to SASS/CSS variables including colors, typography, metrics, and more. Designers can now collaborate seamlessly with developers, ensuring that the design intent translates perfectly into the final product. +ThemeBuilder’s [Figma integration](https://docs.telerik.com/themebuilder/plugin/installation) allows you to export Figma variables directly to SASS/CSS variables including colors, typography, metrics, and more. Designers can now collaborate seamlessly with developers, ensuring that the design intent translates perfectly into the final product. ### Theme Modes and Built-In Themes -ThemeBuilder comes with five built-in themes—Material, Bootstrap, Fluent, Default, and Classic—that provide a solid foundation for your design. You can also switch between light and dark modes, enabling quick implementation of modern UI practices. +ThemeBuilder comes with five built-in themes—Material, Bootstrap, Fluent, Default, and Classic—that provide a solid foundation for your design. You can also switch between [light and dark modes](https://docs.telerik.com/themebuilder/building-visual-styles/variables), enabling quick implementation of modern UI practices. Importing and mapping of Figma variables to ThemeBuilder modes is also supported. ### Custom Fonts and Iconography -ThemeBuilder also enables you to upload and use custom fonts and icons, making it easy to apply your brand's unique visual identity. +ThemeBuilder also enables you to upload and use [custom fonts](https://docs.telerik.com/themebuilder/building-visual-styles/using-custom-fonts) and icons, making it easy to apply your brand's unique visual identity. ### Project Sharing, Version Control, and Collaboration -ThemeBuilder’s features such as project sharing, version control, and user access rights make it easy for multiple users to work together without overwriting each other’s changes. Every project can be versioned, enabling you to roll back to earlier designs and maintain a detailed history of your progress. +ThemeBuilder’s features such as [project sharing](https://docs.telerik.com/themebuilder/basic-project-operations/sharing-a-project), version control, and user access rights make it easy for multiple users to work together without overwriting each other’s changes. Every project can be versioned, enabling you to roll back to earlier designs and maintain a detailed history of your progress. ## See Also * [Progress ThemeBuilder Application](https://themebuilderapp.telerik.com) -* [Progress ThemeBuilder Documentation](https://docs.telerik.com/themebuilder) \ No newline at end of file +* [Progress ThemeBuilder Documentation](https://docs.telerik.com/themebuilder)