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

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)

                                                                                                                                                    Dependencies (1)

                                                                                                                                                    Dev Dependencies (37)

                                                                                                                                                    Peer Dependencies (0)

                                                                                                                                                    No peer dependencies.

                                                                                                                                                    Badge

                                                                                                                                                    To add a badge like this onejsDocs.io badgeto 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>