CSS Variables - Chipmunk Theme Docs

CSS Custom Properties (variables) are great for quickly changing certain parts of the styling without any complex coding. The whole theme has been rewritten recently to facilitate this functionality. To change any of the supported variables, go to Appearance → Customizer → Visuals and put this code into the Custom CSS field:

body {
  --chipmunk--typography--font-size: 1.8rem !important;
}

The complete list of supported CSS variable can be found below. The list will be updated continuously whenever the theme changes so make sure to check it every once in a while to keep yourself up to date.

Colors

// Default colors
--chipmunk--color--accent: #5b5c89;
--chipmunk--color--black: #1d1d1d;
--chipmunk--color--gray-dark: #444;
--chipmunk--color--gray: #777;
--chipmunk--color--gray-light: #cdcdcd;
--chipmunk--color--gray-lighter: #e6e6e6;
--chipmunk--color--gray-lightest: #ededed;
--chipmunk--color--white: #fafafa;

// Status colors
--chipmunk--color--status-success: #4f8a10;
--chipmunk--color--status-warning: #9f6000;
--chipmunk--color--status-info: #369bf8;
--chipmunk--color--status-error: #f74444;

// Customizable colors
--chipmunk--color--primary: var(--chipmunk--color--accent);
--chipmunk--color--link: var(--chipmunk--color--accent);
--chipmunk--color--background: var(--chipmunk--color--gray-lightest);
--chipmunk--color--section: var(--chipmunk--color--white);

Typography

// Fonts
--chipmunk--font--system: -apple-system, BlinkMacSystemFont, 'Segoe UI', roboto, oxygen, ubuntu, cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--chipmunk--font--mono: menlo, consolas, monaco, monospace;

// Typography
--chipmunk--typography--font-family: var(--chipmunk--font--system);
--chipmunk--typography--font-size: 1.6rem;
--chipmunk--typography--line-height: 1.618;

// Headings
--chipmunk--typography--scale: 1.25;
--chipmunk--typography--small: var(--chipmunk--typography--font-size);
--chipmunk--typography--normal: var(--chipmunk--typography--small) * var(--chipmunk--typography--scale);
--chipmunk--typography--medium: var(--chipmunk--typography--normal) * var(--chipmunk--typography--scale);
--chipmunk--typography--large: var(--chipmunk--typography--medium) * var(--chipmunk--typography--scale);
--chipmunk--typography--xlarge: var(--chipmunk--typography--large) * var(--chipmunk--typography--scale);
--chipmunk--typography--huge: var(--chipmunk--typography--xlarge) * var(--chipmunk--typography--scale);
--chipmunk--typography--heading-font-family: var(--chipmunk--font--system);

// Content
--chipmunk--typography--content-size: 1.25em;

Layout

// Container
--chipmunk--layout--container-width: 110rem;
--chipmunk--layout--container-gutter: clamp(2.4rem, 5vw, 7.2rem);

// Columns
--chipmunk--layout--column-gutter: calc(var(--chipmunk--layout--container-width) * 0.025);

// Content
--chipmunk--layout--content-width: 8;

// Popup
--chipmunk--layout--popup-width: 80rem;

// Tiles
--chipmunk--layout--tile-padding: 1rem;

Buttons

--chipmunk--button--border-width: 1px;
--chipmunk--button--border-radius: 100vmin;
--chipmunk--button--font-size: 0.875em;

Miscellaneous

// Transitions
--chipmunk--transition-duration: 0.25s;

// Spacers
--chipmunk--spacer: 1.25em;

// Borders
--chipmunk--border-opacity: 0.075;
--chipmunk--border-radius: 0.5rem;

// Logo
--chipmunk--logo-height: 4rem;