Clean up focus-color usage in Valo

Resort to using $v-focus-color instead of valo-focus-color()

Clean valo-focus-color() function implementation.

Remove unnecessary documentation from _variables.scss

Increase bevel depth slightly (better contrast)

Change-Id: I1272c27fd76cd9a1f1f4c36b76756bc73802eb83

7 files changed, 28 insertions, 50 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss
index 4e19650e6a..edd03e7879 100644
--- a/WebContent/VAADIN/themes/valo/components/_button.scss
+++ b/WebContent/VAADIN/themes/valo/components/_button.scss
@@ -155,7 +155,7 @@
 
 
 @mixin valo-button-focus-style ($background-color: $v-background-color, $border-fallback: inherit, $include-box-shadow: true) {
-  $focus-color: valo-focus-color();
+  $focus-color: $v-focus-color;
 
   @if color-luminance($focus-color) + 50 < color-luminance($background-color) {
     border-color: $focus-color;
diff --git a/WebContent/VAADIN/themes/valo/components/_calendar.scss b/WebContent/VAADIN/themes/valo/components/_calendar.scss
index c6c689d8d8..08114d8828 100644
--- a/WebContent/VAADIN/themes/valo/components/_calendar.scss
+++ b/WebContent/VAADIN/themes/valo/components/_calendar.scss
@@ -205,7 +205,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb
     cursor: pointer;
 
     &:hover {
-      color: valo-focus-color();
+      color: $v-focus-color;
     }
   }
 
@@ -219,17 +219,17 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb
     cursor: pointer;
 
     &:hover {
-      color: valo-focus-color();
+      color: $v-focus-color;
     }
   }
 
   .#{$primary-stylename}-month-day-today {
-    background: blend-normal(rgba(valo-focus-color(), .05), $v-background-color);
+    background: blend-normal(rgba($v-focus-color, .05), $v-background-color);
 
     .#{$primary-stylename}-day-number {
       font-weight: $v-font-weight + 100;
-      color: valo-focus-color();
-      border-top: 2px solid valo-focus-color();
+      color: $v-focus-color;
+      border-top: 2px solid $v-focus-color;
       line-height: round($v-unit-size/1.5) - 1px;
       margin: 0;
       padding: 0 round($v-unit-size/8);
@@ -275,10 +275,6 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb
 
   .#{$primary-stylename}-header-week td {
     vertical-align: middle !important;
-
-    //&:first-child {
-    //  width: round($v-unit-size*1.5);
-    //}
   }
 
   .#{$primary-stylename}-header-week .#{$primary-stylename}-header-day {
@@ -302,8 +298,6 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb
   .#{$primary-stylename}-day-times,
   .#{$primary-stylename}-day-times-today {
     outline: none;
-    //@include box-sizing(border-box);
-    //padding: 0 round($v-unit-size/8);
     border-right: 1px solid transparent;
 
     &:focus {
@@ -311,7 +305,7 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb
     }
   }
 
-  $valo-calendar-time-divider-color: darken($v-background-color, 5%);
+  $valo-calendar-time-divider-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
 
   .#{$primary-stylename} .v-datecellslot,
   .#{$primary-stylename} .v-datecellslot-even {
@@ -332,14 +326,14 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb
   }
 
   .#{$primary-stylename}-current-time {
-    background: valo-focus-color();
+    background: $v-focus-color;
     line-height: 1px;
     pointer-events: none;
     @include opacity(.5);
 
     &:before {
       content: "\2022";
-      color: valo-focus-color();
+      color: $v-focus-color;
       font-size: 22px;
       margin-left: -0.07em;
     }
@@ -472,7 +466,6 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb
 
     // Event is being dragged
     &[style*=" left:"] .#{$primary-stylename}-event-content {
-      //box-shadow: valo-shadow();
     }
   }
 
@@ -486,7 +479,6 @@ $v-calendar-event-colors: dodgerblue, seagreen, darkgoldenrod, firebrick, slateb
     border: 1px solid $v-app-background-color;
     padding-top: 3px;
     margin-right: round($v-unit-size/8);
-    //margin-left: round($v-unit-size/8);
   }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss b/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss
index 549c06358c..7f1be69553 100644
--- a/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss
+++ b/WebContent/VAADIN/themes/valo/components/_dragwrapper.scss
@@ -110,7 +110,7 @@
   border-radius: $v-border-radius;
   @include opacity(.3);
 
-  $focus-color: valo-focus-color();
+  $focus-color: $v-focus-color;
   @if is-dark-color($focus-color) {
     background: scale-color($focus-color, $lightness: 50%);
   } @else {
diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss
index 01840139b3..28044bdf3f 100644
--- a/WebContent/VAADIN/themes/valo/components/_tree.scss
+++ b/WebContent/VAADIN/themes/valo/components/_tree.scss
@@ -162,7 +162,7 @@ $v-tree-expand-animation-enabled: false !default;
     // This a v-tree-node-caption element
     &:after {
       opacity: 1;
-      border: 1px solid valo-focus-color();
+      border: 1px solid $v-focus-color;
     }
 
     .v-ie8 & {
@@ -221,21 +221,21 @@ $v-tree-expand-animation-enabled: false !default;
     position: absolute;
     height: 2px;
     width: 100%;
-    background: valo-focus-color();
+    background: $v-focus-color;
     font-size: $v-font-size * 2;
     line-height: 2px;
-    color: valo-focus-color();
+    color: $v-focus-color;
     text-indent: round($v-font-size/-4);
     text-shadow: 0 0 1px $v-background-color, 0 0 1px $v-background-color;
   }
 
   .#{$primary-stylename}-node-caption-drag-center {
-    box-shadow: 0 0 0 2px valo-focus-color();
+    box-shadow: 0 0 0 2px $v-focus-color;
     position: relative;
     border-radius: $v-border-radius;
 
     .v-ie8 & {
-      outline: 2px solid valo-focus-color();
+      outline: 2px solid $v-focus-color;
     }
   }
 
diff --git a/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss b/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss
index 03bfe301ea..86d87fafa2 100644
--- a/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_loading-indicator.scss
@@ -15,9 +15,9 @@
 
 
 @mixin valo-spinner ($size: 24px, $thickness: 2px, $color: null, $speed: 500ms) {
-  $color: $color or valo-focus-color();
+  $color: $color or $v-focus-color;
   // Make size divisible by 2, so that the rotation won't jiggle
-  $size: $size + $size%2;
+  $size: round($size) + round($size) % 2;
   height: $size !important;
   width: $size !important;
   @include box-sizing(border-box);
@@ -60,7 +60,7 @@
 
 
 
-$v-loading-indicator-color: valo-focus-color() !default;
+$v-loading-indicator-color: $v-focus-color !default;
 $v-loading-indicator-bar-height: ceil($v-unit-size/10) !default;
 $v-loading-indicator-bar-height--wait: ceil($v-unit-size/6) !default;
 
diff --git a/WebContent/VAADIN/themes/valo/shared/_variables.scss b/WebContent/VAADIN/themes/valo/shared/_variables.scss
index b652ea720a..c7f9693eef 100644
--- a/WebContent/VAADIN/themes/valo/shared/_variables.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_variables.scss
@@ -6,7 +6,7 @@
 
 // List of components to include in the theme compilation. The list can be modified to make
 // the compiled theme smaller by removing unused components from the list.
-// @variable v-included-components
+//
 // @usage
 // // Remove the Calendar component styles from the output
 // $v-included-components: remove($v-included-components, calendar);
@@ -54,7 +54,6 @@ $v-included-components:
 
 // Checks if a given component is included in the compilation. Used by the collection mixins that
 // include all components, like valo-components and valo-components.
-// @mixin v-is-included
 // @param     $component-name {String} the name of the component to check
 // @param     $is-included {list} (Optional) the list of components which is checked
 // @return    {Boolean} true if the component is included in the compilation, false if not
@@ -64,14 +63,10 @@ $v-included-components:
 
 
 // A static text that is shown while the application JavaScript is loaded and started
-// @variable    v-app-loading-text
-// @default     ""
 $v-app-loading-text               : ""                                          !default;
 
 
 // Base line height used for all widgets
-// @variable     v-line-height
-// @default     1.55 !default
 $v-line-height                    : 1.55                                        !default;
 
 
@@ -102,21 +97,20 @@ $v-border-radius                  : 4px
 $v-gradient                       : v-linear 8%                                 !default;
 
 $v-bevel                          : inset 0 1px 0 v-tint, inset 0 -1px 0 v-shade !default;
-$v-bevel-depth                    : 25%                                         !default;
+$v-bevel-depth                    : 30%                                         !default;
 
 $v-shadow                         : 0 2px 3px v-shade                           !default;
 $v-shadow-opacity                 : 5%                                          !default;
 
-$v-focus-color                    : null                                        !default;
-$v-focus-style                    : 0 0 0 2px rgba(valo-focus-color(), .5)      !default;
 $v-focus-color                    : valo-focus-color()                          !default;
+$v-focus-style                    : 0 0 0 2px rgba($v-focus-color, .5)          !default;
 
 $v-animations-enabled             : true                                        !default;
 $v-hover-styles-enabled           : true                                        !default;
 
 $v-disabled-opacity               : 0.5                                         !default;
 
-$v-selection-color                : valo-focus-color()                          !default;
+$v-selection-color                : $v-focus-color                              !default;
 
 $v-default-field-width            : $v-unit-size * 5                            !default;
 
@@ -135,7 +129,4 @@ $valo-include-common-stylenames   : true
 // The Vaadin compiler parses URL paths differently than the regular Sass compiler (i.e. Vaadin modifies relative url paths).
 // This boolean is used to flag which compiler is used, so that paths are correct for different resources.
 // false == Ruby, true == Vaadin
-// @private
-// @variable  v-relative-paths
-// @default   false
 $v-relative-paths: false !default;
diff --git a/WebContent/VAADIN/themes/valo/util/_color.scss b/WebContent/VAADIN/themes/valo/util/_color.scss
index 5368adefa1..b7f8c10ad8 100644
--- a/WebContent/VAADIN/themes/valo/util/_color.scss
+++ b/WebContent/VAADIN/themes/valo/util/_color.scss
@@ -74,19 +74,14 @@ $v-luminance-threshold: 150 !default;
 
 
 
-@function valo-focus-color ($color: null, $context: null) {
-  $context: $context or $v-app-background-color;
-
-  $fallback: $context;
-  @if is-dark-color($fallback) {
-    $fallback: scale-color($fallback, $lightness: 40%, $saturation: 80%);
+@function valo-focus-color ($context: $v-app-background-color) {
+  $color: $context;
+  @if is-dark-color($context) {
+    $color: scale-color($color, $lightness: 40%, $saturation: 80%);
   } @else {
-    $fallback: scale-color($fallback, $lightness: -50%, $saturation: 80%);
+    $color: scale-color($color, $lightness: -50%, $saturation: 80%);
   }
-
-  $focus-color: $color or $v-focus-color or $fallback;
-
-  @return $focus-color;
+  @return $color;
 }