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;