csx

  • Version 10.0.2
  • Published
  • 147 kB
  • 1 dependency
  • MIT license

Install

npm i csx
yarn add csx
pnpm add csx

Overview

Utility functions for TypeStyle

Index

Variables

variable borderColor

const borderColor: BoxFunction<string>;

    variable borderStyle

    const borderStyle: BoxFunction<string>;

      variable borderWidth

      const borderWidth: BoxFunction<string | number>;

        variable margin

        const margin: BoxFunction<string | number>;

          variable padding

          const padding: BoxFunction<string | number>;

            Functions

            function background

            background: (...backgrounds: CsxBackgroundOptions[]) => string;
            • Creates a background shorthand value. You can supply multiple backgrounds, but the background-color can only be defined on the last background, as there is only one background color for an element.

              See Also

              • https://developer.mozilla.org/en-US/docs/Web/CSS/background

            function border

            border: (p: BorderOptions) => string;
            • Returns the value with '' around it. Any 's will be escaped ' in the output

            function calc

            calc: (exp: string) => string;
            • Returns the value with '' around it. Any 's will be escaped ' in the output

            function coalesce

            coalesce: <T extends string | number>(value: T | undefined) => string;
            • Returns the value as a string or an empty string if null or undefined.

              Parameter value

              Parameter fallbackValue

            function color

            color: (value: any) => ColorHelper;
            • Creates a color from a hex color code or named color. e.g. color('red') or color('#FF0000') or color('#F00'))

            function deg

            deg: (val: number) => string | number;
            • Returns the number with a suffix of deg

            function em

            em: (val: number) => string | number;
            • Returns the number with a suffix of em

            function ex

            ex: (val: number) => string | number;
            • Returns the number with a suffix of ex

            function hsl

            hsl: (
            hue: number,
            saturation: string | number,
            lightness: string | number,
            alpha?: string | number
            ) => ColorHelper;
            • Creates a color from hue, saturation, and lightness. Alpha is automatically set to 100%

              Parameter hue

              The hue of the color. This should be a number between 0-360.

              Parameter saturation

              The saturation of the color. This should be a number between 0-1 or a percentage string between 0%-100%.

              Parameter lightness

              The lightness of the color. This should be a number between 0-1 or a percentage string between 0%-100%.

              Parameter alpha

              The alpha of the color. This should be a number between 0-1 or a percentage string between 0%-100%. If not specified, this defaults to 1.

            function hsla

            hsla: (
            hue: number,
            saturation: string | number,
            lightness: string | number,
            alpha: string | number
            ) => ColorHelper;
            • Creates a color from hue, saturation, lightness, and alpha

              Parameter hue

              The hue of the color. This should be a number between 0-360.

              Parameter saturation

              The saturation of the color. This should be a number between 0-1 or a percentage string between 0%-100%.

              Parameter lightness

              The lightness of the color. This should be a number between 0-1 or a percentage string between 0%-100%.

              Parameter alpha

              The alpha of the color. This should be a number between 0-1 or a percentage string between 0%-100%.

            function important

            important: <T>(val: T) => T;
            • Returns the value with !important on the end. If the value provided is a CSSHelper, it will be converted to a string by necessity, but will look like it is the original type to TypeScript.

            function linearGradient

            linearGradient: (
            position: CSSAngle | CSSSideOrCorner,
            ...colors: (ColorProperty | StringType<ColorProperty> | CsxColorStop)[]
            ) => CSSGradient;
            • Helper for the linear-gradient function in CSS https://drafts.csswg.org/css-images-3/#funcdef-linear-gradient

            function list

            list: (...items: (string | number | StringType<string> | undefined)[]) => string;

              function matrix

              matrix: (
              a: number,
              b: number,
              c: number,
              d: number,
              tx: number,
              ty: number
              ) => string;

                function matrix3d

                matrix3d: (
                a1: number,
                b1: number,
                c1: number,
                d1: number,
                a2: number,
                b2: number,
                c2: number,
                d2: number,
                a3: number,
                b3: number,
                c3: number,
                d3: number,
                a4: number,
                b4: number,
                c4: number,
                d4: number
                ) => string;

                  function params

                  params: (
                  ...parameters: (string | number | StringType<string> | undefined)[]
                  ) => string;

                    function percent

                    percent: (val: number) => string | number;
                    • Returns the number with a suffix of %

                    function perspective

                    perspective: (value: string | number) => string;

                      function px

                      px: (val: number) => string | number;
                      • Returns the number with a suffix of px

                      function quote

                      quote: (val: number | string) => string;
                      • Returns the value with '' around it. Any 's will be escaped ' in the output

                      function rad

                      rad: (val: number) => string | number;
                      • Returns the number with a suffix of rad

                      function rem

                      rem: (val: number) => string | number;
                      • Returns the number with a suffix of rem

                      function repeatingLinearGradient

                      repeatingLinearGradient: (
                      position: CSSAngle | CSSSideOrCorner,
                      ...colors: (ColorProperty | StringType<ColorProperty> | CsxColorStop)[]
                      ) => CSSGradient;
                      • Helper for the repeating-linear-gradient function in CSS https://drafts.csswg.org/css-images-3/#funcdef-repeating-linear-gradient

                      function rgb

                      rgb: (
                      red: number,
                      blue: number,
                      green: number,
                      alpha?: string | number
                      ) => ColorHelper;
                      • Creates a color form the red, blue, and green color space. Alpha is automatically set to 100%

                        Parameter red

                        The red channel of the color. This should be a number between 0-255.

                        Parameter blue

                        The blue channel of the color. This should be a number between 0-255.

                        Parameter green

                        The green channel of the color. This should be a number between 0-255.

                        Parameter alpha

                        The alpha of the color. This should be a number between 0-1 or a percentage string between 0%-100%. If not specified, this defaults to 1.

                      function rgba

                      rgba: (
                      red: number,
                      blue: number,
                      green: number,
                      alpha: string | number
                      ) => ColorHelper;
                      • Creates a color form the red, blue, green, and alpha in the color space

                        Parameter red

                        The red channel of the color. This should be a number between 0-255.

                        Parameter blue

                        The blue channel of the color. This should be a number between 0-255.

                        Parameter green

                        The green channel of the color. This should be a number between 0-255.

                        Parameter alpha

                        The alpha of the color. This should be a number between 0-1 or a percentage string between 0%-100%.

                      function rotate

                      rotate: (z: string | number) => string;

                        function rotate3d

                        rotate3d: (x: string | number, y: string | number, z: string | number) => string;

                          function rotateX

                          rotateX: (x: string | number) => string;

                            function rotateY

                            rotateY: (y: string | number) => string;

                              function rotateZ

                              rotateZ: (z: string | number) => string;

                                function scale

                                scale: (x: number, y?: number | undefined) => string;

                                  function scale3d

                                  scale3d: (x: number, y: number, z: number) => string;

                                    function scaleX

                                    scaleX: (x: number) => string;

                                      function scaleY

                                      scaleY: (y: number) => string;

                                        function scaleZ

                                        scaleZ: (z: number) => string;

                                          function skew

                                          skew: (x: string | number, y?: string | number | undefined) => string;

                                            function skewX

                                            skewX: (x: string | number) => string;

                                              function skewY

                                              skewY: (y: string | number) => string;

                                                function transform

                                                transform: (...transforms: CSSTransformFunction[]) => CSSTransformFunction;
                                                • The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed. Returns the transforms as a delimited string by space or returns 'none' if no arguments are provided

                                                  See Also

                                                  • https://developer.mozilla.org/en-US/docs/Web/CSS/transform

                                                function translate

                                                translate: (x: string | number, y?: string | number | undefined) => string;

                                                  function translate3d

                                                  translate3d: (
                                                  x: string | number,
                                                  y: string | number,
                                                  z: string | number
                                                  ) => string;

                                                    function translateX

                                                    translateX: (x: string | number) => string;

                                                      function translateY

                                                      translateY: (y: string | number) => string;

                                                        function translateZ

                                                        translateZ: (z: string | number) => string;

                                                          function turn

                                                          turn: (val: number) => string | number;
                                                          • Returns the number with a suffix of turn

                                                          function url

                                                          url: (val: string) => string;
                                                          • Returns the string in a url()

                                                            See Also

                                                            • https://developer.mozilla.org/en-US/docs/Web/CSS/url

                                                          function viewHeight

                                                          viewHeight: (val: number) => string | number;
                                                          • Returns the number with a suffix of vh

                                                          function viewWidth

                                                          viewWidth: (val: number) => string | number;
                                                          • Returns the number with a suffix of vw

                                                          Classes

                                                          class ColorHelper

                                                          class ColorHelper implements StringType<ColorProperty> {}
                                                          • A CSS Color. Includes utilities for converting between color types

                                                          constructor

                                                          constructor(
                                                          format: 'rgb' | 'hsl',
                                                          r: number,
                                                          g: number,
                                                          b: number,
                                                          a: number,
                                                          hasAlpha: boolean
                                                          );

                                                            method alpha

                                                            alpha: () => number;

                                                              method blue

                                                              blue: () => number;

                                                                method darken

                                                                darken: (percent: string | number, relative?: boolean) => ColorHelper;

                                                                  method desaturate

                                                                  desaturate: (percent: string | number, relative?: boolean) => ColorHelper;

                                                                    method fade

                                                                    fade: (percent: string | number) => ColorHelper;

                                                                      method fadeIn

                                                                      fadeIn: (percent: string | number, relative?: boolean) => ColorHelper;

                                                                        method fadeOut

                                                                        fadeOut: (percent: string | number, relative?: boolean) => ColorHelper;

                                                                          method grayscale

                                                                          grayscale: () => ColorHelper;

                                                                            method green

                                                                            green: () => number;

                                                                              method hue

                                                                              hue: () => number;

                                                                                method invert

                                                                                invert: () => ColorHelper;

                                                                                  method lighten

                                                                                  lighten: (percent: string | number, relative?: boolean) => ColorHelper;

                                                                                    method lightness

                                                                                    lightness: () => number;

                                                                                      method mix

                                                                                      mix: (mixin: string | ColorHelper, weight?: number) => ColorHelper;

                                                                                        method opacity

                                                                                        opacity: () => number;

                                                                                          method red

                                                                                          red: () => number;

                                                                                            method saturate

                                                                                            saturate: (percent: string | number, relative?: boolean) => ColorHelper;

                                                                                              method saturation

                                                                                              saturation: () => number;

                                                                                                method shade

                                                                                                shade: (weight: number) => ColorHelper;

                                                                                                  method spin

                                                                                                  spin: (degrees: number) => ColorHelper;

                                                                                                    method tint

                                                                                                    tint: (weight: number) => ColorHelper;

                                                                                                      method toHexString

                                                                                                      toHexString: () => string;
                                                                                                      • Converts to hex rgb(255, 255, 255) to #FFFFFF

                                                                                                      method toHSL

                                                                                                      toHSL: () => ColorHelper;
                                                                                                      • Converts to the Hue, Saturation, Lightness color space

                                                                                                      method toHSLA

                                                                                                      toHSLA: () => ColorHelper;
                                                                                                      • Converts to the Hue, Saturation, Lightness color space and adds an alpha channel

                                                                                                      method toRGB

                                                                                                      toRGB: () => ColorHelper;
                                                                                                      • Converts to the Red, Green, Blue color space

                                                                                                      method toRGBA

                                                                                                      toRGBA: () => ColorHelper;
                                                                                                      • Converts to the Red, Green, Blue color space and adds an alpha channel

                                                                                                      method toString

                                                                                                      toString: () => any;
                                                                                                      • Converts the stored color into string form (which is used by Free Style)

                                                                                                      Package Files (11)

                                                                                                      Dependencies (1)

                                                                                                      Dev Dependencies (12)

                                                                                                      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/csx.

                                                                                                      • Markdown
                                                                                                        [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/csx)
                                                                                                      • HTML
                                                                                                        <a href="https://www.jsdocs.io/package/csx"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>