A description of the new color-handling in Antetype.

What is new?

In previous versions of Antetype every color-property (border color, background color, etc.) simply stored the color value. That is if two properties did use the same color-value (#ff0000 for example), they were distinct in Antetype.

This made it difficult to use a set of color consistently, and made the hand-over to the development error prone (normally the first step building the user interface is define the colors and later on reference them). Therefor we added a central color-list to Antetype.

Now every document contains a list of colors. These colors are referenced by the color-properties. In the example before, we would have a color named "Error" with the color-value of #ff0000 (red). Both the background of one cell and the border of another cell would reference this color.

Changing a color now updates all references of it. In the above example you would like to change the color used to indicate a error-condition to be slightly darker: Just update your "error"-color and everywhere it is used, the new color is ussd immediately.

Of course, you are free to used individual colors, like you did before. Those are marked with an "*" in the GUI and are only in one property.

Color Popovers

We added a list of the project colors to every color, property:

fill color

Here for example the popover to change the fill-color. We added a new list of defined colors to the left ❶ of the usual color picker: ❷:

color elements

To use a predefined color, just select it in the list. In this example we have two colors "Default" and our "error"-color. Every Antetype-document contains at least the "Default"-color. This one is a little bit special: it is not possible to delete the "Default"-color, nor can you change its name. But you are free to change its color-value.

Change a color

To overwrite a color, use the controls in the color picker (❷) on the right side of the popover. Once you have made your changes, note the the asterisk (*) besides the name of the color which was active while you changed the color:

overwritten color

Now you have more options, depending what you want to do:

  • If you only want to change the color in this particular property: leave it with an asterisk. (If you changed the color-property in a widget instance, you will note the enabled "update"-control, you can store overwritten colors in the widget.

  • In case you are not satisfied with your new color, you can use the "Revert"- Button, which resets the color-value to the value of the color

  • You can update the color: making the choosen color value the new color of the defined color

  • Create a new color: Enter a descriptive name and you defined a new color.

Delete a color

In case you do not need the color anymore: use the delete-button. All usages of the color will be replaced by an overwritten color using the color-value of the deleted color.

Color Inspector

Apart from the popover you can see (and manipulate) colors defined in a document in the Color-Inspector:

color inspector

You have the usual functionality, like changing the name (by double click/return), delete (using ⌫-key). You can also copy/paste the selected colors (this is useful for adding colors to another document, but see below…​).

Merge Colors

The Color Inspector also let you merge colors. For example you have used the "error"-color (used in error-conditions), but also a "red"-color used in the same way. This is the use-case for "Merge Color". If you select the "red"-color and drag it above the "error"-color. Now every property which used the "red"-color now uses the "error"-color. (This includes overwritten colors, which keep their color value, but are now overwritten colors of the merged color).

Using colors in different documents

Just like widgets or resources, Antetype remembers if you copy a color into another document. This way it is possible to use the same colors in different documents.

There are two ways to copy Colors into another document:

  • Explicit: using the color-inspector: Select the colors you like to copy and Use "Edit>Copy ⌘C", switch to the other document and use "Edit>Paste ⌘V".

  • Implicit: copy elements referencing the color: Select the elements on the screen, "Edit>Copy ⌘C", switch to the other document and use "Edit>Paste ⌘V".

Now you can use the colors in the other document.

Updating colors used in different documents

If you use copy/paste either explicit or implicit, Antetype notes if the colors on the clipboard are used in target document and are changed (either different color-value, or different color name). In this case the following alert pops up:

changed colors alert

You now have the following choices:

  • "Cancel" does nothing, no colors are changed, nothing is inserted into the document

  • "Keep Colors": if colors are different, use the colors of the target colors. Use this option if you want to use the new elements, but do not want to change the project colors.

  • "Overwrite Color": overwrite the colors in the document with the colors on the clipboard. Use this option to update the color to a newer version.

Special case: same name/color value

Normally we use the invisible reference to a color to link colors in different documents. That is: an internal identifier is used, just like for widgets and resources. But if the target document already contains a color with the same name and value, it used and no new color is added to the document.

An Example: you have two document with the color "red" and color-value #ff0000. If you now copy a cell referencing this color into the other document, the already defined color "red" is used.

Creating a color overview

To ease the handover to the developers, we added a new command which creates a screen with all colors:

create color overview menu

Like the "Create Widget Overview" a new Screen is created listing all colors defined in the document:

color overview standard

It displays the color name (in bold) and the Hex- and CSS rgb(a)-notation of the color.

Note

The list of generated colors is static.

This means: it does not change if colors are added/deleted/changed. In this case just generate a new Color Overview to include your latest changes.

Customize the color overview

Since the Color-overview is just a normal Antetype-Screen you can easily customize it. For each color an instance of the "Spec - Color"-widget is used. To customize just adjust one entry of it:

customize color overview step1

(here we changed the fonts, size of the color swatch and added some cells for adding notes).

And update the "Color Spec"-Widget:

customize color overview step2

and all other entries are changed as well. Since the "Spec - Color" is just a widget it is used if again if you generate another Color Overview.

Web Viewer

spec inspector

The Spec-inspector in the Web Viewer now displays the color using three values:

  • the name of the color

  • hexadecimal notation

  • rgb(a)-notation

Updating older documents

For each different color value used in a document a new color is added, every usage now points to this color. That means if you used the #ff0000 in different cells/widget/properties, every usage now points to the same color with the name and value "#ff0000". Use the color-inspector to clean-up and give proper names to the colors afterwards.

Known Issues

  • We use CSS-variables for the colors, but the generated CSS may contain more colors than defined in the document.

  • Big documents may need a lot of time to update