@progress/kendo-theme-classic 5.0.1 → 5.1.2-dev.0

package/dist/all.css

@@ -23909,13 +23909,13 @@ kendo-card-footer {
     background-color: #dddddd;
 }
 
-.k-tabstrip-items-wrapper .k-item.k-state-active, .k-tabstrip-items-wrapper .k-item.k-state-selected {
+.k-tabstrip-items-wrapper .k-item:active, .k-tabstrip-items-wrapper .k-item.k-state-active, .k-tabstrip-items-wrapper .k-item.k-state-selected {
     border-color: #cacaca;
     color: #272727;
     background-color: #ffffff;
 }
 
-.k-tabstrip-items-wrapper .k-item.k-state-focused {
+.k-tabstrip-items-wrapper .k-item:focus, .k-tabstrip-items-wrapper .k-item.k-state-focused {
     box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.12);
 }
 

package/dist/all.scss

@@ -1120,7 +1120,7 @@ $light: #ebebeb !default;
 $inverse: if( $dark-theme, $light, $dark ) !default;
 
 
-$theme-colors: (
+$kendo-theme-colors: (
     "primary": $primary,
     "secondary": $secondary,
     "tertiary": $tertiary,
@@ -1175,7 +1175,7 @@ $base-border: try-shade( $base-bg, 2 ) !default;
 $base-gradient: rgba( white, .1 ), rgba( white, 0 ) !default;
 
 /// Background color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !defualt;`.
+/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !default;`.
 /// @group component
 $component-bg: $body-bg !default;
 /// Text color of a component.
@@ -3331,7 +3331,7 @@ $utils-border-radius: (
         0: 0
     ) !default;
 
-    $utils-border-color: $theme-colors !default;
+    $utils-border-color: $kendo-theme-colors !default;
 
     $utils-border-radius-sides: (
         default: border-radius,
@@ -4429,7 +4429,7 @@ $utils-border-radius: (
 
     .k-color-inherit { color: inherit; }
 
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-text-#{$name},
         .k-color-#{$name} {
             color: $color !important;
@@ -4443,7 +4443,7 @@ $utils-border-radius: (
 
     // sass-lint:disable-block no-important
 
-    @each $name, $bg-color in $theme-colors {
+    @each $name, $bg-color in $kendo-theme-colors {
         .k-bg-#{$name} {
             background-color: $bg-color !important;
         }
@@ -4460,7 +4460,7 @@ $utils-border-radius: (
 
 @include exports( "common/decoration/variant" ) {
 
-    @each $name, $variant in $theme-colors {
+    @each $name, $variant in $kendo-theme-colors {
         .k-state-#{$name} {
             @include variant( $variant );
         }
@@ -5972,7 +5972,7 @@ $message-box-link-text-decoration: underline !default;
 // #region @import "~@progress/kendo-theme-default/scss/messagebox/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/messagebox/_theme.scss
 @include exports("messagebox/theme") {
 
-    @each $color-name, $color in $theme-colors {
+    @each $color-name, $color in $kendo-theme-colors {
         .k-messagebox-#{$color-name} {
             @include fill(
                 color-level( $color, $message-box-text-level ),
@@ -7383,7 +7383,7 @@ $listgroup-item-border-width: 1px !default;
 
 // Component
 // #region @import "_variables.scss"; -> packages/classic/scss/overlay/_variables.scss
-$overlay-theme-colors: $theme-colors !default;
+$overlay-theme-colors: $kendo-theme-colors !default;
 
 $overlay-bg: $black !default;
 $overlay-opacity: .5 !default;
@@ -7926,7 +7926,7 @@ $badge-dot-size-lg: 12px !default;
 @include exports( "badge/theme" ) {
 
     // Solid badges
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-badge-solid.k-badge-#{$name} {
             border-color: $color;
             color: contrast-wcag( $color );
@@ -7940,7 +7940,7 @@ $badge-dot-size-lg: 12px !default;
         background-color: $component-bg;
     }
 
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-badge-outline.k-badge-#{$name} {
             color: $color;
         }
@@ -8023,7 +8023,7 @@ $kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
 /// Theme colors map for the button.
 /// @group button
 $kendo-button-theme-colors: map-merge(
-    $theme-colors,
+    $kendo-theme-colors,
     ( "base": $base-bg )
 ) !default;
 
@@ -8937,6 +8937,12 @@ $kendo-input-focus-text: null !default;
 $kendo-input-focus-border: rgba(0, 0, 0, .1) !default;
 $kendo-input-focus-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !default;
 
+$kendo-input-disabled-bg: null !default;
+$kendo-input-disabled-text: null !default;
+$kendo-input-disabled-border: null !default;
+$kendo-input-disabled-gradient: null !default;
+$kendo-input-disabled-shadow: null !default;
+
 $kendo-picker-bg: $kendo-button-bg !default;
 $kendo-picker-text: $kendo-button-text !default;
 $kendo-picker-border: $kendo-button-border !default;
@@ -8955,6 +8961,12 @@ $kendo-picker-focus-border: $kendo-button-focus-border !default;
 $kendo-picker-focus-gradient: $kendo-button-focus-gradient !default;
 $kendo-picker-focus-shadow: $kendo-button-focus-shadow !default;
 
+$kendo-picker-disabled-bg: null !default;
+$kendo-picker-disabled-text: null !default;
+$kendo-picker-disabled-border: null !default;
+$kendo-picker-disabled-gradient: null !default;
+$kendo-picker-disabled-shadow: null !default;
+
 $kendo-input-placeholder-text: $subtle-text !default;
 $kendo-input-placeholder-opacity: 1 !default;
 
@@ -9448,6 +9460,19 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             @include box-shadow( $kendo-input-focus-shadow );
         }
 
+        //Disabled
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill(
+                $kendo-input-disabled-text,
+                $kendo-input-disabled-bg,
+                $kendo-input-disabled-border,
+                $kendo-input-disabled-gradient
+            );
+            @include box-shadow( $kendo-input-disabled-shadow );
+        }
+
         // Invalid
         &.k-invalid,
         &.ng-invalid.ng-touched,
@@ -9511,6 +9536,19 @@ $kendo-input-invalid-shadow: $invalid-shadow !default;
             @include box-shadow( $kendo-picker-focus-shadow );
         }
 
+        //Disabled
+        &:disabled,
+        &[disabled],
+        &.k-disabled {
+            @include fill(
+                $kendo-picker-disabled-text,
+                $kendo-picker-disabled-bg,
+                $kendo-picker-disabled-border,
+                $kendo-picker-disabled-gradient
+            );
+            @include box-shadow( $kendo-picker-disabled-shadow );
+        }
+
         // Invalid
         &.k-invalid,
         &.ng-invalid.ng-touched,
@@ -10773,7 +10811,7 @@ $kendo-avatar-sizes: (
 
 /// Theme colors map of the avatar.
 /// @group avatar
-$kendo-avatar-theme-colors: $theme-colors !default;
+$kendo-avatar-theme-colors: $kendo-theme-colors !default;
 
 // #endregion
 // #region @import "_layout.scss"; -> packages/classic/scss/avatar/_layout.scss
@@ -10977,10 +11015,10 @@ $kendo-chip-base-bg: if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-
 /// @group chip
 $kendo-chip-theme-colors: (
     "base": $kendo-chip-base-bg,
-    "error": map-get( $theme-colors, "error" ),
-    "info": map-get( $theme-colors, "info" ),
-    "warning": map-get( $theme-colors, "warning" ),
-    "success": map-get( $theme-colors, "success" )
+    "error": map-get( $kendo-theme-colors, "error" ),
+    "info": map-get( $kendo-theme-colors, "info" ),
+    "warning": map-get( $kendo-theme-colors, "warning" ),
+    "success": map-get( $kendo-theme-colors, "success" )
 ) !default;
 
 /// The base background color of solid chip.
@@ -12026,7 +12064,7 @@ $loader-container-font-size-lg: $font-size-lg !default;
 // #region @import "~@progress/kendo-theme-default/scss/loader/_theme.scss"; -> packages/classic/node_modules/@progress/kendo-theme-default/scss/loader/_theme.scss
 @include exports( "loader/theme" ) {
 
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-loader-#{$name} {
             @if $name == "secondary" {
                 color: $loader-secondary-bg;
@@ -21247,7 +21285,7 @@ $appbar-bottom-box-shadow: 0px -1px 1px rgba(0, 0, 0, .16) !default;
 
 
     // AppBar theme colors
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-appbar-#{$name} {
             @if $name == "light" {
                 color: $appbar-light-text;
@@ -21385,7 +21423,7 @@ $kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
 
 /// Theme colors map for the FAB.
 /// @group floating-action-button
-$kendo-fab-theme-colors: $theme-colors !default;
+$kendo-fab-theme-colors: $kendo-theme-colors !default;
 
 /// The base shadow of the FAB.
 /// @group floating-action-button
@@ -22851,7 +22889,7 @@ $notification-themes: () !default;
     // sass-lint:enable indentation
 }
 
-@each $theme, $props in $theme-colors {
+@each $theme, $props in $kendo-theme-colors {
     $notification-themes: map-merge($notification-themes, ($theme: notification-theme($theme, $props)) );
 }
 
@@ -23565,7 +23603,7 @@ $card-focus-callout-box-shadow-w: 2px -1px 4px 0 rgba( black, .06) !default;
 
 
     // Card theme colors
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-card-#{$name} {
             background-color: tint($color, 10);
             color: shade($color, 6);
@@ -24066,7 +24104,7 @@ $bottom-nav-flat-border: $component-border !default;
 @include exports("bottom-navigation/theme") {
 
     // Solid
-    @each $name, $color in $theme-colors {
+    @each $name, $color in $kendo-theme-colors {
         .k-bottom-nav-solid.k-bottom-nav-#{$name} {
             @include fill(
                 $color: true-mix( $color, contrast-wcag( $color ), 35%),
@@ -24099,7 +24137,7 @@ $bottom-nav-flat-border: $component-border !default;
             @include fill( $bg: rgba($bottom-nav-flat-text, .05) );
         }
 
-        @each $name, $color in $theme-colors {
+        @each $name, $color in $kendo-theme-colors {
             &.k-bottom-nav-#{$name} .k-bottom-nav-item.k-state-selected {
                 @if $name == "secondary" or $name == "light" {
                     @include fill( $color: try-shade($color, 3) );
@@ -26086,6 +26124,7 @@ $tabstrip-content-border-focused: $component-text !default;
                 );
             }
 
+            &:active,
             &.k-state-active,
             &.k-state-selected {
                 @include fill(
@@ -26096,6 +26135,7 @@ $tabstrip-content-border-focused: $component-text !default;
                 );
             }
 
+            &:focus,
             &.k-state-focused {
                 @include box-shadow( $tabstrip-item-focused-shadow );
             }

package/dist/classic-green-dark.scss

@@ -19,8 +19,8 @@ $hovered-text: #ffffff;
 $hovered-bg: #262726;
 $selected-text: #ffffff;
 $selected-bg: #3ea44e;
-$button-text: #ffffff;
-$button-bg: #131413;
+$kendo-button-text: #ffffff;
+$kendo-button-bg: #131413;
 $link-text: #3ea44e;
 $link-hover-text: #348a42;
 $series-a: #007bc3;

package/dist/classic-green.scss

@@ -18,8 +18,8 @@ $hovered-text: #272727;
 $hovered-bg: #e0e0e0;
 $selected-text: #ffffff;
 $selected-bg: #3ea44e;
-$button-text: #272727;
-$button-bg: #f3f4f3;
+$kendo-button-text: #272727;
+$kendo-button-bg: #f3f4f3;
 $link-text: #3ea44e;
 $link-hover-text: #348a42;
 $series-a: #007bc3;

package/dist/classic-main-dark.scss

@@ -19,8 +19,8 @@ $hovered-text: #ffffff;
 $hovered-bg: #232323;
 $selected-text: #ffffff;
 $selected-bg: #ff6358;
-$button-text: #ffffff;
-$button-bg: #101010;
+$kendo-button-text: #ffffff;
+$kendo-button-bg: #101010;
 $link-text: #f35800;
 $link-hover-text: #cc4a00;
 $series-a: #007bc3;

package/dist/classic-main.scss

@@ -18,8 +18,8 @@ $hovered-text: #272727;
 $hovered-bg: #bababa;
 $selected-text: #ffffff;
 $selected-bg: #ff6358;
-$button-text: #272727;
-$button-bg: #f0f0f0;
+$kendo-button-text: #272727;
+$kendo-button-bg: #f0f0f0;
 $link-text: #f35800;
 $link-hover-text: #cc4a00;
 $series-a: #007bc3;

package/dist/classic-opal-dark.scss

@@ -19,8 +19,8 @@ $hovered-text: #ffffff;
 $hovered-bg: #30363e;
 $selected-text: #000000;
 $selected-bg: #7bd2f6;
-$button-text: #ffffff;
-$button-bg: #1e242d;
+$kendo-button-text: #ffffff;
+$kendo-button-bg: #1e242d;
 $link-text: #375d6d;
 $link-hover-text: #2e4e5c;
 $series-a: #007bc3;

package/dist/classic-opal.scss

@@ -18,8 +18,8 @@ $hovered-text: #003f59;
 $hovered-bg: #a3d0e4;
 $selected-text: #000000;
 $selected-bg: #7bd2f6;
-$button-text: #003f59;
-$button-bg: #def4fd;
+$kendo-button-text: #003f59;
+$kendo-button-bg: #def4fd;
 $link-text: #375d6d;
 $link-hover-text: #2e4e5c;
 $series-a: #007bc3;

package/dist/classic-silver-dark.scss

@@ -19,8 +19,8 @@ $hovered-text: #ffffff;
 $hovered-bg: #262627;
 $selected-text: #ffffff;
 $selected-bg: #1984c8;
-$button-text: #ffffff;
-$button-bg: #131314;
+$kendo-button-text: #ffffff;
+$kendo-button-bg: #131314;
 $link-text: #1984c8;
 $link-hover-text: #156fa8;
 $series-a: #007bc3;

package/dist/classic-silver.scss

@@ -18,8 +18,8 @@ $hovered-text: #263248;
 $hovered-bg: #dbdee5;
 $selected-text: #ffffff;
 $selected-bg: #1984c8;
-$button-text: #515967;
-$button-bg: #f3f3f4;
+$kendo-button-text: #515967;
+$kendo-button-bg: #f3f3f4;
 $link-text: #1984c8;
 $link-hover-text: #156fa8;
 $series-a: #007bc3;

package/lib/swatches/classic-green-dark.json

@@ -144,12 +144,12 @@
         {
             "name": "Button",
             "variables": {
-                "button-text": {
+                "kendo-button-text": {
                     "name": "Button text color",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "button-bg": {
+                "kendo-button-bg": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#131413"

package/lib/swatches/classic-green.json

@@ -134,12 +134,12 @@
         {
             "name": "Button",
             "variables": {
-                "button-text": {
+                "kendo-button-text": {
                     "name": "Button text color",
                     "type": "color",
                     "value": "#272727"
                 },
-                "button-bg": {
+                "kendo-button-bg": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#f3f4f3"

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

@@ -144,12 +144,12 @@
         {
             "name": "Button",
             "variables": {
-                "button-text": {
+                "kendo-button-text": {
                     "name": "Button text color",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "button-bg": {
+                "kendo-button-bg": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#101010"

package/lib/swatches/classic-main.json

@@ -134,12 +134,12 @@
         {
             "name": "Button",
             "variables": {
-                "button-text": {
+                "kendo-button-text": {
                     "name": "Button text color",
                     "type": "color",
                     "value": "#272727"
                 },
-                "button-bg": {
+                "kendo-button-bg": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#f0f0f0"

package/lib/swatches/classic-opal-dark.json

@@ -144,12 +144,12 @@
         {
             "name": "Button",
             "variables": {
-                "button-text": {
+                "kendo-button-text": {
                     "name": "Button text color",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "button-bg": {
+                "kendo-button-bg": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#1e242d"

package/lib/swatches/classic-opal.json

@@ -134,12 +134,12 @@
         {
             "name": "Button",
             "variables": {
-                "button-text": {
+                "kendo-button-text": {
                     "name": "Button text color",
                     "type": "color",
                     "value": "#003f59"
                 },
-                "button-bg": {
+                "kendo-button-bg": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#def4fd"

package/lib/swatches/classic-silver-dark.json

@@ -144,12 +144,12 @@
         {
             "name": "Button",
             "variables": {
-                "button-text": {
+                "kendo-button-text": {
                     "name": "Button text color",
                     "type": "color",
                     "value": "#ffffff"
                 },
-                "button-bg": {
+                "kendo-button-bg": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#131314"

package/lib/swatches/classic-silver.json

@@ -134,12 +134,12 @@
         {
             "name": "Button",
             "variables": {
-                "button-text": {
+                "kendo-button-text": {
                     "name": "Button text color",
                     "type": "color",
                     "value": "#515967"
                 },
-                "button-bg": {
+                "kendo-button-bg": {
                     "name": "Button background",
                     "type": "color",
                     "value": "#f3f3f4"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-classic",
   "description": "Sass port of less based themes for Kendo UI theme",
-  "version": "5.0.1",
+  "version": "5.1.2-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -49,7 +49,7 @@
     "postpublish": "echo 'no postpublish for classic theme'"
   },
   "dependencies": {
-    "@progress/kendo-theme-default": "^5.0.1"
+    "@progress/kendo-theme-default": "^5.1.2-dev.0"
   },
-  "gitHead": "7d2371ce2d1bf6cb93c6514e6578965140837353"
+  "gitHead": "c492bbaeca2d104534c4b4329c41afd762bb563b"
 }

package/scss/_variables.scss

@@ -189,7 +189,7 @@ $light: #ebebeb !default;
 $inverse: if( $dark-theme, $light, $dark ) !default;
 
 
-$theme-colors: (
+$kendo-theme-colors: (
     "primary": $primary,
     "secondary": $secondary,
     "tertiary": $tertiary,
@@ -244,7 +244,7 @@ $base-border: try-shade( $base-bg, 2 ) !default;
 $base-gradient: rgba( white, .1 ), rgba( white, 0 ) !default;
 
 /// Background color of a component.
-/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !defualt;`.
+/// Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !default;`.
 /// @group component
 $component-bg: $body-bg !default;
 /// Text color of a component.

package/scss/avatar/_variables.scss

@@ -24,4 +24,4 @@ $kendo-avatar-sizes: (
 
 /// Theme colors map of the avatar.
 /// @group avatar
-$kendo-avatar-theme-colors: $theme-colors !default;
+$kendo-avatar-theme-colors: $kendo-theme-colors !default;

package/scss/button/_variables.scss

@@ -54,7 +54,7 @@ $kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
 /// Theme colors map for the button.
 /// @group button
 $kendo-button-theme-colors: map-merge(
-    $theme-colors,
+    $kendo-theme-colors,
     ( "base": $base-bg )
 ) !default;
 

package/scss/chip/_variables.scss

@@ -66,10 +66,10 @@ $kendo-chip-base-bg: if( $dark-theme, contrast-wcag($kendo-button-text), $kendo-
 /// @group chip
 $kendo-chip-theme-colors: (
     "base": $kendo-chip-base-bg,
-    "error": map-get( $theme-colors, "error" ),
-    "info": map-get( $theme-colors, "info" ),
-    "warning": map-get( $theme-colors, "warning" ),
-    "success": map-get( $theme-colors, "success" )
+    "error": map-get( $kendo-theme-colors, "error" ),
+    "info": map-get( $kendo-theme-colors, "info" ),
+    "warning": map-get( $kendo-theme-colors, "warning" ),
+    "success": map-get( $kendo-theme-colors, "success" )
 ) !default;
 
 /// The base background color of solid chip.

package/scss/fab/_variables.scss

@@ -88,7 +88,7 @@ $kendo-fab-item-icon-height: $kendo-fab-item-icon-width !default;
 
 /// Theme colors map for the FAB.
 /// @group floating-action-button
-$kendo-fab-theme-colors: $theme-colors !default;
+$kendo-fab-theme-colors: $kendo-theme-colors !default;
 
 /// The base shadow of the FAB.
 /// @group floating-action-button

package/scss/input/_variables.scss

@@ -71,6 +71,12 @@ $kendo-input-focus-text: null !default;
 $kendo-input-focus-border: rgba(0, 0, 0, .1) !default;
 $kendo-input-focus-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !default;
 
+$kendo-input-disabled-bg: null !default;
+$kendo-input-disabled-text: null !default;
+$kendo-input-disabled-border: null !default;
+$kendo-input-disabled-gradient: null !default;
+$kendo-input-disabled-shadow: null !default;
+
 $kendo-picker-bg: $kendo-button-bg !default;
 $kendo-picker-text: $kendo-button-text !default;
 $kendo-picker-border: $kendo-button-border !default;
@@ -89,6 +95,12 @@ $kendo-picker-focus-border: $kendo-button-focus-border !default;
 $kendo-picker-focus-gradient: $kendo-button-focus-gradient !default;
 $kendo-picker-focus-shadow: $kendo-button-focus-shadow !default;
 
+$kendo-picker-disabled-bg: null !default;
+$kendo-picker-disabled-text: null !default;
+$kendo-picker-disabled-border: null !default;
+$kendo-picker-disabled-gradient: null !default;
+$kendo-picker-disabled-shadow: null !default;
+
 $kendo-input-placeholder-text: $subtle-text !default;
 $kendo-input-placeholder-opacity: 1 !default;
 

package/scss/notification/_variables.scss

@@ -29,6 +29,6 @@ $notification-themes: () !default;
     // sass-lint:enable indentation
 }
 
-@each $theme, $props in $theme-colors {
+@each $theme, $props in $kendo-theme-colors {
     $notification-themes: map-merge($notification-themes, ($theme: notification-theme($theme, $props)) );
 }

package/scss/overlay/_variables.scss

@@ -1,4 +1,4 @@
-$overlay-theme-colors: $theme-colors !default;
+$overlay-theme-colors: $kendo-theme-colors !default;
 
 $overlay-bg: $black !default;
 $overlay-opacity: .5 !default;