StyleSheet class Core

Style rules for the tiles of a board and the controls on it - a CSS style sheet, typed. Written as a list:

board.StyleSheet = new StyleSheet
{
    { Select.Class("kpi"), new ArionStyle { Transition = ArionTransition.Fast } },
    { Select.Class("kpi").Hover, new ArionStyle { Lift = 3, Shadow = Tokens.Accent.WithAlpha(0x66) } },
    { Select.Type<Button>().Class("primary"), new ArionStyle { CornerRadius = 12 } },
};

Cascade. As in CSS, the origin decides before the specificity. The layers, each over the one before: the theme's StyleSheet.Default sheet; for a control, what it was built with (StyleOrigin.Hint); the application's sheets - those of the boards around the element's board (outer first), then its board's own, then those of its board's active breakpoints (Board.When); for a tile, its inline style. Within a layer the less specific rules are laid down first and the more specific over them (ArionStyleSelector.Specificity), among equally specific ones the later wins. So any rule of the application's sheets - even a bare type rule - wins over the theme's. Each property is decided on its own.

Cost. The cascade runs when something it reads changes - a rule, a class, a sheet - never per frame: an element keeps its resolved styles, and a changed rule (StyleSheet.Set) re-resolves only the elements its selector can pick.

A sheet changes on the UI thread; a shown board picks a change up with its next change, so change a sheet in use inside Board.Mutate.

public sealed class StyleSheet : IEnumerable<StyleSheetRule>, IEnumerable

Namespace: ArionUI.Presentation.Controls
Package: ArionUI.Presentation · dotnet add package ArionUI.Presentation --prerelease
Implements: IEnumerable<StyleSheetRule>, IEnumerable

Constructors

StyleSheet

public StyleSheet();

Properties

Default

public static StyleSheet Default { get; }

The theme's sheet, the lowest layer of every cascade. For tiles: the class card (the theme's card: card fill, hairline border, rounded corners, soft shadow, 16 units of padding) and half opacity for a tile whose control is disabled; a plain tile gets no box. For controls: the theme's look of each control - a quiet button (primary and neutral for the other two), the text box, check box, switch, drop-down and slider - all in theme tokens, so a theme switch restyles them.

IsReadOnly

public bool IsReadOnly { get; }

False for a sheet anyone may add to; the built-in StyleSheet.Default is fixed.

Rules

public IReadOnlyList<StyleSheetRule> Rules { get; }

The rules in the order they were added.

Methods

Add

public StyleSheet Add(ArionStyleSelector selector, ArionStyle style);

Adds a rule; later rules win over earlier ones of the same specificity.

ExplainControl

public static IReadOnlyList<StyleDeclaration> ExplainControl(IReadOnlyList<StyleSheet> sheets, Control control, TileStates states);

What StyleSheet.ExplainTile tells for a tile, for control in states.

ExplainTile

public static IReadOnlyList<StyleDeclaration> ExplainTile(IReadOnlyList<StyleSheet> sheets, IReadOnlyList<string> classes, TileStates states, ArionStyle? inline = null);

Every declaration the cascade of a tile weighs, property by property in the order of ArionStyle.Declarations, the winner of each first and the declarations it overrides after it, strongest first - what a browser's Styles pane lists, with the overridden ones struck through. The layout properties (padding, font size) are weighed at rest, as the tile lays out.

GetEnumerator

public IEnumerator<StyleSheetRule> GetEnumerator();

Remove

public bool Remove(ArionStyleSelector selector);

Takes the rule for selector out; false when there is none.

ResolveControl

public static ArionStyle ResolveControl(IReadOnlyList<StyleSheet> sheets, Control control, TileStates states);

The style of control in states: the theme's StyleSheet.Default sheet, what the control was built with, then sheets (the application's, outermost first). Rules for Select.Tile pick tiles, not controls.

ResolveTile

public static ArionStyle ResolveTile(IReadOnlyList<StyleSheet> sheets, IReadOnlyList<string> classes, TileStates states, ArionStyle? inline = null);

The style of a tile with classes in states: the theme's StyleSheet.Default sheet, then sheets (the application's, outermost first), then the tile's inline style - the cascade described on StyleSheet. Rules with a control type pick controls, not tiles.

Set

public StyleSheet Set(ArionStyleSelector selector, ArionStyle style);

Gives the rule for selector a new style, keeping its place in the sheet - or adds the rule when there is none. The way to tune a sheet live (a slider on a radius): only the elements the selector can pick are cascaded again.