fix(styles): button fonts (#3855)

SAP · Sep 7, 2022 · c86d5f9 · c86d5f9
1 parent 60e523b
commit c86d5f9
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 0 deletions.
diff --git a/src/fonts/sap_fonts.scss b/src/fonts/sap_fonts.scss
@@ -21,6 +21,13 @@
   font-style: normal;
 }
 
+@font-face {
+  font-family: '72-SemiboldDuplex';
+  src:
+    url('~@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/72-SemiboldDuplex.woff')
+    format('woff');
+}
+
 @font-face {
   font-family: 'BusinessSuiteInAppSymbols';
   src:

diff --git a/src/styles/button.scss b/src/styles/button.scss
@@ -55,6 +55,11 @@ $fd-button-compact-padding-x: calc(0.5rem - #{$fd-button-border-width});
     color: inherit;
   }
 
+  &,
+  &__text {
+    font-family: var(--fdButton_Font_Family);
+  }
+
   *:not(:first-child) {
     // Mixin cannot be used because of !important
     margin-left: 0.375rem !important;

diff --git a/src/styles/theming/common/button/_sap_fiori.scss b/src/styles/theming/common/button/_sap_fiori.scss
@@ -4,6 +4,7 @@
   --fdButton_Ghost_Background: var(--sapButton_Lite_Background);
   --fdButton_Outline_Contrast: var(--sapContent_ContrastFocusColor);
   --fdButton_Outline_Offset: -0.1875rem;
+  --fdButton_Font_Family: var(--sapFontFamily);
 
   /** Shadows */
   --fdButton_Text_Shadow: none;

diff --git a/src/styles/theming/common/button/_sap_horizon.scss b/src/styles/theming/common/button/_sap_horizon.scss
@@ -4,6 +4,7 @@
   --fdButton_Ghost_Background: var(--sapButton_Background);
   --fdButton_Outline_Contrast: var(--sapContent_FocusColor);
   --fdButton_Outline_Offset: calc(-0.1875rem - var(--sapButton_BorderWidth));
+  --fdButton_Font_Family: var(--sapFontSemiboldDuplexFamily);
 
   /** Shadows */
   --fdButton_Text_Shadow: none;

diff --git a/src/styles/theming/common/button/_sap_horizon_hc.scss b/src/styles/theming/common/button/_sap_horizon_hc.scss
@@ -2,6 +2,7 @@
 
 :root {
   --fdButton_Emphasized_Border_Width: 0.125rem;
+  --fdButton_Font_Family: var(--sapFontFamily);
 
   /** Badge */
   --fdButton_Badge_Border_Color: var(--sapGroup_ContentBorderColor);