@progress/kendo-theme-fluent 10.6.0-dev.6 → 11.0.0-dev.0

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 (135) hide show
  1. package/dist/all.css +1 -1
  2. package/dist/fluent-main-dark.css +1 -1
  3. package/dist/fluent-main-dark.scss +1 -1
  4. package/dist/fluent-main.css +1 -1
  5. package/dist/fluent-main.scss +1 -5
  6. package/dist/meta/sassdoc-data.json +2688 -2688
  7. package/dist/meta/sassdoc-raw-data.json +860 -860
  8. package/dist/meta/variables.json +540 -985
  9. package/lib/swatches/all.json +2 -13
  10. package/lib/swatches/fluent-main-dark.json +6 -17
  11. package/lib/swatches/fluent-main.json +6 -18
  12. package/package.json +4 -4
  13. package/scss/action-sheet/_variables.scss +12 -12
  14. package/scss/adaptive/_theme.scss +3 -3
  15. package/scss/adaptive/_variables.scss +13 -13
  16. package/scss/appbar/_variables.scss +10 -10
  17. package/scss/avatar/_variables.scss +11 -11
  18. package/scss/badge/_layout.scss +1 -1
  19. package/scss/badge/_variables.scss +14 -14
  20. package/scss/bottom-navigation/_variables.scss +35 -35
  21. package/scss/breadcrumb/_variables.scss +13 -13
  22. package/scss/button/_layout.scss +1 -1
  23. package/scss/button/_variables.scss +172 -172
  24. package/scss/calendar/_theme.scss +3 -3
  25. package/scss/calendar/_variables.scss +27 -27
  26. package/scss/captcha/_variables.scss +3 -3
  27. package/scss/card/_layout.scss +0 -1
  28. package/scss/card/_theme.scss +4 -0
  29. package/scss/card/_variables.scss +7 -7
  30. package/scss/chart-wizard/_variables.scss +4 -4
  31. package/scss/chat/_variables.scss +15 -15
  32. package/scss/checkbox/_variables.scss +22 -22
  33. package/scss/chip/_variables.scss +48 -48
  34. package/scss/color-preview/_theme.scss +1 -1
  35. package/scss/color-preview/_variables.scss +4 -4
  36. package/scss/coloreditor/_variables.scss +4 -4
  37. package/scss/colorgradient/_variables.scss +12 -12
  38. package/scss/colorpalette/_variables.scss +4 -4
  39. package/scss/core/_index.scss +8 -5
  40. package/scss/core/color-system/_index.scss +0 -1
  41. package/scss/core/color-system/_swatch.scss +0 -4
  42. package/scss/dataviz/_layout.scss +8 -8
  43. package/scss/dataviz/_theme.scss +3 -3
  44. package/scss/dataviz/_variables.scss +56 -56
  45. package/scss/daterangepicker/_theme.scss +1 -1
  46. package/scss/dialog/_variables.scss +8 -8
  47. package/scss/dock-manager/_variables.scss +10 -10
  48. package/scss/draggable/_variables.scss +4 -4
  49. package/scss/drawer/_variables.scss +16 -16
  50. package/scss/dropzone/_variables.scss +6 -6
  51. package/scss/editor/_theme.scss +2 -2
  52. package/scss/editor/_variables.scss +15 -15
  53. package/scss/expansion-panel/_variables.scss +14 -14
  54. package/scss/fab/_theme.scss +3 -3
  55. package/scss/fab/_variables.scss +12 -12
  56. package/scss/filemanager/_variables.scss +5 -5
  57. package/scss/filter/_variables.scss +5 -5
  58. package/scss/floating-label/_variables.scss +1 -1
  59. package/scss/forms/_theme.scss +2 -2
  60. package/scss/forms/_variables.scss +4 -4
  61. package/scss/gantt/_theme.scss +3 -3
  62. package/scss/gantt/_variables.scss +36 -36
  63. package/scss/grid/_layout.scss +1 -1
  64. package/scss/grid/_theme.scss +13 -43
  65. package/scss/grid/_variables.scss +20 -20
  66. package/scss/imageeditor/_variables.scss +6 -6
  67. package/scss/index.scss +3 -3
  68. package/scss/input/_theme.scss +3 -5
  69. package/scss/input/_variables.scss +74 -80
  70. package/scss/list/_variables.scss +23 -23
  71. package/scss/listbox/_variables.scss +4 -4
  72. package/scss/listgroup/_variables.scss +3 -3
  73. package/scss/listview/_variables.scss +4 -4
  74. package/scss/loader/_variables.scss +9 -9
  75. package/scss/map/_variables.scss +8 -8
  76. package/scss/marquee/_index.scss +16 -0
  77. package/scss/marquee/_layout.scss +6 -0
  78. package/scss/marquee/_theme.scss +6 -0
  79. package/scss/marquee/_variables.scss +11 -0
  80. package/scss/mediaplayer/_variables.scss +6 -6
  81. package/scss/menu/_theme.scss +1 -1
  82. package/scss/menu/_variables.scss +11 -11
  83. package/scss/messagebox/_theme.scss +1 -1
  84. package/scss/messagebox/_variables.scss +30 -2
  85. package/scss/no-data/_variables.scss +1 -1
  86. package/scss/notification/_variables.scss +10 -10
  87. package/scss/orgchart/_variables.scss +8 -8
  88. package/scss/pager/_variables.scss +6 -6
  89. package/scss/panel/_layout.scss +3 -3
  90. package/scss/panel/_variables.scss +3 -3
  91. package/scss/panelbar/_variables.scss +12 -12
  92. package/scss/pdf-viewer/_variables.scss +16 -16
  93. package/scss/pivotgrid/_theme.scss +4 -4
  94. package/scss/pivotgrid/_variables.scss +22 -22
  95. package/scss/popover/_variables.scss +3 -3
  96. package/scss/popup/_variables.scss +3 -3
  97. package/scss/progressbar/_variables.scss +13 -13
  98. package/scss/prompt/_variables.scss +12 -12
  99. package/scss/radio/_variables.scss +13 -13
  100. package/scss/rating/_theme.scss +2 -2
  101. package/scss/rating/_variables.scss +4 -4
  102. package/scss/scheduler/_theme.scss +5 -5
  103. package/scss/scheduler/_variables.scss +17 -17
  104. package/scss/scrollview/_variables.scss +11 -11
  105. package/scss/searchbox/_variables.scss +1 -1
  106. package/scss/signature/_variables.scss +2 -2
  107. package/scss/skeleton/_variables.scss +2 -2
  108. package/scss/slider/_variables.scss +12 -12
  109. package/scss/split-button/_variables.scss +1 -1
  110. package/scss/splitter/_variables.scss +8 -8
  111. package/scss/spreadsheet/_variables.scss +29 -29
  112. package/scss/stepper/_theme.scss +29 -53
  113. package/scss/stepper/_variables.scss +20 -20
  114. package/scss/switch/_variables.scss +32 -32
  115. package/scss/table/_theme.scss +7 -18
  116. package/scss/table/_variables.scss +8 -8
  117. package/scss/tabstrip/_variables.scss +16 -16
  118. package/scss/taskboard/_theme.scss +4 -4
  119. package/scss/taskboard/_variables.scss +13 -13
  120. package/scss/tilelayout/_variables.scss +2 -2
  121. package/scss/timeline/_variables.scss +14 -14
  122. package/scss/timeselector/_theme.scss +3 -3
  123. package/scss/timeselector/_variables.scss +4 -4
  124. package/scss/toolbar/_layout.scss +6 -0
  125. package/scss/toolbar/_variables.scss +7 -7
  126. package/scss/tooltip/_variables.scss +10 -10
  127. package/scss/treeview/_variables.scss +11 -11
  128. package/scss/typography/_layout.scss +2 -2
  129. package/scss/typography/_theme.scss +2 -2
  130. package/scss/typography/_variables.scss +3 -3
  131. package/scss/upload/_theme.scss +2 -2
  132. package/scss/upload/_variables.scss +14 -14
  133. package/scss/window/_variables.scss +11 -11
  134. package/scss/wizard/_variables.scss +3 -3
  135. package/scss/core/color-system/_swatch-legacy.scss +0 -165
package/scss/breadcrumb/_variables.scss CHANGED
@@ -51,7 +51,7 @@ $kendo-breadcrumb-lg-line-height: var( --kendo-line-height, normal ) !default;
51
51
 
52
52
  /// The background color of the Breadcrumb
53
53
  /// @group breadcrumb
54
- $kendo-breadcrumb-bg: var( --kendo-component-bg, initial ) !default;
54
+ $kendo-breadcrumb-bg: k-color(surface-alt) !default;
55
55
  /// The text color of the Breadcrumb
56
56
  /// @group breadcrumb
57
57
  $kendo-breadcrumb-text: get-theme-color-var( neutral-130 ) !default;
@@ -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, color-mix(in srgb, k-color( border ) 16%, transparent), k-get-theme-color-var( neutral-30 )) !default;
63
+ $kendo-breadcrumb-focus-shadow: 0 0 0 1px color-mix(in srgb, k-color(border) 16%, transparent) !default;
64
64
 
65
65
  /// The horizontal padding of the Breadcrumb link
66
66
  /// @group breadcrumb
@@ -105,49 +105,49 @@ $kendo-breadcrumb-link-text: get-theme-color-var( neutral-130 ) !default;
105
105
  $kendo-breadcrumb-link-border: transparent !default;
106
106
  /// The background color of the hovered breadcrumb link
107
107
  /// @group breadcrumb
108
- $kendo-breadcrumb-link-hover-bg: var( --kendo-hover-bg, initial ) !default;
108
+ $kendo-breadcrumb-link-hover-bg: k-color(base-hover) !default;
109
109
  /// The text color of the hovered breadcrumb link
110
110
  /// @group breadcrumb
111
- $kendo-breadcrumb-link-hover-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
111
+ $kendo-breadcrumb-link-hover-text: k-color(on-app-surface) !default;
112
112
  /// The border color of the hovered breadcrumb link
113
113
  /// @group breadcrumb
114
- $kendo-breadcrumb-link-hover-border: var( --kendo-hover-border, initial ) !default;
114
+ $kendo-breadcrumb-link-hover-border: color-mix(in srgb, k-color(border) 10%, transparent) !default;
115
115
  /// The background color of the active breadcrumb link
116
116
  /// @group breadcrumb
117
- $kendo-breadcrumb-link-active-bg: var( --kendo-selected-bg, initial ) !default;
117
+ $kendo-breadcrumb-link-active-bg: k-color(base-active) !default;
118
118
  /// The text color of the active breadcrumb link
119
119
  /// @group breadcrumb
120
- $kendo-breadcrumb-link-active-text: var( --kendo-selected-text, initial ) !default;
120
+ $kendo-breadcrumb-link-active-text: k-color(on-base) !default;
121
121
  /// The border color of the active breadcrumb link
122
122
  /// @group breadcrumb
123
- $kendo-breadcrumb-link-active-border: if($kendo-enable-color-system, k-color( base-active ), k-get-theme-color-var( neutral-30 )) !default;
123
+ $kendo-breadcrumb-link-active-border: k-color(base-active) !default;
124
124
  /// The background color of the focused breadcrumb link
125
125
  /// @group breadcrumb
126
126
  $kendo-breadcrumb-link-focus-bg: transparent !default;
127
127
  /// The text color of the focused breadcrumb link
128
128
  /// @group breadcrumb
129
- $kendo-breadcrumb-link-focus-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
129
+ $kendo-breadcrumb-link-focus-text: k-color(on-app-surface) !default;
130
130
  /// The box shadow of the focused breadcrumb link
131
131
  /// @group breadcrumb
132
132
  $kendo-breadcrumb-link-focus-shadow: inset 0 0 0 1px get-theme-color-var( neutral-130 ) !default;
133
133
  /// The focus and hover background color of the Breadcrumb link
134
134
  /// @group breadcrumb
135
- $kendo-breadcrumb-link-focus-hover-bg: var( --kendo-hover-bg, initial ) !default;
135
+ $kendo-breadcrumb-link-focus-hover-bg: k-color(base-hover) !default;
136
136
  /// The background color of the disabled breadcrumb link
137
137
  /// @group breadcrumb
138
138
  $kendo-breadcrumb-link-disabled-bg: none !default;
139
139
  /// The text color of the disabled breadcrumb link
140
140
  /// @group breadcrumb
141
- $kendo-breadcrumb-link-disabled-text: var( --kendo-disabled-text, initial ) !default;
141
+ $kendo-breadcrumb-link-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
142
142
  /// The border color of the disabled breadcrumb link
143
143
  /// @group breadcrumb
144
144
  $kendo-breadcrumb-link-disabled-border: none !default;
145
145
  /// The background color of selected the Breadcrumb link
146
146
  /// @group breadcrumb
147
- $kendo-breadcrumb-link-selected-bg: var( --kendo-component-bg, initial ) !default;
147
+ $kendo-breadcrumb-link-selected-bg: k-color(surface-alt) !default;
148
148
  /// The text color of the selected breadcrumb link
149
149
  /// @group breadcrumb
150
- $kendo-breadcrumb-link-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-160 )) !default;
150
+ $kendo-breadcrumb-link-selected-text: k-color(on-app-surface) !default;
151
151
  /// The border color of the selected breadcrumb link
152
152
  /// @group breadcrumb
153
153
  $kendo-breadcrumb-link-selected-border: transparent !default;
package/scss/button/_layout.scss CHANGED
@@ -259,7 +259,7 @@
259
259
  }
260
260
 
261
261
  &.k-disabled {
262
- color: var( --kendo-disabled-text, inherit );
262
+ color: color-mix(in srgb, k-color(on-app-surface) 46%, transparent);
263
263
  }
264
264
  }
265
265
 
package/scss/button/_variables.scss CHANGED
@@ -126,7 +126,7 @@ $kendo-button-brand-colors: (
126
126
  error: error,
127
127
  success: success,
128
128
  info: info,
129
- secondary: if($kendo-enable-color-system, secondary, neutral),
129
+ secondary: secondary,
130
130
  tertiary: tertiary,
131
131
  ) !default;
132
132
 
@@ -136,236 +136,236 @@ $kendo-button-brand-colors: (
136
136
  // The color matrix for the base Button
137
137
  $_tc-base-matrix: (
138
138
  solid: (
139
- normal: if($kendo-enable-color-system, (color, on-color, border), ($kendo-color-white, 160, 110)),
140
- hover: if($kendo-enable-color-system, (color-hover, on-color, border), (20, 190, 110)),
141
- focus: if($kendo-enable-color-system, (color, on-color, border, on-color), ($kendo-color-white, 160, 110, 130)),
142
- focus-hover: if($kendo-enable-color-system, (color-hover, on-color, border, on-color), (20, 190, 110, 130)),
143
- active: if($kendo-enable-color-system, (color-active, on-color, border), (30, 190, 110)),
144
- active-hover: if($kendo-enable-color-system, (color-hover, on-color, border), (20, 190, 110)),
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 )))
139
+ normal: (color, on-color, border),
140
+ hover: (color-hover, on-color, border),
141
+ focus: (color, on-color, border, on-color),
142
+ focus-hover: (color-hover, on-color, border, on-color),
143
+ active: (color-active, on-color, border),
144
+ active-hover: (color-hover, on-color, border),
145
+ disabled: (color-mix(in srgb, k-color(on-app-surface) 6%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent), transparent)
146
146
  ),
147
147
  outline: (
148
- normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 160, currentColor)),
149
- hover: if($kendo-enable-color-system, (on-color, color, on-color), (190, $kendo-color-white, 190)),
150
- focus: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor, inherit), (transparent, 160, currentColor, inherit)),
151
- focus-hover: if($kendo-enable-color-system, (on-color, color, on-color, inherit), (190, $kendo-color-white, 190, inherit)),
152
- active: if($kendo-enable-color-system, (on-color, color, on-color), (190, $kendo-color-white, 190)),
153
- active-hover: if($kendo-enable-color-system, (on-color, color, on-color), (20, 190, 110)),
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))
148
+ normal: (transparent, color-on-surface, currentColor),
149
+ hover: (on-color, color, on-color),
150
+ focus: (transparent, color-on-surface, currentColor, inherit),
151
+ focus-hover: (on-color, color, on-color, inherit),
152
+ active: (on-color, color, on-color),
153
+ active-hover: (on-color, color, on-color),
154
+ disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent))
155
155
  ),
156
156
  link: (
157
- normal: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 160, transparent)),
158
- hover: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 190, transparent)),
159
- focus: if($kendo-enable-color-system, (transparent, on-color, transparent, color-subtle-active), (transparent, 160, transparent, 30)),
160
- focus-hover: if($kendo-enable-color-system, (transparent, on-color, color-subtle-active, transparent), (transparent, 190, 30, transparent)),
161
- active: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 190, transparent)),
162
- active-hover: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 190, 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))
157
+ normal: (transparent, on-color, transparent),
158
+ hover: (transparent, on-color, transparent),
159
+ focus: (transparent, on-color, transparent, color-subtle-active),
160
+ focus-hover: (transparent, on-color, color-subtle-active, transparent),
161
+ active: (transparent, on-color, transparent),
162
+ active-hover: (transparent, on-color, transparent),
163
+ disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
164
164
  ),
165
165
  clear: (
166
- normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 160, transparent)),
167
- hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 190, transparent)),
168
- focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent, color-active), (30, 160, transparent, 130)),
169
- focus-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent, color-active), (transparent, 190, transparent, 130)),
170
- active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 190, transparent)),
171
- active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 190, 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))
166
+ normal: (transparent, color-on-surface, transparent),
167
+ hover: (transparent, color-on-surface, transparent),
168
+ focus: (color-subtle, color-on-surface, transparent, color-active),
169
+ focus-hover: (transparent, color-on-surface, transparent, color-active),
170
+ active: (transparent, color-on-surface, transparent),
171
+ active-hover: (transparent, color-on-surface, transparent),
172
+ disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
173
173
  )
174
174
  ) !default;
175
175
 
176
176
  // The color matrix for primary, error, success, info, secondary, tertiary Buttons
177
177
  $_tc-brand-matrix: (
178
178
  solid: (
179
- normal: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100)),
180
- hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover), (110, $kendo-color-white, 110)),
181
- focus: if($kendo-enable-color-system, (color, on-color, color, inherit), (100, $kendo-color-white, 100, inherit)),
182
- focus-hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover, inherit), (110, $kendo-color-white, 110, inherit)),
183
- active: if($kendo-enable-color-system, (color-active, on-color, color-active), (120, $kendo-color-white, 120)),
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, (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
+ normal: (color, on-color, color),
180
+ hover: (color-hover, on-color, color-hover),
181
+ focus: (color, on-color, color, inherit),
182
+ focus-hover: (color-hover, on-color, color-hover, inherit),
183
+ active: (color-active, on-color, color-active),
184
+ active-hover: (color-hover, on-color, color-hover),
185
+ disabled: (color-mix(in srgb, k-color(on-app-surface) 6%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent), transparent)
186
186
  ),
187
187
  flat: (
188
- normal: if($kendo-enable-color-system, (initial, color-on-surface, transparent), (initial, 100, transparent)),
189
- hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 110, transparent)),
190
- focus: if($kendo-enable-color-system, (initial, color-on-surface, transparent, color-subtle-active), (initial, 100, transparent, 30)),
191
- focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 110, transparent, 30)),
192
- active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 110, transparent)),
193
- active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 110, transparent)),
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))
188
+ normal: (initial, color-on-surface, transparent),
189
+ hover: (color-subtle, color-hover, transparent),
190
+ focus: (initial, color-on-surface, transparent, color-subtle-active),
191
+ focus-hover: (color-subtle, color-hover, transparent, color-subtle-active),
192
+ active: (color-subtle-hover, color-hover, transparent),
193
+ active-hover: (color-subtle, color-hover, transparent),
194
+ disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
195
195
  ),
196
196
  outline: (
197
- normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 100, currentColor)),
198
- hover: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100)),
199
- focus: if($kendo-enable-color-system, (transparent, color-on-surface, color, inherit), (transparent, 100, 100, inherit)),
200
- focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (100, $kendo-color-white, 100, inherit)),
201
- active: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100)),
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, 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 )))
197
+ normal: (transparent, color-on-surface, currentColor),
198
+ hover: (color, on-color, color),
199
+ focus: (transparent, color-on-surface, color, inherit),
200
+ focus-hover: (color, on-color, color, inherit),
201
+ active: (color, on-color, color),
202
+ active-hover: (color, on-color, color),
203
+ disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent))
204
204
  ),
205
205
  link: (
206
- normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 100, transparent)),
207
- hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 130, transparent)),
208
- focus: if($kendo-enable-color-system, (transparent, color, transparent, color-subtle-active), (transparent, 100, transparent, 30)),
209
- focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent, color-subtle-active), (transparent, 130, transparent, 30)),
210
- active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 140, transparent)),
211
- active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 130, 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))
206
+ normal: (transparent, color, transparent),
207
+ hover: (transparent, color-hover, transparent),
208
+ focus: (transparent, color, transparent, color-subtle-active),
209
+ focus-hover: (transparent, color-hover, transparent, color-subtle-active),
210
+ active: (transparent, color-active, transparent),
211
+ active-hover: (transparent, color-hover, transparent),
212
+ disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
213
213
  ),
214
214
  clear: (
215
- normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 100, transparent)),
216
- hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
217
- focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent), (20, 100, transparent)),
218
- focus-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
219
- active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 120, transparent)),
220
- active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, 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))
215
+ normal: (transparent, color-on-surface, transparent),
216
+ hover: (transparent, color-on-surface, transparent),
217
+ focus: (color-subtle, color-on-surface, transparent),
218
+ focus-hover: (transparent, color-on-surface, transparent),
219
+ active: (transparent, color-on-surface, transparent),
220
+ active-hover: (transparent, color-on-surface, transparent),
221
+ disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
222
222
  )
223
223
  ) !default;
224
224
 
225
225
  // The color matrix for warning Buttons
226
226
  $_tc-warning-matrix: (
227
227
  solid: (
228
- normal: if($kendo-enable-color-system, (color, on-color, color), (100, k-get-theme-color-var( neutral-160 ), 100)),
229
- hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover), (110, k-get-theme-color-var( neutral-190 ), 110)),
230
- focus: if($kendo-enable-color-system, (color, on-color, color, app-surface), (100, k-get-theme-color-var( neutral-160 ), 100, $kendo-color-white)),
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
- active: if($kendo-enable-color-system, (color-active, on-color, color-active), (120, k-get-theme-color-var( neutral-190 ), 120)),
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, (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 )))
228
+ normal: (color, on-color, color),
229
+ hover: (color-hover, on-color, color-hover),
230
+ focus: (color, on-color, color, app-surface),
231
+ focus-hover: (color-hover, on-color, color-hover, app-surface),
232
+ active: (color-active, on-color, color-active),
233
+ active-hover: (color-hover, on-color, color-hover),
234
+ disabled: (color-mix(in srgb, k-color(on-app-surface) 6%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent), transparent)
235
235
  ),
236
236
  flat: (
237
- normal: if($kendo-enable-color-system, (initial, color-on-surface, transparent), (initial, 100, transparent)),
238
- hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 110, transparent)),
239
- focus: if($kendo-enable-color-system, (initial, color-on-surface, transparent, color-subtle-active), (initial, 100, transparent, 30)),
240
- focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 110, transparent, 30)),
241
- active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 110, transparent)),
242
- active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 110, transparent)),
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))
237
+ normal: (initial, color-on-surface, transparent),
238
+ hover: (color-subtle, color-hover, transparent),
239
+ focus: (initial, color-on-surface, transparent, color-subtle-active),
240
+ focus-hover: (color-subtle, color-hover, transparent, color-subtle-active),
241
+ active: (color-subtle-hover, color-hover, transparent),
242
+ active-hover: (color-subtle, color-hover, transparent),
243
+ disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
244
244
  ),
245
245
  outline: (
246
- normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 100, currentColor)),
247
- hover: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-black, 100)),
248
- focus: if($kendo-enable-color-system, (transparent, color-on-surface, color-on-surface, inherit), (transparent, 100, 100, inherit)),
249
- focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (100, $kendo-color-black, 100, inherit)),
250
- active: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-black, 100)),
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, 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 )))
246
+ normal: (transparent, color-on-surface, currentColor),
247
+ hover: (color, on-color, color),
248
+ focus: (transparent, color-on-surface, color-on-surface, inherit),
249
+ focus-hover: (color, on-color, color, inherit),
250
+ active: (color, on-color, color),
251
+ active-hover: (color, on-color, color),
252
+ disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent))
253
253
  ),
254
254
  link: (
255
- normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 100, transparent)),
256
- hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 130, transparent)),
257
- focus: if($kendo-enable-color-system, (transparent, color, color-subtle-active), (transparent, 100, 30)),
258
- focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent, color-subtle-active), (transparent, 130, transparent, 30)),
259
- active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 140, transparent)),
260
- active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 130, 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))
255
+ normal: (transparent, color, transparent),
256
+ hover: (transparent, color-hover, transparent),
257
+ focus: (transparent, color, color-subtle-active),
258
+ focus-hover: (transparent, color-hover, transparent, color-subtle-active),
259
+ active: (transparent, color-active, transparent),
260
+ active-hover: (transparent, color-hover, transparent),
261
+ disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial),
262
262
  ),
263
263
  clear: (
264
- normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 100, transparent)),
265
- hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
266
- focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent), (20, 100, transparent)),
267
- focus-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
268
- active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 120, transparent)),
269
- active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, 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))
264
+ normal: (transparent, color-on-surface, transparent),
265
+ hover: (transparent, color-on-surface, transparent),
266
+ focus: (color-subtle, color-on-surface, transparent),
267
+ focus-hover: (transparent, color-on-surface, transparent),
268
+ active: (transparent, color-on-surface, transparent),
269
+ active-hover: (transparent, color-on-surface, transparent),
270
+ disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial),
271
271
  )
272
272
  ) !default;
273
273
 
274
274
  // The color matrix for dark Buttons
275
275
  $_tc-dark-matrix: (
276
276
  solid: (
277
- normal: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160)),
278
- hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover), (170, $kendo-color-white, 170)),
279
- focus: if($kendo-enable-color-system, (color, on-color, color, on-color), (160, $kendo-color-white, 160, $kendo-color-white)),
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
- active: if($kendo-enable-color-system, (color-active, on-color, color-active), (180, $kendo-color-white, 180)),
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, (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 )))
277
+ normal: (color, on-color, color),
278
+ hover: (color-hover, on-color, color-hover),
279
+ focus: (color, on-color, color, on-color),
280
+ focus-hover: (color-hover, on-color, color-hover, on-color),
281
+ active: (color-active, on-color, color-active),
282
+ active-hover: (color-hover, on-color, color-hover),
283
+ disabled: (color-mix(in srgb, k-color(on-app-surface) 6%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent), transparent),
284
284
  ),
285
285
  flat: (
286
- normal: if($kendo-enable-color-system, (initial, color-on-surface, transparent), (initial, 160, transparent)),
287
- hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 170, transparent)),
288
- focus: if($kendo-enable-color-system, (initial, color-on-surface, transparent, color-subtle-active), (initial, 160, transparent, 30)),
289
- focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 170, transparent, 30)),
290
- active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 170, transparent)),
291
- active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 170, transparent)),
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))
286
+ normal: (initial, color-on-surface, transparent),
287
+ hover: (color-subtle, color-hover, transparent),
288
+ focus: (initial, color-on-surface, transparent, color-subtle-active),
289
+ focus-hover: (color-subtle, color-hover, transparent, color-subtle-active),
290
+ active: (color-subtle-hover, color-hover, transparent),
291
+ active-hover: (color-subtle, color-hover, transparent),
292
+ disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
293
293
  ),
294
294
  outline: (
295
- normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 160, currentColor)),
296
- hover: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160)),
297
- focus: if($kendo-enable-color-system, (transparent, color-on-surface, color, inherit), (transparent, 160, 160, inherit)),
298
- focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (160, $kendo-color-white, 160, inherit)),
299
- active: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160)),
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, 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 )))
295
+ normal: (transparent, color-on-surface, currentColor),
296
+ hover: (color, on-color, color),
297
+ focus: (transparent, color-on-surface, color, inherit),
298
+ focus-hover: (color, on-color, color, inherit),
299
+ active: (color, on-color, color),
300
+ active-hover: (color, on-color, color),
301
+ disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent))
302
302
  ),
303
303
  link: (
304
- normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 160, transparent)),
305
- hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 170, transparent)),
306
- focus: if($kendo-enable-color-system, (transparent, color, color-subtle-active), (transparent, 160, 30)),
307
- focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent, color-subtle-active), (transparent, 170, transparent, 30)),
308
- active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 170, transparent)),
309
- active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 170, 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))
304
+ normal: (transparent, color, transparent),
305
+ hover: (transparent, color-hover, transparent),
306
+ focus: (transparent, color, color-subtle-active),
307
+ focus-hover: (transparent, color-hover, transparent, color-subtle-active),
308
+ active: (transparent, color-active, transparent),
309
+ active-hover: (transparent, color-hover, transparent),
310
+ disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
311
311
  ),
312
312
  clear: (
313
- normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 160, transparent)),
314
- hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 170, transparent)),
315
- focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent), (20, 160, transparent)),
316
- focus-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 170, transparent)),
317
- active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 170, transparent)),
318
- active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 170, 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))
313
+ normal: (transparent, color-on-surface, transparent),
314
+ hover: (transparent, color-on-surface, transparent),
315
+ focus: (color-subtle, color-on-surface, transparent),
316
+ focus-hover: (transparent, color-on-surface, transparent),
317
+ active: (transparent, color-on-surface, transparent),
318
+ active-hover: (transparent, color-on-surface, transparent),
319
+ disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
320
320
  )
321
321
  ) !default;
322
322
 
323
323
  // The color matrix for light Buttons
324
324
  $_tc-light-matrix: (
325
325
  solid: (
326
- normal: if($kendo-enable-color-system, (color, on-color, color), (50, 160, 50)),
327
- hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover), (60, 190, 60)),
328
- focus: if($kendo-enable-color-system, (color, on-color, color, app-surface), (50, 160, 50, $kendo-color-white)),
329
- focus-hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover, app-surface), (60, 190, 60, $kendo-color-white)),
330
- active: if($kendo-enable-color-system, (color-active, on-color, color-active), (70, 190, 70)),
331
- active-hover: if($kendo-enable-color-system, (color-hover, on-color, color-hover), (60, 190, 60)),
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 )))
326
+ normal: (color, on-color, color),
327
+ hover: (color-hover, on-color, color-hover),
328
+ focus: (color, on-color, color, app-surface),
329
+ focus-hover: (color-hover, on-color, color-hover, app-surface),
330
+ active: (color-active, on-color, color-active),
331
+ active-hover: (color-hover, on-color, color-hover),
332
+ disabled: (color-mix(in srgb, k-color(on-app-surface) 6%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent), transparent)
333
333
  ),
334
334
  flat: (
335
- normal: if($kendo-enable-color-system, (initial, color-on-surface, transparent), (initial, 50, transparent)),
336
- hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 60, transparent)),
337
- focus: if($kendo-enable-color-system, (initial, color-on-surface, transparent, color-subtle-active), (initial, 50, transparent, 30)),
338
- focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 60, transparent, 30)),
339
- active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 60, transparent)),
340
- active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 60, transparent)),
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))
335
+ normal: (initial, color-on-surface, transparent),
336
+ hover: (color-subtle, color-hover, transparent),
337
+ focus: (initial, color-on-surface, transparent, color-subtle-active),
338
+ focus-hover: (color-subtle, color-hover, transparent, color-subtle-active),
339
+ active: (color-subtle-hover, color-hover, transparent),
340
+ active-hover: (color-subtle, color-hover, transparent),
341
+ disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
342
342
  ),
343
343
  outline: (
344
- normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 50, currentColor)),
345
- hover: if($kendo-enable-color-system, (color, on-color, color), (50, $kendo-color-white, 50)),
346
- focus: if($kendo-enable-color-system, (transparent, color-on-surface, color, inherit), (transparent, 50, 50, inherit)),
347
- focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (50, $kendo-color-white, 50, inherit)),
348
- active: if($kendo-enable-color-system, (color, on-color, color), (50, $kendo-color-white, 50)),
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, 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 )))
344
+ normal: (transparent, color-on-surface, currentColor),
345
+ hover: (color, on-color, color),
346
+ focus: (transparent, color-on-surface, color, inherit),
347
+ focus-hover: (color, on-color, color, inherit),
348
+ active: (color, on-color, color),
349
+ active-hover: (color, on-color, color),
350
+ disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), color-mix(in srgb, k-color(on-app-surface) 46%, transparent)),
351
351
  ),
352
352
  link: (
353
- normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 50, transparent)),
354
- hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 60, transparent)),
355
- focus: if($kendo-enable-color-system, (transparent, color, color-subtle-active), (transparent, 50, 30)),
356
- focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent, color-subtle-active), (transparent, 60, transparent, 30)),
357
- active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 60, transparent)),
358
- active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 60, 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))
353
+ normal: (transparent, color, transparent),
354
+ hover: (transparent, color-hover, transparent),
355
+ focus: (transparent, color, color-subtle-active),
356
+ focus-hover: (transparent, color-hover, transparent, color-subtle-active),
357
+ active: (transparent, color-active, transparent),
358
+ active-hover: (transparent, color-hover, transparent),
359
+ disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
360
360
  ),
361
361
  clear: (
362
- normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 50, transparent)),
363
- hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 60, transparent)),
364
- focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent), (20, 50, transparent)),
365
- focus-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 60, transparent)),
366
- active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 60, transparent)),
367
- active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 60, 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))
362
+ normal: (transparent, color-on-surface, transparent),
363
+ hover: (transparent, color-on-surface, transparent),
364
+ focus: (color-subtle, color-on-surface, transparent),
365
+ focus-hover: (transparent, color-on-surface, transparent),
366
+ active: (transparent, color-on-surface, transparent),
367
+ active-hover: (transparent, color-on-surface, transparent),
368
+ disabled: (initial, color-mix(in srgb, k-color(on-app-surface) 46%, transparent), initial)
369
369
  )
370
370
  ) !default;
371
371
 
@@ -377,7 +377,7 @@ $kendo-button-theme-colors: () !default;
377
377
  @each $fill-mode, $ui-states in $_tc-base-matrix {
378
378
  $kendo-button-theme-colors: map.deep-merge(
379
379
  $kendo-button-theme-colors,
380
- k-generate-fill-mode-theme-variation( $fill-mode, base, if($kendo-enable-color-system, base, neutral), $ui-states )
380
+ k-generate-fill-mode-theme-variation( $fill-mode, base, base, $ui-states )
381
381
  );
382
382
  }
383
383
 
@@ -403,7 +403,7 @@ $kendo-button-theme-colors: () !default;
403
403
  @each $fill-mode, $ui-states in $_tc-dark-matrix {
404
404
  $kendo-button-theme-colors: map.deep-merge(
405
405
  $kendo-button-theme-colors,
406
- k-generate-fill-mode-theme-variation( $fill-mode, dark, if($kendo-enable-color-system, dark, neutral), $ui-states )
406
+ k-generate-fill-mode-theme-variation( $fill-mode, dark, dark, $ui-states )
407
407
  );
408
408
  }
409
409
 
@@ -411,6 +411,6 @@ $kendo-button-theme-colors: () !default;
411
411
  @each $fill-mode, $ui-states in $_tc-light-matrix {
412
412
  $kendo-button-theme-colors: map.deep-merge(
413
413
  $kendo-button-theme-colors,
414
- k-generate-fill-mode-theme-variation( $fill-mode, light, if($kendo-enable-color-system, light, neutral), $ui-states )
414
+ k-generate-fill-mode-theme-variation( $fill-mode, light, light, $ui-states )
415
415
  );
416
416
  }
package/scss/calendar/_theme.scss CHANGED
@@ -82,7 +82,7 @@
82
82
  }
83
83
 
84
84
  &.k-disabled {
85
- --kendo-calendar-cell-text: var( --kendo-disabled-text, inherit );
85
+ --kendo-calendar-cell-text: color-mix(in srgb, #{k-color(on-app-surface)} 46%, transparent);
86
86
  }
87
87
  }
88
88
 
@@ -140,7 +140,7 @@
140
140
  &.k-invalid:hover,
141
141
  &.ng-invalid.ng-touched,
142
142
  &.ng-invalid.ng-dirty {
143
- border-color: var( --kendo-invalid-border, inherit );
143
+ border-color: k-color(error-emphasis);
144
144
  }
145
145
  }
146
146
 
@@ -200,7 +200,7 @@
200
200
  }
201
201
 
202
202
  &.k-disabled {
203
- --kendo-calendar-cell-text: var( --kendo-disabled-text, inherit );
203
+ --kendo-calendar-cell-text: color-mix(in srgb, #{k-color(on-app-surface)} 46%, transparent);
204
204
  }
205
205
 
206
206
  &:hover .k-link,