refactor: make lib font-family agnostic

abelflopes · Jul 18, 2024 · 96c6aaa · 96c6aaa
1 parent f70c96a
commit 96c6aaa
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 13 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/text/src/styles/_mixins.scss b/packages/components/text/src/styles/_mixins.scss
@@ -32,7 +32,7 @@
   @include define-css-var(text, text-decoration, none);
 
   color: get-css-var(text, color);
-  font-family: get-css-var(text, font-family);
+  font-family: inherit;
   font-size: get-css-var(text, font-size);
   font-weight: get-css-var(text, font-weight);
   line-height: get-css-var(text, line-height);

diff --git a/packages/components/text/src/styles/_variables.scss b/packages/components/text/src/styles/_variables.scss
@@ -6,7 +6,6 @@
 $text-skins: (
   base: (
     default: (
-      font-family: get-css-var(font, family),
       color: get-color(neutral-dark-5),
     ),
     hover: (),

diff --git a/packages/docs/storybook/.storybook/preview-head.html b/packages/docs/storybook/.storybook/preview-head.html
@@ -1 +1,6 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
+  rel="stylesheet" />
 <link rel="stylesheet" href="/override.css" />
diff --git a/packages/docs/storybook/public/override.css b/packages/docs/storybook/public/override.css
@@ -1,59 +1,67 @@
+/* set font for components */
+#storybook-docs .sb-story,
+#storybook-root {
+  font-family: Inter, serif;
+  font-optical-sizing: auto;
+  font-variation-settings: "slnt" 0;
+}
+
 .custom-docs-wrapper {
-  background-color: #fff;
   min-height: 100%;
+  background-color: #fff;
 }
 
 .custom-docs-container,
 #storybook-docs .sbdocs-wrapper {
   max-width: 1000px;
-  padding: 70px 30px;
   box-sizing: border-box;
+  padding: 70px 30px;
   margin: 0 auto;
 }
 
 .custom-docs-container > div > h1,
 #storybook-docs .sbdocs-content > h1 {
+  margin: 0 0 1em;
   font-size: 32px;
   font-weight: bold;
   line-height: 1.1em;
-  margin: 0 0 1em;
 }
 
 .custom-docs-container > div > h2,
 #storybook-docs .sbdocs-content > h2 {
+  margin: 1.5em 0 1em;
   font-size: 24px;
   font-weight: bold;
-  margin: 1.5em 0 1em;
 }
 
 .custom-docs-container > div > h3,
 #storybook-docs .sbdocs-content > h3 {
+  margin: 1.5em 0 1em;
   font-size: 20px;
   font-weight: bold;
-  margin: 1.5em 0 1em;
 }
 
 .custom-docs-container > div > p,
 #storybook-docs .sbdocs-content > p {
+  margin: 16px 0;
   font-size: 14px;
   line-height: 24px;
-  margin: 16px 0;
 }
 
 .custom-docs-container > div > pre {
-  margin: 0;
   padding: 0;
+  margin: 0;
 }
 
 .custom-docs-container > div > blockquote,
 #storybook-docs .sbdocs-content > blockquote {
-  font-style: italic;
   padding: 8px 16px;
+  border: none;
+  border-radius: 8px;
   margin: 0;
-  font-size: 14px;
   background: #fff9e9;
-  border-radius: 8px;
-  border: none;
+  font-size: 14px;
+  font-style: italic;
 }
 
 .custom-docs-container > div > blockquote p,