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

4 files changed, 15 insertions, 23 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;
     }
   }