🧱 Implementing the new design system

[ziggabyte]

Description

This PR is the main to-do-list of the implementation of the new Zetkin design system, designed by @theo-organism .

Items that are links are ready to be worked on, click the link to get to the issue here on gitHub.

• Styles
  • Typography
  • Colors
  • Elevation
• Data display
  • 🧱 ZUI: Icon #2165
  • Avatar
  • List
  • Chips
  • 🧱 ZUI: Divider #2161
  • 🧱 ZUI: Badge #2162
  • 🧱 ZUI: Bar diagram #2166
  • 🧱 ZUI: Tooltip #2163
• Inputs
  • 🧱 ZUI: Autocomplete #2320
  • Select
  • 🧱 ZUI: Slider #2323
  • 🧱 ZUI: Textfield #2332
  • 🧱 ZUI: Date/time pickers #2319
  • Button
  • Button group
  • Icon button
  • 🧱 ZUI: Switch #2173
  • 🧱 ZUI: Toggle button #2168
  • 🧱 ZUI: Checkbox #2169
  • 🧱 ZUI: Radio group #2170
• Feedback
  • Alert
  • Backdrop
  • 🧱 ZUI: Circular and linear progress #2318
  • 🧱 ZUI: Skeleton #2322
  • Toast
• Navigation
  • Pagination
  • Stepper
  • Tabs
  • Link
  • Menu
• Layout
  • Sections
  • Accordion
  • Tree view
  • Modal
• Molecules
  • Site navigation
  • Item card
  • Item list card
  • Page header

[sefsh]

ZUIDivider

Current

Wanted

• The middle variant should look like what the current fullWidth looks like.
• The fullWidth should extend to the very edge of the card.

Two examples of divider at a truly full width:

[sefsh]

ZUIRadioGroup

Current

Wanted

• margin-left removed for first item (top, bottom, start labelPlacement)
• margin-right removed for last item (top, bottom, end labelPlacement)
• margin-left doubled (2x) for non-first items (start labelPlacement)
• add 8px margin-top, margin-bottom to item (top, bottom labelPlacement)
• the error state that ZUICheckboxGroup, ZUISwitchGroup has

[sefsh]

ZUICheckbox

Current

Wanted

• margin-left removed (top, bottom, start labelPlacement)
• add 8px margin-top, margin-bottom to item (top, bottom labelPlacement)
• margin-right removed (top, bottom, end labelPlacement)
• disable text selection on label

[ziggabyte]

ZUIDivider

* The `middle` variant should look like what the current `fullWidth` looks like.

* The `fullWidth` should extend to the very edge of the card.

This has to do with padding of the box that Storybook stories are rendered in. The fullWidth version of the ZUIDivider does go to the edge of the div that it is in, it's just that that div is inside of another div (by Storbook) that has some padding, which means it does not look like it goes "all the way". I can update the example to add a border around the div where the text and dividers are rendered, to make it more clear that they do go all the way to its closest parent.

[sefsh]

ZUICheckboxGroup

Wanted

• remove margin-right
• disable text selection on label

[sefsh]

ZUISwitch

Wanted

• margin-left removed (top, bottom, start labelPlacement)
• margin-right removed (top, bottom, start labelPlacement)
• add 8px margin-top, margin-bottom to item (top, bottom labelPlacement)
• disable text selection on label

[sefsh]

ZUISwitchGroup

Wanted

• remove margin-right from label
• disable text selection on label

[sefsh]

ZUIBadge

Current

Available colors

Wanted

• "data colors", primary color should also be available
• a smaller size should be available for non-numerical version (0.5 rem)
• a 1px solid white border outside the dot for it to work as overlay on buttons etc.

[thepeno]

ZUIIcon

Wanted

• Medium icon should be 24px width and height.
• Large icon should be 35px width and height.

(These are default sizes from MUI)

[richardolsson]

I just merged #2450 into main, which means that Storybook is now included in the automatic app dev/preview builds (e.g. https://app.dev.zetkin.org/storybook). This means that we can (soon) disable the separate storybook build.

This PR is so dependent on storybook builds, so I won't disable the separate builds until this PR has merged in main the next time. But after that, we can disable the storybook builds and just always use the /storybook link to access storybook.