Some stylus variables are not available

Software version

Quasar: 0.16.0 OS: OSX Node: 8.9.1 NPM: 5.7.1 Browsers: Chrome

What did you get as the error?

I’m trying to use some style variables from here https://quasar-framework.org/components/stylus-variables.html in app.styl. I found that some variables are not available when imported. This is my code:

@import '~variables'

.border-1
  border 1px solid $form-autofill

.border-2
  border 1px solid $item-separator-color

.border-1 works as expected, in the browser I got border: 1px solid #ff9800;

.border-2 doesn’t works, this is the result in the browser: border: 1px solid $item-separator-color;

I tried with other variables with mixed results, some work fine others do not work.

What were you expecting?

I want to use all the variables available here https://quasar-framework.org/components/stylus-variables.html when importing with @import '~variables

[rstoenescu]

• Core variables: https://github.com/quasarframework/quasar/blob/dev/src/css/core.variables.styl
• Theme specific:
  • mat: https://github.com/quasarframework/quasar/blob/dev/src/css/variables.mat.styl
  • ios: https://github.com/quasarframework/quasar/blob/dev/src/css/variables.ios.styl

You might want to also @import 'quasar-framework/src/css/variables.mat/ios.styl' after the initial variables. There are some theme specific variables that apply only to one of the two themes, so if you build for both themes you need to have this in mind.

[rstoenescu]

The mat/ios was meant for you to pick one theme 😃