Skip to content

Commit b7200cc

Browse files
authored
fix: apply correct scoping for internal ui5wc CSS vars (#6059)
Fixes #6051
1 parent a061c29 commit b7200cc

File tree

5 files changed

+33
-10
lines changed

5 files changed

+33
-10
lines changed

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
outline: none;
99
position: absolute;
1010
pointer-events: none;
11-
inset: var(--_ui5_card_header_focus_offset);
12-
border: var(--_ui5_card_header_focus_border);
13-
border-radius: var(--_ui5_card_header_focus_radius) var(--_ui5_card_header_focus_radius)
14-
var(--_ui5_card_header_focus_bottom_radius) var(--_ui5_card_header_focus_bottom_radius);
11+
inset: var(--_ui5wcr_card_header_focus_offset);
12+
border: var(--_ui5wcr_card_header_focus_border);
13+
border-radius: var(--_ui5wcr_card_header_focus_radius) var(--_ui5wcr_card_header_focus_radius)
14+
var(--_ui5wcr_card_header_focus_bottom_radius) var(--_ui5wcr_card_header_focus_bottom_radius);
1515
}
1616

1717
&:focus-visible {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
.dynamicPage:has([data-component-name='DynamicPageFooter']) {
1717
/* bar height + padding */
18-
scroll-padding-block-end: calc(var(--_ui5_bar_base_height) + 1rem);
18+
scroll-padding-block-end: calc(var(--_ui5wcr_bar_base_height) + 1rem);
1919
}
2020

2121
.headerCollapsed {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
}
2424

2525
.anchorBarActionButton {
26-
--_ui5wcr_anchor-btn-center: calc((var(--_ui5_button_base_min_width) - var(--sapButton_BorderWidth)) / 2);
26+
--_ui5wcr_anchor-btn-center: calc((1.5rem - var(--sapButton_BorderWidth)) / 2);
2727
position: absolute;
2828
inset-block-start: calc(-1 * var(--_ui5wcr_anchor-btn-center));
2929
inset-inline-start: calc(50% - var(--_ui5wcr_anchor-btn-center));

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
'use client';
22

33
import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme.js';
4+
import { getScopedVarName } from '@ui5/webcomponents-base/dist/CustomElementsScope.js';
5+
import type { StyleDataCSP } from '@ui5/webcomponents-base/dist/ManagedStyles.js';
46
import { attachThemeLoaded, detachThemeLoaded } from '@ui5/webcomponents-base/dist/theming/ThemeLoaded.js';
57
import {
68
StyleStore,
@@ -18,9 +20,30 @@ import { styleData } from './ThemeProvider.css.js';
1820
function ThemeProviderStyles() {
1921
const uniqueId = useIsomorphicId();
2022
useStylesheet(styleData, `${ThemeProvider.displayName}-${uniqueId}`);
23+
useStylesheet(ui5WcVariablesStyleData, `${ThemeProvider.displayName}-css-vars-${uniqueId}`);
2124
return null;
2225
}
2326

27+
const InternalUI5WCVVarNames = {
28+
'--_ui5wcr_card_header_focus_offset': `var(${getScopedVarName('--_ui5_card_header_focus_offset')})`,
29+
'--_ui5wcr_card_header_focus_border': `var(${getScopedVarName('--_ui5_card_header_focus_border')})`,
30+
'--_ui5wcr_card_header_focus_radius': `var(${getScopedVarName('--_ui5_card_header_focus_radius')})`,
31+
'--_ui5wcr_card_header_focus_bottom_radius': `var(${getScopedVarName('--_ui5_card_header_focus_bottom_radius')})`,
32+
'--_ui5wcr_popup_header_font_family': `var(${getScopedVarName('--_ui5_popup_header_font_family')})`,
33+
'--_ui5wcr_popup_default_header_height': `var(${getScopedVarName('--_ui5_popup_default_header_height')})`,
34+
'--_ui5wcr_bar_base_height': `var(${getScopedVarName('--_ui5_bar_base_height')})`
35+
};
36+
37+
const ui5WcVariablesStyleData: StyleDataCSP = {
38+
content: `:root {${Object.entries(InternalUI5WCVVarNames)
39+
.map(([key, value]) => {
40+
return `${key}: ${value};`;
41+
})
42+
.join(' ')}}`,
43+
packageName: '@ui5/webcomponents-react',
44+
fileName: 'ThemeProvider'
45+
};
46+
2447
export interface ThemeProviderPropTypes {
2548
children: ReactNode;
2649
withoutModalsProvider?: boolean;

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,11 +28,11 @@
2828
max-width: 100%;
2929
display: inline-block;
3030
padding-inline-start: 1rem;
31-
font-family: '72override', var(--_ui5_popup_header_font_family);
31+
font-family: var(--_ui5wcr_popup_header_font_family);
3232
font-size: 1rem;
33-
min-height: var(--_ui5_popup_default_header_height);
34-
max-height: var(--_ui5_popup_default_header_height);
35-
line-height: var(--_ui5_popup_default_header_height);
33+
min-height: var(--_ui5wcr_popup_default_header_height);
34+
max-height: var(--_ui5wcr_popup_default_header_height);
35+
line-height: var(--_ui5wcr_popup_default_header_height);
3636
}
3737

3838
.search {

0 commit comments

Comments
 (0)