Declarations represent CSS properties. Every property has a name and a value, formed using one or more StyleValue instances. All declarations conform to an interface called StyleDeclaration.
- StyleDeclaration
- BackdropFilter
- BackgroundBlendMode
- BackgroundClip
- BackgroundColor
- BackgroundImage
- BackgroundOrigin
- Border
- BorderImageSlice
- BorderImageSource
- BorderRadius
- BorderStyle
- BorderWidth
- Color
- Filter
- FontSize
- FontStretch
- FontStyle
- FontWeight
- Height
- LetterSpacing
- LineHeight
- MixBlendMode
- Mixin
- ObjectFit
- Opacity
- Shadow
- TextAlign
- TextFillColor
- TextStroke
- Transform
- Width
Style declaration is the base interface for all style properties.
Returns the name of the property, e.g. background-color.
Checks if other instance is equal to self.
other: An instance conforming toStyleDeclaration.
Returns the string that forms the value of the property.
params: An instance conforming toStyleParams. These parameters determine how internal values are being interpreted when string output is generated. SeeStyleParamsto learn more.variables: An instance ofVariableMap, used to replace literal values if there is a variable declared with the same value.
Creates backdrop-filter property instance with filters functions. See related docs.
filters: Array ofStyleFunctioninstances.
Returns backdrop-filter.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
params: An instance conforming toStyleParams.
new BackdropFilter([
{ fn: "blur", args: [new Length(12)] },
{ fn: "saturate", args: [new Percent(35)] }
]).getValue({ densityDivisor: 2 }) // "blur("6px") saturate(35%)"Creates background-blend-mode property instance with values. See related docs.
values: Array ofstringvalues.
Returns background-blend-mode.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
new BackgroundBlendMode(["darken", "luminosity"]).getValue() // "darken, luminosity"Creates background-clip property instance with values. See related docs.
values: Array ofstringvalues.
Returns background-clip.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
new BackgroundClip(["content-box"]).getValue() // "content-box"Creates background-color property instance with color. See related docs.
color:Color.
Returns background-color.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
params: An instance conforming toColorParams.variables: AVariableMapinstance.
const white = new Color(...);
new BackgroundColor(white).getValue({ colorFormat: "hex" }) // "#ffffff"
const black = new Color(...);
new BackgroundColor(black).getValue({ colorFormat: "rgb" }) // "rgb(0, 0, 0)"
new BackgroundColor(black).getValue({ colorFormat: "rgb" }, variables) // "var(--black)"Creates background-image property instance with images. See related docs.
images: Array ofGradientinstances.
Returns background-image.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
params: An object conforming toColorParams.variables:VariableMapobject.
const gradient = new Gradient(...);
new BackgroundImage([gradient]).getValue({ colorFormat: "rgb" }); // "linear-gradient(to right, rgb(48, 35, 174), rgb(83, 160, 253) 48%, rgb(180, 236, 81))"Creates background-origin property instance with values. See related docs.
values: Array ofstringvalues.
Returns background-origin.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
new BackgroundClip(["content-box"]).getValue(); // "content-box"Creates border property instance with color. See related docs.
style:string, denotes the border style ("solid", "dashed", etc.).width:Length.color:Color.side:string, denotes the individual border side,top,right,bottom, orleft.
Returns border or individual borders (border-top, border-left, etc.) based on side.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
params: An instance conforming toColorParamsandLengthParams.variables: AVariableMapinstance.
new Border({
style: "solid",
width: new Length(2),
color: black
}).getValue({ densityDivisor: 2, colorFormat: "hex" }); // "solid 1px #000000"Creates border-image-slice property instance with value. See related docs.
value:Scalar.
Returns border-image-slice.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
new BorderImageSlice(new Scalar(1)).getValue() // "1"Creates BorderImageSource property instance with images. See related docs.
images: Array ofGradientinstances.
Returns border-image-source.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
params: An object conforming toColorParams.variables:VariableMapobject.
const gradient = new Gradient(...);
new BorderImageSource([gradient])).getValue({ colorFormat: "rgb" }) // "linear-gradient(to right, rgb(48, 35, 174), rgb(83, 160, 253) 48%, rgb(180, 236, 81))"Creates border-radius property instance with length. See related docs.
length:Length.
Returns border-radius.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
params: An instance conforming toLengthParams.variables: AVariableMapinstance.
new BorderRadius(new Length(22)).getValue({ densityDivisor: 2 }); // "11px"Creates border-style property instance with value. See related docs.
value:string
Returns border-style.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
new BorderStyle("dashed").getValue() // "dashed"Creates border-width property instance with length. See related docs.
length:Length.
Returns border-width.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
params: An instance conforming toLengthParams.variables: AVariableMapinstance.
new BorderWidth(new Length(2)).getValue({ densityDivisor: 1 }); // "2px"Creates color property from color argument. See related docs.
color:Colorinstance.
Returns color.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
params: An object conforming toColorParams.variables:VariableMapobject.
const black = new Color(...);
new FontColor(gradient)).getValue({ colorFormat: "rgb" }) // "rgb(0, 0, 0)"Creates filter property instance with filters functions. See related docs.
filters: Array ofStyleFunctioninstances.
Returns filter.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
params: An instance conforming toStyleParams.
new Filter([
{ fn: "blur", args: [new Length(12)] },
{ fn: "saturate", args: [new Percent(35)] }
]).getValue({ densityDivisor: 2 }) // "blur("6px") saturate(35%)"Creates font-size property instance with length. See related docs.
length:Length.
Returns font-size.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
params: An instance conforming toLengthParams.variables: AVariableMapinstance.
new FontSize(new Length(12)).getValue({ densityDivisor: 1 }) // "12px"Creates font-stretch property instance with value. See related docs.
value:string
Returns font-stretch.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
new FontStretch("semi-condensed").getValue() // "semi-condensed"Creates font-style property instance with value. See related docs.
value:string
Returns font-style.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
new FontStyle("oblique").getValue() // "oblique"Creates font-weight property instance with value. See related docs.
value:number
Returns font-weight.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
new FontWeight(200).getValue() // "200"Creates height property instance with length. See related docs.
length:Length.
Returns height.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
params: An instance conforming toLengthParams.variables: AVariableMapinstance.
new Height(new Length(12)).getValue({ densityDivisor: 2 }) // "6px"Creates letter-spacing property instance with length. See related docs.
value:number
Returns letter-spacing.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
params: An instance conforming toLengthParams.variables: AVariableMapinstance.
new LetterSpacing(4).getValue({ densityDivisor: 2 }) // "2px"Creates line-height property instance with length. See related docs.
value:numberfontSize:number
Returns line-height.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
params: An instance conforming toLengthParams.variables: AVariableMapinstance.
new LineHeight(24, 18).getValue({ densityDivisor: 2 }) // "12px"Creates mix-blend-mode property instance with value. See related docs.
value:string
Returns mix-blend-mode.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
new MixBlendMode("multiply").getValue() // "multiply"Creates an instance with id.
id:string
Returns the identifier.
Creates object-fit property instance with value. See related docs.
value:string
Returns object-fit.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
new ObjectFit("contain").getValue() // "contain"Creates opacity property instance with value. See related docs.
value:Scalar.
Returns opacity.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
new Opacity(new Scalar(0.1)).getValue() // "0.1"Creates text-shadow or box-shadow property instance with shadowObjects, based on the value of type. See related docs.
shadowObjects: Array ofExtensionModels.Shadowinstances.type:stringthat specifies the type,boxortext.
Returns text-shadow or box-shadow based on type.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
params: An instance conforming toColorParamsandLengthParams.variables: AVariableMapinstance.
new Shadow([shadow], "box").getValue({ densityDivisor: 2, colorFormat: "rgb" }) // "0 1px 2px 0 rgba(158, 12, 12, 0.5)"Creates text-align property instance with value. See related docs.
value:string
Returns text-align.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
new TextAlign("right").getValue() // "right"Creates text-align property with value. See related docs.
value:string
Returns -webkit-text-fill-color.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
new TextFillColor("transparent").getValue() // "transparent"Creates text-stroke property instance with length and color. See related docs.
☝️ Requires -webkit prefix.
Returns text-stroke.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
params: An instance conforming toColorParamsandLengthParams.variables: AVariableMapinstance.
new TextStroke(new Length(3), black).getValue({ densityDivisor: 2, colorFormat: "hex" }) // "1.5px #000000"Creates transform property instance with transformation functions. See related docs.
functions: Array ofStyleFunctioninstances.
Returns transform.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
params: An instance conforming toStyleParams.
new Transform([{ fn: "rotate", args: [new Angle(30, "deg")] }]).getValue() // "rotate(30deg)"Creates width property instance with length. See related docs.
length:Length.
Returns width.
Checks if other instance is equal to self.
other:StyleDeclaration
Returns the string representation.
params: An instance conforming toLengthParams.variables: AVariableMapinstance.
new Width(new Length(120)).getValue({ densityDivisor: 2 }) // "60px"