fix(SegmentedButton): add intermediate css variable mappings in order…

… to fix styling (#375)
SAP · Mar 24, 2020 · 86e962e · 86e962e
1 parent 7b05ab9
commit 86e962e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git 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
@@ -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