From c5ea3fe9918b9494b630ce40240b9d2a35f6e7de Mon Sep 17 00:00:00 2001 From: Arctic Ice Studio Date: Tue, 4 Dec 2018 21:50:32 +0100 Subject: [PATCH] Prepare release version 0.2.0 --- CHANGELOG.md | 137 ++++++++++++++++++++++++++++++++++++++++++++++ package-lock.json | 2 +- package.json | 2 +- 3 files changed, 139 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e8b4ad85..1d06f203 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,110 @@

Changelog for the official Nord website and documentation

+ + +# 0.2.0 + +![Release Date: 2018-12-04](https://img.shields.io/badge/Release_Date-2018--12--04-88c0d0.svg?style=flat-square&colorA=4c566a) [![Project Board](https://img.shields.io/badge/Project_Board-0.2.0-88c0d0.svg?style=flat-square&colorA=4c566a&logo=github&logoColor=eceff4)](https://github.com/arcticicestudio/nord-docs/projects/4) [![Milestone](https://img.shields.io/badge/Milestone-0.2.0-88c0d0.svg?style=flat-square&colorA=4c566a&logo=github&logoColor=eceff4)](https://github.com/arcticicestudio/nord-docs/milestone/2) + +This version focused on the [typography][gh-2], the [brand design & styling][gh-51] and _theme modes_ of _Nord Docs_. It includes the globally used [typefaces][gh-54], a React context [provider and consumer component for the available theme modes][gh-57] as well as some initial [global base styles][gh-59]. + +## Features + +

+ +**Typefaces** — #54 ⇄ #55 (⊶ 81a5b238) +↠ Integrated globally available open source typefaces like documented in the [“Typograhpy” design concept][gh-2] and implemented the `typography` module to define style properties and configurations. The font size and units are based on the used [modular scale][modularscale-majorsecond] documented in #2. + +[Rubik][gf-rubik] — the main stylistic and visualization sans-serif font installed through through the [typeface-rubik][npm-typeface-rubik] package. + +

+ +[Inter UI][inter-ui] — the sans-serif font for documentations as well as technical and factual content. It is installed through the [inter-ui][npm-inter-ui] package. Note that the font is currently not available through [Google Fonts][gf] yet, but might be added in the future very soon due to its large popularity and perfect implementation. + +

+ +

+ +[Source Code Pro][gf-source-code-pro] — the main monospace font for all code elements installed through the [typeface-source-code-pro][npm-typeface-source-code-pro] package. + +

+ +

+ +**Base Style & Theme Setup** — #53 ⇄ #56 (⊶ 85498ca0) +↠ Implemented the basic style & theme setup like documented in the [“Brand Design & Styling” design concept][gh-51] using the CSS-in-JS library [styled-components][] for component representations. To use uniform global theme definitions and to simplify CSS styling, the [styled-theming][gh-styled-theming] and [polished][] libraries are also integrated next to some useful and required specific Babel & Gatsby plugins. + +##### Default Browser Style Normalization + +Integrated the great project [modern-normalize][gh-modern-normalize] that normalizes the default styles of browsers for a consistent appearance across different modern browsers. For the best usage with _styled-components_ the [npm-styled-modern-normalize][npm-styled-modern-normalize] project is used. It exports the styles via the `css` API and has been added to the created global styles component mentioned below. + +##### CSS Tools + +To simplify the CSS styling, the [polished][] package is used that provides a lightweight toolset for writing styles in JavaScript (CSS-in-JS). + +##### CSS Base Styles + +Global and normalization CSS styles have been implemented using _styled-components_ `css` API. They extend _modern-normalize_ and define, next to the browser normalization, styles of the available global themes like documented in the sections below. + +In order to use fonts in _Nord Docs_ style & themes (implemented in #54) the basic properties and values have been added and integrated into this CSS base styles. + +

+ +##### Global Styles + +To inject global styles, _styled-components_ v4 [`createGlobalStyle`][stc-docs-api-cgs] API is used to create a `` component to inject various styles globally. + +##### Global Themes + +To [provide the global theme][stc-docs-theming], the [`ThemeProvider`][stc-docs-api-thp] component has been added to the _Nord Docs_ [`Root` core container component][gh-36]. The global theme is now passed to the provider. + +##### Simplified Theme Usage + +To simplify the usage of _styled-theming's_ [`theme()`][gh-stth-api-th] and `theme.variants()` API functions, two utility functions have been implemented: + +- `themeMode(modeStyles : object)` — Shorthand function for the `theme` API to define styles based on the global theme mode(s). +- `themedModeVariant(modeStyles : object, variantPropName : string)` — Shorthand function for the `theme.variants` API to define variant styles based on the global theme mode(s). + +##### Available Themes + +Initially _Nord Docs_ will be build with the “bright snow flurry” and “dark night frost” _theme modes_. The names have been implemented as constants with values `BRIGHT_SNOW_FLURRY` and `DARK_NIGHT_FROST` that are used with the utility functions mentioned above to define the styles of a component for each available global theme. + +##### Plugins + +[_styled-components_ great Babel plugin][stc-docs-tool-babel] adds support for server-side rendering, minification of styles, and a nicer debugging experience. It has been integrated via the [corresponding Gatsby's plugin][npm-gatsby-plugin-styled-components]. + +##### Nord Colors + +Since the main [JavaScript implementation of Nord][gh-nord-36] is currently not completed and released yet, the colors and palettes have been provided "manually" via the `nord` and `palettes` modules. As soon as the implementation has been done they will be replaced through imports from the official package. + +##### Motion + +Some basic configurations for motion related styles like animations have been implemented, inspired by [Material Designs][md] great documentation and guide about [motion speed][md-motion-speed]. This includes values for speed like transition durations for the global theme modes. It'll be used to set the CSS transition for the base background and font color within the `globals` CSS style module. + +

+ +**Theme Mode Context** — #57 ⇄ #58 (⊶ 86edb920) +↠ Implemented a [`React.Context` provider and consumer][react-docs-context] for the global theme modes. It provides the name of the currently active theme and a function to toggle through available themes. + +##### Context Provider & Consumer + +Both the context consumer and provider components have been implemented in the [`Root` core container component][gh-36]. The consumer is exported and can then be imported in any component to consume the provided values. + +The `Root` component has beene changed from a SFC to a class component to store the currently active state and handle the theme mode toggle logic through a function. It migrated the currently used simple [styled-component theme][stc-docs-theming] (provided through the ` + +[gf]: https://fonts.google.com +[gh-modern-normalize]: https://github.com/sindresorhus/modern-normalize +[gh-nord-36]: https://github.com/arcticicestudio/nord/issues/36 +[gh-stth-api-th]: https://github.com/styled-components/styled-theming#themename-values +[gh-styled-theming]: https://github.com/styled-components/styled-theming +[modularscale-majorsecond]: https://www.modularscale.com/?1&em&1.125 +[npm-gatsby-plugin-styled-components]: https://www.npmjs.com/package/gatsby-plugin-styled-components +[npm-inter-ui]: https://www.npmjs.com/package/inter-ui +[npm-styled-modern-normalize]: https://www.npmjs.com/package/styled-modern-normalize +[npm-typeface-rubik]: https://www.npmjs.com/package/typeface-rubik +[npm-typeface-source-code-pro]: https://www.npmjs.com/package/typeface-source-code-pro +[stc-docs-api-cgs]: https://www.styled-components.com/docs/api#createglobalstyle +[stc-docs-api-thp]: https://www.styled-components.com/docs/api#themeprovider +[stc-docs-theming]: https://www.styled-components.com/docs/advanced#theming +[stc-docs-tool-babel]: https://www.styled-components.com/docs/tooling#babel-plugin diff --git a/package-lock.json b/package-lock.json index ab26a14f..ee4fedab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nord-docs", - "version": "0.1.0", + "version": "0.2.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 547510cc..17cc2d78 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "nord-docs", "title": "Nord Docs", - "version": "0.1.0", + "version": "0.2.0", "description": "The official Nord website and documentation", "author": { "name": "Arctic Ice Studio",