@progress/kendo-theme-default 5.2.1-dev.4 → 5.2.1-dev.5

package/dist/all.css

@@ -13988,7 +13988,7 @@ textarea.k-input-inner {
     width: auto;
 }
 
-.k-floating-label-container.k-state-empty > .k-label {
+.k-floating-label-container.k-state-empty > .k-label, .k-floating-label-container.k-empty > .k-label {
     top: 25.0000000004px;
     left: 9px;
     transform: scale(1);
@@ -13996,7 +13996,8 @@ textarea.k-input-inner {
 }
 
 .k-floating-label-container > .k-label,
-.k-floating-label-container.k-state-focused > .k-label {
+.k-floating-label-container.k-state-focused > .k-label,
+.k-floating-label-container.k-focus > .k-label {
     top: 0;
     left: 0;
     transform: scale(1);
@@ -14019,25 +14020,30 @@ textarea.k-input-inner {
 [dir="rtl"] .k-floating-label-container > .k-label,
 .k-rtl .k-floating-label-container > .k-label, .k-floating-label-container[dir="rtl"] > .k-label {
     transform-origin: right center;
+    transition: transform 0.2s ease-out, color 0.2s ease-out, top 0.2s ease-out, right 0.2s ease-out;
 }
 
-[dir="rtl"] .k-floating-label-container.k-state-empty > .k-label,
-.k-rtl .k-floating-label-container.k-state-empty > .k-label, .k-floating-label-container[dir="rtl"].k-state-empty > .k-label {
+[dir="rtl"] .k-floating-label-container.k-state-empty > .k-label, [dir="rtl"] .k-floating-label-container.k-empty > .k-label,
+.k-rtl .k-floating-label-container.k-state-empty > .k-label,
+.k-rtl .k-floating-label-container.k-empty > .k-label, .k-floating-label-container[dir="rtl"].k-state-empty > .k-label, .k-floating-label-container[dir="rtl"].k-empty > .k-label {
     left: auto;
     right: 9px;
 }
 
 [dir="rtl"] .k-floating-label-container > .k-label,
 [dir="rtl"] .k-floating-label-container.k-state-focused > .k-label,
+[dir="rtl"] .k-floating-label-container.k-focus > .k-label,
 .k-rtl .k-floating-label-container > .k-label,
-.k-rtl .k-floating-label-container.k-state-focused > .k-label, .k-floating-label-container[dir="rtl"] > .k-label,
-.k-floating-label-container[dir="rtl"].k-state-focused > .k-label {
+.k-rtl .k-floating-label-container.k-state-focused > .k-label,
+.k-rtl .k-floating-label-container.k-focus > .k-label, .k-floating-label-container[dir="rtl"] > .k-label,
+.k-floating-label-container[dir="rtl"].k-state-focused > .k-label,
+.k-floating-label-container[dir="rtl"].k-focus > .k-label {
     left: auto;
     right: 0;
 }
 
-[dir="rtl"] .k-floating-label-container:focus-within,
-.k-rtl .k-floating-label-container:focus-within, .k-floating-label-container[dir="rtl"]:focus-within {
+[dir="rtl"] .k-floating-label-container:focus-within > .k-label,
+.k-rtl .k-floating-label-container:focus-within > .k-label, .k-floating-label-container[dir="rtl"]:focus-within > .k-label {
     left: auto;
     right: 0;
 }
@@ -19131,7 +19137,7 @@ kendo-label > .k-label {
 }
 
 .k-colorgradient-input-label {
-    color: #8f8f8f;
+    color: #666666;
 }
 
 .k-rtl .k-colorgradient .k-hue-slider.k-slider-horizontal .k-slider-track,
@@ -19994,7 +20000,7 @@ kendo-label > .k-label {
 }
 
 .k-dropzone-inner .k-dropzone-note {
-    color: #7e7e7e;
+    color: #666666;
 }
 
 .k-external-dropzone-hover .k-icon,
@@ -21317,7 +21323,6 @@ kendo-label > .k-label {
 
 .k-actionsheet-item-description {
     font-size: 0.875em;
-    opacity: 0.75;
 }
 
 .k-actionsheet > .k-hr {
@@ -21380,6 +21385,10 @@ kendo-label > .k-label {
     box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);
 }
 
+.k-actionsheet-item-description {
+    color: #666666;
+}
+
 .k-actionsheet-action:hover, .k-actionsheet-action.k-state-hover {
     background-color: #f0f0f0;
 }
@@ -24325,7 +24334,7 @@ kendo-card-footer {
 }
 
 .k-expander-sub-title {
-    opacity: 0.5;
+    color: #666666;
 }
 
 .k-panelbar {
@@ -29960,7 +29969,7 @@ kendo-grid tr.k-state-hover .k-grid-content-sticky.k-state-selected {
 }
 
 .k-taskboard-card .k-card-title:hover, .k-taskboard-card .k-card-title.k-state-hover {
-    color: #ff7c73;
+    color: #d6534a;
 }
 
 .k-taskboard-card:focus, .k-taskboard-card.k-state-focus {

package/dist/all.scss

@@ -9657,7 +9657,8 @@ $floating-label-focus-text: null !default;
             width: auto;
         }
 
-        &.k-state-empty {
+        &.k-state-empty,
+        &.k-empty {
             > .k-label {
                 top: $floating-label-offset-y;
                 left: $floating-label-offset-x;
@@ -9668,7 +9669,8 @@ $floating-label-focus-text: null !default;
 
         > .k-label,
         // &:focus-within > .k-label,
-        &.k-state-focused > .k-label {
+        &.k-state-focused > .k-label,
+        &.k-focus > .k-label {
             top: $floating-label-focus-offset-y;
             left: $floating-label-focus-offset-x;
             transform: scale( $floating-label-focus-scale );
@@ -9689,9 +9691,11 @@ $floating-label-focus-text: null !default;
 
             > .k-label {
                 transform-origin: right center;
+                transition: transform $floating-label-transition, color $floating-label-transition, top $floating-label-transition, right $floating-label-transition;
             }
 
-            &.k-state-empty {
+            &.k-state-empty,
+            &.k-empty {
                 > .k-label {
                     left: auto;
                     right: $floating-label-offset-x;
@@ -9700,11 +9704,12 @@ $floating-label-focus-text: null !default;
 
             > .k-label,
             // &:focus-within > .k-label,
-            &.k-state-focused > .k-label {
+            &.k-state-focused > .k-label,
+            &.k-focus > .k-label {
                 left: auto;
                 right: $floating-label-focus-offset-x;
             }
-            &:focus-within {
+            &:focus-within > .k-label {
                 left: auto;
                 right: $floating-label-focus-offset-x;
             }
@@ -17441,7 +17446,7 @@ $colorgradient-canvas-draghandle-margin-x: -( $colorgradient-draghandle-width /
 $colorgradient-input-width: 46px !default;
 $colorgradient-input-gap: ( $colorgradient-spacer / 1.5 ) !default;
 $colorgradient-input-label-gap: ( $colorgradient-spacer / 3 ) !default;
-$colorgradient-input-label-text: $disabled-text !default;
+$colorgradient-input-label-text: $subtle-text !default;
 
 $colorgradient-contrast-ratio-font-weight: $font-weight-bold !default;
 $colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;
@@ -19832,7 +19837,7 @@ $dropzone-hint-text: null !default;
 
 $dropzone-note-font-size: $font-size-sm !default;
 $dropzone-note-spacing: null !default;
-$dropzone-note-text: try-tint( $dropzone-text, 4 ) !default;
+$dropzone-note-text: $subtle-text !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/default/scss/dropzone/_layout.scss
@@ -21275,8 +21280,9 @@ $actionsheet-item-icon-size: null !default;
 
 $actionsheet-item-title-font-weight: null !default;
 $actionsheet-item-title-text-transform: null !default;
+
 $actionsheet-item-description-font-size: .875em !default;
-$actionsheet-item-description-opacity: .75 !default;
+$actionsheet-item-description-text: $subtle-text !default;
 
 $actionsheet-item-hover-bg: $hovered-bg !default;
 $actionsheet-item-hover-text: null !default;
@@ -21389,7 +21395,6 @@ $actionsheet-item-disabled-shadow: null !default;
     }
     .k-actionsheet-item-description {
         font-size: $actionsheet-item-description-font-size;
-        opacity: $actionsheet-item-description-opacity;
     }
 
 
@@ -21481,6 +21486,12 @@ $actionsheet-item-disabled-shadow: null !default;
     .k-actionsheet-item {}
 
 
+    // Actionsheet item description
+    .k-actionsheet-item-description {
+        @include fill( $color: $actionsheet-item-description-text );
+    }
+
+
     // Actionsheet action
     .k-actionsheet-action {
 
@@ -25795,7 +25806,7 @@ $expander-header-focused-shadow: $kendo-list-item-focus-shadow !default;
 
 $expander-title-text: $primary !default;
 
-$expander-header-sub-title-opacity: .5 !default;
+$expander-header-sub-title-text: $subtle-text !default;
 
 $expander-content-padding-x: $padding-x * 2 !default;
 $expander-content-padding-y: $padding-y * 4 !default;
@@ -25918,7 +25929,7 @@ $expander-content-padding-y: $padding-y * 4 !default;
     }
 
     .k-expander-sub-title {
-        opacity: $expander-header-sub-title-opacity;
+        color: $expander-header-sub-title-text;
     }
 }
 
@@ -33083,7 +33094,7 @@ $taskboard-card-selected-shadow: none !default;
 
 $taskboard-card-header-text: $primary !default;
 $taskboard-card-header-focus-text: $primary-darker !default;
-$taskboard-card-header-hover-text: $primary-lighter !default;
+$taskboard-card-header-hover-text: $primary-darker !default;
 
 $taskboard-drag-placeholder-border-width: 1px !default;
 $taskboard-drag-placeholder-border-radius: $taskboard-card-border-radius !default;

package/dist/default-ocean-blue.scss

@@ -0,0 +1,43 @@
+$primary: #1274AC;
+$secondary: #757575;
+$tertiary: #226581;
+$info: #0058E9;
+$success: #33a600;
+$warning: #F5A600;
+$error: #D51923;
+$light: #757575;
+$body-text: #424242;
+$body-bg: #ffffff;
+$heading-text: #272727;
+$subtle-text: #666666;
+$disabled-text: #8f8f8f;
+$component-text: #424242;
+$component-bg: #ffffff;
+$base-text: #424242;
+$base-bg: #fafafa;
+$hovered-text: #424242;
+$hovered-bg: #ececec;
+$selected-text: #ffffff;
+$selected-bg: #1274AC;
+$kendo-button-text: #424242;
+$kendo-button-bg: #f5f5f5;
+$kendo-flat-button-hover-opacity: 4%;
+$kendo-flat-button-active-opacity: 6%;
+$kendo-flat-button-selected-opacity: 8%;
+$link-text: #1274AC;
+$link-hover-text: #0f6190;
+$series-a: #1274AC;
+$series-b: #ffd246;
+$series-c: #78d237;
+$series-d: #28b4c8;
+$series-e: #2d73f5;
+$series-f: #aa46be;
+$scheduler-event-bg: #1274AC;
+$scheduler-event-selected-bg: #0f6190;
+$pager-number-text: #424242;
+$pager-number-hover-bg: #ececec;
+$pager-number-hover-text: #424242;
+$pager-number-selected-bg: #1274AC;
+$pager-number-selected-text: #ffffff;
+
+@import "all.scss";

package/lib/swatches/default-blue.json

@@ -3,7 +3,7 @@
     "name": "Default Blue",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.2.1-dev.4",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-dataviz-v4.json

@@ -3,7 +3,7 @@
     "name": "Default Dataviz v4",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.2.1-dev.4",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ff6358",
         "#ffd246",

package/lib/swatches/default-green.json

@@ -3,7 +3,7 @@
     "name": "Default Green",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.2.1-dev.4",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-main-dark.json

@@ -3,7 +3,7 @@
     "name": "Default Main Dark",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.2.1-dev.4",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#000000",
         "#151515",

package/lib/swatches/default-main.json

@@ -3,7 +3,7 @@
     "name": "Default Main",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.2.1-dev.4",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-nordic.json

@@ -3,7 +3,7 @@
     "name": "Default Nordic",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.2.1-dev.4",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ffffff",
         "#50686e",

package/lib/swatches/default-ocean-blue.json

@@ -0,0 +1,262 @@
+{
+    "$schema": "https://unpkg.com/@progress/kendo-theme-tasks@1.14.0/lib/schemas/kendo-swatch.json",
+    "name": "Default Ocean Blue",
+    "product": "kendo",
+    "base": "@progress/kendo-theme-default",
+    "version": "5.2.1-dev.5",
+    "previewColors": [
+        "#ffffff",
+        "#f5f5f5",
+        "#1274AC",
+        "#0f6190",
+        "#424242"
+    ],
+    "components": [],
+    "groups": [
+        {
+            "name": "Theme colors",
+            "variables": {
+                "primary": {
+                    "name": "Primary",
+                    "type": "color",
+                    "value": "#1274AC"
+                },
+                "secondary": {
+                    "name": "Secondary",
+                    "type": "color",
+                    "value": "#757575"
+                },
+                "tertiary": {
+                    "name": "Tertiary",
+                    "type": "color",
+                    "value": "#226581"
+                },
+                "info": {
+                    "name": "Info",
+                    "type": "color",
+                    "value": "#0058E9"
+                },
+                "success": {
+                    "name": "Success",
+                    "type": "color",
+                    "value": "#33a600"
+                },
+                "warning": {
+                    "name": "Warning",
+                    "type": "color",
+                    "value": "#F5A600"
+                },
+                "error": {
+                    "name": "Error",
+                    "type": "color",
+                    "value": "#D51923"
+                },
+                "light": {
+                    "name": "Light",
+                    "type": "color",
+                    "value": "#757575"
+                }
+            }
+        },
+        {
+            "name": "Body",
+            "variables": {
+                "body-text": {
+                    "name": "Body text color",
+                    "type": "color",
+                    "value": "#424242"
+                },
+                "body-bg": {
+                    "name": "Body background",
+                    "type": "color",
+                    "value": "#ffffff"
+                },
+                "heading-text": {
+                    "name": "Headings text color",
+                    "type": "color",
+                    "value": "#272727"
+                },
+                "subtle-text": {
+                    "name": "Subtle text color",
+                    "type": "color",
+                    "value": "#666666"
+                },
+                "disabled-text": {
+                    "name": "Disabled text color",
+                    "type": "color",
+                    "value": "#8f8f8f"
+                }
+            }
+        },
+        {
+            "name": "Components",
+            "variables": {
+                "component-text": {
+                    "name": "Component text color",
+                    "type": "color",
+                    "value": "#424242"
+                },
+                "component-bg": {
+                    "name": "Component background",
+                    "type": "color",
+                    "value": "#ffffff"
+                },
+                "base-text": {
+                    "name": "Header text color",
+                    "type": "color",
+                    "value": "#424242"
+                },
+                "base-bg": {
+                    "name": "Header background",
+                    "type": "color",
+                    "value": "#fafafa"
+                },
+                "hovered-text": {
+                    "name": "Hover text color",
+                    "type": "color",
+                    "value": "#424242"
+                },
+                "hovered-bg": {
+                    "name": "Hover background",
+                    "type": "color",
+                    "value": "#ececec"
+                },
+                "selected-text": {
+                    "name": "Selected text color",
+                    "type": "color",
+                    "value": "#ffffff"
+                },
+                "selected-bg": {
+                    "name": "Selected background",
+                    "type": "color",
+                    "value": "#1274AC"
+                }
+            }
+        },
+        {
+            "name": "Button",
+            "variables": {
+                "kendo-button-text": {
+                    "name": "Button text color",
+                    "type": "color",
+                    "value": "#424242"
+                },
+                "kendo-button-bg": {
+                    "name": "Button background",
+                    "type": "color",
+                    "value": "#f5f5f5"
+                },
+                "kendo-flat-button-hover-opacity": {
+                    "name": "Flat Button hover opacity",
+                    "type": "number",
+                    "value": "4%"
+                },
+                "kendo-flat-button-active-opacity": {
+                    "name": "Flat Button active opacity",
+                    "type": "number",
+                    "value": "6%"
+                },
+                "kendo-flat-button-selected-opacity": {
+                    "name": "Flat Button selected opacity",
+                    "type": "number",
+                    "value": "8%"
+                }
+            }
+        },
+        {
+            "name": "Link",
+            "variables": {
+                "link-text": {
+                    "name": "Link text color",
+                    "type": "color",
+                    "value": "#1274AC"
+                },
+                "link-hover-text": {
+                    "name": "Link hover text color",
+                    "type": "color",
+                    "value": "#0f6190"
+                }
+            }
+        },
+        {
+            "name": "Dataviz",
+            "variables": {
+                "series-a": {
+                    "name": "Series A",
+                    "type": "color",
+                    "value": "#1274AC"
+                },
+                "series-b": {
+                    "name": "Series B",
+                    "type": "color",
+                    "value": "#ffd246"
+                },
+                "series-c": {
+                    "name": "Series C",
+                    "type": "color",
+                    "value": "#78d237"
+                },
+                "series-d": {
+                    "name": "Series D",
+                    "type": "color",
+                    "value": "#28b4c8"
+                },
+                "series-e": {
+                    "name": "Series E",
+                    "type": "color",
+                    "value": "#2d73f5"
+                },
+                "series-f": {
+                    "name": "Series F",
+                    "type": "color",
+                    "value": "#aa46be"
+                }
+            }
+        },
+        {
+            "name": "Scheduler",
+            "variables": {
+                "scheduler-event-bg": {
+                    "name": "Scheduler event background",
+                    "type": "color",
+                    "value": "#1274AC"
+                },
+                "scheduler-event-selected-bg": {
+                    "name": "Scheduler event selected background",
+                    "type": "color",
+                    "value": "#0f6190"
+                }
+            }
+        },
+        {
+            "name": "Pager",
+            "variables": {
+                "pager-number-text": {
+                    "name": "Pager number text color",
+                    "type": "color",
+                    "value": "#424242"
+                },
+                "pager-number-hover-bg": {
+                    "name": "Pager number hover background",
+                    "type": "color",
+                    "value": "#ececec"
+                },
+                "pager-number-hover-text": {
+                    "name": "Pager number hover text color",
+                    "type": "color",
+                    "value": "#424242"
+                },
+                "pager-number-selected-bg": {
+                    "name": "Pager number selected background",
+                    "type": "color",
+                    "value": "#1274AC"
+                },
+                "pager-number-selected-text": {
+                    "name": "Pager number selected text color",
+                    "type": "color",
+                    "value": "#ffffff"
+                }
+            }
+        }
+    ]
+}

package/lib/swatches/default-orange.json

@@ -3,7 +3,7 @@
     "name": "Default Orange",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.2.1-dev.4",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-purple.json

@@ -3,7 +3,7 @@
     "name": "Default Purple",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.2.1-dev.4",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-turquoise.json

@@ -3,7 +3,7 @@
     "name": "Default Turquoise",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.2.1-dev.4",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ffffff",
         "#f5f5f5",

package/lib/swatches/default-urban.json

@@ -3,7 +3,7 @@
     "name": "Default Urban",
     "product": "kendo",
     "base": "@progress/kendo-theme-default",
-    "version": "5.2.1-dev.4",
+    "version": "5.2.1-dev.5",
     "previewColors": [
         "#ffffff",
         "#e3eef4",

package/lib/swatches/index.js

@@ -3,6 +3,7 @@ module.exports.mainDark = require('./default-main-dark.json');
 module.exports.blue = require('./default-blue.json');
 module.exports.green = require('./default-green.json');
 module.exports.nordic = require('./default-nordic.json');
+module.exports.orange = require('./default-ocean-blue.json');
 module.exports.orange = require('./default-orange.json');
 module.exports.purple = require('./default-purple.json');
 module.exports.turquoise = require('./default-turquoise.json');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-default",
   "description": "SASS resources for the default Kendo UI theme",
-  "version": "5.2.1-dev.4",
+  "version": "5.2.1-dev.5",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -47,5 +47,5 @@
     "prepublishOnly": "node ../../scripts/themes-prepublish.js",
     "postpublish": "echo 'no postpublish for default theme'"
   },
-  "gitHead": "9045b47fb4e1bcf58c8d4c400e28293bd0563b20"
+  "gitHead": "7f442a4c1dfe243eff6b623b62e73c161254f653"
 }

package/scss/action-sheet/_layout.scss

@@ -89,7 +89,6 @@
     }
     .k-actionsheet-item-description {
         font-size: $actionsheet-item-description-font-size;
-        opacity: $actionsheet-item-description-opacity;
     }
 
 

package/scss/action-sheet/_theme.scss

@@ -31,6 +31,12 @@
     .k-actionsheet-item {}
 
 
+    // Actionsheet item description
+    .k-actionsheet-item-description {
+        @include fill( $color: $actionsheet-item-description-text );
+    }
+
+
     // Actionsheet action
     .k-actionsheet-action {
 

package/scss/action-sheet/_variables.scss

@@ -44,8 +44,9 @@ $actionsheet-item-icon-size: null !default;
 
 $actionsheet-item-title-font-weight: null !default;
 $actionsheet-item-title-text-transform: null !default;
+
 $actionsheet-item-description-font-size: .875em !default;
-$actionsheet-item-description-opacity: .75 !default;
+$actionsheet-item-description-text: $subtle-text !default;
 
 $actionsheet-item-hover-bg: $hovered-bg !default;
 $actionsheet-item-hover-text: null !default;

package/scss/colorgradient/_variables.scss

@@ -45,7 +45,7 @@ $colorgradient-canvas-draghandle-margin-x: -( $colorgradient-draghandle-width /
 $colorgradient-input-width: 46px !default;
 $colorgradient-input-gap: ( $colorgradient-spacer / 1.5 ) !default;
 $colorgradient-input-label-gap: ( $colorgradient-spacer / 3 ) !default;
-$colorgradient-input-label-text: $disabled-text !default;
+$colorgradient-input-label-text: $subtle-text !default;
 
 $colorgradient-contrast-ratio-font-weight: $font-weight-bold !default;
 $colorgradient-contrast-spacer: ( $colorgradient-spacer / 1.5 ) !default;

package/scss/dropzone/_variables.scss

@@ -23,4 +23,4 @@ $dropzone-hint-text: null !default;
 
 $dropzone-note-font-size: $font-size-sm !default;
 $dropzone-note-spacing: null !default;
-$dropzone-note-text: try-tint( $dropzone-text, 4 ) !default;
+$dropzone-note-text: $subtle-text !default;

package/scss/expansion-panel/_theme.scss

@@ -37,6 +37,6 @@
     }
 
     .k-expander-sub-title {
-        opacity: $expander-header-sub-title-opacity;
+        color: $expander-header-sub-title-text;
     }
 }

package/scss/expansion-panel/_variables.scss

@@ -27,7 +27,7 @@ $expander-header-focused-shadow: $kendo-list-item-focus-shadow !default;
 
 $expander-title-text: $primary !default;
 
-$expander-header-sub-title-opacity: .5 !default;
+$expander-header-sub-title-text: $subtle-text !default;
 
 $expander-content-padding-x: $padding-x * 2 !default;
 $expander-content-padding-y: $padding-y * 4 !default;

package/scss/floating-label/_layout.scss

@@ -37,7 +37,8 @@
             width: auto;
         }
 
-        &.k-state-empty {
+        &.k-state-empty,
+        &.k-empty {
             > .k-label {
                 top: $floating-label-offset-y;
                 left: $floating-label-offset-x;
@@ -48,7 +49,8 @@
 
         > .k-label,
         // &:focus-within > .k-label,
-        &.k-state-focused > .k-label {
+        &.k-state-focused > .k-label,
+        &.k-focus > .k-label {
             top: $floating-label-focus-offset-y;
             left: $floating-label-focus-offset-x;
             transform: scale( $floating-label-focus-scale );
@@ -69,9 +71,11 @@
 
             > .k-label {
                 transform-origin: right center;
+                transition: transform $floating-label-transition, color $floating-label-transition, top $floating-label-transition, right $floating-label-transition;
             }
 
-            &.k-state-empty {
+            &.k-state-empty,
+            &.k-empty {
                 > .k-label {
                     left: auto;
                     right: $floating-label-offset-x;
@@ -80,11 +84,12 @@
 
             > .k-label,
             // &:focus-within > .k-label,
-            &.k-state-focused > .k-label {
+            &.k-state-focused > .k-label,
+            &.k-focus > .k-label {
                 left: auto;
                 right: $floating-label-focus-offset-x;
             }
-            &:focus-within {
+            &:focus-within > .k-label {
                 left: auto;
                 right: $floating-label-focus-offset-x;
             }

package/scss/taskboard/_variables.scss

@@ -86,7 +86,7 @@ $taskboard-card-selected-shadow: none !default;
 
 $taskboard-card-header-text: $primary !default;
 $taskboard-card-header-focus-text: $primary-darker !default;
-$taskboard-card-header-hover-text: $primary-lighter !default;
+$taskboard-card-header-hover-text: $primary-darker !default;
 
 $taskboard-drag-placeholder-border-width: 1px !default;
 $taskboard-drag-placeholder-border-radius: $taskboard-card-border-radius !default;