Base Style & Theme Setup #56
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
arcticicestudio
commented
Dec 3, 2018
arcticicestudio
commented
- babel-plugin-styled-components - gatsby-plugin-styled-components - polished - styled-components - styled-modern-normalize - styled-theming References: (1) https://www.npmjs.com/package/babel-plugin-styled-components (2) https://www.npmjs.com/package/gatsby-plugin-styled-components (3) https://www.npmjs.com/package/polished (4) https://www.npmjs.com/package/styled-components (5) https://www.npmjs.com/package/styled-modern-normalize (6) https://www.npmjs.com/package/styled-theming GH-53
This commit implements global and normalization CSS styles using "styled-components" `css` API. They extend "modern-normalize" and define, next to the browser normalization, styles for the available global themes. In order to use fonts in "Nord Docs" style & themes (implemented in GH-54) the basic properties and values have been added and integrated into these base styles. To inject global styles, styled-components v4 `createglobalstyle` (1) API has been used to create a `<GlobalStyle>` component that injects theme styles and "styled-modern-normalize" (2) globally. References: (1) https://www.styled-components.com/docs/api#createglobalstyle (2): https://github.com/arcticicestudio/styled-modern-normalize Associated epics: GH-51, GH-2 GH-53
To provide the global theme (1), the `ThemeProvider` (2) component has been implemented into the `Root` core container component (3). The global theme, placed in `src/styles/themes` is passed to the provider to make the theme globally available. References: (1) https://www.styled-components.com/docs/advanced#theming (2) https://www.styled-components.com/docs/api#themeprovider (3) #36 Associated epics: GH-51 GH-53
Jest uses a object called `global` that proxies the `window` object. This conflicts with the `global` object of Nord Docs theme. This commit renames the object to `globals`. GH-53
Instead of using the default entry point of the pakages defined in the `main` field the CSS modules should be imported directly. This fixes the imports for tests with Jest that are then handled with the implemented mock for file imports. It improves the DX by showing that these packages are CSS styles instead of a JS module and removes the need to add exception/ignore comments for ESLint. The only disadvantage it that it might be necessary to update the import when the package maintainer changes the `main` file when updating to a newer version. GH-53
Initially Nord Docs will be build with the "bright snow flurry" and "dark night frost" theme modes representing Nord "auras". The names have been implemented as constants to be used with the theme utility functions to define the styles of a component for each available global theme. GH-53
To simplify the usage of styled-theming's `theme()` (1) and `theme.variants()` API functions, two utility functions has 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). References: (1) https://github.com/styled-components/styled-theming#themename-values GH-53
Since the main JavaScript implementation of Nord (1) is currently not completed and released yet, the colors and palettes will be provided "manually" via new `nord` and `palettes` modules. As soon as the implementation has been done they will be replaced through imports from the official package. References: (1) nordtheme/nord#36 GH-53
This commit implements some basic configurations for motion related styles like animations inspired by "Material Designs" (1) great documentations and guidelines about motion speed (2). 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. References: (1) https://material.io (2) https://material.io/design/motion/speed.html GH-53
Codecov Report
@@ Coverage Diff @@
## develop #56 +/- ##
============================================
+ Coverage 44.44% 91.66% +47.22%
============================================
Files 4 14 +10
Lines 9 24 +15
Branches 0 1 +1
============================================
+ Hits 4 22 +18
+ Misses 5 2 -3
Continue to review full report at Codecov.
|
svengreb
approved these changes
Dec 3, 2018
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.