defining spacing units
From #24, we've discussed moving from px
to rem
for typography.
I think we should define some 'rules' to what CSS unit we should be using for what ruleset. I wrote some thoughts on this a while back - https://alwaystwisted.com/articles/determining-css-units-for-your-pattern-library - and I think those 'rules' would work well for the visual frameworks codebase too.
Regarding Sketch - I'm not entirely sure, but I think we can use Theo (the software that transforms the design tokens .yml
to Sass variables) to change the px
value to a rem
. I know it can do this with colour - changing hex to hsla, rgb, etc.
This way we can initially take the px
value from Sketch and at some point (when we've investigated turning the .yml
into something Sketch can consume) have the design tokens yml
as a 'single source of truth'.
-
investigate Theo CSS value transform -
update the tokens accordingly -
investigate if this is something that can be linted.