Bootstrap/Clay Buttons do not react properly to StyleBook Tokens

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

Based on the private report by Evan Thibodeau in the #t-echo channel private Slack thread

The current implementation of tokens (CSS Custom Properties) for buttons does not offer the expected styling workflow for simple buttons.

Steps to Reproduce

• Import the sample fragment
  • Go to Design > Fragments
  • Import the attached .zip file with the example fragment collection: buttons_tokens_test.zip
• Add the sample fragment to a page
  • Navigate to the home page (type content page) and click the pencil button to edit
  • In the sidebar, inside the Fragments & Widgets section, locate the Buttons fragment and add it to the page
  • Publish the page
• Create a StyleBook
  • Go to Design > Style Books
  • Click on the + button to create a new style book
  • Click the actions dropdown and click on Mark as Default to make the style book apply to the page
• Edit stylebook Theme Colors tokens
  • Go to Design > Style Books
  • Click the actions dropdown and click on Mark as Default edit the style book

Current Result
Some tokens apply and some others don't (check attached screenshot). On a quick inspection:

• The primary token works for a primary button natural state but not for the hover state
• The secondary token works for the secondary button text color in the natural state but not for the color on hover
• The success token works for a primary button natural state but not for the hover state
• The danger, info and warning tokens have no effect

Expected Result
Changing tokens properly styles the expected buttons in a consistent and coherent way

Technical Approach
The initial attempt was to make buttons react to the theme color tokens inside the theme implementation as can be seen in this PR

The current approach should work as:

• When a theme color token [danger, dark, info, light, primary, secondary, success, warning] changes in StyleEditor
• The corresponding tokens and token values should be autogenerated and pushed into the token list that will be saved

Example:

• Primary is changed to #ff00ff
• Inside StyleBookEditir the following tokens are generated:
  • button-primary-bg with the value #ff00ff
  • button-primary-border calculated
  • button-primary-color calculated
  • button-primary-hover-background calculated
  • button-primary-hover-color calculated

Eduardo Allegrini and Marcos Castro should provide the necessary calculations.