@progress/kendo-theme-classic 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 (41) hide show
  1. package/dist/all.css +0 -48
  2. package/dist/all.scss +77 -191
  3. package/dist/meta/sassdoc-data.json +430 -538
  4. package/dist/meta/sassdoc-raw-data.json +215 -265
  5. package/dist/meta/variables.json +0 -8
  6. package/lib/swatches/classic-green-dark.json +1 -1
  7. package/lib/swatches/classic-green.json +1 -1
  8. package/lib/swatches/classic-lavender-dark.json +1 -1
  9. package/lib/swatches/classic-lavender.json +1 -1
  10. package/lib/swatches/classic-main-dark.json +1 -1
  11. package/lib/swatches/classic-main.json +1 -1
  12. package/lib/swatches/classic-metro-dark.json +1 -1
  13. package/lib/swatches/classic-metro.json +1 -1
  14. package/lib/swatches/classic-moonlight.json +1 -1
  15. package/lib/swatches/classic-opal-dark.json +1 -1
  16. package/lib/swatches/classic-opal.json +1 -1
  17. package/lib/swatches/classic-silver-dark.json +1 -1
  18. package/lib/swatches/classic-silver.json +1 -1
  19. package/lib/swatches/classic-uniform.json +1 -1
  20. package/package.json +5 -5
  21. package/scss/button/_variables.scss +1 -1
  22. package/scss/checkbox/_variables.scss +1 -1
  23. package/scss/chip/_variables.scss +2 -2
  24. package/scss/dataviz/_variables.scss +11 -11
  25. package/scss/dock-manager/_variables.scss +1 -1
  26. package/scss/gantt/_variables.scss +1 -1
  27. package/scss/grid/_variables.scss +5 -5
  28. package/scss/input/_variables.scss +5 -12
  29. package/scss/listview/_variables.scss +1 -1
  30. package/scss/map/_variables.scss +1 -1
  31. package/scss/mediaplayer/_variables.scss +1 -1
  32. package/scss/menu/_variables.scss +1 -1
  33. package/scss/pivotgrid/_variables.scss +1 -1
  34. package/scss/signature/_variables.scss +1 -1
  35. package/scss/skeleton/_variables.scss +1 -1
  36. package/scss/slider/_variables.scss +1 -1
  37. package/scss/spreadsheet/_variables.scss +4 -4
  38. package/scss/stepper/_variables.scss +3 -3
  39. package/scss/switch/_variables.scss +2 -2
  40. package/scss/table/_variables.scss +3 -3
  41. package/scss/timeline/_variables.scss +3 -3
package/dist/meta/variables.json CHANGED
@@ -3607,14 +3607,6 @@
3607
3607
  "type": "Null",
3608
3608
  "value": "null"
3609
3609
  },
3610
- "kendo-input-valid-border": {
3611
- "type": "Color",
3612
- "value": "#3ea44e"
3613
- },
3614
- "kendo-input-valid-shadow": {
3615
- "type": "Null",
3616
- "value": "null"
3617
- },
3618
3610
  "kendo-picker-bg": {
3619
3611
  "type": "Color",
3620
3612
  "value": "#f0f0f0"
package/lib/swatches/classic-green-dark.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Classic Green Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-classic",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#000000",
package/lib/swatches/classic-green.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Classic Green",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-classic",
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/lib/swatches/classic-lavender-dark.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Classic Lavender Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-classic",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#000000",
package/lib/swatches/classic-lavender.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Classic Lavender",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-classic",
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/lib/swatches/classic-main-dark.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Classic Main Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-classic",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#000000",
package/lib/swatches/classic-main.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Classic Main",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-classic",
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/lib/swatches/classic-metro-dark.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Classic Metro Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-classic",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#000000",
package/lib/swatches/classic-metro.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Classic Metro",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-classic",
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/lib/swatches/classic-moonlight.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Classic Moonlight",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-classic",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#1f2a35",
package/lib/swatches/classic-opal-dark.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Classic Opal Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-classic",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#000000",
package/lib/swatches/classic-opal.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Classic Opal",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-classic",
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/lib/swatches/classic-silver-dark.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Classic Silver Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-classic",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#000000",
package/lib/swatches/classic-silver.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Classic Silver",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-classic",
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/lib/swatches/classic-uniform.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Classic Uniform",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-classic",
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-classic",
3
3
  "description": "Sass port of less based themes for 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": [
@@ -53,13 +53,13 @@
53
53
  },
54
54
  "dependencies": {
55
55
  "@progress/kendo-svg-icons": "2.1.0",
56
- "@progress/kendo-theme-core": "7.2.1-dev.6",
57
- "@progress/kendo-theme-default": "7.2.1-dev.6",
58
- "@progress/kendo-theme-utils": "7.2.1-dev.6"
56
+ "@progress/kendo-theme-core": "7.2.1-dev.8",
57
+ "@progress/kendo-theme-default": "7.2.1-dev.8",
58
+ "@progress/kendo-theme-utils": "7.2.1-dev.8"
59
59
  },
60
60
  "directories": {
61
61
  "doc": "docs",
62
62
  "lib": "lib"
63
63
  },
64
- "gitHead": "683ce72fdb19a40f8f3adb06c95f732e8527023c"
64
+ "gitHead": "2a05ecc1e125b0899a93c9af54574731c8dd75d0"
65
65
  }
package/scss/button/_variables.scss CHANGED
@@ -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 4px 0 if($kendo-enable-color-system, rgba( k-color( border, true ), .75), rgba( $kendo-button-border, .75 )) !default;
189
+ $kendo-button-focus-shadow: 0 0 4px 0 if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 75%, transparent), rgba( $kendo-button-border, .75 )) !default;
190
190
 
191
191
  /// The base background of the disabled Button.
192
192
  /// @group button
package/scss/checkbox/_variables.scss CHANGED
@@ -107,7 +107,7 @@ $kendo-checkbox-focus-shadow: 0 0 0 2px rgba( black, .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
package/scss/chip/_variables.scss CHANGED
@@ -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 ), .16 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) )) !default;
118
+ $kendo-chip-solid-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 16%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) )) !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 ), .16 ), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) )) !default;
155
+ $kendo-chip-outline-shadow: 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 16%, transparent), if( $kendo-is-dark-theme, rgba( $kendo-color-white, .16 ), rgba( $kendo-color-black, .16 ) )) !default;
156
156
 
157
157
  /// The base background color of the hovered outline Chip.
158
158
  /// @group chip
package/scss/dataviz/_variables.scss CHANGED
@@ -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: .1 !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
package/scss/dock-manager/_variables.scss CHANGED
@@ -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;
package/scss/gantt/_variables.scss CHANGED
@@ -12,7 +12,7 @@ $kendo-gantt-treelist-bg: null !default;
12
12
  $kendo-gantt-treelist-text: null !default;
13
13
  $kendo-gantt-treelist-border: null !default;
14
14
 
15
- $kendo-gantt-nonwork-bg: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .03 ), rgba( k-contrast-color( $kendo-gantt-bg ), .025 )) !default;
15
+ $kendo-gantt-nonwork-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 3%, transparent), rgba( k-contrast-color( $kendo-gantt-bg ), .025 )) !default;
16
16
  $kendo-gantt-nonwork-text: null !default;
17
17
  $kendo-gantt-nonwork-border: null !default;
18
18
 
package/scss/grid/_variables.scss CHANGED
@@ -227,7 +227,7 @@ $kendo-grid-selection-aggregates-line-height: $kendo-grid-line-height !default;
227
227
  $kendo-grid-selection-aggregates-font-weight: $kendo-font-weight-bold !default;
228
228
 
229
229
  $kendo-grid-sorted-icon-spacing: calc( #{$kendo-padding-md-x} - 1px ) !default;
230
- $kendo-grid-sorted-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), rgba( k-contrast-color( $kendo-grid-bg ), .02 )) !default;
230
+ $kendo-grid-sorted-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .02 )) !default;
231
231
  $kendo-grid-sorting-indicator-text: $kendo-color-primary !default;
232
232
  $kendo-grid-sorting-index-font-size: $kendo-font-size-sm !default;
233
233
  $kendo-grid-sorting-index-height: $kendo-icon-size !default;
@@ -258,12 +258,12 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
258
258
  $kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default;
259
259
  $kendo-grid-sticky-footer-hover-bg: $kendo-grid-hover-bg !default;
260
260
 
261
- $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;
262
- $kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), k-try-shade( $kendo-grid-sticky-selected-bg, .5 )) !default;
261
+ $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;
262
+ $kendo-grid-sticky-selected-alt-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), k-try-shade( $kendo-grid-sticky-selected-bg, .5 )) !default;
263
263
 
264
264
  // Must be a solid color
265
265
  $kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), $kendo-grid-hover-bg) !default;
266
- $kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), k-try-shade( $kendo-grid-sticky-selected-bg, 1 )) !default;
266
+ $kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), k-try-shade( $kendo-grid-sticky-selected-bg, 1 )) !default;
267
267
 
268
268
  $kendo-grid-column-menu-width: 230px !default;
269
269
  $kendo-grid-column-menu-max-width: 320px !default;
@@ -314,7 +314,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
314
314
 
315
315
  /// Background color of the grid row resize indicator
316
316
  /// @group grid
317
- $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;
317
+ $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;
318
318
  /// Active background color of the grid row resize indicator
319
319
  /// @group grid
320
320
  $kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;
package/scss/input/_variables.scss CHANGED
@@ -168,7 +168,7 @@ $kendo-input-outline-bg: null !default;
168
168
  $kendo-input-outline-text: null !default;
169
169
  /// The border color of the outline Input components.
170
170
  /// @group input
171
- $kendo-input-outline-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-button-text, .5)) !default;
171
+ $kendo-input-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-button-text, .5)) !default;
172
172
 
173
173
  /// The background color of the outline hovered Input components.
174
174
  /// @group input
@@ -178,7 +178,7 @@ $kendo-input-outline-hover-bg: null !default;
178
178
  $kendo-input-outline-hover-text: null !default;
179
179
  /// The border color of the outline hovered Input components.
180
180
  /// @group input
181
- $kendo-input-outline-hover-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .8 ), rgba( $kendo-button-text, .8)) !default;
181
+ $kendo-input-outline-hover-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 80%, transparent), rgba( $kendo-button-text, .8)) !default;
182
182
 
183
183
  /// The background color of the outline focused Input components.
184
184
  /// @group input
@@ -290,13 +290,6 @@ $kendo-input-invalid-border: $kendo-invalid-border !default;
290
290
  /// @group input
291
291
  $kendo-input-invalid-shadow: $kendo-invalid-shadow !default;
292
292
 
293
- /// The border color of the valid Input components.
294
- /// @group input
295
- $kendo-input-valid-border: $kendo-valid-border !default;
296
- /// The shadow of the valid Input components.
297
- /// @group input
298
- $kendo-input-valid-shadow: $kendo-valid-shadow !default;
299
-
300
293
  /// The background color of the Picker components.
301
294
  /// @group picker
302
295
  $kendo-picker-bg: $kendo-button-bg !default;
@@ -369,7 +362,7 @@ $kendo-picker-outline-bg: null !default;
369
362
  $kendo-picker-outline-text: $kendo-button-text !default;
370
363
  /// The border color of the outline Picker components.
371
364
  /// @group picker
372
- $kendo-picker-outline-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-picker-outline-text, .5)) !default;
365
+ $kendo-picker-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-picker-outline-text, .5)) !default;
373
366
 
374
367
  /// The background color of the outline hovered Picker components.
375
368
  /// @group picker
@@ -416,13 +409,13 @@ $kendo-picker-flat-border: $kendo-button-border !default;
416
409
 
417
410
  /// The background color of the flat hovered Picker components.
418
411
  /// @group picker
419
- $kendo-picker-flat-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .04 ), rgba( $kendo-button-text, .04 )) !default;
412
+ $kendo-picker-flat-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( $kendo-button-text, .04 )) !default;
420
413
  /// The text color of the flat hovered Picker components.
421
414
  /// @group picker
422
415
  $kendo-picker-flat-hover-text: null !default;
423
416
  /// The border color of the flat hovered Picker components.
424
417
  /// @group picker
425
- $kendo-picker-flat-hover-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), rgba( $kendo-button-border, .16 )) !default;
418
+ $kendo-picker-flat-hover-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), rgba( $kendo-button-border, .16 )) !default;
426
419
 
427
420
  /// The background color of the flat focused Picker components.
428
421
  /// @group picker
package/scss/listview/_variables.scss CHANGED
@@ -41,7 +41,7 @@ $kendo-listview-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
41
41
  $kendo-listview-item-selected-text: null !default;
42
42
  /// The background color of the selected ListView items.
43
43
  /// @group listview
44
- $kendo-listview-item-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
44
+ $kendo-listview-item-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) !default;
45
45
  /// The border color of the selected ListView items.
46
46
  /// @group listview
47
47
  $kendo-listview-item-selected-border: null !default;
package/scss/map/_variables.scss CHANGED
@@ -25,6 +25,6 @@ $kendo-map-zoom-control-button-padding-y: $kendo-map-zoom-control-button-padding
25
25
  $kendo-map-attribution-padding-x: $kendo-padding-sm-x !default;
26
26
  $kendo-map-attribution-padding-y: $kendo-padding-sm-y !default;
27
27
  $kendo-map-attribution-font-size: ($kendo-map-font-size * .75) !default;
28
- $kendo-map-attribution-bg: if($kendo-enable-color-system, rgba( k-color( app-surface, true ), .8 ), rgba( $kendo-map-bg, .8 )) !default;
28
+ $kendo-map-attribution-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 80%, transparent), rgba( $kendo-map-bg, .8 )) !default;
29
29
 
30
30
  $kendo-map-marker-fill: $kendo-color-primary !default;
package/scss/mediaplayer/_variables.scss CHANGED
@@ -13,4 +13,4 @@ $kendo-media-player-titlebar-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
13
13
  $kendo-media-player-titlebar-bg: null !default;
14
14
  $kendo-media-player-titlebar-text: $kendo-media-player-bg !default;
15
15
  $kendo-media-player-titlebar-border: null !default;
16
- $kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( rgba( k-color( on-app-surface, true ), .7 ), rgba( k-color( on-app-surface, true ), 0 ) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default;
16
+ $kendo-media-player-titlebar-gradient: if($kendo-enable-color-system, ( color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), color-mix(in srgb, k-color( on-app-surface ) 0%, transparent) ), ( rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) )) !default;
package/scss/menu/_variables.scss CHANGED
@@ -32,7 +32,7 @@ $kendo-menu-item-expanded-text: $kendo-component-text !default;
32
32
  $kendo-menu-item-expanded-border: null !default;
33
33
  $kendo-menu-item-expanded-gradient: null !default;
34
34
 
35
- $kendo-menu-item-focus-shadow: inset 0 0 3px 1px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .25 ), rgba( $kendo-menu-text, .25 )) !default;
35
+ $kendo-menu-item-focus-shadow: inset 0 0 3px 1px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 25%, transparent), rgba( $kendo-menu-text, .25 )) !default;
36
36
 
37
37
  $kendo-menu-separator-spacing: k-map-get( $kendo-spacing, 1 ) !default;
38
38
 
package/scss/pivotgrid/_variables.scss CHANGED
@@ -36,7 +36,7 @@ $kendo-pivotgrid-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-h
36
36
  $kendo-pivotgrid-hover-text: null !default;
37
37
  $kendo-pivotgrid-hover-border: null !default;
38
38
 
39
- $kendo-pivotgrid-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
39
+ $kendo-pivotgrid-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) !default;
40
40
  $kendo-pivotgrid-selected-text: null !default;
41
41
  $kendo-pivotgrid-selected-border: null !default;
42
42
 
package/scss/signature/_variables.scss CHANGED
@@ -18,7 +18,7 @@ $kendo-signature-lg-padding-y: $kendo-signature-lg-padding-x !default;
18
18
 
19
19
  $kendo-signature-line-width: 1px !default;
20
20
  $kendo-signature-line-style: dashed !default;
21
- $kendo-signature-line-color: if($kendo-enable-color-system, rgba( k-color( info, true ), .24 ), rgba( $kendo-color-info, .24 )) !default;
21
+ $kendo-signature-line-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( info ) 24%, transparent), rgba( $kendo-color-info, .24 )) !default;
22
22
 
23
23
  $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-padding-x} ) !default;
24
24
  $kendo-signature-sm-line-size: calc( 100% - 2 * #{$kendo-signature-sm-padding-x} ) !default;
package/scss/skeleton/_variables.scss CHANGED
@@ -17,7 +17,7 @@ $kendo-skeleton-circle-border-radius: 9999px !default;
17
17
 
18
18
  /// The background color of the Skeleton item.
19
19
  /// @group skeleton
20
- $kendo-skeleton-item-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), rgba( $kendo-color-inverse, .2 )) !default;
20
+ $kendo-skeleton-item-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 20%, transparent), rgba( $kendo-color-inverse, .2 )) !default;
21
21
  /// The background color of the Skeleton wave animation.
22
22
  /// @group skeleton
23
23
  $kendo-skeleton-wave-bg: rgba( black, .04 ) !default;
package/scss/slider/_variables.scss CHANGED
@@ -93,7 +93,7 @@ $kendo-slider-draghandle-pressed-gradient: null !default;
93
93
 
94
94
  /// The shadow of the focused Slider drag handle.
95
95
  /// @group slider
96
- $kendo-slider-draghandle-focus-shadow: 0 0 4px 0 if($kendo-enable-color-system, rgba( k-color( primary, true ), .75 ), rgba( $kendo-slider-draghandle-border, .75 )) !default;
96
+ $kendo-slider-draghandle-focus-shadow: 0 0 4px 0 if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 75%, transparent), rgba( $kendo-slider-draghandle-border, .75 )) !default;
97
97
 
98
98
  /// The transition speed of the Slider.
99
99
  /// @group slider
package/scss/spreadsheet/_variables.scss CHANGED
@@ -94,7 +94,7 @@ $kendo-spreadsheet-view-font-size: $kendo-spreadsheet-font-size !default;
94
94
 
95
95
  /// The background color of the Spreadsheet selection.
96
96
  /// @group spreadsheet
97
- $kendo-spreadsheet-selection-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
97
+ $kendo-spreadsheet-selection-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) !default;
98
98
  /// The text color of the Spreadsheet selection.
99
99
  /// @group spreadsheet
100
100
  $kendo-spreadsheet-selection-text: null !default;
@@ -117,7 +117,7 @@ $kendo-spreadsheet-single-selection-border: $kendo-spreadsheet-bg !default;
117
117
 
118
118
  /// The background color of the Spreadsheet partial selection.
119
119
  /// @group spreadsheet
120
- $kendo-spreadsheet-partial-selection-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
120
+ $kendo-spreadsheet-partial-selection-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) !default;
121
121
 
122
122
  /// The background color of the Spreadsheet active cell.
123
123
  /// @group spreadsheet
@@ -128,7 +128,7 @@ $kendo-spreadsheet-active-cell-shadow: inset 0 0 0 1px $kendo-selected-bg !defau
128
128
 
129
129
  /// The background color of the Spreadsheet auto fill.
130
130
  /// @group spreadsheet
131
- $kendo-spreadsheet-auto-fill-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
131
+ $kendo-spreadsheet-auto-fill-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) !default;
132
132
  /// The text color of the Spreadsheet auto fill.
133
133
  /// @group spreadsheet
134
134
  $kendo-spreadsheet-auto-fill-text: null !default;
@@ -258,7 +258,7 @@ $kendo-spreadsheet-drawing-outline-width: 2px !default;
258
258
 
259
259
  /// The background color of the Spreadsheet drawing anchor.
260
260
  /// @group spreadsheet
261
- $kendo-spreadsheet-drawing-anchor-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
261
+ $kendo-spreadsheet-drawing-anchor-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) !default;
262
262
 
263
263
  /// The vertical spacing of the Spreadsheet DropZone.
264
264
  /// @group spreadsheet
package/scss/stepper/_variables.scss CHANGED
@@ -103,7 +103,7 @@ $kendo-stepper-indicator-hover-border: null !default;
103
103
  $kendo-stepper-indicator-disabled-bg: null !default;
104
104
  /// The text color of the disabled Stepper indicator.
105
105
  /// @group stepper
106
- $kendo-stepper-indicator-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text) !default;
106
+ $kendo-stepper-indicator-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), $kendo-disabled-text) !default;
107
107
  /// The border color of the disabled Stepper indicator.
108
108
  /// @group stepper
109
109
  $kendo-stepper-indicator-disabled-border: null !default;
@@ -130,7 +130,7 @@ $kendo-stepper-indicator-done-hover-border: null !default;
130
130
 
131
131
  /// The background color of the Stepper's disabled done indicator.
132
132
  /// @group stepper
133
- $kendo-stepper-indicator-done-disabled-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .6 ), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60% )) !default;
133
+ $kendo-stepper-indicator-done-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 60%, transparent), k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60% )) !default;
134
134
  /// The text color of the Stepper's disabled done indicator.
135
135
  /// @group stepper
136
136
  $kendo-stepper-indicator-done-disabled-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg )) !default;
@@ -182,7 +182,7 @@ $kendo-stepper-label-error-text: $kendo-color-error !default;
182
182
  $kendo-stepper-label-hover-text: null !default;
183
183
  /// The text color of the disabled Stepper label.
184
184
  /// @group stepper
185
- $kendo-stepper-label-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text) !default;
185
+ $kendo-stepper-label-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), $kendo-disabled-text) !default;
186
186
 
187
187
  /// The text color of the optional Stepper label.
188
188
  /// @group stepper
package/scss/switch/_variables.scss CHANGED
@@ -68,7 +68,7 @@ $kendo-switch-off-track-focus-border: null !default;
68
68
  $kendo-switch-off-track-focus-gradient: null !default;
69
69
  /// The ring around the track when the focused Switch is not checked.
70
70
  /// @group switch
71
- $kendo-switch-off-track-focus-ring: 0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 ) !default;
71
+ $kendo-switch-off-track-focus-ring: 0 0 3px 1px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 25%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 )) !default;
72
72
 
73
73
  /// The background of the track when the disabled Switch is not checked.
74
74
  /// @group switch
@@ -150,7 +150,7 @@ $kendo-switch-on-track-focus-border: null !default;
150
150
  $kendo-switch-on-track-focus-gradient: null !default;
151
151
  /// The ring around the track wen the focused Switch is checked.
152
152
  /// @group switch
153
- $kendo-switch-on-track-focus-ring: 0 0 3px 1px rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .25 ) !default;
153
+ $kendo-switch-on-track-focus-ring: 0 0 3px 1px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 25%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 )) !default;
154
154
 
155
155
  /// The background of the track when the disabled Switch is checked.
156
156
  /// @group switch
package/scss/table/_variables.scss CHANGED
@@ -111,7 +111,7 @@ $kendo-table-group-row-border: $kendo-table-header-border !default;
111
111
 
112
112
  /// Background color of alternating rows in table.
113
113
  /// @group table
114
- $kendo-table-alt-row-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), k-try-shade( $kendo-table-bg, .5 )) !default;
114
+ $kendo-table-alt-row-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), k-try-shade( $kendo-table-bg, .5 )) !default;
115
115
  /// Text color of alternating rows in table.
116
116
  /// @group table
117
117
  $kendo-table-alt-row-text: null !default;
@@ -122,7 +122,7 @@ $kendo-table-alt-row-border: null !default;
122
122
 
123
123
  /// Background color of hovered rows in table.
124
124
  /// @group table
125
- $kendo-table-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .11 ), k-try-shade( $kendo-table-bg, 1 )) !default;
125
+ $kendo-table-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 11%, transparent), k-try-shade( $kendo-table-bg, 1 )) !default;
126
126
  /// Text color of hovered rows in table.
127
127
  /// @group table
128
128
  $kendo-table-hover-text: null !default;
@@ -147,7 +147,7 @@ $kendo-table-focus-shadow: $kendo-list-item-focus-shadow !default;
147
147
 
148
148
  /// Background color of selected rows in table.
149
149
  /// @group table
150
- $kendo-table-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
150
+ $kendo-table-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-selected-bg, .25 )) !default;
151
151
  /// Text color of selected rows in table.
152
152
  /// @group table
153
153
  $kendo-table-selected-text: null !default;
package/scss/timeline/_variables.scss CHANGED
@@ -36,13 +36,13 @@ $kendo-timeline-track-arrow-height: 30px !default;
36
36
 
37
37
  /// The background color of the disabled Timeline track arrow.
38
38
  /// @group timeline
39
- $kendo-timeline-track-arrow-disabled-bg: if($kendo-enable-color-system, rgba( k-color( base, true ), .6 ), k-true-mix( $kendo-button-bg, $kendo-body-bg, 65% )) !default;
39
+ $kendo-timeline-track-arrow-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 60%, transparent), k-true-mix( $kendo-button-bg, $kendo-body-bg, 65% )) !default;
40
40
  /// The text color of the disabled Timeline track arrow.
41
41
  /// @group timeline
42
- $kendo-timeline-track-arrow-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-true-mix( $kendo-button-text, $kendo-body-bg, 65% )) !default;
42
+ $kendo-timeline-track-arrow-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-true-mix( $kendo-button-text, $kendo-body-bg, 65% )) !default;
43
43
  /// The border color of the disabled Timeline track arrow.
44
44
  /// @group timeline
45
- $kendo-timeline-track-arrow-disabled-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .15 ), k-true-mix( #000000, $kendo-body-bg, 4.8% )) !default;
45
+ $kendo-timeline-track-arrow-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 15%, transparent), k-true-mix( #000000, $kendo-body-bg, 4.8% )) !default;
46
46
 
47
47
  /// The size of the Timeline track.
48
48
  /// @group timeline