Customize gwt-togglebutton via css in a vaadin widget

I am using Win10 64bit, vaadin 7.6.8, eclipse 4.6.0
I am developping a vaadin widget, called Uze.
The Widget works.

In this widget i use a GWT-ToggleButton:

com.google.gwt.user.client.ui.ToggleButton boldButton = new ToggleButton("Bold")

How can i customize this GWT-ToggleButton via CSS.

My Themefolder is:
/Uze/src/main/webapp/VAADIN/themes/uzetheme/
- addons.scss
- styles.css
- styles.scss
- uzetheme.scss

i have created in this themefolder the file toggleButton.css with following entries

.gwt-ToggleButton-up {
   color:green;
} 
.gwt-ToggleButton-down {
   color:blue;
} 
.gwt-ToggleButton-up-hovering {
   color:pink;
} 
.gwt-ToggleButton-down-hovering {
   color:aqua;
} 
.gwt-ToggleButton-up-disabled {
   color:lime;
} 
.gwt-ToggleButton-down-disabled {
   color:maroon;
} 

What must i do, that this css-style is working for my GWT-ToggleButton.
 

To do it the 'correct' way, do the following:
1. rename your file to toggleButton.scss
2. in uzetheme.scss, add the following:

@import "uzetheme.scss";

3. recompile your theme.

Thats it, hope it helps.

p.s. you should wrap your css in a mixin definition, and include the mixin inside the @mixin uzetheme, but this isn't mandatory.

Have a lot of thanks.
It works with a small correction.
I must write in uzetheme.scss:

@import "toggleButton.scss";

What you mean with:
" you should wrap your css in a mixin definition, and include the mixin inside the @mixin uzetheme"

In your case, there is no difference. mixins are used for snippets that might be needed in multiple places, like this:

file 'text-mixins.scss':

@mixin bolded {
   font-weight: bold;
   color: dark-gray;
}

in file 'yourtheme.scss':

@import "text-mixins.scss"; //this doesn't actually add anything to the result file

.header {
    .warning-text {
        @include bolded; //this adds the two styles
    }

    .caption-text {
        @include bolded; //so does this
    }
}

so, for instance, one of my project style files looks like this:

@import "../valo/valo.scss";
@import "basic_components.scss";
@import "mainview.scss";
@import "calendar.scss";
@import "responsive_menu.scss";
@import "search.scss";

@mixin mytheme {

  @include valo;
  @include basic_components;
  @include mainview;
  @include calendar;
  @include responsive_menu;
  @include search;
  //... etc.

We use mixins for better structure in this theme. the mixin allows us to add our theme snippets in the correct order, inside the mytheme brackets.
 

a lot of thanks
I see that i must study it