[PR #605] Update themes - new CSS variables, utility CSS classes, Material Theme and improved sizing #2254

New Issue

claunia · 2026-01-29T18:17:57Z

claunia commented

2026-01-29 18:17:57 +00:00

Original Pull Request: https://github.com/radzenhq/radzen-blazor/pull/605

State: closed
Merged: Yes

Here are some of the most notable improvements:

All Components

New

New CSS Variables - all components now use custom CSS properties (CSS variables) for theming
New <RadzenText> component with predefined styles for h1, h2, h3, h4, h5, h6, Subtitle and Body
New utility CSS classes for:
- Text Color
- Background Color
- Border, Border Color and Border Radius
- Shadow
New Material UI 2 theme

Improvements

Updated color palettes of all themes
Updated sizing and interaction states of all components with Standard, Default, Dark, Humanistic and Software themes

Accordion

New SCSS variables for toggle-icon (flex order, collapsed icon shape, expanded icon shape)

AutoComplete

Fixed vertical position of .rz-autocomplete-panel (deleted transform: translate(-1px, -$input-border-radius);)

Badge

Align button in badge
New BadgeStyle.Dark style
New Variant property with Filled, Outlined and Text variants
New Shade property with Lighter, Light, Default, Dark and Darker shades

Fix alignment of links

Button

New ButtonSize.Large size
New ButtonStyle.Dark style
New Variant property with Filled, Outlined and Text variants
New Shade property with Lighter, Light, Default, Dark and Darker shades
Updated CSS class for button styling (.rz- prefix instead of .btn-)
Added .rz-button-box wrapper inside the button to improve responsiveness and alignment of button contents

Chart

Added fill color to Series Data Label, Axis and Donut Titles

DatePicker

Use SCSS $timepicker-gap instead of $timepicker-separator-margin

New SCSS variables $dropdown-items-padding and $dropdown-item-border-radius
Fixed vertical position of dropdown-panel (deleted transform: translateY(-$input-border-radius);)

Fieldset

New SCSS variable $fieldset-legend-margin

DataGrid

Fixed header text overflow - use ellipsis if text cannot fit in
Styled column reorder hint
Display header sort icon on hover (if not sorted by that column) to reduce visual clutter
Set overflow: visible to rz-data-cell containing checkbox or button

Icon

i.rzi elements use display: inline-flex by default
New IconStyle.Dark style

Link

Added Link :hover and :focus styles

New SCSS variables $menu-item-icon-color and $menu-item-icon-hover-color

Fixed link cursor to pointer

Notification

Added background-color to notification container
Added SCSS variables for color, icon-color and background-color of info, success, warning and danger notification types

Fixed Next and Prev buttons to use the same default styling

Panel

New SCSS variable $panel-toggle-icon-font-size

ProgressBar

New ProgressBarStyle.Dark style

Sidebar Toggle

Renamed .sidebar-toggle to .rz-sidebar-toggle

Slider

Removed Slider drag-handle icon

Switch

New SCSS variable $switch-checked-circle-background-color
Switch border-radius in Huministic theme is 0.

Steps

New SCSS variable $steps-buttons-padding
Added automatic scroll to Steps' content when height is fixed

Tabs

Renamed SCSS variables $tabs-selected-tab-color, $tabs-hover-color, $tabs-hover-background-color to $tabs-tab-selected-color, $tabs-tab-hover-color, $tabs-tab-hover-background-color respectively

Improved tooltip callout arrow position

Tree

Removed unused SCSS variables $tree-border, $tree-padding and $tree-border-radius

Upload

Added :hover and :active styles to Upload Choose button

**Original Pull Request:** https://github.com/radzenhq/radzen-blazor/pull/605 **State:** closed **Merged:** Yes --- <img width="1782" alt="image" src="https://user-images.githubusercontent.com/1118895/190151241-9282b7eb-0c80-48be-9f43-b6201cc9ed67.png"> Here are some of the most notable improvements: ## All Components ### New - New CSS Variables - all components now use custom CSS properties (CSS variables) for theming - New ```<RadzenText>``` component with predefined styles for h1, h2, h3, h4, h5, h6, Subtitle and Body - New utility CSS classes for: - Text Color - Background Color - Border, Border Color and Border Radius - Shadow - New Material UI 2 theme ### Improvements - Updated color palettes of all themes - Updated sizing and interaction states of all components with Standard, Default, Dark, Humanistic and Software themes ## Accordion - New SCSS variables for toggle-icon (flex order, collapsed icon shape, expanded icon shape) ## AutoComplete - Fixed vertical position of ```.rz-autocomplete-panel``` (deleted ```transform: translate(-1px, -$input-border-radius);```) ## Badge - Align button in badge - New ```BadgeStyle.Dark``` style - New ```Variant``` property with Filled, Outlined and Text variants - New ```Shade``` property with Lighter, Light, Default, Dark and Darker shades ## Breadcrumb - Fix alignment of links ## Button - New ```ButtonSize.Large``` size - New ```ButtonStyle.Dark``` style - New ```Variant``` property with Filled, Outlined and Text variants - New ```Shade``` property with Lighter, Light, Default, Dark and Darker shades - Updated CSS class for button styling (```.rz-``` prefix instead of ```.btn-```) - Added ```.rz-button-box``` wrapper inside the button to improve responsiveness and alignment of button contents ## Chart - Added fill color to Series Data Label, Axis and Donut Titles ## DatePicker - Use SCSS ```$timepicker-gap``` instead of ```$timepicker-separator-margin``` ## Dropdown - New SCSS variables ```$dropdown-items-padding``` and ```$dropdown-item-border-radius``` - Fixed vertical position of ```dropdown-panel``` (deleted ```transform: translateY(-$input-border-radius);```) ## Fieldset - New SCSS variable ```$fieldset-legend-margin``` ## DataGrid - Fixed header text overflow - use ellipsis if text cannot fit in - Styled column reorder hint - Display header sort icon on hover (if not sorted by that column) to reduce visual clutter - Set ```overflow: visible``` to ```rz-data-cell``` containing checkbox or button ## Icon - ```i.rzi``` elements use ```display: inline-flex``` by default - New ```IconStyle.Dark``` style ## Link - Added Link ```:hover``` and ```:focus``` styles ## Menu - New SCSS variables ```$menu-item-icon-color``` and ```$menu-item-icon-hover-color``` ## Navigation - Fixed link cursor to pointer ## Notification - Added ```background-color``` to notification container - Added SCSS variables for color, icon-color and background-color of info, success, warning and danger notification types ## Pager - Fixed Next and Prev buttons to use the same default styling ## Panel - New SCSS variable ```$panel-toggle-icon-font-size``` ## ProgressBar - New ```ProgressBarStyle.Dark``` style ## Sidebar Toggle - Renamed ```.sidebar-toggle``` to ```.rz-sidebar-toggle``` ## Slider - Removed Slider drag-handle icon ## Switch - New SCSS variable ```$switch-checked-circle-background-color``` - Switch border-radius in Huministic theme is 0. ## Steps - New SCSS variable ```$steps-buttons-padding``` - Added automatic scroll to Steps' content when height is fixed ## Tabs - Renamed SCSS variables ```$tabs-selected-tab-color```, ```$tabs-hover-color```, ```$tabs-hover-background-color``` to ```$tabs-tab-selected-color```, ```$tabs-tab-hover-color```, ```$tabs-tab-hover-background-color``` respectively ## Tooltip - Improved tooltip callout arrow position ## Tree - Removed unused SCSS variables ```$tree-border```, ```$tree-padding``` and ```$tree-border-radius``` ## Upload - Added ```:hover``` and ```:active``` styles to Upload Choose button

claunia added the pull-request label 2026-01-29 18:17:57 +00:00

claunia closed this issue

2026-01-29 18:17:57 +00:00

claunia referenced this issue

2026-01-29 18:22:10 +00:00

[PR #2254] [MERGED] RadzenAIChat component added #3158

Sign in to join this conversation.