Template:UI/button/styles.css

/* TemplateStyles for {{UI/button}}.
 *
 * Theme tokens via `var(--labki-*, literal)`. The fallback literal
 * preserves rendering on wikis whose MW version's TemplateStyles
 * sanitizer rejects var() in a given property. On MW 1.44+ the var()
 * resolves to whatever the platform's labki-tweeki.css (or per-wiki
 * MediaWiki:Tweeki.css override) has bound to the token.
 *
 * Note on properties: MW 1.44.5 / css-sanitizer 5.5.0 accepts var()
 * in `background`, `color`, and `border` shorthand, but rejects it
 * in `border-radius`, `box-shadow`, and most numeric properties
 * (padding, margin, transition, transform). Geometry stays literal
 * for that reason — those values rarely change with theme anyway.
 */

.wiki-button {
	display: inline-block;
	padding: 10px 22px;
	background: var(--labki-accent, #2774AE);
	color: #ffffff;
	border: 1px solid transparent;
	border-radius: 6px;
	font-weight: 600;
	text-decoration: none !important;
	transition: filter 0.15s ease;
}

.wiki-button:hover,
.wiki-button:focus {
	filter: brightness(1.08);
	text-decoration: none !important;
}

.wiki-button-secondary {
	background: var(--labki-bg-subtle, #f4f6f8);
	color: var(--labki-text, #2c2c2c);
	border: 1px solid var(--labki-border, #d8dde3);
}

/* Container for laying out multiple buttons in a row — typically used
   on landing pages with a CTA pair. Layout-only; relies on at least
   one nested .wiki-button to bring this stylesheet into the page. */
.wiki-button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 20px 0;
}