fix: apply correct scoping for internal ui5wc CSS vars (#6059)

Fixes #6051

Author: Lukas742

packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.module.css

@@ -8,10 +8,10 @@
     outline: none;
     position: absolute;
     pointer-events: none;
-    inset: var(--_ui5_card_header_focus_offset);
-    border: var(--_ui5_card_header_focus_border);
-    border-radius: var(--_ui5_card_header_focus_radius) var(--_ui5_card_header_focus_radius)
-      var(--_ui5_card_header_focus_bottom_radius) var(--_ui5_card_header_focus_bottom_radius);
+    inset: var(--_ui5wcr_card_header_focus_offset);
+    border: var(--_ui5wcr_card_header_focus_border);
+    border-radius: var(--_ui5wcr_card_header_focus_radius) var(--_ui5wcr_card_header_focus_radius)
+      var(--_ui5wcr_card_header_focus_bottom_radius) var(--_ui5wcr_card_header_focus_bottom_radius);
   }
 
   &:focus-visible {

packages/main/src/components/DynamicPage/DynamicPage.module.css

@@ -15,7 +15,7 @@
 
 .dynamicPage:has([data-component-name='DynamicPageFooter']) {
   /* bar height + padding */
-  scroll-padding-block-end: calc(var(--_ui5_bar_base_height) + 1rem);
+  scroll-padding-block-end: calc(var(--_ui5wcr_bar_base_height) + 1rem);
 }
 
 .headerCollapsed {

packages/main/src/components/DynamicPageAnchorBar/DynamicPageAnchorBar.module.css

@@ -23,7 +23,7 @@
 }
 
 .anchorBarActionButton {
-  --_ui5wcr_anchor-btn-center: calc((var(--_ui5_button_base_min_width) - var(--sapButton_BorderWidth)) / 2);
+  --_ui5wcr_anchor-btn-center: calc((1.5rem - var(--sapButton_BorderWidth)) / 2);
   position: absolute;
   inset-block-start: calc(-1 * var(--_ui5wcr_anchor-btn-center));
   inset-inline-start: calc(50% - var(--_ui5wcr_anchor-btn-center));

packages/main/src/components/ThemeProvider/index.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
+import { getScopedVarName } from '@ui5/webcomponents-base/dist/CustomElementsScope.js';
+import type { StyleDataCSP } from '@ui5/webcomponents-base/dist/ManagedStyles.js';
 import { attachThemeLoaded, detachThemeLoaded } from '@ui5/webcomponents-base/dist/theming/ThemeLoaded.js';
 import {
   StyleStore,
@@ -18,9 +20,30 @@ import { styleData } from './ThemeProvider.css.js';
 function ThemeProviderStyles() {
   const uniqueId = useIsomorphicId();
   useStylesheet(styleData, `${ThemeProvider.displayName}-${uniqueId}`);
+  useStylesheet(ui5WcVariablesStyleData, `${ThemeProvider.displayName}-css-vars-${uniqueId}`);
   return null;
 }
 
+const InternalUI5WCVVarNames = {
+  '--_ui5wcr_card_header_focus_offset': `var(${getScopedVarName('--_ui5_card_header_focus_offset')})`,
+  '--_ui5wcr_card_header_focus_border': `var(${getScopedVarName('--_ui5_card_header_focus_border')})`,
+  '--_ui5wcr_card_header_focus_radius': `var(${getScopedVarName('--_ui5_card_header_focus_radius')})`,
+  '--_ui5wcr_card_header_focus_bottom_radius': `var(${getScopedVarName('--_ui5_card_header_focus_bottom_radius')})`,
+  '--_ui5wcr_popup_header_font_family': `var(${getScopedVarName('--_ui5_popup_header_font_family')})`,
+  '--_ui5wcr_popup_default_header_height': `var(${getScopedVarName('--_ui5_popup_default_header_height')})`,
+  '--_ui5wcr_bar_base_height': `var(${getScopedVarName('--_ui5_bar_base_height')})`
+};
+
+const ui5WcVariablesStyleData: StyleDataCSP = {
+  content: `:root {${Object.entries(InternalUI5WCVVarNames)
+    .map(([key, value]) => {
+      return `${key}: ${value};`;
+    })
+    .join(' ')}}`,
+  packageName: '@ui5/webcomponents-react',
+  fileName: 'ThemeProvider'
+};
+
 export interface ThemeProviderPropTypes {
   children: ReactNode;
   withoutModalsProvider?: boolean;

packages/main/src/components/VariantManagement/ManageViewsDialog.module.css

@@ -28,11 +28,11 @@
   max-width: 100%;
   display: inline-block;
   padding-inline-start: 1rem;
-  font-family: '72override', var(--_ui5_popup_header_font_family);
+  font-family: var(--_ui5wcr_popup_header_font_family);
   font-size: 1rem;
-  min-height: var(--_ui5_popup_default_header_height);
-  max-height: var(--_ui5_popup_default_header_height);
-  line-height: var(--_ui5_popup_default_header_height);
+  min-height: var(--_ui5wcr_popup_default_header_height);
+  max-height: var(--_ui5wcr_popup_default_header_height);
+  line-height: var(--_ui5wcr_popup_default_header_height);
 }
 
 .search {