Improve default styles to match Flowbite and Tangible UI for frontend interface

[eliot-akira]

From https://github.com/TangibleInc/tangible-ui/issues/2#issuecomment-3513956156:

From a simpler aesthetic perspective Fields isn't really meeting our team's needs either. I wonder if I could make the "Default" style match up with our Flowbite UI style for use in frontends 🤔 ..We've been fairly consistently using Flowbite's component library to piece together our UI mockups in Figma for the past year or so.

References

• Flowbite components
• Tangible UI and its storybook
• UI designs in Figma
  • Fields UI design framework
  • WordPress Design System
  • Flowbite components design
  • Storybook for WordPress design system

---

FYI @juliacanzani, here I'm gathering references to improve the default styles of fields.

It might be useful to make Tangible UI's storybook publish every commit from the main branch to the same site domain, so it can be linked and regularly compared. This comment describes how it was done for Fields. #12 (comment)

[juliacanzani]

We've got a field framework document forked a few years ago from the core WP Design System with WP styles applied, and though the default styles will look a bit different there are some functional differences to the core WP fields that are useful to have as reference, especially accordions, fields with support for dynamic data, and colour pickers.

Here's the latest Figma document from Flowbite. This is the document we're pulling frontend assets from in newer designs.

And of course WordPress has their own Storybook, which might be useful as a visual collection of all of their UI elements

[eliot-akira]

Great, I added the links to the issue description, and exported as PDF files for later reference.

That last one is good, the storybook for WordPress' design system.

• https://wordpress.github.io/gutenberg/

That's comprehensive and well-documented. I'm curious to study the source code and how it's built. Like here's a component FigmaEmbed.

They're using GitHub Pages, and the workflow script is simple, it publishes to the above site (subdirectory) on every commit.

---

This part I notice, the organization of components and their stories.

'../packages/components/src/**/stories/*.story.@(js|tsx)',
'../packages/components/src/**/stories/*.mdx',

https://github.com/WordPress/gutenberg/blob/f3624d87ead7fd3b759dbcb75f42aa7349595d6a/storybook/main.js#L34-L35

Each component and its story are co-located in the same folder. That's probably easier to develop both together, instead of having to jump between, for example:

• src/components/Button.tsx
• src/stories/Button.stories.ts

Instead, it could be:

• src/components/Button.tsx
• src/components/Button.story.tsx

Well, just an idea. That's actually simpler than in WordPress/gutenberg.

• packages/components/src/button/index.tsx
• packages/components/src/button/stories/index.tsx