feat: add design tokens and Container Section Card to Storybook

[andre-code]

This PR introduces foundational updates to our Storybook:

✅ What's included

• Design Tokens: New stories for the following tokens used across our UI:

  • Colors
  • Spacing
  • Fonts
  • Borders & Shadows
  • Opacity

• Container Section Card: First documented component added under the new structure, following improved documentation practices for component stories in Storybook.

📚 Why this matters

We’ve started reorganizing our Storybook to align with the Atomic Design methodology, which the design team also follows. This structure will help improve consistency, reusability, and collaboration between design and development teams.

Our new Storybook structure looks like this:

📁 Design Tokens
  ├── Colors ✅
  ├── Spacing ✅
  ├── Fonts ✅
  ├── Borders & Shadows ✅
  └── Opacity ✅

📁 Atoms
  ├── Button
  ├── Input
  ├── Badge
  └── Lists
      ...

📁 Molecules
  ├── Card
  │    └── ContainerSectionCard ✅
  ├── Modal
  └── ...

Ref: [Atomic Design by Brad Frost](https://bradfrost.com/blog/post/atomic-web-design/)

📌 Next steps / To-dos for upcoming PRs

• Create a ContainerSectionCard component
• Fix layout inconsistencies in related cards and sections:
  • Update Data connector card spacing (me-2 instead of gap-2)
  • Update "My Projects" and "My Group Projects" spacing to use .d-flex justify-content-between instead of ms-auto
  • Move description into the body for “Session Secret Slots” card and apply proper text styles
  • Add a Figma link to Storybook for design reference

References

• [UI Component Reference – Build Team](https://www.notion.so/renku/UI-Component-Reference-Build-Team-2070df2efafc80e9826bc5f8f42d2015)
• [Component Inventory](https://www.notion.so/renku/Inventory-2140df2efafc8005893ce4561860c588) – a draft inventory of the most-used components we plan to align with this new structure

/deploy
! RESTORE THE PREVIOUS POINTER to andrea/simplify-dc-form

fix #3551

[RenkuBot]

You can access the deployment of this PR at https://renku-ci-ui-3744.dev.renku.ch

[lorenzo-cavazzi]

I'm going through this PR and I have two main comments:

• Design tokens: I like the level of detail! That should cover most of the needs of the design team. However, using static strings for the style attributes we wish to capture isn't the best approach. We would need to manually update those strings if we update anything on Bootstrap. We can check the rendered elements instead using getComputedStyle
• Molecules: Great to include more examples and longer descriptions wherever necessary (Cards are a good example) but sections like "Layout & Spacing" or "Typography" seem unnecessary (E.G. we don't need to say that card's background are white, nor that the class .bg-white is applied -- which isn't the case) and hard to maintain in the long run (not extracted automatically).

In the reference pitch there was something about exporting to Figma but I don't see from here how it is done.

[lorenzo-cavazzi]

You can get the values using a function like getComputedStyle instead of hardcoding

[andre-code]

Thanks @lorenzo-cavazzi for the review. I agree with your suggestions. I’ve refactored the code to retrieve values using getComputedStyle and removed the unnecessary information from the card component.

[lorenzo-cavazzi]

Very nice! 👏

Just a couple of small changes before we merge.

[lorenzo-cavazzi]

Great to have this common element!
The classes aren't consistent throughout the page (see screenshot). We could use the same visualization across all components on this page

[lorenzo-cavazzi]

I'm not sure we need to show all the gray shades since we generally don't use them directly through classes. I suggest we rename this section to "main colors", leave "white, black, light, dark", remove all the "gray-" variations and add the other main colors (danger, success, info, ...)

[lorenzo-cavazzi]

Suggested change

	fontSizes: ["fs-1", "fs-2", "fs-3", "fs-4", "fs-5", "fs-6"],
	fontSizes: ["fs-1", "fs-2", "fs-3", "fs-4"],

We can drop 5 and 6 since they are the same size of 3 and 4 and we generally don't use them anymore -- there are leftovers ofc, but most of them are on legacy pages.

[lorenzo-cavazzi]

It seems the spacing is applied twice vertically (see screenshot). There is some combination with padding in the parent container that doesn't work as expected

[andre-code]

Thanks for the feedback, @lorenzo-cavazzi I’ve applied your suggestions.

[lorenzo-cavazzi]

Very nice! 👏

There is still something off with the margins; everything else is fine 👍

[lorenzo-cavazzi]

Lgtm! 🚀

[RenkuBot]

Tearing down the temporary RenkuLab deplyoment for this PR.