CSS Variables Reference

CSS Variables Reference

This page documents all CSS custom properties (design tokens) generated by the Aegis theme through theme.json. These variables are available globally and can be used in custom CSS, block styles, and plugin stylesheets.

Color Variables

Primary (Zinc)

--wp--preset--color--primary-25
--wp--preset--color--primary-50
--wp--preset--color--primary-100
--wp--preset--color--primary-200
--wp--preset--color--primary-300
--wp--preset--color--primary-400
--wp--preset--color--primary-500
--wp--preset--color--primary-600
--wp--preset--color--primary-700
--wp--preset--color--primary-800
--wp--preset--color--primary-900
--wp--preset--color--primary-950

Neutral

--wp--preset--color--neutral-0
--wp--preset--color--neutral-50
--wp--preset--color--neutral-100
--wp--preset--color--neutral-200
--wp--preset--color--neutral-300
--wp--preset--color--neutral-400
--wp--preset--color--neutral-500
--wp--preset--color--neutral-600
--wp--preset--color--neutral-700
--wp--preset--color--neutral-800
--wp--preset--color--neutral-900
--wp--preset--color--neutral-950

Success (Green)

--wp--preset--color--success-50
--wp--preset--color--success-100
--wp--preset--color--success-200
--wp--preset--color--success-300
--wp--preset--color--success-400
--wp--preset--color--success-500
--wp--preset--color--success-600
--wp--preset--color--success-700
--wp--preset--color--success-800
--wp--preset--color--success-900
--wp--preset--color--success-950

Warning (Orange)

--wp--preset--color--warning-50
--wp--preset--color--warning-100
--wp--preset--color--warning-200
--wp--preset--color--warning-300
--wp--preset--color--warning-400
--wp--preset--color--warning-500
--wp--preset--color--warning-600
--wp--preset--color--warning-700
--wp--preset--color--warning-800
--wp--preset--color--warning-900
--wp--preset--color--warning-950

Error (Red)

--wp--preset--color--error-50
--wp--preset--color--error-100
--wp--preset--color--error-200
--wp--preset--color--error-300
--wp--preset--color--error-400
--wp--preset--color--error-500
--wp--preset--color--error-600
--wp--preset--color--error-700
--wp--preset--color--error-800
--wp--preset--color--error-900
--wp--preset--color--error-950

Utility Colors

--wp--preset--color--white
--wp--preset--color--black
--wp--preset--color--transparent
--wp--preset--color--current

Font Family Variables

--wp--preset--font-family--lexend
--wp--preset--font-family--lexend-deca
--wp--preset--font-family--jetbrains-mono

Font Size Variables

--wp--preset--font-size--3-xs      /* 8px */
--wp--preset--font-size--2-xs      /* 10px */
--wp--preset--font-size--xs        /* 12px */
--wp--preset--font-size--sm        /* 14px */
--wp--preset--font-size--md        /* 16px */
--wp--preset--font-size--lg        /* clamp(18px, ..., 20px) */
--wp--preset--font-size--xl        /* clamp(20px, ..., 24px) */
--wp--preset--font-size--2-xl      /* clamp(24px, ..., 30px) */
--wp--preset--font-size--3-xl      /* clamp(30px, ..., 36px) */
--wp--preset--font-size--4-xl      /* clamp(36px, ..., 48px) */
--wp--preset--font-size--5-xl      /* clamp(48px, ..., 60px) */
--wp--preset--font-size--6-xl      /* clamp(60px, ..., 72px) */
--wp--preset--font-size--7-xl      /* clamp(72px, ..., 96px) */

Spacing Variables

--wp--preset--spacing--xxxs        /* 0.25rem (4px) */
--wp--preset--spacing--xxs         /* 0.5rem (8px) */
--wp--preset--spacing--xs          /* 0.75rem (12px) */
--wp--preset--spacing--sm          /* 1rem (16px) */
--wp--preset--spacing--md          /* 1.5rem (24px) */
--wp--preset--spacing--lg          /* 2rem (32px) */
--wp--preset--spacing--xl          /* 2.5rem (40px) */
--wp--preset--spacing--2-xl        /* 3rem (48px) */
--wp--preset--spacing--3-xl        /* 4rem (64px) */
--wp--preset--spacing--4-xl        /* 5rem (80px) */
--wp--preset--spacing--xxl         /* 6rem (96px) */

Shadow Variables

--wp--preset--shadow--none
--wp--preset--shadow--xxs          /* 0 1px 2px 0 rgb(0 0 0 / 0.05) */
--wp--preset--shadow--xs           /* 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) */
--wp--preset--shadow--sm           /* 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1) */
--wp--preset--shadow--md           /* 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1) */
--wp--preset--shadow--lg           /* 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1) */
--wp--preset--shadow--xl           /* 0 25px 50px -12px rgb(0 0 0 / 0.25) */
--wp--preset--shadow--xxl          /* 0 35px 60px -15px rgb(0 0 0 / 0.3) */

Gradient Variables

--wp--preset--gradient--primary-to-transparent
--wp--preset--gradient--dark-to-transparent
--wp--preset--gradient--light-to-dark
--wp--preset--gradient--left-to-right
--wp--preset--gradient--right-to-left
--wp--preset--gradient--diagonal
--wp--preset--gradient--sunrise
--wp--preset--gradient--sunset
--wp--preset--gradient--ocean
--wp--preset--gradient--forest
--wp--preset--gradient--lavender
--wp--preset--gradient--rose
--wp--preset--gradient--gold
--wp--preset--gradient--mint
--wp--preset--gradient--berry
--wp--preset--gradient--flame
--wp--preset--gradient--sky
--wp--preset--gradient--dusk
--wp--preset--gradient--earth
--wp--preset--gradient--arctic
--wp--preset--gradient--coral
--wp--preset--gradient--fade-to-white
--wp--preset--gradient--fade-to-black
--wp--preset--gradient--scrim-top
--wp--preset--gradient--scrim-bottom
--wp--preset--gradient--vignette
--wp--preset--gradient--rainbow
--wp--preset--gradient--aurora
--wp--preset--gradient--neon
--wp--preset--gradient--prism
--wp--preset--gradient--twilight

Layout Variables

--wp--style--global--content-size   /* 720px */
--wp--style--global--wide-size      /* 1620px */

Custom Variables

These are custom properties defined in the custom section of theme.json:

Border

--wp--custom--border--radius        /* 6px */
--wp--custom--border--width         /* 1px */
--wp--custom--border--style         /* solid */
--wp--custom--border--color         /* var(--wp--preset--color--neutral-200) */

Typography

--wp--custom--typography--line-height--body       /* 1.6 */
--wp--custom--typography--line-height--heading    /* 1.2 */
--wp--custom--typography--letter-spacing--heading /* -0.02em */

Using Variables in Custom CSS

In the Site Editor

1. Navigate to Appearance → Editor → Styles.
2. Click the Options menu (three dots).
3. Select Additional CSS.
4. Use CSS custom properties in your rules:

.my-custom-class {
    color: var(--wp--preset--color--primary-700);
    font-family: var(--wp--preset--font-family--lexend);
    font-size: var(--wp--preset--font-size--lg);
    padding: var(--wp--preset--spacing--md);
    box-shadow: var(--wp--preset--shadow--sm);
    border-radius: var(--wp--custom--border--radius);
}

In Theme Stylesheets

Block and component stylesheets should always reference design tokens:

/* Good — uses design tokens */
.wp-block-aegis-countdown {
    background: var(--wp--preset--color--neutral-50);
    border: 1px solid var(--wp--preset--color--neutral-200);
    border-radius: var(--wp--custom--border--radius);
    padding: var(--wp--preset--spacing--lg);
}

/* Avoid — hardcoded values */
.wp-block-aegis-countdown {
    background: #fafafa;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 32px;
}

Using tokens ensures components automatically adapt to style variations and dark mode.

Variable Naming Convention

WordPress generates CSS custom property names from theme.json using this pattern:

--wp--preset--{category}--{slug}
--wp--custom--{path}--{property}
--wp--style--{scope}--{property}

Prefix	Source
--wp--preset--color--	settings.color.palette
--wp--preset--font-size--	settings.typography.fontSizes
--wp--preset--font-family--	settings.typography.fontFamilies
--wp--preset--spacing--	settings.spacing.spacingSizes
--wp--preset--shadow--	settings.shadow.presets
--wp--preset--gradient--	settings.color.gradients
--wp--custom--	settings.custom

Related Pages

• color-palette — Color token details and usage.
• typography — Font size and family details.
• spacing — Spacing scale details.
• shadows — Shadow preset details.
• gradients — Gradient preset details.
• borders — Border token details.