EVA CSS JavaScript Generator ( v-alpha )

This interface allows you to configure and generate EVA CSS variables in JavaScript instead of SCSS.

Reset Configuration

EVA CSS Config:

✅ EVA CSS - Diagnostic

🌍 Environnement: Production
📍 Hostname: eva-css.xyz
⚡ EvaCSSGenerator: Chargé
💾 localStorage: Disponible

EVA CSS Generator

Design System Constants

0.5rem
142.4
1rem

Generated Variables:

--4__: clamp(0.5rem, 0.4vw - 0.14rem, 0.28rem);
--4_: clamp(0.09rem, 0.21vw + 0.06rem, 0.28rem);
--4: clamp(0.14rem, 0.14vw + 0.13rem, 0.28rem);
--4-: clamp(0.23rem, 0.07vw + 0.19rem, 0.28rem);
--8__: clamp(0.5rem, 0.79vw - 0.28rem, 0.56rem);
--8_: clamp(0.17rem, 0.42vw + 0.13rem, 0.56rem);
--8: clamp(0.28rem, 0.28vw + 0.25rem, 0.56rem);
--8-: clamp(0.45rem, 0.14vw + 0.38rem, 0.56rem);
--12__: clamp(0.5rem, 1.19vw - 0.42rem, 0.83rem);
--12_: clamp(0.26rem, 0.62vw + 0.19rem, 0.83rem);
--12: clamp(0.42rem, 0.42vw + 0.38rem, 0.83rem);
--12-: clamp(0.68rem, 0.21vw + 0.56rem, 0.83rem);
--20__: clamp(0.5rem, 1.98vw - 0.7rem, 1.39rem);
--20_: clamp(0.43rem, 1.05vw + 0.31rem, 1.39rem);
--20: clamp(0.7rem, 0.7vw + 0.63rem, 1.39rem);
--20-: clamp(1.13rem, 0.35vw + 0.94rem, 1.39rem);
--32__: clamp(0.5rem, 3.16vw - 1.11rem, 2.22rem);
--32_: clamp(0.69rem, 1.67vw + 0.5rem, 2.22rem);
--32: clamp(1.11rem, 1.11vw + 1rem, 2.22rem);
--32-: clamp(1.8rem, 0.56vw + 1.5rem, 2.22rem);
--34__: clamp(0.5rem, 3.36vw - 1.18rem, 2.36rem);
--34_: clamp(0.73rem, 1.77vw + 0.53rem, 2.36rem);
--34: clamp(1.18rem, 1.18vw + 1.06rem, 2.36rem);
--34-: clamp(1.91rem, 0.59vw + 1.6rem, 2.36rem);
--52__: clamp(0.5rem, 5.14vw - 1.81rem, 3.61rem);
--52_: clamp(1.12rem, 2.71vw + 0.81rem, 3.61rem);
--52: clamp(1.81rem, 1.81vw + 1.63rem, 3.61rem);
--52-: clamp(2.93rem, 0.9vw + 2.44rem, 3.61rem);
--84__: clamp(0.5rem, 8.31vw - 2.92rem, 5.83rem);
--84_: clamp(1.8rem, 4.38vw + 1.31rem, 5.83rem);
--84: clamp(2.92rem, 2.92vw + 2.63rem, 5.83rem);
--84-: clamp(4.72rem, 1.46vw + 3.95rem, 5.83rem);
--136__: clamp(0.5rem, 13.45vw - 4.72rem, 9.44rem);
--136_: clamp(2.92rem, 7.1vw + 2.13rem, 9.44rem);
--136: clamp(4.72rem, 4.72vw + 4.25rem, 9.44rem);
--136-: clamp(7.64rem, 2.36vw + 6.39rem, 9.44rem);
--220__: clamp(0.5rem, 21.76vw - 7.64rem, 15.28rem);
--220_: clamp(4.72rem, 11.49vw + 3.44rem, 15.28rem);
--220: clamp(7.64rem, 7.64vw + 6.88rem, 15.28rem);
--220-: clamp(12.36rem, 3.82vw + 10.34rem, 15.28rem);
--356__: clamp(0.5rem, 35.2vw - 12.36rem, 24.72rem);
--356_: clamp(7.64rem, 18.59vw + 5.56rem, 24.72rem);
--356: clamp(12.36rem, 12.36vw + 11.13rem, 24.72rem);
--356-: clamp(20rem, 6.18vw + 16.73rem, 24.72rem);
--576__: clamp(0.5rem, 56.96vw - 20rem, 40rem);
--576_: clamp(12.36rem, 30.08vw + 9rem, 40rem);
--576: clamp(20rem, 20vw + 18rem, 40rem);
--576-: clamp(32.36rem, 10vw + 27.07rem, 40rem);
--712__: clamp(0.5rem, 70.41vw - 24.72rem, 49.44rem);
--712_: clamp(15.28rem, 37.17vw + 11.13rem, 49.44rem);
--712: clamp(24.72rem, 24.72vw + 22.25rem, 49.44rem);
--712-: clamp(40rem, 12.36vw + 33.46rem, 49.44rem);
--fs-12__: clamp(0.32rem, 0.62vw + 0.19rem, 0.83rem);
--fs-12_: clamp(0.42rem, 0.42vw + 0.38rem, 0.83rem);
--fs-12: clamp(0.55rem, 0.21vw + 0.56rem, 0.83rem);
--fs-16__: clamp(0.43rem, 0.83vw + 0.25rem, 1.11rem);
--fs-16_: clamp(0.56rem, 0.56vw + 0.5rem, 1.11rem);
--fs-16: clamp(0.73rem, 0.28vw + 0.75rem, 1.11rem);
--fs-18__: clamp(0.48rem, 0.94vw + 0.28rem, 1.25rem);
--fs-18_: clamp(0.63rem, 0.63vw + 0.56rem, 1.25rem);
--fs-18: clamp(0.82rem, 0.31vw + 0.85rem, 1.25rem);
--fs-24__: clamp(0.65rem, 1.26vw + 0.38rem, 1.67rem);
--fs-24_: clamp(0.84rem, 0.84vw + 0.75rem, 1.67rem);
--fs-24: clamp(1.09rem, 0.42vw + 1.13rem, 1.67rem);
--fs-36__: clamp(0.96rem, 1.88vw + 0.56rem, 2.5rem);
--fs-36_: clamp(1.25rem, 1.25vw + 1.13rem, 2.5rem);
--fs-36: clamp(1.63rem, 0.63vw + 1.69rem, 2.5rem);
--fs-52__: clamp(1.39rem, 2.71vw + 0.81rem, 3.61rem);
--fs-52_: clamp(1.81rem, 1.81vw + 1.63rem, 3.61rem);
--fs-52: clamp(2.35rem, 0.9vw + 2.44rem, 3.61rem);
--fs-72__: clamp(1.92rem, 3.76vw + 1.13rem, 5rem);
--fs-72_: clamp(2.5rem, 2.5vw + 2.25rem, 5rem);
--fs-72: clamp(3.25rem, 1.25vw + 3.38rem, 5rem);

Generated Classes:

.w-4__ { width: var(--4__); }
.w-4_ { width: var(--4_); }
.w-4 { width: var(--4); }
.w-4- { width: var(--4-); }
.w-4-px { width: var(--4-px); }
.w-4-rem { width: var(--4-rem); }
.h-4__ { height: var(--4__); }
.h-4_ { height: var(--4_); }
.h-4 { height: var(--4); }
.h-4- { height: var(--4-); }
.h-4-px { height: var(--4-px); }
.h-4-rem { height: var(--4-rem); }
.p-4__ { padding: var(--4__); }
.p-4_ { padding: var(--4_); }
.p-4 { padding: var(--4); }
.p-4- { padding: var(--4-); }
.p-4-px { padding: var(--4-px); }
.p-4-rem { padding: var(--4-rem); }
.px-4__ { padding-inline: var(--4__); }
.px-4_ { padding-inline: var(--4_); }
.px-4 { padding-inline: var(--4); }
.px-4- { padding-inline: var(--4-); }
.px-4-px { padding-inline: var(--4-px); }
.px-4-rem { padding-inline: var(--4-rem); }
.pr-4__ { padding-right: var(--4__); }
.pr-4_ { padding-right: var(--4_); }
.pr-4 { padding-right: var(--4); }
.pr-4- { padding-right: var(--4-); }
.pr-4-px { padding-right: var(--4-px); }
.pr-4-rem { padding-right: var(--4-rem); }
.py-4__ { padding-block: var(--4__); }
.py-4_ { padding-block: var(--4_); }
.py-4 { padding-block: var(--4); }
.py-4- { padding-block: var(--4-); }
.py-4-px { padding-block: var(--4-px); }
.py-4-rem { padding-block: var(--4-rem); }
.br-4__ { border-radius: var(--4__); }
.br-4_ { border-radius: var(--4_); }
.br-4 { border-radius: var(--4); }
.br-4- { border-radius: var(--4-); }
.br-4-px { border-radius: var(--4-px); }
.br-4-rem { border-radius: var(--4-rem); }
.mb-4__ { margin-bottom: var(--4__); }
.mb-4_ { margin-bottom: var(--4_); }
.mb-4 { margin-bottom: var(--4); }
.mb-4- { margin-bottom: var(--4-); }
.mb-4-px { margin-bottom: var(--4-px); }
.mb-4-rem { margin-bottom: var(--4-rem); }
.mt-4__ { margin-top: var(--4__); }
.mt-4_ { margin-top: var(--4_); }
.mt-4 { margin-top: var(--4); }
.mt-4- { margin-top: var(--4-); }
.mt-4-px { margin-top: var(--4-px); }
.mt-4-rem { margin-top: var(--4-rem); }
.pt-4__ { padding-top: var(--4__); }
.pt-4_ { padding-top: var(--4_); }
.pt-4 { padding-top: var(--4); }
.pt-4- { padding-top: var(--4-); }
.pt-4-px { padding-top: var(--4-px); }
.pt-4-rem { padding-top: var(--4-rem); }
.pb-4__ { padding-bottom: var(--4__); }
.pb-4_ { padding-bottom: var(--4_); }
.pb-4 { padding-bottom: var(--4); }
.pb-4- { padding-bottom: var(--4-); }
.pb-4-px { padding-bottom: var(--4-px); }
.pb-4-rem { padding-bottom: var(--4-rem); }
.g-4__ { gap: var(--4__); }
.g-4_ { gap: var(--4_); }
.g-4 { gap: var(--4); }
.g-4- { gap: var(--4-); }
.g-4-px { gap: var(--4-px); }
.g-4-rem { gap: var(--4-rem); }
.w-8__ { width: var(--8__); }
.w-8_ { width: var(--8_); }
.w-8 { width: var(--8); }
.w-8- { width: var(--8-); }
.w-8-px { width: var(--8-px); }
.w-8-rem { width: var(--8-rem); }
.h-8__ { height: var(--8__); }
.h-8_ { height: var(--8_); }
.h-8 { height: var(--8); }
.h-8- { height: var(--8-); }
.h-8-px { height: var(--8-px); }
.h-8-rem { height: var(--8-rem); }
.p-8__ { padding: var(--8__); }
.p-8_ { padding: var(--8_); }
.p-8 { padding: var(--8); }
.p-8- { padding: var(--8-); }
.p-8-px { padding: var(--8-px); }
.p-8-rem { padding: var(--8-rem); }
.px-8__ { padding-inline: var(--8__); }
.px-8_ { padding-inline: var(--8_); }
.px-8 { padding-inline: var(--8); }
.px-8- { padding-inline: var(--8-); }
.px-8-px { padding-inline: var(--8-px); }
.px-8-rem { padding-inline: var(--8-rem); }
.pr-8__ { padding-right: var(--8__); }
.pr-8_ { padding-right: var(--8_); }
.pr-8 { padding-right: var(--8); }
.pr-8- { padding-right: var(--8-); }
... and 871 more classes

Demonstration - width:

20
32
52
84