Skip to content

Commit

Permalink
Implement modular scale theme utility function
Browse files Browse the repository at this point in the history
This commit implements the `ms` shorthand function for polished's (1)
`modularScale` helper with pre-configured base and ratio values.

References:
  (1) https://polished.js.org

Associated epic: #2
GH-64
  • Loading branch information
arcticicestudio committed Dec 13, 2018
1 parent fa962a2 commit 724b2ba
Show file tree
Hide file tree
Showing 3 changed files with 31 additions and 2 deletions.
3 changes: 2 additions & 1 deletion src/styles/theme/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import globals from "./globals";
import media from "./media";
import motion from "./motion";
import normalize from "./normalize";
import { generateMediaQuery, themedMode, themedModeVariant } from "./utils";
import { generateMediaQuery, ms, themedMode, themedModeVariant } from "./utils";
import typography from "./typography";
import { MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST, THEME_KEY_MODE } from "./constants";

Expand All @@ -32,6 +32,7 @@ export {
globals,
media,
motion,
ms,
nord,
normalize,
palettes,
Expand Down
3 changes: 2 additions & 1 deletion src/styles/theme/utils/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@
*/

import generateMediaQuery from "./generateMediaQuery";
import ms from "./ms";
import themedMode from "./themedMode";
import themedModeVariant from "./themedModeVariant";

export { generateMediaQuery, themedMode, themedModeVariant };
export { generateMediaQuery, ms, themedMode, themedModeVariant };
27 changes: 27 additions & 0 deletions src/styles/theme/utils/ms.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/*
* Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
* Copyright (C) 2018-present Sven Greb <[email protected]>
*
* Project: Nord Docs
* Repository: https://github.com/arcticicestudio/nord-docs
* License: MIT
*/

import { modularScale } from "polished";

import typography from "../typography";

/**
* Shorthand function for polished's `modularScale` helper with pre-configured base and ratio values.
*
* @method ms
* @param {number} step The step to scale up or down.
* @return {string} The calulcated scale with the `em` unit.
* @author Arctic Ice Studio <[email protected]>
* @author Sven Greb <[email protected]>
* @see https://polished.js.org/docs/#modularscale
* @since 0.3.0
*/
const ms = step => modularScale(step, typography.sizes.msBase, typography.sizes.msName);

export default ms;

0 comments on commit 724b2ba

Please sign in to comment.