From 9848b8aafd7060a17c9484cdcfc34dcd74f693c0 Mon Sep 17 00:00:00 2001
From: Ashley E <ashley.echols@kajabi.com>
Date: Wed, 7 Aug 2024 10:53:35 -0500
Subject: [PATCH] Typography: add new fonts (#233)

* style: adds new fonts to Pine

* chore: fixes style linting issues
---
 libs/core/.stylelintignore              |   1 +
 libs/core/src/global/styles/_fonts.scss | 311 +++++++++++++++++++++---
 2 files changed, 274 insertions(+), 38 deletions(-)

diff --git a/libs/core/.stylelintignore b/libs/core/.stylelintignore
index 11170c97c..c55e68da1 100644
--- a/libs/core/.stylelintignore
+++ b/libs/core/.stylelintignore
@@ -1 +1,2 @@
+src/global/styles/_fonts.scss
 src/global/styles/tokens/semantic/*.scss
\ No newline at end of file
diff --git a/libs/core/src/global/styles/_fonts.scss b/libs/core/src/global/styles/_fonts.scss
index e49df8a9b..f4a915702 100644
--- a/libs/core/src/global/styles/_fonts.scss
+++ b/libs/core/src/global/styles/_fonts.scss
@@ -1,91 +1,326 @@
 ////
 /// Fonts setup
 ///
-/// @group sage
+/// @group pine
 ////
+$-body-font-version: 1;
 
 $sage-font-cdn-root: 'https://sage.kajabi-cdn.com/fonts';
-/* stylelint-disable-next-line annotation-no-unknown */
-$body-font-path: '#{$sage-font-cdn-root}/circular' !default; // pathname of font directory
-$body-font-name: 'CircularXXWeb';
-$body-font-version: 1;
 
-// Regular
+$sage-greet-font-path: "#{$sage-font-cdn-root}/greet" !default; // pathname of font directory
+$-greet-font-name: "greetstandard";
+
+$sage-inter-font-path: "#{$sage-font-cdn-root}/inter" !default; // pathname of font directory
+$-inter-font-name: "Inter";
+
+// Light
 @font-face {
+  font-family: "GreetStandard";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: local("#{$-greet-font-name}-light"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-light.woff2?v=#{$-body-font-version}") format("woff2"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-light.woff?v=#{$-body-font-version}") format("woff");
+}
+
+// Light Italic
+@font-face {
+  font-family: "GreetStandard";
+  font-style: italic;
+  font-weight: 300;
   font-display: swap;
-  font-family: 'Circular';
+  src: local("#{$-greet-font-name}-lightitalic"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-lightitalic.woff2?v=#{$-body-font-version}") format("woff2"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-lightitalic.woff?v=#{$-body-font-version}") format("woff");
+}
+
+// Regular
+@font-face {
+  font-family: "GreetStandard";
   font-style: normal;
   font-weight: 400;
-  src: local('#{$body-font-name}-Regular'), url('#{$body-font-path}/#{$body-font-name}-Regular.woff2?v=#{$body-font-version}') format('woff2'),
-    url('#{$body-font-path}/#{$body-font-name}-Regular.woff?v=#{$body-font-version}') format('woff');
+  font-display: swap;
+  src: local("#{$-greet-font-name}-regular"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-regular.woff2?v=#{$-body-font-version}") format("woff2"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-regular.woff?v=#{$-body-font-version}") format("woff");
 }
 
 // Regular Italic
 @font-face {
-  font-display: swap;
-  font-family: 'Circular';
+  font-family: "GreetStandard";
   font-style: italic;
   font-weight: 400;
-  src: local('#{$body-font-name}-Italic'), url('#{$body-font-path}/#{$body-font-name}-Italic.woff2?v=#{$body-font-version}') format('woff2'),
-    url('#{$body-font-path}/#{$body-font-name}-Italic.woff?v=#{$body-font-version}') format('woff');
+  font-display: swap;
+  src: local("#{$-greet-font-name}-regularitalic"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-regularitalic.woff2?v=#{$-body-font-version}") format("woff2"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-regularitalic.woff?v=#{$-body-font-version}") format("woff");
 }
 
 // Medium
 @font-face {
-  font-display: swap;
-  font-family: 'Circular';
+  font-family: "GreetStandard";
   font-style: normal;
   font-weight: 500;
-  src: local('#{$body-font-name}-Book'), url('#{$body-font-path}/#{$body-font-name}-Book.woff2?v=#{$body-font-version}') format('woff2'),
-    url('#{$body-font-path}/#{$body-font-name}-Book.woff?v=#{$body-font-version}') format('woff');
+  font-display: swap;
+  src: local("#{$-greet-font-name}-medium"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-medium.woff2?v=#{$-body-font-version}") format("woff2"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-medium.woff?v=#{$-body-font-version}") format("woff");
 }
 
 // Medium Italic
 @font-face {
-  font-display: swap;
-  font-family: 'Circular';
+  font-family: "GreetStandard";
   font-style: italic;
   font-weight: 500;
-  src: local('#{$body-font-name}-BookItalic'), url('#{$body-font-path}/#{$body-font-name}-BookItalic.woff2?v=#{$body-font-version}') format('woff2'),
-    url('#{$body-font-path}/#{$body-font-name}-BookItalic.woff?v=#{$body-font-version}') format('woff');
+  font-display: swap;
+  src: local("#{$-greet-font-name}-mediumitalic"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-mediumitalic.woff2?v=#{$-body-font-version}") format("woff2"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-mediumitalic.woff?v=#{$-body-font-version}") format("woff");
+}
+
+// Semi-Bold
+@font-face {
+  font-family: "GreetStandard";
+  font-style: normal ;
+  font-weight: 600 ;
+  font-display: swap;
+  src: local("#{$-greet-font-name}-semibold"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-semibold.woff2?v=#{$-body-font-version}") format("woff2"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-semibold.woff?v=#{$-body-font-version}") format("woff");
+}
+
+// Semi-Bold Italic
+@font-face {
+  font-family: "GreetStandard";
+  font-style: italic ;
+  font-weight: 600 ;
+  font-display: swap;
+  src: local("#{$-greet-font-name}-semibolditalic"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-semibolditalic.woff2?v=#{$-body-font-version}") format("woff2"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-semibolditalic.woff?v=#{$-body-font-version}") format("woff");
 }
 
-// Semibold
+// Bold
 @font-face {
+  font-family: "GreetStandard";
+  font-style: normal ;
+  font-weight: 700 ;
   font-display: swap;
-  font-family: 'Circular';
+  src: local("#{$-greet-font-name}-bold"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-bold.woff2?v=#{$-body-font-version}") format("woff2"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-bold.woff?v=#{$-body-font-version}") format("woff");
+}
+
+// Bold Italic
+@font-face {
+  font-family: "GreetStandard";
+  font-style: italic ;
+  font-weight: 700 ;
+  font-display: swap;
+  src: local("#{$-greet-font-name}-bolditalic"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-bolditalic.woff2?v=#{$-body-font-version}") format("woff2"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-bolditalic.woff?v=#{$-body-font-version}") format("woff");
+}
+
+// Heavy (Black)
+@font-face {
+  font-family: "GreetStandard";
+  font-style: "normal";
+  font-weight: 900;
+  font-display: swap;
+  src: local("#{$-greet-font-name}-heavy"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-heavy.woff2?v=#{$-body-font-version}") format("woff2"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-heavy.woff?v=#{$-body-font-version}") format("woff");
+}
+
+// Heavy (Black) Italic
+@font-face {
+  font-family: "GreetStandard";
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: local("#{$-greet-font-name}-heavyitalic"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-heavyitalic.woff2?v=#{$-body-font-version}") format("woff2"),
+    url("#{$sage-greet-font-path}/#{$-greet-font-name}-heavyitalic.woff?v=#{$-body-font-version}") format("woff");
+}
+
+// Inter
+
+// Thin
+@font-face {
+  font-family: "Inter";
   font-style: normal;
-  font-weight: 600;
-  src: local('#{$body-font-name}-Medium'), url('#{$body-font-path}/#{$body-font-name}-Medium.woff2?v=#{$body-font-version}') format('woff2'),
-    url('#{$body-font-path}/#{$body-font-name}-Medium.woff?v=#{$body-font-version}') format('woff');
+  font-weight: 100;
+  font-display: swap;
+  src: local("#{$-inter-font-name}-Thin"),
+    url("#{$sage-inter-font-path}/#{$-inter-font-name}-Thin.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Thin Italic
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+  src: local("#{$-inter-font-name}-ThinItalic"),
+    url("#{$sage-inter-font-path}/#{$-inter-font-name}-ThinItalic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Extra Light
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: local("#{$-inter-font-name}-ExtraLight"),
+    url("#{$sage-inter-font-path}/#{$-inter-font-name}-ExtraLight.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Extra Light Italic
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 200;
+  font-display: swap;
+  src: local("#{$-inter-font-name}-ExtraLightItalic"),
+    url("#{$sage-inter-font-path}/#{$-inter-font-name}-ExtraLightItalic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Light
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: local("#{$-inter-font-name}-Light"),
+    url("#{$sage-inter-font-path}/#{$-inter-font-name}-Light.woff2?v=#{$-body-font-version}") format("woff2");
 }
 
-// Semibold Italic
+// Light Italic
 @font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 300;
   font-display: swap;
-  font-family: 'Circular';
+  src: local("#{$-inter-font-name}-LightItalic"),
+    url("#{$sage-inter-font-path}/#{$-inter-font-name}-LightItalic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Regular
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("#{$-inter-font-name}-Regular"),
+    url("#{$sage-inter-font-path}/#{$-inter-font-name}-Regular.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Italic
+@font-face {
+  font-family: "Inter";
   font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local("#{$-inter-font-name}-Italic"),
+    url("#{$sage-inter-font-path}/#{$-inter-font-name}-Italic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Medium
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: local("#{$-inter-font-name}-Medium"),
+    url("#{$sage-inter-font-path}/#{$-inter-font-name}-Medium.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Medium Italic
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: local("#{$-inter-font-name}-MediumItalic"),
+    url("#{$sage-inter-font-path}/#{$-inter-font-name}-MediumItalic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
   font-weight: 600;
-  src: local('#{$body-font-name}-MediumItalic'), url('#{$body-font-path}/#{$body-font-name}-MediumItalic.woff2?v=#{$body-font-version}') format('woff2'),
-    url('#{$body-font-path}/#{$body-font-name}-MediumItalic.woff?v=#{$body-font-version}') format('woff');
+  font-display: swap;
+  src: local("#{$-inter-font-name}-Thin"),
+    url("#{$sage-inter-font-path}/#{$-inter-font-name}-SemiBold.woff2?v=#{$-body-font-version}") format("woff2");
 }
 
-// Bold
 @font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 600;
   font-display: swap;
-  font-family: 'Circular';
+  src: local("#{$-inter-font-name}-Thin"),
+    url("#{$sage-inter-font-path}/#{$-inter-font-name}-SemiBoldItalic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Semi-Bold
+@font-face {
+  font-family: "Inter";
   font-style: normal;
   font-weight: 700;
-  src: local('#{$body-font-name}-Bold'), url('#{$body-font-path}/#{$body-font-name}-Bold.woff2?v=#{$body-font-version}') format('woff2'),
-    url('#{$body-font-path}/#{$body-font-name}-Bold.woff?v=#{$body-font-version}') format('woff');
+  font-display: swap;
+  src: local("#{$-inter-font-name}-SemiBold"),
+    url("#{$sage-inter-font-path}/#{$-inter-font-name}-Bold.woff2?v=#{$-body-font-version}") format("woff2");
 }
 
 // Bold Italic
 @font-face {
-  font-display: swap;
-  font-family: 'Circular';
+  font-family: "Inter";
   font-style: italic;
   font-weight: 700;
-  src: local('#{$body-font-name}-BoldItalic'), url('#{$body-font-path}/#{$body-font-name}-BoldItalic.woff2?v=#{$body-font-version}') format('woff2'),
-    url('#{$body-font-path}/#{$body-font-name}-BoldItalic.woff?v=#{$body-font-version}') format('woff');
+  font-display: swap;
+  src: local("#{$-inter-font-name}-BoldItalic"),
+    url("#{$sage-inter-font-path}/#{$-inter-font-name}-BoldItalic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Extra Bold
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: local("#{$-inter-font-name}-ExtraBold"),
+    url("#{$sage-inter-font-path}/#{$-inter-font-name}-ExtraBold.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Extra Bold Italic
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 800;
+  font-display: swap;
+  src: local("#{$-inter-font-name}-ExtraBoldItalic"),
+    url("#{$sage-inter-font-path}/#{$-inter-font-name}-ExtraBoldItalic.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Black
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: local("#{$-inter-font-name}-Black"),
+    url("#{$sage-inter-font-path}/#{$-inter-font-name}-Black.woff2?v=#{$-body-font-version}") format("woff2");
+}
+
+// Black Italic
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: local("#{$-inter-font-name}-BlackItalic"),
+    url("#{$sage-inter-font-path}/#{$-inter-font-name}-BlackItalic.woff2?v=#{$-body-font-version}") format("woff2");
 }