search

arielsalminen / vue-design-system

An open source tool for building UI Design Systems with Vue.js
https://vueds.com
MIT License
2.17k stars 224 forks source link

Only a few changes needed to make spacing rem-compatible #181

Closed earlman closed 2 years ago

earlman commented 5 years ago

Hi,

I wanted to define my tokens by rem units, rather than by px. It took me a while to figure it out, but it came down to just changing a couple lines of code. I haven't submitted a pull request before, but I was wondering if there was interest in my solution

benhartwigdesign commented 5 years ago

I would be curious to know how to include rem units within the Vue Design System!

earlman commented 5 years ago

It's been a while since I worked with VDS, but I think that the only thing that prevented the system from compiling when I changed all the size tokens to REM was a couple small details in how they implemented the tokens in their mixins.

The first issue is where they use math in their inset-squish-space mixin. The second is where they use math in the styles for their docs. Basically, they used "1px" in the formula itself which is incompatible with REMs

You can see the changes I made here:

and the fork: