@progress/kendo-theme-fluent 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 (45) hide show
  1. package/dist/all.css +1 -37
  2. package/dist/meta/sassdoc-data.json +158 -258
  3. package/dist/meta/sassdoc-raw-data.json +79 -129
  4. package/lib/swatches/all.json +1 -1
  5. package/lib/swatches/fluent-main.json +1 -1
  6. package/package.json +4 -4
  7. package/scss/bottom-navigation/_variables.scss +5 -5
  8. package/scss/breadcrumb/_variables.scss +1 -1
  9. package/scss/button/_variables.scss +24 -24
  10. package/scss/chat/_variables.scss +1 -1
  11. package/scss/checkbox/_variables.scss +5 -5
  12. package/scss/chip/_variables.scss +7 -7
  13. package/scss/color-preview/_variables.scss +2 -2
  14. package/scss/coloreditor/_variables.scss +1 -1
  15. package/scss/colorgradient/_variables.scss +3 -3
  16. package/scss/colorpalette/_variables.scss +1 -1
  17. package/scss/core/color-system/_swatch-legacy.scss +4 -4
  18. package/scss/dataviz/_variables.scss +2 -2
  19. package/scss/dock-manager/_variables.scss +1 -1
  20. package/scss/drawer/_variables.scss +2 -2
  21. package/scss/editor/_variables.scss +1 -1
  22. package/scss/expansion-panel/_variables.scss +1 -1
  23. package/scss/gantt/_variables.scss +1 -1
  24. package/scss/grid/_theme.scss +1 -1
  25. package/scss/grid/_variables.scss +2 -2
  26. package/scss/imageeditor/_variables.scss +2 -2
  27. package/scss/input/_layout.scss +0 -6
  28. package/scss/input/_theme.scss +0 -48
  29. package/scss/input/_variables.scss +1 -8
  30. package/scss/list/_variables.scss +1 -1
  31. package/scss/mediaplayer/_variables.scss +1 -1
  32. package/scss/orgchart/_variables.scss +2 -2
  33. package/scss/progressbar/_variables.scss +2 -2
  34. package/scss/radio/_variables.scss +2 -2
  35. package/scss/signature/_variables.scss +2 -2
  36. package/scss/skeleton/_variables.scss +1 -1
  37. package/scss/slider/_variables.scss +7 -7
  38. package/scss/split-button/_variables.scss +1 -1
  39. package/scss/stepper/_variables.scss +1 -1
  40. package/scss/switch/_variables.scss +5 -5
  41. package/scss/table/_variables.scss +2 -2
  42. package/scss/taskboard/_variables.scss +1 -1
  43. package/scss/timeline/_variables.scss +2 -2
  44. package/scss/toolbar/_variables.scss +1 -1
  45. package/scss/upload/_variables.scss +1 -1
package/lib/swatches/all.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "All",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-fluent",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#ffffff",
package/lib/swatches/fluent-main.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "name": "Fluent Main",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-fluent",
6
- "version": "7.2.1-dev.6",
6
+ "version": "7.2.1-dev.8",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#ffffff",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-theme-fluent",
3
3
  "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
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,12 +53,12 @@
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-utils": "7.2.1-dev.6"
56
+ "@progress/kendo-theme-core": "7.2.1-dev.8",
57
+ "@progress/kendo-theme-utils": "7.2.1-dev.8"
58
58
  },
59
59
  "directories": {
60
60
  "doc": "docs",
61
61
  "lib": "lib"
62
62
  },
63
- "gitHead": "683ce72fdb19a40f8f3adb06c95f732e8527023c"
63
+ "gitHead": "2a05ecc1e125b0899a93c9af54574731c8dd75d0"
64
64
  }
package/scss/bottom-navigation/_variables.scss CHANGED
@@ -82,10 +82,10 @@ $_tc-bottom-nav-matrix: (
82
82
  disabled: if($kendo-enable-color-system, (inherit, on-color-disabled, transparent), ( inherit, 40, var( --kendo-disabled-border, inherit )))
83
83
  ),
84
84
  flat: (
85
- normal: if($kendo-enable-color-system, (app-surface, on-app-surface, rgba( k-color( border, true ), 0.16 )), ($kendo-color-white, k-get-theme-color-var( neutral-130 ), k-get-theme-color-var( neutral-30 ))),
85
+ normal: if($kendo-enable-color-system, (app-surface, on-app-surface, color-mix(in srgb, k-color( border ) 16%, transparent)), ($kendo-color-white, k-get-theme-color-var( neutral-130 ), k-get-theme-color-var( neutral-30 ))),
86
86
  focus: if($kendo-enable-color-system, (inherit, color, transparent, color), (inherit, 100, transparent, 100)),
87
87
  active: if($kendo-enable-color-system, (inherit, color, transparent), (inherit, 100, transparent)),
88
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
88
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
89
89
  )
90
90
  ) !default;
91
91
 
@@ -100,7 +100,7 @@ $_tc-bottom-nav-warning-matrix: (
100
100
  normal: if($kendo-enable-color-system, (app-surface, on-app-surface, color), ($kendo-color-white, k-get-theme-color-var( neutral-130 ), 100)),
101
101
  focus: if($kendo-enable-color-system, (inherit, color, transparent, color), (inherit, 100, transparent, 100)),
102
102
  active: if($kendo-enable-color-system, (inherit, color, transparent), (inherit, 100, transparent)),
103
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
103
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
104
104
  )
105
105
  ) !default;
106
106
 
@@ -115,7 +115,7 @@ $_tc-bottom-nav-dark-matrix: (
115
115
  normal: if($kendo-enable-color-system, (app-surface, on-app-surface, color), ($kendo-color-white, k-get-theme-color-var( neutral-130 ), k-get-theme-color-var( neutral-140 ))),
116
116
  focus: if($kendo-enable-color-system, (inherit, color, transparent, color), (inherit, 160, transparent, 130)),
117
117
  active: if($kendo-enable-color-system, (inherit, color, transparent), (inherit, 170, transparent)),
118
- disabled: if($kendo-enable-color-system, (inherit, rgba( k-color( on-app-surface, true ), .46 ), initial), (inherit, var( --kendo-disabled-text, inherit ), initial))
118
+ disabled: if($kendo-enable-color-system, (inherit, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (inherit, var( --kendo-disabled-text, inherit ), initial))
119
119
  )
120
120
  ) !default;
121
121
 
@@ -130,7 +130,7 @@ $_tc-bottom-nav-light-matrix: (
130
130
  normal: if($kendo-enable-color-system, (app-surface, on-app-surface, transparent), ($kendo-color-white, k-get-theme-color-var( neutral-130 ), transparent)),
131
131
  focus: if($kendo-enable-color-system, (inherit, color, transparent, color), (inherit, 130, transparent, 130)),
132
132
  active: if($kendo-enable-color-system, (inherit, color, transparent), (inherit, 130, transparent)),
133
- disabled: if($kendo-enable-color-system, (inherit, rgba( k-color( on-app-surface, true ), .46 ), initial), (inherit, var( --kendo-disabled-text, inherit ), initial))
133
+ disabled: if($kendo-enable-color-system, (inherit, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (inherit, var( --kendo-disabled-text, inherit ), initial))
134
134
  )
135
135
  ) !default;
136
136
 
package/scss/breadcrumb/_variables.scss CHANGED
@@ -60,7 +60,7 @@ $kendo-breadcrumb-text: get-theme-color-var( neutral-130 ) !default;
60
60
  $kendo-breadcrumb-border: transparent !default;
61
61
  /// The box shadow of the focused breadcrumb
62
62
  /// @group breadcrumb
63
- $kendo-breadcrumb-focus-shadow: 0 0 0 1px if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
63
+ $kendo-breadcrumb-focus-shadow: 0 0 0 1px if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
64
64
 
65
65
  /// The horizontal padding of the Breadcrumb link
66
66
  /// @group breadcrumb
package/scss/button/_variables.scss CHANGED
@@ -142,7 +142,7 @@ $_tc-base-matrix: (
142
142
  focus-hover: if($kendo-enable-color-system, (color-hover, on-color, border, on-color), (20, 190, 110, 130)),
143
143
  active: if($kendo-enable-color-system, (color-active, on-color, border), (30, 190, 110)),
144
144
  active-hover: if($kendo-enable-color-system, (color-hover, on-color, border), (20, 190, 110)),
145
- disabled: if($kendo-enable-color-system, (rgba( k-color( on-app-surface, true ), .06 ), rgba( k-color( on-app-surface, true ), .46 ), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
145
+ disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
146
146
  ),
147
147
  outline: (
148
148
  normal: if($kendo-enable-color-system, (transparent, on-color, currentColor), (transparent, 160, currentColor)),
@@ -151,7 +151,7 @@ $_tc-base-matrix: (
151
151
  focus-hover: if($kendo-enable-color-system, (on-color, color, on-color, inherit), (190, $kendo-color-white, 190, inherit)),
152
152
  active: if($kendo-enable-color-system, (on-color, color, on-color), (190, $kendo-color-white, 190)),
153
153
  active-hover: if($kendo-enable-color-system, (color-hover, on-color, border), (20, 190, 110)),
154
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), rgba( k-color( on-app-surface, true ), .46 )), (initial, var( --kendo-disabled-text, inherit ), 90))
154
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent)), (initial, var( --kendo-disabled-text, inherit ), 90))
155
155
  ),
156
156
  link: (
157
157
  normal: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 160, transparent)),
@@ -160,7 +160,7 @@ $_tc-base-matrix: (
160
160
  focus-hover: if($kendo-enable-color-system, (transparent, on-color, color-subtle-active, transparent), (transparent, 190, 30, transparent)),
161
161
  active: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 190, transparent)),
162
162
  active-hover: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 190, transparent)),
163
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
163
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
164
164
  ),
165
165
  clear: (
166
166
  normal: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 160, transparent)),
@@ -169,7 +169,7 @@ $_tc-base-matrix: (
169
169
  focus-hover: if($kendo-enable-color-system, (transparent, on-color, transparent, color-active), (transparent, 190, transparent, 130)),
170
170
  active: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 190, transparent)),
171
171
  active-hover: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 190, transparent)),
172
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
172
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
173
173
  )
174
174
  ) !default;
175
175
 
@@ -182,7 +182,7 @@ $_tc-brand-matrix: (
182
182
  focus-hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover, inherit), (110, $kendo-color-white, 110, inherit)),
183
183
  active: if($kendo-enable-color-system, (color-active, on-color, color-active), (120, $kendo-color-white, 120)),
184
184
  active-hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover), (110, $kendo-color-white, 110)),
185
- disabled: if($kendo-enable-color-system, (rgba( k-color( on-app-surface, true ), .06 ), rgba( k-color( on-app-surface, true ), .46 ), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
185
+ disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
186
186
  ),
187
187
  flat: (
188
188
  normal: if($kendo-enable-color-system, (initial, color, transparent), (initial, 100, transparent)),
@@ -191,7 +191,7 @@ $_tc-brand-matrix: (
191
191
  focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 110, transparent, 30)),
192
192
  active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 110, transparent)),
193
193
  active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 110, transparent)),
194
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
194
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
195
195
  ),
196
196
  outline: (
197
197
  normal: if($kendo-enable-color-system, (transparent, color, currentColor), (transparent, 100, currentColor)),
@@ -200,7 +200,7 @@ $_tc-brand-matrix: (
200
200
  focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (100, $kendo-color-white, 100, inherit)),
201
201
  active: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100)),
202
202
  active-hover: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100)),
203
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), rgba( k-color( on-app-surface, true ), .46 )), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
203
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent)), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
204
204
  ),
205
205
  link: (
206
206
  normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 100, transparent)),
@@ -209,7 +209,7 @@ $_tc-brand-matrix: (
209
209
  focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent, color-subtle-active), (transparent, 130, transparent, 30)),
210
210
  active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 140, transparent)),
211
211
  active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 130, transparent)),
212
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
212
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
213
213
  ),
214
214
  clear: (
215
215
  normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 100, transparent)),
@@ -218,7 +218,7 @@ $_tc-brand-matrix: (
218
218
  focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 110, transparent)),
219
219
  active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 120, transparent)),
220
220
  active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 110, transparent)),
221
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
221
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
222
222
  )
223
223
  ) !default;
224
224
 
@@ -231,7 +231,7 @@ $_tc-warning-matrix: (
231
231
  focus-hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover, app-surface), (110, k-get-theme-color-var( neutral-190 ), 110, $kendo-color-white)),
232
232
  active: if($kendo-enable-color-system, (color-active, on-color, color-active), (120, k-get-theme-color-var( neutral-190 ), 120)),
233
233
  active-hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover), (110, k-get-theme-color-var( neutral-190 ), 110)),
234
- disabled: if($kendo-enable-color-system, (rgba( k-color( on-app-surface, true ), .06 ), rgba( k-color( on-app-surface, true ), .46 ), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
234
+ disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
235
235
  ),
236
236
  flat: (
237
237
  normal: if($kendo-enable-color-system, (initial, color, transparent), (initial, 100, transparent)),
@@ -240,7 +240,7 @@ $_tc-warning-matrix: (
240
240
  focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 110, transparent, 30)),
241
241
  active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 110, transparent)),
242
242
  active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 110, transparent)),
243
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
243
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
244
244
  ),
245
245
  outline: (
246
246
  normal: if($kendo-enable-color-system, (transparent, color, currentColor), (transparent, 100, currentColor)),
@@ -249,7 +249,7 @@ $_tc-warning-matrix: (
249
249
  focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (100, $kendo-color-black, 100, inherit)),
250
250
  active: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-black, 100)),
251
251
  active-hover: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-black, 100)),
252
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), rgba( k-color( on-app-surface, true ), .46 )), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
252
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent)), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
253
253
  ),
254
254
  link: (
255
255
  normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 100, transparent)),
@@ -258,7 +258,7 @@ $_tc-warning-matrix: (
258
258
  focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent, color-subtle-active), (transparent, 130, transparent, 30)),
259
259
  active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 140, transparent)),
260
260
  active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 130, transparent)),
261
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
261
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
262
262
  ),
263
263
  clear: (
264
264
  normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 100, transparent)),
@@ -267,7 +267,7 @@ $_tc-warning-matrix: (
267
267
  focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 110, transparent)),
268
268
  active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 120, transparent)),
269
269
  active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 110, transparent)),
270
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
270
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
271
271
  )
272
272
  ) !default;
273
273
 
@@ -280,7 +280,7 @@ $_tc-dark-matrix: (
280
280
  focus-hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover, on-color), (170, $kendo-color-white, 170, $kendo-color-white)),
281
281
  active: if($kendo-enable-color-system, (color-active, on-color, color-active), (180, $kendo-color-white, 180)),
282
282
  active-hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover), (170, $kendo-color-white, 170)),
283
- disabled: if($kendo-enable-color-system, (rgba( k-color( on-app-surface, true ), .06 ), rgba( k-color( on-app-surface, true ), .46 ), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
283
+ disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
284
284
  ),
285
285
  flat: (
286
286
  normal: if($kendo-enable-color-system, (initial, color, transparent), (initial, 160, transparent)),
@@ -289,7 +289,7 @@ $_tc-dark-matrix: (
289
289
  focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 170, transparent, 30)),
290
290
  active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 170, transparent)),
291
291
  active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 170, transparent)),
292
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
292
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
293
293
  ),
294
294
  outline: (
295
295
  normal: if($kendo-enable-color-system, (transparent, color, currentColor), (transparent, 160, currentColor)),
@@ -298,7 +298,7 @@ $_tc-dark-matrix: (
298
298
  focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (160, $kendo-color-white, 160, inherit)),
299
299
  active: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160)),
300
300
  active-hover: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160)),
301
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), rgba( k-color( on-app-surface, true ), .46 )), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
301
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent)), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
302
302
  ),
303
303
  link: (
304
304
  normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 160, transparent)),
@@ -307,7 +307,7 @@ $_tc-dark-matrix: (
307
307
  focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent, color-subtle-active), (transparent, 170, transparent, 30)),
308
308
  active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 170, transparent)),
309
309
  active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 170, transparent)),
310
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
310
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
311
311
  ),
312
312
  clear: (
313
313
  normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 160, transparent)),
@@ -316,7 +316,7 @@ $_tc-dark-matrix: (
316
316
  focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 170, transparent)),
317
317
  active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 170, transparent)),
318
318
  active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 170, transparent)),
319
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
319
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
320
320
  )
321
321
  ) !default;
322
322
 
@@ -329,7 +329,7 @@ $_tc-light-matrix: (
329
329
  focus-hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover, app-surface), (60, 190, 60, $kendo-color-white)),
330
330
  active: if($kendo-enable-color-system, (color-active, on-color, color-active), (70, 190, 70)),
331
331
  active-hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover), (60, 190, 60)),
332
- disabled: if($kendo-enable-color-system, (rgba( k-color( on-app-surface, true ), .06 ), rgba( k-color( on-app-surface, true ), .46 ), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
332
+ disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
333
333
  ),
334
334
  flat: (
335
335
  normal: if($kendo-enable-color-system, (initial, color, transparent), (initial, 50, transparent)),
@@ -338,7 +338,7 @@ $_tc-light-matrix: (
338
338
  focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 60, transparent, 30)),
339
339
  active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 60, transparent)),
340
340
  active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 60, transparent)),
341
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
341
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
342
342
  ),
343
343
  outline: (
344
344
  normal: if($kendo-enable-color-system, (transparent, color, currentColor), (transparent, 50, currentColor)),
@@ -347,7 +347,7 @@ $_tc-light-matrix: (
347
347
  focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (50, $kendo-color-white, 50, inherit)),
348
348
  active: if($kendo-enable-color-system, (color, on-color, color), (50, $kendo-color-white, 50)),
349
349
  active-hover: if($kendo-enable-color-system, (color, on-color, color), (50, $kendo-color-white, 50)),
350
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), rgba( k-color( on-app-surface, true ), .46 )), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
350
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent)), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
351
351
  ),
352
352
  link: (
353
353
  normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 50, transparent)),
@@ -356,7 +356,7 @@ $_tc-light-matrix: (
356
356
  focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent, color-subtle-active), (transparent, 60, transparent, 30)),
357
357
  active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 60, transparent)),
358
358
  active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 60, transparent)),
359
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
359
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
360
360
  ),
361
361
  clear: (
362
362
  normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 50, transparent)),
@@ -365,7 +365,7 @@ $_tc-light-matrix: (
365
365
  focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 60, transparent)),
366
366
  active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 60, transparent)),
367
367
  active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 60, transparent)),
368
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
368
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
369
369
  )
370
370
  ) !default;
371
371
 
package/scss/chat/_variables.scss CHANGED
@@ -152,7 +152,7 @@ $kendo-chat-bg: if($kendo-enable-color-system, k-color( surface ), k-get-theme-c
152
152
  $kendo-chat-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
153
153
  /// The border color of the Chat.
154
154
  /// @group chat
155
- $kendo-chat-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
155
+ $kendo-chat-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
156
156
 
157
157
  /// The background color of the Chat bubble.
158
158
  /// @group chat
package/scss/checkbox/_variables.scss CHANGED
@@ -113,14 +113,14 @@ $kendo-checkbox-hover-indeterminate-border: if($kendo-enable-color-system, k-col
113
113
  $kendo-checkbox-disabled-bg: $kendo-checkbox-bg !default;
114
114
  /// The text color of the disabled CheckBox.
115
115
  /// @group checkbox
116
- $kendo-checkbox-disabled-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
116
+ $kendo-checkbox-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;
117
117
  /// The border color of the disabled CheckBox.
118
118
  /// @group checkbox
119
- $kendo-checkbox-disabled-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
119
+ $kendo-checkbox-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;
120
120
 
121
121
  /// The background color of the disabled and checked CheckBox.
122
122
  /// @group checkbox
123
- $kendo-checkbox-disabled-checked-bg: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
123
+ $kendo-checkbox-disabled-checked-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;
124
124
  /// The text color of the disabled and checked CheckBox.
125
125
  /// @group checkbox
126
126
  $kendo-checkbox-disabled-checked-text: if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
@@ -133,10 +133,10 @@ $kendo-checkbox-disabled-checked-border: if($kendo-enable-color-system, transpar
133
133
  $kendo-checkbox-disabled-indeterminate-bg: $kendo-checkbox-bg !default;
134
134
  /// The border color of the disabled and indeterminate CheckBox.
135
135
  /// @group checkbox
136
- $kendo-checkbox-disabled-indeterminate-text: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color( neutral, 60 )) !default;
136
+ $kendo-checkbox-disabled-indeterminate-text: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 28%, transparent), k-get-theme-color( neutral, 60 )) !default;
137
137
  /// The border color of the disabled and indeterminate CheckBox.
138
138
  /// @group checkbox
139
- $kendo-checkbox-disabled-indeterminate-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
139
+ $kendo-checkbox-disabled-indeterminate-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;
140
140
 
141
141
  /// The background color of an invalid CheckBox.
142
142
  /// @group checkbox
package/scss/chip/_variables.scss CHANGED
@@ -37,7 +37,7 @@ $kendo-chip-solid-disabled-border: var( --kendo-disabled-border, inherit ) !defa
37
37
  $kendo-chip-outline-disabled-bg: var( $kendo-component-bg, transparent ) !default;
38
38
  /// The border color of the outline disabled Chip.
39
39
  /// @group chip
40
- $kendo-chip-outline-disabled-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) !default;
40
+ $kendo-chip-outline-disabled-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) !default;
41
41
 
42
42
  /// The offset of the outline focused Chip.
43
43
  /// @group chip
@@ -131,7 +131,7 @@ $_tc-base-matrix: (
131
131
  focus-hover: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-on-subtle), (20, 190, 130)),
132
132
  selected: if($kendo-enable-color-system, (k-color( primary ), k-color( on-primary ), k-color( primary )), (k-get-theme-color-var( primary-100 ), $kendo-color-white, k-get-theme-color-var( primary-100 ))),
133
133
  selected-hover: if($kendo-enable-color-system, (k-color( primary ), k-color( on-primary ), k-color( primary )), (k-get-theme-color-var( primary-100 ), $kendo-color-white, k-get-theme-color-var( primary-100 ))),
134
- disabled: if($kendo-enable-color-system, (rgba( k-color( on-app-surface, true ), .06 ), rgba( k-color( on-app-surface, true ), .46 ), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
134
+ disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
135
135
  ),
136
136
  outline: (
137
137
  normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 160, currentColor)),
@@ -140,7 +140,7 @@ $_tc-base-matrix: (
140
140
  focus-hover: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface, inherit), (190, $kendo-color-white, 190, inherit)),
141
141
  selected: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
142
142
  selected-hover: if($kendo-enable-color-system, (color-subtle, color-on-surface, color-on-subtle), (20, 190, 110)),
143
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), rgba( k-color( on-app-surface, true ), .46 )), (initial, var( --kendo-disabled-text, inherit ), 90))
143
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent)), (initial, var( --kendo-disabled-text, inherit ), 90))
144
144
  ),
145
145
  ) !default;
146
146
 
@@ -153,7 +153,7 @@ $_tc-brand-matrix: (
153
153
  focus-hover: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-on-subtle), (20, 190, 160)),
154
154
  selected: if($kendo-enable-color-system, (color-subtle-active, color-on-subtle, color-subtle-active), (40, 190, 40)),
155
155
  selected-hover: if($kendo-enable-color-system, (color-subtle-hover, color-on-subtle, color-subtle-hover), (30, 190, 30)),
156
- disabled: if($kendo-enable-color-system, (rgba( k-color( on-app-surface, true ), .06 ), rgba( k-color( on-app-surface, true ), .46 ), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
156
+ disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
157
157
  ),
158
158
  outline: (
159
159
  normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 160, currentColor)),
@@ -162,7 +162,7 @@ $_tc-brand-matrix: (
162
162
  focus-hover: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface, inherit), (190, $kendo-color-white, 190, inherit)),
163
163
  selected: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
164
164
  selected-hover: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
165
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), rgba( k-color( on-app-surface, true ), .46 )), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
165
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent)), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
166
166
  )
167
167
  ) !default;
168
168
 
@@ -175,7 +175,7 @@ $_tc-warning-matrix: (
175
175
  focus-hover: if($kendo-enable-color-system, (color-subtle, color-on-subtle, color-on-subtle), (20, k-get-theme-color-var( grey-190 ), 160)),
176
176
  selected: if($kendo-enable-color-system, (color-subtle-active, color-on-subtle, color-subtle-active), (40, k-get-theme-color-var( grey-190 ), 40)),
177
177
  selected-hover: if($kendo-enable-color-system, (color-subtle-hover, color-on-subtle, color-subtle-hover), (30, k-get-theme-color-var( grey-190 ), 30)),
178
- disabled: if($kendo-enable-color-system, (rgba( k-color( on-app-surface, true ), .06 ), rgba( k-color( on-app-surface, true ), .46 ), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
178
+ disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
179
179
  ),
180
180
  outline: (
181
181
  normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 160, currentColor)),
@@ -184,7 +184,7 @@ $_tc-warning-matrix: (
184
184
  focus-hover: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface, inherit), (190, $kendo-color-white, 190, inherit)),
185
185
  selected: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
186
186
  selected-hover: if($kendo-enable-color-system, (color-on-surface, app-surface, color-on-surface), (190, $kendo-color-white, 190)),
187
- disabled: if($kendo-enable-color-system, (initial, rgba( k-color( on-app-surface, true ), .46 ), rgba( k-color( on-app-surface, true ), .46 )), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
187
+ disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent)), (initial, var( --kendo-disabled-text, inherit ), var( --kendo-disabled-text, inherit )))
188
188
  )
189
189
  ) !default;
190
190
 
package/scss/color-preview/_variables.scss CHANGED
@@ -14,10 +14,10 @@ $kendo-color-preview-bg: transparent !default;
14
14
  $kendo-color-preview-text: inherit !default;
15
15
  /// Border color of the color preview.
16
16
  /// @group color-preview
17
- $kendo-color-preview-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
17
+ $kendo-color-preview-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;
18
18
  /// Hover Border color of the color preview.
19
19
  /// @group color-preview
20
- $kendo-color-preview-hover-border: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .28 ), k-get-theme-color-var( neutral-60 )) !default;
20
+ $kendo-color-preview-hover-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;
21
21
 
22
22
  /// Background color of the color preview when no color is selected.
23
23
  /// @group color-preview
package/scss/coloreditor/_variables.scss CHANGED
@@ -39,7 +39,7 @@ $kendo-color-editor-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
39
39
 
40
40
  /// The border color of the focused ColorEditor.
41
41
  /// @group coloreditor
42
- $kendo-color-editor-focus-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 )) !default;
42
+ $kendo-color-editor-focus-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 )) !default;
43
43
  /// The box shadow of the focused ColorEditor.
44
44
  /// @group coloreditor
45
45
  $kendo-color-editor-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
package/scss/colorgradient/_variables.scss CHANGED
@@ -49,7 +49,7 @@ $kendo-color-gradient-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
49
49
 
50
50
  /// The border color of the focused ColorGradient.
51
51
  /// @group cologradient
52
- $kendo-color-gradient-focus-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 )) !default;
52
+ $kendo-color-gradient-focus-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 )) !default;
53
53
  /// The box shadow of the focused ColorGradient.
54
54
  /// @group cologradient
55
55
  $kendo-color-gradient-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
@@ -68,7 +68,7 @@ $kendo-color-gradient-canvas-spacing: math.div( $kendo-color-gradient-spacer, 2
68
68
  $kendo-color-gradient-canvas-rectangle-height: 180px !default;
69
69
  /// The border color of the ColorGradient canvas hsv rectangle.
70
70
  /// @group cologradient
71
- $kendo-color-gradient-canvas-rectangle-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
71
+ $kendo-color-gradient-canvas-rectangle-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
72
72
  /// The box shadow of the ColorGradient canvas drag handle.
73
73
  /// @group cologradient
74
74
  $kendo-color-gradient-canvas-draghandle-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
@@ -84,7 +84,7 @@ $kendo-color-gradient-slider-border-radius: var( --kendo-border-radius-md, #{$ke
84
84
  $kendo-color-gradient-slider-border-width: if($kendo-enable-color-system, 0, 1px) !default;
85
85
  /// The color of the border around the ColorGradient slider.
86
86
  /// @group cologradient
87
- $kendo-color-gradient-slider-border: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
87
+ $kendo-color-gradient-slider-border: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
88
88
 
89
89
  /// The height of the ColorGradient vertical slider.
90
90
  /// @group cologradient
package/scss/colorpalette/_variables.scss CHANGED
@@ -34,7 +34,7 @@ $kendo-color-palette-tile-focus-outline: if($kendo-enable-color-system, k-color(
34
34
  $kendo-color-palette-tile-focus-shadow: inset 0 0 0 2px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
35
35
  /// The outline color of the ColorPalette hovered tile.
36
36
  /// @group colorpalette
37
- $kendo-color-palette-tile-hover-outline: if($kendo-enable-color-system, rgba( k-color( border, true ), .1 ), k-get-theme-color-var( neutral-20 )) !default;
37
+ $kendo-color-palette-tile-hover-outline: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 10%, transparent), k-get-theme-color-var( neutral-20 )) !default;
38
38
  /// The shadow of the ColorPalette hovered tile.
39
39
  /// @group colorpalette
40
40
  $kendo-color-palette-tile-hover-shadow: inset 0 0 0 2px $kendo-color-palette-tile-hover-outline, inset 0 0 0 4px if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white) !default;
package/scss/core/color-system/_swatch-legacy.scss CHANGED
@@ -5,13 +5,13 @@
5
5
  core.$kendo-body-text: core.k-color( on-app-surface );
6
6
  core.$kendo-component-bg: core.$kendo-body-bg;
7
7
  core.$kendo-component-text: core.$kendo-body-text;
8
- core.$kendo-component-border: rgba( core.k-color( border, true ), .16 );
8
+ core.$kendo-component-border: color-mix(in srgb, core.k-color( border ) 16%, transparent);
9
9
  core.$kendo-hover-bg: core.k-color( base-hover );
10
10
  core.$kendo-hover-text: core.k-color( on-base );
11
- core.$kendo-hover-border: rgba( core.k-color( border, true ), .1 );
11
+ core.$kendo-hover-border: color-mix(in srgb, core.k-color( border ) 10%, transparent);
12
12
  core.$kendo-selected-bg: core.k-color( base-active );
13
13
  core.$kendo-selected-text: core.k-color( on-base );
14
- core.$kendo-selected-border: rgba( core.k-color( border-alt, true ), .76 );
14
+ core.$kendo-selected-border: color-mix(in srgb, core.k-color( border-alt ) 76%, transparent);
15
15
  core.$kendo-selected-hover-bg: core.k-color( base-subtle-active );
16
16
  core.$kendo-selected-hover-text: core.k-color( on-base );
17
17
  core.$kendo-selected-hover-border: core.$kendo-selected-border;
@@ -24,7 +24,7 @@
24
24
  core.$kendo-invalid-border: core.k-color( error-emphasis );
25
25
  core.$kendo-invalid-shadow: null;
26
26
  core.$kendo-disabled-bg: core.k-color( base-subtle );
27
- core.$kendo-disabled-text: rgba( core.k-color( on-app-surface, true ), .46 );
27
+ core.$kendo-disabled-text: color-mix(in srgb, core.k-color( on-app-surface ) 46%, transparent);
28
28
  core.$kendo-disabled-border: transparent;
29
29
  core.$kendo-loading-bg: core.$kendo-component-bg;
30
30
  core.$kendo-loading-text: currentColor;
package/scss/dataviz/_variables.scss CHANGED
@@ -127,10 +127,10 @@ $kendo-chart-inactive-bg: var( --kendo-disabled-bg, initial ) !default;
127
127
 
128
128
  /// The color of the chart component major grid lines.
129
129
  /// @group charts
130
- $kendo-chart-major-lines: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
130
+ $kendo-chart-major-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
131
131
  /// The color of the chart component minor grid lines.
132
132
  /// @group charts
133
- $kendo-chart-minor-lines: if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
133
+ $kendo-chart-minor-lines: if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
134
134
 
135
135
  /// The opacity of the chart area.
136
136
  /// @group charts
package/scss/dock-manager/_variables.scss CHANGED
@@ -113,7 +113,7 @@ $kendo-dock-manager-dock-preview-border-style: dashed !default;
113
113
  $kendo-dock-manager-dock-preview-border-radius: var( --kendo-border-radius-md, 0) !default;
114
114
  /// The background color of the dropping area in the DockManager component.
115
115
  /// @group dock-manager
116
- $kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .2 ), color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent)) !default;
116
+ $kendo-dock-manager-dock-preview-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 20%, transparent), color-mix(in srgb, k-get-theme-color-var( primary-100 ) 20%, transparent)) !default;
117
117
  /// The border color of the dropping area in the DockManager component.
118
118
  /// @group dock-manager
119
119
  $kendo-dock-manager-dock-preview-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
package/scss/drawer/_variables.scss CHANGED
@@ -34,7 +34,7 @@ $kendo-drawer-content-padding-y: var( --kendo-padding-y, #{$kendo-padding-md-y}
34
34
  $kendo-drawer-scrollbar-width: 7px !default;
35
35
  /// Scrollbar color of the drawer.
36
36
  /// @group drawer
37
- $kendo-drawer-scrollbar-color: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .46 ), k-get-theme-color-var( neutral-90 )) !default;
37
+ $kendo-drawer-scrollbar-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), k-get-theme-color-var( neutral-90 )) !default;
38
38
  /// Scrollbar background of the drawer.
39
39
  /// @group drawer
40
40
  $kendo-drawer-scrollbar-bg: if($kendo-enable-color-system, k-color( base-subtle ), k-get-theme-color-var( neutral-40 )) !default;
@@ -43,7 +43,7 @@ $kendo-drawer-scrollbar-bg: if($kendo-enable-color-system, k-color( base-subtle
43
43
  $kendo-drawer-scrollbar-radius: 20px !default;
44
44
  /// Scrollbar hover color of the drawer.
45
45
  /// @group drawer
46
- $kendo-drawer-scrollbar-hover-color: if($kendo-enable-color-system, rgba( k-color( on-app-surface, true ), .6 ), k-get-theme-color-var( neutral-110 )) !default;
46
+ $kendo-drawer-scrollbar-hover-color: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 60%, transparent), k-get-theme-color-var( neutral-110 )) !default;
47
47
 
48
48
  /// Horizontal padding of the drawer item.
49
49
  /// @group drawer
package/scss/editor/_variables.scss CHANGED
@@ -47,7 +47,7 @@ $kendo-editor-selected-text: if($kendo-enable-color-system, k-color( app-surface
47
47
  $kendo-editor-selected-bg: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
48
48
  /// The highlighted background color of the Editor.
49
49
  /// @group editor
50
- $kendo-editor-highlighted-bg: if($kendo-enable-color-system, rgba( k-color( primary, true ), .55 ), k-get-theme-color-var( primary-60 )) !default;
50
+ $kendo-editor-highlighted-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 55%, transparent), k-get-theme-color-var( primary-60 )) !default;
51
51
 
52
52
  /// The size of the Editor's resize handle.
53
53
  /// @group editor
package/scss/expansion-panel/_variables.scss CHANGED
@@ -28,7 +28,7 @@ $kendo-expander-bg: if($kendo-enable-color-system, k-color( surface ), k-get-the
28
28
  $kendo-expander-border: var( --kendo-component-border, initial ) !default;
29
29
  /// The box shadow of the ExpansionPanel.
30
30
  /// @group expander
31
- $kendo-expander-shadow: inset 0 0 0 2px if($kendo-enable-color-system, rgba( k-color( border, true ), .16 ), k-get-theme-color-var( neutral-30 )) !default;
31
+ $kendo-expander-shadow: inset 0 0 0 2px if($kendo-enable-color-system, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
32
32
 
33
33
  /// The background color of the expanded ExpansionPanel.
34
34
  /// @group expander
package/scss/gantt/_variables.scss CHANGED
@@ -26,7 +26,7 @@ $kendo-gantt-border: var( --kendo-component-border, inherit ) !default;
26
26
 
27
27
  /// Background color of the gantt non-working days.
28
28
  /// @group gantt
29
- $kendo-gantt-nonwork-bg: rgba( if($kendo-enable-color-system, k-color( on-app-surface, true ), $kendo-color-black), .04 ) !default;
29
+ $kendo-gantt-nonwork-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 4%, transparent), rgba( $kendo-color-black, .04 )) !default;
30
30
  /// Text color of the gantt non-working days.
31
31
  /// @group gantt
32
32
  $kendo-gantt-nonwork-text: inherit !default;