{"library":"polished","title":"Polished","description":"Polished is a lightweight, cross-framework toolset for writing styles in JavaScript, providing Sass-style helper functions and mixins. Currently at version 4.3.1, it receives regular maintenance updates with a focus on bug fixes, performance improvements, and new CSS feature support, as seen in recent v4.2.x and v44.3.x releases. Key differentiators include its functional, curried approach to color manipulation, extensive cross-framework compatibility (working with styled-components, emotion, JSS, etc.), and first-class TypeScript and Flow support. It aims to ease the transition for developers moving from CSS pre-processors to JavaScript-based styling solutions by offering a familiar set of utility functions to enhance productivity and maintain consistency across applications. The library is designed for tree-shaking, promoting optimized bundle sizes by encouraging named imports for individual modules.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install polished"],"cli":null},"imports":["import { lighten } from 'polished'","import { fluidRange } from 'polished'","import { rgba } from 'polished'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { lighten, darken, rgba, fluidRange, em } from 'polished';\n\n// Example: Color manipulation\nconst baseColor = '#663399'; // A deep purple\nconst lightenedColor = lighten(0.2, baseColor);\nconst darkenedColor = darken(0.1, baseColor);\nconst transparentColor = rgba(baseColor, 0.5);\n\nconsole.log('Original color:', baseColor);\nconsole.log('Lightened color:', lightenedColor);\nconsole.log('Darkened color:', darkenedColor);\nconsole.log('Transparent color (50% opacity):', transparentColor);\n\n// Example: Responsive typography with fluidRange\n// Defines a font size that scales between 16px and 20px\n// within viewport widths of 400px to 1200px.\nconst responsiveFontProps = fluidRange(\n  { prop: 'font-size', fromSize: '16px', toSize: '20px' },\n  '400px',\n  '1200px'\n);\n\nconsole.log('\\nResponsive font properties (for CSS-in-JS):');\nconsole.log(responsiveFontProps);\n\n// Example: Em unit conversion\nconst emValue = em(16, 14); // 16px based on a 14px root font size\nconsole.log('\\n16px converted to em (base 14px):', emValue); // '1.1428571428571428em'\n\n// Demonstrate functional composition, a key concept for Polished\n// Assuming a 'compose' utility from a library like Ramda or a custom one\n// import { compose } from 'ramda';\n// const makeBrighterAndMoreTransparent = compose(\n//   (color: string) => lighten(0.1, color),\n//   (color: string) => rgba(color, 0.8)\n// );\n// const newColor = makeBrighterAndMoreTransparent('#FF0000');\n// console.log('\\nComposed color (brighter and more transparent red):', newColor);\n","lang":"typescript","description":"Demonstrates core Polished functionalities including color manipulation (lighten, darken, rgba), responsive design helpers (fluidRange), and unit conversion (em). It highlights the recommended named import pattern.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}