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

Transparency with CSS variables storing hex colors is not supported #1800

New Issue
Closed
opened 2026-01-29 17:58:47 +00:00 by claunia · 1 comment
claunia commented 2026-01-29 17:58:47 +00:00
Owner
Copy Link

Originally created by @panasico on GitHub (Jul 4, 2025).

Describe the bug
When using a CSS variable that stores a hex color (e.g. --rz-base-600: #5e696e;), it is not possible to set transparency using rgba(var(--rz-base-600), 0.5). The resulting CSS is invalid (rgba(#5e696e, 0.5)) and not supported by browsers.

Because of this, your variable $grid-loading-indicator-background-color does not work as intended. When the grid is loading, the preloader remains fully transparent and is not visible.

To Reproduce
Steps to reproduce the behavior:

  1. Go to DataGrid.
  2. Set LoadData and IsLoading. Add to LoadData func delay 10s.
  3. Your preloader is transparent

Expected behavior
I expected to be able to set a semi-transparent background color for the grid loading indicator using the CSS variable, or to receive a clear error or warning. Ideally, there would be a recommended way to use hex color variables with transparency.

Screenshots

Image

Desktop (please complete the following information):

  • OS: Windows
  • Browser Yandex
  • Version 25.6.0.2370 (64-bit)

Additional context
Use only base color and add opacity property to 0.5. Or use --base color to rgb string, not hex. Ex.:
--rz-grid-loading-indicator-background-color: rgba(198, 203, 210, 0.5);

Image

Originally created by @panasico on GitHub (Jul 4, 2025). **Describe the bug** When using a CSS variable that stores a hex color (e.g. `--rz-base-600: #5e696e;`), it is not possible to set transparency using `rgba(var(--rz-base-600), 0.5)`. The resulting CSS is invalid `(rgba(#5e696e, 0.5))` and not supported by browsers. Because of this, your variable `$grid-loading-indicator-background-color` does not work as intended. When the grid is loading, the preloader remains fully transparent and is not visible. **To Reproduce** Steps to reproduce the behavior: 1. Go to DataGrid. 2. Set LoadData and IsLoading. Add to LoadData func delay 10s. 3. Your preloader is transparent **Expected behavior** I expected to be able to set a semi-transparent background color for the grid loading indicator using the CSS variable, or to receive a clear error or warning. Ideally, there would be a recommended way to use hex color variables with transparency. **Screenshots** ![Image](https://github.com/user-attachments/assets/3fc3ab02-0c88-42f1-a351-d352aa88e2f2) **Desktop (please complete the following information):** - OS: Windows - Browser Yandex - Version 25.6.0.2370 (64-bit) **Additional context** Use only base color and add opacity property to 0.5. Or use --base color to rgb string, not hex. Ex.: ` --rz-grid-loading-indicator-background-color: rgba(198, 203, 210, 0.5);` ![Image](https://github.com/user-attachments/assets/19f715da-f00c-4b6c-a5a6-24ae9193026c)
claunia commented 2026-01-29 17:58:48 +00:00
Author
Owner
Copy Link

@Cosmatevs commented on GitHub (Jul 11, 2025):

Have you tried color-mix()?

@Cosmatevs commented on GitHub (Jul 11, 2025): Have you tried [color-mix()](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#adding_transparency)?
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
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#1800
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?