@progress/kendo-theme-default 7.2.1-dev.6 → 7.2.1-dev.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/dist/all.css +0 -48
  2. package/dist/all.scss +75 -189
  3. package/dist/meta/sassdoc-data.json +426 -534
  4. package/dist/meta/sassdoc-raw-data.json +213 -263
  5. package/dist/meta/variables.json +0 -8
  6. package/lib/swatches/default-blue.json +1 -1
  7. package/lib/swatches/default-dataviz-v4.json +1 -1
  8. package/lib/swatches/default-green.json +1 -1
  9. package/lib/swatches/default-main-dark.json +1 -1
  10. package/lib/swatches/default-main.json +1 -1
  11. package/lib/swatches/default-nordic.json +1 -1
  12. package/lib/swatches/default-ocean-blue-a11y.json +1 -1
  13. package/lib/swatches/default-ocean-blue.json +1 -1
  14. package/lib/swatches/default-orange.json +1 -1
  15. package/lib/swatches/default-purple.json +1 -1
  16. package/lib/swatches/default-turquoise.json +1 -1
  17. package/lib/swatches/default-urban.json +1 -1
  18. package/package.json +4 -4
  19. package/scss/bottom-navigation/_theme.scss +3 -3
  20. package/scss/button/_theme.scss +5 -5
  21. package/scss/button/_variables.scss +1 -1
  22. package/scss/calendar/_theme.scss +1 -1
  23. package/scss/checkbox/_variables.scss +1 -1
  24. package/scss/chip/_theme.scss +3 -3
  25. package/scss/chip/_variables.scss +2 -2
  26. package/scss/dataviz/_variables.scss +11 -11
  27. package/scss/dock-manager/_variables.scss +1 -1
  28. package/scss/fab/_theme.scss +6 -6
  29. package/scss/gantt/_variables.scss +1 -1
  30. package/scss/grid/_variables.scss +5 -5
  31. package/scss/input/_theme.scss +0 -102
  32. package/scss/input/_variables.scss +5 -12
  33. package/scss/listview/_variables.scss +1 -1
  34. package/scss/map/_variables.scss +1 -1
  35. package/scss/mediaplayer/_theme.scss +1 -1
  36. package/scss/mediaplayer/_variables.scss +1 -1
  37. package/scss/pivotgrid/_variables.scss +1 -1
  38. package/scss/progressbar/_theme.scss +1 -1
  39. package/scss/scheduler/_theme.scss +2 -2
  40. package/scss/signature/_variables.scss +1 -1
  41. package/scss/skeleton/_variables.scss +1 -1
  42. package/scss/slider/_variables.scss +1 -1
  43. package/scss/spreadsheet/_variables.scss +4 -4
  44. package/scss/stepper/_variables.scss +3 -3
  45. package/scss/switch/_theme.scss +2 -2
  46. package/scss/switch/_variables.scss +2 -2
  47. package/scss/table/_variables.scss +3 -3
  48. package/scss/timeline/_variables.scss +2 -2
@@ -3603,14 +3603,6 @@
3603
3603
  "type": "Null",
3604
3604
  "value": "null"
3605
3605
  },
3606
- "kendo-input-valid-border": {
3607
- "type": "Color",
3608
- "value": "#37b400"
3609
- },
3610
- "kendo-input-valid-shadow": {
3611
- "type": "Null",
3612
- "value": "null"
3613
- },
3614
3606
  "kendo-picker-bg": {
3615
3607
  "type": "Color",
3616
3608
  "value": "#f5f5f5"
@@ -3,7 +3,7 @@
3
3
  "name": "Default Blue",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f5f5f5",
@@ -3,7 +3,7 @@
3
3
  "name": "Default Dataviz v4",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#ff6358",
@@ -3,7 +3,7 @@
3
3
  "name": "Default Green",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#ffffff",
@@ -3,7 +3,7 @@
3
3
  "name": "Default Main Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#000000",
@@ -3,7 +3,7 @@
3
3
  "name": "Default Main",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#ffffff",
@@ -3,7 +3,7 @@
3
3
  "name": "Default Nordic",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#ffffff",
@@ -3,7 +3,7 @@
3
3
  "name": "Default Ocean Blue A11Y",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#ffffff",
@@ -3,7 +3,7 @@
3
3
  "name": "Default Ocean Blue",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#ffffff",
@@ -3,7 +3,7 @@
3
3
  "name": "Default Orange",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#ffffff",
@@ -3,7 +3,7 @@
3
3
  "name": "Default Purple",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#ffffff",
@@ -3,7 +3,7 @@
3
3
  "name": "Default Turquoise",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#ffffff",
@@ -3,7 +3,7 @@
3
3
  "name": "Default Urban",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-default",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#ffffff",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-theme-default",
3
3
  "description": "SASS resources for the default Kendo UI theme",
4
- "version": "7.2.1-dev.6",
4
+ "version": "7.2.1-dev.8",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -52,12 +52,12 @@
52
52
  },
53
53
  "dependencies": {
54
54
  "@progress/kendo-svg-icons": "2.1.0",
55
- "@progress/kendo-theme-core": "7.2.1-dev.6",
56
- "@progress/kendo-theme-utils": "7.2.1-dev.6"
55
+ "@progress/kendo-theme-core": "7.2.1-dev.8",
56
+ "@progress/kendo-theme-utils": "7.2.1-dev.8"
57
57
  },
58
58
  "directories": {
59
59
  "doc": "docs",
60
60
  "lib": "lib"
61
61
  },
62
- "gitHead": "683ce72fdb19a40f8f3adb06c95f732e8527023c"
62
+ "gitHead": "2a05ecc1e125b0899a93c9af54574731c8dd75d0"
63
63
  }
@@ -4,13 +4,13 @@
4
4
  @each $name, $color in $kendo-theme-colors {
5
5
  .k-bottom-nav-solid-#{$name} {
6
6
  @include fill(
7
- $color: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .65 ), k-true-mix( $color, k-contrast-legacy( $color ), 35%)),
7
+ $color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 65%, transparent), k-true-mix( $color, k-contrast-legacy( $color ), 35%)),
8
8
  $bg: $color
9
9
  );
10
10
 
11
11
  .k-bottom-nav-item.k-focus,
12
12
  .k-bottom-nav-item:focus {
13
- @include fill( $bg: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .125 ), rgba(k-true-mix( $color, k-contrast-legacy( $color ), 35%), .2)));
13
+ @include fill( $bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 12.5%, transparent), rgba(k-true-mix( $color, k-contrast-legacy( $color ), 35%), .2)));
14
14
  }
15
15
 
16
16
  .k-bottom-nav-item.k-selected {
@@ -34,7 +34,7 @@
34
34
 
35
35
  .k-bottom-nav-item.k-focus,
36
36
  .k-bottom-nav-item:focus {
37
- @include fill( $bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05), rgba($kendo-bottom-nav-flat-text, .05)) );
37
+ @include fill( $bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba($kendo-bottom-nav-flat-text, .05)) );
38
38
  }
39
39
 
40
40
  .k-bottom-nav-item.k-selected {
@@ -102,7 +102,7 @@
102
102
  &:focus,
103
103
  &.k-focus {
104
104
  @if ( $kendo-solid-button-shadow ) {
105
- @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( $name, true ), $kendo-solid-button-shadow-opacity ), rgba( $_button-border, $kendo-solid-button-shadow-opacity )), true, true );
105
+ @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-solid-button-shadow-opacity * 100% ), transparent), rgba( $_button-border, $kendo-solid-button-shadow-opacity )), true, true );
106
106
  }
107
107
  }
108
108
 
@@ -172,9 +172,9 @@
172
172
  &.k-focus {
173
173
  @if $kendo-outline-button-shadow {
174
174
  @if $name == "base" {
175
- @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), $kendo-outline-button-shadow-opacity ), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true );
175
+ @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true );
176
176
  } @else {
177
- @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( $name, true ), $kendo-outline-button-shadow-opacity ), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true );
177
+ @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-outline-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-outline-button-shadow-opacity )), true, true );
178
178
  }
179
179
  }
180
180
  }
@@ -257,9 +257,9 @@
257
257
  &.k-focus {
258
258
  @if ( $kendo-link-button-shadow ) {
259
259
  @if $name == "base" {
260
- @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), $kendo-link-button-shadow-opacity ), rgba( $color, $kendo-link-button-shadow-opacity )), true, true );
260
+ @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-link-button-shadow-opacity )), true, true );
261
261
  } @else {
262
- @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, rgba( k-color( $name, true ), $kendo-link-button-shadow-opacity ), rgba( $color, $kendo-link-button-shadow-opacity )), true, true );
262
+ @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) ( $kendo-link-button-shadow-opacity * 100% ), transparent), rgba( $color, $kendo-link-button-shadow-opacity )), true, true );
263
263
  }
264
264
  }
265
265
  }
@@ -186,7 +186,7 @@ $kendo-button-focus-border: null !default;
186
186
  $kendo-button-focus-gradient: null !default;
187
187
  /// The base shadow of the focused Button.
188
188
  /// @group button
189
- $kendo-button-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08), rgba( $kendo-button-border, .08 )) !default;
189
+ $kendo-button-focus-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-button-border, .08 )) !default;
190
190
 
191
191
  /// The base background of the disabled Button.
192
192
  /// @group button
@@ -159,7 +159,7 @@
159
159
  .k-calendar { // stylelint-disable-line
160
160
 
161
161
  $kendo-calendar-range-gap: 1px !default;
162
- $kendo-calendar-range-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-calendar-cell-selected-bg, .25 ));
162
+ $kendo-calendar-range-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-calendar-cell-selected-bg, .25 ));
163
163
  $kendo-calendar-range-split-size: 5px !default;
164
164
 
165
165
  .k-range-start,
@@ -107,7 +107,7 @@ $kendo-checkbox-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;
107
107
  $kendo-checkbox-focus-checked-border: null !default;
108
108
  /// The box shadow of the focused and checked CheckBox.
109
109
  /// @group checkbox
110
- $kendo-checkbox-focus-checked-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary, true ), .3 ), rgba( $kendo-color-primary, .3 )) !default;
110
+ $kendo-checkbox-focus-checked-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 30%, transparent), rgba( $kendo-color-primary, .3 )) !default;
111
111
 
112
112
  /// The background color of the disabled CheckBox.
113
113
  /// @group checkbox
@@ -36,7 +36,7 @@
36
36
 
37
37
  &:focus,
38
38
  &.k-focus {
39
- @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), rgba( $color, .16 )) );
39
+ @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), rgba( $color, .16 )) );
40
40
  }
41
41
 
42
42
  &:hover,
@@ -90,7 +90,7 @@
90
90
 
91
91
  &:focus,
92
92
  &.k-focus {
93
- @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
93
+ @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
94
94
  }
95
95
 
96
96
  &:hover,
@@ -116,7 +116,7 @@
116
116
 
117
117
  &:focus,
118
118
  &.k-focus {
119
- @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( $name, true ), .16 ), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
119
+ @include focus-indicator( 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 16%, transparent), if( $kendo-is-dark-theme, rgba( k-color-tint( $color, 50% ), .32 ), rgba( $color, .16 ))) );
120
120
  }
121
121
 
122
122
  &:hover,
@@ -115,7 +115,7 @@ $kendo-chip-solid-text: $kendo-button-text !default;
115
115
  $kendo-chip-solid-border: $kendo-button-border !default;
116
116
  /// The base shadow of the solid Chip.
117
117
  /// @group chip
118
- $kendo-chip-solid-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default;
118
+ $kendo-chip-solid-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default;
119
119
  /// The base gradient of the solid Chip.
120
120
  /// @group chip
121
121
  $kendo-chip-solid-gradient: $kendo-button-gradient !default;
@@ -152,7 +152,7 @@ $kendo-chip-outline-text: $kendo-chip-solid-text !default;
152
152
  $kendo-chip-outline-border: $kendo-chip-outline-text !default;
153
153
  /// The base shadow of the outline Chip.
154
154
  /// @group chip
155
- $kendo-chip-outline-shadow: 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default;
155
+ $kendo-chip-outline-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .08 ) )) !default;
156
156
 
157
157
  /// The base background color of the hovered outline Chip.
158
158
  /// @group chip
@@ -100,13 +100,13 @@ $kendo-chart-pane-title-font-weight: $kendo-font-weight-normal !default;
100
100
 
101
101
  /// The color of the Chart grid lines (major).
102
102
  /// @group charts
103
- $kendo-chart-major-lines: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) !default;
103
+ $kendo-chart-major-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !default;
104
104
 
105
105
  /// The color of the Chart grid lines (minor).
106
106
  /// @group charts
107
- $kendo-chart-minor-lines: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .04 ) !default;
107
+ $kendo-chart-minor-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 )) !default;
108
108
 
109
- $kendo-chart-inactive: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-body-text, .5 )) !default;
109
+ $kendo-chart-inactive: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-body-text, .5 )) !default;
110
110
  $kendo-chart-area-opacity: .6 !default;
111
111
  $kendo-chart-area-inactive-opacity: .1 !default;
112
112
  $kendo-chart-line-inactive-opacity: .3 !default;
@@ -117,20 +117,20 @@ $kendo-chart-bg: $kendo-component-bg !default;
117
117
  $kendo-chart-text: $kendo-component-text !default;
118
118
  $kendo-chart-border: $kendo-component-border !default;
119
119
 
120
- $kendo-chart-crosshair-background: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
120
+ $kendo-chart-crosshair-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
121
121
  $kendo-chart-crosshair-shared-tooltip-color: $kendo-chart-text !default;
122
122
  $kendo-chart-crosshair-shared-tooltip-background: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-chart-bg, 1 )) !default;
123
- $kendo-chart-crosshair-shared-tooltip-border: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08) !default;
123
+ $kendo-chart-crosshair-shared-tooltip-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !default;
124
124
 
125
- $kendo-chart-notes-background: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
126
- $kendo-chart-notes-border: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
127
- $kendo-chart-notes-lines: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
125
+ $kendo-chart-notes-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
126
+ $kendo-chart-notes-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
127
+ $kendo-chart-notes-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
128
128
 
129
- $kendo-chart-error-bars-background: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .5 ) !default;
129
+ $kendo-chart-error-bars-background: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 )) !default;
130
130
 
131
131
  $kendo-chart-selection-handle-size: 22px !default;
132
- $kendo-chart-selection-border-color: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .08 ) !default;
133
- $kendo-chart-selection-shadow: inset 0 1px 7px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .15) !default;
132
+ $kendo-chart-selection-border-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 )) !default;
133
+ $kendo-chart-selection-shadow: inset 0 1px 7px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .15 )) !default;
134
134
 
135
135
 
136
136
  // TreeMap
@@ -107,7 +107,7 @@ $kendo-dock-manager-dock-preview-border-style: dashed !default;
107
107
  $kendo-dock-manager-dock-preview-border-radius: $kendo-border-radius-sm !default;
108
108
  /// The background color of the dropping area in the DockManager component.
109
109
  /// @group dock-manager
110
- $kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .16 ), rgba( $kendo-color-primary, .16 )) !default;
110
+ $kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 16%, transparent), rgba( $kendo-color-primary, .16 )) !default;
111
111
  /// The border color of the dropping area in the DockManager component.
112
112
  /// @group dock-manager
113
113
  $kendo-dock-manager-dock-preview-border: $kendo-color-primary !default;
@@ -28,7 +28,7 @@
28
28
  @if $kendo-enable-focus-contrast {
29
29
  @include box-shadow( inset 0 0 0 2px currentColor );
30
30
  } @else {
31
- outline: $kendo-fab-outline-style $kendo-fab-outline-width if($kendo-enable-color-system, rgba( k-color( $name, true ), .3 ), rgba( $color, .3 ));
31
+ outline: $kendo-fab-outline-style $kendo-fab-outline-width if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 30%, transparent), rgba( $color, .3 ));
32
32
  }
33
33
  }
34
34
  }
@@ -49,8 +49,8 @@
49
49
  .k-disabled.k-fab-solid-#{$name},
50
50
  .k-fab-solid-#{$name}:disabled {
51
51
  @include box-shadow($kendo-fab-disabled-shadow);
52
- background-color: if($kendo-enable-color-system, rgba( k-color( $name, true ), .6 ), k-try-tint( $color, 5 ));
53
- color: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .6 ), k-try-tint( k-contrast-legacy( $color ), 5 ));
52
+ background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 60%, transparent), k-try-tint( $color, 5 ));
53
+ color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 60%, transparent), k-try-tint( k-contrast-legacy( $color ), 5 ));
54
54
  opacity: 1;
55
55
  }
56
56
  }
@@ -89,7 +89,7 @@
89
89
  .k-fab-item.k-focus .k-fab-item-text,
90
90
  .k-fab-item.k-focus .k-fab-item-icon {
91
91
  @if $kendo-enable-focus-contrast {
92
- @include box-shadow( inset 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
92
+ @include box-shadow( inset 0 0 0 2px if($kendo-enable-color-system, k-color( on-app-surface ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )) );
93
93
  } @else {
94
94
  outline: $kendo-fab-item-outline-style $kendo-fab-item-outline-width $kendo-fab-item-outline-color;
95
95
  }
@@ -111,8 +111,8 @@
111
111
  .k-fab-item-text,
112
112
  .k-fab-item-icon {
113
113
  @include box-shadow($kendo-fab-item-disabled-shadow);
114
- background-color: if($kendo-enable-color-system, rgba( k-color( base, true ), .6 ), k-try-tint( $kendo-fab-item-bg, 5 ));
115
- color: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-try-tint( $kendo-fab-item-text, 5 ));
114
+ background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 60%, transparent), k-try-tint( $kendo-fab-item-bg, 5 ));
115
+ color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-try-tint( $kendo-fab-item-text, 5 ));
116
116
  }
117
117
  }
118
118
 
@@ -16,7 +16,7 @@ $kendo-gantt-treelist-bg: null !default;
16
16
  $kendo-gantt-treelist-text: null !default;
17
17
  $kendo-gantt-treelist-border: null !default;
18
18
 
19
- $kendo-gantt-nonwork-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .03 ), rgba( k-contrast-legacy( $kendo-gantt-bg ), .025 )) !default;
19
+ $kendo-gantt-nonwork-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 3%, transparent), rgba( k-contrast-legacy( $kendo-gantt-bg ), .025 )) !default;
20
20
  $kendo-gantt-nonwork-text: null !default;
21
21
  $kendo-gantt-nonwork-border: null !default;
22
22
 
@@ -222,7 +222,7 @@ $kendo-grid-grouping-row-bg: $kendo-base-bg !default;
222
222
  $kendo-grid-grouping-row-text: $kendo-grid-text !default;
223
223
 
224
224
  $kendo-grid-sorted-icon-spacing: calc( #{$kendo-padding-md-x} - 1px ) !default;
225
- $kendo-grid-sorted-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), rgba( k-contrast-legacy( $kendo-grid-bg ), .02 )) !default;
225
+ $kendo-grid-sorted-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( k-contrast-legacy( $kendo-grid-bg ), .02 )) !default;
226
226
  $kendo-grid-sorting-indicator-text: $kendo-color-primary !default;
227
227
  $kendo-grid-sorting-index-font-size: $kendo-font-size-sm !default;
228
228
  $kendo-grid-sorting-index-height: $kendo-icon-size !default;
@@ -251,12 +251,12 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
251
251
  $kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default;
252
252
  $kendo-grid-sticky-footer-hover-bg: $kendo-grid-hover-bg !default;
253
253
 
254
- $kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), k-color-mix($kendo-selected-bg, #ffffff, 25%)) !default;
255
- $kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .24 ), k-color-shade($kendo-grid-sticky-selected-bg, .4)) !default;
254
+ $kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), k-color-mix($kendo-selected-bg, #ffffff, 25%)) !default;
255
+ $kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 24%, transparent), k-color-shade($kendo-grid-sticky-selected-bg, .4)) !default;
256
256
 
257
257
  // Must be a solid color
258
258
  $kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-color-darken($kendo-grid-bg, 8%)) !default;
259
- $kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .24 ), k-color-shade($kendo-grid-sticky-selected-bg, .7)) !default;
259
+ $kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 24%, transparent), k-color-shade($kendo-grid-sticky-selected-bg, .7)) !default;
260
260
 
261
261
  $kendo-grid-column-menu-width: 230px !default;
262
262
  $kendo-grid-column-menu-max-width: 320px !default;
@@ -307,7 +307,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
307
307
 
308
308
  /// Background color of the grid row resize indicator
309
309
  /// @group grid
310
- $kendo-grid-row-resizer-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .2 ), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) !default;
310
+ $kendo-grid-row-resizer-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 20%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .12 )) !default;
311
311
  /// Active background color of the grid row resize indicator
312
312
  /// @group grid
313
313
  $kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;
@@ -70,23 +70,6 @@
70
70
  }
71
71
  }
72
72
 
73
- // Valid
74
- &.k-valid {
75
- @include fill( $border: $kendo-input-valid-border );
76
-
77
- .k-input-validation-icon {
78
- color: $kendo-valid-text;
79
- }
80
-
81
- &:focus,
82
- &.k-focus {
83
- @include focus-indicator( $kendo-input-valid-shadow );
84
- }
85
- &:focus-within {
86
- @include focus-indicator( $kendo-input-valid-shadow );
87
- }
88
- }
89
-
90
73
  // Prefix & Suffix
91
74
  .k-input-prefix {
92
75
  color: $kendo-input-prefix-text;
@@ -175,23 +158,6 @@
175
158
  @include focus-indicator( $kendo-input-invalid-shadow );
176
159
  }
177
160
  }
178
-
179
- // Valid
180
- &.k-valid {
181
- @include fill( $border: $kendo-input-valid-border );
182
-
183
- .k-input-validation-icon {
184
- color: $kendo-valid-text;
185
- }
186
-
187
- &:focus,
188
- &.k-focus {
189
- @include focus-indicator( $kendo-input-valid-shadow );
190
- }
191
- &:focus-within {
192
- @include focus-indicator( $kendo-input-valid-shadow );
193
- }
194
- }
195
161
  }
196
162
 
197
163
 
@@ -277,23 +243,6 @@
277
243
  }
278
244
  }
279
245
 
280
- // Valid
281
- &.k-valid {
282
- @include fill( $border: $kendo-input-valid-border );
283
-
284
- .k-input-validation-icon {
285
- color: $kendo-valid-text;
286
- }
287
-
288
- &:focus,
289
- &.k-focus {
290
- @include focus-indicator( $kendo-input-valid-shadow );
291
- }
292
- &:focus-within {
293
- @include focus-indicator( $kendo-input-valid-shadow );
294
- }
295
- }
296
-
297
246
  // Prefix & Suffix
298
247
  .k-input-prefix {
299
248
  color: $kendo-input-prefix-text;
@@ -388,23 +337,6 @@
388
337
  @include focus-indicator( $kendo-input-invalid-shadow );
389
338
  }
390
339
  }
391
-
392
- // Valid
393
- &.k-valid {
394
- @include fill( $border: $kendo-input-valid-border );
395
-
396
- .k-input-validation-icon {
397
- color: $kendo-valid-text;
398
- }
399
-
400
- &:focus,
401
- &.k-focus {
402
- @include focus-indicator( $kendo-input-valid-shadow );
403
- }
404
- &:focus-within {
405
- @include focus-indicator( $kendo-input-valid-shadow );
406
- }
407
- }
408
340
  }
409
341
 
410
342
 
@@ -477,23 +409,6 @@
477
409
  }
478
410
  }
479
411
 
480
- // Valid
481
- &.k-valid {
482
- @include fill( $border: $kendo-input-valid-border );
483
-
484
- .k-input-validation-icon {
485
- color: $kendo-valid-text;
486
- }
487
-
488
- &:focus,
489
- &.k-focus {
490
- @include focus-indicator( $kendo-input-valid-shadow );
491
- }
492
- &:focus-within {
493
- @include focus-indicator( $kendo-input-valid-shadow );
494
- }
495
- }
496
-
497
412
  // Prefix & Suffix
498
413
  .k-input-prefix {
499
414
  color: $kendo-input-prefix-text;
@@ -588,23 +503,6 @@
588
503
  @include focus-indicator( $kendo-input-invalid-shadow );
589
504
  }
590
505
  }
591
-
592
- // Valid
593
- &.k-valid {
594
- @include fill( $border: $kendo-input-valid-border );
595
-
596
- .k-input-validation-icon {
597
- color: $kendo-valid-text;
598
- }
599
-
600
- &:focus,
601
- &.k-focus {
602
- @include focus-indicator( $kendo-input-valid-shadow );
603
- }
604
- &:focus-within {
605
- @include focus-indicator( $kendo-input-valid-shadow );
606
- }
607
- }
608
506
  }
609
507
 
610
508
  }