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