@progress/kendo-theme-fluent 8.0.0-dev.1 → 8.0.0-dev.10

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.
@@ -3,145 +3,149 @@
3
3
  @use "../list/_variables.scss" as *;
4
4
  @use "../core/spacing" as *;
5
5
 
6
- /// The horizontal padding of the tabstrip wrapper
6
+ /// The horizontal padding of the TabStrip wrapper.
7
7
  /// @group tabstrip
8
8
  $kendo-tabstrip-wrapper-padding-x: k-spacing(0) !default;
9
- /// The vertical padding of the tabstrip wrapper
9
+ /// The vertical padding of the TabStrip wrapper.
10
10
  /// @group tabstrip
11
11
  $kendo-tabstrip-wrapper-padding-y: k-spacing(0) !default;
12
- /// The width of the border around the tabstrip wrapper
12
+ /// The border width around the TabStrip wrapper.
13
13
  /// @group tabstrip
14
14
  $kendo-tabstrip-wrapper-border-width: 0px !default;
15
- /// The background color of the tabstrip wrapper
15
+ /// The background color of the TabStrip wrapper.
16
16
  /// @group tabstrip
17
17
  $kendo-tabstrip-wrapper-bg: transparent !default;
18
- /// The text color of the tabstrip wrapper
18
+ /// The text color of the TabStrip wrapper.
19
19
  /// @group tabstrip
20
20
  $kendo-tabstrip-wrapper-text: initial !default;
21
- /// The border color of the tabstrip wrapper
21
+ /// The border color of the TabStrip wrapper.
22
22
  /// @group tabstrip
23
23
  $kendo-tabstrip-wrapper-border: initial !default;
24
24
 
25
- /// The font family of the tabstrip
25
+ /// The font family of the TabStrip.
26
26
  /// @group tabstrip
27
27
  $kendo-tabstrip-font-family: var( --kendo-font-family, inherit ) !default;
28
- /// The font size of the tabstrip
28
+ /// The font size of the TabStrip.
29
29
  /// @group tabstrip
30
30
  $kendo-tabstrip-font-size: var( --kendo-font-size, inherit ) !default;
31
- /// The line height of the tabstrip
31
+ /// The line height of the TabStrip.
32
32
  /// @group tabstrip
33
33
  $kendo-tabstrip-line-height: var( --kendo-line-height, normal ) !default;
34
- /// The width of the border around the tabstrip
34
+ /// The border width around the TabStrip.
35
35
  /// @group tabstrip
36
36
  $kendo-tabstrip-border-width: 0px !default;
37
- /// The background color of the tabstrip
37
+ /// The background color of the TabStrip.
38
38
  /// @group tabstrip
39
39
  $kendo-tabstrip-bg: transparent !default;
40
- /// The text color of the tabstrip
40
+ /// The text color of the TabStrip.
41
41
  /// @group tabstrip
42
42
  $kendo-tabstrip-text: var( --kendo-component-text, initial ) !default;
43
- /// The border color of the tabstrip
43
+ /// The border color of the TabStrip.
44
44
  /// @group tabstrip
45
45
  $kendo-tabstrip-border: transparent !default;
46
46
 
47
- /// The horizontal padding of the tabstrip item
47
+ /// The horizontal padding of the TabStrip items.
48
48
  /// @group tabstrip
49
49
  $kendo-tabstrip-item-padding-x: var( --kendo-padding-x, #{$kendo-padding-md-x} ) !default;
50
- /// The vertical padding of the tabstrip item
50
+ /// The vertical padding of the TabStrip items.
51
51
  /// @group tabstrip
52
52
  $kendo-tabstrip-item-padding-y: calc( #{k-spacing(2)} + #{k-spacing(1)} ) !default;
53
- /// The width of the border around the tabstrip item
53
+ /// The border width around the TabStrip items.
54
54
  /// @group tabstrip
55
55
  $kendo-tabstrip-item-border-width: 0px !default;
56
- /// The border radius of the tabstrip item
56
+ /// The border radius of the TabStrip items.
57
57
  /// @group tabstrip
58
58
  $kendo-tabstrip-item-border-radius: k-border-radius(md) !default;
59
- /// The gap between the tabstrip items
59
+ /// The gap between the TabStrip items.
60
60
  /// @group tabstrip
61
61
  $kendo-tabstrip-item-gap: k-spacing(2) !default;
62
- /// The background color of the tabstrip item
62
+ /// The background color of the TabStrip items.
63
63
  /// @group tabstrip
64
64
  $kendo-tabstrip-item-bg: transparent !default;
65
- /// The text color of the tabstrip item
65
+ /// The text color of the TabStrip items.
66
66
  /// @group tabstrip
67
67
  $kendo-tabstrip-item-text: var( --kendo-component-text, initial ) !default;
68
- /// The border color of the tabstrip item
68
+ /// The border color of the TabStrip items.
69
69
  /// @group tabstrip
70
70
  $kendo-tabstrip-item-border: transparent !default;
71
- /// The text color of the disabled tabstrip item
71
+ /// The text color of the disabled TabStrip items.
72
72
  /// @group tabstrip
73
73
  $kendo-tabstrip-item-disabled-text: var( --kendo-disabled-text, initial ) !default;
74
- /// The background color of the disabled tabstrip item
74
+ /// The background color of the disabled TabStrip items.
75
75
  /// @group tabstrip
76
76
  $kendo-tabstrip-item-disabled-bg: none !default;
77
- /// The border color of the disabled tabstrip item
77
+ /// The border color of the disabled TabStrip items.
78
78
  /// @group tabstrip
79
79
  $kendo-tabstrip-item-disabled-border: var( --kendo-disabled-border, initial ) !default;
80
+ /// The opacity of the disabled TabStrip items.
81
+ /// @group tabstrip
80
82
  $kendo-tabstrip-item-disabled-opacity: null !default;
83
+ /// The filter of the disabled TabStrip items.
84
+ /// @group tabstrip
81
85
  $kendo-tabstrip-item-disabled-filter: null !default;
82
86
 
83
- /// The background color of hovered tabs
87
+ /// The background color of the hovered TabStrip items.
84
88
  /// @group tabstrip
85
89
  $kendo-tabstrip-item-hover-bg: var( --kendo-hover-bg, inherit ) !default;
86
- /// The text color of hovered tabs
90
+ /// The text color of the hovered TabStrip items.
87
91
  /// @group tabstrip
88
92
  $kendo-tabstrip-item-hover-text: var( --kendo-hover-text, inherit ) !default;
89
- /// The border color of hovered tabs
93
+ /// The border color of the hovered TabStrip items.
90
94
  /// @group tabstrip
91
95
  $kendo-tabstrip-item-hover-border: var( --kendo-hover-bg, inherit ) !default;
92
- /// The background color of selected tabs
96
+ /// The background color of the selected TabStrip items.
93
97
  /// @group tabstrip
94
98
  $kendo-tabstrip-item-selected-bg: var( --kendo-component-bg, transparent ) !default;
95
- /// The text color of selected tabs
99
+ /// The text color of the selected TabStrip items.
96
100
  /// @group tabstrip
97
101
  $kendo-tabstrip-item-selected-text: if($kendo-enable-color-system, k-color( on-app-surface ), k-get-theme-color-var( neutral-190 )) !default;
98
- /// The border color of selected tabs
102
+ /// The border color of the selected TabStrip items.
99
103
  /// @group tabstrip
100
104
  $kendo-tabstrip-item-selected-border: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
101
- /// The background gradient of selected tabs
105
+ /// The background gradient of the selected TabStrip items.
102
106
  /// @group tabstrip
103
107
  $kendo-tabstrip-item-selected-font-weight: var( --kendo-font-weight-bold, normal ) !default;
104
- /// The focus shadow of the tabstrip item
108
+ /// The shadow of the focused TabStrip items.
105
109
  /// @group tabstrip
106
110
  $kendo-tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;
107
- /// The text color of the sortable tabstrip item
111
+ /// The text color of the dragged TabStrip items.
108
112
  /// @group tabstrip
109
113
  $kendo-tabstrip-item-dragging-text: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
110
114
 
111
115
  // Indicator
112
- /// The border width of the tabstrip indicator
116
+ /// The border width of the TabStrip indicator.
113
117
  /// @group tabstrip
114
118
  $kendo-tabstrip-indicator-size: k-spacing(0.5) !default;
115
- /// The border color of the tabstrip ripple
119
+ /// The border color of the TabStrip ripple.
116
120
  /// @group tabstrip
117
121
  $kendo-tabstrip-indicator-color: if($kendo-enable-color-system, k-color( primary ), k-get-theme-color-var( primary-100 )) !default;
118
122
 
119
- /// The horizontal padding of tabstrip content
123
+ /// The horizontal padding of the TabStrip content.
120
124
  /// @group tabstrip
121
125
  $kendo-tabstrip-content-padding-x: k-spacing(3) !default;
122
- /// The vertical padding of tabstrip content
126
+ /// The vertical padding of the TabStrip content.
123
127
  /// @group tabstrip
124
128
  $kendo-tabstrip-content-padding-y: k-spacing(1.5) !default;
125
- /// The width of border around tabstrip content
129
+ /// The border width around the TabStrip content.
126
130
  /// @group tabstrip
127
131
  $kendo-tabstrip-content-border-width: 1px !default;
128
132
 
129
- /// The background color of tabstrip content
133
+ /// The background color of the TabStrip content.
130
134
  /// @group tabstrip
131
135
  $kendo-tabstrip-content-bg: var( --kendo-component-bg, transparent ) !default;
132
- /// The text color of tabstrip content
136
+ /// The text color of the TabStrip content.
133
137
  /// @group tabstrip
134
138
  $kendo-tabstrip-content-text: var( --kendo-component-text, inherit ) !default;
135
- /// The border color of tabstrip content
139
+ /// The border color of the TabStrip content.
136
140
  /// @group tabstrip
137
141
  $kendo-tabstrip-content-border: transparent !default;
138
- /// The border color of tabstrip focused content
142
+ /// The border color of the focused TabStrip content.
139
143
  /// @group tabstrip
140
144
  $kendo-tabstrip-content-focus-border: var( --kendo-component-text, initial ) !default;
141
145
 
142
- /// The horizontal button padding of the scrollable tabstrip
146
+ /// The horizontal button padding of the scrollable TabStrip.
143
147
  /// @group tabstrip
144
148
  $kendo-tabstrip-scrollable-button-padding-x: k-spacing(1) !default;
145
- // The vertical button padding of the scrollable tabstrip
149
+ // The vertical button padding of the scrollable TabStrip.
146
150
  /// @group tabstrip
147
151
  $kendo-tabstrip-scrollable-button-padding-y: k-spacing(1) !default;
@@ -25,7 +25,7 @@ $kendo-tooltip-line-height: var( --kendo-line-height, normal ) !default;
25
25
 
26
26
  /// The font size of the Tooltip title.
27
27
  /// @group tooltip
28
- $kendo-tooltip-title-font-size: calc( #{$kendo-tooltip-font-size} * 1.25 ) !default;
28
+ $kendo-tooltip-title-font-size: calc( var( --kendo-font-size-sm, .75rem ) * 1.25 ) !default;
29
29
  /// The line height of the Tooltip title.
30
30
  /// @group tooltip
31
31
  $kendo-tooltip-title-line-height: var( --kendo-line-heigh-xs, normal ) !default;
@@ -5,48 +5,121 @@
5
5
 
6
6
  // Headings
7
7
 
8
+ /// The font size of the highest level heading.
9
+ /// @group typography
8
10
  $kendo-h1-font-size: 32px !default;
11
+ /// The font size of the second highest level heading.
12
+ /// @group typography
9
13
  $kendo-h2-font-size: 28px !default;
14
+ /// The font size of the third highest level heading.
15
+ /// @group typography
10
16
  $kendo-h3-font-size: 24px !default;
17
+ /// The font size of the fourth highest level heading.
18
+ /// @group typography
11
19
  $kendo-h4-font-size: 20px !default;
20
+ /// The font size of the fifth highest level heading.
21
+ /// @group typography
12
22
  $kendo-h5-font-size: 18px !default;
23
+ /// The font size of the sixth highest level heading.
24
+ /// @group typography
13
25
  $kendo-h6-font-size: 16px !default;
14
26
 
27
+ /// The font family of the highest level heading.
28
+ /// @group typography
15
29
  $kendo-h1-font-family: var( --kendo-font-family, inherit ) !default;
30
+ /// The font family of the second highest level heading.
31
+ /// @group typography
16
32
  $kendo-h2-font-family: var( --kendo-font-family, inherit ) !default;
33
+ /// The font family of the third highest level heading.
34
+ /// @group typography
17
35
  $kendo-h3-font-family: var( --kendo-font-family, inherit ) !default;
36
+ /// The font family of the fourth highest level heading.
37
+ /// @group typography
18
38
  $kendo-h4-font-family: var( --kendo-font-family, inherit ) !default;
39
+ /// The font family of the fifth highest level heading.
40
+ ///
19
41
  $kendo-h5-font-family: var( --kendo-font-family, inherit ) !default;
42
+ /// The font family of the sixth highest level heading.
43
+ /// @group typography
20
44
  $kendo-h6-font-family: var( --kendo-font-family, inherit ) !default;
21
45
 
46
+ /// The line height of the highest level heading.
47
+ /// @group typography
22
48
  $kendo-h1-line-height: 40px !default;
49
+ /// The line height of the second highest level heading.
50
+ /// @group typography
23
51
  $kendo-h2-line-height: 36px !default;
52
+ /// The line height of the third highest level heading.
53
+ /// @group typography
24
54
  $kendo-h3-line-height: 32px !default;
55
+ /// The line height of the fourth highest level heading.
56
+ /// @group typography
25
57
  $kendo-h4-line-height: 28px !default;
58
+ /// The line height of the fifth highest level heading.
59
+ /// @group typography
26
60
  $kendo-h5-line-height: 24px !default;
61
+ /// The line height of the sixth highest level heading.
27
62
  $kendo-h6-line-height: 22px !default;
28
63
 
64
+ /// The font weight of the highest level heading.
65
+ /// @group typography
29
66
  $kendo-h2-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
67
+ /// The font weight of the second highest level heading.
68
+ /// @group typography
30
69
  $kendo-h1-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
70
+ /// The font weight of the third highest level heading.
71
+ /// @group typography
31
72
  $kendo-h3-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
73
+ /// The font weight of the fourth highest level heading.
74
+ /// @group typography
32
75
  $kendo-h4-font-weight: var( --kendo-font-weight-semibold, normal )!default;
76
+ /// The font weight of the fifth highest level heading.
77
+ /// @group typography
33
78
  $kendo-h5-font-weight: var( --kendo-font-weight-semibold, normal )!default;
79
+ /// The font weight of the sixth highest level heading.
80
+ /// @group typography
34
81
  $kendo-h6-font-weight: var( --kendo-font-weight-semibold, normal )!default;
35
82
 
83
+ /// The letter spacing of the highest level heading.
84
+ /// @group typography
36
85
  $kendo-h1-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
86
+ /// The letter spacing of the second highest level heading.
87
+ /// @group typography
37
88
  $kendo-h2-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
89
+ /// The letter spacing of the third highest level heading.
90
+ /// @group typography
38
91
  $kendo-h3-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
92
+ /// The letter spacing of the fourth highest level heading.
93
+ /// @group typography
39
94
  $kendo-h4-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
95
+ /// The letter spacing of the fifth highest level heading.
96
+ /// @group typography
40
97
  $kendo-h5-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
98
+ /// The letter spacing of the sixth highest level heading.
99
+ /// @group typography
41
100
  $kendo-h6-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
42
101
 
102
+ /// The margin of the highest level heading.
103
+ /// @group typography
43
104
  $kendo-h1-margin: 0 0 var( --kendo-font-size, inherit ) !default;
105
+ /// The margin of the second highest level heading.
106
+ /// @group typography
44
107
  $kendo-h2-margin: 0 0 var( --kendo-font-size, inherit ) !default;
108
+ /// The margin of the third highest level heading.
109
+ /// @group typography
45
110
  $kendo-h3-margin: 0 0 var( --kendo-font-size, inherit ) !default;
111
+ /// The margin of the fourth highest level heading.
112
+ /// @group typography
46
113
  $kendo-h4-margin: 0 0 var( --kendo-font-size, inherit ) !default;
114
+ /// The margin of the fifth highest level heading.
115
+ /// @group typography
47
116
  $kendo-h5-margin: 0 0 var( --kendo-font-size, inherit ) !default;
117
+ /// The margin of the sixth highest level heading.
118
+ /// @group typography
48
119
  $kendo-h6-margin: 0 0 var( --kendo-font-size, inherit ) !default;
49
120
 
121
+ /// The headings Map.
122
+ /// @group typography
50
123
  $kendo-headings: (
51
124
  h1: (
52
125
  font-size: $kendo-h1-font-size,
@@ -100,58 +173,140 @@ $kendo-headings: (
100
173
 
101
174
 
102
175
  // Paragraph
176
+
177
+ /// The margin of the paragraph.
178
+ /// @group typography
103
179
  $kendo-paragraph-margin: 0 0 var( --kendo-font-size, inherit) !default;
180
+ /// The font size of the paragraph.
181
+ /// @group typography
104
182
  $kendo-paragraph-font-size: var( --kendo-font-size, inherit) !default;
183
+ /// The font family of the paragraph.
184
+ /// @group typography
105
185
  $kendo-paragraph-font-family: var( --kendo-font-family, inherit ) !default;
186
+ /// The line height of the paragraph.
187
+ /// @group typography
106
188
  $kendo-paragraph-line-height: var( --kendo-line-height, normal) !default;
189
+ /// The font weight of the paragraph.
190
+ /// @group typography
107
191
  $kendo-paragraph-font-weight: var( --kendo-font-weight, normal) !default;
192
+ /// The letter spacing of the paragraph.
193
+ /// @group typography
108
194
  $kendo-paragraph-letter-spacing: var( --kendo-letter-spacing, normal) !default;
109
195
 
110
196
 
111
197
  // Code
198
+
199
+ /// The font size of the code tag.
200
+ /// @group typography
112
201
  $kendo-code-font-size: var( --kendo-font-size, inherit) !default;
202
+ /// The font family of the code tag.
203
+ /// @group typography
113
204
  $kendo-code-font-family: $kendo-font-family-monospace !default;
205
+ /// The line height of the code tag.
206
+ /// @group typography
114
207
  $kendo-code-line-height: var( --kendo-line-height, normal) !default;
208
+ /// The font weight of the code tag.
209
+ /// @group typography
115
210
  $kendo-code-font-weight: var( --kendo-font-weight, normal) !default;
211
+ /// The letter spacing of the code tag.
212
+ /// @group typography
116
213
  $kendo-code-letter-spacing: var( --kendo-letter-spacing, normal) !default;
117
214
 
215
+ /// The horizontal padding of the code tag.
216
+ /// @group typography
118
217
  $kendo-code-padding-x: k-spacing(1) !default;
218
+ /// The vertical padding of the code tag.
219
+ /// @group typography
119
220
  $kendo-code-padding-y: k-spacing(0) !default;
221
+ /// The horizontal padding of the preformatted text.
222
+ /// @group typography
120
223
  $kendo-pre-padding-x: k-spacing(6) !default;
224
+ /// The vertical padding of the preformatted text.
225
+ /// @group typography
121
226
  $kendo-pre-padding-y: k-spacing(4) !default;
227
+ /// The width of the border of the code tag.
228
+ /// @group typography
122
229
  $kendo-code-border-width: 1px !default;
123
230
 
231
+ /// The background color of the code tag.
232
+ /// @group typography
124
233
  $kendo-code-bg: var( --kendo-component-bg, initial) !default;
234
+ /// The text color of the code tag.
235
+ /// @group typography
125
236
  $kendo-code-text: var( --kendo-component-text, initial) !default;
237
+ /// The border color of the code tag.
238
+ /// @group typography
126
239
  $kendo-code-border: var( --kendo-component-border, initial) !default;
127
240
 
128
-
129
241
  // Display
130
- $kendo-display1-font-size: calc( var( --kendo-font-size, inherit ) * 9 ) !default;
131
- $kendo-display2-font-size: calc( var( --kendo-font-size, inherit ) * 6 ) !default;
242
+
243
+ /// The font size of the largest display text.
244
+ /// @group typography
245
+ $kendo-display1-font-size: calc( var( --kendo-font-size, .875rem ) * 9 ) !default;
246
+ /// The font size of the second largest display text.
247
+ /// @group typography
248
+ $kendo-display2-font-size: calc( var( --kendo-font-size, .875rem ) * 6 ) !default;
249
+ /// The font size of the third largest display text.
250
+ /// @group typography
132
251
  $kendo-display3-font-size: 68px !default;
133
- $kendo-display4-font-size: calc( var( --kendo-font-size, inherit ) * 3 ) !default;
252
+ /// The font size of the fourth largest display text.
253
+ /// @group typography
254
+ $kendo-display4-font-size: calc( var( --kendo-font-size, .875rem ) * 3 ) !default;
134
255
 
256
+ /// The font family of the largest display text.
257
+ /// @group typography
135
258
  $kendo-display1-font-family: var( --kendo-font-family, inherit ) !default;
259
+ /// The font family of the second largest display text.
260
+ /// @group typography
136
261
  $kendo-display2-font-family: var( --kendo-font-family, inherit ) !default;
262
+ /// The font family of the third largest display text.
263
+ /// @group typography
137
264
  $kendo-display3-font-family: var( --kendo-font-family, inherit ) !default;
265
+ /// The font family of the fourth largest display text.
266
+ /// @group typography
138
267
  $kendo-display4-font-family: var( --kendo-font-family, inherit ) !default;
139
268
 
269
+ /// The line height of the largest display text.
270
+ /// @group typography
140
271
  $kendo-display1-line-height: 118px !default;
272
+ /// The line height of the second largest display text.
273
+ /// @group typography
141
274
  $kendo-display2-line-height: 94px !default;
275
+ /// The line height of the third largest display text.
276
+ /// @group typography
142
277
  $kendo-display3-line-height: 76px !default;
278
+ /// The line height of the fourth largest display text.
279
+ /// @group typography
143
280
  $kendo-display4-line-height: 52px !default;
144
281
 
282
+ /// The font weight of the largest display text.
283
+ /// @group typography
145
284
  $kendo-display1-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
285
+ /// The font weight of the second largest display text.
286
+ /// @group typography
146
287
  $kendo-display2-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
288
+ /// The font weight of the third largest display text.
289
+ /// @group typography
147
290
  $kendo-display3-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
291
+ /// The font weight of the fourth largest display text.
292
+ /// @group typography
148
293
  $kendo-display4-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
149
294
 
295
+ /// The letter spacing of the largest display text.
296
+ /// @group typography
150
297
  $kendo-display1-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
298
+ /// The letter spacing of the second largest display text.
299
+ /// @group typography
151
300
  $kendo-display2-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
301
+ /// The letter spacing of the third largest display text.
302
+ /// @group typography
152
303
  $kendo-display3-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
304
+ /// The letter spacing of the fourth largest display text.
305
+ /// @group typography
153
306
  $kendo-display4-letter-spacing: var( --kendo-letter-spacing, normal ) !default;
154
307
 
308
+ /// The displays Map.
309
+ /// @group typography
155
310
  $kendo-display: (
156
311
  1: (
157
312
  font-size: $kendo-display1-font-size,