Standard library · Graphics and games

gui.style

The Salam UI style standard: every property with its English and Persian name, value syntax, validation with clear errors, defaults per element, inheritance, interpolation for transitions and the CSS the web target writes.

import gui.style

On this page

One style for the web and a native window
A hover transition, frame by frame
Types
Constants and variables
Functions

gui.style is the style standard of the Salam UI, in the spirit of QML: one vocabulary of properties that works the same on the web and in a native window. A page never contains CSS. The compiler checks every style attribute with this package, writes CSS from it for the web target and builds typed values from it for the native target, so both look the same.

Every property has an int id (P_WIDTH, P_PADDING, ...), an English and a Persian name, a value kind, a keyword set with English and Persian names, a default, and flags that say whether it is inherited and whether it can be animated. The table is in the package, and Info returns one row of it.

The value syntax:

Numbers in the property's natural unit: pixels for lengths, milliseconds for times, degrees for angles, a plain number for opacity, grow and scale. Units: px, %, em, rem, vw, vh, vmin, vmax, fr, ms, s, deg, turn, rad, also as calls like px(12).
Length arithmetic: 100% - 20 and 50% + 1em; the web target writes calc().
Lists with a comma (padding = 8, 16) and groups in brackets (shadow = [0, 4, 8, black], [0, 1, 2, red]).
Composites in any order where the parts differ: border = 2, solid, #3366aa or border = red, 1.
Calls: linear(90, red, blue), radial(circle, [30%, 40%], white, black), conic(...), image("a.png"), minmax(100, 1fr), repeat(fill, 200), fit(300), ease(0.2, 0, 0, 1), steps(4), spring(170, 26), and every colour of gui.color.
Persian: keywords and property names in Persian, Persian digits, ٪ and the comma ،.
Strings are read with the same syntax: "8, 16" is the same as 8, 16.

Things to know

Sides and corners follow the text direction: four values are top, end, bottom, start, and radius goes top start, top end, bottom end, bottom start. left and right become start or end by the direction when they are set.
gap has no effect in flow (the lines and items there are spaced by margins and line height), on both targets; it is accepted and ignored. min width and min height start at auto, the automatic minimum, so a flex child does not shrink below its content unless a smaller minimum is given.
In flow, inline text elements (span, bold, italic, code, link and the like) stay inline content on the web so text wraps across them; every other child is one atomic item on the line, baseline aligned.
Every box is a column by default and text elements use flow. BaseCss gives the web the same defaults, so plain HTML does not look different from the native window.
Css returns declarations. Filters and reverse set --salam-* variables that the base sheet reads, and layout = stack and flow end with a nested &>* rule for the children, so the web target has to put them in a style rule, not in a style attribute.
Source writes code that uses only this package, for programs the compiler generates for the native target.

One style for the web and a native window

A card is described with attribute values as a page would write them. Each one is parsed and checked; a value out of range gives a message with the expected form. The same values become CSS for the web and typed fields that a native renderer reads.

gui-style-guide-card.salam

import gui.style

func main:
    names := ["layout", "gap", "padding", "radius", "background", "color", "shadow", "width", "max width", "opacity"]
    values := ["row", "12", "16, 24", "12", "linear(90, #3366aa, #5588cc)", "white", "0, 4, 12, #00000040", "100% - 32", "480", "120%"]
    mut s := style.Default("box")
    mut rule := ""
    repeat names.Len() in i:
        p := style.PropByName(names[i])
        mut v := style.Value {}
        if not style.Parse(p, values[i], v):
            println style.Error(p, values[i])
            continue
        end
        style.Set(s, p, v)
        rule += style.Css(p, v) + ";"
    end
    println "web:", ".card{" + rule + "}"
    println "native: row", s.layout_kind == style.KW_ROW, "gap", s.gap_column.px, "padding", s.padding_top.px, s.padding_start.px
    println "native: width", s.width.len.pct, "% plus", s.width.len.px, "px, at most", s.max_width.len.px
    println "native: shadow blur", s.shadow.Get(0).blur.px, "background layers", s.background.Len()
end

Outputopacity: 1.2 is out of range; expected a number from 0 to 1 or a percent, for example opacity = 0.5 web: .card{display:var(--salam-o,block) flex;flex-direction:var(--salam-dir,row);--salam-rev:row-reverse;gap:12px;padding-block:16px;padding-inline:24px;border-radius:12px;background-color:transparent;background-image:linear-gradient(90deg,#3366aa,#5588cc);color:#ffffff;box-shadow:0 4px 12px 0 #00000040;width:calc(100% - 32px);max-width:480px;} native: row true gap 12 padding 16 24 native: width 100 % plus -32 px, at most 480 native: shadow blur 12 background layers 1

Lengths keep their units until layout: 100% - 32 stays a percent plus pixels, and the native layout resolves the percent against the parent.

A hover transition, frame by frame

A transition needs the same curve on both targets. The web gets the CSS timing function, and a native renderer computes each frame with EaseAt and Lerp, which mix colours in oklab and lengths unit by unit.

gui-style-guide-hover.salam

import gui.style

func value(p: int, text: str): style.Value:
    mut v := style.Value {}
    style.Parse(p, text, v)
    ret v
end

func main:
    rest := value(style.P_BACKGROUND, "#3366aa")
    hover := value(style.P_BACKGROUND, "#5588cc")
    lift := value(style.P_TRANSLATE, "0, -2")
    still := value(style.P_TRANSLATE, "0")
    tr := value(style.P_TRANSITION, "200ms, ease out")
    mut s := style.Style {}
    style.Set(s, style.P_TRANSITION, tr)
    easing := s.transition.Get(0).easing
    println "web:", style.Css(style.P_TRANSITION, tr)
    repeat 5 in frame:
        ms := (frame as f64) * 50.0
        k := style.EaseAt(easing, ms / s.transition.Get(0).duration)
        bg := style.Lerp(style.P_BACKGROUND, rest, hover, k)
        y := style.Lerp(style.P_TRANSLATE, still, lift, k)
        println ms, "ms:", style.Format(style.P_BACKGROUND, bg), "translate", style.Format(style.P_TRANSLATE, y)
    end
    println style.Error(style.P_TRANSITION, "fast")
end

Outputweb: transition-duration:200ms;transition-timing-function:ease-out;transition-delay:0ms 0 ms: #3366aa translate 0, 0 50 ms: #4073b7 translate 0, -0.7563 100 ms: #4a7dc1 translate 0, -1.3693 150 ms: #5285c9 translate 0, -1.8131 200 ms: #5588cc translate 0, -2 transition: 'fast' is not a time or an easing; expected a duration, an easing and a delay, with [ ] around each transition when there are several, or none, for example transition = 200ms, ease out

spring(stiffness, damping) works the same way: the native target uses EaseAt, and Css writes the same curve as a CSS linear() timing function.

Types

`Len`

struct Len

A length as a sum of units, so 100% - 20 is pct = 100 and px = -20. em, rem, vw and vh are resolved by the renderer; percent stays percent until layout.

Name	Type	Description
`px`	`f64 = 0`	The part in pixels.
`pct`	`f64 = 0`	The part in percent of the reference size.
`em`	`f64 = 0`	The part in times the font size.
`rem`	`f64 = 0`	The part in times the page font size.
`vw`	`f64 = 0`	The part in percent of the window width.
`vh`	`f64 = 0`	The part in percent of the window height.
`vmin`	`f64 = 0`	The part in percent of the smaller window side.
`vmax`	`f64 = 0`	The part in percent of the larger window side.
`fr`	`f64 = 0`	The part in fractions of the free space, grid tracks only.

gui-style-Source.salam

import gui.style

func main:
    mut v := style.Value {}
    style.Parse(style.P_PADDING, "8, 1em", v)
    println style.Source(style.P_PADDING, v)
    built := style.One(style.OfLen(style.Px(8.0))).And(style.OfLen(style.Em(1.0)))
    println style.Format(style.P_PADDING, built)
    w := style.One(style.OfLen(style.Len { pct = 100.0, px = -20.0 }))
    println style.Format(style.P_WIDTH, w), style.Format(style.P_GAP, style.One(style.OfLen(style.Rem(1.0))).And(style.OfLen(style.Pct(5.0))))
    println style.Format(style.P_HEIGHT, style.One(style.OfLen(style.Vh(50.0)))), style.Format(style.P_WIDTH, style.One(style.OfLen(style.Vw(80.0)))), style.Format(style.P_WIDTH, style.One(style.OfLen(style.Vmin(10.0)))), style.Format(style.P_WIDTH, style.One(style.OfLen(style.Vmax(10.0))))
    println style.Format(style.P_COLUMNS, style.One(style.OfTrack(style.Track { kind = style.TRACK_MINMAX, len = style.Px(100.0), max = style.Fr(1.0) })))
    paint := style.Gradient(style.PAINT_LINEAR, 90.0, 0, false, style.Pct(50.0), style.Pct(50.0), false).AddStop(style.ColorOf(1.0, 0.0, 0.0, 1.0), style.Len {}, false).AddStop(style.CurrentColor(), style.Pct(80.0), true)
    println style.Format(style.P_BACKGROUND, style.One(style.OfPaint(paint)).And(style.OfPaint(style.Image("a.png"))))
    pair := style.LightDark(style.ColorOf(1.0, 1.0, 1.0, 1.0), style.ColorOf(0.0, 0.0, 0.0, 1.0))
    println style.Format(style.P_COLOR, style.One(style.OfColor(pair)))
    t := style.One(style.OfTime(200.0)).And(style.OfEase(style.Easing { kind = style.EASE_OUT })).And(style.OfTime(0.0)).Then(style.OfTime(100.0)).And(style.OfEase(style.Easing { kind = style.EASE_LINEAR })).And(style.OfTime(0.0))
    println style.Format(style.P_TRANSITION, t)
    println style.Format(style.P_ORDER, style.One(style.OfInt(2))), style.Format(style.P_WRAP, style.One(style.OfBool(true))), style.Format(style.P_OPACITY, style.One(style.OfNum(0.5))), style.Format(style.P_ROTATE, style.One(style.OfAngle(45.0)))
    println style.Format(style.P_LAYOUT, style.One(style.OfWord(style.KW_ROW))), style.Format(style.P_FONT, style.One(style.OfStr("Vazirmatn"))), style.Format(style.P_TRANSITION_PROPERTIES, style.One(style.OfProp(style.P_OPACITY)))
end

Outputstyle.One(style.OfLen(style.Px(8.0))).And(style.OfLen(style.Em(1.0))) 8, 1em 100% - 20 1rem, 5% 50vh 80vw 10vmin 10vmax minmax(100, 1fr) linear(90, #ff0000, current 80%), image("a.png") light dark(#ffffff, #000000) [200ms, ease out], [100ms, linear] 2 true 0.5 45deg row "Vazirmatn" opacity

`Dim`

struct Dim

A length or a keyword such as auto, fill or none.

Name	Type	Description
`word`	`int = 0`	The keyword id (`KW_AUTO` and so on), 0 when the value is the length.
`len`	`Len`	The length, used when `word` is 0.

gui-style-Style.salam

import gui.style

func main:
    page := style.Default("page")
    mut h := style.Default("h1")
    style.Inherit(page, h)
    mut v := style.Value {}
    style.Parse(style.P_COLOR, "#3366aa", v)
    style.Set(h, style.P_COLOR, v)
    style.Parse(style.P_PADDING, "8, 16", v)
    style.Set(h, style.P_PADDING, v)
    println "layout flow:", h.layout_kind == style.KW_FLOW, "font size:", h.font_size.em, "em, weight", h.font_weight
    println "padding:", h.padding_top.px, h.padding_end.px, h.padding_bottom.px, h.padding_start.px
    println "color:", style.Format(style.P_COLOR, style.Get(h, style.P_COLOR))
    println "margin:", style.Format(style.P_MARGIN, style.Get(h, style.P_MARGIN))
    button := style.Default("button")
    println "button:", button.layout_kind == style.KW_ROW, button.cursor == style.KW_POINTER, button.border_top_width.px
end

Outputlayout flow: true font size: 2 em, weight 700 padding: 8 16 8 16 color: #3366aa margin: 0.5em, 0, 0.5em, 0 button: true true 1

`Stop`

struct Stop

A colour stop of a gradient.

Name	Type	Description
`color`	`color.Color`	The colour.
`at`	`Len`	Where the stop sits along the gradient.
`has_at`	`bool = false`	True when the stop has a position; stops without one are spread evenly.

The example for this item is shown with the ones above: gui-style-Source.salam

`Paint`

struct Paint

One layer of a background: a colour, a gradient or an image.

Name	Type	Description
`kind`	`int = 1`	`PAINT_COLOR`, `PAINT_LINEAR`, `PAINT_RADIAL`, `PAINT_CONIC` or `PAINT_IMAGE`.
`color`	`color.Color`	The colour of a `PAINT_COLOR` layer.
`angle`	`f64 = 180`	The direction of a linear gradient or the start of a conic one, in degrees.
`side`	`int = 0`	A `to` keyword such as `KW_TO_RIGHT` instead of an angle, or 0.
`circle`	`bool = false`	A radial gradient is a circle instead of an ellipse.
`at_x`	`Len`	The horizontal centre of a radial or conic gradient.
`at_y`	`Len`	The vertical centre of a radial or conic gradient.
`has_at`	`bool = false`	True when the centre was given as `[x, y]`.
`stops`	`Vector`	The colour stops.
`path`	`str = ""`	The file of a `PAINT_IMAGE` layer.

The example for this item is shown with the ones above: gui-style-Source.salam

`AddStop`

func AddStop(c: color.Color, at: Len, has_at: bool): Paint

Returns a copy of the gradient with one more stop; Source builds gradients with it.

The example for this item is shown with the ones above: gui-style-Source.salam

`Easing`

struct Easing

How a transition moves from start to end: a keyword curve, ease(x1, y1, x2, y2), steps(n) or spring(stiffness, damping).

Name	Type	Description
`kind`	`int = 2`	One of the `EASE_` constants.
`x1`	`f64 = 0`	The x of the first control point of `ease(...)`.
`y1`	`f64 = 0`	The y of the first control point of `ease(...)`.
`x2`	`f64 = 0`	The x of the second control point of `ease(...)`.
`y2`	`f64 = 0`	The y of the second control point of `ease(...)`.
`steps`	`int = 1`	The number of steps of `steps(n)`.
`stiffness`	`f64 = 0`	The stiffness of `spring(...)`.
`damping`	`f64 = 0`	The damping of `spring(...)`.

gui-style-Lerp.salam

import gui.style

func main:
    mut a := style.Value {}
    mut b := style.Value {}
    style.Parse(style.P_WIDTH, "100%", a)
    style.Parse(style.P_WIDTH, "100% - 40", b)
    each t in [0.0, 0.5, 1.0]:
        println "width at", t, "=", style.Format(style.P_WIDTH, style.Lerp(style.P_WIDTH, a, b, t))
    end
    mut c := style.Value {}
    mut d := style.Value {}
    style.Parse(style.P_SHADOW, "none", c)
    style.Parse(style.P_SHADOW, "0, 4, 8, black", d)
    println "shadow half way:", style.Format(style.P_SHADOW, style.Lerp(style.P_SHADOW, c, d, 0.5))
    ease := style.Easing { kind = style.EASE_SPRING, stiffness = 170.0, damping = 26.0 }
    println "spring at 0.5:", (style.EaseAt(ease, 0.5) * 1000.0) as int
end

Outputwidth at 0 = 100% width at 0.5 = 100% - 20 width at 1 = 100% - 40 shadow half way: 0, 2, 4, #00000080 spring at 0.5: 861

`Track`

struct Track

One grid track. A repeat is a TRACK_REPEAT track followed by the span tracks it repeats.

Name	Type	Description
`kind`	`int = 1`	One of the `TRACK_` constants.
`word`	`int = 0`	A size keyword (`auto`, `min content`, `max content`), the count keyword of a repeat (`fill`, `fit`), or 0.
`len`	`Len`	The size, or the low end of `minmax`, or the limit of `fit`.
`max_word`	`int = 0`	The keyword of the high end of `minmax`, or 0.
`max`	`Len`	The high end of `minmax`.
`count`	`int = 0`	The count of a repeat.
`span`	`int = 0`	How many of the following tracks a repeat covers.

The example for this item is shown with the ones above: gui-style-Source.salam

`Item`

struct Item

One typed part of a value; kind says which field holds it.

Name	Type	Description
`kind`	`int = 0`	One of the `ITEM_` constants.
`len`	`Len`	The length of an `ITEM_LEN`.
`num`	`f64 = 0`	The number of an `ITEM_NUM`, `ITEM_INT`, `ITEM_BOOL` (1 or 0), `ITEM_TIME` (milliseconds) or `ITEM_ANGLE` (degrees).
`color`	`color.Color`	The colour of an `ITEM_COLOR`.
`word`	`int = 0`	The keyword id of an `ITEM_WORD`, or the property id of an `ITEM_PROP`.
`text`	`str = ""`	The text of an `ITEM_STR`.
`paint`	`Paint`	The gradient or image of an `ITEM_PAINT`.
`ease`	`Easing`	The easing of an `ITEM_EASE`.
`track`	`Track`	The track of an `ITEM_TRACK`.

The example for this item is shown with the ones above: gui-style-Source.salam

`Value`

struct Value

The typed value of any property: the items in order and where each group starts. Composite values are stored in a fixed order, such as width, style, colour for a border.

Name	Type	Description
`items`	`Vector`	The items.
`starts`	`Vector`	The index of the first item of each group; one group for most properties, one per shadow or transition.

The example for this item is shown with the ones above: gui-style-Source.salam

`And`

func And(it: Item): Value

Returns a copy with one more item in the last group.

The example for this item is shown with the ones above: gui-style-Source.salam

`Then`

func Then(it: Item): Value

Returns a copy with a new group that starts with the item.

The example for this item is shown with the ones above: gui-style-Source.salam

`PropInfo`

struct PropInfo

One row of the property table: what the standard knows about a property.

Name	Type	Description
`id`	`int = 0`	The property id.
`name`	`str = ""`	The English name, like `min width`.
`fa`	`str = ""`	The Persian name, like `کمینه عرض`.
`kind`	`int = 0`	The value kind, one of the `KIND_` constants.
`items`	`int = 0`	A bit set of the item kinds the property takes: bit `1 << ITEM_LEN` and so on.
`min`	`int = 1`	The fewest comma values.
`max`	`int = 1`	The most comma values (or groups).
`low`	`f64 = 0`	The lowest number allowed when `high` is above it.
`high`	`f64 = 0`	The highest number allowed.
`words`	`str = ""`	The English names of the keywords, joined with `\|`.
`initial`	`str = ""`	The default value in Salam syntax.
`inherited`	`bool = false`	Children take the value from their parent.
`animatable`	`bool = false`	Transitions animate it.
`negative`	`bool = false`	Negative lengths and numbers are allowed.
`percent`	`bool = false`	A percent is allowed.
`example`	`str = ""`	An example value, used in error messages.

gui-style-Props.salam

import gui.style

func main:
    println style.PROP_COUNT, "properties,", style.KEYWORD_COUNT - 1, "keywords"
    p := style.PropByName("فاصله")
    info := style.Info(p)
    println p == style.P_PADDING, style.PropName(p), style.PropFaName(p), info.kind == style.KIND_LENGTH, info.min, info.max, info.initial
    println "inherited:", style.Inherited(style.P_COLOR), style.Inherited(style.P_PADDING), "animatable:", style.Animatable(style.P_OPACITY), style.Animatable(style.P_LAYOUT)
    each w in style.PropKeywords(style.P_LAYOUT):
        println "  ", style.KeywordName(w), "=", style.KeywordFaName(w)
    end
    println style.KeywordByName("ردیف") == style.KW_ROW
end

Output137 properties, 113 keywords true padding فاصله true 1 4 0 inherited: true false animatable: true false column = ستون row = ردیف grid = شبکه stack = پشته flow = جریان true

`Shadow`

struct Shadow

One shadow of shadow or text shadow.

Name	Type	Description
`x`	`Len`	The horizontal offset.
`y`	`Len`	The vertical offset.
`blur`	`Len`	The blur radius.
`spread`	`Len`	How much the shadow grows (box shadows only).
`color`	`color.Color`	The colour.
`inset`	`bool = false`	The shadow is inside the box.

The example for this item is shown with the ones above: gui-style-Lerp.salam

`Transition`

struct Transition

One transition: duration, easing and delay.

Name	Type	Description
`duration`	`f64 = 0`	The duration in milliseconds.
`easing`	`Easing`	The easing curve.
`delay`	`f64 = 0`	The delay in milliseconds.

The example for this item is shown with the ones above: gui-style-Lerp.salam

`Style`

struct Style

Every property of the standard as a typed field: what a native renderer reads instead of CSS.

Name	Type	Description
`layout_kind`	`int`	The `layout` keyword: `KW_COLUMN`, `KW_ROW`, `KW_GRID`, `KW_STACK` or `KW_FLOW`.
`gap_row`	`Len`	The gap between rows, from `gap`.
`gap_column`	`Len`	The gap between columns, from `gap`.
`align`	`int`	The value of `align`.
`justify`	`int`	The value of `justify`.
`align_content`	`int`	The value of `align content`.
`wrap`	`bool = false`	The value of `wrap`.
`reverse`	`bool = false`	The value of `reverse`.
`columns`	`Vector`	The value of `columns`.
`rows`	`Vector`	The value of `rows`.
`auto_columns`	`Vector`	The value of `auto columns`.
`auto_rows`	`Vector`	The value of `auto rows`.
`auto_flow`	`int`	The value of `auto flow`.
`grow`	`f64 = 0`	The value of `grow`.
`shrink`	`f64 = 1`	The value of `shrink`.
`basis`	`Dim`	The value of `basis`.
`align_self`	`int`	The value of `align self`.
`justify_self`	`int`	The value of `justify self`.
`column`	`int = 0`	The grid column line, 0 for auto.
`row`	`int = 0`	The grid row line, 0 for auto.
`column_span`	`int = 1`	The value of `column span`.
`row_span`	`int = 1`	The value of `row span`.
`order`	`int = 0`	The value of `order`.
`position`	`int`	The value of `position`.
`inset_top`	`Dim`	The `top` offset (from `top`, `inset` or `left` and `right`).
`inset_end`	`Dim`	The `end` offset (from `end`, `inset` or `left` and `right`).
`inset_bottom`	`Dim`	The `bottom` offset (from `bottom`, `inset` or `left` and `right`).
`inset_start`	`Dim`	The `start` offset (from `start`, `inset` or `left` and `right`).
`layer`	`int = 0`	The value of `layer`.
`width`	`Dim`	The value of `width`.
`height`	`Dim`	The value of `height`.
`min_width`	`Dim`	The value of `min width`.
`min_height`	`Dim`	The value of `min height`.
`max_width`	`Dim`	The value of `max width`.
`max_height`	`Dim`	The value of `max height`.
`aspect_ratio`	`f64 = 0`	The width divided by the height, 0 for none.
`padding_top`	`Len`	The `padding top` side, set by `padding top` and its shorthands.
`padding_end`	`Len`	The `padding end` side, set by `padding end` and its shorthands.
`padding_bottom`	`Len`	The `padding bottom` side, set by `padding bottom` and its shorthands.
`padding_start`	`Len`	The `padding start` side, set by `padding start` and its shorthands.
`margin_top`	`Dim`	The `margin top` side, set by `margin top` and its shorthands.
`margin_end`	`Dim`	The `margin end` side, set by `margin end` and its shorthands.
`margin_bottom`	`Dim`	The `margin bottom` side, set by `margin bottom` and its shorthands.
`margin_start`	`Dim`	The `margin start` side, set by `margin start` and its shorthands.
`overflow_x`	`int`	The horizontal part of `overflow`.
`overflow_y`	`int`	The vertical part of `overflow`.
`visible`	`bool = true`	The value of `visible`.
`clip`	`bool = false`	The value of `clip`.
`background`	`Vector`	The background layers, top first; empty is transparent.
`background_size_x`	`Dim`	The width part of `background size`, or `cover` and `contain`.
`background_size_y`	`Dim`	The height part of `background size`.
`background_x`	`Dim`	The horizontal part of `background position`.
`background_y`	`Dim`	The vertical part of `background position`.
`background_repeat`	`int`	The value of `background repeat`.
`border_top_width`	`Len`	The width of the top border.
`border_top_style`	`int`	The style of the top border.
`border_top_color`	`color.Color`	The color of the top border.
`border_end_width`	`Len`	The width of the end border.
`border_end_style`	`int`	The style of the end border.
`border_end_color`	`color.Color`	The color of the end border.
`border_bottom_width`	`Len`	The width of the bottom border.
`border_bottom_style`	`int`	The style of the bottom border.
`border_bottom_color`	`color.Color`	The color of the bottom border.
`border_start_width`	`Len`	The width of the start border.
`border_start_style`	`int`	The style of the start border.
`border_start_color`	`color.Color`	The color of the start border.
`radius_top_start`	`Len`	The `radius top start` side, set by `radius top start` and its shorthands.
`radius_top_end`	`Len`	The `radius top end` side, set by `radius top end` and its shorthands.
`radius_bottom_end`	`Len`	The `radius bottom end` side, set by `radius bottom end` and its shorthands.
`radius_bottom_start`	`Len`	The `radius bottom start` side, set by `radius bottom start` and its shorthands.
`outline_width`	`Len`	The value of `outline width`.
`outline_style`	`int`	The value of `outline style`.
`outline_color`	`color.Color`	The value of `outline color`.
`outline_offset`	`Len`	The value of `outline offset`.
`shadow`	`Vector`	The value of `shadow`.
`opacity`	`f64 = 1`	The value of `opacity`.
`blur`	`Len`	The value of `blur`.
`brightness`	`f64 = 1`	The value of `brightness`.
`contrast`	`f64 = 1`	The value of `contrast`.
`grayscale`	`f64 = 0`	The value of `grayscale`.
`saturate`	`f64 = 1`	The value of `saturate`.
`sepia`	`f64 = 0`	The value of `sepia`.
`invert`	`f64 = 0`	The value of `invert`.
`hue_rotate`	`f64 = 0`	The value of `hue rotate`.
`backdrop_blur`	`Len`	The value of `backdrop blur`.
`backdrop_brightness`	`f64 = 1`	The value of `backdrop brightness`.
`backdrop_contrast`	`f64 = 1`	The value of `backdrop contrast`.
`backdrop_grayscale`	`f64 = 0`	The value of `backdrop grayscale`.
`backdrop_saturate`	`f64 = 1`	The value of `backdrop saturate`.
`backdrop_sepia`	`f64 = 0`	The value of `backdrop sepia`.
`backdrop_invert`	`f64 = 0`	The value of `backdrop invert`.
`backdrop_hue_rotate`	`f64 = 0`	The value of `backdrop hue rotate`.
`blend`	`int`	The value of `blend`.
`translate_x`	`Len`	The horizontal part of `translate`.
`translate_y`	`Len`	The vertical part of `translate`.
`rotate`	`f64 = 0`	The value of `rotate`.
`scale_x`	`f64 = 1`	The horizontal part of `scale`.
`scale_y`	`f64 = 1`	The vertical part of `scale`.
`skew_x`	`f64 = 0`	The horizontal part of `skew`.
`skew_y`	`f64 = 0`	The vertical part of `skew`.
`origin_x`	`Dim`	The horizontal part of `origin`.
`origin_y`	`Dim`	The vertical part of `origin`.
`cursor`	`int`	The value of `cursor`.
`interactive`	`bool = true`	The value of `interactive`.
`selectable`	`bool = true`	The value of `selectable`.
`image_fit`	`int`	The value of `image fit`.
`accent`	`color.Color`	The value of `accent`.
`caret`	`color.Color`	The value of `caret`.
`scrollbar`	`int`	The value of `scrollbar`.
`scrollbar_thumb`	`color.Color`	The colour of the scrollbar thumb.
`scrollbar_track`	`color.Color`	The colour of the scrollbar track.
`color`	`color.Color`	The value of `color`.
`font`	`Vector`	The family list; the generic families are written sans, serif, mono and system, and an empty list means sans.
`font_size`	`Len`	The value of `font size`.
`font_weight`	`int = 400`	The weight from 1 to 1000; the keywords are stored as numbers (bold is 700).
`italic`	`bool = false`	The value of `italic`.
`line_height`	`f64 = 1.5`	The line height as a multiple of the font size, 0 when `line_height_len` is used.
`line_height_len`	`Len`	The line height as a length when it was given with a unit.
`letter_spacing`	`Len`	The value of `letter spacing`.
`word_spacing`	`Len`	The value of `word spacing`.
`text_align`	`int`	The value of `text align`.
`decoration`	`int`	The value of `decoration`.
`decoration_color`	`color.Color`	The value of `decoration color`.
`decoration_style`	`int`	The value of `decoration style`.
`decoration_thickness`	`Dim`	The value of `decoration thickness`.
`transform_text`	`int`	The value of `transform text`.
`wrap_text`	`bool = true`	The value of `wrap text`.
`max_lines`	`int = 0`	The most lines before an ellipsis, 0 for none.
`ellipsis`	`bool = false`	The value of `ellipsis`.
`direction`	`int`	The value of `direction`.
`white_space`	`int`	The value of `white space`.
`text_shadow`	`Vector`	The value of `text shadow`.
`font_features`	`Vector`	The value of `font features`.
`transition`	`Vector`	The value of `transition`.
`transition_props`	`Vector`	The property ids that transitions cover; empty means every animatable property.

The example for this item is shown with the ones above: gui-style-Style.salam

Constants and variables

`KW_AUTO`

const KW_AUTO: i32 = 1

The keyword auto (Persian خودکار).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_NONE`

const KW_NONE: i32 = 2

The keyword none (Persian هیچ).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_NORMAL`

const KW_NORMAL: i32 = 3

The keyword normal (Persian عادی).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_ALL`

const KW_ALL: i32 = 4

The keyword all (Persian همه).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_TRUE`

const KW_TRUE: i32 = 5

The keyword true (Persian درست).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_FALSE`

const KW_FALSE: i32 = 6

The keyword false (Persian نادرست).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_COLUMN`

const KW_COLUMN: i32 = 7

The keyword column (Persian ستون).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_ROW`

const KW_ROW: i32 = 8

The keyword row (Persian ردیف).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_GRID`

const KW_GRID: i32 = 9

The keyword grid (Persian شبکه).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_STACK`

const KW_STACK: i32 = 10

The keyword stack (Persian پشته).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_FLOW`

const KW_FLOW: i32 = 11

The keyword flow (Persian جریان).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_DENSE`

const KW_DENSE: i32 = 12

The keyword dense (Persian فشرده).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_ROW_DENSE`

const KW_ROW_DENSE: i32 = 13

The keyword row dense (Persian ردیف فشرده).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_COLUMN_DENSE`

const KW_COLUMN_DENSE: i32 = 14

The keyword column dense (Persian ستون فشرده).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_START`

const KW_START: i32 = 15

The keyword start (Persian ابتدا).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_CENTER`

const KW_CENTER: i32 = 16

The keyword center (Persian وسط).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_END`

const KW_END: i32 = 17

The keyword end (Persian انتها).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_STRETCH`

const KW_STRETCH: i32 = 18

The keyword stretch (Persian کشیده).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_BASELINE`

const KW_BASELINE: i32 = 19

The keyword baseline (Persian خط پایه).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_BETWEEN`

const KW_BETWEEN: i32 = 20

The keyword between (Persian میان).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_AROUND`

const KW_AROUND: i32 = 21

The keyword around (Persian پیرامون).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_EVENLY`

const KW_EVENLY: i32 = 22

The keyword evenly (Persian یکسان).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_ABSOLUTE`

const KW_ABSOLUTE: i32 = 23

The keyword absolute (Persian مطلق).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_FIXED`

const KW_FIXED: i32 = 24

The keyword fixed (Persian ثابت).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_STICKY`

const KW_STICKY: i32 = 25

The keyword sticky (Persian چسبان).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_TOP`

const KW_TOP: i32 = 26

The keyword top (Persian بالا).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_BOTTOM`

const KW_BOTTOM: i32 = 27

The keyword bottom (Persian پایین).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_LEFT`

const KW_LEFT: i32 = 28

The keyword left (Persian چپ).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_RIGHT`

const KW_RIGHT: i32 = 29

The keyword right (Persian راست).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_FILL`

const KW_FILL: i32 = 30

The keyword fill (Persian پر).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_FIT`

const KW_FIT: i32 = 31

The keyword fit (Persian متناسب).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_MIN_CONTENT`

const KW_MIN_CONTENT: i32 = 32

The keyword min content (Persian کمینه محتوا).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_MAX_CONTENT`

const KW_MAX_CONTENT: i32 = 33

The keyword max content (Persian بیشینه محتوا).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_VISIBLE`

const KW_VISIBLE: i32 = 34

The keyword visible (Persian نمایان).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_HIDDEN`

const KW_HIDDEN: i32 = 35

The keyword hidden (Persian پنهان).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_SCROLL`

const KW_SCROLL: i32 = 36

The keyword scroll (Persian پیمایش).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_COVER`

const KW_COVER: i32 = 37

The keyword cover (Persian پوشش).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_CONTAIN`

const KW_CONTAIN: i32 = 38

The keyword contain (Persian گنجاندن).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_X`

const KW_X: i32 = 39

The keyword x (Persian افقی).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_Y`

const KW_Y: i32 = 40

The keyword y (Persian عمودی).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_SOLID`

const KW_SOLID: i32 = 41

The keyword solid (Persian توپر).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_DASHED`

const KW_DASHED: i32 = 42

The keyword dashed (Persian خط چین).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_DOTTED`

const KW_DOTTED: i32 = 43

The keyword dotted (Persian نقطه چین).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_DOUBLE`

const KW_DOUBLE: i32 = 44

The keyword double (Persian دوخطی).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_WAVY`

const KW_WAVY: i32 = 45

The keyword wavy (Persian موجی).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_INSET`

const KW_INSET: i32 = 46

The keyword inset (Persian درونی).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_MULTIPLY`

const KW_MULTIPLY: i32 = 47

The keyword multiply (Persian ضرب).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_SCREEN`

const KW_SCREEN: i32 = 48

The keyword screen (Persian پرده).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_OVERLAY`

const KW_OVERLAY: i32 = 49

The keyword overlay (Persian روکش).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_DARKEN`

const KW_DARKEN: i32 = 50

The keyword darken (Persian تیره‌تر).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_LIGHTEN`

const KW_LIGHTEN: i32 = 51

The keyword lighten (Persian روشن‌تر).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_COLOR_DODGE`

const KW_COLOR_DODGE: i32 = 52

The keyword color dodge (Persian رنگ گریز).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_COLOR_BURN`

const KW_COLOR_BURN: i32 = 53

The keyword color burn (Persian رنگ سوز).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_HARD_LIGHT`

const KW_HARD_LIGHT: i32 = 54

The keyword hard light (Persian نور سخت).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_SOFT_LIGHT`

const KW_SOFT_LIGHT: i32 = 55

The keyword soft light (Persian نور نرم).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_DIFFERENCE`

const KW_DIFFERENCE: i32 = 56

The keyword difference (Persian تفاوت).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_EXCLUSION`

const KW_EXCLUSION: i32 = 57

The keyword exclusion (Persian طرد).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_HUE`

const KW_HUE: i32 = 58

The keyword hue (Persian فام).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_SATURATION`

const KW_SATURATION: i32 = 59

The keyword saturation (Persian اشباع).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_COLOR`

const KW_COLOR: i32 = 60

The keyword color (Persian رنگ).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_LUMINOSITY`

const KW_LUMINOSITY: i32 = 61

The keyword luminosity (Persian درخشندگی).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_DEFAULT`

const KW_DEFAULT: i32 = 62

The keyword default (Persian پیش‌فرض).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_POINTER`

const KW_POINTER: i32 = 63

The keyword pointer (Persian اشاره).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_TEXT`

const KW_TEXT: i32 = 64

The keyword text (Persian متن).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_MOVE`

const KW_MOVE: i32 = 65

The keyword move (Persian جابجایی).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_GRAB`

const KW_GRAB: i32 = 66

The keyword grab (Persian گرفتن).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_GRABBING`

const KW_GRABBING: i32 = 67

The keyword grabbing (Persian چنگ زده).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_NOT_ALLOWED`

const KW_NOT_ALLOWED: i32 = 68

The keyword not allowed (Persian غیرمجاز).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_WAIT`

const KW_WAIT: i32 = 69

The keyword wait (Persian انتظار).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_PROGRESS`

const KW_PROGRESS: i32 = 70

The keyword progress (Persian مشغول).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_CROSSHAIR`

const KW_CROSSHAIR: i32 = 71

The keyword crosshair (Persian نشانه).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_HELP`

const KW_HELP: i32 = 72

The keyword help (Persian راهنما).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_RESIZE`

const KW_RESIZE: i32 = 73

The keyword resize (Persian تغییر اندازه).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_RESIZE_X`

const KW_RESIZE_X: i32 = 74

The keyword resize x (Persian تغییر اندازه افقی).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_RESIZE_Y`

const KW_RESIZE_Y: i32 = 75

The keyword resize y (Persian تغییر اندازه عمودی).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_ZOOM_IN`

const KW_ZOOM_IN: i32 = 76

The keyword zoom in (Persian بزرگ‌نمایی).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_ZOOM_OUT`

const KW_ZOOM_OUT: i32 = 77

The keyword zoom out (Persian کوچک‌نمایی).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_SCALE_DOWN`

const KW_SCALE_DOWN: i32 = 78

The keyword scale down (Persian کوچک‌سازی).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_THIN`

const KW_THIN: i32 = 79

The keyword thin (Persian نازک).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_LIGHT`

const KW_LIGHT: i32 = 80

The keyword light (Persian سبک).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_MEDIUM`

const KW_MEDIUM: i32 = 81

The keyword medium (Persian متوسط).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_SEMIBOLD`

const KW_SEMIBOLD: i32 = 82

The keyword semibold (Persian نیم‌پررنگ).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_BOLD`

const KW_BOLD: i32 = 83

The keyword bold (Persian پررنگ).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_BLACK`

const KW_BLACK: i32 = 84

The keyword black (Persian بسیار پررنگ).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_SANS`

const KW_SANS: i32 = 85

The keyword sans (Persian ساده).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_SERIF`

const KW_SERIF: i32 = 86

The keyword serif (Persian گیره‌دار).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_MONO`

const KW_MONO: i32 = 87

The keyword mono (Persian تک‌فاصله).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_SYSTEM`

const KW_SYSTEM: i32 = 88

The keyword system (Persian سیستمی).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_JUSTIFY`

const KW_JUSTIFY: i32 = 89

The keyword justify (Persian هم‌تراز).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_UNDERLINE`

const KW_UNDERLINE: i32 = 90

The keyword underline (Persian زیرخط).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_OVERLINE`

const KW_OVERLINE: i32 = 91

The keyword overline (Persian روخط).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_STRIKE`

const KW_STRIKE: i32 = 92

The keyword strike (Persian خط خورده).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_UPPER`

const KW_UPPER: i32 = 93

The keyword upper (Persian بزرگ).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_LOWER`

const KW_LOWER: i32 = 94

The keyword lower (Persian کوچک).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_CAPITALIZE`

const KW_CAPITALIZE: i32 = 95

The keyword capitalize (Persian حرف اول بزرگ).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_RTL`

const KW_RTL: i32 = 96

The keyword rtl (Persian راست به چپ).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_LTR`

const KW_LTR: i32 = 97

The keyword ltr (Persian چپ به راست).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_KEEP`

const KW_KEEP: i32 = 98

The keyword keep (Persian حفظ).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_LINEAR`

const KW_LINEAR: i32 = 99

The keyword linear (Persian خطی).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_EASE`

const KW_EASE: i32 = 100

The keyword ease (Persian نرم).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_EASE_IN`

const KW_EASE_IN: i32 = 101

The keyword ease in (Persian نرم ابتدا).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_EASE_OUT`

const KW_EASE_OUT: i32 = 102

The keyword ease out (Persian نرم انتها).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_EASE_IN_OUT`

const KW_EASE_IN_OUT: i32 = 103

The keyword ease in out (Persian نرم دوسویه).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_CIRCLE`

const KW_CIRCLE: i32 = 104

The keyword circle (Persian دایره).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_ELLIPSE`

const KW_ELLIPSE: i32 = 105

The keyword ellipse (Persian بیضی).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_TO_TOP`

const KW_TO_TOP: i32 = 106

The keyword to top (Persian به بالا).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_TO_BOTTOM`

const KW_TO_BOTTOM: i32 = 107

The keyword to bottom (Persian به پایین).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_TO_LEFT`

const KW_TO_LEFT: i32 = 108

The keyword to left (Persian به چپ).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_TO_RIGHT`

const KW_TO_RIGHT: i32 = 109

The keyword to right (Persian به راست).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_TO_TOP_LEFT`

const KW_TO_TOP_LEFT: i32 = 110

The keyword to top left (Persian به بالا چپ).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_TO_TOP_RIGHT`

const KW_TO_TOP_RIGHT: i32 = 111

The keyword to top right (Persian به بالا راست).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_TO_BOTTOM_LEFT`

const KW_TO_BOTTOM_LEFT: i32 = 112

The keyword to bottom left (Persian به پایین چپ).

The example for this item is shown with the ones above: gui-style-Props.salam

`KW_TO_BOTTOM_RIGHT`

const KW_TO_BOTTOM_RIGHT: i32 = 113

The keyword to bottom right (Persian به پایین راست).

The example for this item is shown with the ones above: gui-style-Props.salam

`KEYWORD_COUNT`

const KEYWORD_COUNT: i32 = 114

One more than the last keyword id; ids start at 1.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_LAYOUT`

const P_LAYOUT: i32 = 0

The id of the layout property (Persian چیدمان), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_GAP`

const P_GAP: i32 = 1

The id of the gap property (Persian شکاف), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_ALIGN`

const P_ALIGN: i32 = 2

The id of the align property (Persian تراز), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_JUSTIFY`

const P_JUSTIFY: i32 = 3

The id of the justify property (Persian چینش), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_ALIGN_CONTENT`

const P_ALIGN_CONTENT: i32 = 4

The id of the align content property (Persian محتوا تراز), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_WRAP`

const P_WRAP: i32 = 5

The id of the wrap property (Persian پیچش), a bool value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_REVERSE`

const P_REVERSE: i32 = 6

The id of the reverse property (Persian معکوس), a bool value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_COLUMNS`

const P_COLUMNS: i32 = 7

The id of the columns property (Persian ستون‌ها), a tracks value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_ROWS`

const P_ROWS: i32 = 8

The id of the rows property (Persian ردیف‌ها), a tracks value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_AUTO_COLUMNS`

const P_AUTO_COLUMNS: i32 = 9

The id of the auto columns property (Persian ستون‌های خودکار), a tracks value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_AUTO_ROWS`

const P_AUTO_ROWS: i32 = 10

The id of the auto rows property (Persian ردیف‌های خودکار), a tracks value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_AUTO_FLOW`

const P_AUTO_FLOW: i32 = 11

The id of the auto flow property (Persian جریان خودکار), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_GROW`

const P_GROW: i32 = 12

The id of the grow property (Persian رشد), a number value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_SHRINK`

const P_SHRINK: i32 = 13

The id of the shrink property (Persian جمع‌شدن), a number value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BASIS`

const P_BASIS: i32 = 14

The id of the basis property (Persian پایه), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_ALIGN_SELF`

const P_ALIGN_SELF: i32 = 15

The id of the align self property (Persian خود تراز), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_JUSTIFY_SELF`

const P_JUSTIFY_SELF: i32 = 16

The id of the justify self property (Persian خود چینش), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_COLUMN`

const P_COLUMN: i32 = 17

The id of the column property (Persian ستون), a int value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_ROW`

const P_ROW: i32 = 18

The id of the row property (Persian ردیف), a int value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_COLUMN_SPAN`

const P_COLUMN_SPAN: i32 = 19

The id of the column span property (Persian گستره ستون), a int value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_ROW_SPAN`

const P_ROW_SPAN: i32 = 20

The id of the row span property (Persian گستره ردیف), a int value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_ORDER`

const P_ORDER: i32 = 21

The id of the order property (Persian ترتیب نمایش), a int value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_POSITION`

const P_POSITION: i32 = 22

The id of the position property (Persian موقعیت), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_TOP`

const P_TOP: i32 = 23

The id of the top property (Persian بالا), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BOTTOM`

const P_BOTTOM: i32 = 24

The id of the bottom property (Persian پایین), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_START`

const P_START: i32 = 25

The id of the start property (Persian ابتدا), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_END`

const P_END: i32 = 26

The id of the end property (Persian انتها), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_LEFT`

const P_LEFT: i32 = 27

The id of the left property (Persian چپ), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_RIGHT`

const P_RIGHT: i32 = 28

The id of the right property (Persian راست), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_INSET`

const P_INSET: i32 = 29

The id of the inset property (Persian فاصله از لبه), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_LAYER`

const P_LAYER: i32 = 30

The id of the layer property (Persian لایه), a int value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_WIDTH`

const P_WIDTH: i32 = 31

The id of the width property (Persian عرض), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_HEIGHT`

const P_HEIGHT: i32 = 32

The id of the height property (Persian ارتفاع), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_MIN_WIDTH`

const P_MIN_WIDTH: i32 = 33

The id of the min width property (Persian کمینه عرض), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_MIN_HEIGHT`

const P_MIN_HEIGHT: i32 = 34

The id of the min height property (Persian کمینه ارتفاع), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_MAX_WIDTH`

const P_MAX_WIDTH: i32 = 35

The id of the max width property (Persian بیشینه عرض), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_MAX_HEIGHT`

const P_MAX_HEIGHT: i32 = 36

The id of the max height property (Persian بیشینه ارتفاع), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_ASPECT_RATIO`

const P_ASPECT_RATIO: i32 = 37

The id of the aspect ratio property (Persian نسبت ابعاد), a number value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_PADDING`

const P_PADDING: i32 = 38

The id of the padding property (Persian فاصله), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_PADDING_TOP`

const P_PADDING_TOP: i32 = 39

The id of the padding top property (Persian فاصله بالا), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_PADDING_BOTTOM`

const P_PADDING_BOTTOM: i32 = 40

The id of the padding bottom property (Persian فاصله پایین), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_PADDING_START`

const P_PADDING_START: i32 = 41

The id of the padding start property (Persian فاصله ابتدا), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_PADDING_END`

const P_PADDING_END: i32 = 42

The id of the padding end property (Persian فاصله انتها), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_PADDING_LEFT`

const P_PADDING_LEFT: i32 = 43

The id of the padding left property (Persian فاصله چپ), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_PADDING_RIGHT`

const P_PADDING_RIGHT: i32 = 44

The id of the padding right property (Persian فاصله راست), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_PADDING_X`

const P_PADDING_X: i32 = 45

The id of the padding x property (Persian فاصله افقی), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_PADDING_Y`

const P_PADDING_Y: i32 = 46

The id of the padding y property (Persian فاصله عمودی), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_MARGIN`

const P_MARGIN: i32 = 47

The id of the margin property (Persian فضا), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_MARGIN_TOP`

const P_MARGIN_TOP: i32 = 48

The id of the margin top property (Persian فضا بالا), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_MARGIN_BOTTOM`

const P_MARGIN_BOTTOM: i32 = 49

The id of the margin bottom property (Persian فضا پایین), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_MARGIN_START`

const P_MARGIN_START: i32 = 50

The id of the margin start property (Persian فضا ابتدا), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_MARGIN_END`

const P_MARGIN_END: i32 = 51

The id of the margin end property (Persian فضا انتها), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_MARGIN_LEFT`

const P_MARGIN_LEFT: i32 = 52

The id of the margin left property (Persian فضا چپ), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_MARGIN_RIGHT`

const P_MARGIN_RIGHT: i32 = 53

The id of the margin right property (Persian فضا راست), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_MARGIN_X`

const P_MARGIN_X: i32 = 54

The id of the margin x property (Persian فضا افقی), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_MARGIN_Y`

const P_MARGIN_Y: i32 = 55

The id of the margin y property (Persian فضا عمودی), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_OVERFLOW`

const P_OVERFLOW: i32 = 56

The id of the overflow property (Persian سرریز), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_OVERFLOW_X`

const P_OVERFLOW_X: i32 = 57

The id of the overflow x property (Persian سرریز افقی), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_OVERFLOW_Y`

const P_OVERFLOW_Y: i32 = 58

The id of the overflow y property (Persian سرریز عمودی), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_VISIBLE`

const P_VISIBLE: i32 = 59

The id of the visible property (Persian نمایان), a bool value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_CLIP`

const P_CLIP: i32 = 60

The id of the clip property (Persian برش), a bool value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BACKGROUND`

const P_BACKGROUND: i32 = 61

The id of the background property (Persian پس‌زمینه), a paint value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BACKGROUND_SIZE`

const P_BACKGROUND_SIZE: i32 = 62

The id of the background size property (Persian اندازه پس‌زمینه), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BACKGROUND_POSITION`

const P_BACKGROUND_POSITION: i32 = 63

The id of the background position property (Persian موقعیت پس‌زمینه), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BACKGROUND_REPEAT`

const P_BACKGROUND_REPEAT: i32 = 64

The id of the background repeat property (Persian تکرار پس‌زمینه), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BORDER`

const P_BORDER: i32 = 65

The id of the border property (Persian کادر), a border value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BORDER_TOP`

const P_BORDER_TOP: i32 = 66

The id of the border top property (Persian کادر بالا), a border value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BORDER_BOTTOM`

const P_BORDER_BOTTOM: i32 = 67

The id of the border bottom property (Persian کادر پایین), a border value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BORDER_START`

const P_BORDER_START: i32 = 68

The id of the border start property (Persian کادر ابتدا), a border value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BORDER_END`

const P_BORDER_END: i32 = 69

The id of the border end property (Persian کادر انتها), a border value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BORDER_LEFT`

const P_BORDER_LEFT: i32 = 70

The id of the border left property (Persian کادر چپ), a border value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BORDER_RIGHT`

const P_BORDER_RIGHT: i32 = 71

The id of the border right property (Persian کادر راست), a border value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BORDER_WIDTH`

const P_BORDER_WIDTH: i32 = 72

The id of the border width property (Persian ضخامت کادر), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BORDER_STYLE`

const P_BORDER_STYLE: i32 = 73

The id of the border style property (Persian سبک کادر), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BORDER_COLOR`

const P_BORDER_COLOR: i32 = 74

The id of the border color property (Persian رنگ کادر), a color value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_RADIUS`

const P_RADIUS: i32 = 75

The id of the radius property (Persian گردی), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_RADIUS_TOP_START`

const P_RADIUS_TOP_START: i32 = 76

The id of the radius top start property (Persian گردی بالا ابتدا), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_RADIUS_TOP_END`

const P_RADIUS_TOP_END: i32 = 77

The id of the radius top end property (Persian گردی بالا انتها), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_RADIUS_BOTTOM_END`

const P_RADIUS_BOTTOM_END: i32 = 78

The id of the radius bottom end property (Persian گردی پایین انتها), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_RADIUS_BOTTOM_START`

const P_RADIUS_BOTTOM_START: i32 = 79

The id of the radius bottom start property (Persian گردی پایین ابتدا), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_OUTLINE`

const P_OUTLINE: i32 = 80

The id of the outline property (Persian دورخط), a border value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_OUTLINE_OFFSET`

const P_OUTLINE_OFFSET: i32 = 81

The id of the outline offset property (Persian فاصله دورخط), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_SHADOW`

const P_SHADOW: i32 = 82

The id of the shadow property (Persian سایه), a shadow value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_OPACITY`

const P_OPACITY: i32 = 83

The id of the opacity property (Persian شفافیت), a number value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BLUR`

const P_BLUR: i32 = 84

The id of the blur property (Persian تاری), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BRIGHTNESS`

const P_BRIGHTNESS: i32 = 85

The id of the brightness property (Persian روشنایی), a number value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_CONTRAST`

const P_CONTRAST: i32 = 86

The id of the contrast property (Persian کنتراست), a number value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_GRAYSCALE`

const P_GRAYSCALE: i32 = 87

The id of the grayscale property (Persian خاکستری), a number value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_SATURATE`

const P_SATURATE: i32 = 88

The id of the saturate property (Persian اشباع رنگ), a number value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_SEPIA`

const P_SEPIA: i32 = 89

The id of the sepia property (Persian سپیا), a number value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_INVERT`

const P_INVERT: i32 = 90

The id of the invert property (Persian وارونگی), a number value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_HUE_ROTATE`

const P_HUE_ROTATE: i32 = 91

The id of the hue rotate property (Persian چرخش فام), a angle value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BACKDROP_BLUR`

const P_BACKDROP_BLUR: i32 = 92

The id of the backdrop blur property (Persian تاری پشت), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BACKDROP_BRIGHTNESS`

const P_BACKDROP_BRIGHTNESS: i32 = 93

The id of the backdrop brightness property (Persian روشنایی پشت), a number value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BACKDROP_CONTRAST`

const P_BACKDROP_CONTRAST: i32 = 94

The id of the backdrop contrast property (Persian کنتراست پشت), a number value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BACKDROP_GRAYSCALE`

const P_BACKDROP_GRAYSCALE: i32 = 95

The id of the backdrop grayscale property (Persian خاکستری پشت), a number value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BACKDROP_SATURATE`

const P_BACKDROP_SATURATE: i32 = 96

The id of the backdrop saturate property (Persian اشباع رنگ پشت), a number value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BACKDROP_SEPIA`

const P_BACKDROP_SEPIA: i32 = 97

The id of the backdrop sepia property (Persian سپیا پشت), a number value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BACKDROP_INVERT`

const P_BACKDROP_INVERT: i32 = 98

The id of the backdrop invert property (Persian وارونگی پشت), a number value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BACKDROP_HUE_ROTATE`

const P_BACKDROP_HUE_ROTATE: i32 = 99

The id of the backdrop hue rotate property (Persian چرخش فام پشت), a angle value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_BLEND`

const P_BLEND: i32 = 100

The id of the blend property (Persian آمیختگی), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_TRANSLATE`

const P_TRANSLATE: i32 = 101

The id of the translate property (Persian جابه‌جایی), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_ROTATE`

const P_ROTATE: i32 = 102

The id of the rotate property (Persian چرخش), a angle value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_SCALE`

const P_SCALE: i32 = 103

The id of the scale property (Persian مقیاس), a number value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_SKEW`

const P_SKEW: i32 = 104

The id of the skew property (Persian کجی), a angle value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_ORIGIN`

const P_ORIGIN: i32 = 105

The id of the origin property (Persian مبدا), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_CURSOR`

const P_CURSOR: i32 = 106

The id of the cursor property (Persian نشانگر), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_INTERACTIVE`

const P_INTERACTIVE: i32 = 107

The id of the interactive property (Persian تعاملی), a bool value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_SELECTABLE`

const P_SELECTABLE: i32 = 108

The id of the selectable property (Persian انتخاب‌پذیر), a bool value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_IMAGE_FIT`

const P_IMAGE_FIT: i32 = 109

The id of the image fit property (Persian جاگیری تصویر), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_ACCENT`

const P_ACCENT: i32 = 110

The id of the accent property (Persian رنگ تاکید), a color value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_CARET`

const P_CARET: i32 = 111

The id of the caret property (Persian رنگ نشانگر متن), a color value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_SCROLLBAR`

const P_SCROLLBAR: i32 = 112

The id of the scrollbar property (Persian نوار پیمایش), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_SCROLLBAR_COLOR`

const P_SCROLLBAR_COLOR: i32 = 113

The id of the scrollbar color property (Persian رنگ نوار پیمایش), a color value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_COLOR`

const P_COLOR: i32 = 114

The id of the color property (Persian رنگ), a color value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_FONT`

const P_FONT: i32 = 115

The id of the font property (Persian قلم), a fonts value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_FONT_SIZE`

const P_FONT_SIZE: i32 = 116

The id of the font size property (Persian اندازه قلم), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_FONT_WEIGHT`

const P_FONT_WEIGHT: i32 = 117

The id of the font weight property (Persian وزن قلم), a number value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_ITALIC`

const P_ITALIC: i32 = 118

The id of the italic property (Persian کج), a bool value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_LINE_HEIGHT`

const P_LINE_HEIGHT: i32 = 119

The id of the line height property (Persian ارتفاع خط), a number value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_LETTER_SPACING`

const P_LETTER_SPACING: i32 = 120

The id of the letter spacing property (Persian فاصله حروف), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_WORD_SPACING`

const P_WORD_SPACING: i32 = 121

The id of the word spacing property (Persian فاصله واژه‌ها), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_TEXT_ALIGN`

const P_TEXT_ALIGN: i32 = 122

The id of the text align property (Persian تراز متن), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_DECORATION`

const P_DECORATION: i32 = 123

The id of the decoration property (Persian تزیین متن), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_DECORATION_COLOR`

const P_DECORATION_COLOR: i32 = 124

The id of the decoration color property (Persian رنگ تزیین متن), a color value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_DECORATION_STYLE`

const P_DECORATION_STYLE: i32 = 125

The id of the decoration style property (Persian سبک تزیین متن), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_DECORATION_THICKNESS`

const P_DECORATION_THICKNESS: i32 = 126

The id of the decoration thickness property (Persian ضخامت تزیین متن), a length value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_TRANSFORM_TEXT`

const P_TRANSFORM_TEXT: i32 = 127

The id of the transform text property (Persian دگرگونی متن), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_WRAP_TEXT`

const P_WRAP_TEXT: i32 = 128

The id of the wrap text property (Persian پیچش متن), a bool value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_MAX_LINES`

const P_MAX_LINES: i32 = 129

The id of the max lines property (Persian بیشینه سطرها), a int value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_ELLIPSIS`

const P_ELLIPSIS: i32 = 130

The id of the ellipsis property (Persian سه‌نقطه), a bool value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_DIRECTION`

const P_DIRECTION: i32 = 131

The id of the direction property (Persian جهت متن), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_WHITE_SPACE`

const P_WHITE_SPACE: i32 = 132

The id of the white space property (Persian فضای سفید), a word value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_TEXT_SHADOW`

const P_TEXT_SHADOW: i32 = 133

The id of the text shadow property (Persian سایه متن), a text shadow value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_FONT_FEATURES`

const P_FONT_FEATURES: i32 = 134

The id of the font features property (Persian ویژگی‌های قلم), a strings value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_TRANSITION`

const P_TRANSITION: i32 = 135

The id of the transition property (Persian گذار), a transition value.

The example for this item is shown with the ones above: gui-style-Props.salam

`P_TRANSITION_PROPERTIES`

const P_TRANSITION_PROPERTIES: i32 = 136

The id of the transition properties property (Persian ویژگی‌های گذار), a props value.

The example for this item is shown with the ones above: gui-style-Props.salam

`PROP_COUNT`

const PROP_COUNT: i32 = 137

The number of properties; ids run from 0 to PROP_COUNT - 1.

The example for this item is shown with the ones above: gui-style-Props.salam

`KIND_WORD`

const KIND_WORD: i32 = 1

Value kind: one keyword.

gui-style-Parse.salam

import gui.style

func main:
    each text in ["8, 16", "100% - 20", "۸، ۱۶٪", "8 16", "-4"]:
        mut v := style.Value {}
        if style.Parse(style.P_PADDING, text, v):
            println "padding =", text, "->", style.Format(style.P_PADDING, v), "/", v.items.Len(), "items"
        else:
            println style.Error(style.P_PADDING, text)
        end
    end
    mut b := style.Value {}
    style.Parse(style.P_BORDER, "#3366aa, 2", b)
    println "border:", style.Format(style.P_BORDER, b)
    mut sh := style.Value {}
    style.Parse(style.P_SHADOW, "[0, 4, 8, black], [0, 1, 2, red]", sh)
    println "shadow groups:", sh.starts.Len(), "first item kind is a length:", sh.items.Get(0).kind == style.ITEM_LEN
end

Outputpadding = 8, 16 -> 8, 16 / 2 items padding = 100% - 20 -> 100% - 20 / 1 items padding = ۸، ۱۶٪ -> 8, 16% / 2 items padding: lengths are joined with + or -, and a list needs commas; expected 1 to 4 lengths (top, end, bottom, start), not negative, for example padding = 8, 16 padding: a negative length is not allowed; expected 1 to 4 lengths (top, end, bottom, start), not negative, for example padding = 8, 16 border: 2, #3366aa shadow groups: 2 first item kind is a length: true

`KIND_BOOL`

const KIND_BOOL: i32 = 2

Value kind: true or false.

The example for this item is shown with the ones above: gui-style-Parse.salam

`KIND_NUMBER`

const KIND_NUMBER: i32 = 3

Value kind: a number.

The example for this item is shown with the ones above: gui-style-Parse.salam

`KIND_INT`

const KIND_INT: i32 = 4

Value kind: a whole number.

The example for this item is shown with the ones above: gui-style-Parse.salam

`KIND_LENGTH`

const KIND_LENGTH: i32 = 5

Value kind: lengths.

The example for this item is shown with the ones above: gui-style-Parse.salam

`KIND_ANGLE`

const KIND_ANGLE: i32 = 6

Value kind: angles.

The example for this item is shown with the ones above: gui-style-Parse.salam

`KIND_COLOR`

const KIND_COLOR: i32 = 7

Value kind: colours.

The example for this item is shown with the ones above: gui-style-Parse.salam

`KIND_PAINT`

const KIND_PAINT: i32 = 8

Value kind: paint layers.

The example for this item is shown with the ones above: gui-style-Parse.salam

`KIND_TRACKS`

const KIND_TRACKS: i32 = 9

Value kind: grid tracks.

The example for this item is shown with the ones above: gui-style-Parse.salam

`KIND_BORDER`

const KIND_BORDER: i32 = 10

Value kind: a border: width, style and colour.

The example for this item is shown with the ones above: gui-style-Parse.salam

`KIND_SHADOW`

const KIND_SHADOW: i32 = 11

Value kind: box shadows.

The example for this item is shown with the ones above: gui-style-Parse.salam

`KIND_TEXT_SHADOW`

const KIND_TEXT_SHADOW: i32 = 12

Value kind: text shadows.

The example for this item is shown with the ones above: gui-style-Parse.salam

`KIND_TRANSITION`

const KIND_TRANSITION: i32 = 13

Value kind: transitions.

The example for this item is shown with the ones above: gui-style-Parse.salam

`KIND_PROPS`

const KIND_PROPS: i32 = 14

Value kind: property names.

The example for this item is shown with the ones above: gui-style-Parse.salam

`KIND_FONTS`

const KIND_FONTS: i32 = 15

Value kind: font families.

The example for this item is shown with the ones above: gui-style-Parse.salam

`KIND_STRINGS`

const KIND_STRINGS: i32 = 16

Value kind: strings.

The example for this item is shown with the ones above: gui-style-Parse.salam

`ITEM_LEN`

const ITEM_LEN: i32 = 1

Item kind: a length.

The example for this item is shown with the ones above: gui-style-Parse.salam

`ITEM_NUM`

const ITEM_NUM: i32 = 2

Item kind: a number.

The example for this item is shown with the ones above: gui-style-Parse.salam

`ITEM_INT`

const ITEM_INT: i32 = 3

Item kind: a whole number.

The example for this item is shown with the ones above: gui-style-Parse.salam

`ITEM_BOOL`

const ITEM_BOOL: i32 = 4

Item kind: true or false.

The example for this item is shown with the ones above: gui-style-Parse.salam

`ITEM_TIME`

const ITEM_TIME: i32 = 5

Item kind: a time in milliseconds.

The example for this item is shown with the ones above: gui-style-Parse.salam

`ITEM_ANGLE`

const ITEM_ANGLE: i32 = 6

Item kind: an angle in degrees.

The example for this item is shown with the ones above: gui-style-Parse.salam

`ITEM_COLOR`

const ITEM_COLOR: i32 = 7

Item kind: a colour.

The example for this item is shown with the ones above: gui-style-Parse.salam

`ITEM_WORD`

const ITEM_WORD: i32 = 8

Item kind: a keyword.

The example for this item is shown with the ones above: gui-style-Parse.salam

`ITEM_STR`

const ITEM_STR: i32 = 9

Item kind: a string.

The example for this item is shown with the ones above: gui-style-Parse.salam

`ITEM_PAINT`

const ITEM_PAINT: i32 = 10

Item kind: a gradient or an image.

The example for this item is shown with the ones above: gui-style-Parse.salam

`ITEM_EASE`

const ITEM_EASE: i32 = 11

Item kind: an easing.

The example for this item is shown with the ones above: gui-style-Parse.salam

`ITEM_TRACK`

const ITEM_TRACK: i32 = 12

Item kind: a grid track.

The example for this item is shown with the ones above: gui-style-Parse.salam

`ITEM_PROP`

const ITEM_PROP: i32 = 13

Item kind: a property name.

The example for this item is shown with the ones above: gui-style-Parse.salam

`PAINT_COLOR`

const PAINT_COLOR: i32 = 1

Paint kind: a plain colour.

The example for this item is shown with the ones above: gui-style-Source.salam

`PAINT_LINEAR`

const PAINT_LINEAR: i32 = 2

Paint kind: linear(...).

The example for this item is shown with the ones above: gui-style-Source.salam

`PAINT_RADIAL`

const PAINT_RADIAL: i32 = 3

Paint kind: radial(...).

The example for this item is shown with the ones above: gui-style-Source.salam

`PAINT_CONIC`

const PAINT_CONIC: i32 = 4

Paint kind: conic(...).

The example for this item is shown with the ones above: gui-style-Source.salam

`PAINT_IMAGE`

const PAINT_IMAGE: i32 = 5

Paint kind: image("...").

The example for this item is shown with the ones above: gui-style-Source.salam

`EASE_LINEAR`

const EASE_LINEAR: i32 = 1

Easing: linear.

The example for this item is shown with the ones above: gui-style-Lerp.salam

`EASE_EASE`

const EASE_EASE: i32 = 2

Easing: ease.

The example for this item is shown with the ones above: gui-style-Lerp.salam

`EASE_IN`

const EASE_IN: i32 = 3

Easing: ease in.

The example for this item is shown with the ones above: gui-style-Lerp.salam

`EASE_OUT`

const EASE_OUT: i32 = 4

Easing: ease out.

The example for this item is shown with the ones above: gui-style-Lerp.salam

`EASE_IN_OUT`

const EASE_IN_OUT: i32 = 5

Easing: ease in out.

The example for this item is shown with the ones above: gui-style-Lerp.salam

`EASE_CUBIC`

const EASE_CUBIC: i32 = 6

Easing: ease(x1, y1, x2, y2).

The example for this item is shown with the ones above: gui-style-Lerp.salam

`EASE_STEPS`

const EASE_STEPS: i32 = 7

Easing: steps(n).

The example for this item is shown with the ones above: gui-style-Lerp.salam

`EASE_SPRING`

const EASE_SPRING: i32 = 8

Easing: spring(stiffness, damping).

The example for this item is shown with the ones above: gui-style-Lerp.salam

`TRACK_SIZE`

const TRACK_SIZE: i32 = 1

Track kind: one size: a length, fr or a keyword.

The example for this item is shown with the ones above: gui-style-Source.salam

`TRACK_MINMAX`

const TRACK_MINMAX: i32 = 2

Track kind: minmax(a, b).

The example for this item is shown with the ones above: gui-style-Source.salam

`TRACK_FIT`

const TRACK_FIT: i32 = 3

Track kind: fit(len).

The example for this item is shown with the ones above: gui-style-Source.salam

`TRACK_REPEAT`

const TRACK_REPEAT: i32 = 4

Track kind: repeat(n, tracks).

The example for this item is shown with the ones above: gui-style-Source.salam

Functions

`Info`

func Info(id: int): PropInfo

Returns the table row of a property.

The example for this item is shown with the ones above: gui-style-Props.salam

`PropByName`

func PropByName(name: str): int

Finds a property by its English or Persian name, ignoring case and extra spaces; -1 when unknown.

The example for this item is shown with the ones above: gui-style-Props.salam

`PropName`

func PropName(id: int): str

The English name of a property.

The example for this item is shown with the ones above: gui-style-Props.salam

`PropFaName`

func PropFaName(id: int): str

The Persian name of a property.

The example for this item is shown with the ones above: gui-style-Props.salam

`Inherited`

func Inherited(id: int): bool

Reports whether children inherit the property.

The example for this item is shown with the ones above: gui-style-Props.salam

`Animatable`

func Animatable(id: int): bool

Reports whether transitions animate the property.

The example for this item is shown with the ones above: gui-style-Props.salam

`KeywordName`

func KeywordName(id: int): str

The English name of a keyword id.

The example for this item is shown with the ones above: gui-style-Props.salam

`KeywordFaName`

func KeywordFaName(id: int): str

The Persian name of a keyword id.

The example for this item is shown with the ones above: gui-style-Props.salam

`KeywordByName`

func KeywordByName(name: str): int

Finds a keyword by its English or Persian name; 0 when unknown.

The example for this item is shown with the ones above: gui-style-Props.salam

`PropKeywords`

func PropKeywords(id: int): Vector<int>

The keyword ids a property accepts.

The example for this item is shown with the ones above: gui-style-Props.salam

`Parse`

func Parse(prop: int, text: str, out &: Value): bool

Reads a value in the page syntax (numbers in the natural unit, units, percent, length arithmetic, colours, keywords in English or Persian, comma lists, [ ] groups, calls and strings) and checks it against the property. Returns false on an error; Error gives the message.

The example for this item is shown with the ones above: gui-style-Parse.salam

`Error`

func Error(prop: int, text: str): str

Returns an empty string when Parse accepts the text, otherwise one line that says what is wrong, the expected form and an example in Salam syntax.

The example for this item is shown with the ones above: gui-style-Parse.salam

`EaseAt`

func EaseAt(e: Easing, t: f64): f64

Returns the eased progress at time t from 0 to 1; the native target and the CSS for spring use the same curve.

The example for this item is shown with the ones above: gui-style-Lerp.salam

`Lerp`

func Lerp(prop: int, a: Value, b: Value, t: f64): Value

Interpolates a property between two values for transitions: lengths unit by unit, numbers, angles, colours in oklab, gradients with the same stops, shadows (a missing one fades from transparent). Values that cannot be mixed switch at the half.

The example for this item is shown with the ones above: gui-style-Lerp.salam

`Px`

func Px(n: f64): Len

A length in pixels.

The example for this item is shown with the ones above: gui-style-Source.salam

`Pct`

func Pct(n: f64): Len

A length in percent.

The example for this item is shown with the ones above: gui-style-Source.salam

`Em`

func Em(n: f64): Len

A length in em.

The example for this item is shown with the ones above: gui-style-Source.salam

`Rem`

func Rem(n: f64): Len

A length in rem.

The example for this item is shown with the ones above: gui-style-Source.salam

`Vw`

func Vw(n: f64): Len

A length in percent of the window width.

The example for this item is shown with the ones above: gui-style-Source.salam

`Vh`

func Vh(n: f64): Len

A length in percent of the window height.

The example for this item is shown with the ones above: gui-style-Source.salam

`Vmin`

func Vmin(n: f64): Len

A length in vmin.

The example for this item is shown with the ones above: gui-style-Source.salam

`Vmax`

func Vmax(n: f64): Len

A length in vmax.

The example for this item is shown with the ones above: gui-style-Source.salam

`Fr`

func Fr(n: f64): Len

A grid track size in fr.

The example for this item is shown with the ones above: gui-style-Source.salam

`ColorOf`

func ColorOf(r: f64, g: f64, b: f64, a: f64): color.Color

A colour from sRGB channels and alpha, 0 to 1.

The example for this item is shown with the ones above: gui-style-Source.salam

`CurrentColor`

func CurrentColor(): color.Color

The colour current, the text colour.

The example for this item is shown with the ones above: gui-style-Source.salam

`LightDark`

func LightDark(light: color.Color, dark: color.Color): color.Color

A colour with a light and a dark variant.

The example for this item is shown with the ones above: gui-style-Source.salam

`Gradient`

func Gradient(kind: int, angle: f64, side: int, circle: bool, at_x: Len, at_y: Len, has_at: bool): Paint

A gradient paint without stops; add them with AddStop.

The example for this item is shown with the ones above: gui-style-Source.salam

`Image`

func Image(path: str): Paint

An image paint.

The example for this item is shown with the ones above: gui-style-Source.salam

`OfLen`

func OfLen(l: Len): Item

An ITEM_LEN item.

The example for this item is shown with the ones above: gui-style-Source.salam

`OfNum`

func OfNum(n: f64): Item

An ITEM_NUM item.

The example for this item is shown with the ones above: gui-style-Source.salam

`OfInt`

func OfInt(n: int): Item

An ITEM_INT item.

The example for this item is shown with the ones above: gui-style-Source.salam

`OfBool`

func OfBool(b: bool): Item

An ITEM_BOOL item.

The example for this item is shown with the ones above: gui-style-Source.salam

`OfTime`

func OfTime(ms: f64): Item

An ITEM_TIME item in milliseconds.

The example for this item is shown with the ones above: gui-style-Source.salam

`OfAngle`

func OfAngle(deg: f64): Item

An ITEM_ANGLE item in degrees.

The example for this item is shown with the ones above: gui-style-Source.salam

`OfColor`

func OfColor(c: color.Color): Item

An ITEM_COLOR item.

The example for this item is shown with the ones above: gui-style-Source.salam

`OfWord`

func OfWord(kw: int): Item

An ITEM_WORD item.

The example for this item is shown with the ones above: gui-style-Source.salam

`OfStr`

func OfStr(s: str): Item

An ITEM_STR item.

The example for this item is shown with the ones above: gui-style-Source.salam

`OfPaint`

func OfPaint(p: Paint): Item

An ITEM_PAINT item.

The example for this item is shown with the ones above: gui-style-Source.salam

`OfEase`

func OfEase(e: Easing): Item

An ITEM_EASE item.

The example for this item is shown with the ones above: gui-style-Source.salam

`OfTrack`

func OfTrack(t: Track): Item

An ITEM_TRACK item.

The example for this item is shown with the ones above: gui-style-Source.salam

`OfProp`

func OfProp(prop: int): Item

An ITEM_PROP item naming a property.

The example for this item is shown with the ones above: gui-style-Source.salam

`One`

func One(it: Item): Value

A value with one item in one group; continue with And and Then.

The example for this item is shown with the ones above: gui-style-Source.salam

`Format`

func Format(prop: int, v: Value): str

Writes a value back in canonical Salam syntax, such as 100% - 20 or 2, solid, #3366aa.

The example for this item is shown with the ones above: gui-style-Source.salam

`Source`

func Source(prop: int, v: Value): str

Returns a Salam expression that builds the same value without parsing, for code the compiler generates. It uses only this package.

The example for this item is shown with the ones above: gui-style-Source.salam

`Css`

func Css(prop: int, v: Value): str

Returns the CSS declarations the web target writes for a value. Some properties also set --salam-* variables that BaseCss reads, and layout = stack and flow end with a nested rule for the children.

gui-style-Css.salam

import gui.style

func show(prop: int, text: str):
    mut v := style.Value {}
    style.Parse(prop, text, v)
    println style.PropName(prop), "=", text
    println "   ", style.Css(prop, v)
end

func main:
    show(style.P_LAYOUT, "row")
    show(style.P_LAYOUT, "stack")
    show(style.P_WIDTH, "100% - 20")
    show(style.P_PADDING, "8, 16, 4, 2")
    show(style.P_VISIBLE, "false")
    show(style.P_BLUR, "4")
    show(style.P_TRANSITION, "200ms, ease out")
    base := style.BaseCss()
    println "base sheet:", base.Len() > 1000, base.Substr(0, 40)
end

Outputlayout = row display:var(--salam-o,block) flex;flex-direction:var(--salam-dir,row);--salam-rev:row-reverse layout = stack display:var(--salam-o,block) grid;grid-template:minmax(0,1fr)/minmax(0,1fr);justify-items:var(--salam-j,start);&>*{grid-area:1/1} width = 100% - 20 width:calc(100% - 20px) padding = 8, 16, 4, 2 padding-top:8px;padding-inline-end:16px;padding-bottom:4px;padding-inline-start:2px visible = false display:none!important blur = 4 --salam-f-blur:blur(4px);filter:var(--salam-f-blur,) var(--salam-f-brightness,) var(--salam-f-contrast,) var(--salam-f-grayscale,) var(--salam-f-saturate,) var(--salam-f-sepia,) var(--salam-f-invert,) var(--salam-f-hue-rotate,) transition = 200ms, ease out transition-duration:200ms;transition-timing-function:ease-out;transition-delay:0ms base sheet: true *,::before,::after{box-sizing:border-box

`BaseCss`

func BaseCss(): str

Returns the base style sheet the web target puts first, so HTML elements start with the same defaults as Default on the native target.

The example for this item is shown with the ones above: gui-style-Css.salam

`Get`

func Get(s: Style, prop: int): Value

Reads a property from a style as a value; shorthands give their full form, such as four values for padding.

The example for this item is shown with the ones above: gui-style-Style.salam

`Set`

func Set(s &: Style, prop: int, v: Value)

Stores a parsed value in the typed fields of a style. left and right map to start and end with the style's direction at that moment.

The example for this item is shown with the ones above: gui-style-Style.salam

`Inherit`

func Inherit(parent: Style, child &: Style)

Copies the inherited properties from the parent where the child still has the standard initial value. Call it after Default and before Set.

The example for this item is shown with the ones above: gui-style-Style.salam

`Default`

func Default(element: str): Style

Returns the default style of an element kind by its English, HTML or Persian name (box, page, h1 to h6, paragraph, link, button, input, list, table, cell and so on); unknown names give a plain box.

The example for this item is shown with the ones above: gui-style-Style.salam