Several tokens values are not being applied in pages

• Type: Bug
• Status: Closed
• Resolution: Fixed
• Affects Version/s: Master
• Fix Version/s: 7.3.X, 7.3.5 CE GA6, 7.3.10 DXP GA1, Master
• Component/s: Liferay Themes > Classic, Style Books
• Labels:
  • 7.3-blocker
• Branch Version/s:
  7.3.x
• Backported to Branch:
  Committed
• Fix Priority: 5
• Git Pull Request: https://github.com/brianchandotcom/liferay-portal/pull/93458

Steps to reproduce

• Go to Style Books
• Create a new stylebook
• Go to typography category
• Update font family base value and set 'Courier New'

Expected result

The font of the text in the home page in the preview changes

Actual result

Nothing change

 

Technical notes

In order to avoid admin controls to take the stylebook styles, we decided to apply those styles in the #wrapper element of a page, which resulted in some tokens not working.

The specific tokens that don't work are the ones defined by the theme in the body:

 

body {
    background-color: var(--body-bg);
    color: var(--body-color);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
}

 

A possible solution would be to define those styles also in the #wrapper

#wrapper {
    background-color: var(--body-bg);
    color: var(--body-color);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
}