As a theme developer I want to create new tokens with sensible default values easily

• Type: Story
• Status: In Review
• Priority: Minor
• Resolution: Unresolved
• Affects Version/s: None
• Fix Version/s: None
• Component/s: Liferay Themes
• Labels: None
• Epic/Theme:
  • FI_Additional_Work
• Git Pull Request: https://github.com/liferay-frontend/liferay-portal/pull/412

As reported at CSS variables should automatically be created for frontend-token-definitions so that defaults do not have to be set in the theme css

Currently when you add custom frontend-token-definitions to a theme the css variable is not generated until a new stylebook is created. It would be nice if this was automatically created so that the default value that is declared in the frontend-token-definition file could be used by the theme. Currently the default value in frontend-token-definition is irrelevant and never used apart from being displayed as an option in the stylebook. Even if you save a default version of the stylebook and apply it the theme, the default values are not used. You must change the values for them to be applied.

It can be observed in https://github.com/ethib137/73-formed-theme/commit/ae6b4fb5c118a7ae2907bfa4c667354dc1d07c15#diff-eb78e50105b885c11c7b6056e6c2b9c0R1 that the minimum necessary CSS to implement a token is something like:

.header-bg {
	background-color: $headerBackground;
	background-color: var(--header-background, $headerBackground);
}

The goal of this story is to provide the default token values on pages to match developer expectations and create a better token development experience.

Acceptance Criteria

• Default token values are set to :root on every page