From 8fe98134ed121b7df43459d093cbdd0d57600f2d Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Tue, 18 Nov 2025 21:29:19 +0000 Subject: [PATCH 1/5] feat(tokens): add spacing stories Co-Authored-By: Naomi Hironaka --- packages/tokens/stories/spacing.stories.tsx | 57 +++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 packages/tokens/stories/spacing.stories.tsx diff --git a/packages/tokens/stories/spacing.stories.tsx b/packages/tokens/stories/spacing.stories.tsx new file mode 100644 index 000000000..5e2c9be48 --- /dev/null +++ b/packages/tokens/stories/spacing.stories.tsx @@ -0,0 +1,57 @@ +import type { default as Tokens } from '../dist'; + +import { Fragment } from 'react'; + +import { Button } from '../../components/src/Button'; +import { ToastRegion, toastQueue } from '../../components/src/Toast'; +import { Tooltip, TooltipTrigger } from '../../components/src/Tooltip'; +// @ts-expect-error ts not detecting d.ts for es file +import tokens from '../dist/index.es.js'; + +export default { + title: 'Tokens/Spacing', +}; + +const spacing: typeof Tokens.spacing = tokens.spacing; + +export const Spacing = { + render: () => ( + <> +
+ {Object.entries(spacing).map(([key, value]) => ( + + + + Copy to clipboard + +
{value}
+
+ + ))} +
+ + + ), +}; From ea61a2b251f6e80b9bf237f50a097ab6209e18e0 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Tue, 18 Nov 2025 21:47:48 +0000 Subject: [PATCH 2/5] chore: add empty changeset for spacing stories Co-Authored-By: Naomi Hironaka --- .changeset/thin-readers-doubt.md | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 .changeset/thin-readers-doubt.md diff --git a/.changeset/thin-readers-doubt.md b/.changeset/thin-readers-doubt.md new file mode 100644 index 000000000..884398825 --- /dev/null +++ b/.changeset/thin-readers-doubt.md @@ -0,0 +1,4 @@ +--- +--- + +docs(tokens): add spacing Storybook story (no release) From ea33504216d4f0b344e1d68a31cc9dd9afbf05c6 Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Tue, 18 Nov 2025 22:27:01 +0000 Subject: [PATCH 3/5] feat(tokens): add size variable mapping to spacing stories Co-Authored-By: Naomi Hironaka --- packages/tokens/stories/spacing.stories.tsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/tokens/stories/spacing.stories.tsx b/packages/tokens/stories/spacing.stories.tsx index 5e2c9be48..ae0223209 100644 --- a/packages/tokens/stories/spacing.stories.tsx +++ b/packages/tokens/stories/spacing.stories.tsx @@ -7,6 +7,8 @@ import { ToastRegion, toastQueue } from '../../components/src/Toast'; import { Tooltip, TooltipTrigger } from '../../components/src/Tooltip'; // @ts-expect-error ts not detecting d.ts for es file import tokens from '../dist/index.es.js'; +// @ts-expect-error import JSON for mapping +import spacingJson from '../tokens/spacing.json'; export default { title: 'Tokens/Spacing', @@ -14,13 +16,22 @@ export default { const spacing: typeof Tokens.spacing = tokens.spacing; +const spacingToSize = Object.fromEntries( + Object.entries(spacingJson.spacing) + .filter(([k]) => !k.startsWith('$')) + .map(([k, v]: [string, any]) => { + const m = typeof v.$value === 'string' ? v.$value.match(/\{size\.(\d+)\}/) : null; + return [k, m ? m[1] : '']; + }), +); + export const Spacing = { render: () => ( <>
Copy to clipboard +
+ {spacingToSize[key] ? `--lp-size-${spacingToSize[key]}` : ''} +
{value}
Date: Tue, 18 Nov 2025 22:30:03 +0000 Subject: [PATCH 4/5] fix(tokens): remove unused @ts-expect-error comment Co-Authored-By: Naomi Hironaka --- packages/tokens/stories/spacing.stories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/tokens/stories/spacing.stories.tsx b/packages/tokens/stories/spacing.stories.tsx index ae0223209..2ca49f457 100644 --- a/packages/tokens/stories/spacing.stories.tsx +++ b/packages/tokens/stories/spacing.stories.tsx @@ -7,7 +7,6 @@ import { ToastRegion, toastQueue } from '../../components/src/Toast'; import { Tooltip, TooltipTrigger } from '../../components/src/Tooltip'; // @ts-expect-error ts not detecting d.ts for es file import tokens from '../dist/index.es.js'; -// @ts-expect-error import JSON for mapping import spacingJson from '../tokens/spacing.json'; export default { From 47fc66bd5d0d0b0ab2d01d0c5b0f6c6784c4f033 Mon Sep 17 00:00:00 2001 From: Naomi Hironaka Date: Tue, 18 Nov 2025 18:04:20 -0500 Subject: [PATCH 5/5] fix: add description to story --- packages/tokens/stories/spacing.stories.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/tokens/stories/spacing.stories.tsx b/packages/tokens/stories/spacing.stories.tsx index 2ca49f457..c038c2e16 100644 --- a/packages/tokens/stories/spacing.stories.tsx +++ b/packages/tokens/stories/spacing.stories.tsx @@ -1,5 +1,6 @@ import type { default as Tokens } from '../dist'; +import { vars } from '@launchpad-ui/vars'; import { Fragment } from 'react'; import { Button } from '../../components/src/Button'; @@ -27,12 +28,17 @@ const spacingToSize = Object.fromEntries( export const Spacing = { render: () => ( <> +
+ Use var(--space-*) for margin, + padding, and gap. Need a negative offset? Wrap in{' '} + calc() +
{Object.entries(spacing).map(([key, value]) => ( @@ -58,7 +64,7 @@ export const Spacing = { style={{ backgroundColor: 'var(--lp-color-green-500)', width: value, - height: 'var(--lp-size-16)', + height: 'var(--lp-spacing-500)', }} />