CSS Variables Reference

Every colour, corner, font size and shadow in the portal comes from a CSS custom property whose name starts with --wap-. Change a variable and every part of the portal that uses it follows, in light and dark mode. This page lists them all, with their defaults and where they come from.

Where to set them#

Use WooCommerce > Account Portal > Appearance > Advanced CSS. It is printed last, after the plugin’s own styles, your theme style and the AI brand theme, so it wins over all of them. Pick the selector by what you want to change:

Selector	Use it for
.wap-portal-body	Both modes
.wap-portal-body.wap-mode-light	Light mode only
.wap-portal-body.wap-mode-dark	Dark mode only

The <body> of the portal always has wap-portal-body and wap-mode-light or wap-mode-dark. With the Auto mode, a small script sets the class to the mode the device uses before the page is drawn, so the two mode selectors cover Auto too.

/* Both modes: squarer corners. */
.wap-portal-body {
	--wap-radius-md: 6px;
	--wap-radius-lg: 8px;
	--wap-btn-radius: 6px;
}

/* Dark mode only: a deeper page background. */
.wap-portal-body.wap-mode-dark {
	--wap-bg: #0b0d12;
	--wap-card-bg: #141821;
}

The order the CSS is printed#

1. assets/css/portal.css: the layout tokens and the built-in light and dark colours.
2. The variables from your settings, on :root.
3. The Theme style (Clean Light, Deep Dark or Full Custom) and the colours picked in Fine-tune colours.
4. The button radius, and the phone layouts of the orders and downloads tables.
5. The Brand theme with AI CSS, when that option is chosen.
6. Advanced CSS.

From your settings#

The plugin prints these on :root from Appearance. Set them in CSS only if you need a value the settings cannot give.

Variable	Default	Comes from
--wap-primary	#3D3BF3	Primary Color. Active menu item, primary buttons, focus rings, login brand panel
--wap-primary-rgb	61,59,243	The primary colour as R, G, B, for see-through tints
--wap-primary-light	Primary mixed 35% with white	Active menu text in dark mode
--wap-primary-dark	Primary mixed 25% with black	Active menu text in light mode
--wap-secondary	#22C55E	Secondary Color. Links in content, badges, accents
--wap-secondary-rgb	34,197,94	The secondary colour as R, G, B
--wap-secondary-light	Secondary mixed 35% with white	Not used by the portal’s CSS; there for your own rules
--wap-secondary-dark	Secondary mixed 25% with black	Not used by the portal’s CSS; there for your own rules
--wap-logo-max-h	80px	Logo max height (24 to 240 px). The tallest the logo may be in the sidebar; the login brand panel shows it up to twice this height, and the small logo on the phone login screen stays at 48px or less (except in the minimal login layout)
--wap-btn-radius	999px	Button Style: Rounded 999px, Slight 8px, Square 0px, or Custom with your Radius. Set on .wap-portal-body

Layout and type#

Defined on :root in portal.css, the same in both modes.

Variable	Default	Used for
--wap-sidebar-w	280px	Sidebar width. 240px on screens from 769 to 1024px wide, 88px with the icon rail menu
--wap-radius-sm	8px	Small corners: inputs, menu items
--wap-radius-md	12px	Cards
--wap-radius-lg	16px	Large panels
--wap-radius-full	100px	Pills and round shapes
--wap-ease	cubic-bezier(0.2, 0, 0, 1)	Animation easing
--wap-dur-s / --wap-dur-m / --wap-dur-l	150ms / 250ms / 400ms	Animation lengths
--wap-elev-1 / --wap-elev-2	Two-layer shadows	Raised elements
--wap-font	The device’s system font	Every text in the portal. No web font is loaded
--wap-fs-xs	0.75rem	Smallest text
--wap-fs-sm	0.875rem	Small text, meta lines
--wap-fs-base	1rem	Body text
--wap-fs-md	1.125rem	Card headings
--wap-fs-lg	1.375rem	Section headings
--wap-fs-xl	1.75rem	Page headings
--wap-fs-2xl	2.25rem	The largest headings

To use your own font, load it in your theme (self-hosted fonts are best for GDPR) and set:

:root {
	--wap-font: "Inter", system-ui, sans-serif;
}

Colours per mode#

Defined in portal.css for each mode. Clean Light and Deep Dark use a few slightly different values for their own mode, and Fine-tune colours > Pick colours overrides --wap-surface, --wap-surface-2, --wap-bg, --wap-on-s, --wap-on-s2, --wap-nav-hover, --wap-nav-active, --wap-nav-color, --wap-card-bg and --wap-outline.

Variable	Light	Dark	Used for
--wap-bg	#f4f4fb	#0f0f13	Page background (main content area)
--wap-surface	#ffffff	#1a1a22	Sidebar and top bar
--wap-surface-2	#f0f0f8	#22222e	Raised areas: hover rows, switches, tabs
--wap-surface-3	#e6e6f2	#2a2a3a	Highest areas: chips, table headers
--wap-card-bg	#ffffff	#1f1f2a	Cards, tables, forms
--wap-card-br	rgba(0,0,0,.07)	rgba(255,255,255,.06)	Card borders
--wap-outline	rgba(0,0,0,.09)	rgba(255,255,255,.10)	Dividers and borders
--wap-outline-v	rgba(0,0,0,.04)	rgba(255,255,255,.05)	Very faint dividers
--wap-on-bg	#111118	#e8e8f0	Headings and main text
--wap-on-s	#2a2a3a	#cacacf	Menu text and body text
--wap-on-s2	#606070	#9898a0	Secondary text
--wap-on-s3	#6b6b7a	#8a8a95	Hints and meta text
--wap-placeholder	#6b6b7a	#9a9aa6	Input placeholder text
--wap-link	Secondary, 60% mixed with black	--wap-secondary	Links in content
--wap-error	#c62828	#ff6b6b	Error messages, problem steps
--wap-success	#15803d	#4ade80	Success messages
--wap-nav-hover	Primary at 8%	Primary at 12%	Menu item hover background
--wap-nav-active	Primary at 12%	Primary at 18%	Active menu item background, badges
--wap-nav-color	--wap-primary-dark	--wap-primary-light	Active menu item text and icon
--wap-input-bg	#f8f8ff	#1e1e2a	Input background
--wap-input-br	rgba(0,0,0,.18)	rgba(255,255,255,.15)	Input border
--wap-scrollbar	rgba(0,0,0,.15)	rgba(255,255,255,.15)	Scrollbar thumb

Optional variables#

These are not set by default: the portal uses the fallback shown until you (or the Brand theme with AI) set them.

Variable	Fallback	Used for
--wap-on-primary	#fff	Text and icons on the brand colour (buttons, login panel)
--wap-menu-bg	--wap-surface	Every menu style: sidebar, top tabs, icon rail, phone top bar, bottom tab bar, floating dock
--wap-avatar-bg	--wap-primary	The customer’s initial circle (menu and profile card)
--wap-avatar-fg	--wap-on-primary	The initial on that circle
--wap-announce-bg	--wap-primary	The announcement bar in the brand colour style
--wap-announce-fg	--wap-on-primary	Text and icons on that bar
--wap-progress	--wap-primary	Order progress: finished steps and the line between them; the Getting started bar
--wap-warning	#f59e0b	Tint of the amber announcement bar
--wap-dock-radius	24px	Corners of the floating dock menu
--wap-dock-shadow	A soft two-layer shadow	Shadow under the floating dock
--wap-tooltip-bg	--wap-on-bg	Page-name tooltip on the icon rail
--wap-tooltip-fg	--wap-bg	Tooltip text

.wap-portal-body {
	--wap-menu-bg: #10172a;
	--wap-on-primary: #111111; /* dark text on a light brand colour */
}

Keep text readable: aim for at least 4.5:1 contrast between a text colour and the background it sits on.

Icon size#

Icons are inline SVGs sized by --wap-ic (20px when nothing sets it). The portal sets it per place, for example 20px for menu icons and 36px for the icons on empty pages. Set it on the element that holds the icon:

.wap-portal-body .wap-nav-icon {
	--wap-ic: 22px;
}

Use the variables in your own CSS#

Build your own elements, such as a custom Dashboard widget or a custom page, with the variables and they switch with the mode:

.wap-portal-body .my-notice {
	padding: 16px 18px;
	border: 1px solid var(--wap-card-br);
	border-radius: var(--wap-radius-md);
	background: var(--wap-card-bg);
	color: var(--wap-on-s);
	font-size: var(--wap-fs-sm);
}

Variables not to set#

--wap-ann-bg and --wap-ann-fg are worked out per announcement style from the variables above, and --wap-start-side and --wap-end-side handle right-to-left languages. Change the public variables instead.

The Account Nav Widget’s drawer, which can appear on any page of your site, has its own variables: --wap-nw-primary, --wap-nw-secondary, --wap-nw-radius, --wap-nw-drawer-w (360px) and --wap-nw-icon-sz. The portal’s variables on this page do not apply to it.

Related#

• Overriding Templates
• Adding Your Own Dashboard Widgets and Tiles
• Customising Order Progress Steps and Tracking
• Code Snippets