From 86e962eb315381a1442b94b37baffeecff8638ca Mon Sep 17 00:00:00 2001 From: vbersch Date: Tue, 24 Mar 2020 14:25:32 +0100 Subject: [PATCH] fix(SegmentedButton): add intermediate css variable mappings in order to fix styling (#375) --- packages/base/src/styling/CssSizeVariables.ts | 6 ++++++ .../SegmentedButtonItem/SegmentedButtonItem.jss.ts | 3 ++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/base/src/styling/CssSizeVariables.ts b/packages/base/src/styling/CssSizeVariables.ts index 42f1d7f4b62..ddf595c82e3 100644 --- a/packages/base/src/styling/CssSizeVariables.ts +++ b/packages/base/src/styling/CssSizeVariables.ts @@ -61,6 +61,12 @@ export const cssVariablesStyles = ` --sapLink_Hover_Color:var(--sapUiLinkHover); --sapLink_InvertedColor:var(--sapUiLinkInverted); --sapLink_Active_Color:var(--sapUiLinkActive); + --sapButton_Selected_Background:var(--sapUiSegmentedButtonSelectedBackground); + --sapButton_Selected_TextColor:var(--sapUiSegmentedButtonSelectedTextColor); + --sapButton_Selected_BorderColor:var(--sapUiSegmentedButtonSelectedHoverBorderColor); + --sapContent_ContrastIconColor:var(--sapUiContentContrastIconColor); + --sapButton_Active_Background:var(--sapUiSegmentedButtonActiveBackground); + --sapButton_Active_TextColor:var(--sapUiButtonActiveColor); } diff --git a/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts b/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts index 6a4d8850ec5..327f887f813 100644 --- a/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts +++ b/packages/main/src/components/SegmentedButtonItem/SegmentedButtonItem.jss.ts @@ -40,7 +40,8 @@ const styles = { background: ThemingParameters.sapButton_Selected_Background, color: ThemingParameters.sapButton_Selected_TextColor, borderColor: ThemingParameters.sapButton_Selected_BorderColor, - '--sapContent_NonInteractiveIconColor': ThemingParameters.sapContent_ContrastIconColor, + // TODO: replace with ThemingParameters.sapContent_ContrastIconColor after ui5-webcomponents upgrade to rc.6 + '--sapContent_NonInteractiveIconColor': 'var(--sapUiContentContrastIconColor)', '$:active': { background: ThemingParameters.sapButton_Active_Background, color: ThemingParameters.sapButton_Active_TextColor