Custom Properties
Main Colors
Colors do not follow a meticulous theme, mainly because there are only two variants for background, foreground, and accent colors, respectively.
--lfp-color-bg-main: main background color used for the body and other large pieces of layout--lfp-color-bg-aside: secondary background color used for sidebars and minor features (details, menus etc.)--lfp-color-fg-primary: main foreground color used for most text--lfp-color-fg-secondary: slight offset color used for secondary text and menu items--lfp-color-fg-accent-1: accent color used for stand-out elements, links and buttons--lfp-color-fg-accent-2: second accent color commonly used for hover or focus highlights and other state changes--lfp-color-border-1: subtle border color--lfp-color-border-2: more prominent line color
Alerts use a small set of colors that may be useful for creating other custom elements that rely on the same or a similar meaning than any of the alert types.
--lfp-color-note: an informative blue--lfp-color-tip: an inquiring green--lfp-color-warning: an alerting red--lfp-color-caution: a considerate orange--lfp-color-important: a commanding purple
Fonts
--lfp-font-base: the main body font, used for header and navigation--lfp-font-prose: font applied to.lfp-page-content, the container for a page's main content--lfp-font-sm: smaller font size for secondary content, relative to its surrounding text size--lfp-font-md: main font size, used as base for the entire theme--lfp-font-lg--lfp-font-xl--lfp-font-2xl--lfp-font-3xl--lfp-font-4xl--lfp-font-5xl
By default, only system fonts are used. Either include locally hosted fonts via passthrough copy or add a link element to a remotely hosted font. Font sizes from xl to 5xl are designed with Utopia.
Borders
--lfp-border-1: used to separate two things that are hierarchically similar, e.g., menu items--lfp-border-2: used to separate very different things, e.g., an absolutely positioned menu and the surrounding main content--lfp-border-radius-sm: a subtle curvature, used extensively in the default theme--lfp-border-radius-md: a more prominent curvature for distinct elements
Spacing
Spacing follows a simple doubling scheme, starting at 2px all the way through 64px.
--lfp-spacing-2xs--lfp-spacing-xs--lfp-spacing-sm--lfp-spacing-md--lfp-spacing-lg--lfp-spacing-xl--lfp-inline-margin: describes the inline margin for main body content, set to accomodate for the space the default side navigation elements take up on larger screen sizes--lfp-min-inline-margin: the minimum inline margin for main body content, equalling the minimum inline size for sidebar navigation elements
Pagefind
LFP Docs uses Pagefind as static search engine. Pagefind's UI components exposes a series of custom properties, of which the following get customize to fit the default theme (refer to the documentation for Pagefind's components for more information on usage and customization):
--pf-text--pf-text-secondary--pf-text-muted--pf-background--pf-border--pf-border-focus--pf-skeleton--pf-skeleton-shine--pf-hover--pf-mark--pf-outline-focus--pf-font
Syntax Highlighting
Prism is used as syntax highlighting framework, through the official Eleventy syntax highlighting plugin. The themes in use (Atom's One Light and One Dark) expose the following custom properties:
--lfp-mono-1--lfp-mono-2--lfp-mono-3--lfp-hue-1--lfp-hue-2--lfp-hue-3--lfp-hue-4--lfp-hue-5--lfp-hue-5-2--lfp-hue-6--lfp-syntax-bg--lfp-syntax-gutter--lfp-syntax-guide--lfp-syntax-selection-color--lfp-syntax-cursor-line