Clean up some typography sizing for buttons

elastic · Oct 21, 2019 · d164cd7 · d164cd7
1 parent b1f2300
commit d164cd7
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 11 deletions.
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -6,6 +6,7 @@
 // Our base button
 .euiButton {
   @include euiButton;
+  @include euiFontSize;
 
   border-radius: $euiBorderRadius;
   min-width: $euiButtonMinWidth;
@@ -22,6 +23,7 @@
   }
 
   &.euiButton--small {
+    @include euiFontSizeS;
     border-radius: ($euiBorderRadius * .75);
     height: $euiButtonHeightSmall;
     line-height: $euiButtonHeightSmall; // prevents descenders from getting cut off

diff --git a/src/components/button/_mixins.scss b/src/components/button/_mixins.scss
@@ -1,6 +1,5 @@
 @mixin euiButton {
   @include euiFont;
-  @include euiFontSize;
 
   display: inline-block;
   appearance: none;

diff --git a/src/components/button/button_group/_button_group.scss b/src/components/button/button_group/_button_group.scss
@@ -53,11 +53,6 @@
     &:not([class*='fill']) {
       border-color: $euiButtonToggleBorderColor;
     }
-
-    // don't colorize the shadows
-    &:enabled {
-      @include euiSlightShadow;
-    }
   }
 
   &:first-child {

diff --git a/src/global_styling/mixins/_shadow.scss b/src/global_styling/mixins/_shadow.scss
@@ -48,6 +48,7 @@
 
 @mixin euiBottomShadowSmallHover($color: $euiShadowColor, $opacity: .15) {
   box-shadow:
+    0 0 0 5px rgba($euiShadowColorHover, $opacity),
     0 2px 4px 0 rgba($color, $opacity),
     0 4px 8px 0 rgba($color, $opacity),
     0 8px 16px 0 rgba($color, $opacity),

diff --git a/src/global_styling/mixins/_typography.scss b/src/global_styling/mixins/_typography.scss
@@ -26,19 +26,19 @@
   @if $size == 'xxxs' {
     @include euiFontSizeXS;
     @include lineHeightFromBaseline(3);
-    font-weight: $euiFontWeightBold;
+    font-weight: $euiFontWeightSemiBold;
   } @else if $size == 'xxs' {
     @include euiFontSizeS;
     @include lineHeightFromBaseline(3);
-    font-weight: $euiFontWeightBold;
+    font-weight: $euiFontWeightSemiBold;
   } @else if $size == 'xs' {
     @include euiFontSize;
     @include lineHeightFromBaseline(3);
     font-weight: $euiFontWeightSemiBold;
   } @else if $size == 's' {
     @include euiFontSizeL;
     @include lineHeightFromBaseline(4);
-    font-weight: $euiFontWeightMedium;
+    font-weight: $euiFontWeightBold;
   } @else if $size == 'm' {
     @include euiFontSizeXL;
     @include lineHeightFromBaseline(5);

diff --git a/src/global_styling/variables/_shadows.scss b/src/global_styling/variables/_shadows.scss
@@ -2,3 +2,4 @@
 // Transparency only affects the use of variable this outside of the shadow mixins (borders)
 $euiShadowColor: $euiColorMediumShade !default;
 $euiShadowColorLarge: shade(saturate($euiColorMediumShade, 25%), 50%) !default;
+$euiShadowColorHover: $euiColorPrimary;
diff --git a/src/global_styling/variables/_typography.scss b/src/global_styling/variables/_typography.scss
@@ -33,9 +33,9 @@ $euiCodeFontFamily: 'Roboto Mono', Consolas, Menlo, Courier, monospace !default;
 $euiFontFeatureSettings: 'calt' 1, 'kern' 1, 'liga' 1 !default;
 
 // Font sizes -- scale is loosely based on Major Third (1.250)
-$euiTextScale:      2.5, 1.75, 1.25, 1.125, 1, .875, .75 !default;
+$euiTextScale:      2.8, 2, 1.4, 1.2, 1, .875, .75 !default;
 
-$euiFontSize:       $euiSize !default; // 5th position in scale
+$euiFontSize:       15px !default; // 5th position in scale
 
 $euiFontSizeXS:     $euiFontSize * nth($euiTextScale, 7) !default; // 12px
 $euiFontSizeS:      $euiFontSize * nth($euiTextScale, 6) !default; // 14px