Grid Checkbox Selection - SVG icon always use fallback color

[pfaffmann]

Bug report

Dear Kendo Team,

Using the Grid Checkbox Selection column i found the following bug. The SVG check icon uses always the fallback color. Therfore it is not possible to set the color of this icon.

Reproduction of the problem

I created this snippet for reproduction. https://dojo.telerik.com/ufUdUnUH

1. Run the snippet: https://dojo.telerik.com/ufUdUnUH
2. Select a row in the grid
3. Observe the color of the checkmark icon in the checkbox

I manually overwrite the --kendo-color-primary and --kendo-color-on-primary variables and expect, that the SVG icon uses the --kendo-color-on-primary color (green <-> #00ff00) as its stroke color, but it is white.

Current behavior

The SVG is set with the css url() function. This function sanitizes the input therfore the expression var(--kendo-color-on-primary, #ffffff) can not be evaluated. The icon uses always the fallback color as stroke color.

Expected/desired behavior

The SVG icon has the same color as set via --kendo-color-on-primary

Environment

• Kendo UI version: 2024.2.514
• jQuery version: 3.4.1
• Browser: all

[georgi-sla]

Similar behavior is also present in the Kendo UI for Angular RadioButton.

[filipKovachev]

Similar behavior can be observed in the Kendo UI for Vue and KendoReact RadioButton, Reported in Ticket ID: 1672640

[crobinson-expl]

Similar behavior can be observed in the KendoReact RadioButton, Reported in Ticket ID: 1672640

It may be in KendoReact as well, but the referenced ticket is for KendoVue (it's my ticket 😊).