ni / nimble

The NI Nimble Design System
https://nimble.ni.dev
MIT License
29 stars 9 forks source link

Create spacing token ramp #2089

Open fredvisser opened 1 month ago

fredvisser commented 1 month ago

🙋 Feature Request

😯 Problem to Solve

1518 discussed the need for a more complete set of spacing tokens, but we deferred that work at the time. This work item proposes a new set of spacing tokens that are directly mapped to pixel values.

🧪 Research

Design System Tokens
Fluent2 sizeNone: 0px; size20: 2px; size40: 4px …
Polaris space-0: 0px; space-025: 1px; space-050: 2px …
Carbon spacing-01: 2px; spacing-02: 4px; …
Lightning spacing-horizontal-xxx-small: 2px; spacing-horizontal-xx-small: 4px; …
Shoelace spacing-3x-small: 2px; spacing-2x-small: 4px; spacing-x-small: 8px; …
Cauldron space-quarter: 2px; space-half: 4px; space-three-quarters: 6px; space-smallest: 8px; …
Vibe spacing-xs: 4px; spacing-small: 8px; spacing-medium: 16px; …
PatternFly spacer--xs: 4px; spacer--sm: 8px; spacer--md: 16px; …
Clarity space-1: 1px; space-2: 2px; space-3: 4px; …

Most design systems use the spacing tokens for both component design and application layout, but some offer standalone layout tokens.

Some also combine the size ramp with context specific tokens.

💁 Proposed Solution

Mimic the Polaris system, except use pixel values.

E.g.

Name SCSS name Value
space0 $ni-nimble-space-0 0px
space1 $ni-nimble-space-1 1px
space2 $ni-nimble-space-2 2px
space4 $ni-nimble-space-4 4px
space8 $ni-nimble-space-8 8px
space12 $ni-nimble-space-12 12px
space128 $ni-nimble-space-128 128px
bannerGapSpace $ni-nimble-banner-gap-space 1px

📋 Tasks

jattasNI commented 1 month ago

Scope of this work as identified during team discussion: (@rajsite @fredvisser please correct if I misunderstood something)

  1. double check what the existing padding ramp tokens are used for within Nimble
  2. do one of these (worth a quick chat with the team once we understand the existing use cases to pick between them)
    1. create spacing ramp tokens to replace the usages that are used for spacing and create semantic tokens to replace the usages that are used for sizing within Nimble
    2. if that doesn't feel right (too many semantic tokens, hard to distinguish use cases from each other) then consider only creating ramp tokens but naming them "size" instead of "spacing"
  3. don't yet create semantic tokens for client layout. We have designs for some but we're not sure of our vision yet (layout containers? labels with padding built in?)