From 962d9adddf3f333483ce0318f70c93aa97c33526 Mon Sep 17 00:00:00 2001
From: Dan Tovbein <dtovbein@greenpeace.org>
Date: Wed, 16 Aug 2023 07:11:25 -0300
Subject: [PATCH] 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>
---
 assets/src/scss/base/_css-variables.scss | 4 ++--
 assets/src/scss/base/_variables.scss     | 6 ++++++
 assets/src/scss/new-identity/style.scss  | 2 +-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/assets/src/scss/base/_css-variables.scss b/assets/src/scss/base/_css-variables.scss
index 2f099891a0..27791ee806 100644
--- 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
index 433ab351b3..abe3f15706 100644
--- 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
index 170c7783be..4a74867f26 100644
--- 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";