# Introduction

With the arrival of the WordPress Gutenberg Editor, Event Espresso has been transitioning to a presentation layer powered by JavaScript and React. Part of this transition is the development of a new CSS foundation that utilizes theming and CSS variables for applying styles to HTML elements. This document is a demonstration of this new system and utilizes styles from the dynamically generated 2019 Default Theme

## Theme Colors

Themes define four main colors that are used to dynamically generate a large number of CSS variables for styling HTML components. CSS variables are combined into semantically useful CSS classes that can be used to apply multiple styles at once to an element. All colors have dynamically generated alternates that meet or exceed Web Content Accessibility Guidelines (WCAG) AA or AAA color contrast requirements that follow the utilize following naming schema:

- `--ee-color-{ color }` - primarily intended for setting the background color of an element
- `--ee-text-on-{ color }` - A WCAG compliant text color for the above.
- high-contrast shades ie: darker than the default for lighter themes or lighter for dark themes
- `--ee-color-{ color }-super-high-contrast` - An much higher contrast shade of the default color
- `--ee-text-on-{ color }-super-high-contrast` - A WCAG compliant text color for the above.
- `--ee-color-{ color }-high-contrast` - A higher contrast shade of the default color
- `--ee-text-on-{ color }-high-contrast` - A WCAG compliant text color for the above.
- low-contrast shades ie: lighter than the default for lighter themes or darker for dark themes
- `--ee-color-{ color }-low-contrast` - A lower contrast shade of the default color
- `--ee-text-on-{ color }-low-contrast` - A WCAG compliant text color for the above.
- `--ee-color-{ color }-super-low-contrast` - A much lower contrast shade of the default color
- `--ee-text-on-{ color }-super-low-contrast` - A WCAG compliant text color for the above.

That said, not all colors work with each other, so be careful when applying colors to text that are not the designated contrast alternative for the background the text is on. Be sure to check your color combinations with tools like: http://colorsafe.co/ or https://webaim.org/resources/contrastchecker/

### Primary Theme Color

#### Primary background color
+ WCAG compliant text color

The "primary" color is the color that is used most frequently throughout the system. It utilizes the following css variables:

### Secondary Theme Color

#### Secondary background color
+ WCAG compliant text color

The "secondary" color is the second most used color throughout the system. It utilizes the following css variables:

### Accent Theme Color

#### Accent background color
+ WCAG compliant text color

The "accent" color is a contrasting color and is intended to capture attention. It utilizes the following css variables:

### Default Theme Color

#### Default background color
+ WCAG compliant text color

The "default" color group is used for most elements and utilizes the following css variables:

The default theme style also uses the `--ee-background-color` CSS variable for setting the default background color for containers, including the background for this entire page.

## Base Colors

Themes can also define a full spectrum of colors that will be used to dynamically generate five pairs of CSS variables using the same naming schema as the theme colors above. So the defined color plus super high contrast, high contrast, low contrast, and super low contrast alternatives:

On light themes the high contrast alternative will be darker in comparison to the theme's background color. On dark themes it will be reversed, so the high contrast alternative will now be lighter in shade, but still higher in contrast in comparison to the background color.

#### Magenta

base color:
`--ee-color-magenta`

WCAG compliant text color:
`--ee-text-on-magenta`

super-high-contrast:
`--ee-color-magenta-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-magenta-super-high-contrast`

high-contrast:
`--ee-color-magenta-high-contrast`

WCAG compliant text color:
`--ee-text-on-magenta-high-contrast`

low-contrast:
`--ee-color-magenta-low-contrast`

WCAG compliant text color:
`--ee-text-on-magenta-low-contrast`

super-low-contrast:
`--ee-color-magenta-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-magenta-super-low-contrast`

#### Red

base color:
`--ee-color-red`

WCAG compliant text color:
`--ee-text-on-red`

super-high-contrast:
`--ee-color-red-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-red-super-high-contrast`

high-contrast:
`--ee-color-red-high-contrast`

WCAG compliant text color:
`--ee-text-on-red-high-contrast`

low-contrast:
`--ee-color-red-low-contrast`

WCAG compliant text color:
`--ee-text-on-red-low-contrast`

super-low-contrast:
`--ee-color-red-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-red-super-low-contrast`

#### Hot Pink

base color:
`--ee-color-hot-pink`

WCAG compliant text color:
`--ee-text-on-hot-pink`

super-high-contrast:
`--ee-color-hot-pink-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-hot-pink-super-high-contrast`

high-contrast:
`--ee-color-hot-pink-high-contrast`

WCAG compliant text color:
`--ee-text-on-hot-pink-high-contrast`

low-contrast:
`--ee-color-hot-pink-low-contrast`

WCAG compliant text color:
`--ee-text-on-hot-pink-low-contrast`

super-low-contrast:
`--ee-color-hot-pink-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-hot-pink-super-low-contrast`

#### Pink

base color:
`--ee-color-pink`

WCAG compliant text color:
`--ee-text-on-pink`

super-high-contrast:
`--ee-color-pink-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-pink-super-high-contrast`

high-contrast:
`--ee-color-pink-high-contrast`

WCAG compliant text color:
`--ee-text-on-pink-high-contrast`

low-contrast:
`--ee-color-pink-low-contrast`

WCAG compliant text color:
`--ee-text-on-pink-low-contrast`

super-low-contrast:
`--ee-color-pink-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-pink-super-low-contrast`

#### Coral

base color:
`--ee-color-coral`

WCAG compliant text color:
`--ee-text-on-coral`

super-high-contrast:
`--ee-color-coral-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-coral-super-high-contrast`

high-contrast:
`--ee-color-coral-high-contrast`

WCAG compliant text color:
`--ee-text-on-coral-high-contrast`

low-contrast:
`--ee-color-coral-low-contrast`

WCAG compliant text color:
`--ee-text-on-coral-low-contrast`

super-low-contrast:
`--ee-color-coral-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-coral-super-low-contrast`

#### Orange

base color:
`--ee-color-orange`

WCAG compliant text color:
`--ee-text-on-orange`

super-high-contrast:
`--ee-color-orange-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-orange-super-high-contrast`

high-contrast:
`--ee-color-orange-high-contrast`

WCAG compliant text color:
`--ee-text-on-orange-high-contrast`

low-contrast:
`--ee-color-orange-low-contrast`

WCAG compliant text color:
`--ee-text-on-orange-low-contrast`

super-low-contrast:
`--ee-color-orange-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-orange-super-low-contrast`

#### Gold

base color:
`--ee-color-gold`

WCAG compliant text color:
`--ee-text-on-gold`

super-high-contrast:
`--ee-color-gold-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-gold-super-high-contrast`

high-contrast:
`--ee-color-gold-high-contrast`

WCAG compliant text color:
`--ee-text-on-gold-high-contrast`

low-contrast:
`--ee-color-gold-low-contrast`

WCAG compliant text color:
`--ee-text-on-gold-low-contrast`

super-low-contrast:
`--ee-color-gold-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-gold-super-low-contrast`

#### Yellow

base color:
`--ee-color-yellow`

WCAG compliant text color:
`--ee-text-on-yellow`

super-high-contrast:
`--ee-color-yellow-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-yellow-super-high-contrast`

high-contrast:
`--ee-color-yellow-high-contrast`

WCAG compliant text color:
`--ee-text-on-yellow-high-contrast`

low-contrast:
`--ee-color-yellow-low-contrast`

WCAG compliant text color:
`--ee-text-on-yellow-low-contrast`

super-low-contrast:
`--ee-color-yellow-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-yellow-super-low-contrast`

#### Yellow Green

base color:
`--ee-color-yellow-green`

WCAG compliant text color:
`--ee-text-on-yellow-green`

super-high-contrast:
`--ee-color-yellow-green-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-yellow-green-super-high-contrast`

high-contrast:
`--ee-color-yellow-green-high-contrast`

WCAG compliant text color:
`--ee-text-on-yellow-green-high-contrast`

low-contrast:
`--ee-color-yellow-green-low-contrast`

WCAG compliant text color:
`--ee-text-on-yellow-green-low-contrast`

super-low-contrast:
`--ee-color-yellow-green-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-yellow-green-super-low-contrast`

#### Light Green

base color:
`--ee-color-light-green`

WCAG compliant text color:
`--ee-text-on-light-green`

super-high-contrast:
`--ee-color-light-green-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-light-green-super-high-contrast`

high-contrast:
`--ee-color-light-green-high-contrast`

WCAG compliant text color:
`--ee-text-on-light-green-high-contrast`

low-contrast:
`--ee-color-light-green-low-contrast`

WCAG compliant text color:
`--ee-text-on-light-green-low-contrast`

super-low-contrast:
`--ee-color-light-green-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-light-green-super-low-contrast`

#### Green

base color:
`--ee-color-green`

WCAG compliant text color:
`--ee-text-on-green`

super-high-contrast:
`--ee-color-green-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-green-super-high-contrast`

high-contrast:
`--ee-color-green-high-contrast`

WCAG compliant text color:
`--ee-text-on-green-high-contrast`

low-contrast:
`--ee-color-green-low-contrast`

WCAG compliant text color:
`--ee-text-on-green-low-contrast`

super-low-contrast:
`--ee-color-green-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-green-super-low-contrast`

#### Bright Green

base color:
`--ee-color-bright-green`

WCAG compliant text color:
`--ee-text-on-bright-green`

super-high-contrast:
`--ee-color-bright-green-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-bright-green-super-high-contrast`

high-contrast:
`--ee-color-bright-green-high-contrast`

WCAG compliant text color:
`--ee-text-on-bright-green-high-contrast`

low-contrast:
`--ee-color-bright-green-low-contrast`

WCAG compliant text color:
`--ee-text-on-bright-green-low-contrast`

super-low-contrast:
`--ee-color-bright-green-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-bright-green-super-low-contrast`

#### Dark Green

base color:
`--ee-color-dark-green`

WCAG compliant text color:
`--ee-text-on-dark-green`

super-high-contrast:
`--ee-color-dark-green-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-dark-green-super-high-contrast`

high-contrast:
`--ee-color-dark-green-high-contrast`

WCAG compliant text color:
`--ee-text-on-dark-green-high-contrast`

low-contrast:
`--ee-color-dark-green-low-contrast`

WCAG compliant text color:
`--ee-text-on-dark-green-low-contrast`

super-low-contrast:
`--ee-color-dark-green-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-dark-green-super-low-contrast`

#### Blue Green

base color:
`--ee-color-blue-green`

WCAG compliant text color:
`--ee-text-on-blue-green`

super-high-contrast:
`--ee-color-blue-green-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-blue-green-super-high-contrast`

high-contrast:
`--ee-color-blue-green-high-contrast`

WCAG compliant text color:
`--ee-text-on-blue-green-high-contrast`

low-contrast:
`--ee-color-blue-green-low-contrast`

WCAG compliant text color:
`--ee-text-on-blue-green-low-contrast`

super-low-contrast:
`--ee-color-blue-green-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-blue-green-super-low-contrast`

#### Blue

base color:
`--ee-color-blue`

WCAG compliant text color:
`--ee-text-on-blue`

super-high-contrast:
`--ee-color-blue-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-blue-super-high-contrast`

high-contrast:
`--ee-color-blue-high-contrast`

WCAG compliant text color:
`--ee-text-on-blue-high-contrast`

low-contrast:
`--ee-color-blue-low-contrast`

WCAG compliant text color:
`--ee-text-on-blue-low-contrast`

super-low-contrast:
`--ee-color-blue-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-blue-super-low-contrast`

#### Dark Blue

base color:
`--ee-color-dark-blue`

WCAG compliant text color:
`--ee-text-on-dark-blue`

super-high-contrast:
`--ee-color-dark-blue-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-dark-blue-super-high-contrast`

high-contrast:
`--ee-color-dark-blue-high-contrast`

WCAG compliant text color:
`--ee-text-on-dark-blue-high-contrast`

low-contrast:
`--ee-color-dark-blue-low-contrast`

WCAG compliant text color:
`--ee-text-on-dark-blue-low-contrast`

super-low-contrast:
`--ee-color-dark-blue-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-dark-blue-super-low-contrast`

#### Bright Blue

base color:
`--ee-color-bright-blue`

WCAG compliant text color:
`--ee-text-on-bright-blue`

super-high-contrast:
`--ee-color-bright-blue-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-bright-blue-super-high-contrast`

high-contrast:
`--ee-color-bright-blue-high-contrast`

WCAG compliant text color:
`--ee-text-on-bright-blue-high-contrast`

low-contrast:
`--ee-color-bright-blue-low-contrast`

WCAG compliant text color:
`--ee-text-on-bright-blue-low-contrast`

super-low-contrast:
`--ee-color-bright-blue-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-bright-blue-super-low-contrast`

#### Light Blue

base color:
`--ee-color-light-blue`

WCAG compliant text color:
`--ee-text-on-light-blue`

super-high-contrast:
`--ee-color-light-blue-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-light-blue-super-high-contrast`

high-contrast:
`--ee-color-light-blue-high-contrast`

WCAG compliant text color:
`--ee-text-on-light-blue-high-contrast`

low-contrast:
`--ee-color-light-blue-low-contrast`

WCAG compliant text color:
`--ee-text-on-light-blue-low-contrast`

super-low-contrast:
`--ee-color-light-blue-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-light-blue-super-low-contrast`

#### Violet

base color:
`--ee-color-violet`

WCAG compliant text color:
`--ee-text-on-violet`

super-high-contrast:
`--ee-color-violet-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-violet-super-high-contrast`

high-contrast:
`--ee-color-violet-high-contrast`

WCAG compliant text color:
`--ee-text-on-violet-high-contrast`

low-contrast:
`--ee-color-violet-low-contrast`

WCAG compliant text color:
`--ee-text-on-violet-low-contrast`

super-low-contrast:
`--ee-color-violet-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-violet-super-low-contrast`

#### Purple

base color:
`--ee-color-purple`

WCAG compliant text color:
`--ee-text-on-purple`

super-high-contrast:
`--ee-color-purple-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-purple-super-high-contrast`

high-contrast:
`--ee-color-purple-high-contrast`

WCAG compliant text color:
`--ee-text-on-purple-high-contrast`

low-contrast:
`--ee-color-purple-low-contrast`

WCAG compliant text color:
`--ee-text-on-purple-low-contrast`

super-low-contrast:
`--ee-color-purple-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-purple-super-low-contrast`

#### Indigo

base color:
`--ee-color-indigo`

WCAG compliant text color:
`--ee-text-on-indigo`

super-high-contrast:
`--ee-color-indigo-super-high-contrast`

WCAG compliant text color:
`--ee-text-on-indigo-super-high-contrast`

high-contrast:
`--ee-color-indigo-high-contrast`

WCAG compliant text color:
`--ee-text-on-indigo-high-contrast`

low-contrast:
`--ee-color-indigo-low-contrast`

WCAG compliant text color:
`--ee-text-on-indigo-low-contrast`

super-low-contrast:
`--ee-color-indigo-super-low-contrast`

WCAG compliant text color:
`--ee-text-on-indigo-super-low-contrast`

#### Black

base color:
`--ee-color-black`

WCAG compliant text color:
`--ee-text-on-black`

#### White

base color:
`--ee-color-white`

WCAG compliant text color:
`--ee-text-on-white`

## Greys

Themes also dynamically generate 15 levels of grey scale colors using the black and white colors defined by the theme as the two extremes. Greys only have one corresponding text color and no high or low contrast alternatives. For dark themes the grey scale will be reversed, so `--ee-color-grey-1` will be the lightest shade, since it is intended to have the highest contrast compared to the theme's background color.

#### Grey 1

base color:
`--ee-color-grey-1`

WCAG compliant text color:
`--ee-text-on-grey-1`

#### Grey 2

base color:
`--ee-color-grey-2`

WCAG compliant text color:
`--ee-text-on-grey-2`

#### Grey 3

base color:
`--ee-color-grey-3`

WCAG compliant text color:
`--ee-text-on-grey-3`

#### Grey 4

base color:
`--ee-color-grey-4`

WCAG compliant text color:
`--ee-text-on-grey-4`

#### Grey 5

base color:
`--ee-color-grey-5`

WCAG compliant text color:
`--ee-text-on-grey-5`

#### Grey 6

base color:
`--ee-color-grey-6`

WCAG compliant text color:
`--ee-text-on-grey-6`

#### Grey 7

base color:
`--ee-color-grey-7`

WCAG compliant text color:
`--ee-text-on-grey-7`

#### Grey 8

base color:
`--ee-color-grey-8`

WCAG compliant text color:
`--ee-text-on-grey-8`

#### Grey 9

base color:
`--ee-color-grey-9`

WCAG compliant text color:
`--ee-text-on-grey-9`

#### Grey 10

base color:
`--ee-color-grey-10`

WCAG compliant text color:
`--ee-text-on-grey-10`

#### Grey 11

base color:
`--ee-color-grey-11`

WCAG compliant text color:
`--ee-text-on-grey-11`

#### Grey 12

base color:
`--ee-color-grey-12`

WCAG compliant text color:
`--ee-text-on-grey-12`

#### Grey 13

base color:
`--ee-color-grey-13`

WCAG compliant text color:
`--ee-text-on-grey-13`

#### Grey 14

base color:
`--ee-color-grey-14`

WCAG compliant text color:
`--ee-text-on-grey-14`

#### Grey 15

base color:
`--ee-color-grey-15`

WCAG compliant text color:
`--ee-text-on-grey-15`

## Entity Status Colors

These are status colors for various Event Espresso model entities. The following schema is used for the class names:

- `.ee-status-color-{status_code}`
  The text color will be set for the given status code.
- `.ee-status-background-color-{status_code}`
  The background color will be set for the given status code and the text color will be set to a WCAG compliant contrast

### Datetime Status Colors

#### Datetime Sold Out (DTS)

`.ee-status-color-DTS`
sets the text color to the corresponding color for an entity with a status code of "DTS" just like the heading above this container.

`.ee-status-background-color-DTS`
sets the background color to the corresponding color for an entity with a status code of "DTS" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Datetime Active (DTA)

`.ee-status-color-DTA`
sets the text color to the corresponding color for an entity with a status code of "DTA" just like the heading above this container.

`.ee-status-background-color-DTA`
sets the background color to the corresponding color for an entity with a status code of "DTA" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Datetime Upcoming (DTU)

`.ee-status-color-DTU`
sets the text color to the corresponding color for an entity with a status code of "DTU" just like the heading above this container.

`.ee-status-background-color-DTU`
sets the background color to the corresponding color for an entity with a status code of "DTU" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Datetime Inactive (DTI)

`.ee-status-color-DTI`
sets the text color to the corresponding color for an entity with a status code of "DTI" just like the heading above this container.

`.ee-status-background-color-DTI`
sets the background color to the corresponding color for an entity with a status code of "DTI" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Datetime Postponed (DTP)

`.ee-status-color-DTP`
sets the text color to the corresponding color for an entity with a status code of "DTP" just like the heading above this container.

`.ee-status-background-color-DTP`
sets the background color to the corresponding color for an entity with a status code of "DTP" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Datetime Cancelled (DTC)

`.ee-status-color-DTC`
sets the text color to the corresponding color for an entity with a status code of "DTC" just like the heading above this container.

`.ee-status-background-color-DTC`
sets the background color to the corresponding color for an entity with a status code of "DTC" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Datetime Trashed (DTT)

`.ee-status-color-DTT`
sets the text color to the corresponding color for an entity with a status code of "DTT" just like the heading above this container.

`.ee-status-background-color-DTT`
sets the background color to the corresponding color for an entity with a status code of "DTT" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

### Payment Status Colors

#### Payment Approved (PAP)

`.ee-status-color-PAP`
sets the text color to the corresponding color for an entity with a status code of "PAP" just like the heading above this container.

`.ee-status-background-color-PAP`
sets the background color to the corresponding color for an entity with a status code of "PAP" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Payment Pending (PPN)

`.ee-status-color-PPN`
sets the text color to the corresponding color for an entity with a status code of "PPN" just like the heading above this container.

`.ee-status-background-color-PPN`
sets the background color to the corresponding color for an entity with a status code of "PPN" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Payment Declined (PDC)

`.ee-status-color-PDC`
sets the text color to the corresponding color for an entity with a status code of "PDC" just like the heading above this container.

`.ee-status-background-color-PDC`
sets the background color to the corresponding color for an entity with a status code of "PDC" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Payment Cancelled (PCN)

`.ee-status-color-PCN`
sets the text color to the corresponding color for an entity with a status code of "PCN" just like the heading above this container.

`.ee-status-background-color-PCN`
sets the background color to the corresponding color for an entity with a status code of "PCN" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Payment Failed (PFL)

`.ee-status-color-PFL`
sets the text color to the corresponding color for an entity with a status code of "PFL" just like the heading above this container.

`.ee-status-background-color-PFL`
sets the background color to the corresponding color for an entity with a status code of "PFL" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

### Registration Status Colors

#### Registration Approved (RAP)

`.ee-status-color-RAP`
sets the text color to the corresponding color for an entity with a status code of "RAP" just like the heading above this container.

`.ee-status-background-color-RAP`
sets the background color to the corresponding color for an entity with a status code of "RAP" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Registration Pending (RPP)

`.ee-status-color-RPP`
sets the text color to the corresponding color for an entity with a status code of "RPP" just like the heading above this container.

`.ee-status-background-color-RPP`
sets the background color to the corresponding color for an entity with a status code of "RPP" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Registration Wait List (RWL)

`.ee-status-color-RWL`
sets the text color to the corresponding color for an entity with a status code of "RWL" just like the heading above this container.

`.ee-status-background-color-RWL`
sets the background color to the corresponding color for an entity with a status code of "RWL" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Registration Incomplete (RIC)

`.ee-status-color-RIC`
sets the text color to the corresponding color for an entity with a status code of "RIC" just like the heading above this container.

`.ee-status-background-color-RIC`
sets the background color to the corresponding color for an entity with a status code of "RIC" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Registration Not Approved (RNA)

`.ee-status-color-RNA`
sets the text color to the corresponding color for an entity with a status code of "RNA" just like the heading above this container.

`.ee-status-background-color-RNA`
sets the background color to the corresponding color for an entity with a status code of "RNA" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Registration Declined (RDC)

`.ee-status-color-RDC`
sets the text color to the corresponding color for an entity with a status code of "RDC" just like the heading above this container.

`.ee-status-background-color-RDC`
sets the background color to the corresponding color for an entity with a status code of "RDC" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Registration Cancelled (RCN)

`.ee-status-color-RCN`
sets the text color to the corresponding color for an entity with a status code of "RCN" just like the heading above this container.

`.ee-status-background-color-RCN`
sets the background color to the corresponding color for an entity with a status code of "RCN" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

### Ticket Status Colors

#### Ticket Sold Out (TKS)

`.ee-status-color-TKS`
sets the text color to the corresponding color for an entity with a status code of "TKS" just like the heading above this container.

`.ee-status-background-color-TKS`
sets the background color to the corresponding color for an entity with a status code of "TKS" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Ticket On Sale (TKO)

`.ee-status-color-TKO`
sets the text color to the corresponding color for an entity with a status code of "TKO" just like the heading above this container.

`.ee-status-background-color-TKO`
sets the background color to the corresponding color for an entity with a status code of "TKO" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Ticket Pending (TKP)

`.ee-status-color-TKP`
sets the text color to the corresponding color for an entity with a status code of "TKP" just like the heading above this container.

`.ee-status-background-color-TKP`
sets the background color to the corresponding color for an entity with a status code of "TKP" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Ticket Expired (TKE)

`.ee-status-color-TKE`
sets the text color to the corresponding color for an entity with a status code of "TKE" just like the heading above this container.

`.ee-status-background-color-TKE`
sets the background color to the corresponding color for an entity with a status code of "TKE" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Ticket Archived (TKA)

`.ee-status-color-TKA`
sets the text color to the corresponding color for an entity with a status code of "TKA" just like the heading above this container.

`.ee-status-background-color-TKA`
sets the background color to the corresponding color for an entity with a status code of "TKA" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

### Transaction Status Colors

#### Transaction Overpaid (TOP)

`.ee-status-color-TOP`
sets the text color to the corresponding color for an entity with a status code of "TOP" just like the heading above this container.

`.ee-status-background-color-TOP`
sets the background color to the corresponding color for an entity with a status code of "TOP" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Transaction Complete (TCM)

`.ee-status-color-TCM`
sets the text color to the corresponding color for an entity with a status code of "TCM" just like the heading above this container.

`.ee-status-background-color-TCM`
sets the background color to the corresponding color for an entity with a status code of "TCM" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Transaction Incomplete (TIN)

`.ee-status-color-TIN`
sets the text color to the corresponding color for an entity with a status code of "TIN" just like the heading above this container.

`.ee-status-background-color-TIN`
sets the background color to the corresponding color for an entity with a status code of "TIN" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Transaction Abandoned (TAB)

`.ee-status-color-TAB`
sets the text color to the corresponding color for an entity with a status code of "TAB" just like the heading above this container.

`.ee-status-background-color-TAB`
sets the background color to the corresponding color for an entity with a status code of "TAB" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

#### Transaction Failed (TFL)

`.ee-status-color-TFL`
sets the text color to the corresponding color for an entity with a status code of "TFL" just like the heading above this container.

`.ee-status-background-color-TFL`
sets the background color to the corresponding color for an entity with a status code of "TFL" and sets the text color to a WCAG compliant contrast for this color, just like this container and text you are reading now.

## Buttons

This demonstrates the basic button styles and how they are impacted by various modifier css classes.

Note: WordPress styles are not loaded for this demo, so buttons will appear differently in the WordPress context.

#### Primary Button

#### Secondary Button

#### Accent Button

#### Default Button

## 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.

#### `.ee-focus-priority-1`

The highest priority heading on the screen that users should focus on first. Ideally there should not be more than one of these on the page.

Typically the page title.

Because we are using the "extreme" font size for this class, we can also use a "super low contrast" text color without negatively affecting accessibility.

##### CSS variables used:

- `--ee-font-size-extreme`
- `--ee-default-text-color-super-low-contrast`

The approach will not be easy.

#### `.ee-focus-priority-2`

A very important heading that users should focus on second. Ideally there should not be more than a few of these on the page.

This class uses the "huge" font size and a "low contrast" text color.

##### CSS variables used:

- `--ee-font-size-huge`
- `--ee-default-text-color-low-contrast`

The approach will not be easy. You are required to maneuver straight down

#### `.ee-focus-priority-3`

A fairly important heading that users should focus on after the more important headings. There is no problem using several of these on a page as long as you don't overdo it.

Although using the "bigger" font size, this class uses the "default" text color.

##### CSS variables used:

- `--ee-font-size-bigger`
- `--ee-default-text-color`

The approach will not be easy. You are required to maneuver straight down this trench and skim the surface to this point. The target area is only two

#### `.ee-focus-priority-4`

A somewhat important heading that users should focus on before reading default text. There can be lots of these on a page.

##### CSS variables used:

- `--ee-font-size-big`
- `--ee-default-text-color`

The approach will not be easy. You are required to maneuver straight down this trench and skim the surface to this point. The target area is only two meters wide. It’s a small thermal exhaust port, right below the main port. The shaft leads directly to the

#### `.ee-focus-priority-5`

The default priority that should make up the majority of text on a page, ie: the default text.

##### CSS variables used:

- `--ee-font-size-default`
- `--ee-default-text-color`

The approach will not be easy. You are required to maneuver straight down this trench and skim the surface to this point. The target area is only two meters wide. It’s a small thermal exhaust port, right below the main port. The shaft leads directly to the reactor system. A precise hit will start a chain reaction which should destroy the station. Only a precise hit will set up a chain reaction. The shaft is

#### `.ee-focus-priority-6`

Anything that is of slightly lesser importance than the default priority text. These can be used liberally throughout a page to support the default text.

To increase the accessibility of this text, this class uses a "high contrast" text color.

##### CSS variables used:

- `--ee-font-size-small`
- `--ee-default-text-color-high-contrast`

The approach will not be easy. You are required to maneuver straight down this trench and skim the surface to this point. The target area is only two meters wide. It’s a small thermal exhaust port, right below the main port. The shaft leads directly to the reactor system. A precise hit will start a chain reaction which should destroy the station. Only a precise hit will set up a chain reaction. The shaft is ray-shielded, so you’ll have to use proton torpedoes. That’s impossible, even for a computer. It’s not impossible. I used to bull’s-eye womp rats in my T-sixteen back home. They’re not much

#### `.ee-focus-priority-7`

Anything that is of far lesser importance than the default priority text. These should be used sparingly throughout a page.

To increase the accessibility of this text, this class uses a "high contrast" text color.

##### CSS variables used:

- `--ee-font-size-smaller`
- `--ee-default-text-color-high-contrast`

The approach will not be easy. You are required to maneuver straight down this trench and skim the surface to this point. The target area is only two meters wide. It’s a small thermal exhaust port, right below the main port. The shaft leads directly to the reactor system. A precise hit will start a chain reaction which should destroy the station. Only a precise hit will set up a chain reaction. The shaft is ray-shielded, so you’ll have to use proton torpedoes. That’s impossible, even for a computer. It’s not impossible. I used to bull’s-eye womp rats in my T-sixteen back home. They’re not much bigger than two meters. Man your ships! And may the Force be with you!

#### `.ee-focus-priority-8`

Extremely anecdotal text of little importance. Should be used very sparingly throughout a page for accessibility reasons.

To increase the accessibility of this text, this class uses a "super high contrast" text color, and also has a tiny bit of extra spacing between the letters and words.

##### CSS variables used:

- `--ee-font-size-tiny`
- `--ee-default-text-color-super-high-contrast`

The approach will not be easy. You are required to maneuver straight down this trench and skim the surface to this point. The target area is only two meters wide. It’s a small thermal exhaust port, right below the main port. The shaft leads directly to the reactor system. A precise hit will start a chain reaction which should destroy the station. Only a precise hit will set up a chain reaction. The shaft is ray-shielded, so you’ll have to use proton torpedoes. That’s impossible, even for a computer. It’s not impossible. I used to bull’s-eye womp rats in my T-sixteen back home. They’re not much bigger than two meters. Man your ships! And may the Force be with you!

#### `.ee-focus-priority-9`

Uh-oh... the fine print! This is where you hide all of the really nasty legal stuff about hidden fees or lack of privacy that you don't want users to know about but are still legally obliged to inform them of.

LOLZ! just joking.

Try not to use this for anything important though because it can cause accessibility issues for users with impaired vision.

To increase the accessibility of this text, this class uses a "super high contrast" text color, with lots of extra spacing between the letters and words.

##### CSS variables used:

- `--ee-font-size-micro`
- `--ee-default-text-color-super-high-contrast`

The approach will not be easy. You are required to maneuver straight down this trench and skim the surface to this point. The target area is only two meters wide. It’s a small thermal exhaust port, right below the main port. The shaft leads directly to the reactor system. A precise hit will start a chain reaction which should destroy the station. Only a precise hit will set up a chain reaction. The shaft is ray-shielded, so you’ll have to use proton torpedoes. That’s impossible, even for a computer. It’s not impossible. I used to bull’s-eye womp rats in my T-sixteen back home. They’re not much bigger than two meters. Man your ships! And may the Force be with you!

## 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:

#### `--ee-margin-size-micro`

#### `--ee-margin-size-tiny`

#### `--ee-margin-size-smaller`

#### `--ee-margin-size-small`

#### `--ee-margin-size-default`

#### `--ee-margin-size-big`

#### `--ee-margin-size-bigger`

#### `--ee-margin-size-huge`

#### `--ee-margin-size-extreme`

## 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:

#### `--ee-padding-size-micro`

#### `--ee-padding-size-tiny`

#### `--ee-padding-size-smaller`

#### `--ee-padding-size-small`

#### `--ee-padding-size-default`

#### `--ee-padding-size-big`

#### `--ee-padding-size-bigger`

#### `--ee-padding-size-huge`

#### `--ee-padding-size-extreme`

## 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:

#### `--ee-border-radius-none`

#### `--ee-border-radius-small`

#### `--ee-border-radius-default`

#### `--ee-border-radius-big`

#### `--ee-border-radius-bigger`

#### `--ee-border-radius-huge`

#### `--ee-border-radius-full`

## Shadows

Themes have no capacity to control shadow sizes for text or boxes, so if you want to get fancy... just do it yourself ;p
But just because we're so nice (and getting paid) we have provided four sizes of box shadow and three sizes of text shadow you can use via the following CSS variables:

#### `--ee-box-shadow-tiny`

sorry... no `--ee-text-shadow-tiny` size

#### `--ee-box-shadow-small`

this text has `--ee-text-shadow-small` applied to it

#### `--ee-box-shadow-default`

this text has `--ee-text-shadow-default` applied to it

#### `--ee-box-shadow-big`

this text has `--ee-text-shadow-big` applied to it