Styles


Abstract:

Sketch has a mechanism for collecting several properties like fill color
or line width into a style. These styles can be dynamic and shared by
several objects in a drawing. If such a dynamic style is changed later,
all objects using that style are automatically updated. 

This document describes how styles ideally work in Sketch. The actual
current implementation may differ in some details.


Introduction:

A style is a collection of one or more graphics properties. Graphics
properties are the fill-, line- and font-properties objects may have. In
Sketch, a style can contain any combination of properties, so can have a
style with a line_pattern and a fill_pattern and another one with
font_size and font or just the line_width.

A style can be dynamic. A dynamic style has a unique (per document) name
that can be used to identify the style. Only dynamic styles may be
shared between objects. 

A primitive object, i.e. an object that can leave marks on the paper
when printed, has at least one undynamic style, the base style, and may
have any number of additional styles. The styles form a stack, the
property stack, where the properties of styles higher in the stack hide
those below them. The base style is the bottom most style.

When a dynamic style changes, all objects using that style are
automatically updated.


Adding properties:

Adding a property to an object modifies the property stack as follows:

The topmost style that contains the property is determined and if it is
a dynamic style, a new undynamic style is inserted at the top if
necessary and the property is assigned to it. Otherwise it's an
undynamic style and the property is assigned to it.

As a result of adding a property, a style may become completely shadowed
by the styles above it in the stack. These shadowed styles are removed.
The base style is never removed.

Note, that one consequence of these rules is that dynamic styles are
never modified this way.



Adding a dynamic style:

When a dynamic style is assigned to an object, it is simply inserted at
the top of the stack and any shadowed styles are removed.



Implementation quirks:

The implementation of styles found in the 0.6.x and 0.7.x (at least up
to 0.7.5) versions of Sketch differs from the above a little. The only
difference that I can find at the moment is that the base style could
accidentally be removed if it is shadowed.

The main deficiency of 0.6.x is the very inadequate user interface for
styles. While creating dynamic styles via Styles->Name Style... works
and assigning styles to objects with the style dialog work, it's hard to
modify a dynamic style.

The only way to modify a dynamic style in 0.6.x is the command
Style->Update Style, which works only in very specific circumstances.
It's really more a left-over from an earlier style implementation.

The only situation in which the command works is when you have assigned
a style with more than one properties to an object and have assigned a
new value for one of the properties later. You can actually assign new
values for all but one of the properties; the main point is that the
dynamic style mustn't get shadowed and removed. The new values will be
put into a new non-dynamic style above the dynamic style in the property
stack. Now, the Update Style command simply takes the topmost dynamic
style and merges the new values above the dynamic style into the dynamic
style and updates all objects that use the style.

To clarify this, a little example. Suppose you have a rectangle with a
green uniform fill. You create a dynamic style called MyStyle containing
the fill pattern and the fill_transform flag. Having two properties is
important as described above. You assign this style to several other
objects as well, all of which are now also filled with green.

Now you want to change the green uniform fill to red. To do this, assign
the red fill by a click into the palette (the fill dialog won't work,
unfortunately, see below) to one of the objects with the style. With only
this object selected, invoke Update Style. All objects using that style
should be updated.

The fill dialog won't work in this example, because the apply button
assigns both the fill_pattern and the fill_transform properties and thus
shadows the dynamic style so that it will automatically be removed. You
can get around this by creating styles containing the fill pattern and at
least one line property.