Ionic 4 CSS Variables - ionic-framework

Question

I'm trying to use the variables defined on the variables.scss file, but remote debugging the app i see that no variable was defined on :root and on the elements that use it has Invalid value.
variables.scss
:root {
/** primary **/
--ion-color-primary: #d76f47;
... more variables
}
page.scss:
.product-name {
color: var(----ion-color-primary);
}
angular.json (untouched)
...
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
}
],
...
This only happens while runing on the device (Android 4.4.2).
While on the browser everything works as it should be.
Ionic:
ionic (Ionic CLI) : 4.3.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : #ionic/angular 4.0.0-beta.16
#angular-devkit/build-angular : 0.10.6
#angular-devkit/schematics : 7.0.6
#angular/cli : 7.0.6
#ionic/angular-toolkit : 1.2.0
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib#8.1.1)
Cordova Platforms : android 7.1.2, browser 5.0.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.3, (and 6 other plugins)
System:
Android SDK Tools : 26.1.1
NodeJS : v9.10.1 (/usr/local/bin/node)
npm : 6.2.0
OS : Linux 4.15
Thanks in advance.

Answer 1

If you want to change color for your custom dom
.product-name {
color: var(--ion-color-primary);
}
but for the dom that has shadow root maybe you should to confirm if it has variable
dom-name {
--color: var(----ion-color-primary); //if dom declare --color as css4 variable
}