Implement basic typography theme properties and values

arcticicestudio · arcticicestudio · commit b8ed6aef4d37 · 2018-12-02T14:46:42.000+01:00
In order to use the fonts is must be added to Nord Docs theme. This commit implements the `typography` module that defines all used font families and the basic typography properties and values like the font size and units based on the used modular scale documented in GH-2. Associated epic: GH-2 Dependency of GH-53 GH-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;
