Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Global Styles panel: Add elements support to “Typography” section #36546

Closed
critterverse opened this issue Nov 16, 2021 · 1 comment · Fixed by #36718
Closed

Global Styles panel: Add elements support to “Typography” section #36546

critterverse opened this issue Nov 16, 2021 · 1 comment · Fixed by #36718
Assignees
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress

Comments

@critterverse
Copy link
Contributor

Opening this issue to discuss adding elements support to the “Typography” section of the Global Styles panel. This could potentially just be Text and Links at first.

@critterverse critterverse added Needs Design Needs design efforts. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Nov 16, 2021
@critterverse
Copy link
Contributor Author

I’m removing the Needs Design tag as this should follow the original design presented in #34574 and build off what's already been built for the Color panel.

Some notes from the original issue:

132198372-2a31e45c-4e40-4acd-aae1-291528195b0f

132199312-a3610d4e-3b27-48b2-9e45-843090c9f830

  • Elements operate in the same way as in the Colors panel
  • The main difference is that the GroupItem contains a small preview of the specific typography attributes applied
  • This preview is updated live to reflect current choices
  • The individual tool panel for each element will also include a preview area

Based on what's currently in trunk, I think the elements would look like this — with the typographic preview taking up the same 24x24 px area as a color swatch:

elements-spacing-redline

^ Some wider fonts probably won't fit within this preview area so we may need to figure out a way of scaling down the type size within the available space in those instances, or making it a touch smaller across the board.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants