docs: Figma Code Connect and Storybook Theming

[Zuzze]

Summary

⚠️ This branch includes documentation only and Storybook UI related changes, no changes to the actual components.

Preview Link:

https://626696a2018c1f004a1cde86-cjqoutqxph.chromatic.com/?path=/docs/getting-started--docs&globals=theme:dark

Making StoryBook UI aligned with the brand colors

Adding Figma Code Connect for components

.figma.tsx files will be connected to Figma design system so code snippets can be easily accessed directly in Figma. This is the first version to establish the connection and get basic snippets to Figma. Not all props have been fully wired up yet and will require discussion of best practices with the team. Figma Code connect also helps LLMs to map the Figma to code better and is excellent companion for Figma MCP Server.

Adding Figma design links to stories for real-time comparison

Adding component overview page for easier component discovery

• Extending Light/Dark mode toggle to include also theStoryBook UI, not just Story boxes

Adding better controls for PropsTable

Before: Radio buttons everywhere

After:

Testing approaches

• Chromatic unit testing

[changeset-bot]

🦋 Changeset detected

Latest commit: 4e62569

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

This PR includes changesets to release 1 package

Name	Type
@launchpad-ui/components	Patch

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/[email protected]

yarn add https://pkg.pr.new/@launchpad-ui/[email protected]

yarn add https://pkg.pr.new/@launchpad-ui/[email protected]

commit: 9aa75ce

[github-actions]

Size Change: -28 B (-0.01%)

Total Size: 529 kB

Filename	Size	Change
packages/components/dist/index.es.js	19 kB	-5 B (-0.03%)
packages/components/dist/index.js	19.9 kB	-5 B (-0.03%)
packages/components/dist/style.css	8.34 kB	-18 B (-0.22%)

ℹ️ 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/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	1.3 kB
packages/icons/dist/index.js	1.73 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	898 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}

[apucacao]

This is awesome!

The only minor thing is the logo doesn't quite match the proportions of our main brand logo. Osmo looks too big! 😅

This PR	Main brand

[Zuzze]

This is awesome!

The only minor thing is the logo doesn't quite match the proportions of our main brand logo. Osmo looks too big! 😅

@apucacao Agreed! updated it now to align better with the logo.

I think the main font is commercial and I was not able to find exact font match but Antonio suggested using Sohne so did that for now. We can also polish this later if we can get the access to the actual typeface.