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-focus-ring2px solid var(--riff-cover-accent, var(--riff-fg)) | The ring around the player's control that has the keyboard's focus, as an outline value: one ring outside the control's edge, following its corners, in the cover's accent, --riff-cover-accent, where the player sets one on #riff, else the player's text colour. A theme sets a ring of its own, such as 3px solid #ffbf47. |
--riff-focus-ring-offset2px | How far the focus ring sits outside the control's edge. |
--riff-accentvar(--riff-theme-accent, var(--riff-fg)) | 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; a site's or a host's own stylesheet that sets it on #riff wins over that. Unset, it is the player's text colour. |
--riff-cover-accentvar(--riff-accent) | The accent the playing track's cover gives, which the player sets here as the track changes: the cover's hue, muted, and light enough to read at 4.5:1 on the bar and on Now Playing. The played part of the seek bar in the bar, its knob, the playing bars and the title of the current Up next item, and a wash behind Now Playing take it. A cover that is grey, near black or near white gives none, and it is --riff-accent. In the Listen app's own document the player sets it on the body too, for the app's links, Liked songs and the Browse tiles. The riff_cover_accent filter turns it off. |
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, and the title of the card under the pointer in the Listen block. Its focus rings are --riff-app-focus-ring. |
--riff-app-accent-deep#11100e | The accent under the pointer or in focus. |
--riff-app-accent-tintcolor-mix(in srgb, var(--riff-app-accent) 10%, var(--riff-app-bg)) | 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-focus-ring2px solid var(--riff-cover-accent, var(--riff-app-ink)) | The ring around the Listen app's control that has the keyboard's focus, as an outline value: Home, search, the tabs, the sidebar and the rest, each ringed outside its own edge and corners, in the cover's accent where the app sets one on .riff-app, else the text's colour. The player's own is --riff-focus-ring. |
--riff-app-focus-ring-offset2px | How far the Listen app's focus ring sits outside the control's edge. |
--riff-app-font"Riff Inter", inter, "Riff Inter Fallback", -apple-system, blinkmacsystemfont, sans-serif | The Listen block's text font. |
--riff-app-heading-font"Riff Garamond", "EB Garamond", "Riff Garamond Fallback", garamond, georgia, serif | The Listen block's headings: the library's title and each album's. |
The Listen app
Set on the Listen app's own document, body.riff-standalone, at the Listen page's app/ address or the site's. The Listen block in it takes its background and text from them.
| Property | Description |
|---|---|
--riff-standalone-bg#030303 | The Listen app's background: the page, the strip behind the status bar, and the Listen block inside it. |
--riff-standalone-ink#fff | The Listen app's text and icons. |
--riff-standalone-tabsvar(--riff-surface, #212121) | Behind the Home, Search and Library tabs along the bottom on a phone. |
--riff-standalone-on-accent#000 | The icon on an album's round Play button, which is in the accent. |
--riff-standalone-accentvar(--riff-standalone-ink) | The Listen app's accent in its own document: its Play buttons and links, until a cover gives one, and what a grey cover falls back to. A host's stylesheet sets it, on .riff-standalone, and it wins over Riff's own default, the app's text colour. |
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;
}