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

As a UX Designer I would like to access a selector to do a reference to existing CSS variable

    Details

    • Type: Story
    • Status: Open
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: None
    • Fix Version/s: None
    • Component/s: Product Menu
    • Labels:

      Description

      Intro/Context:

      As we are providing the possibility to refer to a CSS variable from a particular other CSS variable, they are cases where the user might input them with mistake. If this happens there is currently no way to give a visual feedback to make the user ensure he used a correct reference as a value.

      The goal of this story is to solve that by introducing a selector that will allow the user to select a value from existing ones.

      Given a UX Designer has created basic tokens

      -

      When the UX Designer clicks on the color icon

      Then the UX Designer get access to the color picker allowing the users to select a color from an existing list of colors (basic colors)

      -

      When the UX Designer types "/"

      Then a list of autocomplete CSS variables (from same Token Category) appear allowing the user to pick existing values.

      • Example: For theme colors you get a list of Color tokens.

       -

      When the UX Designer is editing: Theme Colors

      Then the user can use references to existing Tokens

      •  examples:
        • primary=blue
        • secondary=white

       

      Figma Mockup

       

        Attachments

          Activity

            People

            • Assignee:
              support-lep@liferay.com SE Support
              Reporter:
              tarik.demnati Tarik Demnati
              Recent user:
              Marta Elicegui
              Participants of an Issue:
            • Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

              Dates

              • Created:
                Updated:

                Packages

                Version Package