feat(framework): scope theming css variables with component packages

[nnaydenow]

Scope and package --sap CSS variables with the web components package to improve theming reliability and prevent conflicts with external theme dependencies.

Some applications and custom themes rely on older versions of @sap-theming/theming-base-content, resulting in missing CSS variables when detected as external theming. This change ensures components have access to defined variables from newer versions when variables are not added externally, while allowing external variables to override defaults when present.

• Prefix all CSS variables used variables from @sap-theming/theming-base-content with --ui5- to scope
• Use default values from @sap-theming/theming-base-content as fallbacks per theme - each CSS variable is derived from the original name with default value per theme from theming base content as fallback
• Apply --sap CSS variables only when externally defined
• Decouple visual theme determination from component theme configuration - the visual active theme is determined by the loaded theming base content, independent of the theme set for web components. The components' theme setting only affects internal CSS variable mapping

Theme Behavior Expectation

Note: The following behavior applies when external CSS variables are detected when library is booting or when the theme is changing

Standard Theme (sap_horizon):

• SAP variables: sap_horizon
• Components: sap_horizon

Custom Theme (my_custom_theme extends sap_horizon):

• SAP variables: my_custom_theme
• Components: sap_horizon (maps to base theme)

Custom Theme (my_custom_theme extends sap_horizon, used theme is sap_fiori_3):

• SAP variables: my_custom_theme
• Components: sap_fiori_3

Fixes: #12446

[ui5-webcomponents-bot]

🧹 Preview deployment cleaned up: https://pr-12491--ui5-webcomponents.netlify.app

[ui5-webcomponents-bot]

🎉 This PR is included in version v2.17.0-rc.3 🎉

The release is available on v2.17.0-rc.3

Your semantic-release bot 📦🚀