starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

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

New Issue
Open
opened 2026-01-29 18:17:56 +00:00 by claunia · 0 comments
claunia commented 2026-01-29 18:17:56 +00:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/radzenhq/radzen-blazor/pull/605
Author: @yordanov
Created: 9/14/2022
Status: ✅ Merged
Merged: 9/14/2022
Merged by: @yordanov

Base: master ← Head: themes

📝 Commits (10+)

  • b7dd085 Update sizing
  • 982ff5c Update sizing
  • 64abb96 Update typography
  • ea4534d Remove sizing from standard theme
  • 21b3d07 Add selection and default body font-size
  • df363c3 Add global css vars
  • db68506 Add css vars to standard and default theme
  • 5fd64ae Add css vars to input and badge
  • c8fbe0e Add CSS vars and update colors
  • 538d725 Add css vars and update colors

📊 Changes

232 files changed (+12231 additions, -6797 deletions)

View changed files

📝 Radzen.Blazor.Tests/IconTests.cs (+1 -1)
📝 Radzen.Blazor/Common.cs (+75 -1)
📝 Radzen.Blazor/RadzenBadge.razor.cs (+16 -0)
📝 Radzen.Blazor/RadzenButton.razor (+23 -21)
📝 Radzen.Blazor/RadzenButton.razor.cs (+16 -2)
📝 Radzen.Blazor/RadzenCard.razor.cs (+1 -1)
📝 Radzen.Blazor/RadzenDataGrid.razor (+1 -1)
📝 Radzen.Blazor/RadzenDataGridFilterMenu.razor (+2 -2)
📝 Radzen.Blazor/RadzenDataGridHeaderCell.razor (+3 -3)
📝 Radzen.Blazor/RadzenDatePicker.razor (+1 -1)
📝 Radzen.Blazor/RadzenDropDown.razor (+1 -1)
📝 Radzen.Blazor/RadzenDropDownDataGrid.razor (+2 -2)
📝 Radzen.Blazor/RadzenDropDownItem.razor (+2 -2)
📝 Radzen.Blazor/RadzenFileInput.razor (+2 -2)
📝 Radzen.Blazor/RadzenFileInput.razor.cs (+2 -2)
📝 Radzen.Blazor/RadzenGrid.razor (+2 -2)
📝 Radzen.Blazor/RadzenIcon.razor.cs (+1 -1)
📝 Radzen.Blazor/RadzenListBoxItem.razor (+1 -1)
📝 Radzen.Blazor/RadzenScheduler.razor (+1 -1)
📝 Radzen.Blazor/RadzenSidebarToggle.razor.cs (+1 -1)

...and 80 more files

📄 Description

image

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

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/radzenhq/radzen-blazor/pull/605 **Author:** [@yordanov](https://github.com/yordanov) **Created:** 9/14/2022 **Status:** ✅ Merged **Merged:** 9/14/2022 **Merged by:** [@yordanov](https://github.com/yordanov) **Base:** `master` ← **Head:** `themes` --- ### 📝 Commits (10+) - [`b7dd085`](https://github.com/radzenhq/radzen-blazor/commit/b7dd0857556f60c74b17513995302c4a976af1f7) Update sizing - [`982ff5c`](https://github.com/radzenhq/radzen-blazor/commit/982ff5cefc39f0d921179f50f6d9018847c766c5) Update sizing - [`64abb96`](https://github.com/radzenhq/radzen-blazor/commit/64abb96054c34553f16a1e85aeb9125e385a1faa) Update typography - [`ea4534d`](https://github.com/radzenhq/radzen-blazor/commit/ea4534d1d7190221e3d11486376c205421923235) Remove sizing from standard theme - [`21b3d07`](https://github.com/radzenhq/radzen-blazor/commit/21b3d0741fa8ebd8ba29a7418ce6f7da602be59c) Add selection and default body font-size - [`df363c3`](https://github.com/radzenhq/radzen-blazor/commit/df363c36b3b6a5819c550fe67e2d2215edf51f85) Add global css vars - [`db68506`](https://github.com/radzenhq/radzen-blazor/commit/db68506d982bb449247280d2cf9a5deb9cd5281e) Add css vars to standard and default theme - [`5fd64ae`](https://github.com/radzenhq/radzen-blazor/commit/5fd64aec1a351761a65e37f43ee8f0da5f3c47bf) Add css vars to input and badge - [`c8fbe0e`](https://github.com/radzenhq/radzen-blazor/commit/c8fbe0ef750f2cc5029024b73193cee0c5803537) Add CSS vars and update colors - [`538d725`](https://github.com/radzenhq/radzen-blazor/commit/538d7259493afebcf04c89b9f5a948617f3b8f4e) Add css vars and update colors ### 📊 Changes **232 files changed** (+12231 additions, -6797 deletions) <details> <summary>View changed files</summary> 📝 `Radzen.Blazor.Tests/IconTests.cs` (+1 -1) 📝 `Radzen.Blazor/Common.cs` (+75 -1) 📝 `Radzen.Blazor/RadzenBadge.razor.cs` (+16 -0) 📝 `Radzen.Blazor/RadzenButton.razor` (+23 -21) 📝 `Radzen.Blazor/RadzenButton.razor.cs` (+16 -2) 📝 `Radzen.Blazor/RadzenCard.razor.cs` (+1 -1) 📝 `Radzen.Blazor/RadzenDataGrid.razor` (+1 -1) 📝 `Radzen.Blazor/RadzenDataGridFilterMenu.razor` (+2 -2) 📝 `Radzen.Blazor/RadzenDataGridHeaderCell.razor` (+3 -3) 📝 `Radzen.Blazor/RadzenDatePicker.razor` (+1 -1) 📝 `Radzen.Blazor/RadzenDropDown.razor` (+1 -1) 📝 `Radzen.Blazor/RadzenDropDownDataGrid.razor` (+2 -2) 📝 `Radzen.Blazor/RadzenDropDownItem.razor` (+2 -2) 📝 `Radzen.Blazor/RadzenFileInput.razor` (+2 -2) 📝 `Radzen.Blazor/RadzenFileInput.razor.cs` (+2 -2) 📝 `Radzen.Blazor/RadzenGrid.razor` (+2 -2) 📝 `Radzen.Blazor/RadzenIcon.razor.cs` (+1 -1) 📝 `Radzen.Blazor/RadzenListBoxItem.razor` (+1 -1) 📝 `Radzen.Blazor/RadzenScheduler.razor` (+1 -1) 📝 `Radzen.Blazor/RadzenSidebarToggle.razor.cs` (+1 -1) _...and 80 more files_ </details> ### 📄 Description <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 --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
claunia added the pull-request label 2026-01-29 18:17:56 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#2250
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?