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

Provide a CSS variable layer to clay-css


    • Epic
    • Status: Closed
    • Minor
    • Resolution: Completed
    • None
    • None
    • Clay
    • 1
    • Engage - Discover Content and Products
    • Done
    • S05E02 - Path of Exile, S05E03 - Tibia, S05E04 - Half Life, S05E05 - Tetris


      Currently, customization of clay-css for integration with the stylebook feature is completely controlled via theme code, which is in charge of:

      • Defining the tokens: names, type, mapping to CSS variables
      • Declaring the CSS variables
      • Giving value to clay-css sass variables, using the CSS variables

      Thus, once theme is built and deployed, resulting CSS code will include CSS variables which values are fed by the SCSSVariablesProvider implementations, taken either from the default values in the theme, or from the token values as defined by the stylebook in place.

      As a result, it's up to the themes to define which CSS variables to use and map them to clay-css. This has some negative consequences:

      • There is no standard set of conventions to define tokens that customize clay-css. As a result, neither Lexicon nor design tools can provide a set of tokens for designers to work with 
      • Provisioning of new token definitions requires building and deploying a theme

      The goal of this epic is to design and implement a solution to decouple clay-css customization from themes

      Acceptance criteria:

      • clay-css should be customizable via a set of CSS variables mirroring the relevant SASS variables
      • These CSS variables should be available without the need of creating, building and deploying a theme
      • Themes can opt-in this set of variables, meaning that a theme may decide not to use them and still provide tokens
      • classic theme must be working and flawless during this process. Depending on the end result, clay might be adapted to use these variables

      This epic contributes to the end goal of enabling provisioning of token definitions to the platform in a way that does not require theme re-deployment. However, this goal will be addressed in future epics.


        Issue Links



              patrick.yeo Patrick Yeo
              bruno.fernandez Bruno Fernández
              Wesley Gong Wesley Gong
              0 Vote for this issue
              3 Start watching this issue




                  Version Package