Implement Root EM unit for UI components dimensions and render the game at full device's resolution

[Reco1I]

• Requires Tidy Color4, implement lighten and darken functions #581
• Requires Introduce Tailwind v4 default theme colors and shades #582
• Requires Support surrogate pairs in Fonts (UTF-16) #584
• Requires Introduce UIResourceManager & add Nunito font #585
• Requires Implement FontAwesome 7 support #586
• Requires Refactor buffer invalidation functions #587

Introduction

This PR introduces two important changes that each goes in hand with the other:

• Render resolution increased to device's resolution.
• Root EM size unit based on the CSS unit.

Reason

The game was originally planned to run on 2010' devices or even older, due to that the render resolution was set to be at max 1280x720 which at that time was most of a standard.
Nowadays that resolution is not even closer to what most devices use as described in this article.
For devices with a screen with higher resolution than the render resolution the engine will just upscale the game to fill the screen viewport's width.
As an example if we ran the game on a device with a 1920x1080 screen resolution, the game will be upscaled by 1.5x. But 1920x1080 is 16:9 aspect ratio which is no longer the standard even for low-end devices if we try with a 20:9 resolution such as 2400x1080 the game will be scaled by 3.3x.

Old	New

Example with a 2400x1080 device's screen, the old example uses Roboto font meanwhile the new uses Nunito

The rem unit

As a consequence of using 1280x720 as a fixed render resolution the game's UI was designed from the top to the bottom with absolute coordinates and dimensions for its UI components and screens.
Now if we want the game to look the same for every device I decided to implement the CSS's Root EM unit.
The implementation is similar to a regular Android WebView-based browser using DisplayMetrics.density property:

// 16px is the default base font size in CSS's pixels
baseFontSize = 16

// Then we multiply it by the logical density of the display
rootFontSize = baseFontSize * DisplayMetrics.density

// Now we can use n * rootFontSize to get pixels based of a rem unit
2rem = 2 * rootFontSize = 32px // Using a density of 1

Now to use the rem unit we just have to use the extension function .rem after a float number:

myComponent {
    style = {
        width = 4f.rem
    }
}

The style property

Is important to set everything related to dimensions or colors inside the style property which is an evolution of the previous applyTheme. It is most of a handler, it wraps properties that should be reapplied when some events are triggered such as a theme change or a UI scale change (which can eventually be available in the settings menu).

var style: (theme: Theme) -> Unit

There's an important utility for the style property which is the plus operator. It will allow us to chain styles of UI components for cases when we want to add some style without overriding the component's current style:

// Buttons already have an style defined if we override it, properties like colorVariant 
// or sizeVariant will not work. So if we want to update only one property of it we should
// use the += operator.
button {
    style += {
        color = Colors.Red500
    }
}

Important changes on UI components

colorVariant

UI controls such as UIButton or UIBadge can now vary between Primary, Secondary and Tertiary color variants:

Example missing Tertiary variant

sizeVariant

UI controls such as UIButton or UIBadge can now vary between Small, Medium and Large size variants:

Removal of relativeSizeAxes

The property relativeSizeAxes was removed and replaced by an extension function:

Before:

component {
    relativeSizeAxes = Axes.X
    width = 0.5f 
}

Now:

component {
    width = 0.5f.pct
}

UIText.wrapText

UIText now supports text wrapping by word break method.

UIText.fontSize

Font sizes will now be defined by constants of FontSize in rem units:

XS = 0.75rem
SM = 0.875rem
MD = 1rem
LG = 1.125rem
XL = 1.25rem

What's left ?

As a consequence of using full resolution old UI elements and screens got outdated. So a full redesign of the following scenes is needed before any further step:

• Main scene (Addressed on Rework MainScene #592 )
• Song select (Addressed on Rework SongSelect #573 )
• Scoring scene
• Loading scenes (Addressed on Implement new loading scene #591 )
• GameScene (HUD elements needs to be scaled to preserve layout)

Components based on UI v2 are already updated to follow the new dimension rules.