@progress/kendo-theme-fluent 7.2.1-dev.7 → 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 (42) hide show
  1. package/dist/meta/sassdoc-data.json +120 -120
  2. package/dist/meta/sassdoc-raw-data.json +60 -60
  3. package/lib/swatches/all.json +1 -1
  4. package/lib/swatches/fluent-main.json +1 -1
  5. package/package.json +4 -4
  6. package/scss/bottom-navigation/_variables.scss +5 -5
  7. package/scss/breadcrumb/_variables.scss +1 -1
  8. package/scss/button/_variables.scss +24 -24
  9. package/scss/chat/_variables.scss +1 -1
  10. package/scss/checkbox/_variables.scss +5 -5
  11. package/scss/chip/_variables.scss +7 -7
  12. package/scss/color-preview/_variables.scss +2 -2
  13. package/scss/coloreditor/_variables.scss +1 -1
  14. package/scss/colorgradient/_variables.scss +3 -3
  15. package/scss/colorpalette/_variables.scss +1 -1
  16. package/scss/core/color-system/_swatch-legacy.scss +4 -4
  17. package/scss/dataviz/_variables.scss +2 -2
  18. package/scss/dock-manager/_variables.scss +1 -1
  19. package/scss/drawer/_variables.scss +2 -2
  20. package/scss/editor/_variables.scss +1 -1
  21. package/scss/expansion-panel/_variables.scss +1 -1
  22. package/scss/gantt/_variables.scss +1 -1
  23. package/scss/grid/_theme.scss +1 -1
  24. package/scss/grid/_variables.scss +2 -2
  25. package/scss/imageeditor/_variables.scss +2 -2
  26. package/scss/input/_variables.scss +1 -1
  27. package/scss/list/_variables.scss +1 -1
  28. package/scss/mediaplayer/_variables.scss +1 -1
  29. package/scss/orgchart/_variables.scss +2 -2
  30. package/scss/progressbar/_variables.scss +2 -2
  31. package/scss/radio/_variables.scss +2 -2
  32. package/scss/signature/_variables.scss +2 -2
  33. package/scss/skeleton/_variables.scss +1 -1
  34. package/scss/slider/_variables.scss +7 -7
  35. package/scss/split-button/_variables.scss +1 -1
  36. package/scss/stepper/_variables.scss +1 -1
  37. package/scss/switch/_variables.scss +5 -5
  38. package/scss/table/_variables.scss +2 -2
  39. package/scss/taskboard/_variables.scss +1 -1
  40. package/scss/timeline/_variables.scss +2 -2
  41. package/scss/toolbar/_variables.scss +1 -1
  42. package/scss/upload/_variables.scss +1 -1
package/scss/orgchart/_variables.scss CHANGED
@@ -60,7 +60,7 @@ $kendo-orgchart-node-group-bg: if($kendo-enable-color-system, k-color( surface )
60
60
  $kendo-orgchart-node-group-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
61
61
  /// The border color of the OrgChart node group.
62
62
  /// @group orgchart
63
- $kendo-orgchart-node-group-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
63
+ $kendo-orgchart-node-group-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
64
64
  /// The border color of the focused OrgChart node group.
65
65
  /// @group orgchart
66
66
  $kendo-orgchart-node-group-focus-border: $kendo-card-focus-border !default;
@@ -146,7 +146,7 @@ $kendo-orgchart-card-body-vbox-min-height: $kendo-card-avatar-size !default;
146
146
  $kendo-orgchart-line-size: 1px !default;
147
147
  /// The fill color of the OrgChart connecting line.
148
148
  /// @group orgchart
149
- $kendo-orgchart-line-text: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
149
+ $kendo-orgchart-line-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
150
150
  /// The height of the OrgChart connecting line.
151
151
  /// @group orgchart
152
152
  $kendo-orgchart-line-v-height: 25px !default;
package/scss/progressbar/_variables.scss CHANGED
@@ -67,10 +67,10 @@ $kendo-progressbar-vertical-status-offset: calc( (#{$kendo-progressbar-font-size
67
67
 
68
68
  /// The background color of the disabled ProgressBar.
69
69
  /// @group progressbar
70
- $kendo-progressbar-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 )) !default;
70
+ $kendo-progressbar-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 )) !default;
71
71
  /// The text color of the disabled ProgressBar.
72
72
  /// @group progressbar
73
- $kendo-progressbar-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) !default;
73
+ $kendo-progressbar-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) !default;
74
74
  /// The border color of the disabled ProgressBar.
75
75
  /// @group progressbar
76
76
  $kendo-progressbar-disabled-border: $kendo-progressbar-disabled-bg !default;
package/scss/radio/_variables.scss CHANGED
@@ -94,10 +94,10 @@ $kendo-radio-focus-outline-offset: 2px !default;
94
94
  $kendo-radio-disabled-bg: $kendo-radio-bg !default;
95
95
  /// The color of the disabled RadioButton.
96
96
  /// @group radio
97
- $kendo-radio-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
97
+ $kendo-radio-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
98
98
  /// The border color of the disabled RadioButton.
99
99
  /// @group radio
100
- $kendo-radio-disabled-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
100
+ $kendo-radio-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
101
101
 
102
102
  /// The background color of the disabled and checked RadioButton.
103
103
  /// @group radio
package/scss/signature/_variables.scss CHANGED
@@ -38,10 +38,10 @@ $kendo-signature-line-width: 1px !default;
38
38
  $kendo-signature-line-style: dashed !default;
39
39
  /// The color of the row line of the signature component.
40
40
  /// @group signature
41
- $kendo-signature-line-color: rgba( if($kendo-enable-color-system, k-color( info, true ), k-get-theme-color( info, 100 )), .4 ) !default;
41
+ $kendo-signature-line-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( info ) 40%, transparent), rgba( k-get-theme-color( info, 100 ), .4 )) !default;
42
42
  /// The color of the row line of the disabled signature component.
43
43
  /// @group signature
44
- $kendo-signature-line-disabled-color: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
44
+ $kendo-signature-line-disabled-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
45
45
  /// The width of the row line of the signature component.
46
46
  /// @group signature
47
47
  $kendo-signature-line-size: calc( 100% - 2 * #{$kendo-signature-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 ), .23 ), k-get-theme-color-var( neutral-50 )) !default;
20
+ $kendo-skeleton-item-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 )) !default;
21
21
  /// The background color of the Skeleton wave animation.
22
22
  /// @group skeleton
23
23
  $kendo-skeleton-wave-bg: if($kendo-enable-color-system, k-color( base ), k-get-theme-color-var( neutral-20 )) !default;
package/scss/slider/_variables.scss CHANGED
@@ -33,19 +33,19 @@ $kendo-slider-track-size: map.get( $kendo-spacing, 1 ) !default;
33
33
  $kendo-slider-track-border-radius: map.get( $kendo-spacing, 0.5 ) !default;
34
34
  /// The background color of the Slider track.
35
35
  /// @group slider
36
- $kendo-slider-track-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
36
+ $kendo-slider-track-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
37
37
  /// The border color of the Slider track.
38
38
  /// @group slider
39
39
  $kendo-slider-track-border: inherit !default;
40
40
  /// The background color of the hovered Slider track.
41
41
  /// @group slider
42
- $kendo-slider-track-hover-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
42
+ $kendo-slider-track-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
43
43
  /// The border color of the hovered Slider track.
44
44
  /// @group slider
45
45
  $kendo-slider-track-hover-border: inherit !default;
46
46
  /// The background color of the focused Slider track.
47
47
  /// @group slider
48
- $kendo-slider-track-focus-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
48
+ $kendo-slider-track-focus-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
49
49
  /// The border color of the focused Slider track.
50
50
  /// @group slider
51
51
  $kendo-slider-track-focus-border: inherit !default;
@@ -124,16 +124,16 @@ $kendo-slider-thumb-focus-gradient: transparent !default;
124
124
 
125
125
  /// The text color of the disabled Slider.
126
126
  /// @group slider
127
- $kendo-slider-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .7 ), k-get-theme-color-var( neutral-130 )) !default;
127
+ $kendo-slider-disabled-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 70%, transparent), k-get-theme-color-var( neutral-130 )) !default;
128
128
  /// The background color of the disabled Slider track.
129
129
  /// @group slider
130
- $kendo-slider-track-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 )) !default;
130
+ $kendo-slider-track-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 )) !default;
131
131
  /// The background color of the disabled Slider's track selection.
132
132
  /// @group slider
133
- $kendo-slider-selection-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) !default;
133
+ $kendo-slider-selection-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) !default;
134
134
  /// The background color of the disabled Slider thumb.
135
135
  /// @group slider
136
- $kendo-slider-thumb-disabled-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
136
+ $kendo-slider-thumb-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
137
137
 
138
138
 
139
139
  /// The transition speed of the Slider.
package/scss/split-button/_variables.scss CHANGED
@@ -29,7 +29,7 @@ $kendo-split-button-arrow-delimiter-size: calc( #{$kendo-button-inner-calc-size}
29
29
  $kendo-split-button-arrow-delimiter-line-size: 1px !default;
30
30
  /// The background color of the SplitButton arrow delimiter.
31
31
  /// @group split-button
32
- $kendo-split-button-arrow-delimiter-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
32
+ $kendo-split-button-arrow-delimiter-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
33
33
 
34
34
  /// The sizes map for the SplitButton.
35
35
  /// @group split-button
package/scss/stepper/_variables.scss CHANGED
@@ -119,7 +119,7 @@ $kendo-stepper-indicator-done-hover-border: $kendo-stepper-indicator-done-hover-
119
119
 
120
120
  /// The background color of the Stepper's disabled done indicator.
121
121
  /// @group stepper
122
- $kendo-stepper-indicator-done-disabled-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .22 ), k-get-theme-color-var( primary-30 )) !default;
122
+ $kendo-stepper-indicator-done-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 22%, transparent), k-get-theme-color-var( primary-30 )) !default;
123
123
  /// The text color of the Stepper's disabled done indicator.
124
124
  /// @group stepper
125
125
  $kendo-stepper-indicator-done-disabled-text: var( --kendo-disabled-text, initial ) !default;
package/scss/switch/_variables.scss CHANGED
@@ -70,7 +70,7 @@ $kendo-switch-off-track-disabled-bg: var( --kendo-component-bg, transparent ) !d
70
70
  $kendo-switch-off-track-disabled-text: var( --kendo-component-text, inherit ) !default;
71
71
  /// The border color of the track when the disabled Switch is not checked.
72
72
  /// @group switch
73
- $kendo-switch-off-track-disabled-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
73
+ $kendo-switch-off-track-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
74
74
 
75
75
  /// The background of the thumb when the Switch is not checked.
76
76
  /// @group switch
@@ -94,13 +94,13 @@ $kendo-switch-off-thumb-hover-border: if($kendo-enable-color-system, k-color( bo
94
94
 
95
95
  /// The background of the thumb when the disabled Switch is not checked.
96
96
  /// @group switch
97
- $kendo-switch-off-thumb-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
97
+ $kendo-switch-off-thumb-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
98
98
  /// The text color of the thumb when the disabled Switch is not checked.
99
99
  /// @group switch
100
100
  $kendo-switch-off-thumb-disabled-text: inherit !default;
101
101
  /// The border color of the thumb when the disabled Switch is not checked.
102
102
  /// @group switch
103
- $kendo-switch-off-thumb-disabled-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
103
+ $kendo-switch-off-thumb-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
104
104
 
105
105
 
106
106
  /// The background of the track when the Switch is checked.
@@ -135,7 +135,7 @@ $kendo-switch-on-track-focus-border: $kendo-switch-on-track-focus-bg !default;
135
135
 
136
136
  /// The background of the track when the disabled Switch is checked.
137
137
  /// @group switch
138
- $kendo-switch-on-track-disabled-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
138
+ $kendo-switch-on-track-disabled-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
139
139
  /// The text color of the track when the disabled Switch is checked.
140
140
  /// @group switch
141
141
  $kendo-switch-on-track-disabled-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
@@ -171,4 +171,4 @@ $kendo-switch-on-thumb-disabled-bg: if($kendo-enable-color-system, k-color( surf
171
171
  $kendo-switch-on-thumb-disabled-text: inherit !default;
172
172
  /// The border color of the thumb when the disabled Switch is checked.
173
173
  /// @group switch
174
- $kendo-switch-on-thumb-disabled-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .06 ), k-get-theme-color-var( neutral-20 )) !default;
174
+ $kendo-switch-on-thumb-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), k-get-theme-color-var( neutral-20 )) !default;
package/scss/table/_variables.scss CHANGED
@@ -168,7 +168,7 @@ $kendo-table-focus-shadow: $kendo-list-item-focus-shadow !default;
168
168
 
169
169
  /// Background color of selected rows in table.
170
170
  /// @group table
171
- $kendo-table-selected-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .13 ), k-get-theme-color-var( primary-20 )) !default;
171
+ $kendo-table-selected-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 13%, transparent), k-get-theme-color-var( primary-20 )) !default;
172
172
  /// Text color of selected rows in table.
173
173
  /// @group table
174
174
  $kendo-table-selected-text: $kendo-table-text !default;
@@ -178,7 +178,7 @@ $kendo-table-selected-border: $kendo-table-border !default;
178
178
 
179
179
  /// Hover background color of selected rows in table.
180
180
  /// @group table
181
- $kendo-table-selected-hover-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .26 ), k-get-theme-color-var( primary-30 )) !default;
181
+ $kendo-table-selected-hover-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 26%, transparent), k-get-theme-color-var( primary-30 )) !default;
182
182
  /// Hover text color of selected rows in table.
183
183
  /// @group table
184
184
  $kendo-table-selected-hover-text: $kendo-table-selected-text !default;
package/scss/taskboard/_variables.scss CHANGED
@@ -202,7 +202,7 @@ $kendo-taskboard-drag-placeholder-border-width: 1px !default;
202
202
  $kendo-taskboard-drag-placeholder-border-radius: $kendo-card-border-radius !default;
203
203
  /// The background color of the TaskBoard Card placeholder.
204
204
  /// @group taskboard
205
- $kendo-taskboard-drag-placeholder-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .23 ), k-get-theme-color-var( neutral-50 )) !default;
205
+ $kendo-taskboard-drag-placeholder-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 23%, transparent), k-get-theme-color-var( neutral-50 )) !default;
206
206
  /// The border color of the TaskBoard Card placeholder.
207
207
  /// @group taskboard
208
208
  $kendo-taskboard-drag-placeholder-border: var( --kendo-component-border, inherit ) !default;
package/scss/timeline/_variables.scss CHANGED
@@ -65,7 +65,7 @@ $kendo-timeline-track-end-calc: calc( #{ $kendo-timeline-track-arrow-width } - 2
65
65
  $kendo-timeline-track-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
66
66
  /// The border color of the Timeline track.
67
67
  /// @group timeline
68
- $kendo-timeline-track-border-color: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
68
+ $kendo-timeline-track-border-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
69
69
 
70
70
  /// The block end inset of the Timeline arrow.
71
71
  /// @group timeline
@@ -138,7 +138,7 @@ $kendo-timeline-card-header-bg: var( --kendo-component-bg, initial ) !default;
138
138
  $kendo-timeline-card-header-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
139
139
  /// The border of the Timeline's Card body scroll.
140
140
  /// @group timeline
141
- $kendo-timeline-card-body-scroll-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
141
+ $kendo-timeline-card-body-scroll-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
142
142
  /// The background color of the Timeline's Card body scroll.
143
143
  /// @group timeline
144
144
  $kendo-timeline-card-body-scroll-bg: var( --kendo-component-bg, initial ) !default;
package/scss/toolbar/_variables.scss CHANGED
@@ -57,7 +57,7 @@ $kendo-toolbar-border: var( --kendo-component-border, initial ) !default;
57
57
 
58
58
  /// The color of the separator border of the Toolbar.
59
59
  /// @group toolbar
60
- $kendo-toolbar-separator-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
60
+ $kendo-toolbar-separator-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color-var( neutral-60 )) !default;
61
61
 
62
62
  /// The width of the input in the Toolbar.
63
63
  /// @group toolbar
package/scss/upload/_variables.scss CHANGED
@@ -41,7 +41,7 @@ $kendo-upload-dropzone-text: if($kendo-enable-color-system, k-color( subtle ), k
41
41
  $kendo-upload-dropzone-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-color-var( neutral-10 )) !default;
42
42
  /// The border color of the Upload dropzone.
43
43
  /// @group upload
44
- $kendo-upload-dropzone-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
44
+ $kendo-upload-dropzone-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
45
45
  /// The background color of the hovered Upload dropzone.
46
46
  /// @group upload
47
47
  $kendo-upload-dropzone-hover-bg: var( --kendo-hover-bg, inherit ) !default;