Polished is a lightweight toolset for writing styles in JavaScript. It provides a variety of utility functions to help with common CSS-in-JS tasks, such as color manipulation, media queries, and more.
Color Manipulation
Polished provides functions like `lighten` and `darken` to manipulate colors easily. This is useful for creating color schemes and ensuring accessibility.
const { lighten, darken } = require('polished');
const lightenedColor = lighten(0.2, '#ff0000'); // '#ff6666'
const darkenedColor = darken(0.2, '#ff0000'); // '#cc0000'Mixing Colors
The `mix` function allows you to blend two colors together. This can be useful for creating gradients or finding intermediary colors.
const { mix } = require('polished');
const mixedColor = mix(0.5, '#ff0000', '#0000ff'); // '#800080'Media Queries
Polished includes utilities for generating media queries, such as the `between` function, which helps in creating responsive designs.
const { between } = require('polished');
const mediaQuery = between('400px', '1000px'); // '@media (min-width: 400px) and (max-width: 1000px)'Math Functions
Polished offers math functions like `stripUnit` to remove units from values and `modularScale` to generate values based on a modular scale.
const { stripUnit, modularScale } = require('polished');
const value = stripUnit('16px'); // 16
const scaleValue = modularScale(2, '1em', 1.25); // '1.5625em'The `color` package is a comprehensive library for color manipulation. It offers a wide range of color operations similar to polished but focuses solely on color manipulation.
Styled-components is a library for writing CSS in JS. While it doesn't offer the same utility functions as polished, it integrates well with polished for styling React components.
Emotion is another library for writing CSS in JS. It provides a similar feature set to styled-components and can be used in conjunction with polished for additional utility functions.
A lightweight toolset for writing styles in JavaScript. ✨
npm install --save polished
# or if you're using yarn
yarn add polished
Want to write styles in JavaScript, but also want Sass-style helper functions and mixins? Need a consistent color palette throughout your app? ✨ polished is for you!
styled-components, emotion, jss, aphrodite, radium, or plain inline styles, as long as you're writing your styles in JavaScript you can use polished!See the full documentation at polished.js.org!
✨ polished modules are meant to be used as stand-alone imports. You should avoid importing the entire library directly:
import { clearFix, animation } from 'polished'
import * as polished from 'polishedimport polished from 'polished'
When ✨ polished modules are imported properly, tree shaking in webpack and Rollup can be leveraged to reduce your bundle size.
All Evergreen Browsers + IE11
As of v3.6.X we support >0.5%, not dead, ie >= 11, not op_mini all for all our builds.
✨ polished has first-class Flow support with zero configuration to assist you in finding type errors while using our modules.
Flow frequently updates and it is possible that the version you are running may cause you to run into errors coming from the polished package in your node_modules directory. You can add the following lines to your .flowconfig to ignore polished in those cases:
[ignore]
.*/node_modules/polished/.*
✨ polished has TypeScript definitions to allow the library to be used in any TypeScript project. You will need to set moduleResolution to node in your tsconfig.json in order to use ✨ polished with TypeScript.
You can optionally also use babel-plugin-polished to compile the static function calls out and remove the (already tiny) runtime performance impact of using ✨ polished.
In the documentation you will see examples using object spread properties ({ ...other }). To enable this syntax in your project add the transform-object-rest-spread plugin (or the stage-3 preset to enable all stage three features) to your Babel configuration.
When writing styles in JavaScript, many people need Sass-style helper functions to be productive. ✨ polished brings them to you in a nice, lightweight package tailor-made for styles in JavaScript.
The main difference with Sass is that it's written in a functional style and all color functions are curried. This means you can compose them together into your own reusable helpers with a compose function of your choice:
import { compose } from 'ramda' // Replace with any compose() function of your choice
import { lighten, desaturate } from 'polished'
// Create tone() helper
const tone = compose(lighten(0.1), desaturate(0.1))
package-xyz?First of all, we didn't find another library that had everything we needed, and we don't care about installing a dozen packages separately.
Specifically most other packages that provide color functions do so in an object-oriented style, often with a fluent API that's very different from the Sass-style helpers. This means people that aren't very familiar with JavaScript might shy away from using them.
✨ polished was made as a standard library for everybody, no matter if they know JS inside out or not.
✨ polished is compatible with any library that accepts styles as JS objects. This includes, but is by far not limited to, styled-components, radium, aphrodite, glamor, glamorous, jss and many more!
No matter if you're using inline styles or CSS-in-JS, polished is for you.
This project exists thanks to all the people who contribute. [Contribute].
Thank you to all our backers! 🙏 [Become a backer]
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
Copyright © 2016-2021 Brian Hough, Maximilian Stoiber, & Nik Graf. Licensed under the MIT License, see LICENSE.md for more information!
FAQs
A lightweight toolset for writing styles in Javascript.
We found that polished demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.