I have done a basic upgrade of an existing Touch 2.4.2 app to Modern Toolkit and I am trying to use button theme mixin. Functionally the app is working.

In app.json

Code:
"toolkit": "modern",
"theme": "theme-material",
The following is the code in sass/var/all.scss file

Code:
//Button
$button-text-transform:null;
$border-radius: 0;
$button-icon-size:1.8em; 
$button-color:white;
$button-font-size:1em;

@include button-ui(
  $ui: 'test',
  $font-weight: bold,
  $color:red 
);
@include button-ui(
 $ui: 'elbButton',
 $font-weight: bold,
 $color:green
);
The UI as set to the button like below in the view

Code:
 {
               xtype: 'button', 
               id:'loginbuttonId', 
               html: 'test', 
               margin: '10px', 
               ui: 'test', 
               action: 'login'
           },
           {
               xtype: 'button', 
               id:'resetbuttonId', 
               action:'resetLogin', 
               text: 'Reset', 
               margin: '10px', 
               ui: 'elbButton'
           }
With this I am able to see the x-button-test style in the generated style sheets but the style is not applied to the button on screen. Shown below is the sample test styles generated

Code:
/* http://localhost:1841/ext/modern/theme-neptune/sass/var/Button.scss:1239 */
.x-button-test {
    color: red;
    font-weight: bold;
}
/* http://localhost:1841/ext/modern/theme-neptune/sass/var/Button.scss:1277 */
.x-button-test .x-icon-el {
    color: red;
}
This is also generated and it takes precedence over the UIs style

Code:
.x-button {
    color: white;
    font: 600 1em/16px 'Helvetica';
    border-radius: 2px;
 }
the UIs "test" and "elbButton" are not taking effect.


The below variables directly configured in all.scss is taking effect

Code:
$button-text-transform:null; $border-radius: 0; $button-icon-size:1.8em; $button-color:white; $button-font-size:1em;