tessl/npm-polished

A lightweight toolset for writing styles in JavaScript with Sass-style helper functions and mixins.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Polished

Name: tessl/npm-polished
Author: tessl

Polished is a lightweight toolset for writing styles in JavaScript that provides Sass-style helper functions and mixins for CSS-in-JS solutions. It offers comprehensive color manipulation, CSS utility functions, layout mixins, animation easings, and shorthand generators with full TypeScript support and functional programming patterns.

Package Information

Package Name: polished
Package Type: npm
Language: JavaScript (with TypeScript/Flow definitions)
Installation: npm install polished

Core Imports

import { lighten, darken, rem, clearFix, rgba } from "polished";

For CommonJS:

const { lighten, darken, rem, clearFix, rgba } = require("polished");

Basic Usage

import { lighten, darken, rem, clearFix, rgba, fluidRange } from "polished";

// Color manipulation
const primaryColor = "#3498db";
const lightVariant = lighten(0.2, primaryColor); // "#5DADE2"
const darkVariant = darken(0.15, primaryColor);  // "#2E86C1"

// Unit conversion
const fontSize = rem("16px"); // "1rem"

// CSS mixins
const buttonStyles = {
  ...clearFix(), // Clearfix mixin
  backgroundColor: rgba(52, 152, 219, 0.8),
  ...fluidRange(
    { prop: "fontSize", fromSize: "14px", toSize: "18px" },
    "320px", "1200px"
  )
};

Architecture

Polished is organized around six main functional areas:

Color System: 29 functions for color manipulation, analysis, and conversion with full color theory support
CSS Helpers: 9 utility functions for unit conversion, CSS variables, and common calculations
Layout Mixins: 16 styling patterns for layout, typography, and visual effects
CSS Shorthands: 15 generators for CSS shorthand properties with intelligent value distribution
Animation Easings: 3 predefined easing functions for smooth animations
Mathematical Operations: CSS unit-aware calculations with formula parsing

All functions follow functional programming principles with currying support, enabling composition and reusability across different CSS-in-JS libraries.

Capabilities

Color Manipulation

Comprehensive color manipulation functions supporting HSL, RGB, and named colors with automatic format detection and conversion.

function lighten(amount: number, color: string): string;
function darken(amount: number, color: string): string;
function saturate(amount: number, color: string): string;
function desaturate(amount: number, color: string): string;
function adjustHue(degree: number, color: string): string;
function mix(weight: number, color: string, otherColor: string): string;
function hslToColorString(hslColor: HslColor): string;
function rgbToColorString(rgbColor: RgbColor): string;
function toColorString(color: string | RgbColor | HslColor): string;

Color Functions

CSS Helper Utilities

Essential utilities for unit conversion, CSS variables, modular scaling, and directional properties.

function rem(pxval: string | number, base?: string | number): string;
function em(pxval: string | number, base?: string | number): string;
function modularScale(steps: number, base?: string | number, ratio?: number): string;
function cssVar(cssVariable: string, defaultValue?: string | number): string | number;

Helper Functions

Layout and Styling Mixins

Pre-built styling patterns for common layout needs, typography effects, and responsive design.

function clearFix(): Styles;
function ellipsis(width?: string): Styles;
function cover(offset?: string): Styles;
function fluidRange(cssProp: FluidRangeConfiguration | FluidRangeConfiguration[], minScreen?: string, maxScreen?: string): Styles;
function timingFunctions(): TimingFunctions;

Layout Mixins

CSS Shorthand Generators

Intelligent generators for CSS shorthand properties with flexible value handling and automatic expansion.

function margin(...values: Array<?string | ?number>): Styles;
function padding(...values: Array<?string | ?number>): Styles;
function border(side?: string, width?: string, style?: string, color?: string): Styles;
function borderRadius(side?: string, radius?: string): Styles;
function backgroundImages(...images: Array<string>): Styles;
function backgrounds(...backgrounds: Array<BackgroundConfiguration>): Styles;

Shorthand Properties

Animation Easings

Predefined cubic-bezier timing functions for smooth, professional animations.

function easeIn(mode: string): string;
function easeOut(mode: string): string;
function easeInOut(mode: string): string;

Animation Functions

Mathematical Operations

CSS unit-aware mathematical calculations with support for complex formulas and mixed units.

function math(formula: string, additionalSymbols?: Object): string;

Math Functions

Types

interface Styles {
  [key: string]: string | number | Styles;
}

interface FluidRangeConfiguration {
  prop: string;
  fromSize: string;
  toSize: string;
}

interface TimingFunction {
  [key: string]: string;
}

interface BackgroundConfiguration {
  image?: string;
  position?: string;
  size?: string;
  repeat?: string;
  attachment?: string;
  origin?: string;
  clip?: string;
  color?: string;
}

interface HslColor {
  hue: number;
  saturation: number;
  lightness: number;
  alpha?: number;
}

interface RgbColor {
  red: number;
  green: number;
  blue: number;
  alpha?: number;
}

interface TimingFunctions {
  [key: string]: string;
}

interface InterpolationValue {
  [key: string]: string | number;
}