Style

CSS Variables

From plugin v1.37.13

CSS Variables

MisePress styling is driven entirely by CSS custom properties. Override them in your theme, child theme, or Appearance → Customize → Additional CSS. Every value can also be set via MisePress → Settings → Frontend Appearance / Layout & Spacing (those settings ultimately write to the same variables).

Core color & surface tokens

Variable	Purpose
`--mp-color-bg`	Card and panel background
`--mp-color-fg`	Main text
`--mp-color-muted`	Secondary text
`--mp-color-accent`	Buttons, highlights, prices
`--mp-color-accent-soft`	Soft accent surfaces
`--mp-color-border`	Dividers and outlines
`--mp-card-bg`	Archive card background
`--mp-card-accent`	Archive card accent
`--mp-filter-accent`	Filter highlight

Geometry tokens

Variable	Purpose
`--mp-radius`	Main border-radius
`--mp-radius-sm`	Small border-radius

Elevation tokens

Variable	Purpose
`--mp-shadow-xs`	Subtle hover lift
`--mp-shadow-sm`	Card resting elevation
`--mp-shadow`	Default card elevation
`--mp-shadow-md`	Hover or selected state
`--mp-shadow-lg`	Modals, popovers

Focus / accessibility

Variable	Purpose
`--mp-focus-ring`	Brand-tinted focus outline applied to all interactive elements

prefers-reduced-motion users automatically receive a near-zero-duration override across MisePress UI animations.

Example overrides

:root {
  --mp-color-accent:      #b35d1f;
  --mp-color-accent-soft: rgba(179,93,31,.08);
  --mp-radius:            14px;
  --mp-shadow:            0 8px 24px -12px rgba(0,0,0,.18);
}

With Automatic.css

:root {
  --mp-color-accent:      var(--action);
  --mp-color-accent-soft: var(--action-light-trans-90);
  --mp-color-bg:          var(--base-ultra-light);
  --mp-color-fg:          var(--base-ultra-dark);
  --mp-color-muted:       var(--base);
  --mp-color-border:      var(--base-light);
  --mp-radius:            var(--radius-m);
}

See ACSS for full integration notes.

Product context

Need the high-level overview? Start with MisePress Recipes, the WordPress recipe plugin.