As a Designer I would like to have a complete Preview Style default page for Styles (tokens)

• Type: Story
• Status: Open
• Priority: Minor
• Resolution: Unresolved
• Affects Version/s: None
• Fix Version/s: None
• Component/s: Style Books
• Labels:
  • d_21_09
  • d_21_10
  • d_21_11
  • d_21_12
  • ee_design
• Epic Link: Preview styles in Style Books

Motivation

Users in charge of defining styles for a site may find previewing styles useful. With this new option added to the dropdown in the control bar, users will be able to preview the different styles by category.

Design

Figma File

Requirements

• Note.- Transitions won't have a preview yet.
• New property should be added to each token set to determine the type of preview it will use (see LPS-144099)
  • Tokens not included in any category / token set won't be previewed
  • If the token set type is not recognized because a property has not been added, then it will show in the sidebar but will be rendered as "Preview not available"
  • If a token or a token set doesn't have the right property (for example a border is included in a token set indicated as "color"), then that token / token set will be indicated as "Preview not available"

 

  Refinement Recording