Nested alias values

[hmalaud]

I was wondering if there were any way to use an alias with sub values like so (in a .yml file):

aliases:
    mq:
        value:
            touch: '(pointer: coarse) and (hover: none)'
            desktop:
                all: '(min-width: 1024px)'

This seems not to crash anything when compiling, but I can't figure out how to use the value, if it even exists (tried {!mq.touch}, {!mqtouch}, {!mq-touch}, {!mq_touch} with no success).

Thanks for your help!

[dayton-bobbitt]

Hi @hmalaud, did you ever find out if nesting aliases / props is possible?

I'm hoping to accomplish something like the following:

props:
  color:
    border:
      button:
        value: "#000"
    background:
      button:
        value: "#FFF"

Which would generate the following Sass variables:

$color-border-button: #000 !default;
$color-background-button: #FFF !default;

[hmalaud]

Hello @dayton-bobbitt , unfortunately I wasn't able to make it work this so I forked the project and made something that was working for me back then: https://github.com/hmalaud/theo. I wanted something like this to be loopable, so I'm not sure this is exactly what you're looking for:

props:
  -
    name: bg-color
    value: '#whatever'
    type: color
  -
    name: color
    value: '#whatever'
    type: color
  -
    name: light-color
    value: '#more-whatever'
    type: color

I can't promise it will work for you, but when I tried it 3/4 months ago, it was still working with the latest updates from theo! 🤞🏻

[dayton-bobbitt]

Thanks @hmalaud! I'm currently exploring tools we can use to generate design tokens with cross-platform support, so I definitely keep this in mind.