Move font-family rule to [data-amplify-theme] (#1065)

* Move font-family rule to [data-amplify-theme] This fixes an issue where defining a fonts token in custom theme didn't override the default Inter font. This was occurring because the `font-family: var(--amplify-fonts-default-static)` is only defined at the root. The AmplifyProvider converts custom theme tokens to CSS variables at the [data-amplify-theme] node, which means the custom theme font wasn't being picked up. Moving it to the [data-amplify-theme] ensures that the custom font token is picked up correctly.
aws-amplify · Jan 3, 2022 · 86e70f8 · 86e70f8
1 parent f9be291
commit 86e70f8
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/.changeset/fuzzy-gifts-punch.md b/.changeset/fuzzy-gifts-punch.md
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui": patch
+---
+
+Fix issue where custom theme fonts are ignored
diff --git a/packages/ui/src/theme/css/styles.scss b/packages/ui/src/theme/css/styles.scss
@@ -4,11 +4,11 @@
 
 @import 'dist/theme';
 
-html {
+[data-amplify-theme] {
   font-family: var(--amplify-fonts-default-static);
 }
 @supports (font-variation-settings: normal) {
-  html {
+  [data-amplify-theme] {
     font-family: var(--amplify-fonts-default-variable);
   }
 }