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 renku=release-2.5.0
! RESTORE THE PREVIOUS POINTER to andrea/simplify-dc-form

[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