Implement CSS variables to font families (#2091)

- This allows to NRO to override any token when the new identity is relased Co-authored-by: Dan Tovbein <dtovbein@gmail.com>
greenpeace · Aug 16, 2023 · 962d9ad · 962d9ad
1 parent 6c6817e
commit 962d9ad
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/assets/src/scss/base/_css-variables.scss b/assets/src/scss/base/_css-variables.scss
@@ -1,6 +1,6 @@
 :root {
-  --body--font-family: #{$lora};
-  --headings--font-family: #{$roboto};
+  --body--font-family: var(--font-family-primary);
+  --headings--font-family: var(--font-family-secondary);
   --headings--font-weight: bold;
   --body--background-color: #{$white};
   --body--color: #{$grey-80};

diff --git a/assets/src/scss/base/_variables.scss b/assets/src/scss/base/_variables.scss
@@ -2,6 +2,12 @@
 $roboto:     "Roboto", sans-serif;
 $lora:       "Lora", serif;
 
+:root {
+  --font-family-primary: #{$roboto};
+  --font-family-secondary: #{$lora};
+  --font-family-tertiary: #{$lora};
+}
+
 // Media queries
 $extra-small-width:       320px;
 $small-width:             576px;

diff --git a/assets/src/scss/new-identity/style.scss b/assets/src/scss/new-identity/style.scss
@@ -1,5 +1,5 @@
-@import "../base/tokens";
 @import "../base/variables";
+@import "../base/tokens";
 @import "../base/mixins";
 @import "./fonts";