Proposal: design system utilities

[roman01la]

See styled-system for reference.

I think this can be useful for someone who's building design system for their project. I've pushed transformers for spacing, font size and width utilities in 660693d.

The idea

The idea is to hide details about spacing, font size, etc. behind special attributes.

For example this

{:width     0.1
 :font-size 2
 :mx        4}

Transforms into this (based on user-defined scale, such as :font-size [4 8 16 32 64])

{:margin-right "64px",
 :margin-left  "64px",
 :font-size    "16px",
 :width        "10%"}

Possible API

Those utilities should be reusable and used to extend defstyled components. Rum-style mixins might be a good solution (I'm biased since I'm Rum user).

(defstyled Button :button <
  mixins/space
  mixins/flex
  {:color "#fff"})

(Button
  {:px    2
   :py    1
   :align "center"})

What do you think? Any ideas? I'd really appreciate your feedback.

[esseswann]

It would be extremely handy to specify at least a basic unit like classic html { font-size: 8px } used for rem-based grid. I'm not sure about doing it with multiple contexts but for simple cases just swapping some imported atom (reset! cljss/default-unit "8px") wolud be nice.