adds background-color to compressed button group (#2568)

* adds background-color to compressed button group * lighten input group border color
elastic · Dec 2, 2019 · a845a2a · a845a2a
1 parent 8e46668
commit a845a2a
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Updated compressed styles for `EuiButtonGroup` to include a background color ([#2568](https://github.com/elastic/eui/pull/2568))
 - Added `heading` prop to `EuiCallOut` to allow for variance in the title tag ([#2357](https://github.com/elastic/eui/pull/2357))
 - Added `badge` prop and new styles `EuiHeaderAlert` ([#2506](https://github.com/elastic/eui/pull/2506))
 - Added new keyboard shortcuts for the data grid component: `Home` (same row, first column), `End` (same row, last column), `Ctrl+Home` (first row, first column), `Ctrl+End` (last row, last column), `Page Up` (next page) and `Page Down` (previous page) ([#2519](https://github.com/elastic/eui/pull/2519))

diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss
@@ -94,6 +94,7 @@
 .euiButtonGroup--compressed {
  border: 1px solid $euiFormBorderColor;
  border-radius: $euiFormControlCompressedBorderRadius;
+ background-color: $euiFormBackgroundColor;
 
  .euiButtonGroup__button {
  height: $euiFormControlCompressedHeight - 2px;

diff --git a/src/components/form/_variables.scss b/src/components/form/_variables.scss
@@ -33,6 +33,6 @@ $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 4
 $euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 18%, 30%) !default;
 $euiFormControlDisabledColor: $euiColorMediumShade !default;
 $euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8) !default;
-$euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 65%, 40%) !default;
-$euiFormInputGroupBorder: 1px solid shadeOrTint($euiFormInputGroupLabelBackground, 6%, 8%) !default;
+$euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 40%) !default;
+$euiFormInputGroupBorder: 1px solid shadeOrTint($euiFormInputGroupLabelBackground, 2%, 4%) !default;
 $euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3)) !default;