TouchKit basic theming problems.

Flow
1

I’m using Netbeans & Maven.
I have some problems using CSS with Vaadin Toolkit.
Some basic problems…

It seems to ignore every line of my custom css, I don’t know why.

In “/VAADIN/themes/touchkit” I have 4 css and scss files.

addons.scss
styles.css
styles.scss
touchkit.scss

Basically, I wanto to change the background of a VerticalLayout or a VerticalComponentGroup.

So I’ve put

@import "../valo/valo.scss"; 
@mixin touchkit {
    @include valo;
    
      .backColorGrey{
           background-color:#0FD1B1;
      }

    // Insert your own theme rules here
}

in touchkit.scss

and then

final VerticalLayout content = new VerticalLayout();
        final VerticalComponentGroup content2 = new VerticalComponentGroup();

 content.addStyleName("backColorGrey");
        content2.addStyleName("backColorGrey");

Nothing happen.

I’ve compiled the Theme
I’ve tryed to put the code in the other scss files.
I’ve downloaded ruby to install Sass.
I’ve recompiled the Theme, the project, clean, clena &Build, recompile so many times … and a lot of other action but the result is the same.
I’ve put this in the pom

<plugin>
                <groupId>org.codehaus.mojo</groupId>
                <artifactId>exec-maven-plugin</artifactId>
                <version>1.2.1</version>
                <executions>
                    <execution>
                        <phase>generate-sources</phase>
                        <goals>
                            <goal>java</goal>
                        </goals>
                        <configuration>
                            <classpathScope>compile</classpathScope>
                            <mainClass>com.vaadin.sass.SassCompiler</mainClass>
                            <arguments>
                                <argument>src/main/webapp/VAADIN/themes/touchkit/styles.scss</argument>
                                <argument>src/main/webapp/VAADIN/themes/touchkit/styles.css</argument>
                            </arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

Nothing happen.
It seems to ignore any css line… but it is a so basic action!!!
​It’s frustrating, it is totally a waste of time.

Frankly I hate css.
Is there any way to set this value ignoring css by java code ?
Like .setBackgroundColor ?

2

Nothing will happen: the Touchkit Servlet will always load an empty styles.css, regardless of what you put into that directory. Just see the Touchkit Servlet sources for details. ALSO, once you link Touchkit, the @Theme setting is completely ignored: https://dev.vaadin.com/ticket/19369#ticket
I have worked this around by not using the Vaadin theming engine; instead, I placed my styles.css into Java Resources and I am using
getPage().getStyles().add(new ClassResource(“styles.css”));
to force-load the theme.