# styled-components/polished

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/styled-components-polished).**

7,661 stars · 212 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/styled-components/polished
- Homepage: https://polished.js.org/
- awesome-repositories: https://awesome-repositories.com/repository/styled-components-polished.md

## Topics

`css-in-js` `inline-styles` `styled-components` `styling`

## Description

Polished is a specialized toolkit for programmatically managing color palettes, converting CSS units, and optimizing style execution at build time. It provides a set of functions for manipulating colors, sizes, and spacing within JavaScript styles to maintain consistent visual themes.

The toolset includes a color manipulation library for adjusting lightness, saturation, and transparency, as well as a CSS unit converter for calculating size values between pixels and rems. It also functions as a static style compiler that resolves static styling function calls during the build process to eliminate runtime performance overhead.

The library covers broader styling and theming capabilities, including color palette management and responsive unit conversion to ensure consistent scaling across screens.

## Tags

### User Interface & Experience

- [CSS-in-JS Implementations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/css-in-js-implementations.md) — Provides a toolkit for managing visual styles and dynamic calculations directly within JavaScript.
- [Color Scheme Manipulators](https://awesome-repositories.com/f/user-interface-experience/color-schemes/color-scheme-manipulators.md) — Includes functions to programmatically adjust color lightness, saturation, and hue to create cohesive UI palettes.
- [Color Space Converters](https://awesome-repositories.com/f/user-interface-experience/color-spaces/color-space-converters.md) — Provides mathematical logic to convert colors between different formats like RGB and HSL for UI styling.
- [CSS Unit Converters](https://awesome-repositories.com/f/user-interface-experience/css-unit-converters.md) — Ships a tool for calculating and converting size values between units like pixels and rems.
- [CSS Unit Math](https://awesome-repositories.com/f/user-interface-experience/css-unit-math.md) — Provides the mathematical logic required to transform numeric values independently of specific CSS units.
- [Color Manipulation Utilities](https://awesome-repositories.com/f/user-interface-experience/rgb-color-mapping/color-manipulation-utilities.md) — Provides utilities for mixing, lightening, darkening, and interpolating colors in various formats.
- [Responsive Scaling Conversions](https://awesome-repositories.com/f/user-interface-experience/screen-density-unit-conversions/responsive-scaling-conversions.md) — Converts size values between pixels and rems to maintain consistent scaling across different screen sizes.
- [Color Palette Management](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/color-system-utilities/color-palette-management.md) — Provides utilities to manage and maintain consistent color palettes and theme variables across an interface. ([source](https://polished.js.org/docs/[object%20Object]))

### Development Tools & Productivity

- [Unit Converters](https://awesome-repositories.com/f/development-tools-productivity/unit-converters.md) — Offers a utility to convert size values between measurement units for consistent scaling. ([source](https://polished.js.org/docs/))

### Software Engineering & Architecture

- [Color Value Transformations](https://awesome-repositories.com/f/software-engineering-architecture/compositional-transformation-pipelines/color-transformation-pipelines/color-value-transformations.md) — Provides operations to programmatically adjust color properties such as lightness and saturation. ([source](https://cdn.jsdelivr.net/gh/styled-components/polished@main/README.md))

### Programming Languages & Runtimes

- [Build-Time Optimization](https://awesome-repositories.com/f/programming-languages-runtimes/build-time-optimization.md) — Shifts computationally expensive style transformations from runtime to the build phase for better performance.
- [Constant Folding](https://awesome-repositories.com/f/programming-languages-runtimes/constant-folding.md) — Evaluates static styling functions during the build process to replace complex expressions with literal values.

### Web Development

- [Static Style Generators](https://awesome-repositories.com/f/web-development/static-style-generators.md) — Compiles dynamic style function calls into static values during the build process to reduce runtime overhead.