Yumma CSS 3.10

This update might change existing features, make sure you check out the release notes before upgrading.

Breaking changes

This version introduces some breaking changes that you should be aware of before upgrading.

Teal removal

We've decided to remove the teal color option from our color system. If you were using it, we recommend switching to mint or cyan for a similar aesthetic.

Shorthand for rotation

We've replaced the t-r-* (transform: rotate()) utilities with ro-* which now uses the standalone rotate property. This makes it more consistent with other property-based utilities.

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

Font family renaming

To improve clarity and consistency, we've renamed two font family prefixes:

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

All-new colors

We finally revamped the whole color palette to make it more accessible and use more vibrant colors.

We've also added 7 new colors to the family, giving you even more flexibility for your designs.

• Lime
• Mint
• Sky
• Lavender
• Magenta
• Coral
• Zinc

New pseudo-class variants

This release adds 11 new pseudo-class variants to help you style elements based on their state or position.

Introducing Transitions

We've introduced a new transitions category to help you create smooth animations between states.

<div class="bg-indigo d-16 tp-a td-300 ttf-io h:bg-indigo-3"></div>

The new utilities include:

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

Expanded utilities

We've also expanded the ar-* (aspect-ratio) utilities to support more common ratios.

Upgrade

You can get the latest version of Yumma CSS from npm:

pnpm install yummacss@latest