@progress/kendo-theme-material 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 +74 -188
  3. package/dist/meta/sassdoc-data.json +416 -524
  4. package/dist/meta/sassdoc-raw-data.json +208 -258
  5. package/dist/meta/variables.json +0 -8
  6. package/lib/swatches/material-aqua-dark.json +1 -1
  7. package/lib/swatches/material-arctic.json +1 -1
  8. package/lib/swatches/material-burnt-teal.json +1 -1
  9. package/lib/swatches/material-dataviz-v4.json +1 -1
  10. package/lib/swatches/material-eggplant.json +1 -1
  11. package/lib/swatches/material-lime-dark.json +1 -1
  12. package/lib/swatches/material-lime.json +1 -1
  13. package/lib/swatches/material-main-dark.json +1 -1
  14. package/lib/swatches/material-main.json +1 -1
  15. package/lib/swatches/material-nova.json +1 -1
  16. package/lib/swatches/material-pacific-dark.json +1 -1
  17. package/lib/swatches/material-pacific.json +1 -1
  18. package/lib/swatches/material-sky-dark.json +1 -1
  19. package/lib/swatches/material-sky.json +1 -1
  20. package/lib/swatches/material-smoke.json +1 -1
  21. package/package.json +5 -5
  22. package/scss/checkbox/_variables.scss +1 -1
  23. package/scss/dataviz/_variables.scss +11 -11
  24. package/scss/dock-manager/_variables.scss +1 -1
  25. package/scss/fab/_theme.scss +2 -2
  26. package/scss/gantt/_variables.scss +1 -1
  27. package/scss/grid/_variables.scss +5 -5
  28. package/scss/input/_variables.scss +4 -11
  29. package/scss/map/_variables.scss +1 -1
  30. package/scss/mediaplayer/_variables.scss +1 -1
  31. package/scss/orgchart/_variables.scss +1 -1
  32. package/scss/pivotgrid/_variables.scss +2 -2
  33. package/scss/scheduler/_theme.scss +2 -2
  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 +2 -2
  41. package/scss/treeview/_variables.scss +1 -1
package/dist/meta/variables.json CHANGED
@@ -3731,14 +3731,6 @@
3731
3731
  "type": "Null",
3732
3732
  "value": "null"
3733
3733
  },
3734
- "kendo-input-valid-border": {
3735
- "type": "Color",
3736
- "value": "#37b400"
3737
- },
3738
- "kendo-input-valid-shadow": {
3739
- "type": "Null",
3740
- "value": "null"
3741
- },
3742
3734
  "kendo-picker-bg": {
3743
3735
  "type": "Color",
3744
3736
  "value": "whitesmoke"
package/lib/swatches/material-aqua-dark.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Material Aqua Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#121212",
package/lib/swatches/material-arctic.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Material Arctic",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
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/material-burnt-teal.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Material Burnt Teal",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
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/material-dataviz-v4.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Material Dataviz v4",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#3f51b5",
package/lib/swatches/material-eggplant.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Material Eggplant",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
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/material-lime-dark.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Material Lime Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#121212",
package/lib/swatches/material-lime.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Material Lime",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
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/material-main-dark.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Material Main Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#121212",
package/lib/swatches/material-main.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Material Main",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
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/material-nova.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Material Nova",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
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/material-pacific-dark.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Material Pacific Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#121212",
package/lib/swatches/material-pacific.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Material Pacific Light",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
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/material-sky-dark.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Material Sky Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "legacy",
8
8
  "previewColors": [
9
9
  "#121212",
package/lib/swatches/material-sky.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Material Sky",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
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/material-smoke.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Material Smoke",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-material",
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-material",
3
3
  "description": "Material theme for Kendo UI",
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": [
@@ -54,13 +54,13 @@
54
54
  },
55
55
  "dependencies": {
56
56
  "@progress/kendo-svg-icons": "2.1.0",
57
- "@progress/kendo-theme-core": "7.2.1-dev.6",
58
- "@progress/kendo-theme-default": "7.2.1-dev.6",
59
- "@progress/kendo-theme-utils": "7.2.1-dev.6"
57
+ "@progress/kendo-theme-core": "7.2.1-dev.8",
58
+ "@progress/kendo-theme-default": "7.2.1-dev.8",
59
+ "@progress/kendo-theme-utils": "7.2.1-dev.8"
60
60
  },
61
61
  "directories": {
62
62
  "doc": "docs",
63
63
  "lib": "lib"
64
64
  },
65
- "gitHead": "683ce72fdb19a40f8f3adb06c95f732e8527023c"
65
+ "gitHead": "2a05ecc1e125b0899a93c9af54574731c8dd75d0"
66
66
  }
package/scss/checkbox/_variables.scss CHANGED
@@ -64,7 +64,7 @@ $kendo-checkbox-bg: null !default;
64
64
  $kendo-checkbox-text: null !default;
65
65
  /// The border color of the CheckBox.
66
66
  /// @group checkbox
67
- $kendo-checkbox-border: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .54 ) !default;
67
+ $kendo-checkbox-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 54%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .54 )) !default;
68
68
 
69
69
  /// The background color of the hovered CheckBox.
70
70
  /// @group checkbox
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-component-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-subtle ), 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/fab/_theme.scss CHANGED
@@ -104,8 +104,8 @@
104
104
  .k-fab-item-text,
105
105
  .k-fab-item-icon {
106
106
  @include box-shadow($kendo-fab-item-disabled-shadow);
107
- background-color: if($kendo-enable-color-system, rgba( k-color( base, true ), .6 ), k-try-tint( $kendo-fab-item-bg, 8 ));
108
- color: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .6 ), k-try-tint( $kendo-fab-item-text, 8 ));
107
+ background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 60%, transparent), k-try-tint( $kendo-fab-item-bg, 8 ));
108
+ color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 60%, transparent), k-try-tint( $kendo-fab-item-text, 8 ));
109
109
  }
110
110
  }
111
111
 
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
@@ -223,7 +223,7 @@ $kendo-grid-grouping-row-bg: transparent !default;
223
223
  $kendo-grid-grouping-row-text: $kendo-grid-text !default;
224
224
 
225
225
  $kendo-grid-sorted-icon-spacing: 4px !default;
226
- $kendo-grid-sorted-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .05 ), rgba( k-contrast-color( $kendo-grid-bg ), .04 )) !default;
226
+ $kendo-grid-sorted-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 5%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .04 )) !default;
227
227
  $kendo-grid-sorting-indicator-text: $kendo-grid-header-text !default;
228
228
  $kendo-grid-sorting-index-font-size: $kendo-font-size-sm !default;
229
229
  $kendo-grid-sorting-index-height: $kendo-icon-size !default;
@@ -239,7 +239,7 @@ $kendo-grid-command-cell-padding-y: calc( #{$kendo-grid-cell-padding-y} - (#{$ke
239
239
  // Must be a solid color
240
240
  $kendo-grid-sticky-bg: $kendo-grid-bg !default;
241
241
  $kendo-grid-sticky-text: $kendo-grid-text !default;
242
- $kendo-grid-sticky-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( k-contrast-color( $kendo-grid-bg ), .5 )) !default;
242
+ $kendo-grid-sticky-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( k-contrast-color( $kendo-grid-bg ), .5 )) !default;
243
243
 
244
244
  // Must be a solid color
245
245
  $kendo-grid-sticky-alt-bg: $kendo-grid-sticky-bg !default;
@@ -251,12 +251,12 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
251
251
  $kendo-grid-sticky-footer-bg: $kendo-grid-sticky-header-bg !default;
252
252
  $kendo-grid-sticky-footer-hover-bg: $kendo-grid-sticky-footer-bg !default;
253
253
 
254
- $kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .12 ), k-try-shade($kendo-grid-bg, 4%)) !default;
254
+ $kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 12%, transparent), k-try-shade($kendo-grid-bg, 4%)) !default;
255
255
  $kendo-grid-sticky-selected-alt-bg: $kendo-grid-sticky-selected-bg !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-try-shade($kendo-grid-bg, 7%)) !default;
259
- $kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .12 ), k-try-shade($kendo-grid-sticky-selected-bg, .87)) !default;
259
+ $kendo-grid-sticky-selected-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 12%, transparent), k-try-shade($kendo-grid-sticky-selected-bg, .87)) !default;
260
260
 
261
261
  $kendo-grid-column-menu-width: 250px !default;
262
262
  $kendo-grid-column-menu-max-width: 320px !default;
@@ -309,7 +309,7 @@ $kendo-grid-group-footer-second-cell-border: 0px !default;
309
309
 
310
310
  /// Background color of the grid row resize indicator
311
311
  /// @group grid
312
- $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 ), .24 )) !default;
312
+ $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 ), .24 )) !default;
313
313
  /// Active background color of the grid row resize indicator
314
314
  /// @group grid
315
315
  $kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;
package/scss/input/_variables.scss CHANGED
@@ -105,7 +105,7 @@ $kendo-input-bg: if($kendo-enable-color-system, k-color( surface ), k-try-shade(
105
105
  $kendo-input-text: $kendo-component-text !default;
106
106
  /// The border color of the Input components.
107
107
  /// @group input
108
- $kendo-input-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .44 ), rgba( $kendo-component-border, .38 )) !default;
108
+ $kendo-input-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 44%, transparent), rgba( $kendo-component-border, .38 )) !default;
109
109
  /// The shadow of the Input components.
110
110
  /// @group input
111
111
  $kendo-input-shadow: null !default;
@@ -144,13 +144,13 @@ $kendo-input-selected-bg: null !default;
144
144
  $kendo-input-selected-text: null !default;
145
145
  /// The background color of the disabled Input components.
146
146
  /// @group input
147
- $kendo-input-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), k-try-shade( $kendo-component-bg, .25 )) !default;
147
+ $kendo-input-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), k-try-shade( $kendo-component-bg, .25 )) !default;
148
148
  /// The text color of the disabled Input components.
149
149
  /// @group input
150
- $kendo-input-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .27 ), $kendo-disabled-text) !default;
150
+ $kendo-input-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 27%, transparent), $kendo-disabled-text) !default;
151
151
  /// The border color of the disabled Input components.
152
152
  /// @group input
153
- $kendo-input-disabled-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .03 ), rgba( $kendo-component-border, k-math-div( k-color-alpha( $kendo-component-border ), 2 ) )) !default;
153
+ $kendo-input-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( $kendo-component-border, k-math-div( k-color-alpha( $kendo-component-border ), 2 ) )) !default;
154
154
  /// The gradient of the disabled Input components.
155
155
  /// @group input
156
156
  $kendo-input-disabled-gradient: null !default;
@@ -286,13 +286,6 @@ $kendo-input-invalid-border: $kendo-invalid-border !default;
286
286
  /// @group input
287
287
  $kendo-input-invalid-shadow: $kendo-invalid-shadow !default;
288
288
 
289
- /// The border color of the valid Input components.
290
- /// @group input
291
- $kendo-input-valid-border: $kendo-valid-border !default;
292
- /// The shadow of the valid Input components.
293
- /// @group input
294
- $kendo-input-valid-shadow: $kendo-valid-shadow !default;
295
-
296
289
  /// The background color of the Picker components.
297
290
  /// @group picker
298
291
  $kendo-picker-bg: $kendo-input-bg !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/orgchart/_variables.scss CHANGED
@@ -65,7 +65,7 @@ $kendo-orgchart-node-group-border: $kendo-base-border !default;
65
65
  $kendo-orgchart-node-group-focus-border: $kendo-card-focus-border !default;
66
66
  /// The shadow of the focused OrgChart node group.
67
67
  /// @group orgchart
68
- $kendo-orgchart-node-group-focus-shadow: 0 2px 4px -1px rgba( if($kendo-enable-color-system, k-color( on-light, true ), $elevation), .2 ), 0 4px 5px 0 rgba( if($kendo-enable-color-system, k-color( on-light, true ), $elevation), .14 ), 0 1px 10px 0 rgba( if($kendo-enable-color-system, k-color( on-light, true ), $elevation), .12 ) !default;
68
+ $kendo-orgchart-node-group-focus-shadow: 0 2px 4px -1px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 20%, transparent), rgba( $elevation, .2 )), 0 4px 5px 0 if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 14%, transparent), rgba( $elevation, .14 )), 0 1px 10px 0 if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 12%, transparent), rgba( $elevation, .12 )) !default;
69
69
 
70
70
  /// The font size of the OrgChart node group title.
71
71
  /// @group orgchart
package/scss/pivotgrid/_variables.scss CHANGED
@@ -25,7 +25,7 @@ $kendo-pivotgrid-border: $kendo-component-border !default;
25
25
 
26
26
  $kendo-pivotgrid-alt-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-pivotgrid-border, 2 )) !default;
27
27
 
28
- $kendo-pivotgrid-headers-bg: if($kendo-enable-color-system, rgba( k-color( app-surface, true ), .02 ), rgba( $kendo-component-header-bg, .02 )) !default;
28
+ $kendo-pivotgrid-headers-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 2%, transparent), rgba( $kendo-component-header-bg, .02 )) !default;
29
29
  $kendo-pivotgrid-headers-text: $kendo-component-header-text !default;
30
30
  $kendo-pivotgrid-headers-border: $kendo-component-header-border !default;
31
31
 
@@ -37,7 +37,7 @@ $kendo-pivotgrid-hover-bg: if($kendo-enable-color-system, k-color( base-hover ),
37
37
  $kendo-pivotgrid-hover-text: null !default;
38
38
  $kendo-pivotgrid-hover-border: null !default;
39
39
 
40
- $kendo-pivotgrid-selected-bg: if($kendo-enable-color-system, rgba( k-color( base-active, true ), .25 ), rgba( k-contrast-color( $kendo-pivotgrid-bg ), .04 )) !default;
40
+ $kendo-pivotgrid-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( base-active ) 25%, transparent), rgba( k-contrast-color( $kendo-pivotgrid-bg ), .04 )) !default;
41
41
  $kendo-pivotgrid-selected-text: null !default;
42
42
  $kendo-pivotgrid-selected-border: null !default;
43
43
 
package/scss/scheduler/_theme.scss CHANGED
@@ -7,13 +7,13 @@
7
7
 
8
8
  .k-scheduler-layout td.k-selected,
9
9
  .k-scheduler-layout .k-scheduler-cell.k-selected {
10
- background-color: if($kendo-enable-color-system, rgba( k-color( secondary, true ), .25 ), rgba($kendo-selected-bg, .25));
10
+ background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( secondary ) 25%, transparent), rgba($kendo-selected-bg, .25));
11
11
  }
12
12
 
13
13
  // Agenda view
14
14
  .k-scheduler-agendaview {
15
15
  .k-scheduler-content tr.k-selected {
16
- background-color: if($kendo-enable-color-system, rgba( k-color( secondary, true ), .25 ), rgba($kendo-selected-bg, .25));
16
+ background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( secondary ) 25%, transparent), rgba($kendo-selected-bg, .25));
17
17
  }
18
18
  }
19
19
 
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 0 11px if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !default;
96
+ $kendo-slider-draghandle-focus-shadow: 0 0 0 11px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 )) !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-color-primary, .25 )) !default;
97
+ $kendo-spreadsheet-selection-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 )) !default;
98
98
  /// The text color of the Spreadsheet selection.
99
99
  /// @group spreadsheet
100
100
  $kendo-spreadsheet-selection-text: null !default;
@@ -128,7 +128,7 @@ $kendo-spreadsheet-active-cell-shadow: inset 0 0 0 1px $kendo-color-primary !def
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-color-primary, .25 )) !default;
131
+ $kendo-spreadsheet-auto-fill-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .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;
@@ -140,7 +140,7 @@ $kendo-spreadsheet-auto-fill-border: $kendo-color-primary !default;
140
140
  $kendo-spreadsheet-auto-fill-shadow: inset 0 0 0 1px $kendo-color-primary !default;
141
141
  /// The background color of the Spreadsheet auto fill punch.
142
142
  /// @group spreadsheet
143
- $kendo-spreadsheet-auto-fill-punch-bg: if($kendo-enable-color-system, rgba( k-color( app-surface, true ), .5 ), rgba( $kendo-component-bg, .5 )) !default;
143
+ $kendo-spreadsheet-auto-fill-punch-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 50%, transparent), rgba( $kendo-component-bg, .5 )) !default;
144
144
 
145
145
  /// The vertical padding of the Spreadsheet cell.
146
146
  /// @group spreadsheet
@@ -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( secondary, 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( secondary ) 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 ), .32 ), $kendo-disabled-text) !default;
106
+ $kendo-stepper-indicator-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 32%, 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-color( $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 ), .32 ), k-map-get( $theme, disabled-text )) !default;
185
+ $kendo-stepper-label-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 32%, transparent), k-map-get( $theme, 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
@@ -30,7 +30,7 @@ $kendo-switch-sizes: (
30
30
 
31
31
  /// The background of the track when the Switch is not checked.
32
32
  /// @group switch
33
- $kendo-switch-off-track-bg: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black )), .38 ) !default;
33
+ $kendo-switch-off-track-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 38%, transparent), rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .38 )) !default;
34
34
  /// The text color of the track when the Switch is not checked.
35
35
  /// @group switch
36
36
  $kendo-switch-off-track-text: null !default;
@@ -112,7 +112,7 @@ $kendo-switch-off-thumb-hover-gradient: null !default;
112
112
 
113
113
  /// The background of the track when the Switch is checked.
114
114
  /// @group switch
115
- $kendo-switch-on-track-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .54 ), rgba( $kendo-color-primary, .54 )) !default;
115
+ $kendo-switch-on-track-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 54%, transparent), rgba( $kendo-color-primary, .54 )) !default;
116
116
  /// The text color of the track when the Switch is checked.
117
117
  /// @group switch
118
118
  $kendo-switch-on-track-text: null !default;
package/scss/table/_variables.scss CHANGED
@@ -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 ), .08 ), rgba( k-contrast-color( $kendo-table-bg ), .07 )) !default;
125
+ $kendo-table-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( k-contrast-color( $kendo-table-bg ), .07 )) !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 ), .12 ), rgba( k-contrast-color( $kendo-table-bg ), .04 )) !default;
150
+ $kendo-table-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 12%, transparent), rgba( k-contrast-color( $kendo-table-bg ), .04 )) !default;
151
151
  /// Text color of selected rows in table.
152
152
  /// @group table
153
153
  $kendo-table-selected-text: null !default;
package/scss/treeview/_variables.scss CHANGED
@@ -124,7 +124,7 @@ $kendo-treeview-border: null !default;
124
124
 
125
125
  /// The background color of hovered TreeView.
126
126
  /// @group treeview
127
- $kendo-treeview-item-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .07 ), rgba( $kendo-treeview-text, .07 )) !default;
127
+ $kendo-treeview-item-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 7%, transparent), rgba( $kendo-treeview-text, .07 )) !default;
128
128
  /// The text color of hovered TreeView items.
129
129
  /// @group treeview
130
130
  $kendo-treeview-item-hover-text: null !default;