Uploaded image for project: 'PUBLIC - Liferay Portal Community Edition'
  1. PUBLIC - Liferay Portal Community Edition
  2. LPS-119638

Bootstrap/Clay Buttons do not react properly to StyleBook Tokens



      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


      • 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.


        1. button_tokens.gif
          415 kB
        2. buttons_tokens_test.zip
          2 kB
        3. buttons_tokens_test.zip
          2 kB
        4. entries-20200826153240931.zip
          1 kB
        5. Selection_026.png
          497 kB

        Issue Links



              john.co John Co
              jose.balsas Chema Balsas (Inactive)
              Kiyoshi Lee Kiyoshi Lee
              0 Vote for this issue
              1 Start watching this issue


                2 years, 21 weeks, 3 days ago


                  Version Package
                  7.3.5 CE GA6
                  7.3.10 DXP GA1