Tokens

Tokens offer a clear and concise syntax for styling elements across for different brands. This reduces code that gets copy & pasted between brands, increasing consistency and reducing regressions in Nova Core.

Nova Core defines tokens which brands override or extend.

🚧

Tokens are a work in progress!

In particular, we're still experimenting with component tokens conceptually.

Brand tokens are further along, and should be considered the correct solution for branded styles that need to exist globally.

Terms

Token Group -
Token Group Name -
Brand Tokens -
Default Tokens -

Global Brand Tokens

Brand tokens are in each brands/${brand-name}/index.scss file.
The style() mixin is located at styles/mixins/brand.scss.
Every brand calls style(), passing its brand tokens.
The brand tokens are merged with the Nova Core tokens.
The tokens are used within the style() mixin, targeting global selectors.

Pseudocode example,

// This mixin allows us to localize our tokens for a brand.
@mixin style( $tokens ) {
 
	// Target something globally.
	[data-example-component="true"] {
 
		// And render every CSS property and value in the `example-component` token group.
		@include token-group-styles( $tokens, 'example-component' );
	}
}
 
// Every brand implements this.
body.pmc-nova--nova {
 
	// Pass brand tokens into the mixin, faking dependency injection.
	@include style( (
		'example-component__padding': 1rem,
	) );
}
 
// Another example.
body.pmc-nova--indiewire {
	@include style( (
		'example-component__padding': 2rem,
	) );
}
 
// Another example.
body.pmc-nova--tvline {
	@include style( (
		'example-component__border': 1px solid #000000,
		'example-component__padding': 0,
	) );
}

Component Brand Tokens

Tokens use by brands in a component context are localized to components.

These are simple CSS variables that get overridden by brand styles.

// styles.modules.css
.exampleComponent {
 
	// Tokens.
	--example-component--padding: 1rem;
 
	.inner {
		padding: var( --example-component--padding );
	}
}

// brands/${brand-name}.modules.css
.exampleComponent {
	--example-component--padding: 2rem;
}

Theme and Plugin Configuration Typography