New in v5.4.0 Before v5.4.0, theme developers have to mix wikitext syntax with CSS syntax when writing stylesheets to intergrate Tiddlywiki color palettes and theme settings. With the introduction of Core CSS Variables in v5.4.0, theme developers can intergrate most Tiddlywiki palettes with vanilla CSS.

Getting Tiddlywiki palette colors

Tiddlywiki's custom properties for colors are prefixed --tpc-. Before v5.4.0, theme developers have to use the following wikitext to get a color value of a palette:

.tag {
	background: <<colour tag-background>>;
}

Since v5.4.0, theme developers can use the following CSS to get the palette color:

.tag {
	background: var(--tp-color-tag-background);
}

Getting and processing Tiddlywiki CSS settings

See Core CSS Variables for the available CSS variables. Before v5.4.0, theme developers have to use macros with filters to get and process theme settings:

.tc-sidebar-header {
	padding: 14px;
	min-height: 32px;
	margin-top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
	transition:  min-height {{$:/config/AnimationDuration}}ms ease-in-out, padding-top {{$:/config/AnimationDuration}}ms ease-in-out, padding-bottom {{$:/config/AnimationDuration}}ms ease-in-out;
}

Since v5.4.0, the theme settings are also available as the CSS variables, so theme developers can use the following code:

.tc-sidebar-header {
	padding: 14px;
	min-height: 32px;
	margin-top: var(--tp-story-top);
	transition: min-height var(--tp-animation-duration) ease-in-out, padding-top var(--tp-animation-duration) ease-in-out, padding-bottom var(--tp-animation-duration) ease-in-out;
}

Limits

CSS variables can only be used in rules, while wikitext can be used everywhere. See this example:

Old way of using wikitext in media query definitions:

\define sidebarbreakpoint()
<$text text={{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}/>
\end

@media (min-width: <<sidebarbreakpoint>>) {
	/* CSS rules */
}

While using CSS variables in media quert definitions doesn't work at all:

@media (min-width: var(--tp-sidebar-breakpoint)) {
	/* Doesn't work */
}