@progress/kendo-theme-fluent 9.1.0-dev.0 → 9.1.0-dev.2

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 (15) 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 +944 -674
  5. package/dist/meta/sassdoc-raw-data.json +429 -304
  6. package/dist/meta/variables.json +61 -41
  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 +5 -5
  11. package/scss/menu/_layout.scss +24 -61
  12. package/scss/menu/_theme.scss +22 -5
  13. package/scss/menu/_variables.scss +106 -79
  14. package/scss/tabstrip/_layout.scss +7 -15
  15. package/scss/tabstrip/_variables.scss +1 -1
package/scss/menu/_variables.scss CHANGED
@@ -3,169 +3,196 @@
3
3
  @use "../list/_variables.scss"as *;
4
4
  @use "../popup/_variables.scss"as *;
5
5
 
6
- /// Width of the menu border.
6
+ /// The width of the border around the Menu.
7
7
  /// @group menu
8
8
  $kendo-menu-border-width: k-spacing(0) !default;
9
- // Font family of the menu.
9
+
10
+ // The font family of the Menu.
10
11
  /// @group menu
11
12
  $kendo-menu-font-family: var( --kendo-font-family, inherit ) !default;
12
- // Font size of the menu.
13
+ // The font size of the Menu.
13
14
  /// @group menu
14
15
  $kendo-menu-font-size: var( --kendo-font-size, inherit ) !default;
15
- /// Line heights used along with $kendo-font-size.
16
+ /// The line heights of the Menu used along with $kendo-font-size.
16
17
  /// @group menu
17
18
  $kendo-menu-line-height: var( --kendo-line-height, normal ) !default;
18
19
 
19
- /// Padding of menu root items.
20
+ /// The background color of the Menu.
20
21
  /// @group menu
21
- $kendo-menu-item-padding-x: k-spacing(2) !default;
22
- $kendo-menu-item-padding-y: k-spacing(3) !default;
23
-
24
- /// Spacing between menu root items.
22
+ $kendo-menu-bg: transparent !default;
23
+ /// The text color of the Menu.
25
24
  /// @group menu
26
- $kendo-menu-item-spacing: k-spacing(0) !default;
27
- /// Spacing between menu root items text and icons.
25
+ $kendo-menu-text: var( --kendo-body-text, inherit ) !default;
26
+ /// The border color of the Menu.
28
27
  /// @group menu
29
- $kendo-menu-item-icon-spacing: var( --kendo-icon-spacing, .5rem ) !default;
30
- /// Spacing between menu separator and items.
28
+ $kendo-menu-border: initial !default;
29
+ /// The shadow of the Menu.
31
30
  /// @group menu
32
- $kendo-menu-separator-margin: k-spacing(1) !default;
31
+ $kendo-menu-shadow: none !default;
33
32
 
34
- /// Separator width
35
- /// @group menu
36
- $kendo-menu-separator-width: 1px !default;
37
33
 
38
- /// The base outline of focused menu item.
39
- /// @group menu
40
- $kendo-menu-item-focus-outline-offset: calc( #{k-spacing(0.5)} * -1 ) !default;
41
- $kendo-menu-item-focus-outline-width: 1px !default;
42
- $kendo-menu-item-focus-outline-style: solid !default;
34
+ // Menu item
43
35
 
44
- /// The text color of the menu.
36
+ /// The horizontal padding of Menu item.
45
37
  /// @group menu
46
- $kendo-menu-text: var( --kendo-body-text, inherit ) !default;
47
- /// The background color of the menu.
38
+ $kendo-menu-item-padding-x: k-spacing(2) !default;
39
+ /// The vertical padding of the Menu item.
48
40
  /// @group menu
49
- $kendo-menu-bg: transparent !default;
50
- /// The border color of the menu.
41
+ $kendo-menu-item-padding-y: k-spacing(3) !default;
42
+
43
+ /// The spacing between the Menu items.
51
44
  /// @group menu
52
- $kendo-menu-border: initial !default;
53
- /// The shadow of the menu.
45
+ $kendo-menu-item-spacing: k-spacing(0) !default;
46
+ /// The spacing between the Menu item text and icons.
54
47
  /// @group menu
55
- $kendo-menu-shadow: none !default;
48
+ $kendo-menu-item-icon-spacing: var( --kendo-icon-spacing, .5rem ) !default;
49
+
50
+ /// The font weight of the selected Menu item.
51
+ /// @group menu
52
+ $kendo-menu-item-selected-font-weight: var( --kendo-font-weight-bold, normal ) !default;
56
53
 
57
- /// The text color of menu items.
54
+ /// The text color of Menu item.
58
55
  /// @group menu
59
56
  $kendo-menu-item-text: $kendo-menu-text !default;
60
- /// The background color of menu items.
57
+ /// The background color of Menu item.
61
58
  /// @group menu
62
59
  $kendo-menu-item-bg: transparent !default;
63
60
 
64
- /// The text color of hover menu items.
61
+ /// The text color of hovered Menu item.
65
62
  /// @group menu
66
63
  $kendo-menu-item-hover-text: var( --kendo-hover-text, inherit ) !default;
67
- /// The background color of hover menu items.
64
+ /// The background color of hovered Menu item.
68
65
  /// @group menu
69
66
  $kendo-menu-item-hover-bg: var( --kendo-hover-bg, initial ) !default;
70
67
 
71
- /// The text color of focused menu items.
68
+ /// The text color of active Menu item.
69
+ /// @group menu
70
+ $kendo-menu-item-active-text: $kendo-menu-item-hover-text !default;
71
+ /// The background color of active Menu item.
72
+ /// @group menu
73
+ $kendo-menu-item-active-bg: var( --kendo-selected-bg, initial ) !default;
74
+
75
+ /// The text color of focused Menu item.
72
76
  /// @group menu
73
77
  $kendo-menu-item-focus-text: $kendo-menu-item-text !default;
74
- /// The background color of focused menu items.
78
+ /// The background color of focused Menu item.
75
79
  /// @group menu
76
80
  $kendo-menu-item-focus-bg: $kendo-menu-item-bg !default;
77
- /// The outline of focused menu items.
81
+
82
+ /// The outline of focused Menu item.
78
83
  /// @group menu
79
84
  $kendo-menu-item-focus-outline: var( --kendo-focus-outline, none ) !default;
85
+ $kendo-menu-item-focus-outline-offset: calc( #{k-spacing(0.5)} * -1 ) !default;
86
+ $kendo-menu-item-focus-outline-width: 1px !default;
87
+ $kendo-menu-item-focus-outline-style: solid !default;
88
+
89
+ /// The text color of disabled Menu item.
90
+ /// @group menu
91
+ $kendo-menu-item-disabled-text: var( --kendo-disabled-text, initial ) !default;
92
+ /// The background color of disabled Menu item.
93
+ /// @group menu
94
+ $kendo-menu-item-disabled-bg: $kendo-menu-item-bg !default;
80
95
 
81
- /// The text color of expanded menu items.
96
+ /// The text color of selected Menu item.
82
97
  /// @group menu
83
- $kendo-menu-item-expanded-text: $kendo-menu-item-hover-text !default;
84
- /// The background color of expanded menu items.
98
+ $kendo-menu-item-selected-text: null !default;
99
+ /// The background color of selected Menu item.
85
100
  /// @group menu
86
- $kendo-menu-item-expanded-bg: var( --kendo-selected-bg, initial ) !default;
101
+ $kendo-menu-item-selected-bg: null !default;
87
102
 
88
- /// The text color of disabled menu items.
103
+
104
+ // Menu Separator
105
+
106
+ /// The inline margin of the horizontal Menu separator.
89
107
  /// @group menu
90
- $kendo-menu-item-disabled-text: var( --kendo-disabled-text, initial ) !default;
91
- /// The background color of disabled menu items.
108
+ $kendo-menu-separator-margin-inline: k-spacing(1);
109
+ /// The block margin of the horizontal Menu separator.
92
110
  /// @group menu
93
- $kendo-menu-item-disabled-bg: $kendo-menu-item-bg !default;
111
+ $kendo-menu-separator-margin-block: k-spacing(3);
112
+ /// The width of the Menu separator.
113
+ /// @group menu
114
+ $kendo-menu-separator-width: 1px !default;
115
+ /// The border color of Menu separator.
116
+ /// @group menu
117
+ $kendo-menu-separator-border: color-mix(in srgb, var(--kendo-color-border, #8a8886) 16%, transparent) !default;
118
+
119
+
120
+ // Menu Popup
94
121
 
95
- /// Horizontal padding of the menu popup.
122
+ /// The horizontal padding of the Menu popup.
96
123
  /// @group menu
97
124
  $kendo-menu-popup-padding-x: $kendo-popup-padding-x !default;
98
- /// Vertical padding of the menu popup.
125
+ /// The vertical padding of the Menu popup.
99
126
  /// @group menu
100
127
  $kendo-menu-popup-padding-y: $kendo-popup-padding-y !default;
101
128
 
102
- /// Width of the border around the menu popup.
129
+ /// The width of the border around the Menu popup.
103
130
  /// @group menu
104
131
  $kendo-menu-popup-border-width: $kendo-popup-border-width !default;
105
132
 
106
- /// Font sizes of the menu popup.
133
+ /// The font sizes of the Menu popup.
107
134
  /// @group menu
108
135
  $kendo-menu-popup-font-size: var( --kendo-font-size, inherit ) !default;
109
136
  $kendo-menu-popup-sm-font-size: $kendo-menu-popup-font-size !default;
110
137
  $kendo-menu-popup-md-font-size: $kendo-menu-popup-font-size !default;
111
138
  $kendo-menu-popup-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
112
139
 
113
- /// Line heights used along with $kendo-font-size.
140
+ /// The line heights used along with $kendo-font-size.
114
141
  /// @group menu
115
142
  $kendo-menu-popup-line-height: var( --kendo-line-height, 30px ) !default;
116
143
  $kendo-menu-popup-sm-line-height: $kendo-menu-popup-line-height !default;
117
144
  $kendo-menu-popup-md-line-height: $kendo-menu-popup-line-height !default;
118
145
  $kendo-menu-popup-lg-line-height: $kendo-menu-popup-line-height !default;
119
146
 
120
- /// The background of the menu popup.
147
+ /// The background color of the Menu popup.
121
148
  /// @group menu
122
149
  $kendo-menu-popup-bg: var( --kendo-component-bg, initial ) !default;
123
- /// The border color of the menu popup.
150
+ /// The border color of the Menu popup.
124
151
  /// @group menu
125
152
  $kendo-menu-popup-border: initial !default;
126
- /// The shadow of the menu popup.
153
+ /// The shadow of the Menu popup.
127
154
  /// @group menu
128
155
  $kendo-menu-popup-shadow: var( --kendo-box-shadow-depth-6, none ) !default;
129
156
 
130
- /// Horizontal padding of the menu item in popup.
157
+ /// The horizontal padding of the Menu item in popup.
131
158
  /// @group menu
132
159
  $kendo-menu-popup-item-padding-x: k-spacing(2) !default;
133
160
  $kendo-menu-popup-sm-item-padding-x: $kendo-menu-popup-item-padding-x !default;
134
161
  $kendo-menu-popup-md-item-padding-x: $kendo-menu-popup-item-padding-x !default;
135
162
  $kendo-menu-popup-lg-item-padding-x: $kendo-menu-popup-item-padding-x !default;
136
- /// Vertical padding of the menu item in popup.
163
+ /// The vertical padding of the Menu item in popup.
137
164
  /// @group menu
138
165
  $kendo-menu-popup-sm-item-padding-y: $kendo-list-sm-item-padding-y !default;
139
166
  $kendo-menu-popup-md-item-padding-y: $kendo-list-md-item-padding-y !default;
140
167
  $kendo-menu-popup-lg-item-padding-y: $kendo-list-lg-item-padding-y !default;
141
- /// The end padding of the menu item in popup.
168
+ /// The end padding of the Menu item in popup.
142
169
  /// @group menu
143
170
  $kendo-menu-popup-sm-item-padding-end: calc( calc( #{$kendo-menu-popup-sm-item-padding-x} * 2 ) + var( --kendo-icon-size, 1rem ) ) !default;
144
171
  $kendo-menu-popup-md-item-padding-end: calc( calc( #{$kendo-menu-popup-md-item-padding-x} * 2 ) + var( --kendo-icon-size, 1rem ) ) !default;
145
172
  $kendo-menu-popup-lg-item-padding-end: calc( calc( #{$kendo-menu-popup-lg-item-padding-x} * 2 ) + var( --kendo-icon-size, 1rem ) ) !default;
146
173
 
147
- /// The start margin of the menu item expand icon.
174
+ /// The start margin of the Menu item expand icon.
148
175
  /// @group menu
149
176
  $kendo-menu-popup-sm-item-icon-margin-start: k-spacing(0) !default;
150
177
  $kendo-menu-popup-item-icon-md-margin-start: k-spacing(0) !default;
151
178
  $kendo-menu-popup-lg-item-icon-margin-start: k-spacing(0) !default;
152
- /// The end margin of the menu item expand icon.
179
+ /// The end margin of the Menu item expand icon.
153
180
  /// @group menu
154
181
  $kendo-menu-popup-sm-item-icon-margin-end: calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-sm-item-padding-x}) ) !default;
155
182
  $kendo-menu-popup-item-icon-md-margin-end: calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-md-item-padding-x}) ) !default;
156
183
  $kendo-menu-popup-lg-item-icon-margin-end: calc( -1 * (var( --kendo-icon-size, 1rem ) + #{$kendo-menu-popup-lg-item-padding-x}) ) !default;
157
184
 
158
- /// The base shadow of focused menu item in popup.
185
+ /// The base shadow of focused Menu item in popup.
159
186
  /// @group menu
160
187
  $kendo-menu-popup-focus-outline-offset: $kendo-menu-item-focus-outline-offset !default;
161
188
  $kendo-menu-popup-focus-outline-width: $kendo-menu-item-focus-outline-width !default;
162
189
  $kendo-menu-popup-focus-outline-style: $kendo-menu-item-focus-outline-style !default;
163
190
 
164
- /// The spacing between the menu items in popup.
191
+ /// The spacing between the Menu items in popup.
165
192
  /// @group menu
166
193
  $kendo-menu-popup-item-spacing: k-spacing(0) !default;
167
194
 
168
- /// Sizes map for the menu.
195
+ /// The sizes map for the Menu.
169
196
  /// @group menu
170
197
  $kendo-menu-sizes: (
171
198
  sm: (
@@ -197,58 +224,58 @@ $kendo-menu-sizes: (
197
224
  )
198
225
  ) !default;
199
226
 
200
- /// The text color of the menu item in popup.
227
+ /// The text color of the Menu item in popup.
201
228
  /// @group menu
202
229
  $kendo-menu-popup-item-text: $kendo-list-item-text !default;
203
- /// The background of the menu item in popup.
230
+ /// The background color of the Menu item in popup.
204
231
  /// @group menu
205
232
  $kendo-menu-popup-item-bg: $kendo-list-item-bg !default;
206
233
 
207
- /// The text color of hovered menu item in popup.
234
+ /// The text color of hovered Menu item in popup.
208
235
  /// @group menu
209
236
  $kendo-menu-popup-item-hover-text: $kendo-list-item-hover-text !default;
210
- /// The background of hovered menu item in popup.
237
+ /// The background color of hovered Menu item in popup.
211
238
  /// @group menu
212
239
  $kendo-menu-popup-item-hover-bg: $kendo-list-item-hover-bg !default;
213
240
 
214
- /// The text color of focused menu items.
241
+ /// The text color of focused Menu items.
215
242
  /// @group menu
216
243
  $kendo-menu-popup-item-focus-text: $kendo-menu-item-text !default;
217
- /// The background color of focused menu items.
244
+ /// The background color of focused Menu items.
218
245
  /// @group menu
219
246
  $kendo-menu-popup-item-focus-bg: $kendo-menu-item-bg !default;
220
- /// The outline of focused menu items.
247
+ /// The outline of focused Menu items.
221
248
  /// @group menu
222
249
  $kendo-menu-popup-item-focus-outline: if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130)) !default;
223
250
 
224
- /// The text color of expanded menu item in popup.
251
+ /// The text color of active Menu item in popup.
225
252
  /// @group menu
226
- $kendo-menu-popup-item-expanded-text: $kendo-list-item-selected-text !default;
227
- /// The background of expanded menu item in popup.
253
+ $kendo-menu-popup-item-active-text: $kendo-list-item-selected-text !default;
254
+ /// The background color of active Menu item in popup.
228
255
  /// @group menu
229
- $kendo-menu-popup-item-expanded-bg: $kendo-list-item-selected-bg !default;
256
+ $kendo-menu-popup-item-active-bg: $kendo-list-item-selected-bg !default;
230
257
 
231
- /// The text color of disabled menu item in popup.
258
+ /// The text color of disabled Menu item in popup.
232
259
  /// @group menu
233
260
  $kendo-menu-popup-item-disabled-text: $kendo-list-item-disabled-text !default;
234
- /// The background of disabled menu item in popup.
261
+ /// The background color of disabled Menu item in popup.
235
262
  /// @group menu
236
263
  $kendo-menu-popup-item-disabled-bg: $kendo-list-item-disabled-bg !default;
237
264
 
238
- /// The background color of scroll menu buttons.
265
+ /// The background color of Menu scroll buttons.
239
266
  /// @group menu
240
267
  $kendo-menu-scroll-button-bg: var( --kendo-component-bg, $kendo-component-bg ) !default;
241
- /// The border color of scroll menu buttons.
268
+ /// The border color of Menu scroll buttons.
242
269
  /// @group menu
243
270
  $kendo-menu-scroll-button-border: var( --kendo-component-border, $kendo-component-border ) !default;
244
271
 
245
- /// The background color of hover scroll menu buttons.
272
+ /// The background color of hover Menu scroll buttons.
246
273
  /// @group menu
247
274
  $kendo-menu-scroll-button-hover-bg: null !default;
248
- /// The border color of scroll hover menu buttons.
275
+ /// The border color of hover Menu scroll buttons.
249
276
  /// @group menu
250
277
  $kendo-menu-scroll-button-hover-border: null !default;
251
278
 
252
- /// The color of menu items icon.
279
+ /// The color of the Menu items icon.
253
280
  /// @group menu
254
281
  $kendo-menu-icon-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
package/scss/tabstrip/_layout.scss CHANGED
@@ -82,6 +82,13 @@
82
82
  }
83
83
  }
84
84
 
85
+ .k-item-actions {
86
+ margin: 0;
87
+ padding: 0;
88
+ display: flex;
89
+ flex-direction: row;
90
+ }
91
+
85
92
  .k-tab-on-top {
86
93
  z-index: 1;
87
94
  }
@@ -163,21 +170,6 @@
163
170
  white-space: nowrap;
164
171
  overflow: hidden;
165
172
  }
166
-
167
- > .k-button {
168
- padding-block: var( --kendo-tabstrip-scrollable-button-padding-y, #{$kendo-tabstrip-scrollable-button-padding-y} );
169
- padding-inline: var( --kendo-tabstrip-scrollable-button-padding-x, #{$kendo-tabstrip-scrollable-button-padding-x} );
170
- width: auto;
171
- height: auto;
172
- flex: none;
173
- align-self: stretch;
174
- aspect-ratio: auto;
175
-
176
- .k-button-icon {
177
- min-width: auto;
178
- min-height: auto;
179
- }
180
- }
181
173
  }
182
174
  }
183
175
 
package/scss/tabstrip/_variables.scss CHANGED
@@ -102,7 +102,7 @@ $kendo-tabstrip-item-selected-text: if($kendo-enable-color-system, k-color( on-a
102
102
  /// The border color of the selected TabStrip items.
103
103
  /// @group tabstrip
104
104
  $kendo-tabstrip-item-selected-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
105
- /// The background gradient of the selected TabStrip items.
105
+ /// The font weight of the selected TabStrip items.
106
106
  /// @group tabstrip
107
107
  $kendo-tabstrip-item-selected-font-weight: var( --kendo-font-weight-bold, normal ) !default;
108
108
  /// The shadow of the focused TabStrip items.