Auto-complete variable in input field

[sunny]

This is a similar request to using trem to convert pixels to REMs, but it’d be cool if typing:

–my-variable + Enter

In an input field automatically converted to:

var(–my-variable)

[yankiara]

Hi @Sunny,
This is brilliant!

And I’m pretty sure we could even NOT type the -- in most inputs since they accept only numeric values. Even using units, first character will always be a digit, so it can be detected.

[sunny]

Give Kevin credit, I stole this idea from ACSS

Continuing the discussion from 1.3.3.1:

@Louis

Improvement: Quick var() shortcut in unit fields → --your value + Enter will be transformed to var(--your-value). Feedback welcome to extend to other fields.

@Louis are you kidding me

[Marius]

Hey there @sunny.

Thanks for your once again nice shortcut suggestion.
I’ve just tested it, and it works perfectly.

I’m wondering if the variable picker is still being considered.
The new (global) color system with the ability to set custom names and variables is hopefully just the beginning

@Louis

I didn’t mention it yesterday as I’m not quite sure of the timing for this, but global variables will be making their way and will be easily selectable when modifying their linked properties.

@Louis

I think we’ll be moving towards more globally managed and selectable variables, but the idea is fundamentally the same.

[StrangeTech]

@sunny

@Louis are you kidding me

From your imagination to reality in half a day! Hahaha

[StrangeTech]

@Marius

I’m wondering if the variable picker is still being considered.

Definitely the next logical step - assuming this will be connected with the TailWind, as @Louis was demoing autocompletion similar to this in a live a short while ago.

[Louis]

Hello @sunny,

Thanks for the suggestion!
We were planning to add this but never quite got round to it. Your post seemed to be the perfect time to push it forward.

The first implementation transformed the value into a variable without the need for --, although we decided this was too general.

We will be extending it to the other fields in the coming updates and working through removing number only fields to allow for more flexibility.

@Marius

I’m wondering if the variable picker is still being considered.

@StrangeTech

Definitely the next logical step - assuming this will be connected with the TailWind, as @Louis was demoing autocompletion similar to this in a live a short while ago.

The variable picker is on the roadmap, but won’t be part of the same package as the Tailwind autocomplete.
As @Marius points out, the variable picker should follow the same logic as the colour system with globally tracked, customisable (in every way) variables.

Cheers,

[StrangeTech]

@Louis

The variable picker is on the roadmap, but won’t be part of the same package as the Tailwind autocomplete.
As @Marius points out, the variable picker should follow the same logic as the colour system with globally tracked, customisable (in every way) variables.

Understood, thanks for clarifying. At the moment, each new feature seems to open the way to others, so I am just enjoying the journey.

[StrangeTech]

@Araminta, just highlighting another completed feature request that can be marked as done.