Appearance

Font Configuration (Dictionary)

When a key is of type FontConfiguration, for example the TitleFontConfiguration of the Base Component, it allows you to configure the font used to display the title of this component. Here are the keys used in this configuration.

Key Type Possible values Explanation Is Required
Style String - Lets you use a font configuration style defined in the Font styles
Name String - The full name of the font. You have to use the PostScript Name for a match with the macOS fonts book. For example "Avenir-Light", or "HelveticaNeue-ThinItalic".
Note: if no match if found, Octory will use the standard system font.
It is easy to find the PostScript name, simply open Font Book.app, select the font and do a View/ Show Font Info or ⌘I.
TextAlignment String Left, Center, Right, Justify Choose the text alignment
Note: if this key is omitted, the Left value is applied.
Size Number (Integer or Real) - The point size of the font you want to use (or the system standard if no font name is specified)
SystemFontWeight String Bold, Black, Heavy, Light, Medium, Regular, Semibold, Thin, UltraLight When you don't specify a Name key for the font, Octory will use the standard system font. You can then specify which weight to use. You can refer to Apple's documentation for more info about those weights.
Color Color - Specify here the text color

Remarks

Single string style

When using a parent style font you don't want to modify, you can replace all the dictionary with a single string. Just like that:


    <key>Font</key>
    <string>Title</string>
    
Size and Name

If you specify the Name key with no Size key, Octory will use the regular size. If you specify the Size key with no Name key,the system standard font will be used. You can also specify only the SystemFontWeight. Doing so, regular size and standard font will then be used. Note that specifying the SystemFontWeight key when the Name key is also specified is irrelevant, and the SystemFontWeight key will be ignored.


Color (Dictionary)

To fully adopt macOS Dark mode starting from Mojave, you have to give two colors when specifying a custom color. It's up to you to check that both colors are consistent in the mode they are destined to. Do note that you can specify the same color for both dark and light mode.

Key Type Explanation Is Required
Style String Let you use a color style defined in the Color styles
DarkMode String The dark mode color in hexadecimal code, starting with the # character. ⚠️
(if Style not specified)
AlphaDark Number (Integer or Real) You can specify here the alpha for the dark mode color, if necessary. Between 0 and 1
LightMode String The light mode color in hexadecimal code, starting with the # character. ⚠️
(if Style not specified)
AlphaLight Number (Integer or Real) You can specify here the alpha for the light mode color, if necessary. Between 0 and 1

Remarks

Single string style

When using a parent style font you don't want to modify, you can replace all the dictionary with a single string. Just like that:


    <key>Color</key>
    <string>Main</string>
    
Examples and alpha

Choose #FF70FA as value to have a pink color, and #438BFF to have a blue one. Note that you can also specify the alpha in the hexadecimal code of the color, adding two more digits to the string. For example, #FF70FA7F has an alpha of 0.5 since 7F equals 127 (= 255/2) in hexadecimal code.


Margins (Dictionary)

The Margins key allows a component to add some space from its edges. Note that the border, if any is set, will be drawn after the given space.

Key Type Explanation Is Required
Top Number (Integer or Real) Top margin
Bottom Number (Integer or Real) Bottom margin
Right Number (Integer or Real) Right margin
Left Number (Integer or Real) Left margin

Border (Dictionary)

The Border key lets you add a border to a Component.

Key Type Possible values Explanation Is Required
Edge String Top, Bottom The component's edge where to add the border ⚠️
Color Color - The color of the border
WidthPercent Number 0...1 By default, a border will take 90% of the container's width in which the component exists. You can override this percentage here, by specifying a number between 0 and 1. For example to add a smaller separation between components.
Height Number (Integer or Real) - The height of the border, in points.

Size (Dictionary)

Store a width and height

Key Type Is Required
Height Number ⚠️
Width Number ⚠️