Implement basic typography theme properties and values

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
nordtheme · Dec 2, 2018 · b8ed6ae · b8ed6ae
1 parent 279b30a
commit b8ed6ae
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 0 deletions.
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 <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file The global theme.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @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 <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+/**
+ * @file Typefaces and font styles.
+ * @author Arctic Ice Studio <[email protected]>
+ * @author Sven Greb <[email protected]>
+ * @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;