csx

Variables

• borderColor
• borderStyle
• borderWidth
• margin
• padding

Functions

• background()
• border()
• calc()
• coalesce()
• color()
• deg()
• em()
• ex()
• hsl()
• hsla()
• important()
• linearGradient()
• list()
• matrix()
• matrix3d()
• params()
• percent()
• perspective()
• px()
• quote()
• rad()
• rem()
• repeatingLinearGradient()
• rgb()
• rgba()
• rotate()
• rotate3d()
• rotateX()
• rotateY()
• rotateZ()
• scale()
• scale3d()
• scaleX()
• scaleY()
• scaleZ()
• skew()
• skewX()
• skewY()
• transform()
• translate()
• translate3d()
• translateX()
• translateY()
• translateZ()
• turn()
• url()
• viewHeight()
• viewWidth()

Classes

• ColorHelper

  • alpha()
  • blue()
  • darken()
  • desaturate()
  • fade()
  • fadeIn()
  • fadeOut()
  • grayscale()
  • green()
  • hue()
  • invert()
  • lighten()
  • lightness()
  • mix()
  • opacity()
  • red()
  • saturate()
  • saturation()
  • shade()
  • spin()
  • tint()
  • toHexString()
  • toHSL()
  • toHSLA()
  • toRGB()
  • toRGBA()
  • toString()

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>;

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: ColorProperty) => 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