feat(tokens): add spacing Storybook story with size variable mapping

[nhironaka]

Summary

Adds a new Storybook story for spacing tokens that displays each spacing variable alongside its equivalent size variable, value, and visual representation. Similar to the existing size.stories.tsx, this provides an interactive reference for the design system's spacing tokens.

The story displays a 4-column grid for each spacing token:

1. Clickable spacing variable (e.g., --lp-spacing-100) with copy-to-clipboard functionality
2. Equivalent size variable (e.g., --lp-size-0)
3. Computed value (e.g., 0, 0.25rem)
4. Visual bar representation

The size variable mapping is built programmatically by parsing spacing.json to extract the size reference from each spacing token's $value field.

Screenshots

Testing approaches

• Tested locally in Storybook to verify all 9 spacing tokens display correctly
• Verified the size variable mapping is accurate (spacing-100 → size-0, spacing-200 → size-4, etc.)
• Confirmed copy-to-clipboard functionality works
• All automated CI checks pass (typecheck, lint, tests)
• Chromatic visual baselines need manual approval for the new story

Review checklist

• Verify the visual output in Chromatic looks correct (4 columns properly aligned)
• Confirm all spacing tokens show the correct equivalent size variable
• Accept the new Chromatic visual baselines

---

Link to Devin run: https://app.devin.ai/sessions/65e0e4d1af344591b70f7d1f4b034f0f
Requested by: Naomi Hironaka (@nhironaka)

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[changeset-bot]

🦋 Changeset detected

Latest commit: 47fc66b

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

This PR includes changesets to release 0 packages

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

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

[pkg-pr-new]

yarn add https://pkg.pr.new/@launchpad-ui/components@1821.tgz

yarn add https://pkg.pr.new/@launchpad-ui/icons@1821.tgz

yarn add https://pkg.pr.new/@launchpad-ui/tokens@1821.tgz

commit: 47fc66b

[github-actions]

Size Change: 0 B

Total Size: 533 kB

ℹ️ View Unchanged

Filename	Size
apps/vscode/dist/client.js	111 kB
apps/vscode/dist/server.js	261 kB
packages/box/dist/index.es.js	7.26 kB
packages/box/dist/index.js	7.82 kB
packages/box/dist/style.css	2.67 kB
packages/button/dist/index.es.js	1.89 kB
packages/button/dist/index.js	2.32 kB
packages/button/dist/style.css	3 kB
packages/components/dist/index.es.js	19 kB
packages/components/dist/index.js	19.9 kB
packages/components/dist/style.css	8.45 kB
packages/core/dist/index.es.js	512 B
packages/core/dist/index.js	1.27 kB
packages/drawer/dist/index.es.js	1.76 kB
packages/drawer/dist/index.js	2.22 kB
packages/drawer/dist/style.css	497 B
packages/dropdown/dist/index.es.js	1.15 kB
packages/dropdown/dist/index.js	1.59 kB
packages/filter/dist/index.es.js	2.23 kB
packages/filter/dist/index.js	2.68 kB
packages/filter/dist/style.css	881 B
packages/focus-trap/dist/index.es.js	418 B
packages/focus-trap/dist/index.js	852 B
packages/form/dist/index.es.js	4.25 kB
packages/form/dist/index.js	4.73 kB
packages/form/dist/style.css	2.21 kB
packages/icons/dist/index.es.js	2.81 kB
packages/icons/dist/index.js	3.24 kB
packages/icons/dist/style.css	532 B
packages/menu/dist/index.es.js	3.69 kB
packages/menu/dist/index.js	4.16 kB
packages/menu/dist/style.css	872 B
packages/modal/dist/index.es.js	3.08 kB
packages/modal/dist/index.js	3.55 kB
packages/modal/dist/style.css	903 B
packages/navigation/dist/index.es.js	2.75 kB
packages/navigation/dist/index.js	3.21 kB
packages/navigation/dist/style.css	874 B
packages/overlay/dist/index.es.js	1.02 kB
packages/overlay/dist/index.js	1.42 kB
packages/popover/dist/index.es.js	3.01 kB
packages/popover/dist/index.js	3.43 kB
packages/popover/dist/style.css	529 B
packages/portal/dist/index.es.js	420 B
packages/portal/dist/index.js	835 B
packages/table/dist/index.es.js	1.01 kB
packages/table/dist/index.js	1.44 kB
packages/table/dist/style.css	700 B
packages/tokens/dist/fonts.css	183 B
packages/tokens/dist/index.css	1.47 kB
packages/tokens/dist/index.es.js	3.07 kB
packages/tokens/dist/index.js	3.11 kB
packages/tokens/dist/media-queries.css	113 B
packages/tokens/dist/themes.css	2.27 kB
packages/tooltip/dist/index.es.js	598 B
packages/tooltip/dist/index.js	1.02 kB
packages/tooltip/dist/style.css	337 B
packages/vars/dist/index.es.js	2.66 kB
packages/vars/dist/index.js	2.66 kB

_{compressed-size-action}