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.

1. Components should re-use primary, secondary, and tertiary theme elements as much as possible.
2. 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.
3. 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.
4. Color variables are defined using rgb in order to support rgba-dependent utility classes in the Tailwind CSS framework (ex .opacity-75).