Interface CSSFunctions

Hierarchy

CSSFunctions

Methods

abs

abs(expr: string | number | CSSDimensionObject & { type: CSSAngleType } | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: CSSTimeType } | CSSDimensionObject & { type: CSSResolutionType }): string
Parameters
- expr: string | number | CSSDimensionObject & { type: CSSAngleType } | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: CSSTimeType } | CSSDimensionObject & { type: CSSResolutionType }
Returns string
- Defined in packages/helpers/src/types.ts:849

blur

blur(radius: CSSLength): string
Parameters
- radius: CSSLength
Returns string
- Defined in packages/helpers/src/types.ts:853

brightness

brightness(amount: number | CSSDimensionObject & { type: "percent" }): string
Parameters
- amount: number | CSSDimensionObject & { type: "percent" }
Returns string
- Defined in packages/helpers/src/types.ts:854

calc

calc(expr: string | number | CSSDimensionObject & { type: CSSAngleType } | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: CSSTimeType } | CSSDimensionObject & { type: CSSResolutionType }): string
Parameters
- expr: string | number | CSSDimensionObject & { type: CSSAngleType } | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: CSSTimeType } | CSSDimensionObject & { type: CSSResolutionType }
Returns string
- Defined in packages/helpers/src/types.ts:845

clamp

clamp(min: CSSLength, val: CSSLength, max: CSSLength): string
Parameters
- min: CSSLength
- val: CSSLength
- max: CSSLength
Returns string
- Defined in packages/helpers/src/types.ts:846

conicGradient

conicGradient(...colorDegrees: CSSAngularColorStopOrHint[]): string
Parameters
- Rest ...colorDegrees: CSSAngularColorStopOrHint[]
Returns string
- Defined in packages/helpers/src/types.ts:891
conicGradient(fromAngleAtPosition: undefined | string, ...colorDegrees: CSSAngularColorStopOrHint[]): string
Parameters
- fromAngleAtPosition: undefined | string
- Rest ...colorDegrees: CSSAngularColorStopOrHint[]
Returns string
- Defined in packages/helpers/src/types.ts:892

contrast

contrast(amount: number | CSSDimensionObject & { type: "percent" }): string
Parameters
- amount: number | CSSDimensionObject & { type: "percent" }
Returns string
- Defined in packages/helpers/src/types.ts:855

counter

counter(name: string, style?: string): string
Parameters
- name: string
- Optional style: string
Returns string
- Defined in packages/helpers/src/types.ts:875

cubicBezier

cubicBezier(x1: number, y1: number, x2: number, y2: number): string
Parameters
- x1: number
- y1: number
- x2: number
- y2: number
Returns string
- Defined in packages/helpers/src/types.ts:887

env

env(inset: string, fallback?: CSSLength): string
Parameters
- inset: string
- Optional fallback: CSSLength
Returns string
- Defined in packages/helpers/src/types.ts:876

fitContent

fitContent(lengthOrPercent: CSSLengthPercentage): string
Parameters
- lengthOrPercent: CSSLengthPercentage
Returns string
- Defined in packages/helpers/src/types.ts:886

grayscale

grayscale(amount: number | CSSDimensionObject & { type: "percent" }): string
Parameters
- amount: number | CSSDimensionObject & { type: "percent" }
Returns string
- Defined in packages/helpers/src/types.ts:856

hsl

hsl(hue: number, saturation: CSSPercentage, lightness: CSSPercentage): string
Creates a Color from hue, saturation, and lightness values.
Parameters
- hue: number
- saturation: CSSPercentage
- lightness: CSSPercentage
Returns string
- Defined in packages/helpers/src/types.ts:869

hsla

hsla(hue: number, saturation: CSSPercentage, lightness: CSSPercentage, alpha: CSSAlphaValue): string
Creates a Color from hue, saturation, lightness, and alpha values.
Parameters
- hue: number
- saturation: CSSPercentage
- lightness: CSSPercentage
- alpha: CSSAlphaValue
Returns string
- Defined in packages/helpers/src/types.ts:871

hueRotate

hueRotate(angle: CSSAngle): string
Parameters
- angle: CSSAngle
Returns string
- Defined in packages/helpers/src/types.ts:885

invert

invert(amount: number | CSSDimensionObject & { type: "percent" }): string
Parameters
- amount: number | CSSDimensionObject & { type: "percent" }
Returns string
- Defined in packages/helpers/src/types.ts:857

linearGradient

linearGradient(direction: CSSAngle | CSSSideOrCorner, ...colorStops: CSSLinearColorStopOrHint[]): string
Parameters
- direction: CSSAngle | CSSSideOrCorner
- Rest ...colorStops: CSSLinearColorStopOrHint[]
Returns string
- Defined in packages/helpers/src/types.ts:888

matrix

matrix(a: number, b: number, c: number, d: number, tx: number, ty: number): string
Parameters
- a: number
- b: number
- c: number
- d: number
- tx: number
- ty: number
Returns string
- Defined in packages/helpers/src/types.ts:803

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
Parameters
- 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
Returns string
- Defined in packages/helpers/src/types.ts:804

max

max(...exprs: (string | number | CSSDimensionObject & { type: CSSAngleType } | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: CSSTimeType } | CSSDimensionObject & { type: CSSResolutionType })[]): string
Parameters
- Rest ...exprs: (string | number | CSSDimensionObject & { type: CSSAngleType } | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: CSSTimeType } | CSSDimensionObject & { type: CSSResolutionType })[]
Returns string
- Defined in packages/helpers/src/types.ts:847

min

min(...exprs: (string | number | CSSDimensionObject & { type: CSSAngleType } | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: CSSTimeType } | CSSDimensionObject & { type: CSSResolutionType })[]): string
Parameters
- Rest ...exprs: (string | number | CSSDimensionObject & { type: CSSAngleType } | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: CSSTimeType } | CSSDimensionObject & { type: CSSResolutionType })[]
Returns string
- Defined in packages/helpers/src/types.ts:848

minmax

minmax(min: 0 | "auto" | "min-content" | "max-content" | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: "fr" }, max: 0 | "auto" | "min-content" | "max-content" | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: "fr" }): string
Parameters
- min: 0 | "auto" | "min-content" | "max-content" | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: "fr" }
- max: 0 | "auto" | "min-content" | "max-content" | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: "fr" }
Returns string
- Defined in packages/helpers/src/types.ts:877

opacity

opacity(amount: number | CSSDimensionObject & { type: "percent" }): string
Parameters
- amount: number | CSSDimensionObject & { type: "percent" }
Returns string
- Defined in packages/helpers/src/types.ts:858

perspective

perspective(d: string | number | CSSDimensionObject & { type: CSSLengthType }): string
Parameters
- d: string | number | CSSDimensionObject & { type: CSSLengthType }
Returns string
- Defined in packages/helpers/src/types.ts:822

radialGradient

radialGradient(...colors: CSSLinearColorStopOrHint[]): string
Parameters
- Rest ...colors: CSSLinearColorStopOrHint[]
Returns string
- Defined in packages/helpers/src/types.ts:889
radialGradient(shapeSizeAtPosition: undefined | string, ...colors: CSSLinearColorStopOrHint[]): string
Parameters
- shapeSizeAtPosition: undefined | string
- Rest ...colors: CSSLinearColorStopOrHint[]
Returns string
- Defined in packages/helpers/src/types.ts:890

repeat

repeat(repeatCount: number | "auto-fill" | "auto-fit", tracks: string | number | CSSDimensionObject & { type: CSSAngleType } | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: "fr" } | CSSDimensionObject & { type: CSSTimeType } | CSSDimensionObject & { type: CSSResolutionType }): string
Parameters
- repeatCount: number | "auto-fill" | "auto-fit"
- tracks: string | number | CSSDimensionObject & { type: CSSAngleType } | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: "fr" } | CSSDimensionObject & { type: CSSTimeType } | CSSDimensionObject & { type: CSSResolutionType }
Returns string
- Defined in packages/helpers/src/types.ts:881

repeatingConicGradient

repeatingConicGradient(...colorDegrees: CSSAngularColorStopOrHint[]): string
Parameters
- Rest ...colorDegrees: CSSAngularColorStopOrHint[]
Returns string
- Defined in packages/helpers/src/types.ts:896
repeatingConicGradient(fromAngleAtPosition: undefined | string, ...colorDegrees: CSSAngularColorStopOrHint[]): string
Parameters
- fromAngleAtPosition: undefined | string
- Rest ...colorDegrees: CSSAngularColorStopOrHint[]
Returns string
- Defined in packages/helpers/src/types.ts:897

repeatingLinearGradient

repeatingLinearGradient(direction: CSSAngle | CSSSideOrCorner, ...colorStops: CSSLinearColorStopOrHint[]): string
Parameters
- direction: CSSAngle | CSSSideOrCorner
- Rest ...colorStops: CSSLinearColorStopOrHint[]
Returns string
- Defined in packages/helpers/src/types.ts:893

repeatingRadialGradient

repeatingRadialGradient(...colors: CSSLinearColorStopOrHint[]): string
Parameters
- Rest ...colors: CSSLinearColorStopOrHint[]
Returns string
- Defined in packages/helpers/src/types.ts:894
repeatingRadialGradient(shapeSizeAtPosition: undefined | string, ...colors: CSSLinearColorStopOrHint[]): string
Parameters
- shapeSizeAtPosition: undefined | string
- Rest ...colors: CSSLinearColorStopOrHint[]
Returns string
- Defined in packages/helpers/src/types.ts:895

rgb

rgb(red: number, green: number, blue: number): string
Creates a Color from red, green, and blue values.
Parameters
- red: number
- green: number
- blue: number
Returns string
- Defined in packages/helpers/src/types.ts:865

rgba

rgba(red: number, green: number, blue: number, alpha: CSSAlphaValue): string
Creates a Color from red, green, blue, and alpha values.
Parameters
- red: number
- green: number
- blue: number
- alpha: CSSAlphaValue
Returns string
- Defined in packages/helpers/src/types.ts:867

rotate

rotate(a: number | CSSDimensionObject & { type: CSSAngleType }): string
Parameters
- a: number | CSSDimensionObject & { type: CSSAngleType }
Returns string
- Defined in packages/helpers/src/types.ts:823

rotate3d

rotate3d(a: number | CSSDimensionObject & { type: CSSAngleType }): string
Parameters
- a: number | CSSDimensionObject & { type: CSSAngleType }
Returns string
- Defined in packages/helpers/src/types.ts:824
rotate3d(x: number, y: number, z: number, a: CSSAngle): string
Parameters
- x: number
- y: number
- z: number
- a: CSSAngle
Returns string
- Defined in packages/helpers/src/types.ts:825

rotateX

rotateX(a: CSSAngle): string
Parameters
- a: CSSAngle
Returns string
- Defined in packages/helpers/src/types.ts:826

rotateY

rotateY(a: CSSAngle): string
Parameters
- a: CSSAngle
Returns string
- Defined in packages/helpers/src/types.ts:827

rotateZ

rotateZ(a: CSSAngle): string
Parameters
- a: CSSAngle
Returns string
- Defined in packages/helpers/src/types.ts:828

saturate

saturate(amount: number | CSSDimensionObject & { type: "percent" }): string
Parameters
- amount: number | CSSDimensionObject & { type: "percent" }
Returns string
- Defined in packages/helpers/src/types.ts:859

scale

scale(sx: number | CSSDimensionObject & { type: "percent" }, sy?: number | CSSDimensionObject & { type: "percent" }): string
Parameters
- sx: number | CSSDimensionObject & { type: "percent" }
- Optional sy: number | CSSDimensionObject & { type: "percent" }
Returns string
- Defined in packages/helpers/src/types.ts:829

scale3d

scale3d(sx: number, sy: number, sz: number): string
Parameters
- sx: number
- sy: number
- sz: number
Returns string
- Defined in packages/helpers/src/types.ts:830

scaleX

scaleX(s: number): string
Parameters
- s: number
Returns string
- Defined in packages/helpers/src/types.ts:831

scaleY

scaleY(s: number): string
Parameters
- s: number
Returns string
- Defined in packages/helpers/src/types.ts:832

scaleZ

scaleZ(s: number): string
Parameters
- s: number
Returns string
- Defined in packages/helpers/src/types.ts:833

sepia

sepia(amount: number | CSSDimensionObject & { type: "percent" }): string
Parameters
- amount: number | CSSDimensionObject & { type: "percent" }
Returns string
- Defined in packages/helpers/src/types.ts:860

sign

sign(expr: string | number | CSSDimensionObject & { type: CSSAngleType } | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: CSSTimeType } | CSSDimensionObject & { type: CSSResolutionType }): string
Parameters
- expr: string | number | CSSDimensionObject & { type: CSSAngleType } | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: CSSTimeType } | CSSDimensionObject & { type: CSSResolutionType }
Returns string
- Defined in packages/helpers/src/types.ts:850

skew

skew(ax: CSSAngle, ay?: CSSAngle): string
Parameters
- ax: CSSAngle
- Optional ay: CSSAngle
Returns string
- Defined in packages/helpers/src/types.ts:834

skewX

skewX(a: CSSAngle): string
Parameters
- a: CSSAngle
Returns string
- Defined in packages/helpers/src/types.ts:835

skewY

skewY(a: CSSAngle): string
Parameters
- a: CSSAngle
Returns string
- Defined in packages/helpers/src/types.ts:836

steps

steps(count: number): string
Parameters
- count: number
Returns string
- Defined in packages/helpers/src/types.ts:842

translateZ

translateZ(tz: CSSLength): string
Parameters
- tz: CSSLength
Returns string
- Defined in packages/helpers/src/types.ts:841

Interface CSSFunctions

Hierarchy

Index

Methods

Methods

abs

Parameters

expr: string | number | CSSDimensionObject & { type: CSSAngleType } | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: CSSTimeType } | CSSDimensionObject & { type: CSSResolutionType }

Returns string

blur

Parameters

radius: CSSLength

Returns string

brightness

Parameters

amount: number | CSSDimensionObject & { type: "percent" }

Returns string

calc

Parameters

expr: string | number | CSSDimensionObject & { type: CSSAngleType } | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: CSSTimeType } | CSSDimensionObject & { type: CSSResolutionType }

Returns string

clamp

Parameters

min: CSSLength

val: CSSLength

max: CSSLength

Returns string

conicGradient

Parameters

Rest ...colorDegrees: CSSAngularColorStopOrHint[]

Returns string

Parameters

fromAngleAtPosition: undefined | string

Rest ...colorDegrees: CSSAngularColorStopOrHint[]

Returns string

contrast

Parameters

amount: number | CSSDimensionObject & { type: "percent" }

Returns string

counter

Parameters

name: string

Optional style: string

Returns string

cubicBezier

Parameters

x1: number

y1: number

x2: number

y2: number

Returns string

env

Parameters

inset: string

Optional fallback: CSSLength

Returns string

fitContent

Parameters

lengthOrPercent: CSSLengthPercentage

Returns string

grayscale

Parameters

amount: number | CSSDimensionObject & { type: "percent" }

Returns string

hsl

Parameters

hue: number

saturation: CSSPercentage

lightness: CSSPercentage

Returns string

hsla

Parameters

hue: number

saturation: CSSPercentage

lightness: CSSPercentage

alpha: CSSAlphaValue

Returns string

hueRotate

Parameters

angle: CSSAngle

`Rest` ...colorDegrees: CSSAngularColorStopOrHint[]

`Rest` ...colorDegrees: CSSAngularColorStopOrHint[]

`Optional` style: string

`Optional` fallback: CSSLength

`Rest` ...colorStops: CSSLinearColorStopOrHint[]

`Rest` ...exprs: (string | number | CSSDimensionObject & { type: CSSAngleType } | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: CSSTimeType } | CSSDimensionObject & { type: CSSResolutionType })[]

`Rest` ...exprs: (string | number | CSSDimensionObject & { type: CSSAngleType } | CSSDimensionObject & { type: "percent" } | CSSDimensionObject & { type: CSSLengthType } | CSSDimensionObject & { type: CSSTimeType } | CSSDimensionObject & { type: CSSResolutionType })[]

`Rest` ...colors: CSSLinearColorStopOrHint[]

`Rest` ...colors: CSSLinearColorStopOrHint[]