Colors v3

[Studio384]

Fixes #43

This pull request further reworks our color system.

Changes

• Improve the naming and availablity of the various colors as well as their semantic naming.
• Improve color documentation with more contrast information.
• Rework color weighting.
  • Add alpha color variant for every color scale.
  • Remove redundant and unused color variants, remap weights accordingly.
  • Move base from 700 to 600.
  • Add dark mode variant for every color scale.
• Support color variable in more components.
  • Pagination
  • List item
  • Form controls
  • Dropdown
  • Pivot
• Support dark mode.
  • Check existing components for full support.

Color weights

The core color weights will be reduced from 12 to 10, scrapping one background surface variant and one border variant.

Color		50	100	200	300	400		500	Base	700	800	900	Contrast	Alpha
Old	50	100	200	300	400	500	550	600	700	750	800	900	text
New		50	100	200	300	400		500	600	700	800	900	text	600a

Bold is the base color. All existing colors are being remapped to the value underneath them. With the exception of 600, which will be updated to be between the old 550 and 600 variants. Additionally, a 600a variant is being added, which will be a transparent variant of the new 600 color.

Features

• Pagination rework: the pagination component has been updated with a new design and now uses CSS variables to support various color variants, it will still default to the accent color.
• Colored lists: support for color classes has been added to lists, replacing list-item-danger with list-item-colored red.
• Colored pivots: pivots now support the color classes. Pilled pivots now have a clear hover state.
• Colored forms: forms now support the color classes.
• Colored dropdowns: dropdown menus now support the color classes.
• CSS variable: the full color palette is now available as CSS variable.
• Dark and system theme support: Mellow has built-in support for a dark and light theme.
  • New text, border, and background utility classes to work with the light and dark theme and their inverse.

Classes

New classes

• .list-item-colored
• .light
• .system
• .dark
• .bg-system(-inverse)
• .text-system(-inverse)
• .border-system(-inverse)

Removed classes

• .list-item-danger

Documentation changes

These changes have been made to the documentation beyond the changes listed above.

• Updates list documentation to use radio and checkbox classes.
• Updates list documentation with danger variant in "Complex example".
• Introduces theme-aware syntax highlighting for Hugo's built-in highlighter. The theme is based on monokai and monokailight with minor changes.