@progress/kendo-theme-classic 7.1.0-dev.8 → 7.1.0-dev.9

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 (63) hide show
  1. package/dist/all.css +50 -18
  2. package/dist/all.scss +1562 -632
  3. package/dist/meta/sassdoc-data.json +1792 -662
  4. package/dist/meta/sassdoc-raw-data.json +850 -327
  5. package/dist/meta/variables.json +398 -338
  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/_variables.scss +0 -197
  22. package/scss/adaptive/_variables.scss +1 -1
  23. package/scss/appbar/_variables.scss +2 -2
  24. package/scss/button/_variables.scss +7 -7
  25. package/scss/chat/_variables.scss +1 -1
  26. package/scss/checkbox/_variables.scss +2 -2
  27. package/scss/chip/_variables.scss +3 -3
  28. package/scss/core/_index.scss +6 -0
  29. package/scss/core/color-system/_palettes.scss +277 -0
  30. package/scss/core/color-system/_swatch-legacy.scss +62 -0
  31. package/scss/core/color-system/_swatch.scss +397 -0
  32. package/scss/dataviz/_variables.scss +42 -42
  33. package/scss/dock-manager/_variables.scss +1 -1
  34. package/scss/dropzone/_variables.scss +1 -1
  35. package/scss/editor/_variables.scss +1 -1
  36. package/scss/expansion-panel/_variables.scss +1 -2
  37. package/scss/filemanager/_variables.scss +2 -2
  38. package/scss/forms/_variables.scss +1 -1
  39. package/scss/gantt/_variables.scss +10 -10
  40. package/scss/grid/_variables.scss +11 -8
  41. package/scss/input/_variables.scss +6 -6
  42. package/scss/listview/_variables.scss +1 -1
  43. package/scss/map/_variables.scss +1 -1
  44. package/scss/mediaplayer/_variables.scss +1 -1
  45. package/scss/menu/_variables.scss +1 -1
  46. package/scss/notification/_variables.scss +1 -1
  47. package/scss/panelbar/_variables.scss +3 -4
  48. package/scss/pivotgrid/_variables.scss +5 -5
  49. package/scss/progressbar/_variables.scss +3 -3
  50. package/scss/scheduler/_variables.scss +3 -3
  51. package/scss/scrollview/_variables.scss +1 -1
  52. package/scss/signature/_variables.scss +1 -1
  53. package/scss/skeleton/_variables.scss +1 -1
  54. package/scss/slider/_variables.scss +8 -8
  55. package/scss/splitter/_variables.scss +1 -1
  56. package/scss/spreadsheet/_variables.scss +4 -4
  57. package/scss/stepper/_variables.scss +7 -7
  58. package/scss/switch/_variables.scss +7 -7
  59. package/scss/table/_variables.scss +3 -3
  60. package/scss/taskboard/_variables.scss +4 -3
  61. package/scss/timeline/_variables.scss +4 -4
  62. package/scss/tooltip/_variables.scss +4 -4
  63. package/scss/core/color-system/index.import.scss +0 -1
@@ -12,12 +12,12 @@ $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: rgba( k-contrast-color( $kendo-gantt-bg ), .025 ) !default;
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;
16
16
  $kendo-gantt-nonwork-text: null !default;
17
17
  $kendo-gantt-nonwork-border: null !default;
18
18
 
19
19
  $kendo-gantt-line-size: 2px !default;
20
- $kendo-gantt-line-fill: k-contrast-color( $kendo-gantt-bg ) !default;
20
+ $kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-gantt-bg )) !default;
21
21
  $kendo-gantt-line-selected-fill: $kendo-color-primary !default;
22
22
 
23
23
  $kendo-gantt-dot-size: 8px !default;
@@ -32,19 +32,19 @@ $kendo-gantt-milestone-border: $kendo-gantt-border !default;
32
32
  $kendo-gantt-milestone-selected-bg: $kendo-selected-bg !default;
33
33
  $kendo-gantt-milestone-selected-border: $kendo-selected-border !default;
34
34
 
35
- $kendo-gantt-summary-bg: k-try-tint( $kendo-gantt-text, 1 ) !default;
36
- $kendo-gantt-summary-progress-bg: k-try-shade( $kendo-gantt-text, 5 ) !default;
37
- $kendo-gantt-summary-selected-bg: k-try-tint( $kendo-selected-bg, 6 ) !default;
35
+ $kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 1 )) !default;
36
+ $kendo-gantt-summary-progress-bg: if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-gantt-text, 5 )) !default;
37
+ $kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default;
38
38
  $kendo-gantt-summary-progress-selected-bg: $kendo-selected-bg !default;
39
39
 
40
40
  $kendo-gantt-task-border-width: 0px !default;
41
41
  $kendo-gantt-task-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
42
42
  $kendo-gantt-task-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
43
- $kendo-gantt-task-bg: k-try-tint( $kendo-gantt-text, 2 ) !default;
44
- $kendo-gantt-task-text: k-contrast-color( $kendo-gantt-text ) !default;
43
+ $kendo-gantt-task-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 2 )) !default;
44
+ $kendo-gantt-task-text: if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-gantt-text )) !default;
45
45
  $kendo-gantt-task-border: null !default;
46
46
  $kendo-gantt-task-progress-bg: $kendo-gantt-text !default;
47
- $kendo-gantt-task-selected-bg: k-try-tint( $kendo-selected-bg, 6 ) !default;
47
+ $kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default;
48
48
  $kendo-gantt-task-selected-text: $kendo-selected-text !default;
49
49
  $kendo-gantt-task-selected-border: null !default;
50
50
  $kendo-gantt-task-progress-selected-bg: $kendo-selected-bg !default;
@@ -78,10 +78,10 @@ $kendo-gantt-planned-bg: $kendo-color-primary !default;
78
78
  $kendo-gantt-planned-border: $kendo-gantt-planned-bg !default;
79
79
 
80
80
  $kendo-gantt-delayed-bg: $kendo-color-error !default;
81
- $kendo-gantt-delayed-bg-lighter: k-color-tint($kendo-gantt-delayed-bg, 5) !default;
81
+ $kendo-gantt-delayed-bg-lighter: if($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint($kendo-gantt-delayed-bg, 5)) !default;
82
82
 
83
83
  $kendo-gantt-advanced-bg: $kendo-color-success !default;
84
- $kendo-gantt-advanced-bg-lighter: k-color-tint($kendo-gantt-advanced-bg, 5) !default;
84
+ $kendo-gantt-advanced-bg-lighter: if($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint($kendo-gantt-advanced-bg, 5)) !default;
85
85
 
86
86
  $kendo-gantt-action-on-offset-text: #000000 !default;
87
87
  $kendo-gantt-offset-resize-handler-top: 50% !default;
@@ -227,14 +227,14 @@ $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: rgba( k-contrast-color( $kendo-grid-bg ), .02 ) !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;
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;
234
234
  $kendo-grid-sorting-index-spacing-y: k-math-div( $kendo-icon-spacing, 2 ) !default;
235
235
  $kendo-grid-sorting-index-spacing-x: -$kendo-grid-sorting-index-spacing-y !default;
236
236
 
237
- $kendo-grid-grouping-row-bg: k-try-shade( $kendo-grid-bg, 1 ) !default;
237
+ $kendo-grid-grouping-row-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-grid-bg, 1 )) !default;
238
238
  $kendo-grid-grouping-row-text: $kendo-grid-text !default;
239
239
 
240
240
  $kendo-grid-focus-shadow: $kendo-table-focus-shadow !default;
@@ -243,11 +243,13 @@ $kendo-grid-command-cell-button-spacing: k-map-get( $kendo-spacing, 2 ) !default
243
243
  // be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38
244
244
  $kendo-grid-command-cell-padding-y: calc( #{$kendo-grid-cell-padding-y} - (#{$kendo-button-calc-size} - #{$kendo-line-height-em}) / 2 ) !default;
245
245
 
246
+ // Must be a solid color
246
247
  $kendo-grid-sticky-bg: $kendo-grid-bg !default;
247
248
  $kendo-grid-sticky-text: $kendo-grid-text !default;
248
249
  $kendo-grid-sticky-border: $kendo-grid-border !default;
249
250
 
250
- $kendo-grid-sticky-alt-bg: $kendo-grid-alt-bg !default;
251
+ // Must be a solid color
252
+ $kendo-grid-sticky-alt-bg: if($kendo-enable-color-system, k-color( base-subtle ), $kendo-grid-alt-bg) !default;
251
253
 
252
254
  $kendo-grid-sticky-header-bg: $kendo-grid-header-bg !default;
253
255
  $kendo-grid-sticky-header-text: $kendo-grid-header-text !default;
@@ -256,11 +258,12 @@ $kendo-grid-sticky-header-border: $kendo-grid-sticky-border !default;
256
258
  $kendo-grid-sticky-footer-bg: $kendo-grid-header-bg !default;
257
259
  $kendo-grid-sticky-footer-hover-bg: $kendo-grid-hover-bg !default;
258
260
 
259
- $kendo-grid-sticky-selected-bg: k-color-mix($kendo-selected-bg, #ffffff, 25%) !default;
260
- $kendo-grid-sticky-selected-alt-bg: k-try-shade( $kendo-grid-sticky-selected-bg, .5 ) !default;
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
263
 
262
- $kendo-grid-sticky-hover-bg: $kendo-grid-hover-bg !default;
263
- $kendo-grid-sticky-selected-hover-bg: k-try-shade( $kendo-grid-sticky-selected-bg, 1 ) !default;
264
+ // Must be a solid color
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;
264
267
 
265
268
  $kendo-grid-column-menu-width: 230px !default;
266
269
  $kendo-grid-column-menu-max-width: 320px !default;
@@ -311,7 +314,7 @@ $kendo-grid-group-footer-second-cell-border: 1px !default;
311
314
 
312
315
  /// Background color of the grid row resize indicator
313
316
  /// @group grid
314
- $kendo-grid-row-resizer-hover-bg: rgba( k-contrast-color( $kendo-grid-bg ), .12 ) !default;
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;
315
318
  /// Active background color of the grid row resize indicator
316
319
  /// @group grid
317
320
  $kendo-grid-row-resizer-active-bg: $kendo-color-primary !default;
@@ -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: rgba( $kendo-button-text, .5) !default;
171
+ $kendo-input-outline-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .5 ), 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: rgba( $kendo-button-text, .8) !default;
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;
182
182
 
183
183
  /// The background color of the outline focused Input components.
184
184
  /// @group input
@@ -369,14 +369,14 @@ $kendo-picker-outline-bg: null !default;
369
369
  $kendo-picker-outline-text: $kendo-button-text !default;
370
370
  /// The border color of the outline Picker components.
371
371
  /// @group picker
372
- $kendo-picker-outline-border: rgba( $kendo-picker-outline-text, .5) !default;
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;
373
373
 
374
374
  /// The background color of the outline hovered Picker components.
375
375
  /// @group picker
376
376
  $kendo-picker-outline-hover-bg: $kendo-picker-outline-text !default;
377
377
  /// The text color of the outline hovered Picker components.
378
378
  /// @group picker
379
- $kendo-picker-outline-hover-text: k-contrast-color( $kendo-picker-outline-hover-bg ) !default;
379
+ $kendo-picker-outline-hover-text: if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-picker-outline-hover-bg )) !default;
380
380
  /// The border color of the outline hovered Picker components.
381
381
  /// @group picker
382
382
  $kendo-picker-outline-hover-border: $kendo-picker-outline-hover-bg !default;
@@ -416,13 +416,13 @@ $kendo-picker-flat-border: $kendo-button-border !default;
416
416
 
417
417
  /// The background color of the flat hovered Picker components.
418
418
  /// @group picker
419
- $kendo-picker-flat-hover-bg: rgba( $kendo-button-text, .04 ) !default;
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;
420
420
  /// The text color of the flat hovered Picker components.
421
421
  /// @group picker
422
422
  $kendo-picker-flat-hover-text: null !default;
423
423
  /// The border color of the flat hovered Picker components.
424
424
  /// @group picker
425
- $kendo-picker-flat-hover-border: rgba( $kendo-button-border, .16 ) !default;
425
+ $kendo-picker-flat-hover-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), rgba( $kendo-button-border, .16 )) !default;
426
426
 
427
427
  /// The background color of the flat focused Picker components.
428
428
  /// @group picker
@@ -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: rgba( $kendo-selected-bg, .25 ) !default;
44
+ $kendo-listview-item-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), 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;
@@ -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: rgba( $kendo-map-bg, .8 ) !default;
28
+ $kendo-map-attribution-bg: if($kendo-enable-color-system, rgba( k-color( app-surface, true ), .8 ), 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: rgba( $kendo-media-player-text, .7 ), rgba( $kendo-media-player-text, 0 ) !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;
@@ -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 rgba( $kendo-menu-text, .25 ) !default;
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;
36
36
 
37
37
  $kendo-menu-separator-spacing: k-map-get( $kendo-spacing, 1 ) !default;
38
38
 
@@ -48,7 +48,7 @@ $kendo-notification-icon-spacing: $kendo-icon-spacing !default;
48
48
 
49
49
  @each $name, $color in $colors {
50
50
  $_theme: k-map-merge(( $name: (
51
- color: k-contrast-legacy( $color ),
51
+ color: if($kendo-enable-color-system, k-color( on-#{$name} ), k-contrast-legacy( $color )),
52
52
  background-color: $color,
53
53
  border: $color,
54
54
  )), $_theme );
@@ -47,7 +47,7 @@ $kendo-panelbar-header-selected-text: $kendo-selected-text !default;
47
47
  $kendo-panelbar-header-selected-border: $kendo-selected-border !default;
48
48
  $kendo-panelbar-header-selected-gradient: null !default;
49
49
 
50
- $kendo-panelbar-header-selected-hover-bg: k-try-shade( $kendo-panelbar-header-selected-bg ) !default;
50
+ $kendo-panelbar-header-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-header-selected-bg )) !default;
51
51
  $kendo-panelbar-header-selected-hover-text: null !default;
52
52
  $kendo-panelbar-header-selected-hover-border: null !default;
53
53
  $kendo-panelbar-header-selected-hover-gradient: null !default;
@@ -62,8 +62,7 @@ $kendo-panelbar-header-selected-hover-focus-text: null !default;
62
62
  $kendo-panelbar-header-selected-hover-focus-border: null !default;
63
63
  $kendo-panelbar-header-selected-hover-focus-gradient: null !default;
64
64
 
65
-
66
- $kendo-panelbar-item-hover-bg: k-try-shade( $kendo-panelbar-bg, .5 ) !default;
65
+ $kendo-panelbar-item-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-panelbar-bg, .5 )) !default;
67
66
  $kendo-panelbar-item-hover-text: null !default;
68
67
  $kendo-panelbar-item-hover-border: null !default;
69
68
  $kendo-panelbar-item-hover-gradient: null !default;
@@ -84,7 +83,7 @@ $kendo-panelbar-item-selected-text: $kendo-selected-text !default;
84
83
  $kendo-panelbar-item-selected-border: null !default;
85
84
  $kendo-panelbar-item-selected-gradient: null !default;
86
85
 
87
- $kendo-panelbar-item-selected-hover-bg: k-try-shade( $kendo-panelbar-item-selected-bg ) !default;
86
+ $kendo-panelbar-item-selected-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-panelbar-item-selected-bg )) !default;
88
87
  $kendo-panelbar-item-selected-hover-text: null !default;
89
88
  $kendo-panelbar-item-selected-hover-border: null !default;
90
89
  $kendo-panelbar-item-selected-hover-gradient: null !default;
@@ -22,21 +22,21 @@ $kendo-pivotgrid-bg: $kendo-component-bg !default;
22
22
  $kendo-pivotgrid-text: $kendo-component-text !default;
23
23
  $kendo-pivotgrid-border: $kendo-component-border !default;
24
24
 
25
- $kendo-pivotgrid-alt-border: k-try-shade( $kendo-pivotgrid-border, 2 ) !default;
25
+ $kendo-pivotgrid-alt-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-pivotgrid-border, 2 )) !default;
26
26
 
27
27
  $kendo-pivotgrid-headers-bg: $kendo-component-header-bg !default;
28
28
  $kendo-pivotgrid-headers-text: $kendo-component-header-text !default;
29
29
  $kendo-pivotgrid-headers-border: $kendo-component-header-border !default;
30
30
 
31
- $kendo-pivotgrid-total-bg: k-try-shade( $kendo-pivotgrid-bg, 1 ) !default;
31
+ $kendo-pivotgrid-total-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-pivotgrid-bg, 1 )) !default;
32
32
  $kendo-pivotgrid-total-text: $kendo-component-header-text !default;
33
33
  $kendo-pivotgrid-total-border: $kendo-component-header-border !default;
34
34
 
35
- $kendo-pivotgrid-hover-bg: k-color-darken( $kendo-pivotgrid-bg, 7% ) !default;
35
+ $kendo-pivotgrid-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-color-darken( $kendo-pivotgrid-bg, 7% )) !default;
36
36
  $kendo-pivotgrid-hover-text: null !default;
37
37
  $kendo-pivotgrid-hover-border: null !default;
38
38
 
39
- $kendo-pivotgrid-selected-bg: rgba( $kendo-selected-bg, .25 ) !default;
39
+ $kendo-pivotgrid-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
40
40
  $kendo-pivotgrid-selected-text: null !default;
41
41
  $kendo-pivotgrid-selected-border: null !default;
42
42
 
@@ -105,7 +105,7 @@ $kendo-pivotgrid-alt-text: $kendo-grid-header-text !default;
105
105
  $kendo-pivotgrid-chrome-border: $kendo-grid-border !default;
106
106
 
107
107
  $kendo-pivotgrid-container-bg: $kendo-component-bg !default;
108
- $kendo-pivotgrid-row-headers-bg: k-try-shade( $kendo-component-bg, 2 ) !default;
108
+ $kendo-pivotgrid-row-headers-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 2 )) !default;
109
109
 
110
110
  $kendo-pivotgrid-button-bg: null !default;
111
111
  $kendo-pivotgrid-button-text: null !default;
@@ -24,7 +24,7 @@ $kendo-progressbar-line-height: 1 !default;
24
24
 
25
25
  /// The background color of the ProgressBar.
26
26
  /// @group progressbar
27
- $kendo-progressbar-bg: k-try-shade( $kendo-component-bg, 1 ) !default;
27
+ $kendo-progressbar-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 1 )) !default;
28
28
  /// The text color of the ProgressBar.
29
29
  /// @group progressbar
30
30
  $kendo-progressbar-text: $kendo-component-text !default;
@@ -40,10 +40,10 @@ $kendo-progressbar-gradient: null !default;
40
40
  $kendo-progressbar-value-bg: $kendo-color-primary !default;
41
41
  /// The progress text color of the ProgressBar.
42
42
  /// @group progressbar
43
- $kendo-progressbar-value-text: k-contrast-legacy( $kendo-progressbar-value-bg ) !default;
43
+ $kendo-progressbar-value-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-progressbar-value-bg )) !default;
44
44
  /// The progress border color of the ProgressBar.
45
45
  /// @group progressbar
46
- $kendo-progressbar-value-border: k-try-shade( $kendo-progressbar-value-bg ) !default;
46
+ $kendo-progressbar-value-border: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-progressbar-value-bg )) !default;
47
47
  /// The progress background gradient of the ProgressBar.
48
48
  /// @group progressbar
49
49
  $kendo-progressbar-value-gradient: null !default;
@@ -22,7 +22,7 @@ $kendo-scheduler-event-min-height: 25px !default;
22
22
  $kendo-scheduler-event-border-radius: $kendo-border-radius-md !default;
23
23
  $kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} - (2 * #{$kendo-padding-md-y}) ) !default;
24
24
 
25
- $kendo-scheduler-event-bg: k-color-tint( $kendo-selected-bg, 2 ) !default;
25
+ $kendo-scheduler-event-bg: if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 )) !default;
26
26
  $kendo-scheduler-event-text: $kendo-selected-text !default;
27
27
  $kendo-scheduler-event-border: null !default;
28
28
  $kendo-scheduler-event-gradient: null !default;
@@ -48,13 +48,13 @@ $kendo-scheduler-cell-height: $kendo-line-height-em !default;
48
48
  $kendo-scheduler-datecolumn-width: 12em !default;
49
49
  $kendo-scheduler-timecolumn-width: 11em !default;
50
50
 
51
- $kendo-scheduler-nonwork-bg: k-try-shade( $kendo-scheduler-bg, .5 ) !default;
51
+ $kendo-scheduler-nonwork-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
52
52
  $kendo-scheduler-nonwork-text: null !default;
53
53
 
54
54
  $kendo-scheduler-weekend-bg: null !default;
55
55
  $kendo-scheduler-weekend-text: null !default;
56
56
 
57
- $kendo-scheduler-othermonth-bg: k-try-shade( $kendo-scheduler-bg, .5 ) !default;
57
+ $kendo-scheduler-othermonth-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
58
58
  $kendo-scheduler-othermonth-text: null !default;
59
59
 
60
60
  $kendo-scheduler-yearview-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
@@ -37,7 +37,7 @@ $kendo-scrollview-pagebutton-border: $kendo-button-border !default;
37
37
  $kendo-scrollview-pagebutton-primary-bg: $kendo-color-primary !default;
38
38
  /// The primary border color of the ScrollView page button.
39
39
  /// @group scrollview
40
- $kendo-scrollview-pagebutton-primary-border: k-try-shade( $kendo-color-primary, 2 ) !default;
40
+ $kendo-scrollview-pagebutton-primary-border: if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-color-primary, 2 )) !default;
41
41
  /// The box shadow of the ScrollView page button.
42
42
  /// @group scrollview
43
43
  $kendo-scrollview-pagebutton-shadow: 0 0 0 2px rgba( black, .13 ) !default;
@@ -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: rgba( $kendo-color-info, .24 ) !default;
21
+ $kendo-signature-line-color: if($kendo-enable-color-system, rgba( k-color( info, true ), .24 ), 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: rgba( $kendo-color-inverse, .2 ) !default;
20
+ $kendo-skeleton-item-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .2 ), 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;
@@ -23,27 +23,27 @@ $kendo-slider-draghandle-active-scale: 1 !default;
23
23
  $kendo-slider-draghandle-active-size: null !default;
24
24
 
25
25
  $kendo-slider-draghandle-bg: $kendo-color-primary !default;
26
- $kendo-slider-draghandle-text: k-contrast-legacy( $kendo-color-primary ) !default;
27
- $kendo-slider-draghandle-border: k-try-shade( $kendo-color-primary, 2 ) !default;
26
+ $kendo-slider-draghandle-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-color-primary )) !default;
27
+ $kendo-slider-draghandle-border: if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-color-primary, 2 )) !default;
28
28
  $kendo-slider-draghandle-gradient: null !default;
29
29
 
30
- $kendo-slider-draghandle-hover-bg: k-try-shade( $kendo-color-primary, 1 ) !default;
30
+ $kendo-slider-draghandle-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-color-primary, 1 )) !default;
31
31
  $kendo-slider-draghandle-hover-text: null !default;
32
- $kendo-slider-draghandle-hover-border: k-try-shade( $kendo-slider-draghandle-hover-bg, 2 ) !default;
32
+ $kendo-slider-draghandle-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-slider-draghandle-hover-bg, 2 )) !default;
33
33
  $kendo-slider-draghandle-hover-gradient: null !default;
34
34
 
35
- $kendo-slider-draghandle-pressed-bg: k-try-shade( $kendo-color-primary, 2 ) !default;
35
+ $kendo-slider-draghandle-pressed-bg: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-color-primary, 2 )) !default;
36
36
  $kendo-slider-draghandle-pressed-text: null !default;
37
- $kendo-slider-draghandle-pressed-border: k-try-shade( $kendo-slider-draghandle-pressed-bg, 2 ) !default;
37
+ $kendo-slider-draghandle-pressed-border: if($kendo-enable-color-system, k-color( primary-active ), k-try-shade( $kendo-slider-draghandle-pressed-bg, 2 )) !default;
38
38
  $kendo-slider-draghandle-pressed-gradient: null !default;
39
39
 
40
- $kendo-slider-draghandle-focus-shadow: 0 0 4px 0 rgba( $kendo-slider-draghandle-border, .75 ) !default;
40
+ $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;
41
41
 
42
42
  $kendo-slider-transition-speed: .3s !default;
43
43
  $kendo-slider-transition-function: ease-out !default;
44
44
  $kendo-slider-draghandle-transition-speed: .4s !default;
45
45
  $kendo-slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !default;
46
46
 
47
- $kendo-slider-track-bg: k-try-shade( $kendo-component-bg, 1 ) !default;
47
+ $kendo-slider-track-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-component-bg, 1 )) !default;
48
48
  $kendo-slider-selection-bg: $kendo-color-primary !default;
49
49
  $kendo-slider-disabled-opacity: null !default;
@@ -18,7 +18,7 @@ $kendo-splitter-collapse-icon-padding-y: k-map-get( $kendo-spacing, .5 ) !defaul
18
18
  $kendo-splitbar-bg: $kendo-base-bg !default;
19
19
  $kendo-splitbar-text: $kendo-base-text !default;
20
20
 
21
- $kendo-splitbar-hover-bg: k-try-shade( $kendo-splitbar-bg, .5 ) !default;
21
+ $kendo-splitbar-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-splitbar-bg, .5 )) !default;
22
22
  $kendo-splitbar-hover-text: $kendo-splitbar-text !default;
23
23
 
24
24
  $kendo-splitbar-selected-bg: $kendo-selected-bg !default;
@@ -37,7 +37,7 @@ $kendo-spreadsheet-formula-input-line-height: $kendo-input-line-height !default;
37
37
  $kendo-spreadsheet-view-font-family: Arial, Verdana, sans-serif !default;
38
38
  $kendo-spreadsheet-view-font-size: $kendo-spreadsheet-font-size !default;
39
39
 
40
- $kendo-spreadsheet-selection-bg: rgba( $kendo-selected-bg, .25 ) !default;
40
+ $kendo-spreadsheet-selection-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
41
41
  $kendo-spreadsheet-selection-text: null !default;
42
42
  $kendo-spreadsheet-selection-border: $kendo-selected-bg !default;
43
43
  $kendo-spreadsheet-selection-shadow: inset 0 0 0 1px $kendo-selected-bg !default;
@@ -46,12 +46,12 @@ $kendo-spreadsheet-single-selection-bg: $kendo-selected-bg !default;
46
46
  $kendo-spreadsheet-single-selection-text: null !default;
47
47
  $kendo-spreadsheet-single-selection-border: $kendo-spreadsheet-bg !default;
48
48
 
49
- $kendo-spreadsheet-partial-selection-bg: rgba( $kendo-selected-bg, .25 ) !default;
49
+ $kendo-spreadsheet-partial-selection-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
50
50
 
51
51
  $kendo-spreadsheet-active-cell-bg: $kendo-spreadsheet-bg !default;
52
52
  $kendo-spreadsheet-active-cell-shadow: inset 0 0 0 1px $kendo-selected-bg !default;
53
53
 
54
- $kendo-spreadsheet-auto-fill-bg: rgba( $kendo-selected-bg, .25 ) !default;
54
+ $kendo-spreadsheet-auto-fill-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
55
55
  $kendo-spreadsheet-auto-fill-text: null !default;
56
56
  $kendo-spreadsheet-auto-fill-border: $kendo-selected-bg !default;
57
57
  $kendo-spreadsheet-auto-fill-shadow: inset 0 0 0 1px $kendo-selected-bg !default;
@@ -101,6 +101,6 @@ $kendo-spreadsheet-drawing-handle-border-radius: $kendo-border-radius-lg !defaul
101
101
  $kendo-spreadsheet-drawing-outline-style: solid !default;
102
102
  $kendo-spreadsheet-drawing-outline-width: 2px !default;
103
103
 
104
- $kendo-spreadsheet-drawing-anchor-bg: rgba( $kendo-selected-bg, .25 ) !default;
104
+ $kendo-spreadsheet-drawing-anchor-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), rgba( $kendo-selected-bg, .25 )) !default;
105
105
 
106
106
  $kendo-spreadsheet-dropzone-spacing-y: k-map-get( $kendo-spacing, 4 ) !default;
@@ -33,24 +33,24 @@ $kendo-stepper-indicator-bg: $kendo-component-bg !default;
33
33
  $kendo-stepper-indicator-text: $kendo-component-text !default;
34
34
  $kendo-stepper-indicator-border: $kendo-component-border !default;
35
35
 
36
- $kendo-stepper-indicator-hover-bg: k-try-shade( $kendo-stepper-indicator-bg ) !default;
36
+ $kendo-stepper-indicator-hover-bg: if($kendo-enable-color-system, k-color( base-subtle-hover ), k-try-shade( $kendo-stepper-indicator-bg )) !default;
37
37
  $kendo-stepper-indicator-hover-text: null !default;
38
38
  $kendo-stepper-indicator-hover-border: null !default;
39
39
 
40
40
  $kendo-stepper-indicator-disabled-bg: null !default;
41
- $kendo-stepper-indicator-disabled-text: $kendo-disabled-text !default;
41
+ $kendo-stepper-indicator-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text) !default;
42
42
  $kendo-stepper-indicator-disabled-border: null !default;
43
43
 
44
44
  $kendo-stepper-indicator-done-bg: $kendo-color-primary !default;
45
- $kendo-stepper-indicator-done-text: k-contrast-legacy( $kendo-stepper-indicator-done-bg ) !default;
45
+ $kendo-stepper-indicator-done-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg )) !default;
46
46
  $kendo-stepper-indicator-done-border: $kendo-stepper-indicator-done-bg !default;
47
47
 
48
- $kendo-stepper-indicator-done-hover-bg: k-try-shade( $kendo-stepper-indicator-done-bg ) !default;
48
+ $kendo-stepper-indicator-done-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-stepper-indicator-done-bg )) !default;
49
49
  $kendo-stepper-indicator-done-hover-text: null !default;
50
50
  $kendo-stepper-indicator-done-hover-border: null !default;
51
51
 
52
- $kendo-stepper-indicator-done-disabled-bg: k-color-mix( $kendo-stepper-indicator-done-bg, $kendo-component-bg, 60% ) !default;
53
- $kendo-stepper-indicator-done-disabled-text: k-contrast-legacy( $kendo-stepper-indicator-done-bg ) !default;
52
+ $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;
53
+ $kendo-stepper-indicator-done-disabled-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-stepper-indicator-done-bg )) !default;
54
54
  $kendo-stepper-indicator-done-disabled-border: $kendo-stepper-indicator-done-disabled-bg !default;
55
55
 
56
56
  $kendo-stepper-indicator-current-bg: $kendo-stepper-indicator-done-bg !default;
@@ -69,7 +69,7 @@ $kendo-stepper-label-text: null !default;
69
69
  $kendo-stepper-label-success-text: $kendo-color-success !default;
70
70
  $kendo-stepper-label-error-text: $kendo-color-error !default;
71
71
  $kendo-stepper-label-hover-text: null !default;
72
- $kendo-stepper-label-disabled-text: $kendo-disabled-text !default;
72
+ $kendo-stepper-label-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), $kendo-disabled-text) !default;
73
73
 
74
74
  $kendo-stepper-optional-label-text: $kendo-subtle-text !default;
75
75
  $kendo-stepper-optional-label-opacity: null !default;
@@ -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-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 ) !default;
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;
72
72
 
73
73
  /// The background of the track when the disabled Switch is not checked.
74
74
  /// @group switch
@@ -85,7 +85,7 @@ $kendo-switch-off-track-disabled-gradient: null !default;
85
85
 
86
86
  /// The background of the thumb when the Switch is not checked.
87
87
  /// @group switch
88
- $kendo-switch-off-thumb-bg: k-try-shade( $kendo-switch-off-track-bg ) !default;
88
+ $kendo-switch-off-thumb-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-switch-off-track-bg )) !default;
89
89
  /// The text color of the thumb when the Switch is not checked.
90
90
  /// @group switch
91
91
  $kendo-switch-off-thumb-text: null !default;
@@ -98,7 +98,7 @@ $kendo-switch-off-thumb-gradient: $kendo-base-gradient !default;
98
98
 
99
99
  /// The background of the thumb when the hovered Switch is not checked.
100
100
  /// @group switch
101
- $kendo-switch-off-thumb-hover-bg: k-try-shade( $kendo-switch-off-thumb-bg ) !default;
101
+ $kendo-switch-off-thumb-hover-bg: if($kendo-enable-color-system, k-color( base-hover ), k-try-shade( $kendo-switch-off-thumb-bg )) !default;
102
102
  /// The text color of the thumb when the hovered Switch is not checked.
103
103
  /// @group switch
104
104
  $kendo-switch-off-thumb-hover-text: null !default;
@@ -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-is-dark-theme, $kendo-color-white, $kendo-color-black ), .25 ) !default;
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;
154
154
 
155
155
  /// The background of the track when the disabled Switch is checked.
156
156
  /// @group switch
@@ -173,20 +173,20 @@ $kendo-switch-on-thumb-bg: $kendo-color-primary !default;
173
173
  $kendo-switch-on-thumb-text: null !default;
174
174
  /// The border color of the thumb when the Switch is checked.
175
175
  /// @group switch
176
- $kendo-switch-on-thumb-border: k-try-shade( $kendo-switch-on-thumb-bg ) !default;
176
+ $kendo-switch-on-thumb-border: if($kendo-enable-color-system, k-color( primary ), k-try-shade( $kendo-switch-on-thumb-bg )) !default;
177
177
  /// The background gradient of the thumb when the Switch is checked.
178
178
  /// @group switch
179
179
  $kendo-switch-on-thumb-gradient: $kendo-base-gradient !default;
180
180
 
181
181
  /// The background of the thumb when the hovered Switch is checked.
182
182
  /// @group switch
183
- $kendo-switch-on-thumb-hover-bg: k-try-shade( $kendo-switch-on-thumb-bg ) !default;
183
+ $kendo-switch-on-thumb-hover-bg: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-bg )) !default;
184
184
  /// The text color of the thumb when the hovered Switch is checked.
185
185
  /// @group switch
186
186
  $kendo-switch-on-thumb-hover-text: null !default;
187
187
  /// The border color of the thumb when the hovered Switch is checked.
188
188
  /// @group switch
189
- $kendo-switch-on-thumb-hover-border: k-try-shade( $kendo-switch-on-thumb-hover-bg ) !default;
189
+ $kendo-switch-on-thumb-hover-border: if($kendo-enable-color-system, k-color( primary-hover ), k-try-shade( $kendo-switch-on-thumb-hover-bg )) !default;
190
190
  /// The background gradient of the thumb when the hovered Switch is checked.
191
191
  /// @group switch
192
192
  $kendo-switch-on-thumb-hover-gradient: null !default;
@@ -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: k-try-shade( $kendo-table-bg, .5 ) !default;
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;
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: k-try-shade( $kendo-table-bg, 1 ) !default;
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;
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: rgba( $kendo-selected-bg, .25 ) !default;
150
+ $kendo-table-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .25 ), 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;
@@ -33,7 +33,7 @@ $kendo-taskboard-column-border: transparent !default;
33
33
 
34
34
  $kendo-taskboard-column-focus-bg: null !default;
35
35
  $kendo-taskboard-column-focus-text: null !default;
36
- $kendo-taskboard-column-focus-border: k-try-shade( $kendo-base-border, 2.5 ) !default;
36
+ $kendo-taskboard-column-focus-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-base-border, 2.5 )) !default;
37
37
 
38
38
  $kendo-taskboard-column-header-padding-y: k-math-div( $kendo-taskboard-spacer, 2 ) !default;
39
39
  $kendo-taskboard-column-header-padding-x: $kendo-taskboard-column-header-padding-y !default;
@@ -76,10 +76,11 @@ $kendo-taskboard-card-shadow: $kendo-card-shadow !default;
76
76
 
77
77
  $kendo-taskboard-card-category-border-width: 4px !default;
78
78
 
79
- $kendo-taskboard-card-focus-border: k-try-shade( $kendo-taskboard-card-border, 18% ) !default;
79
+ $kendo-taskboard-card-hover-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 10% )) !default;
80
+
81
+ $kendo-taskboard-card-focus-border: if($kendo-enable-color-system, k-color( border-alt ), k-try-shade( $kendo-taskboard-card-border, 18% )) !default;
80
82
  $kendo-taskboard-card-focus-shadow: none !default;
81
83
 
82
- $kendo-taskboard-card-hover-border: k-try-shade( $kendo-taskboard-card-border, 10% ) !default;
83
84
 
84
85
  $kendo-taskboard-card-selected-border: k-color-tint( $kendo-color-primary-lighter, 5 ) !default;
85
86
  $kendo-taskboard-card-selected-shadow: none !default;
@@ -13,9 +13,9 @@ $kendo-timeline-mobile-spacing-y: 16px !default;
13
13
  $kendo-timeline-track-arrow-width: 30px !default;
14
14
  $kendo-timeline-track-arrow-height: 30px !default;
15
15
 
16
- $kendo-timeline-track-arrow-disabled-text: k-true-mix( $kendo-button-text, $kendo-body-bg, 65% ) !default;
17
- $kendo-timeline-track-arrow-disabled-bg: k-true-mix( $kendo-button-bg, $kendo-body-bg, 65% ) !default;
18
- $kendo-timeline-track-arrow-disabled-border: k-true-mix( #000000, $kendo-body-bg, 4.8% ) !default;
16
+ $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;
17
+ $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;
18
+ $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;
19
19
 
20
20
  $kendo-timeline-track-size: 6px !default;
21
21
  $kendo-timeline-track-wrap-padding-bottom: k-math-div( $kendo-timeline-track-size, 2 ) !default;
@@ -39,7 +39,7 @@ $kendo-timeline-flag-max-width: calc(#{$kendo-timeline-flag-min-width} + 2 * #{$
39
39
  $kendo-timeline-mobile-flag-max-width: calc(#{$kendo-timeline-flag-min-width} + 2 * #{$kendo-timeline-mobile-spacing-x}) !default;
40
40
  $kendo-timeline-horizontal-flag-min-width: 60px !default;
41
41
  $kendo-timeline-flag-bg: $kendo-color-primary !default;
42
- $kendo-timeline-flag-text: k-contrast-legacy( $kendo-timeline-flag-bg ) !default;
42
+ $kendo-timeline-flag-text: if($kendo-enable-color-system, k-color( on-primary ), k-contrast-legacy( $kendo-timeline-flag-bg )) !default;
43
43
 
44
44
  $kendo-timeline-flag-callout-width: 10px !default;
45
45
  $kendo-timeline-flag-callout-height: 10px !default;