[Feature Request]: Move CSS Variables from `:root` to components `shadow DOM`

[ilhan007]

Feature Request Description

The request is to enable customization by changing --sap-* CSS variables on web components instances.

Problem to resolve
We have a statement in our Styling section, describing how one can overwrite a CSS variable on web component instance:

<ui5-input>Press</ui5-input>

ui5-input {
  --sapField_BorderCornerRadius: 0.5rem;
}

The problem is that we noticed that this approach may or may not work - it's no guaranteed.
There are two reason for that not work:

• First, in some cases the --sap-* variables are not directly used within the component styles, but reassigned to another variable (private one --_ui5_*), which is then within the component styles
• Second, all variables --sap-* and --_ui5_* are applied to the :root

:root {
  --sapField_BorderCornerRadius: 0.25rem;
  ...
  ...
  ...
  --_ui5_input_border_radius: var(--sapField_BorderCornerRadius);
}

// Input.css
:host {
  border-radius: var(--_ui5_input_border_radius)
}

The second condition is given, this is the current implementation. So, when the first condition is also present and the global --sap-* variable is not directly used - this customization won't work.

Why? If we use the example above, although we change the --sapField_BorderCornerRadius value, the --_ui5_input_border_radius won't be updated, because we change --sapField_BorderCornerRadius on custom tag, while --_ui5_input_border_radius is declared on the :root (this is how CSS works).

Proposed Solution

Move CSS Variables from :root to components shadow DOM. Then, customization as shown above will naturally work, as the CSS variables definitions and overwrite will happen on the same level.

Proposed Alternatives

No response

Organization

No response

Additional Context

No response

Priority

Medium

Privacy Policy

• I’m not disclosing any internal or sensitive information.