Merge pull request #130 from IgniteUI/mpopov/flunet-button

refactor(button): improve fluent button styles
IgniteUI · Nov 16, 2021 · 51fbd02 · 51fbd02
2 parents 2a7fd28 + fe64077
commit 51fbd02
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/components/button/button.fluent.scss b/src/components/button/button.fluent.scss
@@ -9,16 +9,19 @@
     igc-button[size='small']::part(base) {
         border-radius: calc(var(--igc-border-radius) * 1);
         --size: #{utils.rem(24px)};
+        padding: 0 utils.rem(8px);
     }
 
     igc-button[size='medium']::part(base) {
         border-radius: calc(var(--igc-border-radius) * 1);
-        --size: #{utils.rem(28px)};
+        --size: #{utils.rem(32px)};
+        padding: 0 utils.rem(16px);
     }
 
     igc-button[size='large']::part(base) {
         border-radius: calc(var(--igc-border-radius) * 1);
-        --size: #{utils.rem(32px)};
+        --size: #{utils.rem(38px)};
+        padding: 0 utils.rem(16px);
     }
 
     // FLAT

diff --git a/src/styles/themes/fluent.scss b/src/styles/themes/fluent.scss
@@ -116,10 +116,11 @@ $fluent_subtitle-2: utils.type-style(
 $fluent_button: utils.type-style(
     $font-size: utils.rem(14px),
     $font-weight: 600,
-    $line-height: utils.rem(14px),
+    $line-height: normal,
     $text-transform: capitalize,
     $margin-top: 0,
-    $margin-bottom: 0
+    $margin-bottom: 0,
+    $letter-spacing: 0,
 );
 
 $fluent-type-scale: utils.type-scale(