@progress/kendo-theme-bootstrap 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 -96
  2. package/dist/all.scss +95 -209
  3. package/dist/meta/sassdoc-data.json +438 -546
  4. package/dist/meta/sassdoc-raw-data.json +219 -269
  5. package/dist/meta/variables.json +0 -8
  6. package/lib/swatches/bootstrap-3-dark.json +1 -1
  7. package/lib/swatches/bootstrap-3.json +1 -1
  8. package/lib/swatches/bootstrap-4-dark.json +1 -1
  9. package/lib/swatches/bootstrap-4.json +1 -1
  10. package/lib/swatches/bootstrap-dataviz-v4.json +1 -1
  11. package/lib/swatches/bootstrap-main-dark.json +1 -1
  12. package/lib/swatches/bootstrap-main.json +1 -1
  13. package/lib/swatches/bootstrap-nordic.json +1 -1
  14. package/lib/swatches/bootstrap-turquoise-dark.json +1 -1
  15. package/lib/swatches/bootstrap-turquoise.json +1 -1
  16. package/lib/swatches/bootstrap-urban.json +1 -1
  17. package/lib/swatches/bootstrap-vintage.json +1 -1
  18. package/package.json +5 -5
  19. package/scss/breadcrumb/_variables.scss +1 -1
  20. package/scss/button/_variables.scss +1 -1
  21. package/scss/calendar/_variables.scss +1 -1
  22. package/scss/checkbox/_variables.scss +1 -1
  23. package/scss/core/color-system/_swatch-legacy.scss +1 -1
  24. package/scss/dataviz/_variables.scss +11 -11
  25. package/scss/dock-manager/_variables.scss +1 -1
  26. package/scss/fab/_theme.scss +6 -6
  27. package/scss/filter/_variables.scss +1 -1
  28. package/scss/gantt/_variables.scss +1 -1
  29. package/scss/grid/_variables.scss +6 -6
  30. package/scss/input/_variables.scss +3 -10
  31. package/scss/list/_variables.scss +1 -1
  32. package/scss/listview/_variables.scss +2 -2
  33. package/scss/map/_variables.scss +1 -1
  34. package/scss/mediaplayer/_variables.scss +1 -1
  35. package/scss/menu/_variables.scss +6 -6
  36. package/scss/pager/_variables.scss +1 -1
  37. package/scss/pivotgrid/_variables.scss +1 -1
  38. package/scss/signature/_variables.scss +1 -1
  39. package/scss/skeleton/_variables.scss +1 -1
  40. package/scss/slider/_variables.scss +1 -1
  41. package/scss/spreadsheet/_variables.scss +4 -4
  42. package/scss/stepper/_variables.scss +3 -3
  43. package/scss/switch/_variables.scss +2 -2
  44. package/scss/table/_variables.scss +3 -3
  45. package/scss/taskboard/_variables.scss +1 -1
  46. package/scss/timeline/_variables.scss +3 -3
  47. package/scss/toolbar/_variables.scss +1 -1
  48. package/scss/treeview/_variables.scss +1 -1
@@ -7131,14 +7131,6 @@
7131
7131
  "type": "List",
7132
7132
  "value": "0 0 0 0.25rem rgba(220, 53, 69, 0.25)"
7133
7133
  },
7134
- "kendo-input-valid-border": {
7135
- "type": "Color",
7136
- "value": "#198754"
7137
- },
7138
- "kendo-input-valid-shadow": {
7139
- "type": "List",
7140
- "value": "0 0 0 0.25rem rgba(25, 135, 84, 0.25)"
7141
- },
7142
7134
  "kendo-picker-bg": {
7143
7135
  "type": "Color",
7144
7136
  "value": "#e4e7eb"
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap 3 Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "previewColors": [
8
8
  "#000000",
9
9
  "#222222",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap 3",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
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": "Bootstrap 4 Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "previewColors": [
8
8
  "#000000",
9
9
  "#212529",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap 4",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f8f9fa",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Dataviz v4",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "previewColors": [
8
8
  "#0275d8",
9
9
  "#5bc0de",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Main Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "previewColors": [
8
8
  "#000000",
9
9
  "#212529",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Main",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f8f9fa",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Nordic",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f8f9fa",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Turquoise Dark",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "previewColors": [
8
8
  "#000000",
9
9
  "#292b2c",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Turquoise",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f2f2f2",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Urban",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#e3eef4",
@@ -3,7 +3,7 @@
3
3
  "name": "Bootstrap Vintage",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-bootstrap",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "previewColors": [
8
8
  "#ffffff",
9
9
  "#f2efe8",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-theme-bootstrap",
3
3
  "description": "Bootstrap 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": [
@@ -53,14 +53,14 @@
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
  "bootstrap": "5.2.1"
60
60
  },
61
61
  "directories": {
62
62
  "doc": "docs",
63
63
  "lib": "lib"
64
64
  },
65
- "gitHead": "683ce72fdb19a40f8f3adb06c95f732e8527023c"
65
+ "gitHead": "2a05ecc1e125b0899a93c9af54574731c8dd75d0"
66
66
  }
@@ -156,7 +156,7 @@ $kendo-breadcrumb-link-focus-text: null !default;
156
156
  $kendo-breadcrumb-link-focus-border: null !default;
157
157
  /// The box shadow of the focused Breadcrumb link.
158
158
  /// @group breadcrumb
159
- $kendo-breadcrumb-link-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .25 ), rgba( $kendo-breadcrumb-text, .25 )) !default;
159
+ $kendo-breadcrumb-link-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 25%, transparent), rgba( $kendo-breadcrumb-text, .25 )) !default;
160
160
 
161
161
  /// The background color of the Breadcrumb root link.
162
162
  /// @group breadcrumb
@@ -186,7 +186,7 @@ $kendo-button-focus-border: if($kendo-enable-color-system, k-color( base-active
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 .25rem if($kendo-enable-color-system, rgba( k-color( border, true ), .5), rgba( $kendo-button-border, .5 )) !default;
189
+ $kendo-button-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 50%, transparent), rgba( $kendo-button-border, .5 )) !default;
190
190
 
191
191
  /// The base background of the disabled Button.
192
192
  /// @group button
@@ -85,7 +85,7 @@ $kendo-calendar-cell-selected-hover-border: $kendo-selected-hover-border !defaul
85
85
  $kendo-calendar-cell-selected-hover-gradient: null !default;
86
86
 
87
87
  $kendo-calendar-cell-focus-shadow: inset $kendo-button-focus-shadow !default;
88
- $kendo-calendar-cell-selected-focus-shadow: inset 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( primary-active, true ), .5 ), rgba( k-color-darken( $kendo-color-primary, 12.5% ), .5 )) !default;
88
+ $kendo-calendar-cell-selected-focus-shadow: inset 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary-active ) 50%, transparent), rgba( k-color-darken( $kendo-color-primary, 12.5% ), .5 )) !default;
89
89
 
90
90
 
91
91
  // Calendar navigation
@@ -101,7 +101,7 @@ $kendo-checkbox-indeterminate-border: $kendo-checkbox-checked-border !default;
101
101
  $kendo-checkbox-focus-border: if($kendo-enable-color-system, k-color( primary-emphasis ), k-try-tint( $kendo-color-primary, 50% )) !default;
102
102
  /// The box shadow of the focused CheckBox.
103
103
  /// @group checkbox
104
- $kendo-checkbox-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !default;
104
+ $kendo-checkbox-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 )) !default;
105
105
  /// The border color of the focused and checked CheckBox.
106
106
  /// @group checkbox
107
107
  $kendo-checkbox-focus-checked-border: $kendo-checkbox-checked-border !default;
@@ -49,7 +49,7 @@
49
49
  $kendo-invalid-bg: null;
50
50
  $kendo-invalid-text: $kendo-color-error;
51
51
  $kendo-invalid-border: $kendo-color-error;
52
- $kendo-invalid-shadow: 0 0 0 .25rem rgba( k-color( error, true ), .25 );
52
+ $kendo-invalid-shadow: 0 0 0 .25rem color-mix(in srgb, k-color( error ) 25%, transparent);
53
53
 
54
54
  $kendo-theme-colors: (
55
55
  "primary": $kendo-color-primary,
@@ -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: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $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-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-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;
@@ -29,7 +29,7 @@
29
29
  @each $name, $color in $kendo-fab-theme-colors {
30
30
  .k-fab-solid-#{$name}:focus,
31
31
  .k-fab-solid-#{$name}.k-focus {
32
- outline: $kendo-fab-outline-width $kendo-fab-outline-style if($kendo-enable-color-system, rgba( k-color( $name, true ), .5 ), rgba( $color, .5 ));
32
+ outline: $kendo-fab-outline-width $kendo-fab-outline-style if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 50%, transparent), rgba( $color, .5 ));
33
33
  }
34
34
  }
35
35
 
@@ -50,8 +50,8 @@
50
50
  .k-fab-solid-#{$name}:disabled,
51
51
  .k-fab-solid-#{$name}.k-disabled {
52
52
  @include box-shadow( $kendo-fab-disabled-shadow );
53
- background-color: if($kendo-enable-color-system, rgba( k-color( $name, true ), .65 ), k-try-tint( $color, 4.5 ));
54
- color: if($kendo-enable-color-system, rgba( k-color( on-#{$name}, true ), .65 ), k-try-tint( k-contrast-color( $color ), 5 ));
53
+ background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( $name ) 65%, transparent), k-try-tint( $color, 4.5 ));
54
+ color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-#{$name} ) 65%, transparent), k-try-tint( k-contrast-color( $color ), 5 ));
55
55
  opacity: 1;
56
56
  }
57
57
  }
@@ -92,7 +92,7 @@
92
92
  .k-fab-item.k-focus .k-fab-item-text,
93
93
  .k-fab-item:focus .k-fab-item-icon,
94
94
  .k-fab-item.k-focus .k-fab-item-icon {
95
- outline: $kendo-fab-item-outline-width $kendo-fab-item-outline-style if($kendo-enable-color-system, rgba( k-color( base, true ), .5 ), rgba( $kendo-fab-item-icon-border, .5 ));
95
+ outline: $kendo-fab-item-outline-width $kendo-fab-item-outline-style if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 50%, transparent), rgba( $kendo-fab-item-icon-border, .5 ));
96
96
  }
97
97
 
98
98
  // Active state
@@ -114,8 +114,8 @@
114
114
  .k-fab-item-text,
115
115
  .k-fab-item-icon {
116
116
  @include box-shadow( $kendo-fab-item-disabled-shadow );
117
- background-color: if($kendo-enable-color-system, rgba( k-color( base, true ), .65 ), k-try-tint( $kendo-fab-item-bg, 8 ));
118
- color: if($kendo-enable-color-system, rgba( k-color( on-base, true ), .65 ), k-try-tint( $kendo-fab-item-text, 8 ));
117
+ background-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( base ) 65%, transparent), k-try-tint( $kendo-fab-item-bg, 8 ));
118
+ color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 65%, transparent), k-try-tint( $kendo-fab-item-text, 8 ));
119
119
  }
120
120
  }
121
121
 
@@ -27,4 +27,4 @@ $kendo-filter-preview-operator-text: $kendo-subtle-text !default;
27
27
 
28
28
  /// The box shadow of the focused Filter toolbar.
29
29
  /// @group filter
30
- $kendo-filter-toolbar-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-color-primary, .25 )) !default;
30
+ $kendo-filter-toolbar-focus-shadow: 0 0 0 .25rem if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-color-primary, .25 )) !default;
@@ -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
 
@@ -222,7 +222,7 @@ $kendo-grid-selection-aggregates-font-weight: $kendo-font-weight-bold !default;
222
222
  $kendo-grid-grouping-row-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-grid-bg )) !default;
223
223
  $kendo-grid-grouping-row-text: $kendo-grid-text !default;
224
224
 
225
- $kendo-grid-sorted-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .02 ), rgba( k-contrast-color( $kendo-grid-bg ), .02 )) !default;
225
+ $kendo-grid-sorted-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 2%, transparent), rgba( k-contrast-color( $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-icon-size * .75) !default;
228
228
  $kendo-grid-sorting-index-height: $kendo-icon-size !default;
@@ -240,7 +240,7 @@ $kendo-grid-command-cell-padding-y: calc( #{$kendo-grid-cell-padding-y} - (#{$ke
240
240
  // Must be a solid color
241
241
  $kendo-grid-sticky-bg: $kendo-grid-bg !default;
242
242
  $kendo-grid-sticky-text: $kendo-grid-text !default;
243
- $kendo-grid-sticky-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba($kendo-grid-text, .5)) !default;
243
+ $kendo-grid-sticky-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba($kendo-grid-text, .5)) !default;
244
244
 
245
245
  // Must be a solid color
246
246
  $kendo-grid-sticky-alt-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-grid-bg, .5 )) !default;
@@ -252,12 +252,12 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
252
252
  $kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default;
253
253
  $kendo-grid-sticky-footer-hover-bg: $kendo-grid-sticky-footer-bg !default;
254
254
 
255
- $kendo-grid-sticky-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), k-color-mix( $kendo-selected-bg, $kendo-grid-bg, 25% )) !default;
256
- $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;
255
+ $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, $kendo-grid-bg, 25% )) !default;
256
+ $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;
257
257
 
258
258
  // Must be a solid color
259
259
  $kendo-grid-sticky-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-grid-bg )) !default;
260
- $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;
260
+ $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;
261
261
 
262
262
  $kendo-grid-column-menu-width: 250px !default;
263
263
  $kendo-grid-column-menu-max-width: 320px !default;
@@ -308,7 +308,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
308
308
 
309
309
  /// Background color of the grid row resize indicator
310
310
  /// @group grid
311
- $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;
311
+ $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;
312
312
  /// Active background color of the grid row resize indicator
313
313
  /// @group grid
314
314
  $kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;
@@ -167,7 +167,7 @@ $kendo-input-outline-bg: null !default;
167
167
  $kendo-input-outline-text: $kendo-base-text !default;
168
168
  /// The border color of the outline Input components.
169
169
  /// @group input
170
- $kendo-input-outline-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-base-text, .5 )) !default;
170
+ $kendo-input-outline-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-base-text, .5 )) !default;
171
171
 
172
172
  /// The background color of the outline hovered Input components.
173
173
  /// @group input
@@ -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-button-bg !default;
@@ -365,7 +358,7 @@ $kendo-picker-outline-bg: null !default;
365
358
  $kendo-picker-outline-text: $kendo-button-text !default;
366
359
  /// The border color of the outline Picker components.
367
360
  /// @group picker
368
- $kendo-picker-outline-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-picker-outline-text, .5 )) !default;
361
+ $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;
369
362
 
370
363
  /// The background color of the outline hovered Picker components.
371
364
  /// @group picker
@@ -412,7 +405,7 @@ $kendo-picker-flat-border: $kendo-button-border !default;
412
405
 
413
406
  /// The background color of the flat hovered Picker components.
414
407
  /// @group picker
415
- $kendo-picker-flat-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .08 ), rgba( $kendo-button-text, .08 )) !default;
408
+ $kendo-picker-flat-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 8%, transparent), rgba( $kendo-button-text, .08 )) !default;
416
409
  /// The text color of the flat hovered Picker components.
417
410
  /// @group picker
418
411
  $kendo-picker-flat-hover-text: null !default;
@@ -220,7 +220,7 @@ $kendo-list-item-focus-bg: null !default;
220
220
  $kendo-list-item-focus-text: null !default;
221
221
  /// The box shadow of the focused List items.
222
222
  /// @group list
223
- $kendo-list-item-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-list-text, .15 )) !default;
223
+ $kendo-list-item-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( $kendo-list-text, .15 )) !default;
224
224
 
225
225
  /// The background color of the selected List items.
226
226
  /// @group list
@@ -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;
@@ -57,4 +57,4 @@ $kendo-listview-item-focus-bg: null !default;
57
57
  $kendo-listview-item-focus-border: null !default;
58
58
  /// The box shadow of the focused ListView items.
59
59
  /// @group listview
60
- $kendo-listview-item-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-listview-text, .15 )) !default;
60
+ $kendo-listview-item-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( $kendo-listview-text, .15 )) !default;
@@ -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;
@@ -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;
@@ -15,31 +15,31 @@ $kendo-menu-item-spacing: 0 !default;
15
15
  $kendo-menu-item-icon-spacing: $kendo-icon-spacing !default;
16
16
 
17
17
  $kendo-menu-item-bg: null !default;
18
- $kendo-menu-item-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-menu-text, .5 )) !default;
18
+ $kendo-menu-item-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-menu-text, .5 )) !default;
19
19
  $kendo-menu-item-border: null !default;
20
20
  $kendo-menu-item-gradient: null !default;
21
21
 
22
22
  $kendo-menu-item-hover-bg: null !default;
23
- $kendo-menu-item-hover-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .7 ), rgba( $kendo-menu-text, .7 )) !default;
23
+ $kendo-menu-item-hover-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), rgba( $kendo-menu-text, .7 )) !default;
24
24
  $kendo-menu-item-hover-border: null !default;
25
25
  $kendo-menu-item-hover-gradient: null !default;
26
26
 
27
27
  $kendo-menu-item-expanded-bg: null !default;
28
- $kendo-menu-item-expanded-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .9 ), rgba( $kendo-menu-text, .9 )) !default;
28
+ $kendo-menu-item-expanded-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 90%, transparent), rgba( $kendo-menu-text, .9 )) !default;
29
29
  $kendo-menu-item-expanded-border: null !default;
30
30
  $kendo-menu-item-expanded-gradient: null !default;
31
31
 
32
- $kendo-menu-item-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .15 ), rgba( $kendo-menu-text, .15 )) !default;
32
+ $kendo-menu-item-focus-shadow: inset 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 15%, transparent), rgba( $kendo-menu-text, .15 )) !default;
33
33
 
34
34
  $kendo-menu-separator-spacing: k-map-get( $kendo-spacing, 1 ) !default;
35
35
 
36
36
  $kendo-menu-scroll-button-bg: $kendo-menu-bg !default;
37
- $kendo-menu-scroll-button-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), rgba( $kendo-menu-text, .5 )) !default;
37
+ $kendo-menu-scroll-button-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 50%, transparent), rgba( $kendo-menu-text, .5 )) !default;
38
38
  $kendo-menu-scroll-button-border: $kendo-menu-border !default;
39
39
  $kendo-menu-scroll-button-gradient: null !default;
40
40
 
41
41
  $kendo-menu-scroll-button-hover-bg: null !default;
42
- $kendo-menu-scroll-button-hover-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .7 ), rgba( $kendo-menu-text, .7 )) !default;
42
+ $kendo-menu-scroll-button-hover-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), rgba( $kendo-menu-text, .7 )) !default;
43
43
  $kendo-menu-scroll-button-hover-border: null !default;
44
44
  $kendo-menu-scroll-button-hover-gradient: null !default;
45
45
 
@@ -123,7 +123,7 @@ $kendo-pager-item-focus-opacity: null !default;
123
123
  $kendo-pager-item-focus-bg: $kendo-pager-item-bg !default;
124
124
  /// The box shadow of the focused Pager items.
125
125
  /// @group pager
126
- $kendo-pager-item-focus-shadow: 0 0 0 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba($kendo-color-primary, .25)) !default;
126
+ $kendo-pager-item-focus-shadow: 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba($kendo-color-primary, .25)) !default;
127
127
 
128
128
  /// The border radius of the Pager numbers.
129
129
  /// @group pager
@@ -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
 
@@ -18,7 +18,7 @@ $kendo-signature-lg-padding-y: k-map-get( $kendo-spacing, 2 ) !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;
@@ -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;
@@ -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 3px if($kendo-enable-color-system, rgba( k-color( primary, true ), .5 ), rgba( $kendo-color-primary, .5 )) !default;
96
+ $kendo-slider-draghandle-focus-shadow: 0 0 0 3px if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 50%, transparent), rgba( $kendo-color-primary, .5 )) !default;
97
97
 
98
98
  /// The transition speed of the Slider.
99
99
  /// @group slider
@@ -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