Font-Sizes

Having text that meets WCAG requirements does not just mean using contrasting colors, as there is also an interaction with the size of the font. Smaller fonts require colors that have a higher contrast compared to the background color they are placed on. Although not a technical requirement, line-height and spacing can also affect readability, especially with smaller font sizes.

To make it as easy as possible to maintain accessibility as well as a harmonious design aesthetic, we have combined several CSS properties together using the semantically relevant "focus-priority" class name. The "focus-priority" classes range in value from .ee-focus-priority-1 to .ee-focus-priority-9 and represent the visual hierarchy that you wish to impart on your application. Elements with a higher "focus-priority" are ones that a user should see and read first and therefore use larger font sizes, but can get away with using lower contrast colors. Elements with a lower "focus-priority" are ones that a user should see or read after other elements and utilize smaller font sizes, but higher contrast colors to remain accessible. This of course is subjective and these styles can be applied solely to adjust appearance as desired.

{{#each fontSizes}} {{{this}}} {{/each}}

Margin Sizes

Each theme can specify a marginDefault property which gets applied to a set of default margin sizes to dynamically generate a total of 9 margin sizes. If themes require more control, they can also define all of the marginSizeModifiers separately. The results are the following CSS variables:

{{#each marginSizes}} {{{this}}} {{/each}}

Padding Sizes

Each theme can specify a paddingDefault property which gets applied to a set of default padding sizes to dynamically generate a total of 9 padding sizes. If themes require more control, they can also define all of the paddingSizeModifiers separately. The results are the following CSS variables:

{{#each paddingSizes}} {{{this}}} {{/each}}

Border Radius-Sizes

Each theme can specify a radiusDefault property which gets applied to a set of default radius sizes to dynamically generate a total of 5 radius sizes. If themes require more control, they can also define all of the radiusSizeModifiers separately. The results are the following CSS variables:

{{#each radiusSizes}} {{{this}}} {{/each}}