The player and the Listen block take their colours and sizes from custom properties. The ones below are public: each keeps its name within a major version. Any other --riff-* property is internal and may change.
They are all in one stylesheet, riff-tokens. An extension lists it as a dependency of its own, wp_register_style( 'my-extension', $src, array( 'riff-tokens' ) ), and uses the names rather than copying values.
The player
Set on the player's root, #riff, so they reach the bar and Now Playing and nothing else. --riff-bar-h is on :root, since the page keeps room for the bar.
| Property | Description |
|---|---|
--riff-bar-h64px | The height of the player bar. The page keeps this much room at its end so the bar never covers the last line. |
--riff-bg#030303 | The background of Now Playing. |
--riff-surface#212121 | The bar, the Up next sheet, tooltips, and the Song and Video switch. |
--riff-fg#fff | The player's text and icons, and the played part of the seek bar in Now Playing. |
--riff-fg-2rgb(255 255 255 / 0.7) | Secondary text, such as the artist, the times and the format, and toggles that are off. |
--riff-fg-3rgb(255 255 255 / 0.5) | The unselected side of the Song and Video switch. |
--riff-linergb(255 255 255 / 0.1) | Dividers and the unplayed part of the seek bar. |
--riff-hoverrgb(255 255 255 / 0.1) | The wash behind a control under the pointer, and behind chips, the current Up next item, and artwork while it loads. |
--riff-accent#f2eadb | The played part of the seek bar in the bar, its knob, the format label, and the glow behind the cover. A theme sets it in theme.json under settings.custom.riff.accent, or in its own CSS. |
The Listen block
Set on the block's root, .riff-app. The block's colour settings in the editor set its background and text colour directly, on top of these.
| Property | Description |
|---|---|
--riff-app-bg#f6f6f6 | The Listen block's background. |
--riff-app-surface#fff | The album's track list and the now-playing card in the Listen block. |
--riff-app-ink#1e1e1e | The Listen block's text. |
--riff-app-ink-2#656a71 | Secondary text in the Listen block. |
--riff-app-line#d9d9d9 | Borders in the Listen block, and the space artwork fills while it loads. |
--riff-app-accent#2c2a26 | Links, play buttons, focus rings, and the title of the card under the pointer in the Listen block. |
--riff-app-accent-deep#11100e | The accent under the pointer or in focus. |
--riff-app-accent-tint#f2eadb | The background of the row playing. |
--riff-app-on-accent#fff | Text and icons on a filled button: the accent, or the text colour under the pointer. |
--riff-app-font"Riff Inter", inter, -apple-system, blinkmacsystemfont, sans-serif | The Listen block's text font. |
--riff-app-heading-font"Riff Garamond", "EB Garamond", garamond, georgia, serif | The Listen block's headings: the library's title and each album's. |
The accent
A theme sets the player's accent in theme.json.
{
"settings": {
"custom": {
"riff": { "accent": "#e26f56" }
}
}
}A theme or plugin can set the others in its own stylesheet, with a selector one step more specific than the player's #riff so the order the stylesheets load in does not matter.
body #riff {
--riff-bg: #101010;
--riff-surface: #1c1c1c;
}