Theme Page
Naming site theme elements
Site color and element class names need to support web-specific usability concerns like color contrast ratios. To support this need, the "primary" CSS theme color is not linked to a brand guide's "primary" color. Sometimes brand guides name colors based on the organization's Logo, print needs, or other palettes. The terms primary, secondary, and tertiary should match how commonly a color or element is used on the site. Some examples:
- primary color = most common color on site
- secondary color = second most common color on site
- tertiary color = third most common color on site
- primary button = most common button on site
- secondary button = second most common button on site
- tertiary button = third most common button on site
For performance reasons, it is important to keep the site theme as minimal as possible. The CSS for sitewide theme elements is inlined into every page on the site. Each additional item slows down the performance of every page just a little bit.
This needs to be balanced against the need to have consistent rendering of every element on the site. Here are some guidelines to achieve the ideal balance.
- Components should re-use primary, secondary, and tertiary theme elements as much as possible.
- Colors or buttons beyond these use cases are often component-specific. If that is the case, define/configure them in the component(s) that use them.
- If a site needs additional sitewide elements (examples: speciality theme colors or a fourth sitewide button type), those theme items can be include in the extended site theme file.
- Color variables are defined using rgb in order to support rgba-dependent utility classes in the Tailwind CSS framework (ex .opacity-75).