マテリアルテーマのボタンのUI[modern]

modernのテーマには、theme-materialを指定することでマテリアルデザインにできますが、ボタンのUIが通常のテーマとは若干異なります。

ボタンのuiコンフィグに指定できるのは、次のようなものになります。

Ext.define('Sample.view.main.Form', {
    extend: 'Ext.form.Panel',
    xtype: 'main_form',

    requires: [
        'Ext.Button'
    ],

    cls: 'main-form',

    scrollable: true,

    defaults: {
        margin: '0 0 15 0'
    },

    items: [
        {
            xtype: 'button',
            text: 'action',
            ui: 'action'
        },
        {
            xtype: 'button',
            text: 'alt',
            ui: 'alt'
        },
        {
            xtype: 'button',
            text: 'confirm',
            ui: 'confirm'
        },
        {
            xtype: 'button',
            text: 'decline',
            ui: 'decline'
        },
        {
            xtype: 'button',
            text: 'raised',
            ui: 'raised'
        },
        {
            xtype: 'button',
            text: 'raised-confirm',
            ui: 'raised-confirm'
        },
        {
            xtype: 'button',
            text: 'raised-decline',
            ui: 'raised-decline'
        },
        {
            xtype: 'button',
            text: 'segmented',
            ui: 'segmented'
        },
        {
            xtype: 'button',
            iconCls: 'md-icon-add',
            ui: 'fab'
        },
        {
            xtype: 'button',
            text: 'mybutton1',
            ui: 'mybutton1'
        },
        {
            xtype: 'button',
            text: 'mybutton2',
            ui: 'mybutton2'
        }
    ]
});

fabまでは標準で用意されているUIです。

mybutton1とmybutton2は追加してみました。

.#{$prefix}button {
  text-transform: inherit !important;
}

$mybutton1-color-name: dynamic('indigo');
$mybutton1-color: dynamic(material-color('indigo', '500'));
$mybutton1-foreground-color: dynamic(material-foreground-color($mybutton1-color-name));
$mybutton1-pressed-color: dynamic(rgba($mybutton1-color, .8));

@include button-ui(
    $ui: 'mybutton1',
    $color: $mybutton1-foreground-color,
    $background-color: $mybutton1-color,
    $pressed-background-color: $mybutton1-pressed-color
);

$mybutton2-color: dynamic(#607D8B);
$mybutton2-foreground-color: dynamic(#ffffff);
$mybutton2-pressed-color: dynamic(rgba($mybutton2-color, .8));

@include button-ui(
    $ui: 'mybutton2',
    $color: $mybutton2-foreground-color,
    $background-color: $mybutton2-color,
    $pressed-background-color: $mybutton2-pressed-color
);

ext/modern/theme-material/sass/var/Button.scss を見るとどのようにuiが定義されているかを追うことができると思います。

'indigo'はtheme-materialであらかじめ用意されている色で、ext/modern/theme-material/sass/etc/functions/color.scss に定義してあります。

マテリアルデザインの色については、 https://material.io/guidelines/style/color.html#color-color-palette が役に立つと思います。