Theme

The Theme can be configured within a CMS to give content creators the flexibility of making site-wide changes without a code change. To learn more about how theming works, visit the Theming section of these docs.

Configurations

Field	Description
slug	The slug is used to pull the theme from the CMS. (/theme)
fonts	The fonts to use in the site
lightModeColors	The site color palette when in light mode
darkModeColors	The site color palette when in dark mode
typography	Text and heading configurations
layout	Used with SEO and Open Graph

Theme fonts

Content creators can assign three fonts to the site: a heading font, a mono-spaced font, and a body font.

For a list of font tokens and where they are used, visit the theming section of these docs.

Field	Description
fontHeading	The font to use in Heading elements
fontMono	A mono-spaced font for <code> rendering
fontBody	The font to use for text elements

Font configurations

Field	Description	Values
source	The location of the font	Google Fonts Local source
fontFamily	The name of the font family to use

Theme Colors

Color selections within the CMS map to design tokens in use across the site. Both light mode and dark mode color palettes are used.

For a complete list of tokens and where they are used, visit the theming section of these docs.

Typography

Typography configurations allow content creators to set values such as text size and weight for headings and body text. These are used in addition to base tailwindcss text and font classes. They are also combined for custom responsive heading variants. Not all text used in the site can be affected by CMS configurations.

For a complete list of text classes and where they are used, visit the theming typography section of these docs.

Field	Description	Values
bodyFontSize	Body text size	0.75rem 0.875rem 1rem 1.25rem 1.5rem
bodyFontWeight	Body font weight	100 200 300 400 500 600 700 800 900
headingFontWeight	Heading font weight	100 200 300 400 500 600 700 800 900
headingFontSizeBase	Base Heading text size	1rem 1.25rem 1.5rem 1.875rem 2.25rem 3rem 3.75rem
headingFontSizeXl	XL Heading text size	1rem 1.25rem 1.5rem 1.875rem 2.25rem 3rem 3.75rem
headingFontSize2Xl	2XL Heading text size	1rem 1.25rem 1.5rem 1.875rem 2.25rem 3rem 3.75rem
headingFontSize4Xl	4XL Heading text size	1rem 1.25rem 1.5rem 1.875rem 2.25rem 3rem 3.75rem
headingFontSize6Xl	6XL Heading text size	1rem 1.25rem 1.5rem 1.875rem 2.25rem 3rem 3.75rem

Layout

Layout configurations are applied to buttons. Content creators can adjust the border radius or size of buttons through CMS configurations. There are three button sizes that can be customized through the CMS: small, base, and large.

For a complete list of tokens and where they are used, visit the theming section of these docs.

Field	Description	Values
buttonRadius	Button radius - the roundness of button corners	0rem 0.25rem 0.375rem 0.75rem 9999px
buttonPaddingSmall	Small button inner padding or whitespace	see below
buttonPaddingBase	Default (base) button inner padding or whitespace	see below
buttonPaddingLarge	Large button inner padding or whitespace	see below

Padding Configurations

Padding is set for the X axis (horizontal) and the Y axis (vertical) separately.

Field	Description	Values
X	Horizontal padding	0rem 0.5rem 1rem 1.5rem 2rem 2.5rem 3rem
Y	Vertical padding	0rem 0.5rem 1rem 1.5rem 2rem 2.5rem 3rem

How it works

1. Within a CMS, the theme schemas contain data fields that map to the High Velocity base theme design tokens and style variables.
2. The High Velocity web application contains an environement variable THEME_PROVIDER that tells it to either use the default theme provided or one from a CMS vendor.
3. The High Velocity CMS package (hv-cms) fetches the theme overrides from the CMS designated in THEME_PROVIDER.
4. The High Velocity theme package (hv-theme) normalizes the fetched theme data to generate the tailwindcss theme.
5. A theme cookie is set to designated the active theme.