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
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.--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.--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/
The "primary" color is the color that is used most frequently throughout the system. It utilizes the following css variables:
The "secondary" color is the second most used color throughout the system. It utilizes the following css variables:
The "accent" color is a contrasting color and is intended to capture attention. It utilizes the following css variables:
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.
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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
base color:--ee-color-black
WCAG compliant text color:--ee-text-on-black
base color:--ee-color-white
WCAG compliant text color:--ee-text-on-white
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.
base color:--ee-color-grey-1
WCAG compliant text color: --ee-text-on-grey-1
base color:--ee-color-grey-2
WCAG compliant text color: --ee-text-on-grey-2
base color:--ee-color-grey-3
WCAG compliant text color: --ee-text-on-grey-3
base color:--ee-color-grey-4
WCAG compliant text color: --ee-text-on-grey-4
base color:--ee-color-grey-5
WCAG compliant text color: --ee-text-on-grey-5
base color:--ee-color-grey-6
WCAG compliant text color: --ee-text-on-grey-6
base color:--ee-color-grey-7
WCAG compliant text color: --ee-text-on-grey-7
base color:--ee-color-grey-8
WCAG compliant text color: --ee-text-on-grey-8
base color:--ee-color-grey-9
WCAG compliant text color: --ee-text-on-grey-9
base color:--ee-color-grey-10
WCAG compliant text color: --ee-text-on-grey-10
base color:--ee-color-grey-11
WCAG compliant text color: --ee-text-on-grey-11
base color:--ee-color-grey-12
WCAG compliant text color: --ee-text-on-grey-12
base color:--ee-color-grey-13
WCAG compliant text color: --ee-text-on-grey-13
base color:--ee-color-grey-14
WCAG compliant text color: --ee-text-on-grey-14
base color:--ee-color-grey-15
WCAG compliant text color: --ee-text-on-grey-15
These are status colors for various Event Espresso model entities. The following schema is used for the class names:
.ee-status-color-{status_code}
.ee-status-background-color-{status_code}
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
.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.
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.
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.
--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.
--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.
--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.
--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.
--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.
--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.
--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.
--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.
--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!
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
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
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
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