Yumma CSS 3.10
Redesigned color palette, new pseudo-class variants, & transition utilities.
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-(value) (transform: rotate()) utilities are replaced with ro-(value), 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>New Color Palettes
The color palette is redesigned for better accessibility & vibrancy. This update introduces 7 new colors:
- Lime, Mint, Sky, Lavender, Magenta, Coral, & Zinc.
Red
Orange
Yellow
Lime
Mint
Green
Cyan
Sky
Blue
Indigo
Violet
Lavender
Magenta
Pink
Coral
Zinc
Gray
Slate
Silver
Pseudo Class Variants
Eleven new pseudo-class variants are added to style elements based on state or position.
| Prefix | Variant |
|---|---|
c:* | :checked |
d:* | :disabled |
e:* | :empty |
fc:* | :first-child |
i:* | :invalid |
in:* | :indeterminate |
lc:* | :last-child |
nc:* | :nth-child |
r:* | :required |
ro:* | :read-only |
v:* | :valid |
Transitions
A new transitions category is introduced for smooth state animations.
<div
class="w-16 h-16 bg-indigo tp-a td-100 tdu-150 ttf-io h:t-s-80 h:bg-slate-7"
></div>The new utilities include:
td-(value)-transition-delay(50ms steps)tdu-(value)-transition-duration(50ms steps)tp-(value)-transition-propertyttf-(value)-transition-timing-function
Aspect Ratio
The ar-(value) (aspect-ratio) utilities now support common ratios.
<div class="ar-(value)">…</div>Upgrade
Check the Upgrading Guide for a full list of utility renames & removals.
pnpm up yummacss@latest