Styling

Work in Progress

---

SRRecorderControlStyle can be used to load custom resources from the Application bundle. The identifier of Style is used to locate the <identifier>-info.json data asset. The info file describes components Style consists of. Each component corresponds to a given appearance setting such as Dark Mode, Color Tint (before 10.14), Accessibility, etc. Style considers the current system and application settings to select the best matching component.

When it's time to actually lay out or draw the control, style loads and caches the best matching resources.

Lookup Order

Before loading any resources, Style uses the current system settings to order the set of components specified in the info file. Order of precedence:

1. macOS appearance
2. Accessibility
3. Layout Direction
4. Control Tint

Resource Matching

Resource names are specified using the following grammar:

<resource-name> ::= <identifier><components>-<name>

<components> ::= <appearance-fragment> <accessibility-fragment> <layout-direction-fragment> <tint-fragment>
<appearance-fragment> ::= "-aqua" | "-vibrantlight" | "-vibrantdark" | "-darkaqua" | ""
<accessibility-fragment> ::= "-acc" | ""
<layout-direction-fragment> ::= "-ltr" | "-lrt" | ""
<tint-fragment> ::= "-blue" | "-graphite" | ""

<identifier> ::= string
<name> ::= string

Examples are:

• sr-mojave-aqua-image.png
• sr-mojave-darkaqua-acc-file.json
• sr-mojave-blue-valentine.jpeg

No actual parsing is ever done. Instead, specific names are constructed and looked up on-demand according to the info file.

If resources for the same component are identical there is no need to duplicate them: Style will try to resolve each resource from the most specific component to the most general. The latter is always considered and does not need to be explicitly specified in the info file.

Metrics

The first file loaded by Style is <identifier>[<components>]-metrics.json. It describes the layout and drawing options.

• The control is of fixed height and flexible width

The "." in the key name corresponds to the nested value

Key	Value
MinSize	{"Width": float, "Height": float}, minimum size of the control to draw
ShapeCornerRadius	{"Width": float, "Height": float}, radius of the corners for the focus ring
ShapeInsets	{"Top": float, "Left": float, "Bottom": float, "Right": float}, insets relative to alignment frame for the focus ring