Base Style & Theme Setup

[arcticicestudio]

Associated epic: #51
Depends on #54

To start implementing components the basic styles must be set up. As documented in #51, Nord Docs will uses the CSS-in-JS library styled-components. To use uniform global theme definitions and to simplify CSS styling, the styled-theming and polished libraries will be integrated next to some useful and required specific Babel & Gatsby plugins.

Default Browser Style Normalization

The modern-normalize is a great project that normalizes the browsers default styles for a consistent appearance across different modern browsers. For the best usage with styled-components the npm-styled-modern-normalize project will be used. It exports the styles via the css API and will be added to the created global styles component mentioned above.

CSS Tools

To simplify the CSS styling, the polished package will be used that provides a lightweight toolset for writing styles in JavaScript (CSS-in-JS).

CSS Base Styles

Global and normalization CSS styles will be 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 must be added and integrated into this CSS base styles.

Global Styles

To inject global styles, styled-components v4 createglobalstyle API will be used to create a <GlobalStyle> component that can then be used to inject various styles globally.

Global Themes

To provide the global theme, the ThemeProvider component will be added to the Nord Docs Root core container component. The global theme, placed in src/styles/themes will then be passed to the provider.

Simplified Theme Usage

To simplify the usage of styled-theming's theme() and theme.variants() API functions, two utility functions will be 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 will be implemented as constants with values BRIGHT_SNOW_FLURRY and DARK_NIGHT_FROST to be 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 adds support for server-side rendering, minification of styles, and a nicer debugging experience. It will be integrated via the corresponding Gatsby's plugin.

Nord Colors

Since the main JavaScript implementation of Nord is currently not completed and released yet, the colors and palettes will be 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 will be implemented inspired by Material Designs great documentation and guide about motion speed. This includes values for speed like transition durations. It'll be used to set the CSS transition for the base background and font color within the globals CSS style module.

Tasks

• Install all (dev) dependencies:
  • babel-plugin-styled-components
  • gatsby-plugin-styled-components
  • polished
  • styled-components
  • styled-modern-normalize
  • styled-theming
• Setup styled-components Babel plugin via the corresponding Gatsby plugin.
• Implement CSS global and normalization styles with styled-components css API.
• Implement the <GlobalStyle> component to inject styled-modern-normalize and CSS base styles.
• Add ThemeProvider component to Root core container.
• Implement the themeMode and themeModeVariants theme utility functions.
• Create constants for the BRIGHT_SNOW_FLURRY and DARK_NIGHT_FROST theme modes.
• Implement temporary nord and palettes modules.
• Implement basic configurations for motion related styles like animations.