-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* style: adds new fonts to Pine * chore: fixes style linting issues
- Loading branch information
1 parent
693d4ac
commit 90a511c
Showing
2 changed files
with
274 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,2 @@ | ||
| src/global/styles/_fonts.scss | ||
| src/global/styles/tokens/semantic/*.scss |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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"); | ||
| } |