Merge pull request #55 from arcticicestudio/feature/gh-54-typefaces

arcticicestudio · web-flow · commit 81a5b238284e · 2018-12-02T15:06:49.000+01:00
Typefaces
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -87,10 +87,13 @@
     "gatsby-plugin-remove-trailing-slashes": "2.0.5",
     "gatsby-source-filesystem": "2.0.9",
     "gatsby-transformer-yaml": "2.1.5",
+    "inter-ui": "3.0.0",
     "nord": ">=0.2.1 <1.0.0",
     "prop-types": "15.6.2",
     "react": "16.6.3",
     "react-dom": "16.6.3",
-    "react-helmet": "5.2.0"
+    "react-helmet": "5.2.0",
+    "typeface-rubik": "0.0.54",
+    "typeface-source-code-pro": "0.0.54"
   }
 }
diff --git a/src/styles/theme/index.js b/src/styles/theme/index.js
@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file The global theme.
+ * @author Arctic Ice Studio <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @since 0.2.0
+ */
+
+import typography from "./typography";
+
+const theme = { typography };
+
+export { typography };
+
+export default theme;
diff --git a/src/styles/theme/typography.js b/src/styles/theme/typography.js
@@ -0,0 +1,59 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file Typefaces and font styles.
+ * @author Arctic Ice Studio <development@arcticicestudio.com>
+ * @author Sven Greb <development@svengreb.de>
+ * @since 0.2.0
+ */
+
+/**
+ * All available typefaces for different usage scopes.
+ *
+ * - `main` - The stylistic and visualization typeface used for as root (`<html>`) font family for all site elements.
+ * - `straight` - The factual and clear typeface for technical content and documentations.
+ * - `monospace` - The main monospaced font for all code related site elements.
+ *
+ * @type {object}
+ * @see https://fonts.google.com/specimen/Rubik
+ * @see https://rsms.me/inter
+ * @see https://fonts.google.com/specimen/Source+Code+Pro
+ */
+const typefaces = {
+  main: "Rubik",
+  straight: "Inter UI",
+  straightVariable: "Inter UI var",
+  monospace: "Source Code Pro"
+};
+
+/**
+ * The sizes based on the named "modular scale" ratio `1.125` (8:9 "major second"). Only one base is used with a value
+ * of `1` for the `em` unit.
+ *
+ * @see https://www.modularscale.com/?1&em&1.125
+ * @see https://polished.js.org/docs/#modularscale
+ *
+ * @type {object}
+ */
+const sizes = {
+  msBase: 1,
+  msBaseUnit: "em",
+  msRatio: 1.125,
+  root: 16,
+  rootUnit: "px",
+  weight: 400
+};
+
+const typography = {
+  sizes,
+  typefaces
+};
+
+export default typography;
