Free Material theme, new UI fundamentals, CSS variables and utility classes

The latest version of our open-source Radzen Blazor Components delivers major UI improvements across the board.

TLDR, in no particular order:

• FREE Material theme - based on Google’s famous Material Design 2 guidelines for developing modern Web and mobile applications.
• CSS Variables - all components now use custom CSS properties for theming.
• UI Fundamentals - a new <RadzenText> component and a set of predefined utility CSS classes for applying various text, background or border colors, border radiuses, and shadows.
• Color palettes - all themes now share the same color palette system that enables quick predictable customizations, and scalability.
• Optimized components’ sizing - updated sizing in all themes with respect to component’s specifics, such as ease of use and accessibility.

Open-sourced Material Theme

We are happy to share with the community our revamped Material design light theme. The theme shares the same theming mechanism (explaned further below) with the rest of the Radzen Blazor themes.

CSS Variables

CSS properties (variables) add dynamic values to static CSS files - a value stored in one place can be referenced in multiple other places. Using our predefined set of CSS variables, you can make non-Radzen UI elements look consistent when used together with Radzen Blazor Components.

See a list of Radzen Blazor color variables in the Colors demo, and a list of text variables in the Typography demo.

Read more about Using CSS custom properties

UI Fundamentals

If you prefer to add CSS classes instead of inline styles, you can do so using Radzen Blazor utility CSS classes. The classes use CSS variables underneath and allow you to effortlessly adjust the styling of UI elements and components.

You can use CSS classes to set:

• Text Color, e.g. .rz-color-primary applies theme’s primary color to the text
• Background Color, e.g. .rz-background-color-primary applies theme’s primary color to the background
• Border Color, e.g. .rz-border-color-primary applies theme’s primary color to the border
• Border, e.g. .rz-border-primary applies theme’s primary border 1px solid var(--rz-primary)
• Shadow, e.g. .rz-shadow-2 applies theme’s predefined shadow with level 2

New RadzenText Component

Use the RadzenText component to format text in your application. The component allows you to apply various predefined styling and alignment for headings and content while keeping the compiled code semantically correct.

Color Palettes

We’ve reorganized the themes’ color system to make it more universal. The update impacts the relationships between color values and properties to create scalable palettes. It is important to note that introducing new color schemes does not implicitly mean new color values, yet some of the colors have been updated to improve themes’ overall look and feel.

All themes now ship with a predefined:

• Base color palette --rz-base-50 to --rz-base-900. The palette includes hardcoded hex values of tints and shades of the base theme color, used to style components’ base backgrounds, texts and borders.
• Primary --rz-primary and Secondary --rz-secondary accent colors. They have lighter tints and darker shades that are automatically generated via SCSS.
• Info, Success, Warning, and Danger functional colors. They also have lighter tints and darker shades that are automatically generated via SCSS.
• Default chart series palette.

At the very top of each theme SCSS file you can find a mapping between the legacy color variables and the new ones.

See Colors demo.

Optimized sizing

We reviewed thoroughly each UI theme across components and optimized spacing and sizing to better match component’s functionality, ease of use, accessibility, and comply with different design languages (e.g. Material, Fluent).

Don’t forget to follow us for more Blazor goodness on GitHub, Twitter, LinkedIn and YouTube.