polished
- Version 4.3.1
- Published
- 2.8 MB
- 1 dependency
- MIT license
Install
npm i polished
yarn add polished
pnpm add polished
Overview
A lightweight toolset for writing styles in Javascript.
Index
Functions
- adjustHue()
- animation()
- backgroundImages()
- backgrounds()
- between()
- border()
- borderColor()
- borderRadius()
- borderStyle()
- borderWidth()
- buttons()
- clearFix()
- complement()
- cover()
- cssVar()
- darken()
- desaturate()
- directionalProperty()
- easeIn()
- easeInOut()
- easeOut()
- ellipsis()
- em()
- fluidRange()
- fontFace()
- getContrast()
- getLuminance()
- getValueAndUnit()
- grayscale()
- hideText()
- hideVisually()
- hiDPI()
- hsl()
- hsla()
- hslToColorString()
- important()
- invert()
- lighten()
- linearGradient()
- margin()
- math()
- meetsContrastGuidelines()
- mix()
- modularScale()
- normalize()
- opacify()
- padding()
- parseToHsl()
- parseToRgb()
- position()
- radialGradient()
- readableColor()
- rem()
- remToPx()
- retinaImage()
- rgb()
- rgba()
- rgbToColorString()
- saturate()
- setHue()
- setLightness()
- setSaturation()
- shade()
- size()
- stripUnit()
- textInputs()
- timingFunctions()
- tint()
- toColorString()
- transitions()
- transparentize()
- triangle()
- wordWrap()
Functions
function adjustHue
adjustHue: { (degree: number | string): typeof curriedAdjustHueWith1; (degree: string | number, color: string): string;};
function animation
animation: (...args: Array<Array<string | number> | string | number>) => Styles;
function backgroundImages
backgroundImages: (...properties: Array<string>) => Styles;
function backgrounds
backgrounds: (...properties: Array<string>) => Styles;
function between
between: ( fromSize: string | number, toSize: string | number, minScreen?: string, maxScreen?: string) => string;
function border
border: ( sideKeyword: SideKeyword | string | number, ...values: Array<string | number>) => Styles;
function borderColor
borderColor: (...values: Array<null | void | string>) => Styles;
function borderRadius
borderRadius: (side: string, radius: string | number) => Styles;
function borderStyle
borderStyle: (...values: Array<null | void | string>) => Styles;
function borderWidth
borderWidth: ( ...values: Array<null | void | string | null | void | number>) => Styles;
function buttons
buttons: (...states: Array<InteractionState>) => string;
function clearFix
clearFix: (parent?: string) => Styles;
function complement
complement: (color: string) => string;
function cover
cover: (offset?: number | string) => Styles;
function cssVar
cssVar: (cssVariable: string, defaultValue?: string | number) => string | number;
function darken
darken: { (amount: number | string): typeof curriedDarkenWith1; (amount: string | number, color: string): string;};
function desaturate
desaturate: { (amount: number | string): typeof curriedDesaturateWith1; (amount: string | number, color: string): string;};
function directionalProperty
directionalProperty: ( property: string, ...values: Array<null | void | string | null | void | number>) => Styles;
function easeIn
easeIn: (functionName: string) => TimingFunction;
function easeInOut
easeInOut: (functionName: string) => TimingFunction;
function easeOut
easeOut: (functionName: string) => TimingFunction;
function ellipsis
ellipsis: ( width?: null | void | string | null | void | number, lines?: number) => Styles;
function em
em: (value: string | number, base?: string | number) => string;
function fluidRange
fluidRange: ( cssProp: Array<FluidRangeConfiguration> | FluidRangeConfiguration, minScreen?: string, maxScreen?: string) => Styles;
function fontFace
fontFace: ({ fontFamily, fontFilePath, fontStretch, fontStyle, fontVariant, fontWeight, fileFormats, formatHint, localFonts, unicodeRange, fontDisplay, fontVariationSettings, fontFeatureSettings,}: FontFaceConfiguration) => Styles;
function getContrast
getContrast: (color1: string, color2: string) => number;
function getLuminance
getLuminance: (color: string) => number;
function getValueAndUnit
getValueAndUnit: (value: string | number) => any;
function grayscale
grayscale: (color: string) => string;
function hideText
hideText: () => Styles;
function hideVisually
hideVisually: () => Styles;
function hiDPI
hiDPI: (ratio?: number) => string;
function hsl
hsl: ( value: HslColor | number, saturation?: number, lightness?: number) => string;
function hsla
hsla: ( value: HslaColor | number, saturation?: number, lightness?: number, alpha?: number) => string;
function hslToColorString
hslToColorString: (color: HslColor | HslaColor | number) => string;
function important
important: (styleBlock: Styles, rules?: Array<string> | string) => Styles;
function invert
invert: (color: string) => string;
function lighten
lighten: { (amount: number | string): typeof curriedLightenWith1; (amount: string | number, color: string): string;};
function linearGradient
linearGradient: ({ colorStops, fallback, toDirection,}: LinearGradientConfiguration) => Styles;
function margin
margin: ( ...values: Array<null | void | string | null | void | number>) => Styles;
function math
math: (formula: string, additionalSymbols?: Object) => string;
function meetsContrastGuidelines
meetsContrastGuidelines: (color1: string, color2: string) => ContrastScores;
function mix
mix: { (weight: number | string): typeof curriedMixWith1; (weight: string | number, color: string): (otherColor: string) => string; (weight: string | number, color: string, otherColor: string): string;};
function modularScale
modularScale: ( steps: number, base?: number | string, ratio?: ModularScaleRatio) => string;
function normalize
normalize: () => Array<Styles>;
function opacify
opacify: { (amount: number | string): typeof curriedOpacifyWith1; (amount: string | number, color: string): string;};
function padding
padding: ( ...values: Array<null | void | string | null | void | number>) => Styles;
function parseToHsl
parseToHsl: (color: string) => HslColor | HslaColor;
function parseToRgb
parseToRgb: (color: string) => RgbColor | RgbaColor;
function position
position: ( firstValue: string | number | null, ...values: Array<null | void | string | null | void | number>) => Styles;
function radialGradient
radialGradient: ({ colorStops, extent, fallback, position, shape,}: RadialGradientConfiguration) => Styles;
function readableColor
readableColor: ( color: string, returnIfLightColor?: string, returnIfDarkColor?: string, strict?: boolean) => string;
function rem
rem: (value: string | number, base?: string | number) => string;
function remToPx
remToPx: (value: string | number, base?: string | number) => string;
function retinaImage
retinaImage: ( filename: string, backgroundSize?: string, extension?: string, retinaFilename?: string, retinaSuffix?: string) => Styles;
function rgb
rgb: (value: RgbColor | number, green?: number, blue?: number) => string;
function rgba
rgba: ( firstValue: RgbaColor | number | string, secondValue?: number, thirdValue?: number, fourthValue?: number) => string;
function rgbToColorString
rgbToColorString: (color: RgbColor | RgbaColor) => string;
function saturate
saturate: { (amount: number | string): typeof curriedSaturateWith1; (amount: string | number, color: string): string;};
function setHue
setHue: { (hue: number | string): typeof curriedSetHueWith1; (hue: string | number, color: string): string;};
function setLightness
setLightness: { (lightness: number | string): typeof curriedSetLightnessWith1; (lightness: string | number, color: string): string;};
function setSaturation
setSaturation: { (saturation: number | string): typeof curriedSetSaturationWith1; (saturation: string | number, color: string): string;};
function shade
shade: { (percentage: number | string): typeof curriedShadeWith1; (percentage: string | number, color: string): string;};
function size
size: (height: string | number, width?: string | number) => Styles;
function stripUnit
stripUnit: (value: string | number) => string | number;
function textInputs
textInputs: (...states: Array<InteractionState>) => string;
function timingFunctions
timingFunctions: (timingFunction: TimingFunction) => string;
function tint
tint: { (percentage: number | string): typeof curriedTintWith1; (percentage: string | number, color: string): string;};
function toColorString
toColorString: (color: Object) => string;
function transitions
transitions: (...properties: Array<string | Array<string>>) => Styles;
function transparentize
transparentize: { (amount: number | string): typeof curriedTransparentizeWith1; (amount: string | number, color: string): string;};
function triangle
triangle: ({ pointingDirection, height, width, foregroundColor, backgroundColor,}: TriangleConfiguration) => Styles;
function wordWrap
wordWrap: (wrap?: string) => Styles;
Package Files (74)
- lib/color/adjustHue.d.ts
- lib/color/complement.d.ts
- lib/color/darken.d.ts
- lib/color/desaturate.d.ts
- lib/color/getContrast.d.ts
- lib/color/getLuminance.d.ts
- lib/color/grayscale.d.ts
- lib/color/hsl.d.ts
- lib/color/hslToColorString.d.ts
- lib/color/hsla.d.ts
- lib/color/invert.d.ts
- lib/color/lighten.d.ts
- lib/color/meetsContrastGuidelines.d.ts
- lib/color/mix.d.ts
- lib/color/opacify.d.ts
- lib/color/parseToHsl.d.ts
- lib/color/parseToRgb.d.ts
- lib/color/readableColor.d.ts
- lib/color/rgb.d.ts
- lib/color/rgbToColorString.d.ts
- lib/color/rgba.d.ts
- lib/color/saturate.d.ts
- lib/color/setHue.d.ts
- lib/color/setLightness.d.ts
- lib/color/setSaturation.d.ts
- lib/color/shade.d.ts
- lib/color/tint.d.ts
- lib/color/toColorString.d.ts
- lib/color/transparentize.d.ts
- lib/easings/easeIn.d.ts
- lib/easings/easeInOut.d.ts
- lib/easings/easeOut.d.ts
- lib/helpers/cssVar.d.ts
- lib/helpers/directionalProperty.d.ts
- lib/helpers/em.d.ts
- lib/helpers/getValueAndUnit.d.ts
- lib/helpers/important.d.ts
- lib/helpers/modularScale.d.ts
- lib/helpers/rem.d.ts
- lib/helpers/remToPx.d.ts
- lib/helpers/stripUnit.d.ts
- lib/index.d.ts
- lib/math/math.d.ts
- lib/mixins/between.d.ts
- lib/mixins/clearFix.d.ts
- lib/mixins/cover.d.ts
- lib/mixins/ellipsis.d.ts
- lib/mixins/fluidRange.d.ts
- lib/mixins/fontFace.d.ts
- lib/mixins/hiDPI.d.ts
- lib/mixins/hideText.d.ts
- lib/mixins/hideVisually.d.ts
- lib/mixins/linearGradient.d.ts
- lib/mixins/normalize.d.ts
- lib/mixins/radialGradient.d.ts
- lib/mixins/retinaImage.d.ts
- lib/mixins/timingFunctions.d.ts
- lib/mixins/triangle.d.ts
- lib/mixins/wordWrap.d.ts
- lib/shorthands/animation.d.ts
- lib/shorthands/backgroundImages.d.ts
- lib/shorthands/backgrounds.d.ts
- lib/shorthands/border.d.ts
- lib/shorthands/borderColor.d.ts
- lib/shorthands/borderRadius.d.ts
- lib/shorthands/borderStyle.d.ts
- lib/shorthands/borderWidth.d.ts
- lib/shorthands/buttons.d.ts
- lib/shorthands/margin.d.ts
- lib/shorthands/padding.d.ts
- lib/shorthands/position.d.ts
- lib/shorthands/size.d.ts
- lib/shorthands/textInputs.d.ts
- lib/shorthands/transitions.d.ts
Dependencies (1)
Dev Dependencies (37)
- @babel/cli
- @babel/core
- @babel/eslint-parser
- @babel/plugin-transform-runtime
- @babel/polyfill
- @babel/preset-env
- @babel/preset-flow
- @rollup/plugin-babel
- @rollup/plugin-node-resolve
- @rollup/plugin-replace
- babel-eslint
- babel-jest
- babel-plugin-add-module-exports
- babel-plugin-preval
- cross-env
- cz-conventional-changelog
- documentation
- eslint
- eslint-config-airbnb-base
- eslint-plugin-import
- flow-bin
- flow-copy-source
- husky
- jest
- lint-staged
- npm-watch
- prettier
- pushstate-server
- ramda
- rollup
- rollup-plugin-sourcemaps
- rollup-plugin-terser
- semantic-release
- shx
- tsgen
- typescript
- validate-commit-msg
Peer Dependencies (0)
No peer dependencies.
Badge
To add a badge like this oneto your package's README, use the codes available below.
You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/polished
.
- Markdown[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/polished)
- HTML<a href="https://www.jsdocs.io/package/polished"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>
- Updated .
Package analyzed in 4395 ms. - Missing or incorrect documentation? Open an issue for this package.