feat: [FX-4259] add new spacing values to picasso

[dmaklygin]

FX-4259

Description

Add new spacing values to Picasso, described in BASE.

RFC: https://github.com/toptal/picasso/blob/master/docs/decisions/18-spacings.md#technical-details

• BASE spacings are exported according to RFC
• BASE spacings are exported via theme, so they can be used in custom styles

How to test

• Use temploy to play with SPACING variables

Example:

import { SPACING_4, SPACING_6 } from '@toptal/picasso/utils'

const Example = () => (
  <div>
    <Container bottom={SPACING_6}>Some text</Container>
    <Container left={SPACING_4}>Some more text with a small margin</Container>
  </div>
)

Example of new spacings variable coming from the theme:

export default ({ palette, sizes: { borderRadius }, spacings: { SPACING_6 } }: Theme) => {
  ...

}

Development checks

• Add changeset according to guidelines (if needed)
• Make sure that additions and changes on the design follow Toptal's BASE design, and it's been already discussed with designers at #-base-core
• Ensure that deployed demo has expected results and good examples
• Self reviewed

All development checks should be done and set checked to pass the
GitHub Bot: TODOLess action

PR commands

List of available commands:

• @toptal-bot run package:alpha-release - Release alpha version
• @toptal-anvil ping reviewers - Ping FX team for review

PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

1. You have no extra requests.
2. You have optional requests.
   1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

1. Something is broken after the changes.
2. Acceptance criteria is not reached.
3. Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

1. There are leftovers like unnecessary logs, comments, etc.
2. You have an opinionated comment regarding the code that requires a discussion.
3. You have questions.

How to handle the comments?

1. An owner of a comment is the only one who can resolve it.
2. An owner of a comment must resolve it when it's addressed.
3. A PR owner must reply with ✅ when a comment is addressed.

[changeset-bot]

🦋 Changeset detected

Latest commit: 3287cab

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@toptal/picasso-provider	Minor
@toptal/picasso	Minor
@toptal/picasso-shared	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[dmaklygin]

@toptal-bot run package:alpha-release

[toptal-devbot]

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@48.0.1-alpha-fx-4259-expose-base-spacing-3d286df9c.88+3d286df9c
yarn add @toptal/[email protected]+3d286df9c
yarn add @toptal/picasso-charts@51.0.1-alpha-fx-4259-expose-base-spacing-3d286df9c.88+3d286df9c
yarn add @toptal/picasso-codemod@5.5.3-alpha-fx-4259-expose-base-spacing-3d286df9c.99+3d286df9c
yarn add @toptal/picasso-forms@60.1.1-alpha-fx-4259-expose-base-spacing-3d286df9c.6+3d286df9c
yarn add @toptal/picasso-pictograms@1.1.2-alpha-fx-4259-expose-base-spacing-3d286df9c.174+3d286df9c
yarn add @toptal/picasso-provider@3.1.4-alpha-fx-4259-expose-base-spacing-3d286df9c.24+3d286df9c
yarn add @toptal/picasso-rich-text-editor@5.0.4-alpha-fx-4259-expose-base-spacing-3d286df9c.0+3d286df9c
yarn add @toptal/picasso-shared@12.0.1-alpha-fx-4259-expose-base-spacing-3d286df9c.219+3d286df9c

[dmaklygin]

@toptal-anvil ping reviewers

[augustobmoura]

The implementation should work, but I still think we are leaking too much information for users as of now. The intention of using classes is to prevent users from depending on the values directly, so we should keep the design of the API as poka-yoke as possible

[dmaklygin]

@toptal-anvil ping reviewers

[sashuk]

Looks good! Thank you for extending theme as well

[augustobmoura]

LGTM!