org.eclipse.osbp.themes/scss/_variables-steel.scss

 /***************/
/* THEME START */

@import "components/color-functions.scss";

$v-app-loading-text: "OSBP";
$os-loading-animation: url('load_bar_2.gif');
$os-login-background-image: url('U68NITW3EI_s.jpg');

/** Switches **/
$web: false;
$web2: false;
$os-button-uppercase: true;
$os-img-size-override: false;
$os-bordered: true;

// get_contrast
$os-fn-desaturate: false; //default: true
$os-fn-light: 7;
$os-fn-border: 17;
$os-fn-medium: 37;
$os-fn-strong: 67;


 
/** OS-Variables **/

$os-background-color: #11151c;
$os-background-color: #3d3b3c; //1 2 3 4 5
//$os-background-color: #1a1a1a;	 maybe?

$os-base-color: $os-background-color;//#7F534B; //5 685762		gutes blau f�r theme 3? 3A4454
$os-base-color: #323031; //1 
$os-base-color: #503D42;  //4
$os-base-color: #323031; //2 3 
$os-base-color: #949396;  //5+
 
$os-highlight-color: #9ea93f; //1
$os-highlight-color: #545E56; //5-2
$os-highlight-color: #92D5E6; //5-1
$os-highlight-color: #FF715B; //4
$os-highlight-color: #8e5572; //2
$os-highlight-color: #dcab6b; //3
$os-highlight-color: #5D737E; //5 EX 9B9987

$v-error-indicator-color: #E3DC95;
$v-tooltip-error-message-background-color: $os-background-color;



//$v-window-shadow: 0 2px 10px (v-shade 10), 0 16px 80px -6px (v-shade 13), last($v-overlay-shadow) !default;



$os-odd-highlight: $os-highlight-color;	  //5

$os-button-as-tab: $os-highlight-color;	//header
 
//$v-panel-background-color: $os-background-color; //scale-color(lighten($v-app-background-color, 5%), $saturation: -5%) !default;


$os-light-contrast: #efefef;	//grey1c #F2F3F4, #f0f0f0
$os-light-contrast: get_contrast($os-fn-light, $os-background-color, $os-fn-desaturate);

$os-mid-contrast:   #A0A4A6; 	//grey6c, #777779  
$os-mid-contrast: get_contrast($os-fn-medium, $os-background-color, $os-fn-desaturate);

$os-dark-contrast:  #545559;  	//grey11c #9FA0A5, #575757
$os-dark-contrast: get_contrast($os-fn-strong, $os-background-color, $os-fn-desaturate);
 
$os-button-color: $os-base-color;
 
@if $web==true {
	$os-highlight-color:#ffc600; 
	$os-odd-highlight:	 #bf1e2e ; //#bf1e2e
	$os-button-as-tab: #ffc600;
	$os-button-color: $os-dark-contrast;
	}

@if $web2==true {
	$os-highlight-color:#ffc600; 
	$os-odd-highlight:	 #bf1e2e ; //#bf1e2e
	$os-button-as-tab: $os-highlight-color;
	$os-button-as-tab-inactive: $os-light-contrast;
	$os-button-color: #1268b3;
	}

$os-focus-color: get_color_mix($os-highlight-color, #fff, 50);
$os-base-color-light: get_color_mix($os-base-color, #fff, 50);


//$os-dark-contrast:  #53607a;  

$os-splitter: $os-light-contrast; 
$os-main-header-bg: $os-light-contrast;
@if $web==true {
	$os-main-header-bg: $os-background-color;
	}
$os-sub-header-bg: $os-light-contrast;

//desaturate(lighten($os-highlight-color, 25), 10%);
//alternatives: desaturate(lighten($os-base-color, 25), 10%)
$os-font-unit: px;
$os-font-size: 12px;
$os-l-font-factor: 1.4;
$os-xl-font-factor: 1.8;
$os-unit-size: 24px;
$os-line-height-factor: 1.75;	//1.6 = recommended factor for readability of longer texts.
$os-line-height: $os-font-size * $os-line-height-factor;	
$os-font-family: Arial;
$os-splitter-size: $os-unit-size/2.75; //8px, try for an even number	
$os-field-width: floor($os-unit-size * 11.4) !default; 
$os-icon-image-width: 16px;

$os-border-width: 1px;
$os-border-style: solid;
$os-border-color: get_contrast($os-fn-border, $os-background-color, $os-fn-desaturate);; 
$os-border: valo-border($os-border-width $os-border-style $os-border-color, $os-background-color, null, 1);

//filters-panel
$os-filters-padding: 1px;
$os-filters-font: #a3a3a3;
$os-filters-panel-bg: $os-border-color;

$os-button-height: $os-unit-size + floor($os-unit-size/3);

$os-luminance-threshold: 150 ;//150 !default 
$os-loading-bar-height: 2px;
$os-loading-bar-color: $os-highlight-color;
$os-progress-important: #be1e2d;

$os-shadow: 1px 3px 7px  transparentize(#000, 0.65);  
$os-shadow-reversed: $os-shadow;
$os-text-shadow: 0px 1px 1px transparentize(#000, 0.8);

/** Vaadin/Valo-Variables **/

$v-loading-indicator-bar-height: $os-unit-size;
$v-loading-indicator-color: $os-loading-bar-color;

//(v-shade 0.7) 
$v-textfield-disabled-opacity: 1;

$v-luminance-threshold: $os-luminance-threshold;

$v-background-color: $os-background-color;
$v-app-background-color: $os-background-color;
$valo-menu-background-color: $os-base-color;
$v-table-background-color: $os-background-color;
$v-focus-color: $os-highlight-color;
$v-font-family: $os-font-family;
$v-font-size: $os-font-size;
$v-line-height: $os-line-height;
$v-unit-size: $os-unit-size;
$v-table-row-height: $os-unit-size;
$v-default-field-width: $os-field-width; //$v-unit-size * 5 !default;

$v-scaling-factor--tiny: 1 !default; //0.75
$v-scaling-factor--small: 0.85 !default;
$v-scaling-factor--large: 1.2 !default;
$v-scaling-factor--huge: 1.6 !default;

$v-border: $os-border-width $os-border-style $os-border-color !default;
$v-border-radius: 0px;

$os-button-gradient: v-linear 5%;
$os-gradient-amount: v-linear 5%;

$v-layout-margin-top:    $os-unit-size*0.5;
$v-layout-margin-left:   $os-unit-size*0.5;
$v-layout-margin-right:  $os-unit-size*0.5;
$v-layout-margin-bottom: $os-unit-size*0.5;
$v-layout-spacing-vertical: 0px;

$v-tabsheet-content-animation-enabled: false; //default: true

/* Valo Grid 
$v-grid-header-background-color: $os-background-color;
$v-grid-footer-background-color: $os-background-color;*/



/*
$v-textfield-bevel: false;*/
$v-gradient: false;

/*$v-hover-styles-enabled: false /*true !default;*/

$v-bevel: false;
$v-shadow: $os-shadow;
$v-textfield-shadow: false;
$v-shadow-opacity: 20% /*10% !default*/;


$v-focus-style: 0 0 0 1px transparent;	//Focus-shadow/glow-color. Default = glow

/*$v-background-color: hsl(0, 0, 99.5%);
$valo-menu-background-color: hsl(218, 20%, 98%);

$v-background-color: $os-lila;  
$v-focus-color: $os-orange;
$v-panel-background-color:   $weiss;	//buggy?
$v-overlay-background-color: $os-orange;
$valo-menu-background-color: $os-lila;
*/

/* $v-focus-color: hsl(218, 80%, 60%);
$v-border: 1px solid (v-shade 0.6);
$v-border-radius: 0px;
$v-bevel: inset 0 1px 0 v-tint;
$v-textfield-bevel: false;
$v-gradient: v-linear 3%;
$v-shadow: false;
$v-friendly-color: hsl(163, 61%, 41%);
$v-error-indicator-color: hsl(349, 66%, 56%);
$v-font-family: Arial;
$v-font-size: 12px;
$v-line-height: 1.618;*/