UI Toolkit Styling Workflow¶

Overview¶

The core styling of the tablet system is seperated into two places.

USS Style Sheets
Scriptable Object Themes

Colour Schema¶

I would reccommend defining the colour schemes and values outside of Unity. This is for two reasons

The same colours need to be applied on both the USS Core Fields and the SO Style Fields. Having a central reference instead of constantly swapping between the two will save time.
Colour references may be lost while the system is still in it's experimental phase. The style setup may change, new fields may be added, or old fields will be replaced with new ones

USS Style Sheets¶

The Style Sheets can be edited in an IDE or through the UI Builder. There is a central Core style sheet that controls the global variables in the entire system. This includes fonts, margins, sizing, and colouring for elements.

Aside from that for now, each seperate panel then has it's own style sheet for panel specific elements. This could be centralised down the line when you have a lot of crossover ie. overlay-core, tablet-core etc. but for now each has it's own file.

You need to make sure the Documents are assigned both Core and their specific Style Sheet to work correctly.

Scriptable Object Styles¶

Scriptable Object Styles are used on all the of the 3D Elements that are placed on top of the tablet such as the buttons, dropdowns and text fields. These are created through the asset menu and swapped in and out in the style field in all of the prefabs.

A FontType enum is declared on the objects to define the chosen font. This is then passed through a switch statement on the GetFont function in the Scriptable Object.

The styling is split up into seperate sections:

Content Colours¶

Content Colour - Colouring of the Text and Icons in the Elements

Content Hovered Colour

Fonts¶

Primary Light

Primary Regular

Primary Bold

Secondary Light

Secondary Regular

Secondary Bold

Button Base Colours¶

Top Layer Colour

Middle Layer Colour

Middle Border Colour

Bottom Layer Colour

Button Interaction Colours¶

Top Layer Hovered Colour

Middle Layer Hover Colour

Bottom Layer Selected Colour

Text Field Colours¶

Text Field Colour

Text Field Border Colour

Tween Scales¶

Disabled Scale - Middle Border Scale for when button is disabled

Unhovered Scale - Base Middle Border Scale when not hovered

Hovered Scale

Tween Params¶

Tween Duration

Tween Ease

3D Button Icons¶

The 3D Elements right now use unity materials that have the 2D Icon PNG as its texture map. This will probably want to be changed / replaced down the line with 3D Models currently used in the AVA Tablet or SVG Icons.

UI Toolkit Sprites¶

To assign sprites in UI Toolkit elements, in UI Builder you want to modify the background image of the visual elements. You will see this in the background section and you'll see the dropdown option for Texture 2D, Sprite etc. In here you assign the material you want and it will set it to the background.

For example to replace the avatar academy text with the official logo, you would just remove the text to be blank, and set it's background image to be the logo texture / sprite.