Yumma CSS 3.10

Breaking changes

Awareness of these changes is recommended before upgrading.

Teal removal

The teal color is removed. Use mint or cyan for a similar aesthetic.

Rotation shorthand

The t-r-* (transform: rotate()) utilities are replaced with ro-*, which uses the standalone rotate property for consistency.

<div class="t-r-45">...</div>
<div class="ro-45">...</div>

Font family updates

Two font family prefixes are renamed:

<div class="ff-s">System</div>
<div class="ff-c">Charters</div>
<div class="ff-d">Default</div>
<div class="ff-s">Serif</div>

Colors

The color palette is redesigned for better accessibility & vibrancy. This update introduces 7 new colors:

• Lime, Mint, Sky, Lavender, Magenta, Coral, & Zinc.

Pseudo-class variants

Eleven new pseudo-class variants are added to style elements based on state or position.

Transitions

A new transitions category is introduced for smooth state animations.

<div class="d-16 bg-indigo tp-a td-300 tdu-300 ttf-io h:t-s-80 h:bg-slate-7"></div>

The new utilities include:

• td-* - transition-delay (50ms steps)
• tdu-* - transition-duration (50ms steps)
• tp-* - transition-property
• ttf-* - transition-timing-function

Aspect ratio

The ar-* (aspect-ratio) utilities now support common ratios.

<div class="ar-*">...</div>

Upgrade

Get the latest version of Yumma CSS:

pnpm up yummacss@latest