EDIT

// Global variable overrides. Must be declared before importing Valo.

// Defines the plaintext font size, weight and family. Font size affects general component sizing.

//$v-font-size: 16px;

//$v-font-weight: 300;

// Defines the border used by all components.

//$v-border: 1px solid (v-shade 0.7);

//$v-border-radius: 4px;

// Affects the color of some component elements, e.g Button, Panel title, etc

//$v-background-color: hsl(210, 0%, 98%);

// Affects the color of content areas, e.g  Panel and Window content, TextField input etc

//$v-app-background-color: $v-background-color;

//$v-bevel-depth: 30%;

//$v-shadow-opacity: 5%;

// Defines colors for indicating status (focus, success, failure)

//$v-focus-color: valo-focus-color(); // Calculates a suitable color automatically

//$v-friendly-color: #2c9720;

//$v-error-indicator-color: #ed473b;

// ================== DARK ================ //

$v-background-color: #444d50;

$v-focus-color: #07a9ca;

$v-focus-style: 0 0 3px 2px $v-focus-color;

$v-bevel-depth: 40%;

$v-gradient: v-linear 12%;

$v-border-radius: 10px;

$v-font-family: Roboto, sans-serif;

$v-font-weight: 400;

$v-font-weight--header: 400;

$v-bevel: inset 0 1px 2px v-tint, inset 0 0 1px (v-tint 0.1);

$v-shadow: 0 0 0 3px rgba(0,0,0,0.32), 0 1px 0 3px rgba(255,255,255,0.14);

$v-textfield-bevel: inset 0 2px 2px v-shade;

$v-textfield-shadow: $v-shadow;

$v-unit-size: 40px;

$v-overlay-shadow: 0 0 0 3px (v-shade 8), 0 5px 10px (v-shade 4);

$v-component-group-spacing: 6px;

// For more information, see: https://vaadin.com/book/-/page/themes.valo.html

// Example variants can be copy/pasted from https://vaadin.com/wiki/-/wiki/Main/Valo+Examples

@import "../valo/valo.scss";

// ========================================== //

// import custom font icons TODO rename font

@include v-font(IcoMoon, "../../../../../fonts/icomoon");

.IcoMoon {

   font-family: IcoMoon;

   font-style: normal;

   font-weight: normal;

   -webkit-font-smoothing: antialiased;

   -moz-osx-font-smoothing: grayscale;

   display: inline-block;

   text-align: center;

}

// Status colors for the redistration

// 

// change-color cant be used since this is not fully supported by the vaadin sass-compiler

// see https://github.com/vaadin/sass-compiler/issues/147

$hue-offset: hue($status-reference-color);

$plain-red: adjust-color($status-reference-color, $hue: -1 * $hue-offset);  // red as 0 degree hue

$status-published-color: adjust-color($plain-red, $hue: 105deg); 

$status-ready-color: adjust-color($plain-red, $hue: 180deg);

// ========================================== //

  @include valo;

  // Insert your own theme rules here

  #header {

    text-align: center;

    margin: round($v-layout-spacing-vertical/2); // corresponds to layout spacing

    font-size: $v-font-size--huge; // corresponds to valo style huge (26px)

  }

  #subheader {

    text-align: center;

    margin: round($v-layout-spacing-vertical/2);

    font-size: $v-font-size; // valo default font size (16px)

  }

  // ------------------- // 

    font-size: 400%;

   }

     .v-icon {

       font-size: 64px;

       line-height: 50px;

     }

   }

   .v-label .caption {

       font-size: $v-font-size--small;

   }

   // to apply this to a Vaadin Label set 'label-nowrap'

   // as style

    .v-caption-label-nowrap, .v-label-label-nowrap {

        display: inline;

    }

    .v-label-label-nowrap {

//         margin-left: 8px; // TODO use sass variable here

//         vertical-align: baseline;

        .v-icon {

           display : inline;

   .friendly-foreground {

        color: $v-friendly-color;

    }

         @include valo-badge-style($states: inactive, $background-color: lighten($v-background-color, 10%), $active-color: $v-focus-color);

    } 

      margin: 0 10%;

        width: 50%;

        .v-label {

            white-space: normal;

        }

      }

        width: 33%;

        .v-label {

            white-space: normal;

        }

      }

      &[width-range~="-650px"] {

          }

      }

    }

    // ===== workflow ==== // 

    #workflow-container {

        text-align: center;

    // can not be set per css as this need to set as property to the component in vaadin

    $workflow-timeline-bar-height: 10px; 

    // the fator by which the caption should be smaller than the circe

    $workflow-caption-shrink: 0.64; 

    $workflow-icon-margin-h: $workflow-icon-size / 5;

    $workflow-icon-left: $workflow-icon-margin-h / 2;

        .steps {

            z-index: 10;

            .v-csslayout {

                width: $workflow-icon-size + 2 * $workflow-icon-margin-h;

                .v-label {

                    display: block;

                    text-align: center;

                }

            }

         }

         .timeline {

            display: block;

            position: relative;

            top: ($workflow-icon-size / 2) + $workflow-timeline-bar-height / 2;

            padding: 0 $workflow-icon-size / 2;

            .timeline-bar {

                z-index: 0;

                background-color: $v-font-color;

            }

        }

    }

    .workflow-item {

        .v-button {

            margin: 0 $workflow-icon-margin-h;

            font-size: $workflow-icon-size;

            height: $workflow-icon-size;

            width: $workflow-icon-size;

            line-height: $workflow-icon-size;

            .v-icon, .v-button-caption {

                position: absolute;

                left: $workflow-icon-left;

                top: 0px;

            }

            .v-button-caption {

                font-family: monospace;

                left: (($workflow-icon-size - $workflow-caption-font-size) / 2) + $workflow-icon-left; // 30px;

                top: -2px;

                color: $v-background-color;

                font-size: $workflow-caption-font-size; // 70px;

            }

        }

    }

            padding: round($v-unit-size / 2);

            .names-types-list, .registration-list-item {

                margin-top: round($v-unit-size / 2);

            }

    }

        padding-top: 4px; // avoid button group to overlap with border

    }

   .registration-workflow-item {

       border: valo-border($border: $v-border, $color: $v-background-color, $strength: 0.7);

    }

    // tab element being part of a process ----------- //

        padding-right: 10px;

        height: $v-font-size * 3;

        background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);

        @include box-shadow(inset 0 0 5px $v-app-background-color);

    }

    .workflow-step {

        line-height: $v-font-size * 3;

    }

    .v-caption-workflow-step {

        vertical-align: top;

        padding: 0;

         .v-icon {

            line-height: $v-font-size * 3;

            font-size: $v-font-size * 3.5;

            padding-right: 10px;

            color: $v-background-color;

        }

    .workflow-tabsheet {

        table.v-tabsheet-tabs, .v-tabsheet-tabs tr, .v-tabsheet-tabs tbody {

          width: 100%; 

        }

        .v-tabsheet-tabitemcell {

              width: 25%;

        }

        .v-tabsheet-tabitem {

            // background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);

            // @include valo-gradient($color: $v-background-color, $gradient: $v-gradient, $fallback: null, $direction: to right);

            // @include box-shadow(inset 0 0 5px $v-app-background-color);

            // background-color: $v-font-color

            // border: valo-border($border: 2px solid, $color: $v-font-color, $strength: 1);

            background-color: scale-color(lighten($v-app-background-color, 20%), $saturation: -20%);

            @include box-shadow(inset 0 0 5px $v-app-background-color);

            border: valo-border($border: 2px solid, $color: $v-app-background-color, $strength: 1);

            border-color: $v-app-background-color;

            .v-caption {

                // line-height: $v-unit-size;

                margin: 0;

                padding: 0;

                padding-right: $v-unit-size / 2;

                border: 0px none;

            }

            .v-icon {

                line-height: $v-unit-size;

                font-size: $v-unit-size * 1.8;

                vertical-align: middle;

                // padding-right: $v-unit-size / 2;

                //color: $v-font-color;

                color: $v-app-background-color;

            }

        }

    // ----------------------------------------------- //

   // status colors --------------------------------- //

        color: $status-rejected-color;

    }

    .status-CURATION {

        color: $status-curation-color;

    }

    .status-PREPARATION {

        color: $status-preparation-color;

    }

    .status-PUBLISHED {

        color: $status-published-color;

    }

    .status-READY {

        color: $status-ready-color;

    }

    .bg-status-REJECTED {

        background-color: $status-rejected-color;

    }

    .bg-status-CURATION {

        background-color: $status-curation-color;

    }

    .bg-status-PREPARATION {

        background-color: $status-preparation-color;

    }

    .bg-status-PUBLISHED {

        background-color: $status-published-color;

    }

    .bg-status-READY {

        background-color: $status-ready-color;

    }

    // ----------------------------------------------- //

        overflow: auto;

        height: 100%;

        padding-left: round($v-unit-size/3);

        padding-right: round($v-unit-size/3);

        border: valo-border($border: $v-border, $color: $v-background-color, $strength: 1.4);

        border-radius: $v-border-radius - first-number($v-border) $v-border-radius - first-number($v-border) 0 0;

        /* ----------------------------------------------- */

                color: $status-rejected-color;

            }

        }

                color: $status-curation-color;

            }

        }

                color: $status-preparation-color;

            }

        }

                color: $status-published-color;

            }

        }

                color: $status-ready-color;

            }

    }