@progress/kendo-theme-material 10.1.0-dev.6 → 10.1.1-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 (38) hide show
  1. package/dist/all.css +1 -1
  2. package/dist/material-aqua-dark.css +1 -1
  3. package/dist/material-arctic.css +1 -1
  4. package/dist/material-burnt-teal.css +1 -1
  5. package/dist/material-dataviz-v4.css +1 -1
  6. package/dist/material-eggplant.css +1 -1
  7. package/dist/material-lime-dark.css +1 -1
  8. package/dist/material-lime.css +1 -1
  9. package/dist/material-main-dark.css +1 -1
  10. package/dist/material-main.css +1 -1
  11. package/dist/material-nova.css +1 -1
  12. package/dist/material-pacific-dark.css +1 -1
  13. package/dist/material-pacific.css +1 -1
  14. package/dist/material-sky-dark.css +1 -1
  15. package/dist/material-sky.css +1 -1
  16. package/dist/material-smoke.css +1 -1
  17. package/dist/meta/sassdoc-data.json +4403 -1343
  18. package/dist/meta/sassdoc-raw-data.json +1829 -479
  19. package/dist/meta/variables.json +288 -0
  20. package/lib/swatches/material-aqua-dark.json +1 -1
  21. package/lib/swatches/material-arctic.json +1 -1
  22. package/lib/swatches/material-burnt-teal.json +1 -1
  23. package/lib/swatches/material-dataviz-v4.json +1 -1
  24. package/lib/swatches/material-eggplant.json +1 -1
  25. package/lib/swatches/material-lime-dark.json +1 -1
  26. package/lib/swatches/material-lime.json +1 -1
  27. package/lib/swatches/material-main-dark.json +1 -1
  28. package/lib/swatches/material-main.json +1 -1
  29. package/lib/swatches/material-nova.json +1 -1
  30. package/lib/swatches/material-pacific-dark.json +1 -1
  31. package/lib/swatches/material-pacific.json +1 -1
  32. package/lib/swatches/material-sky-dark.json +1 -1
  33. package/lib/swatches/material-sky.json +1 -1
  34. package/lib/swatches/material-smoke.json +1 -1
  35. package/package.json +5 -5
  36. package/scss/coloreditor/_variables.scss +146 -0
  37. package/scss/colorgradient/_variables.scss +104 -0
  38. package/scss/colorpalette/_variables.scss +41 -0
@@ -9,6 +9,16 @@ $kendo-color-editor-spacer: k-spacing(3) !default;
9
9
  /// The minimum width of the ColorEditor.
10
10
  /// @group color-editor
11
11
  $kendo-color-editor-min-width: 294px !default;
12
+ /// The minimum width of the ColorEditor.
13
+ /// @group color-editor
14
+ $kendo-color-editor-sm-min-width: 278px !default;
15
+ /// The minimum width of the ColorEditor.
16
+ /// @group color-editor
17
+ $kendo-color-editor-md-min-width: $kendo-color-editor-min-width !default;
18
+ /// The minimum width of the ColorEditor.
19
+ /// @group color-editor
20
+ $kendo-color-editor-lg-min-width: 364px !default;
21
+
12
22
  /// The width of the border around the ColorEditor.
13
23
  /// @group color-editor
14
24
  $kendo-color-editor-border-width: 1px !default;
@@ -50,6 +60,24 @@ $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-y !defa
50
60
  /// The spacing between the ColorEditor header actions.
51
61
  /// @group color-editor
52
62
  $kendo-color-editor-header-actions-gap: k-spacing(2) !default;
63
+ /// The vertical padding of the small ColorEditor header.
64
+ /// @group color-editor
65
+ $kendo-color-editor-sm-header-padding-y: $kendo-color-editor-header-padding-y !default;
66
+ /// The horizontal padding of the small ColorEditor header.
67
+ /// @group color-editor
68
+ $kendo-color-editor-sm-header-padding-x: $kendo-color-editor-header-padding-x !default;
69
+ /// The vertical padding of the medium ColorEditor header.
70
+ /// @group color-editor
71
+ $kendo-color-editor-md-header-padding-y: $kendo-color-editor-header-padding-y !default;
72
+ /// The horizontal padding of the medium ColorEditor header.
73
+ /// @group color-editor
74
+ $kendo-color-editor-md-header-padding-x: $kendo-color-editor-header-padding-x !default;
75
+ /// The vertical padding of the large ColorEditor header.
76
+ /// @group color-editor
77
+ $kendo-color-editor-lg-header-padding-y: k-spacing(4.5) !default;
78
+ /// The horizontal padding of the large ColorEditor header.
79
+ /// @group color-editor
80
+ $kendo-color-editor-lg-header-padding-x: k-spacing(4.5) !default;
53
81
 
54
82
  /// The width of the ColorEditor preview.
55
83
  /// @group color-editor
@@ -60,6 +88,34 @@ $kendo-color-editor-color-preview-height: 12px !default;
60
88
  /// The spacing between the colors in the ColorEditor preview.
61
89
  /// @group color-editor
62
90
  $kendo-color-editor-preview-gap: k-spacing(1) !default;
91
+ /// The spacing between the colors in the small ColorEditor preview.
92
+ /// @group color-editor
93
+ $kendo-color-editor-sm-preview-gap: k-spacing(2) !default;
94
+ /// The spacing between the colors in the medium ColorEditor preview.
95
+ /// @group color-editor
96
+ $kendo-color-editor-md-preview-gap: $kendo-color-editor-preview-gap !default;
97
+ /// The spacing between the colors in the large ColorEditor preview.
98
+ /// @group color-editor
99
+ $kendo-color-editor-lg-preview-gap: k-spacing(2) !default;
100
+
101
+ /// The width of the small ColorEditor preview.
102
+ /// @group color-editor
103
+ $kendo-color-editor-sm-color-preview-width: 34px !default;
104
+ /// The height of the small ColorEditor preview.
105
+ /// @group color-editor
106
+ $kendo-color-editor-sm-color-preview-height: 12px !default;
107
+ /// The width of the medium ColorEditor preview.
108
+ /// @group color-editor
109
+ $kendo-color-editor-md-color-preview-width: $kendo-color-editor-color-preview-width !default;
110
+ /// The height of the medium ColorEditor preview.
111
+ /// @group color-editor
112
+ $kendo-color-editor-md-color-preview-height: $kendo-color-editor-color-preview-height !default;
113
+ /// The width of the large ColorEditor preview.
114
+ /// @group color-editor
115
+ $kendo-color-editor-lg-color-preview-width: 42px !default;
116
+ /// The height of the large ColorEditor preview.
117
+ /// @group color-editor
118
+ $kendo-color-editor-lg-color-preview-height: 16px !default;
63
119
 
64
120
  /// The vertical padding of the ColorEditor views container.
65
121
  /// @group color-editor
@@ -70,6 +126,33 @@ $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-y !defaul
70
126
  /// The spacing of the ColorEditor views container.
71
127
  /// @group color-editor
72
128
  $kendo-color-editor-views-gap: $kendo-color-editor-spacer !default;
129
+ /// The vertical padding of the small ColorEditor views container.
130
+ /// @group color-editor
131
+ $kendo-color-editor-sm-views-padding-y: $kendo-color-editor-spacer !default;
132
+ /// The horizontal padding of the small ColorEditor views container.
133
+ /// @group color-editor
134
+ $kendo-color-editor-sm-views-padding-x: $kendo-color-editor-views-padding-y !default;
135
+ /// The spacing of the small ColorEditor views container.
136
+ /// @group color-editor
137
+ $kendo-color-editor-sm-views-gap: $kendo-color-editor-spacer !default;
138
+ /// The vertical padding of the medium ColorEditor views container.
139
+ /// @group color-editor
140
+ $kendo-color-editor-md-views-padding-y: $kendo-color-editor-views-padding-y !default;
141
+ /// The horizontal padding of the medium ColorEditor views container.
142
+ /// @group color-editor
143
+ $kendo-color-editor-md-views-padding-x: $kendo-color-editor-views-padding-x !default;
144
+ /// The spacing of the medium ColorEditor views container.
145
+ /// @group color-editor
146
+ $kendo-color-editor-md-views-gap: $kendo-color-editor-views-gap !default;
147
+ /// The vertical padding of the large ColorEditor views container.
148
+ /// @group color-editor
149
+ $kendo-color-editor-lg-views-padding-y: k-spacing(4.5) !default;
150
+ /// The horizontal padding of the large ColorEditor views container.
151
+ /// @group color-editor
152
+ $kendo-color-editor-lg-views-padding-x: k-spacing(4.5) !default;
153
+ /// The spacing of the large ColorEditor views container.
154
+ /// @group color-editor
155
+ $kendo-color-editor-lg-views-gap: k-spacing(4.5) !default;
73
156
 
74
157
  /// The outline color of the focused ColorGradient.
75
158
  /// @group color-editor
@@ -81,9 +164,48 @@ $kendo-color-editor-color-gradient-focus-outline: 2px !default;
81
164
  /// @group color-editor
82
165
  $kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;
83
166
 
167
+ /// The size map of the ColorEditor.
168
+ /// @group color-editor
169
+ $kendo-color-editor-sizes: (
170
+ sm: (
171
+ min-width: $kendo-color-editor-sm-min-width,
172
+ header-padding-x: $kendo-color-editor-sm-header-padding-x,
173
+ header-padding-y: $kendo-color-editor-sm-header-padding-y,
174
+ views-padding-x: $kendo-color-editor-sm-views-padding-x,
175
+ views-padding-y: $kendo-color-editor-sm-views-padding-y,
176
+ preview-gap: $kendo-color-editor-sm-preview-gap,
177
+ preview-width: $kendo-color-editor-sm-color-preview-width,
178
+ preview-height: $kendo-color-editor-sm-color-preview-height,
179
+
180
+ ),
181
+ md: (
182
+ min-width: $kendo-color-editor-md-min-width,
183
+ header-padding-x: $kendo-color-editor-md-header-padding-x,
184
+ header-padding-y: $kendo-color-editor-md-header-padding-y,
185
+ views-padding-x: $kendo-color-editor-md-views-padding-x,
186
+ views-padding-y: $kendo-color-editor-md-views-padding-y,
187
+ preview-gap: $kendo-color-editor-md-preview-gap,
188
+ preview-width: $kendo-color-editor-md-color-preview-width,
189
+ preview-height: $kendo-color-editor-md-color-preview-height,
190
+ ),
191
+ lg: (
192
+ min-width: $kendo-color-editor-lg-min-width,
193
+ header-padding-x: $kendo-color-editor-lg-header-padding-x,
194
+ header-padding-y: $kendo-color-editor-lg-header-padding-y,
195
+ views-padding-x: $kendo-color-editor-lg-views-padding-x,
196
+ views-padding-y: $kendo-color-editor-lg-views-padding-y,
197
+ preview-gap: $kendo-color-editor-lg-preview-gap,
198
+ preview-width: $kendo-color-editor-lg-color-preview-width,
199
+ preview-height: $kendo-color-editor-lg-color-preview-height,
200
+ )
201
+ ) !default;
202
+
84
203
  @forward "@progress/kendo-theme-default/scss/coloreditor/_variables.scss" with (
85
204
  $kendo-color-editor-spacer: $kendo-color-editor-spacer,
86
205
  $kendo-color-editor-min-width: $kendo-color-editor-min-width,
206
+ $kendo-color-editor-sm-min-width: $kendo-color-editor-sm-min-width,
207
+ $kendo-color-editor-md-min-width: $kendo-color-editor-md-min-width,
208
+ $kendo-color-editor-lg-min-width: $kendo-color-editor-lg-min-width,
87
209
  $kendo-color-editor-border-width: $kendo-color-editor-border-width,
88
210
  $kendo-color-editor-border-radius: $kendo-color-editor-border-radius,
89
211
  $kendo-color-editor-font-family: $kendo-color-editor-font-family,
@@ -96,13 +218,37 @@ $kendo-color-editor-color-gradient-focus-outline-offset: 2px !default;
96
218
  $kendo-color-editor-focus-shadow: $kendo-color-editor-focus-shadow,
97
219
  $kendo-color-editor-header-padding-y: $kendo-color-editor-header-padding-y,
98
220
  $kendo-color-editor-header-padding-x: $kendo-color-editor-header-padding-x,
221
+ $kendo-color-editor-sm-header-padding-y: $kendo-color-editor-sm-header-padding-y,
222
+ $kendo-color-editor-sm-header-padding-x: $kendo-color-editor-sm-header-padding-x,
223
+ $kendo-color-editor-md-header-padding-y: $kendo-color-editor-md-header-padding-y,
224
+ $kendo-color-editor-md-header-padding-x: $kendo-color-editor-md-header-padding-x,
225
+ $kendo-color-editor-lg-header-padding-y: $kendo-color-editor-lg-header-padding-y,
226
+ $kendo-color-editor-lg-header-padding-x: $kendo-color-editor-lg-header-padding-x,
99
227
  $kendo-color-editor-header-actions-gap: $kendo-color-editor-header-actions-gap,
100
228
  $kendo-color-editor-color-preview-width: $kendo-color-editor-color-preview-width,
101
229
  $kendo-color-editor-color-preview-height: $kendo-color-editor-color-preview-height,
102
230
  $kendo-color-editor-preview-gap: $kendo-color-editor-preview-gap,
231
+ $kendo-color-editor-sm-preview-gap: $kendo-color-editor-sm-preview-gap,
232
+ $kendo-color-editor-md-preview-gap: $kendo-color-editor-md-preview-gap,
233
+ $kendo-color-editor-lg-preview-gap: $kendo-color-editor-lg-preview-gap,
234
+ $kendo-color-editor-sm-color-preview-width: $kendo-color-editor-sm-color-preview-width,
235
+ $kendo-color-editor-sm-color-preview-height: $kendo-color-editor-sm-color-preview-height,
236
+ $kendo-color-editor-md-color-preview-width: $kendo-color-editor-md-color-preview-width,
237
+ $kendo-color-editor-md-color-preview-height: $kendo-color-editor-md-color-preview-height,
238
+ $kendo-color-editor-lg-color-preview-width: $kendo-color-editor-lg-color-preview-width,
239
+ $kendo-color-editor-lg-color-preview-height: $kendo-color-editor-lg-color-preview-height,
103
240
  $kendo-color-editor-views-padding-y: $kendo-color-editor-views-padding-y,
104
241
  $kendo-color-editor-views-padding-x: $kendo-color-editor-views-padding-x,
105
242
  $kendo-color-editor-views-gap: $kendo-color-editor-views-gap,
243
+ $kendo-color-editor-sm-views-padding-y: $kendo-color-editor-sm-views-padding-y,
244
+ $kendo-color-editor-sm-views-padding-x: $kendo-color-editor-sm-views-padding-x,
245
+ $kendo-color-editor-sm-views-gap: $kendo-color-editor-sm-views-gap,
246
+ $kendo-color-editor-md-views-padding-y: $kendo-color-editor-md-views-padding-y,
247
+ $kendo-color-editor-md-views-padding-x: $kendo-color-editor-md-views-padding-x,
248
+ $kendo-color-editor-md-views-gap: $kendo-color-editor-md-views-gap,
249
+ $kendo-color-editor-lg-views-padding-y: $kendo-color-editor-lg-views-padding-y,
250
+ $kendo-color-editor-lg-views-padding-x: $kendo-color-editor-lg-views-padding-x,
251
+ $kendo-color-editor-lg-views-gap: $kendo-color-editor-lg-views-gap,
106
252
  $kendo-color-editor-color-gradient-focus-outline-color: $kendo-color-editor-color-gradient-focus-outline-color,
107
253
  $kendo-color-editor-color-gradient-focus-outline: $kendo-color-editor-color-gradient-focus-outline,
108
254
  $kendo-color-editor-color-gradient-focus-outline-offset: $kendo-color-editor-color-gradient-focus-outline-offset
@@ -43,6 +43,25 @@ $kendo-color-gradient-bg: $kendo-component-bg !default;
43
43
  /// The border color of the ColorGradient.
44
44
  /// @group color-gradient
45
45
  $kendo-color-gradient-border: $kendo-component-border !default;
46
+ /// The width of the small ColorGradient.
47
+ /// @group color-gradient
48
+ $kendo-color-gradient-sm-width: 254px !default;
49
+ /// The width of the medium ColorGradient.
50
+ /// @group color-gradient
51
+ $kendo-color-gradient-md-width: $kendo-color-gradient-width !default;
52
+ /// The width of the large ColorGradient.
53
+ /// @group color-gradient
54
+ $kendo-color-gradient-lg-width: 328px !default;
55
+
56
+ /// The spacing between the sections of the small ColorGradient.
57
+ /// @group color-gradient
58
+ $kendo-color-gradient-sm-gap: k-spacing(2.5) !default;
59
+ /// The spacing between the sections of the medium ColorGradient.
60
+ /// @group color-gradient
61
+ $kendo-color-gradient-md-gap: $kendo-color-gradient-gap !default;
62
+ /// The spacing between the sections of the large ColorGradient.
63
+ /// @group color-gradient
64
+ $kendo-color-gradient-lg-gap: k-spacing(4) !default;
46
65
 
47
66
  /// The border color of the focused ColorGradient.
48
67
  /// @group color-gradient
@@ -60,6 +79,25 @@ $kendo-color-gradient-canvas-gap: $kendo-color-gradient-spacer !default;
60
79
  /// The height the ColorGradient canvas hsv rectangle.
61
80
  /// @group color-gradient
62
81
  $kendo-color-gradient-canvas-rectangle-height: 180px !default;
82
+ /// The height the small ColorGradient canvas hsv rectangle.
83
+ /// @group color-gradient
84
+ $kendo-color-gradient-sm-canvas-rectangle-height: 210px !default;
85
+ /// The height the medium ColorGradient canvas hsv rectangle.
86
+ /// @group color-gradient
87
+ $kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height !default;
88
+ /// The height the large ColorGradient canvas hsv rectangle.
89
+ /// @group color-gradient
90
+ $kendo-color-gradient-lg-canvas-rectangle-height: 266px !default;
91
+
92
+ /// The spacing between the items of the small ColorGradient canvas.
93
+ /// @group color-gradient
94
+ $kendo-color-gradient-sm-canvas-gap: k-spacing(2.5) !default;
95
+ /// The spacing between the items of the medium ColorGradient canvas.
96
+ /// @group color-gradient
97
+ $kendo-color-gradient-md-canvas-gap: $kendo-color-gradient-canvas-gap !default;
98
+ /// The spacing between the items of the large ColorGradient canvas.
99
+ /// @group color-gradient
100
+ $kendo-color-gradient-lg-canvas-gap: k-spacing(4) !default;
63
101
 
64
102
  /// The width of the ColorGradient slider.
65
103
  /// @group color-gradient
@@ -80,6 +118,15 @@ $kendo-color-gradient-slider-horizontal-size: 100% !default;
80
118
  /// The background image of the ColorGradient alpha slider.
81
119
  /// @group color-gradient
82
120
  $kendo-color-gradient-slider-alpha-bgr: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAuSURBVHgBxYyxDQAwDMJIL+YT+DjtzFRliUfLcklqBCRT4eCTxbD6kdL2/LgYXqpvCbs3kBv/AAAAAElFTkSuQmCC" !default;
121
+ /// The height of the small ColorGradient vertical slider.
122
+ /// @group color-gradient
123
+ $kendo-color-gradient-sm-slider-vertical-size: 210px !default;
124
+ /// The height of the medium ColorGradient vertical slider.
125
+ /// @group color-gradient
126
+ $kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-slider-vertical-size !default;
127
+ /// The height of the large ColorGradient vertical slider.
128
+ /// @group color-gradient
129
+ $kendo-color-gradient-lg-slider-vertical-size: 266px !default;
83
130
 
84
131
  /// The width of the ColorGradient canvas drag handle.
85
132
  /// @group color-gradient
@@ -135,6 +182,16 @@ $kendo-color-gradient-input-label-gap: k-spacing(1) !default;
135
182
  /// @group color-gradient
136
183
  $kendo-color-gradient-input-label-text: $kendo-subtle-text !default;
137
184
 
185
+ /// The width of the small ColorGradient input.
186
+ /// @group color-gradient
187
+ $kendo-color-gradient-sm-input-width: 46px !default;
188
+ /// The width of the medium ColorGradient input.
189
+ /// @group color-gradient
190
+ $kendo-color-gradient-md-input-width: $kendo-color-gradient-input-width !default;
191
+ /// The width of the large ColorGradient input.
192
+ /// @group color-gradient
193
+ $kendo-color-gradient-lg-input-width: 62px !default;
194
+
138
195
  /// The font weight of the ColorGradient contrast ratio text.
139
196
  /// @group color-gradient
140
197
  $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-medium, normal ) !default;
@@ -142,9 +199,44 @@ $kendo-color-gradient-contrast-ratio-font-weight: var( --kendo-font-weight-mediu
142
199
  /// @group color-gradient
143
200
  $kendo-color-gradient-contrast-spacer: k-spacing(2) !default;
144
201
 
202
+ /// The size map of the ColorGradient.
203
+ /// @group color-gradient
204
+ $kendo-color-gradient-sizes: (
205
+ sm: (
206
+ width: $kendo-color-gradient-sm-width,
207
+ vertical-slider-height: $kendo-color-gradient-sm-slider-vertical-size,
208
+ rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
209
+ input-width: $kendo-color-gradient-sm-input-width,
210
+ gap: $kendo-color-gradient-sm-gap,
211
+ canvas-gap: $kendo-color-gradient-sm-canvas-gap
212
+ ),
213
+ md: (
214
+ width: $kendo-color-gradient-md-width,
215
+ vertical-slider-height: $kendo-color-gradient-md-slider-vertical-size,
216
+ rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
217
+ input-width: $kendo-color-gradient-md-input-width,
218
+ gap: $kendo-color-gradient-md-gap,
219
+ canvas-gap: $kendo-color-gradient-md-canvas-gap
220
+ ),
221
+ lg: (
222
+ width: $kendo-color-gradient-lg-width,
223
+ vertical-slider-height: $kendo-color-gradient-lg-slider-vertical-size,
224
+ rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
225
+ input-width: $kendo-color-gradient-lg-input-width,
226
+ gap: $kendo-color-gradient-lg-gap,
227
+ canvas-gap: $kendo-color-gradient-lg-canvas-gap
228
+ )
229
+ ) !default;
230
+
145
231
  @forward "@progress/kendo-theme-default/scss/colorgradient/_variables.scss" with (
146
232
  $kendo-color-gradient-spacer: $kendo-color-gradient-spacer,
147
233
  $kendo-color-gradient-width: $kendo-color-gradient-width,
234
+ $kendo-color-gradient-sm-width: $kendo-color-gradient-sm-width,
235
+ $kendo-color-gradient-md-width: $kendo-color-gradient-md-width,
236
+ $kendo-color-gradient-lg-width: $kendo-color-gradient-lg-width,
237
+ $kendo-color-gradient-sm-gap: $kendo-color-gradient-sm-gap,
238
+ $kendo-color-gradient-md-gap: $kendo-color-gradient-md-gap,
239
+ $kendo-color-gradient-lg-gap: $kendo-color-gradient-lg-gap,
148
240
  $kendo-color-gradient-border-width: $kendo-color-gradient-border-width,
149
241
  $kendo-color-gradient-border-radius: $kendo-color-gradient-border-radius,
150
242
  $kendo-color-gradient-padding-y: $kendo-color-gradient-padding-y,
@@ -161,12 +253,21 @@ $kendo-color-gradient-contrast-spacer: k-spacing(2) !default;
161
253
  $kendo-color-gradient-canvas-border-radius: $kendo-color-gradient-canvas-border-radius,
162
254
  $kendo-color-gradient-canvas-gap: $kendo-color-gradient-canvas-gap,
163
255
  $kendo-color-gradient-canvas-rectangle-height: $kendo-color-gradient-canvas-rectangle-height,
256
+ $kendo-color-gradient-sm-canvas-rectangle-height: $kendo-color-gradient-sm-canvas-rectangle-height,
257
+ $kendo-color-gradient-md-canvas-rectangle-height: $kendo-color-gradient-md-canvas-rectangle-height,
258
+ $kendo-color-gradient-lg-canvas-rectangle-height: $kendo-color-gradient-lg-canvas-rectangle-height,
259
+ $kendo-color-gradient-sm-canvas-gap: $kendo-color-gradient-sm-canvas-gap,
260
+ $kendo-color-gradient-md-canvas-gap: $kendo-color-gradient-md-canvas-gap,
261
+ $kendo-color-gradient-lg-canvas-gap: $kendo-color-gradient-lg-canvas-gap,
164
262
  $kendo-color-gradient-slider-track-size: $kendo-color-gradient-slider-track-size,
165
263
  $kendo-color-gradient-slider-border-radius: $kendo-color-gradient-slider-border-radius,
166
264
  $kendo-color-gradient-slider-draghandle-border-width: $kendo-color-gradient-slider-draghandle-border-width,
167
265
  $kendo-color-gradient-slider-vertical-size: $kendo-color-gradient-slider-vertical-size,
168
266
  $kendo-color-gradient-slider-horizontal-size: $kendo-color-gradient-slider-horizontal-size,
169
267
  $kendo-color-gradient-slider-alpha-bgr: $kendo-color-gradient-slider-alpha-bgr,
268
+ $kendo-color-gradient-sm-slider-vertical-size: $kendo-color-gradient-sm-slider-vertical-size,
269
+ $kendo-color-gradient-md-slider-vertical-size: $kendo-color-gradient-md-slider-vertical-size,
270
+ $kendo-color-gradient-lg-slider-vertical-size: $kendo-color-gradient-lg-slider-vertical-size,
170
271
  $kendo-color-gradient-draghandle-width: $kendo-color-gradient-draghandle-width,
171
272
  $kendo-color-gradient-draghandle-height: $kendo-color-gradient-draghandle-height,
172
273
  $kendo-color-gradient-draghandle-border-width: $kendo-color-gradient-draghandle-border-width,
@@ -184,6 +285,9 @@ $kendo-color-gradient-contrast-spacer: k-spacing(2) !default;
184
285
  $kendo-color-gradient-input-gap: $kendo-color-gradient-input-gap,
185
286
  $kendo-color-gradient-input-label-gap: $kendo-color-gradient-input-label-gap,
186
287
  $kendo-color-gradient-input-label-text: $kendo-color-gradient-input-label-text,
288
+ $kendo-color-gradient-sm-input-width: $kendo-color-gradient-sm-input-width,
289
+ $kendo-color-gradient-md-input-width: $kendo-color-gradient-md-input-width,
290
+ $kendo-color-gradient-lg-input-width: $kendo-color-gradient-lg-input-width,
187
291
  $kendo-color-gradient-contrast-ratio-font-weight: $kendo-color-gradient-contrast-ratio-font-weight,
188
292
  $kendo-color-gradient-contrast-spacer: $kendo-color-gradient-contrast-spacer
189
293
  );
@@ -18,6 +18,24 @@ $kendo-color-palette-tile-width: k-spacing(6) !default;
18
18
  /// The height of the ColorPalette tile.
19
19
  /// @group color-palette
20
20
  $kendo-color-palette-tile-height: $kendo-color-palette-tile-width !default;
21
+ // The width of the small ColorPalette tile.
22
+ /// @group color-palette
23
+ $kendo-color-palette-tile-sm-width: k-spacing(5.5) !default;
24
+ /// The height of the small ColorPalette tile.
25
+ /// @group color-palette
26
+ $kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-width !default;
27
+ /// The width of the medium ColorPalette tile.
28
+ /// @group color-palette
29
+ $kendo-color-palette-tile-md-width: $kendo-color-palette-tile-width !default;
30
+ /// The height of the medium ColorPalette tile.
31
+ /// @group color-palette
32
+ $kendo-color-palette-tile-md-height: $kendo-color-palette-tile-height !default;
33
+ /// The width of the large ColorPalette tile.
34
+ /// @group color-palette
35
+ $kendo-color-palette-tile-lg-width: k-spacing(8) !default;
36
+ /// The height of the large ColorPalette tile.
37
+ /// @group color-palette
38
+ $kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-width !default;
21
39
  /// The shadow of the ColorPalette focused tile.
22
40
  /// @group color-palette
23
41
  $kendo-color-palette-tile-focus-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, .5 ) !default;
@@ -28,12 +46,35 @@ $kendo-color-palette-tile-hover-shadow: 0 0 3px 1px rgba( black, .3 ), inset 0 0
28
46
  /// @group color-palette
29
47
  $kendo-color-palette-tile-selected-shadow: 0 1px 3px 1px rgba( black, .3 ), inset 0 0 0 1px rgba( white, 1 ) !default;
30
48
 
49
+ /// The size map of the ColorPalette.
50
+ /// @group color-palette
51
+ $kendo-color-palette-sizes: (
52
+ sm: (
53
+ width: $kendo-color-palette-tile-sm-width,
54
+ height: $kendo-color-palette-tile-sm-height
55
+ ),
56
+ md: (
57
+ width: $kendo-color-palette-tile-md-width,
58
+ height: $kendo-color-palette-tile-md-height
59
+ ),
60
+ lg: (
61
+ width: $kendo-color-palette-tile-lg-width,
62
+ height: $kendo-color-palette-tile-lg-height
63
+ )
64
+ ) !default;
65
+
31
66
  @forward "@progress/kendo-theme-default/scss/colorpalette/_variables.scss" with (
32
67
  $kendo-color-palette-font-family: $kendo-color-palette-font-family,
33
68
  $kendo-color-palette-font-size: $kendo-color-palette-font-size,
34
69
  $kendo-color-palette-line-height: $kendo-color-palette-line-height,
35
70
  $kendo-color-palette-tile-width: $kendo-color-palette-tile-width,
36
71
  $kendo-color-palette-tile-height: $kendo-color-palette-tile-height,
72
+ $kendo-color-palette-tile-sm-width: $kendo-color-palette-tile-sm-width,
73
+ $kendo-color-palette-tile-sm-height: $kendo-color-palette-tile-sm-height,
74
+ $kendo-color-palette-tile-md-width: $kendo-color-palette-tile-md-width,
75
+ $kendo-color-palette-tile-md-height: $kendo-color-palette-tile-md-height,
76
+ $kendo-color-palette-tile-lg-width: $kendo-color-palette-tile-lg-width,
77
+ $kendo-color-palette-tile-lg-height: $kendo-color-palette-tile-lg-height,
37
78
  $kendo-color-palette-tile-focus-shadow: $kendo-color-palette-tile-focus-shadow,
38
79
  $kendo-color-palette-tile-hover-shadow: $kendo-color-palette-tile-hover-shadow,
39
80
  $kendo-color-palette-tile-selected-shadow: $kendo-color-palette-tile-selected-shadow