@progress/kendo-theme-fluent 11.2.1-dev.0 → 11.3.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 (341) 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/_index.scss +0 -1
  131. package/scss/forms/_layout.scss +5 -302
  132. package/scss/forms/_theme.scss +5 -24
  133. package/scss/forms/_variables.scss +73 -39
  134. package/scss/gantt/_layout.scss +5 -801
  135. package/scss/gantt/_theme.scss +17 -236
  136. package/scss/gantt/_variables.scss +142 -73
  137. package/scss/grid/_layout.scss +60 -1276
  138. package/scss/grid/_theme.scss +35 -343
  139. package/scss/grid/_variables.scss +306 -183
  140. package/scss/gridlayout/_layout.scss +1 -6
  141. package/scss/gridlayout/_theme.scss +1 -6
  142. package/scss/icons/_layout.scss +4 -33
  143. package/scss/icons/_theme.scss +7 -1
  144. package/scss/icons/_variables.scss +35 -9
  145. package/scss/imageeditor/_layout.scss +2 -152
  146. package/scss/imageeditor/_theme.scss +5 -42
  147. package/scss/imageeditor/_variables.scss +66 -32
  148. package/scss/index.scss +2 -1
  149. package/scss/input/_layout.scss +36 -468
  150. package/scss/input/_theme.scss +52 -128
  151. package/scss/input/_variables.scss +153 -208
  152. package/scss/list/_layout.scss +3 -252
  153. package/scss/list/_theme.scss +10 -81
  154. package/scss/list/_variables.scss +176 -92
  155. package/scss/listbox/_layout.scss +2 -80
  156. package/scss/listbox/_theme.scss +5 -8
  157. package/scss/listbox/_variables.scss +28 -13
  158. package/scss/listgroup/_layout.scss +2 -174
  159. package/scss/listgroup/_theme.scss +2 -8
  160. package/scss/listgroup/_variables.scss +23 -10
  161. package/scss/listview/_layout.scss +6 -133
  162. package/scss/listview/_theme.scss +8 -37
  163. package/scss/listview/_variables.scss +66 -39
  164. package/scss/loader/_layout.scss +15 -572
  165. package/scss/loader/_theme.scss +2 -14
  166. package/scss/loader/_variables.scss +90 -92
  167. package/scss/map/_layout.scss +7 -121
  168. package/scss/map/_theme.scss +5 -17
  169. package/scss/map/_variables.scss +40 -22
  170. package/scss/maskedtextbox/_layout.scss +3 -3
  171. package/scss/maskedtextbox/_theme.scss +3 -3
  172. package/scss/mediaplayer/_layout.scss +5 -72
  173. package/scss/mediaplayer/_theme.scss +5 -15
  174. package/scss/mediaplayer/_variables.scss +27 -14
  175. package/scss/menu/_layout.scss +25 -267
  176. package/scss/menu/_theme.scss +14 -73
  177. package/scss/menu/_variables.scss +135 -76
  178. package/scss/menu-button/_layout.scss +9 -14
  179. package/scss/menu-button/_theme.scss +5 -1
  180. package/scss/menu-button/_variables.scss +10 -0
  181. package/scss/messagebox/_layout.scss +2 -18
  182. package/scss/messagebox/_theme.scss +4 -19
  183. package/scss/messagebox/_variables.scss +33 -37
  184. package/scss/multiselect/_layout.scss +3 -4
  185. package/scss/multiselect/_theme.scss +3 -4
  186. package/scss/no-data/_layout.scss +2 -17
  187. package/scss/no-data/_theme.scss +2 -5
  188. package/scss/no-data/_variables.scss +7 -2
  189. package/scss/notification/_functions.scss +17 -0
  190. package/scss/notification/_layout.scss +2 -68
  191. package/scss/notification/_theme.scss +4 -28
  192. package/scss/notification/_variables.scss +50 -91
  193. package/scss/numerictextbox/_layout.scss +3 -7
  194. package/scss/numerictextbox/_theme.scss +3 -3
  195. package/scss/orgchart/_layout.scss +8 -99
  196. package/scss/orgchart/_theme.scss +4 -45
  197. package/scss/orgchart/_variables.scss +87 -45
  198. package/scss/otp/_layout.scss +1 -34
  199. package/scss/otp/_theme.scss +1 -7
  200. package/scss/otp/_variables.scss +25 -12
  201. package/scss/overlay/_layout.scss +2 -11
  202. package/scss/overlay/_theme.scss +4 -3
  203. package/scss/overlay/_variables.scss +7 -3
  204. package/scss/pager/_layout.scss +11 -145
  205. package/scss/pager/_theme.scss +7 -15
  206. package/scss/pager/_variables.scss +49 -26
  207. package/scss/panel/_layout.scss +2 -24
  208. package/scss/panel/_theme.scss +10 -13
  209. package/scss/panel/_variables.scss +23 -10
  210. package/scss/panelbar/_layout.scss +17 -95
  211. package/scss/panelbar/_theme.scss +15 -164
  212. package/scss/panelbar/_variables.scss +134 -68
  213. package/scss/pdf-viewer/_layout.scss +3 -327
  214. package/scss/pdf-viewer/_theme.scss +2 -80
  215. package/scss/pdf-viewer/_variables.scss +75 -36
  216. package/scss/pivotgrid/_index.scss +0 -6
  217. package/scss/pivotgrid/_layout.scss +44 -579
  218. package/scss/pivotgrid/_theme.scss +5 -192
  219. package/scss/pivotgrid/_variables.scss +144 -70
  220. package/scss/popover/_layout.scss +6 -73
  221. package/scss/popover/_theme.scss +2 -36
  222. package/scss/popover/_variables.scss +54 -27
  223. package/scss/popup/_layout.scss +5 -70
  224. package/scss/popup/_theme.scss +2 -9
  225. package/scss/popup/_variables.scss +25 -12
  226. package/scss/progressbar/_layout.scss +10 -196
  227. package/scss/progressbar/_theme.scss +11 -46
  228. package/scss/progressbar/_variables.scss +57 -34
  229. package/scss/prompt/_layout.scss +2 -75
  230. package/scss/prompt/_theme.scss +2 -35
  231. package/scss/prompt/_variables.scss +43 -20
  232. package/scss/radio/_layout.scss +12 -178
  233. package/scss/radio/_theme.scss +7 -75
  234. package/scss/radio/_variables.scss +72 -36
  235. package/scss/rating/_layout.scss +11 -57
  236. package/scss/rating/_theme.scss +8 -6
  237. package/scss/rating/_variables.scss +21 -13
  238. package/scss/responsivepanel/_layout.scss +2 -45
  239. package/scss/responsivepanel/_theme.scss +3 -3
  240. package/scss/ripple/_layout.scss +2 -50
  241. package/scss/ripple/_theme.scss +2 -2
  242. package/scss/scheduler/_layout.scss +11 -773
  243. package/scss/scheduler/_theme.scss +32 -167
  244. package/scss/scheduler/_variables.scss +149 -77
  245. package/scss/scroller/_layout.scss +2 -80
  246. package/scss/scroller/_theme.scss +2 -5
  247. package/scss/scrollview/_layout.scss +2 -159
  248. package/scss/scrollview/_theme.scss +11 -35
  249. package/scss/scrollview/_variables.scss +52 -29
  250. package/scss/searchbox/_layout.scss +2 -0
  251. package/scss/searchbox/_theme.scss +4 -1
  252. package/scss/searchbox/_variables.scss +1 -1
  253. package/scss/signature/_layout.scss +3 -67
  254. package/scss/signature/_theme.scss +3 -8
  255. package/scss/signature/_variables.scss +46 -25
  256. package/scss/skeleton/_layout.scss +2 -79
  257. package/scss/skeleton/_theme.scss +2 -17
  258. package/scss/skeleton/_variables.scss +15 -6
  259. package/scss/slider/_layout.scss +18 -203
  260. package/scss/slider/_theme.scss +31 -40
  261. package/scss/slider/_variables.scss +58 -41
  262. package/scss/speech-to-text-button/_layout.scss +1 -9
  263. package/scss/speech-to-text-button/_theme.scss +1 -3
  264. package/scss/split-button/_layout.scss +22 -18
  265. package/scss/split-button/_theme.scss +2 -1
  266. package/scss/split-button/_variables.scss +18 -9
  267. package/scss/splitter/_layout.scss +8 -171
  268. package/scss/splitter/_theme.scss +2 -31
  269. package/scss/splitter/_variables.scss +42 -20
  270. package/scss/spreadsheet/_layout.scss +50 -724
  271. package/scss/spreadsheet/_theme.scss +14 -182
  272. package/scss/spreadsheet/_variables.scss +172 -99
  273. package/scss/stacklayout/_layout.scss +1 -5
  274. package/scss/stacklayout/_theme.scss +1 -5
  275. package/scss/stepper/_layout.scss +9 -255
  276. package/scss/stepper/_theme.scss +4 -186
  277. package/scss/stepper/_variables.scss +125 -60
  278. package/scss/suggestion/_layout.scss +2 -38
  279. package/scss/suggestion/_theme.scss +3 -66
  280. package/scss/suggestion/_variables.scss +42 -19
  281. package/scss/switch/_layout.scss +2 -138
  282. package/scss/switch/_theme.scss +2 -136
  283. package/scss/switch/_variables.scss +99 -49
  284. package/scss/table/_layout.scss +6 -249
  285. package/scss/table/_theme.scss +9 -95
  286. package/scss/table/_variables.scss +100 -64
  287. package/scss/tabstrip/_layout.scss +2 -421
  288. package/scss/tabstrip/_theme.scss +12 -123
  289. package/scss/tabstrip/_variables.scss +113 -61
  290. package/scss/taskboard/_layout.scss +28 -178
  291. package/scss/taskboard/_theme.scss +20 -55
  292. package/scss/taskboard/_variables.scss +122 -63
  293. package/scss/textarea/_layout.scss +3 -6
  294. package/scss/textarea/_theme.scss +3 -4
  295. package/scss/textbox/_layout.scss +3 -4
  296. package/scss/textbox/_theme.scss +3 -4
  297. package/scss/tilelayout/_layout.scss +2 -36
  298. package/scss/tilelayout/_theme.scss +13 -10
  299. package/scss/tilelayout/_variables.scss +19 -8
  300. package/scss/time-marker/_layout.scss +2 -15
  301. package/scss/time-marker/_theme.scss +2 -17
  302. package/scss/time-marker/_variables.scss +7 -2
  303. package/scss/timedurationpicker/_layout.scss +3 -4
  304. package/scss/timedurationpicker/_theme.scss +3 -4
  305. package/scss/timeline/_layout.scss +8 -423
  306. package/scss/timeline/_theme.scss +11 -34
  307. package/scss/timeline/_variables.scss +108 -61
  308. package/scss/timepicker/_layout.scss +7 -3
  309. package/scss/timepicker/_theme.scss +3 -4
  310. package/scss/timeselector/_layout.scss +3 -223
  311. package/scss/timeselector/_theme.scss +5 -55
  312. package/scss/timeselector/_variables.scss +84 -41
  313. package/scss/toolbar/_layout.scss +11 -297
  314. package/scss/toolbar/_theme.scss +3 -167
  315. package/scss/toolbar/_variables.scss +65 -32
  316. package/scss/tooltip/_functions.scss +17 -0
  317. package/scss/tooltip/_layout.scss +13 -74
  318. package/scss/tooltip/_theme.scss +17 -23
  319. package/scss/tooltip/_variables.scss +50 -72
  320. package/scss/treelist/_layout.scss +3 -82
  321. package/scss/treelist/_theme.scss +4 -6
  322. package/scss/treelist/_variables.scss +7 -2
  323. package/scss/treeview/_layout.scss +8 -137
  324. package/scss/treeview/_theme.scss +20 -65
  325. package/scss/treeview/_variables.scss +88 -48
  326. package/scss/typography/_layout.scss +3 -113
  327. package/scss/typography/_theme.scss +2 -17
  328. package/scss/typography/_variables.scss +84 -3
  329. package/scss/upload/_layout.scss +7 -219
  330. package/scss/upload/_theme.scss +4 -90
  331. package/scss/upload/_variables.scss +66 -29
  332. package/scss/validator/_layout.scss +2 -16
  333. package/scss/validator/_theme.scss +2 -2
  334. package/scss/virtual-scroller/_layout.scss +2 -34
  335. package/scss/virtual-scroller/_theme.scss +2 -2
  336. package/scss/window/_layout.scss +9 -141
  337. package/scss/window/_theme.scss +7 -35
  338. package/scss/window/_variables.scss +65 -70
  339. package/scss/wizard/_layout.scss +8 -95
  340. package/scss/wizard/_theme.scss +4 -7
  341. package/scss/wizard/_variables.scss +24 -11
package/scss/coloreditor/_layout.scss CHANGED
@@ -2,123 +2,35 @@
2
2
  @use "../core/_index.scss" as *;
3
3
  @use "../colorpalette/_variables.scss" as *;
4
4
  @use "./_variables.scss" as *;
5
+ @use "@progress/kendo-theme-core/scss/components/coloreditor/_layout.scss" as *;
5
6
 
6
7
  @mixin kendo-color-editor--layout() {
8
+ @include kendo-color-editor--layout-base();
7
9
 
8
- .k-coloreditor {
9
- @include border-radius( var( --kendo-color-editor-border-radius, #{$kendo-color-editor-border-radius} ) );
10
- min-width: var( --kendo-color-editor-min-width, #{$kendo-color-editor-min-width} );
11
- border-width: var( --kendo-color-editor-border-width, #{$kendo-color-editor-border-width} );
12
- border-style: solid;
13
- box-sizing: border-box;
14
- outline: 0;
15
- font-family: var( --kendo-color-editor-font-family, #{$kendo-color-editor-font-family} );
16
- font-size: var( --kendo-color-editor-font-size, #{$kendo-color-editor-font-size} );
17
- line-height: var( --kendo-color-editor-line-height, #{$kendo-color-editor-line-height} );
18
- display: inline-flex;
19
- flex-direction: column;
20
- align-items: stretch;
10
+ .k-coloreditor-footer.k-actions {
11
+ padding-block: $kendo-color-editor-footer-padding-y;
12
+ padding-inline: $kendo-color-editor-footer-padding-y;
13
+ }
21
14
 
22
- *,
23
- *::before,
24
- *::after {
25
- box-sizing: border-box;
26
- }
27
- }
28
-
29
- .k-coloreditor .k-colorgradient:focus,
30
- .k-coloreditor .k-colorgradient.k-focus {
31
- outline: var( --kendo-color-editor-color-gradient-focus-outline, #{$kendo-color-editor-color-gradient-focus-outline} ) dotted;
32
- outline-offset: var( --kendo-color-editor-color-gradient-focus-outline-offset, #{$kendo-color-editor-color-gradient-focus-outline-offset} );
33
- border-radius: 0;
34
- }
35
-
36
- // Header
37
- .k-coloreditor-header {
38
- padding-inline: var( --kendo-color-editor-header-padding-x, #{$kendo-color-editor-header-padding-x} );
39
- padding-block-start: var( --kendo-color-editor-header-padding-y, #{$kendo-color-editor-header-padding-y} );
40
- }
41
-
42
- .k-coloreditor-header-actions {
43
- gap: var( --kendo-color-editor-header-actions-spacing, #{$kendo-color-editor-header-actions-spacing} );
44
- }
45
-
46
- .k-coloreditor-preview {
47
- display: flex;
48
- flex-flow: column nowrap;
49
- align-items: stretch;
50
- justify-content: space-between;
51
- gap: var( --kendo-color-editor-preview-spacing, #{$kendo-color-editor-preview-spacing} );
52
- position: relative;
53
- z-index: 1;
54
- }
55
-
56
- .k-coloreditor-preview .k-color-preview {
57
- width: var( --kendo-color-editor-color-preview-width, #{$kendo-color-editor-color-preview-width} );
58
- height: var( --kendo-color-editor-color-preview-height, #{$kendo-color-editor-color-preview-height} );
59
- }
15
+ @each $size, $size-props in $kendo-color-editor-sizes {
16
+ $_views-padding-x: map.get( $size-props, views-padding-x );
17
+ $_views-padding-y: map.get( $size-props, views-padding-y );
60
18
 
61
- // ColorPreview sizes
62
- @each $size, $size-props in $kendo-color-editor-sizes {
63
- $_min-width: map.get( $size-props, min-width );
64
- $_header-padding-x: map.get( $size-props, header-padding-x );
65
- $_header-padding-y: map.get( $size-props, header-padding-y );
66
- $_views-padding-x: map.get( $size-props, views-padding-x );
67
- $_views-padding-y: map.get( $size-props, views-padding-y );
68
- $_preview-spacing: map.get( $size-props, preview-spacing );
69
- $_preview-width: map.get( $size-props, preview-width );
70
- $_preview-height: map.get( $size-props, preview-height );
19
+ .k-coloreditor-#{$size} {
71
20
 
72
- .k-coloreditor-#{$size} {
73
- min-width: $_min-width;
74
-
75
- .k-coloreditor-header {
76
- padding: $_header-padding-y $_header-padding-x 0;
77
- }
78
-
79
- .k-coloreditor-views {
80
- padding-block-start: calc($_views-padding-y * 2);
81
- padding-block-end: $_views-padding-y;
82
- padding-inline: $_views-padding-x;
83
- }
84
-
85
- .k-coloreditor-preview {
86
- gap: $_preview-spacing;
87
-
88
- .k-color-preview {
89
- width: $_preview-width;
90
- height: $_preview-height;
91
- }
92
- }
93
- }
94
-
95
- }
96
-
97
- // Views
98
- .k-coloreditor-views {
99
- min-width: calc( var( --kendo-color-preview-width, #{$kendo-color-palette-tile-width}) * var( --kendo-color-preview-columns, 10) );
100
- padding-inline: var( --kendo-color-editor-views-padding-x, #{$kendo-color-editor-views-padding-x} );
101
- padding-block-start: calc( var( --kendo-color-editor-views-padding-y, #{$kendo-color-editor-views-padding-y} ) * 2 );
102
- padding-block-end: var( --kendo-color-editor-views-padding-y, #{$kendo-color-editor-views-padding-y} );
103
- gap: var( --kendo-color-editor-views-spacing, #{$kendo-color-editor-views-spacing} );
104
-
105
- .k-colorgradient {
106
- padding: 0;
107
- width: auto;
108
- border-width: 0;
109
- box-shadow: none;
110
- }
111
-
112
- .k-colorpalette {
113
- align-self: center;
21
+ .k-coloreditor-views {
22
+ padding-block-start: calc($_views-padding-y * 2);
23
+ padding-block-end: $_views-padding-y;
24
+ padding-inline: $_views-padding-x;
114
25
  }
115
26
  }
27
+ }
116
28
 
117
- // Footer
118
- .k-coloreditor-footer.k-actions {
119
- padding-block: var( --kendo-color-editor-footer-padding-y, #{$kendo-color-editor-footer-padding-y} );
120
- padding-inline: var( --kendo-color-editor-footer-padding-y, #{$kendo-color-editor-footer-padding-y} );
121
- margin: 0;
122
- }
29
+ .k-coloreditor-preview {
30
+ justify-content: space-between;
31
+ }
123
32
 
33
+ .k-coloreditor-views .k-colorgradient {
34
+ box-shadow: none;
35
+ }
124
36
  }
package/scss/coloreditor/_theme.scss CHANGED
@@ -1,32 +1,11 @@
1
1
  @use "../core/_index.scss" as *;
2
2
  @use "./_variables.scss" as *;
3
+ @use "@progress/kendo-theme-core/scss/components/coloreditor/_theme.scss" as *;
3
4
 
4
5
  @mixin kendo-color-editor--theme() {
6
+ @include kendo-color-editor--theme-base();
5
7
 
6
8
  .k-coloreditor {
7
- @include fill(
8
- var( --kendo-color-editor-text, #{$kendo-color-editor-text} ),
9
- var( --kendo-color-editor-bg, #{$kendo-color-editor-bg} ),
10
- var( --kendo-color-editor-border, #{$kendo-color-editor-border} )
11
- );
12
- @include box-shadow(
13
- var( --kendo-color-editor-shadow, #{$kendo-color-editor-shadow} )
14
- );
15
- }
16
-
17
- .k-coloreditor:focus,
18
- .k-coloreditor.k-focus {
19
- @include fill(
20
- $border: var( --kendo-color-editor-focus-border, #{$kendo-color-editor-focus-border} )
21
- );
22
- @include box-shadow(
23
- var( --kendo-color-editor-focus-shadow, #{$kendo-color-editor-focus-shadow} )
24
- );
25
- }
26
-
27
- .k-coloreditor .k-colorgradient:focus,
28
- .k-coloreditor .k-colorgradient.k-focus {
29
- box-shadow: none;
30
- outline-color: var( --kendo-color-editor-color-gradient-focus-outline-color, #{$kendo-color-editor-color-gradient-focus-outline-color} );
9
+ @include box-shadow($kendo-color-editor-shadow);
31
10
  }
32
11
  }
package/scss/coloreditor/_variables.scss CHANGED
@@ -4,26 +4,26 @@
4
4
 
5
5
  /// The spacer of the ColorEditor.
6
6
  /// @group color-editor
7
- $kendo-color-editor-spacer: k-spacing(2) !default;
7
+ $kendo-color-editor-spacer: var(--kendo-color-editor-spacer, k-spacing(2)) !default;
8
8
 
9
9
  /// The minimum width of the ColorEditor.
10
10
  /// @group color-editor
11
- $kendo-color-editor-min-width: 260px !default;
11
+ $kendo-color-editor-min-width: var(--kendo-color-editor-min-width, 260px) !default;
12
12
  /// The minimum width of the ColorEditor.
13
13
  /// @group color-editor
14
- $kendo-color-editor-sm-min-width: 236px !default;
14
+ $kendo-color-editor-sm-min-width: var(--kendo-color-editor-sm-min-width, 236px) !default;
15
15
  /// The minimum width of the ColorEditor.
16
16
  /// @group color-editor
17
- $kendo-color-editor-md-min-width: $kendo-color-editor-min-width !default;
17
+ $kendo-color-editor-md-min-width: var(--kendo-color-editor-md-min-width, $kendo-color-editor-min-width) !default;
18
18
  /// The minimum width of the ColorEditor.
19
19
  /// @group color-editor
20
- $kendo-color-editor-lg-min-width: 362px !default;
20
+ $kendo-color-editor-lg-min-width: var(--kendo-color-editor-lg-min-width, 362px) !default;
21
21
  /// The width of the border around the ColorEditor.
22
22
  /// @group color-editor
23
- $kendo-color-editor-border-width: 1px !default;
23
+ $kendo-color-editor-border-width: var(--kendo-color-editor-border-width, 1px) !default;
24
24
  /// The border radius of the ColorEditor.
25
25
  /// @group color-editor
26
- $kendo-color-editor-border-radius: k-border-radius(md) !default;
26
+ $kendo-color-editor-border-radius: var(--kendo-color-editor-border-radius, k-border-radius(md)) !default;
27
27
  /// The font family of the ColorEditor.
28
28
  /// @group color-editor
29
29
  $kendo-color-editor-font-family: var( --kendo-font-family, inherit ) !default;
@@ -35,135 +35,122 @@ $kendo-color-editor-font-size: var( --kendo-font-size, inherit ) !default;
35
35
  $kendo-color-editor-line-height: var( --kendo-line-height, normal ) !default;
36
36
  /// The text color of the ColorEditor.
37
37
  /// @group color-editor
38
- $kendo-color-editor-text: k-color(on-app-surface) !default;
38
+ $kendo-color-editor-text: var(--kendo-color-editor-text, k-color(on-app-surface)) !default;
39
39
  /// The background color of the ColorEditor.
40
40
  /// @group color-editor
41
- $kendo-color-editor-bg: k-color(surface-alt) !default;
41
+ $kendo-color-editor-bg: var(--kendo-color-editor-bg, k-color(surface-alt)) !default;
42
42
  /// The border color of the ColorEditor.
43
43
  /// @group color-editor
44
- $kendo-color-editor-border: color-mix(in srgb, k-color(border) 16%, transparent) !default;
44
+ $kendo-color-editor-border: var(--kendo-color-editor-border, color-mix(in srgb, k-color(border) 16%, transparent)) !default;
45
45
  /// The box shadow of the ColorEditor.
46
46
  /// @group color-editor
47
47
  $kendo-color-editor-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
48
48
 
49
49
  /// The border color of the focused ColorEditor.
50
50
  /// @group color-editor
51
- $kendo-color-editor-focus-border: color-mix(in srgb, k-color(border) 10%, transparent) !default;
51
+ $kendo-color-editor-focus-border: var(--kendo-color-editor-focus-border, color-mix(in srgb, k-color(border) 10%, transparent)) !default;
52
52
  /// The box shadow of the focused ColorEditor.
53
53
  /// @group color-editor
54
54
  $kendo-color-editor-focus-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
55
55
 
56
- /// The vertical padding of the ColorEditor header.
57
- /// @group color-editor
58
- $kendo-color-editor-header-padding-y: $kendo-color-editor-spacer !default;
59
- /// The horizontal padding of the ColorEditor header.
60
- /// @group color-editor
61
- $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !default;
62
-
63
56
  /// The spacing between the ColorEditor header actions.
64
57
  /// @group color-editor
65
- $kendo-color-editor-header-actions-spacing: calc( #{$kendo-color-editor-spacer} / 2 ) !default;
58
+ $kendo-color-editor-header-actions-spacing: var(--kendo-color-editor-header-actions-spacing, calc( #{$kendo-color-editor-spacer} / 2 )) !default;
66
59
 
67
60
  /// The vertical padding of the small ColorEditor header.
68
61
  /// @group color-editor
69
- $kendo-color-editor-sm-header-padding-y: $kendo-color-editor-header-padding-y !default;
62
+ $kendo-color-editor-sm-header-padding-y: var(--kendo-color-editor-sm-header-padding-y, $kendo-color-editor-spacer) !default;
70
63
  /// The horizontal padding of the small ColorEditor header.
71
64
  /// @group color-editor
72
- $kendo-color-editor-sm-header-padding-x: $kendo-color-editor-header-padding-x !default;
65
+ $kendo-color-editor-sm-header-padding-x: var(--kendo-color-editor-sm-header-padding-x, $kendo-color-editor-spacer) !default;
73
66
  /// The vertical padding of the medium ColorEditor header.
74
67
  /// @group color-editor
75
- $kendo-color-editor-md-header-padding-y: $kendo-color-editor-header-padding-y !default;
68
+ $kendo-color-editor-md-header-padding-y: var(--kendo-color-editor-md-header-padding-y, $kendo-color-editor-spacer) !default;
76
69
  /// The horizontal padding of the medium ColorEditor header.
77
70
  /// @group color-editor
78
- $kendo-color-editor-md-header-padding-x: $kendo-color-editor-header-padding-x !default;
71
+ $kendo-color-editor-md-header-padding-x: var(--kendo-color-editor-md-header-padding-x, $kendo-color-editor-spacer) !default;
79
72
  /// The vertical padding of the large ColorEditor header.
80
73
  /// @group color-editor
81
- $kendo-color-editor-lg-header-padding-y: k-spacing(4) !default;
74
+ $kendo-color-editor-lg-header-padding-y: var(--kendo-color-editor-lg-header-padding-y, k-spacing(4)) !default;
82
75
  /// The horizontal padding of the large ColorEditor header.
83
76
  /// @group color-editor
84
- $kendo-color-editor-lg-header-padding-x: k-spacing(4) !default;
77
+ $kendo-color-editor-lg-header-padding-x: var(--kendo-color-editor-lg-header-padding-x, k-spacing(4)) !default;
85
78
 
86
79
  /// The width of the ColorEditor preview.
87
80
  /// @group color-editor
88
- $kendo-color-editor-color-preview-width: 34px !default;
81
+ $kendo-color-editor-color-preview-width: var(--kendo-color-editor-color-preview-width, 34px) !default;
89
82
  /// The height of the ColorEditor preview.
90
83
  /// @group color-editor
91
- $kendo-color-editor-color-preview-height: 14px !default;
84
+ $kendo-color-editor-color-preview-height: var(--kendo-color-editor-color-preview-height, 14px) !default;
92
85
  /// The spacing between the colors in the ColorEditor preview.
93
86
  /// @group color-editor
94
- $kendo-color-editor-preview-spacing: k-spacing(1) !default;
87
+ $kendo-color-editor-preview-spacing: var(--kendo-color-editor-preview-spacing, k-spacing(1)) !default;
95
88
 
96
89
  /// The spacing between the colors in the small ColorEditor preview.
97
90
  /// @group color-editor
98
- $kendo-color-editor-sm-preview-spacing: k-spacing(1) !default;
91
+ $kendo-color-editor-sm-preview-spacing: var(--kendo-color-editor-sm-preview-spacing, k-spacing(1)) !default;
99
92
  /// The spacing between the colors in the medium ColorEditor preview.
100
93
  /// @group color-editor
101
- $kendo-color-editor-md-preview-spacing: $kendo-color-editor-preview-spacing !default;
94
+ $kendo-color-editor-md-preview-spacing: var(--kendo-color-editor-md-preview-spacing, $kendo-color-editor-preview-spacing) !default;
102
95
  /// The spacing between the colors in the large ColorEditor preview.
103
96
  /// @group color-editor
104
- $kendo-color-editor-lg-preview-spacing: k-spacing(1) !default;
97
+ $kendo-color-editor-lg-preview-spacing: var(--kendo-color-editor-lg-preview-spacing, k-spacing(1)) !default;
105
98
 
106
99
  /// The width of the small ColorEditor preview.
107
100
  /// @group color-editor
108
- $kendo-color-editor-sm-color-preview-width: 34px !default;
101
+ $kendo-color-editor-sm-color-preview-width: var(--kendo-color-editor-sm-color-preview-width, 34px) !default;
109
102
  /// The height of the small ColorEditor preview.
110
103
  /// @group color-editor
111
- $kendo-color-editor-sm-color-preview-height: 12px !default;
104
+ $kendo-color-editor-sm-color-preview-height: var(--kendo-color-editor-sm-color-preview-height, 12px) !default;
112
105
  /// The width of the medium ColorEditor preview.
113
106
  /// @group color-editor
114
- $kendo-color-editor-md-color-preview-width: $kendo-color-editor-color-preview-width !default;
107
+ $kendo-color-editor-md-color-preview-width: var(--kendo-color-editor-md-color-preview-width, $kendo-color-editor-color-preview-width) !default;
115
108
  /// The height of the medium ColorEditor preview.
116
109
  /// @group color-editor
117
- $kendo-color-editor-md-color-preview-height: $kendo-color-editor-color-preview-height !default;
110
+ $kendo-color-editor-md-color-preview-height: var(--kendo-color-editor-md-color-preview-height, $kendo-color-editor-color-preview-height) !default;
118
111
  /// The width of the large ColorEditor preview.
119
112
  /// @group color-editor
120
- $kendo-color-editor-lg-color-preview-width: 34px !default;
113
+ $kendo-color-editor-lg-color-preview-width: var(--kendo-color-editor-lg-color-preview-width, 34px) !default;
121
114
  /// The height of the large ColorEditor preview.
122
115
  /// @group color-editor
123
- $kendo-color-editor-lg-color-preview-height: 16px !default;
116
+ $kendo-color-editor-lg-color-preview-height: var(--kendo-color-editor-lg-color-preview-height, 16px) !default;
124
117
 
125
- /// The vertical padding of the ColorEditor views container.
126
- /// @group color-editor
127
- $kendo-color-editor-views-padding-y: $kendo-color-editor-spacer !default;
128
- /// The horizontal padding of the ColorEditor views container.
129
- /// @group color-editor
130
- $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-y !default;
131
118
  /// The spacing of the ColorEditor views container.
132
119
  /// @group color-editor
133
- $kendo-color-editor-views-spacing: $kendo-color-editor-spacer !default;
120
+ $kendo-color-editor-views-spacing: var(--kendo-color-editor-views-spacing, $kendo-color-editor-spacer) !default;
134
121
 
135
122
  /// The vertical padding of the small ColorEditor views container.
136
123
  /// @group color-editor
137
- $kendo-color-editor-sm-views-padding-y: k-spacing(2) !default;
124
+ $kendo-color-editor-sm-views-padding-y: var(--kendo-color-editor-sm-views-padding-y, k-spacing(2)) !default;
138
125
  /// The horizontal padding of the small ColorEditor views container.
139
126
  /// @group color-editor
140
- $kendo-color-editor-sm-views-padding-x: $kendo-color-editor-views-padding-y !default;
127
+ $kendo-color-editor-sm-views-padding-x: var(--kendo-color-editor-sm-views-padding-x, $kendo-color-editor-spacer) !default;
141
128
  /// The vertical padding of the medium ColorEditor views container.
142
129
  /// @group color-editor
143
- $kendo-color-editor-md-views-padding-y: $kendo-color-editor-views-padding-y !default;
130
+ $kendo-color-editor-md-views-padding-y: var(--kendo-color-editor-md-views-padding-y, $kendo-color-editor-spacer) !default;
144
131
  /// The horizontal padding of the medium ColorEditor views container.
145
132
  /// @group color-editor
146
- $kendo-color-editor-md-views-padding-x: $kendo-color-editor-views-padding-x !default;
133
+ $kendo-color-editor-md-views-padding-x: var(--kendo-color-editor-md-views-padding-x, $kendo-color-editor-spacer) !default;
147
134
  /// The vertical padding of the large ColorEditor views container.
148
135
  /// @group color-editor
149
- $kendo-color-editor-lg-views-padding-y: k-spacing(4) !default;
136
+ $kendo-color-editor-lg-views-padding-y: var(--kendo-color-editor-lg-views-padding-y, k-spacing(4)) !default;
150
137
  /// The horizontal padding of the large ColorEditor views container.
151
138
  /// @group color-editor
152
- $kendo-color-editor-lg-views-padding-x: k-spacing(4) !default;
139
+ $kendo-color-editor-lg-views-padding-x: var(--kendo-color-editor-lg-views-padding-x, k-spacing(4)) !default;
153
140
 
154
141
  /// The vertical padding of the ColorEditor footer.
155
142
  /// @group color-editor
156
- $kendo-color-editor-footer-padding-y: k-spacing(2) !default;
143
+ $kendo-color-editor-footer-padding-y: var(--kendo-color-editor-footer-padding-y, k-spacing(2)) !default;
157
144
 
158
145
  /// The outline color of the focused ColorGradient.
159
146
  /// @group color-editor
160
- $kendo-color-editor-color-gradient-focus-outline-color: rgba(0, 0, 0, 0.3) !default;
147
+ $kendo-color-editor-color-gradient-focus-outline-color: var(--kendo-color-editor-color-gradient-focus-outline-color, rgba(0, 0, 0, 0.3)) !default;
161
148
  /// The outline width of the focused ColorGradient.
162
149
  /// @group color-editor
163
- $kendo-color-editor-color-gradient-focus-outline: 2px !default;
150
+ $kendo-color-editor-color-gradient-focus-outline: var(--kendo-color-editor-color-gradient-focus-outline, 2px) !default;
164
151
  /// The outline offset of the focused ColorGradient.
165
152
  /// @group color-editor
166
- $kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;
153
+ $kendo-color-editor-color-gradient-focus-outline-offset: var(--kendo-color-editor-color-gradient-focus-outline-offset, 2px) !default;
167
154
 
168
155
  /// The size map of the ColorEditor preview.
169
156
  /// @group color-editor
@@ -174,7 +161,7 @@ $kendo-color-editor-sizes: (
174
161
  header-padding-y: $kendo-color-editor-sm-header-padding-y,
175
162
  views-padding-x: $kendo-color-editor-sm-views-padding-x,
176
163
  views-padding-y: $kendo-color-editor-sm-views-padding-y,
177
- preview-spacing: $kendo-color-editor-sm-preview-spacing,
164
+ preview-gap: $kendo-color-editor-sm-preview-spacing,
178
165
  preview-width: $kendo-color-editor-sm-color-preview-width,
179
166
  preview-height: $kendo-color-editor-sm-color-preview-height,
180
167
 
@@ -185,7 +172,7 @@ $kendo-color-editor-sizes: (
185
172
  header-padding-y: $kendo-color-editor-md-header-padding-y,
186
173
  views-padding-x: $kendo-color-editor-md-views-padding-x,
187
174
  views-padding-y: $kendo-color-editor-md-views-padding-y,
188
- preview-spacing: $kendo-color-editor-md-preview-spacing,
175
+ preview-gap: $kendo-color-editor-md-preview-spacing,
189
176
  preview-width: $kendo-color-editor-md-color-preview-width,
190
177
  preview-height: $kendo-color-editor-md-color-preview-height,
191
178
  ),
@@ -195,8 +182,56 @@ $kendo-color-editor-sizes: (
195
182
  header-padding-y: $kendo-color-editor-lg-header-padding-y,
196
183
  views-padding-x: $kendo-color-editor-lg-views-padding-x,
197
184
  views-padding-y: $kendo-color-editor-lg-views-padding-y,
198
- preview-spacing: $kendo-color-editor-lg-preview-spacing,
185
+ preview-gap: $kendo-color-editor-lg-preview-spacing,
199
186
  preview-width: $kendo-color-editor-lg-color-preview-width,
200
187
  preview-height: $kendo-color-editor-lg-color-preview-height,
201
188
  )
202
189
  ) !default;
190
+
191
+ @forward "@progress/kendo-theme-core/scss/components/coloreditor/_variables.scss" with (
192
+ $kendo-color-editor-spacer: $kendo-color-editor-spacer,
193
+ $kendo-color-editor-min-width: $kendo-color-editor-min-width,
194
+ $kendo-color-editor-sm-min-width: $kendo-color-editor-sm-min-width,
195
+ $kendo-color-editor-md-min-width: $kendo-color-editor-md-min-width,
196
+ $kendo-color-editor-lg-min-width: $kendo-color-editor-lg-min-width,
197
+ $kendo-color-editor-border-width: $kendo-color-editor-border-width,
198
+ $kendo-color-editor-border-radius: $kendo-color-editor-border-radius,
199
+ $kendo-color-editor-font-family: $kendo-color-editor-font-family,
200
+ $kendo-color-editor-font-size: $kendo-color-editor-font-size,
201
+ $kendo-color-editor-line-height: $kendo-color-editor-line-height,
202
+ $kendo-color-editor-text: $kendo-color-editor-text,
203
+ $kendo-color-editor-bg: $kendo-color-editor-bg,
204
+ $kendo-color-editor-border: $kendo-color-editor-border,
205
+ $kendo-color-editor-focus-border: $kendo-color-editor-focus-border,
206
+ $kendo-color-editor-focus-shadow: $kendo-color-editor-focus-shadow,
207
+ $kendo-color-editor-header-actions-gap: $kendo-color-editor-header-actions-spacing,
208
+ $kendo-color-editor-sm-header-padding-y: $kendo-color-editor-sm-header-padding-y,
209
+ $kendo-color-editor-sm-header-padding-x: $kendo-color-editor-sm-header-padding-x,
210
+ $kendo-color-editor-md-header-padding-y: $kendo-color-editor-md-header-padding-y,
211
+ $kendo-color-editor-md-header-padding-x: $kendo-color-editor-md-header-padding-x,
212
+ $kendo-color-editor-lg-header-padding-y: $kendo-color-editor-lg-header-padding-y,
213
+ $kendo-color-editor-lg-header-padding-x: $kendo-color-editor-lg-header-padding-x,
214
+ $kendo-color-editor-color-preview-width: $kendo-color-editor-color-preview-width,
215
+ $kendo-color-editor-color-preview-height: $kendo-color-editor-color-preview-height,
216
+ $kendo-color-editor-preview-gap: $kendo-color-editor-preview-spacing,
217
+ $kendo-color-editor-sm-preview-gap: $kendo-color-editor-sm-preview-spacing,
218
+ $kendo-color-editor-md-preview-gap: $kendo-color-editor-md-preview-spacing,
219
+ $kendo-color-editor-lg-preview-gap: $kendo-color-editor-lg-preview-spacing,
220
+ $kendo-color-editor-sm-color-preview-width: $kendo-color-editor-sm-color-preview-width,
221
+ $kendo-color-editor-sm-color-preview-height: $kendo-color-editor-sm-color-preview-height,
222
+ $kendo-color-editor-md-color-preview-width: $kendo-color-editor-md-color-preview-width,
223
+ $kendo-color-editor-md-color-preview-height: $kendo-color-editor-md-color-preview-height,
224
+ $kendo-color-editor-lg-color-preview-width: $kendo-color-editor-lg-color-preview-width,
225
+ $kendo-color-editor-lg-color-preview-height: $kendo-color-editor-lg-color-preview-height,
226
+ $kendo-color-editor-views-gap: $kendo-color-editor-views-spacing,
227
+ $kendo-color-editor-sm-views-padding-y: $kendo-color-editor-sm-views-padding-y,
228
+ $kendo-color-editor-sm-views-padding-x: $kendo-color-editor-sm-views-padding-x,
229
+ $kendo-color-editor-md-views-padding-y: $kendo-color-editor-md-views-padding-y,
230
+ $kendo-color-editor-md-views-padding-x: $kendo-color-editor-md-views-padding-x,
231
+ $kendo-color-editor-lg-views-padding-y: $kendo-color-editor-lg-views-padding-y,
232
+ $kendo-color-editor-lg-views-padding-x: $kendo-color-editor-lg-views-padding-x,
233
+ $kendo-color-editor-color-gradient-focus-outline-color: $kendo-color-editor-color-gradient-focus-outline-color,
234
+ $kendo-color-editor-color-gradient-focus-outline: $kendo-color-editor-color-gradient-focus-outline,
235
+ $kendo-color-editor-color-gradient-focus-outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset,
236
+ $kendo-color-editor-sizes: $kendo-color-editor-sizes
237
+ );