From 279b30af94fab87efe00273b8e5a90202260062c Mon Sep 17 00:00:00 2001 From: Arctic Ice Studio Date: Sun, 2 Dec 2018 08:41:57 +0100 Subject: [PATCH 1/2] Install typeface packages Installed the - main stylistic and visualization sans-serif font Rubik (1) through the typeface-rubik (2) package. - sans-serif font Inter UI (3) for documentations, technical and factual content through the `i`nter-ui (4) package. - main monospace font Source Code Pro (5) for all code elements through the typeface-source-code-pro (6) package. References: (1) https://fonts.google.com/specimen/Rubik (2) https://www.npmjs.com/package/typeface-rubik (3) https://rsms.me/inter (4) https://www.npmjs.com/package/inter-ui (5) https://fonts.google.com/specimen/Source+Code+Pro (6) https://www.npmjs.com/package/typeface-source-code-pro GH-54 --- package-lock.json | 31 +++++++++++++++++++++++++++---- package.json | 5 ++++- 2 files changed, 31 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0bbda90c..50337eb3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nord-docs", - "version": "0.0.0", + "version": "0.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -5830,11 +5830,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5852,7 +5854,8 @@ }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", @@ -5984,17 +5987,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -6011,6 +6017,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -6094,6 +6101,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -8166,6 +8174,11 @@ "through": "^2.3.6" } }, + "inter-ui": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/inter-ui/-/inter-ui-3.0.0.tgz", + "integrity": "sha512-8mmzPPU2GqexJ/Pi/F90pDBfNZU6UysigjA+2jHM/X2lVNm/2/oQDgJ3NlH1GHNSmj8XMaDFEr/l/BoFUNFVWw==" + }, "internal-ip": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-3.0.1.tgz", @@ -16682,6 +16695,16 @@ "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz", "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, + "typeface-rubik": { + "version": "0.0.54", + "resolved": "https://registry.npmjs.org/typeface-rubik/-/typeface-rubik-0.0.54.tgz", + "integrity": "sha512-cxhqFNp5zGUUIr2i8wDcTT+8/aFnECa/qVwEe6012ouNL2Itu629Y7aI28MazL1HvkNGrUeZ7WsvkOrdu1o9qQ==" + }, + "typeface-source-code-pro": { + "version": "0.0.54", + "resolved": "https://registry.npmjs.org/typeface-source-code-pro/-/typeface-source-code-pro-0.0.54.tgz", + "integrity": "sha512-rzCoj8PrX55xuBXJPlSGIFzRdWSRjJyvgVjRrDFEdlej2yFaKcff8O7AmNmHApqMmIreYNS563eb3ZjdSgRqpg==" + }, "ua-parser-js": { "version": "0.7.19", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz", diff --git a/package.json b/package.json index 6f2e5c71..794cde8f 100644 --- 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" } } From b8ed6aef4d37881c7b4fb16315c8706600a28087 Mon Sep 17 00:00:00 2001 From: Arctic Ice Studio Date: Sun, 2 Dec 2018 14:46:42 +0100 Subject: [PATCH 2/2] 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 --- src/styles/theme/index.js | 23 +++++++++++++ src/styles/theme/typography.js | 59 ++++++++++++++++++++++++++++++++++ 2 files changed, 82 insertions(+) create mode 100644 src/styles/theme/index.js create mode 100644 src/styles/theme/typography.js diff --git a/src/styles/theme/index.js b/src/styles/theme/index.js new file mode 100644 index 00000000..66a80dba --- /dev/null +++ b/src/styles/theme/index.js @@ -0,0 +1,23 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +/** + * @file The global theme. + * @author Arctic Ice Studio + * @author Sven Greb + * @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 new file mode 100644 index 00000000..fdeb1ae4 --- /dev/null +++ b/src/styles/theme/typography.js @@ -0,0 +1,59 @@ +/* + * Copyright (C) 2018-present Arctic Ice Studio + * Copyright (C) 2018-present Sven Greb + * + * Project: Nord Docs + * Repository: https://github.com/arcticicestudio/nord-docs + * License: MIT + */ + +/** + * @file Typefaces and font styles. + * @author Arctic Ice Studio + * @author Sven Greb + * @since 0.2.0 + */ + +/** + * All available typefaces for different usage scopes. + * + * - `main` - The stylistic and visualization typeface used for as root (``) 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;