Additional Utilities
A collection of Wedges design system utility classes.
Font Size
The following font size utilities are available with Wedges.
| Class | Values |
|---|---|
text-xxs | |
text-xs | |
text-sm | |
text-base | |
text-lg | |
text-xl | |
text-2xl | |
text-3xl | |
text-4xl | |
text-5xl | |
text-6xl | |
text-7xl | |
text-8xl | |
text-9xl | |
Box Shadow
The additional box shadow utilities are available with the shadow-wg-{scale} classes.
| Class | Values |
|---|---|
shadow-wg-xs | |
shadow-wg-sm | |
shadow-wg-md | |
shadow-wg-lg | |
shadow-wg-xl | |
shadow-wg-2xl | |
shadow-wg-overlay | |
Animations
Wedges introduces a set of simple fade animation utilities. These animations are used across Wedges components, making them smoother and more visually appealing. Use them with the animation-wg-{name} utility.
- Fade in up:
wg-fade-in-up - Fade in down:
wg-fade-in-down - Fade in left:
wg-fade-in-left - Fade in right:
wg-fade-in-right - Fade out:
wg-fade-out
Keyframes for these animations are defined as follows:
keyframes: {
fadeInUp: {
"0%": {
opacity: "0",
transform: "translateY(5px) scale(.97)",
},
"100%": {
opacity: "1",
transform: "translateY(0px) scale(1)",
},
},
fadeInDown: {
"0%": {
opacity: "0",
transform: "translateY(-5px) scale(.97)",
},
"100%": {
opacity: "1",
transform: "translateY(0px) scale(1)",
},
},
fadeInLeft: {
"0%": {
opacity: "0",
transform: "translateX(5px) scale(.97)",
},
"100%": {
opacity: "1",
transform: "translateX(0px) scale(1)",
},
},
fadeInRight: {
"0%": {
opacity: "0",
transform: "translateX(-5px) scale(.97)",
},
"100%": {
opacity: "1",
transform: "translateX(0px) scale(1)",
},
},
fadeOut: {
"0%": {
opacity: "1",
transform: "scale(1)",
},
"100%": {
opacity: "0",
transform: "scale(.97)",
},
},
},