@progress/kendo-theme-fluent 6.6.1-dev.0 → 6.7.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.
@@ -3,7 +3,7 @@
3
3
  "name": "All",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-fluent",
6
- "version": "6.6.1-dev.0",
6
+ "version": "6.7.0-dev.0",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#ffffff",
@@ -3,7 +3,7 @@
3
3
  "name": "Fluent Main",
4
4
  "product": "kendo",
5
5
  "base": "@progress/kendo-theme-fluent",
6
- "version": "6.6.1-dev.0",
6
+ "version": "6.7.0-dev.0",
7
7
  "api": "modern",
8
8
  "previewColors": [
9
9
  "#ffffff",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-theme-fluent",
3
3
  "description": "A css variables based theme for Kendo UI that follows the Fluent design system guidelines.",
4
- "version": "6.6.1-dev.0",
4
+ "version": "6.7.0-dev.0",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -52,8 +52,8 @@
52
52
  },
53
53
  "dependencies": {
54
54
  "@progress/kendo-font-icons": "1.8.0",
55
- "@progress/kendo-theme-core": "6.6.1-dev.0",
56
- "@progress/kendo-theme-utils": "6.6.1-dev.0"
55
+ "@progress/kendo-theme-core": "6.7.0-dev.0",
56
+ "@progress/kendo-theme-utils": "6.7.0-dev.0"
57
57
  },
58
- "gitHead": "9b4a24c9966f1f719705ae2222a1c2a2667ba839"
58
+ "gitHead": "dca7760b1c668eca96ff626ff9ec6dc6bdf5a3d3"
59
59
  }
@@ -1,3 +1,4 @@
1
+ @use "sass:map";
1
2
  @use "../core/" as *;
2
3
  @use "./_variables.scss" as *;
3
4
 
@@ -14,8 +15,8 @@
14
15
  box-sizing: border-box;
15
16
  outline: 0;
16
17
  font-family: var( --kendo-breadcrumb-font-family, #{$kendo-breadcrumb-font-family} );
17
- font-size: var( --kendo-breadcrumb-font-size, #{$kendo-breadcrumb-font-size} );
18
- line-height: var( --kendo-breadcrumb-line-height, #{$kendo-breadcrumb-line-height} );
18
+ font-size: var( --INTERNAL--kendo-breadcrumb-font-size, #{$kendo-breadcrumb-font-size} );
19
+ line-height: var( --INTERNAL--kendo-breadcrumb-line-height, #{$kendo-breadcrumb-line-height} );
19
20
  display: flex;
20
21
  flex-direction: row;
21
22
  -webkit-touch-callout: none;
@@ -67,8 +68,8 @@
67
68
  .k-breadcrumb-link,
68
69
  .k-breadcrumb-root-link {
69
70
  @include border-radius( var( --kendo-breadcrumb-border-radius, #{$kendo-breadcrumb-link-border-radius} ) );
70
- padding-inline: var( --kendo-breadcrumb-link-padding-x, #{$kendo-breadcrumb-link-padding-x} );
71
- padding-block: var( --kendo-breadcrumb-link-padding-y, #{$kendo-breadcrumb-link-padding-y} );
71
+ padding-inline: var( --INTERNAL--kendo-breadcrumb-link-padding-x, #{$kendo-breadcrumb-link-padding-x} );
72
+ padding-block: var( --INTERNAL--kendo-breadcrumb-link-padding-y, #{$kendo-breadcrumb-link-padding-y} );
72
73
  color: var( --kendo-breadcrumb-link-initial-text, #{$kendo-breadcrumb-link-initial-text} );
73
74
  text-decoration: none;
74
75
  white-space: nowrap;
@@ -92,10 +93,6 @@
92
93
  }
93
94
  }
94
95
 
95
- .k-breadcrumb-root-link {
96
- margin-inline-end: var( --kendo-breadcrumb-root-link-spacing, #{$kendo-breadcrumb-root-link-spacing} );
97
- }
98
-
99
96
  .k-breadcrumb-link > .k-image,
100
97
  .k-breadcrumb-icontext-link .k-icon,
101
98
  .k-breadcrumb-icontext-link .k-svg-icon {
@@ -103,8 +100,8 @@
103
100
  }
104
101
 
105
102
  .k-breadcrumb-icon-link {
106
- padding-inline: var( --kendo-breadcrumb-icon-link-padding-x, #{$kendo-breadcrumb-icon-link-padding-x} );
107
- padding-block: var( --kendo-breadcrumb-icon-link-padding-y, #{$kendo-breadcrumb-icon-link-padding-y} );
103
+ padding-inline: var( --INTERNAL--kendo-breadcrumb-icon-link-padding-x, #{$kendo-breadcrumb-icon-link-padding-x} );
104
+ padding-block: var( --INTERNAL--kendo-breadcrumb-icon-link-padding-y, #{$kendo-breadcrumb-icon-link-padding-y} );
108
105
  }
109
106
 
110
107
 
@@ -124,4 +121,34 @@
124
121
  }
125
122
  }
126
123
 
124
+
125
+ // Sizing
126
+ @each $size, $size-props in $kendo-breadcrumb-sizes {
127
+ $_link-padding-x: map.get( $size-props, link-padding-x );
128
+ $_link-padding-y: map.get( $size-props, link-padding-y );
129
+ $_icon-link-padding-x: map.get( $size-props, icon-link-padding-x );
130
+ $_icon-link-padding-y: map.get( $size-props, icon-link-padding-y );
131
+ $_font-size: map.get( $size-props, font-size );
132
+ $_line-height: map.get( $size-props, line-height );
133
+
134
+ // Breadcrumb sizes
135
+ .k-breadcrumb-#{$size} {
136
+ --INTERNAL--kendo-breadcrumb-font-size: var( --kendo-breadcrumb-#{$size}-font-size, #{$_font-size} );
137
+ --INTERNAL--kendo-breadcrumb-line-height: var( --kendo-breadcrumb-#{$size}-line-height, #{$_line-height} );
138
+
139
+ // Breadcrumb links
140
+ .k-breadcrumb-link,
141
+ .k-breadcrumb-root-link {
142
+ --INTERNAL--kendo-breadcrumb-link-padding-x: var( --kendo-breadcrumb-#{$size}-link-padding-x, #{$_link-padding-x} );
143
+ --INTERNAL--kendo-breadcrumb-link-padding-y: var( --kendo-breadcrumb-#{$size}-link-padding-y, #{$_link-padding-y} );
144
+ }
145
+
146
+ // Breadcrumb icon links
147
+ .k-breadcrumb-icon-link {
148
+ --INTERNAL--kendo-breadcrumb-icon-link-padding-x: var( --kendo-breadcrumb-#{$size}-icon-link-padding-x, #{$_icon-link-padding-x} );
149
+ --INTERNAL--kendo-breadcrumb-icon-link-padding-y: var( --kendo-breadcrumb-#{$size}-icon-link-padding-y, #{$_icon-link-padding-y} );
150
+ }
151
+ }
152
+ }
153
+
127
154
  }
@@ -2,62 +2,105 @@
2
2
  @use "../core/" as *;
3
3
  @use "../icon/_variables.scss" as *;
4
4
 
5
- /// The horizontal margin of the breadcrumb
5
+ /// The horizontal margin of the Breadcrumb
6
6
  /// @group breadcrumb
7
7
  $kendo-breadcrumb-margin-x: 0px !default;
8
- /// The vertical margin of the breadcrumb
8
+ /// The vertical margin of the Breadcrumb
9
9
  /// @group breadcrumb
10
10
  $kendo-breadcrumb-margin-y: 0px !default;
11
- /// The horizontal padding of the breadcrumb
11
+ /// The horizontal padding of the Breadcrumb
12
12
  /// @group breadcrumb
13
13
  $kendo-breadcrumb-padding-x: 0px !default;
14
- /// The vertical padding of the breadcrumb
14
+ /// The vertical padding of the Breadcrumb
15
15
  /// @group breadcrumb
16
16
  $kendo-breadcrumb-padding-y: 0px !default;
17
- /// The width of the border around the breadcrumb
17
+
18
+ /// The width of the border around the Breadcrumb
18
19
  /// @group breadcrumb
19
20
  $kendo-breadcrumb-border-width: 0px !default;
20
- /// The font family of the breadcrumb
21
+
22
+ /// The font family of the Breadcrumb
21
23
  /// @group breadcrumb
22
24
  $kendo-breadcrumb-font-family: var( --kendo-font-family, inherit ) !default;
23
- /// The font size of the breadcrumb
25
+ /// The font size of the Breadcrumb
26
+
24
27
  /// @group breadcrumb
25
28
  $kendo-breadcrumb-font-size: var( --kendo-font-size, inherit ) !default;
26
- /// The line height of the breadcrumb
29
+ /// The font size of the small breadcrumb.
30
+ /// @group breadcrumb
31
+ $kendo-breadcrumb-sm-font-size: var( --kendo-font-size-md, inherit ) !default;
32
+ /// The font size of the medium breadcrumb.
33
+ /// @group breadcrumb
34
+ $kendo-breadcrumb-md-font-size: var( --kendo-font-size-md, inherit ) !default;
35
+ /// The font size of the large breadcrumb.
36
+ /// @group breadcrumb
37
+ $kendo-breadcrumb-lg-font-size: var( --kendo-font-size-md, inherit ) !default;
38
+
39
+ /// The line height used along with the $kendo-font-size variable of the Breadcrumb.
27
40
  /// @group breadcrumb
28
41
  $kendo-breadcrumb-line-height: var( --kendo-line-height, normal ) !default;
29
- /// The background color of the breadcrumb
42
+ /// The line height used along with the $kendo-font-size variable of the small breadcrumb.
43
+ /// @group breadcrumb
44
+ $kendo-breadcrumb-sm-line-height: var( --kendo-line-height, normal ) !default;
45
+ /// The line height used along with the $kendo-font-size variable of the medium breadcrumb.
46
+ /// @group breadcrumb
47
+ $kendo-breadcrumb-md-line-height: var( --kendo-line-height, normal ) !default;
48
+ /// The line height used along with the $kendo-font-size variable of the large breadcrumb.
49
+ /// @group breadcrumb
50
+ $kendo-breadcrumb-lg-line-height: var( --kendo-line-height, normal ) !default;
51
+
52
+ /// The background color of the Breadcrumb
30
53
  /// @group breadcrumb
31
54
  $kendo-breadcrumb-bg: var( --kendo-component-bg, initial ) !default;
32
- /// The text color of the breadcrumb
55
+ /// The text color of the Breadcrumb
33
56
  /// @group breadcrumb
34
- $kendo-breadcrumb-text: k-get-theme-color-var( neutral-130 ) !default;
35
- /// The border color of the breadcrumb
57
+ $kendo-breadcrumb-text: get-theme-color-var( neutral-130 ) !default;
58
+ /// The border color of the Breadcrumb
36
59
  /// @group breadcrumb
37
60
  $kendo-breadcrumb-border: transparent !default;
38
61
  /// The box shadow of the focused breadcrumb
39
62
  /// @group breadcrumb
40
63
  $kendo-breadcrumb-focus-shadow: 0 0 0 1px k-get-theme-color-var( neutral-30 ) !default;
41
64
 
42
- /// The horizontal padding of the breadcrumb link
65
+ /// The horizontal padding of the Breadcrumb link
43
66
  /// @group breadcrumb
44
67
  $kendo-breadcrumb-link-padding-x: map.get( $kendo-spacing, 2 ) !default;
45
- /// The vertical padding of the breadcrumb link
68
+ /// The horizontal padding of the small Breadcrumb link.
69
+ /// @group breadcrumb
70
+ $kendo-breadcrumb-sm-link-padding-x: map.get( $kendo-spacing, 2 ) !default;
71
+ /// The horizontal padding of the medium Breadcrumb link.
72
+ /// @group breadcrumb
73
+ $kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
74
+ /// The horizontal padding of the large Breadcrumb link.
75
+ /// @group breadcrumb
76
+ $kendo-breadcrumb-lg-link-padding-x: map.get( $kendo-spacing, 2 ) !default;
77
+
78
+ /// The vertical padding of the Breadcrumb link
79
+ /// @group breadcrumb
80
+ $kendo-breadcrumb-link-padding-y: map.get( $kendo-spacing, 2 ) !default;
81
+ /// The vertical padding of the small Breadcrumb link.
46
82
  /// @group breadcrumb
47
- $kendo-breadcrumb-link-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
48
- /// The radius of the border around the breadcrumb link
83
+ $kendo-breadcrumb-sm-link-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
84
+ /// The vertical padding of the medium Breadcrumb link.
85
+ /// @group breadcrumb
86
+ $kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default;
87
+ /// The vertical padding of the large Breadcrumb link.
88
+ /// @group breadcrumb
89
+ $kendo-breadcrumb-lg-link-padding-y: map.get( $kendo-spacing, 2.5 ) !default;
90
+
91
+ /// The radius of the border around the Breadcrumb link
49
92
  /// @group breadcrumb
50
93
  $kendo-breadcrumb-link-border-radius: 0px !default;
51
- /// The initial text color of the breadcrumb link
94
+ /// The initial text color of the Breadcrumb link
52
95
  /// @group breadcrumb
53
96
  $kendo-breadcrumb-link-initial-text: inherit !default;
54
- /// The background color of the breadcrumb link
97
+ /// The background color of the Breadcrumb link
55
98
  /// @group breadcrumb
56
99
  $kendo-breadcrumb-link-bg: transparent !default;
57
- /// The text color of the breadcrumb link
100
+ /// The text color of the Breadcrumb link
58
101
  /// @group breadcrumb
59
- $kendo-breadcrumb-link-text: k-get-theme-color-var( neutral-130 ) !default;
60
- /// The borer color of the breadcrumb link
102
+ $kendo-breadcrumb-link-text: get-theme-color-var( neutral-130 ) !default;
103
+ /// The borer color of the Breadcrumb link
61
104
  /// @group breadcrumb
62
105
  $kendo-breadcrumb-link-border: transparent !default;
63
106
  /// The background color of the hovered breadcrumb link
@@ -86,8 +129,8 @@ $kendo-breadcrumb-link-focus-bg: transparent !default;
86
129
  $kendo-breadcrumb-link-focus-text: k-get-theme-color-var( neutral-190 ) !default;
87
130
  /// The box shadow of the focused breadcrumb link
88
131
  /// @group breadcrumb
89
- $kendo-breadcrumb-link-focus-shadow: inset 0 0 0 1px k-get-theme-color-var( neutral-130 ) !default;
90
- /// The focus and hover background color of the breadcrumb link
132
+ $kendo-breadcrumb-link-focus-shadow: inset 0 0 0 1px get-theme-color-var( neutral-130 ) !default;
133
+ /// The focus and hover background color of the Breadcrumb link
91
134
  /// @group breadcrumb
92
135
  $kendo-breadcrumb-link-focus-hover-bg: var( --kendo-hover-bg, initial ) !default;
93
136
  /// The background color of the disabled breadcrumb link
@@ -99,7 +142,7 @@ $kendo-breadcrumb-link-disabled-text: var( --kendo-disabled-text, initial ) !def
99
142
  /// The border color of the disabled breadcrumb link
100
143
  /// @group breadcrumb
101
144
  $kendo-breadcrumb-link-disabled-border: none !default;
102
- /// The background color of selected the breadcrumb link
145
+ /// The background color of selected the Breadcrumb link
103
146
  /// @group breadcrumb
104
147
  $kendo-breadcrumb-link-selected-bg: var( --kendo-component-bg, initial ) !default;
105
148
  /// The text color of the selected breadcrumb link
@@ -112,13 +155,13 @@ $kendo-breadcrumb-link-selected-border: transparent !default;
112
155
  /// @group breadcrumb
113
156
  $kendo-breadcrumb-link-selected-font-weight: var( --kendo-font-weight-bold, bold ) !default;
114
157
 
115
- /// The background color of the breadcrumb root link
158
+ /// The background color of the Breadcrumb root link
116
159
  /// @group breadcrumb
117
160
  $kendo-breadcrumb-root-link-bg: $kendo-breadcrumb-link-bg !default;
118
- /// The text color of the breadcrumb root link
161
+ /// The text color of the Breadcrumb root link
119
162
  /// @group breadcrumb
120
163
  $kendo-breadcrumb-root-link-text: $kendo-breadcrumb-link-text !default;
121
- /// The border color of the breadcrumb root link
164
+ /// The border color of the Breadcrumb root link
122
165
  /// @group breadcrumb
123
166
  $kendo-breadcrumb-root-link-border: $kendo-breadcrumb-link-border !default;
124
167
  /// The background color of the hovered breadcrumb root link
@@ -148,7 +191,7 @@ $kendo-breadcrumb-root-link-focus-text: $kendo-breadcrumb-link-focus-text !defau
148
191
  /// The border color of the focused breadcrumb root link
149
192
  /// @group breadcrumb
150
193
  $kendo-breadcrumb-root-link-focus-shadow: $kendo-breadcrumb-link-focus-shadow !default;
151
- /// The focus and hover background color of the breadcrumb root link
194
+ /// The focus and hover background color of the Breadcrumb root link
152
195
  /// @group breadcrumb
153
196
  $kendo-breadcrumb-root-link-focus-hover-bg: $kendo-breadcrumb-link-focus-hover-bg !default;
154
197
  /// The text color of the disabled breadcrumb root link
@@ -159,13 +202,61 @@ $kendo-breadcrumb-current-item-bg: null !default;
159
202
  $kendo-breadcrumb-current-item-text: null !default;
160
203
  $kendo-breadcrumb-current-item-border: null !default;
161
204
 
162
- /// The horizontal padding of the breadcrumb link icon
205
+ /// The vertical padding of the Breadcrumb link icon
206
+ /// @group breadcrumb
207
+ $kendo-breadcrumb-icon-link-padding-y: map.get( $kendo-spacing, 2.5 ) !default;
208
+ /// The vertical padding of the small Breadcrumb link icon.
209
+ /// @group breadcrumb
210
+ $kendo-breadcrumb-sm-icon-link-padding-y: map.get( $kendo-spacing, 2 ) !default;
211
+ /// The vertical padding of the medium Breadcrumb link icon.
212
+ /// @group breadcrumb
213
+ $kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default;
214
+ /// The vertical padding of the large Breadcrumb link icon.
215
+ /// @group breadcrumb
216
+ $kendo-breadcrumb-lg-icon-link-padding-y: map.get( $kendo-spacing, 3 ) !default;
217
+
218
+ /// The horizontal padding of the Breadcrumb link icon
219
+ /// @group breadcrumb
220
+ $kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-y !default;
221
+ /// The horizontal padding of the small Breadcrumb link icon.
163
222
  /// @group breadcrumb
164
- $kendo-breadcrumb-icon-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
165
- /// The vertical padding of the breadcrumb link icon
223
+ $kendo-breadcrumb-sm-icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-y !default;
224
+ /// The horizontal padding of the medium Breadcrumb link icon.
166
225
  /// @group breadcrumb
167
- $kendo-breadcrumb-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-x !default;
226
+ $kendo-breadcrumb-md-icon-link-padding-x: $kendo-breadcrumb-icon-link-padding-x !default;
227
+ /// The horizontal padding of the large Breadcrumb link icon.
228
+ /// @group breadcrumb
229
+ $kendo-breadcrumb-lg-icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-y !default;
168
230
 
169
231
  // Root link spacing
170
- $kendo-breadcrumb-root-link-spacing: 0px !default;
171
232
  $kendo-breadcrumb-link-icon-spacing: var( --kendo-icon-spacing, #{$kendo-icon-spacing} ) !default;
233
+
234
+
235
+ /// The sizes map for the Breadcrumb.
236
+ /// @group breadcrumb
237
+ $kendo-breadcrumb-sizes: (
238
+ sm: (
239
+ link-padding-x: $kendo-breadcrumb-sm-link-padding-x,
240
+ link-padding-y: $kendo-breadcrumb-sm-link-padding-y,
241
+ icon-link-padding-x: $kendo-breadcrumb-sm-icon-link-padding-x,
242
+ icon-link-padding-y: $kendo-breadcrumb-sm-icon-link-padding-y,
243
+ font-size: $kendo-breadcrumb-sm-font-size,
244
+ line-height: $kendo-breadcrumb-sm-line-height
245
+ ),
246
+ md: (
247
+ link-padding-x: $kendo-breadcrumb-md-link-padding-x,
248
+ link-padding-y: $kendo-breadcrumb-md-link-padding-y,
249
+ icon-link-padding-x: $kendo-breadcrumb-md-icon-link-padding-x,
250
+ icon-link-padding-y: $kendo-breadcrumb-md-icon-link-padding-y,
251
+ font-size: $kendo-breadcrumb-md-font-size,
252
+ line-height: $kendo-breadcrumb-md-line-height
253
+ ),
254
+ lg: (
255
+ link-padding-x: $kendo-breadcrumb-lg-link-padding-x,
256
+ link-padding-y: $kendo-breadcrumb-lg-link-padding-y,
257
+ icon-link-padding-x: $kendo-breadcrumb-lg-icon-link-padding-x,
258
+ icon-link-padding-y: $kendo-breadcrumb-lg-icon-link-padding-y,
259
+ font-size: $kendo-breadcrumb-lg-font-size,
260
+ line-height: $kendo-breadcrumb-lg-line-height
261
+ )
262
+ ) !default;