When using styles like Spaces, Text, Border, Effects I would like to easily reuse the values defined in the Stylebook

• Type: Story
• Status: Closed
• Priority: Minor
• Resolution: Completed
• Affects Version/s: None
• Fix Version/s: Master
• Component/s: Pages > Page Editor
• Labels:
  • d_21_07
  • d_21_10
  • d_21_11
  • d_22_02
  • d_22_03
  • d_22_04
  • fc_21_11
  • fc_22_04
  • fc_22_07
  • fc_22_08
  • now
• Epic Link: When I'm working on defining styles for non-color-related tokens, I want to have more options so that I can save time and increase accuracy
• Sprint: Now

Intro/Context:

The scope of this story is to make it easier for the user to understand the current styles that apply to a given fragment

Requirements

• "Default" will be changed to "Default/Inherited · [Value coming from that style rendered]".
• These "select" inputs will be updated:
  • Font family (inherited)
  • Font weight (inherited)
  • Font size (inherited)
  • Border radius (default)
  • Shadow (default)
• These "color" inputs will be updated:
  • Text color
  • Background color
  • Border color
• Text align select will be replaced with a button group (see figma) and a new "justify" option will be added.

Design

 Figma

Test Scenarios

Test Scenarios	Test Strategy	Kind of test	Is it covered by FrontEnd ? (JS-Unit)	Is it covered by BackEnd ? (unit or integration)	Could it be covered by POSHI?
View the styles of Font Family, Font Weight, Font Size, Border Radius and Shadow selectors	High	Manual	No	No	Yes
View the styles of color selectors	High	Manual	No	No	Yes
The text align should be indicated by align icon	High	Manual	No	No	Yes