OoidgetOoidget Component Format 0.1Editor's Draft
Effects and colour
Colour
A Color is a string with the syntax of a CSS <color> [CSS-COLOR-4]. A runtime
MUST accept hex notations (#rgb, #rgba, #rrggbb, #rrggbbaa), rgb(), rgba(), hsl(), hsla(), the named
colours and transparent, and SHOULD accept oklch(), oklab() and color(display-p3 …). Colours are composited
in sRGB unless the runtime’s output is wide-gamut.
Effects
A shape’s effects are painted in array order. Each effect is an object with a type:
type | CSS or SVG equivalent | Properties |
|---|---|---|
fill | background | color, or one of linear, radial, conic (gradients); opacity |
stroke | border / SVG stroke | color, width, position ("inside", "center", "outside"; default "center"), dash (array), opacity |
dropShadow | box-shadow | x, y, blur, spread, color, opacity |
innerShadow | box-shadow: inset | x, y, blur, spread, color, opacity |
blur | filter: blur() | radius |
blur and the shadows’ blur are standard deviations doubled, as in CSS (blur: 4 is box-shadow’s 4px).
An unknown type is skipped.
Gradients
linear, radial and conic take the arguments of the CSS functions of the same names
[CSS-IMAGES-3], as an object:
| Gradient | Properties |
|---|---|
linear | angle (degrees, CSS convention: 0 is to the top, clockwise), stops |
radial | cx, cy (0..1 of the box), rx, ry (0..1), stops |
conic | cx, cy, from (degrees), stops |
stops is an array of [offset, Color] or [offset, Color, alpha] with offsets from 0 to 1 in increasing order.
Instead of stops, a gradient MAY give a colour function: fn, a function of u (the position along the
gradient, 0 to 1) and s (the view) returning a number from 0 to 1, and colors, the two colours it mixes between.
The runtime samples it into stops. fn is JavaScript inline, or a reference to a
code module’s export:
{ "type": "fill", "conic": { "colors": ["#3a4148", "#ffffff"], "fn": "0.5 + 0.5 * Math.cos(4 * Math.PI * u)" } }
{ "type": "fill", "radial": { "colors": ["$arcColor", "$arcColorEnd"], "fn": { "fn": "arcFade" } } }SVG subset
SVG fragments in svg and svgExpr layers and in defs MUST use only these elements of SVG 2
[SVG2]: g, path, rect, circle, ellipse, line, polyline, polygon, text,
tspan, defs, linearGradient, radialGradient, stop, clipPath, mask, pattern, use (referring within
the document only), filter with feGaussianBlur, feOffset, feFlood, feComposite, feMerge, feColorMatrix
and feBlend.
They MUST NOT contain script, foreignObject, image with an external reference, event attributes, or references
outside the document. A runtime MUST ignore any such element or attribute.