Sizing, spacing and typography design tokens

[langermank]

✨ New sizing, spacing, and typography design tokens

This PR introduces a new set of tokens to be shared across all Primer frameworks. Using style-dictionary, we transform raw values from JSON into CSS and JS. We've crafted a functional layer of tokens that combine to form components and patterns, along with a naming convention to encourage consistency and developer experience.

[namespace]-[item]-[variant]-[property]-[modifier]

{
    "gh": { <------------------------------------------------ Namespace
        "control": { <--------------------------------------- Item
            "xsmall": { <------------------------------------ Variant
                "paddingInline": { <------------------------- Property
                    "condensed": { <------------------------- Modifier
                        "value": "8px" 
                    }, 
                }
            }
        }
    }
}

Initial release

The existing tokens will remain intact as we slowly transition to style-dictionary. This new set of tokens will distribute to /tokens-v2-private as they are still experimental and not intended for usage outside of Primer (for now). This PR should not introduce any breaking changes to existing primitives.

Remaining TODO

• Cleanup JS output
• Fix mobile/desktop build
• Remove docs from site navigation

[changeset-bot]

⚠️ No Changeset found

Latest commit: 06d80a7

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primitives/88AZA9fJpkgBxfvNZUSRve9Zg92j
✅ Preview: https://primitives-git-functional-tokens-primer.vercel.app

[github-actions]

Variables changed

No variables changed

[rezrah]

🥳 This is great @langermank

Recommend this gets merged into main so we can continue to iterate on it in shorter-lived branches. Merging shouldn't impact the release process for existing tokens.