@progress/kendo-theme-fluent 11.2.1-dev.1 → 11.3.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 (340) hide show
  1. package/dist/all.css +1 -1
  2. package/dist/fluent-main-dark.css +1 -1
  3. package/dist/fluent-main.css +1 -1
  4. package/dist/meta/sassdoc-data.json +24099 -27323
  5. package/dist/meta/sassdoc-raw-data.json +8421 -7718
  6. package/dist/meta/variables.json +7880 -8036
  7. package/lib/swatches/all.json +1 -1
  8. package/lib/swatches/fluent-main-dark.json +1 -1
  9. package/lib/swatches/fluent-main.json +1 -1
  10. package/package.json +4 -4
  11. package/scss/action-buttons/_layout.scss +2 -55
  12. package/scss/action-buttons/_theme.scss +2 -11
  13. package/scss/action-buttons/_variables.scss +17 -7
  14. package/scss/action-sheet/_layout.scss +11 -399
  15. package/scss/action-sheet/_theme.scss +14 -69
  16. package/scss/action-sheet/_variables.scss +129 -66
  17. package/scss/adaptive/_index.scss +0 -3
  18. package/scss/adaptive/_layout.scss +2 -457
  19. package/scss/adaptive/_theme.scss +2 -75
  20. package/scss/adaptive/_variables.scss +39 -18
  21. package/scss/appbar/_layout.scss +2 -114
  22. package/scss/appbar/_theme.scss +9 -20
  23. package/scss/appbar/_variables.scss +38 -71
  24. package/scss/avatar/_layout.scss +2 -73
  25. package/scss/avatar/_theme.scss +2 -16
  26. package/scss/avatar/_variables.scss +24 -82
  27. package/scss/badge/_layout.scss +3 -146
  28. package/scss/badge/_theme.scss +8 -21
  29. package/scss/badge/_variables.scss +41 -88
  30. package/scss/bottom-navigation/_layout.scss +5 -108
  31. package/scss/bottom-navigation/_theme.scss +73 -74
  32. package/scss/bottom-navigation/_variables.scss +58 -117
  33. package/scss/breadcrumb/_layout.scss +8 -132
  34. package/scss/breadcrumb/_theme.scss +15 -71
  35. package/scss/breadcrumb/_variables.scss +133 -71
  36. package/scss/button/_layout.scss +18 -182
  37. package/scss/button/_theme.scss +132 -113
  38. package/scss/button/_variables.scss +156 -301
  39. package/scss/calendar/_layout.scss +27 -383
  40. package/scss/calendar/_theme.scss +55 -127
  41. package/scss/calendar/_variables.scss +185 -100
  42. package/scss/captcha/_layout.scss +2 -59
  43. package/scss/captcha/_theme.scss +2 -9
  44. package/scss/captcha/_variables.scss +25 -9
  45. package/scss/card/_layout.scss +9 -314
  46. package/scss/card/_theme.scss +3 -103
  47. package/scss/card/_variables.scss +110 -60
  48. package/scss/chart-wizard/_layout.scss +2 -38
  49. package/scss/chart-wizard/_theme.scss +2 -28
  50. package/scss/chart-wizard/_variables.scss +25 -11
  51. package/scss/chat/_index.scss +0 -3
  52. package/scss/chat/_layout.scss +26 -450
  53. package/scss/chat/_theme.scss +9 -80
  54. package/scss/chat/_variables.scss +143 -71
  55. package/scss/checkbox/_layout.scss +14 -191
  56. package/scss/checkbox/_theme.scss +11 -100
  57. package/scss/checkbox/_variables.scss +165 -78
  58. package/scss/chip/_layout.scss +11 -137
  59. package/scss/chip/_theme.scss +56 -57
  60. package/scss/chip/_variables.scss +99 -94
  61. package/scss/color-preview/_layout.scss +4 -64
  62. package/scss/color-preview/_theme.scss +2 -27
  63. package/scss/color-preview/_variables.scss +23 -9
  64. package/scss/coloreditor/_layout.scss +21 -109
  65. package/scss/coloreditor/_theme.scss +3 -24
  66. package/scss/coloreditor/_variables.scss +92 -57
  67. package/scss/colorgradient/_layout.scss +12 -196
  68. package/scss/colorgradient/_theme.scss +27 -65
  69. package/scss/colorgradient/_variables.scss +134 -76
  70. package/scss/colorpalette/_layout.scss +6 -40
  71. package/scss/colorpalette/_theme.scss +10 -20
  72. package/scss/colorpalette/_variables.scss +39 -21
  73. package/scss/colorpicker/_layout.scss +2 -11
  74. package/scss/colorpicker/_theme.scss +2 -1
  75. package/scss/column-menu/_layout.scss +5 -56
  76. package/scss/column-menu/_theme.scss +1 -24
  77. package/scss/column-menu/_variables.scss +38 -17
  78. package/scss/combobox/_layout.scss +4 -2
  79. package/scss/combobox/_theme.scss +4 -2
  80. package/scss/core/functions/index.import.scss +1 -0
  81. package/scss/dataviz/_layout.scss +6 -543
  82. package/scss/dataviz/_theme.scss +12 -76
  83. package/scss/dataviz/_variables.scss +152 -33
  84. package/scss/daterangepicker/_layout.scss +2 -37
  85. package/scss/daterangepicker/_theme.scss +16 -7
  86. package/scss/daterangepicker/_variables.scss +9 -0
  87. package/scss/datetimepicker/_layout.scss +3 -41
  88. package/scss/datetimepicker/_theme.scss +3 -2
  89. package/scss/datetimepicker/_variables.scss +5 -1
  90. package/scss/dialog/_layout.scss +8 -53
  91. package/scss/dialog/_theme.scss +5 -25
  92. package/scss/dialog/_variables.scss +31 -60
  93. package/scss/dock-manager/_layout.scss +9 -193
  94. package/scss/dock-manager/_theme.scss +6 -28
  95. package/scss/dock-manager/_variables.scss +74 -36
  96. package/scss/draggable/_layout.scss +13 -59
  97. package/scss/draggable/_theme.scss +10 -15
  98. package/scss/draggable/_variables.scss +45 -23
  99. package/scss/drawer/_layout.scss +7 -198
  100. package/scss/drawer/_theme.scss +25 -52
  101. package/scss/drawer/_variables.scss +73 -45
  102. package/scss/dropdowngrid/_layout.scss +3 -11
  103. package/scss/dropdowngrid/_theme.scss +3 -3
  104. package/scss/dropdownlist/_layout.scss +4 -28
  105. package/scss/dropdownlist/_theme.scss +3 -7
  106. package/scss/dropdowntree/_layout.scss +2 -35
  107. package/scss/dropdowntree/_theme.scss +3 -4
  108. package/scss/dropdowntree/_variables.scss +4 -3
  109. package/scss/dropzone/_layout.scss +7 -31
  110. package/scss/dropzone/_theme.scss +2 -30
  111. package/scss/dropzone/_variables.scss +43 -21
  112. package/scss/editor/_layout.scss +3 -588
  113. package/scss/editor/_theme.scss +12 -78
  114. package/scss/editor/_variables.scss +45 -26
  115. package/scss/expansion-panel/_layout.scss +22 -57
  116. package/scss/expansion-panel/_theme.scss +13 -36
  117. package/scss/expansion-panel/_variables.scss +49 -28
  118. package/scss/fab/_layout.scss +11 -134
  119. package/scss/fab/_theme.scss +37 -126
  120. package/scss/fab/_variables.scss +104 -56
  121. package/scss/filemanager/_layout.scss +2 -240
  122. package/scss/filemanager/_theme.scss +8 -89
  123. package/scss/filemanager/_variables.scss +109 -56
  124. package/scss/filter/_layout.scss +8 -71
  125. package/scss/filter/_theme.scss +5 -14
  126. package/scss/filter/_variables.scss +20 -10
  127. package/scss/floating-label/_layout.scss +3 -75
  128. package/scss/floating-label/_theme.scss +4 -20
  129. package/scss/floating-label/_variables.scss +35 -17
  130. package/scss/forms/_layout.scss +5 -302
  131. package/scss/forms/_theme.scss +5 -24
  132. package/scss/forms/_variables.scss +73 -39
  133. package/scss/gantt/_layout.scss +5 -801
  134. package/scss/gantt/_theme.scss +17 -236
  135. package/scss/gantt/_variables.scss +142 -73
  136. package/scss/grid/_layout.scss +60 -1276
  137. package/scss/grid/_theme.scss +35 -343
  138. package/scss/grid/_variables.scss +306 -183
  139. package/scss/gridlayout/_layout.scss +1 -6
  140. package/scss/gridlayout/_theme.scss +1 -6
  141. package/scss/icons/_layout.scss +4 -33
  142. package/scss/icons/_theme.scss +7 -1
  143. package/scss/icons/_variables.scss +35 -9
  144. package/scss/imageeditor/_layout.scss +2 -152
  145. package/scss/imageeditor/_theme.scss +5 -42
  146. package/scss/imageeditor/_variables.scss +66 -32
  147. package/scss/index.scss +2 -1
  148. package/scss/input/_layout.scss +36 -468
  149. package/scss/input/_theme.scss +52 -128
  150. package/scss/input/_variables.scss +153 -208
  151. package/scss/list/_layout.scss +3 -252
  152. package/scss/list/_theme.scss +10 -81
  153. package/scss/list/_variables.scss +176 -92
  154. package/scss/listbox/_layout.scss +2 -80
  155. package/scss/listbox/_theme.scss +5 -8
  156. package/scss/listbox/_variables.scss +28 -13
  157. package/scss/listgroup/_layout.scss +2 -174
  158. package/scss/listgroup/_theme.scss +2 -8
  159. package/scss/listgroup/_variables.scss +23 -10
  160. package/scss/listview/_layout.scss +6 -133
  161. package/scss/listview/_theme.scss +8 -37
  162. package/scss/listview/_variables.scss +66 -39
  163. package/scss/loader/_layout.scss +15 -572
  164. package/scss/loader/_theme.scss +2 -14
  165. package/scss/loader/_variables.scss +90 -92
  166. package/scss/map/_layout.scss +7 -121
  167. package/scss/map/_theme.scss +5 -17
  168. package/scss/map/_variables.scss +40 -22
  169. package/scss/maskedtextbox/_layout.scss +3 -3
  170. package/scss/maskedtextbox/_theme.scss +3 -3
  171. package/scss/mediaplayer/_layout.scss +5 -72
  172. package/scss/mediaplayer/_theme.scss +5 -15
  173. package/scss/mediaplayer/_variables.scss +27 -14
  174. package/scss/menu/_layout.scss +25 -267
  175. package/scss/menu/_theme.scss +14 -73
  176. package/scss/menu/_variables.scss +135 -76
  177. package/scss/menu-button/_layout.scss +9 -14
  178. package/scss/menu-button/_theme.scss +5 -1
  179. package/scss/menu-button/_variables.scss +10 -0
  180. package/scss/messagebox/_layout.scss +2 -18
  181. package/scss/messagebox/_theme.scss +4 -19
  182. package/scss/messagebox/_variables.scss +33 -37
  183. package/scss/multiselect/_layout.scss +3 -4
  184. package/scss/multiselect/_theme.scss +3 -4
  185. package/scss/no-data/_layout.scss +2 -17
  186. package/scss/no-data/_theme.scss +2 -5
  187. package/scss/no-data/_variables.scss +7 -2
  188. package/scss/notification/_functions.scss +17 -0
  189. package/scss/notification/_layout.scss +2 -68
  190. package/scss/notification/_theme.scss +4 -28
  191. package/scss/notification/_variables.scss +50 -91
  192. package/scss/numerictextbox/_layout.scss +3 -7
  193. package/scss/numerictextbox/_theme.scss +3 -3
  194. package/scss/orgchart/_layout.scss +8 -99
  195. package/scss/orgchart/_theme.scss +4 -45
  196. package/scss/orgchart/_variables.scss +87 -45
  197. package/scss/otp/_layout.scss +1 -34
  198. package/scss/otp/_theme.scss +1 -7
  199. package/scss/otp/_variables.scss +25 -12
  200. package/scss/overlay/_layout.scss +2 -11
  201. package/scss/overlay/_theme.scss +4 -3
  202. package/scss/overlay/_variables.scss +7 -3
  203. package/scss/pager/_layout.scss +11 -145
  204. package/scss/pager/_theme.scss +7 -15
  205. package/scss/pager/_variables.scss +49 -26
  206. package/scss/panel/_layout.scss +2 -24
  207. package/scss/panel/_theme.scss +10 -13
  208. package/scss/panel/_variables.scss +23 -10
  209. package/scss/panelbar/_layout.scss +17 -95
  210. package/scss/panelbar/_theme.scss +15 -164
  211. package/scss/panelbar/_variables.scss +134 -68
  212. package/scss/pdf-viewer/_layout.scss +3 -327
  213. package/scss/pdf-viewer/_theme.scss +2 -80
  214. package/scss/pdf-viewer/_variables.scss +75 -36
  215. package/scss/pivotgrid/_index.scss +0 -6
  216. package/scss/pivotgrid/_layout.scss +44 -579
  217. package/scss/pivotgrid/_theme.scss +5 -192
  218. package/scss/pivotgrid/_variables.scss +144 -70
  219. package/scss/popover/_layout.scss +6 -73
  220. package/scss/popover/_theme.scss +2 -36
  221. package/scss/popover/_variables.scss +54 -27
  222. package/scss/popup/_layout.scss +5 -70
  223. package/scss/popup/_theme.scss +2 -9
  224. package/scss/popup/_variables.scss +25 -12
  225. package/scss/progressbar/_layout.scss +10 -196
  226. package/scss/progressbar/_theme.scss +11 -46
  227. package/scss/progressbar/_variables.scss +57 -34
  228. package/scss/prompt/_layout.scss +2 -75
  229. package/scss/prompt/_theme.scss +2 -35
  230. package/scss/prompt/_variables.scss +43 -20
  231. package/scss/radio/_layout.scss +12 -178
  232. package/scss/radio/_theme.scss +7 -75
  233. package/scss/radio/_variables.scss +72 -36
  234. package/scss/rating/_layout.scss +11 -57
  235. package/scss/rating/_theme.scss +8 -6
  236. package/scss/rating/_variables.scss +21 -13
  237. package/scss/responsivepanel/_layout.scss +2 -45
  238. package/scss/responsivepanel/_theme.scss +3 -3
  239. package/scss/ripple/_layout.scss +2 -50
  240. package/scss/ripple/_theme.scss +2 -2
  241. package/scss/scheduler/_layout.scss +11 -773
  242. package/scss/scheduler/_theme.scss +32 -167
  243. package/scss/scheduler/_variables.scss +149 -77
  244. package/scss/scroller/_layout.scss +2 -80
  245. package/scss/scroller/_theme.scss +2 -5
  246. package/scss/scrollview/_layout.scss +2 -159
  247. package/scss/scrollview/_theme.scss +11 -35
  248. package/scss/scrollview/_variables.scss +52 -29
  249. package/scss/searchbox/_layout.scss +2 -0
  250. package/scss/searchbox/_theme.scss +4 -1
  251. package/scss/searchbox/_variables.scss +1 -1
  252. package/scss/signature/_layout.scss +3 -67
  253. package/scss/signature/_theme.scss +3 -8
  254. package/scss/signature/_variables.scss +46 -25
  255. package/scss/skeleton/_layout.scss +2 -79
  256. package/scss/skeleton/_theme.scss +2 -17
  257. package/scss/skeleton/_variables.scss +15 -6
  258. package/scss/slider/_layout.scss +18 -203
  259. package/scss/slider/_theme.scss +31 -40
  260. package/scss/slider/_variables.scss +58 -41
  261. package/scss/speech-to-text-button/_layout.scss +1 -9
  262. package/scss/speech-to-text-button/_theme.scss +1 -3
  263. package/scss/split-button/_layout.scss +22 -18
  264. package/scss/split-button/_theme.scss +2 -1
  265. package/scss/split-button/_variables.scss +18 -9
  266. package/scss/splitter/_layout.scss +8 -171
  267. package/scss/splitter/_theme.scss +2 -31
  268. package/scss/splitter/_variables.scss +42 -20
  269. package/scss/spreadsheet/_layout.scss +50 -724
  270. package/scss/spreadsheet/_theme.scss +14 -182
  271. package/scss/spreadsheet/_variables.scss +172 -99
  272. package/scss/stacklayout/_layout.scss +1 -5
  273. package/scss/stacklayout/_theme.scss +1 -5
  274. package/scss/stepper/_layout.scss +9 -255
  275. package/scss/stepper/_theme.scss +4 -186
  276. package/scss/stepper/_variables.scss +125 -60
  277. package/scss/suggestion/_layout.scss +2 -38
  278. package/scss/suggestion/_theme.scss +3 -66
  279. package/scss/suggestion/_variables.scss +42 -19
  280. package/scss/switch/_layout.scss +2 -138
  281. package/scss/switch/_theme.scss +2 -136
  282. package/scss/switch/_variables.scss +99 -49
  283. package/scss/table/_layout.scss +6 -249
  284. package/scss/table/_theme.scss +9 -95
  285. package/scss/table/_variables.scss +100 -64
  286. package/scss/tabstrip/_layout.scss +2 -421
  287. package/scss/tabstrip/_theme.scss +12 -123
  288. package/scss/tabstrip/_variables.scss +113 -61
  289. package/scss/taskboard/_layout.scss +28 -178
  290. package/scss/taskboard/_theme.scss +20 -55
  291. package/scss/taskboard/_variables.scss +122 -63
  292. package/scss/textarea/_layout.scss +3 -6
  293. package/scss/textarea/_theme.scss +3 -4
  294. package/scss/textbox/_layout.scss +3 -4
  295. package/scss/textbox/_theme.scss +3 -4
  296. package/scss/tilelayout/_layout.scss +2 -36
  297. package/scss/tilelayout/_theme.scss +13 -10
  298. package/scss/tilelayout/_variables.scss +19 -8
  299. package/scss/time-marker/_layout.scss +2 -15
  300. package/scss/time-marker/_theme.scss +2 -17
  301. package/scss/time-marker/_variables.scss +7 -2
  302. package/scss/timedurationpicker/_layout.scss +3 -4
  303. package/scss/timedurationpicker/_theme.scss +3 -4
  304. package/scss/timeline/_layout.scss +8 -423
  305. package/scss/timeline/_theme.scss +11 -34
  306. package/scss/timeline/_variables.scss +108 -61
  307. package/scss/timepicker/_layout.scss +7 -3
  308. package/scss/timepicker/_theme.scss +3 -4
  309. package/scss/timeselector/_layout.scss +3 -223
  310. package/scss/timeselector/_theme.scss +5 -55
  311. package/scss/timeselector/_variables.scss +84 -41
  312. package/scss/toolbar/_layout.scss +11 -296
  313. package/scss/toolbar/_theme.scss +3 -167
  314. package/scss/toolbar/_variables.scss +65 -32
  315. package/scss/tooltip/_functions.scss +17 -0
  316. package/scss/tooltip/_layout.scss +13 -74
  317. package/scss/tooltip/_theme.scss +17 -23
  318. package/scss/tooltip/_variables.scss +50 -72
  319. package/scss/treelist/_layout.scss +3 -82
  320. package/scss/treelist/_theme.scss +4 -6
  321. package/scss/treelist/_variables.scss +7 -2
  322. package/scss/treeview/_layout.scss +8 -137
  323. package/scss/treeview/_theme.scss +20 -65
  324. package/scss/treeview/_variables.scss +88 -48
  325. package/scss/typography/_layout.scss +3 -113
  326. package/scss/typography/_theme.scss +2 -17
  327. package/scss/typography/_variables.scss +84 -3
  328. package/scss/upload/_layout.scss +7 -219
  329. package/scss/upload/_theme.scss +4 -90
  330. package/scss/upload/_variables.scss +66 -29
  331. package/scss/validator/_layout.scss +2 -16
  332. package/scss/validator/_theme.scss +2 -2
  333. package/scss/virtual-scroller/_layout.scss +2 -34
  334. package/scss/virtual-scroller/_theme.scss +2 -2
  335. package/scss/window/_layout.scss +9 -141
  336. package/scss/window/_theme.scss +7 -35
  337. package/scss/window/_variables.scss +65 -70
  338. package/scss/wizard/_layout.scss +8 -95
  339. package/scss/wizard/_theme.scss +4 -7
  340. package/scss/wizard/_variables.scss +24 -11
package/scss/stepper/_variables.scss CHANGED
@@ -3,202 +3,267 @@
3
3
 
4
4
  /// The width of the border around the Stepper.
5
5
  /// @group stepper
6
- $kendo-stepper-border-width: 0px !default;
6
+ $kendo-stepper-border-width: var( --kendo-stepper-border-width, 0px ) !default;
7
7
  // The font size of the Stepper.
8
8
  /// @group stepper
9
- $kendo-stepper-font-size: var( --kendo-font-size, inherit ) !default;
9
+ $kendo-stepper-font-size: var( --kendo-stepper-font-size, var( --kendo-font-size, inherit ) ) !default;
10
10
  // The font family of the Stepper.
11
11
  /// @group stepper
12
- $kendo-stepper-font-family: var( --kendo-font-family, inherit ) !default;
12
+ $kendo-stepper-font-family: var( --kendo-stepper-font-family, var( --kendo-font-family, inherit ) ) !default;
13
13
  // The line height of the Stepper.
14
14
  /// @group stepper
15
- $kendo-stepper-line-height: var( --kendo-line-height, normal ) !default;
15
+ $kendo-stepper-line-height: var( --kendo-stepper-line-height, var( --kendo-line-height, normal ) ) !default;
16
16
 
17
17
  /// The background color of the Stepper.
18
18
  /// @group stepper
19
- $kendo-stepper-bg: transparent !default;
19
+ $kendo-stepper-bg: var( --kendo-stepper-bg, transparent ) !default;
20
20
  /// The text color of the Stepper.
21
21
  /// @group stepper
22
- $kendo-stepper-text: k-color(on-app-surface) !default;
22
+ $kendo-stepper-text: var( --kendo-stepper-text, k-color(on-app-surface) ) !default;
23
23
  /// The border color of the Stepper.
24
24
  /// @group stepper
25
- $kendo-stepper-border: transparent !default;
25
+ $kendo-stepper-border: var( --kendo-stepper-border, transparent ) !default;
26
26
 
27
27
  /// The horizontal margin the Stepper label.
28
28
  /// @group stepper
29
- $kendo-stepper-label-margin-x: k-spacing(2) !default;
29
+ $kendo-stepper-label-margin-x: var( --kendo-stepper-label-margin-x, k-spacing(2) ) !default;
30
30
  /// The horizontal padding the Stepper label.
31
31
  /// @group stepper
32
- $kendo-stepper-label-padding-x: k-spacing(3) !default;
32
+ $kendo-stepper-label-padding-x: var( --kendo-stepper-label-padding-x, k-spacing(3) ) !default;
33
33
  /// The vertical padding the Stepper label.
34
34
  /// @group stepper
35
- $kendo-stepper-label-padding-y: k-spacing(1.5) !default;
35
+ $kendo-stepper-label-padding-y: var( --kendo-stepper-label-padding-y, k-spacing(1.5) ) !default;
36
36
  /// The border radius of the Stepper label.
37
37
  /// @group stepper
38
- $kendo-stepper-label-border-radius: k-border-radius(xxl) !default;
38
+ $kendo-stepper-label-border-radius: var( --kendo-stepper-label-border-radius, k-border-radius(xxl) ) !default;
39
39
 
40
40
  /// The horizontal padding of the Stepper content.
41
41
  /// @group stepper
42
- $kendo-stepper-inline-content-padding-x: k-spacing(5) !default;
42
+ $kendo-stepper-inline-content-padding-x: var( --kendo-stepper-inline-content-padding-x, k-spacing(5) ) !default;
43
43
  /// The vertical padding of the Stepper content.
44
44
  /// @group stepper
45
- $kendo-stepper-inline-content-padding-y: k-spacing(3) !default;
45
+ $kendo-stepper-inline-content-padding-y: var( --kendo-stepper-inline-content-padding-y, k-spacing(3) ) !default;
46
46
 
47
47
  /// The width of the Stepper indicator.
48
48
  /// @group stepper
49
- $kendo-stepper-indicator-width: k-spacing(7.5) !default;
49
+ $kendo-stepper-indicator-width: var( --kendo-stepper-indicator-width, k-spacing(7.5) ) !default;
50
50
  /// The height of the Stepper indicator.
51
51
  /// @group stepper
52
- $kendo-stepper-indicator-height: $kendo-stepper-indicator-width !default;
52
+ $kendo-stepper-indicator-height: var( --kendo-stepper-indicator-height, $kendo-stepper-indicator-width ) !default;
53
53
  /// The border width of the Stepper indicator.
54
54
  /// @group stepper
55
- $kendo-stepper-indicator-border-width: 1px !default;
55
+ $kendo-stepper-indicator-border-width: var( --kendo-stepper-indicator-border-width, 1px ) !default;
56
56
  /// The border radius of the Stepper indicator.
57
57
  /// @group stepper
58
- $kendo-stepper-indicator-border-radius: 50% !default;
58
+ $kendo-stepper-indicator-border-radius: var( --kendo-stepper-indicator-border-radius, 50% ) !default;
59
59
 
60
60
  /// The border width of the focused Stepper indicator.
61
61
  /// @group stepper
62
- $kendo-stepper-indicator-focus-border-width: $kendo-stepper-indicator-border-width !default;
62
+ $kendo-stepper-indicator-focus-border-width: var( --kendo-stepper-indicator-focus-border-width, $kendo-stepper-indicator-border-width ) !default;
63
63
  /// The size of the focused Stepper indicator.
64
64
  /// @group stepper
65
- $kendo-stepper-indicator-focus-size: k-spacing(0.5) !default;
65
+ $kendo-stepper-indicator-focus-size: var( --kendo-stepper-indicator-focus-size, k-spacing(0.5) ) !default;
66
66
  /// The offset of the Stepper's focused indicator.
67
67
  /// @group stepper
68
68
  $kendo-stepper-indicator-focus-offset: 3px !default;
69
69
  /// The calculated offset of the Stepper's focused indicator.
70
70
  /// @group stepper
71
- $kendo-stepper-indicator-focus-calc-offset: calc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} ) !default;
71
+ $kendo-stepper-indicator-focus-calc-offset: var( --kendo-stepper-indicator-focus-calc-offset, calc( #{$kendo-stepper-indicator-focus-border-width} + #{$kendo-stepper-indicator-focus-offset} ) ) !default;
72
72
 
73
73
  /// The background color of the Stepper indicator.
74
74
  /// @group stepper
75
- $kendo-stepper-indicator-bg: k-color(surface-alt) !default;
75
+ $kendo-stepper-indicator-bg: var( --kendo-stepper-indicator-bg, k-color(surface-alt) ) !default;
76
76
  /// The text color of the Stepper indicator.
77
77
  /// @group stepper
78
- $kendo-stepper-indicator-text: k-color(on-app-surface) !default;
78
+ $kendo-stepper-indicator-text: var( --kendo-stepper-indicator-text, k-color(on-app-surface) ) !default;
79
79
  /// The border color of the Stepper indicator.
80
80
  /// @group stepper
81
- $kendo-stepper-indicator-border: k-color(border) !default;
81
+ $kendo-stepper-indicator-border: var( --kendo-stepper-indicator-border, k-color(border) ) !default;
82
82
 
83
83
  /// The background color of the hovered Stepper indicator.
84
84
  /// @group stepper
85
- $kendo-stepper-indicator-hover-bg: k-color(base-hover) !default;
85
+ $kendo-stepper-indicator-hover-bg: var( --kendo-stepper-indicator-hover-bg, k-color(base-hover) ) !default;
86
86
  /// The text color of the hovered Stepper indicator.
87
87
  /// @group stepper
88
- $kendo-stepper-indicator-hover-text: k-color(on-base) !default;
88
+ $kendo-stepper-indicator-hover-text: var( --kendo-stepper-indicator-hover-text, k-color(on-base) ) !default;
89
89
  /// The border color of the hovered Stepper indicator.
90
90
  /// @group stepper
91
- $kendo-stepper-indicator-hover-border: $kendo-stepper-indicator-border !default;
91
+ $kendo-stepper-indicator-hover-border: var( --kendo-stepper-indicator-hover-border, $kendo-stepper-indicator-border ) !default;
92
92
 
93
93
  /// The background color of the disabled Stepper indicator.
94
94
  /// @group stepper
95
- $kendo-stepper-indicator-disabled-bg: k-color(base-subtle) !default;
95
+ $kendo-stepper-indicator-disabled-bg: var( --kendo-stepper-indicator-disabled-bg, k-color(base-subtle) ) !default;
96
96
  /// The text color of the disabled Stepper indicator.
97
97
  /// @group stepper
98
- $kendo-stepper-indicator-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
98
+ $kendo-stepper-indicator-disabled-text: var( --kendo-stepper-indicator-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
99
99
  /// The border color of the disabled Stepper indicator.
100
100
  /// @group stepper
101
- $kendo-stepper-indicator-disabled-border: transparent !default;
101
+ $kendo-stepper-indicator-disabled-border: var( --kendo-stepper-indicator-disabled-border, transparent ) !default;
102
102
 
103
103
  /// The background color of the Stepper's done indicator.
104
104
  /// @group stepper
105
- $kendo-stepper-indicator-done-bg: k-color(primary) !default;
105
+ $kendo-stepper-indicator-done-bg: var( --kendo-stepper-indicator-done-bg, k-color(primary) ) !default;
106
106
  /// The text color of the Stepper's done indicator.
107
107
  /// @group stepper
108
- $kendo-stepper-indicator-done-text: k-color(on-primary) !default;
108
+ $kendo-stepper-indicator-done-text: var( --kendo-stepper-indicator-done-text, k-color(on-primary) ) !default;
109
109
  /// The border color of the Stepper's done indicator.
110
110
  /// @group stepper
111
- $kendo-stepper-indicator-done-border: $kendo-stepper-indicator-done-bg !default;
111
+ $kendo-stepper-indicator-done-border: var( --kendo-stepper-indicator-done-border, $kendo-stepper-indicator-done-bg ) !default;
112
112
 
113
113
  /// The background color of the Stepper's hovered done indicator.
114
114
  /// @group stepper
115
- $kendo-stepper-indicator-done-hover-bg: k-color(primary-hover) !default;
115
+ $kendo-stepper-indicator-done-hover-bg: var( --kendo-stepper-indicator-done-hover-bg, k-color(primary-hover) ) !default;
116
116
  /// The text color of the Stepper's hovered done indicator.
117
117
  /// @group stepper
118
- $kendo-stepper-indicator-done-hover-text: $kendo-stepper-indicator-done-text !default;
118
+ $kendo-stepper-indicator-done-hover-text: var( --kendo-stepper-indicator-done-hover-text, $kendo-stepper-indicator-done-text ) !default;
119
119
  /// The border color of the Stepper's hovered done indicator.
120
120
  /// @group stepper
121
- $kendo-stepper-indicator-done-hover-border: $kendo-stepper-indicator-done-hover-bg !default;
121
+ $kendo-stepper-indicator-done-hover-border: var( --kendo-stepper-indicator-done-hover-border, $kendo-stepper-indicator-done-hover-bg ) !default;
122
122
 
123
123
  /// The background color of the Stepper's disabled done indicator.
124
124
  /// @group stepper
125
- $kendo-stepper-indicator-done-disabled-bg: color-mix(in srgb, k-color(primary) 22%, transparent) !default;
125
+ $kendo-stepper-indicator-done-disabled-bg: var( --kendo-stepper-indicator-done-disabled-bg, color-mix(in srgb, k-color(primary) 22%, transparent) ) !default;
126
126
  /// The text color of the Stepper's disabled done indicator.
127
127
  /// @group stepper
128
- $kendo-stepper-indicator-done-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
128
+ $kendo-stepper-indicator-done-disabled-text: var( --kendo-stepper-indicator-done-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
129
129
  /// The border color of the Stepper's disabled done indicator.
130
130
  /// @group stepper
131
- $kendo-stepper-indicator-done-disabled-border: transparent !default;
131
+ $kendo-stepper-indicator-done-disabled-border: var( --kendo-stepper-indicator-done-disabled-border, transparent ) !default;
132
132
 
133
133
  /// The background color of the Stepper current indicator.
134
134
  /// @group stepper
135
- $kendo-stepper-indicator-current-bg: k-color(primary-active) !default;
135
+ $kendo-stepper-indicator-current-bg: var( --kendo-stepper-indicator-current-bg, k-color(primary-active) ) !default;
136
136
  /// The text color of the Stepper current indicator.
137
137
  /// @group stepper
138
- $kendo-stepper-indicator-current-text: $kendo-stepper-indicator-done-text !default;
138
+ $kendo-stepper-indicator-current-text: var( --kendo-stepper-indicator-current-text, $kendo-stepper-indicator-done-text ) !default;
139
139
  /// The border color of the Stepper current indicator.
140
140
  /// @group stepper
141
- $kendo-stepper-indicator-current-border: $kendo-stepper-indicator-current-bg !default;
141
+ $kendo-stepper-indicator-current-border: var( --kendo-stepper-indicator-current-border, $kendo-stepper-indicator-current-bg ) !default;
142
142
 
143
143
  /// The background color of the Stepper's hovered current indicator.
144
144
  /// @group stepper
145
- $kendo-stepper-indicator-current-hover-bg: $kendo-stepper-indicator-done-hover-bg !default;
145
+ $kendo-stepper-indicator-current-hover-bg: var( --kendo-stepper-indicator-current-hover-bg, $kendo-stepper-indicator-done-hover-bg ) !default;
146
146
  /// The text color of the Stepper's hovered current indicator.
147
147
  /// @group stepper
148
- $kendo-stepper-indicator-current-hover-text: $kendo-stepper-indicator-done-hover-text !default;
148
+ $kendo-stepper-indicator-current-hover-text: var( --kendo-stepper-indicator-current-hover-text, $kendo-stepper-indicator-done-hover-text ) !default;
149
149
  /// The border color of the Stepper's hovered current indicator.
150
150
  /// @group stepper
151
- $kendo-stepper-indicator-current-hover-border: $kendo-stepper-indicator-done-hover-border !default;
151
+ $kendo-stepper-indicator-current-hover-border: var( --kendo-stepper-indicator-current-hover-border, $kendo-stepper-indicator-done-hover-border ) !default;
152
152
 
153
153
  /// The background color of the Stepper's disabled current indicator.
154
154
  /// @group stepper
155
- $kendo-stepper-indicator-current-disabled-bg: $kendo-stepper-indicator-done-disabled-bg !default;
155
+ $kendo-stepper-indicator-current-disabled-bg: var( --kendo-stepper-indicator-current-disabled-bg, $kendo-stepper-indicator-done-disabled-bg ) !default;
156
156
  /// The text color of the Stepper's disabled current indicator.
157
157
  /// @group stepper
158
- $kendo-stepper-indicator-current-disabled-text: $kendo-stepper-indicator-done-disabled-text !default;
158
+ $kendo-stepper-indicator-current-disabled-text: var( --kendo-stepper-indicator-current-disabled-text, $kendo-stepper-indicator-done-disabled-text ) !default;
159
159
  /// The border color of the Stepper's disabled current indicator.
160
160
  /// @group stepper
161
- $kendo-stepper-indicator-current-disabled-border: $kendo-stepper-indicator-done-disabled-border !default;
161
+ $kendo-stepper-indicator-current-disabled-border: var( --kendo-stepper-indicator-current-disabled-border, $kendo-stepper-indicator-done-disabled-border ) !default;
162
162
 
163
163
  /// The text color of the Stepper label.
164
164
  /// @group stepper
165
- $kendo-stepper-label-text: inherit !default;
165
+ $kendo-stepper-label-text: var( --kendo-stepper-label-text, inherit ) !default;
166
166
  /// The success text color of the Stepper label.
167
167
  /// @group stepper
168
- $kendo-stepper-label-success-text: k-color(success-on-surface) !default;
168
+ $kendo-stepper-label-success-text: var( --kendo-stepper-label-success-text, k-color(success-on-surface) ) !default;
169
169
  /// The error text color of the Stepper label.
170
170
  /// @group stepper
171
- $kendo-stepper-label-error-text: k-color(error-on-surface) !default;
171
+ $kendo-stepper-label-error-text: var( --kendo-stepper-label-error-text, k-color(error-on-surface) ) !default;
172
172
  /// The text color of the hovered Stepper label.
173
173
  /// @group stepper
174
- $kendo-stepper-label-hover-text: $kendo-stepper-text !default;
174
+ $kendo-stepper-label-hover-text: var( --kendo-stepper-label-hover-text, $kendo-stepper-text ) !default;
175
175
  /// The text color of the disabled Stepper label.
176
176
  /// @group stepper
177
- $kendo-stepper-label-disabled-text: color-mix(in srgb, k-color(on-app-surface) 46%, transparent) !default;
177
+ $kendo-stepper-label-disabled-text: var( --kendo-stepper-label-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
178
178
  /// The font weight of the disabled Stepper label.
179
179
  /// @group stepper
180
- $kendo-stepper-current-label-font-weight: var( --kendo-font-weight-bold, bold ) !default;
180
+ $kendo-stepper-current-label-font-weight: var( --kendo-stepper-current-label-font-weight, var( --kendo-font-weight-bold, bold ) ) !default;
181
181
 
182
182
  /// The text color of the optional Stepper label.
183
183
  /// @group stepper
184
- $kendo-stepper-optional-label-text: k-color(subtle) !default;
184
+ $kendo-stepper-optional-label-text: var( --kendo-stepper-optional-label-text, k-color(subtle) ) !default;
185
185
  /// The font size of the optional Stepper label.
186
186
  /// @group stepper
187
- $kendo-stepper-optional-label-font-size: inherit !default;
187
+ $kendo-stepper-optional-label-font-size: var( --kendo-stepper-optional-label-font-size, inherit ) !default;
188
188
  /// The font style of the optional Stepper label.
189
189
  /// @group stepper
190
- $kendo-stepper-optional-label-font-style: italic !default;
190
+ $kendo-stepper-optional-label-font-style: var( --kendo-stepper-optional-label-font-style, italic ) !default;
191
191
 
192
192
  /// The size of the Stepper ProgressBar.
193
193
  /// @group stepper
194
- $kendo-stepper-progressbar-size: k-spacing(0.5) !default;
194
+ $kendo-stepper-progressbar-size: var( --kendo-stepper-progressbar-size, k-spacing(0.5) ) !default;
195
195
 
196
196
  /// The property name of the Stepper transition.
197
197
  /// @group stepper
198
- $kendo-stepper-content-transition-property: none !default;
198
+ $kendo-stepper-content-transition-property: var( --kendo-stepper-content-transition-property, none ) !default;
199
199
  /// The duration of the Stepper transition.
200
200
  /// @group stepper
201
- $kendo-stepper-content-transition-duration: 300ms !default;
201
+ $kendo-stepper-content-transition-duration: var( --kendo-stepper-content-transition-duration, 300ms ) !default;
202
202
  /// The timing function of the Stepper transition.
203
203
  /// @group stepper
204
- $kendo-stepper-content-transition-timing-function: cubic-bezier(.4, 0, .2, 1) 0ms !default;
204
+ /// The timing function of the Stepper transition.
205
+ /// @group stepper
206
+ $kendo-stepper-content-transition-timing-function: var( --kendo-stepper-content-transition-timing-function, cubic-bezier(.4, 0, .2, 1) 0ms ) !default;
207
+
208
+ @forward "@progress/kendo-theme-core/scss/components/stepper/_variables.scss" with (
209
+ $kendo-stepper-label-margin-x: $kendo-stepper-label-margin-x,
210
+ $kendo-stepper-label-padding-x: $kendo-stepper-label-padding-x,
211
+ $kendo-stepper-label-padding-y: $kendo-stepper-label-padding-y,
212
+ $kendo-stepper-label-border-radius: $kendo-stepper-label-border-radius,
213
+ $kendo-stepper-border-width: $kendo-stepper-border-width,
214
+ $kendo-stepper-inline-content-padding-x: $kendo-stepper-inline-content-padding-x,
215
+ $kendo-stepper-inline-content-padding-y: $kendo-stepper-inline-content-padding-y,
216
+ $kendo-stepper-font-size: $kendo-stepper-font-size,
217
+ $kendo-stepper-line-height: $kendo-stepper-line-height,
218
+ $kendo-stepper-font-family: $kendo-stepper-font-family,
219
+ $kendo-stepper-bg: $kendo-stepper-bg,
220
+ $kendo-stepper-text: $kendo-stepper-text,
221
+ $kendo-stepper-border: $kendo-stepper-border,
222
+ $kendo-stepper-indicator-width: $kendo-stepper-indicator-width,
223
+ $kendo-stepper-indicator-height: $kendo-stepper-indicator-height,
224
+ $kendo-stepper-indicator-border-width: $kendo-stepper-indicator-border-width,
225
+ $kendo-stepper-indicator-border-radius: $kendo-stepper-indicator-border-radius,
226
+ $kendo-stepper-indicator-focus-border-width: $kendo-stepper-indicator-focus-border-width,
227
+ $kendo-stepper-indicator-focus-size: $kendo-stepper-indicator-focus-size,
228
+ $kendo-stepper-indicator-focus-offset: $kendo-stepper-indicator-focus-offset,
229
+ $kendo-stepper-indicator-focus-calc-offset: $kendo-stepper-indicator-focus-calc-offset,
230
+ $kendo-stepper-indicator-bg: $kendo-stepper-indicator-bg,
231
+ $kendo-stepper-indicator-text: $kendo-stepper-indicator-text,
232
+ $kendo-stepper-indicator-border: $kendo-stepper-indicator-border,
233
+ $kendo-stepper-indicator-hover-bg: $kendo-stepper-indicator-hover-bg,
234
+ $kendo-stepper-indicator-hover-text: $kendo-stepper-indicator-hover-text,
235
+ $kendo-stepper-indicator-hover-border: $kendo-stepper-indicator-hover-border,
236
+ $kendo-stepper-indicator-disabled-bg: $kendo-stepper-indicator-disabled-bg,
237
+ $kendo-stepper-indicator-disabled-text: $kendo-stepper-indicator-disabled-text,
238
+ $kendo-stepper-indicator-disabled-border: $kendo-stepper-indicator-disabled-border,
239
+ $kendo-stepper-indicator-done-bg: $kendo-stepper-indicator-done-bg,
240
+ $kendo-stepper-indicator-done-text: $kendo-stepper-indicator-done-text,
241
+ $kendo-stepper-indicator-done-border: $kendo-stepper-indicator-done-border,
242
+ $kendo-stepper-indicator-done-hover-bg: $kendo-stepper-indicator-done-hover-bg,
243
+ $kendo-stepper-indicator-done-hover-text: $kendo-stepper-indicator-done-hover-text,
244
+ $kendo-stepper-indicator-done-hover-border: $kendo-stepper-indicator-done-hover-border,
245
+ $kendo-stepper-indicator-done-disabled-bg: $kendo-stepper-indicator-done-disabled-bg,
246
+ $kendo-stepper-indicator-done-disabled-text: $kendo-stepper-indicator-done-disabled-text,
247
+ $kendo-stepper-indicator-done-disabled-border: $kendo-stepper-indicator-done-disabled-border,
248
+ $kendo-stepper-indicator-current-bg: $kendo-stepper-indicator-current-bg,
249
+ $kendo-stepper-indicator-current-text: $kendo-stepper-indicator-current-text,
250
+ $kendo-stepper-indicator-current-border: $kendo-stepper-indicator-current-border,
251
+ $kendo-stepper-indicator-current-hover-bg: $kendo-stepper-indicator-current-hover-bg,
252
+ $kendo-stepper-indicator-current-hover-text: $kendo-stepper-indicator-current-hover-text,
253
+ $kendo-stepper-indicator-current-hover-border: $kendo-stepper-indicator-current-hover-border,
254
+ $kendo-stepper-indicator-current-disabled-bg: $kendo-stepper-indicator-current-disabled-bg,
255
+ $kendo-stepper-indicator-current-disabled-text: $kendo-stepper-indicator-current-disabled-text,
256
+ $kendo-stepper-indicator-current-disabled-border: $kendo-stepper-indicator-current-disabled-border,
257
+ $kendo-stepper-label-text: $kendo-stepper-label-text,
258
+ $kendo-stepper-label-success-text: $kendo-stepper-label-success-text,
259
+ $kendo-stepper-label-error-text: $kendo-stepper-label-error-text,
260
+ $kendo-stepper-label-hover-text: $kendo-stepper-label-hover-text,
261
+ $kendo-stepper-label-disabled-text: $kendo-stepper-label-disabled-text,
262
+ $kendo-stepper-optional-label-text: $kendo-stepper-optional-label-text,
263
+ $kendo-stepper-optional-label-font-size: $kendo-stepper-optional-label-font-size,
264
+ $kendo-stepper-optional-label-font-style: $kendo-stepper-optional-label-font-style,
265
+ $kendo-stepper-progressbar-size: $kendo-stepper-progressbar-size,
266
+ $kendo-stepper-content-transition-property: $kendo-stepper-content-transition-property,
267
+ $kendo-stepper-content-transition-duration: $kendo-stepper-content-transition-duration,
268
+ $kendo-stepper-content-transition-timing-function: $kendo-stepper-content-transition-timing-function
269
+ );
package/scss/suggestion/_layout.scss CHANGED
@@ -1,43 +1,7 @@
1
1
  @use "./_variables.scss" as *;
2
2
  @use "../core/_index.scss" as *;
3
+ @use "@progress/kendo-theme-core/scss/components/suggestion/_layout.scss" as *;
3
4
 
4
5
  @mixin kendo-suggestion--layout() {
5
- .k-suggestion-scrollwrap {
6
- width: 100%;
7
- box-sizing: border-box;
8
- display: flex;
9
- align-items: center;
10
- position: relative;
11
- overflow: hidden;
12
- gap: $kendo-suggestion-spacing;
13
-
14
- .k-suggestion-group {
15
- padding-block: $kendo-suggestion-padding-y;
16
- flex: 1 1 auto;
17
- flex-wrap: nowrap;
18
- overflow: hidden;
19
- white-space: nowrap;
20
- }
21
- }
22
-
23
- .k-suggestion-group {
24
- display: flex;
25
- flex-wrap: wrap;
26
- gap: $kendo-suggestion-spacing;
27
-
28
- }
29
- .k-suggestion {
30
- @include border-radius( $kendo-suggestion-border-radius );
31
- padding-block: $kendo-suggestion-padding-y;
32
- padding-inline: $kendo-suggestion-padding-x;
33
- box-sizing: border-box;
34
- border-width: $kendo-suggestion-border-width;
35
- border-style: $kendo-suggestion-border-style;
36
- line-height: $kendo-suggestion-line-height;
37
- flex: 0 0 auto;
38
- transition-property: color, background-color, border-color;
39
- transition-duration: .2s;
40
- transition-timing-function: ease-in-out;
41
- outline: none;
42
- }
6
+ @include kendo-suggestion--layout-base();
43
7
  }
package/scss/suggestion/_theme.scss CHANGED
@@ -1,32 +1,11 @@
1
1
  @use "./_variables.scss" as *;
2
2
  @use "../core/_index.scss" as *;
3
+ @use "@progress/kendo-theme-core/scss/components/suggestion/_theme.scss" as *;
3
4
 
4
5
  @mixin kendo-suggestion--theme() {
5
- .k-suggestion {
6
- @include fill(
7
- $kendo-suggestion-text,
8
- $kendo-suggestion-bg,
9
- $kendo-suggestion-border
10
- );
11
-
12
- &:hover,
13
- &.k-hover {
14
- @include fill(
15
- $kendo-suggestion-hover-text,
16
- $kendo-suggestion-hover-bg,
17
- $kendo-suggestion-hover-border
18
- );
19
- }
20
-
21
- &:active,
22
- &.k-active {
23
- @include fill(
24
- $kendo-suggestion-active-text,
25
- $kendo-suggestion-active-bg,
26
- $kendo-suggestion-active-border
27
- );
28
- }
6
+ @include kendo-suggestion--theme-base();
29
7
 
8
+ .k-suggestion {
30
9
  &:focus,
31
10
  &.k-focus {
32
11
  outline: 1px solid k-color(surface);
@@ -34,46 +13,4 @@
34
13
  box-shadow: inset 0 0 $kendo-suggestion-focus-shadow-blur $kendo-suggestion-focus-shadow-spread $kendo-suggestion-focus-shadow-color;
35
14
  }
36
15
  }
37
-
38
- @each $name, $props in $kendo-suggestion-theme-colors {
39
-
40
- $_suggestion-text: k-color(#{$name}-on-subtle);
41
- $_suggestion-bg: k-color(#{$name}-subtle);
42
- $_suggestion-border: k-color(#{$name}-emphasis);
43
-
44
- $_suggestion-hover-text: k-color(#{$name}-on-subtle);
45
- $_suggestion-hover-bg: k-color(#{$name}-subtle-hover);
46
- $_suggestion-hover-border: k-color(#{$name}-emphasis);
47
-
48
- $_suggestion-active-text: k-color(#{$name}-on-subtle);
49
- $_suggestion-active-bg: k-color(#{$name}-subtle-active);
50
- $_suggestion-active-border: k-color(#{$name}-emphasis);
51
-
52
-
53
- .k-suggestion-#{$name} {
54
- @include fill(
55
- $_suggestion-text,
56
- $_suggestion-bg,
57
- $_suggestion-border
58
- );
59
-
60
- &:hover,
61
- &.k-hover {
62
- @include fill(
63
- $_suggestion-hover-text,
64
- $_suggestion-hover-bg,
65
- $_suggestion-hover-border
66
- );
67
- }
68
-
69
- &:active,
70
- &.k-active {
71
- @include fill(
72
- $_suggestion-active-text,
73
- $_suggestion-active-bg,
74
- $_suggestion-active-border
75
- );
76
- }
77
- }
78
- }
79
16
  }
package/scss/suggestion/_variables.scss CHANGED
@@ -3,68 +3,91 @@
3
3
 
4
4
  /// The vertical padding of the Suggestion wrapper.
5
5
  /// @group suggestion
6
- $kendo-suggestion-padding-y: k-spacing(2) !default;
6
+ $kendo-suggestion-padding-y: var( --kendo-suggestion-padding-y, #{k-spacing(2)} ) !default;
7
7
  /// The horizontal padding of the Suggestion wrapper.
8
8
  /// @group suggestion
9
- $kendo-suggestion-padding-x: k-spacing(3) !default;
9
+ $kendo-suggestion-padding-x: var( --kendo-suggestion-padding-x, #{k-spacing(3)} ) !default;
10
10
  /// The horizontal padding of the Suggestion wrapper.
11
11
  /// @group suggestion
12
- $kendo-suggestion-spacing: k-spacing(2) !default;
12
+ $kendo-suggestion-spacing: var( --kendo-suggestion-spacing, #{k-spacing(2)} ) !default;
13
13
  /// The border width of the Suggestion.
14
14
  /// @group suggestion
15
- $kendo-suggestion-border-width: 1px !default;
15
+ $kendo-suggestion-border-width: var( --kendo-suggestion-border-width, 1px ) !default;
16
16
  /// The border style of the Suggestion.
17
17
  /// @group suggestion
18
- $kendo-suggestion-border-style: solid !default;
18
+ $kendo-suggestion-border-style: var( --kendo-suggestion-border-style, solid ) !default;
19
19
 
20
20
  /// The line height of the Suggestion.
21
21
  /// @group suggestion
22
- $kendo-suggestion-line-height: var( --kendo-line-height, normal ) !default;
22
+ $kendo-suggestion-line-height: var( --kendo-suggestion-line-height, var( --kendo-line-height, normal ) ) !default;
23
23
  /// The border radius of the Suggestion.
24
24
  /// @group suggestion
25
- $kendo-suggestion-border-radius: k-border-radius(xxl) !default;
25
+ $kendo-suggestion-border-radius: var( --kendo-suggestion-border-radius, #{k-border-radius(xxl)} ) !default;
26
26
 
27
27
  /// The background color of the Suggestion.
28
28
  /// @group suggestion
29
- $kendo-suggestion-bg: k-color(base-subtle) !default;
29
+ $kendo-suggestion-bg: var( --kendo-suggestion-bg, #{k-color(base-subtle)} ) !default;
30
30
  /// The text color of the Suggestion.
31
31
  /// @group suggestion
32
- $kendo-suggestion-text: k-color(base-on-subtle) !default;
32
+ $kendo-suggestion-text: var( --kendo-suggestion-text, #{k-color(base-on-subtle)} ) !default;
33
33
  /// The border color of the Suggestion.
34
34
  /// @group suggestion
35
- $kendo-suggestion-border: k-color(base-emphasis) !default;
35
+ $kendo-suggestion-border: var( --kendo-suggestion-border, #{k-color(base-emphasis)} ) !default;
36
36
 
37
37
  /// The background color of the hovered Suggestion.
38
38
  /// @group suggestion
39
- $kendo-suggestion-hover-bg: k-color(base-subtle-hover) !default;
39
+ $kendo-suggestion-hover-bg: var( --kendo-suggestion-hover-bg, #{k-color(base-subtle-hover)} ) !default;
40
40
  /// The text color of the hovered Suggestion.
41
41
  /// @group suggestion
42
- $kendo-suggestion-hover-text: k-color(base-on-subtle) !default;
42
+ $kendo-suggestion-hover-text: var( --kendo-suggestion-hover-text, #{k-color(base-on-subtle)} ) !default;
43
43
  /// The border color of the hovered Suggestion.
44
44
  /// @group suggestion
45
- $kendo-suggestion-hover-border: k-color(base-emphasis) !default;
45
+ $kendo-suggestion-hover-border: var( --kendo-suggestion-hover-border, #{k-color(base-emphasis)} ) !default;
46
46
 
47
47
  /// The background color of the active Suggestion.
48
48
  /// @group suggestion
49
- $kendo-suggestion-active-bg: k-color(base-subtle-active) !default;
49
+ $kendo-suggestion-active-bg: var( --kendo-suggestion-active-bg, #{k-color(base-subtle-active)} ) !default;
50
50
  /// The text color of the active Suggestion.
51
51
  /// @group suggestion
52
- $kendo-suggestion-active-text: k-color(base-on-subtle) !default;
52
+ $kendo-suggestion-active-text: var( --kendo-suggestion-active-text, #{k-color(base-on-subtle)} ) !default;
53
53
  /// The border color of the active Suggestion.
54
54
  /// @group suggestion
55
- $kendo-suggestion-active-border: k-color(base-emphasis) !default;
55
+ $kendo-suggestion-active-border: var( --kendo-suggestion-active-border, #{k-color(base-emphasis)} ) !default;
56
56
 
57
57
  /// The shadow blur of the focused Suggestion.
58
58
  /// @group suggestion
59
- $kendo-suggestion-focus-shadow-blur: 0 !default;
59
+ $kendo-suggestion-focus-shadow-blur: var( --kendo-suggestion-focus-shadow-blur, 0 ) !default;
60
60
  /// The shadow spread of the focused Suggestion.
61
61
  /// @group suggestion
62
- $kendo-suggestion-focus-shadow-spread: 2px !default;
62
+ $kendo-suggestion-focus-shadow-spread: var( --kendo-suggestion-focus-shadow-spread, 2px ) !default;
63
63
  /// The shadow color of the focused Suggestion.
64
64
  /// @group suggestion
65
- $kendo-suggestion-focus-shadow-color: k-color(border-alt) !default;
65
+ $kendo-suggestion-focus-shadow-color: var( --kendo-suggestion-focus-shadow-color, #{k-color(border-alt)} ) !default;
66
66
 
67
67
  $kendo-suggestion-theme-colors: (
68
68
  "primary": k-color(primary),
69
69
  "secondary": k-color(secondary)
70
70
  ) !default;
71
+
72
+ @forward "@progress/kendo-theme-core/scss/components/suggestion/_variables.scss" with (
73
+ $kendo-suggestion-padding-y: $kendo-suggestion-padding-y,
74
+ $kendo-suggestion-padding-x: $kendo-suggestion-padding-x,
75
+ $kendo-suggestion-spacing: $kendo-suggestion-spacing,
76
+ $kendo-suggestion-border-width: $kendo-suggestion-border-width,
77
+ $kendo-suggestion-border-style: $kendo-suggestion-border-style,
78
+ $kendo-suggestion-line-height: $kendo-suggestion-line-height,
79
+ $kendo-suggestion-bg: $kendo-suggestion-bg,
80
+ $kendo-suggestion-text: $kendo-suggestion-text,
81
+ $kendo-suggestion-border: $kendo-suggestion-border,
82
+ $kendo-suggestion-border-radius: $kendo-suggestion-border-radius,
83
+ $kendo-suggestion-hover-bg: $kendo-suggestion-hover-bg,
84
+ $kendo-suggestion-hover-text: $kendo-suggestion-hover-text,
85
+ $kendo-suggestion-hover-border: $kendo-suggestion-hover-border,
86
+ $kendo-suggestion-active-bg: $kendo-suggestion-active-bg,
87
+ $kendo-suggestion-active-text: $kendo-suggestion-active-text,
88
+ $kendo-suggestion-active-border: $kendo-suggestion-active-border,
89
+ $kendo-suggestion-focus-shadow-blur: $kendo-suggestion-focus-shadow-blur,
90
+ $kendo-suggestion-focus-shadow-spread: $kendo-suggestion-focus-shadow-spread,
91
+ $kendo-suggestion-focus-shadow-color: $kendo-suggestion-focus-shadow-color,
92
+ $kendo-suggestion-theme-colors: $kendo-suggestion-theme-colors
93
+ );