feat: set up basic typography

docs/src/components/BaseStyles/BaseStyles.tsx

@@ -0,0 +1,19 @@
+import { mediaQueries } from "@kiwicom/orbit-components";
+import { createGlobalStyle, css } from "styled-components";
+
+const BaseStyles = createGlobalStyle`
+  ${({ theme }) => css`
+    html {
+      font-family: ${theme.orbit.fontFamily};
+      font-size: 14px;
+    }
+
+    ${mediaQueries.tablet(css`
+      html {
+        font-size: 16px;
+      }
+    `)};
+  `}
+`;
+
+export default BaseStyles;

docs/src/components/BaseStyles/index.tsx

@@ -0,0 +1 @@
+export { default } from "./BaseStyles";

docs/src/components/Breadcrumbs.tsx

@@ -4,7 +4,7 @@ import { Link } from "gatsby";
 
 const StyledList = styled.ul`
   display: flex;
-  font-size: calc(1em - 2px);
+  font-size: 14px;
   margin-bottom: ${({ theme }) => theme.orbit.spaceMedium};
 `;
 

docs/src/components/ComponentStatus/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Table, TableBody } from "@kiwicom/orbit-components";
+import { Table, TableBody, Heading } from "@kiwicom/orbit-components";
 
 import HeadingWithLink from "../HeadingWithLink";
 import StatusTableHead from "./StatusTableHead";
@@ -63,7 +63,11 @@ export const ComponentStatusList = () => (
   <>
     {Object.values(Groups).map(group => (
       <React.Fragment key={group}>
-        <HeadingWithLink headingLevel={2}>{group}</HeadingWithLink>
+        <HeadingWithLink>
+          <Heading as="h2" type="title2">
+            {group}
+          </Heading>
+        </HeadingWithLink>
         <Table>
           <StatusTableHead group={group} />
           <TableBody>

docs/src/components/DocLayout/index.tsx

@@ -11,11 +11,13 @@ import {
 } from "@kiwicom/orbit-components";
 import { MDXProvider } from "@mdx-js/react";
 import { WindowLocation } from "@reach/router";
+import { css } from "styled-components";
 
-import defaultTheme from "../../theme";
+import theme from "../../theme";
 import * as components from "../../mdx-components";
 import { DevModeProvider } from "../../hooks/useDevMode";
 import Head from "../Head";
+import BaseStyles from "../BaseStyles";
 import AddBookmark from "../AddBookmark";
 import FancyLink from "../FancyLink";
 import Guideline from "../Guidelines";
@@ -83,9 +85,10 @@ export default function DocLayout({
         description={description}
         path={path}
       />
-      <ThemeProvider theme={defaultTheme}>
+      <ThemeProvider theme={theme}>
         <DevModeProvider>
           <BookmarkProvider page={path} location={location}>
+            <BaseStyles />
             <StyledWrapper>
               <Navbar
                 location={location}
@@ -129,9 +132,17 @@ export default function DocLayout({
                       <Box padding={{ bottom: "XLarge" }}>
                         <Stack inline align="center" spaceAfter="small">
                           <AddBookmark />
-                          <Heading as="h1" type="display">
-                            {title}
-                          </Heading>
+                          <div
+                            css={css`
+                              /* align with the bookmark icon */
+                              position: relative;
+                              top: 1px;
+                            `}
+                          >
+                            <Heading as="h1" type="title1">
+                              {title}
+                            </Heading>
+                          </div>
                         </Stack>
                         {description && (
                           <Box padding={{ left: "XXLarge" }}>

docs/src/components/DocLayout/primitives/StyledProse.tsx

@@ -10,10 +10,29 @@ const StyledProse = styled(Box)`
       border-radius: ${theme.orbit.spaceMedium} ${theme.orbit.spaceMedium} 0 0;
     `)};
     > * + * {
-      margin-top: ${theme.orbit.spaceSmall};
+      margin-top: 16px;
     }
-    > h1 {
-      margin-bottom: ${theme.orbit.spaceLarge};
+    > * + h1,
+    > * + h2,
+    > * + h3,
+    > * + h4,
+    > * + h5 {
+      margin-top: 24px;
+    }
+    > h1 + *,
+    > h2 + *,
+    > h3 + *,
+    > h4 + *,
+    > h5 + * {
+      margin-top: 12px;
+    }
+    > p {
+      font-size: 1rem;
+      line-height: 1.5;
+    }
+    > ul > li + li,
+    > ol > li + li {
+      margin-top: 12px;
     }
     > ${StyledAnchorWrapper} {
       margin-top: ${theme.orbit.spaceLarge};

docs/src/components/Guidelines/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled, { css } from "styled-components";
 import { CheckCircle, CloseCircle } from "@kiwicom/orbit-components/icons";
-import { Stack, Text } from "@kiwicom/orbit-components";
+import { Stack, Text, Heading } from "@kiwicom/orbit-components";
 import useMediaQuery from "@kiwicom/orbit-components/lib/hooks/useMediaQuery";
 import { imageWrapperClass } from "gatsby-remark-images/constants";
 
@@ -123,8 +123,10 @@ export default function Guideline({ type = "do", title, children }: GuidelinePro
           ))}
         <Stack justify="between" shrink direction={isDesktop ? "row" : "column"}>
           <ContentContainer>
-            <HeadingWithLink headingLevel={4} noId>
-              {title}
+            <HeadingWithLink noId>
+              <Heading as="h3" type="title3">
+                {title}
+              </Heading>
             </HeadingWithLink>
             {content}
           </ContentContainer>

docs/src/components/Head/index.tsx

@@ -29,6 +29,11 @@ export default function Head({ title, hasSiteName, description, path }: Props) {
       <meta name="twitter:site" content="@OrbitKiwi" />
       <meta name="twitter:title" content={pageTitle} />
       <meta name="twitter:description" content={description} />
+      <link rel="preconnect" href="https://fonts.gstatic.com" />
+      <link
+        href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap"
+        rel="stylesheet"
+      />
     </Helmet>
   );
 }

docs/src/components/HeadingWithLink.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { ButtonLink, Heading, Stack } from "@kiwicom/orbit-components";
-import { As, Type as HeadingType } from "@kiwicom/orbit-components/lib/Heading";
+import { ButtonLink, Stack } from "@kiwicom/orbit-components";
 import { Link as LinkIcon } from "@kiwicom/orbit-components/icons";
 import { SpaceAfter } from "@kiwicom/orbit-components/lib/common/common";
 
@@ -22,36 +21,16 @@ export const StyledAnchorWrapper = styled.div`
 
 interface Props extends SpaceAfter {
   children?: React.ReactNode;
-  headingLevel?: 2 | 3 | 4 | 5 | 6;
   noId?: boolean;
 }
 
-const HeadingWithLink = ({ children, headingLevel = 3, noId, spaceAfter = "none" }: Props) => {
-  const getHeadingTypes = (level: Props["headingLevel"]): [As, HeadingType] => {
-    switch (level) {
-      case 2:
-        return ["h2", "title1"];
-      case 3:
-        return ["h3", "title2"];
-      case 4:
-        return ["h4", "title3"];
-      case 5:
-        return ["h5", "title4"];
-      case 6:
-        return ["h6", "title5"];
-      default:
-        return ["h3", "title2"];
-    }
-  };
-  const [headingAs, headingType] = getHeadingTypes(headingLevel);
+const HeadingWithLink = ({ children, noId, spaceAfter = "none" }: Props) => {
   const headingText = getTextFromChildren(children);
   const slugifiedText = slugify(headingText);
   return (
     <StyledAnchorWrapper id={noId ? "" : slugifiedText}>
       <Stack flex spacing="XXXSmall" align="center" spaceAfter={spaceAfter}>
-        <Heading as={headingAs} type={headingType}>
-          {children}
-        </Heading>
+        {children}
         <ButtonLink
           iconLeft={<LinkIcon />}
           title={`Link to heading: ${headingText}`}

docs/src/components/Layout.tsx

@@ -3,7 +3,8 @@ import { ThemeProvider } from "@kiwicom/orbit-components";
 import styled from "styled-components";
 import { WindowLocation } from "@reach/router";
 
-import defaultTheme from "../theme";
+import theme from "../theme";
+import BaseStyles from "./BaseStyles";
 import Navbar from "./Navbar";
 import Footer from "./Footer";
 import Head from "./Head";
@@ -36,8 +37,9 @@ export default function Layout({ children, location, title, description, path, i
   return (
     <>
       <Head title={title} hasSiteName={!isHome} description={description} path={path} />
-      <ThemeProvider theme={defaultTheme}>
+      <ThemeProvider theme={theme}>
         <StyledWrapper>
+          <BaseStyles />
           <Navbar location={location} />
           <StyledMain>{children}</StyledMain>
           <Footer />

docs/src/components/Tabs.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Link } from "gatsby";
-import useMediaQuery from "@kiwicom/orbit-components/lib/hooks/useMediaQuery";
+import { Text, useMediaQuery } from "@kiwicom/orbit-components";
 import styled, { css } from "styled-components";
 
 export interface TabObject {
@@ -59,9 +59,17 @@ const Tab = ({ isActive, tab }: TabProps) => {
   return (
     <StyledTabWrapper isMediumMobile={isMediumMobile}>
       {isActive ? (
-        <StyledTab>{tab.title}</StyledTab>
+        <StyledTab>
+          <Text size="large" as="span">
+            {tab.title}
+          </Text>
+        </StyledTab>
       ) : (
-        <StyledTabLink to={tab.slug}>{tab.title}</StyledTabLink>
+        <StyledTabLink to={tab.slug}>
+          <Text size="large" as="span">
+            {tab.title}
+          </Text>
+        </StyledTabLink>
       )}
     </StyledTabWrapper>
   );

docs/src/components/VisualList.tsx

@@ -8,6 +8,7 @@ import {
   Stack,
   Text,
   Tile,
+  Heading,
 } from "@kiwicom/orbit-components";
 import { Search } from "@kiwicom/orbit-components/icons";
 
@@ -84,7 +85,11 @@ const Visual = ({
         <Card>
           <CardSection>
             <Stack>
-              <HeadingWithLink noId>{visualName}</HeadingWithLink>
+              <HeadingWithLink noId>
+                <Heading as="h3" type="title3">
+                  {visualName}
+                </Heading>
+              </HeadingWithLink>
               <CodeBlock className="language-jsx">{exampleCode(visualName)}</CodeBlock>
               {actions(visualObject, copied, copy)}
             </Stack>

docs/src/mdx-components.tsx

@@ -26,29 +26,43 @@ export const p = ({ children }: React.HTMLAttributes<HTMLParagraphElement>) => (
 export const h1 = () => null;
 
 export const h2 = ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-  <HeadingWithLink headingLevel={2} spaceAfter="normal">
-    {children}
+  <HeadingWithLink spaceAfter="normal">
+    <Heading as="h2" type="title2">
+      {children}
+    </Heading>
   </HeadingWithLink>
 );
 
 export const h3 = ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-  <HeadingWithLink headingLevel={3} spaceAfter="small">
-    {children}
+  <HeadingWithLink spaceAfter="small">
+    <Heading as="h3" type="title3">
+      {children}
+    </Heading>
   </HeadingWithLink>
 );
 
 export const h4 = ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-  <HeadingWithLink headingLevel={4} spaceAfter="smallest">
-    {children}
+  <HeadingWithLink spaceAfter="smallest">
+    <Heading as="h4" type="title4">
+      {children}
+    </Heading>
   </HeadingWithLink>
 );
 
 export const h5 = ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-  <HeadingWithLink headingLevel={5}>{children}</HeadingWithLink>
+  <HeadingWithLink>
+    <Heading as="h5" type="title5">
+      {children}
+    </Heading>
+  </HeadingWithLink>
 );
 
 export const h6 = ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-  <HeadingWithLink headingLevel={6}>{children}</HeadingWithLink>
+  <HeadingWithLink>
+    <Heading as="h6" type="title5">
+      {children}
+    </Heading>
+  </HeadingWithLink>
 );
 
 export const hr = () => <Separator spaceAfter="largest" />;

docs/src/pages/index.tsx

@@ -54,7 +54,7 @@ export default function Home({ location, path }: Props) {
               css={css`
                 max-width: 20ch;
                 font-size: 3rem;
-                line-height: 1.35;
+                line-height: 1.3;
               `}
             >
               Open source design system for your next travel project.

docs/src/pages/roadmap.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Link } from "gatsby";
-import { Text } from "@kiwicom/orbit-components";
+import { Text, Heading } from "@kiwicom/orbit-components";
 
 import DocLayout from "../components/DocLayout";
 import HeadingWithLink from "../components/HeadingWithLink";
@@ -24,15 +24,27 @@ export default ({ location, path }) => (
       what’s already designed and the state it’s in, visit{" "}
       <Link to="/component-status/">component status</Link>.
     </Text>
-    <HeadingWithLink headingLevel={2}>Current quarter 🚀</HeadingWithLink>
+    <HeadingWithLink>
+      <Heading as="h2" type="title2">
+        Current quarter 🚀
+      </Heading>
+    </HeadingWithLink>
     <Text type="secondary">Our key results for this quarter.</Text>
     <Roadmap roadmapQuarter="current" />
-    <HeadingWithLink headingLevel={2}>Next quarter or two 🏗</HeadingWithLink>
+    <HeadingWithLink>
+      <Heading as="h2" type="title2">
+        Next quarter or two 🏗
+      </Heading>
+    </HeadingWithLink>
     <Text type="secondary">
       There’s a larger chance of this being our possible focus for next two quarters.
     </Text>
     <Roadmap roadmapQuarter="next" />
-    <HeadingWithLink headingLevel={2}>Future 🔮</HeadingWithLink>
+    <HeadingWithLink>
+      <Heading as="h2" type="title2">
+        Future 🔮
+      </Heading>
+    </HeadingWithLink>
     <Text type="secondary">
       Items and ideas being considered, without any commitment. We’ll see what the priorities will
       be once we get there.