Polaris units

[lgriffee]

• Do we want to create an underlying set of Polaris units?

  From @alex-page:
  polaris units all the units from the system
  semantic tokens spacing, type, line width, radius using the system units

• If so what should the values be and where should they be used?

[alex-page]

This could be a terrible idea but this is my thinking.

Polaris units
all the values provided from the system. As a user I can use these for creating new semantic relationships and stay on mainline.

Fontsize tokens
all of the values that are available for typography. There isn’t anything smart here just a list of values.

Components
Use the token values and change them at different break points.

Polaris units become a central source of truth of all the units that we scale from the system. We semantically apply them to different values for border-radius, font-size, spacing etc. These semantic values are then used to build responsive components that could use multiple tokens.

[sarahill]

We chatted about that a bit yesterday in context of the text components. I'm on board with <Heading /> being the sensible default along with things like <Heading level="h3" style="2xl" /> for the other defaults and then adding more flexibility by letting users have complete control with setting size/style. I'll leave these details for Emma's discussion though in terms of how a component(s) might work.

My brain still can't quite understand how we avoid the two values for tools like Figma but something we can dig into.

[alex-page]

I would love to learn about the restrictions in Figma can we huddle on this and post an update here?

[sarahill]

Sure. As I think about it, we could make Figma components for the sensible defaults with breakpoint toggles for how the values change within the component instead of making separate figma text styles. cc: @heyjoethomas

[heyjoethomas]

@alex-page @sarahill @emmaorhun We should def huddle/jam on this when Sara is feeling better. Feel like we have multiple ideas floating around lol.

In Figma text styles can only have 1 definition. That definition contains the following attributes:

• font-family
• weight
• size
• line-height
• text decoration

Once you change any of those attributes you need a new text style. Also, there are no variants like with components where we can toggle between large-screen and small-screen. They have to be separately defined and names styles.

[aaronccasanova]

@heyjoethomas Please add me to this huddle 🙏